Internet intrarnet CIS class 3

Confusing Tags Result is Confusing, But No Serious Harm Results The following text is bold Bad Tags Result May Be Opposite of What You Expect If this text appears, we have a deal Page M

Trang 1

Internet / Intranet

CIS-536

Class 3 More HTML Cascading Style Sheets

Trang 3

Internet / Intranet / Extranet

The Main Difference is in the Target Audience

Internet

All Potential Users

Those With GUIs

Those With Current Browsers, Fast Connections

Those With Netscape or Internet Explorer Intranet

Within a Specific User Community

Microsoft: Users of Microsoft O/S, Browsers Usually Means Within a Company

Two Levels of Accessibility

The Ability to View the Pages as Intended

Trang 4

HTML Tips / Compatibility

Quotes in Attributes

Double Quotes are Necessary if a Space Exists in Value

E.g <FONT FACE = “Times Roman”>

Optional Otherwise

E.g <FONT COLOR=“blue”> <FONT COLOR=blue>Safe Tags

Results are Reasonable Even if Tag is Not Recognized

E.g It was a <B>great</B> day!

Confusing Tags

Result is Confusing, But No Serious Harm Results

The following text is <b>bold</b>

Bad Tags

Result May Be Opposite of What You Expect

<DEL>If this text appears, we have a deal</DEL>

Page May Be Unreadable

E.g White Text on Dark Background will be unreadable if Browser does not recognize background color.

Trang 5

Using Color/Fonts in Web Pages

Originally Netscape Extensions to HTML

Now “de-facto” Standards

(Netscape and IE Support Them)

Many Not Officially Part of HTML Standard

Video Displays Vary

Many PCs Configured to Only Support 256 Colors at Once

Other Colors Often Dithered

Colors, Fonts Will Likely Look Different on Different

Systems

Trang 6

16 Color Safety Palette

Colors are Same on Macs, PCs

Trang 7

Color Attributes

Body Background (defaults):

<BODY BGCOLOR=“white” TEXT=“black”

LINK=“blue” VLINK=“maroon” ALINK=“red”>

BGCOLOR – Background Color

TEXT – Text Color

LINK – Color of Unvisited Links

VLINK – Color of Visited Links

ALINK (Netscape Only) – Color of Link During

“MouseDown”

Trang 8

Sets the Default Size of Text

1 – Smallest, 7 – Largest, Default = 3

FACE – The Font Face

Must Be Resident on the System

“Portable” Font Faces: (Windows, Mac, Unix)

ArialTimes RomanCourier

Sans SerifWingDings

SIZE – Absolute or Relative to BASEFONT

Standard: Size = 3

Trang 9

Other Text Manipulation Tags

<BLINK>Flashing Text </BLINK>

Flashes Text On and Off, Netscape Only

<MARQUEE BEHAVIOR=“scroll” BGCOLOR=“red”

DIRECTION=“left” LOOP=“7”>

Scrolls Text Across Page, Microsoft IE Only

BEHAVIOR – scroll, slide, alternate

LOOP – Number of Times to Scroll (Default-Infinite)

<STRIKE> StrikeThroughText </STRIKE>

<SUB>Subscript Text </SUB>

<SUP>Superscript Text </SUP>

<I>Italicized Text </I>

<U> Underlined Text </U>

<NOBR>Text Between Tags Will Be on One Line </NOBR>

<WBR>Identifies Where Hyphen Will Go If Word is Split

Example

Trang 10

Image Formats

GIF Files – Graphics Interchange Format

Allows Transparent Backgrounds

256 Color Palette

Supports Interlaced GIFs

Supports Animations

Four Sequential Images

May Distract Users

Better For Photos

Requires More Decompression by Browser

Progressive JPGs

Smoother Version of Interlaced GIFs

Not Supported by All Browsers (Blank Image Results)

Trang 11

Most Browsers Cache Graphics

If You Use the Same Graphic in Multiple Places

on Site, Cached Image Will Produce Faster Dispays

Trang 12

Use Judiciously Scaling Can Cause Picture Degradation

BORDER – Size in Pixels of a Border Around the Image

Page Background

<BODY BACKGROUND=“image.gif”

