The Internet and the WWW are Different

1
The Internet and the WWW are Different

• The Internet is a global digital infrastructure
  that connects millions of computers and tens of
  millions of people
  
• The World Wide Web is a mechanism that unifies
  the retrieval and display of a subset of data on
  the Internet
  
• An intranet is a local/global information
  structure that connects an organization internally

2
Network Basics

• A host is a computer that is enabled to function
  on a network
  
• any set of hosts connected in such a way that any
  two hosts can send and receive messages is called
  a network
  
• a protocol is the method by which two computers
  agree to communicate
  
• an address space is the set of names of computers
  that can be referenced

3
Ethernet

• Developed at Xerox PARC in early 1970s
• Ethernet operates using broadcast technology
• a computer A requests a connection to computer B.
  All computers hear the request, but only computer
  B responds
  
• Ethernet implements carrier-sense multiple access
  with collision detection (CSMA/CD)
  
• if a collision is detected, a random amount of
  time is spent waiting until the request is
  re-issued
  
• A popular implementation consists of twisted-pair
  cabling to a hub, called 10BaseT, meaning
  10Mbits/sec
  
• recently 100 MBPS is becoming more popular

4
Basic Services of the Internet

• E-mail
• Telnet
• Telnet is the main Internet protocol for
  creating a connection with a remote machine. It
  gives the user the opportunity to be on one
  computer system and do work on another, which may
  be across the street or thousands of miles away.
  Where modems are limited, in the majority, by the
  quality of telephone lines and a single
  connection, telnet provides a connection that's
  error-free and nearly always faster than the
  latest conventional modems.
• FTP (File Transfer Protocol)
• FTP is the primary method of transferring files
  over the Internet. Given proper permission, it's
  possible to copy a file from a computer in South
  Africa to one in Los Angeles at very fast speeds.
  This normally requires either a user id on both
  systems or a special configuration set up by the
  system administrator(s).
• .

5
LAN Internet Access

• Speak TCP/IP and add a Domain Name Server
• A router may be located either at your site
• or at your ISP

6
ARPANet

• In the late 1960s there were many LANs which were
  incompatible
  
• The Department of Defense (DoD) launched a
  research project to connect LANs together
  
• ARPAnet becomes the first internetwork,
  fundamental technologies it introduces include
  
• Packet switching
• TCP/IP
• Domain Name System

7
Short History of the ARPAnet/Internet

• The US Dept. of Defense Advanced Research
  Projects Agency (ARPA) conceives the idea of
  connecting military research computers together,
  late 1960s
• TCP/IP protocol suite is developed by Cerf and
  Kahn, early 70s
  
• TCP/IP is distributed along with BSD UNIX and
  universities join the ARPANet, late 70s
  
• 1980s, Domain Name System is developed ARPAnet
  expands to NSFnet and all colleges, universities,
  and research centers are connected
  
• 1990, ARPAnet transforms into the Internet
  systems that search for Internet content are
  developed Gopher, WAIS, Archie, Veronica
  
• The Internet Advisory Board (IAB) and Internet
  Engineering Task Force (IETF) guide developments
  
• 1997, the Internet connects more than 10 million
  computers and 40 million peopleit continues to
  grow at an exponential rate
  

8
Packet Switching

• A packet switching system permits multiple pairs
  of computers to communicate over a shared
  network
  
• Messages/files are broken into segments of
  varying size, called packets.
  
• Each packet is labeled with source and
  destination addresses
  
• The receiver must reassemble the packets in the
  proper order

9
Packets Transfer Across the Network
Computer A
Computer C
Pb2
Pa2
Pb1
Pa1
Computer D
Computer B
Computer A sends packets across the network
to Computer C while Computer B sends packets
to Computer D
10
Implications of Packet Switching

• Packets must be labeled with their source and
  destination
  
• Computers must have a unique identifier
• Packet sizes can vary from 1 character to some
  maximum limit
  
• Many different devices can use packet switching,
  promoting sharing e.g. printers

11
IP and TCP/IP

• To be a host on the Internet your computer must
• have a domain name, e.g. design.ucla.edu
• be assigned a unique IP address, e.g.
  128.125.2.1
  
• use the Internet protocol
• have a network connection that provides a route
  to the Internet

