WebTechnology study materials

DMI College of Engineering IT/IT2353/WT

Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 1

WEB TECHNOLOGY

UNIT I

Web Essentials: Clients, Servers, and Communication. The Internet-Basic Internet Protocols -The

World Wide Web-HTTP request message-response message-Web Clients Web Servers-Case Study.

Markup Languages: XHTML. An Introduction to HTML History-Versions-Basic XHTML Syntax and

Semantics-Some Fundamental HTML Elements-Relative URLs-Lists-tables-Frames-Forms-XML

Creating HTML Documents Case Study.

1.1 Web Essentials

Clients, Servers, and Communication

Client-Server Model

It is a standard Model for developing Network Application.

Concept of Client and Server

Server:

The computer which provides services is called Server.

Server waits for request from client.

Client:

The computer that using the service is called as a Client.

Typical Scenario:

Step 1: The server must start on some computer system.

o Initializes itself, then goes to sleep waiting for a client request.

Step 2: A client can start the process on the same system or some other system.

o Sends a request to the server.

Client

Client

Client

Server



o The Server process the request and provide the service to the client.

o If the server finished the process it goes to the sleep,waiting for the next client

request to arrive

Step 3: The process repeats.

Types of Server (Categorized based on the request)

1. Iterative 2.Concurrent

Iterative Server

It is used, when the server knows in advance ,how long it takes to handle each request and it handles

each request itself.

o Single copy of server runs at all times

o A client may have to wait if the server is busy.

Concurrent Server

It is used when the amount of work required to handle a request is unknown,the server starts another

process to hable each request.

o A copy of the server is created,to a client request in a dedicated fashion.As many copies of

server as there are client requests.

How connection is established

To establish a connection five components are needed

Protocol

Source IP address

Source port number (Multiple program can run in both server and client computer So we have

to specify the Port No)

Destination IP address

Destination port number

Developing a Network Approach

o To develop a Internet Application choose the standard and well-accepted protocol.

o At the data link layer level, useEthernet

o At the Network layer level,use IP

o Transport Layer,use TCP

o At the Application layer level,use a standard API like the Berkeley Socket Interface (BSI) It

has the function to talk to the another process.

.



Let us now examine the client-server inter-communication with three models.

Model #1 of the client-server architecture - Static HTML pages

The client (browser) requests for an HTML file stored on the remote machine through the server

software. The server locates this file and passes it to the client. The client then displays this file on your

machine. In this case, the HTML page is static. Static pages do not change until the developer modifies

them.

Model #2 of the client-server architecture - CGI Scripts

The scenario is slightly different for CGI applications. Here the server has to do more work since CGI

programs consume the server machine's processing power.

Let us suppose you come across a searchable form on a web page that runs a CGI program. Let us also

suppose you type in the word 'computers' as the search query. Your browser sends your request to the

server. The server checks the headers and locates the necessary CGI program and passes it the data

from the request including your search query "computers". The CGI program processes this data and

returns the results to the server. The server then sends this formatted in HTML to your browser which

in turn displays the HTML page.



Thus the CGI program generates a dynamic HTML page. The contents of the dynamic page depend on

the query passed to the CGI program.

Model #3 of the client-server architecture - Server side scripting technologies

The third case also involves dynamic response generated by the use of server side technologies. There

are many server side technologies today.

Active Server Pages (ASP): A Microsoft technology. ASP pages typically have the extension .asp.

Personal Home Pages (PHP): An open source technology. PHP pages typically have .php, .phtml or

.php3 file name extensions.

Java Server Pages: .jsp pages contain Java code.

Server Side Includes (SSI): Involves the embedding of small code snippets inside the HTML page. An

SSI page typically has .shtml as its file extension.

With these server technologies it has become easier to maintain Web pages especially helpful for a

large web site. The developer needs to embed the server-side language code inside the HTML page.

This code is passed to the appropriate interpreter which processes these instructions and generates the

final HTML displayed by the browser. Note, the embedded server-script code is not visible to the client

(even if you check the source of the page) as the server sends ONLY the HTML code.

Let's look at PHP as an example. A request sent for a PHP page from a client is passed to the PHP

interpreter by the server along with various program variables. The interpreter then processes the PHP

code and generates a dynamic HTML output. This is sent to the server which in turn redirects it to the



client. The browser is not aware of the functioning of the server. It just receives the HTML code, which

it appropriately formats and displays on your computer.

1.2 Internet

.What is Internet?

It is a global network of networks connecting hundreds of millions of users to each other and to

other world-wide users. A common protocol called TCP/IP (Transmission Control Protocol) is

used so conmmunications between computers can takes place.

The conceptual foundation for creation of the Internet was largely created by three individuals and a

research conference, each of which changed the way we thought about technology by accurately

predicting its future:

Vannevar Bush wrote the first visionary description of the potential uses for information

technology with his description of the "memex" automated library system.

Norbert Wiener invented the field of Cybernetics, inspiring future researchers to focus on the

use of technology to extend human capabilities.

The 1956 Dartmouth Artificial Intelligence conference crystallized the concept that

technology was improving at an exponential rate, and provided the first serious consideration of

the consequences.



Marshall McLuhan made the idea of a global village interconnected by an electronic nervous

system part of our popular culture.

Evolution of Internet

1950‟s ARPA (Advanced Research projects Agency)

1970 ARPANET It creates precursor to TCP

1971 Universities added to ARPANET

TelNet and FTP are available

1972 First email was sent

1973 APRPANET connected to England and Norway

1974 TCP was recognized as standard for communication across a system of

networks.

1982 In US ,Department of Defense (DOD) starts building defense data

Networks based on ARPANET Technology.

1983 ARPANET is splitted into ARPANET and MILNET.

1986 National Science Foundation (NSF) implements NSFNET

The objective of NSFNET was to create a very strong backbone Network

to connect regional Networks

1991 Archie and Gopher was released.

Archie list the FTP search engine.

Gopher is the advanced version of Archieve.Based on information FTP

sites are categorized and subcategorized.

1992 Internet links more than 17,000 networks in 33 countries;3 million hosts

1993 World Wide Web is launched

1995 Interconnected network providers(BSNL) start offering service.



• Internetworking: the process of connecting separate networks

.

we can divide the history of the Internet (till the present) into three main parts.

1. FTP: The first stage

2. Gopher: The second stage

3. The World Wide Web: The third stage

File Transfer Protocol - FTP

The FTP (File Transfer Protocol) was, and is still, widely used to transfer files from one computer to

the other. A user typically logs in at an FTP server and downloads or uploads files. Though FTP

allowed for sending and retrieving files from a remote computer, it did not facilitate browsing. Thus, a

lot of time was spent (wasted!) in searching for the required information. Because of this, a service

http://www.webdevelopersnotes.com/basics/ftp_file_transfer_protocol.php3



called Archie was developed to simplify keyword searching of files located at FTP servers. Nowadays,

FTP is mainly used to transfer large data (huge files or many small files) from one machine to the other.

Various FTP clients are now available and most of them are very simple to use. The File Transfer

Protocol still remains a faster method than the HyperText Transfer Protocol (HTTP) for uploading and

downloading files.

Gopher

Gopher was a menu-style information browsing and retrieval system. Developed at the University of

Minnesota as a campus-wide information system, Gopher was named after the University mascot,

though some opine that Gopher stands for 'go-for' information.

The World Wide Web

The World Wide Web: Came into existence with the introduction of browsers, the first one

being Mosaic.

The browser provided ease of use with graphical display and was able to show images with text.

Hyperlinking between documents broke the linear architecture of Gopher and increased the

complexity of the web.

The browser was able to provide the user with a range of experiences - pictures, multimedia

(sound, video) and interactivity.

The web also allowed for the integration of pages with databases that resulted in dynamically

generated content - content that is picked up from the database and integrated into HTML pages

or HTML templates. This prompted many companies to put their wares online resulting in the

explosive growth of the web.

How Internet Works

• TCP/IP

• Routing Traffic Across the Internet

• Addressing Schemes

• Domains and Subdomains

http://www.webdevelopersnotes.com/basics/the_world_wide_web.php3



1. How the Internet Works - TCP/IP

• Every computer and network on the Internet uses the same protocols (rules and procedures)

to control timing and data format.

• The protocol used by the Internet is the Transmission Control Protocol/Internet Protocol,or

TCP/IP.

• No matter what type of computer system you connect to the Internet, if it uses TCP/IP, it can

exchange data with any other type of computer.

2. Routing Traffic Across the Internet

• Most computers don't connect directly to the Internet. Instead, they connect to a smaller

network that is connected to the Internet backbone.

• The Internet includes thousands of host computers (servers), which provide data and services

as requested by client systems.

• When you use the Internet, your PC (a client) requests data from a host system. The request and

data are broken into packets and travel across multiple networks before being reassembled at

their destination.



3. Addressing Schemes

• In order to communicate across the Internet, a computer must have a unique address.

• Every computer on the Internet has a unique numeric identifier, called an Internet Protocol (IP)

address.

• Each IP address has four parts – each part a number between 0 and 255. An IP address might

look like this: 205.46.117.104.

4. Domains and Subdomains

• In addition to an IP address, most Internet hosts or servers have a Domain Name System

(DNS) address, which uses words.

• A domain name identifies the type of institution that owns the computer. An Internet server

owned by IBM might have the domain name ibm.com.

• Some enterprises have multiple servers, and identify them with subdomains, such as

products.ibm.com



Internet Services

• E-Mail

• News

• Telnet

• File Transfer Protocol (FTP)

• Internet Relay Chat (IRC)

• The World Wide Web

1.E-Mail

• It is a service that helps to create, send, and receive messages and to attach files.

• To use e-mail, a user must have an e-mail address, which you create by adding your user name

to the e-mail server's domain name, as in [email protected]

2. Usenet and Mailing list(Electronic bulletin board service)

o If you want to receive periodically information about certain topics, there are two

things you can do.

The first possibility is to read the news groups of the Internet. This is a

mechanism to broadcast news, called articles, from your local host to the world.

mailto:[email protected]



There are news groups and mailing list about anything you can imagine, from

computers to research, sports, politics, etc

3.Telnet

A remote login to other computers on the Internet.

• Telnet is widely used by libraries, to allow visitors to look up information, find articles, and so

on.

4. File transfer protocol (FTP)

• It is the Internet tool used to copy files from one computer to another.

• Using a special FTP program or a Web browser, you can log into an FTP host computer over

the Internet and copy files onto your computer.

• FTP is handy for finding and copying software files, articles, and other types of data.

Universities and software companies use FTP servers to provide visitors with access to data.

5. Internet Relay Chat (IRC)

• Internet Relay Chat (IRC) is a service that allows users to communicate in real time by typing

text in a special window.

• Eg:Chat,messengers,VideoConfere3ncing,white boards etc



5. World Wide Web

It is a type of service in the Internet.

It allows multimedia documents to be shared between machines.

-Multimedia contains text,audio,video animation.

• The World Wide Web is a part of the Internet, which supports hypertext documents, allowing

users to view and navigate different types of data.

• A Web page is a document encoded with hypertext markup language (HTML) tags.

o HTML allows designers to link content together via hyperlinks.

o Every Web page has an address, a Uniform Resource Locator (URL).

1.3. Basic Internet Protocols

Protocols are set of rules that specify a common language that computers on a network use for

for communications with other computers.

It gives the specification on how computers talk with each other.



The basic Internet protocols are

(i)Internet Protocol (IP) (ii)Transmission Control Protocol (TCP). (iii) User Datagram

Protocol

Internet Protocol (IP)

IP is the fundamental protocol defining the Internet

IP address:

o 32-bit number (in IPv4)

ftp://ftp.rfc-editor.org/in-notes/std/std5.txt




o Associated with at most one device at a time (although device may have more than

one)

o Written as four dot-separated bytes, e.g. 192.0.34.166

Functions of IP : transfer data from source device to destination device

IP source software creates a packet

o representing the data to be transferred.

o Header: Source and destination IP addresses, length of data, etc.

o Data itself

If destination is on another LAN, packet is sent to a gateway that connects to more than one

network

Gateway:It is a device that is connected to the source computer‟s network as well as to atleast one

other network.

Limitations of IP:

– No guarantee of packet delivery (packets can be dropped)

– Communication is one-way (source to destination)

Transmission Control Protocol (TCP)

• TCP adds concept of a connection on top of IP

– Provides guarantee that packets delivered

– Provide two-way (full duplex) communication




• TCP also adds concept of a port

– TCP header contains port number representing an application program on the

destination computer

– Some port numbers have standard meanings

• Example: port 25 is normally used for email transmitted using the Simple Mail

Transfer Protocol (SMTP)

– Other port numbers are available first-come-first served to any application

The following figure represents the communicateion between Mailserver and client through the port

No 25.

http://www.iana.org/assignments/port-numbers



User Datagram Protocol (UDP)

It is an alternative protocol to TCP that also builds on IP.

UDP also adds concept of a port

It does not provide two-way connection or guaranteed delivery of data.

Advantage of UDP vs. TCP:

– Lightweight, so faster for one-time messages

Difference between TCP and UDP



Domain Name Service

• DNS is the “phone book” for the Internet

– Map between host names and IP addresses

– DNS often uses UDP for communication

• Host names

– Labels separated by dots, e.g., www.example.org

– Final label is top-level domain

• Generic: .com, .org, etc.

• Country-code: .us, .il, etc.

Higher-Level Internet protocols

HTTP (HyperText transfer Protocol): used on the World Wide Web (WWW) for transfering

web pages and files contained in web pages such as images.

FTP (File Transfer protocol): employed for transfering files from one machine to the other.

SMTP (Simple Mail Transport Protocol): used for email.

Telnet Protocol: Used to open telnet sessions

1.4 World wide Web (WWW)

WWW is a type of service in the Internet.

It is an international hypertext system that links together millions of documents.

Distinctive feature of Web: support for hypertext (text containing links)

o Communication via Hypertext Transport Protocol (HTTP)

o Document representation using Hypertext Markup Language (HTML)

• The World Web is the collection of machines (Web servers) on the Internet that provide

information, particularly HTML documents, via HTTP.

• Machines that access information on the Web are known as Web clients. A Web browser is

software used by an end user to access the Web.

History Of Web

WWW was created in 1989 by the Tim Berners Lee,a physicist at the European laboratory for Particel

Physics (CERN) in Geneva,Switzerland to enable the document communication between the physics

researchers and to create a network between them, physics researchers created hypertext documents

as their documentation standards.

http://www.example.org/

http://www.icann.org/tlds/



Web Language

HTML (Hyper Text Markup Language) has become the standard Markup language for information

publishing.

Components of the WWW

The Hardware ,Software and Protocols are the elements of WWW.

i) Client and Server

Server

A Server is a computer that is connected to the Internet that has software capable of storing,retrieving

and distributing some of the web application files.

Client

A client (web browser) is a computer that requests files from the web.

When a client is requesting for a file in the web,the network directs the request to the web server

where that file has been available.

The server by accepting the request sends the file to the client.

Protocols

Protocols are required to communicate between the web servers and web clients.

Protocol are HTTP,FTP,TCP,IP,UDP,ARP,RARP etc.



Correct use of sockets is only part of network communicating programs. Once you have a way for two

programs to talk, you still need a protocol for communication. This protocol lets each party know when

to talk, and it precisely defines who is responsible for which part of the service.

Common Internet protocols are:

Protocol Meaning Action

FTP File Transfer Protocol Copying files between remote machines

telnet Remote login

rsh and rcp Remote shell and Remote copy Remote login and remote file copying

NNTP Network News

Transfer Protocol

Reading and posting USENET news

HTTP Hypertext Transfer Protocol Transferring documents on the Web

SMTP Simple Mail Transfer Protocol Sending mail

POP3 Post Office Protocol Reading mail

Web page

Web page is HTML documents.These web pages are linked together a system of connections which

enable the user to jump from one web page to another by clicking on a link.

Types of Web Pages

Static Web Page

A static web page is a normal web page that is written in HTML and therefore needs no pre-processing

on the web server.

Dynamic Web Page

A dynamic web page is a web page that uses some scripting language, such as PHP or ASP, to allow

the web server to adapt the content of the web page to a particular situation.

The information content that is displayed on the web page in your browser, will normally not be stored

in the file containing that web page on the web server, but in a separate database.

http://www.how-to-guides.com/faq/web/html.htm

http://www.how-to-guides.com/faq/web/php.htm

http://www.how-to-guides.com/faq/web/asp.htm



When the page is requested from the server, the web server will retrieve such a dynamic web page,

process it to retrieve the relevant information from the database, and then puts that information in the

HTML of the web page.

Home Page

It is the first page of the website.It is also known as an index page.

Web Browser

It is a computer program that accesses web pages and displays them on the computer screen.

To access the world wide web the user requires a web browser.

The most popular browsers are Microsoft Internet Explorer and Netscape Navigator.

Difference between the Internet and the World Wide Web

Internet is the backbone of communication systems where as WWW is a type of service that uses

communication systems

1.5 HTTP (Hyper Text Transfer Protocol)

It is a protocol using which web clients (browsers) interact with web servers.

It is a stateless protocol because each command is executed independently, without any

knowledge of the commands that came before it.

It transfers hypertext( A text with links to other text documents) across the Internet.

HTTP is based on the request-response communication model:

o Client sends a request

o Server sends a response

HTTP is a stateless protocol:

o The protocol does not require the server to remember anything about the client between

requests.

Basic Steps of HTTP Protocol

Client opens socket connection to the HTTP Server.(Typically over port 80)

Client sends HTTP requests to server.

Server sends back response and closes connection.

ftp://ftp.rfc-editor.org/in-notes/rfc2616.txt



General Format of Request and Response Message

1.General header

It gives general information about the message and can be present in both a request and a response.

2.Request Header

It can be present only in a request messages.It specifies the client‟s configuration and the clients

preferred document format.

3.Response Header

It can be present only in a response message.It specifies the server‟s configuration and special

information about the request.

Client

Server

request message

response message



5. Entity Header

It gives information about the body of the document.It is mostly present in POST and PUT methods

Request Message

A request message consists of a request line, a header and sometimes a body as illustrated below

Request line

A request line defines the request type, resource (URL) and the HTTP version as shown below.

Space

For example: GET http://confused.com:80/index.html HTTP/1.1

a blank line

Request Line

Headers

Body

only present in

some messages

Request type

(method)

URL

HTTP version



Other protocols used to retrieve a document include: FTP, TELNET, Gopher, News

Request Types or Methods

Method Description

GET retrieve document specified by URL

PUT store specified document under given URL

HEAD retrieve info. about document specified by URL

OPTIONS retrieve information about available options

POST give information (eg. annotation) to the server

DELETE remove document specified by URL

TRACE loopback request message

CONNECT for use by caches

Header Field

Header Field Structure

– field name : field value

– Syntax

– Field name is not case sensitive

– Field value may continue on multiple lines by starting continuation lines with white space

– Field values may contain MIME types, quality values, and wildcard characters (*‟s)

MIME content type syntax:

– top-level type / subtype

Toplevel MIME Content Types

Top-level Content

Type

Document Content

Application Data that does not fit within another content type and that is intended to

be processed by application software

Audio Audio data

Image Image data

Model Structured data,generally numeric,representing physical or behavioral

models

Multipart Multiple entities,each with its own he3ader and body

Text Diaplayable as text

Video Animated images

The URL is made up of three parts.

protocol :// URL / path.

The URL can optionally contain a port number (80 in this case)

The path is the pathname of the file where the information is located



Common MIME Content Types

MIME TYPE Description

Text/html HTML document

image/gif Image represented using Graphics InterChange Format(GIF)

Image/jpeg Image represented using Joint Picture Expert Group(JPEG)

format

Text/plain Human-readable text with no embedded formatting

information

Application/octet-stream Arbitrary binary data

Application/x-www-form-url encoded Data sent from a web client to web server for processing.

Response Message

A response message consists of a status line, a header and sometimes a body as shown in the figure below

Status Line

The status line defines the status of the response message. It consists of the HTTP version, a space, a status code,

a space and a status phrase.has shown below

Space

For example: HTTP/1.1 200 OK

a blank line

Status Line

Headers

Body

only present in some

messages

HTTP version

Status code

Status phrase



Status Code

Digit Class Standard Use

1xx Informational Request received,processing

2xx Success Action received,understood,accepted

3xx Redirection Client needs to use a different resource to fulfill request

4xx Client Error Client‟s request is not valid

5xx Server Error Server failed

Some common HTTP1.1 Status Code

Status

Code

Recommended Reason

Phrase

Meaning

