HTML List
<html>
<head>
<title> HTML List </title>
</body>
<body bgcolor= “blue”>
<h4> Ordered List </h4>
<dl>
<h4> Unordered list </h4>
<ul>
<li> Pen </li>
<li> Book </li>
<li> Pencil </li>
</ul>
<h4> Description List </h4>
<dl>
<dt> Computer </dt>
<dd> Computer is an electronic machine.</dd>
</dl>
<dl>
<dt> Super Computer </dt>
<dd> Super Computer is the most powerful computer till date </dd>
</dl>
</body>
</html>
Hyperlink in HTML
<html>
<head>
<title> Hyperlink in HTML</title>
</head>
<body bgcolor=”#00fbff”>
<h4> Hyperlink </h4>
<p> For more information visit <a href= “ https://www.google.com”>google</a></p>
</body>
</html>
Table in HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = “ut-f8”>
<meta name =”viewport” content = “width”= device-width;
initial- scale = 1”>
<title> Table </title>
</head>
<body>
<table border = “!”>
<tr>
<th> SN</th>
<th> Name </th>
<th> Address </th>
<th> E-mail </th>
</tr>
<tr>
<td> 1 </td>
<td> Ramesh </td><
<td> Kathmandu </td>
<td> ramesh@gmail.com</td>
</tr>
<tr>
<td> 2 </td>
<td> Ram </td><
<td> Kirtipur </td>
<td> ram@gmail.com</td>
</tr>
</table>
</html>
Use of ROWSPAN
<table bgcolor=”lightblue” border = “20”>
<tr>
<td> Ram </td>
<td> Shyam </td>
<td> Ganesh </td>
<td> Sara </td>
</tr>
<tr>
<td rowspan = 2> London </td>
<td> Bharat </td>
<td rowspan = 2> Arjun </td>
</tr>
<tr>
<td> Krishna </td>
<td> Amit </td>
<td> Amir </td>
</tr>
</table>
Use of COLSPAN
<table>
<tr>
<th colspan = “2” > Name </th>
<th> Age </th>
</tr>
<tr>
<td> Ram </td>
<td> Shyam </td>
<td> 43 </td>
</tr>
<tr>
<td> Sara </td>
<td> Jackson </td>
<td> 57</td>
</tr>
</table>
Date of Birth
DOB <input type = “data” name = “DOB”> <br>
Incline CSS
<html>
<head>
<title> Inline CSS </title>
</head>
<body>
<p style = “color: orangered; text- algin : center; font-size: 30px; font-family: fantansy;”>
This is first paragraph </p>
<p> This is second paragraph </p>
</body>
</html>
Internal CSS
<!DOCTYPE html>
<html>
<head>
<style type = “text/css”>
color: royalblue;
text-align: center;
font-size : 40px;
font-family: fantansy;
}
h3
color : red;
background: darkred;
text-align: center;
font-size : 40px;
font-family: fantasy;
</style>
<title> Internal CSS </tilte>
</head>
<body>
<p> This is Paragraph </p>
</body>
</html>
External CSS
<html>
<head>
<tilte> External CSS </title>
<link rel=”stylesheet”type=”text/css”href=”external.css”>
</head>
<body>
<p> This is Ram. </p>
<h1> This is Shyam </h1>
</body>
</html>
External.css
color: blueviolet;
background: blue;
text-algin: center;
font-size: 60px;
font-family: fantasy;
}
h1
color: yellowgreen;
background: cadetblue;
text-algin: center;
font-size: 60px;
font-family: inherit;
}
ID Selector
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
</style>
</head>
<body>
<h1 id="myHeader">My Header</h1>
</body>
</html>
Class Selector
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
Creating form using HTML
<!DOCTYPE html>
<html>
<head>
<title> HTML FORM</title>
</head>
<body>
<center>
<fieldset>
<legend> Personal Information </legend>
<form>
UserName< input type = “text” placeholder = “Enter name here” size = “25”><br>
Password <input type = “password” placeholder = “Enter Password here” size =
“25” </br>
Gender <input type= “radio” id = “male” >Male
<input type = “radio” id = “female”> Female<br>
DOB<button> <input type = “date” name = “DOB”> </button><br>
Comments <text area name = “message” rows = “10” cols =”30” placeholder =
“Enter Comments here”> </textarea>
<button> Login </button>
<button> Cancel </button>
</form>
</fieldset>
</body>
</html>
