Html and CSS: Chapter 02

Chapter 2
Building a Webpage
Template with HTML5
Web Design with
HTML5 & CSS3
8th Edition

• 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 2
Objectives

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

• 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
Designing a Website

Designing a Website (continued)

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

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

Site Map (continued 2)

Wireframe
• Wireframe depicts the layout of a webpage,
including its major content areas

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

File Management (continued)

Using HTML5 Semantic Elements

Using HTML5 Semantic Elements
(continued 1)

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

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)

• 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: Creating and Editing a Web Page Using Inline Styles 18

• 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

To Add HTML5 Semantic
Elements to a Webpage
TemplateThe 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)

To Add HTML5 Semantic Elements to
a Webpage Template (continued 1)

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

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

To Add a Title to a Webpage
Template (continued 1)

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

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)

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

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

• On Line 18, type <! - - Use the main area to
add the main content of the webpage - - >
to add a comment above the main area
• On Line 22, type <! - - Use the footer area
to add webpage footer content - - > to add
a comment above the footer area (Figure 2-17)

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>

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

Using Symbol Entities
(continued)

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

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

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)

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

• Press the ENTER key to insert a new blank line
above the ending </main> tag
• Check the spelling of the document and the
changes

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 Complete
HTML
8th Edition

Html and CSS: Chapter 02

More Related Content

What's hot

Similar to Html and CSS: Chapter 02

More from Steve Guinan

Recently uploaded

In this document

Html and CSS: Chapter 02