You are on page 1of 21

HTML NOTES BASED ON REVISED SYLLABUS

HTML:-

(i)HTML stands for HYPER TEXT MARKUP language & it is most widely used language for developing
webpages.

(ii)HTML is a markup language, it used various kinds of markup tags to describe webpages. The
markup tags are simply referred as HTML tags or just tags.

ANALYSIS OF HTML TAG

HYPERTEXT-Hypertext refers to the way in which the webpages (HTML documents) are linked
together. So the links available on a webpage is called as Hypertext.

MARKUP-HTML is simply used to “mark-up” a text document with tags that tell a web browser how
to structure it to display.

Features of HTML:

 It is easy to learn and easy to use.


 It is platform independent.
 Images, video and audio can be added to a web page.
 It is a markup language.
 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.
 HTML is a case-insensitive language, which means we can use tags either in lower-case or upper-
case

Advantages:

 HTML is used to build websites.


 It is supported by all browsers.
 It can be integrated with other languages like CSS, JavaScript etc.
Disadvantages:

 HTML can only create static webpages. For dynamic webpages, other languages have to be
used.
 A large amount of code has to be written to create a simple web page.
 Security feature is not good.

An HTML document can be created using any text editor . Save the text file
using .html or .htm. Once saved as an HTML document, the file can be opened as a webpage in
the browser.

HTML page structure: The basic structure of an HTML page is laid out below. It contain the
essential building-block elements (i.e. doctype declaration, html, head, title, and body
elements) upon which all webpages are created
<!DOCTYPE html> - HTML <!DOCTYPE> tag is used to inform the browser about the
version of HTML used in the document. It is called as the document type declaration (DTD).

<HEAD> - The HTML head tag is used for indicating the head section of the HTML document. The
head can contain other HTML tags that provide informations about the document, such as title,
description, keywords etc. Most of this information is not displayed in the browser(except the title
which usually appears in the browser’s title bar) but can be useful for search engines.

<TITLE>- HTML <title> tag is used for specifying the title of the HTML document. The title appears in
the title bar of the web browser window.

<BODY>- HTML <body> tag defines the main content of an HTML document which displays on the
browser. It can contain text content, paragraphs, headings, images, tables, links, videos, etc

Elements and Tags -


HTML uses predefined tags and elements which tell the browser how to properly display the
content.
*****REMEMBER*****
Remember to include closing tags. If omitted, the browser applies the effect of the opening tag
until the end of page

Generally there are 2 types of tags

(i)Paired tag- A paired tag has two sets of commands i.e starting tag & ending tag
The first tag <H1> in a pair is the start tag & the second tag </H1> is the end tag. These are also
called as opening & closing tags as well.
(ii)Unpaired tag – Also known as singular tag does not have a closing or companion tag. That’s why it
is also called as stand-alone tag.
Eg.<br> , <hr>

DHTML- DHTML stands for Dynamic Hypertext Markup language i.e., Dynamic HTML.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:
o HTML 4.0
o CSS
o JavaScript
o DOM.
Difference between HTML & DHTML

HTML DHTML
HTML is a markup language DHTML is a collection of technologies.
HTML is used to create static webpages DHTML is capable of creating dynamic
webpages.
HTML cannot be used to create animations DHTML is used to create animations and
and dynamic menus dynamic menus
HTML sites are slow upon client-side DHTML sites are comparatively faster.
technologies
Web pages created using HTML are rather DHTML uses HTML, CSS, and Javascript which
simple and have no styling as it uses only one results in a much better and way more
language presentable webpage
HTML cannot be used as server side code DHTML used as server side code.
HTML needs no database connectivity DHTML needs database connectivity
Files in HTML are stored using .htm or .html DHTML uses .dhtm extension.
extension

