|
|
 |
|
No. 00287 |
September 13-19, 2003 |
|
|
|
| |||||||||||
|
|
Building your home on the World Wide Web, Part 3By Duncan Drury
Background knowledge Adding pictures to a web page works in a very similar way to adding links. To add a picture use the <img> (image) tag with the src (source) attribute - <img src="picture.gif"/>. "picture.gif" is the filename of the image you want to include on your page. The src attribute works in the same way as the href attribute in the <a> tag. Both tell the computer where to find a file. I have made the examples so far simple by putting all the files in the same folder you only need to refer to the name of the file. What if the image you want to show is in another directory, or even on another web server? There are two ways of getting at other files stored in a different directory. To illustrate these imagine your web server contains the files and folders as in figure 1. You are working on myPage.html and want to get at other files from that page. To show a picture on another web site you need to know its full address e.g. http://www.dumasafari.com/photos/mt-kilimanjaro.jpg put the address in the src attribute, remembering the "http://"! Note that the <img> tag does not have a closing </img> tag instead you put a / before the final >. A few other tags work in this way, for example <br/> to insert a line break and <hr/> to add a horizontal line across the page. Getting stylish Now you have some pictures, what about some colours for the text and background? To add style to your page you add the style attribute to your tags. Add a style attribute to a <h1> tag on your page - <h1 style="color:red;">. This makes the text turn red. Styles work by saying what you want to change, followed by a colon (:), followed by the appropriate value, in this case the name of a colour. Since this was invented in America, you have to use the American spelling "color". Style instructions must finish with a semi-colon (;). This allows you to add further style instructions - <h1 style="color:red;background-color:black;"> changes the text to red and the background of the text to black. You can add as many instructions as you like. Some other instructions you might find useful are font-size, for controlling the size of text and font-family which changes the font. E.g. <h1 style="font-family:courier;font-size:18pt;color:red;background-color:black;">Some stylish text</h1>. You can add a style attribute to any tag within the body of the page, and also to the <body> tag itself setting style="background-color:black;" in the body tag will make the whole page have a black background. Have a look at www.geocities.com/mynyamachoma to see how I have used styles and images to make the site look more interesting than it did last week. Remember to view the source and see how I did it. Taking it further Now you have created some pages upload them to your geocities site using the file manager tool. Hopefully over the last three weeks I have demystified the creation of web sites. It really is something anyone with access to a computer and the web can do. You can improve your pages further by learning more HTML. The resources below will help with this. Good luck. Send your sites and questions to duncandrury@yahoo.com Interesting web sites has some very good tutorials and teaching tools, and a list of colours you can use. Look in the Authoring HTML Basics section and at the HTML Cheatsheet. www.w3c.org keepers of the full specifications for HTML and other things to do with web pages. www.blooberry.com/indexdot/ - handy information on all tags and styles available.
|
Last modified:
September 11, 2003. Webmaster: WDJMallya |
If
you have been following this tutorial for the past two weeks you should now have
a rather plain, but functional, web site. You have learnt to create a page, put
text on it, and link it to other pages. This week, lets jazz things up a bit by
adding some pictures and colour.
