Unit-1_HTML_and_CSS

Unit-1: HTML and CSS
Introduction to HTML
HTML, or Hypertext Markup Language, is a markup language for documents
designed to be displayed in a web browser. HTML files are text files which represent the content
and the layout of a web page. When used in conjunction with other technologies like CSS and
JavaScript, it creates the vast majority of content seen on websites. Let's see what is meant by
Hypertext Markup Language, and Web page.
Hyper Text: HyperText simply means "Text within Text." A text has a link within it, is a
hypertext. Whenever you click on a link which brings you to a new webpage, you have clicked
on a hypertext. HyperText is a way to link two or more web pages (HTML documents) with each
other.
Markup language: A markup language is a computer language that is used to apply layout and
formatting conventions to a text document. Markup language makes text more interactive and
dynamic. It can turn text into images, tables, links, etc.
Web Page: A web page is a document which is commonly written in HTML and translated by a
web browser. A web page can be identified by entering an URL. A Web page can be of the static
or dynamic type. With the help of HTML only, we can create static web pages.
Hence, HTML is a markup language which is used for creating attractive web pages with the
help of styling, and which looks in a nice format on a web browser. An HTML document is
made of many HTML tags and each HTML tag contains different content. So, it can be
summarized as….
 HTML stands for Hyper Text Markup Language

 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a paragraph",
"this is a link", etc.
How to Write HTML Code and Execute

By Lec. Teksan Gharti Page 1
 Step 1: Open Notepad
 Step 2: Write the HTML code
 Step 3: Save the HTML Page with either .htm or .html as file extension
 Step 4: View the HTML Page in Your Browser
Simple example of HTML.

<!DOCTYPE>
<html>
<head>
<title>Web page title</title>
</head>
<body>
<h1>Write Your First Heading</h1>
<p>Write Your First Paragraph.</p>
</body>
</html>
Output:
Code Explanation:
 <!DOCTYPE>: It defines the document type or it instruct the browser about the version
of HTML.
 <html >: This tag informs the browser that it is an HTML document. Text between html
tag describes the web document. It is a container for all other elements of HTML except
<!DOCTYPE>
 <head>: It should be the first element inside the <html> element, which contains the
metadata (information about the document). It must be closed before the body tag opens.
 <title>: As its name suggested, it is used to add title of that HTML page which appears at
the top of the browser window. It must be placed inside the head tag and should close
immediately. (Optional)
 <body> : Text between body tag describes the body content of the page that is visible to
the end user. This tag contains the main content of the HTML document.

 <h1> : Text between <h1> tag describes the first level heading of the webpage.
 <p> : Text between <p> tag describes the paragraph of the webpage.
Features of HTML
 It is a very easy and simple language. It can be easily understood and modified.
 It is very easy to make an effective presentation with HTML because it has a lot of
formatting tags.
 It is a markup language, so it provides a flexible way to design web pages along with the
text.
 It facilitates programmers to add a link on the web pages (by html anchor tag), so it
enhances the interest of browsing of the user.
 It is platform-independent because it can be displayed on any platform like Windows,
Linux, and Macintosh, etc.
 It facilitates the programmer to add Graphics, Videos, and Sound to the web pages which
makes it more attractive and interactive.
 HTML is not a case-insensitive language, which means we can use tags either in lower-
case or upper-case.
HTML Versions
Since the time HTML was invented, there are lots of HTML versions in market, the
brief introduction about the HTML version is given below:
 HTML 1.0: The first version of HTML was 1.0, which was the barebones version of
HTML language, and it was released in1991.
 HTML 2.0: This was the next version which was released in 1995, and it was standard
language version for website design. HTML 2.0 was able to support extra features such
as form-based file upload, form elements such as text box, option button, etc.
 HTML 3.2: HTML 3.2 version was published by W3C in early 1997. This version was
capable of creating tables and providing support for extra options for form elements. It
can also support a web page with complex mathematical equations. It became an official
standard for any browser till January 1997. Today it is practically supported by most of
the browsers.
 HTML 4.01: HTML 4.01 version was released on December 1999, and it is a very stable
version of HTML language. This version is the current official standard, and it provides
added support for stylesheets (CSS) and scripting ability for various multimedia
elements.
 HTML5 : HTML5 is the newest version of HyperText Markup language. The first draft
of this version was announced in January 2008. There are two major organizations one is

W3C (World Wide Web Consortium), and another one is WHATWG (Web Hypertext
Application Technology Working Group) which are involved in the development of
HTML 5 version, and still, it is under development.
Version Years
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014
Advantage of HTML:
 Create Web site - You can create a website or customize an existing web template if you
know HTML well.
 Become a web designer - If you want to start a career as a professional web designer,
HTML and CSS designing is a must skill.
 Understand web - If you want to optimize your website, to boost its speed and
performance, it is good to know HTML to yield best results.
 Learn other languages - Once you understand the basic of HTML then other related
technologies like javascript, php, or angular are become easier to understand.
Applications of HTML
 Web pages development - HTML is used to create pages which are rendered over the
web. Almost every page of web is having html tags in it to render its details in browser.
 Internet Navigation - HTML provides tags which are used to navigate from one page to
another and is heavily used in internet navigation.
 Responsive UI - HTML pages now-a-days works well on all platform, mobile, tabs,
desktop or laptops owing to responsive design strategy.
 Offline support HTML pages once loaded can be made available offline on the machine
without any need of internet.
 Game development- HTML5 has native support for rich experience and is now useful in
gaming development arena as well.
HTML document

It's a text document saved with the extension .html or .htm that contains texts and some
tags written between "< >" which give the instructions needed to configure the web page. These
tags are fixed and definite.
An HTML Document is mainly divided into two parts:

 HEAD: This contains the information about the HTML document. For Example, Title of
the page, version of HTML, Meta Data etc.
 BODY: This contains everything you want to display on the Web Page.
<!DOCTYPE html>: This tag is used to tells the HTML version.

<html>: This is called HTML root element and used to wrap all the code.
<head>: Head tag contains metadata, title, page CSS etc. All the HTML elements that can be
used inside the <head> element.
<body>: Body tag is used to enclose all the data which a web page has from texts to links. All
the content that you see rendered in the browser is contained within this element.

Document Type Definition – DTD
 All HTML documents should follow a formal structure defined by the World Wide Web
Consortium (W3C), which is the primary organization that defines Web standards.
 Traditionally, the W3C defined HTML as an application of the Standard Generalized

Markup Language (SGML).
 SGML is a technology used to define markup languages by specifying the allowed

document structure in the form of a document type definition (DTD).
 A Document Type Definition (DTD) describes the tree structure of a document and
something about its data. It is a set of markup affirmations that actually define a type of
document for the SGML family, like GML, SGML, HTML, XML.
 A DTD indicates the syntax that can be used for the various elements of a language such
as HTML.
 A DTD can be declared inside an XML document as inline or as an external

recommendation. DTD determines how many times a node should appear, and how their
child nodes are ordered.

Document Type Statements and Language Versions(not in syllabus)
HTML documents should begin with a <!DOCTYPE> declaration. This statement
identifies the type of markup that is supposedly used in a document.
For example,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Above syntax indicates that we are using the transitional variation of HTML 4.01 that
starts with a root element html. In other words, an <html> tag will serve as the ultimate parent of
all the content and elements within this document.
A <!DOCTYPE> declaration might get a bit more specific and specify the URI (Uniform
Resource Identifier) of the DTD (document type definition) being used as shown here:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">
There are numerous doctype declarations that are found in HTML

as shown in Table below.
HTML Version !DOCTYPE Declaration

HTML 2.0 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
HTML 3.2 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2
Final//EN">
HTML 4.0 Transitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4.0 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0
Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.0 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML 4.01 Strict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
HTML5 <!DOCTYPE html>
TABLE: Common HTML Doctype Declarations

HTML Document Structure
The DTDs define the allowed syntax for documents written in that version of HTML.
The core structure of these documents is fairly similar. Given the HTML 4.01 DTD, a basic
document template is shown here:
In above diagram, the <!DOCTYPE> shows the particular version of HTML being used,
in this case 4.01 Transitional. Within a root html element, the basic structure of a document
reveals two elements: the head and the body. The head element contains information and tags
describing the document, such as its title, while the body element houses the document itself,
with associated markup required to specify its structure.

Roughly speaking, the structure of a non-framed HTML document breaks into:
The Document Head

The information in the head element of HTML document describe the content of the
document. The element acts like the front matter or cover page of a document.
The information contained within the head element is information about the page that is
useful for visual styling, defining interactivity, setting the page title, and providing other useful
information that describes or controls the document.
The title Element

A single title element is required in the head element and is used to set the text that most
browsers display in their title bar. The value within a title is also used in a browser’s
history system, recorded when the page is bookmarked, and consulted by search engine robots to
help determine page meaning.
Example:
<title>Simple HTML Title Example</title>
you will see something like this:
When a title is not specified, most browsers display the URL path or filename instead:

To set the appropriate character set, you should include a <meta> tag before the page
title even though traditionally title is considered the first element.
<meta>: Specifying Content Type, Character Set, and More

A <meta> tag has a number of uses. For example, it can be used to specify values that are
equivalent to HTTP response headers.
For example, if you want to make sure that your MIME (Multipurpose Internet Mail
Extensions) type and character set for an English-based HTML document , you could use
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
Because meta is an empty element, you would use the trailing-slash syntax shown here:
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
Most people would agree that using the UTF-8-character set is probably a good idea for
Western-language page authors because it gives them access to international character
glyphs when needed without causing them any trouble:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

Deciding which MIME type to use isn’t as straightforward. For standard HTML, the
MIME type is always text/html.
Other Elements in the head

In addition to the title and meta elements, under the HTML 4.01, the other elements
include base, link, object, script, and style. Comments are also allowed. A brief discussion of the
other head elements and comments follows.
<base> tag
A <base> tag specifies an absolute URL address that is used to provide server
and directory information for partially specified URL addresses, called relative links, used
within the document:
<base href="http://htmlref.com/basexeample" >
Because of its global nature, a <base> tag is often found right after a <title> tag as it
may affect subsequent <script>, <link>, <style>, and <object> tag referenced URIs.

<link> tag
A <link> tag specifies a special relationship between the current document and another
document. Most commonly, it is used to specify a style sheet used by the document.
<link rel="stylesheet" media="screen" href="global.css" type="text/css" >

However, the <link> tag has a number of other interesting possible uses, such as to set
up navigation relationships and to hint to browsers about pre-cacheable content.
<object> tag
An <object> tag allows programs and other binary objects to be directly embedded in a
Web page. Here, for example, a nonvisible Flash object is being referenced for some use:
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
width="0" height="0" id="HiddenFlash" >
<param name="movie" value="flashlib.swf" />
</object>
Using an <object> tag involves more than a bit of complexity, and there are numerous
choices of technology, including Java applets, plug-ins, and ActiveX controls.
<script> tag
A <script> tag allows scripting language code to be either directly embedded within,
<script type="text/javascript">
alert("Hi from JavaScript!");
/* more code below */
</script>
or, more appropriately, linked to from a Web page:
<script type="text/javascript" href="ajaxtcr.js"></script>
Nearly always, JavaScript is the language in use, though other languages such as
VBScript are possible.
<style> tag
A <style> tag is used to enclose document-wide style specifications, typically in
Cascading Style Sheet (CSS) format, relating to fonts, colors, positioning, and other aspects of
content presentation:
<style type="text/css" media="screen">
h1 {font-size: xx-large; color: red; font-style: italic;}
/* all h1 elements render as big, red and italic */
</style>
Comments
Comments are often found in the head of a document. A comment starts with  and may encompass many lines:

<!—
Author: Thomas A. Powell
Book: web technology
Edition: 10th
-->
The Document Body

After the head section, the body of a document is delimited by <body> and </body>.
The body element is optional, but you should always include it, particularly because it is required
in stricter markup variants. Only one body element can appear per document.
Within the body of a Web document is a variety of types of elements. For example,
block level elements define structural content blocks such as paragraphs (p) or headings (h1-h6)
and unordered lists (ul) etc.
Within nonempty blocks, inline elements are found. There are numerous inline elements,
such as bold (b), italic (i), strong (strong), emphasis (em), and numerous others.
XHTML(not in syllabus)
XHTML stands for Extended Hyper Text Mark Up Language based on XML. It is a
cross between HTML and XML language. XHTML is a stricter, more XML-based version of
HTML. Strict syntactic rule of XHTML imposed a consistent structure on all XHTML
document.
XHTML was developed to make HTML more extensible and flexible to work with other
data formats (such as XML). In addition, browsers ignore errors in HTML pages, and try to
display the website even if it has some errors in the markup. So, XHTML comes with a much
stricter error handling.
In XHTML, strict syntactic rule implies that all the syntax should be written without
mistake i.e. all tags should be properly closed, all attributes should be properly enclosed, all
nested should be done properly and all the empty tags should be closed properly.

For example:
<!DOCTYPE html>
<html>
<head>
<title> this is html document </html>
<meta charset = “utf- 8” />
</head>
<body>
<h1> this is heading one
<p> this is first paragraph
<br>
<img src = “a.jpg” alt = “my text”>
</body>
</html>
In above example, the syntax for heading, paragraph, image and break is incorrect
because tags are not closed properly but the output is generated or displayed if HTML is used. If
XHTML is used then the above code will generate error because strictness of code in XHTML
needs every tag to be closed properly. All the tags and attribute are required to be written in
lower case in XHTML.
Syntactic Difference Between HTML and XHTML: (not in syllabus)
 Case Sensitivity:
In HTML, tag and attribute names are not case insensitive i.e. <FORM>, <form>,
<BODY>, <body>, <Body> are equivalent. In XHTML, all the tag name and attributes
should be in lower case.
 Closing Tag:
In HTML, closing tag may be omitted if the browser can infer their presence. For e.g.
<p> …………..
<P> …………
In above example, another opening of paragraph tag is used to relate closing tag
of previous paragraph. But in XHTML, there should be closing tag for each opening tag.
For any tag which do not includes content should have slash at the end of tag. for e.g.
<br/>, <hr/> etc.
 Quoted Attribute Value:

In HTML, attribute values must be quoted only if there are embedded special
characters or white space characters. Numeric attribute values are rarely quoted. In
XHTML, all attribute values must be double quoted.
 Id and Name Attribute:
HTML markup often uses the name attribute for elements. This attribute was deprecated
for some elements in HTML 4.0 which added the id attribute to nearly all elements. In,
XHTML, the use of id is encouraged and name is discouraged.
 Explicit Attribute Values:

In HTML, some attribute values are implicit i.e. they need not to be explicitly stated. For
example: we can use “multiple” in select tag without its value i.e. <select multiple>
But in XHTML, attribute must be assigned a string of the name of attributes. For e.g.
<select multiple = “multiple”>
Html tag Reference
Html tag
An HTML tag is a piece of markup language used to indicate the beginning and end of
an HTML element in an HTML document. It is an html command that show the layout or
displays the desired output of a whole or part of the web page.HTML tag is bounded by angular
brackets (< >) that always open with a < (less then) sign and close with a > (greater than) sign. It
controls the appearance layout and flow of the web page.
For every tag, a browser has default presentation specification for the specified content.
All the tags should be written in lower case. Whatever appears between an opening and closing
tags are content of the tag.
For example;

