More HTML basics
Introduction
This section covers attributes and hyperlinks.
Attributes
This short lesson builds on what we learnt last time about basic HTML and tags, to introduce the concept of attributes. Attributes are used where a particular HTML tag requires extra information.
Links
A link on a web page consists of either text or an image which, when clicked on, sends the user to another page.
Links are specified using the <a> tag. In addition to the tag, we need to use an attribute to specify extra information; namely, the destination page.
Attributes
Attributes provide a way to attach extra information to an HTML tag. So far the tags we've seen (such as <p>) haven't needed any such extra information, but other tags do.
What is an attribute?
An attribute is a control that can modify the way an HTML tag works. Attributes have values which describe the desired result. For each HTML tag, there are certain attributes which have effect.
Attribute format
Attributes are included within the triangular brackets of the tag, following the name of the tag and a space. The closing tag </tagname> isn't affected. In all, the format looks like this:
<tagname attribute="value">contained text</tagname>
If this seems a bit abstract, don't worry; the next page includes an example of using attributes to create links between pages.
Multiple attributes
You can have more than one attribute in a single tag:
<tagname attribute1="value1" attribute2="value2">contained text</tagname>
Links
Links are created using the <a> tag. The text contained within the tag becomes active. If a user clicks it, they will be taken to the page specified by the href attribute of the <a> tag.
Linking to other Web sites
When creating a link to a different Web site, you need to first find out the URL of the resource you want to link to. The URL is the text which appears in your browser's location bar when you're looking at the site.
Once you know the URL, you can create a link in your page by using that URL as the value for the href attribute of the <a> tag. Between the <a> and </a>, you put the text (or images, which we'll cover later) that you want to provide for the user to click on.
This format looks like:
<a href="URL">Text description</a>
For example, imagine that you want to create a link to this class Web site. The URL for the front page is http://www.leafdigital.com/class/. So your link might look like:
<a href="http://www.leafdigital.com/class/">Class Web site</a>
Note: You must include the full URL (beginning with http://) in the href attribute. Abbreviated URLs like www.leafdigital.com/class won't work.
Linking to other pages in your own site
When you link to other pages in your own Web site, you could use the same scheme - find out the entire URL of the page on your site you want to link to, and enter this as the href attribute.
But this isn't a good idea. For example, if you move your Web site to a different server, all the URLs will change and you'll have to go through editing them. Also, you won't be able to use a copy of the site on your own hard disk because all the references will be to Internet sites.
Instead, you can use a relative URL. If you don't include the beginning part of the URL (http://) in the href attribute, it is interpreted relative to the existing URL of the document that includes the link.
For example, if you have a page stored at http://www.isp.com/username/example.html, any links in this page that don't begin with http:// will be taken as referring to http://www.isp.com/username/href-value. You could refer to the page http://www.isp.com/username/example2.html like this:
<a href="example2.html">Second example page</a>
If you use multiple "directories" or "folders" to organise your files, things get slightly more complicated. Supposing you also had a file at http://www.isp.com/username/folder/test.html; this could be referred to as:
<a href="folder/test.html">Test inside a subfolder</a>
The special folder name ../ can be used to refer to a folder one level up. For example, within the file http://www.isp.com/username/folder/test.html you might want to link back to the original http://www.isp.com/username/example.html, and you could do so like this:
<a href="../example.html">Returning to the original level</a>
(If you use ../ twice - ../../ - that refers to the folder two levels up, and so on.)
If your web site uses only relative links for its internal links, then it will work on your hard disk as well as after you upload it to a Web server.
A note about index.html
You might notice that some URLs end in a /, rather than a specific filename. This is a shorthand, instructing the Web server to show the default file in that folder. Normally, the default file is the one named "index.html". So the following URLs are equivalent:
- http://www.leafdigital.com/class/
- http://www.leafdigital.com/class/index.html
This shortcut doesn't work when the files are being read from your hard disk rather than via a Web server.
Example
I created an example file to demonstrate links. You should recognise everything else in the file from the previous lesson.
Summary
Attributes provide information for some tags
Attributes and their values provide extra information where a particular HTML tag needs it. For example, the link tag, <a>, needs the href attribute to specify where the link should go to.
Links are created using the <a> tag
The <a> tag is used to create links. The text or other content contained between the open and close tags becomes active; when clicked, it sends the user's Web browser to the URL specified by the value of the href attribute.
URLs can be absolute or relative
URLs can be either absolute - full URLs beginning with http:// - or relative, in which case their destination is based on the location of the page containing the link.
Links within a Web site should normally be relative URLs, because this means they will work when the page is stored on hard disk as well as when it is at the server, and they will not need altering if a Web site is moved to a different server.