Ip Notes

Internet programming VVFGC,Tumkur
VIDYAVAHINI FIRST GRADE COLLEGE
INTERNET PROGRAMMING
3RD SEMESTER BCA
Vidyavahini First Grade College

Near Puttanjaneya Temple, Kuvempunagar, Tumkur – 572103.
E-Mail:vvfgc.bca@gmail.com
Website:www.vidyavahini.org/bca
Contact No: 0816 – 2261130 Database Management Systems.
Department of BCA Page | 1

Chapter-1
FUNDAMENTALS OF WEB
Computer Network:
A group of two or more computer system linked together.
Internet:
It is a global network of networks.
Or
Internet is the largest computer network in the world connecting billions of computers.
 It uses the standard internet protocol suit called TCP/IP to serve billions of user worldwide.
 It consists of millions of private, public, business and government networks.
The internet is different from all other two aspects
1. It is the biggest network in the world.
2. It is freely accessible to the public.
The internet carries vast range of information resources and services.
History of Internet
The first internet was developed by “Advance Research Product Agency”[ARPA] of US
department of defense in 1969. It has called as ARPA Net.
Difference between Internet and Intranet
Internet Intranet
It is a wide network of computers and it’s open Intranet is also a network of computers
for all. design for a specific group of users.
Internet itself contains a large no of intranets. It can be accessed from internet but with
restrictions.
The number of users who use internet is The number of users is limited.
unlimited.
The visitor’s traffic is unlimited. The traffic allowed is also limited.
Internet contains different sources of Intranet contain only specific group of
information and is available for all. information.
It is a collection of various LAN, WAN and Mostly any of LAN or MAN or WAN.
MAN.
TCP = Transmission control protocol

IP = Internet protocol
Internet protocol :
The internet protocol is the language that computers used to communicate over the
internet.
 Every machine on the internal as a unique identifying number called an IP address.
Example: 216.27.16.136
 The computers communicate in binary form
Example: 11011000.00011011.00111101.10001000
 If we add all the position together we get 32. so the IP address is always 32 bits.
 Some IP address
Example : 0.0.0.0 is reserved for the default network.
 The address 255.255.255.255 is used for Broadcast.
 The most of the people type the domain name in the browser than IP address as it is easy to
remember name than numbers.
Example: IP address of www.google.com is 209.85.148.105
 The IPb address of www.tumkuruniversity.in is 14.139.159.35
Domain Names :
Domain names are textual names given to the notes on the internet. It is in the form of
words separated by dots[periods].
Example: www.google.com
www.yahoo.org
The last position of domain name represents top level domain or first level domains .
There are several hundred top levls of domain name as follows.
Domain name Assigned to

.com Commercial organization
.edu Education organization
.gov Government organization
.mil Military organization
.net Major network support center
.org Organization
.int International organization
Country code a country
Country code domain :

A unique two letter combinations for every country like .in for India, Au for Australia,
Uk for united kindom.etc.
Sub Domain :
Sub domains are the third level domains that are used to organize the website contain
in a systematic manner.
They are just like folders and under root directly. ex : http:||www.kar.nic.in

Purpose of sub domains

1. We can organize the website.
2. We can share our disk space with others.
Domain name server[DNS] :

It is a software system that translates a computer fully qualified domain name into IP
address.
World Wide Web [WWW] :

 The web is a system of interlink hyper text documents access via internet.
 It is developed by TIM BERNERS LEE in 1989 at CERN[European laboratory for physics].
 It is the information sharing model that is built on top of the internet.
 The web uses http protocol to transmit data over the internet.
 The web utilizes browser like google chrome to access the web documents called web pages
that are linked to each other via hyperlinks.
 Web document contains graphics sounds text and video.
Web Browser :
 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.
 Some of the popular web browser all internet explorer, opera, mozillafirefox.
Primary functions of browser

 The browser understands the programming languages used towrite web pages and converts then
to readable and viewable documents.
 Web browser knows how to go to a web server on the internet and request a page.
Protocols
The most commonly used protocol on the web browser is http. This protocol is typically
when browser communicates with a server. Other protocols used in web browser are FTP, telnet
mailto news and so on.
Web server :
 A web browser is software what runs the entire website hosting server computer.
 Its main purpose function is to server web pages which means it wait for requests from web
browser and responds by sending the required data back.
The most popular web server
1. Apache HTTP server
2. MIIS[Microsoft internet information server]
Apache HTTP server MISS

It is develop and maintained by the apache It is developed by the Microsoft corporation.
software information.
It is open source product. It is vender specific and it is not open source.
It is available for range of operating system It works only in windows operating system.
including UNIX, LINIX, Windows, etc.
It can be controlled by configuring the http It can controlled by modifying the program
configuring file. called IIS span in we can access this program
through control panel in administration tools.
URL’s :
 URL is the fancy name for address.
 It contains information about where a file is an what a browser should do with it.
 Each file on internet as a unique url syntax or parts of url.
Syntax : Scheme:||host name:port/path-and-filename
Scheme : it tells the browser how to dual the file that it is about to open.
The scheme is after is communication protocol the most commonly used
scheme for web communication is http.
Host name : The DNS are IP address of the server.
Post : 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.

Path-and-file name : the name and location of the requsted resource under the server
document base directory.
Example : http:||www.google.com:80/web prog/main.html
MIME[multipurpose internet main extension ] :

 The type of the documents that are received from the web server by the browser all specified
with the mime.
 MIME enables to send and receive graphics audio and video files via the internet mail
system.
 When the browser receives the document from a web server. It uses the included mime
format specification to determine what to do with the document.
MIME format specification
Syntax: type/subtype
Type subtype example
1.Text pain or html text/plain or text/html
2.Image gif ; jpeg image/gif image/jpeg
3.Video mpeg video/mpeg
4.Application pdf application/pdf
5.Application doc application/doc
HTTP [hyper text transfer protocol]

 It is most popular application protocol used in the internet http is an asymmetric request
response client server protocol.
 Asymmetric means there is a many to one relationship between client and the server. http
is stateless protocol. “A stateless protocol is a one that does not maintain a relationship
between request.
 Each request unrelated to any previous request.
The communication using http involves two phases
1. Request phase
2. Response phase
Request phase :
Where the client sends a request message to server response phase.
Response phase :
Where server returns a response message client request.
HTTP message : it consists of three parts message head, blank line, message body.
HTTP request message :

Request line
Request heads
Blank line
Request message Message

body(optional)
Syntax of request line : request method name request URL HTTP version
HTTP request method :
It defines a set of request methods which can be used by the client to sent request
message to http server.
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 its 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
1. HTTP1.0
2. HTTP1.1
Syntax of request header
Request header name : request header value1, request header value2………..
Example : host:www.xyz.com
Accept:image/gif
Accept language:us.en
Connection:keep aline
Note: the most common request header name is the ‘accept’ which specifies the type of
document that the browser is willing to accept to from the server.
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
Ex :content type : text/html
Content length : 80
Connection keep aline
Note: the common response header is the content. This contains the information about the type of
the document.
CGI [common gateway interface]
 CGI is a server extension that extents the capability of web server.
 CGI is a technology that creates and handles dynamic document.
 The standards of CGI define how the dynamic document should be return how the input should
be supply to the program how the output should be used.
How the dynamic document is created and processed?
 In the first step the web client connect to the web server and sends the program to the web server.

 The web server runs a CGI program in the server side.

 The web server 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 veriy
from one request to another.
Example : getting the date and time from the web server.
 A CGI program can be written in one of the language supporting CGI such as C, C++, pearl.
Environment Variables :
A CGI program uses of list of environment variables to response to the request from the
browser.
Environment variables Meaning
1. CONTENT_LENGTH the length of the data passed to CGI root
directory of web documents
2. DOCUMENT_ROOT root directory of web documents.
3. HTTP_USER_AGENT type of the client program(browser).
4. SERVER_NAME it specifies the server name or IP address.
5. SERVER_ROOT port number of the server.
Search Engine :
A web search engine is a software system that is design to search for information on the
world wide web.
 The information may be web pages, images, videos and other types of files.
 Some search engine data available in data base are in open directory.
 Search engine also maintains real time information by run an algorithm on a web crawler.
