You are on page 1of 91

Internet services &

WWW
Sadiq M. Sait, Ph.D
sadiq@ccse.kfupm.edu.sa
Department of Computer Engineering
King Fahd University of Petroleum and
Minerals
Dhahran, Saudi Arabia

Internet Services and


Applications

What really is a Service?

On internet (network of networks), computers


communicate with one another. Users of one
computer can access services from another.
You can use many methods to communicate
with a computer somewhere else on the
Internet.
These methods used to communicate are
called services because they service your
requests.
There are a wide variety of services, and each
can give you many kinds of information.
In summary the internet is a:
way to move data
a bunch of protocols

Available Services

Some most popular services on the Internet are:


E-mail
Telnet
FTP
WWW
Others (Archie, Wais, Gopher, News and News
Groups, Internet Relay Chat, Internet Phone, Video
Conferencing, & Internet Collaborative Tools)

Available Services (Contd.)


Email: Electronic mail
Telnet: Remote login into computer networks
FTP: File Transfer Protocol for transferring computer
files
WWW: World Wide Web
Gopher: Searchable index, selectable index of
documents
USENET: Newsgroups with different subjects enable
people with common interest to share information
Chat: Real-time communications between people on
the Internet

Clients and Servers

All that we speak of internet fall into three categories:


Clients
Servers
Content

Software/Hardware that we use to browse the web,


send mail, download files, etc are called clients.
Servers respond to clients requests.

Internet Applications: FTP


and WWW
Client

FTP
server

User

Browser

Internet

Helper Applications
Binary
Graphics
Audio
Video

Web
Server

files

E-mail

Most popular and widely used internet service.


Has become a de-facto standard of
communication within the corporate and
beyond.
Works between disparate systems like PC,
Unix, Mac, etc.
Latest e-mail standards let users attach files
(audio, video, animation, etc).
Volume of data transferred is billions of
bytes/day.

E-mail (Contd.)

It is easy to send, read, reply to, and manage.


It is convenient, global, economical and very
fast.
It has many advantages over regular methods
such as postal service or fax technology.
Studies have shown that recipients are more
likely to reply to an e-mail message than a
written request.
E-mail can be read or written at any time,
independent of time zones and business hours.

E-mail (Contd.)

Advantages:
Standard way of communication for corporations
Less interference or interrupts between work
Reply with a number of options
No cost within the environment
Less chance of miscommunication
Can save messages for future retrieval and records
Disadvantages
You need to have a computer and a network
connection
Less personal than voice (although now we can
also have voice mail, with some extra cost)

How e-mail works?

Like other internet services e-mail is yet another clientserver system, called SMTP (simple message transfer
protocol).
You use a mail client program to send a message to
the post office server (an SMTP server).
The post office server identifies the recipients address
and send the message through the internet to the mail
server that handles mail for each recipients address.
The mail server stores the message in the recipients
mailbox.
The recipient uses an e-mail client program to request
new messages from the mail server.
The mail server sends the message in the recipients
mailbox back to the mail client.

How e-mail works?


(Contd.)

Senders
Mail
Client

Post Office
Server
(SMTP)

Mail
Server
(POP3)

Recipients
Mail
Client

How e-mail works? (Contd.)

The Internet uses a TCP/IP-family protocol called


Simple Mail Transfer Protocol (SMTP) as the
standard method for transferring electronic mail.

SMTP handles messages in queues (also called


spools).

When a message is sent to SMTP, it places it in


an outgoing queue.

How e-mail works? (Contd.)

SMTP attempts to forward the message from the


queue whenever it connects to remote machines.

Usually, if SMTP cannot forward the message


within a given amount of time, it is returned with
an error message, or simply dropped.

When a connection is established between two


computers that use SMTP, the two systems
exchange authentication codes.

How e-mail works? (Contd.)

Each system sends a command to the other


