Internet intrarnet CIS class 3

Internet / Intranet CIS-536 Class More HTML Cascading Style Sheets Class 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 Optional Otherwise E.g Safe Tags Results are Reasonable Even if Tag is Not Recognized E.g It was a great day! 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 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 Sets the Default Size of Text – Smallest, – Largest, Default = 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 = Other Text Manipulation Tags Flashing Text Flashes Text On and Off, Netscape Only Scrolls Text Across Page, Microsoft IE Only BEHAVIOR – scroll, slide, alternate LOOP – Number of Times to Scroll (Default-Infinite) StrikeThroughText Subscript Text Superscript Text Bold Text Italicized Text Underlined Text Text Between Tags Will Be on One Line 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) 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 H1 {color: blue} All Text Within an H1 Tag is Blue Equvalent of: xxx 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 xxx 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 Style Sheet “Libraries” W3C Core Styles http://www.w3.org/StyleSheets/Core/stylename Eight 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 P.stoptext {color: red; font: 16 pt} P.gotext {color: green; font: 18 pt}

This text appears in red

This text appears in green

C-Style Comments H2 {color: blue} /* All Headers Displayed in Blue */ 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) Font-style: italic Font-weight: bold, demi-bold, demi-light, extra-bold, extra-light, light, medium Line-height – distance between lines Margin-left Margin-right Margin-top Text-align: left, center, right Text-decoration: italic, line-through, none, underline Text-indent More CSS Properties List Styles List-style-image:URL (newbullet.gif)} List-style-type: disc,circle,square,decimal,upperalpha,lower-alpha,upper-roman,none UL {list-style-image:URL(newbullet.gif)} Cursor: auto, crosshair, default,hand,text,help,wait Downloadable Fonts Give the URL Where Font Can Be Found Layers CSS is the Foundation for Dynamic HTML Allows Script to Reference an HTML Property E.g ButtonClick Changes Text Color Other Useful Tags / Information Allows an Arbitrary Division of an HTML Document Attributes Only Apply Within the 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 Example1 Example2 Future HTML Deprecated Tags May Not Be Supported in Future Versions of HTML CSS Alternative Recommended Basefont Center Font Strike Underline XHTML 1.0 Requires Strict Conformance Must Conform to One of DTDS Strict, Transitional, Frameset Must Be Well-Formed Elements, Attributes in Lower Case Attribute Values Must Always Be Quoted Empty Elements Require End-Tags Or Short-Cut e.g In Class Exercise Convert the index.htm File That You Created Last Class to Use Style Sheets Insert the Following in the Section H1 {color:Blue} H2 {color:Red} Publish it to your Web Site Use an external W3C Style Sheet to Display the Same Page Link These to Your Class Web Page Lab Work HomeSite HTML Validation For More Information CSS http://www.w3c.org/Style/CSS http://stars.com/Authoring/Style/Sheets/ http://www.westciv.com/style_master/house/tutorials/in dex.html ... 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 P.stoptext {color: red;... TYPE=text/css”> Style Sheet “Libraries” W3C Core Styles http://www.w3.org/StyleSheets/Core/stylename Eight Core Styles For demo: http://www.w3.org/StyleSheets/Core/preview.html Style Sheet... 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