Table Of ContentHTML
and
THE ART OF AUTHORING FOR
THE WORLD WIDE WEB
HTML
and
THE ART OF AUTHORING FOR
THE WORLD WIDE WEB
by
Bebo White
Stanford University
....
"
KLUWER ACADEMIC PUBLISHERS
Boston I Dordrecht I London
Distributors for North America:
Kluwer Academic Publishers
101 Philip Drive
Assinippi Park
Norwell, Massachusetts 02061 USA
Distributors for all other countries:
Kluwer Academic Publishers Group
Distribution Centre
Post Office Box 322
3300 AH Dordrecht, THE NETHERLANDS
Consulting Editor: Eric van Henvijnen, Nice Technologies
Library of Congress Cataloging-in-Publication Data
A C.I.P. Catalogue record for this book is available
from the Library of Congress.
ISBN-13: 978-1-4612-8582-3 e-ISBN-13: 978-1-4613-1351-9
DOl: 10.1007/978-1-4613-1351-9
Copyright © 1996 by Kluwer Academic Publishers
Softcover reprint of the hardcover 1st edition 1996
All rights reserved. No part of this publication may be reproduced, stored in
a retrieval system or transmitted in any form or by any means, mechanical,
photo-copying, recording, or otherwise, without the prior written permission of
the publisher, Kluwer Academic Publishers, 101 Philip Drive, Assinippi Park,
Norwell, Massachusetts 02061
Printed on acid-free paper.
% my sons, 9lndrew, and Christopher-9 think that the CZiJeb only provides a
0/
small glimpse the in/ormation world that you will know, use, and be a pari of
TABLE OF CONTENTS
PREFACE. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. X111
FOREWORD (Robert Calliau) ...................................... xv
FOREWORD (Eric van Henvijnen) ................................. xvii
CONVENTIONS ....................... " ' , , , , . , , . , , , , , .. , , , , , , , , xix
AC~OVVLEJ)~TS, .. """", .. "., ... ,."", .. " .. ",.", ,xri
GETIING STARTED. • • . . • • • • • • . • • . . • • • . . • • . • • • . • • . • • . . • • . • . • . .• 1
1 INTRODUCTION, .. "" .. , ..... , ...... , .. , ........ , ..... ",., 3
1.1 PURPOSE AND SCOPE OF THIS BOOK ... , .. , . , . , .. , ..... ,. 3
1.2 HOW TO USE THIS BOOK ........................ , . . . . . .. 4
2 WHAT IS HYPERTEXT? ............. , , ...... , ..... , ..... , .. , ... 5
2.1 THE ROOTS OF HYPERTEXT ..................... , ... , . , .. 5
2.2 HYPERTEXT CONCEPTS ........................ , , ... , . , .. 6
2.3 HYPERTEXT DOCUMENTS ................... , .... , ....... 8
2.4 WHAT IS MARKUP? ..... , , .......... , , ..... , ... , , ... , , ... 9
2.5 WHAT IS HYPERTEXT MARKUP? ........... , ............. 11
3 THE WORLD WIDE WEB (WWW) ...... , ........... , .... , ..... 13
3,1 ORIGINS OF WWW ........... , ......... , . , ... , .... , .... 13
3.1.1 The WWW project at CERN 14
3.1.2 NCSAMosaic 15
3.2 FUNDAMENTAL CONCEPTS OF OPERATION ... , .. , , .. , . " 16
3.2.1 The WWW client-server model 16
3.2.2 HTTP 17
3.2.3 URIs, URLs, URNs, and URCs 17
viii HTML AND mE ART OF AUmORING FOR THE WORLD WIDE WEB
II THE HYPERTEXT MARKUP LANGUAGE ••.•..•.••..•••••••••.•.....•. 21
4 THE HYPERTEXT MARKUP LANGUAGE. . . . . . . . . . . . . . . . . . . . . .. 23
4.1 THE HTML DOCUMENT TYPE DEFINITION ............... 23
4.1.1 HfML confonnance levels 24
4.2 CONSTRUCTING HTML FILES ........................... 25
4.3 WHAT HTML DOES NOT DO ............................. 25
4.4 CHARACTERISTICS OF HTML TAGS ...................... 27
5 AN HTML PRIMER. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 31
5.1 HOW TO USE THIS CHAPTER ............................ 31
5.2 THE BASIC HTML STRUCTURAL MARKUP TAGSETS ....... 32
5.2.1 HTML Document DefInition-<htrnl> 33
5.2.2 Head Section Definition-<head> 34
5.2.3 Body Section DefInition-<body> 35
5.3 HTML MARKUP TAGS PERMISSmLE WITHIN <head> ....... 36
5.3.1 Comments-< !-- --> 37
5.3.2 Base VRL-<base> 37
5.3.3 Index Document-<isindex> 38
5.3.4 link Reference-<link> 39
5.3.5 Meta-Infonnation-<meta> 41
5.3.6 Next page identifier-<nextid> 42
5.3.7 Range-<range> 42
5.3.8 Style-<style> 43
5.3.9 Documenttide--<tide> 43
5.4 PROCEDURAL OR DESCRIPTIVE MARKUP
TAGS PERMISSIBLE WITHIN <body> ...................... 45
5.4.1 HfML 3 Common Attributes 46
5.4.2 Hyperlink (Anchor) Dcfinition-<a> 46
5.4.3 Forced Line Break-<br> 47
5.4.4 Center Text-<center> 48
5.4.5 Directory List-<dir> 49
5.4.6 DefInition list-<dl> 50
5.4.7 DefInition Tenn-<dt> 51
5.4.8 Tenn Definition-<dd> 52
5.4.9 Figures-<fig> 53
5.4.10 Foomote-<fn> 56
5.4.11 Fill-Out Fonns-<fonn> 56
5.4.12 Horizontal Rule--<hr> 58
5.4.13 Headings-<hl>, <h2>, <h3>, <h4>, <h5>, <h6> 59
5.4.14 Inline Images-<img> 63
5.4.15 list Tide or Caption-<lh> 65
5.4.16 list Item-<li> 65
5.4.17 Menu List-<menu> 67
5.4.18 No Break-<nobr> 67
5.4.19 Note-<note> 68
5.4.20 Ordered (Numbered) list-<ol> 69
5.4.21 Figure Overlay-<overlay> 71
5.4.22 Paragraph Break-<p> 72
5.4.23 Prcfonnatted Text-<pre> 74
TABLE OF CONTENTS lX
5.4.24 Horizontal Tabs-<tab> 76
5.4.25 Unordered (Bulleted) List-<ul> 77
5.4.26 Word Break-<wbr> 79
5.5 FONT STYLE MARKUP TAGS
PERMISSIBLE WITHIN <body> ........................... 79
5.5.1 Character Style Tags 79
5.5.1.1 Using italics 81
5.5.1.2 Using boldface and underlining 82
5.5.2 Base Font-<basefont> 82
5.5.3 Font Sizing-<font> 83
5.6 INFORMATIONAL TYPE MARKUP
TAGS PERMISSIBLE WITHIN <body> ...................... 84
5.6.1 Abbreviation-<abbrev> 84
5.6.2 Acronym-<acronym> 86
5.6.3 Address-<address> 86
5.6.4 Author-<au> 87
5.6.5 Blinking text-<blink> 87
5.6.6 Block quotations-<blockquote> 87
5.6.7 Citation-<cite> 88
5.6.8 Computer Program Listing-<code> 89
5.6.9 Deleted Text-<del> 90
5.6.10 Defmition-<dfn> 90
5.6.11 Emphasis-<em> 91
5.6.12 Inserted text-<ins> 91
5.6.13 Keyboard Entry-<kbd> 92
5.6.14 Language-<lang> 92
5.6.15 Person-<person> 92
5.6.16 Short Quotation-<q> 93
5.6.17 Sequence of Literal Characters-<samp> 94
5.6.18 Strong-<strong> 94
5.6.19 Variable name-<var> 95
5.7 ENTITIES .............................................. 95
5.8 MARKUP TAGS USED IN THE
DEFINITION OF FILL-OUT FORMS . . . . . . . . . . . . . . . . . . . . . .. 97
5.8.1 Input Element-<input> 97
5.8.1.1 Textual input-<input type = text> 97
5.8.1.2 Password input-<input type = password> 98
5.8.1.3 Checkbox input-<input type=checkbox> 99
5.8.1.4 Radio button input-<input type=radio> 100
5.8.1.5 Image input-<input type=image> 100
5.8.1.6 Hidden input-<input type=hidden> 101
5.8.1.7 Submit button-<input type = submit> 102
5.8.1.8 Reset button-<input type=reset> 103
5.8.1.9 Input in range-<input type = range> 103
5.8.1.10 Scribble on image input-<inputtype=scribble> 104
5.8.1.11 File attachments-<input type=fJ.!e> 105
5.8.2 Selection List:jMenu-<select> 106
5.8.3 Selection List/Menu Item-<option> 107
5.8.4 Text entry defmition-<textarea> 108
5.9 MARKUP TAGS USED IN THE DEFINITION
OF TABLES (NHfML, mML 3) ....... . . . . . . . . . . . . . . . . . .. 109
x HTML AND THE ART OF AUTHORING FOR THE WORLD WIDE WEB
5.9.1 Table Defmition-<table> 109
5.9.2 Captions-<caption> 112
5.9.3 Table rows-<tr> 113
5.9.4 Table cells-<td>, <th> 114
5.9.5 Table examples 115
5.10 MARKUP TAGS USED IN MATHEMATICAL FORMATTING
(HTML 3) .............................................. 117
5.10.1 Math-<math> 117
5.10.2 Mathematical entities 118
5.10.3 Boxes-<box> 119
5.10.4 Text-<text> 120
5.10.5 Bold, Typewriter, Bold Typewriter Font-<b>,<t>,<bt> 120
5.10.6 Subscript and Superscript-<sub>, <sup> 120
5.10.7 Above and Below-<above>, <below> 122
5.10.8 Accenu.-<vec>, <bar>, <dot>, <ddot>, <hat>, <tilde> 123
5.10.9 Square root-<sqrt> 124
5.10.10 Roou.-<root> 124
5.10.11 AInys-<array> 124
5.10.11.1 Rows-<row> 126
5.10.11.2 Row iteIns-<item> 126
5.10.11.3 AlTay examples 127
III THE ART OF AUTHORING IN HTML. •.••••...•.•...•.•...•...•.•. 129
6 AUTHORING HYPERTEXT DOCUMENTS. . . . . . . . . . . . . . . . . . . .. 131
6.1 WHY WRITE A HYPERTEXT DOCUMENf? ................ 131
6.1.1 Hypertext Is Not Just Text with Links 133
6.1.2 Skills Required for Hypertext Authoring 133
6.2 HYPERTEXT DOCUMENf DESIGN ....................... 134
6.2.1 Document Structure 134
6.2.1.1 The sequence structure. 135
6.2.1.2 The grid structure. 135
6.2.1.3 The tree structure. 137
6.2.1.4 The web structure. 138
6.2.1.5 Compound structures. 138
6.2.1.6 Modular writing to structure. 139
6.2.2 Document Size and Page Size 140
6.2.2.1 Considering short term memory. 141
6.2.2.2 Considering limitations on viewing area. 142
6.2.3 Organization and Display of Information 145
6.2.3.1 Organization. 145
6.2.3.2 Display. 147
6.2.4 Document Navigation 150
6.2.4.1 Defmed Structure. 150
7 AUTHORING H1ML DOCUMENTS . . . . . . . . . . . . . . . . . . . . . . . . .. 151
7.1 WHY WRITE A DOCUMENf
FOR THE WORLD WIDE WEB? .......................... 151
7.1.1 Web Documenu. Are Not Just Text with HTML tags 153
TABLE OF CONTENTS xi
7.2 HfML DOCUMENT DESIGN. . . . . . . . . . . . . . . . . . . . . . . . . . .. 154
7.2.1 Document Structure 154
7.2.2 Document Size and Page Size 159
7.2.2.1 Controlling page size with stretch text 161
7.2.2.2 Page size and accessibility 163
7.2.2.3 Page size and viewing area 164
7.2.3 Organization and Display ofInfonnation. . . . . . . . . . . . . .. 164
7.2.3.1 Organization by lists 165
7.2.3.2 Graphical organization. 168
7.2.3.3 Interactive Images. 169
7.2.4 Document Navigation ............................. 170
7.2.4.1 Bi-Directional Links. 172
7.3 DOCUMENT CONTENT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 172
7.3.1 MIME Types ..................................... 173
7.3.2 Image Data Types . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 174
7.3.2.1 Effective use of images. 175
7.3.2.2 Interactive images. 176
7.3.3 Multimedia Data Types 177
7.3.4 Special Content Description 179
7.3.5 Non.:rextual Page Descriptions 181
7.3.6 Links 181
7.4 INTELLECTUAL PROPERTY AND COPYRIGHf. . . . . . . . . . .. 182
7.4.1 What is Copyright? 182
7.4.2 Avoiding Copyright Infringement 183
7.4.3 Including Copyright Protection 183
8 WWWFRONTPAGES, HOME PAGES, EN1RY PAGES
AND ROOTPAGES .......................................... 185
8.1 FRONT PAGE DESIGN. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. 187
8.1.1 Front Page Structure 188
8.1.2 Front Page Size 189
8.1.3 Organization and Display ofInfonnation 190
8.1.4 Front Page Navigation 190
8.2 FRONT PAGE CONTENT ................................ 191
8.3 EXAMPLES AND CASE STUDIES ......................... 192
8.3.1 Online Document Front Pages 192
8.3.2 InstiOltional Home Pages 193
8.3.3 Corporate/Commercial Welcome Pages 195
8.3.4 Personal Home Pages 197
9 WWWFILL-OUTFORMS ......~ .............................. 201
9.1 DESIGNING FILL-OUT FORMS .......................... 202
IV SPECIAL HTML ApPLICATIONS. • • • • • • • • • • • • • • • • • • • • • • . • • . . • • • •• 211
10 CONVERTING FORMATTED DOCUMENTS TO HTML .......... 213
10.1 SIMPLE CONVERSION OF TEXT DOCUMENTS ........... 213
10.2 MARKING UP PREFORMATTED DOCUMENTS ........... 214
