Tutorials @ WebDesignPro

Begining HTML and CSS | Part 2

In the second part of this tutorial we learn how to code images and links to other pages into our document.

We'll start by creating 2 HTML documents. Call one page1.htm and the other page2.htm. Add a little content to each page to define one from the other.

Both documents should be in the same directory

On page1.htm we are going to create a link to page2.htm and vice versa. We do this with the 'a' element and 'href' attribute as follows

In some circumstances you may wish to open the new page in a new window. We can use the target attribute for this.

It is not a good idea to make each page open in a new window as it will inevitably annoy your visitors. Personally i never use target="_BLANK"

Now let's take a look at how we add an image to the page.

Create a folder called img inside the directory where you have your html docs stored. Upload/add an image to it and then copy the following code to one of your pages (replace image.gif with the name of your image)

You can adjust the width and height if you wish using 2 attributes called width and height respectively (or use a css style).

It is not a good idea to resize a large image down to a small one as the visitors browser will have to load the whole thing before displaying it slowing down the page load time. Personally I always resize my images in an editor first.

Before moving on it is worth mentioning that img tags should always have an 'alt' attribute in order to pass as valid code. The alt attribute is used for default placeholder text that can be viewed by people who use browsers that don't support images or have them disabled (visually impaired people using screen reading devices is an example). It will also improve your chances in the search engines

I think it's time we looked at some CSS this is an HTML and CSS tutorial after all.

Let's take a look at how we can style the links we made:

Notice that we have defined link and visited to be the same.

There is an additional style that can be placed after these 3 called a:active that defines the styles of an active link, I rarely use this

For the final part of this tutorial we will use the image and link elements we learnt about earlier to create an image that is itself a link.

Note the use of border:0px. You will probably want to use this normally when creating image links as Internet Explorer adds a thick blue border otherwise

Well! Give yourself a pat on the back, you are now equiped to build a basic website! Have fun and check back soon, part 3 on its way.

Comments:

Featured Script