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