Web tehnology

Web Technology
• Web technologies are the techniques
using which you can access various
resources on the web.

What is Internet?
• It is a international network of
computers.
• It connect million of computers.

Web browser
For accessing a data from internet, user
requires an interface, which link to the
computer of the user to the internet
and send his request. For this purpose,
we use special software, which is known
as web browser. It is a special type of
software used to execute web pages .A
program used to view, download, upload,
surf or otherwise access documents
(pages) on the World Wide Web. Web
browser is the program that one uses to
view and test the HTML documents.
They translate HTML encoded files into
text, images, sound and other features.

Communication between client and
web server
• The server and client
transfer information
between each other
through the computer
network(such as internet)
using a communication
protocols(set of rules).

Communication between
client and server
 A web server is responsible for sending web pages to
a browser for communication with a web server.
 It follows four steps.
1. connect
2. request
3. reply
4. close
 Before a client and server can exchange information
they must first establish a connection.

request
client server
response
1.Connect :- To communicate with web server
the client machine must be give the ip
address of the server along with the sub
protocol that must be used http, ftp, etc.
Web server supports multiple protocols.

2. Request :- Client send a request and
sends response to server when a browser
connects to a web server using an
appropriate protocol name, ip address and
port number. The connection is established
to server for the default web document.

The request for a web page can be two
types:-
1. The web page itself.
2. The request for object referenced by the
web page. It may be gif, jpeg, audio file,
video file.

4. Close: - It is the server’s responsibilities
to terminate the TCP/IP connection with
the browser after it responds to the
browser. The web server must manage an
unexpected closing of a connection.

What is www?
• It is a system of interlinking hypertext
documents access via the internet with
web browser.
• OR
• It is a graphical internet service used to
access the information on the network.

Web site
• A site(location) on world
wide web
• Collection of web pages
• Web pages contain related
information of specific
web site
• Every web site has its own
address(URL)
• A web site is hosted on at
least one web server.

Web page
 Web page is simply a
special type of file
written in html.
1. Store in a central
computer(web server)
 Written in notepad
 Extension is .html or
.htm
 Web pages can be seen
by any one all over the
world.

Two types of web page
• Static web page
• Dynamic web page

Static web page
• Content of the static web page
doesn’t change.A static web page is
delivered to the user exactly as
stored.
• E.g.
• Help page that contain simple
information that doesn’t change
frequently.

Dynamic web page
• The content of the dynamic web
pages can change every time they are
loaded. (without you having to make
those changes)
• Dynamic web page is a kind of web
page that has been prepared with
fresh information(content and/or
layout) for each individual viewing.

Basic HTML Tools

The two basic HTML tools are:-
HTML Editor: - It is the program that is use to
create and save HTML documents. E.g: -
Notepad.
Web browser : - It is the program that is use
to view and test the HTML documents. E.g: -
Microsoft Internet Explorer.

History Of HTML
• Web pioneers (leader) Tim Berners Lee
invented HTML in 1989.
• Tim Berners Lee who worked for CERN,
the European Lab for particle physics in
Geneva, Switzerland.
• CERN researchers developed the first
world wide web program in 1990 and
began releasing program and
specification to internet users in
1991.

Tim Berners Lee developed the HTML
language to link the research papers by
using images and text, in order to save time.
The information is represented across the
world wide in an electronic form by using
computers.

Who - Tim Berners Lee
When - 1989
Where - Geneva, Switzerland.
Why - Develop the HTML language to share
information on the multiple computers at a
same time, in order to save time.

Computer in Business
Application

Marketing
So much of marketing
has gone online. Social
media marketing,
website development,
blogging, advertising, e-
newsletters have all
become fast means of
marketing in an
increasingly globalize
society.

E-learning, web-based
training and software
packages
Electronically supported
training programs are made
possible by computers.
Educational software, web
training programs and virtual
classrooms are all highly
utilized in the business world,
enabling professionals to
learn new skills advance their
careers.

Document processing
Word Processing, for
letters, manuscripts,
proposals, etc has
revolutionized the
business world. Today,
many professionals would
actually feel lost without
simple editing tools such
as spell check.

Organization
The ease with which
databases, spreadsheets and
data can be compiled on a
computer has certainly
improved the efficiency and
management practices of
businesses worldwide. Many
offices now uses computer
programs to handle
scheduling, accounting,
billing, contact management,
etc.

Design and presentation
Just a few short decades
ago, artists were still
creating business documents
by hand. The beginning of
graphic design, digital
photography and printing
technology has enabled
businesses to display
information more clearly and
artistically

Storage and retrieval
Thousands and thousands of scripts,
files, charts or other document types
can be stored on a tiny microchip. In
the old days, businesses needed file
cabinets or warehouses to store
important records and data. Today,
data management is easy, thanks to
computers and computer products
that enable businesses to organize,
store, and easily retrieve critical
information.

Financial transactions/
e-commerce
Retail purchases, credit card
transactions, automatic debits… can
all be processed over computers, and
through the internet today. Banks,
credit card companies, and other
financial institutions are some of the
best examples of computer uses in
business. E-commerce is a rapidly
growing industry, promising to
become one of the top computer
related professions in the future.

Search engines and
browsing
Computers have provided
us with instant access to
a world of information. To
stay competitive,
businesses must utilize
search engines such as
Google or yahoo to obtain
real time information and
news and research.

Communication/networking
The world may have grown
smaller in the internet age, but
only because the power of
communication has grown by
leaps and bounds. The top
computer uses in business include
e-mail communication, and
networking platforms such as
video and web conferencing,
social networking, and various
other online chat tools.

Telecommuting and remote
business

Portable laptop
computers, smart phones,
wireless internet, air
cards and hub spots are
the beckon of the future
when it comes to computer
uses in business. Today,
business can be conducted
remotely from almost
anywhere.

