(Smtebooks - Eu) Thomas' Calculus in Si Units 1st Edition

Introduction to Web
Interaction Design
With HTML and CSS
Introduction to Web
Interaction Design
With HTML and CSS
Michael Macaulay
M2Z R M I ^ M ]2:2R M U U2\ H H T

CRC Press
Taylor & Francis Group
6000 Broken Sound Parkway NW, Suite 300
Boca Raton, FL 33487-2742
© 2018 by Taylor & Francis Group, LLC

CRC Press is an imprint of Taylor & Francis Group, an Informa business
No claim to original U.S. Government works
Printed on acid-free paper

Version Date: 20170407
International Standard Book Number-13: 978-1-1389-1185-7 (Paperback)
This book contains information obtained from authentic and highly regarded sources. Reasonable efforts have been made to
publish reliable data and information, but the author and publisher cannot assume responsibility for the validity of all materials
or the consequences of their use. The authors and publishers have attempted to trace the copyright holders of all material
reproduced in this publication and apologize to copyright holders if permission to publish in this form has not been obtained. If
any copyright material has not been acknowledged please write and let us know so we may rectify in any future reprint.
Except as permitted under U.S. Copyright Law, no part of this book may be reprinted, reproduced, transmitted, or utilized in any
form by any electronic, mechanical, or other means, now known or hereafter invented, including photocopying, microfilming,
and recording, or in any information storage or retrieval system, without written permission from the publishers.
For permission to photocopy or use material electronically from this work, please access www.copyright.com (http://www.copyright.
com/) or contact the Copyright Clearance Center, Inc. (CCC), 222 Rosewood Drive, Danvers, MA 01923, 978-750-8400. CCC is a
not-for-profit organization that provides licenses and registration for a variety of users. For organizations that have been granted
a photocopy license by the CCC, a separate system of payment has been arranged.
Trademark Notice: Product or corporate names may be trademarks or registered trademarks, and are used only for identification and
explanation without intent to infringe.
Library of Congress Cataloging‑in‑Publication Data
Names: Macaulay, Michael, author.

Title: Introduction to Web interaction design : with HTML and CSS / Michael
Macaulay.
Description: Boca Raton, FL : CRC Press, [2017] | Includes bibliographical
references.
Identifiers: LCCN 2016031177| ISBN 9781138911857 (pbk. : acid-free paper) |
ISBN 9781317432814 (web pdf) | ISBN 9781317432807 (epub) | ISBN
9781317432791 (mobipocket/Kindle) | ISBN 9781315692333 (master)
Subjects: LCSH: Web sites--Design. | Web site development. | Human-computer
interaction. | Computer software--Human factors.
Classification: LCC TK5105.888 .M25 2017 | DDC 006.7--dc23
LC record available at https://lccn.loc.gov/2016031177
Visit the Taylor & Francis Web site at

http://www.taylorandfrancis.com
and the CRC Press Web site at

http://www.crcpress.com
Contents
Preface........................................................................................................................ xxv
Author...................................................................................................................... xxvii
1. The Internet and the Web..................................................................................... 1

1.1 Introduction................................................................................................... 1
1.2 Learning Outcomes....................................................................................... 1
1.3 Fundamentals of the Internet and the Web.................................................... 1
1.4 How the Web Works...................................................................................... 5
1.5 Requirements for Creating Websites............................................................. 6
1.6 Useful Info.................................................................................................... 6
1.6.1 Web Links........................................................................................ 6
1.6.2 Free Software................................................................................... 6
Part I HTML
2. Introduction to HTML....................................................................................... 11
2.1 Introduction................................................................................................ 11
2.2 Learning Outcomes.................................................................................... 11
2.3 About HTML.............................................................................................. 11
2.3.1 The Structure of an HTML Document.......................................... 13
2.3.1.1 The Contents of the Head Section................................. 14
2.3.1.2 The Contents of the Body Section................................. 22
2.3.2 Creating a Web Page...................................................................... 29
2.3.2.1 Creating a Web Page with a Text Editor........................ 29
2.4 Useful Info.................................................................................................. 30
2.4.1 Web Links...................................................................................... 30
3. Text....................................................................................................................... 31
3.1 Introduction................................................................................................ 31
3.3 Headings..................................................................................................... 32
3.3.1 Headings in Design........................................................................ 33
3.4 Paragraphs.................................................................................................. 34
3.4.1 Paragraphs in Design..................................................................... 35
3.5 Line Breaks, Thematic Breaks, and Comments......................................... 36
3.5.1 Specifying Word-Break Opportunities.......................................... 37
v
vi Contents
3.6 Superscript and Subscript......................................................................... 39

3.7 Importance, Emphasis, and Relevance..................................................... 40
3.8 Quotations and Citations.......................................................................... 42
3.9 Definitions and Abbreviations.................................................................. 43
3.10 Small Text................................................................................................. 44
3.11 Text Edit................................................................................................... 45
3.12 Displaying Computer Code and Output................................................... 46
3.13 Displaying Preformatted Text................................................................... 48
3.14 Authors’ Details and Publication Dates................................................... 49
3.15 Providing Hidden Additional Information................................................ 50
3.16 Displaying a Dialog Box.......................................................................... 51
3.17 Menu Bar and Drop-Down Menus........................................................... 52
3.18 Displaying Special Characters.................................................................. 53
3.18.1 Non-Breaking Spaces................................................................ 55
3.19 Language Information and Text Directionality........................................ 56
3.19.1 lang......................................................................................... 56
3.19.1.1 Benefits of Using the lang Attribute....................... 57
3.19.2 dir............................................................................................ 58
3.20 Ruby Text................................................................................................. 60
3.20.1 <ruby>, <rb>, <rt>, and <rp>........................................... 62
3.20.2 <rbc> and <rtc>................................................................... 64
3.21 Acquiring Text for Use............................................................................. 65
3.22 Useful Info................................................................................................ 66
3.22.1 Web Links.................................................................................. 66
4. Lists, Tables, and Links...................................................................................... 67

4.1 Introduction.............................................................................................. 67
4.2 Learning Outcomes.................................................................................. 67
4.3 Lists.......................................................................................................... 67
4.3.1 Common List Attributes............................................................ 69
4.3.2 Nested Lists............................................................................... 71
4.4 Tables........................................................................................................ 72
4.4.1 Basic Tables............................................................................... 74
4.4.1.1 <table>, <caption>, <th>, <tr>,
and <td>.................................................................. 74
4.4.1.2 Columns’ Grouping................................................... 75
4.4.2 Table Cells’ Merging................................................................. 77
4.4.2.1 <rowspan> and <colspan>................................ 77
4.4.3 Long Tables............................................................................... 79
4.4.3.1 <thead>, <tbody>, and <tfoot>...................... 79
4.4.4 Tables and Accessibility............................................................ 80
4.4.4.1 The scope Attribute and Accessibility.................... 80
4.4.4.2 The id and headers Attributes and
Accessibility........................................................... 81
Contents vii
4.5 Links........................................................................................................... 83
4.5.1 Linking to Another Website......................................................... 84
4.5.2 Linking to Another Page on the Same Website........................... 85
4.5.3 Linking to Another Part on the Same Page.................................. 86
4.5.3.1 Using the id Attribute................................................ 86
4.5.3.2 Using the name Attribute............................................ 87
4.5.3.3 Within-Page Links in Web Design.............................. 88
4.5.4 Linking to a Specific Part on Another Page................................. 89
4.5.5 Linking to an E-Mail Program.................................................... 89
4.6 Useful Info.................................................................................................. 90
4.6.1 Web Links.................................................................................... 90
5. Forms.................................................................................................................... 91
5.1 Introduction................................................................................................ 91
5.3 Form Element............................................................................................. 91
5.4 Form Controls............................................................................................. 94
5.4.1 <input>.................................................................................... 94
5.4.1.1 Input Types for Collecting Text................................... 95
5.4.1.2 Input Types for Offering Options.............................. 108
5.4.1.3 Input Types for Starting an Action............................ 110
5.4.2 Multipurpose Button.................................................................. 118
5.4.2.1 <button>...</button>................................... 118
5.4.3 Multiple Lines Text Input.......................................................... 120
5.4.3.1 <textarea>...</textarea>......................... 120
5.4.4 Drop-Down List......................................................................... 122
5.4.4.1 <select>...</select>................................... 122
5.4.4.2 <datalist>...</datalist>......................... 125
5.4.5 Showing Task Progress.............................................................. 126
5.4.5.1 <progress>...</progress>......................... 126
5.4.6 Displaying Measurement........................................................... 127
5.4.6.1 <meter>...</meter>........................................ 127
5.4.7 Outputting Calculation Result................................................... 128
5.4.7.1 <output>...<output>..................................... 128
5.4.8 Labeling Form Controls............................................................. 129
5.4.8.1 <label>...<label>.......................................... 129
5.4.8.2 Labeling and Accessibility........................................ 131
5.4.9 Grouping Form Controls........................................................... 132
5.4.9.1 <fieldset>...</fieldset>/
<legend>...</legend>................................... 132
5.4.10 An Example Form..................................................................... 133
5.5 Form Design Guidelines........................................................................... 136
5.6 Useful Info................................................................................................ 136
5.6.1 Web Links.................................................................................. 136
viii Contents
6. Images................................................................................................................ 139
6.1 Introduction.............................................................................................. 139
6.3 Adding Images with HTML..................................................................... 139
6.3.1 <img>, <source>, and <picture>...................................... 140
6.3.1.1 Specifying a Single Image Source............................... 141
6.3.1.2 Making an Image a Link, and Linking to an Image..... 145
6.3.1.3 Containing and Captioning Images Properly............... 146
6.3.1.4 Specifying Multiple Image Sources............................. 148
6.3.2 <canvas>...</canvas>..................................................... 154
6.3.3 <svg>...</svg>.................................................................... 154
6.3.4 <map>...</map> and <area>...</area>..................... 155
6.4 Document Embedding.............................................................................. 159
6.4.1 <iframe>...</iframe>..................................................... 159
6.5 Types of Images........................................................................................ 161
6.5.1 Bitmapped Images....................................................................... 161
6.5.1.1 Image Resolution......................................................... 162
6.5.1.2 Pixels per Unit Length................................................. 165
6.5.1.3 Color Depth.................................................................. 167
6.5.2 Vector Images.............................................................................. 168
6.5.3 Image File Formats and Image File Size..................................... 170
6.5.4 Calculating File Size Generated from Scanned Documents........ 173
6.5.5 Calculating File Size Generated from Digital Camera................ 173
6.5.6 Calculating File Transmission Time............................................ 174
6.6 Guidelines for Effective Use of Images.................................................... 174
6.6.1 Decorative Images....................................................................... 175
6.6.2 Large Images............................................................................... 176
6.6.3 Images with Text.......................................................................... 176
6.6.4 Images and Captions.................................................................... 177
6.7 Acquiring Images for Use........................................................................ 179
6.7.1 Stock Images................................................................................ 179
6.7.2 Graphics Editors.......................................................................... 179
6.7.3 Photography................................................................................. 179
6.7.4 Image Scanning........................................................................... 180
6.7.5 Web Coding Languages............................................................... 180
6.8 Useful Info................................................................................................ 181
6.8.1 Web Links.................................................................................... 181
6.8.2 Free Software............................................................................... 181
7. Audio, Video, and Animation........................................................................... 183

7.1 Introduction.............................................................................................. 183
Contents ix
7.3 Delivering Dynamic Media...................................................................... 183

7.4 Audio........................................................................................................ 184
7.4.1 Linking to Audio.......................................................................... 184
7.4.2 Embedding Audio........................................................................ 185
7.4.2.1 <audio>...<audio>............................................. 185
7.4.2.2 <embed>..................................................................... 188
7.4.2.3 <object>...</object>...................................... 189
7.4.3 Audio in Web Design................................................................... 190
7.4.3.1 Audio File Formats and Audio File Size...................... 190
7.4.3.2 Guidelines on Effective Use of Sound......................... 193
7.4.4 Acquiring Audio for Web Design................................................ 194
7.4.4.1 Stock Audio.................................................................. 194
7.4.4.2 Ripping Tracks from Discs.......................................... 195
7.4.4.3 Digitizing Tracks from Vinyl Records......................... 195
7.4.4.4 Creating Audio from Scratch....................................... 195
7.5 Video......................................................................................................... 196
7.5.1 Adding Video via Hosted Video Services.................................... 197
7.5.2 Adding Video to Web Page.......................................................... 197
7.5.2.1 Linking to Video.......................................................... 197
7.5.2.2 Embedding Video......................................................... 198
7.5.3 Video in Design........................................................................... 203
7.5.3.1 Video File Size............................................................. 203
7.5.3.2 Video File Formats and Codecs................................... 204
7.5.3.3 Guidelines on Effective Use of Video.......................... 204
7.5.4 Acquiring Video for Design......................................................... 210
7.5.4.1 Stock Videos................................................................. 210
7.5.4.2 Ripping Video from DVD Video/Blu-Ray Disc........... 210
7.5.4.3 Video from Video Devices........................................... 211
7.5.4.4 Producing Video from Scratch..................................... 212
7.5.4.5 Video Screen Capture................................................... 212
7.6 Animation................................................................................................. 213
7.6.1 Animation in Design.................................................................... 214
7.6.1.1 Guidelines on Effective Use of Animation.................. 214
7.6.2 Acquiring 2D Animation for Design........................................... 216
7.6.2.1 Stock 2D Animation..................................................... 216
7.6.2.2 2D Animation Programs.............................................. 217
7.6.2.3 Coding.......................................................................... 217
7.7 Useful Info................................................................................................ 218
7.7.1 Web Links.................................................................................... 218
7.7.2 Free Software............................................................................... 218
x Contents
Part II CSS
8. Introduction to CSS.......................................................................................... 221
8.1 Introduction.............................................................................................. 221
8.3 Introduction to CSS.................................................................................. 221
8.3.1 Anatomy of CSS Rules................................................................ 223
8.3.1.1 CSS Selector Types...................................................... 225
8.3.1.2 Pseudo-Elements.......................................................... 227
8.3.1.3 Pseudo-Classes............................................................. 228
8.3.1.4 :nth Selectors............................................................ 232
8.3.2 CSS Cascading Properties........................................................... 233
8.3.2.1 Last Rule Principle....................................................... 233
8.3.2.2 Specificity Principle..................................................... 234
8.3.2.3 Inheritance.................................................................... 236
8.3.3 Methods of Specifying CSS Rules.............................................. 239
8.3.3.1 Inline CSS.................................................................... 239
8.3.3.2 External CSS................................................................ 243
8.4 Useful Info................................................................................................ 245
8.4.1 Web Links.................................................................................... 245
9. Color................................................................................................................... 247
9.1 Introduction.............................................................................................. 247
9.3 Specifying Color in CSS.......................................................................... 247
9.3.1 RGB Values.................................................................................. 247
9.3.2 HSL Values.................................................................................. 248
9.3.3 Foreground and Background Color............................................. 248
9.3.3.1 Color Transparency...................................................... 250
9.4 Anatomy of Color and Color Models....................................................... 251
9.4.1 Determining Color Values........................................................... 254
9.5 Color in Design......................................................................................... 255
9.5.1 Choosing Color Combinations.................................................... 255
9.5.1.1 Monochromatic............................................................ 257
9.5.1.2 Analogous.................................................................... 258
9.5.1.3 Complementary............................................................ 260
9.5.1.4 Split Complementary................................................... 261
9.5.1.5 Double Contrast........................................................... 262
9.5.1.6 Triadic.......................................................................... 264
9.5.2 Color Proportions........................................................................ 265
9.5.3 Color in Content Organization.................................................... 266
9.5.4 Color and Aesthetics.................................................................... 267
Contents xi
9.5.5 Color and Physiological Considerations.................................. 268

9.5.6 Color and Psychological Considerations................................. 269
9.5.7 Color Preferences..................................................................... 271
9.5.8 Color and Accessibility............................................................ 272
9.6 Useful Info.............................................................................................. 274
9.6.1 Web Links................................................................................ 274
10. Boxes: Size and Border..................................................................................... 275

