HTML Tags and attributes (page 3)

Practice

We're going to build a nice paragraph with a link inside of it, so later we can change their properties.

The first step is to build the paragraph with its content. Paragraphs are inserted in HTML documents through the HTML p tag. We can do it as follows:

Now let's put the link inside of it, through the insertion of the HTML a tag. At the begining, we'll just place the element with its content ("nice link") and no attributes or events:

As you may see, there is no link yet, so we should consider that adding an HTML a tag doesn't mean a link has been stablished (the "href" attribute does). We'll keep calling it like that because we know it will become a link soon or later.

This is the time where we start using attributes. The first attribute we're adding is "lang". With this particular attribute we're telling the procesing agent (browser, search engine robot, etc.) which language is this paragraph written in. The values for this attribute can be obtained from the list of Language codes.

There we go. We are now showing a piece of text and giving an extra hint about it. This type of attributes are most times hidden attributes, because we are not able to see them in traditional web browsers. However, many user agents use this information at some level (e.g. spoken browsers, commonly used by blind people, speak this text in english instead of the language of the document, for example, spanish).

Other attributes, like the one we're using next, are clearly visible. The "href" attribute works only in the HTML a tag and specifies a resource to which this document is making a reference to. It's value must be the address of the referenced resource, in this case, the HTML a tag's URL.

So far, we've learned to use tags and attributes in HTML documents. To end with this practice, we're adding an event.

Events are a jump beyond HTML, given that they're useless without a client-side language. Basicly, what an event does, is to trigger a program written in a client-side language. So, as this is an HTML tutorial, we'll limit to show how to trigger the script, not to build it.

In this example, we'll trigger two scripts named "do_something_click()" and "do_something_mouse_over()", in the same paragraph we've been using. The argument "this" will tell the script, which element it should affect.

The events we've picked are "onclick" and "onmouseover". These events are triggered when the visitor clicks or passes the mouse over the content of the element. To check what other accions can trigger events, see this list of HTML events.

As we'll use this events in the paragraph, they will trigger the scripts when the visitor clicks or passes the mouse over the paragraph. To make it visible, we're using basic scripts to change the color of the text: red when the mouse passes over the text and green when it's clicked.

Congratulations! the practice is done. Get ready to take the next tutorial.