HTML - lecture 2
Secretary/teacher course, 1999. (http://it.civil.auc.dk/education/secretary_teacher_1)
HTML = Hypertext Markup Language.
If you forget the HTML language and the special < > tags do not worry.
You can write an example in AOL-Press and there look at the HTML code
that AOL-Press has produced.
You can also do a 'save-as' HTML file from Microsoft Word to get a
HTML coded document. For example if you have a table over students
you can easily produce the basic HTML code with a 'save-as' command
and then do smaller editing in AOL-Press or in a more basic HTML editor.
Document design considerations
The hypemedia gives some new possibilities in connection with searching, navigating, reading, authoring and feed-back. Here are some important
views on the design of hypermedia documents.
I have listed some tips below regarding the design of a the HTML-document.
We will discuss document structures separately in 'lecture 5'.
- Date when the page was published and changed (I use
1998.02.08 (1998.02.02 ) [1998.01.24] for latest change, prevous change and
published).
- Responsible person (publisher)
- Use transparent images but not always (more later in 'lecture 4'.
- External links in separte target windows.
- Navigation palette design etc. is important (navigation metaphores)
- Use 'TOP name links' in long pages (which you really should avoid)
- Always present the reader with an overview first.
- Think about what type of reader(s) (defining 'user models') you expect.
- Meet the readers need for level of interaction, knowledge domain interest and need for output completeness
- Consider receiving feed-back from the readers
- Respect the copyright. Always ask for permission to use material and state source.
- Structure should be visible explicit or implicit. Document structure and try to navigate it with visitors eyes.
- What is the main content and its structure in the document (more or less explicitely expressed) (more about structures in 'lecture 5').
- Make your pages navigable (avoid people 'getting lost in hyperspace'). The mental image build up should conform with the actual structure.
- Structure your work early. Etimate space and navigation demands initially and later.
HTML Tags
Below is a list of the HTML tags we will look at in this lecture.
- The HTML document main parts (HTML, HEAD, TITLE, BODY with bgcolor="#ffffff"
- Header (<H1>Header1 text</H1>,<H2>Header 2 text </H2>;,....)
- Paragraphs and line break (<p>, <br>)
- If you want to use a special font (this example Virtual Buildings)
<font face="helvetica,arial" Size="+3">Virtual Buildings</font>
- Lists (unordered <UL>, ordered <OL>) with listelements (<LI>)
- Tables
<TABLE BORDER="0">
<TR> <TD>Column 1 in row 1</TD> <TD>Column 2 in row 1</TD> </TR>
<TR> <TD>Column 1 in row 2</TD> <TD>Column 2 in row 2</TD> </TR>
</TABLE>
(plus commands for vertical and horisontal allign, VALIGN="top", ALLIGN="left")
- Links (Anchor) to to other documents and images.
<A HREF="jump to this page" TARGET="external"> text or image to click on </A>
<IMG SRC="images/me_front.gif" ALIGN=TOP>
- Jump to a specific line in a document
<A HREF="#lable_name"
> click here to jump to label 'scheme'
</A>
<A NAME="lable_name"> This is where the document is started to be shown as you jump to label 'scheme' </A>
Download HTML editor
Use a HTML editor or a any text editor. Download for example
