Scribd Logo
Upload

Welcome to Scribd!

  • 71 views

    Assignment-2: Q1. Create The Following Table

    Uploaded by

    Ruchika Gupta
    The document provides code for an HTML survey form with the following elements: 1) Personal information fields like name and email 2) Demographic questions like age with radio buttons 3) Academic goals checkboxes 4) A multi-select dropdown for field of study 5) A comments textarea The form is embedded in a table and includes formatting for labels, fields, and questions according to the guidelines provided.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content

    You might also like

    Assignment-2: Q1. Create The Following Table

    Uploaded by

    Ruchika Gupta
    71 views19 pages
    The document provides code for an HTML survey form with the following elements: 1) Personal information fields like name and email 2) Demographic questions like age with radio buttons 3) Academic goals checkboxes 4) A multi-select dropdown for field of study 5) A comments textarea The form is embedded in a table and includes formatting for labels, fields, and questions according to the guidelines provided.

    Original Description:

    gffffffffyhfyfryyyyyyyyyyy

    Original Title

    rrrrr

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    The document provides code for an HTML survey form with the following elements: 1) Personal information fields like name and email 2) Demographic questions like age with radio buttons 3) Academic goals checkboxes 4) A multi-select dropdown for field of study 5) A comments textarea The form is embedded in a table and includes formatting for labels, fields, and questions according to the guidelines provided.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    71 views19 pages

    Assignment-2: Q1. Create The Following Table

    Uploaded by

    Ruchika Gupta
    The document provides code for an HTML survey form with the following elements: 1) Personal information fields like name and email 2) Demographic questions like age with radio buttons 3) Academic goals checkboxes 4) A multi-select dropdown for field of study 5) A comments textarea The form is embedded in a table and includes formatting for labels, fields, and questions according to the guidelines provided.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 19

    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="2" bgcolor="#ffffcc" align="center">11:00 a.m.</td>
    <td rowspan="3" align=center>XPath</td>
    </tr>
    <tr></tr>
    <tr>
    <td rowspan="2" bgcolor="#ffffcc" align="center">11:00 a.m.</td>
    <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
    2. Action Movie Name 2
    3. Action Movie Name 3
     ADVENTURE
    1. Adventure Movie Name1
    2. Adventure Movie Name1
    3. Adventure Movie Name1
     Science Fiction
    1. Fiction Movie name 1
    2. Fiction Movie name 1
    3. 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>
    <li>Action Movie Name 2</li>
    <li>Action Movie Name 3</li>
    </ol></li>
    <li><b>ADVENTURE</b>
    <ol>
    <li>Adventure Movie Name1</li>
    <li>Adventure Movie Name2</li>
    <li>Adventure Movie Name3</li>
    </ol></li>
    <li><b>SCIENCE FICTION</b>
    <ol>
    <li>Fiction Movie Name 1</li>
    <li>Fiction Movie Name 2</li>
    <li>Fiction Movie Name 3</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:webmaster@evc.com?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&#176;-72&#176</span>;.

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

    </dd>

    <dt>Wednesday</dt>

    <dd>
    Morning Fog.

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

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

    </dd>

    <dt>Thursday</dt>

    <dd>

    Partly Sunny.

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

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

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

    You might also like