116 - LINK
Anchors and Links

       

Definitions

An ANCHOR is an invisible mark in the text to where it is desired for the screen to go when another (visible) mark called LINK is clicked with the mouse. The screen may be targeted to other point of the same home page, to another home page in the same computer or, if connected, to another home page hosted in an Internet server.

Examples of ANCHOR

<A NAME="Ini">

<A NAME="End">

Examples of LINKS

<A HREF="#Ini"> Go to the Top </A>

<A HREF="#End"> Go to the Bottom </A>

In the examples above, the <A NAME="Ini">, as suggested by its name, should be located at the top of the programming sheet, below the tag <BODY>.
The tag <A NAME="End">, as also suggested by its name should be placed in the last lines of the programming sheet.

Important Factors

  1. The text between the double quotes in the anchor and the link may be any chosen by the HTML designer. However the quoted text of an anchor may be exactly the same of its corresponding link. The double quotes are essential and the sign # (number) is required only in the links to the same home page. Anchors have no sign #.
    Not complying with these rules one is liable to often mistakes.

  2. The text between <A HREF="...."> and </A> will be displayed underlined and in different color and may be whichever selected by the HTML designer. This text may be replaced by any image (.GIF or .JPG). Example:
    <A HREF="#Ini"> <IMG SRC="ArrowUp.gif" BORDER=0> </A>

  3. In the above example the attribute BORDER=0 in the tag IMG SRC="ArrowUp.gif", is used to avoid the image to be surrounded by a frame. If the frame is desired no attribute BORDER should be specified.

  4. The tag <A HREF="...."> have to be mandatorily closed with the tag </A> in order to avoid the whole text thereafter to become a huge link. This is a very common mistake.

  5. The above examples targeted the top and bottom of the homepage only for didactical purposes. An anchor <A NAME="...."> may be placed anywhere in the text of the homepage. In other places of this and/or other homepages several corresponding links <A HREF="...."> may be placed targeting that anchor.

  6. Example of a link to other home page in the same computer folder that contains the home page with that link:
    <A HREF="HP_115.htm"> Go to the Table Tag TD </A>

  7. Example of a link targeting an anchor inside another homepage in the same computer folder that contains the home page with that link:
    <A HREF="HP_115.htm#Bot"> Go to the Bottom of Table Tag TD </A>

  8. Example of a link to a home page in the Internet:
    <A HREF="http://www.cnn.com"> CNN </A>

Find below the tags explained above applied to the text of the Introduction.
Anchors are in red and Links are in blue.

<HTML>
<HEAD>
<TITLE>
116 - LINKS
</TITLE>
</HEAD>

<BODY BACKGROUND="BGWite.jpg">
<A NAME="Ini">

<CENTER>
<A HREF="#End"> Go to the Bottom </A>
</CENTER>

<BLOCKQUOTE>

<P>
<FONT SIZE=3>

<P ALIGN=justify>
<BIG><B>[01] DEFINITIONS </B></BIG>

<P ALIGN=justify>
HTML stands for "Hypertext Markup Language".

<P ALIGN=justify>
Hypertext is a technical term that applies to a computer screen text which has marks to be clicked with the mouse in order to change the screen to other parts of the text, to other texts in the local computer or to texts stored in servers of a computer network.

<P ALIGN=justify>
A server is a computer that receives and sends files among computers linked to a network. Internet providers have servers that accomplish this function in the Internet.

<P ALIGN=justify>
The Internet is the world largest computer network. Internet providers that store home pages are also known as hosts. A set of interconnected home pages about a subject is a website or simply a site. The first page of a site, through which one has access to all the others home pages of the site is called a portal.

<P ALIGN=justify>
The Windows Help files are hypertexts as well as the popular Acrobat Reader that reads and exhibits .PDF files, but both were programmed in languages others than HTML. This course is a hypertext edited in HTML.

<P>
<BIG><B>[02] HTML CODES (TAGS) </B></BIG>

<P ALIGN=justify>
Tags are English words or abbreviations between < and > that literally express the formatting expected from a certain point in the text until the same word between </ and > is found.

<P ALIGN=justify>
Examples:
<BR>a) <I> This text is in italic characters. </I>
<BR>b) <B> This text is in bold characters. </B>
<BR>c)<CENTER> This line will be displayed in the center of the screen. </CENTER>

<P ALIGN=justify>
These tags are interpreted by the browser for display on the screen as soon as the file that contains the home page is downloaded into the computer of the end user. These files must mandatorily have their names ended by the extensions:
<B>.htm </B> ou <B>.html </B>

<P ALIGN=justify>
The Internet Explorer and the Netscape are the most well known browsers. Both interpret, in an identical manner, the great majority of tags, but not all. There are tags accepted by Netscape (Ex: BLINK, that shows a blinking text) but they are not interpreted by the Internet Explorer. Reciprocally, Internet Explorer interprets the BGSOUND (background sound) attribute and Netscape does not.

<P ALIGN=justify>
Therefore, after editing a home page, it is recommended that it be tested in both browsers. Only practice will allow the home page designer to master these differences and find solutions that will meet the requirements of both browsers for an acceptable appearance.

<P>
<BIG><B>[03] HTML EDITORS </B></BIG>

<P ALIGN=justify>
As any computer program language, HTML tags and the formatted text has to be edited in text editors that save their files in the ASCII code (text without codes other than the ones typed by the programmer).

<P>
<A NAME="End">

<P ALIGN=justify>
In Windows only the Notepad meets this requirement. There are sophisticated websites designed and edited in Notepad. Wordpad (Ex-Write), Word, Excel and others contain hidden codes that may be wrongly interpreted by the browsers. However, they may have available tools to convert the text into a home page. More often than not, these converted home pages fall short in appearance of the expected result.

<P ALIGN=justify>
There are many HTML editors that allow editing tags with few mouse clicks, however they require a minimum knowledge of the basic tags so that beginners may adequately decide which would better fit his endeavor in designing a home page. This course is intended to fulfill this objective.

<P>
</FONT>

<P>
</BLOCKQUOTE>

<P>
<CENTER>
<A HREF="#Ini"> Go to the Top </A>
</CENTER>


</CENTER>


</BODY>


</HTML>

 

How to test the home page above:

Copy the codes from <HTML> to </HTML> into a new file using the Windows Notepad or a HTML editor, saving the file and opening it with a browser, just like in the previous lessons, and test the links, supposing it has been made the download of the file BGWite.jpg as required in the Lesson 104:

 

Updated Aug/2000 by