Welcome To
Code The Web 2018
About The Institute
➢ A one stop solution to Computer Applications tutoring
➢ Regular Computer classes for IX to XII ( all boards )
➢ Special classes for Engineering Undergraduate students on
courses like Programming in C, C++, Data Structure and
Algorithms
➢ Training provided to Engineering final year students regarding job
interviews
➢ For more details visit www.codesclasses.com, Call : 9836178085
About The Instructor – Mr. Aditya Goenka
➢ B.Tech with Majors in Computer Science and Engineering
➢ Visiting Faculty at Institute of Engineering & Management, Kolkata
➢ Has mentored more than 2000 students
➢ Former Technical Consultant at Tata Consultancy Services
➢ Has conducted numerous workshops on Web Development,
Advanced Java Programming, Android Development, Data
Structures etc.
➢ Detailed profile at www.adityagoenka.in
In this lecture, we will discuss…
What is HTML?
What Does HTML Stand For?
HTML
HyperText Markup Language
What Is HTML?
Hypertext Markup Language
What Is HTML?
Hypertext Markup Language
Hypermedia
Hypertext
TEXT
What Is HTML?
Hypertext Markup Language
< ! d o c t y p e html> content
<html>
<head>
< t i t l e > Why I Love T hi s Co u r se < / t i t l e >
</ h ead >
<body> [ . . . ]
</body>
< / h t ml >
What Is HTML?
Hypertext Markup Language
<h1> <h1>
< div> H e l l o World!</ h 1 > < div> H e l l o World!< / d i v >
</ div> </ h 1 >
✔
Technologies That Drive The Web
HTML CSS Javascript
Structure Style Behavior
Hands-on Time: Lecture 1
Summary
HTML
• Annotates content
• Defines document structure
Right and wrong syntax
3 Core Web Technologies
• HTML, CSS, Javascript
NEXT :
A Bit Of Relevant History Of The HTML Standard
In this lecture, we will discuss…
History of HTML
How We Got to HTML5
Web Hypertext Application
Technology Group
Not driven XHTML 1.0 WHATWG: HTML5
by Standards HTML
1997 2000 2004 2007 2011 now
HTML 4.0 WHATWG & W3C
start to work
& 4.01 together
World Wide Web
Consortium
What Matters to You
WHATWG
HTML5 HTML
(standard) (evolving)
In this lecture, we will discuss…
Anatomy of an
HTML Tag
Anatomy of an HTML tag
content
Element name
<p> </p>
Opening tag Closing tag
Anatomy of an HTML tag
Line Break Horizontal
HorizontalBreak
Rule
<br> <hr>
Only opening tag Only opening tag
Anatomy of an HTML tag
No space allowed Must have space No space allowed
<p id="myId"></p>
Attribute Attribute
name value
Anatomy of an HTML tag
Value in quotes
<p id=" myId"></p>
Anatomy of an HTML tag
Double or single
<p id=' myId' ></p>
Anatomy of an HTML tag
Outer double quotes
<p onclick=" a l e r t ( ' h i ' ) "></p>
Inner single
quotes
Anatomy of an HTML tag
<p/> <p></p>
✘ ✔
Summary
Anatomy of an HTML tag
• Opening and closing tag
• Attributes
• Using double and single quotes
• How to specify tag without any content
NEXT:
Basic HTML Document Structure
In this lecture, we will discuss…
Basic HTML
Document Structure
Hands-on Time: Lecture 4
Summary
The bare minimum HTML document
HTML version declaration
Our first HTML tags!
• <html> – <meta> – <head> – < t i t l e > – <body>
Sequential (top to bottom) rendering
NEXT:
HTML Content Models
In this lecture, we will discuss…
HTML
Content Models
Block-Level Elements Inline Elements
Render to begin on a new line Render on the same line
(by default) (by default)
May contain inline or other May only contain other inline
block-level elements elements
Roughly Flow Content Roughly Phrasing Content
(HTML5 category) (HTML5 category)
HTML5 replaces these definitions with more complex
set of content categories.
However, this distinction remains practical because it
aligns wellwith existing CSS rules.
Hands-on Time: Lecture 5
Summary
Compared block-level & inline content types
Officially not part of HTML5, but still used
Roughly equivalent to flow content & phrasing content
NEXT:
Headings & Some New Semantic Elements
In this lecture, we will discuss…
Heading Elements
(and some new
HTML5 semantic
elements)
se·man·tic
Relating to meaning in language or logic
semantic html element
Element that implies some meaning to
the content
Human and/or machine can understand meaning of
content surrounded by a semantic element better
May help search engine ranking, i.e., SEO
Hands-on Time: Lecture 6
Summary
Well chosen content of H1 element is crucial toSEO
Semantic elements allow for a more meaningful
expression of the structure of our HTMLpage
NEXT:
Structuring Content with Lists
In this lecture, we will discuss…
Lists
Hands-on Time: Lecture 7
Summary
Lists provide a natural and commonly used grouping of
content
Very often, lists are used for structuring navigation
portions of the web page
NEXT:
HTML Character Entity References
In this lecture, we will discuss…
HTML Character
Entity References
3 Characters You Should Always Escape
Instead of: Instead of: Instead of:
< > &
USE: USE: USE:
< > &
Hands-on Time: Lecture 8
Summary
HTML Entities
• Help avoid rendering issues
• Safeguard against more limited character encoding
• Provide characters not available on a keyboard
NEXT:
Making text hyper with Linking
In this lecture, we will discuss…
Creating Links
Hands-on Time: Lecture 9
Summary
Internal linking to other pages in the site
External linking to other web sites
Linking to sections of a document
NEXT:
Displaying Images
In this lecture, we will discuss…
Displaying Images
Hands-on Time: Lecture 10
Summary
Images can enhance your site
Remember to specify width and height attributes
whenever possible
In this lecture, we will discuss…
Power of CSS
Summary
CSS is an incredibly powerful technology
User experience of content matters
NEXT:
Anatomy of a CSS Rule
In this lecture, we will discuss…
Anatomy of a
CSS Rule
Anatomy of a CSS Rule
Selector
Property Value
p {
color: blu e
} ;
Declaration
Anatomy of a CSS Rule
p {
Zero or More
color: blue;
Declarations
are allowed f o n t - s i z e : 20px;
width: 200px;
}
Anatomy of a CSS Rule
p {
color: blue;
f o n t - s i z e : 20px;
width: 200px;
}
h1 { Stylesheet
color: green;
f o n t - s i z e : 36px;
t e x t - a l i g n : c e n t e r;
}
...
Hands-on Time: Lecture 12
Summary
Syntax of a CSS rule
• Selector
• Declaration
• Property/value pair
Style sheet
NEXT:
Element, class, & id Selectors
In this lecture, we will discuss…
Element, class,
& id Selectors
Element Selector
Element name
p {
color: blue;
}
Element Selector
Blue text
p { ...
color: blue; <p>. . . </ p>
} ...
<p>. . . </ p>
Blue text
class Selector
Class name
.b lue {
color: blue;
}
class Selector
Blue text
...
.b lu e { ...
color: blue; <p c lass= " b l u e " >. . . </ p>
} <p>. . . </ p>
< d i v c lass= " b l u e " >. . . < / d i v >
...
Blue text
Unaffected
class Selector
Defined with . Used without
Blue text
...
...
.b lue { <p c lass= " b l u e " >. . . </ p>
color: b l u e ; <p>. . . </ p>
} < d i v c lass= " b l u e " >. . . < / d i v >
...
Blue text
Unaffected
id Selector
id Value
#name {
color: blue;
}
id Selector
Unaffected
#name { ...
color: blue; <p>. . . </ p>
} < d i v i d = "name">. . . < / d i v >
...
Blue text
id Selector
Defined with #
Unaffected
...
#name { <p>. . . </ p>
color: b l u e ; < d i v i d = "name">. . . < / d i v >
} ...
Used without Blue text
Grouping Selectors
Separate selectors
with commas Blue text
...
...
div, .blue { <p c lass= " b l u e " >. . . </ p>
c o lo r : b l u e ; <p>. . . </ p>
} <div>. . . < / d i v >
...
Blue text
Hands-on Time: Lecture 13
Summary
Syntax simple CSS selectors
• Element
• Class (define with .)
• Id (define with #)
NEXT:
Combining Selectors
In this lecture, we will discuss…
Combining
Selectors
Element With Class Selector
Every p that has class=“ big”
p.b i g {
f o n t - s i z e : 20px;
}
NOTE lack of space between element and class defini8on
Element With Class Selector
Text size 20px
p. b i g { ...
f o n t - s i z e : 20px; <p c lass= " b i g " >. . . </ p>
} < d i v c lass= " b i g " >. . . < / d i v >
...
Unaffected text
Child Selector
Every p that is a direct child of a r t i c l e
a r t i c l e >p{
color: blue;
}
Child Selector
Blue text
<article>. . .
a r t i c l e >p { <p>. . . </ p>
}
color: blue;
...
</article> Unaffected text
<p>. . . </ p>
<article>. . .
<div><p>. . . </ p></ div>
</article>
Unaffected text
Descendant Selector
Every p that is inside (at any level) of a r t i c l e
a r t i c l e p{
color: blue;
}
Descendant Selector
Blue text
<article>. . .
article p { <p>. . . </ p>
</article> Unaffected text
}
color: blue;
...
<p>. . . </ p>
<article>. . .
<div><p>. . . </ p></ div>
</article>
Blue text
Not Limited To Element Selectors
. colored p { a r t i c l e >. colored {
c o lo r : b l u e ; color: blue;
} }
Every p that is inside (at any level) an Every element with
element with class="colored" class="colored" that is a direct
child of a r t i c l e element
Hands-on Time: Lecture 14
Summary
Combining selectors
• Element with c l a s s selector (s e l e c t o r. c l a s s )
• Child (direct) selector (s e l e c t o r > s e l e c t o r )
• Descendent selector (s e l e c t o r s e l e c t o r )
NEXT:
Pseudo Class Selectors
In this lecture, we will discuss…
Pseudo-Class
Selectors
Pseudo-Class Selector
s e l e c t o r :pseudo-class {
...
}
Pseudo-Class Selector
Many pseudo-class selectors exist
We cover:
• :link
• :visited
• :hover
• :active
• :nth-child(…)
Hands-on Time: Lecture 15
Summary
Pseudo-class selectors are very powerful
Make sure your selector is still readable
• Simple/Readable > Complicated/Tricky
NEXT:
Style Placement
Hands-on Time: Lecture 16 – Style Placement
In this lecture, we will discuss…
Conflict
Resolution
Some Concepts
origin merge
inheritance specificity
Origin Precedence (when in conflict)
simple rule
Last Declaration Wins
Remember, HTML is processed sequentially,
top to bottom.
For precedence, think of external CSS as
declared at the spot where it’s linked to.
Origin Precedence (when no conflict)
even simpler rule
Declarations Merge
Hands-on Time: Lecture 17
Inheritance
body
element
DOM element
Tree
element
element
element
Specificity
simple rule
Most Specific
Selector Combination Wins
Specificity (score)
Class, pseudo,
style=“…” ID class, a. ribute # of Elements
1 0 0 0
<h2 style= " c o l o r : green;">
Specificity (score)
Class, pseudo,
style=“…” ID class, a. ribute # of Elements
0 0 0 2
div p { color: green; }
Specificity (score)
d i v #myParag { div. b i g p {
color:
blue;
? }
color: green;
}
0 1 0 1 0 0 1 2
✔
Specificity (score)
d i v #myParag {
X div. b i g p {
}
color: blue; ? }
color: green;
0 1 0 1X 0 0 1 2
0
✔
Hands-on Time: Lecture 17
Summary
Cascade: origin, merge; Inheritance, & Specificity
Provide precise control over targeting content while
allowing maximum re-use of styles across your website
Hands-on Time: Lecture 18 – Text Styling
In this lecture, we will discuss…
The Box Model
The Box Model
border padding
margin Content
height
width
Hands-on Time: Lecture 19 – Box Model
Cumulative Margins
90px
Content
Content
40px 50px
Cumulative Margins?
Content
20px
50px?
30px
Content
Cumulative Margins
Content
20px
30px
Margins collapse
30px Content
Hands-on Time: Lecture 19
Summary
Box model – essential to understand
• Prefer box- sizing: border-box
The * (universal) selector
Cumulative and collapsing margins
Content overflow
NEXT:
The background Property
Hands-on Time: Lecture 20 - Backgrounds
Hands-on Time: Lecture 21 – Floating elements
In this lecture, we will discuss…
Relative and
Absolute Element
Positioning
Static Positioning
Normal document flow.
Default for all, except html.
Positioning offsets are ignored
Relative Positioning
Element is positioned relative to its position
in normal document flow.
Positioning CSS (offset) properties are:
• top, bottom, left, right
Element is NOT taken out of normal document flow
• Even if moved, its original spot is preserved
Relative Positioning
p{
<p>
}
Relative Positioning
l e f t : 50px;
p {
position: r e l a t i v e ;
top: 50px;
top: 50px; <p>
l e f t : 50px;
}
Normal document flow
remains
Relative Positioning
r i g h t : -50 px;
p{
position: r e l a t i v e ;
bottom: -50 px;
r i g h t : -50 px;
}
bottom: -50px;
Absolute Positioning
All offsets (top, bottom, left, right) are relative to the
position of the nearest ancestor which has
positioning set on it, other than static.
By default, html is the only element that has
non-static positioning set on it(relative).
Element is taken out of normal document flow
Absolute Positioning
position: relative;
p { / * #1 * /
}
1
2
Absolute Positioning
position: relative;
p { / * #1 * /
position: absolute;
21
}
Absolute Positioning
position: relative;
p { / * #1 * /
position: absolute; 2
bottom: 10px;
r i g h t : 10px;
}
1
Absolute Positioning
position: relative;
t o p : 10 px;
l e f t : 10 px;
p { / * #1 * /
position: absolute;
1
bottom: 10px; 2
r i g h t : 10px;
}
If container element is offset,
everything inside is offset with it.
1
Hands-on Time: Lecture 22
Summary
Static positioning is default for all elements, except html
Relative positioning offsets the element relative to its
normal document flow position
Absolute positioning is relative to closest ancestor which
has positioning set to non-static value
Offsetting the relative container element offsets its
contents as well
NEXT:
Responsive Design
In this lecture, we will discuss…
Responsive
Design
What device do we need to support?
ALL OF THEM
What is a Responsive Web Site?
A responsive website is a single website that
adapts to any screen size so it's as easy to use
on mobile as it is on tablet and desktop –
NO pinching or horizontal scrolling required .
What is a Responsive Web Site?
Site designed to adapt its layout to the
viewing environment by using fluid,
proportion Abased grids, flexible
images, and CSS3 media queries
Paraphrased from Wikipedia
Site’s layout adapts to the size of the device
Content alignment or its visual delivery may change
Alternative to Responsive Design:
1.2
Server
Detect
User6Agent,
i.e., browser
1.3
12-Column Grid Responsive Layout
factors of 12: 1, 2, 3, 4, 6, 12
12-Column Grid Responsive Layout
padding
3 3 3 3
6 6
4 4 4
12-Column Grid Responsive Layout
100%
1 column = 100% / 12 = 8.33%
3 3 3 3
6 6
4 4 4
12-Column Grid Responsive Layout
100%
1 column = 100% / 12 = 8.33%
25% 25% 25% 25%
50% 50%
33.33% 33.33% 33.33%
12-Column Grid Responsive Layout
Nested grids
4 4 4
6 6 3 3 3 3 4 4 4
In this lecture, we will discuss…
Introduction to
Twitter Bootstrap
What is Bootstrap?
Bootstrap is the most popular HTML, CSS,
and JS framework for developing
responsive,
mobile first projects on the web.
What is Bootstrap?
Bootstrap is the most popular HTML, CSS,
and JS framework for developing
responsive,
mobile first projects on the web.
Mostly CSS classes
What is Bootstrap?
Bootstrap is the most popular HTML, CSS,
and JS framework for developing
responsive, mobile first projects on the
web.
Which
to code
first?
✔ ✔
What is Bootstrap?
✔ Mobile First == PLAN mobile from the start
CSS Framework is mobile ready
✔
Disadvantages of Bootstrap (vs. Writing Your
Own)?
#1 complaint
Too big, too bloated
A lot of features you will probably never use
• Use selective download
You can write your own that’s more targeted/smaller
• But it will take you a LOT longer to write it as well
Summary
Intro to the most popular project on GitHub
Mobile First – importance of planning for mobile from
the start
Barebones Bootstrap web page
NEXT:
Bootstrap Grid System
In this lecture, we will discuss…
The Bootstrap
Grid System
Bootstrap Grid System Basics
Must be inside container (or container-fluid)
< di v c l a s s = " c ont a i ne r " >
< di v c l a s s = "row">
< di v c l a s s = " col- md- 4">Col 1< / d i v >
. ..
</div>
</div>
Bootstrap Grid System Basics
Creates horizontal groups of columns
< di v c l a s s = " c ont a i ne r " >
< di v c l a s s = "row">
< di v c l a s s = " col- md- 4">Col 1< / d i v >
. ..
Applies nega<ve le>/right margins
</div>
</div>
Why Negative Row Margin?
browser
.container
.row-no-nega/ve-margin
column column column
content content content
Regular content
Regular content
Regular content
Why Negative Row Margin?
browser
.container
.row
column column column
content content content
Regular content
Regular content
Regular content
Bootstrap Grid System Basics
< di v c l a s s = " c ont a i ne r " >
< di v c l a s s = "row">
< di v c l a s s = "col- md- 4">Col 1< / d i v >
. ..
</div>
</div>
Bootstrap Grid System Basics
< di v c l a s s = " c ont a i ne r " >
< di v c l a s s = "row">
< di v c l a s s = " col- md- 4">Col 1< / d i v >
. ..
</div>
</div>
Bootstrap Grid System Basics
• How many columns
col-SIZE-SPAN element should span
• Values: 1 through 12
• Screen width range iden<fier
• Columns will collapse (i.e., stack)
below that width
• Unless another rule applies
Bootstrap Grid System Basics
<header c l a s s = " c ont a i ne r " >
<nav c l a s s = "row">
< di v c l a s s = "col- md- 4">Col 1< / d i v >
. ..
</ nav>
</ header>
Hands-on Time: Lecture 26
Summary
Structure Bootstrap expects for the grid-based layout
• Needs to be inside .container (or .container-fluid)
• All columns must be inside .row
SIZE identifier identifies at which breakpoint specified
column spans will be ignored and all elements will
collapse (i.e., stack)
If no other rules apply, specifying col-xs-… will keep that
layout no matter what the size of the screen
Visit with the Client