Introducing
The Web Technologies

• Web technologies are the techniques
using which you can access various
resources on the web.

Telnet
Telnet was developed in the beginning of
1969.
Telnet is a network protocol used on the
Internet or local area network for
accessing remote computers.
To start a Telnet session, you must have a
valid username and password.
It is a bidirectional interactive text-
oriented communications facility.
Through Telnet, an administrator or
another user can access someone else's
computer remotely.

Usenet
Usenet was developed in 1979 by two
graduate students (Tom Truscott and Jim Ellis
students of Duke University) looking for a new
way to communicate via the Internet.
That makes Usenet more than 11 years older
than the World Wide Web!
Usenet is a worldwide network of commercial
grade servers where members post and
download files and messages to more than
100,000 themed discussion groups called
“newsgroups”.
Usenet differs from e-mail in such a manner
that Usenet is one-to-many
communication whereas E-mail is one-to-one
communication.

WAIS
Wide Area Information Service
• A service used to access text databases
or libraries on the Internet. WAIS uses
simple language queries and takes
advantage of index searches for fast
retrieval.
• Unlike Gopher, which searches only the
names of Gopher resources, WAIS can
search the content of all documents
retrievable from WAIS
databases.

Bulletin Board Service
• Bulletin board service is the service
provided by the Bulletin Board
System.BBS is a software that enables
you to dial to system using a modem and a
phone line and avail various BBS services
like:-
• Creating account on internet
• Viewing the message using an account that
are sent to the account.
• Sending message to account.
• Download software and data.
• Upload data using an account.

Gopher
Gopher is a protocol that is used to search
and retrieve information, which is store on
various web sites on the internet in a
hierarchical manner. Gopher is a text menu
interface that enable you to view the
hierarchy of information using menus. The
goals of gopher are:-
– Searching a hierarchical arrangement of
information.
– Representing information in a familiar
manner to users.
– Responding quickly to a request.
– Creating an inexpensive system.

Internet Addressing
Using the internet has become so common even
among those who do not belong to the information
technology. Let us see how internet address is
written. Take example of www.google.com. In this
www stands for World Wide Web, google is the
name of the server is google and com is the
domain name.
Also www.google.com is not the actual address; it
is the text version of the internet address. Which
is basically a binary representation called IP
address. It may have a form like
197.23.202.10.

Presently we are using IP address version IPv4.
However, IPv6 is in the implementation stage.
IPv4:- IPv4 addresses are used as unique
identifiers, which works at network layer to
identify the source or destination IP packets.
Technically IP addresses are expressed using
binary notation with 32 bit long strings. In order
to make these strings asy to remember, dotted
decimal notations are used, in which dots
separate four decimal numbers from 0 to 255
representing 32 bits. As there are 32 bits
therefore each decimal number is called a
“octet”. E.g. 11000000 10101000 0001010
00011001 can be written as 192.168.1.25.

IP address classes
There are five classes as given below
•Class A- It uses 8 bits (1 Octet) for network
address and 24 bits for host id.
•Class B- it uses 16 bits for network address and
16 bits for host id.
•Class C- it uses 24 bits for network address and
8 bits for host id.
•Class D- Used for multicast addressing.
• Class E- Reserved for Scientific
research purposes.

IP classes and Range

Class Beginning Ending
Address Address
A 0 127
B 128 191
C 192 223
D 224 239
E 240 255

HTML
(Hyper Text Markup Language)
• Hyper Text – Hyper text means which contain
link to Other text.
• Markup – The ordinary text is marked with
some special symbols. Each of symbols used for
markup in HTML is a command that tells a
browser how to display the text.
• Language – Language is a key point to
remember about HTML. HTML has its own
syntax and rules for proper communication.

HTML
• It is used to create web pages. It is
not a programming language, it is a
markup language. HTML is the basic
building-block of web site.
• HTML is an official language of the
world wide web.

What is Tag?
• Tag is a container which contain HTML
commands. Tags tells the browser how
to display the content, but the browser
doesn’t display the tag.
• Tag start with a less then-sign (<) sign
and end with greater-then (>) sign.
These symbols also known as angle
brackets.
• Tags can be nested within each other.
Example - <b> <i> welcome </i> </b>

Types of Tags

1. Singular OR Empty Tag (Stand alone)
2. Paired OR Container Tag
(Companion)

1. Singular / Empty / stand-alone Tag
It has only the opening tag. There is
no need to close it.
Example: <br>
2. Paired / Container / Companion Tag
• It has both opening and closing tags.
These tags need to be closed.
• Opening tags are used to begin the
effect and closing tags are used to end
that effect.
Example: <b> bold tag </b>

What is Element?
• A complete tag, having an opening (and
its attribute) <tag> and a closing tag
</tag> is known as element.
• An element is identified by the tag.

What is Attribute?
• Element can have attribute.
• Attribute provide additional information
about element such as size, color,
alignment etc.
• An attribute is defined in a tag within
the angle bracket after the tag name.
• Each attribute has a name and a value.
• The value of each attribute is specified
after the name of the attribute and ‘ =‘
(equal sign)
• Example:<body bgcolor=“red”>-</body>

Structure OR syntax of
HTML

• Every HTML document has two main
parts: a head and a body.
• HTML also offers the chance to add
additional functional components to
the page in the form of
1. style sheets
2. scripts and
3. frame sets
• These are optional components in
the HTML document structure.

1) HTML – The <html> tag tells the
browser that this is a HTML document.
It is the root element, all other elements
are contained in this. The element has a
start tag <html> and an end tag </html>.
2) HEAD – The HEAD element includes a
variety of information for the browser,
including a title for the document, link
information and other information. All
information placed within the <head>
</head> tags is not displayed in the
browser.