HTML Heading
A HTML heading or HTML <h> tag can be defined as a title or a subtitle which you want to display
on the webpage. When you place the text within the heading tags <h1>.........</h1>, it is
displayed on the browser in the bold format and size of the text depends on the number of
heading.
There are six different HTML headings which are defined with the <h1> to <h6> tags, from highest
level h1 (main heading) to the least level h6 (least important heading).
h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading
and h6 is used for least important.
Eg:-
<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>
HTML <br> tag –
The HTML <br> tag is used to give the single line break. <br> tag is used is there is a requirement
to start from new line.
It is a singular tag with no end tag.

Eg-

<html>
<body>
<p>INFORMATION TECHNOLOGY: <br> BJB higher secondary school</p>
</body>
</html>

Output-
INFORMATION TECHNOLOGY:
BJB higher secondary school

Section separator <HR> tag-


The <hr> tag in HTML stands for horizontal rule and is used to insert a horizontal rule or a break in
an HTML page to divide or separate document sections. The <hr> tag is an empty tag and it does
not require an end tag
Eg-
<html>
<body>
<h2>ODISHA</h2>
<p>Coastal state of eastern India.</p>
<hr/>
<h2>BHUBANESWAR </h2>
<p> Capital city of Odisha.<p>
</body>
</html>
Output-

ODISHA

Coastal state of eastern India.

BHUBANESWAR
Capital city of Odisha.

HTML <p> tag – <P> tag is used for defining a paragraph. Every statements or paragraph should be
enclosed within the <p> ............................. </p> tag.
ATTRIBUTES – (i) All HTML elements can have attributes.
(ii)Attributes provide additional information about an elements.
(iii)Attributes are always specified in the start tag.
(iv)Attributes usually come in name & value pairs like name= “ value”

Ex- <p title= “it is higher secondary school”>BJB Junior College</p>

HTML <FONT> tag –


The <font> tag specifies the font face , font size, and colour of the text.
Attributes used with <font> tag are-

Colour-specifies the colour of the text.

Face – specifies the font of the text.

Size- specifies the size of the text.

Eg-

<font size= “ 6 ” colour= “red ” face= “times new roman ” > This is some kind of text </font>

Output :-

This is some kind of text

HTML LISTS-

Unordered list <ul> tag- An unordered list is a collection of related items that have no particular
order or sequence.
An unordered list starts with <ul> tag. Each list items start with <li> tag.
Each list items will be marked with “ bullets ” by default

Ex-

<ul>
<li> water-melon</li>
<li>Mango</li>
<li>coffee</li>
<li>coca-cola</li>
<li>Apple</li>
</ul>

Output-

 water-melon
 Mango
 coffee
 coca-cola
 Apple

There can be 4 types of bulleted list:


o disc
o circle
o square
o none
To represent different ordered lists, there are 4 types of attributes in <ul> tag.
type= “ disc” Sets the item to be a bullet
type= “ circle” Sets the item to be circle
type= “ square” Sets the item to be a square
type= “ none” List items will not be marked.

<html>
<body>
<ul type="square ">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ul>
</body>
</html>

Output-

 HTML
 Java
 JavaScript
 SQL

HTML Ordered Lists <ol> tag –

HTML ordered list is used to put the items in a numbered list. An ordered list starts with <ol> tag.
Each list item starts with <li> tag.
It will be marked by the numbers by default.
Ex-

<ol>
<li> water-melon</li>
<li>Mango</li>
<li>coffee</li>
<li>coca-cola</li>
<li>Apple</li>
</ol>

Output-

1. water-melon
2. Mango
3. coffee
4. coca-cola
5. Apple
The “ type” attribute of the <ol> tag defines the type of the list items
type= “ 1” List items will be numbered with numbers
(default)
type= “ A” List items will be numbered with uppercase
letters
type= “ a” List items will be numbered with lowercase
letters
type= “ I” List items will be numbered with uppercase
roman numbers
type= “ i” List items will be numbered with lowercase
roman numbers

<html>
<body>
<ol type="I">
<li>HTML</li>
<li>Java</li>
<li>JavaScript</li>
<li>SQL</li>
</ol>
</body>
</html>

Output-

I. HTML
II. Java
III. JavaScript
IV. SQL
HTML <table> tag-
A table is an arrangement of data in rows and columns, or possibly in a more complex structure.
An HTML table is defined with the “<table>” tag. Each table row is defined with the “<tr>” tag. A
table header is defined with the “<th>” tag. By default, table headings are bold and centered. A
table data/cell is defined with the “<td>” tag.

<!DOCTYPE html>
<html>
<body>
<table width="50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>
</html>

Output-

1. Adding a border to a HTML Table: A table border is set using the border= “1px” or
border= “1” attribute used with <table> tag . If you do not specify a border for the table, it will be
displayed without borders.

2.Adding Left Align Headings in a HTML Table : By default the table headings are bold
and centered. To left-align the table headings, “align = ” attribute is used with <th>tag.
Ex- <th align= “left”>First_name</th>

3. Adding Cells that Span Many Columns in HTMl Tables : To make a cell span more
than one column, we must use the “colspan” attribute :
<!DOCTYPE html>
<html>
<body>
<h2>Cell that spans two columns:</h2>
<table border="1px" cellspacing="0" width="50%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Ram</td>
<td>9125577854</td>
<td>8565557785</td>
</tr>
<tr>
<td>Shyam</td>
<td>9126673454</td>
<td>7643217785</td>
</tr>
</table>
</body>
</html>

Output:

4.Adding Cells that Span Many Rows in HTML Tables: To make a cell span more than one row, we
must use the rowspan attribute:
<!DOCTYPE html>
<html>
<body>
<h2>Cell that spans two rows:</h2>
<table border="1px" cellspacing="0" width="50%">
<tr>
<th>Name:</th>
<td>Sourav Ganguly</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>9125577854</td>
</tr>
<tr>
<td>8565557785</td>
</tr>
</table>
</body>
</html>
Output-

5. Adding a Caption in a HTML Table: To add a caption to a table, we must use the “<caption>”
tag
<caption>Telephone_directory</caption>

6.Adding background colour to a table use bgcolor= “ ” in <table> tag specifying about the
background colour of the table.

<table border="1px" cellspacing="0" width="50%" bgcolor="aqua" bordercolor= “red”>


<caption>Telephone_directory</caption>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Priya</td>
<td>Sharma</td>
<td>24</td>
</tr>
<tr>
<td>Arun</td>
<td>Singh</td>
<td>32</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>41</td>
</tr>
</table>
</body>

Output :-
HTML <form> tag –
(i)The <form> tag in HTML is used to create form for user input. An HTML form facilitates the user
to enter data that is to be sent to the server for processing such as name, email address, password,
phone number, etc
There are many elements which are used within form tag. For example: <input>, <textarea>,
<button>, <select>

(ii)The HTML <form> tag is used in conjunction with form- associated elements. To create a form all
the form associated elements can be nested inside the opening & closing of <form>tag.

(iii)The form associated elements are of different types of input elements like text-fields,
checkboxes, radio-buttons, submit button, etc.

Syntax
<form action= “script url” method= “Get/Post”>

//Any form associated elements//


</form>

Attributes associated with <form> tag

(i)Action- The HTML action Attribute is used to specify where the form data is to be sent to the
server after submission of the form. It can be used in the <form> element. Attribute Values:
URL: It is used to specify the URL of the document where the data to be sent after the submission
of the form.
The possible values of the URL are:
 absolute URL: It points to another website link.
 relative URL: It is used to point to a file within a webpage

(ii) Method- The Method attribute is used to specify the HTTP method used to send data while
submitting the form. There are two kinds of HTTP Methods, which are GET and POST. The method
attribute can be used with the <form> element.
Attribute Values:
 GET: In the GET method, after the submission of the form, the form values will be visible in the
address bar of the browser tab. It is only useful for non-secure data not for sensitive
information.
 POST: In the post method, after the submission of the form, the form values will not be visible
in the address bar of the new browser tab as it was visible in the GET method. It appends form
data inside the body of the HTTP request.

(iii)Target – The Target attribute specifies the target window where the result of the script will be
displayed.
The “target” attribute can have one of the following values.
(a) _blank:- opens the linked document in a new window/tab.
(b) _self:-opens the linked document in the same window/ tab (this is by default)
(c) _parent :-opens the linked document in the parent frame.

HTML Form Controls –


There are different types of form controls that you can use to collect data using HTML Form.
 Text Input Controls
 Radio Box Controls
 File Select Boxes
 Clickable Buttons
 Check boxes Controls
 Select boxes Control
 Hidden Controls
 Submit and Reset button
HTML<input> tag –
In HTML, the input field can be specified using where a user can enter data. The input tag is used
within < form> element to declare input controls that allow users to input data. An input field can
be of various types depending upon the attribute type. The <Input> tag is an empty element which
only contains attributes.

Syntax
<input type = "value" .... />
Attributes associated with <input> tag:
type: The type attribute is used to specify the type of the input element. Its default value is text.

value: The value attribute is used to specify the value of the input element.

Placeholder: Placeholder attribute is used to specify hint that describes the expected value of an input field.

Name: The name attribute is used to specify the name of the input element.

Alt: The alt attribute is used to provide alternate text for the user, if they cannot view the image.

autofocus: Autofocus attribute specifies that an element should automatically get focus when the page
loads.

checked: The checked attribute specifies that an element should be pre-selected (checked) when the page
loads. The checked attribute can be used with < input type=”checkbox” > and < input type=”radio” >.

disabled: The disabled attribute specifies that the element should be disabled. The disabled attribute can be
set to keep a user from using the < input > element until some other condition has been met

max : The max attribute is used to specify the maximum value for an < input > element.

required: The required attribute specifies that an input field must be filled out before submitting the form.

readonly: The readonly attribute specifies that an input field is read-only. A read-only input field cannot be
modified. A form will still submit an input field that is readonly, but will not submit an input field that is
disabled.

autocomplete: This property is used to specifies whether an <input> element should have autocomplete
enabled.

maxlength: This property is used to specifies the maximum number of characters allowed in an <input>
element.

min: This property is used to specifies a minimum value for an <input> element.

pattern: This property is used to specifies a regular expression that an <input> element’s value is checked
against.

size: This property is used to specifies the width, in characters, of an <input> element.

src: This property is used to specifies the URL of the image to use as a submit button (only for
type=”image”)
example of <input>tag
<!DOCTYPE html>
<html>

<body>
<font color="green"><h1>A Login Page For my Students</h1></font>

<form>
<label>Name:</label>
<input type="text" name="name" value="">
<br><br>

<label>E-mail:</label>
<input type="email" name="emailaddress">
<br><br>

<label>Password: </label>
<input type="password" name="password">
<br><br>

<input type="submit">
</form>
</body>
</html>

Output-

Example-2: Using “value” attribute.


<!DOCTYPE html>
<html>

<body>
<font color="blue"><h1>A dummy Page</h1></font>
<form>

<label> Name: </label>


<input type="text" name="name1" value="BJB College" size=”30”>

<br>
<br>
<input type="submit" value="Submit form">

</form>
</body>

</html>

Output-
CREATING A TEXT BOX USING <input> Tag –
To create a text box use the <input> tag and set the type attribute to text i.e
<input type= “text”>

<!DOCTYPE html>
<html>

<body>
<form>
<input type= “text”>
</form>
</body>

</html>

Output –

<!DOCTYPE html>
<html>
<body>
<form>
First Name :
<input type= “text” name= “Fname”>
</form>
</body>
</html>

Output :-

*******Remember*******

In the second example, in addition to the type attribute we used the name attribute. The purpose of this name
attribute is to identify the value for this input box to the processing script. Name attribute does not play any
role in how to display the input box , it helps in only processing the form data.

To increase the size or width of the text box use “size” attribute

Eg-
<input type= “text” size= “10” name= “Fname”>
HTML <input type=”password”>
The HTML <input type=”password”> is used to specify the password field of input tag. Password
fields are similar to text fields. The difference is that what is entered into a password field shows
up asterisks or dots on the screen.

Syntax
<input type= “password”> defines a password field

HTML <input type=”checkbox”>

HTML <input type=”checkbox”> is used to define a checkbox field. The checkbox is shown as a
square box that is ticked when it is activated. It allows the user to select one or more option
among all the limited choices.
Syntax:
<input type="checkbox">
While creating textboxes , 3 steps are to be followed
 Specify a word that describes the group of check boxes.This is done using Name attribute
 Specify a word that describes each check box. This is done using value attribute.
 Specify the text that you have to show beside each check box on your web page.
<!DOCTYPE html>
<html>
<body>
<form>
<input type="checkbox" name="check" value="1" checked> Physics
<br>
<input type="checkbox" name="check" value="2"> Chemistry
<br>
<input type="checkbox" name="check" value="3" > Biology
<br>
<input type="checkbox" name="check" value="4"> Information Technology
<br>
</form>
</body>
</html>

Output-
HTML <input type=”radio”>

The HTML <input type=”radio”> is used to define a Radio Button. Radio Buttons are used to let
the user select exactly one option from a list of predefined options. Radio Button input controls
are created by using the “input” element with a type attribute having value as “radio”.
Syntax:
<input type="radio">
<!DOCTYPE html>
<html>
<body>
<form>
<input type="radio" name="gender" value="Male"> MALE
<br>
<input type="radio" name="gender" value="Female"> FEMALE
<br>
<input type="radio" name="gender" value="transgender"> TRANSGENDER
<br>
</form>
</body>
</html>

Output-

HTML <select> Tag –


The <select> tag in HTML is used to create a drop-down list. The <select> tag contains <option>
tag to display the available option of drop-down list. The <select> tag is used in a form to recieve
user response.

Syntax:
<select>
<option> ..... </option>
<option> ...... </option>
...
</select>
Attributes: The attributes of <select> tag are listed below:
 autofocus: The HTML <select> autofocus Attribute is used to specify that the dropdown
should automatically get focus when the page loads.

 disabled: The <select> disabled attribute is used to specify the select element is disabled. A
disabled drop-down list is un-clickable and unusable.

 form: The HTML <select> form attribute is used to specify one or more forms that the
<select> element belongs to.

 multiple: The HTML <select> multiple attribute is a Boolean Attribute. It specifies that the
user is allowed to select more than one value that presents in <select> element.

 name: The HTML <select> name attribute is used to specify a name for the drop-down list.
It is used to reference the form-data after submitting the form or to reference the element in
a JavaScript.

 required: The HTML <select> required attribute is a Boolean attribute which is used to
specify that the user should be selected value before submitting the Form.
 size: The HTML size attribute is used to specifies the number of visible options in a drop-
down list.

HTML <option> Tag –

The <option> tag in HTML is used to choose an option from a Drop-Down menu. This tag can
be used with or without any attributes and needed value can be sent to the server.

Syntax:
<option> Contents... </option>
Attributes: The <option> tag contains four attributes which are listed below:
 disabled: This attribute contains the value disabled which represents option is disabled.
 label: This attribute contains the text value which represents the shorted label for option.
 selected: This attribute contains the value selected which represents the item is pre-
selected when browser loaded.
 value: This attribute contains the value text which sent to the server.