Working functionality :
1. Web crawling : where content is discover.
2. Indexing : where it is analyze and stored in huge database.
3. Search (or)Retriver : where a user query fetches a list of relavent pages.
Search Engine
 BING : it is a Microsoft attempt to challenge Google in the area of search but despite the
efforts they still did not manage to convince users that the search engine can produce better
results than Google.
 YAHOO : since October 2011 yahoo search as powered by bing. Yahoo is still the most
popular email provider and according to the reports holds the 3rd place in search. Fewer users
friendly.
 GOOGLE : it is an American multinational company specializing in internet related services
and product. These include online advertising technologies searching cloud computing
software and so on. User friendly.

Security : it is the most crucial user of internet.

The most common security issues are
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 : personal data are stored in the server side like credit number or password should not
be modify by third party.
4. Non reputation : the data encryption and decryption most commonly used for ensuring all the
security issues.
 Encryption : it is a technique by which information send over the network is
converted into another form. So that no one can understand that information.
 Decryption : the technique by which the encrypted method message is decoded
back to its original message.
Chapter 2: Introduction to HTML
1. Introduction.
2. History and Versions of HTML
3. Advantage and Disadvantage of HTML

4. XHTML-Difference between HTML and XHTML

5. Advantages of XHTML over HTML
6. Basic Structure HTML Comments.
7. Standard XHTML document structure
8. XHTML Doc Types
9. Syntax and Rules of XHTML
Introduction:
Definition of HTML:
HTML stands for HyperText Markup Language. It is authoring language which is used to create
documents on the World Wide Web. 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.
Hypertext is the method by which we able to move around on the web. And Markup is used to
mark in the certain type which is used inside HTML tags.
Use of HTML:
Web pages can create by using several different technologies. HTML is responsible for telling
web browser to, how text and other objects should appear. Whether the text should be small,
large, bold, underlined, or right or left justified is largely determined by the HTML embedded in
a Web page.

History and Versions of HTML:
As HTML has progressed and evolved over time, new version of the language have been
released to introduce the new features and deprecate the old. HTML 1.0 was published in 1993,
HTML2.0 in 1995, HTML 3.0 in 1996, HTML 4.0 in 1997 , HTML 4.01 in 1999 , XHTML in
2000 and HTML 5.0 in 2008.
HTML 1.0:
HTML 1.0 was not specified by the w3c and was only implemented in Mosaic and Lynx. It
didn’t support the background color or background image of the page. In this version there were
no tables or frames. We couldn’t dictate the font also.
HTML 2.0
HTML 2.0 was a huge improvement over HTML 1.0. Background color and images could be set.
Forms became available with a limited set of fields. Firstt time visitors to a web page could
submit information. Tables also came in picture.
HTML 3.2
HTML 3.2 support CSS level 1. HTML 3.2 expanded the number of attribute that enabled
designers to customize the look of a page. HTML 3.2 didn’t included support for the frame but
browsers makers implemented them anyway.
HTML 4.0
HTML deprecates any uses of HTML that relate to forcing a browser to format an element in a
certain way. All formatting has been moved into the style sheets.
HTML 4.01
HTML 4.01 is a minor revision of the HTML 4.0 standard. HTML 4.01 also provides the basis
for meaning of XHTML elements and attributes, reducing the size of XHTML 1.0 specification.
HTML 5

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.
XHTML 1.0
XHTML is the first specification for the HTML and XML cross-breed. XHTML document can
be manipulated by any program that understands XML.
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.
Advantage & Disadvantage of HTML:
Advantage:
1. It is widely used.
2. Every browser support HTML language.
3. Easy to learn and use
4. It is by default in every window so you don’t need to purchase extra software.
Disadvantage:
1. It 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..
3. Security features are not good in HTML.
4. If we need to write long code for making webpage it produces some complexity.
Difference between HTML and XHTML:
XHTML HTML
1. The tag names and attribute name are case 1. The tag names and attribute names are case
sensitive. insensitive.
2.In, XHTML, all tags must be written in 2. In HTML, we can use capital letters for
lowercase. element, lowercase for attributes.
3. Every element we use in XHTML must 3. Not required in HTML.
have both an opening and closing tag.
4. In XHTML, empty element may use either 4. It is optional.
the empty element syntax (br />) or have an

end tag immediately follow the start tag (<br>

</br>).
5. All attributes in XHTML must be contained 5.Not required.
in quotes.
<input type=”submit” name=”submitbutton”
/>
6. In XHTML , all attribute must be expressed 6. Some elements have attributes that do not
in attribute-name and attribute-value pairing appear to require a value-for example.
with quote marks surroundings the attribute
value –part.
<input type=”checkbox”
name=”chkNewsletter” checked=”checked”
.>
7. It doesn’t allow attribute minimization 7.It allows Minimization.
8. In XHTML, the opening <html>tag 8.It is not required in HTML.
requires an xmlns attribute(XML NameSpace).
9. XHTML requires certain characters to 9.It is optinal.
appear as named entities.
Ex: We can’t use the character, it must be
expressed using an HTML entity.
10. In XHTML, languages in the document 10.In HTML, languages in the document must
must be expressed using the xml:lang attribute. be expressed using the lang attribute.
11. XHTML must be served with an XML 11.HTML must be served as text/html.
MIME type, such as application/xml or
application/xhtml+xml.
Advantages of XHTML over HTML:
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
1. Sustainability:

XHTML will sustain more long time till web application use XML for their
development.
2. 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).
3. 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.
4. Closing tags:
XHTML supports closing tags. It makes our source code clean and readable.
5. 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.
6. 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.
7. 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.
Basic Structure of HTML Document:
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:
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:
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”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd >
<html xmlns=http://www.w3.org/1999/xhtml 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 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=http://www.w3.org/1999/xhtml 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:
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 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”

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”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
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”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>
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>
Rule 3: All attributes that are use in XHTML, must be in lower case.

Wrong: <a HREF=”http://www.yahoo.co.in”>
Right : <a href=http://www.yahoo.com> </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=http://www.yahoo.co.in>Yahoo Link</a>
Right: < a href=http://www.yahoo.co.in> 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=”Mypic.jpg”>
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

PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
<html xmlns=http://www.w3.org/1999/xhtml”>
<head><title>YOUR TITLE</title></head>
<body></body>
</html>
Chapter3
HTML (Hyper Text Markup Language)
 It stands for “Hyper text markup language”.
 It is the language used to create web pages.
 It was introduced by “Tim Berners Lee” in 1989.
 HTML tags or keywords are surrounded by angle brackets like <html>.
 HTML tags normally comes in pairs like
1. <html>……………….</html>
2. <h1>…………………..</h1>
 The first tag in a pair is the start tag, the second tag is the end tag.
 The end tag is written with a forward slash before the tag name.
 Format of tags:
<tagname attribute=”value”>element contents</tagname>
Note:-
 Hypertext: A text with embedded links to other documents on the web.
 Markup: Refers to what HTML tags do to the text inside them.
Web browsers:
 The purpose of web browsers is to read HTML documents and display them.
 The web browsers are chrome, internet explorer, Firefox, Safari.
The structure of HTML document:
<! DOC TYPE>
<Html>
<head>

<title>
Title of the web
</title>
</head>
<body>
Content (element of html)
</body>
</html>
 <! DOCTYPE>: Which describes type of the document and help the browser to display web
pages only.
It is not case sensitive.
 <HTML>: The element tells the browser that, this is an HTML document.
This is defined at the top of the HTML file and at the end of the file.
 <HEAD>: This tag defines information about the document and it is the first part of the HTML
document. The head tag is used between HTML and body.
 <TITLE>: It defines the title of the document which appears in the title bar of the browser. It is
used in between <head> and </head>.
 <BODY>: The body element the documents body. It contains all the contents of the document
like text, images, graphics…….
Attributes of body tag:
a. Background: Specifies the path of an image.
Eg: <body background=”C:\\image.jpg”>
b. Bgcolor: Sets the background color of the document.
Eg: <body bgcolor=”green”>
c. Left Margin: It sets the left margin for a page in pixels.
Eg: <body leftmargin=”100”>
d. Top Margin: It sets the right margin for a page in pixels.
Eg: <body topmargin=”100”>
e. Alink: It specifies the color of the hyperlink text, when the text is selected.
Eg: <body alink=”purple”>
f. Vlink: It sets the color of hyperlink text with the document that has already been visited.
Eg: <body vlink=”red”>
g. Link: It sets the color of hyperlink within the document which has not yet been visited.
Eg: <body link=”blue”>
h. Text: It specifies the color of normal text in the document.
Eg: <body text=”color name”>
Heading elements:
The heading elements are used to create headlines in a document. There are 6 levels ranging
from larger to smaller.
<h1>……..<h6>

