This is probably the easiest segment of our HTML tutorials. If you ever messed around with Myspace and message boards, you probably know a little about how to post images and hyperlinks (links) online. I will explain to you the basics to adding these into your website and the attributes and requirements that go with them.

Table of Contents

1.  Beginning HTML – HTML Doctypes, Head, Body
2.  HTML Images and Hyperlinks – IMG, A
3.  Basic HTML Structure, Tags, Classes, and IDs   – HTML Cheatsheat, Divs, Spans, Paragraph
4.  HTML List Tags – UL, LI, OL
5. Beginning Cascading Stylesheet (CSS) – Inline Styles, Internal Stylesheet, External Stylesheet
6.  Positioning HTML elements with CSS – Floats, Margins, Padding, Relative, Absolute
7.  Background Images in CSS
8.  HTML/CSS Cheatsheet and Tricks – Overflow, Hovers, Text-Indent
9.  Browser Compatibility – Internet Explorer (IE 6, 7, 8), Mozilla Firefox, Apple Safari, Google Chrome

Images

We all know what they are. They are the pictures and graphics that makes our simple website into something more appealing…into an actual website (that can be a trivial topic to talk about). Regardless, most websites have some type of image associated with it whether it be a logo, a picture you want to share, or an ad.

There is only one basic code that you use to put images onto an html page, however there are lots of attributes that you can add, which I will explain later on the ones that are popularly used.

Here’s the code to place images:

<img src="path/to/the/image.extension" />

Let’s break it down a bit.

First off, notice that the code ends in />. IMG is a special tag that I like to call “self-closing”. Unlike most tags where you have to close it by repeating the tag name and have a preceding “/” before it, IMG just requires a closing “/>” and it’ll be valid to W3C Standards.

What the Attributes mean?

img – This is the opening tag that tells the browser that this is an image.

src – Short for source, this is the code that tells the browser where the image is located. In here you need to place the address to where the image is. If I put the image in the same folder where my index.html file is, then the address or source (src) of that image is just src=”picture.jpg”. If I put it in a folder named images that’s in the same place as my index.html then the source of that image is src=”images/picture.jpg”. Now the source is always by default relative to the file that you put it in.

So let’s say index.html happens to be in a folder called “start“. Now if I put the images outside of “start” folder and if I reference it the same way as above, the file will not be found because the code is telling the browser that the image is found inside the start folder. See below for examples of relative and absolute paths.

Using relative and absolute paths may break your site in terms of images being missing. To fix this problem, or rather “to cheat” is to use something called an absolute path. An absolute path is the definite address of the image.

Absolute Path: http://yourdomain.com/picture.jpg
Relative Path: /picture.jpg

Absolute Path: http://someotherdomain.com/images/picture.jpg
Relative: /images/picture.jpg

Absolute path usually appears like http://yourdomain.com/picture.jpg. By using absolute path, the browser will know the address of the image, and it doesn’t matter where you put the html file because the absolute path is always the right path. This is also useful if you’re using an image from another site. Since you don’t have the image on your server, you are referencing it from their server.

What’s the pros and cons?

Absolute path is a very good way to make sure the images will not be missing. However, if you were moving your site to a different domain. Then you have to refix all the links because yourdomain.com is now mydomain.com.

Relative paths is really good if you’re expecting a domain change or migrating your files to another directory.

Are you confused? Here’s a good article on absolute paths and relative paths that might explain it better than I do.

More Advanced Attributes for IMG

Now here’s a more advanced form of the IMG tag.

<img src="path/to/the/image.extension" alt="Alternate Text Goes Here"
title="Title of the Image Goes Here" />

In this piece of code you will see two new additions: “alt and title”

alt – Short for “Alternate” is basically the text description of your image when it doesn’t load or goes missing. So if your image is gone, or perhaps someone has an extension that blocks images, this alternate text will be displayed. In addition, alternate text is good for search engines since search engines doesn’t normally pick up images and looks at the text content of the site. And so if you put text for your alternate attribute then that would be picked up by search engines. For more information, take a look at how you should use the alternate text for search engines.

title – Title attribute is another way to add descriptions to your images. Basically when you hover over your images, you’ll sometimes see people have a little tool-tip description of what the picture is or more information on it. This is the title attribute. More so this is used for usability and to add more descriptions rather than something that is useful for search engines like the alternate text.

Hyperlinks

Hyperlinks or in short “links” is used everywhere. It’s how we navigate from page to page, and from site to site. Links is the address to our location, whether it be our site, another site, to an image, to a video, etc… The only way you can get to something online is by knowing the address (link) to wherever you want to go.

Like before, here is the absolute basic form of a hyperlink (A Tag):

<a href="http://mylinkhere.com">My Text That will be Linked</a>

In order to have a link, you must have something to give a link to. This can be a text like I have above, or you can just put an image. Whatever floats your boat.

a – The “a” tag is short for anchor. I guess it makes sense why it’s called that because of anchors that leads to certain boats. Anyway…you need to use “a” tag to start the link.

href – href is short for “Hypertext Reference”. And basically that big chunk of words means “the link that you want in there“. So where it says “http://mylinkhere.com” that is where you want to put your link. Whether it’s relative or absolute, this is where you put it.

My Text That will be Linked – Obviously not an actual piece of code, but this is where you put the text that you want the link to be attached to (like an anchor…now it makes sense). So make sure the text is descriptive to what it is linking to. For example, “Contact” wouldn’t be a good name for a link if it’s linking to a support page.

More Advanced Attributes for the A Tag

There are a lot of attributes you can use for “a” tags. The most popular ones would be target and title.

<a target="_blank" title="About" href="http://link.com">Text That will be Linked</a>

target – Target is an attribute that tells the browser, how to open a link. There are a couple of different attributes but the most used are the default which is “_self” and “_blank”. “_blank” opens the link in a new window or tab (depending on the browser) and “_self” opens it up in the same window or tab.

title – Much like the IMG attribute for title, it works the same. If I hover over that link, a little tool-tip will come up and say “About”.

Okay, so I kind of expected to do something this tutorial…

I know, there isn’t really an exercise that we can do to practice this, but I’ll make something quick.

Let’s just make a copy of index.html and make it to be “about.html” and make sure it’s in the same directory as index.html like below.

Now in index.html, let’s make a link and label “About” –

<a href="about.html">About</a>

Since the about HTML file is located in the same directory, we will be using a relative path of just “about.html”. Now if you go to your index.html, and click on “About”, it goes to the About html page. You can change up the About page so that it has different information like I did below.

And you are probably already saying, “now I’m stuck on the about page and I can’t get back to the index page”. That’s the one thing with HTML pages. Since they are static, you are going to have to make sure that what you do on one page, link wise, you have to do to others. Try it for yourself.

Make a 2 page website with the following links – Home and About -, and put a picture in it. It’s easy to put a picture in it. Either you get an absolute link from another site, or just put the image in the images folder we made in the last tutorial and use the right relative path.

The source files below contains my interpretation of it and you can see if you got it right. The above picture is how it should look like in the end. Of course with your picture and not mine. (You could use my picture if you want)

Conclusion

And that concludes everything that you’ll need to know about images and hyperlinks in terms of placing them in your code to function. There are a lot more you can do with them, but for now I’m going to save that for a future segment. Of course, check out the other links below that I put as a resource for even more details on this topic. Don’t forget to follow along for more tutorials.

Download Source Files (.zip)

Resources

W3C Schools – HTML Images
W3C Schools – A Tags