Tutorial.08 - Cnit.us

cornawakeSoftware and s/w Development

Nov 4, 2013 (3 years and 11 months ago)

94 views

Tutorial 8:


Creating Effective Web Pages

New Perspectives on the Internet, 9th Edition

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


2

New Perspectives on the Internet, 9th Edition

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

3

Session 8.1 Visual Overview

Understanding HTML

New Perspectives on the Internet, 9
th

Edition

4

New Perspectives on the Internet, 9th Edition

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


5

New Perspectives on the Internet, 9th Edition

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

6

New Perspectives on the Internet, 9th Edition

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


7

New Perspectives on the Internet, 9th Edition

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

8

New Perspectives on the Internet, 9th Edition

Planning an HTML Document

9

New Perspectives on the Internet, 9th Edition

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


10

New

Perspectives on the Internet, 9th Edition

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 semi
-
colon

11

New

Perspectives on the Internet, 9th Edition

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

12

Creating an HTML Document

New Perspectives on the Internet, 9
th

Edition

13

New Perspectives on the Internet, 9th Edition

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


14

New Perspectives on the Internet, 9th Edition

Using Images in an HTML Document

15

New Perspectives on the Internet, 9th Edition

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


16

New Perspectives on the Internet, 9th Edition

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


17

New Perspectives on the Internet, 9th Edition

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


18

Session 8.2 Visual Overview

Creating a Web Site

New Perspectives on the Internet, 9
th

Edition

19

Evaluating Web Site Content

New Perspectives on the Internet, 9
th

Edition

20


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

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

21

Using a Web Site Management Tool

New Perspectives on the Internet, 9
th

Edition

22


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

Using a Web Site Management Tool

New Perspectives on the Internet, 9
th

Edition

23


Dreamweaver
generates
code that is
compatible
with
XHTML 1.0



New Perspectives on the Internet, 9th Edition

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

24

New
Perspectives on the Internet, 9th Edition

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

25

New Perspectives on the Internet, 9th Edition

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


26

New Perspectives on the Internet, 9th Edition

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

27

New Perspectives on the Internet
, 9th Edition

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, three
-
dimensional interfaces, interactive advertisements
and product demonstrations, multiuser games,
streaming CD
-
quality audio, and video that was
created using Adobe Director software


28

New Perspectives on the Internet, 9th Edition


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



29

Choosing Other Development Tools

New Perspectives on the Internet, 9th Edition


Choosing Image Editing and Illustration
Programs
(continued)


Raster graphics have the following file extensions:


.bmp


.gif


.jpg


.
png


.
tif

30

Choosing Other Development Tools

New Perspectives on the Internet, 9th Edition


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

31

Choosing Other Development Tools

New Perspectives on the Internet, 9th Edition


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

32

Choosing Other Development Tools

New Perspectives on the Internet, 9th Edition


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

33

Choosing
a Web Hosting Service

New Perspectives on the Internet, 9th Edition


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


34

Choosing a Web Hosting Service

New Perspectives on the Internet, 9th Edition


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

35

Choosing a Web Hosting Service

New Perspectives on the Internet, 9th Edition


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

36

Publishing a Web Site

New Perspectives on the Internet, 9th Edition


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



37

Search Engine Submission and
Optimization

Search Engine Submission and
Optimization

New Perspectives on the Internet, 9
th

Edition

38