An introduction to the InternetBasics of HTML (3) [Archives:2003/655/Education]
July 31 2003
 |
Academic Head
NCC Education, Yemen Center
Referring to previous lessons, we said that websites are actually HTML files. HTML stands for HyperText Markup Language, the most widely used programming language in formatting Internet websites. There are several versions of HTML. The latest version is HTML 4.0. HyperText here means the text that references another text in a nonlinear method. You click over links in the form of words or images to move from one source to another on the World Wide Web (WWW). Markup here means putting text, images or pictures along with tables in one page in an understandable way. And finally, Language means programming language. It is worth bearing in mind that there are other languages used in website design, but HTML was the first and is still the dominant language.
Using links
Hypertext links (or just links) are essential for building effective websites. Links can be based on text or graphics. When a link is made from text, the browser will render the text in a way that makes the link obvious to the user. Most of the time the hypertext links will be rendered in blue color and underlined. We can create a link that links to:
– Another position on the same page.
– Another HTML page.
– A specific place on another HTML page.
There are several different ways of creating a link using the anchor tag. To create a link to another HTML file in the same site or in another file in the Internet we use the anchor tag as follows:
click here
URL here means the uniform resource locator such as http://www.yementimes.com. So to amend our website and add a link that takes the visitor to yementimes website, we add the code as it shows in fig1 line 11.
In line 11 in our index file I, we added an anchor that will make the word YemenTimes in line 12 looks blue and underlined as a standard hypertext. If the visitor clicked over this word it will take the visitor to another address which is defined between quotations, HTTP://WWW.YEMENTIMES.COM. Notice the closing tag for the anchor “” terminates the formatting at that point so only the word YEMENTIMES will act as a hyperlink. HREF stands for hypertext reference.
What if you need to create a hyperlink that takes you to another webpage in the same website? Same anchor tag will be used for this except that you have to put the HREF to that webpage's HTML file. For example to create a link that takes the user to the Photo Gallery webpage in our website assuming that the file is called “pgallery.htm”, we use the anchor tag as follows:
Photo Gallery
Notice, it doesn't matter if you use capital or small letters for to HTML tag, but some systems are case sensitive when it comes to the webpage's file name (e.g., UNIX), so you need to ensure then that the page on the server is exactly {PGALLERY.HTM} and not for example (Pgallery.htm).
Sometimes web designers provide links to reference a position or positions in the same webpage. The most common use of this type of links is to move the visitor's browser from the bottom of the webpage to the top of the same webpage. It is also useful when you have a long webpage that covers several topics where you can create an index at the top of the webpage to make the navigation or the process of getting the information easier. To create such hypertext links, we use the anchor tag but this time we have to flag or bookmark the positions that we are linking to.
To practice this, let's create two links. One link at the top of the webpage to take the user to the bottom of the webpage, and the other at the bottom of the webpage to take the visitor back to the top of the webpage.
At the very beginning of the body tag of our example, we create the bookmark that will be used as a reference for the top of the webpage. I will add this bookmark to the code in line 6 in our example as follows:
So the bookmark is called “top” and we will need this name when we create the link. At the end of the HTML code, exactly before the body's closing tag in line12, we create the link that should take us to the top as follows:
Back to the top of the page
So until now we only have a link that takes us from the bottom of the webpage to the top of the same webpage. Please understand that you will not notice any difference if you try to apply that to our example because our webpage is still small. To try it, add many line break tags “
” to the code to make the webpage gets longer.
One more thing in hypertext links is that you can link a specific position in another webpage in the same website. For example if you want to create a link in our webpage that takes you to a specific position or photo in our Photo Gallery webpage, you should need to create the bookmark at the bottom of the Photo Gallery webpage and give a name such as 'bottom' or anything else as long as you remember it. In the index webpage, where you need to place the link by using the anchor tag as follows:
Last point about using hypertext is to create a link that references an e-mail address. It is very common to use hyperlinks to link to email addresses. When this type of hyperlink is clicked it opens an email application such as MS-Outlook to enable the visitor to send an email to that reference. To create such a link, use the following code:
contact me
With the tags we added today our example webpage will look as in fig 2. Notice the hyperlinks in YemenTimes word
If you have any questions about my lessons please send me an e-mail at [email protected].
Next week: More on HTML
——
[archive-e:655-v:13-y:2003-d:2003-07-31-p:education]
