HTML Sample Code
Categories :
Sample Files
As an aspiring web developer, it is essential to have a solid understanding of HTML tags. To aid in your practice and growth, we have curated a collection of 20 HTML sample code files.
These files serve as a valuable resource for you to utilize as you advance in your learning journey. You are free to use them in your projects as you see fit. All sample code files are in plain text format, and can be easily edited using a simple text editor like Notepad, Notedpad++ .
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>
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
Do you have any questions? Rest assured, we're here to provide answers. Join us in our forum where you can engage in fruitful discussions, ask your queries, and receive insightful responses from our esteemed authors and community members. We look forward to your active participation and valuable contributions as we collectively explore various topics. Let's come together and share your thoughts!
