Scribd
Upload
353 views

HTML Record

This document defines and provides examples of basic HTML tags for formatting text and creating tables. It describes opening and closing tags, their functions, attributes, and basic syntax. Key tags covered include <html>, <head>, <title>, <body>, formatting tags like <b>, <i>, <u>, lists tags like <ul>, <ol>, <li>, table tags like <table>, <tbody>, <thead>, <tfoot>, and cell tags <tr>, <td>, <th>.

Uploaded by

Manimala Selvam
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
353 views

HTML Record

This document defines and provides examples of basic HTML tags for formatting text and creating tables. It describes opening and closing tags, their functions, attributes, and basic syntax. Key tags covered include <html>, <head>, <title>, <body>, formatting tags like <b>, <i>, <u>, lists tags like <ul>, <ol>, <li>, table tags like <table>, <tbody>, <thead>, <tfoot>, and cell tags <tr>, <td>, <th>.

Uploaded by

Manimala Selvam
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 131

SARADHA GANGADHARAN COLLEGE

Page No.

Ex.No: ELEMENTARY AND BASIC FORMATING TAGS Date: ELEMEMTARY TAGS <html>: Function: Begins and ends each HTML document. Indicates that the file is written in HTML. Type: Paired Tag. Syntax: <html></html>. Attributes: None. Example: <html> <head> <body><title>Hai</title> </body> </head> </html> <head>: Function: Every document has a head section, which includes the title. Type: Paired Tag. Syntax:<head></head> Attributes: None. Example: <html> <head> <body> <title> Hai </title>
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

</head> </html> <title>: Function: The title appears in the window as a name for the web page this tag goes in the head section. Type: Paired Tag. Syntax: <title><title> Attributes: None. Example: <head> <title>Hai</title> </head> <body> : Function: Contains all the information to be in your web page text, links, etc. Type: Paired Tag. Syntax: <body><body>. Attributes: Background: Specifies a background image for a document. Bgcolor: Specifies the background color of a document. Text: Specifies the color of the text in a document. Link: Specifies the default color of unvisited links in a document. Alink: Specifies the color of an active link in a document. Vlink: Specifies the color of the visited links in a document. Example: <body bgcolor=red text=white link=blue alink=yellow vlink=green> Hai </body>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TEXT-FORMATTING TAGS <h1>.<h6>: Function: These tag provide us the heading fonts with H1 to H6 where h1 is the most prominent and h6 is the least prominent. Type: Paired Tag. Syntax: <h1></h1>. Attributes: Align: Specifies the alignment of a heading. It takes the values left, center, right and justified. Example: <body bgcolor=red text=white> <h1 align=center>Hai</h1> </body> <p>: Function: It automatically creates some space before and after itself. Type: Paired Tag. Syntax: <p></p>. Attributes: Align: Specifies the alignment of a heading. It takes the values left, center, right and justified. Example: <body> <p align=left> This resembles a paragraph </p> </body> <b>:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Function: Defines bold text. Type: Paired Tag. Syntax: <b></b>. Attributes: None. Example: <body > <b>Hai</b> </body> <i>: Function: Defines italic text. Type: Paired Tag. Syntax: <i></i> Attributes: None. Example: <body > <i>Hai</i> </body> <u>: Function: Defines underlined text. Type: Paired Tag. Syntax: <u></u> Attributes: None. Example: <body > <u>Hello</u> </body> <em>: Function: Defines emphasized text. Type: Paired Tag.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Syntax: <em></em> Attributes: None. Example: <body > <em>Hello</em> </body> <big>: Function: Defines the text bigger than the current font size. Type: Paired Tag. Syntax: <big></big>. Attributes: None. Example: <body > <big>Hi</big> </body> <small>: Function: Defines the text smaller than the current font size. Type: Paired Tag. Syntax: <small></small>. Attributes: None. Example: <body > <small>Welcome</small> </body> <strong>: Function: Defines strong and emphasized text. Type: Paired Tag. Syntax: <strong></strong>.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Attributes: None. Example: <body > <strong>Welcome</strong> </body> <sub>: Function: Defines subscripted text. Type: Paired Tag. Syntax: <sub></sub>. Attributes: None. Example: <body > Wel<sub>come</sub> </body> <sup>: Function: Defines superscripted text. Type: Paired Tag. Syntax: <sup></sup>. Attributes: None. Example: <body > Wel<sup>come</sup> </body> <ins>: Function: Defines inserted text. Type: Paired Tag. Syntax: <ins></ins>. Attributes:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Cite: Specifies a URL to a document which explains why the text was inserted/changed. Datetime: Specifies the date and time when the text was inserted/changed. Example: <p>My favourite color is <del>blue</del> <ins>red</ins></p>. <del>: Function: Defines deleted text. Type: Paired Tag. Syntax: <del></del>. Attributes: Cite: Specifies a URL to a document which explains why the text was inserted/changed. Datetime: Specifies the date and time when the text was inserted/changed. Example: <p>My favourite color is <del>blue</del> <ins>red</ins></p>. <strike>: Function: Defines striked text. Type: Paired Tag. Syntax: <strike></strike>. Attributes: None. Example: <body > <strike>Hello</strike> </body> LIST TAGS
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<ul>: Function: Makes a list of items with bullets. Type: Paired Tag. Syntax: <ul></ul>. Attributes: Type: Specifies which kind of bullet point will be used. It takes the values disc, square and circle. Example: <body> <ul type=square > <li> apple</li> <li> banana</li> <li> orange</li> </ul> <ol>: Function: Makes a list of items with numbers or alphabets. Type: Paired Tag. Syntax: <ol></ol>. Attributes: Type: Specifies which kind of bullet point will be used. It takes the values 1, A, a, i and I. Value: Specifies the start point in a list. Example: <body> <ol type=1 value=5> <li> apple</li> <li> banana</li> <li> orange</li> </ol> <li>:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Function: Defines a list item. Type: Paired Tag. Syntax: <ol></ol>. Attributes:None Value: Specifies the number of the list item. Example: <body> <ol type=1 value=5> <li> apple</li> <li> banana</li> <li> orange</li> </ol> <dl>: Function: Defines a definition list. Type: Paired Tag. Syntax: <dl></dl>. Attributes: None. Example: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> <dt>: Function: Defines an item in a definition list. Type: Paired Tag. Syntax: <dt></dt>. Attributes: None.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Example: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> <dd>: Function: Used to describe an item in a definition list. Type: Paired Tag. Syntax: <dt></dt>. Attributes: None. Example: <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> <menu>: Function: Used to create a list of menu choices. Type: Paired Tag. Syntax: <menu></menu>. Attributes: None.