The attribute used in heading element is “align” and the values are left, right, center.
Syntax:
<hn align=”value”>content</hn>
Example:
Write a HTML code to display different levels of headings.
<! DOCTYPE html>
<html>
<head>
<title>Heading elements</title>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Center tag:
It positions the text or image at an equal distance between left and right edge of the
document.
Syntax:
<center>text or image</center>
Eg: <center>physical text</center>
Break tag:
It inserts blank line in HTML. And the tag used is <br>.
Note:
Empty tag: It doesn’t have close tags.
Horizontal rule tag:
It inserts the horizontal line on webpage.
Syntax:
<hr align=”left/right/center” width=”n” size=”n” color=”color name”>

Eg: <hr align=”center” width=”50%“ size=”30” color=”pink”>

Physical text element:
Whenever the user wants to format text element such as using bold, italic or other font
attributes the physical text elements can be used.
Sl.no Elements Description
1 <I>……..</I> *Italic
2 <B>……</B> *Bold
3 <TT>…….</TT> *teletype
4 <S>………</S> *Strike
5 <U>………</U> *Underline
6 <strike>….</strike> *Strike through
7 <Sub>……</Sub> *Subscripted
8 <Sup>……</Sup> *Superscripted
9 <Big>…….</Big> *Big font(one size bigger)
10 <Small>…</Small> *Small font(one size smaller)
Write a HTML code to illustrate all text formatting tags

<html>
<head>
<title>lab3 text format </title>
</head>
<body>
<h1><center>Physical Text Element</center></h1>
<br>
<center>
i am <i>italic</i><br>
i am <b>bold</b><br>
i am <tt>mono spaced</tt><br>
i am <u>underlined</u><br>
i am <s>strike through</s><br>
i am also <strike>strike through</strike><br>
i am<sup>superscripted</sup><br>
i am <sub>subscripted</sub><br>
i am <big>big font</big><br>
i am <small>small font</small><br>
</center>
</body>
</html>

Pre tag (preformatted tag):

It preserves both spaces and line breaks. The pretag is good for displaying
computer code.
Syntax:
<pre>content</pre>
Write a HTML code to insert an image of ‘Tim Berners Lee’ and display his Bio data
<html>
<head>
<title>bio data</title>
</head>
<body>
<h1><center><u> Tim Berners Lee Bio Data</u></center></h1>
<center>
<img src="C:\Users\5\Desktop\ip\Tim_Berners-Lee.jpg" width="200" height="200">
</center>
<h2><center>Inventor of the World Wide Web</center></h2>
<pre>
Born 8 June 1955
London,England,UK.
Institutions WWWC
University of oxford
University of southampton
MIT
Notable awards Turing Award
Queen Elizabeth Prize
OM
KBE
FRS
Spouse Nancy carlson
Rosemary Leith
Children 2
</pre>
</body>
</html>
Acronym tag:
This tag defines the start of an acronym like www, http, html etc. The title attribute can be
used
To show the full version of an expression when we are holding the mouse over the acronym.
Syntax:
<acronym title=”text to display when mouse over the text> text </acronym>
Eg: <acronym title=”world wide web”> WWW </acronym>
Abbreviation tag:
It indicates the abbreviated form like www, http, html etc.
Syntax:
<abbr title=”text to display when mouse over the text> text </abbr>
Eg: <abbr title=”www”> World Wide Web </abbr>
Lists in HTML:
Lists are divided into 3 main categories and they are:
1. Unordered list(<ul>):
 It is used to list items where ordering is not specified. The list is specified by <ul>……..</ul>.
 The bullets used are disc, circle, and square.
By default bullet used is disc.
 The list items use the <li> tag and contain the actual content of the list.
 Both <ul> and <li> can use the type attribute.
Type=”disc/circle/square”.
 The type attribute can appear either with the <ul> or <li>.
 However the type value in a <li> can overwrite the value set in the <ul>.

Example:
<html>
<head>
<title>unordered list</title>
</head>
<body>
<h1><center><u>UNORDERED LIST</u></center></h1>
<h2>TOP LEVEL DOMAIN</h2>
<ul type="disc">
<li>com
<li>edu
<li>gov
</ul>
<hr>
<h2>WEB BROWSERS</h2>
<ul type="circle">
<li>microsoft internet explorer
<li>mozilla firefox
<li>google chrome
</ul>
<hr>
<h2>WEB SERVER</h2>
<ul type="square">
<li>Apache sever
<li>MIIS
</ul>
</body>
</html>

2. Ordered list(<ol>):
 Ordering of list is done by using the tags <ol>………</ol>.
 Ordered list use the <li> tag to enclose the list items.
 Numbering can be done using
a. Arabic numbers
b. Capital and small letters
c. Roman numerals(lower and upper case)
 Numbering starts from 1 usually. The values of the type of attribute within the <ol> is
a. <ol type=”1”> Arabic numbers
b. <ol type=”a/A”> Letters
c. <ol type=”I/i”> Roman numerals
d. The start attribute takes a numeric values which would be the beginning number in the list.
Eg: <ol type=”a” start=”4”>
o/p: Since d is the 4th .
Example:
<html>
<head>
<title>ordered list</title>
</head>
<body>
<h1><u>ORDERED LIST</u></h1>
<ol type="1">
<li>com

<li>edu
<li>gov
</ol>
<ol type="1" start="4">
<li>com
<li>edu
<li>gov
</ol>
<h2>WEB BROWSERS</h2>
<ol type="i">
<li>microsoft internet explorer
<li>mozilla firefox
<li>google chrome
</ol>
<h2>WEB SERVER</h2>
<ol type="I">
<li>Apache sever
<li>MIIS
</ol>
<h2>HTTP request methods</h2>
<ol type="a">
<li>get
<li>post
</ol>
<h2>security issues</h2>
<ol type="A">
<li>privacy
<li>authentication
</ol>
</body>
</html>

Nested lists
<html>
<body>
<ul>
<li>Courses
<ol type="1">
<li>BCOM
<li>BCA
<li>BBM
</ol>
<li>Department
<ol>
<li>Computer Science
<li>Commerce
<ol type="a">
<li>Class1
<li>Class2
</ol>
</ol>
</ul>

</body>
</html>
3.Definition list(<dl>):
It requires a start tag <dl> and an end tag </dl> and two special tags.
 One for definition term<dt>.
 One for definition itself<dd>.
Write a HTML code to display the glossary of any 5 html tags using definition lists
<html>
<head>
<title>definition list</title>
</head>
<body>
<h1><center><u>5 HTML tags</u></center></h1>
<ul>
<li>Paragraph tag<br>
<li>Blockquote tag<br>
<li>Acronym tag<br>
<li>Abbrevation tag<br>
<li>Address tag<br>
</ul>
<dl>
<dt>Paragraph tag
<dd><p>Browsers automatically add some space (margin) before and after each element.</p>
</dl>
<dl>
<dt>Blockquote tag
<dd><blockquote>The blockquote tag specifies a section that is quoted from another
source.</blockquote>
</dl>
<dl>

<dt>Acronym tag
<dd>The title attribute can be used to show the full version of the expression when you are
holding the mouse over the acronym
<dd><acronym title="hypertext transfer protocal">HTTP</acronym>
</dl>
<dl>
<dt>Abbrevation tag
<dd>The title attribute can be used to show the full version of the expression when you are
holding
the mouse over the abbrevation
<dd><abbr title="WWW">World Wide Web</abbr>
</dl>
<dl>
<dt>Address tag
<dd><address>3rd sem BCA,VVFGC,Kuvempu nagar,Tumkur</address>
</dl>
</body>
</html>
Marquee element:
It is used to get a moving text on web page. It consists of start tag <marquee> and the
end tag </marquee>.
Syntax:
<marquee direction=”left/right/up/down” behavior=”scroll/alternate/slide” loop=”n”
width=”n” height=”n” scroll amount=”n” title=”text” bgcolor=”color name”> Scrolling text
</marquee>

