website management marketing & design

Hi – Edmundo at the controls again. I’m a little later than expected because I’ve been helping the team on a couple of big projects. However, as promised:

Attributes (XHTML)

Last session we covered elements in your XHTML document and the next but one session we will have a closer look at setting up a standard document with those elements  – but first we need to have a closer look at the Attributes of those Elements.

Each element in an XHTML document serves a purpose. We have looked at <a> tags, <h1> tags etc. and you already know what function these elements perform. In order to assist each element in fulfilling it’s purpose each element can carry an attribute. Attributes can help the element in many different ways – and in fact are the only way you can influence an elements behaviour.

The best way to help you understand the concept of attributes may be to show how they are “attributed” to an element and describe the core or universal attributes – these are the attributes that work with all elements – or we could say – that all elements carry!

Let us take our familiar <h1> tag or element. Core attributes are class, id and title. These are attributes that all (well actually the vast majority) of elements will accept. Each attribute carries a name and a value.

Let us add the class attribute to our <h1> tag. <h1 class=”myClass”>. Notice how we have added the attribute name (class) and it’s value (myClass) and how we have done that by saying our attribute name of  class is equal to (=) our attribute value of myClass – and lastly that the value is contained in exclamation marks to make sure the that XHTML can recognise that this is the value we are assigning to our attribute.

Now – why would we do such a thing? In the case of the class attribute this would mean that we could have 2 or more types of <h1> element in our document. For instance we might want to have one group that are italicised in 20pt times new roman (font) and another group that sit on a different group of pages that are in 15pt arial and not italicised. If we assign all the <h1> headers that we want in the first group the appropriate class - then we can specify in one command line (using CSS which we will visit later) just how those particular headers will appear!

The id and title attributes which also belong to the core group both have their own uses for each element that uses them. The id attribute is unique (or should be) to each element that uses it. So rather than allowing us to specify a group of elements like the class attribute, it allows us to specify a unique element. An example where me might use this attribute could be when we want to locate an image precisely on a page – it’s only that image that we are trying to position and we wouldn’t want to influence the on-page behaviour of any other images with our instructions.

The title attribute allows us to (you guessed already didn’t you? smart cookie, you are) give a title to our element – this title typically (but not always) is used to display a tooltip on the screen as you move across the element. So for instance moving over a link may display the destination url of the link as a tooltip.

That’s it for today. I’ll look at Document Declaration next as this will also help us look at “versions” of XHTML and something called deprecated attributes – so until next time, peace out – Edmundo Gonzales.

Filed under: Beginners by Edmundo
1 Comment »

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
2 Comments »