internet intranet fall 2000 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Internet / Intranet Fall 2000 PowerPoint Presentation
Download Presentation
Internet / Intranet Fall 2000

Loading in 2 Seconds...

play fullscreen
1 / 34

Internet / Intranet Fall 2000 - PowerPoint PPT Presentation


  • 240 Views
  • Uploaded on

Internet / Intranet Fall 2000 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 Internet

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Internet / Intranet Fall 2000' - Renfred


Download Now 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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
internet intranet fall 2000

Internet / IntranetFall 2000

Class 3

More HTML

Cascading Style Sheets

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

Brandeis University Internet/Intranet Spring 2000

internet intranet extranet
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

Brandeis University Internet/Intranet Spring 2000

html tips compatibility
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.

Brandeis University Internet/Intranet Spring 2000

using color fonts in web pages
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

Brandeis University Internet/Intranet Spring 2000

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

Brandeis University Internet/Intranet Spring 2000

color attributes
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”

Brandeis University Internet/Intranet Spring 2000

fonts
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

Brandeis University Internet/Intranet Spring 2000

other text manipulation tags
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

Brandeis University Internet/Intranet Spring 2000

image formats
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)

Brandeis University Internet/Intranet Spring 2000

image formats 2
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

Brandeis University Internet/Intranet Spring 2000

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

Brandeis University Internet/Intranet Spring 2000

html tables 1
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

Brandeis University Internet/Intranet Spring 2000

html tables 2
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

Brandeis University Internet/Intranet Spring 2000

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

Brandeis University Internet/Intranet Spring 2000

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

Brandeis University Internet/Intranet Spring 2000

multimedia
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

Brandeis University Internet/Intranet Spring 2000

client side image maps
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

Brandeis University Internet/Intranet Spring 2000

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

Brandeis University Internet/Intranet Spring 2000

meta tags 2
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

cascading style sheets css
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

Brandeis University Internet/Intranet Spring 2000

the philosophy of style sheets
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

Brandeis University Internet/Intranet Spring 2000

basic example of global style in header
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

Brandeis University Internet/Intranet Spring 2000

same example using inline style
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

Brandeis University Internet/Intranet Spring 2000

global style sheets
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

Brandeis University Internet/Intranet Spring 2000

style sheet grouping
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

style sheet classes
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 */

Brandeis University Internet/Intranet Spring 2000

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

Brandeis University Internet/Intranet Spring 2000

more css properties
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

Brandeis University Internet/Intranet Spring 2000

other useful tags information
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

Brandeis University Internet/Intranet Spring 2000

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

Brandeis University Internet/Intranet Spring 2000

in class exercise
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

Brandeis University Internet/Intranet Spring 2000

lab work
Lab Work
  • HomeSite
  • HTML Validation

Brandeis University Internet/Intranet Spring 2000

for more information
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

Brandeis University Internet/Intranet Spring 2000