Text effects and the tag
One of your most powerful weapons for jazzing up your text is the tag and its SIZE, COLOR and FACE attributes. Unlike other tags that we have looked at which use attributes, you have to use an attribute with - on its own it doesn't do anything at all. (Incidentally, if you're wondering where the word font comes from, it's an old word for typeface).
You can change the size of your text at any point by putting in a tag like this : , where n is a number between 1 and 7. The text will change to the size you specify, until you turn the effect off again with the tag.
With the glorious logic that so often afflicts computer systems, these numbers work exactly the opposite way round to the numbers used in creating headings (
,
and so on): that is, size one is teeny and size seven is huge. Marvellous.
A better way to use the SIZE attribute is to put +1, +2, -1 or -2 instead of the number, like this , which makes the text one size bigger, and again is turned off with . +2 makes it two sizes bigger, -1 makes it one size smaller, and so on.
Why is this better? It's this matter of different browsers displaying things differently again. Exactly how big a particular font size will display on someone else's screen depends on all sorts of factors over which you have no control, mostly how their browser and computer are set up. For example, a size 1 sentence might look OK on your machine, yet be so small you can't read it on someone else's.
If you don't specify a font size at all, your text will be size 3. I think size three often looks a little small at the default setting, so on most pages (including these) I use a cousin of ,
It may have occurred to you that you could perhaps change the font size by just putting , blah blah, bigger blah and so forth throughout your webpage, never using at all. That does in fact work for some browsers : the very first webpages I created I did exactly that, because I didn't know what I was doing. But it's more likely to look the way you intended on a visitor's browser if you use it the way it was designed to be used.
Another thing you can do with the tag is change the text color, as I just did there. The tag is (note the spelling - "colour" won't work), where n can be several things. The easiest way to use it is to put in the name of a colour, so turns text blue, makes it green and so on. The quote marks are optional, and it recognises the names of most common colours (if you want to use grey, spell it "gray"). Like with FONT SIZE, you turn it off with a simple .
If you are feeling more adventurous, you can replace the n with a # followed by a six digit hexadecimal (base 16) number, something like this , (which produces this colour). All colours on a screen are made up of a mixture of red, blue and green : the first two digits are the amount of red, the next two the amount of green, and the last two the amount of blue. (Some of the digits are letters rather than numerals because base 16 requires more numerals than base 10, so is written 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 etc, with "10" being equal to 16, "11" to 17 and so on - bet you're sorry you asked). This gives you a much greater range of possible colours, but is not easy to use unless you are comfortable with hexadecimal numbers. Fortunately, any half-decent HTML editor will let you pick font colours from a colour chart, and translate them into hexadecimal for you, and anyway invoking colours by name is fine for most purposes.
Whatever you do, don't get too carried away with too many changes of colour. A little colour goes a long way. Come to think of it, the same applies to changes of size, too.
You can combine a change of size and colour into one tag : for example
, which produces an effect like this. The advantage of combining a colour and size change into one tag is that you turn both effects off together with a single .
The third attribute is FACE, where you change the typeface (often called a font, which is where the tag gets its name) in which the browser displays text. For example, to change the typeface to Arial you could put : . (If your system has a font called Arial, which is one of the most common, that last sentence should have been in it). However, there is an enormous drawback to this. If the visitor's system doesn't have a font called pretty much exactly that, the FACE attribute will be ignored, and unfortunately everyone has wildly different fonts installed on their systems. The result of this is that hardly ever works as you intended, so most of the time you might as well not bother. To try and get around this, you can specify a list of different fonts separated by commas with the FACE attribute, instead of just one, and it will use the first one it finds a match for on the visitor's system. If it finds one at all. Usually it isn't worth the hassle.
You can combine FACE, SIZE and COLOR into one tag, something like this , which on your browser looks like this. If the typeface you specified isn't available, the FACE part is ignored, but the colour and size change will still work. As before turn the whole thing off with a single .
Incidentally, do bear in mind that each only turns off one tag (the most recent one that hasn't already been turned off), so if you change the SIZE and COLOR of some text with two separate tags instead of combining them into one, you need to put two separate tags to turn both effects off. This can sometimes be very useful if you want to change the colour and size of some text independently.
One thing I haven't mentioned so far is setting a colour for the background of your page. You do this by adding an attribute to the tag, back at the beginning of the page. The attribute is BGCOLOR, and it uses exactly the same colour code system as . So with this added, your tag would look something like this :
(for example).
(Or you could replace "yellow" with a hexadecimal code, exactly the same as with the FONT SIZE attribute).
Another attribute you can add to is TEXT, which sets a default colour for any text not coloured by a tag. So to make the background black and the text white, the tag would look like this : , or using hex codes.
Whether you change the text colour, the background colour or both, make sure you pick a combination that is visible! If you change the background colour to black and forget to change the text colour to something else, you will get black on black - bad idea.
There are several other attributes you can use with the tag, mainly to set what links look like : we will go into that later on, in the section on links.
Using images
That's one impressive craterOne of the great things about webpages is the ability to display pictures. The basic command for this is very simple :
Put the command where you want the graphic to display, and that's all there is to it. Well, almost.
It is extremely important that you type the filename in your command exactly as the file has it. Although Windows doesn't care if you put Fred.jpg when it's actually fred.jpg, webservers do, and won't display the file unless you have it exactly right. This is a very common mistake and often causes beginners a lot of frustration, because the browser displays a picture quite happily on a page from your hard disk, but then doesn't display it when you call up the exact same page on the internet. So the case of the filename is crucial. On the other hand, it doesn't matter at all whether the tags and their attributes are in upper or lower case - either works equally well. I tend to put them in upper case to make them stand out better, but that's just personal preference.
Image alignment
Going up...Although you can use IMG SRC on its own, in practice it is almost always used with several attributes. Like the heading command (
etc), you can use the "align=" attribute, so to get a picture to display against the right margin instead of the left, the command would be :
Notice that when you use align=right, as well as moving the image to the right it also causes the text to wrap around the picture, as with the space shuttle here, instead of starting at the bottom righthand corner of the image as it did with the crater, above. To get the text to wrap around an image on the lefthand side, use align=left - see the tree, below.
There are several other values you can use with align, but most of them aren't actually very useful. You can use "center" (note the spelling) or "middle", "top", "bottom" as well as one or two more obscure ones such as "texttop" and "absbottom". As an exercise, create a webpage with a long paragraph of text (just copy some from somewhere and paste it in). Then put in an IMG SRC command somewhere in the middle, and experiment with the various different value of "ALIGN=". The only ones I ever use are "left" and "right".
If you are using a lot of images and/or want more control over their positioning, IMG SRC's align attribute isn't the only way to do it. You can also position graphics and text by putting them in a table. Tables are a bit fiddly to use if you are writing your HTML by hand though, because they use a lot of tags, so I haven't included them in this set of tutorials. If you want to use tables, it's much easier to get an HTML editing program (see Tools for webpage making) to do the work for you.
It's particularly important when using images on a webpage to bear in mind that many of your visitors won't see the page exactly as you do. They may have their screen resolution set to a completely different size to you, or maybe they are browsing in a window and you usually browse full screen. Or they have their browser set to use bigger fonts than you. So that paragraph that just fits nicely alongside a particular image in your browser might not be long enough on someone else's. To get an idea of what I mean, try resizing your browser window horizontally a few times whilst looking at this page, from full screen down to absurdly narrow, and changing the font display size if you browser allows it; if you are feeling really keen, you could try changing your desktop to one or more different resolutions, too. Notice how the number of lines in each paragraph changes, and a given piece of text's exact position relative to a nearby image.
a treeTo make sure that your next paragraph doesn't start until after an image, no matter how teeny your visitor likes their text, at the end of the paragraph you can use
with the "clear" attribute :
instead of , as I have with this one, to make sure that the next heading comes after the tree rather than alongside it. (Some browsers will accept
instead of
, but strictly speaking that's incorrect).
Making your webpage images "friendlier".
As you may have noticed if you have peeked at the source code for this page, there are three more attributes you should add to each picture to make your website more user-friendly, "width", "height" and "alt".
As you might expect, width and height specify the image's width and height, in pixels (every picture is made of little dots called pixels, short for "picture cell"). Images take a lot longer to download than text, and most browsers first draw a box where a picture is going to be. If you set the width and height attributes, the browser will draw the box the right size for the picture straightaway, and wrap the text round the box if applicable; if you don't, most browsers draw a teeny tiny square box, and then later expand it to fit when the picture has finished downloading. If your visitor is reading your text while waiting for the picture and you haven't specified width and height, when the box expands to fit the image the text will be suddenly pushed downwards out of the way, and your visitor will probably lose his place.
Most web editors will work out the width and height of a picture for you, and add the relevant details to the ![]()
command for you. Notepad won't of course, being a very basic editor not especially designed for webpage-making, but almost any picture editor or display program will tell you what the size of an image is in pixels, and it's not hard to add them manually.
The same tree, resized using width & height attributesYou can also resize a picture using the width and height attributes (just change the numbers), but this isn't a good idea unless you are also using the full-size image elsewhere on the same page. For one thing, if you get the proportions wrong your picture will be stretched out of shape - for example, the tree on the right is exactly the same image as the one above left, but slightly shrunk and viciously squashed by deliberately misusing the width and height atributes. For another, if you are making your picture bigger this way it will almost certainly look fuzzy; and if you are making it smaller, your visitor still has to wait while the full-size picture downloads, so there's no point. If you want to show a smaller version of a picture (often called a thumbnail), maybe with a link to display the full-size version if the visitor wants, use a graphics package to make a smaller version of the image, and use that instead.
The ALT attribute (ALT="some text") gives a text title to an image, which does several things for you. If you hover the mouse cursor over an image which has the alt attribute set, after a moment its contents will be displayed as a tooltip - try it on the pictures on this page. The contents of "ALT=" will also usually be displayed as a caption inside each image box (see previous paragraph) until it is filled with the image. And last but not least, some people set their browser not to display images at all : the blind, for example, or someone with a slow modem; or perhaps using a WAP phone, which currently can't display graphics at all. The ALT attribute gives such visitors at least a flavour of what your picture is about. You don't need to be too literal-minded about your ALT text, have some fun with it.
So to sum up, the full command to display the space shuttle earlier on this page was :
Choosing images
Of course, all this assumes that you already have a suitable graphic available. They are not hard to find, just go surfing. If you see a picture you like on a webpage, right click on it, choose "Save as..." from the menu, and save it on your hard disk. Easy.
Before you get too carried away, you do have to be aware of copyright. If you use someone else's image without their permission, they could sue you. So before you start helping yourself to someone else's entire catalogue, see what they say about copyright. The basic rule is that everything is copyright unless it explicitly says otherwise. Having said that, you will find that lots of people are happy to let you use their stuff for free, or in exchange for a link to their site. Try the NASA website. Loads and loads of great space pictures, all copyright-free, and they don't even want a link (they don't need it!) The only thing they don't allow you to use without special permission is their logo.
Another good source of free images is clipart CDs. There are any number available, with thousands of images, often free with a magazine or software package. The tree on this page is one of 12,000 clipart images on a CD that came free with PC Advisor magazine. Or if you have a scanner, you can create images for your website with that, bearing in mind that the same copyright rules apply to pictures in magazines and suchlike : you can't use them without permission.
You will probably find pretty quickly that you want to manipulate some of your images - change their size or format, for example. You will need some kind of graphics program for this, and unfortunately Windows Paint won't do because it can only handle bitmaps, which are unsuitable for web pages (see below). If you have a scanner, it probably has a fairly decent graphics program included with it as a freebie, otherwise you will have to look around for one. See the the section on Tools for making webpages for more about graphics packages.
Image formats
There are quite a few different computer image formats, and to use pictures on a website effectively you need to make sure you choose the right type(s). Why? Picture files are much, much bigger than text files, which is why the text of a webpage appears very quickly, but you usually have to wait for the images. The bigger the file, the longer it takes to download, and the more likely your visitor is to lose interest and go somewhere else.
Perhaps the most basic type of image on a computer is called a bitmap, which has the extension .BMP on a PC. Windows uses bitmaps for things like desktop wallpaper. In a bitmap file, each pixel is individually described in turn. This has advantages for some purposes, but is very bad for webpages because the files are very big, and so take forever to download - a full screen .bmp image at 800x600 is about half a megabyte, which would take several minutes even for a very fast modem to download. Another type of bitmap, which most scanners use, is the TIFF file (.tif), which are often absolutely gigantic - we're talking tens of megabytes here, for a high resolution scan. Totally out of the question for webpages (and don't email them to people, either!)
For an image to download at a reasonable speed, ie a few seconds, it needs to be compressed. There are two main formats for this, JPEG (pronounced "jay-peg", often written as JPG for short) and GIF, and most graphics packages can produce both. In general, use whichever produces the smallest file for the particular image.
A rose by any other name...GIF (.gif) is best for pictures with 16 colours or less, such as drawings (the tree above is a GIF). Whereas bitmaps describe each pixel individually, GIF describes them in groups, loosely speaking : "First 25 white, then 10 green, then six brown..." sort of thing. This makes the file much smaller, but becomes ineffectiv
A better way to use the SIZE attribute is to put +1, +2, -1 or -2 instead of the number, like this , which makes the text one size bigger, and again is turned off with . +2 makes it two sizes bigger, -1 makes it one size smaller, and so on.
Why is this better? It's this matter of different browsers displaying things differently again. Exactly how big a particular font size will display on someone else's screen depends on all sorts of factors over which you have no control, mostly how their browser and computer are set up. For example, a size 1 sentence might look OK on your machine, yet be so small you can't read it on someone else's.
If you don't specify a font size at all, your text will be size 3. I think size three often looks a little small at the default setting, so on most pages (including these) I use a cousin of ,
It may have occurred to you that you could perhaps change the font size by just putting , blah blah, bigger blah and so forth throughout your webpage, never using at all. That does in fact work for some browsers : the very first webpages I created I did exactly that, because I didn't know what I was doing. But it's more likely to look the way you intended on a visitor's browser if you use it the way it was designed to be used.
Another thing you can do with the tag is change the text color, as I just did there. The tag is (note the spelling - "colour" won't work), where n can be several things. The easiest way to use it is to put in the name of a colour, so turns text blue, makes it green and so on. The quote marks are optional, and it recognises the names of most common colours (if you want to use grey, spell it "gray"). Like with FONT SIZE, you turn it off with a simple .
If you are feeling more adventurous, you can replace the n with a # followed by a six digit hexadecimal (base 16) number, something like this , (which produces this colour). All colours on a screen are made up of a mixture of red, blue and green : the first two digits are the amount of red, the next two the amount of green, and the last two the amount of blue. (Some of the digits are letters rather than numerals because base 16 requires more numerals than base 10, so is written 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 etc, with "10" being equal to 16, "11" to 17 and so on - bet you're sorry you asked). This gives you a much greater range of possible colours, but is not easy to use unless you are comfortable with hexadecimal numbers. Fortunately, any half-decent HTML editor will let you pick font colours from a colour chart, and translate them into hexadecimal for you, and anyway invoking colours by name is fine for most purposes.
Whatever you do, don't get too carried away with too many changes of colour. A little colour goes a long way. Come to think of it, the same applies to changes of size, too.
You can combine a change of size and colour into one tag : for example
, which produces an effect like this. The advantage of combining a colour and size change into one tag is that you turn both effects off together with a single .
The third attribute is FACE, where you change the typeface (often called a font, which is where the tag gets its name) in which the browser displays text. For example, to change the typeface to Arial you could put : . (If your system has a font called Arial, which is one of the most common, that last sentence should have been in it). However, there is an enormous drawback to this. If the visitor's system doesn't have a font called pretty much exactly that, the FACE attribute will be ignored, and unfortunately everyone has wildly different fonts installed on their systems. The result of this is that hardly ever works as you intended, so most of the time you might as well not bother. To try and get around this, you can specify a list of different fonts separated by commas with the FACE attribute, instead of just one, and it will use the first one it finds a match for on the visitor's system. If it finds one at all. Usually it isn't worth the hassle.
You can combine FACE, SIZE and COLOR into one tag, something like this , which on your browser looks like this. If the typeface you specified isn't available, the FACE part is ignored, but the colour and size change will still work. As before turn the whole thing off with a single .
Incidentally, do bear in mind that each only turns off one tag (the most recent one that hasn't already been turned off), so if you change the SIZE and COLOR of some text with two separate tags instead of combining them into one, you need to put two separate tags to turn both effects off. This can sometimes be very useful if you want to change the colour and size of some text independently.
One thing I haven't mentioned so far is setting a colour for the background of your page. You do this by adding an attribute to the tag, back at the beginning of the page. The attribute is BGCOLOR, and it uses exactly the same colour code system as . So with this added, your tag would look something like this :
(for example).
(Or you could replace "yellow" with a hexadecimal code, exactly the same as with the FONT SIZE attribute).
Another attribute you can add to is TEXT, which sets a default colour for any text not coloured by a tag. So to make the background black and the text white, the tag would look like this : , or using hex codes.
Whether you change the text colour, the background colour or both, make sure you pick a combination that is visible! If you change the background colour to black and forget to change the text colour to something else, you will get black on black - bad idea.
There are several other attributes you can use with the tag, mainly to set what links look like : we will go into that later on, in the section on links.
Using images
That's one impressive craterOne of the great things about webpages is the ability to display pictures. The basic command for this is very simple :
Put the command where you want the graphic to display, and that's all there is to it. Well, almost.
It is extremely important that you type the filename in your command exactly as the file has it. Although Windows doesn't care if you put Fred.jpg when it's actually fred.jpg, webservers do, and won't display the file unless you have it exactly right. This is a very common mistake and often causes beginners a lot of frustration, because the browser displays a picture quite happily on a page from your hard disk, but then doesn't display it when you call up the exact same page on the internet. So the case of the filename is crucial. On the other hand, it doesn't matter at all whether the tags and their attributes are in upper or lower case - either works equally well. I tend to put them in upper case to make them stand out better, but that's just personal preference.
Image alignment
Going up...Although you can use IMG SRC on its own, in practice it is almost always used with several attributes. Like the heading command (
etc), you can use the "align=" attribute, so to get a picture to display against the right margin instead of the left, the command would be :
Notice that when you use align=right, as well as moving the image to the right it also causes the text to wrap around the picture, as with the space shuttle here, instead of starting at the bottom righthand corner of the image as it did with the crater, above. To get the text to wrap around an image on the lefthand side, use align=left - see the tree, below.
There are several other values you can use with align, but most of them aren't actually very useful. You can use "center" (note the spelling) or "middle", "top", "bottom" as well as one or two more obscure ones such as "texttop" and "absbottom". As an exercise, create a webpage with a long paragraph of text (just copy some from somewhere and paste it in). Then put in an IMG SRC command somewhere in the middle, and experiment with the various different value of "ALIGN=". The only ones I ever use are "left" and "right".
If you are using a lot of images and/or want more control over their positioning, IMG SRC's align attribute isn't the only way to do it. You can also position graphics and text by putting them in a table. Tables are a bit fiddly to use if you are writing your HTML by hand though, because they use a lot of tags, so I haven't included them in this set of tutorials. If you want to use tables, it's much easier to get an HTML editing program (see Tools for webpage making) to do the work for you.
It's particularly important when using images on a webpage to bear in mind that many of your visitors won't see the page exactly as you do. They may have their screen resolution set to a completely different size to you, or maybe they are browsing in a window and you usually browse full screen. Or they have their browser set to use bigger fonts than you. So that paragraph that just fits nicely alongside a particular image in your browser might not be long enough on someone else's. To get an idea of what I mean, try resizing your browser window horizontally a few times whilst looking at this page, from full screen down to absurdly narrow, and changing the font display size if you browser allows it; if you are feeling really keen, you could try changing your desktop to one or more different resolutions, too. Notice how the number of lines in each paragraph changes, and a given piece of text's exact position relative to a nearby image.
a treeTo make sure that your next paragraph doesn't start until after an image, no matter how teeny your visitor likes their text, at the end of the paragraph you can use
with the "clear" attribute :
instead of , as I have with this one, to make sure that the next heading comes after the tree rather than alongside it. (Some browsers will accept
instead of
, but strictly speaking that's incorrect).
Making your webpage images "friendlier".
As you may have noticed if you have peeked at the source code for this page, there are three more attributes you should add to each picture to make your website more user-friendly, "width", "height" and "alt".
As you might expect, width and height specify the image's width and height, in pixels (every picture is made of little dots called pixels, short for "picture cell"). Images take a lot longer to download than text, and most browsers first draw a box where a picture is going to be. If you set the width and height attributes, the browser will draw the box the right size for the picture straightaway, and wrap the text round the box if applicable; if you don't, most browsers draw a teeny tiny square box, and then later expand it to fit when the picture has finished downloading. If your visitor is reading your text while waiting for the picture and you haven't specified width and height, when the box expands to fit the image the text will be suddenly pushed downwards out of the way, and your visitor will probably lose his place.
Most web editors will work out the width and height of a picture for you, and add the relevant details to the ![]()
command for you. Notepad won't of course, being a very basic editor not especially designed for webpage-making, but almost any picture editor or display program will tell you what the size of an image is in pixels, and it's not hard to add them manually.
The same tree, resized using width & height attributesYou can also resize a picture using the width and height attributes (just change the numbers), but this isn't a good idea unless you are also using the full-size image elsewhere on the same page. For one thing, if you get the proportions wrong your picture will be stretched out of shape - for example, the tree on the right is exactly the same image as the one above left, but slightly shrunk and viciously squashed by deliberately misusing the width and height atributes. For another, if you are making your picture bigger this way it will almost certainly look fuzzy; and if you are making it smaller, your visitor still has to wait while the full-size picture downloads, so there's no point. If you want to show a smaller version of a picture (often called a thumbnail), maybe with a link to display the full-size version if the visitor wants, use a graphics package to make a smaller version of the image, and use that instead.
The ALT attribute (ALT="some text") gives a text title to an image, which does several things for you. If you hover the mouse cursor over an image which has the alt attribute set, after a moment its contents will be displayed as a tooltip - try it on the pictures on this page. The contents of "ALT=" will also usually be displayed as a caption inside each image box (see previous paragraph) until it is filled with the image. And last but not least, some people set their browser not to display images at all : the blind, for example, or someone with a slow modem; or perhaps using a WAP phone, which currently can't display graphics at all. The ALT attribute gives such visitors at least a flavour of what your picture is about. You don't need to be too literal-minded about your ALT text, have some fun with it.
So to sum up, the full command to display the space shuttle earlier on this page was :
Choosing images
Of course, all this assumes that you already have a suitable graphic available. They are not hard to find, just go surfing. If you see a picture you like on a webpage, right click on it, choose "Save as..." from the menu, and save it on your hard disk. Easy.
Before you get too carried away, you do have to be aware of copyright. If you use someone else's image without their permission, they could sue you. So before you start helping yourself to someone else's entire catalogue, see what they say about copyright. The basic rule is that everything is copyright unless it explicitly says otherwise. Having said that, you will find that lots of people are happy to let you use their stuff for free, or in exchange for a link to their site. Try the NASA website. Loads and loads of great space pictures, all copyright-free, and they don't even want a link (they don't need it!) The only thing they don't allow you to use without special permission is their logo.
Another good source of free images is clipart CDs. There are any number available, with thousands of images, often free with a magazine or software package. The tree on this page is one of 12,000 clipart images on a CD that came free with PC Advisor magazine. Or if you have a scanner, you can create images for your website with that, bearing in mind that the same copyright rules apply to pictures in magazines and suchlike : you can't use them without permission.
You will probably find pretty quickly that you want to manipulate some of your images - change their size or format, for example. You will need some kind of graphics program for this, and unfortunately Windows Paint won't do because it can only handle bitmaps, which are unsuitable for web pages (see below). If you have a scanner, it probably has a fairly decent graphics program included with it as a freebie, otherwise you will have to look around for one. See the the section on Tools for making webpages for more about graphics packages.
Image formats
There are quite a few different computer image formats, and to use pictures on a website effectively you need to make sure you choose the right type(s). Why? Picture files are much, much bigger than text files, which is why the text of a webpage appears very quickly, but you usually have to wait for the images. The bigger the file, the longer it takes to download, and the more likely your visitor is to lose interest and go somewhere else.
Perhaps the most basic type of image on a computer is called a bitmap, which has the extension .BMP on a PC. Windows uses bitmaps for things like desktop wallpaper. In a bitmap file, each pixel is individually described in turn. This has advantages for some purposes, but is very bad for webpages because the files are very big, and so take forever to download - a full screen .bmp image at 800x600 is about half a megabyte, which would take several minutes even for a very fast modem to download. Another type of bitmap, which most scanners use, is the TIFF file (.tif), which are often absolutely gigantic - we're talking tens of megabytes here, for a high resolution scan. Totally out of the question for webpages (and don't email them to people, either!)
For an image to download at a reasonable speed, ie a few seconds, it needs to be compressed. There are two main formats for this, JPEG (pronounced "jay-peg", often written as JPG for short) and GIF, and most graphics packages can produce both. In general, use whichever produces the smallest file for the particular image.
A rose by any other name...GIF (.gif) is best for pictures with 16 colours or less, such as drawings (the tree above is a GIF). Whereas bitmaps describe each pixel individually, GIF describes them in groups, loosely speaking : "First 25 white, then 10 green, then six brown..." sort of thing. This makes the file much smaller, but becomes ineffectiv
, but strictly speaking that's incorrect).
Making your webpage images "friendlier".
As you may have noticed if you have peeked at the source code for this page, there are three more attributes you should add to each picture to make your website more user-friendly, "width", "height" and "alt".
As you might expect, width and height specify the image's width and height, in pixels (every picture is made of little dots called pixels, short for "picture cell"). Images take a lot longer to download than text, and most browsers first draw a box where a picture is going to be. If you set the width and height attributes, the browser will draw the box the right size for the picture straightaway, and wrap the text round the box if applicable; if you don't, most browsers draw a teeny tiny square box, and then later expand it to fit when the picture has finished downloading. If your visitor is reading your text while waiting for the picture and you haven't specified width and height, when the box expands to fit the image the text will be suddenly pushed downwards out of the way, and your visitor will probably lose his place.
Most web editors will work out the width and height of a picture for you, and add the relevant details to the
The same tree, resized using width & height attributesYou can also resize a picture using the width and height attributes (just change the numbers), but this isn't a good idea unless you are also using the full-size image elsewhere on the same page. For one thing, if you get the proportions wrong your picture will be stretched out of shape - for example, the tree on the right is exactly the same image as the one above left, but slightly shrunk and viciously squashed by deliberately misusing the width and height atributes. For another, if you are making your picture bigger this way it will almost certainly look fuzzy; and if you are making it smaller, your visitor still has to wait while the full-size picture downloads, so there's no point. If you want to show a smaller version of a picture (often called a thumbnail), maybe with a link to display the full-size version if the visitor wants, use a graphics package to make a smaller version of the image, and use that instead.
The ALT attribute (ALT="some text") gives a text title to an image, which does several things for you. If you hover the mouse cursor over an image which has the alt attribute set, after a moment its contents will be displayed as a tooltip - try it on the pictures on this page. The contents of "ALT=" will also usually be displayed as a caption inside each image box (see previous paragraph) until it is filled with the image. And last but not least, some people set their browser not to display images at all : the blind, for example, or someone with a slow modem; or perhaps using a WAP phone, which currently can't display graphics at all. The ALT attribute gives such visitors at least a flavour of what your picture is about. You don't need to be too literal-minded about your ALT text, have some fun with it.
So to sum up, the full command to display the space shuttle earlier on this page was :
Choosing images
Of course, all this assumes that you already have a suitable graphic available. They are not hard to find, just go surfing. If you see a picture you like on a webpage, right click on it, choose "Save as..." from the menu, and save it on your hard disk. Easy.
Before you get too carried away, you do have to be aware of copyright. If you use someone else's image without their permission, they could sue you. So before you start helping yourself to someone else's entire catalogue, see what they say about copyright. The basic rule is that everything is copyright unless it explicitly says otherwise. Having said that, you will find that lots of people are happy to let you use their stuff for free, or in exchange for a link to their site. Try the NASA website. Loads and loads of great space pictures, all copyright-free, and they don't even want a link (they don't need it!) The only thing they don't allow you to use without special permission is their logo.
Another good source of free images is clipart CDs. There are any number available, with thousands of images, often free with a magazine or software package. The tree on this page is one of 12,000 clipart images on a CD that came free with PC Advisor magazine. Or if you have a scanner, you can create images for your website with that, bearing in mind that the same copyright rules apply to pictures in magazines and suchlike : you can't use them without permission.
You will probably find pretty quickly that you want to manipulate some of your images - change their size or format, for example. You will need some kind of graphics program for this, and unfortunately Windows Paint won't do because it can only handle bitmaps, which are unsuitable for web pages (see below). If you have a scanner, it probably has a fairly decent graphics program included with it as a freebie, otherwise you will have to look around for one. See the the section on Tools for making webpages for more about graphics packages.
Image formats
There are quite a few different computer image formats, and to use pictures on a website effectively you need to make sure you choose the right type(s). Why? Picture files are much, much bigger than text files, which is why the text of a webpage appears very quickly, but you usually have to wait for the images. The bigger the file, the longer it takes to download, and the more likely your visitor is to lose interest and go somewhere else.
Perhaps the most basic type of image on a computer is called a bitmap, which has the extension .BMP on a PC. Windows uses bitmaps for things like desktop wallpaper. In a bitmap file, each pixel is individually described in turn. This has advantages for some purposes, but is very bad for webpages because the files are very big, and so take forever to download - a full screen .bmp image at 800x600 is about half a megabyte, which would take several minutes even for a very fast modem to download. Another type of bitmap, which most scanners use, is the TIFF file (.tif), which are often absolutely gigantic - we're talking tens of megabytes here, for a high resolution scan. Totally out of the question for webpages (and don't email them to people, either!)
For an image to download at a reasonable speed, ie a few seconds, it needs to be compressed. There are two main formats for this, JPEG (pronounced "jay-peg", often written as JPG for short) and GIF, and most graphics packages can produce both. In general, use whichever produces the smallest file for the particular image.
A rose by any other name...GIF (.gif) is best for pictures with 16 colours or less, such as drawings (the tree above is a GIF). Whereas bitmaps describe each pixel individually, GIF describes them in groups, loosely speaking : "First 25 white, then 10 green, then six brown..." sort of thing. This makes the file much smaller, but becomes ineffectiv
0 comments:
Post a Comment
We Appreciate You Reading This Post, We Always Like To Hear From You, Please Take A Minute To Share Your Thoughts On The Comments Board Below.