IWT Lab

Slide Examples 1. <html> <head> <title>Title of page</title> </head> <body> This is my first homepage. <b>This text is bold</b> </body> </html>

2. <html>

<body bgcolor="0fafff" text="yellow"> <p> This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. </p> <p> This is another paragraph. This is another paragraph. This is another paragraph. This is another paragraph. </p> </body> </html>

3. <html> <body background="background.jpg" text="cyan"> <h3>Look: A background image!</h3>

<p>Both gif and jpg files can be used as HTML backgrounds.</p> <p>If the image is smaller than the page, the image will repeat itself.</p> </body> </html>

4. <html> <body> <h1 align="center">This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> <p align="center">Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p> <hr size="5" width="75%" align="center">

</body> </html>

5. <html> <body> <h1 style="color:blue">A heading</h1> <p style="color:red">A paragraph</p> </body> </html>

<html> <body> <b>This text is bold</b> <br> <strong> This text is strong </strong> <br> <big> This text is big </big> <br> <big><big><big> BIGGER TEXT</big></big></big> <br> <em> This text is emphasized </em> <br> <i> This text is italic <br> .6.

<small> This text is small </small> <br> <small><small><small> This text is smaller </small></small></small> <br> This text contains <sub> subscript </sub> <br> This text contains <sup> superscript </sup> <br> <del> deleted text</del> <br> <s><s> striked using s</s></s> <br> <strike> striked text</strike> <br> <u> underlined text</u> </body> </html> .

</pre> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i </pre> </body> </html> . It preserves both spaces and line breaks. <html> <body> <pre> This is preformatted text.7.

8. <html> <body> <p>Character entities</p> <p>&X;</p> <p> &174; </p> <p>&lt;</p> <p> Substitute the "X" with an entity number like "&#174;" or an entity name like "pound" to see the result. </p> </body> </html>

9. <html> <body> <p> <a href="lastpage.html"> This text</a> is a link to a page on this Web site. </p> <p> <a href="http://www.celtem.com/"> Visit Celtem</a> is a link to a page on the World Wide Web. </p> </body> </html>

10. <html> <body> <p> <a href="#C4">See also Chapter 4.</a> <a href="#C10">See also Chapter 10.</a> </p> <h2>Chapter 1</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 2</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 3</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C4">Chapter 4</a></h2> <p>This chapter explains ba bla bla</p>

<h2>Chapter 5</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 6</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 7</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 8</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 9</h2> <p>This chapter explains ba bla bla</p> <h2><a name="C10">Chapter 10</a></h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 11</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 12</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 13</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 14</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 15</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 16</h2> <p>This chapter explains ba bla bla</p> <h2>Chapter 17</h2> <p>This chapter explains ba bla bla</p> </body> </html>

the "alt"-text is "Go Left". Here. most browsers will display the "alt"-text.</p> <p> Note that if you hold the mouse pointer over the image. <html> <body> <img border="2" src="goleft.gif" alt="Go Left" width="32" height="32"> <p> Text-only browsers cannot display images and will only display the text that is specified in the "alt" attribute for the image. </p> </body> </html> .11.

<html> <body> <p> You can also use an image as a link: <a href="lastpage.12.html"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> </body> </html> .

<html> <body> <p> An image <img src="hackanm.Click on Next and watch 13.gif" align="middle" width="48" height="48"> in the text </p> <p> .gif" align="bottom" width="48" height="48"> in the text </p> <p> An image <img src ="hackanm.

gif" align="top" width="48" height="48"> in the text </p> <p>Note that bottom alignment is the default alignment</p> <p> An image <img src ="hackanm.gif" width="48" height="48"> in the text </p> <p> <img src ="hackanm.gif" width="48" height="48"> </p> </body> </html> .gif" width="48" height="48"> An image before the text </p> <p> An image after the text <img src ="hackanm.An image <img src ="hackanm.

3" .html"> <area shape="circle" coords="90. <html> <body> <p> Click on one of the planets to watch it closer: </p> <img src="planets.14.58.82.gif" width="145" height="126" usemap="#planetmap"> <map id="planetmap" name="planetmap"> <area shape="rect" coords="0.126" alt="Sun" href="sun.0.

html"> </map> <p><b>Note:</b> The "usemap" attribute in the img element refers to the "id" or "name" (browser dependant) attribute in the map element.8" alt="Venus" href="venus.58.</p> </body> </html> Click these three points and watch the output. .alt="Mercury" href="mercury.html"> <area shape="circle" coords="124. therefore we have added both the "id" and "name" attributes to the map element.

