Introduction to Web Interaction Design: With HTML and CSS

1046 Pages·2017·38.62 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-13891185-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
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
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