49534707 Web Technologies

8/7/2019 49534707 Web Technologies

1/379

Web Technologies


2/379

Day One


3/379

What is an HTML

HTML stands for Hyper Text Markup LanguageAn HTML file is a text file containing smallmarkup tags

The markup tags tell the Web browser how to

display the pageAn HTML file must have an htm or html fileextension

An HTML file can be created using a simpletext editor


4/379

HTML Tags

HTML tags are used to mark-up HTML elements

HTML tags are surrounded by the two characters < and>

The surrounding characters are called angle brackets

HTML tags normally come in pairs like and

The first tag in a pair is the start tag, the second tag is theend tag

The text between the start and end tags is the elementcontent

HTML tags are not case sensitive, means the sameas This is an example of bold text


5/379

HTML PAGE STRUCTURE

All normal webpages consist of a head and a body.

The head is used for text and tags that do not show directly on

the page.

The body is used for text and tags that are shown directly onthe page.

Finally, all web pages have an tag at the

beginning and the end, telling the browser where the

document starts and where it stops.


6/379

HTML PAGE STRUCTURE contd..

The most basic code - the code you will use for any page youmake, is shown below:

This is a Title

This is a Body


7/379

HTML PAGE STRUCTURE contd..

Basic Web pages output is like shown below:


8/379

HEAD SECTION

The head section of the webpage includes all the stuff that does notshow directly on the resulting page.

The and tags encapsulate the title of your page. Thetitle is what shows in the top of your browser window when the pageis loaded.

Another thing you will often see in the head section is metatags.Metatags are used for, among other things, to improve the rankings insearch engines.

Quite often the head section contains JavaScript which is a

programming language for more complex HTML pages.

Finally, more and more pages contain codes for cascading stylesheets (CSS). CSS is a rather new technique for optimizing the layoutof major websites.


9/379

BODY SECTION

The body of the document contains all that can be seen when the user

loads the page.

In the rest of this tutorial you can learn in detail about all the different

aspects of HTML, including:

Text

Formatting

Resizing

Layout

Listing

Links

To local pages

To pages at other sites


10/379

BODY SECTION

ImagesInserting images (GIF and jpg)

Adding a link to an image

Backgrounds

Colors

ImagesFixed Image

Tables

Frames

Forms Metatags

Hexadecimal Colors


11/379

Example1.htm

First Page

Computer vs. CalculatorThe main difference between computer and calculator is that a Computer can

take logical decisions but calculator can't.

In the above Example, you have seen many tags like

,,, and .


12/379

Output ofExample1.htm


13/379

Text Formatting

Some HTML tags allow you to specify a Varity of option or attribute along withthe basic tag itself.

Forexample when we begin a paragraph with the

tag we can specify whetherthe text in that paragraph should be aligned to the left margin, right margin orcenter of the page. Lets see some more tags, which will solve our problemsrelated to alignment and formatting:

... - region of text to be formatted its attribute is:

ALIGN="..." align text to center, leftorright.

... - to make text bold

... - italicised text

... strikethrough text... underlined text

... large text

... small text


14/379

Text Formattingcontd

... changes the font size and color itsattributes are

SIZE="..." to change font size (1 through 7 or relative)

COLOR="..." to change the colorof font

FACE="..." the font type

... teletype (or mono spaced) text


15/379

Example2.htm

EXAMPLE 2

This line is BOLD

This line is UNDERLINED
This line is ITALICS

Text is STRIKED

This line is normal

The font of this line is BIG

The font of this line issmall

This line is aligned centre


16/379

Example2.htm

This line is aligned left

This line is aligned right

Doeacc Centre Chandigarh

DoeaccCentre Chandigarh


17/379


18/379

Lists

There are three types of HTML lists

Numbered list: It is also called ordered list and starts with tag and end

with tag. Numbers and line breaks appear automatically at each tag

and the entire list is indented.

Bulleted list: Is called an unordered list it opens with tag and closes with

. It looks just like an ordered list except that, bullets appear at each

tag instead of numbers.

Definition list: List of terms and their meaning is called a definition list it starts

with the and ends with . The tag goes in front of each term to

be defined, with a tag in f ront of each definition. Line breaks and

indentations appear automatically.


19/379

Numbered list

... an ordered ornumbered list its attributes areTYPE = "..." the type of numerals used to label the list. Possible values are A,a,I,i,1

START = "..." the value with which to start this list

... an unordered orbulleted list

TYPE="..." the bullet used to mark list item. Possible values are DISC CIRCLE and

SQUARE

a list item foruse with or

TYPE="..." the type of bullet or number used to label this item. Possible values are

DISC, CIRCLE,

SQUARE, A, a, I, i, 1

VALUE="..." the numeric value this list item should have (affect this item and all

below it in list).

... a definition list

a definition term as a part of definition list

the corresponding definition to a definition term, as a part of definition list


20/379

Example3.htm

list test

Computer Languages

BASIC C C++ Pascal Fortran

Measurement Units

Bit Kb Mb Gb


21/379



22/379

Example4.htm

Example 4

Input/Output devices

KeyboardPrinter

Keyboard

Keyboard is an input device.Printer

Printer is an output device it can print 1400 linesper minute.


23/379



24/379

Different type of Ordered Lists Example Numbered list:

ApplesBananas

Lemons

Oranges

Letters list:

Apples

Bananas

LemonsOranges

Lowercase letters list:

Apples

Bananas

Lemons

Oranges

Roman numbers list: Apples

Bananas

Lemons

Oranges

Lowercase Roman numbers list:

Apples Bananas Lemons

Oranges


25/379

Output of Ordered list Example


26/379

Practice Session

Create Ordered and Unordered list for different

modules in your course. E.g. Use of PC, Internet and

Web Designing etc.

Create a Nested Ordered / UnOrdered List for Module

wise topics covered. E.g. Use of PC (Topics Covered

are MS

Windows, MS

Word, MS Ex

cel etc)


27/379

Summary ofDay -1

What is an HTML HTML Tags

HTML PAGE STRUCTURE

HEAD SECTION

BODY SECTION

Text Formatting Tags

Lists

Ordered Lists Un-Ordered Lists

Examples on Different Topics

Practice Session


28/379

Day 2


29/379

Tags Continued

Horizontal rulerto separate sections of web page its attributesare

ALIGN="..." deprecated control alignment(LEFT,CENTER,RIGHT,JUSTIFIED).

NOSHADE="..." displays a ruler as a solid color.

SIZE="..." size of the ruler.

WIDTH="..." width of the ruler.

Line break

...
defines a paragraph
ALIGN="..." controls alignment (LEFT,CENTER,RIGHT,JUSTIFY).

... displays preformatted textWIDTH="..." width of the formatted text

... creates subscript

... creates superscript


30/379

Example5.htm

Example 5 Test of different HTML tagsQuadratic equation :A2+B2=A2

+B2+2AB

Chemical Equation :H2+O=H2O

Quadratic equation tells us the formula of algebra.Chemical equation shows one chemical reaction

Quadratic equation tells us the formula of algebra.Chemical equation shows one chemical reaction


31/379



32/379

Hyperlink

An element in an electronic document that links to anotherplace in the same document or to an entirely differentdocument.

When, you click on the hyperlink to follow the link.

Hyperlinks are the most essential ingredient of allhypertext systems, including the World Wide Web.

The tags used to produce hyperlinks are the and.

The tells where the link should start and the indicates where the link ends.

Everything between these two will work as a link.


33/379

Types of Hyperlinks