15. <html> <body> <h4>An Ordered List:</h4> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> 16. <html> <body> <h4>An Unordered List:</h4> <ul> .

cell 2</td> </tr> . cell 1</td> <td>row 2.<li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> 17. <html> <body> <table border="1"> <tr> <td>row 1. cell 1</td> <td>row 1. cell 2</td> </tr> <tr> <td>row 2.

</table> </body> </html> 18. and a thick border: </h4> <table border="6"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> . <html> <body> <h4> This table has a caption.

<td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html> 19. <html> <body> <h4>A background color:</h4> <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> .

jpg" "width=50%" cellpadding="20" cellspacing="30" align="center"> <tr> <td><font color="white" size="24"><b>First</b></font></td> <td><font color="white" size="24"><b>Row</b></font></td> </tr> <tr> <td><font color="white" size="24"><b>Second</b></font></td> <td><font color="white" size="24"><b>Row</b></font></td> </tr> </table> </body> </html> .<td>Second</td> <td>Row</td> </tr> </table> <h4>A background image:</h4> <table border="1" background="rocks.

20. <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html> .

21. <Html> <body> <form action="" method=post name=form1> <table align="center" border=1 cellpadding=0 cellspacing=5 width="80%"> <tr> <td>Name</td> <td><input type="text" name="name1" value="John" size="20" maxlength="15" ></td> </tr> <tr> <td>Password</td> <td><input type="password" name="password1" size="20" maxlength="12"></td> </tr> <tr> <td>Free Mails for</td> <td><select name="freestuff" multiple size="3"> <option value="I">Investements <option value="B"selected>EBusiness <option value="M">Movies <option value="U">Music <option value="T">Technical </select> .

you can send your comments by typing in this text box </textarea></td> </tr> <tr> <td>Information by email</td> <td><input type="checkbox" name="email" checked></td> </tr> <tr> <td>EMails </td> <td><input type="radio" name="period" value="daily"> daily <input type="radio" name="period" value="weekly">weekly <input type="radio" name="period" value="monthly">monthly </td> </tr> </tr><tr> <td><input type="submit" name=submit1 value="submit register" id=submit1></td> <td><input type="reset" name=reset1 value="clear" id=reset1></td> </tr> </table> </form> </body> </html> .</td> </tr> <tr> <td>text area</td> <td><textarea name="freemails" rows =5 cols= 50> This is free mailing service.

50%.25%"> <frame src="frame_a.html"> <frame src="frame_c.html"> <frame src="frame_b.html"> </frameset> </html> . <html> <frameset rows="25%.22.

html"> <frame src="frame_c.50%.html"> </frameset> </html> .23.html"> <frame src="frame_b.25%"> <frame src="frame_a. <html> <frameset cols="25%.

75%"> <frame src="frame_b.html"> <frame src="frame_c. <html> <frameset rows="50%.html"> <frameset cols="25%.25.html"> </frameset> </frameset> </html> .50%"> <frame src="frame_a.

Include the following introductory paragraph. centered. A bold centered heading (use the largest heading size) of: My Favorite Things Include a horizontal rule underneath the heading that is colored.HTML Lab Guide HTML Assignment 1 Create a page that includes the following elements: • • • • Web page title (displayed in title bar of browser window): My Favorite Things Use a color for the background of your site. 75% of the screen’s width and has a size of 8. filling in the blanks with the appropriate information for yourself. Use a font size of 4 and a font face of Comic Sans MS: • .

Underline the name of each movie. This web page lists my favorite foods. Save the page as HTML1. The table should be 50% of the screen's width and centered. list your top five favorite television shows. left align the following heading: My Favorite Foods. Using a definition list. with a font face of your choice and color of your choice. Using an unordered list. include five of your favorite things to eat. Insert two blank lines. left align the following heading: My Favorite TV Shows. Store three images in a folder (images). Resize the images so that they fit appropriately on the page and are displayed in one row at the bottom of your web page. Using an ordered list. Create a 4 row. Use rowspan and colspan attribute wherever required. Bold the heading. size of 4. Bold the heading. Use the same font settings as the unordered list. Center the contents of each table cell. list your five favorite movies and include a description of why you liked the movie. 2 column Use a table border size of 4. Use a colored font. Use a heading size of 3 for the names of the items you like. Using a heading size of 2 again. Using a heading size of 2. and favorite movies. Use the same font settings as the other two lists. Left align the following heading: My Favorite Movies. Insert two blank lines. Using a heading size of 2. favorite television shows. Include three images on your page: an image representing each of your favorite things. • • • • • • • • • Leave two blank lines after the paragraph.html • • HTML Assignment – 2 Things I Like Assignment Directions: Create a table similar to the one below that lists and displays pictures of five things you like. . Bold the heading.My name is _________ and I am a __________ at Celtem Academy. Use the largest heading size for the table's title. • • • • • • Create a folder for this assignment (Folder NameThings).

THINGS I LIKE Velleyappam My Pet Butterflies scorpio Ice Cream .

HTML Assignment – 3 My Friend Assignment Directions: Within your HTML folder create a folder called "My Friend". the “navigation. face.html” page in the “Left” frame. and color Hypertext links • • • • • • Creating a Frameset 1. Create a web page based on your friend —Save your page using the person’s last name as the file name (remember to include a . Save .” section that includes hyperlinks to three HTML pages that contain additional information about your friend. Create a frameset that will display your “heading. or definition) Font attributes including size. • • • Your page needs to include: A title bar title An image (or images) using the border and ALT text attributes Use of heading tags At least one type of list (ordered.html file extension).html” page initially displayed in the “Main” frame. and the “main. Your web page must contain the following sections: A “Biography” section that includes at least a paragraph of biographical information. An “Accomplishments” section that outlines the person’s major life accomplishments using an unordered list (include at least five accomplishments). unordered.html” page in the “Top” frame. A “Learn More About….

html” file created in class as the example for the frameset. (2) You may also need to change the image size of your title graphic or buttons by using the width and height attributes within the <img src> tag. Add hyperlink tags to your button images in the “navigation.html” within your "All About Me" folder.the frameset as “index. . Use the “index.) Example: <a href = “biography.html” page so that these pages open within the “Main” frame (Using the attribute of target=”Main” within the link tag.html” target = “Main”> RESIZING: (1) You may need to change the percentage values of the rows and/or columns so that the frameset displays the pages correctly.

Text in this paragraph will leave 50 pixel space on right and 35 pixel space on left. } HR{color:red} P{margin-right:50px} P{margin-left:35px} </style> </head> <body> <h3> This is heading 3 with CSS style</h3> <hr> <p> This paragraph starts from 35th pixel. </body> </html> .CSS Lab Slide programs 1. font-size:100pt. Its left margin is set to 35 pixels and its right margin is set to 50 pixels. <html> <head> <style> h3{ color:gold.

css"> </head> <body> <h3> This is heading 3 with CSS style</h3> </body> </html> .2. <html> <head> <LINK REL="stylesheet" TYPE="text/css" HREF="mystyle.

"><b> .margin-left:20. <html> <head> <style> h3{ color:gold. <P style="color:green. font-size:100pt.3. margin-right: 10px. } HR{color:red} P{margin-right:50px} P{margin-left:35px} </style> </head> <body> <h3> This is heading 3 with CSS style</h3> <hr> <p> This paragraph starts from 35th pixel. Text in this paragraph will leave 50 pixel space on right and 35 pixel space on left. Its left margin is set to 35 pixels and its right margin is set to 50 pixels.

h5.h3.h2.h4.h6 { color: yellow } P B { color: yellow } </style> </head> <body bgcolor="blue"> <h1> Heading 1</h1> <p> Testing para without bold <b> This is bold text </p> <p> Normal paragraph watch for color <h4> This heading 4> </body> </html> . <html> <head> <style> h1.Different para</b> </P> </body> </html> 4.

<html> <head> <style> p. color:red.left { text-align: left. color:blue. color: brown. } </style> </head> <body> <p class=right> <b>This is an example of class right</b> <p class=center> <b>This is an example of class center</b> <p class= left> <b>This is an example of class left</b> <h1 class=right> heading on right </body> </html> .5.right { text-align: right. } p. } p.center { text-align: center.

right { text-align: right.left { text-align: left. color:blue. } . <html> <head> <style> .center { text-align: center. } </style> </head> <body> <p class=right> <b>This is an example of class right</b> <p class=center> <b>This is an example of class center</b> <p class= left> <b>This is an example of class left</b> <h1 class=right> heading on right </body> </html> .6. color: brown. } . color:red.

<html> <head> <style> p#para1 { text-align: center. color: brown. } p. color: green } p.right { text-align: right. } </style> </head> <body> <p id=para1> <b>This is an example of id center</b></p> <p class=right> <b>This is an example of class right</b> <p class= left> <b>This is an example of class left</b> <h1 id=para1> heading on right </body> .left { text-align: left.7. color: blue.

color: brown.</html> 8.left { text-align: left.right { text-align: right. } </style> </head> <body> <p id=para1> <b>This is an example of id center</b></p> <p class=right> <b>This is an example of class right</b> <p class= left> <b>This is an example of class left</b> . color: blue. color: green } p. <html> <head> <style> #para1 { text-align: center. } p.

background-color: black.} </style> </head> <body> <P>Welcome to the <SPAN CLASS="logo"> Wonder Software</SPAN> Web site</P> <h1> heading on right<SPAN class="logo"> See the change</span> now</h1> </body> </html> . <html> <head> <style> SPAN.logo {color: white.<h1 id=para1> heading on right </body> </html> 9.

background-color: black.10.} </style> </head> <body> <P>Welcome to the <DIV CLASS="logo"> Wonder Software</DIV> Web site</P> <h1> heading on right<DIV class="logo"> See the change</DIV> now</h1> </body> </html> .logo {color: white. <html> <head> <style> DIV.

jpg') no-repeat fixed center } . <html> <head> <style> body { background: #000000 url('mercury.fore{color="orange"} </style> </head> <body> <P class="fore">Welcome to the wonder Software Web site</P> <h1 class="fore"> heading on right See the change now</h1> </body> </html> .11.

<html> <head> <style> body { background: #000000 url('mercury.jpg') repeat-y fixed} .12.fore{color="orange"} </style> </head> <body> <P class="fore">Welcome to the wonder Software Web site</P> <h1 class="fore"> heading on right See the change now</h1> </body> </html> .

text-transform:uppercase.center { text-align: center.right { text-align: right. color:red. } p. <html> <head> <style> p.left { text-align: left. color:blue. } </style> </head> <body> <p class=right> <b>This is an example of class right</b> <p class=center> <b>This is an example of class center</b> <p class= left> <b>This is an example of class left</b> <h1 class=right> heading on right </body> . color: brown.13. text-decoration:inderline. } p.

arial.fontweight {font-weight:bold.</html> 14.} p.} p.} h2 { letter-spacing:20pt.} p.fontsize {font-size:xx-small.fontfamily {font-family:"comic sans ms". <html> <head> <style type="text/css"> p. color:gold.fontstyle {font-style:italic. text-align:center. } </style> </head> <body> <h2> Celtem</h2> .fontvar{font-variant:small-caps.} p. font-size:90pt.

<p class="fontfamily">differnet font names are: comic sans or Times Roman or arial???</p> <p class="fontstyle">Italic letters</p> <p class="fontweight">looks like bold</p> <p class="fontsize">This is small</p> <p class="fontvar"> This is capital small</p> </body> </html> Celtem differnet font names are: comic sans or Times Roman or arial??? Italic letters looks like bold This is small THIS IS CAPITAL SMALL 15. <html> <head> <style> h2{ text-align:center. margin-left:200px. border-color:red. margin-right:200px. border-width:thick. } </style> <head><body> <h2>text with box around it</h2> </body> </html> . Border-style:groove.

It should also provide selection for area of interest for free newsletter as: Software development methodologies Java Development . Address. 3. green color. All the text is bordered with black color border. Create an HTML page which uses both the styles. Create an HTML page where all the h1 header will have 10 px spacing. create an embedded style for all table cells to have gray and cyan color in alternate rows as background color. All paragraphs will use gold color for all bold text and red color for all italic text. Last Name. mobile No.. email-id. telephone No. 4. State. age. pin.Net development Fashion Literature . Sex. 2. Create a web page where all header are boxed with solid or ridge border. 5. 6.Excercises 1.. create a general class for color which can be applied to any element in an external CC file. city. create a webpage which takes user input to register user with following fields First Name.

mob no and email in another box and selections in another Use appropriate background colors. First Name. sex should be one Box Address. <html> <body> <script type="text/javascript"> document.write("In External Script"). city state.Music News Politics. Java Script Lab 1.js document. </script> </body> </html> 2.write("Hello World!"). . pin should be in another box Tel No . Last Name. age. xxx. Embedding a script in HTML page.

write("<h1> Script in body</h1>").js file Write a HTML page with the following content.Save the above line in xxx. </p> </body> </html> 3.write("<h1> Script in Head</h1>").js". <html> <head> </head> <body> <script src="xxx.js"> </script> <p> The actual script is in an external script file called "xxx. </script> </body> </html> . Immediate Mode example <html> <head> <script language="JavaScript"> document. </script> </head> <body> <script language="JavaScript"> document.

This is function").4. } </script> </head> <body> <form> <input type="button" value="Click" onClick="test()"> </form> </body> </html> . Deferred Mode Example <html> <head> <title> Example of Deferred Mode </title> <script language="JavaScript"> function test() { alert("Hi.

document.writeln("<h1> y= "+y+"</h1>"). document. document. document. y="hello". b=false. </script> </body> </html> .writeln("<h1> b= "+b+"</h1>"). </script> </head> <body> <script language="javascript"> y=20. Variables Demo <html> <head> <script language="javascript"> x=10.writeln("<h1> x= "+x+"</h1>").writeln("<h1> y= "+y+"</h1>").5.

document. y="25".writeln("<b> x === y "+ (x===y)+"</b><br>").6. document. document. Operators – Strict Equals Demo <html> <head> </head> <body> <script language="javascript"> x=25.writeln("<b> x != y "+ (x!=y)+"</b><br>").writeln("<b> x == y "+ (x==y)+"</b><br>"). </script> </body> </html> .writeln("<b> x !== y "+ (x!==y)+"</b><br>"). document.

Otherwise you will get a "Good day" greeting. Control Structure Example <html> <body> <script type="text/javascript"> var d = new Date(). } </script> <p> This example demonstrates the If. var time = d.getHours().write("<b>Good day</b>").write("<b>Good morning</b>"). </p> </body> </html> . you will get a "Good morning" greeting. if (time < 10) { document.7. } else { document.Else statement. </p> <p> If the time on your browser is less than 10...

if (time<10) { document. } </script> <p> This example demonstrates the if.write("<b>Good morning</b>")... <html> <body> <script type="text/javascript"> var d = new Date().else statement.getHours().else if.write("<b>Hello World!</b>").write("<b>Good day</b>").8. </p> </body> </html> . } else if (time>=10 && time<16) { document.. var time = d. } else { document.

or equal to 5.write("The number is " + i). } </script> <p>Explanation:</p> <p>This for loop starts with i=0.9. i++) { document.</p> </body> </html> .write("<br />").</p> <p>As long as <b>i</b> is less than. i <= 5. <html> <body> <script type="text/javascript"> for (i = 0. document. the loop will continue to run.</p> <p><b>i</b> will increase by 1 each time the loop runs.

document. i++) { document.write("<h" + i + ">This is header " + i). } </script> </body> </html> .10. <html> <body> <script type="text/javascript"> for (i = 1. i <= 6.write("</h" + i + ">").

i++. <html> <body> <script type="text/javascript"> i=0. 5.write("The number is " + i). } </script> <p>Explanation:</p> <p><b>i</b> is equal to 0.</p> </body> . the loop will continue to run.</p> <p>While <b>i</b> is less than .write("<br />").</p> <p><b>i</b> will increase by 1 each time the loop runs. while (i<=5) { document. or equal to. document.11.

mycars[2] = "BMW".</html> 12. var mycars = new Array(). <html> <body> <script type="text/javascript"> var x. mycars[1] = "Volvo".write(mycars[x] + "<br />"). mycars[0] = "Saab". } </script> </body> </html> . for (x in mycars) { document.

<html> <head> <script type="text/javascript"> function disp_alert() { alert("Hello again! This is how we" + '\n' + "add line breaks to an alert box!"). } </script> </head> <body> <input type="button" onclick="disp_alert()" value="Display alert box" /> </body> </html> .13.

if (r==true) { document.write("You pressed Cancel!"). <html> <head> <script type="text/javascript"> function disp_confirm() { var r=confirm("Press a button").14.write("You pressed OK!"). } else { document. } } </script> </head> <body> <input type="button" onclick="disp_confirm()" value="Display a confirm box" /> </body> </html> .

15."Nancy"). .write("Hello " + name + "! How are you today?"). <html> <head> <script type="text/javascript"> function disp_prompt() { var name=prompt("Please enter your name". if (name!=null && name!="") { document.

} } </script> </head> <body> <input type="button" onclick="disp_prompt()" value="Display a prompt box" /> </body> </html> 16. JavaScript Functions .

</p> </body> </html> . The function will alert the argument that is passed to it. a function will be called. } </script> </head> <body> <form> <input type="button" onclick="myfunction('Good Morning!')" value="In the Morning"> <input type="button" onclick="myfunction('Good Evening!')" value="In the Evening"> </form> <p> When you click on one of the buttons.<html> <head> <script type="text/javascript"> function myfunction(txt) { alert(txt).

document.3)).split(" ".write(str.17.write(str. document.write(str.split(" ") + "<br />"). Some JavaScript Functions <html> <body> <script type="text/javascript"> var str="How are you doing today?". document.split("") + "<br />"). </script> </body> </html> .

indexOf("World") + "<br />").write(str.write(str. document. </script> </body> </html> .write(str. <html> <body> <script type="text/javascript"> var str="Hello world!".18.substring(3. <html> <body> <script type="text/javascript"> var str="Hello world!".indexOf("world")). document. document. document.7)).write(str.indexOf("Hello") + "<br />"). </script> </body> </html> 19.

document.7)). </script> </body> </html> .20.substr(3. <html> <body> <script type="text/javascript"> var str="Hello world!".write(str.

italics() + "</p>").small() + "</p>").write("<p>Bold: " + txt. document.toUpperCase() + "</p>").bold() + "</p>"). document. document.big() + "</p>").write("<p>Link: " + txt.fontcolor("Red") + "</p>"). document.sub() + "</p>").write("<p>Blink: " + txt.write("<p>Fontsize: " + txt. </script> </body> </html> . <html> <body> <script type="text/javascript"> var txt="Hello World!". document.w3schools.21. document.write("<p>Superscript: " + txt.write("<p>Big: " + txt.com") + "</p>").sup() + "</p>").write("<p>Small: " + txt.write("<p>Italic: " + txt. document. document. document.fontsize(16) + "</p>"). document.write("<p>Fixed: " + txt.write("<p>Uppercase: " + txt.write("<p>Fontcolor: " + txt.link("http://www.write("<p>Subscript: " + txt.blink() + " (does not work in IE)</p>").write("<p>Lowercase: " + txt. document.strike() + "</p>"). document.toLowerCase() + "</p>"). document.fixed() + "</p>").write("<p>Strike: " + txt. document.

<html> <body> <script type="text/javascript"> var d = new Date(). . document.write(d.22.getHours()).

join() + "<br />").getMilliseconds())."). document.write(". arr[2] = "Stale"."). </script> </body> </html> 23.document.write(d. arr[0] = "Jani".getSeconds()).write(d.getMinutes()). document. document.write(arr.join(".write(".write(arr. arr[1] = "Hege". <html> <body> <script type="text/javascript"> var arr = new Array(3).").write(". document.write(d. </script> </body> </html> . document. document.")). document.

arr[0] = "Jani". document. <html> <body> <script type="text/javascript"> var arr = new Array(3). var arr2 = new Array(3). arr2[0] = "John".24. arr[1] = "Tove". arr2[2] = "Wendy". arr[2] = "Hege". </script> </body> </html> .write(arr.concat(arr2)). arr2[1] = "Andy".

arr[1] = "Hege". document. </script> </body> </html> .write(arr + "<br />").25. document. arr[3] = "Kai Jim".write(arr.sort()). arr[0] = "Jani". <html> <body> <script type="text/javascript"> var arr = new Array(6). arr[2] = "Stale". arr[5] = "Tove". arr[4] = "Borge".

close()."><BR> <INPUT type=button value="Close First window" onClick="window.'Background'.HTML Comments : NewWin is the reference of the new window--> <INPUT TYPE="button" value="Close BackgroundColor window" onClick="window1.height=400'). <html> . <HTML> <BODY> <FORM name="Winform"> <INPUT TYPE="button" value="Open new window" onClick="window1=window.HTML Comments : window is the reference of the current window --> </BODY> </HTML> 27.26.width=500.html'.status= yes.'toolbar=yes.close().open('documentcolor."> </form> <!-."><BR> <!-.

</script> </body> </html> 28. document.<body> <script type="text/javascript"> var browser=navigator.back() } </script> </head> <body><input type="button" value="Back" onclick="goBack()" /> </body> </html> .appName.write("Browser name: "+ browser). document. <html> <head> <script type="text/javascript"> function goBack() { window. document. var version=parseFloat(b_version).history.write("<br />"). var b_version=navigator.appVersion.write("Browser version: "+ version).

location. <html> <head> <script type="text/javascript"> function replaceDoc() { window.29.w3schools.com") } </script> </head> <body><input type="button" value="Replace document" onclick="replaceDoc()" /></body> </html> .replace("http://www.

30.background=bg.body.style. } </script> </head> <body> <b>Mouse over the squares and the background color will change!</b> <table width="300" height="100"> <tr> <td onmouseover="bgChange('red')" onmouseout="bgChange('transparent')" bgcolor="red"> </td> <td onmouseover="bgChange('blue')" onmouseout="bgChange('transparent')" bgcolor="blue"> </td> <td onmouseover="bgChange('green')" onmouseout="bgChange('transparent')" bgcolor="green"> </td> </tr> </table> </body> </html> . html> <head> <script type="text/javascript"> function bgChange(bg) { document.

radioColor[i].bgColor=document.form1. } } } </script> </head><body> <form name="form1"><!-.form1.checked == true) { document.31.length.form1.radioColor.value. <html><head> <script language="JavaScript"> function changeColor() { for(i=0.radioColor[i].creating radio button group --> <input type="radio" name="radioColor" value="red" onClick="changeColor()">Red<br> <input type="radio" name="radioColor" value="green" onClick="changeColor()">Green<br> <input type="radio" name="radioColor" value="blue" onClick="changeColor()">Blue<br> </form> </body> </html> .i<document.i++) { if(document.

form1. if(document. else blue=0.checked==true) green=255. function mixColor() { if(document. document.form1."+blue+")" //rgb is a function whcih take 3 integer arguments. blue=0.check1. the value between 0 and 255. <html><head> <script language="JavaScript"> red=0.32. else green=0. colornew="rgb("+red+".checked==true) red=255.bgColor=colornew } </script> </head><body> <form name="form1"><!-. if(document. green=0.creating radio button group --> .check3. else red=0.form1.check2."+green+".checked==true) blue=255.

} age1=parseInt(age). Form Validation Put this code in valid. if((age1>9) && (age1 <=100)) { return true.<input type="checkbox" name="check1" value="red" onClick="mixColor()">Red<br> <input type="checkbox" name="check2" value="green" onClick="mixColor()">Green<br> <input type="checkbox" name="check3" value="blue" onClick="mixColor()">Blue<br> </form> </body></html> 33. } else { return false.js /* function for checking age is number betbeen 10 and 100 */ function checkAge(age) { if(!(isFinite(age))){ // not isFinite return false. } } .

form1.} </style> <script src="valid.form1. document.focus(). document. if(agevalidflag==false) { alert("Please enter a proper age!.form1.form1.txtage.form1.txtage.txtname.value).. } agevalidflag=checkAge(document.length>2){ return true.html file <html> <head> <style> td{ font-size:15pt.txtname.select().txtname."). } // validate email here return true."). } </script> </head> . } else { return false. document..form1. document.select(). } if( uname. return false. } } Put this code in .txtage.js"> </script> <script language="JavaScript"> function check() { namevalidflag=checkName(document.value) if(namevalidflag==false) { alert("Please enter a proper name!.focus()./* function for checking name is a string with minimum 5 characters */ function checkName(uname) { if((isFinite(uname))){ return false. return false.

Create a table with n rows using javascript to display natural numbers from 1 to n. (*) mandatory fields</td><td><input type="submit" name="button1" value="submit " onClick="return check()"></td></tr> </table> </form> </body> </html> Excecises Add an email validation to the previous form. . create a webpage to display a textbox to take a numeric input say n.<body> <center><h1> Enter Details</h1></center> <form name="form1"> <table width="75%" align="center" border="0" bgcolor="cyan"> <tr> <td>Name (*)</td> <td> <input type="text" name="txtname" maxlength="25" size="25"></td></tr> <tr> <td>Age (*)</td> <td> <input type="text" name="txtage" maxlength="3" size="8"></td></tr> <tr> <td>Email</td> <td> <input type="text" name="txtemail" maxlength="30" size="30"></td></tr> <tr><td>&nbsp.

Sign up to vote on this title
UsefulNot useful