Types of Tags:
 Empty tag/ Singular Tags:
Empty tag also known as stand-alone or singular tag; is a kind of tags in which
there is no any content and are closed in single tag or does not have closing tag. For
example:
<hr/>: it will create horizontal line
<br/>: use for breaking a line of paragraph
 Paired/container tags:
This type of tag generally comes with pair i.e. opening tag and closing tag. The
opening tags and its closing tags together specify a container for the content they
enclosed. The container and its content together are called an element.
For example:
Some of the commonly used HTML Tags are:

1.Heading Tags
Any document starts with a heading. You can use different sizes for your headings.
HTML also has six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>,
<h5>, and <h6>. While displaying any heading, browser adds one line before and one line after
that heading.
2.Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs. Each paragraph of
text should go in between an opening <p> and a closing </p> tag.
3.Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next line. This
tag is an example of an empty element, where you do not need opening and closing tags, as there
is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash. If you omit this
space, older browsers will have trouble rendering the line break, while if you miss the forward
slash character and just use <br> it is not valid in XHTML.
4.Centering Content
You can use <center> tag to put any content in the center of the page or any table cell.
5.Horizontal Lines
Horizontal lines are used to visually break-up sections of a document. The <hr> tag creates
a line from the current position in the document to the right margin and breaks the line
accordingly.
The <hr /> element has a space between the characters hr and the forward slash. If you omit this
space, older browsers will have trouble rendering the horizontal line, while if you miss the
forward slash character and just use <hr> it is not valid in XHTML.
6.Preserve Formatting
Sometimes, you want your text to follow the exact format of how it is written in the HTML
document. In these cases, you can use the preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre> tag will preserve the formatting
of the source document.
7.Nonbreaking Spaces
Suppose you want to use the phrase "I am a hunter" Here, you would not want a browser to
split the "I, am, a, and hunter" across two lines.
In cases, where you do not want the client browser to break text, you should use a nonbreaking
space entity instead of a normal space.
Example: Demonstration of some commonly used html tags

Program 1:
<!DOCTYPE html>
<html>
<head>
<title>Tags Example</title>
</head>
<body>
<h1>Heading Tags</h1>
<h1>This is heading 1</h1>
<h1>Paragraph Tags</h1>
<p>This is paragraph</p>
<h1>Line Breaking Tags</h1>

<p>
This is first paragraph <br>
This is second line of paragraph <br/>
This is last line. thank you..
</p>
<h1>Centering Tags</h1>
<center>
<h2>Im center tag :)</h2>
</center>
<h1>Horizental Line Tags</h1>

<h3>This before horizental line..</h3>
<hr/>
<h3>This after horizental line..</h3>
<h1>Preserve Formating Tags</h1>

<pre>
*****
****
***
**
*
</pre>
<h1>Nonbreaking space Tags</h1>

<p>In this line "I am a hunter" should be always together</p>
</body>
</html>
More about tag references

Following tags have been introduced in older versions of HTML but all the tags marked
with 5 are part of HTML-5.
Tag Description Version
 Specifies a comment
<! Specifies the document type

DOCTYPE>
<a> Specifies an anchor used for hyperlink
<abbr> Specifies an abbreviation E.g.

<p> <abbr title = “world health organization”> WHO </abbr> </p>
<acronym> Specifies an acronym
<audio> Specifies a sound content 5
<b> Specifies bold text
<big> Specifies big text
<body> Specifies the body element
<br> Inserts a single line break
<button> Specifies a push button
<canvas> For making graphics with a script 5
<caption> Specifies a table caption
<center> Deprecated. Specifies centered text

<col> Specifies attributes for table columns
<colgroup> Specifies groups of table columns
<comment> Puts a comment in the document
<datalist> A list of options for input values 5
<dd> Specifies a definition description
<del> Specifies deleted text
<dfn> Specifiesa definition term
<dialog> Specifiesa dialog box or window 5
<dir> Deprecated. Specifies a directory list
<div> Specifies a section in a document
<dl> Specifies a definition list
<dt> Specifies a definition term
<em> Specifies emphasized text
<embed> Specifiesa container for an external (non-HTML) application 5
<fieldset> Specifies a fieldset
<figcaption> Specifiesa caption for a <figure> element 5
<figure> Specifies self-contained content 5
<font> Deprecated. Specifies text font, size, and color
<footer> Specifies a footer for a document or section 5
<form> Specifies a form
<frame> Specifies a sub window (a frame)
<frameset> Specifies a set of frames

<h1> to <h6> Specifies header 1 to header 6
<head> Specifies information about the document
<header> Specifies a header for a document or section 5
<hr> Specifies a horizontal rule
<html> Specifies an html document
<i> Specifies italic text
<iframe> Specifies an inline sub window (frame)
<ilayer> Specifies an inline layer
<img> Specifies an image
<input> Specifies an input field
<ins> Specifies inserted text
<isindex> Deprecated. Specifies a single-line input field
<kbd> Specifies keyboard text
<keygen> Generate key information in a form 5
<label> Specifies a label for a form control
<layer> Specifies a layer
<legend> Specifies a title in a fieldset
<li> Specifies a list item
<link> Specifies a resource reference
Specifies the main or important content in the document. There is 5

<main>
only oneelement in the document
<map> Specifies an image map
<mark> Specifies a text highlighted for reference purposes, that is for its 5

relevance in another context
<marquee> Creates a scrolling-text marquee
<menu> Deprecated. Specifies a menu list
Specifies a command/menu item that the user can invoke from a 5

<menuitem>
popup menu
Specifies meta data of an html document which is not displayed on

<meta>
the page
<meter> Specifies a scalar measurement within a known range (a gauge)
<multicol> Specifies a multicolumn text flow
<nav> Specifies a section that contains only navigation links 5
<nobr> No breaks allowed in the enclosed text
Specifies content to be presented by browsers that do not support the

<noembed>
<embed>tag
<noframes> Specifies a noframe section
<noscript> Specifies a noscript section
<object> Specifies an embedded object
<ol> Specifies an ordered list
<optgroup> Specifies an option group
<option> Specifies an option in a drop-down list
<output> Specifies the result of a calculation 5
<p> Specifies a paragraph
<param> Specifies a parameter for an object
Deprecated. Render the remainder of the document as preformatted

<plaintext>
plain text

<pre> Specifies preformatted text
<progress> Specifies a completion progress of a task 5
<q> Specifies a short quotation
<rp> Specifies to show browsers that do not support the ruby element 5
<rt> Specifies an text ruby annotation 5
<ruby> Specifies an ruby annotation 5
<s> Deprecated. Specifies strikethrough text
<samp> Specifies sample computer code
<script> Specifies a script
<section> Specifies a section in a document 5
<select> Specifies a selectable list
<spacer> Specifies a white space
<small> Specifies small text
Specifies a media resources for media elements, defined inside video 5

<source>
or audio elements
<span> Specifies a section in a document
<strike> Deprecated. Specifies strikethrough text
<strong> Specifies strong text
<style> Specifies a style definition
<sub> Specifies subscripted text
<summary> Specifies a summary, caption, or legend for a given <details> 5
<sup> Specifies superscripted text
<table> Specifies a table

<tbody> Specifies a table body
<td> Specifies a table cell
<textarea> Specifies a text area
<tfoot> Specifies a table footer
<th> Specifies a table heading
<thead> Specifies a table header
<time> Specifies a date and time <details> 5
<title> Specifies the document title
<tr> Specifies a table row
<track> Specifies a text tracks used in mediaplayers 5
<tt> Specifies teletype text
<u> Deprecated. Specifies underlined text
<ul> Specifies an unordered list
<var> Specifies a variable
<video> Specifies a text tracks used in media players 5
<wbr> Indicates a potential word break point within a <nobr> section
<xmp> Deprecated. Specifies preformatted text

HTML Elements
 An HTML file or html document is made of html elements. An HTML element is an
individual component of an HTML document. These elements are responsible for
creating web pages and define content in that webpage.
 An element in HTML usually consists of a start tag <tag name>, close tag </tag name>
and content inserted between them.
 Elements can also contain attributes that defines its additional properties.
 Technically, an element is a collection of start tag, attributes, end tag, content between
them.
For example, a paragraph, which is represented by the p element, would be written as:
Void element:
All the elements in HTML do not require to have start tag and end tag, some elements
does not have content and end tag such elements are known as Void elements or empty
elements. These elements are also called as unpaired tag.
Some Void elements are

 <br> (represents a line break) ,
 <hr>(represents a horizontal line), etc.
Figure: HTML element overview

Global Attributes
HTML Attributes
Attributes define additional characteristics or properties of the element such as width
and height of an image. Attributes are always specified in the start tag (or opening tag) and
usually consists of name/value pairs like name="value". Attribute values should always be
enclosed in quotation marks.
Also, some attributes are required for certain elements. For instance, an <img> tag must
contain a src and alt attributes. Let's take a look at some examples of the attributes usages:
Example 1
<img src="images/smiley.png" width="30" height="30" alt="Smiley">
<a href="https://www.google.com/" title="Search Engine">Google</a>
<abbr title="Hyper Text Markup Language">HTML</abbr>
<input type="text" value="John Doe">
In the above example src inside the <img> tag is an attribute and image path provided is
its value. Similarly, href inside the <a> tag is an attribute and the link provided is its value, and
so on.
Example2:
<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align = "left">This is left aligned</p>
<p align = "center">This is center aligned</p>
<p align = "right">This is right aligned</p>
</body>
</html>

General Purpose Attributes
There are some attributes, such as id, title, class, style, etc. that you can use on the
majority of HTML elements. The following section describes their usages.
1. The id Attribute
The id attribute is used to give a unique name or identifier to an element within a
document. This makes it easier to select the element using CSS or JavaScript.
Example
<input type="text" id="firstName">
<div id="container">Some content</div>
<p id="infoText">This is a paragraph.</p>
2.The class Attribute

Like id attribute, the class attribute is also used to identify elements. But unlike id,
the class attribute does not have to be unique in the document. This means you can apply the
same class to multiple elements in a document, as shown in the following example:
Example
<input type="text" class="highlight">
<div class="box highlight">Some content</div>
<p class="highlight">This is a paragraph.</p>
3.The title Attribute

The title attribute to is used to provide advisory text about an element or its content. Try
out the following example to understand how this actually works.
Example
<abbr title="World Wide Web Consortium">W3C</abbr>
<a href="images/kites.jpg" title="Click to view a larger image">
<img src="images/kites-thumb.jpg" alt="kites">
</a>
4.The style Attribute

The style attribute allows you to specify CSS styling rules such as colour, font, border,
etc. directly within the element.

Example
<p style="color: blue;">This is a paragraph.</p>
<img src="images/sky.jpg" style="width: 300px;" alt="Cloudy Sky">
<div style="border: 1px solid red;">Some content</div>
The attributes we've discussed above are also called global attributes.
Attributes of <body> tag:

S.N Attributes Meanings Values Default
value
1 Bgcolor Specifies the background color of the Color White
webpage.
2 Text It defines the color of the text within the Color Black
page.
3 Background It specifies an image file as background Path of the
picture. image
4 Link It defines the color of the hyperlinks, Color
which have not yet been visited.
5. Alink It defines the color of the hyperlink, Color
when you click on it.
6 Vlink It defines the color of the hyperlinks
which are already visited.
Attributes of <p> tag:

S.N Attributes Meanings Values Default value
1 Align Sets the alignment of text Left, right, center or justify left
Attributes of <hr> tag:
Global Attributes

There are few HTML attributes which are standard and associated to all the HTML tags.
These attributes are called Global Attributes.
These are not valid in base, head, html, meta, script, style, and title elements.
Attribute HTML-5 Description
Accesskey Specifies a shortcut key for an element to be used in place of

keyboard.
Class The class of the element
contenteditable Yes Boolean attribute to specify whether the element is editable or not.
Draggable Yes Boolean attribute to specify whether the element can be dragged or
not.
Dropzone Yes Specifies whether the dragged data is copied, moved, or linked,
when dropped.
Hidden Yes Specifies whether element should be visible or not.
Id A unique id for the element
Style An inline style definition
Tabindex Specifies the tab order of an element.
Title A text to display in a tool tip
Structure Tags
Structure tags are the basic tags which must be a part of every web page. They tell the
browser that the document is a web page.
<html>
<head>
<title>Title of Webpage</title>
</head>
<body>
This is where the main part of the web page would go
</body>
</html>
Formatting Tags:
HTML Formatting basically refers to the enhancing of text in order to increase the visual
appeal. It is a process of formatting text for better look and feel. HTML provides us ability to
format text without using CSS. HTML provides a range of formatting tags that can be used to
make the text attractive to the users. There are many options available that can be used for
formatting, just like any other text editor.
There are many formatting tags in HTML. These tags are used to make text bold, italicized, or
underlined.
In HTML the formatting tags are divided into two categories:

1. Physical tag: These tags are used to provide the visual appearance to the text. For
example, bold, italic, underlined, etc.
2. Logical tag: These tags are used to add some logical or semantic value to the text. For
example, the <strong> tag.
Element name Description

1. <b> This is a physical tag, which is used to bold the text written between
it.
2. <strong> This is a logical tag, which tells the browser that the text is important.
3. <i> This is a physical tag which is used to make text italic.
4. <em> This is a logical tag which is used to display content in italic.
5. <mark> This tag is used to highlight text.
6. <u> This tag is used to underline text written between it.
7. <tt> This tag is used to appear a text in. (not supported in HTML5)
8. <strike> This tag is used to draw a strikethrough teletype on a section of text.

(Not supported in HTML5)
9. <sup> It displays the content slightly above the normal line.
10. <sub> It displays the content slightly below the normal line.
11. <del> This tag is used to display the deleted content.
12. <ins> This tag displays the content which is added

13. <big> This tag is used to increase the font size by one conventional unit.
14. <small> This tag is used to decrease the font size by one unit from base font
size.
1) Bold Text
The HTML <b> element is a physical tag which display text in bold font, without any
logical importance. If you write anything within <b>............</b> element, is shown in bold
letters.
Example:
<!DOCTYPE html>
<html>
<head>
<title> HTML formatting tags</title>
</head>
<body>
<p>This text is normal. </p>
<p><b>This is bold text</b>. </p>
<p><b>This text is bold. </b></p>

</body>
</html>
Output:

2) <strong> element
The HTML <strong> element defines text with strong importance. The content inside is
typically displayed in bold.
Example:
<!DOCTYPE html>
<html>
<body>
<p>This text is normal.</p>
<p><strong>This text is important!</strong></p>
</body>
</html>
Output:

3) Italic Text
The HTML <i> element is physical element, which display the enclosed content in italic
font, without any added importance. If you write anything within <i>............</i> element, is
shown in italic letters.
Example:
<!DOCTYPE html>
<html>
<body>
<p><i>This text is italic.</i></p>
</body>
</html>
Output:

4) <em> element
The HTML <em> element defines emphasized text. The content inside is typically
displayed in italic.
Example:
<!DOCTYPE html>
<html>
<body>
<p><em>This text is emphasized.</em></p>
</body>
</html>
Output:
5) <mark> Element
The HTML <mark> element defines text that should be marked or highlighted:
Example:
<!DOCTYPE html>
<html>
<body>
<p>Do not forget to buy <mark>milk</mark> today.</p>
</body>
</html>
Output:
6) Underlined Text
If you write anything within <u>.........</u> element, is shown in underlined text.
Example
<!DOCTYPE>
<html>
<body>
<p> <u>Write Your First Paragraph in underlined text.</u></p>
</body>
</html>
Output:

7) Monospaced Font
If you want that each letter has the same width then you should write the content
within <tt>.............</tt> element.
Note: We know that most of the fonts are known as variable-width fonts because different letters
have different width. (For example: 'w' is wider than 'i'). Monospaced Font provides similar
space among every letter.
Example:
<!DOCTYPE>
<html>
<body>
<p>Hello <tt>Write Your First Paragraph in monospaced font.</tt></p>
</body>
</html>
Output:

8) Strike Text
Anything written within <strike>.......................</strike> element is displayed with
strikethrough. It is a thin line which cross the statement.
Example:
<!DOCTYPE>
<html>
<body>
<p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>
</body>
</html>
Output:

9) <sup> Element
The HTML <sup> element defines superscript text. Superscript text appears half a
character above the normal line, and is sometimes rendered in a smaller font. Superscript text can
be used for footnotes, like C=MC2:
Example
<!DOCTYPE html>
<html>
<body>
<p> C=MC<sup>2</sup> </p>
</body>
</html>
Output:

10)<sub> Element
The HTML <sub> element defines subscript text. Subscript text appears half a character
below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used
for chemical formulas, like H2O:
Example
<!DOCTYPE html>
<html>
<body>
<p>H <sub>2</sub>O</p>
</body>
</html>
Output:
11) <del> Element

The HTML <del> element defines text that has been deleted from a document.
Browsers will usually strike a line through deleted text:
Example:
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> red.</p>
</body>
</html>
Output:
12)<ins> Element
The HTML <ins> element defines a text that has been inserted into a document.
Browsers will usually underline inserted text:
Example
<!DOCTYPE html>
<html>
<body>
<p>My favorite color is <del>blue</del> <ins>red</ins>.</p>
</body>
</html>
Output:

13) <small> Element
The HTML <small> element defines smaller text:
Example
<!DOCTYPE html>
<html>
<body>
<p>This is some normal text.</p>
<p><small>This is some smaller text.</small></p>
</body>
</html>
Output:
14) Larger Text

If you want to put your font size larger than the rest of the text then put the content
within <big>.........</big>. It increases one font size larger than the previous one.
Example
<!DOCTYPE>
<html>
<body>
<p>Hello <big>Write the paragraph in larger font.</big></p>

</body>
</html>
Output:
Block Level Formatting:

Block elements appear on the screen as if they have a line break before and after them. For
example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <div>,<hr />,
<blockquote>, and <address> elements are all block level elements. They all start on their own
new line, and anything that follows them appears on its own new line.
Division<DIV>
The <DIV> element is used to structure HTML documents into unique sections or
divisions. Adding the ALIGN attribute enables you to align a portion of the document to the left,
right, or centre. By default, content within the <DIV> element is left-aligned. Divisions are also
useful when used in conjunction with style sheets.
The <DIV> tag is the most usable tag in web development because it helps us to separate
out data in the web page and we can create a particular section for particular data or function in
the web pages.
 Div tag is Block level tag
 It is a generic container tag
 It is used to the group of various tags of HTML so that sections can be created and style
can be applied to them.
The following example shows the use of <CENTER> and <DIV>:
Example;
<!DOCTYPE>
<HTML>
<HEAD>

<TITLE>Center and Division Example</TITLE>
</HEAD>
<BODY>
<CENTER>
<H1>This heading is centered.</H1>
<P>This paragraph is also centered.</P>
</CENTER>
<BR><BR>
<DIV ALIGN="right">
<H1>Division Heading</H1>
<P>Many paragraphs and other block elements
can be affected by a DIV at once.</P>
<P>Notice all the paragraphs are right aligned.</P>
</DIV>
</BODY>
</HTML>
Output:
List Tags:

List tags are used to display the content in list view. There are some lists tags as:
List:
HTML provides simple and effective ways to specify list in document. HTML offers three types
of lists
1. Order List
2. Unorder list and
3. Definition list
Ordered List:
Ordered list are lists in which the order of items is important. <ol> tag is used to create
ordered list and content of list is displayed by attachment of sequential value to the beginning of
each item. A default value is number starting with 1. If we need alphabets then we need to
specify the type of the list. Each item in a list is specified with an <li> tag (list item).
Example:
<!DOCTYPE html>
<html>
<head>
<title> example of ordered list </title>
</head>
<body>
<ol>
<li> Science </li>
<li> management </li>
<li> humanities </li>
</ol>
<! - - example of order list starting from number 10 - ->
<ol start = “10”>
<li> Physics</li>
<li> Chemistry </li>
<li>Biology </li>
</ol>
<! - - example of order list starting from alphabets - ->
<ol type =”a”>
<li> BIM</li>
<li> BBA </li>
<li>BCA </li>
</ol>
<! - - example of order list starting from alphabets but from c - ->
<ol type =”a” start=”3”>

<li> BBS</li>
<li> BBM </li>
<li>BSW </li>
</ol>
</body>
</html>
Output:
1. Unordered List:
<ul> tag is used for creating unordered list and each item in a list is specified with
an <li> tag. Any tags can appear in a list item including nested lists. Default value for unordered
list is bullet but if we want to make use of other type then we need to mention the type of
unordered list.
There can be 4 types of bulleted list:

 disc
 circle
 square
 none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
Type Description

Type "disc" This is the default style. In this style, the list items are marked with
bullets.
Type "circle" In this style, the list items are marked with circles.
Type "square" In this style, the list items are marked with squares.
Type "none" In this style, the list items are not marked .
Example:
<!DOCTYPE html>
<html>
<head>
<title> example of unordered list </title>
</head>
<body>
<ul>
<li> Science </li>
<li> management </li>
<li> humanities </li>
</ul>
<! - - example of unorder list using type sqaure- ->
<ul type = “square”>
<li> Physics</li>
<li> Chemistry </li>
<li>Biology </li>
</ul>
<! - - example of unorder list using type circle - ->
<ul type = “circle”>
<li> BIM</li>
<li> CSIT </li>
<li>BCA </li>
</ul>
<! - - example of unorder list using type disc but this is not supported by
html 5 - ->
<ul type = “disc”>
<li> BBS</li>
<li> BBM </li>

<li>BSW </li>
</ul>
</body>
<! - - example of unorder list using type none but this is not supported by
html 5 - ->
<ul type = “none”>
<li> BBS</li>
<li> BBM </li>
<li>BSW </li>
</ul>
</body>
</html>
Output:

2. Definition List:
Definition list are used to specify lists of terms and their definitions as in
glossaries. Definition list is created using <dl> element and usually consists of term and
their definition. Inside the <dl> element you will usually see pair of <dt> and <dd>
element. Where <dt> tag is used to contain the term being defined. And <dd> tag is used
to contain the definition of given term
Example:
<!DOCTYPE html>
<html>
<head>
<title> example of definition list </title>
</head>
<body>
<dl>
<dt> BIM </dt>
<dd> bachelor of information management is 60% IT and
40% management course provided by TU </dd>
<dt> BCA</dt>
<dd> bachelor of computer application is 100% IT course provided
by TU under humanities faculty. </dd>
</dl>
</body>
</html>
Output:
3. Nested List:
When one list is created under another list then it is known as nested list. That is
when ordered list is created inside unordered list or unordered list is created inside
ordered list then the list became nested list. However, a list cannot be directly nested i.e.
an <ol> or <ul> tag cannot immediately follow another <ol> or <ul> tag. There should be
some list item when a list is created.
Example:
<DOCTYPE html>
<html>
<head>
<title> example of nested list </title>
</head>
<body>
<! - - this is not accepted in html - ->
<!—
<ol>
<ol>
<li> hello </li>
</ol>
</ol>
-->
<! - - nested list should be created by following ways - ->
<ol>
<li> IT courses </li>
<ul>
<li> BIM </li>
<li> BCA </li>
<li> BIT</li>
</ul>
<li> Management Courses </li>
<ol>
<li> BBS </li>
<li> BBM </li>
<li> BBA </li>
<li> BBA </li>
</ol>
</ol>
</body>
</html>
Output:

Hyperlink Tag:
A webpage can contain various links that take you directly to other pages and even specific parts
of a given page. These links are known as hyperlinks.
Hyperlinks allow visitors to navigate between Web sites by clicking on words, phrases, and
images. Thus you can create hyperlinks using text or images available on a webpage.
A link is specified using HTML tag <a>. This tag is called anchor tag and anything between the
opening <a> tag and the closing </a> tag becomes part of the link and a user can click that part
to reach to the linked document. Following is the simple syntax to use <a> tag.
Syntax: <a href="Document URL" ... attributes-list>Link Text</a>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body link="red" alink="yellow" vlink="blue">
<a href="https://www.google.com/" target="_self">Google</a>
</body>
</html>

Executable Content Tags:
One of the ways in which Web pages have become more dynamic is through their support
of executable content, such as Java applets and ActiveX controls. These page elements are
downloaded to the browser and run in its memory space to produce dynamic content on the
browser screen.
Actually, executable content tags are used to embed the multimedia files and other
applications in the html page. Some of the common executable content tags are <applet>,
<embed>, <video>, <audio> etc.
<applet>
Applet is the one to the tag that create an environment in the html page to execute java
application in the web browsers. We have to insert plugins to use applet tag. This tag is used in
HTML 4 but not support in HTML 5.
Syntax:
<applet code= “video source url” width = “400px” height= “300px”> click to watch video <\
applet>
In HTML 5 applet is not support so instead of that embed, object, video, audio tags are used to
implement multimedia files and other applications in html page.
<embed>
The <embed> tag in HTML is used for embedding external applications which are
generally multimedia content like audio or video, web pages, pictures, or plug-in applications
into an HTML document. It is used as a container for embedding plug-ins such as flash
animations. This tag is a new tag in HTML 5, and it requires only starting tag.
<object>
The <object> tag defines a container for an external resource. This tag is used to embed
multimedia files on webpage. The <object> tag can include multimedia files such as video,
audio, image, PDF, Java Applets, or another page on your page.
If you insert text between the <object> and </object> tags, then it will only be displayed if the
browser does not support the <object> tag.
Example:
<!DOCTYPE html>

<html>
<body>
<h1>Embed tag</h1>
<embed src="multimedia/puppy.webp" type="image/webp" width="200px" height="150px">
<embed src="multimedia/ujyalo.mp3" type="audio/mp3" width="300px" height="100px">
<embed src="multimedia/EC.mp4" type="video/mp4" width="300px" height="200px">
<embed src="executable.html" type="text/html" width="300px" height="300px">
<h1>Video Tag</h1>
<video src="multimedia/EC.mp4" width="300px" height="200px" controls></video>
<h1>Audio Tag</h1>
<audio src="multimedia/ujyalo.mp3" controls></audio>
<h2>Object tag</h2>
<object data="multimedia/EC.mp4" type="video/mp4" height="200" width="250">
Your browser does not support object tag, thank you.
</object>
</body>
</html>
Image and Imagemaps:
Image Tag:
HTML img tag is used to display image on the web page. HTML img tag is an
empty tag that contains attributes only, closing tags are not used in HTML image
element.
The <img> tag is used to embed an image in an HTML page.
Images are not technically inserted into a web page; images are linked to web
pages. The <img> tag creates a holding space for the referenced image.
The <img> tag has two required attributes:
 src - Specifies the path to the image

 alt - Specifies an alternate text for the image, if the image for some reason
cannot be displayed

Note: Also, always specify the width and height of an image. If width and height
are not specified, the page might flicker while the image loads.
Example:
<body>
<img src="multimedia/puppy.webp" alt="puppy" width="500px" height="400px">

<a href="https://www.google.com/">
<img src="multimedia/google.png" alt="google" width="100px" height="50px">
</a>
</body>
Client Side Image Mapping
In HTML, an element called MAP lets you associate URLs with various regions of
an image; then, when the image is clicked in one of the designated regions, the
browser loads the appropriate URL. This form of mapping is known as a client-
side image map, since the determination of which URL to contact is made on the
client and no server-side program is involved.
The <map> tag can include many <area> elements that define the coordinates and
type of the area. You can simply link any area of a picture to other pages using the
<map> tag without dividing the image.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>
<body>
<h2>Click on any clickable area of the image and see the result</h2>
<img src="multimedia/workplace.jpg" alt="laptop" usemap="#imgmap" width="400px"

height="380" style="margin-left: 100px">
<map name="imgmap">
<area shape="rect" coords="34,44,270,350" href="computer.html" alt="Computer">
<area shape="circle" coords="337,300,44" href="coffee.html" alt="Coffee">
<area shape="rect" coords="290,172,333,250" href="phone.html" alt="Mobile Phone">
<area shape="poly" coords="300,10,320,15,325,20,320,25,300,30,280,20"

href="blankspace.html" alt="Blank Space">
</map>
</body>
</html>
Server Side Image Mapping:

HTML also supports server-side image maps. With such maps, an image is drawn,
and when the user clicks on it, the coordinates of the click are sent to a server-side
program.
The ismap (a boolean attribute) is present in and image, it specifies that the image
is part of a server-side image map (an image map is an image with clickable
areas). When clicking on a server-side image map, the click coordinates are sent to
the server as a URL query string.
Note: The ismap attribute is allowed only if the <img> element is a descendant of
an <a> element with a valid href attribute.

Example:
<!DOCTYPE html>
<html>
<body>
<h1>The img ismap attribute</h1>
<a href="#">
<img src="multimedia/laptop.webp" alt="Laptop" width="200" height="150" ismap>
</a>
<p>Click the image, and the click coordinates will be sent to the server as a URL query
string.</p>
</body>
</html>
HTML Table:
The HTML tables allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which the <tr> tag is used
to create table rows and <td> tag is used to create data cells or columns. The
elements under <td> are regular and left aligned by default.
Example: Structure or syntax of table

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Syntax of table</h2>
<table border="1">
<tr>
<td>cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>

<tr>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
</body>
</html>
Output:
The HTML Table tags

 tr> - represents rows
 <td> - used to create data cells/ columns
 <th> - used to add table headings
 <caption> - used to insert captions
 <thead> - adds a separate header to the table
 <tbody> - shows the main body of the table
 <tfoot> - creates a separate footer for the table

Example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table border="1">
<caption> This is the caption</caption>
<thead>
<tr>
<td colspan="3">This is the header of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3"> This is the footer of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
<tr>
<td>Content 1</td>
<td>Contant 2</td>
<td>Content 3</td>
</tr>
<tr>
<td>Content 1</td>
<td>Contant 2</td>
<td>Content 3</td>
</tr>
</tbody>
</table>

</body>
</html>
Output:
Table Alignment:
The HTML <table> align Attribute is used to specify the alignment of the table
and its content.
Aligning Entire Table:

This is the horizontal alignment of the content in the table, to align entire table to
left or right or center we can use align attribute in the <table> tag.
Syntax:
<table align="left | right | center">
Attribute Values:
 left: It sets the left align to the table. It is a default value.

 right: It sets the right align to the table.
 center: It sets the center align to the table.
Alignment within a row:

To align only the content of row to left, right or center we can use align attribute in
the <tr> tag of table. This attribute align entire content of row.
Syntax;
<tr align= “left | right | center” > </tr>

Alignment within Cell:
To align only the content of a particular cell to left, right or center we can use align
attribute in the <tr> tag of table. This attribute align only the content of particular
cell.
Syntax;
<td align= “left | right | center” > </td>
valign attribute:
This is the vertical alignment, we can use valign attribute to align content of row or
cell to vertical manner.
Attribute values:
top = if sets the top align to the table

middle = it sets the middle align to the table, this it default alignment
bottom = it sets the bottom align to the table
syntax:
<tr valign = “top | middle | bottom”> </tr>
<td valign = “top | middle | bottom”> </td>
Table Attributes:
Some of the common attributes of tables are given bellow:
Content Summary:
The summary attribute specifies a summary of the content of a table. The summary
attribute makes no visual difference in ordinary web browsers. This attribute can
be used by screen readers.
Syntax:
<table summary = “this is the table related to list of student information”>

<tr>
<td> </td>

<td> </td>
</tr>
</table>
Note: summary attribute is not supported in HTML5.
Background Color:
The HTML bgcolor attribute is used to set the background color of an HTML
element. Bgcolor is one of those attributes that has become deprecated with the
implementation of Cascading Style Sheets. We can use color value by name or
RBG color code.
We can implement this attributes in entire table through <table> tag, or in a

specific row through <tr> tag, or in specific cell through <td> tag.
Syntax:
<table bgcolor = “red” >

<tr bgcolor = “green” >
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor = “#1018F5”> </td>
<td> </td>
</tr>
</table>
Adding a caption:
This attribute is used to insert the caption of table.
Syntax:
<table>

<caption> This is the caption of table </caption>
</table>
Setting the width, height:

This attribute is used the set the specific width and height of table. We can apply
this attribute in entire table or specific rows and columns.
The value of width and height can be written in terms of either % or pixels.
Syntax:
<table width = “50%” height = “100px” >

<tr>
<td> </td>
<td> </td>
</tr>
<tr width = “300px” height = “50px”>
<td> </td>
<td> </td>
</tr>
</table>
Adding a border:
This attribute is used to enclose the contents of table by the line or border. The
value of border attribute can be written in px, em etc. This attribute is applied only
in the <table> tag.
Syntax:
<table border= “1px” >

<tr>
<td> </td>
<td> </td>
</tr>

</table>
Spacing within a cell:

Cellpadding attribute is used to make space between the cell content and edge of
the cell. This attribute is used in the <table> tag. The value of the attribute is
written in px.
Syntax:
<table cellpadding = “10px” >

<tr>
<td> </td>
<td> </td>
</tr>
</table>
Spacing between the cells:

Cellspacing attribute is used to make space between the table cells. This attribute is
used in the <table> tag. The value of the attribute is written in px.
Syntax:
<table cellspacing = “10px” >

<tr>
<td> </td>
<td> </td>
</tr>
</table>
Spanning Multiple Rows or Columns:

We can merge the multiple rows and columns using the spanning attribute.
Colspan is used to merge the columns of the table in the other hand rowspan is
used to merge the rows of table. This attribute is applied in the table cell only.

Value of the attribute is written in the integer number which defines number of
rows or column to merge.
Syntax:
<table>
<tr>
<td colspan= “2” > </td>
<td> </td>
</tr>
<tr>
<td rowspan= “2” > </td>
<td> </td>
</tr>
</table>
Global Attributes:
The global attributes are attributes that can be used with all HTML elements.
The HTML <table> tag also supports the following global attributes
Attribute Value Description
Abbr abbreviated_text Deprecated − Specifies an

abbreviated version of the content in a
cell.
Align right Deprecated − Visual alignment.

left
center
justify
char
Bgcolor rgb(x,x,x) Deprecated − Specifies the

#hexcode background color of the table.
colorname
Border Pixels Deprecated − Specifies the border

width. A value of "0" means no
border.
Cellpadding pixels or % Deprecated − Specifies the space

between the cell borders and their
contents.
Cellspacing pixels or % Deprecated − Specifies the space

between cells.
Frame void Deprecated − Used in conjunction

above with the border attribute, specifies
below which side of the frame that makes up
hsides the border surrounding the table is
lhs displayed.
rhs
vsides
box
border
Rules none Deprecated − Used in conjunction

groups with the border attribute, specifies
rows which rules appear between the cells
cols of the table.
all
Summary Text Deprecated − Specifies the summary

of the content.

Width pixels or % Deprecated − Specifies the width of
the table.
HTML Table Sections:
The HTMLTableSectionElement interface provides special properties and methods

(beyond the HTMLElement interface it also has available to it by inheritance) for
manipulating the layout and presentation of sections, that is headers, footers and
bodies, in an HTML table.
We can use all the global attributes within the sections like, bgcolor, alinment,
width, height etc.
Header Section:
This is the heading of the table, this can implement by using the <thead> tag. This
section comes first in the table which can include the Rows and Columns. This is
the optional part of the table.
Syntax:
<thead>
<tr>
<td colspan= “2” > This is heading of the table </td>
</tr>
</thead>
Footer Section:
Unlike the header section, footer section is comes in the last position of the table.
This is implemented by the <tfoot> tag. This section also contains the Rows and
Columns. This is the optional part of the table.
Syntax:
<tfoot>
<tr>
<td colspan= “2” > This is the footer of the table </td>
</tr>
</tfoot>
Body Section:
Body section is come in the middle of the table enclosed by the header and footer
section. This section contains all the table elements like, rows, columns, and
contents. This section contains multiple table tags like, <th>, <tr>, <td> etc. This is
the mandatory part of the table.
Syntax:
<tbody>
<tr>
<td> cotent 1 </td>
<td> cotent 2 </td>
</tr>
<tr>
<td> cotent 3 </td>
<td> cotent 4 </td>
</tr>
</tbody>
Column Properties:
HTML table column has some useful properties like colspan, colgroup. It also
supports the HTML global attributes like id, style, bgcolor etc.
Colspan:
This is used to merge the two or more column in a single one.
Syntax:
<tr>
<td colspan= “3”> It merge 3 columns </td>

</tr>
Colgroup:
This property is used to apply table attributes to the specific group of columns.
Syntax:
<colgroup>
<col span = “3” bgcolor= “red” >
<col span = “2” bgcolor = “green”>
</colgroup>
Here in the above code, first 3 columns are design as bgcolor as red and other had
corresponding 2 columns will design as bgcolor green.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table width="50%">
<thead>
<tr>
<td colspan="5" align="center"> Table Heading </td>
</tr>
</thead>
<colgroup>
<col span="3" bgcolor="red" width="100px">
<col span="2" bgcolor="green">
</colgroup>
<tr>
<td>c1</td>
<td>c2</td>
<td>c2</td>
<td>c4</td>
<td>c5</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
<tr>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</body>
</html>
Output:
Question 2: Create a table to display the salary of the listed employee using
necessary sections and attributes.
<!DOCTYPE html>
<html lang="en">
<head>
</head>

<body>
<table width = "50%" height="100px">
<colgroup>
<col span="2" bgcolor="blue">
<col bgcolor="yellow">
</colgroup>
<caption>Salary of Employees</caption>
<thead bgcolor="red">
<tr>
<td colspan="3" align="center">Following are the salary of listed employees</td>
</tr>
</thead>
<tfoot bgcolor="green">
<tr>
<td colspan="3" align="center">Medmax Inovation Pvt. Ltd.</td>
</tr>
</tfoot>
<tbody align="center">
<tr>
<th>SN</th>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>1</td>
<td>Ram</td>

<td>Rs.50000</td>
</tr>
<tr>
<td>2</td>
<td>Gopal</td>
<td>Rs.30000</td>
</tr>
<tr>
<td>3</td>
<td>Rahul</td>
<td>Rs.40000</td>
</tr>
<tr>
<td>4</td>
<td>Sudan</td>
<td>Rs.50000</td>
</tr>
</tbody>
</table>
</body>
</html>
Output:

Question 2: Create following table apply different background color for each Row
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<h2>Syntax of table</h2>
<table border="1px" width="50%" height="200px">

<tr bgcolor="8D0909">
<th>SN</th>
<th>Name</th>
<th>Sal</th>
<th>Dob</th>
</tr>
<tr align="center" bgcolor="red">
<td rowspan="2">cel 1</td>
<td>cel 2</td>
<td>cel 3</td>
<td align="right" valign="top">cel 4</td>
</tr>
<tr bgcolor="green">
<td valign="bottom">cel 5</td>
<td colspan="2">cel 6</td>
</tr>
<tr bgcolor="yellow">
<td valign="bottom">cel 7</td>
<td>cel 8</td>
<td>cel 9</td>
<td valign="top">cel 10</td>
</tr>

</table>
</body>
</html>
Question 3: Write HTML code to draw following table, use section, header,
footer, body, and colgroup tags.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<table width="50%" height="300px" border="1px" align="center">
<caption>Tabale 1: Table of Student</caption>
<thead>
<tr>
<td colspan="5" bgcolor="red" align="center"> DWIT</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="5" bgcolor="blue" align="center">© BCA-III</td>
</tr>
</tfoot>
<colgroup>
<col span="3">
<col bgcolor="purple">
</colgroup>
<tbody>
<tr>
<td colspan="2" bgcolor="yellow"></td>
<td></td>
<td></td>
<td rowspan="2" bgcolor="green"></td>

</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td colspan="2" bgcolor="pink"></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>

HTML Frames:
HTML Frames are used to divide the web browser window into multiple sections where
each section can be loaded separately. A frameset tag is the collection of frames in the browser
window.
Creating Frames:
Instead of using body tag, use frameset tag in HTML to use frames in web browser. But
this Tag is deprecated in HTML 5. The frameset tag is used to define how to divide the browser.
Each frame is indicated by frame tag and it basically defines which HTML document shall open
into the frame. To define the horizontal frames, use row attribute of frame tag in HTML
document and to define the vertical frames use col attribute of frame tag in HTML document.
Advantages:
 It allows the user to view multiple documents within a single Web page.
 It loads pages from different servers in a single frameset.
 The older browsers that do not support frames can be addressed using the tag.
Disadvantages:
 Due to some of its disadvantage it is rarely used in web browser.
 Frames can make the production of website complicated.
 A user is unable to bookmark any of the Web pages viewed within a frame.
 The browser’s back button might not work as the user hopes.
 The use of too many frames can put a high workload on the server.
 Many old web browsers don’t support frames.
<frameset> tags
This tag is used to divide the frame in different rows and columns. The values of rows and
columns are written in either % or absolute value in pixels.
Syntax:
<frameset rows = “20%, 30%, 10%” />
</frameset>
<frame> tag
This tag is used to create frame with contents, which are enclosed by frameset tag.
Syntax:
<frameset rows = “20%, 30%, 10” >
<frame name = “fram1” src= “url” />

<noframes>
<body>Your browser does not support frames.</body>
</noframes>
</frameset>
Note: for Horizontal framing we use rows and for vertical framing, we use cols attribute.
Example: Horizontal Framing

<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset rows = "20%, 60%, 20%">

<frame name ="top" src="D:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A
online web technology\web technology practical\image\aquarius1.jpg" />
<frame name = "main" src =
"D:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A online web technology\
web technology practical\image\aquarius1.jpg" />
<frame name = "bottom" src =
<noframes>
<body>The browser you are working does
not support frames.
</body>
</noframes>
</frameset>
</html>
Output:

Example: Vertical framing
<html>
<head>
<title>Example of HTML Frames using row attribute</title>
</head>
<frameset cols = "20%, 60%, 20%">

<frame name ="top" src="D:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A
online web technology\web technology practical\image\aquarius1.jpg" />
<frame name = "main" src =
<frame name = "bottom" src =
<noframes>
<body>The browser you are working does
not support frames.
</body>
</noframes>
</frameset>
</html>
Output:

Example:
<html>
<frameset name="top" rows=40%,20%,40%>
<frame src="myfirstpage.htm"/>
<frame src="D:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A online web
technology\web technology practical\image\rose.jpg"/>
<frame src="D:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A online web
technology\web technology practical\image\Gomphrena.jpg"/>
</frameset>
</html>
Output:
Nesting Frameset:
We can create frame inside the frame is called nesting of frame.

Syntax:
<frameset cols= 50%,50% >
<frame name = “frame1” src= “url”/>
<frameset rows = “50%, 50%”>
<frame name = “nestedframe1” src= “url”/>

<frame name = “nestedframe2” src= “url”/>
</frameset>
</frameset>
Since, frame tag is not supported by HTML5, instead we can use ifram or div in HTML5 to
do similar task.
<iframe>
You can define an inline frame with HTML tag <iframe>. The <iframe> tag is not
somehow related to <frameset> tag, instead, it can appear anywhere in your document. The
<iframe> tag defines a rectangular region within the document in which the browser can display
a separate document, including scrollbars and borders. An inline frame is used to embed another
document within the current HTML document.
The src attribute is used to specify the URL of the document that occupies the inline frame.
Example:
<html>
<head>
</head>
<body>
<iframe src=" myfirstpage.htm " frameborder="1">
Sorry, your browser doesn't support iframe.
</iframe>
</body>
</html>

Forms
An HTML form is a section of a document containing normal content, markup, special
elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
Users generally "complete" a form by modifying its controls (entering text, selecting menu items,
etc.), before submitting the form to an agent for processing (e.g., to a Web server, to a mail
server, etc.)
Almost every time you want to collect information from a visitor to your site, you need to
use a form. Some forms are quite complex, such as those that allow you to book plane tickets or
purchase insurance online. Others are quite simple, such as the search box on the homepage of
Google.
HTML form is a most common way to collect some data from user and communicate such
information to a server. HTML provides tag to generate the commonly used object on a screen
form. These objects are called controls or widgets or components. All control tags are inline tags
and includes single and multi-line text collection, checkboxes, radio buttons and others.
Each control can have value given through user input. Controls together with values in a
from are called form data. Every form which requires a data to be sent on server requires submit
button. When user clicks submit button, the form data will be sent to web server. To create a
form using HTML: <form> tag is used.
Syntax:
<form action = “script URL” method = “GET/POST”>
Form elements
</form>
The <form> Element

Any form that you create will live inside an element called < form > , and the form
controls (the text input boxes, drop - down boxes, checkboxes, a submit button, and so on) live
between the opening < form > and closing < /form > tags. A < form > element can also contain
other markup, such as paragraphs, headings, and so on, although it may not contain another <
form > element.
The HTML <form> element can contain one or more of the following form elements:
1. <input>
2. <label>
3. <select>
4. <textarea>

5. <button>
6. <fieldset>
7. <legend>
8. <option>
1.<label> element:
 The <label> element defines a label for several form elements.
 The <label> element is useful for screen-reader users, because the screen-reader will read
out loud the label when the user focus on the input element.
 The for attribute of the <label> tag should be equal to the id attribute of
the <input> element to bind them together.
Code:
<html>
<head>
<title>frame example</title>
</head>
<body>
<form>
<p>Student form</p>
<label for="fname" >Name:</label>
<input type="text" id="fname" name="fname"/>
</form>
</body>
</html>
Output:
2.The <input> Element

The <input> element can be displayed in several ways, depending on the type attribute.

3.The <select> Element
 The <select> element defines a drop-down list:
 The <option> elements defines an option 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:
Code:
<label >Which subject Do you like most:</label><br/>
<select id="subject" name"subject">
<option>web technology</option>
<option>complier</option>
<option>Artificial</option>
</select>
Output:
Code:
<select id="subject" name"subject">
<option selected>complier</option>
</select>
Output:
Attribute of select element:

1. Size:
Size attribute to specify the number of visible values:

Code

<select id="subject" name"subject" size="2">
</select>
Output:
2. Multiple
Multiple attribute to allow the user to select more than one value.
Code:

<select id="subject" name"subject" size="2" multiple>
</select>
Output:
4.The <textarea> Element

 <textarea> element defines a multi-line input field (a text area)
 The rows attribute specifies the visible number of lines in a text area.
 The cols attribute specifies the visible width of a text area.
Code:
<label>Mention why you select this subject</label><br/>
<textarea name="message" rows="5" cols="20">web technology is something that..
</textarea>
Output:
Note: you can also define the size of the text area by using CSS:
Code:
<textarea name="message" rows="5" cols="20" style="width:200px; height:100px;">web
technology is something that..
</textarea>
Output:
5.The <button> Element

 The <button> element defines a clickable button:
Code
<button type="button" onclick="alert('Hello!')">click me</button>

6.The <fieldset> and <legend> Elements
 The <fieldset> element is used to group related data in a form.
 The <legend> element defines a caption for the <fieldset> element.
Code:
<html>
<head>
<title>frame example</title>
</head>
<body>
<form>
<fieldset>
<legend>Student form</legend>
<p>Student form</p>
<label for="fname" >Name:</label>
<input type="text" id="fname" name="fname"/><br/>
<select id="subject" name"subject" size="2" multiple>
</select>
<br/>
<textarea name="message" rows="5" cols="20" style="width:200px;
height:100px;">web technology is something that..
</textarea>
<br/>
<button type="button" onclick="alert('Hello!')">click me</button>
</fieldset>
</form>
</body>
</html>
Output:

Attribute of form element:
Every < form > element should carry at least two attributes: Action and method. A < form >
element may also carry all of the universal attributes, the UI event attributes, and the following
attributes:
Enctype, accept, accept-charset, onsubmit, onreset
Some of the attributes included on form are as follows:
Attributes Description
Action specifies URL to be redirect when user clicks on submit
Method Specifies techniques get or post to be used to pass the form data to the
server
Target Specify the target window or frame where the result of the script will be
displayed. It takes values like _blank, _self, _parent etc.
Enctype Specify how the browser will encodes the data before it send it to the
server. Possible values are:
Application/x-www-form urlencoded is the standard method most forms
use in simple scenarios.
Multipart/form-data: used when we want to upload binary data in the form
of files like image, word file etc.
The action Attribute,

Once users have entered information into a form, they usually have to click what is known
as a submit button (although the actual text on the button may say something different such as
Search, Send. This indicates that the user has filled out the form, and this usually sends the form
data to a web server.
Once form data arrives at the server, a script or other program processes the data and
sends a new web page back to you. The returned page will respond to a request you have made
or acknowledge an action you have taken.
The action attribute indicates what happens to the data when the form is submitted.
Usually, the value of the action attribute is a page or program on a web server that will receive
the information.
Example
For example, if you have login form consisting of a username and password, the details the
user enters may get passed to a page (display.html) on the web server / on the local adderss
called display.html, in which case the action attribute could read as follows:

<FORM action="E:/Academic Stuff/BIM/SEM 3/PRACTICAL/forms/display.html"
method="post">
Simpleform.html
<!DOCTYPE html>
<html>
<head>
<title>simple form</title>
</head>
<body>
<FORM action=" E:/Academic Stuff/BSc CSIT/5th semester/Web-Technology/A online web
technology/practical sem 5/forms/display.html" method="post">
<P>
<LABEL for="firstname">First name: </LABEL>
<INPUT type="text" id="firstname"><BR><BR>
<LABEL for="lastname">Last name: </LABEL>
<INPUT type="text" id="lastname"><BR><BR>
<LABEL for="email">email: </LABEL>
<INPUT type="text" id="email"><BR><BR>
<INPUT type="radio" name="sex" value="Male"> Male<BR><BR>
<INPUT type="radio" name="sex" value="Female"> Female<BR><BR>
<INPUT type="submit" value="login"> <INPUT type="reset">
</P>
</FORM>
</body>
</html>
Output:

display.html
<!DOCTYPE html>
<html>
<head>
<title>display</title>
</head>
<body>
<h2>this is our village</h2>
<img src="E:/Academic Stuff/BSc CSIT/5th semester/Web-Technology/A online web
technology/practical sem 5/image/vill.jpg" alt="Village picture" width="30%" height="30%" />
</body>
</html>
The method Attribute

Form data can be sent to the server in two ways, each corresponding to an HTTP method:
1) The get method, which sends data as part of the URL.
<!DOCTYPE html>
<html>
<head>

</head>
<body>
technology/practical sem 5/forms/display.html" method="get">
<P>
</P>
</FORM>
</body>
</html>
display.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>this is our village</h2>
<img src="E:/Academic Stuff/BSc CSIT/5th semester/Web-Technology/A online web
technology/practical sem 5/image/vill.jpg" alt="Village picture" width="30%" height="30%" />
</body>
</html>

2) The post method, which hides data in something known as the HTTP headers.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
technology/practical sem 5/forms/display.html" method="post">

<P>
</P>
</FORM>
</body>
</html>
Output:

The target Attribute
The target attribute is usually used with the < a > element to indicate which frame or
browser window the link should be loaded into. It can also be used with a form to indicate which
frame or window the form results open in when the user has submitted a form
Target.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action=" " method='get' >
<p>Open link in a new window or tab: <a href="https://google.com"
target="_blank">Visit </a></p>
</form>
</body>
</html>

The enctype Attribute
If you use the HTTP post method to send data to the server, you can use the enctype
attribute to specify how the browser encodes the data before it sends it to the server. Browsers
tend to support two types of encoding:
 application/x - www - form – urlencoded : which is the standard method most forms
use. Browsers use this because some characters, such as spaces, the plus sign, and some
other non - alphanumeric characters cannot be sent to the web server. Instead, they are
replaced by other characters which are used to represent them.
 multipart/form - data: which allows the data to be sent in parts, where each
consecutive part corresponds to a form control, in the order it appears in the form. It is
commonly used when visitors have to upload files (such as photos) to a server. Each part

can have an optional content -type header of its own indicating the type of data for that
form control.
If this attribute is not used, browsers use the first value. As a result, you are likely to use
this attribute only if your form allows users to upload a file (such as an image) to the server, or if
they are going to use non - ASCII characters, in which case the enctype attribute should be given
the second value:
enctype= “multipart/form-data”
The onsubmit Attribute

At some point, you have probably filled in a form on a web site, and then, as soon as you
have clicked the button to send the form data (even before the page is sent to the server), been
shown a message telling you that you have missed entering some data, or entered the wrong data.
When this happens, the chances are you have come across a form that uses the onsubmit attribute
to run a script in the browser that checks the data you entered before the form is sent to the
server.
Onsubmit.html
<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some
text.</p>
<form name="form1" action="" onsubmit="myFunction()">

Enter the number: <input type="text" name="fname" id="id1">
<input type="submit" value="Submit">
</form>
<script>
function myFunction()
{
if (form1.fname.value>50)
{
alert('submitted');
}
else {
alert('fill all the field');
}

}
</script>
</body>
</html>

The onreset Attribute
Some forms contain a reset button that empties the form of all details, although the
button might say something like clear form instead; when this button is pressed, an onreset event
fires and a script can be run.
<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>
<form name="form1" action="" onreset="myFunction()">

Enter the number: <input type="text" name="fname" id="id1">
<input type="reset" name="submit" value="Reset">
</form>
<script>
{
alert('The form reset');
}
</script>
</body>
</html>

The accept-charset Attribute
Different languages are written in different character sets or groups of characters.
However, when creating web sites, developers do not always build them to understand all
different languages. The idea behind the accept - charset attribute is that it specifies a list of
character encodings that a user may enter and that the server can then process. Values should be
a space - separated or comma - delimited list of character sets.
For example, the following indicates that a server accepts UTF - 8 encodings:
accept-charset=“utf-8”
<!DOCTYPE html>
<html>
<body>
<form action="#" accept-charset="UTF-8">
First name:<input type="text" name="fname">
<br> Last name:<input type="text" name="lname">

<br>
</form>
</body>
</html>
Form Controls
There are several types of form controls that you can use to collect information from
visitors to your site.
Adding Text:
1.Text input (single-line): Used for a single line of text such as email addresses and
names.
2.Password input: Like a single line text box but it masks the characters entered.
3.Text area (multi-line): For longer areas of text, such as messages and comments.
Making Choices:
1.Radio buttons: For use when a user must select one of a number of options.
2.Checkboxes: When a user can select and unselect one or more options.
Drop-down boxes: When a user must pick one of a number of options from a list.
3.Drop-down boxes: When a user must pick one of a number of options from a list.
Submitting Forms:
1.Submit buttons: To submit data from your form to another web page.
2.Image buttons: Similar to submit buttons but they allow you to use an image.
Uploading Files:
1.File upload: Allows users to upload files (e.g. images) to a website.
The Input Element:

Most of the commonly used controls are specifies with <input > tag which is an inline tag
and contains type, name and value as its attributes. Type specifies particular kinds of control
required in input tag, name attributes contain value which is sent to server after submitting
which will be used for to find specific component values in the form data and value attributes
initialize a default value of the control.
Adding Text:
Text Inputs
Text input boxes are used on many web pages. Possibly the most famous text input box
is the one right in the middle of the Google homepage that allows you to enter what you are
searching for. There are actually three types of text input used on forms:
1.Single - line text input controls: Text input (single-line):

Used for items that require only one line of user input, such as search boxes or e - mail
addresses. They are created using the < input > element and sometimes referred to simply as
“textboxes.”
Code:
<!DOCTYPE html>
<html>
<body>
<form action=“ ”>
User name:<input type="text" name="username"><br>
</form>
</body>
</html>
Output
2.Password input controls: Password input

These are just like the single - line text input, except they mask the characters a user
enters so that the characters cannot be seen on the screen. They tend to either show an asterisk or
a dot instead of each character the user types, so that someone cannot simply look at the screen
to see what a user types in. Password input controls are mainly used for entering passwords on
login forms or sensitive details such as credit card numbers. They are also created using the <
input > element.
Code
<!DOCTYPE html>
<html>
<body>
Email:<input type="text" name="email"><br>
Passord: <input type="password" name="pwd" maxlength=”8"><br>
</form>
</body>
</html>
Output
3.Multi - line text input controls: Text area (multi-line):

Used when the user is required to give details that may be longer than a single sentence.
Multi - line input controls are created with the < textarea > element.
Code
<!DOCTYPE html>
<html>
<body>
<textarea rows=”6” cols=”40”> This is multiline input </textarea>
</form>
</body>
</html>
Output
Making Choices:
1.Radio Buttons
Radio buttons allow users to pick just one of a number of options. It is similar to
checkboxes in that they can be either on or off, but there are two key differences:
1. When you have a group of radio buttons that share the same name, only one of them can
be selected. Once one radio button has been selected, if the user clicks another option, the
new option is selected and the old one deselected.
2. You should not use radio buttons for a single form control where the control indicates on
or off, because once alone radio button has been selected it cannot be deselected again
(without writing a script to do that).
Therefore, a group of radio buttons are ideal if you want to provide users with a number of
options from which they must pick only one. In such situations, an alternative is to use a drop -
down select box that allows users to select only one option from several. Your decision between
whether to use a select box or a group of radio buttons depends on three things:
User expectations: If your form models a paper form where users would be presented with
several checkboxes, from which they can pick only one, then you should use a group of
radio buttons.
Seeing all the options: If users would benefit from having all the options in front of them before
they pick one, you should use a group of radio buttons.
Space: If you are concerned about space, a drop - down select box will take up far less space
than a set of radio buttons.
Code:
<!DOCTYPE html>
<html>
<body>
<form action="" method="get" name="" >

Please select which class of travel you wish to fly: <br/>
<input type="radio" name="radClass" value="First"/> First class <br/>

<input type="radio" name="radClass" value="Business"/> Business class <br/>
<input type="radio" name="radClass" value="Economy"/> Economy class <br/>
</form >
</body>
</html>
Output
Note: -
Checked Attribute: The checked attribute can be used to indicate which value (if
any) should be selected when the page loads. The value of this attribute is checked.
Only one radio button in a group should use this attribute.
Code:
<!DOCTYPE html>
<html>
<body>
Please select which class of travel you wish to fly: <br/>
<input type="radio" name="radClass" checked=”checked” value="First"/> First
class <br/>
<input type="radio" name="radClass" value="Business"/> Business class <br/>
<input type="radio" name="radClass" value="Economy"/> Economy class <br/>
</form >
</body>
</html>
Output
2.Checkboxes
Checkboxes are just like the little boxes on paper forms in which you can place a cross or
tick. As with light switches, they can be either on or off. When they are checked they are on - the
user can simply toggle between on and off positions by clicking the checkbox.
Checkboxes can appear individually, with each having its own name, or they can appear as
a group of checkboxes that share a control name and allow users to select several values for the
same property. Checkboxes are ideal form controls when you need to allow a user to:
Provide a simple yes or no response with one control (such as accepting terms and conditions)
Select several items from a list of possible options (such as when you want a user to indicate all
the skills they have from a given list)
A checkbox is created using the < input > element whose type attribute has a value of checkbox.
Code
<!DOCTYPE html>
<html>
<body>
<form action="" method="get" name="">
<p>Which of the following skills do you possess?</p>
<p>Select all that apply.</p>
<input type="checkbox" name="chkSkills" value="xhtml"/> XHTML
<br/>
<input type="checkbox" name="chkSkills" value="CSS"/> CSS <br/>
<input type="checkbox" name="chkSkills" value="JavaScript"/>
JavaScript <br/>
<input type="checkbox" name="chkSkills" value="aspnet"/> ASP.Net
<br/>
<input type="checkbox" name="chkSkills" value="xhtml"/> XHTML
<br/>
<input type="checkbox" name="chkSkills" value="php" /> PHP <br/>
</form >
</body>
</html>

OUTPUT
3.Select Boxes: Drop-down boxes

A drop - down select box allows users to select one item from a drop - down menu. Drop -
down select boxes can take up far less space than a group of radio buttons. Drop - down select
boxes can also provide an alternative to single - line text input controls where you want to limit
the options that a user can enter. For example, imagine that you were asking which country
someone was from.
A drop - down select box is contained by a < select > element, while each individual option
within that list is contained within an < option > element.
Code:
<!DOCTYPE html>
<html>
<body>
<h2>select boxes</h2>
<select name="selColor" >
<option selected="selected" value="" > Select color </option >
<option value="red: > Red </option>
<option value="green"> Green </option>
<option value="blue"> Blue </option>
</select>
</form >
</body>
</html>
Output

Submitting Forms:
Buttons
Buttons are most commonly used to submit a form, although they are sometimes used to
clear or reset a form and even to trigger client - side scripts. You can create a button in three
ways: Using an < input > element with a type attribute whose value is submit, reset, or button.
 < input type=”submit” name=”submit” value=”submit” / >
 < input type=”reset” value=”Clear form” / >
 < input type=”button” value=”calculate” onclick=”calculate()” / >
