1. Internet / Intranet CIS-536
Class 2
More Internet Technology
Client-Side Web Technology 1

2. Class 2 Agenda Internet Technology - Continued HTML Connectivity
Mail: SMTP / POP
FTP
HTML 2 2

3. Web Hierarchy TECHNOLOGY Key Components Web Applications Web Forms
Scripting, Applets
Web Forms
CGI
World Wide Web
HTML, Browsers, Web Servers
Core Internet Protocols
SMTP (Mail), FTP, Telnet
The Internet
TCP/IP, DNS, Backbone
Networking
OSI Model, Ethernet, LANs
Operating Systems
UNIX, Windows, Other O/S
Computers
Mainframes, Minis, PC’s 3 3

4. Connectivity Connectivity Requires: Connection Speed
Hardware Interface Device
Transmission Protocol
TCP/IP Emulation
A Connection Point Already Linked to the Internet
ISP – Internet Services Provider
Connection Speed
Measured in Bits Per Second (bps)
Examples Show Speed to transfer a 1 Megabyte File
Actual Performance Depends on:
Protocol Overhead
Quality of Connection (Noise)
Error Detection and Recovery
Physical Limitations of Connected Computers 4 4

5. Connectivity Options Standard Analog Telephone Line
Hayes Compatible Asynchronous Modem
V.32 : 2400 – 9600 bps : minutes
V32.bis : 7200bps kbps : 9 – 18 minutes
V34 : 14.4 – 28.8 kbps : 4 – 9 minutes
56 kbps Modems : 2 – 4 minutes
Assume That ISP -> Telco Connection is Digital
Asymmetric: 56kbps max in one direction: 28bps in the other
K56Flex – (Rockwell Semiconductor)
X2 – (U.S. Robotics / 3Com)
V.90 – Unifies K56Flex / X2
Performance Varies Significantly 5 5

6. Connectivity Options (2)
ISDN
“Digital” Dial-Up
3 Channels: 16 kbps, 64 kbps, 64 kbps
In Practice: kbps (2 minutes)
Dedicated Analog Telephone Line(s)
Typically Used to Connect Networks (Shared Bandwidth)
T1 : 1.5 mbps : (5 seconds)
T3 : 44.7 mbps : ( < 1 second)
xDSL
Digital Transmission Using Standard Copper Telephone Cable
ADSL – Asymmetric
1.5 – 9 mbps from ISP to Consumer
kbps from Consumer to ISP 6 6

7. Connectivity Options (3)
LAN – Local Area Network
Shared Bandwidth
Theoretical Max: 1MB file in Less than 1 Second
Ethernet : 10 mbps
CSMA/CD Algorithm
Only Get Access to Line If Its Not Busy
Coax (RG58) or Unshielded Twisted Pair (UTP)
100 – 500 Meter Length of Cable Limitation
Fast Ethernet: 100 Megabits Per Second
Token Ring
“Equal Access” to The Line
4 – 16 mbps 7 7

8. Connectivity Options (4)
Cable Modems
Use Existing Cable Wiring
Implementations Vary Widely
Require Using Cable Provider as ISP
Shared Bandwidth
30 mbps Theoretical Max : 1.5 mbps Actual
WAN – Wide Area Network
FDDI – Fiber Distributed Data Interface
100 mbps
Can Cover Long Distances
Backbone – High Speed Connection Between Large Computers
Other Options: Satellite, ATM, Wireless etc. 8 8

9. IP Over Dial-Up Lines ISP Acts a Communications Hub
Has a “Fixed” Set of IP Addresses
Dynamically Assigns Them To Users
Dial-Up Protocols
SLIP – Serial Line Interface Protocol
IP Packets Over Point-to-Point Lines
PPP – Point-to-Point Protocol
Can Handle Other Protocols Beyond IP
Dynamic Configuration Capabilities
Error Detection
Can Dynamically Assign an IP Address 9 9

10. Importance of Routers Routers Manage the Flow In a Network
Serve as “Distribution Centers”
Additional Protocols Allow Routers to Communicate With Each Other
Smart Routers Can Handle Multiple Protocols
Some Modems are Also Routers 10 10

11. Sockets The API To the TCP/IP Protocol Windows Sockets - “Winsock”
Often called TCP/IP Protocol “Stack”
Windows Sockets - “Winsock”
Not part of Windows 3.1
Mutiple Third-Party Implementation
Implementations Differ
Version 1.1 – TCP/IP Only
Version 2.0 – Other Protocols Also
e.g. SPX/IPX – Used in Novell Networks
WinInet – Win 32 Internet API
A Microsoft Attempt to Make it Easier to Program Winsock 11 11

