INFORMATION TECHNOLOGY
SKILL ORIENTED PRACTICALS
(SOP)
1. Advanced Web Designing
SOP 1: Creation of website using HTML5
Create a website using HTML5 and CSS using any 4 CSS properties. Write a code
for 2 separate pages having different file names such as first page as [Link]
and second page as [Link]. Use any theme such as college profile or
company profile etc. Every page must contain proper Meta information and
design web page as follows-
1) The index page must contain a heading which is highest among other text
on pages and must be at center of the page. There must be a paragraph
which introduces general information about the theme chosen must have
at least 3 physical style tags and one image with alternate text. This page
must be connected to other two pages with proper navigational links.
2) The 2nd page must contain the feedback or enrolment form related with
theme chosen with features of HTML5. The form must contain text element
and email address of the company or person. Include the submit button.
Solution :
[Link]
<!DOCTYPE html>
<html>
<head>
<Title>SOP-1Creation of website using HTML5</title>
<style>
img
{
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 550px;
}
</style>
</head>
<body>
<h1 align="center">MAEER's MIT Junior College ,Loni</h1>
<p><h3>Vision : MIT Junior Colleges aim at preparing students to be confident,
knowledgeable and competent to step into reputed professional institutions
besides developing self-discipline and universal values.<h3></p>
<img src="H:\MIT JOINING\SOP XII SCI\[Link]" alt="MIT College">
<br>
<a href="[Link]">Courses Offered</a>
<br>
<a href="[Link]">Feedback Form!!!</a>
</body>
</html>
OUTPUT:
Solution :
[Link]
<!DOCTYPE html>
<html>
<style>
body {
background-image: url('[Link]');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
</style>
<h2><b>Available Streams</b></h2>
<ol>
<li>Science</li>
<p><em>For Science we have following subjects</em>
<ol>
<li>PCMB
<ul style="list-style-type:disc;">
<li>Mathematics</li>
<li>Physics</li>
<li>Chemistry</li>
<li>Biology</li>
<li>Information Technology</li>
<li>Environment Science</li>
<li>Geography</li>
<li>Health Education</li>
</ul>
</li>
<li>Other courses
<ul style="list-style-type:disc;">
<li>NEET</li>
<li>JEE</li>
<li>CET</li>
</ul>
</li>
<li>Commerce
<ul style="list-style-type:disc;">
<li>English</li>
<li>Accounts</li>
<li>Information Technology</li>
<li>Mathematics</li>
<li>S.P.</li>
<li>Economics</li>
</ul>
</li>
</p>
<li>Other courses for commerce stream
<br>
</li>
<li>C.A.</li>
<li>Non C.A.</li>
</ol>
</body>
</html>OUTPUT:
Solution :
[Link]
<!DOCTYPE html>
<html>
<style>
body {
background-image: url('[Link]');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
<form action="" bgcolor="blue">
<h3>Your Feedback is valuble to us to improve our Sevice!!!</h3>
<br><br>
First name:
<input type="text" name="firstname" value="">
<br><br>
Last name:
<input type="text" name="lastname" value="">
<br><br>
E-Mail ID:
<input type="email" name="E-Mail Id" value="">
<br><br>
Password:
<input type="password" name="Password" value="">
<br><br>
Feedback:
<input type="textarea" name="Feedback" value="">
<br><br>
<input type="submit" value="submit">
<input type ="reset" value="clear">
</form>
</body>
</html>
OutPut:
SOP 2 : Create a webpage using HTML and CSS code to design a web page as
the layout displayed below.
The top section will display the heading, ‘Tourist places’ in header. The section
on the left has list of cities. The right hand side displays tourist places of any one
of the city.
Use Inline style sheet in the top section to display background color for the text
‘Tourist places’. Use internal stylesheet for the left and right section with
background color and font styles.
Solution :
[Link]
<!DOCTYPE html>
<html>
<head>
<title> Table </title>
<style type="text/css">
table
{
margin-left: 200px;
margin right:200px;
margin-top: 250px;
margin-bottom: 250px;
}
ol
{
padding-left: 50px;
}
ul
{
padding-right: 80px;
}
.left_col
{
background-color:#fffcd1 ;
font-size: 40px;
}
.right_col
{
vertical-align: text-top;
background-color:#ffc9f1;
font-size: 40px;
}
</style>
</head>
<body>
<table border="1" align="center">
<th colspan="2" style="font-size: 45px; color:#ff99ee; background-color:#8fd6ff;
height: 150px; width:800px">
Tourist Places
</th>
<tr>
<td class="left_col">
City
<ol>
<li>Pune</li>
<li>Bangalore</li>
<li>hyderabad</li>
<li>Delhi</li>
</ol>
</td>
<td class="right_col">
<b> Tourist Places in Pune </b>
<ul>
<li>
Shaniwarwada
</li>
<li>
Kelkar Musium
</li>
<li>
Sinhgad Fort
</li>
</ul>
</td>
</tr>
</table>
</body>
</html>
</html>
OUTPUT:
SOP 3
Traveller Program
CODE:
#Traveller 1
<!DOCTYPE html>
<html> <title> <head> Transport Department </title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<style>
body{background-image: url("[Link]");}
</style>
<body>
<H1>Transport Schedule</h1>
<table>
<tr>
<td>
<label for="name"> Traveller Name: </label>
<input type="text" name="Traveller_name" id="name">
</td> </tr>
<tr> <td>
<label for="date">Travelling Date:</label>
<input type="date" name="Travelling_date" id="date">
</td> </tr>
<tr> <td><label for="phone_no"> Telephone No: </label>
<input type="tel" name="Tel_no" id="phone_no">
</td>
</tr>
<tr><td><br>
<input type="image" name="Submit" id="Submit" src="[Link]"
onclick="[Link]='[Link]';">
</td>
</tr>
</table>
</body>
</html>
Output
Traveller Page2:
<!DOCTYPE html>
<html>
<head>
<title>
Details #Traveller 2
</title>
<link rel="stylesheet" type="text/css" href="[Link]">
</head>
<Style>
body {
ul
list-style-type: none;
div
{
margin-left: 230px;
margin-top: 130px;
font-size: 45px;
}</style>
<body bgcolor="pink"> <H1>Transport Information</h1>
<div>
<ul>
<li>
Name Of Transporter - Air Asia
</li>
<li>
Time - 09:30 AM
</li>
<li>
Seat No - B39
</li>
<li>
Destination - Delhi
</li>
</ul>
<input type="image" name="submit" value="Back" onclick="[Link]();" src="[Link]">
</div>
</body>
</html>