Attributes Description
*Bgcolor *gives background color to the text.
*behavior *gives type of movement to the text.
*direction *gives movement direction of the text.
*loop *specifies the no. of times the text will scroll.
*scroll amount *scrolling speed of the text.
*width and height *area of the scrolling.
*title *text will appear when mouse pointer on text.
Font element:
This defines font style, color, and size of the text.
Syntax:
<font face=”style” color=”color name” size=”1-7”> text </font>
Comment tag:
This tag is used to insert a comment in the source code. It will be ignored by the browser.
Syntax:
<!—text -->
Emphasizing tag:
This tag displays the emphasized text, it is rendered in italic.
Syntax:
<em> text </em>
Strong tag:
This tag displays the strong emphasis. It is rendered in bold.
Syntax:
<strong> text </strong>
Note:
*Phrases or logical elements are:
 <em>
 <strong>
 <abbr>
 <acronym>
Paragraph element:
This tag is used for creating the paragraphs in the web page. It is used inside the body
element.
Syntax: <p> align=”left/right/justify”> text </p>
Division element:
It is used to create sections or divisions in an html document. The align attribute of <div>
values are left, right and center.
Syntax:

<div align=”left/right/center”> text </div>

Address element:
It is to define address signature or authorship of document. The address usually renders in
italic.
Syntax:
<address> text element </address>
Block quote tag:
It defines the start of a long quotation.
Syntax:
<blockquote> text </blockquote>
Character entities:
Whenever a special character or symbols like copyright symbol, pie, alpha etc need to be
displayed in an html document character entities are used.
It has three main parts, they are:
 &(ampersand)
 Name of the entity or #no
 ;
All character entities are case sensitive.
Symbols Name values Numeric value
π π ϖ
α α α
β β β
Δ Δ Δ
δ δ δ
γ γ γ
ᴦ Γ Γ
& & &
® ® ®
© © ©
< < <
> > >

‘ '
“ "
Example:
<html>
<head>
<title>character entities</title>
</head>
<body>
<h1><center>character entities</center></h1>
<center>
special character pi <b>π</b><br>
special character alpha<b>α</b><br>
special character beta <b>β</b><br>
special character big delta <b>Δ</b><br>
special character small delta <b>δ</b><br>
special character small gamma<b>γ</b><br>
special character big gamma <b>Γ</b><br>
special character ampersand <b>&</b><br>
special character registered mark <b>®</b><br>
special character copyright symbol <b>©</b><br>
special character space <b> </b><br>
special character lessthan symbol <b><</b><br>
special character greater than symbol <b>></b><br>
special character apostrophe symbol <b>'</b><br>
special character double quote symbol <b>"</b><br>
<center>
</body>
</html>
Image element:
This tag defines an image in an HTML page. The 3 most popular image format and they are
 .jpeg(joint photographic experts group)
 .gif(graphic interchange format)
 .png(portable network graphics)
Syntax:

<img src=”URL/path name” alt=”text” width=”n” height=”n” border=”n” hspace=”n”

vspace=”n” align=”left/right”>
*src *Provides a path for the picture to be inserted into the web page.
*alt *Displays a text if the picture is not displayed on the web browser.
*align *Align specifies the position of the image on the web page.
*border *It specifies the width of the border around the image.
*width *Specify how wide the picture should appear on the web page.
*height *Specify the height of the picture that appear on the web page.
*hspace *It specify the amount of wide space to the left and right of the image.
*vspace *It specify the amount of wide space above and below the image.
Meta tag:
The information provided by the meta tag is very important part of the web because it can assists
the search engines in finding the best match when user performs a search.
This is a server side executable tag. It is written in head part.
Syntax:
<meat name=”keywords” content=”BCA.MCA” HTTP equiv=”content type”
content=”text/html; char set=”UTF8”/>
*Name *Name of the property can be anythingEg: keywords, descriptions
*content *specifies the properties values.
*HTTP
equiv *used to gather information from http response header.
Note:
UTF: Uniquecode text format.
Table tag:
A table is a collection of information arranged into rows and columns. The intersection of a
row and column is called cell. Tables are defined with the <table>…….</table>.
Syntax:
<table border=”n” bordercolor=”color name” bgcolor=”color name” align=”left/right/center”
cellspacing=”n” width=”n” cellpadding=”n”> …………………….. </table>
*Cellspacing *Specifies the amount of space held between the cell in pixels.
*Specifies the amount of space held b/w the contents of cells & cell
*Cellpadding borders.
*Align *Specify the position of the table on the web page.

*Border *Specify the width of the border around the table.

*Width *Specifies the width for entire table.
*Bgcolor *Specifies the background color of the table.
*Border
color *Specify the color for the table border.
 To add rows to the table we use <tr> ………… </tr>.

 To divide the rows into columns we use <td> ……..</td> (the content of the cell is specified).
Syntax:
<td colspan=”n” rowspan=”n” align=”left/right/center” width=”n” height=”n”> ………. </td>
*Colspan *Used to stretch the cell to the right over the subsequent column.
*Rowspan *It is used to stretch the cell to span downwards over several rows.
*Align *Specify the horizontal alignment of the text within the table cell.
*Width *Specifies the width for the table cell.
*Height *Specifies the height of the table cell.
Write a HTML code to create your class time table

<html>
<head>
<title>table tag</title>
</head>
<body>
<h1><center><u>TIMETABLE</u></center></h1>
<table border="10" bordercolor="purple" bgcolor="pink" cellspacing="2" cellpadding="10"
align="center">
<caption><b>THIRD SEM BCA</b></caption>
<tr bgcolor="peachpuff">
<td rowspan="2"><b>DAYS</b></td>
<td colspan="4" align="center"><b>TIME</b></td>
</tr>
<tr bgcolor="peachpuff" align="center">
<th>8.30-9.30</th>
<th>9.30-10.30</th>
<th>10.30-11.30</th>
<th>11.30-12.30</th>
</tr>
<th>Mon</th>
<td>sub1</td>

<td>sub2</td>
<td>sub3</td>
<td>sub4</td>
</tr>
<th>Tue</th>
<td>sub2</td>
<td>sub3</td>
<td>sub4</td>
<td>sub1</td>
</tr>
<th>Wed</th>
<td>sub3</td>
<td>sub4</td>
<td>sub1</td>
<td>sub2</td>
</tr>
<th>Thur</th>
<td>sub4</td>
<td>sub1</td>
<td>sub2</td>
<td>sub3</td>
</tr>
<th>Fri</th>
<td>sub1</td>
<td>sub2</td>
<td>sub3</td>
<td>sub4</td>
</tr>
<th>Sat</th>
<td>sub2</td>
<td>sub3</td>
<td>sub4</td>
<td>sub1</td>
</tr>
</table>

</center>
</body>
</html>
HYPERLINKS
 A link is a pointer to some resource.
 Web pages can contain links that take us directly to other pages and even specific parts of a
given webpage.
 These links are known as hyperlinks.
 Hyperlinks allow visitors to navigate between websites by clicking on words, phrases and
images.
Web linkshave2 basic components:
o A link: The tag in them an in document (source) that refers to another document.
o A target: The document (or particular location in the document) to which the link points
to.
 The tags used to produce links are the<a> and </a>, called as anchor tag.
 The anchor tag consists of two pieces of information:
o The URL of the target document
o The text needed to activate the
Hyperlink Syntax:
<a href=”URL”> click here </a>

 The href (Hypertext reference) attribute is used to specify the target of the link.
Types of Links:
Thereare3 different kinds of links we can have in the web page:
o INTERNAL: Link to a section on the current (same) page or document.
o LOCAL : Link to a page on the same server or directory.
o EXTERNAL: Link to a page or website on a different server or directory.
LINKTARGETS
How link to another website to open in a new window?

Usually links will open in the current window.
We can link to another website to open in a new window by using the “target” attribute and
setting the value to “_blank” with the anchor tag.
Ex:<a href=”http://www.yahoo.com“ target=”_blank”> Click here</a>
Other predefined values for target attribute are:

_self: Loads the page into the current window.
_parent: Loads the page into the frame that is superior to the window the hyperlink is in.
_top: cancels all windows and loads in full browser window.
The default value is _self.
LINKWITHIN A PAGE(NAMEDANCHORS/ INTERNALLINKS)

