Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
Session 1:
Web Developement Basics
HTML & CSS
Anil Shanbhag
Saif Hasan
Slide 3
Slide 3 text
You don’t have to be a Web Ninja to
understand Web development basics.
“
”
Slide 4
Slide 4 text
Components of Web Developement
Slide 5
Slide 5 text
In this session we will be doing basics of HTML and CSS.
Slide 6
Slide 6 text
What is HTML?
Hyper Text Markup Language
Hypertext Markup Language describes:
Structure
Content
Typographic Hierarchy
Rudimentry Style (strong,emphasis etc.)
·
·
·
·
Slide 7
Slide 7 text
Some HTML Code
It might feel chaotic and unstructured But the entire content of the page exists
here.
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
>
<
h
2
>
S
e
s
s
i
o
n 1
:
<
/
h
2
>
<
h
3
>
H
T
M
L & C
S
S
<
/
h
3
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d
<
e
m
>
E
m
a
p
h
a
c
i
s
e
d
<
/
e
m
> t
e
x
t
.
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 8
Slide 8 text
What user sees?
Slide 9
Slide 9 text
Revisiting the Code
HTML has open and closed brackets which are called tags.
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
>
<
h
2
>
S
e
s
s
i
o
n 1
:
<
/
h
2
>
<
h
3
>
H
T
M
L & C
S
S
<
/
h
3
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d
<
e
m
>
E
m
a
p
h
a
c
i
s
e
d
<
/
e
m
> t
e
x
t
.
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 10
Slide 10 text
A Sample Html Tag
Slide 11
Slide 11 text
Revisiting Code
The declaration instructs about the version of HTML.
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
>
<
h
2
>
S
e
s
s
i
o
n 1
:
<
/
h
2
>
<
h
3
>
H
T
M
L & C
S
S
<
/
h
3
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d
<
e
m
>
E
m
a
p
h
a
c
i
s
e
d
<
/
e
m
> t
e
x
t
.
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 12
Slide 12 text
Revisiting Code
The tag tells the browser that this is an HTML document.
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
>
<
h
2
>
S
e
s
s
i
o
n 1
:
<
/
h
2
>
<
h
3
>
H
T
M
L & C
S
S
<
/
h
3
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d
<
e
m
>
E
m
a
p
h
a
c
i
s
e
d
<
/
e
m
> t
e
x
t
.
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 13
Slide 13 text
Revisiting Code
The tag defines header information and links to external files (such as
css).
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
>
<
h
2
>
S
e
s
s
i
o
n 1
:
<
/
h
2
>
<
h
3
>
H
T
M
L & C
S
S
<
/
h
3
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d
<
e
m
>
E
m
a
p
h
a
c
i
s
e
d
<
/
e
m
> t
e
x
t
.
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 14
Slide 14 text
Revisiting Code
The tag describes the title of webpage.
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
>
<
h
2
>
S
e
s
s
i
o
n 1
:
<
/
h
2
>
<
h
3
>
H
T
M
L & C
S
S
<
/
h
3
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d
<
e
m
>
E
m
a
p
h
a
c
i
s
e
d
<
/
e
m
> t
e
x
t
.
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 15
Slide 15 text
Revisiting Code
The tags defines the content area of webpage.
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
>
<
h
2
>
S
e
s
s
i
o
n 1
:
<
/
h
2
>
<
h
3
>
H
T
M
L & C
S
S
<
/
h
3
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d
<
e
m
>
E
m
a
p
h
a
c
i
s
e
d
<
/
e
m
> t
e
x
t
.
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 16
Slide 16 text
Revisiting Code
Other tags like h1 to h6, p, strong, em etc.
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
h
1
>
H
e
l
l
o w
o
r
l
d
<
/
h
1
> <
!
-
-
t
h
i
s i
s h
e
a
d
i
n
g 1
-
-
>
<
h
3
>
S
e
s
s
i
o
n 1
:
<
/
h
3
> <
!
-
-
t
h
i
s i
s h
e
a
d
i
n
g 3
-
-
>
<
h
5
>
H
T
M
L & C
S
S
<
/
h
5
> <
!
-
-
t
h
i
s i
s h
e
a
d
i
n
g 5
-
-
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
> <
!
-
-
t
h
i
s p
a
r
a
g
r
a
p
h t
a
g
-
-
>
<
s
t
r
o
n
g
>
S
t
r
o
n
g
<
/
s
t
r
o
n
g
> a
n
d <
!
-
-
t
h
i
s i
s t
o m
a
k
e t
e
x
t b
o
l
d
-
-
>
<
e
m
>
E
m
a
p
h
a
c
i
z
e
d
<
/
e
m
> t
e
x
t
. <
!
-
-
t
h
i
s i
s t
o m
a
k
e t
e
x
t e
m
p
h
a
c
i
z
e
d
-
-
>
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 17
Slide 17 text
Slide 18
Slide 18 text
Now our page looks like
Slide 19
Slide 19 text
Adding Some Tables
The tag is used for making tables.
<
b
o
d
y
>
<
t
a
b
l
e b
o
r
d
e
r
=
"
1
"
>
<
t
r
>
<
t
h
>
H
e
a
d
e
r 1
<
/
t
h
>
<
t
h
>
H
e
a
d
e
r 2
<
/
t
h
>
<
/
t
r
>
<
t
r
>
<
t
d
>
r
o
w 1
, c
e
l
l 1
<
/
t
d
>
<
t
d
>
r
o
w 1
, c
e
l
l 2
<
/
t
d
>
<
/
t
r
>
<
t
r
>
<
t
d
>
r
o
w 2
, c
e
l
l 1
<
/
t
d
>
<
t
d
>
r
o
w 2
, c
e
l
l 2
<
/
t
d
>
<
/
t
r
>
<
/
t
a
b
l
e
>
<
/
b
o
d
y
>
H
T
M
L
Slide 20
Slide 20 text
Now our page looks like
Slide 21
Slide 21 text
Now Adding some lists
The
- and
- tags are used for making ordered and unordered lists.
<
b
o
d
y
>
<
o
l
>
<
l
i
>
C
l
i
e
n
t S
i
d
e
:
<
u
l
>
<
l
i
>
P
H
P
<
/
l
i
>
<
l
i
>
J
a
v
a
<
/
l
i
>
<
l
i
>
P
y
t
h
o
n
<
/
l
i
>
<
/
u
l
>
<
/
l
i
>
<
l
i
>
C
l
i
e
n
t S
i
d
e
:
<
u
l
>
<
l
i
>
H
T
M
L
<
/
l
i
>
<
l
i
>
C
S
S
<
/
l
i
>
<
l
i
>
J
a
v
a
S
c
r
i
p
t
<
/
l
i
>
<
/
u
l
>
<
/
l
i
>
<
/
o
l
>
<
/
b
o
d
y
>
H
T
M
L
Slide 22
Slide 22 text
Now our page looks like this
Slide 23
Slide 23 text
We got all our data on our page but is it looking good...?? no.. its boring... so add
some fun and styling to it... lets do
CSS
Slide 24
Slide 24 text
What is CSS?
Cascading Style Sheets
Separates style from content
Easier to change formatting and update an entire website
Eliminate page load
Flexible design
Better use accessibility for search bots and screen readers
·
·
·
·
·
Slide 25
Slide 25 text
Changes in HTML
CSS styling using tags.
Inline styling using style attribute.
Linking of External CSS file
<
h
e
a
d
>
<
s
t
y
l
e
> <
!
-
- A
d
d y
o
u
r C
S
S c
o
d
e h
e
r
e
.
-
-
>
<
/
s
t
y
l
e
>
<
/
h
e
a
d
>
H
T
M
L
<
b
o
d
y s
t
y
l
e
=
"
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:
y
e
l
l
o
w
;
"
>
<
i
m
g s
r
c
=
"
i
m
a
g
e
s
/
w
n
c
c
.
p
n
g
" w
i
d
t
h
=
"
1
0
0
" h
e
i
g
h
t
=
"
4
0
"
/
>
<
p s
t
y
l
e
=
"
c
o
l
o
r
:
r
e
d
;
m
a
r
g
i
n
-
l
e
f
t
:
2
0
p
x
;
"
>
T
h
i
s i
s a r
e
d c
o
l
o
r
e
d p
a
r
a
g
r
a
p
h
.
<
/
p
>
<
/
b
o
d
y
>
H
T
M
L
<
h
e
a
d
>
<
l
i
n
k r
e
l
=
s
t
y
l
e
s
h
e
e
t h
r
e
f
=
"
s
t
y
l
e
.
c
s
s
" t
y
p
e
=
"
t
e
x
t
/
c
s
s
"
>
<
/
h
e
a
d
>
H
T
M
L
Slide 26
Slide 26 text
Changes in HTML
Using Id and Class attributes.
<
b
o
d
y
>
<
d
i
v i
d
=
"
h
e
a
d
e
r
"
>
T
h
e i
d s
e
l
e
c
t
o
r i
s u
s
e
d t
o s
p
e
c
i
f
y a s
t
y
l
e f
o
r a s
i
n
g
l
e
, u
n
i
q
u
e e
l
e
m
e
n
t
.
<
/
d
i
v
>
<
p c
l
a
s
s
=
"
i
t
e
m
s
"
>
T
h
e c
l
a
s
s s
e
l
e
c
t
o
r i
s u
s
e
d t
o s
p
e
c
i
f
y a s
t
y
l
e f
o
r a g
r
o
u
p o
f e
l
e
m
e
n
t
s
.
U
n
l
i
k
e t
h
e i
d s
e
l
e
c
t
o
r
, t
h
e c
l
a
s
s s
e
l
e
c
t
o
r i
s m
o
s
t o
f
t
e
n u
s
e
d o
n s
e
v
e
r
a
l e
l
e
m
e
n
t
s
.
<
/
p
>
<
p c
l
a
s
s
=
"
i
t
e
m
s
"
>
T
h
i
s a
l
l
o
w
s u
s t
o s
e
t a p
a
r
t
i
c
u
l
a
r s
t
y
l
e f
o
r m
a
n
y H
T
M
L e
l
e
m
e
n
t
s w
i
t
h t
h
e s
a
m
e c
l
a
s
s
.
<
/
p
>
<
/
b
o
d
y
>
H
T
M
L
Slide 27
Slide 27 text
HTML file after adding id, classes and div tags
<
!
D
O
C
T
Y
P
E h
t
m
l
>
<
h
t
m
l
>
<
h
e
a
d
>
<
t
i
t
l
e
>
M
y A
w
e
s
o
m
e P
a
g
e
<
/
t
i
t
l
e
>
<
l
i
n
k r
e
l
=
s
t
y
l
e
s
h
e
e
t h
r
e
f
=
"
s
t
y
l
e
.
c
s
s
" t
y
p
e
=
"
t
e
x
t
/
c
s
s
"
>
<
/
h
e
a
d
>
<
b
o
d
y
>
<
d
i
v i
d
=
"
c
o
n
t
a
i
n
e
r
"
>
<
d
i
v i
d
=
"
h
e
a
d
e
r
"
>
<
i
m
g s
r
c
=
"
i
m
a
g
e
s
/
w
n
c
c
.
p
n
g
"
/
>
<
h
1
>
H
e
l
l
o W
o
r
l
d
<
/
h
1
>
<
/
d
i
v
>
<
d
i
v i
d
=
"
s
e
s
s
i
o
n
"
>
<
h
3
>
S
e
s
s
i
o
n 1
:
<
/
h
3
>
<
/
d
i
v
>
<
d
i
v i
d
=
"
t
o
p
i
c
"
>
<
h
3
>
H
T
M
L a
n
d C
S
S
<
/
h
3
>
<
/
d
i
v
>
<
d
i
v i
d
=
"
m
a
i
n
"
>
<
d
i
v c
l
a
s
s
=
"
p
a
r
t
s
"
>
<
p
>
S
i
m
p
l
e P
a
r
a
g
r
a
p
h
<
/
p
>
.
.
.
<
/
d
i
v
>
H
T
M
L
Slide 28
Slide 28 text
HTML file
<
d
i
v c
l
a
s
s
=
"
p
a
r
t
s
"
>
<
t
a
b
l
e b
o
r
d
e
r
=
"
1
"
>
<
!
-
-
.
.
.
t
a
b
l
e
.
.
.
-
-
>
<
/
t
a
b
l
e
>
<
/
d
i
v
>
<
d
i
v c
l
a
s
s
=
"
p
a
r
t
s
"
>
<
o
l
>
<
!
-
-
.
.
.
l
i
s
t
s
.
.
.
-
-
>
<
/
o
l
>
<
/
d
i
v
>
<
/
d
i
v
>
<
d
i
v i
d
=
"
f
o
o
t
e
r
"
>
C
o
p
y
r
i
g
h
t © W
n
C
C :
P
:
P
<
/
d
i
v
>
<
/
d
i
v
>
<
/
b
o
d
y
>
<
/
h
t
m
l
>
H
T
M
L
Slide 29
Slide 29 text
A Sample CSS selector
Slide 30
Slide 30 text
CSS file
#
c
o
n
t
a
i
n
e
r
{
w
i
d
t
h
:
9
0
0
p
x
;
m
a
r
g
i
n
:
a
u
t
o
;
} /
*
# i
s u
s
e
d f
o
r s
e
l
e
c
t
i
n
g i
d
*
/
#
h
e
a
d
e
r
,
#
s
e
s
s
i
o
n
,
#
t
o
p
i
c
,
#
f
o
o
t
e
r
{
m
a
r
g
i
n
:
0
;
t
e
x
t
-
a
l
i
g
n
:
c
e
n
t
e
r
;
} /
*
m
u
l
e
t
e
p
l
e e
l
e
m
e
n
t
s c
a
n b
e s
e
l
e
c
t
e
d w
i
t
h c
o
m
m
a
*
/
#
h
e
a
d
e
r
{
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:
#
0
4
6
;
h
e
i
g
h
t
:
4
0
p
x
;
}
h
1
,
h
2
,
h
3
{
m
a
r
g
i
n
:
0
;
} /
*
d
i
r
e
c
t
l
y t
a
g n
a
m
e c
a
n a
l
s
o b
e u
s
e
d t
o s
e
l
e
c
t
*
/
#
h
e
a
d
e
r i
m
g
{
f
l
o
a
t
:
l
e
f
t
;
w
i
d
t
h
:
1
0
0
p
x
;
h
e
i
g
h
t
:
4
0
p
x
;
} /
*
t
h
i
s s
e
l
e
c
t
s i
m
g i
n
s
i
d
e a
n e
l
e
m
e
n
t w
i
t
h i
d h
e
a
d
e
r
*
/
#
s
e
s
s
i
o
n
{
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:
#
4
4
4
;
c
o
l
o
r
:
#
6
0
1
;
}
C
S
S
Slide 31
Slide 31 text
CSS file
#
t
o
p
i
c
{
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:
#
7
7
7
;
c
o
l
o
r
:
#
6
0
1
;
}
#
m
a
i
n
{
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:
#
9
9
9
;
o
v
e
r
f
l
o
w
:
h
i
d
d
e
n
;
}
.
p
a
r
t
s
{
w
i
d
t
h
:
3
3
%
;
h
e
i
g
h
t
:
1
0
0
%
;
f
l
o
a
t
:
l
e
f
t
;
p
a
d
d
i
n
g
-
l
e
f
t
:
3
p
x
;
} /
* . i
s u
s
e
d f
o
r s
e
l
e
c
t
i
n
g c
l
a
s
s
e
s
*
/
#
r
e
d
{
c
o
l
o
r
:
r
e
d
;
m
a
r
g
i
n
-
l
e
f
t
:
2
0
p
x
;
}
#
f
o
o
t
e
r
{
b
a
c
k
g
r
o
u
n
d
-
c
o
l
o
r
:
#
F
F
A
5
0
0
;
c
l
e
a
r
:
b
o
t
h
;
}
C
S
S
Slide 32
Slide 32 text
After external CSS styling...
Slide 33
Slide 33 text
HTML vs CSS
HTML is used for content and structure.
HTML houses scripting languages and behaviors.
CSS separates style from content.
CSS helps screen readers and users with disabilities read real content.
·
·
·
·
Slide 34
Slide 34 text
A Brief intro to accessibility
When building a Web site consider accessibility issues for users.
There are several things you can do to create good experiences for users
·
·
Write good, descriptive headlines
Write detailed paragraphs
Write precise page titles
Write descriptive image tags
Write descriptive links, Don’t say ‘click here!’
Separate content from style
·
·
·
·
·
·
Slide 35
Slide 35 text
Have you noticed one important thing in this session?? These slides are also
made using html, css and javascript.
Slide 36
Slide 36 text
Join Us
Google Group: https://groups.google.com/group/wncc_iitb/
Saif Hasan
Anil Shanbhag
Slide 37
Slide 37 text
Time to Implement...
We will be conducting homepage making contest for Freshers
so start thinking about ideas... start learning html and css...
More info will be posted on our google group so join it.