Web lechnologu

How Web-wo0nks

request
U1l
DNS
(Unitoam ConveAts
Resouace
unl into IP addness
Locaton)
SNesponse
Bowse Database .e0)

Whenuse.entes any unl, the unl goes a9 à sequest to the

dot abase.
lhe database uill not: undeastand the' usil given by the usea,

> The DNS will Conveat usl intb TP Addiess, 9.

The IP
addsess ill be undeastood by the database and gives
esponse to the pasticulas u»l given bythe use.
URL
Tt is Ugifoam Resounce Locatoso 9ytt0E t i 3

ahttps://www.google.com
paotocol
woald wide) {Domain
web

http hype» text taansfea paotocoeotiot g

SNTP- - Inteanet
Simple mailpaotocol,
taansfen paotocol. d
i

IP
OC0>TCP/TP- Thansmission cont9ol paotocol.
C BY NAVI
Yaotocols
hese ase the ules 0 paoceduses used to communtcate

between two oa mone domains.

http Hypen text tnansfea paotocol.

https-Hypes tezt taansfe paotocol secused.
SMTP Simple Mail Taansfe Paotocol.
TCP Taansmission Contol Paotocol.
Web Co9) sub-domain(0i woald wide web
i s an tnfastauctuge built on the top of the inte anet,
Domain name
Domain name, will be pa0vided by the paivate aaganizations.
Note: Domain name can be, cgeated by Ou9 Own,
Com means commencial
gov means goveanment
in means India:"
edu means education.
Baowse *

is a sottwase Cos) applh cation embedded wth webCo9) Www.

Itis
Diffeaence between static page and dynamic page?

.Static page
I n static web pages, Pages jll aemain same until someone
.
changes t manually.
I n static web pages. infoamation aae changing aaaely
N o page aeloading.
I n static web pages, database is not used.
PEL00gle, blogs,
Dynamic page
In dynamic web pages. contents of pages ase diffeaent fog

diffeaent visitoas.
In dynamic web pages, the infos9mation chonges aapidly.
Dynamic web page takes moae time fos loading than static web
page because of mose content.
In dynamic web pages.database is used
Ex stock paice, weathea infoamation:
Diffeaence blw Single-page, and multi-page applications
Single-page application
Only one html page.
Modean appaoach foa app development.
A SPA is an app that woaks inside a baowsea and does not

Aequiae Page eloading dusing usei "S

Ex: googleigmatl,
mape twitten etc.
.Multi-page appl1cation
Multiple btml pages
classi cal appaoach foa app deve lopment.
he
multi-page design Pottean squi hs a Poge eLoad
eve sy time the content
change.
Ez: ebay, ama zon, fl1pkaat.
Web page
It isa file C0) a
document which is
code. wnitten using html

tz Login page. Registei page, Home page, Caat page

Web sites
I t is a collection of unique web pages.

Ex Flipkaat. com
Ama zon. com
Web senven-
t is a collection of unrque websites
web-site.
he tunctionality of a web ses vea is hoisting the

HTML
Hypen Text Mankup Language

Link/
Pane-defined Communication.
Refeaence
Data/Tnfoamation
Intnoduced by Tim Besnens Lee in 1993
HTML is a maskup language: used to gaeating a stnuctuse

of web-poge and web-app.

T o build web-page stauctuae.

The Ppage caeated with html is a static page.

Paevious veasion is html 4 intaoduced in 2000.

Cuasent vension is html5 intaoduced in 2012,
The featuaes of HTML-5 a9e
Stonge
SemanticTags
Pc Video/ Audio Tags
SV and Canvas (used to caeate logos)
Tealocotion
 Stuc tune of HTM
sDoCTYPE>html> < Tells the document type
html The 00t element
<headz- Contains: the headen infosmation
title Title of the
pågeytitle>4 Defines title of the
Page
</head
body 4 Holds, the .contents of the poge
Tags alated to, layout and foamatting
/body
/html
Note
DoCTYPE- it. will tells to the bowsen which type of HTML
veasion the
pa0g9ammen using9
DOCTYPEIt indicates HTML veasioh 44.
oC TYPE It sindicates HTML vension5.
Meta
I t gives the infoamation about
data.
All baowse infoamation is
stoaed in meta.
I t Tt is on unpad tag.
tog
Note
The extensions to Ceate
a HTML file ane
html .

htm
shoatcuts to caeate html stauctuae
Type html and select the
be caeated.
vesion,the html stauctuae will
i Type ! and paess the tab key on the keyboand.
The pot num bea of Live seaven is 5500.
amount of andom. text
The Lonem tag ins ents. a speeitied
in the body tag
I f we specify,a paaticulan numbes aften Lo»em and paess

