>> HTML: Tags – Hyperlink, Media,

Lists

Fundamentals of Web Programming

Review
• Each HTML page consists of 5 basic elements
• Each HTML element has a tag and content (optional for
some tags)
• Each HTML element can be either Paired Element or
Void Element
• HTML Elements can be either Inline or Block level
• There are different types of HTML Elements
• Text-based Elements (h1….h6, p, strong, em)
• Structure-based Elements (div, span, header, footer, nav, section,
article, aside)

Fundamentals of Web Programming 2

 Warm-up
• What are the mistakes made when front-end developer
starts to write the following HTML document?

1 3
2

4
Fundamentals of Web Programming 3
Creating Hyperlinks
• Hyperlinks: ability to link from one page to another
• A hyperlink references or links to other resources, such as
HTML5 documents and images.
• Web browsers typically underline text hyperlinks and color
them blue by default.
• Use the anchor tag <a>
• It is an inline-level element

Fundamentals of Web Programming 4

Creating Hyperlinks
• Attribute href (hypertext reference) specifies a
resource’s location (Tells the link where to go ), such as
• a web page or location within a web page
• a file
• an e-mail address
Example:
<a href=“http://www.kfu.edu.sa”>King Faisal University</a>
• When a URL does not indicate a specific document on the website, the web
server returns a default web page. This page is often called index.html, but
most web servers can be configured to use any file as the default web page for
the site.
• If the web server cannot locate a requested document, it returns an error
indication to the web browser (known as a 404 error), and the browser displays
a web page containing an error message.
Fundamentals of Web Programming 5
Paths in HTML
• The href attribute in <a> tag specifies the path to another
location
• You can specify different types of paths
Paths

Relative Absolute

Links to other pages in Links to other websites

the same website with full domain name

Fundamentals of Web Programming 6

Relative Path
/root

/img /css
/profile
index.html contact.html

logo.png bg.png style.css

/admin

main.php

admin.php

Fundamentals of Web Programming 7

Relative Path
• Accessing file within the same directory (level)
• Use the file name only in href
• <a href=“filename.ext”></a>
• Accessing file in the directory below the current one
• Use the name of the directory separated by “/” for each level
• <a href=“dir/dir2/dir3/file.ext”></a>
• Accessing file in the directory above the current one
• Use “..” to go up each level from the current level
• <a href=“../../file.ext”></a>

Fundamentals of Web Programming 8

Absolute Path
• Use the complete path of the page along with the
domain name
• Used when hyperlinking to a page on another website
• Example
• http://www.kfu.edu.sa/ar/BannerSystem/Pages/login.aspx

<a href’” http://www.kfu.edu.sa/ar/BannerSystem/Pages/login.aspx”>KFU Banner</a>

Fundamentals of Web Programming 9

Links in HREF Attribute
• To a page in the same website – Relative Paths
• To a page in another website – Absolute Paths
• Send an email
• Use the text mailto: before the email address
• <a href=“mailto:[email protected]”>Send me an email</a>
• Link to part of the page
• Remember “Back to Top”
• Mark part of the page with and id attribute (fragments)
• Use “#” before the name of each page fragment to go that part
of the page
• <a href=“#top”>Back to Top</a>

Fundamentals of Web Programming 10

Links in HREF Attribute

Fundamentals of Web Programming 11

Destination of the Hyperlink
• The anchor (<a>) tag has another important attribute
called target
• It specifies where a link opens when clicked
• Options
• On the same tab
• target=“_self”
• On a different window/tab (based on your preference)
• target=“_blank”

Fundamentals of Web Programming 12

Try Now Exercise
• Open the previous exercise done in the class
• Within the <header> element, create a <nav> element
below the h1 tag.
• Within the <nav> element, add the following links
• Objective
• Education
• Experience
• Contact
• Note: for each href, add the value “#” only (we will do
that later in the course)

Fundamentals of Web Programming 13

IMG Tag
• Displays Image on the Page
• It is a Void element (self-closing) (contains only attributes and
do not mark up text )
• It is an Inline Element
• Attribute “src”
• Includes the location of the photo or URL
• Attribute “alt”
• Displays text when image is not available
• Used also read the image description for physically challenged
(Blind) computer users
<img src=“img/kfu.png” alt=“KFU Logo”/>
• Width and height are optional attributes
 If omitted, the browser uses the image’s actual width and height
 Images are measured in pixels
Fundamentals of Web Programming 14
Using Images as Hyperlinks

 By using images as hyperlinks, you can create

graphical web pages that link to other resources.

<a href = “file.html">

<img src = "links.jpg" width = "65"
height = "50" alt = "Links">
</a>
Other Media Tags
• Audio Tag
• <audio>……..</audio>
• Adds audio to your page
• Use src attribute to specify the source of the audio file
• Video tag
• <video>……..</video>
• Adds video to your page
• Use src attribute to specify the source of the video file to play
• Note
• These tags are for information only and out of the scope of this course

Fundamentals of Web Programming 16

Nesting of Tags

• Tags also nest

• Should close them in the right order:
• The most recently opened tag should be the first
one closed

Fundamentals of Web Programming 17

 List Tags

• HTML provides for three kinds of lists

• unordered list (list with bullets beside each item)
• ordered list (list with numbers beside each item)
• definition list (lists terms and their definitions)

• Lists can be nested

• E.g. You can have an ordered list inside a definition list

Fundamentals of Web Programming 18

 Unordered List

<ul>
<li>first item</li> • first item
<li>second item</li> • second item
<li>third item</li> • third item
</ul>

• Convert the list of links on your page to be

TRY NOW as unordered lists

Fundamentals of Web Programming 19

 Ordered List

<ol>
<li>first item</li> 1. first item
<li>second item</li> 2. second item
<li>third item</li> 3. third item
</ol>

TRY NOW • Add an ordered list to your page

Fundamentals of Web Programming 20

 Summary

• HTML has different types of Elements

• Anchor Elements are used for Hyperlinking
Pages/ resources from the same website, from
different websites and even within the same
page
• Media Elements – Image, Audio, Video
• List Elements

21