Slide 4-1

Copyright 2003 Pearson Education, Inc.

Slide 4-2

Chapter 4
Basic Web Page Construction

Created by, Stephanie Ludi, Rochester Institute of TechnologyNY

Copyright 2003 Pearson Education, Inc.

Slide 4-3

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 pages 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-4

Taking Charge


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.

Slide 4-5

Web Pages and HTML



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.

Slide 4-6

Web Pages and HTML



Hypertext Markup Language or HTML is a markup language that gives Web page authors control over what a Web browser can and cant 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.

Slide 4-7

Web Pages and HTML



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.

Slide 4-8

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-9

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-10

Web Pages and HTML

 

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.

Slide 4-11

Web Pages and HTML

Copyright 2003 Pearson Education, Inc.

Slide 4-12

Basic Web Page Formatting



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.

Slide 4-13

Basic Web Page Formatting



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.

Slide 4-14

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-15

Basic Web Page Formatting

Copyright 2003 Pearson Education, Inc.

Slide 4-16

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-17

Basic Web Page Formatting



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.

Slide 4-18

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-19

Basic Web Page Graphics



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.

Slide 4-20

Basic Web Page Graphics



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.

Slide 4-21

Basic Web Page Graphics

Copyright 2003 Pearson Education, Inc.

Slide 4-22

Basic Web Page Graphics



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.

Slide 4-23

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-24

Basic Web Page Graphics



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.

Slide 4-25

Basic Web Page Graphics

Copyright 2003 Pearson Education, Inc.

Slide 4-26

Basic Web Page Graphics



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.

Slide 4-27

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-28

Three Types of Hyperlinks



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.

Slide 4-29

Page Layouts with Tables



 

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.

Slide 4-30

Page Layouts with Tables

Copyright 2003 Pearson Education, Inc.

Slide 4-31

Page Layouts with Tables

 

 

You can put anything inside of a tables 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 its 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-32

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-33

Navigation Maps with Frames



You can use the same navigational aids on all pages using frames. Think twice about using frames, some browsers dont support links and some people dont like frames even if their browsers support them. Consider having a non-frames version of your site for your visitors who dont like or cant view frames.

Copyright 2003 Pearson Education, Inc.

A Web Site Construction Checklist



Slide 4-34

 

 

Remember the three Cs 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.

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



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.

Copyright 2003 Pearson Education, Inc.

Slide 4-38

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-39

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.