How to create a hyperlink to a different part of the same page?
To create a link to a different part of the same page the name attribute of the<a>tag is used.
It is a two step process:
i. Create a link pointing to the anchor.
<a href=”#chapter”>click here to read the chapter</a>
ii. Create the anchor itself.
<a name=”chapter1”></a>
Note: #(pound sign)indicates that the link is pointing to anchor on a page.
Anchor meaning a specific place in the middle of the page.
8.Write a HTML code to create text and images as links

<html>
<head>
<title>anchor tag</title></head>
<body>
<center><u><h1>HYPERLINKS</h1></u>
</center>

<br>
<br>
<br>
<center><a href="https://www.sololearn.com">SOLOLEARN</a></center>
<br>
<br>
<center><a href="biodata.html"><img src="C:\Users\5\Desktop\ip\Tim_Berners-Lee.jpg"></a>
</center>
</body>
</html>
FRAMESETS:
 Frame is a rectangular area on the window.
 The browser display window can be divided into rectangular areas, each of which is a
frame.
 Each frame is capable of displaying its own document.
 The number of frames and their layout in the browser window are specified with the
 <Frameset>and</frameset>tags.
 The<frameset> element takes the place of the <body> element. i.e., A
document has either a<body>or a<frameset> but cannot have both.
Syntax:<frameset rows=”“ cols=” “>
</frameset>
Rows Specifies the number of rows of frames that will occupy the window
Cols Specifies the number of columns of frames that will
occupythewindow
There are 3 different kinds of values for rows and cols attributes:
o Numbers(x)
o Percentages(x%)
o Asterisks (*)
 Numbers: When a number is used as a value, it specifies the height of one row /width of one
column in pixels.
 Percentages: When a percentage is used as a value, it specifies the percentage of the total

browser window height that a row should occupy or the percentage of the total browser window
width that a column should occupy.
 Asterisks: When an asterisk is used as a value, it means the remainder portion of the window.
Normally two or more values, separated by commas are given in aquoted string.
Ex:<frameset rows=”300, 500,*” cols=”30%, 50 %,*”>
</frameset>
Frame1 Frame2 Frame3
Example:
<html>
<head><title>frame set</title>
</head>
<frameset rows="20%,*">
<frame src="college.html" >
<frameset cols="30%,70%">
<frame src="anchor.html" name="frame1">
<frame name="frame2">
</frameset>
</frameset>
</html>
FRAMES:
The content of the frame is specified with the<frame/> element, which can appear only in

<frameset>element.
Syntax:
<framesrc=”URL”scrolling=”yes/no/auto”noresize=”yes/no/auto”name=”aaa”frameborder=”0/
1” framespacing=”n” marginheight=”n” marginwidth=”n” border=”n” bordercolor=”name of
the color”/>
Src Reference to the document that will initially be displayed in that frame
Scrolling Specifies whether a scroll bar will appear in the frame or not.
The possible values are yes ,no , auto
Auto: default behavior
[the scroll bar will automatically appear when all the contents of the frame
cannot be fit into the frame]
Yes: includes scrollbar
No: Does not include scrollbar even if it’s necessary to scroll.
Name This is used to identify the frames by specifying the name to

particularframe.
Noresize By default all the frames are resizable.
This prevents theuser from resizingthe frames.
frameborder Specifies whether the frame border is visible or not
framespacing Specifies the spacing between frames in pixels.
marginwidth Specifies the amount of space on either side of the frame
marginheight Specifies the amount of space above or below the frame
border Specifies the thickness of the border in pixels around a frame
bordercolor Sets the border color around the frame using colornames
Frame targeting
The target attribute must be set in an anchor tag <A>
For <A href=”url” target=”name of the frame”>
HTML EMBEDED MULTIMEDIA:

 Sometimes you need to add music or video into your web page. The easiest way to add video or
sound to your website is to include the special HTML tag called<embed>. This tag causes the
browser itself to include controls for the multimedia automatically provided browser
supports<embed> tag and given media type.
 You can also include a <noembed>tag for the browsers which don’t recognize the <embed> tag.
You could, for example use <embed>
 To display a movie of your choice, and <noembed> to display a single JPG image if browser
doesn’t support <embed>tag.
Syntax:

<embed align=”left,right,center” autostart/autoplay=”0/1” playcount/loop=”n” hidden=”name of

the object” src=”url” volume=”0 to 100” alt=”type”>
The <embed>tag attributes
Attribute Description
Align Determines how to align the object it can be set to either center, left or right.
Autostart/ This Boolean attribute indicates if the media should start automatically. You can
autoplay set it either true or false.
Specifies the number of times to play the sound. This is alternate option for loop if
playcount you are using IE.
Specifies if the sound should be played continuously set loop to true, a certain
Loop Number of times a positive value. or not at all false
Specifies if the multimedia object should be shown on the page. A false value
Hidden means no and true values means yes.
Width Width of the object in pixels.
Height Height of the object in pixels.
Name A name used to reference the object
Src URL of the object to be embedded
Volume Controls volume of the sound. Can be from 0 off to 100 full volume.
Alt Specifies the alternative name
Example:
<html>
<head>
<title>embed tag</title>
</head>
<body>
<embed src="C:\Users\Public\Music\Sample Music\Maid with the Flaxen Hair.mp3"
height="250px" width="300px" autoplay="yes" loop="6" alt="audio">
<br>
</body>
</html>

Supported video types

You can use various media types like flash movies.swf, AVI’s.avi (audio video interleave), and
MOV’s.mov file types inside embed tag.
.swf files (small web format): are the file types created by macromedia’s flash program.
.wmv files: are Microsoft’s window’s media video file types
.mov files: are apple’s quick time movie formats.
.mpeg files: are movie files created by the moving pictures expert group.
Example:
<html>
<head>
<title>embed tag</title>
</head>
<body>
<br>
<embed src="C:\Users\5\Desktop\embed123\Group Discussion Techniques.mp4"
loop="6" width="300px" height="250px" autoplay="yes" alt="video">
</body>
</html>

FORMS
o Forms are sections of documents that contain controls used to collect input from the user.
o The controls are objects used to collect information from the user.
o The most commonly used controls are text boxes, check boxes, radio buttons, passwords etc.
o Every form requires the submit button, when the user clicks the submit button ,the form data
is encoded and sent to the web server for processing.
Syntax:<form name=”form1”action="form_action.asp” method="get”>
………
</form>
name Used to give name to the form.
action Tells the browser where to send the form content when we submit the
forms.
method Tells the browser how to send the form content when we submit the form.
Form data can be sent to the server in two ways, each corresponding to HTTP methods.
o The GET method, which sends data as part of the URL. The get method is not
appropriate for forms with personal or financial information because it sends data as
part of the URL.
o The POST method, which hides data in something known as the HTTP header. When the
method attribute is set to POST, the browser sends a separate server request containing some
special headers followed by the data. So that only the server sees the content of this request.
The <input>Tag
Most commonly used controls are specified with<input/>tag.
Syntax:
<input type=”text/password/radio/checkbox/submit/reset” name=”XXX” size=”n” value=”nnn”
checked=”checked”/>
type Specifies the particular kind of control
name Specifies the name of an<input> element

value Specifies the value of the <input> element
Size Specifies default size of the control (no of characters to be entered).
checked Specifies that an <input>element should be preselected when the page
loads
(for type="checkbox" or type="radio")
Textboxes:
Used to collect online input from the user.
Ex:<input type="text" name="fname" value=”txt ” size=”20”/>
Passwords:
It is a text box whose content is never displayed by the browser.
Ex:<input type="password " name="fname" value=”pwd ” size=”20” />
Checkboxes:
One or more buttons used by the user to select one or more elements from a list.
Ex:
<input type=" checkbox” name="fname" size=”20”" value=”check” checked=”checked”/>
Radio buttons:
One or more buttons used by the user to select only one or more elements from a
list. But only one button can be on at a time.
Ex:<input type="radio” name="fname" size=”20”" value=”radio” checked=”checked” />
File Upload:
 The File Upload object represents a single-line text input control and a browse button, in an
HTML forms.
 This object allows file uploading to a server. Clicking on the browse button opens the file
dialogbox that allows a user to select a file to upload.
Ex:<input type="file" value="fileupload"/>
Button:
This allows buttons to be included in the form that perform task other then submitting or
resetting.
Ex:<input type="button” name="fname" value=”button”/>

