Вы находитесь на странице: 1из 29

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

HTML
HyperText Markup Language 1. It is used to design web page 2. Web page is displayed in the web browser HTML is a language of tags Every tag tells Web Browser how to display text or image Example of tag is <html> . </html> Every tag has matching pair of start tag and end tag. Such a pair is called Element General Structure Of HTML Document <html> <head> <title> page title This title is displayed on title bar of window </title> </head> <body> page body This is actual content of web page </body> </html> Multiple HTML tags can be written on same line. For example the previous html code can be written as <html> <head> <title> page title </title> </head> <body> page body This is actual content of web page </body> </html> Creating and Viewing a Page 1. Create a new ASCII text file in some editor and name it with extension .html for example hello.html 2. Open the html file in web browser like Internet explorer by entering complete path and file name in the address bar.

Inline and Block Elements


1. 2. 3. 4. 5. 6. The <body> element contains all the contents that are displayed on the web page. The first category of elements used in <body> elements are inline elements Some of the inline elements are <br /> Line break or new line <b> .. </b> Bold <i> .. </i> Italic <tt> .. </tt> Type writer font <big> ..</big> Bigger font <small> .. </small> Smaller font 1

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Block Elements The second category of elements used in body tag are block elements These elements create a block structure in the flow of web page. Each block is automatically preceded and followed by line break. Example of block elements 1. <hr /> horizontal line 2. <hx> .. </hx> Headings, six levels 3. <p> .. </p> paragraph 4. <pre> .. </pre> preformatted text

HTML Attributes
Each element in HTML uses default browser settings. Like <hr /> tag which draws a horizontal line uses 100 % width and 2 pixels high. But if we want to use <hr /> with some other width and height then attributes can used. Attributes provide additional with each tag. These attributes will tell browser not use default settings but use the values given in the attributes. Default 100 % 2

Attributes of <hr /> tag Attribute Possible values Width Size(height of line) % pixels Pixels

Align

Left, center, right

center

Attributes of <hx> .. </hx> tag Attribute Possible values Align Left, center, right

Default left

Attributes of <p> .. </p> tag Attribute Possible values Align Left, center, right

Default left

Hyperlinks
2

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Hyperlinks are created using <a> (anchor) element. Hyperlink or only link will take us to a new page on clicking the link. Example <a href = otherpage.html> click here </a> The words click here will be underlined and will appear as a link. On clicking this link , a new page will be opened in the same window. The newly opened web page will be otherpage.html. Following example shows how to create a hyperlink

Example of hyperlink one.html <html> <head> <title> Example of Hyperlink </title> </head> <body> <p> This is an example of Hyperlink. To test the link <a href=two.html> click here </a> This will take you to two.html </p> </body> </html>

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

CASCADING STYLE SHEETS


STYLE SHEET or Cascading style sheets are used for adding style to the web page and give effects such as colors(for text and background) , setting distance between successive lines, set the fonts of the text and many such things. All these settings are related to STYLE of the content. Any matter displayed in the web page is always made of three important features. a) Structure b) Style c) Content Such as <p align=center> This paragraph is center justified < /p> In the above line a) <p> define structure (that is paragraph structure) b) align = center defines style c) This paragraph is center justified is the content. HTML has a facility of separating the structure and style. That is when we define paragraph we would just specify <p> tag which indicates that paragraph is starting. But we wont specify the style in which this paragraph is going to be displayed with <p> tag. This style will be specified by using a new language called CASCADING STYLE SHEET. The styles are always specified in the <head> section by using <style> tag. As an example <head> <style> p {text-align : center ; color : red ; background-color : blue; } </style> </head> The style specifies that every paragraph in the web page must be a) center aligned b) text color should be red c) background color should be blue The advantage of CSS is that we do not have to specify the styles for all paragraphs of the web page. Because the style specified under <style> tag will apply for all paragraphs in the web page. 4

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Similarly styles can be applied to other elements of web page. Example <style> h1 {color : green; } h2 {color : green;} p {color : red; text-align : center;} </style> So the heading 1 and heading 2 will be colored green and paragraphs will be center aligned with red color. The above style can be written as <style> h1 h2 {color : green; } p {color : red; text-align : center;} </style> Note that we have combined the h1 and h2 entries as both have same style(that color : green} Example 1 : Following example shows how to set paragraph and heading 1 styles <html> <head> <title> CSS example </title> <style> p {color: pink; background-color : gray; } h1 { color : blue; } </style> </head> <body> 5

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

