Download chapter04

Slide
4-1
Copyright © 2003 Pearson Education, Inc.
Slide
4-2
Chapter 4
Basic Web Page Construction
Created by, Stephanie Ludi, Rochester Institute of Technology—NY
Copyright © 2003 Pearson Education, Inc.
Learning Objectives





Learn how to combine basic HTML elements to
create Web pages.
Understand how to use HTML tags and tag
attributes to control a Web page’s appearance.
Learn how to add absolute URLs, relative URLs,
and named anchors to your Web pages.
Find out how to use tables and frames as
navigational aids on a Web site.
Get the answers to all you questions about
copyright law and the Web.
Copyright © 2003 Pearson Education, Inc.
Slide
4-3
Taking Charge



Slide
4-4
Anyone with access to the Internet can
post a Web page.
You can create a Web page with just a text
editor.
There are Web page construction tools
available that allow you to create pages
without understanding the underlying
machinery.
Copyright © 2003 Pearson Education, Inc.
Web Pages and HTML




Slide
4-5
Web browsers are designed to display any
ASCII text file with the file name extension
.htm or .html .
You can view your Web pages locally on
your computer as you develop them.
Web browsers rework each Web page in
an effort to display it in the best way
possible.
Web page authors can control how much
the browser can dynamically adjust the
pages.
Copyright © 2003 Pearson Education, Inc.
Web Pages and HTML



Slide
4-6
Hypertext Markup Language or HTML is a
markup language that gives Web page
authors control over what a Web browser
can and can’t do when it displays a Web
page.
A markup language is not a programming
language.
A markup language is a way to insert
enhancements into a text file so a browser
can render it as specially formatted text,
text with special effects or with graphics
Copyright © 2003 Pearson Education, Inc.
Web Pages and HTML




Slide
4-7
Web page authors communicate
formatting commands to Web browsers by
inserting HTML elements in the Web page.
HTML elements give authors control over
text formatting and graphical elements.
Tables and frames are devices for
controlling the layout of a Web page.
Web authors must balance what they want
with what their visitors’ web browsers can
handle.
Copyright © 2003 Pearson Education, Inc.
Web Pages and HTML


All Web pages should contain four basic
elements:
 HTML
 HEAD
 TITLE
 BODY
You can add HTML elements to a Web page with
any text editor. Examples:
 Notepad (Windows)
 Simpletext (Macintosh)
Copyright © 2003 Pearson Education, Inc.
Slide
4-8
Web Pages and HTML


Using a text editor instead of a Web page
construction tool gives you maximum control
over your web pages.
 Web page construction tools include:
 Microsoft FrontPage (Windows)
 Macromedia Dreamweaver (Macintosh &
Windows)
 Use of MS Word is not recommended
Knowledge of HTML is still useful even when
using construction tools
Copyright © 2003 Pearson Education, Inc.
Slide
4-9
Web Pages and HTML




Slide
4-10
HTML tags tell a Web browser how to render a
Web page.
HTML tags are used to divide a Web page into
segments with different kinds of information.
You can nest HTML tag pairs inside other tag
pairs to produce a hierarchical structure for each
Web page.
Most HTML tags come in pairs, such as <TITLE>
</TITLE>
Copyright © 2003 Pearson Education, Inc.
Web Pages and HTML
Copyright © 2003 Pearson Education, Inc.
Slide
4-11
Basic Web Page Formatting



Slide
4-12
The HTML tag pair is used to mark the
beginning and the end of the page
While your page will still display without
this tag pair, you may need to use it to
differentiate your HTML page from another
type someday
The HEAD tag pair contains information
that is used behind the scenes but is not
displayed in your Web page
Copyright © 2003 Pearson Education, Inc.
Basic Web Page Formatting


Slide
4-13
The TITLE tag pair is needed to associate
a title with your Web page
 The title is displayed in the title bar of
the browser window
 The title bar is not part of the page
 The TITLE tag pair is inside of the HEAD
tag pair
The BODY tag pair is where the content of
the Web page is presented
Copyright © 2003 Pearson Education, Inc.
Basic Web Page Formatting




In many pages, the first visible element is
the heading
The heading element allows you to add a
title to the Web page body.
Do not confuse the heading element with
the HEAD element
The heading element comes in six sizes.
 <H1> </H1> : very large through
 <H6> </H6> : very small
Copyright © 2003 Pearson Education, Inc.
Slide
4-14
Basic Web Page Formatting
Copyright © 2003 Pearson Education, Inc.
Slide
4-15
Basic Web Page Formatting

An HTML attribute is a property of an
HTML element that allows for fine tuning.
Copyright © 2003 Pearson Education, Inc.
Slide
4-16
Basic Web Page Formatting



Slide
4-17
The paragraph tag <p></p> pair breaks
text up into blocks separated by blank
lines.
There are two kind of lists found in Web
pages.
 An ordered <ol></ol> list is an
enumerated list.
 An unordered list <ul></ul> is bulleted
list.
The line break tag <br> is an example of a
tag that does not come in a pair.
Copyright © 2003 Pearson Education, Inc.
Basic Web Page Formatting




Font assignment is difficult because
different computers have different fonts
available on them.
You can specify a list of font choices in
the face attribute of the font element.
Avoid designing a page that depends on
specific type properties since the user
may override them in their browser
preferences.
HTML elements can be combined by
nesting them.
Copyright © 2003 Pearson Education, Inc.
Slide
4-18
Basic Web Page Graphics





Slide
4-19
JPEG and GIF are the most common
graphics formats on the Web.
JPEG is better suited for high-resolution
photographs and complex graphics.
GIF is better suited for line drawings and
simple graphics.
The IMG HTML element creates an inline
image: <img src=“button.jpg”>
An inline image is an image that is treated
like a single alphanumeric character.
Copyright © 2003 Pearson Education, Inc.
Basic Web Page Graphics





Slide
4-20
Use the ALT attribute in the IMG tag to describe
graphic elements for users who cannot see
graphics.
The align attribute controls the vertical alignment
of the graphic: <img src=“x.jpg” align=“middle”>
Adding the Height and Width attributes to the IMG
tag will make graphics display faster on your Web
page.
The Height and Width tags can also be used to
scale an image.
A transparent GIF looks as if it were drawn on the
background of the Web page.
Copyright © 2003 Pearson Education, Inc.
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
Slide
4-21
Basic Web Page Graphics




Slide
4-22
There are 16,777,216 possible colors that
can be used as the background for a Web
page.
Web-safe colors are 216 colors that can be
faithfully reproduced on any computer
monitor regardless of the operating
system used.
Web pages use hexadecimal (base 16)
codes to describe colors.
The bgcolor attribute of the Body tag sets
the background color of the Web page.
Copyright © 2003 Pearson Education, Inc.
Basic Web Page Graphics






A color palette is a collection of colors.
8-bit and 24-bit color describe the size of
the affiliated color palette.
An 8 bit palette contains 256 colors
A 24 bit palette contains 16,777,216
colors.
JPEG images use 24-bit color.
GIF images use 8-bit color.
Copyright © 2003 Pearson Education, Inc.
Slide
4-23
Basic Web Page Graphics



Slide
4-24
You can use any JPEG or GIF file as a
background for a Web page.
The browser will place the image in the
upper-left corner and will tile it left to right.
For example,
 <BODY background=“texture.jpg”>
 The background attribute is used only
in the tag
Copyright © 2003 Pearson Education, Inc.
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
Slide
4-25
Basic Web Page Graphics





Slide
4-26
Different utilities exist for processing
images for different purposes.
An image viewer displays graphics files
quickly and easily.
Graphics editors are used to manipulate
graphics files such as photos or drawings.
Color samplers can find the hexadecimal
code of a color in a picture.
Screen shot utilities allow you to take a
picture of a window on your computer.
Copyright © 2003 Pearson Education, Inc.
Three Types of Hyperlinks


