web technology 17-1-11

8/8/2019 Web Technology 17-1-11

1/59

Web Technology

By

Jasper Wessly R [email protected]


2/59

Client, Server & Communication

Internet - BasicProtocols TCP/IP,HTTP,FTP,SMTP,POP,IMAP World wide webHTTP request message formatHTTP response message format Web Server Web client

HTML History, Versions, Elements, URL, List, Tables,Frames, Forms


3/59

Client/Server Technology

y Client/Server technology involves the client andserver, both having processing capabilities.

y The client request for a service and the serverprocesses this request and sends a reply.


4/59

y Standalone (Single User)y Host Centric (Multi User)y Client/Servery Network Operating System


5/59

Types of services provided by different serversy File Serversy Groupware Servers

Mail Servers

Newsgroup ServersCalendar ServersWorkflow Servers

y Database Serversy Transaction Servers

Web Technology is based on Client Server Model


6/59

Internet

The Internet is a communication system that allowscomputers around the world to communicate and toexchange of the data with each other.

This also allows to access their resources, such asfiles, services, or other people.


7/59

History of Internet :1964: ARPANET project1969: The ARPANET is put in operation with the use of aprotocol for communications called NCP1973: The scientists take their revenge by developing their ownnetwork through universities and by using an improved protocolof communication named TCP / IP (Transfer Control ProtocolProtocol/Internet Protocol). The protocol IP makes sure thatevery computer connected with the network has an uniqueaddress and that each is capable of communicating with theothers. This protocol is used on several platforms to allow acommunication from these.

1989: Tim Berners-Lee creates the bases of what will become World Wide Web.1995: It's this year when the term "Internet" entered the vocabulary of most people


8/59


9/59

y TCP/IP is TCP and IP working together.y TCP takes care of the communication between your

application software (i.e. your browser) and yournetwork software.

y IP takes care of the communication with othercomputers.

y TCP is responsible for breaking data down into IPpackets before they are sent, and for assembling thepackets when they arrive.

y IP is responsible for sending the packets to the correctdestination.


10/59

y TCP/IP uses 32 bits, or four numbers between 0 and255, to address a computer.

IP Addressesy Each computer must have an IP address before it can

connect to the Internet.y

Each IP packet must have an address before it can besent to another computer.


11/59

D omain Namesy A name is much easier to remember than a 12 digit number.y Names used for TCP/IP addresses are called domain names.y alpha.com is a domain name.y When you address a web site, like http://www.alpha.com, the

name is translated to a number by a Domain Name Server(DNS).y All over the world, DNS servers are connected to the Internet.

DNS servers are responsible for translating domain names intoTCP/IP addresses.

y When a new domain name is registered together with a TCP/IPaddress, DNS servers all over the world are updated with thisinformation.


12/59

H TTP - H yper Text Transfer P rotocoly

HTTP takes care of the communication between a webserver and a web browser.y HTTP is used for sending requests from a web client (a

browser) to a web server, returning web content (web

pages) from the server back to the client.H TTP S - Secure H TTPy HTTPS takes care of secure communication between a

web server and a web browser.y HTTPS typically handles credit card transactions and

other sensitive data.


13/59

SMTP - Simple Mail Transfer P rotocoly

SMTP is used for transmission of e-mails.MI ME - Multi-purpose I nternet Mail Extensionsy The MIME protocol lets SMTP transmit multimedia

files including voice, audio, and binary data across

TCP/IP networks.I MA P - I nternet Message Access P rotocoly IMAP is used for storing and retrieving e-mails.POP - P ost O ffice P rotocoly POP is used for downloading e-mails from an e-mail

server to a personal computer.


14/59

F TP - F ile Transfer P rotocoly

FTP takes care of transmission of files betweencomputers.DH CP - D ynamic H ost Configuration P rotocoly DHCP is used for allocation of dynamic IP addresses to

computers in a network. AR P - Address Resolution P rotocol

y ARP is used by IP to find the hardware address of acomputer network card based on the IP address.

RAR P - Reverse Address Resolution P rotocoly RARP is used by IP to find the IP address based on the

hardware address of a computer network card.


15/59

H TTPy HTTP stands for H ypertext Transfer P rotocol . It is

an TCP/IP based communication protocol which isused to deliver virtually all files and other data,collectively called resources, on the World Wide Web.These resources could be HTML files, image files,query results, or anything else.

y A browser is works as an HTTP client because it sendsrequests to an HTTP server which is called Web server.The Web Server then sends responses back to theclient. The standard and default port for HTTP serversto listen on is 80 but it can be changed to any otherport like 8080 etc.


16/59

The format of the request and response messages aresimilar and will have following structure:

y An initial line CRLFy

Zero or more header lines CRLFy A blank line ie. a CRLFy An optional message body like file, query data or query

output.


17/59

I nitial Line : Requesty The initial line is different for the request than for the response.

A request line has three parts, separated by spaces:y An HTTP Method Namey The local path of the requested resource.y The version of HTTP being used.y Here is an example of initial line for Request Message.GET /path/to/file/index.html HTTP/1.0y G ET is the most common HTTP method. Other methods could

be POST, HEAD etc.y The path is the part of the URL after the host name. This path is

also called the request Uniform Resource Identifier (URI). A URIis like a URL, but more general.

y The HTTP version always takes the form "H TTP /x.x ", uppercase.


18/59

I nitial Line : Responsey The initial response line, called the status line, also has

three parts separated by spaces:y The version of HTTP being used.y A response status code that gives the result of the

request.y An English reason phrase describing the status code.y Here is an example of initial line for Response

Message.y

HTTP/1.0 200 OK or HTTP/1.0 404 Not Found


19/59

H eader Linesy Header lines provide information about the request or response,

or about the object sent in the message body.y The header lines are in the usual text header format, which is:one line per header, of the form "Header-Name: value", ending

with CRLF. It's the same format used for email and newspostings, defined in RFC 822.

y A header line should end in CRLF, but you should handle LFcorrectly.

y The header name is not case-sensitive.y Any number of spaces or tabs may be between the ":" and the

value.y Header lines beginning with space or tab are actually part of the

previous header line, folded into multiple lines for easy reading.y

Here is an example of one header lineUser-agent: Mozilla/3.0rGold or Last-Modified: Fri, 31 Dec 1999 23:59:59 GMT


20/59

The Message Body y An HTTP message may have a body of data sent after

the header lines. In a response, this is where therequested resource is returned to the client (the mostcommon use of the message body), or perhapsexplanatory text if there's an error. In a request, this is

where user-entered data or uploaded files are sent tothe server. If an HTTP message includes a body, thereare usually header lines in the message that describethe body. In particular:

y The Content-Type: header gives the MIME-type of

the data in the body, such as text/html or image/gif .y The Content-Length: header gives the number of

bytes in the body.


21/59

The G ET Methody

The GET method means retrieve whatever information (in theform of an entity) is identified by the Request-URI. If theRequest-URI refers to a data-producing process, it is theproduced data which shall be returned as the entity in theresponse and not the source text of the process, unless that text

happens to be the output of the process.y A conditional GET method requests that the identified resourcebe transferred only if it has been modified since the date given by the If-Modified-Since header. The conditional GET method isintended to reduce network usage by allowing cached entities to

be refreshed without requiring multiple requests or transferringunnecessary data.y The GET method can also be used to submit forms. The form

data is URL-encoded and appended to the request URI


22/59

The H EA D Methody A HEAD request is just like a GET request, except it

asks the server to return the response headers only,and not the actual resource (i.e. no message body).This is useful to check characteristics of a resource

without actually downloading it, thus savingbandwidth. Use HEAD when you don't actually need afile's contents.

y The response to a HEAD request must never contain amessage body, just the status line and headers.


23/59

The PO ST Methody A POST request is used to send data to the server to be processed

in some way, like by a CGI script. A POST request is differentfrom a GET request in the following ways:

y There's a block of data sent with the request, in the messagebody. There are usually extra headers to describe this messagebody, like Content-Type: and Content-Length:

y The request URI is not a resource to retrieve; it's usually a

program to handle the data you're sending.y The HTTP response is normally program output, not a static file.y The most common use of POST, by far, is to submit HTML form

data to CGI scripts. In this case, the Content-Type: header isusually application/x-www-form-urlencoded , and theContent-Length: header gives the length of the URL-encodedform data. The CGI script receives the message body throughSTDIN, and decodes it. Here's a typical form submission, usingPOST:


24/59

Header Fieldsy Allowy

Authorizationy Content-Encodingy Content-Lengthy Content-Typey Datey Expiresy Fromy If-Modified-Sincey Last-Modifiedy Locationy Pragmay

Referery Servery User-Agenty WWW-Authenticate


25/59

HTTP Status Code

y 1xx: Informationy 2xx: Successfuly 3xx: Redirectiony 4xx: Client Errory 5xx: Server Error


26/59

Http Message Example

y To retrieve the file at the URLy http://www.somehost.com/path/file.htmly first open a socket to the host www.somehost.com ,

port 80 (use the default port of 80 because none isspecified in the URL). Then, send something like thefollowing through the socket:

y

GET /path/file.html HTTP/1.0 From:[email protected] User-Agent: HTTPTool/1.0[blank line here]


27/59

The server should respond with something like the following, sent

back through the same socket:y HTTP/1.0 200 OKy Date: Fri, 31 Dec 1999 23:59:59 GMTy Content-Type: text/htmly Content-Length: 1354y y y Happy New Millennium! (more file contents) . . .y y After sending the response, the server closes the socket.


28/59

Web Server

A web server can be referred to as either the hardware(the computer) or the software (the computerapplication) that helps to deliver content that can be

accessed through the internet.

Web Client

Actually web browserIs a machine that request information


29/59

H TMLHTML stands for Hyper Text Markup Language

An HTML file is a text file containing small markuptagsThe markup tags tell the Web browser how to display

the page An HTML file must have an htm or html fileextension

An HTML file can be created using a simple text editor

The html files are viewed in a web browser.Fire fox, Internet Explorer, Netscafe, opera are few wellknown web browsers.


30/59

To view the output, correct path of the html file has tobe typed into the address box of the web browser .

The web browser has to be refreshed to view thechanges made in the html file


31/59

H tml TagsThe tags in HTML are enclosed by angle brackets().Html tags normally come in pair s like .Html tags are not case sensitive ,means the sameas .

are the starting and ending tags.Html files has two major parts,head and body. tags are the major tag used with in tags

tag tells the browser what has to be displayed inthe title bar of the web browser.


32/59

Formatting

This text is italic

This text is small

This text containssubscript


33/59


34/59

The pre tag is good for displaying computercode:

for i = 1 to 10

print inext i


35/59

encloses the content that has to bedisplayed in the browser.

tag encloses the paragraph.

Attribute

Attributes provide additional information to an HTMLelement.

Attributes always come in name/value pairs like this:name="value".

Attributes are always specified in the start tag of anHTML element.


36/59

The following tag defines an HTML table: .

With an added border attribute, you can tell thebrowser that the table should have no borders:

Attribute values should always be enclosed in quotes.Double style quotes are the most common, but singlestyle quotes are also allowed.


37/59

Headings are defined with the to tags. defines the largest heading. defines the smallestheading.Paragraphs are defined with the

tag.HTML automatically adds an extra blank line before

and after a headings and paragraph.Line BreakThe
tag is used when you want to end a line, butdon't want to start a new paragraph. The
tag

forces a line break wherever you place it.The
tag is an empty tag. It has no closing tag.


38/59

CommentsThe comment tag is used to insert a comment in theHTML source code. A comment will be ignored by the browser. You can use comments to explain yourcode, which can help you when you edit the sourcecode at a later date.Note that you need an exclamation point after theopening bracket, but not before the closing bracket.


39/59

U RL

y A URL is another word for a web address.y A URL can be composed of words, such as

alpha.com", or an Internet Protocol (IP) address:192.68.20.50. Most people enter the name of the website when surfing, because names are easier toremember than numbers.


40/59

y U RL - U niform Resource Locatory When you click on a link in an HTML page, an

underlying tag points to an address on the world wide web.y A Uniform Resource Locator (URL) is used to address

a document (or other data) on the world wide web.y

A web address, like this:http://www.alpha.com/html/default.asp follows thesesyntax rules:


41/59

scheme://host.domain:port/path/filename Explanation:scheme - defines the type of Internet service. The most common

type is httphost - defines the domain host (the default host for http is www )domain - defines the Internet domain name , like alpha.com:port - defines the port number at the host (the default port

number for http is 80 )path - defines a path at the server (If omitted, the document must

be stored at the root directory of the web sitefilename - defines the name of a document/resourceCommon websites start with http://. Pages starting with http:// are

not encrypted, so all information exchanged between yourcomputer and the Internet can be "seen" by hackers.

Secure websites start with https://. The "s" stands for "secure".Here, the information exchanged will be encrypted, making ituseless to hackers.


42/59


43/59

Html entitiesSome characters like the < character, have a specialmeaning in HTML, and therefore cannot be used in

the text.To display a less than sign (


44/59

Links

HTML uses a hyperlink to link to another documenton the Web.The tag is used to create an anchor to link from,the href attribute is used to address the document to

link to, and the words between the open and close of the anchor tag will be displayed as a hyperlink. With the target attribute, you can define where thelinked document will be opened.

Visit IntelliBitz!


45/59

The name attribute is used to create a named anchor.

When using named anchors we can create links thatcan jump directly into a specific section on a page,instead of letting the user scroll around to find whathe/she is looking for.


46/59

Frames

With frames, you can display more than one Web pagein the same browser window.The disadvantages of using frames are:

The web developer must keep track of more HTML

documentsIt is difficult to print the entire pageThe tag defines how to divide the windowinto frames

Each frameset defines a set of rows or columnsThe values of the rows/columns indicate the amountof screen area each row/column will occupy


47/59

The tag defines what HTML document to putinto each frame


48/59

Tables

Tables are defined with the tag. A table is divided into rows (with the tag)Each row is divided into data cells (with the tag). A data cell can contain text, images, lists, paragraphs,

forms, horizontal rules, tables, etc.


49/59

row 1, cell 1row 1, cell 2

row 2, cell 1row 2, cell 2


50/59

HeadingAnother Heading

row 1, cell 1row 1, cell 2row 2, cell 1row 2, cell 2


51/59

List

An unordered list is a list of items. The list items aremarked with bullets (typically small black circles). An ordered list is also a list of items. The list items aremarked with numbers.

A definition list is not a list of items. This is a list of terms and explanation of the terms.Coffee

Milk


52/59

CoffeeMilk

CoffeeBlack hot drinkMilkWhite cold drink


53/59

Image With HTML you can display images in a document.The src attribute of img tag should be assigned withthe path of the file.Img tag has no closing tag.


54/59

The "alt" attribute tells the reader what he or she is

missing on a page if the browser can't load images.The browser will then display the alternate text insteadof the image.It is a good practice to include the "alt" attribute for

each image on a page, to improve the display


55/59

Formsy HTML forms are used to pass data to a server.y

A form can contain input elements like text fields,checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset,legend, and label elements.

y The tag is used to create an HTML form:

.input elements.


56/59

Text F ieldsy defines a one-line input field

that a user can enter text into:y

First name:
Last name:

How the HTML code above looks in abrowser:y First name:

Last name:


57/59

P assword F ieldy defines a password field:y

Password: How the HTML code above looks in abrowser:

y

Password:


58/59

Similar fory Radio Buttony

Check Boxy Submit


59/59

web technology 17-1-11

Documents