10.1 Introduction............................................................................................. 275
10.2 Learning Outcomes................................................................................. 275
10.3 Box Dimensions...................................................................................... 275
10.3.1 width and height................................................................ 276
10.3.1.1 Specifying Logical Width and Height..................... 277
10.3.2 min-width and min-height and max-width
and max-height................................................................... 278
10.3.2.1 Handling Content Overflow.................................... 280
10.3.2.2 Specifying Minimum and Maximum Logical
Width and Height.................................................... 288
10.3.3 calc()................................................................................................ 289
10.4 Border, Padding, and Margin.................................................................. 290
10.4.1 Border....................................................................................... 291
10.4.1.1 border-style.................................................... 291
10.4.1.2 border-width.................................................... 296
10.4.1.3 border-color.................................................... 299
10.4.1.4 border-top and border-bottom
and border-right and border-left........... 301
10.4.1.5 border.................................................................. 304
10.4.1.6 border-image.................................................... 305
10.4.1.7 border-radius.................................................. 310
10.4.2 padding................................................................................. 313
10.4.2.1 Specifying Padding for Logical Edges.................... 314
10.4.3 margin................................................................................... 315
10.4.3.1 Specifying Margin for Logical Edges..................... 317
10.4.3.2 Margins in Design................................................... 318
10.5 Controlling Box Sizes............................................................................. 319
10.5.1 Specifying How Boxes Are Rendered...................................... 319
10.5.2 Making Boxes Resizable.......................................................... 321
10.6 Adding Shadows to a Box....................................................................... 323
10.7 Applying Outline to an Element............................................................. 325
10.7.1 outline-offset................................................................ 327
xii Contents
10.8 Changing between Inline and Block Elements..................................... 328

10.9 Hiding Content...................................................................................... 331
10.9.1 Hiding Content by Using the display Property............... 331
10.9.2 Hiding Content by Using the visibility Property........ 332
10.10 Useful Info............................................................................................ 333
10.10.1 Web Links............................................................................. 333
11. Boxes: Transform and 3D................................................................................. 335

11.1 Introduction........................................................................................... 335
11.2 Learning Outcomes............................................................................... 335
11.3 Transforming Elements......................................................................... 335
11.3.1 transform-origin........................................................ 335
11.3.2 transform........................................................................ 336
11.3.2.1 Applying Rotation and Skewing......................... 338
11.3.2.2 Applying Perspective.......................................... 340
11.3.3 perspective.................................................................... 341
11.3.3.1 Example Application of the perspective
Property.............................................................. 343
11.3.4 transform-style.......................................................... 345
11.3.5 backface-visibility................................................ 346
11.3.5.1 Full Explanation of the Cube Example............... 347
11.4 Useful Info............................................................................................ 349
11.4.1 Web Links............................................................................. 349
12. Positioning Elements......................................................................................... 351

12.1 Introduction........................................................................................... 351
12.3 CSS Positioning Methods..................................................................... 351
12.3.1 Static Positioning.................................................................. 352
12.3.2 Relative Positioning.............................................................. 353
12.3.2.1 Specifying Offset for Logical Edges................... 355
12.3.3 Absolute Positioning............................................................ 356
12.3.4 Fixed Positioning.................................................................. 358
12.3.4.1 An Application of Fixed Positioning.................. 359
12.3.5 Sticky Positioning................................................................. 361
12.3.5.1 Sticky Global Navigation.................................... 363
12.3.6 Using Element Positioning in Drop-Down Menus............... 366
12.3.6.1 Drop-Down Menu Using List Elements............. 366
12.3.6.2 Drop-Down Menu Using the <button>
Element............................................................... 369
12.3.7 Ordering Overlapping Elements........................................... 370
12.3.8 Floating Elements................................................................. 372
Contents xiii
12.3.9 Clearing Obstructed Floated Elements..................................... 375

12.3.9.1 A Common Problem with Non-Floated
Parent Elements....................................................... 379
12.3.9.2 Multi-Column Content with Floats......................... 380
12.4 Multi-Column Layout............................................................................. 381
12.4.1 columns and column-span............................................... 383
12.4.2 column-count, column-rule, and column-gap........ 385
12.4.3 column-fill....................................................................... 386
12.5 Useful Info.............................................................................................. 388
12.5.1 Web Links................................................................................ 388
13. Text: Typefaces and Fonts................................................................................ 389

13.1 Introduction............................................................................................. 389
13.3 Anatomy of Type.................................................................................... 389
13.4 Typefaces and Fonts................................................................................ 390
13.4.1 font-family....................................................................... 390
13.4.2 @font-face.......................................................................... 392
13.4.2.1 Providing Broad Browser Support.......................... 394
13.4.3 Fonts in Design........................................................................ 397
13.4.3.1 Typeface Classifications.......................................... 397
13.4.3.2 Choosing a Typeface............................................... 401
13.5 Size of Text............................................................................................. 406
13.5.1 font-size............................................................................ 406
13.5.2 font-size-adjust........................................................... 408
13.5.3 Font Size in Design.................................................................. 409
13.5.3.1 Font Size and Typeface........................................... 409
13.5.3.2 Font Size, Operating Systems, Resolution,
and Screen Size....................................................... 409
13.5.3.3 Type Size and Target Audience............................... 410
13.5.3.4 Type Size and Visual Hierarchy.............................. 410
13.6 Weight of Text......................................................................................... 411
13.6.1 font-weight....................................................................... 411
13.6.2 Font Weight in Design.............................................................. 413
13.7 Text Style................................................................................................ 414
13.8 Useful Specialized Font Properties......................................................... 415
13.8.1 font-feature-settings............................................... 415
13.8.2 font-synthesis................................................................ 416
13.8.3 font-variant..................................................................... 416
13.8.4 font-stretch..................................................................... 417
13.9 Specifying Multiple Font Properties....................................................... 417
13.10 Useful Info.............................................................................................. 418
13.10.1 Web Links................................................................................ 418
xiv Contents
14. Text: Formatting and Decoration.................................................................... 419

14.1 Introduction........................................................................................... 419
14.3 Content Alignment................................................................................ 419
14.3.1 text-align...................................................................... 420
14.3.1.1 Text Alignment in Design................................... 421
14.3.2 vertical-align............................................................ 421
14.3.3 Centering Blocks of Text...................................................... 424
14.3.3.1 Horizontal Centering........................................... 424
14.3.3.2 Vertical Centering............................................... 425
14.3.3.3 Vertical and Horizontal Centering...................... 427
14.4 Text Indenting and Outdenting.............................................................. 428
14.5 Text Spacing.......................................................................................... 429
14.5.1 letter-spacing, font-kerning, and
word-spacing................................................................429
14.5.2 text-rendering............................................................ 431
14.5.3 Text Spacing in Design......................................................... 431
14.6 Line Spacing.......................................................................................... 432
14.6.1 line-height.................................................................... 432
14.6.2 Line Height in Design.......................................................... 433
14.7 Specifying Lowercase or Uppercase..................................................... 434
14.7.1 Text Capitalization in Design............................................... 435
14.8 Specifying Content Directionality......................................................... 436
14.8.1 direction........................................................................ 436
14.8.2 writing-mode................................................................. 437
14.8.3 text-orientation........................................................ 440
14.8.4 text-combine-upright.............................................. 441
14.9 Text Decoration..................................................................................... 442
14.9.1 text-decoration.......................................................... 443
14.9.2 text-decoration-skip.............................................. 445
14.9.3 text-underline-position....................................... 446
14.9.4 text-emphasis............................................................... 448
14.9.5 text-shadow.................................................................... 450
14.10 Styling with Pseudo-Elements.............................................................. 452
14.10.1 ::first-letter, ::first-line,
::before, ::after, ::selection......................... 454
14.10.2 Using content Property Values........................................ 455
14.11 Styling Text with Pseudo-Classes......................................................... 457
14.11.1 Styling Links........................................................................ 457
14.11.2 :target............................................................................. 459
14.11.2.1 Lightbox Display and the :target
Pseudo-Class....................................................... 460
14.11.3 :not(X)............................................................................. 464
14.11.4 :empty................................................................................ 465
Contents xv
14.12 Ruby Properties..................................................................................... 466

14.12.1 Ruby Properties for Styling and Formatting........................ 466
14.12.1.1 ruby-position............................................. 467
14.12.1.2 ruby-align.................................................... 468
14.12.1.3 ruby-merge.................................................... 469
14.12.2 Converting Elements to Ruby Elements............................... 470
14.13 Useful Info............................................................................................ 472
14.13.1 Web Links............................................................................. 472
15. Images: Content and Background Images...................................................... 473

