>> 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
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
3
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
4
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
the same website
Links to other websites
with full domain name
Fundamentals of Web Programming
5
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
6
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
7
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
8
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:mmkhan@kfu.edu.sa”>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
9
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
10
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
11
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
12
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
14
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
15
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
16
Unordered List
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
TRY NOW
• first item
• second item
• third item
• Convert the list of links on your page to be
as unordered lists
Fundamentals of Web Programming
17
Ordered List
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
TRY NOW
1. first item
2. second item
3. third item
• Add an ordered list to your page
Fundamentals of Web Programming
18
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
19