UNIT 1 -FUNDAMENTALS OF WEB, XHTML

A BRIEF INTRODUCTION ABOUT THE INTERNET

1)Origins:
 1960s
 U.S. Department of Defence (DoD) became interested in developing a
new large-scale computer network
 The purposes of this network were robust communications(alternative
way if any of the media is corrupted), program sharing (the ability to
share or receive data from one or more server at same time), and remote
computer access for researchers working on defence-related contracts.
 The DoD’s Advanced Research Projects Agency (ARPA) funded the
construction of the first such network. Hence it was named as ARPAnet.
 The primary early use of ARPAnet was simple text-based
communications through e-mail.
 Late 1970s and early 1980s
 BITNET, which is an acronym for Because It’s Time NETwork, began at
the City University of New York. It was built initially to provide
electronic mail and file transfers.
 CSNET is an acronym for Computer Science NETwork. Its initial
purpose was to provide electronic mail.
 1990s
 NSFnet which was created in 1986 replaced ARPAnet by 1990.
 It was sponsored by the National Science Foundation (NSF).
 By 1992 NSFnet, connected more than 1 million computers around
the world.
 In 1995, a small part of NSFnet returned to being a research
network. The rest became known as the Internet.

2) What Is the Internet?

 The Internet is a huge collection of computers connected in a
communications network. Or we can say that global networking
connection with millions of computer.
 The Transmission Control Protocol(reliable connection oriented)/Internet
Protocol(unreliable, connection less) (TCP/IP) became the standard for
computer network connections in 1982(programs on one computer to
communicate with other).
 Rather than connecting every computer on the Internet directly to every
other computer on the Internet, normally the individual computers in an
organization are connected to each other in a local network. One node on
this local network is physically connected to the Internet.

1
  So, the Internet is actually a network of networks, rather than a network
of computers.
 Obviously, all devices connected to the Internet must be uniquely
identifiable.

3) Internet Protocol Addresses

 The Internet Protocol (IP) address of a machine connected to the Internet
is a unique 32-bit number.
 IP addresses usually are written (and thought of) as four 8-bit numbers,
separated by periods.
 The four parts are separately used by Internet-routing computers to decide
where a message must go next to get to its destination.
 Although people nearly always type domain names into their browsers,
the IP works just as well.
 For example, the IP for Facebook(www.facebook.com) is 69.63.176.13/.
So, if a browser is pointed at http://69.63.176.13/, it will be connected to
the facebook Web site.

4) Domain Names
 The IP addresses are numbers. Hence, it would be difficult for the users to
remember IP address.
 To solve this problem, text based names were introduced. These are
technically known as domain name system (DNS).
 These names begin with the names of the host machine, followed by
progressively larger enclosing collection of machines, called domains.
 A DNS server is a server software program that performs Domain Name
Services (DNS).
 This involves taking a full host name such as 'www.vicomsoft.com' or a
domain name such as 'vicomsoft.com' and returning the corresponding
Internet Protocol (IP) address such as 195.224.81.4.
 There may be two, three or more domain names. DNS is of the form
hostname.domainName.domainName.
 Example: aiet.ac.in The steps for conversion from DNS to IP:
 The DNS has to be converted to IP address before destination is reached.
 This conversion is needed because computer understands only numbers.
 The conversion is done with the help of name server.
 As soon as domain name is provided, it will be sent across the internet to
contact name servers.
 This name server is responsible for converting domain name to IP
 If one of the name servers is not able to convert DNS to IP, it contacts
other name server.

2
  This process continues until IP address is generated.
 Once the IP address is generated, the host can be accessed.
 The hostname and all domain names form what is known as FULLY
QUALIFIED DOMAIN NAME.

5) The World Wide Web

Origins
 Tim Berners Lee and his group proposed a new protocol for the Internet
whose intention was to allow scientists around the world to use the
Internet to exchange documents describing their work.
 The proposed new system was designed to allow a user anywhere on the
Internet to search for and retrieve documents from the databases on any
number of different document-serving computers.
 The system used hypertext, which is text with embedded links to text in
other documents to allow consequent browsing of textual material.
 The units of web are referred as pages, documents and
resources(documents are nothing but webpages).
 Web is merely a vast collection of documents, some of which are
connected by links.
 These documents can be accessed by web browsers and are provided by
web servers.

5.1) Web or Internet?

 It is important to understand that the Internet and the Web is not the same
thing.
 The Internet is a collection of computers and other devices connected by
equipment that allows them to communicate with each other.

3
  The Web is a collection of software and protocols that has been installed
on most, if not all, of the computers on the Internet (web bunches of
pages).

6) WEB BROWSERS
 Client initiates the communication which requests for information stored
on server which sends back the information back to client from server.
 Documents provided by servers on the Web are requested by browsers,
which are programs running on client machines.
 They are called browsers because they allow the user to browse the
resources available on servers.
 Mosaic was the first browser with a graphical user interface which was
text-based.
 A browser is a client on the Web because it initiates the communication
with a server, which waits for a request from the client before doing
anything.
 In the simplest case, a browser requests a static document from a server.
 The server locates the document among its servable documents and sends
it to the browser, which displays it for the user.
 Sometimes a browser directly requests the execution of a program stored
on the server. The output of the program is then returned to the browser.
 Web supports variety of protocols .the most common one is HTTP
(hypertext transfer protocol). HTTP provides a standard form of
communications between browsers and web servers.
 Examples: Internet Explorer, Mozilla Firefox, Netscape Navigator,
Google Chrome, Opera etc.,

7) WEB SERVERS
 Web servers are programs that provide documents to requesting browsers.
 Example: Apache, IIS (internet information server).
Web server operations:
 Web browsers initiate network communications with servers by sending
them URL’s.
 A URL can specify one of the two different things:
 Address of data file stored on the server that is to be sent to client.
 Program stored on server that the client wants executed, with o/p of
program returned to the client.

4
  All the communications between a web client and a web server use the
HTTP.
 When a web server begins execution, it informs the OS under which it is
running & it runs as a background process.
 A web client or browser, opens a network connection to a web server,
sends information requests and possibly data to the server, receives
information from the server and closes the connection.
 The primary task of web server is to monitor a communication port on
host machine, accept HTTP commands through that port and perform the
operations specified by the commands.
 When the URL is received, it is translated into either a filename or a
program name.
General characteristics of web server:
 The file structure of a web server has two separate directories.
 The root of one of these is called document root which stores web
documents.
 Ex:Your host may even have several folders nested inside each other,
one of which is the document root. In the example above the document
root was:
/www/

 The root of the other directory is called the server root which stores
server and its support software’s. (give example)
 The files stored directly in the document root are those available to clients
through top level URLs.
 The secondary areas from which documents can be served are called
virtual document trees.

Virtual Document Tree

 Documents retrieved by HTTP clients can be stored in any of the File

Systems.
 HTTP configuration allows projection of different directory structure, to:
 Ease the access
 Hide the true nature of the file system. This has the added benefit
of increasing security.
 The virtual document tree is case sensitive
 Can be used to provide object level security

5
 
 Many servers can support more than one site on a computer, potentially
reducing the cost of each site and making their maintenance more
convenient. Such secondary hosts are called virtual hosts.
 Some servers can serve documents that are in the document root of other
machines on the web; in this case they are called as proxy servers.
 Proxy server is a server (a computer system or an application) that acts
as an intermediary for requests from clients seeking resources from other
servers. A client connects to the proxy server, requesting some service,
such as a file, connection, web page available from a different server and
the proxy server gives the request.
8) Apache

 Apache is the most widely used Web server.

 The primary reasons are as follows: Apache is an excellent server because
it is both fast and reliable.
 Furthermore, it is open-source software (free download), which means
that it is free and is managed by a large team of volunteers, a process that
efficiently and effectively maintains the system.
 Finally, it is one of the best available servers for Unix-based systems,
which are the most popular for Web servers.
 Apache is capable of providing a long list of services beyond the basic