Example: <menu> <li>html</li> <li>xhtml</li>


Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<li>css</li> </menu> <dir>: Function: Is used to list directory titles. Type: Paired Tag. Syntax: <dir></dir>. Attributes: None. Example: <dir> <li>html</li> <li>xhtml</li> <li>css</li> </dir> TABLE TAGS <table>: Function: Defines an HTML table. Type: Paired Tag. Syntax: <table></table>. Attributes: Align: Specifies the alignment of a table according to surrounding text. It takes the value left, right, center and justified. Bgcolor: Specifies the background color for a table. It takes the value in three ways rgb(x,x,x),#xxxxxx and colorname. Border: Specifies the width of the borders around a table in pixels. Cellpadding: Specifies the space between the cell wall and the cell content in pixels. Cellspacing: Specifies the space between cells in pixels. Width: Specifies the width of a table in pixels or %.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Example: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <tbody>: Function: Groups the body content in an HTML table. Type: Paired Tag. Syntax: <tbody></tbody>. Attributes: Align: Aligns the content inside the tbody element. It takes the values right, left, center, justify, char. Char: Aligns the content inside the tbody element to a character. It takes the value in character. Charoff: Sets the number of characters the content inside the tbody element will be aligned from the character specified by the char attribute. It assigns the value in number. Valign: Vertical aligns the content inside the tbody element. It tales the values top, middle, bottom, baseline. Example: <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot>
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> <thead>: Function: Groups the header content in an HTML table. Type: Paired Tag. Syntax: <thead></thead>. Attributes: Align: Aligns the content inside the tbody element. It takes the values right, left, center, justify, char. Char: Aligns the content inside the tbody element to a character. It takes the value in character. Charoff: Sets the number of characters the content inside the tbody element will be aligned from the character specified by the char attribute. It assigns the value in number. Valign: Vertical aligns the content inside the tbody element. It tales the values top, middle, bottom, baseline. Example: <table border="1"> <thead> <tr>
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> <tfoot>: Function: Groups the footer content in an HTML table. Type: Paired Tag. Syntax: <tfoot></tfoot>. Attributes: Function: Defines a header cell in an HTML table. Type: Paired Tag. Syntax: <th></th>. Attributes: Align: Aligns the content inside the tbody element. It takes the values right, left, center, justify, char. Char: Aligns the content inside the tbody element to a character. It takes the value in character.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Charoff: Sets the number of characters the content inside the tbody element will be aligned from the character specified by the char attribute. It assigns the value in number. Valign: Vertical aligns the content inside the tbody element. It tales the values top, middle, bottom, baseline. Example: <table border="1"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table> <th>: Function: Defines a header cell in an HTML table. Type: Paired Tag. Syntax: <th></th>.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Attributes: Align: Aligns the content inside the tbody element. It takes the values right, left, center, justify, char. Abbr: Specifies an abbreviated version of the content in a cell. It takes the value in text. Bgcolor: Specifies the background color for a table. It takes the value in three ways rgb(x,x,x),#xxxxxx and colorname. Char: Aligns the content inside the tbody element to a character. It takes the value in character. Charoff: Sets the number of characters the content inside the tbody element will be aligned from the character specified by the char attribute. It assigns the value in number. Colspan: Sets the number of columns a cell should span. Rowspan: Sets the number of rows a cell should span Width: Specifies the width of a table in pixels or %. Example: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <tr>: Function: Defines a header cell in an HTML table. Type: Paired Tag. Syntax: <tr></tr>. Attributes: Align: Aligns the content inside the tbody element. It takes the values right, left, center, justify, char.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Bgcolor: Specifies the background color for a table. It takes the value in three ways rgb(x,x,x),#xxxxxx and colorname. Char: Aligns the content inside the tbody element to a character. It takes the value in character. Charoff: Sets the number of characters the content inside the tbody element will be aligned from the character specified by the char attribute. It assigns the value in number. Valign: Vertical aligns the content inside the tbody element. It tales the values top, middle, bottom, baseline. Example: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <td>: Function: Defines a standard cell in an HTML table. Type: Paired Tag. Attributes:None Align: Aligns the content inside the tbody element. It takes the values right, left, center, justify, char. Abbr: Specifies an abbreviated version of the content in a cell. It takes the value in text. Bgcolor: Specifies the background color for a table. It takes the value in three ways rgb(x,x,x),#xxxxxx and colorname. Char: Aligns the content inside the tbody element to a character. It takes the value in character.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Charoff: Sets the number of characters the content inside the tbody element will be aligned from the character specified by the char attribute. It assigns the value in number. Colspan: Sets the number of columns a cell should span. Rowspan: Sets the number of rows a cell should span Width: Specifies the width of a table in pixels or %. Example: <table border="1"> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> <caption>: Function: Defines a table caption. Type: Paired Tag. Attributes: Align: Aligns the content inside the tbody element. It takes the values right, left, center, justify, char. Example: <table border="1"> <caption>Monthly savings</caption> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr>
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

</table

Ex.No: MULTIMEDIA AND ADVANCED TAGS Date: FORM TAGS: <form>: Function: Used to create an HTML form for user input. Type: Paired Tag. Syntax: <form>...</form>. Attributes: Action: Specifies where to send the form-data when a form is submitted as an URL. Example: <form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form> <input>: Function: Used to select user information.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Type: Unpaired Tag. Syntax: <input attribute=value> Attributes: Align: Specifies the alignment of the input. It takes the values left, right, top, middle, bottom. Checked: Specifies that an input element should be preselected when the page loads. Disabled: Specifies that an input element should be disabled when the page loads. Maxlength: Specifies the maximum length of an input field. Name: Specifies a name for an input element. Readonly: Specifies that an input field should be read-only. Size: Specifies the width of an input field. Type: Specifies the type of an input element. It takes the values button, checkbox, file, hidden, image, password, radio, reset, submit, text. Value: Specifies the value of an input element. Example: <form action="form_action.asp" method="get"> First name: <input type="text" name="fname" /><br /> Last name: <input type="text" name="lname" /><br /> <input type="submit" value="Submit" /> </form>

