website management marketing & design

as promised I’m back with the next topic in our beginners beginning guide to XHTML and CSS. As you should be aware I’m Edmundo and I’m blogging my learning as I start up here at 1pagedesign so that anyone following in my steps will find it easier (should!)

I left you mid last week with an overview of XHTML elements and promised to introduce you to attributes and give you quality resource to follow in the way of a book (it’s the one I’m using too, so we should end up on the same page – so to speak!)

Attributes sit within the chevrons and follow the element name. There are many types of attribute and most are specific to their element – in other words they specify some information that only that type of element will need – however there are also a whole host of “standard” or core attributes and these apply to pretty much all elements. It’s a simple system so don’t let it worry you at all – let me show you an example:

In our last blog or lesson I showed some typical elements (Tags) – let’s introduce a new element whose purpose we are all very familiar with – the anchor or link that takes us to other pages on the net. Frequently these will be coloured blue and have an underline (all though this is not necessary – it is common and recognisable). We all know what clicking this link will do. This element in XHTML is <a> or the anchor tag.

This tag takes an attribute called the href attribute. This stands for (I’m guessing a bit here, but can’t be too far off) hyperlink reference. This attribute tells our browser where to take us when we click on the link – the destination page gets referenced here.

So adding the attribute within our <a> element we get:

<a href=”http://www.myexamplepage.com.au”> You notice how the attribute requires an “=” sign and a “value” within quote marks. The value pertains to the attribute (whose name in this case is href) and the attribute tells the element something it needs to know. The syntax we use is the element name followed by a space followed by the attribute name followed by an equals, followed by the value in quote marks (single or double – both are good) followed by the enclosing chevron.

Let’s stick with the <a> element for a moment. As you may remember we will need an </a> to close the element. So in this case that will give us <a href=”http://www.myexamplepage.com.au”></a>. But notice that we have not put anything in between our opening <a> and our closing </a>? What needs to go here is the text we want to display – as with our previous examples.

So let’s add some text to display – “such as click here to visit my home page”. We thus get <a href=”http://www.myexamplepage.com.au”>Click here to visit my home page</a>. The element will tell the browser to display this text as a link – so in most cases that will be blue and underlined.

Thus you can see the purpose served by the element and attribute – both give the browser the information it needs to render our text in the way we intend – in this case we marked it up to provide a service to the reader that was not available to print readers of earlier times – and in fact these links or <a> tags are part of what make the Internet so interactive and useful to us all!

OK – I’m going to use an <a> link now to send you to wrox.com where you can look at the book I am using in my studies and that I would recommend if you want to do more than just get the overview that I am writing here as I progress in my studies. Notice how on our site links are programmed to display as green and display a dotted line when you bring your mouse over them? This is handled by CSS which we will look at later – this allows you to override the default way in a which a browser will display something.

Beginning Web Programming with HTML, XHTML and CSS or alternatively you can use betterworld books to buy a used copy and save landfill etc. much more environmentally friendly – and generally cheaper – try them  at BetterWorld Books

Next we’ll go over attributes in a bit more detail before looking at document structure and declarations. I hope you’re having fun – I am. ’til next time – Edmundo

Filed under: Beginners by Edmundo