12. FTP : File Transfer Protocol
User
Interface
FTP Commands
Server
Protocol
Interpreter
User
Protocol
Interpreter
FTP Replies
File
System
Server
Data Transfer
Module
User
Data Transfer
Module
File
System
Data
Client
Server 12 12

13. FTP: Details Session Based
Data Converted to Neutral Data Format For Transmisssion
Client/Server Convert it to Native Data Formats
Port 21
Transmission Modes
Stream Mode
Block Mode
Compressed Mode
Login: Name/ Password
Anonymous FTP
Login: Anonymous
Allows Access to a Particular Directory Structure Only
All Anonymous Users Access Same Directory 13 13

14. FTP: Commands Get – Retrieve a File From Remote System
Put – Send a File to the Remote System
Multiple File Transfer – mput, mget
List Files in Directory – dir, ls
Change Directories
Local System (lcd)
Remote System (cd)
Transmission Mode
Binary – No Conversion
Ascii – Format Conversion
UNIX and Windows Text File Formats are Different 14 14

15. FTP In Practice
FTP is Still Used to Move Files Between Machines on the Internet
Used Extensively For Publishing Web Pages
GUI Versions of FTP For Windows are Common
Hide Internal Details From User
WS_FTP
Shareware: Free For Student Use
Cute FTP
30-day Evaluation 15 15

16. Electronic Mail Mail Options Proprietary email Systems
IBM – PROFS
Microsoft – MS-Mail
cc:Mail (Lotus)
Most Based on LAN File Server Model
Sender Writes a File to Recipient’s Directory
Gets Difficult When There are Multiple Mail Servers
Servers Must Route Messages to Other Servers
SMTP – Simple Mail Transfer Protocol
TCP/IP Methodology For Sending Mail Messages
Uses Port 25
Routers Forward Messages To Appropriate Server 16 16

17. SMTP Session SMTP Protocol is Session Based
Sending Router/Server Establishes a Connection With Target Router/Server
Waits Until Target is Ready to Receive Mail
Asks Target if It Will Accept Mail For Recipient
Possible Responses:
Yes
Yes: Forwarding Address (Target Will Follow-Up)
No: Forwarding Address (Sender Must Follow-Up) No
4. Send Data
5. Repeat Step 3,4 For Each Recipient
6. End Session 17 17

18. SMTP Mail Message Format
Messages are a Human Readable Text File
Two Parts: Envelope and Contents
Envelope:
Keyword/Value Pairs
One Per Line
Common Keywords
Subject:
Date:
From:
Reply-To:
Common Mailer Generated Keywords:
Received:
Message-Id:
Message Contents
Separated From Envelope By a Blank Line 18 18

19. Mail Limitations Many Mail Implementations Impose Limits:
Maximum Line Length: 1000 bytes
Maximum Message Size: 64 KB
ASCII Only
ASCII Only Uses 7 Bits of the 8-bit Byte
NOTE: Intermediate Nodes May Have This Limitation Even If Sender, Recipient Do Not
Problem: How to Send Binary Files?
No Concept of Lines
May Be Over 64 KB
Solution: Encoding
“Translate” Binary File Into a Text Based Format
Split Long Messages Into Multiple Mail Messages 19 19

20. Encoding: Header Information
MIME – Multipurpose Internet Mail Extensions
Mime Format in Mail Header Identifies the Contents
MIME Body Types
Text
Plain – No Encoding Needed
RTF – Allows Some Formatting
Image
Audio
Application
A Specific Application Format (e.g. Microsoft Word)
Structured
Allows Multiple Types in One Document
Message
Used To Identify Partial Messages 20 20

21. Encoding Techniques Portable Formats Seven-Bit Quoted-Printable Base64
All ASCII Characters – No Encoding
Quoted-Printable
Most of the Characters are 7-Bit ASCII
Others are Encoded
Most of Message is Human Readable
Base64
Groups of 3 Bytes Written as 4 Six-Bit ASCII Characters
The Result Is Not Human Readable
33% Increase In File Size
X-Token
Format is Privately Negotiated Between the SMTP Servers 21 21

22. Encoding Techniques (2)
Non-Portable Formats
Will Cause Corruption if an Intermediate Server Has Limitations
Eight-Bit
No Encoding
No Line Exceeds 1000 Characters
Binary
Lines May Be Too Long 22 22

23. Retrieving Mail Offline Model POP – Post Office Protocol
User Doesn’t Have to Be Connected In Order to Receive Messages
Mail Server Stores Messages For a User Locally
User Then Downloads Them To a Local File
POP – Post Office Protocol
Uses Port 110
Current Version: POP3 (Version 3)
Allows Selective Downloading
Session Based:
Authorization
User Name, Password
Transaction
STAT – Request Statistics (Number of Messages, Size)
LIST – List of Messages With Size
RETR – Download a Message
DELE – Delete Message From Server
QUIT – End Session 23 23

