Chapter 1: Fundamentals of Web Internet Programming

Chapter-1
Fundamentals of web

Internet, Intranet, WWW, Web browsers, Web servers, Search Engines, DNS, URLs, MIME,
HTTP, CGI, Internet Security.

Computer Network (1Mark)

A computer network is a group of devices connected with each other through a transmission
medium such as wires, cables etc. These devices can be computer, printers, scanners, Fax
machines etc.

Types of Computer Network

There are 3 types of computer Network

1) LAN [Local Area Network]

2) MAN [Metropolitan Area Network]

3) WAN [Wide Area Network]

1. LAN
 LAN is a group of computers connected to each other in a small area such as
building, office.
 It is less costly and provides higher security.

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 1

Chapter 1: Fundamentals of Web Internet Programming

2. MAN
 MAN is a network that covers a large geographic area by interconnecting a
different LAN to form a large network.
 It has a higher range than LAN.

3. WAN
 A WAN is a network that extends over a large geographical areas such as states or
countries.
 A WAN is widely used in the field of business, government and education.

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 2

Chapter 1: Fundamentals of Web Internet Programming

Internet (1 Mark)
The internet is the Large network that connects computers all over the world.
 Through the internet, people can share information and communicate from anywhere
with an internet connection.
 The internet carries large range of information, resources and services.
 The internet consists of millions of private, public, business and government networks.

Uses of Internet
 Electronic Mail
At least 85% of the inhabitants of cyber space send and receive e-mail. Some 20 million
e-mail messages cross the internet every week.

 Research
It include personal research on a particular subject, students doing research for academic
projects and papers, and journalists and other writers researching stories.

 Downloading files
Downloading file is accessing information from a web browser, e-mail browser or other
similar systems and saving it to a computer.

 Group Discussions
These include public, and the private mailing lists.

 Interactive Games
Online video games can be a way to help supplement child’s learning and teach them key
life skills.

 Education and self improvement

On-line courses and workshops have found yet another outlet.

 Shopping
Online stores usually enable shoppers to use search features to find specific models,
brands or items.

History of Internet

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 3

Chapter 1: Fundamentals of Web Internet Programming

Year Description
1958 Under president Eisenhower, the US formed an Advanced Research Projects
Agency(ARPA) to facilitate more research in science, which could meet
military requirements.
1969 Introduced with ARPANET to implement packet switching
1974 Vint cerf and Robert E Kahn introduced the Transmission Control Protocol
and Internet Protocol(TCP/IP suite)
1991 Tim Berners Lee invented the World Wide Web(WWW) which runs on HTTP.
1995 Internet Service Providers(ISP) allowed the public to subscribe to the
Internet.
2000-2020 Rise of social networking(Facebook, twitter), Blogging sites(Blogspot,
wordpress)

Intranet (1 Mark)
Intranets are private networks used by organizations to distribute communications exclusively
to their workforce and they have been used for decades by enterprises for internal
communications.

Difference between Internet and Intranet

Internet Intranet

The internet is the Large network that Intranets are private networks used by
connects computers all over the world organizations to distribute communications
exclusively to their workforce and they have
been used for decades by enterprises for
internal communications.
In internet, there are multiple users. In intranet, there are limited users.
Internet is unsafe Intranet is safe.
In Internet, there are more number of visitors. In Intranet, there are less number of visitors.
Internet is a public network. Intranet is a private network
Anyone can access internet In this, anyone cant access the intranet
Internet provides unlimited information Intranet provides limited information

WWW (1 Mark)
 WWW is abbreviated as World Wide Web
 WWW is a collection of webpages found on the network access via internet.
 Tim Berners Lee, a British Scientist, invented the World Wide Web (WWW) in 1989,
while working at CERN.

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 4

Chapter 1: Fundamentals of Web Internet Programming

 With a web browser, a user views webpages that may contain text, images and other
multimedia and navigates between them using hyperlinks.
 WWW is the information sharing model that is built on top of the internet.

Internet Protocol (1 Mark)

Internet Protocol(IP) is a set of rules for routing and addressing packets of data so that they
can travel across networks and arrive at the correct destination.
Every machine on the internal has a unique identifying number called an IP Address.
Ex: [Link]
The format of IP Address is a 32 bit numeric address written as four numbers separated by
periods. Each number can be zero to 255.

Domain Names
A domain name is the textual address where internet users can access website.
The most people type the domain name in the browser than IP address as it is easy to remember
name than numbers.
Example: IP address of [Link] is [Link]
Top level Domains
.com Commercial business
.org Organizations(typically, non profit)
.gov Government agencies
.edu Educational institutions
.net Network organizations
.mil Military organizations
.int International organizations

Country Code domains.

A unique two letter combinations for every country.
Country code domains
.in India
.au Australia
.uk United Kingdom
.us United states

Sub domains are the third level domains that are used to organize the website containing in a
systematic manner.
They are just like folders under root directory.

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 5

Chapter 1: Fundamentals of Web Internet Programming

Ex: [Link]

Web Browser (1 mark)

A web browser is a software application used to locate and display the web pages.
It is able to retrieve, find, view and send information over the internet.
When request is made by our computer then that computer is called client and when the request
gets serve by another computer then that computer is called server.
Ex: Google chrome, Mozilla Firefox, Microsoft internet explorer, opera

Basic Functions of Web Browsers

Provide a way for users to access and navigate web pages.
Display web pages properly.
Provide technology to enable multimedia features.
Provide access to internet services (such as FTP, Telnet, and E-Mail.

Web Server ( 1 Mark )

A webserver is a computer that runs websites.
The primary function of a web server is to store, process and deliver web pages to clients.
The communication between client and server takes place using the Hypertext Transfer Protocol
(HTTP)

Types of web server (3 marks/ 5 marks)

There are 5 types of webserver. They are
1) Apache Web server
2) Microsoft Internet Informataion Services(MIIS)
3) Nginx
4) Lighttpd

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 6

Chapter 1: Fundamentals of Web Internet Programming

5) Sun java system webserver

Apache Web Server

Apache Webserver is one of the most popular webservers developed by the apache software
foundation. It is a free and open source webserver for windows, Mac OS X, UNIX, Linux,
Solaris and other operating system.

Microsoft Internet Information Services(MIIS)

It is developed by Microsoft for Microsoft platforms. It is not open sourced but widely used.

Nginx
Nginx is a popular open source web server for administrators because of its light resource
utilization and scalability.

Lighttpd
A free webserver that comes with FreeBSD operating system. It is fast and secure, while
consuming less CPU power.

Sun Java System Web server

A free web server from sun microsystems that can run on windows, Linux and Unix. It is well
equipped to handle medium to large websites.

Domain Name Server (DNS) [ 1 mark ]

Domain Name Server is a software system that translates a computer fully qualified domain
name into IP address.
The main function of DNS is to translate domain names into IP Addresses, which computers
can understand.

URL (1 mark)
URL is abbreviated as Uniform Resource Locator
URL is used to specify addresses on the world wide web.

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 7

Chapter 1: Fundamentals of Web Internet Programming

URL include the protocol(Ex: HTTP, FTP), the domain name (or IP address) and additional path
information(folder/file).
Syntax: scheme://location:port/[Link]?querystring=1
Scheme: it is the communication protocol . The most commonly used scheme for web
communication is http or https
Location: it is the DNS or IP address
Port: The TCP port number that the server is listening for incoming request from the clients. It is
a 16 bit binary number by default port is 80.
[Link]: the name and location of the requested resource under the server document
base directory.
Ex: [Link] program/[Link]

MIME (1 mark)
MIME stands for “Multipurpose Internet Mail Extensions”
MIME is a way of identifying files on the internet according to their nature and format.
MIME is an internet standard that extends the format of email messages to support text in
character sets other than ASCII, as well as attachments of audio, video, images and application
programs.
MIME enables to send and receive graphics audio and video files via the internet mail system.
Syntax: type/ subtype
Type Subtype Example
Text Plain or html Text/plain or text/html
Image Gif or jpeg Image/gif or image/jpeg
Video Mpeg Video/mpeg
Application Pdf Application/pdf
application doc Application/doc

SMTP
SMTP stands for “Simple Mail Transfer Protocol”
It is a standard protocol on a TCP/IP network for sending emails through servers from one
computer to another computer.

HTTP (1 Mark)
HTTP stands for “ HyperText Transfer Protocol”

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 8

Chapter 1: Fundamentals of Web Internet Programming

HTTP is an application protocol which allows the fetching of resources such as HTML
documents.
Communication between client computers and web servers is done by sending HTTP request and
receiving HTTP Responses.
The communication using HTTP involve two phases.
1. HTTP Request Phase
2. HTTP Response phase
HTTP Message: It consists of three parts message head, blank line, message body.

HTTP Request Message

Where the client sends a request message to server response phase.

Request Line
Request heads
Blank Line
Request Message
Message body(optional)

Syntax of request Line:

Request method name Request URL HTTP version
HTTP utilizes specific request methods in order to perform various tasks.
GET : the client can use the GET method to request a web resource from the server.
HEAD : The client can use the HEAD method to get the header information of the specified
document.
POST: POST method is used to post the data up to the web server.
PUT: Ask the server to store the data delete.
DELETE: Ask the server to delete the data
TRACE: Ask the server to return a diagnostic trace of the action is take.
OPTIONS: Ask the server to return the list of request methods its supports.
Request URL
It specifies the address of the requested file.
HTTP versions two versions are currently used

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 9

Chapter 1: Fundamentals of Web Internet Programming

1) HTTP 1.0
2) HTTP 1.1
Syntax of request header:
Request header name: request header value 1, request header 2,…
Example: host: [Link]
Accept: image/gif
Accept language: us .en

Connection: keep a line

HTTP response message

The format of http response message is

Status line
Response head
Blank Line
Response message

Status line:
Syntax:
http version status code reason phrase
HTTP version: it is used in this session either http/1.0 or http/1.1
Status code: A three digit number generated by the server to reflect the outcome of the request.
Reason phrase: it gives the short explanation to the status code
Example:
http/1.1 200 ok
http/1.0 404 not found
http/1.1 500 internal server error
Response header:
Syntax:
Response header name: response header value

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 10

