Table of Contents
TOPIC 031: SOFTWARE DEVELOPMENT AND WEB TECHNOLOGIES . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
031.1 Software Development Basic. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
031.1 Lesson 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Source Code. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
Programming Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
031.2 Web Application Architecture. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
031.2 Lesson 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
Clients and Servers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
The Client Side. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
Varieties of Web Clients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
Languages of a Web Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
The Server Side . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Handling Paths from Requests. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
Database Management Systems . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Content Maintenance. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
031.3 HTTP Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31
031.3 Lesson 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
The Client’s Request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
The Response Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Static and Dynamic Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
Caching. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
HTTP Sessions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44

Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46
TOPIC 032: HTML DOCUMENT MARKUP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
032.1 HTML Document Anatomy. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
032.1 Lesson 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Anatomy of an HTML Document . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Document Header . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
032.2 HTML Semantics and Document Hierarchy . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63
032.2 Lesson 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65
Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Headings . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
Line Breaks . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68
Horizontal Lines . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69
HTML Lists . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70
Inline Text Formatting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75
Preformatted Text . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80
Grouping Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81
HTML Page Structure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 92
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
032.3 HTML References and Embedded Resources . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104
032.3 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Embedded Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 105
Links . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
Explorational Excercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

032.4 HTML Forms. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 117
032.4 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Simple HTML Forms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
Input for large texts: textarea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
Lists of Options . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
The hidden Element Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 130
The File Input Type . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Action Buttons. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 131
Form Action and Methods. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 134
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 135
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 136
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 137
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 138
TOPIC 033: CSS CONTENT STYLING . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 140
033.1 CSS Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 141
033.1 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142
Applying Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 150
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 154
033.2 CSS Selectors and Style Application. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
033.2 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Page-Wide Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
Restrictive Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158
Special Selectors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 163
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 165
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 166
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 167
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 168
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 169
033.3 CSS Styling . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 170
033.3 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
CSS Common Properties and Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171

Colors . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171
Background . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 174
Borders. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Unit Values. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 176
Relative Units . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 177
Fonts and Text Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 178
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 181
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 184
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 185
033.4 CSS Box Model and Layout. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 186
033.4 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Normal Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 187
Customizing Normal Flow . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
Responsive Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 198
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 200
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 201
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 202
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 203
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 204
TOPIC 034: JAVASCRIPT PROGRAMMING . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 205
034.1 JavaScript Execution and Syntax . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
034.1 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Running JavaScript in the Browser . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 207
Browser Console. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 210
JavaScript Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 211
JavaScript Commenting . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 212
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 214
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 215
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 216
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 217
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 218
034.2 JavaScript Data Structures. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 219
034.2 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
High-Level Languages . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 220
Declaration of Constants and Variables . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 221

Types of Values . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 223
Operators. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 227
Guided Excercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 230
Explorational Excercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 232
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 233
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 234
034.3 JavaScript Control Structures and Functions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 235
034.3 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
If Statements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 236
Switch Structures . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241
Loops . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 243
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 247
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 248
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 249
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 251
034.3 Lesson 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Defining a Function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 253
Function Recursion. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 258
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 262
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 264
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 266
034.4 JavaScript Manipulation of Website Content and Styling . . . . . . . . . . . . . . . . . . . . . . . . . 267
034.4 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
Interacting with the DOM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 268
HTML Content . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 269
Selecting Specific Elements. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 271
Working with Attributes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 272
Working with Classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 275
Event Handlers . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 276
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 279
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 280
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 282

Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 283
TOPIC 035: NODEJS SERVER PROGRAMMING . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 284
035.1 NodeJS Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 285
035.1 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 286
Getting Started . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 287
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 294
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 295
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 296
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 297
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 298
035.2 NodeJS Express Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 299
035.2 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Initial Server Script . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 301
Routes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 304
Adjustments to the Response. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 308
Cookie Security . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 311
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 312
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 313
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 315
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 316
035.2 Lesson 2. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 317
Static Files . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Formatted Output . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 318
Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 323
HTML Templates . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 325
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 329
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 330
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 331
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 333
035.3 SQL Basics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 334
035.3 Lesson 1. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
Introduction. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 335
SQLite . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 336
Opening the Database. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337

Structure of a Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 337
Data Entry . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 338
Queries. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 339
Changing the Contents of the Database. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 340
Closing the Database . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 342
Guided Exercises. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 344
Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 345
Summary . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 346
Answers to Guided Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 347
Answers to Explorational Exercises . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 348
Imprint. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 349

Web Development Essentials (030) (Version 1.0) |Topic 031: Software Development and Web Technologies

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

1Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

031.1 Software Development Basic
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 031.1
Weight1
Key knowledge areas• Understand what source code is• Understand the principles of compilers and interpreters• Understand the concept of libraries• Understand the concepts of functional, procedural and object-oriented programming• Awareness of common features of source code editors and integrated development
environments (IDE)• Awareness of version control systems• Awareness of software testing• Awareness of important programming languages (C, C++, C#, Java, JavaScript, Python, PHP)

2|learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.1 Software Development Basic

031.1 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

031 Software Development and Web
Technologies

Objective:

031.1 Software Development Basics

Lesson:1 of 1Introduction
The very first computers were programmed through the grueling process of plugging cables into
sockets. Computer scientists soon started a never-ending search for easy ways to tell the computer
what to do. This chapter introduces the tools of programming. It discusses the key ways that text
instructions—programming languages—represent the tasks a programmer wants to accomplish,
and the tools that change the program into a form called machine language that a computer can
run.
NOTE

In this text, the terms program and application are used interchangeably.

Source CodeA programmer normally develops an application by writing a textual description, called source
code, of the desired task. The source code is in a carefully defined programming language that
represents what the computer can do in a high-level abstraction humans can understand. Tools
have also been developed to let programmers as well as non-programmers express their thoughts
visually, but writing source code is still the predominant way to program.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

3

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

In the same way that a natural language has nouns, verbs, and constructions to express ideas in a
structured way, the words and punctuation in a programming language are symbolic
representations of operations that will be performed on the machine.
In this sense, source code is not very different from any other text in which the author employs
the well-established rules of a natural language to communicate with the reader. In the case ofsource code, the “reader” is the machine, so the text cannot contain ambiguities orinconsistencies—even subtle ones.
And like any text that discusses some topic in depth, the source code also needs to be wellstructured and logically organized when developing complex applications. Very simple programsand didactic examples can be stored in the few lines of a single text file, which contains all the
program’s source code. More complex programs can be subdivided into thousands of files, eachwith thousands of lines.
The source code of professional applications should be organized into different folders, usuallyassociated with a particular purpose. A chat program, for example, can be organized into two
folders: one that contains the code files that handle the transmission and reception of messages
over the network, and another folder that contains the files that build the interface and react touser actions. Indeed, it is common to have many folders and subfolders with source code files
dedicated to very specific tasks within the application.
Moreover, the source code is not always isolated in its own files, with everything written in asingle language. In web applications, for example, an HTML document can embed JavaScript codeto supplement the document with extra functionality.

Code Editors and IDE
The variety of ways in which source code can be written can be intimidating. Therefore, many
developers take advantage of tools that help with writing and testing the program.
The source code file is just a plain text file. As such, it can be edited by any text editor, no matter
how simple. To make it easier to distinguish between source code and plain text, each language
adopts a self-explanatory filename extension: .c for the C language, .py for Python, .js for
JavaScript, etc. General-purpose editors often understand the source code of popular languages
well enough to add italics, colors, and indentation to make the code understandable.
Not every developer chooses to edit source code in a general-purpose editor. An integrated
development environment (IDE) provides a text editor along with tools to help the programmer
avoid syntactic errors and obvious inconsistencies. These editors are particularly recommended
for less experienced programmers, but experienced programmers use them as well.

4|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.1 Software Development Basic

Popular IDEs such Visual Studio, Eclipse, and Xcode intelligently watch what the programmer
types, frequently suggesting words to use (autocompletion) and verifying code in real-time. The
IDEs can even offer automated debugging and testing to identify issues whenever the source codechanges.
Some more experienced programmers opt for less intuitive editors such as Vim, which offer
greater flexibility and do not require installation of additional packages. These programmers use
external, standalone tools to add the features that are built-in when you use an IDE.

Code Maintenance
Whether in an IDE or using standalone tools, it’s important to employ some kind of version control
system (VCS). Source code is constantly evolving because unforeseen flaws need to be fixed andenhancements need to be incorporated. An inevitable consequence of this evolution is that fixes
and enhancements can interfere with other parts of applications in a large code base. Version
control tools such as Git, Subversion, and Mercurial record all changes made to the code and who
made the change, allowing you to trace and eventually recover from an unsuccessful
modification.
Furthermore, version control tools allow each developer on the team to work on a copy of thesource code files without interfering with the work of other programmers. Once the new versionsof source code are ready and tested, corrections or improvements made to one copy can beincorporated by other team members.
Git, the most popular version control system nowadays, allows many independent copies of arepository to be maintained by different people, who share their changes as they desire. However,whether using a decentralized or centralized version control system, most teams maintain one
trusted repository whose source code and resources can be relied on. Several online services offer
storage for repositories of source code. The most popular of these services are GitHub and GitLab,but the GNU project’s Savannah is also worth mentioning.

Programming Languages
A wide variety of programming languages exist; each decade sees the invention of new ones. Each
programming language has its own rules and is recommended for particular purposes. Although
the languages show superficial differences in syntax and keywords, what really distinguishes thelanguages are the deep conceptual approaches they represent, known as paradigms.

Paradigms
Paradigms define the premises on which a programming language is based, especially concerning

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

5Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

how the source code should be structured.
The developer starts from the language paradigm to formulate the tasks to be performed by themachine. These tasks, in turn, are symbolically expressed with the words and syntactic
constructions offered by the language.
The programming language is procedural when the instructions presented in the source code are
executed in sequential order, like a movie script. If the source code is segmented into functions orsubroutines, a main routine takes care of calling the functions in sequence.
The following code is an example of a procedural language. Written in C, it defines variables torepresent the side, area and volume of geographical shapes. The value of the side variable isassigned in main(), which is the function invoked when the program is executed. The area andvolume variables are calculated in the square() and cube() subroutines that precede the mainfunction:#include <stdio.h>
float side;
float area;
float volume;
void square(){ area = side * side; }void cube(){ volume = area * side; }int main(){side = 2;
square();cube();
printf("Volume: %f\n", volume);
return 0;}

The order of actions defined in main() determines the sequence of program states, characterized
by the value of the side, area, and volume variables. The example ends after displaying the valueof volume with the printf statement.
On the other hand, the paradigm of object-oriented programming (OOP) has as its main
characteristic the separation of the program state into independent sub-states. These sub-states
and associated operations are the objects, so called because they have a more or less independent
existence within the program and because they have specific purposes.

6|learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.1 Software Development Basic

Distinct paradigms do not necessarily restrict the type of task that can be performed by aprogram. The code from the previous example can be rewritten according to the OOP paradigm
using the C++ language:#include <iostream>class Cube {float side;public:Cube(float s){ side = s; }float volume() { return side * side * side; }};int main(){float side = 2;
Cube cube(side);
std::cout << "Volume: " << cube.volume() << std::endl;
return 0;}

The main() function is still present. But now there is a new word, class, that introduces thedefinition of an object. The defined class, named Cube, contains its own variables andsubroutines. In OOP, a variable is also called an attribute and a subroutine is called a method.
It’s beyond the scope of this chapter to explain all the C++ code in the example. What’s important
to us here is that Cube contains the side attribute and two methods. The volume() method
calculates the cube’s volume.
It is possible to create several independent objects from the same class, and classes can becomposed of other classes.
Keep in mind that these same features can be written differently and that the examples in thischapter are oversimplified. C and C++ have much more sophisticated features that allow much
more complex and practical constructions.
Most programming languages do not rigorously impose one paradigm, but allow programmers tochoose various aspects of one paradigm or another. JavaScript, for example, incorporates aspects
of different paradigms. The programmer can decompose the entire program into functions that do
not share a common state with each other:function cube(side){
return side*side*side;

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

7

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies}
console.log("Volume: " + cube(2));

Although this example is similar to procedural programming, note that the function receives a
copy of all the information necessary for its execution and always produces the same result forthe same parameter, regardless of changes that happen outside the function’s scope. This
paradigm, called functional, is strongly influenced by mathematical formalism, where every
operation is self-sufficient.
Another paradigm covers declarative languages, which describe the states you want the system to
be in. A declarative language can figure out how to achieve the specified states. SQL, the universal
language for querying databases, is sometimes called a declarative language, although it reallyoccupies a unique niche in the programming pantheon.
There is no universal paradigm that can be adopted to any context. The choice of language may
also be restricted by which languages are supported on the platform or execution environment
where the program will be used.
A web application that will be used by the browser, for example, will need to be written in
JavaScript, which is a language universally supported by browsers. (A few other languages can beused because they provide converters to create JavaScript.) So for the web browser—sometimes
called the client side or front end of the web application—the developer will have to use theparadigms allowed in JavaScript. The server side or back end of the application, which handles
requests from the browser, is normally programmed in a different language; PHP is most popular
for this purpose.
Regardless of paradigm, every language has pre-built libraries of functions that can beincorporated into code. Mathematical functions—like the ones illustrated in the example code—
don’t need to be implemented from scratch, as the language already has the function ready to use.
JavaScript, for example, provides the Math object with the most common math operations.
Even more specialized functions are usually available from the language vendor or third-party
developers. These extra resource libraries can be in source code form; i.e., in extra files that areincorporated into the file where they will be used. In JavaScript, embedding is done with importfrom:import { OrbitControls } from 'modules/OrbitControls.js';

This type of import, where the embedded resource is also a source code file, is most often used inso-called interpreted languages. Compiled languages allow, among other things, the incorporation8|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.1 Software Development Basicof pre-compiled features in machine language, that is, compiled libraries. The next section
explains the differences between these types of languages.

Compilers and Interpreters
As we already know, source code is a symbolic representation of a program that needs to betranslated into machine language in order to run.
Roughly speaking, there are two possible ways to do the translation: converting the source code
beforehand for future execution, or converting the code at the moment of its execution.
Languages of the first modality are called compiled languages and languages of the second
modality are called interpreted languages. Some interpreted languages provide compilation as an
option, so that the program can start faster.
In compiled languages, there is a clear distinction between the source code of the program and theprogram itself, which will be executed by the computer. Once compiled, the program will usuallywork only on the operating system and platform for which it was compiled.
In an interpreted language, the source code itself is treated as the program, and the process of
converting to machine language is transparent to the programmer. For an interpreted language, it
is common to call the source code a script. The interpreter translates the script into the machine
language for the system it’s running on.
Compilation and Compilers
The C programming language is one of the best-known examples of a compiled language. The C
language’s greatest strengths are its flexibility and performance. Both high-performancesupercomputers and microcontrollers in home appliances can be programmed in the C language.
Other examples of popular compiled languages are C++ and C# (C sharp). As their names suggest,these languages are inspired by C, but include features that support the object-oriented paradigm.
The same program written in C or C++ can be compiled for different platforms, requiring little orno change to the source code. It is the compiler that defines the target platform of the program.
There are platform-specific compilers as well as cross-platform compilers such as GCC (which
stands for GNU Compiler Collection) that can produce binary programs for many distinct
architectures.

NOTE

There are also tools that automate the compilation process. Instead of invoking thecompiler directly, the programmer creates a file indicating the different
compilation steps to be performed automatically. The traditional tool used for thispurpose is make, but a number of newer tools such as Maven and Gradle are also inwidespread use. The entire build process is automated when you use an IDE.
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

9Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

The compilation process does not always generate a binary program in machine language. Thereare compiled languages that produce a program in a format generically called bytecode. Like ascript, bytecode is not in a platform-specific language, so it requires an interpreter program thattranslates it into machine language. In this case, the interpreter program is simply called aruntime.
The Java language takes this approach, so compiled programs written in Java can be used on
different operating systems. Despite its name, Java is unrelated to JavaScript.
Bytecode is closer to machine language than source code, so its execution tends to becomparatively faster. Because there is still a conversion process during the execution of thebytecode, it is difficult to obtain the same performance as an equivalent program compiled intomachine language.
Interpretation and Interpreters
In interpreted languages such as JavaScript, Python, and PHP, the program does not need to beprecompiled, making it easier to develop and modify it. Instead of compiling it, the script is
executed by another program called an interpreter. Usually, the interpreter of a language isnamed after the language itself. The interpreter of a Python script, for example, is a program
called python. The JavaScript interpreter is most often the web browser, but scripts can also be
executed by the node program outside a browser. Because it is converted to binary instructions
every time it is executed, an interpreted language program tends to be slower than a compiled
language equivalent.
Nothing prevents the same application from having components written in different languages. If
necessary, these components can communicate through a mutually understandable application
programming interface (API).
The Python language, for example, has very sophisticated data mining and data tabulation
capabilities. The developer can choose Python to write the parts of the program that deal withthese aspects and another language, such as C++, to perform the heavier numeric processing. It is
possible to adopt this strategy even when there is no API that allows direct communication
between the two components. Code written in Python can generate a file in the proper format to
be used by a program written in C++, for example.
Although it is possible to write almost any program in any language, the developer should adopt
the one that is most in line with the application’s purpose. In doing so, you benefit from the reuseof already tested and well-documented components.

10|learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.1 Software Development Basic

Guided Exercises
1. What kind of program can be used to edit source code?

2. What kind of tool helps to integrate the work of different developers into the same code base?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

11Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Explorational Exercises
1. Suppose you want to write a 3D game to be played in the browser. Web apps and games areprogrammed in JavaScript. Although it is possible to write all the graphic functions fromscratch, it is more productive to use a ready-made library for this purpose. Which third-party
libraries provide capabilities for 3D animation in JavaScript?

2. Besides PHP, what other languages can be used on the server side of a web application?

12|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.1 Software Development BasicSummaryThis lesson covers the most essential concepts of software development. The developer must beaware of important programming languages and the proper usage scenario for each. This lesson
goes through the following concepts and procedures:• What source code is.
• Source code editors and related tools.
• Procedural, object-oriented, functional, and declarative programming paradigms.
• Characteristics of compiled and interpreted languages.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

13

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Answers to Guided Exercises
1. What kind of program can be used to edit source code?
In principle, any program capable of editing plain text.
2. What kind of tool helps to integrate the work of different developers into the same code base?
A source or version control system, such as Git.

14|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.1 Software Development Basic

Answers to Explorational Exercises
1. Suppose you want to write a 3D game to be played in the browser. Web apps and games areprogrammed in JavaScript. Although it is possible to write all the graphic functions fromscratch, it is more productive to use a ready-made library for this purpose. Which third-party
libraries provide capabilities for 3D animation in JavaScript?
There are many options for 3D graphics libraries for JavaScript, such as threejs and BabylonJS.
2. Besides PHP, what other languages can be used on the server side of a web application?
Any language supported by the HTTP server application used on the server host. Some
examples are Python, Ruby, Perl, and JavaScript itself.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

15

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

031.2 Web Application Architecture
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 031.2
Weight2
Key knowledge areas• Understand the principle of client and server computing• Understand the role of web browsers and be aware of commonly used web browsers• Understand the role of web servers and application servers• Understand common web development technologies and standards• Understand the principles of APIs
• Understand the principle of relational and non-relational (NoSQL) databases• Awareness of commonly used open source database management systems• Awareness of REST and GraphQL• Awareness of single-page applications• Awareness of web application packaging• Awareness of WebAssembly• Awareness of content management systems
Partial list of the used files, terms and utilities• Chrome, Edge, Firefox, Safari, Internet Explorer• HTML, CSS, JavaScript

16|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.2 Web Application Architecture• SQLite, MySQL, MariaDB, PostgreSQL• MongoDB, CouchDB, Redis

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

17

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

031.2 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

031 Software Development and Web
Technologies

Objective:

031.2 Web Application Architecture

Lesson:1 of 1Introduction
The word application has a broad meaning in technological jargon. When the application is a
traditional program, executed locally and self-sufficient in its purpose, both the application’s
operating interface and the data processing components are integrated in a single “package”. A
web application is different because it adopts the client/server model and its client portion is basedon HTML, which is obtained from the server and, in general, rendered by a browser.

Clients and Servers
In the client/server model, part of the work is done locally on the client side and part of the work isdone remotely, on the server side. Which tasks are performed by each party varies according to
the purpose of the application, but in general it’s up to the client to provide an interface to theuser and to layout the content in an attractive manner. It’s up to the server to run the business
18|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.2 Lesson 1

end of the application, processing and responding to requests made by the client. In a shopping
application, for example, the client application displays an interface for the user to choose andpay for the products, but the data source and the transaction records are kept on the remote
server, accessed via the network. Web applications perform this communication over theInternet, usually via the Hypertext Transfer Protocol (HTTP).
Once loaded by the browser, the client side of the application initiates interaction with the serverwhenever necessary or convenient. Web application servers offer an application programming
interface (API) that defines the available requests and how those requests should be made. Thus,
the client constructs a request in the format defined by the API and sends it to the server, whichchecks for any prerequisites for the request and sends back the appropriate response.
While the client, in the form of a mobile application or desktop browser, is a self-contained
program with regard to the user interface and instructions for communicating with the server,
the browser must obtain the HTML page and associated components—such as images, CSS, andJavaScript—that define the interface and instructions for communicating with the server.
The programming languages and platforms used by client and server are independent, but use amutually understandable communication protocol. The server portion is almost always
performed by a program without a graphical interface, running in highly available computing
environments so that it is always ready to respond to requests. In contrast, the client portion runs
on any device that is capable of rendering an HTML interface, such as smartphones.
In addition to being essential for certain purposes, the adoption of the client/server model allows
an application to optimize several aspects of development and maintenance, since each part canbe designed for its specific purpose. An application that displays maps and routes, for example,
does not need to have all maps stored locally. Only maps relating to the location of the users’s
interest are required, so only those maps are requested from the central server.
The developers have direct control over the server, so they can also modify the client that isprovided by it. This allows developers to improve the application, to a greater or lesser extent,
without the need the user to explicitly install new versions.

The Client Side
A web application should run the same way on any of the most popular browsers, as long as thebrowser is up to date. Some browsers may be incompatible with recent innovations, but only
experimental applications use features not yet widely adopted.
Incompatibility issues were more common in the past, when different browsers had their own
rendering engine and there was less cooperation in formulating and adopting standards. The

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

19

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

rendering engine is the main component of the browser, as it is responsible for transforming
HTML and other associated components into the visual and interactive elements of the interface.
Some browsers, notably Internet Explorer, needed special treatment in the code so as not to break
the pages expected functioning.
Today, there are minimal differences between the main browsers, and incompatibilities are rare.
In fact, the Chrome and Edge browsers use the same rendering engine (called Blink). The Safari
browser, and other browsers offered on the iOS App Store, use the WebKit engine. Firefox uses anengine called Gecko. These three engines account for virtually all browsers used today. Althoughdeveloped separately, the three engines are open source projects and there is cooperation
between their developers, which facilitates compatibility, upkeep, and the adoption of standards.
Because browser developers have taken so much effort to stay compatible, the server is notnormally linked to a single type of client. In principle, an HTTP server can communicate with any
client that is also capable of communicating via HTTP. In a map application, for example, theclient can be a mobile application or a browser that loads the HTML interface from the server.

Varieties of Web Clients
There are mobile and desktop applications whose interface is rendered from HTML and, likebrowsers, can use JavaScript as a programming language. However, unlike the client loaded in thebrowser, the HTML and the necessary components for the native client to function are locallypresent since the installation of the application. In fact, an application that works this way isvirtually identical to an HTML page (both are even likely to be rendered by the same engine).
There are also progressive web apps (PWA), a mechanism that allows you to package web
application clients for offline use—limited to functions that do not require immediate
communication with the server. Regarding what the application can do, there is no difference
between running the browser or packaged in a PWA, except that in the latter the developer has
more control over what is stored locally.
Rendering interfaces from HTML is such a recurring activity that the engine is usually a separate
software component, present in the operating system. Its presence as a separate component
allows different applications to incorporate it without having to embed it in the application
package. This model also delegates the maintenance of the rendering engine to the operating
system, facilitating updates. It is very important to keep such a crucial component up to date inorder to avoid possible failures.
Regardless of their delivery method, applications written in HTML run on an abstraction layer
created by the engine, which functions as an isolated execution environment. In particular, in thecase of a client that runs on the browser, the application has at its disposal only those resources
offered by the browser. Basic features, such as interacting with page elements and requesting files

20|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.2 Lesson 1

over HTTP, are always available. Resources that may contain sensitive information, such as accessto local files, geographic location, camera, and microphone, require explicit user authorization
before the application is able to use them.

Languages of a Web Client
The central element of a web application client that runs on the server is the HTML document. In
addition to presenting the interface elements that the browser displays in a structured way, theHTML document contains the addresses for all files required for the correct presentation andoperation of the client.
HTML alone does not have much versatility to build more elaborate interfaces and does not havegeneral-purpose programming features. For this reason, an HTML document that should function
as a client application is always accompanied by one or more sets of CSS and JavaScript.
The CSS can be provided as a separate file or directly in the HTML file itself. The main purpose of
CSS is to adjust the appearance and layout of the elements of the HTML interface. Although notstrictly necessary, more sophisticated interfaces usually require modifications to the CSS
properties of the elements to suit their needs.
JavaScript is a practically indispensable component. Procedures written in JavaScript respond toevents in the browser. These events can be caused by the user or non-interactive. Without
JavaScript, an HTML document is practically limited to text and images. Using JavaScript in HTML
documents allows you to extend interactivity beyond hyperlinks and forms, making the page
displayed by the browser like a conventional application interface.
JavaScript is a general-purpose programming language, but its main use is in web applications.
The features of the browser execution environment are accessible through JavaScript keywords,
used in a script to perform the desired operation. The term document, for example, is used in
JavaScript code to refer to the HTML document associated with the JavaScript code. In the context
of the JavaScript language, document is a global object with properties and methods that can beused to obtain information from any element on the HTML document. More importantly, you can
use the document object to modify its elements and to associate them with custom actions written
in JavaScript.
A client application based on web technologies is multiplatform, because it can run on any device
that has a compatible web browser.
Being confined to the browser, however, imposes limitations on web applications compared tonative applications. The intermediation performed by the browser allows higher level
programming and increases security, but also increases the processing and memory consumption.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

21

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Developers are continually working on browsers to provide more features and improve theperformance of JavaScript applications, but there are intrinsic aspects to the execution of scripts
such as JavaScript that impose a disadvantage on them compared to native programs for the same
hardware.
A feature that significantly improves the performance of JavaScript applications running on thebrowser is WebAssembly. WebAssembly is a kind of compiled JavaScript that produces sourcecode written in a more efficient, lower-level language, such as the C language. WebAssembly canaccelerate mainly processor-intensive activities, because it avoids much of the translation
performed by the browser when running a program written in conventional JavaScript.
Regardless of the implementation details of the application, all HTML code, CSS, JavaScript, andmultimedia files must first be obtained from the server. The browser obtains these files just likean Internet page, that is, with an address accessed by the browser.
A web page that acts as an interface to a web application is like a plain HTML document, but adds
additional behaviors. On conventional pages, the user is directed to another page after clicking on
a link. Web applications can present their interface and respond to user events without loading
new pages in the browser’s window. The modification of this standard behavior in HTML pages isdone via JavaScript programming.
A webmail client, for example, displays messages and switches between message folders withoutleaving the page. This is possible because the client uses JavaScript to react to user actions andmake appropriate requests to the server. If the user clicks on the subject of a message in the inbox,
a JavaScript code associated with this event requests the content of that message from the server(using the corresponding API call). As soon as the client receives the response, the browser
displays the message in the appropriate portion of the same page. Different webmail clients may
adopt different strategies, but they all use this same principle.
Therefore, in addition to providing the files that make up the client to the browser, the servermust also be able to handle requests such as that of the webmail client, when it asks for thecontent of a specific message. Every request that the client can make has a predefined procedure
to respond on the server, whose API can define different methods to identify which procedure therequest refers to. The most common methods are:• Addresses, through a Uniform Resource Locator (URL)• Fields in the HTTP header• GET/POST methods• WebSockets
One method may be more suitable than another, depending on the purpose of the request and22|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.2 Lesson 1other criteria taken into account by the developer. In general, web applications use a combinationof methods, each in a specific circumstance.
The Representational State Transfer (REST) paradigm is widely used for communication in web
applications, because it is based on the basic methods available in HTTP. The header of an HTTP
request starts with a keyword that defines the basic operation to be performed: GET,POST, PUT,DELETE, etc., accompanied by a corresponding URL where the action will be applied. If theapplication requires more specific operations, with a more detailed description of the requested
operation, the GraphQL protocol may be a more appropriate choice.
Applications developed using the client/server model are subject to instabilities incommunication. For this reason, the client application must always adopt efficient data transfer
strategies to favor its consistency and not harm the user experience.

The Server Side
Despite being the main actor in a web application, the server is the passive side of thecommunication, just responding to requests made by the client. In web jargon, server can refer tothe machine that receives the requests, the program that specifically handles HTTP requests, or
the recipient script that produces a response to the request. This latter definition is the most
relevant in the context of web application architecture, but they are all closely related. Although
they are only partially in the scope of the application server developer, the machine, operating
system, and HTTP server cannot be ignored, because they are fundamental to running theapplication server and often intersect.

Handling Paths from Requests
HTTP servers, such as Apache and NGINX, usually require specific configuration changes to meetthe needs of the application. By default, traditional HTTP servers directly associate the pathindicated in the request to a file on the local file system. If a website’s HTTP server keeps its HTMLfiles in the /srv/www directory, for example, a request with the path /en/about.html will
receive the content of the file /srv/www/en/about.html as a response, if the file exists. Moresophisticated websites, and especially web applications, demand customized treatments fordifferent types of requests. In this scenario, part of the application implementation is modifying
HTTP server settings to meet application requirements.
Alternatively, there are frameworks that allow you to integrate the management of HTTP requests
and the implementation of the application code in one place, allowing the developer to focus moreon the application’s purpose than on platform details. In Node.js Express, for example, all request
mapping and corresponding programming are implemented using JavaScript. As the

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

23

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

programming of clients is usually done in JavaScript, many developers consider it a good ideafrom the perspective of code maintenance to use the same language for client and server. Other
languages commonly used to implement the server side, either in frameworks or in traditional
HTTP servers, are PHP, Python, Ruby, Java, and C#.

Database Management Systems
It is up to the discretion of the development team how the data received or requested by the clientis stored on the server, but there are general guidelines that apply to most cases. It is convenient
to keep static content—images, JavaScript and CSS code that do not change in the short term—asconventional files, either on the server’s own file system or distributed across a content delivery
network (CDN). Other kinds of content, such as email messages in a webmail application, productdetails in a shopping application, and transaction logs, are more conveniently stored in a databasemanagement system (DBMS).
The most traditional type of database management system is the relational database. In it, theapplication designer defines data tables and the input format accepted by each table. The set oftables in the database contains all the dynamic data consumed and produced by the application. A
shopping app, for example, may have a table that contains an entry with the details of eachproduct in the store and a table that records items purchased by a user. The table of purchased
items contains references to entries in the product table, creating relationships between thetables. This approach can optimize storage and access to the data, as well as allow queries incombined tables using the language adopted by the database management system. The mostpopular relational database language is the Structured Query Language (SQL, pronounced“sequel”), adopted by the open source databases SQLite, MySQL, MariaDB, and PostgreSQL.
An alternative to relational databases is a form of database that does not require a rigid structure
for the data. These databases are called non-relational databases or simply NoSQL. Although they
may incorporate some features similar to those found in relational databases, the focus is onallowing greater flexibility in storage and access to stored data, passing the task of processing thatdata to the application itself. MongoDB, CouchDB, and Redis are common non-relational databasemanagement systems.

Content MaintenanceRegardless of the database model adopted, applications have to add data and probably update it
over the life span of the applications. In some applications, such as webmail, users themselvesprovide data to the database when using the client to send and receive messages. In other cases,
such as in the shopping application, it’s important to allow the application’s maintainers to modify
the database without having to resort to programming. Many organizations therefore adopt some24|learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.2 Lesson 1

kind of content management system (CMS), which allows non-technical users to administer theapplication. Therefore, for most web applications, it’s necessary to implement at least two types ofclients: a non-privileged client, used by ordinary users, and privileged clients, used by special
users to maintain and update the information presented by the application.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

25

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Guided Exercises
1. What programming language is used together with HTML to create web applications clients?

2. How does the retrieval of a web application differ from that of a native application?

3. How does a web application differ from a native application in access to the local hardware?

4. Cite one characteristic of a web application client that makes it distinct from an ordinary web
page.

26

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.2 Lesson 1

Explorational Exercises
1. What feature do modern browsers offer to overcome the poor performance of CPU-intensive
web application clients?

2. If a web application uses the REST paradigm for client/server communication, which HTTP
method should be used when the client requests the server to erase a specific resource?

3. Cite five server scripting languages supported by the Apache HTTP server.

4. Why are non-relational databases considered easier to maintain and upgrade than relational
databases?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

27

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

SummaryThis lesson covers the concepts and standards in web development technology and architecture.
The principle is simple: the web browser runs the client application, which communicates withthe core application running in the server. Albeit simple in principle, web applications mustcombine many technologies to adopt the principle of client and server computing over the web.
The lesson goes through the following concepts:• The role of web browsers and web servers.
• Common web development technologies and standards.
• How web clients can communicate with the server.
• Types of web servers and server databases.

28|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.2 Lesson 1

Answers to Guided Exercises
1. What programming language is used together with HTML to create web applications clients?
JavaScript
2. How does the retrieval of a web application differ from that of a native application?
A web application is not installed. Instead, parts of it run on the server and the client interface
runs in an ordinary web browser.
3. How does a web application differ from a native application in access to the local hardware?
All access to the local resources, such as storage, cameras, or microphones, are mediated by thebrowser and require explicit user authorization to work.
4. Cite one characteristic of a web application client that makes it distinct from an ordinary web
page.
The interaction with traditional web pages is basically restricted to hyperlinks and sending
forms, while web application clients are closer to a conventional application interface.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

29

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Answers to Explorational Exercises
1. What feature do modern browsers offer to overcome the poor performance of CPU-intensive
web application clients?
The developers can use WebAssembly to implement the CPU-intensive parts of the client
application. WebAssembly code generally has better performance than traditional JavaScript,
because it requires less translation of instructions.
2. If a web application uses the REST paradigm for client/server communication, which HTTP
method should be used when the client requests the server to erase a specific resource?
REST relies on standard HTTP methods, so it should use the standard DELETE method in thiscase.
3. Cite five server scripting languages supported by the Apache HTTP server.
PHP, Go, Perl, Python, and Ruby.
4. Why are non-relational databases considered easier to maintain and upgrade than relational
databases?
Unlike relational databases, non-relational databases do not require data to fit rigid predefinedstructures, making it easier to implement changes in the data structures without affecting
existing data.

30|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

031.3 HTTP Basics
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 031.3
Weight3
Key knowledge areas• Understand HTTP GET and POST methods, status codes, headers and content types• Understand the difference between static and dynamic content• Understand HTTP URLs
• Understand how HTTP URLs are mapped to file system paths• Upload files to a web server’s document root
• Understand caching• Understand cookies• Awareness of sessions and session hijacking• Awareness of commonly used HTTP servers• Awareness of HTTPS and TLS• Awareness of web sockets• Awareness of virtual hosts• Awareness of common HTTP servers• Awareness of network bandwidth and latency requirements and limitations

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

31

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Partial list of the used files, terms and utilities• GET, POST
• 200, 301, 302, 401, 403, 404, 500• Apache HTTP Server (httpd), NGINX

32|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

031.3 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

031 Software Development and Web
Technologies

Objective:

031.3 HTTP Basics

Lesson:1 of 1Introduction
The HyperText Transfer Protocol (HTTP) defines how a client asks the server for a specificresource. Its working principle is quite simple: the client creates a request message identifying theresource it needs and forwards that message to the server via the network. In turn, the HTTP
server evaluates where to extract the requested resource and sends a response message back to
the client. The reply message contains details about the requested resource, followed by the
resource itself.
More specifically, HTTP is the set of rules that define how the client application should format
request messages that will be sent to the server. The server then follows HTTP rules to interpretthe request and format reply messages. In addition to requesting or transferring requested
content, HTTP messages contain extra information about the client and server involved, about thecontent itself, and even about its unavailability. If a resource cannot be sent, a code in the
response explains the reason for the unavailability and, if possible, indicates where the resource
was moved.
The part of the message that defines the resource details and other context information is called

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

33

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

the header of the message. The part following the header, which contains the content of thecorresponding resource, is called the payload of the message. Both request messages and response
messages can have a payload, but in most cases, only the response message has one.

The Client’s Request
The first stage of an HTTP data exchange between the client and the server is initiated by theclient, when it writes a request message to the server. Take, for example, a common browser task:
to
load
an
HTML
page
from
a
serverhostingawebsite,suchashttps://learning.lpi.org/en/. The address, or URL, provides several pieces of relevant
information. Three pieces of information appear in this particular example:• The protocol: HyperText Transfer Protocol Secure (https), an encrypted version of HTTP.
• The web host’s network name (learning.lpi.org)• The location of the requested resource on the server (the /en/ directory—in this case, theEnglish version of the home page).

NOTE

A Uniform Resource Locator (URL) is an address that points to a resource on theInternet. This resource is usually a file that can be copied from a remote server, but
URLs can also indicate dynamically generated content and data streams.

How the Client Handles the URL
Before contacting the server, the client needs to convert learning.lpi.org to its corresponding
IP address. The client uses another Internet service, the Domain Name System (DNS), to request theIP address of a host name from one or more predefined DNS servers (DNS servers are usuallyautomatically defined by the Internet Service Provider, ISP).
With the server’s IP address, the client tries to connect to the HTTP or HTTPS port. Network ports
are identification numbers defined by the Transmission Control Protocol (TCP) to intertwine andidentify distinct communication channels within a client/server connection. By default, HTTP
servers receive requests on TCP ports 80 (HTTP) and 443 (HTTPS).

NOTE

There are other protocols used by web applications to implement client/server
communication. For audio and video calls, for example, it is more appropriate touse WebSockets, a lower level protocol that is more efficient than HTTP fortransferring data streams in both directions.

The format of the request message that the client sends to the server is the same in HTTP andHTTPS. HTTPS is already more widely used than HTTP, because all data exchanges between client

34|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

and server are encrypted, which is an indispensable feature to promote privacy and security on
public networks. The encrypted connection is established between client and server even before
any HTTP message is exchanged, using the Transport Layer Security (TLS) cryptographic protocol.
By doing this, all HTTPS communication is encapsulated by TLS. Once decrypted, the request or
response transmitted over HTTPS is no different from a request or response made exclusively
over HTTP.
The third element of our URL, /en/, will be interpreted by the server as the location or path forthe resource being requested. If the path is not provided in the URL, the default location / will be
used. The simplest implementation of an HTTP server associates paths in URLs with files on thefile system where the server is running, but this is just one of the many options available on moresophisticated HTTP servers.

