Transcript New Perspectives on the Internet, 6th edition

Tutorial 8
Creating Effective
Web Pages
Objectives
New Perspectives on The Internet, Seventh Edition
XP
2
Objectives
XP
• Learn about JavaScript, Flash, and Shockwave
• Learn about the different types of graphics that
you can use in a Web page and the programs
that create them
• Understand the questions to ask when selecting
a Web hosting service
• Understand the issues involved when publishing
a Web site
• Learn about search engine submission and
search engine optimization
New Perspectives on The Internet, Seventh Edition
3
Understanding Markup Languages
XP
• Hypertext Markup Language (HTML): nonproprietary
markup language that a Web browser interprets and
uses to display the content as a Web page
• Markup language: general term that indicates the
separation of the formatting of a document and the
content of a document
• Standard Generalized Markup Language (SGML):
metalanguage (language used to create other
languages) was the standard for formatting documents
in a way that was not dependent on the operating
system or environment on which the documents were
created or viewed
New Perspectives on The Internet, Seventh Edition
4
Understanding Markup Languages
XP
• Tim Berners-Lee and Robert Calliau developed the first
version of HTML using SGML in 1989
• World Wide Web Consortium (W3C) developed
specifications, or sets of standards, that identify how a
browser interprets the HTML code
• Specifications are voluntary, but most organizations
follow the specifications as much as possible
• Current specification for HTML is 401
– Since 2004, the W3C has been working on the fifth
revision of the HTML specification
New Perspectives on The Internet, Seventh Edition
5
Understanding Markup Languages
XP
• Extensible Markup Language (XML): popular markup
language that began in 1998 to describe the format and
structure of data
• Extensible Hypertext Markup Language (XHTML) or XHTML
11:
– Most recent markup language specification from the W3C
– Combines the formatting features of HTML with a stricter syntax that
works to combine HTML and XML so that Web content is more readily and
easily delivered to all devices that are connected to the Internet
– Compatible with the HTML 401 specification
• HTML specifications not included when newer specifications
are released or not included in the XHTML specification are
deprecated
New Perspectives on The Internet, Seventh Edition
6
Understanding Tags and Attributes
XP
• Tags: codes that indicate different elements on a Web
page such as headings, paragraphs, and bulleted lists
• Nested tags: tags that are included within other tags
• Tags are either two-sided and require a tag at the
beginning and the end of the element, or they are onesided
• Some tags include attributes that specify additional
information about the content to be formatted by the
tag
New Perspectives on The Internet, Seventh Edition
7
Planning an HTML Document
XP
• To create a Web page, use a text editor or use a program that
includes features for working with Web pages and Web sites
– An example of a text editor is the Notepad program that is installed with
Windows
– When you use a text editor to create a Web page, you type the content of
the Web page and the tags that you need to format that content; you need
a thorough understanding of HTML
• Programs such as Microsoft Expression Web or Adobe
Dreamweaver provide a graphical user interface (GUI) in which
you type the content of your Web page and use toolbar buttons
and menus to format that content, and then the program creates
all of the necessary tags to format the Web page
New Perspectives on The Internet, Seventh Edition
8
Planning an HTML Document
New Perspectives on The Internet, Seventh Edition
XP
9
Planning an HTML Document
XP
• Color is an element that depends on the user’s
computer and browser to render it correctly
• Web-safe color palette: collection of 216 colors that all
computers render in the same way
• The fonts that are available on your computer are not
always the same ones that are available on other
computers
• A good rule for beginning Web page developers is to use
fonts that are considered to be common on all
computers
New Perspectives on The Internet, Seventh Edition
10
Planning an HTML Document
New Perspectives on The Internet, Seventh Edition
XP
11
Creating an HTML Document
XP
• Start Notepad
• Save the document with the html filename extension
– Filename extensions htm and html are associated with Web
pages
– If you used the default filename extension for text files (txt) or
any other filename extension besides htm or html, then a
Web browser will not recognize your file as a Web page
• Need an opening <html> tag to indicate that the file is
an HTML document
New Perspectives on The Internet, Seventh Edition
12
Creating the HTML
Document Structure
XP
• Head section:
– Begins with the <head> tag
– Includes general information about the document, such as
keywords that identify the document’s content for search engines
and comments about the document’s creator or the date the
document was last updated
– Includes the nested <title> tag
• Identifies the title of the Web page so the browser can display it in the
title bar and page tab
• Used to identify the content of the page
• Appears as the default name when you use the browser to save the
page as a bookmark or favorite
• The <head> tag is a two-sided tag, so you must include the
closing </head> tag
New Perspectives on The Internet, Seventh Edition
13
Creating the HTML
Document Structure
XP
• Body section:
– Required in an HTML document after the head section
– Includes the content of the Web page along with the tags
needed to format that content
– Opening <body> tag indicates the beginning of the body
section
– Closing </body> tag indicates the end of the body section
• Include the closing </html> tag as the last item in the
HTML document
New Perspectives on The Internet, Seventh Edition
14
Basic HTML Document Structure in
Notepad
New Perspectives on The Internet, Seventh Edition
XP
15
Adding a Comment to an
HTML Document
XP
• In an HTML document, comments identify the author,
purpose, date created or last updated, and other
information as required
• Comment tag:
– One-sided tag
– Browser ignores it and does not display it in a Web page
– Visible when you view the HTML document in a text editor
– Has the following syntax:
• <!-- comment -->
– Can appear anywhere in an HTML document
New Perspectives on The Internet, Seventh Edition
16
Inserting and Formatting Headings
XP
• Identify headings with tags
– Use the <h1> tag for a level-one heading
– Use the <h2> tag for a level-two heading
– And so on down to the <h6> tag for a level six
heading
• Add attributes to change alignment and color of
headings
New Perspectives on The Internet, Seventh Edition
17
Inserting and Formatting Headings
XP
• To change the alignment:
– In HTML, add the align attribute with the center value, for
example: <h1 align="center">
– Center value is deprecated in XHTML
– To add a code that is compatible with both HTML and XHTML,
use the style attribute with the text-align: center value, for
example: <h1 style="text-align: center">
• To change the color, add a color attribute to the
heading tag
• When using the style attribute, you can separate
multiple values with a semicolon
New Perspectives on The Internet, Seventh Edition
18
Headings and Comment Added to
the HTML Document
New Perspectives on The Internet, Seventh Edition
XP
19
Inserting and Formatting Headings
XP
• As you work in an HTML document, it is a good idea to check
your work periodically in a Web browser to look for
problems in your coding and also to make sure that the page
you are creating looks correct
• As you are working with your HTML document in your text
editor, you can save the page and then refresh the Web
page in the browser to see your updates
New Perspectives on The Internet, Seventh Edition
20
Inserting and Formatting a
Paragraph
XP
• To insert a paragraph in an HTML document:
– Type the opening paragraph tag <p>
– Type the paragraph text
– Type the closing paragraph tag </p>
• To change font style:
– Enclose the text in the appropriate tags
– To change text to italics, use the italic tags <i> and
</i>
– To change text to bold, use the bold tags <b> and
</b>
New Perspectives on The Internet, Seventh Edition
21
Paragraph Added to HTML
Document
New Perspectives on The Internet, Seventh Edition
XP
22
Creating a List
XP
• HTML supports three kinds of lists:
– Bulleted list (unordered list): contains a list of items
with a bullet character to the left of each item in the
list
– Numbered list (ordered list): creates a list of items
with sequential numbering for each item
– Definition list: usually associated with terms and
their definitions
New Perspectives on The Internet, Seventh Edition
23
Creating a List
New Perspectives on The Internet, Seventh Edition
XP
24
Using Pictures
in an HTML Document
XP
• Graphic: any file that contains a picture, such as
a photograph, logo, or computer-generated
image
• To include a picture in a Web page, it must be
stored as a file
• Graphic file formats commonly used on the Web:
– JPG (or JPEG)
– GIF
– PNG
New Perspectives on The Internet, Seventh Edition
25
Using Pictures
in an HTML Document
XP
• The JPG format is good for photographs and complex
graphics because JPG files support up to 16 million
colors
• GIF files are limited to 256 colors, so they are a good
choice for scanned images, line drawings, and simple
graphics
• PNG files are similar to GIF files, but support up to 16
million colors
• Nearly all Web browsers support JPG, GIF, and PNG
files; however, some older versions of browsers do not
support PNG files, and as such it is not as popular on the
Web as the JPG and GIF formats
New Perspectives on The Internet, Seventh Edition
26
Using Pictures
in an HTML Document
XP
• To use a graphic in an HTML document,
reference the file location where the graphic is
stored by using the one-sided <img /> tag
– If the graphic is stored in the same folder (directory)
as the HTML document, then the browser loads the
graphic from the same folder
– If the graphic is stored anywhere else, the reference
to it in the HTML document must include the path to
the folder or drive on which the graphic is stored
New Perspectives on The Internet, Seventh Edition
27
Using Pictures
in an HTML Document
XP
• Src (source) attribute:
– Must be included with the <img /> tag
– Defines the location of the graphic
– Relative path: specifies a file’s location relative to the
location of the current file
– Absolute path: specifies a file’s location with
absolute precision; there is no reference to the
current file
New Perspectives on The Internet, Seventh Edition
28
Using Pictures
in an HTML Document
XP
• Optional attributes for the <img /> tag are:
– Height and width: describe the graphic’s height and
width in pixels
• Pixel is a single point in an image
– Border: describes the graphic’s border size in pixels
– Alt: provides alternative text that identifies the
graphic’s function or description when it is loaded by
a browser that either does not display pictures or
reads Web page content for visually impaired users
• The alt attribute is required in XHTML, so you
should always include it
New Perspectives on The Internet, Seventh Edition
29
Broken Link Displayed in Internet
Explorer
New Perspectives on The Internet, Seventh Edition
XP
30
Using Anchors
XP
• Anchor tag (<a>):
– HTML tag that creates a hyperlink
– Two-sided tag
– Includes the href attribute, which specifies the filename of the
target page
• Target or target page: page that opens when a
hyperlink on a Web page is clicked
• Source page: Web page that contains a hyperlink
• Bookmark: hyperlink to a location on the same Web
page as the source page
New Perspectives on The Internet, Seventh Edition
31
Adding a Link to a Web Page
XP
• You can create a hyperlink at any time when
developing a Web page
• Make sure that the page to which you are linking
exists and that the page exists in the correct
location
– To avoid problems, open the source page in a
browser, and then click the hyperlink to make sure
that it opens the correct page
– Do the same testing after you publish the HTML
document to the server
New Perspectives on The Internet, Seventh Edition
32
Using a Web Site
Management Tool
XP
• Most Web developers rely on options other than
text editors for creating Web sites, such as
Microsoft Expression Web and Adobe
Dreamweaver
– These standalone programs use a graphical user
interface (GUI) to generate the HTML documents
necessary to produce Web pages
– Using a Web site management tool such as
Expression Web or Dreamweaver lessens the burden
on the developer to understand the syntax of all the
HTML tags and attributes that create Web pages
New Perspectives on The Internet, Seventh Edition
33
Web Page Created Using Microsoft
Expression Web
New Perspectives on The Internet, Seventh Edition
XP
34
HTML Document Generated by
Expression Web
New Perspectives on The Internet, Seventh Edition
XP
35
Web Page Created
Using Adobe Dreamweaver
New Perspectives on The Internet, Seventh Edition
XP
36
HTML Document Generated by
Dreamweaver
New Perspectives on The Internet, Seventh Edition
XP
37
Choosing Other Development Tools
XP
• Some Web pages include dynamic content that is
beyond the capabilities of HTML
• This dynamic content might be a graphic that
represents the number of times a page has been
viewed, an animated graphic, or an interactive
product display
• This type of Web page content requires more
than just HTML to produce
New Perspectives on The Internet, Seventh Edition
38
Programming with JavaScript
XP
• Scripting language: a programming language
that is executed by a Web browser
• Scripting engine: a browser feature that
processes scripts by translating the code in the
script into a format that the browser can execute
• JavaScript:
– Scripting language
– Originally available as part of the Netscape Navigator
browser
New Perspectives on The Internet, Seventh Edition
39
Programming with JavaScript
XP
• Microsoft created a compatible language called JScript,
and subsequently, the language VBScript, both of which
are processed by Internet Explorer
• Because JavaScript is interpreted by most browsers and
only the Internet Explorer browser can process scripts
written in VBScript, most developers choose JavaScript
to extend the functionality of a Web page
• Many Web sites include resources for downloading and
installing free scripts written in JavaScript in your Web
pages
New Perspectives on The Internet, Seventh Edition
40
Programming with JavaScript
XP
• The script itself is embedded in the head section of the
HTML document
– When you view the HTML document in a Web browser, the
browser executes the script and displays the result of the
script in the body section of the Web page
– When a browser cannot execute the script (because it does
not have a scripting engine to process the script), it simply
displays the contents of the script as text
– To avoid this situation, most scripts are enclosed in HTML
comment tags so browsers that cannot execute the script will
ignore the script as if it were really a comment
New Perspectives on The Internet, Seventh Edition
41
Programming with JavaScript
XP
• You can use a script to:
– Display a greeting based on the time of the day, or the day of the
week, or a special occasion
– Display a calendar or an interactive calendar that lets the user pick a
date
– Display the current date and time, or a countdown until a specific
day and time, such as a holiday or a grand opening
– Display scrolling text, a drop-down menu of selections, or animated
buttons that change color or display a message when the user
points to or clicks the button
– Detect the user’s browser version or open a pop-up window with a
message
– Add functionality to a Web page, such as a simple or scientific
calculator
New Perspectives on The Internet, Seventh Edition
42
Creating Animated Content
XP
• Browser extensions: software that enhances the capabilities of
Web browsers to perform tasks they were not originally designed
to perform
• Plug-ins: integrated browser software that the browser uses to
display or play a specific file that you request
• Helper applications: programs installed on the user’s computer
that the browser starts and uses to “help” display or play a file
• Add-ons: tools that enhance your browsing experience, such as
toolbars that let you access a search engine without opening its
Web site or programs that block pop-up ads and other windows
from opening when you view a Web site
New Perspectives on The Internet, Seventh Edition
43
Creating Animated Content
New Perspectives on The Internet, Seventh Edition
XP
44
Creating Animated Content
XP
• Flash:
– The Flash Player lets your Web browser display
simple animations, user interfaces, static graphics,
movies, sound, and text that was created using
Adobe Flash software
– 96% of all Internet users have the Flash Player
installed on their computers, so many Web
developers regularly use Flash to develop content
that is more visually interesting and appealing to
their site visitors
– Latest version of Internet Explorer includes the Flash
Player so users do not have to download it
New Perspectives on The Internet, Seventh Edition
45
Creating Animated Content
XP
• Shockwave Player:
– More fully featured browser plug-in than Flash Player
– Lets you view animated, 3D interfaces, interactive
advertisements and product demonstrations, multiuser
games, streaming CD-quality audio, and video that was
created using Director software
– Uses streaming technology so you do not need to wait for
an entire file to download before playing it
– According to Adobe, more than 200 million Internet users
use Shockwave Player to play games and view animated
content
New Perspectives on The Internet, Seventh Edition
46
Creating Animated Content
XP
• Flash is much less expensive to purchase than Director
(the program used to create Shockwave files), and Flash
Player is a much more widely distributed plug-in than
Shockwave Player
• Flash is the more attractive choice for creating
animation in a Web page, unless the more robust
features of Director are required for creating games and
extensive applications
• Flash is also delivered well to various types of mobile
devices, which is an important consideration given the
developments and future expansion in wireless Internet
devices
New Perspectives on The Internet, Seventh Edition
47
Choosing Image Editing and
Illustration Programs
XP
• Computer-generated graphics come in two basic
varieties:
– Raster (bitmap) graphics:
• Composed of pixels
• Also called bitmap images
– Vector graphics:
• Composed of paths
New Perspectives on The Internet, Seventh Edition
48
Graphic Created Using Windows
Paint
New Perspectives on The Internet, Seventh Edition
XP
49
Choosing Image Editing and
Illustration Programs
XP
• Raster graphics have the following filename extensions:
–
–
–
–
–
bmp
gif
jpg
png
tif
• Raster graphics are created using:
–
–
–
–
Paint
Adobe Photoshop
Adobe Fireworks
Corel Paint Shop Pro
• Any image that you take using a digital camera or make using a
scanner is a raster graphic
New Perspectives on The Internet, Seventh Edition
50
Graphic Created Using Adobe
Illustrator
New Perspectives on The Internet, Seventh Edition
XP
51
Choosing Image Editing and
Illustration Programs
XP
• Vector graphics have the following filename
extensions:
– ai
– wmf
– cdr
– dxf
• Vector graphics are created using:
– Illustrator,
– CorelDRAW
– AutoCAD programs
New Perspectives on The Internet, Seventh Edition
52
Choosing Image Editing and
Illustration Programs
XP
• Raster graphics are the choice for photographs
and graphics with different levels of shading
• Vector graphics are the choice when you need to
create drawings that require lines and curves to
create different shapes
• Raster graphics require the use of a category of
programs called image editing programs
• Vector graphics require the use of a category of
programs called illustration software
New Perspectives on The Internet, Seventh Edition
53
Choosing a Web Hosting Service
XP
• Choose a Web hosting service or a Web presence
provider to host a Web site before you begin work on
creating the Web site’s pages
• The choice of a Web hosting service is more than just
one of affordability—it is important to understand what
services the company offers and the software it uses to
host sites
• It is important to have a thorough understanding of
what is involved in upgrading your server space and
services in case your initial plan changes over time
New Perspectives on The Internet, Seventh Edition
54
Understanding Your Web Site’s
Technical Requirements
XP
• First, evaluate your Web site’s content and goals and
understand the tools that you will be using to create
your pages
• Storyboard:
– Sketch of the Web site that shows the pages that you plan to
include, separated into levels that show the relationships of
the pages to each other
– Also called the site’s navigation structure, because it shows
the path of navigation through the site
New Perspectives on The Internet, Seventh Edition
55
Sample Storyboard
New Perspectives on The Internet, Seventh Edition
XP
56
Understanding Your Web Site’s
Technical Requirements
XP
• If you have pages that process information, such as
collecting data supplied by the user in a form and storing it
in a database or other file or sending the results of that form
to an e-mail address, the Web server must collect the data
and save it in the specified format
• The Web server must rely on a server extension or a script
to process the data collected in the form
• If your site uses Active Server Pages (ASP)—dynamic Web
pages based on the content stored in a database—you’ll
need to store the site on a Windows-based Web server
because the Unix and Linux Web servers do not support ASP
New Perspectives on The Internet, Seventh Edition
57
Using a Secure Server
XP
• Secure sever: encrypts data
• Dedicated server: Web server that hosts only
one site
• Shared server: hosts several sites
• If you plan to use a secure server, you need to
install a server certificate to prove to users that
the site is actually secure
New Perspectives on The Internet, Seventh Edition
58
Understanding Your Web Site’s File
Size and Transfer Requirements
XP
• Consider the amount of traffic your site will
receive and the sizes of the files that users will
download from the Web server
• Bandwidth or data transfer: amount of data that
is transferred from the Web server
– Most companies sell server space based on a file size
limit and a daily or monthly data transfer limit
– When you exceed either of these limits, you might
incur extra fees from the Web hosting service or your
Web hosting service might not be able to increase
your Web site’s server space or bandwidth
New Perspectives on The Internet, Seventh Edition
59
Understanding Your Web Site’s File
Size and Transfer Requirements
XP
• Make sure that the company you select to host your site
has technical support services available to you when
you need them, especially if you are a new Web site
developer
• When you talk to people at the Web hosting service, try
to get a sense of the level of support and service that it
provides
• When you view the online help resources, you can get a
sense of the company’s intended audience and whether
it will assist you with future questions
New Perspectives on The Internet, Seventh Edition
60
Securing a Domain Name
XP
• When securing a Web hosting service, ask about the
Web hosting service’s policy for securing a domain
name for your Web site
– You can use a registrar such as Register.com to enter your
proposed domain name and check its availability
– If the domain name you want is available, see if the Web
hosting service can purchase it as part of your hosting
agreement and assist you to establish the company as the
Web site’s host
– When you renew your Web site hosting contract, ask the
company if it provides domain name renewal service so it will
automatically renew your domain for you
New Perspectives on The Internet, Seventh Edition
61
Asking about Other Services Offered by XP
the Web Hosting Service
• Items, such as site statistics, e-mail accounts for
the domain name you registered, Web site
templates, Web site construction tools, and
database software are “value added” by most
companies
• You might need to pay an extra service fee to
obtain detailed site traffic reports, but this
information is very valuable when analyzing who
is coming to your site and which pages they are
viewing
New Perspectives on The Internet, Seventh Edition
62
Publishing a Web Site
XP
• Publishing your Web site means moving your files to the
company’s Web server
• Most companies will ask you to use FTP to move your
files
• Control panel: Web page you access with your Web
site’s user name and password that includes all the
tools
• If you are using a Web site management program, you
can use the tools in those programs to publish your
Web site
New Perspectives on The Internet, Seventh Edition
63
Publishing a Web Site
XP
• When you move your Web site’s files to the Web server,
include all of the folders and supporting files to the Web
server, and not just the Web site’s HTML documents
– A common mistake is to omit the Web site’s supporting files,
such as pictures and multimedia files
– If your HTML documents include relative links to supporting
files, include the supporting files in the same folders as the
HTML documents
– If your HTML documents include absolute links, make sure
that the location of the absolute link is available
New Perspectives on The Internet, Seventh Edition
64
Publishing a Web Site
XP
• After you publish a Web site for the first time, make any
changes to the copy that you stored on your local drive,
and then move those files to the Web server
• If something happens to the Web site stored on the
Web server (the remote Web site), you will be able to
publish the files from the copy of the Web site on your
hard or other local drive (the local Web site)
• If you make changes to pages stored on the server and
someone is viewing those pages at the same time that
you are editing them, they will have problems with
broken links and other problems while you are editing
the page
New Perspectives on The Internet, Seventh Edition
65
Search Engine
Submission and Optimization
XP
• The <meta> tag is a summary of the page’s contents
that a search engine might include in its search results
• A search engine indexes the page by looking at the
keywords in the <meta> tag to identify the search
expressions that users might type to locate your page
• Search engine submission: process of submitting your
site’s URL to one or more search engines so they will list
your site in their indexes
• Search engine optimization: process of fine-tuning your
site so that it ranks well in a search engine’s results
when a user searches the Web using your site’s
keywords
New Perspectives on The Internet, Seventh Edition
66
Summary
XP
• Markup languages are used to create Web pages
• Text editors are one way to create a simple Web page
that includes a graphic, a heading, a paragraph with
formatted text, a bulleted list, and a hyperlink
• Programs such as Microsoft Expression Web and Adobe
Dreamweaver are more sophisticated ways to create
Web pages and manage a Web site
• JavaScript can display animated content in a Web page
• Image editing programs and illustration software create
graphics
New Perspectives on The Internet, Seventh Edition
67
Summary
XP
• The Flash Player and the Shockwave Player are two
programs that are popular for displaying animated
content
• Consider all the issues when selecting a Web hosting
service
• Move all of your Web site’s files from your local drive to
a Web server
• To list a Web site in search engines, create <meta> tags
to cause your Web site to be ranked high in the search
engine results
New Perspectives on The Internet, Seventh Edition
68