Scribd
Upload
54 views12 pages

WebTech Assgn 1

The document discusses HTML elements such as headings, paragraphs, lists, links, and tables that are used to structure and layout content on web pages. It also covers CSS box model and selectors that are used to style and position HTML elements using properties like color, font, size and layout. Common semantic elements like nav, article, aside and sections are also explained that divide content into meaningful groups and sections on a website.

Uploaded by

Syed Tarooq Afnan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
54 views12 pages

WebTech Assgn 1

The document discusses HTML elements such as headings, paragraphs, lists, links, and tables that are used to structure and layout content on web pages. It also covers CSS box model and selectors that are used to style and position HTML elements using properties like color, font, size and layout. Common semantic elements like nav, article, aside and sections are also explained that divide content into meaningful groups and sections on a website.

Uploaded by

Syed Tarooq Afnan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

.

in a slandad waup
the otucuw anol
ROnen a veb
by eo brons-lo diplay ab conten has the

orten in tiyL5
"} <htnl} elemeñl ’Jhu i lhe ol
and contals all -h otheu elernento elenerl
on
an HTy L aoummnl

) heocd>' abmenl Jk eemeal contatn


drcumenl , ouch as tle e web meta-fongunaliin aboidh
bron's ttte bau a tab.
4boy'elomenl ’ Ihis elensal conta~w he main
condenl o -dho
page, uch astel , tnagus, Senke and othu element
Ex <JDocTYPE htmi>
<html <head
<44le> Huy trst ttL lage
Page <Hthe>
</head
(body
(hi Hello ord! </hl>
my fst HTML paqe ip
<Iboty
</htonl 1|
ane. konlextuoal slecfes ? Jdntr 1 and
Lon tertual olectou.

Cotexhal selecfe mCss (acadng Style Shects ) a nd


thein lafonshi orth ofhe
stnatlu Uhey alow y you
opecqic elene nt basco thea
1j1 Cheld oelecter (' >): Ihis sele t, only-he diet celd elementy
paunl ee menl . 3tH does noi selwci nested on depe dscendan

NDascndanl selecer (' )iIhis electa al desenañs o a


Tawtl clemenl, fnc ludig nisld alewends
element al ang lavel.

selecfor ('y): Jhi selechas on h


fumaitadey adfaent stblanga elarnent thatt comer frumectately
ana spec<eo clemet.
Exs hipi /* Styles pr <p> eleme ito /3
eglector (' w):L eleca all dhe atbe
elemento tha ome afi a orct7ee elened,
elameil nol gust
fuát prmaiy

t*: hsnp* elenent /3


any
3) Whot aue attarbok electey ? asnkey and arplain ai
atlibutr selec fos slh example.

th paanu, value o parhial value al theiu tiTNL atrbub


Jhey allouc sgu o apy olylesh demett thacl hae affrtbutes
JAthrbuk peasne selecla(lattitbuta]'): Jhis se leca elem
that have aopecttie att tbute tta vae

Ex- Cdata -toltip? bondu ipx soled #033


1 Afrbut vae selectan l' athtbt value], Zhi selects alemenb
-heci have a attrbut wotth an eKact attrbutt vae.
bacarouad -ale
Atrbt staut orth sele ('Catttbt ^s vahe ): Jhó seloeta
elemen that hore Vale thf shuty

) AHrfbuti ends tth oelecla('Tattrebute =ValheJ): Jhis electa


lemets -ehat have a atrtbut ofth a vahe ht no
ot4h a cextatn strng.
2pr
h oyntax eplatn -he html elemerta tth examples:

1]<a (Aneho
Renk to anothu Neb page
voeb

(a hy 'htps 1qge.comy Vert s Kla>


efien eeme ad aa to thm
Syntav - (du Conent

<laey

oeb page. Aqines alare' athrb o the sone

Ex:-<tmg orez" lt "An

natntatntng voht teupace and line break


(nfn h HTML Ccle
Text

pefoamated
Jol(Ordud Kst Tae): Jiu wd to wal an ademd
tmM a Arm bud

Seiteo oth bulet pofn


Syndax - <ul >
< Gireen

3 9wtrau h Css boa mal lobel brtly eplatn each


Componend bor
Lpuentafrn o hou elemen a
Jhe Css Box Mades io a, Mpuenaffon.
be
le
boxeswth vatous
Modelk/h2> Box <hy
<0heads
3
soltl, vlolet a5px beda
aghhgneys backarand
-udon width
<syle
<heaad) <html> kxt
Clean Maen
-
ousede
conlent arqodding
d oovmd
aiemdl
h gow that bode Bodu-
A
A
anaa
cantert -Tl (antet
Cantesl
Bode
poagraph
Cd css bo models'a boy -lht encled
HTM L lermetla tclnced of fhee
brdy
tast lut te htms demandk elementa .Expatn any
3 wi4h

Jome ol the commony wad ttMLS oemanti elements ae


Meacu end tootehead <leotus

VArtces and SecftonsCauties


Koectton>
Asfde (asdey

menu,

Ex. heol
oeefton a voebste.
conlalng to

Ex- <rav
<ul <u(a hrel#hoe >Home las </>
<ibka he =#about> Abt <las <ik)
<k><a heli'Hontací> Cartazt<la>clty
<Inav
Jkailey: Lhs elemertl speats aaael -tontatad piece
evntert Hhat causd be dstnodeed and ewndl tndepudauty
bleg pet newws autee,a pesl.
H ks uasc do encan sula fe conent that cCoulos he t a

Ex- <aulcles
<he Artrcle Tele <rhe
pAricle cortnt he

<p Tostzs by: John De Kip


<p ubahcd on: April 4 2023

(latices
Element ae table tol, tr, th 4baly tol. thead
Capton , clqrup , otth proputis otdth *span.
Also apl aurtable
Conmphenstre Table.
Bachelor
5em1 Sem2 Sm3 Sem u Sem 5 Senmts m1 Senm 8
Jova

Ct

C
CGPA

Amt <html <head


<HtièDocumet</HHe>
<Pste
body i hackgrouncd -colav altoebke;
3
table bofato,

otdth 20cm;

Cent;
tect-aitn
heght Bem;
9
4head 3 tet-alin i renlus
hetght lcm3 3

</siyes
<IheadS
<body
<Hable boau ""
Kiapto >Compehnsive tablet <loaption>
<kend s(4d colpan'4" Bachelo of Engineng
<tr <td>*</tdy

CAry
<th <td Java</fd
< t d - < / 4 d . x8 tmes <Ary

<ta--<Itd
<trt <td Pthen </4d>
Ttd-</td>

<4ol}
4d) CGPA < (4d
<td Col span "272 </d
-7. 3</4dy

1.5 <I4e}

<[4able
<Ihtmi
the i
Cogorati
hat
rals eb pages encu nell

layod and conent


Can adap
A
asaueh
medea,
auies poatnatt)
afze oel
wnth,
aelatl the
wat
latte gtbrey
meclo scun
w hat
css on enasanaB
an by devtee
wateadaptabl.hat done
havd
prepectonaltay endabrlety
fhe ts o
lyprealy
muttmmdla, to
the
wAe adapt
propeuties.
aud
eharaeeuiteis
and matataat
atfusl
to
fonrslk ofhu hia epoqraphe
Medio
- sss,
Kosonse
dutgo ond -thu
pecantag can devtus
and
seen
,deos, n
lest
Content
bosd ofhe
matiag Pnags
oud

You might also like