0% found this document useful (0 votes)
50 views

Record Book Practicals(Answer Key) (2)

Uploaded by

pradaxloves
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
50 views

Record Book Practicals(Answer Key) (2)

Uploaded by

pradaxloves
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 33

Practical Record (Answer key)

Practical 1.Write HTML code to display the following web page


Output:
(i) Give the Title Pace Computer Education. (this should appear on title bar)
(ii) Make the background colour as Grey and text colour as Red.
(iii) Give the heading My First Web Page as H1 tag, Face = Times New Roman, Color = Red, Align =

Center.
(iv) Write the paragraph with <P> tag, Align = Right, Font = Comic Sans MS, Color = Blue and Size = 4.
Today, one of the major reasons businesses, homes and other users purchase computers is to gain Internet
access. Many companies and organizations assume that the public is familiar with the Internet. Web
addresses appear on television, in radio broadcasts, in printed news-papers, magazines and in other
forms of advertising. Software companies use their Web sites as a place for you to download upgrades or
enhancements to software products. To be successful today, you must have an understanding of the
Internet. Without it, you are missing a tremendous resource for goods, services and information.
(v) Create two copies of the above paragraph and apply <B> tag, <I> and <U> tags in between.
(vi) "Exciting Features Offered By HTML". Give it as heading H3, Align = Left, Color = Red, Font =
Comic Sans Ms.
(vii) Apply any Font style, Size = 5 on the following points :
1. E-Mail
2. Information
3. Discussion Groups
4. Online- Shopping
5. Entertainment
6. Programme
(viii) Add a horizontal rule spread on the 50% of the browser window.
(ix) Combine different font effects : <B>, <I>, <U> .
(x) Select File menu and click on Save, type your file name with extension .HTML, and click on Save
button to complete the procedure of saving.
Practical - 1 Answer
<HTML>
<HEAD>
<TITLE> Pace Computer Education </TITLE>
</HEAD>
<BODY BGCOLOR = "GREY" TEXT = "RED">
<H1 ALIGN = "CENTER">
<FONT FACE = "TIMES NEW ROMAN" COLOR = "RED">My First Web Page</FONT>
</H1>
<P ALIGN = "RIGHT">
<FONT FACE = "COMIC SANS MS" COLOR = "BLUE" SIZE = "4">
Today, one of the major reasons businesses, homes and other users purchase computers is to gain Internet
access. Many companies and organizations assume that the public is familiar with the Internet. Web
addresses appear on television, in radio broadcasts, in printed news-papers, magazines and in other forms
of advertising. Software companies use their Web sites as a place for you to download upgrades or
enhancements to software products. To be successful today, you must have an understanding of the
Internet. Without it, you are missing a tremendous resource for goods, services and information.
</FONT>
</P>
<P> Today, one of the <B> major reasons </B> businesses, homes and other users purchase computers is
to gain Internet access. Many companies and organizations assume that the public is familiar with the
Internet . Web addresses appear on <I> television, in radio broadcasts, in printed news-papers, magazines
and in other forms of advertising </I>. Software companies use their Web sites as a place for you to
download upgrades or enhancements to software products. To be successful today, you must have an
understanding of the Internet. Without it, you are <U> missing a tremendous resource </U> for goods,
services and information. </P>
Today, one of the major reasons businesses, homes and other users purchase computers is to gain Internet
access. Many companies and organizations assume that the public is <B> familiar </B> with the Internet.
Web addresses appear on television, in radio broadcasts, in printed news-papers, magazines and in other
forms of advertising. Software companies use their Web sites as a place for you to <I> download
upgrades or enhancements </I> to software products. To be successful today, you must have an
understanding of the Internet. Without it, you are <U> missing </U> a tremendous resource for goods,
services and information.
<H3 ALIGN = "LEFT">
<FONT COLOR = "RED" FACE = "COMIC SANS MS">Exciting Features Offered By HTML</FONT>
</H3>
<FONT FACE = "ARIAL" SIZE = "5" COLOR = "BLUE">
<OL>
<LI>E-Mail</LI>
<LI>Information</LI>
<LI>Discussion Groups</LI>
<LI>Online- Shopping</LI>
<LI>Entertainment</LI>
<LI>Programme</LI>
</OL>
</FONT>
<HR WIDTH = "50%">
<FONT COLOR = "BLACK">
<U>HTML, or <B><I>Hypertext Markup Language</I></B>,</U> was created in 1990 by <B>Tim
Berners-Lee</B> as a means to share and format <B><I><U>scientific and academic
information</U></I></B> on the <B><I>World Wide Web.</I></B>
</FONT>
</BODY>
</HTML>
Practical 2. Write the HTML code to display the following Web page Apply
different font styles on these lists.