Enten.we get the specifred. numben of woads in body tog.

.Tags
Tags ane pae-defined keywonds
A tag is used fon coeating an element.
T t is enclosed 'with Right. angulasi- baacket and Left-angula»
bnacket.
Thene ane two types of tags
and
RaiAed tag (os) containeD tag: This having opening
is.

closing tog. Ez:html <head>i <title> <body

K/html> /head </bitle> </body>
i unpataed tog co) .empty tog
wi ch
(oa) self-closing-tag:
A
tag opens thee only and elosing these: only,
Ez meta
ba7
<haz, .

<img
input>
HTML elements

Any content whtch is enclosing with opening tag and clostn-

9 tag
Ez titlez Login /title>
content lostng ta8 >Element
openíng
tag
 Heoding Togs
define headings of a pa9e.
The heáding tag is 'used in HTML to
Ihe heading
The heading tags ahe block level elements (1t tokes entine

width of the web page)

tiiss aa paihed tag and the following uae the six HTML tags
toa diffeaent heading sizes.

h1> Heading 1 </h17 - (Most impoatant)

<h2 Heading 2 </hz
<h37 Heading3 </h8>
h47 Heading 4 </h4>
<hs Heading 5 </h5
hs> Heading 6 </h6)- CLeast impostant),
Hater
Panagnaph Tag
h e <P> tag defines a pa.aagnaph of text. It is a. block -leve,

element and always stants on:a new line.

The <P tag comes in pains. The Contentis wnitten between
the open tng ( <P>) and closing (</p>) tags.
-f

Fomatting Tags :
s is used to change foamat of the tezt.
All foamatting tags a9e
paiaed tags. A

b Sup>
big u
ing
Ksmall Kdel».
stnong stsike
em
<sub
Depaicoated ogs
Taga which ane not in use. they ane betten handled by c9s.

Eg: staike, centae,.link.big, font .u.

HTML
ww
attaibutes
I t pnovides additional infoamation.
Always specified in staat tog
tag.
Name and value pain.
Eght style = "backgaound- coloa aed":> hello </hi
Cone attnibutes
Functionality of the element.
ID: It should be unique

TITLE It gives page nete9ence

CLASS: Tt should haveaSame name
STYLE: Tt paovides styling fon web-page.
HTL Lists
A ist in HTML a collection
is of times item[ that ase dis
plaiyed in a list föamat."
of Lists:
Thene
Thene ane thaee diffeent types HTML

Ondeaed List (ol)

Unondened List (ul)
Descnption List (02) Definition List (dl).
Qade.med Lists
The <ol tag t0g caeates an oadened list
List tems ane added with nested <liz tags,
The type attarbute it is used onthe ol> tag to define

Y the item numbeaing type.

 TYPE DESCRIPTION
type-"1 The list items will be numbened with numbens (defa.
ult
type "A The list items wil benumbened with uppencase
lettens
type-"a The list items will be numbened with, lowencase

Lettens.
type "I" The list items will be numbened with uppen case
TOvon 0man numbeas.
type "" The List items will be numbeaed with lowencase
9NOman numbens.

stant attaibute * It specifies faom, which value:should list

of items should staat.
aeve ased attnibute: : Tt displays the list items in a evensed
0ndea
Unondeaed Lists
Ihe <ul> tag caeates an unoadened
list.
list"items aae added "with nested <li tags.
TYPE
DESCRIPTION
disc Sets the list item.to a bullet, Cdefault).
Ciacle Sets the list item to a
ciacle
Squane Sets the list item to.a
squane.
none The List items. will not be
maaked.
Descaiption lists
2 To caeate a
descaiption list.use thei,Kdl> tag.
Tenns and descaiptions can then be added with <dt> and
 tags aespectively. i
.
dd

dt> Papen </dt>

ddgneat foh"pncit diawing </dd>
<dt> Pencils </dt»
kdddaau» on papen on can vas </dd>
/dl
42 9uote tag .

