Scribd
Upload
24 views40 pages

Satya Sai HTML File

Uploaded by

rajimedicherlae
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
24 views40 pages

Satya Sai HTML File

Uploaded by

rajimedicherlae
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 40

Table of Contents

Lab Program Date Signature


No.

10

11

12

13

14

15

16

17

18

19

20

21
Name:Medicherla naga sri Venkata siva satya sai

Roll No. : 2kK24CSUN01325


Class: BTECH CSTI

2.1 Creating an unordered list in HTML displaying the ingredients for a


particular recipe including other details like method of preparation, time for
preparation, no of people who could be served etc and links to other related
pages like definition of a particular ingredient and its synonyms etc and also
use the nested unordered lists for the same problem.

<html>
<head>
<title>Pizza Recipe</title>
</head>
<style>
body {
background-image:
url('https://img.freepik.com/premium-photo/minimalist-pizza-
background_1009245-802.jpg');
background-repeat: no-repeat;
background-size: cover; /* This makes the background image cover the
whole page */
background-position: center; /* This centers the background image */
}
</style>
<font color="white"><hr align="right">
<h1>Recipe: Homemade Pizza</h1>

<h2>Details</h2>
<ul>
<li>Preparation Time:30 minutes</li>
<li>Serves: 4 people</li>
</ul>

<h2>Ingredients</h2>
<ul>
<li>2 pizza base
</li>
<li> pizza pasta sauce of any brand</li>
<li>1 teaspoon red chili flakes</li>
<li>1 teaspoon Italian herbs (or dried oregano)</li>
<li>200 grams mozzarella cheese (grated)</li>
<li>1 ½ cups mixed vegetables (sliced or cubed, e.g., capsicum, onions,
olives, tomatoes, mushrooms)</li>
</ul>

<h2>Method of Preparation</h2>
<ul>
<li>Assemble the Pizza:
<ul>
<li>take your pizza base</li>
<li>Spread the pizza pasta sauce evenly over the dough.</li>
<li>Sprinkle grated mozzarella cheese over the sauce.</li>
<li>Add your favorite toppings (mixed vegetables, olives, etc.).</li>
<li>Sprinkle Italian herbs and red chili flakes on top.</li>
</ul>
</li>
<li>Bake:
<ul>
<li>Bake the pizza in the preheated oven for 12-15 minutes or until
the crust is golden and the cheese is bubbly and melted.</li>
<li>Remove from the oven and let it cool for a few minutes before
slicing and serving.</li>
<li>now enjoy your pizza</li>
</ul>
</li>
</ul>
</font></hr>
</body>
</html>
2.2 Creating an ordered list in HTML which represents the index of a book
displaying the main topic and list of all the sub topics and sub topics
comprising the main one, thereby making use of the nested ordered lists.

<html>
<head>
<title>Book Index</title>
</head>
<body>
<h1>Book Index</h1>
<ol>
<li>Main Topic 1
<ol>
<li>Sub Topic 1.1
<ol>
<li>Sub Topic 1.1.1</li>
<li>Sub Topic 1.1.2</li>
</ol>
</li>
<li>Sub Topic 1.2</li>
</ol>
</li>
<li>Main Topic 2
<ol>
<li>Sub Topic 2.1</li>
<li>Sub Topic 2.2
<ol>
<li>Sub Topic 2.2.1</li>
<li>Sub Topic 2.2.2</li>
</ol>
</li>
</ol>
</li>
<li>Main Topic 3</li>
</ol>
</body>
</html>
2.3 Design a web page using the image ‘House.gif’, ‘Javacup.gif’ and
‘Computer.gif’ according to the following specifications:
a) Use a border for ‘House.gif’.
b) Resize the width and height of ‘Javacup.gif’ and ‘Computer.gif’ to 100
pixels each.
c) Align the text with respect to the images.

<html>
<head>
<title>program 2</title>
</head>
<body>
<img src="C:\Users\ Downloads\house-animation-lag.gif" border="5" width="250" ,
height="250"><br>
<h2> A house is a building that is made for people to live in. It is usually built for a family
(parents and their children). It is a "permanent" building that is meant to stay standing
</h2><br>
<img src="C:\Users\ Downloads\cup.gif" width="100", height="100"><br>
<h2>Java Cup is a parser generator that produces a parser written in Java</h2><br>

<img src="C:\Users\ OneDrive\Pictures\computer.gif" width="100", height="100"><br>


<h2> Computer : is an electronic device that operates (works) under the control of
programs stored in its own memory unit. A computer is an electronic machine that
processes raw data to give information as output </h2><br>

