Scribd
Upload
35 views

Lecture 5 HTML Links & Lists

This document provides an overview of HTML links and lists. It discusses how to create hyperlinks using the <a> tag and href attribute, including absolute and relative paths. It also covers link pseudo-classes like :link, :visited, :hover, and :active. The document explains how to use the target attribute and its values. Finally, it summarizes how to make unordered lists with <ul> and list items with <li>, as well as ordered lists with <ol>.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
35 views

Lecture 5 HTML Links & Lists

This document provides an overview of HTML links and lists. It discusses how to create hyperlinks using the <a> tag and href attribute, including absolute and relative paths. It also covers link pseudo-classes like :link, :visited, :hover, and :active. The document explains how to use the target attribute and its values. Finally, it summarizes how to make unordered lists with <ul> and list items with <li>, as well as ordered lists with <ol>.

Uploaded by

Kelvin Chaula
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 9

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

You might also like