webtechnology study materials
DESCRIPTION
lab materials for web technology and also the study material for web technology for master of engineering students.TRANSCRIPT
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 2
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.
.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 3
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 4
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 5
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 6
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 7
• 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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 8
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 9
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 10
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 11
Internet Services
• 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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 12
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 13
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 14
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)
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 15
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 16
• 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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 17
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 18
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 19
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 20
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 21
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 22
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 23
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 24
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 25
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 26
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 27
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 28
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)
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 29
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 30
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 31
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 32
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 33
Secure Servers(Man-in-the-Middle Attack)
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 34
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 35
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).
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 36
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 37
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" />
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 38
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:
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 39
<!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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 40
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 41
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:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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:
<?xml version="1.0" encoding="UTF-8"?>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 42
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>
HelloWorldWhiteSpace.html
</title>
</head>
<body>
<p>
Hello World!
This is my second HTML paragraph.
</p>
</body>
</html>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 43
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 44
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 45
• 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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 46
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 47
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”>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 48
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 49
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 50
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 51
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.
TAG SYNTAX DESCRIPTION ATTRIBUTES
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
TAG SYNTAX DESCRIPTION ATTRIBUTES
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 52
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 53
. 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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 54
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 55
Output
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 56
Example 3
OUTPUT
<html>
<head><title>Paragraph Aligning</title></head>
<body text="white" bgcolor="blue">
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 57
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 58
Example 5
<html>
<head><title>Superscript and Subscript </title></head>
<body text="white" bgcolor="blue">
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 59
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 60
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 61
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 62
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 63
OUTPUT
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 64
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 65
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 66
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 67
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 68
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 69
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 70
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:
<!-- This is a comment -->
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 71
<!--This comment will not be displayed-->
<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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 72
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=”..”/>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 73
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 74
• 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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 75
Syntax
<ol>
<li>….</li>
<li> …..</li>
<li>……</li>
</ol>
Attribute Value Description
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 76
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 77
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 78
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 79
<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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 80
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 81
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 82
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>
Attribute Value Description
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 83
</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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 84
<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:
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 85
<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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 86
1.18 HTML Tables
Tables are made up of cells,arranged into rows.Use tags <table>,<tr>,<td>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 87
TAG SYNTAX DESCRIPTION ATTRIBUTES
TABLE <TABLE>…..</TABLE> Defines a table 1.ALIGN
2.BORDER
3.BGCOLOR
4.CELLPADDING
5.CELLSPACING
6.COLS
7.FRAME
8.RULES
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 88
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 89
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 90
</table>
</body>
</html>
OUTPUT
Attributes of Table Tag
Attribute Value Description
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 91
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 92
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 93
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>
Parameter Description
color Optional. Specifies the background color of the table.
Possible values:
Color name - like "red"
Hex number - like "#ff0000
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 94
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 95
Syntax
<table border="pixels">
Some table data
</table>
Parameter Description
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 96
Example 2
<html>
<body>
<table border="5" width="50%">
<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>
Parameter Description
pixels Optional. Specifies the cell padding in pixels
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 97
Example
<html>
<body>
Table without cellpadding:
<table border="1" width="50%">
<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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 98
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>
Parameter Description
pixels Optional. Specifies the cell padding in pixels
Example
<html>
<body>
Table without cellspacing:
<table border="1" width="50%">
<tr>
<td>row1col1</td>
<td>row1col2</td>
</tr>
</table>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 99
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>
Parameter Description
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 100
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 101
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 102
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 103
</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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 104
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 105
</html>
OUTPUT:
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 106
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 107
Syntax
<table rules="rules">
Some table data
</table>
Parameter Description
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>
Parameter Description
text Optional. A description of the table.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 108
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 109
<table width="length">
Some table data
</table>
Parameter Description
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%:
<table border="1" width="50%">
<tr>
<td>row1col1</td>
<td>row1col2</td>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 110
</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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 111
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 112
<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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 113
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 114
</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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 115
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
Attribute Value Description
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 116
<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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 117
</html>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 118
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 119
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 120
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”>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 121
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 122
FORM ELEMENTS
<FORM METHOD=”POST”
ACTION =”http://www.mydomain.com/test.cgi”?>
……..
……..
</FORM>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 123
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 124
(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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 125
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 126
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 127
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 128
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 129
OUTPUT
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 130
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 131
<
<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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 132
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 133
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 134
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 135
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.
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 136
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 137
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 138
Example
Attribute Type
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 139
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 “>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 140
There are 5 predefined entity references in XML:
PreDefined Entittes Description How to declare this entities in DTD
< < less than <!ENTITY lt "&#60;">
> >greater than <!ENTITY gt ">">
& & ampersand <!ENTITY amp "&#38;">
&apos „ apostrophe <!ENTITY apos "'">
" “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”>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 141
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
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 142
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>
DMI College of Engineering IT/IT2353/WT
Prepared by Ms.M.Maheswari, Asst.Prof, Information Technology Page 143
<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>