Transcript html

The Web Wizard’s Guide
to HTML
Chapter One
World Wide Web Basics
Chapter Objectives





Show how Web page authors and computers work
together
Look behind the scenes when a browser displays a
Web page
Explain what HTML is and how Web pages use
HTML
Demonstrate how to create Web pages with nothing
more than a text editor and a browser
Explore the role of HTML standards on the Web
To View the World Wide Web
You Need

An Internet-ready computer
 An Internet access account
 A Web browser
To Create a Web Site
You Need

An Internet-ready computer
 A text editor (or Web page construction kit)
 An Internet access account
 A password-protected account on a Web server
Uniform Resource Locator
(URL)

All Web pages are addressed with URLs
 The URL specifies
– A server name
– A directory path
– A filename

URLs are part of the HTTP (Hypertext
Transfer Protocol) communications
protocol.
Web Page Displays

All browsers are designed to display .html
and .htm files
 Browsers have to rework their page displays
whenever a browser window is resized
 Web pages can look a little different on
different computers
 Web page authors cannot completely
control their page displays
The Hypertext Markup
Language (HTML)

HTML formatting commands control Web
page displays
 All HTML formatting is achieved with
HTML elements
 All HTML elements are based on HTML
tags and tag-pairs
 HTML files can be created with text editors
A HTML TagTemplate
<html>
<head>
<title>
(insert text for the browser’s title bar here)
</title>
</head>
<body>
(insert visible Web page elements here)
</body>
</html>
HTML Editors

Pros
– Offer lots of useful features
– Help you avoid tagging errors
– Can save time

Cons
– Can interfere with HTML mastery
– Can be intimidating for beginners
Industry Standards



Most HTML tags are in the official HTML
standard
All HTML-compliant browsers recognize
the standard HTML tag set
The World Wide Web Consortium (W3C)
sets the industry standard for HTML
Non-Standard HTML




Some HTML tags are browser-specific
extensions to HTML
Netscape Navigator and Internet Explorer
do not always recognize each other’s
HTML extensions
Web pages that use non-standard HTML
may not display well for all users
Browser manufacturers create their own
HTML extensions to influence the
industry standard
HTML Validation Services




A validation service on the Web can check
an HTML file for you
A validation service can be used to
identify tagging errors and HTML
extensions
Some HTML tagging errors are difficult to
locate by manual inspection
If you don’t use an HTML editor, a
validation service can be very helpful
The Web Wizard’s Guide
to HTML
Chapter Two
Basic Text Formatting
Chapter Objectives

Show how to create heading and paragraphs for
Web pages
 Explain how to control a variety of features
associated with text
 Learn how to add three types of lists to a Web
page
 Explore the layout and white-space controls for
blocks of text
Heading Elements

Headings come in six sizes
 <h1> </h1> is the largest heading
 <h6> </h6> is the smallest heading

Headings break up text with titles and
subtitles
Tag Attributes

Most HTML tags support their own set of
tag attributes
 Each attribute contains an attribute name
and an attribute value
 E.g. you can center a heading with an
alignment attribute:
<h1 align=“center”>
Breaking Up Text
The paragraph element <p> begins a block
of text after an empty line
 The break element <br> begins a block of
text on a new line
 The horizontal rule element <hr> inserts a
horizontal line to emphasize a break in the
text

Standard Type Face Options


<font face=“Arial”> </font>
It is best to specify type faces in groups since
different computers use different type fonts:
face=“Arial, Geneva, Helvetica”
face=“Times New Roman, Times”
face=“Courier New, Courier”
 Other useful font attributes include color and
size
Three Types of Lists
Ordered list
<ol>
<li> </li> Unordered list
<ul>
</ol>
<li> </li> Definition list
<dl>
</ul>
<dt> </dt>
<dd> </dd>
</dl>
White Space Management

Browsers are programmed to ignore extraneous
blank spaces and empty lines
 Controlling white space on a Web page requires
