Unit 2 - HTML,CSS & XML
Uploaded by
Nimisha GuptaUnit 2 - HTML,CSS & XML
Uploaded by
Nimisha GuptaPSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
HTML: HYPERTEXT MARKUP LANGUAGE
1. INTRODUCTION
HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the
meaning and structure of web content. Other technologies besides HTML are generally used to describe
a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one another, either within a single website or
between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and
linking it to pages created by other people, you become an active participant in the World Wide Web.
HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML
markup includes special "elements" such as
<head>, <title>, <body>, <header>, <footer>, <article>, <section>, <p>, <div>, <span>, <img>,
<aside>, <audio>, <canvas>, <datalist>, <details>, <embed>, <nav>, <output>, <progress>, <vi
deo>, <ul>, <ol>, <li> and many others.
2. THE HISTORY OF HTML
HTML was invented by Tim Berners-Lee, a physicist at the CERN research institute in
Switzerland. He came up with the idea of an Internet-based hypertext system. Hypertext means a
text that contains references (links) to other texts that viewers can access immediately. He
published the first version of HTML in 1991, consisting of 18 HTML tags. Since then, each new
version of the HTML language came with new tags and attributes (tag modifiers) to the markup.
According to Mozilla Developer Network’s HTML Element Reference, currently, there are 140
HTML tags, although some of them are already obsolete (not supported by modern browsers). Due
to a quick rise in popularity, HTML is now considered an official web standard. The HTML
specifications are maintained and developed by the World Wide Web Consortium (W3C). You
can check out the latest state of the language anytime on W3C’s website. The biggest upgrade of
the language was the introduction of HTML5 in 2014. It added several new semantic tags to the
markup, that reveal the meaning of their own content, such as <article>, <header>, and <footer>.
3. HTML EVOLUTION. WHAT DIFFERS BETWEEN HTML AND HTML5?
Since the first days, HTML has gone through an incredible evolution. W3C constantly publish
new versions and updates, while historical milestones get dedicated names as well. HTML4 (these
days commonly referred to as “HTML”) was published in 1999, while the latest major version
came out in 2014. Named HTML5, the update has introduced many new features to the language.
One of the most anticipated features of HTML5 is native support for audio and video embedding.
Instead of using Flash player, we can simply embed videos and audio files to our web pages using
the new <audio></audio> and <video></video> tags. It also includes in-built support for scalable
vector graphics (SVG) and MathML for mathematical and scientific formulas. HTML5 introduced
a few semantic improvements as well. The new semantic tags inform br owsers about the meaning
of content, which benefits both readers and search engines.
The most popular semantic tags are:
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<article></article>, <section></section>, <aside></aside>, <header></header>,
and <footer></footer>.
4. PROS AND CONS OF HTML
Like most things, HTML comes with a handful of strengths and limitations.
Pros:
• A widely used language with a lot of resources and a huge community behind.
• Runs natively in every web browser.
• Comes with a flat learning curve.
• Open-source and completely free.
• Clean and consistent markup.
• The official web standards are maintained by the World Wide Web Consortium (W3C).
• Easily integrable with backend languages such as PHP and Node.js.
Cons:
• Mostly used for static web pages. For dynamic functionality, you may need to use
JavaScript or a backend language such as PHP.
• It does not allow the user to implement logic. As a result, all web pages need to be created
separately, even if they use the same elements, e.g. headers and footers.
• Some browsers adopt new features slowly.
• Browser behavior is sometimes hard to predict (e.g. older browsers don’t always render
newer tags).
5. HOW ARE HTML, CSS, AND JAVASCRIPT RELATED?
While HTML is a powerful language, it isn’t enough to build a professional and fully responsive
website. We can only use it to add text elements and create the structure of the content. However,
HTML works extremely well with two other frontend languages: CSS (Cascading Style Sheets),
and JavaScript. Together, they can achieve rich user experience and implement advanced
functions.
• CSS is responsible for stylings such as background, colors, layouts, spacing, and
animations.
• JavaScript lets you add dynamic functionality such as sliders, pop-ups, and photo galleries.
6. SO…WHAT IS HTML?
HTML is the main markup language of the web. It runs natively in every browser and is maintained
by the World Wide Web Consortium. You can use it to create the content structure of websites
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
and web applications. It’s the lowest level of frontend technologies, that serves as the basis for
styling you can add with CSS and functionality you can implement using JavaScript.
7. HOW DOES HTML WORK?
HTML documents are files that end with a .html or .htm extension. You can view then using any
web browser (such as Google Chrome, Safari, or Mozilla Firefox). The browser reads the HTML
file and renders its content so that internet users can view it. Usually, the average website includes
several different HTML pages. For instance: home pages, about pages, contact pages would all
have separate HTML documents. Each HTML page consists of a set of tags (also
called elements), which you can refer to as the building blocks of web pages. They create a
hierarchy that structures the content into sections, paragraphs, headings, and other content bl ocks.
Most HTML elements have an opening and a closing that use the <tag></tag> syntax.
Below, you can see a code example of how HTML elements can be structured:
<div>
<h1>The Main Heading</h1>
<h2>A catchy subheading</h2>
<p>Paragraph one</p>
<img src="/" alt="Image">
<p>Paragraph two with a <a href="https://example.com">hyperlink</a></p>
</div>
• The outmost element is a simple division (<div></div>) you can use to mark up bigger
content sections.
• It contains a heading (<h1></h1>), a subheading (<h2></h2>), two paragraphs
(<p></p>), and an image (<img>).
• The second paragraph includes a link (<a></a>) with a href attribute that contains the
destination URL.
• The image tag also has two attributes: src for the image path and alt for the image
description.
8. HTML BASICS
HTML (Hypertext Markup Language) is the code that is used to structure a web page and its content.
For example, content could be structured within a set of paragraphs, a list of bulleted points, or using
images and data tables.
HTML is a markup language that defines the structure of your content. HTML consists of a series
of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain
way, or act a certain way. The enclosing tags can make a word or image hyperlink to somewhere else,
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
can italicize words, can make the font bigger or smaller, and so on. For example, take the following line
of content:
My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph
tags:
<p>My cat is very grumpy</p>
HTML tags have two main types: block-level and inline tags.
1. Block-level elements take up the full available space and always start a new line in the
document. Headings and paragraphs are a great example of block tags.
2. Inline elements only take up as much space as they need and don’t start a new line on the
page. They usually serve to format the inner contents of block-level elements. Links and
emphasized strings are good examples of inline tags.
8.1. BLOCK-LEVEL TAGS
The three block level tags every HTML document needs to contain are <html>, <head>,
and <body>.
1. The <html></html> tag is the highest level element that encloses every HTML page.
2. The <head></head> tag holds meta information such as the page’s title and charset.
3. Finally, the <body></body> tag encloses all the content that appears on the page.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
• Headings have 6 levels in HTML. They range from <h1></h1> to <h6></h6>, where h1
is the highest-level heading and h6 is the lowest one. Paragraphs are enclosed by <p></p>,
while blockquotes use the <blockquote> </blockquote> tag.
• Divisions are bigger content sections that typically contain several paragraphs, images,
sometimes blockquotes, and other smaller elements. We can mark them up using
the <div></div> tag. A div element can contain another div tag inside it as well.
• You may also use <ol></ol> tags for ordered lists and <ul></ul> for unordered ones.
Individual list items must be enclosed by the <li></li> tag. For example, this is how a
basic unordered list looks like in HTML:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
8.2. INLINE TAGS
Many inline tags are used to format text. For example, a <strong></strong> tag would render an
element in bold, whereas <em></em> tags would show it in italics.
Hyperlinks are also inline elements that require <a></a> tags and href attributes to indicate the
link’s destination:
<a href="https://example.com/">Click me!</a>
Images are inline elements too. You can add one using <img> without any closing tag. But you
will also need to use the src attribute to specify the image path, for example:
<img src="/images/example.jpg" alt="Example image">
8.3. EMPTY ELEMENTS
Some elements have no content and are called empty elements. Take the <img> element that we already
have in our HTML page:
<img src="images/firefox-icon.png" alt="My test image">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
9. ANATOMY OF AN HTML ELEMENT
The main parts of our element are as follows:
1. The opening tag: This consists of the name of the element (in this case, p), wrapped in opening
and closing angle brackets. This states where the element begins or starts to take effect — in
this case where the paragraph begins.
2. The closing tag: This is the same as the opening tag, except that it includes a forward
slash before the element name. This states where the element ends — in this case where the
paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead
to strange results.
3. The content: This is the content of the element, which in this case, is just text.
4. The element: The opening tag, the closing tag, and the content together comprise the element.
Elements can also have attributes that look like the following:
Attributes contain extra information about the element that you don't want to appear in the actual content.
Here, class is the attribute name and editor-note is the attribute value. The class attribute allows you to
give the element a non-unique identifier that can be used to target it (and any other elements with the
same class value) with style information and other things.
An attribute should always have the following:
1. A space between it and the element name (or the previous attribute, if the element already has
one or more attributes).
2. The attribute name followed by an equal sign.
3. The attribute value wrapped by opening and closing quotation marks.
Note: Simple attribute values that don't contain ASCII whitespace (or any of the characters " ' ` = < > )
can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more
consistent and understandable.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
10. NESTED ELEMENTS
You can put elements inside other elements too — this is called nesting. If we wanted to state that our
cat is very grumpy, we could wrap the word "very" in a <strong> element, which means that the word is
to be strongly emphasized:
<p>My cat is <strong>very</strong> grumpy.</p>
You do however need to make sure that your elements are properly nested. In the example above, we
opened the <p> element first, then the <strong> element; therefore, we have to close
the <strong> element first, then the <p> element. The following is incorrect:
<p>My cat is <strong>very grumpy.</p></strong>
The elements have to open and close correctly so that they are clearly inside or outside one another. If
they overlap as shown above, then your web browser will try to make the best guess at what you were
trying to say, which can lead to unexpected results. So don't do it!
This contains two attributes, but there is no closing </img> tag and no inner content. This is because an
image element doesn't wrap content to affect it. Its purpose is to embed an image in the HTML page in
the place it appears.
11. ANATOMY OF AN HTML DOCUMENT
That wraps up the basics of individual HTML elements, but they aren't handy on their own. Now we'll
look at how individual elements are combined to form an entire HTML page. Let's revisit the code we
put into our index.html example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>
Here, we have the following:
a) <!DOCTYPE html> — doctype. It is a required preamble. In the mists of time, when HTML
was young (around 1991/92), doctypes were meant to act as links to a set of rules that the
HTML page had to follow to be considered good HTML, which could mean automatic error
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
checking and other useful things. However these days, they don't do much and are basically
just needed to make sure your document behaves correctly. That's all you need to know for
now.
b) <html></html> — the <html> element. This element wraps all the content on the entire
page and is sometimes known as the root element.
c) <head></head> — the <head> element. This element acts as a container for all the stuff
you want to include on the HTML page that isn't the content you are showing to your page's
viewers. This includes things like keywords and a page description that you want to appear
in search results, CSS to style our content, character set declarations, and more.
d) <meta charset="utf-8"> — This element sets the character set your document should use to
UTF-8 which includes most characters from the vast majority of written languages.
Essentially, it can now handle any textual content you might put on it. There is no reason
not to set this and it can help avoid some problems later on.
e) <title></title> — the <title> element. This sets the title of your page, which is the title that
appears in the browser tab the page is loaded in. It is also used to describe the page when
you bookmark/favorite it.
f) <body></body> — the <body> element. This contains all the content that you want to show
to web users when they visit your page, whether that's text, images, videos, games, playable
audio tracks, or whatever else.
12. IMAGES
Let's turn our attention to the <img> element again:
<img src="images/firefox-icon.png" alt="My test image">
As we said before, it embeds an image into our page in the position it appears. It does this via
the src (source) attribute, which contains the path to our image file.
We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users
who cannot see the image, possibly because of the following reasons:
1. They are visually impaired. Users with significant visual impairments often use tools called
screen readers to read out the alt text to them.
2. Something has gone wrong causing the image not to display. For example, try deliberately
changing the path inside your src attribute to make it incorrect. If you save and reload the page,
you should see something like this in place of the image:
The keywords for alt text are "descriptive text". The alt text you write should provide the reader with
enough information to have a good idea of what the image conveys. In this example, our current text of
"My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox
logo: a flaming fox surrounding the Earth."
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
12. HEADINGS
Heading elements allow you to specify that certain parts of your content are headings — or subheadings.
In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too.
HTML contains 6 heading levels, <h1>–<h6>, although you'll commonly only use 3 to 4 at most:
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
13. PARAGRAPHS
HTML paragraph HTML <p> tag is used to define a paragraph in a webpage. It is a Paired Tag, i.e., it
comes with an opening <p> and a closing </p> tag.
A <p> tag is very important tag, as all the content written on a website needs to get formatted in the
form of paragraphs. Browsers automatically add blank lines above and below a paragraph to separate it
from other content or other paragraphs on the page.
HTML Paragraphs are block level elements, i.e., a new paragraph will always start from a new line.
Also, Paragraph tags gets automatically closed if another block-element gets parsed before the </p> tag.
Look at the example below, to know how to use <p> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>
Output
This is First Paragraph
This is Second Paragraph
This is Third Paragraph
SPACE INSIDE PARAGRAPH
If you put a lot of spaces inside the HTML <p> tag, browser removes extra spaces and extra line while
displaying the page. The browser counts number of spaces and lines as a single one. You can add spaces
and new lines on a paragraph by using <pre> tag but don't practice it immaturely. The spaces will look
poor on the website. In the example below, as you can see in the results, all the space is ignored by the
browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<body>
<p> This is First Paragraph. </p>
<p> This is Second Paragraph. </p>
<p> This is Third Paragraph.</p>
</body>
</html>
Output
This is First Paragraph.
This is Second Paragraph.
This is Third Paragraph.
HTML <pre> Element
<pre> element defines preformatted text. The text inside a <pre> tag is displayed in a fixed-width font,
and it preserves both spaces and line breaks.
The <pre> tag is also a paired tag. It can be used when you want to display a certain amount of text with
preformatted spaces and line breaks. For example, to display a block of code of a programming language
or to display a poem with proper line breaks.
In the example below, you can see that the text is displayed as it is, in the browser, as it was written
inside the <pre> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Pre Tag </title>
</head>
<p>The pre tag preserves both spaces and line breaks:</p>
<pre>
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
</pre>
</body>
</html>
Output
This is a Paragraph Tag.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
This is a Paragraph Tag.
This is a Paragraph Tag.
This is a Paragraph Tag.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
14. HTML ANCHOR TAG
HTML Anchor tag defines a hyperlink that links one page to another. The Anchor tag is defined
by <a> tag. The href (Hypertext REFerence) attribute is used to give the reference (Path) of the page or
document to be linked.
The <a> tag is a paired tag with </a> tag as a closing tag. Whatever is written between these two tags
will feature as a hyperlink on the webpage.
Syntax
<a href="url">link text</a>
Example: <a href="https://www.google.com">Google</a>
In the example above, the text "Google" will work as a hyperlink and will take the user to our html
tutorial page. We have given the address(Path) of that page as a reference in thehref attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a href="https://www.google.com"> Welcome to Google </a>
</body>
</html>
14.1. HTML TARGET ATTRIBUTE
HTML target attribute is used to specify the place in the browser where the linked document should be
opened. For example, whether the user wants to open the link in a new tab, new window, or in the same
tag. The target attribute has different values for all these different locations.
The target attribute can have one of the following values:
Value Description
_blank Opens the linked document in a new window or tab.
_self Opens the linked document in the same window/tab. This is the default value.
_parent Opens the linked document in the parent frame.
_top Opens the linked document in the full body of the window.
_framename Opens the linked document in a named frame.
Note: HTML Frames are depreciated in HTML 5 and it is recommended not to use them.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag Example </title>
</head>
<body>
<p><a href="https://www.google.com" target="_blank">Welcome to Google</a></p>
<p><a href="https://www. google.com" target="_top"> Welcome to Google </a></p>
<p><a href="https://www. google.com" target="_parent"> Welcome to Google </a></p>
<p><a href="https://www. google.com" target="_top"> Welcome to Google </a></p>
</body>
</html>
14.2. HTML IMAGE LINK
Images in HTML can also work as a Hyperlink. It means you can add an image with a link attached to
it. When the user clicks on the image, he gets redirected to the attached link. It is different from the
conventional linking of text with a url.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Link </title>
</head>
<body>
<p>The image is a link. You can click on it.</p>
<a href="https://www.google.com">
<img src="PUBG.png" alt="HTML Image" style="width:300px;height:200px;">
</a>
</body>
</html>
14.3. HTML BASE PATH LINK
When you link HTML documents related to the same website, it is not required to give a complete URL
for every link if you use Base Path link. This Base path is defined within <base> tag in your HTML
document header.
You can create a base path of your Base Domain. Whenever you give reference to any link, you can
skip the base domain and can directly write latter part. Browser will automatically concatenate the link
with the base path you have given and will make a complete URL.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Base Path Link Example</title>
<base href="https://www.Coderepublics.com" target="_blank">
</head>
<body>
<p> Click following link </p>
<a href="https://www.xyz.com/HTML/html-tutorial.php"> Learn HTML </a>
</body>
14.4. HTML LINK COLOR
You can set colors of your links, active links and visited links using link, alink and vlink attributes
of <body> tag. However, these colors can also be given by the help of CSS classes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Change Link Color </title>
</head>
<body alink="green" vlink="red">
<p> Click following link </p>
<a href="https://google.com/"> Welcome to Google </a>
</body>
14.5. HTML IMAGE ATTRIBUTES
<img> tag is used to display image on the web page. It is an empty tag that contains attributes only,
closing tags are not used in HTML image element.
Syntax
<img src="url" alt="some_text" height="px" width="px">
Example:
<img src="url" alt="some_text" height="px" width="px">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
</body>
</html>
14.6. THE 'src' ATTRIBUTE
It is a necessary attribute that describes the source or path of the image. It instructs the browser where
to look for the image on the server. The "src" attribute specifies the URL (web address) of the image.
The location of image may be on the same directory or another server.
If a browser cannot find an image, it will display the value of the alt attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>
14.8. THE 'alt' ATTRIBUTE
The "alt" attribute defines an alternate text for the image, if it can't be displayed. The value of
the alt attribute describes the image in words. It is considered good for SEO prospective.
The "alt" attribute provides an alternate text for an image, if the user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader).
If a browser cannot find an image, it will display the value of the alt attribute:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Alt Attribute </title>
<body>
<img src="HTML-Image.png" alt="HTML5 Image" style="width:400px; height:250px;">
</body>
</html>
14.9. IMAGE SIZE ATTRIBUTE - 'Height' and 'Width'
With the help of this attribute, we can customize the size of the Image To change the size of HTML
Image we can use "height" and "width" attributes. We can also use Style to change the size of HTML
Image.
<!DOCTYPE html>
<html lang="en">
<head>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<meta charset="UTF-8">
<title> HTML Image Size Attribute </title>
<body>
<img src="HTML5-Image.png" alt="HTML5 Image" width=600px height=250px>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
15. HTML TABLE
We all are familiar with the concept of table, we are not talking about the numeric tables here, the
HTML table we are going to learn is the one with rows and column. It’s similar like the structure of a
matrix with proper rows and columns. This type of structure with rows and columns is very helpful in
representing data in an easy and simple manner. The tabular form of data creates a good expression
wherever it is used due to its representation of necessary data in a simple and accurate manner.
15.1. USE OF HTML TABLE?
An HTML table is defined with the <table> tag. A table is used to display data in tabular form (rows *
column). It is a paired tag. Just use these tags with their attributes to create tables. You can also
use CSS stylesheet to beautify these structures. A table structure is represented in ‘rows*columns’ form,
i.e. a ‘4*5’ table represents a table with 4 rows and 5 columns.
Tables are also used in websites to present any data to the user. It looks really neat and also everyone
prefers tabular form of data nowadays. The HTML tables allows to arrange data like text, images, etc.
into rows and columns.
<!DOCTYPE html>
<html lang="en">
<HTML>
<head>
<meta charset="UTF-8">
<title> HTML Table </title>
</head>
<body>
<table>
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr> <td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table> </body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
15.2. TABLE ROW
A table row can be defined with the <tr> tag It is also a paired tag with </tr> as a closing tag. Whatever
written between these tags will be displayed in a single row of the table. To create a new row
another <tr> tag is written after closing the previous one.
15.3. TABLE HEADING
A table header in HTML tables is a special case of a table row. It starts with <th> tag and ends
with </th> tag. There only difference between a row and a heading is that text written inside <th> tags
is displayed in bold fonts and is by default centered aligned by the browser. Because of its properties
this tag is used only for writing Heading of the table. You can also make a <tr> tags content bold and
centered by using CSS It will work exactly like <th> tag.
15.4. TABLE CELLS
A table cell in an HTML table is defined by <td> tag. It is also a paired tag with </td> as a closing tag.
Each pair of these tags represents a cell in a row. It is used inside &glt;tr> tags only. Without <tr> tags
it is of no value. After declaring the rows the <td> tags are used to enter data in the table. Whatever is
written inside the <td> and </td> tags will be displayed by the browser in the tables as it is.
15.5. TABLE ATTRIBUTES
The <table> Tag in HTML table has many attributes which can be used to further define the structure
of the table than just a standard one. These attributes can make a table look a bit more attractive. Let’s
see one by one the different attributes of the table tag and then we will use them in an example and will
see the changes in the table.
15.5.1. The 'border' Attribute
A border attribute is used to specify visible borders in a table. It means that by default the borders in
the table are hidden and if you don’t specify borders then your table will only display data but there
would be no border between them. The border attribute has two values 0 and 1. 0 means no border and
1 means visible borders. You can also increase the values to 2, 3, 4, etc. it will increase the width of the
border.
There are two ways to specify border for HTML tables.
• By border attribute of table in HTML.
• By border property in CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Attribute </title>
</head>
<body>
<table border="1" width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
<td> 22 </td>
</tr>
</table>
</body>
</html>
The width attribute is used to sizing the table.
15.5.2. Table CSS Border
You can use CSS Style to make table more interactive.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Border Style </title>
<style>
table, th, td {
border: 1px solid black;
text-align: center;
}
</style>
</head>
<body>
<table width="100%">
<tr>
<th> Name </th>
<th> Salary </th>
<th> Age </th>
</tr>
<tr>
<td> Anshuman </td>
<td> Rs. 2,00,000 </td>
<td> 25 </td>
</tr>
<tr>
<td> Kuldeep </td>
<td> Rs. 5,00,000 </td>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<td> 22 </td>
</tr>
</table>
</body>
</html>
15.5.3. THE 'CELLPADDING' AND 'CELLSPACING' ATTRIBUTE
These "cellpadding" and "Cellspacing" attributes are used to adjust the white spaces in your table cells.
CELLPADDING ATTRIBUTE
The Cellpadding attribute is used to specify the space between the content of the cell and its borders. It
provides padding to the content of the cell. As its value increases the space between the cell’s content
and its border is also increases. The value of this attribute is taken in pixels by the browser. The
cellpadding is applied to all the four sides of the content. The value can also be defined in percentages.
CELLSPACING ATTRIBUTE
The Cellspacing attribute is used to specify the space between the cells of the table. Its value can be in
pixels or in percentages. It works similar to the Cellpadding attribute but only between cells. It is applied
to all the sides of the cells.
Note: These two attributes defined above are no longer a part of HTML 5. So it is better to use CSS to
color the tables.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Cellpadding Attribute </title>
</head>
<body>
<table border="1" cellpadding="5" cellspacing="5" style="width:100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Peter</td>
<td>5000</td>
</tr>
<tr>
<td>John</td>
<td>7000</td>
</tr>
</table>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
15.5.4. THE 'COLSPAN' AND 'ROWSPAN' ATTRIBUTE
These two attributes are used with the <td> tag. As the name suggests ‘colspan’ is related to columns
and ‘rowspan’ is related to rows. These two attributes are used to merge two or more columns and rows.
The colspan attribute’s value suggest the amount of column space it will occupy. For example, ‘<td
colspan= 2>’ will create a cell taking space of two cells horizontally i.e., it will occupy the space of a
cell of the next column. Similarly, the ‘rowspan’ will create a cell which will occupy the space of two
or more (as specified) cells vertically, i.e. cells of the next rows. Look at the example below to
understand the concept clearly.
The 'Rowspan'
The rowspan attribute is used to merge two or more rows together to form a single row. A single row
occupies space of the number of merged rows.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows:</h2>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9998887776</td>
</tr>
<tr>
<td>9998887776</td>
</tr>
</table>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
The 'Colspan'
The colspan attribute is used to merge two or more columns into a single column. single column
occupies space of the number of merged columns.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Colspan Attribute </title>
</head>
<body>
<table border="1" width="80%">
<tr>
<th> Person_Name </th>
<th colspan="2"> Mobile </th>
</tr>
<tr>
<td> Bill Gates </td>
<td> 9998887776 </td>
<td> 9998887775 </td>
</tr>
</table>
</body>
</html>
15.6. HTML Caption
To add a caption to a table, use the <caption> tag.
• A caption can be aligned around the table by using align attribute with values -
left/right/top/bottom.
• The default alignment is top.
<!DOCTYPE html>
<html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Table Caption Attribute </title>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
</body>
</html>
15.7. HEIGHT AND WIDTH ATTRIBUTES
The Height and Width attributes of an HTML table are used to specify the height and width of the table.
Their value can be specified in terms of pixels or percentages.
15.8. BGCOLOR ATTRIBUTE
This attribute in HTML table is used to provide a background color to the table. You can easily write
any color name directly or you can also set a color by providing HEX code. This attribute can also be
used with <td> tag to define the color of that particular cell in the table.
15.9. BACKGROUND ATTRIBUTE
This attribute in HTML table is used to add a background image in the table. The image in the table
will work as a background behind the data in the table. It is also can be used with <td> tag.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
16. HTML LISTS
16.1. ORDERED LIST
This list is created by using <ol> tag. Any series can be used to order the elements, like series of digits,
alphabets, roman numerals, etc. All these series get increased by one with every new element entered
in the list.
Ex.-For a numbered order list, the numbering starts at one and is incremented by one for each
successive ordered list element tagged with <li>.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
type ATTRIBUTE
The type attribute is used to change the series type.
Value 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.
LIST OF NUMBERS
Numbers as type - <ol type="1">. Here the numbers will be used to order the elements. Each new
element will get incremented value from the previous one in the list.
<!DOCTYPE html>
<html lang="en">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<head>
<meta charset="UTF-8">
<title> HTML Ordered List </title>
</head>
<body>
<h2>HTML Ordered list</h2>
<ol>
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Uppercase
Uppercase alphabets as type - <ol type="A">. Here, Uppercase alphabets will be used to order the
elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase </title>
</head>
<body>
<ol type="A">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Lowercase
Lowercase alphabets as type - <ol type="a">. Same as above, but the alphabets will be lowercased.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase </title>
</head>
<body>
<ol type="a">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
</ol>
</body>
</html>
Uppercase Roman Numbers
Uppercase roman numbers as type <ol type="I">.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Uppercase Roman </title>
</head>
<body>
<ol type="I">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
Lowercase Roman Numbers
Lowercase roman numbers as type <ol type="i">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Ordered List Lowercase Roman </title>
</head>
<body>
<ol type="i">
<li>Audi</li>
<li>Mercedes</li>
<li>Lamborghini</li>
</ol>
</body>
</html>
The "Start" Attribute
The start attribute is used to control the counting in the list. By default, the counting starts from '1' or
from 'a', but we can change counting to start from a specified number or alphabet. Look at the example
below to see the syntax of using this attribute.
<!DOCTYPE html>
<html lang="en">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<head>
<meta charset="UTF-8">
<title> Ordered List Start Attribute </title>
</head>
<body>
<ol start="50">
<li>Samsung</li>
<li>OnePlus</li>
<li>Nokia</li>
</ol>
<ol type="I" start="50">
<li>Oppo</li>
<li>Vivo</li>
<li>Xiaomi</li>
</ol>
</body>
</html>
16.2. UNORDERED LIST
HTML unordered list is a collection of related items that are listed with no special order or sequence.
This list is created by using HTML <ul> tag. Each item in the list is marked with a bullet. Each item
starts with <li> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List </title>
</head>
<body>
<h2> Unordered List </h2>
<ul>
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Unorder List Type Attribute
The type attribute is used to change the series type.
Value Description
type="disc" Sets the list item marker to a bullet (default).
type="circle" Sets the list item marker to a circle.
type="square" Sets the list item marker to a square.
type="none" The list items will not be marked.
The disc Attribute
The 'Disc' as type - <ul type="disc">. These list items will be marked with small black circles like
bullets. This is the default type in unorder lists.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Disc Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="disc">
<li> Harley-Davidson </li>
<li> Ducati</li >
<li> BMW </li>
</ul>
</body>
</html>
The circle Attribute
The 'Circle' as type - <ul type="circle">. It will display round hollow circles like bullets before list
items.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Circle Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="circle">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
The square Attribute
The 'square' as type - <ul type="square">. It will display filled squares before the list items.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List Square Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="square">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
The none Attribute
The 'none' as type - <ul type="none">. This attribute will list the list items but will not put any bullets
before them.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Unordered List None Attribute </title>
</head>
<body>
<h2> Unordered List </h2>
<ul type="none">
<li> Harley-Davidson </li>
<li> Ducati </li>
<li> BMW </li>
</ul>
</body>
</html>
16.3. DESCRIPTION LIST
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
HTML support another list style which is called definition lists where entries are listed like in a
dictionary. The definition list is the ideal way to present a list of terms, or other name/value list.
The definition list created using <dl> tag. The Description <dt> — defines the item in the list,
and <dd> describes the items in the list.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Definition List</title>
</head>
<body>
<h1>HTML Definition List</h1>
<dl>
<dt>PUBG</dt>
<dd>PlayerUnknown's Battlegrounds (PUBG) developed by PUBG Corporation.</dd>
<dt>God Of War</dt>
<dd>God of War developed by Santa Monica Studio.</dd>
</dl>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
17. HTML FORMS
An HTML form is a section of a document which contains different fields like text fields, password
fields, checkboxes, radio buttons, submit button, menus etc. HTML Forms can be used where we want
to collect some data from the site visitor. For example, in case of user registration you would like to
collect information such as name, email address, Phone number, etc.
A form will take input and then store it to a back-end application such as CGI, ASP Script or PHP script
etc. The back-end application will perform required processing on the passed data like storing it in
database. There are various form elements available like text fields, textarea fields, drop-down
menus, radio buttons, checkboxes, etc.
17.1. HTML FORM STRUCTURE
The HTML <form> tag defines a form that is used to collect user input. All the form elements should
be written inside <form> and </form> tags.
Syntax:
<form>
....
Form Elements..
....
</form>
17.2. HTML FORMS ELEMENTS
Attributes Description
<form> It defines an HTML form to enter inputs by the used side.
<input> It defines an input control.
<select> It defines a multi-line input control.
<option> It defines an option in a drop-down list.
<textarea> It defines a drop-down list.
<button> It defines a label for an input element.
<fieldset> It groups the related element in a form.
<legend> It defines a caption for a <fieldset> element.
<optgroup> It defines a group of related options in a drop-down list.
<label> It defines a label for a field.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
17.3. HTML FORMS ELEMENT
The 'Input' Element
The most important form element is the <input> element. The <input> element can be displayed in
several ways, depending on the type attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Attribute </title>
</head>
<body>
<h2>Text Input</h2>
<form>
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Note: The default width of a text input field is 20 characters.
The 'Select' Element
The <select> element defines a drop-down list. It mostly used when you have to show numbers of items.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Select Attribute </title>
</head>
<body>
<form action="action-page.php">
<select name="Cars">
<option value="Audi"> Audi </option>
<option value="Mercedes"> Mercedes </option>
<option value="Lamborghini"> Lamborghini </option>
</select>
<input type="submit">
</form>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Note: The action attribute defines the action to be performed when the form is submitted. You should
add the destination where the form is submitted.
• The <option> element defines different options that can be selected.
• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to the option:<option value="abc"
selected>.
The 'Textarea' Element
The <textarea> element defines a multi-line input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Textarea Attribute </title>
</head>
<body>
<h2>Textarea</h2>
<p>The textarea element defines a multi-line input field.</p>
<form action="action-page.php">
<textarea name="message" rows="5" cols="60"> This is a simple Example of Textarea. </textarea>
<br>
<input type="submit">
</form>
</body>
</html>
The 'Button' Element
The <button> element defines a clickable button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Button Attribute </title>
</head>
<body>
<button type="button" onclick="alert('Hello World..!')">Click Me!</button>
</body>
</html>
The 'Method' Attribute
The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form
data. The GET is the default method when you submitting your form data.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
BASIS FOR
GET POST
COMPARISON
Parameters are placed URI Body
inside
Purpose Retrieval of documents Updation of data
Query results Capable of being bookmarked. Cannot be bookmarked.
Security Vulnerable, as present in plaintext Safer than GET method
Form data type constraints Only ASCII characters are No constraints, even binary data is
permitted. permitted.
Form data length Should be kept as minimum as Could lie in any range.
possible.
Visibility Can be seen by anyone. Doesn't display variables in URL.
Variable size Up to 2000 character. Up to 8 Mb
Caching Method data can be cached. Does not cache the data.
Syntax
<form action="action-page.jsp" method="get">
<form action="action-page. jsp " method="post">
Difference between GET and POST
The 'Name' Attribute
The name attribute specifies the name of <input> element. It is a good practice to use this attribute, and
also good for SEO purpose.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Name Attribute </title>
</head>
<body>
<form action="action-page.jsp">
First name:
<input type="text" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
</body>
</html>
Grouping Form Data with <fieldset>
The <fieldset> element is used to group related data in a form and the <legend> element defines a
caption for the <fieldset> element.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Fieldset and Legend Attributes </title>
</head>
<body>
<form action="action-page.php">
<fieldset>
<legend>Personal information:</legend>
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</fieldset>
</form>
</body>
</html>
HTML Input Types
The HTML input types element is used to create interactive controls for web-based forms to accept data
from the user. Data can be entered by the user in various forms, like in alphabets, in digits or a
combination of both like an email. These different kinds of HTML input type elements in HTML defines
the type of data a user would enter in the input field. It makes easier for the browser to understand what
data is valid to be entered in a particular field and what is not. The different types of HTML input type
are specified by its ‘type’ attribute, each input type has a different ‘type’ attribute value associated with
it. Let’s see the common values of ‘type’ attribute:
Here is a list of some common HTML Form input types.
Type Description
text It defines a one-line text input field.
password Defines a one-line password input field.
submit It specifies a submit button to submit the form to server.
reset The reset button reset all values in the form.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Type Description
radio A Radio button allows select one option.
checkbox Checkboxes allow selecting multiple options forms.
button Defines a clickable button, which can perform a task on an event.
file It defines to select the file from device storage.
image It Defines a graphical submit button.
HTML Input Type Text
The <input type="text"> defines a single line text input field. By default, a field text can take 20
Characters.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Text </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname">
Last name:
<input type="text" name="lastname">
<input type="submit">
</form>
</body>
</html>
HTML Input Type Password
The <input type="password"> defines a password field. It will show bullets in place of actual characters
during input.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Password </title>
</head>
<body>
<form action="#">
User name:
<input type="text" name="userid">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
User password:
<input type="password" name="psw">
</form>
</body>
</html>
HTML Input Type Submit
The <input type="submit"> defines a Submit button that submit form data to a form-handler. The form-
handler is a type of server page with a script for processing form input data and It is specified in the
form's action attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Submit </title>
</head>
<body>
<form action="action-page.php">
First name:
<input type="text" name="firstname" value="John">
Last name:
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
</form>
</body>
</html>
HTML Input Type Reset
The <input type="reset"> defines a Reset button. If you want to change the input values then click the
"Reset" button, the form data will be reset to the default values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Reset </title>
</head>
<body>
<form action="action-page.php">
First name:<br>
<input type="text" name="firstname" value="John">
Last name:<br>
<input type="text" name="lastname" value="Snow">
<input type="submit" value="Submit">
<input type="reset">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
</form>
</body>
</html>
HTML Input Type Radio
The <input type="radio"> defines a Radio button. It is used where only one option out of many has to
be selected. The name attribute in all the buttons should have the same value, then only a distinct value
will get selected. The Radio buttons let a user select ONLY ONE of a limited number of choices.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Radio Button </title>
</head>
<body>
<form action="action-page.php">
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other<br><br>
<input type="submit">
</form>
</body>
</html>
HTML Input Type Checkbox
The <input type="checkbox"> defines a checkbox. It can be used to select multiple options at a time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Checkbox </title>
</head>
<body>
<form action="action-page.php">
<input type="checkbox" name="vehicle1" value="Bike">Samsung
<input type="checkbox" name="vehicle2" value="Car">Google Pixel>
<input type="submit">
</form>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
HTML Input Type Button
The <input type="button"> defines a button.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Button </title>
</head>
<body>
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
</body>
</html>
HTML Input Type Number
The <input type="number"> defines a numeric input field. The number attribute set restrictions on what
numbers are accepted. You can set the min or max number.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Input Type Number </title>
</head>
<body>
<form action="action-page.php">
Quantity (between 1 and 10):
<input type="number" name="quantity" min="1" max="10">
<input type="submit">
</form>
</body>
</html>
HTML Form Input Restrictions
Here is a list of some common input restrictions (some are new in HTML5).
Attribute Description
disabled It specifies to disabled the input field.
max It specifies maximum value for an input field.
maxlength It specifies the maximum number of character for an input field.
min It specifies the minimum value for an input field.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Attribute Description
pattern It specifies a regular expression to check the input value against.
readonly It specifies that an input field is read only that cannot be changed.
required It specifies that an input field is require.
size It specifies the width (in characters) of an input field.
step It specifies the legal number intervals for an input field.
value It specifies the default value for an input field.
HTML5 INPUT TYPES
The HTML5 introduced 13 different "types" attributes.
Email Fields
The value "email" is used for creating an input field for email address. This HTML input type is
specifically used to validate the email address entered by the user. It uses the standard email address
format and the user violates it then it shows error. Syntax: <input type=email>
Number Fields
The value "number" will create an input field to enter only numbers, if you enter alphabets or symbols
or anything other than numbers, it will show an error, however decimal points numbers are
allowed. Syntax:<input type=number>
Search Fields
It is used to create a search box. You can even add placeholder in the search box by using the
‘placeholder’ attribute. Syntax: <input type="search">
URL Fields
Specifically used to enter a URL. Syntax: <input type="url">
Number Fields
This HTML input type provides controls to enter numbers. It has small buttons on the right side to
increase or decrease the value of the number. In your smartphones this input type automatically opens
the numeric keyboard during entering the data. Syntax:<input type="number">
Telephone Number Fields
It is a special HTML input type field to enter phone numbers only. Syntax:<input type="tel">
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Range Fields
It creates a slider to select a value in within a range of two values. Syntax: <input type="range" min="0"
max="10">
Date Fields
This type is used to create an input area to enter date. You can manually enter the date or can select
value from a graphical calendar. Syntax:<input type="date">
Month Fields
It only provides options of Month and year. Syntax:<input type="month">
Week Fields
Allows you to pick the week and year. Syntax:<input type="week">
Time Fields
Allows you to enter time of the day. It can be entered manually or by the help of a digital clock
format. Syntax:<input type="time">
Datetime-local Fields
Enter Date and time together in a single input field. Syntax:<input type="datetime-local">
Color Fields
If you want to enter any RGB color information on the database then use this input type. Syntax:<input
type="color">
Form Input Attribute
The HTML Form Attribute element is used to create interactive controls for web-based forms in order
to accept data from the user. This attributes can be used on the following elements such as :
The Value Attribute
The value attribute specifies the initial value for an input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Value Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John">
Last name:
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
<input type="text" name="lastname">
</form>
</body>
</html>
The readonly Attribute
The readonly attribute specifies that the input field is read only that means the value of input field cannot
be changed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Readonly Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" readonly>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
The Disabled Attribute
The disabled attribute specifies that the input field is disabled. You cannot make any modification on
input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Disabled Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value ="John" disabled>
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
The size Attribute
The size attribute specifies the size for the input field in character.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form Size Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" value="John" size="30">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
The maxlength Attribute
The maxlength attribute specifies the maximum length allowed for the input field.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Form maxlength Attribute </title>
</head>
<body>
<form action="#">
First name:
<input type="text" name="firstname" maxlength="10">
Last name:
<input type="text" name="lastname">
</form>
</body>
</html>
Note : The maxlength attribute, will not accept more than the allowed number of characters in input
field.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
18. HTML <FRAMESET> TAG
HTML <frameset> tag is used to contain the group of frames which can be controlled and styled as a unit.
The <frameset> element also specifies the number of rows and columns in the frameset, and how much
space they will occupy in a frame.
Note: Do not use HTML <frameset> element as it is deprecated and not supported by HTML5,
but you can use <iframe> tag instead.
Syntax
<frameset cols=" ">............</frameset>
Following are some specifications about the HTML <frameset> tag
Display Block
Start tag/End tag Both Start and End Tag
Usage Frames
Example 1
<!DOCTYPE html>
<html>
<head>
<title>Frame tag</title>
</head>
<frameset cols="50%,50%">
<frame src="xyz/html-table">
<frame src="xyz/css-table">
</frameset>
</html>
Tag-specific attribute
Attribute Value Description
cols Pixels It specifies the number and size of column spaces in the frameset. (Not
% Supported in HTML5)
*
rows Pixels It specifies the number and size of the rows spaces in the frameset.
% (Not Supported in HTML5)
*
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
UNIT 2 – CSS: CASCADING STYLE SHEET
It is used to give a stylistic, beautiful and attractive look to a webpage. It is used with HTML to provide the
webpage a stunning look and feel and can also be used with XML documents.
1. REQUIREMENT OF CSS
HTML itself is not able to give style to the website elements. CSS extends HTML capabilities and provides many
properties to give the required style to the website. Here are some of the key advantages of learning CSS:
a) Create Beautiful Websites: Behind every stunning website, there is a CSS Style Sheet. It handles the
look and feel of a website. The beautiful designs and the attractive features of CSS make it worthy of
your time. It is a must-have skill of a web designer.
b) Solve Big Problems: Before CSS, all attributes like color, element alignments, border, and size had to
be repeated on every web page to style any element. It was a very long process. For example: If you are
developing a large website where fonts and color information has to be added on every single page, it
will become a long and expensive process. CSS was created to solve this problem. It was a W3C
recommendation.
c) Presentation capabilities: CSS provides powerful control over the presentation of an HTML document.
It is related to the previous point as CSS gets combined with markup languages like HTML to enhance
their capabilities and to provide better control to the user of the website.
d) Increase your skills: HTML and CSS are the most basic languages which a web designer should learn
as it opens the door to various other technologies like JavaScript, Angular, PHP, etc. These technologies
become easier to understand, once a person gets exposed to CSS and HTML.
e) Better styling capabilities: It has a much wider variety of attributes as compared to HTML which has a
limited set of attributes with limited capabilities.
2. APPLICATIONS OF CSS
a) CSS saves time: It saves a lot of time as only one Style Sheet can be used on multiple pages, there is no
need to write same code in all the pages. A single file can be used in all those pages where same styling
of webpages is required. This also decreases the page loading time as file transfer size gets reduced
because of reusing of code.
b) Multiple Device Compatibility: CSS can optimize the same webpage to adapt different
viewports(screens). It makes a webpage compatible and readable in all the devices like laptops, tablets,
mobiles, etc. which have different screen sizes.
c) Improves HTML Functionality: CSS has a large number of attributes as compared to Html which
only provides a limited number of styling attributes.
d) Pages load faster: When we use the same Style Sheet in multiple webpages then, loading of the pages
gets faster because of reusing of the code.
e) Responsive layout: It can optimize a webpage to fit varies screen sizes very easily. Different devices
have different screen sizes and CSS features allows the programmer to make their website responsive
to these devices. The responsive nature of CSS makes a webpage compatible and readable in different
screen sizes with ease.
f) Global web standards: The web standards are now depreciating the use of HTML attributes and it is
being recommended to use CSS.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Explanation-
In the example above the <style> tag is used to add CSS code within the webpage. The selectors for a particular
tag are used to stylize it. For example, h1 { } and p { } selectors are used in the example. Let’s see the attribute
used inside them:
• Color: Used to specify the text color of the heading and the paragraph.
• Background-color: Used to define the background color of the heading.
• Padding: Specified the padding.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
3. CSS SYNTAX
A CSS rule-set consists of a selector and a declaration block:
Selector: A Selector is any HTML element we want to style, like <p>, <div> etc.
Declaration Block: This block contains the different properties and their values which we want to change in the
selector element. Example: -
a) color:yellow;
b) font-face:arial;
Property: A Property is kind of a quality of any HTML element like color, border, font-size etc. which will
change the appearance and style of it.
Value: Every CSS property has a value which will give different results for a particular property. In the above
example, value yellow is assigned to color property.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
4. INCORPORATING CSS
It is an important feature of CSS that it can be added by various ways in a webpage.
There are three ways of inserting a style sheet:
Use Description
Inline CSS Using the style attribute in the HTML start tag.
Embedded CSS Using the style Using the <style> tag within the code of the webpage.
External CSS Using the <link> tag to link an external CSS file in the webpage.
4.1. INLINE CSS
Inline CSS is used to apply CSS directly on a single element. It can apply the unique style by putting the CSS
directly into the start tag of a particular element. The style attribute is used to give inline CSS.
4.2. EMBEDDED CSS
It is used when we want to give styling to the whole webpage at once. Its scope is limited to the only webpage it
is written in. Although it can be written anywhere in the page within <style> tag but is preferred within head
section of html.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
4.3. EXTERNAL CSS
In External CSS, the styling information is written in a separate CSS file which gets linked to a webpage by
using <link> tag. A same CSS file can be added to many webpages to style the elements. The <link> element goes
inside the <head> section:
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
5. CSS SELECTORS
CSS selectors are used to select any element and then apply CSS on it. These selectors are very useful in writing
a clean and effective code.
CSS Selectors are used in internal and external CSS. Although inline CSS is also an option but it is never
recommended to use. There are various types of selector through which you can select an element. These selectors
can be combined together to select a more specific element also.
A CSS Selector can select an element by its id, class, type, attribute, tag, etc.
Some popular CSS Selectors are:
• CSS Tag/Element Selector
• CSS Id Selector
• CSS Class Selector
• CSS Group Selector
• CSS Universal Selector
• CSS Descendant Selector
5.1. CSS TAG/ELEMENT SELECTOR
The Tag/Element selector is used to select a element based on its tag name. Any tag name in HTML can be used
as a Tag Selector. When you use a simple tag selector and give it some style, then all over the webpage that tag's
content will use the same CSS style.
Let's look at the syntax of using a Tag Selector:
Syntax
tag-selector{
CSS Styling
}
Example-
p{
color:red;
}
Explanation: In the syntax example, we have used the <p> tag as a tag selector. Now all the paragraphs in the
webpage will have red text color. Remember that tags < > will be omitted when using tag selectors. Only tag
name will be used.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
5.2. CSS ID SELECTOR
CSS ID selector is used to select a particular element with a specific ID associated with it. An ID of an element
is unique in itself, no two elements can have same ID. It makes it easy to select a particular element and give it a
proper CSS Styling.
5.2.1. DEFINING AN ID IN CSS
To define an ID of an element just use the id attribute. You can write anything as an ID but it should start with
an alphabet or an underscore (_).
Syntax
<p id="demo-id">The ID of this paragraph is 'demo_id'.</p>
Note: When using ID Selectors, the hash(#) symbol is used in front of ID name.
Syntax of using ID Selector:
Syntax
#ID_Name{
CSS Styling
}
Example-
#demo-id{
color:red;
}
Explanation: In the example above, the ID #demo-id is used as a selector. Now, wherever this ID is applied,
whether in a paragraph, heading, div, or anything, the text color will be red inside that element.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
5.3. CSS CLASS SELECTOR
CSS Class selector works similar to CSS ID selector but with a slight difference. An ID is unique to the element
whereas a class can be common to multiple elements. It gives freedom from writing the same CSS multiple times
for different elements. If the CSS Style definition is same then just add a common class to the elements and only
define CSS for that particular class. It will be applied to all the elements with that class.
5.3.1. DEFINING A CLASS IN CSS
To define a class for an element, just use the class attribute. You can write anything as an class name but it should
start with an alphabet or an underscore(_).
Syntax
<p> class="demo-class">The class of this paragraph is 'demo-class'.</p>
<p> class="demo-class">This is 2nd paragraph with same class.</p>
<p> class="demo-class">This is 3rd paragraph with same class.</p>
Note: When using Class Selector, the dot(.) symbol is used in front of class name.
Syntax of using Class Selector:
Syntax
.Class_Name{
Css Styling
}
Example-
.demo-class{
color:red;
}
Explanation: Any element which will use the demo-class as class name will display text color as red. It can be
applied to more than one elements.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
5.4. CSS DOT(.) SELECTOR
If you want to style only one specific HTML element with a common class name then you can use the dot(.)
selector. Suppose there is one paragraph and one heading tag of same class, but you want to stylize only the
paragraph, then you should combine the tag name with class name by using dot(.) selector. In this way, only the
paragraph will get affected by the CSS and not the Heading.
Syntax
tag.class-name{
Css Styling
}
Example-
p.demo-class{
color:red;
}
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
5.5. CSS GROUPING(,) SELECTOR
The grouping selector is a very handy selector in case of same CSS Styling for different elements. It minimizes
the code.
Suppose, there is a div, a heading and a paragraph and in all of these we want the font color to be red. Instead of
declaring same color property 3 times for all 3 elements we can just declare it once using a comma(,).
It is not limited to tags only, multiple tags, IDs, or Classes can be given similar CSS by using the comma(,).
Syntax
p, h2, div{
color:red;
}
p, .demo-class, h2{
color:red;
}
Explanation: Notice in the above example, how the comma is used to create a grouping selector. We have also
combined the tags with a class. Now, all the paragraphs, h2 headings, div or elements with. demo-class will display
red color font.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
5.6. CSS UNIVERSAL SELECTOR
The universal selector is used to select and style all the elements in the webpage. It is generally used to override
default padding and margins on a webpage. Universal Selector is represented by the asterisk(*) symbol.
Syntax
*{
Css Styling
}
Example-
*{
margin:0;
padding:0;
}
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
6. CSS BACKGROUND PROPERTIES
CSS background property provide styling to the background of the HTML elements. Some properties are:
a. background-color
b. background-image
c. background-repeat
d. background-attachment
e. background-position
Background color
The background-color property specifies the background color of an element.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Background Image
The background-image property sets an image in the background of an element.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
7. CSS FONTS PROPERTIES
CSS Font property is used to make your fonts attractive and pleasing to the eyes. You can use different fonts for
your headings, paragraphs, and word emphasizing.
CSS Font property is way smarter than HTML Font Tag. HTML font Tag was used till HTML 4, but in HTML
5, it was deprecated. You can no longer use it, but it was an inferior option compared to the CSS Font property.
CSS Fonts has multiple options to give style to the fonts. You can alter the color, size, weight, and family of the
fonts. You can assign various font families at once as a replacement if one is not supported. Let's look at multiple
CSS Font properties and their uses:
Values Description
Font family Assign font-families to the text.
Font color It assigns the color of the text.
Font style It makes the font bold, italic or oblique.
Font variant It creates a small-caps effect.
Font size It assigns the size of the font.
Font weight It controls the thickness of the font.
7.1. CSS FONT FAMILY
Font Families are a set of different fonts with a similar design. These fonts under one family differ in size, weight,
and style, but the characters' basic design would be the same. For example - Arial is a Font family with fonts Arial
regular, Arial Bold, Arial Italic, etc.
CSS Font family property let us assign multiple font families at once. It doesn't mean that all families will be
loaded and used together. Instead, the second one will be used if the browser does not support the first font, and
the third one will be used if the second font is not supported. It works in a particular order of priority.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
7.2. CSS FONT COLOR
Fonts' color is very important for the look and feel of the website. You can give colors to hyperlinks, to highlight
them. Headings can be colored in a different color than regular paragraph text.
To change the color of a particular section of the website like paragraph and headings, Class, ID, and tag selectors
will always help.
Different methods to specify the Font Color
There are three methods to give color to the font:
• Use Color Name: Green, Blue, Red
• Use Hex code for colors: #ffffff (White), #000000 (Black).
• Use RGB Values: rgb(red, green, blue). (128, 0, 0) Maroon, (165,42,42) Brown.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
7.3. CSS FONT SIZE
CSS font-size property is used to specify size of the font. The default size is 16px. Font size can be given in
pixels, em(1em=16px), or in percentage value. There are also some other predefined values given below:
CSS Font Properties
Font Size Values Description
x-small It displays extra small text.
xx-small It displays extremely small text.
small It displays small text.
smaller It displays comparatively smaller text.
medium It displays medium text size.
large It displays large text size.
x-large It displays extra-large text size.
xx-large It displays extremely large text size.
larger It displays comparatively larger text size.
Size in pixels or % It sets the value in percentage and pixels.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
CSS FONT STYLE
Font Styles property in CSS is used to make the font italic. The Italic font is slightly tilted towards the right.
Font style property has three values. One is normal and the other two are slightly different versions of italic:
• font-style: normal;
• font-style: italic;
• font-style: oblique;
CSS Font Variant
Font variant property is fun. It changes the font into small caps. In Small-caps font, all the lowercase alphabets
are changed to uppercase, but their size doesn't change. It means that the changed uppercase alphabets are
displayed in the size of lowercase alphabets.
There are two values of font-variant property:
• font-variant: normal;
• font-variant: small-caps;
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
CSS Font Weight
CSS font-weight property defines the weight of the font, i.e., how thick a font is. It is used to emphasize a
particular piece of text or in headings.
Font-weight can be applied either by using specific text values or by numbers:
• font-weight: normal;
• font-weight: lighter;
• font-weight: bold;
• font-weight: 500;
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
8. CSS LINK STYLING
The default color of links is blue but in CSS you can change the color of the links.
Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Links can be styled
differently depending on what state they are in.
Some link states are:
Types Description
a:link Normal, unvisited link
a:visited Visited link
a:hover When the user mouse gets over it.
a:active The moment when a link is clicked.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Link Text Decoration
The text-decoration property is used to remove underlines from links:
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
9. CSS TABLES
The CSS can also be applied to HTML tables. Below are some properties which can make an ordinary looking
table into an attractive one:
CSS Table Properties
• border
• border-collapse
• padding
• width
• text-align
• color
• background color
9.1. CSS Table Border
Table borders can be set for the table, th and td tags using the border property.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
9.2. Table Border Collapse
By default, the borders are displayed as a thick one with double borders. The border-collapse property specify that
the borders should be collapsed into a single border.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
9.3. Table Padding
Padding creates space between the border and the cells of the table. Table padding is not a special padding for
tables it's the normal CSS padding that is used in the table example below.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
9.4. Table Width and Height
As the name suggests, width and height of a table are defined by the width and height properties.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
10. CSS BOX MODEL
A CSS Box Model is the most important concept in designing websites. It is a combination of different CSS
properties, that together form a box, hence, a box model.
According to the CSS box model, a browser engine represents every element in HTML as a box. This box is a
combination of the element's content, padding, margins and borders.
Let's try to understand the image below:
In the image above, the content is wrapped with padding. This padding area is then wrapped with borders and
then, outside the borders, there is margin. All these properties take space around the content, affecting the other
elements outside the box.
Changes in Content, padding and borders affects the size of the container, even when its size is fixed. The margins
on the other hand, clears the outside space for the container. All these properties together create a CSS Box.
Department of Computer Science & Engineering
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
XML-eXtensible Markup Language
1. INTRODUCTION
A markup language is a computer language that uses tags to define elements within a document. It is human-
readable, meaning markup files contain standard words, rather than typical programming syntax. While several
markup languages exist, the two most popular are HTML and XML.
a. Physical Markup: focus on the presentation. Eg. HTML
b. Logical Markup: storage and transfer of data. Eg. XML
XML - eXtensible Markup Language. Used for data exchange.
<?xml version="1.0" encoding="UTF-8"?> → XML Prolog
<message> --> root
<from> A </from>
<to> B </to>
<subject> good morning </subject> → child tags
<data> please have some tea </data>
</message>
or
<message to="" from="" subject="" data=""/>
1.1. XML PROPERTIES
a) XML is a markup language that focuses on data rather than how the data looks.
b) XML is designed to send, store, receive and display data. In simple words, you can say that XML is used
for storing and transporting data.
c) XML is different from HTML. XML focuses on data while HTML focuses on how the data looks.
d) XML does not depend on software and hardware; it is platform and programming language independent.
e) Unlike HTML where most of the tags are predefined, XML doesn’t have predefined tags, rather you have
to create your own tags.
Example 1: Write XML document to store the data of the student.
<students>
<student>
<rollno> 1 </rollno>
<first_name> Akarsh</first_name>
<last_name> Malhotra</last_name>
<branch> CSE </branch>
<section> A </section>
</student>
<student>
<rollno> 2 </rollno>
<first_name> Prateek </first_name>
<last_name> Bajpai </last_name>
<branch> CSE </branch>
<section> A </section>
</student>
</students>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
1.2. FEATURES OF XML
(i) XML focuses on data rather than how it looks: One of the reasons, XML is popular because it focuses
on data rather than data presentation. The other markup language such as HTML is used for data
presentation. This separates the data and its presentation part and gives us the freedom to present the
data, the way we want, once we receive it using XML. Two or more systems can receive the same data
from a same XML and present it in a different way using other markup language such as HTML.
(ii) Easy and efficient data sharing: Since XML is software and hardware independent, it is easier to share
data between different systems with different hardware and software configuration. Any system with any
programming language can read and process a XML document.
(iii) Compatibility with other markup language HTML: It is so much easier to read the data from XML
and display it on an GUI(graphical user interface) using HTML markup language. When the data changes
over time, we need not to make any changes in the HTML.
(iv) Supports platform transition: The main reason why changing to new systems and platform is
challenging, because it involves the headache of data conversion between incompatible formats which
often results in data loss. XML simplifies this process as the data is transported on new upgraded systems
without any data loss.
(v) Allows XML validation: An XML document can be validated using DTD or XML schema. This ensures
that the XML document is syntactically correct and avoids any issues that may arise due to the incorrect
XML.
(vi) Adapts technology advancements: The reason why XML is popular and being used from a very long
time is because, it can adapt to the new technologies because of its platform-independent nature.
(vii) XML supports Unicode: XML supports Unicode that allows it to communicate almost any information
in any written human language.
1.3. ADVANTAGES & DISADVATNGES OF XML
1.3.1. ADVANTAGES
(i) XML is platform independent and programming language independent, thus it can be used on any system
and supports the technology change when that happens.
(ii) XML supports unicode. Unicode is an international encoding standard for use with different languages
and scripts, by which each letter, digit, or symbol is assigned a unique numeric value that applies across
different platforms and programs. This feature allows XML to transmit any information written in any
human language.
(iii) The data stored and transported using XML can be changed at any point of time without affecting the
data presentation. Generally other markup language such as HTML is used for data presentation, HTML
gets the data from XML and display it on the GUI (graphical user interface), once data is updated in
XML, it does reflect in HTML without making any change in HTML GUI.
(iv) XML allows validation using DTD and Schema. This validation ensures that the XML document is free
from any syntax error.
(v) XML simplifies data sharing between various systems because of its platform independent nature. XML
data doesn’t require any conversion when transferred between different systems.
1.3.2. DISTADVANTAGES
(i) XML syntax is verbose and redundant compared to other text-based data transmission formats such as
JSON.
(ii) The redundancy in syntax of XML causes higher storage and transportation cost when the volume of
data is large.
(iii) XML document is less readable compared to other text-based data transmission formats such as JSON.
(iv) XML doesn’t support array.
(v) XML file sizes are usually very large due to its verbose nature, it is totally dependent on who is writing
it.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
2. NEED OF XML
Since there are systems with different-different operating systems having data in different formats. In order to
transfer the data between these systems is a difficult task as the data needs to converted in compatible formats
before it can be used on other system. With XML, it is so easy to transfer data between such systems as XML
doesn’t depend on platform and the language.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
• XML can be used to exchange data between compatible/incompatible applications in Web/non-Web
applications.
• XML simplifies the process of data exchange between two or more applications.
Now, the question is, why not use the existing Database Management System (DBMS) products such as Oracle,
SQL Server, IMS, IDMS, and Informix, etc., for exchanging data over the Internet (and also outside of the
Internet)? The reason is incompatibility of various kinds. These DBMS products are extremely popular and
provide great data storage and access mechanisms. However, they are not always compatible with each other in
terms of sharing or transferring data. Their formats, internal representations, data types, encoding, etc., are
different. This creates problems in data exchange.
This is similar to a situation when one person understands only English and the other understands only Hindi.
English and Hindi by themselves are great languages. However, they are not compatible with each other.
Similarly, for instance, suppose organization X uses Oracle as its DBMS (relational) and organization Y uses IMS
as its DBMS (Hierarchical). Each of these DBMS systems internally represents the data in their own formats as
well as by using data structures such as chains, indexes, lists, etc. Now, whenever X and Y want to exchange any
kind of data (say list of products available, last month’s sales report, etc.), they would not be able to do this
directly. Consider the following figure.
Database Management Systems (DBMS) are incompatible with each other, when it comes to data exchange.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
If X and Y want to exchange data, the simple solution would be that they agree on a common data format, and use
that format for data exchange. For example, when X wants to send an inventory status to Y, it would first convert
that data from Oracle format into this common format and then send it to Y. When Y receives this data, it would
convert the data from this common format into IMS format, and then its applications can use it. In the simplest
case, this common format can be a text file.
This approach of exchanging data in the text format seems to be fine. After all, all that is needed is some data
transformation programs at both ends, which either read from or write to text format from the native (Oracle/IMS)
format. This approach would be very similar to the one used in our translator approach for human conversations.
But there are some issues with this approach as well, in addition to what we had discussed earlier in the context
of human conversations.
• For instance, suppose another organization Z now wants to do business with X and Y. Therefore, X and
Y now need to exchange data with Z also. Suppose that Z is already interacting with other business
partners such as A and B. Now, if Z is using a different text format for data exchange with A and B, its
data exchange text formats with X/Y and A/B would be different! That is, for exchanging the same data
with different business partners, different application programs might be required.
• Also, suppose that these business partners specify some business rules. For instance, Z mandates that a
sales order arriving from any of its business partners (i.e., A, B, X or Y) must carry at least three items.
For this, appropriate logic can be incorporated in the application program at its end to validate this rule,
whenever it receives any sales order from one of its business partners. However, can we not apply this
business rule before the data is sent by any of the business partners, rather than first accepting the data
and then validating it? If different data exchanges among different business partners demand different
business rules like this, it might be difficult to apply them in the text format.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
HTML is the de facto language of the Internet. HTML defines a set of tags describing how the Web browser
should display the contents of a particular document to the end user. For example, it uses tags that indicate that a
particular portion of the text is to be made boldface, underlined, small, big, and so on. In addition, we can display
lists of values using bullets, or create tables on the screen by using HTML.
The similarity between XML and HTML is that both languages use tags to structure documents. This,
incidentally, is perhaps the only real similarity between the two!
XML also uses tags to organize documents and the contents therein just as HTML does, it is not concerned with
these presentation features of a document. XML is more concerned with the meaning and rules of the data
contained in a document. XML describes what the various data items in a document mean, rather than describing
how to display them. Therefore, whereas HTML is an information presentation language, XML is an information
description language. Thus, conceptually, XML is pretty similar to a data definition language. HTML concentrates
on the display/presentation of data to the end user, whereas XML deals with the representation of data in
documents.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
3. XML TERMINOLOGY
Every XML file has an extension of .XML. Let us call the above file as books.xml. As we can see, the file seems
to contain information organized in a hierarchical manner, with some unfamiliar symbols. Let us understand this
example step by step. In the process, we will start getting familiar with the XML syntax and terminology.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
4. INTRODUCTION TO DTD
Consider an XML document that we intend to write for capturing bank account information. We would like to
see data such as the account number, account holder’s name, opening balance, type of account, etc., as the
fields for which we want to capture information. However, at the same time, we also wish to ensure that this
XML document does not contain any other irrelevant information. For instance, we would like to make sure
that our XML document does not contain information about students, books, projects, or data not needed.
In short, we need easy mechanisms for validating an XML document. For example, we should be able to
specify and validate, which elements, attributes, etc., are allowed in an XML document.
A DTD allows us to validate the contents of an XML document.
For example, a DTD will allow us to specify that a book XML document can contain exactly one book
name and at the most two author names. A DTD is usually a file with an extension of DTD, although this extension
is optional. Technically, a DTD file need not have any extension. We can specify the relationship between an
XML document and a DTD. That is, we can mention that for a given XML file, we want to use a given DTD file.
Also, we specify the rules that we want to apply in that DTD file. Once this linkage is established, the DTD file
checks the contents of the XML document with reference to these rules automatically whenever we attempt to
make use of the XML document.
Imagine a situation where we do not have anything such as a DTD. Yet, let us imagine that we want to
apply certain rules. How can we accomplish this? Well, there is no simple solution here. The programs that use
the XML document will need to perform all these validations before they can make use of the contents of the
XML document. Of course, it is not impossible. However, it would need to be performed by every program, which
wants to use this XML document for any purposes. Otherwise, there is no guarantee that the XML
document contains bad data.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
A DTD will free application programs from the worry of validating the contents of an XML
document. It will take this responsibility on itself. Therefore, the portion of validation is concentrated in just
once place—inside the DTD. All other parties interested in the contents of an XML document are free to
concentrate on what they want to do, i.e., to make use of the XML document the way they want and process it, as
appropriate. On the other hand, the DTD would be busy validating the contents of the XML document on
behalf of any program or application.
• DTD helps us in specifying the rules for validating the contents of an XML document at once place,
thereby allowing the application programs to concentrate on the processing of the XML document.
• A DTD is a file with a DTD extension.
• The contents of this file are purely textual in nature.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
4.1. DOCUMENT TYPE DEFINITION
An XML document contains a reference to a DTD file. This is similar to, for example, how a C program would
include references to various header files, or a Java program would include packages.
A DOCTYPE declaration in an XML document specifies that we want to include a reference to a DTD file.
Whenever any program (usually called as an XML parser) reads our XML document containing a DOCTYPE
tag, it understands that we have defined a DTD for our XML document. Therefore, it attempts to also load and
interpret the contents of the DTD file. In other words, it applies the rules specified in the DTD to the contents
of our XML document for verifying them.
The DOCTYPE declaration stands for a document type declaration.
Note that the DOCTYPE tag is written as <!DOCTYPE …>.
There are two types of DTDs, internal DTD and external DTD, also respectively called as internal
subset and external subset.
An internal subset means that the contents of the DTD are inside an XML document itself. On the other hand,
an external subset means that an XML document has a reference to another file, which we call as external
subset.
Let us take a simple example. Suppose we want to define an XML document containing a book name as
the only element. We also wish to write a corresponding DTD, which will define the template or rule book for
our XML document. Then we have two situations: the DTD can be internal or external. Let us call our XML
document as book.xml, and our external DTD as book.dtd. Note that when the DTD is internal, there is no need
to provide a separate name for the DTD (since the contents of the DTD are inside the contents of the XML
document anyway). But when the DTD is external, we must provide a name to this DTD file.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
As we can see, when a DTD is internal, we embed the contents of the DTD inside the XML document, as
shown in case (a). However, when a DTD is external, we simply provide a reference to the DTD inside our
XML document, as shown in case (b). The actual DTD file has a separate existence of its own.
When should we use an internal DTD, and when should we use an external DTD? For simple situations,
internal DTDs work well. However, external DTDs help us in two ways:
(i) External DTDs allow us to define a DTD once, and then refer to it from any number of XML documents.
Thus, they are reusable. Also, if we need to make any changes to the contents of the DTD, the change needs
to be made just once (to the DTD file).
(ii) External DTDs reduce the size of the XML documents, since the XML documents now contain just a
reference to the DTD, rather than the actual contents of the DTD. Another keyword we need to remember in
the context of internal DTDs.
An XML document can be declared as standalone, if it does not depend on an external DTD.
The keyword standalone is used along with the XML opening tag.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Let us now understand the syntax of the DTD declaration or reference, i.e., regardless of whether the DTD
is internal or external. We know that the internal DTD declaration looks like this in our example:
This DTD declaration indicates that our XML document will contain a root element called as myBook,
which, in turn, contains an element called as book_name. Also, the contents of the DTD need to be wrapped inside
square brackets. This informs the XML parser to know the start and the end of the DTD syntax, and also to help
it differentiate between the DTD contents and the XML contents. On the other hand, the external DTD reference
looks like this:
<!DOCTYPE myBook SYSTEM “myBook.dtd”>
This does not give us any idea about the actual contents of the DTD file, since the DTD is external.
Let us now worry about the DOCTYPE syntax. In general, the basic syntax for the DOCTYPE line is as shown
below:
Let us understand what it means.
1. The DOCTYPE keyword indicates that this is either an internal declaration of a DTD, or a reference to
an external DTD.
2. Regardless of whether it is internal or external, this is followed by the name of the root element in the
XML document.
3. This is followed by the actual contents of the DTD (if the DTD is internal), or by the name of the DTD
file (if it is an external DTD). This is currently shown with dots (…).
Therefore, we can now enhance our DOCTYPE declaration as follows:
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
4.2. ELEMENT TYPE DECLARATION
Elements are the backbone of any XML document. If we want to associate a DTD with an XML document, we
need to declare all the elements that we would like to see in the XML document, also in the DTD. This should be
quite obvious to understand. After all, a DTD is a template or rule book for an XML
document. An element is declared in a DTD by using the element type declarations (ELEMENT tag).
For example, we can declare an element called as book_name, we can use the following declaration:
<!ELEMENT book_name (#PCDATA)>
As we can see, book_name is the name of the element, and its data type is PCDATA. The XML jargon calls an
element name as generic identifier. The data type is called as content specification.
The element name must be unique within a DTD.
Let us consider an example. Suppose that we want to store just the name of a book in our XML document.
Example below shows a sample XML document and the corresponding DTD that specifies the rules for this XML
document. Note that we are using an external DTD. We have added line numbers simply for the sake of
understanding the example easily by providing references during our discussion. The actual XML document
and DTD will never have line numbers.
Understanding the XML document (book.xml)
Line 1 indicates that this is an XML document.
Line 2 is a comment.
Line 3 declares a document type reference. It indicates that our XML document makes use of an
external DTD. The name of this external DTD is book.dtd. Also, the root element of our XML document
is an element called as myBook.
Lines 4–6 define the actual contents of our XML document. These consist of an element called as
book_name.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Understanding the DTD (book.dtd)
Line 1 is an element type reference. It indicates that the root element of the XML document that this
DTD will be used to verify, will have a name myBook. This root element (myBook) contains one subelement called
as book_name.
Line 2 states that the element book_name can contain parsed character data.
4.2.1. Specifying Sequences, Occurrences & Choices
Sequences: The first question is how we add more element type declarations to a DTD. For example, suppose
that our book DTD needs to contain the book name and author name. For this, we simply need to add a comma
between these two element type declarations. For example:
<!ELEMENT myBook (book_name, author)>
This declaration specifies that our XML document should contain exactly one book name, followed by exactly
one author name. Any number of book name-author pairs can exist. Following figure shows an example of
specifying the address book.
As we can see, our address book contains sub-elements, such as street, region, postal code, locality, and country.
Each of these sub-elements is defined as a parsed character data field. Of course, we can extend the concept of
sub-elements further. That is, we can, for example, break down the street sub-element into street number and
street name. This is shown in figure below.
Choices: Choices can be specified by using the pipe (|) character. This allows us to specify options of the type A
or B. For example, we can specify that the result of an examination can be that the student has passed or failed
(but not both), as follows.
<!ELEMENT result (pass | fail)>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
To a guest, we want to offer tea or coffee, but not both!
Occurrence: The number of occurrences, or the frequency, of an element can be specified by using the plus
(+), asterisk (*), or question mark (?) characters. If we do not use any of the occurrence symbol (i.e., +, *, or ?),
then the element can occur only once. That is, the default frequency of an element is 1.
For example, we can specify that a book must contain one or more chapters as follows.
<!ELEMENT book (chapter+) >
We can use the same concept to apply to a group of sub-elements. For example, suppose that we want to specify
that a book must contain a title, followed by at least one chapter and at least one author, we can use this declaration.
<!ELEMENT book (title, (chapter, author)+ )>
A sample XML document conforming to this DTD declaration is shown in figure below:
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Of course, the grouping of sub-elements for the purpose of specifying frequency is not restricted to the plus sign
(+). It can be done equally well for the asterisk (*) or question mark (?) symbols. The asterisk symbol (*) specifies
that the element may or may not occur. If it is used, it can repeat any number of times.
The DTD specifies that the XML document can depict zero or more employees in an organization. One sample
XML document has three employees, the other has none. Both are allowed. On the other hand, if we replace the
asterisk (*) with a plus sign (+), the situation changes. We must now have at least one employee. Therefore, the
empty organization case (i.e., an organization containing no employees) is now ruled out.
Finally, a question mark (?) indicates that the element cannot occur at all or can occur exactly once.
A nation can have only one president. This is indicated by the following declaration.
<!ELEMENT nation (president?) >
At times, of course, the nation may be without a president temporarily. However, at no point can a nation
have more than one president.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
4.3. ATTRIBUTE DECLARATION
Elements describe markup of an XML document. Attributes provide more details about the elements. An
element can have 0 or more attributes. For example, an employee XML document can contain elements to
depict the employee number, name, designation, and salary. The designation element, in turn, can have a
manager attribute that indicates the manager for that employee.
The keyword ATTLIST describes the attribute(s) for an element.
Figure shows an XML document containing an inline DTD. We can see that the element contains an
attribute.
We can see that the message element has three attributes: from, to, and subject. All the three attributes have a data
type of CDATA (which stands for character data), and a #REQUIRED keyword. The #REQUIRED keyword
indicates that this attribute must be a part of the element.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
4.4. LIMITATIONS OF DTD
In spite of their several advantages, DTDs suffer from a number of limitations.
5. INTODUCTION TO SCHEMA
We know that a DTD is used for validating the contents of an XML document. DTD is undoubtedly a very
important feature of the XML technology. However, there are a number of areas in which DTDs are weak. The
main argument against DTDs is that their syntax is not like that of XML documents. Therefore, the people working
with DTDs have to learn new syntax to work with DTDs. Furthermore, this leads to problems, such as, we cannot
search for information inside DTDs, we cannot display their contents in the form of HTML, etc.
A schema is an alternative to DTD.
It is expected that schemas would eventually completely replace most (but not all) features of DTDs. DTDs are
easier to write and provide support for some features (e.g., entities) better. However, schemas are much richer in
terms of their capabilities and extensibility. A schema document is a separate document, just like a DTD. However,
the syntax of a schema is like the syntax of an XML document. Therefore, we can state:
The main difference between a DTD and a schema is that the syntax of a DTD is different from that of XML.
However, the syntax of a schema is the same as that of XML.
In other words, a schema document is an XML document.
We declare an element in a DTD by using the syntax <!ELEMENT>. This is clearly not legal in XML. We cannot
begin an element declaration with an exclamation mark, as happens in the case of a DTD.
We can use a very simple, yet powerful example to illustrate the difference between using a DTD and using a
schema. Suppose that we want to represent the marks of a student in an XML document. For this purpose, we
want to add an element called as Marks to our root element Student. We will declare this element as of type
PCDATA in our DTD file. This will ensure that the parser checks for the existence of the Marks element in the
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
XML document. However, can it ensure that marks are numeric? Clearly, no! We cannot control what contents
the element Marks can have. These contents can very well be alphabetic or alphanumeric.
As we can see, the usage of PCDATA in the declaration of an element does not stop us from entering alphabetic
data in a Marks element. In other words, we cannot specify exactly what should our elements contain. This is
quite clearly not desirable at all. In the case of a schema, we can very well specify that our element should only
contain numeric data. Moreover, we can control many other aspects of the contents of elements, which is not
possible in the case of DTDs. We use similar terminology for checking the correctness of XML documents in the
case of a schema (as in the case of DTDs). An XML document that conforms to the rules of a schema is called as
a valid XML document. Otherwise, it is called as invalid.
Consider an XML document which contains a greeting message:
First and foremost, an XML schema is defined in a separate file. This file has the extension xsd.
In our example, the schema file is named message.xsd. The following declaration in our XML document indicates
that we want to associate this schema with our XML document:
<MESSAGE xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance”
xsi:noNamespaceSchemaLocation=”message.xsd”>
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Let us dissect this statement:
1. The word MESSAGE indicates the root element of our XML document. There is nothing unusual
about it.
2. The declaration xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance” is an attribute. It defines
a namespace prefix and a namespace URI. The namespace prefix is xmlns. The namespace URI is
http://www.w3.org/2001/XMLSchema-instance. The namespace prefix can change. The namespace URI must be
written exactly as shown. The namespace URI specifies a particular instance of the
schema specifications to which our XML document is adhering.
3. The declaration xsi:noNamespaceSchemaLocation=”message.xsd” specifies a particular schema
file which we want to associate with our XML document. In this case, we are stating that our XML
document wants to refer to a schema file whose name is message.xsd.
This is followed by the actual contents of our XML document. In this case, the contents are nothing but the
contents of our root element.
Note that the schema file is an XML file with an extension of xsd. That is, like any XML document, it begins with
an <?xml …?> declaration. The following lines specify that this is a schema file, and not an ordinary XML
document. They also contain the actual contents of the schema. Let us first reproduce them:
<xsd:schema xmlns:xsd = “http://www.w3org/2001/XMLSchema”>
<xsd:element name = “MESSAGE“ type = “xsd:string”/>
</xsd:schema>
Let us understand this step by step:
1. The declaration <xsd:schema xmlns:xsd = “http://www.w3org/2001/XMLSchema”> indicates that this is a schema,
because its root element is named schema. It has a namespace prefix of xsd. The namespace URI is
http://www.w3org/2001/XMLSchema. This means that our schema declarations conform to the schema standards
specified on the site http://www.w3org/2001/XMLSchema, and that we can use a namespace prefix of xsd to refer
to them in our schema file.
2. The declaration <xsd:element name = “MESSAGE” type = “xsd:string”/> specifies that we want to use an element
called as MESSAGE in our XML document. The type of this element is string. Also, we are using the namespace
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
prefix xsd. Recall that this namespace prefix was associated with a namespace URI
http://www.w3org/2001/XMLSchema in our earlier statement.
3. The line </xsd:schema> specifies the end of the schema
5.1. COMPLEX TYPE
5.1.1. Basics of Simple and Complex Types
Elements in schema can be divided into two categories: simple and complex.
Simple Elements
Simple elements can contain only text. They cannot have sub-elements or attributes. The text that they can contain,
however, can be of various data types such as strings, numbers, dates, etc.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Complex Elements
Complex elements, on the other hand, can contain sub-elements, attributes, etc. Many times, they are made up of
one or more simple element.
Suppose we want to capture student information in the form of the student’s roll number, name, marks, and result.
Then we can have all these individual blocks of information as simple elements. Then we will have a complex
element in the form of the root element. This complex element will encapsulate these individual simple elements.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Let us understand our schema:
1. <xsd:schema xmlns:xsd = “http://www.w3org/2001/XMLSchema”>:
We know that the root element of the schema is a reserved keyword called as schema. Here also, same is the case.
The namespace prefix xsd maps to the namespace URI http://www.w3.org/2001/ XMLSchema, as before. In
general, this will be true for any schema that we write.
2. <xsd:element name = “STUDENT” type = “StudentType”/>:
This declares STUDENT as the root element of our XML document. In the schema, it is called as the top-level
element. Remember that in the case of a schema, the root element is always the keyword schema. Therefore, the
root element in an XML document is not the root of the corresponding schema. Instead, it appears in the schema
after the root element schema.
The STUDENT element is declared of type StudentType. This is a user-defined type.
Conceptually, a user-defined type is similar to a structure in C/C++ or a class in Java (without the
methods). It allows us to create our own custom type.
In other words, the schema specification allows us to create our own custom data types. For example,
we can create our own types for storing information about employees, departments, songs, friends, sports games,
and so on. We recognize this as a user-defined type because it does not have our namespace prefix xsd. Remember
that all the standard data types provided by the XML schema specifications reside at the namespace
http://www.w3.org/2001/XMLSchema, which we have prefixed as xsd in the earlier statement.
3. <xsd:complexType name = “StudentType”>:
Now that we have declared our own type, we must explain what it represents and contains. That is exactly what
we are doing here. This statement indicates that we have used StudentType as a type earlier, and now we want to
explain what it means. Also, note that we use a keyword complexType to designate that StudentType is a complex
element. This is similar to stating struct StudentType or class StudentType in C++/Java.
4. <xsd:sequence>:
Schemas allow us to force a sequence of simple elements within a complex element. We can specify that a
particular complex element must contain one or more simple elements in a strict sequence. Thus, if the complex
element is A, containing two simple elements B and C, we can mandate that C must follow B inside A. In other
words, the XML document must have:
<A>
<B> … </B>
<C>… </C>
</A>
This is accomplished by the sequence keyword.
5. <xsd:element name = “ROLL_NUMBER” type = “xsd:string”/>:
This declaration specifies that the first simple element inside our complex element is ROLL_NUMBER, of type
string. After this, we have NAME, MARKS, and RESULT as three more simple elements following
ROLL_NUMBER.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
6. BASIC OF PARSING
Parsing of XML is the process of reading and validating an XML document and converting it into the desired
format. The program that does this job is called as a parser.
An XML file is something that exists on the disk. So, the parser has to first of all bring it from the disk into the
main memory. More importantly, the parser has to make this in memory representation of an XML file available
to the programmer in a form that the programmer is comfortable with. A parser reads a file from the disk, converts
it into an in-memory object and hands it over to the programmer. The programmer’s responsibility is then to take
this object and manipulate it the way she wants. For example, the programmer may want to display the values of
certain elements, add some attributes, count the total number of elements, and so on.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
6.1. PARSING APPROACHES
Suppose that someone younger in your family has returned from playing a cricket match. He is very excited about
it, and wants to describe what happened in the match. He can describe it in two ways:
When an XML document is to be presented to a Java program as an object, there are two main possibilities.
1. Present the document in bits and pieces, as and when we encounter certain sections or portions of the
document.
2. Present the entire document tree at one go. This means that the Java program has to then think of this
document tree as one object, and manipulate it the way it wants.
We have discussed this concept in the context of the description of a cricket match earlier. We can either
describe the match as it happened, event by event; or first describe the overall highlights and then get into
specific details. For example, consider an XML document
Now, we can look at this XML structure in two ways.
1. Go through the XML structure item by item (e.g., to start with, the line <?xml version=”1.0”?>,
followed by the element <employees>, and so on).
2. Read the entire XML document in the memory as an object, and parse its contents as per the needs.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Technically, the first approach is called as Simple API for XML (SAX), whereas the latter is known as
Document Object Model (DOM).
In general, we can equate the SAX approach to our example of the step-by-step description of a cricket match.
The SAX approach works on an event model. This works as follows.
(i) The SAX parser keeps track of various events, and whenever an event is detected, it informs our Java
program.
(ii) Our Java program needs to then take an appropriate action, based on the requirements of handling
that event. For example, there could be an event Start element as shown in the diagram.
(iii) Our Java program needs to constantly monitor such events, and take an appropriate action.
(iv) Control comes back to SAX parser, and steps (i) and (ii) repeat.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
In general, we can equate the DOM approach to our example of the overall description of a cricket match.This
works as follows.
(i) The DOM approach parses through the whole XML document at one go. It creates an in-memory
tree-like structure of our XML document.
(ii) This tree-like structure is handed over to our Java program at one go, once it is ready. No events get
fired unlike what happens in SAX.
(iii) The Java program then takes over the control and deals with the tree the way it wants, without
actively interfacing with the parser on an event-by-event basis. Thus, there is no concept of
something such as Start element, Characters, End element, etc.
Department of Computer Science & Engineering Rohit Saxena
PSIT-Pranveer Singh Institute of Technology
Kanpur-Delhi National Highway (NH-2), Bhauti, Kanpur-209305 (U.P.), India
Department of Computer Science & Engineering Rohit Saxena
You might also like
- RLS Series - Software User Manual (RT V1.0)100% (1)RLS Series - Software User Manual (RT V1.0)78 pages
- IJCER (WWW - Ijceronline.com) International Journal of Computational Engineering ResearchNo ratings yetIJCER (WWW - Ijceronline.com) International Journal of Computational Engineering Research8 pages
- SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021No ratings yetSVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-20218 pages
- Module - 2 - HTML5Introduction To HTML5No ratings yetModule - 2 - HTML5Introduction To HTML528 pages
- SDOC-EB6AC7833A22C9403DEA0B62129D1AB4-03-20-SI (2)No ratings yetSDOC-EB6AC7833A22C9403DEA0B62129D1AB4-03-20-SI (2)61 pages
- Unit-I: Covers The Following Topic: - An Introduction To The WebNo ratings yetUnit-I: Covers The Following Topic: - An Introduction To The Web33 pages
- Notes Internet and Web Technology Iwt Unit 2No ratings yetNotes Internet and Web Technology Iwt Unit 217 pages
- Bell R. HTML Essentials. A Beginners Guide To Web Development 2024bell R. HTML Essentials. A Beginners Guide To Web Development 2024No ratings yetBell R. HTML Essentials. A Beginners Guide To Web Development 2024bell R. HTML Essentials. A Beginners Guide To Web Development 202461 pages
- Keywords: Markup Language, Forms, Website, Web PageNo ratings yetKeywords: Markup Language, Forms, Website, Web Page17 pages
- Admin Login: Vehicle Parking ManagementNo ratings yetAdmin Login: Vehicle Parking Management27 pages
- ETX-5300A: Ethernet Service Aggregation PlatformNo ratings yetETX-5300A: Ethernet Service Aggregation Platform4 pages
- User Manual Version 2.4: A Software Tool For The Graphing and Analysis of Large Complex PedigreeNo ratings yetUser Manual Version 2.4: A Software Tool For The Graphing and Analysis of Large Complex Pedigree24 pages
- Guide To Completing Inderscience Author Copyright Agreement and Adding Digital SignaturesNo ratings yetGuide To Completing Inderscience Author Copyright Agreement and Adding Digital Signatures2 pages
- Users Guide To Taking A Nutanix Certification ExamNo ratings yetUsers Guide To Taking A Nutanix Certification Exam12 pages
- N7201A563E06 PANASONIC NPM AM Operating Instructions Manual Parts Verification Options Wired - 1No ratings yetN7201A563E06 PANASONIC NPM AM Operating Instructions Manual Parts Verification Options Wired - 110 pages
- Master of Science IN Embedded Systems: Resistance Measurement Using Avr Atmega8 MicrocontrollerNo ratings yetMaster of Science IN Embedded Systems: Resistance Measurement Using Avr Atmega8 Microcontroller19 pages
- S300, S500, S2700, S5700, and S6700 V200R023C00 Configuration Guide - Interface ManagementNo ratings yetS300, S500, S2700, S5700, and S6700 V200R023C00 Configuration Guide - Interface Management123 pages
- Alcatel-Lucent 5620 SAM: Service Aware Manager - Release 7.0No ratings yetAlcatel-Lucent 5620 SAM: Service Aware Manager - Release 7.010 pages
- System Setup: - Install Oracle XE - SQL Developer Installation - Workstation SetupNo ratings yetSystem Setup: - Install Oracle XE - SQL Developer Installation - Workstation Setup20 pages
- This Study Resource Was: Design A Combinational Circuit That Generates 9's Complement of BCDNo ratings yetThis Study Resource Was: Design A Combinational Circuit That Generates 9's Complement of BCD7 pages
- IJCER (WWW - Ijceronline.com) International Journal of Computational Engineering ResearchIJCER (WWW - Ijceronline.com) International Journal of Computational Engineering Research
- SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021SVKM J.V. Parekh International School: Igcse/ Grade Vii / Ict / Worksheet/29-01-2021
- SDOC-EB6AC7833A22C9403DEA0B62129D1AB4-03-20-SI (2)SDOC-EB6AC7833A22C9403DEA0B62129D1AB4-03-20-SI (2)
- Unit-I: Covers The Following Topic: - An Introduction To The WebUnit-I: Covers The Following Topic: - An Introduction To The Web
- Bell R. HTML Essentials. A Beginners Guide To Web Development 2024bell R. HTML Essentials. A Beginners Guide To Web Development 2024Bell R. HTML Essentials. A Beginners Guide To Web Development 2024bell R. HTML Essentials. A Beginners Guide To Web Development 2024
- Keywords: Markup Language, Forms, Website, Web PageKeywords: Markup Language, Forms, Website, Web Page
- User Manual Version 2.4: A Software Tool For The Graphing and Analysis of Large Complex PedigreeUser Manual Version 2.4: A Software Tool For The Graphing and Analysis of Large Complex Pedigree
- Guide To Completing Inderscience Author Copyright Agreement and Adding Digital SignaturesGuide To Completing Inderscience Author Copyright Agreement and Adding Digital Signatures
- Users Guide To Taking A Nutanix Certification ExamUsers Guide To Taking A Nutanix Certification Exam
- N7201A563E06 PANASONIC NPM AM Operating Instructions Manual Parts Verification Options Wired - 1N7201A563E06 PANASONIC NPM AM Operating Instructions Manual Parts Verification Options Wired - 1
- Master of Science IN Embedded Systems: Resistance Measurement Using Avr Atmega8 MicrocontrollerMaster of Science IN Embedded Systems: Resistance Measurement Using Avr Atmega8 Microcontroller
- S300, S500, S2700, S5700, and S6700 V200R023C00 Configuration Guide - Interface ManagementS300, S500, S2700, S5700, and S6700 V200R023C00 Configuration Guide - Interface Management
- Alcatel-Lucent 5620 SAM: Service Aware Manager - Release 7.0Alcatel-Lucent 5620 SAM: Service Aware Manager - Release 7.0
- System Setup: - Install Oracle XE - SQL Developer Installation - Workstation SetupSystem Setup: - Install Oracle XE - SQL Developer Installation - Workstation Setup
- This Study Resource Was: Design A Combinational Circuit That Generates 9's Complement of BCDThis Study Resource Was: Design A Combinational Circuit That Generates 9's Complement of BCD