Linking to otherWeb pages

Links within a page

Links to a specific part ofanotherpage

E-mail links


34/379

Linking to otherpages

These Hypertext links are those underlined words that takeyou from one Web page to another when you click them

with your mouse.

If your website has several pages, you need to provide

links from one to the other, the tag to create link is called, which stands for"anchor" it also defines links

... defines links and anchors its attributes areNAME="..." defines an anchor

HREF="..." the URL of the linked resource

TARGET="..." determines where the resource will be displayed


35/379

Example6.htm

RCC - Example 6Doeacc CentreChandigarh

Doeacc Centre Chandigarh asetup of National Informatics Centre, PlanningCommission, govt. of India was set up in 1978 topromote use of computers. It is one of the pioneercomputer centre of this country.

Head Office
Branch Office
ACHIEVEMENTS


36/379



37/379

Links within a page

These hyperlinks use the ... tag to create links between HTML pages

This will show you how to use the same tag to allow readers to jump betweendifferent parts ofa single page.

ForExample- you put a table of contents at the top of page or put a link at thebottom ofa page that returns you to the top.

It is a different way to use the ... anchor tag it gives a name to specificpoint on the page where the tag occurs

Go Top

The # symbol means that the word "Top" refers to a named anchorpoint within thecurrent document, rather than a separate page, so when the reader clicks the Webbrowserwill display the part of the page starting with the tag


38/379

Example7.htm

DOEACC CENTRE- Example7

DOEACC Centre

DOEACC Centre, Chandigarh offers many short term, long termand Corporate courses. Click the links given below if you want toknow more about courses.

Short term courses ||Long term courses ||

Corporate courses


39/379

Contd..

Short term courses

DOEACC CENTRE Chandigarh offers following short-term courses

Use of Personal Computer

'C' Language

'C++" Language

Visual Basic

Oracle/Dev. 2000

AutoCAD

Internet and Web Designing

Back

Long term courses

DOEACC CENTRE Chandigarh offers following long-term courses


40/379

Contd

P.G.D.C.A

O Level

A Level

B Level

C Level

Back

Corporate courses

DOEACC CENTRE Chandigarh offers following corporatecourses

Use of Personal ComputerCourses according to their requirement

Back


41/379



42/379

Links to a specific part ofanotherpage

Ifyou want to linkyourcurrent web page to the otherpartof another web page this facility is also provided byHTML

For the same you should include the address or name of

that web page followed by # and the anchorname.ForExample:

Shortterm courses

when you click on the "Short term courses" it opens theweb page named "SEVEN.HTM" and moves directly tothe point where appears


43/379

Example8.htm

DOEACC CENTRE - Example8

This example shows you how to make linkto the other web page.

Short termcourses

Long termcourses

Corporatecourses


44/379



45/379

E-mail links

In addition to linking between pages and between parts of singlepage the ... tag allows you to linkyoure-mail address. This

is the simplest way to enable readers ofyourWeb pages to talk back

to you.

[email protected]

The above line links to bookseller's e-mail address. When any user

clicks on "[email protected]" then a window appears on

screen in which user types a message orplaces his order that will be

immediately sent to bookseller.


46/379

Example9.htm

DOEACC CENTRE - Example 9

Computer BooksStore

The Computer Books Store has now come to your city a large varietyof books available on different topics. Just step in and find yourself inthe new world of books. You can contact me at e-mail: [email protected]
place your orders on internetand the delivery will be in 24 hours.

Thanks


47/379



48/379

Practice Session

Create a Nested List of Websites with Hyperlinks on eachitem to the corresponding website. Selecting the link

will open the website in new window. E.g.

Mailing Sites

