Tags with Attributes: Links and Images

Using Attributes

HTML Tags have additional options you can access through what we call “Attributes”. They look much like the regular tags with the addition of one or more name/ value pairs in the opening tag. Below are some examples of proper syntax:

ATTRIBUTE SYNTAX:

<Tag attribute_name=”attribute_value”> Content </Tag>

Attribute Notes

Examples of Attributes:

Hyperlinks

Now that you know how to use Attributes, you can use the most important HTML tag around: The Hyperlink (aka link). It is the tag that allows you to click from one website to another, which is the foundation of the whole Internet. Here’s the basic syntax followed by some optional forms.

HYPERLINK SYNTAX:

<a href=”http://goto.com”> Link Label </a>  (basic syntax)
<a href=”index.html”> Link Label </a> (relative URL)
<a href=”http://goto.com” target=”_blank”> Link Label </a> (new window)

Hyperlink Notes

Images

And now, we come to what I think is the most fun HTML tag: The Image tag. It allows you to embed digital photos and other art into your webpages. Because the image tag doesn’t need to sandwich any text, it has an interesting syntax; it opens and closes itself in a single tag.  Here’s how it looks. You can get by just using the basic syntax 90% of the time, but for more control, you can use the optional attributes that follow.

IMAGE TAG SYNTAX:

<img src=”http://mysite.com/picture.jpg” /> (basic syntax)
<img src=”pics/picture.jpg” /> (relative URL)
<img src=”pic.jpg” alt=”beautiful sunrise over beach” /> (alternate description of picture)
<img src=”pic.jpg” title=”My face is so funny” /> (creates a “tooltip” caption)
<img src=”pic.jpg” height=”100px” /> (specify height)
<img src=”pic.jpg” width=”200px” /> (specify width)
<img src=”pic.jpg” height=”100px” width=”200px” /> (specify height and width)

Image Tag Notes:

STOP: IT’S EXERCISE TIME!

Ok, believe it or not, you’ve already got enough HTML knowledge to do some damage! All we need now is to get some practice. So for this exercise, we’ll be writing actual code in your 4 main HTML files. Remember, all the code you write should go within the <body> tags of the basic HTML structure we talked about.

Prev Page: Important HTML tags
Next Page: Image Extras