PRACTICAL · 1
HEADING IN HTML
CODING:
< html>
< head > < title > HEADING TAG USE </title> </head >
< body >
< center>
< hl > This is first level of heading tag .</hl >
< h2> This is second level of heading tag . </h2>
< h3 > This is third level of heading tag. </ h3>
< h4> This is fourth level of heading tag . </h4>
< hS> This is fi~h level of heading tag .</hS>
< h6> This is sixth level of heading tag. </h6>
</center>
</body >
</html >
OUTPUT:
This is first level of heading tag.
This is second level of heading tag.
This is third level of heading tag.
This is fourth level of heading tag.
This is fifth level of heading tag.
This Is sixth level of headlng tog.
PRACTICAL · 2
STYLES IN HTML
CODING:
<html>
< head > <title>STYLES IN HTML</title> </head >
<body> <center>
<b> This statement is written using bold tag. </b> <br>
<i> This statement is written using italic tag. </i> < br>
<u> This statement is written using underline tag. </u> <br>
</center > </body>
</html >
OUTPUT:
This statement is written using bold tag.
This statement is written using italic tag.
This statement is written using underline tag!.
PRACTICAL · 3
ORDERED AND UNORDERED LIST IN HTML
CODING:
<ht ml>
< head > < title> ORDERED and UNORDERED LIST USE</title> </head>
< body>
< al type="i" start=" l" >
<li> Ramesh </li >
<Ii> Suresh </ Ii>
< li> Mukesh </li>
</ al >
<ul t ype="square">
< li> Ramesh </li>
< Ii> Suresh </ Ii>
<li> Mukesh </li>
</ ul>
</body>
</html>
OUTPUT:
i. Ramesh
ii. Suresh
iii. Mukesh
• Ramesh
• Suresh
• Mukesh
PRACTICAL · 4
SUBSCRIPTS AND SUPERSCRIPTS IN HTML
CODING:
< html >
< head > < title> SUBSCRIPT and SUPERSCRIPT USE</tit le > </head >
< body> <center>
100 can also be written as 10 <sup > 2</sup > .< br>
Chemical Formula oygen is O< sub> 2</sub> .
</center> </body>
</html >
OUTPUT:
100 can also be written as 10 2 .
Chemical Formula oygen is 0 2.
PRACTICAL ·7
TABLE IN HTML
CODING:
< html>
< head > < title> Table </tltle> </head>
< body>
<hl align="center"><font size= "7"><u>Table </u></font>
< h2 align="center"><u> Annual Report of Class 10-A (2024-25) </u ></h2>
< h2 align="center"> Science </h2>
<table align= "center" border="3">< tr><th> Roll No. </th >
< th>Name</th > < th > Marks (out of 100)</th > </tr> < tr> < td
align= "center"> 1 </td >
<td align ="center"> Abhinav Slngh</td > < td align ="center" >93 </td> </tr> < tr>
<td align ="center"> 2 </td><td align= "center" >Bhavya Slngh</td>
<td align="center"> 95</ td > </ tr> < tr> < td align="center" > 3</td >
<td align="center"> Chlttrangana Gupta</td > < td allgn="center">86</td > </tr:>
<tr>< td allgn ="center" > 4 </td ><td align = "center" > Gyanendra Dubey</td >
<td allgn = "center"> 97</td > </tr> < tr> <td align="center" > S</td> < td
align= "center">
Kuna I Singh</td > < td align= "center"> 96 </td > </tr> < tr> < td
align = "center" > 6 </td>
<td align = "center"> Nikita Pandey </td > <td align= "center">90 </td > </tr> < tr>
<td align = "center">7</td><td align="center">Prashant Pathak</td ><td
align= "center" > 91
</td > < tr><td align ="center">8 </td >< td align="center">R1ddhima Patil </td >
<td align ="center"> 98 </td > </tr> < tr> <td align="center" > 9</td> < td
align = "center">
Taarika Sen </td> <td align="center" > 95 </td > </tr> < tr> < td
align = "center" > l0</td> <td align="center">Yuvraj Kannaujia</ td > <td
align = "center">96</td> </tr>
</table>
</hl>
</body>
</html >
OUTPUT:
Table
Annual ReP-ort of Class 10-A (2024-25).
Science
Roll No.II Name II Marks (out of 100)
1 II Abhinav Singh II 93
2 II Bhavya Singh II 95
3 Chittrangana Gupta 86
4 Gyanendra Dubey 97
5 Kunal Singh 96
6 Nikita Pandey 90
7 Prashant Pathak 91
8 Riddhima Patil 98
9 Taarika Sen 95
10 Yuvraj Kannaujia 96
PRACTICAL ·B
FORM IN HTML
CODING:
< htm l>
< head >
< t it le> Registration Form </title>
</head >
< body> < font size="6" > <u> Registration Form </u> </font > < br> <br>
< h3 ><form >
Name: <i nput type="text" name= "l " value = "" < br>< br>
Age : <input type= "text" name="2" value= '"'<br> < br>
Date of Birth : <input type="date" value="" name= "l"> < br>
Password : <input type="password" name= "l" < br>< br>
City : < select>
< option > Faizabad </option >
< option > Faridabad </option>
< option> Agra </option>
< option> Azamgarh </option >
</select>< br>
Gender: Male : < input type ="radio" value="male" name= "l "> Female :
<input type= "radio" value= "female" name =" l ">< br>
Course : <input type= "checkbox" value='"' name=" l" > C <input
type= "checkbox" value="" name= "2" > C++
< input type="checkbox" value='" ' name="3"> Python <input
type= "checkbox" value="" name= "4" > Java
<input type="checkbox" value="" name="S"> Scratch< br>
< input type="button" value ="SUBMIT" name=" l" action="POST" > < input
type= "button" value= "CANCEL" name="l" action ="POST">
</for m > </h3 >
</body> </html>
OUTPUT:
Registration Form
Name:
Age : --=======~
'--:-=:-:--:-::------::===================--
Date of Birth : I I v
Password : _____:====================--~
City : IFalzabad v I
Gender : Male : 0 Female : 0
Course : D C D C++ D Python D Java D Scratch
I SUBMIT I CANCEL I
PRACTICAL -9
FORM USING TABLE IN HTML
CODING:
< html>
< head > <title> Registration Form </t itle> </head>
< body ><br><br>
<font color="purple" size="S"> <center> < u > Registration Form for Computer
Online Course</u> </center> </font><br> < br>
< font color="black" slze ="4"><center><u >Grammar Academy Classes ( Batch:
2024-25)</u> </center> </font > < br> < br>
<center> <table border= "0" >
<form >
< tr>< td > Participant Name: </td ><td></td><td ></td>< td ><lnput
type= "text" name=" 1" value=""> </td > </tr> < tr> </tr>
< tr>< td > Father's name: </td >< td ></td ><td ></td >< td ><lnput type= "text"
name= "2" value=""> </td > </tr> <tr > </tr>
<tr>< td > Mother's name: </td >< td ></td >< td ></td >< td ><input type="text"
name="3" value=""> </td > </tr> <tr > </tr>
< tr>< td > Mobile no. : </td ><td ></td >< td></td ><td ><input type ="text"
name="4" value=""> </td > </tr> <tr> </tr>
< tr>< td > E-mail : </td ><td></td><td></td >< td ><input type ="text"
name="S" value=""></td > </tr> <tr> </tr>
<tr>< td > Date of Birth : </td ><td ></td ><td ></td><td ><input type="date"
name="l" value=""></td> </tr> < tr> </tr>
< tr>< td >Address: </td >< td ></td >< td ></td >< td ><input type="text"
name="2" value='"'> </td > </tr> <tr> </tr>
<tr> < td > Password : </td > < td ></td > < td> </td > <td > <input type="password"
name= " 1" value=""> </td > </tr> <tr> </tr>
<tr>< td >Confirm Password : </td ><td ></td ><td ></td ><td >< input
type="password" name=" l " value='"'> </td > </t r> < t r > </tr>
< tr>< td > Gender: </td >< td ></td >< td ></td >< td ><lnput type="radlo"
name="l" value="Male"> Male<input type ="radio" name="l "
value= "female"> Female</td > </tr> <tr> </tr>
< tr>< td >City:
</td > < td > </td> <td> </td > < td> < select> <option>Ayodhya</option> < option>
Prayagraj </option > <option> Lucknow </option> <option > Varanasi </option > </t
d > </tr> < tr> </tr>
< tr> < td > Course(s) : </td > <td> </td> < td> </td > < td > <input type="checkbox"
name=" l" value="">C < input type ="checkbox" name="2" value="">C++
<input type ="checkbox" name="3" value="" > Java<input type="checkbox"
name="4"
value= "">Python</td > </tr> <tr> </tr> < tr> <td> </td> </t r> < tr> </tr>
<tr>< td > </td > <td> < Input type="button" value= "SUBMIT'' name= "l"
actlon="Post"> </td > < td > </td > < td > <input type= "button" value="CANCEL"
name="2" action="Post" > </td > </tr>
</form>
</table>
</center> </body> </HTML>
OUTPUT:
Reg istration Form for Comguter Online Course
Grammar AcademY. Classes (Batch: 2024-25).
Participant Name :
Father's name:
Mother's name:
Mobile no.:
E-mail :
Date of Birth :
Address :
Password :
Confirm Password :
Gender : 0 Male O Female
City : IAyodhya vi
Course(s) : D C DC++ D Java D Python
I SUBMIT 11 CANCEL I
PRACTICAL ·10
LINK IN HTML
CODING:
< htm l>
< head><t it le> IMAGE TAG USE </title></head >
< body> < center>
Click < a href="heading.html"> Heading .html</a> to open Heading
Practical. < br>
Click < a href= "style.html"> Style.html < /a > to open Style Practical. < br>
Click <a href="list.html"> List.html </a> to open List Practical. < br>
Click < a href="image.html"> lmage.html </a> to open Image Practlcal. < br>
Cilek < a href="form .html" > Heading.html </a> to open Form Practical. < br>
</center> </body>
</html> </body> </html>
OUTPUT:
Click Heading. htrnl to open Heading Practical.
Click Style.htn1I to open Style Practical.
Click Li st.html to open List Practical.
Click lmage.htrnl to open Image Practical.
Click Heading.html to open Form Practical.
PRACTICAL · 1
HEADING IN HTML
CODING:
< HTML>
< HEAD>
< TITLE> HEADING IN HTML</TITLE>
</HEAD>
< BODY>
< Hl > THIS IS TEXT IN HEADING 1. </Hl >
< H2 > THIS IS TEXT IN HEADING 2. </H2>
< H3> THIS IS TEXT IN HEADING 3. </H3>
< H4> THIS IS TEXT IN HEADING 4. </H4>
< HS > THIS IS TEXT IN HEADING 5. </HS>
< H6> THIS IS TEXT IN HEADING 6. </H6>
</BODY>
</HTML>
OUTPUT:
THIS IS TEXT IN HEADING 1.
T HIS IS T EXT IN HEADING 2.
T HIS IS T EXT IN HEADING 3.
THIS IS TEXT IN HEADING 4.
THIS IS TEXT IN HEADING 5.
THIS IS TEXT IN HEADING 6.
PRACTICAL · 2
PARAGRAPH IN HTML
CODING:
HTML>
<HEAD>
<TITLE>PARAGRAPH IN HTML</TITLE>
</HEAD>
< BODY>
<CENTER>< Hl > PARTS OF COMPUTER </Hl >
</CENTER>
< P ALIGN ="LEFT" > KEYBOARD IS A TYPEWRITER LIKE INPUT
DEVICE USED VERY COMMONLY WITH THE COMPUTER TO
ENTER DATA IN THE FORM OF TEXT. </P>< BR>
< P ALIGN ="CENTER">MOUSE IS A POINTING DEVICE USED
COMMONLY WITH T HE DESKTOP COMPUTERS TO INPUT DATA
AND INSTRUCTIONS. </P>< BR>
< P AUGN ="RIGHT" > MONITOR IS THE MOST COMMON
OUTPUT DEVICE USED WITH THE COMPUTER IT SHOWS THE
OUTPUT PRODUCED BY THE COMPUTER AFTER PROCESSING
OF DATA. </P>
</BODY> </HTML>
OUTPUT:
PARTS OF COMPUTER
KEYBOARD IS A TYPEWRITER LIKE INPUT DEVICE USED VERY COMMONLY WITH THE COMPUTER TO ENTER
DATA IN THE FORM OF TEXT.
MOUSE IS A POINTING DEVICE USED COMMONLY WITH THE DESKTOP COMPUTERS TO INPUT DATA AND
INSTRUCTIONS.
MONITOR IS THE MOST COMMON OUTPUT DEVICE USED WITH THE COMPUTER IT SHOWS THE OUTPUT
PRODUCED BY THE COMPUTER AFTER PROCESSING OF DATA.
PRACTICAL · 3
STYLES IN HTML
CODING:
< HTML>
< HEAD >
<TITLE> STYLES IN HTML</TITLE>
</HEAD >
< BODY>
< CENTER>
< Hl >< U> STYLES IN HTML</U></Hl >< BR>< BR>
<B> THIS IS TEXT IN BOLD STYLE. </B>< BR>< BR>
< I > THIS IS TEXT IN ITALIC STYLE. </I >< BR>< BR>
< U> THIS IS TEXT IN UNDERLINE STYLE . </U>
</CENTER>
</BODY>
</HTML>
OUTPUT:
STYLES IN HTML
THIS IS TEXT IN BOLD STYLE.
THIS IS TEXT IN ITALIC STYLE.
THIS IS TEXT IN UNDERLINE STYLE.
PRACTICAL · 4
SUBSCRIPTS AND SUPERSCRIPTS IN HTML
CODING:
< HTML>
< HEAD >
<TITLE > SUBSCRIPTS AND SUPERSCRIPTS IN HTML</TITLE>
</HEAD>
< BODY>
< CENTER>
< Hl ><U> CHEMICAL REACTIONS USING SUBSCRIPTS </U></Hl >< BR>
< H2> H< SUB> 2 </SUB> SO< SUB> 4 </SUB> + 2NaOH • Na < SUB> 2</SUB> SO
< SUB >4 </SUB > + 2H < SUB> 2</SUB> O< BR>
2H < SUB> 2</SUB> + O< SUB> 2</SUB> -- >
2H < SUB> 2</SUB> O< BR></H2>< HR>
< Hl ><U> MATHS FORMULAS USING SUPERSCRIPTS </U></Hl >< BR>
< H2>(a+b)< SUP> 2</SUP> = a < SUP> 2</SUP> + b < SUP> 2</SUP> +.2ab< BR>
(a+b)< SUP> 3 </SUP> = a < SUP> 3 </SUP> + b< SUP> 3 </SUP> + 3ab
(a+ b)</H2 >
</CENTER>
</BODY>
</HTML>
OUTPUT:
CHEMICAL REACTIONS USING SUBSCRIPTS
H2S04 + 2NaOH --> Na2S04 + 2H2 0
2H2 + 02 --> 2H 20
MATHS FORMULAS USING SUPERSCRIPTS
(a+b) 2 = a2 + b 2 + 2ab
(a+b) 3 = a3 + b 3 + 3ab (a+b)
PRACTICAL · S
ORDERED AND UNORDERED LIST IN HTML
CODING:
< HTML>
< HEAD >
<TITLE > ORDERED AND UNORDERED LISTS</TITLE>
</HEAD>
< BODY>
< CENTER>< H 1 > < U > ORDERED LIST </U> </H1 > </CENTER> < BR>
< H3><0L TYPE=" l" START=" l ">
< Ll > MAHENDRA SI NGH DHONI</LI >
< Ll >SACHIN TENDULKAR</LI >
< Ll >VIRAT KOHLI< / LI >
< LI > ROH IT SHARMA</LI > </OL> </H3> < BR>
< CENTER>< Hl > < U> UNORDERED LIST </U> </Hl ></CENTER>< BR>
< H3><UL TYPE=" DISC" >
< Ll > MAHENDRA SI NGH DHONI</LI >
< Ll > SACHIN TENDULKAR</LI>
< Ll > VIRAT KOHLI</LI>
< LI > ROH IT SHARMA</LI > </UL> </H3 >
</BODY>
</HTML>
OUTPUT:
ORDERED LIST
1. MAHENDRA SINGH DHONI
2 . SACHIN TENDULKAR
3 . VIRAT KOHLI
4. ROHIT SHARMA
UNORDERED LIST
• MAHENDRA SINGH DHONI
• SACHIN TENDULKAR
• VIRAT KOHLI
• ROHIT SHARMA
PRACTICAL -6
TABLE IN HTML
CODING:
< HTML>
< HEAD>
<TITLE>TABLE IN HTML</TITLE>
</HEAD>
< BODY>
< CENTER><Hl >< U>TABLE IN HTML</U ></Hl ><BR>
< H3 ><TABLE BORDER= "2"> <TR><TH > PLAYER</TH ><TH>T201 </TH>
<TH> ODI </TH > <TH> TEST </TH> <TH >IPL</TH> </TR>
<TR> <TD> MS DHONl </TD ><TD> l617</TD> <TD> 10773</TD > <TD> 4876
</TD><TD> 5243 </TD ></TR>
<TR> <TD> SACHIN TENDULKAR</TD><TD> 10</TD><TD> 18426</TD >
<TD> 15921 </TD ><TD> 2334 </TD> < /TR >
<TR><TD> VIRAT KOHLI</TD><TD> 4188</TD ><TD> 13906</TD ><TD > 9040
</TD> <TD> 8004</TD> </TR>
<TR> <TD> ROH IT SHARMA </TD> <TD> 4231 </TD> <TD> 10886</TD > <TD>
4270 </TD> <TD> 6628</TD> </TR> </TABLE> </H3 >
</BODY>
</HTML>
OUTPUT:
TABLE IN HTML
I PLAYER IIT20111 ODI II TEST IIJill
IMS DHONI 11, 6171110773114876 II52431
ISACHIN TENDULKARIII[Jl18426ll15921 ll2334I
IVIRAT KOHLI 1141aa1113906119040 llaoo41
IROHIT SHARMA 114231 1110886114270 1166281
PRACTICAL · 9
FORM IN HTML
CODING:
<HTML><HEAD><TITLE>FORM WITH TABLE IN HTML</TITLE></HEAD> < BODY>
<CENTER><Hl><U>SCHOOL ENTRANCE EXAM REGISTRATION FORM</U> </Hl><BR><H3>
<TABLE BORDER="0"> < FORM>
<TR> <TD>FIRST NAME : </TD> <TD> </ID> <TD> </TD> <TD> < INPUT TYPE="TEXT" NAME=" 1"
VALUE=""> </TD></TR>
<TR> <TD> LAST NAME : </TD> <TD> </ID> <TD></TD> <TD> < INPUT TYPE="TEXT" NAME="2"
VALUE=""> </TD> </TR>
<TR> <TD>DOB :</TD> <TD> </TD><TD></TD><TD> < INPUT TYPE•"DATE" NAME="l "
VALUE=""> </TD> </TR>
<TR> <TD>GENDER : </TD> <TD> </TD> <ID> </TD> <TD> < INPUT TYPE="RADIO" NAME=" 1"
VALUE="MALE">MALE < INPUT TYPE="RADIO" NAME=" 1" VALUE="FEMALE"> FEMALE</TD> </TR>
<TR> <TD>CLASS : </TD> <TD> </TD> <TD> </TD> <TD>< INPUT TYPE="RADIO" NAME="2"
VALUE="l">NUR. < INPUT TYPE,."RADIO" NAME,."2" VALUE,."V">V</TD> </TR>
<TR><TD> </TD><TD></TD> <TD> </TD><TD><INPUT TYPE="RADIO" NAME="2"
VALUE="IX"> IX < INPUT TYPE="RADIO" NAME="2" VALUE="XI "> XI </TD> </TR>
<TR> <TD>ADDRESS : </TD> <TD> </TD> <ID> </TD> < TD> < INPUT TYPE="TEXT" NAME= "3"
VALUE=""> </TD> </TR>
<TR> <TD>CITY : </TD> <TD> </TD> <TD> </TD> <TD> <SELECT>
< OPTION> AYODHYA</OPTION> < OPTION> ALLAHABAD</OPTION><OPTION>
RAEBARELJ </OPTION> < OPTION> BASTJ </OPTION> < OPTION> LUCKNOW </OPTION > </SELECT></
TD></TR>
<TR> <TD>MOBILE : </TD> <TD> </TD> <TD> </TD> <TD> < INPUT TYPE ="NUMBER" NAME="<!"
VALUE=""> </TD></TR>
<TR><TD>E MAIL: </TD><TD> </TD><TD> </TD><TD><INPUT TYPE="TEXT'' NAME="S"
VALUE=""> </TD> </TR>
<TR> <TD> < INPUT TYPE="BUTTON" NAME="l" VALUE="SUBMIT"
ACTION="POST"> </TD><TD> </TD> <ID> </TD> <ID> < INPUT TYPE="BUTTON" NAME=" 1"
VALUE="RESET" ACTION="POST"> </TD> </TR>
</FORM> </TABLE > </HJ> </CENTER> </BODY> </HTML>
OUTPUT:
REGISTRATION FORM
NAME1PRAKHAR SHUKLA
PASSWORD: ••······
~----------~
GENDER: @ MALE O FEMALE
SELECT CITY➔ LUCKNOW VI
EDUCATION: 0 10TH PASS O 12TH PASS ~ OTHER
I SUBMIT 11 RESET I
PRACTICAL · 10
FORM WITH TABLE IN HTML
CODING:
< HTML><HEAD><TITLE> FORM WITH TABLE IN HTML</TITLE></HEAD><BODY>
<CENTER><Hl><U> SCHOOL ENTRANCE EXAM REGISTRATION FORM </U> </Hl ><BR><HJ >
<TABLE BORDER="0"> < FORM>
<TR><TD> FIRST NAME :</TD><TD></TD><TD></TD><TD> <INPUT TYPE= "TEXT" NAME2 " l "
VALUE•""> </TD> </TR>
<TR> <TD> l.AST NAME : </TD> <TD> </TD> <TD> </TD> <TD> <INPUT TYPE= "TEXT" NAME= "2"
VALUE=""> </TD> </TR>
<TR> <TD> DOB : </TD> <TD> </TD> <TD> </TD> < TD> <INPUT TYPE="DATE" NAME= " l "
VALUE=""> </TD> </TR>
<TR> <TD> GENDER : </TD> < TD> </TD> <TD> </TD> <TD> <INPUT TYPE="RADIO" NAME= " 1"
VALUE="MALE">MALE < INPUT TYPE= "RADIO" NAME=" 1" VALUE= "FEMALE"> FEMALE</TD> </TR>
<TR> <TD> CLASS : </TD> <TD> </TD> <TD> </TD> <TD> < INPUT TYPE= "RADIO" NAME="2"
VALUE="l "> NUR. < INPUT TYPE="RADIO" NAMEs "2" VALUE = "V">V</TD> </TR>
<TR> <TD> </TO> <TD> </TD> <TO> </TD> <TD> <INPUT TYPE="RADIO" NAME="2"
VALUE="IX">lX < INPUT TYPE="RADIO" NAME="2" VALUE= "XI"> Xl </TD></TR>
<TR> <TD> ADDRESS : </TD > <TD> </TD> <TD> </TD> <TD> < I NPUT TYPE="TEXT" NAME= "J"
VALUE=""> </TD> </TR>
<TR> <TD> CITY : </TD> <TO> </TD> <TD> </TD> <TD> < SELECT>
<OPTION> AYODHYA</OPTION > <OPTION> ALLAHABAD</OPTION><OPTION >
RAEBARELJ </OPTION> <OPTION> BASTI </OPTION> < OPTION> LUCKNOW </OPTION > </SELECT></
TD ></TR>
<TR> <TD> MOBILE : </TD> < TD></TO> <TD> </TD> <TD> < INPUT TYPE ="NUMBER" NAME= "4"
VALUE=""> </TD> </TR>
<TR> <TD> E MAIL: </TD> <TD> </TD> <TD> </TD> < TD>< INPUT TYPE= "TEXT" NAME="S"
VALUE=""> </TD> </TR>
<TR> <TD> < INPUT TYPE= "BUTTON" NAME= " 1" VALUE="SUBMIT"
ACTION="POSr> </TD> <TD> </TD> <TD> </TD> <TD> <INPUT TYPE= "BUTTON" NAME=" l "
VALUE="RESET" ACTION= "POST"> </TD> </TR>
</FORM> </TABLE> </HJ> </CENTER> </ BODY> </HTML>
OUTPUT:
SCHOOL ENTRANCE EXAM REGISTRATION FORM
FIRST NAME :
LAST NAME :
DOB : vi
GENDER : 0 MALE O FEMALE
CLASS : O NUR. O v
O 1x O x1
ADDRESS :
CITY : !AYODHYA vi
MOBILE :
EMAIL:
I SUBMIT I I RESET I