This week we’ll be looking at some more XHTML tags and a brief introduction to tag attributes.
More Tags
Last week we just went into some formatting tags. This week we’ll look at some other tags. Instead of you reading long and boring paragraphs explaining these tags, we’ll do it in a list-type style.
Hyperlinks
Hyperlinks (or more commonly referred to as simply links) allow you to create a clickable object (which could just be text, or even an image) which will take the user to another webpage on your site or a completely different website. Let’s take a look at an example of a hyperlink that goes to my blog.
Code:
[code='xml']Matt Freedman's Blog[/code]
Result:
For links, the XHTML tag is a, which has a required attribute of href (see the section of this post on Attributes). The value of the href is URL (Uniform Resource Locator) you want the user to be taken to when the link is clicked. The text between the opening and closing a tag is the object which will be clickable. In this case it is text, but it could also contain an img tag.
Images
A webpage would be pretty boring if it was all text, wouldn’t it? The image you want to put on your page must be uploaded somewhere on the Internet. You should also keep its dimensions and file size within reason, so the page doesn’t take forever to load. In this example we’ll add a picture of a GPS device to this page.
Code:
[code='xml']
[/code]
Result:
Embedding images on a webpage uses the img tag. The src attribute is where you specify the URL of the image you want to add. Again, this URL must be a place on the Internet. The alt attribute is where you specify alternate text for screenreaders (or if the image cannot be displayed for some reason). This should contain a description of what’s in the image. Although the alt attribute isn’t actually required, it is good practice to specify it for accessibility purposes.
Attributes
An Attribute in XHTML allows you to specify required or extra options to a tag. Attributes are contained within the opening tag of a tag and are in the form of attributename=”value”. All attribute names must be in lowercase and all attribute values are case-sensitive.
With many tags, there are a set of required attributes needed for the tag to work. A few examples of these tags are, a and img. There are a set of common attributes for most tags. These include id, class, style and title.
For some tags, there are more task-orientated attributes such as href on the a tag and src on the img tag.
The title tag is used for adding a mouseover title on things like links and images. The way this works is:
Code:
[code='xml']Example Link with Title Attribute[/code]
Result:
Example Link with Title Attribute
The title attribute can contain only text, with no XHTML.
It is worth nothing that the order of attributes does not matter.
Next Week
Now that we’ve discussed the “syntax” of XHTML, we’ll be moving onto various tags you can add into your document’s head.