• In HEAD tag we can use the
following tags:-
i. Title tag
ii. Script tag
iii. Link tag
iv. Meta tag
v. Style tag

i. Title - Defines the title of the web
page or document
ii. Link - Defines the relationship between
the current document and other
documents or resources
iii. Script – Contains (or refers to)
statements in a scripting language that
are to be processed on the client side
iv. Style - Contains CSS style information
that’s embedded into a page
v. Meta - Provides general information
about a document for indexing and
other purposes

3) BODY - The <body> element defines the
body of the HTML document. The
element has a start tag <body> and an
end tag </body>.It Includes
text,images,table,list etc along with
markup tags to define their structure
and relationship to each other.
Everything display on the web page is
written inside <body> element.

Meta Tag
• Metadata is information about data.
• The <meta> tag provides metadata about the
HTML document. Metadata will not be displayed
on the page.
• Meta elements are typically used to specify
page description, keywords, author of the
document, last modified, and other metadata.
• The <meta> tag always goes inside the head
element.
• The metadata can be used by browsers (how to
display content or reload page), search
engines (keywords), or other web services

• Example :-

• <head>
• <meta name="description" content=“Web
development" />
• <meta name="keywords“
content="HTML,CSS,JavaScript" />
• <meta name="author" content="gurchet" />
• </head>

Text Formatting Tags
• Text formatting, in html, is when you
give the browser instructions on how
your text should look. These
instructions come in the form of
tags.
• Text formatting tags tells the
browser to how to display the text on
the web page.

Text Formatting Tags
 <b>-----------------------Bold
 <i>------------------------Italic
 <u>-----------------------Underline
 <sup>---------------------Super Script
 <sub>---------------------Sub Script
 <strike>
 <blink>
 <pre>---------------------Preformatted
 <strong>
 <small>
 <big>

 <em>---------------------Emphasize
 <del>---------------------delete
 <tt>-----------------------teletype
 <blockquote>------------formatted the quoted
text
 <basefont>
 <font>

HTML Element
Block & Text
level element

HTML Elements
An element is a document of component such
As title tag, paragraph tag so on. E.g title tag is an
element of Head tag.HTML Elements are two types:-
1.Text-level elements
2.Block-level elements
1.Text-level elements: -This elements are used
effect
upon group of text and single text, word.
1.Bold tag: -This tag is used to display the text as
bold format. We can use <b>text</b> tag. It is container
a tag.
2.Italic tag: - This tag is used to display the text as
Italic format. We can use <i>text</i> tag.
It is container a tag.

3.Underline tag: -This tag is used to display
the text as underline format. We can use
<u>text</u> tag. It is a container tag.
4.Big tag: - This tag is used to change the
text font size. This text display as big size
comparison as other text size. We can use
<big>text</big> tag. It is a container tag.
5.Strike: - This tag is used to display the text as
cut format. Cut format means a line drawn in the
middle of text. We can use <strike>text</strike>
tag. It is container a tag.
6.Small tag: - This tag is used to change the
text font size. This text display as small size
comparison as other text size. We can
use <small>text</small> tag. It is a container
tag.

7.Subscript tag: -This tag is used to display
the text as subscript format. E.g H2O. In this
2 display as subscript format. We can use
<sub>text</sub> tag. It is a container tag.
8.Superscript tag: -This tag is used to display
the text as superscript format. E.g 10TH. In this
TH display as superscript format. We can use
<sub>text</sub> tag. It is a container tag.
9.Strong tag: -This tag is used to display the
text as bold format same as Bold tag. We can use
<strong>text</strong> tag. It is container a tag.
10.Em tag: - This tag is used to display the text
as Italic format same as Italic tag. We can use
<em>text</em> tag. It is container a
tag.

11.Teletype tag: - This tag is used to change
the font text that of Teletype font. This font
display as monospaced typewriter font. We can
use <tt>text</tt> tag. It is container a tag.
12. Extra tag: - All these tags works same as
Italic tag.
1. <Cite>book</cite>
Indicate that the text is from a book or other document.
2.<address>HTML</address>
This tag is used to display authors address and
other related information.
3.<dfn> definition<dfn>
Indicate that the text is a definition.
4. <var> variable</var>
Indicate that the text is a variable.

These tags are used to display data same as
small tag but small tag display data in dark
format.
5.<samp>text</samp>
Indicate that the text is a sequence of literal
characters.
6. <Code>text</code>
Indicate that the text is code.
13.Font tag: - This tag is used to change the
format of the text on the web page. If we
want to change the look of the text then we
use font tag like text size, colour, font style.
The most important attributes are
as follows:

1.Face attribute: - This attribute is used
to change the font face style(Language Style).
Like “Arial”, “Times New Roman” so on.<font
face=“Arial”>HTML</font>
2. Size attribute: - This attribute is used to
change the font size. It is range 1 to 7 and by
default size is 3.
<font size=5>Text font Size</font>
3. Color attribute: - This attribute is used
to change the font Colour style.
<font color=green>Text font Colour</font>

Block level Elements
Heading tags: -Heading tags are used to give
the heading to the text.
The font size of the heading is bigger/larger then
other normal text.
In this we can used to <h1> to <h6> Heading level.
When heading number is increase then font
size is decrease.
It is compulsory to close each heading tags.
E.g <h1> guchet.orgfree.com</h1>
Attributes of Heading tags: -
1. Align:- These attribute control the
horizontal alignment of the heading. Four
types horizontal alignments left, right,
center , justify.

