Let us play with some HTML Tags now.
Open the
homepage.htm file that we created in
Lesson 1(b) using a text editor (preferably
notepad). (For amateurs, right click on the
homepage.htm file and click
Open with >
Notepad.)
Now start making the following changes:
Add : <h2>My HTML World</h2>
<h3>My HTML World</h3>
<h4>My HTML World</h4>
Below the code line: <h1>My HTML World</h1>
Your final code should look like:
<html>
<body>
<h1>My HTML World</h1>
<h2>My HTML World</h2>
<h3>My HTML World</h3>
<h4>My HTML World</h4>
<p>Let us learn this.</p>
<p><a href="page.htm">My Page</a></p>
</body>
</html>
Save the file (just save it with the same name and with a new name if you want to create different files for different lessons. Remember that the extension should be .htm or .html. Either of them works fine. Hope you know how to save the text file with different extensions. While saving the file, just change .txt to .htm or any other extension. The file takes the form as represented. ).
Double click on homepage.htm.
The My HTML World page appears with the changes visible as shown in the snapshot below.
The tags that we used are called HTML Headings tab and they range from <h1> to <h6>. Remember to properly open and close them by using <h1> as opening and </h1> as closing tag. This was mentioned in Lesson 1(a) where we discussed about the basics of HTML.
Let us now learn about the HTML Paragraphs tags.
Again open the homepage.htm file in notepad.
Add the following code: <p>How Funny!!.</p>
<p>Merry Christmas!!</p>
<p>How are you today?</p>
Below: <p>Let us learn this.</p>
The modified code should look like:
<html>
<body>
<h1>My HTML World</h1>
<h2>My HTML World</h2>
<h3>My HTML World</h3>
<h4>My HTML World</h4>
<p>Let us learn this.</p>
<p>How Funny!!.</p>
<p>Merry Christmas!!</p>
<p>How are you today?</p>
<p><a href="page.htm">My Page</a></p>
</body>
</html>
Save the file like before and open it in a web browser.
Your webpage looks like:
Remember to properly open and close HTML Paragraphs tags by using <p> as opening and </p> as closing tag. Hope it is clear now, how to create paragraphs on your html page. You can add the paragraphs anywhere in your page. I added it below the first paragraph to keep them synchronized.
Note: Just take care to add them between <body> and </body> tags.
Now it is time to add some links to your webpage.
We did this before in
Lesson1(b). Let us add some real web pages to our homepage.
Add: <p><a href=" http://howtocreate-avsar.blogspot.com/">How To Create</a></p>
Below: <p><a href="page.htm">My Page</a></p>
The final code should look like:
<html>
<body>
<h1>My HTML World</h1>
<h2>My HTML World</h2>
<h3>My HTML World</h3>
<h4>My HTML World</h4>
<p>Let us learn this.</p>
<p>How Funny!!.</p>
<p>Merry Christmas!!</p>
<p>How are you today?</p>
<p><a href="page.htm">My Page</a></p>
<p><a href=" http://howtocreate-avsar.blogspot.com/">How To Create</a></p>
</body>
</html>
Save the file and open it in a web browser.
My page looks like:
You can use the above tags to add any html webpage to your page. Hope, it wasn’t tough to understand that I just created another paragraph by using <p> and </p> and then created a link for the text “How to create” by linking it to website "http://howtocreate-avsar.blogspot.com/". You can use any text and any webpage to see how it appears in your homepage.
Use the same syntax to create any link. It is very easy to do!!
I hope we are very much clear with creating headings, splitting into paragraphs and adding links to our homepage.
In the next session we will try to find out, how to insert images and learn more about HTML Headings and HTML Paragraphs.
