Messages
Proposals
Get Urgent Writing Help In Your Essays, Assignments, Homeworks, Dissertation, Thesis Or Coursework & Achieve A+ Grades.
Privacy Guaranteed - 100% Plagiarism Free Writing - Free Turnitin Report - Professional And Experienced Writers - 24/7 Online Support
Chapter 01.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 1
Introduction to the Internet and Web Design
3
Chapter Objectives
Define the Internet and associated key terms
Recognize Internet protocols
Discuss web browsers and identify their main features
Describe the types and purposes of websites
Plan a website for a target audience
Define a wireframe and a site map
Explain how websites use graphics, navigation tools, typography, and color
Design for accessibility and multiplatform display
Chapter 1: Introduction to the Internet and Web Design
4
4
Chapter Objectives
Define Hypertext Markup Language (HTML) and HTML elements
Recognize HTML versions and web
Identify web authoring tools
Download and use a web authoring tool
Create and view a basic HTML webpage
Chapter 1: Introduction to the Internet and Web Design
5
5
Exploring the Internet
The Internet is a worldwide collection of computers linked together for use by organizations, and individuals using communications devices and media
A node is any device, such as a computer, tablet, or smartphone, connected to a network
A network is a collection of two or more computers linked together to share resources and information
The Internet of Things describes the ever-growing number of devices connecting to a network, including televisions and appliances
Chapter 1: Introduction to the Internet and Web Design
6
6
Exploring the Internet
Data lines that connect networks allow data to move from one computer to another
The Internet backbone is a collection of high-speed data lines that connect major computer systems located around the world
An Internet Service Provider (ISP) is a company that has a permanent connection to the Internet backbone
Chapter 1: Introduction to the Internet and Web Design
7
World Wide Web
The World Wide Web, also called the web, is the service that provides access to information stored on web servers
The web consists of a collection of linked files known as webpages
A website is a related collection of webpages created and maintained by a person, company, educational institution, or other organization
Chapter 1: Introduction to the Internet and Web Design
8
8
World Wide Web
A home page is the first document users see when they access a website
A hyperlink, commonly called a link, is an element that connects one webpage to another webpage on the same server or to any other web server in the world
Chapter 1: Introduction to HTML, XHTML, and CSS
9
World Wide Web
Chapter 1: Introduction to the Internet and Web Design
10
Source: www.ed.gov
This figure explains the appearance of a website.
The first section reads “U.S. Department of Education”. A rectangular box labeled “home page” is positioned next to the first section. An arrow originating from the first rectangular box points to the first section.
The second section shows 4 sub sections that reads “Student Loans”, “Grants”, “Laws” and “Data”. A rectangular box labeled “links indicate purpose of website” is positioned to the left of the second section. An arrow originating from the second rectangular box points to the second section.
The third section reads “How Do I Find” under which there is a list of key terms that provides information that is available on the website. A rectangular box labeled “links to content on the website” is positioned to the right of the third section. An arrow originating from the third rectangular box points to the third section.
10
Protocols
A protocol is a set of rules that defines how a client workstation can communicate with a server
A server is the host computer that stores resources and files for websites
Hypertext Transfer Protocol (HTTP) is a set of rules for exchanging text, graphics, audio, video, and other multimedia files on the web
File Transfer Protocol (FTP) is used to exchange files from one computer to another over the Internet
This protocol does not provide a way to view a webpage
Chapter 1: Introduction to the Internet and Web Design
11
11
Protocols
Transmission Control Protocol/Internet Protocol (TCP/IP) is a pair of protocols used to transfer data efficiently over the Internet by properly routing it to its destination
Internet Protocol (IP) ensures data is sent to the correct location
The Domain Name System (DNS) associates an IP address with a domain name
Chapter 1: Introduction to the Internet and Web Design
12
Web Browsers
A web browser is a program that interprets and displays Web pages and enables you to view and interact with a Web page
Microsoft Internet Explorer, Mozilla Firefox, Google Chrome, and Apple Safari
A Uniform Resource Locator (URL) is the address of a document or other file accessible on the Internet
http://www.cengagebrain.com/shop/index.html
A domain is an area of the Internet a particular organization or person manages.
Chapter 1: Introduction to the Internet and Web Design
13
13
Web Browsers
Chapter 1: Introduction to the Internet and Web Design
14
This figure explains the URL in a browser’s address bar.
The first part of the URL reads “http://”. A rectangular box labeled “protocol” is positioned above the URL. An arrow originating from the first rectangular box points to the first part of the URL.
The second part of the URL reads ”www”. A rectangular box labeled “subdomain” is positioned above the URL. An arrow originating from the second rectangular box points to the second part of the URL.
The third part of the URL reads “cengagebrain.com”. A rectangular box labeled “server or domain name” is positioned above the URL. An arrow originating from the third rectangular box points to the third part of the URL.
The fourth part of the URL reads “/shop”. A rectangular box labeled “webpage location” is positioned above the URL. An arrow originating from the fourth rectangular box points to the fourth part of the URL.
The fifth part of the URL reads “/index.html”. A rectangular box labeled “webpage file name” is positioned above the URL. An arrow originating from the fifth rectangular box points to the fifth part of the URL.
The URL “http:// www. cengagebrain.com/shop/index.html” is entered in the address bar. A rectangular box labeled “URL” is positioned below the address bar. An arrow originating from the sixth rectangular box points to the URL in the address bar.
14
Types of Websites
An Internet site is another term for a website that is generally available to anyone with an Internet connection
An intranet is a private network that uses Internet technologies to share company information among employees
An extranet is a private network that uses Internet technologies to share business information with select corporate partners or key customers
Chapter 1: Introduction to the Internet and Web Design
15
15
Types of Websites
Many company websites also support electronic commerce (e-commerce), which is the buying and selling of goods and services on the Internet
Educational institutions use a Learning Management System (LMS) to simplify course management
An LMS is a web-based software application designed to facilitate online learning
Chapter 1: Introduction to the Internet and Web Design
16
Planning a Website
Purpose of the website — The purpose of a commercial business website is related to the goal of selling products or services
Target Audience — The people who use the website are known as the target audience
Knowing their general demographic background will help to design a website appropriate for them
Multiplatform Display —A responsive design of a website must be created that provides an optimal viewing experience across a range of devices
Chapter 1: Introduction to the Internet and Web Design
17
Wireframe
A wireframe is a simple, visual guide that clearly identifies the location of main webpage elements
Active white space is an area on the page that is intentionally left blank
Passive white space is the space between content areas
Helps a user focus on one part of the page
Chapter 1: Introduction to the Internet and Web Design
18
Wireframe
Chapter 1: Introduction to the Internet and Web Design
19
The image describes a wireframe sketch for webpages, using lines and boxes.
The first layer of the wireframe consists of a square box and a horizontal rectangular box. The first square box reads “Logo”. A rectangular box labeled “appealing graphic or text” is positioned to the left of the square box. An arrow originating from the rectangular box points to the square box. The horizontal rectangular box reads “Navigation”. A second rectangular box labeled “tabs or buttons with short text links for navigating site” is positioned to the right of the horizontal rectangular box. An arrow originating from the second rectangular box points to the horizontal rectangular box.
The image shows space between the first and the second layers of the wireframe. A rectangular box labeled “passive white space” is positioned to the left of the space in the image. An arrow originating from the third rectangular box points to the space.
The second layer of the image consists of a second horizontal rectangular box. A rectangular box labeled “heading or advertisement” is positioned to the left of the second horizontal rectangular box. An arrow originating from the fourth rectangular box points to the second horizontal rectangular box.
The image shows space between the second and the third layers of the wireframe. A rectangular box labeled “passive white space” is positioned to the left of the space in the image. An arrow originating from the fifth rectangular box points to the space.
The third layer of the image consists of a three vertically elongated rectangular boxes and one big square box. Two of the vertically elongated rectangular boxes are placed top and bottom to the left of the big square box. They read “Image”. The big square text box reads “Text area”. A rectangular box labeled “headings and main written content” is positioned to the left of the space in the image. An arrow originating from the sixth rectangular box points to the big square box in the center. The third vertically elongated rectangular box to the top right of the big square box read “Article”. A rectangular box labeled ”content related to main content” is positioned to the right of the third vertically elongated rectangular box. An arrow originating from the seventh rectangular box points to the vertically elongated rectangular box labeled “Article”. There is blank space below the third vertically elongated rectangular box. A rectangular box labeled “active white space” is positioned to the right of the image. An arrow originating from the eighth rectangular box points to the blank space below the box labeled “Article”.
The fourth layer of the wireframe consists of a horizontal rectangular box. A horizontal rectangular box reads “Footer”. A rectangular box labeled “legal matter and contact details” is positioned to the left of the horizontal rectangular box. An arrow originating from the ninth rectangular box points to the horizontal rectangular box.
19
Site Map
A site map is a planning tool that lists or displays all the pages on a website and indicates how they are related to each other
It shows the structure of a website
Chapter 1: Introduction to the Internet and Web Design
20
Site Map
A linear website structure connects webpages in a straight line
Chapter 1: Introduction to the Internet and Web Design
21
The image explains a linear structured webpage.
The first rectangular box reads “Home Page”.
A second rectangular box to the right of the first rectangular box is labeled “Training module 1”. A bi-directional arrow is positioned between the first rectangular box and the second rectangular box.
A third rectangular box to the right of the second rectangular box is labeled “Training module 2”. A bi-directional arrow is positioned between the second rectangular box and the third rectangular box.
A fourth rectangular box to the right of the third rectangular box is labeled “Training module 3”. A bi-directional arrow is positioned between the third rectangular box and the fourth rectangular box.
21
Site Map
In a variation of a linear website structure, each page can include a link to the home page of the website
Chapter 1: Introduction to the Internet and Web Design
22
The image explains a webpage that has a linear structure with home page links.
The first line consists of a rectangular box that reads “Home Page”.
The first box in the second line is labeled “Training module 1”. A bi-directional arrow is placed between the first rectangular box in the first line and second rectangular box in the second line.
The second line consists of a rectangular box labeled “Training module 2” positioned to the right of the first rectangular box in the second line. A bi-directional arrow is placed between the first rectangular box and the second rectangular box.
A rectangular box labeled “Training module 3” is positioned to the right of the second rectangular box. A bi-directional arrow is placed between the second rectangular box and the third rectangular box. Another bi-directional arrow is placed between the first rectangular box in the first line and the third rectangular box in the second line.
22
Site Map
A hierarchical website connects webpages in a treelike structure
Chapter 1: Introduction to the Internet and Web Design
23
The image describes a hierarchical structure of a webpage.
The first line consists of the first rectangular box that reads “Home Page”.
The second line consists of a second rectangular box that is labeled “Training module 1 introduction”. A third rectangular box to the right of the second rectangular box is labeled “Training module 2 introduction”. A fourth rectangular box to the right of the third rectangular box is labeled “Training module 3 introduction”. A bi-directional arrow originating from the first rectangular box points to the second rectangular box, third rectangular box, and fourth rectangular box.
The third line consists of a fifth rectangular box labeled “Training module 1 page 1”. A bi-directional arrow is positioned between the second and the fifth rectangular boxes. A sixth rectangular box labeled “Training module 2 page 1” is positioned to the right of the fifth rectangular box. A bi-directional arrow is positioned between the third and the sixth rectangular boxes. A seventh rectangular box labeled “Training module 3 page 1” is positioned to the right of the sixth rectangular box. A bi-directional arrow is positioned between the fourth and the seventh rectangular boxes.
The fourth line consists of an eighth rectangular box labeled “Training module 1 page 2” positioned below the fifth rectangular box. A bi-directional arrow is positioned between the second, fifth, and the eighth rectangular boxes. A ninth rectangular box labeled “Training module 2 page 2” is positioned to the right of the eighth rectangular box and below the sixth rectangular box. A bi-directional arrow is positioned between the third, sixth, and the ninth rectangular boxes. A tenth rectangular box labeled “Training module 3 page 2” is positioned to the right of the ninth rectangular box and below the seventh rectangular box. A bi-directional arrow is positioned between the fourth, seventh, and the tenth rectangular boxes.
23
Site Map
A webbed website structure has no set organization
Chapter 1: Introduction to the Internet and Web Design
24
The image describes a webpage that has a webbed structure.
The first line consists of a rectangular box that is labeled “Training module 1 page 1”. A second rectangular box positioned to the right of the first rectangular box reads “Home Page”. A bi-directional arrow is positioned between the first and the second rectangular boxes. A third rectangular box positioned to the right of the second rectangular box is labeled “Training module 3 page 1”. A bi-directional arrow is positioned between the second and the third rectangular boxes.
The second line consists of a fourth rectangular box labeled “Training module 1 introduction”. A bi-directional arrow is positioned between the first rectangular, third box second rectangular box. A fifth rectangular box labeled “Training module 3 introduction” is positioned to the right of the fourth rectangular box. A bi-directional arrow is positioned between the second rectangular box and the third rectangular box.
The third line consists of a sixth rectangular box labeled “Training module 1 page 2”. A bi-directional arrow is positioned between the first rectangular box and the fourth rectangular box. A seventh rectangular box labeled “Training module 2 introduction” is positioned to the right of the sixth rectangular box. A bi-directional arrow is positioned between the fourth rectangular box, second rectangular box, fifth rectangular box, and the sixth rectangular box. A rectangular box labelled “Training module 3 page 2” is positioned to the right of the seventh rectangular box. A bi-directional arrow is positioned between the seventh rectangular box, fifth rectangular box, and the third rectangular box.
24
Graphics
Graphics add visual appeal to a webpage and enhance the visitor’s perception of the products and services
Chapter 1: Introduction to the Internet and Web Design
25
This figure explains the website for Pret A Manger that displays a new product and which serves as the focal point on the website.
The first rectangular section reads “Pret A Manager”.
The second rectangular section consists of nine sub sections that read “HOME”, “OUR MENU”, “FIND A PRET”, “ORDER ONLINE”, “PRET CARD”, “JOBS”, “ABOUT US”, “CONTACT”, and “SIGN UP”.
The third rectangular section consists of three sub sections. The first vertically rectangular sub section reads “PRET’S HOT”. A rectangular box positioned to the left of the first sub section is labeled “graphic reflects the company’s brand”. The second squared sub section reads “PROSCUITTO”. A second rectangular box positioned to the left of the image is labeled “primary graphic highlights new product”. An arrow originating from the second rectangular box points to the second sub section. The third sub section reads “STRAIGHT FROM THE OVEN”.
The fourth section consists of five sub sections that read “TODAY’S SOUP”, “CHEF’S SPECIAL”, “AUTUMN MENU”, “COFFEE”, and “WE’RE HIRING”. A rectangular box positioned to the bottom-left of the image is labeled “additional eye-catching graphics serve as navigational links”. An arrow originating from the third rectangular box points to the third sub section.
25
Navigation
The navigation of a website should be clear and concise
Each webpage should have a designated navigation area with links to other pages in the site
The navigation area should be prominent and easy to use
Chapter 1: Introduction to the Internet and Web Design
26
Typography
The use of effective typography, or fonts and font styles, enhances the visual appeal of a website
Typography also should promote the purpose and goal of the website
Chapter 1: Introduction to the Internet and Web Design
27
Color
The combination of colors contributes to the appeal and legibility of the website
Aim to strike a balance among the background color, text color, and the color that represents a brand
Colors convey meanings
Chapter 1: Introduction to the Internet and Web Design
28
This table has nine rows and two columns. The first cell in the first row of the first column is titled as Color. Following information is given under this column.
Row 2: Red
Row 3: Blue
Row 4: Green
Row 5: Yellow
Row 6: Orange
Row 7: Brown
Row 8: Black
Row 9: White
The second column in the first row is titled as Common Meaning. Following information is given under this column.
Row 2: Love, romance, anger, energy
Row 3: Trust, loyalty, integrity, honesty, dependability
Row 4: Freshness, friendliness, health, safety, strength
Row 5: Warmth, cheer, joy, excitement, humor
Row 6: Energy, warmth, health
Row 7: Nature, wholesomeness, simplicity, friendliness
Row 8: Elegance, tradition, sophistication, formality
Row 9: Purity, honesty, sincerity, cleanliness
28
Accessibility
A web designer should create pages for viewing by a diverse audience, including people with physical impairments and global users
The World Wide Web Consortium (W3C) develops and maintains web standards, language specifications, and accessibility recommendations.
Chapter 1: Introduction to the Internet and Web Design
29
Planning Checklist
Navigation, typography, color, and accessibility are the basic web page design criteria to consider when developing a website
A sophisticated website requires additional design considerations and research of the business, its competition, and a complete business analysis
Chapter 1: Introduction to the Internet and Web Design
30
Planning Checklist
Chapter 1: Introduction to the Internet and Web Design
31
This table has nine rows and two columns. The first cell in the first row first column is titled as Topic. Following information is given under this column.
Row 2: Purpose of the website
Row 3: Target audience
Row 4: Multiplatform display
Row 5: Site map
Row 6: Wireframe
Row 7: Graphics
Row 8: Color
Row 9: Typography
Row 10: Accessibility
The second column in the first row is titled as Web Designer Questions. Following information is given under this column.
Row 2: What is the purpose and goal of the website? What is the organization’s mission statement?
Row 3: Describe the target audience (age, gender, demographics). What information is the most pertinent to the users?
Row 4: Will you design for display on multiple platforms or focus only on a desktop or mobile design?
Row 5: How many webpages will be included in the website? How will the webpages be organized? What type of website structure is appropriate for the content?
Row 6: What features will be displayed on each webpage?
Row 7: What graphics will you use on the website?
Row 8: What colors will you use within the site to enhance the purpose and the brand?
Row 9: What font styles will you use within the website?
Row 10: How will the website accommodate people with disabilities?
31
Understanding the Basics of HTML
Webpages are created using Hypertext Markup Language (HTML), which is an authoring language used to create documents for the web
HTML consists of a set of special instructions called tags to define the structure and layout of content in a webpage
The HTML tags define or “mark up” the content on the webpage, due to which it is considered a markup language rather than a traditional programming language
Chapter 1: Introduction to the Internet and Web Design
32
32
HTML Elements and Attributes
A webpage is a text file that contains both content and HTML tags and is saved as an HTML document
An HTML element consists of everything from the start tag to the end tag
HTML elements can be enhanced by using attributes, which define additional characteristics, or properties, of an element
Chapter 1: Introduction to the Internet and Web Design
33
HTML Elements and Attributes
Chapter 1: Introduction to the Internet and Web Design
34
The figures explains the anatomy of HTML elements in the text editor, Notepad++
The first line in the document reads . The first rectangular box positioned to the left of the image is labeled “html start tag”. The arrow originates from the first rectangular box and points to “ The second line reads “
The third line reads “
The fifth line reads “”.
The seventh line reads “”. The seventh rectangular box positioned at the bottom of the image is labeled “html end tag”. An arrow originates from the seventh rectangular box and points to “