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!
User Story Confusion: Creating and Breaking Them Down
Unlock the secrets of user story confusion with the Carnsa Development series! Join Bob, the bright son of the Carnsa family, as he enlists the help of his granny to break down user stories into manageable chunks. Discover proven techniques and strategies to help you and your team create and implement user stories with ease.
Order your copy of 'User Story Confusion: Creating and Breaking Them Down' now!
