chapter04.ppt
TRANSCRIPT
Copyright © 2003 Pearson Education, Inc.
Slide 4-1
Copyright © 2003 Pearson Education, Inc.
Slide 4-2
Created by, Stephanie Ludi, Rochester Institute of Technology—NY
Basic Web Page Construction
Chapter 4
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
Slide 4-11
Web Pages and HTML
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Basic Web Page Formatting
Copyright © 2003 Pearson Education, Inc.
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
Basic Web Page Formatting
Copyright © 2003 Pearson Education, Inc.
Slide 4-15
Basic Web Page Formatting
Copyright © 2003 Pearson Education, Inc.
Slide 4-16
An HTML attribute is a property of an HTML element that allows for fine tuning.
Basic Web Page Formatting
Copyright © 2003 Pearson Education, Inc.
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.
Basic Web Page Formatting
Copyright © 2003 Pearson Education, Inc.
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.
Basic Web Page Formatting
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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.
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
Slide 4-21
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
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.
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
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.
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
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
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
Slide 4-25
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
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.
Basic Web Page Graphics
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
Slide 4-30
Page Layouts with Tables
Copyright © 2003 Pearson Education, Inc.
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.
Page Layouts with Tables
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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
Copyright © 2003 Pearson Education, Inc.
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