1.headingsheadings 2.paragraphsparagraphs 3.horizontal ruleshorizontal rules 4.listslists...

1. Headings2. Paragraphs3. Horizontal Rules4. Lists5. Images6. Line Break

Web Page Design Web Page Elements

7. Backgrounds

8. Targets

9. Links

10. Special Characters

11. Tables

12. Frames

13. Center

When you see this mouse, click it to return to this slide

Headings There are six heading styles

H1 to H6 The smaller the number, the bigger the heading Headings can be :

Left justified Right justified Centered

Used to divide sections of text Example: <H1>Welcome to the Internet!</H1>


Headings (cont’d) Think of headings as items in an outline If your text has some sort of structure, use headings to

indicate that structure or hierarchy of importance

Headings can be any length, including many lines of text (having many line of emphasized text can be tiring to read)

Don’ts Don’t use headings to display text in boldface type Don’t use headings to make certain parts of your page stand

out. Be careful! Different browsers display headings differently!


Paragraphs Paragraphs are set within <p> tags

<p> and </p> The closing </p> tag is optional, but is a good practice ! Some people use <p> tags between paragraphs to add

space There are better ways to add “white space” Remember: “Design for content, not appearance”

Used to divide sections of text Example:

<p>I hope you enjoy using HTML!</p>


Horizontal Rules A “design element” used to create dividers

Use between sections of thought They appear in a 3-D effect You can vary :

Length Thickness Shading

Horizontal Rule tag: <hr> Example: <hr> Rules.htm


Horizontal Rules (cont’d) Attributes of the Horizontal Rule tag

SIZE Indicates the thickness, in pixels, of the rule line Default is “2” (smallest thickness) RuleThickness.htm

WIDTH Indicates the horizontal width of the rule line Indicate the “exact width, in pixels, or

values as a % of screen width

(Changes as window is resized !!) RuleWidth.htm


Horizontal Rules (cont’d) Attributes of the Horizontal Rule tag

ALIGN If you specify a width smaller than actual width of screen,

Can also specify the alignment of that rule line

Left, Center, Right Example : RuleAlign.htm

NOSHADE Causes the browser to draw the rule line as just a plain line

without any of the 3-D shading Example: RuleNoShade.htm


Lists Can be :

Ordered (numbered) Numbered automatically Tags: <ol> <li>This is an item in my ordered list</li> <li>So is this</li> </ol>

UnOrdered Items are bulleted Tags: <ul> <li>This is an item in my UnOrdered list</li> <li>So is this</li> </ul>

Examples: UnOrdered.htm Ordered.htm


Images Enhance the visual appeal of the web page Can take extra time to download and display the page! The more graphics and pictures, the longer time to load Text can be made to flow around the picture / graphic

Two general classes of images: InLine - appear on a web page along with text and links

- are automatically loaded when page is retrieved External - stored separate from the web page

- loaded only on demand (as result of a link)


Images (cont’d) Regardless of InLine or External, they must be of a certain

format InLine:

.GIF (the more popular) (more browsers can view) .JPEG (Support is becoming more widespread)

Image tag : <img>

<IMG SRC=“image.gif”> <IMG SRC=“../image.gif”>

for an image one directory up from your html code


Images (cont’d) Examples: Halloween0.htm (No image)

Halloween1.htm (One image)

Halloween2.htm (Two images)

HalloweenInWithHeading.htm

images can go anywhere in text: Atom.htm

images can be aligned with text: TAlign.htm

images can be a link to a picture: Penguin1.htm

text can be a link to a picture: Penguin2.htm


Line Break Breaks a line of text at the point where it appears When browser encounters a line break, it restarts the text

at the left margin. Use within other elements,

such as paragraphs list items

Line Break tag : <br>

Example : LineBreak.htm


Backgrounds

Can be filled with a solid color Can be filled with a tiled bitmap image for textured

appearance

Make sure background does not detract from the content of the web page or its readability

Black text on white background is most popular Strive for contrast Don’t use colors that clash or bleed (see page 195)


Backgrounds (cont’d)

Background colors Add the BGCOLOR attribute to the <body> tag to specify a

background color BGCOLOR is an HTML extension introduced by Netscape

You can specify the color by :

Color number in hexadecimal : #FFFFFF <body bgcolor=#FFFFFF”>

Color name in text: white, green, yellow, blue <body bgcolor=green”>



Background image Use an image as your background which is “tiled” to make it

appear seamless. “tiled” – repeated in rows to fill the browser window

You need an image to serve as the tile The pattern must “flow” smoothly from one tile to the next The edges must line up. Try clipart packages for tiles to use as backgrounds (or

web)



