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
HTML Links: Relative Path
• 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
HTML Links: Relative Path
• 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>
HTML Links: Relative Path
• 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
HTML Links: Pseudo Classes
• 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
HTML Links: Pseudo Classes
• There are four pseudo classes associated with
<a> element;
– link
– visited
– hover
– active
11
11
HTML Links: Pseudo Classes
• 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
HTML Links: Pseudo Classes
• 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
HTML Links: Pseudo Classes
• 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
HTML Links: Pseudo Classes
• 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
HTML Links: Target Attribute
• _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
HTML Links: Target Attribute
• _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
– The parent page will be closed
• _top specifies that a linked document to be
opened on the same tab
– The parent page will be closed
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
HTML Lists: Unordered List
• 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
HTML Lists: Unordered List
• 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”>
<li> Faculty A </li>
<li> Faculty B </li>
<li> Faculty C </li>
</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>
<li> Faculty A </li>
<li> Faculty B </li>
<li> Faculty C </li>
</ol>
</body> 22
22
HTML Lists: Ordered List
• 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
HTML Lists: Ordered List
• Here is a list of different number formats the
ordered list can be displayed;
24
24
8
5/20/2019
HTML Lists: Ordered List
• You can use start attribute to specify the
starting point of numbering you need
<body>
<ol type=“i” start=“2”>
<li> Faculty A </li>
<li> Faculty B </li>
<li> Faculty C </li>
</ol>
</body>
• Here the first list item will be displayed with
roman 2 i.e ii
25
25
HTML Lists: Ordered List
• You can use start attribute for <ol> element to
specify the starting point of numbering you
need
26
26