1.Submit buttons:
To submit data from your form to another web page.
Example
<!DOCTYPE html>

<html>
<body>
<form action="">
<p>Using an input element with a type attribute whose value is submit<p>
<input type="submit" name="submit" value="submit" />
</form>
</body>
</html>
Output
2.Image buttons:
Similar to submit buttons but they allow you to use an image. Using an < input > element
with a type attribute whose value is image.
< input type=”image” src=”submit.jpg” alt=”Submit” name=”btnImage” / >
Example
<!DOCTYPE html>
<html>
<body>
<form action="">
<input type="image" src="E:/Academic Stuff/BSc CSIT/5th semester/Web-
Technology/A online web technology/practical sem 5/image/twitter-circle.png"
alt="Submit" name="btnImage" />
</form>
</body>
</html>
Output

3. Using a < button > element:
Code:
<!DOCTYPE html>
<html>
<body>
<form action="">
<button type="submit"> Submit </button>
</form>
</body>
</html>
Output
Uploading Files:
File Select Boxes: File upload
If you want to allow a user to upload a file to your web site from his or her computer, you
will need to use a file upload box , also known as a file select box . It Allows users to upload
files (e.g. images) to a website.
Example:
<!DOCTYPE html>
<html>
<body>

<h1>Show a file-select field:</h1>
<h3>Show a file-select field which allows only one file to be chosen:</h3>

<form action="">
Select a file: <input type="file" name="myFile"><br><br>
<input type="submit">
</form>
<h3>Show a file-select field which allows multiple files:</h3>

<form action="">
Select files: <input type="file" name="myFile" multiple><br><br>
<input type="submit">
</form>
</body>
</html>
Output
Hidden Controls
Sometimes you will want to pass information between pages without the user seeing it;
to do this, you can use hidden form controls. It is important to note, however, that while users
cannot see them in the web page, if they were to look at the source code for the page, they would
be able to see the values in the code. Therefore, hidden controls should not be used for any
sensitive information that you do not want the user to see.
Example:
<!DOCTYPE html>
<html>
<body>
<h1>hidden form field</h1>

<form action="" method="get" name="fromVote">
<input type="hidden" name="hidPageSentFrom" value="home page" />
<input type="submit" value="Click if this is your favorite page of our site." />
</form >
</body>
</html>
Output
The id Attribute
The id attribute allows you to uniquely identify the < form > element within a page, just
as you can use it to uniquely identify any element on a page. It is good practice to give every <
form > element an id attribute, because many forms make use of style sheets and scripts, which
may require the use of the id attribute to identify the form.
Form1.html
<!DOCTYPE html>
<html>
<head>
<style>
#id1 {
width: 100%;
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
#id2 {
width: 100%;

background-color: #4CAF60;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<form action="" method='get'>
<h2>Please input your name:</h2>
Number 1:
<input name="num1"><br>
Number 2:
<input name="num2" ><br>
<button type="submit" id="id1">submit</button>
<button type="submit" id="id2">submit</button>
</form>
</body>
</html>
Output