We use (47 tag.to add shoat quotation maaks in

HTML.
Eg: 4 The content to'be quoted.k /q
blockquotey blockauote tag
The <blockuote> tag in HTHL used to diaplay the long
quotations.
t

Eg: <blockquotesThe multiple titne content to be quoted </block

quote
o manquee tog

The Manquee HTML oa non-standand, HTML elgment which

is used to scàoll image text ho zontally
a on oa
veaficaly.
Attaibutes aae
behaviouni scioll,slide and altennate
diaection : defins di nection foa scnolling
content.
:Tt may be"left, ight, up and down
SCAollamount' defines scaoll amount in numbea,
.HTML pne-tag
The
he HTML
<pae^tag is used to specifu pae.foamatted text.
 Texts within <pae>.... / pae> tag is displayed in a fixed.
width font
Gn0uping Elements
Div Block Level Element)
Span CInline. Element)
DiV
Spon
It a block level element.
is
It is an in-line element.
Tt wil take entine
width of I tIt
will take panticulaa idth
the web page.
of the content con)
We can element.
give heght and width We can't
give height and width
foa Div.
to span,
Span can be wmtten inside a Divcan't be wnitten inside a
div. Span.
div Eg
style =" bonden :
Ipx solid: "<span style ="backgnound-colon: bluer)
Home-page Home-page
/div K/span
div style "bonden:Ipz solid: <span style ="
Login-page
backgnound-colon: ned;
</div Login-page
div </span
style ="bonden: Ipz solid: span
Registe style="backgaound-colon:gneen;
Registe
/div? /span
web-poge Web-Pag
- Home Home
Div
Span
imoge. tog
image tag is used to display image on a web-page.
mage tag isa empty tog that contains atta1bute only:closing
tag ane not used in image ele ments.
img> tag is used to embed an image in a html
page.
Note: images ane not technically instead into a webpage: images
a9e linked to webpages.
{img» tog has tuwo aequTaed attatbates:
SAC
Csouace)= specifies the path to the image.
altCalteanate) =specifies an altinátive type of image
Absolute URLS vs, Relatíve URLS
An absolute path' saefeas to the Complete details needed to locate
a file oa foldea, staating faom the aoot element and ending
with the othen subdinectoaies.
Eg- URL

A nelative path staats fnom the cunnent dinecto

/(single dot).denotes the cunnent disectoay m the path.

/ (two dots) denotes the paaent dizectoay ie, one level above

Anchon Tag
The HTML anchon tag defines a hypenlink that, Links page
one

to anothen page. It can cheate hypelink to othen webpage

OS well as files. location; 0 anyURL,
When we click on the link, it will jump to anothesn document.
mouse ansow will
When you
When you move the mouse oven a link, the

ungtoto a little hand.

 he HTML a> tag defines a hypenlink.

