Last week you wrote your first Web pages. But budding Webmasters need to handle images too, so this week we'll look at how to add pictures to your pages.
First, though, let's save a lot of time. You might have already noticed that many of your pages have a lot of the same HTML code. So instead of having to re-type these same tags all the time, spend a few minutes making a "template". Then you can copy it as your starting point for each new page. For example, type the following (carefully) just once:
My page blah blah blah change this later
This is the heading at the top of the page
This is where my first paragraph will go.... and my second paragraph etc...
- then save it (as something called, say, "template.htm"). From now on you can paste it into a new page and concentrate on the page's main content - the stuff that goes between the and tags. Now let's get graphical and add some images to your site. Open your template page in your text editor, and save it as a different name (e.g. "testpage.htm"). Put your cursor between the and tags. The tag to insert a picture is in the form:
It doesn't need a closing tag.
Before playing around with the tag, obviously we'll need to find a sample picture. On the Web, generally the two main formats or standards for still pictures in pages are called GIFs and JPEGs (often further shortened to JPGs).
So either go to the Web and download a gif if you know how to (on a Mac, hold the mouse button down while it's over the image; on a PC, hold the right button down - then the option to save images should pop up); or simply find a gif on your own computer. One tell-tale sign is if its name has ".gif" at the end of it.
To be on the safe side, make a copy of it and rename this copy "house.gif". Put it in the same folder as the Web pages you've created from last week. In this case the tag to type within the body of your Web page would be:
Now, for the sake of good housekeeping, open the folder where you have stored your Web pages, and create a new subdirectory within it just for your site's graphics. Call the new folder something obvious like "pictures" and drag the house.gif into it.
Since the graphic has moved, you will have to change the address in the tag accordingly, to take this new "relative" location into account (it's a relative location in the sense that you're specifying an address relative to your particular Web page's one):
You can even link to a picture in someone else's site, by giving its "absolute" address! Suppose the picture you want to call up still happens to be called "house.gif" but is in a folder called "pictures" on the Irish Times Web site. It might have the following full Web address:
http://www.irish-times.com/pictures/house.gif
If you put the image's full path (the "absolute" location) in your tag, thanks to the wonders of hypertext this picture will appear on your page too, even though it's stored on a completely different computer:
But you won't want to just plonk pictures onto your pages. So how do you position them better?
You might have already noticed that your Web browser loads images separately and places them within the text flow almost as if the image were a special character. The browser seems to align the bottom of the image with the bottom of the current line of text. However, you can change how the text flows around the image, by using the "align" attribute. Try one of the following three variants:
And you can create some white space around the image by specifying the amount of horizontal space ("hspace") and vertical space ("vspace") it will need. For example, this would give a space around your picture of eight pixels horizontally and five pixels vertically:
One way to put the picture in the centre of your page is to "nest" it (and maybe some text if you fancy) between a and a tag. Note the American spelling:
and here is a bit of text too
Tags are "nested" within each other all the time. For example, try something like this this:
here is some ordinary text and a bit of bold and now it's italics too and back to straight bold and normal again.
Last week we also looked at how to insert a clickable link in a page, such as
Here is the Irish Times Web site.
In this case the words "Irish Times" become clickable and send you off to the Irish Times site. Besides making text clickable, you can turn images into "hot links" too. Just place them between a pair of anchor tags, such as in the following:
Or you can specify the "border=0" attribute, in which case the image won't have a "highlight" around it:
See which effect you require. Finally, let's use a single image as the overall background of your page. Remember the tag from last week? You can alter it to read thus:
As if by magic, the house.gif will be repeated as many times as necessary to fill the Web page, no matter how wide or deep it is. A word of warning though: there is an art to using pictures as backgrounds. They might be fun to do, but your visitors might find that they make your text unreadable. Or you might have to change the colour of your text and links; with a dark background image, you might go for this:
Other tags
As HTML evolves as a mark-up language, more and more tags and effects are being added. Besides the ones we have encountered so far, there are more elaborate ones for doing ordered lists, or for tables; these were originally tables of the mathematical variety, but then some bright spark realised you could pour text into the table's cells, giving a very clever way of ordering your text into rows and columns.
One of the simplest, most useful tags I use all the time is . This is really supposed to be used for setting off a lengthy piece of text from the rest of the document by turning it into separate paragraphs and indented left and right. For example try typing the following:
Here is some ordinary text and here is the "blockquoted" text which is set out a bit differently and now we're back to ordinary text again.
Try the following neat trick instead: put a tag just after the tag, and a tag just before the tag. In other words, all the text within the body of your Web page will be within the tags, and this gives your page some nice margins instead of letting the text bang ruthlessly against the left and right-hand sides of your browser window.
Next week: how not to design a Web site.