CHAPTER EIGHT
Hyper Text Markup Language
I am certain that once you
have learned how to make your own website, you must be curious to know how to
write the code that builds a site. Do you remember that when you clicked on
`View-Source` while uploading the image on to your homepage, a strange language
loomed up before you? Well, it definitely wasn’t Greek, Latin, French or
Japanese for sure. It is a language whose name is longer than that of all these
lingos put together. So hold your breath….. the language you just caught a
glimpse of is called Hyper Text Markup Language!! But contrary to the
deceptively long name, writing this language is a simple task. Take a look at
the basic HTML programs and I’m sure you will agree with me.
h1.html
hi
bye
In any text editor,
enter two words, each on a separate line. Save the document as h1.html
in your C: drive and then go to Netscape or Internet Explorer. Make sure that
the file is located in the root and not any other subdirectory. Click on the
white text box for Address, write c:\h1.html and then press enter. When
your browser, either Netscape or Internet Explorer, sees an HTML file it reads
it line by line. HTML removes all enters. No matter how many words you write,
separated with an enter, HTML will skip each enter and show the words on the
same line.
h2.html
<html>
hi <p>
bye
</html>
Now, insert a
<html> at the start and a </html> at the end of the program with a
<p> between the two words and click on the `Reload/Refresh` button in
your browser. Hi and bye will be displayed on separate lines. 'P'
in angle brackets stands for 'paragraph'. Therefore in HTML anything between a
less than sign '<' and a greater than sign '>' is called a 'tag'. HTML
only understands instructions in tag format. Each HTML program needs the tag
<p> to display the text on a fresh line. But it also needs the tag
<html> to activate the program.
h3.html
<html>
<b>hi
bye
</html>
'B' here in angle
brackets stands for 'bold'. This program will display both hi and bye
in bold. Everything typed after the <b> tag will be displayed in bold.
h4.html
<html>
<b>hi
</b>
bye
</html>
A tag like <b>
needs a start and an end. HTML will display everything following a <b> in
bold unless you don’t give it a tag of </b>. Likewise in this program
only the hi will be in bold, whereas the bye remains normal.
h5.html
<html>
<i>hi
</i>
bye
</html>
Similarly here if you
replace 'b' with 'i', HTML will display hi in italics. Note that the
<i> tag also needs to be told when to shut up.
h6.html
<html>
<i><u>hi
</i></u>
bye
<html>
The tag <u> stands
for underline. This program will not just display hi in italics but will
underline it too. So now you realize that HTML is all about opening tags and
shutting them. What you want HTML to do will depend on the mere alphabet within
the tag.
h7.html
<html>
hi <br>
bye
</html>
In this program
<br> plays a role similar to that of <p>. The only difference being
that <br> gives a one line space while <p> gives a double line
space. Once again hi and bye will be shown on two separate lines.
You can write an entire HTML program on a single line. Just make sure it is
sufficiently interspersed with <p>’s and<br>’s.
h8.html
<html>
<img
src="ie.gif">
</html>
Remember the image
tag while making your homepage? Well to display a picture, HTML requires a sub
tag src attached to the <img> tag. Equate the tag <img src>
to the name of a gif, bmp or any other image file. And voila, a mere
click on the `Reload/Refresh` button will exhibit the picture!
h9.html
<html>
<a
href="www.yahoo.com">go </a>
<html>
With all your
experience on the net, you must have noticed that by merely clicking on a word
you are taken to a new page, a new site. Each time you encountered the hand, it
was a signal to transport you to another site. Well, this process of hyper
linking two websites can be achieved using the HTML tag <a>. The tag
<a> has a sub tag href attached to it. After the equation sign,
enclose in quotes the name of the site you want to visit and then end the code
with the tag </a>. Between the name of the site you want to visit and the
final tag, within the >and < signs write some text, go, in our
program. This word will be shown in your browser in blue. All you need to do is
click on this word to be transported to the Yahoo! site.
b.html
hi<br>
bye<br>
h10.html
<html>
<a
href="b.html"> <img src=ie.gif> </a>
</html>
If instead of the word go you insert an image tag then by clicking on the image you will be taken to the b.html file. It is up to you what you want to insert between the > and< signs as the hyperlink to the next site or file.
Ride On
Some more HTML tutorials
F http://www.bfree.on.ca/HTML/
F http://www.cosy.sbg.ac.at/~lendl/tags.html
F http://www.web-solve.com/html.tutorials/intro.htm