ipnotesforglorious

8/3/2019 ipnotesforglorious

http://slidepdf.com/reader/full/ipnotesforglorious 1/29

Sem IV(IT) Internet Programming Notes By Sameer Velankar Glorious Academy

HTMLHyperText 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

• 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

1. <br /> Line break or new line

2. <b> .. </b> Bold

3. <i> .. </i> Italic

4. <tt> .. </tt> Type writer font

5. <big> ..</big> Bigger font

6. <small> .. </small> Smaller font

1




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 elements1. <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.

Attributes of <hr /> tag

Attribute Possible values Default

Width % pixels 100 %

Size(height of line) Pixels 2

Align Left, center, right center

Attributes of <hx> .. </hx> tag


Align Left, center, right left

Attributes of <p> .. </p> tag


Align Left, center, right left

Hyperlinks

2




• 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 newlyopened 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>

3




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 betweensuccessive 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 won’t 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




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




<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




<html>

<head>

<title>

CSS example

</title><style>

p {font-size : 20;

letter-spacing : 4;}

p.para1 {color: pink;


line-height : 2;

}

p.para2 { color : yellow;background-color : green;

}


</style>

</head>

<body>


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

7




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”



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




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;}



line-height : 2;

}



}


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




</head>

<body>






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




p { color : red ;}

</style>

</head>

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;}



line-height : 2;

}



}


</style>

</head>

<body>






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




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




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




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 astring.

So the statements written below are perfectly valid

var num = 25; //num stores numeric value

- - - - -

- - - - -

num = “abc”; // num now stores string

Creating outputdocument.write method is used for writing outputs. As an example consider

14




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>


var num1 = 5 ;var num2 = 8;

var num3 = add(num1,num2);


</script>


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


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




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>


var num1 = prompt("enter a number " , "0") ;

var num2 = prompt("enter a number " , "0");

num1 = parseInt(num1);

num2 = parseInt(num2);



</script>


</body>

</html>

Prompt for the first number is shown in the diagram below

17




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




<html>

<head>

<title>

example

</title>


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>


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




y[1] = “how”

y[2] = “are”

y[3] = “you”

Using Built in objects

JavaScript has several built in objects such as Date , Math , string. Each of theseobjects have properties and values. Following example shows how to use Math object.

<html>

<head>

<title> JavaScript Example </title>

</head>

<body>


for (i = 0 ; i <= 4 ; i++)

{

num = Math.random();

document.write(num + "<br />");

}

</script>

<p>welcome all to Javascript<p>

</body>

</html>

20




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




<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




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 callsdisplay() function. So display() function is called when ever user moves out of text

24




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




<body>





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



26






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


<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




<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

ipnotesforglorious

Documents

Transcript of ipnotesforglorious