http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Web!Technology!
PGDCA!2!First!Semester !
!

2
2
2

Kantipur!City!College!
Affiliated)to)Purbanchal)University

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

CHAPTER!01!!INTRODUCTION
!
BASICS&of&INTERNET&

The!Internet!is! a! global! system! of! interconnected!computer! networks!that! use! the! standard!Internet!

protocol! suite!(TCP/IP)! to! serve! several! billion! users! worldwide.! It! is! a!network& of& networks!that!
consists!of!millions!of!private,!public,!academic,!business,!and!government!networks,!of!local!to!global!
scope,! that! are! linked! by! a! broad! array! of! electronic,! wireless,! and! optical! networking! technologies.!
The! Internet! carries! an! extensive! range! of! information! resources! and! services,! such! as! the! interB
linked!hypertext! documents! of! the!World! Wide! Web!(WWW),! the!infrastructure!to! support! email,!
and!peerBtoBpeer!networks.!

Who&Owns&the&Internet?&
No! one! actually!owns! the! Internet,! and! no! single! person! or! organization! controls! the! Internet! in! its!
entirety.!The!Internet!is!more!of!a!concept!than!an!actual!tangible!entity,!and!it!relies!on!a!physical!
infrastructure!that!connects!networks!to!other!networks.!

Is&Web&and&Internet&the&Same?&
The&Internet!is!not!synonymous!with!World&Wide&Web.!The!Internet!is!a!massive!network!of!networks,!
a!networking!infrastructure.!It!connects!millions!of!computers!together!globally,!forming!a!network!in!
which!any!computer!can!communicate!with!any!other!computer!as!long!as!they!are!both!connected!to!
the!Internet.!The!World!Wide!Web,!or!simply!Web,!is!a!way!of!accessing!information!over!the!medium!
of!the!Internet.!It!is!an!informationBsharing!model!that!is!built!on!top!of!the!Internet.!
!
CLIENT&
The! term! client! machine! refers! to! a! user's! computer! that! is! connected! to! a! network! and! accesses!
another!computer,!called!a!server,!to!request!various!kinds!of!resources,!to!save!data!or!to!run!certain!
programs!or!perform!certain!functions.!Sometimes!the!term!"client"!is!used!interchangeably!with!client!
machine,!but!client!is!a!less!specific!term!that!can!also!refer!to!a!computer!application!rather!than!an!
actual!computer.!The!client!machine!is!sometimes!called!the!requesting!machine,!because!it!requests!
files!or!other!data!from!a!server,!sometimes!called!the!supplying!machine.!A!client!computer!usually!
has! a! user! interface! that! is! supplied! by! the! client! operating! system,! for! example! Unix,! Windows! or!
Linux.!Different!kinds!of!networks!can!be!used!to!connect!a!client!to!a!server,!for!example!a!local!area!
network!(LAN)!or!wide!area!network!(WAN).!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

!
A!fat!client,!also!known!as!a!thick!client!or!rich!client,!is!a!computer!in!a!client!server!configuration!that!
can!function!independent!of!the!server.!Many!applications!are!installed!locally!on!the!client!hard!drive.!
While! a! fat! client! pulls! some! data! from! the! central! server! and! needs! to! be! connected! to! the! server!
sometimes,!it!can!run!on!its!own,!without!having!to!always!be!connected!to!the!central!server.!
!
A!thin!client!refers!to!either!a!software!program!or!to!an!actual!computer!that!relies!heavily!on!another!
computer!to!do!most!of!its!work.!It!operates!as!part!of!a!network,!with!the!client!software!or!computer!
acting! as! an! interface! and! the!network! server!computer! doing! all! the! real! work,! like! saving! files,!
processing!data,!and!controlling!certain!functions!of!the!clients,!like!whether!they!can!download!things!
or! not.! This! type! of! setup! is! commonly! used! in! places! with! lots! of! people! simultaneously! using!
computers,!like!businesses!or!schools.!Though!this!system!is!often!easier!to!maintain!and!use,!it!also!
has!some!downsides,!including!the!lack!of!peripherals!and!limited!performance.!

WEB CLIENT
A! client! is! a!computer! application,! such! as! a! web! browser,! that! runs! on! a!user's!
local!computer!or!workstation!and! connects! to! a!server!as! necessary.! Operations! may! be! performed!
clientBside!because!they!require!access!to!information!or!functionality!that!is!available!on!the!client!but!
not! on! the! server,! because! the! user! needs! to! observe! them! or! provide! input,! or! because! the! server!
lacks!the!processing!power!to!perform!the!operations!in!a!timely!manner!for!all!of!the!clients!it!serves.!
Additionally,!if!operations!can!be!performed!by!the!client,!without!sending!data!over!the!network,!they!
may!take!less!time,!use!less!bandwidth,!and!incur!a!lesser!security!risk.!

A!web& browser!or!Internet& browser!is! a!software! application!for! retrieving,! presenting,! and! traversing!

information! resources! on! the!World! Wide! Web.! An!information& resource!is! identified! by! a!Uniform! Resource!
Identifier!(URI)!and!may!be!a!web!page,!image,!video,!or!other!piece!of!content!Hyperlinks!present!in!resources!
enable!users!to!easily!navigate!their!browsers!to!related!resources.!

In&order&of&release:!

! Netscape!Navigator!and!Netscape!Communicator,!October!13,!1994!
! Internet!Explorer!1,!August!16,!1995!
! Opera,!1996!
! Mozilla!Navigator,!June!5,!2002!
! Safari,!January!7,!2003!

! Mozilla!Firefox,!November!9,!2004!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

! Google!Chrome,!September!2,!2008!

SERVER&

1)! In! information! technology,! a! server! is! a! computer!program!that! provides! services! to! other!
computer!programs!(and!their!users)!in!the!same!or!other!computers.!

2)!The!computer!that!a!server!program!runs!in!is!also!frequently!referred!to!as!a!server!(though!it!
may!be!used!for!other!purposes!as!well).!

3)!In!the!client/server!programming!model,!a!server!is!a!program!that!awaits!and!fulfills!requests!
from!client!programs! in! the! same! or! other! computers.! A! given! application! in! a! computer! may!
function! as! a!client!with! requests! for! services! from! other! programs! and! also! as! a!server!of!
requests!from!other!programs.!

Specific! to! the! Web,! a!Web! server!is! the! computer! program! (housed! in! a! computer)! that! serves!
requested!HTML!pages! or! files.! A! Web!client!is! the! requesting! program! associated! with! the! user.! The!
Web!browser!in!your!computer!is!a!client!that!requests!HTML!files!from!Web!servers.!

Web&Servers&
A! Web!server!is! a! program! that,! using! the!client/server!model! and! the! World! Wide! Web's! Hypertext!
Transfer!Protocol!(HTTP),!serves!the!files!that!form!Web!pages!to!Web!users!(whose!computers!contain!
HTTP! clients! that! forward! their! requests).! Every! computer! on! the! Internet! that! contains! a! Web! site!
must!have!a!Web!server!program.!Two!leading!Web!servers!are!Apache,!the!most!widely!installed!Web!
server,!and!Microsoft's!Internet!Information!Server!(IIS).
!
Web!servers!are!computers!that!deliver!(serves&up)!Web!pages.!Every!Web!server!has!an!IP!address!and!possibly!
a!domain!name.!Web!servers!are!computers!on!the!Internet!that!host!websites,!serving!pages!to!viewers!upon!
request.! This! service! is! referred! to! as!web! hosting.! Every! web! server! has! a! unique! address! so! that! other!
computers!connected!to!the!Internet!know!where!to!find!it.!The!Internet!Protocol!(IP)!address!looks!something!
like! this:! 69.93.141.146.! This! address! maps! to! a! more! human! friendly! address,! such! as!
http://www.sarojpandey.com.np.!Web!hosts!rent!out!space!on!their!web!servers!to!people!or!businesses!to!set!
up!their!own!websites.!The!web!server!allocates!a!unique!website!address!to!each!website!it!hosts.!
! !
For& example,! if! you! enter! the!URL!http://www.sarojpandey.com.np/index.html!in! your!browser,! this! sends! a!
request! to! the! Web! server! whose! domain! name! is!sarojpandey.com.np.! The! server! then! fetches! the! page!
named!index.html!and!sends!it!to!your!browser.!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

!
Any! computer! can! be! turned! into! a! Web! server! by! installing! server!software! and! connecting! the! machine! to!
the!Internet.!Two! leading! Web! servers! are!Apache,! the! most! widely! installed! Web! server,! and! Microsoft's!
Internet!Information!Server!(IIS).!!

Apache&HTTP&Server&FREE&&&Open&Source&&

Apache!HTTP!Server!(also!referred!to!as!simply!"Apache")!has,!at!the!time!of!writing,!been!the!most!popular!
web! server! on! the! web! since! 1996.! Apache! is! developed! and! maintained! by! the! Apache! Software!
Foundation,! which! consists! of! a! decentralized! team! of! developers.! The! software! is! produced! under! the!
Apache!license,!which!makes!it!free!and!open!source.!Apache!is!available!for!a!range!of!operating!systems,!
including!Unix,!Linux,!Novell!Netware,!Windows,!Mac!OS!X,!Solaris,!and!FreeBSD.!

Microsoft&Internet&Information&Services&(IIS)!(Proprietary)&

IIS!is,!at!the!time!of!writing,!the!second!most!popular!web!server!on!the!web.!It!is!however,!gaining!market!
share,!and!if!the!current!trend!continues,!it!won't!be!long!before!it!overtakes!Apache.!

IIS! comes! as! an! optional! component! of! most! Windows! operating! systems.! You! can! install! IIS! by! using!
Add/Remove&Windows&Components!from!Add&or&Remove&Programs!in!the!Control!Panel.!

Selecting&a&Web&Server&

There!are!several!points!to!consider!when!selecting!a!web!server.!Web!servers!with!consistent!records!
of!an!uptime!of!99.5%!or!better!are!considered!reliable.!The!more!powerful!the!server,!the!faster!it!can!
serve! up! website! pages.! Slower,! smaller! servers! may! result! in! frustrating! lag! time! for! viewers.! High!
traffic!can!also!slow!servers!that!are!not!powerful!enough!to!handle!high!volumes!of!data!exchange.!
This!lag!time!should!be!a!concern!for!anyone!who!is!shopping!for!a!web!host.!

In!theory,!web!servers!stay!connected!to!the!Internet!24!hours!a!day,!seven!days!a!week,!365!days!a!
year.!In!truth,!they!experience!occasional!downtime!due!to!maintenance!and!technical!problems.!!
!
How&a&website&is&accessed?&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

&
Every!website!on!the!Internet!has!a!unique!address!that!users!can!type!in!to!access!it!from!a!browser.!
Youre!probably!used!to!seeing!these!addresses!written!like!www.google.com.!These!are!called!domain&
names.!
Have!you!ever!wondered!how!typing!that!domain!name!in!your!browser!bar!actually!gets!you!to!a!
website?!Basically,!this!is!what!happens:!
!
1. The! browser! uses! your! unique! domain! name! (yourdomain.com)! to! search! for! the!
associated!IP!address.!
2. The!browser!finds!the!server!with!that!IP!address,!specifically,!your!user!account!on!that!server.!
3. The!browser!looks!for!the!index!file!in!your!public!directory.!

4. The!browser!displays!this!index!file!and!your!homepage!!

!
IP&Addresses&
Every! computer! connected! to! the! Internet! has! an!IP!(or! Internet! Protocol)! addressthe! address! that!
other!computers!can!read!to!figure!out!where!to!send!information!and!where!its!coming!from.!To!find!
your! own,! search! Google! for! what! is! my! IP?Itll! return! your! specific!IP!address! atop! the! search!
results,!and!look!something!like!this:!123.45.67.890.!Think!of!this!number!like!your!address!at!home:!
!
Sand&Mine&Street,&My&Apartment&&
Kapan,&Kathmandu,&Nepal,&44600.&
!
Each!of!the!different!parts!of!that!address:!street,!town,!city,!etc.!help!the!deliveryman!find!your!house.!
An!IP!address!does!the!same!for!Internet!traffic.!If!you!knew!the!specific!IP!address!of!the!server!you!
were!trying!to!access,!you!could!get!to!a!website!by!typing!in!just!the!IP!address.!This!is!great!for!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

computers,!but!it!would!be!hard!for!you!and!I!to!remember!all!of!the!numbers!of!our!favorite!websites.!
This!is!why!we!have!domain!names.!
!
Domain&Names&and&DNS&
Domain!names!are!basically!easyBtoBremember!shortcuts!to!numeric!IP!addresses.!So!when!you!type!in!
yourname.com,!your!browser!really!wants!to!connect!to!the!associated!numeric!IP!address.!DNS,!the!
Domain! Name! System,! is! what! connects! the! humanBpreferred! domain! names! with! the! computerB
preferred!IP!addresses.! You! can! think! of!DNS!as! a! giant! database! that! just! connects! domains! to!
addresses! all! day! long.!This! all! happens! in! milliseconds,! but! this! is! how! every! web! page! is! actually!
served!to!youthe!end!user.!So!practically,!you!need!a!domain!name!if!youre!going!to!have!a!website.!

Registering&a&domain&name&

You! probably! want! to! purchase! a! domain! name! from! a! registrar! so! that! people! can! type! in!
yourname.com!instead!of!a!long!string!of!numbers!to!access!your!website.!First!you!need!to!find!a!
unique!domain!name!that!isnt!being!used!by!somebody!else.!!
!
After!you!decide!on!a!name!youll!have!to!purchase!it!from!a!registrar,!or!look!for!a!hosting!provider!
that!can!do!it!for!youmany!hosts!offer!this!as!part!of!your!hosting!account!package.!If!youre!new!to!
this,!I!recommend!letting!your!host!take!care!of!it!for!you!so!you!dont!have!to!worry!about!getting!it!
set!up!right.!

(Note&that&you&can&always&transfer&your&domain&between&registrars&and&hosts&in&the&future,&so&
dont&feel&locked&in&if&you&just&want&to&go&for&the&easiest&solution&now.)&
!
So!when!you!type!in!your!domain!name,!its!going!to!point!you!to!the!IP!address!of!a!server!computer!
somewhere,!meaning!youll!need!some!server!space!too.!

Hosting&&&Servers&

A!server!is!a!special!type!of!computerdifferent!from!your!own!in!two!major!ways.!First,!its!always!
powered! on.! Second,! its! always! connected! to! the! Internet.! Specifically,! its! always! connected! to!
the!same!IP!address!so!that!other!computers!can!always!find!it.!
!
When!you!sign!up!for!shared!hosting!(youll!probably!want!that!to!get!startedits!the!cheapest!and!
easiest! to! set! up),! you! are! paying! a! hosting! company! for! a! certain! amount! of! space! on! that! specific!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
 http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

server,!and!they!also!set!up!all!the!behindBtheBscenes!stuff!that!makes!that!domain!find!your!specific!
account!on!the!server.!

Your&specific&hosting&account&

So!on!a!shared!hosting!account,!you!and!lots!of!other!people!are!sharing&the!same!server.!When!the!
hosting! company! sets! up! your! account! what! youre! actually! getting! when! you! type! in!
yourdomain.com!is!not!just!the!IP!address!of!the!server,!its!a!specific!folder!on!that!serverwell!call!
that!your!root&directory.!
!
In!order!for!people!to!see!your!site!online,!you!need!to!make!sure!you!have!all!of!your!website!files!
where!they!need!to!be!inside!of!this!root!directory!for!your!site!to!work.!99%!of!the!time,!on!a!shared!
hosting! account! youre! going! to! want! to! put! your! website! files! in! a! folder! called! public_html.! The!
browser!will!automatically!be!looking!in!this!folder!for!a!file!with!the!name!of!index,!specifically!in!
our!case,!index.html.!

So&to&recap&

When!a!visitor!types!in!yourdomain.com,!this!is!what!happens:!

1. The! browser! uses! your! unique! domain! name! (yourdomain.com)! to! search! the!DNS!for! the!
associated!IP!address!
2. The!browser!finds!the!server!with!that!IP!address,!specifically,!your!user!account!on!that!server!
3. The!browser!looks!for!the!index.html!file!in!your!public_html!directory.!

4. The!browser!displays!this!index!file!and!your!homepage!!

! !

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

TCP/IP&Protocol&

Protocols are sets of rules for message formats and procedures that allow machines
and application programs to exchange information. These rules must be followed by
each machine involved in the communication in order for the receiving host to be
able to understand the message.

TCP/IP (Transmission Control Protocol/Internet Protocol) is the basic communication language

or protocol of the Internet. It can also be used as a communications protocol in a private
network (either an intranet or an extranet). When you are set up with direct access to the
Internet, your computer is provided with a copy of the TCP/IP program just as every other
computer that you may send messages to or get information from also has a copy of TCP/IP.

TCP/IP uses the client/server model of communication in which a computer user (a client)
requests and is provided a service (such as sending a Web page) by another computer (a
server) in the network. TCP/IP communication is primarily point-to-point, meaning each
communication is from one point (or host computer) in the network to another point or host
computer. TCP/IP and the higher-level applications that use it are collectively said to be
"stateless" because each client request is considered a new request unrelated to any previous
one (unlike ordinary phone conversations that require a dedicated connection for the call
duration). Being stateless frees network paths so that everyone can use them continuously.
(Note that the TCP layer itself is not stateless as far as any one message is concerned. Its
connection remains in place until all packets in a message have been received.)

Many Internet users are familiar with the application protocols that use TCP/IP to get to the
Internet. These include the World Wide Web's Hypertext Transfer Protocol (HTTP), the File
Transfer Protocol (FTP), Telnet (Telnet) which lets you logon to remote computers, and the
Simple Mail Transfer Protocol (SMTP). These and other protocols are often packaged together
with TCP/IP as a "suite."

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Internet Explorer

Internet Explorer (formerly Microsoft Internet Explorer and Windows Internet Explorer, commonly
abbreviated IE or MSIE) is a series of graphical web browsers developed by Microsoft and included as
part of the Microsoft Windows line of operating systems, starting in 1995. It was first released as part
of the add-on package for Windows 95 that year. Later versions were available as free downloads, or in
service packs, and included in the OEM service releases of Windows 95 and later versions of Windows.
Internet Explorer is one of the most widely used web browsers, attaining a peak of about 95% usage
share during 2002 and 2003. Its usage share has since declined with the launch of Firefox (2004) and
Google Chrome (2008), as well as with the growing popularity of operating systems such as OS X, Linux
and Android that do not run Internet Explorer. Estimates for Internet Explorer's overall market share
range from 27.4% to 54.13%, as of October 2012.

Telnet

A terminal emulation program for TCP/IP networks such as the Internet. The Telnet program
runs on your computer and connects your PC to a server on the network. You can then enter
commands through the Telnet program and they will be executed as if you were entering
them directly on the server console. This enables you to control the server and communicate
with other servers on the network. To start a Telnet session, you must log in to a server by
entering a valid username and password. Telnet is a common way to remotely control Web
servers.

Telnet&clients&are&available&for&all&major&operating&systems.&

CommandBline!telnet!clients!are!built!into!most!versions!of!Mac!OS!X,!Windows,!Unix,!and!Linux.!To!use!these!clients,!go!to!
their!respective!command!lines!(i.e.,!the!Terminal!application!in!Mac!OS!X,!the!shell!in!Unix!or!Linux,!or!the!DOS!prompt!in!
Windows),!and!then!enter:!

telnet&host&port&

Replace!host!with!the!address!of!the!service,!and!port!with!the!port!number!on!which!the!service!runs!(e.g.!80!for!http,!23!
for!telnet).!

FTP&Clients&

To! transfer! files! via! File! Transfer! Protocol! (FTP),! you! need! to! establish! an! FTP! connection.! To! make! an! FTP!
connection! you! can! use! a! standard! Web! browser! (Internet! Explorer,! Mozilla! Firefox,! etc.)! or! an! FTP! Client.! To!
transfer!a!file!with!FTP!you!need!to!have!an!FTP!accounts!for!the!web!space!you!are!going!to!transfer!the!file!to!
FTP!hosting!account!where!you!plan!to!upload!your!files.!!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

When!using!a!web!browser!for!an!FTP!connection,!FTP!uploads!are!sometimes!very!slow,!and!downloads!are!not!
protected!(not!recommended!for!uploading!or!downloading!large!files).!

&

FTP&Client&!

An! FTP! Client! is! software! designed! to! transfer! files! backBandBforth! between! two! computers! over! the!
Internet.!It!needs!to!be!installed!on!your!computer!and!can!only!be!used!with!a!live!connection!to!the!
Internet.!

With!an!FTP!Client!(such&as&FileZilla,&CuteFTP&or&SmartFTP)!uploading/downloading!a!file!is!really!easy.!
Furthermore,!FTP!clients!have!some!extra!features.!For!example,!you're!can!resume!a!download!that!
did!not!finish!successfully.!This!is!a!very!nice!feature!for!people!with!slower!Internet!connections.!FTP!
clients'! interface! is! usually! divided! in! two! B! the! pane! on! the! left! shows! the! files! and! folders! on! your!
computer! (your! Desktop,! My! Documents,! etc.)! and! the! pane! on! the! right! displays! the! files! on! the!
remote!server.!

&

FTP&File&Transfer!

File!transfers!are!made!by!simply!dragging!and!dropping!files!from!one!pane!to!the!other.!Additional!
features!of!the!FTP!Client!include:!multiple!file!transfers!at!a!time,!auto!resuming!of!the!transfer,!file!
queuing!etc.!

&
Email&client&
An!email&client,!email&reader,!or!more!formally!mail&user&agent,!is!a!computer!program!used!to!access!
and! manage! a! user's! email.! The! term! can! refer! to! any! system! capable! of! accessing! the! user's!email!
mailbox,!regardless!of!it!being!a!mail!user!agent,!a!relaying!server,!or!a!human!typing!on!a!terminal.!In!
addition,!a!web!application!that!provides!message!management,!composition,!and!reception!functions!
is!sometimes!also!considered!an!email!client,!but!more!commonly!referred!to!as!webmail.!
Popular!locally!installed!email!clients!include!Microsoft!Outlook,!!Mozilla's!Thunderbird,!!Apple!
Inc.'s!Mail.!
&

SMTP&
SMTP!stands!for!Simple!Mail!Transfer!Protocol.!SMTP!is!used!when!email!is!delivered!from!an!email!
client!to!an!email!server!or!when!email!is!delivered!from!one!email!server!to!another.!SMTP!uses!port!
25.!
&

POP3&
POP3!stands!for!Post!Office!Protocol.!POP3!allows!an!email!client!to!download!an!email!from!an!email!
server.!The!POP3!protocol!is!simple!and!does!not!offer!many!features!except!for!download.!Its!design!
assumes!that!the!email!client!downloads all available email from the server, deletes them from the server and then
disconnects. POP3 normally uses port 110.
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

&Types&of&Web&Pages&and&its&Processing&
Static&web&page&
!
!
Client Server
!
HTTP request
!
Browser Web server HTML file
!
HTTP response
!
!
!
!

A!static&web&page!is!an!HTML!document!that!is!the!same!each!time!its!viewed.!It!doesnt!change!in!
response!to!user!input.!

Static!web!pages!are!usually!simple!HTML!files!that!are!stored!on!the!web!server!with!a!file!extension!of!
.htm!or!.html.!When!a!browser!requests!a!static!web!page,!the!web!server!retrieves!the!file!from!disk!
and!sends!it!back!to!the!browser.!

A!web!browser!requests!a!page!from!a!web!server!by!sending!the!server!an!HTTP!message!known!as!an!
HTTP!request.!!

The!HTTP!request!includes,!among!other!things,!the!name!of!the!HTML!file!being!requested!and!the!
Internet!address!of!both!the!browser!and!the!web!server.!

A!user!working!with!a!browser!can!initiate!an!HTTP!request!in!several!ways.!One!way!is!to!type!the!
address!of!a!web!page,!called!a!URL,!or!Uniform&Resource&Locator,!into!the!browsers!address!area!and!
press!Enter.!Another!way!is!to!click!a!link!that!refers!to!a!web!page.!

A!web!server!replies!to!an!HTTP!request!by!sending!a!message!known!as!an!HTTP&response!back!to!the!
browser.!

The!HTTP!response!contains!the!addresses!of!the!browser!and!the!server!as!well!as!the!HTML!document!
thats!being!returned.!

&
!
!
!
!
&
&
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Dynamic&web&page&
!
!
Client Server
!
HTTP request
! Application
Browser Web server
server
!
HTTP response
!
!
! Web
application
!
!
!
!

A!dynamic&web&page!is!an!HTML!document!thats!generated!by!a!web!application.!Often,!the!web!page!
changes!according!to!information!thats!sent!to!the!web!application!by!the!browser.!

When!a!web!server!receives!a!request!for!a!dynamic!web!page,!the!server!passes!the!request!to!an!
application&server.!!

The!application!server!executes!the!web!application,!which!generates!an!HTML!document.!This!
document!is!returned!to!the!application!server,!which!passes!it!back!to!the!web!server.!The!web!server,!
in!turn,!sends!the!document!back!to!the!browser.!

After!the!page!is!displayed,!the!user!can!interact!with!it!using!its!controls.!Some!of!those!controls!let!the!
user!post!the!page!back!to!the!server,!so!its!processed!again!using!the!data!the!user!entered.!

Each!application!mapping!specifies!which!application!should!be!run!to!process!files!with!that!extension.!!

If!the!file!extension!isnt!in!the!list!of!application!mappings,!the!requested!file!is!returned!to!the!browser!
without!any!processing.!

The!process!that!begins!with!the!user!requesting!a!web!page!and!ends!with!the!server!sending!a!
response!back!to!the!client!is!called!a!round&trip.!!

After!a!web!application!generates!an!HTML!document,!it!ends.!Then,!unless!the!data!the!application!
contains!is!specifically!saved,!that!data!is!lost.!

!
HTTP&
HTTP,!Hyper!Text!transfer!Protocol!is!the!standard!Web!transfer!protocol.!
The primary technology protocol on the Web that allows linking and browsing.
The!HTTP!is!the!language!that!Web!clients!and!Web!servers!use!to!communicate!with!each!other.!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

It!is!essentially!the!backbone!of!the!web.!!
It!is!constantly!evolving!protocol!with!several!versions!in!use!and!others!are!still!under!development.!
This!protocol!has!two!items:!the!set!of!requests!from!browsers!to!servers!and!the!set!of!responses!
going!back!the!other!way.!
It!is!a!stateless!protocol!and!does!not!maintain!any!information!from!one!transaction!to!the!next,!so!
the!next!transaction!needs!to!start!all!over!again!
The! advantage! is! that! an! HTTP! server! can! serve! a! lot! more! clients! in! a! given! period! of! time,! since!
there's!no!additional!overhead!for!tracking!sessions!from!one!connection!to!the!next.!
Default!Port!used!by!HTTP!is!80.!
!
HTTPS!

HTTPS!stands!for!Hyper!Text!Transfer!Protocol!Secure.!It!is!a!secured!version!of!the!HTTP!protocol!that!
uses!SSL!(protocol!primarily!developed!with!secure,!safe!Internet!transactions!in!mind!as!the!encryption!
layer.!SSL!layer!also!offers!strong!authentication!methods.!
HTTPS!allows!secure!ecommerce!transactions,!such!as!online!banking.!
HTTPS!connects!on!port!443,!while!HTTP!is!on!port!80!
HTTPS!encrypts!the!data!sent!and!received!with!SSL,!while!HTTP!sends!it!all!as!plain!text.!
When!a!user!connects!to!a!website!via!HTTPS,!the!website!encrypts!the!session!with!a!digital!certificate.!
A!user!can!tell!if!they!are!connected!to!a!secure!website!if!the!website!URL!begins!with!https://!instead!
of!http://.!

Secure!Sockets!Layer!uses!a!cryptographic!system!that!encrypts!data!with!two!keys.!

SSL!transactions!are!negotiated!by!means!of!a!key!based!encryption!algorithm!between!the!client!and!
the!server,!this!key!is!usually!either!40!or!128!bits!in!strength!(the!higher!the!number!of!bits!the!more!
secure!the!transaction).!
When!a!SSL!Digital!Certificate!is!installed!on!a!web!site,!users!can!see!a!padlock!icon!at!the!bottom!area!
of! the! navigator.! When! an! Extended! Validation! Certificates! is! installed! on! a! web! site,! users! with! the!
latest!versions!of!Firefox,!Internet!Explorer!or!Opera!will!see!the!green!address!bar!at!the!URL!area!of!
the!navigator.!

Client\side& scripting!is! the! class! of!computer! programs!on! the!web!that! are!executed!in! clientVside,! by! the!
user's!web! browser,! instead! of!serverVside!(on! the!web! server).!This! type! of!computer! programming!is! an!
important! part! of! the!Dynamic! HTML! (DHTML)! concept,! enabling!web! pages!to! be!scripted;! that! is,! to! have!
different!and!changing!content!depending!on!user!input,!environmental!conditions!(such!as!the!time!of!day),!or!
other! variables.! Web! authors! write!clientBside!scripts! in! languages! such! as!JavaScript!(ClientBside! JavaScript)!
and!VBScript.!
!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

ClientBside!scripts!are!embedded!within!an!HTML!document!(hence!known!as!an!"embedded!script"),!but!they!
may! also! be! contained! in! a! separate!file,! which! is! referenced! by! the! document! (or! documents)! that! uses! it!
(known! as! an! "external! script").! Upon! request,! the! necessary! files! are! sent! to! the! user's! computer! by! the!web!
server!(or! servers)! on! whom! they! reside.! The! user's!web! browser!executes!the! script,! and! then! displays! the!
document,!including!any!visible!output!from!the!script.!By!viewing!the!file!that!contains!the!script,!users!may!be!
able!to!see!its!source!code.!
&

Server\side&scripting!is!a!web!server!technology!in!which!a!user's!request!is!fulfilled!by!running!a!script!directly!
on! the! web! server! to! generate!dynamic! web! pages.! It! is! usually! used! to! provide! interactive! web! sites! that!
interface! to! databases! or! other! data! stores.! This! is! different! from!clientBside! scripting!where! the! viewing! web!
browser,!usually!in!JavaScript,!runs!scripts.!The!primary!advantage!to!serverBside!scripting!is!the!ability!to!highly!
customize! the! response! based! on! the! user's! requirements! or! queries! into! data! stores.! Server! side! scripts! are!
written!in!languages!such!as!Perl,!PHP,!ASP.NET!etc.!

SSS!produce!output!in!a!format!understandable!by!web!browsers!(usually!HTML),!which!is!then!sent!to!the!user's!
computer.!The!user!cannot!see!the!script's!source!code!(unless!the!author!publishes!the!code!separately),!and!
may!not!even!be!aware!that!a!script!was!executed.!!
!

From!security!point!of!view,!serverBside!scripts!are!never!visible!to!the!browser!as!these!scripts!are!executed!on!
the!server!and!emit!HTML!corresponding!to!user's!input!to!the!page.!

Programs(that(run(on(a(user's(local(computer(without(ever(sending(or(receiving(data(over(a(network(are(not(
considered(clients,(and(so(the(operations(of(such(programs(would(not(be(considered(client:side(operations.(

Comparison:! ClientBside! scripts! have! greater! access! to! the! information! and! functions! available! on! the! user's!
browser,! whereas! serverBside! scripts! have! greater! access! to! the! information! and! functions! available! on! the!
server.! ServerBside! scripts! require! that! their! languages!interpreter!be! installed! on! the! server,! and! produce! the!
same!output!regardless!of!the!client's!browser,!operating!system,!or!other!system!details.!ClientBside!scripts!do!
not! require! additional! software! on! the! server;! however,! they! do! require! that! the! user's! web! browser!
understands!the!scripting!language!in!which!they!are!written.!

Client\side&scripting& Server\side&scripting&

ClientBside!scripting!generally!refers!to!the!class!of! ServerBside!scripting!is!a!technique!used!in!website!
computer!programs!on!the!web!that!are!executed! design!which!involves!embedding!scripts!in!an!HTML!
clientBside,!by!the!user's!web!browser,!instead!of! source!code!which!results!in!a!user's!request!to!the!
serverBside.! server!website!being!handled!by!a!script!running!

Uses serverBside!before!the!server!responds!to!it.!
Make interactive webpages. Uses
Make stuff happen dynamically on the web Process user input.
page.

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Client\side&scripting& Server\side&scripting&

Interact with temporary storage, and local Display pages.

storage (Cookies).
Structure web applications.
Example languages
Interact with permanent storage (SQL, files).
JavaScript (primarily)
Example Languages
HTML*, CSS*
PHP
*HTML and CSS aren't really "programming ASP, ASP.Net etc.
languages". They are markup syntax by which
the Client renders the page for the User.
!

&

2 !

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

CHAPTER!02!!CLIENT!SIDE!TECHNOLOGIES!
What!is!HTML?!
HTML2or2Hyper2Text2Markup2Language2is2designed2to2specify2the2logical2organization2of2a2
document,2with2important2hypertext2extensions.22
HTML2instructions2divide2the2text2of2a2document2into2blocks2called2elements.22
These2can2be2divided2into2two2broad2categories:2
Those2that2define2how2the2BODY2of2the2document2is2to2be2displayed2by2the2browser,2and22
Those2 that2 define2 information2 about2 the2 document,2 such2 as2 the2 title2 or2 relationships2 to2
other2documents.2
The2detailed2rules2for2HTML2(the2names2of2the2tags/elements,2how2they2can2be2used)2are2
defined2 using2 another2 language2 known2 as2 the2 SGML2 (Standard2 Generalized2 Markup2
Language).2
HTML2is2a2set2of2special2codes2that2can2be2embedded2in2text2to2add2formatting2and2linking2
information.2
HTML2is2the2language2interpreted2by2a2Browser.2
The2HTML2file2must2have2an2extension2.htm2or2.html.2
Any2text2editor2can2be2used2to2create2HTML2file.2
!
HTML2stands2for2Hyper2Text2Markup2Language.2HTML2is2a2presentation2language.2We2use2HTML2language2
to2display2information2according2to2our2need.2An2HTML2file2is2a2text2file2containing2small2markup!tags.2The2
markup2tags2tell2the2Web2browser2how!to!display2the2page.2An2HTML2file2must2have2an2.htm2or2.html2file2
extension.2An2HTML2file2can2be2created2using2a2simple!text!editor.2
2
HTML2 is2 very2 popular2 language2 used2 on2 web2 because2 of2 its2 interoperability.2 HTML2 language2 is2 platform2
independent2i.e.2HTML2files2can2be2opened2on2any2platform.2HTML2files2can2be2written2using2a2simple2text2
editor2like2notepad2which2is2present2in2all2the2operating2system.22
2

HTML2language2is2used2to2create2web2pages.2Web2pages2can2be2viewed2using2application2software2called2a2
Web!browser.2Popular2browsers2are2Internet!Explorer,!Mozilla!Firefox!and!Netscape!Navigator.2A2web2
browser2parses2the2HTML2file2containing2markups2(html2tags)2and2displays2the2information2with2the2proper2
format2as2specified2in2the2HTML2document.2HTML2tags2are2also2called2markRup.2HTML2tags2are2surrounded2
by2the2two2characters2<2and2>.2The2surrounding2characters2are2called2angle2brackets.2HTML2tags2normally2
come2in2pairs2like2<b>2and2</b>.2The2first2tag2in2a2pair2is2the2start2tag,2the2second2tag2is2the2end2tag.2The2text2
between2 the2 start2 and2 end2 tags2 is2 the2 element2 content.2 HTML2 tags2 are2 not2 case2 sensitive;2 <b>2 means2 the2
same2as2<B>.22

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

!
Structure!of!an!HTML!document!is!shown!below:!!
<html>2222
<head>2222222
! <title>2Title2of2page2</title>2222
</head>2222
<body>2 2
22222 This2is2the2place2where2the2information2to2be2displayed2in2a2web2page2is2written.2222
</body>!
</html>22
Every2 html2 document2 must2 start2 with2 <html>2 tag.2 It2 shows2 the2 starting2 of2 HTML2 document.2 <head>2 tag2
contains2 information2 like2 the2 title2 of2 the2 document2 and2 other2 information2 which2 describes2 about2 the2
content2of2the2document.2
2
BODY2 part2 of2 a2 HTML2 document2 contains2 the2 information2 and2 its2 format2 to2 be2 displayed2 by2 the2 browser.2
HEAD2part2of2a2HTML2document2contains2the2information2that2is2not2displayed2on2the2browser2window.2It2
defines2information2`about'2the2document,2such2as2the2title2or2relationships2to2other2documents.222
2
<body>2tag2is2the2 place2 where2we2write2 all2 the2 information2that2 is2 to2be2displayed2in2the2web2 browser.2 It2
also2contains2other2tags2which2defines2how2information2are2to2be2displayed2in2the2web2browser.2<body>2tag2
shows2the2starting2of2the2body2tag2and2</body>2tag2shows2the2ending2of2the2body2tag.2</html>2shows2the2
ending2of2the2HTML2document.2Every2ending2tag2must2have2a2forward2slash2as2shown2in2</html>2tag.22
2
HTML2 discards2 whitespaces.2 HTML2 only2 considers2 a2 single2 space2 as2 a2 space.2 The2 browser2 automatically2
discards2 rest2 of2 the2 whitespace.2 Hence,2 we2 can2 use2 as2 much2 whitespace2 as2 we2 want2 while2 creating2 our2
HTML2document.2This2makes2html2document2easy2to2read2or2edit.22
2
Versions!of!HTML!
HTML!2.0!!
It2set2the2standard2for2core2HTML2features2based2upon2current2practice2in21994.22
HTML!3.2!
W3C's2 first2 Recommendation2 for2 HTML2 which2 represented2 the2 consensus2 on2 HTML2
features2for21996.22
HTML! 3.22 added2 widelyRdeployed2 features2 such2 as2 tables,2 applets,2 textRflow2 around2
images,2 superscripts2 and2 subscripts,2 while2 providing2 backwards2 compatibility2 with2 the2
existing2HTML22.02standard.2
HTML!4.0!!
First2released2as2a2W3C2Recommendation2on2182December21997.22
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

A2second2release2was2issued2on2242April219982with2changes2limited2to2editorial2corrections.22
This2specification2has2now2been2superseded2by2HTML24.01.22
2
HTML!4.01!
HTML24.012is2the2current2official2standard.2
It2 includes2 support2 for2 most2 of2 the2 proprietary2 extensions,2 plus2 support2 for2 extra2 features2
(Internationalized2 documents,2 support2 for2 Cascading2 Style2 Sheets,2 extra2 TABLE,2 FORM,2 and2
JavaSctipt2enhancements),2that2are2not2universally2supported.2
This2is2the2last2version2of2HTML.2
After2this2XHTML2was2released2which2stands2for2eXtensible2HyperText2Markup2Language.2
2
HTML!5.0!
This2is2the2new2version2of2HTML2with2many2exciting2new2features.22
2

Common DOCTYPE Declarations

HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or
deprecated elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated
elements (like font). Framesets are not allowed.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

HTML 4.01 Frameset

This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">
!
HTML!Elements/Tags!
The2HTML2instructions,2along2with2the2text2to2which2the2instructions2apply,2are2called2
HTML2elements.22
The2HTML2instructions2are2themselves2called2tags,2and2look2like2<element_name>2RR2that2is,2
they2are2simply2the2element2name2surrounded2by2left2and2right2angle2brackets.2
The2content2in2the2webRpage2is2written2after2the2starting2tag,2and2closed2with2the2end2tag.2
E.g:2<element_name>2text2to2be2written2HERE2</element_name>2
The2end2tag2has2slash2character2in2front2of2it.2
HTML2tags2are2not2case2sensitive;2<b>2means2same2as2<B>.2
2
Empty!Elements!
Some2elements2are2empty2RR2that2is,2they2do2not2affect2a2block2of2the2document2in2some2way.22
These2elements2do2not2require2an2ending2tag.22
- An2example2is2the2<HR>2element,2which2draws2a2horizontal2line2across2the2page.2
2
HTML!Tag!Attributes!
Many2elements2can2have2arguments2that2pass2parameters2to2the2interpreter2handling2the2
element.2
These2arguments2are2called2attributes2of2the2element.2
An2attribute2is2a2customizable2option2for2a2tag.2
In2other2words,2attributes2are2used2to2define2the2properties2of2a2tag.2
o Example:2<p2align2=2left>2Trial2Example2</p>.2
o In2the2above2example2the2align2attribute2allows2you2to2specify2how2text2in2a2paragraph2is2
arranged2on2the2page.2
Not2all2tags2support2attributes.2
Some2tags2support2multiple2attributes,2and2the2attributes2are2listed2one2after2another2in2the2
start2tag,2seperated2by2space.2
Attributes2are2always2set2to2the2opening2tag.2
2

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

!
HTML4.01!Tags!Lists!
TITLE!! TAG!! DESCRIPTION!!

Basic!Elements!

Document2Type22 <HTML>2</HTML>22 document2root2element,2beginning2and2end2of2file2

Title22 <TITLE>2</TITLE>22 document2title,2must2be2in2header2

Header22 <HEAD>2</HEAD>22 descriptive2info,2such2as2title2

Body22 <BODY>2</BODY>22 bulk2of2the2page,2notes2body2of2document2

Formatting!

Bold22 <B>2</B>2or2<strong></strong>2 bold2text2style2

Italic22 <I>2</I>22 italic2text2style2

Underline22 <U>2</U>22 underlined2text2(not2widely2implemented)2

Strikeout22 <STRIKE>2</STRIKE>22 strikeRthrough2text2(not2widely2implemented)2

Strikeout22 <S>2</S>22 strikeRthrough2text2(not2widely2implemented)2

Subscript22 <SUB>2</SUB>22 subscript2numbers2like2footnotes2

Superscript22 <SUP>2</SUP>22 superscript2numbers2like2cross2R2reference2numbers2

Pre2formatted22 <PRE>2</PRE>22 pre2formatted2text2(display2text2spacing2asRis)2

Center2 <CENTER>2</CENTER>22 centers2text2and2images2

Blinking22 <BLINK>2</BLINK>22 blinking2text,2Netscape2only2

Font2Size22 <FONT2SIZE=?>2</FONT>22 local2font2size(ranges2from21R7)2

Change2Font2Size22 <FONT2SIZE="+|R?">2</FONT>22 controls2font2size2rendered2

Font2Color22 <FONT2COLOR="#$$$$$$">2</FONT>22 controls2font2color2rendered2

Select2Font22 <FONT2FACE="***">2</FONT>22 the2style2of2the2text,2such2as2Times2New2Roman2

Marquee22 <MARQUEE>2</MARQUEE>22 scrolling2text2(IE2only)2

Links!!

Link2Something22 <A2HREF="URL">2</A>22 links2text2or2graphic2to2another2URL2

Link2to2Location22 <A2HREF="URL#***">2</A>22 links2text2or2graphic2an2anchor2in2an2other2document2

Link2to2Location2in2
<A2HREF="#***">2</A>22 links2text2or2graphic2an2anchor2in2current2document2
Current2Page2

Target2Window22 <A2HREF="URL"2TARGET="***">2 links2text2or2graphic2to2a2URL2in2a2new2browser2window2

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

</A>22

<A2HREF="URL"2ONCLICK="***">2
Action2on2Click22 takes2effect2when2user2clicks2on2the2item2(Javascript)2
</A>22

<A2HREF="URL"2
Mouseover2Action22 takes2effect2when2user2moves2pointer2over2item2
ONMOUSEOVER="***">2</A>22

creates2blank2eRmail2to2indicated2address2with2visitor's2
Link2to2Email22 <A2HREF="mailto:@">2</A>22
default2eRmail2client2

Graphics!and!Sound!!

Display2Image22 <IMG2SRC="URL">22 displays2image2from2the2indicated2URL2

<IMG2SRC="URL"2ALIGN=2
Alignment22 aligns2the2image2
TOP|BOTTOM|MIDDLE|LEFT|RIGHT>22

<IMG2SRC="URL"2WIDTH=?2
Dimensions22 the2dimensions,2in2pixels,2of2the2image2
HEIGHT=?>22

Border22 <IMG2SRC="URL"2BORDER=?>22 border,2in2pixels,2around2the2image2

Dividers!!

Paragraph22 <P>2</P>22 paragraph2(closing2tag2often2unnecessary)2

<P2ALIGN=LEFT|CENTER|RIGHT>2
Align2Text22 aligns2paragraph2
</P>22

Justify2Text22 <P2ALIGN=JUSTIFY>2</P>22 justify's2paragraph's2text2

Line2Break22 <BR>22 a2single2carriage2return2

Horizontal2Rule22 <HR>22 horizontal2line2

Alignment22 <HR2ALIGN=LEFT|RIGHT|CENTER>22 alignment2of2horizontal2line2

Thickness22 <HR2SIZE=?>22 thickness,2in2pixels,2of2horizontal2line2

Width22 <HR2WIDTH=?>22 width,2in2pixels,2of2horizontal2line2

width(as2a2percentage2of2page2width),2in2pixels,2of2
Width2Percent22 <HR2WIDTH="%">22
horizontal2line2

Solid2Line22 <HR2NOSHADE>22 horizontal2line2without2the23D2cutout2look2

No2Break22 <NOBR>2</NOBR>22 prevents2line2breaks2

Structural!Elements!

Heading22 <H?>2</H?>22 document2header,2the2?2defines262levels2(#'s21R6)2

Strong2Emphasis22 <STRONG>2</STRONG>22 strongly2emphasized2text,2usually2displayed2as2bold22

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Address22 <ADDRESS>2</ADDRESS>22 author2information2

Large2Font2Size22 <BIG>2</BIG>22 uses2a2large2text2size2

Small2Font2Size22 <SMALL>2</SMALL>22 use2a2small2text2size2

Backgrounds!

Tiled2Background22 <BODY2BACKGROUND=2"URL">22 causes2the2image2to2tile2as2the2background2of2the2page2

Static2image2which2remains2in2the2same2location2as2visitors2
Watermark22 <BODY2BGPROPERTIES=2"FIXED">22
scroll.2

Background2Color22 <BODY2BGCOLOR=2"#$$$$$$">22 solid2background2color2of2the2page2

Text2Color22 <BODY2TEXT="#$$$$$$">22 color2of2the2text2throughout2the2page2

Link2Color22 <BODY2LINK="#$$$$$$">22 color2of2all2links2throughout2the2page2

color2of2all2links2that2have2already2been2clicked2on2by2
Visited2Link22 <BODY2VLINK="#$$$$$$">22
visitor2

Active2Link22 <BODY2ALINK="#$$$$$$">22 color2of2link2while2being2selected2

Lists!!

Unordered2List22 <UL>22</UL>22 list2with2bulleted2items2

List2Item2 <LI>2</LI>22 indicates2an2item2on2the2list2

Bullet2Type22 <UL2TYPE=DISC|CIRCLE|SQUARE>22 shape2of2bullet2for2the2whole2list2

Bullet2Type22 <LI2TYPE=DISC|CIRCLE|SQUARE>22 shape2of2bullet2for2specific2list2item2

Ordered2List22 <OL>2<LI>2</OL>22 numbered2list2

Numbering2Type22 <OL2TYPE=A|a|I|i|1>22 type2of2numbering2for2the2whole2list2

Numbering2Type22 <LI2TYPE=A|a|I|i|1>22 type2of2numbering2for2specific2list2item2

Starting2Number22 <OL2START=?>22 starting2number2for2list2

Starting2Number22 <LI2VALUE=?>22 starting2number2for2this2&2subsequent2items2

Definition2List22 <DL>2</DL>22 a2list2of2definitions22

Definition2Term22 <DT>2</DT>22 definition2term22

Definition22 <DD>2</DD>22 definition2of2a2term22

Menu2List22 <MENU>2</MENU>22 display2menu2type2list2

Directory2List22 <DIR>2</DIR>22 directory2link2

Tables!

Define2Table22 <TABLE>2</TABLE>22 signals2the2beginning2of2a2table2

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<TABLE2ALIGN=2
Table2Alignment22 aligns2the2table2within2the2browser2window22
LEFT|RIGHT|CENTER>22

Table2Border22 <TABLE2BORDER=?>2</TABLE>22 border2of2table,2you2can2set2the2value2(aka2width)2

places2specific2amount2of2space2between2the2individual2
Cell2Spacing22 <TABLE2CELLSPACING=?>22
cells2within2a2table2

places2specific2amount2of2space2between2the2cells2border2
Cell2Padding22 <TABLE2CELLPADDING=?>22
and2its2contents2

Desired2Width22 <TABLE2WIDTH=?>22 width2of2table2in2pixels2

Width2Percent22 <TABLE2WIDTH=%>22 width2of2table2in2percentage2of2page2

<TABLE2BGCOLOR="#$$$$$$">2
Table2Color22 overall2background2color2of2table2
</TABLE>22

<TABLE2BORDERCOLOR="#$$$$$$">2
Border2Color22 the2color2of2the2table2border2
</TABLE>22

Table2Row22 <TR>2</TR>22 table2row2

<TR2ALIGN=2LEFT|2RIGHT|2CENTER|2
Alignment22 alignment2of2the2table2row2
MIDDLE|2BOTTOM>22

Table2Cell22 <TD>2</TD>22 specific2table2cell,2must2appear2within2table2rows2

<TD2ALIGN=2LEFT|RIGHT|CENTER2
Alignment22 alignment2of2the2table2cell2
VALIGN=2TOP|MIDDLE|BOTTOM>22

Columns2to2Span22 <TD2COLSPAN=?>22 identifies2the2the2number2of2columns2the2cell2should2span2

Rows2to2Span22 <TD2ROWSPAN=?>22 identifies2the2the2number2of2rows2the2cell2should2span2

Desired2Width22 <TD2WIDTH=?>22 width2of2cell2in2pixels2

Width2Percent22 <TD2WIDTH="%">22 width2of2cell2as2percentage2of2table2

Cell2Color22 <TD2BGCOLOR="#$$$$$$">22 background2color2of2table2cell2

Header2Cell22 <TH>2</TH>22 table2cell2for2header2information2(bold2&2centered)2

<TH2ALIGN=2LEFT|2RIGHT|2CENTER|2
Alignment22 alignment2of2the2header2cell2
MIDDLE|BOTTOM>22

Table2Body22 <TBODY>22 identifies2the2specific2body2section2of2the2table2

separates2group2of2cells2to2serve2as2footer2material2for2the2
Table2Footer22 <TFOOT>2</TFOOT>22
table2(must2come2before2<THEAD>)22

separates2group2of2cells2to2serve2as2header2material2for2the2
Table2Header22 <THEAD>2</THEAD>22
table22

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Table2Caption22 <CAPTION>2</CAPTION>22 caption2for2a2table2

<CAPTION2
Alignment22 alignment2for2the2caption2of2a2table2
ALIGN=TOP|BOTTOM|LEFT|RIGHT>22

Frames!!

Frame2Document22 <FRAMESET>2</FRAMESET>22 creates2layouts2of2frames2(instead2of2<BODY>)2

<FRAMESET2ROWS=,,,>2 comma2separated2list2of2size2of2each2row2within2the2
Row2Heights22
</FRAMESET>22 frameset2(pixels2or2%)2

comma2separated2list2of2size2of2each2column2within2the2
Column2Widths22 <FRAMESET2COLS=,,,>2</FRAMESET>22
frameset2(pixels2or2%)2

<FRAMESET2FRAMEBORDER=2
Borders22 identifies2if2a2frame2has2a2visible2border2or2not2
"yes|no">2</FRAMESET>22

<FRAMESET2BORDER=?>2
Border2Width22 width2of2frame2border2if2visible2
</FRAMESET>22

<FRAMESET2
Border2Color22 BORDERCOLOR="#$$$$$$">2 color2of2frame2border2if2visible2
</FRAMESET>22

<FRAMESET2FRAMESPACING=?>2
Frame2Spacing22 number2of2pixels2of2reserved2space2between2frames2
</FRAMESET>22

Define2Frame22 <FRAME>22 specific2contents2of2an2individual2frame2

Display2Document22 <FRAME2SRC="URL">22 identifies2the2initial2contents2of2the2frame2

<FRAME2NAME="***"|2_blank|2_self|2
Frame2Name22 assigns2a2name2to2the2current2frame22
_parent2|_top>22

distance2between2content2and2frame's2left2and2right2
Margin2Width22 <FRAME2MARGINWIDTH=?>22
margins2

distance2between2content2and2frame's2top2and2bottom2
Margin2Height22 <FRAME2MARGINHEIGHT=?>22
margins2

<FRAME2
Scroll2bar22 controls2how2the2window2is2or2isn't2scrolled2
SCROLLING="YES|NO|AUTO">22

prohibits2the2document2viewer2from2changing2dimensions2
Not2ReRsizable22 <FRAME2NORESIZE>22
of2the2frame2

Borders22 <FRAME2FRAMEBORDER="yes|no">22 controls2wither2frame2has2a2border2

Border2Color22 <FRAME2BORDERCOLOR="#$$$$$$">22 color2of2border2of2frame2

2
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

!
HTML!Lists!
HTML2provides2three2type2of2lists.2
They2are2listed2below:2
1. Ordered!List:!
A2 list2 of2 multiRline2 paragraphs,2 listed2 separately2 and2 ordered2 numerically2 in2 some2
way.2
The2list2items2are2marked2with2numbers.2
<OL2...>2creates2an2ordered2list.2
"Ordered"2means2that2the2order2of2the2items2in2the2list2is2important.2
By2default,2the2number2starts2with21,2,3.2
An2ordered2list2starts2with2the2<ol>2tag.2
Each2list2item2starts2with2the2<li>2tag.2
o Example:2
<ol>2
<li>Coffee</li>2
<li>Milk</li>2
</ol>2
Here!is!how!it!looks!in!a!browser:!
1. Coffee22
2. Milk22
2
2
2. Unordered!List:!
o A2list2of2multiRline2paragraphs,2listed2separately2and2usually2marked2by2a2bullet2or2
similar2symbol2(Unordered2List)2
o <UL2...>2creates2an2unordered2list.22
o The2unordered2part2means2that2the2items2in2the2list2are2not2in2any2particular2order.2
o The2list2items2are2marked2with2bullets2(typically2small2black2circles).2
o An2unordered2list2starts2with2the2<ul>2tag.22
o Each2list2item2starts2with2the2<li>2tag.2
! Example:2
<ul>2
<li>Coffee</li>2
<li>Milk</li>2
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

</ul>2
Here!is!how!it!looks!in!a!browser:!
Coffee22
Milk22
2
3. Definition!List:!
A2definition2list2is2not2a2list2of2items.22
This2is2a2list2of2terms2and2explanation2of2the2terms.2
A2definition2list2starts2with2the2<dl>2tag.22
Each2definitionRlist2term2starts2with2the2<dt>2tag.22
Each2definitionRlist2definition2starts2with2the2<dd>2tag.2
o Example:2
<dl>2
<dt>Coffee</dt>2
<dd>Black2hot2drink</dd>2
<dt>Milk</dt>2
<dd>White2cold2drink</dd>2
</dl>2
Here!is!how!it!looks!in!a!browser:!
Coffee22
Black2hot2drink22
Milk22
White2cold2drink22
2
Frames!
Frames2allow2displaying2more2than2one2webRpage2in2a2single2browser2at2a2same2instance2
of2time.2
HTML2tags2<frameset></frameset>2is2used2to2divide2a2browser2screen2into2two2or2
more2HTML2recognizable2unique2regions.2
Each2unique2region2is2called2frame.2
Each2 frame2 can2 be2 loaded2 with2 a2 different2 document2 and2 hence,2 allow2 multiple2 HTML2
documents2to2be2seen2concurrently.2
2
The!disadvantages!of!using!frames!are:!
The2web2developer2must2keep2track2of2more2HTML2documents22
It2is2difficult2to2print2the2entire2page.2
2
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

!
The!major!advantages!of!using!frames!are:!
It2can2be2given2an2individual2URL,2so2it2can2load2information2independent2of2the2other2
frames2on2the2page;22
It2can2be2given2a2NAME,2allowing2it2to2be2targeted2by2other2URLs,2and;22
It2can2resize2dynamically2if2the2user2changes2the2window's2size.2(Resizing2can2also2be2
disabled,2ensuring2a2constant2frame2size.)2
2
The!Frameset!Tag!
The2<frameset>2tag2defines2how2to2divide2the2window2into2frames.2
Each2<frameset>2defines2a2set2of2rows2or2columns.2
The2<frameset>2tags2require2one2of2the2following2two2attributes2depending2on2whether2the2
screen2has2to2be2divided2into2rows2or2columns.2
!
The!two!attributes!are:!
1. Rows:2
This2attribute2is2used2to2divide2the2screen2into2multiple2rows.2
The2each2row2can2be2set2with2different2values2depending2on2the2required2size2of2the2row.2
2. Cols:2
This2attribute2is2used2to2divide2the2screen2into2multiple2columns.2
The2values2for2both2Rows2and2Cols2can2be:2
o A2number2in2pixels2(Not!commonly!used.)2
o Expressed2as2a2percentage2of2the2screen2resolution.2
o The2symbol2*,2which2indicates2the2remaining2space.2
2
Example2of2<frameset>2tag:2
<frameset2rows=33%,33%,*>2
2 divides2the2browser2screen2into232equal2horizontal2sections.2
<frameset2cols=33%,*>2
2 divides2the2browser2screen2into222different2vertical2sections.2
!
The!<frame>!Tag!
Once2the2screen2is2divided2into2rows2and2columns,2each2unique2section2can2be2loaded2with2
different2HTML2documents.2
This2is2achieved2by2using2the2<frame>2tag.2
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

The2<frame>2tag2defines2what2HTML2document2to2put2into2each2frame.2
The2attributes2of2the2<frame>2tag2are:2
2
Attributes! Description!

SRC=url2 Indicates2the2url2of2the2document2to2be2loaded2into2the2frame.2

MARGINHEIGHT=n2 Specifies2the2amount2of2white2space2to2be2left2at2the2top2and2bottom2of2the2frame.2

MARGINWIDTH=n2 Specifies2the2amount2of2white2space2to2be2left2along2the2sides2of2the2frame.2

NAME=name2 Gives2the2same2unique2name2so2it2can2be2targeted2by2other2documents.2The2name2
given2must2begin2with2an2alphanumeric2character.2

NORESIZE2 Disables2the2frames2resizing2capability.2

Scrolling2 Controls2the2appearance2of2horizontal2and2vertical2scrollbars2in2a2frame.2This2takes2
the2values2YES/NO/AUTO.2

2
Example!of!using!<frame>!tag:!
<frameset2cols="25%,75%">2
2222 <frame2src="frame_a.htm">2
2222 <frame2src="frame_b.htm">2
</frameset>!
!
In!the!example!above!we!have!a!frameset!with!two!columns.!!
The2first2column2is2set2to225%2of2the2width2of2the2browser2window.2!
The2second2column2is2set2to275%2of2the2width2of2the2browser2window.2!
The2HTML2document2"frame_a.htm"2is2put2into2the2first2column,2and2the2HTML2document2
"frame_b.htm"2is2put2into2the2second2column.!
2
HTML!Links!
A2link2is2a2connection2from2one2Web2resource2to2another.2
A2link2has2two2ends2RR2called2anchors2RR2and2a2direction.22
The2link2starts2at2the2"source"2anchor2and2points2to2the2"destination"2anchor,2which2may2be2any2
Web2resource2(e.g.,2an2image,2an2HTML2document,2an2element2within2an2HTML2document,2etc.).2
The2text2or2an2image2that2provides2such2linkages2is2called2hypertext,2hyperlink,2or2hotspot.2
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

2
What!is!Hyperlink?!
A2Hyperlink2is2a2connection2between2an2HTML2element2such2as2text,2an2image,2or2anything2else2
on2a2page2and2other2resource.2
That2link2might2be2to2another2web2page,2an2external2image,2or2an2eRmail2address.2
Difference!between!Hyperlink!and!Normal!HTML!Text:!
Appears2in2blue2color.2
o The2default2color2setting2in2a2browser2for2hyperlink2text2or2image.2
o The2color2can2be2set2dynamically2via2HTML2program2if2required.2
The2Hyperlink2text/image2is2underlined.2
When2the2mouse2cursor2is2placed2over2it,2the2standard2arrow2shaped2mouse2cursor2changes2to2
the2shape2of2a2hand.2
!
Changing!the!color!of!Links:!
To2change2the2link2color2there2are2three2attributes2that2can2be2specified2with2the2<body>2tag.2
These2are:2
LINK2(Normal)2
ALINK2(Active)2
VLINK2(Visited)2
!
Types!of!Hyperlink2
There!are!three!types!of!Hyperlinks:!
1. Inter2page!Hyperlink!
In2this2type2of2link2the2control2flows2from2oneRpage2to2another.2
Example:2
<a2HREF=myExample.htm>2Click2for2Example2</a>2
You!can!specify!the!relative!as!well!as!the!absolute!path!of!the!file!that!you!want!to!call.!
!
2. Intra2page!Hyperlink!
IntraRpage2Hyperlink2is2a2link2within2a2same2page.2
Sometimes,2a2jump2is2required2to2a2different2location2in2the2same2document.2
Since2the2jump2has2to2be2targeted2to2a2specific2location2the2two2steps2need2to2perform.2
a) Identify2the2location2with2a2name2and22
b) Jump2to2that2location2using2the2name.2
2
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

2
Example:)
<a2name2=top>2The2HTML2text2is2written2here2</a>2
<a!HREF=#top>2Goto2Top2</a>!
!
3. Email!Hyperlink!
This2type2of2Hyperlink2is2used2especially2to2write2eRmail.2
The2link2does2not2open2any2webRpages2but2opens2the2outlook2express2for2writing2mail.2
You2can2write2the2mail2and2send.2
Steps:!
a) First2type2any2text2like:2
2 Email:[email protected]
Surround2the2email2address2with2the2anchor2tags2i.e.2<a>,2but2instead2linking2to2the2web2
page,2use2the2mailto2command2to2link2it2to2an2eRmail2program.2
2
Email:2<a2HREF=mailto:[email protected]>[email protected]</a>!
2
R>2Save2the2page2and2view2it2in2browser.2
2
4. External!Links!
You2can2also2have2external2links2like2links,2when2clicking2upon2them2you2can2jump2to2next2
web2page.2
2 In2such2scenario2you2have2to2give2the2path2of2web2page2like:2
2 <a2HREF=http://www.google.com>2Goto2Google2</a>2
2
HTML!Forms!
Forms!are!the!most!popular!way!to!make!web!pages!interactive.!A!form!on!a!web!page!looks!similar!to!
a! form! on! a! sheet! of! paper! that! allows! the! user! to! enter! requested! information! and! submit! it! for!
further!processing.!A!form!can!have!different!types!of!form!elements!for!different!purpose!like!textbox,!
list!box,!checkbox,!radio!buttons,!dropdown!menus,!text!area!etc.!
!

1. HTML&Text&Fields&

type!B!Determines!what!kind!of!input!field!it!will!be.!Possible!choices!are!text,!submit,!and!
password.!
name!B!Assigns!a!name!to!the!given!field!so!that!you!may!reference!it!later.!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

size!B!Sets!the!horizontal!width!of!the!field.!The!unit!of!measurement!is!in!blank!spaces.!
maxlength!B!Dictates!the!maximum!number!of!characters!that!can!be!entered.!
!
HTML!Code:!
<form!method="post">!
Name:!<input!type="text"!size="10"!maxlength="40"!name="name">!<br!/>!
Password:!<input!type="password"!size="10"!maxlength="10"!name="password">!
</form>!
Do&not&use&the&password&feature&for&security&purposes.&The&data&in&the&password&field&is&not&encrypted&and&is&not&
secure&in&any&way.&
!
2. Submit&Buttons&
HTML!Code:!
<form!method="post">!
Name:!<input!type="text"!size="10"!maxlength="40"!name="name">!<br!/>!
Password:!<input!type="password"!size="10"!maxlength="10"!name="password"><br!/>!
<input&type="submit"&value="Send">&&
</form>!
&
3. HTML&Radio&Buttons&
Radio!buttons!are!a!popular!form!of!interaction.!You!may!have!seen!them!on!quizzes,!questionnaires,!
and!other!web!sites!that!give!the!user!a!multipleBchoice!question.!Below!are!a!couple!attributes!you!
should!know!that!relate!to!the!radio!button.!
!
value!B!specifies!what!will!be!sent!if!the!user!chooses!this!radio!button.!Only!one!value!will!be!sent!for!a!
given!group!of!radio!buttons.!
name!B!defines!which!set!of!radio!buttons!that!it!is!a!part!of.!!
!
HTML!Code:!
<form!method="post">!
What!kind!of!shirt!are!you!wearing?!<br!/>!
Shade:!!
<input!type="radio"!name="shade"!value="dark">Dark!
<input!type="radio"!name="shade"!value="light">Light!<br!/>!
Size:!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<input!type="radio"!name="size"!value="small">Small!
<input!type="radio"!name="size"!value="medium">Medium!
<input!type="radio"!name="size"!value="large">Large!<br!/>!
<input!type="submit"!value="Email!Myself">!
</form>!
!
4. HTML&Check&Boxes&
Check!boxes!allow!for!multiple!items!to!be!selected!for!a!certain!group!of!choices.!The!check!box's!
name!and!value!attributes!behave!the!same!as!a!radio!button.!
HTML&Code:&
<form!method="post">!
Select!your!favorite!cartoon!characters.!
<input!type="checkbox"!name="toon"!value="Goofy">Goofy!
<input!type="checkbox"!name="toon"!value="Donald">Donald!
<input!type="checkbox"!name="toon"!value="Bugs">Bugs!Bunny!
<input!type="checkbox"!name="toon"!value="Scoob">Scooby!Doo!
<input!type="submit"!value="Email!Myself">!
</form>!
!
5. HTML&Drop&down&Lists&(Known&as&Combo&Box)&
Drop!down!menu!are!created!with!the!<select>!and!<option>!tags.!<select>!is!the!list!itself!and!each!
<option>!is!an!available!choice!for!the!user.!
HTML&Code:&
<form!method="post">!
College!Degree?!
<select!name="degree">!
<option>Choose!One</option>!
<option>Some!High!School</option>!
<option>High!School!Degree</option>!
<option>Some!College</option>!
<option>Bachelor's!Degree</option>!
<option>Doctorate</option>!
<input!type="submit"!value="Email!Yourself">!
</select>!
</form>!
TRY&IT&YOURSELF
HTML&Code:&
<form!method="post"!action="mailto:[email protected]">!
Musical!Taste!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<select!multiple!name="music"!size="4">!
<option!value="emo"!selected>Emo</option>!
<option!value="metal/rock"!>Metal/Rock</option>!
<option!value="hiphop"!>Hip!Hop</option>!
<option!value="ska"!>Ska</option>!
<option!value="jazz"!>Jazz</option>!
<option!value="country"!>Country</option>!
<option!value="classical"!>Classical</option>!
<option!value="alternative"!>Alternative</option>!
<option!value="oldies"!>Oldies</option>!
<option!value="techno"!>Techno</option>!
</select>!
<input!type="submit"!value="Email!Yourself">!
</form>!
&
6. HTML&Text&Areas&
Text!areas!serve!as!an!input!field!for!viewers!to!place!their!own!comments!onto.!Forums!and!the!like!
use!text!areas!to!post!what!you!type!onto!their!site!using!scripts.!For!this!form,!the!text!area!is!used!as!
a!way!to!write!comments!to!somebody.!
Rows!and!columns!need!to!be!specified!as!attributes!to!the!<textarea>!tag.!Rows!are!roughly!12pixels!
high,!the!same!as!in!word!programs!and!the!value!of!the!columns!reflects!how!many!characters!wide!
the!text!area!will!be.!i.e.!The!example!below!shows!a!text!area!5!rows!tall!and!20!characters!wide.!
!

HTML&Code:&
<form!method="post>!
<textarea!rows="5"!cols="20"!wrap="physical"!name="comments">!
Enter!Comments!Here!
</textarea>!
<input!type="submit"!value="Email!Yourself">!
</form>!
Note&that&any&text&placed&between&the&opening&and&closing&textarea&tags&will&show&up&inside&the&text&area&when&
the&browser&views&it.&

&
!
Entities&References&used&in&HTML&

In!HTML!we!cannot!directly!use!the!special!symbols!so!we!use!a!technique!called!Entities!References.!With!this!

we!can!keep!any!symbols!in!a!web!page.!It!takes!a!form:!&Entity_Name;&

Some&of&the&mostly&used&symbols&and&their&corresponding&entities&are&as&follows:!

Result& Description& Entity&Name& &

!! nonBbreaking!space! &nbsp;! !
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<! less!than! &lt;! !

>! greater!than! &gt;! !
&! ampersand! &amp;! !
"! quotation!mark! &quot;! !
'! apostrophe!! &apos;!(does!not!work!in!IE)! !
! cent! &cent;! !
! pound! &pound;! !
! yen! &yen;! !
! euro! &euro;! !
! section! &sect;! !
! copyright! &copy;! !
! registered!trademark! &reg;! !
! multiplication! &times;! !
! division! &divide;! !
! ! ! ! ! ! ! And!more!

What&is&HTML5?!

HTML5!is!the!latest!standard!for!HTML.!The!previous!version!of!HTML,!HTML!4.01,!came!in!1999,!and!
the!Internet!has!changed!significantly!since!then.!HTML5!was!designed!to!replace!both!HTML!4!and!
XHTML.!

It! was! specially! designed! to! deliver! rich! content! without! the! need! for! additional! plugins.! The! current!
version!delivers!everything!from!animation!to!graphics,!music!to!movies,!and!can!also!be!used!to!build!
complicated!web!applications.!

HTML5! is! also! crossBplatform.! It! is! designed! to! work! whether! you! are! using! a! PC,! or! a! Tablet,! a!
Smartphone,!or!a!Smart!TV.!

!
How&Did&HTML5&Get&Started?!

HTML5! is! cooperation! between! the! World! Wide! Web! Consortium! (W3C)! and! the! Web! Hypertext!
Application!Technology!Working!Group!(WHATWG).!

WHATWG! was! working! with! web! forms! and! applications,! and! W3C! was! working! with! XHTML! 2.0.! In!
2006,!they!decided!to!cooperate!and!create!a!new!version!of!HTML.!

Some&rules&for&HTML5&were&established:&

New!features!should!be!based!on!HTML,!CSS,!DOM,!and!JavaScript!
The!need!for!external!plugins!(like!Flash)!should!be!reduced!
Error!handling!should!be!easier!than!in!previous!versions!
Scripting!has!to!be!replaced!by!more!markup!
HTML5!should!be!deviceBindependent!
The!development!process!should!be!visible!to!the!public!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

&
The&HTML5&<!DOCTYPE>!

In!HTML5!there!is!only!one!<!doctype>!declaration,!and!it!is!very!simple:!

<!DOCTYPE!html>!
!
!
A&Minimum&HTML5&Document!

Below!is!a!simple!HTML5!document,!with!the!minimum!of!required!tags:!

<!DOCTYPE&html>&
<html>&
<head>&
<meta&charset="UTFV8">&
<title>Title!of!the!document</title>&
</head>&
&
<body>&
Content!of!the!document......&
</body>&
&
</html>&
!
!
HTML5&\&New&Features!

Some&of&the&most&interesting&new&features&in&HTML5&are:&

The!<canvas>!element!for!2D!drawing!
The!<video>!and!<audio>!elements!for!media!playback!
New!contentBspecific!elements,!like!<article>,!<footer>,!<header>,!<nav>,!<section>!
New!form!controls,!like!calendar,!date,!time,!email,!url,!search!

There are a bunch of new syntaxes added, but below I am listing the most important.

<article> this tag defines an article, a user comment or a post, so an independent item of content
<aside> the aside tag marks content aside from the page content, which for example could be a
lateral sidebar
<header>, <footer> you wont need to manually name IDs for headers and footers, as now you
have a pre-defined tag for them
<nav> the navigation can now be placed in the markup in between the nav tags, which will
automatically make your lists act like navigation
<section> this is another important new syntax, as it can define any kind of sections in your
document. It works pretty much like a div which separates different sections.
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<audio>, <video> these two obviously mark sound or video content, which will now be easier to
run by devices.
<embed> this new tag defines a container for interactive content (plugin) or external application
<canvas> the canvas tag is quite exciting, as it allows drawing graphics via scripting (mostly
JavaScript, but some others can be employed as well)

&

The! following! tags! from! HTML! 4.01! are! now! removed! from! HTML5;! therefore! browsers! do! not! offer!

support!for!them!anymore.!This!means!that!it!is!a!good!idea!to!go!back!to!your!HTML!pages!and!check!

for!them,!as!they!might!disrupt!the!design!in!the!latest!browsers.&

<acronym>!
<applet>!
<basefont>!
<big>!
<center>!
<dir>!
<font>!
<frame>!
<frameset>!
<noframes>!
<strike>!
<tt>!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

The&<audio>&tag&defines&sound,&such&as&music&or&other&audio&streams.&

<audio!controls>!
!!<source!src="horse.ogg"!type="audio/ogg">!
!!<source!src="horse.mp3"!type="audio/mpeg">!
!!Your!browser!does!not!support!the!audio!tag.!
</audio>!

Currently,!there!are!3!supported!file!formats!for!the!<audio>!element:!MP3,!Wav,!and!Ogg:!

Browser& MP3& Wav& Ogg&

Internet!Explorer! YES! NO! NO!

Chrome! YES! YES! YES!

Firefox! YES! YES! YES!

Safari! YES! YES! NO!

Opera! NO! YES! YES!

MIME&Types&for&Audio&Formats&

Format& MIME\type&

MP3! audio/mpeg!

Ogg! audio/ogg!

Wav! audio/wav!

Attributes&

Attribute& Value& Description&

autoplay ! autoplay! Specifies!that!the!audio!will!start!playing!as!soon!as!it!is!ready!

controls ! controls! Specifies!that!audio!controls!should!be!displayed!(such!as!a!play/pause!button!etc).!

loop ! loop! Specifies!that!the!audio!will!start!over!again,!every!time!it!is!finished!

muted ! muted! Specifies!that!the!audio!output!should!be!muted!

preload ! auto! Specifies!if!and!how!the!author!thinks!the!audio!should!be!loaded!when!the!page!

metadata! loads!
none!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

src ! URL! Specifies!the!URL!of!the!audio!file!

The&<video>&tag&specifies&video,&such&as&a&movie&clip&or&other&video&streams.&

<video!width="320"!height="240"!controls>!
!!<source!src="movie.mp4"!type="video/mp4">!
!!<source!src="movie.ogg"!type="video/ogg">!
!!Your!browser!does!not!support!the!video!tag.!
</video>!

Currently,!there!are!3!supported!video!formats!for!the!<video>!element:!MP4,!WebM,!and!Ogg:!

Browser& MP4& WebM& Ogg&

Internet!Explorer! YES! NO! NO!

Chrome! YES! YES! YES!

Firefox! YES! YES! YES!

Safari! YES! NO! NO!

Opera! NO! YES! YES!

MIME&Types&for&Video&Formats&

Format& MIME\type&

MP4! video/mp4!

WebM! video/webm!

Ogg! video/ogg!

Attributes&

Attribute& Value& Description&

autoplay ! autoplay! Specifies!that!the!video!will!start!playing!as!soon!as!it!is!ready!

controls ! controls! Specifies!that!video!controls!should!be!displayed!(such!as!a!play/pause!button!etc).!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

height ! pixels! Sets!the!height!of!the!video!player!

loop ! loop! Specifies!that!the!video!will!start!over!again,!every!time!it!is!finished!

muted ! muted! Specifies!that!the!audio!output!of!the!video!should!be!muted!

poster ! URL! Specifies!an!image!to!be!shown!while!the!video!is!downloading,!or!until!the!user!hits!the

play!button!

preload ! auto! Specifies!if!and!how!the!author!thinks!the!video!should!be!loaded!when!the!page!loads!

metadata!
none!

src ! URL! Specifies!the!URL!of!the!video!file!

width ! pixels! Sets!the!width!of!the!video!player!

!
!

<canvas>&

The HTML5 <canvas> tag is used to draw graphics, on the fly, via scripting (usually JavaScript).
However, the <canvas> element has no drawing abilities of its own (it is only a container for
graphics) - you must use a script to actually draw the graphics.

<canvas!id="myCanvas"></canvas>!
[More&on&Chapter&3&&JavaScript]&

<iframe>&
An iframe is used to display a web page within a web page.
&

<iframe src="URL"></iframe> - The URL points to the location of the separate page.

<iframe src="demoiframe.htm" width="200" height="200"></iframe>

<iframe src="demoiframe.htm" frameborder="0"></iframe>

<iframe src="demoiframe.htm" name="myiframe"></iframe>

<p><a href="http://www.w3schools.com" target=" myiframe">W3Schools.com</a></p>
&

<iframe width="853" height="480"

src="//www.youtube.com/embed/stZchtUEau4?list=UUe2TabHBHSUMz2P_nQH-w_g"

frameborder="0" allowfullscreen></iframe>
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<embed>&
The <embed> tag defines a container for an external application or interactive content (a plug-in
like flash)

<embed src="helloworld.swf">
&

Attribute& Value& Description&

height ! pixels! Specifies!the!height!of!the!embedded!content!

src ! URL! Specifies!the!address!of!the!external!file!to!embed!

type ! MIME_type! Specifies!the!MIME!type!of!the!embedded!content!

width ! pixels! Specifies!the!width!of!the!embedded!content!

&

<embed type="video/quicktime" src="movie.mov" width="640" height="480">

<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>
&

Points&for&review:&

- HTML!stands!for!Hyper!Text!Markup!Language.!

- HTML!file!consist!of!tags!also!called!markups!to!display!information!in!an!arranged!way.!

- Tags!in!HTML!are!predefined!i.e.!we!cannot!create!our!own!tags.!!

- Web!browser!is!application!software!that!is!used!to!view!web!pages!created!using!HTML.!

- HTML!document!is!mainly!divided!into!two!parts:!head!and!body.!

- The!current!version!of!HTML!that!we!are!using!now!is!HTML4.!

- W3C!stands!for!World!Wide!Web!consortium!is!a!body!which!looks!after!the!standardization!of!HTML!

language.!

- HTML!file!ends!with!.htm!or!.html!extension.!

- Every!starting!tag!has!its!corresponding!ending!tag!in!HTML!for!e.g.!<b>!.!</b>.!

- HTML!also!has!empty!tags!like!<br!/>!which!is!used!to!break!row.!

- The!browser!ignores!comments.!!<!BB!!!!!BB>!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

- Tag!can!also!have!attributes,!which!are!used!to!define!the!properties!of!a!tag.!

For!e.g.!<p!align=center>!!</p>!

- Character!entities!are!used!to!display!some!special!characters,!which!cannot!be!typed!from!the!keyboard.!It!

is!also!used!to!display!some!of!the!characters,!which!are!forbidden!to!be!written!as!element!content.!

HTML&Editors!

A2HTML! editor2is2 an2 authoring2 software2 program2 that2 is2 used2 to2 create2 content2 for2 web2 sites.2
HTML2software2is2easy2to2use2since2it2has2a2feature2that2is2known2as2WYSIWYG.! 2

Examples:!
- Vim2Editor,2gEdit2Editor,2Emacs2Editor,2BlueFish2Editor2(Linux)2
- Notepad,2Wordpad,2Notepad+2(Windows)2
- BlueFish2Editor,2TextEdit,2TextWrangler2(Mac)2
2

WYSIWYG!2!What)You)See)Is)What)You)Get.2The2term2is2used2in2computing2to2describe2a2system2in2
which2 content2 (text2 and2 graphics)2 displayed2 onscreen2 during2 editing2 appears2 in2 a2 form2 exactly2
corresponding2to2its2appearance2when2printed2or2displayed2as2a2finished2product,2which2might2be2
a2printed2document,2web2page,2or2slide2presentation.2

WYSIWYG2implies2a2user2interface2that2allows2the2user2to2view2something2very2similar2to2the2end2
result2 while2 the2document2is2 being2 created.2 In2 general2 WYSIWYG2 implies2 the2 ability2 to2 directly2
manipulate2 the2layout2of2 a2 document2 without2 having2 to2 type2 or2 remember2 names2 of2 layout2
commands.2The2actual2meaning2depends2on2the2user's2perspective.2
!
Examples:!
R2Adobe2Dreamweaver2(With2this2software2user2can2view2the2output2as2he2writes2the2HTML2code.)2
R2Microsoft2Front2Page2
2
&
&
&
&
! &
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

CHAPTER&04&&CASCADING&STYLE&SHEETS&(CSS)&

- CSS!is!an!acronym!for!Cascading!Style!Sheets.!
- A!CSS!(Cascading!Style!Sheet)!file!allows!to!separate!your!web!sites!HTML!content!from!its!style.!HTML!file!is!
used!to!arrange!the!content,!but!all!of!the!presentation!(fonts,!colors,!background,!borders,!text!formatting,!
link!effects!&!so!on)!is!accomplished!with!a!CSS.!
- Styles!define!how&to&display!HTML!elements!
- External&Style&Sheets!can!save!a!lot!of!work!
- External!Style!Sheets!are!stored!in!*.CSS&files!

&&
What&can&be&done&with&CSS?!

CSS!is!a!style!language!that!defines!layout!of!HTML!documents.!For!example,!CSS!covers!fonts,!colors,!margins,!
lines,!height,!width,!background!images,!advanced!positions!and!many!other!things.!

CSS!offers!more!options!and!is!more!accurate!and!sophisticated!on!designing!web!sites.!All!browsers!support!
CSS.!

&
What&is&the&difference&between&CSS&and&HTML?!

HTML!is!used!to!structure!content.!CSS!is!used!for!formatting!structured!content.!

Back! in! the! good! old! days! when! a! guy! called! Tim! Berners! Lee! invented! the! World! Wide! Web,! the! language!
HTML!was!only!used!to!add!structure!to!text.!An!author!could!mark!his!text!by!stating,!"this!is!a!headline"!or!
"this!is!a!paragraph"!using!HTML!tags!such!as!<h1>!and!<p>.!

As!the!Web!gained!popularity,!designers!started!looking!for!possibilities!to!add!layout!to!online!documents.!To!
meet! this! demand,! the! browser! producers! (at! that! time! Netscape! and! Microsoft)! invented! new! HTML! tags!
such!as!for!example!<font>!which!differed!from!the!original!HTML!tags!by!defining!layout!B!and!not!structure.!
This! also! led! to! a! situation! where! original! structure! tags! such! as! <table>! were! increasingly! being! misused! to!
layout!pages!instead!of!adding!structure!to!text.!Many!new!layout!tags!such!as!<blink>!were!only!supported!by!
one!type!of!browser.!"You!need!browser!X!to!view!this!page."!became!a!common!disclaimer!on!web!sites.!

CSS!was!invented!to!remedy!this!situation!by!providing!web!designers!with!sophisticated!layout!opportunities!
supported! by! all! browsers.! At! the! same! time,! separation! of! the! presentation! style! of! documents! from! the!
content!of!documents!makes!site!maintenance!a!lot!easier.!

&
Which&benefits&will&CSS&give?!

CSS!was!a!revolution!in!the!world!of!web!design.!The!concrete!benefits!of!CSS!include:!

Control!layout!of!many!documents!from!one!single!style!sheet;!
More!precise!control!of!layout;!
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Apply!different!layout!to!different!mediaBtypes!(screen,!print,!etc.)!
Numerous!advanced!and!sophisticated!techniques.!

The&basic&CSS&syntax&

Let's!say!we!want!a!nice!red!color!as!the!background!of!a!webpage:!

Using!HTML!we!could!have!done!it!like!this:!

! !! <body!bgcolor="#FF0000">!! !! !

With!CSS!the!same!result!can!be!achieved!like!this:!

! !! body&{background\color:&#FF0000;}!! !! !

As!you!will!note,!the!codes!are!more!or!less!identical!for!HTML!and!CSS.!The!above!example!also!shows!you!the!
fundamental!CSS!model:!

CSS&Comments!

Comments!are!used!to!explain!your!code,!and!may!help!you!when!you!edit!the!source!code!at!a!later!date.!
Browsers!ignore!comments.!A!CSS!comment!begins!with!"/*",!and!ends!with!"*/",!like!this:!

/* This is a comment */
p
{
text-align:center;

/* This is another comment */

}
&
Applying&CSS&to&an&HTML&document!

There!are!three!ways!you!can!apply!CSS!to!an!HTML!document.!These!methods!are!all!outlined!below.!We!
recommend!that!you!focus!on!the!third!method!i.e.!external.!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
 http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Method&1:&In\line&(the&attribute&style)&

One!way!to!apply!CSS!to!HTML!is!by!using!the!HTML!attribute!style.!Building!on!the!above!example!with!
the!red!background!color,!it!can!be!applied!like!this:!

<html>!
<head>!<title>Example</title></head>!
<body&style="background\color:&#FF0000;">&
& <p>This!is!a!red!page</p>!
</body>!
</html>!! !

Method&2:&Internal&(the&tag&style)&

Another!way!is!to!include!the!CSS!codes!using!the!HTML!tag!<style>.!For!example!like!this:!

<html>!
<head>!
! <title>Example</title>!!
& <style&type="text/css">!! ! !!!
! ! body&{background\color:&#FF0000;}!! ! !
! </style>!! !!!
</head>!! !!!
<body>!!
! <p>This!is!a!red!page</p>!! !!!
</body>!! !
</html>!! !

Method&3:&External&(link&to&a&style&sheet)&

The!recommended!method!is!to!link!to!a!soBcalled!external!style!sheet.!An!external!style!sheet!is!simply!a!text!
file!with!the!extension!.css.!Like!any!other!file,!you!can!place!the!style!sheet!on!your!web!server!or!hard!disk.!

For!example,!let's!say!that!your!style!sheet!is!named!style.css!and!is!located!in!a!folder!named!style.!The!
situation!can!be!illustrated!like!this:!

The!trick!is!to!create!a!link!from!the!HTML!document!
(default.htm)!to!the!style!sheet!(style.css).!Such!link!can!be!
created!with!one!line!of!HTML!code:!

<link!rel="stylesheet"!type="text/css"!href="style/style.css"!/>!! !

Notice!how!the!path!to!our!style!sheet!is!indicated!using!the!attribute!href.!The!line!of!code!must!be!inserted!in!
the!header!section!of!the!HTML!code!i.e.!between!the!<head>!and!</head>!tags.!Like!this:!

<html>!!
<head>!!
<title>My!document</title>!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

! <link&rel="stylesheet"&type="text/css"&href="style/style.css"&/>!
</head>!
<body>!
! &&&...&& &

This!link!tells!the!browser!that!it!should!use!the!layout!from!the!CSS!file!when!displaying!the!HTML!file.!The!really!
smart!thing!is!that!several!HTML!documents!can!be!linked!to!the!same!style!sheet.!In!other!words,!one!CSS!file!
can!be!used!to!control!the!layout!of!many!HTML!documents.!

This!technique!can!save!you!a!lot!of!work.!If!you,!for!example,!would!like!to!change!the!background!color!of!a!
website!with!100!pages,!a!style!sheet!can!save!you!from!having!to!manually!change!all!100!HTML!documents.!
Using!CSS,!the!change!can!be!made!in!a!few!seconds!just!by!changing!one!code!in!the!central!style!sheet.!

CSS&Classes&

The! class! selector! allows! to! style! items! within! the! same! HTML!element!differently.! Same!class!selector! can! be!
used!again!and!again!within!an!HTML!file.!

This&style&will&be&applied&to&all&<p>&tags.&

p!{!!

!!fontBsize:!small;!!

!!color:!#333333!

}!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

But!lets!say!that!we!wanted!to!change!some!words!to!green!bold!text!within!the!paragraph,!while!leaving!
the!rest!of!the!sentence!untouched.!We!would!do!the!following:!!

.greenBoldText!

{!!

!!fontBsize:!small;!!

!!color:!#008080;!

!!fontBweight:!bold;!

}!

<p>!This!is!main!paragraph,!it!contains!<span!class=greenboldtext>Green!Bold!Text</span>!and!it!still!
continues!with!main!formatting.!</p>!

CSS&IDs&

IDs are similar to classes, except once a specific id has been declared it cannot be used again within the
same HTML file.

Use IDs to style the layout elements of a page that will only be needed once and use classes to style text
and such that may be declared multiple times.

The main container for this page is defined by the following.

<div id=container>
Everything within my document is inside this division.
</div>

Here, id selector is chosen for the container division over a class, because it will be used one time only
within the file.

CSS file looks following:

#container
{
width: 80%;
margin: auto;
padding: 20px;
border: 1px solid #666;
background: #ffffff;
}

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Note: The id selector begins with a (#) sign instead of a (.)

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3
{
color:red;
text-align:left;
font-size:8pt;
}

And an internal style sheet has these properties for the h3 selector:

h3
{
text-align:right;
font-size:20pt;
}

If the page with the internal style sheet also links to the external style sheet the
properties for h3 will be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-
size is replaced by the internal style sheet.

Mostly&Used&CSS2.0&Properties&
Background&Properties& &
Property& Description& Possible&Values& Examples&

backgroundBattachment! Declares!the!attachment!of! fixed& div&{&backgroundV

a!background!image!(to! scroll& attachment:fixed;&}&
scroll!with!the!page!
content!or!be!in!a!fixed! div&{&backgroundV
position).! attachment:scroll;&}&

backgroundBcolor! Declares!the!background! Valid!color!names,!RGB! div&{&backgroundVcolor:green;&}&

color.! values,!hexadecimal!notation.!
div&{&color:#00FF00;&}&

backgroundBimage! Declares!the!background! URL!values.! div&{&backgroundV

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

image!of!an!element.! image:url(images/img.jpg);&}&

body&{&backgroundV
image:url(img.jpg);&}&

backgroundBposition! Declares!the!position!of!a! top&left& div&{&backgroundVposition:10px&

background!image.! top&center& 50px;&}&
top&right&
center&left& div&{&backgroundVposition:bottom&
center&center& right;&}&
center&right&
bottom&left&
bottom&center&
bottom&right&

backgroundBrepeat! Declares!how!and/or!if!a! repeat& div&{&backgroundVrepeat:repeatVx;&

background!image!repeats.! repeatVx& }&
repeatVy&
noVrepeat& div&{&backgroundVrepeat:noV
repeat;&}&

background! Used!as!a!shorthand! Separate!values!by!a!space!in! div&{&background:green&

property!to!set!all!the! the!following!order!(those! url(image.jpg)&noVrepeat&fixed&
background!properties!at! that!are!not!defined!will!use! center&center;&}&
once.! inherited!or!default!initial!
values):! div&{&background:url(image.jpg)&
fixed;&}&
backgroundVcolor&
backgroundVimage&
backgroundVrepeat&&
backgroundVattachment&&
backgroundVposition&
&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Border Properties
Property& Description& Possible&Values& Examples&

borderBtopBcolor! Declares!the!color!of! Valid!color!names,!RGB!values,!hexidecimal!notation,! div&{&borderVtopV

the!top!border.! or!the!predefined!value!transparent.! color:green;&}&

div&{&borderVtopV
color:#00FF00;&}&

borderBtopBstyle! Declares!the!style!of! none& div&{&borderVtopV

the!top!border.! hidden& style:solid;&}&
dotted&
dashed& div&{&borderVtopV
solid& style:inset;&}&
double&
groove&
ridge&
inset&
outset&

borderBtopBwidth! Declares!the!width!of! Lengths!or!the!following!predefined!values:! div&{&borderVtopV

the!top!border.! width:2px;&}&
thin&
medium& div&{&borderVtopV
thick& width:thin;&}&

borderBtop! Used!as!a!shorthand! Separate!values!by!a!space!in!the!following!order! div&{&borderV

property!to!set!all!the! (those!that!are!not!defined!will!use!inherited!or!default! top:2px&solid&
borderBtop! initial!values):! green;&}&
properties!at!once.!
borderVtopVwidth& div&{&borderV
borderVtopVstyle& top:thick&double&
borderVtopVcolor& #00FF00;&}&

borderBrightBcolor! Declares!the!color!of! Valid!color!names,!RGB!values,!hexadecimal!notation,! div&{&borderVrightV

the!right!border.! or!the!predefined!value!transparent.! color:green;&}&

div&{&borderVrightV
color:#00FF00;&}&

borderBrightBstyle! Declares!the!style!of! none& div&{&borderVrightV

the!right!border.! hidden& style:solid;&}&
dotted&
dashed& div&{&borderVrightV
solid& style:inset;&}&
double&
groove&
ridge&
inset&
outset&

borderBrightBwidth! Declares!the!width!of! Lengths&or&the&following&predefined&values:& div&{&borderVrightV

the!right!border.! width:2px;&}&
thin&
medium& div&{&borderVrightV
thick& width:thin;&}&

borderBright! Used!as!a!shorthand! Separate!values!by!a!space!in!the!following!order! div&{&borderV

property!to!set!all!the! (those!that!are!not!defined!will!use!inherited!or!default! right:2px&solid&
borderBright! initial!values):! green;&}&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

properties!at!once.!
borderVrightVwidth& div&{&borderV
borderVrightVstyle& right:thick&double&
borderVrightVcolor& #00FF00;&}&

borderBbottomBcolor! Declares!the!color!of! Valid!color!names,!RGB!values,!hexidecimal!notation,! div&{&borderV

the!bottom!border.! or!the!predefined!value!transparent.! bottomV
color:green;&}&

div&{&borderV
bottomV
color:#00FF00;&}&

borderBbottomBstyle! Declares!the!style!of! none& div&{&borderV

the!bottom!border.! hidden& bottomV
dotted& style:solid;&}&
dashed&
solid& div&{&borderV
double& bottomV
groove& style:inset;&}&
ridge&
inset&
outset&

borderBbottomBwidth! Declares!the!width!of! Lengths!or!the!following!predefined!values:! div&{&borderV

the!bottom!border.! bottomV
thin& width:2px;&}&
medium&
thick& div&{&borderV
bottomV
width:thin;&}&

borderBbottom! Used!as!a!shorthand! Separate!values!by!a!space!in!the!following!order! div&{&borderV

property!to!set!all!the! (those!that!are!not!defined!will!use!inherited!or!default! bottom:2px&solid&
borderBbottom! initial!values):! green;&}&
properties!at!once.!
borderVbottomVwidth& div&{&borderV
borderVbottomVstyle& bottom:thick&
borderVbottomVcolor& double&#00FF00;&}&

borderBleftBcolor! Declares!the!color!of! Valid!color!names,!RGB!values,!hexidecimal!notation,! div&{&borderVleftV

the!left!border.! or!the!predefined!value!transparent.! color:green;&}&

div&{&borderVleftV
color:#00FF00;&}&

borderBleftBstyle! Declares!the!style!of! none& div&{&borderVleftV

the!left!border.! hidden& style:solid;&}&
dotted&
dashed& div&{&borderVleftV
solid& style:inset;&}&
double&
groove&
ridge&
inset&
outset&

borderBleftBwidth! Declares!the!width!of! Lengths!or!the!following!predefined!values:! div&{&borderVleftV

the!left!border.! width:2px;&}&
thin&
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

medium&
thick& div&{&borderVleftV
width:thin;&}&

borderBleft! Used!as!a!shorthand! Separate!values!by!a!space!in!the!following!order! div&{&borderV

property!to!set!all!the! (those!that!are!not!defined!will!use!inherited!or!default! left:2px&solid&
borderBleft! initial!values):! green;&}&
properties!at!once.!
borderVleftVwidth& div&{&borderV
borderVleftVstyle& left:thick&double&
borderVleftVcolor& #00FF00;&}&

borderBcolor! Declares!the!border! Valid!color!names,!RGB!values,!hexidecimal!notation,! div&{&borderV

color!of!all!four! or!the!predefined!value!transparent.! color:green&red&
borders!at!once.! blue&olive;&}&
Separate!the!color!for!each!border!by!a!space,!
declaring!the!colors!for!the!borders!in!the! div&{&borderV
following!order:! color:green;&}&

borderBtopBcolor! div&{&borderV
borderBrightBcolor! color:green&red;&}&
borderBbottomBcolor!
borderBleftBcolor! div&{&borderV
color:green&red&
Undeclared! values! work! as! further! shorthand! blue;&}&
notation.!If!only!one!color!value!is!declared,!all!four!
borders! will! use! that! color.! If! two! colors! are!
declared,! the! top! and! bottom! borders! will! use! the!
first! color! while! the! right! and! left! borders! will! use!
the! second! color.! If! three! colors! are! declared,! the!
top!border!will!use!the!first!color,!the!right!and!left!
borders! will! use! the! second! color,! and! the! bottom!
border!will!use!the!third!color.!

borderBstyle! Declares!the!border! none& div&{&borderV

style!of!all!four! hidden& style:solid&dotted&
borders!at!once.! dotted& dashed&double;&}&
dashed&
solid& div&{&borderV
double& style:solid;&}&
groove&
ridge& div&{&borderV
inset& style:solid&dotted;&
outset& }&

div&{&borderV
style:solid&dotted&
dashed;&}&

borderBwidth! Declares!the!width!of! Lengths!or!the!following!predefined!values:! div&{&borderV

all!four!borders!at! width:1px&3px&
once.! thin& 5px&2px;&}&
medium&
thick& div&{&borderV
width:thin;&}&

border! Used!as!a!shorthand! Separate!values!by!a!space!in!the!following!order! div&{&border:1px&

to!declare!the!border! (those!that!are!not!defined!will!use!inherited!or!default! double&green;&}&
properties!when!all! initial!values):!
four!borders!will! div&{&border:thin&
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

have!the!same! solid&#00FF00;&}&
appearance.! borderVwidth&
borderVstyle&
borderVcolor&

&
Classification&and&Positioning&Properties&
Property& Description& Possible&Values& Examples&

clear! Declares!the!side(s)!of!an!element!where!no!previous! left& div&{&clear:right;&}&

floating!elements!are!allowed!to!be!adjacent.! right&
both& div&{&clear:both;&}&
none&

cursor! Declares!the!type!of!cursor!to!be!displayed.! URL!values,!and!the! div&{&cursor:crosshair;&}&

following!prefefined!
values:! div&{&
cusrsor:url(image.csr);&}&
auto&
crosshair& div&{&
default& cusrsor:url(image.csr),&
pointer& pointer;&}&
move&
eVresize&
neVresize&
nwVresize&
nVresize&
seVresize&
swVresize&
sVresize&
wVresize&
text&
wait&
help&

display! Declares!if/how!the!element!displays.! none& div&{&display:none;&}&

inline&
block& div&{&display:inline;&}&
listVitem&
runVin& div&{&display:marker;&}&
compact&
marker&
table&
inlineVtable&
tableVrowVgroup&
tableVheaderVgroup&
tableVfooterVgroup&
tableVrow&
tableVcolumnVgroup&
tableVcolumn&
tableVcell&
tableVcaption&

float! Declares!whether!a!box!should!float!to!the!left!or!right! left& div&{&float:left;&}&

of!other!content,!or!whether!it!should!not!be!floated!at! right&
all.! none& div&{&float:right;&}&

visibility! Declares!the!visibility!of!boxes!generated!by!an!element.! visible! div&{&visibility:visible;&}&

hidden!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

collapse!
div&{&visibility:hidden;&}&

top! Declares!the!distance!that!the!top!content!edge!of!the! Lengths,! div&{&top:15px;&}&

element!is!offset!below!the!top!edge!of!its!containing! percentages,!and!the!
block.!The!position!property!of!the!element!must!also! predefined!value! div&{&top:2%;&}&
be!set!to!a!value!other!than!static.! auto.!

right! Declares!the!distance!that!the!right!content!edge!of!the! Lengths,! div&{&right:15px;&}&

element!is!offset!to!the!left!of!the!right!edge!of!its! percentages,!and!the!
containing!block.!The!position!property!of!the!element! predefined!value! div&{&right:2%;&}&
must!also!be!set!to!a!value!other!than!static.! auto.!

bottom! Declares!the!distance!that!the!bottom!content!edge!of! Lengths,! div&{&bottom:15px;&}&

the!element!is!offset!above!the!bottom!edge!of!its! percentages,!and!the!
containing!block.!The!position!property!of!the!element! predefined!value! div&{&bottom:2%;&}&
must!also!be!set!to!a!value!other!than!static.! auto.!

left! Declares!the!distance!that!the!left!content!edge!of!the! Lengths,! div&{&left:15px;&}&

element!is!offset!to!the!right!of!the!left!edge!of!its! percentages,!and!the!
containing!block.!The!position!property!of!the!element! predefined!value! div&{&left:2%;&}&
must!also!be!set!to!a!value!other!than!static.! auto.!

position! Declares!the!type!of!positioning!of!an!element.! static& div&{&position:absolute;&}&

relative&
absolute& div&{&position:relative;&}&
fixed&

clip! Declares!the!shape!of!a!clipped!region!when!the!value!of! Shapes,!or!the! div&{&clip:auto;&}&

the!overflow!property!is!set!to!a!value!other! predefined!
than!visible.! value!auto.! div&{&clip:rect(2px,&4px,&
7px,&5px);&}&
rect(top,&right,&
bottom,&left)&

overflow! Declares!how!content!that!overflows!the!element's!box! visible& div&{&overflow:hidden;&}&

is!handled.! hidden&
scroll& div&{&overflow:scroll;&}&
auto&

verticalBalign! Declares!the!vertical!alignment!of!an!inlineBlevel! Lengths,! span&{&verticalV

element!or!a!table!cell.! percentages,!and!the! align:middle;&}&
following!predefined!
values:! td&{&verticalValign:top;&}&

baseline&
sub&
super&
top&
textVtop&
middle&
bottom&
textVbottom&

zBindex! Declares!the!stack!order!of!the!element.! Integer!values!and! div&{&zVindex:2;&}&

the!predefined!
value!auto.! div&{&zVindex:auto;&}&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

&
Dimension&Properties&
Property& Description& Possible&Values& Examples&

height! Declares!the!height!of!the!element.! Lengths,!percentages,!and!the!predefined! div&{&height:200px;&}&

value!auto.!
div&{&height:50%;&}&

maxBheight! Declares!the!maximum!height!of!the! Lengths,!percentages,!and!the!predefined! div&{&maxV

element.! value!auto.! height:200px;&}&

div&{&maxVheight:50%;&
}&

minBheight! Declares!the!minimum!height!of!the! Lengths,!percentages,!and!the!predefined! div&{&minV

element.! value!auto.! height:200px;&}&

div&{&minVheight:50%;&
}&

width! Declares!the!width!of!the!element.! Lengths,!percentages,!and!the!predefined! div&{&width:500px;&}&

value!auto.!
div&{&width:75%;&}&

maxBwidth! Declares!the!maximum!width!of!the! Lengths,!percentages,!and!the!predefined! div&{&maxV

element.! value!auto.! width:500px;&}&

div&{&maxVwidth:75%;&}&

minBwidth! Declares!the!minimum!width!of!the! Lengths,!percentages,!and!the!predefined! div&{&minVwidth:500px;&

element.! value!auto.! }&

div&{&minVwidth:75%;&}&
Font!Properties!
Property& Description& Possible&Values& Examples&

fontBfamily! Declares!the!name!of!the!font!to! Valid!font!family!names!or!generic!family!names,! div&{&fontV

be!used.!Previously!set!in!HTML! i.e.!Arial,!Verdana,!sansVserif,"Times&New& family:Arial;&}&
via!the!face&attribute!in!a!<font>! Roman",!Times,!serif,!etc.!
tag.! div&{&fontV
Font!family!names!can!be!separated!by!a! family:Arial,&
comma!in!the!same!declaration!to!allow! Helvetica,&sansVserif;&
additional!and/or!generic!family!names!to! }&
be!used!if!the!preferred!font!is!unable!to!
be!displayed.!

fontBsize! Declares!the!size!of!the!font.! Lengths!(number!and!unit!type! div&{&fontVsize:70%;&}&

Previously!set!in!HTML!via! i.e.!1em,12pt,!10px,!80%)!or!one!of!the!following!
the!size!attribute!in!a!<font>!tag.! predefined!values:! div&{&fontV
size:0.85em;&}&
xxVsmall&
xVsmall& div&{&fontV
small& size:medium;&}&
medium&
large&
xVlarge&
xxVlarge&
smaller&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

larger&

fontBstyle! Declares!the!font!style.! normal& div&{&fontVstyle:italic;&

italic& }&
oblique&
div&{&fontV
style:oblique;&}&

fontBvariant! Declares!the!font!variant.! normal& div&{&fontV

smallVcaps& variant:normal;&}&

div&{&fontV
variant:smallVcaps;&}&

fontBweight! Declares!the!font!weight! normal& div&{&fontV

(lightness!or!boldness)! bold& weight:bolder;&}&
bolder&
lighter& div&{&fontV
100& weight:200;&}&
200&
300&
400&
500&
600&
700&
800&
900&

font! Used!as!a!shorthand!property!to! Separate!values!by!a!space!in!the!following!order! div&{&font:italic&

declare!all!of!the!font!properties! (those!that!are!not!defined!will!use!inherited!or! smallVcaps&bold&1em&
at!once!(except!fontBsizeBadjust! default!initial!values):! 1.2em&Arial&}&
and!fontBstretch).!
fontVstyle& div&{&font:bold&0.8em&
fontVvariant& Verdana&}&
fontVweight&
fontVsize&
lineVheight&
fontVfamily&

&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

List Properties
Property& Description& Possible&Values& Examples&

listBstyleBtype! Declares!the!type!of!list!marker! disc& ol&{&listVstyleVtype:upperV

used.! circle& roman;&}&
square&
decimal& ul&{&listVstyleVtype:square;&}&
decimalVleadingVzero&
lowerVroman&
upperVroman&
lowerValpha&
upperValpha&
lowerVgreek&
lowerVlatin&
upperVlatin&

listBstyleBposition! Declares!the!position!of!the!list! inside& ol&{&listVstyleV

marker.! outside& position:inside;&}&

ul&{&listVstyleV
position:outside;&}&

listBstyleBimage! Declares!an!image!to!be!used!as!the! URL!values.! ul&{&listVstyleV

list!marker.! image:url(image.jpg);&}&

listBstyle! Shorthand!property!to!declare!three! Separate!values!by!a!space!in!the! ul&{&listVstyle:disc&inside&

list!properties!at!once.! following!order!(those!that!are!not! url(image.gif);&}&
defined!will!use!inherited!or!
default!initial!values):! ol&{&listVstyle:upperVroman&
outside;&}&
listVstyleVtype&
listVstyleVposition&
listVstyleVimage&

markerBoffset! Declares!the!marker!offset!for! Lengths!and!the!predefined! li:before&{&display:marker;&

elements!with!a!value!ofmarker!set! valueauto.! markerVoffset:5px;&}&
for!the!displayproperty.!
!
Margin&Properties&
Property& Description& Possible&Values& Examples&

marginBtop! Declares!the! Lengths,!percentages,!and!the!predefined!value!auto.! div&{&marginVtop:5px;&}&

top!margin!for!
the!element.! div&{&marginVtop:15%;&}&

marginBright! Declares!the! Lengths,!percentages,!and!the!predefined!value!auto.! div&{&marginVright:5px;&}&

right!margin!
for!the! div&{&marginVright:15%;&}&
element.!

marginBbottom! Declares!the! Lengths,!percentages,!and!the!predefined!value!auto.! div&{&marginVbottom:5px;&}&

bottom!margin!
for!the! div&{&marginVbottom:15%;&}&
element.!

marginBleft! Declares!the! Lengths,!percentages,!and!the!predefined!value!auto.! div&{&marginVleft:5px;&}&

left!margin!for!
the!element.! div&{&marginVleft:15%;&}&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

margin! Shorthand! Separate!values!by!a!space!in!the!following!order! div&{&margin:5px&12px&4px&7px;&}&

property!used! (those!that!are!not!defined!will!use!inherited!or!
to!declare!all! default!initial!values):! div&{&margin:5px;&}&
the!margin!
properties!at! marginVtop& div&{&margin:5px&10px;&}&
once.! marginVright&
marginVbottom& div&{&margin:5px&7px&4px;&}&
marginVleft&
!
Padding&Properties&
Property& Description& Possible&Values& Examples&

paddingBtop! Declares!the!top!padding!for! Lengths,!percentages,!and!the!predefined! div&{&paddingV

the!element.! value!auto.! top:5px;&}&

div&{&paddingV
top:15%;&}&

paddingBright! Declares!the!right!padding!for! Lengths,!percentages,!and!the!predefined! div&{&paddingV

the!element.! value!auto.! right:5px;&}&

div&{&paddingV
right:15%;&}&

paddingBbottom! Declares!the!bottom!padding! Lengths,!percentages,!and!the!predefined! div&{&paddingV

for!the!element.! value!auto.! bottom:5px;&}&

div&{&paddingV
bottom:15%;&}&

paddingBleft! Declares!the!left!padding!for! Lengths,!percentages,!and!the!predefined! div&{&paddingV

the!element.! value!auto.! left:5px;&}&

div&{&paddingV
left:15%;&}&

padding! Shorthand!property!used!to! Separate!values!by!a!space!in!the!following!order! div&{&padding:5px&

declare!all!the!margin! (those!that!are!not!defined!will!use!inherited!or! 12px&4px&7px;&}&
properties!at!once.! default!initial!values):!
div&{&padding:5px;&}&
paddingVtop&
paddingVright& div&{&padding:5px&
paddingVbottom& 10px;&}&
paddingVleft&
div&{&padding:5px&
7px&4px;&}&
!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Table Properties
Property& Description& Possible&Values& Examples&

borderBcollapse! Declares!the!way!borders!are! collapse& table&{&borderV

displayed.! separate& collapse:collapse;&}&

table&{&borderV
collapse:separate;&}&

borderBspacing! Declares!the!distance! Lengths!for!the!horizontal!and!vertical!spacing,! table&{&borderV

separating!borders!(if!border\ separated!by!a!space.! spacing:5px;&}&
collapse!isseparate).!
If!one!length!is!value!is!declared,!that!length!is! table&{&borderV
used!for!both!the!horizontal!and!vertical! spacing:5px&10px;&}&
spacing.!If!two!lengths!are!declared,!the!first!one!
is!used!for!horizontal!spacing!and!the!second!
one!is!used!for!vertical!spacing.!

captionBside! Declares!where!the!table! top& caption&{&captionV

caption!is!displayed!in!relation! bottom& side:top;&}&
to!the!table.! left&
right& caption&{&captionV
side:right;&}&

emptyBcells! Declares!the!way!empty!cells! show& table&{&emptyV

are!displayed!(ifborder\ hide& cells:show;&}&
collapseis!separate).!
table&{&emptyV
cells:hide;&}&

tableBlayout! Declares!the!type!of!table! auto& table&{&tableV

layout.! fixed& layout:auto;&}&

table&{&tableV
layout:fixed;&}&
!
Text&Properties&
Property& Description& Possible&Values& Examples&

color! Declares!the!color!of!the! Valid!color!names,!RGB!values,!hexidecimal! div&{&color:green;&}&

text.! notation.!
div&{color:rgb(0,255,0);&}&
aqua&
black& div&{&color:#00FF00;&}&
blue&&
fuchsia&
gray&
green&
lime&
maroon&
navy&
olive&
purple&
red&
silver&
teal&
white&
yellow&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

direction! Declares!the!reading! ltr!=!leftBtoBright! div&{&direction:ltr;&}&

direction!of!the!text.! rtl!=!rightBtoBleft& div&{&direction:rtl;&}&

lineBheight! Declares!the!distance! Numbers,!percentages,!lengths,!and!the! div&{&lineVheight:normal;&}&

between!lines.! predefined!value!of!normal.!
div&{&lineVheight:2em;&}&

div&{&lineVheight:125%;&}&

letterBspacing! Declares!the!amount!of! A!length!(in!addition!to!the!default!space)!or! div&{&letterVspacing:normal;&

space!between!text! the!predefined!value!ofnormal.! }&
characters.!
div&{&letterVspacing:5px;&}&
div&{&letterVspacing:V1px;&}&

textBalign! Declares!the!horizontal! left& div&{&textValign:center;&}&

alignment!of!inline!content.! right&
center& div&{&textValign:right;&}&
justify&

textBdecoration! Declares!the!text!decoration.! none& div&{&textVdecoration:none;&

underline& }&
overline&
lineVthrough& div&{&textV
blink& decoration:underline;&}&

textBindent! Declares!the!indentation!of! Lengths!and!percentages.! div&{&textVindent:12px;&}&

the!first!line!of!text.! div&{&textVindent:2%;&}&

textBshadow! Declares!shadow!effects!on! A!list!containg!a!color!followed!by!numeric! div&{&textVshadow:green&

the!text.! values!(separated!by!spaces)!that!specify:! 2px&2px&7px;&}&

1. The!color!for!the!shadow!effect! div&{&textVshadow:olive&V
2. Horizontal!distance!to!the!right!of! 3px&V4px&5px;&}&
the!text!
3. Vertical!distance!below!the!text!
4. Blur!radius!

textBtransform! Declares!the!capitalization! none& div&{&textV

effects!on!the!letters!in!the! capitalize& transform:uppercase;&}&
text.! uppercase&
lowercase& div&{&textV
transform:lowercase;&}&

wordBspacing! Declares!the!space!between! A!length!(in!addition!to!the!default!space)!or! div&{&wordVspacing:normal;&

words!in!the!text.! the!predefined!value!ofnormal.! }&

div&{&wordVspacing:1.5em;&}&

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

DHTML!

Dynamic! HTML! is! not! really! a! new! specification! of! HTML,! but! rather! a! new! way! of! looking! at! and! controlling! the!

standard! HTML! codes! and! commands.! When! thinking! of! dynamic! HTML,! you! need! to! remember! the! qualities! of!

standard!HTML,!especially!that!once!a!page!is!loaded!from!the!server,!it!will!not!change!until!another!request!comes!

to! the! server.! Dynamic! HTML! gives! you! more! control! over! the! HTML! elements! and! allows! them! to! change! at! any!

time,!without!returning!to!the!Web!server.

There&are&four&parts&to&DHTML:&

Document!Object!Model!(DOM)!

Scripts!

Cascading!Style!Sheets!(CSS)!

HTML!

&

DOM&

The!DOM!is!what!allows!you!to!access!any!part!of!your!Web!page!to!change!it!with!DHTML.!The!DOM!specifies!

every! part! of! a! Web! page! and! using! its! consistent! naming! conventions! you! can! access! them! and! change! their!

properties.!

Scripts!

Scripts!written!in!either!JavaScript!or!VBScript.!

&

Cascading&Style&Sheets&(CSS)!

CSS!is!used!in!DHTML!to!control!the!look!and!feel!of!the!Web!page.!Style!sheets!define!the!colors!and!fonts!of!

text,!the!background!colors!and!images,!and!the!placement!of!objects!on!the!page.!Using!scripting!and!the!DOM,!

you!can!change!the!style!of!various!elements.!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

Practical&Exercises:&

Type the following codes in a notepad and save it as a html page to see the
output. Here in this example we have used tables to divide the content of
web page into different sections.

Question 1:

<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>

<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">

<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0"
border="0"><tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a>
</td>
<!-- ============ RIGHT COLUMN (CONTENT) ============== -->
<td width="80%" valign="top" bgcolor="#d2d8c7">

<h1>Website Logo</h1>
<h2>Page heading</h2>
This is a basic two-column web page layout. The left column or the <i>menu
column</i> is a narrow band of space (usually between 15-25% of the page width) and
is reserved for a menu of hyperlinks leading to other pages on your website. The
table used to create this layout employs a single table row containing two table
cells.<br>
<br>
The right column or the <i>content column</i> takes up the lion's share of the web
page width and contains the actual content of each particular page. In a basic two
column layout like this, it is common to place the website logo at the top of the
content column on each page.</td></tr></table>
</body>
</html>

Question 2:

<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0"
border="0">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website
Logo</h1></td></tr>

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!
<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a>
</td>

<!-- ============ RIGHT COLUMN (CONTENT) ============== -->

<td width="80%" valign="top" bgcolor="#d2d8c7">
<h2>Page heading</h2>

Here's a two column layout with a header section that spans the width of both
columns. The first table row creates the header and contains a single table cell
which uses the colspan="2" attribute-value pair. The website logo typically goes in
the header section.<br>
<br>
The second table row contains two table cells which create the menu column (left)
and the content column (right). The colspan attribute is not set in either so they
default to colspan="1".</td></tr></table>
</body>
</html>

Question 3:

<html>
<head>
<title>WEB PAGE TITLE GOES HERE</title>
</head>
<body style="margin: 0px; padding: 0px; font-family: 'Trebuchet MS',verdana;">
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0"
border="0">
<tr>
<!-- ============ HEADER SECTION ============== -->
<td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website
Logo</h1></td></tr>

<tr>
<!-- ============ LEFT COLUMN (MENU) ============== -->
<td width="20%" valign="top" bgcolor="#999f8e">
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a><br>
<a href="#">Menu link</a>
</td>

<!-- ============ RIGHT COLUMN (CONTENT) ============== -->

<td width="80%" valign="top" bgcolor="#d2d8c7">
<h2>Page heading</h2>

Here's a two column layout with header and footer sections that span the width of
both columns. The first table row creates the header and contains a single table
cell which uses the colspan="2" attribute-value pair.<br>
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!
<br>
The second table row contains two table cells which create the menu column (left)
and the content column (right). The colspan attribute is not set in either so they
default to colspan="1".<br>
<br>
The third table row creates the footer. Like the header, it contains a single table
cell which uses the colspan="2" attribute-value pair.</td></tr>

<!-- ============ FOOTER SECTION ============== -->

<tr><td colspan="2" align="center" height="20" bgcolor="#777d6a">Copyright
</td></tr>
</table>
</body>
</html>

Question 4

<!-- save the file as frame.html-->

<frameset rows="75%, *" cols="*, 40%">
<frame src="framea.html">
<frame src="frameb.html">
<frame src="framec.html">
<frame src="framed.html">

<noframes>
<h1>Your browser does not supports frames</h1>
Click the below link to continue your visit.
<a href="noframes.html">no-frames</a>
</noframes>

</frameset>
</html>

<!-- save the file as framea.html-->

<html>
<head>
<title> framea</title>
</head>
<body>
<h1>this is framea</h1>
</body>
</html>

<!-- save the file as frameb.html-->

<html>
<head>
<title> frameb</title>
</head>
<body>
<h1>this is frameb</h1>
</body>
</html>

<!-- save the file as framec.html-->

<html>
<head>
Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!
<title> framec</title>
</head>
<body>
<h1>this is framec</h1>
</body>
</html>

<!-- save the file as framed.html-->

<html>
<head>
<title> framed</title>
</head>
<body>
<h1>this is framed</h1>
</body>
</html>

Simple Multi level menu with CSS

<html>
<head>
<title>MENU</title>
<style>

nav{font-family:Arial, Helvetica, sans-serif; font-size:12px; margin-left:30px;

border-radius:5px; width:90%;}

nav ul{ margin:0px; padding:0px;}

nav ul li{list-style-type:none; display:inline-block; margin:0 0 0 -3px}

nav ul li a{ display:block; color:#333;text-decoration:none; text-

transform:uppercase; padding:20px 25px; background:#e5e4e4; border-right:solid 1px
#fff}

nav ul li:hover a{ background:#f00}

nav ul li:first-child a{border-radius:5px 0 0 5px;}

nav ul li:last-child a{border-radius:0 5px 5px 0;}

/* First-Level */

nav ul li ul li:first-child a{border-top:solid 5px #fff}

nav ul li ul li:last-child a{border-bottom:solid 5px #fff}

nav ul li ul{position:absolute; display:none; width:140px; margin:0;}

nav ul li:hover ul{display:block;}

nav ul li ul li{display:block; position:relative; border:none}

nav ul li ul li a{ border-bottom:solid 1px #f4f4f4; border-right:5px solid #fff;

border-left:5px solid #fff; border-radius:0px; background:#e5e4e4; margin:0px;
padding:10px}

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

/* Second-Level */

nav ul li:hover ul ul{display:none}

nav ul li ul li:hover>ul{display:block}

/* Third-Level */

nav ul li ul li ul{display:none; background:#fff; position:absolute; top:-10%;

left:145px; width:140px;}

</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>

<li><a href="#">About Us</a></li>

<li><a href="#">Blog</a></li>

<li>
<a href="#">Drop Down</a>

<ul>

<li><a href="#">First</a></li>
<li><a href="#">First</a></li>

<li><a href="#">First</a>
<ul>
<li><a href="#">Second</a></li>

<li><a href="#">Second</a></li>
<li><a href="#">Second</a>

<ul>
<li><a href="#">Third</a></li>
<li><a href="#">Third</a></li>
<li><a href="#">Third</a></li>

</ul>
</li>
</ul>
</li>
<li><a href="#">First</a></li>
</ul>
</li>
<li><a href="#">Services</a> </li>

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&
http://sarojpandey.com.np2 2 22222222222222 Web2Technology2[PGDCA2First2Semester]!

<li><a href="#">Contact Us</a></li>

</ul>
</nav>

</body>
</html>

~!

Note:&This&handout&is&for&simple&reference&only.&Do&not&completely&depend&on&it.&&