1 / 34

Internet / Intranet CIS-536

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

vpenn
Download Presentation

Internet / Intranet CIS-536

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Internet / IntranetCIS-536 Class 3 More HTML Cascading Style Sheets

  2. Class 3 Agenda • Recap Last Week • Homepage Discussion • More HTML • Cascading Style Sheets • Style Discussion • Discuss Homework/Project

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

  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.

  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

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

  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”

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

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

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

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

  12. Using Images • <IMG SRC=“image.gif” ALIGN=“top” HEIGHT=“100” 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 • <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” • <A HREF=“link.htm”><IMG SRC=“clickme.gif”></A>

  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 • <TABLE WIDTH=“80%”> • WIDTH – Percentage of Browser Window • <TR COLSPAN=“2” ROWSPAN=“2”> • Allows Information to Span Multiple Rows/Columns

  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

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

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

  17. 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 • <META HTTP-EQUIV=“refresh” CONTENT=5; URL=“newpage.htm”> • Document Will Reload Every 5 Seconds • If URL Specified: This Page Will Display For 5 Seconds and Load New Page • Example

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

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

  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

  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: • Fonts, Colors, Spacing, Margins

  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

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

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

  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/stylename • Eight Core Styles • For demo: http://www.w3.org/StyleSheets/Core/preview.html

  26. Style Sheet Grouping • H1 {color: green} H2 {color:green} H3 {color:green} Can Be Written: H1 H2 H3 {color: green}

  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 Comments • H2 {color: blue} /* All Headers Displayed in Blue */

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

  29. More CSS Properties • List 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,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

  30. Other Useful Tags / Information • <DIV STYLE=“font-size:10pt; color:blue”> • Allows an Arbitrary Division of an HTML Document • Attributes Only Apply Within the <DIV> Tags • <SPAN class=“xxx”> • 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

  31. 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 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 • Or Short-Cut e.g. <HR/>

  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

  33. Lab Work • HomeSite • HTML Validation

  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

More Related