2 of 35

List Elements

HTML supplies several list elements. Most list elements are composed of one or more <LI> (List Item) elements.
UL : Unordered List. Items in this list start with a list mark such as a bullet. Browsers will usually change the list mark in nested lists.

<UL>

</UL>

List item …
List item …

3 of 35

List Elements

You have the choice of three bullet types: disc(default), circle, square.
These are controlled in Netscape Navigator by the “TYPE” attribute for the <UL> element.

</UL>

List item …
List item …
List item …

4 of 35

List Elements

OL: Ordered List. Items in this list are numbered automatically by the browser.

<OL>

</OL>

List item …
List item …
List item
You have the choice of setting the TYPE Attribute to one of five numbering styles.

5 of 35

List Elements

TYPE	Numbering	Styles
1	Arabic numbers	1,2,3, ……
a	Lower alpha	a, b, c, ……
A	Upper alpha	A, B, C, ……
i	Lower roman	i, ii, iii, ……
I	Upper roman	I, II, III, ……

6 of 35

List Elements

You can specify a starting number for an ordered list.

</OL>

</OL>

7 of 35

List Elements

List item …
List item …

Text ….

List item …

8 of 35

List Elements

DL: Definition List. This kind of list is different from the others. Each item in a DL consists of one or more Definition Terms (DT elements), followed by one or more Definition Description (DD elements).

<DL>

<DD> Hyper Text Markup Language </DD>

<DD> A human’s best friend!</DD>

</DL>

HTML

Hyper Text Markup Language

DOG

A human’s best friend!

9 of 35

Nesting Lists

You can nest lists by inserting a UL, OL, etc., inside a list item (LI).

Example

<LI> List item …

</OL>

</LI>

</UL>

10 of 35

What will be the output?

<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>�<OL TYPE=“a” START=“2”>�<LI>Be able to swim </LI> �<LI>Wear a life jacket at all times </LI>�<LI>Don't stand up or move around. If canoe tips,

<UL>�<LI>Hang on to the canoe </LI> �<LI>Use the canoe for support and </LI> � <LI>Swim to shore�</UL> </LI>

<LI>Don't overexert yourself </LI> �<LI>Use a bow light at night </LI> �</OL>�

11 of 35

The output….

12 of 35

<H1 ALIGN="CENTER">SAFETY TIPS FOR CANOEISTS</H1>

<LI>Wear a life jacket at all times </LI>

<LI>Don't stand up or move around. If canoe tips,

<UL>

<LI>Hang on to the canoe </LI>

<LI>Use the canoe for support

<LI> Be careful </LI>

<LI> Do not look around</LI>

</LI> </OL>

<LI>Swim to shore

</UL> </LI>

<LI>Don't overexert yourself </LI>

<LI>Use a bow light at night </LI>

</OL>

What

will

be the

output?

13 of 35

The output….

14 of 35

Images

In this chapter you will learn about images and how to place images in your pages.

Objectives

Upon completing this section, you should be able to

Add images to your pages.

15 of 35

Images

<IMG>This element defines a graphic image on the page.
Image File (SRC:source): This value will be a URL (location of the image) E.g. http://www.domain.com/dir/file.ext or /dir/file.txt.
Alternate Text (ALT): This is a text field that describes an image or acts as a label. It is displayed when they position the cursor over a graphic image.
Alignment (ALIGN): This allows you to align the image on your page.

16 of 35

Images

Width (WIDTH): is the width of the image in pixels.
Height (HEIGHT): is the height of the image in pixels.
Border (BORDER): is for a border around the image, specified in pixels.
HSPACE: is for Horizontal Space on both sides of the image specified in pixels. A setting of 5 will put 5 pixels of invisible space on both sides of the image.
VSPACE: is for Vertical Space on top and bottom of the image specified in pixels. A setting of 5 will put 5 pixels of invisible space above and bellow the image.

17 of 35

Some Examples on images

1) <IMG SRC=“jordan.gif“ border=4>

2) <IMG SRC=" jordan.gif" width="60" height="60">

3) <IMG SRC=“jordan.gif" ALT="This is a text that goes with the image">

4) <IMG SRC=" jordan.gif “ Hspace="30" Vspace="10" border=20>

5) < IMG SRC =" jordan.gif“ align="left">

blast blast blast blast blast

18 of 35

Anchors, URLs and Image Maps

In this chapter you will learn about Uniform Resource Locator, and how to add them as Anchor or Links inside your web pages.

Objectives

Upon completing this section, you should be able to

Insert links into documents.
Define Link Types.
Define URL.
List some commonly used URLs.
Plan an Image Map.

19 of 35

Shapes, Coords

Types of Shapes

Rect 🡪 used for squares and ordered shapes.
Circle 🡪 used for circles.
Poly 🡪 used for unordered shapes.

Number of coordenations for each shape:

Rect 🡪4 numbers for two corners
Circle 🡪3 numbers for the center & R
Poly 🡪 depends on the number of corners of the shape( 2 numbers for each corner)

20 of 35

Tables

