SOP (1A) Creation of Website using HTML5
First.html
<!DOCTYPE html>
<html>
<head>
<title>Tata Group</title>
<meta charset="utf-8">
<meta name="author" content="Physical Tags">
<style>
h1{border-style:dotted}
p{color:red;font-size:15pt}
body{background-color:pink}
b{text-decoration:overline}
u{text-align:right}
</style>
</head>
<body>
<h1 align="center">Tata sons Private Limited</h1>
<p>
66% of the equity share capital of Tata Sons is held by philanthropic trusts, which support
education, health, livelihood generation and art and culture. Each Tata company or enterprise
operates independently under the guidance and supervision of its own Board of Directors.
</p>
<b>Governance Philosophy</b><br><br>
<i>Tata Code of Conduct</i><br><br>
<u>Tata Business Excellence Model (TBEM) </u><br>
<h3>Image of Tata Industries</h3>
<img src="Tata Industries.jpg"width="200" height="250" alt="Tata Industries"><br><br>
<a href="second.html">Second Page</a>
</body>
</html>
SOP(1B) Creation of Website using HTML5
Second.html
<!DOCTYPE html>
<html>
<head>
<title>
Forms
</title>
<meta charset="utf-8">
<meta name="author" content="Form">
<style>
h1{border-style:dashed}
body{background-color:aqua}
</style>
</head>
<body>
<h1 align="center">Enrollment Form</h1>
<form name="f1">
Enter Your Name
<input type="text" name="t1" required>
<br><br>
Enter your Email ID
<input type="email" name="emailid"><br><br> <input type="submit" name="submitbtn"
value="Submit">
</form>
<a href="First.html">First Page</a>
</body>
</html>
SOP (2) Create a webpage using HTML and CSS code to
design a webpage as per layout.
Tourist.html
<!DOCTYPE html>
<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 forts</li>
<li>Aga khan Palace</li>
</ul>
</section>
</body>
</html>
SOP3(A)Create a webpage using HTML and CSS code to
design webpage as per given…
Page1.html
<!DOCTYPE html>
<html>
<head>
<title> Information
Form
</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1 align="center">Traveller Infomation form</h1>
<form name="f1">
Enter your name
<input type="text" name="name" auotcomplete><br><br>
Select Date of Travel
<input type="date" name="trvdate"><br><br>
Enter Telephone Number
<input type="tel" name="phone" placeholder="123-456-7890"pattern="[0-9][0-9][0-9][0-9][0-
9][0-9][0-9][0-9][0-9][0-9]" required><br><br>
<Input type="submit" name="submit" value="Submit">
</form>
<br><br>
<a href="page2.html">Connect second Page</a>
<Img src="navneet.jpg" width="150"></a>
</body>
</html>
Page2.html
<html>
<head>
<title>
Information about Transporter
</title>
<link rel="stylesheet" type="text/css" href="external.css">
</head>
<body>
<h1 align="center">Information about Transporter</h1>
<ul>
<li> Name of Transporter - Air Asia</li>
<li>Time - 09.30 am</li>
<li>Seat no-B39</li>
<li>Destination - Delhi</li>
</ul>
<a href="page1.html">Connect First Page</a>
</body>
</html>
External.css
h1{background-color:green;border-style:double}
body{background-color:lightgreen}
ul{font-family:Algeriam}
SOP4: Creation of website using HTML and CSS.
Use <nav>, <header>, <footer>, <aside>, <article> with CSS
Semantic.html
<!DOCTYPE html>
<html>
<head>
<style> header{background-color pink;width:100%;height:20%}
nav{background-color:skyblue;width:100%;height:20%}
aside{background-color:grey;width:40%; float:right}
section{background-color:lightyellow; width:60%;height:10%;float:left}
article{background-color:violet;width: 60%;height:40%}
footer{background-color:blue;width:100%;height:30%}
</style>
</head>
<body>
<header>
<h3>News</h3>
Local and National News
</header>
<br>
<nav>
<a href="http://www.home.in">HOME</a>
<a href="http://www.archives.in">ARCHIVES</a>
<a href="http://www.about.in">ABOUT</a>
<br>
</nav>
<br>
<aside>
<h3>Be a News Reporter</h3>
If you see news happening - Send us a text.</aside>
<article>Local News</article>
<section>
<h4>Fire fighters rescue man from building this is local news</h4>
(reporter name,date)<br>
This is the fighter details text. This is the story of fighter<br>
This is the detail of rescue man. This is the story of how he rescued<br>
</section>
<br>
<section>
<h4>New library to be built this is local news 2</h4>
reporter name,date)<br>
This is the story text. This is the story text.<br>
This is the story text. This is the story text.<br>
</section>
<br>
<article><b>National News</b></article>
<section>
<h4>Snow strom is making travel difficult</h4>
(reporter name,date)<br>
This is the story of Snow strom. This is the story of distroial of storm<br>
This is the story part continued. This is the story text continued<br>
</section>
<article>
<h4>Thousands are without power</h4>
(reporter name,date)<br>
This is the story of not This is the story text continued<br>
This is the story bad effect. This is the story about dsitroyal of economy<br>
</article>
<br>
<footer>Footer Information</footer>
</html>
SOP5: Use of Audio on Web pages using
HTML5( Single Audio with control)
Single audio.html
<!DOCTYPE html>
<html>
<head>
<title>Single Audio with controls</title>
<head>
<body>
<h1 align="center">Audio with controls</h1>
<audio controls autoplay loop="-1">
<source src="test1.mp3"
type="audio/mpeg">
</audio>
</body>
</html>
Use of Audio on pages using HTML5 Multiple
Audio with control
Multiple audio.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple Audio Flies with controls</title>
</head>
<body>
<h1 align="center">Multiple Audio File With controls</h1>
<h2> The text between the audio tags will only be display in browsers that do not support the audio elements
</h2>
<h3>List of sound flies formats</h3>
<OL>
<li>mp3-audio/mpeg</li>
<li>ogg-audio/ogg</li>
<li>wav-audio/wav<li>
</OL>
<audio controls autoplay>
<source src="test1.wav" type="audio/wav">
<source src="test2.mp3" type="audio/mp3">
<source src="test3.ogg" type="audio/ogg">
</audio>
</body>
</html>
SOP6 (A) Use of Video on pages using
HTML5 (Single Video with
controls)
Single Video.html
<!DOCTYPE html>
<html>
<head>
<title>
Single Video File on Web Page with controls
</title>
</head>
<body>
<h1 align="center">Single Video file on Web page with controls</h1>
<video src="video1.mp4" controls width="450" height="350" loop="-1" autoplay>
</videos>
</body>
</html>
Use of Video on pages using HTML5 Multiple
Video with control
Multiple Video.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>
<h2>The Text between the video tags only be displayed in browsers that do not support the video
element</h2>
<h3>List of Video files formats</h3>
<ol>
<li>test1-video/mpeg</li>
<li>test2-video/ogg</li>
<li>test3-video/webm</li>
<video controls width="400"height="350" autoplay>
<source src="video1.mp4" type="video/mp4">
<source src="video2.ogg" type="video/ogg">
<source src="video3.webm" type="video/webm">
</video>
</body>
</html>
SOP (7) : CLIENT SIDE IMAGE MAPPING
imagemap.html
<!DOCTYPE html>
<html>
<head>
<title>Client Side Image Mapping</title>
</head>
<body>
<h1 align="center">Client Side Image Mapping</h1>
<img src="Tulips.jpg" usemap="#Tulips" width="500">
<map name="Tulips">
<area shape="rect"coords="72,71,203,134"
href="http://www.google.com" alt="Google">
<area shape="poly"coords="308,103,226,172,256,280,361,279,393,170"
href="http://www.facebook.com" alt="facebook">
<area shape="circ"coords="91,215,50"
href="color.html" alt="color">
</map>
</body>
</html>
