Copy the file tuc.jpg onto your course disk. This is shown below. For internet users, right click on the image and chose ‘save picture as’ and select your a:\ drive.
It is important that the picture files you want to use are in the same place as the html files that you are working with. Now start EditPlus and open your last file, table.htm
Use file + Save As to create a new file called picture.htm on your disk. Delete all of the code between the <body …> and </body> statements so you have a blank file with your colour scheme incorporated. Don’t forget to change the title statement to reflect the new file.
You should be looking at something like this:-
<html>
<head>
<title>Inserting A Picture</title>
</head>
<body bgcolor="yellow" text="blue" link="red" alink="green" vlink="orange">
</body>
</html>
To insert the picture add the following statement:-
<html>
<img src="tuc.jpg">
</body>
<head>
<title>Inserting A Picture</title>
</head>
<body bgcolor="yellow" text="blue" link="red" alink="green" vlink="orange">
</html>
Notice how the name of the picture file appears in the statement between the quotation marks. Save this and view it using the browser. Notice how a small square appears whilst the picture file loads into memory. When the file is actually on the internet the site cannot load any further information until the picture file has loaded because the browser needs to know how much space to leave for the picture. If you know the size of the picture (in pixels) you can build that into the statement so the browser does not have to wait for the picture to load.
To build this statement we will use one of the tools built into the EditPlus program. The Insert Image button.
The panel that opens allows you to browse for a picture file. When you select the one you want EditPlus builds the code statement for you including the height and width sizes (in pixels).
Notice the last section of the code ALT=""> This is for Alternative Text. The alternative text is displayed whilst the picture is loading or when the user's mouse is hovering over the picture. Insert the alternativ text TUC Logo like this:ALT="TUC Logo">
<html>
<img src="tuc.jpg">
<IMG SRC="tuc.jpg" WIDTH=250 HEIGHT=282 BORDER=0 ALT="TUC Logo"> </body>
<head>
<title>Inserting A Picture</title>
</head>
<body bgcolor="yellow" text="blue" link="red" alink="green" vlink="orange">
</html>
Save this and view it again. There are now two pictures side by side. If you want the pictures to appear one above the other you will need either a <br> or <p> tag between the two image statements.
You can also use <center> to put your image in the middle of the page.
<html>
<head>
<title>Inserting A Picture</title>
</head>
<body bgcolor="yellow" text="blue" link="red" alink="green" vlink="orange">
<table>
<tr>
<td>
</body>
</html>
If you are creating a page with lots of text, some along side a picture and the rest underneath spanning the full page you will have to make a judgement as to how much text to put in the table as you will not know exactly what settings people viewing your page will be using. This may mean that there is a gap either under the picture or between the two paragraphs of text when other people view it.