<button>: Function: Defines a push button. Type: Paired Tag. Syntax: <button>...</button>. Attributes: Disabled: Specifies that a button should be disabled. Name: Specifies the name for a button.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Type: Specifies the type of a button. It may take the values submit, reset, and button. Value: Specifies the underlying value of a button. Example: <button type="button">Click Me!</button> <label>: Function: Defines a label for an input element. Type: Paired Tag. Syntax: <label>...</label>. Attributes: For: Specifies which form element a label is bound to. Example: <form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> </form> <select>: Function: Used to create a drop-down list. Type: Paired Tag. Syntax: <select>...</select>. Attributes: Disabled: Specifies that a drop-down list should be disabled. Multiple: Specifies that multiple options can be selected. Name: Specifies the name of a drop-down list. Size: Specifies the number of visible options in a drop-down list. Example:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <option>: Function: Defines an option in a select list. Type: Paired Tag. Syntax: <option>...</option>. Attributes: Disabled: Specifies that an option should be disabled. Label: Specifies a shorter label for an option. Selected: Specifies that an option should be selected by default. Value: Specifies the value to be sent to a server when a form is submitted. Example: <select> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </select> <textarea>: Function: Defines a multi-line text input control. Type: Paired Tag. Syntax: <textarea>...</textarea>. Attributes: Cols: Specifies the visible width of a text-area. Rows: Specifies the visible number of rows in a text-area.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Example: <textarea rows="2" cols="20"> At our website you will find all the Web-building tutorials you need, from basic HTML to advanced XML, SQL, ASP, and PHP. </textarea> <fieldset>: Function: Used to logically group together elements in a form and draws a box around the related form elements. Type: Paired Tag. Syntax: <fieldset>...</fieldset>. Attributes: None. Example: <form> <fieldset> <legend>Personal:</legend> Name: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br /> Date of birth: <input type="text" size="10" /> </fieldset> </form> <legend>: Function: Defines a caption for the fieldset element. Type: Paired Tag. Syntax: <legend>...</legend>. Attributes: None. Example: <form> <fieldset> <legend>Personal:</legend> Name: <input type="text" size="30" /><br /> Email: <input type="text" size="30" /><br />
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Date of birth: <input type="text" size="10" /> </fieldset> </form> <iframe>: Function: Defines an inline frame that contains another document. Type: Paired Tag. Syntax: <iframe>...</iframe>. Attributes: Align: Specifies the alignment of an iframe according to surrounding elements. It takes the values left, right, top, middle, bottom. Frameborder: Specifies whether or not to display a border around an iframe. It either takes the value 0 or 1. Marginheight: Specifies the top and bottom margins of an iframe. Marginwidth: Specifies the left and right margins of an iframe. Name: Specifies the name of an iframe. Scrolling: Specifies whether or not to display scrollbars in an iframe. Src: Specifies the URL of the document to show in an iframe. Width: Specifies the width of an iframe in % or pixels. Example: <iframe src ="html_intro.asp" width="100%" height="300"> <p>Your browser does not support iframes.</p> </iframe> <img>: Function: Embeds an image in an HTML page. Type: Unpaired Tag. Syntax: <img src=filename alt=text>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Attributes: Src: Specifies the URL of an image. Alt: Specifies an alternate text for an image. Example: <img src="angry.gif" alt="Angry face" />. <noframes>: Function: Is used for browsers that do not handle frames. Type: Paired Tag. Syntax: <noframes>...</noframes>. Attributes: None. Example: <html> <frameset cols="25%,50%,25%"> <frame src="frame_a.htm" /> <frame src="frame_b.htm" /> <frame src="frame_c.htm" /> <noframes> Sorry, your browser does not handle frames! </noframes> </frameset></html> <marquee>: Function: Creates a scrolling display. Type: Paired Tag. Syntax: <marquee>...</marquee>. Attributes: Direction: Which direction the marquee should scroll. It takes the value left and right. Width: Sets the width of the marquee. Height: Sets the height of the marquee.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Behavior: Defines the type of scrolling. It takes the values slide, scroll and alternate. Scrolldelay: Sets the speed of scrolling. Loop: Sets the number of times the marquee should loop. Bgcolor: Sets the background color of the marquee. Hspace: Sets the horizontal space to the left and right of the marquee. Vspace: Sets the vertical space at the top and bottom of the marquee. Example: <MARQUEE HSPACE=10 WIDTH="25%" BGCOLOR=YELLOW> Howdy there!<P> Good to see ya! </MARQUEE>Hi There!

<applet>: Function: Defines an embedded applet. Type: Paired Tag. Attributes: Code: Specifies the file name of a Java applet. It Takes the value of an URL. Object: Specifies a reference to a serialized representation of an applet. It takes the value of an Object name. Example: <applet code="Bubbles.class" width="350" height="350"> Java applet that draws animated bubbles. </applet> <embed>:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Function: Defines an embedded applet. Type: Unpaired Tag. Attributes: src: URL of resource to be embedded width: Width of area in which to show resource. name: Name of the embedded object. href: Make this object a link. Example: <embed src="helloworld.swf" /> <object>: Function: Is used to include objects such as images, audio, videos, Java applets, ActiveX, PDF, and Flash. Type: Paired Tag. Attributes: class: Specifies a classname for an element. It takes the value of the classname. align: Defines the text alignment around the object. It takes the value left, top, right and bottom. Example: <object classid="clsid:F08DF954-8592-11D1-B16A00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object> <param>: Function: Defines a parameter or variables of an object. Type: Unpaired Tag.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Attributes: Id: Specifies the unique id of the element. name: Defines the name for a parameter. type: Specifies the MIME type for a parameter. value: Specifies the value of a parameter. valuetype: Specifies the type of the value data, ref or object. Example: <object classid="clsid:F08DF954-8592-11D1-B16A00C0F0283628" id="Slider1" width="100" height="50"> <param name="BorderStyle" value="1" /> <param name="MousePointer" value="0" /> <param name="Enabled" value="1" /> <param name="Min" value="0" /> <param name="Max" value="10" /> </object>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Ex.No:

CASCADING STYLE SHEETS Date: CASCADING STYLE SHEETS Cascading Style Sheets (CSS) defines how to display HTML elements. External Style Sheets saves a lot of work and it is stored as .css files. GENERAL SYNTAX: A CSS rule has two main parts: a selector, and one or more declarations: P //Selector { color:red; text-align:center; //Declaration }

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

