Internet / Intranet CIS-536
-
Upload
honorato-mcgowan -
Category
Documents
-
view
27 -
download
1
description
Transcript of Internet / Intranet CIS-536
![Page 1: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/1.jpg)
Internet / Intranet
CIS-536
Class 3More HTML
Cascading Style Sheets
![Page 2: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/2.jpg)
2
Class 3 Agenda
Recap Last WeekHomepage DiscussionMore HTMLCascading Style SheetsStyle DiscussionDiscuss Homework/Project
![Page 3: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/3.jpg)
3
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
![Page 4: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/4.jpg)
4
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.
![Page 5: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/5.jpg)
5
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
![Page 6: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/6.jpg)
6
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
![Page 7: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/7.jpg)
7
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”
![Page 8: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/8.jpg)
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 FaceMust Be Resident on the System“Portable” Font Faces: (Windows, Mac, Unix)
ArialTimes RomanCourierSans SerifWingDings
SIZE – Absolute or Relative to BASEFONTStandard: Size = 3
![Page 9: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/9.jpg)
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 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
![Page 10: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/10.jpg)
10
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)
![Page 11: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/11.jpg)
11
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
![Page 12: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/12.jpg)
12
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>
![Page 13: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/13.jpg)
13
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
![Page 14: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/14.jpg)
14
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
![Page 15: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/15.jpg)
15
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
![Page 16: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/16.jpg)
16
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
![Page 17: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/17.jpg)
17
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
![Page 18: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/18.jpg)
18
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
![Page 19: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/19.jpg)
19
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
![Page 20: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/20.jpg)
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
![Page 21: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/21.jpg)
21
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
![Page 22: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/22.jpg)
22
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
![Page 23: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/23.jpg)
23
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
![Page 24: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/24.jpg)
24
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
![Page 25: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/25.jpg)
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/stylenameEight Core Styles
For demo: http://www.w3.org/StyleSheets/Core/preview.html
![Page 26: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/26.jpg)
26
Style Sheet Grouping
H1 {color: green} H2 {color:green} H3 {color:green}Can Be Written:
H1 H2 H3 {color: green}
![Page 27: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/27.jpg)
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 CommentsH2 {color: blue} /* All Headers Displayed in Blue */
![Page 28: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/28.jpg)
28
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
![Page 29: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/29.jpg)
29
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
![Page 30: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/30.jpg)
30
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
![Page 31: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/31.jpg)
31
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/>
![Page 32: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/32.jpg)
32
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
![Page 33: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/33.jpg)
33
Lab Work
HomeSiteHTML Validation
![Page 34: Internet / Intranet CIS-536](https://reader035.fdocuments.in/reader035/viewer/2022062408/5681379e550346895d9f4471/html5/thumbnails/34.jpg)
34
For More Information
CSShttp://www.w3c.org/Style/CSShttp://stars.com/Authoring/Style/Sheets/http://www.westciv.com/style_master/house/tutorials/index.html