Upload
iris-shelton
View
222
Download
3
Embed Size (px)
Citation preview
Internet / Intranet
Fall 2000
Class 3More HTML
Cascading Style Sheets
Brandeis University Internet/Intranet Spring 2000 2
Class 3 Agenda
Recap Last WeekHomepage DiscussionMore HTMLCascading Style SheetsStyle DiscussionDiscuss Homework/Project
Brandeis University Internet/Intranet Spring 2000 3
Internet / Intranet / ExtranetThe Main Difference is in the Target Audience
Internet All Potential UsersThose With GUIsThose With Current Browsers, Fast Connections
Those With Netscape or Internet ExplorerIntranet
Within a Specific User CommunityMicrosoft: Users of Microsoft O/S, Browsers
Usually Means Within a CompanyExtranet
An Intranet With Some Features Available to a Broader User Community
E.g. Customers, SuppliersTypically Means Different Levels of Access to Different Users
Two Levels of AccessibilityThe Ability to View the Pages as IntendedThe Ability to Access the Page
Brandeis University Internet/Intranet Spring 2000 4
HTML Tips / CompatibilityQuotes in Attributes
Double Quotes are Necessary if a Space Exists in ValueE.g. <FONT FACE = “Times Roman”>Optional Otherwise
E.g. <FONT COLOR=“blue”> <FONT COLOR=blue>
Safe TagsResults are Reasonable Even if Tag is Not Recognized
E.g. It was a <B>great</B> day!
Confusing TagsResult is Confusing, But No Serious Harm Results
The following text is <b>bold</b>
Bad TagsResult 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.
Brandeis University Internet/Intranet Spring 2000 5
Using Color/Fonts in Web Pages
Originally Netscape Extensions to HTMLNow “de-facto” Standards
(Netscape and IE Support Them)
Many Not Officially Part of HTML StandardVideo 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
Brandeis University Internet/Intranet Spring 2000 6
Specifying ColorBy Name
Browsers Support Some Common Color NamesBy RGB Value: #RRGGBB (Hexadecimal)
#000000 – Black#FFFFFF - White
In Order of Portability16 Color Safety Palette
Colors are Same on Macs, PCs216 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 ColorsExpect Dithering on Many Displays
Example
Brandeis University Internet/Intranet Spring 2000 7
Color Attributes
Body Background (defaults):<BODY BGCOLOR=“white” TEXT=“black” LINK=“blue” VLINK=“maroon” ALINK=“red”>
BGCOLOR – Background ColorTEXT – Text ColorLINK – Color of Unvisited LinksVLINK – Color of Visited LinksALINK (Netscape Only) – Color of Link During “MouseDown”
Brandeis University Internet/Intranet Spring 2000 8
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 FaceMust Be Resident on the System“Portable” Font Faces: (Windows, Mac, Unix)
ArialTimes RomanCourierSans SerifWingDings
SIZE – Absolute or Relative to BASEFONTStandard: Size = 3
Brandeis University Internet/Intranet Spring 2000 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 OnlyBEHAVIOR – scroll, slide, alternateLOOP – 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
Brandeis University Internet/Intranet Spring 2000 10
Image FormatsGIF Files – Graphics Interchange Format
Allows Transparent Backgrounds256 Color PaletteSupports Interlaced GIFsSupports Animations
Four Sequential ImagesMay Distract Users
JPG Files (JPEG) Better Compression16.7m Color PaletteOptimized For Color – Not as Good as GIF for Black & WhiteBetter For PhotosRequires More Decompression by BrowserProgressive JPGs
Smoother Version of Interlaced GIFsNot Supported by All Browsers (Blank Image Results)
Brandeis University Internet/Intranet Spring 2000 11
Image Formats (2)
PNG – Portable Network GraphicsGIF SuccessorDon’t See it Much in Practice
BMPNo Compression
Display IssuesLarger Graphic Size Means Slower Page DisplayCaching
Most Browsers Cache GraphicsIf You Use the Same Graphic in Multiple Places on Site, Cached Image Will Produce Faster Dispays
Brandeis University Internet/Intranet Spring 2000 12
Using Images
<IMG SRC=“image.gif” ALIGN=“top” HEIGHT=“100” WIDTH=“200” BORDER=“5”>
ALIGN – Where Image is Displayed in Regards to TextHEIGHT,WIDTH – If Specified, the Image is Scaled to This Size. (Pixels, or Percentages)
Use Judiciously. Scaling Can Cause Picture DegradationBORDER – Size in Pixels of a Border Around the Image
Page Background<BODY BACKGROUND=“image.gif” BGPROPERTIES=“fixed”>
BACKGROUND – Image File to Show As BackgroundBackgrounds 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>
Brandeis University Internet/Intranet Spring 2000 13
HTML Tables (1)
As Tables of Data<TABLE BORDER=“2” CELLSPACING = “5” CELLPADDING=“3”>
BORDER – Displays A Visible Border Around CellsCELLSPACING – Amount of Space Between CellsCELLPADDING – Amount of Space Between Data and Border
As a Text Formatting FeatureUsed to Create Tabs, Left, Right MarginsTables 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
Brandeis University Internet/Intranet Spring 2000 14
HTML Tables (2)
Can Do Amazingly Creative Things With TablesEasy to Get Tags/Hierarchy Messed Up
Debugging Can Be Pretty DifficultMake Sure to Try Complex Tables on Multiple Browsers
Run Through a Tag Validation Utility
Many Browser Specific ExtensionsEasy to Get Into Habit of Using Them Without Realizing That They are Browser Specific
Example
Brandeis University Internet/Intranet Spring 2000 15
Frames (1)Method to Display Multiple HTML Files on the Same Page
Requires Netscape Navigator / Internet Explorer 3.0 or AboveRequires a “Master Layout Page”
Divides the Page Into Sections (Frames)Identifies the HTML Files To Be Displayed in each Frame<FRAMESET>
Replaces the <BODY> TagsHierarchical – Can Subdivide Sections Further
<NOFRAME>“Conditional Code”
If Browser Supports Frames ThenDisplay What is Between <FRAMESET> </FRAMESET>
ElseDisplay What is Between <NOFRAME> </NOFRAME>
By Putting <BODY> Tags Within <NOFRAME> SectionCleverly Allow This to Work on Older Browsers
I.e. Browser Doesn’t Have to Recognize <FRAME> Tags
Brandeis University Internet/Intranet Spring 2000 16
Frames (2)
<FRAME NAME=“leftframe” SRC=“info.htm” SCROLLING =“Yes”>
SRC – The URL to Display in This FrameNAME – An Internal Reference Name of The FrameSCROLLING – (Default) Allow Scrolling When Page is Larger Than Frame
Links Within FramesStraight Link Replaces the Entire PageTargeted Links – Allows a Link to Replace a Frame<A HREF=“newpage.htm” TARGET=“left”>
TARGET = The Internal Frame Reference Name
Use Frames JudiciouslyOften Same Effect Can Be Achieved Through a Single Page
Example
Brandeis University Internet/Intranet Spring 2000 17
MultimediaSound
<BGSOUND SRC=“noise.wav” LOOP=“Infinite”>IE OnlyPlays Sound in BackgroundSRC – URL of the Sound File
.WAV, .MID Formats are CommonLOOP – Number of Times to Repeat Sound (Default = Once)
Alternatives:Plug-InOBJECT= (HTML 4.0)
Video – MPG, AVIClient-Pull
<META HTTP-EQUIV=“refresh” CONTENT=5; URL=“newpage.htm”>
Document Will Reload Every 5 SecondsIf URL Specified: This Page Will Display For 5 Seconds and Load New Page
Example
Brandeis University Internet/Intranet Spring 2000 18
Client-Side Image MapsAllow a Graphic to Be Used as a Segmented ButtonWhen User Clicks on the Region In Map
The Appropriate URL is Invoked<IMG SRC=“pic.gif” USEMAP=“#mapname”><MAP name=“mapname”>
<AREA SHAPE=“rect” COORDS=“0,0,100,100” HREF=“thisone.htm” ALT=“lower left”><AREA SHAPE=“circle” COORDS=“200,200,20” HREF=“circlepage.htm” ALT=“middle”>
</MAP>SHAPE – Circle, Rect, PolygonCOORDS –
Rectangle - Lower Left, Upper Right CornersCircle: Center Coords and RadiusPolygon – Polygon Edges
ALT – Text to Be Displayed For Text-Only BrowsersCoords Start at Upper Left Corner Example
Brandeis University Internet/Intranet Spring 2000 19
Meta Tags
Information About the DataInformation Passed to Browser, ServerInformation 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 HTMLStandard Tags By ConventionNo Guarantee That Browser / Server Will Understand TagsNo Guarantee That Browser / Server Will Obey Tags
Brandeis University Internet/Intranet Spring 2000 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
Brandeis University Internet/Intranet Spring 2000 21
Cascading Style Sheets (CSS)Similar to Word-Processing StylesControls Layout, Not Content
Change in Web Page Design PhilosophyThe Reality: Web Page Authors Were Using “Tricks” to Control LayoutThe Response: Give in to the Inevitable
Develop a Reasonable Standard: Cascading Style Sheets
CSS is Now the Preferred Method For PortabilityAllows Users to Change Styles for ReadabilityCSS “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 ReadableProliferation of Font, Table, etc. Tags Made HTML “Unreadable” in Many Cases
Styles Allow Control of:Fonts, Colors, Spacing, Margins
Brandeis University Internet/Intranet Spring 2000 22
The Philosophy of Style SheetsAll Text Belongs to a “Style”Style Information Kept Together in DictionaryStyle Information Defined in:
Within the HTML Text Itself (Inline)Uses Style Sheets Purely For Enhanced Formatting
HTML HeaderA 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 DocumentsUnlikely to Happen Across Companies
Designers Will Want to Create Own Unique Look and Feel
Brandeis University Internet/Intranet Spring 2000 23
Basic Example of Global Style in Header
<HEAD><STYLE>H1 {color: blue} </STYLE>
</HEAD>
All Text Within an H1 Tag is BlueEquvalent 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
Brandeis University Internet/Intranet Spring 2000 24
Same Example Using Inline Style
<H1 STYLE=“color: blue”>xxx </H1>In This H1 Instance, the Text is BlueSubsequent H1 Tags Revert to Default
The “Cascading” in Cascading Style SheetsDefines 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
Brandeis University Internet/Intranet Spring 2000 25
Global Style Sheets
<HEAD><LINK REL=STYLESHEET HREF=“mystyle.css TYPE=text/css”>
</HEAD>
Style Sheet “Libraries”W3C Core Styles
http://www.w3.org/StyleSheets/Core/stylenameEight Core Styles
For demo: http://www.w3.org/StyleSheets/Core/preview.html
Brandeis University Internet/Intranet Spring 2000 26
Style Sheet Grouping
H1 {color: green} H2 {color:green} H3 {color:green}Can Be Written:
H1 H2 H3 {color: green}
Brandeis University Internet/Intranet Spring 2000 27
Style Sheet Classes
User Defined Classes<HTML><HEAD><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 CommentsH2 {color: blue} /* All Headers Displayed in Blue */
Brandeis University Internet/Intranet Spring 2000 28
CSS PropertiesBackground: color – The Background ColorColor: color – The Text ColorFont-family: “font name” – The Font to Be UsedFont-size : size/units (e.g. 12pt or 1in)Font-style: italicFont-weight: bold, demi-bold, demi-light, extra-bold, extra-light, light, mediumLine-height – distance between linesMargin-left Margin-rightMargin-topText-align: left, center, rightText-decoration: italic, line-through, none, underlineText-indent
Brandeis University Internet/Intranet Spring 2000 29
More CSS PropertiesList Styles
List-style-image:URL (newbullet.gif)}List-style-type: disc,circle,square,decimal,upper-alpha,lower-alpha,upper-roman,none.<STYLE>UL {list-style-image:URL(newbullet.gif)}</STYLE>
Cursor: auto, crosshair, default,hand,text,help,waitDownloadable Fonts
Give the URL Where Font Can Be FoundLayers
CSS is the Foundation for Dynamic HTMLAllows Script to Reference an HTML Property
E.g. ButtonClick Changes Text Color
Brandeis University Internet/Intranet Spring 2000 30
Other Useful Tags / Information
<DIV STYLE=“font-size:10pt; color:blue”>Allows an Arbitrary Division of an HTML DocumentAttributes Only Apply Within the <DIV> Tags
<SPAN class=“xxx”>Allows “Custom Tags”
ID, NAME AttributesGive a Tag Instance a Unique Name, IDAllow a Specific Tag To be Referenced Through Dynamic HTML
All HTML Tags Now Have the STYLE Attribute
Example1Example2
Brandeis University Internet/Intranet Spring 2000 31
Future HTMLDeprecated Tags
May Not Be Supported in Future Versions of HTMLCSS Alternative Recommended
BasefontCenterFontStrikeUnderline
XHTML 1.0Requires Strict Conformance
Must Conform to One of 3 DTDSStrict, Transitional, Frameset
Must Be Well-FormedElements, Attributes in Lower CaseAttribute Values Must Always Be QuotedEmpty Elements Require End-Tags
Or Short-Cut e.g. <HR/>
Brandeis University Internet/Intranet Spring 2000 32
In Class Exercise
Convert the index.htm File That You Created Last Class to Use Style SheetsInsert the Following in the <HEAD> Section
<STYLE>H1 {color:Blue}H2 {color:Red}
</STYLE>
Publish it to your Web SiteUse an external W3C Style Sheet to Display the Same Page Link These to Your Class Web Page
Brandeis University Internet/Intranet Spring 2000 33
Lab Work
HomeSiteHTML Validation
Brandeis University Internet/Intranet Spring 2000 34
For More Information
CSShttp://www.w3c.org/Style/CSShttp://stars.com/Authoring/Style/Sheets/http://www.westciv.com/style_master/house/tutorials/index.html