Background image Use the Background attribute of the <body> tag The vale of Background attribute is usually a filename or

and URL that points to your background image

Attribute: <body background=“tiles.gif”>

<body background=“backgrounds/rosemarble.gif”>

Examples: NoBackground.htm Background.htm


Targets

To provide a quick way to jump around among the various topics in a web page

Often is presented as a Table of Contents Often called “linked windows”

A target can be to an place / anchor within the current page

or a link to a new web page window

Example : HTMLTarget.htm


Links

Most essential element in web page design Links create webs Links can be textual or pictorial Any word(s) or picture can be linked to any resource on the

web. Most links connect you to other web pages Any multimedia file or application can be the object of a link A resume might have links to a portfolio of your work It is also common to find e-mail links on a page


Links (cont’d)

A tag: <a> Samples: <a href=“contents.doc”,>

Contents

</a>

Examples : <a href=http://www.mtsac.edu>

Mt. SAC’s Home Page

</a>


http://www.mtsac.edu/

Special Characters

Web pages can contain special characters and symbols such as the Greek alphabet used in scientific notation, as well as mathematical functions, operators, delimiters, accents, arrows, and pointers.


Tables

Provides a way of aligning or dividing the screen into rectangular regions.

Text flows within the rectangular regions creating a columnar appearance

The borders of the table(s) can be visible or invisible The most powerful way of positioning items on a web page We cover tables in more depth in Chapter 20.


Tables (cont’d)

An advanced HTML construct Allows for arranging text, images, and other HTML

content into rows and columns with/without borders

Parts of a Table object: Caption – indicates what the table is about Headings – labels the rows and columns or both (opt) Table data – the values in the table itself Table cells – individual squares in the table


Tables (cont’d)

Table tag <table> </table> Attributes of the Table tag

Border=X where X equals

0 – no border

1 – 1 pixel-wide border

2 – 2 pixel-wide border and so on… Samples:

<TABLE Border=“1”> <TABLE border=“0”>


Tables (cont’d)

Table tag Attributes of the Table tag

WIDTH=X where X equals

the table width in pixels or

a percentage of the web page width

Samples:

<TABLE WIDTH=800> <TABLE WIDTH=“80%”> <TABLE WIDTH=“100%”>


Tables (cont’d)

ROWS Inside the table tags, you define rows using: Row tag : <TR> </TR>

Sample:

<TABLE WIDTH=800>

<tr> </tr>

<TR> </TR>

</TABLE> Two rows are formed


Tables (cont’d)

ROWS Attributes of the row tag

ALIGN – horizontal alignment : left, right, center

<TR ALIGN=“LEFT”> </TR>

VALIGN – vertical alignment : top, middle, bottom, baseline (Netscape)

<TR VALIGN=“MIDDLE”> </TR>

Sample:

<TABLE WIDTH=800>

<tr align=“center”> </tr>

<TR VALIGN=“Top> </TR>

</TABLE> Two rows are formed


Tables (cont’d)

Cells Inside the ROW tags, you define cells using: Cell tag : <TD> </TD>

Sample:

<TABLE WIDTH=800>

<TR>

<TD> Cell-1</TD>

<TD> Cell-2</TD>

</TR>

</TABLE> Two cells are formed


Tables (cont’d)

EXAMPLES: Simple.htm Car1.htm Car2.htm CarFin.htm SimpleWithoutBorder.htm


Frames

Frames change what a “page” means to the browser A single screen can display multiple pages which interact

with each other You first create a frame definition document or a “frameset”

Define how many frames are within the frame document

Sample: <Frameset>

your frame definition goes here

</Frameset


Frames Cannot use a <body> tag together with a <Frameset> tag

The frameset only contains the definitions of the frames of the page

Attributes of the Frameset tag: COLS:

Tells the browser to split the screen into a number of vertical frames

Sample: <Frameset COLS=“100, 50%, *>

</Frameset> EXAMPLE: FrameCols.htm

FrameRows.htm

FrameCombo.htm


Frames

Attributes of the Frameset tag: ROWS:

Tells the browser to split the screen into a number of vertical frames

Sample: <Frameset ROWS=“100, 50%, *>

</Frameset> EXAMPLE: FrameRows.htm

FrameCombo.htm


CENTER

Center tags center everything between them <CENTER> </CENTER>


1. Layout 8. Scrolling

2. Font Selection 9. User Friendliness

3. Text Sizing 10. Consistency

4. Foreground vs Background colors

5. Photographic backgrounds

6. Tiled backgrounds

7. Navigational Icons

Web Page Design Screen Design Principles

1.headingsheadings 2.paragraphsparagraphs 3.horizontal ruleshorizontal rules 4.listslists...

Documents