TEC home
Web home
Page/site design
- basic principles
- examples and resources
Basic html
- tutorial
- resources
Netscape Composer
- tutorial
- resources
Dreamweaver
- tutorial
- resources
Uploading and downloading
- setting up your mason account
- basic procedure
Web assignments
- general
- design and navigation
HTML Tutorial - Images
In this tutorial you will learn how to write some additional html code in order to imbed images in a basic web page. Note that the actual
html tags are in <arrow> brackets and the explanations of the tags are in [square] brackets.
Skim the codes and explanations to get a sense of what you can do, then copy the code you need and paste it into the text file
you are working with and adjust/revise accordingly. The tags are generally ordered from most to least commonly used.
<body background="filename.jpg" bgcolor="#ffffff">
<img src="filename.gif">
<img src="filename.gif" alt="Image of GMU's Johnson Center.">
<img src="filename.jpg" align="right">
<img border="2" src="filename.gif">
<img src="filename.jpg" hspace="5" vspace="5">
<img src="filename.jpg" width="115" height="115">
<img src="filename.jpg" align="direction">
<img src="highfilename.jpg" lowsrc="lowfilename.jpg">
Note: All of the tags can be used in various combinations within one img code.
[Designers often use background images for their pages. This can be done in conjuction with the background color
(the image will load over the color). In the body tag, simply add the background tag and the file name. Images
for the web are typically .jpg or .gif. The image will "tile" to cover the entire background.]
[The img src code is the basic tag for displaying an image on your page.]
[It is also customary to give the image an alternative name. This allows a user with a text-only browser to know what
is supposed to show up there. It also lets the user know the content of the image as it is loading.]
[Using just the image tag generally aligns an image to the left. You can also align the image to the right (or left)
with the align tag. The text included after the image will flow to the left of an image aligned right or vice versa.]
[The border tag allows you to designate a border around your image in number of pixels. Without the tag your
image will have no border. The border color will be the designated text color. If you use an image for a link, the
color of the border will be the link colors. If you do not want a link border, give it the value of 0.]
[If you don't want the text to crowd up next to the image, you can create a clear border around the image.
The hspace code creates space on the left and right sides of the image. The vspace code creates space on the top and bottom.
The numerical value is the number of pixels. You can use these tags separately or together.]
[It is generally customary to resize images to a size that fits the siutation you need it for. You can, however,
resize an image via the code using the width and height tags to designate the number of pixels. If you make an image
larger it often gets grainy. Going smaller works better but can still create blury results.]
[The align tag also lets you arrange an image in relation to a line of text or caption. In this case, you can fill in
direction with texttop, top, middle, absmiddle, bottom, or absbottom. Experiment until you get the desired effect/alignment.]
[It is generally customary create/use images that are low enough in resolution to load quickly. Sometimes, however,
you may want to use a high resolution image. You can, then, use a low resolution image that loads faster to give the user
something to look at as the higher resolution image loads over it. Just create two images and use the lowsrc tag.]
HTML Home | Text | Links | Images | Tables
