Oz Web Hub : the spot for the web design beginner

How to make certain elements stand out in your web site

I've just been trawling through my old newsletters and found a few tips worth passing on.

How to make certain elements stand out in your web site.

1. Using the pre tags.

If you use <pre> text</pre> your text will be different from your HTML text and therefore stand out.


2. You can use a Vertical graphic bar next to a table to make that stand out.

Make that graphic in a graphic editor.
Make a new gif 2 pixels wide and 400 pixels in height. Fill it with the colour you prefer.
Call it vertbar.gif or whatever.

Enter that gif in your HTML document as so:
<IMG SRC="images/vertbar.gif" width=2 height=770 align="left">
That will make the gif left of your text.
If you want it to be right of yout text make it align="right"
You will need to adjust the gif height according to the page size.

3. Make a transparent gif to separate pictures from text.

Once again use your graphic editor to make a gif with a transparent background. In Paint shop pro your new image can be set to transparent when you open it.
Make the size about 8 pixels in width and 8 in height.
Call it transparent.gif or whatever.

Insert it into your HTML page like the other gif
<img src="images/transparent.gif" width="16" height="16"align="left">
Change the align factor if need be.

You can stretch the length according to the page later.


4. Place a coloured line next to a paragraph.

<div style="border-left:4px solid #ff0000;font:11px verdana;padding-left:5px;">paragraph here </div>

Change colours and font to suit

5. Have a line with a yellow background.
Place in BODY

<span style="font-family:verdana,helvetica; font-size:12px; color:000000; background:dddddd;"><b>From <u style="background:ffffaa;">Oz Web Hub.</u></b></span>


Change colours and font to suit.

6. Place a box around a paragraph

Place in BODY

You can alter this to suit: eg change width, font, border etc.

<p style="border:1px solid #000000;padding:5px;font:11px verdana;width : 200px">your paragraph text here<p>

straight to the top

© Jenny Campbell