Tutorial 1

advertisement
Tutorial 8:
Creating Effective Web Pages
Objectives
• Session 8.1
– Define HTML and understand how it works
– Examine the tools used to create HTML
documents
– Create an HTML document
– Use tags, attributes, and anchors
– Add images and links to an HTML document
New Perspectives on the Internet, 9th Edition
2
Objectives
• Session 8.2
– Plan the content for a Web site
– Examine Web site creation and management
programs
– Learn about JavaScript, Flash, and Shockwave
– Learn about the different types of images 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, 9th Edition
3
Session 8.1 Visual Overview
Understanding HTML
New Perspectives on the Internet, 9th Edition
4
Understanding Markup Languages
• A markup language is a general term that indicates
the separation of the formatting of a document and
the content of a document
• Before HTML, Standard Generalized Markup
Language (SGML)—a metalanguage that is used to
create other languages—was the standard for
formatting documents that were not dependent on
the operating system or environment in which the
documents were created or viewed
• The World Wide Web Consortium (W3C) establishes
specifications, or sets of standards, that identify how
a browser interprets the HTML code
New Perspectives on the Internet, 9th Edition
5
Understanding Markup Languages
• Extensible Markup Language (XML) is another
popular markup language that is used to describe the
format and structure of data
• Extensible Hypertext Markup Language (XHTML),
the 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
• HTML specifications that are not included when
newer specifications are released or are not included
in the XHTML specification are referred to as
deprecated
New Perspectives on the Internet, 9th Edition
6
Understanding Tags and Attributes
• Tags must identify all the elements in a Web page
• Tags that are included within other tags are called
nested tags
• Tags are either two-sided, such as <p></p>, or they
are one-sided, such as <br/>
• Some tags include attributes that specify additional
information about the content to be formatted by
the tag
• Some attributes are optional, some are not
New Perspectives on the Internet, 9th Edition
7
Planning an HTML Document
• You can create Web pages using a text editor or a
program that includes multiple features for working
with Web pages and Web sites
• The Web-safe color palette is a 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; use fonts that are considered to be
common on all computers
New Perspectives on the Internet, 9th Edition
8
Planning an HTML Document
New Perspectives on the Internet, 9th Edition
9
Creating an HTML Document
• Creating the HTML Document Structure
– The first section, called the head section, includes
the <head> tag and includes general information
about the document
– The second required section in an HTML
document is the body section, which includes the
content of the Web page along with the tags
needed to format the content
– A document type declaration (DTD) is a one-sided
tag that tells a browser which syntax version of a
markup language your document uses
New Perspectives on the Internet, 9th Edition
10
Creating an HTML Document
• Adding a Comment to an HTML Document
– A comment tag is a one-sided tag that the browser
ignores and does not display in the Web page
• Inserting and Formatting Headings
– To create a level-one heading, use the <h1> tag
– Attributes may be added to tags
– Separate multiple attribute values with a semicolon
New Perspectives on the Internet, 9th Edition
11
Creating an HTML Document
• Inserting and Formatting a Paragraph
– Content can be added to a Web page by copying
text from a document and inserting it between
<p> and </p>
– Enclose text in additional tags to change to bold or
italic
• Creating a List
– HTML supports three kinds of lists:
• Bulleted or unordered
• Numbered or ordered
• Definition list
New Perspectives on the Internet, 9th Edition
12
Creating an HTML Document
New Perspectives on the Internet, 9th Edition
13
Using Images in an HTML Document
• In HTML, an image is any file that contains a picture,
logo, or computer-generated file
• To include an image in a Web page, it must be stored
as a file
• The height and width attributes describe the image’s
height and width in pixels; a pixel is a single point in
an image
• A relative path specifies a file’s location relative to
the location of the current file
• An absolute path specifies a file’s location with
absolute precision; there is no reference to the
current file
New Perspectives on the Internet, 9th Edition
14
Using Images in an HTML Document
New Perspectives on the Internet, 9th Edition
15
Using Anchors
• The HTML tag that creates a hyperlink is the anchor
tag <a>
• The most common use of a hyperlink is to connect
the different Web pages in a Web site together
• The page that opens when a hyperlink is clicked is
called the hyperlink’s target or target page
• The Web page that contains the hyperlink is called
the source page
New Perspectives on the Internet, 9th Edition
16
Using Anchors
• The syntax of a hyperlink that connects a source page
with a target page is as follows:
<a href=“default.html”>Home Page</a>
• Most browsers underline hyperlinks and display
them in a blue font so they are easy to identify in a
Web page
• When a hyperlink is used to link to a location on the
same page, it is sometimes called a bookmark
New Perspectives on the Internet, 9th Edition
17
Adding a Link to a Web Page
• You can create a hyperlink at any time during Web
page development
• It’s important to make sure that the page is stored in
the correct location when creating a link
New Perspectives on the Internet, 9th Edition
18
Session 8.2 Visual Overview
Creating a Web Site
New Perspectives on the Internet, 9th Edition
19
Evaluating Web Site Content
• A storyboard can
help identify the
general content for
each page, the
number of pages in
the site, and the
relationship
between the site’s
pages
New Perspectives on the Internet, 9th Edition
20
Using a Web Site Management Tool
• Most Web developers rely on Web Site Management
tools rather than Notepad and HTML
• Microsoft Expression Web and Adobe Dreamweaver
are two Web site creation and management tools
– They use a graphical user interface (GUI) to
generate the HTML documents for Web pages
– Their toolbars and panels include tools that let
you format text, create hyperlinks, and perform
other tasks that are supported by HTML and
XHTML
New Perspectives on the Internet, 9th Edition
21
Using a Web Site Management Tool
• Expression Web uses
styles to define text
formatting, instead of
the tags that you used in
the HTML document you
created in Notepad
• A style is a collection of
formatting instructions
that the Web browser
applies to text
New Perspectives on the Internet, 9th Edition
22
Using a Web Site Management Tool
• Dreamweaver generates
code that is compatible
with XHTML 1.0
New Perspectives on the Internet, 9th Edition
23
Using a Web Site Management Tool
• Using a Web site management tool reduces the
burden on the developer to understand the syntax of
all the HTML tags and attributes that create Web
pages
• Web site management tools simplify some of the
tasks needed to complete a Web site
• These programs include:
– Code snippets that create animations
– Tools that let you check the entire Web site for
broken links and other problems
New Perspectives on the Internet, 9th Edition
24
Choosing Other Development Tools
• Some Web pages include content that is beyond the
capabilities of HTML, such as dynamic content
• Programming with JavaScript
– JavaScript is a scripting language that was
originally developed as “LiveScript” by a Netscape
Communications Corp. programmer
– A scripting language is a programming language
that is executed by a Web browser
– A scripting engine translates the code in the script
into a format that a browser can execute
New Perspectives on the Internet, 9th Edition
25
Choosing Other Development Tools
• Programming with JavaScript (continued)
– The most common use of JavaScript is to perform
tasks that are not possible in the static world of
HTML documents
– Many Web sites include resources for
downloading and using free scripts written in
JavaScript
New Perspectives on the Internet, 9th Edition
26
Choosing Other Development Tools
• Creating Animated Content
– Browser extensions allow a Web browser to
perform tasks it was not originally designed to
perform; types include:
• Plug-in: browser uses plug-in to display or play
a specific file that you request
• Helper application: programs installed on the
user’s computer that the browser starts and
uses to “help” display or play a file
• Add-on: includes tools that enhance the
browsing experience, such as toolbars that let
you access a search engine without opening its
Web site
New Perspectives on the Internet, 9th Edition
27
Choosing Other Development Tools
• Creating Animated Content (continued)
– Flash Player lets your Web browser display simple
animations, user interfaces, images, movies, sound,
and text that was created using Adobe Flash software
– Shockwave Player is a more fully featured browser
plug-in
– Shockwave Player lets you view animated, threedimensional interfaces, interactive advertisements
and product demonstrations, multiuser games,
streaming CD-quality audio, and video that was
created using Adobe Director software
New Perspectives on the Internet, 9th Edition
28
Choosing Other Development Tools
• Choosing Image Editing and Illustration Programs
– Computer-generated graphics come in two basic
varieties:
• Raster graphics (also called bitmaps) are
composed of pixels
• Vector graphics are composed of paths
New Perspectives on the Internet, 9th Edition
29
Choosing Other Development Tools
• Choosing Image Editing and Illustration Programs
(continued)
– Raster graphics have the following file extensions:
• .bmp
• .gif
• .jpg
• .png
• .tif
New Perspectives on the Internet, 9th Edition
30
Choosing Other Development Tools
• Choosing Image Editing and Illustration Programs
(continued)
– Vector graphics have the following file extensions:
• .ai
• .wmf
• .cdr
• .dxf
– Vector graphics are
scalable, which means their edges are smooth at
any resolution
New Perspectives on the Internet, 9th Edition
31
Choosing Other Development Tools
• Choosing Image Editing and Illustration Programs
(continued)
– 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
– Some programs, such as Fireworks and
Photoshop, do both, but most programs are
geared primarily toward one category of graphic
or the other
New Perspectives on the Internet, 9th Edition
32
Choosing a Web Hosting Service
• Ideally you choose a Web hosting service before you
begin working on a Web site
• It’s important to understand your web site’s technical
requirements when choosing a hosting service
• Understanding Types of Web Servers
– A secure server encrypts data, which changes it
into a format that prevents unauthorized parties
from being able to read or use it
– A dedicated server is a Web server that hosts only
one site
– A shared server hosts several sites
New Perspectives on the Internet, 9th Edition
33
Choosing a Web Hosting Service
• Understanding the Site’s File Size and Transfer
Requirements
– The amount of data that is transferred from the
Web server is known as the site’s bandwidth or
data transfer
– Most companies sell server space based on a file
size limit and a daily or monthly data transfer limit
– Make sure that the Web hosting service can
handle current needs as well as anticipated needs
New Perspectives on the Internet, 9th Edition
34
Choosing a Web Hosting Service
• Evaluating Other Services Offered by a Web Hosting
Service
– Other useful services offered by the Web hosting
service include site statistics, email accounts, Web
site templates, Web site construction tools,
database software, domain name management
services, and technical support
– You must secure a domain name for your Web
site; some Web hosting services include domain
name registration (and renewal) as part of their
service
New Perspectives on the Internet, 9th Edition
35
Publishing a Web Site
• After finding a Web hosting service, the next step is
publishing the site
• The Web hosting service should provide the
information you need to upload the Web site files
• A control panel is a Web page that includes all the
tools you need to access and manage your Web site
• A local Web site is a copy of the Web site stored on a
hard or local drive
• The Web site stored on the Web server is called the
remote Web site
New Perspectives on the Internet, 9th Edition
36
Search Engine Submission and
Optimization
• The last major task in publishing a Web site is
promotion
• You can be proactive and use <meta> tags to teach
search engines how to list your site
• Search engine submission is the 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 (SEO) is the 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, 9th Edition
37
Search Engine Submission and
Optimization
New Perspectives on the Internet, 9th Edition
38
Download