hsc it sop practical solutions science commerce: HSC IT SOP Practical Program Solutions

Here is the solutions for your Skill Oriented Practicals(SOP) of HSC class 12th Information Technology(IT) Subject for students of Arts, Science, and Commerce. HSC IT practical solutions science commerce and HSC IT SOP Practical Program Solutions

 

HSC IT SOP Practical Programs Solution
HSC IT SOP Practical Programs Solution

 12th HSC IT NEw paper pattern new syllabus 2020-21 Read More

it practicals for hsc commerce, practicals_it.pdf, it practical for hsc science

12th HSC IT Notes Full Chapters new syllabus with exercise solutions Read More

SOP Practical program Solutions of chapter 3 Advanced Javascript Read More

SOP 1 Question:

Create a website using HTML5 and CSS using any 4 CSS properties. Write a code for two separate pages having different file names such as first page Index.html and second page as page2.htm. Every page must contain proper Meta data information and design as follows-

The Index page must contain a heading which is highest among other text on pages and must be at the centre of the page. There must be a paragraph which introduces general information about the theme and atleast 3 style tags and one image with alternate text. Page must be connected with proper navigational links.

The Second page must contain a feedback or enrollment form related with theme chosen features of HTML5. The form must contain text element and and email address of the company or person. Include the Submit Button.

SOP 1 Code File (index.html)

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		p
		{
			text-decoration : underline;
			font-style: bold;
			color:green;
			font-size: 24px;
		margin-left: 130px;	
		max-width: 1100px;

		}
		h1
		{
			
			text-align: center;
		}

	</style>
	<title>
		XYZ College of Commerce Science & Arts
	</title>
	<meta name="keywords" content="Faculty, students">
	<meta name="description" content="A college Website dealing with students and teachers/Faculty's data">
</head>
<body>
<h1>
	XYZ College of Commerce Science & Arts
</h1>
<nav style="font-size: 22px;">
	<a href="page2.html">Feedback Form</a>|
	<a href="page3.html">Contact Form</a>
	
	
</nav>
<br>
<br>
<p>
	Education is the most powerful weapon which you can use to change the world. Everyone is looking to change the world, and why not take part in these movements<sup>?</sup> People are paying a ridiculous amount of money for education, as this industry is valued around million dollars. Most of this amount is now spent on online education. Of course, our organization would like to give you an opportunity to take a fraction of this platform. The best way to gain quality education is to join with us where you can find majority of academic fields to enhance your career with.Many streams of subjects are available at our place.
</p>
<br>
<img src="sample.jpg" width="250px" height="250px"	 alt="XYZ College" align="right">
</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		h1
		{
			text-align: center;
		}
		div
		{
			margin-left: 500px;
			margin-top: 120px; 
		}
	</style>
	<title>
		Subject Streams according to admission
	</title>
<meta charset="utf-8" >
<meta name="keywords" content="political Science,Information technology">
<meta name="description" content="Subject Streams according to admission process">
</head>

<body>
<h1 >
	Feedback Form
</h1>
<div>
<label for="name">Name:</label>
<input type="text" name="name" ><br><br>
<label for = "email">Email:</label>
<input type="email" name="email">
<br>
<br>
<input type="submit" name="submit">
</div>
</body>
</html>

 

Feedback Form





page3.html

<!DOCTYPE html>
<html>
<head>
	<title>
		
	</title>
</head>
<body>
<h1> Third Page
</h1>
</body>
</html>

Video explanation for SOP practical 1 Solutions

hsc it sop practical solutions science commerce: HSC IT SOP Practical Program Solutions

For Advanced JAvascript Exercise solution Click to Read

Related Post

Amazon Offer on Academic books Best Deals Read More

SOP 2 Question:

Create a Website Using HTML and CSS code to design a web page as layout given-

SOP 2 Code File

<!DOCTYPE html>
<html>
<head>
	<title>SOP2 Advanced Web Designing Practical</title>
<style type="text/css">
	ol
	{
		font-size: 20px;
		margin-left: 240px;
		background-color: #f7f5d2;
		width:190px;
		
	}
	ul
	{
		font-size: 20px;
		max-width: 190px;
		background-color: pink;
		margin-left: 480px;
		display: block;
		
	}
</style>
</head>
<body>
<h1 style="background-color: cyan;color:#f011b4;margin-left: 240px;width: 500px;text-align: center;height: 60px;">
	Tourist Places
</h1>
<ol>
	<b>City</b>
	<li>Pune</li>
	<li>Bangalore</li>
	<li>Hyderabad</li>
	<li>Delhi</li>
</ol>
<ul>
	Tourist Places in Pune
	
		<li> Shanivarwada</li>
		<li> Kelkar Museum</li>
		<li>Sinhgad Fort</li>
</ul>
</body>
</html>

Video Solution explanation for SOP2 HSC IT Practicals for Science Commerce & Arts

 

hsc it practical solutions, hsc it practical solutions for science

SOP 3 Questions:-

Create a website using HTML and CSS code to design web pages as-

The first page will accept the name of the traveller date of travel, telephone number, also a submit button

The second web page has information about the transporter , time seat no destination displayed as unordered list

  • Name of Transporter – Air Asia
  • Time – 09:30 AM
  • Seat No – B39
  • Destination – Delhi

Both Pages should be interlinked. Create External Stylesheet with relevant tgs.

SOP 3 Code File(First.html)

<!DOCTYPE html>
<html>
<head>
	<title>SOP3 Demostration</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body bgcolor="lightyellow">
<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" id="phone" name="phone" pattern="[0-9]{2}-[0-9]{10}">

		</td>
	</tr>
	<tr>
		<td>
			<input type="image" name="Submit" id="Submit" src="Submit.png" onclick="window.location.href='second_page.html';">
		</td>
	</tr>
	
</table>
</body>
</html>


SOP3 Demostration Output



Second Page.Html

<!DOCTYPE html>
<html>
<head>
	<title>Second Page Html</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<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="submit" name="submit" value="Back" onclick="history.back();">
</div>
</body>
</html>

Output of Second.html

  • Name of Transporter – Air Asia
  • Time – 09:30 AM
  • Seat No – B39
  • Destination – Delhi

Note: Student if you find it difficult with then watch the video for complete demonstration of these practicals as i explained these with some editing of tags also so for video below link and if you have any doubts you can comment below in comment box.

link click link and subscribe for more

StyleSheet File (style.css) for above SOP 3 practical)

ul
{
	list-style-type: none;
}
div
{
	margin-left: 230px;
	margin-top: 130px;
	font-size: 25px;
}
table
{
	margin-left: auto;
	margin-right: auto;
	margin-top: 230px;
	font-size: 25px;
}

Sop4 Textbook Exercise Solution Chapter 1 Advanced Web design

Write code using CSS & HTML the following web page giving desired output.

<!DOCTYPE html>
<html>
<head>
	<title>Sop4 Demo practical</title>
	<style type="text/css">
		body
		{
			background-color: lightgrey;
		}
		nav
		{
			background-color: blue;
			height:30px;
			line-height: 30px;
			font-size: 18px;
			font-family: sans-serif;
		}
		span
		{
			font-size: 20px;
		}
		a
		{
			color:#FFFFFF;
			padding: 15px;
		}
		section
		{
			float: left;
			width: 70%;
			background-color: grey;
			margin: 5px 0;
		}
		article
		{
			background-color: white;
			margin: 0 5px;
		}
		footer
		{
			background-color: blue;
			line-height: 20px;
			height:20px;
			margin: 5px 0;
			color: white;
			padding:12px;
			font-size: 20px;
			font-family: sans-serif;
			clear:both;
		}
		aside
		{
			float: right;
			width: 29%;
			margin: 5px 0;
			background-color: grey;
		}
		h2,h3,h1,p
		{
			margin : 5px  0;
			padding :0  10px;

		}
	</style>
</head>
<body>
	<header>
		<h1>News</h1>
		<h3> Local and National News</h3>
		<nav>
			<a href="#"><span>H</span>OME</a>
			<a href="#"><span>A</span>rchives</a>
			<a href="#"><span>A</span>bout</a>
		</nav>
	</header>
<aside>
	<h2>BE A NEWS REPORTER</h2>
	<p>If you see news happening. Send us a Text.</p>
</aside>
<section>
	<h2>Local News</h2>
<article>
	<h3>Fire Fighters rescue man from building this is local news 1</h3>
<p>(reporter name, date)</p>
<p>  This is the fighter details. This is the story of fighter.
<br>
This is the detail of rescue man. This is the story of how is rescued.
</p>
</article>
	<article>
	<h3>
		New Library to be built this is local news 2
	</h3>
	<p>(reporter name,date)</p>
	<p> This is the story text. This is the story text.
		<br>
	This is the story text. This  is the story text.</p>
</article>
</section>
<section>
	<h2>
		National News
	</h2>
	<article>
		<h3>
		Snow storm is making travel difficult </h3>
<p>(reporter name, date)</p>

<p>This is the story snow storm. This is the story distoiral of storm.
	<br>
This is the story part continued . This is the story text continued.</p>
</article>
<article>
<h3>Thousands are without power</h3>
<p>(reporter name, date)</p>
<br>
<p>This is the story of not having power. This is the story text continued.
<br> This is the story bad effect. This is the story about destroyal of economy.
</p>
</article>
</section>
<footer>
footer information
</footer>
</body>
</html>











HSC IT New Syllabus Notes for Science Commerce and Arts CLik to read

Advanced Javascript Notes Exercise Solutions click to refer

 IT NEw paper pattern new syllabus HSC 2020-21 Read More

Ecommerce and Egovernance textbook exercise solutions Read more

Related Post

Amazon Offer on Academic books Best Deals Read More

20 thoughts on “hsc it sop practical solutions science commerce: HSC IT SOP Practical Program Solutions”

Leave a Comment

error: