Basic Web Programming With HTML: Lab Manual

Class VII
Basic Web Programming

with HTML
Lab Manual
By:
Computer Department
DPS - Bopal
Class: VII Basic Web Programming with HTML Lab Manual
Q1-HTML code to show the different levels of <Hn> tag and <P> tag

<HTML>
<HEAD>
<TITLE> Heading and Paragraph tag</TITLE>
</HEAD>
<BODY>
<H1> DPS </H1>
<H2> DPS </H2>
<H3> DPS </H3>
<H4> DPS </H4>
<H5> DPS </H5>
<H6> DPS </H6>
<P>Type a very big paragraph </P>
</BODY>
</HTML>
Do by yourself:
 Create a webpage to display your name, class, section and your hero’s name in different font
size.
Q2-HTML code for levels of heading (<Hn tag) and <P> tag with its attributes

<HTML>
<HEAD>
<TITLE> Levels of <Hn> and <P> tag with attributes </TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER"> We are DPS students. </H1>
<H2 ALIGN="RIGHT"> We are DPS students. </H2>
<H3 ALIGN="JUSTIFY"> We are DPS students. </H3>
<H4> We are DPS students. </H4>
<H5>The following paragraph is CENTER ALIGNed</H5>
<P ALIGN="CENTER"> Type a very big paragraph here</P>
<H5>The following paragraph is RIGHT ALIGNed</H5>
<P ALIGN="RIGHT"> Type a very big paragraph here</P>
<H5>The following paragraph is JUSTIFY ALIGNed</H5>
<P ALIGN="JUSTIFY"> Type a very big paragraph here</P>
</BODY>
</HTML>
Do by yourself:
 Create a webpage to show value of the month and write few sentence about the topic.
Q3. HTML code for <BR>,<NOBR>,<B>,<U>,<I>,<CENTER> tag


<HTML>
<HEAD>
<TITLE> BR NOBR B U I CENTER tags</TITLE>
</HEAD>
Page 2 Computer Department

<BODY>
<P><NOBR> Type a very big paragraph</p>
<BR>Delhi Public School <BR> Delhi Public School <BR> Delhi Public School <BR>
<B> DPS</B> <BR>
<U> PS</U> <BR>
<I> DPS</I> <BR>
<B> <U> <I> DPS </I> </U> </B> <BR>
<CENTER> DPS</CENTER> <BR>
</BODY>
</HTML>
Q4. HTML code for <HR> tag with attributes, <SUB> and <SUP>, <FONT> tags

<HTML>
<HEAD>
<TITLE> HR with attribute SUB and SUP and FONT tags</TITLE>
</HEAD>
<BODY>
<HR>
<H1>DPS</H1>
<HR ALIGN ="center" SIZE="8" WIDTH ="50%" NOSHADE><BR>
<H2>Subsript</H2>
Water=H<sub>2</sub>O <BR>
<H2>Supersript</H2> E=MC<sup>2</sup> <BR>
<FONT COLOR=”RED” FACE=”CHILLER” SIZE=”6”>Delhi Public School”</FONT>
</BODY>
</HTML>
Do by yourself:
 Create a webpage to show the page of a diary. Show date in ddth Month, yyyy (ex 19th June
2017) as the first line. Draw a line below that. Write page of a diary in a different font of your
choice. Make important words in Bold, Italics & underline. All sentences must start with new
line. At the end draw another line in different color.
Q5. HTML code for BODY tag and attributes-BGCOLOR & TEXT
 <HTML>
<HEAD>
<TITLE> Attribute of BodyTags</TITLE>
</HEAD>
<BODY BGCOLOR="Yellow" Text= “Blue”>
<H1>Computer</H1>
<P>Type a paragraph about Computer </P>
</BODY>
</HTML>
Q6. HTML Code for Body tag with attribute BACKGROUND


<HTML>
<HEAD>
<TITLE> Attribute of Body tag Attribute BACKGROUND</TITLE>
</HEAD>

<BODY BACKGROUND="Path of an image" >

<H1>Computer</H1>
<P>Type a paragraph about Computer </P>
</BODY>
</HTML>
***Note:
How to write path of an image in <BODY BACKGROUND=
1. Put double quotation mark
2. Right click on the picture you want to insert.
3. Select Properties From the Popup menu
4. Copy the location and paste in the note pad after the double quotation mark
5. Just after the copied path, put back slash (\)
6. Then enter the name of the image
7. Put a dot(.) just after the name and type the extension of the image and then close the double
quotation mark.
Type of extension .JPG for JPEG or JPG
.BMP for Bit map
.GIF for GIF
.PNG for PNG
Do by yourself:
 Create a webpage to display your School’s name in the center & in different color. Also display
school’s image in the background. Use attributes of <BODY> tag
Q7. HTML code for <OL> tag (Ordered List)


<HTML>
<HEAD>
<TITLE>OL tags</TITLE>
</HEAD>
<BODY>
<H2>LI (LIST ITEM) Tag</H2>
<LI>GANGA</LI>
<LI>KAVERI</LI>
<LI>MAHI</LI>
<LI>NARNATA</LI>
<LI>SABARMATI</LI>
<LI>TAPTI</LI>
<H2>OL (Ordered List) tag without attribute</H2>
<H3>Animals (Ordered List)</H3>
<OL>
<LI>Lion</LI>
<LI>Tiger </LI>
</OL>
<H2>OL (Ordered List) tag with attribute</H2>
<OL TYPE= “A/a/I/i” START= “2”>
<LI>Lion</LI>
<LI>Tiger </LI>
</OL>
</BODY>
</HTML>

Q8. HTML code for <UL> tag (Unordered List)


<HTML>
<HEAD>
<TITLE>UL tags</TITLE>
</HEAD>
<BODY>
<H2>UL (Unordered List) tag without attribute</H2>
<H3>Animals (Unordered List)</H3>
<UL>
<LI>Lion</LI>
<LI>Tiger </LI>
</UL>
<H2>UL (Unordered List) tag with attribute</H2>
<UL TYPE= “disc/circle/square”>
<LI>Lion</LI>
<LI>Tiger </LI>
</UL>
</BODY>
</HTML>
Do by yourself:
 Create a webpage to display your friend’s name in numbered list using <OL> tag and its
attributes
 Create a webpage to display your hero’s in bulleted list using <UL> tag and its attributes
Q9. HTML code for NESTED<OL> tag (Ordered List)


<HTML>
<HEAD>
<TITLE>Nested OL></TITLE> </HEAD>
<BODY>
<H4 align= “Center’>Nested OL tag </H4>
<OL>
<B><LI>Animals</LI></B>
<OL TYPE= “A”>
<LI>Lion</LI>
<LI>Tiger</LI>
<LI>Deer</LI>
</OL>
<B> <LI>Birds</LI></B>
<OL TYPE= “i”>
<LI>Cuckoo</LI>
<LI>Martin</LI>
<LI>Tailor Bird</LI>
</OL>
<B> <LI>Insects</LI></B>
<OL TYPE= “a”>
<LI >Honey Bee</LI>
<LI>Butter fly</LI>
<LI>Fire fly</LI>
</OL>
</OL>

</BODY>
</HTML>
Do by yourself:
 Create the following webpage
Q10. HTML code for NESTED<UL> tag (Unordered List)


<HTML>
<HEAD>
<TITLE>Nested UL></TITLE> </HEAD>
<BODY>
<H4 align= “Center’>Nested UL tag </H4>
<UL>
<B><LI>Animals</LI></B>
<UL TYPE= “circle”>
<LI>Lion</LI>
<LI>Tiger</LI>
<LI>Deer</LI>
</UL>
<B> <LI>Birds</LI></B>
<LI>Cuckoo</LI>
<LI>Martin</LI>
<LI>Tailor Bird</LI>
</UL>
<B> <LI>Insects</LI></B>
<LI >Honey Bee</LI>
<LI>Butter fly</LI>
<LI>Fire fly</LI>
</UL>
</UL>
</BODY> </HTML>

Q11. HTML code for Definition List


<HTML>
<HEAD>
<TITLE>Definition List</TITLE>
</HEAD>
<BODY>
<H4> Animals </H4>
<FONT SIZE="6">
<DL>
<DT>Lion</DT>
<DD>Type a paragraph about Lion</DD>
<DT> Tiger</DT>
<DD> Type paragraph about Tiger</DD>
<DT> Deer</DT>
<DD> Type a paragraph about Deer</DD>
</DL>
</FONT>
</BODY>
</HTML>
Q12. HTML code for Internal Image


<HTML>
<HEAD>
<TITLE>Internal Image</TITLE>
</HEAD>
<BODY>
<H1 ALIGN = “center”> Internal Image </H1>
<IMG SRC= "path of an image"> <br>
<H1 ALIGN = “center”> Internal Image with all attributes</H1>
<IMG SRC= " path of an image " BORDER= "5" ALIGN= "center" ALT= "Image not present" HEIGHT=
"25%" WIDTH= "25%">
</BODY>
</HTML>
Do by yourself:
 Create a webpage to display different types of pollutions (ex: air pollution, water pollution, soil
pollution etc…) and its explanation using <DL> tag. Insert related images below that.
 Create the following :

Do by yourself:
 Create a webpage to display different types of pollutions (ex: air pollution, water pollution, soil
pollution etc…) and its explanation using <DL> tag. Insert related images below that.
 Create the following :
Q13. HTML code for Simple Table

<HTML>
<HEAD> <TITLE> Simple Table</TITLE>
</HEAD>
<BODY>
<H1 align = “center”> Simple Table </H1>
<TABLE BORDER=”1”>
<CAPTION> SIMPLE TABLE</CAPTION>
<TR>
<TH> RNO</TH>
<TH> ADMN.NO. </TH>
<TH> NAME</TH
</TR>
<TR>
<TD> 1</TD>
<TD> 3288 </TD>
<TD> Aditya Rathi </TD>
</TR>
<TR>
<TD> 2</TD>
<TD> 3234 </TD>
<TD> Taniya Shah</TD>
</TR>
<TR>
<TD> 3</TD>
<TD> 3244 </TD>
<TD> Namita Patel</TD>
</TR>
</TABLE>
</BODY>
</HTML>

Q14. HTML code for Table and its Attributes

<HTML>
<HEAD> <TITLE> Simple Table with attributes of table tag</TITLE> </HEAD> <BODY>
<H1 align = “center”>Table with attributes of TABLE tag</H1>
<TABLE BORDER="1" WIDTH ="250" /WIDTH="80%"
BGCOLOR="pink" BACKGROUND=”Path of an image”
BORDERCOLORLIGHT="red" BORDERCOLORDARK="green"
CELLSPACING="5" CELLPADDING="8"
ALIGN="center" HEIGHT="80%">
<CAPTION> Table with attributes of TABLE tag</CAPTION>
<TR>
<TH> RNO</TH>
<TH> ADMN.NO. </TH>
<TH> NAME</TH
</TR>
<TR>
<TD> 1</TD>
<TD> 3284 </TD>
<TD> Aditya Rathi</TD>
</TR>
<TR>
<TD> 2</TD>
<TD> 3234 </TD>
</TR>
<TR>
<TD> 3</TD>
<TD> 3244 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Do by yourself:
 Create a webpage to display your time table.
Q15. HTML code for Simple Table with attribute of TR

<HTML>
<HEAD>
<TITLE> Simple Table with attribute of TR </TITLE>
</HEAD>
<BODY>
<H1 align = “center”>Table with attribute of TR </H1>
<TABLE BORDER="1">
<CAPTION> Table with attribute of TR </CAPTION>
<TR BGCOLOR="red" BACKGROUND=”Path of an Image”
ALIGN=”left/right/center” VALIGN=”TOP/MIDDLE/BOTTOM”>
<TH> RNO</TH>
<TH> ADMN.NO. </TH>
<TH> NAME</TH
</TR>
<TR BGCOLOR="yellow" BACKGROUND=”Path of Image”

<TD> 1</TD>
<TD> 3284 </TD>
</TR>
<TR BGCOLOR="blue" BACKGROUND=”Path of Image”
<TD> 2</TD>
<TD> 3234 </TD>
</TR>
<TR BGCOLOR="pink" BACKGROUND=”Path of Image”
<TD> 3</TD>
<TD> 3244 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Do by yourself:
 Create a webpage to display your time table and make it more attractive using attribute of
<TABLE> tag.
Q16. HTML Code for attributes of TH and TD

<HTML>
<HEAD>
<TITLE>Table with attributes of TH and TD</TITLE>
</HEAD>
<BODY>
<H1 align = “center”> Table with attributes of TH and TD </H1>
<CAPTION> Table with attributes of TH and TD</CAPTION>
<TR>
<TH WIDTH=”10%” ALIGN=”center” BGCOLOR=”RED” VALIGN=”MIDDLE”
NOWRAP> RNO</TH>
<TH WIDTH=”20%” ALIGN=”center” BGCOLOR=”BLUE” > ADMN.NO. </TH>
<TH WIDTH=”50%” ALIGN=”center” BGCOLOR=”GREEN” > NAME</TH
</TR>
<TR>
<TD WIDTH=”10%” ALIGN=”center” BGCOLOR=”RED” > 1</TD>
<TD WIDTH=”20%” ALIGN=”center” BGCOLOR=”BLUE”> 3284 </TD>
<TD WIDTH=”50%” ALIGN=”center” BGCOLOR=”GREEN”> Anagha </TD>
</TR>
<TR>
<TD WIDTH=”10%” ALIGN=”center” BGCOLOR=”RED”> 2</TD>
<TD WIDTH=”50%” ALIGN=”center” BGCOLOR=”GREEN”> Taniya S.</TD>
</TR>

<TR>
<TD WIDTH=”10%” ALIGN=”center” BGCOLOR=”RED”> 3</TD>
<TD WIDTH=”50%” ALIGN=”center” BGCOLOR=”GREEN”> Namita P.</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Do by yourself:
 Create a webpage to display a table of your mark list, containing subject and grade. Apply
attributes of TR, TD/TH tags
Q7. HTML code for the following table using attribute of TH/TD – COLSPAN STUDENTS LIST
<HTML>
<HEAD>
<TITLE> Simple Table with attribute of TH/TD COLSPAN</TITLE> </HEAD>
<BODY>
<H1 align = “center”> TABLE with COLSPAN </H1>
<CAPTION> TABLE with COLSPAN</CAPTION>
<TR>
<TH COLSPAN ="3">STUDENTS LIST</TH>
</TR>
<TR>
<TH > RNO</TH>
<TH> ADMN.NO. </TH>
<TH> NAME</TH
</TR>
<TR>
<TD> 1</TD>
<TD> 3284 </TD>
</TR>
<TR>
<TD> 2</TD>
<TD> 3234 </TD>
</TR>
<TR>
<TD> 3</TD>
<TD> 3244 </TD>
</TR>
</TABLE>
</BODY>
</HTML>
Q18. HTML code for the following table using attribute of TH/TD – ROWSPAN
<HTML>
<HEAD>
<TITLE> Simple Table attribute of TH/TD ROW SPAN </TITLE>
</HEAD>

<BODY>
<HI ALIGN =”center” >SIMPLE TABLE attribute of TH/TD ROWSPAN</H1>
<TABLE BORDER =”1”>
<CAPTION>Simple table with ROWSPAN </CAPTION>
<TR>
<TH> CLASS</TH>
<TH>CLASS AND<br> SECTION</TH>
<TH>NO. OF <br>STUDENTS</TH>
</TR>
<TR>
<TD ALIGN ="center" ROWSPAN="3">1</TD>
<TD ALIGN="center"> 1 A</TD>

<TD ALIGN ="center">40</TD> </TR>
<TR>
<TD ALIGN="center" > 1 B</TD>
<TD ALIGN ="center">39</TD>
</TR>
<TR>
<TD ALIGN="center" > 1 C</TD>
</TR>
<TR>
<TD ALIGN= "center" ROWSPAN="3">2</TD>
<TD ALIGN="center" > 2 A</TD>
<TR>
</TR>
<TR>
</TR>
<TR>
<TD ALIGN ="center" ROWSPAN="3">3</TD>
<TD ALIGN="center" > 3 A</TD>
<TR>
</TR>
<TR>
</TR>
</TABLE>
</BODY> </HTML>

Do by yourself:
 Create the following webpage using rowspan & colspan
DELHI PUBLIC SCHOOL
Total no. of students-Section wise for Class VII
Class Section Strength
A 38
VII B 41
C 40
Q19. HTML code for Simple Table with images

<HTML>
<HEAD>
<TITLE> TABLE OF IMAGES</TITLE> </HEAD>
<BODY>
<H1 align = “center”> TABLE OF IMAGES </H1>
<CAPTION> TABLE OF IMAGES</CAPTION>
<TR>
<TD> <img src="path of an image"</TD>
<TD> <img src=" path of an image "</TD>
</TR>
<TR>
<TD> <img src="path of an image"</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Q20. HTML code for Internal Linking

<HTML>
<HEAD>
<TITLE>Internal Linking</TITLE>
</HEAD>
<BODY BGCOLOR="#FF99FF" TEXT="#9900CC">
<H1 ALIGN = "center"> Internal Links</H1>
<HR WIDTH="30%" ALIGN="center">
<P> Here you can see different question papers</P>
<A HREF="#QP1">Question Paper 1</A> <BR>


<BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>
<A NAME="QP1">
<FONT COLOR="#CC0099">
<H1>Question Paper 1</H1>
Q1<BR><BR><BR><BR> Q2<BR><BR><BR><BR> Q3<BR><BR><BR><BR>
Q10<BR><BR><BR><BR>
</FONT>
<A NAME="QP2">
<FONT COLOR="#000099">
Q10<BR><BR><BR><BR>
</FONT>
<A NAME="QP3">
Q10<BR><BR><BR><BR>
</FONT>
<A NAME="QP4">
Q10<BR><BR><BR><BR>
</FONT>
</BODY>
</HTML>
Do by yourself:
 Create a webpage of DPS with the following content. Insert some pictures of your school in the
top of the web page. Then create a para about general information about the school. Then
create internal link for the following. 1, Preprimary, 2. Primary, 3. Secondary, 4. Senior
Secondary. Below that create a writeup each. Create an internal hyperlink to connect these
four heading with the write up.
Q21. HTML code for External Linking

(Save this file as Q21.html)
<HTML>
<HEAD>
<TITLE>External Linking</TITLE>
</HEAD>


<H1 ALIGN = "center"> External Links</H1>
<P> Here you can see different question papers Click to see paper</P>
<A HREF="QP1.HTML">Question Paper 1</A> <BR>
</BODY>
</HTML>
Q22. HTML code for External Linking-This is a sub program for Q21 -First link.
(Save this file name Qp1.html)
<HTML>
<HEAD>
</HEAD>
<H1 ALIGN = "center"> External Links- Question Paper1</H1>
Q10<BR><BR><BR><BR>
</FONT>
<A HREF="Q21.HTML">Click here to go to Home Page

</A>
</BODY>
</HTML>
Q23. HTML code for External Linking-This is a sub program for Q21 - Second link.
(Save this file as Qp2.html)
<HTML>
<HEAD>
</HEAD>
<H1 ALIGN = "center"> External Links - Question Paper 2</H1> <HR WIDTH="30%"
ALIGN="center">
Q10<BR><BR><BR><BR>
</FONT>
<A HREF="Q21.HTML"> Click here to go to Home Page</A>
</BODY>
</HTML>

Q24. HTML code for External Linking-This is a sub program for Q9 - Third link.
<HTML>
<HEAD>
</HEAD>
<H1 ALIGN = "center"> External Links - Question Paper 3</H1>
Q10<BR><BR><BR><BR>
</FONT>
<A HREF="Q21.HTML">Click here to go to Home page</A>
</BODY>
</HTML>
Q25. HTML code for External Linking-This is a sub program for Q21 - Fourth link.
<HTML>
<HEAD>
</HEAD>
<H1 ALIGN = "center"> External Links-Question Paper 4</H1>
Q10<BR><BR><BR><BR>
</FONT>
<A HREF="Q21.HTML"> Click here to go to Home Page</A>
</BODY>
</HTML>
Do by yourself:
 Change the webpage you created for Internal Hyperlink to External Hyperlink.
 Create a Webpage of activities conducted in your school. When you click on the activity, an
image should appear in a different window.
 Create a webpage of different buildings of your school. When you click on these buildings the
details must show in the screen
Q26. HTML code for Forms -Text box

<HTML>
<HEAD>
<TITLE>Forms - Text Box</TITLE>
</HEAD>


<H1 ALIGN = "center"> Forms -Text Box</H1> <BR><BR><BR>
<H1 ALIGN = "center"> Registration Form</H1> <FORM>
<FONT size="4" >Enter your name : </FONT>
<INPUT TYPE="TEXT" NAME="colname" VALUE=" " SIZE="5" MAXLENGTH="25">
</FORM>
</BODY>
</HTML>
Q27. HTML code for Forms -Radio Button

<HTML>
<HEAD>
<TITLE>Forms - Radio Button</TITLE>
</HEAD>
<H1 ALIGN = "center"> Forms -RadioButton</H1> <BR><BR><BR>
<FORM>
<B><FONT size="4" >
Q1. CPU is considered as the ______________ of the computer </FONT></B> <BR>

(a) HEART
<INPUT TYPE="RADIO" NAME="colQ1" VALUE="a" CHECKED>
(b) BRAIN
<INPUT TYPE="RADIO" NAME="colQ1" VALUE="b" CHECKED>
(c) BACKBONE
<INPUT TYPE="RADIO" NAME="colQ1" VALUE="c" CHECKED>
(d) None of these
<INPUT TYPE="RADIO" NAME="colQ1" VALUE="d" CHECKED>
</FORM>
</BODY>
</HTML>
Q28. HTML code for Forms -Check Box

<HTML>
<HEAD>
<TITLE>Forms - Check Box</TITLE>
</HEAD>
<H1 ALIGN = "center"> Forms -CheckBox</H1> <BR><BR><BR>
<FORM>
<B><FONT size="4" >What are the input devices of the computer </FONT></B> <BR>
(a) Keyboard
<INPUT TYPE="CHECKBOX" NAME="colK" VALUE="K">
(b) Mouse
<INPUT TYPE="CHECKBOX" NAME="colM" VALUE="M">
(c) Printer
<INPUT TYPE="CHECKBOX" NAME="colP" VALUE="P">
(d) Scaner
<INPUT TYPE="CHECKBOX" NAME="colS" VALUE="S">
</FORM>
</BODY>
</HTML>

Q29. HTML code for Forms -Text Box and Password

<HTML>
<HEAD>
<TITLE>Forms - Textbox and Password </TITLE>
</HEAD>
<H1 ALIGN = "center"> Forms -Text Box and Password</H1>
<BR><BR><BR>
<H1 ALIGN = "center"> Registration Form</H1>
<FORM>
<FONT size="4" >Enter your login name : </FONT>
<INPUT TYPE="TEXT" NAME="collogin" SIZE="25" MAXLENGTH="25"><BR><BR> <FONT
size="4" >Enter your password : </FONT>
<INPUT TYPE="PASSWORD" NAME="colpwd" VALUE="" SIZE="16"
MAXLENGTH="16"><BR><BR>
<FONT size="4" >Reenter your password : </FONT>
<INPUT TYPE="PASSWORD" NAME="colrepwd" VALUE="" SIZE="16" MAXLENGTH="16">
</FORM>
</BODY>
</HTML>
Q30. HTML code for Forms -File Fields

<HTML>
<HEAD>
<TITLE>Forms - File Fields </TITLE>
</HEAD>
<H1 ALIGN = "center"> Forms -FileFields</H1> <BR><BR><BR>
<FORM>
<FONT size="4" >Enter the file you want to include : </FONT>
<INPUT TYPE="FILE" NAME="colfile" SIZE="25" MAXLENGTH="100"><BR><BR>
</FORM>
</BODY>
</HTML>
Q31. HTML code for Forms -Submit Reset

<HTML>
<HEAD>
<TITLE>Forms - Submit Reset</TITLE>
</HEAD>
<H1 ALIGN = "center"> Forms -SubmitReset</H1> <BR><BR><BR>
<FORM>
<FONT size="5" >
Enter your login name :
<INPUT TYPE="TEXT" NAME="collogin" SIZE="25" MAXLENGTH="25"><BR><BR>
Enter your password :
<INPUT TYPE="PASSWORD" NAME="colpwd" VALUE="" SIZE="16"
MAXLENGTH="16"><BR><BR> Reenter your password :
<INPUT TYPE="PASSWORD" NAME="colrepwd" VALUE="" SIZE="16"

Enter the file you want to include :

<INPUT TYPE="FILE" NAME="colfile" SIZE="25" MAXLENGTH="100"><BR><BR> <INPUT
TYPE="SUBMIT" VALUE="Save">
<INPUT TYPE="RESET" VALUE="Clear">
</FONT>
</FORM>
</BODY>
</HTML>
Q32. HTML code for Forms -TextArea

<HTML>
<HEAD>
<TITLE>Forms - TextArea</TITLE>
</HEAD>
<H1 ALIGN = "center"> Forms-TextArea</H1> <BR><BR><BR>
<FORM>
<FONT size="5" >
Enter your Name :
<INPUT TYPE="TEXT" NAME="colname" SIZE="25"
Enter your address : <BR>
<TEXTAREA NAME="coladdr" ROWS="5" COLUMNS="20">
</TEXTAREA>
</FONT>
</FORM>
</BODY>
</HTML>
Q33. HTML code for Forms -Select Field