Class Attributes of HTML Elements
Class, in general is a template that defines the action/styles to be performed for a
collection of objects. In HTML, objects are HTML elements. Thus, class in HTML is a
collection of HTML elements on which a common style or action has to be performed. The
HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements
can share the same class.
The class attribute is often used to point to a class name in a style sheet. It can also be used
by a JavaScript to access and manipulate elements with the specific class name.
HTML class attribute can be accessed by any element and is useful to identify a group of
elements in an HTML document together. These elements can be styled using CSS or actions
that can be performed on them using JavaScript.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
.qq {
background-color: green;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>

<div class="city">
<h2>Class Attribute</h2>
<p> The class attribute is often used to point to a class name in a style sheet.</p>
</div>
<h2 class=”qq” >Class Attribute</h2>
<p class=”city” > The class attribute is often used to point to a class name in a
style
</body>
</html>
Output:
HTML Events
When a user visits your website, they do things like click on text and images and given
links, hover over things etc. When the user clicks a button, that click too is an event. So, browser
reacts on user action, then it is called as an event. For example, when you click on the submit
button, the page gets load, then browser displays an information. Other examples include events
like pressing any key, closing a window, resizing a window, etc.
Each and every event has its event handler, which is a block of code (JavaScript function)
that runs when the event fires and can specify by the value of event tag attribute. In HTML5
there are lots of event attributes available which can be activated using a programming language
such as JavaScript.
Event handlers are sometimes called event listeners, the listener listens out for the event
happening, and the handler is the code that is run in response to it happening.
Type of HTML Events
There are many event attributes available in HTML5, which are classified primarily into 6
different types. These attributes work using JavaScript language.
1. Windows Event Attributes

2. Form Event Attributes
3. Keyboard Event Attributes
4. Mouse Event Attributes
5. Clipboard Event Attributes
6. Media Event Attributes
Windows Event Attributes
Windows events are related for the window object. This is provided for the action of the
windows object and it can only be applied with <body> tag.
Attribute Description
 onafterprint  Script to be run after the document is printed
 onbeforeprint  Script to be run before the document is printed
 onbeforeunload  Script to be run when the document is about to be unloaded
 onerror  Script to be run when an error occurs
 onhashchange  Script to be run when there has been changes to the anchor
part of the a URL
 onload  Fires after the page is finished loading
 onmessage  Script to be run when the message is triggered
 onoffline  Script to be run when the browser starts to work offline
 ononline  Script to be run when the browser starts to work online
 onpagehide  Script to be run when a user navigates away from a page
 onpageshow  Script to be run when a user navigates to a page
 onpopstate  Script to be run when the window's history changes
 onresize  Fires when the browser window is resized

 onstorage  Script to be run when a Web Storage area is updated
 onunload  Fires once a page has unloaded (or the browser window has
been closed)
1. onafterprint attribute
Onafterprint works when a page started printing i.e., Script runs after the document is
printed. Here comes an example of HTML code.
<!DOCTYPE html>
<html>
<head>
<script>
function funtoPrint() {
alert("This document is now being printed");
}
</script>
</head>
<body onafterprint="funtoPrint()">
<p>To print this document Press Ctrl+P </p>
</body>
</html>
Output:

2.onbeforeprint attribute
The onbeforeprint attribute works when a page is about to be printed. The alert message
display before the print dialogue box appears.
<!DOCTYPE html>
<html>
<head>
<script>
function funtoPrint() {
alert("This document is about to print");
}
</script>
</head>

<body onbeforeprint="funtoPrint()">
<p>To print this document Press Ctrl+P </p>
</body>
</html>
Output:
3. onbeforeunload
The onbeforeunload event run when the document is about to be unloaded. This event is
used to allow to display a message in a dialog box to inform the user, so he/she wants to stay or
leave the current page.
Example:
<!DOCTYPE html>
<html>
<head>
<script>

function funtoload()
{
return "This document is unloaded";
}
</script>
</head>
<body onbeforeunload="return funtoload()">

<p>Close this window, press F5 to invoke the onbeforeunload event.</p>
<code>
#include <stdio.h>
#include<conio.h>
int main()
{
char val;
val = getch();
printf("Enter the character :\n ");
printf("Entered character : %c",val);
return 0;
}
</code>
<p>Online run the above code click on the link below. Also by clicking on this
link invokes the onbeforeunload event.</p>
<a href="https://www.onlinegdb.com/online_c_compiler">Run</a>
</body>
</html>
Output:

4.onerror atribute:

Script to be run when an error occurs. This attribute fires when an error occurs in the
associated document. This attribute works when an error occurs while loading an external file.
The external file may contain a document file or an image file.
Example:
<!DOCTYPE html>
<html>
<head>
<title>onerror event attribute</title>
<style>
body {
text-align:center;
}
H2 {
color:green;
}
</style>
<script>
{
alert("The image could not be loaded.");
}
</script>
</head>
<body>
<h2>onerror event attribute</h2>
<img src="E:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A online web
technology\practical sem 5\image\Poppy.jpg" alt=" Poppy flower " width="100" height="100"
onerror="myFunction()">
</body>
</html>
Output

Alter the path where pic does not reside and see…
5.onhashchange Attribute
When the anchor part in the webpage URL is changed, the script is executed. The anchor
part starts with ‘#’ symbol of the current URL. The hash property sets or returns the anchor part
of a URL, including the hash sign (#).
Example:
<!DOCTYPE html>
<html>
<head>
<script>

function changePart()
{
location.hash ="2";
var a = "Anchor part: " + location.hash;
document.getElementById("d1").innerHTML = a;
}
function hashFunction()
{
alert("The anchor part has changed!");
}
</script>
</head>
<body onhashchange="hashFunction()">
<h2>onhashchange event attribute</h2>
<p>Click the button to set the anchor part of the current URL to #2</p>
<button onclick="changePart()">submit</button>
<p id="d1">Anchor part</p>
<body>
</html>
Output:
------------------------------------------------------------------------------------------

6.onload attribute
This function helps in loading an object and works well to see if a web page is correctly
loaded.
<!DOCTYPE html>
<html>
<head>
<script>
function myFun()
{
alert("This page is loaded");
}
</script>
</head>
<body onload="myFun()">
<h1>onload function</h1>
</body>
</html>
Output:

Form Event Attributes
Form event occurs when the user performs some action within the form such as
submitting the form, selecting input field, etc. The form events can be used with any element, but
these are mainly used with HTML form elements.
onblur Some form validation object loos the focus, then event fired.
onchange The value change in the form, then event fired.
onfocus In the form <input>, <a> , <select> object has focus. Working on this
object then event fired.
oninput The user gives input of value in the form then this event fired.
oninvalid The event works on when the element does not satisfy its predefined
constraints.
onreset User reset the form information, then event fired.

onsearch Users search the required field, then event fired.
onselect The user selects the text or text area in form, then event fired.
onsubmit The user submits the form at the end then the event fired.
Onblur Attribute:
onblur is an in-built event that is available in JavaScript which gets triggered when the
elements on which it is applied loses its focus. This event is fired when the item comes out of
focus on the web page.
onblur event is mostly used with the input field element such as in form where input
validation can be performed for example when the user enters input into the field and goes to the
next element, the onblur event can be attached on that field and validation can be performed.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function fireEvent( )
{
document.getElementById( "myText" ).style.backgroundColor = 'pink';
document.getElementById("result1").innerHTML = " Input field lost focus ";
}
</script>
<style>
.resultText {
margin: 0 0 3px 0;
padding: 0px;
display: block;
font-weight: bold;
}
</style>
</head>
<body>
<h3> JavaScript onblur Event </h3>
<p> Click in the textbox then click outside to trigger the event </p>
<div class ="resultText" >

<input type = "text" id = "myText" onblur = "fireEvent()" >
<p id = "result1" > Default Text </p>
</div>
</body>
</html>
Output:
===================================
2.onchange attribute:
The onchange event attribute works when the value of the element changes and select the
new value from the List.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align:center;
}
h2 {
color:green;
}
</style>
<script>
function onchangefun()
{
var x = document.getElementById("s1").value;
document.getElementById("p1").innerHTML ="Selected Subject: " + x;
}
</script>
</head>
<body>
<h2>onchange Event Attribute</h2>
<p>Choose the Stream:</p>
<select id="s1" onchange=" onchangefun()">

<option value="CSIT">BSc CSIT</option>
<option value="BCA">BCA</option>
<option value="BIM">BIM</option>
</select>
<p id="p1"></p>
</body>
</html>
Output:

3.onfocus attriute:
This onfocus attribute works when the element gets focused. This event attribute is mostly
used with <input>, <select>, <a> elements. This event attribute is supported by all HTML
elements excepts <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>,
<style>, and <title> elements.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
input {
color:white;
margin-top:5px;
border:1px solid black;

border-radius:3px;
}
</style>
<script>
function onfocusFun(x)
{
document.getElementById(x).style.background ="pink";
}
</script>
</head>
<body>
<h2>onfocus event attribute</h2>
First name: <input type="text" id="fname" onfocus="onfocusFun(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="onfocusFun(this.id)">
</body>
</html>
Output:

4.oninput attriute:
The oninput attribute fires when an element gets user input. This attribute fires when the
value of an <input> or <textarea> element is changed. This event is similar to the onchange
event. The oninput event occurs immediately after the value of an element has changed, while
onchange occurs when the element loses focus.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
input {
color:white;
margin-top:5px;
border-radius:3px;
}
</style>
<script>
function oninputFun(x)
{
document.getElementById(x).style.background ="pink";
}
</script>
</head>
<body>
<h2>oninput event attribute</h2>
First name: <input type="text" id="fname" oninput="oninputFun(this.id)"><br>
Last name: <input type="text" id="lname" oninput="oninputFun(this.id)">
</body>
</html>
Output:

5.oninvalid Attribute
 The oninvalid event occurs when a submittable <input> element is invalid.
 For example, the input field is invalid if the required attribute is set and the field is
empty.
 The required attribute sets that the input field must be filled out before submitting the
form.
Example:
<!DOCTYPE html>
<html>
<head>
<style>

input {
color:black;
margin-top:5px;
border-radius:3px;
}
</style>
</head>
<body>
<form method="get">
<h2>oninvalid event attribute</h2>
First name: <input type="text" id="fname" oninvalid="alert('You must fill out the input
field!');" required><br>
Last name: <input type="text" id="lname"><br>
</form>
</body>
</html>
Output:

6.onreset Attribute
The onreset attribute fires when a form is reset.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
input {
color:black;
margin-top:5px;
border-radius:3px;
}
</style>
<script>
function onresetFun()
{
document.getElementById('p1').innerHTML = "The form is reset";
}
</script>
</head>
<body>
<form onreset="onresetFun()">
<h2>onreset attribute</h2>
First name: <input type="text" id="fname"><br>
Last name: <input type="text" id="lname" "><br>
<input type="reset">
</form>
<p id='p1'></p>
</body>
</html>
Output:

7.onsearch Attribute
The onsearch event occurs when the user presses the ENTER key or clicks the 'search text'
button in an input search field. <input> elements of type search are text fields designed for the
user to enter search queries into. These are functionally identical to text inputs, but may be styled
differently by the user.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function onsearchFun()
{
var x = document.getElementById("s1");
document.getElementById("p1").innerHTML = "You are searching for: " +
x.value;
}
</script>

</head>
<body>
<p>Enter the value to be search</p>
<input type="search" id="s1" onsearch="onsearchFun()">
<p id="p1"></p>
</body>
</html>
Output:
8. onselect Attribute
The onselect attribute execute the specified code when some text of the associated
element is selected. The onselect attribute runs a Javascript after selecting text in an element.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function onselectFun()
{
var x = document.getElementById("s1");
document.getElementById("p1").innerHTML = "You are selecting the value: "
+ x.value;
}

</script>
</head>
<body>
<p>Select the text appeared on text field</p>
<input type="text" id="s1" onselect="onselectFun()" value="Hello world!">
<p id="p1"></p>
</body>
</html>
Output:
9. onsubmit Attribute
The onsubmit attribute fires when a form is submitted.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
input {
color:black;
margin-top:5px;
border-radius:3px;

}
</style>
<script>
function onsubmitFun()
{
alert("The form is submitted");
}
</script>
</head>
<body>
<form onsubmit="onsubmitFun()">
<h2>onsubmit event attribute</h2>
First name: <input type="text" id="fname"><br>
Last name: <input type="text" id="lname" "><br>
</form>
</body>
</html>
Output:

Keyboard Event Attributes
This keyboard event attributes used for keyboard action and user interaction.
onkeydown Using a keyboard, the user press the key down at that point event
works
onkeypress Using the keyboard, users press the key and display characters at that
point event works.
onkeyup After the press, the key user releases the key then the event works.
1.onkeydown Attribute
The onkeydown attribute is part of the Event Attributes, and can be used on any HTML
elements. The onkeydown attribute fires when the user is pressing a key or A function is
triggered when the user is pressing a key in the input field.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function onkeydownFun()
{

alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
<h2>onkeydown attribute</h2>
First name: <input type="text" id="fname" onkeydown="onkeydownFun()"><br>
Last name: <input type="text" id="lname" onkeydown="onkeydownFun()"><br>
</body>
</html>
Output:
2.onkeypress Attribute
The onkeypress attribute is part of the Event Attributes, and can be used on any HTML
elements. The onkeypress attribute fires when the user presses a key (on the keyboard) or a
function is triggered when the user is pressing a key in the input field
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function onkeypressFun()
{
alert("You pressed a key inside the input field");
}
</script>
</head>
<body>
First name: <input type="text" id="fname" onkeypress="onkeypressFun()"><br>
Last name: <input type="text" id="lname" onkeypress="onkeypressFun()"><br>
</body>
</html>
Output:
3.onkeyup Attribute

The onkeyup attribute is part of the Event Attributes, and can be used on any HTML
elements. The onkeyup attribute fires when the user releases a key (on the keyboard) or A
function is triggered when the user releases a key in the input field .
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function onkeyupFun()
{
alert("You released a key inside the input field");
}
</script>
</head>
<body>
First name: <input type="text" id="fname" onkeyup="onkeyupFun()"><br>
Last name: <input type="text" id="lname" onkeyup="onkeyupFun()"><br>
</body>
</html>
Output:

4.Mouse Event Attributes
Mouse event attribute used for mouse action that is move, click, wheel, etc.
onclick The user clicks the mouse on the button then an event occurred.
ondblclick Users double click the mouse then the event occurred.
onmousedown The user presses the mouse button on the element then the event
occurred.
onmousemove The user moves the mouse pointer over the element then the
event occurred.
onmouseout The user moves the mouse outside of the element then the event
occurred.
onmouseover The user moves the mouse over the element then the event
occurred.
onmouseup The user released the mouse button then the event occurred.
onmousewheel Using the mouse wheel user rolls the up and down on element
then the event occurred.
onwheel Using a mouse wheel user roll them up and down then the event
occurred.
1.onclick Attribute
The onclick attribute is part of the Event Attributes, and can be used on any HTML
elements. The onclick attribute fires on a mouse click on the element.

Example:
<html>
<head>
<script type = "text/javascript">
function clickBtn()
{
alert("Hello World")
}
</script>
</head>
<body>
<p>Example of Onclick event</p>
<form>
<input type = "button" onclick = "clickBtn()" value = "click the button" />
</form>
</body>
</html>
Output:

2.ondbclick Attribute
The ondblclick attribute is part of the Event Attributes, and can be used on any HTML
elements. The ondblclick attribute fires on a mouse double-click on the element.
Example:
<html>
<head>
<script type = "text/javascript">
function dbclickBtn()
{
alert("you click the button twice")
}
</script>
</head>
<body>
<p>Example of Onclick event</p>
<form>
<input type = "button" ondblclick= "dbclickBtn()" value = "double click" />
</form>
</body>
</html>
Output:

3.onmousedown Attribute
The onmousedown attribute is part of the Event Attributes, and can be used on any
HTML elements. The onmousedown attribute fires when a mouse button is pressed down on the
element or it can be triggered when the mouse button is pressed down over this paragraph.
Example:
<html>
<head>
<script>
function mouseDown1()
{

document.getElementById("pre1").style.color ="pink";
}
function mouseDown2()
{
alert("Mouse down")
}
</script>
</head>
<body>
<p>Onmousedown Event</p>
<pre id="pre1" onmousedown="mouseDown1()" >
Adding Video:
The syntax of the video is similar to that of audio but several different
attributes can be used beside controls. Attributes like height and width will
specify the size of the screen for the video in pixel, the AutoPlay attribute will
specify the video play automatically as it is ready, the preloads attribute tell the
browser to load the file or files as soon as the document in loaded and controls
attribute displays the play, pause and volume control.
</pre>
<form>
<input type = "button" onmousedown="mouseDown2()" value="submit"/>
</form>
</body>
</html>
Output:

4.onmouseup Attribute
The onmouseup attribute is part of the Event Attributes, and can be used on any HTML
elements. The onmouseup attribute fires when a mouse button is released over the element. or it
can be triggered when the mouse button is released.
Example:
<html>
<head>
<script>
function mouseup1()
{
}
function mouseup2()
{
alert("Mouse butten up")
}
</script>
</head>
<body>
<p>Onmouseup Event</p>
<pre id="pre1" onmouseup="mouseup1()" >
Adding Video:
The syntax of the video is similar to that of audio but
several different attributes can be used beside controls.
Attributes like height and width will specify the size
of the screen for the video in pixel, the AutoPlay attribute
will specify the video play automatically as it is ready,
the preloads attribute tell the browser to load the file or
files as soon as the document in loaded and controls attribute
displays the play, pause and volume control.
</pre>
<form>
<input type = "button" onmouseup="mouseup2()" value="submit"/>
</form>
</body>
</html>
Output:

5. onmousewheel Attribute
The onmousewheel attribute is part of the Event Attributes, and can be used on any HTML
elements. The onmousewheel attribute fires when the mouse wheel is rolled up or down over an
element. he onmousewheel attribute is deprecated, you should use the onwheel attribute instead.
Example:
<html>
<head>
<script>
function onmousewheel1()
{

}
</script>
</head>
<body>
<p>onmousewheel Event</p>
<pre id="pre1" onmousewheel="onmousewheel1()" >
Adding Video:
</pre>
</body>
</html>
Output:
6. onwheel Attribute
Using a mouse wheel user roll them up and down then the event occurred.
The onwheel attribute is part of the Event Attributes, and can be used on any HTML elements.
The onwheel attribute fires when the wheel of a pointing device is rolled up or down over an
element. The onwheel attribute also fires when the user scrolls or zooms on an element by using
a touch pad.

Example:
<html>
<head>
<script>
function onwheel1()
{
}
</script>
</head>
<body>
<p>onwheel Event</p>
<pre id="pre1" onwheel="onwheel1()" >
Adding Video:
</pre>
</body>
</html>
Output:
7. onmousemove and onmouseout Attribute

The onmousemove attribute is part of the Event Attributes, and can be used on any
HTML elements. The onmousemove attribute fires when the pointer is moving while it is over an
element. Similarly, The onmouseout attribute fires when the mouse pointer moves out of an
element.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function mousemove1(x)
{
x.style.height = "64px";
x.style.width = "64px";
}
function mouseout1(x)
{
x.style.height = "32px";
x.style.width = "32px";
}
</script>
</head>
<body>
<p>onmousemove and mouseout Event</p>
<img onmousemove="mousemove1(this)" onmouseout="mouseout1(this)"
src="E:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A online web
technology\practical sem 5\image\lake.jpg" alt="Lake">
</body>
</html>
Output:

Clipboard Event Attributes
This event attributes used for clipboard action: example, cut, copy, pest.
oncopy Using mouse users to copy the content, then the event occurred.
oncut Using a mouse, users cut the content then the event occurred.
onpaste Using a mouse user, paste the content, then an event occurred.
1.oncopy attribute
The oncopy attribute is part of the Event Attributes, and can be used on any HTML
elements. The oncopy attribute fires when the user copies the content of an element.
The oncopy attribute is often used on <input> elements with type="text".
Example:
<!DOCTYPE html>
<html>
<head>
<script>

function oncopyFun1()
{
document.getElementById("p1").innerHTML ="You copied from input text!"
}
{
document.getElementById("p2").innerHTML ="You copied from p tag!"
}
{
document.getElementById("p3").innerHTML ="You copied from text area!"
}
</script>
</head>
<body>
<p>oncopy Event</p>
<input type="text" oncopy="oncopyFun1()" value="hello world">
<p oncopy="oncopyFun2()">welcome</p>
<textarea oncopy="oncopyFun3()" rows="4" cols="50">
The oncopy attribute is part of the Event Attributes, and can be used on any HTML
elements.
The oncopy attribute fires when the user copies the content of an element.
</textarea>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
</body>
</html>
Output:

2.oncut attribute
The oncut attribute is part of the Event Attributes, and can be used on any HTML
elements. The oncut attribute fires when the user cuts the content of an element.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function oncutFun1()
{
document.getElementById("p1").innerHTML ="You cut from input text!"
}
{
document.getElementById("p2").innerHTML ="You cut from text p tag!"
}
{
document.getElementById("p3").innerHTML ="You cut from text area!"
}
</script>
</head>
<body>
<p>oncut Event</p>
<input type="text" oncut="oncutFun1()" value="hello world">
<p oncut ="oncutFun2()">welcome</p>
<textarea oncut="oncutFun3()" rows="4" cols="50">
The oncopy attribute is part of the Event Attributes, and can be used on
any HTML elements.
The oncopy attribute fires when the user copies the content of an element.
</textarea>
<p id="p1"></p>
<p id="p2"></p>
<p id="p3"></p>
</body>
</html>
Output:

3.onpaste attribute
The onpaste attribute is part of the Event Attributes, and can be used on any HTML
elements. The onpaste attribute fires when the user pastes some content in an element.
The onpaste attribute is mostly used on <input> elements with type="text".
Example:
<!DOCTYPE html>
<html>
<head>
<script>

function onpasteFun1()
{
document.getElementById("p1").innerHTML ="You paste to input text!"
}
function onpasteFun3()
{
document.getElementById("p3").innerHTML ="You paste to text area!"
}
</script>
</head>
<body>
<p>oncut Event</p>
<p>Copy this text</p>
<input type="text" onpaste="onpasteFun1()" value=""><br><br><br>
<textarea onpaste="onpasteFun3()" rows="4" cols="50">
</textarea>
<p id="p1"></p>
<p id="p3"></p>
</body>
</html>
Output:

6.Media Event Attributes
This event attribute works on media files like video etc
onabort When media files aborted for download and play again, then an
event occurs.
oncanplay When any media file ready for play, then this trigger is fired.
oncanplaythrough Media file ready to play without buffering and loading.
oncuechange Element changes the cue of <track> then event fired.
ondurationchange The Media file changes the length of time then the trigger is fired.
onemptied If the Media file unavailable and come fatal error, then the trigger is
fired.
onended The Media file comes on endpoint then the trigger is fired.
onerror When an error occurred to get the media file, the trigger is fired
onloadeddata The Media file loads the data then the trigger is fired.
onloadedmetadata The Media file loads the metadata then the trigger is fired.

onloadstart The Media file starts to load then the trigger is fired.
onpause The Media file paused to play again then the trigger is fired.
onplay Media file ready to play, then trigger is fired.
onplaying The Media file starts to play when the trigger is fired.
onprogress This script act when the browser is working on connecting with the
media data.
onratechange If the videos playback speed is changed, then the trigger is fired.
onseeked Users completed moving; otherwise, skip the new position of video.
this attribute set as false.
onseeking The user wants to move; otherwise, skip the new position of the
video. this attribute set as true.
onstalled When the browser suddenly stops to the connection of data, then the
event works.
onsuspend When the web Browser on purpose does not get media data, then
events work.
ontimeupdate When a user changes the video play position like forward and
backward.
onvolumechange To change media volume low to high.
onwaiting If the data load the information, current video stop with buffering
then event works.
1. onplay and onpause Attribute

The onplay attribute is part of the Event Attributes, and can be used on the <audio> and
<video> elements. The onplay attribute defines a script to be run when the audio/video has been
started or is no longer paused. The onpause attribute is used to define a script when the
audio/video has been paused.

The onpause attribute is part of the Event Attributes, and can be used on the <audio> and
<video> elements. The onpause attribute defines a script to be run when the audio/video is
paused either by the user or programmatically. The onplay attribute is used to define a script to
run when the audio/video has been started or is no longer paused.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function onplayFun()
{
document.getElementById('p1').innerHTML = "The video is playing";
}
function onpausefun()
{
document.getElementById('p2').innerHTML = "The video file has been
paused";
}
</script>
</head>
<body>
<p>Play the video.</p>
<video id="myVideo" width="320" height="176" controls onplay="onplayFun()"
onpause="onpausefun()">
<source src = "E:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A online web
technology\practical sem 5\video file\videomp4.mp4" type="video/mp4">
</video>
<p id='p1'></p>
<p id='p2'></p>
</body>
</html>
Output:

Onabort attribute
The onabort attribute is part of the Event Attributes, and can be used on the <audio>,
<video>, <img>, <object> elements. The onabort event occurs when the loading of an
audio/video is aborted. This event occurs when the media data download has been aborted, and
not because of an error.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function onplayFun()
{
document.getElementById('p1').innerHTML = "The video is playing";
}
function onpausefun()
{

document.getElementById('p2').innerHTML = "The vodeo file has been paused";
}
function onabortFun()
{
alert("Video aborted");
}
function myAbort()
{
document.getElementById("myVideo").src = "";
}
</script>
</head>
<body>
<p>Play the video.</p>
<video id="myVideo" width="320" height="176" controls onplay="onplayFun()"
onpause="onpausefun()" onabort="onabortFun()" controls>
<source src = "E:\Academic Stuff\BSc CSIT\5th semester\Web-Technology\A

online web technology\practical sem 5\video file\videomp4.mp4"
type="video/mp4">
</video><br><br>
<button onclick="myAbort()">Abort this Video</button>

<p id='p1'></p>
<p id='p2'></p>
</body>
</html>
Output:

Introduction: Cascading Style Sheets (CSS)
1.Cascading:
Refers to the procedure that determines which style will apply to a certain
section, if you have more than one style rule.
2.Style:
“Style” is a command that you set to tell the browser how a certain section of
your webpage should look or how you want a certain part of your page to look.
You can set things like color, margins, font, etc for things like tables, paragraphs,
and headings.
3.Sheets:
The “sheets” are like templates, or a set of rules, for determining how the
webpage will look.

So, CSS (all together) is a styling language – a set of rules to tell browsers
how your webpage should look. It describes how HTML elements should be
displayed. CSS saves a lot of work. It can control the layout of multiple web pages
all at once. External stylesheets are stored in CSS files. It is removed style
formatting from the HTML page.
A style sheet is a syntactic mechanism for specifying style information. The

most important benefit of style sheet is their capability of imposing consistency on
the style of Web document. For example, they allow author to specify the
presentation style of overall document such that they have same appearance.
A Cascading Style Sheet (CSS) describes how html element are to be

displayed on screen and allows different types of effects to be applied on HTML
document. It is a design language used for making websites presentable by
applying different kinds of color effects, shading effects etc. With the help of CSS,
we can control the color of text, style of fonts, background style and colors,
variation in display etc.
CSS are called cascading style because they can be defined at three different
levels to specify the style of a document. Lower-level style sheet can override
higher level style sheets so the style of the content of an element is determined.
CSS syntax
A CSS comprises of style rules that are interpreted by the browser and then
applied to the corresponding elements in your document. A style rule is made of
three parts…
1. selector

2. Property
3. value
1.Selector
A selector is any html tag on which the style is applied. Example <p> ,<h1>
, <table> etc.
2.Property
It is attribute of the html tag example. Colour, border etc.
3. Value
It is a value assigned to the property like color:blue etc.
You can put CSS style rule syntax as follows:
Selector {property: value}
Here the selector points to the HTML elements you want to style.
Example:
1) P {
Color: red;
Text-align: center;
}
2) h1{background-color: green;}
Diagrammatically it can be explained as follows…

