Lecture 5 HTML Links & Lists

5/20/2019
ITU 07204: Fundamentals of Web

Technologies
Lecture 5: HTML Links & Lists
Dr. Lupiana, D
FCIM, Institute of Finance Management
Semester 2
Agenda:
• HTML Links - Hyperlinks
• HTML Lists
HTML Links
• A hyperlink (or a link) is a text or an image you
can click on, and take you to another web
page or file
• In HTML, links are defined with the anchor
<a> tag followed by the href attribute.
<a href=“path”> link text </a>
• Anchor is an inline element and therefore

more than one link can be specified in a
paragraph
3
1
5/20/2019
HTML Links: Absolute Path

• A path specified in the href attribute can
either be absolute or relative
• An absolute URL contains all the information
necessary to locate a resource
• In web, an absolute path is similar to a URL i.e
specifies protocol, domain, path and file name
• You must use absolute URLs when referring to
links on different Web servers
4
HTML Links: Relative Path
• Relative URL is any URL that does not explicitly

specify protocol and/or domain name
• A local link (link to the same Website) is
specified with a relative URL i.e. without
protocol, domain name, path and file name
• Relative URLs can take different forms,
depending on the location of the required file
• if you want to create a link in your home page

to a file about.html in the same directory as
your home page, you would use;
<a href=“about.html”> About FCIM

</a>
2
5/20/2019
• If the file you want to link to is in a

subdirectory, say the subdirectory is called
‘profile’, you need to enter only the directory
information and the name of the file;
<a href=“profile/about.html”>
About FCIM
</a>
• If the file you want to link to is in a higher (say

one level higher) directory than the referring
page, use ../, which means to go one level up
a directory;
<a href=“../index.html”>
Home
</a>
HTML Links: Pseudo Classes
• When you move a mouse over a link, two

things will happen;
– The mouse arrow will turn into a little hand
– The color of the link element will change
• When a Web page is loaded, by default;
– An unvisited link is underlined and blue
– A visited link is underlined and purple
– An active link is underlined and red
3
5/20/2019
• The default attributes can be changed by

defining styles to the associated pseudo
classes
• A pseudo class is a predefined class that is
used to define a special state of an element
– For example, it can be used to style a link to be
underlined when a user hovers a mouse on it
10
10
• There are four pseudo classes associated with

<a> element;
– link
– visited
– hover
– active
11
11
• There are four pseudo classes associated with

<a> element;
– link specifies state of a link when a Web page is
loaded by a Web browser
– visited specifies state of a link that has been
visited
– hover specifies state of a link when a user moves a
mouse cursor on top of the link
– active specifies state of a clicked link
12
12
4
5/20/2019
• Pseudo class comes without a style, so it is up

to a developer to define the style;
• Like a normal class, styles for pseudo classes
are defined in the head section
<style>
a:link{color:white; text-decoration:none}
a:visited{color:red; text-decoration:none}
a:hover{color:black; text-decoration:underline}
a:active{color:yellow; text-decoration:none}
</style>
13
13
• Unlike other classes, pseudo classes are used

implicitly i.e. without using the class attribute
<style>
a:hover{color:black; text-decoration:underline}
</style>
<body>
<a href=“about.html”> About Us </a>
</body>
• The above link will be underlined when a

cursor is hovered/moved on top of the link
14
14
• When setting the style for several link states,

there are some order rules:
– a:hover MUST come after a:link and a:visited
– a:active MUST come after a:hover
15
15
5
5/20/2019
HTML Links: Target Attribute
• The target attribute specifies where the linked

HTML document should be opened.
• The target attribute has four common values;
– _blank
– _parent
– _self
– _top
16
16
• _blank specifies that a linked document to be

opened on a new tab
– The parent page will be left opened
<body>
<a href=“about.html” targer=“_blank”> About Us
</a>
</body>
17
17
• _parent specifies that a linked document to be

opened on the same tab
– The parent page will be closed
• _self specifies that a linked document to be
opened on a new tab
• _top specifies that a linked document to be
opened on the same tab
18
18
6
5/20/2019
HTML Lists: Unordered List
• HTML allows developers to create unordered

lists and/or ordered lists
• An unordered list is a collection of related
items that have no special order or sequence
– This is why the items of unordered lists are
represented using bullets
• This list is created by using HTML <ul>
element.
19
19
• Each list item starts with the <li> element

<body>
<ul>
<li> Faculty A </li>
<li> Faculty B </li>
<li> Faculty C </li>
</ul>
</body>
• By default, each list items will be marked with small

circles bullets
20
20
• A bullet type can be changed to disc (which is

the default type), square, circle or none
– None means no bullets will be displayed
• To change bullets type, use type attribute
<body>
<ul type=“square”>
</ul>
</body>
21
21
7
5/20/2019
HTML Lists: Ordered List
• If you are required to put your items in a

numbered list instead of bulleted then HTML
ordered list will be used
• This list is created by using HTML <ol>
element
<body>
<ol>
</ol>
</body> 22
22
• Like in the unordered list, each list item starts

with the <li> element
• The numbering starts at one and incremented
by one for each successive ordered list
element tagged with <li>
• With type attribute, numbers can be changed
to letters or roman numbers
23
23
• Here is a list of different number formats the

ordered list can be displayed;
24
24
8
5/20/2019
• You can use start attribute to specify the

starting point of numbering you need
<body>
<ol type=“i” start=“2”>
</ol>
</body>
• Here the first list item will be displayed with

roman 2 i.e ii
25
25
• You can use start attribute for <ol> element to

specify the starting point of numbering you
need
26
26

Lecture 5 HTML Links &amp; Lists

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Lecture 5 HTML Links &amp; Lists

Uploaded by

Copyright:

Available Formats

5/20/2019

ITU 07204: Fundamentals of Web

• Anchor is an inline element and therefore

HTML Links: Absolute Path

HTML Links: Relative Path

• Relative URL is any URL that does not explicitly

HTML Links: Relative Path

• if you want to create a link in your home page

<a href=“about.html”> About FCIM

HTML Links: Relative Path

• If the file you want to link to is in a

HTML Links: Relative Path

• If the file you want to link to is in a higher (say

HTML Links: Pseudo Classes

• When you move a mouse over a link, two

HTML Links: Pseudo Classes

• The default attributes can be changed by

HTML Links: Pseudo Classes

• There are four pseudo classes associated with

HTML Links: Pseudo Classes

• There are four pseudo classes associated with

HTML Links: Pseudo Classes

• Pseudo class comes without a style, so it is up

HTML Links: Pseudo Classes

• Unlike other classes, pseudo classes are used

• The above link will be underlined when a

HTML Links: Pseudo Classes

• When setting the style for several link states,

HTML Links: Target Attribute

• The target attribute specifies where the linked

HTML Links: Target Attribute

• _blank specifies that a linked document to be

HTML Links: Target Attribute

• _parent specifies that a linked document to be

HTML Lists: Unordered List

• HTML allows developers to create unordered

HTML Lists: Unordered List

• Each list item starts with the <li> element

• By default, each list items will be marked with small

HTML Lists: Unordered List

• A bullet type can be changed to disc (which is

HTML Lists: Ordered List

• If you are required to put your items in a

HTML Lists: Ordered List

• Like in the unordered list, each list item starts

HTML Lists: Ordered List

• Here is a list of different number formats the

HTML Lists: Ordered List

• You can use start attribute to specify the

• Here the first list item will be displayed with

HTML Lists: Ordered List

• You can use start attribute for <ol> element to

You might also like

Lecture 5 HTML Links & Lists

Lecture 5 HTML Links & Lists