<HTML>
<HEAD>
<TITLE>Forms</TITLE>
</HEAD>
<H1> & nbsp; Sample Form</H1>
<FORM>
<FONT size="4" >
Name :
<INPUT TYPE="TEXT" NAME="colname" SIZE="25" VALUE="" MAXLENGTH="25"> <BR> <BR>
Gender : Male <INPUT TYPE="RADIO" NAME="colM" VALUE="M">

Female <INPUT TYPE="RADIO" NAME="colM" VALUE="F"> <BR><BR>
Date of Birth : Day :

<SELECT NAME="colday">
<OPTION VALUE="1" SELECTED>1
<OPTION VALUE="2" >2


</SELECT>
Month :
<SELECT NAME="colmon">
<OPTION VALUE="January" SELECTED > January
<OPTION VALUE="February" > February
<OPTION VALUE="March" > March
<OPTION VALUE="April" > April
<OPTION VALUE="May" > May
<OPTION VALUE="June" > June
<OPTION VALUE="July" >July
</SELECT>
Year :
<SELECT NAME="colyr">
<OPTION VALUE="1998" > 1998
</SELECT> <BR><BR>
Enter your address : <BR>

<TEXTAREA NAME="coladdr" ROWS="5" COLUMNS="20">
</TEXTAREA> <BR><BR>
Enter login name :

<INPUT TYPE="TEXT" NAME="collogin" SIZE="25" MAXLENGTH="25"><BR><BR>
Enter password :
<INPUT TYPE="PASSWORD" NAME="colpwd" VALUE="" SIZE="16" MAXLENGTH= "16">
<BR><BR>
Reenter password :
<INPUT TYPE="PASSWORD" NAME="colrepwd" VALUE="" SIZE="16" MAXLENGTH="16">
<BR><BR>
Select hobbies :
<INPUT TYPE="CHECKBOX" NAME="colMusic" VALUE="M"> Music
<INPUT TYPE="CHECKBOX" NAME="colRead" VALUE="R"> Reading
<INPUT TYPE="CHECKBOX" NAME="colSport" VALUE="S"> Sports
<INPUT TYPE="CHECKBOX" NAME="colCook" VALUE="C"> Cooking <BR><BR>
For other details attach a file here:
<INPUT TYPE="FILE" NAME="colfile" SIZE="25" MAXLENGTH="100"> <BR><BR>
<INPUT TYPE="SUBMIT" VALUE="Save Details ">
<INPUT TYPE="RESET"
</CENTER>
</FONT>
</FORM>
</BODY> </HTML>

Do by yourself:
 Create the following webpage
Q34. HTML code for Frames 2 Columns

<HTML>
<HEAD>
<TITLE>Frames 2 Columns</TITLE>
</HEAD>
<FRAMESET COLS="400,*" SCROLLING="YES" NORESIZE>
<FRAME NAME = "C1" SRC=" path of any file ">
</FRAMESET>
</HTML>
Q35. HTML code for Frames 3 Columns

<HTML>
<HEAD>
<TITLE>Frames 3 Columns</TITLE>
</HEAD>

<FRAMESET COLS="100,*,100" SCROLLING="YES">

</FRAMESET>
</HTML>
Q36. HTML code for Frames 2 Rows

<HTML>
<HEAD>
<TITLE>Frames 2Rows</TITLE>
</HEAD>
<FRAMESET ROWS="300,*" SCROLLING="YES">
<FRAME NAME = "R1" SRC=" path of any file ">
</FRAMESET>
</HTML>
Q37. HTML code for Frames 3 Rows

<HTML>
<HEAD>
<TITLE>Frames 3 Rows</TITLE>
</HEAD>
<FRAMESET ROWS="100,*,100" SCROLLING="YES">
<FRAME NAME = "R1" SRC="Q09.HTML">
<FRAME NAME = "R2" SRC=" path of any file "> <FRAME NAME = "R3" SRC=" path of any
file ">
</FRAMESET>
</HTML>
Q38. HTML code for Frames 2 Columns 2nd Colum divided into 2
<HTML>
<HEAD>
<TITLE>Frames 2 Columns 2nd Colum divided into 2</TITLE>
</HEAD>
<FRAMESET COLS="100,*" SCROLLING="YES">
<FRAME NAME = "C1" SRC="Q09.HTML">
<FRAMESET ROWS="*,*" SCROLLING="YES">
</FRAMESET>
</FRAMESET>
</HTML>
Q39. HTML code for Frames 2 Frames 2 Rows 2nd Row divided into 2
<HTML>
<HEAD>
<TITLE>Frames 2 Rows 2nd Row divided into 2 </TITLE>
</HEAD>
<FRAMESET ROWS="100,*" SCROLLING="YES">

<FRAME NAME = "R1" SRC="Q09.HTML">


</FRAMESET>
</FRAMESET>
</HTML>
Q40. HTML code for Frames 2 Rows Both Rows divided into 2
<HTML>
<HEAD>
<TITLE>Frames 2 Rows Both Rows divided into 2 </TITLE>
</HEAD>
</FRAMESET>
</FRAMESET>
</FRAMESET>
</HTML>
Q41. HTML code for Frames 2rows Both Rows divided into 2
<HTML>
<HEAD>
<TITLE>Frames 2 Rows Both Rows divided into 2 </TITLE>
</HEAD>
<FRAME NAME = "C1" SRC=" path of any file "> <FRAME NAME = "C2" SRC=" path
of any file ">
</FRAMESET>
<FRAMESET COLS="*,200" SCROLLING="YES">
<FRAME NAME = "C3" SRC="path of any file">
</FRAMESET>
</FRAMESET>
</HTML>
Do by yourself:
 Create the following frame to partition the screen in the following manner

Basic Web Programming With HTML: Lab Manual

Загружено:

Сведения о документе

Оригинальное название

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Basic Web Programming With HTML: Lab Manual

Загружено:

Авторское право:

Доступные форматы

Class VII

Basic Web Programming

Q3. HTML code for <BR>,<NOBR>,<B>,<U>,<I>,<CENTER> tag

Page 2 Computer Department

Q6. HTML Code for Body tag with attribute BACKGROUND

Page 3 Computer Department

<BODY BACKGROUND="Path of an image" >

Q7. HTML code for <OL> tag (Ordered List)

Page 4 Computer Department

Q8. HTML code for <UL> tag (Unordered List)

Q9. HTML code for NESTED<OL> tag (Ordered List)

Page 5 Computer Department

Q10. HTML code for NESTED<UL> tag (Unordered List)

Page 6 Computer Department

Q11. HTML code for Definition List

Q12. HTML code for Internal Image

Page 7 Computer Department

Q13. HTML code for Simple Table

Page 8 Computer Department

Q14. HTML code for Table and its Attributes

Q15. HTML code for Simple Table with attribute of TR

Page 9 Computer Department

Q16. HTML Code for attributes of TH and TD

Page 10 Computer Department

Page 11 Computer Department

<TD ALIGN="center"> 1 A</TD>

Page 12 Computer Department

DELHI PUBLIC SCHOOL

Total no. of students-Section wise for Class VII

Class Section Strength

Q19. HTML code for Simple Table with images

Q20. HTML code for Internal Linking

Page 13 Computer Department

<A HREF="#QP3">Question Paper 3</A> <BR>

Q21. HTML code for External Linking

Page 14 Computer Department

<BODY BGCOLOR="#FF99FF" TEXT="#9900CC">

<A HREF="Q21.HTML">Click here to go to Home Page

Page 15 Computer Department

Q26. HTML code for Forms -Text box

Page 16 Computer Department

<BODY BGCOLOR="#FF99FF" TEXT="#9900CC">

Q27. HTML code for Forms -Radio Button

Q1. CPU is considered as the ______________ of the computer </FONT></B> <BR>

Q28. HTML code for Forms -Check Box

Page 17 Computer Department

Q29. HTML code for Forms -Text Box and Password

Q30. HTML code for Forms -File Fields

Q31. HTML code for Forms -Submit Reset

Page 18 Computer Department

Enter the file you want to include :

Q32. HTML code for Forms -TextArea

Q33. HTML code for Forms -Select Field

Gender : Male <INPUT TYPE="RADIO" NAME="colM" VALUE="M">

Date of Birth : Day :

Page 19 Computer Department

<OPTION VALUE="6" >6

Enter your address : <BR>

Enter login name :

Page 20 Computer Department

Q34. HTML code for Frames 2 Columns

Q35. HTML code for Frames 3 Columns

Page 21 Computer Department