Rajesh

Intuition Inc.

HTML Lists
3 Types of List
Ordered lists: uses different scheme of numbers or
order to list items.
ex: legal contract or steps need to be performed
Unordered lists: Start with bullet points, can be
configured
Definition lists: arranges items like dictionary.

Ordered List
<ol> : Ordered List is created with <ol>

element
Each item in the list is placed between open
<li> tag and closing </li> tag
The type attribute: The type attribute
used to specify type of numbering.
1 Default-Case Numerals
I Upper-Case Roman Numerals
I Lower-Case Roman Numerals
A Upper-Case Letters
a Lower-Case Letters

Ordered List Example

Start attribute: To specify the starting point for the

numbering you need.
Ex: <ol type="1" start="4"> - Numerals starts with 4

Unordered List

Unordered list is created using <ul> element

Each item in the list is placed between an opening <li>
and closing </li> tag
Type attribute used to specify type of bullet point
Ex: Circle, square, diamond

Definition List

Definition list is created with <dl> element

Inside <dl> element, there will be pairs of <dt> and
<dd> elements
<dt> is used to contain the term being defined
<dd> is used to contain the definition

Nested List

Nested lists are the lists created inside the lists.

You can nest any type of list inside a ordered,
unordered or definition list.

Links
This is the page the
LINK takes you to

This the TEXT the

user clicks on

<a href=http://www.imdb.com> IMDB</a>

Opening of LINK Tag

Closing LINK
Tag

Directory and relative URLs

Root-of web folder

imdb
Index.html

Child folder

images

<a href=movies/rating.html> Ratings</a>

<a href=upcoming/trailors.html> Trailors</a>

home
Logo.gif
header.gif
movies
Ratings.html
Reviews.html
upcoming
upcoming.html
trailors.html

Email Links: mailto

To create a link that starts up the user's email program and addresses an email
to a specified email address
<a href=mailto:someone@someone.com> Email John Doe<a>

Opening Links
Target
Use the Target attribute to load URL in a new window

Ex: <a href=http://imdb.com target=_blank > IMDB</a>

Linking to specific part of the same page

<h1 id="top">Film-Making Terms</h1>
<a href="#arc_shot">Arc Shot</a><br />
<a href="#interlude">Interlude</a><br />
<a href="#prologue">Prologue</a><br /><br />
<h2 id="arc_shot">Arc Shot</h2>
<p>A shot in which the subject is photographed by an encircling or moving camera</p>
<h2 id="interlude">Interlude</h2>
<p>A brief, intervening film scene or sequence, not specifically tied to the plot, that appears within a film</p>
<h2 id="prologue">Prologue</h2>
<p>A speech, preface, introduction, or brief scene preceding the the main action or plot of a film; contrast to
epilogue</p>
<p><a href="#top">Top</a></p>

Images
To add Images

Syntax: <img src=images/logo.gif alt=logo of site

title=this is the main logo height=5opx width=20px />
Src Tells browser where it can find image
Alt Provides text description if image is not available
Title Provides additional information about image
and some browser provide tool tip info of the text
Height Specifies height of the image in pixels
Width Specifies width of the image in pixels

Images.. Continued
<figure> To contain image and caption to image(new

HTML5)
<figcaption> To add caption to image

Ex:

<figure>
<img src=johndoe.jpg > <br/>
<figcaption>
Image of Joh Doe
</figcaption>
</figure>

Tables
To display information in grid or tabular format, you use

tables ex: Time tables, stock results, order history etc..

<TABLE> This element is used to create table
<TR> Indicates the start of each row. Closing tag is </TR>
<TD> Indicates the start of each column/cell. Closing tag
is </TD>
<TH> Indicates table heading.
Border Attribute to create the border around table rows
and cells
Cellpadding, Cellspacing old and out dated, still
supported by browsers
Bgcolor Attribute to paint background color for table

Next Session
FORMS
TEXT
PASSWORD
CHECKBOX
RADIO
TEXT AREA
DATE
SEARCH
SUBMIT

SLIDER