Main Page/Previous Lesson/Next Lesson

HTML Lesson 3

Lists
Information often presents well and looks pleasing to the eye when in a list. HTML makes listing easy.

The following kind of list functions exist:

  • Ordered list -presents information in an order by number.
  • Unordered lists-does not fall into a specific order.
  • Definition lists terms and definitions where the definitions is listed below the term.

    Ordered lists
    The < ol > tag begins an ordered list on your web page. You need to put a < li > in front of each item you wish to be listed.

    Example:
    < ol >
    < li >Find a book
    < li >Open the book
    < li >Look at the words a the page
    < li >Read words
    < / ol >

    1. Find a book
    2. Open the book
    3. Look at the words a the page
    4. Read words

    NOTE: The browser will automaticity numbers an ordered list beginning with the number 1.


    Unordered Lists

    The < ul > tag begins an unordered list. Theses are easier to create then ordered lists because you items to not need to have an order.

    Example:
    < ul >
    < li >My Site
    < li >My Old Site
    < li >My Friends Site
    < / ul >

    • My Site
    • My Old Site
    • My Friends Site

    You can change the look of the bullet with attributers such as: circle, disc and square.

    < ul type=circle >
    < li >Hello
    < li >Test This!
    < / ul >

    • Hello
    • Test This!

    Definition lists

    The < dl > (definition-list) tag to begin a definition list Each term needs a < dt > (definition-term) tag, and each definition needs a < dd > (definition-definition) tag. Example:
    < dl>
    < dt >Computer:
    < dd >one who computes.
    < dt >Robot:
    < dd >an unthinking but effective person.
    < / dl >

    Computer:
    one who computes.
    Robot:
    an unthinking but effective person.

    NOTE: Definition lists aren't just for definitions. You can use them to describe other web site links or just about anything.


    Graphics

    The term picture doesn't describe all the kinds of images a web page can display. you can have pictures, line drawings, computer-generated artwork, scanned images, table images, clip art, and even hand drawn computer images.

    The more graphic on your sire, the more attractive it is visually, but also the longer it takes to load, and people may not wait. So choose your images carefully.

    The 2 main kinds of images on the web:

    1. gif (pronounced jiff) files also know as graphic interchange format files. Gif images can display up to 256 colors and work well for images with pure colors such as logos and paint produced images. Gif images can also support transparency, letting parts of an image be invisible, showing the background though it.
    2. jpg (pronounced j-peg) images created for the joint photographic group can show millions of colors and are good for scanned images and photos.

    NOTE: Never use an image that is not a .gif or . jpg file on your page as most computers will only understand theses two types.


    Working with graphics

    The < img > tag supports several attributes, but your image will not appear unless you tell its source src="location of image here". No ending tag is necessary for < img > tags.

    Example:
    < img src="images/dog1.gif" >

    The location of the image is usually located in the image folder you have stored it in. It is always best to make an "image" directory in which to store your pictures.

    The border attribute will place a border around your image.

    Example:
    < img border=25 src="images/dog2.gif" >

    It is good to always specify the image size. Browsers must calculate the size of each image to make room for the graphic and to format the other text and images.

    You can speed loading time by telling the computer exactly what size your images are.

    Use the width= attribute to specify the image's width, and the height= attribute to specify the image's height.

    Most of today's graphic programs can determine the exact pixel size of any image and display the size. You can often locate this under the properties menu.

    Example:
    < img height=82 width=107 src="images/dog2.gif" >

    If you specify a smaller or larger size of the image, it will appear that way on the screen, but the image itself will not change, and it take the same amount of time to load even if it appears to be small.

    Remember that some users turn off their images. In order that they know what the images are, it is good to label them using the alt="image name here" attribute (alternative image).

    This lets you display text in the place of the image that appear if the image does not load.

    Example:
    < img alt ="Cartoon Dog" src="images/index.html" >

    Cartoon Dog

    NOTE: Without height, width alignment attributes, it will take much longer for the page to load correctly and the layout of the page may suffer.

    Interlaced images are gif image that appears blurry first and then slowly gets crisper as the page loads.

    A noninterlaced image will not appear on the screen until the entire picture is loaded.



    Better paragraph spacing

    The < p> tag with the align= attribute determines the left, right or centered alignment of the paragraphs in your page. Without the attributes, paragraphs will always align to the left margin.
    < p align= right or left of center >

    NOTE: Browsers ignore returns, tabs and multiple spaces in the text--they all collapse into a single space when seen in the web site.

    The < pre > tag requests that the browser keep the same text spacing that you used in the text

    You can change the length width and alignment of the horizontal rule < hr > by adding attributes..
    < hr size=10 align=right width=25 >


    < blockquote > < /blockquote > is a useful command when quoting long passages. This shrinks and sets the text apart from the surrounding paragraphs.


    Main Page/Previous Lesson/Next Lesson































    Hosted by www.Geocities.ws

    1