1. >> HTML: Tags – Hyperlink, Media, Lists

2. Web-Based Systems - Misbhauddin
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)
Web-Based Systems - Misbhauddin

3. Web-Based Systems - Misbhauddin
Creating Hyperlinks
Hyperlinks: ability to link from one page to another
Use the anchor tag <a>
It is an inline-level element
Attribute “href”
Tells the link where to go
href stands for Hyperlink Reference
<a href=“ Faisal University</a>
Web-Based Systems - Misbhauddin

4. Web-Based Systems - Misbhauddin
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 websites with full domain name
Links to other pages in the same website
Web-Based Systems - Misbhauddin

5. Web-Based Systems - Misbhauddin
Relative Path
/root
/img
/css
/profile
index.html
contact.html
logo.png
bg.png
style.css
/admin
main.php
admin.php
Web-Based Systems - Misbhauddin

6. Web-Based Systems - Misbhauddin
Relative Path
Accessing file within the same directory (level)
Use the file name only in href
<a href=“filename.ext”
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>
Web-Based Systems - Misbhauddin

7. Web-Based Systems - Misbhauddin
Absolute Path
Use the complete path of the page along with the domain name
Used when hyperlinking to a page on another website
Example
<a href’” Banner</a>
Web-Based Systems - Misbhauddin

8. Links in HREF Attribute
To a page in the same website – Relative Paths
To a page in another website – Absolute Paths
Send an
Use the text mailto: before the address
<a me an </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>
Web-Based Systems - Misbhauddin

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”
Web-Based Systems - Misbhauddin

10. Web-Based Systems - Misbhauddin
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)
Web-Based Systems - Misbhauddin

11. Web-Based Systems - Misbhauddin
IMG Tag
Displays Image on the Page
It is a Void element (self-closing)
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”/>
Web-Based Systems - Misbhauddin

12. Web-Based Systems - Misbhauddin
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
Web-Based Systems - Misbhauddin

13. Web-Based Systems - Misbhauddin
Nesting of Tags
Tags also nest
Should close them in the right order:
The most recently opened tag should be the first one closed
Web-Based Systems - Misbhauddin

14. Web-based Systems | Misbhauddin
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
Web-based Systems | Misbhauddin

15. Web-based Systems | Misbhauddin
Unordered List
<ul>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ul>
first item
second item
third item
TRY NOW
Convert the list of links on your page to be as unordered lists
Web-based Systems | Misbhauddin

16. Web-based Systems | Misbhauddin
Ordered List
<ol>
<li>first item</li>
<li>second item</li>
<li>third item</li>
</ol>
first item
second item
third item
TRY NOW
Add an ordered list to your page
Web-based Systems | Misbhauddin

17. Web-based Systems | Misbhauddin
Definition List
<dl>
<dt>first term</dt>
<dd>its definition</dd>
<dt>second term</dt>
<dt>third term</dt>
</dl>
first term
its definition second term
its definition third term
its definition
TRY NOW
Add a definition list to your page
Web-based Systems | Misbhauddin

18. Web-Based Systems - Misbhauddin
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
Web-Based Systems - Misbhauddin