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
"mailto:" 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 "tel:+1number" 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
http://validator.w3.org/ 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