HTML Sample Code


0
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
<html>
<body>
 
<a href=”http://online-dit.blogspot.com”>This is a link</a>
 
</body>
</html>
 
 
 
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>
 

Leave a Reply

Your email address will not be published. Required fields are marked *


Copyright © 2023 Basics of Computer