HTML SOP XII SCI AND COMMERCE

 (Q1) SOP-1:Creation of website using HTML5 

Answer:- 

Page1- Main.html

 

<html>

<head>

<title> Main Page </title>

</head>

<body background="Tulips.jpg">

<h1><center>Welcome to The sandesh Junior College of Commerce,Arts and Science

</center></h1>

<h2><marquee>Malad West</marquee></h2>

<br>

<br>

<br>

<nav>

<h2><center><a href="Index.html">College Profile</a></center></h2>

<h2><center><a href="Form.html"> Feedback Form</a></center></h2>

</nav>

</body>

</html>

 

Page2- Index.html

 

<html>

<head>

<title> The B.S.G.Ds Jr college </title>

<style>

h1{color:blue;text-align:center;} b{font-size:50px;}

body{background-image:url('Tulips.jpg');background-size:cover;}

</style>

</head>

<body>

<img src="Logo.jpg" alt="bsgd jr college" widhth=150 height=150>

<h1> THE B.S.G.D's Junior College of Commerce,Arts and Science</h1>

<h1><b>of Commerce</b>,<i>Arts</i> & <u>Science</u>

<p> The location of the college is in Malad (west) mumbai-400064 </p></h1>

<nav>

 

<a href="Main.html">Main Page</a><br>

<a href="Form.html">Feedback Form </a>

</nav>

</body>

</html>

 

Page3- Form.html

 

<html>

<head>

<title> Feedback Form </title>

</head>

<body bgcolor="lightgreen">

<h1> Feedback Form </h1>

<form name=f1 method="post">

<h3>Firstname:<input type="text"></h3>

 

<h3>Lastname:<input type="text"></h3>

<h3>Gender

<input type="radio" name="r1">Male

<input type="radio" name="r1">Female

</h3>

<h3>Email-Id:<input type="email"></h3>

<h3><input type="submit" value="Send"></h3>

</form>

 

</body>

 

</html>

 











Output:

 

https://itexamnotes.com/sop/practicals/A1.png

https://itexamnotes.com/sop/practicals/A2.png

https://itexamnotes.com/sop/practicals/A3.png




(Q2) SOP-2 :Create a webpage using HTML and CSS code to design a webpage. 

Answer:- 

SOP2.html

<html>

<head>

<title> Tourist Place </title>

<style>

section{background-color:yellow;width:50%;height:50%; float:left;color:black;font-size:30px;outline-style:solid;} aside{background-color:pink;width:50%;height:50%; float:right;color:black;font-size:30px;outline-style:solid;}

</style>

</head>

<body>

<header style="background-color:lightblue;color:deeppink;text-align:center; height:30%;width:100%;font-size:50px;outline-style:solid">Tourist places

</header>

<header>

<section>

<b> City </b>

<ol>

<li> Pune </li>

<li> Delhi </li>

<li> Banglore </li>

<li> Hyderabad </li>

</ol>

</section>

<aside>

<p> Tourist places in Pune </p>

<ul>

<li> Shaniwarwada </li>

<li> Sinhgad </li>

<li> Kelkar Museum </li>

</ul>

</aside>

</header>

</body>

</html>

 




Output:

 

https://itexamnotes.com/sop/practicals/A4.png

 (Q5) SOP-5 Use of Audio webpages using HTML5 

Answer:- 

Audio.html

<html>

<head>

<title> Audio </title>

</head>

<body>

<p> Audio sample </p>

<audio controls loop>

<source src="Side - A.mp3" type="audio/mp3">

</audio>

</body>

</html>

 

Audio1.html

 

<!DOCTYPE html>

<html>

<body>

<h1>The audio </h1>

<audio controls autoplay>

<source src="Side - A.mp3" type="audio/mp3">

<source src="Side - A.ogg" type="audio/ogg">

<source src="Side - A.wav" type="audio/wav"> Your browser does not support the audio element.

</audio>

</body>

</html>

 

Output:

 

https://itexamnotes.com/sop/practicals/A5.png


(Q6) SOP 6 : Use of video on web pages using html5. 

Answer:- 

1) Create a webpage named video.html to display a video file on web page and plays automatically with controls. The dimension of video area should be 150* 150 pixels.

HTML PROGRAM :-

 

<html>

<head>

<title>Video Insert Practical</title>

</head>

<body>

<video src="waterfalls.mp4" type="video/mp4" height="150" width="150" controls autoplay="autoplay">

</video>

</body>

</html>

 

2) Create another webpage which provide multiple source file formats for the same video file that plays a video automatically with controls. The dimension of video area should be 100* 100 pixels. The browser should display the message with appropriate attribute when video file is not supported by browser. The code must incorporate the list of video files formats (like webM, MP4 or ogg etc).

HTML PROGRAM :-

 

</html>

<html>

<head>

<title>Video Insert Practical</title>

</head>

<body>

<video height="150" width="150" controls autoplay="autoplay">

<source src="waterfalls.ogg" type="video/ogg" >

<source src="waterfalls.mp4" type="video/mp4”> Your browser does not support video tag

</video>

</body>

</html>

 

https://itexamnotes.com/sop/practicals/A6.png

(Q7) SOP 7 : Navigation on an image using Client side image Mapping in web page using html 5. 

Answer:- 

Create a webpage named imagemap. html with an inserted image having jpeg, png or gif extension. Create 3 different shapes (like rectangle, circle and polygon) which do not overlap. Note the co-ordinates making use of

 

HTML PROGRAM :-

<html>

<head><title>Image Mapping</title></head>

<body>

<img src="garden.jpg" alt="Garden Home" usemap="#garden">

<map name="garden">

<area shape="poly" coords="53,173,33,223,52,269,72,222" href="https://www.andersenwindows.com/windows-and-doors/doors/big-doors/" alt="click here to go to ">

<area shape="rect" coords="132,374,157,394"

href="https://dir.indiamart.com/impcat/garden-pole-light.html" alt="click here to go to ">

<area shape="circle" href="https://homebnc.com/best-flower-bed-ideas/" coords="468,389,35" alt="click here to go to ">

</map>

</body>

</html>

 

OUTPUT :-

 

 

https://itexamnotes.com/sop/practicals/A7.png

Comments

Post a Comment

Popular posts from this blog

javascript sop xii science

Image
SOP 1) [Javascript Practical] Create a web page in HTML having a white background and two Button Objects. Write code using JavaScript such that when the mouse is placed over the first button object without clicking, the color of the background of the page should change after every seconds. There should at least be 7 different and visibly distinct background colors excluding the default color. When the second button object is clicked, appropriate message should be displayed in Browsers status bar. Create another web page using JavaScript where the background color changes automatically after every seconds. This event must be triggered automatically after the page gets loaded in the browser. There should at least be 7 different and visibly distinct background colors. When the page is unloaded, the appropriate alert message should be displayed. Answer:- js1.html <!DOCTYPE html> <html> <head> <title></title> </head> <body id="background"...
Read more