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>
Web Page Design Web Page Elements
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!
Web Page Design Web Page Elements
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>
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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)
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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)
Web Page Design Web Page Elements
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”>
Web Page Design Web Page Elements
Backgrounds (cont’d)
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)
Web Page Design Web Page Elements
Backgrounds (cont’d)
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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>
Web Page Design Web Page Elements
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.
Web Page Design Web Page Elements
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.
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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”>
Web Page Design Web Page Elements
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%”>
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
Tables (cont’d)
EXAMPLES: Simple.htm Car1.htm Car2.htm CarFin.htm SimpleWithoutBorder.htm
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
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
Web Page Design Web Page Elements
CENTER
Center tags center everything between them <CENTER> </CENTER>
Web Page Design Web Page Elements
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