HTML Sample Code

September 3, 2015 Md. U 0
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
<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>
 
Related Posts

Download More Sample Files

Like, Share, and Follow Us!
Facebook Twitter Instagram
«
»

Leave a Reply

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

Copyright © 2022 Basics of Computer