15.1 Introduction........................................................................................... 473
15.3 Sizing Images........................................................................................ 473
15.3.1 Specifying the Quality of Resized Images........................... 475
15.3.2 Specifying Size for Responsive Images............................... 476
15.4 Clipping Images.................................................................................... 478
15.5 Aligning Images.................................................................................... 480
15.6 Positioning and Fitting Images in Element’s Box................................. 481
15.6.1 object-position.......................................................... 482
15.6.2 object-fit...................................................................... 483
15.7 Background Images............................................................................... 484
15.7.1 Adding Background Images................................................. 484
15.7.2 Repeating Background Images............................................. 487
15.7.2.1 repeat-x and repeat-y.............................. 487
15.7.2.2 space and round............................................. 489
15.8 Specifying Background Image Position Area....................................... 491
15.9 Clipping Background Images................................................................ 492
15.10 Sizing Background Images................................................................... 494
15.10.1 background-size with Keywords................................. 496
15.11 Multiple Background Images................................................................ 498
15.12 Fixing the Position of Background Images........................................... 500
15.13 Positioning Background Images........................................................... 501
15.14 Shorthand Background Property........................................................... 503
15.14.1 Multiple Background Images with background
Property...............................................................................505
15.15 Useful Info............................................................................................ 506
15.15.1 Web Links............................................................................. 506
16. Images: Effects.................................................................................................. 507

16.1 Introduction........................................................................................... 507
16.3 Image Sprites......................................................................................... 507
16.3.1 Using Image Sprites with the <input> Element............... 510
xvi Contents
16.4 Gradients............................................................................................... 511

16.4.1 Linear Gradients................................................................... 512
16.4.1.1 Repeating Linear Gradients................................ 515
16.4.2 Radial Gradients................................................................... 517
16.4.2.1 Example Application of Radial Gradient............ 520
16.4.2.2 Repeating Radial Gradient.................................. 522
16.5 Filters..................................................................................................... 523
16.6 Blending Images.................................................................................... 526
16.6.1 background-blend-mode............................................ 526
16.6.2 mix-blend-mode............................................................ 528
16.6.3 isolation........................................................................ 529
16.7 Useful Info............................................................................................ 530
16.7.1 Web Links............................................................................. 530
17. Lists, Tables, and Forms................................................................................... 533

17.1 Introduction........................................................................................... 533
17.3 Lists....................................................................................................... 533
17.3.1 list-style-type.......................................................... 533
17.3.2 list-style-image........................................................ 535
17.3.3 list-style-position................................................ 536
17.3.4 list-style...................................................................... 537
17.3.5 Styling Lists with Generic Properties................................... 538
17.3.5.1 Styling <ol> and <ul> Elements with
Generic Properties............................................... 538
17.3.5.2 Styling Definition Lists....................................... 540
17.3.6 Converting Other Elements to list-items..................... 541
17.4 Tables.................................................................................................... 542
17.4.1 Styling Tables with Generic Properties................................ 543
17.4.2 Styling with Table-Specific Properties................................. 545
17.4.2.1 border-collapse........................................ 545
17.4.2.2 border-spacing........................................... 546
17.4.2.3 empty-cells.................................................. 547
17.4.2.4 table-layout................................................ 548
17.4.3 Converting Other Elements to Table Elements.................... 549
17.4.4 Guidelines for Designing Effective Tables........................... 551
17.5 Forms..................................................................................................... 552
17.5.1 Images in Input Fields.......................................................... 555
17.5.2 Styling Form Elements......................................................... 557
17.5.2.1 Styling Form Buttons.......................................... 559
17.5.2.2 Styling Default Button........................................ 561
17.5.3 Specifying Cursor Shape...................................................... 562
Contents xvii
17.5.4 Validating Form Inputs............................................................. 563

17.5.4.1 :in-range and :out-of-range.................... 563
17.5.4.2 :valid and :invalid....................................... 564
17.6 Useful Info.............................................................................................. 565
17.6.1 Web Links................................................................................ 565
18. Animation.......................................................................................................... 567

18.1 Introduction............................................................................................. 567
18.3 About Animation..................................................................................... 567
18.4 CSS 2D Animation.................................................................................. 568
18.4.1 @keyframes.......................................................................... 569
18.4.2 Animation Properties............................................................... 570
18.4.3 Using @keyframes and Animation Properties..................... 572
18.4.3.1 Applying Multiple Animations to an Element........ 573
18.4.3.2 Animated CSS Lightbox Display............................ 575
18.4.4 CSS Transitions........................................................................ 577
18.5 3D Animation.......................................................................................... 580
18.5.1 CSS 3D Animation................................................................... 580
18.5.1.1 An Example Application of 3D Animation............. 582
18.6 Animation in Design............................................................................... 585
18.6.1 Animation in Attracting Attention............................................ 585
18.6.2 Animation in Providing Feedback........................................... 586
18.6.2.1 Depiction of Transition........................................... 586
18.6.2.2 Rollover Effect........................................................ 586
18.6.3 Animation in Providing Explanation....................................... 587
18.6.4 Animation in Providing Entertainment.................................... 587
18.6.5 Animation in Setting Mood...................................................... 588
18.6.6 Animation in Providing a Sequence of Items.......................... 588
18.7 Beyond CSS-Only Animation................................................................. 588
18.8 Useful Info.............................................................................................. 589
18.8.1 Web Links................................................................................ 589
19. Layout with Flexible Box.................................................................................. 591

19.1 Introduction............................................................................................. 591
19.3 Anatomy of Flexible Box Layout........................................................... 591
19.4 Controlling Flow Direction of Flex Items............................................... 593
19.5 Controlling the Wrapping of Flex Lines................................................. 595
19.6 Specifying Flex Direction and Wrapping Together................................ 597
xviii Contents
19.7 Controlling the Size of Flex Items........................................................ 597

19.7.1 Specifying Flex Items Sizing Factors Individually.............. 597
19.7.2 Specifying All Flex Items Sizing Factors with One
Property............................................................................598
19.7.2.1 Vertical Space Example...................................... 600
19.8 Aligning Flex Items............................................................................... 602
19.8.1 Aligning All Flex Items in a Flex Container........................ 602
19.8.1.1 justify-content........................................ 602
19.8.1.2 align-content............................................. 605
19.8.1.3 align-items.................................................. 607
19.8.2 Aligning Flex Items Individually......................................... 610
19.9 Ordering Flex Items.............................................................................. 612
19.10 Useful Info............................................................................................ 614
19.10.1 Web Links............................................................................. 614
20. Layout with the Grid Model............................................................................. 615

20.1 Introduction........................................................................................... 615
20.3 About Layout Grids............................................................................... 615
20.4 Anatomy of the Grid Layout Model...................................................... 616
20.5 Properties for Creating Grid Layout..................................................... 617
20.5.1 Specifying Grid Columns, Rows, and Areas........................ 618
20.5.1.1 grid-template-columns and
grid-template-rows................................. 618
20.5.1.2 Specifying Multiple Names for a Grid Line....... 621
20.5.1.3 Handling Repeating Values................................. 621
20.5.1.4 grid-template-areas............................... 622
20.5.1.5 grid-template............................................. 624
20.5.2 Controlling Implicit Tracks and Items’ Auto-Placement..... 626
20.5.2.1 grid-auto-columns and
grid-auto-rows........................................... 626
20.5.2.2 grid-auto-flow........................................... 628
20.5.3 Specifying Gutters between Grid Columns and Rows......... 630
20.5.3.1 grid-column-gap, grid-row-gap,
and grid-gap.................................................. 630
20.5.4 Specifying All Grid Structure Properties Together.............. 631
20.5.4.1 grid................................................................... 631
20.5.5 Specifying Grid Item Placement within the Grid................. 633
20.5.5.1 Specifying Grid-Placement Values Separately.......634
20.5.5.2 Specifying Column and Row Grid-Placement
Values Separately................................................ 637
20.5.5.3 Specifying All Grid-Placement Values
Together..............................................................638
Contents xix
20.6 Aligning Grid and Grid Items................................................................. 640

20.6.1 Aligning All Grid Items in a Grid Container........................... 640
20.6.1.1 justify-content and align-content...... 642
20.6.1.2 justify-items and align-items............... 644
20.6.2 Aligning Grid Items Individually............................................. 647
20.6.2.1 justify-self and align-self.................... 647
20.7 Ordering Grid Items................................................................................ 649
20.7.1 Ordering Grid Items Display Sequence................................... 649
20.7.1.1 order..................................................................... 649
20.7.2 Specifying Layer Positions for Stacked Grid Items................. 651
20.7.2.1 z-index................................................................ 651
20.8 Example Application of Grid.................................................................. 653
20.9 Useful Info ............................................................................................. 654
20.9.1 Web Links................................................................................ 654
21. Responsive and Adaptive Web Design............................................................. 657

21.1 Introduction............................................................................................. 657
21.3 Screen Size and Resolution Issues.......................................................... 657
21.4 Fixed and Liquid Layouts....................................................................... 659
21.4.1 Fixed Layouts........................................................................... 659
21.4.2 Liquid Layouts......................................................................... 659
21.5 Responsive vs Adaptive Design.............................................................. 661
21.6 Creating Responsive Design................................................................... 663
21.6.1 Steps for Creating a Responsive Design.................................. 666
21.6.1.1 Creating the Layouts for Different Screen Sizes.......666
21.6.1.2 Creating Fluid Media Assets................................... 666
21.6.1.3 Creating CSS Rules for Changing between
Layouts................................................................667
21.6.2 Implementing Responsive Design via Flexbox........................ 672
21.6.3 Implementing Responsive Design via Grid............................. 677
21.7 Creating Adaptive Design....................................................................... 680
21.8 Useful Info.............................................................................................. 680
21.8.1 Web Links................................................................................ 680
22. Beyond HTML and CSS................................................................................... 681

22.1 Introduction............................................................................................. 681
22.3 Enhanced CSS......................................................................................... 681
22.4 Using Scripting Languages with HTML................................................. 683
22.4.1 Client-Side Scripting................................................................ 683
22.4.1.1 Embedding Client-Side Scripts............................... 683
22.4.1.2 External Client-Side Scripts.................................... 684
xx Contents
22.4.2 Server-Side Scripting............................................................... 687

22.4.2.1 Using Server-Side Script with AJAX...................... 690
22.4.2.2 Server-Side Script, AJAX, and Database................ 692
22.4.2.3 Storing Data in Database......................................... 692
22.4.2.4 Retrieving Data from Database............................... 695
22.5 Optimizing Website Performance........................................................... 697
22.5.1 Optimizing Text-Based Assets................................................. 698
22.5.2 Optimizing Image-Based Assets.............................................. 699
22.5.3 Optimizing Web Font............................................................... 700
22.6 Useful Info.............................................................................................. 701
22.6.1 Web Links................................................................................ 701
Part III Web Design Principles and Practices

23. Design: The Fundamentals............................................................................... 705
23.1 Introduction............................................................................................. 705
23.3 Visual Aesthetics in Design.................................................................... 705
23.4 Design Elements and Principles.............................................................. 706
23.4.1 Basic Elements of Design........................................................ 707
23.4.1.1 Point........................................................................ 707
23.4.1.2 Line......................................................................... 708
23.4.1.3 Shapes..................................................................... 714
23.4.1.4 Size/Scale................................................................ 715
23.4.1.5 Space....................................................................... 716
23.4.1.6 Hue and Value......................................................... 718
23.4.1.7 Texture..................................................................... 719
23.4.2 Principles of Design................................................................. 720
23.4.2.1 Balance.................................................................... 720
23.4.2.2 Emphasis................................................................. 723
23.4.2.3 Rhythm.................................................................... 727
23.4.2.4 Proportion................................................................ 728
23.4.2.5 Unity........................................................................ 732
23.5 Useful Info.............................................................................................. 738
23.5.1 Web Links................................................................................ 738
24. Designing for the Web....................................................................................... 739

24.1 Introduction............................................................................................. 739
24.3 User Experience...................................................................................... 739
Contents xxi
24.4 Website Credibility................................................................................. 741

24.4.1 Show Usefulness...................................................................... 742
24.4.2 Show Professionalism.............................................................. 742
24.4.3 Manage Adverts Properly......................................................... 743
24.4.4 Show Trustworthiness.............................................................. 743
24.5 Designing Website Interfaces.................................................................. 745
24.5.1 Designing Website Navigation................................................. 747
24.5.1.1 Tabs Metaphor....................................................... 752
24.5.1.2 Drop-Down Menus................................................ 754
24.5.1.3 Site Map................................................................ 755
24.5.1.4 Footers................................................................... 757
24.5.2 Designing Content Area........................................................... 758
24.5.2.1 Homepage Content................................................ 758
24.5.2.2 Content Display Size............................................. 758
24.5.2.3 Content Length...................................................... 760
24.5.2.4 Line Length........................................................... 761
24.5.2.5 Content Layout...................................................... 761
24.5.2.6 Managing Content Amount................................... 765
24.5.2.7 Writing Content for the Web................................. 770
24.6 Designing for Different Ages.................................................................. 778
24.7 Useful Info.............................................................................................. 780
24.7.1 Web Links................................................................................ 780
25. Designing for Mobile Devices........................................................................... 781

25.1 Introduction............................................................................................. 781
25.3 Designing for Smartphones..................................................................... 781
25.3.1 Designing Content for Smartphones........................................ 782
25.3.1.1 Content Structuring............................................... 783
25.3.1.2 Number of Columns.............................................. 784
25.3.1.3 Amount of Text Entry........................................... 784
25.3.1.4 Registration........................................................... 784
25.3.2 Designing Navigation for Smartphones................................... 784
25.3.2.1 Designing Touch Targets....................................... 786
25.3.2.2 Designing Touch Gestures and Animations.......... 787
25.4 Designing for Tablets.............................................................................. 789
25.5 Useful Info.............................................................................................. 790
25.5.1 Web Links................................................................................ 790
xxii Contents
Part IV Web Development Process

26. Web Development Process................................................................................ 793
26.1 Introduction............................................................................................. 793
26.3 User-Centered Design Process................................................................ 793
26.3.1 Task Analysis Phase............................................................... 794
26.3.1.1 Field Studies....................................................... 794
26.3.1.2 Hierarchical Task Analysis................................. 795
26.3.2 Requirements-Gathering Phase.............................................. 796
26.3.3 Design Phase.......................................................................... 796
26.3.3.1 Card Sorting........................................................ 797
26.3.3.2 Prototypes........................................................... 797
26.3.4 Evaluation Phase.................................................................... 801
26.3.4.1 Usability Testing................................................. 801
26.3.4.2 Evaluating Websites for Accessibility................ 809
26.3.4.3 Evaluating Your Website for SEO....................... 812
26.3.4.4 Data Collection for Evaluation........................... 814
26.3.4.5 Observational Techniques................................... 820
26.3.4.6 Delivering an Application on the Web................ 823
26.4 Useful Info.............................................................................................. 825
26.4.1 Web Links.............................................................................. 825
27. Managing Web Development........................................................................... 827

27.1 Introduction............................................................................................. 827
27.3 Introduction to Web Development Management.................................... 827
27.3.1 Web Project Management Tools............................................ 829
27.3.1.1 Brainstorming..................................................... 830
27.3.1.2 Work Breakdown Structure................................ 831
27.3.1.3 Critical Path Method........................................... 832
27.3.1.4 Gantt Chart......................................................... 836
27.4 Web Project Management Phases........................................................... 837
27.4.1 Initiation Phase...................................................................... 837
27.4.1.1 Project Definition Process.................................. 838
27.4.1.2 Proposal Process................................................. 838
27.4.1.3 Contract Process................................................. 844
27.4.2 Preproduction Phase.............................................................. 848
27.4.2.1 Project Team Selection....................................... 848
27.4.2.2 Content Gathering and Clearance Process.......... 849
27.4.2.3 Website Design Process...................................... 849
27.4.2.4 Media Objects Design Process........................... 850
27.4.2.5 Media Production Tools Selection...................... 850
Contents xxiii
27.4.3 Production Phase...................................................................... 851

27.4.4 Postproduction Phase............................................................... 851
27.4.4.1 Final Evaluation.................................................... 851
27.4.4.2 Delivery and Final Sign-Off.................................. 852
27.4.4.3 Closure.................................................................. 852
27.5 Useful Info.............................................................................................. 853
27.5.1 Web Links................................................................................ 853
27.5.2 Free Software........................................................................... 853
28. Introduction to Intellectual Property.............................................................. 855

28.1 Introduction............................................................................................. 855
28.3 Intellectual Property................................................................................ 855
28.3.1 Copyright.................................................................................. 856
28.3.1.1 When Copyright Protection Begins...................... 858
28.3.1.2 Duration of Copyright........................................... 859
28.3.1.3 Rights Protected by Copyright Laws.................... 861
28.3.1.4 Limitations on Rights............................................ 862
28.3.1.5 Related Rights....................................................... 865
28.3.2 Industrial Property.................................................................... 866
28.3.2.1 Patents................................................................... 867
28.3.2.2 Industrial Designs................................................. 869
28.3.2.3 Trademarks............................................................ 870
28.3.3 Seeking Permission to Use People’s Works............................. 870
28.3.4 Dealing with an Infringement.................................................. 871
28.4 Intellectual Property in Web Design....................................................... 872
28.4.1 Rights in Text........................................................................... 872
28.4.2 Rights in Images and Photographs........................................... 872
28.4.3 Rights in Music and Speech..................................................... 873
28.4.4 Rights in Video and Animation................................................ 874
28.4.5 Rights in Codes and Database.................................................. 875
28.5 Industrial Property in Web Design.......................................................... 875
28.6 Useful Info.............................................................................................. 876
28.6.1 Web Links................................................................................ 876
Bibliography............................................................................................................. 877
Index.......................................................................................................................... 881
Preface
About This Book

Much of what is in this book can be found on the Web in one form or another, but not
together in one place and not in as concise and structured manner that enhances learn-
ing as in this book. The book introduces the basic Web technologies, design principles
and processes, and management practices used in Web design as well as how to use
all of them in the designing and building of a working interactive website that is easy
to use and accessible to those with disability. There are ample examples on how all
commonly used HTML elements, attributes, and CSS properties are used and design
guidelines about best practices. There are also ample theoretical and practical exer-
cises to ensure continued involvement and interest of the reader in the topics intro-
duced, and all that is required to do the exercises or implement the examples are a Web
browser and a text editor such as Notepad on Windows, TextEdit on Mac, or Gedit
on Linux. For further reading and newer materials, Web addresses for the relevant
sources are also provided to enable readers to check the sources for updated materials.
A companion website is available at www.routledge.com/cw/Macaulay which
contains code snippets, interactive exercises and further reading and resources.
Target Audience
This book is intended for:
• Those with no prior knowledge of Web design who wish to learn how to design
and build websites of professional quality.
• Someone who already knows how to design and build a website using Web
tools, such as content management systems, e-commerce platforms, or blogging
software, that allow him or her to build websites without the knowledge of cod-
ing, but wants more control over the design offered.
Structure of This Book

This book is divided into four parts: HTML (HyperText Markup Language), CSS (Cascading
Style Sheets), Web Design Principles and Practices, and Web Development Process.
xxv
xxvi Preface
Part I: HTML
This part presents chapters that introduce the functionalities supported by HTML. It
shows how to use them to add various elements to a page, including text, links, lists,
tables, forms, images, audio, video, and animation. It also shows how to use them to
structure the content of a Web page, such as into headings, sections, paragraphs, and
quotations.
Part II: CSS

This part explains the role of CSS in the styling and layout of Web pages, and the
chapters introduce the functionalities that CSS supports such as the control of the
font, size and style of text, color of elements, arrangement of elements, and the use
of images for background.
Part III: Web Design Principles and Practices

This part comprises chapters on the fundamental principles of visual design and their
applications to Web design. It discusses how these principles can enhance the aesthetics
of a design, and also the role of aesthetics in user-satisfaction as well as in how usable
users judge a website to be and its credibility; all of which play important roles in user
experience and acceptance.
Part IV: Web Development Process

This part presents chapters that deal with the stages of Web design and development
and how they are managed to ensure the smooth running and timely completion of a
project. An extra chapter is also included that presents various useful practical infor-
mation, including how scripts are used with CSS to realize more advanced interac-
tive designs, how various other common Web-programming languages are used with
HTML, and how to set up a Web server on a home computer to try them out.
Author
Michael Macaulay, PhD, is a freelance educator, developer, and user-experience

designer and evaluator. Formerly, he was a senior lecturer and course director for
multimedia courses at London South Bank University, United Kingdom. He earned his
PhD in 2000 in the effects of human–computer interaction and m
ultimedia in learning
from Loughborough University, United Kingdom. In the past, he had also been a com-
puter systems administrator, computer systems programmer and analyst, and desktop
publisher.
xxvii
1
The Internet and the Web
1.1 Introduction
It is useful to know a little about the technical aspects of the Internet and the Web in
order to better understand the various terminologies used in this book and also how
what you produce will generally work. If you find that something is too technical in
this chapter, you can skip it and then come back to it when you feel more comfortable
with the subject or feel the need to know it.
1.2 Learning Outcomes

After studying this chapter, you should:
• Be aware of the basic anatomy of the Internet and the Web and terminologies.
• Know how the Web works.
• Be aware of the technologies required to create different types of websites.
1.3 Fundamentals of the Internet and the Web

The Internet is the technological framework on which the Web, also known as World
Wide Web (WWW), runs. It is a global network of interconnected computer networks
that comprises millions of different types of networks, such as home, private, academic,
business, public, and government networks, linked through various types of connection
technologies, such as fiber optic cable and wireless. The Web is only one of the appli-
cations that the Internet supports. Other applications include e-mail, telephony, and file
sharing.
Central to how computers or devices on the Internet communicate with each other and
send data around are the relationship between them and the system they use to commu-
nicate with each other. There are broadly two models of relationship: client-server model
and peer-to-peer model. In the client-server network model, one computer is the server
and the others are clients. The clients request data from the server and the server provides
the data to clients. In contrast, a peer-to-peer network is one in which all computers have
1
2 Introduction to Web Interaction Design
equal responsibilities; that is, every computer in the network works as both a server and a
client. In essence, the snippets of a single file are distributed across the computers of mul-
tiple users, so that when there is a request for the file, it is compiled from these sources.
This is the model that file-sharing services, such as Freenet, typically use.
In order for the computers on the Internet to communicate successfully, the Internet
uses a suite of protocols, the most important of which, as of time of writing, are Transfer
Control Protocol (TCP) and Internet Protocol (IP). IP is used for transmitting packets
of data from one computer to another, using the computers’ unique addresses, and TCP
is used to verify the accuracy of the data being transmitted. Internet protocol suite is
often generally referred to as TCP/IP.
The unique address of a computer on the Internet, or indeed any network, is known
as IP address, and it is the unique number that makes it possible to identify a computer
on the Internet. The original IP address format, known as IPv4, is a four-part number
written, for example, as 208.132.59.234. However, the enormous growth of the Internet
has led to the introduction of IPv6, which is a six-part number. To make an IP address
easy to remember, it is normally associated with a name, called domain name, for
example, bbc.co.uk. Like any protocol, Internet protocols impose rule and order on how
things are done. Basically, they specify rules and encoding specifications for sending
data from one computer to another. Without these protocols, it would be impossible for
so many computers to communicate successfully at the same time. It would be like hav-
ing no queues at a crowded supermarket.
In contrast to the Internet, the Web is a system that enables files on various servers to
be linked to each other. This is made possible through a technology known as hypertext,
invented by Ted Nelson. The term refers to both the technology and the principle that
enables the linking of a text element to another on a computer. It makes it possible to
construct a dynamic information network by using hyperlinks, so that when a text is
clicked, for example, with a mouse, it leads a user to another textual piece of information.
When different types of media objects, such as text, images, sound, and video, are linked
together instead of just text, the concept is referred to as hypermedia. Figure 1.1 shows
an illustration of a basic hypermedia system. It shows documents containing hyperlinks
to other documents and media objects. The documents and media objects could be on the
same Web server or on different ones that are miles apart.
A hypermedia system can be made to behave in different ways. For example, click-
ing a hyperlink could open a document or a media file to which it is linked; and the
document and media could both be on one computer or on separate computers located
far apart. These computers are known as Web servers. They are powerful computers
that run special programs and are permanently connected to the Internet. Although,
in theory, people can have their website on their own Web server at home, it is usually
not practical for various reasons, such as cost. Therefore, only big companies usually
have their own Web servers. For everyone else, it is more practical to use Web hosting
services. These are companies that own and maintain big powerful Web servers and
charge a fee to host people’s websites on them. For mere surfing of the Web, no more
than an Internet service provider (IPS) is required. An Internet service provider essen-
tially connects you to the Internet; however, some also provide Web hosting.
The Internet and the Web 3
Image
Image
Video
Video
Audio
FIGURE 1.1 An illustration of a hypermedia concept.
The files on Web servers are usually accessed using a Web browser (technically
known as Web client). Popular Web browsers include Internet Explorer, Microsoft
Edge, Firefox, Chrome, Safari, and Opera. Technologies, such as Web browsers,
that render files into Web pages in one form or another are generally referred to as
user agents. For each file or document (i.e., resource) on a Web server, there is a
unique address, known as Uniform Resource Locator (URL) or Web address, which
describes its location. You may also come across the terms URI and URN. The rela-
tionship between these terms is clarified further shortly in the NOTE box. The format
of a URL is as follows:
URL = protocol + IP address of server

+ location of file on server
The syntax is: protocol://host.domain [:port]/path/filename

Therefore, the URL for a file situated on a Web server on the Internet might be writ-
ten as shown in Figure 1.2.
In the example, the name of the file is “bolts.html.” It is located in the “bits” folder
(or directory), which itself is in the “products” folder on a server called “example.com,”
which is a WWW server (i.e., a Web server). HyperText Transfer Protocol (HTTP) is
the protocol used by the Web for data communication, and 80 is the port that the
browser typically uses to establish connection with a Web server, and assumed, so it is
FIGURE 1.2 The anatomy of a URL or Web address.
normally omitted when an address is specified. In order to access a file on a Web

server, a user would typically enter the Web address in a Web browser, click a link to
it on a Web page that is already opened, or choose it from the bookmark, which is a list
of previously stored visited Web addresses.
NOTE: URI versus URL versus URN

A Uniform Resource Identifier (URI) is a sequence of characters that identifies a
resource, typically over a computer network such as the World Wide World. When
information is included in a URI, such as a protocol (e.g., http://), that makes the
location of a resource more specific, the URI is also known as a Uniform Resource
Locator (URL). Therefore, for example, “example.com” is a URI, whereas “http://
example.com” is a URL. A Uniform Resource Name (URN) is another type of URI.
It is the name that identifies a resource and is rarely used.
How the browser delivers a requested file depends on the type of file. If it is a Web
page, it is automatically displayed as a Web page, but if it is another type of file, such as
a Word document, you may be given various other options, such as the option to save
or open it. For files that are not Web pages, the browser may use other types of soft-
ware, which are categorized as plug-ins and helper applications. A plug-in is embedded
within a Web page, while a helper application is separate from the browser and oper-
ates independently of it, once the browser initiates it. Different types of files require
different types of plug-ins or helper applications.
Although the Web is still most commonly accessed via desktop and laptop computers
as of time of writing, it is increasingly accessed via a wide range of mobile devices, such
as tablets and mobile phones, the capabilities and screen sizes of which vary widely.
In addition, the Web is accessed by a wide range of people, including those with dis-
abilities. The implication of this is that in order to reach as many people as possible, a
website needs to be created in a way that allows viewing on a variety of devices and
supports assistive technologies, which are the technologies that people with disabili-
ties use to access Web pages. A common example is the screen reader, used by blind
and visually impaired people to read out the contents of a Web page. Indeed, in many
countries, some types of websites are required by law to be accessible to those with
disabilities.
1.4 How the Web Works

When a user that is connected to the Internet types a website address in the browser
or clicks on a link to the address, in order for the browser to know the location (i.e., IP
address) of the Web server hosting the site and so be able to connect to it and request
the site, it connects to the nearest Domain Name System (DNS) server to request the
IP address. A DNS server (or name server) is a computer that manages a huge data-
base that stores and maps domain names (Web addresses) to IP addresses, and there are
many such servers located all over the world on every continent. They are basically like
phonebooks. If the DNS server does not have the requested IP address, it requests it from
another DNS server, which requests it from yet another one if it too does not have it,
and so on, until options run out. If the IP address is found, it is sent to the browser. The
browser uses it to connect to the Web server that hosts the required website and requests
it. The Web server sends it and the browser displays it. Figure 1.3 shows an illustration.
6
Web server sends
requested Web page
to browser.
4
Requesting DNS 3
server sends the IP DNS server has requested
address to the information, fetches it,
browser. and sends it to the
requesting DNS server.
2
Nearest DNS server
does not have
requested information 7
and requests it from Browser renders
another DNS server. Web page.
1 5
User enters URL (e.g., Browser uses IP
www.example.com) and address sent to it to
the browser requests its IP request required
address from the nearest website from the Web
DNS server. server hosting it.
FIGURE 1.3 An illustration of what happens when a user requests a Web page.

1.5 Requirements for Creating Websites

Different types of websites require different levels of complexity in their creation, and level
of complexity determines the range of languages necessary. Some languages are easy to
learn and use, while others are relatively difficult. Most websites use HyperText Markup
Language (HTML) and Cascading Style Sheets (CSS), because they are responsible for
the look and feel of a page. In the case of static websites (i.e., websites in which content
is not generated dynamically, such as personal websites), these two technologies are
usually all that is required.
For dynamic websites containing a lot of interaction, it is usually necessary to use
an additional technology known as JavaScript, which is a programming language that
is typically run on the browser side. For more complex dynamic websites that require
the storing and retrieval of users’ data, such as e-commerce and dating sites, the use of
a database is necessary, and so is the use of programming, to help the Web server carry
out complex decision-making processes at the backend. Typically used programming
languages include PHP, ASP.Net, Java, and Ruby. Of course, these languages in the end
are still used to generate HTML and CSS, which the browser then uses to structure and
style what it displayed on the screen. Most Web development authoring tools, which are
graphical user interface (GUI) tools, allow you to use all these languages. An example
is Dreamweaver.
For the types of websites that are updated regularly but do not necessarily involve
a lot of interaction, programming is typically not required. They are often built using
tools such as Web content management systems (WCMSs), e-commerce software,
and blogging tools. These tools allow the creation of websites through simply select-
ing design templates and options for various pre-defined functionalities. Again, what
they output and send to the browser are HTML and CSS.
1.6 Useful Info

1.6.1 Web Links
Internet and Web: en.wikipedia.org/wiki, internetsociety.org, webopedia.com,
internetlivestats.com, and howstuffworks.com
1.6.2 Free Software

Multiple download sites can be found for the following software by doing a search:
Web authoring tools: Google Web Designer (Cross Platform), Mobirise Website
Builder (Win, Mac), ToWeb (Cross Platform), KompoZer (Cross Platform),
OpenElement (Win).
HTML editors: Coffee Free HTML Editor (Cross Platform), Komodo Edit
(Cross Platform), PageBreeze (Win), Bluefish (Cross Platform), Brackets (Cross
Platform), BlueGriffon (Cross Platform), PSPad (Win), SynWrite (Win).
CMS: WordPress (Cross Platform), Joomla (Cross Platform), Drupal (Cross
Platform), SilverStripe (Cross Platform), CushyCMS (Cross Platform), Frog
CMS (Cross Platform), Concrete (Cross Platform), Radiant CMS (Cross
Platform), MODx (Cross Platform), TYPOlight CMS (Cross Platform),
ExpressionEngine (Cross Platform).
References
Alsudani, F. and Casey, M. The effect of aesthetics on web credibility. In Proceedings of the 23rd British HCI
Group Annual Conference on People and Computers: Celebrating People and Technology , 1-5 September
2009, British Computer Society, Cambridge, pp. 512-519, 2009.
Barr C. The Yahoo! Style Guide: The Ultimate Sourcebook for Writing, Editing, and Creating Content for the
Digital World. New York, NY: St. Martin Griffin, 2010.
Bently, L. and Sherman, B. Intellectual Property Law . New York, NY: Oxford, 2009.
Brinson J.D. Multimedia Law and Business Handbook. Menlo Park, CA: Ladera Press, 1996.
Denzin N.K. . The Research Act in Sociology. Chicago, IL: Aldine, 1970.
England, E. and Finney, A. Managing Multimedia: Project Management for Web and Convergent Media: Book
1, People and Processes. 3rd edn. Harlow, England: Addison Wesley, 2002a.
England, E. and Finney, A. Managing Multimedia: Technical Issues, Book 2, 3rd edn. Harlow, England: Addison
Wesley; 2002b.
England E. , Finney A. Managing Interactive Media, Project Management for Web and Digital Media. 4th edn.
Harlow, England: Addison Wesley, 2007.
Evans P. and Thomas A.M. Exploring the Elements of Design. NY: Cengage Learning, 2012.
Farkas E.B. Managing Web Projects. Boca Raton, FL: CRC Press, 2010.
Fogg B.J. Persuasive Technology: Using Computers to Change What We Think and Do. San Francisco, CA:
Morgan Kaufmann, 2002.
Fogg, B. J. , Marshall, J. , Laraki, O. , Osipovich, A. , Varma, C. , Fang, N. , and Treinen, M. What makes Web
sites credible?: A report on a large quantitative study. In Proceedings of the SIGCHI Conference on Human
Factors in Computing Systems , pp. 61-68, ACM, ACM Press, Seattle, WA, 2001.
Haynes R. Media Rights and Intellectual Property. Edinburgh, Scotland: Edinburgh University Press, 2005.
Lauer D.A. and Pentak S. Design Basics. 5th edn. Philadelphia, PA: Wadsworth Publishing, 2002.
Laurel B. The Art of Human Computer Interface Design. Boston, MA: Addison-Wesley, 1991.
Lindgaard, G. Does emotional appeal determine the usability of websites. In CYBERG 99 , Western Australia,
1999.
Lindgaard G. , Fernandes G. , Dudek C. , and Brown J. . Attention web designers: You have 50 milliseconds to
make a good first impression!. Behaviour and Information Technology 25(2),115126, 2006.
Loranger, H. Accordions Are Not Always the Answer for Complex Content on Desktops. Nielsen Norman Group
article. Accessed January 30, 2016. http://www.nngroup.com/articles/accordions-complex-content.
878 Loranger, H. and Nielsen, J. Teenage Usability: Designing Teen-Targeted Websites. Accessed January 30,
2016. http://www.nngroup.com/articles/usability-of-websites-for-teenagers.
Lutzker, A. Copyrights and Trademarks for Media Professionals (Broadcast & Cable Series). Newton, MA:
Butterworth-Heinemann, 1997.
Lynch P.J. and Horton S. . Web Style Guide: Basic Design Principles for Creating Web Sites. New Haven, CT:
Yale University Press, 2009.
Nielsen, J. Designing Web Usability . Thousand Oaks, CA: New Riders Publishing, 1999.
Nielsen, J. 113 Design Guidelines for Homepage Usability. Accessed January 30, 2016.
http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability.
Nielsen, J. Usability Inspection Methods . New York, NY: John Wiley & Sons, 2001.
Nielsen, J. Top 10 Guidelines for Homepage Usability. Accessed January 30, 2016.
http://www.nngroup.com/articles/top-ten-guidelines-for-homepage-usability.
Nielsen, J. Information Foraging: Why Google Makes People Leave Your Site Faster. Accessed January 30,
2016. http://www.nngroup.com/articles/information-scent.
Nielsen, J. Avoid Within-Page Links, Nielsen Norman Group article. Accessed January 30, 2016.
http://www.nngroup.com/articles/avoid-within-page-links.
Nielsen, J. F-Shaped Pattern For Reading Web Content. Accessed January 30, 2016.
http://www.nngroup.com/articles/f-shaped-pattern-reading-web-content.
Nielsen, J. Childrens Websites: Usability Issues in Designing for Kids. Accessed January 30, 2016.
http://www.nngroup.com/articles/childrens-websites-usability-issues.
Nielsen, J. Website Response Times. Accessed January 30, 2016. http://www.nngroup.com/articles/website-
response-times.
Nielsen, J. Scrolling and Attention. Accessed January 30, 2016. http://www.nngroup.com/articles/scrolling-and-
attention.
Nielsen, J. Usability 101: Introduction to Usability. Accessed January 30, 2016.
http://www.nngroup.com/articles/usability-101-introduction-to-usability.
Nielsen, J. Auto-Forwarding Carousels and Accordions Annoy Users and Reduce Visibility. Accessed January
30, 2016. http://www.nngroup.com/articles/auto-forwarding.
Nielsen, J. and Faber, J. M. Improving system usability through parallel design. IEEE Computer 29(2), 29-35,
1996.
Nielsen, J. , Molich, R. , Snyder, C. , and Farrell, S. E-commerce user experience: Trust. Accessed January 30,
2016. http://www.nngroup.com/reports/ecommerce-ux-trust-and-credibility.
Norman, D. A. Emotion and design: Attractive things work better. Interactions Magazine 9(4), 36-42, 2002.
Pernice, K. Designing Effective Carousels: Create a Fanciful Amusement, Not a House of Horrors. Accessed
January 30, 2016. http://www.nngroup.com/articles/designing-effective-carousels.
Pressman R. . Software Engineering: A Practitioners Approach. New York, NY: McGraw-Hill Higher Education;
2009.
Read, J. , MacFarlane, S. , and Casey, C. Endurability, engagement, and expectations: Measuring childrens
fun. In Interaction Design and Children, pp. 189-198, Amsterdam, the Netherlands: Eindhoven.
Shenkman B.O. , Jonsson F. . Aesthetics and preferences of web pages. Behaviour and Information
Technology. 2000;19(5):367377.
Sklar J. . Principles of Web Design. Boston, MA: Cengage Learning; 2009.
879 Smith-Atakan S. . Human-Computer Interaction. London: Thomson, Middlesex Press; 2006.
Tractinsky, N. Aesthetics and apparent usability: Empirically assessing cultural and methodological issues.
Paper presented at Chi conference, 1997.
Tractinsky N. , Katz A. , Ikar D. . What is beautiful is usable [Electronic Version]. Interacting with Computers.
2000;13(2):127145.
Williams, R. The Non-Designers Design Book. Berkeley, CA: Peachpit Press, 2004.
Wixon, D. and Wilson, C. E. The usability engineering framework for product design and evaluation. In
Handbook of Human-Computer Interaction, edited by Helander, M. G. , Landauer, T. K. , and Prabju, P. V. , pp.
653-688, Amsterdam, the Netherlands: Elsevier, 1997.

(Smtebooks - Eu) Thomas' Calculus in Si Units 1st Edition

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

(Smtebooks - Eu) Thomas' Calculus in Si Units 1st Edition

Încărcat de

Drepturi de autor:

Formate disponibile

Introduction to Web

M2Z R M I ^ M ]2:2R M U U2\ H H T

