wysiwyg HTML:intermediate level!
  • Nested Lists
  • Indented Lists Options
  • Image Options
  • Alignment of the image with respect to the text
  • Alignment of the image with respect to the page
  • Width and Height
  • Width and Height with respect to page size
  • Border
  • Space
  • Font Size
  • Backgrounds
  • Solid colours
  • From Images
  • Horizontal Ruler Options
  • Table
  • A simple table
  • Border, width and cellpadding
  • Alignment
    •

    1. Nested Lists

    It is quite possible to have nested lists. However, do not embed your tags. Limit the nesting to three levels.

    I write:

    <ol> <li><b>The Hitchhikers Guide To The Galaxy</b> <ul> <li> If there's anything more important than my ego around, I want it caught and shot now. <li> In those days spirits were brave, the stakes were high, men were REAL men, women were REAL women, and small furry creatures from Alpha Centauri were REAL small furry creatures from Alpha Centauri. </ul> <p> <li><b>Last Chance To See...</b> <ul> <li> Virtually everything we were told in Indonesia turned out not to be true, sometimes almost immediately. The only exception to this was when we were told that something would happen immediately, in which case it turned out not to be true over an extended period of time. </ul> </ol> You see:

    Here are some excerpts from books written by Douglas Adams:

    1. The Hitchhikers Guide To The Galaxy

    2. Last Chance To See...

    2. Indented Lists Options

    You can change your average bullet shape to a disc, circle or square: just change square in the following example by your favorite shape!

    I write:

    <ul type=square> <li> I specified a square <li> do you like squares? </ul> You see:

    You can number your list with numerals (1), capital letters (A), small letters (a), large roman numeral (I) or small roman numeral (i): just change i in the following example by one of the option in parenthesis!

    I write:

    <ol type=i> <li> I specified a small roman numeral <li> groovy! </ol> You see:

    1. I specified a small roman numeral
    2. groovy!
    You can start the numbering of your list wherever you want. Just change 14 in the following example by the appropriate number!

    I write:

    <ol type=A start=14> <li> I specified a capital letter (type = A) <li> it starts counting from N <li> N is the 14th letter in the alphabet </ol> You see:

    1. I specified a capital letter (type = A)
    2. it starts counting from N
    3. N is the 14th letter in the alphabet

    3. Image Options

    3.1. Alignment of the image with respect to the text

    Syntax

    <img align= top (or bottom, middle, texttop, absmiddle, baseline or ab) src="image.gif"> For instance:

    I write:

    This image is aligned with the baseline of the text: <img align=baseline src="image.gif"><p> You see:

    This image is aligned with the baseline of the text:

    3.2. Alignment of the image with respect to the page

    Syntax

    <img align=right (or left) src="image.gif"> For instance:

    I write:

    <img align=right src="roo.gif"><br> This is kangaroo!<p> You see:


    This is kangaroo!

    NB:
    When the align=left (or right) tag is used, the image is called floating; text will wrap around the right (or left) side of the image and will ignore any paragraph or line breaks (as you can notice in this example).

    To overcome this problem, you can either:

    <br clear=>

    Syntax <br clear=left (right or all)> Used with floating images, < br> with the clear tag, will insert a break when you have a left (right or all) margins clear of images. For instance, I will use the same example as before with <br clear= right>:

    I write:

    <img align=right src="roo.gif"><br clear=right> This is kangaroo!<p> You see:


    This is kangaroo!

    3.3. Width and Height

    Syntax

    <img width=number height=number src="image.gif"> (number is in pixels)

    For instance:

    I write:

    <img width=78 height=34 src="image.gif"><p> You see:

    It speeds up the loading of the image (the image will be scaled to fit the specified dimensions and the text will be formatted).

    3.4. Width and Height with respect to page size

    Syntax

    <img width=number% height=number% src="image.gif"> (number% refers to the dimension of the page)

    You only need to specify either width or heigth, the picture will be scaled appropriately.

    For instance:

    I write:

    <img width=50% src="image.gif"><p> You see:

    3.5. Border

    Syntax

    <img border=number src="image.gif"> (number is in pixels)

    For instance:

    I write:

    <img border=20 src="image.gif"><p> You see:

    NB:
    Use border=0 if you do not want a border on your image. However, in the case of graphic links, some people expect a border!

    3.6. Space

    Syntax

    <img hspace=number vspace=number src="image.gif"> (number is in pixels)

    Controls the horizontal and vertical space (in pixels) around the image. For instance:

    I write:

    10 pixels separates this text from the top of the folowing picture.<p> <img hspace=50 vspace=10 src="image.gif"> 50 pixels separates this text from the right side of the picture.<p> You see:

    10 pixels separates this text from the top of the folowing picture.

    50 pixels separates this text from the right side of the picture.

    4. Font Size

    Syntax

    <font size=number > where number ranges from 1 to 7 (default is 3)

    For instance:

    I write:

    Is <font size=5> it <font size=7> big <font size=3> enough?<p> You see:

    Is it big enough?

    5. Backgrounds

    5.1. Solid colours

    Syntax

    <html> <head> <title> put your title here </title> </head> <body bgcolor="#ffffff" text="#000000" link="#0030f0" vlink="#7030dd" alink="#00ff00"> where:
    • bgcolor is the background colour
    • text is the colour of the text
    • link is the colour of the link
    • vlink is the colour of the link you have been to
    • alink is the colour of the link when you click on it
    Very Important!!!
    if you insert text before the <body> tag, it will not work!

    The colours represent the rgb intensities and are in hexadecimal. For instance, in 0030f0, 00 is the red intensity, 30 the green and f0 the blue one.

    For instance:

    I wrote at the beginning of this document:

    <html> <head> <title> wysiwyg html: intermediate level! </title> </head> <body bgcolor="#ffffff" text="#000000" link="#0030f0" vlink="#7030dd" alink="#00ff00"> You saw the result all along!

    5.2. From Images

    Syntax

    <html> <head> <title> put your title here </title> </head> <body background="image_background.gif" text="#ff0000" link="#ff00ff" vlink="#00ff00" alink="#00ff00"> where:
    • bgcolor is the background colour
    • text is the colour of the text
    • link is the colour of the link
    • vlink is the colour of the link you have been to
    • alink is the colour of the link when you click on it
    Very Important!!!
    Follow the order as indicated in the syntax.

    I write:

    <body background="image.gif" text="#000000" link="#0030f0" vlink="#7030dd" alink="#00ff00"> Click here to see the effect!

    6. Horizontal Ruler Options

    You can change the thickness of your ruler: just change 6 in the following example by your favorite number!

    I write:

    <hr size=6> You see:

    You can change the width of your ruler: just change 227 in the following example by your lucky number!

    I write:

    <hr width=227> You see:

    You can align your ruler to the left, right or center: just change right in the following example by left, right or center!

    I write:

    <hr width=265 align=right You see:

    Do you prefer a solid bar?

    I write:

    <hr noshade> You see:

    7. Table

    7.1. A simple table

    I write: <table border> <caption> <b>The healthy table</b> </caption> <th> flowers <th> fruits <th> vegies <tr> <td> lilac <td> cherry <td> tomato <tr> <td> poppy <td> peach <td> carrot </table>

    You see:

    The healthy table
    flowers fruits vegies
    lilac cherry tomato
    poppy peach carrot

    7.2. Border, width and cellpadding

    Syntax

    <table border=number cellpadding=number width=number%> ... </table> (number is in pixels)
    (number% refers to the dimension of the page)

    For instance:

    I write:

    <table border=4 cellpadding=8 width=75%> <caption> <b>The healthy table</b> </caption> <th> flowers <th> fruits <th> vegies <tr> <td> lilac <td> cherry <td> tomato <tr> <td> poppy <td> peach <td> carrot </table>

    You see:

    The healthy table
    flowers fruits vegies
    lilac cherry tomato
    poppy peach carrot

    7.3. Alignment

    Syntax

    <tr align=left (right or center)> ... </tr> <th align=left (right or center)> ... </th> For instance:

    I write:

    <table border=1 cellpadding=3 width=50%> <caption> <b>The healthy table</b> </caption> <th align=left> flowers <th align=center> fruits <th align=right> vegies <tr align=center> <td> lilac <td> cherry <td> tomato <tr align=center> <td> poppy <td> peach <td> carrot </table>

    You see:

    The healthy table
    flowers fruits vegies
    lilac cherry tomato
    poppy peach carrot

    Are you ready for advanced level html?

    Click here to access the "wysiwyg html: advanced level!"

    or

    Would you rather go back to the basics?

    Click here to access the "wysiwyg html: the basics!"

    or

    Back to the introduction