HTML & CSS: Chapter 03

Enhancing a Website with
Links and Images
Web Design with
HTML5 & CSS3
8th Edition

• 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

• 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 Objectives (continued)

• 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
Adding Links to a Webpage

• 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
Adding Links to a Webpage
(continued)

• 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
Anchor element

• 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
Relative link

Relative link (continued)
• The Figure 3-2 shows an example of a relative 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
Absolute link

Absolute link (continued)
• The Figure 3-3 shows an example of an absolute
link

• Images can be used to link to another page within
the site, another website, an email address, or a
telephone number
Image 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
Email link

• The Figure 3-5 shows an example of an email link
Email link (continued)

• 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
Telephone link

Telephone link (continued)
• The Figure 3-7 shows an example of a telephone
link

• 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
Adding Images to a Website

• Image files are created in several formats such as:
– Graphics Interchange Format (GIF) – It supports
transparency and frame animation
oLossless 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
Image File Formats

– Joint Photographic Experts Group (JPG or JPEG) – It is
a standard file format for digital photos
oLossy 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
Image File Formats (continued)

Image File Formats (continued 1)

• 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
Image Dimensions and File Size

• <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
Image Tag and Its Attributes

(continued)

(continued 1)
• The Figure 3-34 shows an example of an image
tag with attributes

• 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
Div element

Div element (continued)
• The Figure 3-41 shows a wireframe with four div
elements inside the main element

• 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
Div attributes

Div attributes (continued)
• The Figure 3-43 shows the revised wireframe with
the div element and id attribute value defined as
container

• 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
Class Attributes

• 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
Adding Headings and Lists

• 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
(continued)

• The following code creates a bulleted list of two
items:
<ul>
<li>First item</li>
<li>Second item</li>
</ul>
(continued 1)

– 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>
(continued 2)

• The Figure 3-50 shows a webpage with an
unordered and an ordered list
(continued 3)

• 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
(continued 4)

• 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>
(continued 5)

(continued 6)
• The Figure 3-51 shows an example of a
description list

• 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)
To Validate Webpages

– 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
To Validate Webpages
(continued)

To Validate Webpages (continued
2)

Chapter 3 Complete
HTML
8th Edition

HTML & CSS: Chapter 03

Recommended

More Related Content

What's hot (20)

Viewers also liked (19)

Similar to HTML & CSS: Chapter 03 (20)

More from Steve Guinan (20)

Recently uploaded (20)

HTML & CSS: Chapter 03