>> 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