special HTML elements:
&nbsp;
<br>
<pre></pre>
<blockquote></blockquote>
The Web Wizard’s Guide to
HTML
Chapter Three
Colors, Patterns, and
Inline Graphics
Chapter Objectives

Demonstrate how to add colors to a Web
page
 Explain how to add background patterns
 How how to add images to a Web page
 Explain the use of relative addresses for
image files
 Investigate the interplay between design
decisions and bandwidth consumption
Background Colors

The bgcolor attribute inside the body
tag is used to specify a Web page’s
background color:
<body bgcolor=“black”>

Bgcolor values can also be expressed in
hexadecimal notation:
<body bgcolor=“#AA33CC”>
Web-safe Colors

Different computers and computer monitors
may display the same hexadecimal color
very differently

216 color codes are “safe” in the sense that
they are displayed identically or almost
identically on all computers
Background Patterns

The background attribute inside the body
tag is used to specify a background pattern:
<body background=“water.jpg”>

All background patterns are repeated like tiles
to fill up a Web page’s background
Inline Images

The src attribute inside the img tag is used
to add an image to a Web page:
<img src=“donut.gif”>

GIF and JPG are the most commonly used
file formats for inline images – browsers only
recognize GIF, JPG, and PNG image formats
Image Attributes

The align attribute positions the image and
enables text to flow around an image

The height and width attributes scale
the image to any size you like

The alt attribute allows you to describe the
image in text for browsers that can’t display
the image
Flowing Text

Use the align attribute to make text flow
alongside an image:
<img src=“donut.gif”
align=“left”>
positions the image on the left side of the page
and allows text to run down its right side
Relative Paths

The src attribute for an image file retrieves
images from the same directory as the HTML
file containing the img tag:
<img src=“donut.gif”>

If you want to retrieve an image from a
different directory, you can add path
information to the file name:
<img src=“pix/donut.gif”>
Bandwidth Limitations


Image files consume more bandwidth than
text files
Users who access the Internet via telephone
lines will have to wait for image files that are
100KB or larger
 Whenever possible, use image files no larger
than 30-40KB
Battling Bandwidth Limitations

Always specify height and width
attributes for all your images so the browser
can “work around” each image while it is
downloading
Don’t put any large images at the top of a
Web page
 Use interlaced GIFs and progressive JPGs
 Use the 1x1 image trick (with caution)

The Web Wizard’s Guide
to HTML
Chapter Four
All About Hyperlinks
Chapter Objectives

Introduce three types of hyperlinks
 Explain how to add absolute URLs
 Explain how to add relative URLs
 Explain how to add named anchors
 Examine the problem of link maintenance
Different Types of Hyperlinks

Absolute URLs point to Web pages on other
Web servers

Relative URLs point to Web pages on the
same Web server

Named Anchors point to a different location
on the current Web page
All Hyperlinks Have Two Parts

The Link Label is the visible element that the user
points to and clicks (link labels can be text
segments or images)

The Link Destination is the location that the link
takes you to when you click on the link

Only the link destinations are handled differently
for absolute URLs, relative URLs, and named
anchors
Anchor Tags

All hyperlinks are created with the anchor
tag:
<a>this is a link label</a>

The href attribute is used to specify the
link destination:
<a href=“destination.html”>
Absolute URLs

All absolute URLs use complete URL addresses for
their link destinations:
<a href=“http://www.umass.edu/”>UMass-Amherst</a>

Any Web page can be referenced by an absolute
URL as long as you have its correct address
Relative URLs

A relative URL need only specify a file name for its link
destination:
<a href=“treehouse.html”>tree houses</a>

This assumes the destination file is in the same directory as
the HTML file containing the link

If the file is in a different directory, pathing information
must be added to the href value
Named Anchors

A named link destination specifies a location that has been
marked by an anchor tag with a name attribute
<a href=“#lumber”>Some Good Lumber</a>
<a name=“lumber”>some good lumber</a>

The href value is prefaced with the # character but the
name value is not
Named Anchors
Combined with Other Links

A named anchor can be added to an absolute or
relative link as long as the destination being
referenced contains that named anchor
<a href=“treehouse.html#lumber”>Some
Good Lumber</a>

Just add a # followed by the anchor’s name to the
end of the file name in the href value
Link Maintenance

An absolute link that works today may not work
tomorrow

Dead links frustrate visitors and detract from your
Web pages

To keep all of your links operational, you have to
test them periodically and update any that have died
Automated Link Checkers

If you have a large number of links, you should
automate the process of link testing

You can subscribe to a Web-based service for link
testing and weekly or monthly link reports

You can obtain your own link testing software and
run it yourself
The Web Wizard’s Guide
to HTML
Chapter Five
Working with Images
Chapter Objectives

Explain when to employ the GIF, JPEG, and
PNG file formats
 Show how thumbnail previews can
minimize bandwidth consumption
 Find out how to create and use transparent
GIFs
 Demonstrate how to create an image map
 Introduce animated GIFs and streaming
media
GIF
(Graphics Interchange Format)

Uses an adaptive 8-bit color palette (256
colors)

Especially suitable for line art and cartoons

Can work well for some photographs
JPEG
(Joint Photographic Experts Group)

Uses a fixed 24-bit color palette (millions of
colors)

Especially suitable for high-resolution
photographs

Uses lossy file compression
Lossy Image Compression

Trades image quality for memory savings

Very good for minimizing bandwidth

You control the trade-off when you save the
image
Interlaced GIFs

Displays images incrementally in four passes

Gives users something to look at while the
image is still downloading

Any GIF image can be converted to an
interlaced GIF
Thumbnail Previews

Let your visitors decide if they want to download a
large (bandwidth intensive) image

Use lossy file compression to create a small (light
bandwidth) thumbnail version of the original image

Make the thumbnail sketch a link label so users can
click through to the original image if they want it
Transparent GIFs

Transparent regions in an image allow the
background color or pattern of a Web page to show
through

Any GIF image can be made transparent by
specifying one color in the image that defines its
transparent regions

The background of a photograph can be made
transparent after some graphics editing
Image Maps

Navigational menus and navigation bars have
clickable regions that take the user to different
locations

HTML’s map element makes it possible to specify
different clickable regions within a single image

Image maps can be created manually with the
“ISMAP trick” or with the help of an image mapper
Animated GIFs

The GIF file format supports cartoon
animations

An animated GIF is stored in a single GIF file

To display an animated GIF, just specify the
GIF file in the SRC attribute of an IMG tag
Streaming Media

Video and audio files are often available on the Web
via streaming media

A media player is needed to process streaming
media

By buffering very large files in successive pieces, a
media player can render one portion of a video or a
recording long before the rest of the file has arrived
The Web Wizard’s Guide
to HTML
Chapter Six
Tables
Chapter Objectives

Examine the structure of HTML tables
 Explore the most important table attributes
 Learn how tables can be used to format text
 Learn how tables can be used to format graphics
 Explain some caveats and warnings associated
with tables
The Table Element
Each table tag pair <table></table> can
hold any number of table rows
 Each table row tag pair <tr></tr> can hold
any number of table data items
 Each table data tag pair <td></td> can
hold text, images, and other HTML elements

Table Cells

A table cell is another name for a table data
element
 Tables cells can be distinguished by their own
background colors, type fonts, alignments, etc.
 A table containing a single cell can be used to
frame an image or offset important text
Table Attributes

You can center HTML elements on a Web page by
embedding them inside a single-celled table with
a width=“100%” table attribute and an
align=“center” table data attribute

A border=“5” table attribute creates a 3-D
picture frame for a single-celled table containing
an image
Tables and Text

Text is hard to read against a busy background
pattern, but you can lay a table containing text on
top of a background pattern without sacrificing
readability (just give the table a solid background
color)

Tables can also be used to separate text into two
columns (a cellpadding=“20” table attribute
will put white space between the two columns)
Web Page Borders

Empty table columns can be used to create
margins for text on a Web page

Use a fixed width attribute (e.g. width=“50”)
for the empty table data element

A left-hand margin is necessary if you want to run
a graphical border down the left side of a Web
page (by tiling a very wide background pattern)
Tables and Graphics

Tables can be used to control a Web page layout
for multiple images (or images mixed with text)

Images of different sizes can be fit together in
irregularly-shaped tables using cell-structure
diagrams

All tables have an underlying cell structure with a
uniform number of table cells across each table
row
colspan and rowspan

colspan and rowspan are table data attributes
that are used to create irregular tables

A table cell can be extended horizontally with the
colspan attribute

A table cell can be extended vertically with the
rowspan attribute
One vs. Many

If you have one very large table, try to break it up into a
sequence of smaller tables that can be stacked vertically
on a Web page

Browsers have to download the contents of an entire table
before any of the table can be viewed

Multiple tables will be displayed incrementally so the
user will be able to see the first part of your page while
the rest of the page is still downloading
The Web Wizard’s Guide
to HTML
Chapter Two
Basic Text Formatting
Chapter Objectives

Show how to create heading and paragraphs for
Web pages
 Explain how to control a variety of features
associated with text
 Learn how to add three types of lists to a Web
page
 Explore the layout and white-space controls for
blocks of text
Heading Elements

Headings come in six sizes
 <h1> </h1> is the largest heading
 <h6> </h6> is the smallest heading

Headings break up text with titles and
subtitles
Tag Attributes

Most HTML tags support their own set of
tag attributes
 Each attribute contains an attribute name
and an attribute value
 E.g. you can center a heading with an
alignment attribute:
<h1 align=“center”>
Breaking Up Text
The paragraph element <p> begins a block
of text after an empty line
 The break element <br> begins a block of
text on a new line
 The horizontal rule element <hr> inserts a
horizontal line to emphasize a break in the
text

Standard Type Face Options


<font face=“Arial”> </font>
It is best to specify type faces in groups since
different computers use different type fonts:
face=“Arial, Geneva, Helvetica”
face=“Times New Roman, Times”
face=“Courier New, Courier”
 Other useful font attributes include color and
size
Three Types of Lists
Ordered list
<ol>
<li> </li> Unordered list
<ul>
</ol>
<li> </li> Definition list
<dl>
</ul>
<dt> </dt>
<dd> </dd>
</dl>
White Space Management

Browsers are programmed to ignore extraneous
blank spaces and empty lines
 Controlling white space on a Web page requires
special HTML elements:
&nbsp;
<br>
<pre></pre>
<blockquote></blockquote>
The Web Wizard’s Guide to
HTML
Chapter Three
Colors, Patterns, and
Inline Graphics
Chapter Objectives

Demonstrate how to add colors to a Web
page
 Explain how to add background patterns
 How how to add images to a Web page
 Explain the use of relative addresses for
image files
 Investigate the interplay between design
decisions and bandwidth consumption
Background Colors

The bgcolor attribute inside the body
tag is used to specify a Web page’s
background color:
<body bgcolor=“black”>

Bgcolor values can also be expressed in
hexadecimal notation:
<body bgcolor=“#AA33CC”>
Web-safe Colors

Different computers and computer monitors
may display the same hexadecimal color
very differently

216 color codes are “safe” in the sense that
they are displayed identically or almost
identically on all computers
Background Patterns

The background attribute inside the body
tag is used to specify a background pattern:
<body background=“water.jpg”>

All background patterns are repeated like tiles
to fill up a Web page’s background
Inline Images

