Website Designing

IT104N

Chapter 4 : Getting started with HTML

Lecture 5 : HTML Lists and Link

Introduction

2 of 25

Unordered lists and ordered lists are commonly used in

HTML:

Unordered List

The first item

The second item

The third item

The fourth item

Ordered List

1. The first item

2. The second item

3. The third item

4. The fourth item

Unordered HTML Lists

3 of 25

An unordered list starts with the tag. Each list item

starts with the tag.

The list items will be marked with bullets (small black

circles):

Coffee

Tea

Milk

Unordered HTML Lists - The Style

Attribute

4 of 25

Style Description

list-style-type:disc The list items will be marked with

bullets (default)

list-style-type:circle The list items will be marked with

circles

list-style-type:square The list items will be marked with

squares

list-style-type:none The list items will not be marked

A style attribute can be added to an unordered list, to define the style of the marker:

example

5 of 25

Disc

Circle

example

6 of 25

Square

None

Ordered HTML Lists - The Type Attribute

7 of 25

A type attribute can be added to an ordered list, to

define the type of the marker:

Type Description

type="1" The list items will be numbered with numbers (default)

type="A" The list items will be numbered with uppercase letters

type="a" The list items will be numbered with lowercase letters

type="I" The list items will be numbered with uppercase roman numbers

type="i" The list items will be numbered with lowercase roman numbers

Examples;

8 of 25

Numbers

Uppercase Letters

Examples;

9 of 25

Lowercase Letters

Uppercase Roman Numbers:

Examples

10 of 25

Lowercase Roman Numbers

Nested HTML Lists

11 of 25

Exercise 1

12 of 25

Change the list below to an ordered list.

Coffee

Tea

Milk

Exercise 2

13 of 25

Change the list below to display squares instead of

bullets.

Coffee

Tea

Milk

Exercise 3

14 of 25

Change the list below to display letters instead of

numbers.

Coffee

Tea

Milk

HTML Links

15 of 25

HTML links are hyperlinks.

A hyperlink is a text or an image you can click on, and

jump to another document.

HTML Links - Syntax

In HTML, links are defined with the tag:

Example

16 of 25

My SEGI

The href attribute specifies the destination address (http://www.segi.edu.my/en) The link text is the visible part (My SEGI).

Local Links

17 of 25

A local link (link to the same web site) is specified with a

relative URL (without http://www....).

HTML Links - Colors

18 of 25

When you move the mouse over a link, two things will

normally happen:

The mouse arrow will turn into a little hand

The color of the link element will change

By default, a link will appear like this (in all browsers):

An unvisited link is underlined and blue

A visited link is underlined and purple

An active link is underlined and red

You can change the default colors, by using styles:

Example

19 of 25

The target Attribute

20 of 25

The target attribute specifies where to open the linked

document.

Option Description

_blank Opens the linked document in a new window or tab.

_self Opens the linked document in the same frame.

_parent Opens the linked document in the parent frame.

_top Opens the linked document in the full body of the window.

targetframe Opens the linked document in a named targetframe.

Example

21 of 25

Image as Link

22 of 25

It is common to use images as links:

HTML Email Tag

23 of 25

HTML tag provides you option to specifiy an email

address to send an email.

While using tag as an email tag, you will

use mailto:email address along with href attribute.

Following is the syntax of using mailto instead of using

http.

This code will generate following link which you can use

to send email.