The Internet and the WWW are Different
Download
1 / 44

The Internet and the WWW are Different - PowerPoint PPT Presentation


  • 337 Views
  • Updated On :

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

Related searches for The Internet and the WWW are Different

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'The Internet and the WWW are Different' - oshin


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
Slide1 l.jpg

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


Slide2 l.jpg

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


Slide3 l.jpg

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


Slide4 l.jpg

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

    .


Slide5 l.jpg

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


Slide6 l.jpg

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


Slide7 l.jpg

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


Slide8 l.jpg

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


Slide9 l.jpg

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


Slide10 l.jpg

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


Slide11 l.jpg

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


Slide12 l.jpg

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


Slide13 l.jpg

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


Slide14 l.jpg

The Internet has different communication protocols

ftp

Internet

gopher

telnet

wais

www


Slide15 l.jpg

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


Slide16 l.jpg

Approximate History of WWW Growth

Month # Web Sites

Jul 1995 18,957

Dec 1995 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?



Slide18 l.jpg

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 WWWbrowsers—e.g., Netscape’s Navigator, and Microsoft’s Internet Explorer—which interpret and display the output to the viewer


Slide19 l.jpg

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


Slide20 l.jpg

Browser Output - Example 1

example1.html

example1.txt


Slide21 l.jpg

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>


Slide22 l.jpg

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>


Slide23 l.jpg

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


Slide24 l.jpg

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


Slide25 l.jpg

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>



Slide27 l.jpg

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>



Slide29 l.jpg

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



Slide31 l.jpg

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


Slide32 l.jpg

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>



Slide34 l.jpg

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/189-2/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


Slide35 l.jpg

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



Slide37 l.jpg

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


Slide38 l.jpg

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>


Slide39 l.jpg

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


Slide40 l.jpg

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"


Slide41 l.jpg

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


Slide42 l.jpg

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>


Slide43 l.jpg

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


Slide44 l.jpg

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/


ad