to identify the first mail messages sender and
provides basic information about the
message.
The receiving system returns an
acknowledgement, after which the message is
transmitted.
SMTP is smart enough to handle multiple
destinations for the same message in an
efficient manner.

Structure of Email

A typical e-mail system, such as the one in a


company office, usually consists of a mail
server, a post office, and the clients.

The mail system is tied directly to the local


area network of the organization.

Hotmail, Yahoo Mail, Rocket


Mail .

Hotmail and its cousins are all getting to be


very popular because
they offer free e-mail accounts,
basically use Web-technology
The disadvantage is that you have to
wait longer; frustrating experience if the
mail is plenty and the lines are slow--which
they are anyway, most of the time!
The major advantage, however,
is access to mail from virtually anywhere
they can access the WWW on the Internet
there is privacy, since mail is left on the
server

Finding an e-mail Address:

Finger and Whois


Finger is a standard utility supplied with the TCP/IP
protocol family that lets you determine who is a valid
system user and who is logged into a system you
have access to.
Finger can be used to find out a persons username
if a mail recipient is logged in on the destination
machine.
Finger shows you how long a user has been logged
in, where theyre logged in from, and what their login
names are.

Mailing Lists

A mailing list is a group of e-mail addresses that


can be reached by sending a message to one
address: the list address.
Mail sent to that address is redistributed to all
subscribers.
Subscribers can have a discussion by sending
messages to the list address (often called
posting to the list).
The list of addresses can be maintained by hand
or with an automated list server system like
Majordomo or ListProcessor.

Mailing Lists (Contd.)

Mailing lists are good for many things such as:


distributing information from a central source to
lots of people
Discussing a project among participants.
Exchanging questions and answers with other
users of a product or service, or perhaps
company technical-support personnel.
To join just send mail to listserv@domain.name.
where listserv is commonly the account through
which messages are distributed

TELNET

Terminal Network Protocol


Login to remote computer
Usage of remote computer as if you were a
local user
An account on remote computer is required

TELNET use
Remote database access
Remote access to remote customers computer
for technical support

TELNET (Contd.)

Need to connect and log in to remote host


Connect using host.domain: telnet
vlsi.ccse.kfupm.edu.sa
Account userid must be known
Password is usually required

TELNET (Contd.)

Weakness
Only console applications can run. No GUI
support unless X terminals are used.
Security risk because hackers can trap the
IP address of the network.
Least used part of the Web
All ports numbered 80 will have Web sites;
likewise all port 23s will be used for telnet,
and multi-user games will always be found on
4201, etc.

FTP

File Transfer Protocol


Allows transfer of any type of file from the remote
server to a local computer and vice versa
Two types of FTP
Secure FTP rarely used because of security
issues
Anonymous: widely used
Secure FTP: Login to an account
Access restrictions
Passwords required

FTP (Contd.)

Anonymous FTP
Provides unrestricted access to files and
directories
Examples: free software, publications, press
releases, etc.
FTP use
Distribution of software upgrades and new drivers
Access to free information
Access to free software and shareware

Anonymous FTP

They are called anonymous because they accept


the word anonymous as a login name, and your
e-mail address as the password.
With this kind of service, you can download or
upload files without having an account on the
machine. Most often used to download files.
If the FTP server isnt anonymous, when you
connect to the server you must provide a user
name and password, just as though you were
logging in to the machine.
Anonymous FTP servers are one of the major
means of distributing software and information
across the Internet.

Anonymous FTP (Contd.)

FTP servers are fairly straightforward. When a


server receives a file request from an FTP client,
it sends a copy of that file back to the client.

Other commands instruct the server to send the


client a directory of files, or to accept an upload
from the client, etc.

FTP

A large amount of software, mostly free, is


available on anonymous FTP servers for many
different types of computer systems.
One of the most frustrating problems with the
Internet is the difficulty of finding information such
as FTP sites, host resources, sources of
information, and so forth.
Most FTP sites dont have a listing of all their
available files, although some do.
However, if you have access to WWW, there are
services (both free and fee-based) that provide a
WAIS based search from inside a WWW browser,
helping in locating information.

FTP (contd.)

Example FTP actions:


get : Transfer a file from remote host to your
computer:
put :Transfer a file from your computer to
remote host:
dir or ls : Remote host directory listing
ll or ldir : Local directory listing
chdir or cd :Change remote directory
lcd : Change local directory

Archie

The archie service is a collection of resource


discovery tools that together provide an electronic
directory service for locating information in an
Internet environment.
Archie creates a central index of files available on
anonymous FTP sites around the Internet.
The Archie servers connect to anonymous FTP sites
that agree to participate and download lists of all the
files on these sites.
These lists of files are merged into a database, which
users can then search

Archie (Contd.)

Users can access an archie server either through


interactive sessions or through queries sent via
electronic mail messages.

The archie server automatically updates the


listing information from each site about once a
month.

In addition to offering access to anonymous ftp


listings, archie also permits access to the whatis
description database.

WAIS

WAIS stands for Wide Area Information Server


and is pronounced ways.

WAIS searches for words in documents.

The core of the software is an indexer, used to


create full-text indexes of files fed to it, and a
server that can use those indexes to search for
keywords or whole English expressions among the
files indexed.

Gopher

The term Gopher refers to:


- A network protocol
- A server type
- One of the many Gopher client applications.
Gopher protocol and software allow for browsing
information systems so that one doesnt need to
know exactly where the needed information is
before looking for it.
You do need to know the address of a Gopher
server to get started, after you are there, the
server software presents information in a clear,
structured, hierarchical list.

Gopher (Contd.)

Most Gopher sites have links to others, so after


connecting to one, it is quite easy to jump to
another.

Gophers user interface is very simple.

Since the Gopher service is text-oriented, it


performs well over slow links and can be used by
people who only have dial-in access to a machine
on the internet.

Veronica

Veronica is a service that provides a (very large)


index of titles of Gopher items from most servers
throughout the Internet.

The result of a Veronica search is a set of


Gopher items whose titles contain the keyword
that the user was searching for.

The Veronica index is accessed via a normal


Gopher search item.

News & Newsgroups

Network news is another way to take part in a lot


of discussions over the internet, yet keeping
them organized and separate from your mail.

You dont have to subscribe to a mailing list, and


you wont receive lots of mail.

The news reader helps you keep everything in


order.

UseNet

UseNet is a service carried over the Internet that


supports newsgroups.

The messages everyone using the UseNet sends


to a newsgroup, become available for anyone
who accesses the newsgroup.

Newsgroups are organized hierarchically, with the


broadest grouping first in the name.

Newsgroups

There are major news categories like:


comp, news, rec, sci, soc, talk, misc

Servers can also get newsgroups by creating


them locally.

Server administrators can create whatever


groups they like, corresponding to the interest of
the users.

News Item

A news item is very similar to an electronic mail


message.

It has the same general parts as an e-mail


message; a header and a body.

The body of a news item is the messages text.

The header tells the news software how to


spread the item throughout the Internet.

Internet Relay Chat

IRC (Internet Relay Chat) allows you to talk (write)


to people from all over the world about a variety of
topics, simultaneously and on-line.
It is mostly used as a recreational communication
system.
It is again a client-server design.
The client software allows you to connect to the
IRC server, which accepts connections from many
IRC clients at the same time.
The various IRC servers across the Internet are
interconnected.

Internet Relay Chat (Contd.)

There are a number of IRC servers running on the


Internet, some of them are:
irc.netsys.com
irc.caltech.edu
irc.indiana.edu
csa.bu.edu
irc.nada.kth.se
When you connect to an IRC server, you will usually
be asked for a port number in addition to the Internet
address.
Most of the time, this port number is 6667
Some IRC Terms: Nicknames, IRC Channels