© 2018 by Taylor & Francis Group, LLC

No claim to original U.S. Government works

Printed on acid-free paper

International Standard Book Number-13: 978-1-1389-1185-7 (Paperback)

Library of Congress Cataloging‑in‑Publication Data

Names: Macaulay, Michael, author.

Visit the Taylor & Francis Web site at

and the CRC Press Web site at

1. The Internet and the Web..................................................................................... 1

3.6 Superscript and Subscript......................................................................... 39

4. Lists, Tables, and Links...................................................................................... 67

7. Audio, Video, and Animation........................................................................... 183

7.3 Delivering Dynamic Media...................................................................... 183

9.5.5 Color and Physiological Considerations.................................. 268

10. Boxes: Size and Border..................................................................................... 275

10.8 Changing between Inline and Block Elements..................................... 328

11. Boxes: Transform and 3D................................................................................. 335

12. Positioning Elements......................................................................................... 351

12.3.9 Clearing Obstructed Floated Elements..................................... 375

13. Text: Typefaces and Fonts................................................................................ 389

14. Text: Formatting and Decoration.................................................................... 419

14.12 Ruby Properties..................................................................................... 466

15. Images: Content and Background Images...................................................... 473

16. Images: Effects.................................................................................................. 507

16.4 Gradients............................................................................................... 511

17. Lists, Tables, and Forms................................................................................... 533

17.5.4 Validating Form Inputs............................................................. 563

18. Animation.......................................................................................................... 567

19. Layout with Flexible Box.................................................................................. 591

19.7 Controlling the Size of Flex Items........................................................ 597

20. Layout with the Grid Model............................................................................. 615

20.6 Aligning Grid and Grid Items................................................................. 640

21. Responsive and Adaptive Web Design............................................................. 657

22. Beyond HTML and CSS................................................................................... 681

22.4.2 Server-Side Scripting............................................................... 687

Part III Web Design Principles and Practices

24. Designing for the Web....................................................................................... 739

24.4 Website Credibility................................................................................. 741

25. Designing for Mobile Devices........................................................................... 781

Part IV Web Development Process

27. Managing Web Development........................................................................... 827

27.4.3 Production Phase...................................................................... 851

28. Introduction to Intellectual Property.............................................................. 855

About This Book

Structure of This Book

Part II: CSS

Part III: Web Design Principles and Practices

Part IV: Web Development Process

Michael Macaulay, PhD, is a freelance educator, developer, and user-experience

1.2 Learning Outcomes

1.3 Fundamentals of the Internet and the Web

FIGURE 1.1 An illustration of a hypermedia concept.

The syntax is: protocol://host.domain [:port]/path/filename

FIGURE 1.2 The anatomy of a URL or Web address.

normally omitted when an address is specified. In order to access a file on a Web

NOTE: URI versus URL versus URN

1.4 How the Web Works

FIGURE 1.3 An illustration of what happens when a user requests a Web page.

1.5 Requirements for Creating Websites

1.6 Useful Info

1.6.2 Free Software

1.3 Fundamentals of the Internet and the Web