Scribd
Upload
83 views

HTML Code

The document contains code for an HTML page with an image map. The image map uses three different area shapes - a rectangle, circle, and polygon - to define clickable areas on an image that link to other pages. When clicked, the rectangular area links to page1.html, the circular area links to page2.html, and the polygon area links to page3.html. The image map allows creating interactive areas on an image to link to other pages or files.

Uploaded by

AKHILESH BHAGWAT
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
83 views

HTML Code

The document contains code for an HTML page with an image map. The image map uses three different area shapes - a rectangle, circle, and polygon - to define clickable areas on an image that link to other pages. When clicked, the rectangular area links to page1.html, the circular area links to page2.html, and the polygon area links to page3.html. The image map allows creating interactive areas on an image to link to other pages or files.

Uploaded by

AKHILESH BHAGWAT
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

SOP 1 second.

html
Coding:- <!DOCTYPE html>
index.html <html>
<!DOCTYPE html> <head><title>Forms</title>
<html> <meta charset="utf-8">
<head><title>Tata Group</title> <meta name="author" content="Form">
<meta charset="utf-8"> <style>
<meta name="author" content="Physical Tags"> h1{border-style:dashed}
<style> body{background-color:aqua}
h1{border-style:dotted} </style>
p{color:red;font-size:15pt} </head>
body{background-color:pink} <body>
b{text-decoration:overline} <h1 align="center">Enrollment Form</h1>
u{text-align:right} <form name="f1">
</style> </head> Enter Your Name
<body> <input type="text" name="t1" required>
<h1 align="center">Tata Sons Private Limited</h1> <br><br>
<p> Enter your Email ID
66% of the equity share capital of Tata Sons is held by <input type="email" name="emailid"><br><br>
philanthropic trusts, which support education, health, <input type="submit" name="submitbtn"
livelihood generation, and art and culture. Each Tata value="Submit">
company or enterprise operates independently under </form>
the guidance and supervision of its own Board of <a href="E:\XII COM IT 2020-21\SOP
Directors. Web\SOP1\index.html">First Page</a>
</p> </body>
<b>Governance Philosophy</b><br><br> </html>
<i>Tata Code of Conduct</i><br><br> Output:-
<u>Tata Business Excellence Model
(TBEM)</u><br><br>
<h3>Image of Tata Industries</h3>
<img src="E:\XII COM IT 2020-21\images\tata.jpg"
width="200" height="250" alt="Tata Industries">
<br><br>
<a href="E:\XII COM IT 2020-21\SOP
Web\SOP1\second.html">Second Page</a>
</body>
</html>
Output:-
SOP 2 :
Coding:-
page1.html
<!DOCTYPE html> Output:-
<html>
<head>
<title>
Tourist Places
</title>
<style>
section{background-
color:pink;width:50%;height:50%;float:right}
aside{width:50%;float:left}
ol{font-style:italic;font-size:15pt}
ul{font-weight:bold;font-size:20pt}
</style>
</head>
<body>
<header style="background-
color:skyblue;height:100pt">
<h1 align="center">Tourist Places</h1>
</header>
<br>
<aside>
<h3>City</h3>
<ol>
<li>Pune</li>
<li>Banglore</li>
<li>Hyberabad</li>
<li>Delhi</li>
</ol>
</aside>
<section>
<h3>Tourist places in Pune</h3>
<ul>
<li>Shanivarwada</li>
<li>Kelkar Museum</li>
<li>Sinhgad fort</li>
<li>Aga khan Palace</li>
</ul>
</section>
</body>
</html>
SOP 3 :
Coding:-
page1.html
<!DOCTYPE html> page2.html
<html> <html>
<head><title>Information Form</title> <head>
<link rel="stylesheet" type="text/css" <title>Information about Transporter</title>
href="external.css"> <link rel="stylesheet" type="text/css"
</head> href="external.css">
<body> </head>
<h1 align="center">Traveller Infomation <body>
form</h1> <h1 align="center">Information about
<form name="f1"> Transporter</h1>
Enter your name <ul>
<input type="text" name="name" <li> Name of Transporter - Air Asia</li>
auotcomplete><br><br> <li>Time - 09.30 am</li>
Select Date of Travel <li>Seat no - B39</li>
<input type="date" name="trvdate"><br><br> <li>Destination - Delhi</li>
Enter Telephone Number </ul>
<input type="tel" name="phone" <a href="E:\XII COM IT 2020-21\SOP
placeholder="123-456- Web\SOP3\page1.html">Connect First Page</a>
7890"pattern="[0-9]{3}-[0-9] {3} [0-9]{4}" </body></html>
required><br><br> external.css
<input type="submit" name="submit" h1{background-color:green;border-style:double}
value="Submit"> body{background-color:lightgreen}
</form> ul{font-family:Algerian}
<br><br> Output:-
<a href="E:\XII COM IT 2020-21\SOP
Web\SOP3\page2.html">
<img src="E:\XII COM IT 2020-
21\images\submit.jpg" width="150"></a>
</body></html>
Output:-
SOP 5 :
Coding:-
audio.html <h2>
<!DOCTYPE html> The text between the audio tags will only be
<html> displayed in browsers that do not support the
<head> audio element.</h2>
<title>Single Audio with controls</title> <h3>List of sound files formats</h3>
</head> <ol>
<body> <li>mp3 - audio/mpeg</li>
<h1 align="center">Audio with controls</h1> <li>ogg - audio/ogg</li>
<audio controls autoplay loop="-1"> <li>wav - audio/wav</li>
<source src="C:\Users\Public\Music\Sample </ol>
Music\Kalimba.mp3" type="audio/mpeg"> <audio controls autoplay>
</audio> <source src="E:\XII COM IT 2020-
</body> 21\sound\test.wav" type="audio/wav">
</html> <source src="E:\XII COM IT 2020-
Output:- 21\sound\test.mp3" type="audio/mp3">
<source src="E:\XII COM IT 2020-
21\sound\test.ogg" type="audio/ogg">
Your browser does not support the audio
element.
</audio>
</body>
</html>
Output:-

Audio1.html
<!DOCTYPE html>
<html>
<head>
<title>
Multiple Audio Files with controls</title>
</head>
<body>
<h1 align="center">Multiple Audio Files with
controls</h1>
SOP 6 :
<h2>
Coding:-
The text between the video tags will only
Video.html
be displayed in browsers that do not
<!DOCTYPE html>
support the video element.</h2>
<html>
<h3>List of video files formats</h3>
<head><title>Single Video File on Web
<ol>
Page with controls</title></head>
<li>mp3 - video/mpeg</li>
<body>
<li>ogg - video/ogg</li>
<h1 align="center">Single Video File on
<li>WebM - vfideo/webM</li>
Web Page with controls</h1>
</ol>
<video
<video controls width="100" height="100"
src="C:\Users\Public\Videos\Sample
autoplay>
Videos\shuttle.mp4" controls width="150"
<source src="E:\XII COM IT 2020-
height="150" loop="-1" autoplay>
21\video\movie.mp4" type="video/mp4">
</video>
<source src="E:\XII COM IT 2020-
</body>
21\video\movie.webm"
</html>
type="video/webm">
Output:-
<source src="E:\XII COM IT 2020-
21\video\movie.ogg" type="video/ogg">
</video>
</body>
</html>
Output:-

video1.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple Video File on Web Page
with controls
</title></head>
<body>
<h1 align="center">
Multiple Video File on Web Page with
controls</h1>
SOP 7 :
Coding:-
imagemap.html
<!DOCTYPE html>
<html>
<head>
<title>
Client Side Image Mapping
</title>
</head>
<body>
<h1 align="center">Client Side Image Mapping</h1>
<img src="E:\XII COM IT 2020-21\images\beach1.jpg" width="600" usemap="#imagemap">
<map name="imagemap">
<area shape="rect" coords="44,29,244,81" href="E:\XII COM IT 2020-21\SOP
Web\SOP7\page1.html" alt="Page1.html">
<area shape="circ" coords="380,271,60" href="E:\XII COM IT 2020-21\SOP
Web\SOP7\page2.html" alt="Page2.html">
<area shape="poly" coords="162,279,81,373,191,431,168,368,245,388" href="E:\XII COM IT
2020-21\SOP Web\SOP7\page3.html" alt="Page3.html">
</map>
</body>
</html>
Output:-

You might also like