One of the most important aspects of life on the Web are Hypertext Links, without which the Web would loose its dynamism and basic characteristics.
How to Link is thus what we will be tackling next. To deal with Linking, though, we have to deal as well with what goes on backstage, or backscreen--we have to deal with Anchors.
Anchors are the means (Tags) we use for signaling the source and/or the destination of a Link in any HTML text.
It's just this simple: no Anchors, no Linking!
What we commonly refer to as a Link, in turn, is a Hypertext Link, represented by that string of text that is usually (though not necessarily always) displayed underlined and in a different color from the rest of the text. For example: This is a Link! Try and Click Here!
When the Browser finds an Anchor (i.e., that which is in the backscreen of linking) the Browser "knows" that it must change the form of the mouse pointer into that little hand with the index finger pointing up. (Just place your mouse over the example link above, and you'll notice the little hand appearing. Take your mouse pointer away, and the little hand disappears. ).
Likewise, the Browser also "knows" that it is supposed to make the text that signals to us a link to appear underlined, and in a different color (unless the Browser is told otherwise! This is possible, but now we are concerned with basic stuff, and not possible variations. If you are in a hurry for those, take a look at the Quick Tips section.).
There is a variety of ways for making links, all of which include the basic AnchorTag, the format which is shown below. Let's go produce our first link, then!:)
Suppose you wish to place a link to HomePage MadeEasy on your new Home Page. (We will appreciate it greatly, if you actually wish to do it!)
A regular link to HomePage MadeEasy would look like this:
If you have never produced a Link before, then let's go ahead and do it!:) We'll need to make a small html document, so the link can be displayed on a browser.
Here are the steps to follow: [1] open any text processor, [2] copy and paste the source code below onto a blank page, [3] save that document with an "html" extension (for example, you can name the document mytest.html), and then [4] load (open) this document on your favorite browser.
Source Code: a document with a link in it (Just copy below and paste it onto a new file)
Voilá!:) You'll have made your first link! Isn't it great?!:) And simple, too, uh?!
Before we go on, let's briefly see what each of the codes we have used so far mean.
It is important that you understand the meaning of all the words you are using in this new language you are learning. Otherwise, you will be just like the turist who buys a book of ready-made phrases when (s)he travels somewhere, but is unable to produce any variation using the same words that (s)he has learned in the phrase-book and unable as well to understand any variation of those ready-made phrases that (s)he has memorized in order to survive as a tourist.
We do not wish to help you become a tourist in the html context! We wish to help you understand! For anything that we understand becomes easy and simple!
We have not choosen the name HomePage MadeEasy for this Web Site just to distribute recipes and help all our Guests and Friends become html-turists!
There are already plenty of these around.
We, at HomePage MadeEasy, are fully interested in helping you understand, as much as we and you possibly can manage, and in as many areas as possible of Home Page development and maintenance!
If, by chance, you prefer to be an html-turist, we of course respect your choice. Then just skip all text that you find in green, conversely, focus your attention on what appears in dark red, and what you'll have are precisely the recipes. Copy and paste the stuff that you find in red (you can always check what results these produce, by checking the respective text in blue), and you have what you are looking for. Later on, if you feel like getting an understanding over the stuff you have been using, you can always return here for the texts in green which you had skipped the first time.
Let's then start getting acquainted with all the codes that we have used so far, and see what each of them means (in other words, let's now understand these codes for real!)
Source Code:
<HTML>
Meaning:
This Code tells the Browser that the document to be opened is written in HTML (in order words, the Browser gets ready to interpret HTML)
To help you understand better the need for this code, just think of the following situation: Let's suppose that you speak French and that you are not in France now. If you call a telephone number in France, you will have gotten yourself ready for linguistic input in French.
Now, if you happen to get, from the other side of the line, a language which you speak, but which you do not expect (i.e., not French), it will take you a second or so to recover from the surprise and figure out which language that is, as well as to start understanding what is being said!
Analogously, we need to help the Browser get ready to interpret one particular language--in this case, commands in HTML.
Now, a Browser is not as intelligent as you are!:) And it cannot figure out by itself (as you could, in the analogy above) which language it, the Browser, is supposed to get ready to interpret! Nor can the Browser guess what you wish! So, we need to give the browsers very clear and specific messages. Then we get the results we wish:).
Source Code:
<BODY>
Meaning:
This Code tells the Browser that here starts the part of the document that goes on the screen. It is the main part of the document!
It is below this code that you start writing all the stuff that you wish to see appearing on line when people visit Your Page. This is also where you place all your images.
Source Code:
<BR>
Meaning:
This Code tells the Browser to break a line. It thus has the very same effect as when you use a text processor and press <Enter> on your keyboard.
Source Code:
<CENTER>
Meaning:
This Code tells the Browser to start centralizing everything that you write or place on every line (images, too) from here on.
It is a container tag that signals the source or the destination of a Link.
The Anchor tag syntax that we have learned so far signals a destination URL.
The Anchor container is an important code, without which we would hardly navigate around the Net!
So, let's give it some special attention.
Here's a little tip to help you remember the name for this tag. Imagine the following analogy: suppose you are a diver, and you come across the anchor of a ship at the bottom of the ocean. What happens if you decide to follow the chain that the anchor is connected to? You end up at the ship, correct? In HTML, the anchor performs a fairly analogous task.
We have seen that, as the Anchor Tag is used with the HREFAttribute, it tells the Browser that what comes between the quotes (inverted commas) in the string <A HREF=" "> is the destination a click is supposed to take us to.
Likewise, this code tells the Browser that text (or an image) enclosed in the Anchor Container (i.e., placed immediately after the string <A HREF=" ">, and before </A>) is the reference name (or image) that we are using to identify the hypertext link this Anchor signals.
Finally, as the browser goes on reading (and interpreting) and finds the short code </A>, then the Browser is told that this is the end of the reference name/image that we have chosen for that particular hypertext link.
Therefore, as the Browser finds the short code </A>, then the Browser stops changing the color of the text string, stops underlining it, or stops doing whatever it was that the Browser was doing differently so as to let the readers know that they had a hypertext link before their eyes.
By the same token, regarding all text/images that the Browser encounters after the short code </A>, the Browser will evidently no longer react (at the click of a mouse), i.e., no longer rush to take us to the destination enclosed in the Anchor container!
Please Note! It is very importantnever to forget to write that short </A>, closing the Anchor container!
Can you guess why? Yes! If we forget to write that short </A> piece of code, the Browser cannot guess that we are no longer writing the reference name for the destination which the Browser is supposed to get busy connecting us at a click of the mouse.
And more: for as long as the Browser has not come across that short </A> code, the Browser will not make the anchor operable: the Browser will continue patiently waiting that we finish writing that "monstruously long reference name" for the destination contained in the preceding <A HREF=" "> Tag!
Therefore it is of capital importance to tell the Browser that we have finished writing the reference name for an anchor, so that the Browser then also knows we're "back to business as usual," that is, back to writing our texts and placing our images in the body of the document we are producing!
Source Code:
</CENTER>
Meaning:
This Code tells the Browser to stop centralizing the texts and images that appear after this code.
You probably realize how important it is to remember to apply this code at the point where we wish to stop having text and images appearing in the center of the line!
For, just like in the case of the Anchor container, above, here the Browser cannot guess that at a particular point we wish to stop placing text and images in the center of a line, unless we let the Browser know it.
Once we have told the Browser (by writing the code <CENTER>) to place always in the center everything that the Browser comes across, it will obediently and faithfully continue centralizing everything, until we tell the Browser to STOP doing it!!!
If we do not tell the Browser what we want, it cannot guess it!;)...
This is simply a matter of communication! If we communicate well with the Browser, it will do what and as we wish.
To understand the relevance of this issue yet better, just think of the following analogy: you are at a hotel, and tell the reception desk that you wish to wake up at seven every day. Then, on a particular evening you had such a great time at the night club that you arrived back at the hotel at 4 in the morning, and therefore decided to sleep in the next morning. Ah!...but tired, and after all the good drinks you had enjoyed at the night club, you simply could not think of that request you had placed at the reception desk... So, you go into the hotel, and walk past the reception desk directly to the elevator, and in no time you are snoozing under your covers. What happens the next morning?... Yeah:(...faithfully at seven o'clock, the hotel receptionist places your wake up call. You are frustrated, maybe furious: you had wished to sleep in late, you feel a hangover creeping in, etc., etc....
Well, the Browser will do no differently from the hotel reception clerk: unless we tell it to stop executing a particular task that we had assigned earlier, the Browser will go on executing it indefinitely!
Likewise, if we do not tell the Browser that we wish it to start executing a particular task, it will not start doing it, out of "its own mind" nor guess what we would have wished!
What frequently happens is that we remember to tell the Browser to start executing a task. Then, we move on to focus our attention upon the contents of our document, and we completely forget to focus back onto the form of the document, to tell the Browser to stop executing that task we had earlier assigned!
So, beware! When your document suddenly looks weird...chances are that you have forgotten to tell the Browser to stop executing a particular task which you had previously assigned the Browser to do!
Source Code:
</BODY>
Meaning:
This Code tells the Browser that it has reached the end of the main part of the document, that is, the part of the document that the Browser is supposed to display on our screen.
Do we still need to remind you that it is important not to forget to tell the Browser that now the main part of our document is over?!;)...
Source Code:
</HTML>
Meaning:
This tag tells the Browser to stop interpreting HTML. When the Browser comes across this code, it knows that this is the real end of the document, including the codes! In other words, after coming across this tag, the Browser is "blind"; it will not look for more codes to interpret.
Regarding the codes dealt with above, you may have noticed an interesting detail: when we use the code <BR>, we do not need to tell the Browser to stop making new lines.
If you have noticed this detail, have you wondered why, in the case of <BR>, we do not need to tell the Browser "stop"?
Here is the reason. There is one basic qualitative difference between the tag <BR> and the other codes we have seen so far:
Certain tags, such as <BR>, do not affect text (or images) that follows it!
Whatever this and other analogous tags do is executed at one time, and at that particular spot where the tag has been placed.
In contrast, all the other tags that we have dealt with above (called containers), these all give the Browser a message regarding how the Browser is to go about what comes after the tag. As a result, these tags need to be used in pairs, the second member of the pair having the function of telling the Browser to stop doing what the first member of the pair had told the Browser to start executing.
Conversely, tags such as <BR> (called empty or open) simply tell the Browser what to do at one time and at a particular point of the sequential reading and code interpretation done by the Browser!
As this difference becomes clear to us, we can thus derive another important clue for our HTML encoding:
Whenever we use code that does affect anything (usually text or images) following that code, we must remember later to tell the Browser to stop applying whatever it is that we had earlier told it to start applying!
Or, more formally:
Whenever we use a container, we ought to remember to use the second member of the pair!
Finally, we can derive yet another important detail concerning HTML coding:
Containers are tags that are always used in pairs:
The first member of the pair tells the Browser to start, whereas
the second member of the pair tells the Browser to stop!
A good way not to forget to write the second member of the pair, thus closing the container tag, is to develop the habit of some discipline or method and stick to it.
In addition to the possibility of forgetting a container tag unclosed, it is very easy to mistype something in a string of code. Just as easy, it is to forget to type a detail, such as a quotation mark. Later on it may be terribly hard to spot some of these problems, especially if the document at stake is long and heavily coded.
Considering, then, how much time may be engaged in our trying to debug a document that does not load or display correctly, till we find a small detail that had escaped our attention, it is actually very healthy and thus highly advisable to invest right from the start on develping good discipline for writing html.
For example, when you use a container tag, you can write the "start" tag, then, immediately after that, write the corresponding "stop" tag. Text to be affected by that container tag (and other tags that may be embeded in that container), you just need to keep them all placed between the two members of the pair. This is a way to prevent leaving a container unclosed.
Although you are evidently free to choose as you please, as well as to think, yourself, of the procedures you would rather make use of, we'll be warning you and tipping you here and there, as we go on dealing with the HTML encoding of documents. A good procedure may be to try what we suggest and see how you feel. If you don't like a suggestion, then you can try to find what best suits you.
Taking advantage of this pause for relevant observations, let us remind you that it is always a good idea to play around a bit with anything that you have just learned.
At the point where we are, you are able to produce simple html documents, write text in the body of the document, place one or more hypertext links in a document, place line breaks anywhere you please, center some parts of your html document and not center some other parts, and whatever other variations on the tune you can think of.
Making a few new documents, while trying to apply in as many ways as possible what you have learned, can be very good investiment toward your developing better familiarity with this new language (HTML), toward feeling more at home when you use it.
Once you get well acquainted with these codes, then you'll find it all simpler as you get to the next set of codes, you will see. At any rate, there is no better way to start feeling at home with something new we have learned than playing with it!
As long as you follow the recipes you have learned so far for your HTML documents, you never go wrong!:)
Well...yes, you never go wrong, unless...
...unless there is a typo in your codes!
This brings us to a very important observation:
Accuracy in writing out your the codes in html documents is crucial for success!!!
You MUST (and there is no way of emphasizing this enough!) ensure that you have copied or typed every letter and every signprecisely the way it is shown above, for every source code!!!
Change any detail, no matter how minimal, and things start going wrong! Try it for yourself, and you'll see it!
Although you should by no means practice writing faulty code, the experience of finding out what goes wrong and how, when code is innacurately typed can give you a dimension of both the mess that innacurate coding can produce in a document and the importance of taking care not to have typos in the code!
You can experiment mistyping what goes in a tag, or leaving a mere quotation mark untyped, saving the document each time, and trying to load it.
You will see that these faulty documents just don't function correctly!
It is not possible to describe here what will appear wrong on your browser screen for each version of an innacurate test document that you save and try loading. The reason it is not possible to describe what will appear wrong, and how the Browser will evidence that it is wrong, is that each browser handles and reacts to mistakes differently.
Usually, Netscape is a lot less forgiving than IE, as far as bugs in the HTML code. But IE can, in turn, be terribly sensitive to some small details, such as forgetting to type one of the quotation marks in a link container.
All in all, accuracy in writing out your html codes is crucial for success!!!
Code accuracy, you will discover as well, is also a time saver!
(2:2)
Enjoy your visit!
Have a very nice day/evening/night
...and return soon!
Need a WebSite?
