Practical Task 2 : Images and Colour

To Add a Horizontal Rule to your web page

  1. Type <hr where you want the rule to appear
  2. If desired type size=”n” where “n” is the height of the rule in pixels
  3. If desired type width=”w” where w is the width of the rule in pixels
  4. If desired type align=”direction” for example, left, right or center (use US spelling for center)
  5. If desired type noshade to create a solid line

Example

<hr size=”10” width=”80%” align=”center” noshade=”noshade”

To add colour to the background of your webpage

Into the body tab near the top of your page insert:

<body bgcolor=”xx”> where xx is a colour code from the ColorSpecifier chart.

Inserting images on a page

Before you begin, SAVE some images as .jpg .gif or .png files into the same folder as your original .html web page OR in a sub folder called images. (If you don’t have any images - you can browse for some free ones using a search engine)

Place the cursor where you want the image to appear.

  1. Type <img src=”image.fileext” />

(use the filename and extension of your image. NOTE if you have put your images inside a folder which is within your top folder you need to include the folder name e.g. “images/image.gif” where the folder name is images).

Offering ALT text

Within the img tag, after the src attribute and value type alt=”blab la”

e.g.

<img src=”cornermarket.jpg” alt=”Fruit Stand in Market” />

Scaling an image

For example: <img src=”cornermarket.jpg” width=”198” height=”219 alt=”Fruit Stand in Market” />

Making images float

You can use the align attribute (with the left and right values only) to make images float along one side of your page, with text and other elements wrapping around the other.

For example type <img src=”cornermarket.jpg” align=”left”>
OR <img src=”cornermarket.jpg” align=”right”>

There are other things you can do, such as stopping elements from wrapping at a certain point, or floating images both right and left on the page. Do some of your own research into the various things you can do with the “align” and “clear” tags.

Adding space around an image

If you don’t want your text butting right up to the image, you can use VSPACE and HSPACE attributes to add a buffer around your image:

<img src=”image.jpg” align=”left” height=”190” width=”200” alt=”house” hspace=”10” vspace=”10” />

Aligning images

Experiment with <…..align=”top”> <……align=”middle”>< ….“align=”bottom>

Aligning images can be quite confusing, do some reading around the subject.

Adding Background image to your page

<body background=”image.gif”>

NOTE: not all images are suitable for backgrounds but you can search for some suitable background images using a search engine.