HTML Notes Full Detailed
HTML Notes Full Detailed
Alhat is HTML?
manup Janguage
Lohypentext
web and is Content
2 Used to St9uctune a page
30 Basic building block of web
BUY
co
Intenlinking ayper inking web pages
HTML> Stauctune
Htm t CSS +Ts
CSS tonmathing appeanan ce
fullstack applicatio n
TS functionalit
openin9 te3
P class ="nice Hello hNonld! </e
Atnbutes and i'5 valuMA Enclosed text conten
a9s
keywonds on a nnota thion
9 tells bnow sen how to nenden diffenent elements
ih
HTML, a tag is use d n Cheahing
an element
<p-</p> panagiaph
<hL-- -</hl
heading
<h6></hG
ron
<img/> image Cvoid elermant) is nuthen HeguiITea
thi endtag
allowed
(a..</a> ink
Textelement
Block elements
2) Tnline elements
specPic pas
diffenerhiate
divides th Contnts of text
of doenDt 8tator
webpage into d'ffunent
element
InDine up
blocks and only takos
A block eleme aluways a now ine
as much width
a
necasany
8tant on 0 nw i'ne
and takes up th foll ex
<a> <abbn> <aownym>
wd th avalab le. <b br> <buton>
<P> <dd Caydio>
ex:
Kem i) simg>
<h1> to < h6> <div <del
caside Shiguno> hL
footen>
<details>
<fpnm>
<dialbg>
<hn P
cheaden>
< masn 7
cem><Jem
<b>-</b -
cav> > h2
<table
<pe> ist Sechor
or ntu
Contur
contanen (block
element) genenic contasina
tEnten
L <IDoCTYPE Hfml
vension 5 is being
used and 5an r
HTML
nOwsen
do wment
2. <htm lang = "en">
LWhole webpage content is în enguish.
3. <head
Contains meta data
data
of HTML
doc
about data ex: itle chanoct
set,
sCniptek. ,
newpont STy*
4 bodyL) achuol conet
SEOC Seanch engne ophmizahon)
meta impontant for
> tog not heLo
impontant forend use
always in headl Haq
used to specify-chanacte set, page desonl' pHon,key coonds,
awthor, ewpost Conhgunanen.
neven displaued
vonigde
7stondand -
meta chanset =6€ UTF-e">
L tells that uTE-8 encoding is used in
length
my
encad ng
poge.
mea name = 6Uniew pont"content-wid
vieuwpont display anea of soreen whon
th- devi'ce coidth
pagg
inihal-scae =1.0
s {iast paded
zOom of page
Specifed by Iniho gala
<title> Document /hHe
L using hnef attnbuk we can add a fncon
title of hs webpag/ displayo On tab.
d0>
s/dt>
dt Coffee </dd>
dd -block hot dnink
<dt MilR </dt>
dnink <ldd
<dd -white cold
</dey
AH nbutes
- included taq
,
in opening
pnopehes
Elem ents
en ts in HTML have attnibutes these ane addiional valua that
Confgone thu element on adjut thur behauouh in van iow unus to mut
th Cuema thi Usens wat.
elemer
<img
<dir>
<a
atributes
,
Snc, width height,alt
id, class
hnef
Add
belDuo
<þtitle
a tooltip
toi
w3 Schools"
h
="About
to hu
ponaqraph
tu ez+ bout
w3Schools">
w
P> style, hHe 3SchoolS a web deu ssik.
<htm! ang </b>
Day-2
Why headinq from hl to h and not hito h7, h6 on h9 ?alo
a Presu maby chosen becavse it was aMumid hal noboay
need a
-
sub-sub-sub sub~sub Sub haoling. Vey few doumur
Com lose to that Oevel of Subdinisbn of gecions.
Ih echonin g aules in HTNL elechiuely grur an s wrumr
no. but foo a4ppe for new sechSUY
eheaoings
algonthmi shll weak
Oifference between Reight #S06and heig ht-"|00px
No diffenence. heigAt =*
100" is by defaul4 in px.
How to maRe Roagonb in by <hn> eo 7
<hn Color"Col0-na me l hex-numben I ngb-num be
hn tca
ne
honzohta
IKalakan
to use<bad tug agin aund agaun
On oun page we hau
web
Con wse <prurtag in clocument as it
Insted, we conten tHn twn
thi tose breohi e change) /in
will displau al thi
is onthi web pog% (inclwding
&Phe>tena
Yaan
Supen stay
dogt
kalbkan
Ypre
How to Qimit backq7 Dund color on anelement as by ejault
is expanded honigontoy?
EisMe 2
display = inlinu-blou
Not
to mo tec nam of tag
bolol <b> ,<s trong em>
itallic <i>
Sma <smq ll >
sta be <del>,<stnibe
yellos ba ckg7ound
mank
ay 9 tF
www
">
pwond
net/bnhw
can b ihe
you use tham properuy
-
. You
tung.
go thaough any
thay'll
rea anol you
an pjenceo. </p>
</block quo e>-
Aldous huxluy,
<fgcaphon
h>ByaueNeuw Wonlodl <loTe>
4/tgcophbn>
texF chor inlina quotaron
a
indicoa that thu encloted
lamants this
is
bu swwownding
in
th et
os+ modehn brOw rens imp
short quotan ons
guotanon manbs.Thi ellment is in tendid for
that panagraph braa for long quotahons
ks:
don't rguwre
Use th <blockquote > elemrk
e
<P> When Dave abbs HAL to open thu pod bay cloo
HAL answens <q cik =<* htps://www.imdb.com/ fi
+o06 2622/quotes/qto39692/
9frau'd I can+ do that. </g> <p
>
T'm somy ,Dalve
CIt attmibu te
tor hi
petnt to intomah xt or
explau ning thu Conte nefuen
quoR
<uite
onaahus wonk ano
Fis Used to decube a nefenencs to a atd
mwt incluos th thH oh hat
weuk Thu salnn May bi In
to Con ext CLppop nbli
an abbreun aleol 1omn acCDrOu
to Ctahon metadata
Conwenhons ulald
e
<blockquole>
wa a
sp> 1t brughk cold
day in Apm, and hi docks uwonu
CaddhuS
<a <bn?
haef jim 2uck.Com">
-""mailto: im@o
dk-aome/a
ca hnef = "tel: +13 1ISS3 2 s8"> (311) s55-23c0</a
</add
<abbn
t nepnsen ts an
abbren qhen on aLo ym
yhi inclyding_on abbreviahen, prond
a full expansn tho f
tenm in tu' plan text on hst we along ,
with thi <dhbrs
qbbrena-hen
tu
atnbutt
aonym
can pDundu
whun a w/l ezpanu 1sPrrsUt.
on how to announa
n
Ih prevn cls a hipt to wy agnt h
th Conkent whiu in foim hg all
what ws
dsplay
1f preunt, "hth
muxt cntan thy
abhTen'ahlon mans.
full disuuph bn and notung elb.
Shauts) to
ex
PYou can u abbr
cabbr> CSS/abbr>(CCascadng
TN L (HypertentMan
Styl
kup language).
sty
le
you <abbr>H
Using st sheets
n layei you
and
an Raep
<abbr
,
you7
H
abbr
sabbr > C SS </abba>
SS </abbr
TNL </ahbr> Content
presetah oconconns /p>
sepenapon oconcorns"</os
Thi caluoseperapon
lauen seperatt.
Ho to add a fevicon?
A feuicon caun b added to you pagt
by
L. Saunng it in thu
samu directonn a
hu sik3 indonpo iD
Saved in ico foomad Cmost albo suppot fau'cns
meu ommion fomats -gif
e -Prg he
2Adding9 t lowing un inb you HTML <haod
bloce to nueunu i
<ljin k ul = jcon
hno"fenienco"
type
= "imaqe/x-icon"/>
to onvdo ho4 days
dalys
huu au lot of othu rton fypes
Qs well:
<ink
nel-"applt touch -icon-
pnecomp0sed
Sizes =144 x 144"
hne- https
://deve lopen.mo2ila.6ng
/stahic/img/favion144 phg"/>
Table
</tabu
tabe>
+h to Cnao Paooung
WW (tabu nous)
data
<ta> to Cnea
40 Ctabl
to creato cownn
<td>
> titu of data
<cophion tabu Aoaoing
<thaol>> tab bodu_
Hoody foote in a table
tabl foote. CSS fon making Donden
foot> Tob le
table, t,td,th
Table
bonde= Lpx salid black;
Table =Colla pse;
cell
0 bonden-collapse
Table cplumn
<thead>
MONT H
SAVING
TAN
FEB 200 <4body Better pnactio
MARCH 300
APRIL
TOTAL
oo <foot
looo
Bonden
collopse
SyNTAY:Borde-collopse =colbpsej
poxt af shyle tag ie,csS
PAT/STRECHHTNI 4ables can hawe cells that span oven mulh ple
nOws and/ on Columns.
COLSPANG
An but
attn used to mak a cal span oven muliple columns
stable 7
<tr
<th colspan="2" 7Namu </th>
<th 7Aqe s/+h >
<tn
<td >Till</td>t rp Name
Hd Smith </td? Age
4td743</td T Smith
43
Eve
/tn7 Jackson
CoLGROUP:
Ih ccolgnoup> ta3 speche) a i0uP o on on moru Columns in a tab
fon foomgth
ng
r
of
cple10up> tog
the
l
is usefu for appiying
styles fon each call,°
style to entire columns,inslad
fon each now.
epeatina
Note: Thu <colanoup> tag must bt child a
a ctable > element,
and befone any etheadtbody7,
o
aften a <caphon > elements <tfoot2
and ctn> elements.
Tip: To dehne diffenud pnoperho) to a column within a <colanoup>, uM
thu <col tag be oithin ti <colyroup7 tag.
</olan0 up>
<tn>
<th>IT SBN </h>
1S8N THe Pnice
<th2Titu </th>
<h7
4/tr>
OdKh>
PDuk/th 341696My hnst HTML 53
RolwCRovP: theu u no Auch hung HTYL -S
for
stylin 0<t tag tan be UM.en
Tmage_as hyponDink
<p><a
com">
img sSnc - "
nyef=htps: //www.w3sehools.
w3himl.giF"
Cult-""W3Schools .com width "100
herg ht- "132">
</a> </p >
Day-
Hypealinks
made Usi'ng anchon taq L<az tagl
1]URL
facebook .comm
CLICK HERE
CLICk HERE </az
sa hnef ="https :/l www.facebook. com
2]Call
call app opens
8130 36 7760
<a hnef ="*tel: +9 81303677 60" > CALL ME </a>
CALL ME ll app opens
3]Mail
MAI L Opens ma
a hnef =""maiHo:[email protected]> MAIL <la7
ca te sc URL
TMAGE mATL
URL
cALL
BooRman
MLLinRs
ump
Can be used to ceate book ma9mbs ,so that
to Spechc pars
o a webpage
acos a
an he
Boomanbs
loCneatea bookmank
hun th Jink is clicked,
Usefull ifa web pagK is very Long
fist
thu
eok thi bogkmartk hon
poe uill SOoll doun on up
to
,
thu
vme
oad
odld
wrth tu bo okman k
Aast use the id atnbut to creak a bookmme.
sh2 = ic4"> Chapten
id
4</h2>
2hun
]Thun
Ka
add a link to the bookmank Ct Jump to Chapten 4)
hnef ="#Ca"> Jump to Chapten 4</a
Yov Can also ado a ink to a bookmank on ondtn
=""html-demo.html +c4 ">Tump to Chaptun
pas
<a hnef 4</a>
div taq
4eneic taa .e.no specihc
meaning (vnlike Sema uhe tas)
also called
Cotainen of tags division ta
block element
mo tas
clone actovdingl
ane|can be contauned vnden dir and styhing an be
SpanTt
Sane as dir ts_ but an inline olement.
Note
By default
haus display: block; (CSs propentry)
Block demrnts
element have display: inline (css properhy)
tnd hlint
Tol vs class then we use
you ujant » TS
ontral many lem4its by a central enh ty,
net vran eemént)
thi cl(1.e.
conol an spcne ement
Mit to
<P> tag, and
we
vnigve
,
Semanthc taq
meaningfl
to thuir wnrnt
meaning SEO CwAat ua call good practie)
mpontant for
exomp ls sfoote7,<man>
<hcaphon <headen,
<anhcle>, <aside>,<fgwu>,
<nav>
Headon
Navr
Sechon
As d
Anticlu
ooten
<sechon>
define sechon in uow doument
to divde a webpa
(Onticle
o
independent
tet is qllowed
is allowed
tog
+og
asde únhole
enclesinnhole
ithcles and bice vensa
Nok: Secthon taCan have muvnpla alloweod
a9 sec hon
a sechon teg
anhcle tag encl osing.
hae secthons
mulhple
Nok coh
as anhle
?
e conhck ano
csechon
<an hcle
<sechon>
2/anhcle
</sechon>
4/anh cle /sechon>
<styler
to nememben,adas.
style
aside
aside
width =407.; width:40 ;
float Deft
float:ioht -olon blue,
backgnound
:
DackgqiDund- olown blue;
</8tyle
/style
floak:cenker).
how
O to
to ceten aside elem ent ? (as thune is nothivg
ika
cstye
asi de
width: 301. ;
padding left Lsp»
mangin:
0 avto
ont-styk:ita uej
!ightgray;
bqckgnoud-colon:
Ystyle
<bodye vs<maum
<body main > <had»
contunt inclwding <tooto
Cotauns actual
talo.
a
lo
to th
add taucen to youn wehai
YDot directony 'ol
yow
k
,erthn sa
web sewen,
youh faunAN image
rat a oldor
olde n
th nset diucteu bd dmagesand CN sauu your fau
wmaa in his name fo'a
olden, A conumnsn apvia
onage auicon.ico".
Qdd
len <htu >
>
the
a <link elamad
elemud
to ypun "indux tml
s/body>
</htmd
fon a tauh'con imag e
hle fommat suppeukd
icO, png f> Jpeg sug
attibuus
thu loahin eOnked coaurentCwrnert
href-uRLSpeuhe thi elationship
between the cuwrrert
velReauiol =)Spethes
inbd douuwmrt
dowmu ond
hu madia type ehe
Tpemeolio -type Speuifios
Qink olouurnon setup)
is proundad
(Bi3e) s0unu
n of dufeurwebsh
dumanwgs
Cund assigensd to diffurd
varvous fovio a
dset off to Qcc to DPR
Dom CD uumwnt ebject modal
a hype of hienanch4 tro
Chhis
cRaaols hhil
Cmeho
hu DODD
Raoo
Sshyu>
<huaol N
boday sechn
<sechon>
cp>
<boduy
lrhrd
<Sech n
onhdu>
Secho
<shrong
<l2eh n> /strons</p>
O
p - <em>-</em> 4p
<hahida
<Bech- NL DOm
sechsn
ounth
9ech on a
em
loubut
hfwl
Dupuy
AL 2 u blockou
houphgghord
Fonms
Thi wsen nput as
HTNL i
uwed to collect wsen input.
most
fonm
oon sent to a seuuer
i uned to
o
vnai
pnoOming,
an hTML fom er urn inpe
tonm> elemend
Th <fonm> elemrd t a contain dffunt ypes e
n pu elomunb , Buch as: exthelda
Check boxts, radbo butto nu,
e youtube uicle0
-embeol Sowrd
contert in a docurnon
n mou 3gue taq with itfran
Dntaun onu
Contrals
Cuch o
Speuho hat Quolui cotsoly (uch aM
playpauy
buton et)
shoudd br clis playes
oDop: Speuhes trat hi auolis i) 8to1t guos
ogpun enny Tim 4nishao
19