Chapter 1: Fundamentals of Web Internet Programming

Example:
Content type: text/html
Content length:80
Connection keep aline
Communication between clients and servers is done by requests and responses:
1) A client(a browser) sends an HTTP request to the web
2) An web server receives the request
3) The server runs an application to process the request
4) The server returns an HTTP response (output) to the browser
5) The client (the browser) receives the response

Stateless Protocol
Stateless protocols are the type of network protocols in which client send request to the server
and server response back according to the current state.
It does not require the server to retain session information or a status about each communicating
partner for multiple request.
Examples: HTTP and IP

CGI [ 1 Mark]
CGI stands for Common Gateway Interface
CGI is a server extension that extends the capability of web server
It is the technology allows the web browsers to submit forms and connect to programs over a
web server.
Example: when we fill up the form and submit the form applying click the submit button and it
goes , what are the results from this level is CGI

How dynamic document is created and processed? / Working of CGI [3mark]

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 11

Chapter 1: Fundamentals of Web Internet Programming

In the first step the web client connect to the web server and sends the program to the webserver.
The web server runs a CGI program in the server side.
The webserver sends that particular dynamic web document is as a response to the web client.
As a fresh document is created for each request the contest of the dynamic document can vary
from one request to another.
Example: getting the date and time from the webserver.

Advantages of CGI
1) CGI is used for simple interactive applications
2) CGI programs are server side programs.
3) CGI programs can be written in any programming languages like Perl, PHP, python, Java,
C++
4) It is simple
5) it is light weight and speedy because it does not required any particular library to make a CGI
program

Environment variables
A CGI program uses of list of environment variables to response to the request from the browser.
Environment Variable Meaning
CONTENT_LENGTH The length of the data passed to CGI root
directory of web documents
DOCUMENT_ROOT Root directory of web documents
HTTP_USER_AGENT Type of the client programmer(browser)
SERVER_NAME It specifies the server name and IP address
SERVER_ROOT Port number of the server

Search Engine (1 mark)

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 12

Chapter 1: Fundamentals of Web Internet Programming

A search engine is a software system that is designed to search for information on the world
wide web.
Search engine searches the world wide web in a systematic way for particular information
specified in a textual web search query.

How search engine works?

Search engines have three primary functions
1. Crawl
2. Index
3. Rank
What is search engine Crawling?
Crawling is the discovery process in which search engines send out a team of robots(known as
crawlers or spiders) to find new and updated content.
Googlebots starts out by fetching a few web pages and then follows the links on those web pages
to find new URLs.
By hopping along this paths, crawler add the new content to their index called caffeine- a
massive database of discovered URLs.
What is search engine index?
Search engines process and store information they find in an index, a huge database of all the
content they’ve discovered and deem to good enough to serve up to searchers.
What is search engine ranking?
When someone performs a search, search engines scour their index for highly relevant content
and then orders that content in the hopes of solving the searcher’s query.
This ordering of search results by relevance is known as Ranking.

Examples of Search engines

Google
Created in 1996 by Sergey Brin and Larry Page as a research project. It also provides the search
results for a wide array of other engines also.

Youtube
Youtube was founded in 2005 by veterans of PayPal and was purchased by Google. It receives
more than 1.5 billion logged in users per month and feeds over 1 billion hours of video each day
to users.

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 13

Chapter 1: Fundamentals of Web Internet Programming

Amazon
Amazon was launched in 1995. it is one of the first large companies to sell goods online.

Facebook
In 2006, facebook was developed by Mark Zuckerberg. It crosses 2 billion searches/ day. It also
gives businesses and advertisers a market access.

Bing
Bing replaced MSN search as Microsoft’s answer to Google in 2009. it provides of various
search services, including web, video, image and map search products.

Internet Security
Internet security is a standard for protecting data that gets sent through the internet.
The most common security issues are
1. Privacy
2. Authentication
3. Integrity
4. Non repudiation
5. Encryption and Decryption

1) Privacy: There should be privacy for client data.

2) Authentication: all the data is residing either on client or server must be used by
authentication person only.
3) Integrity: Data Integrity means maintaining and assuring the accuracy and completeness of
data over its entire life cycle.
4) Non repudiation: Non repudiation refers to a situation where a statements author cannot
successfully validate of an associated contract.
5) Encryption and decryption: Encryption is a technique by which information send over the
network is converted into another form, so that no one can understand that information.
Decryption is the technique by which the encrypted method message is decoded back to its
original message.

Question Bank
1 Mark Questions:
1) Define Internet.

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 14

Chapter 1: Fundamentals of Web Internet Programming

2) What is Domain Name?

3) Expand WWW.
4) Expand HTTP.
5) Which is the stateless Protocol?
6) Which is the most popular web server?
7) What is hyper text?
8) What is MIME?
9) What is web browser?
10) Name any two search engines.
11) What is Internet Security?
12) What is Intranet?
13) What is Internet Protocol?
14) Expand URL.
15) What is CGI?
16) What is Search engine?

3 Marks Questions:
1) What is DNS? Explain its task.
2) Explain MIME.
3) Explain Web browser.
4) Explain in brief origin of internet.
5) Write the differences between Internet and Intranet.
6) How the dynamic document is created and processes?

5 Marks Questions:
1) What is webserver? Explain the types of webserver.
2) What is Internet? Explain the merits of internet.
3) Discuss Internet Protocol Address.
4) Discuss URL Paths.
5) Explain Uniform Resource Locators.
6) Write a note on Multi Purpose Internet Mail Extensions.

7 Marks Questions:
1) Explain a) MIME b) WWW c) DNS with suitable examples.
2) Explain the phases of HTTP.
3) Discuss the general forms of HTTP request.
*****

Shruthi S, Asst Prof, Dept. of BCA, VVFGC, Tumkur Page 15

Chapter 2: Introduction to HTML Internet Programming

Chapter 2: Introduction to HTML

Introduction, History and Versions of HTML, Advantages & Disadvantages of HTML,
XHTML- Differences between HTML and XHTML. Advantages of XHTML over HTML,
comments, Standard XHTML document structure, XHTML Doc Types, Syntax and Rules of
XHTML.

Definition of HTML (1 Mark)

 HTML stands for Hyper Text Markup Language.

 HTML is the standard markup language for creating webpages.
 HTML is used to define the structure and layout of web page by different tags which
have different attribute.
 As the viewer of a web page, we see only contents not HTML codes. It is hidden
from view.
 HTML consists of series of elements. These elements tell the browser how to display the
content.

History and Versions of HTML

Year Version
1989 Tim Berners Lee invented WWW
1991 Tim Berners Lee invented HTML
1993 HTML 1.0 is released. It is released for sharing information that can be readable and
accessible via web browsers. It didn’t support the background color or background
image of the page.
1995 HTML 2.0 is released. It contains all the features of HTML [Link] color
and images could be set. Forms became available with a limited set of fields. First
time visitors to a web page could submit information. Tables also came in picture.
1997 HTML 3.2 is released by Dave Raggett, who introduced a fresh paper on draft on
HTML. HTML 3.2 support CSS level 1. HTML 3.2 didn’t included support for the
frame but browsers makers implemented them anyway.
1999 W3C Recommendation: HTML 4.01. HTML 4.01 also provides the basis for
meaning of XHTML elements and attributes, reducing the size of XHTML 1.0
specification.
2008 WHATWG HTML 5 First public Draft. HTML 5 improves interoperability and
reduce the development costs by making precise rules on how to handle all HTML
elements and how to recover from errors. HTML 5 included functions for
embedding audio, video, graphics, client-side data storage and interactive
documents.
2015 XHTML 1.0

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 1

Chapter 2: Introduction to HTML Internet Programming

XHTML is the first specification for the HTML and XML cross-breed.
XHTML document can be manipulated by any program that understands XML.
2018 XHTML 1.1
XHTML 1.1 breaks features of XHTML 1.0 down into separate modules which
browsers may or may not choose to implement depending on their appropriates for
the web browser devices.

About W3C (3 Marks)

 W3C stands for World Wide Web Consortium.

 The World Wide Web Consortium is the main international standards organization for
the World Wide Web.
 It is founded in 1994 and currently led by Tim Berners Lee.
 The primary function of the consortium is made up of member organizations that
maintain full time staff working together in the development of standards for the World
Wide Web.

Web Standards (3 Marks)

 Web Standards is defined as a formal set of standards and technical specifications used
to define aspects of the World Wide Web.
 These are best practice standards used by organizations to build web sites and web
applications.
 The commonly referenced Web Standards are HTML, XML 1.0, XHTML, CSS.

Advantages & Disadvantages of HTML: (5 Marks)

Advantage:

1. HTML is easy to learn and use.

2. HTML is free.
3. HTML is supported by all browsers.
4. Html is simple to edit.
5. HTML is user friendly.
Disadvantage:

1. HTML can create only static and plain pages so if we need dynamic pages then
HTML is not useful.
2. Need to write lot of codes for making simple web pages..

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 2

Chapter 2: Introduction to HTML Internet Programming

3. Security features are not good in HTML.

4. If we need to write long code for making webpage it produces some complexity.

Definition of XHTML (1 Mark)

 XHTML stands for Extensible Hyper Text Mark up 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.

Difference between HTML and XHTML: (3 Marks)

HTML XHTML
1. The tag names and attribute names are 1. The tag names and attribute name are case
case insensitive. sensitive.
2. In HTML, we can use capital letters for [Link], XHTML, all tags must be written in
element, lowercase for attributes. lowercase.
3. Not required in HTML. 3. Every element we use in XHTML must
have both an opening and closing tag.
4. It is optional. 4. In XHTML, empty element may use either
the empty element syntax (br />) or have an end
tag immediately follow the start tag (<br>
</br>).
[Link] required. 5. All attributes in XHTML must be contained in
quotes.<input type=”submit” name=”submit
button”/>
6. Some elements have attributes that do 6. In XHTML , all attribute must be expressed in
not appear to require a value-for attribute-name and attribute-value pairing with
example. quote marks surroundings the attribute value –
part.
<input type=”checkbox” name=”chkNewsletter”
checked=”checked”.>
[Link] allows Minimization. 7. It doesn’t allow attribute minimization
[Link] is not required in HTML. 8. In XHTML, the opening <html>tag
requires an xmlns attribute(XML NameSpace).
[Link] is optinal. 9. XHTML requires certain characters to appear
as named entities.
Ex: We can’t use the character, it must be
expressed using an HTML entity.
[Link] HTML, languages in the document 10. In XHTML, languages in the document
must be expressed using the lang attribute. must be expressed using the xml:lang attribute.
[Link] must be served as text/html. 11. XHTML must be served with an XML
MIME type, such as application/xml or
application/xhtml+xml.

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 3

Chapter 2: Introduction to HTML Internet Programming

Advantages of XHTML over HTML: (3 Marks)

There are some advantages of XHTML over HTML.

1) Sustainability
2) Wide Range of applications
3) Compatibility
4) Closing tags
5) XHTML is easier to teach and to learn
6) XHTML is ready for the future
7) Extensibility

Sustainability:
XHTML will sustain more long time till web application use XML for their
development.

Wide range of applications:

XHTML can use to create more complex websites. Because of this it can support large
number of different application such as MathML, SVG (Scalable vector Graphics).

Compatibility:
The XHTML documents are written in compliance with the rule of XML, and XML
processing programs can covert an XHTML document into PDF, RFT . Because of this
it supports wide range of file format.

Closing tags:
XHTML supports closing tags. It makes our source code clean and readable.

XHTML is easier to teach and to learn:

The syntax rules defined by XML are more consistent, Compare to HTML and
therefore it is easier to explain HTML.

XHTML is ready for the future:

XHTML 1.0 document will be easily upgradable to this new version, to allow taking
advantages of its existing new features.

Extensibility:
XML documents are required to well-formed. In the XML-based DTD, a new set of
elements simply needs to be internally consistent and well-formed to be added to an
existing DTD.

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 4

Chapter 2: Introduction to HTML Internet Programming

Basic Structure of HTML Document: (3 Marks/ 7 Marks)

An HTML document has two main parts:

1. head: The head element contains title and meta data of a web document.
2. body: The body element contains the information that we want to display on a web page.

The following is the summary of structure of HTML document.

The <html> tag:

An HTML document start with the <html> element and ends with its
corresponding closing element </html>. We put everything in between these elements.

<head> and <body> tag:

Every properly-coded HTML documents has a <head> and <body> tag. The
<head> contains some basic information about the document, such as title. The
<body> contains the part of the document that browsers display in the main viewing
area.
Most of the content in the <head> is invisible. The only thing that viewer can see in
the title, which show up in the title bar at the very top of the browser window.

The closing tags of these tags are </head> and </body>.

HTML Comments:

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 5

Chapter 2: Introduction to HTML Internet Programming

We can place a comment anywhere in the HTML document like this.

<!—Here’s a comment - - >

There will be nothing change in terms of the visibility. It is just simple notice to
anyone looking at code of the web page.

Standard XHTML Document Structure: (5 Marks)

An XHTML document consists of three main parts:

1) DOCTYPE
2) Head
3) Body

The basic document structure is

<! DOCTYPE ---- >

<html - - - >
<head>---------</head>
<body>---------</body>
</html>

The <head> area contains information about the document, such as ownership , copyright,
and keywords; and the <body> area contains the content of the document to be displayed.

Example:
<? xml version=”1.0” ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0
Strict//EN” [Link]
[Link] >
<html xmlns=[Link] xml:lang=”en” lang=”en”>
<head>
<title>My XHTML Sample page</title>
</head>
<body>
<h1>Welcome to XHTML</h1>
</body>
</html>

Explanation:
Line 1:
Since XHTML is, when HTML expressed with XML document. So it must include

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 6

Chapter 2: Introduction to HTML Internet Programming

the initial XML declaration <?xml version=”1.0” ?> at the top of the document.

Line 2 and Line 3:

XHTML document must be identified by one of three standard set of rules. These
rules are stored in a separate document which is called Document Type Declaration
(DTD) and it is utilized to validate the accuracy of the XHTML document structure.
The purpose of a DTD is to describe the language and syntax allowed in XHTML
with precise terms.

Line 4:
The second tag in an XHTML document must include the opening <html> tag with the
XML namespace identified by the xmlns=[Link] attribute.
The XML namespace identifies the range of tags used by one DTD which doesn’t
conflict with user-defined tags or tags defined in other DTDs.

Line 5-7:
XHTML document must include a full header area. This area contains the opening
<head> tag and the title tags(<title></title>), and is then completed with the closing
</head> tag.

Line 8-10:
XHTML document must include opening and closing <body> </body> tags. Within
these tags we can place traditional HTML coding tags.

Line 11:
Finally, the XHTML document is completed with the closing </html> tag.

XHTML Doc Types: (3 Marks)

DOCTYPE definition line in an XHTML document specifies the document type. The
syntax and legal elements of an XHTML documents are specified by DTD

The purpose of a DTD (Document Type Definition) is to define the legal building
blocks of an XML document. A DTD defines the document structure with the list of
legal elements and attributes.

XHTML1.0 document type definitions are corresponds to three DTD’s: Strict,

Transitional, and Frameset.

1. XHTML 1.0 Strict:

If we are planning to use strictly CSS and avoiding to write most of the XHTML
attributes, then it is recommended to use this DTD. If we want to use XHTML 1.0

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 7

Chapter 2: Introduction to HTML Internet Programming

Strict DTD then we need to put following line at the top of the XHTML
document.

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

[Link] >

2. XHTML 1.0 Transitional:

If we are planning to use many XHTML attribute as well as few CSS properties,
then we should use this DTD and we should write XHTML document according
to the DTD.
If we want to use this then we need to put following line at the top of the
XHTML document.
<! DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Transitional //EN”
[Link]

3. XHTML 1.0 Frameset:

We can use this DTD when we want to use HTML Frames to partition the
browser window into two or more frames.

If we want to use this DTD then we need to put following line at the top of
XHTML document.
<! DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Frameset //EN”
[Link]

Syntax and Rules of XHTML:

The below are the some of syntax rules of XHTML

Rule 1: XHTML elements must be properly nested.

Wrong: <p> This is our html<em>page.</p></em>
Right: <p>This is our html
<em>page</em></p>

Rule 2: Since XML is case-sensitive. Tag name must be in lowercase.

Wrong: <PRE>This is preserve tag</PRE>
Right: <pre>This is preserve tag</pre>

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 8

Chapter 2: Introduction to HTML Internet Programming

Rule 3: All attributes that are use in XHTML, must be in lower case.
Wrong: <a HREF=”[Link]
Right : <a href=[Link] </a>

Rule 4: All elements must be closed.

Wrong: <p>Welcome to Bangalore
Right: <p> Welcome to Bangalore</p>

Rule 5: All attribute value must be quoted.

Wrong: <a href=[Link] Link</a>
Right: < a href=[Link] Yahoo Link</a>

Rule 6: Documents in XHTML/HTML must always be well-formed.

All XHTML /HTML document can have only one root element that is <html> and all
other elements should be nested within the root elements.

Rule 7: Self closing tag need not required closing tag.

Some elements can close themselves. They don’t require separate closing tag because
they have closing tags built into them. The most common self closing elements are
images, line break, etc. Ex: <img src=”[Link]”>

Rule 8: Don’t Overlap Elements.

We can’t overlap opening and closing tag. We can embed them inside each other in
many cases but can’t overlap them.

Wrong: <p> This is <em> <strong> wrong html tag</em></strong></p>

Right: <p> This is <em><strong> Right html tag</strong></em></p>

Rule 9: Attribute value must be quoted.

Wrong: <table width=100%>
Right : <table width=”100%”>

Rule 10: Mandatory XHTML elements

All XHTML documents must have a DOCTYPE declaration. The html, head,
title and body element must be present. Following is a XHTML document with a
minimum tags
<? Xml version=”1.0” encoding=”UTF-8”?>
<! DOCTYPE html

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 9

Chapter 2: Introduction to HTML Internet Programming

PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

[Link] >
<html xmlns=[Link]
<head><title>YOUR TITLE</title></head>
<body></body>
</html>

Question Bank
1 Mark Questions
1) What is XHTML?
2) What is HTML?
3) Why XHTML is required?
3 Marks Questions
1) What are the advantages of XHTML over HTML?
2) Explain XHTML doctypes?
3) Explain Structure of HTML program.
4) What is the differences between HTML and XHTML.
5) Write the primary function of W3C?
6) What do you mean by Web Standards?
5 Marks Questions
1) Explain XHTML document structure.
2) Write the advantages and disadvantages of HTML.
3) How HTML works.
7 Marks Questions
1) Explain the general structure of an HTML program with an example.
2) What is XHTML? Write the syntax rule to create XHTML and what are the advantages
of XHTML over HTML.

*****

Shruthi S, Asst Prof, Dept of BCA, VVFGC, Tumkur Page 10

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

Chapter 3

ELEMENTS OF HTML DOCUMENTS

<body> tag:
The body element contains all the contents of the document.

Attribute of body tag:

Attribute name Description Example
background Specifies the path of an <body background=”c:/[Link]”>
image.
bgcolor Sets of the background <body bgcolor=”green”>
colour of the document.
text It specifies the color of <body text=”blue”>
normal text in the
document.
leftmargin It sets the left margin <body leftmargin=”100”>
for a page in pixels.
topmargin It sets the top margin <body topmargin=”100”>
for a page in pixels.
--------------------------------------------------------------------------------------------

Basic Formatting Elements

Paragraph element:
 The <p> tag in HTML defines a paragraph.
 This tag has both opening and closing tag.
 It is a block-level element and always starts on a new line.

The HTML <p> tag supports the following attributes –

Attribute Value Description
align left Specifies text alignment
right within a paragraph.
center
justify

Syntax:
<p align=”value”> paragraph body </p>

Example program to illustrate Paragraph tag:

<html>
<body>
<p align=”left”> this tag in HTML defines a paragraph. These have both opening
and closing tag.
It is a block-level element and always starts on a new line. </p>
</body>
</html>

Output:

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 1

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

--------------------------------------------------------- --------------------------
Headings H1 to H6
 HTML defines six levels of headings.
 The heading elements are H1, H2, H3, H4, H5, and H6.
 h1 is the largest heading tag and h6 is the smallest one.
 When you place the text within the heading tags <h1>.........</h1>, it is
displayed on the browser in the bold format and size of the text depends on the
number of heading.

Syntax:
<h1> headings </h1>

Example program to illustrate Headings h1 to h6:

<html>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
</body>
</html>

Output:

---------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 2

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

Preserving white space <pre> tag:

 The <pre> tag in HTML is used to define the preformatted text which
preserves the text spaces, line breaks, tabs, and other formatting characters
which are ignored by web browsers.
 The <pre> tag requires a starting and end tag.

Syntax:
<pre> preformatted text </pre>

Example program to illustrate Headings h1 to h6:

<html>
<body>
<pre>
This text is
in a fixed-pitch
font, and it preserves
both spaces and line breaks
</pre>
</body>
</html>

Output:

------------------------------------------------------------------------------------
Line Break:
 HTML tag <br> element defines a line break.
 The <br> tag is an empty tag which means that it has no end tag.
 Line breaks ends the live we are currently on and resume on the next line.

Syntax:
<br>

Example program to illustrate Line Break:

<html>
<body>
<h1>The br element</h1>
<p>To force<br> line breaks<br> in a text,<br> use the br<br> element.</p>
</body>
</html>

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 3

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

Output:

------------------------------------------------------------------------------------
 Horizontal Rule:
 The <hr> tag in HTML stands for horizontal rules across the page.
 This is used to insert a horizontal rule in an HTML page to divide or separate
document sections.
 The <hr> tag is an empty tag and it does not require an end tag.
The table given below describe the <hr> tag attributes:
Attribute Value Description
left
Used to specify the alignment of the
Align center
horizontal rule.
right
Used to specify the bar without
noshade noshade
shading effect.
Used to specify the height of the
size pixels
horizontal rule.
Used to specify the width of the
Width pixels
horizontal rule.

Example program to illustrate horizontal line:

<html>
<body>
<p>Normal horizontal line.</p>
<hr>
<p>Horizontal line with height of 30 pixels
and noshade.</p>
<hr size="30" noshade>
</body>
</html>

Output:

------------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 4

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

Presentation elements
HTML contains several elements for defining text with a special meaning, and
whenever user wants to format text element the presentation elements are used.
Tag Description
<b> .... </b> Defines italic text
<i> .... </i> Defines bold text
<u> ......... </u> Defines underlined with a simple line.
<ins> .... </ins>
_..... Defines subscripted text. Subscripted text appears half
a character below the normal line and is sometimes
rendered in a smaller fonts.
^...... Defines superscripted text. Superscripted text appears
half a character above the normal line and is
sometimes rendered in a smaller fonts.
<s> ..... </s> Displayed with a strikethrough, which is a thin line
<strike> .... </strike> through the text or text has been deleted from a
<del> ... </del> document.
<big> .... </big> It is used to make the contents of the element one font
size larger than the rest of the text surrounding it.
<small> .... </small> It is used to make the contents of the element one font
size smaller than the rest of the text surrounding it.
<mark> ..... </mark> Defines marked text.

 <b> - Bold text:

The text written within <b> tag display in bold size.

Example program to illustrate Bold tag:

<html>
<body>
This text is normal.<br>
<b>This text is bold.</b>
</body>
</html>

Output:

----------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 5

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

 <strong> - Important text:

The HTML <strong> element defines text with strong importance. The content
inside is typically displayed in bold.

Example program to illustrate strong tag:

<html>
<body>
This text is normal.
<strong>This text is important!</strong>
</body>
</html>

Output:

-------------------------------------------------------------------------
 <i> - Italic text:
Italic tag is used to write the content in italic format.

Example program to illustrate Italic tag:

<html>
<body>
This text is normal.<br>
<i>This text is italic.</i>
</body>
</html>

Output:

------------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 6

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

 <em> - Emphasized text:

The HTML <em> element defines emphasized text. The content inside is
typically displayed in italic.

Example program to illustrate Emphasized text:

<html>
<body>
<p>This text is normal.</p>
<p><em>This text is emphasized.</em></p>
</body>
</html>

Output:

---------------------------------------------------------------------------
 <u> - underline:
The <u> tag in HTML stands for underline and it’s used to underline the text
enclosed within the <u> tag.

Example program to illustrate underline tag:

<html>
<body>
<h1>Heading</h1><br>
<u>This text will be underlined.</u>
</body>
</html>

Output:

------------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 7

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

 <small> - Smaller text:

The HTML <small> element defines smaller text.

Example program to illustrate <small> tag:

<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>

Output:

 <sub> - Subscript text

The HTML <sub> element defines subscript text. Subscript text appears half a
character below the normal line, and is sometimes rendered in a smaller font.
Subscript text can be used for chemical formulas, like H 2O.

Example program to illustrate <sub> tag:

<html>
<body>
<p>This is _subscripted text.</p>
</body>
</html>

Output:

-----------------------------------------------------------------------------------
 <sup> - Superscript text
The HTML <sup> element defines superscript text. Superscript text appears
half a character above the normal line, and is sometimes rendered in a smaller
font. Superscript text can be used for footnotes, like WWW [1].

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 8

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

Example program to illustrate <sup> tag:

<html>
<body>
<p>This is ^subscripted text.</p>
</body>
</html>

Output:

---------------------------------------------------------------------------------
Phrase Elements
Phrase elements are used to indicate that a block of text has structural meaning.

Tag Description
<code> ....... </code> Defines the computer code
<kbd> ...... </kbd> Defines the keyboard input
<var> ....... </var> Defines a variable
<em> ....... </em> Defines emphasized text
<strong> ....... </strong> Defines important text.
<address> ..... </address> Used to contain addresses
--------------------------------------------------------------------------------------
<meta> Tag
 The metadata means information about data.
 The <meta> tag in HTML provides information about HTML Document.
 <meta> tags always go inside the <head> tag.
 It used to specify character set, page description, keywords, author of the
document, and viewport settings.
 Metadata will not be displayed on the page but will be machine parsable.

Attributes of <meta> tag:

Attribute Description Example
Name
charset Specifies the character encoding for <meta charset=UTF-8>
the HTML document
content Gives the value associated with the <meta
http-equiv or name attribute name=”description”
content=”web classes”>
name Specifies the name for the attribute <meta name=”quthor”
content=”arun”>
scheme Specifies a scheme to be used to <meta name=”date”
interpret the value of the content content=”2019-06-28”
attribute scheme=”YYYY-MM-DD”>
----------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 9

INTERNET PROGRAMMING ELEMENTS OF HTML DOCUMENTS

CHARACTER ENTITIES
Character entities are used to display the special characters in HTML.

Syntax: &entity_name;
Or
&entity_code;

Symbols Entity Name Entity code

α &alpha; &#945;

β &beta; &#946;

® &reg; &#174;

< &lt; &#60;

> &gt; &#62;

© &copy; &#169;
∆ &Delta; &#948;
∏ &pi; &#982;

------------------------------------------------------------------------------------

<marquee> tag:
Marquee tag supports scrollable texts and images within webpage. Scrolling either
from left to right or vice versa, or top to bottom or vice versa.

Syntax:
<marquee> scrollable texts/images </marquee>

Attributes:
Attribute Description
width Provide width or breadth of a marquee.
height Provides the height or length of a
marquee.
direction Provides the direction or way in which
your marquee will allow you to scroll.
The value of this attribute can be: left,
right, up or down.

Example:
<html>
<body>
<marquee>scrolling text</marquee>
<h4> scrolling image</h4>
<marquee>
<img src = "C:\Users\VVFGC\Downloads\[Link]">
</marquee>
</body>
</html>

Prof. JANHAVI N L, Dept. Of BCA , VVFGC, Tumkur Page 10

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

Chapter 4

LISTS, IMAGES AND HYPERLINKING IN 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:
 Ordered List or Numbered List (ol)
 Unordered List or Bulleted List (ul)
 Description List or Definition List (dl)

HTML Ordered List or Numbered List

 It is known as numbered list.
 The ordered list starts with <ol> tag and ends with closing </ol> tag.
 Each list items start with <li> tag.
 The list items are marked with numbers by default.
 The type attribute of the <ol> tag defines the type of the list item.

Attributes
Type Description
type="1" The list items will be numbered with numbers (default)
type="A" The list items will be numbered with uppercase letters
type="a" The list items will be numbered with lowercase letters
type="I" The list items will be numbered with uppercase roman numbers
type="i" The list items will be numbered with lowercase roman numbers

Example program to illustrate Order List:

<html>
<body>
<h2>Ordered List with default type</h2>
<ol>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

<h2>Ordered List with Letters</h2>

<ol type="A">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 1

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

<h2>Ordered List with Roman Numbers</h2>

<ol type="I">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ol>

</body>
</html>

OUTPUT:

-----------------------------------------------------------------------------
The Unordered HTML List
 Unordered lists provides a sequence of unordered steps for an activity.
 An unordered list starts with the <ul> tag and ends with the </ul> tag.
 Each list item starts with the “li” tag.
 The list items are marked with bullets i.e small black circles by default.
 The type attribute of the <ul> tag, defines the type of the list item marker