Image Button:
Image buttons have the same effect as submit buttons. When a visitor clicks an image button
the form is sent to the address specified in the action setting of the<form>tag.
Ex:<inputtype="image"src="rainbow.gif"name="image"width="60"height="60"/>
Write a HTML code to create a form to accept student details.

<html>
<head>
<title>html form</title>
</head>
<body>
<form>
<center><h1>Student information</h1></center>
<hr>
<br>
NAME:<input type="text" name="stdname" size="30"><br>
FATHER NAME:<input type="text" name="Fname" size="30"><br>
ADDRESS:<input type="text" name="addr" size="30"><br>
CITY:<input type="text" name="city" size="30"><br>
SEX:<br><input type="radio" name="sex" value="male">MALE<br>
<input type="radio" name="sex" value="female">FEMALE<br><br>
QUALIFICATION :
<br>
<input type="checkbox" name="diploma">DIPLOMA<br>
<input type="checkbox" name="graduate">GRADUATE<br>
<input type="checkbox" name="postgraduate">POSTGRADUATE<br>
<br>
<strong>attach file:</strong><br>
<input type="file" name="file1"><br><br>
<input type="submit" value="send">
<input type="reset" value="clear">
<input type="button" value="click me"><br>
</center>
</br>
</form>
</body>
</html>

11. Write a HTML code to display a menu of twelve months

<html>
<head>
<title>student information</title>
</head>
<body>
<center><h1>APPLICATION FORM</h1></center>
<hr>
<form action="" method="get" name="form1">
<table >
<tr>
<td>NAME:</td>
<td><input type="text" name="sname" size="30">
</td>
</tr>
<tr>
<td>FATHER NAME:</td>
<td><input type="text" name="fname" size="30">
</td>
</tr>
<tr>
<td>ADDRESS:</td>
<td><input type="text" name="addr" size="30">
</td>
</tr>

<tr>
<td>CITY:</td>
<td><input type="text" name="city" size="30">
</td>
</tr>
<tr>
<td>SEX</td><td><input type="radio" name="sex" value="male">MALE
<input type="radio" name="sex" value="female">FEMALE</td>
</tr>
<tr>
<td>DATE OF BIRTH</td>
<td>DATE:
<select name="dd">
<option>01
<option>02
<option>03
<option>04
<option>05
<option>06
<option>07
<option>08
<option>09
<option>10
<option>11
<option>12
<option>13
<option>14
<option>15
<option>16
<option>17
<option>18
<option>19
<option>20
<option>21
<option>22
<option>23
<option>24
<option>25
<option>26
<option>27

<option>28
<option>29
<option>30
<option>31
</select>
MONTH:
<select name="mm">
<option>JAN
<option>FEB
<option>MAR
<option>APRIL
<option>MAY
<option>JUNE
<option>JULY
<option>AUG
<option>SEP
<option>OCT
<option>NOV
<option>DEC
</select>
YEAR:
<select name="yyyy">
<option>1997
<option>1998
<option>1999
<option>2000
<option>2001
<option>2002
</select>
</td>
</tr>
<tr>
<td>COLLEGE/SCHOOL LAST STUDIED:</td>
<td><input type="text" name="college" size="30"></td>
</tr>
<tr>

<td>TOTAL MARKS</td>
<td><input type="text" name="tmarks"></td>
</tr>
<tr>
<td colspan="2" align="center"><br>
<input type="submit" value="ACCEPT">
<input type="reset" value="REJECT">
</td>
</tr>
</table>
</form>
</body>
</html>
Chapter-6
XML-eXtensible Markup Language
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 are
XML Usage OR NEED

A short list of XML usage says it all −
 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 can customize your data handling needs.
 XML can easily be merged with style sheets to create almost any desired output.
 Virtually, any type of data can be expressed as an XML document.
Or
• Common Data Storage
• 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>
<book>
<title>C++</title>
<author>srikanth Kumar</author>
</book>
</books>
1.XML Declaration:
 The XML declaration indicates that the document is written in XML and specifies which version
of XML.
 The XML declaration must be on the first line of document.
 The XML declaration can also specify the language encoding for document.
 Ex: <?xml version=“1.0” encoding =“UTF-8”>
2. Root element:
 All XML document must have 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:

1. Start tag.(Ex: <book>)

2. End tag.(Ex:</book>)
3. 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.
 Ex: <book>
<author> Kumar</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.
 Ex: <book type=“technical”>
</book>
 Attribute often provide information that is not part of the data. Attribute values must always be
enclosed in either single or double quotes.
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.
 Ex: <!– 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.
 Ex: </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 XML 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.
Ex: <root>
<child>
<subchild>
</subchild>
</child>
</root>
2) XML is case Sensitive:

Ex: <Author>This is incorrect</author>
<author>This is Correct</author>
3) All XML elements must have a closing tag.

Ex: <book> This is incorrect
<book>This is correct</book>
4) All XML elements must be properly nested.

<book><title>This is correct</title>
</book>
5) Attribute values must always be quoted:

Ex: 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.
 Ex:
Wrong: <num>25&25</num>
Correct: <num>25&</num>
Special Replacement
Character

& &
‘ '
“ &quot
< <
> &gt
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>
 After the first character, numbers are allowed as are the “-” and “.” characters.
 Ex: Correct: <K-12>First Grade</k-12> Correct:<www.gmail.com > </www.gmail.com>
 Tag name cannot contain spaces.
Ex: Wrong :<Employee Name></Employee Name>
Correct :<EmployeeName></EmployeeNames>
Prog1.xml
<? xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="books.css"?>
<books>
<book>
<title>web</title>
<author>vidya</author>
</book>
</books>
Books.css (display)
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 script 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 ]]>
 <html><head><title>CDTA Demo</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>
</html>
Types of XML Document and Validation

