05- Insert Image in HTML
<html>
<body>
<img src=”Image_name.jpg” alt=”http://online-dit.blogspot.com/” width=”100″ height=”140″ border=”2″>
</body>
</html>
06- HTML Horizontal Line
<html>
<body>
<p>The hr tag insert a horizontal rule:</p>
<hr>
<p>This is 1st paragraph.</p>
<hr>
<p>This is 2nd paragraph.</p>
<hr>
<p>This is 3rd paragraph.</p>
</body>
</html>
07- Line Breaks
<html>
<body>
<p>This is<br>a para<br>graph which has line breaks</p>
</body>
</html>
08- Formatting Text
<html>
<body>
<p>Normal Text</p>
<p><b>Bold Text</b></p>
<p><strong>Strong text </strong></p>
<p><i>Italic Text</i></p>
<p><em>Emphasized Text </em></p>
<p>Normal Text <sub>subscripted Text </sub> text</p>
<p>Norma Text <sup>superscripted Text</sup> text.</p>
</body>
</html>
09- Formatting Text Color and Size
<html>
<body>
<p><font face=”arial” color= “green”> This is a new paragraph with font arial and color green </font> </p>
<p><font face=”courier” size=”3” color = “blue”> This is another Para</font> </p>
</body>
</html>
10- HTML Comments
<html>
<body>
<!– This is a comment –>
<p>This is a paragraph.</p>
<!– Comments are ignored and not displayed in the browser –>
<!– Do not display this at the moment
<img src=”image.jpeg” border=”0″ alt=”Any Text”>
–>
</body>
</html>
11- HTML CSS
<html>
<head>
<style>
body {background-color:lightgreen}
h1 {color:red}
p {color:blue}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
12- CSS Font
<html>
<head>
<style>
h1 {
color:red;
font-family:courier;
font-size:320%;
}
p {
color:red;
font-family:arial;
font-size:140%;
}
</style>
</head>
<body>
<h1>This is heading</h1>
<p>This is paragraph</p>
</body>
</html>
13- HTML Hyper Links
<html>
<body>
<p><a href=”http://online-dit.blogspot.com/”>Visit Online – DIT </a></p>
<p><a href=”Photo.html”>Photo</a> is a local link .</p>
<p><a href=”http://online-dit.blogspot.com/”>Online DIT </a> is a link to a website on the World Wide Web.</p>
</body>
</html>
14- (a) HTML Hyper Links Attributes
<html>
<body>
<a href=”http://online-dit.blogspot.com/” target=”_blank”>Visit Online DIT</a>
<p>The target attribute “_blank”, will open the link in a new browser window or tab.</p>
</body>
</html>
14 (b) – Using Image as a link
<html>
<body>
<p>This is linked image, it can be clicked </p>
<a href=”http://online-dit.blogspot.com/”> <img src=”flower.jpg” alt=”Flower”> </a>
</body>
</html>
15 – HTML Table
<html>
<body>
<table width=”100%”>
<tr>
<td>Anwar</td>
<td>Bilal</td>
<td>55</td>
</tr>
<tr>
<td>Naveed</td>
<td>Hilal</td>
<td>92</td>
</tr>
<tr>
<td>Zubair</td>
<td>Asad</td>
<td>75</td>
</tr>
</table>
</body>
</html>
16- HTML Table With Heading Row
<html>
<head>
<style>
table, th, td {
border: 1px solid green;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
</head>
<body>
<table width=”100%”>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Score</th>
</tr>
<tr>
<td>Anwar</td>
<td>Bilal</td>
<td>55</td>
</tr>
<tr>
<td>Naveed</td>
<td>Hilal</td>
<td>92</td>
</tr>
<tr>
<td>Zubair</td>
<td>Asad</td>
<td>75</td>
</tr>
</table>
</body>
</html>
17-HTML List (Order List, Unorder List)
<html>
<body>
<h2>Ordered List</h2>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
<h2>Unordered List</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Unordered List with square Bullets</h2>
<ul type=”square”>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ul>
<h2>Ordered List with lower case a </h2>
<ol type=”a”>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
</body>
</html>
18-Description List
<html>
<body>
<h2> Description List</h2>
<dl>
<dt>Apple</dt>
<dd>- An apple a day keeps the doctor away</dd>
<dt>Banana</dt>
<dd>- Keeps you strong and energize</dd>
</dl>
</body>
</html>
19-HTML iframe
<html>
<body>
<iframe src=”other.htm” width=”300″ height=”300″></iframe>
</body>
</html>
20-HTML iframe
<html>
<body>
<form>
First Name:<br>
<input type=”text” name=”fname”>
<br>
Last Name:<br>
<input type=”text” name=”lname”>
<br>
Gender: <br>
<input type=”radio” name=”gender” value=”male” checked> Male
<br>
<input type=”radio” name=”gender” value=”female”> Female
</form>
</body>
</html>
21-Submit Button
<html>
<body>
<form action=”otherpage.html”>
First name:<br>
<input type=”text” name=”fname” value=”Javid”>
<br>
Last name:<br>
<input type=”text” name=”lname” value=”Khan”>
<br><br>
<input type=”submit” value=”Submit”>
</form>
</body>
</html>
