, /, , /;/ |.-; _ _ /|/ /.'/.-',_ ( ).-=-.( ) _,/ ._- =-==. ./.='"'=.\. =\ =: -|-. |=. .=| `\_-; 0 _0 | |= 0 0 =| ( _) | /` .---. `\ `\ _______ / | `---' | \ \ //' `\ '-----' /' \ \'--// `'-----'` `-`"`' |
Pictures |
_________________
/)| |(\
/ )| Picture |( \
_( ( | Treasures | ) )_
(((\ \|_________________|/ /)))
(\\\\ \_/ / \ \_/ ////)
\ / \ /
\ _/ \_ /
/ / \ \
|
The first thing to know about pictures, is that they take up a lot of computer disk space. This also means that they take a lot of time to load in a browser. Remember what they say: "A picture says a thousand words". That is very true, but when it comes to the Internet, you can probably write a complete story, describing a lot of 'pictures' in detail, including eye colour of your main characters, dialogues etc., and it would still take less time to load than one of the pictures which would go with the story. So you might want to think twice about including unnecessary pictures in your web site. It just depends on how patient you expect your readers to be. Try to keep the following points in mind:
The tag for pictures is <img>, short for image. This tag does not have a proper closing tag, so to close it you have to add a space and a slash inside the opening tag: <img /> (see empty tags).
Various 'formats' of pictures can be used in a web page. .jpg, .gif and .xbm are the most commonly used. .xbm is the format which the program 'Paint' produces. It does not, however, work on Mac-computers. It is safest to stick to .jpg and .gif. As a rule, .jpg is the best format for photographs and other pictures with 'infinite' amounts of colours, and .gif is the best format for graphics pictures, i.e. line art you have made yourself with a computer graphics program. I have heard that the .png format can be used on just about any machine for just about any type of picture. Worth investigating...
The name of the picture is put in the src (source) attribute in the image tag: <img src="school.jpg" /> would put a picture of 'school' in your web page, if there is a file called 'school.jpg' in the same folder as the .html file in which it is to appear. If the picture is in a different folder, you have to include its whereabouts in the source.
It is possible (and advisable) to give every picture a piece of alternative text, which is displayed
The alt text for the school picture might be as follows:
<img src="school.jpg" alt="Jalapeño school" />
Pictures obviously have their own size: they may be a scanned photograph (or a digital one!), or a drawing from Paint. But in a web page it might be more suitable to have the pictures larger or smaller than their original size. This can be achieved by using the height and width attributes, with values in pixels. If you use only one of the attributes, the other will be calculated automatically, from the ratio of height to width in the original picture. This ensures that the picture stays the same shape. But you can, of course, deliberately play around with the 'wrong' ratio of height to width, and make extra long and thin pictures, for instance. Could be fun!
There is one very good reason to use both the height and width attributes (if you know them): the browser will then immediately allocate the correct amount of space for the picture, and will get on with loading the text of your page without having to wait for the whole picture to load. Keeps your readers happy!
The height and width attributes of the image only take effect inside the browser, so they do not change the size of the original picture file. Just making the image in a web page smaller by using the height and width attributes, does not alter the loading time of a picture. A large picture is commonly bigger (in computer file size) than a small picture. To make a large picture file into a smaller one, you have to use a picture-editing computer program (such as PhotoShop).
The computer size of a picture depends on the resolution, the number of pixels per unit of area.
Imagine a picture of a person in a swimming pool. Let us say that the head of the person occupies a piece of 1cm by 1cm. If this head was represented by one pinkish dot, and the rest of the picture by a few blue dots (swimming pool, water, and swimming costume perhaps all blue), the resolution of the picture would be extremely low. It would load into a browser really really quickly, but nobody would know what it was.
At intermediate resolution, the head would have a few more pixels, perhaps with slightly different colours. The body of the swimmer would show as well, through a few pinkish pixels here and there. And the blues of the water, the pool and the costume might show up slightly differently, too. The picture still loads quite quickly in a browser, and most readers would recognise it.
High resolution pictures show every last detail: eye colour with pupil, lips, nostrils, feet distinguishable from leg, etc. They take longest to load.
A picture-editing program would take a picture, group every four pixels which sit in a square arrangement, and re-make this group of four into one new pixel, with an average colour. The picture would then be four times as small. For in between changes of size, the program has to get clever about which pixels to combine, but you get the general idea.
| Click | here | to see the swimmer better and better, in the box below. |
Pictures can be lined up (aligned) with surrounding text with the align attribute. The text can be either at the top, bottom, left, right or centre of the picture (values top, bottom, left, right and center, respectively). A picture can also appear in the middle of a sentence (i.e. with text to the left and right of it). For most alignment attributes, only one sentence of text can be put around the picture. Example:
This is a 
of a picture in a sentence. The
HTML which produced this, was
This is a <img src="images/SMILIE.gif" /> of a picture in a
sentence. Not terribly pretty. The text is aligned with the bottom of
the picture by default. Maybe aligning it with the centre might be better?
This is a of a picture,
centrally aligned in a sentence through putting
align="center" in the image tag. With this alignment
attribute, only one sentence can be put around the
picture. The sentence looks OK in itself, but the rest of the text gets
bumped on to below the picture. Have a play with picture alignment. Some
options look particularly ugly. The only way to solve this, is to put
picture and text in a table.
It is possible to use pictures as a background for a web page. This is done in the <body> tag, as follows:
<body background="school.jpg">
If the browser window is larger than the picture, the picture will be repeated in the direction(s) which need(s) filling out. This process is called tiling, because it looks like a wall of tiles, each tile represented by a picture. Do not use 'loud' pictures as a background, or text may not show up clearly on it.
You have probably seen them on the Internet: moving pictures. Fairies waving their wands, workmen digging away, hippopotamuses marching across the screen. With appropriate graphics programs, you can make them too! Most of them are .gif format, and can be included in a website just like any other picture. You can even steal/borrow them from other sites. And there are tons of websites dedicated to providing you with all the pictures you might need, so that you do not have to make them yourself. But that would spoil some of the fun.
One type of Internet Art is especially dear to my heart: pictures which are completely made up from ordinary keyboard characters (letters, punctuation marks, hashes, hyphens, slashes etc.). Because they only contain the so-called ASCII character set, it is called ASCII Art. A large Internet community is completely dedicated to it. You can find them through: Joan Stark's ASCII Art site.
The pictures are always produced inside a <pre> tag, so that spaces and characters go exactly where you want them. That is, if the reader uses the same pre-formatted font. So it is best to announce the font which is to be used when you include your own ASCII Art. Here is an example, which is to be viewed with the Courier font:
/ \ _-'
_/| \-''- _ /
__-' { | \
/ \
/ "o. |o}
| \ ;
',
\_ __\
''-_ \.//
/ '-____'
/
_'
_-'
Added bonus of ASCII Art, of course, is that it only contains ordinary text, which does not take a long time to load in a browser. Quick!
Pictures can be put in a hyperlink, to be clicked on. The most ubiquitous example of this is a picture of a button, which, when clicked, brings you to another piece of a website. But any shape of picture can be used for this purpose. For example:
<a href="scripts.html#script-buttons"><img src="scriptbutton.gif" /></a>
would take you to the 'script' step of this course, where the use of buttons is explained.
Websites which offer clip art, often have a lot of pictures of buttons, too. But you can easily make them yourself!
To avoid the blue rim around the clickable picture, put 'border="0"' in the image tag.
What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces
| Course created by Maria Turkenburg | TurkenburkiePower!!!©2001-2005 |