Attributes
Type Description
disc Sets the list item marker to a bullet (default
circle Sets the list item marker to a circle
square Sets the list item marker to a square
none List items will not be marked

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 2

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

Example program to illustrate Unordered List:

<html>
<body>
<h2>Unorder list by default</h2>
<ul>
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
<h2>Unordered List with Square Bullets</h2>
<ul style="list-style-type:square">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
<h2>Unordered List with circle</h2>
<ul type="circle">
<li>Bread</li>
<li>Eggs</li>
<li>Milk</li>
<li>Coffee</li>
</ul>
</body>
</html>

OUTPUT:

----------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 3

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

HTML Definition Lists

 HTML supports definition list is the ideal way to present name(term name) and
description(definition) list.
 Definition List makes use of following three tags:
o <dl> − Defines the start of the list
o <dt> − A term
o <dd> − Term definition
o </dl> − Defines the end of the list

Syntax:
<dl>
<dt>term name</dt>
<dd> definition of term </dd>
</dl>

Example program to illustrate definition List:

<html>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

OUTPUT:

--------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 4

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

Images
Images can improve the design and the appearance of a web page.

ADDING IMAGES USING <IMG>TAG:

 The HTML <img> tag is used to add an image in a web page.
 The <img> tag is empty element tag, it contains attributes only, and does not have
a closing tag.
 The <img> tag has two required attributes:
o src: src stands for source. Every image has a src attribute which tells location
of the image where the image is stored.
o alt: If the image cannot be displayed then the alt attribute Specifies an
alternate text for the image

Attributes:
Attribute Value Description
src url/pathname Specifies the URL of an image
alt text Specifies an alternate text for an image
top
bottom
Specifies the alignment of an image according
align middle
to surrounding elements.
left
right
Specifies the width of the border around an
border pixels
image
height pixels Specifies the height of an image
width pixels Specifies the width of an image

Example program to illustrate <img> tag:

<html>
<body>
<p>Simple Image Insert</p>
<img src = "C:\Users\VVFGC\Downloads\[Link]" alt = "Test Image"
width=100 height=120>
</body>
</html>

OUTPUT:

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 5

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

Setting image as background:

The background attribute of <body> tag specifies a background image for a
document.
Example:
<html>
<body background="c:\Users\VVFGC\Downloads\[Link]">
<p> html is a mark up language</p>
</body>
</html>
--------------------------------------------------------------------------------------------
Embedding a multimedia on to a webpage:
 Multimedia comes in many different formats.
 It can be almost anything you can hear or see, like images, music, sound, videos,
records, films, animations, and more.
 The easiest way to add video or audio to the web site is to include the special HTML
tag called <embed>.
 <embed> tag causes the browser itself to include controls for the multimedia
automatically provided browser supports.
Attributes:
Attribute Value Description
left
Determines how to align the object.
align right
center
autostart/autoplay Yes/no It indicates if the media should start automatically.
true Specifies if the sound should be played continuously
loop pixels (set loop to true), a certain number of times (a
false positive value) or not at all (false)
width pixels Specifies the width of the object
height Pixels Specifies the height of the object
alt Text Specifies alternate name

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 6

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

HTML <bgsound> tag:

 The <bgsound> tag is used to embed sound files into a web page.
 The sound files play background automatically when the page loads.
 The <bgsound> tag only supports in Internet Explorer.
Attributes:
Attribute Value Description
balance pixels Specifies how the audio is
split between speakers.
loop pixels Specifies that the audio file
should continuously repeat
src URL/ pathname Specifies the URL of the
audio file.
volume pixels Specifies the volume for
the audio file.

Example:
<html>
<head>
<title>bgsound tag </title>
</head>
<body>
<bgsound src=”C:\folder\sleep.mp3” loop=”5”>
<p> the audio is playing background </p>
</body>
</html>
----------------------------------------------------------------------------------------
<marquee> behaviour:
 An HTML <marquee> tag is a scrolling piece of text or image displayed either
horizontally across or vertically down the web page.
Attributes:
Attribute Value Description
width pixels Specifies the width of the marquee
height pixels Specifies the height of the marquee
up
down Specifies the direction in which marquee should
direction
left scroll
right
scrolldelay pixels Specifies how long to delay between each jump

scrollamount pixels Specifies the speed of marquee text

loop pixels Specifies how many times to loop.

bgcolor colorname/colorcode Specifies the background color

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 7

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

Inserting audio files and video files:

HTML Video Tag
The HTML <video> element is used to show a video on a web page,
syntax:
<video controls>
<source src="movie.mp4" type="video/mp4">
</video>

HTML Audio Tag

HTML audio tag is used to define sounds such as music and other audio clips.
syntax:
<audio controls>
<source src="koyal.mp3" type="audio/mpeg">
</audio>

---------------------------------------------------------------------------------------

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 8

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

Hyper Linking in HTML

 Hyperlinks are the mechanism which allows the navigation from one page to
another.
 Hyperlinks allow visitors to navigate between websites by clicking on words,
phrases and images.
 The HTML <a> tag defines a hyperlink.
 You can click on a link and jump to another document.
 When you move the mouse over a link, the mouse arrow will turn into a little hand.

syntax:
<a href="url">link text</a>

Example program to illustrate <a> tag:

<html>
<body>
<a href="C:\Users\VVFGC\Desktop\[Link]">
Click here to fill the Application Form
</a>
</body>
</html>

Output:

-------------------------------------------------------------------------------------
Internal Link
 HTML internal link is linked within the same web page.
 An internal link takes you to another page in your website.
 HTML internal link name is followed by head sign(#). HTML <a> tag is use for
anchor point name, which is referred to a internal link into a same page.
These links are usually relative and are in the form of:
<a href="/web/[Link]">
<b>Web Design Resources</b>
</a>

External Links
External HTML Links is linked to external web page.
<a href="[Link]

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 9

INTERNET PROGRAMMING LISTS, IMAGES AND HYPERLINKING IN HTML

--------------------------------------------------------------------------------------
Types of Hyperlinks
Links can point to other web pages, web sites, graphics, files, sounds, e-mail
addresses, and other locations on the same web page.

There are four types of hyperlinks.

Text hyperlink – Uses a word or phrase to take visitors to another page, file or
document.
Example:
<a href="/web/[Link]">
click here
</a>

Image hyperlink – Uses an image to take visitors to another page, file or document.
<a href="/web/[Link]">
<img src=”/web/[Link]”>
</a>

E-mail hyperlink – Allows visitors to send an e-mail message to the displayed e-mail
address.
<a href=”vvfgcbca@[Link]”>
Send E-mail
</a>
------------------------------------------------------------------------------------------------------------------------------------------
anchor <a> tag :
 a link is specified using HTML tag <a>. This tag is called anchor tag.
 Anything between the opening <a> tag and the closing </a> tag becomes part of
the link and a user can click that part to reach to the linked document.
Syntax:
<a href=”url”>link text </a>

 By default, links will appear as follows in all browsers,

o An unvisited link is underlined and blue
o A visited link is underlined and purple
o An active link is underlined and red

Attributes:
Attribute Value Description
href url Specifies the url of the page the link goes to

name section_name Specifies the name of an anchor

target _blank Specifies where to open the linked document

_parent
_self
_top

Prof. JANHAVI N L, Dept. Of BCA ,VVFGC, Tumkur Page 10

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

Chapter 5
Tables and Forms in HTML
Tables
 A table is a collection of information or data arranged into columns and rows.
 Content of a cell can be any elements including text, an image, list and a
nested table etc..
 Tables are defined with the <table> tag.

Basic table tags

Basic HTML tags are, <table>,<tr>,<th>,<td>,<caption>
 An HTML table is defined with the <table> tag.
 A table heading can be created using <caption> tag.
 Each table row is defined with the <tr> tag.
 A table header is defined with the <th> tag. By default, table headings are
bold and centered.
 A table data/cell is defined with the <td> tag.

Attributes :
Attribute Values Description
align left Specifies the alignment of a table according
center to the surrounding text.
right

bgcolor colorname Specifies the background color for a table.

border pixels Specifies the width of the border around the
table.
cellpadding pixels Specifies the width of the border around the
table.
cellspacing pixels Specifies the space between cells.

Example program to illustrate basic table tags:

<html>
<body>

<table border=”1” >

<caption> student details</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>

<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>

Prof. JANHAVI N L, VVFGC, Tumkur Page 1

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>

<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>

Basic Attributes of <Table> tag:

 Border:
This attribute determines the border of the table and size of the border.
Ex: <table border=”3”>
 Height:
This attribute determines the height of overall table.
Ex: <table height=”200”>
 Width:
This attribute determines the width of overall table.
Ex: <table width=”300”>
-----------------------------------------------------------------------------------
The align and valign attributes
 The align and valign attributes specifies the placement of the content within a
table cell.
 <th> and <td> tags can use these attributes.
 The align attributes has the possible values left, right and center with the
horizontal placement of the content within a cell. The default alignment for
<th> cells is center and for <td> cell is left.
 The valign attribute of the <th> and <td> tags has the possible values top
and bottom. The default vertical alignment for both heading and data is center.

Example program to illustrate align and valign attributes of table tags:

<html>
<body>
<table border="1" height="200" width="500">
<tr >
<th>NAME</th>
<th>AGE</th>
<th>BRANCH</th>
</tr>

<tr >
<td valign="top">Balu</td>
<td valign="center">22</td>
<td valign="bottom">CSE</td>

Prof. JANHAVI N L, VVFGC, Tumkur Page 2

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

</tr>

<tr >
<td valign="bottom">RAKESH</td>
<td valign="center">25</td>
<td valign="top">EC</td>
</tr>
</table>
</body>
</html>

Output:

---------------------------------------------------------------------------------------------------------------
The rowspan and colspan attributes
rowspan used to specify the number of rows a cell should merge. rowspan
attribute have numeric value. <th> and <td> tags can use this attribute.
for example,
<td rowspan= 2>
Above example says two rows of data is going to merge.
colspan used to specify the number of columns a cell should merge. colspan
attribute have numeric value. <th> and <td> tags can use this attribute.
for example,
<td colspan= 2>
Above example says two cols of data is going to merge.

Example program to illustrate align and valign attributes of table tags:

<html>
<body>
<table border=" ">
<tr>
<td colspan="2">Subjects:</td>
<td>chapters</td>
</tr>
<tr>

Prof. JANHAVI N L, VVFGC, Tumkur Page 3

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

<td>1 Sem</td>
<td>2 Sem</td>
<td rowspan="2">10</td>
</tr>
<tr>
<td>C</td>
<td>C++</td>
</tr>
</table>
</body>
</html>

Output:-

---------------------------------------------------------------------------------
The cellpadding and cellspacing attributes
 Cellpadding is the distance between the edges of the cell to its content. which
you will use to adjust the white space in your table cells. Numerical value must
be given for cellpadding.
 Cellspacing is the distance between cells. which you will use to adjust the
white space in your table cells. Numerical value must be given for cellspacing.
Example:
<table cellspacing="5" cellpadding="10">

Example program to illustrate cellpadding and cellspacing attributes of

table tags:

<html>
<body>
<table border="3" cellspacing="10" cellpadding="5">
<tr>
<td>WEB</td>
<td>PROGRAMMING</td>
</tr>
</table>

Prof. JANHAVI N L, VVFGC, Tumkur Page 4

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

<hr>
<br>
<table border="3" cellspacing="5" cellpadding="10">
<tr>
<td>WEB</td>
<td>PROGRAMMING</td>
</tr>
</table>
</body>
</html>

Output:

<caption> tag and its attributes

 The <caption> tag defines a table caption.
 The <caption> tag serves as a title or explanation of a table.
 The <caption> tag must be inserted immediately after the <table> tag.
 By default, a table caption will be center aligned above a table.

------------------------------------------------------------------------------

Prof. JANHAVI N L, VVFGC, Tumkur Page 5

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

MANAGING FORMS
 A form is the usual way of information, it contains different kind of information
such as username, password, contact number, email id etc.
 HTML provides various tags like check box, text, radio buttons, submit buttons
etc., these elements are used to submit the information from web browser to
web server.
----------------------------------------------------------------------------------
<Form> Tag:
The form tag is used to create an HTML form. This tag has many attributes.
The most required attributes is the action and method attribute.
action attribute:
 Action attribute is required to provides the path to the database or server
or script or program that will process the form data when the user submits
the form.
Example: <form action=”/bu-bin/[Link]”>

method attribute:
 This attribute tells the web server how to process the data values.
 This specifies two techniques: get and post
 get method:- which is used to request data from a specified
resource/server.
 POST method:- which is used to send data to a server to create/update a
resource.
Example: <form action=”/bu-bin/[Link]” method="GET">
<form action=”/bu-bin/[Link]” method=”post”>
-----------------------------------------------------------------------------------
FORM CONTROLS
The different types of form controls are:
 Text box
 Text area
 Password input controls
 Buttons
 Checkboxes and radio buttons
 Select boxes(sometimes referred to as drop down menus and list boxes)
 File select boxes
 Hidden controls
 Image buttons
----------------------------------------------------------------------------------------
input Element (or <input> tag) in HTML :
 Input Elements are the most common elements which are used in HTML Forms.
 Various user input fields can be created such as text, check box, password field,
radio button, submit button etc.
 The <input> element can be displayed in several ways, depending on the type
attribute

Prof. JANHAVI N L, VVFGC, Tumkur Page 6

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

Attributes of <input> tag:

 type: The type attribute is used to specify the type of the input element.
Its default value is text.
 placeholder: Placeholder attribute is used to specify hint that describes
the expected value of an input field.
 maxlength: This property is used to specifies the maximum number of
characters allowed in an <input> element
 size: This property is used to specifies the width, in characters, of an
<input> element
--------------------------------------------------------------------------------------
Attribute value Description Example

This allows buttons to be

included in the form that
button perform tasks other than <input type=”button”>
submitting or resetting
form.
This creates a button that
submit automatically submits a <input type=”submit”>
form.
This creates a button that
automatically resets from <input type=”reset”>
reset
controls to their initial
values.
This denotes a checkbox,
checkbox a simple selectable <input type=”checkbox”>
element in a form.
This denotes one of a set
of radio buttons, which is
a collection of selectable <input type=”radio”>
radio
check boxes where only
one in the group can be
chosen.
This denotes a simple <input type=”text”>
text
text entry fields.
This denotes a text field
where the content is <input type=”password”>
password
masked, such as
password fields.
This allows the user to
select of file on their <input type=”file”>
file
computer for submission
to the server

Prof. JANHAVI N L, VVFGC, Tumkur Page 7

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

<input> elements
<input> element can be displayed in several ways, depending on the type
attribute are listed below:

Text: Creates horizontal box for text input. Default size is which can be changed
with size or maxlenght attribute.
Example:
<form>
First Name: <input type="text" /> <br>
Last Name: <input type="text"/> <br>
</form>
OUTPUT:

Password: If the contents of the textbox should not be displayed when user
types it then password control should used. It cannot be read, usually by replacing
each character with a symbol such as the asterisk ("*") or a dot ("•").
Example:
<form>
<input type="text"><br>
<input type="password">
</form>
OUTPUT:

Radio button: Radio buttons are typically visible as small circles, which are filled
or highlighted when selected. Only one button can be checked at a time.

Example:
<form>
<input type="radio" >
<label>Male</label><br>
<input type="radio" >

Prof. JANHAVI N L, VVFGC, Tumkur Page 8

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

<label>Female</label><br>
<input type="radio" >
<label>Other</label>
</form>

OUTPUT:

Checkbox : Checkboxes are used for lists, where the user can choose one or
more selections from a list of options.

Example:
<form>
<input type="checkbox" ">
<label > I have a bike</label><br>
<input type="checkbox" >
<label >I have a car</label><br>
<input type="checkbox" >
<label > I have a boat</label>
</form>

OUTPUT:

Date: Date element is used for entering a date. Once you run your html code date
picker will available like calendar.
Example:
<form>
<input type="date">
</form>

Prof. JANHAVI N L, VVFGC, Tumkur Page 9

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

OUTPUT:

Submit: Submit element used for submit the form, its look like button on
webpage if you click on that, form inform is submitted.
Example:
<form>
First name:<br>
<input type="text"><br>
Last name:<br>
<input type="text"><br><br>
<input type="submit" value="Submit">
</form>
Output:

Reset: reset button that will reset all form values to their default values or clear
all the fields of form.
Example:
<form>
Name:<br>
<input type="text"><br><br>
<input type="submit"> <input type="reset">
</form>

Prof. JANHAVI N L, VVFGC, Tumkur Page 10

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

Output:

----------------------------------------------------------------------------
<Select> Tag:
The <select> defines a drop-down list or provides a menu of options
Example:
<from>
Select your fav. car:
<select>
<option>Volvo</option>
<option>Saab</option>
<option>Fiat</option>
<option>Audi</option>
</select>
</from>

OUTPUT:

---------------------------------------------------------------------------------

Prof. JANHAVI N L, VVFGC, Tumkur Page 11

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

FRAMES
 HTML frames are used to divide your browser window(or webpage) into
multiple sections, where each section can load a separate HTML document.
 To use frames on a page we use <frameset> tag instead of <body> tag.
 The <frameset> tag defines how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames.
 Each frame is indicated by <frame> tag and it defines which HTML document
shall open into the frame.
Attribute:
Attribute Description
cols Specifies how many frames the window will be split into vertically and
specifies the width of each frame.
The default width is 100% = one column taking up the whole width.
rows Specifies how many frames the windows will be split into horizontally
and specifies the height of the frame.
The default is 100% = one row taking up the whole height.

Example:
<html>
<frameset rows = "20%,80%">
<frame src = “[Link]" />
<frame src = "[Link]" />
</frameset>
</html>

<frame> and <frameset> tag attributes:

<frameset> tag must have either a rows attribute or cols attribute. The
possible values for rows and cols attributes are numbers, percentages and
asterisks. A number value specifies the row height in pixels, a percentage
specifies that percentage of total window height for the row, and an asterisk takes
remaining spaces.
<frame> tag attributes are many types, few among them includes, src,
scrolling, frame border and many more.

Attributes Description
Specifies whether a three dimensional border should be
frameborder
displayed between frames.
marginheight Determines the amount of space above and below the frame.

marginwidth Determines the amount space on either side of the frame.

Reference to the document that will initially be displayed in that
src
frame.

Prof. JANHAVI N L, VVFGC, Tumkur Page 12

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

Examples:
[Link]
<html>
<frameset rows = "30%,80%">
<frame src="C:\Users\Dell\Desktop\[Link]" />
<frameset cols = "20%,*">
<frame src = "C:\Users\Dell\Desktop\[Link]" />
<frame src = "[Link]" />
</frameset>
</frameset>
</html>

[Link]
<html>
<body bgcolor="pink">
<center>
<h1>Advaith Hyundai</h1>
Caring for you always
</center>
</body>
</html>

[Link]
<html>
<body>
<ul>
<b><l>
<li>Hyundai Santro
<li>Hyundai Grand I10
<li>Hyundai Elite I20
<li>Hyundai Aura
<li>Hyundai All New Verna
</l></b>
</ul>
</body> </html>
[Link]
<html>
<body>
<p align="center">
<b>Welcome To Advaith Hyundai
Buy Choose , Service , Your Dream Hyundai Cars</b>
</p><hr>
<p align="center">
Advaith Hyundai has a rich legacy and it is World’s largest
Prof. JANHAVI N L, VVFGC, Tumkur Page 13
INTERNET PROGRAMMING TABLES AND FORMS IN HTML

Hyundai Dealer with gigantic network of 24 Showrooms,

29 Service centers and 4 Pre-owned cars showrooms spread across Karnataka.
</p>
<img src="C:\Users\Dell\Desktop\Display_Image.jpg">
<p align="center">
The focus and vision of Advaith Hyundai has always been to
provide the widest range of Hyundai cars and services,
and build a service organization that truly cares for the customer.
</p>
</body>
</html>

Output:

Prof. JANHAVI N L, VVFGC, Tumkur Page 14

INTERNET PROGRAMMING TABLES AND FORMS IN HTML

Question Bank:
1 marks:
1. What is table?
2. Define <td>,<tr>,<th>?
3. Define rowspan ?
4. Define colspan?
5. Write the purpose of using <caption> tag.
6. What is the use of valign attribute.
7. Define cellspacing.
8. Define cellpadding
9. What is form.
[Link] is the use of <input> tag.
[Link] are attributes of <frameset> tags.
[Link] do you mean by frames.

3 marks:
1. What is the use of “submit” and “reset” button?
2. Explain get and post.
3. Explain <select> tag.

5 marks:
1. Explain different types of INPUT elements present in HTML.
2. Explain basic HTML table tag.
3. Write an HTML code to design application form, includes student details

Prof. JANHAVI N L, VVFGC, Tumkur Page 15

INTERNET PROGRAMMING XML- eXtensible Markup Language

Chapter 6
XML- EXTENSIBLE MARKUP LANGUAGE

CSS(CASCADING STYLE SHEETS)

CSS
 CSS is a language that applies styles to a HTML document and its elements to
change the look and feel.
 It is usually stored in [Link] style which can be re-used for all the web
pages.
 A website is made up of HTML for content plus CSS for appearance.
 HTML + CSS = WEB PAGE
(Content) (Presentation)
---------------------------------------------------------------------------------------
ADVANTAGES
1. CSS saves time-
 You can write CSS once and then reuse 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.

2. 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 to all the occurrences of that tag,
So less code means faster download times.

3) Easy maintenance-
 To make a global change, simply change the style, and all elements in all the
web pages will be updated automatically.

4) Superior styles to HTMLCSS

 CSS has a much wider array of attributes than HTML. So you can give far