The Request Message
HTTP operates through a connection already established between client and server, usually
implemented in TCP and encrypted with TLS. In fact, once a connection meeting the requirements
imposed by the server is ready, an HTTP request typed by hand in plain text could generate theresponse from the server. In practice, however, programmers rarely need to implement routines
to compose HTTP messages, as most programming languages provide mechanisms that automate
themakingoftheHTTP
message.
In
the
case
of
the
exampleURL,
https://learning.lpi.org/en/, the simplest possible request message would have thefollowing content:
GET /en/ HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: text/html

The first word of the first line identifies the HTTP method. It defines which operation the client
wants to perform on the server. The GET method informs the server that the client requests theresource that follows it: /en/. Both client and server may support more than one version of the
HTTP protocol, so the version to be adopted in the data exchange is also provided in the first line:
HTTP/1.1.

NOTE

The most recent version of the HTTP protocol is HTTP/2. Among other differences,messages written in HTTP/2 are encoded in a binary structure, whereas messages
written in HTTP/1.1 are sent in plain text. This change optimizes data transmission
rates, but the content of the messages is basically the same.

The header can contain more lines after the first one to contextualize and help identify the
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

35

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

request to the server. The Host header field, for example, may appear redundant, because theserver’s host has obviously been identified by the client in order to establish the connection andit’s reasonable to assume that the server knows its own identity. Nonetheless, it’s important to
inform the host of the expected host name in the request header, because it is common practice to
use the same HTTP server to host more than one website. (In this scenario, each specific host iscalled virtual host.) Therefore, the Host field is used by the HTTP server to identify which one therequest refers to.
The User-Agent header field contains details about the client program making the request. This
field can be used by the server to adapt the response to the needs of a specific client, but it is more
often used to produce statistics about the clients using the server.
The Accept field is of more immediate value, because it informs the server about the format for
the requested resource. If the client is indifferent about the resource format, the Accept field canspecify */* as the format in.
There are many other header fields that can be used in an HTTP message, but the fields shown in
the example are enough to request a resource from the server.
In addition to the fields in the request header, the client can include other complementary data in
the HTTP request that will be sent to the server. If this data consists only of simple text
parameters, in the format name=value, they can be added to the path of the GET method. The
parameters are embedded in the path after a question mark and are separated by ampersand (&)
characters:
GET /cgi-bin/receive.cgi?name=LPI&email=info@lpi.org HTTP/1.1

In this example, /cgi-bin/receive.cgi is the path to the script on the server that will process
and possibly use the parameters name and email, obtained from the request path. The string that
corresponds to the fields, in the format name=LPI&email=info@lpi.org, is called query string
and is supplied to the receive.cgi script by the HTTP server that receives the request.
When the data is made up of more than short text fields, it’s more appropriate to send it in the
payload of the message. In this case, the HTTP POST method must be used so that the server
receives and processes the message’s payload, according to the specifications indicated in therequest header. When the POST method is used, the request header must provide the size of the
payload that will be sent next and how the body is formatted:
POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
Content-Length: 1503

36|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

Content-Type: multipart/form-data; boundary=------------------------405f7edfd646a37d

The Content-Length field indicates the size in bytes of the payload and the Content-Type fieldindicates its format. The multipart/form-data format is the one most commonly used in
traditional HTML forms that use the POST method. In this format, each field inserted in therequest’s payload is separated by the code indicated by the boundary keyword. The POST methodshould be used only when appropriate, as it uses a slightly larger amount of data than anequivalent request made with the GET method. Because the GET method sends the parameters
directly in the request’s message header, the total data exchange has a lower latency, because anadditional connection stage to transmit the message body will not be necessary.

The Response Header
After the HTTP server receives the request message header, the server returns a response message
back to the client. An HTML file request typically has a response header like this:HTTP/1.1 200 OK
Accept-Ranges: bytes
Content-Length: 18170
Content-Type: text/html
Date: Mon, 05 Apr 2021 13:44:25 GMT
Etag: "606adcd4-46fa"
Last-Modified: Mon, 05 Apr 2021 09:48:04 GMT
Server: nginx/1.17.10

The first line provides the version of the HTTP protocol used in the response message, which mustcorrespond to the version used in the request header. Then, still in the first line, the status code of
the response appears, indicating how the server interpreted and generated the response for therequest.
The status code is a three-digit number, where the left-most digit defines the response class. There
are five classes of status codes, numbered from 1 to 5, each indicating a type of action taken by theserver:1xx (Informational)
The request was received, continuing the process.
2xx (Successful)
The request was successfully received, understood, and accepted.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

37

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

3xx (Redirection)
Further action needs to be taken in order to complete the request.
4xx (Client Error)
The request contains bad syntax or cannot be fulfilled.
5xx (Server Error)
The server failed to fulfill an apparently valid request.
The second and third digits are used to indicate additional details. Code 200, for example,
indicates that the request could be answered without any problems. As shown in the example, abrief text description following the response code (OK) can also be provided. Some specific codes
are of particular interest to ensure that the HTTP client can access the resource in adverse
situations or to help to identify the reason for failure in the event of an unsuccessful request:
301 Moved Permanently
The target resource has been assigned a new permanent URL, provided by the Location
header field in the response.
302 Found
The target resource resides temporarily under a different URL.
401 Unauthorized
The request has not been applied because it lacks valid authentication credentials for the target
resource.
403 Forbidden
The Forbidden reponse indicates that, although the request is valid, the server is configured to
not provide it.
404 Not FoundThe origin server did not find a current representation for the target resource or is not willingto disclose that one exists.
500 Internal Server Error
The server encountered an unexpected condition that prevented it from fulfilling the request.
502 Bad Gateway
The server, while acting as a gateway or proxy, received an invalid response from an inboundserver it accessed while attempting to fulfill the request.

38|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

Although they indicate that it was not possible to fulfill the request, status codes 4xx and 5xx atleast indicate that the HTTP server is running and is capable of receiving requests. The 4xx codes
require an action to be taken on the client, because its URL or credentials are wrong. In contrast,
5xx codes indicate something wrong on the server side. Therefore, in the context of web
applications, these two classes of status codes indicate that the source of the error lies in theapplication itself, either client or server, not in the underlying infrastructure.

Static and Dynamic Content
HTTP servers use two basic mechanisms to fulfill the content requested by the client. The firstmechanism provides static content: that is, the path indicated in the request message corresponds
to a file on the server’s local file system. The second mechanism provides dynamic content: that is,
the HTTP server forwards the request to another program—probably a script‒to build the
response from different sources, such as databases and other files.
Although there are different HTTP servers, they all use the same HTTP communication protocol
and adopt more or less the same conventions. An application that does not have a specific needcan be implemented with any traditional server, such as Apache or NGINX. Both are capable ofgenerating dynamic content and providing static content, but there are subtle differences in theconfiguration of each.
The location of static files to be served up, for example, is defined in different ways in Apache and
NGINX. The convention is to keep these files in a specific directory for this purpose, having a
name associated with the host, for example /var/www/learning.lpi.org/. In Apache, this pathis defined by the configuration directive DocumentRoot /var/www/learning.lpi.org, in asection that defines a virtual host. In NGINX, the directive used is root
/var/www/learning.lpi.org in a server section of the configuration file.
Whichever server you choose, the files at /var/www/learning.lpi.org/ will be served via
HTTP in almost the same way. Some fields in the response header and their contents may vary
between the two servers, but fields like Content-Type must be present in the response header
and must be consistent across any server.

Caching
HTTP was designed to work on any type of Internet connection, fast or slow. Furthermore, most
HTTP exchanges have to traverse many network nodes due to the distributed architecture of theInternet. As a result, it is important to adopt some content caching strategy to avoid the redundanttransfer of previously downloaded content. HTTP transfers can work with two basic types ofcache: shared and private.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

39

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

A shared cache is used by more than a single client. For example, a large content provider mightuse caches on geographically distributed servers, so that clients get the data from their nearest
server. Once a client has made a request and its response was stored in a shared cache, otherclients making that same request in that same area will received the cached response.
A private cache is created by the client itself for its exclusive use. It is the type of caching the webbrowser does for images, CSS files, JavaScript, or the HTML document itself, so they don’t need to
be downloaded again if requested in the near future.

NOTE

Not all HTTP requests must be cached. A request using the POST method, forexample, implies a response associated exclusively with that particular request, so
its response content should not be reused. By default, only responses to requests
made using the GET method are cached. Furthermore, only responses withconclusive status codes such as 200 (OK), 206 (Partial Content), 301 (Moved
Permanently), and 404 (Not Found) are suitable for caching.

Both the shared and private cache strategy use HTTP headers to control how the downloaded
content should be cached. For the private cache, the client consults the response header andverifies whether the content in the local cache still corresponds to the current remote content. If it
does, the client waives the transfer of the response payload and uses the local version.
The validity of the cached resource can be assessed in several ways. The server can provide an
expiration date in the response header for the first request, so that the client discards the cachedresource at the end of the term and requests it again to obtain the updated version. However, theserver is not always able to determine the expiration date of a resource, so it is common to use theETag response header field to identify the version of the resource, for example Etag:"606adcd4-46fa".
To verify that a cached resource needs updating, the client requests only its response header fromthe server. If the ETag field matches the one in the locally stored version, the client reuses thecached content. Otherwise, the updated content of the resource is downloaded from the server.

HTTP Sessions
In a conventional website or web application, the features that handle session control are basedon HTTP headers. The server cannot assume, for example, that all requests coming from the same
IP address are from the same client. The most traditional method that allows the server toassociate different requests to a single client is the use of cookies, an identification tag that is given
to the client by the server and that is provided in the HTTP header.
Cookies allow the server to preserve information about a specific client, even if the person

40|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

running the client does not identify himself or herself explicitly. With cookies, it is possible toimplement sessions where logins, shopping carts, preferences, etc., are preserved in between
different requests made to the same server that provided them. Cookies are also used to track userbrowsing, so it is important to ask for consent before sending them.
The server sets the cookie in the response header using the Set-Cookie field. The field value is aname=value pair chosen to represent some attribute associated with a specific client. The servercan, for example, create an identification number for a client that requests a resource for the firsttime and pass it on to the client in the response header:
HTTP/1.1 200 OK
Accept-Ranges: bytes
Set-Cookie: client_id=62b5b719-fcbf

If the client allows the use of cookies, new requests to this same server have the cookie field in theheader:
GET /en/ HTTP/1.1
Host: learning.lpi.org
Cookie: client_id=62b5b719-fcbf

With this identification number, the server can retrieve specific definitions for the client andgenerate a customized response. It is also possible to use more than one Set-Cookie field todeliver different cookies to the same customer. In this way, more than one definition can bepreserved on the client side.
Cookies raise both privacy issues and potential security holes, because there is a possibility thatthey can be transferred to another client, who will be identified by the server as the original
client. Cookies used to preserve sessions can give access to sensitive information from the original
client. Therefore, it’s very important for clients to adopt local protection mechanisms to prevent
their cookies from being extracted and reused without authorization.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

41

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Guided Exercises
1. What HTTP method does the following request message use?
POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencoded

2. When an HTTP server hosts many websites, how is it able to identify which one a request isfor?

3. Whatparameterisprovidedbyhttps://www.google.com/search?q=LPI?

the

query

string

of

the

URL

4. Why is the following HTTP request not suitable for caching?
POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencoded

42|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

Explorational Exercises
1. How could you use the web browser to monitor the requests and responses made by an HTMLpage?

2. HTTP servers that provide static content usually map the requested path to a file in the server’s
filesystem. What happens when the path in the request points to a directory?

3. The contents of files sent over HTTPS are protected by encryption, so they cannot be read bycomputers between the client and the server. Despite this, can these computers in the middle
identify which resource the client has requested from the server?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

43

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

SummaryThis lesson covers the basics of HTTP, the main protocol used by client applications to request
resources from web servers. The lesson goes through the following concepts:• Request messages, header fields, and methods.
• Response status codes.
• How HTTP servers generate responses.
• HTTP features useful for caching and session management.

44|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 031.3 HTTP Basics

Answers to Guided Exercises
1. What HTTP method does the following request message use?
POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencoded

The POST method.
2. When an HTTP server hosts many websites, how is it able to identify which one a request isfor?
The Host field in the request header provides the targeted website.
3. What parameter is provided by the query string of the URL https://www.google.com/
search?q=LPI?
The parameter named q with a value of LPI.
4. Why is the following HTTP request not suitable for caching?
POST /cgi-bin/receive.cgi HTTP/1.1
Host: learning.lpi.org
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:87.0) Gecko/20100101 Firefox/87.0
Accept: */*Content-Length: 27
Content-Type: application/x-www-form-urlencoded

Because requests made with the POST method imply a write operation on the server, theyshould not be cached.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

45

Web Development Essentials (030) (Version 1.0) | Topic 031: Software Development and Web Technologies

Answers to Explorational Exercises
1. How could you use the web browser to monitor the requests and responses made by an HTMLpage?
All popular browsers offer development tools that, among other things, can show all networktransactions that have been carried out by the current page.
2. HTTP servers that provide static content usually map the requested path to a file in the server’s
filesystem. What happens when the path in the request points to a directory?
It depends on how the server is configured. By default, most HTTP servers look for a file named
index.html (or another predefined name) in that same directory and send it as the response.
If the file isn’t there, the server issues a 404 Not Found response.
3. The contents of files sent over HTTPS are protected by encryption, so they cannot be read bycomputers between the client and the server. Despite this, can these computers in the middle
identify which resource the client has requested from the server?
No, because the request and response HTTP headers themselves are also encrypted by TLS.

46|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) |Topic 032: HTML Document Markup

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

47

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

032.1 HTML Document Anatomy
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 032.1
Weight2
Key knowledge areas• Create a simple HTML document• Understand the role of HTML
• Understand the HTML skeleton• Understand the HTML syntax (tags, attributes, comments)• Understand the HTML head
• Understand meta tags
• Understand character encoding
Partial list of the used files, terms and utilities• <!DOCTYPE html>• <html>• <head>• <body>• <meta>, including the charset (UTF-8), name and content attributes

48|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.1 HTML Document Anatomy

032.1 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

032 HTML Document Markup

Objective:

032.1 HTML Document Anatomy

Lesson:1 of 1Introduction
HTML (HyperText Markup Language) is a markup language that tells web browsers how to
structure and display web pages. The current version is 5.0, which was released in 2012. The
HTML syntax is defined by the World Wide Web Consortium (W3C).
HTML is a fundamental skill in web development, as it defines the structure and a good deal of theappearance of a website. If you want a career in web development, HTML is definitely a goodstarting point.

Anatomy of an HTML Document
A basic HTML page has the following structure:<!DOCTYPE html><html><head><title>My HTML Page</title><!-- This is the Document Header -->Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

49

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup</head><body><!-- This is the Document Body --></body></html>Now, let’s analyze it in detail.

HTML Tags
HTML uses elements and tags to describe and format content. Tags consist of angle brackets
around a tag name, for example <title>. The tag name is not case-sensitive, although the World
Wide Web Consortium (W3C) recommends using lowercase letters in current versions of HTML.
These HTML tags are used to build HTML elements. The tag <title> is an example for an opening
tag of an HTML element that defines the title of an HTML document. However, an element has
two further components. A full <title> element looking like this:<title>My HTML Page</title>

Here, My HTML Page serves as the element content, while </title> serves as the closing tag thatdeclares that this element is complete.
NOTE

Not all HTML elements need to be closed; in such cases, we speak of empty
elements, self-closing elements, or void elements.

Here are the other HTML elements from the previous example:<html>
Encloses the entire HTML document. This contains all the tags that make up the page. It also
indicates that the content of this file is in HTML language. Its corresponding closing tag is</html>.
<head>A container for all meta information regarding the page. The corresponding closing tag of thiselement is </head>.
<body>A container for the page content and its structural representation. Its corresponding closing tag
is </body>.

50|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.1 HTML Document Anatomy

The <html>, <head>, <body> and <title> tags are so-called skeleton tags, which provide thebasic structure of an HTML document. In particular, they tell the web browser that it is reading an
HTML page.
NOTE

Of these HTML elements, the only one that is required for an HTML document to bevalidated is the <title> tag.

As you can see, each HTML page is a well-structured document and could even be referred to as atree, where the <html> element represents the document root and the <head> and <body>elements are the first branches. The example shows that it is possible to nest elements: For
example, the <title> element is nested inside the <head> element, which is in turn nested inside
the <html> element.
To ensure that your HTML code is readable and maintainable, make sure that all HTML elements
are closed properly and in order. Web browsers may still render your web site as expected, but
incorrect nesting of elements and their tags is an error-prone practice.
Finally, a special mention goes to the doctype declaration at the very top of the example document
structure. <!DOCTYPE> is not an HTML tag, but an instruction for the web browser that specifies
the HTML version used in the document. In the basic HTML document structure shown earlier,<!DOCTYPE html> was used, specifying that HTML5 is used in this document.

HTML Comments
When creating an HTML page, it is good practice to insert comments into the code to improve its
readability and describe the purpose of larger code blocks. A comment is inserted between the<!-- and --> tags, as shown in the following example:<!-- This is a comment. --><!-This is amultiline
comment.
-->

The example demonstrates that HTML comments can be placed in a single line, but may also spanover multiple lines. In any case, the result is that the text between <!-- and --> is ignored by the
web browser and therefore not displayed in the HTML page. Based on these considerations, you
can deduce that the basic HTML page shown in the previous section does not display any text,
because the lines <!-- This is the Document Header --> and <!-- This is the

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

51

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Document Body --> are just two comments.
WARNING

Comments cannot be nested.

HTML Attributes
HTML tags may include one or more attributes to specify details of the HTML element. A simple
tag with two attributes has the following form:<tag attribute-a="value-a" attribute-b="value-b">

Attributes must always be set on the opening tag.
An attribute consists of a name, which indicates the property that should be set, an equal sign, andthe desired value within quotes. Both single quotes and double quotes are acceptable, but it isrecommended to use of single quotes or double quotes consistently throughout a project. It is
important not to mix single and double quotes for a single attribute value, as the web browser will
not recognize mixed quotes as one unit.

NOTE

You can include one type of quotation marks within the other type without any
problems. For example, if you need to use ' in an attribute value, you can wrapthat value within ". However, if you want to use the same type of quotation markinside the value as you are using to wrap the value, you need to use &quot; for "and &apos; for '.

The attributes can be categorized into core attributes and specific attributes as explained in thefollowing sections.
Core Attributes
Core attributes are attributes that can be used on any HTML element. They include:
title
Describes the content of the element. Its value is often displayed as a tooltip that is shown when
the user moves their cursor over the element.
id
Associates a unique identifier with an element. This identifier must be unique within the
document, and the document will not validate when multiple elements share the same id.

52|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.1 HTML Document Anatomy

style
Assigns graphic properties (CSS styles) to the element.
class
Specifies one or multiple classes for the element in a space-separated list of class names. These
classes can be referenced in CSS stylesheets.
langSpecifies the language of the element content using ISO-639 standard two-character language
codes.

NOTE

The developer can store custom information about an element by defining a socalled data- attribute, which is indicated by prefixing the desired name with
data- as in data-additionalinfo. You can assign this attribute a value just likeany other attribute.

Specific Attributes
Other attributes are specific to each HTML element. For example, the src attribute of an HTML<img> element specifies the URL of an image. There are many more specific attributes, which will
be covered in the following lessons.

Document Header
The document header defines meta information regarding the page and is described by the<head> element. By default, the information within the document header is not rendered by the
web browser. While it is possible to use the <head> element to contain HTML elements that could
be displayed on the page, doing so is not recommended.

Title
The document title is specified using the <title> element. The title defined between the tags
appears in the web bowser title bar and is the suggested name for the bookmark when you try tobookmark the page. It is also displayed in search engine results as the title of the page.
An example of this element is the following:<title>My test page</title>

The <title> tag is required in all HTML documents and should appear only once in each

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

53

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

document.
NOTE

Do not confuse the title of the document with the heading of the page, which is set
in the body.

Metadata
The <meta> element is used to specify meta information to further describe the content of an
HTML document. It is a so-called self-closing element, which means that it does not have a closing
tag. Aside from the core attributes that are valid for every HTML element, the <meta> element
also uses the following attributes:
nameDefines what metadata will be described in this element. It can be set to any custom definedvalue, but commonly used values are author, description, and keywords.
http-equiv
Provides an HTTP header for the value of the content attribute. A common value is refresh,
which will be explained later. If this attribute is set, the name attribute should not be set.
content
Provides the value associated with the name or http-equiv attribute.
charsetSpecifies the character encoding for the HTML document, for example utf-8 to set it toUnicode Transformation Format — 8-bit.
Add an Author, Description, and Keywords
Using the <meta> tag, you can specify additional information about the author of the HTML pageand describe the page content like this:<meta name="author" content="Name Surname"><meta name="description" content="A short summary of the page content.">

Try to include a series of keywords related to the content of the page in the description. This
description is often the first thing a user sees when navigating with a search engine.
If you also want to provide additional keywords related to the web page to search engines, you
can add this element:

54|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.1 HTML Document Anatomy<meta name="keywords" content="keyword1, keyword2, keyword3, keyword4, keyword5">

NOTE

In the past, spammers entered hundreds of keywords and descriptions unrelated tothe actual content of the page so that it also appeared in searches unrelated to theterms people searched for. Nowadays, <meta> tags are relegated to a position of
secondary importance and are used only to consolidate the topics covered in the
web page, so that it is no longer possible to mislead the new and moresophisticated search engine algorithms.

Redirect an HTML Page and Define a Time Interval for the Document to Refresh Itself
Using the <meta> tag, you can automatically refresh an HTML page after a certain period (forexample after 30 seconds) in this way:<meta http-equiv="refresh" content="30">

Alternatively, you can redirect a web page to another web page after the same amount of timewith the following code:<meta http-equiv="refresh" content="30; url=http://www.lpi.org">

In this example, the user is redirected from the current page to http://www.lpi.org after 30
seconds. The values can be anything you like. For example, if you specify content="0;
url=http://www.lpi.org", the page is redirected immediately.
Specify the Character Encoding
The charset attribute specifies the character encoding for the HTML document. A common
example is:<meta charset="utf-8">

This element specifies that the document’s character encoding is utf-8, which is a universal
character set that includes practically any character of any human language. Therefore, by using
it, you will avoid problems in displaying some characters that you may have using other character
sets such as ISO-8859-1 (the Latin alphabet).

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

55

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Other Useful Examples
Two other useful applications of the <meta> tag are:• Set cookies to keep track of a site visitor.
• Take control over the viewport (the visible area of a web page inside a web browser window),
which depends on the screen size of the user device (for example, a mobile phone or acomputer).
However, these two examples are beyond the scope of the exam and their study is left to the
curious reader to explore elsewhere.

56|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.1 HTML Document Anatomy

Guided Exercises
1. For each of the following tags, indicate the corresponding closing tag:<body><head><html><meta><title>2. What is the difference between a tag and an element? Use this entry as a reference:<title>HTML Page Title</title>

3. What are the tags between which a comment should be placed?

4. Explain what an attribute is and provide some examples for the <meta> tag.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

57

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Explorational Exercises
1. Create a simple HTML version 5 document with the title My first HTML document and only
one paragraph in the body, containing the text Hello World. Use the paragraph tag <p> in thebody.

2. Add the author (Kevin Author) and description (This is my first HTML page.) of theHTML document.

3. Add the following keywords related to the HTML document: HTML, Example, Test, andMetadata.

4. Add the <meta charset="ISO-8859-1"> element to the document header and change theHello World text to Japanese (こんにちは世界). What happens? How can you solve the problem?

5. After changing the paragraph text back to Hello World, redirect the HTML page tohttps://www.google.com after 30 seconds and add a comment explaining this in the
document header.

58|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.1 HTML Document Anatomy

Summary
In this lesson you learned:• The role of HTML• The HTML skeleton• The HTML syntax (tags, attributes, comments)• The HTML head
• The meta tags
• How to create a simple HTML document
The following terms were discussed in this lesson:<!DOCTYPE html>
The declaration tag.
<html>
The container for all the tags that make up the HTML page.
<head>
The container for all head elements.
<body>
The container for all body elements.
<meta>The tag for metadata, used to specify additional information for the HTML page (such as
author, description, and character encoding).

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

59

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Answers to Guided Exercises
1. For each of the following tags, indicate the corresponding closing tag:<body></body><head></head><html></html><meta>

None<title></title>2. What is the difference between a tag and an element? Use this entry as a reference:<title>HTML Page Title</title>
An HTML element consists of a start tag, a closing tag, and everything between them. An HTMLtag is used to mark the beginning or end of an element. Therefore, <title>HTML Page
Title</title> is an HTML element, while <title> and </title> are the start and closing
tag respectively.
3. What are the tags between which a comment should be placed?
A comment is inserted between the <!-- and --> tags and can be put on a single line or can
span multiple lines.
4. Explain what an attribute is and provide some examples for the <meta> tag.
An attribute is used to more precisely specify an HTML element. For example, the <meta> tag
uses the name and content attribute pair to add the author and description of an HTML page.
Instead, using the charset attribute you can specify the character encoding for the HTML
document.

60|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.1 HTML Document Anatomy

Answers to Explorational Exercises
1. Create a simple HTML version 5 document with the title My first HTML document and only
one paragraph in the body containing the text Hello World. Use the paragraph tag <p> in the
body.
<!DOCTYPE html><html><head><title>My first HTML document</title></head><body><p>Hello World</p></body></html>2. Add the author (Kevin Author) and description (This is my first HTML page.) of theHTML document.
<!DOCTYPE html><html><head><title>My first HTML document</title><meta name="author" content="Kevin Author"><meta name="description" content="This is my first HTML page."></head><body><p>Hello World</p></body></html>3. Add the following keywords related to the HTML document: HTML, Example, Test andMetadata.
<!DOCTYPE html><html><head><title>My first HTML document</title><meta name="author" content="Kevin Author">

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

61

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<meta name="description" content="This is my first HTML page."><meta name="keywords" content="HTML, Example, Test, Metadata"></head><body><p>Hello World</p></body></html>4. Add the <meta charset="ISO-8859-1"> element to the document header and change theHello World text to Japanese (こんにちは世界). What happens? How can you solve this situation?
If the example is carried out as described, the Japanese text is not displayed correctly. This isbecause ISO-8859-1 represents character encoding for the Latin alphabet. To view the text, youneed to change the character encoding, using for example UTF-8 (<meta charset="utf-8">).
5. After changing the paragraph text back to Hello World, redirect the HTML page tohttps://www.google.com after 30 seconds and add a comment explaining this in the
document header.
<!DOCTYPE html><html><head><title>My first HTML document</title><meta name="author" content="Kevin Author"><meta name="description" content="This is my first HTML page."><meta name="keywords" content="HTML, Example, Test, Metadata"><meta charset="utf-8"><!-- The page is redirected to Google after 30 seconds --><meta http-equiv="refresh" content="30; url=https://www.google.com"></head><body><p>Hello World</p></body></html>62|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

032.2 HTML Semantics and Document Hierarchy
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 032.2
Weight2
Key knowledge areas• Create markup for contents in an HTML document• Understand the hierarchical HTML text structure• Differentiate between block and inline HTML elements• Understand important semantic structural HTML elements
Partial list of the used files, terms and utilities• <h1>, <h2>, <h3>, <h4>, <h5>, <h6>
• <p>
• <ul>, <ol>, <li>
• <dl>, <dt>, <dd>
• <pre>• <blockquote>• <strong>, <em>, <code>• <b>, <i>, <u>• <span>• <div>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

63

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup• <main>, <header>, <nav>, <section>, <footer>64|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

032.2 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

032 HTML Document Markup

Objective:

032.2 HTML Semantics and Document
Hierarchy

Lesson:1 of 1Introduction
In the previous lesson, we learned that HTML is a markup language that can semanticallydescribe the content of a website. An HTML document contains a so-called skeleton that consistsof the HTML elements <html>, <head>, and <body>. While the <head> element describes a blockof meta information for the HTML document that will be invisible to the visitor to the website, the<body> element may contain many other elements to define the structure and content of theHTML document.
In this lesson, we will walk through text formatting, fundamental semantic HTML elements andtheir purpose, and how to structure an HTML document. We’ll use a shopping list as our example.

NOTE

All subsequent code examples lie within the <body> element of an HTML
document containing the complete skeleton. For readability, we will not show theHTML skeleton in every example in this lesson.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

65

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Text
In HTML, no block of text should be bare, standing outside an element. Even a short paragraphshould be wrapped in the <p> HTML tags, which is short name for paragraph.
<p>Short text element spanning only one line.</p><p>A text element containing much longer text that may span across multiple lines, dependingon the size of the web browser window.</p>Opened in a web browser, this HTML code produces the result shown in Figure 1.

Figure 1. Web browser representation of HTML code showing two paragraphs of text. The first paragraphis very short. The second paragraph is a bit longer and wraps into a second line.

By default, web browsers add spacing before and after <p> elements for improved readability. For
this reason, <p> is called a block element.

Headings
HTML defines six levels of headings to describe and structure the content of an HTML document.
These headings are marked by the HTML tags <h1>, <h2>, <h3>, <h4>, <h5> and <h6>.
<h1>Heading level 1 to uniquely identify the page</h1><h2>Heading level 2</h2><h3>Heading level 3</h3><h4>Heading level 4</h4><h5>Heading level 5</h5><h6>Heading level 6</h6>

A web browser renders this HTML code as shown in Figure 2.

66|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Figure 2. Web browser representation of HTML code showing different levels of headings in an HTML
document. The hierarchy of headings is indicated through the size of the text.

If you are familiar with word processors such as LibreOffice or Microsoft Word, you may noticesome similarities in how an HTML document uses different levels of headings and how they are
rendered in the web browser. By default, HTML uses size to indicate the hierarchy andimportance of headings and adds space before and after every heading to visually separate it fromcontent.
A heading using the element <h1> is at the top of the hierarchy and thus is considered the mostimportant heading that identifies the content of the page. It’s comparable to the <title> element
discussed in the previous lesson, but within the content of the HTML document. Subsequentheading elements can be used to further structure the content. Make sure not to skip headinglevels in between. The document hierarchy should begin with <h1>, continue with <h2>, then<h3> and so on. You don’t need to use every heading element down to <h6> if your content does
not demand it.

NOTE

Headings are important tools to structure an HTML document, both semanticallyand visually. However, headings should never be used to increase the size ofotherwise structurally unimportant text. By the same principle, one should not
make a short paragraph bold or italic to make it look like a heading; use headingtags to mark headings.

Let’s begin creating the shopping list HTML document by defining its outline. We will create an<h1> element to contain the page title, in this case Garden Party, followed by short information
wrapped in a <p> element. Additionally, we use two <h2> elements to introduce the two content

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

67Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

sections Agenda and Please bring.
<h1>Garden Party</h1><p>Invitation to John's garden party on Saturday next week.</p><h2>Agenda</h2><h2>Please bring</h2>Opened in a web browser, this HTML code produces the result shown in Figure 3.

Figure 3. Web browser representation of HTML code showing a simple example document describing an
invitation to a garden party, with two headings for agenda and list of things to bring.

Line Breaks
Sometimes it may be necessary to cause a line break without inserting another <p> element or any
similar block element. In such cases, you can use the self-closing <br> element. Note that it should
be used only to insert line breaks that belong to the content, as is the case for poems, song lyrics,
or addresses. If the content is separated by meaning, it is better to use a <p> element instead.
For example, we could split up the text in the information paragraph from our previous example
as follows:<p>
Invitation to John's garden party.<br>
Saturday, next week.
</p>

In a web browser, this HTML code produces the result shown in Figure 4.

68|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Figure 4. Web browser representation of HTML code showing a simple example document with a forced
line break.

Horizontal Lines
The <hr> element defines a horizontal line, also called a horizontal rule. By default, it spans thewhole width of its parent element. The <hr> element can help you define a thematic change in thecontent or separate the sections of the document. The element is self-closing and therefore has no
closing tag.
For our example, we could separate the two headings:<h1>Garden Party</h1><p>Invitation to John's garden party on Saturday next week.</p><h2>Agenda</h2><hr><h2>Please bring</h2>

Figure 5 shows the result of this code.

Figure 5. Web browser representation a simple example document describing a shopping list with two
sections separated by a horizontal line.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

69Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

HTML Lists
In HTML, you can define three types of lists:
Ordered lists
where the order of the list elements matters
Unordered lists
where the order of the list elements is not particularly important
Description lists
to more closely describe some terms
Each contains any number of list items. We’ll describe each type of list.

Ordered Lists
An ordered list in HTML, denoted using the HTML element <ol>, is a collection of any number oflist items. What makes this element special is that the order of its list elements is relevant. To
emphasize this, web browsers display numerals before the child list items by default.
NOTE<li> elements are the only valid child elements within an <ol> element.

For our example, we can fill in the agenda for the garden party using an <ol> element with thefollowing code:<h2>Agenda</h2><ol><li>Welcome</li><li>Barbecue</li><li>Dessert</li><li>Fireworks</li></ol>

In a web browser, this HTML code produces the result shown in Figure 6.

70|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Figure 6. Web browser representation of a simple example document containing a second-level heading
followed by an ordered list with four items describing the agenda for a garden party.

Options
As you can see in this example, the list items are numbered with decimal numerals beginning at 1
by default. However, you can change this behavior by specifying the type attribute of the <ol>tag. Valid values for this attribute are 1 for decimal numerals, A for uppercase letters, a forlowercase letters, I for Roman uppercase numerals, and i for Roman lowercase numerals.
If you want, you can also define the starting value by using the start attribute of the <ol> tag.
The start attribute always takes a decimal numerical value, even if the type attribute sets a
different type of numbering.
For example, we could adjust the ordered list from the previous example so that the list items will
be prefixed with capital letters, beginning with the letter C, as shown in the following example:<h2>Agenda</h2><ol type="A" start="3"><li>Welcome</li><li>Barbecue</li><li>Dessert</li><li>Fireworks</li></ol>Within a web browser, this HTML code is rendered like Figure 7.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

71Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Figure 7. Web browser representation a simple example document containing a second-level heading
followed by an ordered list with list items that are prefixed by capital letters beginning with the letter C.

The order of the list items can also be reversed using the reversed attribute without a value.

NOTE

In an ordered list, you can also set the initial value of a specific list item using thevalue attribute of the <li> tag. List items that follow will increment from that
number. The value attribute always takes a decimal numerical value.

Unordered Lists
An unordered list contains a series of list items that, unlike those in an ordered list, do not have a
special order or sequence. The HTML element for this list is <ul>. Once again, <li> is the HTMLelement to mark its list items.
NOTE<li> elements are the only valid child elements within a <ul> element.

For our example web site, we can use the unordered list to list items for guests to bring to theparty. We can achieve this with the following HTML code:<h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul>Within a web browser, this HTML code produces the display shown in Figure 8.

72|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Figure 8. Web browser representation of a simple document containing a second-level heading followed byan unordered list with list items regarding foodstuffs that guests are asked to bring to the garden party.

By default, each list item is represented using a disc bullet. You may change its appearance using
CSS, which will be discussed in later lessons.
Nesting Lists
Lists can be nested within other lists, such as ordered lists within unordered lists and vice versa.
To achieve this, the nested list must be part of a list element <li>, because <li> is the only valid
child element of unordered and ordered lists. When nesting, be careful not to overlap the HTMLtags.
For our example, we could add some information of the agenda we created before, as shown in
the following example:<h2>Agenda</h2><ol type="A" start="3"><li>Welcome</li><li>
Barbecue<ul><li>Vegetables</li><li>Meat</li><li>Burgers, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li>Fireworks</li></ol>

A web browser renders the code as shown in Figure 9.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

73Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Figure 9. Web browser representation of HTML code showing an unordered lists nested within an ordered
list, to represent the agenda for a garden party.

You could go even further and nest multiple levels deep. Theoretically, there is no limit to how
many lists you can nest. When doing this however, consider readability for your vistors.

Description Lists
A description list is defined using the <dl> element and represents a dictionary of keys and values.
The key is a term or name that you want to describe, and the value is the description. Description
lists can range from simple key-value pairs to extensive definitions.
A key (or term) is defined using the <dt> element, while its description is defined using the <dd>element.
An example for such a description list could be a list of exotic fruits that explains what they looklike.
<h3>Exotic Fruits</h3><dl><dt>Banana</dt><dd>
A long, curved fruit that is yellow-skinned when ripe. The fruit's skin
may also have a soft green color when underripe and get brown spots whenoverripe.
</dd><dt>Kiwi</dt><dd>
A small, oval fruit with green flesh, black seeds, and a brown, hairy
skin.

74

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy</dd><dt>Mango</dt><dd>
A fruit larger than a fist, with a green skin, orange flesh, and one big
seed. The skin may have spots ranging from green to yellow or red.
</dd>
</dl>

In a web browser, this produces the result shown in Figure 10.

Figure 10. An example of an HTML description list using exotic fruits. The list describes the appearance of
three different exotic fruits.

NOTE

As opposed to ordered lists and unordered lists, in a description list, any HTMLelement is valid as a direct child. This allows you to group elements and style themelsewhere using CSS.

Inline Text Formatting
In HTML, you can use formatting elements to change the appearance of the text. These elements
can be categorized as presentation elements or phrase elements.

Presentation Elements
Basic presentation elements change the font or look of text; these are <b>, <i>, <u> and <tt>.
These elements were originally defined before CSS let make text bold, italic, etc. There are now
usually better ways to alter the look of text, but you still see these elements sometimes.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

75

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Bold Text
To make text bold, you can wrap it within the <b> element as illustrated in the following example.
The result appears in Figure 11.
This <b>word</b> is bold.

Figure 11. The <b> tag is used to make text bold.

According to the HTML5 specification, the <b> element should be used only when there are no
more appropriate tags. The element that produces the same visual output, but additionally adds
semantic importance to the marked text, is <strong>.
Italic Text
To italicize text, you can wrap it within the <i> element as illustrated in the following example.
The result appears in Figure 12.
This <i>word</i> is in italics.

Figure 12. The <i> tag is used to italicize text.

According to the HTML 5 specification, the <i> element should be used only when there are no
more appropriate tags.
Underlined Text
To underline text, you can wrap it within the <u> element as illustrated in the following example.
The result appears in Figure 13.
This <u>word</u> is underlined.

Figure 13. The <u> tag is used to underline text.

According to the HTML 5 specification, the <u> element should be used only when there are no76|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

better ways to underline text. CSS provides a modern alternative.
Fixed-Width or Monospaced Font
To display text in a monospaced (fixed-width) font, often used to display computer code, you can
use the <tt> element as illustrated in the following example. The result appears in Figure 14.
This <tt>word</tt> is in fixed-width font.

Figure 14. The <tt> tag is used to display text in a fixed-width font.

The <tt> tag is not supported in HTML5. Web browsers still render it as expected. However, you
should use more appropriate tags, which include <code>, <kbd>, <var>, and <samp>.

Phrase Elements
Phrase elements not only change the appearance of text, but also add semantic importance to aword or phrase. Using them, you can emphasize a word or mark it as important. These elements,
as opposed to presentation elements, are recognized by screen readers, which makes the text
more accessible to visually impaired visitors and allows search engines to better read andevaluate the page content. The phrase elements we use throughout this lesson are <em>,<strong>, and <code>.
Emphasized Text
To emphasize text, you can wrap it within the <em> element as illustrated in the following
example:This <em>word</em> is emphasized.

Figure 15. The <em> tag is used to emphasize text.

As you can see, web browsers display <em> in the same way as <i>, but <em> adds semantic
importance as a phrase element, which improves accessibility for visually impaired visitors.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

77Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Strong Text
To mark text as important, you can wrap it within the <strong> element as illustrated in thefollowing example. The result appears in Figure 16.
This <strong>word</strong> is important.

Figure 16. The <strong> tag is used to mark text as important.

As you can see, web browsers display <strong> in the same way as <b>, but <strong> adds
semantic importance as a phrase element, which improves accessibility for visually impaired
visitors.
Computer CodeTo insert a piece of computer code, you can wrap it within the <code> element as illustrated in
the following example. The result appears in Figure 17.
The Markdown code <code># Heading</code> creates a heading at the highest level in thehierarchy.

Figure 17. The <code> tag is used to insert a piece of computer code.

Marked Text
To highlight text with a yellow background, similar to the style of a highlighter, you can use the<mark> element as illustrated in the following example. The result appears in Figure 18.
This <mark>word</mark> is highlighted.

Figure 18. The <mark> tag is used to highlight text with a yellow background.

78|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Formatting the Text of our HTML Shopping List
Drawing on our previous examples, let’s insert some phrase elements to change the appearance ofthe text while also adding semantic importance. The result appears in Figure 19.
<h1>Garden Party</h1><p>Invitation to <strong>John's garden party</strong>.<br><strong>Saturday, next week.</strong></p><h2>Agenda</h2><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul>Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

79Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Figure 19. The HTML page with some formatting elements.

In this sample HTML document, the most important information regarding the garden party itself
is marked as important using the <strong> element. Foods that are available for the barbecue areemphasized using the <em> element. The fireworks are simply highlighted using the <mark>element.
As an exercise, you can try formatting other pieces of text using the other formatting elements as
well.

Preformatted Text
In most HTML elements, white space is usually reduced to a single space or even ignored entirely.
However, there is an HTML element named <pre> that lets you define so-called preformatted text.
White space in the content of this element, including spaces and line breaks, is preserved and80|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

rendered in the web browser. Additionally, the text is displayed in a fixed-width font, similar tothe <code> element.
<pre>field() {shift $1 ; echo $1}</pre>

Figure 20. Web browser representation of HTML code illustrating how the <pre> HTML element
preserves white space.

Grouping Elements
By convention, HTML elements are divided into two categories:
Block-Level Elements
These appear on a new line and take up the entire available width. Examples of block-levelelements that we already discussed are <p>, <ol>, and <h2>.
Inline-Level Elements
These appear in the same line as other elements and text, taking up only as much space as theircontent requires. Examples of inline-level elements are <strong>, <em>, and <i>.

NOTE

HTML5 has introduced more accurate and precise element categories, trying to
avoid confusion with CSS block and inline boxes. For simplicity, we will stick here
to the conventional subdivision into block and inline elements.

The fundamental elements for grouping multiple elements together are the <div> and <span>elements.
The <div> element is a block-level container for other HTML elements and does not add semantic
value by itself. You can use this element to divide an HTML document into sections and structure
your content, both for code readability and to apply CSS styles to a group of elements, as you willlearn in a later lesson.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

81Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

By default, web browsers always insert a line break before and after each <div> element so thateach is displayed on its own line.
In contrast, the <span> element is used as a container for HTML text and is generally used togroup other inline elements in order to apply styles using CSS to a smaller portion of text.
The <span> element behaves just like regular text and does not start on a new line. It is therefore
an inline element.
The following example compares the visual representation of the semantic <p> element and thegrouping elements <div> and <span>:<p>Text within a paragraph</p><p>Another paragraph of text</p><hr><div>Text wrapped within a <code>div</code> element</div><div>Another <code>div</code> element with more text</div><hr><span>Span content</span><span>and more span content</span>

A web browser renders this code as shown in Figure 21.

Figure 21. Web browser representation of a test document illustrating the differences between paragraph,
div and span elements in HTML.

We already saw that by default, the web browser adds spacing before and after <p> elements.
This spacing is not applied to either of the grouping elements <div> and <span>. However, <div>
elements are formatted as their own blocks, while the text in <span> elements is shown in thesame line.

82|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

HTML Page Structure
We have discussed how to use HTML elements to describe the content of a web page
semantically–in other words, to convey meaning and context to the text. Another group ofelements are designed for the purpose of describing the semantic structure of a web page, an
expression or its structure. These elements are block elements, i.e., they visually behave similarly
to a <div> element. Their purpose is to define the semantic structure of a web page by specifying
well-defined areas such as headers, footers and the page’s main content. These elements allow thesemantic grouping of content so that it may be understood by a computer as well, including
search engines and screen readers.

The <header> Element
The <header> element contains introductory information to the surrounding semantic element
within an HTML document. A header is different from a heading, but a header often includes aheading element (<h1>, … , <h6>).
In practice, this element is most often used to represent the page header, such as a banner with alogo. It can also be used to introduce the content for any of the following elements: <body>,<section>, <article>, <nav>, or <aside>.
A document may have multiple <header> elements, but a <header> element cannot be nested
within another <header> element. Neither can a <footer> element be used within a <header>.
For example, to add a page header to our example document, we can do the following:<header><h1>Garden Party</h1></header>There will be no visible changes to the HTML document, as <h1> (like all other heading elements)
is a block-level element with no further visual properties.

The <main> Content Element
The <main> element is a container for the central content of a web page. There must be no morethan one <main> element in an HTML document.
In our example document, all the HTML code we have written so far would be placed inside the<main> element.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

83Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<main><header><h1>Garden Party</h1></header><p>
Invitation to <strong>John's garden party</strong>.<br><strong>Saturday, next week.</strong></p><h2>Agenda</h2><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li>
</ol>
<hr>
<h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul></main>Like the <header> element, the <main> element does not cause any visual changes in our
example.

The <footer> Element
The <footer> element contains footnotes, for example authorship information, contact
information, or related documents, for its surrounding semantic element, e.g. <section>, <nav>,
84|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchyor <aside>. A document can have multiple <footer> elements that allow you to better describe
semantic elements. However, a <footer> element cannot be nested within another <footer>element, nor can a <header> element be used within a <footer>.
For our example, we can add contact information for the host (John) as shown in the following
example:<footer><p>John Doe</p><p>john.doe@example.com</p></footer>

The <nav> Element
The <nav> element describes a major navigational unit, such as a menu, that contains a series ofhyperlinks.
NOTE

Not all hyperlinks must be wrapped within a <nav> element. It’s useful when
listing a group of links.

Because hyperlinks have not yet been covered, the navigation element will not be included in thislesson’s example.

The <aside> Element
The <aside> element is a container for content that is not necessary within the ordering of themain page content, but is usually indirectly related or supplementary. This element is often used
for sidebars that display secondary information, such as a glossary.
For our example, we can add address and journey information, which are only indirectly related
to the remaining content, using the <aside> element.
<aside><p>
10, Main Street<br>
Newville</p><p>Parking spaces available.</p></aside>Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

85

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

The <section> Element
The <section> element defines a logical section in a document that is part of the surrounding
semantic element, but would not work as stand-alone content, such as a chapter.
In our example document, we can wrap the content sections for the agenda and bring in list
sections as shown in the following example:<section><header><h2>Agenda</h2></header><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li></ol></section><hr><section><header><h2>Please bring</h2></header><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul></section>

This example also adds further <header> elements within the sections, so that each section is86|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

within its own <header> element.

The <article> Element
The <article> element defines independent and standalone content that makes sense on its own
without the rest of the page. Its content is potentially redistributable or reusable in anothercontext. Typical examples or material appropriate for an <article> element are a blog posting, aproduct listing for a shop, and an advertisement for a product. The advertisement could then exist
both on its own and within a larger page.
In our example, we can replace the first <section> that wraps the agenda with an <article>
element.
<article><header><h2>Agenda</h2></header><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li></ol></article>

The <header> element we added in the previous example may persist here as well, because<article> elements may have their own <header> elements.

The Final Example
Combining all previous examples, the final HTML document for our invitation looks as follows:<!DOCTYPE html><html lang="en"><head>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

87Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<title>Garden Party</title></head><body><main><h1>Garden Party</h1><p>Invitation to <strong>John's garden party</strong>.<br><strong>Saturday, next week.</strong></p><article><h2>Agenda</h2><ol><li>Welcome</li><li>
Barbecue<ul><li><em>Vegetables</em></li><li><em>Meat</em></li><li><em>Burgers</em>, including vegetarian options</li>
</ul>
</li>
<li>Dessert</li><li><mark>Fireworks</mark></li></ol></article><hr><section><h2>Please bring</h2><ul><li>Salad</li><li>Drinks</li><li>Bread</li><li>Snacks</li><li>Desserts</li></ul></section></main><aside><p>88|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

10, Main Street<br>
Newville</p><p>Parking spaces available.</p></aside><footer><p>John Doe</p><p>john.doe@example.com</p></footer></body></html>In a web browser, the whole page is rendered as shown in Figure 22.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

89

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Figure 22. Web browser representation of the resulting HTML document combining the previous
examples. The page represents an invitation to a garden party and describes the agenda for the evening
and a list of food for the guests to bring.

90|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Guided Exercises
1. For each of the following tags, indicate the corresponding closing tag:
<h5>
<br>
<ol>
<dd>
<hr>
<strong><tt><main>
2. For each of the following tags, indicate whether it marks the beginning of a block or inline
element:<h3><span>
<b>
<div>
<em>
<dl>
<li>
<nav>
<code><pre>3. What kind of lists can you create in HTML? Which tags should you use for each of them?

4. What tags enclose the block elements that you can use to structure an HTML page?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

91Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Explorational Exercises
1. Create a basic HTML page with the title “Form Rules”. You will use this HTML page for all
explorational exercises, each of which is based on the previous ones. Then add a level 1
heading with the text “How to fill in the request form”, a paragraph with the text “To receive
the PDF document with the complete HTML course, it is necessary to fill in the following
fields:” and an unordered list with the following list items: “Name”, “Surname”, “Email
Address”, “Nation”, “Country”, and “Zip/Postal Code”.

2. Put the first three fields (“Name”, “Surname”, and “Email Address”) in bold, while also adding
semantic importance. Then add a level 2 heading with the text “Required fields” and aparagraph with the text “Bold fields are mandatory.”

3. Add another level 2 heading with the text “Steps to follow”, a paragraph with the text “There
are four steps to follow:”, and an ordered list with the following list items: “Fill in the fields”,“Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link
you receive”, and “Check your e-mail - You will receive the full HTML course in minutes”.

4. Using <div>, create a block for each section that starts with a level 2 heading.

5. Using <div>, create another block for the section starting with the level 1 heading. Then divide
this section from the other two with an horizontal line.

6. Add the header element with the text “Form Rules - 2021” and the footer element with the text
“Copyright Note - 2021”. Finally, add the main element that must contain the three <div>
blocks.

92|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Summary
In this lesson you learned:• How to create markup for contents in an HTML document• The hierarchical HTML text structure• The difference between block and inline HTML elements• How to create HTML documents with a semantic structure
The following terms were discussed in this lesson:<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
The heading tags.
<p>
The paragraph tag.
<ol>
The ordered list tag.
<ul>
The unordered list tag.
<li>
The list item tag.
<dl>
The description list tag.
<dt>, <dd>
The tags of each term and description for a description list.
<pre>
The preserve formatting tag.
<b>, <i>, <u>, <tt>, <em>, <strong>, <code>, <mark>The formatting tags.
<div>, <span>
The grouping tags.
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

93Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<header>, <main>, <nav>, <aside>, <footer>
The tags used to provide a simple structure and layout to an HTML page.

94|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Answers to Guided Exercises
1. For each of the following tags, indicate the corresponding closing tag:
<h5>

</h5>

<br>

Does not exist

<ol>

</ol>

<dd>

</dd>

<hr>

Does not exist<strong></strong>

<tt>

</tt>

<main></main>2. For each of the following tags, indicate whether it marks the beginning of a block or inline
element:<h3>

Block Element<span>

Inline Element<b>

Inline Element<div>

Block Element<em>

Inline Element<dl>

Block Element<li>

Block Element<nav>

Block Element<code>

Inline Element<pre>

Block Element

3. What kind of lists can you create in HTML? Which tags should you use for each of them?
In HTML, you can create three types of lists: ordered lists consisting of a series of numbered list
items, unordered lists consisting of a series of list items that have no special order or sequence,and description lists representing entries as in a dictionary or encyclopedia. An ordered list is
enclosed between the <ol> and </ol> tags, an unordered list is enclosed between the <ul> and</ul> tags, and a description list is enclosed between the <dl> and </dl> tags. Each item in an

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

95

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

ordered or unordered list is enclosed between the <li> and </li> tags, while each term in a
description list is enclosed between the <dt> and </dt> tags and its description is enclosed
between the <dd> and </dd> tags.
4. What tags enclose the block elements that you can use to structure an HTML page?
The <header> and </header> tags enclose the page header, the <main> and </main> tags
enclose the main content of the HTML page, the <nav> and </nav> tags enclose the so-callednavigation bar, the <aside> and </aside> tags enclose the sidebar, and the <footer> and</footer> tags enclose the page footer.

96|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy

Answers to Explorational Exercises
1. Create a basic HTML page with the title “Form Rules”. You will use this HTML page for all
explorational exercises, each of which is based on the previous ones. Then add a level 1
heading with the text “How to fill in the request form”, a paragraph with the text “To receive
the PDF document with the complete HTML course, it is necessary to fill in the following
fields:” and an unordered list with the following list items: “Name”, “Surname”, “Email
Address”, “Nation”, “Country”, and “Zip/Postal Code”.
<!DOCTYPE html><html><head><title>Form Rules</title></head><body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it is necessary
to fill in the following fields:
</p>
<ul>
<li>Name</li><li>Surname</li><li>Email Address</li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul></body></html>2. Put the first three fields (“Name”, “Surname”, and “Email Address”) in bold, while also adding
semantic importance. Then add a level 2 heading with the text “Required fields” and aparagraph with the text “Bold fields are mandatory.”<!DOCTYPE html><html><head><title>Form Rules</title></head>Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

97Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it is necessary
to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul><h2>Required fields</h2><p>Bold fields are mandatory.</p></body></html>3. Add another level 2 heading with the text “Steps to follow”, a paragraph with the text “There
are four steps to follow:”, and an ordered list with the following list items: “Fill in the fields”,“Click the Submit button”, “Check your e-mail and confirm your request by clicking on the link
you receive”, and “Check your e-mail - You will receive the full HTML course in minutes”.
<!DOCTYPE html><html><head><title>Form Rules</title></head><body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it is necessary
to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li>

98|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy<li>Country</li><li>Zip/Postal Code</li></ul><h2>Required fields</h2><p>Bold fields are mandatory.</p><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the link you
receive</li><li>
Check your e-mail - You will receive the full HTML course in minutes
</li>
</ol>
</body></html>

4. Using <div>, create a block for each section that starts with a level 2 heading.
<!DOCTYPE html><html><head><title>Form Rules</title></head><body><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it is necessary
to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

99

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<li>Zip/Postal Code</li>
</ul>
<div>
<h2>Required fields</h2><p>Bold fields are mandatory.</p></div><div><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the link you
receive</li><li>
Check your e-mail - You will receive the full HTML course in minutes
</li>
</ol>
</div></body></html>5. Using <div>, create another block for the section starting with the level 1 heading. Then divide
this section from the other two with an horizontal line.
<!DOCTYPE html><html><head><title>Form Rules</title></head><body><div><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary to fill in the following fields:
</p>
<ul>

100

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul></div><hr><div><h2>Required fields</h2><p>Bold fields are mandatory.</p></div><div><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the link you
receive</li><li>
Check your e-mail - You will receive the full HTML course in minutes
</li>
</ol>
</div></body></html>6. Add the header element with the text “Form Rules - 2021” and the footer element with the text
“Copyright Note - 2021”. Finally, add the main element that must contain the three <div>
blocks.
<!DOCTYPE html><html><head><title>Form Rules</title></head>Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

101Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<body><header><h1>Form Rules - 2021</h1></header><main><div><h1>How to fill in the request form</h1><p>
To receive the PDF document with the complete HTML course, it isnecessary to fill in the following fields:
</p>
<ul>
<li><strong> Name </strong></li><li><strong> Surname </strong></li><li><strong> Email Address </strong></li><li>Nation</li><li>Country</li><li>Zip/Postal Code</li></ul></div><hr><div><h2>Required fields</h2><p>Bold fields are mandatory.</p></div><div><h2>Steps to follow</h2><p>There are four steps to follow:</p><ol><li>Fill in the fields</li><li>Click the Submit button</li><li>
Check your e-mail and confirm your request by clicking on the link
you receive
</li>
<li>
Check your e-mail - You will receive the full HTML course in minutes
</li>
</ol>

102

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.2 HTML Semantics and Document Hierarchy</div></main><footer><p>Copyright Note - 2021</p></footer></body></html>Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

103Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

032.3 HTML References and Embedded Resources
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 032.3
Weight2
Key knowledge areas• Create links to external resources and page anchors• Add images to HTML documents• Understand key properties of common media file formats, inlcuding PNG, JPG and SVG• Awareness of iframes
Partial list of the used files, terms and utilities• id attribute• <a>, including the href and target (_blank, _self, _parent, _top) attributes• <img>, including the src and alt attributes

104|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.3 HTML References and Embedded Resources032.3 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

032 HTML Document Markup

Objective:

032.3 HTML References and Embedded
Resources

Lesson:1 of 1Introduction
Any modern web page is rarely made of just text. It comprises many other types of contents, suchas images, audio, video and even other HTML documents. Along with external content, HTML
documents can contain links to other documents, which makes the experience of browsing theInternet much simpler.

Embedded Content
File exchange is possible over the Internet without web pages written in HTML, so why is HTMLthe chosen format for web documents and not PDF or any other word processing format? One
important reason is that HTML keeps its multimedia resources in separate files. In an
environment such as the Internet, where information is often redundant and distributed at
different locations, it is important to avoid unnecessary data transfers. Most of the time, newversions of a web page pull in the same images and other support files as previous versions, so the
web browser can use the previously fetched files instead of copying everything over again.
Furthermore, keeping the files separate facilitates the customization of multimedia content
according to the client’s characteristics, such as their location, screen size, and connection speed.
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

105

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

ImagesThe most common type of embedded content are images that accompany the text. Images are kept
separately and are referenced inside the HTML file with the <img> tag:<img src="logo.png">

The <img> tag does not require a closing tag. The src property indicates the source location for
the image file. In this example, the image file logo.png must be located in the same directory as
the HTML file, otherwise the browser will not be able to display it. The source location property
accepts relative paths, so the dot notation can be used to indicate the path to the image:<img src="../logo.png">

The two dots indicate that the image is located inside the parent directory relative to the directory
where the HTML file is. If the filename ../logo.png is used inside an HTML file whose URL is
http://example.com/library/periodicals/index.html, the browser will request the image
file at the address http://example.com/library/logo.png.
The dot notation also applies if the HTML file isn’t an actual file in the filesystem; the HTMLbrowser interprets the URL as if it is a path to a file, but it is the HTTP server’s job to decide
whether that path refers to a file or to dynamically generated content. The domain and the proper
path are automatically added to all requests to the server, in case the HTML file came from a HTTP
request. Likewise, the browser will open the proper image if the HTML file was opened directlyfrom the local filesystem.
Source locations beginning with a forward slash / are treated as absolute paths. Absolute paths
have complete information for the image’s locations, so they work regardless of the HTML
document’s location. If the image file is located at another server, which will be the case when aContent Delivery Network (CDN) is used, the domain name must also be included.

NOTE

Content Delivery Networks are composed of geographically distributed servers that
store static content for other websites. They help to improve performance andavailability for heavy accessed sites.

If the image can’t be loaded, the HTML browser will show the text provided by the alt attribute
instead of the image. For example:<img src="logo.png" alt="The Company logo">106|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.3 HTML References and Embedded Resources

The alt attribute is also important for accessibility. Text-only browsers and screen readers use it
as a description for the corresponding image.
Image Types
Web browsers can display all the popular image types, such as JPEG, PNG, GIF, and SVG. The
dimensions of the images are detected as soon as the images are loaded, but they can bepredefined with the width and height attributes:<img src="logo.png" alt="The Company logo" width="300" height="100">

The only reason for including dimension attributes to the <img> tag is to avoid breaking thelayout when the image takes too long to load or when it can not be loaded at all. Using the widthand height attributes to change the image’s original dimensions may result in undesirable
results:• Images will be distorted when the original size is smaller than the new dimensions or when the
new proportion ratio differs from the original.
• Downsizing large images uses extra bandwidth that will result in longer loading timings.
SVG is the only format that doesn’t suffer from these effects, because all of its graphicalinformation is stored in numerical coordinates well suited for scaling and its dimensions don’t
affect the file size (hence the name Scalable Vector Graphics). For example, only the position, side
dimensions, and color information are necessary to draw a rectangle in SVG. The particular value
for every single pixel will be dynamically rendered afterwards. In fact, SVG images are similar to
HTML files, in the sense that their graphic elements are also defined by tags in a text file. SVG files
are intended for representing sharp-edged drawings, such as charts or diagrams.
Images that don’t fit these criteria should be stored as bitmaps. Unlike vector based image formats,bitmaps store color information for every pixel in the image beforehand. Storing the color value
for each pixel in the image generates a very large amount of data, so bitmaps are usually stored incompressed formats, such as JPEG, PNG, or GIF.
The JPEG format is recommended for photographs, because its compression algorithm produces
good results for shades and blurry backgrounds. For images where solid colors prevail, the PNG
format is more appropriate. Therefore, the PNG format should be chosen when it is necessary toconvert a vector image to a bitmap.
The GIF format offers the lowest image quality of all the popular bitmap formats. Nevertheless, it
is still widely used because of its support for animations. Indeed, many websites employ GIF files
to display short videos, but there are better ways to display video content.
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

107Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Audio and Video
Audio and video contents may be added to an HTML document in more of less the same way as
images. Unsurprisingly, the tag to add audio is <audio> and the tag to add video is <video>.
Obviously, text-only browsers aren’t able to play multimedia content, so the <audio> and<video> tags employ the closing tag to hold the text used as a fallback for the element that could
not be shown. For example:<audio controls src="/media/recording.mp3"><p>Unable to play <em>recording.mp3</em></p></audio>

If the browser doesn’t support the <audio> tag, the line “Unable to play recording.mp3” will beshown instead. The use of closing </audio> or </video> tags allows a web page to include moreelaborate alternative content than the simple line of text permitted by the alt attribute of the<img> tag.
The src attribute for <audio> and <video> tags works in the same way as for the <img> tag, butalso accepts URLs pointing to a live stream. The browser takes care of buffering, decoding, anddisplaying the content as it is received. The controls attribute displays playback controls.
Without it, the visitor will not be able to pause, rewind, or otherwise control the playback.

Generic Content
An HTML document can be nested into another HTML document, similarly to the insertion of animage into an HTML document, but using the tag <iframe>:<iframe name="viewer" src="gallery.html"><p>Unsupported browser</p></iframe>

Simpler text-only browsers don’t support the <iframe> tag and will display the enclosed text
instead. As with the multimedia tags, the src attribute sets the source location of the nested
document. The width and height attributes can be added to change the default dimensions of theiframe element.
The name attribute allows developers to refer to the iframe and change the nested document.
Without this attribute, the nested document cannot be changed. An anchor element can be used
to load a document from another location inside an iframe instead of the current browser
window.

108|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.3 HTML References and Embedded Resources

Links
The page element commonly referred to as a web link is also known by the technical term anchor,
hence the use of tag <a>. The anchor leads to another location, which can be any address
supported by the browser. The location is indicated by the href (hyperlink reference) attribute:<a href="contact.html">Contact Information</a>

The location can be written as a relative or absolute path, as with the embedded contents
discussed earlier. Only the enclosed text content (e.g., Contact Information) is visible to thevisitor, usually as clickable underlined blue text by default, but the item displayed over the link
can also be any other visible content, such as images:<a href="contact.html"><img src="contact.png" alt="Contact Information"></a>Special prefixes can be added to the location to tell the browser how to open it. If the anchor
points to an email address, for example, its href attribute should include the mailto: prefix:<a href="mailto:info@lpi.org">Contact by email</a>

The tel: prefix indicates a phone number. It’s particularly useful for visitors viewing the page on
mobile devices:<a href="tel:+123456789">Contact by phone</a>When the link is clicked, the browser opens the location’s contents with the associatedapplication.
The most common use of anchors is to load other web documents. By default, the browser will
replace the current HTML document with content at the new location. This behavior can be
modified by using the target attribute. The _blank target, for example, tells the browser to open
the given location in a new window or new browser tab, depending on the visitor’s preferences:<a href="contact.html" target="_blank">Contact Information</a>

The _self target is the default when the target attribute is not provided. It causes thereferenced document to replace the current document.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

109Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Other types of targets are related to the <iframe> element. To load a referenced document inside
an <iframe> element, the target attribute should point to the name of the iframe element:<p><a href="gallery.html" target="viewer">Photo Gallery</a></p><iframe name="viewer" width="800" height="600"><p>Unsupported browser</p></iframe>

The iframe element works as a distinct browser window, so any links loaded from the document
inside the iframe will replace only the contents of the iframe. To change that behaviour, theanchor elements inside the framed document can also use the target attribute. The _parent
target, when used inside a framed document, will cause the referenced location to replace theparent document containing the <iframe> tag. For example, the embedded gallery.html
document could contain an anchor that loads itself while replacing the parent document:<p><a href="gallery.html" target="_parent">Open as parent document</a></p>HTML documents support multiple levels of nesting with the <iframe> tag. The _top target, whenused in an anchor inside a framed document, will cause the referenced location to replace themain document in the browser window, regardless if it is the immediate parent of thecorresponding <iframe> or an ancestor further back in the chain.

Locations Inside Documents
The address of an HTML document may optionally contain a fragment that can be used to identify
a resource inside the document. This fragment, also known as the URL anchor, is a string
following a hash sign # at the end of the URL. For example, the word History is the anchor in the
URL https://en.wikipedia.org/wiki/Internet#History.
When the URL has an anchor, the browser will scroll to the corresponding element in the
document: that is, the element whose id attribute is equal to the anchor in the URL. In the case of
the given URL, https://en.wikipedia.org/wiki/Internet#History, the browser will jumpstraight to the “History” section. Examining the HTML code of the page, we find out that the title ofthe section has the corresponding id attribute:<span class="mw-headline" id="History">History</span>

URL anchors can be used in the href attribute of the <a> tag, either when they are pointing to110|learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.3 HTML References and Embedded Resources

external pages or when they are pointing to locations inside the current page. In the latter case, it
is enough to put start with just the hash sign with the URL fragment, as in <ahref="#History">History</a>.
WARNING

The id attribute must not contain whitespace (spaces, tabs, etc.) and must be
unique within the document.

There are ways to customize how the browser will react to URL anchors. It is possible, forexample, to write a JavaScript function that listens to the hashchange window event and triggers acustomized action, such as an animation or an HTTP request. It is worth noting, however, that the
URL fragment is never sent to the server with the URL, so it cannot be used as an identifier by the
HTTP server.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

111

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Guided Exercises
1. The HTML document located at http://www.lpi.org/articles/linux/index.html has an<img> tag whose src attribute points to ../logo.png. What is the complete absolute path to
this image?

2. Name two reasons why the alt attribute is important in <img> tags.

3. What image format gives good image quality and keeps the file size small when it is used forphotographs with blurry points and with many colors and shades?

4. Instead of using a third-party provider such as Youtube, what HTML tag lets you embed a video
file in an HTML document using only standard HTML features?

112|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.3 HTML References and Embedded Resources

Explorational Excercises
1. Assume that an HTML document has the hyperlink <a href="pic1.jpeg">First
picture</a> and the iframe element <iframe name="gallery"></iframe>. How could you
modify the hyperlink tag so the image it points to will load inside the given iframe element
after the user clicks on the link?

2. What will happen when the visitor clicks a hyperlink in a document inside an iframe and thehyperlink has the target attribute set to _self?

3. You notice that the URL anchor for the second section of your HTML page is not working. Whatis the probable cause of this error?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

113

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

SummaryThis lesson covers how to add images and other multimedia content using the proper HTML tags.
Moreover, the reader learns the different ways hyperlinks can be used to load other documents
and point to specific locations inside a page. The lesson goes through the following concepts andprocedures:• The <img> tag and its main attributes: src and alt.
• Relative and absolute URL paths.
• Popular image formats for the Web and their characteristics.
• The <audio> and <video> multimedia tags.
• How to insert nested documents with the <iframe> tag.
• The hyperlink tag <a>, its href attribute, and special targets.
• How to use URL fragments, also known as hash anchors.

114|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.3 HTML References and Embedded Resources

Answers to Guided Exercises
1. The HTML document located at http://www.lpi.org/articles/linux/index.html has an<img> tag whose src attribute points to ../logo.png. What is the complete absolute path to
this image?
http://www.lpi.org/articles/logo.png
2. Name two reasons why the alt attribute is important in <img> tags.
Text-only browsers will be able to show a description of the missing image. Screen readers use
the alt attribute to describe the image.
3. What image format gives good image quality and keeps the file size small when it is used forphotographs with blurry points and with many colors and shades?
The JPEG format.
4. Instead of using a third-party provider such as Youtube, what HTML tag lets you embed a video
file in an HTML document using only standard HTML features?
The <video> tag.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

115

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Answers to Explorational Exercises
1. Assume that an HTML document has the hyperlink <a href="pic1.jpeg">First
picture</a> and the iframe element <iframe name="gallery"></iframe>. How could you
modify the hyperlink tag so the image it points to will load inside the given iframe element
after the user clicks on the link?
Using the target attribute of the a tag: <a href="pic1.jpeg" target="gallery">First
picture</a>.
2. What will happen when the visitor clicks a hyperlink in a document inside an iframe and thehyperlink has the target attribute set to _self?
The document will be loaded inside the same iframe, which is the default behaviour.
3. You notice that the URL anchor for the second section of your HTML page is not working. Whatis the probable cause of this error?
The URL fragment after the hash sign doesn’t match the id attribute in the element
corresponding to the second section, or the id attribute of the element is not present.

116|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms

032.4 HTML Forms
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 032.4
Weight2
Key knowledge areas• Create simple HTML forms• Understand HTML form methods• Understand HTML input elements and types
Partial list of the used files, terms and utilities• <form>, including the method (get, post), action, and enctype attributes• <input>, including the `type (text, email, password, number, date, file, range,
radio, checkbox, hidden) attribute• <button>, including the type (submit, reset, hidden, button) attribute• <textarea>• Common form element attributes (name, value, id)• <label>, including the `for attribute

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

117Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

032.4 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

032 HTML Document Markup

Objective:

032.4 HTML Forms

Lesson:1 of 1Introduction
Web forms provide a simple and efficient way to request visitor information from an HTML page.
The front end developer can use various components such as text fields, checkboxes, buttons, andmany others to build interfaces that will send data to the server in a structured way.

Simple HTML Forms
Before jumping into markup code specific to forms, let us first start with a simple blank HTML
document, without any body content:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Working with HTML Forms</title></head><body>

118|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms<!-- The body content goes here --></body></html>Save the code sample as a raw text file with a .html extension (as in form.html) and use yourfavorite browser to open it. After changing it, press the reload button in the browser to show themodifications.
The basic form structure is given by the <form> tag itself and its internal elements:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Working with HTML Forms</title></head><body><!-- Form to collect personal information --><form><h2>Personal Information</h2><p>Full name:</p><p><input type="text" name="fullname" id="fullname"></p><p><input type="reset" value="Clear form"></p><p><input type="submit" value="Submit form"></p></form></body></html>The double quotes are not required for single word attributes like type, so type=text works aswell as type="text". The developer can choose which convention to use.
Save the new content and reload the page in the browser. You should see the result shown in
Figure 23.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

119Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Figure 23. A very basic form.

The <form> tag by itself does not produce any noticeable result on the page. The elements inside
the <form>…</form> tags will define the fields and other visual aids shown to the visitor.
The example code contains both general HTML tags (<h2> and <p>) and the <input> tag, which isa form-specific tag. Whereas general tags can appear anywhere in the document, form-specifictags should be used only within the <form> element; that is, between the opening <form> andclosing </form> tags.

NOTE

HTML provides only basic tags and properties to modify the standard appearanceof forms. CSS provides elaborate mechanisms to modify the look and feel of theform, so the recommendation is to write HTML code that deals only with thefunctional aspects of the form and modify its appearance with CSS.

As shown in the example, the paragraph tag <p> can be used to describe the field to the visitor.
However, there is no obvious way the browser could relate the description in the <p> tag with thecorresponding input element. The <label> tag is more appropriate in these cases (from now on,
consider all the code samples as being inside the body of the HTML document):<form><h2>Personal Information</h2><label for="fullname">Full name:</label><p><input type="text" name="fullname" id="fullname"></p>120|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms<p><input type="reset" value="Clear form"></p><p><input type="submit" value="Submit form"></p></form>The for attribute in the <label> tag contains the id of the corresponding input element. It makes
the page more accessible, as screenreaders will be able to speak the contents of the label element
when the input element is in focus. Moreover, visitors can click the label to place the focus in its
corresponding input field.
The id attribute works for form elements like it does for any other element in the document. It
provides an identifier for the element that is unique within the entire document. The nameattribute has a similar purpose, but it is used to identify the input element in the form’s context.
The browser uses the name attribute to identify the input field when sending the form data to theserver, so it is important to use meaningful and unique name attributes inside the form.
The type attribute is the main attribute of the input element, because it controls the data type theelement accepts and its visual presentation to the visitor. If the type attribute is not provided, by
default the input shows a text box. The following input types are supported by modern browsers:
Table 1. Form input types

Type attribute

Data typeHow it is displayed

hiddenAn arbitrary string

N/A

text

Text with no line breaks

A text control

searchText with no line breaks

A search control

tel

Text with no line breaks

A text controlurl

An absolute URL

A text control

email

An email address or list ofemail addresses

A text control

password

Text with no line breaks(sensitive information)

A text control that obscuresdata entrydate

A date (year, month, day) withno time zone

A date controlmonth

A date consisting of a year anda month with no time zone

A month control

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

121Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Type attribute

Data typeHow it is displayedweek

A date consisting of a weekyear number and a weeknumber with no time zone

A week control

time

A time (hour, minute, seconds,
fractional seconds) with notime zone

A time control

datetime-local

A date and time (year, month,day, hour, minute, second,
fraction of a second) with notime zone

A date and time control

number

A numerical value

A text control or spinnercontrolrange

A numerical value, with theextra semantic that the exact
value is not important

A slider control or similarcolor

An sRGB color with 8-bit red,green and blue components

A color picker

checkbox

A set of zero or more values
from a predefined list

A checkbox (offers choices andallows multiple choices to be
selected)radio

An enumerated value

A radio button (offers choices
and allows only one choice tobe selected)

file

Zero or more files each with a
MIME type and optional filename

A label and a button

submitAn enumerated value, which
ends the input process andcauses the form to besubmitted

A button

122|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms

Type attribute

Data typeHow it is displayed

image

A coordinate, relative to aparticular image’s size, which
ends the input process andcauses the form to besubmitted

Either a clickable image or abuttonbuttonN/A

A generic button

reset

N/A

A button whose function is toreset all other fields to theirinitial values

The appearance of the password, search, tel, url, and email input types do not differ from thestandard text type. Their purpose is to offer hints to the browser about the intended content forthat input field, so the browser or the script running on the client side can take custom actions fora specific input type. The only difference between the text input type and the password field type,for example, is that the contents of the password field are not displayed as the visitor types themin. In touch screen devices, where the text is typed with a on-screen keyboard, the browser can
pop up only the numerical keyboard when an input of type tel gain focus. Another possible
action is to suggest a list of known email addresses when an input of type email gain focus.
The number type also appears as a simple text input, but with increment/decrement arrows at its
side. Its use will cause the numerical keyboard to show up in touchscreen devices when it has thefocus.
The other input elements have their own appearance and behavior. The date type, for example, isrendered according to the local date format settings and a calendar is displayed when the field
gains focus:<form><p><label for="date">Date:</label><input type="date" name="date" id="date"></p></form>Figure 24 shows how the desktop version of Firefox currently renders this field.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

123Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Figure 24. The date input type.

NOTE

For elements may appears slightly different in different browsers or operating
systems, but their functioning and usage are always the same.

This is a standard feature in all modern browsers and does not require extra options orprogramming.
Regardless of the input type, the content of an input field is called its value. All field values are
empty by default, but the value attribute can be used to set a default value for the field. The value
for the date type must use the YYYY-MM-DD format. The default value in the following date fieldin 6 August 2020:<form><p><label for="date">Date:</label><input type="date" name="date" id="date" value="2020-08-06"></p></form>The specific input types assist the visitor in filling in the fields, but do not prevent the visitor frombypassing the restrictions and entering arbitrary values in any field. That is why it is importantthat the field values are validated when they arrive at the server.
Form elements whose values must be typed by the visitor may have special attributes that assist

124|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms

in filling them out. The placeholder attribute inserts an example value in the input element:<p>Address: <input type="text" name="address" id="address" placeholder="e.g. 41 John St.,
Upper Suite 1"></p>

The placeholder appears inside the input element, as shown in Figure 25.

Figure 25. Placeholder attribute example.

Once the visitor starts typing in the field, the placeholder text disappears. The placeholder text is
not sent as the field value if the visitor leaves the field empty.
The required attribute requires the visitor to fill in a value for the corresponding field before
submitting the form:<p>Address: <input type="text" name="address" id="address" required placeholder="e.g. 41
John St., Upper Suite 1"></p>

The required attribute is a Boolean attribute, so it can be placed alone (without the equal sign). It
is important to mark the fields that are required, otherwise the visitor will not be able to tellwhich fields are missing and preventing the form submission.
The autocomplete attribute indicates whether the value of the input element can be
automatically completed by the browser. If set to autocomplete="off", then the browser does
not suggest past values to fill the entry. Input elements for sensitive information, such as credit
card numbers, should have the autocomplete attribute set to off.

Input for large texts: textarea
Unlike the text field, where only one line of text can be inserted, the textarea element allows thevisitor to enter more than one line of text. The textarea is a separate element, but it is not basedon the input element:<p> <label for="comment">Type your comment here:</label> <br><textarea id="comment" name="comment" rows="10" cols="50">My multi-line, plain-text comment.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

125Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup</textarea></p>

The typical appearance of a textarea is Figure 26.

Figure 26. The textarea element.

Another difference from the input element is that the textarea element has a closing tag(</textarea>), so its content (i.e. its value) goes in between them. The rows and cols attribute do
not limit the amount of text; they are used only to define the layout. The textarea also has a handle
in the bottom-right corner, which allows the visitor to resize it.

Lists of Options
Several types of form controls can be used to present a list of options to the visitor: the <select>element and the radio and checkbox input types.
The <select> element is a dropdown control with a list of predefined entries:<p><label for="browser">Favorite Browser:</label><select name="browser" id="browser"><option value="firefox">Mozilla Firefox</option><option value="chrome">Google Chrome</option><option value="opera">Opera</option><option value="edge">Microsoft Edge</option>

126|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms</select></p>

The <option> tag represents a single entry in the corresponding <select> control. The entire list
appears when the visitor taps or clicks over the control, as shown in Figure 27.

Figure 27. The select form element.

The first entry in the list is selected by default. To change this behavior, you can add the selected
attribute to another entry so it will be selected when the page loads.
The radio input type is similar to the <select> control, but instead of a dropdown list, it shows
all the entries so the visitor can mark one of them. Results of the following code are shown in
Figure 28.
<p>Favorite Browser:</p><p><input type="radio" id="browser-firefox" name="browser" value="firefox" checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="radio" id="browser-chrome" name="browser" value="chrome"><label for="browser-chrome">Google Chrome</label></p><p><input type="radio" id="browser-opera" name="browser" value="opera"><label for="browser-opera">Opera</label>
</p>
<p>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

127

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<input type="radio" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p>

Figure 28. Input elements of type radio.

Note that all the radio input types in the same group have the same name attribute. Each of themis exclusive, so the corresponding value attribute for the chosen entry will be the one associatedwith the shared name attribute. The checked attribute works like the selected attribute of the<select> control. It marks the corresponding entry when the page loads for the first time. The<label> tag is especially useful for radio entries, because it allows the visitor to check an entry byclicking or tapping on the corresponding text in addition to the control itself.
Whereas radio controls are intended for selecting only a single entry of a list, the checkbox input
type lets the visitor check multiple entries:<p>Favorite Browser:</p><p><input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked><label for="browser-chrome">Google Chrome</label></p><p><input type="checkbox" id="browser-opera" name="browser" value="opera"><label for="browser-opera">Opera</label>
</p>

128

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms<p><input type="checkbox" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p>

Checkboxes also can use the checked attribute to make entries selected by default. Instead of theround controls of the radio input, checkbox are rendered as square controls, as shown in Figure
29.

Figure 29. The checkbox input type.

If more than one entry is selected, the browser will submit them with the same name, requiring
the backend developer to write specific code to properly read form data containing checkboxes.
To improve usability, input fields can be grouped together inside a <fieldset> tag:<fieldset><legend>Favorite Browser</legend><p><input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked><label for="browser-chrome">Google Chrome</label></p><p><input type="checkbox" id="browser-opera" name="browser" value="opera">

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

129

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup<label for="browser-opera">Opera</label></p><p><input type="checkbox" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p></fieldset>

The <legend> tag contains the text that is placed at the top of the frame the <fieldset> tag
draws around the controls (Figure 30).

Figure 30. Grouping elements with the fieldset tag.

The <fieldset> tag does not change how the field values are submitted to the server, but it lets
the frontend developer control the nested controls more easily. For example, setting the disabledattribute in a <fieldset> attribute will make all its inner elements unavailable to the visitor.

The hidden Element Type
There are situations where the developer wants to include information in the form that cannot be
manipulated by the visitor, that is, to submit a value chosen by the developer without presenting aform field where the visitor can type or change the value. The developer may want, for example,
to include an identification token for that particular form that does not need to be seen by thevisitor. A hidden form element is coded as in the following example:<input type="hidden" id="form-token" name="form-token" value="e730a375-b953-4393-847d2dab065bbc92">

The value of a hidden input field is usually added to the document at the server side, when130|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms

rendering the document. Hidden inputs are treated like ordinary fields when the browser sends
them to the server, which also reads them as ordinary input fields.

The File Input TypeIn addition to textual data, either typed or selected from a list, HTML forms can also submit
arbitrary files to the server. The file input type lets the visitor pick a file from the local filesystem and send it directly from the web page:<p><label for="attachment">Attachment:</label><br><input type="file" id="attachment" name="attachment"></p>Instead of a form field to write in or select a value from, the file input type shows a browse
button that will open a file dialog. Any file type is accepted by the file input type, but thebackend developer will probably restrict the allowed file types and their maximum size. The file
type verification can also be performed in the frontend by adding the accept attribute. To accept
only JPEG and PNG images, for example, the accept attribute should be accept="image/jpeg,
image/png".

Action Buttons
By default, the form is submitted when the visitor presses the Enter key at any input field. To
make things more intuitive, a submit button should be added with the submit input type:<input type="submit" value="Submit form">

The text in the value attribute is displayed on the button, as shown in Figure 31.

Figure 31. A standard submit button.

Another useful button to include in complex forms is the reset button, which clears the form andreturns it to its original state:<input type="reset" value="Clear form">

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

131Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Like the submit button, the text in the value attribute is used to label the button. Alternatively,the <button> tag can be used to add buttons to forms or anywhere else in the page. Unlike
buttons made with the <input> tag, the button element has a closing tag and the button label istheir inner content:<button>Submit form</button>

When inside a form, the default action for the button element is to submit the form. Like theinput buttons, the button’s type attribute can be switched to reset.

Form Action and Methods
The last step in writing an HTML form is to define how and to where the data should be sent.
These aspects depend on details in both the client and the server.
On the server side, the most common approach is to have a script file that will parse, validate, andprocess the form data according to the application’s purpose. For example, the backend developer
could write a script called receive_form.php to receive the data sent from the form. On theclient side, the script is indicated in the action attribute of the form tag:
<form action="receive_form.php">

The action attribute follows the same conventions as all HTTP addresses. If the script is in thesame hierarchy level of the page containing the form, it can be written without its path.
Otherwise, the absolute or the relative path must be supplied. The script should also generate theresponse to serve as a landing page, loaded by the browser after the visitor submits the form.
HTTP provides distinct methods for sending form data through a connection with the server. The
most common methods are get and post, which should be indicated in the method attribute of
the form tag:
<form action="receive_form.php" method="get">Or:<form action="receive_form.php" method="post">

In the get method, the form data is encoded directly in the request URL. When the visitor submits

132|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms

the form, the browser will load the URL defined in the action attribute with the form fields
appended to it.
The get method is preferred for small amounts of data, such as simple contact forms. However,the URL cannot exceed a few thousands characters, so the post method should be used whenforms contain large or non-textual fields, like images.
The post method makes the browser send the form data in the body section of the HTTP request.
While necessary for binary data that exceeds the size limit of a URL, the post method adds
unnecessary overhead to the connection when used in simpler textual forms, so the get method ispreferred in such cases.
The chosen method does not affect how the visitor interacts with the form. The get and post
methods are processed differently by the server-side script that receives the form.
When using the post method, it is also possible to change the MIME type of the form contents
with enctype form attribute. This affects how the form fields and values will be stacked together
in the HTTP communication with the server. The default value for enctype is application/xwww-form-urlencoded, which is similar to the format used in the get method. If the form
contains input fields of type file, the enctype multipart/form-data should be used instead.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

133

Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Guided Exercises
1. What is the correct way to associate a <label> tag to an <input> tag?

2. What input element type provides a slider control to pick a numerical value?

3. What is the purpose of the placeholder form attribute?

4. How could you make the second option in a select control selected by default?

134|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms

Explorational Exercises
1. How could you change a file input to make it accept only PDF files?

2. How could you inform the visitor about which fields in a form are required?

3. Put together three code snippets in this lesson in a single form. Make sure not to use the same
name or id attribute in multiple form controls.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

135Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

SummaryThis lesson covers how to create simple HTML forms to send data back to the server. At the clientside, HTML forms consist of standard HTML elements that are combined to build custom
interfaces. Moreover, forms must be configured to properly communicate with the server. The
lesson goes through the following concepts and procedures:• The <form> tag and basic form structure.
• Basic and special input elements.
• The role of special tags like <label>, <fieldset> and <legend>.
• Form buttons and actions.

136|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms

Answers to Guided Exercises
1. What is the correct way to associate a <label> tag to an <input> tag?
The for attribute of the <label> tag should contain the id of the corresponding <input> tag.
2. What input element type provides a slider control to pick a numerical value?
The range input type.
3. What is the purpose of the placeholder form attribute?
The placeholder attribute contains an example of visitor input that is visible when thecorresponding input field is empty.
4. How could you make the second option in a select control selected by default?
The second option element should have the selected attribute.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

137Web Development Essentials (030) (Version 1.0) | Topic 032: HTML Document Markup

Answers to Explorational Exercises
1. How could you change a file input to make it accept only PDF files?
The accept attribute of the input element should set to application/pdf.
2. How could you inform the visitor about which fields in a form are required?
Usually, the required fields are marked with an asterisk (*), and a brief note like “Fields
marked with * are required” is placed close to the form.
3. Put together three code snippets in this lesson in a single form. Make sure not to use the same
name or id attribute in multiple form controls.
<form action="receive_form.php" method="get"><h2>Personal Information</h2><label for="fullname">Full name:</label><p><input type="text" name="fullname" id="fullname"></p><p><label for="date">Date:</label><input type="date" name="date" id="date"></p><p>Favorite Browser:</p><p><input type="checkbox" id="browser-firefox" name="browser" value="firefox" checked><label for="browser-firefox">Mozilla Firefox</label></p><p><input type="checkbox" id="browser-chrome" name="browser" value="chrome" checked><label for="browser-chrome">Google Chrome</label></p><p><input type="checkbox" id="browser-opera" name="browser" value="opera"><label for="browser-opera">Opera</label>
</p>

138

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 032.4 HTML Forms<p><input type="checkbox" id="browser-edge" name="browser" value="edge"><label for="browser-edge">Microsoft Edge</label></p><p><input type="reset" value="Clear form"></p><p><input type="submit" value="Submit form"></p></form>Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

139Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Topic 033: CSS Content Styling140|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.1 CSS Basics

033.1 CSS Basics
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 033.1
Weight1
Key knowledge areas• Embedding CSS within an HTML document• Understand the CSS syntax• Add comments to CSS• Awareness of accessibility features and requirements
Partial list of the used files, terms and utilities• HTML style and type (text/css) attributes• <style>• <link>, including the rel (stylesheet), type (text/css) and src attributes
• ;
• /,/

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

141

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling033.1 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

033 CSS Content Styling

Objective:

033.1 CSS Basics

Lesson:1 of 1Introduction
All web browsers render HTML pages using default presentation rules that are practical andstraightforward, but not visually appealing. HTML by itself offers few features to write elaborate
pages based on modern user experience concepts. After writing simple HTML pages, you haveprobably realized they are unsightly when compared to well-designed pages found on theInternet. This is because, in modern HTML, the markup code intended for the structure andfunction of the elements in the document (i.e., the semantic content) is separate from the rules thatdefine how the elements should look (the presentation). The rules for presentation are written in adifferent language called Cascading Style Sheets (CSS). It lets you change almost all the document’svisual aspects, such as fonts, colors, and the placement of the elements along the page.
HTML documents are not, in most cases, intended to be displayed in a fixed layout like a PDF file.
Rather, HTML-based web pages will probably be rendered on a wide variety of screen sizes oreven be printed. CSS provides tunable options to ensure that the web page will be rendered asintended, adjusted to the device or application that opens it.

142|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.1 CSS Basics

Applying Styles
There are several ways to including CSS in an HTML document: write it directly in the element’stag, in a separate section of the page’s source code, or in an external file to be referenced by theHTML page.

The style Attribute
The simplest way to modify the style of a specific element is to write it directly in the element tag
using the style attribute. All visible HTML elements allow a style attribute, whose value may be
one or more CSS rules, also known as properties. Let’s start with a simple example, a paragraphelement:<p>My stylized paragraph</p>

The basic syntax of a customized CSS property is property: value, where property is theparticular aspect you want to change in the element and value defines the replacement for thedefault option made by the browser. Some properties apply to all elements and some properties
apply only to specific elements. Likewise, there are appropriate values to be used in each
property.
To change the color of our plain paragraph, for example, we use the color property. The color
property refers to the foreground color, that is, the color of the letters in the paragraph. The color
itself goes in the value part of the rule and it can be specified in many different formats, including
simple names like red, green, blue, yellow, etc. Thus, to make the letter of the paragraphpurple, add the customized property color: purple to the style attribute of the element:<p style="color: purple">My first stylized paragraph</p>

Other customized properties can go in the same style property, but they must be separated bysemicolons. If you want to make the font size larger, for example, add font-size: larger to thestyle property:<p style="color: purple; font-size: larger">My first stylized paragraph</p>

NOTE

It’s not necessary to add spaces around the colons and semicolons, but they canmake it easier to read the CSS code.

To see the result of these changes, save the following HTML in a file and then open it in a web

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

143

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Stylingbrowser (results are shown in Figure 32):<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS Basics</title></head><body><p style="color: purple; font-size: larger">My first stylized paragraph</p><p style="color: green; font-size: larger">My second stylized paragraph</p></body></html>Figure 32. A very simple visual change using CSS.

You can imagine every element in the page as a rectangle or a box whose geometric propertiesand decorations you can manipulate with CSS. The rendering mechanism uses two basic standard
concepts for element placement: block placement and inline placement. Block elements occupy all
the horizontal space of their parent element and are placed sequentially, from top to bottom.
Their height (their vertical dimension, not to be confused with their top position in the page)generally depends on the amount of content they have. Inline elements follow the left-to-rightmethod similar to Western written languages: elements are placed horizontally, from left to right,
until there is no more space in the right side, whereupon the element continues on a new line justunder the current one. Elements such as p, div, and section are placed as blocks by default,
whereas elements such as span, em, a, and single letters are placed inline. These basic placement
methods can be fundamentally modified by CSS rules.
The rectangle corresponding to the p element in the body of the sample HTML document will bevisible if you add the background-color property to the rule (Figure 33):
<p style="color: purple; font-size: larger; background-color: silver">My first stylized
paragraph</p>144|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.1 CSS Basics<p style="color: green; font-size: larger; background-color: silver">My second stylized
paragraph</p>

Figure 33. Rectangles corresponding to the paragraphs.

As you add new CSS customized properties to the style attribute, you’ll note that the overall code
starts to get cluttered. Writing too many CSS rules in the style attribute undermines theseparation of structure (HTML) and presentation (CSS). Moreover, you’ll soon realize that manystyles are shared among different elements and it is not wise to repeat them in every element.

CSS Rules
Rather than styling the elements directly in their style attributes, it is much more practical to tell
the browser about the entire collection of elements to which the custom style applies. We do it byadding a selector to the customized properties, matching elements by type, class, unique ID,
relative position, etc. The combination of a selector and corresponding customized
properties — also known as declarations — is called a CSS rule. The basic syntax of a CSS rule isselector { property: value }. As in the style attribute, properties separated by semicolons
can be grouped together, as in p { color: purple; font-size: larger }. This rule matches
every p element in the page and applies the customized color and font-size properties.
A CSS rule for a parent element will automatically match all its children elements. This means that
we could apply the customized properties to all text in the page, regardless of whether it is insideor outside a <p> tag, by using the body selector instead: body { color: purple; font-size:
larger }. This strategy frees us from writing the same rule again for all its children, but it may
be necessary to write additional rules to “undo” or to modify the inherited rules.

The style Tag
The <style> tag lets us write CSS rules inside the HTML page we want to style. It allows thebrowser to differentiate the CSS code from the HTML code. The <style> tag goes in the headsection of the document:<!DOCTYPE html><html>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

145

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling<head><meta charset="utf-8" /><title>CSS Basics</title><style type="text/css">p { color: purple; font-size: larger }</style></head><body><p>My first stylized paragraph</p><p>My second stylized paragraph</p></body></html>The type attribute tells the browser what kind of content is inside the <style> tag, i.e. its MIME
type. Because every browser that supports CSS assumes that the type of the <style> tag is
text/css by default, including the type attribute is optional. There is also a media attribute thatindicates the media — computer screens or printing, for example — to which the CSS rules in the<style> tag apply. By default, the CSS rules apply to any medium where the document isrendered.
As in HTML code, line breaks and code indentation do not change how the CSS rules areinterpreted by the browser. Writing:<style type="text/css">p { color: purple; font-size: larger }</style>has the exact same result as writing:<style type="text/css">p {color: purple;

146|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.1 CSS Basics

font-size: larger;}</style>The extra bytes used by the spaces and line-breaks make little difference in the final size of the
document and do not have a significant impact on page’s loading time, so the choice of layout is amatter of taste. Note the semicolon after the last declaration (font-size: larger;) of the CSS
rule. That semicolon is not mandatory, but having it there makes it easier to add anotherdeclaration in the next line without worrying about missing semicolons.
Having the declarations in separate lines also helps when you need to comment out a declaration.
Whenever you want to temporarily disable a declaration for troubleshooting reasons, forexample, you can enclose the corresponding line with /* and */:p {color: purple;/*
font-size: larger;
*/
}

or:
p {
color: purple;/* font-size: larger; */}Written like this, the font-size: larger declaration will be ignored by the browser. Be careful
to open and close the comments properly, otherwise the browser may be not able to interpret therules.
Comments are also useful to write reminders about the rules:/* Texts inside <p> are purple and larger */p {color: purple;
font-size: larger;}

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

147

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Reminders like the one in the example are expendable in stylesheets containing a small numberof rules, but they are essential to help navigate stylesheets with hundreds (or more) rules.
Even though the style attribute and the <style> tag are adequate for testing custom styles anduseful for specific situations, they are not commonly used. Instead, CSS rules are usually kept in a
separate file that can be referenced from the HTML document.

CSS in External FilesThe preferred method to associate CSS definitions with an HTML document is to store the CSS in a
separate file. This method offers two main advantages over the previous ones:• The same styling rules can be shared among distinct documents.
• The CSS file is usually cached by the browser, improving future loading times.
CSS files have the .css extension and, like HTML files, they can be edited by any plain text editor.
Unlike HTML files, CSS files have no top level structure built with hierarchical tags such as <head>or <body>. Rather, the CSS file is just a list of rules processed in sequential order by the browser.
The same rules written inside a <style> tag could instead go in a CSS file.
The association between the HTML document and the CSS rules stored in a file is defined in theHTML document only. To the CSS file, it does not matter whether elements matching its rules
exist, so there is no need to enumerate in the CSS file the HTML documents it is linked to. On theHTML side, every linked stylesheet will be applied to the document, just as if the rules were
written in a <style> tag.
The <link> HTML tag defines an external stylesheet to be used in the current document andshould go in the head section of the HTML document:<head><meta charset="utf-8" /><title>CSS Basics</title><link href="style.css" rel="stylesheet"></head>Now you can place the rule for the p element we used before into the style.css file, and theresults seen by the visitor to the web page will be the same. If the CSS file is not in the same
directory as the HTML document, specify its relative or full path in the href attribute. The <link>tag can refer to different types of external resources, so it is important to establish what

148|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.1 CSS Basics

relationship the external resource has with the current document. For external CSS files, therelationship is defined in rel="stylesheet".
The media attribute can be used in the same way as for the <style> tag: it indicates the media,
such as computer screens or printing, to which the rules in the external file should apply.
CSS can completely change an element, but it is still important to use the appropriate element forthe components of the page. Otherwise, assistive technologies such as screen-readers may not beable to identify the correct sections of the page.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

149

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Guided Exercises
1. What methods can be used to change the appearance of HTML elements using CSS?

2. Why is it not recommended to use the style attribute of the <p> tag if there are sibling
paragraphs that should look the same?

3. What is the default placement policy for placing a div element?

4. What attribute of the <link> tag indicates the location of an external CSS file?

5. What is the correct section to insert the link element inside an HTML document?

150|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.1 CSS Basics

Explorational Exercises
1. Why is it not recommended to use a <div> tag to identify a word in an ordinary sentence?

2. What happens if you start a comment with /* in the middle of a CSS file, but forget to close itwith */?

3. Write a CSS rule to draw an underline in all em elements of the document.

4. How can you indicate that a stylesheet from a <style> or <link> tag should be used only by
speech synthesizers?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

151

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

SummaryThis lesson covers the basic concepts of CSS and how to integrate it with HTML. Rules written in
CSS stylesheets are the standard method to change the appearance of HTML documents. CSS
allows us to keep the semantic content separate from the presentation policies. This lesson goes
through the following concepts and procedures:• How to change CSS properties using the style attribute.
• The basic CSS rule syntax.
• Using the <style> tag to embed CSS rules in the document.
• Using the <link> tag to incorporate external stylesheets to the document.

152|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.1 CSS Basics

Answers to Guided Exercises
1. What methods can be used to change the appearance of HTML elements using CSS?
Three basic methods: Write it directly in the element’s tag, in a separate section of the page’s
source code, or in an external file to be referenced by the HTML page.
2. Why is it not recommended to use the style attribute of the <p> tag if there are sibling
paragraphs that should look the same?
The CSS declaration will need to be replicated in the other <p> tags, which is time consuming,
increases the file size, and it is prone to errors.
3. What is the default placement policy for placing a div element?
The div element is treated as a block element by default, so it will occupy all the horizontal
space of its parent element and its height will depend on its contents.
4. What attribute of the <link> tag indicates the location of an external CSS file?
The href attribute.
5. What is the correct section to insert the link element inside an HTML document?
The link element should be in the head section of the HTML document.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

153

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content StylingAnswers to Explorational Exercises
1. Why it is not recommended to use a <div> tag to identify a word in an ordinary sentence?
The <div> tag provides a semantic separation between two distinct sections of the document
and interferes with accessibility tools when it is used for inline text elements.
2. What happens if you start a comment with /* in the middle of a CSS file, but forget to close itwith */?
All the rules after the comment will be ignored by the browser.
3. Write a CSS rule to draw an underline in all em elements of the document.
em { text-decoration: underline }orem { text-decoration-line: underline }4. How can you indicate that a stylesheet from a <style> or <link> tag should be used only by
speech synthesizers?
The value of its media attribute must be speech.

154|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Application

033.2 CSS Selectors and Style Application
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 033.2
Weight3
Key knowledge areas• Use selectors to apply CSS rules to elements• Understand CSS pseudo-classes• Understand rule order and precedence in CSS• Understand inheritance in CSS
Partial list of the used files, terms and utilities• element; .class; #id• a, b; a.class; a b;
• :hover, :focus• !important

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

155

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling033.2 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

033 CSS Content Styling

Objective:

033.2 CSS Selectors and Style Application

Lesson:1 of 1Introduction
When writing a CSS rule, we must tell the browser to which elements the rule applies. We do so by
specifying a selector: a pattern that can match an element or group of elements. Selectors come inmany different forms, which can be based on the element’s name, its attributes, its relative
placement in the document structure, or a combination of these characteristics.

Page-Wide Styles
One of the advantages of using CSS is that you do not need to write individual rules to elements
sharing the same style. An asterisk applies the rule to all elements in the web page, as shown in
the following example:* {color: purple;
font-size: large;
}

156

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Application

The * selector is not the only method to apply a style rule to all elements in the page. A selector
that simply matches an element by its tag name is called a type selector, so any HTML tag namesuch as body, p, table, em, etc., can be used as selectors. In CSS, the parent’s style is inherited by its
children elements. So, in practice, using the * selector has the same effect as applying a rule to thebody element:
body {
color: purple;
font-size: large;}

Furthermore, the cascading feature of CSS allows you to fine tune the inherited properties of anelement. You can write a general CSS rule that applies to all elements in the page, and then write
rules for specific elements or sets of elements.
If the same element matches two or more conflicting rules, the browser applies the rule from themost specific selector. Take the following CSS rules as an example:
body {
color: purple;
font-size: large;}li {
font-size: small;}

The browser will apply the color: purple and font-size: large styles to all elements inside
the body element. However, if there are li elements in the page, the browser will replace thefont-size: large style by the font-size: small style, because the li selector has a stronger
relationship with the li element than the body selector does.
CSS does not limit the number of equivalent selectors in the same stylesheet, so you can have two
or more rules using the same selector:li {
font-size: small;}li {
font-size: x-small;

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

157

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling}

In this case, both rules are equally specific to the li element. The browser cannot apply
conflicting rules, so it will choose the rule that comes later in the CSS file. To avoid confusion, therecommendation is to group together all properties that use the same selector.
The order in which the rules appear in the stylesheet affect how they are applied in the document,
but you can override this behavior by using an important rule. If, for any reason, you want tokeep the two separate li rules, but force the application of the first one instead of the second one,mark the first rule as important:li {
font-size: small !important;}li {
font-size: x-small;}

Rules marked with !important should be used with caution, because they break the natural
stylesheet cascading and make it harder to find and correct problems within the CSS file.

Restrictive Selectors
We saw that we can change certain inherited properties by using selectors matching specific tags.
However, we usually need to use distinct styles for elements of the same type.
Attributes of HTML tags can be incorporated into selectors to restrict the set of elements they referto. Suppose the HTML page you are working on has two types of unordered lists (<ul>): one isused at the top of the page as a menu to the sections of the website and the other type is used forconventional lists in the text body:<!DOCTYPE html><html><head><meta charset="utf-8" /><title>CSS Basics</title><link rel="stylesheet" href="style.css"></head><body>

158|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Application<ul><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul><div id="content"><p>The three rocky planets of the solar system are:</p><ul><li>Mercury</li><li>Venus</li><li>Earth</li><li>Mars</li></ul><p>The outer giant planets made most of gas are:</p><ul><li>Jupiter</li><li>Saturn</li><li>Uranus</li><li>Neptune</li></ul></div><!-- #content --><div id="footer"><ul><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul></div><!-- #footer --></body></html>By default, each list item has a black circle to its left. You may want to remove the circles from the
top menu list while leaving the circles in the other list. However, you cannot simply use the li
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

159

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Stylingselector because doing so will also remove the circles in the list inside the text body section. You
will need a way to tell the browser to modify only the list items used in one list, but not the other.
There are several ways to write selectors matching specific elements in the page. As mentioned
earlier, we will first see how to use the elements' attributes to do so. For this example inparticular, we can use the id attribute to specify the top list only.
The id attribute assigns a unique identifier to the corresponding element, which we can use as theselector part of the CSS rule. Before writing the CSS rule, edit the sample HTML file and add
id="topmenu" to the ul element used for the top menu:<ul id="topmenu"><li>Home</li><li>Articles</li><li>About</li></ul>There is already a link element in the head section of the HTML document pointing to thestyle.css stylesheet file in the same folder, so we can add the following CSS rules to it:
ul#topmenu {list-style-type: none}

The hash character is used in a selector, following an element, to designate an ID (without spaces
separating them). The tag name to the left of the hash is optional, as there will be no other elementwith the same ID. Therefore, the selector could be written just as #topmenu.
Even though the list-style-type property is not a direct property of the ul element, CSS
properties of the parent element are inherited by its children, so the style assigned to the ulelement will be inherited by its child li elements.
Not all elements have an ID by which they can be selected. Indeed, only a few key layout elements
in a page are expected to have IDs. Take the lists of planets used in the sample code, for instance.
Although it is possible to assign unique IDs for each individual repeated element like these, thismethod is not practical for longer pages with lots of contents. Rather, we can use the parent div
element’s ID as the selector to change the properties of its inner elements.
However, the div element is not directly related to HTML lists, so adding the list-style-type
property to it will have no effect on its children. Thus, to change the black circle in the lists inside
the content div to a hollow circle, we should use a descendant selector:
160|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Application#topmenu {list-style-type: none}#content ul {list-style-type: circle}

The #content ul selector is called a descendant selector because it matches only the ul elementsthat are children of the element whose ID is content. We can use as many levels of descendanceas necessary. For instance, using #content ul li would match only the li elements that aredescendants of ul elements that are descendants of the element whose ID is content. But in thisexample, the longer selector will have the same effect as using #content ul, because the lielements inherit the CSS properties set to their parent ul. Descendant selectors are an essential
technique as the page layout grows in complexity.
Let’s say that now you want to change the font-style property of the list items in the topmenu
list and in the list in the footer div to make them look oblique. You can’t simply write a CSS ruleusing ul as the selector, because it will also change the list items in the content div. So far, we havechanged CSS properties using one selector at a time, and this method can also be used for thistask:
#topmenu {font-style: oblique}#footer ul {font-style: oblique}

Separate selectors are not the only way to do it, though. CSS allow us to group together selectorsthat share one or more styles, using a list of selectors separated by commas:#topmenu, #footer ul {font-style: oblique}Grouping selectors eliminates the extra work of writing duplicate styles. Furthermore, you may
want to change the property again in the future and may not remember to change it in all thedifferent places.
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

161

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content StylingClassesIf you do not want to worry too much about the element hierarchy, you can simply add a class tothe set of elements you want to customize. Classes are similar to IDs, but instead of identifying
only a single element in the page, they can identify a group of elements sharing the samecharacteristics.
Take the sample HTML page we are working on, for instance. It’s unlikely that in real-world pages
we will find structures simple as that, so it would be more practical to select an element usingclasses only, or a combination of classes and descendancy. To apply the font-style: obliqueproperty to the menu lists using classes, first we need to add the class property to the elementsin the HTML file. We’ll do it first in the top menu:<ul id="topmenu" class="menu"><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul>

And then in the footer’s menu:<div id="footer"><ul class="menu"><li><a href="/">Home</a></li><li><a href="/articles">Articles</a></li><li><a href="/about">About</a></li></ul></div><!-- #footer -->With that, we can replace the selector group #topmenu, #footer ul by the class-based selector.menu:.menu {
font-style: oblique}

As with the ID-based selectors, adding the tag name to the left of the dot in class-based selectors is
optional. However, unlike IDs, the same class is supposed to be used in more than one element

162|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Applicationand they do not even need to be of the same type. Therefore, if the menu class is shared among
different element types, using the ul.menu selector would match only the ul elements having themenu class. Instead, using .menu as the selector will match any element having the menu class,regardless of its type.
Furthermore, elements can be associated to more than one class. We could differentiate between
the top and the bottom menu by adding an extra class to each one of them:<ul id="topmenu" class="menu top">

And in the footer’s menu:<ul class="menu footer">

When the class attribute has more than one class, they must be separated by spaces. Now, in
addition to the CSS rule shared between elements of the menu class, we can address the top andfooter menu using their corresponding classes:.menu {
font-style: oblique}.menu.top {font-size: large}.menu.footer {font-size: small}

Be aware that writing .menu.top differs from .menu .top (with a space between the words). The
first selector will match elements that have both menu and top classes, whereas the second will
match elements that have the top class and a parent element with the menu class.

Special Selectors
CSS selectors can also match dynamic states of elements. These selectors are particularly usefulfor interactive elements, such as hyperlinks. You may want the appearance of hyperlinks whenthe mouse pointer moves over them, to draw the visitor’s attention.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

163

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Back to our sample page, we could remove the underlines from the links in the top menu andshow a line only when the mouse pointer moves over the corresponding link. To do this, we firstwrite a rule to remove the underline from the links in the top menu:.menu.top a {text-decoration: none}

Then we use the :hover pseudo-class on those same elements to create a CSS rule that will apply
only when the mouse pointer is over the corresponding element:.menu.top a:hover {text-decoration: underline}

The :hover pseudo-class selector accepts all the CSS properties of conventional CSS rules. Other
pseudo-classes include :visited, which matches hyperlinks that have already been visited, and:focus, which matches form elements that have received focus.

164|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Application

Guided Exercises
1. Suppose an HTML page has a stylesheet associated to it, containing the two following rules:
p {color: green;}p {color: red;}

What color will the browser apply to the text inside the p elements?

2. What is the difference between using the ID selector div#main and #main?

3. Which selector matches all p elements used inside a div with ID attribute #main?

4. What is the difference between using the class selector p.highlight and .highlight?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

165

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Explorational Exercises
1. Write a single CSS rule that changes the font-style property to oblique. The rule mustmatch only a elements that are inside <div
id="sidebar"></div> or <ulclass="links"></ul>.

2. Suppose you want to change the style of the elements whose class attribute is set to article
reference, as in <p class="article reference">. However, the .article .reference
selector does not appear to alter their appearance. Why is the selector not matching theelements as expected?

3. Write a CSS rule to change the color property of all visited links in the page to red.

166|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Application

SummaryThis lesson covers how to use CSS selectors and how the browser decides what styles to apply toeach element. Being separate from the HTML markup, CSS provides many selectors to match
individual elements or groups of elements in the page. The lesson goes through the following
concepts and procedures:• Page wide styles and style inheritance.
• Styling elements by type.
• Using the element ID and class as the selector.
• Compound selectors.
• Using pseudo-classes to style elements dynamically.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

167

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content StylingAnswers to Guided Exercises
1. Suppose an HTML page has a stylesheet associated to it, containing the two following rules:
p {color: green;}p {color: red;}

What color will the browser apply to the text inside the p elements?
The color red. When two or more equivalent selectors have conflicting properties, the browser
will choose the last one.
2. What is the difference between using the ID selector div#main and #main?
The selector div#main matches a div element having the ID main, whereas the #main selector
matches the element having the ID main, regardless of its type.
3. Which selector matches all p elements used inside a div with ID attribute #main?
The selector #main p or div#main p.
4. What is the difference between using the class selector p.highlight and .highlight?
The selector p.highlight matches only the elements of type p having the class highlight,
whereas the .highlight selector matches all elements having the class highlight, regardlessof their type.

168|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.2 CSS Selectors and Style Application

Answers to Explorational Exercises
1. Write a single CSS rule that changes the font-style property to oblique. The rule mustmatch only a elements that are inside <div
id="sidebar"></div> or <ulclass="links"></ul>.
#sidebar a, ul.links a {font-style: oblique}

2. Suppose you want to change the style of the elements whose class attribute is set to article
reference, as in <p class="article reference">. However, the .article .reference
selector does not appear to alter their appearance. Why is the selector not matching theelements as expected?
The .article .reference selector will match the elements having the class reference thatare descendants of elements having the class article. To match elements having both
article and reference classes, the selector should be .article.reference (without the
space between them).
3. Write a CSS rule to change the color property of all visited links in the page to red.
a:visited {color: red;}

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

169Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling033.3 CSS Styling
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 033.3
Weight2
Key knowledge areas• Understand fundamental CSS properties• Understand units commonly used in CSS
Partial list of the used files, terms and utilities• px, %, em, rem, vw, vh• color, background, background-*, font, font-*, text-*, list-style, line-height170|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS Styling033.3 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

033 CSS Content Styling

Objective:

033.3 CSS Styling

Lesson:1 of 1Introduction
CSS provides hundreds of properties that can be used to modify the appearance of HTMLelements. Only experienced designers manage to remember most of them. Nevertheless, it ispractical to know the basic properties that are applicable to any element, as well as some elementspecific properties. This chapter covers some popular properties you are likely to use.

CSS Common Properties and Values
Many CSS properties have the same value type. Colors, for example, have the same numericalformat whether you are changing the font color or the background color. Similarly, the units
available to change the size of the font are also used to change the thickness of a border. However,the format of the value is not always unique. Colors, for example, can be entered in various
different formats, as we will see next.

ColorsChanging the color of an element is probably one of the first things designers learn to do with CSS.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

171

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

You can change the color of the text, the background color, the color of the border of elements,and more.
The value of a color in CSS can be written as a color keyword (i.e. a color name) or as a numericalvalue listing each color component. All common color names, such as black, white, red, purple,
green, yellow, and blue are accepted as color keywords. The entire list of color keywords
accepted by CSS is available at a W3C web page. But to have finer control over the color, you can
use the numerical value.

Color Keywords
We’ll use the color keyword first, because it’s simpler. The color property changes the color of
the text in the corresponding element. So to put all the text on the page in purple, you could write
the following CSS rule:* {color: purple;}

Numerical Color Values
Although intuitive, color keywords do not offer the complete range of possible colors in modern
displays. Web designers usually develop a color palette that employs custom colors, by assigning
specific values to the red, green, and blue components.
Each color component is an eight-bit binary number, ranging from 0 to 255. All three components
must be specified in the color mixture, and their order is always red, green, blue. Therefore, tochange the color for all the text in the page to red using RGB notation, use rgb(255,0,0):* {color: rgb(255,0,0);}

A component set to 0 means that the corresponding basic color is not used in the color mixture.
Percentages can also be used instead of numbers:* {color: rgb(100%,0%,0%);
}

172

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS Styling

The RGB notation is rarely seen if you use a drawing application to create layouts or just to pick its
colors. Rather, it is more common to see colors in CSS expressed as hexadecimal values. The color
components in hexadecimal also range from 0 to 255, but in a more succinct way, starting with ahash symbol # and using a fixed two-digit length for all components. The minimal value 0 is 00
and the maximum value 255 is FF, so the color red is #FF0000.

TIP

If the digits in each component of a hexadecimal color repeat, the second digit can beomitted. The color red, for example, can be written with a single digit for eachcomponent: #F00.

The following list shows the RGB and hexadecimal notation for some basic colors:
Color Keyword

RGB Notation

Hexadecimal Valueblack

rgb(0,0,0)#000000white

rgb(255,255,255)#FFFFFFred

rgb(255,0,0)#FF0000

purplergb(128,0,128)#800080green

rgb(0,128,0)#008000

yellow

rgb(255,255,0)#FFFF00

blue

rgb(0,0,255)#0000FF

Color keywords and the letters in hexadecimal color values are case-insensitive.

Color Opacity
In addition to opaque colors, it is possible to fill page elements with semi-transparent colors. The
opacity of a color can be set using a fourth component in the color value. Unlike the other color
components, where the values are integer numbers ranging from 0 to 255, the opacity is a fraction
ranging from 0 to 1.
The lowest value, 0, results in a completely transparent color, making it undistinguishable fromany other fully transparent color. The highest value, 1, results in a fully opaque color, which is thesame as the original color with no transparency at all.
When you use the RGB notation, specify colors with an opacity component through the rgba
prefix instead of rgb. Thus, to make the color red half-transparent, use rgba(255,0,0,0.5). Thea character stands for alpha channel, a term commonly used to specify the opacity component indigital graphics jargon.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

173

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

The opacity can also be set in the hexadecimal notation. Here, like the other color components, theopacity ranges from 00 to FF. Therefore, to make the color red half-transparent using
hexadecimal notation, use #FF000080.

BackgroundThe background color of single elements or of the entire page is set with the background-color
property. It takes the same values as the color property, either as keywords or using the
RGB/hexadecimal notation.
The background of HTML elements is not restricted to colors, though. With the backgroundimage property it is possible to use an image as the background. The accepted image formats are
all the conventional ones accepted by the browser, such as JPEG and PNG.
The path to the image should be specified using an url() designator. If the image you want to use
is in the same folder as the HTML file, it is enough to use only its filename:body {
background-image: url("background.jpg");}

In this example, the background.jpg image file will be used as the background image for theentire body of the page. By default, the background image is repeated if its size does not cover theentire page, starting from the top-left corner of the area corresponding to the rule’s selector. Thisbehavior can be modified with the background-repeat property. If you want the backgroundimage to be placed in the element’s area without repeating it, use the no-repeat value:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;}

You can also make the image repeat only in the horizontal direction (background-repeat:
repeat-x) or only in the vertical direction (background-repeat: repeat-y).

174|learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS Styling

Figure 34. Background placement using the background-repeat property.

TIP

Two or more CSS properties can be combined in a single property, called thebackground shorthand property. The background-image and background-repeat
properties, for example, can be combined in a single background property withbackground: no-repeat url("background.jpg").

A background image can also be placed in a specific position in the element’s area using thebackground-position property. The five basic positions are top, bottom, left, right andcenter, but the top-left position of the image can also be adjusted with percents:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;background-position: 30% 10%;}The percent for each position is relative to the corresponding size of the element. In the example,
the background image left side will be at 30% of the body’s width (usually the body is the entire
visible document) and the top side of the image will be at 10% of the body’s height.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

175

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Borders
Changing an element’s border is also a common layout customization made with CSS. The borderrefers to the line forming a rectangle around the element and has three basic properties: color,style and width.
The color of the border, defined with border-color, follows the same format we saw for theother color properties.
Borders can be traced in a style other than a solid line. You could, for example, use dashes for theborder with the property border-style: dashed. The other possible style values are:dottedA sequence of rounded dots
doubleTwo straight lines
grooveA line with a carved appearanceridge
A line with an extruded appearance
inset
An element that appears embedded
outsetAn element that appears embossed
The border-width property set the thickness of the border. Its value can be a keyword (thin,medium or thick) or a specific numerical value. If you prefer to use a numerical value, you will
also need to specify its corresponding unit. This is described next.

Unit Values
Sizes and distances in CSS can be defined in various ways. Absolute units are based on a fixed
number of screen pixels, so they are not so different from the fixed sizes and dimensions used inprinted media. There are also relative units, which are dynamically calculated from somemeasurement given by the media where the page is being rendered, like the available space oranother size written in absolute units.

176|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS Styling

Absolute Units
Absolute units are equivalent to their physical counterparts, like centimeters or inches. On
conventional computer screens, one inch will be 96 pixels wide. The following absolute units arecommonly used:in (inch)
1 in is equivalent to 2.54 cm or 96 px.
cm (centimeter)
1 cm is equivalent to 96 px / 2.54.
mm (millimeter)
1 mm is equivalent to 1 cm / 10.
px (pixel)
1 px is equivalent to 1 / 96th of an inch.
pt (point)
1pt is equivalent to 1 / 72th of an inch.
Keep in mind that the ratio of pixels to inch may vary. In high resolution screens, where pixels are
more densely packed, an inch will correspond to more than 96 pixels.

Relative Units
Relative units vary according to other measurements or to the viewport dimensions. The viewportis the area of the document currently visible in its window. In full screen mode, the viewportcorresponds to the device screen. The following relative units are commonly used:%
Percentage — it is relative to the parent element.
em
The size of the font used in the element.
rem
The size of the font used in the root element.
vw
1% of the viewport’s width.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

177

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Stylingvh
1% of the viewport’s height.
The advantage of using relative units is that you can create layouts that are adjustable bychanging only a few key sizes. For example, you can use the pt unit to set the font size in the bodyelement and the rem unit for the fonts in other elements. Once you change the size of font for the
body, all the other font sizes will adjust accordingly. Furthermore, using vw and vh to set thedimensions of page sections makes them adjustable to screens with different sizes.

Fonts and Text Properties
Typography, or the study of font types, is a very broad design subject, and CSS typography does
not lag behind. However, there are a few basic font properties that will meet the needs of mostusers learning CSS.
The font-family property sets the name of the font to be used. There is no guarantee that thechosen font will be available in the system where the page will be viewed, so this property may
have no effect in the document. Although it is possible to make the browser download and use thespecified font file, most web designers are happy using a generic font family in their documents.
The three most common generic font families are serif, sans-serif and monospace. Serif is thedefault font family in most browsers. If you prefer to use sans-serif for the entire page, add thefollowing rule to your stylesheet:* {font-family: sans-serif;}

Optionally, you can first set a specific font family name, followed by the generic family name:* {font-family: "DejaVu Sans", sans-serif;}

If the device rendering the page has that specific font family, the browser will use it. If not, it willuse its default font matching the generic family name. Browsers search for fonts in the order they
are specified in the property.
Anyone who has used a word processing application will also be familiar with three other fontadjustments: size, weight, and style. These three adjustments have CSS properties counterparts:

178|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS Stylingfont-size, font-weight, and font-style.
The font-size property accepts keyword sizes such as xx-small, x-small, small, medium,large, x-large, xx-large, xxx-large. These keywords are relative to the default font size usedby the browser. The keywords larger and smaller change the font size relative to the parent’s
element font size. You can also express the font size with numerical values, including the unit
after the value, or with percentages.
If you do not want to change the font size, but the distance between lines, use the line-heightproperty. A line-height of 1 will make the line height the same size of the font of the element,
which can make the text lines too close together. Therefore, a value greater than 1 is more
appropriate for texts. Like the font-size property, other units can be used together with thenumerical value.
The font-weight sets the thickness of the font with the familiar keywords normal or bold. The
keywords lighter and bolder change the font weight of the element relative to the font weightof its parent element.
The font-style property can be set to italic to select the italic version of the current fontfamily. The oblique value selects the oblique version of the font. These two options are almost
identical, but the italic version of a font is usually a little more narrow than the oblique version. Ifneither italic nor oblique versions of the font exist, the font will be artificially tilted by thebrowser.
There are other properties that change the way text is rendered in the document. You can, forexample, add an underline to some parts of the text you want to emphasize. First, use a <span>tag to delimit the text:<p>CSS is the <span class="under">proper mechanism</span> to style HTML documents.</p>

Then you can use the .under selector to change the text-decoration property:.under {text-decoration: underline;}

By default, all a (link) elements are underlined. If you want to remove it, use the none value forthe text-decoration of all a elements:a {Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

179Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Stylingtext-decoration: none;}

When reviewing content, some authors like to cross out incorrect or outdated parts of the text, sothat the reader will know the text has been updated and what has been removed. To do so, use theline-through value of the text-decoration property:.disregard {text-decoration: line-through;}Again, a <span> tag can be used to apply the style:<p>Netscape Navigator <span class="disregard">is</span> was one of the most popular Web
browsers.</p>

Other decorations may be specific to an element. The circles in bullet point lists can be customized
using the list-style-type property. To change them to squares, for example, use list-styletype: square. To simply remove them, set the value of list-style-type to none.

180|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS Styling

Guided Exercises
1. How could you add half-transparency to the color blue (RGB notation rgb(0,0,255)) in order
to use it in the CSS color property?

2. What color corresponds to the #000 hexadecimal value?

3. Given that Times New Roman is a serif font and that it will not be available in all devices,
how could you write a CSS rule to request Times New Roman while setting the serif genericfont family as a fallback?

4. How could you use a relative size keyword to set the font size of the element <pclass="disclaimer"> smaller in relation to its parent element?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

181

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Explorational Exercises
1. The background property is a shorthand to set more than one background-* property at once.
Rewrite the following CSS rule as a single background shorthand property.
body {
background-image: url("background.jpg");
background-repeat: repeat-x;}

2. Write a CSS rule for the element <div id="header"></div> that changes only its bottom
border width to 4px.

3. Write a font-size property that doubles the font size used in the page’s root element.

4. Double-spacing is a common text formatting feature in word processors. How could you set asimilar format using CSS?

182|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS Styling

SummaryThis lesson covers the application of simple styles to elements of an HTML document. CSS
provides hundreds of properties, and most web designers will need to resort to reference manuals
to remember them all. Nonetheless, a relatively small set of properties and values are used mostof the time, and it is important to know them by heart. The lesson goes through the following
concepts and procedures:• Fundamental CSS properties dealing with colors, backgrounds, and fonts.
• The absolute and relative units CSS can use to set sizes and distances, such as px, em, rem, vw,
vh, etc.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

183

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content StylingAnswers to Guided Exercises
1. How could you add half-transparency to the color blue (RGB notation rgb(0,0,255)) in order
to use it in the CSS color property?
Use the rgba prefix and add 0.5 as the fourth value: rgba(0,0,0,0.5).
2. What color corresponds to the #000 hexadecimal value?
The color black. The #000 hexadecimal value is a shorthand for #000000.
3. Given that Times New Roman is a serif font and that it will not be available in all devices,
how could you write a CSS rule to request Times New Roman while setting the serif genericfont family as a fallback?
* {font-family: "Times New Roman", serif;}

4. How could you use a relative size keyword to set the font size of the element <pclass="disclaimer"> smaller in relation to its parent element?
Using the smaller keyword:p.disclaimer {font-size: smaller;
}

184

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.3 CSS StylingAnswers to Explorational Exercises
1. The background property is a shorthand to set more than one background-* property at once.
Rewrite the following CSS rule as a single background shorthand property.
body {
background-image: url("background.jpg");
background-repeat: repeat-x;}

body {
background: repeat-x url("background.jpg");}

2. Write a CSS rule for the element <div id="header"></div> that changes only its bottom
border width to 4px.
#header {border-bottom-width: 4px;}

3. Write a font-size property that doubles the font size used in the page’s root element.
The rem unit corresponds to the font size used in the root element, so the property should be
font-size: 2rem.
4. Double-spacing is a common text formatting feature in word processors. How could you set asimilar format using CSS?
Set the line-height property to the value 2em, because the em unit corresponds to the fontsize of the current element.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

185

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling033.4 CSS Box Model and Layout
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 033.4
Weight2
Key knowledge areas• Define the dimension, position and alignment of elements in a CSS layout• Specify how text flows around other elements• Understand the document flow
• Awareness of the CSS grid
• Awareness of responsive web design• Awareness of CSS media queriesPartial list of the used files, terms and utilities• width, height, padding, padding-*, margin, margin-*, border, border-*• top, left, right, bottom• display: block | inline | flex | inline-flex | none
• position: static | relative | absolute | fixed | sticky• float: left | right | none
• clear: left | right | both | none

186|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

033.4 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

033 CSS Content Styling

Objective:

033.4 CSS Box Model and Layout

Lesson:1 of 1Introduction
Each visible element in an HTML document is rendered as a rectangular box. Thus, the term box
model descibes the approach CSS takes to modifying the visual properties of the elements. Likeboxes of different sizes, HTML elements can be nested inside container elements — usually thediv element — so they can be segregated in sections.
We can use CSS to modify the position of the boxes, from minor adjustments to drastic changes inthe disposition of the elements on the page. Besides the normal flow, the position for each box canbe based on the elements around it, either its relationship to its parent container or its
relationship to the viewport, which is the area of the page visible to the user. No single mechanism
meets all possible layout requirements, so you may require a combination of them.

Normal Flow
The default way the browser renders the document tree is called normal flow. The rectangles
corresponding to the elements are placed more or less in the same order they appear in the
document tree, relative to their parent elements. Nevertheless, depending on the element type, thecorresponding box may follow distinct positioning rules.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

187

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

A good way to understand the logic of the normal flow is to make the boxes visible. We can startwith a very basic page, having only three separate div elements, each one having a paragraphwith random text:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>CSS Box Model and Layout</title><link rel="stylesheet" href="style.css"></head><body><div id="first"><h2>First div</h2><p><span>Sed</span> <span>eget</span> <span>velit</span><span>id</span> <span>ante</span> <span>tempus</span><span>porta</span> <span>pulvinar</span> <span>et</span><span>ex.</span></p></div><!-- #first --><div id="second"><h2>Second div</h2><p><span>Fusce</span> <span>vitae</span> <span>vehicula</span><span>neque.</span> <span>Etiam</span> <span>maximus</span><span>vulputate</span> <span>neque</span> <span>eu</span><span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span><span>felis</span> <span>eget</span> <span>eleifend</span><span>aliquam,</span> <span>dui</span> <span>dolor</span><span>bibendum</span> <span>leo.</span></p></div><!-- #second --><div id="third"><h2>Third div</h2><p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span><span>elementum.</span> <span>Morbi</span> <span>vulputate</span><span>pretium</span> <span>arcu,</span> <span>sed</span><span>faucibus.</span></p></div><!-- #third --></body></html>188|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

Every word is in a span element so we can style the words and see how they are treated as boxes
as well. To make the boxes visible, we must edit the stylesheet file style.css referenced by theHTML document. The following rules will do what we need:* {font-family: sans;font-size: 14pt;}
div {border: 2px solid #00000044;}#first {background-color: #c4a000ff;}#second {background-color: #4e9a06ff;}#third {background-color: #5c3566da;}h2 {background-color: #ffffff66;}
p {background-color: #ffffff66;}
span {
background-color: #ffffffaa;}

The result appears in Figure 35.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

189

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Figure 35. The basic element flow is from top to bottom and left to right.

Figure 35 shows that each HTML tag has a corresponding box in the layout. The div, h2, and pelements extend to the width of their parent element. For instance, the parent element of the div
elements is the body element, so they extend to the width of the body, while the parent of each h2
and p element is its corresponding div. The boxes that extend to the width of their parent element
are called block elements. Some of the most common HTML tags rendered as blocks are h1, h2, h3,p, ul, ol, table, li, div, section, form, and aside. Sibling block elements — block elements
sharing the same immediate parent element — are stacked inside their parent from top to bottom.

NOTE

Some block elements are not intended to be used as containers for other blockelements. It is possible, for example, to insert a block element inside a h1 or pelement, but it is not considered best practice. Rather, the designer should use anappropriate tag as a container. Common container tags are div, section, andaside.

Besides text itself, elements such as h1, p, and li expect only inline elements as children. Like
most Western scripts, inline elements follow the left-to-right flow of text. When there is no
remaining room in the right side, the flow of inline elements continues in the next line, just liketext. Some common HTML tags treated as inline boxes are span, a, em, strong, img, input, andlabel.
In our sample HTML page, every word inside the paragraphs was surrounded by a span tag, sothey could be highlighted with a corresponding CSS rule. As shown in the image, each spanelement is placed horizontally, from left to right, until there is no more room in the parent
element.
The height of the element depends on its contents, so the browser adjusts the height of a container
element to accommodate its nested block elements or lines of inline elements. However, some CSS

190|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

properties affect a box’s shape, its position, and the placement of its inner elements.
The margin and padding properties affect all box types. If you do not set these properties
explicitly, the browser sets some of them using standard values. As seen in Figure 35, the h2 and pelements were rendered with a gap between them. These gaps are the top and bottom margins thebrowser adds to these elements by default. We can remove them by modifying the CSS rules forthe h2 and p selectors:
h2 {background-color: #ffffff66;
margin: 0;}
p {background-color: #ffffff66;
margin: 0;}

The result appears in Figure 36.

Figure 36. The margin property can change or remove margins from elements.

The body element also, by default, has a small margin that creates a gap surrounding. This gap
can also be removed using the margin property.
While the margin property defines the gap between the element and its surroundings, thepadding property of the element defines the internal gap between the container’s limits and its
child elements. Consider the h2 and p elements inside each div in the sample code, for example.
We could use their margin property to create a gap to the borders of the corresponding div, but it
is simpler to change the padding property of the container:#second {background-color: #4e9a06ff;
padding: 1em;

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

191

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling}

Only the rule for the second div was modified, so the results (Figure 37) show the difference
between the second div and the other div containers.

Figure 37. Different div containers can have different paddings.

The margin property is a shorthand for four properties controlling the four sides of the box:
margin-top, margin-right, margin-bottom, and margin-left. When margin is assigned asingle value, as in the examples so far, all four margins of the box use it. When two values are
written, the first defines the top and bottom margins, while the second defines the right and left
margins. Using margin: 1em 2em, for example, defines a gap of 1 em for the top and bottom
margins and a gap of 2 em for the right and left margins. Writing four values sets the margins forthe four sides in a clockwise direction, beginning at the top. The different values in the shorthandproperty are not required to use the same units.
The padding property is a shorthand as well, following the same principles as the margin
property.
In their default behaviour, block elements stretch to fit the available width. But this is notmandatory. The width property can set a fixed horizontal size to the box:
#first {background-color: #c4a000ff;
width: 6em;}

The addition of width: 6em to the CSS rule shrinks the first div horizontally, leaving a blankspace to its right side (Figure 38).

192|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

Figure 38. The width property changes the horizontal width of the first div.

Instead of leaving the first div aligned to the left, we may want to center it. Centering a box isequivalent to setting margins of the same size on both sides, so we can use the margin property tocenter it. The size of the available space may vary, so we use the auto value to the left and rightmargins:#first {background-color: #c4a000ff;
width: 6em;
margin: 0 auto;}

The left and right margins are automatically computed by the browser and the box will becentered (Figure 39).

Figure 39. The margin property is used to center the first div.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

193

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

As shown, making a block element narrower does not make the remaining space available to thenext element. The natural flow is still preserved, as if the narrower element still occupies all theavailable width.

Customizing Normal Flow
Normal flow is simple and sequential. CSS also lets you break normal flow and position elements
in very specific ways, even overriding the scrolling of the page if you want. We’ll look at several
ways to control the positioning of elements in this section.

Floating Elements
It is possible to make sibling block elements share the same horizontal space. One way to do so isthrough the float property, which removes the element from the normal flow. As its namesuggests, the float property makes the box float over the block elements coming after, so they
will be rendered as if they were under the floated box. To make the first div float to the right, add
float: right to the corresponding CSS rule:#first {background-color: #c4a000ff;
width: 6em;
float: right;}

The automatic margins are ignored in a floated box, so the margin property can be removed.
Figure 40 shows the result of the floating the first div to the right.

Figure 40. The first div is floating and is not part of the normal flow.

By default, all block elements coming after the floated element will go under it. Therefore, given
enough height, the floated box will cover all remaining block elements.
Although a floating element goes above other block elements, the inline contents inside thefloating element’s container wrap around the floating element. The inspiration for this comes

194|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

from magazine and newspaper layouts, which often wrap text around an image, for example.
The previous image shows how the first div covers the second div and part of the third div.
Assume we want the first div to float over the second div, but not the third. The solution is toinclude the clear property in the CSS rule corresponding to the third div:
#third {background-color: #5c3566da;clear: right;}

Setting the clear property to right makes the corresponding element skip any previous
elements floated to the right, resuming normal flow (Figure 41).

Figure 41. The clear property returns to normal flow.

Likewise, if a previous element floated to the left, you can use clear: left to resume normal
flow. When you have to skip floated elements on both the left and the right, use clear: both.

Positioning Boxes
In normal flow, each box goes after the boxes coming before it in the document tree. The previous
sibling elements “push” the elements coming after them, moving them to the right anddownwards inside their parent element. The parent element may have its own siblings doing thesame thing to it. It is like placing tiles side by side in a wall, beginning at the top.
This method of positioning the boxes is called static, and is the default value for the CSS position
property. Other than defining margins and padding, there is no way to reposition a static box in
the page.
Like the tiles in the wall analogy, static placement is not mandatory. As with tiles, you can place
the boxes anywhere you want, even covering other boxes. To do so, assign the position property
to one of the following values:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

195

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

relative
The element follows the normal flow of the document, but it can use the top, right, bottom,
and left properties to set offsets relative to its original static position. The offsets can also be
negative. The other elements remain in their original places, as if the relative element is still
static.
absolute
The element ignores the normal flow of the other elements and positions itself on the page by
the top, right, bottom, and left properties. Their values are relative to the document’s bodyor to a non-static parent container.
fixed
The element ignores the normal flow of the other elements and positions itself by the top,right, bottom, and left properties. Their values are relative to the viewport (i.e., the screen
area where the document is shown). Fixed elements do not move as the visitor scrolls throughthe document, but resemble a sticker fixed on the screen.
stickyThe element follows the normal flow of the document. However, instead of going off the
viewport when the document scrolls, it will stop at the position set by the top, right, bottom,
and left properties. If the top value is 10px, for example, the element will stop scrollingunder the top part of the viewport when it reaches 10 pixels from the top limit of the viewport.
When that happens, the rest of the page continues to scroll, but the sticky element behaves likea fixed element in that position. It will go back to its original position when the document scroll
back to its position in the viewport. Sticky elements are commonly used nowadays to create top
menus that always be visible.
Positions that can use the top, right, bottom, and left properties are not required to use themall. If you set both the top and height properties of an absolute element, for example, thebrowser implicitly calculates its bottom property (top + height = bottom).

The display Property
If the order given by the normal flow is not an issue in your design, but you want to change how
the boxes align themselves in the page, modify the display property of the element. The display
property can even make the element completely disappear from the rendered document, by
setting display: none. This is useful when you want to show the element later using JavaScript.
The display property can also, for example, make a block element behave like an inline element(display: inline). Doing so is not considered good practice, though. Better methods exist toplace container elements side by side, such as the flexbox model.
196|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

The flexbox model was invented to overcome the limitations of floats and to eliminate theinappropriate use of tables to structure the page layout. When you set the display property of acontainer element to flex to turn it into a flexbox container, its immediate children will behave
more or less like cells in a table row.

TIP

If you want even more control over the placement of the elements on the page, take alook at the CSS grid feature. The grid is a powerful system based on rows and columns
to create elaborate layouts.

To test the flex display, add a new div element to the example page and make it the container forthe three existing div elements:<div id="container"><div id="first"><h2>First div</h2><p><span>Sed</span> <span>eget</span> <span>velit</span><span>id</span> <span>ante</span> <span>tempus</span><span>porta</span> <span>pulvinar</span> <span>et</span><span>ex.</span></p></div><!-- #first --><div id="second"><h2>Second div</h2><p><span>Fusce</span> <span>vitae</span> <span>vehicula</span><span>neque.</span> <span>Etiam</span> <span>maximus</span><span>vulputate</span> <span>neque</span> <span>eu</span><span>lobortis.</span> <span>Phasellus</span> <span>condimentum,</span><span>felis</span> <span>eget</span> <span>eleifend</span><span>aliquam,</span> <span>dui</span> <span>dolor</span><span>bibendum</span> <span>leo.</span></p></div><!-- #second --><div id="third"><h2>Third div</h2><p><span>Pellentesque</span> <span>ornare</span> <span>ultricies</span><span>elementum.</span> <span>Morbi</span> <span>vulputate</span><span>pretium</span> <span>arcu,</span> <span>sed</span><span>faucibus.</span></p></div><!-- #third --></div><!-- #container -->Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

197

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Add the following CSS rule to the stylesheet to turn the container div into a flexbox container:#container {display: flex;}

The result is the three inner div elements rendered side by side (Figure 42).

Figure 42. The flexbox model creates a grid.

Using the value inline-flex instead of flex has basically the same result, but makes thechildren behave more like inline elements.

Responsive Design
We know that CSS provides properties that adjust the sizes of elements and fonts relative to theavailable screen area. However, you may want to go further and use a different design fordifferent devices: for example, desktop systems versus devices with screens dimensions under acertain size. This approach is called responsive web design, and CSS provides methods called media
queries to make it possible.
In the previous example, we modified the page layout to place the div elements side by side incolumns. That layout is suitable for larger screens, but it will be too cluttered in smaller screens.
To solve this problem, we can add a media query to the stylesheet matching only screens with atleast 600px in width:@media (min-width: 600px){#container {display: flex;
}
}

198

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

The CSS rules inside the @media directive will be used only if the criteria in parenthesis issatisfied. In this example, if the viewport width is less than 600px, the rule will not be applied tothe container div and its children will be rendered as conventional div elements. The browser reevaluates the media queries every time the viewport dimension changes, so the layout can bechanged in real time while resizing the browser window or rotating the smartphone.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

199

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

Guided Exercises
1. If the position property is not modified, what positioning method will be used by thebrowser?

2. How can you make sure an element’s box will be rendered after any previously floatedelements?

3. How can you use the margin shorthand property to set the top/bottom margins to 4px and theright/left margins to 6em?

4. How can you horizontally center a static container element with fixed width on the page?

200|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

Explorational Exercises
1. Write a CSS rule matching the element <div class="picture"> so the text inside its
following block elements settles toward its right side.

2. How does the top property affect a static element relative to its parent element?

3. How does changing the display property of an element to flex affect its placement in thenormal flow?

4. What CSS feature allows you to use a separate set of rules depending on the dimensions of thescreen?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

201

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content Styling

SummaryThis lesson covers the CSS box model and how we can customize it. In addition to the normal flowof the document, the designer can make use of different positioning mechanisms to implement acustom layout. The lesson goes through the following concepts and procedures:• The normal flow of the document.
• Adjustments to the margin and padding of an element’s box.
• Using the float and clear properties.
• Positioning mechanisms: static, relative, absolute, fixed and sticky.
• Alternative values for the display property.
• Responsive design basics.

202|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 033.4 CSS Box Model and Layout

Answers to Guided Exercises
1. If the position property is not modified, what positioning method will be used by thebrowser?
The static method.
2. How can you make sure an element’s box will be rendered after any previously floatedelements?
The clear property of the element should be set to both.
3. How can you use the margin shorthand property to set the top/bottom margins to 4px and theright/left margins to 6em?
It can be either margin: 4px 6em or margin: 4px 6em 4px 6em.
4. How can you horizontally center a static container element with fixed width on the page?
Using the auto value in its margin-left and margin-right properties.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

203

Web Development Essentials (030) (Version 1.0) | Topic 033: CSS Content StylingAnswers to Explorational Exercises
1. Write a CSS rule matching the element <div class="picture"> so the text inside its
following block elements settles toward its right side.
.picture { float: left; }2. How does the top property affect a static element relative to its parent element?
The top property does not apply to static elements.
3. How does changing the display property of an element to flex affect its placement in thenormal flow?
The placement of the element itself does not change, but its immediate child elements will berendered side by side horizontally.
4. What CSS feature allows you to use a separate set of rules depending on the dimensions of thescreen?
Media queries allow the browser to verify the viewport dimensions before applying a CSS rule.

204|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) |Topic 034: JavaScript Programming

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

205

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

034.1 JavaScript Execution and Syntax
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 034.1
Weight1
Key knowledge areas• Run JavaScript within an HTML document• Understand the JavaScript syntax• Add comments to JavaScript code
• Access the JavaScript console• Write to the JavaScript console
Partial list of the used files, terms and utilities• <script>, including the type (`text/javascript) and src attributes• ;• //, /* */• console.log

206|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.1 JavaScript Execution and Syntax

034.1 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

034 JavaScript Programming

Objective:

034.1 JavaScript Execution and Syntax

Lesson:1 of 1Introduction
Web pages are developed using three standard technologies: HTML, CSS, and JavaScript.
JavaScript is a programming language that lets the browser dynamically update website content.
The JavaScript is usually executed by the same browser used to view a webpage. This means that,similar to CSS and HTML, the exact behavior of any code you write might differ between
browsers. But most common browsers adhere to the ECMAScript specification. This is a standard
that unifies JavaScript usage in the web, and will be the basis for the lesson, together with the
HTML5 specification, which specifies how JavaScript needs to be put into a webpage for a browser
to execute it.

Running JavaScript in the Browser
To execute JavaScript, the browser needs to obtain the code either directly, as part of the HTMLthat makes up the web page, or as a URL that indicates a location for a script to be executed.
The following example shows how to include code directly in the HTML file:<html>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

207

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming<head></head><body><h1>Website Headline</h1><p>Content</p><script>
console.log('test');</script></body></html>The code is wrapped between <script> and </script> tags. Everything included in these tags
will be executed by the browser directly when loading the page.
The position of the <script> element within the page dictates when it will be executed. An HTML
document is parsed from top to bottom, with the browser deciding when to display elements on
the screen. In the example just shown, the <h1> and <p> tags of the website are parsed, and likely
displayed, before the script runs. If the JavaScript code within the <script> tag would take very
long to execute, the page would still display without any problem. If, however, the script had beenplaced above the other tags, the web page visitor would have to wait until the script finishes
executing before seeing the page. For this reason, <script> tags are usually placed in one of twoplaces:• At the very end of the HTML body, so that the script is the last thing that gets executed. Do thiswhen the code adds something to the page that would not be useful without the content. An
example would be adding functionality to a button, as the button has to exist for thefunctionality to make sense.
• Inside the <head> element of the HTML. This ensures that the script is executed before theHTML body is parsed. If you want to change the loading behavior of the page, or havesomething that needs to be executed while the page is still not fully loaded, you can put the
script here. Also, if you have multiple scripts that depend on a particular script, you can putthat shared script in the head to make sure it’s executed before other scripts.
For a variety of reasons, including manageability, it is useful to put your JavaScript code into
separate files that exist outside of your HTML code. External JavaScript files are included using a<script> tag with a src attribute, as follows:<html><head>

208|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.1 JavaScript Execution and Syntax<script src="/button-interaction.js"></script></head><body></body></html>The src tag tells the browser the location of the source, meaning the file containing the JavaScript
code. The location can be a file on the same server, as in the example above, or any web-accessible
URL such as https://www.lpi.org/example.js. The value of the src attribute follows thesame convention as the import of CSS or image files, in that it can be relative or absolute. Upon
encountering a script tag with the src attribute, the browser will then attempt to obtain thesource file by using an HTTP GET request, so external files need to be accessible.
When you use the src attribute, any code or text that is placed between the <script>…
</script> tags is ignored, according to the HTML specification.
<html><head><script src="/button-interaction.js">
console.log("test"); // <-- This is ignored</script></head><body></body></html>There are other attributes you can add to the script tag to further specify how the browser
should get the files, and how it should handle them afterwards. The following list goes into detailabout the more important attributes:
async
Can be used on script tags and instructs the browser to fetching the script in the background,so as not to block the page load process. The page load will still be interrupted while after thebrowser obtains the script, because the browser has to parse it, which is done immediately
once the script has been fetched completely. This attribute is Boolean, so writing the tag like<script async src="/script.js"></script> is sufficient and no value has to beprovided.
defer
Similar to async, this instructs the browser not to block the page load process while fetching
the script. Rather than that, the browser will defer parsing the script. The browser will wait
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

209

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

until the entire HTML document has been parsed and only then it will parse the script, before
announcing that the document has been to be completely loaded. Like async, defer is a
Boolean attribute and is used in the same way. Since defer implies async, it is not useful tospecify both tags together.

NOTE

When a page is completely parsed, the browser indicates that it is ready todisplay by triggering a DOMContentLoaded event, when the visitor will be able
to see the document. Thus, the JavaScript included in a <head> event always hasa chance to act on the page before it is displayed, even if you include the defer
attribute.

type
Denotes what type of script the browser should expect within the tag. The default is JavaScript(type="application/javascript"), so this attribute isn’t necessary when including
JavaScript code or pointing to a JavaScript resource with the src tag. Generally, all MIME types
can be specified, but only scripts that are denoted as JavaScript will be executed by thebrowser. There are two realistic use cases for this attribute: telling the browser not to executethe script by setting type to an arbitrary value like template or other, or telling the browserthat the script is an ES6 module. We don’t cover ES6 modules in this lesson.

WARNING

When multiple scripts have the async attribute, they will be executed in theorder they finish downloading, not in the order of the script tags in the
document. The defer attribute, on the other hand, maintains the order of thescript tags.

Browser Console
While usually executed as part of a website, there is another way of executing JavaScript: throughthe browser console. All modern desktop browsers provide a menu through which you can
execute JavaScript code in the browser’s JavaScript engine. This is usually done for testing newcode or to debug existing websites.
There are multiple ways to access the browser console, depending on the browser. The easiest
way is through keyboard shortcuts. The following are the keyboard shorcuts for some of thebrowsers currently in use:
ChromeCtrl + Shift + J ( Cmd + Option + J on Mac)

FirefoxCtrl + Shift + K ( Cmd + Option + K on Mac)210|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.1 JavaScript Execution and Syntax

SafariCtrl + Shift + ? ( Cmd + Option + ? on Mac)You can also right-click on a webpage and select the “Inspect” or “Inspect Element” option to open
the inspector, which is another browser tool. When the inspector opens, a new panel will appear.
In this panel, you can select the “Console” tab, which will bring up the browser console.
Once you pull up the console, you can execute JavaScript on the page by typing the JavaScript
directly into the input field. The result of any executed code will be shown in a separate line.

JavaScript Statements
Now that we know how to start executing a script, we will cover the basics of how a script is
actually executed. A JavaScript script is a collection of statements and blocks. An example
statement is console.log('test'). This instruction tells the browser to output the word test to
the browser console.
Every statement in JavaScript is terminated by a semicolon (;). This tells the browser that thestatement is done and a new one can be started. Consider the following script:
var message = "test"; console.log(message);

We have written two statements. Every statement is terminated either by a semicolon or by theend of the script. For readability purposes, we can put the statements on separate lines. This way,
the script could also be written as:var message = "test";
console.log(message);This is possible because all whitespace between statements, such as a space, a newline, or a tab, isignored. Whitespace can also often be put between individual keywords within statements, but
this will be further explained in an upcoming lesson. Statements can also be empty, or comprised
only of whitespace.
If a statement is invalid because it has not been terminated by a semicolon, ECMAScript makes anattempt to automatically insert the proper semicolons, based on a complex set of rules. The mostimportant rule is: If an invalid statement is composed of two valid statements separated by anewline, insert a semicolon at the newline. For instance, the following code does not form a valid
statement:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

211

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

console.log("hello")
console.log("world")

But a modern browser will automatically execute it as if it were written with the proper
semicolons:console.log("hello");console.log("world");

Thus, it is possible to omit semicolons in certain cases. However, as the rules for automatic
semicolon insertion are complex, we advise you always to properly terminate your statements toavoid unwanted errors.

JavaScript Commenting
Big scripts can get quite complicated. You might want to comment on what you are writing, tomake the script easier to read for other people, or for yourself in the future. Alternatively, you
might want to include meta information in the script, such as copyright information, or
information about when the script was written and why.
To make it possible to include such meta information, JavaScript supports comments. A developer
can include special characters in a script that denote certain parts of it as a comment, which will
be skipped on execution. The following is a heavily commented version of the script we saw
earlier.
/*This script was written by the author of this lesson in May, 2020.
It has exactly the same effect as the previous script, but includes comments.
*/// First, we define a message.
var message = "test";
console.log(message); // Then, we output the message to the console.

Comments are not statements and do not need to be terminated by a semicolon. Instead, they
follow their own rules for termination, depending on the way the comment is written. There are
two ways to write comments in JavaScript:

212|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.1 JavaScript Execution and Syntax

Multi-line comment
Use /* and */ to signal the start and end of a multi-line comment. Everything after /*, until thefirst occurrence of */ is ignored. This kind of comment is generally used to span multiple lines,
but it can also be used for single lines, or even within a line, like so:
console.log(/* what we want to log: */ "hello world")

Because the goal of comments is generally to increase the readability of a script, you should
avoid using this comment style within a line.
Single-line comment
Use // (two forward slashes) to comment out a line. Everything after the double-slash on thesame line is ignored. In the example shown earlier, this pattern is first used to comment anentire line. After the console.log(message); statement, it is used to write a comment on therest of the line.
In general, single-line comments should be used for single lines, and multi-line comments for
multiple lines, even if it possible to use them in other ways. Comments within a statement should
be avoided.
Comments can also be used to temporarily remove lines of actual code, as follows:// We temporarily want to use a different message// var message = "test";
var message = "something else";

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

213

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Guided Exercises
1. Create a variable called ColorName and assign the value RED to it.

2. Which of the following scripts are valid?
console.log("hello")
console.log("world");
console.log("hello");console.log("world");// console.log("hello")
console.log("world");
console.log("hello");console.log("world") //;console.log("hello"); /*console.log("world") */214|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.1 JavaScript Execution and Syntax

Explorational Exercises
1. How many JavaScript statements can be written on a single line without using a semicolon?

2. Create two variables named x and y, then print their sum to the console.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

215

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Summary
In this lesson we learned different ways of executing JavaScript, and how to modify the script
loading behavior. We also learned the basic concepts of script composition and commenting, andhave learned to use the console.log() command.
HTML used in this lesson:<script>
The script tag can be used to include JavaScript directly or by specifying a file with the src
attribute. Modify how the script is loaded with the async and defer attributes.
JavaScript concepts introduced in this lesson:;
A semicolon is used to separate statements. Semicolons can sometimes — but should not
be — ommitted.
//, /*…*/
Commenting can be used to add comments or meta information to a script file, or to prevent
statements from being executed.
console.log("text")
The console.log() command can be used to output text to the browser console.

216|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.1 JavaScript Execution and Syntax

Answers to Guided Exercises
1. Create a variable called ColorName and assign the value RED to it.
var ColorName = "RED";

2. Which of the following scripts are valid?
console.log("hello")
console.log("world");

Invalid: The first console.log() command
isn’t properly terminated, and the line as awhole doesn’t form a valid statement.

console.log("hello");console.log("world");

Valid: Each statement is properly terminated.

// console.log("hello")
console.log("world");

Valid: The entire code is ignored because it is acomment.

console.log("hello");console.log("world") //;Invalid: The last statement is missing asemicolon. The semicolon at the very end isignored because it is commented.

console.log("hello"); /*console.log("world") */Valid: A valid statement is followed bycommented code, which gets ignored.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

217

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Answers to Explorational Exercises
1. How many JavaScript statements can be written on a single line without using a semicolon?
If we are at the end of a script, we can write one statement and it will be terminated by the endof the file. Otherwise, you cannot write a statement without a semicolon with the syntax thatyou learned so far.
2. Create two variables named x and y, then print their sum to the console.
var x = 5;
var y = 10;
console.log(x+y);

218|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

034.2 JavaScript Data Structures
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 034.2
Weight3
Key knowledge areas• Define and use variables and constants• Understand data types• Understand type conversion/coercion• Understand arrays and objects• Awareness of the variable scope
Partial list of the used files, terms and utilities• =, +, -, *, /, %, --, ++, +=, -=, *=, /=• var, let, const• boolean, number, string, symbol• array, object• undefined, null, NaN

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

219

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

034.2 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

034 JavaScript Programming

Objective:

034.2 JavaScript Data Structures

Lesson:1 of 1Introduction
Programming languages, like natural languages, represent reality through symbols that are
combined into meaningful statements. The reality represented by a programming language is themachine’s resources, such as processor operations, devices, and memory.
Each of the myriad programming languages adopts a paradigm for representing information.
JavaScript adopts conventions typical of high-level languages, where most of details such as
memory allocation are implicit, allowing the programmer to focus on the script’s purpose in thecontext of the application.

High-Level Languages
High-level languages provide abstract rules so that the programmer needs to write less code toexpress an idea. JavaScript offers convenient ways to make use of computer memory, using
programming concepts that simplify the writing of recurring practices and that are generally
sufficient for the web developer’s purpose.
NOTE

220

|

Although it’s possible to use specialized mechanisms for meticulous memory

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

access, the simpler types of data we’ll look at are more general in use.
Typical operations in a web application consist of requesting data through some JavaScript
instruction and storing it to be processed and eventually presented to the user. This storage isquite flexible in JavaScript, with suitable storage formats for each purpose.

Declaration of Constants and Variables
The declaration of constants and variables to hold data is the cornerstone of any programming
language. JavaScript adopts the convention of most programming languages, assigning values toconstants or variables with the name = value syntax. The constant or variable on the left takes
the value on the right. The constant or variable name must start with a letter or underscore.
The type of data stored in the variable does not need to be indicated, because JavaScript is a
dynamic typing language. The type of the variable is inferred from the value assigned to it.
However, it is convenient to designate certain attributes in the declaration to guarantee theexpected result.
NOTE

TypeScript is a JavaScript-inspired language that, like lower-level languages, allows
you to declare variables for specific types of data.

Constants
A constant is a symbol that is assigned once when the program starts and never changes.
Constants are useful to specify fixed values such as defining the constant PI to be 3.14159265, orCOMPANY_NAME to hold the name of your company.
In a web application, for example, take a client that receives weather information from a remote
server. The programmer may decide that the address to the server must be constant, because it
will not change during the application’s execution. The temperature information, however, canchange with every new data arrival from the server.
The interval between queries made to the server can also be defined as a constant, which can bequeried from any part of the program:const update_interval = 10;
function setup_app(){console.log("Update every " + update_interval + "minutes");}

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

221

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

When invoked, the setup_app() function displays the message Update every 10 minutes
message on the console. The term const placed before the name update_interval makes surethat its value will remain the same throughout the entire execution of the script. If an attempt ismade to reset the value of a constant, a TypeError: Assignment to constant variable error
is issued.

Variables
Without the term const, JavaScript automatically assumes that update_interval is a variable
and that its value can be modified. This is equivalent to declaring the variable explicitly with var:var update_interval;
update_interval = 10;
function setup_app(){console.log("Update every " + update_interval + "minutes");}

Note that although the update_interval variable was defined outside the function, it wasaccessed from within the function. Any constant or variable declared outside of functions or code
blocks defined by braces ({}) has global scope; that is, it can be accessed from any part of the code.
The opposite is not true: a constant or variable declared inside a function has local scope, so it isaccessible only from inside the function itself. Bracket-delimited code blocks, such as those placedin if decision structures or for loops, delimit the scope of constants, but not variables declared asvar. The following code, for example, is valid:
var success = true;
if ( success == true ){var message = "Transaction succeeded";var retry = 0;}else{
var message = "Transaction failed";
var retry = 1;}
console.log(message);

The console.log(message) statement is able to access the message variable, even though it has
222|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

been declared within the code block of the if structure. The same would not happen if message
were constant, as exemplified in the following example:
var success = true;
if ( success == true ){const message = "Transaction succeeded";var retry = 0;}
else{
const message = "Transaction failed";
var retry = 1;}
console.log(message);In this case, an error message of type ReferenceError: message is not defined would be
issued and the script would be stopped. While it may seem like a limitation, restricting the scopeof variables and constants helps to avoid confusion between the information processed in thescript body and in its different code blocks. For this reason, variables declared with let instead ofvar are also restricted in scope by the blocks delimited by braces. There are other subtle
differences between declaring a variable with var or with let, but the most significant of theseconcerns the scope of the variable, as discussed here.

Types of Values
Most of the time, the programmer doesn’t need to worry about the type of data stored in avariable, because JavaScript automatically identifies it with one of its primitive types during thefirst assignment of a value to the variable. Some operations, however, can be specific to one data
type or another and can result in errors when used without discretion. In addition, JavaScript
offers structured types that allow you to combine more than one primitive type into a single
object.

Primitive Types
Primitive type instances correspond to traditional variables, which store only one value. Types aredefined implicitly, so the typeof operator can be used to identify what type of value is stored in avariable:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

223

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

console.log("Undefined variables are of type", typeof variable);{let variable = true;
console.log("Value `true` is of type " + typeof variable);}{let variable = 3.14159265;
console.log("Value `3.14159265` is of type " + typeof variable);}{let variable = "Text content";
console.log("Value `Text content` is of type " + typeof variable);}{let variable = Symbol();console.log("A symbol is of type " + typeof variable);}This script will display on the console what type of variable was used in each case:undefined variables are of type undefined
Value `true` is of type boolean
Value `3.114159265` is of type number
Value `Text content` is of type string
A symbol is of type symbol

Notice that the first line tries to find the type of an undeclared variable. This causes the given
variable to be identified as undefined. The symbol type is the least intuitive primitive. Its
purpose is to provide a unique attribute name within an object when there is no need to define a
specific attribute name. An object is one of the data structures we’ll look at next.

Structured Types
While primitive types are sufficient for writing simple routines, there are drawbacks to using
them exclusively in more complex applications. An e-commerce application, for example, would
be much more difficult to write, because the programmer would need to find ways to store lists ofitems and corresponding values using only variables with primitive types.

224|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

Structured types simplify the task of grouping information of the same nature into a single
variable. A list of items in a shopping cart, for instance, can be stored in a single variable of typearray:
let cart = ['Milk', 'Bread', 'Eggs'];

As demonstrated in the example, an array of items is designated with square brackets. The
example has populated the array with three literal string values, hence the use of single quotes.
Variables can also be used as items in an array, but in that case they must be designated without
quotes. The number of items in an array can be queried with the length property:
let cart = ['Milk', 'Bread', 'Eggs'];
console.log(cart.length);

The number 3 will be displayed in the console output. New items can be added to the array withthe push() method:cart.push('Candy');
console.log(cart.length);

This time, the amount displayed will be 4. Each item in the list can be accessed by its numericindex, starting with 0:
console.log(cart[0]);console.log(cart[3]);The output displayed on the console will be:
Milk
Candy

Just as you can use push() to add an element, you can use pop() to remove the last element froman array.
Values stored in an array do not need be of the same type. It is possible, for example, to store thequantity of each item beside it. A shopping list like the one in the previous example could beconstructed as follows:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

225

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

let cart = ['Milk', 1, 'Bread', 4, 'Eggs', 12, 'Candy', 2];// Item indexes are evenlet item = 2;// Quantities indexes are odd
let quantity = 3;
console.log("Item: " + cart[item]);console.log("Quantity: " + cart[quantity]);

The output displayed on the console after running this code is:
Item: Bread
Quantity: 4

As you may have already noticed, combining the names of items with their respective quantities
in a single array may not be a good idea, because the relationship between them is not explicit in
the data structure and is very susceptible to (human) errors. Even if an array were used for names
and another array for quantities, maintaining the integrity of the list would require the same careand would not be very productive. In these situations, the best alternative is to use a more
appropriate data structure: an object.
In JavaScript, an object-type data structure lets you bind properties to a variable. Also, unlike anarray, the elements that make up an object do not have a fixed order. A shopping list item, forexample, can be an object with the properties name and quantity:
let item = { name: 'Milk', quantity: 1 };console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);This example shows that an object can be defined using braces ({}), where each property/value
pair is separated by a colon and the properties are separated by commas. The property isaccessible in the format variable.property, as in item.name, both for reading and for assigning
new values. The output displayed on the console after running this code is:
Item: Milk
Quantity: 1

226|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

Finally, each object representing an item can be included in the shopping list array. This can bedone directly when creating the list:
let cart = [{ name: 'Milk', quantity: 1 }, { name: 'Bread', quantity: 4 }];As before, a new object representing an item can be added later to the array:cart.push({ name: 'Eggs', quantity: 12 });Items in the list are now accessed by their index and their property name:console.log("Third item: " + cart[2].name);
console.log(cart[2].name + " quantity: " + cart[2].quantity);

The output displayed on the console after running this code is:third item: eggs
Eggs quantity: 12

Data structures allow the programmer to keep their code much more organized and easier tomaintain, whether by the original author or by other programmers on the team. Also, many
outputs from JavaScript functions are in structured types, which need to be handled properly by
the programmer.

Operators
So far, we’ve pretty much seen only how to assign values to newly created variables. As simple as
it is, any program will perform several other manipulations on the values of variables. JavaScript
offers several types of operators that can act directly on the value of a variable or store the resultof the operation in a new variable.
Most operators are geared toward arithmetic operations. To increase the quantity of an item inthe shopping list, for example, just use the + addition operator:
item.quantity = item.quantity + 1;

The following snippet prints the value of item.quantity before and after the addition. Do not
mix up the roles of the plus sign in the snippet. The console.log statements use a plus sign to
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

227

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

combine two strings.
let item = { name: 'Milk', quantity: 1 };console.log("Item: " + item.name);
console.log("Quantity: " + item.quantity);
item.quantity = item.quantity + 1;
console.log("New quantity: " + item.quantity);

The output displayed on the console after running this code is:
Item: Milk
Quantity: 1
New quantity: 2

Note that the value previously stored in item.quantity is used as the operand of the addition
operation: item.quantity = item.quantity + 1. Only after the operation is complete thevalue in item.quantity is updated with the result of the operation. This kind of arithmetic
operation involving the current value of the target variable is quite common, so there areshorthand operators that allow you to write the same operation in a reduced format:
item.quantity += 1;

The other basic operations also have equivalent shorthand operators:• a = a - b is equivalent to a -= b.
• a = a * b is equivalent to a *= b.
• a = a / b is equivalent to a /= b.
For addition and subtraction, there is a third format available when the second operand is only
one unit:• a = a + 1 is equivalent to a++.
• a = a - 1 is equivalent to a--.
More than one operator can be combined in the same operation and the result can be stored in a
new variable. For example, the following statement calculates the total price of an item plus ashipping cost:228|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

let total = item.quantity * 9.99 + 3.15;

The order in which the operations are carried out follows the traditional order of precedence: firstthe multiplication and division operations are carried out, and only then are the addition andsubtraction operations carried out. Operators with the same precedence are executed in the order
they appear in the expression, from left to right. To override the default precedence order, you
can use parentheses, as in a * (b + c).
In some situations, the result of an operation doesn’t even need to be stored in a variable. This is
the case when you want to evaluate the result of an expression within an if statement:if ( item.quantiy % 2 == 0 ){console.log("Quantity for the item is even");}else{
console.log("Quantity for the item is odd");}

The % (modulo) operator returns the remainder of the division of the first operand by the second
operand. In the example, the if statement checks whether the remainder of the division of
item.quantity by 2 is equal to zero, that is, whether item.quantity is a multiple of 2.
When one of the operands of the + operator is a string, the other operators are coerced into strings
and the result is a concatenation of strings. In the previous examples, this type of operation wasused to concatenate strings and variables into the argument of the console.log statement.
This automatic conversion might not be the desired behavior. A user-supplied value in a form
field, for example, might be identified as a string, but it is actually a numeric value. In cases like
this, the variable must first be converted to a number with the Number() function:
sum = Number(value1) + value2;

Moreover, it is important to verify that the user has provided a valid value before proceeding withthe operation. In JavaScript, a variable without an assigned value contains the value null. This
allows the programmer to use a decision statement such as if ( value1 == null ) to check
whether a variable was assigned a value, regardless of the type of the value assigned to thevariable.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

229

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Guided Excercises
1. An array is a data structure present in several programming languages, some of which allow
only arrays with items of the same type. In the case of JavaScript, is it possible to define anarray with items of different types?

2. Based on the example let item = { name: 'Milk', quantity: 1 } for an object in a
shopping list, how could this object be declared to include the price of the item?

3. In a single line of code, what are the ways to update a variable’s value to half its current value?

230|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

Explorational Excercises
1. In the following code, what value will be displayed in the console output?
var value = "Global";{value = "Location";}
console.log(value);

2. What will happen when one or more of the operands involved in a multiplication operation is astring?

3. How is it possible to remove the Eggs item from the cart array declared with let cart =['Milk', 'Bread', 'Eggs'] ?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

231

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

SummaryThis lesson covers the basic use of constants and variables in JavaScript. JavaScript is a dynamic
typing language, so the programmer doesn’t need to specify the variable type before setting it.
However, it is important to know the language’s primitive types to ensure the correct outcome ofbasic operations. Furthermore, data structures such as arrays and objects combine primitive types
and allow the programmer to build more complex, composite variables. This lesson goes throughthe following concepts and procedures:• Understanding constants and variables• Variable scope• Declaring variables with var and let• Primitive types• Arithmetic operators• Arrays and objects• Type coercion and conversion

232|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.2 JavaScript Data Structures

Answers to Guided Exercises
1. An array is a data structure present in several programming languages, some of which allow
only arrays with items of the same type. In the case of JavaScript, is it possible to define anarray with items of different types?
Yes, in JavaScript it is possible to define arrays with items of different primitive types, such as
strings and numbers.
2. Based on the example let item = { name: 'Milk', quantity: 1 } for an object in a
shopping list, how could this object be declared to include the price of the item?
let item = { name: 'Milk', quantity: 1, price: 4.99 };3. In a single line of code, what are the ways to update a variable’s value to half its current value?
One can use the variable itself as an operand, value = value / 2, or the shorthand operator/=: value /= 2.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

233

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Answers to Explorational Exercises
1. In the following code, what value will be displayed in the console output?
var value = "Global";{value = "Location";}
console.log(value);

Location
2. What will happen when one or more of the operands involved in a multiplication operation is astring?
JavaScript will assign the value NaN (Not a Number) to the result, indicating that the operation
is invalid.
3. How is it possible to remove the Eggs item from the cart array declared with let cart =['Milk', 'Bread', 'Eggs'] ?
Arrays in javascript have the pop() method, which removes the last item in the list:cart.pop().

234|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

034.3 JavaScript Control Structures and Functions
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 034.3
Weight4
Key knowledge areas• Understand truthy and falsy values• Understand comparison operators• Understand the difference between loose and strict comparison• Use conditionals• Use loops• Define custom functions
Partial list of the used files, terms and utilities• if, else if, else
• switch, case, break• for, while, break, continue• function, return• ==, !=, <, ⇐, >, >=• ===, !==Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

235

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

034.3 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

034 JavaScript Programming

Objective:

034.3 JavaScript Control Structures andFunctionsLesson:1 of 2Introduction
Like any other programming language, JavaScript code is a collection of statements that tells an
instruction interpreter what to do in sequential order. However, this does not mean that every
statement should be executed only once or that they should execute at all. Most statements should
execute only when specific conditions are met. Even when a script is triggered asynchronously byindependent events, it often has to check a number of control variables to find out the right
portion of code to run.

If Statements
The simplest control structure is given by the if instruction, which will execute the statement
immediately after it if the specified condition is true. JavaScript considers conditions to be true if
the evaluated value is non-zero. Anything inside the parenthesis after the if word (spaces are
ignored) will be interpreted as a condition. In the following example, the literal number 1 is thecondition:

236|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

if ( 1 ) console.log("1 is always true");

The number 1 is explicitly written in this example condition, so it is treated as a constant value (itremains the same throughout the execution of the script) and it will always yield true when used
as a conditional expression. The word true (without the double quotes) could also be used insteadof 1, as it is also treated as a literal true value by the language. The console.log instruction
prints its arguments in the browser’s console window.

TIP

The browser console shows errors, warnings, and informational messages sent withthe console.log JavaScript instruction. On Chrome, the Ctrl + Shift + J ( Cmd + Option + J on
Mac) key combination opens the console. On Firefox, the Ctrl + Shift + K ( Cmd + Option + K on
Mac) key combination opens the console tab in the developer’s tools.

Although syntactically correct, using constant expressions in conditions is not very useful. In an
actual application, you’ll probably want to test the trueness of a variable:
let my_number = 3;
if ( my_number ) console.log("The value of my_number is", my_number, "and it yields true");

The value assigned to the variable my_number (3) is non-zero, so it yields true. But this example is
not common usage, because you rarely need to test whether a number equals zero. It is much
more common to compare one value to another and test whether the result is true:
let my_number = 3;
if ( my_number == 3 ) console.log("The value of my_number is", my_number, "indeed");The double equal comparison operator is used because the single equal operator is alreadydefined as the assignment operator. The value on each side of the operator is called an operand.
The ordering of the operands does not matter and any expression that returns a value can be an
operand. Here a list of other available comparison operators:
value1 == value2
True if value1 is equal to value2.
value1 != value2
True if value1 is not equal to value2.
value1 < value2
True if value1 is less than value2.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

237

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

value1 > value2
True if value1 is greater than value2.
value1 <= value2
True if value1 is less than or equal to value2.
value1 >= value2
True if value1 is grater than or equal to value2.
Usually, it does not matter whether the operand to the left of the operator is a string and theoperand to the right is a number, as long as JavaScript is able to convert the expression to ameaningful comparison. So the string containing the character 1 will be treated as the number 1
when compared to a number variable. To make sure the expression yields true only if both
operands are of the exact same type and value, the strict identity operator === should be usedinstead of ==. Likewise, the strict non-identity operator !== evaluates as true if the first operand is
not of the exact same type and value as the second operator.
Optionally, the if control structure can execute an alternate statement when the expression
evaluates as false:
let my_number = 4;
if ( my_number == 3 ) console.log("The value of my_number is 3");else console.log("The value of my_number is not 3");The else instruction should immediately follow the if instruction. So far, we are executing only
one statement when the condition is met. To execute more than one statement, you must enclose
them in curly braces:
let my_number = 4;
if ( my_number == 3 ){console.log("The value of my_number is 3");
console.log("and this is the second statement in the block");}
else{
console.log("The value of my_number is not 3");
console.log("and this is the second statement in the block");
}

238

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

A group of one or more statements delimited by a pair of curly braces is known as a blockstatement. It is common to use block statements even when there is only one instruction to
execute, in order to make the coding style consistent throughout the script. Moreover, JavaScript
does not require the curly braces or any statements to be on separate lines, but to do so improves
readability and makes code maintenance easier.
Control structures can be nested inside each other, but it is important not to mix up the opening
and closing braces of each block statement:
let my_number = 4;
if ( my_number > 0 ){console.log("The value of my_number is positive");if ( my_number % 2 == 0 ){console.log("and it is an even number");}
else{
console.log("and it is an odd number");}} // end of if ( my_number > 0 )else{
console.log("The value of my_number is less than or equal to 0");console.log("and I decided to ignore it");}

The expressions evaluated by the if instruction can be more elaborate than simple comparisons.
This is the case in the previous example, where the arithmetical expression my_number % 2 was
employed inside the parentheses in the nested if. The % operator returns the remainder after
dividing the number on its left by the number on its right. Arithmetical operators like % takeprecedence over comparison operators like ==, so the comparison will use the result of thearithmetical expression as its left operand.
In many situations, nested conditional structures can be combined into a single structure using
logical operators. If we were interested only in positive even numbers, for example, a single if
structure could be used:
let my_number = 4;

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

239

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

if ( my_number > 0 && my_number % 2 == 0 ){console.log("The value of my_number is positive");console.log("and it is an even number");}
else{
console.log("The value of my_number either 0, negative");console.log("or it is a negative number");}

The double ampersand operator && in the evaluated expression is the logical AND operator. It
evaluates as true only if the expression to its left and the expression to its right evaluate as true. If
you want to match numbers that are either positive or even, the || operator should be usedinstead, which stands for the OR logical operator:
let my_number = -4;
if ( my_number > 0 || my_number % 2 == 0 ){console.log("The value of my_number is positive");console.log("or it is a even negative number");}In this example, only negative odd numbers will fail to match the criteria imposed by thecomposite expression. If you have the opposite intent, that is, to match only the negative odd
numbers, add the logical NOT operator ! to the beginning of the expression:
let my_number = -5;
if ( ! ( my_number > 0 || my_number % 2 == 0 ) ){console.log("The value of my_number is an odd negative number");}

Adding the parenthesis in the composite expression forces the expression enclosed by them to beevaluated first. Without these parentheses, the NOT operator would apply only to my_number > 0
and then the OR expression would be evaluated. The && and || operators are known as binary
logical operators, because they require two operands. ! is known as a unary logical operator,
because it requires only one operand.
240|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

Switch Structures
Although the if structure is quite versatile and sufficient to control the flow of the program, theswitch control structure may be more appropriate when results other than true or false need tobe evaluated. For example, if we want to take a distinct action for each item chosen from a list, it
will be necessary to write an if structure for each assessment:// Available languages: en (English), es (Spanish), pt (Portuguese)
let language = "pt";// Variable to register whether the language was found in the list
let found = 0;
if ( language == "en" ){found = 1;
console.log("English");}if ( found == 0 && language == "es" ){found = 1;
console.log("Spanish");}if ( found == 0 && language == "pt" ){found = 1;
console.log("Portuguese");}if ( found == 0 ){console.log(language, " is unknown to me");}In this example, an auxiliary variable found is used by all if structures to find out whether amatch has occurred. In a case such as this one, the switch structure will perform the same task,
but in a more succinct manner:switch ( language ){Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

241Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programmingcase "en":console.log("English");break;
case "es":console.log("Spanish");break;
case "pt":console.log("Portuguese");break;
default:
console.log(language, " not found");}Each nested case is called a clause. When a clause matches the evaluated expression, it executes
the statements following the colon until the break statement. The last clause does not need abreak statement and is often used to set the default action when no other matches occur. As seenin the example, the auxiliary variable is not needed in the switch structure.
WARNINGswitch uses strict comparison to match expressions against its case clauses.

If more than one clause triggers the same action, you can combine two or more case conditions:switch ( language ){case "en":case "en_US":
case "en_GB":
console.log("English");break;
case "es":console.log("Spanish");break;
case "pt":case "pt_BR":
console.log("Portuguese");break;
default:
console.log(language, " not found");
}

242

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

Loops
In previous examples, the if and switch structures were well suited for tasks that need to run
only once after passing one or more conditional tests. However, there are situations when a task
must execute repeatedly — in a so-called loop — as long as its conditional expression keeps testing
as true. If you need to know whether a number is prime, for example, you will need to check
whether dividing this number by any integer greater than 1 and lower than itself has a remainder
equal to 0. If so, the number has an integer factor and it is not prime. (This is not a rigorous orefficient method to find prime numbers, but it works as a simple example.) Loop controls
structures are more suitable for such cases, in particular the while statement:// A naive prime number tester// The number we want to evaluate
let candidate = 231;// Auxiliary variable
let is_prime = true;// The first factor to try
let factor = 2;// Execute the block statement if factor is// less than candidate and keep doing it// while factor is less than candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next factor to try. Simply// increment the current factor by one
factor++;}// Display the result in the console window.
// If candidate has no integer factor, then// the auxiliary variable is_prime still true

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

243Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

if ( is_prime ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");}The block statement following the while instruction will execute repeatedly as long as thecondition factor < candidate is true. It will execute at least once, as long as we initialize thefactor variable with a value lower than candidate. The if structure nested in the while
structure will evaluate whether the remainder of candidate divided by factor is zero. If so, thecandidate number is not prime and the loop can finish. The break statement will finish the loop
and the execution will jump to the first instruction after the while block.
Note that the outcome of the condition used by the while statement must change at every loop,
otherwise the block statement will loop “forever”. In the example, we increment the factor
variable‒the next divisor we want to try‒and it guarantees the loop will end at some point.
This simple implementation of a prime number tester works as expected. However, we know thata number that is not divisible by two will not be divisible by any other even number. Therefore,
we could just skip the even numbers by adding another if instruction:
while ( factor < candidate ){// Skip even factors bigger than two
if ( factor > 2 && factor % 2 == 0 ){factor++;continue;}if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate244|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

factor++;}The continue statement is similar to the break statement, but instead of finishing this iteration of
the loop, it will ignore the rest of the loop’s block and start a new iteration. Note that the factor
variable was modified before the continue statement, otherwise the loop would have the sameoutcome again in the next iteration. This example is too simple and skipping part of the loop will
not really improve its performance, but skipping redundant instructions is very important whenwriting efficient applications.
Loops are so commonly used that they exist in many different variants. The for loop is speciallysuited to iterate through sequential values, because it lets us define the loop rules in a single line:
for ( let factor = 2; factor < candidate; factor++ ){// Skip even factors bigger than two
if ( factor > 2 && factor % 2 == 0 ){continue;}if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}}

This example produces the exact same result as the previous while example, but its parenthetic
expression includes three parts, separated by semicolons: the initialization (let factor = 2),
the loop condition (factor < candidate), and the final expression to be evaluated at the end ofeach loop iteration (factor++). The continue and break statements also apply to for loops. The
final expression in the parentheses (factor++) will be evaluated after the continue statement, so
it should not be inside the block statement, otherwise it will be incremented two times before thenext iteration.
JavaScript has special types of for loops to work with array-like objects. We could, for example,
check an array of candidate variables instead of just one:// A naive prime number tester

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

245

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming// The array of numbers we want to evaluate
let candidates = [111, 139, 293, 327];// Evaluates every candidate in the arrayfor (candidate of candidates){// Auxiliary variable
let is_prime = true;for ( let factor = 2; factor < candidate; factor++ ){// Skip even factors bigger than two
if ( factor > 2 && factor % 2 == 0 ){continue;}if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}}// Display the result in the console window
if ( is_prime ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");}}

The for (candidate of candidates) statement assigns one element of the candidates arrayto the candidate variable and uses it in the block statement, repeating the process for every
element in the array. You don’t need to declare candidate separately, because the for loop
defines it. Finally, the same code from the previous example was nested in this new blockstatement, but this time testing each candidate in the array.

246|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

Guided Exercises
1. What values of the my_var variable match the condition my_var > 0 && my_var < 9?

2. What values of the my_var variable match the condition my_var > 0 || my_var < 9?

3. How many times does the following while loop execute its block statement?
let i = 0;
while ( 1 ){if ( i == 10 ){continue;}i++;}

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

247

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Explorational Exercises
1. What happens if the equal assignment operator = is used instead of the equal comparison
operator ==?

2. Write a code fragment using the if control structure where an ordinary equality comparison
will return true, but a strict equality comparison will not.

3. Rewrite the following for statement using the unary NOT logical operator in the loop
condition. The outcome of the condition should be the same.
for ( let factor = 2; factor < candidate; factor++ )4. Based on the examples from this lesson, write a loop control structure that prints all the integer
factors of a given number.

248|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

SummaryThis lesson covers how to use control structures in JavaScript code. Conditional and loop
structures are essential elements of any programming paradigm, and JavaScript web development
is no exception. The lesson goes through the following concepts and procedures:• The if statement and comparison operators.
• How to use the switch structure with case, default, and break.
• The difference between ordinary and strict comparison.
• Loop control structures: while and for.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

249

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Answers to Guided Exercises
1. What values of the my_var variable match the condition my_var > 0 && my_var < 9?
Only numbers that are both greater than 0 and less than 9. The && (AND) logical operator
requires both comparisons to match.
2. What values of the my_var variable match the condition my_var > 0 || my_var < 9?
Using the || (OR) logical operator will cause any number to match, as any number will either
be greater than 0 or less than 9.
3. How many times does the following while loop execute its block statement?
let i = 0;
while ( 1 ){if ( i == 10 ){continue;}i++;}

The block statement will repeat indefinitely, as no stop condition was supplied.

250|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

Answers to Explorational Exercises
1. What happens if the equal assignment operator = is used instead of the equal comparison
operator ==?
The value on the right side of the operator is assigned to the variable on the left and the result
is passed to the comparison, which may not be the desired behavior.
2. Write a code fragment using the if control structure where an ordinary equality comparison
will return true, but a strict equality comparison will not.
let a = "1";
let b = 1;
if ( a == b ){console.log("An ordinary comparison will match.");}if ( a === b ){console.log("A strict comparison will not match.");}3. Rewrite the following for statement using the unary NOT logical operator in the loop
condition. The outcome of the condition should be the same.
for ( let factor = 2; factor < candidate; factor++ )Answer:for ( let factor = 2; ! (factor >= candidate); factor++ )4. Based on the examples from this lesson, write a loop control structure that prints all the integer
factors of a given number.
for ( let factor = 2; factor <= my_number; factor++ ){if ( my_number % factor == 0 ){Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

251Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

console.log(factor, " is an integer factor of ", my_number);
}
}

252

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

034.3 Lesson 2
Certificate:

Web Development Essentials

Version:

1.0

Topic:

034 JavaScript Programming

Objective:

034.3 JavaScript Control Structures andFunctionsLesson:2 of 2Introduction
In addition to the standard set of builtin functions provided by the JavaScript language,
developers can write their own custom functions to map an input to an output suitable to theapplication’s needs. Custom functions are basically a set of statements encapsulated to be used
elsewhere as part of an expression.
Using functions is a good way to avoid writing duplicate code, because they can be called fromdifferent locations throughout the program. Moreover, grouping statements in functions
facilitates the binding of custom actions to events, which is a central aspect of JavaScript
programming.

Defining a Function
As a program grows, it becomes harder to organize what it does without using functions. Eachfunction has its own private variable scope, so the variables defined inside a function will beavailable only inside that same function. Thus, they won’t get mixed up with variables from otherfunctions. Global variables are still accessible from within functions, but the preferable way toVersion: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

253

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

send input values to a function is through function parameters. As an example, we are going tobuild on the prime number validator from the previous lesson:// A naive prime number tester// The number we want to evaluate
let candidate = 231;// Auxiliary variable
let is_prime = true;// Start with the lowest prime number after 1
let factor = 2;// Keeps evaluating while factor is less than the candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate
factor++;}// Display the result in the console window
if ( is_prime ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");}If later in the code you need to check if a number is prime, it would be necessary to repeat thecode that has already been written. This practice is not recommended, because any corrections or
improvements to the original code would need to be replicated manually everywhere the code
was copied to. Moreover, repeating code places a burden on the browser and network, possibly254|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

slowing down the display of the web page. Instead of doing this, move the appropriate statements
to a function:// A naive prime number tester function
function test_prime(candidate){// Auxiliary variable
let is_prime = true;// Start with the lowest prime number after 1
let factor = 2;// Keeps evaluating while factor is less than the candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate
factor++;}// Send the answer backreturn is_prime;}

The function declaration starts with a function statement, followed by the name of the function
and its parameters. The name of the function must follow the same rules as the names forvariables. The parameters of the function, also known as the function arguments, are separated bycommas and enclosed by parenthesis.

TIP

Listing the arguments in the function declaration is not mandatory. The arguments
passed to a function can be retrieved from an array-like arguments object inside thatfunction. The index of the arguments starts at 0, so the first argument isarguments[0], the second argument is arguments[1], and so on.

In the example, the test_prime function has only one argument: the candidate argument,

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

255

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

which is the prime number candidate to be tested. Function arguments work like variables, but
their values are assigned by the statement calling the function. For example, the statement
test_prime(231) will call the test_prime function and assign the value 231 to the candidate
argument, which will then be available inside the function’s body like an ordinary variable.
If the calling statement uses simple variables for the function’s parameters, their values will becopied to the function arguments. This procedure — copying the values of the parameters used in
the calling statement to the parameters used inside the function —- is called passing arguments byvalue. Any modifications made to the argument by the function does not affect the originalvariable used in the calling statement. However, if the calling statement uses complex objects asarguments (that is, an object with properties and methods attached to it) for the function’s
parameters, they will be passed as reference and the function will be able to modify the original
object used in the calling statement.
The arguments that are passed by value, as well as the variables declared within the function, arenot visible outside it. That is, their scope is restricted to the body of the function where they were
declared. Nonetheless, functions are usually employed to create some output visible outside thefunction. To share a value with its calling function, a function defines a return statement.
For instance, the test_prime function in the previous example returns the value of the is_prime
variable. Therefore, the function can replace the variable anywhere it would be used in theoriginal example:// The number we want to evaluate
let candidate = 231;// Display the result in the console window
if ( test_prime(candidate) ){console.log(candidate, "is prime");}else{
console.log(candidate, "is not prime");}The return statement, as its name indicates, returns control to the calling function. Therefore,
wherever the return statement is placed in the function, nothing following it is executed. A
function can contain multiple return statements. This practice can be useful if some are withinconditional blocks of statements, so that the function might or might not execute a particular
return statement on each run.

256|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

Some functions may not return a value, so the return statement is not mandatory. The function’s
internal statements are executed regardless of its presence, so functions can also be used tochange the values of global variables or the contents of objects passed by reference, for example.
Notwithstanding, if the function does not have a return statement, its default return value is set
to undefined: a reserved variable that does not have a value and cannot be written.

Function Expressions
In JavaScript, functions are just another type of object. Thus, functions can be employed in thescript like variables. This characteristic becomes explicit when the function is declared using analternative syntax, called function expressions:
let test_prime = function(candidate){// Auxiliary variable
let is_prime = true;// Start with the lowest prime number after 1
let factor = 2;// Keeps evaluating while factor is less than the candidate
while ( factor < candidate ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime
is_prime = false;
break;}// The next number that will divide the candidate
factor++;}// Send the answer backreturn is_prime;}

The only difference between this example and the function declaration in the previous example isin the first line: let test_prime = function(candidate) instead of function
test_prime(candidate). In a function expression, the test_prime name is used for the object

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

257

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

containing the function and not to name the function itself. Functions defined in function
expressions are called in the same way as functions defined using the declaration syntax.
However, whereas declared functions can be called before or after their declaration, function
expressions can be called only after their initialization. Like with variables, calling a function
defined in an expression before its initialization will cause a reference error.

Function Recursion
In addition to executing statements and calling builtin functions, custom functions can also callother custom functions, including themselves. To call a function from itself is called function
recursion. Depending on the type of problem you are trying to solve, using recursive functions canbe more straightforward than using nested loops to perform repetitive tasks.
So far, we know how to use a function to test whether a given number is prime. Now suppose youwant to find the next prime following a given number. You could employ a while loop toincrement the candidate number and write a nested loop which will look for integer factors forthat candidate:// This function returns the next prime number// after the number given as its only argument
function next_prime(from){// We are only interested in the positive primes,// so we will consider the number 2 as the next// prime after any number less than two.
if ( from < 2 ){return 2;}// The number 2 is the only even positive prime,// so it will be easier to treat it separately.
if ( from == 2 ){return 3;}// Decrement "from" if it is an even number
if ( from % 2 == 0 ){from--;}

258|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions// Start searching for primes greater then 3.
// The prime candidate is the next odd number
let candidate = from + 2;// "true" keeps the loop going until a prime is foundwhile ( true ){// Auxiliary control variable
let is_prime = true;// "candidate" is an odd number, so the loop will// try only the odd factors, starting with 3for ( let factor = 3; factor < candidate; factor = factor + 2 ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime.
// Test the next candidate
is_prime = false;
break;}}// End loop and return candidate if it is prime
if ( is_prime ){return candidate;}// If prime not found yet, try the next odd number
candidate = candidate + 2;}}
let from = 1024;
console.log("The next prime after", from, "is", next_prime(from));

Note that we need to use a constant condition for the while loop (the true expression inside theparenthesis) and the auxiliary variable is_prime to know when to stop the loop. Athough thissolution is correct, using nested loops is not as elegant as using recursion to perform the sametask:// This function returns the next prime number

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

259

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming// after the number given as its only argument
function next_prime(from){// We are only interested in the positive primes,// so we will consider the number 2 as the next// prime after any number less than two.
if ( from < 2 ){return 2;}// The number 2 is the only even positive prime,// so it will be easier to treat it separately.
if ( from == 2 ){return 3;}// Decrement "from" if it is an even number
if ( from % 2 == 0 ){from--;}// Start searching for primes greater then 3.
// The prime candidate is the next odd number
let candidate = from + 2;// "candidate" is an odd number, so the loop will// try only the odd factors, starting with 3for ( let factor = 3; factor < candidate; factor = factor + 2 ){if ( candidate % factor == 0 ){// The remainder is zero, so the candidate is not prime.
// Call the next_prime function recursively, this time// using the failed candidate as the argument.
return next_prime(candidate);}}// "candidate" is not divisible by any integer factor other// than 1 and itself, therefore it is a prime number.

260|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

return candidate;}let from = 1024;
console.log("The next prime after", from, "is", next_prime(from));

Both versions of next_prime return the next prime number after the number given as its only
argument (from). The recursive version, like the previous version, starts by checking the special
cases (i.e. numbers less or equal to two). Then it increments the candidate and starts looking for
any integer factors with the for loop (notice that the while loop is not there anymore). At thatpoint, the only even prime number has already been tested, so the candidate and its possible
factors are incremented by two. (An odd number plus two is the next odd number.)
There are only two ways out of the for loop in the example. If all the possible factors are tested
and none of them has a remainder equal to zero when dividing the candidate, the for loop
completes and the function returns the candidate as the next prime number after from.
Otherwise, if factor is an integer factor of candidate (candidate % factor == 0), thereturned value comes from the next_prime function called recursively, this time with theincremented candidate as its from parameter. The calls for next_prime will be stacked on top of
one another, until one candidate finally turns up no integer factors. Then the last next_prime
instance containing the prime number will return it to the previous next_prime instance, andthus successively down to the first next_prime instance. Even though each invocation of thefunction uses the same names for variables, the invocations are isolated from each other, so theirvariables are kept separated in memory.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

261

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Guided Exercises
1. What kind of overhead can developers mitigate by using functions?

2. What is the difference between function arguments passed by value and function arguments
passed by reference?

3. Which value will be used as the output of a custom function if it does not have a returnstatement?

262|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

Explorational Exercises
1. What is the probable cause of an Uncaught Reference Error issued when calling a function
declared with the expression syntax?

2. Write a function called multiples_of that receives three arguments: factor, from, and to.
Inside the function, use the console.log() instruction to print all multiples of factor lying
between from and to.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

263

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

SummaryThis lesson covers how to write custom functions in JavaScript code. Custom functions let thedeveloper divide the application in “chunks” of reusable code, making it easier to write andmaintain larger programs. The lesson goes through the following concepts and procedures:• How to define a custom function: function declarations and function expressions.
• Using parameters as the function input.
• Using the return statement to set the function output.
• Function recursion.

264|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.3 JavaScript Control Structures and Functions

Answers to Guided Exercises
1. What kind of overhead can developers mitigate by using functions?
Functions allow us to reuse code, which facilitates code maintenance. A smaller script file also
saves memory and download time.
2. What is the difference between function arguments passed by value and function arguments
passed by reference?
When passed by value, the argument is copied to the function and the function is not able tomodify the original variable in the calling statement. When passed by reference, the function isable to manipulate the original variable used in the calling statement.
3. Which value will be used as the output of a custom function if it does not have a returnstatement?
The returned value will be set to undefined.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

265Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Answers to Explorational Exercises
1. What is the probable cause of an Uncaught Reference Error issued when calling a function
declared with the expression syntax?
The function was called before its declaration in the script file.
2. Write a function called multiples_of that receives three arguments: factor, from, and to.
Inside the function, use the console.log() instruction to print all multiples of factor lying
between from and to.
function multiples_of(factor, from, to){for ( let number = from; number <= to; number++ ){if ( number % factor == 0 ){console.log(factor, "*", number / factor, "=", number);
}
}
}

266

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling034.4 JavaScript Manipulation of Website Content and Styling
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 034.4
Weight4
Key knowledge areas• Understand the concept and structure of the DOM• Change the contents and properties of HTML elements through the DOM• Change the CSS styling of HTML elements through the DOM• Trigger JavaScript functions from HTML elements
Partial list of the used files, terms and utilities• document.getElementById(),
document.getElementsByTagName(),document.querySelectorAll()

document.getElementsByClassName(),document.querySelector(),• innerHTML, setAttribute(), removeAttribute() properties and methods of DOM
elements• classList, classList.add(), classList.remove(), classList.toggle() properties
and methods of DOM elements• onClick, onMouseOver, onMouseOut attributes of HTML elements

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

267

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

034.4 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

034 JavaScript Programming

Objective:

034.4 JavaScript Manipulation of Website
Content and Styling

Lesson:1 of 1Introduction
HTML, CSS, and JavaScript are three distinct technologies that come together on the Web. In orderto make truly dynamic and interactive pages, the JavaScript programmer must combine
components from HTML and CSS at run time, a task that is greatly facilitated by using theDocument Object Model (DOM).

Interacting with the DOM
The DOM is a data structure that works as a programming interface to the document, where every
aspect of the document is represented as a node in the DOM and every change made to the DOM
will immediately reverberate in the document. To show how to use the DOM in JavaScript, savethe following HTML code in a file called example.html:<!DOCTYPE html><html><head><meta charset="utf-8" />268|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling<title>HTML Manipulation with JavaScript</title></head><body><div class="content" id="content_first"><p>The dynamic content goes here</p></div><!-- #content_first --><div class="content" id="content_second" hidden><p>Second section</p></div><!-- #content_second --></body></html>The DOM will be available only after the HTML is loaded, so write the following JavaScript at theend of the page body (before the ending </body> tag):<script>
let body = document.getElementsByTagName("body")[0];
console.log(body.innerHTML);</script>

The document object is the top DOM element, all other elements branch off from it. The
getElementsByTagName() method lists all the elements descending from document that havethe given tag name. Even though the body tag is used only once in the document, thegetElementsByTagName() method always return an array-like collection of found elements,
hence the use of the [0] index to return the first (and only) element found.

HTML Content
As
shown
in
the
previous
example,the
DOM
element
returnedbythedocument.getElementsByTagName("body")[0] was assigned to the body variable. The body
variable can then be used to manipulate the page’s body element, because it inherits all the DOM
methods and attributes from that element. For instance, the innerHTML property contains theentire HTML markup code written inside the corresponding element, so it can be used to read theinner markup. Our console.log(body.innerHTML) call prints the content inside<body></body> to the web console. The variable can also be used to replace that content, as inbody.innerHTML = "<p>Content erased</p>".
Rather than changing entire portions of HTML markup, it is more practical to keep the document

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

269

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

structure unaltered and just interact with its elements. Once the document is rendered by thebrowser, all the elements are accessible by DOM methods. It is possible, for example, to list andaccess all the HTML elements using the special string * in the getElementsByTagName() methodof the document object:
let elements = document.getElementsByTagName("*");for ( element of elements ){if ( element.id == "content_first" ){element.innerHTML = "<p>New content</p>";}}This code will place all the elements found in document in the elements variable. The elements
variable is an array-like object, so we can iterate through each of its items with a for loop. If theHTML page where this code runs has an element with an id attribute set to content_first (seethe sample HTML page shown at the start of the lesson), the if statement matches that element
and its markup contents will be changed to <p>New content</p>. Note that the attributes of an
HTML element in the DOM are accessible using the dot notation of JavaScript object properties:
therefore, element.id refers to the id attribute of the current element of the for loop. The
getAttribute() method could also be used, as in element.getAttribute("id").
It is not necessary to iterate through all the elements if you want to inspect only a subset of them.
For example, the document.getElementsByClassName() method limits the matched elements to
those having a specific class:let elements = document.getElementsByClassName("content");
for ( element of elements ){if ( element.id == "content_first" ){element.innerHTML = "<p>New content</p>";}}

However, iterating through many document elements using a loop is not the best strategy when
you have to change a specific element in the page.

270|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling

Selecting Specific Elements
JavaScript provides optimized methods to select the exact element you want to work on. The
previous loop could be entirely replaced by the document.getElementById() method:let element = document.getElementById("content_first");element.innerHTML = "<p>New content</p>";Every id attribute in the document must be unique, so the document.getElementById()
method returns only a single DOM object. Even the declaration of the element variable can beomitted, because JavaScript lets us chain methods directly:
document.getElementById("content_first").innerHTML = "<p>New content</p>";The getElementById() method is the preferable method to locate elements in the DOM, because
its performance is much better than iterative methods when working with complex documents.
However, not all elements have an explicit ID, and the method returns a null value if no element
matches with the provided ID (this also prevents the use of chained attributes or functions, likethe innerHTML used in the example above). Moreover, it is more practical to assign ID attributes
only to the main components of the page and then use CSS selectors to locate their child elements.
Selectors, introduced in an earlier lesson on CSS, are patterns that match elements in the DOM.
The querySelector() method returns the first matching element in the DOM’s tree, whilequerySelectorAll() returns all elements that match the specified selector.
In the previous example, the getElementById() method retrieves the element bearing thecontent_first ID. The querySelector() method can perform the same task:
document.querySelector("#content_first").innerHTML = "<p>New content</p>";

Because the querySelector() method uses selector syntax, the provided ID must begin with ahash character. If no matching element is found, the querySelector() method returns null.
In the previous example, the entire content of the content_first div is replaced by the text
string provided. The string has HTML code in it, which is not considered a best practice. You must
be careful when adding hard-coded HTML markup to JavaScript code, because tracking elements
can become difficult when changes to the overall document structure are required.
Selectors are not restricted to the ID of the element. The internal p element can be addressed

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

271

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

directly:
document.querySelector("#content_first p").innerHTML = "New content";

The #content_first p selector will match only the first p element inside the #content_first
div. It works fine if we want to manipulate the first element. However, we may want to change thesecond paragraph:<div class="content" id="content_first"><p>Don't change this paragraph.</p><p>The dynamic content goes here.</p></div><!-- #content_first -->In this case, we can use the :nth-child(2) pseudo-class to match the second p element:
document.querySelector("#content_first p:nth-child(2)").innerHTML = "New content";

The number 2 in p:nth-child(2) indicates the second paragraph that matches the selector. See
the CSS selectors lesson to know more about selectors and how to use them.

Working with Attributes
JavaScript’s ability to interact with the DOM is not restricted to content manipulation. Indeed, themost pervasive use of JavaScript in the browser is to modify the attributes of the existing HTMLelements.
Let’s say our original HTML example page has now three sections of content:<!DOCTYPE html><html><head><meta charset="utf-8" /><title>HTML Manipulation with JavaScript</title></head><body><div class="content" id="content_first" hidden><p>First section.</p></div><!-- #content_first -->272|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling<div class="content" id="content_second" hidden><p>Second section.</p></div><!-- #content_second --><div class="content" id="content_third" hidden><p>Third section.</p></div><!-- #content_third --></body></html>

You may want to make only one of them visible at a time, hence the hidden attribute in all div
tags. This is useful, for example, to show only one image from a gallery of images. To make one ofthem visible when the page loads, add the following JavaScript code to the page:// Which content to show
let content_visible;
switch ( Math.floor(Math.random() * 3) ){case 0:content_visible = "#content_first";
break;
case 1:
content_visible = "#content_second";
break;
case 2:
content_visible = "#content_third";
break;}
document.querySelector(content_visible).removeAttribute("hidden");

The expression evaluated by the switch statement randomly returns the number 0, 1, or 2. The
corresponding ID selector is then be assigned to the content_visible variable, which is used by
the querySelector(content_visible) method. The chained removeAttribute("hidden")call removes the hidden attribute from the element.
The opposite approach is also possible: All sections could be initially visible (without the hidden
attribute) and the JavaScript program can then assign the hidden attribute to every section except
the one in content_visible. To do so, you must iterate through all the content div elements thatare different from the chosen one, which can be done by using the querySelectorAll() method:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

273

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming// Which content to show
let content_visible;
switch ( Math.floor(Math.random() * 3) ){case 0:content_visible = "#content_first";
break;
case 1:
content_visible = "#content_second";
break;
case 2:
content_visible = "#content_third";
break;}// Hide all content divs, except content_visiblefor ( element of document.querySelectorAll(".content:not("+content_visible+")") ){// Hidden is a boolean attribute, so any value will enable itelement.setAttribute("hidden", "");}

If the content_visible variable was set to #content_first, the selector will be.content:not(#content_first), which reads as all elements having the content class except
those having the content_first ID. The setAttribute() method adds or changes attributes ofHTML elements. Its first parameter is the name of the attribute and the second is the value of theattribute.
However, the proper way to change the appearance of elements is with CSS. In this case, we canset the display CSS property to hidden and then change it to block using JavaScript:<style>div.content { display: none }</style><div class="content" id="content_first"><p>First section.</p></div><!-- #content_first --><div class="content" id="content_second"><p>Second section.</p>274|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling</div><!-- #content_second --><div class="content" id="content_third"><p>Third section.</p></div><!-- #content_third --><script>// Which content to show
let content_visible;
switch ( Math.floor(Math.random() * 3) ){case 0:content_visible = "#content_first";
break;
case 1:
content_visible = "#content_second";
break;
case 2:
content_visible = "#content_third";
break;}
document.querySelector(content_visible).style.display = "block";</script>

The same good practices that apply to mixing HTML tags with JavaScript apply also to CSS. Thus,
writing CSS properties directly in JavaScript code is not recommended. Instead, CSS rules should
be written apart from JavaScript code. The proper way to alternate visual styling is to select a predefined CSS class for the element.

Working with Classes
Elements may have more than one associated class, making it easier to write styles that can be
added or removed when necessary. It would be exhausting to change many CSS attributes directlyin JavaScript, so you can create a new CSS class with those attributes and then add the class to theelement. DOM elements have the classList property, which can be used to view and manipulate
the classes assigned to the corresponding element.
For example, instead of changing the visibility of the element, we can create an additional CSS
class to highlight our content div:
div.content {Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

275

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

border: 1px solid black;
opacity: 0.25;}
div.content.highlight {border: 1px solid red;
opacity: 1;}

This stylesheet will add a thin black border and semi-transparency to all elements having thecontent class. Only the elements that also have the highlight class will be fully opaque andhave the thin red border. Then, instead of changing the CSS properties directly as we did before,
we can use the classList.add("highlight") method in the selected element:// Which content to highlight
let content_highlight;
switch ( Math.floor(Math.random() * 3) ){case 0:content_highlight = "#content_first";
break;
case 1:
content_highlight = "#content_second";
break;
case 2:
content_highlight = "#content_third";
break;}// Highlight the selected div
document.querySelector(content_highlight).classList.add("highlight");

All the techniques and examples we have seen so far were performed at the end of the pageloading process, but they are not restricted to this stage. In fact, what makes JavaScript so useful to
Web developers is its ability to react to events on the page, which we will see next.

Event Handlers
All visible page elements are susceptible to interactive events, such as the click or the movementof the mouse itself. We can associate custom actions to these events, which greatly expands what
an HTML document can do.

276|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling

Probably the most obvious HTML element that benefits from an associated action is the button
element. To show how it works, add three buttons above the first div element of the example
page:
<p>
<button>First</button><button>Second</button><button>Third</button></p><div class="content" id="content_first"><p>First section.</p></div><!-- #content_first --><div class="content" id="content_second"><p>Second section.</p></div><!-- #content_second --><div class="content" id="content_third"><p>Third section.</p></div><!-- #content_third -->The buttons do nothing on their own, but suppose you want to highlight the div corresponding to
the pressed button. We can use the onClick attribute to associate an action to each button:<p><button onClick="document.getElementById('content_first').classList.toggle('highlight')">First</button><button onClick="document.getElementById('content_second').classList.toggle('highlight')">Second</button><button onClick="document.getElementById('content_third').classList.toggle('highlight')">Third</button></p>

The classList.toggle() method adds the specified class to the element if it is not present, andremoves that class if it is already present. If you run the example, you will note that more than
one div can be highlighted at the same time. To highlight only the div corresponding to thepressed button, it is necessary to remove the highlight class from the other div elements.
Nonetheless, if the custom action is too long or involves more than one line of code, it’s morepractical to write a function apart from the element tag:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

277

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

function highlight(id){// Remove the "highlight" class from all content elementsfor ( element of document.querySelectorAll(".content") ){element.classList.remove('highlight');}// Add the "highlight" class to the corresponding element
document.getElementById(id).classList.add('highlight');}

Like the previous examples, this function can be placed inside a <script> tag or in an external
JavaScript file associated with the document. The highlight function first removes thehighlight class from all the div elements associated with the content class, then adds thehighlight class to the chosen element. Each button should then call this function from its
onClick attribute, using the corresponding ID as the function’s argument:<p><button onClick="highlight('content_first')">First</button><button onClick="highlight('content_second')">Second</button><button onClick="highlight('content_third')">Third</button></p>

In addition to the onClick attribute, we could use the onMouseOver attribute (triggered when the
pointing device is used to move the cursor onto the element), the onMouseOut attribute (triggered
when the pointing device is no longer contained within the element), etc. Moreover, event
handlers are not restricted to buttons, so you can assign custom actions to these event handlers
for all visible HTML elements.

278|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling

Guided Exercises
1. Using the document.getElementById() method, how could you insert the phrase “Dynamic
content” to the inner content of the element whose ID is message?

2. What is the difference between referencing an element by its ID using the
document.querySelector() method and doing so via the document.getElementById()
method?

3. What is the purpose of the classList.remove() method?

4. What is the result of using the method myelement.classList.toggle("active") if
myelement does not have the active class assigned to it?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

279

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Explorational Exercises
1. What argument to the document.querySelectorAll() method will make it mimic the
document.getElementsByTagName("input") method?

2. How can you use the classList property to list all the classes associated with a given
element?

280|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and Styling

SummaryThis lesson covers how to use JavaScript to change HTML contents and their CSS properties using
the DOM (Document Object Model). These changes can be triggered by user events, which is usefulto create dynamic interfaces. The lesson goes through the following concepts and procedures:• How
toinspect
thestructure
document.getElementById(),
document.getElementsByTagName(),document.querySelectorAll().

of

the

document
using
methods
likedocument.getElementsByClassName(),document.querySelector()and• How to change the document’s content with the innerHTML property.
• How to add and modify the attributes of page elements with methods setAttribute() andremoveAttribute().
• The proper way to manipulate elements classes using the classList property and its relation
to CSS styles.
• How to bind functions to mouse events in specific elements.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

281

Web Development Essentials (030) (Version 1.0) | Topic 034: JavaScript Programming

Answers to Guided Exercises
1. Using the document.getElementById() method, how could you insert the phrase “Dynamic
content” to the inner content of the element whose ID is message?
It can be done with the innerHTML property:
document.getElementById("message").innerHTML = "Dynamic content"

2. What is the difference between referencing an element by its ID using the
document.querySelector() method and doing so via the document.getElementById()
method?
The ID must be accompanied by the hash character in functions that use selectors, such as
document.querySelector().
3. What is the purpose of the classList.remove() method?
It removes the class (whose name is given as the argument of the function) from the classattribute of the corresponding element.
4. What is the result of using the method myelement.classList.toggle("active") if
myelement does not have the active class assigned to it?
The method will assign the active class to myelement.

282|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 034.4 JavaScript Manipulation of Website Content and StylingAnswers to Explorational Exercises
1. What argument to the document.querySelectorAll() method will make it mimic the
document.getElementsByTagName("input") method?
Using document.querySelectorAll("input") will match all the input elements in the page,
just like document.getElementsByTagName("input").
2. How can you use the classList property to list all the classes associated with a given
element?
The classList property is an array-like object, so a for loop can be used to iterate through all
the classes it contains.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

283

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Topic 035: NodeJS Server Programming284|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.1 NodeJS Basics

035.1 NodeJS Basics
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 035.1
Weight1
Key knowledge areas• Understand the concepts of Node.js• Run a NodeJS application• Install NPM packages
Partial list of the used files, terms and utilities• node [file.js]• npm init
• npm install [module_name]• package.json• node_modules

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

285

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

035.1 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

035 Node.js Server Programming

Objective:

035.1 Node.js Basics

Lesson:1 of 1Introduction
Node.js is a JavaScript runtime environment that runs JavaScript code in web servers–the socalled web backend (server side)–instead of using a second language like Python or Ruby forserver-side programs. The JavaScript language is already used in the modern frontend side of web
applications, interacting with the HTML and CSS of the interface that the user interacts with a web
browser. Using Node.js in tandem with JavaScript in the browser offers the possibility of just one
programming language for the whole application.
The main reason for the existence of Node.js is the way it handles multiple concurrent
connections in the backend. One of the most common ways that a web application server handles
connections is through the execution of multiple processes. When you open a desktop application
in your computer, a process starts and uses a lot of resources. Now think about when thousands ofusers are doing the same thing in a large web application.
Node.js avoids this problem using a design called the event loop, which is an internal loop that
continously checks for incoming tasks to be computed. Thanks to the widespread use of JavaScript
and the ubiquity of web technologies, Node.js has seen a huge adoption in both small and large
applications. There are other characteristics that also helped Node.js to be widely adopted, such as

286|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.1 NodeJS Basics

asynchronous and non-blocking input/output (I/O) processing, which is explained later in thislesson.
The Node.js environment uses a JavaScript engine to interpret and execute JavaScript code on theserver side or on the desktop. In these conditions, the JavaScript code that the programmer writes
is parsed and compiled just-in-time to execute the machine instructions generated by the original
JavaScript code.

NOTE

As you progress through these lessons about Node.js, you may notice that theNode.js JavaScript is not exactly the same as the one that runs on the browser(which follows the ECMAScript specification), but is quite similar.

Getting Started
This section and the following examples assume that Node.js is already installed on your Linux
operating system, and that the user already has basic skills such as how to execute commands inthe terminal.
To run the following examples, create a working directory called node_examples. Open aterminal prompt and type node. If you have correctly installed Node.js, it will present a > prompt
where you can test JavaScript commands interactively. This kind of environment is called REPL,
for “read, evaluate, print, and loop”. Type the following input (or some other JavaScript
statements) at the > prompts. Press the Enter key after each line, and the REPL environment will
return the results of its actions:> let array = ['a', 'b', 'c', 'd'];undefined> array.map( (element, index) => (`Element: ${element} at index: ${index}`));['Element: a at index: 0','Element: b at index: 1','Element: c at index: 2','Element: d at index: 3']>

The snippet was written using ES6 syntax, which offers a map function to iterate over the arrayand print the results using string templates. You can write pretty much any command that is
valid. To exit the Node.js terminal, type .exit, remembering to include the initial period.
For longer scripts and modules, it is more convenient to use a text editor such as VS Code, Emacs,

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

287

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programmingor Vim. You can save the two lines of code just shown (with a little modification) in a file called
start.js:
let array = ['a', 'b', 'c', 'd'];array.map( (element, index) => ( console.log(`Element: ${element} at index: ${index}`)));

Then you can run the script from the shell to produce the same results as before:$ node ./start.js
Element: a at index: 0Element: b at index: 1
Element: c at index: 2
Element: d at index: 3

Before diving into some more code, we are going to get an overview of how Node.js works, using
its single thread execution environment and the event loop.

Event Loop and Single Thread
It is hard to tell how much time your Node.js program will take to handle a request. Some requests
may be short—perhaps just looping through variables in memory and returning them—whereas
others may require time-consuming activities such as opening a file on the system or issuing aquery to a database and waiting for the results. How does Node.js handle this uncertainty? The
event loop is the answer.
Imagine a chef doing multiple tasks. Baking a cake is one task that requires a lot of time for theoven to cook it. The chef does not stay there waiting for the cake to be ready and then set out tomake some coffee. Instead, while the oven bakes the cake, the chef makes coffee and other tasks
in parallel. But the cook is always checking whether it is the right time to switch focus to a specifictask (making coffee), or to get the cake out of oven.
The event loop is like the chef who is constantly aware of the surrounding activities. In Node.js, an“event-checker” is always checking for operations that have completed or are waiting to beprocessed by the JavaScript engine.
Using this approach, an asynchronous and long operation does not block other quick operations
that come after. This is because the event loop mechanism is always checking whether that longtask, such as an I/O operation, is already done. If not, Node.js can continue to process other tasks.
Once the background task is complete, the results are returned and the application on top of
Node.js can use a trigger function (callback) to further process the output.

288|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.1 NodeJS Basics

Because Node.js avoids the use of multiple threads, as other environments do, it is called a singlethreaded environment, and therefore a non-blocking approach is of the utmost importance. This is
why Node.js uses an event loop. For compute-intensive tasks, Node.js is not among the best tools,
however: there are other programming languages and environments that address these problems
more efficiently.
In the following sections, we will take a closer look at callback functions. For now, understandthat callback functions are triggers that are executed upon the completion of a predefined
operation.

Modules
It is a best practice to break down complex functionality and extensive pieces of code into smallerparts. Doing this modularization helps to better organize the codebase, abstract away the
implementations, and avoid complicated engineering problems. To meet those necessities,
programmers package blocks of source code to be consumed by other internal or external parts ofcode.
Consider the example of a program that calculates the volume of a sphere. Open up your text
editor and create a file named volumeCalculator.js containing the following JavaScript:
const sphereVol = (radius) => {return 4 / 3 * Math.PI * radius}console.log(`A sphere with radius 3 has a ${sphereVol(3)} volume.`);console.log(`A sphere with radius 6 has a ${sphereVol(6)} volume.`);Now, execute the file using Node:$ node volumeCalculator.js
A sphere with radius 3 has a 113.09733552923254 volume.
A sphere with radius 6 has a 904.7786842338603 volume.

Here, a simple function was used to compute the volume of a sphere, based on its radius. Imagine
that we also need to calculate the volume of a cylinder, cone, and so on: we quickly notice thatthose specific functions must be added to the volumeCalculator.js file, which can become ahuge collection of functions. To better organize the structure, we can use the idea behind modules
as packages of separated code.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

289

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

In order to do that, create a separated file called polyhedrons.js:
const coneVol = (radius, height) => {return 1 / 3 * Math.PI * Math.pow(radius, 2) * height;}
const cylinderVol = (radius, height) => {return Math.PI * Math.pow(radius, 2) * height;}
const sphereVol = (radius) => {return 4 / 3 * Math.PI * Math.pow(radius, 3);}
module.exports = {coneVol,cylinderVol,
sphereVol}

Now, in the volumeCalculator.js file, delete the old code and replace it with this snippet:
const polyhedrons = require('./polyhedrons.js');
console.log(`A sphere with radius 3 has a ${polyhedrons.sphereVol(3)} volume.`);console.log(`A cylinder with radius 3 and height 5 has a ${polyhedrons.cylinderVol(3, 5)}
volume.`);console.log(`A cone with radius 3 and height 5 has a ${polyhedrons.coneVol(3, 5)} volume.`);And then run the filename against the Node.js environment:$ node volumeCalculator.js
A sphere with radius 3 has a 113.09733552923254 volume.
A cylinder with radius 3 and height 5 has a 141.3716694115407 volume.
A cone with radius 3 and height 5 has a 47.12388980384689 volume.

In the Node.js environment, every source code file is considered a module, but the word “module”
in Node.js indicates a package of code wrapped up as in the previous example. By using modules,
we abstracted the volume functions away from the main file, volumeCalculator.js, thus
reducing its size and making it easier to apply unit tests, which are a good practice whendeveloping real world applications.
290|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.1 NodeJS Basics

Now that we know how modules are used in Node.js, we can use one of the most important tools:
the Node Package Manager (NPM).
One of the main jobs of NPM is to manage, download, and install external modules into the project
or in the operating system. You can initialize a node repository with the command npm init.
NPM will ask the default questions about the name of your repository, version, description, and soon. You can bypass these steps using npm init --yes, and the command will automaticallygenerate a package.json file that describes the properties of your project/module.
Open the package.json file in your favorite text editor and you will see a JSON file containing
properties such as keywords, script commands to use with NPM, a name, etc.
One of those properties is the dependencies that are installed in your local repository. NPM will
add the name and version of these dependencies into package.json, along with packagelock.json, another file used as fallback by NPM in case package.json fails.
Type the following in your terminal:$ npm i dayjs

The i flag is a shortcut for the argument install. If you are connected to the internet, NPM will
search for a module named dayjs in the remote repository of Node.js, download the module, andinstall it locally. NPM will also add this dependency to your package.json and packagelock.json files. Now you can see that there is a folder called node_modules, which contains theinstalled module along with other modules if they are needed. The node_modules directory
contains the actual code that is going to be used when the library is imported and called.
However, this folder is not saved in versioning systems using Git, since the package.json fileprovides all the dependencies used. Another user can take the package.json file and simply run
npm install in their own machine, where NPM will create a node_modules folder with all thedependencies in the package.json, thus avoiding version control for the thousands of files
available on the NPM repository.
Now that the dayjs module is installed in the local directory, open the Node.js console and typethe following lines:
const dayjs = require('dayjs');
dayjs().format('YYYY MM-DDTHH:mm:ss')

The dayjs module is loaded with the require keyword. When a method from the module is

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

291

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

called, the library takes the current system datetime and outputs it in the specified format:
2020 11-22T11:04:36

This is the same mechanism used in the previous example, where the Node.js runtime loads thethird party function into the code.

Server Functionality
Because Node.js controls the back end of web applications, one of its core tasks is to handle HTTP
requests.
Here is a summary of how web servers handled incoming HTTP requests. The functionality of theserver is to listen for requests, determine as quickly as possible what response each needs, andreturn that response to the sender of the request. This application must receive an incoming HTTP
request triggered by the user, parse the request, perform the calculation, generate the response,and send it back. An HTTP module such as Node.js is used because it simplifies those steps,
alowing a web programmer to focus on the application itself.
Consider the following example that implements this very basic functionality:
const http = require('http');
const url = require('url');
const hostname = '127.0.0.1';
const port = 3000;
const server = http.createServer((req, res) => {const queryObject = url.parse(req.url,true).query;
let result = parseInt(queryObject.a) + parseInt(queryObject.b);res.statusCode = 200;
res.setHeader('Content-Type', 'text/plain');res.end(`Result: ${result}\n`);});server.listen(port, hostname, () => {console.log(`Server running at http://${hostname}:${port}/`);});

Save these contents in a file called basic_server.js and run it through a node command. The

292|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.1 NodeJS Basics

terminal running Node.js will display the following message:
Server running at http://127.0.0.1:3000/

Then
visit
the
following
URL
http://127.0.0.1:3000/numbers?a=2&b=17

in

your

web

browser:

Node.js is running a web server in your computer, and using two modules: http and url. The
http module sets up a basic HTTP server, processes the incoming web requests, and hands themto our simple application code. The URL module parses the arguments passed in the URL, converts
them into an integer format, and performs the addition operation. The http module then sends
the response as text to the web browser.
In a real web application, Node.js is commonly used to process and retrieve data, usually from a
database, and return the processed information to the front end to display. But the basic
application in this lesson concisely shows how Node.js makes use of modules to handle web
requests as a web server.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

293Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Guided Exercises
1. What are the reasons to use modules instead of writing simple functions?

2. Why did the Node.js environment become so popular? Cite one characteristic.

3. What is the purpose of the package.json file?

4. Why is it not recommended to save and share the node_modules folder?

294|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.1 NodeJS Basics

Explorational Exercises
1. How can you execute Node.js applications on your computer?

2. How can you delimit parameters in the URL to parse inside the server?

3. Specify a scenario where a specific task could be a bottleneck for a Node.js application.

4. How would you implement a parameter to multiply or sum the two numbers in the server
example?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

295

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

SummaryThis lesson provided an overview of the Node.js environment, its characteristics, and how it canbe used to implement simple programs. This lesson includes the following concepts:• What Node.js is, and why it is used.
• How to run Node.js programs using the command line.
• The event loops and the single thread.
• Modules.
• Node Package Manager (NPM).
• Server functionality.

296|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.1 NodeJS Basics

Answers to Guided Exercises
1. What are the reasons to use modules instead of writing simple functions?
By opting for modules instead of conventional functions, the programmer creates a simpler
codebase to read and maintain and for which to write automated tests.
2. Why did the Node.js environment become so popular? Cite two characteristics.
One reason is the flexibility of the JavaScript language, which was already widely used in thefront end of web applications. Node.js allows the use of just one programming language in thewhole system.
3. What is the purpose of the package.json file?
This file contains metadata for the project, such as the name, version, dependencies (libraries),and so on. Given a package.json file, other people can download and install the same
libraries and run tests in the same way that the original creator did.
4. Why is it not recommended to save and share the node_modules folder?
The node_modules folder contains the implementations of libraries available in remoterepositories. So the better way to share these libraries is to indicate them in the package.json
file and then use NPM to download those libraries. This method is simpler and more error-free,because you do not have to track and maintain the libraries locally.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

297

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Answers to Explorational Exercises
1. How can you execute Node.js applications on your computer?
You can run them by typing node PATH/FILE_NAME.js at the command line in your terminal,changing PATH to the path of your Node.js file and changing FILE_NAME.js to your chosen
filename.
2. How can you delimit parameters in the URL to parse inside the server?
The ampersand character & is used to delimit those parameters, so that they can be extracted
and parsed in the JavaScript code.
3. Specify a scenario where a specific task could be a bottleneck for a Node.js application.
Node.js is not a good environment in which to run CPU intensive processes because it uses asingle thread. A numerical computation scenario could slow down and lock the entire
application. If a numerical simulation is needed, it is better to use other tools.
4. How would you implement a parameter to multiply or sum the two numbers in the server
example?
Use a ternary operator or an if-else condition to check for an additional parameter. If theparameter is the string mult return the product of the numbers, else return the sum. Replace
the old code with the snippet below. Restart the server in the command line by pressing Ctrl + C
and rerunning the command to restart the server. Now test the new application by visitiing the
URL http://127.0.0.1:3000/numbers?a=2&b=17&operation=mult in your browser. If youomit or change the last parameter, the results should be the sum of the numbers.
let result = queryObject.operation == 'mult' ? parseInt(queryObject.a) * parseInt(queryObject.b) : parseInt(queryObject.a) + parseInt(queryObject.b);298|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

035.2 NodeJS Express Basics
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 035.2
Weight4
Key knowledge areas• Define routes to static files and EJS templates• Serve static files through Express• Serve EJS templates through Express• Create simple, non-nested EJS templates• Use the request object to access HTTP GET and POST parameters and process data submitted
through HTML forms• Awareness of user input validation• Awareness of cross-site Scripting (XSS)• Awareness of cross-site request forgery (CSRF)
Partial list of the used files, terms and utilities• express and body-parser modules• Express app object• app.get(), app.post()• res.query(), res.body()• ejs node module• res.render()Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

299

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming• <% … %>, <%= … %>, <%# … %>, <%- … %>• views/

300|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

035.2 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

035 NodeJS Server Programming

Objective:

035.2 NodeJS Express Basics

Lesson:1 of 2Introduction
Express.js, or simply Express, is a popular framework that runs on Node.js and is used to write
HTTP servers that handle requests from web application clients. Express supports many ways toread parameters sent over HTTP.

Initial Server Script
To demonstrate Express’s basic features for receiving and handling requests, let’s simulate anapplication that requests some information from the server. In particular, the example server:• Provides an echo function, which simply returns the message sent by the client.
• Tells the client its IP address upon request.
• Uses cookies to identify known clients.
The first step is to create the JavaScript file that will operate as the server. Using npm, create a
directory called myserver with the JavaScript file:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

301

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming$ mkdir myserver$ cd myserver/$ npm init

For the entry point, any filename can be used. Here we will use the default filename: index.js.
The following listing shows a basic index.js file that will be used as the entry point for ourserver:const express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.get('/', (req, res) => {res.send('Request received')})
app.listen(port, host, () => {console.log(`Server ready at http://${host}:${port}`)})Some important constants for the server configuration are defined in the first lines of the script.
The first two, express and app, correspond to the inclused express module and an instance of
this module that runs our application. We will add the actions to be performed by the server tothe app object.
The other two constants, host and port, define the host and communication port associated tothe server.
If you have a publicly accessible host, use its name instead of myserver as the value of host. If
you don’t provide the host name, Express will default to localhost, the computer where theapplication runs. In that case, no outside clients will be able to reach the program, which may befine for testing but offers little value in production.
The port needs to be provided, or the server will not start.
This script attaches only two procedures to the app object: the app.get() action that answers
requests made by clients through HTTP GET, and the app.listen() call, which is required toactivate the server and assigns it a host and port.
To start the server, just run the node command, providing the script name as an argument:

302|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics$ node index.js

As soon as the message Server ready at http://myserver:8080 appears, the server is readyto receive requests from an HTTP client. Requests can be made from a browser on the same
computer where the server is running, or from another machine that can access the server.
All transaction details we’ll see here are shown in the browser if you open a window for thedeveloper console. Alternatively, the curl command can be used for HTTP communication andallows you to inspect connection details more easily. If you are not familiar with the shellcommand line, you can create an HTML form to submit requests to a server.
The following example shows how to use the curl command on the command line to make an
HTTP request to the newly deployed server:$ curl http://myserver:8080 -v* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)
> GET / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: />* Mark bundle as not supporting multiuse< HTTP/1.1 200 OK< X-Powered-By: Express< Content-Type: text/html; charset=utf-8< Content-Length: 16< ETag: W/"10-1WVvDtVyAF0vX9evlsFlfiJTT5c"< Date: Fri, 02 Jul 2021 14:35:11 GMT< Connection: keep-alive<* Connection #0 to host myserver left intact
Request received

The -v option of the curl command displays all the request and response headers, as well asother debugging information. The lines starting with > indicate the request headers sent by theclient and the lines starting with < indicate the response headers sent by the server. Lines startingwith * are information generated by curl itself. The content of the response is displayed only atthe end, which in this case is the line Request received.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

303

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

The service’s URL, which in this case contains the server’s hostname and port
(http://myserver:8080), were given as arguments to the curl command. Because no directoryor filename is given, these default to the root directory /. The slash turns up as the request file inthe > GET / HTTP/1.1 line, which is followed in the output by the hostname and port.
In addition to displaying HTTP connection headers, the curl command assists application
development by allowing you to send data to the server using different HTTP methods and indifferent formats. This flexibility makes it easier to debug any problems and implement newfeatures on the server.

Routes
The requests the client can make to the server depend on what routes have been defined in theindex.js file. A route specifies an HTTP method and defines a path (more precisely, a URI) thatcan be requested by the client.
So far, the server has only one route configured:app.get('/', (req, res) => {res.send('Request received')})

Even though it is a very simple route, simply returning a plain text message to the client, it isenough to identify the most important components that are used to structure most routes:• The HTTP method served by the route. In the example, the HTTP GET method is indicated by
the get property of the app object.
• The path served by the route. When the client does not specify a path for the request, the serveruses the root directory, which is the base directory set aside for use by the web server. A later
example in this chapter uses the path /echo, which corresponds to a request made tomyserver:8080/echo.
• The function executed when the server receives a request on this route, usually written inabbreviated form as an arrow function because the syntax => points to the definition of thenameless function. The req parameter (short for “request”) and res parameter (short for“response”) give details about the connection, passed to the function by the app instance itself.

POST Method
To extend the functionality of our test server, let’s see how to define a route for the HTTP POST
method. It’s used by clients when they need to send extra data to the server beyond those included304|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

in the request header. The --data option of the curl command automatically invokes the POST
method, and includes content that will be sent to the server via POST. The POST / HTTP/1.1 linein the following output shows that the POST method was used. However, our server defined only a
GET method, so an error occurs when we use curl to send a request via POST:$ curl http://myserver:8080/echo --data message="This is the POST request body"* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)
> POST / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: /> Content-Length: 37> Content-Type: application/x-www-form-urlencoded>* upload completely sent off: 37 out of 37 bytes* Mark bundle as not supporting multiuse< HTTP/1.1 404 Not Found< X-Powered-By: Express< Content-Security-Policy: default-src 'none'< X-Content-Type-Options: nosniff< Content-Type: text/html; charset=utf-8< Content-Length: 140< Date: Sat, 03 Jul 2021 02:22:45 GMT< Connection: keep-alive<<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>Error</title></head><body><pre>Cannot POST /</pre></body></html>* Connection #0 to host myserver left intact

In the previous example, running curl with the parameter --data message="This is the
POST request body" is equivalent to submitting a form containing the text field named
message, filled with This is the POST request body.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

305

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Because the server is configured with only one route for the / path, and that route only responds
to the HTTP GET method, so the response header has the line HTTP/1.1 404 Not Found. In
addition, Express automatically generated a short HTML response with the warning Cannot
POST.
Having seen how to generate a POST request through curl, let’s write an Express program thatcan successfully handle the request.
First, note that the Content-Type field in the request header says that the data sent by the client
is in the application/x-www-form-urlencoded format. Express does not recognize that format
by default, so we need to use the express.urlencoded module. When we include this module,
the req object—passed as a parameter to the handler function—has the req.body.message
property set, which corresponds to the message field sent by the client. The module is loaded withapp.use, which should be placed before the declaration of routes:
const express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.use(express.urlencoded({ extended: true }))Once this is done, it would be enough to change app.get to app.post in the existing route tofulfill requests made via POST and to recover the request body:
app.post('/', (req, res) => {res.send(req.body.message)})

Instead of replacing the route, another possibility would be to simply add this new route, because
Express identifies the HTTP method in the request header and uses the appropriate route. Because
we are interested in adding more than one functionality to this server, it is convenient to separate
each one with its own path, such as /echo and /ip.

Path and Function Handler
Having defined which HTTP method will respond to the request, we now need to define a specificpath for the resource and a function that processes and generates a response to the client.
To expand the echo functionality of the server, we can define a route using the POST method with306|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

the path /echo:
app.post('/echo', (req, res) => {res.send(req.body.message)})

The req parameter of the handler function contains all the request details stored as properties.
The content of the message field in the request body is available in the req.body.message
property. The example simply sends this field is sent back to the client through theres.send(req.body.message) call.
Remember that the changes you make take effect only after the server is restarted. Because you
are running the server from a terminal window during the examples in this chapter, you can shut
down the server by pressing Ctrl + C on that terminal. Then rerun the server through the nodeindex.js command. The response obtained by the client to the curl request we showed before is
now successful:$ curl http://myserver:8080/echo --data message="This is the POST request body"This is the POST request body

Other Ways to Pass and Return Information in a GET Request
It might be excessive to use the HTTP POST method if only short text messages like the one used in
the example will be sent. In such cases, data can be sent in a query string that starts with aquestion mark. Thus, the string ?message=This+is+the+message could be included within therequest path of the HTTP GET method. The fields used in the query string are available to theserver in the req.query property. Therefore, a field named message is available in thereq.query.message property.
Another way to send data via the HTTP GET method is to use Express’s route parameters:
app.get('/echo/:message', (req, res) => {res.send(req.params.message)})

The route in this example matches requests made with the GET method using the path/echo/:message, where :message is a placeholder for any term sent with that label by the client.
These parameters are accessible in the req.params property. With this new route, the server’s
echo function can be requested more succinctly by the client:

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

307Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming$ curl http://myserver:8080/echo/hello
hello

In other situations, the information the server needs to process the request do not need to be
explicitly provided by the client. For instance, the server has another way to retrieve the client’s
public IP address. That information is present in the req object by default, in the req.ip
property:
app.get('/ip', (req, res) => {res.send(req.ip)})

Now the client can request the /ip path with the GET method to find its own public IP address:$ curl http://myserver:8080/ip
187.34.178.12

Other properties of the req object can be modified by the client, especially the request headersavailable in req.headers. The req.headers.user-agent property, for example, identifies
which program is making the request. Although it is not common practice, the client can change
the contents of this field, so the server should not use it to reliably identify a particular client. It iseven more important to validate the data explicitly provided by the client, to avoid inconsistencies
in boundaries and formats that could adversely affect the application.

Adjustments to the Response
As we’ve seen in previous examples, the res parameter is responsible for returning a response to
the client. Furthermore, the res object can change other aspects of the response. You may havenoticed that, although the responses we’ve implemented so far are just brief plain text messages,
the Content-Type header of the responses is using text/html; charset=utf-8. Although thisdoes not prevent the plain text response from being accepted, it will be more correct if we
redefine this field in the response header to text/plain with the setting
res.type('text/plain').
Other types of response adjustments involve using cookies, which allow the server to identify aclient that has previously made a request. Cookies are important for advanced features, such as
creating private sessions that associate requests to a specific user, but here we’ll just look at a
simple example of how to use a cookie to identify a client that has previously accessed the server.

308|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

Given the modularized design of Express, cookie management must be installed with the npm
command before being used in the script:$ npm install cookie-parser

After installation, cookie management must be included in the server script. The following
definition should be included near the beginning of the file:const cookieParser = require('cookie-parser')app.use(cookieParser())

To illustrate the use of cookies, let’s modify the route’s handler function with the / root path that
already exists in the script. The req object has a req.cookies property, where cookies sent in therequest header are kept. The res object, on the other hand, has a res.cookie() method thatcreates a new cookie to be sent to the client. The handler function in the following example checks
whether a cookie with the name known exists in the request. If such a cookie does not exist, theserver assumes that this is a first-time visitor and sends it a cookie with that name through theres.cookie('known', '1') call. We arbitrarily assign the value 1 to the cookie because it is
supposed to have some content, but the server doesn’t consult that value. This application justassumes that the simple presence of the cookie indicates that the client has already requested thisroute before:
app.get('/', (req, res) => {res.type('text/plain')if ( req.cookies.known === undefined ){res.cookie('known', '1')
res.send('Welcome, new visitor!')}else
res.send('Welcome back, visitor');})By default, curl does not use cookies in transactions. But it has options to store (-ccookies.txt) and send stored cookies (-b cookies.txt):$ curl http://myserver:8080/ -c cookies.txt -b cookies.txt -v* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

309

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming> GET / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: />* Mark bundle as not supporting multiuse< HTTP/1.1 200 OK< X-Powered-By: Express< Content-Type: text/plain; charset=utf-8* Added cookie known="1" for domain myserver, path /, expire 0< Set-Cookie: known=1; Path=/< Content-Length: 21< ETag: W/"15-l7qrxcqicl4xv6EfA5fZFWCFrgY"< Date: Sat, 03 Jul 2021 23:45:03 GMT< Connection: keep-alive<* Connection #0 to host myserver left intact
Welcome, new visitor!

Because this command was the first access since cookies were implemented on the server, theclient did not have any cookies to include in the request. As expected, the server did not identify
the cookie in the request and therefore included the cookie in the response headers, as indicatedin the Set-Cookie: known=1; Path=/ line of the output. Since we have enabled cookies incurl, a new request will include the cookie known=1 in the request headers, allowing the server
to identify the cookie’s presence:$ curl http://myserver:8080/ -c cookies.txt -b cookies.txt -v* Trying 192.168.1.225:8080...
* TCP_NODELAY set* Connected to myserver (192.168.1.225) port 8080 (#0)
> GET / HTTP/1.1> Host: myserver:8080> User-Agent: curl/7.68.0>Accept: /> Cookie: known=1>* Mark bundle as not supporting multiuse< HTTP/1.1 200 OK< X-Powered-By: Express< Content-Type: text/plain; charset=utf-8< Content-Length: 21< ETag: W/"15-ATq2flQYtLMYIUpJwwpb5SjV9Ww"< Date: Sat, 03 Jul 2021 23:45:47 GMT

310|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics< Connection: keep-alive<* Connection #0 to host myserver left intact
Welcome back, visitor

Cookie Security
The developer should be aware of potential vulnerabilities when using cookies to identify clientsmaking requests. Attackers can use techniques such as cross-site scripting (XSS) and cross-site
request forgery (CSRF) to steal cookies from a client and thereby impersonate them when making
a request to the server. Generally speaking, these types of attacks use non-validated comment
fields or meticulously constructed URLs to insert malicious JavaScript code into the page. When
executed by an authentic client, this code can copy valid cookies and store them or forward themto another destination.
Therefore, especially in professional applications, it is important to install and use more
specialized Express features, known as middleware. The express-session or cookie-session
module provide more complete and secure control over session and cookie management. These
components enable extra controls to prevent cookies from being diverted from their originalissuer.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

311

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Guided Exercises
1. How can the content of the comment field, sent within a query string of the HTTP GET method,be read in a handler function?

2. Write a route that uses the HTTP GET method and the /agent path to send back to the client thecontents of the user-agent header.

3. Express.js has a feature called route parameters, where a path such as /user/:name can beused to receive the name parameter sent by the client. How can the name parameter be accessed
within the handler function of the route?

312|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

Explorational Exercises
1. If a server’s host name is myserver, which Express route would receive the submission in theform below?
<form action="/contact/feedback" method="post"> ... </form>

2. During server development, the programmer is not able to read the req.body property, evenafter verifying that the client is correctly sending the content via the HTTP POST method. Whatis a likely cause for this problem?

3. What happens when the server has a route set to the path /user/:name and the client makes arequest to /user/?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

313

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

SummaryThis lesson explains how to write Express scripts to receive and handle HTTP requests. Express
uses the concept of routes to define the resources available to clients, which gives you great
flexibility to build servers for any kind of web application. This lesson goes through the following
concepts and procedures:• Routes that use the HTTP GET and HTTP POST methods.
• How form data is stored in the request object.
• How to use route parameters.
• Customizing response headers.
• Basic cookie management.

314|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

Answers to Guided Exercises
1. How can the content of the comment field, sent within a query string of the HTTP GET method,be read in a handler function?
The comment field is available in the req.query.comment property.
2. Write a route that uses the HTTP GET method and the /agent path to send back to the client thecontents of the user-agent header.
app.get('/agent', (req, res) => {res.send(req.headers.user-agent)})

3. Express.js has a feature called route parameters, where a path such as /user/:name can beused to receive the name parameter sent by the client. How can the name parameter be accessed
within the handler function of the route?
The name parameter is accessible in the req.params.name property.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

315Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Answers to Explorational Exercises
1. If a server’s host name is myserver, which Express route would receive the submission in theform below?
<form action="/contact/feedback" method="post"> ... </form>

app.post('/contact/feedback', (req, res) => {...
})2. During server development, the programmer is not able to read the req.body property, evenafter verifying that the client is correctly sending the content via the HTTP POST method. Whatis a likely cause for this problem?
The programmer did not include the express.urlencoded module, which lets Express extract
the body of a request.
3. What happens when the server has a route set to the path /user/:name and the client makes arequest to /user/?
The server will issue a 404 Not Found response, because the route requires the :nameparameter to be provided by the client.

316|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

035.2 Lesson 2
Certificate:

Web Development Essentials

Version:

1.0

Topic:

035 NodeJS Server Programming

Objective:

035.2 NodeJS Express Basics

Lesson:2 of 2Introduction
Web servers have very versatile mechanisms to produce responses to client requests. For somerequests, it’s enough for the web server to provide a static, unprocessed reponse, because therequested resource is the same for any client. For instance, when a client requests an image that isaccessible to everyone, it is enough for the server to send the file containing the image.
But when responses are dynamically generated, they may need to be better structured thansimple lines written in the server script. In such cases, it is convenient for the web server to beable to generate a complete document, which can be interpreted and rendered by the client. In thecontext of web application development, HTML documents are commonly created as templates
and kept separate from the server script, which inserts dynamic data in predetermined places in
the appropriate template and then sends the formatted response to the client.
Web applications often consume both static and dynamic resources. An HTML document, even if
it was dynamically generated, may have references to static resources such as CSS files andimages. To demonstrate how Express helps handle this kind of demand, we’ll first set up an
example server that delivers static files and then implement routes that generate structured,
template-based responses.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

317

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Static Files
The first step is to create the JavaScript file that will run as a server. Let’s follow the same patterncovered in previous lessons to create a simple Express application: first create a directory called
server and then install the base components with the npm command:$ mkdir server$ cd server/$ npm init
$ npm install express

For the entry point, any filename can be used, but here we will use the default filename:index.js. The following listing shows a basic index.js file that will be used as a starting point
for our server:
const express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.listen(port, host, () => {console.log(`Server ready at http://${host}:${port}`)})You don’t have to write explicit code to send a static file. Express has middleware for this purpose,
called express.static. If your server needs to send static files to the client, just load theexpress.static middleware at the beginning of the script:
app.use(express.static('public'))

The public parameter indicates the directory that stores files the client can request. Paths
requested by clients must not include the public directory, but only the filename, or the path tothe file relative to the public directory. To request the public/layout.css file, for example, theclient makes a request to /layout.css.

Formatted Output
While sending static content is straightforward, dynamically generated content can vary widely.
Creating dynamic responses with short messages makes it easy to test applications in their initial318|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

stages of development. For example, the following is a test route that just send back to the client a
message that it sent by the HTTP POST method. The response can just replicate the message
content in plain text, without any formatting:app.post('/echo', (req, res) => {res.send(req.body.message)})

A route like this is a good example to use when learning Express and for diagnostics purposes,
where a raw response sent with res.send() is enough. But a useful server must be able toproduce more complex responses. We’ll move on now to develop that more sophisticated type ofroute.
Our new application, instead of just sending back the contents of the current request, maintains acomplete list of the messages sent in previous requests by each client and sends back each client’s
list when requested. A response merging all messages is an option, but other formatted output
modes are more appropriate, especially as responses become more elaborate.
To receive and store client messages sent during the current session, first we need to include extra
modules for handling cookies and data sent via the HTTP POST method. The only purpose of thefollowing example server is to log messages sent via POST and display previously sent messages
when the client issues a GET request. So there are two routes for the / path. The first route fulfills
requests made with the HTTP POST method and the second fulfills requests made with the HTTP
GET method:
const express = require('express')
const app = express()
const host = "myserver"
const port = 8080
app.use(express.static('public'))
const cookieParser = require('cookie-parser')app.use(cookieParser())
const { v4: uuidv4 } = require('uuid')
app.use(express.urlencoded({ extended: true }))// Array to store messages
let messages = []Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

319

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

app.post('/', (req, res) => {// Only JSON enabled requests
if ( req.headers.accept != "application/json" ){res.sendStatus(404)return}// Locate cookie in the request
let uuid = req.cookies.uuid// If there is no uuid cookie, create a new one
if ( uuid === undefined )uuid = uuidv4()// Add message first in the messages arraymessages.unshift({uuid: uuid, message: req.body.message})// Collect all previous messages for uuid
let user_entries = []messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})// Update cookie expiration datelet expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })// Send back JSON response
res.json(user_entries)})
app.get('/', (req, res) => {// Only JSON enabled requests
if ( req.headers.accept != "application/json" ){res.sendStatus(404)return320|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics}// Locate cookie in the request
let uuid = req.cookies.uuid// Client's own messages
let user_entries = []// If there is no uuid cookie, create a new one
if ( uuid === undefined ){uuid = uuidv4()}
else {// Collect messages for uuid
messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})}// Update cookie expiration datelet expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })// Send back JSON response
res.json(user_entries)})
app.listen(port, host, () => {console.log(`Server ready at http://${host}:${port}`)})We kept the static files configuration at the top, because it will soon be useful to provide static files
such as layout.css. In addition to the cookie-parser middleware introduced in the previous
chapter, the example also includes the uuid middleware to generate a unique identification
number passed as a cookie to each client that sends a message. If not already installed in theexample server directory, these modules can be installed with the command npm installcookie-parser uuid.
The global array called messages stores the messages sent by all clients. Each item in this arrayconsists of an object with the properties uuid and message.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

321Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

What’s really new in this script is the res.json() method, used at the end of the two routes togenerate a response in JSON format with the array containing the messages already sent by theclient:// Send back JSON response
res.json(user_entries)

JSON is a plain text format that allows you to group a set of data into a single structure that is
associative: that is, content is expressed as keys and values. JSON is particularly useful when
responses are going to be processed by the client. Using this format, a JavaScript object or arraycan be easily reconstructed on the client side with all the properties and indexes of the original
object on the server.
Because we are structuring each message in JSON, we refuse requests that do not containapplication/json in their accept header:// Only JSON enabled requests
if ( req.headers.accept != "application/json" ){res.sendStatus(404)return}A request made with a plain curl command to insert a new message will not be accepted, because
curl by default does not specify application/json in the accept header:$ curl http://myserver:8080/ --data message="My first message" -c cookies.txt -b cookies.txt
Not Found

The -H "accept: application/json" option changes the request header to specify the
response’s format, which this time will be accepted and answered in the specified format:$ curl http://myserver:8080/ --data message="My first message" -c cookies.txt -b cookies.txt-H "accept: application/json"["My first message"]

Getting messages using the other route is done in a similar way, but this time using the HTTP GET
method:322|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics$ curl http://myserver:8080/ -c cookies.txt -b cookies.txt -H "accept: application/json"["Another message","My first message"]

Templates
Responses in formats such as JSON are convenient for communicating between programs, but themain purpose of most web application servers is to produce HTML content for humanconsumption. Embedding HTML code within JavaScript code is not a good idea, because mixing
languages in the same file makes the program more susceptible to errors and harms themaintenance of the code.
Express can work with different template engines that separate out the HTML for dynamic
content; the full list can be found at the Express template engines site. One of the most popular
template engines is Embedded JavaScript (EJS), which allows you to create HTML files with specifictags for dynamic content insertion.
Like other Express components, EJS needs to be installed in the directory where the server isrunning:$ npm install ejs

Next, the EJS engine must be set as the default renderer in the server script (near the beginning of
the index.js file, before the route definitions):
app.set('view engine', 'ejs')

The response generated with the template is sent to the client with the res.render() function,
which receives as parameters the template file name and an object containing values that will beaccessible from within the template. The routes used in the previous example can be rewritten to
generate HTML responses as well as JSON:
app.post('/', (req, res) => {let uuid = req.cookies.uuid
if ( uuid === undefined )uuid = uuidv4()
messages.unshift({uuid: uuid, message: req.body.message})

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

323

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

let user_entries = []messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})
let expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })if ( req.headers.accept == "application/json" )res.json(user_entries)
else
res.render('index', {title: "My messages", messages: user_entries})})
app.get('/', (req, res) => {let uuid = req.cookies.uuid
let user_entries = []if ( uuid === undefined ){uuid = uuidv4()}
else {
messages.forEach( (entry) => {if ( entry.uuid == req.cookies.uuid )user_entries.push(entry.message)})}
let expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })if ( req.headers.accept == "application/json" )res.json(user_entries)
else
res.render('index', {title: "My messages", messages: user_entries})
})

324

|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

Note that the format of the response depends on the accept header found in the request:
if ( req.headers.accept == "application/json" )res.json(user_entries)
else
res.render('index', {title: "My messages", messages: user_entries})

A response in JSON format is sent only if the client explicitly requests it. Otherwise, the response isgenerated from the index template. The same user_entries array feeds both the JSON output
and the template, but the object used as a parameter for the latter also has the title: "Mymessages" property, which will be used as a title inside the template.

HTML Templates
Like static files, the files containing HTML templates reside in their own directory. By default, EJS
assumes the template files are in the views/ directory. In the example, a template named index
was used, so EJS looks for the views/index.ejs file. The following listing is the content of asimple views/index.ejs template that can be used with the example code:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title><%= title %></title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/layout.css"></head><body><div id="interface"><form action="/" method="post"><p><input type="text" name="message"><input type="submit" value="Submit"></p></form><ul><% messages.forEach( (message) => { %><li><%= message %></li><% }) %>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

325

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming</ul></div></body></html>The first special EJS tag is the <title> element in the <head> section:<%= title %>During the rendering process, this special tag will be replaced by the value of the title propertyof the object passed as a parameter to the res.render() function.
Most of the template is made up of conventional HTML code, so the template contains the HTML
form for sending new messages. The test server responds to the HTTP GET and POST methods forthe same path /, hence the action="/" and method="post" attributes in the form tag.
Other parts of the template are a mixture of HTML code and EJS tags. EJS has tags for specificpurposes within the template:<% … %>
Inserts flow control. No content is directly inserted by this tag, but it can be used withJavaScript structures to choose, repeat, or suppress sections of HTML. Example starting a loop:<% messages.forEach( (message) => { %><%# … %>
Defines a comment, whose content is ignored by the parser. Unlike comments written in HTML,these comments are not visible to the client.
<%= … %>
Inserts the escaped content of the variable. It is important to escape unknown content to avoid
JavaScript code execution, which can open loopholes for cross-site Scripting (XSS) attacks.
Example: <%= title %><%- … %>
Inserts the content of the variable without escaping.
The mix of HTML code and EJS tags is evident in the snippet where client messages are rendered
as an HTML list:

326|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics<ul><% messages.forEach( (message) => { %><li><%= message %></li><% }) %></ul>

In this snippet, the first <% … %> tag starts a forEach statement that loops through all theelements of the message array. The <% and %> delimiters let you control the snippets of HTML. A
new HTML list item, <li><%= message %></li>, will be produced for each element of
messages. With these changes, the server will send the response in HTML when a request like thefollowing is received:$ curl http://myserver:8080/ --data message="This time" -c cookies.txt -b cookies.txt<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>My messages</title><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="/layout.css"></head><body><div id="interface"><form action="/" method="post"><p><input type="text" name="message"><input type="submit" value="Submit"></p></form><ul><li>This time</li><li>in HTML</li></ul></div>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

327

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming</body></html>The separation between the code for processing the requests and the code for presenting the
response makes the code cleaner and allows a team to divide application development between
people with distinct specialties. A web designer, for example, can focus on the template files inviews/ and related stylesheets, which are provided as static files stored in the public/ directoryon the example server.

328|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

Guided Exercises
1. How should express.static be configured so that clients can request files in the assets
directory?

2. How can the response’s type, which is specified in the request’s header, be identified within an
Express route?

3. Which method of the res (response) route parameter generates a response in JSON format
from a JavaScript array called content?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

329

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Explorational Exercises
1. By default, Express template files are in the views directory. How can this setting be modified
so that template files are stored in templates?

2. Suppose a client receives an HTML response with no title (i.e. <title></title>). Afterverifying the EJS template, the developer finds the <title><% title %></title> tag in thehead section of the file. What is the likely cause of the problem?

3. Use EJS template tags to write a <h2></h2> HTML tag with the contents of the JavaScript
variable h2. This tag should be rendered only if the h2 variable is not empty.

330|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

SummaryThis lesson covers the basic methods Express.js provides to generate static and formated yet
dynamic responses. Little effort is required to set up an HTTP server for static files and the EJS
templating system provides an easy way for generating dynamic content from HTML files. Thislesson goes through the following concepts and procedures:• Using express.static for static file responses.
• How to create a response to match the content type field in the request header.
• JSON-structured responses.
• Using EJS tags in HTML based templates.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

331Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Answers to Guided Exercises
1. How should express.static be configured so that clients can request files in the assets
directory?
A call to app.use(express.static('assets')) should be added to the server script.
2. How can the response’s type, which is specified in the request’s header, be identified within an
Express route?
The client sets acceptable types in the accept header field, which is mapped to thereq.headers.accept property.
3. Which method of the res (response) route parameter generates a response in JSON format
from a JavaScript array called content?
The res.json() method: res.json(content).

332|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.2 NodeJS Express Basics

Answers to Explorational Exercises
1. By default, Express template files are in the views directory. How can this setting be modified
so that template files are stored in templates?
The directory can be defined in the initial script settings with app.set('views','./templates').
2. Suppose a client receives an HTML response with no title (i.e. <title></title>). Afterverifying the EJS template, the developer finds the <title><% title %></title> tag in thehead section of the file. What is the likely cause of the problem?
The <%= %> tag should be used to enclose the contents of a variable, as in <%= title %>.
3. Use EJS template tags to write a <h2></h2> HTML tag with the contents of the JavaScript
variable h2. This tag should be rendered only if the h2 variable is not empty.
<% if ( h2 != "" ) { %><h2><%= h2 %></h2><% } %>

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

333

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

035.3 SQL Basics
Reference to LPI objectives
Web Development Essentials version 1.0, Exam 030, Objective 035.3
Weight3
Key knowledge areas• Establish a database connection from NodeJS• Retrieve data from the database in NodeJS• Execute SQL queries from NodeJS• Create simple SQL queries excluding joins• Understand primary keys
• Escape variables used in SQL queries• Awareness of SQL injections
Partial list of the used files, terms and utilities• sqlite3 NPM module• Database.run(),Database.each()

Database.close(),Database.all(),• CREATE TABLE• INSERT, SELECT, DELETE, UPDATE

334|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Database.get(),Web Development Essentials (030) (Version 1.0) | 035.3 SQL Basics

035.3 Lesson 1
Certificate:

Web Development Essentials

Version:

1.0

Topic:

035 NodeJS Server Programming

Objective:

035.3 SQL Basics

Lesson:1 of 1Introduction
Although you can write your own functions to implement persistent storage, it may be moreconvenient to use a database management system to speed up development and ensure better
security and stability for table-formatted data. The most popular strategy for storing data
organized in interrelated tables, especially when those tables are heavily queried and updated, is
to install a relational database that supports Structured Query Language (SQL), a language geared
towards relational databases. Node.js supports various SQL database management systems.
Following the principles of portability and user space execution adopted by Node.js Express,
SQLite is an appropriate choice for persistent storage of data used by this type of HTTP server.

SQL
The Structured Query Language is specific to databases. Write and read operations are expressedin sentences called statements and queries. Both statements and queries are made up of clauses,
which define the conditions for executing the operation.
Names and email addresses, for example, can be stored in a database table that contains name andemail fields. A database can contain several tables, so each table must have a unique name. If we

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

335

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

use the name contacts for the names and emails table, a new record can be inserted with thefollowing statement:
INSERT INTO contacts (name, email) VALUES ("Carol", "carol@example.com");This insertion statement is composed of the INSERT INTO clause, which defines the table andfields where the data will be inserted. The second clause, VALUES, sets the values that will beinserted. It is not necessary to capitalize clauses, but it is common practice, so as to better
recognize SQL keywords within a statement or query.
A query on the contacts table is done in a similar way, but using the SELECT clause:
SELECT email FROM contacts;
dave@example.com
carol@example.com

In this case, the SELECT email clause selects one field from entries in the contacts table. The
WHERE clause restricts the query to specific rows:
SELECT email FROM contacts WHERE name = "Dave";
dave@example.com

SQL has many other clauses, and we’ll look at some of them in later sections. But first it isnecessary to see how to integrate the SQL database with Node.js.

SQLiteSQLite is probably the simplest solution for incorporating SQL database features into an
application. Unlike other popular database management systems, SQLite is not a database server
to which a client connects. Instead, SQLite provides a set of functions that allow the developer tocreate a database like a conventional file. In the case of an HTTP server implemented with Node.js
Express, this file is usually located in the same directory as the server script.
Before using SQLite in Node.js, you need to install the sqlite3 module. Run the following
command in the server’s installation directory; i.e., the directory containing the Node.js script you
will run.
$ npm install sqlite3

336|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.3 SQL Basics

Be aware that there are several modules that support SQLite, such as better-sqlite3, whoseusage is subtly different from sqlite3. The examples in this lesson are for the sqlite3 module,
so they might not work as expected if you choose another module.

Opening the Database
To demonstrate how a Node.js Express server can work with an SQL database, let’s write a scriptthat stores and displays messages sent by a client identified by a cookie. Messages are sent by theclient via the HTTP POST method and the server response can be formatted as JSON or HTML(from a template), depending on the format requested by the client. This lesson won’t go into
detail about using HTTP methods, cookies, and templates. The code snippets shown here assume
that you already have a Node.js Express server where these features are configured and available.
The simplest way to store the messages sent by the client is to store them in a global array, where
each message previously sent is associated with a unique identification key for each client. This
key can be sent to the client as a cookie, which is presented to the server on future requests toretrieve its previous messages.
However, this approach has a weakness: because messages are stored only in a global array, allmessages will be lost when the current server session is terminated. This is one of the advantagesof working with databases, because the data is persistently stored and is not lost if the server isrestarted.
Using the index.js file as the main server script, we can incorporate the sqlite3 module andindicate the file that serves as the database, as follows:
const sqlite3 = require('sqlite3')
const db = new sqlite3.Database('messages.sqlite3');

If it doesn’t already exist, the messages.sqlite3 file will be created in the same directory as theindex.js file. Inside this single file, all structures and respective data will be stored. All database
operations performed in the script will be intermediated by the db constant, which is the namegiven to the new sqlite3 object that opens the messages.sqlite3 file.

Structure of a Table
No data can be inserted into the database until at least one table is created. Tables are createdwith the statement CREATE TABLE:
db.run('CREATE TABLE IF NOT EXISTS messages (id INTEGER PRIMARY KEY AUTOINCREMENT, uuid

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

337

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

CHAR(36), message TEXT)')The db.run() method is used to execute SQL statements in the database. The statement itself is
written as a parameter for the method. Although SQL statements must end with a semicolon whenentered in a command-line processor, the semicolon is optional in statements passed asparameters in a program.
Because the run method will be performed every time the script is executed with node index.js,
the SQL statement includes the conditional clause IF NOT EXISTS to avoid errors in future
executions when the messages table already exists.
The fields that make up the messages table are id, uuid, and message. The id field is a uniqueinteger used to identify each entry in the table, so it is created as PRIMARY KEY. Primary keys
cannot be null and there cannot be two identical primary keys in the same table. Therefore,
almost every SQL table has a primary key in order to track the table’s contents. Although it ispossible to explicitly choose the value for the primary key of a new record (provided it does not
yet exist in the table), it is convenient for the key to be generated automatically. The
AUTOINCREMENT flag in the id field is used for this purpose.

NOTE

Explicit setting of primary keys in SQLite is optional, because SQLite itself creates a
primary key automatically. As stated in the SQLite documentation: “In SQLite, tablerows normally have a 64-bit signed integer ROWID which is unique among all rows
in the same table. If a table contains a column of type INTEGER PRIMARY KEY, thenthat column becomes an alias for the ROWID. You can then access the ROWID using
any of four different names, the original three names described above, or the namegiven to the INTEGER PRIMARY KEY column. All these names are aliases for one
another and work equally well in any context.”

The uuid and message fields store the client identification and message content, respectively. A
field of type CHAR(36) stores a fixed amount of 36 characters, and a field of type TEXT stores texts
of arbitrary length.

Data Entry
The main function of our example server is to store messages that are linked to the client that sent
them. The client sends the message in the message field in the body of the request sent with the
HTTP POST method. The client’s identification is in a cookie called uuid. With this information, we
can write the Express route to insert new messages in the database:
app.post('/', (req, res) => {338|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.3 SQL Basics

let uuid = req.cookies.uuid
if ( uuid === undefined )uuid = uuidv4()// Insert new message into the databasedb.run('INSERT INTO messages (uuid, message) VALUES (?, ?)', uuid, req.body.message)// If an error occurrs, err object contains the error message.
db.all('SELECT id, message FROM messages WHERE uuid = ?', uuid, (err, rows) => {let expires = new Date(Date.now());
expires.setDate(expires.getDate() + 30);
res.cookie('uuid', uuid, { expires: expires })if ( req.headers.accept == "application/json" )res.json(rows)
else
res.render('index', {title: "My messages", rows: rows})})})

This time, the db.run() method executes an insert statement, but note that the uuid andreq.body.message are not written directly into the statement line. Instead, question marks were
substituted for the values. Each question mark corresponds to a parameter that follows the SQL
statement in the db.run() method.
Using question marks as placeholders in the statement that is executed in the database makes it
easier for SQLite to distinguish between the static elements of the statement and its variable data.
This strategy allows SQLite to escape or sanitize the variable contents that are part of thestatement, preventing a common security breach called SQL injection. In that attack, malicious
users insert SQL statements into the variable data in the hope that the statements will be executed
inadvertently; sanitizing foils the attack by disabling dangerous characters in the data.

Queries
As shown in the sample code, our intent is to use the same route to insert new messages into the
database and to generate the list of previously sent messages. The db.all() method returns thecollection of all entries in the table that match the criteria defined in the query.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

339

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Unlike the statements performed by db.run(), db.all() generates a list of records that arehandled by the arrow function designated in the last parameter:(err, rows) => {}This function, in turn, takes two parameters: err and rows. The err parameter will be used if anerror occurs that prevents the execution of the query. Upon success, all records are available in
the rows array, where each element is an object corresponding to a single record from the table.
The properties of this object correspond to the field names indicated in the query: uuid andmessage.
The rows array is a JavaScript data structure. As such, it can be used to generate responses withmethods provided by Express, such as res.json() and res.render(). When rendered inside an
EJS template, a conventional loop can list all records:<ul><% rows.forEach( (row) => { %><li><strong><%= row.id %></strong>: <%= row.message %></li><% }) %></ul>Instead of filling the rows array with all the records returned by the query, in some cases it might
be more convenient to treat each record individually with the db.each() method. The
db.each() method syntax is similar to the db.all() method, but the row parameter in (err,row) ⇒ {} matches a single record at a time.

Changing the Contents of the Database
So far, our client can only add and query messages on the server. Since the client now knows theid of the previously sent messages, we can implement a function to modify a specific record. The
modified message can also be sent to an HTTP POST method route, but this time with a routeparameter to catch the id given by the client in the request path:
app.post('/:id', (req, res) => {let uuid = req.cookies.uuid
if ( uuid === undefined ){uuid = uuidv4()// 401 Unauthorized
res.sendStatus(401)340|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.3 SQL Basics}
else {// Update the stored message// using named parameters
let param = {$message: req.body.message,$id: req.params.id,$uuid: uuid}
db.run('UPDATE messages SET message = $message WHERE id = $id AND uuid = $uuid', param,function(err){
if ( this.changes > 0 ){// A 204 (No Content) status code means the action has// been enacted and no further information is to be supplied.
res.sendStatus(204)}elseres.sendStatus(404)})}})

This route demonstrates how to use the UPDATE and WHERE clauses to modify an existing record.
An important difference from the previous examples is the use of named parameters, where
values are bundled into a single object (param) and passed to the db.run() method instead of
specifying each value by itself. In this case, the field names (preceded by $) are the object’s
properties. Named parameters allow the use of field names (preceded by $) as placeholders
instead of question marks.
A statement like the one in the example will not cause any modification to the database if thecondition imposed by the WHERE clause fails to match some record in the table. To evaluate
whether any records were modified by the statement, a callback function can be used as the lastparameter of the db.run() method. Inside the function, the number of changed records can bequeried from this.changes. Note that arrow functions cannot be used in this case, because only
regular functions of the form function(){} define the this object.
Removing a record is very similar to modifying it. We can, for example, continue using the :idroute parameter to identify the message to be deleted, but this time in a route invoked by the
Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

341

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programmingclient’s HTTP DELETE method:
app.delete('/:id', (req, res) => {let uuid = req.cookies.uuid
if ( uuid === undefined ){uuid = uuidv4()
res.sendStatus(401)}else {// Named parameters
let param = {$id: req.params.id,$uuid: uuid}
db.run('DELETE FROM messages WHERE id = $id AND uuid = $uuid', param, function(err){
if ( this.changes > 0 )res.sendStatus(204)elseres.sendStatus(404)})}})

Records are deleted from a table with the DELETE FROM clause. We again used the callback
function to evaluate how many entries have been removed from the table.

Closing the Database
Once defined, the db object can be referenced at any time during script execution, because thedatabase file remains open throughout the current session. It is not common to close the database
while the script is running.
A function to close the database is useful, however, to avoid abruptly closing the database when
the server process finishes. Although unlikely, abruptly shutting down the database can result ininconsistencies if in-memory data is not yet committed to the file. For instance, an abrupt
database shutdown with data loss can occur if the script is terminated by the user by pressing theCtrl + C keyboard shortcut.
In the Ctrl + C scenario just described, the process.on() method can intercept signals sent by theoperating system and execute an orderly shutdown of both the database and the server:

342|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.3 SQL Basics

process.on('SIGINT', () => {db.close()server.close()
console.log('HTTP server closed')})

The Ctrl + C shortcut invokes the SIGINT operating system signal, which terminates a foregroundprogram in the terminal. Before ending the process when receiving the SIGINT signal, the system
invokes the callback function (the last parameter in the process.on() method). Inside thecallback function, you can put any cleanup code, in particular the db.close() method to closethe database and server.close(), which gracefully closes the Express instance itself.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

343

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Guided Exercises
1. What is the purpose of a primary key in a SQL database table?

2. What is the difference between querying using db.all() and db.each()?

3. Why is it important to use placeholders and not include data sent by the client directly in an
SQL statement or query?

344|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.3 SQL Basics

Explorational Exercises
1. Which method in the sqlite3 module can be used to return only one table entry, even if thequery matches multiple entries?

2. Suppose the rows array was passed as a parameter to a callback function and contains theresult of a query made with db.all(). How can a field called price, which is present in thefirst position of rows, be referenced inside the callback function?

3. The db.run() method executes database modification statements, such as INSERT INTO. Afterinserting a new record into a table, how could you retrieve the primary key of the newly
inserted record?

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

345

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

SummaryThis lesson covers the basic use of SQL databases within Node.js Express applications. The
sqlite3 module offers a simple way of storing persistent data in a SQLite database, where asingle file contains the entire database and does not require a specialized database server. Thislesson goes through the following concepts and procedures:• How to establish a database connection from Node.js.
• How to create a simple table and the role of primary keys.
• Using the INSERT INTO SQL statement to add new data from within the script.
• SQL queries using standard SQLite methods and callback functions.
• Changing data in the database using UPDATE and DELETE SQL statements.

346|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | 035.3 SQL Basics

Answers to Guided Exercises
1. What is the purpose of a primary key in a SQL database table?
The primary key is the unique identification field for each record within a database table.
2. What is the difference between querying using db.all() and db.each()?
The db.all() method invokes the callback function with a single array containing all entries
corresponding to the query. The db.each() method invokes the callback function for eachresult row.
3. Why is it important to use placeholders and not include data sent by the client directly in an
SQL statement or query?
With placeholders, user-submitted data is escaped before being included in the query orstatement. This hampers SQL injection attacks, where SQL statements are placed insidevariable data in an attempt to perform arbitrary operations on the database.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

347

Web Development Essentials (030) (Version 1.0) | Topic 035: NodeJS Server Programming

Answers to Explorational Exercises
1. Which method in the sqlite3 module can be used to return only one table entry, even if thequery matches multiple entries?
The db.get() method has the same syntax as db.all(), but returns only the first entry
corresponding to the query.
2. Suppose the rows array was passed as a parameter to a callback function and contains theresult of a query made with db.all(). How can a field called price, which is present in thefirst position of rows, be referenced inside the callback function?
Each item in rows is an object whose properties correspond to database field names. So thevalue of the price field in the first result is in rows[0].price.
3. The db.run() method executes database modification statements, such as INSERT INTO. Afterinserting a new record into a table, how could you retrieve the primary key of the newly
inserted record?
A regular function of the form function(){} can be used as the callback function of the
db.run() method. Inside it, the this.lastID property contains the primary key value of thelast inserted record.

348|

learning.lpi.org|

Licensed under CC BY-NC-ND 4.0.

|

Version: 2022-10-14

Web Development Essentials (030) (Version 1.0) | Imprint

Imprint© 2022 by Linux Professional Institute: Learning Materials, “Web Development Essentials (030)(Version 1.0)”.
PDF generated: 2022-10-14
This work is licensed under the Creative Commons Attribution-NonCommercial-NoDerivatives 4.0
International License (CC BY-NC-ND 4.0). To view a copy of this license, visit
https://creativecommons.org/licenses/by-nc-nd/4.0/
While Linux Professional Institute has used good faith efforts to ensure that the information andinstructions contained in this work are accurate, Linux Professional Institute disclaims all
responsibility for errors or omissions, including without limitation responsibility for damages
resulting from the use of or reliance on this work. Use of the information and instructions
contained in this work is at your own risk. If any code samples or other technology this work
contains or describes is subject to open source licenses or the intellectual property rights ofothers, it is your responsibility to ensure that your use thereof complies with such licenses and/or
rights.
The LPI Learning Materials are an initiative of Linux Professional Institute (https://lpi.org).
Learning Materials and their translations can be found at https://learning.lpi.org.
For questions and comments on this edition as well as on the entire project write an email to:learning@lpi.org.

Version: 2022-10-14|

Licensed under CC BY-NC-ND 4.0.

|

learning.lpi.org|

349