<h1> this is heading and is colored blue </h1> <p> this is paragraph number 1 of my web page. This paragraph is colored as pink. This color has been set by using cascading style sheet </p> <p> This is second paragraph of my page. This paragraph is also colored as pink. In fact pink color applies to all paragraphs of this web page. </p> </body> </html>

How to set different style for different paragraphs in the same web page This is done by assigning a HTML element to a class. <p class=para1> This is paragraph 1 </p> <p class=para2> This is paragraph 2 </p> The two paragraphs defined above have class name assigned. Now these paragraphs can be referred in the <style> tag by there class names. <style> p.para1 { color : red ; } p.para2 {color : green ;} This will set color of para1 to red and para2 to green.

Example 2 6

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

<html> <head> <title> CSS example </title> <style> p {font-size : 20; letter-spacing : 4;}

p.para1 {color: pink; background-color : gray; line-height : 2; } p.para2 { color : yellow; background-color : green; } h1 { color : blue; } </style> </head> <body> <h1> this is heading and is colored blue </h1> <p class="para1"> this is paragraph number 1 of my web page. This paragraph is colored as pink. This color has been set by using cascading style sheet </p> <p class="para2"> This is second paragraph of my page. This paragraph is colored as yellow. In fact yellow color applies to all paragraphs which belong to class para2 of this web page. </p> </body> </html>

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Note the hierarchy in the <style>. First style specified is for <p> tag. p {font-size : 20; letter-spacing : 4;}

So all paragraphs in the web page have character spacing 4 pixel wide and font size 20 pixel. Further we have specified <style> for specific paragraph which has class name para1 p.para1 {color: pink; background-color : gray; line-height : 2; } So only para1 will have text color pink , background color gray and line spacing 2 pixel. Finally we have specified <style> for paragraph with class name para2 p.para2 { color : yellow; background-color : green; } So only para2 among all other paragraphs will have text color yellow and background color green. 8

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

The style sheet can be of three types a) External style sheet b) Embedded style sheet c) Inline style sheet a) External style sheet The style properties can be collected and put together in a separate file which has extension .css. This file can be then linked to our HTML file so that styles will apply to various elements. The linking of .css file and HTML file is done by writing a <link> tag in the <head>. For example <link rel = stylesheet href=ex1.css /> The rel attribute tells that we are linking a stylesheet ( rel = stylesheet) and the href attribute specifies the file containing the style sheet that is ex1.css Following example shows how to create the web page by using external style sheet. The file shown below is ex1.css. ex1.css p {font-size : 20; letter-spacing : 4;}

p.para1 {color: pink; background-color : gray; line-height : 2; } p.para2 { color : yellow; background-color : green; } h1 { color : blue; } The file shown below is the html file named mystyles.html mystyles.html <html> <head> <title> CSS example </title> <link rel="stylesheet" href="ex1.css" /> 9

Sem IV(IT) Internet Programming </head>

Notes By Sameer Velankar Glorious Academy

<body> <h1> this is heading and is colored blue </h1> <p class="para1"> this is paragraph number 1 of my web page. This paragraph is colored as pink. This color has been set by using cascading style sheet </p> <p class="para2"> This is second paragraph of my page. This paragraph is colored as yellow. In fact yellow color applies to all paragraphs which belong to class para2 of this web page. </p> </body> </html>

b) Embedded style sheet : The styles can be directly specified in the <head> section. Each entry in the <style> will be of the form <style> element { property : value ;} </style> for example <head> <style> 10

Sem IV(IT) Internet Programming p { color : red ;} </style> </head>

