Web Page Design- Content Analysis
wostinabin2
Chapter03.pptx
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
Kent Institute Australia Pty. Ltd.
ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051
1
Resource Material
Web Design with HTML & CSS3: Comprehensive, 8th Edition
Jessica Minnick; Lisa Friedrichsen
ISBN-10: 1305578163 | ISBN-13: 9781305578166 © 2017
Cengage Learning Australia
2
2
Chapter 3
Enhancing a Website with Links and Images
3
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
4
4
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
5
5
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
6
6
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
7
7
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
8
8
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
9
9
Relative link (continued)
The Figure 3-2 shows an example of a relative link
Chapter 3: Creating Web Pages with Links, Images
10
10
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
11
11
Absolute link (continued)
The Figure 3-3 shows an example of an absolute link
Chapter 3: Enhancing a Website with Links and Images
12
12
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
13
13
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
14
Email link (continued)
The Figure 3-5 shows an example of an email link
Chapter 3: Enhancing a Website with Links and Images
15
15
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
16
Telephone link (continued)
The Figure 3-7 shows an example of a telephone link
Chapter 3: Enhancing a Website with Links and Images
17
17
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
18
18
Image File Formats
Image files are created in several formats such as:
Graphics Interchange Format (GIF) – It supports transparency and frame animation
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
19
19
Image File Formats (continued)
Joint Photographic Experts Group (JPG or JPEG) – It is a standard file format for digital photos
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
20
20
Image File Formats (continued 1)
Chapter 3: Creating Web Pages with Links, Images
21
21
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
22
22
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
23
Image Tag and Its Attributes (continued)
Chapter 3: Creating Web Pages with Links, Images
24
24
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
25
25
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
26
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
27
27
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
28
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
29
29
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
30
30
Div id and class
ids are unique
Each element can have only one id
Each page can have only one element with that id
classes are NOT unique
You can use the same class on multiple elements.
You can use multiple classes on the same element.
Chapter 3: Enhancing a Website with Links and Images
31
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
32
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
33
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
34
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
35
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
36
36
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
37
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
38
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
39
39
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
40
40
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
41
41
To Validate Webpages (continued 2)
Chapter 3: Enhancing a Website with Links and Images
42
42
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
Kent Institute Australia Pty. Ltd.
ABN 49 003 577 302 CRICOS Code: 00161E RTO Code: 90458 TEQSA Provider Number: PRV12051
43
Chapter E3
Website standards and accessibility
44
Learning Outcomes
45
Describe the evolution of the Internet and the Web
Explain the need for web standards
Describe universal design
Identify benefits of accessible web design
Identify reliable resources of information on the Web
Identify ethical use of the Web
Describe the purpose of web browsers and web servers
Identify Internet protocols
Define URIs and domain names
Describe XHTML and HTML
The Evolution of the Internet
46
Internet
Interconnected network of computer networks
ARPAnet
Advanced Research Project Agency
1969 – four computers connected
NSFnet
National Science Foundation
Use of the Internet was originally limited to government, research and academic use
1991 Commercial ban lifted
Reasons for Internet Growth in the 1990s
47
Removal of the ban on commercial activity
Development of the World Wide Web by Tim Berners-
Lee at CERN
Development of Mosaic, the first graphics-based web
browser at NCSA
Convergence of technologies:
Affordable personal computers with GUI Operating Systems
Affordable Internet service providers
The World Wide Web
48
The graphical user interface to information stored on some of the computers connected to the Internet.
Web Standards
and the W3C Consortium
49
W3C – World Wide Web Consortium
Develops recommendations and prototype technologies related to the Web
Produces specifications, called Recommendations,
in an effort to standardize web technologies
WAI – Web Accessibility Initiative
Web Accessibility
50
“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.” – Tim Berners-Lee
Accessible Websites
provide accommodations that help individuals
to individuals with visual, auditory, physical,
and neurological disabilities overcome barriers
WAI – Web Accessibility Initiative
Develops accessibility recommendations
WCAG 2.0
Web Content Accessibility Guidelines
Web Accessibility
51
Section 508 of the Rehabilitation Act
Requires that government agencies must give individuals with disabilities access to information technology that is comparable to the access available to others
Universal Design
52
“The design of products and environments to be usable by all people, to the greatest extent possible, without the need for adaptation or specialized design.”
– The Center for Universal Design
I
Information on the Web
53
Reliability and information
Evaluate the credibility of the site
Ethical use of information
Copyright and the Web
Summary
54
This chapter provided a brief overview of Internet, Web, and introductory networking concepts.
kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051
55
55
