Practical: 1 Structure of HTML
HTML File:
<html>
<head>
<title>
Practical 1
</title>
</head>
<body>
<p><h1>Structure of HTML</h1></p>
Hello World..!
</body>
</html>
Output:
Practical: 2 HTML Formatting Tags
HTML File:
<html>
<head>
<title>
Basic Formatting Tags
</title>
</head>
<body>
<h1>Formatting Tags</h1>
<p>This is a normal text/p>
<p><b>This is a bold text</b></p>
<p><u>This text is underlined</u></p>
<p><i>This is a italic text</i></p>
<p><em>This is emphasized</em></p>
<p><strong>This text is strong</strong></p>
<p>This is subscript text: H<sub>2</sub>O</p>
<p>This is superscript text: x<sup>2</sup></html>
</body>
</html>
Output:
Practical: 3 Adding Images and Hyperlinks
HTML File:
<html>
<head>
<title>
Inserting Images and Hyperlinks
</title>
</head>
<body>
<h1>Image Inserting</h1>
<img src="C:\Users\Public\Pictures\Sample Pictures\[Link]" alt="Image" width="150"
height="150">
<h1>Hyperlink Inserting</h1>
<a href="C:\Users\Public\Pictures\Sample Pictures\[Link]">Click here to visit penguins
image</a>
</body>
</html>
Output:
Practical: 4 Ordered and Unordered Lists
HTML File:
<html>
<head>
<title>
Ordered and Unordered Lists
</title>
</head>
<body>
<h1>Ordered List</h1>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
</ol>
<h1>Unordered List</h1>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Mango</li>
<li>Orange</li>
</ul>
</body>
</html>
Output:
Practical: 5 Rowpan and Colspan
HTML File:
<html>
<head>
<title>
Table containing rowspan and colspan
</title>
</head>
<body>
<table border="2px">
<tr>
<th colspan="4">Record of 12th Class</th>
</tr>
<tr>
<th>Name
<th>Class
<th>Roll No.
<th>Address</th>
</tr>
<tr>
<td>a
<td rowspan="4">12th
<td>1
<td rowspan="2">K.K.R.</td>
</tr>
<tr>
<td>b
<td>2</td>
</tr>
<tr>
<td>c
<td>3
<td rowspan="2">Y.N.R.</td>
</tr>
<tr>
<td>d
<td>4</td>
</tr>
</table>
</body>
</html>
Output:
Practical: 6 Basic Form in HTML
HTML File:
<html>
<head>
<title>Basic HTML Form</title>
</head>
<body>
<form action="[Link]" method="post">
<fieldset>
<legend>Registration Form</legend>
<label for="name">Name:</label>
<input type="text" id="name" required><br><br>
<label for="email">Email:</label>
<input type="email" id="email"><br><br>
<label>Gender:</label>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br><br>
<label>Skills:</label>
<input type="checkbox" value="html"> HTML
<input type="checkbox" value="css"> CSS<br><br>
<label for="country">Country:</label>
<select id="country">
<option>India</option>
<option>USA</option>
</select><br><br>
<label>Message:</label><br>
<textarea rows="4" cols="40"></textarea><br><br>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</fieldset>
</form>
</body>
</html>
Output:
Practical: 7 Inline CSS
HTML File:
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: red;">THIS IS INLINE CSS</h1>
<p style="color: blue; font-size: 15px;">
This is a paragraph with inline CSS.
</p>
<p style="background-color: green;">
This text has background color.
</p>
</body>
</html>
Output:
Practical: 8 Internal CSS
HTML File:
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color:darkblue;
p{
color: blue;font-size: 18px;
body{
background-color:pink;
</style>
</head>
<body>
<h2>Internal CSS</h2>
<p>This paragraph is styled using internal CSS.</p>
<p>CSS is a computer language.</p>
</body>
</html>
Output:
Practical: 9 External CSS
1. HTML file
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="[Link]">
</head>
<body>
<h1>Hello CSS</h1>
<p>This is external CSS example.</p>
</body>
</html>
2. CSS file
h1 {
color: rgb(134, 134, 226);
}
p{
color: rgb(34, 34, 65);
}
Output:
Practical: 10 Common CSS Properties
HTML File:
<html>
<head>
<title>CSS Properties </title>
<style>
body{
background-color: lightblue;
h1{
color: darkblue;font-family: Arial;text-align:center;
p{
color: black;font-size: 18px;border: 2px solid green;background-color: blue;margin: 10px;
padding:15px;text-align:left; ;
</style>
</head>
<body>
<h1>CSS Properties</h1>
<p>
This paragraph consists color, font, border, background, margin, and padding.</p>
</body>
</html>
Output:
Practical:11 CSS Box Model
HTML File:
<html>
<head>
<title>CSS Box Model</title>
<style>
.box{
width:300px;
height: 200px;
padding: 30px;
border: 5px solid black;margin: 30px;
background-color: lightblue;
</style>
</head>
<body>
<h2>CSS Box Model</h2>
<div class="box">
This is a box model</div>
</body>
</html>
Output:
Practical: 12 Layout Techniques
HTML File:
<html>
<head>
<title>Flexbox Example</title>
<style>
.box{
display: flex;justify-content: space-around;align-items: center;
background-color: skyblue;padding: 20px;
}
.flex{
background-color:white;color: black;padding: 20px;text-align:center;
}
</style>
</head>
<body>
<h2>Flexbox Example</h2>
<div class="box">
<div class="flex">Box 1</div>
<div class="flex">Box 2</div>
<div class="flex">Box 3</div>
</div>
</body>
</html>
Output:
Practical: 13 Layout Techniques: Grid
HTML File:
<html>
<head>
<title>Grid Example</title>
<style>
.box{display:grid;grid-template-columns: auto autoauto;
background-color: lightgrey;padding: 10px;}
.grid {background-color: teal;color:white;padding: 20px;text-align: center;}
</style>
</head>
<body>
<h2>Grid Example</h2>
<div class="box">
<div class="grid">1</div>
<div class="grid">2</div>
<div class="grid">3</div>
<div class="grid">4</div>
<div class="grid">5</div>
<div class="grid">6</div>
</div>
</body>
</html>
Output:
Practical: 14 Class Attribute in CSS
HTML File:
<html>
<head>
<style>
.country {
color: white;
padding: 10px;
}
.china {
background-color: black;
}
.india {
background-color: blue;
}
.usa {
background-color: red;
}
center {
padding: 20px;
}
</style>
</head>
<body>
<center>
<h2 class="country china">CHINA</h2>
<h2 class="country india">INDIA</h2>
<h2 class="country usa">UNITED STATES</h2>
</center>
</body>
</html>
Output:
PRACTICAL: 15 Using Navigation Bar
HTML File:
<html>
<head>
<title>Navigation Bar</title>
<style>
nav {background-color: #333;
padding: 10px;
text-align: center;}
nav a {color: white;
text-decoration: none;
margin: 15px;
font-size: 18px;}
nav a:hover {color: yellow;}
</style>
</head>
<body>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#contact">Contact</a>
</nav>
</body>
</html>
Output: