HTML Sample Code
Categories :
Sample Files
Want to practice HTML tags using sample HTML codes? We have got solution for you by brining more 20 HTML Sample Code files. You are free use them in your project as you want. All sample code files are in text format, you can edit them with Notepad or any plain text editor.
Ready to Download HTML Sample Code
01- Hello Word
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is first Paragraph</p>
</body>
</html>
02- HTML Headings
<html>
<body>
<h1>This is heading one</h1>
<h2>This is heading two</h2>
<h3>This is heading three</h3>
<h4>This is heading four</h4>
<h5>This is heading five</h5>
<h6>This is heading six</h6>
</body>
</html>
03- HTML Paragraphs
<html>
<body>
<p>This is 1st paragraph</p>
<p>This is 2nd paragraph</p>
<p>This is 3rd paragraph</p>
</body>
</html>
04- HTML Link
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
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
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>
Related Posts
Download More Sample Files
Like, Share, and Follow Us!
100 DAYS OF MULTIPLICATION FACTS PROBLEMS
100 Days of Multiplication Facts Problems has 6000 multiplication facts problems for daily practice and focuses on digits 0-20. There are 100 worksheets, each having 60 problems. You can record the date, time, and score at the top of every page. To make the students fluent with multiplication facts and recall them without delay, several problems are repeated, or the digits are switched.
Order Now
Basics of Computer By Muhammad Umar
Basics of Computer, Third Edition, eradicates any intimidation about the computer. With a minimal investment of time, you’ll soon be able to understand basic concepts and perform simple tasks on your computer.
Ask a Question
You have got questions? We have got answers. Let’s exchange the deal, you ask a question and we will answer. Ask a questions and receive answer from our authors or other members of the community. Let’s meet in the forum and discuss what you have to say!