There are two types of XML document and validation.
a) Well Formed.
b) Valid Document
a)Well Formed:
A “Well Formed” XML document is a document that conforms to the XML syntax rules.
b) Valid document:
A “Valid” XML document is “Well Formed” XML document which conforms to the rule
of a DTD.
Ex:
<?xml version=“1.0” encoding=“UTF-8” ?>
<!DOCTYPE note SYSTEM “InternalNote.dtd”>
<!– 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 books.xml
<!ELEMENT books (book)+>
<!ELEMENT book(title , author)>
<!ELEMENT title(#PCDATA)>
<!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 parsed by a
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 [DTD]>
Where,
• rootname is the root element.
• [DTD] is the actual definition
• There are variations depending on two types of DTD.
o internal (written into the same document)
o external (located in another)
Both , public or private.
Internal DTD:
• An internal DTD is the DTD which is defined between the square brackets within the xml
document.
Address.xml
<?xml version = "1.0" encoding = "UTF-8" standalone = "yes" ?>

<?xml-stylesheet type="text/css" href="address.css"?>

<!DOCTYPE address [
<!ELEMENT address (name,company,phone)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT company (#PCDATA)>
<!ELEMENT phone (#PCDATA)>
<!ENTITY email123 "vidyahalemanebe123@gmail.com">
]>
<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.
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.
Address123.xml
<?xml version = "1.0" encoding = "UTF-8" standalone = "no" ?>
<?xml-stylesheet type="text/css" href="address.css"?>
<!DOCTYPE address SYSTEM "address.dtd">
<address>
<name>neethu joy</name>
<company>wipro</company>
<phone>(011) 123-4567</phone>

<email>&email123;</email>
</address>
Using Both Internal and External DTD’s:

• Internal and external DTD can be use together.
• This is useful when we need to put common definition in one place and want to add more locally
in many files.
• Ex:
<!DOCTYPE books SYSTEM “bookrules.dtd”
[
<!ELEMENT book(summary)>
<!ELEMENT summary(#PCDATA)>
]>
Document Type Definition(DTD) Entities

• XML entities allows us to use text to refer to a data item, instead of using the item itself.
• We can use entities to represent:
1. Characters which can cause problem for the XML processor like (<,>,”,&).
2. Large blocks of data that need to be repeated throughout the document.
• Entities are used to define shortcut to special characters.
• Entities can be declare as internal or external.
An Internal Entity Declaration:

Syntax:
<!ENTITY entity-name “entity-value”>
DTD Example:
<!ENTITY writer “Kumar” >
<!ENTITY copyright “VVFGC”>
XML Example:
<author>&writer;&copyright;</author>
Note: An entity has three parts:
a) An ampersand(&)
b) An entity name

c) A semicolon(;)
An External Entity Declaration:

Syntax:
<!ENTITY entity-name SYSTEM “URI/URL”>
DTD Example:
<!ENTITY writer SYSTEM "https://www.abc.com/entities.dtd">
<!ENTITY copyright SYSTEM "https://www.abc.com/entities.dtd">
XMLexample:
<author>&writer;&copyright;</author>
DTD ELEMENT
Declaring an ELEMENT
• XML element are declared with an element declaration. An element declaration has the following
syntax:
<!ELEMENT element-name (element-content)>
• DTD tag start with <! followed by ELEMENT tag.
• There are many qualifiers which can be used for different purposes .
Qualifiers Meaning
* Zero or more
+ One or more
? Optional(Zero or one)
The various options of using DTD elements.

1.Empty Element:
Empty element are declared with the keyword EMPTY inside the parentheses.
Ex: Syntax: <!ELEMENT element-name(EMPTY)>
<!ELEMENT img (EMPTY)>
2. Element with data:

Element with data are declared with the data type inside parentheses:
<!ELEMENT element-name (#CDATA)>
<!ELEMENT element-name (#PCDATA)>
<!ELEMENT element-name (ANY)>

Example: <!ELEMENT title (#PCDATA)

#CDATA means the element contains the character data that is not supported to the parsed by a
parser.
#PCDATA means the element contains the data that is going to the parsed by a parser.
The keyword ANY declares an element with any content.
3. Elements with children(sequences):

Elements with one or more children are defined with the name of the children elements inside the
parentheses.
Syntax: <!ELEMENT element-name(child-element-name) >
<!ELEMENT element-name (child-element-name, child-element-name,…)>
Ex: <!ELEMENT books(title, author)>
4. Declaring only one occurrence of the same element:

Syntax: <!ELEMENT element-name (child-name) >
Ex: <!ELEMENT book(title , author)>
The example declares that the child element title and author can only one occur one time inside
the book element.
5. Declaring minimum one occurrence of the same element:

Syntax: <!ELEMENT element-name (child-name+)>
Ex: <!ELEMENT book(author +)>
The + sign in the example above declares that the child element author must occur one or more
times inside the book element.
6. Declaring zero or more occurrence of occurrences of the same element.
Syntax: <!ELEMENT element-name (child-name*)>
Ex: <!ELEMENT book(author *)>
The * sign in the example above declares that the child element author must occur zero or more
times inside the book element.
7. Declaring zero or one occurrence of the same element:

Syntax: <!ELEMENT element-name (child-name?)>
Ex: <!ELEMENT book(author ?)>
The ? sign in the example above declares that the child element author can occur zero or one
time inside the book element.
8. Choice of Elements:
Elements can also be declared to have any one of the element from the list of elements.
Ex: <!ELEMENT book (title | author)>
Element book consists of either title or element author.

9. Mixed Content:
Elements can be declared to have elements and text together.
Ex: <!ELEMENT book (#PCDATA | title | author *)>
The above statement declares element book to have text and any number of title and author
elements.
DTD Attribute
• In The DTD, XML attributes are declared with an ATTLIST declaration. An attribute has the
following syntax.
• <!ATTLIST element-name attribute-type default-value>
Where,
element-name: indicate the element which has attribute.
attribute-name: attribute-name is just name of the attribute.
attribute-type: It declares types of data contained by attribute value like CDATA and ID.
Default value can be replaced by any one of the value:
#REQUIRED,#FIXED(set value), #IMPLIED(optional.)
• The attribute-default-value can have the following values:

Value Explanation
#DEFAULT Value The attribute has a default value.
#REQUIRED The attribute value must be included in the element.
#IMPLIED The attribute doesn’t have to be included.

We use an implied attribute if we don’t want to force
the author to include an attribute and we don’t have
an option for a default value either.
#FIXED value The attribute value is fixed.
DTD Example:
• <!ELEMENT square EMPTY>
• <!ATTLIST square width CDATA “0”>
XML Example:
<square width=“100”></square>
Here, the element square is defined to be an empty element with the attribute width of type
CDATA.

Width attribute has a default value of 0. specifying a default value for an attribute, assures that the
attributes will get a value even if the author of the XML document didn’t include it.
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.
Ex: <?xml version=“1.0” encoding =“UTF-8”?>

<books>
<book>
<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> [xhtml and person two namespace]
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. Namespace declaration for an element

<element_name xmlns[:prefix]=URI>
A Namespace for element and attribute of the hierarchy rooted at particular element is declared as
the value of the attribute xmlns.
5. A prefix is used for two reason:

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

6.Usually the element for which a namespace is declared is usually the root of a document.
<html xmlns=http://www.w3.org/1999/xhtml>
This declares the default namespace, from which names appear without prefix.
Declaration of Namespace
Declaration of one Namespace:
<reptiles xmlns:rp=http://www.animal.org/names/species>
Within the reptile element, including all of its children elements, the names from the namespace
must be prefixed with rp, as in the following,
<rp:crocodile>
Declaration of Two Namespace:

<reptiles xmlns:rp=http://www.animal.org/names/species>
<xmlns:html=“http://www.w3.org/1999/xhtml”>
Here, We added the standard XHTML namespace to the reptiles element.
Ex:
<states>
xmlns = http://www.states-info.org/states
xmlns:cap=http://www.states-info.org/state-capitals
<state>
<name>Karnataka</name>
<population>64.86 million</population>
<capital>
<cap: name> Bangalore</cap : name>
<cap: population>4.3 million</cap : population>
</capital>
</state>
</states>
Ex:
<?xml version=“1.0” encoding =“UTF-8” ?>
<!DICTYPE books SYSTEM “bookrules.dtd”>
<bk:books xmlns:bk=“http://www.mysite.com”>
<bk:book type=“programming”>
<bk:title>Internet Programming</bk:title>
<bk:author>Saurabh Kumar</bk:author>
</bk:book>
</bk:books>

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 disadvantage 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 a documents.
8. Default and fixed values for elements and attributes.
Features 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.
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.
11. It is written in xml so any xml editor can be used to edit xml schema.
12. Xml parser can be used to parse the schema file.
13. They are extensible as they are written in xml.
Defining a Schema
• Every schema has schema as its root element. The namespace specification appears as follow:
xmlns : xsd = http://www.sample.org/XMLSchema

• The name of the namespace defined by a schema must be specified with the targetNamespace
attribute of the schema element.
targetNamespace = http://cs.degreecollege.edu/Schema
• If the elements and attributes that are not defined directly in the schema elements are to be included
in the target namespace, schema’s elementFormDefault must be set to qualified , as follows:
elementFormDefault=“qualified”
• The default namespace, which is the source of the unprefixed names in the schema, is given with
another xmlns specification, but this time without the prefix:
xmlns=http://cd.degreecollege.edu/Schema
Schema Instance:
• An instance of schema must specify the namespace it uses.
• Attribute assignments in the tag for its root element is given by the following instance listed below:
1. Define the default namespace. If the root element is syllabus,
<syllabus
xmlns=“http://cs.degreecollege.edu/syllabusSchema”
-- >
2. The second attribute specification in the root element of an instance document is the
schemaLocation attribute. This attribute is used to name the standard namespace for instances,
which includes the name XMLSchema-instance.
xmlns : xsi =http://www.sample.org/XMLSchema-instance
3. The instance document must specify the filename of the schema in which the default namespace
is defined.
This is accomplished with the schemaLocation attribute, which takes two values:
a) The namespace of the schema and
b) The filename of the schema
xsi : schemalocation=“http://cs.degreecollege.edu/syllabus.xsd”
Schema Data Types

• There are two categories of user-defined schema data types: Simple and Complex.
Simple Type:
• A simple data type is a data type whose content is restricted to strings.
• A simple type can not have attribute or include nested elements.
Defining a simple type:

 Use the element tag and set the name and type attributes:
<xsd:element name=“reptile” type=“xsd:string” />
• The instance could be:
<reptile>blackish green skin belongs to the family Crocodilia</reptile>

• An element can be given default value using default attribute

<xsd : element name=“reptile” type=“xsd:string” default=“corcodile” />
• An element can have constant value, using fixed attribute:
<xsd: element name=“reptile” type=“xsd:string” fixed=“crocodile” />
Declaring User-Defined Types:

• User-Define type is described in a simple Type element, using facets.
• Facets must be specified in the content of restriction element. Facets values are specified with the
value attributes.
Complex Type:
• A complex type can have attributes and includes other data types as child elements.
• XML Schema defines 44 data types
• Primitive: string, Boolean, float.
• Derived: byte, decimal, positiveInteger.
• User-defined data types – specify constraints on an existing type.
• Constraints are given in terms of facets of the base type.
• Element only element are defined with the complex Type element.
• Use the sequence tag for nested elements that must be in a particular order. (xs: sequence).
• Use the all tag if the order is not important.(xs:all).
• Nested elements can include attributes that give the allowed number of occurrences (minOccurs,
maxOccurs, unbounded ).
XSLT STYLE SHEETS

 XSL –extensible stylesheets language is a simple functional style programming language.
 A XSL is a reference for defining xml document transformations and presentations.
This style sheet of three categories:
1) XSLT –transforms XML documents into forms & formats.
2) XPath – XML Path Lan(Identify the parts of XML
document.)
3) XSL-FO- Formatting objects.
Overview of XSLT
1) XSLT includes functions, parameters , names to which values can be bound, selection constructs
and conditional expressions for multiple selection.
2) The syntactic structure of XSLT is XML , so each statement is specified with an element.
3) XSLT document is a program to be executed and XML doc is input data to that program.
4) Parts of the XML document are selected, possibly modified, and merged with parts of the XSLT
document to form a new document called as an XSL document.
5) The transformation process used by an XSLT processor.