E.g :- <h1 align=right> By default alignment is left.
2. <pre> tag: - This tag display the text in
exactly the same way as it typed. We can
display data with white spaces. This is a
Tab tag.
3. <Hr> tag: - This tag is used to display
horizontal line on the document. <hr> tag is used to
divide different sections to the document.
Attributes of <Hr> tags: -
1. Color:- This attribute give the colour of the
horizontal line.
2.Width:- This attribute can be specify the width
of the horizontal line.
3.Size:- This attribute is used to give
the size of the horizontal line. The
default size is 3 pixels.

4. Noshade:- This attribute renders the as an
unshaded dark gray line.
5. Align:- This attribute is used to give the
position of the horizontal line. Position are left ,
right, center. E.g :-<hr align=center>
4. Paragraph tag: - This tag is used to create
Paragraph format of a given text. We can use <p>
tag>. This is a empty tag.
Attributes: -
1.Align: - This attribute is used to give the
alignment to the Paragraph. Position are left ,
right, center.

5.Center tag: - This tag used to display the
data on the center position of the document.
<center>Text<center>
Some Special Tags
Comment tag:- Comment tag is used to attach
extra information into our program. It makes the
statement non-
Executable.
<!………………>

&nbsp ; used to give space.
&lt ; used to give less than sign (<).
&gt ;used to give greater than sign (<).
© used to give the sign of copyright(©).
¶ used to give pie symbol.
£ used to display pound symbol n web page
&sum ;used to give Summation sign (∑)
&radic ; used to give Square root sign (√)
δused to give Greek Delta sign (∆)
&reg ;used to give Registered trademark sign (®)
¼
½
¾
&
™

List
• Lists commonly are found in documents,
including web pages. They are an easy and
effective way to represent information.
• In other words, list is a collection of items
written in sequence.

Types of list
1. Ordered List
2. Unordered List
3. Definition List

Ordered List
 It is a collection of items and each item has a
number in front of it.
 Ordered list is also known as numbered list.
 <ol> tag is used to create ordered list.
 <Li> tag is used to insert items.
 <Li> stands for list item.
 Following number options are used with
ordered list
1. Plain numbers
2. Small alphabets
3. Capital alphabets
4. Capital roman numbers
5. Small roman numbers

Unordered List
• It is a collection of items and each item
has a bullet in front of it.
• <ul> tag is used to create unordered list.
• <Li> tag is used to insert items.
• Following bullet options are used with
unordered list
• Disc
o Circle
 Square

Definition List
• Definition list is set with <dl> ... </dl>
tags. Definition lists consist of two
parts:
1. A term
2. A description.
• Definition list is the container element
for dt and dd elements.
• <dt> stands for Definition Term.
• <dd> stands for Definition
Description.

Nested List
• Nested - Placing an element inside another
element is called nested.
• Nested List - Lists can be nested, meaning one
list can be placed inside of another. A nested
list, for example, can be used to create an
outline. The following shows an example of a
nested list:
• Output Device
1. Speaker
2. Printer
• Input Device
A. Keyboard
B. Mouse

HTML Colors

Color plays very important part for making
web pages. For this purpose we use different
type of color in html document. Color is the
attribute for html tags it is used to give color
for the text color and back ground color.
E.g: - <font color=“red”>text</font>
<body text=“blue”>
<body bgcolor=“green”>

Three Color methods

1.Color name
In this method we supply color name
directly when we want to give color to any
tag.
Example
<body bgcolor=’red’>
<body text=’green’>

2.hexadecimal color codes : - In hexadecimal
color code we give code of particular color in
hexadecimal formant.
Example of colors

Red #FF0000
White #FFFFFF
Black #000000
Orange #FF8040
Brown #804000
Yellow #FFFF00
Pastel Green #00FF00
Pink #FF00FF

We can create own color using hexadecimal
color Code. E.g:- #8F0011

Color Values RGB:- The combination of
Red, Green and Blue values from 0 to 255
gives a total of more than 16 million different
colors. Most modern monitors are
capable of displaying at least 16384 different
colors. Color name Color RGB
Black rgb(0,0,0)
Red rgb(255,0,0)
Green rgb(0,255,0)
Blue rgb(0,0,255)
yellow rgb(255,255,0)
cyan rgb(0,255,255)
pink rgb(255,0,255)
silver rgb(192,192,192)
white rgb(255,255,255)

Adding Graphic to
HTML Document
• The <IMG> tag is used to embed
(insert) graphics in HTML pages. They
may be embedded inside other
elements such as anchors. When
embedded inside an anchor, then the
user clicks on the image, they will go
to the designated link. The <IMG>
element has no ending tag.

Syntax of <img> tag

• <img src=“PictureName.WithExtension”>

• Example:
• <img src=“a.jpg”>

Attribute Of <img> tag
• SRC=The path and filename of the image which
specifies its location.
• ALT=This is a message displayed if the image
could not be found.
• ALIGN= Sets the image alignment.
• VSPACE=The space between the image and the
text above and below it in pixels.
• HSPACE=The space between the image and the
text to the left and right of it in pixels.
• BORDER=Sets a border of the specified width in
pixels to be drawn around the image.
• HEIGHT=The height of the image.
• WIDTH=The width of the image.

MARQUEE
• If you want your text to move with in
the screen, then you can use <marquee>
tag.
• The HTML <marquee> tag is used for
scrolling piece of text or image displayed
on your web page.

Attributes of Marquee tag
Attribute Attribute Description
Name Value
1. 1Behavior scroll Defines the type of
slide scrolling.
alternate

2 bgcolor Color name Specifies the
background color.

3 direction up Defines the direction
down of scrolling the
left content.
right

4 height pixels or Defines the height of
% marquee.

5 hspace Pixels or Specifies horizontal space
% around the marquee.

6 loop number Specifies how many times to
loop. The default value is
INFINITE, which means
that the marquee loops
endlessly.

7 scrolldelay seconds Defines how long to
delay between each
jump. This attribute
takes the time in
milliseconds
8 scrollamount number This specifies how
far the text in the
marquee should move.
9 width pixels or Defines the width of
% marquee.
10 vspace pixels Specifies vertical
space around the
marquee.

Table
• The TABLE element defines a table for
data arranged in rows and columns. Current
visual browsers will not display anything until
the complete table has been downloaded.
• A simple HTML table consists of the table
element and one or more tr, th, and td
elements.
• <TR> Stands for Table Row
• <TH> Stands for Table Heading
• <TD> Stands for Table Data
• The <Caption> tags

Name Value
1 align left Specifies the
center alignment of a table
right
2 Bgcolor Color name Specifies the
background color for a
table
3 Border Pixels Specifies the width of
the borders around a
table

4 Bordercolo Color name Specifies the color of
r the borders around a

5 cellpaddin pixels Specifies the space
g between the cell wall and
the cell content
6 cellspacin pixels Specifies the space
g between cells
7 frame void Specifies which parts of
above the outside borders that
below should be visible
hsides
lhs
rhs
vsides
box

8 Rules none Specifies which parts
group of the inside borders
s that should be visible
rows
cols
9 width all
pixels Specifies the width
% of a table
10 BorderColorDa Color Specifies the color of
rk name the border’s shadow
11 Background Path Specifies the
of background picture
pictur for a table

Attributes of the<td> & <th> of the<table>tag
Attribute Attribute Value Description
Name
Bgcolor Color name Specifies the
background
color of cell of
table
Background Path of picture Specifies the
background
picture of cell
of table
Colspan Any numeric Merge the
value column of table
rowspan Any numeric Merge the rows
value of table

Link
• Link (or hyperlink) is a word, group of
words, or image that you can click on to
jump to a new document or a new section
within the current document.
• When you move the cursor over a link in a
Web page, the arrow will turn into a little
hand.
• By default, links will appear as follows in
all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red

• Links are specified in HTML using the
<a> tag.
• Two types of link:
1. Internal link
2.External link

• Internal Link –Internal link is that
you can click on to jump to a new
section within the current document.
• In other words, an internal link allows
you to link to another section on the
same web page.
• So, it basically scrolls the page up or
down to the desired location. This is
helpful to the user to quickly jump to
the information he/she is looking for.

• External Link –

• External HTML links are those HTML
links that go to another Web site or a
new page.

Image Map
• Image map is an image where you can
click on the particular area of image and
redirect to another page.

• <img src=“path of pic” usemap="#a">
• <map name=a>
• <area href=“destination" shape="rect"
coords=“4 coordinates">
• </map>

Usemap attribute: - This attribute takes the
name of image. usemap attribute create link
between map tag and image tag.
<img src=“sunset.jpg” usemap=“#vmc”>
Usemap tag is used to # symbol.

Frame
• With frames, you can display more than
one HTML document in the same
browser window.
• Frames allow you to divide the page into
several rectangular areas and to display
a separate document in each rectangle.
Each of those rectangles is called a
"frame". the others.

• <Frametset> element
• The frameset element holds one or
more frame elements. Each frame
element can hold a separate document.
• <frame> element
• The <frame> tag defines one particular
window (frame) within a frameset.

Attribut Attribute Description
e Name Value
cols column size Specifies the number of
columns and their width
in either pixels,
percentages, or relative
lengths. Default is 100%
rows row size Specifies the number of
rows and their height in
either pixels,
percentages, or relative
lengths. Default is 100%

Attribute of <frame> tag
Name Value
name frame name Name of the frame

noresize noresize When set to
noresize the user
cannot resize the
frame.

scrolling yes Determines
no scrollbar
auto action

src URL Location of
the frame
contents file

IFRAME
• An iframe is used to display a web
page within a web page. OR
• The HTML <iframe> tag is used to
create an inline frame.

Attribute of <iframe> tag
Name value
src URL Location of the
(address) frame contents file

align left Specifies how to
right align the iframe
bottom according to the
top surrounding text
middle

align left Specifies how to align
right the iframe according to
bottom the surrounding text
top
middle

frameborder 0 or 1 Specifies whether or
not to display border
around the frame.
height pixels or Specifies the height of
% the inline frame.
pixels or Specifies the width of
Width % the inline frame.

name frame name Name of the
frame

scrolling yes Determines
no scrollbar
auto action

Form
• An HTML form is used to pass data
to a server.
• The <form> tag is used to create an
HTML form for user input.

• How does an HTML form work?
• A web form has two parts:
• Front End
• Back End
• the HTML ‘front end’ and a back end
form processor. The HTML front end
part handles the presentation while the
back end handles the form submissions
(like saving the form submissions,
sending emails etc).
The back end form processor script is
usually written in languages like
PHP, ASP.

The image below
illustrates the concept:

1. A visitor visits a web page that contains a
form.
2. The web browser displays the HTML form.
3. The visitor fills in the form and submits
4. The browser sends the submitted form data
to the web server
5. A form processor script running on the web
server processes the form data
6. A response page is sent back to the
browser.

• <input> tag
• <textarea> tag
• <select> tag

Name Value
Type Text Specifies the type of
Password <input> element
Radio
Checkbox
Button
Submit
Reset
file
hidden
Text
image Specifies the value of an

Explain the prologue and its
use in HTML document.
• The prologue appears at the beginning of
every HTML page, identifies what follows as
an HTML document allowing browsers and
other special software to distinguish HTML
documents from other types (DTDs) of
SGML(STANDARD GENERALISED
MARKUP LANGUAGE).
• All HTML documents written according to
the current HTML specification
(Version 4.01) should use the
prologue tag displayed ahead.

• <!DOCTYPE HTML PUBLIC "-//W3C//
DTD HTML 4.01 Transitional//EN" >
1. HTML - The SGML document type being
declared: <HTML> ... </HTML>
2. PUBLIC - Identifies the information in quotes as a
Formal PUBLIC Identifier.
3. "-"-The minus sign designates unregistered
organization. ISO, registered (+) or unregistered
(-) are possible here. W3C is not currently
registered with ISO, therefore the (-) is used.
4. W3C - identifies the party responsible for
creation/maintenance of the DTD. If the DTD
comes from IETF, W3C, etc. you'll see
their ID here.

5. DTD - describes the type of object, called
a Public Text Class. In this case, it is a DTD.
6. HTML 4.01 Transitional - is the Public
Text Description. Here you'll find the
DTD's name, plus flavors such as version
numbers, "strict", "draft," "transitional,"
etc.
7. EN - identifies the Public Text Language,
describing the natural language in which the
public text is written, represented by two,
uppercase-only characters from
ISO 639. "EN"= English.

What is CSS?
• CSS stand for the term "Cascading
Style Sheets".
• CSS was first developed in 1997
• CSS defines how to display the content
contained in markup and is stored in style
sheets.
• Style sheets give you greater control over
the presentation of your web documents.
• Using style sheets, you can specify many
stylistic attributes of your web
page, such as text color, margins, and
font sizes, font weights and more.

Types of Style Sheet
• There are 3 different types of
style sheets:
1. In-Line Style Sheet
2. Internal Style Sheet
3. External Style Sheet

CSS of Syntax
• Learn how to write a cascading
style sheet style.
• A CSS style has the syntax:
• Selector
• {
• property : value ;
• }

CSS Selectors
• Selectors are the way that you define
what is going to be styled and what
isn't.

• There are three basic types of
selectors:
• Type selectors
• Class selectors
• Id selectors

• Type selectors
That select a specific tag to style
• Class selectors
That select elements with an assigned class
• Id selectors
That select the element on the page with
that specific ID
Grouping CSS Selectors
• You can apply the same style to
multiple selectors through grouping.

What is a Comment?
• A comment is a string of code within HTML
and CSS that is not viewed or acted upon by
the browser or parser. It is simply in the
code to provide information about the code
or other feedback from the code developers.
• An HTML comment begins with "" and does not contain "--" or ">"
anywhere in the comment.
• 
•

CSS Comments
• You can also comment CSS to provide
information for future designers or just
remind yourself what you meant when you
built the styles.
• These are added to the HEAD of a
document inside STYLE tags:
• <style>

</style>

In-line Stylesheet
• In in-line stylesheet, the style attribute is used
directly define the style for a particular tag.
• By using style attribute in each tag we can
define its style.
• Inline style sheet is a term that refers to style
sheet information being applied to the current
element.
• By this, we mean that instead of defining the
style once, then applying the style against all
instances of an element.
• <P style="font-size: x-large; color:
#ff9900">
• Using inline style sheets </p>

Internal Style sheets.
• An Embedded Style sheet resides in-
between the <head> </head> tags.
• The declarations are positioned between
<style> </style> tags.
• Embedded style sheets are only
connected to the page, and can not be
used by another file like External Style
sheets can.
• You can list as many declarations as you
wish, but it is recommended that if you
have a long list ,that you use an
external style sheet as a matter of
organization.