Output
Practical 2-Answer
<OL TYPE = "1">
<FONT FACE = "COMIC SANS MS" COLOR = "RED" SIZE = "5">
<LI>
Operating System
<UL TYPE = "CIRCLE">
<FONT FACE = "TIMES NEW ROMAN" COLOR = "GREEN" SIZE = "4">
<LI> Disk Operating System </LI>
<LI> Windows </LI>
<LI> Unix </LI>
<LI> Linux </LI>
</FONT>
</UL>
</LI>
<LI>
MS - Office
<UL TYPE = "SQUARE">
<FONT FACE = "ARIAL BLACK" COLOR = "BLUE" SIZE = "3">
<LI> Word </LI>
<LI> Excel </LI>
<LI> PowerPoint </LI>
<LI> Access </LI>
</FONT>
</UL>
</LI>
<LI>
OpenOffice.org
<UL TYPE = "DISC">
<FONT FACE = "TIMES NEW ROMAN" COLOR = "GREY" SIZE = "3">
<LI> Writer </LI>
<LI>Calc </LI>
<LI>Impress </LI>
<LI>Base </LI>
</FONT>
</UL>
</LI>
<LI>
Accessories
<UL TYPE = "DISC">
<FONT FACE = "ARIAL" COLOR = "MAGENTA" SIZE = "3">
<LI> Paint </LI>
<LI> Calculator </LI>
<LI> Note Pad </LI>
<LI> Word Pad </LI>
</FONT>
</UL>
</LI>
</FONT></OL>
Practical 3:Writethe HTML code to display the following Web page Apply different
font styles on these lists.
Output:
Practical 3
Answer:
<html lang="en">
<head>
<title>Types of Listsin HTML </title>
</head>
<body topmargin=100 LeftMargin=100 bgcolor=pink>
<H1> Types of Lists in HTML</H1>

<h2>Ordered List (ol)</h2>


<h3>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
</h3>
<h2>Unordered List (ul)</h2>
<h3>
<ul>
<li>Apples</li>
<li>Oranges</li>
<li>Bananas</li>
</ul>
</h3>
<h2>Definition List (dl)</h2>
<h3>
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>

<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>

<dt>JS</dt>
<dd>JavaScript</dd>
</dl>
</h3>
</body>
</html>
Practical 4

Write the HTML code to generate the following output :

Note the following points while generating the webpage :

(i) Title of the page should be "Dubai Tourism".

(ii) The heading text "Welcome to Dubai" is in Arial font and is of maroon color.

(iii) The horizontal lines below the heading are 5 pixels thick and of red color.

(iv) Image used in the page is burj.jpg.

(v) The bulleted list contains links as specified below :

● The text Morning is a link to the webpage "morning.html".


● The text Evening is a link to the webpage "evening.html".
Practical 4:Answer

<HTML>
<HEAD>
<TITLE> Dubai Tourism </TITLE>
</HEAD>
<BODY >
<FONT FACE = "ARIAL" COLOR = "MAROON">
<H1 ALIGN = "CENTER">WELCOME TO DUBAI </H1>
</FONT>
<HR SIZE = "5" COLOR = "RED" ALIGN = "CENTER" WIDTH = "50%">
<HR SIZE = "5" COLOR = "RED" ALIGN = "CENTER" WIDTH = "30%">
<FONT SIZE = 5>
Enjoy the world of pure travel masti
</FONT>
<IMG SRC = "BURJ.JPG" HEIGHT = "100" WIDTH = "100" ALIGN = "BOTTOM">
<P>The following is a list of major tourist attractions in Dubai :</P>
<UL TYPE = "DISC">
<LI>
<A HREF = "morning.html">Morning</A> - Dolphinarium and Palm Dubai
</LI>
<LI>
<A HREF = "evening.html">Evening</A> - Ski Dubai and Cruise
</LI>
</UL>
<CENTER>For enquiries write at <A HREF =
"mailto:dubai@gmail.com">dubai@gmail.com</A></CENTER>
</BODY>
</HTML>
Practical 5:Create the following Webpage using Subscript and Superscript.
Output:
Practical 5:
Answer:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Maths formula</title>
</head>
<body leftmargin=100>
<h2>Common Maths Formula</h2>
<li>Area of a Circle Formula = π r<sup>2</sup></li>
<li>Area of Equilateral Triangle Formula = 3√4s<sup>2</sup></li>
<li>Area of a Hexagon Formula = 33√2x<sup>2</sup></li>
<li>a<sup>2</sup>-b<sup>2</sup>=(a+b)(a-b)</li>
<li>(a+b)<sup>2</sup>=a<sup>2</sup>+2ab+b<sup>2</sup></li>
<li>a<sup>2</sup>+b<sup>2</sup>=(a-b)<sup>2</sup>+2ab</li>

</body>
</html>
Practical 6:
Create a webpage as shown below which shows Internal link & External link:

Output:
Practical 6:
Answer:
<HTML>
<Head> <Title>Internal link &External link</title>
</head>
<body BGCOLOR="CYAN">
<h1>Information about Indian States</h1>
<ul>
<li><a href="#maharashtra">Maharashtra</a></li>
<li><a href="#uttar-pradesh">Uttar Pradesh</a></li>
<li><a href="#tamil-nadu">Tamil Nadu</a></li>
<li><a href="#west-bengal">West Bengal</a></li>
<li><a href="#karnataka">Karnataka</a></li>
<li><a href="#gujarat">Gujarat</a></li>
<li><a href="#rajasthan">Rajasthan</a></li>
<li><a href="#andhra-pradesh">Andhra Pradesh</a></li>
<li><a href="#madhya-pradesh">Madhya Pradesh</a></li>
<li><a href="#bihar">Bihar</a></li>
</ul>
<h2 id="maharashtra">Maharashtra</h2>
<p>Maharashtra is a state in the western region of India and is the second-most populous state in India.</p>
<a href="#Information">Back to top</a>
<h2 id="uttar-pradesh">Uttar Pradesh</h2>
<p>Uttar Pradesh is a state in northern India. With roughly 200 million inhabitants, it is the most populous
state in India.</p>
<a href=""#Information">Back to top</a>
<h2 id="tamil-nadu">Tamil Nadu</h2>
<p>Tamil Nadu is a state in southern India. It is known for its Dravidian-style Hindu temples and vibrant
culture.</p>
<a href=""#Information">Back to top</a>
<h2 id="west-bengal">West Bengal</h2>
<p>West Bengal is a state in eastern India, between the Himalayas and the Bay of Bengal.</p>
<a href=""#Information">Back to top</a>
<h2 id="karnataka">Karnataka</h2>
<p>Karnataka is a state in the southwestern region of India. Its capital, Bengaluru, is known as the tech hub of
India.</p>
<a href=""#Information">Back to top</a>
<h2 id="gujarat">Gujarat</h2>
<p>Gujarat is a state on the western coast of India with a coastline of 1,600 km, most of which lies on the
Kathiawar peninsula.</p>
<a href=""#Information">Back to top</a>
<h2 id="rajasthan">Rajasthan</h2>
<p>Rajasthan is a state in northern India. It is the largest Indian state by area and known for its desert
landscapes.</p>
<a href=""#Information">Back to top</a>
<h2 id="andhra-pradesh">Andhra Pradesh</h2>
<p>Andhra Pradesh is a state in the southeastern coastal region of India. It is known for its historic temples
and rich culture.</p>
<a href=""#Information">Back to top</a>
<h2 id="madhya-pradesh">Madhya Pradesh</h2>
<p>Madhya Pradesh is a large state in central India, known for its historical sites and natural beauty.</p>
<a href=""#Information">Back to top</a>
<h2 id="bihar">Bihar</h2>
<p>Bihar is a state in eastern India. It is the third-largest state by population and known for its ancient
history.</p>
<a href=""#Information">Back to top</a>
<a id="top"></a>
<br><br>
<A HREF="https://en.wikipedia.org/wiki/States_and_union_territories_of_India">CLICK HERE FOR
MORE</A></body></html>
Practical 7:

Observe the following table and write the HTML code to generate it :

Output:
Practical 7:Answer

<HTML>
<BODY>
<TABLE BORDER = "1">
<TR> <TH ROWSPAN = "2"> Serial No </TH> <TH ROWSPAN = "2"> Class </TH> <TH
colspan = "3" ALIGN = "CENTER"> Number of Students </TH> </TR>
<TR ALIGN = "CENTER"> <TD> English </TD> <TD> Hindi </TD> <TD> Regional </TD>
</TR>
<TR ALIGN = "CENTER"> <TD> 1 </TD> <TD> X A </TD> <TD> 35 </TD><TD> 10
</TD><TD> 6 </TD> </TR>
<TR ALIGN = "CENTER"> <TD> 2 </TD> <TD> X B </TD> <TD> 31 </TD><TD> 15
</TD><TD> 4 </TD> </TR>
</TABLE>
</BODY>
</HTML>
Practical 8: Write HTML code to create tables as shown below :
Practical 8: Answer

<HTML>
<BODY>
<TABLE BORDER = "1">
<TR> <TH COLSPAN = "2" BGCOLOR = "YELLOW"> Mammals - Plants - Fish </TH>
</TR>
<TR> <TD BGCOLOR = "SKY BLUE" ROWSPAN = "3"> <B> Mammals </B> <BR> Farm
Animals <BR> Big Game <BR> Small Critters </TD> <TD BGCOLOR = "LIGHTGREEN">
Cow </TD> </TR>
<TR> <TD BGCOLOR = "LIGHTGREEN"> Pig </TD> </TR>
<TR> <TD BGCOLOR = "LIGHTGREEN"> Horse </TD> </TR>
</TABLE>
</BODY>
</HTML>
Practical 9 :Write the HTML code to generate the following output :

Note the following points while generating the webpage :


(i) Link colour is green, active link colour is blue and visited link colour is red.
(ii) Title of the page is "Dances of India".
(iii) Heading of the page is maroon.
(iv) Background colour of page is yellow.
(v) Image used is "dance.png".
(vi) Caption of table is blue.
(vii) Table border is blue and of size 2.
(viii) The 3 links are one.html, two.html and three.html.
(ix) The email id for contact us is abc@xyz.com
Practical 9:

Answer
<HTML>
<HEAD>
<TITLE> Dances of India </TITLE>
</HEAD>
<BODY LINK = "GREEN" ALINK = "BLUE" VLINK = "RED" BGCOLOR = "YELLOW">
<FONT COLOR = "MAROON">
<H1 ALIGN = "CENTER">Dances of India </H1>
</FONT>
<IMG SRC = "DANCE.JPG" HEIGHT = "100" WIDTH = "100" ALIGN = "RIGHT">
<P>
There are many types of dance in India, from those which are deeply religious in content to those which are danced
on more trivial happy occasions. <BR>
Classical dances of India are usually always spiritual in content, although this is often true also of Folk dances.
</P>
<TABLE BORDER = "2" BORDERCOLOR = "BLUE" ALIGN = "CENTER">
<CAPTION>
<FONT COLOR = "BLUE">DANCES OF INDIA</FONT>
</CAPTION>
<TR>
<TH ALIGN = "CENTER">CLASSICAL DANCES </TH>
<TH ALIGN = "CENTER">FOLK DANCES </TH>
</TR>
<TR>
<TD>Mohini Attam</TD>
<TD>Hikat of Himachal Pradesh </TD>
</TR>
<TR>
<TD>Bharata Natyam </TD>
<TD>Rouff of Kashmir </TD>
</TR>
<TR>
<TD>Odissi </TD>
<TD>Hurkia Baol of Kumaon </TD>
</TR>
</TABLE>
<H4>List</H4>
<UL TYPE = "NONE">
<LI>
<A HREF = "one.html">Mohini Attam</A>
</LI>
<LI>
<A HREF = "two.html">Bharata Natyam</A>
</LI>
<LI>
<A HREF = "three.html">Odissi</A>
</LI>
<LI>
<A HREF = "mailto:abc@xyz.com">Contact Us</A>
</LI>
</UL></BODY></HTML>
Practical 10 :Write the HTML code to generate the following output :
Practical 10 : Answer

<html>

<head>

<title>Page Title</title>

</head>

<body bgcolor=grey>

<h2>Click play button to play audio</h2>

<audio src="music1.mp3" controls>

</audio><br><br><br>

<h2>Click play button to play video</h2>

<video controls>

<source src="BIGB.mp4">

</video>

</body>

</html>
Practical 11: Create a form as given below by using different Form tags and attributes.

Output:

(Hint : Also use Pre, Input, Select, Option tags for this)
Practical 11: Answer
<HTML>
<BODY>
<FORM>
<H1> My Guest Book </H1>
<P>
Please let me know what you think of my Web Pages. Thanks !
</P>
<TABLE BORDER = "0" RULES = "NONE" FRAME = "VOID">
<TR>
<TD> <PRE>What is your name ?</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "NAME" /> </TD>
</TR>
<TR>
<TD> <PRE>What is your e-mail address :</PRE> </TD>
<TD> <INPUT TYPE = "TEXT" NAME = "EMAILID" /> </TD>
</TR>
</TABLE>
<BR>
Check all that apply:<BR>
<INPUT TYPE = "CHECKBOX" ID = "C1" NAME = "C1" VALUE = "I really like your Web Site."> <BR>
<LABEL FOR = "C1">I really like your Web Site.</LABEL>
<INPUT TYPE = "CHECKBOX" ID = "C2" NAME = "C2" VALUE = "One of the best site I've seen.">
<LABEL FOR = "C2">One of the best site I've seen.</LABEL><BR>
<INPUT TYPE = "CHECKBOX" ID = "C3" NAME = "C3" VALUE = "I have no taste so your site didn't do much
for me.">
<LABEL FOR = "C3">I have no taste so your site didn't do much for me.</LABEL><BR><BR>
Choose the one thing you love best of my pages:
<BR>
<INPUT TYPE = "RADIO" ID = "O1" NAME = "OPINION"
VALUE = "That gorgeous picture of you and your dogs.">
<LABEL FOR = "O1">That gorgeous picture of you and your dogs.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O2" NAME = "OPINION"
VALUE = "The inspiring recap about your childhood.">
<LABEL FOR = "O2">The inspiring recap about your childhood.</LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "O3" NAME = "OPINION"
VALUE = "The detailed list of your hobbies.">
<LABEL FOR = "O3">The detailed list of your hobbies.</LABEL>
<BR><BR>
Imagine my site as a book, video or album.
<BR>
What do you think about my site?
<BR>
<SELECT NAME = "DETAILS" SIZE = "3">
<OPTION VALUE = "ADD MORE DETAILS ABOUT YOUR HOBBIES!" SELECTED>
ADD MORE DETAILS ABOUT YOUR HOBBIES!
</OPTION>
<OPTION VALUE = "ADD PICTURES OF YOUR CHILDHOOD">
ADD PICTURES OF YOUR CHILDHOOD
</OPTION>
<OPTION VALUE = "ADD YOUR FAVOURITES">
ADD YOUR FAVOURITES
</OPTION>
</SELECT>
<INPUT TYPE = "SUBMIT" NAME = "SUBMIT" VALUE = "Click here to submit" />
</FORM>
</BODY>
</HTML>
Practical 12: Create a webpage that receives pizza orders through a web form as shown below :

Output:
Practical 12 :Answer
<HTML>
<BODY BGCOLOR = "YELLOW">
<FORM>
<H1> Pizza Factory </H1>
<HR>
<P>
<B> Pizza Order Form </B>
</P>
<TABLE WIDTH = "50%" BORDER = "0" FRAME = "VOID" RULES = "NONE">
<TR>
<TD>Name </TD>
<TD><INPUT TYPE = "TEXT" NAME = "NAME"></TD>
</TR>
<TR>
<TD>Address </TD>
<TD><INPUT TYPE = "TEXT" NAME = "ADDRESS"> </TD>
</TR>
<TR>
<TD><B> Size </B><BR> </TD>
<TD><B> Toppings </B><BR> </TD>
</TR>
<!-- This inserts a blank row -->
<TR>
<TD>&nbsp; </TD>
<TD>&nbsp; </TD>
</TR>
<TR>
<TD VALIGN = "TOP">
<INPUT TYPE = "RADIO" ID = "R1" NAME = "SIZE" VALUE = "SMALL" />
<LABEL FOR = "R1"> Small </LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "R2" NAME = "SIZE" VALUE = "MEDIUM" />
<LABEL FOR = "R2"> Medium </LABEL>
<BR>
<INPUT TYPE = "RADIO" ID = "R3" NAME = "SIZE" VALUE = "LARGE" />
<LABEL FOR = "R3"> Large </LABEL>
<BR>
</TD>
<TD>
<INPUT TYPE = "CHECKBOX" ID = "CB1" NAME = "C1" VALUE = "CHEESE" />
<LABEL FOR = "CB1"> Cheese </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB2" NAME = "C2" VALUE = "OLIVES" />
<LABEL FOR = "CB2"> Olives </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB3" NAME = "C3" VALUE = "PEPPERONI" />
<LABEL FOR = "CB3"> Pepperoni </LABEL>
<BR>
<INPUT TYPE = "CHECKBOX" ID = "CB4" NAME = "C4" VALUE = "BACON" />
<LABEL FOR = "CB4"> Bacon </LABEL>
<BR>
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE = "SUBMIT" NAME = "Process Order" VALUE = "Process Order" />
</TD>
<TD ALIGN = "CENTER">
<INPUT TYPE = "RESET" NAME = "Clear" VALUE = "Clear" />
</TR>
</TD>
</TABLE>
<TEXTAREA NAME = "ORDER" COLS = "70" ROWS = "5" >
</TEXTAREA>
</FORM></BODY></HTML>
Practical 13:

Perform as instructed below.


(a) Create an HTML file namely index.html file with following guidelines :
x Make sure there are at least 2 paragraphs (<p>) in your HTML file
x Use h1, h2 and h3 headings
x Use a numbered and a bulleted list
x Use a table
x At least 4 hyperlinks
(b) Link to an external style sheet namely personal.css from your index.html file.
(c) Create a CSS document called personal.css (Make sure you save as type .css) with rules for the
following :
x Have your h2 headings :
(a) Appear in a color of your choice
(b) Be centered on the page (text-align: center;)
(c) In the Serif font family of your choice
x Double the H1 headings size (relative font size)
x For paragraphs
(a) Specify a font family and font size.
(b) Give a background color with 5 px padding on each side
x For tables
(a) Specify a border of width 3px
(b) Table heading in bold
x Remove the underline in your links.
(d) View the html file in a browser
(e) Create another CSS file with different style rules for above mentioned elements and then link
index.html to this CSS file. Now view index.html and see the change.
Output:
Practical 13:Answer 1
index.html

