Unit 1

Table of Contents
UNIT-1 .......................................................................................................................................................... 7
Web Essentials: Clients, Servers, and Communication ................................................................................ 7
Server: ....................................................................................................................................................... 7
Client:........................................................................................................................................................ 7
Web server: ............................................................................................................................................... 7
Web Page: ................................................................................................................................................. 7
Website: .................................................................................................................................................... 7
URL: ......................................................................................................................................................... 7
Client-server paradigm: ............................................................................................................................ 8
The Internet: .............................................................................................................................................. 8
Web Browsers: .......................................................................................................................................... 8
Web Server: .............................................................................................................................................. 8
Protocol: .................................................................................................................................................... 8
Internet Protocol / IP protocol / Basic IP protocol: ................................................................................... 9
TCP/IP................................................................................................................................................... 9
IMAP – Internet Message Access Protocol .............................................................................................. 9
MIME – Multimedia Internet Message Extension Protocol ..................................................................... 9
Internet Protocol (IP) Addresses: ............................................................................................................ 10
Hypertext Transfer Protocol (HTTP) ...................................................................................................... 10
Electronic Mail Protocols: ...................................................................................................................... 10
Interactive Mail Access Protocol (IMAP) .............................................................................................. 11
The disadvantage of POP .................................................................................................................... 11
The disadvantage of IMAP ................................................................................................................. 11
World Wide Web .................................................................................................................................... 11
- Domain names ..................................................................................................................................... 11
HTTP: ..................................................................................................................................................... 11
HTTP Transactions ............................................................................................................................. 12
HTTP Message: .................................................................................................................................. 13
HTML ..................................................................................................................................................... 18
HTML forms ........................................................................................................................................... 19
comments in HTML................................................................................................................................ 19
1
Difference between Client and Server ........................................................................................................ 19
Web Client .............................................................................................................................................. 19
Web Server.............................................................................................................................................. 19
Client v/s Server.......................................................................................................................................... 20
Difference between Web Browser and Web Server ................................................................................... 21
Web server .................................................................................................................................................. 23
Web Server Working .............................................................................................................................. 23
Web server Architecture ..................................................................................................................... 24
HTML Versus XHTML .............................................................................................................................. 25
XHTML? .................................................................................................................................................... 25
Why XHTML? ........................................................................................................................................ 25
Differences between XML and HTML ....................................................................................................... 25
Sample program of XHTML............................................................................................................... 25
HTML ......................................................................................................................................................... 26
Features of HTML .................................................................................................................................. 27
HTML Tags ................................................................................................................................................ 27
HTML elements .......................................................................................................................................... 27
HTML Attributes ........................................................................................................................................ 27
HTML Tags and Attributes ..................................................................................................................... 28
HTML Tags ............................................................................................................................................ 28
HTML Attributes .................................................................................................................................... 28
HTML Lists ................................................................................................................................................... 28
HTML Ordered List or Numbered List ..................................................................................................... 29
HTML Unordered List or Bulleted List ..................................................................................................... 30
HTML Description List or Definition List ................................................................................................. 30
HTML Nested List .................................................................................................................................... 31
HTML Table ................................................................................................................................................. 32
Common HTML Table tags ................................................................................................................ 33
HTML Table Heading addition .............................................................................................................. 34
HTML <frame> Tag ...................................................................................................................................... 35
Frameset ..................................................................................................................................................... 35
HTML frameset Attributes ...................................................................................................................... 35
HTML frameset Example ......................................................................................................................... 35
2
HTML Forms ................................................................................................................................................ 36
Example............................................................................................................................................. 36
The <form> Element ............................................................................................................................... 36
The <input> Element............................................................................................................................... 36
Text Fields ............................................................................................................................................... 37
Example............................................................................................................................................. 37
The <label> Element ............................................................................................................................... 37
Radio Buttons.......................................................................................................................................... 38
Example ............................................................................................................................................... 38
Checkboxes ............................................................................................................................................. 39
The Submit Button .................................................................................................................................. 39
XHTML Syntax/ XHTML abstract syntax ...................................................................................................... 40
DOCTYPE Declaration .............................................................................................................................. 40
Tags must be in lower case ................................................................................................................. 41
Closing Tags are mandatory ................................................................................................................ 41
Attribute Quotes ................................................................................................................................. 41
Attribute Minimization ....................................................................................................................... 42
The id Attribute ................................................................................................................................... 43
HTML Document ......................................................................................................................................... 44
Types of HTML ........................................................................................................................................ 45
Transitional ......................................................................................................................................... 45
Strict .................................................................................................................................................... 45
CSS Introduction.......................................................................................................................................... 45
Why Use CSS? ......................................................................................................................................... 45
CSS Example ........................................................................................................................................ 46
CSS Syntax and Selectors ............................................................................................................................ 46
CSS Syntax ........................................................................................................................................... 46
CSS Selectors ....................................................................................................................................... 47
Simple Selector ................................................................................................................................... 47
Combinators Selector: ........................................................................................................................ 48
Pseudo-classes Selector: ..................................................................................................................... 48
Pseudo Elements Selector................................................................................................................... 48
Attribute Selector Selector: ................................................................................................................ 48
3
CSS element selector .......................................................................................................................... 48
CSS id selector ......................................................................................................................................... 49
CSS class selector: ................................................................................................................................... 50
What is CSS?................................................................................................................................................ 52
Advantages of CSS................................................................................................................................... 52
CSS Box Model ............................................................................................................................................ 53
Width and Height of an Element ........................................................................................................ 53
Normal Flow Box Layout ............................................................................................................................. 54
Padding, Borders, Margins ...................................................................................................................... 54
Margin Collapse ...................................................................................................................................... 55
Display Property of HTML element ......................................................................................................... 55
block .................................................................................................................................................... 55
inline.................................................................................................................................................... 55
none .................................................................................................................................................... 56
inline-block .......................................................................................................................................... 56
list-item ............................................................................................................................................... 56
Beyond the Normal Flow layout/ Position of elements /other layouts ...................................................... 56
Positioning .............................................................................................................................................. 56
Static Positioning..................................................................................................................................... 56
Fixed Positioning ..................................................................................................................................... 57
Relative Positioning................................................................................................................................. 57
Absolute Positioning ............................................................................................................................... 57
Overlapping Elements ............................................................................................................................. 58
Table element properties like table Borders / Table CSS ........................................................................... 59
Collapse Borders ..................................................................................................................................... 59
Table Width and Height .......................................................................................................................... 60
CSS Layout ................................................................................................................................................... 60
CSS layout example ................................................................................................................................. 61
Body Page .................................................................................................................................................. 62
DHTML ........................................................................................................................................................ 63
Components of Dynamic HTML .............................................................................................................. 63
HTML 4.0 ............................................................................................................................................. 63
CSS ....................................................................................................................................................... 63
4
JavaScript ............................................................................................................................................ 64
DOM .................................................................................................................................................... 64
Uses of DHTML .................................................................................................................................... 64
Features of DHTML ............................................................................................................................. 64
Difference between HTML and DHTML .................................................................................................. 65
DHTML JavaScript ................................................................................................................................... 65
Document.write() Method ............................................................................................................. 66
JavaScript and HTML event ..................................................................................................................... 66
JavaScript and HTML DOM (DOCUMENT Object modal) ........................................................................ 68
CSS with JavaScript in DHTML ................................................................................................................. 70
DHTML CSS .................................................................................................................................................. 71
DHTML Events ......................................................................................................................................... 73
DHTML DOM ............................................................................................................................................... 77
Advantages of DHTML......................................................................................................................... 78
Disadvantages of DHTML .................................................................................................................... 78
CSS Lists ....................................................................................................................................................... 79
Unordered Lists: ...................................................................................................................................... 79
Ordered Lists: .......................................................................................................................................... 79
HTML Lists and CSS List Properties ............................................................................................................. 79
Different List Item Markers ................................................................................................................. 80
Example............................................................................................................................................. 80
CSS Tables ................................................................................................................................................... 80
XML - Documents ........................................................................................................................................ 81
XML Document Example ......................................................................................................................... 81
Document Prolog Section ................................................................................................................... 81
Document Elements Section ............................................................................................................... 82
XML Vocabulary / XML Document vocabulary ........................................................................................... 82
XSD or DTD .......................................................................................................................................... 82
XML Document Structure ....................................................................................................................... 83
XML Declaration .................................................................................................................................. 84
Document Type Declaration ........................................................................................................... 86
Document Body .................................................................................................................................. 89
XML Versions............................................................................................................................................... 89
5
Various XML Versions ..................................................................................................................... 90
WML ............................................................................................................................................................ 91
Diff between XML and WML: ...................................................................................................................... 91
WML Versions: ........................................................................................................................................ 91
WML Decks and Cards: ........................................................................................................................... 92
WML Program Structure: ........................................................................................................................ 92
6
UNIT-1
Web Essentials: Clients, Servers, and Communication

Server:
The software that distributes the information and the machine where the
information and software reside is called the server.
• provides requested service to client

• e.g., Web server sends requested Web page
Client:
The software that resides on the remote machine, communicates with the
server, fetches the information, processes it, and then displays it on the remote
machine is called the client. A Web Client is software that accesses a web server by sending an
HTTP request message and processing the resulting HTTP response.
• initiates contact with server (“speaks first”)

• typically requests service from server
• Web: client implemented in browser
Web server:
Software that delivers Web pages and other documents to browsers using the
HTTP protocol. A Web Server is software that accepts HTTP requests from web clients and returns an
appropriate resource in the HTTP response.
Web Page:
A web page is a document or resource of information that is suitable for the
World Wide Web and can be accessed through a web browser.
Website:
A collection of pages on the World Wide Web that are accessible from the
same URL and typically residing on the same server.
URL:
Uniform Resource Locator, the unique address which identifies a resource on the
Internet for routing purposes.
7
Client-server paradigm:
The Client-Server paradigm is the most prevalent model for distributed
computing protocols. It is the basis of all distributed computing paradigms at a
higher level of abstraction. It is service-oriented, and employs a request-response
protocol.
A server process, running on a server host, provides access to a service. A
client process, running on a client host, accesses the service via the server
process.The interaction of the process proceeds according to a protocol.
The primary idea of a client/server system is that you have a central repository
of information—some kind of data, often in a database—that you want to distribute
on demand to some set of people or machines.
The Internet:
• Medium for communication and interaction in inter connected network.
• Makes information constantly and instantly available to anyone with a
connection.
The internet is the world’s largest IP-based network. It is an amorphous
group of computers in many different countries on all seven continents that
talk to each other using the IP protocol.
Web Browsers:
• User agent for Web is called a
browser: o Internet Explorer
o Firefox
Web Server:
• Server for Web is called Web
server: o Apache (public
domain)
o MS Internet Information Server
Protocol:
A protocol is a precise set of rules defining how components communicate,
the format of addresses, how data is split into packets
Protocols are agreed formats for transmitting data between

devices. The protocol determines:
i. The error checking required
ii. Data compression method used
8
iii. The way the end of a message is signaled
iv. The way the device indicates that it has received the message
Internet Protocol / IP protocol / Basic IP protocol:

There are many protocols used by the Internet and the WWW:
o TCP/IP
o HTTP
o FTP
o Electronic mail protocols IMAP
o POP (Post Office Protocol version 3)
TCP/IP
The Internet uses two main protocols (developed by Vincent Cerf and Robert Kahn)
Transmission control protocol (TCP):Controls disassembly of message into packets
at the origin reassembles at the destination
Internet protocol (IP):Specifies the addressing details for each packet Each
packet is labelled with its origin and destination.
IMAP – Internet Message Access Protocol
MIME – Multimedia Internet Message Extension Protocol
9
Internet Protocol (IP) Addresses:
- Every node has a unique numeric address
- Form: 32-bit binary number
- New standard, IPv6, has 128 bits (1998)
- Organizations are assigned groups of IPs for their computers
Hypertext Transfer Protocol (HTTP)

• The hypertext transfer protocol (HTTP) was developed by Tim Berners-Lee
in 1991
• HTTP was designed to transfer pages between machines
• The client (or Web browser) makes a request for a given page and the Server
is responsible for finding it and returning it to the client
• The browser connects and requests a page from the server
• The server reads the page from the file system, sends it to the client and
terminates the connection.
Electronic Mail Protocols:

• Electronic mail uses the client/server model
• The organisation has an email server devoted to
handling email o Stores and forwards email
messages
• Individuals use email client software to read and send email
o (e.g. Microsoft Outlook, or Netscape Messenger)
• Simple Mail Transfer Protocol (SMTP)
o Specifies format of mail messages
10
• Post Office Protocol (POP) tells the email server to:
o Send mail to the user’s computer and delete it from the server
o Send mail to the user’s computer and do not delete it from
the server o Ask whether new mail has arrived.
Interactive Mail Access Protocol (IMAP)
Newer than POP, provides similar functions with additional features.
o e.g. can send specific messages to the client rather than all the
messages. A user can view email message headers and the
sender’s name before downloading the entire message.
Allows users to delete and search mailboxes held on the email server.
The disadvantage of POP:
You can only access messages from one PC.
The disadvantage of IMAP
Since email is stored on the email server, there is a need for more and more
expensive (high speed) storage space.
World Wide Web
comprises software (Web server and browser) and data (Web sites).
- Domain names
- Form: host-name. domain-names
- First domain is the smallest (Google)
- Last domain specifies the type of organization (.com)
- Fully qualified domain name - the host name and all of the domain names
- DNS servers - convert fully qualified domain names to IPs
HTTP:
Hypertext Transfer Protocol (HTTP) is the communication protocol
used by the Internet to transfer hypertext documents.
A protocol to transfer hypertext requests and information between
servers and browsers
Hypertext is text, displayed on a computer, with references (hyperlinks) to
11
other text that the reader can immediately follow, usually by a mouse HTTP is
behind every request for a web document or graph, every click of a hypertext link,
and every submission of a form.
HTTP specifies how clients request data, and how servers respond to
these requests.
The client makes a request for a given page and the server is responsible
for finding it and returning it to the client.
The browser connects and requests a page from the server.
The server reads the page from the file system and sends it to the client and
then terminates the connection
HTTP Transactions
12
HTTP Message:
HTTP message is the information transaction between the client and server.
Two types of HTTP Message:
1. Requests
a. Client to server
2. Responses
a. Server to client
Fields
· Request line or Response line
· General header
· Request header or Response header
· Entity header
13
· Entity body
HTTP Request Message:
Request Line:
• A request line has three parts, separated by
spaces o a method name
o the local path of the requested
resource o the version of HTTP being
used
• A typical request line is:
o GET /path/to/file/index.html HTTP/1.1
• Notes:
o GET is the most common HTTP method; it says "give me this
resource". Other methods include POST and HEAD. Method names are
always uppercase
o The path is the part of the URL after the host name, also called
the request URI o The HTTP version always takes the form
"HTTP/x.x", uppercase.
Request Header:
14
Response Message:
Response Line:
• A request line has three parts, separated by
spaces o the HTTP version,
o a response status code that gives the result of the
request, and o an English reason phrase describing the
status code
• Typical status lines are:
o HTTP/1.0 200 OK or
o HTTP/1.0 404 Not Found
• Notes:
o The HTTP version is in the same format as in the request line,
"HTTP/x.x".
15
o The status code is meant to be computer-readable; the reason phrase
is meant to be human-readable, and may vary.
HTTP Request Header:
16
EXAMPLE
HTTP Method:
• HTTP method is supplied in the request line and specifies the operation that
the client has requested.
Some common methods:
• Options
• Get
• Head
• Post
• Put
• Move
• Delete
Two methods that are mostly used are the GET and
POST: o GET for queries that can be safely repeated
o POST for operations that may have side effects (e.g. ordering a book from an on-
line store).
The GET Method
• It is used to retrieve information from a specified URI and is assumed to be
a safe, repeatable operation by browsers, caches and other HTTP aware components
• Operations have no side effects and GET requests can be re-issued
• For example, displaying the balance of a bank account has no effect on the
account and can be safely repeated.
• Most browsers will allow a user to refresh a page that resulted from a GET,
without displaying any kind of warning
• Proxies may automatically retry GET requests if they encounter a
temporary network connection problem.
• GET requests is that they can only supply data in the form of parameters
encoded in the URI (known as a Query String) – [downside]
Cannot be unused for uploading files or other operations that require large amounts
of data to be sent to the server.
17
The POST Method
• Used for operations that have side effects and cannot be safely repeated.
• For example, transferring money from one bank account to another has side
effects and should not be repeated without explicit approval by the user.
If you try to refresh a page in Internet Explorer that resulted from a POST, it displays
the following message to warn you that there may be side effects:
The POST request message has a content body that is normally

used to send parameters and data
• The IIS server returns two status codes in its response for a POST request
o The first is 100 Continue to indicate that it has successfully received
the POST
request
o The second is 200 OK after the request has been processed.
HTTP response status codes
• Informational (1xx)
• Successful (2xx)
• Redirection (3xx)
o 301: moved permanently
• Client error (4xx)
o 403 :
forbidden o
404: Not
found
• Server error (5xx)
o 503: Service unavailable
o 505: HTTP version not supported
HTML
Hypertext is ordinary text that has been designed with extra features such as formatting, images,
multimedia and links to other documents. Markup is the process of taking ordinary text and adding extra
18
symbols. Each of the symbols used for markup in HTML is a command that tells a browser how to
display the text. HTML is the technical term for the format used to create normal web pages.
HTML forms
An HTML form is used to allow a user to input data on a web page and the element used is form
element and its main attributes are action and method. Its format is
<form action = http://xyz.com method=”get”> </form>
comments in HTML
A comment in HTML, like comments in other computer languages, is something that is intended to be
read by the programmers but to be ignored by the software processing the document. A comment begins
with the string of characters again with no white space.
Difference between Client and Server

In this article, we will discuss the comparison between two important terms that are client and
server. The difference between both terms is sometimes tricky for students. This article is helpful
to students, as they face this topic as a question in their examination.
So, without more delay, let's start the topic.
Before jumping directly to the comparison, first, see a brief description of both terms.
Web Client
A client can be a device or a machine.
A client program runs on the local machine, requesting service from the server. A client program
is a finite program means that the service is started by the user and terminates when the service is
completed. For instance, web browser.
A client device is a machine that the end-user uses to access the web. Examples of clients are
smartphones, desktops, laptops, etc.
It is simple and less powerful and used for simple tasks. It has a basic hardware configuration.
Clients are categorized into thin client, fat client, and hybrid client. Thin client is lightweight and
relies on the resources of the host computer. A fat client (or thick client) lightly relies on the server
and provides rich functionality. A hybrid client is the combination of the characteristics of a thin
client and a thick client.
Web Server
A server is like a computer program, which is used to provide functionality to other programs. It
can be any computerized process called by a client to distribute the work and share the resources.
19
It receives and responds to requests made over a network. Server receives the request from the
client for a web document, and it sends the requested information to the client's computer.
A device can be both a client and a server at the same time, as an individual system has the ability
to provide resources and use them from another system in one go. In a single machine, there can
be multiple servers.
Server has high efficiency and performance. Simultaneous multiple-user login and request
processing are supported in servers. Some of the complex tasks like fulfilling client requests,
storing and processing large datasets, data analysis are common for servers.
There can be various types of servers: web server, application server, database server, cloud server,
file server, proxy server, mail server, and many more.
The basic difference between the client and server is that client relies on the services of the server,
whereas the server authorizes the client's requests and facilitates them with the requested services.
Servers can store and analyze the large data sets, whereas clients are not suited for such tasks.
Most of the servers are never turned off; they are always on. Switching off servers may be
disastrous for client systems that continuously request the services. Whereas the client systems can
be switch off without any fear.
Client v/s Server

Now, let's see the comparison chart between client and server. We are comparing both terms based
on some characteristics.
Based on Client Server
Basic Client relies on the services of server, and Server authorizes the client's requests and
functionality generates requests for various services. facilitates them with the requested services.
20
Configuration The configuration of client systems is simple. The configuration of the server is more
Their tasks are limited to generating requests. It complex and sophisticated. Server has
has a basic hardware configuration. advanced hardware configuration.
Efficiency The efficiency of client is limited. The performance of server is high, and they are
highly efficient.
Tasks The common tasks for client are simple and The complex tasks like fulfilling client
mostly include requesting services. requests, storing and processing large datasets,
data analysis are common for server.
Switch off The client systems can be switch off without Switching off servers may be disastrous for
any fear. client systems that continuously request the
services.
Login Support There can be single user logins. Server support multiple user login and request
processing simultaneously.
Examples Examples of clients are smartphones, desktops, Examples of servers are web servers, file
laptops, etc. servers, database servers, etc.
That's all about the article. Hope you find it informative, helpful and gain some knowledge about
the client, server, and the comparison between them.
Difference between Web Browser and Web Server

For International Network communication, we require a web browser and web servers.
Web browsers and servers play an important role in establishing the connection. The
client sends requests for web documents or services. The message that goes from the
web browser to the web server is known as an HTTP request. When the web server
receives the request, it searches its stores to find the appropriate page. If the web server
can locate the page, it parcels up to the HTML contained within (using some transport
layer protocol), addresses these parcels to the browser (using HTTP), and transmits
them back across the network. If the web server is unable to find the requested page, it
sends a page containing an error message (i.e. Error 404 – page not found) and it
parcels up to the dispatches that page to the browser. This message received by the web
browser by the server is called the HTTP response. The main differences between the
Web browser and web servers are:
21
S.
No. Parameters Web Browser Web Server
Web Browser is an Application

program that displays a World
wide web document. It usually A web server is a program or the
uses the internet service to access computer that provide services to
1. Basics the document. other programs called client.
The Web server accepts, approves,

The Web browser requests the and responds to the request made by
server for the web documents and the web browser for a web document
2. Function services. or service.
A web browser is a programme The web server is responsible for