syntox
a hnef ="unl"> link tezt </a>
Appeanance of HTML ancho tag:
By default. links will appean as follows in all ba0wsens
An unvisited link is undesilined and blue.
A Visited link is undealined and punple.
An active link is undenlined
and aed.
Anchon tag Attaibutes
haef- The mast impontant
attaibute of-the ca element is the
hnef attaibute. uhich indicates the links destination.ir
, tanget The tanget attaibute specifies wheae to open the.linked
document
D-selt opens, page in same tab/. window.
id-blank It opens page in new tab/wrndow.
m)topFt opens page in a top of window.
-paaent- It opens pages in a paaent windo).
Toble
A table is a stauctuned set of data made
up of. aows, and
columns (tabulan data).
The content 'of eveny table is enclosed
The
by these tuo togs
table </table>. Add these inside the
body. of goun HTML.
The <t element (tn
stands foa table now')
<td> element9 caeates a
single cell.
cell padding
.

Detemines the distance between the bonden of a cell

and the contents of the cell.
 Ex:TABLE CELLPADDING = "30Px"

cellspa cing
Deteamines the empty spacing between the boadens of
tuoo adjacent cells.
Ea: TABLE CELLSPACINGI
="10PX2
ROW-SPAN Meaging of.moe than two aows.
9 t d 910wspan= "2" >hello </td>
cOL-SPAN Menging of moae than two cotumns.

Egtd colspan="2"> hello <td>

HTML Media
Multimedia elements clike audio on'video) ane stoed in media

files
>Ihe most common way to discoven the type of a tile is to look

at the file extension.

Note-Only MP4 and ogg vide 0e Supponted by the HTML
standand.
oVideo The HTML <video> element is used to show a video
on a web page.

Videg atti butes

Contaols The cont nols attaibute adds video contaols, like
play:pause, dnd' volume.
Qutoplay Tt is used to stant a video
muted It is
automatically.
used to unmüte the video.
Note: Chaome usea1s baowsens do not allow autoplay in
most cases. Howeven, muted autoplay is aluoys dllowed.
LoopIt is used to play the' video in loop
Audio The HTHL Caudio> element is used to play an audio file
on a web page.
Audio Attaibutes
contiols: The contaols attnibute adds audio contaols, like
play, pause, and 'volume.
Qutoplay It is used to stant an audio automatically.
muted: t is used to mute the audio.
Note: Chnome baowsens do not allow autoplay in most cases.
Howevea, muted autoplay is alwoys allowed.
Loop: It is
- - -
used to play the oudio in Loop
loop
o Semantic Tags

I t gives a cleas undeznstanding

ton the web-baowseA as
well as pognammen.

lag Descniption
aaticle defines an selt contained composition and indep-
SndRt in a web page. JMTH
aside Defines Content aside taom the page content
details Defines additional details that the usen can vieo
01 hide
figcaption Defines a caption foa a
<figuae> element.
<figuae Specifiesself-contained content.like illu_taations.
diagaams, photos.
Hooten Defines a footen toa a document o section.
headen Specifies a headen foa a
document 0 Section,
main Specifies the main content of a document.
& k Defines manked/highlighted text.
 Tog Descaption
nav Defines navigation links.

section Defines a section in a document.

summany Defines a visible heading fon a <details»

element.
<time?
Defines a date/time,

H- Heade
D--Details.
A- Aside.
M-- MainMaak
:

N-- Nav
S- Section/Summaa
T - - Time
A-- Anticle
F--Figune caption7 Figune/ Foote.
HTML HTML5

div id " heade"> headea>

<div id= nav nav

div id <div id
'contents aside) çontent> aside

div id"footea <footea>>

 Headen

Navigation L

Main

Anticle

Aside
.

Asticle

Antiele
.

Footen

o FosimS
HTML tonms .aneequíiéd to collect data fnom the usén.
HTML form is a document which stones infoamation of a usen
on a webseaven

Collecting infoimation faom the usen thaough electaonic toam-

at. i
Foam attaibutes:
Oction used toa stoing toam-data 'in websenven thnough u
method: used fon secuity
: punpose
Values ane
 get which is unsecu ne

post which is secuae.

ype Desciption
button A push button wrth no default behavioza displaying
the value of the att»ibute, empty by default.
checkboz: A check boz allowing single /multrple values to be
selected/ desele cted.
colon A contaol foa specifying a colon; opening a colon
picken when active in supponting bsowseNs.
date A contaol fon enteaing a date (yean, month, and
day, with no time).
datetime- local: A contaol fon entening a date and time, with
no time zone.
email A field fon editing an email addaess.
file A contnol that lets the usen select a file. Use
the accept attaibute
to define the types of files
that the Contaol can select.
hidden: A contaol that is not displayed but whose value
is submitted. to. the
seqyen. The ne is an example
in the next column, but its hidden.
image A gaaphical submit button, Displays- an, im oge defined
by the snc ottaibute. The olt attnbute displays if
the image Sac is míssing.
month: A contaol foa ent aing, a month and yean,oith no
time zone.
.
numben: A cont»ol fon enteaing a numben. Displays a numeic
 keypod in some devices with dynamic keypads
passwond: A single-line tezt tield whose value is obscuaed.
will alet usen,it site is not secuae.

1a dio A nadio button, allowing a. single value to be selected

Out of multiple choices with the same name vglue.
Nange A
A contnol fon entening a numben whose exact value
is not impontant
Neset: A button that nesets the contents of the fanm to def
ault values. Not necommen ded.
Seanch: A single-line tezt field foa enteaing seaach stings
submit A button that submits the foam.
.

tel A contnol foa entening a telephone numben.

tezt The defoult value. A single-line text field. Line-baeaks
aae automatically nemoved faom the input value.
time A contaol fo enteing a time value with no time zone.

unl: A field ton entening a URL. Looks like a text ínput.

week: A contsaol fon entening dote consisting of a
a
week-yean
numbe and a week numbe1 with no time zone.

Descaip-tion
autofocuS Automati cally focusing a foam.contnol.
autocomplete he souace of the
suggested values îs gene-
nally up to the bznowsen: typically, voalues
Come faom past values entened by the usen,
pattenn its like a nule
eg: 12345. [o-z]{5}.[A-2]{8}. [a-1}[A-Z|{3}.
 Nequisied Tt spéciftes that the input field must be filled
out befon submttting the toam
min-length Tt should be taken minimum length of chanacten.
max-length tshould be taken matimum length of chanacten.
iead-only The input field connot be ne-wite.

placeholde Ihe placeholden attibute places text inside an input

box, usually in a light gady colon, as a placeholden.
ohecked The value will be checked by default used fo
checkbox and aadio button.
hidden The input freld will not be visible on UI.

disabled The inpüt field is no longen used.

o itname
I t is used to embed a web paye into cunaent ueb page.

A n faame is an'inline faame"

"

I t is a pained tag.
The attatbutes of ifname co) sounce faame boadea height
and width.
o HTML Entities:
I t is used to.ceate,p eseaved symbols.
These ane some of the entities:
P Blts</P)
P),&gts CP>
KP &negs</p)
P &coPy </p>©
P&euj0 <JP) E:
(P> &dollan; k/p>>>s