Home Work-3

CAP305: Web Programming

SUBMITTED TO:Narinder Kaur


Declaration: I declare that this assignment is my individual work. I have not copied from any other student’s work or from any other source except where due acknowledgment is made explicitly in the text, nor has any part been written for me by another person. Student’s Signature

Evaluator’s comments: _____________________________________________________________________ Marks obtained : ___________ out of ______________________

Part-A Q1. Write the code to add image in specific cell of a table? ANSWER: <html> <body>

<h4>Cell backgrounds:</h4> <table border="4"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg"> Second</td> <td>Row</td> </tr> </table> </body> </html>

Q2. Using appropriate example enlist two types of table rows along with their attributes. ANSWER:

TR:-The <tr> tag defines a row in an HTML table. A tr element contains one or more th or td
elements. The TR tag has the following properties:-

ALIGN Aligns row contents to the LEFT, RIGHT, or CENTER. (default LEFT) VALIGN Aligns row contents to the TOP, MIDDLE, or BOTTOM. ( default MIDDLE) Bgcolor bgcolor also apply to table row. The <tr> tag also supports the following standard attributes:

class dir

classname rtl ltr

Specifies a classname for an element

Specifies the text direction for the content in an element Specifies a unique id for an element Specifies a language code for the content in an element Specifies an inline style for an element Specifies extra information about an element Specifies a language code for the content in an element.

id lang style title xml:lang

id language_code style_definition text language_code

Example :-

<html> <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </html>

TH: The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells: •Header cells - contains header information (created with the th element) •Standard cells - contains data (created with the td element) The text in a th element is bold and centered. The text in a td element is regular and left-aligned. The attributes are : Col span: - Sets the number of columns a cell should span Row span: - Sets the number of rows a cell should span Align : - Aligns the content in a cell(left, right, center , justify , char ) Valign: - Vertical aligns the content in a cell(top, middle, bottom ,baseline) Width : - Specifies the width of a cell TF . It also support the standard attributes as tr .

Example: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

Q3. Explain all the attributes used with <table> tag. ANSWER: The HTML <table> tag is used for defining a table. The table tag contains other tags that define the structure of the table. CELLPADDING and CELLSPACING:By default, table cells tend to be squeezed close to each other. To give your table cells a little more breathing room, use CELLPADDING and CELLSPACING.CELLSPACING controls the space between table cells. CELLPADDING sets the amount of space between the contents of the cell and the cell wall. ALIGN: - ALIGN will place the table to the left, right or center of the width of the screen.

Width: - WIDTH specifies how far across the TABLE is going to be. The number for this property can be specified as a number (in pixels) or a percentage of the screen width. If the WIDTH property is not specified, the TABLE automatically adjusts itself to be as long as the information contained within it. Border: - BORDER specifies a pixel wide border around the TABLE. This creates a similar effect as a frame around a picture. If this property is not specified, the default is 0. Vspace: - Holds a number of pixels space above and below an aligned table (same as vspace in the <img> tag). Hspace: - Holds a number of pixels space to the left and right of an aligned table (same as hspace in the <img> tag). The TR tag has the following properties:ALIGN Aligns row contents to the LEFT, RIGHT, or CENTER. (default LEFT) VALIGN Aligns row contents to the TOP, MIDDLE, or BOTTOM. ( default MIDDLE)

The TD tag has the following properties:-

ALIGN Aligns row contents to the LEFT, RIGHT, or CENTER. (default LEFT) VALIGN Aligns row contents to the TOP, MIDDLE, or BOTTOM. (default MIDDLE) WIDTH Assigns a pixel or percentage width to the cell. (default cell content width) HEIGHT Assigns a pixel or percentage height to the cell. (default cell content height)

Example :<html> <CENTER> <TABLE WIDTH="300" BGCOLOR="#C6EFF7" BACKGROUND=" C:\Users\Public\Pictures\Sample Pictures\tree.jpg" BORDER="3" CELLPADDING="8" CELLSPACING="1"> <TR> <TD WIDTH="150">Cell one text goes here.</TD> <TD WIDTH="150" <IMG SRC=" C:\Users\Public\Pictures\Sample Pictures\Autumn Leaves.jpg " BORDER="0" ALT="flower icon"> </TD> </TR> <TD>The third cell begins row two.</TD> <TD>This is cell four, the last cell of row </TR> </TABLE> </CENTER> </html> two.</TD>


Q4. Explain the function of bgcolor, bgcolor hexadecimal codes and caption tag with the help of example. ANSWER: If you want to use a background color on your page, you will need to begin by finding the <body> tag. Once you have found the tag, look for a command after the word body that says bgcolor="color". It may look like this:

<body bgcolor="gray"> Or the tag may have more commands inside and use hex codes, like this:

<body text="#000000" link="#A6CAF0" bgcolor="#808080"> And of course, the command may not be there at all. If this is the case, add it by placing a space after the word body and then type the command, like this:

<body bgcolor="gray" text="#000000" link="#A6CAF0"> Or if you don't have any other commands, just add it in like this:

<body bgcolor="gray"> To change the background color, replace the word gray inside the quote marks with a color name or a color hex code. For a list of some common color names and hex codes. So, if you wanted to change the background color to green, you would type:

<body bgcolor="green"> Or you could use the hex code for green:

<body bgcolor="#008000"> After doing this, your page will have a green background. If you use the hex code of a color, you place the entire hex code between the quote marks, including the # sign. All the "0" characters are zeros. So, to use a hex code to change the background color to blue, you would place the hex code for blue in the command, like this:

<body bgcolor="#0000FF"> here is the table for hexadecimal code:

Color Name Black White Red Blue Green Yellow Orange

HEX Code #000000 #ffffff #ff0000 #0000ff #008000 #ffff00 #ffa500

Definition and Usage of caption tag

The <caption> tag defines a table caption. The <caption> tag must be inserted immediately after the <table> tag. You can specify only one caption per table. Usually the caption will be centered below the table. Example:
<table border="1"> <caption>Monthly savings</caption> <tr>

<th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table>

Q5. Write html code for following layout. Lovely Professional University



ses • Scho ols • • s Dept Block

ANSWER: Code for main :<html> <frameset rows="20%,80%"> <frame src="1.html" name=1> <frameset cols="20%,80%">

<frame src="2.html" name=2> <frame src="3.html" name=3> </frameset> </frameset> </html> Code for 1.html:<html> <body> <center> <h1> Lovely Professional University</h1> </body> </html> Code for 2.html:<html> <body> <ul> <li><a href="4.html" target=3>classes</a> <li>Schools <li>Dept <li>Blocks



</html> Code for 4.html:<html> <body> class 1<br> class 1<br> class 1<br> class 1<br> class 1<br> class 1<br> class 1<br> </body> </html> Code for 3.html:<html> <body> </body> </html> Q.6 Enumerate the Role of JavaScript in web development. ANSWER: JavaScript makes the web a much easier, faster and prettier place. JavaScript can also make the web a most frustrating and insecure experience. An evolving case study transforms a static Web site into a dynamic site using JavaScript. Exercises include: •Creating rollover graphic effects •Preloading images to speed up rollover and animation effects •Creating interactive, self-validating forms

•Implementing an interactive user interface using alert, confirm and prompt dialog boxes •Incorporating DHTML effects into your Web pages •Implementing animations using JavaScript •Building drop-down menus •Using cookies to personalize pages •Easy to learn • Easy to implement • Immediate results • Very versatile • Performance • Server traffic savings • Increased usability through to more responsive interfaces • Reduction of redundant steps.