HTML – The Intuitive Guide
HTML – The Intuitive Guide
About the Book
HTML – The Intuitive Guide takes the visual approach to teaching fundamental knowledge of the HTML language. The book is packed with diagrams and instructions on creating your own Websites and Web Application layouts. Only the most important and vital parts of the language were chosen demonstrating the best of HTML in practical setting.
About the Author
Table of Contents
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
The Leanpub 60 Day 100% Happiness Guarantee
Within 60 days of purchase you can get a 100% refund on any Leanpub purchase, in two clicks.
Now, this is technically risky for us, since you'll have the book or course files either way. But we're so confident in our products and services, and in our authors and readers, that we're happy to offer a full money back guarantee for everything we sell.
You can only find out how good something is by trying it, and because of our 100% money back guarantee there's literally no risk to do so!
So, there's no reason not to click the Add to Cart button, is there?
See full terms...
80% Royalties. Earn $16 on a $20 book.
We pay 80% royalties. That's not a typo: you earn $16 on a $20 sale. If we sell 5000 non-refunded copies of your book or course for $20, you'll earn $80,000.
(Yes, some authors have already earned much more than that on Leanpub.)
In fact, authors have earnedover $13 millionwriting, publishing and selling on Leanpub.
Learn more about writing on Leanpub
Free Updates. DRM Free.
If you buy a Leanpub book, you get free updates for as long as the author updates the book! Many authors use Leanpub to publish their books in-progress, while they are writing them. All readers get free updates, regardless of when they bought the book or how much they paid (including free).
Most Leanpub books are available in PDF (for computers) and EPUB (for phones, tablets and Kindle). The formats that a book includes are shown at the top right corner of this page.
Finally, Leanpub books don't have any DRM copy-protection nonsense, so you can easily read them on any supported device.
Learn more about Leanpub's ebook formats and where to read them
