HTML and some scripting

7/30/2019 HTML and some scripting

1/42

HTML Example

Hypertext Markup Language (HTML) Example

Hypertext Markup Language

Hypertext Markup Language (HTML) allows users to:

format and display text

display images

and so much more

Go to top of page

Begins the HTML document

HTML docs contain botha head and body section

Sets browsers background colour

to blue and font colour to white

Creates a bulleted list of items

Inserts an image

Creates a hyperlink back to the top of the page


2/42

HTML-Hyper text markup language

Language used to create web pages

Web page is a text file that contains instructions inthe form of html codes

Container tags- html instruction/commands that

require a start tag and end tag Start tag is < > and end tag is

Attributes for additional information Section tags- , ,


3/42

Empty tag- do not require a end tag

eg:
- break tag.

Eg: pgm

example program

hello

Save the content with the extension htmlEg: ProgramName.html

Run using a web browser like internet explorer or

Netscape


4/42

Text formatting tags

- bold font

- italic font

-underline

- subscript

- superscript

Eg:

hello

hello

hello


5/42

Eg:

this is a sample text for font

this is normal text

Eg:

H2O

x2+y2


6/42

The img tag lets u place a graphics image on a

web page

The img tag uses a src attribute with a relativepathname

Eg:

this first para above the picture

this second para below the picture


7/42

tag let u assign one or more formatting attributesto a group of html tags

Eg:

this first para above the picture


8/42

Document type definition(DTD)

Identifies the version of the HTML used.

Given at the top of the html document before the

tag

!doctype is the tag which doesnt need a closing tag

Html is the version of html

Publicwhether accessible by public

Version namecomplete name of the specific version ofhtml

urlindicates where on the world wide web a publicdefinition of the html code resides.

Eg:


9/42

Comment a line

Eg:

hi

Heading level tags


10/42

Alignment

- to center the graphics image and

text

Eg:

text centered

text


11/42

Adding a link

Eg:

for information click hereTo connect to yahoo

click here

Horizontal rule

- to create horizontal rule thats separates the text

Eg:

contact us

help


12/42

Eg:

contact us

help

Blockquote tagsfor indenting the text ie for increasing the margins

Eg:

this regular text

this text is blockquoted


13/42

LISTING

1. Ordered list

2. Unordered list

Ordered list

course u wish to join

MBA

MCA


14/42

Type is an attribute of which indicates which

type of listing is needed

default

Start is another attribute


15/42

UnOrdered list

shopping list

bread

butter

jam

Type attribute can be disc, square, circlewhere default is dot

eg:


16/42

Nested list

shopping list

bread

butter

sweets

jam

strawberrys


17/42

Page frame

Contains separate URL for each frame

Applicable when u want to display more than

one page in a single application window

Frames simply arrange multiple web pages

within a single document window

There will be either body tag or frameset tag

Frameset tag to create frames in a web page

Col attribute of frameset tells the web browser to

draw 2 frames and to make the respective pixel

width frames.


18/42

Src attribute of frameset will tell the name of the

web page to be displayed within the frame when the

browser is initially loaded. Eg:

framed document


19/42

About Us


20/42

Creating table

- to treat the text between these tags astable

- to treat as row

- to treat as column

example:1

1

2

K.S Chitra

Sonu Nigam


21/42

Eg:2

headings in a row

SI No:

Singers

K.S Chitra

Sonu Nigam

E 3


22/42

Eg:3

headings in a column

Alex

mark1

mark2

kishore

mark1

mark2


23/42

To set color

Bordercolorsets the bordercolor for the table

Eg:

Eg:

Eg:

C ll i ib i h bl k b


24/42

Cellspacing attributeto increase the blank space between

cells in table.

Eg:

Cellpadding attributeto increase the blank space between

the sides of the cell and the content in the cell

Eg:

Table dimension

eg: eg:

C ll di i


25/42

Cell dimension

sonu nigam

sonu nigam

Cell alignment

sonunigam

E l


26/42

Example

Example


27/42

Example

for yahoo click here

for msn click here

for rediff click here


28/42

Tag Description

Defines a form for user input

Defines an input field

Defines a text-area (a multi-line text input control)

Defines a label to a control

Defines a fieldset

Defines a caption for a fieldset

Defines a selectable list (a drop-down box)

Defines an option group

Defines an option in the drop-down box

Defines a push button

Form Tags

The form element creates a form for user input. A form can

contain textfields, checkboxes, radio-buttons and more. Forms are

used to pass user-data to a specified URL.


29/42

Name:

Password:Address:

Sex: male

female

may we give ur email id to others:


30/42

may we give ur email id to others:

yes

no

MBA

MBA

Example:1


31/42

Example:1

creating forms

Function checklogin()

{

.stmts..;

}

User name


32/42

--------------------------------------------------------------------------

Function checklogin()

{

document.form1.text1.value=hello;

alert ( thanks for stopping by! ) ;

}Syntax: document.formname.control

document.formname.control.property

document.formname.control.method(arguments)

Event handlers


33/42

Event handlers

Syntax:

Eventhandler= functionname()Onblur, onclick, onerror, onfocus, onkeydown,

onkeypress, onkeyup, ondragdrop, ondoubleclick,

onchange,onmousedown, , onreset,onsubmit,

onload, onunload etc etc..

Function mycompute()


34/42


{

A=document.frm1.txt1.valueB=document.frm1.txt2.value

C=document.frm1.txt3.value

D=eval((A*B)/C);Alert (the value is:+D);

}

Document.frm1.txt1.value=A



35/42


{

var A

A=document.frm1.txt1.value

Alert (variable A is displayed:+A);

}

Function nal(num)

{

if(num= = 0)

alert(hai)


36/42

alert( hai )

if(num= = 1)

alert(hello)

if(num= = 2)

alert(goodafternoon)

}

Var A=document f1 t1 value


37/42

Var A=document.f1.t1.value

Function naloo()

{var wind

document.writeln(going to open a new window)

wind=window.open(x1.html,[400]);

}


38/42

Function budget()

Var budget

budget=20

If (budget>20)

{

Document.writeln(expensive)

}

Else

{Document.writeln(inexpensive)

}

Switch(grade)


39/42

Switch(grade)

{

case first:

stmts

break;

case distinction:

stmts

break;

case second:

stmts

break;

}

For loop syntax


40/42

For.. loop syntax

for (intialization; test; increment)

{code

}

Eg:For (var a=1;a


41/42

While(condition)

{

Code}

Eg:Var abc=0

While( abc


42/42

Do

{

Code}while (condition)

Eg;Do{

Document.writeln(goodevening)

}while (condition=red)

Documents

HTML and some scripting