|
Lesson 6 � Putting in pictures
Now you've got a page but it only has words and probably
isn't very exciting. When the web was first invented in 1990 it
could only show text, so what you have so far is as good as it got.
However people soon realised that you could add pictures and colours
to web pages.
You can include images in your pages using another tag - the <IMG>tag
-which tells the browser to get an image file. The image file you
use has to be the right type and most web browsers will only disply
two of them - GIF (Graphics Interchange Format) and JPEG (Joint
Photographic Group). If your picture are not in this format, you
will need to convert them using your graphics program.
The IMG tag is quite simple. Choose where you want the picture
and then type:
<IMG SRC=image">
where image is the name of your picture.
Where IMG looks
When the browser reads the IMG tag it looks for where to find the
file, i.e. the "source" SRC. It might be in the same directory
as the page it appears on, but if your web site becomes quite large
you might want to put all the pictures in a separate folder called
"pics". In that case if our picture was 'logo.gif' you
would write:
<IMG SRC="pics/logo.gif">
As well as telling the browser which picture you can also tell
it where to put if using the ALIGN tag. The options are TOP, MIDDLE,
BOTTOM, LEFT and RIGHT.
So to have the picture at the top we would have:
<IMG SRC="pics/logo.gif" ALIGN=TOP>
It can take a while to get used to the way that text & picture
work together, so you may need to experiment until you find what
looks best.
Size Matters
Sometime you might want to control the size of an image, for example
half the size and you can control this with the WIDTH & HEIGHT
attributes. To display a picture that 100 pixels by 100 pixels at
half it's size you can type WIDTH=50 HEIGHT=50 Remember to reduce
both equally of the image will look strange.
Describe your pictures
The last thing you can do is the most important. You can type a
description of the picture for people who cannot show images on
their screen. Also some people deliberately tell their browser not
to load pictures so that it loads pages quicker.
You use the ALT to do this with the description in quote marks
<IMG SRC="/gifs/misc4a.gif" WIDTH="48" HEIGHT="48" ALIGN=RIGHT
ALT="Big Cog">
Getting images
You can get images for you pages from many places. You may have
picture that you scan in, or you may download them from the net.
Remember many images on the web are copyright and you shouldn't
use them without permission. However, there are many sites that
make picture freely available. When deciding which picture to use,
bear in mind that big picture take a long time to download and people
might get fed up waiting. As a general rule don't use any picture
bigger than 50k or more than a total of 100k on any page. More than
this and they will take to long to appear and most people will have
clicked to the next page.
Backgrounds
As well as using images on the page, you can use colours and images
as the background to your page. This works the same as the ''wallpaper''
on your PC. Note than when using a image as background, this is
usually a small image that is repeated many times by "tiling"
This means you don't have to know how big someone's screen is and
avoids the problem of large picture which takes ages to download.
This is achieved with the BACKGROUND tag within <BODY>
<BODY BACKGROUND="pics\bubble.gif">
For single colour you use the tag BGCOLOR.
Colours can be specified using something called hexadecimal but
this is complicated, so to start with stick to the colour names
that most browsers recognise. These are:
TEAL - BLUE - RED - PURPLE - WHITE - GRAY - LIME - GREEN - BLACK - OLIVE - NAVY - MAROON - AQUA - YELLOW - FUSCHIA - SILVER
<BODY BGCOLOR=AQUA>
Mix & Match
Remember that if you use a colour you will need to think about
the text colour. For example, if you used a black ground and the
text was black, you wouldn't see anything!
You can use TEXT with in <BODY>
<BODY BGCOLOR=AQUA TEXT=BLACK>
You can also set the colour of a word within <FONT> which
will override the settings in <BODY>
Summary
You should now have some code that looks a bit like this:
<HTML>
<HEAD>
<TITLE>Surrey United: The Greatest Football Team Ever</TITLE>
</HEAD>
<BODY BGCOLOR=AQUA TEXT=BLACK>
<H1 ALIGN=CENTER><FONT COLOR=BLUE>The Surrey United
Home Page</FONT></H1>
<P>This is all about Surrey United, my favourite football
team.
<BR>
I have been a supporter for three years and they play at a ground
near my home so I can go and watch them</P>
<HR SIZE=4 ALIGN=CENTER WIDTH=50%>
<P>This is a <B>very important</B> season for
us. If we are not <I>careful</I> we could be relegated.
<BR>
That�s right <I><U>sent down</U></I>!</P>
<IMG SRC="/gifs/misc4a.gif" WIDTH="48" HEIGHT="48" ALIGN="RIGHT"
alt="Big Cog">
<BR>
</BODY>
</HTML>
Looks like
The
Surrey United Home Page
This is all about Surrey United, my
favourite football team.
I have been a supporter for three years and they play at a
ground near my home so I can go and watch them
This is a very important season
for us. If we are not careful we could be relegated.
That�s right sent down!
|
|
