Академический Документы
Профессиональный Документы
Культура Документы
Interaction Design
With HTML and CSS
Introduction to Web
Interaction Design
With HTML and CSS
Michael Macaulay
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.
Preface........................................................................................................................ xxv
Author...................................................................................................................... xxvii
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.2 Learning Outcomes.................................................................................... 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
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.2 Learning Outcomes.................................................................................... 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.2 Learning Outcomes.................................................................................. 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
Part II CSS
8. Introduction to CSS.......................................................................................... 221
8.1 Introduction.............................................................................................. 221
8.2 Learning Outcomes.................................................................................. 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.2 Learning Outcomes.................................................................................. 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
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.
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.
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.
• 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
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
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
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.
The Internet and the Web 5
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.
Web authoring tools: Google Web Designer (Cross Platform), Mobirise Website
Builder (Win, Mac), ToWeb (Cross Platform), KompoZer (Cross Platform),
OpenElement (Win).
The Internet and the Web 7
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.