Scribd
Upload
2 views34 pages

CHSE_12TH_HTMLNote

The document provides an overview of HTML (Hypertext Markup Language), detailing its purpose as a markup language for creating web pages, its structure, and essential tags. It explains the requirements for using HTML, the differences between static and dynamic web pages, and the basic syntax for HTML documents. Additionally, it covers various HTML elements, attributes, and formatting options to enhance web page design.

Uploaded by

SAI INTERNET
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
2 views34 pages

CHSE_12TH_HTMLNote

The document provides an overview of HTML (Hypertext Markup Language), detailing its purpose as a markup language for creating web pages, its structure, and essential tags. It explains the requirements for using HTML, the differences between static and dynamic web pages, and the basic syntax for HTML documents. Additionally, it covers various HTML elements, attributes, and formatting options to enhance web page design.

Uploaded by

SAI INTERNET
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 34

PRAYAS H.S.

SCHOOL
Jajpur Road
CHSE: 2ND Year Science
SUB: Information Technology HTML
HTML (Hypertext Markup Language)
o It stands for Hypertext Markup Language
o It is a language used for developing web pages. It is not a programming language, it is a markup
language. Mark-up means highlighting the text either by underline or different colors, or both. A markup
language is a collection of markup tags. HTML uses markup tags to describe web pages. HTML tags are
surrounded by angle brackets like <HTML>.
o HyperText: HyperText simply means "Text within Text. "Hypertext is the text used to link various web
pages. It is the text on a web page, which on clicking opens a new page.
o Language: it refers to and Language refers to the way of communication between web pages which has
its own syntax and rules.
o Tim Berners-Lee is known as the father of HTML. The first available description of HTML was a
document called "HTML Tags" proposed by Tim in late 1991 (CERN reaseach). The version of HTML is
HTML 1.0, HTML 2.0, HTML 3.2, HTML 4.01, HTML5. HTML5 is the newest version of HyperText Markup
language.
o HTML is text markup language. Therefore, no need to use compiler or interpreter. But, Browsers do
contain something similar to interpreter (called parser). Parser will identify various tags and display
them accordingly
Lets understands What is the meaning of HTML
Requirements of HTML
1. Browser: it is an application software package used to view and explore information on WWW. A list of
web browsers are
a. Internet explorer
b. Netscape navigator
c. Mozilla Firefox
d. Google chrome
e. Opera etc.
2. Editor: Text editor is used for writing HTML codes or tags for creating or developing web pages. The
simple word processor (Notepad) is called a text editor. Some text editors are
a. Notepad
b. Notepad++
c. FrontPage
d. Microsoft Word or OpenOffice Writer
e. Gedit etc.

To create a web page do the following steps:


1. Start your computer or laptop with Linux/Unix or Windows Operating System.
2. Start the Text editor Notepad (Windows Text editor), Notepad++ (freeware), Microsoft Word or
OpenOfiice Writer, Front page (Microsoft), TextEdit (Mac) or gedit (Ubantu).
3. Write the HTML code
4. Save the file with the extension .html
5. Open the saved file which open with browser (internet Explorer, Netscape Navigator, Mozilla Firefox,
Google Chrome Microsoft Edge etc.) to view the information on WWW.
❖ Professional text editors which are, Notepad++, Sublime Text, Vim, etc.
❖ Gedit is a small and lightweight text editor comes pre-installed with GNOME Desktop Environment.
Static and Dynamic Web Pages
Web pages can be either static or dynamic. Static web pages are very simple. They are written in languages such
as HTML, JavaScript, CSS etc. in static web pages, pages remain same until someone changes it manually. In
dynamic web pages, the contents of pages are different for different visitors. These web pages take more time
to load as compared to the static web page. Dynamic web pages are written in languages like AJAX, ASP, CGI,
ASP.NET etc.
Basic structure of HTML documents:
The general structure of HTML has two sections:
1. Head section: This section contains the title and identifies the first part of your HTML coded document.
2. Body Section: This section describes the body content of the page that includes text, graphics and other
HTML elements that provide control and formatting of a page like fonts, paragraph, list and other
elements.
Every HTML page should contain certain standard HTML tags. They are:
TAGS DESCRIPTION SYNTAX
<!DOCTYPE> This tag defines the document type or it instruct the browser about the version of <!DOCTYPE>
HTML.
<HTML> This tag specifies a standard HTML document. Everything written with in these <HTML>
tags. The tag starts with <HTML and ends with </HTML>. If the commands are ……….
not enclosed in tags then a web browser will assume the command as text. ……….
</HTML>

<HEAD> This tag represents the document’s header which can keep title, scripts and <HEAD>
document descriptions. The contents of the head are not displayed. ……
</HEAD>
<TITLE> This tag contains the document title. This tag has to given within the <Head> tag. <TITLE>
The Title should be short less than 64 characters in a Title. …….
</TITLE>

BODY This tag represents the document’s body. This tag includes the text that contains <BODY>
the information about the document that gets displayed on the web page. ..……
</BODY>

Syntax of HTML Document


<!DOCTYPE html>
<html>
<head>
<title> ……..</title>
</head>
<body>
……….
</body>
</html>
Example:
<!DOCTYPE html>
<html>
<head>
<title> Structure of HTML</title>
</head>
<body>
Information Technology
</body>
</html>

HTML Elements

An HTML file is made of elements. These elements are responsible for creating web pages and define content in
that webpage. An element in HTML usually consist of a start tag <tag name>, close tag </tag name> and
content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content
between them.
HTML Tags:
Tag is an element which instructs the web browser, what to show and how to show. Tags are enclosed in
angular brackets (<>). HTML tags are two types:
1. Paired Tag: It has set of two commands that is starting (<>) and ending (</>) commands or tags. The first
tag (<H1>) in a pair is the start tag, the second tag (</H>) is the end tag. Starts and end tags are also
called opening and closing tags.
Example: <H1>….. </H2>.
2. Empty/singular tag: it is stand alone tag or singular tag. It has no ending tag. Sometimes it is called
unpaired tag.
Example: <BR>, <HR>
What is attribute?
o Attribute provides additional information like formatting effects, alignment, colors etc. Some tags can
have attributes.
o Attributes should always be applied with start tag.
o You can add multiple attributes in one HTML element, but need to give space between two attributes.
Body Tag
This tag represents the document’s body. This tag includes the text that contains the information about the
document that gets displayed on the web page. Body tag has various attributes.
Syntax:
<Body>…..</Body>
Different attributes of body tag
Attribute Description
Bgcolor It is used to change the default background color
Background It is used to specify the image as the background
Text It changes the body text color.
Leftmargin Sets the left margin of the text.
Topmargin Sets the top margin of the text
Link, alink, vlink Used to select the color of links in the web page
Example:
<!DOCTYPE html>
<html>
<head>
<title> Structure of HTML</title>
</head>
<body bgcolor="blue">
Information Technology
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title> Structure of HTML</title>
</head>
<body background="C:\Users\mansh\Desktop\download.jpg">
Information Technology
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title> Structure of HTML</title>
</head>
<body bgcolor="blue" text="white">
Information Technology
</body>
</html>

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Body Formatting</TITLE>
</HEAD>
<BODY topmargin="50" leftmargin="50">
Welcome to HTML Page
</BODY>
</HTML>
Example:

Heading element
The HTML heading tags are used to create headings for the content of a webpage. These tags are typically
placed inside a body tag. HTML offers six heading tags, from <h1> to <h6>, each heading in a different font size.
Syntax:
<Hn>…..</Hn>
<!DOCTYPE html>
<html>
<head>
<title> Structure of HTML</title>
</head>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
</body>
</html>

Paragraph element
HTML <p> tags are used to write paragraph statements on a webpage. They starts wit the <p> tag and
end with </p>This is a container tag <p> and </p>. The default paragraph alignment is left.
Syntax:
<p>……</p>
Example:
<!DOCTYPE html>
<html>
<head>
<title> Structure of HTML</title>
</head>
<body>
<p> HTML is a language for specifying how text and graphics appear on a web page.</p>
</body>
</html>
Output:

Attributes of the paragraph element


<p align =left> - this is left align
<p align =right> - this is right align
<p align =center> - this is center align
<p align =justified> - this is justify align
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> PARAGRAPH FORMATTING</TITLE>
</HEAD>
<BODY>
<P align="left"> The text displayed Left align</p>
<P align="Center"> The text displayed Left align</p>
<P align="right"> The text displayed Left align</p>
</BODY>
</HTML>

Line Break (<BR>)Tag: The HTML <BR> tag is used to insert a single line break and does not require a closing tag
in HTML. The <BR \> element is an empty tag.
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Line Break</TITLE>
</HEAD>
<BODY>
<P> Hello!<BR>
How are you?</P>
</BODY>
</HTML>

<HR> Tag (Horizontal Ruler): It is used to divide a page into sections by creating horizontal line that spans from
the left to the right side of the page. This is an empty tag and does not require a closing tag.
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Horizontal Ruler</TITLE>
</HEAD>
<BODY>
<P> This is First paragraph</P>
<HR />
<P> This is Second paragraph</P>
</BODY>
</HTML>
Attributes of <HR> tag:
Size: The attribute size is used to determine the thickness of horizontal ruler. The default value is 2 pixels.
Width: The attribute width is used to determine the horizontal width of horizontal ruler. The default width
value is equal to the page width.
Noshade: The noshade attribute is used to produce a soild blank line without shade.
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Horizontal Ruler</TITLE>
</HEAD>
<BODY>
<P> This is First paragraph</P>
<HR size="4" width="70%">
<P> This is Second paragraph</P>
</BODY>
</HTML>

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Horizontal Ruler</TITLE>
</HEAD>
<BODY>
<P> This is First paragraph</P>
<HR width="70%" noshade>
<P> This is Second paragraph</P>
</BODY>
</HTML>

Comments: HTML Comments are used to add notes or explanations in the HTML code that are not displayed by
the browser. The comments are enclosed between <! - ……. ->.
Example;
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> Comments</TITLE>
</HEAD>
<BODY>
<P> This is First paragraph</P>
<BR> <!- This tag create a new line->
<P> This is Second paragraph</P>
</BODY>
</HTML>

Text Format
HTML Formatting is a process of formatting text for better look and feel.
Following is the list of HTML formatting text.
Tag name Description Syntax

<b> This tag specifies that the text should be displayed in bold <b>…</b>
face.

<strong> This is a logical tag, it work same as the <b> tag. The text <strong>
displayed in bold face which tells the browser that the text ……..
is important. </strong>

<i> This tag specifies that the text should be displayed italic <i>…..</i>
font.

<em> This is a logical tag which is used to display content in italic. <em>…</em>
Emphasized text

<mark> This tag is used to highlight text. <mark>….</mark>

<u> This tag specifies that the enclosed text should be <u>……</u>
underlined.

<tt> This tag specifies that the text should be displayed in fixed <tt>…..</tt>
width typewriter font. (not supported in HTML5)

<strike> This tag specifies that the enclosed text should be displayed <strike>….</strike>
with a horizontal line.. (Not supported in HTML5)

<sup> It displays the content slightly above the normal line with <sup>….</sup>
smaller font.

<sub> It displays the content slightly below the normal line with <sub>….</sub>
smaller font.

<blink> This tag states that the selected text to blink on the viewing <blink>…..</blink>
page. (Only supported Netscape Navigator browser).

<big> This specifies that the enclosed text should be displayed <big>….</big>
using a bigger font.

<small> This specifies that the enclosed text should be displayed <small>….</small>
using a smaller font.

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> PARAGRAPH FORMATTING</TITLE>
</HEAD>
<BODY>
<B> Text appear Bold</B><BR>
<I> Text appear in Italic</i><BR>
<U> Text appear underlined</U><BR>
<BIG>Text appear bigger</BIG><BR>
<SMALL> Text appear smaller</SMALL><BR>
<STRIKE> Text appear crossed out</STRIKE><BR>
Class 12<SUP>TH</SUP><BR>
10<SUB>2</SUB><BR>
<TT> Text appear in typewritter font</TT>
</BODY>
</HTML>

Font tag
This tag plays an important role in the web page to create an attractive and readable web page. The font tag is
used to change the face of the font, color and size of the text.
Syntax:
<FONT>…….</FONT>
Attributes of the Font Tag
• FACE: This attribute allows you to change of the face of the HTML document. For example, Arial, Calibri,
Times New Roman etc.
• COLOR: This attribute define the text color to be set.
• SIZE: This attribute defines the size of the font
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEXT FORMATTING</TITLE>
</HEAD>
<BODY>
<P><FONT FACE="Times New Roman" SIZE="24" COLOR="Red"> Welcome to HTML
World</FONT></P>
</BODY>
</HTML>
Table Tag:
HTML< table> tag is used to display data in tabular form. A table is divided into rows with the <tr> tag and each
row is divided into data cells using the <td> tag. A data cell can contain text, images, lists, paragraphs, forms,
horizontal ruler, table and so on. This tag opening with <table> and closing with </table>.
Different tags are used inside HTML Table Tags:
Tag Description Syntax
<tr> It defines a row in a table. <tr>…..</tr>
<th> It defines a header cell in a table. <th>…..</th>
<td> It defines a cell in a table. <td>…..</td>
<caption> It defines the table caption. <caption>…..</caption>
<tbody> It is used to group the body content in a <tbody>…..</tbody>
table.
<thead> It is used to group the header content in a <thead>……</thead>
table.
<tfooter> It is used to group the footer content in a <tfooter>…..</tfooter>
table.

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEXT FORMATTING</TITLE>
</HEAD>
<BODY>
<TABLE>
<CAPTION> Student Record </CAPTION>
<TH>NAME</TH>
<TH>MARKS</TH>
<TR>
<TD>Rahul</TD>
<TD>99</TD>
</TR>
<TR>
<TD> Rohit</TD>
<TD> 100</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Attribute of <Table> tag:


• border: You can specify the border using border attribute.
• bgcolor: you can set background color for whole table or just for one cell.
• background: You can set background image for whole table or just one cell.
• cellspacing: this attribute defines the width of the border.
• cellpadding: this attribute represents the distance between cell borders and content within cell.
• width: this attribute is used for change the width of the table.
• height: this attribute is used for change the height of the table.
• bordercolor: This attribute specify the border color.
• colspan: this attribute is used to merge two or more column into a single column.
• rowspan: this attribute is used to merge two or more rows into a single row.
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEXT FORMATTING</TITLE>
</HEAD>
<BODY>
<TABLE border=2>
<CAPTION> Student Record </CAPTION>
<TH>NAME</TH>
<TH>MARKS</TH>
<TR>
<TD>Rahul</TD>
<TD>99</TD>
</TR>
<TR>
<TD> Rohit</TD>
<TD> 100</TD>
</TR>
</TABLE>
</BODY>
</HTML>

<HTML>
<HEAD>
<TITLE> TEXT FORMATTING</TITLE>
</HEAD>
<BODY>
<TABLE border=2 cellpadding=30 cellspacing=10 bordercolor="red">
<CAPTION> Student Record </CAPTION>
<TH>NAME</TH>
<TH>MARKS</TH>
<TR>
<TD>Rahul</TD>
<TD>99</TD>
</TR>
<TR>
<TD> Rohit</TD>
<TD> 100</TD>
</TR>
</TABLE>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TABLE</TITLE>
</HEAD>
<BODY>
<TABLE border=2 bordercolor="red" width=400 height=100>
<CAPTION> Student Record </CAPTION>
<TH>NAME</TH>
<TH>MARKS</TH>
<TR>
<TD>Rahul</TD>
<TD>99</TD>
</TR>
<TR>
<TD> Rohit</TD>
<TD> 100</TD>
</TR>
</TABLE>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TABLE</TITLE>
</HEAD>
<BODY>
<TABLE border=2 bordercolor="red" width=400 height=100>
<TR>
<TH colspan="2">Name</TH>
<TH>Age</TH>
</TH>
<TR>
<TD>Jill</TD>
<TD>Smith</TD>
<TD>43</TD>
</TR>
<TR>
<TD>Eve</TD>
<TD>Jackson</TD>
<TD>57</TD>
</TR>
</TABLE>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TABLE</TITLE>
</HEAD>
<BODY>
<TABLE border=2 bordercolor="red" width=400 height=100>
<TR>
<TH>Name</TH>
<TD>Jill</TD>
</TR>
<TR>
<TH rowspan="2">Phone</TH>
<TD>555-1234</TD>
</TR>
<TR>
<TD>555-8745</TD>
</TR>
</TABLE>
</BODY>
</HTML>
List tag: An HTML list allows you to organize data on web pages into an ordered or unordered format to make
the information easier to read. There are three types of list in HTML:
• Unordered List <UL>
• Ordered List <OL>
• Description List <DL>
Unordered list <UL> tag: An unordered list is a collection of related items that have no special order or
sequence. This list created by using <UL> tag. Each item in the list is marked with a bullet. Each list item starts
with the <LI> tag.
Syntax:
<UL>…….</UL>
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>LIST</TITLE>
</HEAD>
<BODY>
<UL>
<Li>Keyboard
<LI>Mouse
<LI>Scanner
<LI>Joystick
</BODY>
</HTML>

Attribute of <UL> tag:


• type: you can use the type attribute to specify the type of bullet you like.

Syntax: <UL type=value>…. </UL>


Value Description
Disc Sets the list item marker to a bullet (default)
Circle Sets the list item marker to a circle
Square Sets the list item marker to a square
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Bullets List</TITLE>
</HEAD>
<BODY>
<UL type="disc">
<Li>Keyboard
<LI>Mouse
<LI>Scanner
</UL>
<UL type="Square">
<Li>Monitor
<LI>Printer
</UL>
<UL type="circle">
<Li>Hard disk
<LI>CD
</UL>
</BODY>
</HTML>

