Internet intrarnet CIS class 3
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (287.11 KB, 34 trang )
Internet / Intranet
CIS-536
Class 3
More HTML
Cascading Style Sheets
Class 3 Agenda
Recap Last Week
Homepage Discussion
More HTML
Cascading Style Sheets
Style Discussion
Discuss Homework/Project
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
Extranet
An Intranet With Some Features Available to a Broader User
Community
E.g. Customers, Suppliers
Typically Means Different Levels of Access to Different Users
Two Levels of Accessibility
The Ability to View the Pages as Intended
The Ability to Access the Page
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.
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
Specifying Color
By Name
Browsers Support Some Common Color Names
By RGB Value: #RRGGBB (Hexadecimal)
#000000 – Black
#FFFFFF - White
In Order of Portability
16 Color Safety Palette
Colors are Same on Macs, PCs
216 Color Palette
Netscape, IE “Map” Them to Common Colors
RGB–00,33,66,99,CC,FF
65,536 Colors
Colors Will Vary Somewhat on Macs, PCs
16.7 million Colors
Expect Dithering on Many Displays
Example
Color Attributes
Body Background (defaults):
BGCOLOR – Background Color
TEXT – Text Color
LINK – Color of Unvisited Links
VLINK – Color of Visited Links
ALINK (Netscape Only) – Color of Link During
“MouseDown”
Fonts
<BASEFONT SIZE=“2”>
Sets the Default Size of Text
1 – Smallest, 7 – Largest, Default = 3
<FONT FACE=“arial” COLOR=“blue” SIZE=“+2”>
FACE – The Font Face
Must Be Resident on the System
“Portable” Font Faces: (Windows, Mac, Unix)
Arial
Times Roman
Courier
Sans Serif
WingDings
SIZE – Absolute or Relative to BASEFONT
Standard: Size = 3
Other Text Manipulation Tags
<BLINK>Flashing Text </BLINK>
Flashes Text On and Off, Netscape Only
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>
<B>Bold Text </B>
<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
Image Formats
GIF Files – Graphics Interchange Format
Allows Transparent Backgrounds
256 Color Palette
Supports Interlaced GIFs
Supports Animations
Four Sequential Images
May Distract Users
JPG Files (JPEG)
Better Compression
16.7m Color Palette
Optimized For Color – Not as Good as GIF for Black &
White
Better For Photos
Requires More Decompression by Browser
Progressive JPGs
Smoother Version of Interlaced GIFs
Not Supported by All Browsers (Blank Image Results)
Image Formats (2)
PNG – Portable Network Graphics
GIF Successor
Don’t See it Much in Practice
BMP
No Compression
Display Issues
Larger Graphic Size Means Slower Page Display
Caching
Most Browsers Cache Graphics
If You Use the Same Graphic in Multiple Places
on Site, Cached Image Will Produce Faster
Dispays
Using Images
WIDTH=“200” BORDER=“5”>ALIGN – Where Image is Displayed in Regards to Text
HEIGHT,WIDTH – If Specified, the Image is Scaled to
This Size. (Pixels, or Percentages)
Use Judiciously. Scaling Can Cause Picture Degradation
BORDER – Size in Pixels of a Border Around the Image
Page Background
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”
<A HREF=“link.htm”><IMG SRC=“clickme.gif”></A>
HTML Tables (1)
As Tables of Data
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
<TABLE WIDTH=“80%”>
WIDTH – Percentage of Browser Window
<TR COLSPAN=“2” ROWSPAN=“2”>
Allows Information to Span Multiple
Rows/Columns
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
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
<FRAMESET>
Replaces the <BODY> Tags
Hierarchical – Can Subdivide Sections Further
<NOFRAME>
“Conditional Code”
If Browser Supports Frames Then
Display What is Between <FRAMESET> </FRAMESET>
Else
Display What is Between <NOFRAME> </NOFRAME>
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
Frames (2)
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
<A HREF=“newpage.htm” TARGET=“left”>
TARGET = The Internal Frame Reference Name
Use Frames Judiciously
Often Same Effect Can Be Achieved Through a Single Page
Example
Multimedia
Sound
<BGSOUND SRC=“noise.wav” LOOP=“Infinite”>
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:
Plug-In
OBJECT= (HTML 4.0)
Video – MPG, AVI
Client-Pull
URL=“newpage.htm”>
Document Will Reload Every 5 Seconds
If URL Specified: This Page Will Display For 5 Seconds and
Load New Page
Example
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
<IMG SRC=“pic.gif” USEMAP=“#mapname”>
<MAP name=“mapname”>
HREF=“thisone.htm” ALT=“lower left”>
HREF=“circlepage.htm” ALT=“middle”>
</MAP>
SHAPE – Circle, Rect, Polygon
COORDS –
Rectangle - Lower Left, Upper Right Corners
Circle: Center Coords and Radius
Polygon – Polygon Edges
ALT – Text to Be Displayed For Text-Only Browsers
Coords Start at Upper Left Corner
Example
Meta Tags
Information About the Data
Information Passed to Browser, Server
Information Passed as Name, Value Pairs
<META NAME=“keyword” CONTENT =“value”>
Information for Browser
<META HTTP-EQUIV=“keyword” CONTENT=“value”>
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
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
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:
Fonts, Colors, Spacing, Margins
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
Basic Example of Global Style in
Header
<HEAD>
<STYLE>H1 {color: blue} </STYLE>
</HEAD>
All Text Within an H1 Tag is Blue
Equvalent of:
<H1><FONT color=“blue”>xxx </FONT></H1>
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
Same Example Using Inline Style
<H1 STYLE=“color: blue”>xxx </H1>
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 Rules
Document Styles Override User Style Sheets
EXCEPTION: Can Override Others Through !
important Tag
Global Style Sheets
<HEAD>
TYPE=text/css”>
</HEAD>
Style Sheet “Libraries”
W3C Core Styles
/>
Eight Core Styles
For demo:
/>