The src attribute inside the img tag is used
to add an image to a Web page:
<img src=“donut.gif”>

GIF and JPG are the most commonly used
file formats for inline images – browsers only
recognize GIF, JPG, and PNG image formats
Image Attributes

The align attribute positions the image and
enables text to flow around an image

The height and width attributes scale
the image to any size you like

The alt attribute allows you to describe the
image in text for browsers that can’t display
the image
Flowing Text

Use the align attribute to make text flow
alongside an image:
<img src=“donut.gif”
align=“left”>
positions the image on the left side of the page
and allows text to run down its right side
Relative Paths

The src attribute for an image file retrieves
images from the same directory as the HTML
file containing the img tag:
<img src=“donut.gif”>

If you want to retrieve an image from a
different directory, you can add path
information to the file name:
<img src=“pix/donut.gif”>
Bandwidth Limitations


Image files consume more bandwidth than
text files
Users who access the Internet via telephone
lines will have to wait for image files that are
100KB or larger
 Whenever possible, use image files no larger
than 30-40KB
Battling Bandwidth Limitations

Always specify height and width
attributes for all your images so the browser
can “work around” each image while it is
downloading
Don’t put any large images at the top of a
Web page
 Use interlaced GIFs and progressive JPGs
 Use the 1x1 image trick (with caution)

The Web Wizard’s Guide
to HTML
Chapter Four
All About Hyperlinks
Chapter Objectives

Introduce three types of hyperlinks
 Explain how to add absolute URLs
 Explain how to add relative URLs
 Explain how to add named anchors
 Examine the problem of link maintenance
Different Types of Hyperlinks

Absolute URLs point to Web pages on other
Web servers

Relative URLs point to Web pages on the
same Web server

Named Anchors point to a different location
on the current Web page
All Hyperlinks Have Two Parts

The Link Label is the visible element that the user
points to and clicks (link labels can be text
segments or images)

The Link Destination is the location that the link
takes you to when you click on the link

Only the link destinations are handled differently
for absolute URLs, relative URLs, and named
anchors
Anchor Tags

All hyperlinks are created with the anchor
tag:
<a>this is a link label</a>

The href attribute is used to specify the
link destination:
<a href=“destination.html”>
Absolute URLs

All absolute URLs use complete URL addresses for
their link destinations:
<a href=“http://www.umass.edu/”>UMass-Amherst</a>

Any Web page can be referenced by an absolute
URL as long as you have its correct address
Relative URLs

A relative URL need only specify a file name for its link
destination:
<a href=“treehouse.html”>tree houses</a>

This assumes the destination file is in the same directory as
the HTML file containing the link

If the file is in a different directory, pathing information
must be added to the href value
Named Anchors

A named link destination specifies a location that has been
marked by an anchor tag with a name attribute
<a href=“#lumber”>Some Good Lumber</a>
<a name=“lumber”>some good lumber</a>

The href value is prefaced with the # character but the
name value is not
Named Anchors
Combined with Other Links

A named anchor can be added to an absolute or
relative link as long as the destination being
referenced contains that named anchor
<a href=“treehouse.html#lumber”>Some
Good Lumber</a>

Just add a # followed by the anchor’s name to the
end of the file name in the href value
Link Maintenance

An absolute link that works today may not work
tomorrow

Dead links frustrate visitors and detract from your
Web pages

To keep all of your links operational, you have to
test them periodically and update any that have died
Automated Link Checkers

If you have a large number of links, you should
automate the process of link testing

You can subscribe to a Web-based service for link
testing and weekly or monthly link reports

You can obtain your own link testing software and
run it yourself
The Web Wizard’s Guide
to HTML
Chapter Five
Working with Images
Chapter Objectives

Explain when to employ the GIF, JPEG, and
PNG file formats
 Show how thumbnail previews can
minimize bandwidth consumption
 Find out how to create and use transparent
GIFs
 Demonstrate how to create an image map
 Introduce animated GIFs and streaming
media
GIF
(Graphics Interchange Format)

Uses an adaptive 8-bit color palette (256
colors)

Especially suitable for line art and cartoons

Can work well for some photographs
JPEG
(Joint Photographic Experts Group)

Uses a fixed 24-bit color palette (millions of
colors)

Especially suitable for high-resolution
photographs

Uses lossy file compression
Lossy Image Compression

Trades image quality for memory savings

Very good for minimizing bandwidth

You control the trade-off when you save the
image
Interlaced GIFs

Displays images incrementally in four passes

Gives users something to look at while the
image is still downloading

Any GIF image can be converted to an
interlaced GIF
Thumbnail Previews

Let your visitors decide if they want to download a
large (bandwidth intensive) image

Use lossy file compression to create a small (light
bandwidth) thumbnail version of the original image

Make the thumbnail sketch a link label so users can
click through to the original image if they want it
Transparent GIFs

Transparent regions in an image allow the
background color or pattern of a Web page to show
through

Any GIF image can be made transparent by
specifying one color in the image that defines its
transparent regions

The background of a photograph can be made
transparent after some graphics editing
Image Maps

Navigational menus and navigation bars have
clickable regions that take the user to different
locations

HTML’s map element makes it possible to specify
different clickable regions within a single image

Image maps can be created manually with the
“ISMAP trick” or with the help of an image mapper
Animated GIFs

The GIF file format supports cartoon
animations

An animated GIF is stored in a single GIF file

To display an animated GIF, just specify the
GIF file in the SRC attribute of an IMG tag
Streaming Media

Video and audio files are often available on the Web
via streaming media

A media player is needed to process streaming
media

By buffering very large files in successive pieces, a
media player can render one portion of a video or a
recording long before the rest of the file has arrived
The Web Wizard’s Guide
to HTML
Chapter Six
Tables
Chapter Objectives

Examine the structure of HTML tables
 Explore the most important table attributes
 Learn how tables can be used to format text
 Learn how tables can be used to format graphics
 Explain some caveats and warnings associated
with tables
The Table Element
Each table tag pair <table></table> can
hold any number of table rows
 Each table row tag pair <tr></tr> can hold
any number of table data items
 Each table data tag pair <td></td> can
hold text, images, and other HTML elements

Table Cells

A table cell is another name for a table data
element
 Tables cells can be distinguished by their own
background colors, type fonts, alignments, etc.
 A table containing a single cell can be used to
frame an image or offset important text
Table Attributes

You can center HTML elements on a Web page by
embedding them inside a single-celled table with
a width=“100%” table attribute and an
align=“center” table data attribute

A border=“5” table attribute creates a 3-D
picture frame for a single-celled table containing
an image
Tables and Text

Text is hard to read against a busy background
pattern, but you can lay a table containing text on
top of a background pattern without sacrificing
readability (just give the table a solid background
color)

Tables can also be used to separate text into two
columns (a cellpadding=“20” table attribute
will put white space between the two columns)
Web Page Borders

Empty table columns can be used to create
margins for text on a Web page

Use a fixed width attribute (e.g. width=“50”)
for the empty table data element

A left-hand margin is necessary if you want to run
a graphical border down the left side of a Web
page (by tiling a very wide background pattern)
Tables and Graphics

Tables can be used to control a Web page layout
for multiple images (or images mixed with text)

Images of different sizes can be fit together in
irregularly-shaped tables using cell-structure
diagrams

All tables have an underlying cell structure with a
uniform number of table cells across each table
row
colspan and rowspan

colspan and rowspan are table data attributes
that are used to create irregular tables

A table cell can be extended horizontally with the
colspan attribute

A table cell can be extended vertically with the
rowspan attribute
One vs. Many

If you have one very large table, try to break it up into a
sequence of smaller tables that can be stacked vertically
on a Web page

Browsers have to download the contents of an entire table
before any of the table can be viewed

Multiple tables will be displayed incrementally so the
user will be able to see the first part of your page while
the rest of the page is still downloading
The Web Wizard’s Guide
to HTML
Chapter Seven
Frames
Chapter Objectives

Show how to construct frame-based
displays
 Explain how frames can be used to facilitate
Web site navigation
 Show how to make and easy-to-browse art
of photo gallery with frames
 Explore the controversial practice of deep
linking
The Frameset Element

The frameset tag pair should follow the
head element, replacing the body element

The cols and rows attributes are used to
divide the Web page into frames

Each frame is represented by a separate
frame element
The Frame Element

Each frame tag should contain a name
attribute

The name attribute can be used by a
target attribute if you want to send a link
destination from a hyperlink in one frame to
a different frame

Each frame tag should contain a src
attribute that specifies a Web page
Frames for Site Navigation

A typical frame layout uses two nested
frameset elements to divide a Web page
into three frames:
1.
The title frame runs across the top of the Web
page
A navigational frame occupies a left-hand border
under the title frame
A content frame occupies the remainder of the
Web page
2.
3.
Art Galleries with Frames

The three-frame layout works well for an
online art gallery

Fill the navigation frame with clickable
thumbnail previews

When a user clicks on a thumbnail
preview, send the original image to the
content frame
Deep Linking

A deep link is any absolute link inside a
framed Web page that displays the
destination page inside the frame system

You can avoid deep links by sending them
to a new browser window

Any link can be routed to a new browser
window with the target attribute
Problems with Frames

Not all browsers support frames

It is difficult for others to link to content
inside a frame

It’s easy to create deep links by accident
Advantages of Frames

Frames support intuitive site layouts that
are easy to navigate

Site development efforts can focus on
content and navigation as independent
problems
The Web Wizard’s Guide
to HTML
Chapter Eight
Publishing on the Web
Chapter Objectives





Run through a checklist of things to do before
uploading a Web page
Explain how to upload files using a Web browser
Explain how to upload files using a Web page
construction kit
Explain how to upload files using an FTP client
Explore some common troubleshooting scenarios
Seven Things to Check

Display each of your pages one last time
 Test all of your hyperlinks
 Compress any JPG images
 Make sure all img tags have width,
height, and alt attributes
 Make sure your pages are easy to navigate
 Identify yourself and acknowledge any
sources
 Include appropriate copyright statements
What You Need

A userid and password for your Web server
 The host address for your Web server
 The directory path to your account on your
Web server
 The URL for your homepage
Use Your Web Browser

Web browsers can create FTP connections
to Web servers
 You have to log in using your userid and
password
 The browser will display remote directories
in your browser window
 You can upload files by dragging file icons
into the directory display
Use a Web Page
Construction Kit

Construction kits include Netscape
Communicator’s Composer, Miscrosoft’s
Frontpage, or Macromedia’s Dreamworks

Look for a “publish” feature

Each interface will work a little differently
Use an FTP Client

This is the best solution for folks who
expect to be doing ongoing site
development or maintenance

Many free FTP clients are available on the
Internet
Troubleshooting:
404 Not Found

Your URL is incorrect

You uploaded your file to the wrong
directory

Your upload failed and you need to upload
again
Troubleshooting:
404 Not Found

Relative URLs depend on their surroundings
(related directories)

Your file name was altered during the
uploading process (watch for case differences)

You have an absolute URL on your local host
Troubleshooting:
Forbidden Access

If you understand Unix protection codes and
you have the right software, you can fix it
yourself

Otherwise, ask the Help Desk personnel for
your Web server for assistance
Troubleshooting:
Image Files Won’t Display

Right click over the box where the image
should be and select “View image” to find out
if it is a 404 Not Found error or a Forbidden
Access error

Once you know which type of error it is, you
can fix it just as you would fix a link error