process of serving documents to clients.
 When Apache begins execution, it reads its configuration information
from a file and sets its parameters to operate accordingly.
9) IIS
 Microsoft IIS server is supplied as part of Windows—and because it is a
reasonably good server—most Windows-based Web servers use IIS.
 With IIS, server behaviour is modified by changes made through a
window-based management program, named the IIS snap-in, which
controls both IIS and ftp.
 This program allows the site manager to set parameters for the server.
 Under Windows XP and Vista, the IIS snap-in is accessed by going to
Control Panel, Administrative Tools, and IIS Admin.

10) UNIFORM RESOURCE LOCATORS

6
 Uniform Resource Locators (URLs) are used to identify different kinds of
resources on Internet.
 If the web browser wants some document from web server, just giving
domain name is not sufficient because domain name can only be used for
locating the server.
 It does not have information about which document client needs.
Therefore, URL should be provided.
 The general format of URL is: scheme: object-address
 Example: http: www.vtu.ac.in/results.php
 The scheme indicates protocols being used. (http, ftp, telnet...)
 In case of http, the full form of the object address of a URL is as follows:
 //fully-qualified-domain-name/path-to-document
 Another format is: file://path-to-document. Which focus on xhtml
documents. Hostname is the name of server computer that stores the
document. Message to host machine must be directed to appropriate
process running on host for handling.

 Default port number of web server is 80. if the server has been configured
to use some other port number , its necessary to attach that port number to
he host name in the URL.
 URLs can never have embedded spaces.
 It cannot use special characters like semicolons, hash, ampersands
andcolons.(ex: https://www.google.co.in/?
gws_rd=ssl#q=web+hosting+services).
 The path to the document for http protocol is a sequence of directory
names and a filename, all separated by whatever special character the OS
uses. (forward or backward slashes).
 The path in a URL can differ from a path to a file because a URL need
not include all directories on the path.
 A path that includes all directories along the way is called a complete
path.

7
  Example: http://www.vtu.ac.in/index.html
 In most cases, the path to the document is relative to some base path that
is specified in the configuration files of the server. Such paths are called
partial paths.
 Example: http://www.jgi.ac.in/.
 If the directory doesn’t have file that the server recognises home page, a
directory listing is constructed and returned to browser.

11) MULTIPURPOSE INTERNET MAIL EXTENSIONS

 MIME stands for Multipurpose Internet Mail Extension.
 The server system apart from sending the requested document, it will also
send MIME information.
 The MIME information is used by web browser for rendering the
document properly.
 The format of MIME is: type/subtype
 Example: text/html , text/doc , image/jpeg , video/mpeg.
 If the document is text then it can be displayed in html format. Similarly,
for image as well as video.
 When the type is either text or image, the browser renders the document
without any problem.
 However, if the type is video or audio, it cannot render the document
 It has to take the help of other software like media player, win amp etc.,
 These softwares are called as helper applications or plugins.
 These non-textual information are known as HYPER MEDIA
 Experimental document types are used when user wants to create a
customized information & make it available in the internet
 The format of experimental document type is: type/x-subtype
 Example: database/x-xbase , video/x-msvideo
 Along with creating customized information, the user should also create
helper applications.
 This helper application will be used for rendering the document by
browser.
 The list of MIME specifications is stored in configuration file of web
server.

12) THE HYPERTEXT TRANSFER PROTOCOL

 All web communication uses HTTP. HTTP consists of 2 phases, the
request and response.
 Each HTTP communication between browser and web server consists of
two parts, header and body.

8
  The header contains information about communication and body contains
data of communication.
 Request Phase:
The general form of an HTTP request is as follows:
1. HTTP method Domain part of URL HTTP version
2. Header fields
3. Blank line
4. Message body
 The following is an example of the first line of an HTTP request: GET
/storefront.html HTTP/1.1

Table 1.1 HTTP request methods

 GET - Requests data from a specified resource

 POST - Submits data to be processed to a specified resource.
 The format of a header field is the field name followed by a colon and the
value of the field.
 There are four categories of header fields:
 1. General: For general information, such as the date
 2. Request: Included in request headers
 3. Response: For response headers
 4. Entity: Used in both request and response headers.
 A wildcard character, the asterisk (*), can be used to specify that part of a
MIME type can be anything.

 The Host: host name request field gives the name of the host. The Host
field is required for HTTP 1.1.

9
  The If-Modified-Since: date request field specifies that the requested file
should be sent only if it has been modified since the given date.
 If the request has a body, the length of that body must be given with a
Content-length field. The header of a request must be followed by a blank
line, which is used to separate the header from the body of the request.
The Response Phase:
 The general form of an HTTP response is as follows:
 1. Status line
 2. Response header fields
 3. Blank line
 4. Response body.
 The status line includes the HTTP version used, a three-digit status code
for the response, and a short textual explanation of the status code. For
example, most responses begin with the following: HTTP/1.1 200 OK .
 The status codes begin with 1, 2, 3, 4, or 5. The general meanings of the
five categories specified by these first digits are shown in Table 1.2. Table
1.2 First digits of HTTP status codes

 One of the more common status codes is one user never want to see: 404
Not Found, which means the requested file could not be found.(example
refer notes).
HTTP Request Example:-
Common response fields: Content-length: 488, Content-type: text/html
- Can communicate with HTTP without a browser
- > telnet blanca.uccs.edu http
GET /respond.html HTTP/1.1
Host: blanca.uccs.edu

HTTP Response: Example

HTTP/1.1 200 OK
Date: Tues, 18 May 2006 16:45:13 GMT
Server: Apache (Red-Hat/Linux)
Last-modified: Tues, 18 May 2004 16:38:38 GMT
Accept-ranges: bytes
Content-length: 364
Connection: close
Content-type: text/html, charset=ISO-8859-1

10
  Note: Both request headers and response headers must be followed by a
blank line.
In http response version used is 1.1 and client requests to server and server
receives the request hence status is 200 ie, success. Last modified field informs
the client, the modified date and time of the data requested. Server used is
apache and message or document sent is of type text hence character encoding
is done. At the end when server receives page and sends back to client
connection closes.

13) SECURITY
 Security is one of the major concerns in the Internet. The server system
can be accessed easily with basic hardware support, internet connection
& web browser.
 The client can retrieve very important information from the server.
Similarly, the server system can introduce virus on the client system.
 These viruses can destroy the hardware and software in client. While
programming the web, following requirements should be considered:
 Privacy: it means message should be readable only to communicating
parties and not to intruder.
 Integrity: it means message should not be modified during transmission.
 Authentication: it means communicating parties must be able to know
each other’s identity
 Non-repudiation: it means that it should be possible to prove that
message was sent and received properly. (give examples for all four).
 The basic tool to support privacy and integrity is encryption. Data to be
transmitted is converted or encrypted into different form, which is
impossible to decrypt for someone who cannot access data.
 In public key encryption, a public key and private key are used, the public
key to encrypt messages and private key to decrypt. Example Alice and
bob want to share their communication.
 Firstly, Alice sends the message which will be encrypted using public key
and sent to Bob. Bob on receiving end will decrypt the message using
private key to get the original message.
 Widely used public key algo is RSA.
 Another security problem for web is deliberate destruction of information
on computers attached to internet. It can be due to when a document is
downloaded from internet.
 Common virus is codeRed virus.
 Security can be provided using cryptographic algorithm. Ex: private key,
public key Protection against viruses and worms is provided by antivirus

11
 software, which must be updated frequently so that it can detect and
protect against the continuous stream of new viruses and worms.

14) THE WEB PROGRAMMER’S TOOLBOX

 Web programmers use several languages to create the documents that
servers can provide to browsers.
 The most basic of these is XHTML, the standard mark-up language for
describing how Web documents should be presented by browsers. Tools
that can be used without specific knowledge of XHTML are available to
create XHTML documents.
 A plug-in is a program that can be integrated with a word processor to
make it possible to use the word processor to create XHTML. A filter
converts a document written in some other format to XHTML.
 XML is a meta-mark-up language that provides a standard way to define
