1.
SOP 1:
Aim: Write a program using HTML with following specifications.
The background colour should be green.
The text colour should be red.
The heading should be large in size as 'My First Web Page'.
Display a horizontal line after the heading.
Display your name in Bold, address in Italics and standard as 11th.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
SOP 1
</title>
</head>
<body bgcolor=”blue” text=”red”>
<h1>My First Web Page</h1>
<hr>
<b>Name</b>
<br>
<i>Address</i>
<br>
Standard 11<sup>th</sup>
</body>
</html>
1
2. SOP 2:
AIM: Create a webpage with following specifications:
Image of any scientist with an alternate text as his name.
Create a paragraph related to information of that scientist.
Create a table of his/her inventions.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
SOP 2
</title>
</head>
<body>
<img src=ʺ[Link]ʺ alt= ʺA P J Abdul Kalamʺ>
<br>
<p> Dr. Abdul Kalam's full name was Abdul Kalam's Avul Pakir Jainullabadin. He is
known as India's Missile Man and Janshadharan's president of the public. Under British
India (currently the Ramanathapuram district of Tamilnadu), on 1931, October 15, he was
born in a poor 'Tamil family' in Rameswaram, Madras presidential district of Ramnad.
<br>
He was a 'great scientist' who succeeds the country from '2002 to 2007' as India's 11th
president. He get back to the education, writer, and public service of his civic life after
completing his tenure as president.
<br>
Abdul Kalam worked on several main ISRO and DRDO posts and later was 'Chief
Scientific Adviser' to the 'Government of India' in the Indian Cabinet Ministry.
</p>
<br>
<table border= ʺ5ʺ bordercolor= ʺblueʺ>
<tr>
2
<th>Sr. No.</th>
<th>Invention</th>
<th>Year</th>
</tr>
<tr>
<td>1</td>
<td>Pokhran-2</td>
<td>1974</td>
</tr>
<tr>
<td>2</td>
<td>Kalam Raju Stent</td>
<td>1998</td>
</tr>
</table>
</body>
</html>
3
3. SOP 3:
AIM: Create a webpage with following specifications:
Display heading ʺApplication Formʺ in highest heading with central alignment.
Accept name, standard 11th or 12th with only one selection choice.
Submit the form.
Code:
<!DOCTYPE html>
<html>
<head>
<title>
SOP 3
</title>
</head>
<body>
<h1 align=ʺcenterʺ> Application Form</h1>
<form name=ʺf1ʺ>
Enter Name:
<input type=ʺtextʺ name=ʺt1ʺ>
<br>
Standard:<br>
<input type=ʺradioʺ name=ʺrʺ>11<sup>th</sup>
<br>
<input type=ʺradioʺ name=ʺrʺ>12<sup>th</sup>
<br>
<input type=”submit” name=”b1” value=”Submit”>
</form>
</body>
</html>
4
4. SOP 4:
AIM: Create a web page with following specifications.
A webpage with details about a class with total number of students 100 (Boys – 50),
(Girls – 50) in tabular form.
Eg:
Number of students Boys Girls
100 50 50
Link this page to another page as follows.
STD – XI
Stream – Commerce
DIV – B/C
Code:
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
SOP 4
</title>
</head>
<body>
<table border=ʺ5ʺ>
<tr>
<th>Number of Students</th>
<th>Boys</th>
<th>Girls</th>
</tr>
<tr>
<td>100</td>
<td>50</td>
<td>50</td>
</tr>
</table>
5
<a href=ʺ[Link]ʺ>Click</a>
</body>
</html>
[Link]
<!DOCTYPE html>
<html>
<head>
<title>
Demo
</title>
</head>
<body>
<table border=ʺ1ʺ>
<tr>
<td rowspan= ʺ3ʺ>
<b>STD – XI</b>
<br>
<i>Stream – Commerce</i>
<br>
<u>DIV – B/C</u>
</td>
</tr>
</table>
</body>
</html>