Authoring for the Web

Institute for Visualization and Perception ResearchI VPR 1

© Copyright 1998 Haim Levkowitz

Authoring for the Web ...

• HTML overview ...

• Information design issues ...

• HTML authoring tools ...

• Clickable image maps ...

Institute for Visualization and Perception ResearchI VPR 2

© Copyright 1998 Haim Levkowitz

HTML overview ...• Can specify ...• Cannot control ...• Autoflowing and autowrapping ...• HTML tag syntax ...• Document construction guidelines• Sample documents• Hyperlinks ...• Linking within documents• URLs ...• Lists ...• Graphics ...• Server-side includes ...• More HTML info ...

Institute for Visualization and Perception ResearchI VPR 3

© Copyright 1998 Haim Levkowitz

Can specify ...• Title• Hierarchical structure of documents, headers,

section names• Bulleted, numbered, nested lists• Insertion points for graphics• Special emphasis for keywords, phrases• Preformatted areas of document• Hyperlinks and associated URLs

Institute for Visualization and Perception ResearchI VPR 4

© Copyright 1998 Haim Levkowitz

Cannot control ...

• Typeface used

• Point size of font

• Width, height of screen

Institute for Visualization and Perception ResearchI VPR 5

© Copyright 1998 Haim Levkowitz

Autoflowing and autowrapping ...

• No regard to line breaks in input text

• Depends on browser, screen size

Institute for Visualization and Perception ResearchI VPR 6

© Copyright 1998 Haim Levkowitz

HTML tag syntax ...

• Single-element

• <tag [options]>

• E.g., <p>, <br>

• Paired

• <tag [options]>object</tag>

• E.g., <i>, <em>, <ul>, ..

Institute for Visualization and Perception ResearchI VPR 7

© Copyright 1998 Haim Levkowitz

Hyperlinks ...• Anchor tagging pair

• <a option1 ... optionN>anchor-text</a>• At least one option

• Hyperlink: <a HREF="URL">anchor-text</a>• Within file: <a NAME="anchor-

name">anchor-text</a>• <a href="#anchor-name">anchor-text</a>• <a href="URL#anchor-name">anchor-

text</a>

Institute for Visualization and Perception ResearchI VPR 8

© Copyright 1998 Haim Levkowitz

URLs ...

• Absolute

• Relative

• Local

• Different URLs

Institute for Visualization and Perception ResearchI VPR 9

© Copyright 1998 Haim Levkowitz

Lists ...

• Unordered (bulleted): <ul>list</ul>

• Ordered (numbered): <ol>list</ol>

• List item: <li>

• Definition: <dl>list</dl>

• No bullet / number

• <dt>primary text</dt>

• <dd>associated text</dd>

Institute for Visualization and Perception ResearchI VPR 10

© Copyright 1998 Haim Levkowitz

Graphics ...

• Inline images

• External images

• Inline images with character-based browsers

Institute for Visualization and Perception ResearchI VPR 11

© Copyright 1998 Haim Levkowitz

Server-side includes ...

• Include info from files and environment variables

• Files: <!--#include file="file-name.txt"-->

• Environment variable: <!--#echo var="Var_Name"--> ...

Institute for Visualization and Perception ResearchI VPR 12

© Copyright 1998 Haim Levkowitz

Environment variable: <!--#echo var="Var_Name"--> ...• LAST_MODIFIED

• DOCUMENT_NAME

• DOCUMENT_URI

• DATE_LOCAL

• DATE_GMT

• QUERY_STRING-UNESCAPED

• CGI variables

Institute for Visualization and Perception ResearchI VPR 13

© Copyright 1998 Haim Levkowitz

More HTML info ...

• Http://www.w3.org

• http://hoohoo.ncsa.uiuc.edu/docs/tutorials/includes.html (old)

Institute for Visualization and Perception ResearchI VPR 14

© Copyright 1998 Haim Levkowitz

Information design issues ...

• Document modularity• Degrees of hyperization• Automatic vs. manual hyperlinking• Style guidelines• Examples

• The “unlearning” of 500 years of knowledge

Institute for Visualization and Perception ResearchI VPR 15

© Copyright 1998 Haim Levkowitz

HTML authoring tools ...• Emacs HTML mode• FrameMaker• Adobe PageMill• MS FrontPage• DreamWeaver• Trellix• Other• HTML Conversion tools and filters …

Institute for Visualization and Perception ResearchI VPR 16

© Copyright 1998 Haim Levkowitz

HTML Conversion tools and filters ...

• ASCII to HTML

• BibTeX to HTML

• LaTeX to HTML

• Mail to HTML

• PostScript to HTML

• PowerPoint to HTML

Institute for Visualization and Perception ResearchI VPR 17

© Copyright 1998 Haim Levkowitz

Clickable image maps ...

• Planning• Mapping hotspots to map file• Connecting map file to URL• Referencing clickable image map in

HTML• Testing the image map• How it works