Property Value
h1 {background-color: green;}
selector decleration
Here,
Declaration = {property: value;}

 Property: what aspect you want to change. ex: color, font, margins, etc.
 Value: the exact setting for that aspect. ex: red, italic, 40px, etc.
Inserting CSS:
CSS can be inserted in html file by three different ways:

1. Embedded or Inline
2. Internal
3. External
Inline Style sheet
This is mainly used to apply unique style for a single element. In order to
apply the specific style, we need to assign value to the style attribute of the
individual element.
Inline style sheet applies to the content of a single HTML element and have
precedence over external style sheet. For example: if external CSS has applied
some effect to the HTML element, then that effect value can be changed if
different effect is applied on inline or internal CSS.
Inline CSS appears within the opening tag and apply only to the content of
that element. It is used to apply effect for single element only which defeats one of
the primary advantages of CSS i.e., imposing uniform style on the element of at
least one whole document.

For inline CSS we don’t have to use CSS selector but may increase the
length of code and mixing CSS and HTML code may create hurdle. In inline CSS,
style attribute is used to apply effect on HTML elements.
Hence,
1) An inline CSS is used to apply a unique style to a single HTML element.

2) An inline CSS uses the style attribute of an HTML element.
3) These rules will be applied to the element only.
Syntax:
Style = “property_1: value_1; property_2: value_2; … property_n: value_n;”
Example:
<html>
<head>
<style>
body{ background-color:pink;}
</style>
</head>
<body>
<h1 style="color:maroon; margin-left:40px;">This is a header</h1>
</body>
</html>

Output:
Internal style sheet
It can be used in an individual page to apply the style specifically in that

page. It is applied by using the <style > tag inside the <head> tag.
Internal CSS apply to the whole body of a document and have precedence over
external CSS. It appears in the document’s head section and apply to the entire
body of the document. This is an effective way to impose a uniform style on the
presentation of all the content of a single document.
Syntax:
<style type = “text/css”>
Rule_list
</style>
So,
1) An internal CSS is used to define a style for a single HTML page.
2) An internal CSS is defined in the <head> section of an HTML page, within
a <style> element:

Example:
<html>
<head>
<style>
Body {
background-color:green;
h1{
color: maroon;
margin-left:40px;
</style>
</head>
<body>
<h1>This is a header</h1>
</body>
</html>
Output:

3.External Style Sheet
The external file can be used to apply the style in the entire web site. Any
changes can be made in the external file which is applied to the website directly.
External CSS is written in separate sheet in .css extension and applies to the
body of any number of documents. They are stored separately and reference in all
documents that use them. It separates the html document and CSS sheet. They are
written as text file with the MIME type text/css which can be stored on any
computer on the web. The browser fetches external style sheet just as it fetches
HTML document.
The link tag is used to specify external style sheet. Within link, rel attribute
specify the relationship of linked to the document in which the link appears and
href attributes specify the URL of the style sheet document i.e. specify the location
of the stylesheet.
Syntax:
<link rel=”stylesheet” type = “text/ css” href = “my.css” />

The link should be appear on head of the html document. As it is good to
separate CSS from markup, it is preferable to use external style sheet.
Hence,
1) An external style sheet is used to define the style for many HTML pages.
2) With an external style sheet, you can change the look of an entire web site, by
changing one file!
3) To use an external style sheet, add a link to it in the <head> section of the HTML page:
4) An external style sheet is a separate text file with .css extension. You define all the Style
rules within this text file and then you can include this file in any HTML document using
<link> element.
Example
a.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="b.css">
</head>
<body>
<h1>This is a heading</h1>

<p>This is a paragraph.</p>
</body>
</html>
b.css
body {
background-color: blue;
}
h1 {
color: yellow;
}
p {
color: red;
}
Output:
The <link> Element The <style> Element

The <link> Element
The < link > element is used in web pages to describe the relationship
between two documents; for example, it can be used in an HTML page to specify a
style sheet that should be used to style a page.
It is a very different kind of link than the < a > element because the two
documents are automatically associated — the user does not have to click anything
to activate the link.
The < link > element is always an empty element, and when used with
style sheets it must carry three attributes: type, rel, and href.
< link rel=”stylesheet” type=”text/css” href=”../CSS/b.css” / >

Or
< head >
< title > </title>
< link rel=”stylesheet” type=”text/css” href=”../styles/b.css” / >
< /head >
The rel Attribute
The rel attribute is required and specifies the relationship between the
document containing the link and the document being linked to. The key value for
working with style sheets is stylesheet.
rel= “stylesheet”
The type Attribute
The type attribute specifies the MIME (Multipurpose Internet Mail

Extensions) type of the document being linked to; in this case, we are dealing with
a CSS style sheet, so the MIME type is text/css :
type=”text/css”
The href Attribute
The href attribute specifies the URL for the document being linked to.
href=”../xyz/b.css”
The value of this attribute can be an absolute or relative URL but it is

usually a relative URL because the style sheet is part of the site.
The <style> Element

The < style > element is used inside the < head > element to contain style
sheet rules within a web page, rather than linking to an external document. It is
also sometimes used when a single page needs to contain just a few extra rules that
do not apply to the other pages of the site which all share the same style sheet.
For example.
<!DOCTYPE html>
<html>
<head>
<title> </title>
<style type="text/css">
h1 {color:#FF0000;}
</style >
</head >
<body>
<h1>hgfydg</h1>
<h1>hgfydg</h1>
<h1>hgfydg</h1>
<h1>hgfydg</h1>
</body>
</html>
Advantages of External CSS Style Sheets

 It saves you repeating the same style rules in each page.

 You can change the appearance of several pages by altering just the style sheet rather
than each individual page.
 Once a visitor to your site has downloaded the CSS style with the first page of your site
that uses it, subsequent pages will be quicker to load (because the browser retains a copy
of the CSS style sheet and the rules do not have to be downloaded for every page).
 A style sheet can import and use styles from other style sheets, allowing for modular
development and good reuse.
 If you remove the style sheet, you can make the site more accessible for those with visual
impairments, because you are no longer controlling the fonts and color schemes.
ID and Class Selectors
CSS Selector:
A selector specifies the elements to which the style information is to be

applied i.e. used to select the HTML elements to which style have to applied. Some
CSS selector are:
1. Universal Selector:
It is denoted by asterisk “*” symbol and applies style to all elements in a document. It
selects all the element of web page. If we wanted every element in a document to have a
particular set of properties then we could use: * {property-value list}. For example:
Example:
<html>
<head>
<title> universal selector </title>
*{
color: red;

font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
<p>this is first paragraph </p>
<p> this is second paragraph </p>
</body>
</html>
Output:
2. Type Selector:
This selector is written by its element name and style will be apply for only related
element i.e. property values in the rule apply to all occurrence of the named element. This
selector could be a list of elements separated by comma and in such case, style will be
applied to occurrence of all of the named element. For example:
Example:

<html>
<head>
<title> Type selector </title>
h1,h2{
color: red;
text-align: center;
}
p{
color: blue;
text-align: right;
}
</style>
</head>
<body>
<h1> this is first heading </h1>
<h2> this is second heading </h2>
<p>this is first paragraph </p>
<p> this is second paragraph </p>
</body>
</html>
Output:
3. The Class Selector:

Class selector is denoted by dot “.” and written for element that has attribute
name class. It will change the style for particular class. It allows different occurrence of
the same tag to use different style specification. For example:
Example:
<html>
<head>
<title> class selector </title>
.p1{
color: red;
font-size: 30px;
text-align: center;
}
.p2{
color: blue;
text-align: right;
</style>
</head>
<body>
<p class = “p1”>this is first paragraph </p>
<p class = “p2”> this is second paragraph </p>
</body>
</html>
Output:

4. Id Selector:
An Id selector is denoted by “#” and allows the application of a style to one specific
element. Id is written in attributes of tag and used to select specific element. Its general
form is: # specific-id {property-value list}
For example:
Example:
<html>
<head>
<title> Id selector </title>
<style type ="text/css">
#p1{
color: red;
font-size: 30px;
text-align: center;
}
#p2{
color: blue;
text-align: right;
</style>
</head>
<body>
<p id="p1">this is first paragraph </p>
<p id="p2"> this is second paragraph </p>
</body>
</html>
Output:

5. The Descendent Selector:
The descendent selector is used for applying style to certain descendent of certain
element. The style will apply to element in certain positions in the document i.e. style
will apply to all the elements that are under the content of parent elements. Element B is a
descendent of element A if it appears in content of A i.e. A is ancestor of B. Space is used
to separate the element names. For e.g.
Example:
<html>
<head>
<title> descendent selector </title>
ul li {
display: inline;
color: red;
}
</style>
</head>
<body>
<ul>
<li>car</li>
<ol>
<li>suzuki</li>
</ol>
<li>bus</li>
</ul>
</body>
</html>
In above example, style will apply to all list item (li).
Output:
Another example:
<html>
<head>
<title> descendent selector </title>
#div1 p{
color: red;
font-size: 30 px;
}
</style>
</head>
<body>
<div id = “div1”>

<p> this is paragraph inside division </p>
<span> <p> this is paragraph inside span </p></span>
</div>
<p> this is paragraph outside division </p>
</body>
</html>
In above example, style will apply to all the paragraph that are inside division.
Output:
6. The Child Selector:

This selector is used to apply style for child of particular element i.e. style will
apply only to the element that are inside particular parent class. Greater than symbol “>”
symbol is used for child selector. For example:
Example:
<html>
<head>
<title> child selector </title>
#div1 > p {
color: green;
text-align: right;

}
</style>
</head>
<body>
<p> this is first paragraph inside division </p>
<p> this is second paragraph inside division </p>
<span> <p> this is third paragraph inside </p></span>
<p> this is fourth paragraph inside division </p>
</div>
</body>
</html>
In above example, style will apply only to paragraph 1 2 and 4 because they are
child of division. Style will not apply to paragraph 3 because it is a child of span not of
division.
Output:
7. Adjacent Sibling Selector:

The adjacent sibling selector apply the style to the element that is immediately
below the parent element. Plus “+” symbol is used for adjacent sibling selector. For

Example:
<html>
<head>
#div1 + p {
color: green;
text-align: right;
}
</style>
</head>
<body>
<p> this is fourth paragraph inside division </p>
</div>
<p> this is fifth paragraph outside division </p>
<p> this is sixth paragraph outside division </p>
</body>
</html>
In above example, style will apply to only fifth paragraph because it is immediately
following paragraph of division
Output:

8. General Sibling Selector:
This selector will apply style to all the elements that are sibling of a specified
element. A tidle “~” sign is used for general sibling selector.
For example:
<html>
<head>
<style type ="text/css">
#div1 ~ p {
color: green;
text-align: right;
}
</style>
</head>
<body>
<div id="div1">
</div>
<p> this is third paragraph outside division </p>
<span>
<p> this is fourth paragraph outside division but inside span </p>
</span>
<p> this is fifth paragraph outside division </p>
</body>
</html>
In above example, style will apply to third and fifth paragraph.
Selector Description:
Selector Symbol Description
Universal selector *{ } Apply style to all the element of
web page
Type selector Element name Apply style only to related
like p, h1 etc element
Class selector .p1 Apply style only to the element
that has class name p1
Id selector #p1 Apply style only to the element
that has id p1

Descendent selector Div1 p Apply style to <p> element
which are inside division
Child selector Div1>p Apply style to all <p> elements
for which parent is <div>
element
Adjacent sibling Div1 + p Apply style to <p> element that
selector are immediately after <div>
element
General sibling Div1 ~ p Apply style to every <p>
selector element that are preceded by a
<div>

Unit-1_HTML_and_CSS

Uploaded by

Unit-1_HTML_and_CSS

Uploaded by

Unit-1: HTML and CSS

 HTML stands for Hyper Text Markup Language

How to Write HTML Code and Execute

Simple example of HTML.

By Lec. Teksan Gharti Page 2

By Lec. Teksan Gharti Page 3

By Lec. Teksan Gharti Page 4

An HTML Document is mainly divided into two parts:

<!DOCTYPE html>: This tag is used to tells the HTML version.

By Lec. Teksan Gharti Page 5

 Traditionally, the W3C defined HTML as an application of the Standard Generalized

 SGML is a technology used to define markup languages by specifying the allowed

 A DTD can be declared inside an XML document as inline or as an external

By Lec. Teksan Gharti Page 6

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

There are numerous doctype declarations that are found in HTML

HTML Version !DOCTYPE Declaration

By Lec. Teksan Gharti Page 7

By Lec. Teksan Gharti Page 8

The Document Head

The title Element

<title>Simple HTML Title Example</title>

you will see something like this:

By Lec. Teksan Gharti Page 9

<meta>: Specifying Content Type, Character Set, and More

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >

Other Elements in the head

<base href="http://htmlref.com/basexeample" >

By Lec. Teksan Gharti Page 10

<link rel="stylesheet" media="screen" href="global.css" type="text/css" >

or, more appropriately, linked to from a Web page:

<script type="text/javascript" href="ajaxtcr.js"></script>

The Document Body

By Lec. Teksan Gharti Page 12

Syntactic Difference Between HTML and XHTML: (not in syllabus)

 Quoted Attribute Value:

 Explicit Attribute Values:

Html tag Reference

By Lec. Teksan Gharti Page 14

Some of the commonly used HTML Tags are:

3.Line Break Tag

By Lec. Teksan Gharti Page 15

Example: Demonstration of some commonly used html tags

By Lec. Teksan Gharti Page 16

<h1>Line Breaking Tags</h1>

<h1>Horizental Line Tags</h1>

<h1>Preserve Formating Tags</h1>

<h1>Nonbreaking space Tags</h1>

By Lec. Teksan Gharti Page 17

More about tag references

Tag Description Version

Specifies a comment

<! Specifies the document type

<a> Specifies an anchor used for hyperlink

<abbr> Specifies an abbreviation E.g.

<acronym> Specifies an acronym

<audio> Specifies a sound content 5

<b> Specifies bold text

<big> Specifies big text

<body> Specifies the body element

<br> Inserts a single line break

<button> Specifies a push button

<canvas> For making graphics with a script 5

<caption> Specifies a table caption

<center> Deprecated. Specifies centered text

By Lec. Teksan Gharti Page 18

<colgroup> Specifies groups of table columns

<comment> Puts a comment in the document

<datalist> A list of options for input values 5

<dd> Specifies a definition description

<del> Specifies deleted text

<dfn> Specifiesa definition term

<dialog> Specifiesa dialog box or window 5

<dir> Deprecated. Specifies a directory list

<div> Specifies a section in a document