Internet Phone

Internet phones let you talk (literally talk, with voice


not in writing) to people all over the world, just for
the price of your Internet connection.
It demands a reasonably fast machine with support
for audio devices.
Internet phones are essentially for point-to-point
communications.
The heart of any Internet phone tool is the codec,
the software that compresses/decompresses the
digitized voice data
Most Internet Phones offer more than just
telephony, e.g., voice mail, answering machines,
and similar features.

Video Conferencing

Internet Video Conferencing offers a low-cost


alternative to traditional proprietary systems.

It demands high bandwidths.

It requires a video camera and related hardware


card.

Video-conferencing is largely point-to-point.

Only very few packages support true multiconferencing.

Introduction to WWW

Introduction to WWW
WWW Terminology
Web page design and HTML (Basics)
Web Client/Server Software and HTTP
Images, Image maps, forms, and frames
Web authoring and Database integration
Search engines
Dynamic HTML, VRML, etc
Advanced topics and much more

Lingo
HyperText: Enables linking to places
Link(s)
Hyperlinks: Hot spots on which a user can
click to access other:

topics (in the same document)


documents, (other HTML files, for e.g.),or
Web sites

URL: Addresses on Internet to which hot


spots connect

Lingo (contd.)
GIF, JPEG, XBM, XPM (picture formats)
Netscape, Mosaic, Iexplorer (browsers)
WebEdit, HoTMetaL, FrontPage
(editors/tools)
FTP, TCP/IP, HTTP (protocols)
Applets, J++, javac, Java Engine (Java
programming)
xv,
xv clipart, etc (graphics editors)

Why Design and for Who?


Personal Pages
Companies, Organizations

(schools, universities, research centers, etc)

News Networks
Journals
Events (conferences, international
games, etc)
Internet/Intranet

What in this session?


WWW, HTML, and HTTP
HTML Document structure
Hyperlinks, Images, Multimedia
Tools for creating HTML
Beyond simple HTML (Advanced tags,
dynamic HTML, VRML, etc..)
Other recent technologies (Push
technology, e-commerce, search engines..)

A Brief overview of HTML?

HTML is a structured language


rules of nesting

All WWW documents are written in HTML


WWW

World Wide Web


Most popular Internet information service

Web Usage?

It was estimated that of the 28.8 million


people over 16 in the US who have
internet access, 11.5 million use the web
(1996).

World Wide Web


Client/Server Architecture
Designed to make it easy for people to
share information

Hides complexities of location of


documents
Easy to distribute information
Fun to look at

World Wide Web

Hyperlinks
Highlighted words or pictures
Item pointed to may be another document
image, movie, sound clip etc

Example
Visit NYSE
city
tours
NYSE sounds

NY CITY TOURS

view sights
sound audio

Movie

WWW Browsers
Interpret HTTP as well as other
protocols
ftp, mailto, telnet, gopher, etc.
Display physical formatted HTML text
in-line images
hyperlinks

WWW Browsers

Helper Applications
Programs on the users computer that can
be used to display images, movies, sound,
etc. that cannot be displayed on the browser
itself
Sound files
Movies (MPEG)
Mail
Other file formats

Some Recent Additions


Common Gateway Interface
ASP
Helper Programs and Plugins
JavaScript and VBScript
etc

Why Learn?
Why learn HTML or Web Authoring?
Everyone is a publisher

The architecture of the Internet allows


almost anyone to become an information
provider for a world wide audience

WWW documents must be in HTML


To create your own home page you need to
know some HTML or Web authoring tool

Why learn HTML?

Not a must
Can use tools to create HTML (FrontPage98)
Conversion tools can be used to convert existing
HTML documents
Example: LaTeX2HTML
Word documents can be saved in HTML
FrameMaker documents too

It is very easy to learn and understand

Creating an HTML Page

Requirements
Text or HTML Editor to enter TAGS
Graphics editors
Browser (Netscape, Internet Explorer, Lynx, etc.)

Focus
Usable and Eye-catching documents
Images in Web pages
Animation

HTML Basics

HTML documents contain 3 things


Text +TAGS
External Multimedia such as
graphics, sound, movies, etc.
Authoring tools insert necessary
tags

What are Tags?

Tags are needed to


Mark text as headings, paragraphs, for
formatting, making list etc.
Also for creating hyperlinks, including
images, making tables, fill-in forms,
frames, etc
Examples: <P>, <A>, <BR>, <HR>,
<FONT>, <B>, <TT>, <EM>, <UL>,
<IMG>, etc.

HTML Document Structure

Basic Structure
<HTML>
<HEAD>
<TITLE> KFUPM </TITLE></HEAD>
<BODY>
.. ..
</BODY>
</HTML>

Spinning your HTML Web

To create hot spots (or Anchors) you need


two things
URLs (Uniform Resource Locator)
Links

Anchors and Links allow readers to jump


from place to place in the document
URL is a fancy way of saying address or
location for information on the Internet

URL Anatomy & Types

Example:
http://www.ccse.kfupm.edu.sa/~sadiq/tut.html
protocol indicator,hostname,directory/filename

Types:
Absolute URLs (also called complete URLs)
Relative URLs (are incomplete URLs)

Other Protocols (mailto, ftp, etc)


ftp://ftp/pub/images/backgrounds/glosbgr.gif
mailto:sadiq@ccse.kfupm.edu.sa

Examples

http://www.ccse.kfupm.edu.sa/~sadiq/tut.html

<IMAGE SRC=
ftp://ftp/pub/images/backgrounds/glosbgr.gif ALIGN =
MIDDLE>

<A HREF=
mailto:sadiq@ccse.kfupm.edu.sa>
sadiq@ccse.kfupm.edu.sa</A>

Building Anchors <A>

Components required
The Tag: <A> anchor_name </A>
HREF: Indicates where to jump
NAME: Identifies an internal label

HREF: Lets users jump to either material on the


same Web site or to other material on the
Internet
NAME: Lets users jump to material within the
same document

Named Anchor & Basic


Links

<A HREF=something>anchor_name </A>


something =

#name

name=funny (for example)

something =

filename.html[#name]

tutorial.html

something =

a Web site, for example

http://www/uqu.edu.sa/~youssef/tutorial.html
ftp://www/ksu.edu.sa/~ahmed/jokes.html

<H2><A NAME=funny> Funny</A></H2>

Using Images in Web


Pages
Including
Aligning
Using them as links
Making images load more quickly
Using thumbnail images

Adding Images
Must include them as GIF or JPG graphics
Use graphic editors, scanners, or, borrow
Must use an Image Tag <IMG SRC = "..>
ALT=". . . " specifies text to be displayed if
image not available
BORDER=# of pixels, controls the thickness
of the border
Pictures can be aligned Left, Right, etc.

Example of Image
Inclusion
<HTML>
<HEAD><TITLE> Biography </TITLE></HEAD>
<BODY>
<H1> Dr. Sadiq M. Saits Biography </H1>
<P><IMG SRC="sadiq.gif"
ALT="Picture of Sadiq Sait " ALIGN=RIGHT>
Picture of Sadiq M. Sait for his biography...</P>
</BODY>
</HTML>

Some notes on Images

Loading of images is made faster by telling


the browser the size of the image (specified in
pixels)
You can link by using images
Can have pictures with no borders
You can use thumbnail images to link to larger
images
Making clickable images (image maps)

Pictures as Links
<P>
<A HREF="saitbio.html">
<IMG SRC="sadiq.gif"
ALT="Picture of Sadiq Sait" ALIGN=RIGHT
HSPACE=20 HEIGHT=100 WIDTH=50
BORDER=0>
</A>
Sadiq M. Sait was born in ......</P>

Using Thumbnails
<P>
<A HREF="sadiqbig.gif">
<IMG SRC="sadiqthumbnail.gif"
ALT="Picture of Sadiq Sait">
</A> Thumbnail of Saits picture.

Defining the map

Tells which area readers may click and what link to


follow
<MAP>
NAME= gives the map a name
<AREA> specifies the shape of a hot spot
COORDS=x1,y1,x2,y2,
HREF=URL
SHAPE= specifies type of shape as RECT,
CIRC, POLYGON, etc.

Other Attributes

Choosing Colors
Background
Links (link, alink, vlink)
Text

Colors can be chosen for tables,


background etc.
RGB concept (#FFFFFF=white)
Choosing background (using images,
.gif files)

Beyond Simple HTML


Tables
Forms
Frames
Simple animation
Inclusion of Java Applets
JavaScript and CGI programs

Some More Tags


CENTER, BLINK, HR, APPLET
<FORM>

SELECT, OPTION, TEXTAREA

<TABLE>
TR, TH, TD, CAPTION

FRAME
FRAMESET

And many more.

Tables in HTML
Caption
Alignment and Width
Table Header <TH>
Table Data <TD>
Table Rows <TR>
Color (of cells)
Border or not (and width)

Tables (example)
<TABLE BORDER=10
ALIGN=ABSCENTER bgcolor=#68d1cc>
<CAPTION><H3> This is a table with a
border</H3> </CAPTION>
<TR> <TH> <TH>Male <TH>Female
<TR> <TH>Pop
<TD>0.49<TD>0.51
<TR> <TH>Wealth <TD> 0.9<TD> 0.1
</TABLE>

Forms in HTML

What are they used for

Surveys
Collect addresses of visitors to your Homepage
Allow people to register for something

Features

Submitted by mail
Security (Passwords)
Checkboxes and Radio buttons
Area for Text and Comments

Require a CGI program on server to process


data coming from the form submission

Frames
SRC: URL of documents to be displayed
NAME: so this frame can be targeted by
links in other documents
Physical dimensions: Height, width etc.
Other features: Scrolling, Resizing, etc.
They are a complete HTML document or
a page

Spicing up your Web Page

Some HTML commands and Tricks


BLINK tag, etc

Animation (GIF animation) and Sound


Using Java Applets
Scripting (JavaScript/VBScript)
Videostreaming

Java Applet inclusion

Compile the Java code (e.g., use javac)


example: javac Blinker

Creates file with extension .class,


example Blinker.class

Use the tags <APPLET> </APPLET>


Specify parameters such as speed, color
(for background and text, etc.)

Java Applet Inclusion


(contd.)

<applet code=Blink.class width=300 height=30>


<param name=lbl value = SADIQ M. SAIT,>
<param name=speed value=6>
</applet>

Java Applet Inclusion


(contd.)
<applet code=ticker.class width=280 height=30>
<param name=msg value = Welcome to the tutorial on
Web page design and HTML! >
<param name=shco value=210, 210,210>
<param name=speed value=9>
<param name=bgco value=255,255,255>
<param name=txtco value=255,0,0>
</applet>

Other Topics
cgi-bin (common gateway interface)
Executable: Example

<!--#exec cgi=/cgi-bin/counter--> people


visited this page.

Helper programs
to send mail
run audio/video applications
etc

Searching

On the internet we can


search for a file using Archie
Find an e-mail address
Internet White Pages (internic keeps records)

Finding a gopher site


etc

Search engines using the Web

Search Engines
Tools to discover Web resources on the
internet
Help in locating information
They act as an agent between publishers
and users

Other & Recent


Technologies
Authoring Tools
VRML, Dynamic HTML, ASPs, etc
Video Streaming
Push Technology
Data-Base Integration
Search Engines
E-Commerce

Finally.
Summary
Demo

You might also like