HTML
It stands For Hyper Text mark-up Language.
HTML is a mark-up Language which provides a
set up tags.
Suitable for making web pages.
HTML is a scripting Language and a tool used
for create web pages and an output of
programmes that can be seen after using a
browser.
HTML is a hyper text mark-up language
because its support Font style text. Pictures,
graphics and animation.
The HTML documents are plane text Files.
These are created by using any text editor like
Notepad.
HTML is a tag base system.
A tag is a special instruction for browser
A tag is made up two symbols.
(1) Left operator (<)
(2)Right operator (<)
Example:- < Tag name (parameter =" value")
Don't give any space been left operator and tag
name.
In HTML the ending tag contents a Front slash
symbols like </>.
Structure of HTML Document:-
All HTML documents follow come basic
structures.
It has two blocks:
1. Head block
2. Body block
Head block contains controlled information
used by the browser and file of the document.
Body block contains contents that display on
the screen at task which controls how that
content is formatted by browser.
The basic HTML Document:
Open Notepad.
<html> (head block) ---Starting tag
<head> (head block)--- Starting tag
<title>my web page</title> --- head block
<body>my new page</body>---(body block)
---ending tag
</head>---head block Ending tag
</html>---head block
Result
HTML
It stands for Hyper Text Mark up Language.
It is a stand for mark-up language used to
design the Structure of a webpage.
It is the combination of Hyper Text and mark-up
language
Hypertext defines the internal links between
web page and mark-up language defines the
layout and presentation of text and media.
It is invented by Tim – Berners-Lee in 1991, but
the first version HTML (1.0) released in 1993.
What is tag on HTML :-
An HTML tag is a piece of mark-up language
used to indicate the beginning and end of on
HTML element in to an HTML document.
Understanding HTML Tag:-
Html tags are composed of Opening tag(<),
contents and closing tags(>).
The opening tag marks the beginning of an
element and the closing tag marks the end of
an element.
The contents are the information or structure
that all between the opening and closing tag.
< Contents>---Opening tag
<Contents/>---Closing lag
Some commonly used HTML tags :-
1. <!Doctype html>
It defines the document type as a HTML
document
2. <html> </html>
It is the root element of an HTML Document.
3. <head> </head>
It contents meta-information about the html
document such as title link and character set
declaration.
4. <title></title>
It displays the title of a document on the web
page.
5. <body> </body>
It displays the main contents of HTML
Document. It includes text, Pictures and
graphics.
6. Heading - <h1>….......</h1>
…..
…..
<h6>……….</h6>
It displays the heading of HTML document.
H1 is the largest size and H6 is the smallest
size.
7. Paragraph – <P> </P>
It is used to define a Paragraph on HTML
document.
8. Anchor tag----<a> </a>
It is used to insert a hyper link on any Html
document.
9. Image tag---<img> </img>
It is used to insert images on HTML document.
10. Listing tag---<Ul>… </Ul>
<Ol>…</Ol>
<Li>…</Li>
It is used for insert ordered and on unordered
list on any HTML document.
11. Formatting tag---<b> </b>--- Bold
<U> </U>---Underline
<i> </i>---Italic
It is used fore change the Font style like bold,
italic also apply underline on any Html
document.
How create an HTML Document:-
Open any text editor like Note Pad.
Right the HTML Codes.
Click on File.
Click on save as.
Delete the File name on File name box.
Write a File name with (.HTM OR .HTML) format
like (my HTML [Link]) on File name box.
Select desktop on save location.
Click on save.
Close the notepad window
Show a web file on desktop.
Open the web file & show the HTML Document.
Advantages of learning HTML:-
1. Create a website.
2. Become a web designer.
3. Understand web.
4. Learning other language like. Java, PHP,
CSS etc.
Application of HTML :-
1) Website development.
2) Internet navigation.
3) Offline support.
4) Game development
5) Mobile application development.
Why HTML used in webpage :-
1. It is used to provide a basic Str. To web
pages.
2. The HTML tag helps search engines
understand the contents of the web
page.
3. The HTML form enable user interactions
and include call to action buttons, Text
effects, text fields, Check box and many
more.
4. It is also used to creation of hyper. Links
and insert image audio graphics on a
webpage.
HTML Elements:-
An HTML element is a fundamental, component
of an HTML Document that contents data to
display on the web-page.
Such as text, image, links are sometime
nothings
An Html element includes an opening tag,
contents and design tag.
Example :- <P> My Document </P>
Opening Element/Content Closing tag
An HTML element includes:-
Opening tag: - An opening tag specifies the
beginning of the element and may include
multiple attributes.
Content: - The content part includes the
information to be displayed ore process within
an element.
Closing tag: - A closing tag marks the end of
the clement.
Note:- A closing tag may be optional for
some element.
An HTML document consists of a tree of HTML
clement: and they define the content and
Layout of a webpage. Like how and what.
Content should display in the different section
of a webpage.
Attribute:
HTML attributes are special words that provide
additional information to an Html element.
Attributes are placed inside the elements
opening tag and they are used to configure or
adjust the elements behaviour.
HTML Attributes made up Two Parts:-
1. Name:-
The attribute Name is the key word also known
as attribute identifier.
This defines a specific characteristics for the
element in which it is used in.
Example: - <P align= “left”>Siet
computer</P>
Attribute
The Paragraph <P> element has an attribute
“align” which defines the alignment of a
paragraph on the page.
2. Value:-
The attribute valve is a date or information
that defines the valve to be set for the
attribute
The valve is assigned with in double course (“
”)
Rules of Attribute :-
1. It is an optional used for provide additional
information about an HTML element.
2. An HTML element can have multiple
attributes they should be separated by
<space>.
3. Attributes should always be written within
the opening tag.
All HTML elements can have attributes except
A few like:-
1. <head>
2. <title>
3. <script>
HTML Generic Attributes:-
1. Align Left, centre, Right used for alignment.
2. Busy colour: – Numeric, RAB valves used
fort change book ground Colour behind an
element.
3. Width – Numeric valve used fore change
the width of table, Picture etc.
4. Height –Numeric value used fore change
the height of a table, image, table cells etc.
1. Basic Tag:-
How to create a web File by the help of
HTML?
Open Notepad.
Type Code.
<!doctype html>
<html>
<head>
<title> my test page <title>
<body> My name is Soyam </body>
</head>
</html>.
Click on file
Type a file name on the File name box like my
[Link] on File name box.
Select desktop on save location.
Click on save.
Minimize Notepad.
Show a web file on desktop.
Open the web file
Show the body-- My name is Soyam
Result
Q. Create a web page with a title DON
NUMBER ONE on title and My name is Don
on body Part .Show the web page on desktop.
<! Doctype html>
<html>
<head>
<title> DON NUMBER ONE </title>
<Body> my name is Don </body>
</head>
</html>
Result
Body tag with alignment attributes ?
Open Notepad.
Type code
<! Doctype html>
<html>
<head>
<title> Body </title>
<Body> All about body tag </Body>
</head>
</html>
Click on file.
Click on save as.
Delete the file name on file the file name box.
Type ([Link]) on File name box.
Select desktop on save Location.
Click on save.
Minimize Notepad window.
Open the save web file on desktop.
Show the title and body.
Result
How to apply Formatting attributes Like
bold, italic, underline?
Open Notepad.
Type code.
<! Doctype html>
<html>
<head>
<title> Formatting </title>
<body> Formatting attribute </body>
<body> <b>Soyam</b></body>
</head>
</html>
Click on File.
Click on save as.
Type ([Link]) on File name box.
Select desktop on save location.
Click on save.
Minimize Notepad.
Open the Save web file.
Show the result.
Result
How to apply line break on html File ?
Open Notepad.
Type code.
<! Doctype html>
<html>
<head>
<title> line break </title>
<body> Formatting attribute </body>
</br>
<body><b> Soyam </b> </body>
</head>
</html>
Click on file.
Click on save as.
Delete the file name.
Type line [Link] on file name box.
Set desktop on save location
Click on save.
Minimize Notepad.
Open the save web file.
Show the result.
Result
Align, the body text italic and underline?
Open Notepad .
Type the code.
<html>
<head>
<title> alignment </title>
<body> alignment of text </body> </br>
<body align="centre"> alignment of text
</body>
</head>
</html>
Click on File
Click on save as.
Type [Link] on file name box.
Select desktop on save location.
Click on save.
Minimize Notepad.
Show the result on web page.
Result
How to apply underline?
Open Notepad.
Type the code.
< html>
<head>
<title> alignment </title>.
<body align=”Right”> <u> Alignment of text.
</body>.
<head>.
</html>.
Click on File.
Click on save as.
Delete the File name on File name box.
Type [Link] on the name box.
Select desktop on save location.
Click on save.
Show the result on web page.
Heading tag-(H1-HG)
It is used to apply the heading of a
document.
Open Note Pad.
Type the code.
<html>
<head>
<title>Heading </title>
<body align=”centre”>Heading of
Paragraph</body>
<h1>Good Morning</h1>
<h2> Good Morning</h2>
<h3> Good Morning</h3>
<h4> Good Morning</h4>
<h5> Good Morning</h5>
<h6> Good Morning</h6>
</head>
</html>
Click on File.
Glick on save as.
Delete the File name on file name box.
Type [Link] on the name box.
Select desktop on save location.
Click on save.
Minimize the Note Pad.
Show the result on web page.
Result
Paragraph -<P>
It is used to create a paragraph on web page
Open Notepad.
Type the code.
<html>
<head>
<title>my paragraph </title>
<body> how to write a paragraph on web
page</body>
<h1>definition of computers </h1>.
<P> computer is can electronic high speed
device with the ability it accept data by users
requirement.
It input store and output result
It preforms all the mathematical and logical
operations </p>
</head>
</html>
Click on file.
Click on save as.
Type paragraph.
Click on File name box.
Select desktop on save location.
Click on save.
Show the result on web page.
Result
Line break-</br>
It is used to break the line on a paragraph.
Open Note pad.
Type the code
<html>
<head>
<title> Paragraph</title)
<body> how to write blast a paragraph on web
page
</body>
<h1> definition of computer with line breaks
</h1>
<P> Computer is an electronic high speed
</br) device with the ability it accept </br>
data by users requirement. </br>
It input store and output result. If Preforms all
the </br> mathematical and logical operations.
</head>
</html>
Click on file.
Click on save as.
Type [Link] on file name box.
Select desktop on save location.
Click on save
Minimize Note Pad
Show the result on webpage.
Result
Attribute of Paragraph:-
<html>
<head>
<title> attribute of Paragraph </title>
<body> <b> Formatting of Paragraph <16>
</body>
<body align="centre"> Formatting of
paragraph</body>
<p>I write a normal Paragraph</P></br>
<P> You can easily change the formatting of
selected. Text in the document text by choosing
a look fore the Selected text from the quick
styles gallery on the Home tab.</p>
<P><Font size="24" Font colour="red” Font
face ="impact"> I write a formatted
paragraph</font></P>
<P align="center"><font face="Arial
black"Fontsize="12"| font color="green">
You can easily change the formatting of
selected. Text in the document text by choosing
a look for the selected text from the Quick
styles gallery on the Home lab. You can also
Format text directly by using the other controls
on the Home Lab. </font>
</P>
</head>
</html>
Result
Text
Write a code for Format a paragraph:-
Title:-My Paragraph
Body: - (align-centre) my text paragraph
Heading: Sonali
Paragraph:-align-centre, Face-impact, size-36
text colour-green
Text-About your self
Save the Note pad file in .txt format and
also .htm format .
File name is TW2
Horizontal line
By the help of HR tag we can Insert a horizontal
also we can Format the horizontal line by the
help of attribute.
Open Note Pad.
Type the code.
<html>
<head>
<title> horizontal line </title>
<body> Inserted a horizontal line </body).
<P> I love Siet computer </p><hr/>
<head>
< html>
Click on File.
Click on save as
Type [Link] of file name box.
Select desktop on save location.
Click on save.
Open the web file.
Result
Attribute of Horizontal line
<html>
<head>
<title> horizontal line</title>
<body>Insert a horizontal line </body>
<P> I love siet computer </p><hr/></br>
<P> I Love siet computer </P>
<hr width="50%" align="center" color="red">
</head>
/html>
Save it [Link] Format.
Show it in web page.
Project on Horizontal line.
Result
Text colour and back ground colour :-
How to apply text colour?
Open Note pad.
Type the code.
<html>
<head>
<title> all color.</title>
<body bgcolor="red"align="center"><font
Face="Arial black" font size="28"font
color="white"> Color page </font>
<h1 align="left"><font size = "28" Font
Color="green" </font> My name is
Sona</h1></br>
<h2 align="left"><Font size="16"Font
color="white" Font face="Impact">I am in
paramanandapur near Hunuman temple
</font></h2>
</head>
</title>
Click on file.
Click on Save as.
Type [Link] on File name box
Click on save.
Minimize Note pad
Show the web File on desktop.
Open it.
Show the result.
Result
How to apply text colour?
Open Note Pad
Type the code.
<html>
<head>
<title> all colour </title>
<body>
<P style= "Color: green"><font face ="impact”
Font size="38">siet computer</font></P>
<P style="background-color:yellow;"><Font
face="Arial" Font size="29">siet
computer</font></p>
<P style="background-color:red; color: white;"
align="center"><font face="comic sans ms"
font size = "29"> siet computer</font></P>
</body>
</head>
</html>
Result
Image:-
How to insert a picture on a web Page?
Refresh your computer.
Create to picture on my paint.
Select a picture on JPEG Format
Open Note pad.
Type the code.
<html>
<head>
<title>picture</title>
<body> how to insert a picture on a web Page
</body>.
<img src=”(minimize Note Pad )
Right click on the save picture.
Click on open with
Choose another app.
Select internet explored.
Click on ok.
Show the picture on a web page
Select the picture link from address bar.
Right click on it.
Click on copy.
Close internet explored.
Restore Note pad
Press ctrl+v for paste the link.
imgSRC = “C:\Users\ user \desktop\ pi11.
Jpg”/>
</head>
</html>
Click on file.
Click on save as.
Type picture. Htm on the File name box.
Select desktop on save location.
Click on save
Close Note pad
Show the web file on desktop.
Open web file
Show the picture.
Result
Attribute of image tag- Height, width and
align
Open Note Pad.
Type code.
<html>
<head>
<title> picture</title>
<body> How to insert a picture on a web page
</body>
<img
SRC="[Link]
%20(5).jpg"align="right"height=
"30%"Width="30%"/>
</head>
</html>
Result
Marquee tag
It is used to move a test on the web page.
Open pad
Type the code.
<html >
<head>
<title> marquee </title>
<body align =”centre”>Marquee test </body>
<marquee> I am siet computer </marquees>
<head>
</html>
Click on File
Click on Save as.
Type Marquee [Link] on file name box.
Select desktop on save location.
Click on save.
Close Notepad.
Open the web file on desktop.
Show the result.
Result
2) How to change marquee direction ?
Open Note pad.
Type the code.
<html>
<head>
<title> marquee</title>
<body align="center">marquee test </body>
<marquee body bgcolor="red" hight
="30%"Width="60%"direction="up"><font
color="yellow" size="6">I am siet
computer</font>
</marquee>
</head>
</html>
Click on File
Click on save as
Type marquee 2. Htm on File name box.
Select desktop on save location.
Click on save.
Close the window.
Show the web file on the desktop
Open the web file.
Show the result.
Result
How To siet marquee behaviour?
Open Note Pad.
Type the code.
<html>
<head>
<title> marquee </title>
<body align="center" marquee test </body>
<marquee body bgcolor="green"
behaviour="Right"> <font color="Yellow"> I
am siet Computer </font> </marquee>
</head>
</html>
Click on file.
Click on save as.
Type [Link] on file name box.
Select desktop on save location.
Click on save close Note pad
Show the web file on the desktop
Open the web file.
Show the result.
Result
Anchor Tag
It is used to insert a link on the web page.
Create 3 web files on desktop like
01
Open Note Pad
Type the code
<html>
<head>
<title> green <</title>
</head>
<body bgcolor=”green”> hyper link</body>
</html>
Click on file.
Click on save as.
Type [Link] on File name box.
Select desktop on save location.
Click on save
Result
02
Type the code
<html>
<head>
<title>red<</title>
</head>
<body bgcolor="red">hyper link</body>
</html>
Click on file.
Click on save as.
Type [Link] on file name box .
Select desktop on save location.
Click on save.
Result
03
Open Note pad
Type the code
<html>
<head>
<title>Yellow<</title>
</head>
<body bgcolor="Yellow"> hyper link</body>
</html>
Click on File.
Click on save as.
Type [Link] on file name box
Select desktop on save location.
Click on save.
Check all the web files.
Result
Create link
How to create a link ?
Type the code.
<html>
<head>
<title> create link </title>
</head>
<body bgcolor=”pink” > hyper link
<a href=”(minimize Note Pad)
Open red web file.
Go to the address bar.
Select the link.
Right click on it.
Click on copy.
Close the web file.
Restore Note pad
Paste the link between double codes.
The href=”…….” >red</a></br>
<a href=”(minimize Note pad)
Open green web file.
Go to the.
Copy the link.
Close web file.
Paste the link between double codes
<a href=” “(minimize Note pad)
Open yellow web File.
Go to the address.
Copy the link
Close the web file
Restore notepad
Paste the link between double codes.
</body>
</html>
Click on file.
Click on Save as.
Type Anchor. Htm on the file name box.
Select desktop on save location.
Click on Save.
Minimize Note Pad.
Open Anchor web file.
Click on the link.
Show the result.
Result
How to create an Order list and
Unordered list?
Open Note Pad.
Type the code.
<html>
<head>
<title>orderlist and unordered list</title>
<body bgcolor="#ffce44"><b> How to create
an order list and unordered list.</b>
<h1> <P align="center"><font face "Arial
black"
Size="5" color="red"> siet computer </br>
Dist.-Jajpur
State-Odisha </br>
Country – India</br>
Pin-755014 </br>
Contact no: - 9938227373
</font>
</p>
</h1>
<ol type = "A">
<li> Word</li>
<li>Excel </li>
<li>Power Point</li>
<li> Access </li>
</ol>
<ul type="square">
<li>Word</li>
<li>Excel</li>
<li>Power Point</li>
<li> Access </li>
</head>
</html>
Click on File.
Click on save as.
Type order [Link] on the File name box.
Select desktop on save location
Click on save.
Close Note pad.
Show the result on web page.
Result
Type of OL:-
Default texts are- a,b,c,d
Other categories are a, b, c, d
1,2,3,4
i ,ii , iii, iv
I, I, II, IV
Type of Ul:-
Default text Symbol is. Small black.
Others categories are--
Table
How to create a table on web page ?
NAME MOB. NUMBER BIRTH DATE
ROSAN 9937845612 10/5/2020
MUKESH 9437845612 10/5/2000
<html>
<head>
<title>Table</title>
</head>
<body>
<b>How to create a Table</b><br>
<table border=”1” width=”300”
align=”center” cellpadding=”10”
cellspacing=”0” style=”color: green;”>
<tr>
<th>Name</th>
<th>Mobile number </th>
<th> Birth date</th>
</tr>
<tr>
<td> rosan </td>
<td> 9437845612 </td>
<td> 10/5/2020 </td>
</tr>
<tr>
<td> Mukes </td>
<td> 9437845612 </td>
<td> 10/5/2000 </td>
</tr>
</table>
</body>
</html>
Result
Create the table:-
Item Rate Quantity Price
Name
Mouse 5000 1 5000
Keyboard 250 2 500
Monitor 3500 3 10500
Printer 6000 4 24000
Scanner 10000 5 5000
<html>
<head>
<title>Table</title>
</head>
<body>
<b>How to create a Table</b>
</br>
<table border=”1” width=”300”
align=”center” cellpadding=”10”
cellspacing=”0” style=”color:red;”>
<tr>
<th>Item name</th>
<th> rate </th>
<th> qnt </th>
<th> price </th>
</tr>
<tr>
<td> mouse </td>
<td> 5000 </td>
<td> 1 </td>
<td> 5000 </td>
</tr>
<tr>
<td> keyboard </td>
<td> 250 </td>
<td> 2 </td>
<td> 500 </td>
</tr>
<tr>
<td> monitor </td>
<td> 3500 </td>
<td> 3 </td>
<td> 10500 </td>
</tr>
<tr>
<td> printer </td>
<td> 6000 </td>
<td> 4 </td>
<td> 24000 </td>
</tr>
<td>Scanner</td>
<td>1000</td>
<td>5</td>
<td>5000</td>
</tr>
</head>
</html>
Result
Creat the table:-
Tab1 Tab 2 Tab 3 Tab 4
100 SUN 1 MOR 1 A12
200 SUN 2 MOR 2 B123
300 SUN 3 EVN 1 C456
400 SUN 4 EVN 2 D789
500 SUN 5 NIG 1 E741
<html>
<head>
<title>table</title>
<body><b>How to create a
table</b></body></br>
<table
border="1"width="300"align="center"cellpaddi
ng="10"cellspacing="0"style="color:Green;">
<tr>
<th>Tab 1</th>
<th>Tab 2</th>
<th>Tab 3</th>
<th>Tab 4</th>
</tr>
<tr>
<td>100</td>
<td>SUN 1</td>
<td>MORN 1</td>
<td>A12</td>
</tr>
<tr>
<td>200</td>
<td>SUN 2</td>
<td>MORN 2</td>
<td>B123 </td>
</tr>
<tr>
<td>300</td>
<td>SUN 3</td>
<td>EVN 1</td>
<td>C456 </td>
</tr>
<tr>
<td>400</td>
<td>SUN 4</td>
<td>EVN 2</td>
<td>D789 </td>
</tr>
<tr>
<td>500</td>
<td>SUN 5</td>
<td>NIG 1</td>
<td>E741 </td>
</tr>
</head>
</html>
Result
How to create a data entry form?(PART:-
1)
Open notepad.
Type the code.
<html>
<head>
<title>Form 1</title>
<body><h1><p
style=color:green;align="center"How to create
a data entry form</p></h1>
<form method=""action""=>
<h2>Inquiry Form</h2>
<lable>Name</lable></br>
<input type="text" placeholder="Enter your
Name"/></br>
<lable>E-mail</lable></br>
<input type="E-mail" placeholder="Enter your
E-mail"/></br>
<button type="submit">Save</button>
<input type="submit" value="go"/>
</form>
</head>
</html>
Click on File.
Click on save as.
Type Form (Part 1).htm on the File name box.
Select desktop on save location
Click on save.
Close Note pad.
Open the web File.
Show the result on web page.
Result
How to create a data entry form?(PART:-
2)
Open notepad.
Type the code.
<html>
<head>
<title>Form 2</title>
<body><h1><p
style=color:green;align="center"How to create
a data entry form</p></h1>
<form method=""action""=>
<h2>Inquiry Form</h2>
<lable>Name</lable></br>
<input type="text" placeholder="Enter your
Name"/></br>
<lable>E-mail</lable></br>
<input type="E-mail" placeholder="Enter your
E-mail"/></br>
<input type="tel" pattern="[0-9]
{10}"placeholder="Enter your
Number"/></br>
<lable>Message</lable></br>
<textarea></textarea></br>
<button type="submit">Save</button>
<input type="submit" value="go"/>
</form>
</head>
</html>
Click on File.
Click on save as.
Type Form (Part 2).htm on the File name box.
Select desktop on save location
Click on save.
Close Note pad.
Open the web File.
Show the result on web page.
Result
How to create a data entry form?(PART:-
3)
Open notepad.
Type the code.
<html>
<head>
<title>Form 3</title>
<body>
<fieldset>
<legend>Enquiry From</legend>
<h1><p style=color:green;align="center"How
to create a data entry form</p></h1>
<form method=""action""=>
<h2>Inquiry Form</h2>
<lable>Name</lable></br>
<input type="text" placeholder="Enter your
Name"/></br>
<lable>E-mail</lable></br>
<input type="E-mail" placeholder="Enter your
E-mail"/></br>
<lable>Mobile Number</lable></br>
<input type="tel" pattern="[0-9]
{10}"placeholder="Enter your
Number"/></br>
<lable>Message</lable></br>
<textarea></textarea></br>
<button type="submit">Save</button>
<input type="submit" value="go"/>
</form>
</head>
</html>
Click on File.
Click on save as.
Type Form (Part 3).htm on the File name box.
Select desktop on save location
Click on save.
Close Note pad.
Open the web File.
Show the result on web page.
Result
How to create a data entry form?(PART:-
4)
Open notepad.
Type the code.
<html>
<head>
<title> Form4 </title>
<body>
<fieldset>
<legend>Enquiry From</legend>
<h1><p style=color:green;align="center" How
to create a data entry form</p></h1>
<form method=""action""=>
<h2>Inquiry Form</h2>
<lable>Gender</lable></br>
<input
type="radio"value="male"name=gender/>Mal
e
<input
type="radio"value="female"name=gender/>Fe
male</br>
<lable>Course</lable></br>
<input type="checkbox" value="Dca"/>DCA
<input type="checkbox"
value="Pgdca"/>PGDCA
<input type="checkbox" value="Tally"/>TALLY
<input type="checkbox"
value="Internet"/>INTERNET</br>
<lable>Name</lable></br>
<input type="text" placeholder="Enter your
Name"/></br>
<lable>E-mail</lable></br>
<input type="E-mail" placeholder="Enter your
E-mail"/></br>
<lable>Mobile Number</lable></br>
<input type="tel" pattern="[0-9]
{10}"placeholder="Enter your
Number"/></br>
<lable>Message</lable></br>
<textarea></textarea></br>
<button type="submit">Save</button>
<input type="submit" value="Go"/>
</form>
</body>
</head>
</html>
Click on File.
Click on save as.
Type Form (Part 4).htm on the File name box.
Select desktop on save location
Click on save.
Close Note pad.
Open the web File.
Show the result on web page.
Result
How to create a data entry form?(PART:-
5)
Open notepad.
Type the code.
<html>
<head>
<title> Form 5 </title>
<body>
<fieldset>
<legend>Enquiry From</legend>
<h1><p style=color:green;align="center" How
to create a data entry form</p></h1>
<form method=""action""=>
<h2>Inquiry Form</h2>
<lable>Gender</lable></br>
<input
type="radio"value="male"name=gender/>Mal
e
<input
type="radio"value="female"name=gender/>Fe
male</br>
<lable>Course</lable></br>
<input type="checkbox" value="Dca"/>DCA
<input type="checkbox"
value="Pgdca"/>PGDCA
<input type="checkbox" value="Tally"/>TALLY
<input type="checkbox"
value="Internet"/>INTERNET</br>
<lable>Name</lable></br>
<input type="text" placeholder="Enter your
Name"/></br>
<lable>E-mail</lable></br>
<input type="E-mail" placeholder="Enter your
E-mail"/></br>
<lable>Mobile Number</lable></br>
<input type="tel" pattern="[0-9]
{10}"placeholder="Enter your
Number"/></br>
<lable>Message</lable></br>
<textarea></textarea></br>
<lable>Photo</lable></br>
<input type="file"/></br>
<lable>Signature</lable></br>
<input type="file"/></br>
<lable>Password</lable></br>
<input type="Password"/></br>
<button type="submit">Save</button>
<input type="submit" value="Go"/>
</form>
</body>
</head>
</html>
Click on File.
Click on save as.
Type Form (Part 5).htm on the File name box.
Select desktop on save location
Click on save.
Close Note pad.
Open the web File.
Show the result on web page.
Result
How to create a data entry form?(PART:-
6)
Open notepad.
Type the code.
<html>
<head>
<title> Form 5 </title>
<body>
<fieldset>
<legend>Enquiry From</legend>
<h1><p style=color:green;align="center" How
to create a data entry form</p></h1>
<form method=""action""=>
<h2>Inquiry Form</h2>
<lable>Gender</lable></br>
<input
type="radio"value="male"name=gender/>Mal
e
<input
type="radio"value="female"name=gender/>Fe
male</br>
<lable>Course</lable></br>
<input type="checkbox" value="Dca"/>DCA
<input type="checkbox"
value="Pgdca"/>PGDCA
<input type="checkbox" value="Tally"/>TALLY
<input type="checkbox"
value="Internet"/>INTERNET</br>
<lable>Name</lable></br>
<input type="text" placeholder="Enter your
Name"/></br>
<lable>E-mail</lable></br>
<input type="E-mail" placeholder="Enter your
E-mail"/></br>
<lable>Mobile Number</lable></br>
<input type="tel" pattern="[0-9]
{10}"placeholder="Enter your
Number"/></br>
<lable>Message</lable></br>
<textarea></textarea></br>
<lable>Photo</lable></br>
<input type="file"/></br>
<lable>Signature</lable></br>
<input type="file"/></br>
<lable>Password</lable></br>
<input type="Password"/></br>
<lable>Country</lable></br>
<Select>
<option>.....Select Country.....</option>
<option value="India">INDIA</option>
<option value="Pakistan">PAKISTAN</option>
<option value="China">CHINA</option>
<option value="Japan">JAPAN</option>
</select></br>
<button type="submit">Save</button>
<input type="submit" value="Go"/>
</form>
</body>
</head>
</html>
Click on File.
Click on save as.
Type Form (Part 5).htm on the File name box.
Select desktop on save location
Click on save.
Close Note pad.
Open the web File.
Show the result on web page.
Result