Web design: learning HTML

Adding images

Most pages look pretty dull without images, so knowing how to add them is pretty useful. Before you add an image though, there are some things you have to check, and a couple of things you should be aware of.

Layout or content?
Is the image simply a way to make a page more interesting, or is it part of the content? For example, a pretty bar image that goes between two sections is a layout image, but a photo of your dog is a content image. You should only include the latter in your HTML documents and leave the layout for the style-sheet later. This leaves your document nice and tidy, and if you decide to change how the page looks another day, you need only update the style-sheet instead of the style-sheet and the content.
Image type
Images take up a lot of memory compared to text, so to save space and download images more quickly, you need to save your images in a compressed format. Most web browsers can only show three different formats, so if you want your image to work everywhere, you need to use one of those formats. They are GIF, JPG and PNG. The program you use to create, scan, or capture the image will nearly always let you save in one of these formats, but you should choose the right one to get the best image quality and the smallest filesize. GIF and PNG are good for flat-shaded images like cartoons, and charts. If your image has large areas that are exactly the same colour (no continuous shading), then GIF and PNG are very good. PNG is the newer format and lets you have as many colours as you like, while GIF has fewer colours but can also have a transparent colour that virtually all browsers can display (sadly the only browser released in the last 3 years that doesn't support the PNG format's far superior transparency channel is the most popular: Internet Explorer). JPG is for photos and images that have continuous shading. The more you compress a JPG image, the more detail it loses though, so don't play around with JPG images too often.
Image size
There are two sizes that matter when creating an image for a web page: the size on disk, and the size on screen. You need to make sure that the size on disk is relatively small because otherwise your page will take longer to show online. Similarly, do not make images take up too much room on screen. The average desktop PC screen is still 800x600 pixels in size, which means the largest image that will fit on the screen is about 750x450 pixels when the browser is maximised. This is still pretty huge and you should endeavour to make your page fit on screen without forcing users to scroll too much.

The easiest way to make your images take up less room on disk is to make them smaller on screen. If you're saving a photograph you can also try blurring it a tiny bit before saving it as a JPG, because the JPEG format works better when colours change smoothly across the image and has the most trouble with areas of high contrast, like edges between shapes and their backgrounds. Make sure you keep the original somewhere in case you need to edit the image.

The HTML tag for inserting an image is <img>. The <img> tag has no closing tag; it's just a single element like <br> that instructs the browser to download an image and display it. It also has several attributes that are either required or recommended for it to work properly and for your page to continue to load quickly:

<img src="myimage.jpg" width="320" height="200" alt="A photo of gazelle">

In HTML 4, the src and alt attributes are required. Here's what they do and what they mean.

