Client-Server%20Model

1
Client-Server Model

• Client requests information from Server
• Examples Give me a web-page Give me my e-mail
• Server replies with the information to the Client
• Examples Here is your web-page Here is your
  e-mail

Client
Server
Note As a highway passes through many cities,
the path from the client to the server
passes through many computers
2
Internet
International Network of Networks that
Communicate with each other

• The traffic on the internet superhighway are
  messages
• Large messages are sent in small packets as large
  deliveries on roads are sent in more than one
  truck
• Packets use different routes (packet switching)
• Traffic levels determines the packet shipping
  routes

3
Protocol
Rules of the Road
Definition Rules of Communication

• TCP Transaction control protocol
• Establishes a connection between two computers
• Sends, receives, and puts message packets in
  order
• Handles lost, delayed, duplicate, or misread
  packets
• Gives up (TimeOut) if data not received in time
• Prevents data flooding a computer (Flow Control
  and Buffer Overflow)
• UDP User Datagram Protocol
• No flow-control or error-recovery
• Speed needed, not reliability (e.g. Streaming)
• IP Internet protocol
• Best-effort attempt to get packets through a
  network
• Routes messages towards their destination

4
High Level Protocols
Closer to the user than low level protocols as
TCP/IP

• Http Hypertext transfer protocol
• Transmit web pages over the Internet (WWW)
• Ftp File Transfer Protocol
• Transfer files between computers
• IMAP, POP3, SMTP, MIME
• Email protocols
• Allows email to contain attachments
• Telnet Network Virtual Terminal Protocol
• Log into and use a computer that is far away

5
Addresses
Every Internet Computer Needs an Address

• IPv4 Addresses (approximately 4 billion
  possibilities)
• Address 207.142.131.235
• Domain Name www.wikipedia.org
• 4 decimal numbers (0 through 255) separated by
  periods
• IPv6 Addresses (one for each grain of sand in
  300 million earth sized planets)
• Address 3ffe050100080000026097fffe40efab
• 8 hex numbers (0 through ffff) separated by
  periods
• Decimal numbers go from 0 through 9
• Hex numbers go 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f
• Register New Domain Names (Cost 20 to 100)
• Registrars like www.netsol.com and
  www.register.com

Key Point IPv6 and IPv4 can coexist on the
internet
6
Internet Components

• Router Device which forwards traffic between
  networksDomain Name Servers Device that
  converts human readable domain names into IP
  addresses
• Bridge Device to connect networks of the same
  kind
• Gateway Device to connect networks of different
  kinds
• Hub Device that is the connection point for
  computers of a network
• Web Server Device that hosts web pages
• E-mail Server Device that queues and distributes
  e-mail
• Firewall Device that prevents unwanted access

7
Brief Introduction to the Internet

• 1960s - Creation of first national network
  (ARPAnet)
• Continue operating even if nodes sabotaged (led
  to TCP/IP)
• Text-based messages (led to E-mail)
• Share files (led to FTP)
• Remote access (led to Telnet)
• Only ARPA funded institutions
• 1970s - BITNET (Because its time) and CSNET
  (Computer Science)
• By organization left out of ARPA funding
• 1980s - NSFnet (National Science Foundation)
• Connect supercomputers at five universities
• 1992 NSFnet connected more than one million
  computers
• 1995 NSFnet became the Internet

8
The World Wide Web
Definition Worldwide collection of software and
protocols Purpose enable retrieval of documents
linked to different sites

• 1984 Embed hyperlinks to text files (Xerox Note
  Cards)
• 1990 Tim Berness-Lee
• Designed Hypertext Transfer Protocol (HTTP)
• Designed HTML and wrote the initial browser
• Created the first Web server
• Coined the term World Wide Web
• 1993 Mosaic
• the first graphical user interface (GUI) browser

9
Key Definitions

• Internet
• Worldwide collection of networks, computers, and
  other devices
• Hypermedia
• documents information linked together using
  hyperlinks
• Web page - An individual web document
• Web site - A collection of related web pages
• Browser (Explorer, Navigator, Mosaic)
• Web client software to initiate conversations
  with servers
• Servers (Apache, Microsoft)
• Web programs that respond to client requests for
  information

10
URL Universal Resource Locator

• To communicate, we need to name things
• Domain Name Human readable computer or device
  address (e.g. www.sou.edu)
• Universal Resource Locator (URL) Location of a
  web document
• http//cs.sou.edu/harveyd/index.html is a web
  document at domain cs.sou.edu within the public
  home directory folder for the user harveyd (named
  public_html by convention).

Note Lets review directory (folder) structures
11
Programming the Web

• Markup languages sprinkle control tags through
  the text
• Client Side HTML, XML, XHTML
• Script languages computer language statements
  typed in the text to perform special processing
• Client Side - JavaScript, VBScript, PerlScript
• Server Side - PHP, ASP, Perl (Covered in cs260)
• Object-based language computer language
  statements separate from the text to provide
  extra processing
• Client Side - Java Applets, Flash
• Server Side - Java Servlets, Visual Basic, C

Note We focus on the languages shown in bold.
There willbe some exposure to the languages
shown in italics
12
Web-based Markup Languages

• HTML (Hypertext mark up language)
• Purpose Control the display of web-documents
• HTML quickly evolved without standards
• The World Wide Web Consortium finally establish
  standards, but they werent followed
• XML (Extensible markup language)
• Subset of SGML (Standard Generalized Markup
  Language)
• XML is a meta language (language to define
  languages)
• Defines syntax for compliant web-based mark-up
  languages
• Used to present and process web documents
• XHTML (Extensible hypertext markup language)
• Standardized HTML that conform to XML rules
• We focus on XHTML in this class

Dont worry, well see examples later
13
Introduction to HTML

• What is an HTML source document?
• Answer Text with instructions for the browser
• What are the instructions for?
• Browsers interpret the instructions to properly
  display the document (presentation instructions)
• Browsers interpret the instructions to divide the
  document into sections (structure instructions)
• Different browsers often interpret HTML
  instructions differently

14
Our First HTML Source Document
XHTML tags (elements) and attributes define
the display

• Exercise
• Copy, paste into Notepad
• Use the save as option
• Use the extension .htm or .html and type the
  file name in quotes (e.g. first.htm).
• Display with a browser
• View source
• Use MS Word to make page
• Save as web-page
• Display in a browser
• View source

• Example Web Page
• lthtml gt
• ltheadgt
• lttitlegtA web-pagelt/titlegt
• lt/headgt
• ltbodygt
• lth1gtA headerlt/h1gt
• lth2 align "right"gt I go to the
  rightlt/h2gt
• lthr /gt
• lt/bodygtlt/htmlgt

The class web-site has examples of this page made
through word and through NotePad
15
Lessons from the First Web Page

• Tags specify HTML browser instructions
• Enclose tags with lt and gt (e.g. lttitlegt)
• Most tags have a matching end tag (e.g. lt/titlegt)
• Tags that dont end finish with /gt (e.g. lthr
  /gt)
• Tags specify HTML document sections
• lthtmlgt The entire document
• ltheadgt A header portion with special
  instructions
• ltbodygt The section that has data to display
• A variety of tags
• lttitlegt title for the web-page
• lth1gtlth2gt Large bolded headings (lth1gt is bigger)
• lthr /gt a horizontal line
• A tag attribute (lth1 alignrightgt)
• align"right" Make the text go to the right
• align is the attribute name its value is right

16
XHTML Compliance

• Case
• Tag and attribute names should be lower case
• Attribute values can be use upper and lower case
• Attributes (name "value")
• Spaces separate tags having multiple attributes,
  any order is ok.
• Enclose values in quotes Use "" and not
• Nest properly (End nearest tags first)
• Correctlth1gtltemgtlt/emgtlt/h1gt
• Incorrectlth1gtltemgtlt/h1gtlt/emgt
• Type the lthtmlgt tag as follows lthtml
  xmlns"http//www.w3.org/1999/xhtml"gt
• Start XHTML documents with (Note the html tag)
• lt?xml version"1.0" encoding"ISO-8859-1" ?gt
• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
  1.0 Transitional//EN"
• "http//www.w3.org/TR/xhtml1/DTD/x
  html1-transitional.dtd"gt
• lthtml xmlns"http//www.w3.org/1999/xhtml" gt

17
Programming Tips

• Browsers will try to display HTML documents that
  are full of errors
• Browsers ignore tags that are misspelled of that
  they dont recognize
• HTML instructions are suggestions they are not
  requirements
• Some browsers can interpret the same HTML source
  document differently
• Browsers ignore extra spaces (white space)
• Indented web-pages are easier to read

18
Paragraph and Line Break Tags
Exercise Create and display web pages with the
following text andtags. You can create a page by
cutting and pasting into our first web-page. What
do you notice about how these tags work?

• Paragraphs
• ltpgtThe White Houselt/pgt
• ltpgtlt/pgtltpgtlt/pgt
• ltpgtlt/pgtltpgtlt/pgt
• ltpgt1600 Pennsylvania Avenue NWlt/pgt
• ltpgtWashington, D.C.lt/pgt

• Line Breaks
• A sentenceltbr /gt
• Another sentence
• ltbr /gtltbr /gtltbr /gtltbr /gt
• A ltbr /gt third sentence

http//cs.sou.edu/harveyd/classes/cs210/examples/
Week1Example2.html
19
Header Tags
Exercise Create and display a web page with the
following text andtags. What do you notice about
how header tags work? What about The ltpregt tag?

• lth1gtLevel 1 Headerlt/h1gt
• lth2gtLevel 2 Headerlt/h2gt
• lth3gtLevel 3 Headerlt/h3gt
• lth4gtLevel 4 Headerlt/h4gt
• lth5gtLevel 5 Headerlt/h5gt
• lth6gtLevel 6 Headerlt/h6gt
• ltpregtDisplay Exactly as typedlt/pregt

http//cs.sou.edu/harveyd/classes/cs210/examples/
Week1Example3.html
20
Inline Versus Block

• Block Tags (e.g. lth1gtltbodygtltblockquotegt)
• Specify self-contained sections of a document
• Inline Tags (e.g. ltigtltemgtltstronggtltbgt)
• Apply to text in the current block of a document
• Blocks can contain nested blocks (e.g.
  ltbodygtlth1gt)
• Notes
• Inline tags apply to text in the current block
• Inline tags do not apply outside the current
  block
• Note that only one of the following emphasize
  text
• ltblockquotegtltemgtEmphasizedlt/emgtlt/blockquotegt
• ltemgtltblockquotegtPlain textlt/blockquotegtlt/emgt

21
Structure Versus Presentation

• Presentation Tags (e.g. ltbgtltigtltsupgtltsubgt)
• These tags specify specifically how to display
  pages
• Browsers normally follow the specifications
• Structure Tags (e.g. ltstronggtltemgt)
• These tags indicate document structure to a
  browser
• ltemgt means emphasize
• ltstronggt means strongly emphasize
• Browsers on different devices present pages
  differently
• Good web-page designs use structure tags

22
Illustrative Example
Exercise Create and display a web page with the
following text andtags. When you use notepad to
cut and paste, manually use the enter key to
split up the lines. What do you notice about the
tags? Note that some of these tags are
presentation and deprecated. Do you see them?

• Lincolns speech ltblockquotegt
• ltbgtFourlt/bgt score and seven years ago our fathers
  brought forth on this ltigtcontinentlt/igt a new
  nation, conceived in ltemgtlibertylt/emgt and
  dedicated to the proposition that all
  ltstronggtltstronggt men lt/stronggtlt/stronggt are
  created equal. Now we are ltugtengagedlt/ugt in a
  great civil war, testing ltbgtltigtltugtwhetherlt/ugtlt/igtlt
  /bgt that nation or any nation so conceived and so
  dedicated can long endure.
• lt/blockquotegt Speech is over

http//cs.sou.edu/harveyd/classes/cs210/examples/
Week1/Example4.html
23
Fonts and Sizes

• Structure (Browser enlarges the font size)
• ltbiggtltbiggtTwo sizes biggerlt/biggtlt/biggt
• ltsmallgtOne size smallerlt/smallgt
• Presentation (HTML calls for Specific size)
• ltttgtTeletype Fontlt/ttgt
• ltfont size"20"gtSize 20 textlt/fontgt
• Notes
• Specific size might look bad on handheld devices
• User preferences can override HTML specifications
• Possible user preference default choices
• The Monospace Font all characters have the same
  width
• The Proportional Font Characters vary in width
• Size and color of text

24
The Meta Tag
Define information about the page

• ltmeta name"xxx" content"xxx" http-equiv"xxx"
  /gt
• Information for search engines to look for
• Name"keywords" content"keywords separated by
  commas"
• Name"authors" content"authors separated by
  commas"
• Name"description" content"description of this
  document"
• Tell browsers to replace expire copy, redirect,
  or refresh
• http-equiv"refresh" content"15"
• http-equiv"refresh" content"15"
  url"http//www.sou.edu"
• Tell browser information about format or
  expiration date
• http-equiv"content-type" content"text/html"
• http-equiv"expires" content"31 Dec 99"
• http-equiv"charset" content"iso-8859-1"

25
The Head Section
Contains general Information for browsers and
search engines

• ltheadgt
• lttitlegtAromatic Coffee and Tealt/titlegt
• ltmeta name"keywords" content"coffee,exotic,im
  ported" /gt
• ltmeta name "description" content"Coffee
  Wholesaler and retailer" /gt
• ltmeta name "author" content "John Webpage"
  /gt
• ltmeta http-equiv "refresh" content "5" /gt
• lt/headgt
• Comments
• Title Defines text to display in the Browser
  title bar
• Meta Tells search engines what is in the page
• Meta Tells browser to reload every 5 seconds
• Note The above meta tags have more than one
  attribute

26
HTML Special Characters
http//www.utoronto.ca/webdocs/HTMLdocs/NewHTML/is
o_table.html
Character Symbol Character Symbol
" quot para
space nbsp copy
amp divide
lt lt times
gt gt times
cent õ otilde
not pound
¼ frac14 yen
¾ frac34 µ micro
Example TextnbspnbspnbspSeparated with 3
spaces
27
Other HTML Tidbits

• Comments help make your HTML more readable
• HTML comments start with lt!-- And end with
  --gtlt!-- This is a three line
  comment --gt
• Browsers ignore everything in a comment
• There are deprecated HTML tags and attributes
• Browsers still support these tags, but may not in
  the future
• There are better ways to do the same things
• Examples
• Strike through (ltstrikegt), Underline (ltugt),
  Specify font (ltfontgt), and Center text (ltcentergt)

28
Creating XHTML web-pages

• Use editors like NotePad, PsPad, NotePad, or
  Word
• Advantage easy Disadvantage can be error
  prone
• Save as web-page with office programs like word
• Advantage We can easily make complex pages
• Disadvantage Documents get very large
• We can use WYSIWYG HTML software
• Advantage Can be less error prone
• Disadvantages
• Less control over html
• The software can be expensive

29
Which Tools Will We Use?
Must be free, simple to use, and allow us to
focus on course content

• WordPad, PsPad, or NotePad text editor programs
• Mozilla Tools (Under Tools/Web-Development)
• Mozilla HTML Editor (Composer)
• Mozilla JavaScript Console helps find JavaScript
  errors
• Mozilla JavaScript Debugger helps debug
  JavaScript
• Mozilla DOM Inspector shows document organization
• Meracl or ImageMapic utilities
• These utilities help us easily create image maps

Notes Mozilla, Meracl, and ImageMapic are
free downloads DOM stands for Document Object
Model
30
XML
Extensible Markup Language

• XML defines a class of markup languages
• Each XML language has different tags, but the
  same syntax
• Domain name spaces defines tags these languages
• XHTML is XML compliant
• XHTML compliant browsers must detect syntax
  errors
• Strict rules simplify browser complexity
• XHTML name space http//www.s3.org/1999/xhtml
• Web-services generally are XML languages
• Web-service programs are implemented over the web
• Each application defines its XML compliant
  language
• Best-practice applications
• Export files in XML format
• Avoid proprietary formats that become obsolete
• ACORNS example http//cs.sou.edu/harveyd/acorns/A
  corns2_0/lessons/Lessons/FamilyDinner.xml

31
Some Review Questions

• What are deprecated tags?
• How are line breaks in text treated by browsers?
• What are differences between ltpgt and ltbr /gt?
• What are HTML comments?
• What is a meta-language?
• What is XML? Why was it developed?
• Which header tags are smaller than normal text?
• Why are ltbiggt and ltsmallgt tags preferred over
  ltfontgt?
• How do browsers respond to the ltblockquotegt tag?
• What are some differences between XHTML 1.0 and
  HTML 4.01?