HTML Questions

Some question of HTML programs are given below as links. Click on that link which one you want to know more. The given links will display the program code and its output. Here I displayed the outputs as images. If you want to check its working, Copy that codes to a Notepad or any text editors and then save as an HTML file.

Questions are given below. Click on that to get answers, 

1. Create an HTML page which contains 6 heading and 6 formatting tags?
2. Create an HTML page with 3 type (ordered, unordered and definition) list element tags?
3. Create an HTML page which display all alignment option of an image?
4. Create an HTML page with external and internal link?
5. Create an HTML page with a table which contain column span, row span and background color?

Create an HTML page which contains 6 heading and 6 formatting tags?

Code:

<!DOCTYPE html>
<html>
<body>
<h1><b>Main Heading tag in bold</b></h1>
<h2><i>Sub heading tag in italic</i></h2>
<h3><mark>Highlighted h3 tag</mark></h3>
<h4><em>emphasized h4 tag</em></h4>
<h5><strong>h5 tag with importance</strong></h5>
<h6><ins>Underlined h6 tag</ins></h6>
</body>
</html>

Output:

Create an HTML page with 3 type (ordered, unordered and definition) list element tags?

Code: 

<!DOCTYPE html>
<html>
<head>
    <title>Types of list</title>
</head>
<body>
<center><h1>Types of lists</h1></center>
<h2>Ordered list</h2>
<ol>
    <li>Football</li>
    <li>Cricket</li>
    <li>Hockey</li>
</ol>
<h2>Unordered list</h2>
<ul>
    <li>Football</li>
    <li>Cricket</li>
    <li>Hockey</li>
</ul>
<h2>Definition list</h2>
<dl>
    <dt>Leo Messi</dt><dd>-Football player</dd>
    <dt>M.S Dhoni</dt><dd>-Cricket player</dd>
    <dt>Sardar Singh</dt><dd>-Hockey player</dd>
</dl>
</body>
</html>

Output:

Create an HTML page with external and internal link?

Code:

 Internal and external.html

<!DOCTYPE html>
<html>
<head>
    <title>Internal and External links</title>
</head>
<body>
<center><h1>Internal and External links</h1>
<h2>Internal link</h2>
<a href="#internal">Click ME</a>
<h2>External link</h2>
<a href="External.html">Click ME</a>
<h3 id="internal">
<br><br><br>
    When you are going to click on the link 'Click ME' behind the heading internal link which will display this section. If you want to check this, please resize your browser.
<br><br><br>
</h3>
</center>
</body>
</html>

External.html

<!DOCTYPE html>

<html>

<head>

<title>External link</title>

</head>

<body>

<h1>This is the page which is linked as external</h1>

<a href="Internal and external links.html">Back</a>

<h3>The above link is an external link of this page</h3>

</body>

</html>

Output:

 internal and external.html

 External.html

Create an HTML page with a table which contain column span, row span and background color?

Code:

<!DOCTYPE html>
<html>
<body>
<h2>Table with row span,column span and background colour</h2>
<table border=1 cellpadding=4 bgcolor="#11aa00">
<th colspan="2" bgcolor="#99ccff">Name</th><th bgcolor="#99ccff">Production</th>
<tr><th rowspan=2 bgcolor="#99ccff">Customers</th>
    <td>Raha</td> <td>1493</td>
</tr>
<tr><td>Shali</td> <td>3829</td> </tr>
<tr><th rowspan=2 bgcolor="#99ccff">Sales</th>
    <td>Sarah</td> <td>4827</td>
</tr>
<tr><td>Browne</td> <td>7246</td></tr>
</table>
</body>
</html>

Output:

Create an HTML page which display all alignment option of an image?

Code:

 

<!DOCTYPE html>
<html>
<head>
    <title>Image alignments</title>
</head>
<body>
<h1>Image Alignments</h1>
<h2 align="top">Top</h2>
Nice<img src="1.gif" alt="image 1" align="top">Smily
<h2 align="middle">Middle</h2>
<p align="middle">
Nice<img src="1.gif" alt="image 1" align="middle">Smily</p>
<h2 align="left">Left</h2>
Nice<img src="1.gif" alt="image 1" align="left">Smily
<h2 align="right">Right</h2>
<p align="right">
Nice<img src="1.gif" alt="image 1" align="right">Smily
</p>
<h2 align="bottom">Bottom (Default)</h2>
Nice<img src="1.gif" alt="image 1" align="bottom">Smily
</body>
</html>

Output: