HTML

What is HTML?
learn html
What is HTML?
HTML stands for 'hyper text mark-up language' and is a simple language that
anyone can learn and is used for making web pages.
What tools are needed to make a webpage?
All that is needed is 'notepad' and a second browser, notepad is

a simple text editor in windows, click start on your taskbar then
programs and then goto accessories, finally click notepad.
What does html look like?
Most html tags work in pairs

The first <HTML> tag tells the browser that it is reading a html document. The </HTML> tag with the /
in it tells the browser that the html has ended.
Take a look below
The first <HEAD> tag tells the browser that it is reading the head of a html document. The </HEAD>
tag with the / in it tells the browser that the head part has ended.
One more example
The first <TITLE> tag tells the browser that it is reading the title of a html document. The </TITLE>
tag with the / in it tells the browser that the title has ended.
The minimal webpage:-
<HTML>
<HEAD>
<TITLE>my first web page</TITLE>
</HEAD>
<BODY>
This is my very first webpage, aint i clever?
</body>
</HTML>
Output:-
This is my very first webpage, aint i clever?
What is Web Page
Web page is a page which is displayed on the internet. Web pages are
created by using HTML syntax. In web pages we can insert the
picture ,table , graphics by using different tags of html language.
HTML TAGS
 Html tags are standard set of codes that are typed in

between greater than and less than signs on the
keyboard. Like
<HTML>
There are basically two types of HTML tags
 Padded Tags
 Unpadded Tags
 Padded Tags:- Padded tags are those tags which are
required to be closed at the end. The Padded tag is closed
with forward hash (/) before the tag name.
<HTML>……..</Html>
<Head>……..</Head>
<Body>……..</Body>
Unpadded tags:- unpadded
tags is just the opposite of
Padded Tags, as they need not
be closed at the end.
<HR>
<BR>
Layout of Web Page
Title
Headin
g
Bod
y
Footer
Basic Tags:-
<HTML>….……..</HTML>
<TITLE>…………</TITLE>
<HEAD>………..</HEAD>
<BODY>…………</BODY>
BASIC TAGS
Tags Description
<HTML>………</HTML> Indicates the beginning of

HTML document
<Title> ………….</Title> Indicates title for the web

page.
<Head>………….</Head> Indicates the beginning of

document header.
<Body>………..</Body> Indicates the beginning of

HTML text.
<Html>
<Title> MY Page </Title>
<Head> Punsoft life skills academy </head>
<Body> this is my first web page </body.
</Html>
Title My page
Head Punsoft life skills academy

This is my first web page.
Body
Formatting Tags are used to design, styles and colors to the text.
Format Tags Description

Paragraph <P> Indicates paragraph break
<BR> Indicates line break
<PRE>….</PRE> Indicates Preformatted text
<Blockquote>….. Indicates block of text, indented

<Blockquote>
<HR> Indicates Block of text, indented
<center> It indicate the alignment of text or

picture in center of a page.
<html><body>
<h1 style="text-align:center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. The
heading above is aligned to the center of this page. The
heading above is aligned to the center of this page.</p>
</body></html>
Output:-
This is heading 1
The heading above is aligned to the center of this page. The
heading above is aligned to the center of this page. The
heading above is aligned to the center of this page.
Note:- to make your text in center of page you can also use
the option (tag) <center> simply.
Use of horizontal line in HTML
<html>
<body>
<p>The hr tag defines a horizontal rule:</p>
<hr />
<p>This is a paragraph</p><hr />
<p>This is a paragraph</p><hr />
<p>This is a paragraph</p>
</body></html>
Output:
The hr tag defines a horizontal rule:
This is a paragraph
This is a paragraph
This is a paragraph
Format Tags Description
Character <I>….</I> Indicates italics
<U>…..</U> Underlines the text
<B>……</B> Indicates bold text
<TT>……</TT> Indicates “typewriter” font
<EM>……</EM> Emphasizes the text (usually italics)
<ADDRESS>….</ADDR Indicates information about the
ESS> author who created the web
page in a unique font.
<STRONG>…….</STRO Indicates typical Bold Font
NG>
<CITE>………</CITE> Highlights Citation
<CODE>…….</CODE> Used to enclose program codes
<abbre > Title=“……..” It is used as abbreviation of full
text.
<html>
<body>
<p>This is a paragraph. we are using this option to display the result of this
option on the web page </p>
</body>
</html>
Output:-
This is a paragraph. we are using this option to display
the result of this option on the web page


<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><big>This text is big</big></p>
<p><em>This text is emphasized</em></p>
<p><i>This text is italic</i></p>
<p><small>This text is small</small></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Output:-Text formatting
This text is bold

This text is strong
This text is big
This text is emphasized
This text is italic
This text is small
This is subscript and superscript
Pre and p options
<html>
<body>
<pre>
This is
preformatted text.
It preserves both spaces
and line breaks.
</pre>
<p>The pre tag is good for displaying computer code:</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
</body>
</html>
Output
This is
preformatted text.
It preserves both spaces
and line breaks.
The pre tag is good for displaying computer code:

for i = 1 to 10
print I
next i
Abbreviation tags:
<html>
<body>
<abbr title="United Nations">UN</abbr>
<br />
<acronym title="World Wide Web">WWW</acronym>
<p>The title attribute is used to show the spelled-out version when
holding the mouse pointer over the acronym or
abbreviation.</p>
</body>
</html>
Output of abbreviation tag
UN
WWW
The title attribute is used to show the spelled-out version when
holding the mouse pointer over the acronym or abbreviation.
<html>
<body>
<p>
If your browser supports bi-directional override (bdo), the
next line will be written from the right to the left (rtl):
</p>
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
</body>
</html>
Output
 If your browser supports bi-directional override (bdo), the

next line will be written from the right to the left (rtl):
 Txet werbeH emos si ereH
Note:- <bdo dir="rtl"> tag show the text in opposite direction

like mirror effect.
Use of Some other tags (coding)
<html>
<body>
<code>Computer code</code>
<br>
<kbd>Keyboard input</kbd>
<br>
<tt>Teletype text</tt>
<br>
<samp>Sample text</samp>
<br>
<var>Computer variable</var>
<br><p>
<b>Note:</b> These tags are often used to display computer/programming
code.
</p>
</body></html>
Output:-
Computer code
Keyboard input
Teletype text
Sample text
Computer variable
Note: These tags are often used to display

computer/programming code.
 <html>
 <body>
 <abbr title="United Nations">UN</abbr>
 <br />
 <acronym title="World Wide Web">WWW</acronym>
 <p>The title attribute is used to show the spelled-out
version when holding the mouse pointer over the
acronym or abbreviation.</p>
 </body></html>
Header <H1>…</H1> First-level heading (big size)
<H2>…..</H2> Second-level heading
<H3>….</H3> Third -level of heading
<H4>….</H4> Fourth-level of heading
<H5>…..</H5> Fifth-level of heading
<H6>……</H6> Sixth-level of heading
<H7>……</H7> Smallest level of heading

Use of heading tags:
<html>
<body>
<h1>This is heading 1</h1>
</body></html>
Output:-
This is heading 1
This is heading 2
This is heading 3
This is heading 4
This is heading 5
This is heading 6
Tag Attribute Function
<! ………> Indicates comment tag
in Html. The browser
does not interpret it.
<body> Bgcolor=“……” It is used to give the
background color of
the page
Background=“ It is used to display the
…” image on the page as
a background
These tags are used in body tag.
<Sub>…...</Su It is used to show text in
b> subscript form
<Sup>…..</Su It is used to show text in
p> superscript form
Use of background tags/attributes
<html>
<body style="background-color:orange">
<h2>Look: Colored Background!</h2>
</body>
</html>
Output:-
Look: Colored Background!
Note:- This option is also used as <body Bgcolor=“orange”> both

have same effects.
<html>
<body>

<p>This is a regular paragraph</p>
</body></html>
Output:-
This is a regular paragraph

000000
Color codes in html
000033 000066 000099 0000CC 0000FF
003300 003333 003366 003399 0033CC 0033FF
006600 006633 006666 006699 0066CC 0066FF
009900 009933 009966 009999 0099CC 0099FF
00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF
00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF
330000 330033 330066 330099 3300CC 3300FF
333300 333333 333366 333399 3333CC 3333FF
336600 336633 336666 336699 3366CC 3366FF
339900 339933 339966 339999 3399CC 3399FF
660000 660033 660066 660099 6600CC 6600FF
663300 663333 663366 663399 6633CC 6633FF
666600 666633 666666 666699 6666CC 6666FF
669900 669933 669966 669999 6699CC 6699FF
990000 990033 990066 990099 9900CC 9900FF
993300 993333 993366 993399 9933CC 9933FF
996600 996633 996666 996699 9966CC 9966FF
999900 999933 999966 999999 9999CC 9999FF
CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF
CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF
CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF
FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF
FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF
FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF

Lists in HTML
 List mean to make/arrange the information in order.

Listing of item is possible in html. List is divided into two
parts.
Order list:
Unordered list:
items to be listed are typed after <li> tag which mean

<list item>. It is a unpadded tag it mean there is no
need to close it, it is op
Ordered list:-
The ordered list consists of alphabetical order and numeric order.
The ordered list begins with <ol> tag and is a padded tag
hence the list ends with a </ol> tag.
This tag must be closed at the end of list.
Example:-
<ol>Names of cities
<li> Chandigarh
<li> Ropar Output:-
<li>Patiala </ol> Names of cities
1. Chandigarh
2. Ropar
3. Patiala
Note:- by default numbers are shown in ordered list.

Example and other features of
ordered list:
Alphabets in ordered list: Output:-
For uppercase list:
A. Chandigarh
<ol type=A> B. Ropar
C. Patiala
<li> Chandigarh
<li> Ropar
<li>Patiala </ol>
Alphabets in ordered list: Output:-
For uppercase list:
<ol type=a> a) Chandigarh
<li> Chandigarh b) Ropar
<li> Ropar c) Patiala
<li>Patiala </ol>
Other options of ordered list:
Roman Characters as ordered Output:-
list:-
I. Chandigarh
Uppercase: II. Ropar
<ol type=I> III. Patiala
<li> Chandigarh
<li> Ropar
<li>Patiala </ol>
Roman Characters as ordered list:- Output:-

Lower case:
<ol type=i> i. Chandigarh
<li> Chandigarh ii. Ropar
<li> Ropar iii. Patiala
<li>Patiala </ol>
To start the list from particular
number- in ordered list only
<ol type=“1”start=7> Output:-

<li> Chandigarh 7. Chandigarh
8. Ropar
<li> Ropar 9. Ludhiana
<li> Ludhiana 10. Patiala
<li> Patiala</ol>
<ol type=“a”start=5> Output:-

<li> Chandigarh e. Chandigarh
<li> Ropar f. Ropar
g. Ludhiana
<li> Ludhiana h. Patiala
<li> Patiala</ol>
Unordered list:-
The unordered list consists of bullets. The unordered list

begins with <ul> tag and is a padded tag hence the
list ends with a </ul>. <li>Tag is sub tag or attribute of
this list.
Example:- default bullets as unordered list.
<ul><li> Chandigarh
<li> Ropar>
Output :-
•Chandigarh
<li> Patiala •Ropar
<li> Ludhiana </ul> •Patiala
•Ludhiana
To change the shape of the bullets from default to
square.
<ul type=“square”> Output:-
<li> Chandigarh Chandigarh
<li> Ropar Ropar
<li> Patiala Patiala
<li> Ludhiana</ul> Ludhiana
<ul type=“Circle”> Output:-

<li> Chandigarh oChandigarh
<li> Ropar oRopar
oPatiala
<li> Patiala oLudhiana
<li> Ludhiana</ul>
What is Nested list:-
List within a list is known as a nested list. It can be

extended up to several levels. The most common
example of nested list is index or contents of any book.
Images in HTML
Images can be inserted on the wed page using HTML tags. There
are different types of images or graphics file formats like gif,
jpeg(jpg), Wmf, etc. that can be easily inserted on a web page
through HTML tags.
HTML tag associated with inserting images and its attributes with
their functions are given in the following table:
<Img Places an image file within the page.
Src=“ The address or the file name of the

image.
Alt=“….” A text message that can be displayed
Align=“…..” Left, right and Center
Height=“…” Value assigned in pixels
Width=“…..” Value assigned in pixels
Hspace=“….” Value assigned in pixels(horizontal
space)
Vspace=“….” Value assigned in pixels(Vertical space)
Border=“….” Value assigned in numbers (0,1,2,3…)
Loop=“…….” Value assigned in numbers (0,1,2,3…)
For animation files
The image tag is inserted anywhere in the head or the body tags and is
typed as follows: <img Src=“c:\image\ast09.jpg” height=“500”
width=“500” alt=“name of picture” border=“10”>
<html>
<title> Inserting Images</title>
<head>
<center>
This is a picture of roses</head>
<body>
<img Src=“C:\images\Roses.jpg”
align=“center”>
</body>
</html>
This is a picture of Roses
Links in HTML
Links:-link is a connection of one test/picture with other text/picture.

In Html links are necessary to link different web pages in a web site. It
is also necessary for linking from one part of the document to
another part in the same document.
Types of Links:-
 Internal links
 External links
Tags for hyperlinks
Tag Attributes Function

<a>……</a> The anchor tag when used
with the href attribute creates
a link to another document or
anchor
Href=“......” The address of the document
or anchor point to link to.
name-=“…” The name for this anchor
point in the document
Id=“…..” The id tad is exactly like the
name tag.(include both
name and id for maximum
past and future
compatibility.)
Internal Link
Internal Links are those links that are inserted within a single
current document. It mean it is a link within a document.
It is used when Document is too large and it needs link from Top
to Bottom or Bottom to Top.
Syntax
1.<a name=“location name’>

<a href=“# location name”> link text </a>
Type the text as you required
2.<a href=“#a1”> link text </a>

<a name=a2>
Note:- Both the text are required to create internal link.

Example:
<Html>
<Body>
<a name=“a1”>
<a href=“#a2”> Bottom </a>
This is a document which shows the link with in a page. All the text is
used to show link of top text with bottom text.
<a href=“#a1”> Top </a>
<a name=“a2”>
</body></html>
Note=“#” symbol is used to indicate internal link.

output
Bottom
This is a document which shows the link with in a page. All the text
is used to show link of top text with bottom text.
Top
Blue color is always shown as link
Note:- when you click on bottom then cursor will be shifted to
bottom of the page or vice versa.
External Link
External links are links to other web Pages or sites. when we have
some important data or information in any other document
then this link is used to connected two different document with
each other.
 For example:-
<a href=“xyz.html”> click here to go to xyz file</a>
This example “<a href” refers to the

anchor tag and hyperlink tag.
“xyz.html” refers to the file to which a
hyperlink is being created from the
current html document.
“click here to go to xyz file” is the

hypertext that will appear in the
document as a link.
Link with Picture
 In this example a hyperlink is created to an image file

and the image file is replaced with inflated picture of
the same image.
 Small picture is shown as link. when you click on Link ,it
will displayed large size of picture.
Syntax:-
<a href=“ret.jpg”><img Src=“ret.jpg” height=“500”
width=“500”></a>
Here if you click on small picture of ret then you can see original size
of ret picture
<a href=“roses.jpg”><img Src=“ret.jpg” height=“500”

width=“500”></a>
Here is you click on small picture of roses then you can see original
size of ret picture
Table in HTML
A table is an orderly arrangement of text and/or graphics

into vertical column and horizontal rows. Tables can
be created in html using the <table> tag. Table can
contain different types of data for example it can
include links, paragraphs, preformatted text, images,
another table, and so on.
Table tags

<table>…... Indicates the start and the end of
.. the table.
….</table>
Align=“…….”
Bgcolor=“……” Background color for the table.
Values are assigned is in pixels or
hexadecimal number.
Background=“….” Background refers to background
image.
Width=“…….” Value assigned in percent.%
Border=“……” Value assigned in numbers. (2,3,4)
Bordercolor=“….” Value assigned in pixels or
hexadecimal number.
Border Value assigned in pixels or
colorlight=“….” hexadecimal number.
Border Value assigned in pixels or
Cellpadding Indicates space between border
and contents of cell.
Cellspacing Indicates spacing between cells.
<Caption>…</caption Indicates heading for the table.
>
<tr..…</tr> Indicates table rows.
Align=“……’ Row contents to be aligned left,
right, center.
Background=“…….” Background refers to background
image.
Bgcolor=“…..” Background color for the row.
Values are assigned is in pixels or
hexadecimal number.
<th>….</th> Indicates heading for the
columns.
<td>….</td> Indicates individuals table
elements or cells.
Align=“……..” Cell contents to be aligned left,
right, center.
Background=“…… Background refers to
..” background image.
Bgcolor=“……” Background color for the cell.
Values are assigned is in pixels
or hexadecimal number.
Valign=“…… “ Values assigned for vertical
alignment of data in the cell.
(top, Center, Bottom,
Baseline)
Colspan=“……” Merging cells in different
columns.
Rowspan=“…….” Merging cells in different
columns.
Notes:- This table provides the different tags associated with tables
in html . Tags are the main functions but the attributes are the
Html tags
<html>
<title> Table</title>
<body><table border=10 align=center >
<tr><td>1
<td>2<td>3</tr>
<tr> <td>4<td>5<td>6
</tr>
<tr> <td>7<td>8<td>9</tr>
</table></Html>
Output of table tags
Table
1 2 3
4 5 6
7 8 9
Rows and column span
<html><title>
Row span in table </title>
<table border=12 bordercolor=“brown” align=left>
<tr><td Colspan=2>1
<td>3</tr>
<tr><td >4<td Rowspan=2>5<td>6</tr>
<tr> <td>7<td Bgcolor=“pink”>8 </tr>
</table></html>
Row span in table
1 3
4 5 6
7 8
Forms in HTML
Forms are basically used for
registration detail that the user
may have to enter in the form.
Tag Attribute function
<form>..</for Indicates the beginning and
m> end of a form in HTML
Action=file/URL Specifies the location where
form data is passed.
Method=get/p Specifies the method by
ost which the data is sent to the
server.
Name=“……’ Name assigned to the form
which is not displayed on the
browser.
Forms
In html the form is used as a special feature by which the

user can fill in certain information in a web page and is
send to the server. In a web page the input is
collected with the help of the form tag in html. The
information collected can be stored in form of a file or
a database on the web server. Thus using forms one
can create an effective interaction between the
client and the server.
Insert text box in form
 Text box:- the text box is used to collect small amount

of data in a single line/ text box. Data such as Name,
E-mail address, Contact number, etc can be
collected using this form field.
Name:- Rajindra education This is a text

trust. box.
<html>
<body>
<form name="input" action="html_form_action.asp" method="get">
Type your first name:
<input type="text" name="First Name" value="Mickey" size="20">
<br>Type your last name:
<input type="text" name="Last Name" value="Mouse" size="20">
<br> <input type="submit" value="Submit">
</form> <p>
If you click the "Submit" button, you will send your input to a new page
called html_form_action.asp.
</p></body></html>
Output:-
Type your first name:
Type your last name:
Submit
If you click the "Submit" button, you will send your input to a new page
called html_form_action.asp.
<html>
<body>
<fieldset text=“red”><legend>
Health information:
</legend>
<form action="">
Height <input type="text" size="3">
Weight <input type="text" size="3">
</form></fieldset>
<p> If there is no border around the input form, your browser is too old.</p>
</body>
</html>
Output:-
Health information:
Height Weight
If there is no border around the input form, your browser is too old.
Important tags of form

<input> It is a basis for data entry
Type=“text” Type Specifies the form field in
which data is to be entered
Size=“……” Size of the text field (Value
assigned in numbers: 0,1,2,3…)
Name=“…..” Name of the control, which is
not displayed on the browser. It
is used to collect data on the
server. values assigned can be
alpha numeric or alphabets but
not numeric.
Maxlength=“ Determines maximum number
….” of characters to be entered in
Text area
The text area is used to collect information in more than one

single line of text, in two or more lines. This form field scrolls in
order to type the entire text to fit in the form field. It is used to
collect detail on a particular topic which the visitor can enter
as simple as typing out in a sentence of varying length.
Text area tags.
<textarea>… It is the basis for data

…… entry.
</textarea>
Name=“……… Name of the control,
” which is not displayed on
the browser. It is used to
collect data on the
server.
Cols=“……….” Determine the size of the
text area in numbers.
Rows=“………” Determine the size of the

text area in numbers.
 This example cannot be edited because our editor uses a
textarea for input, and your browser does not allow a textarea
inside a textarea.
This example cannot be edited because our editor uses a

textarea for input, and your browser does not allow a
textarea inside a textarea.
Note:-When you see the slide view of this

option then you can write anything in this
textarea but not now.
Check box:
The check box is used in order to specify preferences on the form
page. The visitor simply clicks on the check box to select the
item listed next to it in the form. The database is collected on
the bases of whether the item having a check box is selected
or not.
Check box tags
<input> It is the basis for data entry

Type=“checkbo Type specifies the form field in
x” which data is to be entered.
(create a checkbox)
Name Name of the control, which is not

=“……….” displayed on the browser. It is used
to collect data on the server.
Value=“……….” Determines the Boolean value of

the form field, which is sent to the
server
Checkboxes:
 Checkboxes are used when you want the user

to select one or more options of a limited
number of choices.
<form>
I have a bike:
<input type="checkbox" name="vehicle" value="Bike" />
<br />
I have a car:
<input type="checkbox" name="vehicle" value="Car" />
<br />
I have an airplane:
<input type="checkbox" name="vehicle" value="Airplane" />
</form>
Output
How it looks in a browser:
I have a bike:
I have a car:
I have an airplane:
Radio buttons
 The radio is used in case when you want that the

visitor of the site can select just one option from the list
or group.
Like option –male or female.
This button are always shown in circle form.
Gende Male Female

r
Radio buttons:

<input> It is the basis for data entry.
Type=“radio” Type specifies the form field in
which data is to be entered.
(creates a radio button)
Name=“……. Name of the control, which is
” not displayed on the browser.
It is used to collect data on
the server.
Value=“……. Determine the Boolean value
” of the form field, which is sent
to the server. Value assigned
can be yes/no
Checked It is used in case of multiple
radio buttons only. If none of
Radio Buttons
Radio Buttons are used when you want the
user to select one of a limited number of
choices.
Example:-
<form>
<input type="radio" name="sex" value="male" /> Male
<br />
<input type="radio" name="sex" value="female" />
Female
</form>
How it looks in a browser:

Male
Female
<html>
<body>
<form action="">
<input type="button" value="Hello world!">
</form>
</body>
</html>
Select tag
 This option is used to give drop down menu list with a

list of choices. This field is a similar to using a group of
radio buttons, but takes less space on your form. You
can configure a drop-down menu to allow one or
multiple selections.
Select tag
Tag Attributes function
<select>… Create a drop down menu list.
…
</select>
Name=“…….” Name of the control, which is
not displayed on the browser. It
is used to collect data on the
server.
Size=“………” Specifies the number of items
visible at a time
Multiple=“………” Allows multiple items to be
selected at a time.
Defines the list item as option in
the select form field.
Value=“…………. Value assigned to each item as
” option in the select form field.
selected Specifies the default item
selected among list of items.
<html>
<body>
<form action="">
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>
</body>
</html>
Output:-
 <html>
 <body>
 <form action="">
 <select name="cars">
 <option value="volvo">Volvo</option>
 <option value="saab">Saab</option>
 <option value="fiat" selected="selected">Fiat</option>
 <option value="audi">Audi</option>
 </select></form></body>
 </html>
Output:-
Note: Here flat option is selected as a default value.

Highlighted in Red color for knowledge.
Button:
 Buttons are provided to the site visitors to click on it so as to
follow a certain command assigned to it. In form we use two
sets of buttons i.e. Submit and Reset.
 The submit button is used in case the visitor has finished
entering the form and wants to submit the data to the server
that he has entered.
 The reset button is used to reset the form field so as to enter
the next record.
Button tags:
Tag attribute function
<input> It is the basis for the data entry.
Type=“button” Type specifies the form field
through which data is to be
submitted.(create a button with
the fault on it as “button”.
Type=“submit” “type specifies the form field
submitted.(create a submit
button with the default text on
the button as “submit query”
Type=“reset” Type speciifes the form field
submitted. (creates a reset
button with the default text on
the button as “reset”.
Name=“…..”
Value=“…… Is the text that will appear on the
button in the browser.
 When the user clicks on the "Submit"
button, the content of the form is sent to
the server. The form's action attribute
defines the name of the file to send the
content to. The file defined in the action
attribute usually does something with the
received input.
<form name="input" action="html_form_submit.asp"
method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
How it looks in a browser: Submit

Username:
Password:
 Password s used in case any security aspect is to be

included on the web page. The password field will
displayed the data entered in form of asterisks (stars),
as the password is not to be visible on the screen.
 Hence the text typed in password is masked in star
asterisks form in HTML.
Password tags
<input> It is the basis for data entry.
Type=“passwor Type specifies the form field in
d” which data is to be entered.
(creates a text box for password
with default size.)
Name=“…….” Name of the control, which is not
displayed on the browser. It is used
to collect data on the server.
Size=“……..” Size of the text field (value assigned
in numbers: 0,1,2,3,…)
Maxlength=“… Determines maximum number of
…) characters to be entered in the
field.(value assigned in numbers:
0,1,2,….)
Frames in HTML
Frame is basically division of the current browser window into
rectangular sections that can open multiple web pages in
different section after the main web page is opened in the
browser.
Frames divide the web page into different section like in rows and
columns.
Frame tags
Tag Attributes Function
<frameset>… It indicates the start and end

….. tags to create frames.
</frameset>
Cols=“……” Divides the document window
into columns. Value are
assigned in percentage (%age)
Rows=“……..” Divides the document window
into rows. Value are assigned in
percentage. (%age)
Specifies the file to be displayed
in each frame.
Src=“……..” The location of the file to be
opened in the frame.
Name=“………” Specifies the name of the frame.
Tag Attributes function
Noresize Denotes that the size of the

frame is fixed and cannot
be altered.
Scrolling=“…….” Specifies scroll bars. Values

assigned can be yes, no or
auto.
Border=“…….” Specifies border for the
frame. (value assigned in
numbers: 0,1,2,3,4…..)
<no frames> Specifies that non-Netscape

……. browser displays html codes
/Noframes> within these tags.
Note:- to insert frames do not use the head and body tags, as
you need to divide the entire document window into frames that
open different html files.
Frame tag (vertical frames)
 <html>
 <frameset cols="25%,50%,25%">
 <frame src="frame_a.htm">
 <frame src="frame_b.htm">
 <frame src="frame_c.htm">
 </frameset>
 </html>
Horizontal frames
<html>
<frameset rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
 <html>
 <frameset cols="25%,50%,25%">
 <noframes>
 <body>Your browser does not handle frames!</body>
 </noframes>
 </frameset>
 </html>
Rows and column in frame.
 <html>
 <frameset rows="50%,50%">
 <frameset cols="25%,75%">
 </frameset>
 </frameset>
 </html>
<html>
<body>
<iframe src="default.asp"></iframe>
<p>Some older browsers don't support iframes.</p>
<p>If they don't, the iframe will not be visible.</p>
</body>
</html>
 Some older browsers don't support iframes.
 If they don't, the iframe will not be visible.

HTML

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

HTML

Caricato da

Copyright:

Formati disponibili

What is HTML?

All that is needed is 'notepad' and a second browser, notepad is

What does html look like?

Most html tags work in pairs

This is my very first webpage, aint i clever?

 Html tags are standard set of codes that are typed in

<HTML>………</HTML> Indicates the beginning of

<Title> ………….</Title> Indicates title for the web

<Head>………….</Head> Indicates the beginning of

<Body>………..</Body> Indicates the beginning of

Head Punsoft life skills academy

Format Tags Description

<BR> Indicates line break

<PRE>….</PRE> Indicates Preformatted text

<Blockquote>….. Indicates block of text, indented

<center> It indicate the alignment of text or

This is a paragraph. we are using this option to display

This is a paragraph. we are using this option to display

This text is bold

The pre tag is good for displaying computer code:

 If your browser supports bi-directional override (bdo), the

Note:- <bdo dir="rtl"> tag show the text in opposite direction

Note: These tags are often used to display

<H2>…..</H2> Second-level heading

<H3>….</H3> Third -level of heading

<H4>….</H4> Fourth-level of heading

<H5>…..</H5> Fifth-level of heading

<H6>……</H6> Sixth-level of heading

<H7>……</H7> Smallest level of heading

Look: Colored Background!

Note:- This option is also used as <body Bgcolor=“orange”> both

This is a regular paragraph

003300 003333 003366 003399 0033CC 0033FF

006600 006633 006666 006699 0066CC 0066FF

009900 009933 009966 009999 0099CC 0099FF

00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF

00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF

330000 330033 330066 330099 3300CC 3300FF

333300 333333 333366 333399 3333CC 3333FF

336600 336633 336666 336699 3366CC 3366FF

339900 339933 339966 339999 3399CC 3399FF

33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF

33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF

660000 660033 660066 660099 6600CC 6600FF

663300 663333 663366 663399 6633CC 6633FF

666600 666633 666666 666699 6666CC 6666FF

669900 669933 669966 669999 6699CC 6699FF

66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF

66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF

990000 990033 990066 990099 9900CC 9900FF

993300 993333 993366 993399 9933CC 9933FF

996600 996633 996666 996699 9966CC 9966FF

999900 999933 999966 999999 9999CC 9999FF

99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF

99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF

CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF

CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF

CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF

CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF

CCCC00 CCCC33 CCCC66 CCCC99 CCCCCC CCCCFF

CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF

FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF

FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF