Relative URL

Relative URL

• Relative URL contains the only the folder name and filename or even just the file name.

• Browser does not need protocol address or server name to identify the file in the web.

• Relative URL to refer the documents in relation to the originating document.

Two types of Relative URL:

i. Document – Relative URL.

•  Document Relative URL is used to relate the HTML document in the same folder, just providing the name of the file (ex: Index.html).

• It contains only the folder name and file name.

ii. Server – Relative URL

• Server relative URL is relative to the server root.

• It contains the part of URL and relating to the host name.

Anchors and Links

This section discusses the A tag which is used to define anchors (places in a document that can be linked to) and also to create links.

• A

A - (anchor or link)

The A tag lets you define anchors and links. An anchor defines a place in adocument. A link displays a hypertext link that the user can click to display an anchor or a document.

A as anchor

An anchor identifies a place in an HTML document. To indicate that an <A> tag is being used as an anchor, specify the NAME attribute.

Note that you can also use the ID attribute of any tag to identify that tag as an anchor, as discussed in UNIVERSAL Attributes.

Do not nest an anchor within another A tag.

Syntax

<A

NAME="anchorName"

>.

..

</A>

Example

<A NAME=section2>

<H2>A Cold Autumn Day</H2></A>

If this anchor is in a file called "nowhere.htm," you could define a link that jumps to the anchor as follows:

<P>Jump to the second section <A HREF="nowhere.htm#section2"> A Cold Autumn Day</A> in the mystery "A man from Nowhere."

A as link

• A hypertext link is a piece of content that the user can click to invoke an action.

•  The most common actions are scrolling to a different place in the current document and opening a new document.

• A hypertext link can contain text and/or graphics.

•  To define a hypertext link, use the <A> tag with an HREF attribute to indicate the start of the hypertext link, and use the </A> tag to indicate the end of the link.

•  When the user clicks any content between the <A HREF> and </A> tags, the link is activated.

• The value of the HREF attribute must be a URL.

•  If you want the link to open a new document, the value of HREF should be the URL for the destination document.

•   If you want to scroll the current document to a particular place, the value of HREF should be the name of the anchor to which to scroll, preceded by the # sign.

•   If you want to open another document at an anchor, give the URL for the document, followed by #, followed by the name of the anchor.

•  If you want the destination document or anchor to open in a separate browser window, supply the name of the window as the value of the TARGET attribute.

• If the named window does not already exist, a new window opens.

•  The link can also do actions other than opening and scrolling documents. It can send mail messages, point to files located on FTP servers, run any arbitrary JavaScript code, open local files, point to a gopher server, or read news groups.

•  To do any of these actions, you specify an appropriate kind of URL, such as a mailto URL to send a mail message or a news URL to read a news group.

•  Most browsers display hypertext links in a color different from that of the rest of the document so that users can easily identify them.

•   You can also define actions that occur when the mouse cursor enters or leaves the region containing the link by specifying onMouseOver and onMouseOut event handlers for the link.

• Additionally, you can specify an onClick event handler that determines the action to occur when the user clicks a link.

• A link that has not been clicked is called an unvisited link.

• A link that has been clicked is known as a visited or followed link.

• A link that is in the process of being clicked is an active link.

Syntax

<A

HREF="location"

ONCLICK="clickJScode"

ONMOUSEOUT="outJScode"

ONMOUSEOVER="overJScode"

TARGET="windowName"

> 

...

</A>

HREF="location" specifies a destination URL for the link. The most common value here is a document name or an anchor. To specify a document to open, provide the URL for the document, either as an absolute or relative URL.

An example of an absolute URL is:

HREF="http://www.chennaikavigal.com/index.html"

An example of a relative URL is:

HREF="products/doc1.html"

To scroll the current document to an anchor, give the name of the anchor preceded by the pound (#) sign. For example:

HREF="#anchor1"

To open a different document at an anchor, give the URL for the document, followed by the # sign followed by the name of the anchor. For example:

HREF="products/doc1.html"

The HREF attribute can also be a URL that sends a message, points to files located on an FTP server, runs arbitrary JavaScript code, opens local files, points to a gopher server, or reads news groups.

ONCLICK="clickJScode" specifies JavaScript code to execute when a user clicks the link. If you supply a value for the ONCLICK attribute, the specified action overrides the default link behavior.

ONMOUSEOUT="outJScode" specifies JavaScript code to execute when a user moves the mouse cursor out of the link or anchor.

ONMOUSEOVER="overJScode" specifies JavaScript code to execute when a user moves the mouse pointer over the image or link text.

TARGET="windowName" specifies a window in which to show the destination document (if the link's action is to scroll or open a document). If the named window is not already open, a new window with that name opens.

Special target values are:

blank opens the destination document in a new unnamed window.

parent opens the destination document in the parent window of the one displaying the current document.

self opens the destination document in the same window as the one in which the link was clicked.

top opens the destination document in the full body of the current window. This value can be used to ensure that the destination document takes over the full window even if the original document was displayed in a frame.

Example

<P>You can find all the latest news from Chennai Kavigal at

<A HREF="http://www.chennaikavigal.com/index.html">Chennai Kavigal's Home Page</A>.

HTML List:

Lists can add a lot to a WebPage, there are different types of lists and different types of bullets or numbers that can be used.

You can have an ordered list (a, b, c, etc.) unordered lists (with bullets) or you can have definition lists.

This section describes the tags for displaying lists:

DIR, DL, DT, DD, MENU, OL, UL, LI

DIR - (directory list)

The DIR tag is intended to display a list of short items such as in a directory listing. In practice, the DIR tag usually does the same thing as the UL (unordered list) tag.

To mark the individual items within the list, use the LI tag. A single list item can contain additional paragraphs, marked with the P tag.

This tag is being deprecated; that is, it has become obsolete.

Syntax

<DIR>

...

</DIR>

Example

<P>The directory structure is:</P> <DIR>

<LI>PRODUCTS

<DIR>

<LI>SHAKTHI.htm <LI>TYPING TUTOR.htm </DIR>

<LI>MULTIMEDIA

<DIR>

<LI>KURALAMUDHU.htm <LI>ARIVODU VILAYADU.htm </DIR>

<DIR>

DL - (definition list)

The DL tag encloses a definition list. A definition list contains terms, which are defined with the DT tag, and definitions, which are defined with the DD tag. By default, Nadodi aligns terms on the left and indents each definition on a new line. However, you can use the COMPACT attribute to display a definition on the same line as the preceding term, if it fits on one line.

The intent of a definition list is to display lists of terms and their corresponding definitions, such as in a glossary.

Syntax

<DL COMPACT>

...

</DL>

COMPACT compacts the definition list by placing the term defined by the DT tag on the same line as the definition defined by the DD tag, provided the term is short enough.

Definition List Example

The following example defines six HTML terms. <DL>

<DT>HTML

<DD>This tag marks a text file as an HTML document. <DT>HEAD

<DD>This tag encloses the heading for the HTML document. <DT>BODY

<DD>This tag displays the body for the HTML document. <DT>DL

<DD>This tag displays a definition list in the HTML document. <DT>DT

<DD>This tag displays a term in a definition list. <DT>DD

<DD>This tag displays a definition description. </DL>

DT - (definition term)

The DT tag specifies a term in a definition list. The DT tag must be used in a DL tag. Usually a DT tag is followed by a DD tag that describes the term in the DT tag.

The DT tag does not require a closing tag.

Syntax       <DT>

Used Within <DL>

DD – (Definition description)

The DD tag displays a definition description in a definition list. The DD tag must be used within a DL tag and usually follows immediately after a DT tag that indicates the term being defined. The DD tag does not require a closing tag.

See DL for more details and an example.

Syntax       <DD>

Used Within <DL>

MENU - (list of simple items)

The MENU tag displays a list of simple items. This tag works just like the UL tag. Use the LI tag to designate the individual menu items.

This tag is being deprecated because it has become obsolete in favor of the UL tag.

Syntax

<MENU>

...

</MENU>

Example

The following example creates a list of three short items: <P>Menu Example:</P>

<MENU>

<LI> Windows 9x

<LI> Windows NT

<LI> Windows 2000 </MENU>

1. Unordered List:

• In an unordered list each item has the same leading symbol.

• The item in the list will be rendered in the same order that they are entered.

• <ul> tag is used to unordered the list.

• <li> tag is used to list the items.

Syntax

1.  <UL TYPE="CIRCLE"|"DISC"|"SQUARE">

TYPE defines the type of bullet used for each list item. The value can be one of the following: CIRCLE specifies a hollow bullet.

DISC specifies a solid round bullet (Nadodi's default). SQUARE specifies a square bullet.

Example

<ul type=”disc”> <li>Item 1</li> <li>Item 2</li> </ul>

<ul type="square"> <li>Item 1</li> <li>Item 2</li> </ul>

<ul type="circle"> <li>Item 1</li> <li>Item 2</li> </ul>

2. Ordered List:

• In an ordered list, each item has a sequential leading symbol.

• The browser assigns this sequence automatically.

• <ol> tag is used to ordered the list.

• <li> tag is used to list the item.

Syntax

<OL

START="value"

TYPE="A"|"a"|"I"|"i"|"1"

> 

...

</OL>

START="value" indicates the starting number for the list. The number must be a positive integer.

TYPE defines the type of numbering sequence used for each list item. The value can be one of the following:

A specifies a sequence of uppercase letters a specifies a sequence of lowercase letters

I specifies a sequence of uppercase Roman numerals i specifies a sequence of lowercase Roman numeral 1 specifies a sequence of numbers.

Example <ol>

<li>Item 1</li> <li>Item 2</li> </ol>

<ol type="A" start="5"> <li>Item 1</li>

<li>Item 2</li> </ol>

<ol type="i" start="10"> <li>Item 1</li>

<li>Item 2</li>

</ol>

3. Definition List

• A definition list is a sequence of terms and description of these terms.

• <dl> tag is used to implement definition list.

• <dt> tag is used for defining the item.

• <dd> tag is used for defining the description.

LI - (list item)

The LI tag indicates an itemized element, which is usually preceded by a bullet, a number, or a letter. The LI tag is used inside list elements such as OL (ordered list) and UL (unordered list).

A single itemized element can contain other tags such as the P tag. The LI tag does not require a closing tag.

Syntax

<LI

TYPE="DISC"|"CIRCLE"|"SQUARE"|"A"|"a"|"I"|"i"|"1"

VALUE="number"

> 

TYPE specifies the type of symbol or numbering sequence to use before each item.

· DISC specifies a solid bullet.

· CIRCLE specifies a hollow bullet.

· SQUARE specifies a square bullet.

· A specifies a sequence of uppercase letters.

· a specifies a sequence of lowercase letters.

· I specifies a sequence of uppercase Roman numerals.

· i specifies a sequence of lowercase Roman numeral.

· 1 specifies a sequence of numbers.

The values DISC, CIRCLE, and SQUARE can be used in unordered lists, while the values A, a, I, i, and 1 can be used in ordered lists that have a numerical sequence.

VALUE="number" indicates the starting number for an item in an ordered list. This attribute is valid only in an ordered list. See OL for information on the types of numbering available.

Used Within DIR, DL, OL, UL, MENU

Example

<UL>

<LI>Identify items in a numbered list <LI>Identify items in an unordered list <LI>Identify items in a directory list <LI>Identify items in a menu

</UL>

HTML Table:

• Tables in HTML are easy to program if you know what you are trying to do.

Tables look like the charts present on many of these slides.

•   Tables in browsers by default have no borders, if you want to see the edges of your table, you have to place a border command inside the table tag.

• You can also use tables to format pages.

•  Inside tables, the text is always the default of the browser (black and small), if you want to change this font, you must add a <font color=“color” and/or size=“x”> inside each cell to make the change.

· TABLE

· CAPTION

· TR

· TD

· TH