Internet intrarnet CIS class 2

FTP : File Transfer ProtocolFile System Server Protocol Interpreter Server Data Transfer Module Client Server User Protocol Interpreter User Data Transfer Module File System User Interfa

Internet / Intranet

CIS-536

Class 2 More Internet Technology Client-Side Web Technology

Web Hierarchy

Operating Systems

Networking The Internet Core Internet Protocols

World Wide Web

Web Forms Web Applications

UNIX, Windows, Other O/SOSI Model, Ethernet, LANs TCP/IP, DNS, BackboneSMTP (Mail), FTP, TelnetHTML, Browsers, Web Servers

CGI Scripting, Applets

Mainframes, Minis, PC’sComputers

– A Connection Point Already Linked to the Internet

• ISP – Internet Services Provider

– Measured in Bits Per Second (bps)

File

• Protocol Overhead

• Quality of Connection (Noise)

• Error Detection and Recovery

• Physical Limitations of Connected Computers

Connectivity Options

• Standard Analog Telephone Line

• 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

• Dedicated Analog Telephone Line(s)

– Typically Used to Connect Networks (Shared

• 1.5 – 9 mbps from ISP to Consumer

• 16-640 kbps from Consumer to ISP

– 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

Connectivity Options (4)

– FDDI – Fiber Distributed Data Interface

• 100 mbps

• Can Cover Long Distances

• Backbone – High Speed Connection Between Large Computers

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

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

• 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

FTP : File Transfer Protocol

File

System

Server Protocol Interpreter

Server Data Transfer Module

Client Server

User Protocol Interpreter

User Data Transfer Module

File System

User Interface

FTP Commands

FTP Replies

Data

• Allows Access to a Particular Directory Structure Only

• All Anonymous Users Access Same Directory

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

– Ascii – Format Conversion

• UNIX and Windows Text File Formats are Different

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

– 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

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 RecipientPossible Responses:

YesYes: 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

SMTP Mail Message Format

– Messages are a Human Readable Text File

– Two Parts: Envelope and Contents

Mail Limitations

• ASCII Only Uses 7 Bits of the 8-bit Byte

Limitation Even If Sender, Recipient Do Not

• No Concept of Lines

• May Be Over 64 KB

– “Translate” Binary File Into a Text Based Format

– Split Long Messages Into Multiple Mail Messages

Encoding: Header Information

• Mime Format in Mail Header Identifies the Contents

• MIME Body Types

– Text

» Plain – No Encoding Needed

» RTF – Allows Some Formatting

• 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

Encoding Techniques (2)

• Non-Portable Formats

– Will Cause Corruption if an Intermediate

Server Has Limitations

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

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

Mail Process Diagram

SMTP Server(s)

“Internet”

Recipient’sSMTPServer

File

Recipient

Recipient’s MailApplication

POP

Markup Languages

• Late 1960’s – IBM

• Tags

– Used in Some Form By All Word Processors

– More Portability Across Machines

• No Standard For Binary Files

– Allows For Easier Debugging

– Accessible to More “Programmers”

• Parsers, Add-On’s, Customizations

– 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

SGML Example – Tags, Structure

– Netscape, IE, etc.

• ISSUE: Which Version of HTML Should we

Use?

• ISSUE: Which Version Should Browsers

Support?

HTML Basics

• Tags and Attributes

– Format: <TAG ATTRIBUTE=“attrib”>text </TAG>

– Tags are Essentially Instructions to The

– 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

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

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

• Affect the Readability of the “Code” Only

– E.g Capitalization, Indenting of Tags

Using Such Tools

• Therefore: No Editors / Tools Allowed (Yet)

Important HTML Structural Tags

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

Core HTML 2.0 Logical Tags

– <UL> - Unordered List, <OL> - Ordered List

• <LI> - List Item

• Graphics

– <IMG SRC=“ImageFile”

ALT=“DisplayText”>

<A HREF = “ index.htm”> Click for Main Page</A>

<A HREF = “ demos/index.htm”> Click for Demo Page</A>

HTML Tables & PreFormatted Text

• 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

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:

http://users.shore.net/~brinetxx

8 You Should See The Same Page You Just

Uploaded

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

– 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

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

HTML Tips / Compatibility

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

– Results are Reasonable Even if Tag is Not Recognized

• E.g It was a <B>great</B> day!

– Result is Confusing, But No Serious Harm Results

• The following text is <b>bold</b>

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

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

– 16 Color Safety Palette

• Colors are Same on Macs, PCs

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”

– Sets the Default Size of Text

• 1 – Smallest, 7 – Largest, Default = 3

SIZE=“+2”>

• Must Be Resident on the System

• “Portable” Font Faces: (Windows, Mac, Unix)

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

Image Formats

• GIF Files – Graphics Interchange Format

– Allows Transparent Backgrounds

– 256 Color Palette

– Supports Interlaced GIFs

– Supports Animations

• Four Sequential Images

– May Distract Users

– Better For Photos

– Requires More Decompression by Browser

– Progressive JPGs

• Smoother Version of Interlaced GIFs

• Not Supported by All Browsers (Blank Image Results)

• Most Browsers Cache Graphics

– If You Use the Same Graphic in Multiple Places

on Site, Cached Image Will Produce Faster Dispays

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>

HTML Tables (1)

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

– Used to Create Tabs, Left, Right Margins

– Tables Within Tables Allows Additional

HTML Tables (2)

– 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

– Easy to Get Into Habit of Using Them Without Realizing That They are Browser Specific

Example

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

• 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

Frames (2)

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

– 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

– Often Same Effect Can Be Achieved Through a Single Page

» Example