Scribd
Upload
70 views59 pages

2 Building A Webpage Template With HTML5

The document discusses designing effective websites, including planning the purpose and target audience. It explains how to structure a site using HTML5 semantic elements like header, nav, main, and footer. It also covers adding content and copyright symbols to the footer, and validating the webpage template using the W3C validator.

Uploaded by

marieanjileenaces15
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
70 views59 pages

2 Building A Webpage Template With HTML5

The document discusses designing effective websites, including planning the purpose and target audience. It explains how to structure a site using HTML5 semantic elements like header, nav, main, and footer. It also covers adding content and copyright symbols to the footer, and validating the webpage template using the W3C validator.

Uploaded by

marieanjileenaces15
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 59

2 || Building a Webpage Template with

HTML5
By: Mr. Francis Nino P. Digamo
Designing a Website
Designing a Website

Designing a website includes 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, and
determining whether to design for an optimal
viewing experience across a range of devices.
Completing these activities helps ensure an effective
design for your website.
Designing a Website
Designing a Website
Designing a Website
Planning Checklist
Purpose of the Website

The purpose of a commercial business website is


related to the goal of selling products or services. A
business can take a direct approach and use a
website to sell products and services through e-
commerce or through information that prompts
website users to visit a physical location such as a
store or restaurant.
Target Audience

In addition to understanding the website’s purpose,


you should understand the people who will use the
website, also known as the target audience.
Knowing the makeup of your target audience —
including age, gender, general demographic
background, and level of computer literacy — helps
you design a website appropriate for them.
Target Audience
Multiplatform Display

• Responsive Design
Graphics

• Graphics add visual appeal


to a webpage and enhance
the visitor’s perception of
your products and services.
Be sure to use appropriate
graphics on your site, those
that communicate your
brand, products, and
services.
Navigation

• As mentioned previously,
the navigation of your
website should be clear and
concise. Each webpage
should have a designated
navigation area with links
to other pages in the site
Typography

• The use of effective


typography, or fonts and
font styles, enhances the
visual appeal of a website.
Above all, the text must be
legible or the website is
useless. Typography also
should promote the
purpose and goal of the
website.
Color

• All websites use color, even if the colors are black and white. Select a
limited number of coordinated colors that help promote your purpose and
brand. The combination of colors, also called a color scheme, contributes
to the appeal and legibility of the website. Font and background colors
must provide high color contrast for readability, so use dark text on a
light background or light text on a dark background. Likewise, avoid a
color combination such as a primary red background with yellow text,
which is hard on the eyes. Aim to strike a balance among the background
color, text color, and the color that represents your brand. Many
successful color schemes have one main color, such as medium blue, and
add at least one lighter and darker shade of the same color, such as sky
blue and navy. Even a single shade can serve as a color scheme.
Color
Color
Anyone who wants to use the web must have content that
incorporates the principles as follows:
Anyone who wants to use the web must have content that
incorporates the principles as follows:
Site Map

▪ Home page: Introduces the fitness center and its mission statement

▪ About Us page: Showcases the facility’s equipment and services

▪ 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
Wireframe
Wireframe

A semantic wireframe uses semantic elements to define


the structure of a webpage.
• uses four semantic elements to define the structure of the
webpages: header, nav, main, and footer.
Wireframe
File Management

Main folder
• Root folder
File Management

HTML 4.01 introduced the div element


(with the <div> and </div> tags) to
divide a page into separate sections.
Each div element has a unique name to
distinguish it from other div elements
on the page. For example, you might
use a div element named header for
the header area and another div
element named nav for the navigation
area. However, webpage authors can
use any name they like to define a div
element, leading to inconsistency
among naming conventions for
websites.
File Management
File Management
File Management
File Management

Press:
Ctrl+
SHIFT+N
File Management
How can I find out whether my browser supports
the new HTML5 elements?

Caniuse.com
Using HTML5 Semantic Elements
HTML 4.01 introduced the div element (with the and tags) to divide
a page into separate sections. Each div element has a unique name
to distinguish it from other div elements on the page. For example,
you might use a div element named header for the header area and
another div element named nav for the navigation area. However,
webpage authors can use any name they like to define a div element,
leading to inconsistency among naming conventions for websites.
Using the semantic HTML5 elements
standardizes naming conventions, making
webpages more universal, accessible, and
meaningful to search engines.
Header Element Nav Element

The header element structurally


The nav element structurally
defines the header area of a
defines the navigation area
webpage. The header element
starts with a tag and ends with a
of a webpage. The nav
tag. Content placed between these element starts with a tag and
tags appears on the webpage as ends with a tag. The nav
part of the header element. Web element usually includes
designers often place a business links to other pages within
name or logo within the header the website
element
Main Element Footer Element

The main element The footer element structurally defines


structurally defines the the bottom, or footer area, of a webpage.
main content area of a
The footer element starts with a tag and
webpage. The main
element starts with a tag ends with a tag. Common content found
and ends with a tag. Each within a webpage footer includes
page can have only one copyright information, contact
main element because its information, and page links
content should be unique
to each page.
To Add HTML 5 Semantic Elements to a Webpage Template
Using Symbol Entities
Inserting an HTML character entity in the code displays a reserved HTML
character on the webpage. All character entities start with an ampersand (&) and
end with a semicolon (;) to signal to the browser that everything in between is
an entity representing a symbol. An entity name is an abbreviated name, and an
entity number is a combination of the pound sign or number sign (#) and a
numeric code. For example, the entity name for the copyright symbol is © and
the entity number for the copyright symbol is ©. You can use either an entity’s
name or number in your HTML code.
To Add Content and a Symbol to the Footer Section
Creating a Webpage Template
To Add HTML5 Semantic Elements to a Webpage
Template
To Add HTML5 Semantic Elements to a Webpage
Template
To Add HTML5 Semantic Elements to a Webpage
Template
Validating HTML Documents
Validating Web page Template

http://validator.w3.org/

You might also like