src="..."
This is the address of the image. If you just put the filename, the web browser will expect the image to be in the same place as the current HTML document, but you can also use a relative or absolute URL to point to images in other folders, or even on other servers (make sure you have permission first, it's considered quite rude to steal bandwidth from other web servers). URLs are explained a little further on, so for now just consider them to be the filename of the image you want to show.
width="..." height="..."
For a web browser to display a page quickly, it must know the size of all the elements inside it. Some browsers wait until some of the image has downloaded so it can guess the size, but most will simply redraw the whole page when it finds out the size of the image. You can avoid both of these things happening if you tell the web browser the width and height of the image in the HTML. The numbers are in pixels and the program you used to save the image should tell you how big the image is. If it doesn't and you have a graphical web browser like Internet Explorer or Netscape, you can drag and drop the image onto a browser window, then right-click the image and choose "Properties".
alt="..."
This is alternate text that shows in case the image doesn't load. The alt="" attribute is required, but it can be empty if you do not think the image is useful. Keep descriptions short (no more than one sentence) — there's a longdesc="" attribute if you want to link to a page with longer descriptions of images. You cannot put HTML code into any attribute, but you can use HTML entities if you want to include quotes or special characters. For example:
<img src="spotnme.jpg" width="320" height="200" alt="A photo of my dog &quot;Spot&quot; &amp; me">
...has an alternate text message of 'A photo of my dog "Spot" & me'.

If you want text to show up when you hover the mouse pointer over an image, then use the title="" attribute. You can put the title="" attribute on almost every tag to make it show text when you point at it. The alt="" attribute is specifically for describing an image when the image cannot be displayed, whereas the title="" attribute can be used for image captions and the like, assuming that the image has loaded.

Now that you know how to tell your browser to load an image, you'll want to be able to tell the browser how to show it on-screen. This is another job for style-sheets as you'll see later. For now just get all the elements you want onto the screen; we'll worry about how it looks later.

URLs and path-names

As you saw with the <img> tag, sometimes you have to provide a filename to a browser for it to load, or point to another file. If the file is in the same place as the HTML code you're writing, then you can simply give the filename, but sooner or later you'll get so many files that you'll want to tidy them away just like you do on your home computer. You create files and folders on your drive, and in your webspace to tidy documents away, and you have to tell your browser which folders to look in to find the files you need. To make matters more complicated, web browsers can access files on completely different computers across the Internet and they can use a variety of different methods to access those files. Finally, Windows, Unix and MacOS all use different ways to point to files: a standard way was needed to point to documents on the Internet and the URL was born to do just that. HTML requires you to enter all your filenames in URL form, which follows this pattern:

method :// [username:password@]server[:port] /path

The items in square brackets are optional. Most web servers do not require you to log in to access documents, and the standard port for web servers is port 80, so unless the server you're accessing is different, you don't need to specify that either. Virtually all web servers use the HTTP protocol, today, though FTP and mailto: URLs are also common. So the good news is that the hardest URL you'll probably find yourself writing is something like:

http://www.lazycat.org/html/index.html

The above URL boils down to, "Ask the server www.lazycat.org for the document called index.html in the html folder. This is what is known as an absolute URL: it provides a completely unique address for a document that no one else in the world uses. Absolute URLs are the only way to point to files on other people's web servers. The problems with absolute URLs come in when you're writing your own site and need to access other parts of the site.

Well fortunately you don't have to give the whole URL every time. You can use a relative (or partial) URL. Relative URLs tell the browser where a document is from the point of view of the current document. Imagine you're asking for directions for somewhere when you're in your car: an absolute address would be "First get to planet earth, then this continent, that country, this city, that road, then it's up there on the right hand side", whereas a relative address would be "From here, take the third left and it's the first building on the right". If you're sending a letter then the absolute address is more useful, but the rest of the time a relative address can be even more handy. Let's imagine a site you're writing has the following format:

A screenshot of a file/folder layout In this example, the current folder is html and all our documents go in there. We put files for download in the downloads folder, and all our images in the images folder. This keeps things nice and tidy. Now in your HTML code in the html folder, you need to specify a relative path for your images, not just the filename. If you want to include the image folders.gif in an HTML document that sits in the HTML folder, you need only type: <img src="images/folders.gif" alt="A screenshot of files and folders" width="119" height="80">

If the file you want to point to in an image or link tag is in the same folder as the current document, you can simply use the filename itself. So far so good for files that are in folders "deeper" in the file system than the current, but what if you have HTML files in the examples folder too, and some of them need images in the images folder? To get to the images folder from the examples one, you need to step back one level first. The URL for the folders.gif file in the images folder from the examples folder is: ../images/folders.gif

The double dots mean "to back to the folder this folder is in" and you can use it more than once: ../../ to go back two folders, for example. After a while it becomes impractical and you might find it easier to point to the file from the root folder of the server. For example, the location of the images folder in the example system above is /html/images/ . The slash at the beginning means "to back to the top level, then the html folder, then the images folder.

Default documents

Many web servers have default documents in each folder and so you don't always have to give a filename at the end of the URL, just the folder name. Nearly every server has a default document in its root so that URLs like http://www.lazycat.org/ point somewhere and people don't have to guess the filename of the top level document. Nowadays, because many servers use scripting technologies or old file-systems, the default document could be index.html, index.htm, default.asp, or a dozen different names. If you can use a default document in your URL, then you might find you have to maintain it a lot less often.

When writing your site, your default document will nearly always be called index.html or default.htm - try them in that order, it really depends on what kind of server your site is on. You should always have a default document in every accessible folder on your site, even if it's a message with a link telling them to go back to the start.

The final, and potentially most important part of writing a web page is linking it to one or more other pages or sites. To turn a collection of web pages into a site, you need to link them to each other. The HTML tag for creating links is called the anchor tag, <a>. The anchor tag marks up a section of text (or an image) as a link to another document. It is an inline tag, so it must be placed inside — and cannot contain — block tags. So you can make text or images into links, but not paragraphs or entire lists.

The anchor tag takes few attributes, but it absolutely requires the href attribute, which contains a URL as discussed above. The text you mark up as a link should be related to the document being pointed to, and though this might sound obvious, just browse the web today and see how many people create links with the text "here". It is important that link text is meaningful because:

A good link will stand out well if you read it on its own. To save yourself trouble writing and maintaining your links, use relative URLs for pages on your own site. This is a good link:

Visit <a href="http://www.lazycat.org/">Matt Robinson</a>'s website. He's not at all boring.

Internal Links

If the page you are linking to is very big, you can link to a specific part of it, as long as that part has an id. This tutorial teaches you to use the ID attribute as a way to attach specific layout styles to sections of code, but URLs also allow you to point to the beginning of an ID section. To put a link-point in your HTML, just add an ID attribute with a unique name to an appropriate tag (like the header tag at the beginning of a section):

<h2 id="wormturns">As the worm turns</h2>

Now you've given the header tag a name. Valid IDs begin with a letter (not a number), and can contain any combination or letters and numbers, but no spaces, so section2 is fine, but 2b and section two aren't. Once you've marked your section you can create a link to it from anywhere else (even other pages on other sites) by adding the section name to the end of the URL after a # character:

<a href="http://lazycat.org/html/html3.php#links">Creating HTML links</a>

In the above example, /html/html3.php is the document, and links is the internal pointer to go to.

On this page

Table of contents

  1. Home / About the tutorial
  2. History and context
  3. Learning HTML
    1. Document structure
    2. Marking up text
    3. Images and links
  4. Planning your site
  5. Writing your content
  6. Design and layout
    1. Writing Style-sheets
    2. Laying out your site
    3. More CSS
  7. Coding guide and tips
  8. Advanced techniques
  9. Further Reading & Resources

Example site

Help

Tips / Caveats