15 BCIS 1405 HTML 02 Summer 2007
Download
Report
Transcript 15 BCIS 1405 HTML 02 Summer 2007
HTML
02: Enhancing the Web Page
Committed to Shaping the Next Generation of IT Experts.1
Objectives
Planning a web page
Rules of creating a web page
Design checklist
Formatting with Cascading Style Sheets
Using graphics
Changing color
Using tables
2
Planning a Web Page
Questions to ask
What is the purpose of Web presentation?
Who is the audience?
What information am I trying to convey?
How will I organization the information?
How can I make it attract visitors?
Structure of Web Page
Rules of Thumb
Consistent layout for each page
One topic per page
Keep pages short so scrolling not
necessary
Avoid large graphics at the top
(Takes too long to load)
Design Checklist
Be brief
Be clear
Use simple language
Check spelling & grammar
Try out presentation in more than one
browser
Use Features to Tie it all Together
Use Lists or menus
Avoid links that are not relevant
Use consistent terms & icons
Use same banner or logo on each page
Use consistent layout
Use return link to home page on all pages
Make sure links are current
More Features to Tie it all Together
Avoid graphics that are not relevant
Include alternative text with every graphic
Each page should be able to stand alone
Avoid over-emphasizing / over-formatting
Contrast text from background (readability)
Use horizontal lines to separate sections of
the page
Formatting with
Cascading Style Sheets
Styles pre-define formats
Allows changes to be made quickly
All styles are defined in one place
Makes for Global Formatting
Changes made in one place affects all
Best to put Style tag in HEAD section
Cascading Styles
Example:
All Body text to be centered
<HEAD>
<STYLE type = “text/css”>
Body {text-align: center}
</STYLE>
</HEAD>
<BODY>
etc …
Defining a CLASS for Style
Class used in two places
In HEAD Style definition
In Body text
HEAD EXAMPLE:
<STYLE type =“text/css”>
P {font-style: normal}
P.it {font-style: italics}
P.color {color: red}
</STYLE>
Defining a CLASS for Style
(Continued)
Class used in two places
In HEAD Style definition
In Body text
BODY Text EXAMPLE:
<P class = “it”> This text will be in italics </P>
<P> This text is not affected <\P>
<P class = “color”> This text is red <\P>
<P> This text is not affected <\P>
HTML to Show Use of Classes
RESULTING WEB PAGE
Mixing Classes with Other Tags
Adding a Bold
Tag
Inserting Pictures / Graphics
Can include universal formats
.JPG
.GIF
(best for photographs)
(most browsers accept this format)
Use <IMG>
Must use SRC=“filename” attribute for source
EXAMPLE:
<IMG SRC=“A:\picturename.jpg”>
No closing tag
Inserting Pictures / Graphics
Can use ALT= alternate attribute to display
EXAMPLE:
<IMG SRC=“A:\picturename.jpg” ALT=“Company CEO”>
This will display “Company CEO” rather than the file
name (“A:\picturename.jpg”)
Other attributes available are HEIGHT, WIDTH,
FLOAT (causes browser to load quicker)
Height & Width are measured in pixels
Float defines position (Left, Right, Center)
Inserting Pictures / Graphics
EXAMPLE using Height, Width, Float
<IMG SRC=“A:\picturename.jpg” ALT=“Company CEO”
HEIGHT= “200” Width = “40”>
Better to use Classes for each image size
<STYLE type=“text/css”>
IMG.ceoPic1 {width: 40; height: 200; float: center}
</STYLE>
… body text …
<IMG SRC=“A:\picturename.jpg” class=“ceoPic1”
ALT=“Company CEO”>
Using a Graphic as Background
Use image as background (instead of color)
EXAMPLE for BODY background
<STYLE type=“text/css”>
BODY {background-image: url (A:\classroom2.jpg)}
</STYLE>
Image should be light in color for better reading of page
RESULT of Classroom as background
Result of using a small picture as a background
(Browser tiles the image and repeats it to cover background)
Changing Text Color
Can change color of different text types
<P>
<BODY>
<H1>, <H2>, etc.
Can change color of hypertext links
Can change color of visited links
Can change color of active links
Common Colors
COLOR
HEX EQUIVALENT
Red
#FF0000
#00FF00
#0000FF
#000000
#FFFFFF
#DEB887
#19CCDF
#FF00FF
#FFFF00
Green
Blue
Black
White
Tan
Turquoise
Magenta
Yellow
To Insert Special Characters
You can use Name or Code
CHARACTER
NAME
CODE
©
©
©
®
®
®
È
È
È
¥
¥
¥
£
£
£
>
>
>
<
<
<
&
&
&
Must use Name or Code for “<“ because HTML uses that for start of a tag
IF A < B would be coded: IF A < B or IF A < B
Inline Styles
Used rarely – Single style definition is
preferable
Used when a style is to be used only once
How it works:
<H1> <B style=“font-size: 48”> L</B>ove </H1>
Would produce:
Love
Using Tables
To better organize data for user
Columns and rows (intersection is a cell)
Data placed in cells
Table contents are between:
<TABLE>
and
</TABLE>
tags
Table Syntax
Start each row with:
<TR> tag
End each row with:
</TR> tag
Everything between these tags will appear in
one row
Table Syntax
<TABLE>
<TR>
… text in First row
</TR>
<TR>
… text in Second row
</TR>
</TABLE>
Table Syntax
Use the <TH> and </TH> tags for column
head
Will make contents BOLD for Col. Headings
EXAMPLE:
<TABLE>
<TR>
<TH> Qty </TH>
<TH> Price </TH>
<TH> Cost </TH>
</TR>
Will create:
Qty Price Cost
Table Syntax
Use the <TD> and </TD> tags for column data
<TABLE>
<TR>
<TH> Qty </TH>
<TH> Price </TH>
<TH> Cost </TH>
</TR>
<TR>
<TD>2</TD>
<TD>$10.00</TD>
<TD>$40.00</TD>
</TR>
Table Syntax
Adding a Border
Use the <TD> and </TD> tags for column data
<TABLE BORDER=4>
<TR>
<TH> Qty </TH>
<TH> Price </TH>
<TH> Cost </TH>
</TR>
<TR>
<TD>2</TD>
<TD>$10.00</TD>
<TD>$40.00</TD>
</TR>
Table Syntax
Wider Border & More Spacing
Use the <TD> and </TD> tags for column data
<TABLE BORDER=12 CELLSPACING=12>
<TR>
More space between cells
<TH> Qty </TH>
Wider Border
<TH> Price </TH>
<TH> Cost </TH>
</TR>
<TR>
<TD>2</TD>
<TD>$10.00</TD>
<TD>$40.00</TD>
</TR>