Ordered List: An ordered list can be numerical or alphabetical. This list is created by using <OL> tag. The
numbering starts at one and is incremented by one. Each list item starts with the <li> tag.
Syntax:
<OL>…..</OL>
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Bullets List</TITLE>
</HEAD>
<BODY>
<OL>
<LI> BCA
<LI> MCA
<LI> M.Tech
</OL>
</BODY>
</HTML>

Attribute of <OL> tag


• type: You can display different kinds of ordered lists by using the type attribute.
• start: you can use start attribute for specify the starting point of numbering you need.
Value Description Example
“1” Default case numeral <ol type= “1”>
“I” Upper case Roman Numerals <ol type= “I”>
“i” Lower case Roman Numerals <ol type= “i”>
“a” Lower case letters <ol type= “a”>
“A” Upper case letters <ol type= “A”>

Using start attribute


<ol type= “1” start= “4”> Numerals starts with 4
<ol type= “I” start= “4”> Numerals starts with IV
<ol type= “i” start= “4”> Numerals starts with iv
<ol type= “a” start= “4”> Numerals starts with d
<ol type= “A” start= “4” Numerals starts with D
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Ordered List</TITLE>
</HEAD>
<BODY>
<OL Type="A">
<LI> BCA
<LI> MCA
<LI> M.Tech
</OL>
<OL Type="a">
<LI> BCA
<LI> MCA
<LI> M.Tech
</OL>
<OL Type="I">
<LI> BCA
<LI> MCA
<LI> M.Tech
</OL>
</OL>
</BODY>
</HTML>

Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Ordered List</TITLE>
</HEAD>
<BODY>
<OL Type="A" start= "4">
<LI> BCA
<LI> MCA
<LI> M.Tech
</OL>
</OL>
</OL>
</BODY>
</HTML>

Definition Lists: These lists are used to contain terms and their corresponding descriptions.
Definition list makes use of the following three tags:
• <DL> : Define the start of the list
• <DT> : A term
• <DD> : Term definition
• </DL> : Define the end of the list
Syntax: <DL>……</DL>
Example:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Definition List</TITLE>
</HEAD>
<BODY>
<DL>
<DT> HTML
<DD> This stands for HyperText Markup Language
<DT> HTTP
<DD> This stands for Hypertext Transfer Protocol
</DL>
</BODY>
</HTML>

Hyperlink
HTML hyperlink also known as link that are defined by <a> tag which stands for “anchor”. These links are
essential for navigation from one page to another page. The most important attribute of the <a> element is
the href attribute, which indicates the link's destination. It can be represented by an image or text or other
element.
By default, links will appear as follows in all browsers:

• An unvisited link is underlined and blue


• A visited link is underlined and purple
• An active link is underlined and red
Example:
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Hyperlink</TITLE>
</HEAD>
<BODY>
<a href="https://www.w3schools.com">W3school</a>

</BODY>
</HTML>

Example

How to link to an email address:


<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE>Hyperlink</TITLE>
</HEAD>
<BODY>
<a href="mailto:[email protected]">Send email</a>

</BODY>
</HTML>

Form <form> tag:


An HTML form is used to collect user input. For example, during user registration you would like to collect information
such as name, email address, credit card etc. a form will take input from the site visitor and then will send it to back-end
application such as CGI, ASP, Script or PHP script etc. The <form> element is a container for different types of input
elements such as text field, checkbox, radio button etc.
Syntax:
<form>
<!--form elements-->
</form>
Form attribute:
The most frequently used form attributes are:
action: Backend script ready to process your passed data.
method: method to be used to upload data. The most frequently used GET and POST methods.
target: Specify the target window where the result of the script will be displayed. It takes values like blank, self,
_parent etc.
enctype: you can use the enctype attribute to specify how the browser encodes the data before it sends it to
the server.
HTML Form Controls:
There are different types of form controls that you can use to collect data using HTML form.
• Text Input Control
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Clickable Buttons
• Submit and reset Button
Text Input Controls
There are three types of text input used on forms:
➢ Single – line text input controls: This control is used for items that require only one line of user input,
such as search boxes or names. They are created using HTML <input> tag.
➢ Password input controls - This is also a single – line text input but it masks the character as soon as a
user enters it. They are created using HTML <input> tag.
➢ Multiline text input controls: This is used when the user is required to give details that may be longer
than a single sentence. Multi line input controls are created using HTML <textarea>.
The <input> Element
The HTML <input> element is the most used form element. An <input> element can be displayed in many ways,
depending on the type attribute.
Attribute Example Description
type <input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for
selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting
zero or more of many choices)
<input type="submit"> Displays a submit button (for
submitting the form)
<input type="button"> Displays a clickable button
Name type="text"name="lname" Used to give a name to the control
which is sent to he server to be
recognized and get the value
value type="checkbox" name="vehicle3" value="Boat"> This can be used to provide an
initial value inside the control
Size type="checkbox" name="vehicle3" value="Boat" Allows to specify the width of the
size=20> text-input control in terms of
characters
maxlength type="checkbox" name="vehicle3" value="Boat" Allows to specify the maximum
size=20 maxlength=60> number of characters a user can
enter into the text box
Text Fields
In an HTML form, we use the <input> tag by assigning type attribute value to text to input single line input.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEXT FORMATTING</TITLE>
</HEAD>
<BODY>
<form>
Enter your name <br>
<input type="text" name="username">
</form>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> TEXT FORMATTING</TITLE>
</HEAD>
<BODY>
<form>
First Name: <input type="text" name="firstname"size=20 maxlength=40> <br/>
Last Name: <input type="text" name="lastname" size=20 maxlength=40> <br/>
</form>
</BODY>
</HTML>

