Transcript PowerPoint File - Horace Mann School

HTML
Comprehensive Concepts and Techniques
Intro Project
Introduction to HTML
Web Development Life Cycle
Ensures project consistency and
completeness
– Planning
– Analysis
– Design and Development
– Testing
– Implementation and Maintenance
2
P
A
D
T
I
3
Web Site Planning
Identification of the Web site goals or
purpose
Understand who will use the Web site
Understand what Web technologies
you will use
Identify the content owners and
authors
Decide what and where information will
go on the Web site
4
Web Site Analysis
Identify the tasks users need to
complete
Consider the processes required to
support Web site features
One of the more important phases in
the Web Development Life Cycle
5
Web Page Design and Development
Purpose
– Professors publish to inform students
– Businesses publish to advertise products
or to give support
– Organizations publish to keep members
informed
– Individuals publish to share hobbies and
knowledge
6
7
Web Page Design and Development
Web Site Organization
– Linear Web site layout
– Hierarchical Web site layout
– Webbed Web site layout
– Narrow Web site layout
– Deep Web site layout
8
Web Page Design and Development
Linear Web Site Layout
Webbed Web Site Layout
Hierarchical
Web Site Layout
Deep Web Site Layout
Narrow Web Site Layout
9
Web Site Testing
Web sites should be tested at various
stages of the WDLC
Review of Web page content,
functionality, and usability
Usability is the measure of how well
the Web page allows a user to
accomplish goals
– Usability testing
10
11
Web Site Implementation
and Maintenance
 Implementation involves the publishing of Web
pages to a Web server
 Determine who is responsible for updates to the
Web page
 Limit the ability of certain users to update the Web
page
 Web site monitoring
– Utilize logs to keep track of Web site usage and statistics
12
Summary
Describe the Internet and its associated key
terms
Describe the World Wide Web and its
associated key terms
Identify the types and purposes of Web sites
Discuss Web browsers and identify their
purpose
Define Hypertext Markup Language (HTML)
and the standards used for Web
development
13
Summary
 Describe Web editors and their relationship to Web
development
 Discuss the five phases of the Web development life
cycle
 Describe Web site layouts and the purpose of each
layout
 Describe the importance of testing throughout the
Web Development Life Cycle
14
HTML
Comprehensive Concepts and Techniques
Intro Project Complete
Objectives
Describe the Internet and its associated key
terms
Describe the World Wide Web and its
associated key terms
Identify the types and purposes of Web sites
Discuss Web browsers and identify their
purpose
Define Hypertext Markup Language (HTML)
and the standards used for Web
development
16
Objectives
Describe Web editors and their
relationship to Web development
Discuss the five phases of the Web
development life cycle
Describe Web site layouts and the
purpose of each layout
Describe the importance of testing
throughout the Web Development Life
Cycle
17
The Internet
Worldwide collection of networks that
link together millions of businesses, the
government, educational institutions,
and individuals
18
The Internet
A network is composed of a group of
computers that are connected together
to share resources and information
The Internet backbone is a high-speed
data line that connects major computer
systems
An Internet Service Provider (ISP) is a
company with a permanent connection
to the Internet backbone
19
20
The World Wide Web
Part of the Internet that supports
multimedia and consists of a collection
of linked documents, called Web pages
A Web site is a collection of Web
pages that are created and maintained
by an organization or individual
Relies on Hypertext Markup Language
(HTML)
21
Web Servers
Web pages are stored on a Web server
or host
Publishing is the process of copying
files to a Web server
22
Once a Web page is published, anyone who has access to
the Internet can view it
23
Web Site Types and Purposes
24
Internet Site
25
Internet Site
26
Web Browsers
Web Browsers are required to view
Web pages
– Microsoft Internet Explorer
– Netscape Navigator
Uniform Resource Locator (URL)
Web pages are linked together by the
use of hyperlinks
Clicking a hyperlink allows you to move
quickly from one Web page to another
27
Hyperlinks
28
Hypertext Markup Language
Hypertext Markup Language (HTML) is
used to create Web pages
– Set of special instructions called tags and
markups
Web page files contain text and HTML
tags
– Tags mark the text to define how it
displays when viewed in a browser
• Ex. <B> <P> <HR>
29
30
Hypertext Markup Language
HTML is platform independent
– Can be created on one type of computer
and viewed on another type of computer
World Wide Web Consortium maintains
HTML standards
– Several versions of HTML exist today
– Each new version expands capabilities
31
32
HTML Elements
HTML is a subset of Standard
Generalized Markup Language
(SGML)
– SGML is a standard for how to organize
and tag elements of a document
<B>sample text</B>
33
HTML Elements
34
HTML Coding Practices
Use capitalized tags to separate tags
from contents
Use ending tags whenever possible
Separate sections of HTML code with
spaces
35
tags are capitalized
spaces between sections of code
use of ending tags
36
Web Editors
Text Editor
– Program that allows a user to enter,
change, save, and print text, such as
HTML
– No advanced features
– Allows you to develop HTML documents
easily
37
38
Web Editors
HTML Editor
– Program that provides basic text-editing
functions
– Microsoft’s Save as Web Page feature
WYSIWYG Editor
– Utilizes a graphical user interface
– Microsoft FrontPage
– Macromedia Dreamweaver
39
HTML
Comprehensive Concepts and Techniques
Project 1
Creating and Editing
a Web Page
Objectives
Identify elements of a Web Page
Start Notepad
Describe the Notepad window
Enter the <HTML>, <HEAD>,
<TITLE>, and <BODY> tags
Enter a paragraph of text, a bulleted
list, and HTML tags
Save an HTML file
41
Objectives
Change the background color of a Web
page
Center a heading
Start your browser
View the HTML file in your browser
Print an HTML file from Notepad
Print a Web page from your browser
42
Objectives
Use a definition list
Quit Notepad
Quit your browser
43
Web Page Elements
Title
Bookmarks
Body
Background
Normal text
Paragraph
Bulleted list
44
Headings
Images
Horizontal Rules
Image map
Hotspot
Animated images
Hyperlinks
Web Page Elements
title
heading
horizontal rule
image
paragraph
body
links
bulleted list
animated image
45
Starting TextEdit
46
Click “TextEdit”
The TextEdit Window
47
The Notepad Window
top bar
Untitled – Notepad window
text area
scroll
bars
48
Entering HTML Tags and Text
 Four tags define the overall structure of standard Web pages:
– <HTML> and </HTML>
• Indicates file is an HTML document
– <HEAD> and </HEAD>
• Introduction to the rest of the file
• Indicates the area where the title will be placed
– <TITLE> and </TITLE>
• Indicates the title that will display in the title bar
– <BODY> and </BODY>
• Indicates the boundaries of the Web page
49
Entering Initial HTML Tags
insertion point
50
Entering Initial HTML Tags
all Web page content will be placed here
all Web page content will be placed here
ending BODY and HTML tags
ending BODY and HTML tags
If you notice an error in the text,
use the BACKSPACE key to
erase all the characters back to
and including the one that is
incorrect
51
Headings
Used to separate text and introduce
new topics
Vary in size, from <H1> through <H6>
Use the same sized heading for the
same level of topic
52
53
Entering Headings
main heading
main heading
Since the Chiaravalle Pizza
heading is the first line after
the BODY tag, it will be the
first thing displayed on the
Web page
54
Paragraphs
Most text on Web pages is in
paragraph format
The <P> tag has an optional ending
tag
When a browser finds a <P> tag, it
starts a new line and adds a paragraph
break
Try not to type large sections of text
without having paragraph breaks
55
Entering Paragraphs
paragraph tag and text
The <BR> (break) tag breaks a
line of text and starts a new
line, but does not add vertical
spacing like a <P> tag
56
Creating a List
 Lists structure your text in outline format
– Unordered (bulleted) lists
• <UL> and </UL> marks the beginning and end of unordered
lists
– Ordered (numbered) lists
• <OL> and </OL> marks the beginning and end of ordered lists
 The <LI> and </LI> tags define list items
 The TYPE attribute defines the default bullet or
