Create an HTML Document

Transcript Create an HTML Document

HTML, Third Edition
Illustrated Brief
Unit A
Creating an HTML Document
HTML, Third Edition--Illustrated
Brief
1
Unit Objectives
Understand Web concepts
Plan an HTML document
Write an HTML document
Understand W3C coding
standards
Import Web content
HTML, Third Edition--Illustrated Brief
2
Unit Objectives
Mark up Web page content
Print an HTML document
Understand file transfer methods
Transfer files with FTP
Commander
HTML, Third Edition--Illustrated Brief
3
Understanding Web Concepts
HTML is the authoring language
used to create pages for the
World Wide Web
HTML documents are text files
made up of text and HTML
instructions
 Tags and text make up the document’s
source code
HTML, Third Edition--Illustrated Brief
4
Understanding Web Concepts
A Web page is a single text file marked
up with tags,
 Tags allow you to describe how elements
should appear in a Web browser
A Web site is a collection of related
Web pages
Hyperlinks allow you to move from one
file to another on the World Wide Web
A Web server is a computer connected
to the Internet and accessible to anyone
with an Internet connection
HTML, Third Edition--Illustrated Brief
5
Understanding Web Concepts
A uniform resource locator (URL)
is the exact Internet address of a
Web file
A search engine helps you locate
information on the Web
The World Wide Web Consortium
(W3C) develops common protocols
and sets new Web standards
HTML, Third Edition--Illustrated Brief
6
Understanding Web Concepts
HTML, Third Edition--Illustrated Brief
7
Clues to Use
URLs consists of several parts
 protocol
 Web server name or machine name
 domain name
HTML, Third Edition--Illustrated Brief
8
Understanding Web Concepts
HTML, Third Edition--Illustrated Brief
9
Planning an HTML Document
Sketch your Web page
 storyboarding
Enter structuring tags for the file
Enter the head section elements
Enter each Web page body element
Preview the Web page
Test links
HTML, Third Edition--Illustrated Brief
10
Planning an HTML Document
HTML, Third Edition--Illustrated Brief
11
Planning an HTML Document
HTML, Third Edition--Illustrated Brief
12
Writing an HTML Document
Click the Start button on the taskbar
Point to All Programs, point to Accessories,
click Notepad, then maximize the Notepad
window
Click File on the menu bar, then click Save
Click the Save in list arrow, then navigate to
the location to store your site files
Click the Create New Folder icon, type
paradise as the new folder name, then
double-click the paradise folder to open it
HTML, Third Edition--Illustrated Brief
13
Writing an HTML Document
Click the Save as type arrow, then click All
Files
Click in the File name text box, type index.htm,
compare your dialog box with Figure A-6, then
click Save
Click in the blank area of the text editor, type
<html>, then press [Enter]
Type the remaining tags, as shown in Figure A7,
 use extra return characters after each tag
 Use your own name and the current date in the “Modified
by” paragraph
Click File on the menu bar, then click Save
HTML, Third Edition--Illustrated Brief
14
Writing an HTML Document
HTML, Third Edition--Illustrated Brief
15
Writing an HTML Document
HTML, Third Edition--Illustrated Brief
16
Understanding W3C Coding Standards
Use lowercase letters
If you open it, close it
No spaces in folders or file names
Keep it neat
Put everything in its place
 Stacked tags are closed before the next
tag begins or are opened after the
previous tag has ended
 Nested tags are fully contained within
another tag
HTML, Third Edition--Illustrated Brief
17
Understanding W3C Coding Standards
HTML, Third Edition--Illustrated Brief
18
Importing Web Content
Click before the first opening paragraph tag
(), drag to select all of the content through
and including the second closing paragraph
tag (), press [Delete] to remove the page
content
Start Microsoft Word or another wordprocessing program, open the document
htm_a-1.rtf from the location where you store
your Data Files
Click before the word Located in the first
paragraph below the page heading in the
htm_a-1.rtf document, drag to select all the
remaining text
HTML, Third Edition--Illustrated Brief
19
Importing Web Content
Click Edit on the menu bar, click
Copy, then click the text editor
program button on the taskbar
Click in the line below the level-one
heading, click Edit on the menu bar,
then click Paste
Close the rtf file, then save your work
HTML, Third Edition--Illustrated Brief
20
Importing Web Content
Start your browser, then cancel any
dial-up operations
Click File on the menu bar, click
Open or Open Page, click Browse
or Choose File
Navigate to and then click the file
index.htm in your paradise site
folder, click Open, then click Open or
OK
HTML, Third Edition--Illustrated Brief
21
Importing Web Content
HTML, Third Edition--Illustrated Brief
22
Importing Web Content
HTML, Third Edition--Illustrated Brief
23
Clues to Use
Learn what other designers are
doing by viewing the source code
of other pages
 Internet Explorer
• Click View on the menu bar, then click
Source
 Navigator