Radio Button Control

The radio button is used to select one option from multiple options. It is used for selection of gender, quiz
questions etc.

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> TEXT FORMATTING</TITLE>

</HEAD>

<BODY>

<form>
Gender:

<input type="radio" id="gender" name="gender" value="male">Male

<input type="radio" id="gender" name="gender" value="female">Female <br/>

</form>

</BODY>

</HTML>

Checkbox Control
The checkbox control is used to check multiple options from given checkboxes. It used to choose more options
at a time. They are also created using HTML <input> tag but type attribute is set to checkbox. You can use
checked attribute if you want to select it by default.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM</TITLE>
</HEAD>
<BODY>
<form>
<H1>Select Game</H><BR>
<input type="checkbox" id="cricket" name="cricket" value="cricket">Cricket <BR>
<input type="checkbox" id="football" name="football" value="football">Football<BR>
<input type="checkbox" id="hockey" name="hockey" value="hockey">Hockey
</form>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM</TITLE>
</HEAD>
<BODY>
<form>
<H1>Select Game</H><BR>
<input type="checkbox" id="cricket" name="cricket" value="cricket" checked>Cricket <BR>
<input type="checkbox" id="football" name="football" value="football">Football<BR>
<input type="checkbox" id="hockey" name="hockey" value="hockey">Hockey
</form>
</BODY>
</HTML>

Select Box control


The <select> tag in HTML is used to create a drop-down list. It provides option to list down various options in
the from of drop down list, from where user can select one or more options. Selected attribute specifies that
this option should be the initially selected value when the page loads.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM</TITLE>
</HEAD>
<BODY>
<form>
<select>
<option value="IT">IT</option>
<option value="PHYSICS">PHYSICS</option>
<option value="CHEMESTRY">CHEMESTRY</option>
<option value="MATH">MATH</option>
</select>

</form>

</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM </TITLE>
</HEAD>
<BODY>
<form>
<select name= "dropdown">
<option value="IT">IT</option>
<option value="PHYSICS" selected>PHYSICS</option>
<option value="CHEMESTRY">CHEMESTRY</option>
<option value="MATH">MATH</option>
</select>
</form>
</BODY>
</HTML>

Multiline text input control (TextArea Box):


This is used when the user is required to give details that may be longer than a single sentence. Multiline input
controls are created using HTML <textarea> tag.
Attribute:
name: used to give the name to the control which is sent to the sercver to be recognized and get the value.
rows: Indicate the number of rows of text area box
cols: indicates the number of columns of text area box.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM </TITLE>
</HEAD>
<BODY>
<form>
Description:<BR>
<textarea rows="5" cols="50" name="description"> Enter description here...
</textarea>
</form>
</BODY>
</HTML

File Select Box:


Submit and reset, Button
HTML <input type="submit"> are used to add a submit button on web page. When user clicks on submit button,
then form get submit to the server. The reset button resets the form-data to its initial values. The button is a
clickable button.
Attribute:
submit: it creates a button that automatically submits a form
reset: it creates a button that automatically resets from controls to the initial values.
button: it creates a button that is used to trigger a client-side script when the user clicks that button.
<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM </TITLE>
</HEAD>
<BODY>
<form>
<input type= "submit" name= "submit" value="Submit">
<input type= "reset" name= "reset" value="Reset">
<input type= "button" name= "ok" value="OK">
</form>
</BODY>
</HTML>

