Foreword |
|
xi | |
|
Preface |
|
xiii | |
Chapter 1 The Web and its Future |
|
1 | (12) |
|
|
1 | (2) |
|
1.1.1 The 1960s: context of the Cold War |
|
|
2 | (1) |
|
1.1.2 The 1970s and 1980s: birth of the TCP/IP protocol |
|
|
2 | (1) |
|
1.1.3 The 1980s, 1990s and 2000s: evolution of the Internet to the WWW |
|
|
2 | (1) |
|
1.2 Phases of evolution of the Web |
|
|
3 | (4) |
|
1.2.1 1991-1999: Web 1.0, static or passive? |
|
|
4 | (1) |
|
1.2.2 2000-2010: Web 2.0, collaborative or social9 |
|
|
4 | (1) |
|
1.2.3 2010-2020: Web 3.0, semantic or smart? |
|
|
5 | (1) |
|
1.2.4 Since 2020: Web 4.0, intelligent |
|
|
5 | (2) |
|
1.3 Web application architecture |
|
|
7 | (6) |
|
1.3.1 The three levels of abstraction of an application |
|
|
7 | (1) |
|
1.3.2 One-tier architecture |
|
|
8 | (1) |
|
1.3.3 Two-tier architecture |
|
|
8 | (1) |
|
1.3.4 Three-tier architecture |
|
|
9 | (1) |
|
1.3.5 n-tier architecture |
|
|
10 | (3) |
Chapter 2 The Language of the Web: HTML5 |
|
13 | (88) |
|
|
13 | (5) |
|
|
13 | (1) |
|
2.1.2 Syntax and lexicon of the HTML5 language |
|
|
14 | (2) |
|
2.1.3 Basic rules of HTML5 |
|
|
16 | (1) |
|
2.1.4 Working environment |
|
|
17 | (1) |
|
2.2 Structure of an HTML5 document |
|
|
18 | (3) |
|
2.3 Structuring the content of a web page |
|
|
21 | (7) |
|
|
21 | (2) |
|
|
23 | (1) |
|
2.3.3 The new elements of HTML5 |
|
|
23 | (5) |
|
|
28 | (24) |
|
2.4.1 Paragraphs and texts |
|
|
28 | (19) |
|
|
47 | (4) |
|
|
51 | (1) |
|
|
52 | (6) |
|
2.5.1 Inserting a hyperlink: the a tag |
|
|
52 | (2) |
|
2.5.2 Types of hyperlinks |
|
|
54 | (3) |
|
2.5.3 Adding a tooltip to a link |
|
|
57 | (1) |
|
2.6 Inserting images and multimedia objects |
|
|
58 | (7) |
|
|
58 | (4) |
|
2.6.2 Audio and video media |
|
|
62 | (3) |
|
|
65 | (5) |
|
|
65 | (1) |
|
|
66 | (1) |
|
|
66 | (1) |
|
|
66 | (1) |
|
|
66 | (2) |
|
|
68 | (1) |
|
|
68 | (1) |
|
|
69 | (1) |
|
|
70 | (31) |
|
|
70 | (1) |
|
|
71 | (2) |
|
2.8.3 The form input tag and its variants |
|
|
73 | (13) |
|
|
86 | (7) |
|
2.8.5 Common attributes for form elements |
|
|
93 | (2) |
|
2.8.6 Several new attributes added with HTML5 |
|
|
95 | (6) |
Chapter 3 Style Sheets: CSS3 |
|
101 | (66) |
|
|
101 | (20) |
|
|
101 | (2) |
|
3.1.2 Syntax and structure of the CSS3 language |
|
|
103 | (7) |
|
|
110 | (9) |
|
3.1.4 Values and units used |
|
|
119 | (2) |
|
|
121 | (10) |
|
|
121 | (1) |
|
|
122 | (1) |
|
|
123 | (1) |
|
|
124 | (1) |
|
3.2.5 Text decoration and underlining |
|
|
124 | (1) |
|
|
125 | (1) |
|
|
125 | (1) |
|
3.2.8 Transforming text to lowercase or uppercase |
|
|
126 | (1) |
|
3.2.9 Indenting the first line of a paragraph |
|
|
126 | (1) |
|
|
127 | (1) |
|
|
127 | (1) |
|
|
127 | (1) |
|
3.2.13 Horizontal text alignment |
|
|
128 | (1) |
|
3.2.14 Vertical text alignment |
|
|
128 | (1) |
|
|
129 | (1) |
|
3.2.16 Text length and height |
|
|
130 | (1) |
|
|
130 | (1) |
|
|
131 | (2) |
|
3.3.1 Different bullet numbering styles |
|
|
131 | (1) |
|
3.3.2 Graphic style of bullets |
|
|
132 | (1) |
|
3.3.3 Removing lines from a bullet list |
|
|
132 | (1) |
|
3.4 Backgrounds, borders and shadows |
|
|
133 | (11) |
|
|
133 | (3) |
|
3.4.2 Borders and shadows |
|
|
136 | (8) |
|
|
144 | (4) |
|
3.5.1 Space between cells |
|
|
144 | (1) |
|
|
145 | (1) |
|
|
146 | (1) |
|
|
147 | (1) |
|
|
148 | (19) |
|
3.6.1 Concept of the box model |
|
|
148 | (2) |
|
3.6.2 Block or inline element |
|
|
150 | (1) |
|
3.6.3 Width and height of a box element |
|
|
151 | (2) |
|
|
153 | (2) |
|
|
155 | (2) |
|
3.6.6 Element positioning |
|
|
157 | (5) |
|
|
162 | (1) |
|
|
163 | (4) |
Chapter 4 Design and Creation of a Website |
|
167 | (18) |
|
4.1 Process of creating a website |
|
|
167 | (8) |
|
|
167 | (4) |
|
|
171 | (2) |
|
|
173 | (2) |
|
|
175 | (1) |
|
|
175 | (1) |
|
4.2 Ergonomics of the website |
|
|
175 | (6) |
|
4.2.1 Concept of ergonomics |
|
|
175 | (1) |
|
4.2.2 Ergonomics criterion |
|
|
176 | (3) |
|
|
179 | (1) |
|
|
179 | (1) |
|
4.2.5 Dimensions of web pages |
|
|
180 | (1) |
|
4.3 Different website types |
|
|
181 | (4) |
|
4.3.1 Search engine/metasearch engine |
|
|
181 | (1) |
|
|
181 | (1) |
|
4.3.3 Merchant site (e-commerce) |
|
|
182 | (1) |
|
4.3.4 Educational site (e-learning) |
|
|
183 | (1) |
|
|
183 | (2) |
Chapter 5 Practical Exercises |
|
185 | (138) |
|
5.1 PE1: structure of an HTML5 web page |
|
|
185 | (10) |
|
|
185 | (1) |
|
|
185 | (4) |
|
|
189 | (6) |
|
|
195 | (16) |
|
|
195 | (1) |
|
|
195 | (6) |
|
|
201 | (10) |
|
5.3 PE3: table formatting |
|
|
211 | (29) |
|
|
211 | (1) |
|
|
211 | (10) |
|
|
221 | (19) |
|
5.4 TP 4: media (image, video and audio) |
|
|
240 | (30) |
|
|
240 | (1) |
|
|
240 | (12) |
|
|
252 | (18) |
|
5.5 PE: element positioning |
|
|
270 | (26) |
|
|
270 | (1) |
|
|
270 | (12) |
|
|
282 | (14) |
|
5.6 PE6: creating a template model |
|
|
296 | (17) |
|
|
296 | (1) |
|
|
296 | (6) |
|
|
302 | (11) |
|
5.7 PE7: creating a website from A to Z |
|
|
313 | (10) |
|
5.7.1 Step 0: purpose of the site |
|
|
313 | (1) |
|
5.7.2 Step 1: functional scope |
|
|
313 | (2) |
|
5.7.3 Step 2: site mockup |
|
|
315 | (4) |
|
5.7.4 Step 3: choosing/defining the graphic charter |
|
|
319 | (1) |
|
5.7.5 Step 4: creating HTML/CSS mockups of the main pages |
|
|
320 | (1) |
|
5.7.6 Step 5: developing the site from mockups |
|
|
321 | (2) |
References |
|
323 | (2) |
Index |
|
325 | |