24. Other Mail Retrieval Options
IMAP – Internet Message Access Protocol
Intended for Laptops
Messages Remains on the Server
Laptop Has a Copy of Messages For Offline Viewing
Protocol Supports Manipulation of Server Message Files 24 24

25. Mail Process Diagram SMTP Server(s) “Internet” Recipient Sender Sender
TCP/IP Routing
Local Mail
File
SMTP
Server(s)
POP
Formatted Mail
Message
SMTP
Server(s)
Client’s Mail
Application
Recipient’s Mail
Application
“Internet”
Recipient
Sender 25 25

26. HTML Overview Markup Languages HTML Evolution
Intro to HTML “Programming”
Core HTML
Next Week:
Advanced HTML
“Layout” Tags 26 26

27. Markup Languages Late 1960’s – IBM
Add Formatting Information to a Document
Tags
Used in Some Form By All Word Processors
Human and Machine Readable Tags
More Portability Across Machines
No Standard For Binary Files
Allows For Easier Debugging
Accessible to More “Programmers”
Parsers, Add-On’s, Customizations
SGML - Formalizes Markup Language
DTD – Document Type Declarations
Formal Language to Describe a Markup “Grammar”
Describes How Tag is Interpreted, Displayed
Open – Anybody Can Create a Markup Language
Extensible – New Tags Can Be Ignored Without Fatal Results 27 27

28. SGML Example – Tags, Structure
< >
<SENDER>
<PERSON>
<FIRSTNAME>Evan</FIRSTNAME>
<LASTNAME>Schapiro</LASTNAME>
</PERSON>
</SENDER>
<BODY>
<P>
How many widgets do we need for next week’s
shipment to RJS?
</P>
Also, What is your weather like today?
</BODY> 28 28

29. HTML Evolution HTML (1990) HTML 2.0 (1994)
Text Based
HTML 2.0 (1994)
The De-Facto Portability Standard
HTML 3.0 (HTML+) INRIA / MIT
Tables
Banners (ala I.E. Marquees)
Math Symbols
Enhancements
Obsolete on Introduction
Netscape, IE, Java pursuing their own standards / enhancements 29 29

30. HTML Evolution (2) HTML 3.2 (1996) - Common Standard
Adopts many tags originated by Netscape, Microsoft, Sun
JavaApplets
Formatting and Text Flow
Header Tags
Meta, etc.
Shift in Focus
Market Driven
Focus on Page Layout, Not Logical Structure
HTML 4.0 (1999)
Style Sheets
Internationalization
Accessibility
Table / Form Improvements
Scripting / Multimedia
HTML 4.1 (1999) – Bug Fixes For HTML 4.0 30 30

31. HTML Evolution (3) XHTML 1.0 (2000) XHMTL Basic (Future)
Formalized Version of HTML
Required to Conform to Data Dictionary
XHMTL Basic (Future)
“Minimal” HTML for Mobile Devices
HTML “Variants”
Netscape, IE, etc.
ISSUE: Which Version of HTML Should we Use?
ISSUE: Which Version Should Browsers Support? 31 31

32. HTML Basics Tags and Attributes Syntax
Format: <TAG ATTRIBUTE=“attrib”>text </TAG>
Tags are Essentially Instructions to The Browser
Other Text is Either:
Text to Be Displayed
“Arguments” to the Tags
Syntax
Container Tags: Start and End Tag Required
Empty Tags: No End Tag Needed
Spacing, Linefeeds, etc. Are Mostly Ignored
Tags are Not Case Sensitive
Rules as to What Tags Can Be Included in Other Tags 32 32

33. Tag Types Structural Tags Logical Display Tags Layout Tags Meta Tags
e.g. <BODY>
Logical Display Tags
“Pure” Logical Display Tags
Tell the Browser the Type of Information
E.g. <CITE>, <AUTHOR>
Seldom Used in Practice
Common Logical Display Tags
E.g. <H1> - Header, <LI> - Items in a List
Layout Tags
Describe Specifically How an Item is to Be Displayed
E.g. <B> - Bold
Meta Tags
Information About the File
To Aid Processing
Have No Effect on the Display 33 33

