Internet / Intranet CIS-536

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. ltFONT FACE Times Romangt
• Optional Otherwise
• E.g. ltFONT COLORbluegt ltFONT COLORbluegt
• Safe Tags
• Results are Reasonable Even if Tag is Not
  Recognized
• E.g. It was a ltBgtgreatlt/Bgt day!
• Confusing Tags
• Result is Confusing, But No Serious Harm Results
• The following text is ltbgtboldlt/bgt
• Bad Tags
• Result May Be Opposite of What You Expect
• ltDELgtIf this text appears, we have a deallt/DELgt
• 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
• RGB00,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)
• ltBODY BGCOLORwhite TEXTblack
• LINKblue VLINKmaroon ALINKredgt
• 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

• ltBASEFONT SIZE2gt
• Sets the Default Size of Text
• 1 Smallest, 7 Largest, Default 3
• ltFONT FACEarial COLORblue SIZE2gt
• 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

• ltBLINKgtFlashing Text lt/BLINKgt
• Flashes Text On and Off, Netscape Only
• ltMARQUEE BEHAVIORscroll BGCOLORred
  DIRECTIONleft LOOP7gt
• Scrolls Text Across Page, Microsoft IE Only
• BEHAVIOR scroll, slide, alternate
• LOOP Number of Times to Scroll
  (Default-Infinite)
• ltSTRIKEgt StrikeThroughText lt/STRIKEgt
• ltSUBgtSubscript Text lt/SUBgt
• ltSUPgtSuperscript Text lt/SUPgt
• ltBgtBold Text lt/Bgt
• ltIgtItalicized Text lt/Igt
• ltUgt Underlined Text lt/Ugt
• ltNOBRgtText Between Tags Will Be on One Line
  lt/NOBRgt
• ltWBRgtIdentifies 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
• Dont 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

• ltIMG SRCimage.gif ALIGNtop HEIGHT100
  WIDTH200 BORDER5gt
• 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
• ltBODY BACKGROUNDimage.gif BGPROPERTIESfixedgt
  
• BACKGROUND Image File to Show As Background
• Backgrounds are Tiled
• BGPROPERTIESfixed (IE Only) Dont Scroll
  Background As Page Scrolls
• IMG May Appear Within an Anchor Acts as a
  Button
• ltA HREFlink.htmgtltIMG SRCclickme.gifgtlt/Agt

13
HTML Tables (1)

• As Tables of Data
• ltTABLE BORDER2 CELLSPACING 5
  CELLPADDING3gt
• 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
• ltTABLE WIDTH80gt
• WIDTH Percentage of Browser Window
• ltTR COLSPAN2 ROWSPAN2gt
• 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
• ltFRAMESETgt
• Replaces the ltBODYgt Tags
• Hierarchical Can Subdivide Sections Further
• ltNOFRAMEgt
• Conditional Code
• If Browser Supports Frames Then
• Display What is Between ltFRAMESETgt lt/FRAMESETgt
• Else
• Display What is Between ltNOFRAMEgt lt/NOFRAMEgt
• By Putting ltBODYgt Tags Within ltNOFRAMEgt Section
• Cleverly Allow This to Work on Older Browsers
• I.e. Browser Doesnt Have to Recognize ltFRAMEgt
  Tags

16
Frames (2)

• ltFRAME NAMEleftframe SRCinfo.htm
• SCROLLING Yesgt
• 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
• ltA HREFnewpage.htm TARGETleftgt
• TARGET The Internal Frame Reference Name
• Use Frames Judiciously
• Often Same Effect Can Be Achieved Through a
  Single Page
• 
  Example

17
Multimedia

• Sound
• ltBGSOUND SRCnoise.wav LOOPInfinitegt
• 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
• ltMETA HTTP-EQUIVrefresh CONTENT5
  URLnewpage.htmgt
• 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
• ltIMG SRCpic.gif USEMAPmapnamegt
• ltMAP namemapnamegt
• ltAREA SHAPErect COORDS0,0,100,100
  HREFthisone.htm ALTlower leftgt
• ltAREA SHAPEcircle COORDS200,200,20
  HREFcirclepage.htm ALTmiddlegt
• lt/MAPgt
• 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
• ltMETA NAMEkeyword CONTENT valuegt
• Information for Browser
• ltMETA HTTP-EQUIVkeyword CONTENTvaluegt
• 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 Authors 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 Shouldnt 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 Wont Crash, Just Wont 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

• ltHEADgt
• ltSTYLEgtH1 color blue lt/STYLEgt
• lt/HEADgt
• All Text Within an H1 Tag is Blue
• Equvalent of
• ltH1gtltFONT colorbluegtxxx lt/FONTgtlt/H1gt
• 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

• ltH1 STYLEcolor bluegtxxx lt/H1gt
• 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 Theres 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

• ltHEADgt
• ltLINK RELSTYLESHEET HREFmystyle.css
  TYPEtext/cssgt
• lt/HEADgt
• Style Sheet Libraries
• W3C Core Styles
• http//www.w3.org/StyleSheets/Core/stylename
• Eight Core Styles
• For demo http//www.w3.org/StyleSheets/Core/previ
  ew.html

26
Style Sheet Grouping

• H1 color green H2 colorgreen H3
  colorgreen
• Can Be Written
• H1 H2 H3 color green

27
Style Sheet Classes

• User Defined Classes
• ltHTMLgtltHEADgt
• ltSTYLEgt
• P.stoptext color red font 16 pt
• P.gotext color green font 18 pt
• lt/STYLEgt lt/HEADgt ltBODYgt
• ltP ClassstoptextgtThis text appears in redlt/Pgt
• ltP ClassgotextgtThis text appears in green lt/Pgt
• lt/BODYgtlt/HTMLgt
• 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-imageURL (newbullet.gif)
• List-style-type disc,circle,square,decimal,upper-
  alpha,lower-alpha,upper-roman,none.
• ltSTYLEgt
• UL list-style-imageURL(newbullet.gif)
• lt/STYLEgt
• Cursor auto, crosshair, default,hand,text,help,wa
  it
• 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

• ltDIV STYLEfont-size10pt colorbluegt
• Allows an Arbitrary Division of an HTML Document
• Attributes Only Apply Within the ltDIVgt Tags
• ltSPAN classxxxgt
• 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. ltHR/gt

32
In Class Exercise

• Convert the index.htm File That You Created Last
  Class to Use Style Sheets
• Insert the Following in the ltHEADgt Section
• ltSTYLEgt
• H1 colorBlue
• H2 colorRed
• lt/STYLEgt
• 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/tutorial
  s/index.html