12
Layering of TCP/IP Protocols
applic layer transport layer network
layer
data link layer
SNMP
HTTP
FTP
TELNET
NFS/RPC
DNS
UDP
TCP
IP
http//design.ucla.edu
13
Naming, Addressing

• A domain name specifies a host
• An address specifies the location of the resource
  on the network
  
• in the telephone network Name John Doe, Address
  213-555-1212
  
• in the Internet, Name design.ucla.edu,
  Address128.125.2.1

14
The Internet has different communication protocols
ftp
Internet
gopher
telnet
wais
www
15
History of the WWW

• 1989-1990 Tim Berners-Lee conceives the
• WWW at CERN in Geneva
• 11/90 Berners-Lee releases WWW
• prototype on NeXt computer
• 01/92 Release of source code for line
• mode browser, lynx and HTTP
• 03/93 Mosaic browser from NCSA is released
• 09/93 WWW internet traffic now measures
• 1 of NSF backbone
• 12/94 Netscape Navigator 1.0 is released
• 08/95 Microsoft Windows 95 and Internet
• Explorer 1.0 released
• 12/95 Java is released

16
Approximate History of WWW Growth
Month Web Sites Jul 1995 18,957 Dec 1
995 74,709 Jul 1996 299,403 Dec 1996
603,367 Jul 1997 1,203,096 Dec 1997
1,681,868 Jul 1998 2,594,622 Dec 1998
3,689,227 statistics from www.netcraft.co.uk
Can you locate more recent statistics?
17
HTML
18
What is HTML

• Hypertext Markup Language (HTML) is a language in
  which one can describe
  
• The display and format of text
• The display of graphics
• Pointers to other html files
• Pointers to files containing graphics, digitized
  video and sound
  
• Forms that capture information from the viewer
• HTML was developed by Tim Berners-Lee of CERN
  around 1990
  
• HTML is understood by WWW browserse.g.,
  Netscapes Navigator, and Microsofts Internet
  Explorerwhich interpret and display the output
  to the viewer

19
An Example

• The nine planets of the solar system are
• mercury,
• venus,
• earth,
• mars,
• jupiter, saturn, uranus, neptune and pluto.
• The very nearest star is about 7,000 times
  farther away than pluto is to our sun.
  
• Save this file as example1.txt
• Save this file as example1.html

20
Browser Output - Example 1
example1.html
example1.txt
21
Example 2 Adding Some Markup

• The nine planets of the solar system are
  mercury, venus, earth, mars, jupiter, saturn,
  uranus, neptune and pluto.
  
• The very nearest star is about 7,000
  times farther away than pluto is to our sun.
  
  

22
General Structure

• HTML documents have a head and body
• head should contain a title
• body may have paragraphs
• The Solar System
• The nine planets of the solar system are...

23
Browsers Are Tolerant

• Browsers follow the rule of being tolerant of
  mistakes in the input
  
• They ignore markup they dont understand
• Netscape Navigator/Microsoft Internet Explorer
  are tolerant browsers
  
• They do not insist that the HTML document begin
  and end with
  
• and/or tags are not required
• But, there is no guarantee that this behavior
  will be the same for all browsers

24
Attributes

• Elements may have parameters, called attributes
• Attributes are placed in the start tag before the
  final ""
  
• Attributes have the form namevalue
• E.g. is the first heading tag
• Start of Chapter 1
• Attribute values are often enclosed in quotes,
  either double or single
  
• Quotes are not required when the value contains
  only letters, digits, hyphens, and periods.
  
• Attribute names are case insensitive, but not
  necessarily attribute values

25
Example of tag attributes

• Using inline style settings to set the font size,
  background and color of text
  
• Setting Body Attributes
• color"FF0000" The nine planets of the solar
  system ...
  

26
Browser Output - Body Tag Attributes
27
Headings

• There are six levels of headings
  
  
• Navigator and Internet Explorer render them left
  aligned and bold
  
• Includes paragraph breaks before and after and
  sufficient white space to render the heading
  
• The Solar System Headings
• The Solar System
• The Solar System
• The Solar System
• The Solar System
• The Solar System
• The Solar System

28
Browser Output
29
Example - Center Entire Document

• The Solar System
• BODY text-align center
• The nine planets of the solar system are
  mercury, venus, earth, mars, jupiter, saturn,
  uranus, neptune and pluto.
  
• The very nearest star is about 7,000
  times farther away than pluto is to our sun.
  
• Note element is deprecated

30
Browser Output for Centering
31
Horizontal Rule

• The tag causes a horizontal line to be
  drawn attributes include
  
• Size, thickness in pixels
• No Shade turns off shading
• Width, either pixels or percent
• The default positioning of a line is centered,
  but that can be overridden with the ALIGN
  attribute its options are left, right, and
  center

32
Example - Horizontal Rule
Examples of Horizontal
rule Examples of Horizon
tal Rules Rules of different sizes, SI
ZE5, 10, and 25. NOSHADE Rules of different a
lignment, ALIGNleft, center and right.
aligncenter
Rules of different width, width10, 25, and
50 gncenter
33
Browser Output
34
Anchors Away

• An anchor is a way to designate a link to another
  document or to a specific place in the same
  document
  
• Begins with and ends with
• The link location is given by the attribute HREF
  (Hypertext Reference) e.g.,
  
• See r02/189-2/index.html"Class Home Page for the
  Design Media Arts in Times of War website.
  
• Hypertext links are displayed using underlining,
  color, or highlighting
  
• Depends on the browser defaults or the use of
  style settings
  
• Once a link is taken, it should change color

35
Example Using Anchors for Naming
Welcome to my HTML Tutorial
Introduction

Chapter 1

Chapter 2

. . . Lots of text here . . .
Introduction This docum
ent contains a short tutorial on how to write
HTML. ... Chapter 1B
In this chapter we learn what a markup lan
guage . . . Chapter
2
In this chapter we learn about anchors
and their...
36
Browser Output for Naming
37
Examples of Anchors

• a file in the same directory
  and same domain as the current page
  
• a file on your
  local machine in directory G\351
  
• a file in directory mydocs on machine
  design.ucla.edu, a WWW site

38
More Examples of Anchors

• Given the current position, this moves up
  one directory, connects to Docs/Style/ and
  displays the document Overview.html
  
• Connects to lycos and runs pursuit with three
  arguments
  
• ertextMarkupLanguage"
  
• An anchor that executes the ftp program to fetch
  a file
  
• D
  ownload RFC1866

39
Changing the default color of a link
My pagey bgcolor"FFFFFF" link"009999"
vlink"FFCC00" alink"990066"This
is my link Use Photoshop
colors to get web colors in hexadecimal values
40
Setting Color

• Expressed either as Red, Green, Blue (RGB) triple
  or using predefined color names
  
• four equivalent forms of specifying color
• EM color f00 / rgb /
• EM color ff0000 / rrggbb /
• EM color rgb(255,0,0) / integer 0,255/
• EM color rgb(100, 0, 0) / float range
  0.0 - 100.0 /
  
• Pre-defined color names
• Black"000000 Green"008000"Silver"C0C0C0"
  Lime"00FF00"Gray"808080" Olive"808000"Wh
  ite"FFFFFF" Yellow"FFFF00"Maroon"800000" N
  avy"000080"Red"FF0000" Blue"0000FF"Purple
  "800080" Teal"008080"Fuschia"FF00FF" Aqua"
  00FFFF"

41
Element

• The IMG element embeds an image in the current
  document, e.g.
  
• Some attributes of include
• Aligntop, middle, or bottom to align text around
  an image
  
• border to place a border around an image
• If set to 1 or higher, places a black box around
  the image
  
• If set to 0, leaves no surrounding box
• height and width to control the dimensions of the
  image
  
• Alt to replace an image with text, if the image
  is unavailable or a text browser is used e.g.,
  
• Tower"
  

42
Example - Images
Example ofImages
Example of Images /images/const2.gif" ALT"under construction"
BORDER 0 under construction" if" ALT"under construction" BORDER 10
construction" BORDER10 WIDTH100 HEIGHT100 IMG SRC"../images/const2.gif" ALT"under
construction" BORDER10 WIDTH50 HEIGHT50 DY
43
Active Images

• Active images are images that can be clicked and,
  just like an anchor, they act as a hypertext
  link
  
• Active images have a border around them and the
  cursor changes shape when passed over
  
• You can erase the border by placing border"0
  inside the img tag
  

44
About the Internet
http//www.lib.berkeley.edu/TeachingLib/Guides/Int
ernet/WhatIs.html
HTML Tutorials
http//archive.ncsa.uiuc.edu/General/Internet/WWW/
HTMLPrimerAll.html
http//www.davesite.com/webstation/html/