Documente Academic
Documente Profesional
Documente Cultură
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 code for simple web page of heading tag<Hn> and Paragraph<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 code for levels of <Hn> and <P> tag with 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> We are DPS students. </H5>
<H6> We are DPS students. </H6>
<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.
<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 code showing HR with attribute SUB and SUP and FONTtag-->
<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 code for attributes of Body tag (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>
***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
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
</BODY>
</HTML>
Do by yourself:
Create the following webpage
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 :
Do by yourself:
Create a webpage to display your time table.
ALIGN=”left/right/center” VALIGN=”TOP/MIDDLE/BOTTOM”>
<TD> 1</TD>
<TD> 3284 </TD>
<TD> Aditya Rathi</TD>
</TR>
<TR BGCOLOR="blue" BACKGROUND=”Path of Image”
ALIGN=”left/right/center” VALIGN=”TOP/MIDDLE/BOTTOM”>
<TD> 2</TD>
<TD> 3234 </TD>
<TD> Taniya Shah</TD>
</TR>
<TR BGCOLOR="pink" BACKGROUND=”Path of Image”
ALIGN=”left/right/center” VALIGN=”TOP/MIDDLE/BOTTOM”>
<TD> 3</TD>
<TD> 3244 </TD>
<TD> Namita Patel</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.
<BODY>
<H1 align = “center”> Table with attributes of TH and TD </H1>
<TABLE BORDER=”1”>
<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=”20%” ALIGN=”center” BGCOLOR=”BLUE”> 3234 </TD>
<TD WIDTH=”50%” ALIGN=”center” BGCOLOR=”GREEN”> Taniya S.</TD>
</TR>
<TR>
<TD WIDTH=”10%” ALIGN=”center” BGCOLOR=”RED”> 3</TD>
<TD WIDTH=”20%” ALIGN=”center” BGCOLOR=”BLUE”> 3244 </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>
<TABLE BORDER=”1”>
<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>
<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>
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>
<TR>
<TD ALIGN="center" > 1 C</TD>
<TD ALIGN ="center">40</TD>
</TR>
<TR>
<TD ALIGN= "center" ROWSPAN="3">2</TD>
<TD ALIGN="center" > 2 A</TD>
<TD ALIGN ="center">40</TD> </TR>
<TR>
<TD ALIGN="center" > 2 B</TD>
<TD ALIGN ="center">39</TD>
</TR>
<TR>
<TD ALIGN="center" > 2 C</TD>
<TD ALIGN ="center">40</TD>
</TR>
<TR>
<TD ALIGN ="center" ROWSPAN="3">3</TD>
<TD ALIGN="center" > 3 A</TD>
<TD ALIGN ="center">40</TD> </TR>
<TR>
<TD ALIGN="center" > 3 B</TD>
<TD ALIGN ="center">39</TD>
</TR>
<TR>
<TD ALIGN="center" > 3 C</TD>
<TD ALIGN ="center">40</TD>
</TR>
</TABLE>
</BODY> </HTML>
Do by yourself:
Create the following webpage using rowspan & colspan
A 38
VII B 41
C 40
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.
Q22. HTML code for External Linking-This is a sub program for Q21 -First link.
(Save this file name Qp1.html)
<HTML>
<HEAD>
<TITLE>External Linking</TITLE>
</HEAD>
<BODY BGCOLOR="#FF99FF" TEXT="#9900CC">
<H1 ALIGN = "center"> External Links- Question Paper1</H1>
<HR WIDTH="30%" ALIGN="center">
<FONT COLOR="#CC0099">
<H1>Question Paper 1</H1>
Q1<BR><BR><BR><BR> Q2<BR><BR><BR><BR> Q3<BR><BR><BR><BR>
Q4<BR><BR><BR><BR> Q5<BR><BR><BR><BR> Q6<BR><BR><BR><BR>
Q7<BR><BR><BR><BR> Q8<BR><BR><BR><BR> Q9<BR><BR><BR><BR>
Q10<BR><BR><BR><BR>
</FONT>
Q23. HTML code for External Linking-This is a sub program for Q21 - Second link.
(Save this file as Qp2.html)
<HTML>
<HEAD>
<TITLE>External Linking</TITLE>
</HEAD>
<BODY BGCOLOR="#FF99FF" TEXT="#9900CC">
<H1 ALIGN = "center"> External Links - Question Paper 2</H1> <HR WIDTH="30%"
ALIGN="center">
<FONT COLOR="#000099">
<H1>Question Paper 2</H1>
Q1<BR><BR><BR><BR> Q2<BR><BR><BR><BR> Q3<BR><BR><BR><BR>
Q4<BR><BR><BR><BR> Q5<BR><BR><BR><BR> Q6<BR><BR><BR><BR>
Q7<BR><BR><BR><BR> Q8<BR><BR><BR><BR> Q9<BR><BR><BR><BR>
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.
(Save this file as Qp3.html)
<HTML>
<HEAD>
<TITLE>External Linking</TITLE>
</HEAD>
<BODY BGCOLOR="#FF99FF" TEXT="#9900CC">
<H1 ALIGN = "center"> External Links - Question Paper 3</H1>
<HR WIDTH="30%" ALIGN="center">
<FONT COLOR="#CC0000">
<H1>Question Paper 3</H1>
Q1<BR><BR><BR><BR> Q2<BR><BR><BR><BR> Q3<BR><BR><BR><BR>
Q4<BR><BR><BR><BR> Q5<BR><BR><BR><BR> Q6<BR><BR><BR><BR>
Q7<BR><BR><BR><BR> Q8<BR><BR><BR><BR> Q9<BR><BR><BR><BR>
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.
(Save this file as Qp4.html)
<HTML>
<HEAD>
<TITLE>External Linking</TITLE>
</HEAD>
<BODY BGCOLOR="#FF99FF" TEXT="#9900CC">
<H1 ALIGN = "center"> External Links-Question Paper 4</H1>
<HR WIDTH="30%" ALIGN="center">
<FONT COLOR="#339900">
<H1>Question Paper 4</H1>
Q1<BR><BR><BR><BR> Q2<BR><BR><BR><BR> Q3<BR><BR><BR><BR>
Q4<BR><BR><BR><BR> Q5<BR><BR><BR><BR> Q6<BR><BR><BR><BR>
Q7<BR><BR><BR><BR> Q8<BR><BR><BR><BR> Q9<BR><BR><BR><BR>
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
<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>
<FORM>
<FONT size="4" >
Name :
<INPUT TYPE="TEXT" NAME="colname" SIZE="25" VALUE="" MAXLENGTH="25"> <BR> <BR>
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
<OPTION VALUE="1999" > 1999
<OPTION VALUE="2000" > 2000
<OPTION VALUE="2001" > 2001
<OPTION VALUE="2002" > 2002
<OPTION VALUE="2003" >2003
<OPTION VALUE="2004" >2004
</SELECT> <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
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">
<FRAME NAME = "R1" SRC=" path of any file ">
<FRAME NAME = "R2" SRC=" path of any file ">
</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>
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 ROWS="*,*" SCROLLING="YES">
<FRAMESET COLS="400,*" SCROLLING="YES">
<FRAME NAME = "C1" SRC=" path of any file ">
<FRAME NAME = "C2" SRC=" path of any file ">
</FRAMESET>
<FRAMESET COLS="400,*" SCROLLING="YES">
<FRAME NAME = "C3" SRC=" path of any file ">
<FRAME NAME = "C4" SRC=" path of any file ">
</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>
<FRAMESET ROWS="*,*" SCROLLING="YES">
<FRAMESET COLS="200,*" SCROLLING="YES">
<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">
<FRAME NAME = "C4" SRC=" path of any file ">
</FRAMESET>
</FRAMESET>
</HTML>
Do by yourself:
Create the following frame to partition the screen in the following manner