Images as gif or jpg files must be copied into your server account before they can be made to appear in one of your web pages.
Once you have used FTP to copy them into your server account you use the tag called image source, like this:
<img src="euro1.jpg">
If you are working from your hard drive as a 'web server' then simply copy the jpg or gif file to the same folder on the C: drive.
The result will be this
Move the cursor over the map of Europe and you will see a short text appear "Western Europe". This is achieved by adding the alternative switch into the image source tag, it's alt= . You can also control how much of the screen the image fills with the width and height switches, in pixels or percentages.
<img alt="Western Europe" src="euro1.jpg" width=40 height=60>
Aligning the text to suit your images will require
use of the switch align=top, center or bottom.
Below is the Europe image again but this time I use this piece of HTML code:
<img align=center alt="Western Europe" src="euro1.jpg" width=80 height=100>Iceland
is not in the centre of the map
Iceland is not in the centre of the map.
Now try clicking this map to see the effect of width and height settings of
100%
Web page design always has to deal with the shape and format of the computer screen. If we make the text fill the whole screen then the lines are too long to read comfortably. If we make the line length shorter with the <br> tag then we waste a lot of space over on the right of the screen.
I'm going to go through a method of dealing with screen layout or screen management in html.
Activity: Take a copy of the source code of web page visit.htm by using the option: View Document Source when the web page is showing on your screen. Ctrl A selects the whole source code text and Ctrl C copies it onto the clipboard.
What is the problem with the page called visit.htm?
Feedback: The main body text is very wide and difficult to follow while the long narrow table creates a lot of wasted space on the right of the screen.
The method of screen management we'll look at is called tables, we'll look at tables next.