• Click View on the menu bar, then click
Page Source
HTML, Third Edition--Illustrated Brief
24
Marking up Web Page Content
Click the text editor program button on the
taskbar, click before the word Located, type
, click in the white space after “program.” at
the end of the paragraph, type 
Add opening and closing paragraph tags at the
beginning and end of each paragraph
 Save your work
Click the browser program button on the
taskbar
Click your browser’s Reload or Refresh button
HTML, Third Edition--Illustrated Brief
25
Marking up Web Page Content
Click the text editor program button on the
taskbar, click after the line that reads, Send
inquiries regarding rates and reservations to:,
then type 
Type a line break at the end of the next three
lines from Figure A-13, then save your work
Return to the browser window, then click the
browser’s Reload or Refresh button
HTML, Third Edition--Illustrated Brief
26
Marking up Web Page Content
HTML, Third Edition--Illustrated Brief
27
Marking up Web Page Content
HTML, Third Edition--Illustrated Brief
28
Marking up Web Page Content
HTML, Third Edition--Illustrated Brief
29
Marking up Web Page Content
HTML, Third Edition--Illustrated Brief
30
Printing an HTML Document
Click the text editor button on the
taskbar, click File on the menu bar,
then click Print
Verify that your preferred printer is
selected, then click Print
Click the browser program
button on the taskbar
HTML, Third Edition--Illustrated Brief
31
Printing an HTML Document
Click the Print button on the
browser toolbar, then, if necessary,
click OK
Click the browser window Close
button
If necessary, click the text editor
program button on the taskbar,
then click the text editor window
Close button
HTML, Third Edition--Illustrated Brief
32
Printing an HTML Document
HTML, Third Edition--Illustrated Brief
33
Clues to Use
Web page
printouts include
information about
the Web page
 location
 page title
Netscape
Navigator and
Internet Explorer
allow you to
customize this
information
HTML, Third Edition--Illustrated Brief
34
Understanding File Transfer Methods
Uploading is the process of transferring
your files to a server
You must have write access to the
server
 Permission from server administrator
Access to the server is granted by
entering a user ID and a valid password
HTML, Third Edition--Illustrated Brief
35
Understanding File Transfer Methods
File Transfer Protocol (FTP) is one of the most
common methods of transferring files to a server
 FTP client programs let you transfer files
easily
Files transferred with Secure File Transfer
Protocol (SFTP) are encrypted for additional
security
Mapped Network Drive
Web Site Development Program Publishing
Interface
HTML, Third Edition--Illustrated Brief
36
Understanding File Transfer Methods
HTML, Third Edition--Illustrated Brief
37
Clues to Use
To download FTP Commander, open
your browser, then go to the
InternetSoft Web site:
 Go to the Student Online Companion for this
book and find the links for Unit A
Click the DOWNLOAD link in the
navigation bar near the top of the
page
On the Download page, click the
Download link next to FTP
Commander
HTML, Third Edition--Illustrated Brief
38
Clues to Use
If the Windows File Download - Security
Warning dialog box displays the message,
“Do you want to run or save this file?” click
Run
Click Run when the Internet Explorer Security Warning dialog box displays the
message: “The publisher could not be
verified. Are you sure you want to run this
software?”
After reading the FTP Commander License
Agreement, click to select the check box
indicating that you agree with the license
terms
HTML, Third Edition--Illustrated Brief
39
Clues to Use
Click Next
When the FTP Commander Destination
Directory dialog box appears,
 click Browse to select a different storage location
 or click Start to accept the default destination.
Make sure that the Run Installed
Application box is checked, then click OK.
A Windows Security Alert dialog box may
warn you that Windows Firewall has
blocked some features of this program. If
this happens, click Unblock.
HTML, Third Edition--Illustrated Brief
40
Transferring Files with FTP Commander
If FTP Commander is not already running,
click the Start button on the taskbar, point
to All Programs, point to FTP
Commander, then click FTP Commander
Click the Browse local drives list arrow,
then navigate to the location where you
store your site files
Click New Server under FTP- servers
Type your information as described on the
following slide, then click Save
HTML, Third Edition--Illustrated Brief
41
Transferring Files with FTP Commander
HTML, Third Edition--Illustrated Brief
42
Transferring Files with FTP Commander
In the SERVER LIST pane, double-click the name
of the server you just defined to open an FTP
connection to your server
Click index.htm in the Folder content pane of the
Local computer window, then click the Upload
files to FTP - server button to start the file
transfer to the server
Start your Internet browser, type your remote URL
in the browser’s Address box, then click Go or
press [Enter]
Close your browser and your text editor
HTML, Third Edition--Illustrated Brief
43
Transferring Files with FTP Commander
HTML, Third Edition--Illustrated Brief
44
Unit Summary
Understand Web concepts
Plan an HTML document
Write an HTML document
Understand W3C coding
standards
Import Web content
HTML, Third Edition--Illustrated Brief
45
Unit Summary
Mark up Web page content
Print an HTML document
Understand file transfer methods
Transfer files with FTP
Commander
HTML, Third Edition--Illustrated Brief
46