new mark-up languages.
 JavaScript is a client-side scripting language that can be embedded in
XHTML to describe simple computations. JavaScript code is interpreted
by the browser on the client machine; it provides access to the elements
of an XHTML document, as well as the ability to change those elements
dynamically.
 Flash is a framework for building animation into XHTML documents. A
browser must have a Flash player plug-in to be able to display the movies
created with the Flash framework.
 Ajax is an approach to building Web applications in which partial
document requests are handled asynchronously. Ajax can significantly
increase the speed of user interactions, so it is most useful for building
systems that have frequent interactions.
 PHP is the server-side equivalent of JavaScript. It is an interpreted
language whose code is embedded in XHTML documents. PHP is used
primarily for form processing and database access from browsers.
 Servlets are server-side Java programs that are used for form processing,
database access, or building dynamic documents. JSP documents, which
are translated into servlets, are an alternative approach to building these
applications. JSF is a development framework for specifying forms and
their processing in JSP documents.
 ASP.NET is a Web development framework. The code used in ASP.NET
documents, which is executed on the server, can be written in any .NET
programming language.

12
  Ruby is a relatively recent object-oriented scripting language that is
introduced here primarily because of its use in Rails, a Web applications
framework.
 Rails provides a significant part of the code required to build Web
applications that access databases, allowing the developer to spend his or
her time on the specifics of the application without the drudgery of
dealing with all of the housekeeping details.

XHTML
• To describe the general form and layout of documents.
• XHTML document is a mix of content and controls.
• Controls are tags and their attributes.
• Tags often delimit content and specify something about how the content
should be arranged in the document.
• Attributes provide additional information about the content of a tag.
Creating XHTML Documents
• XHTML editors - make document creation easier.
• Shortcuts to typing tag names, spell-checker.
• WYSIWYG (what you see is what you get) XHTML editors.
• Need not know XHTML to create XHTML documents.
Plugins and Filters
• Plug ins Integrated into tools like word processors, effectively converting them
to WYSIWYG XHTML editors.
• Filters Convert documents in other formats to XHTML.
• Advantages of both filters and plug-ins:
• Existing documents produced with other tools can be converted to XHTML
documents.
• Use a tool you already know to produce XHTML.
• Disadvantages of both filters and plug-ins:
• XHTML output of both is not perfect - must be fine tuned.
• XHTML may be non-standard.
• You have 2 versions of the doc: difficult to synchronize.

XML
• A meta-markup language.
• Used to create a new markup language for a particular purpose or area.
• Because the tags are designed for a specific area, they can be meaningful.
• No presentation details.
• A simple and universal way of representing data of any textual kind
JavaScript
• A client-side HTML-embedded scripting language.
• Only related to Java through syntax.
• Dynamically typed and not object-oriented.

13
• Provides a way to access elements of HTML documents and dynamically
change them.
Java
• General purpose object-oriented programming language.
• Based on C++, but simpler and safer.
 Running a server programs on web server to provide computational
capability, special kind of programApplet, it resides on server but
compiled and downloaded to browser when requested by Xhtml
document being displayed by browser.
 Server side scripting language can make use of.
 Web interaction that occurs on server and accessing server resident
databases are called Servlets.
• Our focus is on applets, servlets, and JSP.

Perl
• Provides server-side computation for HTML documents, through CGI
• Perl is good for CGI programming because:
• Direct access to operating systems functions
• Powerful character string pattern-matching operations
• Access to database systems
• Perl is highly platform independent.
PHP
• A server-side scripting language
• An alternative to CGI
• Similar to JavaScript
• Great for form processing and database access through the Web.
Rails
 Framework for web based applications that access databases.
 ASP.net is also development framework for web based applications.
 Makes use of Model-view-controller.
 A controller can send commands to the model to update the model's state
(e.g., editing a document). It can also send commands to its associated
view to change the view's presentation of the model (e.g., by scrolling
through a document).(program logic).
 A model stores data that is retrieved to the controller and displayed in the
view. Whenever there is a change to the data it is updated by the
controller.(databases)
 A view requests information from the controller. The controller fetches it
from the model and passes it to the view that the view uses to generate an
output representation to the user.(presentation)
 Tightly bound with relational databases.
Ajax

14
  Asynchronous javascript+xml.
 Traditional web interaction, client sends message to server. When the
server receives document or message from client, client waits until
server responds back the client. Client has to wait until he/she receives
the document from server and then if needed can process with next
document.
 In AJAX web application, firstly, communication from browser to
server is asynchronous. Ie, browser need not wait for the server to
respond, browser can continue whatever he/she was doing while server
finds and transmits the requested document. Also, document provided
by server is a small part of display document and hence takes less time
to transmit and render.
 The x in AJAX is XML as data supplied by server will be in form of
xml document that provides new data to be placed in displayed
document.
 Aim of AJAX is to have web-based application in terms of speed
interaction as well as user experience.

Chapter 2 XHTML

ORIGINS AND EVOLUTION OF HTML AND XHTML

HTML  Hyper Text Mark-up Language XHTML  eXtensible Hyper Text
Mark-up Language
HTML XHTML
HTML is much easier to write XHTML requires a level of discipline many
of us naturally resist
huge number of HTML documents available some older browsers have problems with
on the Web, browsers will continue to some parts of XHTML.
support HTML as far as one can see into the
future.
HTML has few syntactic rules, and HTML XHTML has strict syntactic rules that
processors (e.g., browsers) do not enforce impose a consistent structure on all XHTML
the rules it does have. Therefore, HTML documents. Another significant reason for
authors have a high degree of freedom to use using XHTML is that when you create an
their own syntactic preferences to create XHTML document, its syntactic correctness
documents. Because of this freedom, HTML can be checked, either by an XML browser
documents lack consistency, both in low- or by a validation tool
level syntax and in overall structure.
Used for displaying the data Used for describing the data

1) BASIC SYNTAX
 The fundamental syntactic units of HTML are called tags.

15
  In general, tags are used to specify categories of content.
 The syntax of a tag is the tag’s name surrounded by angle brackets (< and
>).
 Tag names must be written in all lowercase letters.
 Most tags appear in pairs: an opening tag and a closing tag.
 The name of a closing tag is the name of its corresponding opening tag
with a slash attached to the beginning. For example, if the tag’s name is p,
the corresponding closing tag is named /p.
 Whatever appears between a tag and its closing tag is the content of the
tag. Not all tags can have content.
 The opening tag and its closing tag together specify a container for the
content they enclose.
 The container and its content together are called an element.
 Example: <p> This is Web Programming Notes. </p>
 The paragraph tag, <p>, marks the beginning of the content; the </p> tag
marks the end of the content of the paragraph element.
 Attributes, which are used to specify alternative meanings of a tag, can
appear between an opening tag’s name and its right angle bracket.
 They are specified in keyword form, which means that the attribute’s
name is followed by an equal’s sign and the attribute’s value.
 Attribute names, like tag names, are written in lowercase letters.
 Attribute values must be delimited by double quotes.
 Comments in programs increase the readability of those programs.
Comments in XHTML have the same purpose. They can appear in
XHTML in the following form:
<!-- anything except two adjacent dashes -->
 Browsers ignore XHTML comments—they are for people only.
Comments can be spread over as many lines as are needed. For example,
you could have the following comment:
<!-- CopyRights.html This notes is prepared by Sahana Shetty of
ISE-->

2) Standard XHTML Document Structure

 Every XHTML document must begin with an xml declaration element
that simply identifies the document as being one based on XML. This
element includes an attribute that specifies the version number 1.0.
 Xml includes almost all web scripting language. Encoding utf-8 because
A character in UTF8 can be from 1 to 4 bytes long. UTF-8 can represent
any character in the Unicode standard. UTF-8 is backwards compatible
with ASCII. UTF-8 is the preferred encoding for e-mail and web pages.
The Unicode Consortium develops the Unicode Standard. Their goal is to

16
 replace the existing character sets with its standard Unicode
Transformation Format (UTF).
 The Unicode Standard has become a success and is implemented in
HTML, XML, Java, JavaScript, E-mail, ASP, PHP, etc. The Unicode
standard is also supported in many operating systems and all modern
browsers.
 Xml version 1.0 because its simple to understand.
 The xml declaration usually includes a second attribute, encoding, which
specifies the encoding used for the document [utf-8].
 Following is the xml declaration element, which should be the first line of
every XHTML document:
<?xml version = "1.0" encoding = "utf-8"?>
 Note that this declaration must begin in the first character position of the
document file.
 The xml declaration element is followed immediately by an SGML
DOCTYPE command, which specifies the particular SGML document-
type definition (DTD) with which the document complies, among other
things.
 The !DOCTYPE declaration must be the very first thing in your HTML
document, before the <html> tag.
 The !DOCTYPE declaration is not an HTML tag; it is an instruction to
the web browser about what version of HTML the page is written in.
XHTML DOCTYPE is mandatory
 The xmlns attribute in <html> is mandatory
 <html>, <head>, <title>, and <body> are mandatory.
 Public because any one can use such kind of document.(for public use).
ENenglish language; W3c The World Wide Web Consortium (W3C)
is the main international standards organization for the World Wide Web
to provide some goal. DTDA Document Type Definition (DTD)
defines the structure or rules and the legal elements and attributes of an
XML document.
 A DTD can be declared inside an XML document or in an external file.
DTD contains some standards for defining an document(tags and
attributes).
 The following command states that the document in which it is included
complies with the XHTML 1.0 Strict standard:

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

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

17
An XHTML document must include the four tags <html>, <head>, <title>, and
<body>.
 The <html> tag identifies the root element of the document. So, XHTML
documents always have an <html> tag immediately following the
DOCTYPE command, and they always end with the closing html tag,
</html>.
 The html element includes an attribute, xmlns, that specifies the XHTML
namespace, as shown in the following element:

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

 Xmlns is the xml namespace method to avoid element name conflicts.
Xhtml is enbeded inside xml.
 Although the xmlns attribute’s value looks like a URL, it does not specify
a document. It is just a name that happens to have the form of a URL.
 An XHTML document consists of two parts, named the head and the
body.
 The <head> element contains the head part of the document, which
provides information about the document and does not provide the
content of the document.
 The body of a document provides the content of the document.
 The content of the title element is displayed by the browser at the top of
its display window, usually in the browser window’s title bar.

3) BASIC TEXT MARKUP

We will have a look at a complete XHTML document:
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<!-- complete.html A document which must be followed throughout the
notes -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> My first program </title>
</head>
<body>
<p> My Dear VTU Friends, All The Best..!! Have a Happy Reading of my
notes..!! </p>
</body>
</html>

18
Note: it’s mandatory to use first three lines of code. And explain the tag
examples.

4) Paragraphs:

It begins with <p> and ends with </p>. Multiple paragraphs may appear in a
single document.
<html>
<head>
<title> Paragraph </title>
</head>
<body>
<p> Paragraph 1 </p>
<p> Paragraph 2 </p>
<p> Paragraph 3 </p>
</body>
</html>

5) Line Breaks:
 When the content of paragraph element displayed other than at beginning
of line, browser breaks the current line and inserts blank line.
 The break tag is specified as <br />.
 The slash indicates that the tag is both an opening and closing tag.

19
6) Preserving White Space
 Sometimes it is desirable to preserve the white space in text—that is, to
prevent the browser from eliminating multiple spaces and ignoring
embedded line breaks. This can be specified with the <pre> tag.

7) Headings
 There are 6 levels of headings specified by tags:<h1>-<h6>
 <h1> highest leve; heading.
 Headings are displayed in bold face font
 Some browsers <h1>, <h2>, and <h3> use font sizes that are larger than
that of the default size of text,
 <h4> uses the default size, and <h5> and <h6> use smaller sizes. The
heading tags always break the current line, so their content always
appears on a new line. Browsers usually insert some vertical space before
and after all headings.
8) Block Quotations
 If we want block of text to be set off from normal flow of text in
document we use block quotation.
 The <blockquote> tag is used to make the contents look different from
the surrounding text.
 Block quotation of text is indented either on left or right side or both.
Another possibility is block can be set to italics.

20
9) Font Styles and Sizes:
 <b>, <i> and <u> specifies bold, italics and underline respectively.
 The emphasis tag, <em>, specifies that its textual content is special and
should be displayed in some way that indicates this distinctiveness. Most
browsers use italics for such content.
 The strong tag, <strong> is like the emphasis tag, but more so. Browsers
often set the content of strong elements in bold.
 The code tag, <code>, is used to specify a monospace font, usually for
program code.
Ex: cost = Quantity*price.
 Subscript and superscript characters can be specified using <sub> &
<sup> tags.

21
  Xhtml tags are categorized as block or inline. The content of inline tag
appears on current line.
 So inline tag doesnot implicitly include line break.
 Block tags are heading and blockquote whereas <em> and <strong> are
inlin tags.
 Block tags in xhtml cannot appear in content of inline tags. Similarly,
inline tags and text cannot be directly nested in body or form elements.

10) Character Entities:

 XHTML provides a collection of special characters that are sometimes
needed in a document but cannot be typed as themselves.
 In some cases, these characters are used in XHTML in some special way
—for example, >, <, and &. In other cases, the characters do not appear
on keyboards, such as the small raised circle that represents “degrees” in
a reference to temperature.
 These special characters are defined as entities, which are codes for the
characters.
 An entity in a document is replaced by its associated character by the
browser.

22
11) Horizontal Rules:
 The parts of a document can be separated from each other, making the
document easier to read, by placing horizontal lines between them.
 Such lines are called horizontal rules. The block tag that creates them is
<hr />.
 The <hr /> tag causes a line break (ending the current line) and places a
line across the screen.
 Note again the slash in the <hr /> tag, indicating that this tag has no
content and no closing tag.

12) The meta Element:

23
  The meta element is used to provide additional information about a
document.
 The meta tag has no content; rather, all of the information provided is
specified with attributes.
 The two attributes that are used to provide information are name and
content.
 The user makes up a name as the value of the name attribute and specifies
information through the content attribute. One commonly chosen name is
keywords; the value of the content attribute associated with the keywords
are those which the author of a document believes characterizes his or her
document.
 An example is <meta name = "Title" content = "Programming the
Web" /> <meta name = "Author" content = "Sahana" />
 Web search engines use the information provided with the meta element
to categorize Web documents in their indices.
 Metadata will not be displayed on the page, but will be machine parsable.
 Meta elements are typically used to specify page description, keywords,
author of the document, last modified, and other metadata.
 The metadata can be used by browsers (how to display content or reload
page), search engines (keywords), or other web services.

13) Images
 Image can be displayed on the web page using <img> tag.
 The most common methods of representing images are graphical
interchange format and Jpeg format.
 Files in both of these formats are compressed to reduce storage needs and
provide quicker transfer over internet.

24
 The GIF format s specific purpose is in moving of images.
 It uses 8 bit color representation for pixels allowing pixel to have 256
different colors.
 Files containing GIF images use .gif extension on their names. It can be
made to appear transparent.
 The JPEG format uses 24 bit color representation for pixels which allows
JPEG images to include more than 16 million different colors.
 Files stored in .jpeg extension format.
 This compression process loses some of the color accuracy of the image.
 Disadvantages of JPEG is that it doesn’t support transparency.
 Next is portable network graphics(PNG).
 Provides good replacement for JPEG and GIF because it has best
chacteristics of both.
 One disadvantage is that compression algorithm doesnot sacrifice picture
clarity, ie, its image requires more space than comparable JPEG images.
 When the <img> tag is used, it should also be mentioned which
image needs to be displayed. This is done using src attribute.
 Attribute means extra information given to the browser
 Whenever <img> tag is used, alt attribute is also used.
 Alt stands for alert.
 Some very old browsers would not be having the capacity to
