Scribd
Upload
9 views

Web Development Course (HTML + CSS)

Code The Web 2018 offers comprehensive computer application tutoring for students from IX to XII, as well as specialized classes for engineering undergraduates. The instructor, Mr. Aditya Goenka, has extensive experience in computer science and has conducted numerous workshops on various programming topics. The document outlines key concepts of HTML, CSS, and JavaScript, including their structures, syntax, and usage in web development.

Uploaded by

aishik.bishwanath.dey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
9 views

Web Development Course (HTML + CSS)

Code The Web 2018 offers comprehensive computer application tutoring for students from IX to XII, as well as specialized classes for engineering undergraduates. The instructor, Mr. Aditya Goenka, has extensive experience in computer science and has conducted numerous workshops on various programming topics. The document outlines key concepts of HTML, CSS, and JavaScript, including their structures, syntax, and usage in web development.

Uploaded by

aishik.bishwanath.dey
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 152

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:
&lt; &gt; &amp;
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

You might also like