Yahoo (http://www.yahoo.com) Rediff

Indiatimes

Search Engines

Google (http://www.google.com)

Yahoo

AltaVista


49/379


50/379

Day 3


51/379

Graphics-Background and text colors

To make pages with background and tex

t colors ofyour choice. Tospecify the background color for a page and text colors you have to

do the following things

... encloses the body (text and tags) of the

HTML document its attributes are

BACKGROUND="..." name or the address of the image to tile on the page

background

BGCOLOR="..." the colorof the page background

TEXT="..." the colorof the page's textALINK="..." the colorofactivated link

VLINK="..." the colorof followed link

LINK="..." the colorof unfollowed links


52/379

Example10.htm


DOEACC Centre

DOEACC Centre, Chandigarh offers many short term, long term

And educational courses. Click the links given below ifyou want to knowmoreabout courses.

Short term courses

Long term courses

Corporate courses


53/379



54/379

Clickable Images

We know that the ... tag makes the text links, the sametag can make any image into a clickable link to another page. Butfirst I will show you how to include an image in the web page, wewill do it with the help of... tag

... includes an image in the document its attributes

are SRC="..." the address of the imageALT="..." alternative text to display

ALIGN="..." deprecated control alignment (LEFT, CENTER, RIGHT, JUSTIFY)

HEIGHT="..." height of the image

WIDTH="..." width of the image

BORDER="..." borderwidthHSPACE="..." the horizontal space separating the image from othercontent

VSPACE="..." the vertical space separating the image from othercontent

USEMAP="..." name of the image map specification used with &


55/379

Example 11.htm

DOEACC CENTRE Example 11

Computer Books Store

The Computer Books Store has now come to your city a large variety ofbooks

available on different topics. Just step in and find yourself in the new

world of books. You can contact me at

e-mail:

[email protected]

click the button for the listing of books available.

place your orders on internet and the delivery will be in 24 hours.

Thanks


56/379



57/379

Example12.htm


Pictures

This is picture 1

This is picture 2


58/379



59/379

Graphical links & Image Maps

In this section we will see to subdivide an image intoregions that link to different documents when some one

clicks. This is called an image maps and any image can bemade into an image maps.

To make any type of image map, you will need to figureout the numerical pixel co-ordinates of each region withinthe image that you want to be clickable link you can dothis in paintbrush. Open any image in paintbrush andwatch the co-ordinates at the bottom of the screen, whenyou take the mouse on the image the co-ordinates at thebottom of the screen show both the X,Y position.


60/379

Graphical links & Image Maps contd.

To map the regions of any image we use ... and tags. The description of both tags is given below

... used with area elements and creates an image

map its attributes are

NAME="..." the name of the image map to be created

... is used to define links and anchors its

attributes are

SHAPE="..." enables you to define image maps using defined

shapes(DEFAULT, RECT,POLY)

COORDS="..." sets the size of the shape using pixel

HREF="..." the URL of the linked resource


61/379

Example13.htm

TEST OF MAP REGION

THIS IS A TEST OF MAPING REGION OF AN IMAGE.

JUST FOR FUN.


62/379



63/379

Tables

One of the most powerful tools for creating web page designs thetable, which allows us to arrange text and graphics into multiple

columns and rows.

Here we will learn how to build HTML tables and how to control the

spacing, layout and appearance of the table you create. To make

tables you have to start with ... tag.


64/379

Table Elements

Element Description

...

defines a table in HTML. If the BORDER attribute is present, your

browser displays the table with a border.

...

defines the caption for the title of the table. The default position of the

title is centered at the top of the table. The attribute ALIGN=BOTTOMcan be used to position the caption below the table. NOTE: Any kind of

markup tag can be used in the caption.

... specifies a table row within a table. You may define default attributes for

the entire row: ALIGN (LEFT, CENTER, RIGHT) and/or VALIGN (TOP,MIDDLE, BOTTOM). See Table Attributes at the end of this table for

more information.

... defines a table header cell. By default the text in this cell is bold and

centered. Table header cells may contain other attributes to determine

the characteristics of the cell and/or its contents. See Table Attributes at

the end of this table for more information.

... defines a table data cell. By default the text in this cell is aligned left and

centered vertically. Table data cells may contain other attributes to

determine the characteristics of the cell and/or its contents. See Table

Attributes at the end of this table for more information.


65/379

Table Attributes

Attribute Description

ALIGN (LEFT, CENTER,

RIGHT)

Horizontal alignment of a cell.

VALIGN (TOP, MIDDLE,

BOTTOM)

Vertical alignment of a cell.

COLSPAN=n The number (n) of columns a

cell spans.

ROWSPAN=n The number (n) of rows a cell

spans.

NOWRAP Turn off word wrapping within a

cell.

NOTE:Attributes defined within ... or ... cellsoverride the default alignment set in a ... .

bl l


66/379

Tables example

Code Meaning

cell contents first cell in row 1 (a head)

cell contents last cell in row 1 (a head)

end of first row definition

start of second row definition cell contents first cell in row 2

cell contents last cell in row 2

end of second row definition

start of last row definition

cell contents first cell in last row ...

cell contents last cell in last row

end of last row definition

end of table definition

i S i


67/379

Practice Session

Assign the Pages background color to Black,

hyperlinks colorto white.

Insert an Image as Background of the Page.

Insert the Companys Logo image in the center of thepage.

Show one image in different sizes on the same

webpage.

Make a Hyperlink of the image.

S f D 3


68/379

Summary ofDay -3

G

raphics-Background and text colors.

Images

Clickable Images

Graphical links & Image Maps

Tables Introduction


Practice Session


69/379

Day 4

TABLE /TABLE


70/379

...

Creates a table that can contain any numberofrows its attributes are:

BORDER="..." indicates the width in pixels of the table borders.

CELLSPACING="..." the amount of space between the cells in the table.

CELLPADDING="..." the amount of space between the edges of the cell and its

contents.

WIDTH="..." the width of the table on the page, in eithere

xact pi

xel values or asa percentage of page

width.

GCOLOR="..." background color ofall cells in the table that do not contain their

own background and

bgcolor attributes.BACKGROUND="..." background image to tile within all cells in the table that

do not contain theirown

background and bgcolor attributes.

TR /TR


71/379

... defines a table row

Defines a table row, containing one or more cells its attributes are

ALIGN="..." the horizontal alignment of the contents of the cells

within this row. Possible values are LEFT, RIGHT, CENTER

VALIGN="..." the vertical alignment of the contents of the cell

within this row. Possible values are TOP, MIDDLE and BOTTOM

BGCOLOR="..." background color of all cells in the table that do

not contain theirown background and bgcolor attributes.

BACKGROUND="..." background image to tile within all cells in

the table that do not contain their own background and bgcolor

attributes.

TD /TD


72/379

... defines a table data cell

ALIG

N="..." the horizontal alignment of the contents ofthe cells. Possible values are LEFT, RIGHT, CENTER.

VALIGN="..." the vertical alignment of the contents of thecells. Possible values are TOP, MIDDLE and BOTTOM.

ROWS

PAN="..." the numberofrows this cell will span.COLSPAN="..." the numberof columns this cell will span.

WIDTH="..." the width of the column of cells in eitherexact pixel values or as a percentage of page width.

BGCOLOR="..." background colorof the cell.BACKGROUND="..." background image to tile with thecell.


73/379

... defines a table heading cell its attributes are

ALIG

N="..." the horizontal alignment of the contents ofthe cells. Possible values are LEFT, RIGHT, CENTER.

VALIGN="..." the vertical alignment of the contents of thecells. Possible values are TOP, MIDDLE and BOTTOM.

ROWS

PAN="..." the numberofrows this cell will span.COLSPAN="..." the numberof columns this cell will span.

WIDTH="..." the width of the column of cells in eitherexact pixel values or as a percentage of page width.

BGCOLOR="..." background colorof the cell.BACKGROUND="..." background image to tile with thecell.

E l 14 ht


74/379

Example14.htm


Time Table

CityDistanceFair

Bhopal500 k.m.Rs/- 200.00

Delhi450 k.m.Rs/- 175.00

Chandigarh750 k.m.Rs/- 300.00

Kanpur75 k.m.Rs/- 25.00

O t t f E l 14 ht


75/379


E l 15 ht


76/379

Example15.htm


Formula Table

Shapes NameFormula

Triangle (Height * Base)/2

Circle Pi * r2 SquareSide2

O t t f E l 15 ht


77/379


Using tags in tables Example


78/379

Using tags in tables Example

This is a paragraph

This is anotherparagraph
This cell contains a table:
A B

C D

This cell contains a list

apples

bananas

pineapples

HELLO

O t t U i i bl E l


79/379

Output - Using tags in tables Example

Practice Session


80/379

Practice Session

Create a Table ofyourQualification Details. E.g.Table consists of following Columns

Class

School/College Name

Board/University Name

Yearof Passing

Percentage/Grade etc.

Summary of Day 4


81/379

Summary ofDay -4

... ... defines a table row

... defines a table data cell

... defines a table heading cell its

attributes are


Practice Session


82/379

Day 5

Forms


83/379

Forms

Forms are used to collect information from the people whoread ourweb pages.

A web formallows us to receive feedback, orders orother

information from the readers of ourweb page.Every form begin with the ... tag

We will also use some otheruseful tags like:

... and

... as controls in the HTMLForms.


84/379

...

... indicates an input form its

attributes are:

ACTION="..." address of the script to process the

form input

METHOD="..." how the form input will be sent to theservernormally set to POST ratherthan GET


85/379

...

... and input element for a form its attributes are:

TYPE="..." the type for this input widget. Possible values are CHECKBOX,

RADIO, RESET, SUBMIT, FILE and TEXT

NAME="..." the name of this item as passed to the script

VALUE="..." for a text item, the default value; for a checkbox or radio

button, the value to be submitted with the form; for reset or submit buttons,

the label forthe button itself

SRC="..." the source file for an image (checked) for checkboxes and radio

buttons, indicates that this item is checked

SIZE="..." the width, in characters, ofa text input region

MAXLENGTH="..." the maximum number of characters that can be entered

into a text region

ALIGN="..." how the text orimage will align


86/379

...

... creates a menu orscrolling list

of possible items its attributes are

NAME="..." the name that is passed to the script

SIZE="..." the number of elements to display. If SIZE is

indicated, the selection becomes a scrolling list.

If no SIZE is given, the selection is popup menuMULTIPLE"..." allows multiple selections from a list


87/379

indicates a possible item within a

element

(SELECTED) with this attribute included, the will be selected by default in the list

VALUE="..." the value to submit if this isselected when the form is submitted

TEXTAREA /TEXTAREA


88/379

...

... indicates amulti line

text entry from element. Default text can be included its

attributes are

NAME="..." the name to be passed to the script

ROWS="..." the numberofrows this text area displays

COLS="..." the number of columns (characters) this tex

tarea displays

Example16 htm


89/379

Example16.htm


Employment Exchange

First Name :

Second Name :

Father's Name :

Date of Birth :

Sex Code : M F

Qualification :

High School Intermediate

Graduate

Post Graduate

Engineer

PhD

Example16 htm td


90/379

Example16.htmcontd

Stream

Science Arts

Commerce

Computers

Percentage Marks :

Nationality :

Religion : Category :

SC

ST

General

OTHERS

Mailing Address :

Permanent Address :

Output of Example16 htm


91/379


Practice Session


92/379

Practice Session

Create a form to accept Userid and Password.

Create a Online FeedBackFormFeedBackandPersonal information.

Fields in formare:

Name (TextBox)

Address (TextArea)

Sex (Radio Buttons)

Course Contents you like (Multiselect ListBox)

Infrastructure (Dropdown List Values Excellent, Good, Poor)

Instructor(Radio Button -Values Excellent, Good, Poor)

Remarks/Comments (Text Area)

Submit (Button)

Create aQueryFormand send the data filled in form viaEmail.

Summary of Day -5


93/379

Summary ofDay -5

Forms ... ...

...

...


PracticeS

ession


94/379

Day 6

Frames


95/379

Frames

Frames overcome this limitation by dividing the browserwindows into multiple HTML documents.

Frames are like tables in that they allow you to change text

and graphics into rows and columns. But unlike a table

cell, any frame can contain links that change the contentsof otherframes(oritself).

Forexample one frame could display an unchanging index

page while other frame could change based on which links

the readerclicks.

Frames are basically a way of arranging and presenting

several web pages at once.

Creating a Frameset document


96/379

Creating aFrameset document

Aframeset document is an HTML page that instructs theweb browserto split its window into multiple frames, and

specifies which web page should be displayed in each

frame.

... divides the mainwindow into a set of frames that can each displaya

separate document its attributes are


97/379

...

ROWS="..." split the window orframeset vertically intonumber of rows specified by a number (such as 7), a

percentage of the total window width (such as 25%), or

an asterisk (*) indicating that a frame should take up all

the remaining space.

COLS="..." works similar to rows, except that thewindow orframeset is split horizontally into columns

FRAMESPACING="..." space between frames in

pixels

FRAMEBORDER="..."specifies whether to display theborderforthe frames. Options are yes orno.

BORDER="..." size of the frame borderin pixels

...


98/379

...

Within the ...tags, you should have a tag indicatingwhich HTML document to display in each frame.You don't need to specify tag.

defines a single frame within aFRAMESET>, its attributes are:

SRC="..." the URL of the document to bedisplayed in this frame

NAME="..." a name to be used for targeting thisframe with the target attribute in links

Example17.htm


99/379

Example17.htm

DOEACC CENTRE

Example 17

Output of Example17.htm


100/379


Nested Frames


101/379

Nested Frames

By nesting one frameset within another you can

create rathercomplex frame layouts. Next Example

18 tells you how to nest frames.

Example18.htm


102/379

DOEACC CENTRE Example18

Example18.htm

Output of the example18.htm


103/379


Multimedia media in web pages


104/379

Multimediamedia in web pages

Multimedia is popular buzzword for sound, videoand interactive animation. In this chapter we will

learn how to include sound and video in a web

page.

You can include sound and video in a web page

with the help of... tag


105/379

EMBED

1. embeds a file to be read ordisplayed by a browser its

attributes are:

SRC="..." URL of the file to embed

WIDTH="..." the width of the embedded object in pixel

HEIGHT="..." the height of the embedded object in pixelALIGN="..." determines the alignment of the media window

VSPACE="..." the space between the media and the text above orbelow it

HSPACE="..." the space between the media and the text to its left or

right

BORDER="..." draws a border of the specified size in pixel aroundthe media

Example19.htm


106/379

Example19.htm

DOEACC CENTRE - Example

19

You are listening the First Music file.



107/379

Output o t e e a p e 9. t

Practice Session


108/379

Create a Vertical frameset with 3 different documents

Create a frameset with 2 rows and in the second row 2

columns.

Create a Navigation Frame. Left frame with links to

different website. On click target URL will be shownin right frame.

Create a frameset consisting of Jump to a specified

section with frame navigation.

Create a Webpage which includes a sound file.

Summary ofDay -6


109/379

y y

Frames

Creating aFrameset document

...

...

Nested Frames Multimediamedia in web pages


Practice Session


110/379

Day 7

DYNAMIC HTML


111/379

Dynamic HTML (DHTML) offers a way to provide that

sophistication.

Combining HTML with Cascading Style Sheets and

scripting language, DHTML is arich tool set forcreating

eye-catching effects and new dimensions in functionality.Cascading Style Sheets

A Style sheet is a single page of forming instructions that can

control the appearance ofmany HTML pages at once.

Making assignments


112/379

g g

Style assignment process starts with a tag and

ends with a tag.

The syntax for making the assignment is simple.

Between and you list the HTML

tags to which you want to assign style and you follow eachtag with a pairof curly brackets.

Inside the brackets, you male the assignment for specific

style attributes:

tag {attributes :value;attributes:value}

Makingassignmentscontd


113/379

g g

In Style terminology:

The Tag is a selector and everything inside the curly brackets is

a declaration.

A selectordeclaration pairis called a rule.

Thus the style sheet consists ofan opening tag a set

of selector-declaration rules, and closing tag.

Here's an example ofa selector-declaration rule:

H1 {color:crimson ; font-family:haettenschweiler }

This rule specifies that any H1 heading will have crimsonas it font-colorand Haettenschweiler as in font-face.

Makingassignmentscontd


114/379

g g

It's possible for a selectorto consist ofmore than one tag:

tag1, tag2 {attributes:value}

In this case, the rule assigns the attributes-value to both tags. For

example, the rule

H1 EM {color:crimson}

Assigns crimson as the color of all H1 headings and all EM(emphasized) elements. If you use multiple tags and you don't

include comma, your browser interprets the rule in an entirely

different way. The rule

H1 EM {color:crimson}

Assigns crimsons as the color ofEM elements, but only those that

appear in H1 heading. The type of selector in this rule is called a

contextual selector.

Moreondeclarations


115/379

Some attributes, particularly font-released ones, have a

special syntax forgrouping style characteristics. You don't

have to explicitly state each attribute-value pair in a

semicolon-delineated list. Instead you can create them in a

more natural way.

Forexample, the rule

Can also appear as

H1 {font: 25 pt Haettenschweiler}

Example1.htm


116/379

p

H1 {font:25 pt; font-family:fantasy; font-style:oblique; color:blue}

body {fony:10 pt; font-family:monospace; font-style:normal; color:green}

HR {height:10; color:blue}

LI {font:15 pt; color:orange}

CSS

COMPUTERS

Computer is an electronic device. It works on stored program concept

Computer can take logical decision.

I/O devices

Mouse

Keyboard

Printer



117/379

p p

A touchofclass


118/379

Class is a useful feature.

It enables you to specify the same style for a particularelement eachtime appears.

If you make an element a member of a class by inserting Class =Class Name into its opening tag, it conforms to that class'sspecifications.

Let's use class to build a rule that assigns style attributes to theappearance of bulleted text.

In your document tags surround the bulleted text. Between and , add these lines to create the rules:

.listText {font: 15pt; color:Darkorange}in the tag that precedes each bulleted item, add

Class = "listText"

Class contd


119/379

Type that same expression in the tag too.

Note the usefulness and versatility of Class: Throughout

the document, we use two classes ofA elements (UofCyb

and listText), and use one class (listText) in two different

elements (A and UL).

While we're at it, let's add a rule a change add bullet. Each

bullet is an LI element, some can add this rule to change

each bullets color and indentation:

LI {font: 15 pt:color:magenta; text-indent: .5in}

Example2.htm


120/379

H1 {font:25 pt ; font-family:fantasy ; font-style:oblique ; color:blue}.bdy {font:10 pt ; font-family:monospace ; font-style;normal ;color:green}

HR {height:10; color;blue}

.LSTITM {font:15 pt ; color:orange}

CLASS

COMPUTERS



I/O devices

Mouse

Keyboard


121/379

Adding IDs


122/379

How do you attach an ID to a CSS rule?

You precede it with # sign.

This turns the selector(the unbracketed part) into the "ID".

If you then assign the selector as the value of the ID

attributes in any element on the page, you apply the stylingin the rule's declaration (the bracketed part).

Let's add an ID to ourSTYLE element.Suppose you want to make a couple of the items stand out by coloringthem blackand making them 10% larger than the other bulleted items.

Add this rule:#IDTOLI {font-size: 110% ; color:blue; background:yellow}

Next, assign IDTOLI as the ID forone of the bulleted items. Change

Keyboard

Example3.htm


123/379

H1 {font:25 pt; font-family:fantasy ; font-style:oblique ; color:blue}body {font:10 pt ; font-family:monospace ; font-style:normal ;color:green}

HR {height:10 ; color:blue}

.LST {font:10 pt ; color:green}

#IDTOLI {font-size:110%;color:blue ; background:yellow}

Adding ID in Style Sheet

COMPUTERS



I/O devices

Mouse

keyboard

Printer



124/379

SPAN


125/379

SPAN is an HTML element that plays a prominent role in

style sheets.

In a rule you use it in the selector as you would use any

other HTML, tag. In the body of the document, you use

and to set the boundaries of the rule'sstyling specifications.

You can use SPAN in conjunction with a class (as is the

case for any otherHTML element).

SPAN.uppercase {text-transform:uppercase}

SPAN.lower{text-transform:lowercase}

Example4.htm


126/379

H1 {font:25 pt ; font-family:fantasy ; font-style:oblique ;color:blue}

body {font:10 pt ; font-family:monospace ; font-style:normal ;color:green}

HR {height:10; color:blue}

LI {font:15 pt ; color:orange}

SPAN.uppercase {text-transform:uppercase}

SPAN.lower {text-transform:lowercase}

CSS

COMPUTERS

Computer is an electronic device. It works on stored programconcept


I/O devices

Mouse

KEYBOARD

Printer

Practice Session


127/379

Create styles to display headings in different

styles

Create style for table tag to have a different type

of font and background

SummaryofDay 7


128/379

DYNAMIC HTML

Making assignments

Declarations

A touch of class

Adding IDs

SPAN

Practical Session


129/379

Day 8

Linking Style Sheets


130/379

For style sheet information to control a page'sappearance it's not necessary for that style sheet toappearon the page.

Instead you can put the style sheet in a separatedocument, and set a link to that document.

You can then reuse the style sheet's information bylinking it to otherdocuments as well.

Linking Style Sheets contd' h hi fil h ld l k lik


131/379

Here's what this new file should look like:


132/379

Now we have to link ourWeb Access Statistics page to this style sheet document.

In yourStylized Web Access Stats.htm document, create a new line just before the

tag.

(Style information should no longerbe in this document.) On this new line, type

Save the document and open the Stylized Web Access Ststs.htm document in IE. It

will look like figure 5, even though on tags are in documents.

Example5.htm


133/379

Linking Style Sheet

Languages

Classification of computer languages

Low level languages

Machine language

Assembly language

High level language

BASICC

C++



134/379

The Elementof


135/379

Exactly what style attributes are available to you? Lets explore them

more closely You'll recognize some of them, as you've alreadyworked with quite few.

One category species characteristics of fonts:

font Font-family

Font Font-family

Font-style Font-weight

Font-size

The Elementof contd..Another specifies the color and back ground of HTML,


136/379

Anotherspecifies the colorand back ground of HTML,

element

Color Background

Back ground-color Back ground-image

Back ground-repeat Back ground-attachment

Back ground-position

A third specifies the properties of text inside an HTML document:

word-spacing letter-spacing

tex

t-decoration vertical-aligntext-transform text-align

text-indent line-align

The Elementof contd..


137/379

Still another deals with the characteristics of the

(sometimes invisible)"boxes" thatMargin Margin-top Margin-right

Margin-bottom Margin-left Padding

Padding-top Padding-right Padding-bottom

Padding-left Border-width Border-top-width

Border-right-width Border-bottom-width Border-left-width

Border-color Border-style Border-top

Border-right Border-bottom Border-left

Border Width Height

Float

Font Attributes


138/379

The exercise in this Skill emphasize an important use of

style sheet-setting the characteristics of fonts.

If you follow the step in the sidebar "A Style Sheet forYourBrowser", you'll see a dramatic example of this).

The font attributes are font-family, font-style, font-weight,font-size, and (not surprisingly) font.

That last one is a shorthand structure for setting severalfont characteristics at the same time.

Font Attributescontd


139/379

Table belows shows the possible values of the otherfont attributes.

Attributes Possible Value

Font-family A comma-delimited sequence of fonts family

names (e.g., gill or helvetica) and/or genetic

fonts (serif, sans-serif, cursive, fantasy, or

monospace)

Font-style Normal, italic, oroblique

Font-weight Normal bold, bolder, lighter, or one of nine

numerical values

(100, 200, 300, 400, 500, 600, 700, 800, or

900)

Font-size A term that denotes absolute size (xx-small, x-

small, small, medium, large, x-large, xx-large),

relativesize(large, smaller) a number (of pixels)

or a percentage of the parent element's size)

ColorandBackground Attributes


140/379

Attributes in this category specify the appearance of an element's

foreground and back ground in items of color and images.

The background attributes is like font, a shorthand forsetting several

background attribute values at once. Table below shows most of the

others.

Attributes What It Does Possible Values

Color Set's an element's text-

color(also called the

"foreground color")

A color-name (as in

Table 1.1) ora color

code

Back ground-color

Specifies the colorin anelements background

A color-name, a color-code, ortransparent

Back ground-

image

Sets the back ground image AURL, ornone

Text AttributesText attributes provide the appearance of a page's text They pretty straight forward as


141/379

Text attributes provide the appearance ofa page's text. They pretty straight-forward, as

table below indicates.Attributes What It Does Possible Values

Word-spacing Increase the default distance between

consecutive words

Normal, ora length

Letter-spacing Increase the default distance between

consecutive letters

Normal, ora length

Text-decoration Add's decoration to an elements text None, orone ormore of these

terms:underline, overline, linethrough,blink

Vertical-align Determines an element's vertical positioning Baseline, sub,super, too.text-top, middle,

bottom. ortext bottom; can also be a

percentage of the elements height

Text-transformation Applies an text transformation to the text Capitalize (puts the text in to initial caps),

upperc

ase, lowe

rc

ase, o

rnone

Text-align Aligns text with in the element Left, right, center, orjustify

Text-indent Indents the first line of the text A percentage of the elements width, ora

length

Line-height Determines the distance between the

baseline of consecutive lines of text

Normal, ora number, length, orpercentage

of the element's font size.

Positioning Text


142/379

Next Examples shows two lines of text line 1 has

been positioned three line-breaks from the top edge

of the window, and line2's position has been set via

absolute positioning 50 pixels from the top edge of

the window and 20 pixels from the left edgeType this HTML into a new file called

Example6.htm, and you'll see the display shown in

Example 6

Example6.htm


143/379

Positions

This is line 1

This is line2 with absolute positioning.



144/379

Changed output ofExample6.htmN l ' h h i i i f li 2 f b l l i


145/379

Now let's change the positioning of line 2 from absolute to relative.

This is how it looks

Arelative positioned element is positioned relative to the element that

precedes it in the HTML document. Thus line2 is now offset 50 pixels

down from line1 and 20 pixels to the right of the end of line1.

Practice Session


146/379

Create styles in a file and link them in another

html file

Create style forbullets and numbers

SummaryofDay 8


147/379

Linking Style Sheets

The Element of

Font Attributes

Color and Background Attributes

Text Attributes

Positioning Text

Practical Session


148/379

Day 9

Introduction


149/379

JavaScript is the scripting language of the Web!

JavaScript is used in millions of Web pages toimprove the design, validate forms, detectbrowsers, create cookies, and much more.

JavaScript is the most popular scriptinglanguage on the internet.

What is JavaScript?


150/379

JavaScript was designed to add interactivity to HTMLpages

JavaScript is a scripting language (a scripting language isa lightweight programming language)

A JavaScript consists of lines of executable computer codeA JavaScript is usually embedded directly into HTML pages

JavaScript is an interpreted language (means that scriptsexecute without preliminary compilation)

Everyone can use JavaScript without purchasing a license

Ending Statements With a Semicolon?


151/379

With traditional programming languages,like C++ and Java, each code statementhas to end with a semicolon.

Many programmers continue this habit

when writing JavaScript, but in general,semicolons are optional! However,semicolons are required if you want toput more than one statement on a single

line.

How to Handle Older Browsers


152/379

Browsers that do not support JavaScript will displaythe script as page content. To prevent them fromdoing this, we may use the HTML comment tag:

The two forward slashes at the end of comment line(//) are a JavaScript comment symbol. This preventsthe JavaScript compiler from compiling the line.

Where to Put the JavaScript


153/379

JavaScripts in a page will be executed immediately while the page loadsinto the browser. This is not always what we want. Sometimes we want to

execute a script when a page loads, other times when a user triggers anevent.

Scripts in the head section: Scripts to be executed when they arecalled, or when an event is triggered, go in the head section. When you

place a script in the head section, you will ensure that the script is loadedbefore anyone uses it.

....

Scripts in the body section:


154/379

Scripts to be executed when the page loads go in the

body section. When you place a script in the bodysection it generates the content of the page.

....

Scripts in both the body and thehead section


155/379

head sectionY

ou can place an unlimited number of scripts inyour document, so you can have scripts in boththe body and the head section.

....

....

Using an External JavaScript


156/379

Sometimes you might want to run the same JavaScript onseveral pages, without having to write the same script onevery page.

To simplify this, you can write a JavaScript in an externalfile. Save the external JavaScript file with a .js fileextension.

To use the external script, point to the .js file in the "src"attribute of the tag:

Variables


157/379

A variable is a "container" for information you

want to store. A variable's value can changeduring the script. You can refer to a variableby name to see its value or to change itsvalue.

Rules for variable names:

Variable names are case sensitive

They must begin with a letter or the

underscore character

Declare a Variable


158/379

You can create a variable with the varstatement:

var strname = some value

You can also create a variable withoutthe var statement:

strname = some value

Assign a Value to a Variable


159/379

You can assign a value to a variable like this:

var strname = "Hege"Or like this:

strname = "Hege

The variable name is on the left side of theexpression and the value you want to assignto the variable is on the right. Now thevariable "strname" has the value "Hege".

Lifetime ofVariables


160/379

When you declare a variable within a function, thevariable can only be accessed within that function.When you exit the function, the variable is destroyed.These variables are called local variables. You canhave local variables with the same name in differentfunctions, because each is recognized only by thefunction in which it is declared.

If you declare a variable outside a function, all the

functions on your page can access it. The lifetime ofthese variables starts when they are declared, andends when the page is closed.

Practice Session


161/379

Write a script that display sum of two numbers 12 and

34.

Write a script that display the average of 5 numbers .

Summary ofDay 9


162/379

Introduction

What is JavaScript?Ending Statements With aSemicolon?

How to Handle OlderBrowsers

Where to Put the JavaScript

Scripts in the body section:Scripts in both the bodyand the head section

Using an External JavaScript

Variables

Declare aVariableAssign aValue to aVariable

Lifetime ofVariables

Practical Session


163/379

Day 10

Conditional Statements


164/379

Very often when you write code, you want to performdifferent actions for different decisions. You can useconditional statements in your code to do this.

In JavaScript we have the following conditionalstatements:

if statement - use this statement if you want to executesome code only if a specified condition is true

if...else statement - use this statement if you want toexecute some code if the condition is true and anothercode if the condition is false

if...else if....else statement - use this statement if youwant to select one of many blocks of code to be executed

switch statement - use this statement if you want toselect one of many blocks of code to be executed

If Statement


165/379

You should use the if statement if you wantto execute some code only if a specifiedcondition is true.

Syntax

if (condition){

code to be executed ifcondition is true

}Note that if is written in lowercase letters.Using uppercase letters (IF) will generate aJavaScript error!

Example 1


166/379

//Write a "Good morning" greeting if

//the time is less than 10

var d=new Date()

var time=d.getHours()

if (time


167/379

//Write "Lunch-time!" if the time is 11

var d=new Date()

var time=d.getHours()

if (time==11)

{ document.write("Lunch-time!")

}

If...else Statement


168/379

If you want to execute some code if a condition

is true and another code if the condition is nottrue, use the if....else statement.

Syntax

if (condition)

{code to be executed ifcondition is true

}

else

{

code to be executed ifcondition is not true

}

Example


169/379

//If the time is less than 10,

//you will get a "Good morning" greeting.

//Otherwise you will get a "Good day" greeting.

var d = new Date()

var time = d.getHours()

if (time < 10) {

document.write("Good morning!")

}

else {

document.write("Good day!")}

If...else if...else Statement


170/379

You should use the if....else if...else statement if you wantto select one of many sets of lines to execute.

Syntax

if (condition1)

{

code to be executed ifcondition1 is true

}

else if (condition2)

{

code to be executed ifcondition2 is true

}

else

{

code to be executed ifcondition1 andcondition2 are not true

}

Example


171/379

var d = new Date()

var time = d.getHours()

if (time10 && time


172/379

You should use the switch statement if you want to selectone of many blocks of code to be executed.

Syntax

switch(n)

{case 1: executecode block1

break

case 2: executecode block2

break

default: code to be executed if n is different fromcase 1 and 2

}

Example


173/379

//You will receive a different greeting based

//on what day it is. Note that Sunday=0,//Monday=1, Tuesday=2, etc.

var d=new Date()

theDay=d.getDay()

switch (theDay)

{case 5: document.write("Finally Friday")

break

case 6: document.write("Super Saturday")

break

case 0: document.write("Sleepy Sunday")break

default: document.write("I'm looking forward to thisweekend!")

}


174/379

Assignment Operators


175/379

Operator Example Is The Same As

= x=y x=y

+= x+=y x=x+y

-= x-=y x=x-y

*= x*=y x=x*y

/= x/=y x=x/y

%= x%=y x=x%y


176/379

Logical Operators


177/379

Operator Description Example

&& and x=6y=3(x < 10 && y > 1) returns

true

|| or x=6y=3(x==5 || y==5) returnsfalse

! not x=6y=3!(x==y) returns true

String Operator

A st ing is most often te t fo e ample


178/379

A string is most often text, for example

"Hello World!". To stick two or morestring variables together, use the +operator.

txt1="What a very"txt2="nice day!"

txt3=txt1+txt2

The variable txt3 now contains "What averynice day!".


179/379

Conditional Operator

JavaScript also contains a conditional operator that


180/379

JavaScript also contains a conditional operator that

assigns a value to a variable based on some condition.Syntax

variablename=(condition)?value1:value2

Example

greeting=(visitor=="PRES")?"Dear President ":"Dear

If the variable visitor is equal to PRES, then put thestring "Dear President " in the variable named

greeting. If the variable visitor is not equal to PRES,then put the string "Dear " into the variable namedgreeting.


181/379

Summary ofDay 10

Conditional Statements


182/379

If Statement

Example 1Example 2

If...else Statement

Example

If...else if...else Statement

Example

The JavaScript Switch Statement

Example

JavaScript Operators

Assignment Operators

Comparison Operators

Logical OperatorsString Operator

String Operator contd

Conditional Operator

Practice Session


183/379

Day 11

JavaScript Popup Boxes


184/379

Alert boxAlert box with line breaks

Confirm box

Prompt box

Alert Box

An alert box is often used if you want to make sure


185/379

An alert box is often used if you want to make sure

information comes through to the user. When an alertbox pops up, the user will have to click "OK" toproceed.

Syntax:

alert("sometext")

Confirm Box

A confirm box is often used if you want the


186/379

A confirm box is often used if you want the

user to verify or accept something.When a confirm box pops up, the user willhave to click either "OK" or "Cancel" toproceed.

If the user clicks "OK", the box returns true. Ifthe user clicks "Cancel", the box returns false.

Syntax:

confirm("sometext")

Prompt Box

A prompt box is often used if you want the


187/379

A prompt box is often used if you want the

user to input a value before entering apage.

When a prompt box pops up, the user willhave to click either "OK" or "Cancel" toproceed after entering an input value.

If the user clicks "OK" the box returns theinput value. If the user clicks "Cancel" thebox returns null.

Syntax:

prompt("sometext","defaultvalue")

JavaScript Functions

A function is a reusable code-block that will be


188/379

A function is a reusable code block that will be

executed by an event, or when the function is called.To keep the browser from executing a script as soonas the page is loaded, you can write your script as afunction.

A function contains some code that will be executedonly by an event or by a call to that function.

You may call a function from anywhere within thepage (or even from other pages if the function isembedded in an external .js file).

Functions are defined at the beginning of a page, inthe section.

Example - Function


189/379

function displaymessage()

{

alert("Hello World!")

}

How to Define a Function

The syntax for creating a function is:


190/379

The syntax for creating a function is:

function functionname(var1,var2,...,varX){

some code

}

var1, var2, etc are variables or values passed into the

function. The { and the } defines the start and end of thefunction.

A function with no parameters must include the parentheses() after the function name:

function functionname()

{

some code

}

The return Statement

The return statement is used to specify the value that is


191/379

e e u s a e e s used o spec y e a ue a s

returned from the function.Example

The function below should return the product of twonumbers (a and b):

function prod(a,b)

{

x=a*b

return x

}

When you call the function above, you must pass alongtwo parameters:

product=prod(2,3)

The returned value from the prod() function is 6, and itwill be stored in the variable called product.

JavaScript Loops

Very often when you write code, you want the


192/379

Very often when you write code, you want the

same block of code to run over and over againin a row. Instead of adding several almostequal lines in a script we can use loops toperform a task like this.

In JavaScript there are two different kind ofloops:

for - loops through a block of code a specified

number of timeswhile - loops through a block of code while aspecified condition is true

The for Loop

The for loop is used when you know in


193/379

The for loop is used when you know in

advance how many times the scriptshould run.

Syntax

for(var=startvalue;var


194/379

var i=0

for (i=0;i


195/379

The while loop is used when you want

the loop to execute and continueexecuting while the specified condition istrue.

while (var


196/379

var i=0

while (i


197/379

p p

loop will always execute a block of code ONCE, andthen it will repeat the loop as long as the specifiedcondition is true. This loop will always be executedonce, even if the condition is false, because the codeis executed before the condition is tested.

do

{

code to be executed

}

while (var


198/379

var i=0

do

{

document.write("The number is " + i)document.write("
")

i=i+1

}

while (i


199/379

that follows after the loop (if any).

Example

var i=0

for (i=0;i


200/379

with the next value.

Example

var i=0for (i=0;i


201/379

the elements of an array or through the properties ofan object.

The code in the body of the for ... in loop is executedonce for each element/property.

Syntax

for (variable in object){

code to be executed

}

The variable argument can be a named variable, anarray element, or a property of an object.

Example


202/379

y

var x

var mycars = new Array()

mycars[0] = "Saab"

mycars[1] = "Volvo"

mycars[2] = "BMW"

for (x in mycars)

{

document.write(mycars[x] + "
")

}

Practice Session

Write a script that accepts your name in a input box


203/379

p p y p

and display that name in a Messagebox. Write a script that display the factorial ofa number.

Write a script that display the prime numbers from 1 to

100.

Summary ofDay 11

JavaScript PopupBoxes

Alert Box


204/379

AlertBox

ConfirmBox

PromptBox

JavaScript Functions

Howto Definea Function

Thereturn StatementJavaScript Loops

Thefor Loop

Thewhile loop

Thedo...while Loop

break

Continue

For...In Statement

Practice Session


205/379

Day 12

Events

Every element on a web page has certain events


206/379

which can trigger JavaScript functions. For example,we can use the onClick event of a button element toindicate that a function will run when a user clicks onthe button. We define the events in the HTML tags.

Examples of events:

A mouse click

A web page or an image loading

Mousing over a hot spot on the web page

Selecting an input box in an HTML formSubmitting an HTML form

A keystroke

onload and onUnload

The onload and onUnload events are triggered


207/379

when the user enters or leaves the page.The onload event is often used to check thevisitor's browser type and browser version,and load the proper version of the web page

based on the information.

Both the onload and onUnload events are alsooften used to deal with cookies that should beset when a user enters or leaves a page.

onFocus, onBlur and onChange

The onFocus, onBlur and onChange events are


208/379

often used in combination with validation ofform fields.

Below is an example of how to use theonChange event. The checkEmail() function

will be called whenever the user changes thecontent of the field:

;

onSubmit

The onSubmit event is used to validate ALL


209/379

form fields before submitting it.Below is an example of how to use theonSubmit event. The checkForm() function willbe called when the user clicks the submit

button in the form. If the field values are notaccepted, the submit should be cancelled. Thefunction checkForm() returns either true orfalse. If it returns true the form will besubmitted, otherwise the submit will be

cancelled:

onMouseOver and onMouseOut

onMouseOver and onMouseOut are often


210/379

used to create "animated" buttons.

Below is an example of an onMouseOverevent. An alert box appears when an

onMouseOver event is detected:


211/379

language. An OOP language allows you to define your ownobjects and make your own variable types.

an object is just a special kind of data. An object hasproperties and methods.

PropertiesProperties are the values associated with an object.

Methods

Methods are the actions that can be performed on objects

String Object

The String object is used to manipulate a stored piece of


212/379

text

The following example uses the length property of theString object to find the length of a string:

var txt="Hello world!"

document.write(txt.length)

The following example uses the toUpperCase() method of the String object

to convert a string to uppercase letters:

var txt="Hello world!"

document.write(txt.toUpperCase())

Date Object

The Date object is used to work with dates and times.

We define a Date object with the new keyword The following


213/379

We define a Date object with the new keyword. The followingcode line defines a Date object called myDate:var myDate=new Date()

We can easily manipulate the date by using the methodsavailable for the Date object.

In the example we set a Date object to a specific date (14thJanuary 2010):

var myDate=new Date()

myDate.setFullYear(2010,0,14)

we set a Date object to be 5 days into the future:var myDate=new Date()

myDate.setDate(myDate.getDate()+5)

Comparing Dates

The Date object is also used to compare two dates.


214/379

The following example compares today's date with the14th January 2010:

var myDate=new Date()

myDate.setFullYear(2010,0,14)var today = new Date()

if (myDate>today)

alert("Today is before 14th January 2010")

elsealert("Today is after 14th January 2010")

Array ObjectThe Array object is used to store a set of values in a singlevariable name.

We define an Array object with the new keyword. The


215/379

following code line defines an Array object called myArray:var myArray=new Array()

There are two ways of adding values to an array (you can addas many values as you need to define as many variables yourequire).

var mycars=new Array() var mycars=newArray(3)

mycars[0]="Saab" mycars[0]="Saab"

mycars[1]="Volvo mycars[1]="Volvo"

mycars[2]="BMW mycars[2]="BMW

var mycars=new Array("Saab","Volvo","BMW")

Accessing & Modifying Arrays

You can refer to a particular element in an array by referring tothe name of the array and the index number. The index numberstarts at 0


216/379

starts at 0.

The following code line:

document.write(mycars[0])will result in the

following output:

Saab

To modify a value in an existing array, just add a new value tothe array with a specified index number:

mycars[0]="Opel

Now, the following code line:

document.write(mycars[0])

will result in the following output:

Opel


217/379

Summary ofDay 12

Events

onload and onUnload


218/379

onFocus, onBlur and onChange

onSubmit

onMouseOver and onMouseOut

JavaScript Objects Introduction

String Object

Date Object

Comparing Dates

Array Object

Accessing & Modifying Arrays

Practical Session


219/379

Day 13

JavaScript Cookies

A cookie is a variable that is stored on the visitor's computer.Each time the same computer requests a page with a browser,


220/379

Each time the same computer requests a page with a browser,it will send the cookie too. Examples of cookies:Name cookie - The first time a visitor arrives to your web page,he or she must fill in her/his name. The name is then stored in acookie. Next time the visitor arrives at your page, he or shecould get a welcome message like "Welcome John Doe!" Thename is retrieved from the stored cookie

Password cookie - The first time a visitor arrives to your webpage, he or she must fill in a password. The password is thenstored in a cookie. Next time the visitor arrives at your page,the password is retrieved from the cookie

Date cookie - The first time a visitor arrives to your web page,

the current date is stored in a cookie. Next time the visitorarrives at your page, he or she could get a message like "Yourlast visit was on Tuesday August 11, 2005!" The date isretrieved from the stored cookie

Create and Store a Cookie

we create a function that stores the name of the


221/379

visitor in a cookie variablefunction setCookie(c_name,value,expiredays)

{

var exdate=new Date()

exdate.setDate(expiredays)

document.cookie=c_name+ "=" +escape(value)+

((expiredays==null) ? "" : ";expires="+exdate)

}

Example

Another function that checks if the cookie has been set:

function getCookie(c_name)


222/379

{if (document.cookie.length>0)

{

c_start=document.cookie.indexOf(c_name + "=")

if (c_start!=-1)

{c_start=c_start + c_name.length+1

c_end=document.cookie.indexOf(";",c_start)

if (c_end==-1) c_end=document.cookie.length

return

unescape(document.cookie.substring(c_start,c_end))}

}

return null

}

Example

the function that displays a welcome message if the cookie is set, and ifthe cookie is not set it will display a prompt box, asking for the name ofthe user


223/379

the user

function checkCookie()

{

username=getCookie('username')

if (username!=null)

{alert('Welcome again '+username+'!')}else

{

username=prompt('Please enter your name:',"")

if (username!=null||username!="")

{

setCookie('username',username,365)

}

}

}

Form Validation

JavaScript Form Validation


224/379

JavaScript can be used to validate input datain HTML forms before sending off the contentto a server.

Form data that typically are checked by aJavaScript could be:

has the user left required fields empty?

has the user entered a valid e-mail address?

has the user entered a valid date?has the user entered text in a numeric field?

Required Fields

The function below checks if a required field has been left empty.If the required field is blank, an alert box alerts a message and


225/379

the function returns false. If a value is entered, the functionreturns true (means that data is OK):

function validate_required(field,alerttxt)

{

with (field)

{

if (value==null||value=="")

{alert(alerttxt);return false}

else {return true}}

}

Example

E-mail Validation

The function below checks if the content has the general


226/379

The function below checks if the content has the generalsyntax of an email

function validate_email(field,alerttxt)

{

with (field)

{

apos=value.indexOf("@")

dotpos=value.lastIndexOf(".")

if (apos


227/379

fields are empty Create a cookie that stores the username and address

Write a script to retrieve the information of cookie.

Summary ofDay 13

JavaScript Cookies

Create and Store a Cookie


228/379

Form Validation Required Fields

Practical Session


229/379

Day 14

What is ASP?


230/379

ASP stands for Active Server Pages

ASP is a program that runs inside IIS

IIS stands for Internet Information Services

IIS comes as a free component with Windows2000

IIS is also a part of the Windows NT 4.0 OptionPack

The Option Pack can be downloaded from

MicrosoftPWS is a smaller - but fully functional - version ofIIS

PWS can be found on your Windows 95/98 CD

What is an ASP File?

An ASP file is just the same as an HTML


231/379

fileAn ASP file can contain text, HTML,XML, and scripts

Scripts in an ASP file are executed onthe server

An ASP file has the file extension ".asp"


232/379

What can ASP do for you?

Dynamically edit, change or add any content of a Web


233/379

pageRespond to user queries or data submitted from HTMLforms

Access any data or databases and return the results to abrowser

Customize a Web page to make it more useful forindividual users

The advantages of using ASP instead of CGI and Perl, arethose of simplicity and speed

Provides security since your ASP code can not be viewed

from the browserSince ASP files are returned as plain HTML, they can beviewed in any browser

Clever ASP programming can minimize the network traffic


234/379

Practice Session

Install PWS serveron Win98


235/379

Install IIS Serveron Win2000 System


236/379


237/379

Day 15

The Basic Syntax Rule

An ASP file normally contains HTML tags,

j lik HTML fil H ASP


238/379

just like an HTML file. However, an ASPfile can also contain server scripts,surrounded by the delimiters . Server scripts are executed onthe server, and can contain anyexpressions, statements, procedures, oroperators valid for the scripting

language you prefer to use.

The Response Object

The Write method of the ASP

R Obj t i d t d


239/379

Response Object is used to sendcontent to the browser. For example,the following statement sends the text

"Hello World" to the browser:

VBScript

To set JavaScript as the default scripting language for

ti l t i t l


240/379

a particular page you must insert a languagespecification at the top of the page:


241/379

ASP VariablesA variable is used to store information. If the variable is declaredoutside a procedure it can be changed by any script in the ASP

fil If th i bl i d l d i id d it i t dd d d h d d


242/379

file. If the variable is declared inside a procedure, it is createdand destroyed every time the procedure i

Date post:	08-Apr-2018
Category:	Documents
Upload:	devesh1987
View:	217 times
Download:	0 times

49534707 Web Technologies

Documents