200 OK Request processed normally

301 Moved Permanently URI for the requested resource has changed.

307 Temporary Redirection URI for the requested resource has changed atleast

temporarily

401 Unauthorized The resource is password protected,and the user has not yet

supplied a valid password.

404 Not Found The document/file requested by the client was not found

Response Headers Fields

Field Name Use

Date Time at which response was generated

Server Identification Information on the server

Last-

modified

Time at which the document was changed

Content-

Length

Size of document,in bytes

Content-Type File format (html,gif,pdf)

Expires Prevents browser from caching beyond date

• It exchange additional information between the client and the server.

• Header can be one or more header lines.

• Each header line is made of a header name , a colon, a space and a header value.



Header format

Sample HTTP Exchange

GET /~jain/index.html HTTP/1.0 } Request Line

Accept: text/plain, text/html} Request Header

1.7 Web Client

It is software that accesses a web server by sending an HTTP request message and processing the

resulting HTTP response.

Eg Web browsers running on desktop or laptop is example of Web Client.



Types of Browsers

1.Graphical Browser 2.Text Browser.

Graphical Browser

It allows retrieval of text,images,audio and video.Navigation is accomplished by pointing and

clicking with a mouse on highlighted words and graphics.

First graphical browser running on general-purpose platforms: Mosaic (1993)

Both Netscape and Internet Explorer are graphical browsers

Text Browser

It provide access to the web in text-only mode.Navigation is accomplished by highlighting emphasized

words on the screen with the arrow up and down keys and pressing the Enter key to follow the link.

Eg Lynx

Standards of Mozilla bars

The primary region is the client area,which displays a document.

Title bar

o It displays a title assigned by the document author to the document currently displayed

within the client area.

o It displays the browser name.

Menu Bar

It contains a set of dropdown menus,much like most other applications that incorporate a

graphical user interface(GUI).

Navigation ToolBar

It contains certain standard push-button controls

o Back(It allows the user to return to a previously viewed web page)



o Forward(Reverse of Back)

o Reload(Updated version of the currently viewed page)

o Stop(Halt page downloading currently in progress)

o Print(print the client area of the window)

o Location bar (It is similar to text box ,where a user can enter a URL )

o Search Button(The text in the textbox is sent to the search engine)

Status Bar

It displays messages and icons related to the status of the browser.

Status Message Meaning

Resolving host www.example.org Waiting for response

Connecting to www.example.org Connecting TCP connection to server

Waiting for www.example.org Sent HTTP request to server,waiting for HTTP

response

Transferring data from www.example.org HTTP response has begun,but has not completed

Done HTTP response has been received.

Primary Task of Web browser

1.Convert web addresses (URL‟s) to HTTP requests.

2.If the server is specified using host name(rather than IP address)use DNS to convert this

name to the appropriate IP address.

3.Establish a TCP connection using the IP address of the specified web server.

4.Send the HTTP request over the TCP connection and wait for the server‟s response

5.Display the document contained in the response.

URL







1.8 Web Server

A web server is a computer program that delivers (serves) content, such as web pages, using the

Hypertext Transfer Protocol (HTTP), over the World Wide Web.

The primary feature of web server is to accept HTTP request from web clients and return an appropriate

resource in the HTTP response.

1.8.1 Functionality of WebServer

1.The server calls on TCP software and waits for connection request to one or more ports.

2.When a connection request is received,the server dedicates a “subtask” to handle this connection.

3.The subtask establishes the TCP connection and receives an HTTP Request

4.The subtask examines the Host header field of the request to determine which “virtual host” should

receive this request.

1.8.2 Common features

1. Virtual hosting to serve many Web sites using one IP address.

2. Large file support to be able to serve files whose size is greater than 2 GB on 32 bit OS.

3. Bandwidth throttling to limit the speed of responses in order to not saturate the network and to

be able to serve more clients.

4. Server-side scripting to generate dynamic Web pages, but still keeping Web server and Web

site implementations separate from each other

The communication between the client machine and the Web server transpires as follows:

The browser broke the URL into three parts:

1. The protocol ("http")

2. The server name ("www.howstuffworks.com")

3. The file name ("web-server.htm")

The browser communicated with a name server to translate the server name

"www.howstuffworks.com" into an IP Address, which it uses to connect to the server machine.

The browser then formed a connection to the server at that IP address on port 80. (We'll discuss

ports later in this article.)

Following the HTTP protocol, the browser sent a GET request to the server, asking for the file

"http://www.howstuffworks.com/web-server.htm." (Note that cookies may be sent from

browser to server with the GET request .

The server then sent the HTML text for the Web page to the browser.

The browser read the HTML tags and formatted the page onto your screen.

This process is continues for every request sent by the browser and until the client browser

leaves the site.

http://www.answers.com/topic/virtual-hosting

http://www.answers.com/topic/ip-address

http://www.answers.com/topic/large-file-support

http://www.answers.com/topic/operating-system

http://www.answers.com/topic/bandwidth-throttling

http://www.answers.com/topic/server-side-script

http://www.answers.com/topic/dynamic-web-page-1



1.8.3 Server History

• Httpd: primary Web server c. 1995

• Apache: “A patchy” version of httpd, now the most popular server (esp. on Linux platforms)

• IIS: Microsoft Internet Information Server

• Tomcat:

– Java-based

– Provides container (Catalina) for running Java servlets (HTML-generating programs) as

back-end to Apache or IIS

– Can run stand-alone using Coyote HTTP front-end

1.8.4 Logging(records)

Web server logs information about server activity.

Access Log:The web server records normal activity is called an Access log.It is a file that records

information about every HTTP request processed by the server.

Message Log:It is produced by web server and it contains a debugging information generated by web

application.

Information in the log Entry

1.Host name of client machine making the request.

2.User name used to log in

3.Date and Time of response ,plus the time zone

4.Start line of HTTP request

5.HTTP status code of response

6.Number of bytes sent in body of response

1.8.5 Secure Servers

Normally,the client sends the HTTP request and the server process the HTTP request and send

the response to the client.

It is possible that some machine along the route will extract information from the IP messages

if forwards for evil purposes.

In general ,any machine other than the sender or receiver that extracts information from network

messages is known as an eavesdropper.

http://tomcat.apache.org/tomcat-5.0-doc/config/



To prevent eavesdropper ,HTTP messages typically travel over a public network, private

information (such as credit card numbers) should be encrypted .

https URL scheme tells browser to use encryption

Common encryption standards:

o Secure Socket Layer (SSL)

o Transport Layer Security (TLS)

Communication between Secure Server and client

ftp://ftp.rfc-editor.org/in-notes/rfc2246.txt



Secure Servers(Man-in-the-Middle Attack)



Secure Servers(Preventing Man-in-the-Middle)

1.9 Case Study

• What web server will we use?

– Tomcat(Because it is freely available,runs on multiple platforms,is simple to configure)

• What web browsers will we support?

– IE6, Mozilla(if the application runs in this server it can be run on any server)

• What level of security will we implement?

– Non-secure (http scheme)

– Password required to add to blog



1.10 Markup Language

Markup Language

The language specifies code for formatting, both the layout and style, within a text file. The code used

to specify the formatting are called tags.

Example : HTML

What is HTML?

HTML is a language for describing web pages.

HTML stands for Hyper Text Markup Language

HTML is not a programming language, it is a markup language

A markup language is a set of markup tags

The markup tags describe how text should be displayed

History of HTML

1992: HTML 1.0, Tim Berners-Lee original proposal

1993: HTML+, some physical layout

1994: HTML 2.0, standard with best features

1995: Non-standard Netscape features

1996: Competing Netscape and Explorer features

1996: HTML 3.2, the Browser Wars end

1997: HTML 4.0, stylesheets are introduced

1999: HTML 4.01, we have a winner!

2000: XHTML 1.0, an XML version of HTML 4.01

2001: XHTML 1.1, modularization

2002: XHTML 2.0, simplified and generalized

MetaLanguage:

A language used to describe the syntax of other languages is sometimes referred to as a

metalanguage.

Meta language used to describe the syntax of programming language such as Java is called

Backus-Naur Form(BNF) notation.

Meta language for HTML 4.01 is SGML(Standard Generalized Markup Language)

o HTML 4.01 (Dec 1999) syntax defined using Standard Generalized Markup Language

(SGML).



o XHTML 1.0 (Jan 2000) syntax defined using Extensible Markup Language (XML)

What Is XHTML?

XHTML stands for EXtensible HyperText Markup Language

XHTML is almost identical to HTML 4.01

XHTML is a stricter and cleaner version of HTML

XHTML is HTML defined as an XML application

XHTML is a W3C Recommendation

Why XHTML?

Many pages on the internet contain "bad" HTML.

The following HTML code will work just fine if you view it in a browser (even if it does NOT

follow the HTML rules):

<html>

<head>

<title>This is bad HTML</title>

<body>

<h1>Bad HTML

<p>This is a paragraph

</body>

XML is a markup language where everything must be marked up correctly, which results in

"well-formed" documents.

XML is designed to describe data, and HTML is designed to display data.

Today's market consists of different browser technologies, some browsers run on computers,

and some browsers run on mobile phones or other small devices. The last-mentioned do not

have the resources or power to interpret a "bad" markup language.

Therefore - by combining the strengths of HTML and XML, W3C recommended a markup

language that is useful now and in the future - XHTML.

Difference between HTML and XHTML is

HTML XHTML



HTML uses a fixed set of tags With XML you make up your own tags (and define what they

mean in a separate document)

HTML is designed to display data to

humans

XML is designed to describe data to computers.

Browsers are very tolerant of errors in

HTML

XML documents must be well-formed (syntactically correct)

All browsers can display HTML Most modern browsers can display XML

From HTML to XHTML

XHTML elements must be properly nested

Example:<b><i>bold and italic</b></i> is wrong

<b><i>bold and italic</i></b> is right

XHTML documents must be well-formed

<html>

<head> ... </head>

<body> ... </body>

</html>

Tag names must be in lowercase.(HTML tags are not case sensitive)

All XHTML elements must be closed

If an HTML tag is not a container, close it like this:

<br />, <hr />, <image src="smile.gif" />

Attribute names must also be in lower case

Example: <table width="100%">

Attribute values must be quoted

Example: <table width="100%">

Attribute minimization is forbidden

Example: <frame noresize="noresize">,

cannot be abbreviated to <frame noresize>

The id attribute replaces the name attribute

Wrong: <img src="picture.gif" name="picture1" />

Right: <img src="picture.gif" id="picture1" />



Best: <img src="picture.gif" name="picture1" id="picture1" />

Relationship between SGML(Standard Generalized Markup Language),XML,HTML and

XHTML

1.11 Basic Syntax and Semantics

1.11.1 Document Type Declaration

An XHTML document consists of three main parts:

the DOCTYPE declaration

the <head> section

the <body> section

The basic document structure is:



<!DOCTYPE ...>

<html>

<head>

<title>... </title>

</head>

<body> ... </body>

</html>

Note: The DOCTYPE declaration is always the first line in an XHTML document!

Example

This is a simple (minimal) XHTML document:

Document <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

Type "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Definition

<html>

Document <head>

<title>simple document</title>

Instance </head>

<body>

<p>a simple paragraph</p>

</body>

</html>

Document Type Definition

It describes the syntax to use for the current document.

DTD field Notes

HTML this is HTML, not XML

PUBLIC this is a public standard, not some DTD you cooked up

yourself.

W3C who wrote the DTD

HTML 4.01 which version of HTML it supports.



There are three different DTDs for XHTML-

Strict

Use for really clean markup, with no display information (no font, color, or size

information)

Use with CSS (Cascading Style Sheets) if you want to define how the document

should look.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Transitional

Use with standard HTML and/or with CSS

Allows deprecated HTML elements

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Frameset

Use if your document uses HTML frames.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Example 1:

This example used the strict DTD, meaning that every single tag must be closed properly, all attributes

assigned values, etc:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html

transitional

Strict does not let you use features that may be

phased out later.

Transitional does not recognizeby stylesheet.

Frameset is for when you use <frameset>

EN English

http://www.w3.org/TR/xhtml-

transitional.dtd

url of the DTD computer-readable grammar

http://www.w3.org/TR/xhtml-transitional.dtd

http://www.w3.org/TR/xhtml-transitional.dtd



PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<title> Strict DTD XHTML Example </title>

</head>

<body>

<p>

Please Choose a Day:

<br /><br />

<select name="day">

<option selected="selected">Monday</option>

<option>Tuesday</option>

<option>Wednesday</option>

</select>

</p>

</body>

</html>

Example 2:

This example uses the transitional DTD, which provides support for older browsers that don‟t

recognize style sheets. You can see it uses several attributes within the <body> tag, which aren‟t

allowed when using the strict DTD:


<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"DTD/xhtml1-transitional.dtd">


<head>

<title> Transitional DTD XHTML Example </title>

</head>

<body bgcolor="#FFFFFF" link="#000000" text="red">

<p>This is a transitional XHTML example</p>

</body>

</html>

Example 3:

This example uses the frameset DTD, which allows us to split one XHTML page into multiple frames,

with each frame containing an XHTML page within it:




<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"

"DTD/xhtml1-frameset.dtd">


<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title> Frameset DTD XHTML Example </title>

</head>

<frameset cols="100,*">

<frame src="toc.html" />

<frame src="intro.html" name="content" />

</frameset>

</html>

1.11.2

White Space in Character Data

• Four white space characters: carriage return, line feed, space, horizontal tab

• Normally, character data is normalized:

– All white space is converted to space characters

– Leading and trailing spaces are trimmed

– Multiple consecutive space characters are replaced by a single space character

Example

<!DOCTYPE html

PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"DTD/xhtml1-strict.dtd">


<head>

<title>

HelloWorldWhiteSpace.html

</title>

</head>

<body>

<p>

Hello World!

This is my second HTML paragraph.

</p>

</body>

</html>



If we want to display in two paragraphs use two p elements

1.11 .3

Unrecognized HTML Elements

• Browsers ignore tags with unrecognized element names, attribute specifications with

unrecognized attribute names

– Allows evolution of HTML while older browsers are still in use



1.11.4 Special Characters

The lessthan(< )marks the beginning of a tag.Suppose if we want to use lessthan symbol we use a type

of markup known as reference.

A reference within an HTML document always begin with an ampersand(&) and ends with a

semicolon(;).

There are two type of references

– Character reference specifies a character by its Unicode code point

• For <, use < or < or <

– Entity reference specifies a character by an HTML-defined name



• For <, use <

The other HTML entity reference that is frequently used is ,the nonbreaking space character.

The purpose of the character is to insert a space between two strings and also informing the browser

that it should perform word-wrapping between these strings.

For example ,a browser displays the following string as

<p>

keep together keep together keep together keep together

<p>

Output



Non-breaking space often used to create multiple spaces

1.11.5 Attributes

Attribute values must be quoted (matching single or double quotes)

Attribute values can contain embedded quotes or references to quotes

Multiple attribute specifications are space-separated

Example

1.12 Some Fundamental HTML Elements

HTML Markup Tags

HTML markup tags are usually called HTML tags

HTML tags are keywords surrounded by angle brackets like <html>

There are two classes of tags (i)Tags which appear in pair (ii)Tags which appear individually.

(i)Tags which appear in pair

HTML tags normally come in pairs like <b> and </b>



The first tag in a pair is the start tag, the second tag is the end tag

Note: The start and end tags are also called the opening and closing tags.

(ii)Tags which appear individually.

Eg. <img src=”baby.jpg”>



How HTML Works?

HTML allows you to design HTML pages that you can view using a web browser.

We can place HTML tags around text that is in a document so as to describe the formatting of this text.

When a browser interprets this document,it formats the text according to the meaning of the HTML

tags.

What is an HTML File?

An HTML file is a text file with HTML tags

An HTML file name must end with .htm or .html

An HTML file can be created using a simple text editor

An HTML file is often called an HTML document or a Web Page

When a browser displays a web page, it will not display the markup tags. The browser uses the markup

tags to understand the layout of the page.

Format of An HTML Document

A HTML document consists of two major portions 1.Header 2.Body

Header

It contains the information about the document like, title ,date ,the name of the author and

names of the script.The browser does not display the contents of this section.

It is referred as document head.

Body

It contains the actual matter of the document.It includes the information that the browser must display.



<html>

<head>

<title> This is the title </title>

</head>

<body>

<p>This is my first paragraph</p>

<p>This is my <b>second</b> paragraph</p>

</body>

</html>

Output

Example Explained

When a browser displays a web page, it will not display the markup tags.

The text between the <html> and </html> tags describes a web page.

The text between the <body> and </body> tags is displayed in the web browser.

The text between the <p> and </p> tags is displayed as paragraphs.

The text between the <b> and </b> tags is displayed in a bold font.

A very basic HTML document

<html>

<body>

The content of the body element is displayed in your browser.

</body>

</html>



Output:

The content of the body element is displayed in your browser.

Document structure tags

TAG SYNTAX DESCRIPTION ATTRIBUTES

HTML <HTML>………</HTML> It declares the document to

be a HTML document.

None

HEAD <HEAD>…….</HEAD> It defines the header area of

a page,which is not

displayed within the page

itself in the browser.

None

TITLE <TITLE>……..</TITLE> The text between

<TITLE>……..</TITLE>is

the title of the web page

and is displayed in the title

bar of the browser.

None

BODY <BODY>……..</BODY> The actual content of the

web page will be displayed

in the browser.

1.alink - Specifies the

color of the active links in

the document

2.background- Adding a

background image to a page.

3.bgcolor-The background

color of the document.

4.link-Specifies the color

of all the links in the

document

5.text-Specifies the color

of the text in the document

6.vlink-Specifies the color

of the visited links in the

document



FORMATTING TAG

These tags can be used to change how the text is displayed on a browser screen.

Two Types of Formatting Tags

(i)TEXT LEVEL FORMATTING (ii) BLOCK LEVEL FORMATTING

(i)Text Level Formatting

It is used to format the text.


B <B>……….</B> Defines bold text None

BIG <BIG>……..</BIG> Defines big text. The font

size is bigger than the

default font size

None

SMALL <SMALL>…….</SMALL> The font size is lesser than

the default font size

None

I <I>……..</I> To Italicize the text. None

SUB <SUB>…..</SUB> Defines subscripted text None

SUP <SUP>….</SUP> Defines superscripted text None

S(OR)

STRIKE

<S>…….</S> It displays the text with a

line(strike)n through it.

None

EM <EM>…..</EM> To emphasize the text. None

PRE <PRE>…..</PRE> Defines preformatted text None

FONT <FONT>…….</FONT> It is used to change the

font properties

1.color

2.face

3.size

(ii) BLOCK LEVEL FORMATTING

The tags that display block-level elements in text,such as headings,paragraphs and so on


BR <BR> To insert the line break in

the document.

None

H1……H6 <H1>…….</H1> Headings are defined with

the <h1> to <h6> tags. <h1>

defines the largest heading.

<h6> defines the smallest

heading

align

HR <HR/> To insert a

horizontal rule. In HTML the <hr>

1.align

2.noshade



tag has no end tag.

3.size

4.width

P <P>….</P> To define the paragraph 1.Align

1.12.1 Headings and Paragraphs

Headings

It is used to generate headings 1 < n < 6

Six different levels of Headings.

<H1> is the largest.<H6> is the smallest.

Paragraphs

Paragraphs are defined with the <p> tag.

HTML automatically displays an empty line before and after a paragraph

End Tag </p> is optional.

Attribute Value

Align

o Left

o Right

o Center

o justify

Spacing in the Text

<br> is used to indicate that the text following <br> should begin on the next line.

Syntax:

<Hn>…..</Hn>

<p>This is a paragraph</p>

<p>This is another paragraph</p>

Syntax:

<p>…..</p>

Syntax:

<br>



. It has no end tag like </br>.

The amount of line spacing is less than that of a <p> break.

1.12.2

Horizontal Rule :<hr>

<hr> element adds a horizontal line to the document.

Length and thickness of the line can be specified.

Atributes

attribute

name possible values meaning notes

ALIGN LEFT, RIGHT,

CENTER horizontal alignment of the rule default is CENTER

NOSHADE NOSHADE requests the rule to be rendered

in a solid color

as opposite to the traditional

two-color "groove"

SIZE integer height of the rule, in pixels

WIDTH width specification width of the rule

Example 1

<html>

<head>

<title> Title of the Document</title>

</head>

<body text="white"bgcolor="blue">

This is the content of the document

This is an <i> italic </i> font.

and this is <b> bold </b>.

</body>

</html>

http://www.cs.tut.fi/~jkorpela/HTML3.2/3.10.html#pixel



Output:

Example 2

<html>

<head><title>Demonstration of Headings</title></head>

<body text="white" bgcolor="blue">

<h1>This is a first level heading </h1>

<h2>The second level</h2>

<h3>The third level</h3>

<h4>Fourth Level</h4>

<h5>Fifth level</h5>

<h6>Sixth level></h6>

Plain text with no heading

</body>

</html>



Output



Example 3

OUTPUT

<html>

<head><title>Paragraph Aligning</title></head>


<h3>

<P ALIGN=CENTER> This paragraph will be aligned at the center.

Even as the browser window size changes,the alignment remains the same.</p>

<P ALIGN=LEFT> This demonstrates left alignment</p>

<P ALIGN=RIGHT>Aligning by the right margin?</p>

</h3>

</body>

</html>



Example 4

Output

<html>

<head><title>Layout Features </title></head>

<body text="yellow" bgcolor="blue">

<h2> <pre>

begin

if(a>b)

then max:=a;

else max:=b;

end;

</pre> </h2>

<hr size=8 width=50%>

<hr>

<hr size=20 width="75%" noshade>

</body>

</html>



Example 5

<html>

<head><title>Superscript and Subscript </title></head>


<h1> y=x <sup> 3 </sup> + 2 x <sup> 2 </sup>+4 </h1>

<br>

<h2> W <sub> total</sub>=x <sup>2</sup>-5 </h2>

</body>

</html>



Images

It includes a graphics in a HTML document.

Attribute Value Description

alt text Specifies an alternate text for an image

src URL Specifies the URL of an image

align top

bottom

middle

left

right

Use styles instead.

Specifies how to align the image according to

surrounding text.

border pixels Use styles instead.

Defines a border around an image.

height pixels

%

Defines the height of an image



width pixels

%

Sets the width of an image

Example

OUTPUT

<html>

<head><title>Displaying Images </title></head>

<body>

<img src="laptop.jpg">

<img src="laptop.jpg" Height=80 width=100>

</body>

</html>



Example 2

<html>

<head><title>Resizing Images </title></head>

<body>

<img src="laptop.jpg"width=20 height=20><p>

<img src="laptop.jpg" Height=45 width=45><p>

<img src="laptop.jpg" Height=70 width=70><p>

Resizing the image by changing the values in the height and width attributes of the img tag.

</body>

</html>

OUTPUT



Example 3

Image using Map

Planetsexample.html

<html>

<body>

<p>

Click on the sun or on one of the planets to watch it closer:

</p>

<img src="planets.jpg" width="145" height="126" alt="Planets" usemap="#planetmap" />

<map id="planetmap" name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.html" />

<area shape="circle" coords="124,58,8" alt="Venus" href="venus.html" />

</map>

<p>

<b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant)

attribute in

the map element, therefore we have added both the

"id" and "name" attributes to the map element.

</p>

</body>

</html>



OUTPUT



Sun .html

OUTPUT

SUN.html

<html>

<head>

<title> SUN </title>

</head>

<body>

<img src="sun.jpg" align=CENTER />

<a href="planetsexample.html">BACK</a>

</body>

</html>



VENUS .HTML

OUTPUT

VENUS

<html>

<head>

<title>

<h1>VENUS</h1>

</title>

</head>

<body>

<img src="venus.jpg" align=CENTER />

<a href="planetsexample.html">BACK</a>

</body>

</html>



Links

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new

document or a new section within the current document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.A hyperlink

are highlighted with color and underline.

Links are specified in HTML using the <a> tag.

The <a> tag can be used in two ways:

1. To create a link to another document, by using the href attribute

2. To create a bookmark inside a document, by using the name attribute

Syntax

• Clicking on a hyperlink causes browser to issue GET request to URL specified in href attribute

and render response in client area.

• Content of anchor element is text of hyperlink

Example :1

In the output LaptopDetails is the text displayed on the browser with hyperlink when the user clicks

LaptopDetails ,the laptop.jpg will be displayed on the screen.

Example 2

The HTML source code that will take you to the top of the page:

Output

Take me to the top of this page.

<a href="#top">Take me to the top of this page.</a>

<a href=”laptop.jpg”> Laptop Details</a>

<a href="url">Link text</a>

http://www.comptechdoc.org/independent/web/html/guide/htmlanchors.html#top



Example 3

An image as a link

Output

Create a link of an image:

No border around the image, but still a link:

<html>

<body>

<p>Create a link of an image:

<a href="default.asp">

<img src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a></p>

<p>No border around the image, but still a link:

<a href="default.asp">

<img border="0" src="smiley.gif" alt="HTML tutorial" width="32" height="32" />

</a></p>

</body>

</html>

http://www.w3schools.com/HTML/default.asp

http://www.w3schools.com/HTML/default.asp



Example 4 (Book Mark)

Link to the location of the same page

<html>

<body>

<p>

<a href="#C4">See also Chapter 4.</a>

</p>

<h2>Chapter 1</h2>

<p>This chapter explains first chapter</p>

<h2>Chapter 2</h2>

<p>This chapter explains second chapter</p>

<h2>Chapter 3</h2>

<p>This chapter explains third chapter</p>

<h2><a name="C4">Chapter 4</a></h2>

<p>This chapter explains fourth chapter</p>

<h2>Chapter 5</h2>

<p>This chapter explains fifth chapter</p>

<h2>Chapter 6</h2>

<p>This chapter explains sixth chapter</p>

<h2>Chapter 7</h2>

<p>This chapter explains seventh chapter</p>

<h2>Chapter 8</h2>

<p>This chapter explains eigth chapter</p>

<h2>Chapter 9</h2>

<p>This chapter explains ninth chapter</p>

<h2>Chapter 10</h2>

<p>This chapter explains tenth chapter</p>

</body> </html>



Output

See also Chapter 4.

Chapter 1

This chapter explains first chapter

Chapter 2

This chapter explains second chapter

Chapter 3

This chapter explains third chapter

Chapter 4

This chapter explains fourth chapter

Chapter 5

This chapter explains fifth chapter

Chapter 6

This chapter explains sixth chapter

Chapter 7

This chapter explains seventh chapter

Chapter 8

This chapter explains eigth chapter

Chapter 9

This chapter explains ninth chapter

Chapter 10

This chapter explains tenth chapter

http://www.w3schools.com/HTML/tryit_view.asp#C4



Example 5 (Creating a mail link)

Output

This is an email link: Send Mail

In this example a URL is provided .In this URL what ever after mailto is treated as email address.The

mail window is automatically opened provided mail is installed in the system.

Comments

HTML Comments

Comments can be inserted in the HTML code to make it more readable and understandable. Comments

are ignored by the browser and not displayed.

Comments are written like this:



Note: There is an exclamation point after the opening bracket, but not before the closing bracket.

Example

<html>

<body>

<html>

<body>

<p>

This is an email link:

<a href="mailto:[email protected]">Send Mail</a>

</p>

</body>

</html>

mailto:[email protected]





<p>This is a regular paragraph</p>

</body>

</html>

OUTPUT:

This is a regular paragraph

• Not allowed to use -- within comment

1.12 Relative URLs

URL:Each web page has a unique address,called a Uniform Resource Locator.It identifies its location

on the Internet.

Browser utilize the URL to retrieve a file from the computer on which it resides.

Format of URL

Protocol:

Http:It is used to access the webpage.

FTP:TO transfer Files

News(new server),mailto(mail server,used for accessing an email server)

telnet(for accessing remote computers)

Domain Name :Name of the domain where the information is located.

Protocol: WorldWide Web.Domain Name.Domain Type.path.FileName

Each



Domain Type:It represents the type of organization or country to which host belongs

Domain Type Description

com Commerical

edu Colleges and universities

gov Government agencies

Mil US military sites

Net Internet Infrastructure and service

providers

Org Non –profitable organisations

Absolute and Relative URLs

There are two types of paths in HTML, known as relative paths and absolute paths.

An absolute path contains the full URL of the item being referenced.

A relative path contains directions to the item relative to the HTML page.

Let us understand relative URLs through a small exercise.

For example:

http://www.webdevelopersnotes.com/images/email.gif specifies an image file email.gif located in the

images directory, under www.webdevelopersnotes.com domain name.

Similarly, the absolute URL of the document you are viewing is

http://www.webdevelopersnotes.com/design/ relative_and_absolute_urls.php3 which is a page in

the directory called design on this web site.

Using an Absolute URL in an <img> tag

Using a Relative URL in an <IMG> tag

<img src= ”http://www.webddevlopersnotes.com/images/email.gif” width= ”....” height=”..”/>

<img src= “../images/email.gif” width= ”....” height=”..”/>

http://www.webdevelopersnotes.com/design/relative_and_absolute_urls.php3



The absolute URL is straight forward but in the relative URL ,we have refered to the image with

../images/email.gif.

In order to understand the relative URL, let us see about the directory structure of this web site.

This web site has several sections and the files and web pages for each section have been segregated

into different directories.

This helps us to keep things organized on the web site. Under the document or server root directory

(the main directory of the web site), we have a directory called images which stores all common images

used on the pages of this web site.

The image email.gif resides in this directory. we have another directory called design which is at the

same level as images i.e. it is also in the document root directory.

This design directory contains the files and web pages for the "Web Page Design" section of this web

site. Diagramatically, the scenario can be represented as:

Now to access email.gif file from relative_and_absolute_urls.php3 page using a relative URL we put

../images/email.gif in the SRC attribute. We, thus, instruct the browser to first go one level up (i.e. to

the document root) and then move to the images directory and pick up the file email.gif. The two

peroids (..) instruct the server to move up one directory (which is the root directory), then enter images

directory (/images) and finally point at email.gif.






• Advantages:

– Shorter than absolute URL‟s

– it's easy to transfer a web site from one domain name to another. If you had used

absolute URLs in all links and SRC attributes, you'd have a difficult time updating each

link on each page.

• Should use relative URL‟s whenever possible

Case Study:

Which type of link is better for getting search engine rankings: an absolute or a relative

link? In terms of search engine visibility, it does not matter if you use absolute or relative links

on your web site. The search engines automatically convert relative links into absolute links.

However, using absolute links will not make a site rank higher merely because webmasters

choose to use absolute links on their sites

HTML LIST TAGS

Lists are useful way of presenting content.

