Here are the solutions for your Skill Oriented Practicals(SOP) of HSC class 12th Information Technology(IT) Subject for students of Arts, Science, and Commerce. SOP practical program solutions for chapter 1 Advanced Web Designing Hsc IT of science commerce and Arts.

HSC IT SOP Practical Program Solutions – Chapter 1 Advanced Web Designing

12th HSC IT NEw paper pattern new syllabus 2023-24 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 that is highest among other text on pages and must be at the center of the page. There must be a paragraph that 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

Name:

Email:

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 2022 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

Traveller Name:

Travelling Date:

Telephone No:

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>

SOP5.

Solution code:-

sop solution chapter1 new syllabus class 12

SOP6.

Solution Code:-

hsc it skill oriented practical solutions chapter1

Solution code:-

SOP8

Solution:-

For all the above skill-oriented practicals step-by-step practical performing solutions you can watch this playlist below for the full 8 practicals of chapter 1 advanced web designing for both science and commerce stream.