chapter04.ppt

Copyright © 2003 Pearson Education, Inc.

Slide 4-1


Slide 4-2

Created by, Stephanie Ludi, Rochester Institute of Technology—NY

Basic Web Page Construction

Chapter 4


Slide 4-3

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.

Learning Objectives


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.

Taking Charge


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.

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

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.

Web Pages and HTML


Slide 4-8

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)

Web Pages and HTML


Slide 4-9

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

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>

Web Pages and HTML


Slide 4-11

Web Pages and HTML


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

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



Slide 4-14

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



Slide 4-15



Slide 4-16

An HTML attribute is a property of an HTML element that allows for fine tuning.



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.



Slide 4-18

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.



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.

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.



Slide 4-21



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.



Slide 4-23

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.



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



Slide 4-25



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.



Slide 4-27

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

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>

Three Types of Hyperlinks


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

Page Layouts with Tables


Slide 4-30



Slide 4-31

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.



Slide 4-32

A frame allows you to partition a Web page into multiple segments so that you can display a different HTML file within each segment.

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.

Navigation Maps with Frames


Slide 4-34

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.

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.

A Web Site Construction Checklist


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.

Installing Web Pages on a Web Server


Slide 4-37

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.

Installing Web Pages on a Web Server


Slide 4-38

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 Law and the Web


Slide 4-39

Do not violate copyright laws when you add materials to your website.

What is protected? Personal use of online materials. Fair use guidelines.

Copyright Law and the Web

chapter04.ppt

Documents

web page body

html page

web authors

web site

basic web page graphics

graphics web pages

web page authors control

web pages appearance