BGPROPERTIES=“fixed”>

BACKGROUND – Image File to Show As Background

Backgrounds are Tiled BGPROPERTIES=fixed – (IE Only) Don’t Scroll Background

As Page Scrolls

IMG May Appear Within an Anchor: Acts as a “Button”

Trang 13

HTML Tables (1)

As Tables of Data

<TABLE BORDER=“2” CELLSPACING = “5”

CELLPADDING=“3”>

BORDER – Displays A Visible Border Around Cells

CELLSPACING – Amount of Space Between Cells

CELLPADDING – Amount of Space Between Data and

Border

As a Text Formatting Feature

Used to Create Tabs, Left, Right Margins

Tables Within Tables Allows Additional Positioning

Trang 14

HTML Tables (2)

Can Do Amazingly Creative Things With Tables

Easy to Get Tags/Hierarchy Messed Up

Debugging Can Be Pretty Difficult

Make Sure to Try Complex Tables on Multiple Browsers

Run Through a Tag Validation Utility

Many Browser Specific Extensions

Easy to Get Into Habit of Using Them Without Realizing That They are Browser Specific

Example

Trang 15

Frames (1)

Method to Display Multiple HTML Files on the Same Page

Requires Netscape Navigator / Internet Explorer 3.0 or Above

Requires a “Master Layout Page”

Divides the Page Into Sections (Frames)

Identifies the HTML Files To Be Displayed in each Frame

Replaces the <BODY> Tags

Hierarchical – Can Subdivide Sections Further

By Putting <BODY> Tags Within <NOFRAME> Section

Cleverly Allow This to Work on Older Browsers I.e Browser Doesn’t Have to Recognize <FRAME> Tags

Trang 16

Frames (2)

<FRAME NAME=“leftframe” SRC=“info.htm”

SCROLLING =“Yes”>

SRC – The URL to Display in This Frame

NAME – An Internal Reference Name of The Frame

SCROLLING – (Default) Allow Scrolling When Page is Larger Than Frame

Links Within Frames

Straight Link Replaces the Entire Page

Targeted Links – Allows a Link to Replace a Frame

TARGET = The Internal Frame Reference Name

Use Frames Judiciously

Often Same Effect Can Be Achieved Through a Single Page

Example

Trang 17

Sound

IE Only

Plays Sound in Background

SRC – URL of the Sound File

.WAV, MID Formats are Common LOOP – Number of Times to Repeat Sound (Default = Once) Alternatives:

Document Will Reload Every 5 Seconds

If URL Specified: This Page Will Display For 5 Seconds and Load New Page

Trang 18

Client-Side Image Maps

Allow a Graphic to Be Used as a Segmented Button

When User Clicks on the Region In Map

The Appropriate URL is Invoked

<AREA SHAPE=“rect” COORDS=“0,0,100,100”

HREF=“thisone.htm” ALT=“lower left”>

<AREA SHAPE=“circle” COORDS=“200,200,20”

Trang 19

Meta Tags

Information About the Data

Information Passed to Browser, Server

Information Passed as Name, Value Pairs

Information for Browser

Information for Server

Meta Tags are Not Strictly Part of HTML

Standard Tags By Convention

No Guarantee That Browser / Server Will Understand Tags

No Guarantee That Browser / Server Will Obey Tags

Trang 20

Meta Tags(2)

Browser Keyword/Values:

“Author” – Author’s Name

“Review”– Page Should Be Reviewed After Specified Date

“Keywords” - Search Engine Should Index This Page on Specified Keywords

PICS-Label – Content Ratings

Server Keyword/Values:

“Refresh” / Time Period – Reload Page Periodically

“Expires” / Time Period – Server Shouldn’t Cache Page After This Date

Content-Type – Character Set Used in Document

Page-Enter – Visual Transition Effect Upon Page Entry

Page-Exit - Visual Transition Effect Upon Page Exit

Example

Trang 21

Cascading Style Sheets (CSS)

Similar to Word-Processing Styles

Controls Layout, Not Content

Change in Web Page Design Philosophy

The Reality: Web Page Authors Were Using “Tricks” to

Control Layout

The Response: Give in to the Inevitable