<!DOCTYPE html>
<html>
<body>
<h1><font color="blue">Select City</font></h1>
<select>
<option>Choose an option</option>
<option value="abd">Allahabad</option>
<option value="bbsr">Bhubaneswar</option>
<option value="ctc">Cuttack</option>
<option value="angl">Angul</option>
</select>
</body>
</html>

Output-

Creating a Button -

The HTML <input type= “button” > element is a specific version of the <input> element used to
create a clickable button with no default value.
Browsers generate a control for a clickable with no default value. The button can have any label
on it.

Syntax
<input type= “button”> defines a button
Code-
<!DOCTYPE html>
<html>
<body align="center">
<h2>HTML button</h2>

<input type="button" onclick = "alert('Welcome Students of BJB')" value="Click Here">


</body>
</html>

Output-

HTML <input type=”submit”>


The HTML <input type=”submit”> is used to define a submit button. It is used to submit all the
user value to the form handler. The Form Handler is a server page that activates a script for
processing all the input values.
Syntax:
<input type="submit">

<!DOCTYPE html>
<html>
<body align="center">

<font color="green"><h1> A Login Page </h1><font>


<form>
Name:
<input type="text">
<br>
<br>
Password:
<input type="password">
<br>
<br>
<input type="submit">
</form>
</body>
</html>

Output –
HTML <input type= “reset”> -

The HTML <input type=”reset”> is used to defines a reset button. The reset button is used to reset
all the form values to its initial values.
Syntax:
<input type="reset">
<!DOCTYPE html>
<html>
<body align="center">
<form>
Name:
<input type="text">
<br>
<br> Password:
<input type="password">
<br>
<br>

<input type="submit">
<input type="reset">
</form>
</body>
</html>
Output-

HTML <input type= “date”> is used for input fields that should contain a date.

It has 2 attributes “max” & “min” where max= “” attribute specifies the maximum date to display &
min= “” attribute specifies the minimum date to display.

<input type="date" name="bday" max="2021-12-31" min="2000-01-01">

HTML <input type= “email”> is used for input fields that should contain an email address. The text
field will not accept anything except email type values.

<input type= “email ” name= “mail”>

HTML <input type= “number”> defines a numeric field.


“Step” is a attribute which provides restrictions specifying the legal number intervals for an input
field.
<input type= “number” name= “qty” min= “1” max= “5”>
Or
<input type= “number” name= “qty” min= “0” max= “100” step= “10” value= “0”>
Here step =10 so at each click of submit value it will increase (+10) value upto 100
Value= “0” which determines initial or starting will be from 0.
<!DOCTYPE html>
<html>
<body align="center">
<form>
Enter your Name :
<br>
<input type="text" name="name" size="20">
<br>
<br>
Enter Your Birth date:
<br>
<input type="date" name="bday" max="2021-12-31" min="2000-01-01">
<br>
<br>
Enter Your Email:
<br>
<input type= “email ” name= “mail”>
<br>
<br>
<input type="submit">
<input type="reset">
</form>
</body>

<textarea> tag – When the user is required to give details that may be longer than a single sentence
then <textarea> tag is used.

<form>
Address :
<textarea rows= “5” cols= “50” name= “description”> </textarea>
</form>

Rows -> indicates the number of rows in the text area box
Cols ->indicates the number of columns of textarea box.
Example of some additional attributes:

Placeholder: Placeholder attribute is used to specify hint that describes the expected value of an input field.

Ex of placeholder:
<html>
<body align="center">
<form>
Enter Your First_name
<br>
<input type="text" name="fname" size="30" placeholder="First name">
<br>
Enter Your Last_name
<br>
<input type="text" name="lname" size="30" placeholder="Last name">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

required: The required attribute specifies that an input field must be filled out before submitting the form
.The field cannot be left empty, must have to mandatory fill the field.
<html>
<body align="center">
<form>
Enter Your First name <br>
<input type="text" name="fname" size="30" required>
<br>
Enter Your Last name <br>
<input type="text" name="lname" size="30" required">
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>

You might also like