<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> FORM </TITLE>
</HEAD>
<BODY>
<form>
<label for="name">Enter name</label><br>
<input type="text" id="name" name="name"><br>
<label for="pass">Enter Password</label><br>
<input type="Password" id="pass" name="pass"><br>
<input type="submit" value="submit">
</form>
</BODY>
</HTML>

HTML Form Example


<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<h2>Registration form</h2>
<form>
<fieldset>
<legend>User personal information</legend>
<label>Enter your full name</label><br>
<input type="text" name="name"><br>
<label>Enter your email</label><br>
<input type="email" name="email"><br>
<label>Enter your password</label><br>
<input type="password" name="pass"><br>
<label>confirm your password</label><br>
<input type="password" name="pass"><br>
<br><label>Enter your gender</label><br>
<input type="radio" name="gender" value="male"/>Male <br>
<input type="radio" name="gender" value="female"/>Female <br/>
<input type="radio" name="gender" value="others"/>others <br/>
<br>Enter your Address:<br>
<textarea></textarea><br>
<input type="submit" value="sign-up">
</fieldset>
</form>
</body>
</html>

HTML5 added several new input types:


Input Type color: gives the user a color picker to choose a color.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Choose your favorite color<input type= "color" value= "#b97a59">
</form>
</body>
</html>

Input type DateTime: an element to choose both date and time.


<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Local time<input type="datetime-local" value= "2022-11-05T11:54">
</form>
</body>
</html>

Input Type Email: A field for entering e-mail address.


<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Enter Email Id: <input type="email" value="[email protected]">
</form>
</body>
</html>

Input Type Month: user select a on the and year depending on the browser support, a date picker can show up
in the input field.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Birthday (month and year):
<input type="month" value="2022-11">
</form>
</body>
</html>

Input type number: You can also set restrictions on what numbers are accepted.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Quantity (between 1 and 5):
<input type="number" id="quantity" name="quantity" min="1" max="5">
</form>
</body>
</html>

Input Type search: It is used for search field.


<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Search Google:
<input type="search" value="googlesearch">
</form>
</body>
</html>

Input Type Time: It allows user to select a time. Depending on the browser support, a time picker can show up
in the input field.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Select Time:
<input type="time" name="usr-time">
</form>
</body>
</html>

Input Type Url: it is used for input fields that should contain a URL address. Depending on browser support, the
url field automatically validated when submitted.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Add your home page:
<input type="url" name="homepage">
</form>
</body>
</html>

Input Type Week: it allows the user to select a week and year. Depending the browser support, a data picker
can show up in the input field.
<!DOCTYPE html>
<html>
<head>
<title>Form in HTML</title>
</head>
<body>
<form>
Select a week:
<input type="week" name="week_year">
</form>
</body>
</html>

HTML Image
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.
<!DOCTYPE>
<html>
<body>

<img src="good-morning.jpg" alt="Good Morning Friends"/>


</body>
</html>
HTML4
The HTML supports for dynamic contents:
• HTML supports JavaScript
• HTML supports the Document Object Model (DOM)
• HTML supports HTML events
• HTML supports Cascading Style Sheets (CSS)
JavaScript: It is the scripting for HTML. JavaScript (JS) is the world’s most popular lightweight, interpreted
compiled programming language. It is also known as a scripting language for web pages.
HTML DOM: The HTML DOM defines a standard set of objects for HTML and a standard way to access and
manipulate them. When a web page is loaded, the browser creates a Document Object Model of the page.
HTML Events: The Event Model is a part of HTML DOM. It defines a standard way to handle HTML events.
CSS: It can control the style and layout of web pages. CSS describes how HTML elements are to be displayed on
screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at
once.

