images and links


          Stock.XCHNG - free stock photography

          FreeFoto - free pictures

          Images, cliparts, templates, etc.

a useful tool

One of the ways to learn html is to study what others have written. Did you know that you can see the html code behind any webpage that you're looking at?

If you use Firefox, look in the Menu --> View -->Page Source

In Internet Explorer, in the Menu --> View -->Source

When you see a page that you like and you wonder how they did that, maybe the page source will help. Unfortunately it won't show you the stylesheet that sets the layout but it can be interesting for all the rest of the code.


As in all other applications, you must master the file structure to know where to store and recover the objects that you will use regularly.

The file structure on your server, as well as on your local computer, might look something like this:

The file structure on the server

If I'm working with index.html and I want to insert a picture from folder "images" I have to write the command as:
            <img src="images/web37html31.jpg" ...
Since index.html is in "root", I have to go down to "images" to get the .jpg file.

If I'm in a .html in another folder, such as "membres", I have to go back up to "root" then go down into "images" like this:
           <img src="../images/web37html31.jpg" ...

Image used as a separator

using pictures

Pictures are absolutely essential to the design of your website. Pictures are used to convey ideas, to draw attention to particular sections and to break-up text sections that are too long and boring.


To insert an image in a page, use the <img /> tag, like:

the image tag

Note that there is no </ img> tag.

The attributes of img are:
  • src=" " source of the image; may be a local folder or a URL;

  • width=" " and height=" " the size of the image, in pixels; these attributes are not compulsory but they may help to load the page faster since the browser does not have to wait to see the whole image before continuing to display text;

  • border=" " displays a border - that should be done by the stylesheet;

  • alt=" " important for accessibility - it's what is said when the page is converted to voice, for a blind person. There's another attribute, longdesc=" " which might contain the URL of a complete document to describe the image;

  • title=" " the description presented on mouseover and an important aspect of SEO because the words contained in title are indexed by Google and may increase traffic.

boy hacker animated image

image formats

All images must be in a compressed format: jpeg, gif or png. Never use the bitmap format (.bmp) because it's way too big!

  • .gif - use when the image is text or solid colors, without gradients, like cliparts - supports animation and transparency - may be interlaced which makes it faster to load but is bigger.

  • .jpeg - used for photos, when there are many color gradients - up to 16 million colors - cannot do animation - progressive jpeg is like an interlaced gif.

  • .png - like a .gif, with more colors - no animation - avoids certain licencing problems that may arise when using .gif or .jpeg.

The size of images is measured in pixels, like the screen. For example, an image of 600 X 400 pixels is an appropriate size for most web pages.

If you use a digital camera to take pictures for the website, they will certainly have to be resized. The picture in your camera may be 3700 X 2600, which is way too big to display. The only reason to keep a high-resolution image is for printing, where resolution is essential. To display the image it does not matter.

creating links

The Web site consists of a series of pages tied together by links, called anchors in html. The links connect to paragraphs in the same page, other pages in the same website or other websites altogether.

To link to an outside website, we use the anchor tag:
             <a href= "URL ">link text</a>

For example:
<a href="" target="_blank">Free tutorials</a>

The attributes of the <a ...> tag are:
  • href=" " the URL of the linked website

  • target=" ": will open the target site in a new window (IE) or in a new tab (Firefox and Chrome).

  • link text: description of the target site; Google uses it to rate the importance of the link.

internal links

To link to a point inside the page, you must first create an anchor at the point we want to go to:
            <a name="top"></a>
This would be inserted at the top of the page, after the <body> tag.

To use it we write: <a href="#top">Top</a>

This works as you see below.


Previous            Next