HTM L CS J
S S
S tru c tur e / la y o ut Sty l Logic
e
Level 1
HTM L
H y pe r Te xt Ma r k u p Language
HTML is t he code t ha t is us ed t o
stru c tur e a w eb page and i ts con t en t .
The componen t us ed t o design t he
stru c tur e of w eb s i t e s a r e called HTML t ag s .
Fi rst HTML File
inde x . h t ml
I t is t he defa u l t name fo r a w eb s i t e ' s homepage
HTML Tag
A con t aine r fo r s ome con t en t o r o t he r HTML t ags
< p > Thi s is a pa r ag r aph </ p >
Con t en t
Elemen t
Basic HTML Page
<!DOCTYPE h t ml > t ell s b r o ws e r y o u a r e us ing HTML 5
< h t ml > r oo t of an h t ml doc u men t
< head > con t aine r fo r me t ada t a
< t i t le > M y Fi rst Page </ t i t le > page t i t le
</ head >
< bod y > con t ain s all da t a r ende r ed b y t he b r o ws e r
< p > hello w o r ld </ p > pa r ag r aph t ag
</ bod y >
</ h t ml >
Q u ick Poin ts
H t ml t ag is pa r en t of head & bod y t ag
Mo st of h t ml elemen ts have opening & clo s ing tags
w i t h con t en t in be tw een
Some tags have no con t en t in be tw een , eg - < b r >
We can use in s pec t elemen t / v ie w page s o ur ce t o
edi t h t ml
Commen ts in HTML
This is pa rt of code t ha t s ho u ld no t be pa rs ed .
<!-- This is an HTML Commen t -->
HTML is NOT case s en s i t i v e
< h t ml > = < HTML >
< p > = <P >
< head > = < HEAD >
< bod y > = < BODY>
Level 2
Basic HTML Tags
HTML A ttr ib ut e s
A ttr ib ut e s a r e us ed t o add mo r e info r ma t ion t o t he t ag
< h t ml lang =" en ">
Heading Tag
Used t o di s pla y heading s in HTML
h1 ( mo st impo rt an t )
h2
h3
h4
(least impo rt an t )
h5
Par agr aph Tag
Used t o add pa r ag r aph s in HTML
< p > This is a s ample pa r ag r aph </ p >
Ancho r Tag
Used t o add link s t o y o ur page
<a h r ef =" h tt p s :// google . com "> Google </ a >
Image Tag
Used t o add images t o y o ur page
< img sr c ="/ image . png " al t =" Random Image ">
r ela t i v e ur l
B r Tag
Used t o add ne xt line ( line br eak s ) t o y o ur
page
<br>
Bold , I t alic & Unde r line Tags
Used t o highligh t t e xt in y o ur page
< b > Bold </ b >
< i > I t alic </ i >
< u > Unde r line </ u >
Big & Small Tags
Used t o di s pla y big & s mall t e xt on y o ur
page
< big > Big </ big >
< s mall > Small </ s mall >
H r Tag
Used t o di s pla y a ho r i z on t al ru le r , us ed t o s epa r a t e con t en t
<hr>
S u b s c r ip t & S u pe rs c r ip t Tag
Used t o di s pla y a ho r i z on t al ru le r , us ed t o s epa r a t e con t en t
< su b > su b s c r ip t </ su b >
H 2O
< su p > su pe rs c r ip t </ su p >
n
A +B
Pre
Tag
Used t o display t e xt as i t is ( w i t ho ut ignoring spaces & ne xt
line)
< p r e > This
is a
sample
t e xt .
</ p r e >
Level 3
Page La y o ut
Techniq u e s
using Semantic tags for
la y o ut
using t he Right Tags
<header>
<main>
< foo t e r >
Inside Main
Tag
Section Tag Fo r a section on y o ur page
<section>
A rt icle Tag Fo r an a rt icle on y o ur
page
< a rt icle >
Aside Fo r con t en t aside main
Tag content(ads)
<aside>
Revisiting Anchor
Tag
<a h r ef =" h tt p s :// google . com " t a r ge t ="_ main "> Google </ a >
for new t ab
<a h r ef =" h tt p s :// google . com "> <img sr c =" link ">
</ a >
clickable
pic
Revisiting Image
Tag
<img sr c =" link " heigh t=50px
>
s e t height
<img sr c =" link " w id t h = 50 p x
>
s e t w id t h
Div
Tag
Div is a container used for o t he r HTML
elements
Block Elemen t (takes full width)
Li st : Div
Tag s
<address> <fieldset> <nav>
< a rt icle > < figcapt ion> < noscr ipt >
<aside> <figure> <ol>
< blockqu ot e> < foo t e r > <p>
<canvas> <form> <pre>
<dd> < h 1 >-< h 6 > <section>
<div> <header> < t able >
<dl> <hr> < t foo t >
<dt> <li> <ul>
<main> <video>
Span
Tag
Span is also a container used for o t he r HTML
elements
Inline Elemen t (takes w id t h as pe r size)
< code> < o ut p ut >
Li st : Span <dfn> <q>
Tags <em> <samp>
<a> <i> < s c r ip t >
< abb r> <img> <selec t>
<acronym> < inp ut > <small>
<b> <kbd> <span>
<bdo> <label> <strong>
<big> <map> <sub>
<br> < object > <sup>
< b utt on > < tt > < t e xt a r ea >
< ci t e > < v ar > < time>
Level P r o
List in
HTML
Lists a r e used t o r ep r e s en t r eal life li st
da t a .
unordered or der e
d
< u l> < ol>
<li> Apple </ li > <li> Apple </ li >
<li> Mango </ li > <li> Mango </ li >
< / u l> < / ol>
Tables in
HTML
Tables a r e used t o r ep r e s en t r eal life table
da t a .
< tr > used t o display table
row
< t d> used t o display table
da ta
< t h> used t o display table
header
Tables in Name Roll No
HTML Shradha 1664
< table >
< tr >
< t h > Name </ t h >
< t h > Roll No </ t h >
</tr>
< tr >
< t d > Shradha </ t h >
< t h > 1664 </ t h >
</tr>
< / t able>
Caption in
Tables
<caption> S tu den t Da t a </ cap t ion >
S tu den t Da t a
Name Roll No
Shr adha 1664
thead & tbod y in
Tables
<t head > t o wr ap table
head
< t bod y > t o wr ap table
body
colspan a ttr ib ut e
col s pan ="n "
used t o c r ea t e cells which spans o v e r multiple
columns
Dat a
Shr adha 1664
Aman 1890
Fo r m in
HTML
Fo r m s a r e used t o collect da t a from t he
us e r
Eg- sign u p/ login/ help r equ ests / cont act me
<form>
for m cont ent
</ fo r m >
Action in
Fo r m
Action a ttr ib ut e is used t o define w ha t action needs t o
be performed when a form is su bmi tt ed
<form ac t ion ="/ ac t ion . php " >
Fo r m Elemen t : Inp ut
< inp ut ty pe =" t e xt " placeholde r =" En t e r
Name ">
Label
<label fo r =" id 1 ">
< input ty pe=" r adio" v alu e=" class X " name=" class "
id=" id1 " >
</ label >
<label fo r =" id 2 ">
< input ty pe=" r adio" v alu e=" class X " name=" class "
id=" id2 " >
</ label >
Cla ss &
Id
<div id =" id 1 " cla ss =" g r o u p 1 ">
</ di v >
<div id =" id 2 "> cla ss =" g r o u p 1 ">
</ di v >
Checkbox
<label fo r =" id 1 ">
< input ty pe=" checkbox " v alu e=" class X " name=" class "
id=" id1 " >
</ label >
<label fo r =" id 2 ">
< input ty pe=" checkbox " v alu e=" class X " name=" class "
id=" id2 " >
</ label >
Textarea
<textarea name="feedback" id="feedback" placeholde r="Please add
Feedback ">
</ t e xt a r ea >
Select
<select name =" ci ty " id =" ci ty ">
<option v al u e =" Delhi "> Delhi
</option>
< option v alu e=" M u mbai" > Delhi
< / option>
< option v alu e=" Banglor e" > Delhi
< / option>
</ s elec t >
iframe
Tag
w ebsite inside website
< ifr ame sr c=" link" >
Link < / option>
Video
Tag
<video sr c =" m y Vid . mp 4 "> M y Video
</ v ideo >
Attributes
- controls
- height
- width
- loop
- autoplay
All the v e ry best in y o ur
f utur e journey :)
- Aman bhaiya & Shradha
didi
