Internet / Intranet

CIS-536

Class 2More Internet Technology

Client-Side Web Technology

2

Class 2 Agenda

• Internet Technology - Continued– Connectivity– Mail: SMTP / POP– FTP

• HTML

3

Web Hierarchy

Operating Systems

NetworkingThe Internet

Core Internet ProtocolsWorld Wide Web

Web Forms Web Applications

UNIX, Windows, Other O/S

OSI Model, Ethernet, LANs

TCP/IP, DNS, Backbone

SMTP (Mail), FTP, Telnet

HTML, Browsers, Web Servers

CGI

Scripting, Applets

TECHNOLOGY Key Components

Mainframes, Minis, PC’sComputers

4

Connectivity• Connectivity Requires:

– 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

5

Connectivity Options

• Standard Analog Telephone Line– Hayes Compatible Asynchronous Modem

• V.32 : 2400 – 9600 bps : 15 - 55 minutes• V32.bis : 7200bps - 14.4 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

6

Connectivity Options (2)• ISDN

– “Digital” Dial-Up– 3 Channels: 16 kbps, 64 kbps, 64 kbps– In Practice: 56-64 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• 16-640 kbps from Consumer to ISP

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

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.

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

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

11

Sockets• The API To the TCP/IP Protocol

– 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

12

FTP : File Transfer Protocol

FileSystem

ServerProtocol

Interpreter

ServerData Transfer

Module

ClientServer

UserProtocol

Interpreter

UserData Transfer

Module

FileSystem

UserInterface

FTP Commands

FTP Replies

Data

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

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

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• http://www.csra.net/junodj/ws_ftp32.htm

– Cute FTP• 30-day Evaluation• http://www.cuteftp.com/download/index.html

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

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:YesYes: Forwarding Address (Target Will Follow-Up)No: Forwarding Address (Sender Must Follow-Up)No

4. Send Data5. Repeat Step 3,4 For Each Recipient6. End Session

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

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

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

21

Encoding Techniques• Portable Formats

– Seven-Bit• 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

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• No Encoding• Lines May Be Too Long

23

Retrieving Mail• Offline Model

– 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

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

25

Mail Process Diagram

Client’s MailApplication

Sender

Formatted MailMessage

SenderSMTPServer

SMTPServer(s)

SMTPServer(s)

“Internet”

Recipient’sSMTPServer

TCP/IP Routing Local MailFile

Recipient

Recipient’s MailApplication

POP

26

HTML Overview• Markup Languages• HTML Evolution• Intro to HTML “Programming”

– Core HTML

• Next Week:– Advanced HTML

• “Layout” Tags

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

28

SGML Example – Tags, Structure<EMAIL> <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> <P> Also, What is your weather like today? </P></BODY>

<EMAIL>

29

HTML Evolution• HTML (1990)

– Text Based• HTML 2.0 (1994)

– The De-Facto Portability Standard• HTML 3.0 (HTML+) 1995 -INRIA / MIT

– Tables– Banners (ala I.E. Marquees)– Math Symbols– Enhancements– Obsolete on Introduction

• Netscape, IE, Java pursuing their own standards / enhancements

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

31

HTML Evolution (3)• XHTML 1.0 (2000)

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

32

HTML Basics• Tags and Attributes

– 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

33

Tag Types– Structural 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

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

35

HTML Creation Tools• HTML Editors

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

36

Important HTML Structural Tags• <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 3.2 //EN”>

• <HTML>– <HEAD>

• <TITLE>• </TITLE>

– </HEAD>– <BODY>– </BODY>

• </HTML>

37

Core HTML 2.0 Logical Tags• Headings

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

38

HTML Links• External / Absolute:

<A HREF = “ http://www.mkat.com/index.htm”> 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 HREF=“mailto:evan@mkat.com”>Click Here to Send Mail</A>

• Image– <A HREF=“mailto:evan@mkat.com”><IMG SRC=“mailbox.jpg” ALT=“Send Mail to Evan”></A>

39

HTML Tables & PreFormatted Text• <TABLE>

– <TR> - Table Row• <TD> - Table Data• </TD>

– </TR>• </TABLE>

• <PRE> - PreFormatted Text• </PRE>

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

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.htm3. View it In a Web Browser Locally

42

HTML Lab (2)3. Bring Up WS_FTP4. 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:

http://users.shore.net/~brinetxx (where xx is your Account #)

8. You Should See The Same Page You Just Uploaded

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• Email Me When It is Complete

– Remember to Include the URL to Your Page

44

Next Week• Advanced HTML

– HTML 4.0• Cascading Style Sheets

45

Additional Resources• Some HTML Primers

– www.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html– metalab.unc.edu/edweb/htmlintro.html– www.cwru.edu/help/introHTML/

• General Web Information– www.w3c.org – Official Site of the W3C– www.internet.com – Portal For Internet Information

• www.wdl.com - Web Developer• www.webdevelopersjornal.com - Web Developer’s Journal

• ISP’s– www.shore.net/services/support/– world.std.com/help/web/tutorial.shtml

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

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.

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

49

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

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”

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

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

53

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)

54

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

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>

56

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

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

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 ThenDisplay What is Between <FRAMESET> </FRAMESET>

ElseDisplay 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

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

60

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

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

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

63

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

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

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

66

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

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

68

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

69

Style Sheet Grouping• H1 {color: green} H2 {color:green} H3

{color:green}Can Be Written:

H1 H2 H3 {color: green}

70

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

*/

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

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

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