Web Page Graphics
We're also going to deal with links here as well. As a matter of fact let's discuss linking right now.
If you are only doing a single page then probably you won't be thinking about links. But as a courtesy to your viewer you should consider offering links to other sites that are similar in subject matter to yours. If your site is on horses then links to other horse sites would make sense. If the topic is history then a set of links to other history sites would be nice. Just don't offer these links too early in your page. The viewer may go to one of these links and never come back. Place your links at the bottom of the page or, with a multi-page site, on the last page.
A link tag looks like this:
And it looks like this on the page.
In a web page, anything can be a link. A single word, a block of text, a graphic or a photograph. They all have to have the <A HREF="address"></A> tag. The address can be an html file address (look at the bottom of this page) when you link to another page in your site or a complete web address when you link to other web pages elsewhere. In the example above the link was to a web address. In the coming pages there will be example of links using text and graphics. Please note the script when you find them.
Now on to graphics.
One of the simplest graphics to use on your web page is an HTML tag, <HR>. This stands for Horizontal Rule. The <HR> tag creates a 1 pixel height line that goes across the page. It looks like this:
Now this line didn't go all the way across the page because I'm using TABLES to format my page and this line is contained within one of the cells within that table. (More on TABLES coming up). The <HR> tag has a variety of attributes to go along with it. The first one is SIZE. This defines the height of the line in pixels. The second one is WIDTH. This defines the width of the line in percentages. A third one is ALIGN. The line is centre justified by default so if you want it to be on the left or right you have to use this attribute. The final one is COLOR. Let's see some examples with the script following:
All these lines except for the one set for ALIGN=0 have a 3D look to them. The one set for zero is a normal one pixel line. If you don't want a 3D look insert the attribute NOSHADE in the tag. It would look like this.
OK, enough of lines.
If you cruise the net often enough you will notice the amount of clip art out there. There are lots of web clip art sites. Go to YAHOO and type web clip art in the search term box. You will get lots of sites to retrieve graphics from. I'm going to assume you know all about downloading graphics off the web. Once you have the graphic in the same folder as your HTML script resides, you can call up that graphic in the script using the <IMG SRC> tag. This is how it looks.
And this is what it does.
You will note some attributes in that line. If you can possibly do it, use the WIDTH and HEIGHT attributes. A good graphics program (PaintShop Pro, Corel PhotoPaint, Adobe Photoshop) should be able to tell you the dimension of your graphic measured in pixels. If these attributes aren't there the browser has to guess how big they are and will wait until everything on the page is downloaded before putting the page on the screen. Depending on a variety of factors you could be looking at a blank screen for quite awhile until all the page components arrive. If the dimensions are there, the browser knows to reserve a spot of that size until the graphic arrives and is able to place the text almost instantly on the screen. The BORDER attribute puts a line around the graphic defined in pixels.
You also place photographs in the same way.
What if you want the graphic in the middle of the page? You use the <CENTRE></CENTRE> tag on either side, like this:
If you want it on the right you have to use the <P> tag with the ALIGN=RIGHT attribute.
If you use this graphic as a link to somewhere, the line gets rather long but it works.
Now, I think you are ready for some more complicated concepts.
Now let's check out Tables