display the images.
 In this case, whatever is the message given to alt attribute, that
would be displayed.
 Another use of alt is :
 when image display option has been disabled by user. The option is
normally disabled when the size of the image is huge and takes
time for downloading.
 The src attribute specifies the URL (web address) of the image:
<img src="url" alt="some_text">

 The alt attribute specifies an alternate text for an image, if the image
cannot be displayed.
 The alt attribute provides alternative information for an image if a user
for some reason cannot view it (because of slow connection, an error in
the src attribute, or if the user uses a screen reader).
<html>
<head>
<title>display image</title>
</head> <body>
<img src="java.png" alt="cannot display"/>

25
 </body>
</html>

Example:
<img src=”abc.jpg” alt= “” height=”120” width=”180” align= left
border=”2” hspace=”10” vspace=”10”/>

Align has few values:

Top, middle, bottom, left, right.
NOTE:
 JPEG Joint Photographic Experts Group
 GIF Graphic Interchange Format
 PNG Portable Network Graphics

14) XHTML Document Validation:

The W3C provides a convenient Web-based way to validate XHTML
documents against its standards.
 Step 1: The URL of the service is http://validator.w3.org/file-upload.html.
Copy & paste this link.
 Step 2: You will be driven to “Validate by File Upload” option
automatically.
 Step 3: Browse for a XHTML program file in your computer. (example:
F:/complete.html)
 Step 4: Click on “More Options” and select your criteria like show
source
 Step 5: After all the settings, click on “Check” button Now you will be
navigated to another page which shows success or failure. In our
example, the file complete.html is a valid XHTML file. So the output
shows success..!!

26
 Output:

15) HYPERTEXT LINKS

HTML links are hyperlinks or simply called as link which acts as pointer
to some resource.Resource can be XHTML document anywhere on web or may
be another place in document currently being displayed. A hyperlink is a text or
an image you can click on, and jump to another document.

Links:

27
Hyperlinks are the mechanism which allows the navigation from one page to
another.
The href attribute specifies the destination address
(http://www.w3schools.com/html/).The link text is the visible part.
The term “hyper” means beyond and “link” means connection. Whichever text
helps in navigation is called hypertext.
Hyperlinks cam be created using <a> (anchor tag)
The attribute that should be used for <a> is href .
Note: explaination refer textbook

Link.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd"> <!-- complete.html A
document which must be followed throughout the notes -->
<html xmlns = "http://www.w3.org/1999/xhtml"> <head>
<title> My first program </title>
</head>
<body>
<a href = "linnk.html"> CLICK HERE </a>
</body>
</html>
Program: link.html Now, execute “linnk.html” file, you will get aftr we click on
CLICK HERE link we will be navigating to link.html.
linnk.html
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<!-- complete.html A document which must be followed throughout the notes
-->
<html xmlns = "http://www.w3.org/1999/xhtml"> <head>
<title> My first program </title>
</head>
<body>
hello world...
</body>
</html>
After clicking on the above text, we can navigate to another page “link.html” as
shown below

Targets within Documents:

28
  If the target of a link is not at the beginning of a document, it must be
some element within the document, in which case there must be some
means of specifying it.
 The target element can include an id attribute, which can then be
used to identify it in an href attribute. (observe the scroll bar in the
outputs given).
Target Value Description

_blank Opens the linked document in a new window or tab

_self Opens the linked document in the same frame as it was clicked (this is

_parent Opens the linked document in the parent frame

_top Opens the linked document in the full body of the window

framename Opens the linked document in a named frame

<html>
<head>
<title> target link</title>
</head>
<body>
<h1> Puneeth Rajkumar </h1>
<a href = "#bottom"> Click Here For His Autobiography </a> <p><pre>
Appu Abhi Veera Kannadiga Maurya Akaash Namma Basava Ajay Arasu
Milana Bindaas Vamshi Raaj Raam Prithvi Jackie Hudugaru Paramathma
Anna Bond
</pre></p>
<h2> AutoBiography </h2>
<p id = "bottom"> <pre> Puneeth Rajkumar was born on 17th of March,
1975. His father Dr. Rajkumar is the Legend of Kannada Film Industry. His
mother is Smt. Parvathamma Rajkumar who is a renowned producer in the
industry. His brothers ShivaRajkumar and RaghavendraRajkumar are very
popular heroes. He is married to Smt. Ashwini Revnath He has two
daughters namely Dhrithi and Vanditha.. At present, Puneeth is the greatest
star of Kannada Film Industry. </pre>
</p>
</body>

29
 </html>

 here we are not creating two separate files, but we are specifying a target
within the same document itself. If you click on the above link, you will
be redirected to the bottom of the page which contains Autobiography of
Puneeth Rajkumar. This is useful for lengthy documents like e-
newspaper, e-magazine etc.,

16) LISTS
Ordered unordered and definition lists
 Unordered Lists:
 The <ul> tag, which is a block tag, creates an unordered list. Each
item in a list is specified with an <li> tag (li is an acronym for list
item).
 Any tags can appear in a list item, including nested lists. When
displayed, each list item is implicitly preceded by a bullet.

30
 <!DOCTYPE html>
<html>
<body>
<h2>Unordered List with Default Bullets</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

</body>
</html>
Output:

Unordered List with Default Bullets

 Coffee
 Tea
 Milk

 Ordered Lists:

 Ordered lists are lists in which the order of items is important.

 This orderedness of a list is shown in the display of the list by the
implicit attachment of a sequential value to the beginning of each
item.
 The default sequential values are Arabic numerals, beginning with 1.
 An ordered list is created within the block tag <ol>. The items are
specified and displayed just as are those in unordered lists, except that
the items in an ordered list are preceded by sequential values instead

31
 of bullets.

Nested Lists:
<html>
<head>
<title> nested lists </title>
</head>
<ol>
<li> Information Science
</li>
<ol>
<li>OOMD</li>
<li>Java & J2ee</li>
<ul>
<li>classes and methods</li>
<li>exceptions</li>
<li>applets</li>
<li>servelets</li>
</ul>
<li>Computer Networks</li>
<ul> <li>Part 1</li>
<li>Part 2</li>
</ul>
<li>DBMS</li>
<li>Operations Research</li>
</ol>
<li> Computer Science</li>

32
 <ol>
<li>Compiler Design</li>
<li>FLAT</li>
<ul>
<li>NFA</li>
<li>DFA</li>
<li>CFG</li>
</ul>
<li>Computer Graphics</li>
<li>Artificial Intelligence</li>
</ol>
</ol>
</html>
O/p:
Nested Lists:
1. Information Science
1. OOMD
2. Java & J2ee
 classes and methods
 exceptions
 applets
 servelets
3. Computer Networks
 Part 1
 Part 2
4. DBMS
5. Operations Research
2. Computer Science
1. Compiler Design
2. FLAT
 NFA
 DFA
 CFG
3. Computer Graphics
4. Artificial Intelligence

--Definition Lists:
 As the name implies, definition lists are used to specify lists of terms and
their definitions, as in glossaries.
 A definition list is given as the content of a <dl> tag, which is a block tag.
 Each term to be defined in the definition list is given as the content of a
<dt> tag.
 The definitions themselves are specified as the content of <dd> tags.

33
  The defined terms of a definition list are usually displayed in the left
margin; the definitions are usually shown indented on the line or lines
following the term.
<!DOCTYPE html>
<html>
<body>

<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>

</body>
</html>
Output:
Coffee
Black hot drink
Milk
White cold drink

17) TABLES
 A table is a matrix of cells.
 The cells in the top row often contain column labels, those in the
leftmost column often contain row labels, and most of the rest of the
cells contain the data of the table. The content of a cell can be almost any
document element, including text, a heading, a horizontal rule, an image,
and a nested table.
Basic Table Tags:
 A table is specified as the content of the block tag <table>.
 There are two kinds of lines in tables: the line around the outside of the
whole table is called the border; the lines that separate the cells from each
other are called rules.
 It can be obtained using border attribute. The possible values are
“border” or any number. <table border=”3”>
 The table heading can be created using <caption> tag.
 The table row can be created using <tr> tag.
 The column can be created either by using <th> tag (stands for table
header which is suitable for headings) or <td> tag (stands for table data
which is suitable for other data).

34
  <caption> element to define a table caption.

Table without border

Table with Border

35
Table with heading

--Rowspan And Colspan Attributes

 Multiple-level labels can be specified with the rowspan and colspan
attributes.
 Colspan attribute specification in table header or table data tag tells the
browser to make the cell as wide as specified number of rows below it
in table.
 Rowspan attribute of table heading and table data tags does for for rows.
 A table that has 2 level of column labels and also has row labels must
have empty upper-left corner cell that spans both multiple rows of
column labels and multiple coloumn. Such an cell is specified by
including both row and colspan attribute.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- e2_10.html
A solution to Exercise 2.10 - a simple table
-->
<html xmlns = "http://www.w3.org/1999/xhtml">

<head>
<title> A simple table </title>
</head>
<body>
<table border = "border">
<caption> Tree Characteristics </caption>

36
 <tr>
<td rowspan = "2" colspan = "2"> </td>
<th colspan = "4"> Tree </th>
</tr>
<tr>
<th> Pine </th>
<th> Maple </th>
<th> Oak </th>
<th> Fir </th>
</tr>
<tr>
<th rowspan = "4"> Characteristic </th>
<th> Average Height (feet) </th>
<td> 55 </td>
<td> 50 </td>
<td> 50 </td>
<td> 65 </td>
</tr>
<tr>
<th> Average Width (inches) </th>
<td> 18 </td>
<td> 26 </td>
<td> 24 </td>
<td> 28 </td>
</tr>
<tr>
<th> Typical Lifespan (years) </th>
<td> 150 </td>
<td> 230 </td>
<td> 310 </td>
<td> 135 </td>
</tr>
<tr>
<th> Leaf Type </th>
<td> Long needles </td>
<td> Broadleaf </td>
<td> Split leaf </td>
<td> Short needles </td>
</tr>
</table>
</body>
</html>

37
Output:
Tree Characteristics
Tree
Pine Maple Oak Fir
Average Height
55 50 50 65
(feet)
Average Width
18 26 24 28
(inches)
Characteristic
Typical Lifespan
150 230 310 135
(years)
Long Split Short
Leaf Type Broadleaf
needles leaf needles

-- The Align and Valign Attributes:

 The placement of the content within a table cell can be specified with the
align and valign attributes in the <tr>, <th>, and <td> tags.
 The align attribute has the possible values left, right, and center, with the
obvious meanings for horizontal placement of the content within a cell.
 The default alignment for th cells is center; for td cells, it is left.
 The valign attribute of the <th> and <td> tags has the possible values top
and bottom.
 The default vertical alignment for both headings and data is center.

<html> <head> <title> Align and valign </title> </head> <body> <p>Table
having entries with different alignments</p>
<table border="border">
<tr align = "center">
<th> </th>
<th> aa </th>
<th> sneha</th>
<th> K </th>
</tr>
<tr>
<th> Ramya </th>
<td align = "left"> Akaash </td>
<td align = "center"> Datta </td>
<td align = "right"> Ra </td>
</tr>
<tr>
<th> <br/>Rakshitha <br/><br/><br/>
</th>

38
 <td> sahana </td>
<td valign = "top">athiya </td> <td valign = "bottom"> arnav </td>
</tr>
</table>
</body>
</html>
o/p:

Table having entries with different alignments

aa sneha K
Ramya Akaash Datta Ra
athiya
Rakshitha sahana
arnav
-- The cellpadding and cellspacing Attribute:

 Cellspacing is the distance between cells. Cellpadding is the distance

between the edges of the cell to its content.(refer text).
<html>
<head>
<title> cell spacing and cell padding </title>
</head>
<body>
<h3>Table with space = 10, pad = 50</h3>
<table border = "7" cellspacing = "10" cellpadding = "50">
<tr>
<td> sneha </td>
<td>sahana </td>
</tr>
</table>
<h3>Table with space = 50, pad = 10</h3>
<table border = "7" cellspacing = "50" cellpadding = "10">
<tr>
<td>sneha </td>
<td>sahana </td>
</tr>
</table>
</body> </html>

Output:-

39
 Table with space = 10, pad = 50

sneha sahana

Table with space = 50, pad = 10

sneha sahana
Table Sections:
Tables naturally occur in two and sometimes three parts: header, body, and
footer. (Not all tables have a natural footer.) These three parts can be
respectively denoted in XHTML with the thead, tbody, and tfoot elements.
The header includes the column labels, regardless of the number of levels in
those labels. The body includes the data of the table, including the row
labels. The footer, when it appears, sometimes has the column labels
repeated after the body. In some tables, the footer contains totals for the
columns of data above. A table can have multiple body sections, in which
case the browser may delimit them with horizontal lines that are thicker than
the rule lines within a body section.

18) Forms:
 The most common way for a user to communicate information from a
Web browser to the server is through a form.
 XHTML provides tags to generate the commonly used objects on a screen
form. These objects are called controls or widgets.
 There are controls for single-line and multiple-line text collection,
checkboxes, radio buttons, and menus, among others.
 All control tags are inline tags.

18.1) The <form> tag

 All of the controls of a form appear in the content of a <form> tag. A
block tag, <form>, can have several different attributes, only one of
which, action, is required.
 The action attribute specifies the URL of the application on the Web
server that is to be called when the user clicks the Submit button.
 Our examples of form elements will not have corresponding application
programs, so the value of their action attributes will be the empty string
("").action=get/post.

40
The <input> Tag:
 Many of the commonly used controls are specified with the inline
tag <input>, including those for text, passwords, checkboxes, radio
buttons, and the action buttons Reset, Submit, and plain.
 Text Box
 It is a type of input which takes the text.
 Any type of input can be created using <input>
 The type attribute indicates what type of input is needed for the text
box, the value should be given as text.
 For any type of input, a name has to be provided which is done
using name attribute.
 The size of the text can be controlled using size attribute.
 Every browser has a limit on the number of characters it can
collect. If this limit is exceeded, the extra characters are chopped
off. To prevent this chopping, maxlength attribute can be used.
When maxlength is used, users can enter only those many
characters that is given as a value to the attribute.
 Single-line text input controls
 Password-input controls
 Multi-line text input controls.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<!-- complete.html A document which must be followed throughout -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>Text Box</title>
</head>
<body>
<form action = " ">
<p> <label>Enter your Name: <input type = "text" name = "myname" size =
"20" maxlength = "20" />
</label> </p>
</form>
 Password Box
o If the contents of a text box should not be displayed when they are
entered by the user, a password control can be used.
o In this case, regardless of what characters are typed into the password
control, only bullets or asterisks are displayed by the browser.

<form action = " ">

41
 <p> <label>Enter the email id: <input type = "text" name = "myname" size =
"24" maxlength = "25" />
</label> </p>
<p>
<label>Enter the password: <input type = "password" name = "mypass" size
= "20" maxlength = "20" /> </label>
</p>
</form>
 Radio Button
o Radio buttons are special type of buttons which allows the
user to select only individual option
o Radio buttons are created using the input tag with the type
attribute having the value radio.
o When radio buttons are created, values must be provided
with the help of value attribute.
o All the radio buttons which are created would have same
name. This is because the radio buttons are group elements.
o If one of the radio buttons has to be selected as soon as the
web page is loaded, checked attribute should be used. The
value also would be checked.

<h3>Who is your Favourite Actor?</h3>

<form action = " ">
<p> <label><input type="radio" name="act" value="one"/>salman</label>
<label><input type="radio" name="act" value="two"/>varun</label>
<label><input type="radio" name="act" value="three"/>shahid</label>
<label><input type="radio" name="act" value="four"/>tiger</label> </p>
</form>

Check Box
 Check box is a type of input using which multiple options can be
selected.
 Check box can also be created using the <input> tag with the type having
the value “checkbox”.
 During the creation of check box, the value should be provided using the
value attribute.
 All the checkbox which are created would have the same name because
they are group elements.
 If one of the check box have to be selected as soon as the page is loaded,
checked attribute should be used with the value checked.

<h3>Who is your Favourite Actress?</h3>

42
<form action = " ">
<p> <label><input type="checkbox" name="act"
value="one"/>parneetha</label>
<label><input type="checkbox" name="act" value="two"/>shraddha</label>

<label><input type="checkbox" name="act" value="three"/>priyanka</label>

<label><input type="checkbox" name="act" value="four"/>anushka</label>
</p>
</form>

The <select> Tag:

 Menu items is another type of input that can be created on the page.
 To create the menu item, <select> tag is used.
 To insert the item in the menu, <option> tag is used.

<p> jgi Branches - Information Science, Computer Science, Electronics,

Electrical, Mechanical </p>
<form action = "">
<p> With size = 1 (the default)
<select name = "branches">
<option> Information Science </option>
<option> Computer Science </option>
<option> Electronics </option>
<option> Electrical </option>
<option> Mechanical </option>
</select>
</p>
</form>
Group options with <optgroup> element:
 Example:
<select name=”ab”>
<optgroup label=”hardware”>
<option value=”desktop”>desktop computer</option>
<option value=”laptop”>laptop computer</option>
</optgroup>
<optgroup label=”software”>
<option value=”officesoftware”> officesoftware </option>
<option value=”GAMES”> GAMES </option>
</optgroup>
</select>
 Option for grouping elements can contain disabled attributes.
<select name=”ab”>
<optgroup disabled=”disabled” value=””>--hardware--</option>

43
<option value=”desktop”>desktop computer</option>
<option value=”laptop”>laptop computer</option>
<optgroup disabled=”disabled” value=””>--software--</option>
<option value=”officesoftware”> officesoftware </option>
<option value=”GAMES”> GAMES </option>
</select>

 File select boxes

 If you want the user to upload a file to your website from computer,
you need to use file upload box also known as file select box.
 <input type=”file” name=”filetoupload” accept=”image/* /”>
 <legend>
<fieldset>element creates a border around the group of icon of form
controls to show that they are related.
<legend> allows you to specify a caption for the <fieldset> element,
which acts as group of form controls.
 The <textarea> Tag:
 Text area is a type of input using which multiple statements can be
entered.
 Text area is created using <textarea> tag.
 Text area should have the name.
 During the creation of text area, it should be mentioned how many
sentences can be entered. This is done using rows attribute.
 Similarly, it should also be mentioned how many characters can be
entered in a line. This is done using cols attribute.
 If the value given to rows is exceeded i.e. if users enter sentences
more than specified, the scroll bar automatically appears.

<form action=" ">

<h3> Enter your comments</h3>
<p> <textarea name="feedback" rows="5" cols="100">
</textarea> </p>
</form>

The Action Buttons:

 The Reset button clears all of the controls in the form to their initial
states.
 The Submit button has two actions: First, the form data is encoded and
sent to the server;
 second, the server is requested to execute the server-resident program
specified in the action attribute of the <form> tag.

44
  The purpose of such a server-resident program is to process the form data
and return some response to the user. Every form requires a Submit
button.
 The Submit and Reset buttons are created with the <input> tag.

Image button:
<input type=”image” src=”ab.jpg” alt=”submit” name=”btnimg” />
<form action=" ">
<p>
<input type="SUBMIT" value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
Output:

Example For Form Registration:

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml1-strict.dtd">
<!-- complete.html A document which must be followed throughout -->
<html xmlns = "http://www.w3.org/1999/xhtml">

45
<head>
<title> CompleteForm</title>
</head>
<body>
<h1>Registration Form</h1>
<form action=" ">
<p>
<label>Enter your email id: <input type = "text" name = "myname" size = "24"
maxlength = "25" /> </label>
</p>

<p>
<label>Enter the password: <input type = "password" name = "mypass" size =
"20" maxlength = "20" />
</label>
</p>

<p>Gender</p>
<p> <label><input type="radio" name="act" value="one"/>Male</label>
<label><input type="radio" name="act" value="two"/>Female</label> </p>
<p>Which of the following Accounts do you have?</p>
<p> <label><input type="checkbox" name="act" value="one"/>Gmail</label>

<label><input type="checkbox" name="act" value="two"/>Facebook</label>

<label><input type="checkbox" name="act" value="three"/>Twitter</label>
<label><input type="checkbox" name="act" value="four"/>Google+</label>
</p>
<p> Any Suggestions?</p> <p> <textarea name="feedback" rows="5"
cols="100"> </textarea> </p>
<p>Click on Submit if you want to register</p> <p> <input type="SUBMIT"
value="SUBMIT"/>
<input type="RESET" value="RESET"/>
</p>
</form>
</body>
</html>
Output:

46
19) FRAMES
 The browser window can be used to display more than one document at a
time. The window can be divided into rectangular areas, each of which is
a frame. Each frame is capable of displaying its own document.
Framesets:
 The number of frames and their layout in the browser window are
specified with the <frameset> tag.
 A frameset element takes the place of the body element in a
document. A document has either a body or a frameset but cannot
have both.
 The <frameset> tag must have either a rows or a cols attribute. (or
both)
 To create horizontal frames, rows attribute is used.
 To create vertical frames, cols attribute is used.
 The values for these attributes can be numbers, percentages and
asterisks.
 <frameset row= “200,300,400”> or
 <frameset row= “22%,33%,45%”>or can be written as
 <frameset row= “200,300,*”>
 Two or more values are separated by commas & given in quoted
string. (refer text)
To Demonstrate using rows Attribute and col attribute <html> <?xml
version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

47
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- frames.html
An example to illustrate frames
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Frames </title>
</head>
<frameset rows = "20%,20%,20%" cols = "25%,*">
<frame src = "Ex13.html" />
<frame src = "Ex2.html" name = "Links" />
</frameset>
</html>
Ex13.html
<?xml version = "1.0" encoding = "utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<!-- checkbox.html
An example to illustrate a checkbox
-->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Select </title>
</head>
<body>
<p>
Grocery menu-milk,bread,eggs,cheese
</p>
<form action = "">
<p>
with size = 1 (the default)
<select name="groceries">
<option> milk </option>
<option> bread </option>
<option> eggs </option>
<option> cheese </option>
</p>
</form>
</body>
</html>

Ex2.html
<?xml version = "1.0" encoding = "utf-8"?>

48
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- e2_3.html
This is a solution to Exercise 2.3
-->

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

<head>
<title> Exercise 2.3 </title>
</head>
<body>
<h2> Ruper B. Baggins </h2>
<p>
1321 Causeway Circle <br />
Middle, Earth <br />
[email protected]<br /><br />
<a href = "Ex1.html"> Mr. Baggins' Background </a>
</p>
<hr />
<h3> Bush Watcher </h3>
<p>
<em> Forest Keepers, Limited </em> <br />
14 Cranberry Way <br />
Middle, Earth <br />
<strong> (no web site yet) </strong>
</p>
</body>
</html>

o/p:

49
20) SYNTACTIC DIFFERENCES BETWEEN HTML AND XHTML
PARAMETERS HTML XHTML
Case Sensitivity Tags and attributes names Tags and attributes names
are case insensitive. must be in lowercase
Closing tags Closing tags may be omitted. All elements must have
<p>aaaaa closing tag
<p>hhhhh <input type=”text”
name=”add”></input>
Quoted attribute values Special characters are All attribute values must be
quoted. Numeric values are quoted including numbers
rarely quoted. <table border=”border”>
Border should be
compulsorly quoted
Explicit attribute values Some attribute values are All attribute values must be
implicit. For example: <table explicitly stated
border>. A default value for <table border=”border”>
border is assumed It is compulsory to give
value for attribute explicitly.
id and name attributes Both id and name attributes Use of id is encouraged and
are encouraged use of name is discouraged
Element nesting Rules against improper All nesting rules are strictly
nesting of elements (for enforced
example: a form element
cannot contain another form
element) are not enforced.

Character entities:
&quot; ”
&amp;  &
&lt;  <
&gt; >

Difference between inline and block elements:

Block-level elements appear on the screen as if they have line break before and
after them.
Inline elements can appear within sentences and donot have to appear on new
lines of their own.

50
Linking to E-mail address:
When you click on link that shows an email address, which is ready to send an
mail to that address.
<a href =mailto:[email protected]>[email protected] </a>

1. Difference between html and html5:

HTML HTML5
Doctype declaration in Html is too longer
DOCTYPE declaration in Html5
<!DOCTYPE HTML PUBLIC
is very simple "<!DOCTYPE
"-//W3C//DTD HTML 4.01//EN"
html>
"http://www.w3.org/TR/html4/strict.dtd">
character encoding in Html is also longer
character encoding (charset)
<!DOCTYPE HTML PUBLIC
declaration is also very simple
"-//W3C//DTD HTML 4.0
<meta charset="UTF-8">
Transitional//EN">
Audio and Videos are integral
Audio and Video are not part of HTML4 part of HTML5 e.g. <audio> and
<video> tags.
Vector Graphics is possible with the help
Vector graphics is integral part of
of technologies such as VML, Silverlight,
HTML5 e.g. SVG and canvas
Flash etc
It is almost impossible to get true JS GeoLocation API in HTML5
GeoLocation of user browsing any helps identify location of user
website especially if it comes to mobile browsing any website (provided
devices. user allows it)
It provides local storage in place
Html5 use cookies.
of cookies.
Not possible to draw shapes like circle, Using Html5 you can draw

51
 shapes like circle, rectangle,
rectangle, triangle.
triangle.
Does not allow JavaScript to run in Allows JavaScript to run in
browser. JS runs in same thread as background. This is possible due
browser interface. to JS Web worker API in HTML5

<article>
The HTML <article> element represents a self-contained composition in a
document, page, application, or site, which is intended to be independently
distributable or reusable (e.g., in syndication). Examples include: a forum post,
a magazine or newspaper article, or a blog entry.
<article class="film_review">
<header>
<h2>Jurassic Park</h2>
</header>
<section class="main_review">
<p>Dinos were great!</p>
</section>
<section class="user_reviews">
<article class="user_review">
<p>Way too scary for me.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-16 19:00">May 16</time>
by Lisa.
</p>
</footer>
</article>
<article class="user_review">
<p>I agree, dinos are my favorite.</p>
<footer>
<p>
Posted on
<time datetime="2015-05-17 19:00">May 17</time>
by Tom.
</p>
</footer>
</article>
</section>
<footer>

52
 <p>
Posted on
<time datetime="2015-05-15 19:00">May 15</time>
by Staff.
</p>
</footer>
</article>

<section>

The HTML <section> element represents a standalone section of functionality

contained within an HTML document, typically with a heading, which doesn't
have a more specific semantic element to represent it.

As an example, a navigation menu should be wrapped in a <nav> element, but a

list of search results and a map display and its controls don't have specific
elements, and could be put inside a <section>.

<aside>
The HTML <aside> element represents a section of a document with content
connected tangentially to the main content of the document (often presented as a
sidebar).
<article>
<p>
The Disney movie <em>The Little Mermaid</em> was
first released to theatres in 1989.
</p>
<aside>
<p>
The movie earned $87 million during its initial release.
</p>
</aside>
<p>
More info about the movie...
</p>
</article>
<header>
The HTML <header> element represents a group of introductory or
navigational aids. It may contain some heading elements but also other elements
like a logo, a search form, and so on.
<header>
<h1>Main Page Title</h1>
<img src="mdn-logo-sm.png" alt="MDN logo">

53
</header>
<footer>
The HTML <footer> element represents a footer for its nearest sectioning
content or sectioning root element. A footer typically contains information about
the author of the section, copyright data or links to related documents.
<footer>
Some copyright info or perhaps some author
info for an &lt;article&gt;?
</footer>

<datalist>
<datalist> tag specifies set of options for <input> element.
<!DOCTYPE html>
<html>

<head>
<title>HTML Datalist Tag</title>
</head>

<body>
<input list = "tutorials" />

<datalist id = "tutorials">
<option value = "Java">
<option value = "ASP">
<option value = "PHP">
<option value = "Ruby">
<option value = "jQuery">
</datalist>
</body>

</html>

<audio>,<video>
HTML5 features, include native audio and video support without the need for
Flash.
The HTML5 <audio> and <video> tags make it simple to add media to a
website. You need to set
src
attribute to identify the media source and include a controls attribute so the user
can play and
pause the media.
Embedding Video

54
Here is the simplest form of embedding a video file in your webpage −
<video
src
=
"foo.mp4"
width
=
"300"
height
=
"200"
controls
>
Your browser does not support the
<video>
element.
</video>
The current HTML5 draft specification does not specify which video formats
browsers should
support in the video tag. But most commonly used video formats are −
Ogg
− Ogg files with Thedora video codec and Vorbis audio codec.
mpeg4
− MPEG4 files with H.264 video codec and AAC audio codec.
You can use <source> tag to specify media along with media type and many
other attributes. A
video element allows multiple source elements and browser will use the first
recognized format −
<!DOCTYPE HTML>
<html>
<body>
<video
width
=
"300"
height
=
"200"
controls
autoplay
>
<source
src

55
=
"/html5/foo.ogg"
type
=
"video/ogg"
/>
<source
src
=
"/html5/foo.mp4"
type
=
"video/mp4"
/>
Your browser does not support the video element.
</video>
</body>
</html>
This will produce following result −
Video Attribute Specification
autoplay This boolean attribute if specified,
the video will automatically begin
to play back as soon as it can do so
without stopping to finish loading
the data.
autobuffer This boolean attribute if specified,
the video will automatically begin
buffering even if it's not set to
automatically play.
controls If this attribute is present, it will
allow the user to control video
playback, including volume,
seeking, and pause/resume
playback.
height This attribute specifies the height of
the video's display area, in CSS
pixels.
loop This boolean attribute if specified,
will allow video automatically seek
back to the start after reaching at
the end.
poster This is a URL of an image to show
until the user plays or seeks.

56
src The URL of the video to embed.
This is optional; you may instead
use the <source>
preload This attribute specifies that the
video will be loaded at page load,
and ready to run.

Embedding Audio
HTML5 supports
<audio> tag which is used to embed sound content in an HTML or XHTML
document as follows.
<audio
src
=
"foo.wav"
controls
autoplay
>
Your browser does not support the
<audio>
element.
</audio>
The current HTML5 draft specification does not specify which audio formats
browsers should
support in the audio tag. But most commonly used audio formats are
ogg, mp3
and
wav
.
You can use <source> tag to specify media along with media type and many
other attributes. An
audio element allows multiple source elements and browser will use the first
recognized format −
<!DOCTYPE HTML>
<html>
<body>
<audio
controls
autoplay
>
<source
src
=

57
"/html5/audio.ogg"
type
=
"audio/ogg"
/>
<source
src
=
"/html5/audio.wav"
type
=
"audio/wav"
/>
Your browser does not support the audio element.
</audio>
</body>
</html>
autoplay This boolean attribute if specified,
the audio will automatically begin
to play back as soon as it can do so
without stopping to finish loading
the data.
autobuffer This boolean attribute if specified,
the audio will automatically begin
buffering even if it's not set to
automatically play.
controls If this attribute is present, it will
allow the user to control audio
playback, including volume,
seeking, and pause/resume
playback.
loop This boolean attribute if specified,
will allow audio automatically seek
back to the start after reaching at
the end.
preload This attribute specifies that the
audio will be loaded at page load,
and ready to run.

58