Upload
tyler
View
30
Download
1
Embed Size (px)
DESCRIPTION
Authoring for the Web. HTML overview ... Information design issues ... HTML authoring tools ... Clickable image maps. HTML overview. Can specify ... Cannot control ... Autoflowing and autowrapping ... HTML tag syntax ... Document construction guidelines Sample documents Hyperlinks ... - PowerPoint PPT Presentation
Citation preview
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