34. Points to Remember A Browser Interprets the HTML File
Browsers May Display Tags Differently
Syntax Errors:
Unlike Traditional Computer Languages:
Browsers Try to “Fix” Errors
Browsers Don’t Provide Error Messages / Debugging
Each Browser Will Handle Errors Differently
Browsers Can Display Local HTML Files Directly
i.e. A Web Server is Not Required
Type Filepath Directly Into Address Field on Browser
There are Many Different Ways to Achieve the Same Result (“Redundant Tags”)
You Can Easily View the HTML For Any Web Page
Internet Explorer – View/ Source
Netscape – View / Page Source 34 34

35. HTML Creation Tools HTML Editors Tools As Developers Notepad
Tag Editors
Representational Editors
Tools
Syntax Checkers
Style Converters
Formatting Tools
Affect the Readability of the “Code” Only
E.g. Capitalization, Indenting of Tags
As Developers
You Should Understand the Details Before Using Such Tools
Therefore: No Editors / Tools Allowed (Yet) 35 35

36. Important HTML Structural Tags
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 //EN”>
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML> 36 36

37. Core HTML 2.0 Logical Tags Headings Paragraphs Line Break Lists
<H1>, <H2>, <H3>, <H4>
Paragraphs
<P>
Line Break
<BR>
Lists
<UL> - Unordered List, <OL> - Ordered List
<LI> - List Item
Graphics
<IMG SRC=“ImageFile” ALT=“DisplayText”> 37 37

38. HTML Links External / Absolute: External / Relative: Internal Mailto:
<A HREF = “ Click for Main Page</A>
External / Relative:
<A HREF = “ index.htm”> Click for Main Page</A>
<A HREF = “ demos/index.htm”> Click for Demo Page</A>
Internal
<A HREF=“#LocalName”>Text</A>
<A NAME=“LocalName”></A>
Mailto:
<A Here to Send Mail</A>
Image
<A
<IMG SRC=“mailbox.jpg” ALT=“Send Mail to Evan”></A> 38 38

39. HTML Tables & PreFormatted Text
<TR> - Table Row
<TD> - Table Data
</TD>
</TR>
</TABLE>
<PRE> - PreFormatted Text
</PRE> 39 39

40. Next Presentations HTML Lab Work Create A Basic Home Page Add an Image
Upload image to Server in Text Mode
View The Page
Upload image to Server in Binary Mode
View the Page
Try out the <PRE> Tag
View Output of Last week’s Class Exercise with and without <PRE> tag 40 40

41. HTML Lab (1) Create a File Locally Like This: <HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
<H1>This is xxxx’s Test Web Page.</H1>
<H2>Hello World</H2>
</BODY>
</HTML>
2. Save it As index.htm
3. View it In a Web Browser Locally 41 41

42. HTML Lab (2) 3. Bring Up WS_FTP 4. Connect to users.shore.net
Use Your Shore.Net Account and Password
Change to the public_html Directory
Upload index.htm to This Directory
Open Your Browser With the Address:
(where xx is your Account #)
8. You Should See The Same Page You Just Uploaded 42 42

43. Homework Install WS_FTP or equivalent on Your Home PC
Create Your Class HomePage
Add Links to In-Class Exercises
Upload it To Your ShoreNet Account
Me When It is Complete
Remember to Include the URL to Your Page 43 43

44. Next Week
Advanced HTML
HTML 4.0
Cascading Style Sheets 44 44

45. Additional Resources Some HTML Primers General Web Information ISP’s
metalab.unc.edu/edweb/htmlintro.html
General Web Information
– Official Site of the W3C
– Portal For Internet Information
- Web Developer
- Web Developer’s Journal
ISP’s
world.std.com/help/web/tutorial.shtml 45 45

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

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

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

49. Specifying Color By Name By RGB Value: #RRGGBB (Hexadecimal)
Browsers Support Some Common Color Names
By RGB Value: #RRGGBB (Hexadecimal)
# – 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 49 49

50. 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” 50 50

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

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

53. Image Formats GIF Files – Graphics Interchange Format JPG Files (JPEG)
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) 53 53

54. Image Formats (2) PNG – Portable Network Graphics BMP Display Issues
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 54 54

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

56. HTML Tables (1) As Tables of Data As a Text Formatting Feature
<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 56 56

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

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

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

60. Multimedia Sound Video – MPG, AVI Client-Pull
<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 60 60

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

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

63. Meta Tags(2) Browser Keyword/Values: Server 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 63 63

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

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

66. Basic Example of Global Style in Header
<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 66 66

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

68. Global Style Sheets <HEAD> </HEAD> Style Sheet “Libraries”
<LINK REL=STYLESHEET HREF=“mystyle.css TYPE=text/css”>
</HEAD>
Style Sheet “Libraries”
W3C Core Styles
Eight Core Styles
For demo: 68 68

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

70. Style Sheet Classes User Defined Classes C-Style Comments
<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 */ 70 70

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

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

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