• <head>
• <style>
• body { background: #white; color: black }

• p { background: #white; text-align: left;
color: #444; font-size: 12px; font-family:
• Arial }
• h1 { color: #000000; text-align: center}
• </style>
• </head>

External Stylesheets
• External style sheets are the most flexible
because they allow you to assign the same
styles to multiple Web pages. You can
attach external style sheets in this ways:
• <link rel="stylesheet" type="text/css"
href="styles.css" />

It has a number of advantages
over in-line style sheets.
1.They reduce the amount of code on
the individual HTML page because
you no longer need an in-line style
sheet.
2.Many HTML pages can link to a single
external style sheet meaning it is
quick and easy to apply the same
styles across a whole website.

• Below we can see an example of a small external
style sheet:
• h1
• { color: #C3E7FF;
• letter-spacing: 2px;
• background-color: transparent;
• }
• .msgTitle
• {
• background: #FFFFCC;
• color: black;
• font-size: 10pt;
• font-weight: bold;
• }

• This is assuming that your style-sheet is
called ‘stylesheet.css’ and is in a folder in
the root directory of your site called
‘Styles’.
• This link is placed in the <HEAD> of the
page. To link to it from points within your
page, you use the same process as before
for in-line style-sheets.

• JavaScript is THE scripting language of
the Web.
• JavaScript is used in billions of Web pages
to add functionality, validate forms,
communicate with the server, and much more
• The name JavaScript is owned by Netscape
• Microsoft calls its version of the language
JScript.
• The generic name of the language is
Ecma Script.

What is JavaScript?
• JavaScript is a programming language that is
used to make web pages interactive.
• It runs on your computer and so does not
require constant downloads from your web
site.
• Java script is mostly used in websites
because mostly browser understands java
script.
• JavaScript can also be used to tie together
different web based environments like
HTML, plug-ins, and Java.

Are java and java
script same?

Are Java and JavaScript
the same?

• NO! Java and JavaScript are two
totally different languages in both
idea and design

First program of
java script

How to Put a JavaScript
into an HTML page
• First make this program then understand line by
line.
• <html>
<body>
<script>
document.write("Hello my name is navjeet");
</script>
</body>
</html>
• The document.write command is a regular
JavaScript command for writing output to a page.
• It works like printf and cin>> remind c or c++.

JavaScript Comments
• Comments are dead line and use for making
code readable .it also help to solve error
problems. And make program easy to learn.
Comments are two types .
1. single line comment
2. multi line comment
• Single line comments
• <script>
// Write a country name
document.write("<h1>INDIA</h1>");
// Write COMPANY NAME
document.write("<p>INFOSYS.</p>");
</script>

Multi-Line Comments
• <script >
/*
this is my
company data
*/

JavaScript Variables
• Variable are used to give temp name to assign
variable name in memory.JavaScript variables
are used to hold values or expressions.
• A variable can have a short name, like x, or a
more expressive name, like product_id.
• Rules for JavaScript variable names:
• Variable names are case sensitive (B and b are
two different variables)
• Variable names must begin with a letter or
the underscore character
• No number values are used as a first char
when assign variable.
• No Keyword or reserve word are used
as variable name.

How to Declaring
(Creating) JavaScript Variables
• Creating variables in JavaScript is most
frequently referred to as "declaring" variables.
• JavaScript variables are declared with the var
statement:
• var car;
var age;
• However, you can also assign values to the
variables when you declare them:
• var age=29;
var car=“Audi";
• After the execution of the statements above,
the variable age will hold the value 29,
and car will hold the value Audi.

Arithmetic operators
• Operator Description
• + Addition
• - Subtraction
• * Multiplication
• / Division
• % Modulus
• ++ Increment
• -- Decrement

Relational Operators
• == Equal
• != Not Equal
• < Less Than
• <= Less than or Equal to
• > Greater Than
• >= Greater than or Equal to

Logical operators
• && Logical And
• || Logical Or
• ! Logical Not

Assignment Operators
• = Equal to

Conditional Statements
• Very frequently when you write code, you want to
perform different actions for different decisions. You
can use conditional statements in your code to do this.
• In JavaScript we have the following conditional
statements:
• if statement - use this statement to execute some
code only if a specified condition is true
• if...else statement - use this statement to execute
some code if the condition is true and another code if
the condition is false
• if...else if....else statement - use this statement to
select one of many blocks of code to be executed
• switch statement - use this statement to select one of
many blocks of code to be executed

If Statement
• Use of if statement to execute some code
only if a specified condition is true.
• Syntax
• if (condition)
{
code to be executed if condition is true
}
• Note that if is written in lowercase
letters. Using uppercase letters
(IF) will generate a JavaScript error!

If...else Statement
• Use the if....else statement to execute some
code if a condition is true and another code if
the condition is not true.
• Syntax
• if (condition)
{
code to be executed if condition is true
}
else
{
code to be executed if condition is
not true
}

If...else if...else Statement
• Use the if....else if...else statement to select one of
several blocks of code to be executed.
• Syntax
• if (condition1)
{
code to be executed if condition1 is true
}
else if (condition2)
{
code to be executed if condition2 is true
}
else
{
code to be executed if condition1 and
condition2 are not true
}

The JavaScript Switch
Statement
• Use the switch statement to select one of many blocks of
code to be executed.
• Syntax
• switch(n)
{
case 1:
execute code block 1
break;
case 2:
execute code block 2
break;
default:
code to be executed if n is different from
case 1 and 2
}

JavaScript Loops
• Often when you write code, you want the
same block of code to run over and over
again in a row. Instead of adding several
almost equal lines in a script we can use
loops to perform a task like this.
• In JavaScript, there are two different
kind of loops:
• for - loops through a block of code a
specified number of times
• while - loops through a block of code while
a specified condition is true

The for Loop
• The for loop is used when you know in
advance how many times the script should
run.
• Syntax
• for
(var=startvalue;var<=endvalue;var=var+increment)
{
code to be executed
}

The while Loop
• The while loop is executed when the
condition is true then block of code is
executed when the condition is false the
loop will terminate.
• Syntax
• while (var<=endvalue)
{
code to be executed
}
• Note: The <= could be any comparing
statement.

The do...while Loop
• The do...while loop is a variant of the while
loop. This loop will execute the block of
code ONCE, and then it will repeat the
loop as long as the specified condition is
true.
• Syntax
• do
{
code to be executed
}
while (var<=endvalue);

JavaScript Popup Boxes
• Three types of popup boxes
1. Alert box
2. Confirm box
3. Prompt box

Alert Box
• An alert box is often used if you
want to make sure information comes
through to the user.
• When an alert box pops up, the user
will have to click "OK" to proceed.
• Syntax
• alert("write some text here");

Confirm Box
• A confirm box is often used if you want
the user to verify or accept something.
• When a confirm box pops up, the user will
have to click either "OK" or "Cancel" to
proceed.
• If the user clicks "OK", the box returns
true. If the user clicks "Cancel", the box
returns false.
• Syntax
• confirm("write text here");

Prompt Box
• A prompt box is often used if you want the
user to input a value before entering a
page.
• When a prompt box pops up, the user will
have to click either "OK" or "Cancel" to
proceed after entering an input value.
• If the user clicks "OK" the box returns
the input value. If the user clicks "Cancel"
the box returns null.
• Syntax
• prompt("sometext","defaultvalue");

Array
• The array elements are accessed by
an index value. The elements are
stored in a contiguous memory, the
first element of an array starts
from the 0th index. In java,an array
is object it has various properties.
• Syntax
• Arrayname = new Array(size)

Example of Array
• <script>
• var a,b
• a=new Array(5)
• a[0]="Gagan"
• a[1]="Summar"
• a[2]="Sony"
• a[3]=11
• a[4]=91
• for(i=0;i<5;i++)
• document.write(a[i]+"<br>");
• </script>

Dense array
• Dense array is a special type of array in which the
declaration and initialization is done at the same
time

• Syntax
• Arrayname=new Array(value0,value1,…………..valuen)
• Example of Dense Array
• <script type="text/javascript">
• var a,b
• a=new Array("Gagan","summar","sharan",6,7)
• for(i=0;i<5;i++)
• document.write(a[i]+"<br>");
• </script>

Array is an object and it
provides several methods.
• 1 join() The join method joins all
elements of an array as a single string.
• 2 Reverse() This method reverse the
order of array elements.
•
• Properties of an array
• Array provides properties. A property
identifies the state of an object
• Length The length property returns the
numbers of elements in an array.

Examples of join
• <script>
• var a
• a=new Array(10)
• for(i=0;i<10;i++)
• a[i]=prompt("Enter elements")
• b=a.join()
• document.write(b);
• </script>

Example oh reverse()
• <script>
• var a,b
• a=new Array(5)
• a[0]="Gagan"
• a[1]="Summar"
• a[2]="raj"
• a[3]=83
• a[4]=85
• b=a.reverse()
• </script>

Example of length
• <script>
• var a,b
• a=new Array(5)
• a[0]="Gagan"
• a[1]="Sonu"
• a[2]="Summar"
• a[3]=67
• a[4]=89
• b=a.length
• </script>

JavaScript Functions
• Methods allow the user to perform some
actions.
• A function contains code that will be executed
by an event or by a call to the function.
• You may call a function from anywhere within a
page (or even from other pages if the function
is embedded in an external .js file).
• Functions can be defined both in the <head> and
in the <body> section of a document.
• However, to assure that a function is read/
loaded by the browser before it is called. It
could be wise to put functions in the
<head> section.

Types of function
1. Predefined or library functions
2. User defined function

Predefined function
• These functions are already defined
in java script for example
• parseInt()
• parseFloat()
• Write() etc.

• <script>
• function color()
• {
• document.bgColor="#"+(Math.random()*255)
• }
• setInterval("color()",1000)
• </script>

Document Object Model
• It is a set of objects about windows and
related things on the screen. The use of
the word object comes from object-
oriented programming. These objects
have
1. Properties
2. Methods
3. Events

Properties
• Properties are pieces of data about the
object.
• JavaScript objects provide some
properties.
• Properties allow the user to change
JavaScript settings.
• To use a property of an object one needs to
prefix the property with the object-name
followed by dot (.)
• For example, A array object has a
length property.

Method or Function
• A method tells an object what to do.
• For example, A Array has a reverse()
method, which you use reverse the
order of array elements.
• There are hundreds of methods
available in JavaScript.
• Methods allow the user to perform
some actions.
• For that one only need to know
the method calling syntax.

Event
• Events are the actions which tells the
browser that something can happen to an
object.
• Events provides various event handlers.
• When the event occurs, event handler
executes.
• Browser informs JavaScript code about
events that happen during its activity using
events.
• The values of these attributes are
JavaScript code

The DOM Hierarchy
• These objects come in a hierarchy
which is like this:

The document object
• It represents the actual content
displayed in the browser window.

• For example –

• <script>
• document.bgColor="yellow";
• document.write("This is some <b>bold
text</b>");
• </script>

Location object
• The location object holds information about the
URL (uniform resource locator) of the server
that sent the web page.
• The href property, which is simply the URL of the
server.
• Example
• <script>
• location.href="http://www.google.com/";
• </script>
• Immediately switches to google.
• You can use it to re-direct from one URL to
another, newer site.

String object
• Every string in java script is an object.
• It has number of properties, method which helps
to perform a variety of manipulation on a given
string. Methods.
• Example.
• <script>
• var a="Jackie Chan"
• document.write(a+"<br>")
• document.write(a.big()+"<br>")
• document.write(a.bold() + "<br>");
• document.write(a.fontcolor("red") + "<br>");
• </script>

Math Object
• The math object provides the methods and
properties offered by arithmetic operators.

• Methods Description

• abs() Calculates the absolute value of anumber
• ceil() Returns the next integer greater than
or equal to a number
• floor() Returns the next integer less than or
equal to a number
• pow() Calculates the value of one number to
the power of another number
• Sqrt() Calculates the square root of a number.

• Example
• <script>
• document.write(Math.abs(-15))
• document.write(Math.ceil(15.45))
• </script>

• Ans:
• 15
• 16

Date Object
• The date object enables javascript
programmers to create an object that
contains information about a particular
date and provides a set of methods to
work with that information.
• To create an instance of the object, use
the keyword new as follows.
• Var my_date= new Date(parameters);

Events
• Every element on a web page has certain events
which can trigger a JavaScript.
• For example, we can use the onClick event of a
button element to indicate that a function will
run when a user clicks on the button.
• We define the events in the HTML tags.
• onBlur – This event fires when an element loses
the input focus
• onChange – It fires when data in an HTML
control changes (It includes text fields,
buttons, lists, etc).
• onClick – It executes when an element is
clicked.

• onFocus – It happens when an element gets
the focus
• onLoad – It executes when the page first loads
in the browser.
• onMouseOut – It happens when mouse out from any
control HTML element.
• onMouseOver – It happens when mouse
cursor moves over an element.
• onReset – It happens when the user clicks
the Reset button in an HTML form.
• onSelect – It happens when the user makes
a selection.
• onSubmit – It happens when the user clicks
the Submit button in an HTML form.
• onUnload – It happens the browser
unloads a page.

JavaScript Form Validation
• JavaScript can be used to validate data in
HTML forms before sending of the content
to a server.
• Form data that typically are checked by a
JavaScript 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?

What is a Cookie?
• A cookie is a variable that is stored on the
client computer. Each time the same
computer requests a page with a browser,
it will send the cookie too. With
JavaScript, you can both create and
retrieve cookie values.
• Name cookie
• Password cookie
• Date cookie

Web tehnology

More Related Content

What's hot (20)

Viewers also liked (9)

Similar to Web tehnology (20)

Recently uploaded (20)

Web tehnology