Module 6: Inserting

Hyperlinks
HTML Hyperlinks
• A hyperlink or link is a word, phrase or image that
a user can click on to jump to a new document or a
new section within the current document.
• Links are found in nearly all web pages. Links allow
users to click their way from page to page.
• Links are defined with the <a> and </a> tags.
• The href attribute is used specify the destination
address of the link.
Activity 23
The target attribute
• The target attribute specifies where to open the
link document.
• _blank – opens the link document in a new
window or tab
• _self – opens the link in the same window/tab as it
was clicked (default)
Activity 24
Image as links
• Images can also be used as links, just put them
inside the <a> and </a> tags.
• The border=0 property can be used to avoid
displaying borders around the image.
Activity 25
Creating bookmark links
• HTML bookmarks are used to allow readers to
jump to specific parts of a web page.
• Bookmarks can be useful if a web page is very
long.
• Bookmarks are created using the id attribute.
• IDs are called by adding the pound (#) symbol to
the ID name.
Activity 26
Activity 26
Laboratory
Exercise 11
Inserting Hyperlinks
Instructions
• Create a new HTML file and save it as
laboratory11.html
• The title should be “Laboratory 11”
• Create a <h1> heading that will display “Most
Popular Web Browsers”
• The heading should be written in “Arial” font.
• Insert the 6 browser logos as shown on the next
slide.
• All logos are sized 150px for height and width.
• A new html will be shown once any of the logos
were clicked. (ex. Laboratory11-chrome.html will
be shown once the logo of chrome is clicked).
• A total of 6 additional html files shall be created,
showing one browser per html file.
Instructions
• All additional files will be named laboratory11-
xx.html (xx is the browser it describes ex.
laboratory11-edge.html)
• All titles should be the browser it describes
• An <h1> heading shall be created showing the
name of the browser.
• The heading must be centered and written using
the “century gothic” font.
Instructions
• The browser’s logo shall be inserted after the
header.
• The logo should be centered and should be 300px
in height and width.
• A paragraph that describes the browser will come
after the image.
• All the browser’s names and developers should be
written in bold font.
Instructions
• The paragraph should be “fully justified” with a
50px indentation and should be written in
“verdana” font.
• An <h4> header showing “Back to main page”
shall be created.
• The header should be centered and should redirect
the user to the main page (laboratory11.html)
once clicked.