Links, Images, and Lists in HTML documents.

Links.

Probably the most valuable feature of HTML is ability to insert references to other documents and jump to these documents just by a mouse click. You can easily do it using a tag. The usual form of the anchor tag is
<a href="otherdocument">Link title</a>
The href argument should be specified if you want this link actually to be a link. You can specify another document on the same site just by putting it name (or path and name), or a document on another site in this case you need not only write the complete site name and the path to the document but also specify the protocol you'd like to use to access the file (usually http://). These are two examples:
Code Result 
<a href="../images/mog.gif">This is a local file link<a> 
<a href="http://www.yahoo.com">This is link to another site</a>
    This is a local file link
    This is link to another site

Usage of another parameter of the anchor tag allows us to refer not only to a specific document, but also to a particular part of the document. It can be done in two steps. Step one is you need to put a special mark at the exact place of the document you'd like to refer to. It can be done using parameter name of the anchor tag: 

<a name=specific_name></a>
Now assuming that the previous line is in a file named file.html we can refer to it in another document as: 
<a href="file.html#specific_name>This is a link to a specific position</a>

Images.

From the previous lecture we know how to use different fonts in colors in HTML documents. To make our documents even more prettier we can also include images in them. Tag img allows us include to do so. The most important property of the tag is src, whose value tells the browser what image we want to show. The simplest form of this tag is:
Code Result 
<img src="../images/s5.gif">
    
Beside the most important parameter src the image tag has many other parameters. Here are some of them:
Parameter Description Values Usage Example
align This parameter allows to align the image inside the text. All possible values can be divided into 2 groups: LEFT, RIGHT and all the rest. If parameter align has LEFT or RIGHT value, then we have so called "floating" image. In this case the image is shifted to the corresponding side of the browser window and following text or other elements are shifted to the opposite side. In the case of using any other value of the align argument the image is considered inserted into the text line (just like a big letter).
  • Top
  • TextTop
  • Middle
  • AbsMiddle
  • BaseLine
  • Bottom
  • AbsBottom
  • Left
  • Right
    		• <img src="fish.jpg" align=top>
    width width of the image in pixels or other measurement units   <img src="fish.jpg" width=300>
    hspace
    vspace    		 these two parameters allow you to separate the image from the text. Their values are horizontal and vertical distance in pixels. # of pixels <img src="fish.jpg" hspace=10 vspace=14>
    border Size of the image border in pixels # of pixels <img src="fish.jpg" border=4>
    alt text which will be shown if image is not loaded or when you point mouse on the image, This example also shows how to use images as links. a string <img src="fish.jpg" alt="Wonna see a fish?Click here!">

    Here we discuss some properties of using an image as a background of the document. Please take a look.

    Unordered lists.

    There are special structures in HTML that allow to present information as lists. Tags <ul> and closing tag </ul> are used to create unordered list. Every item inside the list should start with &li;> tag. This tag doesn't require the corresponding closing tag, but it may be not a bad idea to have it. Thus, the simplest unordered list would be:
    Code Result 
    <ul>
 <li>First item </li>
 <li>Second item </li>
 <li>Third item </li>
</ul>
    • First item
    • Second item
    • Third item

    Bot tags <ul> and <li> have an optional parameter type that can have the following values: disk, circle, and square. These values set the item marker. The default value is disk. If the parameter is used in <ul> tag, then it changes the type of markers for all items in the list. If it's used in <li>, then it changes only the marker of this particular item. In the case of nested lists browser will switch the markers in the order. Later we'll discuss how to change the default images and add your own markers to get something like this:

    Ordered lists.

    To make an ordered list we need to use tag <ol> instead of <ul> (don't forget about the closing tag). Inside the <ol> and </ol> tags we still need to use <li> tag to start a new item. Inside the ordered list this tad can also have a parameter type, but values will be different:
  • type=A sets marker as capital Latin character
  • type=a sets marker as lower case Latin character
  • type=I sets marker as capital Roman digit
  • type=i sets marker as lower case Roman digit
  • type=1 sets marker as usual digit

    • Being applied to an element of the list this parameter changes just the style of this particular element, but if used as a parameter of the <ol> tag, then changes all items. Tag <ol> can also have a parameter start which specifies the number the enumeration should be started with. Similar parameter value of the tag <li> allows to change the number of the specific element on the list and all the following items. Here is an example that illustrates a rather sophisticated list:
    Code Result 
    <ol type=I start=100>
 <li type=I start=100> This is Roman one hundred
 <li> And this is 101
 <li value=1000> And this is one thousand
 <li> and this should be 1001
 <li type=i> here I temporarily switched to small Roman digits
 <li> and now we are back to capital ones  
</ol>
    1. This is Roman one hundred
    2. And this is 101
    3. And this is one thousand
    4. and this should be 1001
    5. here I temporarily switched to small Roman digits
    6. and now we are back to capital ones

    Although tags <ol> or <ul> and <li> are used together almost all the time, it is possible to use them separately. Try to do it and see what they do without each other.