Notes By Sameer Velankar Glorious Academy

That means all paragraphs will have text color red. Following example shows how to create the web page by embedded style sheet. The file shown below is embeddedex.html. <html> <head> <title> CSS example </title> <style> p {font-size : 20; letter-spacing : 4;}

p.para1 {color: pink; background-color : gray; line-height : 2; } p.para2 { color : yellow; background-color : green; } h1 { color : blue; } </style> </head> <body> <h1> this is heading and is colored blue </h1> <p class="para1"> this is paragraph number 1 of my web page. This paragraph is colored as pink. This color has been set by using cascading style sheet </p> <p class="para2"> This is second paragraph of my page. This paragraph is colored as yellow. In fact yellow color applies to all paragraphs which belong to class para2 of this web page. </p> </body> </html> c) Inline style sheet : styles can be specified with the tag itself. <p style={color : red ;} > this is red color paragraph </p> 11

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Note that style is now attribute of <p> tag. The entries in style attributes are exactly same as entries in embedded style sheet. style = {color : red ;} This means this current paragraph must be colored red. Following example shows how inline style sheets can be specified for various html elements <html> <head> <title> CSS example </title> </head> <body> <h1 style="{font-family : sans-serif ;}"> This is heading 1 </h1> <p style="{color : red ; background-color : blue;}"> This is green paragraph with background blue </p> <p style="{color : red;}" > This is red colored paragraph </p> </body> </html>

JavaScript
JavaScript is a object based scripting language which can be directly used with HTML documents. JavaScript is used to make the web page more interactive to the user. JavaScript can be used to design FORMS that are filled and submitted (by clicking on submit button) by the user. JavaScript has many other features like Graphics and Animation, Rollover images, Database operations and so on. HTML is capable of creating a static web page containing only text and images. User interaction is not possible using HTML. JavaScript can be used for this purpose. With JavaScript we can do the following 1. Detect Browser settings (and also type of browser) and display the web page accordingly. 2. Create animations 3. Validate the contents of a FORM.(Such as Order entry form for a new Book) 12

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

4. Display messages to the user (By using alert boxes) 5. Show messages on the status line. How to use JavaScript with HTML Consider a HTML document <html> <head> <title> Our web page </title> </head> <body> <h1> This is our web page </h1> <p> But it is still under Construction </p> </body> </html> Just as HTML has tags like <body> or <head> , JavaScript statements can be embedded into HTML document by using <script> tag. All JavaScript statements must be written in <script> tag.(Except event handler statements) As an example consider the same HTML document shown above with JavaScript statement. <html> <head> <title> Our web page </title> </head> <body> <h1> This is our web page </h1> <p> But it is still under Construction This page was last modified on </p> <script language=javascript> document.write(document.lastModified);</script> </body> </html> The statement document.write(document.lastModified); will write the date on which this HTML page was last modified.

13

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Note the script tag has language attribute which is set to javascript to specify the scripting language. The other scripting language is vbscript.

Variable declaration
Variable is declared using var keyword example var num = 25; var name = abc def; Note that the variable in JavaScript do not have any data type associated(like int, float or char). but the data type of a variable is decided during run time by javascript interpreter. A variable can store any kind of value at different times. For example if num variable is assigned a value 25 , then later num variable can store value like abc which is a string. So the statements written below are perfectly valid var num = 25; //num stores numeric value --------num = abc; // num now stores string

Creating output
document.write method is used for writing outputs. As an example consider 14

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

<script language = javascript> document.write(<b> hello how are you </b>); </script> will display or write hello how are you on the web page in bold (because of <b> tag). Note that we can use the HTML tags with in JavaScript statements such as <i> tag can be used for writing something in italics and so on. Let us consider some examples which involve variables and document.write Example 1 Add 2 integers and show their sum <html> <head> <title> JavaScript Example </title> </head> <body> <script language="javascript"> var num1 = 5 ; var num2 = 8; var num3 = num1 + num2; document.write(num1 + " + " + num2 + " = " + num3 + "<br />"); </script> welcome all to Javascript </body> </html>

Example 2 15

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Add 2 integers by using a function. <html> <head> <title> JavaScript Example </title> <script language="javascript"> function add(a,b) { return a+b; } </script> </head> <body> <script language="javascript"> var num1 = 5 ; var num2 = 8; var num3 = add(num1,num2); document.write(num1 + " + " + num2 + " = " + num3 + "<br />"); </script> welcome all to Javascript </body> </html> Any function in JavaScript is always defined in the <head> section. Function defined in the above example is function add(a,b) { return a+b; } Here add is function name. a and b are parameters to the function add. Function return the value of a+b back at the call using return statement. This function is called from <body> section in the line var num3 = add(num1,num2); where num3 stores the value returned by the function. Example 3 Add 2 integers by taking input from the user. document.prompt statement is used to prompt the user for a input. Typical format of prompt statement is var num1 = prompt(enter a number , 0);

16

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

This will show a message enter a number and then show a text box where the number can be entered by the user( the value 0 will be shown as initial value in the text box) The value returned by prompt will be always of string type. For example is value entered at the above prompt statement is 25 then num1 variable will be storing a value string 25. Many times it is required to convert a string value into numeric value. This conversion is done by using parsing functions. Consider var num1 = 25; var num2 = parseInt(num1); The parseInt function will extract integer from 25 and give this value to num2. <html> <head> <title> JavaScript Example </title> <script language="javascript"> function add(a,b) { return a+b; } </script> </head> <body> <script language="javascript"> var num1 = prompt("enter a number " , "0") ; var num2 = prompt("enter a number " , "0"); num1 = parseInt(num1); num2 = parseInt(num2); var num3 = add(num1,num2); document.write(num1 + " + " + num2 + " = " + num3 + "<br />"); </script> welcome all to Javascript </body> </html> Prompt for the first number is shown in the diagram below

17

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Prompt for the second number is shown in the diagram below

Final Output is shown below

What is the sequence in which JavaScript statements are executed in HTML decoment JavaScript statements of <head> section execute first , and then statements of <body> section execute. Example

18

Sem IV(IT) Internet Programming <html> <head> <title> example </title>

Notes By Sameer Velankar Glorious Academy

<script language = javascript> window.alert(today is Friday the 13th); </script> </head> </body> <p> Just fed up of viruses </p> <p> <b> any way I have antivirus </b> <p> <script language = javascript> window.alert(I am not afraid); </script> </body> </html> In the above example window.alert in the <head> will execute first. alert is a function which shows a alert box with some message. After executing alert of <head> the alert function in <body> will execute.

Comments in JavaScript // is used for one line comment /* and */ pair is used for multi line comment. example // this is one line comment /*this is multi line comment */ Splitting a String x = hello how are you; y = x.split( ); here y is an array which contains each word of the string x. So y[0] = hello 19

Sem IV(IT) Internet Programming y[1] = how y[2] = are y[3] = you

Notes By Sameer Velankar Glorious Academy

Using Built in objects JavaScript has several built in objects such as Date , Math , string. Each of these objects have properties and values. Following example shows how to use Math object. <html> <head> <title> JavaScript Example </title> </head> <body> <script language="javascript"> for (i = 0 ; i <= 4 ; i++) { num = Math.random(); document.write(num + "<br />"); } </script> <p>welcome all to Javascript<p> </body> </html>

20

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Document Object Model of JavaScript


One advantage that JavaScript has over HTML , is that script can manipulate the web document and its contents. With JavaScript we can load a new page into the browser , work with parts of browser window and document , open new window or even modify text within the web page dynamically. To work with browser and documents, JavaScript uses hierarchy of objects called Document Object Model(DOM). These objects are organized as a tree. Each object has some properties which describe the web page or document and methods which allow us to work with parts of web pages. The DOM model

Using Window Object window is at the top of DOM model. . This object represents Browser window. This object has property window.status which is used for setting some message in the status line of browser window. window.status(You are at right place); The window object has methods like window.alert : to display alert messages. window.prompt : to take input from the user 21

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