that uses websites to search the connecting websites and web
3. Responsibility internet for information. browsers.
The web browser acts as an The web server is a software or a

interface between the server and system which maintain the web
the client and displays a web applications, generate response and
4. Interface document to the client. accept clients data.
Components of web server

Components of web browser architecture- hardware, operating
Components of architecture- a controller, client system software, and Web server
5. architecture program, and interpreters. software.
The web browser sends an HTTP

HTTP request request and gets an HTTP The web server gets HTTP requests
6. and response response. and sends HTTP responses.
There exist three types of processing

Processing Doesn’t exist any processing models for web servers i.e Process-
7. Model model for the web browser. based, Thread based, and Hybrid.
22
S.
No. Parameters Web Browser Web Server
Web browser stores the cookies Web servers provide an area to store
8. Storing data for different websites. and organize the pages of the website.
The web server can be a remote

machine placed on the other side of
your network or even on the other end
The web browser is installed on of the globe, or it is your very own
9. Installation the client’s computer. personal computer at home.
Examples of Web browsers are

Mozilla Firefox, Google Chrome, An example of a Web Server is
10. Examples and Internet Explorer. Apache Server.
Web server
is a computer where the web content is stored. Basically web server is used to host the web sites
but there exists other web servers also such as gaming, storage, FTP, email etc.
Web site is collection of web pages whileweb server is a software that respond to the request for web
resources.
Web Server Working

Web server respond to the client request in either of the following two ways:
• Sending the file to the client associated with the requested URL.
• Generating response by invoking a script and communicating with database
23
Key Points
• When client sends request for a web page, the web server search for the requested
page if requested page is found then it will send it to client with an HTTP response.
• If the requested web page is not found, web server will the send an HTTP
response:Error 404 Not found.
• If client has requested for some other resources then the web server will contact to
the application server and data store to construct the HTTP response.
Web server Architecture
Web Server Architecture follows the following two approaches:
1. Concurrent Approach
2. Single-Process-Event-Driven Approach.
Concurrent Approach
Concurrent approach allows the web server to handle multiple client requests at the same time. It
can be achieved by following methods:
• Multi-process
• Multi-threaded
• Hybrid method.
Multi-processing
In this a single process (parent process) initiates several single-threaded child processes and
distribute incoming requests to these child processes. Each of the child processes are responsible
for handling single request.
It is the responsibility of parent process to monitor the load and decide if processes should be killed
or forked.
24
Multi-threaded
Unlike Multi-process, it creates multiple single-threaded process.
Hybrid
It is combination of above two approaches. In this approach multiple process are created and each
process initiates multiple threads. Each of the threads handles one connection. Using multiple
threads in single process results in less load on system resources.
HTML Versus XHTML
XHTML?
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
Why XHTML?
XML is a markup language where all documents must be marked up correctly (be "well-formed").
XHTML was developed to make HTML more extensible and flexible to work with other data
formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to display the
website even if it has some errors in the markup. So XHTML comes with a much stricter error
handling.
Differences between XML and HTML

• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
Sample program of XHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
25
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Title of document</title>
</head>
<body>
some content here...
</body>
</html>
HTML
HTML is an acronym which stands for Hyper Text Markup Language which is used for creating
web pages and web applications. Let's see what is meant by Hypertext Markup Language, and
Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked on
a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each
other.
Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static
or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the help
of styling, and which looks in a nice format on a web browser. An HTML document is made of
many HTML tags and each HTML tag contains different content.
Let's see a simple example of HTML.
1. <!DOCTYPE>
2. <html>
3. <head>
4. <title>Web page title</title>
5. </head>
6. <body>
7. <h1>Write Your First Heading</h1>
26
8. <p>Write Your First Paragraph.</p>
9. </body>
10. </html>
Features of HTML
1) It is a very easy and simple language. It can be easily understood and modified.
2) It is very easy to make an effective presentation with HTML because it has a lot of formatting
tags.
3) It is a markup language, so it provides a flexible way to design web pages along with the text.
4) It facilitates programmers to add a link on the web pages (by html anchor tag), so it enhances
the interest of browsing of the user.
5) It is platform-independent because it can be displayed on any platform like Windows, Linux,

and Macintosh, etc.
6) It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
7) HTML is a case-insensitive language, which means we can use tags either in lower-case or
upper-case.
HTML Tags
Tags are the starting and ending parts of an HTML element. They begin with < symbol
and end with > symbol. Whatever written inside < and > are called tags.
e.g. <b> </b>
HTML elements
Elements enclose the contents in between the tags. They consist of some kind of
structure or expression. It generally consists of a start tag, content and an end tag.
Example: <b>This is the content.</b>
Where, <b> is the starting tag and </b> is the ending tag.
HTML Attributes
It is used to define the character of an HTML element. It always placed in the opening
tag of an element. It generally provides additional styling (attribute) to the element.
Example: <p align="center">This is paragraph.</p>
27
HTML Tags HTML Elements HTML Attributes
HTML attributes are used to

HTML tags are used to hold HTML element holds describe the characteristic of an
the HTML element. the content. HTML element in detail.
Whatever written
HTML tag starts with < and within a HTML tag are HTML attributes are found only
ends with > HTML elements. in the starting tag.
HTML tags are almost like

keywords where every HTML elements HTML attributes specify
single tag has unique specifies the general various additional properties to
meaning. content. the existing HTML element.
HTML Tags and Attributes

Tags and attributes are the basis of HTML.
They work together but perform different functions – it is worth investing 2 minutes in
differentiating the two.
HTML Tags
Tags are used to mark up the start of an HTML element and they are usually enclosed
in angle brackets. An example of a tag is: <h1>.
Most tags must be opened <h1> and closed </h1> in order to function.
HTML Attributes
Attributes contain additional pieces of information. Attributes take the form of an
opening tag and additional info is placed inside.
• An example of an attribute is:
<img src="mydog.jpg" alt="A photo of my dog.">
In this instance, the image source (src) and the alt text (alt) are attributes of the <img>
tag.
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:
28
1. Ordered List or Numbered List (ol)
2. Unordered List or Bulleted List (ul)
3. Description List or Definition List (dl)
Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dl> Defines a description list
<dt> Defines a term in a description list
<dd> Describes the term in a description list
HTML Ordered List or Numbered List
In the ordered HTML lists, all the list items are marked with numbers by default. It is known as
numbered list also. The ordered list starts with <ol> tag and the list items start with <li> tag.
1. <ol>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
29
5. <li>Oracle</li>
6. </ol>
Output:
1. Aries
2. Bingo
3. Leo
4. Oracle
HTML Unordered List or Bulleted List
In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list
also. The Unordered list starts with <ul> tag and list items start with the <li> tag.
1. <ul>
2. <li>Aries</li>
3. <li>Bingo</li>
4. <li>Leo</li>
5. <li>Oracle</li>
6. </ul>
Output:
o Aries
o Bingo
o Leo
o Oracle
HTML Description List or Definition List
HTML Description list is also a list style which is supported by HTML and XHTML. It is also
known as definition list where entries are listed like a dictionary or encyclopedia.
The definition list is very appropriate when you want to present glossary, list of terms or other
name-value list.
The HTML definition list contains following three tags:
30
1. <dl> tag defines the start of the list.
2. <dt> tag defines a term.
3. <dd> tag defines the term definition (description).
1. <dl>
2. <dt>Aries</dt>
3. <dd>-One of the 12 horoscope sign.</dd>
4. <dt>Bingo</dt>
5. <dd>-One of my evening snacks</dd>
6. <dt>Leo</dt>
7. <dd>-It is also an one of the 12 horoscope sign.</dd>
8. <dt>Oracle</dt>
9. <dd>-It is a multinational technology corporation.</dd>
10. </dl>
HTML Nested List
A list within another list is termed as nested list. If you want a bullet list inside a numbered list
then such type of list will called as nested list.
Code:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <title>Nested list</title>
5. </head>
6. <body>
7. <p>List of Indian States with thier capital</p>
8. <ol>
9. <li>Delhi
10. <ul>
11. <li>NewDelhi</li>
12. </ul>
13. </li>
31
14. <li>Haryana
15. <ul>
16. <li>Chandigarh</li>
17. </ul>
18. </li>
19. <li>Gujarat
20. <ul>
21. <li>Gandhinagar</li>
22. </ul>
23. </li>
24. <li>Rajasthan
25. <ul>
26. <li>Jaipur</li>
27. </ul>
28. </li>
29. <li>Maharashtra
30. <ul>
31. <li>Mumbai</li>
32. </ul>
33. </li>
34. <li>Uttarpradesh
35. <ul>
36. <li>Lucknow</li></ul>
37. </li>
38. </ol>
39. </body>
40. </html>
HTML Table
A table is a representation of data arranged in rows and columns.
Really, it's more like a spreadsheet. In HTML, with the help of tables,
32
you can arrange data like images, text, links and so on into rows and
columns of cells.
The use of tables in the web has become more popular recently
because of the amazing HTML table tags that make it easier to create
and design them.
To create a table in HTML you will need to use tags. The most
important one is the <table> tag which is the main container of the
table. It shows where the table will begin and where it ends.
Common HTML Table tags
• tr> - represents rows
• <td> - used to create data cells
• <th> - used to add table headings
• <caption> - used to insert captions
• <thead> - adds a separate header to the table
• <tbody> - shows the main body of the table
• <tfoot> - creates a separate footer for the table
Example of table
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6
33
HTML Table Heading addition
The <th> is used to add headings to tables. In basic designs the table
heading will always take the top row, meaning we will have
the <th> declared in our first table row followed by the actual data in
the table. By default the text passed in the Heading is centered and
Bold.
An example with use of
<th>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
</tr>
<tr>
<td>Hillary</td>
<td>Nyakundi</td>
<td>tables@mail.com</td>
</tr>
<tr>
<td>Lary</td>
<td>Mak</td>
<td>developer@mail.com</td>
</tr>
</table>
FIRST NAME LAST NAME EMAIL ADDRESS
Hillary Nyakundi tables@mail.com
Lary Mak developer@mail.com
From the example above, we are able to tell what column contains
which information. This is made possible with the use of <th> tag.
34
HTML <frame> Tag
The <frame> HTML element defines a particular area in which another HTML document
can be displayed. A frame should be used within a <frameset>.
Using the <frame> element is not encouraged because of certain disadvantages such as
performance problems and lack of accessibility for users with screen readers. Instead of
the <frame> element, <iframe> may be preferred.
<frameset cols="50%,50%">
<frame src="https://developer.mozilla.org/en/HTML/Element/iframe" />
<frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
</frameset>
Not Supported in HTML5.

The <frame> tag was used in HTML 4 to define one particular window (frame) within a <frameset>.
<iframe src="https://www.w3schools.com"></iframe>
Frameset
The <frameset> HTML element is used to contain <frame> elements.
HTML frameset Attributes
Like all other HTML elements, this element supports the global attributes.
cols
This attribute specifies the number and size of horizontal spaces in a frameset.
rows
This attribute specifies the number and size of vertical spaces in a frameset.
HTML frameset Example

<frameset cols="50%,50%">
<frame src="https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/frameset" />
<frame src="https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/frame" />
</frameset>
35
HTML Forms
An HTML form is used to collect user input. The user input is most often sent
to a server for processing.
Example
First name:
John
Last name:
Doe
Submit
The <form> Element
The HTML <form> element is used to create an HTML form for user input:
<form>
.
form elements
.
</form>
The <form> element is a container for different types of input elements, such as:
text fields, checkboxes, radio buttons, submit buttons, etc.
The <input> Element
The HTML <input> element is the most used form element.
An <input> element can be displayed in many ways, depending on

the type attribute.
Here are some examples:
Type Description
36
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting one of many choices)
<input Displays a checkbox (for selecting zero or more of many

type="checkbox"> choices)
<input type="submit"> Displays a submit button (for submitting the form)
<input type="button"> Displays a clickable button
Text Fields
The <input type="text"> defines a single-line input field for text input.
Example
A form with input fields for text:
<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname">
</form>
The <label> Element
Notice the use of the <label> element in the example above.
The <label> tag defines a label for many form elements.
37
The <label> element is useful for screen-reader users, because the screen-
reader will read out loud the label when the user focus on the input element.
The <label> element also help users who have difficulty clicking on very small
regions (such as radio buttons or checkboxes) - because when the user clicks
the text within the <label> element, it toggles the radio button/checkbox.
The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Radio Buttons
The <input type="radio"> defines a radio button.
Radio buttons let a user select ONE of a limited number of choices.
Example
A form with radio buttons:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="fav_language" value="JavaScrip
t">
<label for="javascript">JavaScript</label>
</form>
This is how the HTML code above will be displayed in a browser:
Choose your favorite Web language:
HTML
CSS
JavaScript
38
Checkboxes
The <input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of

choices.
Example
A form with checkboxes:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
This is how the HTML code above will be displayed in a browser:
I have a bike
I have a car
I have a boat
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a
form-handler.
The form-handler is typically a file on the server with a script for processing
input data.
The form-handler is specified in the form's action attribute.
Example
A form with a submit button:
<form action="/action_page.php">
<label for="fname">First name:</label><br>
39
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
XHTML Syntax/ XHTML abstract syntax
XHTML syntax is very similar to HTML syntax and all the valid HTML elements are also
valid in XHTML. But XHTML is case sensitive so you have to pay a bit extra attention while
writing an XHTML document to make your HTML document compliant to XHTML.
You must remember the following important points while writing a new XHTML document
or converting existing HTML document into XHTML document:
o All documents must have a DOCTYPE.

o All tags must be in lower case.
o All documents must be properly formed.
o All tags must be closed.
o All attributes must be added properly.
o The name attribute has changed.
o Attributes cannot be shortened.
o All tags must be properly nested.
DOCTYPE Declaration
All XHTML documents must contain a DOCTYPE declaration at the start. There are three
types of DOCTYPE declarations:
o Strict
o Transitional
o Frameset
Here is an example of using DOCTYPE.
1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
40
Tags must be in lower case
XHTML is case-sensitive markup language. So, all the XHTML tags and attributes must be
written in lower case.
1. 

2. <A Href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</A>
3. 
4. <a href="/xhtml/xhtml_tutorial.html">XHTML Tutorial</a>
Closing Tags are mandatory
An XHTML must have an equivalent closing tag. Even empty elements should also have
closing tags. Let's see an example:

2. <p>This paragraph is not written according to XHTML syntax.
4. <img src="/images/xhtml.gif" >
6. <p>This paragraph is not written according to XHTML syntax.</p>
7. 
8. <img src="/images/xhtml.gif" />
Attribute Quotes
All the XHTML attribute's values must be quoted. Otherwise, your XHTML document is
assumed as an invalid document.
See this example:

2. <img src="/images/xhtml.gif" width=250 height=50 />
4. <img src="/images/xhtml.gif" width="250" height="50" />
41
Attribute Minimization
XHTML doesn't allow you to minimize attributes. You have to explicitly state the attribute
and its value.
See this example:
1. 

2. <option selected>
3. 
4. <option selected="selected">
A list of minimized attributes in HTML and the way you need to write them in XHTML.
HTML Style XHTML Style
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
42
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
The id Attribute
The id attribute is used to replace the name attribute. Instead of using name = "name",
XHTML prefers to use id = "id".
See this example:

2. <img src="/images/xhtml.gif" name="xhtml_logo" />
4. <img src="/images/xhtml.gif" id="xhtml_logo" />
The language attribute
In XHTML, the language attribute of script tag is deprecated so you have to use type
attribute instead of this.
See this example:

2. <script language="JavaScript" type="text/JavaScript">
3. document.write("Hello XHTML!");
4. </script>
6. <script type="text/JavaScript">
7. document.write("Hello XHTML!");
8. </script>
43
Nested Tags
XHTML tags must be nested properly. Otherwise your document is assumed as an

incorrect XHTML document.
See this example:

2. <b><i> This text is bold and italic</b></i>
4. <b><i> This text is bold and italic</i></b>
Element Prohibitions
The following elements are not allowed to have any other element inside them. This is
applicable for all the descending elements.
Element Prohibition
<a> It must not contain other <a> elements.
<pre> It must not contain the <img>, <object>, <big>, <small>, <sub>, or <sup> elements.
<button> It must not contain the <input>, <select>, <textarea>, <label>, <button>, <form>, <fields
<isindex> elements.
<label> It must not contain other <label> elements.
<form> It must not contain other <form> elements.
HTML Document
An HTML document is a file containing hypertext markup language. HTML code is based
on tags, or hidden keywords, which provide instructions for formatting the document. A tag
starts with an angle bracket and the 'less than' sign: '<'. The tag ends with an angle bracket and
the 'greater than' sign '>'. Tags tell the processing program, often the web browser, what to do
with the text. For example, to make the word 'Hello' bold, you would use the opening bold tag
<b> and then the closing bold tag </b>, like this:
44
<b>Hello</b>
HTML is defined by the World Wide Web Consortium, an organization that regulates standards
for the Internet. Each version of HTML has a set of definitions. Note that HTML is not a
programming language. While we often refer to HTML markup as HTML code, programming
languages require the processing of logical statements and math. HTML allows the developer to
make text documents look engaging and pleasant. In most cases, programming on an HTML
document is done with JavaScript.
Types of HTML
The newest version of HTML, which is entering the industry, is HTML 5. HTML can be divided
into three categories: transitional, strict, and frameset. These types apply to how HTML is used,
not necessarily to the selection of tags.
Transitional
Transitional is the most common type of HTML. It has a flexible syntax, or grammar and
spelling component. Over the years, transitional HTML has been used without syntax
restrictions, and browsers support a 'best effort' approach to reading the tags. If tags are
misspelled, the browsers do not correct web developers' errors, and they display the content
anyway. Browsers do not report HTML errors - they simply display what they can. This is the
'best effort' concept.
Strict
The strict type of HTML is meant to return rules into HTML and make it more reliable. For
example, the strict type requires closing all tags for all opened tags. This style of HTML is
important on phones, where the processing power may be limited. A clean and error-free code
helps to load pages faster.
CSS Introduction
CSS is the language we use to style a Web page.
• CSS stands for Cascading Style Sheets

• CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
• CSS saves a lot of work. It can control the layout of multiple web pages
all at once
• External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
45
CSS Example
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Syntax and Selectors

CSS Syntax
A CSS Syntax rule consists of a selector, property, and its value. The selector
points to the HTML element where CSS style is to be applied. The CSS property
is separated by semicolons. It is a combination of selector name followed by the
property: value pair that is defined for the specific selector.
Syntax:
selector { Property: value; }
For instance, we have declared a heading tag(h1) along with having assigned
some property: value pair that is used to style the heading tag. Here, h1 is
selector, { color: green; font-family: sans-serif; } is a declaration block and it can
46
contain one or more declarations separated by semicolons, color: green; is
a property: value pair that is applied to the HTML element in order to style them.
h1 { color: green; font-family: sans-serif;}
Every declaration has a CSS property name and a value, separated by a colon
and is surrounded by curly braces. For declaring the multiple CSS properties, it
can be separated by the semicolon.
Example: This example illustrates the use of CSS Syntax for the styling of
HTML elements.
<!DOCTYPE html>
<html>
<head>

<style>
h1 {
color: green;
text-align: center;
</style>
</head>
<body>
<h1>Sample</h1>
</body>
</html>
CSS Selectors
A CSS Selectors are used to selecting HTML elements based on their element
name, id, attributes, etc. It can select one or more elements simultaneously.
CSS Selector can be divided into 5 categories:
Simple Selector
It is used to select the HTML elements based on their element name, id,
attributes, etc.
47
Combinators Selector:
It is used for explaining the relationship between two selectors.
Pseudo-classes Selector:
It is used to define the special state of an element.
Pseudo Elements Selector
It is a keyword added to a selector that lets you style a specific part of the selected
elements.
Attribute Selector Selector:
It is used to select an element with some specific attribute or attribute value.
We will focus ourselves to the Simple Selector and also understand its
implementation through the examples.
The Simple Selector can be categorized in 3 ways:
CSS element selector
The element selector in CSS is used to select HTML elements that are required
to be styled. In a selector declaration, there is the name of the HTML element,
and the CSS properties which are to be applied to that element are written inside
the brackets {}.
Syntax:
element_name {
// CSS Property
}
Example: This example illustrates the use of the element selector for selecting
the HTML elements by their element name & style them.
<!DOCTYPE html>
<html>
<head>

<style>
h1 {
color: green;
text-align: center;
48
</style>
</head>
<body>
<h1>Test234</h1>
</body>
</html>
CSS id selector
The #id selector is used to set the style of the given id. The id attribute is the
unique identifier in an HTML document. The id selector is used with a # character.
Syntax:
#id_name {
// CSS Property
}
Example: This example illustrates the use of the id selector for selecting the
HTML elements by their id and style them.
<!DOCTYPE html>
<html>
<head>

<style>
#heading {
color: green;
text-align: center;
font-size: 40px;
font-weight: bold;
49
</style>
</head>
<body>
<div id="heading"> GeeksforGeeks </div>
</body>
</html>
CSS class selector:

The .class selector is used to select all elements which belong to a particular
class attribute. To select the elements with a particular class, use (.) character
with specifying the class name. The class name is mostly used to set the CSS
property to the given class.
Syntax:
.class_name {
// CSS Property
}
Example: This example illustrates the use of the class selector for selecting the
HTML elements by their class & style them.
<!DOCTYPE html>
<html>
<head>

<style>
.heading {
color: green;
text-align: center;
font-size: 40px;
font-weight: bold;
50
}
</style>
</head>
<body>
<div class="heading"> GeeksforGeeks </div>
</body>
</html>
For applying the common CSS style properties to all the HTML Elements then we
can use the universal selector which is denoted by a star(*) symbol.
CSS * Selector: The * selector in CSS is used to select all the elements in an
HTML document. It also selects all elements which are inside under another
element. It is also called the universal selector.
Syntax:
* {
// CSS property
}
Example: This example illustrates the use of the universal selector for selecting
all the HTML elements that contain the common CSS properties & styles them.
<!DOCTYPE html>
<html>
<head>
<title>* Selector</title>

<style>
* {
color: green;
text-align: center;
51
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>*(Universal) Selector</h2>
<div>
<p>GFG</p>
<p>Geeks</p>
</div>
<p>It is a computer science portal for geeks.</p>
</body>
</html>
What is CSS?
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the
process of making web pages presentable. CSS handles the look and feel part of a web page. Using CSS,
you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns
are sized and laid out, what background images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides a powerful control over the presentation of an HTML
document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Advantages of CSS
CSS saves time - You can write CSS once and then reuse the same sheet in multiple HTML pages. You can
define a style for each HTML element and apply it to as many web pages as you want. • Pages load
faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS
rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times. •
Easy maintenance - To make a global change, simply change the style, and all the elements in all the web
pages will be updated automatically. • Superior styles to HTML - CSS has a much wider array of
attributes than HTML, so you can give a far better look to your HTML page in comparison to HTML
attributes. • Multiple Device Compatibility - Style sheets allow content to be optimized for more than
one type of device. By using the same HTML document, different versions of a website can be presented
for handheld devices such as PDAs and cellphones or for printing. • Global web standards – Now HTML
attributes are being deprecated and it is being recommended to use CSS. So it’s a good idea to start
using CSS in all the HTML pages to make them compatible with future browsers.
52
CSS Box Model
In CSS, the term "box model" is used when talking about design and layout.
The CSS box model is essentially a box that wraps around every HTML element.
It consists of: margins, borders, padding, and the actual content. The image
below illustrates the box model:
Explanation of the different parts:
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent
The box model allows us to add a border around elements, and to define space
between elements.
Example
Demonstration of the box model:
div {
width: 300px;
border: 15px solid green;
padding: 50px;
margin: 20px;
}
Width and Height of an Element
In order to set the width and height of an element correctly in all browsers, you
need to know how the box model works.
Important: When you set the width and height properties of an element with
CSS, you just set the width and height of the content area. To calculate the
full size of an element, you must also add padding, borders and margins.
Example
This <div> element will have a total width of 350px:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
53
margin: 0;
}
Try it Yourself »
Here is the calculation:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
The total width of an element should be calculated like this:
Total element width = width + left padding + right padding + left border + right
border + left margin + right margin
The total height of an element should be calculated like this:
Total element height = height + top padding + bottom padding + top border +
bottom border + top margin + bottom margin
Normal Flow Box Layout
Understanding the box model is critical to developing web pages that don't
rely on tables for layout. In the early days of writing HTML, before the advent of
CSS, using tables was the only way to have discreet content in separate boxes on a
page. But tables were originally conceived to display tabular information. With the
advent of CSS floating and positioning, there is no longer a need to use tables for
layout, though many years later many, if not most, sites are still using tables in this
manner.
The box model, as defined by the W3C "describes the rectangular boxes that
are generated for elements in the document tree and laid out according to the visual
formatting model". Don't be confused by the term "boxes". They need not appear as
square boxes on the page. The term simply refers to discreet containers for content.
In fact, every element in a document is considered to be a rectangular box.
Padding, Borders, Margins
54
Padding immediately surrounds the content, between content and borders. A
margin is the space outside of the borders. If there are no borders both paddng and
margin behave in roughly the same way, except that you can have negative margins,
while you cannot have negative padding. Also padding does not collapse like
margins. See below for the section on collapsing margins.
Margin Collapse
Vertical margins collapse when they meet. Though it may seem like a strange
thing, if you have assigned top and bottom margins to the P element of, say, 10px
each, you will not have 20px of margin between paragraphs, but rather 10px. This is
considered to be desirable and expected behavior, and not a bug. Now consider the
following declaration.
p {margin: 10px 0 16px;}
Display Property of HTML element
This is one of the most useful properties. The complete list of values is in the
appendix of this document, but the most useful ones follow.
block
Block display provides behavior similar to a default DIV element. A line

break occurs at the close of the tag. Elements that are block by default are DIV, P,
BLOCKQUOTE, H1 through H6, UL, OL, LI, ADDRESS, etc. Block elements
accept width, height, top and bottom margins, and top and bottom padding. A block
element constitutes a separate block box.
inline
Inline display creates no such line break. Elements that are inline by default
are SPAN, IMG, INPUT, SELECT, EM, STRONG, etc. Inline elements do not
accept width, height, top and bottom padding, and top and bottom margins, which
makes good sense, since they are used for part of a line of text (i.e. of a block box).
They do, however, accept left and right padding, left and right margins, and
line-height. Line-height can then be used to approximate height. If you need to apply
width, height or other block properties to an inline element, consider assigning the
element block display and/or floating it. Block display, of course, will force the
element on to a separate line (unless the element is floated). Alternatively you can
assign the inline-block value to make an inline element take block properties (see
below).
55
none
Display set to none sets the element to invisible similar to the hidden value of
the visibility property (see below). However, unlike the visibility property, this value
takes up no space on the page. This is very useful for DHTML hidden tools and for
other instances when you need items to expand and collapse based on whether they
contain content to be viewed on demand. Moreover, when you generate content,
items whose display is set to none will not be included in the loop. (For more on
generated content, see below.) Display set to none will also be hidden from most
screen readers. If you are trying to make something readable only for those with
sight disabilities, use an off-screen class like this:
.offScreen {position: absolute; left: -10000px; top: auto; width: 1px; height: 1px;
overflow: hidden;}
inline-block
This value causes the element to generate a block element box that will be
flowed with surrounding content as if it were a single inline box. It lets you place a
block inline with the content of its parent element. It also allows you to assign
properties associated with block display, such as width and height to an element that
naturally takes inline display. This property is also used to trigger hasLayout in IE6,
which is a difficult concept, but briefly means making IE6 assume CSS certain
properties.
list-item
Unordered lists are traditionally used to list bulleted items vertically. But you
can assign bullets to other elements using the list-item value
div {display: list-item;}
Beyond the Normal Flow layout/ Position of elements /other layouts

Positioning
The CSS positioning properties allow you to position an element. It can also
place an element behind another, and specify what should happen when an element's
content is too big.Elements can be positioned using the top, bottom, left, and right
properties. However, these properties will not work unless the position property is
set first. They also work differently depending on the positioning method.There are
four different positioning methods.
Static Positioning
56
HTML elements are positioned static by default. A static positioned element
is always positioned according to the normal flow of the page.Static positioned
elements are not affected by the top, bottom, left, and right properties.
Fixed Positioning
An element with fixed position is positioned relative to the browser window.It will
not move even if the window is scrolled
Relative Positioning
A relative positioned element is positioned relative to its normal position.
Exampl
e h2.pos
_lef t
{
position:rela
tiv e; left:-
20px;
}
h2.pos_right
{
position:relative;
left:20px;
}
The content of a relatively positioned elements can be moved and overlap other
elements, but the reserved space for the element is still preserved in the normal flow.
Absolute Positioning
An absolute position element is positioned relative to the first parent element
that has a position other than static. If no such element is found, the containing block
is <html>:
Example
h2
{
57
position:absolute;
left:100px;
top:150px;
}
Absolutely positioned elements are removed from the normal flow. The
document and other elements behave like the absolutely positioned element does not
exist.Absolutely positioned elements can overlap other elements.
Overlapping Elements
When elements are positioned outside the normal flow, they can overlap other
elements.The z-index property specifies the stack order of an element (which
element should be placed in front of, or behind, the others).An element can have a
positive or negative stack order: Example:
img
{
position:absolute;
left:0px;
top:0px;
z-
index:-1
}
58
Table element properties like table Borders / Table CSS
To specify table borders in CSS, use the border property.The example below
specifies a black border for table, th, and td elements:Notice that the table in the
example above has double borders. This is because both the table, th, and td
elements have separate borders.
table, th, td
{
border: 1px solid black;
}
To display a single border for the table, use the border-collapse property.
Collapse Borders
The border-collapse property sets whether the table borders are collapsed into
a single border or separated:
table
{
border-collapse:collapse;
59
}
table,th, td
{
border: 1px solid black;
}
Table Width and Height
Width and height of a table is defined by the width and height properties.The
example below sets the width of the table to 100%, and the height of the th elements
to 50px:
table
{
width:100%;
}
th
{
height:50px;
}
CSS Layout
CSS layout is easy to design. We can use CSS layout to design our web page such as
home page, contact us, about us etc.
There are 3 ways to design layout of a web page:
1. HTML Div with CSS: fast and widely used now.

2. HTML Table: slow and less preferred.
3. HTML Frameset: deprecated now.
A CSS layout can have header, footer, left pane, right pane and body part. Let's see a
simple example of CSS layout.
60
CSS layout example
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <style>
5. .header{margin:-8px -8px 0px;background-image:linear-
gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}
6. .container{width:100%}
7. .left{width:15%;float:left;}
8. .body{width:65%;float:left;background-color:pink;padding:5px;}
9. .right{width:15%;float:left;}
10. .footer{margin:-8px;clear:both;background-image:linear-
gradient(145deg,#7379ff,#b524ef);color:white;text-align:center;padding:10px;}
11. </style>
12. </head>
13. <body>
14. <div class="header"><h2>JavaTpoint</h2></div>
15.
16. <div class="container">
17. <div class="left">
18. <p>Left Page</p>
19. </div>
20. <div class="body">
21. <h1>Body Page</h1>
22. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content g
oes here</p>
23. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Co
ntent goes here</p>
24. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Content g
oes here</p>
25. <p>Page Content goes here</p><p>Page Content goes here</p><p>Page Co
ntent goes here</p>
26. <p>Page Content goes here</p>
27. </div>
61
28. <div class="right">
29. <p>Right Page</p>
30. </div>
31. </div>
32.
33. <div class="footer">
34. <p>Footer</p>
35. </div>
36.
37. </body>
38. </html>
Test it Now
Output:
Left Page
Body Page
Page Content goes here
62
Right Page
Footer
DHTML
DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.
Dynamic HTML is not a markup or programming language but it is a term that combines
the features of various web development technologies for creating the web pages
dynamic and interactive.
The DHTML application was introduced by Microsoft with the release of the 4th version of
IE (Internet Explorer) in 1997.
Components of Dynamic HTML
DHTML consists of the following four components or languages:
o HTML 4.0
o CSS
o JavaScript
o DOM.
HTML 4.0
HTML is a client-side markup language, which is a core component of the DHTML. It

defines the structure of a web page with various defined basic elements or tags.
CSS
CSS stands for Cascading Style Sheet, which allows the web users or developers for
controlling the style and layout of the HTML elements on the web pages.
63
JavaScript
JavaScript is a scripting language which is done on a client-side. The various browser

supports JavaScript technology. DHTML uses the JavaScript technology for accessing,
controlling, and manipulating the HTML elements. The statements in JavaScript are the
commands which tell the browser for performing an action.
DOM
DOM is the document object model. It is a w3c standard, which is a standard interface of
programming for HTML. It is mainly used for defining the objects and properties of all
elements in HTML.
Uses of DHTML
Following are the uses of DHTML (Dynamic HTML):
o It is used for designing the animated and interactive web pages that are developed in real-
time.
o DHTML helps users by animating the text and images in their documents.
o It allows the authors for adding the effects on their pages.
o It also allows the page authors for including the drop-down menus or rollover buttons.
o This term is also used to create various browser-based action games.
o It is also used to add the ticker on various websites, which needs to refresh their content
automatically.
Features of DHTML
Following are the various characteristics or features of DHTML (Dynamic HTML):
o Its simplest and main feature is that we can create the web page dynamically.
o Dynamic Style is a feature, that allows the users to alter the font, size, color, and content
of a web page.
o It provides the facility for using the events, methods, and properties. And, also provides
the feature of code reusability.
o It also provides the feature in browsers for data binding.
o Using DHTML, users can easily create dynamic fonts for their web sites or web pages.
64
o With the help of DHTML, users can easily change the tags and their properties.
o The web page functionality is enhanced because the DHTML uses low-bandwidth effect.
Difference between HTML and DHTML
Following table describes the differences between HTML and DHTML:
HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)
1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of

technologies of web development.
2. It is used for developing and creating web 2. It is used for creating and designing the animated
pages. and interactive web sites or pages.
3. This markup language creates static web 3. This concept creates dynamic web pages.
pages.
4. It does not contain any server-side scripting 4. It may contain the code of server-side scripting.
code.
5. The files of HTML are stored with the .html or 5. The files of DHTML are stored with the .dhtm
.htm extension in a system. extension in a system.
6. A simple page which is created by a user 6. A page which is created by a user using the HTML,
without using the scripts or styles called as an CSS, DOM, and JavaScript technologies called a
HTML page. DHTML page.
7. This markup language does not need 7. This concept needs database connectivity because
database connectivity. it interacts with users.
DHTML JavaScript
JavaScript can be included in HTML pages, which creates the content of the page as
dynamic. We can easily type the JavaScript code within the <head> or <body> tag of a
HTML page. If we want to add the external source file of JavaScript, we can easily add
using the <src> attribute.
65
Following are the various examples, which describes how to use the JavaScript technology
with the DHTML:
Document.write() Method
The document.write() method of JavaScript, writes the output to a web page.
Example 1: The following example simply uses the document.write() method of

JavaScript in the DHTML. In this example, we type the JavaScript code in the <body> tag.
1. <HTML>
2. <head>
3. <title>
4. Method of a JavaScript
5. </title>
6. </head>
7. <body>
8. <script type="text/javascript">
9. document.write("JavaTpoint");
10. </script>
11. </body>
12. </html>
Test it Now
Output:
JavaScript and HTML event
A JavaScript code can also be executed when some event occurs. Suppose, a user clicks
an HTML element on a webpage, and after clicking, the JavaScript function associated
with that HTML element is automatically invoked. And, then the statements in the function
are performed.
66
The following example shows the current date and time with the JavaScript and HTML
event (Onclick). In this example, we type the JavaScript code in the <head> tag.
1. <html>
2. <head>
3. <title>
4. DHTML with JavaScript
5. </title>
7. function dateandtime()
8. {
9. alert(Date());
10. }
11. </script>
12. </head>
13. <body bgcolor="orange">
14. <font size="4" color="blue">
15. <center> <p>
16. Click here # <a href="#" onClick="dateandtime();"> Date and Time </a>
17. # to check the today's date and time.
18. </p> </center>
19. </font>
20. </body>
21. </html>
Test it Now
Output:
67
Explanation:
In the above code, we displayed the current date and time with the help of JavaScript in
DHTML. In the body tag, we used the anchor tag, which refers to the page itself. When
you click on the link, then the function of JavaScript is called.
In the JavaScript function, we use the alert() method in which we type the date() function.
The date function shows the date and time in the alert dialog box on the web page.
JavaScript and HTML DOM (DOCUMENT Object modal)
With version 4 of HTML, JavaScript code can also change the inner content and attributes
of the HTML event.
This example checks the Grade of a student according to the percentage criteria with the
JavaScript and HTML DOM. In this example, we type the code of a JavaScript in the
<body> tag.
1. <html>
2. <head>
3. <title> Check Student Grade
4. </title>
5. </head>
6.
7. <body>
8. <p>Enter the percentage of a Student:</p>
9. <input type="text" id="percentage">
68
10. <button type="button" onclick="checkGrade()">
11. Find Grade
12. </button>
13. <p id="demo"></p>
15. function checkGrade() {
16. var x,p, text;
17. p = document.getElementById("percentage").value;
18.
19. x=parseInt(p);
20.
21.
22. if (x>90 && x <= 100) {
23. document.getElementById("demo").innerHTML = "A1";
24. } else if (x>80 && x <= 90) {
26. } else if (x>70 && x <= 80) {
28. }
29. }
30. </script>
31. </body>
32. </html>
Test it Now
Output:
69
In the above code, we check the student’s Grade with the help of JavaScript in DHTML. In
the JavaScript code, we used the checkGrade() method, which is invoked when we click
on the button. In this function, we stored the value in variable p. The value is taken in the
input field. When the value is stored, then we convert the value of p into integer and store
the conversion value in x, because the value in p is text.
After that, we used the if-else-if statement for finding the grade according to the
percentage.
CSS with JavaScript in DHTML
With version 4 of HTML, JavaScript code can also change the style such as size, color, and
face of an HTML element.
Example 1: The following example changes the color of a text.
1. <html>
2. <head>
3. <title>
4. getElementById.style.property example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons.
</p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
17. </body>
18. </html>
Test it Now
Output:
70
In the above code, we changed the color of a text by using the following syntax:
1. document.getElementById('demo').style.property=new_value;.
The above syntax is used in the JavaScript function, which is performed or called when we
clicked on the HTML buttons. The different HTML buttons specify the color of a text.
DHTML CSS
We can easily use the CSS with the DHTML page with the help of JavaScript and HTML
DOM. With the help of this.style.property=new style statement, we can change the style
of the currently used HTML element. Or, we can also update the style of any particular
HTML element by document.getElementById(id).style.property =
new_style statement.
Example 1: The following example uses the DHTML CSS for changing the style of current
element:
1. <html>
2. <head>
3. <title>
4. Changes current HTML element
5. </title>
6. </head>
7. <body>
8. <center>
9. <h1 onclick="this.style.color='blue'"> This is a JavaTpoint Site </h1>
10. <center>
71
11. </body>
12. </html>
Test it Now
Output:
In the above code, we used the this.style.color='blue' statement, which shows the color
of a text as blue.
The following example uses the DHTML CSS for changing the style of the HTML element:
1. <html>
2. <head>
3. <title>
4. changes the particular HTML element example
5. </title>
6. </head>
7. <body>
8. <p id="demo"> This text changes color when click on the following different buttons.
</p>
9. <button onclick="change_Color('green');"> Green </button>
10. <button onclick="change_Color('blue');"> Blue </button>
12.
13. function change_Color(newColor) {
14. var element = document.getElementById('demo').style.color = newColor;
15. }
16. </script>
72
17. </body>
18. </html>
Test it Now
Output:
In the above code, we used the var element =

document.getElementById('demo').style.color = newColor; statement, which
changes the color of a text as green and blue according to the buttons.
DHTML Events
An event is defined as changing the occurrence of an object.
It is compulsory to add the events in the DHTML page. Without events, there will be no
dynamic content on the HTML page. The event is a term in the HTML, which triggers the
actions in the web browsers.
Suppose, any user clicks an HTML element, then the JavaScript code associated with that
element is executed. Actually, the event handlers catch the events performed by the user
and then execute the code.
Example of events:
1. Click a button.
2. Submitting a form.
3. An image loading or a web page loading, etc.
Following table describes the Event Handlers used in the DHTML:
73
S.No. Event When it occurs
1. onabort It occurs when the user aborts the page or media file loading.
2. onblur It occurs when the user leaves an HTML object.
3. onchange It occurs when the user changes or updates the value of an object.
4. onclick It occurs or triggers when any user clicks on an HTML element.
5. ondblclick It occurs when the user clicks on an HTML element two times together.
6. onfocus It occurs when the user focuses on an HTML element. This event handler works
opposite to onblur.
7. onkeydown It triggers when a user is pressing a key on a keyboard device. This event
handler works for all the keys.
8. onkeypress It triggers when the users press a key on a keyboard. This event handler is not
triggered for all the keys.
9. onkeyup It occurs when a user released a key from a keyboard after pressing on an
object or element.
10. onload It occurs when an object is completely loaded.
11. onmousedown It occurs when a user presses the button of a mouse over an HTML element.
12. onmousemove It occurs when a user moves the cursor on an HTML object.
13. onmouseover It occurs when a user moves the cursor over an HTML object.
14. onmouseout It occurs or triggers when the mouse pointer is moved out of an HTML element.
74
15. onmouseup It occurs or triggers when the mouse button is released over an HTML element.
16. onreset It is used by the user to reset the form.
17. onselect It occurs after selecting the content or text on a web page.
18. onsubmit It is triggered when the user clicks a button after the submission of a form.
19. onunload It is triggered when the user closes a web page.
Following are the different examples using the different event handlers, which helps us to
understand the concept of DHTML events:
This example uses the onclick event handler, which is used to change the text after
clicking.
1. <html>
2. <head>
3. <title>
4. Example of onclick event
5. </title>
7. function ChangeText(ctext)
8. {
9. ctext.innerHTML=" Hi JavaTpoint! ";
10. }
11. </script>
12. </head>
13. <body>
14. <font color="red"> Click on the Given text for changing it: <br>
15. </font>
16. <font color="blue">
17. <h1 onclick="ChangeText(this)"> Hello World! </h1>
18. </font>
19. </body>
75
20. </html>
Test it Now
Output:
This example uses the onsubmit event handler, which gives an alert after clicking on a
submit button.
1. <html>
2. <head>
3. <title>
4. Example of onsubmit event
5. </title>
6. </head>
7. <body>
8. <form onsubmit="Submit_Form()">
9. <label> Enter your name: </label>
10. <input type="text">
11. <label> Enter your Roll no: </label>
12. <input type="Number">
13. <input type="submit" value="submit">
14. </form>
16. function Submit_Form()
17. {
18. alert(" Your form is submitted");
19. }
20. </script>
21. </body>
76
22. </html>
Test it Now
Output:
DHTML DOM
DHTML DOM stands for Dynamic HTML Document Object Model.
It is a w3c standard, which is a standard interface of programming for HTML. It is mainly

used for defining the objects and properties of all elements in HTML. It also defines the
methods for accessing the HTML elements.
Example: The following program helps in understanding the concept of DHTML DOM.
This example changes the color of text and displays the text in red colour automatically.
1. <html>
2. <head>
3. <title>
4. Example of DHTML DOM
5. </title>
6. </head>
7. <body>
8. <font color = "blue">
9. <p id="demo"> This text changes color when the page loaded. </p>
10. </font>
77
12. document.getElementById('demo').style.color = "red";
13. </script>
14. </body>
15. </html>
Test it Now
Output:
Advantages of DHTML
Following are the various benefits or the advantages of DHTML (Dynamic HTML):
o Those web sites and web pages which are created using this concept are fast.
o There is no plug-in required for creating the web page dynamically.
o Due to the low-bandwidth effect by the dynamic HTML, the web page functionality is
enhanced.
o This concept provides advanced functionalities than the static HTML.
o It is highly flexible, and the user can make changes easily in the web pages.
Disadvantages of DHTML
Following are the various disadvantages or limitations of DHTML (Dynamic HTML):
78
o The scripts of DHTML does not run properly in various web browsers. Or in simple words,
we can say that various web browsers do not support the DHTML. It is only supported by
the latest browsers.
o The coding of those websites that are created using DHTML is long and complex.
o For understanding the DHTML, users must know about HTML, CSS, and JavaScript. If any
user does not know these languages, then it is a time-consuming and long process in itself.
CSS Lists
Unordered Lists:
o Coffee
o Tea
o Coca Cola
▪ Coffee
▪ Tea
▪ Coca Cola
Ordered Lists:
1. Coffee
2. Tea
3. Coca Cola
I. Coffee
II. Tea
III. Coca Cola
HTML Lists and CSS List Properties

In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters
The CSS list properties allow you to:
• Set different list item markers for ordered lists

• Set different list item markers for unordered lists
79
• Set an image as the list item marker
• Add background colors to lists and list items
Different List Item Markers
The list-style-type property specifies the type of list item marker.
The following example shows some of the available list item markers:
Example
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
CSS Tables
A table in CSS is used to apply the various styling properties to the HTML
Table elements to arrange the data in rows and columns, or possibly in a more
complex structure in a properly organized manner. Tables are widely used in
communication, research, and data analysis. The table-layout property in CSS
can be utilized to display the layout of the table. This property is basically used
to sets the algorithm that is used to layout <table>cells, rows, and columns.
Properties:
Border: It is used for specifying borders in the table.
Syntax:
border: table_width table_color;
Border Collapse: The border-collapse property tells us whether the browser
should control the appearance of the adjacent borders that touch each other or
whether each cell should maintain its style.
80
Syntax:
border-collapse: collapse/separate;
Border Spacing: This property specifies the space between the borders of the
adjacent cells.
Syntax:
border-spacing: value;
Caption Side: Caption side property is used for controlling the placement of
caption in the table. By default, captions are placed above the table.
Syntax:
caption-side: top/bottom;
XML - Documents
An XML document is a basic unit of XML information composed of elements and other
markup in an orderly package. An XML document can contains wide variety of data. For
example, database of numbers, numbers representing molecular structure or a
mathematical equation.
XML Document Example
A simple document is shown in the following example −
<?xml version = "1.0"?>

<contact-info>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact-info>
The following image depicts the parts of XML document.
Document Prolog Section

Document Prolog comes at the top of the document, before the root element. This
section contains −
81
• XML declaration
• Document type declaration
You can learn more about XML declaration in this chapter − XML Declaration
Document Elements Section
Document Elements are the building blocks of XML. These divide the
document into a hierarchy of sections, each serving a specific purpose. You
can separate a document into multiple sections so that they can be rendered
differently, or used by a search engine. The elements can be containers,
with a combination of text and other elements.
XML Vocabulary / XML Document vocabulary

let us say you want to represent person information. In HTML you have to use pre-
defined vocabulary (as it doesn't allow you to create your own) so you can represent a
person as below
XSD or DTD
<h1>Bob Joe</h1>
<table>
<tr>
<th>Age</th>
<th>Weight</th>
</tr>
<tr>
<td>30</td>
<td>140</td>
</tr>
</table>
XML lets you create your own vocabulary or tags that is meaningful as shown in
below example. You can even restrict the vocabulary (so that exchange and
processing of information is simplified) using XSD or DTD.
<Person>
<Name>Bob Joe</Name>
<Age>30</Age>
<Weight>140<Weight>
</Person>
Once you have created the vocabulary using XSD then you can associate it with an XML
instance using xsi namespacce as shown below
82
<Person
xmlns="MyDefaultNamespace"
xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
xsi:schemaLocation="MyDefaultNamespace Person.xsd">
<Name>Bob Joe</Name>
<Age>30</Age>
<Weight>140<Weight>
</Person>
A program can validate the XML instance against a XSD programatically using the api
provided in a particular language. Many languages have this support. There are also
tools that can generate code to parse and create xml adhering to a XSD.
XML Document Structure

The XML Recommendation states that an XML document has both logical and physical structure.
Physically, it is comprised of storage units called entities, each of which may refer to other entities, similar
to the way that include works in the C language. Logically, an XML document consists of declarations,
elements, comments, character references, and processing instructions, collectively known as the
markup.
NOTE
Although throughout this book we refer to an "XML document," it is crucial to understand that XML may
not exist as a physical file on disk. XML is sometimes used to convey messages between applications,
such as from a Web server to a client. The XML content may be generated on the fly, for example by a
Java application that accesses a database. It may be formed by combining pieces of several files,
possibly mixed with output from a program. However, in all cases, the basic structure and syntax of XML
is invariant.
An XML document consists of three parts, in the order given:
1. An XML declaration (which is technically optional, but recommended in most normal cases)
2. A document type declaration that refers to a DTD (which is optional, but required if you want
validation)
3. A body or document instance (which is required)
Collectively, the XML declaration and the document type declaration are called the XML prolog.
83
XML Declaration
The XML declaration is a piece of markup (which may span multiple lines of a file) that identifies this as
an XML document. The declaration also indicates whether the document can be validated by referring to
an external Document Type Definition (DTD). DTDs are the subject of chapter 4; for now, just think of a
DTD as a set of rules that describes the structure of an XML document.
The minimal XML declaration is:
<?xml version="1.0" ?>
XML is case-sensitive (more about this in the next subsection), so it's important that you use lowercase
for xml and version. The quotes around the value of the version attribute are required, as are
the ? characters. At the time of this writing, "1.0" is the only acceptable value for
the version attribute, but this is certain to change when a subsequent version of the XML specification
appears.
NOTE
Do not include a space before the string xml or between the question mark and the angle brackets. The
strings <?xml and ?> must appear exactly as indicated. The space before the ?> is optional. No blank
lines or space may precede the XML declaration; adding white space here can produce strange error
messages.
In most cases, this XML declaration is present. If so, it must be the very first line of the document and
must not have leading white space. This declaration is technically optional; cases where it may be omitted
include when combining XML storage units to create a larger, composite document.
Actually, the formal definition of an XML declaration, according to the XML 1.0 specification is as follows:
XMLDecl ::= '<?xml' VersionInfo EncodingDecl? SDDecl? S? '?>'
This Extended Backus-Naur Form (EBNF) notation, characteristic of many W3C specifications, means
that an XML declaration consists of the literal sequence '<?xml', followed by the required version
information, followed by optional encoding and standalone declarations, followed by an optional amount
84
of white space, and terminating with the literal sequence '?>'. In this notation, a question mark not
contained in quotes means that the term that precedes it is optional.
The following declaration means that there is an external DTD on which this document depends. See the
next subsection for the DTD that this negative standalone value implies.
<?xml version="1.0" standalone="no" ?>

On the other hand, if your XML document has no associated DTD, the correct XML
declaration is:
<?xml version="1.0" standalone="yes" ?>
The XML 1.0 Recommendation states: "If there are external markup declarations but there is no
standalone document declaration, the value 'no' is assumed."
The optional encoding part of the declaration tells the XML processor (parser) how to interpret the bytes
based on a particular character set. The default encoding is UTF-8, which is one of seven character-
encoding schemes used by the Unicode standard, also used as the default for Java. In UTF-8, one byte is
used to represent the most common characters and three bytes are used for the less common special
characters. UTF-8 is an efficient form of Unicode for ASCII-based documents. In fact, UTF-8 is a superset
of ASCII. 3
<?xml version="1.0" encoding="UTF-8" ?>
For Asian languages, however, an encoding of UTF-16 is more appropriate because two bytes are
required for each character. It is also possible to specify an ISO character encoding, such as in the
following example, which refers to ASCII plus Greek characters. Note, however, that some XML
processors may not handle ISO character sets correctly since the specification requires only that they
handle UTF-8 and UTF-16.
<?xml version="1.0" encoding="ISO-8859-7" ?>

Both the standalone and encoding information may be supplied:
<?xml version="1.0" standalone="no" encoding="UTF-8" ?>
Is the next example valid?
<?xml version="1.0" encoding='UTF-8' standalone='no'?>
85
Yes, it is. The order of attributes does not matter. Single and double quotes can be used interchangeably,
provided they are of matching kind around any particular attribute value. (Although there is no good
reason in this example to use double quotes for version and single quotes for the other, you may need to
do so if the attribute value already contains the kind of quotes you prefer.) Finally, the lack of a blank
space between 'no' and ?> is not a problem.
Neither of the following XML declarations is valid.
<?XML VERSION="1.0" STANDALONE="no"?>

<?xml version="1.0" standalone="No"?>
The first is invalid because these particular attribute names must be lowercase, as must "xml". The
problem with the second declaration is that the value of the standalone attribute must be
literally "yes" or "no", not "No". (Do I dare call this a "no No"?)
Document Type Declaration
The document type declaration follows the XML declaration. The purpose of this declaration is to
announce the root element (sometimes called the document element) and to provide the location of the
DTD. The general syntax is:
4
<!DOCTYPE RootElement (SYSTEM | PUBLIC)

ExternalDeclarations? [InternalDeclarations]? >
where <!DOCTYPE is a literal string, RootElement is whatever you name the outermost element of
your hierarchy, followed by either the literal keyword SYSTEM or PUBLIC. The
optional ExternalDeclarations portion is typically the relative path or URL to the DTD that
describes your document type. (It is really only optional if the entire DTD appears as
an InternalDeclaration, which is neither likely nor desirable.) If there
are InternalDeclarations, they must be enclosed in square brackets. In general, you'll encounter
far more cases with ExternalDeclarations than InternalDeclarations, so let's ignore the
latter for now. They constitute the internal subset, which is described in chapter 4.
Let's start with a simple but common case. In this example, we are indicating that the DTD and the XML
document reside in the same directory (i.e., the ExternalDeclarations are contained in the
file employees.dtd) and that the root element is Employees:
<!DOCTYPE Employees SYSTEM "employees.dtd">
Similarly,
<!DOCTYPE PriceList SYSTEM "prices.dtd">
indicates a root element PriceList and the DTD is in the local file: prices.dtd.
86
In the next example, we use normal directory path syntax to indicate a different location for the DTD.
<!DOCTYPE Employees SYSTEM "../dtds/employees.dtd">
As is often the case, we might want to specify a URL for the DTD since the XML file may not even be on
the same host as the DTD. This case also applies when you are using an XML document for message
passing or data transmission across servers and still want the validation by referencing a common DTD.
<!DOCTYPE Employees SYSTEM

"http://somewhere.com/dtds/employees.dtd">
Next, we have the case of the PUBLIC identifier. This is used in formal environments to declare that a
given DTD is available to the public for shared use. Recall that XML's true power as a syntax relates to
developing languages that permit exchange of structured data between applications and across company
boundaries. The syntax is a little different:
<!DOCTYPE RootElement PUBLIC PublicID URI>
The new aspect here is the notion of a PublicID, which is a slightly involved formatted string that
identifies the source of the DTD whose path follows as the URI. This is sometimes known as the Formal
Public Identifier (FPI).
For example, I was part of a team that developed (Astronomical) Instrument Markup Language (AIML,
IML) for NASA Goddard Space Flight Center. We wanted our DTD to be available to other astronomers.
5
Our document type declaration (with a root element named Instrument) was:
<!DOCTYPE Instrument PUBLIC
"-//NASA//Instrument Markup Language 0.2//EN"
"http://pioneer.gsfc.nasa.gov/public/iml/iml.dtd">
In this case the PublicID is:
The URI that locates the DTD is:
http://pioneer.gsfc.nasa.gov/public/iml/iml.dtd
Let's decompose the PublicID. The leading hyphen indicates that NASA is not a standards body. If it
were, a plus sign would replace the hyphen, except if the standards body were ISO, in which case the
string "ISO" would appear. Next we have the name of the organization responsible for the DTD (NASA, in
this case), surrounded with double slashes, then a short free-text description of the DTD ("Instrument
Markup Language 0.2"), double slashes, and a two-character language identifier ("EN" for English, in this
case).
87
Since the XML prolog is the combination of the XML declaration and the document type declaration, for
our NASA example the complete prolog is:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>

<!DOCTYPE Instrument PUBLIC
"http://pioneer.gsfc.nasa.gov/public/iml/iml.dtd">
As another example, let's consider a common case involving DTDs from the W3C, such as those for
XHTML 1.0.
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
W3C is identified as the organization, "DTD XHTML 1.0 Transitional" is the name of the DTD; it is in
English; and the actual DTD is located by the URI http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd. Similarly, the prolog for XHTML Basic 1.0 is:
<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">
The XHTML Basic 1.0 PublicID is similar but not identical to the XHTML 1.0 case and of course the
DTD is different since it's a different language.
If you noticed that the NASA example uses uppercase for the encoding value UTF-8 and the W3C
examples use lowercase, you may have been bothered because that is inconsistent with what we learned
about the case-sensitive value for the standalone attribute. The only explanation I can offer is that
although element and attribute names are always case-sensitive, attributes values may or may not be. A
reasonable guess is that if the possible attribute values are easily enumerated (i.e., "yes" or "no", or other
relatively short lists of choices), then case probably matters.
NOTE
DTD-related keywords such as DOCTYPE, PUBLIC, and SYSTEM must be uppercase. XML-related
attribute names such as version, encoding, and standalone must be lowercase.
88
Document Body
The document body, or instance, is the bulk of the information content of the document. Whereas across
multiple instances of a document of a given type (as identified by the DOCTYPE) the XML prolog will
remain constant, the document body changes with each document instance (in general). This is because
the prolog defines (either directly or indirectly) the overall structure while the body contains the real
instance-specific data. Comparing this to data structures in computer languages, the DTD referenced in
the prolog is analogous to a struct in the C language or a class definition in Java, and the document
body is analogous to a runtime instance of the struct or class.
Because the document type declaration specifies the root element, this must be the first element the
parser encounters. If any other element but the one identified by the DOCTYPE line appears first, the
document is immediately invalid.
Listing 3-1 shows a very simple XHTML 1.0 document. The DOCTYPE is "html" (not "xhtml"), so the
document body begins with <html ....> and ends with </html>.
Listing 3-1 Simple XHTML 1.0 Document with XML Prolog and Document Body
<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>XHTML 1.0</title>
</head>
<body>
<h1>Simple XHTML 1.0 Example</h1>
<p>See the <a href=
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">DTD</a>.</p>
</body>
</html>
XML Versions
The abbreviation of XML is eXtensible Markup Language, it is a markup language
which is similar to HTML and it is basically designed to transport and store data and it is mostly
self-descriptive like it has the information of the sender, has the information from the receiver,
has a heading and also contains a body with message but still, nothing is done by XML, it is just
information covered in tags, it does not contain any predefined tags and it is expected to work
in the same way even when there is change of data that is even if new data is added or existing
data is removed. In this article, we will discuss different XML versions.
89
Various XML Versions
1) XML 1.0
XML was developed in 1996 by a working group of worldwide web consortium with several
design goals. They are:
XML must be used straightforward on the internet.
Different varieties of applications must be supported by XML.
There should be compatibility between XML and SGML.
Programs to process XML documents must be easy to write.
Optional features in XML should be zero.
The documents of XML must be easy to understand.
The design of XML should not take more time.
The design of XML should be concise and formal.
The documents created in XML should be easy.
2) XML 1.1
The features of XML 1.1 are similar to XML 1.0 except for a few of the changes. Those changes
are:
The names in XML 1.1 are designed in such a way that whatever is not forbidden is permitted.
NEL (#x85) is one of the line end characters and is supported by XML 1.1.
#X2028 is a line separator character and is supported by XML 1.1.
The control characters from #x1 to #x1F are not permitted in XML 1.0 but XML 1.1 provides
character references to these control characters.
A set of constraints is defined by XML 1.1 which is called XML documents full normalization. The
creators of documents must make sure the documents created abide by the set of constraints
defined for full normalization and this should be cross-checked by the processors of documents.
The version difference between the XML 1.0 and XML 1.1 is provided in the XML declaration at
the beginning of the document and it is represented by the information of version number.
90
All the XML documents in XML 1.0 are well formed in XML 1.1 but the XML documents in XML
1.1 is not well formed in XML 1.0.
WML
WML is an application of XML, which is defined in a document-type definition. WML
is based on HDML and is modified so that it can be compared with HTML. WML takes
care of the small screen and the low bandwidth of transmission. WML is the markup
language defined in the WAP specification.
Diff between XML and WML:

XML stands for eXtensible Markup Language. It specifies a set of syntactical rules that
can be used to define markup languages. WML and XHTML are some example markup
languages that follow XML syntactical rules. XML was defined by the W3C (World
Wide Web Consortium).
The topmost layer in the WAP (Wireless Application Protocol) architecture is made up
of WAE (Wireless Application Environment), which consists of WML and WML scripting
language.
• WML stands for Wireless Markup Language
• WML is an application of XML, which is defined in a document-type
definition.
• WML is based on HDML and is modified so that it can be compared with
HTML.
• WML takes care of the small screen and the low bandwidth of
transmission.
• WML is the markup language defined in the WAP specification.
• WAP sites are written in WML, while web sites are written in HTML.
• WML is very similar to HTML. Both of them use tags and are written in
plain text format.
• WML files have the extension ".wml". The MIME type of WML is
"text/vnd.wap.wml".
• WML supports client-side scripting. The scripting language supported is
called WMLScript.
WML Versions:
WAP Forum has released a latest version WAP 2.0. The markup language defined in
WAP 2.0 is XHTML Mobile Profile (MP). The WML MP is a subset of the XHTML. A style
91
sheet called WCSS (WAP CSS) has been introduced alongwith XHTML MP. The WCSS
is a subset of the CSS2.
Most of the new mobile phone models released are WAP 2.0-enabled. Because WAP
2.0 is backward compatible to WAP 1.x, WAP 2.0-enabled mobile devices can display
both XHTML MP and WML documents.
WML 1.x is an earlier technology. However, that does not mean it is of no use, since a
lot of wireless devices that only supports WML 1.x are still being used. Latest version
of WML is 2.0 and it is created for backward compatibility purposes. So WAP site
developers need not to worry about WML 2.0.
WML Decks and Cards:

A main difference between HTML and WML is that the basic unit of navigation in HTML
is a page, while that in WML is a card. A WML file can contain multiple cards and they
form a deck.
When a WML page is accessed from a mobile phone, all the cards in the page are
downloaded from the WAP server. So if the user goes to another card of the same deck,
the mobile browser does not have to send any requests to the server since the file that
contains the deck is already stored in the wireless device.
You can put links, text, images, input fields, option boxes and many other elements in a
card.
WML Program Structure:
Following is the basic structure of a WML program:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.2//EN"
"http://www.wapforum.org/DTD/wml12.dtd">
<wml>
<card id="one" title="First Card">

<p>
This is the first card in the deck
</p>
</card>
<card id="two" title="Second Card">

<p>
Ths is the second card in the deck
</p>
</card>
92
</wml>
The first line of this text says that this is an XML document and the version is 1.0. The
second line selects the document type and gives the URL of the document type definition
(DTD).
One WML deck (i.e. page ) can have one or more cards as shown above. We will see
complete details on WML document structure in subsequent chapter.
Unlike HTML 4.01 Transitional, text cannot be enclosed directly in the <card>...</card>
tag pair. So you need to put a content inside <p>...</p> as shown above.
93

Unit 1

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit 1

Uploaded by

Copyright:

Available Formats

Table of Contents

Web Essentials: Clients, Servers, and Communication

• provides requested service to client

• initiates contact with server (“speaks first”)

group of computers in many different countries on all seven continents that

talk to each other using the IP protocol.

Protocols are agreed formats for transmitting data between

Internet Protocol / IP protocol / Basic IP protocol:

Hypertext Transfer Protocol (HTTP)

Electronic Mail Protocols:

HTTP Request Header:

The POST request message has a content body that is normally

<form action = http://xyz.com method=”get”> </form>

Difference between Client and Server

So, without more delay, let's start the topic.

A client can be a device or a machine.

Client v/s Server

Based on Client Server

Difference between Web Browser and Web Server

Web Browser is an Application

The Web server accepts, approves,

A web browser is a programme The web server is responsible for

The web browser acts as an The web server is a software or a

Components of web server

The web browser sends an HTTP

There exist three types of processing

The web server can be a remote

Examples of Web browsers are

Web Server Working

HTML Versus XHTML

Differences between XML and HTML

Sample program of XHTML

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

some content here...

Let's see a simple example of HTML.

5) It is platform-independent because it can be displayed on any platform like Windows, Linux,

HTML attributes are used to

HTML tags are almost like

HTML Tags and Attributes

<ul> Defines an unordered list

<ol> Defines an ordered list

<li> Defines a list item

<dl> Defines a description list

<dt> Defines a term in a description list

<dd> Describes the term in a description list

HTML Ordered List or Numbered List

HTML Unordered List or Bulleted List

HTML Description List or Definition List

The HTML definition list contains following three tags:

HTML Nested List

Hillary Nyakundi tables@mail.com

Lary Mak developer@mail.com

Not Supported in HTML5.

HTML frameset Attributes

HTML frameset Example

The <form> Element

The <input> Element

The HTML <input> element is the most used form element.

An <input> element can be displayed in many ways, depending on

Here are some examples:

<input Displays a checkbox (for selecting zero or more of many

<input type="submit"> Displays a submit button (for submitting the form)