Introduction to Web Interaction Design With HTML and CSS

1094 Pages·2018·56.86 MB·english

by  Michael Macaulay

Introduction to Web
Interaction Design
With HTML and CSS
Introduction to Web
Interaction Design
With HTML and CSS
Michael Macaulay
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: Registered trademark of products or corporate names are used only for explanation and identification 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
Author
1. The Internet and the Web
1.1 Introduction
1.2 Learning Outcomes
1.3 Fundamentals of the Internet and the Web
1.4 How the Web Works
1.5 Requirements for Creating Websites
1.6 Useful Info
1.6.1 Web Links
1.6.2 Free Software
Part I HTML
2. Introduction to HTML
2.1 Introduction
2.2 Learning Outcomes
2.3 About HTML
2.3.1 The Structure of an HTML Document
2.3.1.1 The Contents of the Head Section
2.3.1.2 The Contents of the Body Section
2.3.2 Creating a Web Page
2.3.2.1 Creating a Web Page with a Text Editor
2.4 Useful Info
2.4.1 Web Links
3. Text
3.1 Introduction
3.2 Learning Outcomes
3.3 Headings
3.3.1 Headings in Design
3.4 Paragraphs
3.4.1 Paragraphs in Design
3.5 Line Breaks, Thematic Breaks, and Comments
3.5.1 Specifying Word-Break Opportunities
3.6 Superscript and Subscript
3.7 Importance, Emphasis, and Relevance
3.8 Quotations and Citations
3.9 Definitions and Abbreviations
3.10 Small Text
3.11 Text Edit
3.12 Displaying Computer Code and Output
3.13 Displaying Preformatted Text
3.14 Authors’ Details and Publication Dates
3.15 Providing Hidden Additional Information
3.16 Displaying a Dialog Box
3.17 Menu Bar and Drop-Down Menus
3.18 Displaying Special Characters
3.18.1Non-Breaking Spaces
3.19 Language Information and Text Directionality
3.19.1lang
3.19.1.1Benefits of Using the lang Attribute
3.19.2dir
3.20 Ruby Text
3.20.1<ruby>, <rb>, <rt>, and <rp>
3.20.2<rbc> and <rtc>
3.21 Acquiring Text for Use
3.22 Useful Info
3.22.1Web Links
4. Lists, Tables, and Links
4.1 Introduction
4.2 Learning Outcomes
4.3 Lists
4.3.1 Common List Attributes
4.3.2 Nested Lists
4.4 Tables
4.4.1 Basic Tables
4.4.1.1 <table>, <caption>, <th>, <tr>, and <td>
4.4.1.2 Columns’ Grouping
4.4.2 Table Cells’ Merging
4.4.2.1 <rowspan> and <colspan>
4.4.3 Long Tables
4.4.3.1 <thead>, <tbody>, and <tfoot>
4.4.4 Tables and Accessibility
4.4.4.1 The scope Attribute and Accessibility
4.4.4.2 The id and headers Attributes and Accessibility
4.5 Links
4.5.1 Linking to Another Website
4.5.2 Linking to Another Page on the Same Website
4.5.3 Linking to Another Part on the Same Page
4.5.3.1 Using the id Attribute
4.5.3.2 Using the name Attribute
4.5.3.3 Within-Page Links in Web Design
4.5.4 Linking to a Specific Part on Another Page
4.5.5 Linking to an E-Mail Program
4.6 Useful Info
4.6.1 Web Links
5. Forms
5.1 Introduction
5.2 Learning Outcomes
5.3 Form Element
5.4 Form Controls
5.4.1 <input>
5.4.1.1 Input Types for Collecting Text
5.4.1.2 Input Types for Offering Options
5.4.1.3 Input Types for Starting an Action
5.4.2 Multipurpose Button
5.4.2.1 <button>...</button>
5.4.3 Multiple Lines Text Input
5.4.3.1 <textarea>...</textarea>
5.4.4 Drop-Down List
5.4.4.1 <select>...</select>
5.4.4.2 <datalist>...</datalist>
5.4.5 Showing Task Progress
5.4.5.1 <progress>...</progress>
5.4.6 Displaying Measurement
5.4.6.1 <meter>...</meter>
5.4.7 Outputting Calculation Result
5.4.7.1 <output>...<output>
5.4.8 Labeling Form Controls
5.4.8.1 <label>...<label>
5.4.8.2 Labeling and Accessibility
5.4.9 Grouping Form Controls
5.4.9.1 <fieldset>...</fieldset>/<legend>...</legend>
5.4.10An Example Form
5.5 Form Design Guidelines
5.6 Useful Info
5.6.1 Web Links
6. Images
6.1 Introduction
6.2 Learning Outcomes
6.3 Adding Images with HTML
6.3.1 <img>, <source>, and <picture>
6.3.1.1 Specifying a Single Image Source
6.3.1.2 Making an Image a Link, and Linking to an Image
6.3.1.3 Containing and Captioning Images Properly
6.3.1.4 Specifying Multiple Image Sources
6.3.2 <canvas>...</canvas>
6.3.3 <svg>...</svg>
6.3.4 <map>...</map> and <area>...</area>
6.4 Document Embedding
6.4.1 <iframe>...</iframe>
6.5 Types of Images
6.5.1 Bitmapped Images
6.5.1.1 Image Resolution
6.5.1.2 Pixels per Unit Length
6.5.1.3 Color Depth
6.5.2 Vector Images
6.5.3 Image File Formats and Image File Size
6.5.5 Calculating File Size Generated from Scanned Documents
6.5.5 Calculating File Size Generated from Digital Camera
6.5.6 Calculating File Transmission Time
6.6 Guidelines for Effective Use of Images
6.6.1 Decorative Images
6.6.2 Large Images
6.6.3 Images with Text
6.6.4 Images and Captions
6.7 Acquiring Images for Use
6.7.1 Stock Images
6.7.2 Graphics Editors
6.7.3 Photography
6.7.4 Image Scanning
6.7.5 Web Coding Languages
6.8 Useful Info
6.8.1 Web Links
6.8.2 Free Software
7. Audio, Video, and Animation
7.1 Introduction
7.2 Learning Outcomes
7.3 Delivering Dynamic Media
7.4 Audio
7.4.1 Linking to Audio
7.4.2 Embedding Audio
7.4.2.1 <audio>.. .<audio>
7.4.2.2 <embed>
7.4.2.3 <object>.. .</object>
7.4.3 Audio in Web Design
7.4.3.1 Audio File Formats and Audio File Size
7.4.3.2 Guidelines on Effective Use of Sound
7.4.4 Acquiring Audio for Web Design
7.4.4.1 Stock Audio
7.4.4.2 Ripping Tracks from Discs
7.4.4.3 Digitizing Tracks from Vinyl Records
7.4.4.4 Creating Audio from Scratch
7.5 Video
7.5.1 Adding Video via Hosted Video Services
7.5.2 Adding Video to Web Page
7.5.2.1 Linking to Video
7.5.2.2 Embedding Video
7.5.3 Video in Design
7.5.3.1 Video File Size
7.5.3.2 Video File Formats and Codecs
7.5.3.3 Guidelines on Effective Use of Video
7.5.4 Acquiring Video for Design
7.5.4.1 Stock Videos
7.5.4.2 Ripping Video from DVD Video/Blu-Ray Disc
7.5.4.3 Video from Video Devices
7.5.4.4 Producing Video from Scratch
7.5.4.5 Video Screen Capture
7.6 Animation
7.6.1 Animation in Design
7.6.1.1 Guidelines on Effective Use of Animation
7.6.2 Acquiring 2D Animation for Design
7.6.2.1 Stock 2D Animation
7.6.2.2 2D Animation Programs
7.6.2.3 Coding
7.7 Useful Info
7.7.1 Web Links
7.7.2 Free Software
Part II CSS
8. Introduction to CSS
8.1 Introduction
8.2 Learning Outcomes
8.3 Introduction to CSS
8.3.1 Anatomy of CSS Rules
8.3.1.1 CSS Selector Types
8.3.1.2 Pseudo-Elements
8.3.1.3 Pseudo-Classes
8.3.1.4 nth Selectors
8.3.2 CSS Cascading Properties
8.3.2.1 Last Rule Principle
8.3.2.2 Specificity Principle
8.3.2.3 Inheritance
8.3.3 Methods of Specifying CSS Rules
8.3.3.1 Inline CSS
8.3.3.2 External CSS
8.4 Useful Info
8.4.1 Web Links
9. Color
9.1 Introduction
9.2 Learning Outcomes
9.3 Specifying Color in CSS
9.3.1 RGB Values
9.3.2 HSL Values
9.3.3 Foreground and Background Color
9.3.3.1 Color Transparency
9.4 Anatomy of Color and Color Models
9.4.1 Determining Color Values
9.5 Color in Design
9.5.1 Choosing Color Combinations
9.5.1.1 Monochromatic
9.5.1.2 Analogous
9.5.1.3 Complementary
9.5.1.4 Split Complementary
9.5.1.5 Double Contrast
9.5.1.6 Triadic
9.5.2 Color Proportions
9.5.3 Color in Content Organization
9.5.4 Color and Aesthetics
9.5.5 Color and Physiological Considerations
9.5.6 Color and Psychological Considerations
9.5.7 Color Preferences
9.5.8 Color and Accessibility
9.6 Useful Info
9.6.1 Web Links
10. Boxes: Size and Border
10.1 Introduction
10.2 Learning Outcomes
10.3 Box Dimensions
10.3.1width and height
10.3.1.1Specifying Logical Width and Height
10.3.2min-width and min-height and max-width and max-height
10.3.2.1Handling Content Overflow
10.3.2.2Specifying Minimum and Maximum Logical Width and Height
10.3.3calc()
10.4 Border, Padding, and Margin
10.4.1Border
10.4.1.1border-style
10.4.1.2border-width
10.4.1.3border-color
10.4.1.4border-top and border-bottom and border-right and border-left
10.4.1.5border
10.4.1.6border-image
10.4.1.7border-radius
10.4.2padding
10.4.2.1Specifying Padding for Logical Edges
10.4.3margin
10.4.3.1Specifying Margin for Logical Edges
10.4.3.2Margins in Design
10.5 Controlling Box Sizes
10.5.1Specifying How Boxes Are Rendered
10.5.2Making Boxes Resizable