Absolute URL:
 links to a Web page on a different Web
server.
 <a href=“http://www.treehouse.com”>
The Treehouse </a>
Relative URL:
 links to a Web page on the same Web
server
 <a href=“photoalbum.html”> My Photo
Album </a>
 These URLs make your page portable
Copyright © 2003 Pearson Education, Inc.
Slide
4-27
Three Types of Hyperlinks






Slide
4-28
Named Anchor: links to a different
location on the same Web page.
In the Web page, you need to mark the
destination location in the page
The link that takes you to another location
uses the # in the anchor tag for the link
For example: <a href=“#tree”> some tall
trees </a>
Mark the destination location with the
NAME attribute in the Anchor tag
For example: <a name=“tree”> Trees </a>
Copyright © 2003 Pearson Education, Inc.
Page Layouts with Tables




Slide
4-29
Tables can be used to control the layout of
the graphical elements of a Web page.
Tables contain rows and columns.
The intersection of a row and a column is
sometimes called a cell.
HTML tags are used to designate:
 the table
 its rows
 each cell within a row
Copyright © 2003 Pearson Education, Inc.
Page Layouts with Tables
Copyright © 2003 Pearson Education, Inc.
Slide
4-30
Page Layouts with Tables






You can put anything inside of a table’s data
elements, even another table.
The border attribute of a table can be used to
create borders on your Web page.
Tables can be used to give Web pages a margin.
Each cell can have it’s own background color or
pattern.
The colspan attribute is used to extend a cell
across multiple columns.
The rowspan attribute is used to extend a cell
across multiple rows.
Copyright © 2003 Pearson Education, Inc.
Slide
4-31
Navigation Maps with Frames

A frame allows you to partition a Web
page into multiple segments so that you
can display a different HTML file within
each segment.
Copyright © 2003 Pearson Education, Inc.
Slide
4-32
Navigation Maps with Frames



Slide
4-33
You can use the same navigational aids on
all pages using frames.
Think twice about using frames, some
browsers don’t support links and some
people don’t like frames even if their
browsers support them.
Consider having a non-frames version of
your site for your visitors who don’t like or
can’t view frames.
Copyright © 2003 Pearson Education, Inc.
A Web Site Construction
Checklist





Remember the three C’s of Web page
design:
 quality Content
 reader Convenience
 artistic Composition.
Avoid common mistakes.
Write, view and test all Web pages before
installing them on a Web server.
Keep Web page titles short but accurate.
Keep download times short.
Copyright © 2003 Pearson Education, Inc.
Slide
4-34
A Web Site Construction
Checklist


Slide
4-35
Make your pages portable.
If you make your Web pages too
sophisticated, people with older browsers
will not be able to view them.
Copyright © 2003 Pearson Education, Inc.
Installing Web Pages on a Web
Server





Slide
4-36
Installing a Web page on a server is
sometimes called publishing a Web page.
Acquire access to a Web server.
Determine the DNS address of your Web
server.
Determine the pathname needed when you
upload files to the server.
Upload your Web files to the Web server.
Copyright © 2003 Pearson Education, Inc.
Installing Web Pages on a Web
Server



Determine the URL to use to view your
home page.
Fix any file protection codes that need
fixing.
You can upload files with an FTP client or
an HTML construction kit that has an
upload function.
Copyright © 2003 Pearson Education, Inc.
Slide
4-37
Copyright Law and the Web



Copyright laws protect the creative and
economic interests or writers, musicians,
and artists.
A copyright confers certain rights and
privileges to its owner.
Copyrights are normally granted to the
author of a written work or to an artist,
musician, or other person who creates
some intellectual product.
Copyright © 2003 Pearson Education, Inc.
Slide
4-38
Copyright Law and the Web




Do not violate copyright laws when you
add materials to your website.
What is protected?
Personal use of online materials.
Fair use guidelines.
Copyright © 2003 Pearson Education, Inc.
Slide
4-39