</body>
</html>
2.4 Make 4 different web pages and create hyperlinks between them in such
a way that the first page (main page) displays the table of contents ( with
each content reflecting a hyperlink to one of the remaining three pages) and
each of the page containing links to the main page. Also specify a link that
will lead to a particular section within it.

First page
<html>
<HEAD>
<title>first page</title>
</head>
<style>
body {
background-image: url('https://preview.redd.it/z1vmo7fkas771.jpg?
width=640&crop=smart&auto=webp&s=6dabb30f419c4c981b3238e409c10b
b15bb5813f');
background-repeat: no-repeat;
background-size: cover; /* This makes the background image cover the
whole page */
background-position: center; /* This centers the background image */
}
</style>
<B><font color="orange" >HERE ARE THE LINKS OF OTHER PAGES</font></B>
<UL>
<LI><A HREF="HEAD PAGE">LINK OF MAIN PAGE</A></LI>
<li><a href="Second Page"> This is the link of second Page</a></li>
<li><a href="Third Page">This is the link of third Page</a></li>
</ul>
</body>
</html>

Second page
<html>
<HEAD>
<title>Second Page</title>
</HEAD>
<style>
body {
background-image: url('https://img.freepik.com/premium-photo/
1009245-802.jpg');
background-repeat: no-repeat;
background-size: cover; /* This makes the background image cover the
whole page */
background-position: center; /* This centers the background image */
}
</style><BODY BACKGROUND="C:\Users\shriy\OneDrive\Pictures\
second.jpg">
<B><font color="green" >HERE ARE THE LINKS OF OTHER PAGES</font></B>
<UL>
<LI><A HREF="HEAD PAGE">LINK OF MAIN PAGE</A></LI>
<li><a href="first page"> This is the link of second Page</a></li>
<li><a href="Third Page">This is the link of third Page</a></li>
</ul>
</body>
</html>

Third page
<html>
<HEAD>
<title>Second Page</title>
</head>
<style>
body {
background-image:
url('https://th.bing.com/th/id/OIP.yOP2jr5lcXkKALysJCD-TQHaJQ?
rs=1&pid=ImgDetMain');
background-repeat: no-repeat;
background-size: cover; /* This makes the background image cover the
whole page */
background-position: center; /* This centers the background image */
}
</style>
<B><font color="green" >HERE ARE THE LINKS OF OTHER PAGES</font></B>
<UL>
<LI><A HREF="HEAD PAGE">LINK OF MAIN PAGE</A></LI>
<li><a href="first page"> This is the link of second Page</a></li>
<li><a href="Third Page">This is the link of third Page</a></li>
</ul>
</body>
</html>

Fourth page
<html>
<HEAD>
<title>Third Page</title>
</HEAD>
<style>
body {
background-image:
url('https://img.freepik.com/premium-photo/.jpg');
background-repeat: no-repeat;
background-size: cover; /* This makes the
background image cover the whole page */
background-position: center; /* This centers
the background image */
}
</style><B><font color="red" >HERE ARE THE LINKS
OF OTHER PAGES</font></B>
<UL>
<LI><A HREF="HEAD PAGE">LINK OF MAIN
PAGE</A></LI>
<li><a href="first page"> This is the link of second
Page</a></li>
<li><a href="Second Page">This is the link of third
Page</a></li>
</ul>
</body>
</html>
3.1 Create an HTML file as follows:
<HTML>
<HEAD>
<TITLE>TABLE</TITLE>
</HEAD>
<BODY>
<TABLE BORDER="10" bordercolor="brown">
<TR bgcolor="lightgrey">
<td colspan="2"><B><U> Cable Connection:</u></b><br>Service:3000/300
kbps</td>
<td colspan="2"><b><u> DSL Connection:</u></b><br>Service:1536/160
kbps
</tr>
<tr>
<td bgcolor="orange"><b><u>Before:</u></b><br>Download:<br>1049
kbps<br>Upload:147<br>kbps</td>
<td bgcolor="skyblue"><b><u>After:</u></b><br>Download:<br>3280
kbps<br>Upload:500<br>kbps</td>
<td bgcolor="orange"><b><u>Before:</u></b><br>Download:<br>1172
kbps<br>Upload:315<br>kbps</td>
<td bgcolor="skyblue"><b><u>After:</u></b><br>Download:<br>2463
kbps<br>Upload:417<br>kbps</td>
</tr>
<tr bgcolor="pink">
<td colspan="2"><b>Net Increase:3.1 times</b></td>
<td colspan="2"><b>Net Increase:2.1 times</b></td>
</tr>
</body>
</html>

Output:

3.2 Using nested Table concept draw the table below:-


<html>
<head>
<title>Basic Frame Layout</title>
<style>
body {
display: flex;
margin: 0;
padding: 0;
height: 100vh;
font-family: Arial, sans-serif;
}

/* Left side - 3 vertical frames */


.left-frame {
width: 200px;
display: flex;
flex-direction: column;
border-right: 3px solid black;
}

.left-frame iframe {
flex: 1;
border: 2px solid black;
}

/* Right side - 1 description frame */


.right-frame {
flex: 1;
padding: 20px;
border-left: 3px solid black;
box-sizing: border-box;
}

</style>
</head>
<body>
<!-- Left Frame Section -->
<div class="left-frame">
<!-- Frame 1 -->
<iframe srcdoc="<p>Regristration Process</p>" title="Frame
1"></iframe>
<!-- Frame 2 -->
<iframe srcdoc="<p>Admission Process</p>" title="Frame 2"></iframe>
<!-- Frame 3 -->
<iframe srcdoc="<p>Contact Detail</p>" title="Frame 3"></iframe>
</div>

<!-- Right Frame Section -->


<div class="right-frame">
<h1>Description</h1>
<p>This is where the description will appear. You can describe your
website or anything you want in this space.</p>
</div>
</body>
</html>

4.2 Create a user login page form


<html>
<form action="/practice.php">
<input type="text" placeholder="Username"><br>
<input type="text" placeholder="Password">
<br><br><input type="text" placeholder="Submit">
</form>

4.3 Design an HTML page to accept Name (text box), Address (multiline
textbox), Gender (radio button), Qualification (single selection), Specialisation
(multiple selection), Languages (checkbox), Submit and Reset button.

<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Example</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="#" method="post">

<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br><br>

<label for="address">Address:</label><br>
<textarea id="address" name="address" rows="4" cols="50"
required></textarea><br><br>

<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female"
required>
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="Other" required>
<label for="other">Other</label><br><br>

<label for="qualification">Qualification:</label>
<select id="qualification" name="qualification" required>
<option value="High School">High School</option>
<option value="Bachelor's">Bachelor's</option>
<option value="Master's">Master's</option>
<option value="PhD">PhD</option>
</select><br><br>

<label for="specialisation">Specialisation:</label>
<select id="specialisation" name="specialisation" multiple required>
<option value="Engineering">Engineering</option>
<option value="Medicine">Medicine</option>
<option value="Arts">Arts</option>
<option value="Science">Science</option>
<option value="Commerce">Commerce</option>
</select><br><br>

<label>Languages Known:</label><br>
<input type="checkbox" id="english" name="languages"
value="English">
<label for="english">English</label><br>
<input type="checkbox" id="hindi" name="languages" value="Hindi">
<label for="hindi">Hindi</label><br>
<input type="checkbox" id="spanish" name="languages"
value="Spanish">
<label for="spanish">Spanish</label><br>
<input type="checkbox" id="french" name="languages" value="French">
<label for="french">French</label><br><br>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
5.1 An introduction to HTML5. HTML Vs HTML5.

Sol: HTML5: An Introduction


HTML5 is the latest version of HyperText Markup Language (HTML), the
standard language used to create and design web pages. It was introduced to
enhance the capabilities of HTML by incorporating new elements, attributes,
and behaviors, making it easier for developers to build robust, responsive,
and multimedia-rich websites and applications.
HTML vs. HTML5
Let's compare the two to highlight the advancements brought by HTML5.
Feature HTML HTML5
Doctype Complex and Simplified (<!DOCTYPE html>)
Declaration lengthy
Multimedia Requires plugins Native support with <audio> and
Support (Flash, Silverlight) <video> elements
Elements for Limited semantic Introduces semantic tags like
Structure tags <header>, <footer>, <article>,
<section>
Form Elements Limited types and New input types like date, time,
attributes email, and more, enhancing user
experience
APIs and Basic scripting Advanced APIs (Geolocation, Local
Features capabilities Storage, Web Workers, etc.)
Graphics and Needs external Native support with <canvas> and
Animation tools and plugins SVG

5.2 Create a webpage using HTML 5 DOCTYPE.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My HTML5 Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header, nav, main, footer {
padding: 20px;
margin: 10px;
}
header {
background-color: #f8f9fa;
}
nav {
background-color: #e9ecef;
}
main {
background-color: #ffffff;
}
footer {
background-color: #f8f9fa;
}
</style>
</head>
<body>
<header>
<h1>Welcome to My HTML5 Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section of the webpage.</p>
</section>
<section id="about">
<h2>About</h2>
<p>This is the about section of the webpage.</p>
</section>
<section id="contact">
<h2>Contact</h2>
<p>This is the contact section of the webpage.</p>
</section>
</main>
<footer>
<p>&copy; 2024 My HTML5 Webpage</
5.3 Create a webpage using various structural elements like <footer>,
<header>, <time>, <summary>, <section>, <nav>, <mark> etc.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML5 Webpage</title>
</head>
<body>
<header>
<h1>Welcome to My Basic HTML5 Webpage</h1>
<p>Current Date and Time: <time datetime="2024-11-
19T22:10">November 19, 2024, 22:10 IST</time></p>
</header>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
<main>
<section id="home">
<h2>Home</h2>
<p>This is the home section of the webpage. Explore our content and
enjoy your stay!</p>
</section>
<section id="about">
<h2>About</h2>
<p>This section contains information about our website. We aim to
provide high-quality content.</p>
</section>
<section id="services">
<h2>Services</h2>
<article>
<h3>Service 1</h3>
<p>We offer a range of services including web development, design,
and more.</p>
</article>
<article>
<h3>Service 2</h3>
<p>Our team is dedicated to providing top-notch services to meet
your needs.</p>
</article>
</section>
<section id="contact">
<h2>Contact</h2>
<p>You can reach us via email at
<mark>[email protected]</mark> for any inquiries.</p>
</section>
<section>
<h2>Frequently Asked Questions</h2>
<details>
<summary>What services do you offer?</summary>
<p>We offer web development, design, and consulting services.</p>
</details>
<details>
<summary>How can I get in touch?</summary>
<p>You can contact us via email at
<mark>[email protected]</mark>.</p>
</details>
</section>
</main>
<footer>
<p>&copy; 2024 My Basic HTML5 Webpage</p>
</footer>
</body>
</html>

6.1 Create a webpage form.

<!DOCTYPE html>
<html>
<head>
<title>Email</title>
</head>
<body>
<form>
<label for="email">Email</label>
<input type="email" id="email" name="email" placeholder="gordo"
required>
<small id="email-error" class="error-message">Please enter a valid email
address</small>
<div>Please enter a valid email address</div>
<label for="url">Url</label>
<input type="text" id="url" name="url" value="http://mysite.com">
</form>
</body>
</html>

6.2 Create a webpage


form.
html>
<head>
<title>Form</title>
<style>
body {
font-family: sans-serif;
}
.form-group {
margin-bottom: 15px;
}
.form-label {
display: block;
margin-bottom: 5px;
}
.form-control {
width: 100%;
padding: 5px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
.form-control:focus {
outline: none;
border-color: #337ab7;
box-shadow: 0 0 5px rgba(51, 123, 183, 0.5);
}
</style>
</head>
<body>
<form>
<div class="form-group">
<label class="form-label" for="number">Number:</label>
<input type="text" class="form-control" id="number" value="1">
</div>
<div class="form-group">
<label class="form-label" for="range">Range:</label>
<input type="range" class="form-control" id="range" min="0"
max="100">
</div>
<div class="form-group">
<label class="form-label" for="date">Date:</label>
<input type="text" class="form-control" id="date" value="2011-10-21">
</div>
<div class="form-group">
<label class="form-label" for="month">Month:</label>
<input type="text" class="form-control" id="month" value="2011-11">
</div>
<div class="form-group">
<label class="form-label" for="week">Week:</label>
<input type="text" class="form-control" id="week" value="201">
</body>
</html>

6.3 Create a webpage form.

<html>
<head>
<title>Single-Page Application</title>
<style>
body {
background-color: #f0f0f0;
font-family: sans-serif;
text-align: center;
}
.container {
background-color: #fff;
margin: 50px auto;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
width: 500px;
}
h1 {
color: #333;
margin-bottom: 20px;
}
input[type="text"], input[type="email"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
box-sizing: border-box;
}
button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}

/* New footer style */


footer {
background-color: #333;
color: #fff;
padding: 20px 0;
font-size: 14px;
text-align: center;
position: relative;
bottom: 0;
width: 100%;
}
footer a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
footer a:hover {
text-decoration: underline;
}

</style>
</head>
<body>
<div class="container">
<h1>Single-Page Application</h1>
<p>This is a single page boilerplate template that you can copy to build
your first jQuery Mobile page.</p>

<h2>Select your favorite color:</h2>


<input type="text" placeholder="Enter a hex color code">
<button>change background color</button>

<h2>Customer name:</h2>
<input type="text" placeholder="Jane Doe">

<h2>new customer:</h2>
<h2>Telephone:</h2>
<input type="text" placeholder="Enter phone number">

<h2>E-mail address:</h2>
<input type="email" placeholder="Enter email address">

<h2>Repeat e-mail address:</h2>


<input type="email" placeholder="Re-enter email address">
<button>goto order page</button>
</div>

<footer>
<p>&copy; 2024 Your Company. All Rights Reserved.</p>
<p><a href="#">Privacy Policy</a> | <a href="#">Terms of
Service</a></p>
</footer>
</body>
</html>

You might also like