In this chapter you will learn that tables have many uses in

HTML.

Objectives:

Upon completing this section, you should be able to:

Insert a table.
Explain a table’s attributes.
Edit a table.
Add a table header.

21 of 35

Tables

The <TABLE></TABLE> element has four sub-elements:
Table Row<TR></TR>.
Table Header <TH></TH>.
Table Data <TD></TD>.
Caption <CAPTION></CAPTION>.
The table row elements usually contain table header elements or table data elements.

22 of 35

Tables

<tr>

<th> Column 1 header </th>

<th> Column 2 header </th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

23 of 35

Tables

Column 1 Header	Column 2 Header
Row1, Col1	Row1, Col2
Row2, Col1	Row2, Col2

24 of 35

Tables Attributes

BGColor: Some browsers support background colors in a table.
Width: you can specify the table width as an absolute number of pixels or a percentage of the document width. You can set the width for the table cells as well.
Border: You can choose a numerical value for the border width, which specifies the border in pixels.
CellSpacing: Cell Spacing represents the space between cells and is specified in pixels.

25 of 35

Table Attributes

CellPadding: Cell Padding is the space between the cell border and the cell contents and is specified in pixels.
Align: tables can have left, right, or center alignment.
Background: Background Image, will be titled in IE3.0 and above.
BorderColor, BorderColorDark.

26 of 35

Table Caption

A table caption allows you to specify a line of text that will appear centered above or bellow the table.

<CAPTION ALIGN=“BOTTOM”> Label For My Table </CAPTION>

The Caption element has one attribute ALIGN that can be either TOP (Above the table) or BOTTOM (below the table).

27 of 35

Table Header

Table Data cells are represented by the TD element. Cells can also be TH (Table Header) elements which results in the contents of the table header cells appearing centered and in bold text.

28 of 35

Table Data and Table Header Attributes

Colspan: Specifies how many cell columns of the table this cell should span.
Rowspan: Specifies how many cell rows of the table this cell should span.
Align: cell data can have left, right, or center alignment.
Valign: cell data can have top, middle, or bottom alignment.
Width: you can specify the width as an absolute number of pixels or a percentage of the document width.
Height: You can specify the height as an absolute number of pixels or a percentage of the document height.

29 of 35

Basic Table Code

<CAPTION> <h1>Spare Parts <h1> </Caption>

<TR><TH>Stock Number</TH><TH>Description</TH><TH>List Price</TH></TR>

<TR><TD bgcolor=red>3476-AB</TD><TD>76mm Socket</TD><TD>45.00</TD></TR>

<TR><TD >3478-AB</TD><TD><font color=blue>78mm Socket</font> </TD><TD>47.50</TD></TR>

<TR><TD>3480-AB</TD><TD>80mm Socket</TD><TD>50.00</TD></TR>

</TABLE>

30 of 35

Table Data and Table Header Attributes

<tr> <th> Column 1 Header</th> <th> Column 2 Header</th> </tr>

</table>

31 of 35

Table Data and Table Header Attributes

Column 1 Header	Column 2 Header
Row 1 Col 1
Row 2 Col 1	Row 2 Col 2
	Row 3 Col 2

32 of 35

�Special Things to Note�

TH, TD and TR should always have end tags.�Although the end tags are formally optional, many browsers will mess up the formatting of the table if you omit the end tags. In particular, you should always use end tags if you have a TABLE within a TABLE -- in this situation, the table parser gets hopelessly confused if you don't close your TH, TD and TR elements.
A default TABLE has no borders�By default, tables are drawn without border lines. You need the BORDER attribute to draw the lines.

33 of 35

�Special Things to Note�

By default, a table is flush with the left margin�TABLEs are plopped over on the left margin. If you want centered tables, You can either: place the table inside a DIV element with attribute ALIGN="center".�Most current browsers also supports table alignment, using the ALIGN attribute. Allowed values are "left", "right", or "center", for example: <TABLE ALIGN="left">. The values "left" and "right" float the table to the left or right of the page, with text flow allowed around the table. This is entirely equivalent to IMG alignment

34 of 35

What will be the output?

<TR> <TD colspan=“4” align=“center”>Page Banner</TD></TR>

<TR> <TD rowspan=“2” width=“25%”>Nav Links</TD><TD colspan=“2”>Feature Article</TD> <TD rowspan=“2” width=“25%”>Linked Ads</TD></TR>

<TR><TD width=“25%”>News Column 1 </TD> <TD width=“25%”><News Column 2 </TD></TR>

</TABLE>

1 of 35

2 of 35

3 of 35

4 of 35

5 of 35

6 of 35

7 of 35

8 of 35

9 of 35

10 of 35

11 of 35

12 of 35

13 of 35

14 of 35

15 of 35

16 of 35

17 of 35

18 of 35

19 of 35

20 of 35

21 of 35

22 of 35

23 of 35

24 of 35

25 of 35

26 of 35

27 of 35

28 of 35

29 of 35

30 of 35

31 of 35

32 of 35

33 of 35

34 of 35

35 of 35