0.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.2 Who Is This Book For? . . . . . . . . . . . . . . . . . . . . . . 1
0.3 Book Format . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
0.4 Where Do I Enter HTML Code? . . . . . . . . . . . . . . . . . 4
0.4.1 Windows PC . . . . . . . . . . . . . . . . . . . . . . . 4
0.4.2 Mac . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
0.5 Integrated Development Environment . . . . . . . . . . . . . . 8
0.6 Viewing Your Website In a Web Browser . . . . . . . . . . . . 9
1 Chapter – Primal HTML 11
1.1 Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . 11
1.2 Anatomy of an HTML Tag . . . . . . . . . . . . . . . . . . . . 12
1.3 Pairing HTML Tags . . . . . . . . . . . . . . . . . . . . . . . 12
1.4 Closing Tags In Correct Order . . . . . . . . . . . . . . . . . . 13
1.5 Nested Tags . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
1.6 HTML Comments . . . . . . . . . . . . . . . . . . . . . . . . . 16
1.6.1 Multi-line Comments . . . . . . . . . . . . . . . . . . . 16
1.7 Relative, Absolute, Blocking And Inline Elements . . . 17
1.8 When Code Becomes Design . . . . . . . . . . . . . . . . . . . 18
1.9 Default Style . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
1.10 Overnesting . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
1.11 Self-Closing Tags . . . . . . . . . . . . . . . . . . . . . . . . . 20
1.12 Tags or Elements? . . . . . . . . . . . . . . . . . . . . . . . . 20
1.13 Using HTML Tags For Their Intended Purpose . . . . . . 21
1.14 Tag Attributes and Properties . . . . . . . . . . . . . . . . . . 22
1.15 Event Attributes . . . . . . . . . . . . . . . . . . . . . . . . . 24
1.16 HTML Document Structure . . . . . . . . . . . . . . . . . . . 25
1.17 DOCTYPE . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
1.18 Specifying Website Title . . . . . . . . . . . . . . . . . . . . . 28
1.19 Inline, Internal & External Code . . . . . . . . . . . . . . . . . 28
2 Chapter II - Working With Color 31
2.1 The Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.2 HTML Elements And Cascading Style Sheets . . . . . . . . 33
2.3 Understanding Hexadecimal Values . . . . . . . . . . . . . . . 33
2.4 Setting Background and Font Colors . . . . . . . . . . . . . . 39
2.5 Using Single CSS Property To Set Multiple Values . . . . 42
2.6 Setting Element's Border Color . . . . . . . . . . . . . . . . . 43
3 Chapter III Color Gradients . . . . . . . . . . . . . . . . . . . . . . . . 45
3.1 Birds-Eye View . . . . . . . . . . . . . . . . . . . . . . . . . . 45
3.2 Displaying Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . 46
3.3 Gradient Types . . . . . . . . . . . . . . . . . . . . . . . . . . 49
4 Chapter IV – Text 54
4.1 Font Family . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
4.2 Google Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
4.3 Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
4.4 Size . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
5 Chapter V – Hyperlinks 63
5.1 Creating Hyperlinks Using The Anchor Tag . . . . . . . . . . 63
5.2 Removing The Underline . . . . . . . . . . . . . . . . . . . . . 64
6 Chapter VI - Working With Images 65
6.1 Background Images . . . . . . . . . . . . . . . . . . . . . . . . 65
6.1.1 no-repeat . . . . . . . . . . . . . . . . . . . . . . . . . 66
6.1.2 background-size . . . . . . . . . . . . . . . . . . . . . . 67
6.1.3 object-t: ll|cover|contain|none . . . . . . . . . . 72
6.1.4 background-position . . . . . . . . . . . . . . . . . . . 73
6.1.5 repeat-x . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.1.6 repeat-y . . . . . . . . . . . . . . . . . . . . . . . . . . 74
6.1.7 Multiple Backgrounds . . . . . . . . . . . . . . . . . . 75
6.1.8 Image Transparency . . . . . . . . . . . . . . . . . . . 76
6.1.9 Specifying multiple background images . . . . . . . . . 76
6.1.10 Other background properties. . . . . . . . . . . . . . . . 79
6.2 Images As HTML Elements . . . . . . . . . . . . . . . . . . . 81
6.3 Changing Image Properties . . . . . . . . . . . . . . . . . . . . 84
6.4 Stretching and Rotating Images . . . . . . . . . . . . . . . . . 84
7 Chapter VII – Tables 89
7.1 If You Can't Use a Desk Use a Table . . . . . . . . . . . . . . 89
7.2 Using <thead>, <tbody> and <tfoot> . . . . . . . . . . . . . 92
7.3 Decorating HTML Tables . . . . . . . . . . . . . . . . . . . . 93
7.4 Oh, And One More Thing About <th> Tag . . . . . . . . . . . 94
8 Chapter VIII – Forms 96
8.1 Creating Your First Form . . . . . . . . . . . . . . . . . . . . 96
8.2 Submitting Forms . . . . . . . . . . . . . . . . . . . . . . . . . 98
8.2.1 What Are HTTP Requests? . . . . . . . . . . . . . . . 99
8.2.2 GET Method . . . . . . . . . . . . . . . . . . . . . . . 99
8.2.3 POST Method . . . . . . . . . . . . . . . . . . . . . . 99
8.3 HTML Form Controls . . . . . . . . . . . . . . . . . . . . . . 100
8.4 Hidden Form Inputs . . . . . . . . . . . . . . . . . . . . . . . 105
8.5 Radio Buttons . . . . . . . . . . . . . . . . . . . . . . . . . . . 106
8.5.1 Labeling Radio Buttons . . . . . . . . . . . . . . . . . 106
8.5.2 Determining Default Radio Button . . . . . . . . . . . 107
8.6 Checking Form's Values Before Submitting Them . . . . . 107
8.7 HTML5 Form Validation . . . . . . . . . . . . . . . . . . . . . 108
8.7.1 Regular Expression Patterns . . . . . . . . . . . . . . . 110
8.7.2 First and Last Names . . . . . . . . . . . . . . . . . . . 111
8.7.3 Usernames . . . . . . . . . . . . . . . . . . . . . . . . . 111
8.7.4 Email Address . . . . . . . . . . . . . . . . . . . . . . . 112
8.7.5 Password . . . . . . . . . . . . . . . . . . . . . . . . . 113
8.7.6 Phone Numbers . . . . . . . . . . . . . . . . . . . . . . 114
8.7.7 Regular Expressions . . . . . . . . . . . . . . . . . . . 115
8.8 Clicking The Submit Button . . . . . . . . . . . . . . . . . . . 116
8.9 Using Custom Images To Replace Submit Button . . . . . 119
9 Chapter IX – Thinking In Pixels 121
9.1 Position and Size of HTML Elements . . . . . . . . . . . . . . 121
9.2 What Are Pixels? . . . . . . . . . . . . . . . . . . . . . . . . . 121
9.3 Position . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
9.4 Hierarchies of Coordinate Systems . . . . . . . . . . . . . . . . 123
9.5 Position & Display Properties . . . . . . . . . . . . . . . . . . 125
9.6 Text Spans . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
9.7 Default CSS Properties . . . . . . . . . . . . . . . . . . . . . . 127
9.8 From Inline to Block . . . . . . . . . . . . . . . . . . . . . . . 127
9.9 Top, left, bottom, right . . . . . . . . . . . . . . . . . . . . . . 128
9.10 HTML Element Size . . . . . . . . . . . . . . . . . . . . . . . 129
9.11 Margin, Padding and Borders . . . . . . . . . . . . . . . . . . 131
9.11.1 Changing Properties of Individual Sides of Elements 132
10 Chapter X – Text Behavior 134
10.1 inline . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
10.2 block . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
10.3 inline-block . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
11 Chapter XII – HTML Elements Common Properties 139
11.0.1 Anatomy of HTML Elements . . . . . . . . . . . . . . 139
11.0.2 Visibility . . . . . . . . . . . . . . . . . . . . . . . . . . 144
11.0.3 Positioning . . . . . . . . . . . . . . . . . . . . . . . . 145
11.0.4 Floating Elements . . . . . . . . . . . . . . . . . . . . . 148
11.1 Element Modifications . . . . . . . . . . . . . . . . . . . . . . 150
11.1.1 Rounded Corners . . . . . . . . . . . . . . . . . . . . . 150
11.1.2 Z-Index . . . . . . . . . . . . . . . . . . . . . . . . . . 150
11.1.3 box-shadow . . . . . . . . . . . . . . . . . . . . . . . . 151
11.1.4 Scale, Translate, Rotate . . . . . . . . . . . . . . . . . 153
12 Chapter XII – Layout Structure 153
12.1 Flex . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
12.2 Grid . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157
13 Chapter XIII – Building HTML Layouts 159
13.1 YouTube Example . . . . . . . . . . . . . . . . . . . . . . . . 160
13.1.1 Layout Scaffold . . . . . . . . . . . . . . . . . . . . . . 161
13.1.2 Second Level Elements . . . . . . . . . . . . . . . . . . 161
13.1.3 YouTube – Layout Elements . . . . . . . . . . . . . . . 162
13.1.4 YouTube – Source Code . . . . . . . . . . . . . . . . . 165
13.2 Twitter Example . . . . . . . . . . . . . . . . . . . . . . . . . 177
13.2.1 Twitter – Breaking down the layout into sections . . . 179
13.2.2 Twitter – Source code . . . . . . . . . . . . . . . . . . 181
14 Chapter XIV – Building Web Applications 189
14.1 Clock . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 190
14.1.1 HTML – Semantic Structure . . . . . . . . . . . . . . . 191
14.1.2 CSS – Element Style . . . . . . . . . . . . . . . . . . . 191
14.1.3 JavaScript – Animating CSS Styles . . . . . . . . . . . 193
14.2 Calculator . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 197
14.2.1 HTML – Application Scaffold . . . . . . . . . . . . . . 197
14.2.2 CSS – Cascading Style Sheets . . . . . . . . . . . . . . 198
14.2.3 JavaScript – Programming Interactivity . . . . . . . . 201
15 Chapter XV – Creating Meaningful Websites 205
15.1 MetaTags . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
15.1.1 Facebook Post Preview . . . . . . . . . . . . . . . . . . 209
15.1.2 Twitter Cards . . . . . . . . . . . . . . . . . . . . . . . 210
16 Thank You 210