<html>
<head>
<link rel = "stylesheet" type = "text/css" href = "personal.css">
<title>HTML Introduction</title>
</head>
<body>
<h1>Introduction to HTML</h1>
<h2> What is HTML ? </h2>
<p>
HTML (Hypertext Markup Language) is the standard markup language used for creating and structuring web pages.
HTML uses a system of tags and elements to define the different components and content of a web page.
</p>
<p>
HTML forms the foundation of web development and is often combined with CSS (Cascading Style Sheets) and
JavaScript to create interactive and visually appealing websites.
</p>
<h3> Advantages of HTML </h3>
<ol>
<li>Universal support across web browsers.</li>
<li>Easy to learn and understand syntax.</li>
<li>Platform independence for broad device compatibility.</li>
<li>Seamless integration with CSS and JavaScript.</li>
</ol>
<h3>Limitations of HTML</h3>
<ul>
<li>Limited styling and layout control.</li>
<li>Lack of built-in interactivity.</li>
<li>Insufficient data handling capabilities.</li>
<li>Browser compatibility issues.</li>
</ul>
<table>
<caption>Some tags of HTML</caption>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
<tr>
<td>B tag</td>
<td>Used to make text bold</td>
</tr>
<tr>
<td>I tag</td>
<td>Used to make text italic</td>
</tr>
</table>
<p>Check out these links to learn more about HTML:</p>
<ul>
<li><a href="https://www.w3schools.com">W3 Schools</a></li>
<li><a href="https://en.wikipedia.org/wiki/HTML">HTML Wikipedia</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML">HTML MDN</a></li>
<li><a href="https://www.html.com">HTML Code Tutorial</a></li>
</ul>
</body>
</html>
Personal.css 2

h2 {
color: red ;
text-align: center ;
font-family: Times New Roman ;
}
h1 {
font-size: 2em ;
}
p{
font-family: Arial ;
font-size: 10px ;
background-color: cyan ;
padding: 5px 5px 5px 5px ;
}
table {
border: 3px solid;
}
th {
border: 3px solid; font-weight: bold ;
}
td {
border: 3px solid;
}
a{
text-decoration: none ;
}

New-personal.css
h2 {
color: blue ;
text-align: left ;
font-family: Verdana ;
}
h1 {
font-size: 3em ;
}
p{
font-family: Georgia ;
font-size: 14px ;
background-color: green ;
padding: 3px 8px 3px 8px
;
}

table {
border: 1px dashed;
}
th {
border: 1px dashed;
font-weight: normal ;
}
td {
border: 1px dashed;
}
a{
text-decoration: overline ;
}
Practical 14:

Create a webpage that receives pizza orders through a web form as shown below:
Practical 14: Answer 1

<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swadeshi Co. Pvt. Ltd. Order Form</title>
</head>
<body bgcolor=pink>
<h1>Welcome to Swadeshi Co. Pvt. Ltd.</h1>
<h2>Please fill out the order form</h2>

<form>
<h3>Billing Information</h3>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br>
<label for="address">Address:</label>
<input type="text" id="address" name="address" required><br>
<label for="pincode">Pincode:</label>
<input type="text" id="pincode" name="pincode" required><br>

<h3>Product Information</h3>
<table border=2>
<tr>
<th>Product Name</th>
<th>Product ID</th>
<th>Quantity</th>
<th>Unit Price</th>
<th>Total</th>
</tr>
<tr>
<td>Kurta-Pyjama</td>
<td>KP</td>
<td><input type="number" id="qty_kp" name="qty_kp"></td>
<td>Rs. 1500</td>
<td>Rs. <span id="total_kp">1500</span></td>
</tr>
<tr>
<td>Blazer</td>
<td>BLZ</td>
<td><input type="number" id="qty_blz" name="qty_blz"></td>
<td>Rs. 3300</td>
<td>Rs. <span id="total_blz">3300</span></td>
</tr>
<tr>
<td>Sweatshirt</td>
<td>SWT</td>
<td><input type="number" id="qty_swt" name="qty_swt"></td>
<td>Rs. 899</td>
<td>Rs. <span id="total_swt">899</span></td>
</tr>
<tr>
<td>Nehru-Jacket</td>
<td>NHJ</td>
<td><input type="number" id="qty_nhj" name="qty_nhj"></td>
<td>Rs. 1200</td>
<td>Rs. <span id="total_nhj">1200</span></td>
</tr>
<tr>
<td>Shirt</td>
<td>SHT</td>
<td><input type="number" id="qty_sht" name="qty_sht"></td>
<td>Rs. 1399</td>
<td>Rs. <span id="total_sht">1399</span></td> 2
</tr>
</table>

<p>Grand Total: Rs. <span id="grand_total">0</span></p>

<h3>Credit/Debit Card Details</h3>


<label for="card_type">Card Type:</label>
<select id="card_type" name="card_type">
<option value="mastercard">Mastercard</option>
<option value="visa">Visa</option>
<option value="amex">American Express</option>
</select><br>
<label for="card_number">Card Number:</label>
<input type="text" id="card_number" name="card_number" required><br>
<label for="card_holder_name">Card Holder Name:</label>
<input type="text" id="card_holder_name" name="card_holder_name" required><br>
<label for="expiry_date">Expiry Date:</label>
<input type="text" id="expiry_date" name="expiry_date" placeholder="MM/YY" required><br>
<label for="cvv">CVV:</label>
<input type="text" id="cvv" name="cvv" required><br>

<h3>Delivery Address</h3>
<p>Same as billing address</p>
<input type="checkbox" id="same_billing_address" name="same_billing_address">
<br><br>
<label for="delivery_address">Delivery Address (if different):</label>
<textarea
Practical 15:

Create a webpage that receives pizza orders through a web form as shown below:
Practical 15: Answer 1
<html>
<head>
<title>Sports Academy</title>
<style>
/* Basic styling for better presentation */
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #f0f0f0;
}
h1, h2 {
color: #0044cc;
}
table {
width: 50%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
img {
max-width: 100%;
height: auto;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Welcome to Our Sports Academy</h1>

<h2>Upcoming Events</h2>
<ul>
<li>Football Tournament - July 2024</li>
<li>Basketball Camp - August 2024</li>
<li>Tennis Workshop - September 2024</li>
</ul>

<h2>Facilities Offered</h2>
<table align="center" border=2 width="100">
<tr>
<th>Sport</th>
<th>Facility</th>
<th>Availability</th>
</tr>
<tr>
<td>Football</td>
<td>Full-size field</td>
<td>Available for booking</td>
</tr>
<tr>
<td>Basketball</td>
<td>Indoor court</td>
<td>Open for training sessions</td>
</tr>
<tr>
<td>Tennis</td>
<td>Multiple courts</td>
<td>Lessons ongoing</td>
</tr>
</table>
<h2>Explore Our Academy</h2> 2
<p>We provide various sports training programs and facilities to help you excel in your chosen sport. Watch our
academy video:</p>
<video width="600" height="400" controls>
<source src="sport.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<h2>Contact Us</h2>
<form action="/contact" method="post">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br><br>

<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

<input type="submit" value="Submit">


</form>

<h2>Our Coaches</h2>
<p>Meet our experienced coaches who are dedicated to helping you achieve your sporting goals:</p>
<ul>
<li>John Doe - Football Coach</li>
<li>Jane Smith - Basketball Coach</li>
<li>Michael Johnson - Tennis Coach</li>
</ul>

<h2>Gallery</h2>
<p>Check out some of the moments captured at our academy:</p>
<img src="sports1.png" alt="Sports Academy Image">
<p>Subscript example: H<sub>2</sub>O</p>
<p>Superscript example: 10<sup>2</sup></p>

<h2>Follow Us</h2>
<p>Stay updated with our latest news and events. Follow us on social media:</p>
<ul>
<li><a href="https://facebook.com/sportsacademy">Facebook</a></li>
<li><a href="https://twitter.com/sportsacademy">Twitter</a></li>
<li><a href="https://instagram.com/sportsacademy">Instagram</a></li>
</ul>

</body>
</html>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy