Assignment-2: Q1. Create The Following Table

ASSIGNMENT-2
Q1. Create the Following Table.
PROGRAM
<html>
<head>
<title>MY TABLE</title>
</head>
<body>
<table border=1 align="center">
<tr>
<th rowspan=3>Day</th>
<th colspan=3>Seminar</th>
</tr>
<tr>
<th colspan=2>Schedule</th>
<th rowspan=2>Topic</th>
</tr>
<tr>
<th>Begin</th>
<th>End</th>
</tr>
<tr>
<td rowspan=2>Monday</td>
<td rowspan=2 bgcolor="#ffffcc" align="center">8:00 a.m.</td>
<td rowspan=2 bgcolor="#ccccff" align="center">5:00 p.m.</td>
<td align="center">Introduction to XML</td>
</tr>
<tr>
<td align="center">Validity:DTD and Relax NG</td>
</tr>
<tr>
<tr>
<td rowspan="5">Tuesday</td>
<td rowspan="2" bgcolor="#ffffcc" align="center">8:00 a.m.</td>
<td rowspan="3" align=center>XPath</td>
</tr>
<tr></tr>
<tr>
<td rowspan="2" bgcolor="#ccffcc" align="center">2:00 p.m.</td>
</tr>
<tr>
<td rowspan="2" align="center">XSL transformations</td>
</tr>
<tr>
<td bgcolor="#ccffcc" align="center">2:00 p.m.</td>
<td bgcolor="#ccccff" align="center">5:00 p.m.</td>
</tr>
<tr>
<td>Wednesay</td>
<td bgcolor="#ffffcc" align="center">8:00 a.m.</td>
<td bgcolor="#ccffcc">12:00 p.m.</td>
<td align="center">XSL Formatting Objects</td>
</tr>
</table>
</body>
</html>
OUTPUT
Q2. Create a web Page using HTML having frames as follows:
Your Name
Punch Line etc.
Objective Display information here of Display Relevent Image

Personal Information selected link here
Family Information
Educational Information
Experience
Achievements
The frame which includes Objective, personal information, etc., are the hyperlinks. Display
the relevant information in the next frame as selecting the link. The color scheme of
hyperlinks should be as follows:
Default- green; active – red; visited – blue.
PROGRAM
<html>
<head>
<title>MY FRAMES</title>
<frameset rows="20%,80%">
<frame src="first.html" name="one">
<frameset cols="33%,33%,34%">
<frame src="second.html" name="two">
<frame src="Third.html" name="three">
<frame src="Fourth.html" name="four">
</frameset>
</frameset>
<!—first.html 
<html>
<head>
</head>
<body align="center">
<h1 style="color:blue;">RUCHIKA GUPTA</h1>
<h2 style="color:red;">B.Tech(CSE)</h1>
</body>
</html>
<!—second.html
<html>
<head>
</head>
<body>
<a href="objective.html" target="three">Objective</a><br>
<a href="personalInformation.html" target="three">Personal Information</a><br>
<a href="familyInformation.html" target="three">Family Information</a><br>
<a href="educationalInformation.html" target="three">Educational Information</a><br>
<a href="experience.html" target="three">Experience</a><br>
<a href="achievements.html" target="three">Achievements</a>
</body>
</html>
<!--third.html
<html>
<head>
</head>
<body>
<I>CLICK ON THE LINK GIVEN AT THE LEFT TO KNOW ABOUT RESPECTIVE
CATEGORIES</I>
</body>
</html>
<1—fourth.html
<html>
<head>
</head>
<body>
<P>Images will be shown here.</P><BR>
<img src="download.png">
</body>
</html>
<!—objective.html
<html>
<head>
</head>
<body>
<b> To work with a prestigious company with a good organizational objective, challenging
and friendly environment wherein I can showcase my technical skills and competencies.</b>
</body>
</html>
<!—achievements.html
<html>
<head>
</head>
<body>
<b> SIG PLAN HEAD AT IPEC ACM STUDENT CHAPTER<BR>
ORGANISED VARIOUS WORKSHOPS AND EVENTS</b>
</body>
</html>
OUTPUT
Q3.Make a web page named as MOVIES.html.
On your MOVIES page, you’re required to include a nested list as indicated below.
 Use a large centered title. Include a background color.
 Make a simple two cell table. In the left cell – make a nested list like that seen
below. In the right cell – include an image of your favorite movie.
 Use different font for ordered lists from others. Eg. Arial for ordered and
Verdana for unordered list.
MY Favorite Movies
 DRAMA
1. Movie Name 1
2. Movie Name 2
3. Movie Name 3 Should Display your favorite Movie Image
 ACTION
1. Action Movie Name 1
 ADVENTURE
1. Adventure Movie Name1
 Science Fiction
1. Fiction Movie name 1
PROGRAM
<!doctype html>
<head>
<title>MOVIES</title>
<style>
ol li{
font-family:ariel;
}
ul li{
font-family:verdana;
}
</style>
</head>
<body>
<caption><center><b>My Favourite Movies</b></caption>
<table border=2 width="600">
<tr><td rowspan=3 ><ul type="disc">
<li><b>DRAMA</b>
<ol><li>Movie Name 1</li>
<li>Movie Name 2</li>
<li>Movie Name 3</li>
</ol></li>
<li><b>ACTION</b>
<ol>
<li>Action Movie Name 1</li>
</ol></li>
<li><b>ADVENTURE</b>
<ol>
<li>Adventure Movie Name1</li>
</ol></li>
<li><b>SCIENCE FICTION</b>
<ol>
<li>Fiction Movie Name 1</li>
</ol></li>
</ul> </td></tr>
<tr>
<td rowspan=3><h1>AVENGERS</h1><img src="avengers.jpeg"></td>
</tr>
</table>
</body>
<html>
OUTPUT
Q4..Create the Following Survey Form using the following guidelines:
 Use the following image as background of the web page.
 The legends in the left column (like “Name:”, “Email:”, “Goals:”, etc.) are all bold, right-
aligned. They must all line up at their right-hand edge, and be vertically aligned at the top of
the cell. (Hints: use a table)
1. This is a level one heading, right-aligned.
2. The Email webmaster must be a mailto: link that sends you an email with the subject Site
Feedback. The Evergreen Valley College Website link must open http://www.evc.html/ in a new
window.
3. These are level two headings. Their text color is #660000, and the font size must be set to
125% of normal, and they must be italic. To eliminate the extra vertical space that headings
give you, add margin: 0px to the style.
4. The value of the name= attribute for the “Name” field must be student. The “Email” field
must be named email. Both fields are 30 characters wide, and allow 28 characters maximum
input.
5. The radio buttons must belong to a field whose name is age. The “18-25” button must be
the default choice. The values for each of the buttons must be the same as their text:
 <18
 18-25
 26-40
 41-65
 65+
6. These checkboxes all belong to a field named goals. The values for each checkbox are:
 For Associate Degree, the value is AA

 For Transfer to CSU, the value is CSU
 For Transfer to UC, the value is UC
 For Personal Enrichment, the value is Personal
7. The name of this select menu is academic_field. It shows six entries at a time, and
allows multiple selection. The options and their values are listed here, with the values in
square brackets. Do not include the square brackets in your menu options.
a. [ACCT] Accounting
b. [ASTR] Astronomy
c. [BUS] Business
d. [CHEM] Chemistry
e. [CIT] Computer/Information Technology
f. [HLTH] Health
g. [HIST] History
h. [LART] Language Arts
i. [MATH] Mathematics
j. [P-E] Physical Education
k. [PSYC] Psychology
l. [SOC] Sociology
m. [THEA] Theatre Arts
8. The comments area has the name comments and is five rows by fifty columns.
PROGRAM
<html>
<head>
<title>College Survey</title>
</head>
<body background="C:\Users\Karan Arora\Desktop\bj.png">
<a href="mailto:[email protected]?Subject=Site_Feedback">Email Webmaster</a><br>
<a href="http://www.evc.html/">Evergreen Valley College Website</a>
<FORM name="form1" Method= " get " Action= " URL " >
<table border=8>
<caption>Evergreen Valley College Survey</caption>
<tr>
<th></th>
<th colspan=60>Personal Information</th>
</tr> <tr>
<td>
Name : </td>
<td colspan=4>
<INPUT TYPE="TEXT" NAME="Fname ">
</td></tr>
<tr><td>
Email:
</td>
<td colspan=4>
<INPUT TYPE="TEXT" NAME="Email">
</td></tr>
<tr><td>
Age:
</td>
<td colspan=4>
<18<input type="radio" name="age">
18-25<input type="radio" name="age" SELECTED>
26-40<input type="radio" name="age">
41-65<input type="radio" name="age">
65+<input type="radio" name="age">
</td></tr>
<tr>
<th colspan=4>Acadmic Information</th>
</tr><tr>
<td>goals</td>
<td colspan=60>
<p>Check all that apply</p>
<INPUT TYPE="CheckBox" Name="goals">Associate Degree
<INPUT TYPE="CheckBox" Name="goals">Transfer to CSU
<INPUT TYPE="CheckBox" Name="goals"><br>Transfer to UC
<INPUT TYPE="CheckBox" Name="goals">Personal Enrichment
</td></tr>
<tr><td>
Field of Study:
</td>
<td colspan=4>
<p>Select all that aplly,hold CTRL when clicking to select multiple item</p>
<SELECT NAME="fieldofstudy" size=6>
<OPTION value="ACCT" SELECTED> Accounting</OPTION>
<OPTION value="ASTR"> Astronomy</OPTION>
<OPTION value="BUS"> Business</OPTION>
<OPTION value="CHEM">Chemistry</OPTION>
<OPTION value="CIT"> Computer/Information Technology</OPTION>
<OPTION value="HLTH"> Health</OPTION>
<OPTION value="HIST">History</OPTION>
<OPTION value="LART">Language Arts</OPTION>
<OPTION value="MATH">Mathemetics</OPTION>
<OPTION value="P-E">Physical Education</OPTION>
<OPTION value="PSYC">Psychology</OPTION>
<OPTION value="SOC">Sociology</OPTION>
<OPTION value="THEA"> Theatre Arts</OPTION>
</select></td></tr>
<tr><td>
Comments:
</td>
<td colspan=4>
<TEXTAREA COLS=80 ROWS=4 Name="comments" >
</TEXTAREA></td></tr>
</table>
</form>
<center><button type="Send Data" form="form1" value="Send Data"><center>Send Date
</button>
<button type="reset form" form="form1" value="Reset form"><centers>Reset Form
</button>
</body>
</html>
OUTPUT
Q5. Copy and paste the following HTML into a file and save it with
the name style1.html and apply the CSS rules as given below:
PROGRAM
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>CIT 040 - Your Name - Styles</title>
<style type="text/css">
body {
background-image: url("p1.png");
background-repeat: repeat-y;
font-family:georgia,garamond,sans-serif;
h1 {
font-style:italic;
font-style:bold;
h2 {
background-color:blue;
color:white;
padding:.25em;
margin-bottom:.25em;
dl {
margin-left:1em;
dt {
font-style:bold;
font-size:125%;
dd {
margin-top:.25em;
margin-bottom:.25em;
margin-left:1.5em;
}
h3 {
color:orange;
text-align:center;
font-style:italic;
font-style:bold;
margin-top:0em;
margin-bottom:0em;
div {
border-bottom:2px dashed;
border-color:#00b2b2;
padding:1.5em;
margin-left:1.5cm;
p {
line-height:125%;
.imp{
background-color:yellow;
font-style:bold;
}
.l {
color:purple;
.r {
color:red;
</style>
</head>
<body style="margin-left:70px;">
<h1>Weather</h1>
<h2>Three Day Forecast</h2>
<dl>
<dt>Today</dt>
<dd>
Partly Cloudy.
<span class="r">High 68°-72&#176</span>;.
<span class="l">Low 52°-56&#176</span>;.
</dd>
<dt>Wednesday</dt>
<dd>
Morning Fog.
</dd>
<dt>Thursday</dt>
<dd>
Partly Sunny.
</dd>
</dl>
<h2>Bay Area Microclimates</h2>
<div>
<h3>San Jose Area</h3>
<p>
Night and morning fog through Wednesday with partly cloudy skies
otherwise. Highs, upper 60s to 70s. Lows in the 50s.
</p>
</div>
<div>
<h3>San Francisco</h3>
<p>
Partly cloudy today after moning fog. Fog giving way to sunny skies
Wednesday. Highs mid-60s to mid-70s. Lows near 50.
</p>
</div>
<h2>California Forecast</h2>
<p style="text-indent:1cm;">
Today through Thursday: Cooler than normal temperatures throughout
the state through Thursday. <span class="imp">There is a chance for isolated showers
across the Southern California mountains by Wednesday afternoon.</span>
</p>
</body>
</html>
OUTPUT

Assignment-2: Q1. Create The Following Table

Uploaded by

Copyright:

Available Formats

Assignment-2: Q1. Create The Following Table

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Assignment-2: Q1. Create The Following Table

Uploaded by

Copyright:

Available Formats

ASSIGNMENT-2

Q1. Create the Following Table.

Objective Display information here of Display Relevent Image

 For Associate Degree, the value is AA

<body background="C:\Users\Karan Arora\Desktop\bj.png">

<a href="mailto:[email protected]?Subject=Site_Feedback">Email Webmaster</a><br>

<a href="http://www.evc.html/">Evergreen Valley College Website</a>

<caption>Evergreen Valley College Survey</caption>

<INPUT TYPE="TEXT" NAME="Fname ">

<INPUT TYPE="TEXT" NAME="Email">

<18<input type="radio" name="age">

18-25<input type="radio" name="age" SELECTED>

26-40<input type="radio" name="age">

41-65<input type="radio" name="age">

65+<input type="radio" name="age">

<p>Check all that apply</p>

<INPUT TYPE="CheckBox" Name="goals">Associate Degree

<INPUT TYPE="CheckBox" Name="goals">Transfer to CSU

<INPUT TYPE="CheckBox" Name="goals"><br>Transfer to UC

<INPUT TYPE="CheckBox" Name="goals">Personal Enrichment

<SELECT NAME="fieldofstudy" size=6>

<OPTION value="ACCT" SELECTED> Accounting</OPTION>

<OPTION value="ASTR"> Astronomy</OPTION>

<OPTION value="BUS"> Business</OPTION>

<OPTION value="CIT"> Computer/Information Technology</OPTION>

<OPTION value="HLTH"> Health</OPTION>

<OPTION value="P-E">Physical Education</OPTION>

<OPTION value="THEA"> Theatre Arts</OPTION>

<TEXTAREA COLS=80 ROWS=4 Name="comments" >

<center><button type="Send Data" form="form1" value="Send Data"><center>Send Date

<button type="reset form" form="form1" value="Reset form"><centers>Reset Form

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<title>CIT 040 - Your Name - Styles</title>

<h2>Three Day Forecast</h2>

<span class="r">High 68&#176;-72&#176</span>;.

<span class="l">Low 52&#176;-56&#176</span>;.

<span class="r">High 71&#176;-75&#176</span>;.

<span class="l">Low 50&#176;-54&#176</span>;.

<span class="r">High 71&#176;-74&#176</span>;.

<span class="l">Low 48&#176;-52&#176</span>;.

<h2>Bay Area Microclimates</h2>

<h3>San Jose Area</h3>

otherwise. Highs, upper 60s to 70s. Lows in the 50s.

Wednesday. Highs mid-60s to mid-70s. Lows near 50.

Today through Thursday: Cooler than normal temperatures throughout

across the Southern California mountains by Wednesday afternoon.</span>

You might also like

<span class="r">High 68°-72&#176</span>;.

<span class="l">Low 52°-56&#176</span>;.

<span class="r">High 71°-75&#176</span>;.

<span class="l">Low 50°-54&#176</span>;.

<span class="r">High 71°-74&#176</span>;.

<span class="l">Low 48°-52&#176</span>;.