better look to your HTML page in comparison of HTML attributes.

5) 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 cell phones or for printing.

6) Global web standards-

 Now HTML attributes are being deprecated and iis being recommended to use
CSS. So it’s a good idea to start using CSS in all the HTML pages to make
them compatible to future browsers.

DISADVANTAGE
Browser Compatibility
Some style sheet features are supported and some are not supported by the
browsers.
--------------------------------------------------------------------------------------

Prof. JANHAVI N L, VVFGC, Tumkur Page 1

INTERNET PROGRAMMING XML- eXtensible Markup Language

BASIC CSS SYNTAX

The CSS syntax consists of a set rules have parts:
Selector { property :value;}

 The selector points to the HTML element you want to style.

A selector is an HTML tag at which style will be applied. This could be any tag
like <hl>,<li>,<p> etc.
 The declaration block contains one or more declarations separated by
semicolons.
 Each declaration includes a CSS property name and a value, separated by a
colon.
– A property is a type of attribute of HTML tag. Put simply ,all the HTML
attributes are converted into CSS properties.
They could be color or border etc.
– Values are assigned to properties. For example color property can have
value either red or blue.
 Multiple CSS declarations are separated with semicolons, and declaration
blocks are surrounded by curly braces.

Example:
You can define a table border as follows:
table{border :1px;}
---------------------------------------------------------------------------------------
LEVELS OF STYLE SHEET (CSS Inclusion)
There are 3 levels of style sheet used associate css styles witlh your HTML
document.
1) Inline
2) Document or internal
3) External

1. Inline CSS - The style attribute:

 Inline style sheet rules will be applied to the content of single element.
 Inline style sheet rules are specified as the values of the style attribute.
Syntax:
<element style="..style rules...">
Example:
<h1 style ="color: red;"> This is inline CSS<h1>

2) Document Level or Internal CSS - The<style>Element:

 Document level style sheet rules will be applied to all the elements available in
the document.
Prof. JANHAVI N L, VVFGC, Tumkur Page 2
INTERNET PROGRAMMING XML- eXtensible Markup Language

 The internal style is defined inside the <style> element, inside the head
section.

Example:
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

3) External CSS-
 With an external style sheet, you can change the look of an entire website by
changing just one file!
 Each HTML page must include a reference to the external style sheet file inside
the <link> element, inside the head section.
 External styles are defined within the <link> element, inside the <head>
section of an HTML page:
 An external style sheet can be written in any text editor, and must be saved
with a .css extension.
 The external .css file should not contain any HTML tags.

Example:
[Link]
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

[Link]
<html>
<head>
<link rel="stylesheet" href="[Link]">

Prof. JANHAVI N L, VVFGC, Tumkur Page 3

INTERNET PROGRAMMING XML- eXtensible Markup Language

</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
---------------------------------------------------------------------------------------
TYPES OF SELECTORS
CSS selectors are used to select the content you want to style. Selectors are the
part of CSS rule set. CSS selectors select HTML elements according to its id, class,
type, attribute etc.
There are several different types of selectors in CSS.
 CSS Element Selector
 CSS Id Selector
 CSS Class Selector
 CSS Universal Selector
 CSS Group Selector

1) CSS Element Selector

 The element selector selects the HTML element by name.
Example:
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.</p>
</body>
</html>

2) CSS Id Selector
 The id selector selects the id attribute of an HTML element to select a specific
element.
 An id is always unique within the page so it is chosen to select a single, unique
element.
 It is written with the hash character (#), followed by the id of the element.
 Example:
<html>
<head>
<style>
#para1 {

Prof. JANHAVI N L, VVFGC, Tumkur Page 4

INTERNET PROGRAMMING XML- eXtensible Markup Language

text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello [Link]</p>
<p>This paragraph will not be affected.</p>
</body>
</html>

3) Class selectors
 The class selector selects HTML elements with a specific class attribute.
 It is used with a period character . (full stop symbol) followed by the class name.
 Example:
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and center-aligned.</h1>
<p class="center">This paragraph is blue and center-aligned.</p>
</body>
</html>

4) CSS Universal Selector

 The universal selector is used as a wildcard character.
 It selects all the elements on the pages.
 Example:
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.</p>
Prof. JANHAVI N L, VVFGC, Tumkur Page 5
INTERNET PROGRAMMING XML- eXtensible Markup Language

<p id="para1">Me too!</p>

<p>And me!</p>
</body>
</html>

5) CSS Group Selector

 The grouping selector is used to select all the elements with the same style
definitions.
 Grouping selector is used to minimize the code.
 Commas are used to separate each selector in grouping.
 Example:
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello [Link]</h1>
<h2>Hello [Link] (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
--------------------------------------------------------------------------------
What is XML?
XML is short document used mainly for distributing the data on internet
between different applications.
It's structured document for storing and transporting the data; mainly used
for the interchanging the data on the internet.
Or
 XML stands for extensible Markup Language
 XML is a markup language much like HTML
 XML was designed to store and transport data
 XML was designed to be self-descriptive
 XML is a W3C Recommendation
---------------------------------------------------------------------------------
The Difference between XML and HTML
XML and HTML were designed with different goals:
 XML was designed to carry data - with focus on what data is
 HTML was designed to display data - with focus on how data looks
 XML tags are not predefined like HTML tags
----------------------------------------------------------------------------------

Prof. JANHAVI N L, VVFGC, Tumkur Page 6

INTERNET PROGRAMMING XML- eXtensible Markup Language

XML Usage OR NEED or characteristics:

 XML can work behind the scene to simplify the creation of HTML documents for
large web sites.
 XML can be used to exchange the information between organizations and
systems.
 XML can be used for offloading and reloading of databases
 XML can be used to store and arrange the data, which çan customize yoùr data
handling needs.
 XML can easily be merged with style sheets to creatoalmost any desired
output.
 Virtually, any type of data can be expressed as an XML document.
Or
 Common Data Store
 Wireless Communications
 Remote automation
 E-Commerce
 Multimedia.
-----------------------------------------------------------------------------------
Advantages
 Easy Data Exchange
 Self-describing data
 Create our own language
 Compatible with other application
 Extremely portable language
 Platform Independent Language
 Vendor independent and System independent also
------------------------------------------------------------------------------
XML DOCUMENT SYNTAX
The following are the content of the XML document.
1) XML Declaration
2) Comment
3) Root Element opening tag
4) Child element and content
5) Root element closing tag

Example:
<xml version"1.0" encoding="UTF-8'?>
<books>
<book>
<title Internet Programming</title>
<author>Kumar</author>
</book>
</books>

Prof. JANHAVI N L, VVFGC, Tumkur Page 7

INTERNET PROGRAMMING XML- eXtensible Markup Language

1. XML Declaration:
 The XML declaration indicates that the document written XML and specifies
which version of XML.
 The XML declaration must be on the first line of document.
 The XML declaration can also specify language encoding for document.
Ex: <?xml version="1.0" encoding=TF-8>

2. Root element:
 All XML document must one (and only one) root element. All other elements
must be nested inside this root element.
 The first tag in the document will always be the opening tag of the root
element and the closing tag will always be at the bottom of the element.
 XML document contains an element which is the parent of all other child
elements.
 The first element of the document is called the root element.
Ex: <books> ………. </books>

3. Child element:
 These are elements that are contained within the root element. Elements are
usually represented
 by an opening and closing tag
 Tags have attributes to provide information about tag, <books> ---</books>
 These are three types:
o Start tag.(Ex: <book>)
o End tag.(Ex:</book>)
o Empty-element tag: This is also known as body less tag. It has start tag
but doesn't have a matching end tag. Ex: <book/>

4. Element:
 The content between start tag and end tag including tag is called element. An
element can contain other child elements.
 Example:
<book>
<title>Internet Programming</title>
<author> abc </author>
<book>

5. Attributes:
 Elements can also contain one or more attributes.
 An attributes is a name/value pair that we place within an opening tag, which
allows us to provide extra information about an element.
 Attribute often provide information that is not part of the data Attribute values
must always be enclosed in either single or double quotes.
 Example:
<book type-"technical">
</book>

Prof. JANHAVI N L, VVFGC, Tumkur Page 8

INTERNET PROGRAMMING XML- eXtensible Markup Language

6. Comments:
 XML comments begin with <!-- and end with -- >,
 An XML comment allows us to write comments within the document and
comments are ignored by XML parsers.
 We write comment as an note to ourselves or another programmer. It can
appear anywhere in within the document.
Example:-
<!--This file is related to books information ->

7. Root Element closing Tag:

 The last tag of the document will always be the closing tag of the root
element.
 This is because all other elements are nested inside the root element.
Example:
</books>
---------------------------------------------------------------------------------------
XML SYNTAX RULES
XML allows creating our own tags. It follows stricter rules of document.
These rules as follows,
1) All XML document must a root tag.
2) XML is case Sensitive.
3) All XML elements must have a closing tag.
4) All XML elements must be properly nested.
5) Attributes values must always be quoted.
6) XML restricts the use of certain characters.
7) Elements in an XML document can be nested.
8) Rules for Naming Tags in XML

1) All XMIL document must a root tag:

 All XML document must contain a single pair to define the root element.
 All other elements must be nested within the root element.
Example:
<root>
<child>
<subchild>
……..
</subchild>
<child>
</root

2) XML is case Sensitive:

Example:
<Author> This is incorrect</author>
<author> This is Correct</author>

3) All XML elements must have a closing tag