XML
Docu
XSLT XML
Proc Docu
XSLT
6) XSLT document consists of templates which use Xpath to describe element/attribute patterns
in the input XML document.
7) XSLT processor sequentially examines i/p XML documents searching for parts that match one
of the templates in XSLT doc.
8) If the template matches an element, the child element is not processed until the closing tag is
found. When a template matches an element, the child element of that element may or may not be
processed.
9) XSLT has two models of processing XML data:
a) Template driven model : where the data consists of multiple instances of regular data
collections files of records.
b) Data-Driven-Model: irregular and recursive data.
CSS(cascading style sheets)
• 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 separate.css 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)
Advantage:
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.
Advantage:
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 HTML-

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.
Advantage:
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 it is being recommended to use CSS. So its a
good idea to start using CSS in all the HTML pages to make them compatible to future browsers.
Disadvantage:
1 ) Browser Compatibility :
Some style sheet features are supported and some are not supported by the browsers.
Basic CSS Syntax

The CSS syntax consists of a set rules have 3 parts:
Selector{ property :value;}
• Selector:
A selector is an HTML tag at which style will be applied. This could be any tag like<h1> or
<table> etc.
• Property:
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.
• Value: Values are assigned to properties . For example color property can have value either red or
blue.
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 with 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.
• Here is the generic syntax:

<element style="...style rules....">

Style rule: is a list of property: value pair
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.
• Document level style sheet rules are specified as the content of<style>element.
• This tag is placed inside<head>...</head> tags.
<head>
<style type="text/css"media="projection/screen/tv/print">StyleRules
............
</style>
</head>
3) External CSS-The<link>Element:
• An external style sheet is a separate text file with .css extension.
• We define all the Style rules within this text file and then we can include this file in any HTML
document using<link> element.
• External style sheets can apply to the bodies of multiple html documents.
• Here is the generic syntax of including external CSS file:
<head>
<link rel=”stylesheet” type="text/css“ href="..." />
</head>
Where
rel= ”stylesheet” specifies the relationship of the linking document to the current document.
type=”text/css” specifies the style sheet language as a content-type(MIME type).
This attribute is required.
href=”filename.css” specifies the style sheet file having Style rules.This attribute is a required.
TYPES OFSELECTORS
• In CSS, a selector is the target element to which each CSS rule is applied. The different types of
selectors are:
1) Type selectors
2) Class selectors
3) Id selectors
4) Descendant selectors
5) Child selectors
6) Universal selectors

7) Adjacent sibling selectors

8) Attribute selectors
9) Pseudo-classes and Pseudo-elements
1. Type Selectors:
 It is a single element name.
 In this case, the property values in the rule apply to all occurrences of the named elements.
Ex: h1 {font-size:24pt;}
2. Universal Selectors:
The universal selector, denoted by an asterisk (*),and applies its style to all elements in the
document.
Ex: *{color : red}
Makes all elements in the document red.
3. Descendant Selectors:
Descendant selectors are used to select elements that are descendants of another element
in the document tree.
Ex: p em {color : blue;}
4. Class Selectors:
 Class selectors are used to allow different occurrences of the same tag to use different style
specifications.
 Class selectors are used to select any XHTML element that has a class attribute.
 A class selector is indicated by a dot(.)
Ex:<head>p.normal{color:blue;} </head>
<body><p class=”normal”>text</p>
</body>
5. ID Selectors:
 IDselector is an individually identified(named) selector to which a specific style is declared.
 IDselectors are created by a character # followed by the selector’s name.
Ex: #mypara{color:green;}
<p id=”mypara”>This is Idselector</p>
6. Child Selectors:
A child selector is used to select an element that is a direct child of another element.
Ex: P>em{font-size:50pt;}
7. Attribute Selectors:

Attribute selectors are used to select elements based on their attribute or attribute
values.
Ex: img [ src=”small.gif”]{border-width:1px;border-style:dotted;}
8. Adjacent sibling selectors:

Adjacent sibling selectors will select the siblings immediately following an element.
Ex: em+strong {font-style : italic;}
9. Pseudo classes:
 Pseudo classes are used to add special effects to some selectors.
 Pseudo class styles apply when something happens rather than because the target element simply
exists.
Syntax:
Selector: pseudo-class {property: value ;}
The commonly used pseudo classes are:

: first-child=add special style to the first child of another element.
:link =add special style to the normal link.
:visited=add special style to the visited link.`
:active=add special style to the active link.
hover: =apply styles when mouse points over the element.
focus: =apply styles when element accept input from the keyboard.
Ex:
a:visited{color : red;}
a:active{color : green;}
a:link{color : blue;}
Input : hover {color : red;}
Input : focus {color : green;}

Ip Notes

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Ip Notes

Încărcat de

Drepturi de autor:

Formate disponibile

Internet programming VVFGC,Tumkur

VIDYAVAHINI FIRST GRADE COLLEGE

Vidyavahini First Grade College

Department of BCA Page | 1

TCP = Transmission control protocol

Domain name Assigned to

Country code domain :

Department of BCA Page | 3

Purpose of sub domains

Domain name server[DNS] :

World Wide Web [WWW] :

Department of BCA Page | 4

Apache HTTP server MISS

Department of BCA Page | 5

MIME[multipurpose internet main extension ] :

HTTP [hyper text transfer protocol]

Department of BCA Page | 6

Request message Message

HTTP response message

How the dynamic document is created and processed?

Department of BCA Page | 8

 The web server runs a CGI program in the server side.

Department of BCA Page | 9

Security : it is the most crucial user of internet.

Chapter 2: Introduction to HTML

Department of BCA Page | 10

4. XHTML-Difference between HTML and XHTML

Department of BCA Page | 11

History and Versions of HTML:

Department of BCA Page | 12

Advantage & Disadvantage of HTML:

Difference between HTML and XHTML:

Department of BCA Page | 13

end tag immediately follow the start tag (<br>

Advantages of XHTML over HTML:

There are some advantages of XHTML over HTML.

Department of BCA Page | 14

5. XHTML is easier to teach and to learn:

6. XHTML is ready for the future:

Basic Structure of HTML Document:

An HTML document has two main parts:

Department of BCA Page | 15

The following is the summary of structure of HTML document.

The <html> tag:

<head> and <body> tag:

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

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

<!—Here’s a comment - - >

Standard XHTML Document Structure:

An XHTML document consists of three main parts:

The basic document structure is

<! DOCTYPE ---- >

Line 2 and Line 3:

Department of BCA Page | 17

XHTML Doc Types:

1. XHTML 1.0 Strict:

<! DOCTYPE html

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

2. XHTML 1.0 Transitional:

Department of BCA Page | 18

<! DOCTYPE html

3. XHTML 1.0 Frameset:

Syntax and Rules of XHTML:

Border Specify the width of the border around the table.