DHTML (Dynamic Hypertext Markup Language): Dynamic HTML is not a markup or programming language but it
is a term that combines the features of various web development technologies for creating the web pages
dynamic and interactive.
Components of Dynamic HTML
• DHTML consists of the following four components or languages:
• HTML 4.0
• CSS
• JavaScript
• DOM.
HTML 4.0
HTML is a client-side markup language, which is a core component of the DHTML. It defines the structure of a
web page with various defined basic elements or tags.
CSS
CSS stands for Cascading Style Sheet, which allows the web users or developers for controlling the style and
layout of the HTML elements on the web pages. CSS describes how HTML elements are to be displayed on
screen, paper, or in other media. CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
JavaScript
JavaScript is a scripting language which is done on a client-side. The various browser supports JavaScript
technology. DHTML uses the JavaScript technology for accessing, controlling, and manipulating the HTML
elements. The statements in JavaScript are the commands which tell the browser for performing an action.
Syntax:
<script>
//JS code
<script>
DOM
DOM is the document object model. It is a w3c standard, which is a standard interface of programming for
HTML. It is mainly used for defining the objects and properties of all elements in HTML.
Uses of DHTML
3. Following are the uses of DHTML (Dynamic HTML):
4. It is used for designing the animated and interactive web pages that are developed in real-time.
5. DHTML helps users by animating the text and images in their documents.
6. It allows the authors for adding the effects on their pages.
7. It also allows the page authors for including the drop-down menus or rollover buttons.
8. This term is also used to create various browser-based action games.
9. It is also used to add the ticker on various websites, which needs to refresh their content automatically.
Features of DHTML
1. Following are the various characteristics or features of DHTML (Dynamic HTML):
2. Its simplest and main feature is that we can create the web page dynamically.
3. Dynamic Style is a feature, that allows the users to alter the font, size, color, and content of a web page.
4. It provides the facility for using the events, methods, and properties. And, also provides the feature of
code reusability.
5. It also provides the feature in browsers for data binding.
Difference between HTML and DHTML
HTML (Hypertext Markup language) DHTML (Dynamic Hypertext Markup language)
1. HTML is simply a markup language. 1. DHTML is not a language, but it is a set of
technologies of web development.
2. It is used for developing and creating web 2. It is used for creating and designing the
pages. animated and interactive web sites or pages.
3. This markup language creates static web 3. This concept creates dynamic web pages.
pages.
4. It does not contain any server-side 4. It may contain the code of server-side scripting.
scripting code.
5. The files of HTML are stored with the 5. The files of DHTML are stored with the .dhtm
.html or .htm extension in a system. extension in a system.
6. A simple page which is created by a user 6. A page which is created by a user using the
without using the scripts or styles called as HTML, CSS, DOM, and JavaScript technologies
an HTML page. called a DHTML page.
7. This markup language does not need 7. This concept needs database connectivity
database connectivity. because it interacts with users

XML (eXtensible Markup Language):


o XML is a mark up language.
o XML is designed to store and transport data.
o XML is not a replacement for HTML.
o XML is designed to be self-descriptive (it has sender information, receiver information, heading,
message body)
o XML is designed to carry data, not to display data.
o XML tags are not predefined. You must define your own tags.
o XML is platform independent and language independent.
o It is free. It can be written with a simple text editor.
o XML is a W3C recommendation
Example of XML Document
XML documents uses a self-describing and simple syntax:
<?xml version="1.0" encoding="ISO-8859-1"?>
<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>
Difference between HTML and XML
HTML XML

HTML is used to display data and XML is used to transport and store
focuses on how data looks. data. It focuses on what data is.
HTML is a markup language itself. XML provides a framework to define
markup languages.
HTML is not case sensitive. XML is case sensitive.
HTML is a presentation language. XML is neither a presentation language
nor a programming language.
HTML has its own predefined You can define tags according to your
tags. need.
In HTML, it is not necessary to use XML makes it mandatory to use a
a closing tag. closing tag.
HTML is static because it is used XML is dynamic because it is used to
to display data. transport data.
HTML does not preserve XML preserve whitespaces.
whitespaces.
XML Syntax Rules:
• XML document must have a Root (Parent) Element
<root>
<child>
<subchild>…….</subchild>
</child>
</root>
Example:
<?xml version=”1.0” encoding=”UTF-8”>
<note>
<to> Asit</to>
<from>kunu</from>
<heading>Remainder</heading>
<body> Don’t forget me this weelkend!</body>
</note>
• All XML element must have a closing tag
• It is illegal to omit the closing tag
• XML tags are case sensitive
• XML elements must be properly nested
<b><i> prayas </b></i>….. incorrect
<b><i> prayas </i></b>….. correct
<i> element must close inside <b> tag.
• XML attribute value must be quoted
<note date=”12/11/2022”>
<to> Asit</to>
<from>kunu</from>
</note>
XML and XQuery
XQuery is a language for finding and extracting elements and attributes from XML documents.
• XQuery is the language for querying XML data
• XQuery for XML like SQL for database
• XQuery supported by all major databases
• XQuery is W3C Recommendation
XQuery can be used to:
• Extract information to use in a web service
• Generate summary reports
• Transform XML data to HTML
• Search web document for relevant information
Benefits of XML
The main benefit of XML is that it can be used to share data between two entirely platforms. For example, we
can take data from a database like MySQL, convert it into XML and then share with any other platform like MS
Excel, HTML etc. This way communication between two potentially different platforms is achieving using XML.

You might also like