Prof. JANHAVI N L, VVFGC, Tumkur Page 9

INTERNET PROGRAMMING XML- eXtensible Markup Language

Example:
<book> This is incorrect
<book> This is correct</book>

4) All XML elements must be properly nested.

Example:
<book>
<title>This is correct</title>
</book>

5) Attribute values must always be quoted:

Example:
Wrong: <book type=technical>
Correct: <book type="technical">

6) XML restricts the use of certain characters:

XML tags use angle bracket (< and> symbol) for enclosing tag names. This
character cannot appear in the element data.
Example:
Wrong: <num>25&25</num>
Correct: <num>25&amp;</num>

7. Elements in an XML document can be nested:

 An XML document consists of several element declarations.
 The document start with a root element and all other elements appear under
this root.
 The elements declaration can be nested.
 We must should observe proper scoping while nesting the elements.

8. Rules for Naming tags in XML:

 XML documents are extensible, its author's responsibility to create and name
the markup tags.
 The first character of each tag name must be a letter or the "_ “ character, but
not numbers.
Wrong: <1title>Internet Programming </1title>
Correct: <title>Internet Programming</title>
 Tag name cannot contain spaces.
Wrong: <Employee Name></Employee Name>
Correct: <EmploveeName></EmployeeNames>
-----------------------------------------------------------------------------------
Example program:

[Link]
<?xml version=”1.0” encoding=”UTF-8”?>
<?xm-stylesheet type=”text/css” href=”[Link]”?>
<books>
<book>
<title>web</title>

Prof. JANHAVI N L, VVFGC, Tumkur Page 10

INTERNET PROGRAMMING XML- eXtensible Markup Language

<author> abc </author>

</book>
</books>

[Link]
books
{
margin:10px;font-family:verdana;
}
title
{
font-weight:bold;
font-size:large;
color:red;
}
author
{
font-weight:italic;
font-size:large;
color:blue;
}
------------------------------------------------------------------------------------------
XML CDATA
 CDATA is used about text data should not be parsed by the XML parser.
 Characters like "<” and "&" are illegal in XML elements.
 Java script contains a lot "<” or "&".
 To avoid the errors seript code can be defined as CDATA.
 Everything inside a CDATA section is ignored by the parser.
 A CDATA section starts with <![CDATA[ and ends with ]]>
 Example:
<html>
<head><title>CDTA Demos/title>
<script type="text/javascript”>
<[CDATA[
function greatest(a,b)
if(a>b) then
return b;
else
return a;
}]]>
</script>
</head>
<body>
<h1>Greatest of two number</h1>
</body>

Prof. JANHAVI N L, VVFGC, Tumkur Page 11

INTERNET PROGRAMMING XML- eXtensible Markup Language

</html>
-----------------------------------------------------------------------------------------
Types of XML Document and Validation
 There are two types of XML document and validation.
o Well Formed.
o Valid Document
a) Well Formed:
"Well Formed" XML document is a document that conforms to the XML syntax
rules.
b) Valid document:
Valid" XML document is "Well Formed" XML document which conforms to the
rule of a DTD.

Example for well formed

<?xml version="1.0" encoding="UTF-8" ?>
<books>
<book
<title>Web Programming</title>
author-Saurabh kumar</author>
<book
</books>

Example for valid document

<?xml version="1.0" encoding="UTF-8" ?>
< !DOCTYPE note SYSTEM "[Link]">
<!--This file is related to books information ->
<books>
<book
<title>Web Programming</title>
author-Saurabh kumar</author>
<book
</books>
------------------------------------------------------------------------------------------
DOCUMENT TYPE DEFINITION (DTD)
 A DTD consists of a list of syntax definitions for each element in the xml
document.
 When we create a DTD it means, we are creating the syntax rule for any XML
document that uses DTD.
 In this, we specify which element name can be include in the document.
 Element have attribute that are required or optional and more.

DTD of [Link]
<!ELEMENT books (book)+>
<IELEMENT book(title , author)>
<IELEMENT title(#PCDATA)>

Prof. JANHAVI N L, VVFGC, Tumkur Page 12

INTERNET PROGRAMMING XML- eXtensible Markup Language

<!ELEMENT author(#PCDATA)
– books can have one or more book elements
– Each book element have title and author
– The title and author contains PCDATA and which means, element data is
going to parser.
-------------------------------------------------------------------------------------
DOCTYPE Syntax:
We can declare a DTD at the top of the XML document using the <!DOCTYPE
declaration.
The Basic syntax is:
<!DOCTYPE rootname [DTDJ>
Where,
rootname is the root element.
[DTD] is the actual definition

There are variations depending on two types of DTD.

 internal (written into the same document)
 external (located in another)
Both public and private.
---------------------------------------------------------------------------------------------------------------
INTERNAL DTD:
An internal DTD is the DTD which is defined between the square brackets
within the xml document.
[Link]
<?xml version= "1.0" encoding = "UTF-8" standalone = "yes" ?>
<?xml-stylesheet type="text/css" href-"[Link]"?>
<IDOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ENTITY email123 “abc123@[Link]”>
]>
<address>
<name>neethu joy</name>
<company>wipro</company>
<phone> (011) 123-4567</phone>
<email>&email123;</email>
</address>

Rules:
1. The document type declaration must be written in between the XML declaration
and the root element.
2. Keyword DOCTYPE must be followed by the root element.
3. Keyword DOCTYPE must be in upper case.
--------------------------------------------------------------------------------------
Prof. JANHAVI N L, VVFGC, Tumkur Page 13
INTERNET PROGRAMMING XML- eXtensible Markup Language

EXTERNAL DTD:
External DTD is same as internal DTD except that it defines in the external
file.
We create DTD in notepad and save this file with dtd and it can use with
more than one XML document.

[Link]
<?xml version = "1.0" encoding = "UTF-8" standalone="no" ?-
<?xml-stylesheet type="lext/css" href="[Link]"?>
<!DOCTYPE address SYSTEM "[Link]">
<address>
<name> neethu joy</name>
<company>wipro</company>
<phone> (011) 123-4567</phone>
<email>&email123;</email>
</address>
--------------------------------------------------------------------------------------
XML NAMESPACES
 In XML, A namespace is used to prevent any conflicts with element names.
 In other words, Namespace means by which we can differentiate elements and
attributes of different XML document types from each other when combining
them together into other document, or even processing multiple documents
simultaneously.
Example:
<?xml version="1.0" encoding="UTF-8"2>
books
<book>
<title>Intemet Programming</title
author kumar</author>
</book>
</books>

Need for Namespaces

1. XML allows users to create their tags, which results in naming collisions.
For ex: element title
<title>Designation of Saurabh Kumar</title>
<title>Sir</title>
<Fname>Saurabh</Fname>

2. Namespace provide a means for user to prevent naming collisions Element

title.
<xhtml:title> Designation of Saurabh Kumar</xhtml:title>
<person:title>Sir<person:title>
<Fname>Saurabh Kumar</Fname>

Prof. JANHAVI N L, VVFGC, Tumkur Page 14

INTERNET PROGRAMMING XML- eXtensible Markup Language

3. An XML namespace is a collection of element and attribute names used in XML

document.
The name of namespace usually has the form of a uniform resource
identifier(URI).

4. A prefix is used for two reasons:

– The most URIs are too long to be typed on every occurrence of every name
from the namespace.
– A URI includes characters that are invalid in XML.

5. Usually the element for which a namespace is declared is usually the root of a
document.
<html xmlns=[Link]
This declares the default namespace, from which names appear without prefix.
-----------------------------------------------------------------------------------
XML Schemas
 An XML Schema defines how to structure an xml document and it can be used
in the place of DTD.
 XML Schema is based on the XML.
 XML Schema language is known as XML Schema Definition(xSD).
 XML Schemas are used to overcome the disadvantage of DTDs.

Few disadvantages are listed are:

 Syntax is different from XML- Cannot be parsed with an XML Parser.
 Very difficult for the programmers to deal with 2 different types of syntaxes.
 DTDs do not allow restriction on the form of data that can be content of
element.
 Ex: <quantity>, <time>

Purpose of XML Schema

1. Elements which can occur in the xml document.
2. The child elements for elements.
3. The order of child elements.
4. The number of child elements.
5. Whether the element is empty or it can have some text.
6. The type of data elements or attributes can have
7. Attribute which can be used for the elements used in documents.
8. Default and fixed values for elements and attributes.

Features/advantages/characterstics of XML Schema

1. Supports Data Types.
2. Supports namespaces.
3. Provide built-in primitive data types which includes byte, string, Integer,
floating point numbers, country codes and language codes etc.
4. Provide the ability to define custom data types.

Prof. JANHAVI N L, VVFGC, Tumkur Page 15

INTERNET PROGRAMMING XML- eXtensible Markup Language

5. Easy to describe allowable content in the document.

6. Easy to validate the correctness of data.
7. Object-oriented approach like inheritance and encapsulation can be used in
creating the document.
8. Easier to convert data between different data types.
9. Easy to define data formats.
10. Easy to define restrictions on data.
I1. It is written in xml so any xml editor can be used to edit xml schem
12. Xml parser can be used to parse the schema file.
13. They are extensible as they are written in xml.
---------------------------------------------------------------------------------------
Defining a Schema
Example:
<xs:element name="note">
<xs:complexType>
<xs:sequence>
<xs:element name="to" type="xs:string"/>
<xs:element name="from" type="xs:string"/>
<xs:element name="heading" type="xs:string"/>
<xs:element name="body" type="xs:string"/>
</xs:sequence>
</xs:complexType>
</xs:element>

The Schema above is interpreted like this:

 <xs:element name="note"> defines the element called "note"

 <xs:complexType> the "note" element is a complex type
 <xs:sequence> the complex type is a sequence of elements
 <xs:element name="to" type="xs:string"> the element "to" is of type
string (text)
 <xs:element name="from" type="xs:string"> the element "from" is of
type string
 <xs:element name="heading" type="xs:string"> the element "heading"
is of type string
 <xs:element name="body" type="xs:string"> the element "body" is of
type string

--------------------------------------------------------------------------------------

Prof. JANHAVI N L, VVFGC, Tumkur Page 16