Most Web browsers can display inline images (that is, images next to text) that are in X Bitmap (XBM), GIF, or JPEG format. Other image formats are also being incorporated into Web browsers [e.g., the Portable Network Graphic (PNG) format]. Each image takes additional time to download and slows down the initial display of a document. Carefully select your images and the number of images in a document.
To include an inline image, enter:
<IMG SRC=ImageName>
where ImageName is the URL of the image file.
The syntax for <IMG SRC> URLs is identical to that used in an anchor HREF. If the image file is a GIF file, then the filename part of ImageName must end with .gif. Filenames of X Bitmap images must end with .xbm; JPEG image files must end with .jpg or .jpeg; and Portable Network Graphic files must end with .png.
You should include two other attributes on <IMG> tags to tell your browser the size of the images it is downloading with the text. The HEIGHT and WIDTH attributes let your browser set aside the appropriate space (in pixels) for the images as it downloads the rest of the file. (You can get the pixel size from your image-processing software, such as Adobe Photoshop. Some browsers will also display the dimensions of an image file in the title bar if the image is viewed by itself without an enclosing HTML document.)
For example, to include a self portrait image in a file along with the portrait's dimensions, enter:
<IMG SRC=ourpicture.gif HEIGHT=100 WIDTH=65>
NOTE: Some browsers use the HEIGHT and WIDTH attributes to stretch or shrink an image to fit into the allotted space when the image does not exactly match the attribute numbers.
You have some flexibility when displaying images. You can have images separated from text and aligned to the left or right or centered. Or you can have an image aligned with text. Try several possibilities to see how your information looks best.
Aligning Text with an Image By default the bottom of an image is aligned with the following text, as shown in this paragraph. You can align images to the top or center of a paragraph using the ALIGN= attributes TOP and CENTER.
This text is aligned with the top of the image (<IMG SRC = "/pictures/gc_icon.gif" ALT="[GEOCITIES]" ALIGN=TOP>). Notice how the browser aligns only one line and then jumps to the bottom of the image for the rest of the text.
And this text is centered on the image (<IMG SRC = "/pictures/gc_icon.gif" ALT="[GEOCITIES]" ALIGN=CENTER>). Again, only one line of text is centered; the rest is below the image.
Images without Text To display an image without any associated text (e.g., your organization's logo), make it a separate paragraph. Use the paragraph ALIGN= attribute to center the image or adjust it to the right side of the window as shown below:
<p ALIGN=CENTER> <IMG SRC = "/pictures/gc_icon.gif" ALT="[GEOCITIES]"> </p>
Inline images can be used as hyperlinks just like plain text. The following HTML code:
<A HREF="geocities.html"><IMG SRC="/pictures/gc_icon.gif" ALT="[GEOCITIES]"></A>
Produces the following result:
(Note that this link doesn't actually go anywhere.) The blue border that surrounds the image indicates that it's a clickable hyperlink. You may not always want this border to be displayed, though. In this case you can use the BORDER attribute of the IMG tag to make the image appear as normal. Adding the BORDER attribute and setting it to zero:
<A HREF="geocities.html"><IMG SRC="/pictures/gc_icon.gif" BORDER=0 ALT="[GEOCITIES]"></A>
The BORDER attribute can also be set to non-zero values, whether or not the image is used as a hyperlink. In this case, the border will appear using the default text color for the web page. For instance, if you wanted to give your image a plain black border to help it stand out on the page, you might try this:
<IMG SRC="/pictures/gc_icon.gif" BORDER=6 ALT="[GEOCITIES]">
And get the following result:
The tag to include a background image is included in the <BODY> statement as an attribute:
<BODY BACKGROUND="filename.gif">
By default browsers display text in black on a gray background. However, you can change both elements if you want. Some HTML authors select a background color and coordinate it with a change in the color of the text.
You change the color of text, links, visited links, and active links (links that are currently being clicked on) using further attributes of the <BODY> tag. For example:
<BODY BGCOLOR="#FFFFFF" TEXT="#OOOOOO" LINK="#9690CC">
To Learn more bakground,visit the site below:
You may want to have an image open as a separate document when a user activates a link on either a word or a smaller, inline version of the image included in your document. This is called an external image, and it is useful if you do not wish to slow down the loading of the main document with large inline images.
To include a reference to an external image, enter:
<A HREF="FruitImage.gif">link anchor</A>
<A HREF="OrangeImage.gif"><IMG SRC="BananaImage.gif"></A>
Use the same syntax for links to external animations and sounds. The only difference is the file extension of the linked file. For example,
<A HREF="AdamsRib.mov">link anchor</A>
specifies a link to a QuickTime movie. Some common file types and their extensions are:
Keep in mind your intended audience and their access to software. Most UNIX workstations, for instance, cannot view QuickTime movies.
The general format of a table looks like this:
<TABLE> <!-- start of table definition --> <CAPTION> caption contents </CAPTION> <!-- caption definition --> <TR> <!-- start of header row definition --> <TH> Mamfe </TH> <TH> Kumba </TH> </TR> <!-- end of header row definition --> <TR> <!-- start of first row definition --> <TD> Limbe </TD> <TD> Buea </TD> </TR> <!-- end of first row definition --> <TR> <!-- start of last row definition --> <TD> Ndian </TD> <TD> Tiko </TD> </TR> <!-- end of last row definition --> </TABLE> <!-- end of table definition -->
The output will be:
Additional Online Resources I'll advice you to visit the following website and learn more about HTML.
I'll advice you to visit the following website and learn more about HTML.