Getting Started with your Website

Objectives
Define a project plan
Create wireframes and a storyboard
Create an HTML document
Set up the document head and body
Add text to a web page
HTML 5 and CSS 3 - Illustrated Complete 2

Objectives (continued)
Add a comment to a web document
Preview your web page on a desktop
computer
Configure web server software
Preview your web page on mobile
devices

Define a Project Plan
Project plan: document that identifies
aspects of the project
 Also known as a design document
Ask questions to find out customer’s
expectations and goals, including
• Goals and objectives of the website
• Target audience
• Type of website
• Budget for website
• Timeline for website

Define a Project Plan
(continued)
Sample project
plan

Create Wireframes and a
Storyboard
Wireframe: sketch that outlines web
page components and their place in
the layout
Storyboard: shows links between web
pages
To create a wireframe and storyboard
• Identify components (use project plan)
• Sketch possible layouts
• Map relationships among pages

Storyboard (continued)
Sketch for a main web page

Storyboard (continued)
Storyboard showing links for website

Create an HTML Document
HTML (Hypertext Markup Language):
standardized format for web pages
HTML document consists of text
 Text to be displayed on the web page
 Tags specifying how the browser should
render each item
Most tags occur in pairs, but one-
sided tags are used by themselves

(continued)
Start document with <!DOCTYPE
html> declaration
Add <html> and </html> tags to
define beginning and end of web page
Create document by hand-coding in a
text editor or by using suitable
program

(continued)
Basic structure of a web page in a text
editor

Set Up the Document
Head and Body
HTML document divided into head
and body sections
 Head section: contains elements that are
not part of the main web page
 Body section: contains elements that are
visible in the main window of a web
browser
Head and body tags are nested within
html tags

Set Up the Document
Head and Body (continued)
For clarity of structure, nested
elements are
 On new lines
 Indented by two spaces relative to parent
element
To add head section
 Add <head> and </head> tags in new
lines within the html tags

Set Up the Document
Head and Body (continued)
To add body portion, add <body>
and </body> tags in new lines within
the html tags
Completed web page structure

Add Text to a Web Page
Type the text for the web page
Add HTML tags to specify the element
type for each text item, for example
 <title> and </title>: text that
appears in the web browser’s title bar
 <h1> and </h1>: highest level heading
 <p> and </p>: paragraph of text

Add Text to a Web Page
(continued)
Title, h1, and p elements entered

Add a Comment to a
Web Page
HTML comments add information not
shown in the web browser
Use to explain what code does or to
point out beginning and end of parts of
the code
Comments
 Defined by 
 Can be single line
 Can be multi-line

Add a Comment to a
Web Page (continued)
Comment text added to an HTML
document

Preview Your Web Page on a
Desktop Computer
To preview a web page open it in one
or more user agents
 Allows page writer to research problems
and correct them before publishing the
page
Use file manager to open web page in
one or more browsers
Note differences in the way the page
is displayed in different browsers

Preview Your Web Page on a
Desktop Computer (continued)
Preview of web page in Google
Chrome

Configure Web Server
Software
Web server: computer running web
server software and connected to the
Internet
Use a web server to open a file on
desktop computer on another device,
like a mobile phone
Aptana Studio 3, free code editor with
built-in web server

Configure Web Server
Software (continued)
Accessing Aptana web server

Preview Your Web Page on
Mobile Devices
Important to test web page on variety
of devices, including desktops, tablets,
and mobile phones
Web pages are rendered differently on
different devices
Testing helps you see what changes, if
any, need to be made
Must be connected to a web server to
test on a mobile phone

Preview Your Web Page on
Mobile Devices
Web page phone and tablet

Summary
Prior planning is a crucial component
in designing a good website
When planning a website, the
designer must consider the goals and
objectives of the site, the target
audience, the type of site, the budget,
and the timeline
Use a wireframe to outline the
components of a website

Summary (continued)
Use a storyboard to show links
between the pages
HTML is a coding language
An HTML document is a text
document that defines a structure of
the text to be displayed
The structure of the text to be
displayed is defined by the use of tags

Summary (continued)
An HTML document includes
 html opening and closing tags
 head opening and closing tags
 body opening and closing tags
 Other tags nested within
HTML elements include
 title tags for titles
 h tags for headings (h1 – h6)
 p tags for paragraphs

Summary (continued)
Comments provide additional
information; not viewed in the browser
Preview web page on different devices
using different browsers; look for
unexpected results
Use a web server to view web page
on mobile phones

Getting Started with your Website

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (12)

Semelhante a Getting Started with your Website

Semelhante a Getting Started with your Website (20)

Mais de Nicole Ryan

Mais de Nicole Ryan (15)

Último

Último (20)

Getting Started with your Website