5 Bone up a Web page!

-- Click to visit --
Home Page
Site Map,

Bones of a Web Site

Comments

Open your page1.html file in Notepad. Save it as page5.html. Now open it in your Browser, to watch the changes as you change your code during the lesson.

Programmers know that Comments need to be used in the code, to help them know the reasons for various items. But the comments are not for the viewer.

Hide the Comments using  as the closing tag.

<BODY BGCOLOR="#FFFFFF">  </BODY>

Note that only two -- are used. If you want any more, they must be in groups of two --, or some Browsers will see it as an ERROR

Adding images

Let's get into putting images into a web page. We're going to use this one. Once again, right click to save it off this page or copy it from the pics folder.

You specify an image with the <IMG> (image) tag.

<BODY BGCOLOR="#FFFFFF"> <IMG> </BODY>

We must also specify the source and the size.

<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=82 HEIGHT=68> </BODY>

Let me make the point that not only does the source specify what image, it also specifys where is the image. The above source, "copper.gif", means that the browser will look for the image named copper.gif in the same folder (or directory) as the html document itself. Below are a few diagrams.

SRC="copper.gif" means that the image is in the same folder as the html document calling for it.

SRC="images/copper.gif" means that the image is one folder down from the html document that called for it. This can go on down as many layers as necessary.

SRC="../copper.gif" means that the image is in one folder up from the html document that called for it.

SRC="../../copper.gif" means that the image is two folders up from the html document that called for it.

SRC="../images/copper.gif" means that the image is one folder up and then another folder down in the images directory.

SRC="../../../other/images/copper.gif" I'm not even going to try and put this into words. I hope you get the drift.

There is another way that this can be done. All references to images can have as their source the complete URL. For example: http://www.hair.net/~squiggie/LottzaStuff/other/images/copper.gif
Why, you ask, does it make so much more sense to use relative (partial) URLs as opposed to absolute (complete) URLs?? Because you can build your site locally and all the links will work. When your pages are done, you just upload the whole pile to your server and everything will work just fine. In addition, it is easier for the browser to get the images and your page will load faster. Is there ever a reason to us an absolute URL? Sure, if the image resides on a completely different server.
Something really neato you should know about images and their size.
Try this...
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif"> </BODY>

As you can see, the browser figures out how big the image is all by itself. Why bother with dimensions then? Without getting into details, it makes your page load faster because it is easier for the browser.
What's the neato part?? Check this out...
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=200 HEIGHT=68> </BODY>

<BODY BGCOLOR="#FFFFFF"> <IMG SRC="copper.gif" WIDTH=20 HEIGHT=100> </BODY>

You can specify whatever dimensions you want and override the proper dimensions. Still foggy on the neato part? Well, look at this little red dot-> <-. It's a 2x2 square. Lookie what I can do with it though...
<BODY BGCOLOR="#FFFFFF"> <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P> <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P> <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P> <CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER> </BODY>

Pretty nifty huh?

Extra stuff you may like to know
To display an image:

<IMG SRC="URL"

ALT= "text" - alternate text to be diplayed in case the image can't be shown
ALIGN=["top"|"middle"|"bottom"|"texttop"|"absmiddle"|"baseline"|
"absbottom"|"right"|"left"] - aligns following text
WIDTH=pixels
HEIGHT=pixels
BORDER=pixels
VSPACE=pixels
HSPACE=pixels
ISMAP> - indicates a clickable map (requires a server script)

Examples:

The default position. The next notes add WIDTH=50 and HEIGHT=50 pixel sizings and the ALIGN sttings.
This is how the text will appear with the ALIGN=TOP attribute.
This is how the text will appear with the ALIGN=MIDDLE attribute.
This is where the text will appear when the ALIGN=BOTTOM attribute is used.
This is where the text will appear with the ALIGN=TEXTTOP attribute.
This is where the text will appear when the ALIGN=ABSMIDDLE attribute is used.
This is where the text will appear when the ALIGN=BASELINE attribute is used.
This is where the text will appear when the ALIGN=ABSBOTTOM attribute is used.
This is where the text will appear when the ALIGN=RIGHT attribute is used.
This is where the text will appear when the ALIGN=LEFT attribute is used.
Here it is again using WIDTH=75 and HEIGHT=75 pixels.
This time the image has a BORDER=5 tag.
An empty space is left around this image by using the VSPACE=50 and the HSAPCE=100 tags. The IMG tag is placed after this sentence. text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text

Home, Site pages, Lesson 6

Back to Introduction, 2 Body text, 3 Body attributes, 4 Text Formatting,
5 Adding images, 6 Lists and lines, 7 Links, 8 Other comments.
the 140 Colour the page, using hex numbers,
HEXbcr, HEX test, Complex about colour, My Web Address is http://www.oocities.org/mallee2007
This website is developed and maintained by
, Elizabeth Janson