BACKGROUND PROPERTIES: Background: Function: Sets all the background properties in one declaration. Values: background-color, background-image, backgroundrepeat, background-attachment, background-position, inherit. Example: body{ background: #00ff00 url('smiley.gif') } Background-attachment: Function: Sets whether a background image is fixed or scrolls with the rest of the page. Values: scroll, fixed, inherit Example: body { background-image:url('smiley.gif'); background-attachment:fixed } Background-color: Function: Sets the background color of an element. Values: color-rgb, color-hex, color-name, transparent, inherit. Example: body{background-color:yellow} h1{background-color:#00ff00} p{background-color:rgb(255,0,255)} Background-image:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Function: Sets the background image for an element. Values: url(URL), none, inherit. Example: body{background-image:url('paper.gif')} Background-position: Function: Sets the starting position of a background image. Values: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x% y%, xpos ypos, inherit. Example: body { background-image:url('smiley.gif'); background-position:center } Background-repeat: Function: Sets how a background image will be repeated. Values: repeat, repeat-x, repeat-y, no-repeat, inherit. Example: body { background-image:url('paper.gif'); background-repeat:repeat-y } TEXT PROPERTIES: Color: Function: Sets the color of a text. Values: color. Example: body{color:red}
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

h1{color:#00ff00} p{color:rgb(0,0,255)} Direction: Function: Sets the text direction. Values: ltr, rtl. Example: div{ direction:rtl} Line-height: Function: Sets the distance between lines. Values: normal, number, length, % Example: p.small {line-height:90%} p.big {line-height:200%} Letter-spacing: Function: Increase or decrease the space between characters. Values: normal, length Example: h1 {letter-spacing:2px} h2 {letter-spacing:-3px} Text-align: Function: Aligns the text in an element. Values: left, right, center, justify. Example: h1 {text-align:center} h2 {text-align:left} h3 {text-align:right}
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Text-decoration: Function: Adds decoration to text. Values: none, underline, overline, line-through, blink Example: h1 {text-decoration:overline} h2 {text-decoration:line-through} h3 {text-decoration:underline} h4 {text-decoration:blink} Text-indent: Function: Indents the first line of text in an element. Values: length, %. Example: p{text-indent:50px} Text-transform: Function: Controls the letters in an element. Values: none, capitalize, uppercase, lowercase. Example: h1 {text-transform:uppercase} h2 {text-transform:capitalize} p {text-transform:lowercase} Vertical-align: Function: Sets the vertical alignment of an element. Values: baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, %. Example: img{vertical-align:text-top} White-space:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Function: Sets how white space inside an element is handled. Values: normal, pre, nowrap. Example: p{white-space:nowrap} Word-spacing: Function: Increase or decrease the space between words. Values: normal, length. Example: p{ word-spacing:30px} FONT PROPERTIES: Font: Function: Sets all the font properties in one declaration. Values: font-style, font-variant, font-weight, font-size/lineheight, font-family, caption, icon, menu, message-box, smallcaption, status-bar, inherit. Example: p.ex1{font:italic arial,sans-serif} p.ex2{ font:italic bold 12px/20px arial,sans-serif} Font-family: Function: Specifies the font family for text. Values: family-name, generic-family, inherit. Example: p{font-family:"Times New Roman",Georgia,Serif} Font-size: Function: Specifies the font size of text.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Values: xx-small, x-small, small, medium, large, x-large, xxlarge, smaller, larger, length, %, inherit. Example: h1 {font-size:250%} h2 {font-size:200%} p {font-size:100%} Font-style: Function: Specifies the font style for text. Values: normal, italic, oblique, inherit. Example: p.normal {font-style:normal} p.italic {font-style:italic} p.oblique {font-style:oblique} Font-variant: Function: Specifies whether or not a text should be displayed in a small-caps font. Values: normal, small-caps, inherit. Example: p.small{font-variant:small-caps} Font-weight: Function: Specifies the weight of a font. Values: normal, bold, bolder, lighter, 100-900, inherit. Example: p.normal {font-weight:normal} p.thick {font-weight:bold} p.thicker {font-weight:900} LIST PROPERTIES: List-style:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Function: Sets all the properties for a list in one declaration. Values: list-style-type, list-style-position, list-style-image, inherit. Example: ul{list-style:square inside url("/images/blueball.gif")} List-style-image: Function: Specifies an image as the list-item marker. Values: URL, none, inherit. Example: ul { list-style-image:url("/images/blueball.gif"); list-style-type:square }

List-style-position: Function: Specifies if the list-item markers should appear inside or outside the content flow. Values: inside, outside, inherit. Example: ul{list-style-position:inside} List-style-type: Function: Specifies the type of list-item marker. Values: none, disc, circle, square, decimal, decimal-leadingzero, Armenian, Georgian, lower-alpha, upper-alpha, lowergreek, lower-latin, upper-latin, lower-roman, upper-roman, inherit. Example:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

ul.circle {list-style-type:circle} ul.square {list-style-type:square} ol.upper-roman {list-style-type:upper-roman} ol.lower-alpha {list-style-type:lower-alpha}

Ex.No: BASIC TEXT FORMATTING TAGS Date:


Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

AIM:

To design a web page using basic text formatting tags. TAGS USED: <FONT></FONT>, <B></B>,

<I></I>, <STRIKE>

<U><.U>,

<BIG>,

<H2>..</H2>,

<CITE>,

<CODE>,

<PRE>,

<P><P>, <SUP>, <SUB>.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

SOURCE CODE: <html> <head> <title>Text Formating </title> </head> <body bgcolor="lightblue"> <h2><center><font face="monotype corsiva" color="red">BASIC TEXT FORMATTING TAGS</font></center></h2> BOLD TAG:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<b>This tag displays the text bold.</b><br><br> ITALICS TAG:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<i>This tag displays the text italics.</i><br><br> UNDERLINE TAG:<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<u> This tag displays the text underlined.</u><br><br> STRIKETHROUGH TAG:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<strike>This tag displays the text bold.</strike><br><br> BIG TAG:<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<big >This tag displays the text bigger than the current text size.</big><br><br>
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

CITE TAG:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;<cite>This tag displays the text like italics.</cite><br><br> CODE TAG:<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<co de>This tag displays the text like program code.</code><br><br> PRE TAG: <br><pre> This tag is used to display <br><br> the text in format as in the coding.</pre> DEFINITION TAG:<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<def >This tag displays the text like defintion format.</def><br><br> SUBSCRIPT & SUPERSCRIPT TAG:<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;This tag displays the text like this format :&nbsp;&nbsp;<sub>A</sub>&nbsp;&nbsp;<sup>b</sup>< br><br> FONT TAG:<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;This tag is used to change text <font face="comic sans MS">font face,</font><font size="5">font size,</font><font color="green">font color.</font><br><br> PARAGRAPH TAG:<br> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<rp >This tag displays the text in a paragraph format.It is paired tag.<br>&nbsp;&nbsp;Eg: Mohandas Karamchand Gandhi was born in Porbander on October 2, 1869. Educated in London, he returned to India to practice law. In 1893 he went to South Africa on a job assignment. During the 20 years he was in South Africa, Gandhi struggled for the elementary rights for Indians. He preached passive resistance. He was jailed many times and in 1914 he was able to achieve many concessions from South African Government. After

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

completing his contract in South Africa, Gandhi returned to India. </p><br><br> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEB SHOT: TEXT FORMATTING

RESULT: The above web page has been designed successfully and the webpage was found interactive.

Ex.No: IMAGE Date:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

AIM: To design a web page using image mapping tags. TAGS USED: <IMG>, <MAP></MAP>,<AREA> SOURCE CODE: <html> <head> <title>Anchor</title> </head> <body> <img src="1212777422CeGxCGh.jpg" usemap="#drop"> <map name="drop"> <area shape="poly" coords=347,259,330,268,293,269,277,260,256,256,248,245,2 42,232,240,209, 243,175,252,151,265,139,281,130,298,130,322,130,350,132,38 1,135,396,159, 401,183,403,212,399,228.396,250" href="as.html"> </map> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEB SHOT: MAP1.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

MAP2.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above web page has been designed successfully and the webpage was found interactive.

Ex.No: TABLE Date: AIM:

To design a web page using Table tags.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TAGS USED: <TABLE></TABLE>, <TR></TR>, <TD></TD>, <TH> </TH>. SOURCE CODE: <html> <head> <title>Table</title> </head> <body> <center><h1><b><i><font color="red">TIME TABLE</font></b></i></h1></center> <br><br> <table align="center" border="4" bgcolor="cyan" cellpading="50%"> <tr><th>Day<th>1<th>2<th>3<th rowspan=6>L<br>U<br>N<br>C<br>H <br><br>B<br>R<br>E<br>A<br>K<br><th>4<th>5<th>6 <th></tr> <tr><td>Monday<td>Software Engineering<td>Information Security<td>Web Technology<td>Ecommerce<td>Information Security<td>BioInformatics</tr> <tr><td>Tuesday<td>Information Securtiy<td>ECommerce<td>Software Engineering<td>Web technology<td>E-Commerce<td>Bio-Informatics</tr> <tr><td>Wednesday<td colspan=3><center>Web Technology Lab</center><td>Software Engineering<td>ECommerce<td>Bio-Informatics</tr> <tr><td>Thursday<td>E-Commerce<td>Software Engineering<td>Web Technology<td>Information Securtiy<td>Software Engineering<td>Bio-Informatics</tr>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<tr><td>Friday<td colspan=3><center>BioInformatics</center><td>Information Securtiy<td>ECommerce<td>Web Technology </tr> </body> </html>

WEB SHOT:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TIME TABLE

RESULT: The above web page has been designed successfully and the webpage is found interactive.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Ex.No: LIST Date

AIM: To design a web page using List Tags. TAGS USED: <OL></OL>, <UL></UL>,

<LI></LI>,

<DL></DL>,

<DT></DT>, </DD> SOURCE CODE: <html> <head> <title>Lists</title> </head>

<DD>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<body bgcolor="lightgreen"> <h1><center><font color="red" face="monotype corsiva">LISTS TAGS</font></center></h1> <b><u><i>ORDERED LIST:</b></u></i> <ol> <li> Dairy Milk </li> <li> Five Starts </li> <li> Milky Bar </li> <li> Munch </li> <li> Cofee Bite </li> <li> Eclaris </li> </ol> <b><u><i>UNORDERED LIST:</b></u></i> <ul type="disc"> <li> Rose </li> <li> Jasmine </li> <li> Sun Flower </li> <li>Lilly </li> <li> Kurinji </li> </ul> <b><u><i>DEFINITION LIST:</b></u></i> <dl> <dt>HTML:</dt> <dd>HTML stands for "Hyper Text Markup Language".It is used to design web pages and finally web sites which is a collection of web pages.</dd> <dt>TAG: </dt> <dd> Tag is an basic entity of HTML.There are two types tag:single& paired tag.</dd> <dt>CSS:</dt> <dd>CSS stands for "Cascading Style Sheet".Cascading Style Sheets are used to format the layout of web pages.they can be used to define text styles,table sizes and other aspects of web pages.</dd> <dt>DHTML:</dl> <dd>DHTML stands for "Dynamic HTML".It is a combination of several build in browser features available in
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

fourth generation browsers that enabled the web page to be dynamic.</dd> </dl> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEB SHOT: ORDERED LIST

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above web page has been designed successfully and the webpage found interactive.

Ex.No: ANCHOR Date:

AIM: To design a web page using Anchor tags. TAGS USED: <A> </A>

SOURCE CODE: ANCHOR1.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<html> <head> <title>Frame2</title> </head> <body background="pic2.jpg"> <font face="courier new" Size="6" color="blue"><b><center>LEADERS NAME</center></b></font><br><br><br> <center><ul type="disc" > <li><a href ="ac1.html" target="f3"><font face="monotype corsiva" size="5"><b>Mahatama Gandhi </b></a> <li><a href ="ac2.html" target="f3"><font face="monotype corsiva" size="5" ><b>Motilal Nehru</b></a> <li><a href ="ac3.html" target="f3" ><font face="monotype corsiva" size="5" ><b>Indira Gandhi </b></a> <li><a href ="ac4.html" target="f3"><font face="monotype corsiva" size="5" ><b>RajivGandhi </b></a> <li><a href ="ac5.html" target="f3"><font face="monotype corsiva" size="5" ><b>Vivekanandha </b></a> <li><a href ="ac6.html" target="f3"><font face="monotype corsiva" size="5" ><b>Sarojini Naidu</b></a> </ul> </body> </html> AC1.HTML <html> <head> <title>Gandhi</title> </head> <body > <center><h1>MAHATMA GANDHI</h1></center></font><br> <center><img src="ma.jpg" target="f3"><br><br> <p>Mohandas Karamchand Gandhi was born in Porbander on October 2, 1869. Educated in London, he returned to India
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

to practice law. In 1893 he went to South Africa on a job assignment. During the 20 years he was in South Africa, Gandhi struggled for the elementary rights for Indians. He preached passive resistance. He was jailed many times and in 1914 he was able to achieve many concessions from South African Government. After completing his contract in South Africa, Gandhi returned to India. </p> <p>Back in India, Gandhi became a leader in the struggle for home rule. He launched his movement of passive resistance against the British gaining millions of followers. A demonstration against Rowlett Acts, which gave sweeping powers to the colonial authorities, resulted in a massacre of Indians in Amritsar by British soldiers. When the British Government failed to amend the act, Gandhiji proclaimed an organised campaign of non co-operation. People boycotted public offices, government agencies schools etc. His 'swaraj' movement advocated the boycott of British goods and revival of cottage industries. He lived a spiritual and ascetic life of prayers, fasting and meditation and advocated non-violence. Gandhi became the international symbol of free India. And people called him 'Mahatma'.</p><br><br> <a href="anc home.html">BACK</a> </body> </html> AC2.HTML <html> <head> <title>nehru</title> </head> <body> <h1><center>MOTILAL NEHRU</h1></center><br> <center><img src="ne.jpg"><br><br> <p>In 1934, Mahatma formerly resigned from politics being replaced as leader of Indian National Congress by Jawaharlal Nehru. He travelled throughout India preaching 'Ahimsa'. In
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

1935 British granted India limited home rule. In 1939 Gandhiji again returned to active politics because of the pending Federation of Indian principalities with the rest of India. By 1944 the Indian struggle for independence reached its final stages. The British Government had agreed to independence and initiated a number of constitutional moves to effect the transfer of power. Because of various developements, partitioning of the country was inevitable to achieve freedom. Mahatma was against partitioning the country but he ultimately has to agree. </p> <a href="anc home.html">BACK</a> </body> </html> AC3.HTML <html> <head> <title>indira</title> </head> <body> <h1><center>INDIRA GANDHI</h1></center><br> <center><img src="ind.jpg"><br><br> <p>Indira Gandhi was, undoubtedly, one of the greatest political leaders of India. She was the first and only woman to be elected as the Prime Minister. She is also regarded as the most controversial political leader of the country for her unprecedented decision of imposing "a state of emergency". She was also criticized for carrying out the Operation BlueStar in Punjab that eventually scripted her assassination on 31 October 1984 </p><br><br> <a href="anc home.html">BACK</a> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEB SHOT:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

ANCHOR1.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

AC1.HTML

AC2.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

AC3.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above web page has been designed successfully and the webpage is found interactive.

Ex.No: FRAME Date: AIM: To design a web page using Frame tags. TAGS USED:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<FRAMESET></FRAMESET>,<FRAME> SOURCE CODE: FRAME.HTML <html> <head> <title>Frames</title> <frameset rows="20%,80%"> <frame name="f1"src="1.html"> <frameset cols="40%,60%"> <frame name="f2"src="2.html"> <frame name="f3"src="3.html"> </frameset> </head> <body> </body></html> 1.HTML <html> <head> <title>Frame1</title> </head> <body bgcolor="violet"> <marquee behavior="alternate" > <b><font face="bookman old style" color="black" size="7">NATIONAL LEADERS</font></marquee></b> </body> </html> 2.HTML <html> <head> <title>Frame2</title> </head>
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<body background="pic1.jpg"> <font face="courier new" Size="6" color="blue"><b><center>LEADERS NAME</center></b></font> <ul type="disc"> <li><a href ="gandhi.html" target="f3"><font face="monotype corsiva" size="5"><b>Mahatama Gandhi </b></a> <li><a href ="nehru.html" target="f3"><font face="monotype corsiva" size="5" ><b>Motilal Nehru</b></a> <li><a href ="indira.html" target="f3" ><font face="monotype corsiva" size="5" ><b>Indira Gandhi </b></a> <li><a href ="rajiv.html" target="f3"><font face="monotype corsiva" size="5" ><b>RajivGandhi </b></a> <li><a href ="vivek.html" target="f3"><font face="monotype corsiva" size="5" ><b>Vivekanandha </b></a> <li><a href ="saro.html" target="f3"><font face="monotype corsiva" size="5" ><b>Sarojini Naidu</b></a> </ul> </body> </html> 3.HTML <html> <head> <title></title> </head> <body> <img src="flo.jpg" width=500 height=500> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEB SHOT: FRAME.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RAJIV.HTML

VIVEK.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above web page has been designed successfully and the webpage is found interactive

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Ex.No: DYNAMIC MOVEMENT OF AN IMAGE Date: AIM: To design a web page to move an image dynamically using DHTML TAGS USED: <SCRIPT></SCRIPT>, <FORM> </FORM> ,<INPUT>, SOURCE CODE: <html> <head> <title>Dynamic Content</title> <script> function moving() { if(s.style.pixelLeft<500) s.style.pixelLeft+=30 mov=setTimeout("moving()",500) } function comeback() {
Department of computer science application and technology

<DIV></ DIV>

SARADHA GANGADHARAN COLLEGE


Page No.

clearTimeout(mov) s.style.pixelLeft=0 } </script> </head> <body> <font face =Monotype corsiva"size="10" color="Green"><center><b><i>DYNAMIC MOVEMENT<b><i></center></font> <br><br><Br> <div id="s" style="position:relative"> <img src="baby1.jpg"> </div> <form> <input type="button" value="move"onClick="moving()"> <input type="button" value="comeback"onClick="comeback()"> </form> </head> </html>

WEB SHOT:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

DYNAMIC MIVEMENT

RESULT: The above web page has been designed successfully and the webpage found interactive

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Ex.No: IMAGE RESIZE Date: AIM: To design a web page for Resizing an image using DHTML. TAGS USED: <SCRIPT></SCRIPT> ,<SPAN> </SPAN>, <DIV></DIV> SOURCE CODE: <html> <head> <title>IMAGE RESIZE</title> <script language="VBScript"> sub enlarge() aimage.style.pixelWidth=164 aimage.style.pixelHeight=200 end sub sub revertback() aimage.style.pixelWidht=82 aimage.style.pixelHeight=100 end sub
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

</script> </head> <body> <img id="aimage" alt="Move your Mouse Here" src="baby.jpg" OnMouseOver="enlarge()" OnMouseOut="revertback()"> <span id="sometext" OnMouseOver="sometext.style.color='red'"OnMouseOut="so metext.style.color='blue'">Hai!!Hello!!! </body></html>

WEB SHOT:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

IMAGE RESIZE 1

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

IMAGE RESIZE 2

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above web page has been designed successfully and the webpage found interactive

Ex.No: DYNAMIC CONTENT Date: AIM: To design a web page to display the content Dynamically using DHTML. TAGS USED: <SCRIPT></SCRIPT> SOURCE CODE: <html> <head> <title>Dynamic content</title> <script language="JavaScript1.2"> var con=new Array() con[0]= "SARDHA GANGADHARAN COLLEGE" con[1]= "BSC IT STUDENTS"
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

con[2]="ROCKING" var current=0 function ChangeContent() { mydiv.innerHTML=con[current] if(current==2) current=0 else current++ setTimeout("ChangeContent()",800) } window.onload=ChangeContent </script> </head> <body> <center><br> <br><BR><BR><BR><BR><BR> <FONT FACE=" Monotype Corsiva" SIZE=18 > <div id="mydiv"></div> </font> </center> </body> </html>

WEB SHOT:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

The above web page has been designed successfully and the webpage found interactive

Ex.No: QUIZ Date: AIM: To create a web page for conducting online QUIZZ program using VBScript TAGS USED: <SCRIPT></SCRIPT>,<FORM> </FORM>,<DIV><DIV>,<INPUT> SOURCE CODE: <html> <head> <title> Quizz</title> <SCRIPT LANGUAGE="JavaScript"> var ans = new Array; var done = new Array; var yourAns = new Array; var score = 0; ans[1] = "a"; ans[2] = "a";
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

ans[3] = "b"; ans[4] = "a"; ans[5] = "c"; function Engine(question, answer) { yourAns[question]=answer; } function Score(){ var answerText = "How did you do?\n------------------------------------\n"; for(i=1;i<=5;i++){ answerText=answerText+"\nQuestion :"+i+"\n"; if(ans[i]!=yourAns[i]){ answerText=answerText+"\nThe correct answer was "+ans[i]+"\n"; } else{ answerText=answerText+" \nCorrect! \n"; score++; } } answerText=answerText+"\n\nYour total score is : "+score+"\n"; answerText=answerText+"\nComment : "; if(score<=0){ answerText=answerText+"You need to learn some more"; } if(score>=1 && score <=2){ answerText=answerText+"bit more practice"; } if(score>=3 && score <=3){ answerText=answerText+"doing ok"; }
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

if(score>4){ answerText=answerText+"You are one hot java babe!"; } alert(answerText); } </script> </head> <body background="quiz.jpg" > <DIV ALIGN="left"> <center> <h1>General Quiz</h1> <b>Test your knowledge of Java!</b> </center> <hr> <FORM> <b>1. Who developed Java?</b><br> <input type=radio name="q1" value="a" onClick="Engine(1, this.value)">a)James Goosling <br> <input type=radio name="q1" value="b" onClick="Engine(1, this.value)">b)Deinees Richiee <br> <input type=radio name="q1" value="c" onClick="Engine(1, this.value)">c) Bijanare Stroustrop<br> <input type=radio name="q1" value="d" onClick="Engine(1, this.value)">d) Richard Fairly<p> <b>2. Java is mainly of ______________ Language? </b><br> <input type=radio name="q2" value="a" onClick="Engine(2, this.value)">a)OOPS<br> <input type=radio name="q2" value="b" onClick="Engine(2, this.value)">b) Structure<br> <input type=radio name="q2" value="c" onClick="Engine(2, this.value)">c) Procedural<br>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<input type=radio name="q2" value="d" onClick="Engine(2, this.value)">d) Object Based<p> <b>3.Which of the following is the newly developed concept in Java than in c++</b><br> <input type=radio name="q3" value="a" onClick="Engine(3, this.value)">a) Inheritance<br> <input type=radio name="q3" value="b" onClick="Engine(3, this.value)">b) Interface<br> <input type=radio name="q3" value="c" onClick="Engine(3, this.value)">c) Class<br> <input type=radio name="q3" value="d" onClick="Engine(3, this.value)">d) Objects <p> <b>4. What is the abbreviation of AWT</b><br> <input type=radio name="q4" value="a" onClick="Engine(4, this.value)">a)Abstract Window Toollkid<br> <input type=radio name="q4" value="b" onClick="Engine(4, this.value)">b)All Window Tool<br> <input type=radio name="q4" value="c" onClick="Engine(4, this.value)">c)Abstract Word Tools<br> <input type=radio name="q4" value="d" onClick="Engine(4, this.value)">d)Abstract Window Tips<p> <b>5.In Java where multithreading is used?</b><br> <input type=radio name="q5" value="a" onClick="Engine(5, this.value)">a)Only in Applet<br> <input type=radio name="q5" value="b" onClick="Engine(5, this.value)">b)Only in Application<br> <input type=radio name="q5" value="c" onClick="Engine(5, this.value)">c)Both in Application And Applet<br> <input type=radio name="q5" value="d" onClick="Engine(5, this.value)">d)None of the Above<p> <CENTER> <input type=button onClick="Score()" value="Well... How did I do?"> </CENTER> </FORM> </DIV>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

</body> <html>

WEB SHOT: ONLINE QUIZZ

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above webpage has been designed successfully and the webpage found interactive

Ex.No: INLINE STYLE SHEETS Date:

AIM: To design a web page using Inline Style Sheet. PROPERTIES USED:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

COLOR,FONTSTYLE,FONT-FAMILY. SOURCE CODE: <html> <head> <title> </title> </head> <body> <h1 style="color:blue;font-style:italics;font-family:Monotype Corsiva">MOTHILAL NEHRU</H1> <p style="color:blue;font-style:bold;font-family:arial">In 1934, Mahatma formerly resigned from politics being replaced as leader of Indian National Congress by <b>Jawaharlal Nehru</b>. He travelled throughout India preaching 'Ahimsa'. In 1935 British granted India limited home rule. In 1939 Gandhiji again returned to active politics because of the pending Federation of Indian principalities with the rest of India. By 1944 the Indian struggle for independence reached its final stages. The British Government had agreed to independence and initiated a number of constitutional moves to effect the transfer of power. Because of various developements, partitioning of the country was inevitable to achieve freedom. Mahatma was against partitioning the country but he ultimately has to agree. </p> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEBSHOT: INLINE

RESULT: The above web page has been designed successfully and web apge found interactive
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Ex.No: DOCUMENT STYLE SHEETS Date: AIM: To design a web page using Document Style Sheet. PROPERTIES USED: WORDSPACING,LNE.LENGTH,LETTER-SPACING ,TEXTDECORATION SOURCE CODE: <html> <head> <title> </title> <style> <!-Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

p{word-spacing:1pt;line-length:1pt;letter-spacing:0.5pt;textalign:left;text-decoration:overline} --> </style> </head> <body> <p> The <STRONG>hill stations in Tamil Nadu</STRONG> would overwhelm you if the temples have already charmed. Nestled in the Western Ghat ranges, these places promise breathtaking views of green-coated valleys, cascading waterfalls and thick woods. Hill stations remain major tourist attractions in Tamil Nadu because of the salubrious climate and serene ambience.Tamil cuisine is also a major draw for the visitors to the state. Tamilnadu boasts of a fantastic tradition of cuisine that captured many hearts across the world through the stomach. The specialties of Chettinad are real gastronomic delights. <BR><BR></P> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEB SHOT: DOCUMENT

RESULT:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

The above web page has been designed successfully and the webpage found interactive

Ex.No: EXTERNAL STYLE SHEETS Date:

AIM: To design a web page using External Style Sheet. PROPERTIES USED: FONT-FAMILY,FONTSTYLE,FONT-SIZE,FONT-WEIGHT. SOURCE CODE: EX.CSS h1{font-family:"Monotype Corsiva";font-style:italic;fontweight:16pt;font-size:large} p{font-family:"Times new roman";font-style:italics;fontsize:medium}

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

EXTERNAL.HTML <html> <head> <title> </title> <link href="ex.css" rel="stylesheet" type="text/css"> </head> <body> <h1>TOURISM</H1> <P>Tourism Tourist Places in Tamil Nadu represent the quintessence of Dravidian culture. Several dynasties like: Cheras, Cholas, Pallavas and Pandyan have ruled over the land and left indelible mark on it in their marvelous creations. Master craftsmen have etched in stone the tales from myths and legends, epic battles, demons with intricate details on the temple facades, which have defied time. Tamil Nadu is deservingly called The Land of Enduring Heritage. Some important templeBeing a wonderful state, Tamil Nadu has a number of tourist attractions and every place in Tamil Nadu has a new kind of natural wonder </P> </body> </html>

WEB SHOT: EXTERNAL

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above web page has been designed successfully and the webpage found interactive

Ex.No: REGISTRATION FORM (ASP) Date: AIM:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

To design a web page for Registration Form using ASP. TAGS USED: <SCRIPT> </SCRIPT>,<FORM>.<FORM>,<INPUT>. DATA DICTIONARY REGISTRATION FORM S.NO 1. 2. 3. 4. 5. FIELDNAME DATA TYPE FIRST NAME LAST NAME CITY E-MAIL PHONE SIZE DESCRIPTION Save this first name Save this last name Save this city Save this email Save this phone

CHAR 1 CHAR 1 CHAR 1 CHAR 1 INT 2

SOURCE CODE: <html> <head> <title></title> </head>


Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

<script language=javascript> <!-function validate() { if (document.tour.t1.value=="") { alert('Please enter First Name'); document.tour.t1.focus(); return(false); } if (document.tour.t2.value=="") { alert('Please enter Last Name'); document.tour.t2.focus(); return(false); } if (document.tour.t3.value=="") { alert('Please enter city'); document.tour.t3.focus(); return(false); } if (document.tour.t4.value=="") { alert('Please enter phone no'); document.tour.t4.focus(); return(false); } if (document.tour.t5.value=="") { alert('Please enter the emai id'); document.tour.t5.focus();
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

return(false); } } //--> </script> <body bgcolor="maroon"> <form name="tour"> First Name&nbsp;:<input type="text" name="t1" maxlength=20> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nb sp;&nbsp; Last Name:<input type="text" name="t2"><br><br> City&nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; : <input type="text" name="t3"><br><br> E-mail&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; : <input type="text" name="t4"><br><br> Phone(?)&nbsp;&nbsp;&nbsp; : <input type="text" name="t5"><br><br> <input name="esubmit" type="submit" value="Submit" onclick="return validate()"> <input name="eclear" type=reset value="Clear"> </form> </body> </html> ASP SOURCE CODE <%dim mode select case Request.Form("esubmit") case "Submit" mode="add" end select dim con,rs set con=Server.CreateObject("ADODB.Connection")

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

con.open "provider=microsoft.jet.oledb.4.0; data source="&server.mappath("reg.mdb") t1=TRIM(Request.Form("t1")) sql="select * from registration where firstname='"&t1&"'" set rs=server.createobject("ADODB.Recordset") rs.Open sql,con,adOpenStatic,adLockOptimistic if rs.recordcount>0 then rs.Close con.close response.write("Already Exists.....") response.write "<br><a href='hot.html'>Return</a>" else rs.AddNew rs.Fields("firstname") = TRIM(Request.Form("t1")) rs.Fields("lastname") = TRIM(Request.Form("t2")) rs.Fields("city") = TRIM(Request.Form("t3")) rs.Fields("email") = TRIM(Request.Form("t4")) rs.Fields("phone")= TRIM(Request.Form("t5")) rs.Update rs.close con.close if mode="add" then Response.Redirect "hot.html" else Response.Write("Sucessfully Recorded.....") end if end if %>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

WEBSHOT: REGISTRATION

RESULT: The above web page has been designed successfully and the webpage found interactive

WEB SHOT: SEARCHING


Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

RESULT: The above web page has been designed successfully and the webpage found interactive

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

HTML

DHTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

CASCADING STYLE SHEETS

MINI PROJECT

MINI-PROJECT REPORT ON TOURISM: TAMILNADU TOURISM

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

SUBMITTED BY SUBMITTED FOR WEB LAB N.MANJULA V SEMESTER K.KUPPAMMAL Bsc..,(IT) III

Saradha Gangadharan College, Department of Computer Science and applications,& technology Pondicherry-605004.
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

ABSTRACT: This project is entitled by tourism developed by using html,dhtml,script,asp Tourism is a web based application which takes the advantage of the latest technologies and allows the customers to have better interaction with the system. This project reports on the redesign of the existing manual system to a computerized system. The Tourism plays a major role in Business environment, over the years we have seen the drastic changes in the business organization. Many people book their travel by giving direct visit and booking the tour and hotel. The recent rapid development in web technology and growth of distributed processing seems to be only applicable for commercial business and field in online processing

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

The new prototype system has been designed using Web technology and implemented by using mainly HTML,DHTML,CSS,ASP for creating the communication server and the web site. Also, for the end user interface of the database, Microsoft Access application was used. The implementation of the system allows the customers to carry out the orders and communicate with the company dealers via the web site. The web site provides all the necessary details and information about the tourism

Hardware and Software Requirements A minimum software & hardware requirement for the system is: Hardware Requirements: Processor Pentium 2 and above. RAM 256 MB. HDD 10 GB.

Software Requirements:
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Operating System Windows XP/2000/98. Front End Tool MS FrontPage/Notepad Back End Tool Microsoft Access.

Modules There are five modules in this project. They are as follows: i) Home1 module ii) iii) Tour module Hotel module

iv) Tour Booking module v) Hotel booking module

These modules are explained in brief as follows: i) Home1 module: This module shows the homepage of the project which welcomes you to enter the system. ii) Tour module: This module shows the tourist places in tamilnadu and allows the user to navigate over the pages. iii) Hotel module: This module Lists hotels that are available in different places abd allows the user to navigate it..

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

iv)

Tour booking module: This module has the text field to be entered it has the booking details it also save the details in the database.

v)

Hotel booking module: This module has the text fields to be entered it has the bookimg details of the hotel it also saves in the databases,

Implementation: It is the process of bringing developed system of revised system into operational use. If the implementation phase is not carefully planned and controlled, it can lead to many problems. Thus proper implementation is essential to provide a reliable system to meet managerial requirements. The system was implemented using html, dhtml, css, and asp. This is to enable the users to use the system independent of the platform. The user can access the system through the web browser in any operating system environment. i) Home1.html:

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

This module shows the homepage of the project which welcomes you to enter the system. ii) Tour.html: This module lists the tourist places in tamilnadu and allows the user to navigate over the pages. iii) Hotels.html: This module Lists the hotels in tamilnadu for all places in tamilnadu and allows the user to navigate over the pages Iv) Tour booking.html: This module has the text field to be entered it has the booking details.It also save the details in the database

v)

Hotel booking .html: This module has the text fields to be entered it has the bookimg details of the hotel it also saves in the databases

SCREEN SHOT:

HOME1.HTML

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TOURIST PLACES:CHENNAI
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TOURIST PLACES :MADURAI

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TAMILNADU BEACHES:MARINA

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TAMILNADU BEACHES:KANIYAKUMARI

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TAMILNADU HILLSTATION:OOTY

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TAMILNADU HILL STATION: KODAIKANAL

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

HOTELS IN TAMILNADU

COIMBATORE HOTELS

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TANJAVUIR HOTELS

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

OOTY HOTELS

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

KODAIKANAL HOTELS

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

MAMALLAPURAM HOTELS

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

KANIYAKUMARI HOTELS

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

TOUR BOOKING

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

HOTEL BOOKING

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

CONTACT US

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

ABOUT US

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Conclusions

The primary aim was to explore the concepts of distributed and the most popular web designing tools HTML, all this were combine to create a computerized system from the existing system, which will allow multiple transaction simultaneously. The main objectives of this prototype are to derive a system that will serve the following: Efficient and reliable service to the user and the customer Minimize the user error where possible. All the users to interact with the system through a website, allowing them to communicate with the customer
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Although this prototype satisfies all the basic need for the orders, there are always spaces to improve and add extra features, which will make the system more robust.

Bibliography

Books: book Complete reference internet Grahm,The HTML 4.0 source Ackermann,Learning

Book to use the internet Mary Jane Mara,VB Script source

PAGE FLOW DIAGRAM


Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

HOME

TOURIST PLACES

HOTELS

TOURIST PLACES

CITIES

CHENNAI

HILL STATION

OOTY

COONOORE

HOTELS

COIMBATOR E HOTELS

KANNIYAKUMARI HOTELS

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Ex.No: Date: SEARCH(ASP)

AIM: To design a web page for search using ASP. TAGS USED: <SCRIPT></SCRIPT>, <FORM>.<FORM>,

<INPUT>. DATA DICTIONARY SEARCH S.N O 1. 2. FIELDNAM DATATYP SIZ E ANAME ADESP E CHAR CHAR E 1 1 DESCRIPTIO N Save this aname Save this

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

adesp 3. APATH CHAR 1 Save this apath SOURCE CODE:

SEARCH.ASP <% spagecaption="Animal Search Result"%> <html><body> <br>You searched for following:'<%=request.form("search") %>' <br><br><% set dbMain=Server.createObject("ADODB.Connection") dbMain.open "provider=microsoft.jet.oledb.4.0; data source="&server.mappath("search1.mdb") set rssee=Server.createObject("ADODB.recordset") ssearch=request.form("search") sql="Select * from see where aname like '%"&ssearch&"%' or adesp like'%"&ssearch&"%'" rssee.open sql,dbmain,adOpenDynamic if rssee.eof then response.write"No Animal of such Kind Available" response.write vbcrlf else rssee.movefirst do while not rssee.eof path=rssee("apath") response.write("<br><br><a href="&path&">"&ucase(ssearch)&"</a>") rssee.movenext loop end if
Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

rssee.close dbMain.Close %> </body> </html>

SEARCH.HTML <html> <head> <title>Search</title></head> <body><!--Search for--> <table cellspacing=0 cellpadding=3 border=0 align="center"> <tbody> <tr> <form action="search.asp" method="post" name="animal"> <td>search for: <input type="text" name="search"></td> <td><input type="submit"value="search"></td> </tr> </tbody> </table> </form> </body> </html>

Department of computer science application and technology

SARADHA GANGADHARAN COLLEGE


Page No.

Department of computer science application and technology

You might also like