Transcript Weekly Handout #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
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
Rules of
the Road
Protocol
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
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
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: 3ffe:0501:0008:0000:0260:97ff:fe40:efab
– 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
Internet Components
• Router: Device which forwards traffic between networks
Domain 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 email
• Firewall: Device that prevents unwanted access
Brief Introduction to the Internet
• 1960’s - 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
• 1970’s - BITNET (Because it’s time) and CSNET (Computer Science)
• By organization left out of ARPA funding
• 1980’s - NSFnet (National Science Foundation)
• Connect supercomputers at five universities
• 1992: NSFnet connected more than one million computers
• 1995: NSFnet became the Internet
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
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
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).
harveyd account
Index.html
public_html
cs.sou.edu
Note: Lets review directory (folder) structures
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 will
be some exposure to the languages shown in italics
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 weren’t 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
Don’t worry, we’ll see examples later
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
Our First HTML Source Document
XHTML “tags (elements)” and “attributes” define the display
Example Web Page
Exercise
<html >
<head>
<title>A web-page</title>
</head>
1. Copy, paste into Notepad
2. Use the ‘save as’ option
3. Use the extension ‘.htm’ or
‘.html’ and type the file name
in quotes (e.g. “first.htm”).
4. Display with a browser
5. View source
6. Use MS Word to make page
7. Save as web-page
8. Display in a browser
9. View source
<body>
<h1>A header</h1>
<h2 align = "right">
I go to the right</h2>
<hr />
</body></html>
The class web-site has examples of this page made through word and through NotePad
Lessons from the First Web Page
• Tags specify HTML browser instructions
– Enclose tags with ‘<’ and ‘>’ (e.g. <title>)
– Most tags have a matching end tag (e.g. </title>)
– Tags that don’t end finish with ‘/>’ (e.g. <hr />)
• Tags specify HTML document sections
– <html> : The entire document
– <head>: A header portion with special instructions
– <body>: The section that has data to display
• A variety of tags
– <title>: title for the web-page
– <h1><h2>: Large bolded headings (<h1> is bigger)
– <hr />: a horizontal line
• A tag attribute (<h1 align=“right”>)
– align="right": Make the text go to the right
– align is the attribute name; its value is right
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)
– Correct:<h1><em></em></h1>
– Incorrect:<h1><em></h1></em>
Type the <html> tag as follows
<html xmlns="http://www.w3.org/1999/xhtml">
Start XHTML documents with: (Note the html tag)
<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
Programming Tips
• Browsers will try to display HTML documents
that are full of errors
• Browsers ignore tags that are misspelled of that
they don’t 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
Paragraph and Line Break Tags
Exercise: Create and display web pages with the following text and
tags. You can create a page by cutting and pasting into our first webpage. What do you notice about how these tags work?
Paragraphs
<p>The White House</p>
<p></p><p></p>
<p></p><p></p>
<p>1600 Pennsylvania
Avenue NW</p>
<p>Washington, D.C.</p>
Line Breaks
A sentence<br />
Another sentence
<br /><br /><br /><br />
A <br /> third sentence
http://cs.sou.edu/~harveyd/classes/cs210/examples/Week1Example2.html
Header Tags
Exercise: Create and display a web page with the following text and
tags. What do you notice about how header tags work? What about
The <pre> tag?
<h1>Level 1 Header</h1>
<h2>Level 2 Header</h2>
<h3>Level 3 Header</h3>
<h4>Level 4 Header</h4>
<h5>Level 5
Header</h5>
<h6>Level
6 Header</h6>
<pre>Display Exactly as typed</pre>
http://cs.sou.edu/~harveyd/classes/cs210/examples/Week1Example3.html
Inline Versus Block
• Block Tags (e.g. <h1><body><blockquote>)
– Specify self-contained sections of a document
• Inline Tags (e.g. <i><em><strong><b>)
– Apply to text in the current block of a document
– Blocks can contain nested blocks (e.g. <body><h1>)
• 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
• <blockquote><em>Emphasized</em></blockquote>
• <em><blockquote>Plain text</blockquote></em>
Structure Versus Presentation
• Presentation Tags (e.g. <b><i><sup><sub>)
– These tags specify specifically how to display pages
– Browsers normally follow the specifications
• Structure Tags (e.g. <strong><em>)
–
–
–
–
These tags indicate document structure to a browser
<em> means emphasize
<strong> means strongly emphasize
Browsers on different devices present pages differently
• Good web-page designs use structure tags
Illustrative Example
Exercise: Create and display a web page with the following text and
tags. 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?
Lincoln’s speech <blockquote>
<b>Four</b> score and seven years ago our fathers
brought forth on this <i>continent</i> a new nation,
conceived in <em>liberty</em> and dedicated to the
proposition that all <strong><strong> men
</strong></strong> are created equal. Now we are
<u>engaged</u> in a great civil war, testing
<b><i><u>whether</u></i></b> that nation or any nation
so conceived and so dedicated can long endure.
</blockquote> Speech is over
http://cs.sou.edu/~harveyd/classes/cs210/examples/Week1/Example4.html
Fonts and Sizes
• Structure (Browser enlarges the font size)
– <big><big>Two sizes bigger</big></big>
– <small>One size smaller</small>
• Presentation (HTML calls for Specific size)
– <tt>Teletype Font</tt>
– <font size="20">Size 20 text</font>
• 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
The Meta Tag
Define information about the page
<meta name="xxx" content="xxx" http-equiv="xxx" />
• 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"
The Head Section
Contains general Information for browsers and search engines
<head>
<title>Aromatic Coffee and Tea</title>
<meta name="keywords" content="coffee,exotic,imported" />
<meta name= "description" content="Coffee Wholesaler and retailer" />
<meta name= "author" content= "John Webpage" />
<meta http-equiv= "refresh" content= "5" />
</head>
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
HTML Special Characters
http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/iso_table.html
Character
Symbol
Character
Symbol
"
&quot;
¶
&para;
space
&nbsp;
©
&copy;
&
&amp;
÷
&divide;
<
&lt;
×
&times;
>
&gt;
×
&times;
¢
&cent;
õ
&otilde;
¬
&not;
£
&pound;
¼
&frac14;
¥
&yen;
¾
&frac34;
µ
&micro;
Example: Text&nbsp;&nbsp;&nbsp;Separated with 3 spaces
Other HTML Tidbits
• Comments help make your HTML more readable
– HTML comments start with <!-- And end with -->
<!-- This is
a three line
comment -->
– 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 (<strike>), Underline (<u>), Specify font
(<font>), and Center text (<center>)
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
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
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/Acorns2_0/lessons/Lessons/FamilyDinner.xml
Some Review Questions
•
•
•
•
•
•
•
•
•
•
What are deprecated tags?
How are line breaks in text treated by browsers?
What are differences between <p> and <br />?
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 <big> and <small> tags preferred over <font>?
How do browsers respond to the <blockquote> tag?
What are some differences between XHTML 1.0 and
HTML 4.01?