window.confirm : confirm dialog box Following example uses confirm dialog box to check General Knowledge of the user <html> <head> <title> JavaScript Example </title> </head> <body> <script language="javascript"> var answer = "Dhoni"; do { var x = prompt("Who is captain of Indian Cricket Team "); if (x != answer) { var y = confirm("wrong answer, Want to try again "); } else { alert("Great, that is correct answer"); y = false; } } while(y != false); </script> welcome all to Javascript </body> </html> Using Document Object Document object represents the web document or page. Web documents are displayed in the browser window. So document object is a child of window object. window.document refers to the current document. document object has method document.write which write or display contents in web page. Getting Information about document 1. document.lastModified is the date on which document was last modified. 2. document.URL : Gives documents URL. This property cannot be changed 3. document.title : gives title of the page(specified in <title> tag of html) 4. document.referrer : gives URL of the page that user was viewing before viewing this page. Following example shows how to use the above properties. 22

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

<html> <head> <title> document object properties </title> </head> <body> <script language = "javascript"> document.write("date of last modify " + document.lastModified+ "<br />"); document.write("title of page " + document.title + "<br />"); document.write("URL of page " + document.URL + " <br />"); </script> </body> </html>

Forms Adding forms to web page makes the page more interactive. An HTML form begins with <form> tag. This tag indicated that the form is beginning. <form> tag includes following attributes a) NAME : name of the form with which we can refer the form b) METHOD : it is either GET or POST. These are the 2 ways by which data can be sent to server. c) ACTION : it is CGI script to which the form data will be sent. Example <form NAME=sales METHOD=GET ACTION=sales.jsp> 23

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

Here name of the form is sales , the method by which data is sent to server is GET and the script to which form data is sent is sales.jsp. Each form in HTML page is represented as JavaScript object. All forms on the current page(document) can be referred by array named forms[]. Alternately we can refer form by name of the form. Example document.sales or document.forms[0] will refer the same form of the earlier example (ie sales form) Text fields : Text fields are used to prompt the user for name , address or any information. Following is an example of simple text field < input TYPE = TEXT NAME = text1 SIZE=30> This defines text field with name text1 and initial value hello. The size of text field is 30 characters. Text areas : Text area is similar to text field with one difference that text area can contain more than one line. Text area is defined by its own tag <textarea>. Example <input type = textarea name=text1 rows=2 cols=70> This is default text </textarea> Methods in text and textarea field Both text and textarea field have following methods a) focus() : sets focus to a field. This positions cursor in the text field and makes it current field. b) blur() : it removes focus from text field. This is opposite of focus() c) select() : selects a text in the field. It is same as user selection text with mouse(click and drag). All of the text is selected by select() method. Events in text and textarea fields a) onFocus : this event happens when text field gains the focus b) obBlur : this event happens when text field loses the focus c) onChange : this event happens when user changes the text in the field and move out of it. d) onSelect : this event occurs when user selects some or all the text in the field. Example 1 : following html page has 3 text field which ask name, address and date of birth to the user. The date of birth field has a event handler onBlur defined which calls display() function. So display() function is called when ever user moves out of text 24

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

field date of birth. The display function opens a new alert box and displays a message in that box. This example shows how to access or refer individual fields of form. information.name.value <html> <head> <title> Form example </title> <script> function display() { window.alert(in the onblur event of date of birth textbox); } </script> </head> <body> <p> Enter data in the text fields </p> <form name = "information"> <p> Name : <input type="text" name="name" size = "60"> </p> <p> address : <input type="text" name="address" size="80"> </p> <p> date of birth : <input type="text" name="dateofbirth" value="none" size="10" onBlur = "display()"> </p> </form> </body> </html> Example 2 : Following example shows how to define text area field which can contain several lines of text. onBlur event is added here to textarea field. <html> <head> <title> Form example </title> <script> function display() { window.alert(in onblur event of textarea field); } </script> </head> 25

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

<body> <p> Enter data in the text fields </p> <form name = "information"> <p> Name : <input type="text" name="name" size = "60"> </p> <p> address : <input type="text" name="address" size="80"> </p> <p> date of birth : <input type="text" name="dateofbirth" size="10"> </p> <p> About your self : <input type="textarea" name="about" rows="2" cols="70" onBlur = "display()"> </p> </form> </body> </html> Buttons : button is of 3 types. SUBMIT : it is the submit button. This button causes data of CGI form to be sent to CGI script. RESET : it is the reset button which resets all the data of the form to default values. BUTTON : it is a general button. this button performs no action on its own. But an event handler is required such as onClick so that we can call some function when user clicks the button. Example 3 : following example shows how to add push button to the form. The button is having caption as ok. onClick event occurs when this ok button is clicked. This onClick event calls display() function as in the previous example. <html> <head> <title> Form example </title> <script> function display() { window.alert(in the on click event of button); } </script> </head> <body> <p> Enter data in the text fields </p> <form name = "information"> 26

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

<p> Name : <input type="text" name="name" size = "60"> </p> <p> address : <input type="text" name="address" size="80"> </p> <p> date of birth : <input type="text" name="dateofbirth" size="10"> </p> <p>About your self : <input type="textarea" name="about" rows="2" cols="70"> </p> <input type="button" value="ok" onClick = "display()"> </form> </body> </html>

Example 4 : following example shows how to add submit button to the form. The button is having caption as submit. There is no event handler added for submit button because this button causes the data of the form to be sent to the CGI script mentioned in the <form> tag. So the form tag will written as <form name=information action=show.jsp> This shows that name of the form is information. The action attribute is set to show which mean this is the CGI script which will be called when submit button is clicked. <html> <head> <title> Form example </title> </head> <body> <p> Enter data in the text fields </p> <form name = "information" action=show.jsp> <p> Name : <input type="text" name="name" size = "60"> <p> <p>address : <input type="text" name="address" size="80"> </p> <p> date of birth : <input type="text" name="dateofbirth" size="10"> </p>

27

Sem IV(IT) Internet Programming

Notes By Sameer Velankar Glorious Academy

<p>About your self : <input type="textarea" name="about" rows="2" cols="70"> </p> <p> <input type="submit" value="Submit"> </p> </form> </body> </html> Event Handler examples Q 1 Show a form which accepts 2 numbers from user in textbox and then show sum of the 2 numbers in the third textbox. Sum should be shown only on clicking a button labeled show sum <html> <head> <script> function findsum() { var x = parseInt(document.addform.a.value); var y = parseInt(document.addform.b.value); document.addform.c.value = x + y; } </script> </head> <body> <form name = "addform" > <p> Number : <input type="text" size="30" name="a" /> </p> <p> Number : <input type="text" size="30" name="b" /> </p> <p> Sum : <input type="text" size="30" name="c" /> </p> <p> <input type = "button" value="show sum" onclick="findsum()" /> </p> </form> </body> </html> Q 2 Show a text box which will show a running counter starting with 1. The counter is incremented by 1 after every 2000 milliseconds <html> <head> <title> Example of setTimeout </title> <script> id = window.setTimeout("update()" , 2000); 28

Sem IV(IT) Internet Programming var counter = 0;

Notes By Sameer Velankar Glorious Academy

function update() { counter++; form1.text1.value = counter; id = window.setTimeout("update()" , 2000); } </script> </head> <body> <form name="form1" /> <input type="text" name = "text1" size = "20" /> </form> </body> </html> Q 3 Show how an image changes into other image when mouse is moved over that image. Show how the original image is restored when mouse is moved out. <html> <head> <script> function change() { document.images[2].src = "image4.gif"; } function rechange() { document.images[2].src = "image3.gif"; } </script> </head> <body> <img src = "image1.gif" width="50" height="50" /> <img src = "image2.gif" width="150" height="50" /> <img src = "image3.gif" width="50" height="50" onmouseover="change()" onmouseout="rechange()"/> </body> </html>

29

Вам также может понравиться