Lecture notes - Links

Adding a link tag follows the standard format that you learned about adding attributes in the last project:
<tag attribute="value">content for element</tag>
Review:

• When you have a container tag that includes an attribute, it is added to the start tag.
• When you add an attribute to a start tag, the attribute must have a value.
• The value for the attribute must be enclosed in quotes.
• The end tag remains the same for the element.

Examples of tags with added attributes:

<p align="right">This is a paragraph of text for demonstration.</p>
<h1 align="center">This is a sample heading that could be on a web page.</h1>
<ul type="square"><li>This is a bulleted item</li></ul>
<a href="filename or URL">text for link</a>

<p>
Please visit my new <a href="mywebpage.html">web page</a>.
</p>

The above code represents a paragraph on a web page that will display this sentence in the browser:

Please visit my new web page.

The words "web page" are surrounded by code to make the words appear as a link. In the browser they will appear blue and underlined to indicate they represent the link. When the user clicks on the link text, it will open a page named mywebpage.html. Look carefully at the code to see how it was created.

• The start tag for the link is: <a href="mywebpage.html">
• The start tag includes the href attribute.
• The value for the href attribute is "mywebpage.html"
• The end tag for the link is: </a>

Relative links

If pages are stored in the same location on the same server, link code is written as a "relative" link.

• The <a> tag is called the "anchor" tag.
• The opening <a> tag must include the href attribute to tell what page should open when you click on the text for the link.
• The value for the href attribute gives the filename of the page in quotes. Notice that the value for the href attribute is only the filename. It does not give the location of the web page. Relative links like this should be used to link to different pages within your own website. When pages are stored in the same location, the filename is enough for the href value. You should NOT use the complete URL for the value of the href attribute if your files are stored in the same location.
• The closing </a> tag is at the end of the text used as the link text.
• The text that is surrounded by the anchor tags will appear blue and underlined to represent the clickable link when you view the page in the browser.

More examples of relative links when pages are all stored in the same location:

Suppose I have a three page website.
The first page is the home page named default.html.
The second page is a biography page of my family named family.html.
The third page is a picture page of my family named familyphoto.html.

The link to my home page would look like:

<p>
Visit my <a href="default.html">Home Page</a>.
</p>

The link to the second page would be:

<h2>
Go to <a href="family.html">biographical information</a> for the Whobrey family.
</h2>

The link to the third page would be:

<h3>
See our <a href="familyphoto.html">photos of the Whobrey Bunch</a>.
</h3>

Note:

• Notice that each sentence has words selected to be the visible link on the page. Only the text that is surrounded by the <a></a> tags will appear as the link. You can choose any text you want to be the clickable link on the page.
• Each sentence shown above is nested inside a paragraph or a heading. All text on a web page should be enclosed in an HTML element. For example, you can choose to use text as paragraphs or headings. Putting text inside an element like a paragraph or a heading will also make it start on a new line with a blank line above it.
• Link tags can be nested inside other elements as shown in the above code. Notice the order of the closing tags. When links are inside an element, the closing tag for the link should be before the closing tag for the element.
• Certain text is selected to be visible as the link. This text is surrounded by the anchor tag. It will appear on the page as blue, underlined text.
• The starting anchor tag is to the left of the link text. The starting anchor tag uses href as a required attribute. The value in quotes for the href attribute is the filename that you want to link to. If the page is stored in the same location as the page the link is on, the filename is the only thing that should be included in quotes.
• The ending anchor tag is to the right of the link text. Blank spaces between words should NOT be inside the text for the link. That will cause blank spaces to be underlined and look sloppy. Spaces to separate words in a sentence should be before the opening anchor tag or AFTER the ending anchor tag to keep the space from being underlined.
  • Examples:
    Wrong way: Please visit my<a href="default.html"> Home Page </a>.
    (There is a space before and after the word Home and it will be underlined with the link text.)
    
    Right way: Please visit my <a href="default.html">Home Page</a>.
    (The space to display between words is NOT with the link text. There is a space after the word "my" BEFORE the opening anchor tag.)

These links also are a good example of proper "nesting order" for codes. Notice that the complete code for the link is contained inside the code for the paragraph or heading. The first element starts, the link starts and ends, the first element ends. The code for the link is nested inside the paragraph or heading code. When codes are nested, they are written in this order:

• Start tag for first element
• Start tag for second element (in these codes, the hyperlink is the second element)
• End tag for second element
• End tag for first element

Proper nesting order is important when coding following XHTML rules. Remember the format for nested elements:
<first element><second element>text content</second element></first element>

Examples:
<p><a href="http://www.google.com">Google</a></p>
<p>The strong and emphasis tags can be used to make text <strong><em>bold and italic</em></strong></p>.

Hint:
For code to be considered "valid," you cannot put paragraphs INSIDE headings and you cannot put headings INSIDE paragraphs. These are separate elements. Text can be a paragraph or it can be a heading but it cannot be both at the same time.

Examples of invalid elements.

<h3><p>Text content</p></h3>
<p><h3>Text content</h3></p>

Examples of valid elements.

<p>Text content</p>
<h3>Text content.</h3>

Absolute links

If a link is to a page OUTSIDE of your own website, the value for the href attribute must include the complete URL.

<p>
For more information about attending one of the best community colleges in the nation, visit the home page for <a href="http://www.parkland.edu/">Parkland College</a> in Champaign, Illinois.
</p>

• The value for the href attribute gives the complete URL for the web page, including the http://
• This type of link code is referred to as an absolute link. Because the page is not in the same website, the complete URL must be used so the browser can locate the file.

More examples:

<p>Go to <a href="http://www.google.com">Google.</a></p>
<p>Visit <a href="http://www.geocities.com">Geocities.</a></p>

For more information about the anchor tag, visit:
http://www.w3schools.com/html/html_links.asp

W3Schools is an excellent online resource for learning more about HTML/XHTML coding. Go to W3Schools and explore the pages for HTML and XHTML that apply to the elements in this project. Check out the links to "examples" of code at this website. These pages give you an opportunity to type in code and try it out to see if it works!! Practicing with HTML/XHTML code is the only way to really understand how it works!