HTML Tutorials > Day Two > Page 2

Hypertext Links

Hypertext links are what bind web pages to one another. They allow for navigation from web page to web page and are a key component to web design. The tag for a link is <A> (Anchor), but to get it to link anything, you always need the HREF (Hypertext REFerence) argument automatically. The tag should always be closed with a </A> tag as well. What's put inside of the HREF attribute is the most important part of the tag. You can put in full web addresses or you can have it send e-mails. To make a link to Eastview's web page (www.district196.org/evhs/), the href attribute should be "http://public.district196.org/evhs/". If you wanted to e-mail someone, with the e-mail address Tyler.Krebs@district196.org, the href attribute should be "mailto:Tyler.Krebs@district196.org". Notice the "mailto:" added on to the beginning. It should also be noted that anything put between the <a> and </a> tags will be what is linked (text or images). Here are some examples of hypertext links with text:

Code Example:

<p><a href="http://public.district196.org/evhs/">Eastview's Web Page</a></p>

<p><a href="mailto:Tyler.Krebs@district196.org">E-Mail Mr. Krebs</a></p>

Code Display:

Eastview's Web Page

E-Mail Mr. Krebs

Placing Images

The image placement tag in HTML is <img>. The image placement tag is one one of the rare instances that does not require a closing tag. The <img> tag has a required attribute of src (source). The source tells where to find the image on the internet. If the image is in the same directory as the web page is, you only need to enter the filename. Common attributes to define are the image's width and height. Say you take an image that is regularly 400x100 pixels. If you set the width tag to be 200, and you didn't set a height tag, the image would be scaled to 200x50 pixels automatically. If you specify both width and height tags, it's important to make sure they are scaled properly, otherwise your image will distort. Also note, it's not a good idea to always scale down big images in the HTML code. This will still load the original full-size image. It's a good idea to thumbnail (make smaller versions) of the images ahead of time in Photoshop. The align attribute can also be used in placing images the same way it was used with paragraphs, but issues with spacing may result. I suggest using tags like <center> and </center> to align them instead. On the next page are some examples of the image placement tag and some of it's attributes:

Back to Page 1 | On to Page 3


This web page created, developed, and maintained by Kyle Spahn and Mr. Krebs.