Bakers’ Dozen 2.0
Let’s make a listing template with just 13 HTML tags!

Lesson Four

We’ve now used ten of the thirteen tags and we have a very nice looking template that could really help selling our wonderful little trolls. The three tags we haven’t used yet are: anchor, unordered list and list item. Let’s take a look at how we can use the anchor tag next.

If you look down in the terms section of the template, in the RESIDENTS OF KANSAS section, you will see that I say, “Email any questions to: thewiz@ourhutch.com.” This would be a great place to have an active link so when you click on the email address it opens up your email program so you can send a message without having to copy and paste the address manually. The anchor tag lets us do this. Here is how I would code that sentence to include the email link:

There are a couple of things to notice here. First, the anchor tag isn’t used only for email links. That is only one of the many purposes it serves. We’ll see more in a moment. Next, when you use the anchor tag to create an email link you must include the special designator “mailto:” in front of the email address within the tag. See if you can find that in the code above.

And notice that after the email address (within the anchor tag) there is a question mark and some other text, like this:

This allows me to also set the subject of the email address. Notice that the subject text is in single quotation marks. Notice that double quotation marks were used around the entire mailto section:

The single quotation marks are nested within the double quotes. This is an example of the case we talked about before where we need to use single quotation marks when a second set of quotation marks are needed inside a set of double quotation marks. You need these single quotation marks to group, and hold, the individual words (about those trolls) of the subject together. Otherwise, because they are separated by spaces, all the words after the first one would be lost as the subject was transferred to your email program’s message editor. There really is a purpose for all this stuff! I think it helps to understand and remember what you are doing when you know what the purpose is.

So let’s add this code to our sample template. See the yellow highlighted section in the template code below:

Notice that we include this code in line with the text of the sentence and the anchor element (<a&gt … </a>) surrounds only the text (the email address) that we want to be an active link. Note that the period at the end of the sentence is neatly left outside of the anchor element.

Here’s what it looks like:

If you don’t like the blue and purple default colors for the link you can set your own color by adding a style attribute to the anchor tag like this:

The example above would make the link red. Sometimes you want to turn off the underlining that normally marks a link. You do this with the same style attribute with the addition of a little bit more code:

But there is more. What if you want the link to be a different color say, red, and then turn to green when your mouse goes over it. You can do this with CSS when you use style sheets, but for templates where you can only use inline style attributes you need a little help from some JavaScript. This is called inline javascript since it goes right into the anchor tag just like other attributes. Here’s what it would look like:

This is one place where you might see capitalized first letter of second word usage like onMouseover and onMouseout because these are actually programming (JavaScript) terms and, therefore, this kind of capitalization would be valid. However, in keeping with the HTML tradition, I make these all lower case.

Let’s add this Javascript to our sample listing and see how it looks:

Another thing we can use the anchor tag for is to create a menu of links to other pages like our listings, eBay store, about me page, etc. Here is the code:

Let’s add this menu to the bottom of the template just above the trading assistant and copyright lines:

[ top of page ]