Transcript Internet - DMA Classes

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
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
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 twistedpair cabling to a hub, called 10BaseT, meaning
10Mbits/sec
– recently 100 MBPS is becoming more popular
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).
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
User 1
User 2
User 3
User 4
Router
News
server
TCP/IP
network
Domain
Name
server
DNS
Internet
Print
server
Database
server
Mail
server
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
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 people—it continues to grow
at an exponential rate
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
Packets Transfer Across the Network
Computer
A
Computer
C
Pb2
Computer
B
Pa2
Pb1
Pa1
Computer
D
Computer A sends packets across the network
to Computer C while Computer B sends packets
to Computer D
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
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
Layering of TCP/IP Protocols
applic
layer
transport
layer
network
layer
HTTP
FTP
TELNET
NFS/RPC
DNS
UDP
TCP
IP
data link
layer
http://design.ucla.edu
SNMP
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,
Address=128.125.2.1
The Internet has different communication protocols
ftp
gopher
wais
Internet
www
telnet
History of the WWW
• 1989-1990
• 11/90
• 01/92
• 03/93
• 09/93
• 12/94
• 08/95
• 12/95
Tim Berners-Lee conceives the
WWW at CERN in Geneva
Berners-Lee releases WWW
prototype on NeXt computer
Release of source code for line
mode browser, lynx and HTTP
Mosaic browser from NCSA is released
WWW internet traffic now measures
1% of NSF backbone
Netscape Navigator 1.0 is released
Microsoft Windows 95 and Internet
Explorer 1.0 released
Java is released
Approximate History of WWW Growth
Month
Jul
Dec
Jul
Dec
Jul
Dec
Jul
Dec
1995
1995
1996
1996
1997
1997
1998
1998
# Web Sites
18,957
74,709
299,403
603,367
1,203,096
1,681,868
2,594,622
3,689,227
statistics from www.netcraft.co.uk
Can you locate more recent statistics?
HTML
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 browsers—e.g.,
Netscape’s Navigator, and Microsoft’s Internet
Explorer—which interpret and display the output
to the viewer
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
Browser Output - Example 1
example1.html
example1.txt
Example 2: Adding Some Markup
<P>The nine planets of the solar system are
<B>mercury, venus, earth, mars, jupiter,
saturn, uranus, neptune and pluto.</B></P>
<P>The very nearest star is about <I>7,000</I>
times farther away than pluto is to our sun.
</P>
General Structure
• HTML documents have a head and body
– head should contain a title
– body may have paragraphs
<HTML>
<HEAD>
<TITLE>The Solar System</TITLE>
</HEAD>
<BODY>
<P>The nine planets of the solar system are...
</BODY>
</HTML>
Browsers Are Tolerant
• Browsers follow the rule of being tolerant of
mistakes in the input
– They ignore markup they don’t understand
• Netscape Navigator/Microsoft Internet Explorer are
tolerant browsers
– They do not insist that the HTML document begin
and end with <HTML>
– <HEAD> and/or <BODY> tags are not required
– But, there is no guarantee that this behavior
will be the same for all browsers
Attributes
• Elements may have parameters, called attributes
• Attributes are placed in the start tag before
the final ">"
• Attributes have the form name=value
E.g. <H1> is the first heading tag
<H1 id="Chapter1">
Start of Chapter 1
</H1>
• 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
Example of <BODY> tag attributes
• Using inline style settings to set the font
size, background and color of text
<HTML>
<HEAD>
<TITLE>Setting Body Attributes</TITLE>
</HEAD>
<body bgcolor=”green">
<font face="Arial, Helvetica, sans-serif"
color="#FF0000"> The nine planets of the solar
system ... </font>
</body>
</html>
Browser Output - Body Tag Attributes
Headings
• There are six levels of headings: <H1,H2,...,H6>
• Navigator and Internet Explorer render them left
aligned and bold
• Includes paragraph breaks before and after and
sufficient white space to render the heading
<HTML><HEAD>
<TITLE>The Solar System Headings</TITLE>
</HEAD>
<BODY>
<H1>The Solar System </H1>
<H2>The Solar System </H2>
<H3>The Solar System </H3>
<H4>The Solar System </H4>
<H5>The Solar System </H5>
<H6>The Solar System </H6>
</BODY></HTML>
Browser Output
Example - Center Entire Document
<HEAD>
<TITLE>The Solar System</TITLE>
<STYLE type="text/css">
BODY {text-align: center}
</STYLE></HEAD>
<BODY>
<P>The nine planets of the solar system are
<B>mercury, venus, earth, mars, jupiter, saturn,
uranus, neptune and pluto.</B></P>
<P>The very nearest star is about <I>7,000</I> times
farther away than pluto is to our sun.</P>
</BODY>
• Note <CENTER> element is deprecated
Browser Output for Centering
Horizontal Rule
• The tag <HR> causes a horizontal line to be drawn;
attributes include:
– Size, thickness in pixels
• <HR SIZE="15">
– No Shade turns off shading
• <HR NOSHADE>
– Width, either pixels or percent
• <HR NOSHADE WIDTH="50" SIZE="25">
• <HR NOSHADE WIDTH="25%" SIZE="25">
• <HR NOSHADE WIDTH="25%" ALIGN="right"
SIZE="25">
– The default positioning of a line is centered, but
that can be overridden with the ALIGN attribute;
its options are left, right, and center
Example - Horizontal Rule
<HTML><HEAD><TITLE>Examples of Horizontal
rule</TITLE></head>
<BODY><H2>Examples of Horizontal Rules</H2>
<HR>
Rules of different sizes, SIZE=5, 10, and 25.
<HR SIZE=5 NOSHADE><HR SIZE=10 NOSHADE><HR SIZE=25
NOSHADE>
Rules of different alignment, ALIGN=left, center and
right.
<HR width=50% align=left> <HR width=50% align=center>
<HR width=50% align=right>
Rules of different width, width=10%, 25%, and 50%
<HR width=10% align=center> <HR width=25% align=center>
<HR width=50% align=center>
Browser Output
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 <A> and ends with </A>
• The link location is given by the attribute
HREF (Hypertext Reference); e.g.,
See <A
HREF="http://classes.design.ucla.edu/Winter02/1892/index.html">Class Home Page</A> 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
Example Using Anchors for Naming
<BODY><H1>Welcome to my HTML Tutorial</H1>
<A HREF="#intro">Introduction</A><BR>
<A HREF="#chap1">Chapter 1</A><BR>
<A HREF="#chap2">Chapter 2</A><BR>
. . . Lots of text here . . .
<A NAME="intro"></A><HR>
Introduction: This document contains a short
tutorial on how to write HTML. ...<P>
<A NAME="chap1"></A>
<B>Chapter 1</B><BR>
In this chapter we learn what a markup language
. . .<P>
<A NAME="chap2"></A>
<B>Chapter 2</B><BR>
In this chapter we learn about anchors and their...
Browser Output for Naming
Examples of Anchors
• <A href=myfile.html> a file in the same
directory and same domain as the current page
• <a href=file://g:\351\myfile.html> a file on
your local machine in directory G:\351
• <A href=http://www.design.ucla.edu/mydocs/book.doc> a
file in directory mydocs on machine
design.ucla.edu, a WWW site
More Examples of Anchors
• Given the current position, this <HREF> moves
up one directory, connects to Docs/Style/ and
displays the document Overview.html
<A HREF="../Docs/Style/Overview.html"> … </A>
• Connects to lycos and runs pursuit with three
arguments
<A HREF="http://www.lycos.com/cgi-bin/pursuit?
Hypertext+Markup+Language"> … </A>
• An anchor that executes the ftp program to
fetch a file
<A HREF="ftp://ds.internic.net/rfc/rfc1866.txt">
Download RFC1866 </A>
Changing the default color of a link
<html>
<head>
<title>My page</title>
</head>
<body bgcolor="#FFFFFF" link="#009999" vlink="#FFCC00"
alink="#990066">
<a href=#>This is my link</a>
</body>
</html>
* Use Photoshop colors to get web colors in hexadecimal
values
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"
White="#FFFFFF"
Yellow="#FFFF00"
Maroon="#800000"
Navy="#000080"
Red="#FF0000"
Blue="#0000FF"
Purple="#800080"
Teal="#008080"
Fuschia="#FF00FF"
Aqua="#00FFFF"
<IMG> Element
• The IMG element embeds an image in the current
document, e.g. <IMG SRC="file.gif">
• Some attributes of <IMG> include
– Align=top, 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.,
<IMG SRC="eiffel.gif" ALT="picture of the
Eiffel Tower">
Example - Images
<HTML><HEAD><TITLE>Example ofImages</TITLE></HEAD>
<BODY>
<H1>Example of Images</H1>
<IMG SRC="../images/const2.gif" ALT="under
construction" BORDER =0>
<IMG SRC="../images/Xconst2.gif" ALT="under
construction">
<IMG SRC="../images/const2.gif" ALT="under
construction" BORDER =10>
<IMG SRC="../images/const2.gif" ALT="under
construction"
BORDER=10 WIDTH=100 HEIGHT=100>
<IMG SRC="../images/const2.gif" ALT="under
construction"
BORDER=10 WIDTH=50 HEIGHT=50>
</BODY></HTML>
Active Images
• Active images are images that can be clicked and,
just like an anchor, they act as a hypertext link
<A HREF="http://www.design.ucla.edu/index.html">
<IMG SRC=”design.gif"> </A>
– 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
About the Internet
http://www.lib.berkeley.edu/TeachingLib/Guides/Internet/WhatIs.html
HTML Tutorials
http://archive.ncsa.uiuc.edu/General/Internet/WWW/HTMLPrimerAll.html
http://www.davesite.com/webstation/html/