|
|
| Home | Old Issues | Examples |
Welcome to Nathsite's weekly 'Around the Web in Eighty Kilobytes', a 20-part free guide to building a website of your own, and using the web well.
To stop getting ATWI80KB's, send an empty email to atwi80kb@homepage.com with 'NO MORE THINGIES' as the subject. To look at examples and previous ATWI80KB's, go to http://atwi80kb.homepage.com
AROUND THE WEB IN EIGHTY KILOBYTES 1.13 - 1.14
ATWI80KB 7
May 19, 2000
1) Images
2) Aligning
Example
1) IMAGES
Images are one of the most important parts of a good webpage. An image is inserted with the <img> tag. This tag always needs the 'src' attribute, in which you give the exact URL of the image itself (NOT a file containing the image). Like other URL's, the 'src' can be specified with the full path(absolute URL) or the filename (relative URL).
eg. <img src="http://atwi80kb.homepage.com/button1.gif">
<img src="button1.jpg">
Other important <img> attributes are:
width (Enter width of image in pixels) height (Enter height of image in pixels) alt (Text to appear when cursor is over image) border (Width of image border in pixels)
It is recommended that you use 'width' and 'height' all the time, because it makes the page a bit faster to load and helps keep page layout normal in image-disabled browsers. They can also be used to resize the image, though this is often a bad idea unless your image consists of straight lines. Always using 'alt' is also a good idea.
If you make an <img> tag between a <a href> tag and a </a> tag, the image is the link.
eg. <a href="nextpage.htm"><img src="button1.jpg" width=110 height=25 border=0></a>
Here, if the page viewer clicks on button1.jpg, the browser opens nextpage.htm. I added 'border=0' because when an image is a link, it often automatically has a blue border. 'border=0' removes it.
You can also make a link that contains some text and an image.
To select a background image, use the 'background' attribute in the <body> tag (you don't have to use 'bgcolor' if you use 'background').
eg. <body background="bgimage.gif" link="#0000FF" alink="#00FFFF" vlink="#CC00CC">
NOTE: Images should be in GIF (*.gif) or JPEG (*.jpg, *.jpeg) format. GIF is smaller, can be transparent and can be animated. JPEG is bigger but has better image quality. PNG format is also often supported, though it isn't as common.
2) ALIGNING
<img>, <hr>, <h1>, <h2> etc. and a few other tags support the 'align' attribute. The usual values are 'left', 'center' and 'right'. The <img> tag also supports the values 'top' and 'bottom'. You don't have to be Einstein to guess what 'left', 'center' and 'right' do in most tags, but the other attributes need to be explained. 'top' makes the first line of text start at the top of the image, and the rest of the text begins below the image. 'bottom' makes the first line start at the bottom, and 'middle' at the middle of course.
There is also a <center> tag which is a bit more useful than 'align=center' because it gives more control.
Examples:
<img src="burrito.gif" height=5 width=500 alt="Ouch!" align="right">
<center>Welcome!</center>
EXAMPLE
<html>
<head>
<title>Shadows of the Indus</title>
</head>
<body bgcolor="#FFFFFF" text="#0000CC" link="CC0000" alink="#FF0000" vlink="#AA0000">
<center>
<img src="http://atwi80kb.homepage.com/button1.jpg" width=70 height=40 border=0 align=right alt="This is not a link"> There's button 1! --><br><br>
<a href="http://atwi80kb.homepage.com/"><img src="http://atwi80kb.homepage.com/button1.jpg" width=70 height=40 border=10 alt="This is a link"> Click here or on the button</a>
</center>
</body>
</html>
See you in a week!
Aniruddh Nath
Email questions to atwi80kb@homepage.com - I'll reply if I have time. I might write stuff from your email in later ATWI80KB's.
NOTE: I'm not responsible for any damage done to your computer because of this tutorial.