Basic introduction to web development and HTML.
Practical 2: WAP to create basic structure in HTML.
CODE:
<html>
<head>
<title>introduction</title>
</head>
<body>
<p>
Introduction
</P>
</body>
</html>
Practical 3: Write HTML code to design a page containing some text in a paragraph by
giving suitable heading style.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Sample Text Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>
Sample text
</p>
</body>
</html>
Practical 4: WAP to create a web page using various HTML tags, apply formatting tags
and use color coding using inline styles.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Tags and Formatting</title>
</head>
<body style="background-color: #f0f8ff; color: #333333; font-family: Arial, sans-serif;">
<h1 style="color: darkblue;">Welcome to HTML Lab Practical</h1>
<h2 style="color: green;">Basic Formatting Tags</h2>
<p>This is a <b>bold</b> text.</p>
<p>This is an <i>italic</i> text.</p>
<p>This is an <u>underlined</u> text.</p>
<p>This is a <strong>strong</strong> text, and this is <em>emphasized</em>.</p>
<p>This is <mark style="background-color: yellow;">highlighted text</mark>.</p>
<h2 style="color: teal;">Using Color Coding</h2>
<p style="color: red;">This text is red.</p>
<p style="color: blue;">This text is blue.</p>
<p style="color: purple;">This text is purple.</p>
</body>
</html>
Practical 5: WAP to create a basic web page that demonstrates the use of ordered and
unordered lists using HTML.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Lists Practical</title>
</head>
<body>
<h1>HTML Lists Demonstration</h1>
<h2>Unordered List: Favorite Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
</ul>
<h2>Ordered List: Daily Routine</h2>
<ol>
<li>Wake up</li>
<li>Exercise</li>
<li>Have breakfast</li>
</ol>
</body>
</html>
Practical 6: WAP to create a table of three rows and three columns.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Student Table</title>
</head>
<body>
<h2>Student Details</h2>
<table border="1">
<tr>
<th>Roll No</th>
<th>Name</th>
<th>Class</th>
</tr>
<tr>
<td>roll no.</td>
<td>name</td>
<td>class</td>
</tr>
<tr>
<td>roll no</td>
<td>name</td>
<td>class</td>
</tr>
<tr>
<td>roll no</td>
<td>name</td>
<td>class</td>
</tr>
</table>
</body>
</html>
Practical 7: WAP that displays an image and a hyperlink on a web page.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Image and Link</title>
</head>
<body>
<h1>My Web Page</h1>
<p>Click the link below to visit Google:</p>
<a href="[Link] to Google</a>
<p>Below is an image:</p>
<img src="[Link] alt="Sample Image">
</body>
</html>
Practical 8: WAP that creates a simple user input form.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>HTML Form</title>
</head>
<body>
<h1>Registration Form</h1>
<form>
Name:<br>
<input type="text"><br><br>
Email:<br>
<input type="email"><br><br>
Password:<br>
<input type="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
Practical 9: WAP that creates a simple user form using button tag(Submit button, Reset
button, Normal (click) button).
CODE:
<!DOCTYPE html>
<html>
<head>
<title>User Form with All Buttons</title>
</head>
<body>
<h2>Simple User Form</h2>
<form action="#" method="post">
<label for="username">Name:</label><br>
<input type="text" id="username" name="username" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<!-- Submit button -->
<button type="submit">Submit</button>
<!-- Reset button -->
<button type="reset">Reset</button>
<!-- Normal button -->
<button type="button" onclick="alert('You clicked the normal button!')">Click
Me</button>
</form>
</body>
</html>
Practical 10: Write HTML program that uses the <marquee> tag to show scrolling text.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Marquee Example</title>
</head>
<body>
<h2>Example of Marquee Tag</h2>
<marquee>Welcome to my website!</marquee>
<marquee direction="right">This text scrolls to the right</marquee>
<marquee direction="up" height="100px">This text scrolls up</marquee>
<marquee direction="down" height="100px">This text scrolls down</marquee>
</body>
</html>
Practical 11: WAP that uses audio and video tags.
<!DOCTYPE html>
<html>
<head>
<title>Audio and Video Example</title>
</head>
<body>
<h2>Audio Example</h2>
<audio controls>
<source src="audiofile.mp3" type="audio/mpeg">
<source src="[Link]" type="audio/ogg">
Your browser does not support the audio element.
</audio>
<h2>Video Example</h2>
<video width="400" controls>
<source src="videofile.mp4" type="video/mp4">
<source src="[Link]" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Practical 12: WAP to create Personal Profile Page.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>My Personal Profile</title>
</head>
<body>
<h1>Name</h1>
<img src=" " alt=" " width="200">
<p>
Short bio
</p>
<h2>Contact Information</h2>
<ul>
<li>Email: </li>
<li>Phone: </li>
<li>Address: </li>
</ul>
</body>
</html>
Practical 13: WAP to create Registration form.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
</head>
<body>
<h2>Registration Form</h2>
<form action="#" method="post">
<!-- Name -->
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>
<!-- Email -->
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<!-- Password -->
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<!-- Gender -->
<label>Gender:</label><br>
<input type="radio" id="male" name="gender" value="Male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="Female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="Other">
<label for="other">Other</label><br><br>
<!-- Interests -->
<label>Interests:</label><br>
<input type="checkbox" id="sports" name="interests" value="Sports">
<label for="sports">Sports</label><br>
<input type="checkbox" id="music" name="interests" value="Music">
<label for="music">Music</label><br>
<input type="checkbox" id="reading" name="interests" value="Reading">
<label for="reading">Reading</label><br><br>
<!-- Submit and Reset buttons -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>
Practical 14: WAP to create a login page with sign in button.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h2>Login Page</h2>
<form action="#" method="post">
<!-- Username -->
<label for="username">Username:</label><br>
<input type="text" id="username" name="username" required><br><br>
<!-- Password -->
<label for="password">Password:</label><br>
<input type="password" id="password" name="password" required><br><br>
<!-- Sign In button -->
<button type="submit">Sign In</button>
</form>
</body>
</html>
Practical 15: WAP to create a webpage demonstrating the use of different types of CSS:
inline, internal and external.
CODE:
<!DOCTYPE html>
<html>
<head>
<title>CSS Types Demo</title>
<!-- Internal CSS -->
<style>
h1 {
color: green;
}
</style>
<!-- Link to External CSS -->
<link rel="stylesheet" href="[Link]">
</head>
<body>
<!-- Inline CSS -->
<p style="color: red;">This is a paragraph with inline CSS.</p>
<!-- Internal CSS applied to h1 -->
<h1>This is a heading with internal CSS.</h1>
<!-- External CSS will apply to this div -->
<div>This is a div with external CSS.</div>
</body>
</html>