There are five types of Lists (i) Ordered List (ii) UnOrdered List (iii) Definition lists

(iv) Directory lists (v) Menu List

Ordered List

An ordered list is also a list of items.

The list items are marked with numbers.

An ordered list starts with the <ol> tag.

Each list item starts with the <li> tag.



Syntax

<ol>

<li>….</li>

<li> …..</li>

<li>……</li>

</ol>


compact compact_rendering Use styles instead

start start_on_number Specifies the number to start on.

type A

a

I

i

1

Specifies the type of the list. Deprecated. Use styles

instead

(i).compact

The compact attribute specifies that the list should be more compact (rendered smaller by removing

spaces).

Syntax

<ol compact="compact">

Example

<html>

<body>

<ol compact="compact">

<li>WebTechnology</li>

<li>ERP</li>

http://www.w3schools.com/tags/att_ol_compact.asp

http://www.w3schools.com/tags/att_ol_start.asp

http://www.w3schools.com/tags/att_ol_type.asp



<li>Software Testing</li>

<li>Project</li>

</ol>

</body>

</html>

output

(ii)start

The attribute specifies what number the ordered list starts from

Syntax

<ol start="number">

Example

<html>

<body>

<h4> Scripting Langauge </h4>

<ol start="5">

<li>Java Script</li>

<li>VB Script</li>

</ol>



<ol type="I" start="10">

<li>HTML</li>

<li >XML</li>

</ol>

</body>

</html>

output

Example

<html>

<body>

<h4>Numbered list:</h4>

<ol>

<li>Apples</li>



<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Letters list:</h4>

<ol type="A">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase letters list:</h4>

<ol type="a">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Roman numbers list:</h4>

<ol type="I">

<li>Apples</li>

<li>Bananas</li>



<li>Lemons</li>

<li>Oranges</li>

</ol>

<h4>Lowercase Roman numbers list:</h4>

<ol type="i">

<li>Apples</li>

<li>Bananas</li>

<li>Lemons</li>

<li>Oranges</li>

</ol>

</body>

</html>

OUTPUT



2.Unordered Lists

An unordered list is a list of items. The list items are marked with bullets (typically small black circles).

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag



Syntax

<ul>

<li>….</li>

<li> …..</li>

<li>……</li>

</ul>

Example

<html>

<body>

<h4>An Unordered List:</h4>

<ul>

<li>Coffee</li>

<li>Tea</li>

<li>Milk</li>

</ul>

</body>

</html>

OUTPUT



Ty

pe

The type attribute specifies the style of the unordered list.

Syntax

<ul type="type">

Example

<html>

<body>

<ul type="square">

<u> Department </u>

<li>CSE</li>

<li>IT</li>

<li>ECE</li>

<li>EEE</li>

</ul>

<ul type="circle">

<li>Boys</li>

<li >Girls</li>


compact compact_rendering Use styles instead.

Specifies that the list should be more compact

type disc

square

circle

disc - Default. A filled circle

circle - An unfilled circle

square - A filled square

http://www.w3schools.com/tags/att_ul_compact.asp

http://www.w3schools.com/tags/att_ul_type.asp



</ul>

<ul type="disc">

<u>Mode of Transport</u>

<li>Own Vehicle</li>

<li >Van</li>

<li >Bus</li>

</ul>

OUTPUT

3.Definition Lists

A definition list is not a list of items.

This is a list of terms and explanation of the terms.

A definition list starts with the <dl> tag.

Each definition-list term starts with the <dt> tag.

Each definition-list definition starts with the <dd> tag

Tag Description

<dl> Defines a definition list

http://www.w3schools.com/tags/tag_dl.asp



<dt> Defines a definition term

<dd> Defines a definition description

Example

<html>

<body>

<h4>A Definition List:</h4>

<dl>

<dt>Coffee</dt>

<dd>hot drink</dd>

<dt>Juice</dt>

<dd>cool drink</dd>

</dl>

</body>

</html>

OUTPUT

4.Directory Lists

The <dir> tag defines a directory list.

Syntax:

http://www.w3schools.com/tags/tag_dt.asp

http://www.w3schools.com/tags/tag_dd.asp



<dir>

<li>…</li>

<li>…</li>

</dir>

Example

<html>

<body>

<dir compact="compact">

<li>HTTP</li>

<li>FTP</li>

<li>TCP/IP</li>

<li>SMTP</li>

</dir>

</body>

</html>

OUTPUT

(v) Menu List

<menu> </menu> tag defines menu items.



1.18 HTML Tables

Tables are made up of cells,arranged into rows.Use tags <table>,<tr>,<td>




TABLE <TABLE>…..</TABLE> Defines a table 1.ALIGN

2.BORDER

3.BGCOLOR

4.CELLPADDING

5.CELLSPACING

6.COLS

7.FRAME

8.RULES



A Table with m rows

<TABLE>

<TR> ……</TR> <!---Row1 -- >

<TR> ……</TR> <!---Row2 -- >

<TR> ……</TR> <!---Row3 -- >

……

<TR> ……</TR> <!---Row m -- >

</TABLE>

Creating a Table cell

There are two types of Table cells i) Header cells ii)Data cells

Header Cells

A table header cell is defined with the <TH> and </TH> tag pair.

The content of a table header are automatically centered and appear in boldface.

<html>

<body>

<h4>This table has 3 rows</h4>

<table>

<tr>

<!---Header -- >

<th> header1 </th>

<th> header2 </th>

……

<th> headerN </th>

</tr>

<tr> row1 </tr>



<tr> row2</tr>

</table>

</body>

</html>

Data Cells

It is defined as <TD> and </TD> tags.

A simple HTML table, containing two columns and two rows.

Example

<html>

<body>

<table border = "1">

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

<td>$100</td>

</tr>

<tr>

<td>February</td>

<td>$400</td>

</tr>



</table>

</body>

</html>

OUTPUT

Attributes of Table Tag


align left

center

right

Aligns the table..

bgcolor rgb(x,x,x)

#xxxxxx

colorname

Specifies the background color of the table.

border pixels Specifies the border width.

Tip: Set border="0" to display tables with no borders!

cellpadding pixels

%

Specifies the space between the cell walls and contents

cellspacing pixels

%

Specifies the space between cells

frame void

above

below

hsides

lhs

rhs

Specifies which sides of the border surrounding a table

will be visible

Note: The "border" attribute can be used in conjunction

with the "frame" attribute to specify the width of the

http://www.w3schools.com/tags/att_table_align.asp

http://www.w3schools.com/tags/att_table_bgcolor.asp

http://www.w3schools.com/tags/att_table_border.asp

http://www.w3schools.com/tags/att_table_cellpadding.asp

http://www.w3schools.com/tags/att_table_cellspacing.asp

http://www.w3schools.com/tags/att_table_frame.asp



vsides

box

border

border!

rules none

groups

rows

cols

all

Specifies the horizontal/vertical divider lines.

summary text Specifies a summary of the table for speech-

synthesizing/non-visual browsers

width %

pixels

Specifies the width of the table

1.align

Syntax

<table align="align">

Some table data

</table>

Parameter Description

align Optional. Specifies the horizontal alignment of the table.

Possible values:

left - Left-align table

right - Right-align table

center - Center-align

http://www.w3schools.com/tags/att_table_rules.asp

http://www.w3schools.com/tags/att_table_summary.asp

http://www.w3schools.com/tags/att_table_width.asp



Example

<html>

<body>

<p>Table with default alignment:</p>

<table border="1" >

<tr>

<td>Test1</td>

<td>Test2</td>

</tr>

</table>

<p>Table with right alignment:</p>

<table align="right" border="1" width="50%">

<tr>

<td>Test1</td>

<td>Test2</td>

</tr>

</table>

</body>

</html>

OUTPUT



Note

Width=50% specifies the width of the screen.(50% of the screen)

2.<bgcolor>

The bgcolor attribute specifies the background color of the table element

Syntax

<table bgcolor="color">

Some table data

</table>


color Optional. Specifies the background color of the table.

Possible values:

Color name - like "red"

Hex number - like "#ff0000



Example

<html>

<body>

<table bgcolor="green" border="1" width="50%">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

</body>

</html>

OUTPUT

3.BORDER

The border attribute specifies the width of the table border.

Tip: Set border="0" to display tables with no borders.



Syntax

<table border="pixels">

Some table data

</table>


pixels Optional. Specifies the border width of the table in pixels

Example 1

<html>

<body>

<table border="1" width="50%">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

</table>

</body>

</html>

OUTPUT



Example 2

<html>

<body>


<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

</table>

</body>

</html>

OUTPUT

4. cellpadding

The cellpadding attribute specifies the space between the table cell content and the table cell edges.

Syntax

<table cellpadding="pixels">

Some table data

</table>


pixels Optional. Specifies the cell padding in pixels



Example

<html>

<body>

Table without cellpadding:


<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

</table>

Table with cellpadding:

<table border="1" width="50%" cellpadding="50">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

</table>

</body>

</html>

OUTPUT



5.cellspacing

The cellspacing attribute specifies the space between the table cell edges and the table edge.

Syntax

<table cellspacing="pixels">

Some table data

</table>


pixels Optional. Specifies the cell padding in pixels

Example

<html>

<body>

Table without cellspacing:


<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

</table>



Table with cellspacing:

<table border="1" width="50%" cellspacing="15">

<tr>

<td>row1col1</td>

<td>row1col1<td>

</tr>

</table>

</body>

</html>

OUTPUT

6.frame

The frame attribute specifies which sides of the table border should be visible.

Syntax

<table frame="frame">

Some table data

</table>


http://www.w3schools.com/tags/att_table_frame.asp



frame Optional. Specifies the how the table border should be displayed.

Possible values:

void - (default) no sides

above - top side only

below - bottom side only

hsides - top and bottom sides only

vsides - left and right sides only

lhs - left-hand side only

rhs - right-hand side only

box - all four sides

border - all four sides

Example

<html>

<body>

<p>Different browsers display the frame attribute differently:</p>

<p>Table with no frame set:</p>

<table width="50%">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>



<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with frame set to above:</p>

<table width="50%" frame="above">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with frame set to below:</p>

<table width="50%" frame="below">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>



<td>row2col2</td>

</tr>

</table>

<p>Table with frame set to hsides:</p>

<table width="50%" frame="hsides">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with frame set to vsides:</p>

<table width="50%" frame="vsides">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>



</table>

<p>Table with frame set to lhs:</p>

<table width="50%" frame="lhs">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with frame set to rhs:</p>

<table width="50%" frame="rhs">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>



<p>Table with frame set to box:</p>

<table width="50%" frame="box">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with frame set to border:</p>

<table width="50%" frame="border">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

</body>



</html>

OUTPUT:



7.rules

The rules attribute specifies horizontal/vertical divider lines in the table.

For practical reasons, it may be better to not specify any rules



Syntax

<table rules="rules">

Some table data

</table>


rules Optional. Specifies the divider lines.

Possible values:

none - default. No rules

groups - rules between row groups and column groups only

rows - rules between rows only

cols - rules between columns only

all - rules between all rows and columns

8.summary

The summary attribute should be a description of the table.

This attribute is used when the user for some reason cannot see the table. This is mostly for users with

non-visual browsers.

Syntax

<table summary="text">

Some table data

</table>


text Optional. A description of the table.



Example

html>

<body>

<table border="1" width="50%" summary="Table is used as an example for W3Schools.com">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

</body>

</html>

OUTPUT

9.width

The width attribute specifies the width of the table.

Syntax



<table width="length">

Some table data

</table>


pixels Optional. Specifies width of the table.

If this attribute is not set, the table takes the space needed to display the table data.

Possible values:

pixels - length in pixels (like "100")

percent - length in percent of surrounding element (like "20%")

Example

<html>

<body>

Table without width specified:

<table border="1">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

</table>

Table with width specified at 50%:


<tr>

<td>row1col1</td>

<td>row1col2</td>



</tr>

</table>

Table with width specified at 200 pixels:

<table border="1" width="200">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

</table>

</body>

</html>

OUTPUT

Example

html>

<body>

<p>Different browsers display the rules attribute differently:</p>

<p>Table with no rules set:</p>

<table width="50%">

<tr>



<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with rules between rows:</p>

<table width="50%" rules="rows">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with rules between columns:</p>

<table width="50%" rules="cols">

<tr>

<td>row1col1</td>

<td>row1col2</td></tr>

<tr>



<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

<p>Table with rules between all rows and columns:</p>

<table width="50%" rules="all">

<tr>

<td>row1col1</td>

<td>row1col2</td>

</tr>

<tr>

<td>row2col1</td>

<td>row2col2</td>

</tr>

</table>

</body>

</html>

OUTPUT



ColSpan and rowSpan

colspan - The number of columns the cell spans

rowspan - The number of rows the cell spans

<html>

<head><title>Rowspan and Colspan</title> </head>

<body>

<table border="5"><caption>COSC 400 Student Grades</caption>

<td> </td><td> </td><th colspan="2">Grades</th>

</tr>

<tr>

<td> </td><th>Student</th><th>Exam 1</th><th>Exam2</th>



</tr>

<tr>

<th rowspan="2">Undergraduates</th><td>Kim</td><td>100</td><td>89</td>

</tr>

<tr>

<td>Sandy</td><td>78</td><td>92</td>

</tr>

<tr>

<th>Graduates</th><td>Taylor</td><td>83</td><td>73</td>

</tr>

</table>

</body>

</html>

OUTPUT

1.19 Frames



A method for dividing the browser window into smaller subwindows.

Each sub-window displaying a different HTML document.

With frames, you can display more than one HTML document in the same browser window.

Each HTML document is called a frame, and each frame is independent of the others.

The disadvantages of using frames are:

The web developer must keep track of more HTML documents

It is difficult to print the entire page

Frameset Element

It defines collection of frames.The frameset element holds two or more frame elements. Each

frame element holds a separate document.

The frameset element states only HOW MANY columns or rows there will be in the frameset.

Syntax


cols No of pixels,

%,

*

Specifies the number and size of columns in a frameset

rows pixels

%

*

Specifies the number and size of rows in a frameset

Note

% - specifies percentage of total area

*-relative values based on available space.

Example

<html>

<frameset rows="25%,*,25%">

<frame src="frame_a.htm" />

<FRAMESET>...</FRAMESET>



<frame src="frame_b.htm" />

<frame src="frame_c.htm" />

</frameset>

</html>

In this example there are 3 rows the first specifies the 25% of the total area for top frame and 25% of

the total area for bottom frame.

<frame>

Define a single frame within a frameset.

Attributes

<noframe> ….</noframe>

It specifies the contents to be displayed by browser that cannot display frames.

It is ignored by the browser that support frames.

Example

<html>

<head><title> A document with frames</title></head>

<frameset cols="*,*">

<frame src="left.html">

<frame src="right.html">

</frameset>

<noframes>

Browser does not support frames>

</noframes>

Attributes Description

Frameborder 1|0 1 specifies there is a border or 0 means no border

Src URL

Scrolling Yes|no|auto

Yes-scroll bar will be available

No-scroll bar will not be displayed

Auto-It specifies if the scroll bar is required it is displayed otherwise it

is not.

Marginwidth Number (left and right margin)

MarginHeight Number (Top and bottom Margin)

Name Text



</html>



Example 2

<html>

<head><title>second example</title></head>

<frameset cols="100,2*,*">

<frame src="left.html">

<frame src="right.html">

</frameset>

<noframes>

Browser does not support frames>

</noframes>

</html>

OUTPUT



In the above example there are three frames,the first frame contain 100 pixels and the second frame and

third frame are relative,depends upon the available space the second frame is twice the first one.

Nested Frames

Linking a framed Document

When a hyperlink is clicked,by default the new page is loaded into the same frame.

We can load the linked page into a new frame also.

Assign a name to the target frame

Specify this frame in a hyperlink as follows:

<ahref=”newpage.htm” target=”abc”>…</a>



The document newpage.html will load into the frame names “abc”.

1.20 Forms

A HTML form is used to input data on a

web page.

Example

HTML Tags Allowable in a form

Tag Type Purpose

<FORM> Container Denotes the start of a form

<INPUT> Stand-alone Specifies a user input field

<OPTION> Stand-alone Defines a form menu option

<SELECT> Container Contains options in a form menu

<frame src=”somepage.html” name=”abc”>



<TEXTAREA> Container Establishes a window for multiline text input.

The <form> tag is used to create an HTML form:

Syntax

<form> includes attributes which specify where and how to deliver filled-up information to the web

server.

Two main attributes

METHOD

ACTON

METHOD

It indicates how the information in the form will be sent to the web server when the form is submitted.

Two possible values

POST: It causes a form‟s contents to be parsed one element at a time.

GET:It concatenates all field names and values in a single large string.

ACTION :

It specifies the address of a program and the cgiscript where the content should go

The specified program is executed on the server,when the form is submitted.

o Output sent back to the browser.

Usage of METHOD and POST

<form> Input elements </form>



FORM ELEMENTS

<FORM METHOD=”POST”

ACTION =”http://www.mydomain.com/test.cgi”?>

……..

……..

</FORM>



1.INPUT

Attributes of INPUT tag is

(i) TYPE (ii)NAME (iii)SIZE(iv)MAXLENGTH(iv) VALUE(v) SRC (vi) ALIGN

TYPE

It defines the kind of element that is to be displayed in the form

(i)TEXT (ii)RADIO (iii)

CHECKBOX(iv)PASSWORD(v)HIDDEN(vi)IMAGE(vii)SUBMIT(viii)RESET

ELEMENT DESCRIPTION

TEXT It defines a textbox,which provides a single line area for entering text.

RADIO It is used,when a choice must be made among several alternatives.

(clicking on one of the buttons turns off all others in the same group).

CHECKBOX It is similar to the radio buttons,but each box here can be selected independently of

the others.

PASSWORD It is similar to textbox,but characters are not shown as they are typed

HIDDEN It is used for output only.It cannot be modified.

IMAGE It is used for active maps.when the user clicks on the image,the (x,y) coordinates

are stored in variables,and are returned for further processing.

SUBMIT It creates a box labeled Submit.If it is clicked,the form data are passed on to the

designated CGI script.

RESET It creates a box labeled Reset,if clicked,clears a form‟s contents.

(ii)NAME

It specifies a name for the input field.

(iii)SIZE

It defines the number of characters that can be displayed in a TEXT box without scrolling.



(iv)MAXLENGTH

It defines the maximum number of characters a TEXTBOX can contain.

(v) VALUE

It is used to submit a default value for a TEXT or HIDDEN field.

It can be used to specify the label of a button

(v)SRC

It provides a pointer to an image

It is used for clickable maps.

(vi)ALIGN

It is used for aligning image types

ALIGN=TOP|MIDDLE|BOTTOM

Example for Textbox and Submit

<html>

<body>

<form name="input" action="html_form_action.asp" method="get">

First name: <input type="text" name="FirstName" value="Mickey" /><br />

Last name: <input type="text" name="LastName" value="Mouse" /><br />

<input type="submit" value="Submit" />

</form>

<p>If you click the "Submit" button, the form-data will be sent to a page called

"html_form_action.asp".</p>

</body>

</html>



OUTPUT

First name: Mickey

Last name: Mouse

Submit

If you click the "Submit" button, the form-data will be sent to a page called "html_form_action.asp".

Example for Displaying password

html>

<body>

<form>

Password: <input type="password" name="pwd" size="20" />

</form>

<p>

Notice that the browser displays asterisks or bullets instead of characters in a password field.

</p>

</body>

</html>

OUTPUT



Radio Buttons

<input type="radio" /> defines a radio button. Radio buttons let a user select ONLY ONE one of a

limited number of choices:

<form>

<input type="radio" name="sex" value="male" /> Male<br />

<input type="radio" name="sex" value="female" /> Female

</form>

The above HTML code looks in a browser:

Male

Female

Checkboxes

<input type="checkbox" /> defines a checkbox. Checkboxes let a user select ONE or MORE options of

a limited number of choices.

<form>

<input type="checkbox" name="vehicle" value="Bike" /> I have a bike<br />

<input type="checkbox" name="vehicle" value="Car" /> I have a car

</form>

The above HTML code looks in a browser:

I have a bike

I have a car

3.SELECT

It is used along with the tag <OPTION>. The <option> tags inside the select element define the

available options in the list.

The list appears as a scrollable menu or a pop-up menu.

It is used to create drop –down list.



Syntax

Attributes are

1.NAME :name of the field

2.SIZE:specifies the number of option elements that will be displayed at a time on the menu.(If actual

number exceeds SIZE,a scrollbar will appear).Default is 1

3.MULTIPLE :It can be used to specify that more than one item from the list can be selected. This

must be used in the format multiple="multiple"

Note :By default there is single selection.

Example

<SELECT NAME=name>

OPTION elements

</SELECT

<html>

<head>

<title> My Page </title>

</head>

<body>

<form name="myform">

Languages known:<br>

<select name="lang" SIZE=3 multiple="multiple">

<option value="english">English</option>

<option value="tamil">Tamil</option>

<option value="French">French</option>

<option value="hindi">Hindi</option>

</select>

</form></body> </html>



OUTPUT

4.TEXTAREA

It can be used to accommodate multiple text lines in a box.

ATTRIBUTES are

(i)NAME : name of the field.

(ii)ROWS: number of lines of text that can fit into the box.

(iii)COLS: width of the text area on the screen.

Example

<html>

<body>

<p>

This example cannot be edited

because our editor uses a textarea

for input,and your browser does not allow a textarea inside a textarea.

</p>

<textarea rows="10" cols="30">

WWW is the service of the Internet.

</textarea></body></html>



OUTPUT



Example

<HTML>

<HEAD>

<TITLE>Using HTML Forms</TITLE>

</HEAD>

<CENTER><H3>Student Registration Form</h3>

</CENTER>

Please fill up the form below and press DONE when done.

<FORM METHOD="POST" ACTION="/cgi/feedback">

<P> Name:<INPUT Name="student name" TYPE="TEXT" SIZE="30" MAXLENGTH="50">

<P> Roll Number:<INPUT NAME ="rollno" TYPE="TEXT" SIZE="7">

<P> Course Numbers: <INPUT NAME="course1" TYPE="TEXT" size="6">

<INPUT NAME="course2" TYPE="TEXT" size="6"> <INPUT NAME="course3" TYPE="TEXT"

size="6"><P> Category:SC <INPUT NAME="category" TYPE=RADIO>

BC <INPUT NAME="category" TYPE=RADIO>

GE <INPUT NAME="category" TYPE=RADIO>

<P> Mother tongue:<SELECT NAME="mtongue" SIZE="3">

<option>Hindi </option>

<option>Tamil </option>

<option>English </option>

<option>Malayalam</option>

<option>telugu </option>

</SELECT>



<

<P> Languages Known:

English <INPUT NAME="lang" TYPE=CHECKBOX>

Hindi<INPUT NAME="lang" TYPE=CHECKBOX>

<p>Scholarship holder(select for yes);

<INPUT NAME="scholar" TYPE=CHECKBOX>

<p>General feedback:

<TEXTAREA NAME="feed" ROWS=3 COLS=20>

</TEXTAREA>

<P><P> Thanks for the information

<P><INPUT TYPE="SUBMIT" VALUE="DONE">

<INPUT TYPE="RESET" VALUE="CLEAR FORM">

</FORM>

</BODY>

</HTML>



OUTPUT

1.21 XML Creating HTML Documents

XML (Extensible Markup Language).It is a set of rules for defining semantic tags that break a

document into parts and identify the different parts of the document.

1.21.1 What is XML?

XML stands for EXtensible Markup Language.It is platform independent and standardized

XML is a markup language much like HTML

XML was designed to carry data, not to display data (to manipulate data)

XML tags are not predefined. You must define your own tags



XML is designed to be self-descriptive (meta data is embedded)

It is simple standard for data interchange.

XML is a W3C Recommendation

The Difference Between XML and HTML

XML HTML

XML has no predefined elements HTML has predefined elements

It stores and carries information (Data

Exchange)

It is used for displaying information

In XML is plain text In HTML document not only plain text

In XML,white spaces are preserved HTML leading and trailing spaces are Truncated

<XML>

<SONG>

<TITLE>Indian Classical</TITLE>

<COMPOSER>Hariharan</COMPOSER>

<COMPOSER>Ravishankar</COMPOSER>

<PRODUCER>Rajesh</PRODUCER>

<PUBLISHER>T-Series</PUBLISHER>

<LENGTH>6:20</LENGTH>

<YEAR>2002</YEAR>

<ARTIST>Village People</ARTIST>

</SONG>

</XML>

<HTML>

<body>

<dt>Indian Classical </dt>

<dd> by HariHaran , Ravi shankar </dd>

<ul>

<li>Producer: Rajesh

<li>Publisher: T-Series Records

<li>Length: 6:20

<li>Written: 2002

<li>Artist: Village People

</ul>

<body>

</html>



Advantages of XML

1.Domain –Specific markup language.

2.Data Integration from different sources

3.Self describing data

4.Local computation and manipulation

5.Multiple view of data.

1.Domain –Specific markup language

XML allows various domains to develop their own specific markup language. This helps the

individuals available in that domain to create information.

Eg: Domain specific markup language like chemical markup language, Mathematical markup language

can be created with tags related to that domain.

2.Data Integration from different sources

XML enables structured data from different sources to be easily combined. Software agents can be

used to integrate data on a middle-tier server from back end databases and other applications.

3.Self-Describing Data

The tag itself describes the content about the XML file.

4.Local Computation and Manipulation

After being delivered to the client,data in XML format can be parsed,edited locally and manipulated

with computations performed by client applications.

5.Multiple Views of Data

Once data has been delivered to the client,it can be viewed in different ways.

<person id=”P100” SEX=”F”

<Name>

<firstname>Manish</firstname>

<lastname>Aarvinth</lastname>

</Name>

<Birth>

<date>08 Sep 1999</date>

</Birth>

</person>



Structure of a XML document

An XML document consists of :

Prolog

Elements

Attributes

Entity references

Comments

Element type: name and content of elements

Attribute list: attributes of an element

Entity: define meaning of, e.g., >

1.21. 2 XML Element Type Declaration

Element Type Declarations are used to specify the set of all valid elements in the language defined

by the DTD.

Content Specification

The information following the element type name is known as the Content Specification.



From the Above table the Specification Types are

1.Empty

Syntax :EMPTY

Example

In the above example br is the element name and EMPTY is the Content Specification

2.Sequence

Syntax:

(element1,element2,….)

Example

In the above example html is Element name,(head,body) is the Content Specification.

In this the Content Specification is head and body ,the body should be followed by head

3.Choice

Syntax

(element1|element2|…)

Example

One of the specified elements must appear.

4.Character data

Syntax

(#PCDATA)

Example



Content Specification Iteration character

Example

Element type declaration for table

Child elements of table are

-Optional Caption followed by

-Any number of col elements or any number of colgroup elements then

-Optional header followed by optional footer then

-one or more tbody elements or one or more tr elements.

Attribute List Declaration

Attributes are declared for specific element type.

Attribute declaration identify which elements may have attributes,what attributes they may

have,what values the attributes may hold and its default value.

An attribute list declaration begins with the keyword ATTLIST followed by an element

typename and specifies the names for all attributes of the named element,the type of data and

default value information.

Syntax:

<!ATTLIST elementname attributename type default usage>



Example

Attribute Type



Default Value

1.21.3 Entity Declaration

Entities as variables used to define shortcuts to common text.

Entity references are references to entities.

Entities can be declared internal.

Entities can be declared external

Types of Entity (i)General Entity (ii)Parameter Entity

(i)General Entity referenced from HTML document defined by DTD and by using &

(ii)Parameter Entity reference from DTD and not from HTML documents by using %

General Entity

Internal Entity Declaration

Syntax

Example

Using “&WT;” anywhere in the document inserts the “Web Technology” in that place.

Internal entity allow to define shortcuts for frequently typed text

<!ENTITY name "entity_value">

<!ENTITY WT “Web Technology “>



There are 5 predefined entity references in XML:

PreDefined Entittes Description How to declare this entities in DTD

&lt < less than <!ENTITY lt "<">

&gt >greater than <!ENTITY gt ">">

&amp & ampersand <!ENTITY amp "&">

&apos „ apostrophe <!ENTITY apos "'">

&quot “quotation mark <!ENTITY quot """>

External Entity

It allow a XML document to refer to an external file.

External Entity contain either a text or binary data.

If they contain text,the content of an external file is inserted at that point of reference and parsed

as part of the referring document.

“&EE1;” will insert the content of cardetails.xml at the location it has called by processing it.

Parameter Entity

It can occur only in the document type declarations.A Parameter Entity is identified by placing %

infront of its name in the declaration.

The percent sign is also used in references to parameter entities, instead of the ampersand.

Parameter entity references are immediately expanded in the document type declaration and

their replacement text is part of the declaration, whereas normal entity references are not

expanded. Parameter entities are not recognized in the body of a document

<! ENTITY EE1 “/Cardetails.Xml”>

<! ENTITY EE2 “/logo.gif”>



Example

1.21.4 DTD Files

DTD allows a document to send meta information to the parser about its contents.

• DTD document contains element type, attribute list, and entity declarations

• It may also contain declaration of external entities: identifiers for secondary DTD documents



DOCTYPE – It is the system identifier for the DTD.

The string following the PUBLIC keyword is called as formal public identifier for DTD.

The following string is the URL where the DTD file is located.

Xhtml1-strict.dtd

Example

Books.xml

Use Books.xml in HTML

<?xml version=”1.0”?>

<Books>

<Book>

<Title> WebTechnology </Title>

<Author> Jefferey </Author>

<price> Rs.450</price>

<ISBN_No>12345</ISBN_No>

<Publishers>Pearson</Publisher>

</Book>

<Book>

<Title> Cryptography and Network Security </Title>

<Author> William Stallings </Author>

<price> Rs.400</price>

<ISBN_No>13245</ISBN_No>

<Publishers>Pearson</Publisher>

</Book>

</Books>



<html>

<head>

<Title> XML data</title>

</head>

<Body>

<xml id="BooksCatalogue" src="books.xml"></xml>

<Table border="1" datasrc="#BooksCatalogue">

<Thead>

<tr>

<th>Book title</th>

<th>Author</th>

<th>Price</th>

<th>ISBN</th>

<th>Publishers</th>

</tr>

</Thead>

<Tfoot>

<tr>

<th colspan="5"> "Book Details"</th>

</tr>

</Tfoot>

<tr>

<td><Div datafld="Title"></Div></td>

<td><Div datafld="Author"></Div></td>

<td><Div datafld="price"></Div></td>

<td><Div datafld="ISBN_No"></Div></td>

<td><Div datafld="Publishers"></Div></td>

</tr>

</Table>

</body>

</Html>