Now we will see four example to understand HTML more precisely. Don't worry about the tags uses in those example. We will learn that step by step gradullay.
HTML Heading
Headings are define in HTML page with <h1> to <h6> tags . Follow the following steps to see the uses of Heading :
1. Open the notepad program
2. Write the following codes
<html>
<body>
<h1>This is the first heading</h1>
<h2>This is the second heading</h2>
<h3>This is the third heading</h3>
<h4>This is the fourth heading</h4>
<h5>This is the fifth heading</h5>
<h6>This is the sixth heading</h6>
</body>
</html>
3. Save the file as heading.html
4. Open the heading.html file in web browser . You can see the following result. The headings within different tags are shown in different sizes. You can show your headings as big or small in your browser by using these different tags.
HTML Paragraph
In HTML file the paragraphs are contained in the <p> tag . It starts with <p> tag and ends with </p> (<p>........text.......</p>) . Text should put in those tags. To view the uses of paragraph take the following steps :-
1. Open the notepad program.
2. Write the following codes
<html>
<body>
<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<p>This is the third paragraph</p>
</body>
</html>
3. Now save the file as paragraph.html
4. Open the file in a web browser. You can see the following result -
Please notice that there is a certain space between the lines.
HTML Link
In HTML file the links are determined with the <a> tag . It starts with <a> tag and ends with </a> tag. Text and links are put in those tags. Take the following steps to view the uses of links :-
1. Open the notepad program.
2. Write the following codes
<html>
<body>
<a href="http://webtutorialmania.blogspot.com">This is the link</a>
</body>
</html>
3. Now save the file as link.html
4. Open the file in a web browser. You can see the following result -
You can see an underline under the text in blue color. A link is created here. If you click this link that website will be appear in the browser.
5. To add a link in a web page follow the above rule. The web site address of the link should put in the <a> between the href="..." quotation mark. After this according to the rule, to close the tag use </a> . The clickable text is written between the starting and closing tags. For example
<a href="http://webtutorialmania.blogspot.com">This is the link</a> .
HTML Image
In HTML file the images are determined with the <img> tags. Take the following steps to view the uses of image :-
1. Open the notepad program.
2. Write the following codes
<html>
<body>
<img src="sampleimage.jpg" width="220" height="150" />
</body>
</html>
3. The image which you want to use write the name of the image with extension in the code between src=" " the quotation mark. Write the Height and Width from the image properties. For example -
<img src="sampleimage.jpg" width="220" height="150" />
You can use any image instead the image which I use in the above code. Keep the image file in the folder where you save your page.
4. Now save your notepad file as test_image.html
5. Open the file in a web browser. You can see the following result
