Scribd
Upload
51 views9 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
51 views9 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy