Internet / Intranet Fall 2000 Class 3 More HTML Cascading Style Sheets

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


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


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.


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


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


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”


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


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


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)


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


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>


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


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


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


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


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


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


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


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 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


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


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


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


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


Style Sheet Grouping

H1 {color: green} H2 {color:green} H3 {color:green}Can Be Written:

H1 H2 H3 {color: green}


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 */


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


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


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


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/>


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


Lab Work

HomeSiteHTML Validation


For More Information

CSShttp://www.w3c.org/Style/CSShttp://stars.com/Authoring/Style/Sheets/http://www.westciv.com/style_master/house/tutorials/index.html