Tuesday, February 2, 2016

First hypertext

Hypertext


Hypertext relates to the ability of web pages to link to other pages. Like this.

In this section we'll add a link to our page.

For historical reasons links are known as anchors and are placed in an <a> tag. The anchor tag that is behind the word this above looks like this:

<a href="http://www.google.com/" target="_blank">this</a>

The parts of the anchor tag are:

<a : the start of the tag



<a href="http://www.google.com/": a tag property. The href property value is the url of the page that will be loaded when the link is clicked. The rules for all properties are:

  • They should have a value (tags without values are abominations but they have been used in the past, mainly by Internet Explorer)
  • The value must be surrounded in quotes. Double or single quotes can be used.
  • If the property is not recognised or is not appropriate to the tag it will be ignored.
Because this link is going to another site the fully qualified url has to be given. If the link is to a page on the same site then a relative url, made up of the directory and page name, can be used because the browser can guess the protocol and domain.

<a href="http://www.google.com/" target="_blank">this</a>: Another property. The target property tells the browser how to open the link. The _blank value opens it in either a new page or new tab.


<a href="http://www.google.com/" target="_blank">this</a>: The text that will be displayed. The browser takes care of the colour and underlines on the link. The de facto standard seems to be blue with an underline but later we will see how to override this using style sheets.

<a href="http://www.google.com/" target="_blank">this</a>: The end tag.

Exercise


Put a link to this blog on your page. Hint: the url is in the browser url box...

No comments:

Post a Comment