number type
57
Unordered Lists
<H3>Unordered Lists</H3>
<UL TYPE=“disc”>
<LI>First item – type disc</LI>
<LI>Second item – type disc</LI>
</UL>
<UL TYPE=“square”>
<LI>First item – type square</LI>
<LI>Second item – type square</LI>
<UL>
<UL TYPE=“circle”>
<LI>First item – type circle</LI>
<LI>Second item – type circle</LI>
</UL>
58
Ordered Lists
<H3>Ordered Lists</H3>
<OL TYPE=“1”>
<LI>First item – type 1</LI>
<LI>Second item – type 1</LI>
</OL>
<OL TYPE=“A”>
<LI>First item – type A</LI>
<LI>Second item – type A</LI>
</OL>
<OL TYPE=“a”>
<LI>First item – type a</LI>
<LI>Second item – type a</LI>
</OL>
<OL TYPE=“I”>
<LI>First item – type I</LI>
<LI>Second item – type I</LI>
</OL>
59
<OL TYPE=“i”>
<LI>First item – type i</LI>
<LI>Second item – type i</LI>
</OL>
Creating a Bulleted List
bulleted list
tags and text
60
Saving the HTML File
You must save the file before you can
view it in your browser
HTML files must end with an extension
of .htm or .html
.html extensions only work on Web
servers running an operating system
that supports long filenames
61
Saving the HTML File
Go to the File Menu and Select “Sava As”
62
Saving the HTML File
File name text box
63
Using a Browser to View a Web
Page
After you save your HTML file, you
may view your Web page in a browser
The HTML file displays in your browser
just as it would on the Web
Windows allows you to view the page
in your browser while keeping Notepad
open
64
Starting Your Browser
65
Your Browser
maximize
button
Internet Explorer Window
menu bar
address bar
default
startup page
status bar
66
standard
buttons
toolbar
Opening a Web Page in Your
Browser
Click the Address bar
67
Opening a Web Page in Your
Browser
Type a:\page1.htm
in the Address text box,
then press ENTER
68
Your Web Page
title
main heading
paragraph
H2 heading
body of
Web page
69
bulleted list
Your Web Page
title
main heading
paragraph
H2 heading
body of
Web page
70
bulleted list
Activating TextEdit
Click the Notepad button
on the taskbar
71
Activating TextEdit
72
73
Adding Background Color
Locate the
6-character code
of the color you
wish to use
74
Adding Background Color
Background color code goes
at the end of the BODY tag
75
Centering the Heading
Text can be aligned differently on the
page
– ALIGN = “LEFT”
– ALIGN = “RIGHT”
– ALIGN = “CENTER”
The default alignment for headings is
left-alignment
76
Centering the Heading
center-alignment code
77
Adding a Horizontal Rule
Horizontal Rules are graphical images
that act as dividers
The tag used to insert a Horizontal
Rule is <HR>
Horizontal Rules are easy to insert
78
Adding a Horizontal Rule
<HTML>
<HEAD><TITLE>Horizontal Rules</TITLE>
</HEAD>
<BODY BGCOLOR=#94D6E7>
<P>Default HR</P>
<HR>
<P>HR with size=1</P>
<HR SIZE=1>
<P>HR with size=5</P>
<HR SIZE=5>
<P>HR with size=10</P>
<HR SIZE=10>
<P>HR with size=10 and noshade</P>
<HR SIZE=10 NOSHADE>
</BODY>
</HTML>
79
Adding a Horizontal Rule
horizontal
rule tag
80
Viewing the Modified File in Your
Browser
after saving the modified file,
click the Refresh button in
your browser
81
Viewing Your Web Page Source
You can view the HTML code on any
Web page from within your browser
This allows you to see how others
created their Web pages
82
Viewing Your Web Page Source
Click Source
in the View menu
83
Viewing Your Web Page Source
HTML source
code
84
Printing a Copy
1. Ready the printer
2. Select Print from the File menu
3. Click the OK button in the Print
dialog box
4. Retrieve the printout
85
Printing the HTML
From the Notepad window,
select Print from the File menu
86
Quitting Notepad and Your Browser
Click the Close button
on the Notepad title bar
87
Quitting Notepad and Your Browser
Click the Close button
in your browser’s title bar
88
Definition Lists
Used to list information without the
standard bullet or numbered list
symbols
Syntax is not as straightforward as
<UL>, <OL>, or <LI>
<DL> and </DL> start and end the list
<DT> and <DD> are used to create the
actual list elements, terms, and
definitions
89
Definition Lists
90
definition list start
definition
term start
definition
start
definition list end
91
definition terms
definitions
92
Summary
Identify elements of a Web Page
Start Notepad
Describe the Notepad window
Enter the <HTML>, <HEAD>,
<TITLE>, and <BODY> tags
Enter a paragraph of text, a bulleted
list, and HTML tags
Save an HTML file
93
Summary
Change the background color of a Web
page
Center a heading
Start your browser
View the HTML file in your browser
Print an HTML file from Notepad
Print a Web page from your browser
94
Summary
Use a definition list
Quit Notepad
Quit your browser
95
What You Should Know
96
HTML
Comprehensive Concepts and Techniques
Project 1 Complete