Design Primer 3: Advanced Tags

This part offers a look at some of the more advanced HTML tags. These tags will take us from simple text-based web pages to more interactive web pages. We'll start with images and hyperlinks and work our way through tables and end with spans and divs. Don't worry if you don't know what these are yet; we'll learn about them on the way.

Attributes

Before we get to the tags themselves, there's one more concept that we must cover: attributes. Attributes are extra text within the opening tag that give the browser (e.g. Internet Explorer) additional information about that tag. This often includes additional information on how to display the contents of the tag on the screen.

For example we'll consider the horizontal rule (<hr />). When we used this tag in Part 2, the line it created spanned the entire width of the screen. This may not always be desirable, so it would be nice to set a width. If we wanted the line to span, say 50% of the screen, we would add an attribute to the tag to tell Internet Explorer to only have the horizontal rule span 50% of the screen width:

Try this yourself to see that the horizontal rule now only spans 50% of the screen. The width="50%" is the attribute. Notice that the rest of the tag is the usual <hr /> tag.

Also notice that the attributes are written in lower case as name="value", where the value is in quotations. This is the proper notation for attributes. You may see attributes written by others in upper case and without quotations, but this is an older style. Now that we know that some tags may have attributes, we can get on with the advanced tags!

The Advanced Tags

Image - block-level tag

The image tag, <img /> places an image on your web page.

Required Attribute: src

The image tag has one required attribute, src. The src attribute tells Internet Explorer where the image file is located (in which folder and what the file is called). So to display an image, you must have at least <img src="location/filename" />.

Other Attributes

There are several other attributes the img tag can have. The most important of these is the alt attribute. The alt attribute is the text shown when someone places their mouse over the image. It is also the text that verbal browsers and search engines read.

Other important attributes are the image's width and height. These attributes tell Internet Explorer how much screen 'real estate' (in pixels) to reserve for the image, which makes loading the web page faster.

It is important to note that most images displayed on the Internet should have the extension .jpg or .gif. Most other images are too big and will significantly slow down the loading of a web site.

Example:

Note that to have this work, you must have a file named cat.gif in the C:\website folder. You can download the one here by right-clicking on the image of the cat below (not the screen-shot above) and selecting 'Save Picture As…' and then saving the picture in the C:\website folder.

Caution: if you do not close all open quotation marks in a tag's attributes, strange things will happen. This is a very common cause of errors (and frustration!) when learning HTML. So if you're having problems such as items aren't showing up on the screen, or a fragment of HTML is showing where it shouldn't, check your quotes first.

For example try removing one quote from the image tag to see what happens (quote removed between cat.gif and alt). The result will be different in every browser, as some can "interpret" what you mean, but others can't. Usually it will just appear as a broken image:

Anchors (Hyperlinks) - inline tag

Anchor tags, <a> and </a>, are the basis of hyperlinks (commonly called links). Anything within the anchor tags is shown on the Internet as a clickable link (the cursor changes to a hand and other changes may be seen).

Required Attribute: href

The anchor tag has one required attribute, href. The href attribute tells Internet Explorer where (which web page) to go to when the user clicks the link. So to display a hyperlink, you must have at least <a href="web2.html">Go to Web2</a>.

Other Attributes

If you want the hyperlink to open in a new Internet Explorer window, you can add the additional attribute target="_blank" (although using this attribute is now considered non-standard).

Example:

Note that for this example to work, you must have an HTML file named web2.html in the C:\website folder. You can just click File > Save As… in Notepad and save a copy of web1.html as web2.html (make a small change so you can tell the difference and don't forget to switch back to web1.html before continuing with the tutorial!).

For those of you who are adventurous, you can combine the above tags to make an image a clickable hyperlink:

Now when the user clicks the image, they will open a new browser window showing web2.html. Note that the attribute border="0" was added to the img tag. Without this, images used as hyperlinks have an ugly border around them (so users won't miss the hyperlink; a hold over from the early days of the Internet). Note that the use of Cascading Style Sheets (covered in Part 4) has actually made the border attribute obsolete.

Finally, to link to another web site, you must put the full URL (Uniform Resource Locator; this is the full web site address) in the src attribute. This always starts with http:// (don't worry about why, this is just what's needed!). So a full link to a web site would be:

Table - block-level tag

Until recently, the table tag, <table> and </table>, was the heart and soul of a web site's visual design. Using complex tables was the only way to get the consistent on-screen layouts that comprise many of the great web sites we see today. Tables are now slowly being replaced by Cascading Style Sheets (see Part 4) for the visual design of a web site, but tables still have an important place in web design for displaying tabular data.

Sub-Tags: tr and td

Before we get into the examples, there is an important thing to note: a table is made up of several different tags. These (sub)tags are always found within the <table> and </table> tags (similar to the <li> and </li> tags within the <ul> and </ul> tags of lists).

A table is made up of rows and columns, so the subtags account for this. The subtags are the table row, <tr> and </tr>, and the table data (table cell), <td> and </td>, tags. Confused? That's OK. Tables are confusing at first! Lets do a simple example of a one-celled.

Example: 1-Celled Table

<table border="1"> starts the table: the table tags are the "container" that tell Internet Explorer we want to add a table at this spot. The border="1" attribute adds a one pixel border around the table. This is included so we can see the outline of the table (this, incidently, is another attribute that Cascading Style Sheets has rendered obsolete).

<tr> starts a new table row: table rows are displayed horizontally across the screen

<td> starts a table cell: table cells are where data is entered into the table. There must be at least one <td>…</td> set of tags in every table (otherwise there is no where to put the data!).

</td> closes the table cell

</tr> closes the table row

</table> ends the table

To get a better feel for table structure, we'll add another cell to the table.

Example: 2-Celled Table

Once you do this, you start to get a feel for what the table is doing. Since the new <td>…</td> tags are in the same table row (within the same <tr>…</tr> tags) as our first <td>…</td> set, the two cells are shown beside one another on the screen.

They are in the same row, but in separate columns. So the number of columns in the table is defined by the number of table cells in a row. To try and get a better handle on this, lets add a another row to see what happens.

Example: 4-Celled Table

You can see that the new row is positioned below the first row. Because a table must have the same number of columns across all the rows, we have placed two table cells in row 2, to match row 1 (for a total of 4 cells; if this isn't done, Internet Explorer tries its best to display the table, but strange things can happen).

Now, what if, say, we want the top row to span the whole table undivided?

Example 3-Celled Table

Colspan Attribute

We can merge cells with the colspan attribute of <td>.

What have we done? Aren't there too few <td>…</td> tags in the first row now? The answer, as you can see when you view this page, is no (the deleted line is highlighted). To get the top row to span our two column table, we gave the first <td> of that row the attribute colspan="2". This tells Internet Explorer that we want this table cell to span the width of two "normal" table cells.

If we had set colspan="3", the table cell would have spanned the width of three columns; although this would be a problem in our two column table! Once we have the first table cell spanning two columns, we no longer needed the second set of <td>…</td> tags in row 1.

Rowspan Attribute

A similar attribute, rowspan, can be used to have a table cell span multiple rows. The tricky thing about this attribute is that the extra <td>…</td> tags that we remove are in the rows below the row with the <td> we added the rowspan attribute to (note the blank line where a row was deleted):

Somewhat confusing, eh? It's normal to be confused when you see tables for the first time - they're tricky to wrap your head around! The good news is that we're done with the worst of tables. The only thing left to discuss are some of the attributes of the <table> tag itself:

Table Tag Attributes

Note: as with many of the attributes discussed, these attributes are now mostly obsolete, having been replaced with Cascading Style Sheets. However, when learning HTML initially, it is easer to work with them, so that's what we'll do here.

Cellpadding

cellpadding="x". The cellpadding is a number that tells Internet Explorer how many pixels of "cushioning" there is between the border of a table cell an its content. If it is not included in the table tag, it is assumed to be 3.

Cellspacing

cellspacing="x". The cellspacing is a number that tells Internet Explorer how many pixels of space there should be between each cell (i.e. sets the width of the dividing lines between the cells). If it is not included in the table tag, it is assumed to be 3.

Border

border="x". The border is a number that tells Internet Explorer how thick the border around the table is. If it is not included in the table tag, it is assumed to be 0 (no border shown).

Example: Table Attributes

The above values of border, cellpadding and cellspacing make for a nice looking table (although beauty is always in the eye of the beholder!). Note that since cellspacing="3" in this example, we could have omitted the cellspacing attribute entirely (it is assumed to be 3 if it is not included). However, with new browsers appearing constantly and web standards changing as fast as they do, it is never a bad idea to explicitly include an attribute.

Span - inline tag

The span tags, <span> and </span>, don't do anything by themselves, but act as a container for an inline section of content and allows you to do something to the content contained within the <span>…</span> tags. An example will help.

Example

When you look at this, there is no difference between the regular text and the text in the <span>…</span> tags. So what's the point? To give you a taste of Cascading Style Sheets (covered in Part 4), we'll add a style attribute to this span to see what happens.

Example: Span With Style

Don't worry about understanding the style attribute right now - just know that style="color: red" changes the text colour to red.

Div - block-level tag

The div tags, <div> and </div>, which stand for "division", are tags that allow content within them to be treated as a single entity. It is divs, along with Cascading Style Sheets (covered in Part 4), that are changing the way web site design is done.

Divs allow content to be moved around the screen, and have its properties altered, all without actually touching the HTML itself (versus visual designs that rely on tables, where any little change can require extensive rewriting of the HTML).

A div can have almost any other HTML element within it. In our example, we'll show some text in paragraph tags.

Example

Right now, this doesn't look any different than if we had just used the paragraph tags without the div tags. As with the span tag, we'll add a style attribute to this div to see what happens (as well, we'll add a paragraph outside of the div to show that the style attribute is only affecting the div).

Example: Div With Style

Notice how all the text in the div (and only the text in the div) was changed? That's the power of divs in action!

That's it for now. Getting into the complexity of divs is beyond our scope for this part, but for the reasons outlined, it's worth knowing about them. In Part 4, we will look at Cascading Style Sheets (CSS) to add some visual flair.