Develop a Reasonable Standard: Cascading Style Sheets

CSS is Now the Preferred Method For Portability

Allows Users to Change Styles for Readability

CSS “Requires” Upgraded Browser

Browser/User Now Have More Options for Making it Readable Older Browsers Won’t “Crash”, Just Won’t Show Formatting Underlying Text is More Human Readable

Proliferation of Font, Table, etc Tags Made HTML

“Unreadable” in Many Cases

Styles Allow Control of:

Trang 22

The Philosophy of Style Sheets

All Text Belongs to a “Style”

Style Information Kept Together in Dictionary

Style Information Defined in:

Within the HTML Text Itself (Inline)

Uses Style Sheets Purely For Enhanced Formatting

HTML Header

A Linked CSS File

Can Be Easily Changed to Produce a Different Document Style

A User Defined CSS File (Defaults For the Document)

Allows Better Access For People With Disabilities

A Useful Goal:

A Generic Set of Styles Used By Many

The Reality:

May Help Consistency Among Similar Documents

Unlikely to Happen Across Companies

Designers Will Want to Create Own Unique Look and Feel

Trang 23

Basic Example of Global Style in

For ALL H1 Tags in the Document

Saves “Code”

Makes it Easier on Designers

Easier to Make a Global Change

Resulting HTML Body is Easier to Read

Trang 24

Same Example Using Inline Style

In This H1 Instance, the Text is Blue

Subsequent H1 Tags Revert to Default

The “Cascading” in Cascading Style Sheets

Defines How “Conflicts” are Resolved

i.e What if There’s Both a Global and Inline Style?

Common Sense Hierarchy:

Inline Rules Override Global RulesDocument Styles Override User Style Sheets

EXCEPTION: Can Override Others Through ! important Tag

Trang 25

Global Style Sheets

Trang 26

Style Sheet Grouping

H1 {color: green} H2 {color:green} H3 {color:green}

Can Be Written:

H1 H2 H3 {color: green}

Trang 27

Style Sheet Classes

User Defined Classes

<STYLE>

P.stoptext {color: red; font: 16 pt}

P.gotext {color: green; font: 18 pt}

</STYLE> </HEAD> <BODY>

<P Class=stoptext>This text appears in red</P>

<P Class=gotext>This text appears in green </P>

</BODY></HTML>

C-Style Comments

H2 {color: blue} /* All Headers Displayed in Blue */

Trang 28

CSS Properties

Background: color – The Background Color

Color: color – The Text Color

Font-family: “font name” – The Font to Be Used

Font-size : size/units (e.g 12pt or 1in)

Text-align: left, center, right

Text-decoration: italic, line-through, none, underline Text-indent

Trang 29

CSS is the Foundation for Dynamic HTML

Allows Script to Reference an HTML Property

E.g ButtonClick Changes Text Color

Trang 30

Other Useful Tags / Information

Allows an Arbitrary Division of an HTML Document

Attributes Only Apply Within the <DIV> Tags

Allows “Custom Tags”

ID, NAME Attributes

Give a Tag Instance a Unique Name, ID

Allow a Specific Tag To be Referenced Through Dynamic HTML

All HTML Tags Now Have the STYLE Attribute

Example1Example2

Trang 31

Requires Strict Conformance

Must Conform to One of 3 DTDS

Strict, Transitional, Frameset Must Be Well-Formed

Elements, Attributes in Lower Case

Attribute Values Must Always Be Quoted

Empty Elements Require End-Tags

Trang 32

In Class Exercise

Convert the index.htm File That You Created Last

Class to Use Style Sheets

Insert the Following in the <HEAD> Section

<STYLE>

H1 {color:Blue}

H2 {color:Red}

</STYLE>

Publish it to your Web Site

Use an external W3C Style Sheet to Display the Same Page

Link These to Your Class Web Page

Trang 33

Lab Work

HomeSite

HTML Validation

Trang 34

For More Information

CSS

http://www.w3c.org/Style/CSS

http://stars.com/Authoring/Style/Sheets/

http://www.westciv.com/style_master/house/tutorials/index.html

Định dạng
Số trang	34
Dung lượng	137,5 KB