Web Page Design- Content Analysis
wostinabin2
Chapter02.pptx
WPDD202: Webpage Design & Development
Version 2 – 18th December 2015
‹#›
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
Chapter 2 Building a Webpage Template with HTML5
‹#›
2
Chapter 2
Building a Webpage Template with HTML5
‹#›
3
Objectives
Explain how to manage website files
Describe and use HTML5 semantic elements
Determine the elements to use when setting the structure of a webpage
Design and build a semantic wireframe
Create a webpage template
Insert comments in an HTML document
Chapter 2 Building a Webpage Template with HTML5
‹#›
4
Objectives (continued)
Add static content to a webpage template
Insert symbol codes and other character entities
Describe the benefits of validating web documents
Validate an HTML template
Create a home page from an HTML template
Add unique content to a webpage
Chapter 2 Building a Webpage Template with HTML5
‹#›
Designing a Website
Designing a website includes the following:
Planning
Articulating the website’s purpose
Identifying the target audience
Creating a site map and wireframe
Selecting graphics and colors to use in the site
Determining whether to design for an optimal viewing experience across a range of devices
Chapter 2 Building a Webpage Template with HTML5
‹#›
Designing a Website (continued)
Chapter 2 Building a Webpage Template with HTML5
‹#›
7
Site Map
Site map indicates how the pages in a website relate to each other
For example, the webpages of the Forward Fitness Club website will include the following content:
Home page: Introduces the fitness center and its mission statement
About Us page: Showcases the facility’s equipment and services
Chapter 2 Building a Webpage Template with HTML5
‹#›
Site Map (continued 1)
Classes page: Includes a schedule of available group training and fitness classes
Nutrition page: Provides nutrition tips and simple meal plans
Contact Us page: Provides a phone number, email address, physical address, and form for potential clients to request additional information about the fitness center’s services
Chapter 2 Building a Webpage Template with HTML5
‹#›
Site Map (continued 2)
Chapter 2 Building a Webpage Template with HTML5
‹#›
10
Wireframe
Wireframe depicts the layout of a webpage, including its major content areas
Chapter 2 Building a Webpage Template with HTML5
‹#›
11
File Management
Websites use several types of files, including HTML files, image files, media such as audio and video files, and CSS files
Each site must follow a systematic method to organize its files
The main folder, also called the root folder, contains all files and other folders for the website
Chapter 2 Building a Webpage Template with HTML5
‹#›
File Management (continued)
Chapter 2 Building a Webpage Template with HTML5
‹#›
13
Using HTML5 Semantic Elements
Chapter 2 Building a Webpage Template with HTML5
‹#›
14
Using HTML5 Semantic Elements (continued 1)
Chapter 2 Building a Webpage Template with HTML5
‹#›
15
Creating a Webpage Template Document
The following steps create a basic webpage template:
Open an editor, tap or click File on the menu bar, and then tap or click New to open a new blank document
Tap or click File on the menu bar and then tap or click Save As to display the Save As dialog box
Navigate to the fitness folder and then double-tap or double-click the template folder to open it
Chapter 2 Building a Webpage Template with HTML5
‹#›
Creating a Webpage Template Document (continued 1)
In the File name box, type fitness to name the file
Tap or click the Save button to type and tap or click Hyper Text Markup Language to select the file format
Tap or click the Save button to save the template in the template folder
On Line 1 of the text editor, type <!DOCTYPE html> to define a new HTML5 document (Figure 2−8)
Chapter 2 Building a Webpage Template with HTML5
‹#›
Creating a Webpage Template Document (continued 2)
Chapter 2 Building a Webpage Template with HTML5
‹#›
18
Creating a Webpage Template Document (continued 3)
Press the ENTER key to add Line 2 and then type <html lang=“en”> to add a starting <html> tag that defines the language as English
Press the ENTER key to add Line 3 and then type <head> to add a starting <head> tag (Figure 2−9)
Chapter 2 Building a Webpage Template with HTML5
‹#›
19
Creating a Webpage Template Document (continued 4)
Chapter 2 Building a Webpage Template with HTML5
‹#›
20
Creating a Webpage Template Document (continued 5)
Add the following HTML elements to complete the template using the SPACEBAR or TAB key to indent Lines 4 and 5
Use the SHIFT+TAB keys to stop indenting
<title></title>
<meta charset=“utf-8”>
</head>
<body>
</body>
</html>
Save the changes
Chapter 2 Building a Webpage Template with HTML5
‹#›
21
Creating a Webpage Template Document (continued 6)
Chapter 2 Building a Webpage Template with HTML5
‹#›
22
To Add HTML5 Semantic Elements to a Webpage Template
The following steps insert HTML5 structural elements within the body tags:
Place an insertion point after the beginning <body> tag and press the enter key twice to insert new Lines 8 and 9
On Line 9, press the TAB key and then type <header> to add a starting header tag
Press the ENTER key to insert a new Line 10 and then type </header> to add an ending header tag (Figure 2–11)
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add HTML5 Semantic Elements to a Webpage Template (continued 1)
Chapter 2 Building a Webpage Template with HTML5
‹#›
24
To Add HTML5 Semantic Elements to a Webpage Template (continued 2)
Add the following HTML5 tags to complete the wireframe, indenting each line and inserting a blank line after each ending tag:
<nav>
</nav>
(blank line)
<main>
</main>
(blank line)
<footer>
</footer>
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add HTML5 Semantic Elements to a Webpage Template (continued 3)
Save the changes
Chapter 2 Building a Webpage Template with HTML5
‹#›
26
To Add a Title to a Webpage Template
The following steps add a webpage title to a template:
Place an insertion point after the beginning <title> tag and type Forward Fitness Club to add a webpage title
Save the changes and then view the page in a browser to display the webpage title
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add a Title to a Webpage Template (continued 1)
Chapter 2 Building a Webpage Template with HTML5
‹#›
28
Comments
Comments can provide additional information about the areas within the webpage
Add a comment before a tag using the following tag:
<! - - Place your comment here - - >
Word wrap causes text lines to break at the right edge of the window and appear on a new line
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add Comments to a Webpage Template
The following steps add comments to a webpage template:
Place the insertion point after the <!DOCTYPE html> tag and then press the ENTER key to insert a new Line 2
Type <! - - This website template was created by: Student’s First Name Student’s Last Name - - > on Line 2 to add a comment at the beginning of the document that identifies the author (Figure 2-14)
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add Comments to a Webpage Template (continued 1)
Chapter 2 Building a Webpage Template with HTML5
‹#›
31
To Add Comments to a Webpage Template (continued 2)
Place the insertion point on the blank Line 9 and press the ENTER key to insert a new Line 10
On Line 10, press the TAB key and then type <! - - Use the header area for the website name or logo - - > to add a comment identifying the type of information to include in the header area (Figure 2-15)
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add Comments to a Webpage Template (continued 3)
Chapter 2 Building a Webpage Template with HTML5
‹#›
33
To Add Comments to a Webpage Template (continued 4)
Place the insertion point on the blank Line 13 and press the ENTER key to insert a new Line 14
On Line 14, type <! - - Use the nav area to add hyperlinks to other pages within the website - - > to add a comment above the navigation area (Figure 2-16)
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add Comments to a Webpage Template (continued 5)
Chapter 2 Building a Webpage Template with HTML5
‹#›
35
To Add Comments to a Webpage Template (continued 6)
Place the insertion point on the blank Line 17 and press the ENTER key to insert a new Line 18
On Line 18, type <! - - Use the main area to add the main content of the webpage - - > to add a comment above the main area
Place the insertion point on the blank Line 21 and press the ENTER key to insert a new Line 22
On Line 22, type <! - - Use the footer area to add webpage footer content - - > to add a comment above the footer area (Figure 2-17)
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Add Comments to a Webpage Template (continued 7)
Save the changes
Chapter 2 Building a Webpage Template with HTML5
‹#›
37
Webpage Content
Static content can be added to a webpage that will appear on every webpage, such as the business name or logo, the webpage links, and the footer information
Following is an example of content added between header tags:
<header>Forward Fitness Club</header>
Chapter 2 Building a Webpage Template with HTML5
‹#›
Using Symbol Entities
Symbols can be added to an HTML webpage by typing its HTML entity name or entity number
Inserting an HTML character entity in the code displays a reserved HTML character on the webpage
Entity name is an abbreviated name
Entity number is a combination of the pound sign (#) and a numeric code
Chapter 2 Building a Webpage Template with HTML5
‹#›
Using Symbol Entities (continued)
Chapter 2 Building a Webpage Template with HTML5
‹#›
40
Validating HTML Documents
After the creation of an HTML file, the document is validated to verify the validity of the HTML code
A validator checks for errors, indicates where they are located, and suggests corrections
If the validator detects an error in an HTML code, it displays a warning in the header bar
A Result line below the header bar shows the number of errors in the document
Chapter 2 Building a Webpage Template with HTML5
‹#›
Creating a Home Page Using a Webpage Template
The following steps create the home page for the fitness website using the webpage template:
Tap or click File on the menu bar and then tap or click Save As to display the Save As dialog box
Tap or click the Up One Level button to display the contents of the fitness folder
In the File name text box, type index to name the file
Tap or click the Save button to save the index file in the fitness folder
Chapter 2 Building a Webpage Template with HTML5
‹#›
Creating a Home Page Using a Webpage Template (continued 1)
Place an insertion point after the beginning <main> tag and press the ENTER key twice to insert two new lines, in this case, Lines 26 and 27
On Line 27, press the TAB key and then type <p>Welcome to Forward Fitness Club. Our mission is to help our clients meet their fitness and nutrition goals.</p> to add paragraph tags and content to the page (Figure 2-29)
Chapter 2 Building a Webpage Template with HTML5
‹#›
Creating a Home Page Using a Webpage Template (continued 2)
Chapter 2 Building a Webpage Template with HTML5
‹#›
44
Creating a Home Page Using a Webpage Template (continued 3)
Press the ENTER key two times to insert two new lines and then type the contents within paragraph tags, as shown on Line 29, to add a second paragraph to the page
Press the ENTER key two times to insert two new lines and then type another paragraph, as shown on Line 31, to add a third paragraph to the page (Figure 2-30)
Chapter 2 Building a Webpage Template with HTML5
‹#›
Creating a Home Page Using a Webpage Template (continued 4)
Chapter 2 Building a Webpage Template with HTML5
‹#›
46
Creating a Home Page Using a Webpage Template (continued 5)
Press the ENTER key to insert a new blank line above the ending </main> tag
Check the spelling of the document and the changes
Chapter 2 Building a Webpage Template with HTML5
‹#›
To Display a Home Page in the Default Browser
By using a command in an HTML editor, one can open an HTML file from a file viewer such as File Explorer or Finder
When an HTML file is given a double-tap or double-click, it opens in the default browser on the computer
To open an HTML file in a different browser, press and hold or right-click the HTML file, tap or click Open with, and then tap or click an alternate browser
Chapter 2 Building a Webpage Template with HTML5
‹#›
48
kent.edu.au Kent Institute Australia Pty. Ltd. ABN 49 003 577 302 ● CRICOS Code: 00161E ● RTO Code: 90458 ● TEQSA Provider Number: PRV12051
49
49
