Web Design with
HTML5 & CSS3
8th Edition
Enhancing a Website with
Links and Images
Chapter Objectives
• Describe types of hyperlinks
• Create relative links, absolute links, email links,
and telephone links
• Describe image file formats
• Describe the image tag and its attributes
• Add images to a website
• Explain div elements and attributes
Chapter 3: Creating Web Pages with Links, Images 2
Chapter Objectives (continued)
• Use a div element to mark a page division
• Define the class attribute
• Describe and use HTML heading tags
• Describe the types of lists in an HTML document
• Create an unordered list and a description list
• Test and validate links on a webpage
Chapter 3: Creating Web Pages with Links, Images 3
Adding Links to a Webpage
• Hyperlink – It is a link on a webpage that allows
users to navigate a website and move from one
page to another
• Link – It is text, an image, or other webpage
content that visitors tap or click to instruct the
browser to go to a location in a file
• Text link – When text is coded as a hyperlink, it
appears as underlined text in a color different
from the rest of the webpage text
Chapter 3: Creating Web Pages with Links, Images 4
Adding Links to a Webpage
(continued)
• Text link is also known as hypertext link
• Image link – It is used to indicate an image as a
link and some websites display a border around
the image
Chapter 3: Enhancing a Website with Links and Images 5
Anchor element
• It is used to create a hyperlink on a webpage
• The <a> and </a> are the start and the end tags
• Include the href attribute in the starting anchor
tag to identify the webpage, email address, file,
telephone number, or other content to access
• The value of the href attribute is the content for
a link
Chapter 3: Creating Web Pages with Links, Images 6
Relative link
• It is a hyperlink that links to other webpages
within the same website
• It is created by using an anchor tag with an href
attribute that designates the file name of the
webpage or the path and the file name of the
webpage
Chapter 3: Creating Web Pages with Links, Images 7
Relative link (continued)
• The Figure 3-2 shows an example of a relative link
Chapter 3: Creating Web Pages with Links, Images 8
Absolute link
• It is a hyperlink that links to other webpages
outside of a website
• It is created using an anchor element with an
href attribute that designates a website URL
Chapter 3: Creating Web Pages with Links, Images 9
Absolute link (continued)
• The Figure 3-3 shows an example of an absolute
link
Chapter 3: Enhancing a Website with Links and Images 10
Image link
• Images can be used to link to another page within
the site, another website, an email address, or a
telephone number
Chapter 3: Enhancing a Website with Links and Images 11
Email link
• It is a hyperlink that links to an email address
• Use anchor elements to link to an email address
by including the href attribute followed by
"[Link] and then the email address
Chapter 3: Creating Web Pages with Links, Images 12
Email link (continued)
• The Figure 3-5 shows an example of an email link
Chapter 3: Enhancing a Website with Links and Images 13
Telephone link
• It is a hyperlink that links to a telephone number
• Use an anchor element to link to a telephone
number by including the href attribute, followed
by "[Link] where +1 is the international
dialing prefix and number is the phone number
Chapter 3: Creating Web Pages with Links, Images 14
Telephone link (continued)
• The Figure 3-7 shows an example of a telephone
link
Chapter 3: Enhancing a Website with Links and Images 15
Adding Images to a Website
• Images include photos, drawings, diagrams,
charts, and other graphics that convey visual
information
• Images should support the purpose of the
webpage or illustrate the content
Chapter 3: Creating Web Pages with Links, Images 16
Image File Formats
• Image files are created in several formats such as:
– Graphics Interchange Format (GIF) – It supports
transparency and frame animation
o Lossless compression – To compress an image, GIF
uses this technique to maintain the file’s color
information
– Portable Network Graphics (PNG) – It supports
transparency, but not animation
Chapter 3: Creating Web Pages with Links, Images 17
Image File Formats (continued)
– Joint Photographic Experts Group (JPG or JPEG) – It is
a standard file format for digital photos
o Lossy compression – To reduce file size, this
technique is used to discard some of the color
information in the image
– Scalable Vector Graphics (SVG) – It is a format that
uses markup language to create two-dimensional
graphics, images, and animations
Chapter 3: Enhancing a Website with Links and Images 18
Image File Formats (continued 1)
Chapter 3: Creating Web Pages with Links, Images 19
Image Dimensions and File Size
• Pixel – It is the smallest element of light or color
on a device displaying images
• The common resolution for laptops is 1366 x 768
pixels
• The disadvantage of an image with a high
resolution is that it also has a large file size
• Use graphic or photo editors to optimize an image
with a large file size to reduce its file size and load
time
Chapter 3: Creating Web Pages with Links, Images 20
Image Tag and Its Attributes
• <img> – The image tag is an empty HTML tag used
to add an image to a webpage
• The image tag includes attributes such as:
– src – It identifies the image file being inserted
– alt – It specifies alternate text in case the image
cannot be displayed in a browser
– height – It defines the height of an image in pixels
– width – It defines the width of an image in pixels
Chapter 3: Creating Web Pages with Links, Images 21
Image Tag and Its Attributes
(continued)
Chapter 3: Creating Web Pages with Links, Images 22
Image Tag and Its Attributes
(continued 1)
• The Figure 3-34 shows an example of an image tag
with attributes
Chapter 3: Creating Web Pages with Links, Images 23
Div element
• Div element defines an area or a division in a
webpage
• It uses the <div> and </div> tags
• It can be used within the main element to further
divide the primary content area into separate
sections
Chapter 3: Creating Web Pages with Links, Images 24
Div element (continued)
• The Figure 3-41 shows a wireframe with four div
elements inside the main element
Chapter 3: Creating Web Pages with Links, Images 25
Div attributes
• Div elements have attributes that provide
information about the element
• The id is a div attribute which identifies a unique
area on a webpage and distinguishes it from other
page divisions
Chapter 3: Creating Web Pages with Links, Images 26
Div attributes (continued)
• The Figure 3-43 shows the revised wireframe with
the div element and id attribute value defined as
container
Chapter 3: Creating Web Pages with Links, Images 27
Class Attributes
• A class attribute name can be applied to more
than one div or other HTML element on a
webpage
• The Figure 3-48 shows an example of a class attribute
used within an image tag
Chapter 3: Enhancing a Website with Links and Images 28
Adding Headings and Lists
• Heading elements – They provide a title or
heading before a paragraph of text or section of a
page
• Heading levels – There are 6 levels of headings,
with level 1 being the most important and level 6
the least
Chapter 3: Creating Web Pages with Links, Images 29
Adding Headings and Lists
(continued)
• List – It structures text into an itemized format
• The different types of lists are:
– Unordered list
• It displays each item of information in no specific
sequence
• The <ul> and </ul> are the start and end tags for an
unordered list
• <li> and </li> are the start and end list item tags
Chapter 3: Creating Web Pages with Links, Images 30
Adding Headings and Lists
(continued 1)
• The following code creates a bulleted list of two
items:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
Chapter 3: Enhancing a Website with Links and Images 31
Adding Headings and Lists
(continued 2)
– Ordered list
• It displays information in a series using numbers or letters
• The <ol> and </ol> are the start and end tags for an
ordered list
• <li> and </li> are the start and end list item tags
• The following code creates a numbered list of two items:
<ol>
<li>First item</li>
<li>Second item</li>
</ol>
Chapter 3: Enhancing a Website with Links and Images 32
Adding Headings and Lists
(continued 3)
• The Figure 3-50 shows a webpage with an
unordered and an ordered list
Chapter 3: Creating Web Pages with Links, Images 33
Adding Headings and Lists
(continued 4)
• A description list contains terms and descriptions
• The <dl> and </dl> are the start and end tags for a
description list
• Each term is marked within a pair of <dt> and
</dt> tags
• Each description or definition is marked between
a pair of <dd> and </dd> tags
Chapter 3: Enhancing a Website with Links and Images 34
Adding Headings and Lists
(continued 5)
• The following code creates a description list of two
terms and definitions:
<dl>
<dt>First term</dt>
<dd>First definition</dd>
<dt>Second term</dt>
<dd>Second definition – part 1</dd>
<dd>Second definition – part 2</dd>
</dl>
Chapter 3: Enhancing a Website with Links and Images 35
Adding Headings and Lists
(continued 6)
• The Figure 3-51 shows an example of a
description list
Chapter 3: Creating Web Pages with Links, Images 36
To Validate Webpages
• Perform the following steps to validate an HTML
document:
– Open a browser and type
[Link] in the address bar to
display the W3C validator page
– Tap or click the Validate by File Upload tab to display
the Validate by File Upload tab information
– Tap or click the Check button to send the document
through the validator and display the validation results
page (as shown in slide 36)
Chapter 3: Enhancing a Website with Links and Images 37
To Validate Webpages
(continued)
– Correct the errors if any, save the changes, and run the
file through the validator again to revalidate the page
– Perform the above steps to validate HTML pages and
correct any errors
– Close the browser, and then close the HTML text
editor
Chapter 3: Enhancing a Website with Links and Images 38
To Validate Webpages
(continued 2)
Chapter 3: Enhancing a Website with Links and Images 39
HTML
8 Edition
th
Chapter 3 Complete