Introduction to Authoring in HTML on the WWW

Introduction to Authoring in HTML on the WWW
- Day 1 - Intro, Overview, HTML Tags
- Dr Lawrie Brown
- Dept. Computer Science, ADFA
Administrivia
- background familiarity assumed with:
  - navigating the WWW using web browsers
  - general computer usage
  - editing text files
- web version of these notes are at:
  - http://www.cs.adfa.edu.au/training/html-intro/
- will have a practical session later each day
Hypermedia Documents
- text, graphics, sound, video, hyperlinks
HTML Documents
- a document written in HTML
What is HTML
- HyperText Markup Language
- embedded formatting tags in document text
  - by using a text editor, manually inserting tags
  - or using a special HTML editor
- all tags and text are in plain ASCII
- derived from SGML (Standard Generalised Markup Language)
  - a meta-language for describing document markups
  - HTML is a particular variant (DTD) of SGML
Uniform Resource Locators (URLs)
- unique name for each hypertext document
- document may be anywhere in the world
- URL identifies how to get it, where it is, its name
Markup vs Presentation
- Markup => show logical document structure
- Presentation => get final look & feel
- authoring primarily concerned with content & logical structure
- presentation can & does vary based on target
- SGML primarily concerned with markup
  - DTD (Data Type Definition) - tags used & syntax
  - content of document
  - style sheet - defines presentation used for tags
- HTML specifies only content
HTML - its all done with Tags
- text enclosed by angle brackets
  - <tag>
- inserted in document at relevant place
- specifies aspect of formatting document
- often have a PAIR of tags
  - <em> text that is emphasised </em>
- tags may be nested, may span many lines
  - <address> <em>Lawrie Brown</em> -
  - last updated on 11 Oct 95 </address>
More on Tags
- are case-insensitive
  - in practise adopt a standard convention
  - <TItle>A Title</titLE> is legal, but in poor style
- can have attributes (parameters)
  - may be optional or mandatory
    - <img src="mugshot.gif">
    - <img src="mugshot.gif" align=middle>
    - <a name="can jump here">
Basic HTML Document Structure
- HTML document comprises
- HEAD
  - with meta-information on document
  - Title, Link to author
- BODY
  - actual document contents as seen on a browser
  - information structured with headings and formatted
Creating HTML Documents
- just a plain ASCII text file
- with tags embedded in text
- can create with
  - a standard text editor, manually inserting tags
  - a custom HTML editor aware of tags
  - a word processor that can export HTML
- file name conventions
  - file.html (Unix/Mac)
  - file.htm (DOS)
Your First Document
- <html><head>
- <title>My First Document</title>
- </head><body>
- <h1>My First Document</h1>
- This is my <b>very first</b> web document.
- <p>
- Written for the Introductory HTML course.
- <hr><address> Lawrie Brown / 11 Oct 95
- </address>
- </body></html>
Viewing Documents
- use a Web Browser to view HTML files
  - cf first.html contains "My First Document"
- this shows the formatted form
- can View Source to see raw HTML
  - check out others neat ideas
- use Save As ... Source to save a copy
  - to grab neat ideas
  - but should acknowledge original source if used
  - web documents are automatically copyrighted
  - note - will need to save images separately
A Walk Through HTML Tags
- will now look at some of the common tags
  - basic structure
  - header tags
  - headings to outline the document
  - breaking text up
  - formatting text
  - lists
  - links within and to other documents
  - tables
Basic Structure
- <!doctype html public
- '-/IETF/DTD HTML 3.0 Strict/EN' >
- html>
- <head>
- 
- 
- </head>
- <body>
- 
- </body>
- </html>
Header Tags
- every document MUST have a TITLE
  - <title>My First Document</title>
- may have a LINK to contact author
  - <link rev="made" href="mailto:user@domain">
    - nb there are other forms of the LINK tag (eg to parent)
- may have comments about the document
  - 
- other rarely used tags:
  - NEXTID, BASE
Document Outline with Headings
- good documents are outlined with headings
  - <H1> ... </H1> down to <H6> ... </H6>
- by convention first heading is the same as (or abbreviated from) the document title
- headings may be nested up to 6 layers deep
  - <h1>A First Level Heading</h1>
  - <h2>A Second Level Heading</h2>
  - <h2>Another Second Level Heading</h2>
Inline Graphics 1
- can place graphics inline in document
  - <img src="graphic.gif">
- image must in standard format
  - GIF or JPEG (on newer browsers)
- image is shown in place on GUI browsers
  - BUT some browsers don't/can't load images
- should provide alternate text for these
  - <img src="graphic.gif" alt="[A Nice Picture]">
  - <img src="graphic.gif" alt="">
Inline Graphics2
- text cannot flow round graphics
- may have just one line aligned:
  - TOP <img src="graphic.gif" align=top>
  - MIDDLE <img src="graphic.gif" align=middle>
  - BOTTOM <img src="graphic.gif" align=bottom>
- should keep inline images small
  - reduce load time
  - if necessary link to a larger image
  - reuse a few icons, rather than many
Breaking Text Up
- by default all text flows into paragraphs
- <p> separates blocks of text into paragraphs
  - <p>this is the start of a paragraph
  - which can span several lines
  - <p>and here is a second paragraph
- note there is NO end paragraph tag </p>
- <br> inserts a line break
  - this text is split here <br>into two lines
- <hr> inserts a horizontal ruler to split text
  - this text has a ruler after it <hr> before this text
Formatting Specific Text
- can specify precise format of parts of text
  - <b>bold</b>
  - <i>italic</i>
  - <u>underline (HTMLv3)</u>
  - <tt>fixed-width (typewriter) font</tt>
- can also specify soft format (leaving precise form to the browser)
  - <em>emphasised text (often italic)</em>
  - <strong>strongly emphasised text (bold)</strong>
  - <cite>a reference citation (often italic)</cite>
Formatting Blocks of Text
- can specify formats for blocks of text
  - <pre>a block of preformatted text using a fixed-width font and preserving line breaks, such as computer listings etc</pre>
  - <blockquote>an extended quote from some source, shown reformatted and justified, but displayed as special (often indented). <p>Can have embedded paragraph tags, etc</blockquote>
Lists, lists, and more lists
- have various types of lists of items
- <ul> unordered lists of list items <li>
- <ol> ordered lists of list items <li>
  - <ul> Title of List
  - <li> first point about an embedded list
  - <ol> Title of Inner list
  - <li> with first numbered point
  - <li> with second numbered point
  - </ol>
  - <li> second point of outer list
  - </ul>
Lists, lists, and more lists
- <dl> definition (tagged) lists
  - used to define term <dt> with definition <dd>
    - <dl> Title of List
    - <dt> First Term
    - <dd> meaning of first term
    - <dt> Second Term
    - <dd> meaning of second term
    - </dl>
- also <menu> <li> ... <li> .. </menu>
- and <dir> <li> ... <li> .. </dir>
  - not widely used
Linking to Other Documents
- anchor tags are used to create a hotlink to other documents
  - <a href="someURL">hot text or graphic</a>
- hot text may include in-line graphics
  - <a href="fullsize.jpg">
  - <img src="mugshot.gif> The Mug</a>
- when link is selected, browser then retrieves and displays the referenced document
Linking to Other Media
- can also link to ANY type of file
  - sound, any graphic, video, etc
  - eg <a href="funky.wav">Cool Tune</a>
- these files are handled by "helper applications" rather than by your browser
- hence other graphics, video etc appear in windows belonging to this application
- if browser doesn't know about a document type, have option of ignoring or saving file
Linking Within Documents
- can name locations within a document
  - <a name="first marker">
- can then create an anchor elsewhere to jump to that point
  - <a href="#first marker">Jump to first marker</a>
- or indeed can place such a link in ANY doc
  - <a href="mydoc.html#first marker">Jump to first marker</a>
Tables
- <table> ... </table> defines an entire table
  - <table border> specifies optional border
- <tr> ... </tr> defines a row of a table
  - <tr align=left|right|center valign=top|middle|bottom> alignment of cell
- <td> ... </td> defines a table data cell
  - same alignment options as above for cell data
- <th> ... </th> defines table column/row header
  - same alignment options
  - <th colspan=?> or <th rowspan=?>
- <caption> ... </caption> provides a caption
Example Table
- <table border>
- <tr><th><img src="dragon.gif"></th>
- <th colspan=2>Cols 2 & 3</th>
- <tr><th>R1:</th><td>R1C2</td> <td>R1C3</td></tr>
- <tr><th>R2:</th><td>R2C2</td> <td>R2C3</td></tr>
- <tr><th>R3:</th><td>R3C2</td> <td>R3C3</td></tr>
- <caption align=bottom><b>An Example Table</b></caption></table>
Miscellaneous Tags
- <address> is used by convention to specify the author, and often the last modified date
  - usually the last item in the body
  - often separated by a ruler
    - <hr><address> Lawrie Brown (lpb@adfa.edu.au)
    - / 11 Oct 95 </address>
Special Characters
- some characters are "magic" in HTML
  - eg < > & "
- use special character tags to insert them
  - < <
  - > >
  - & &
  - " "
  - &#nnn; ASCII char number nnn
  - © Copyright symbol
  - ® Registered Trademark symbol
Advanced Features
- Forms
  - enables information to be entered and returned
  - requires use of CGI scripts on server
- Clickable Images
  - provides "hotspot" regions on an image
  - requires use of "imagemap" handler + map file
- Dynamic Document Creation
  - documents whose contents change
  - may be entirely dynamic, created by CGI script
  - may be static with server side includes (SSI)
Missing Features
- equations
  - being standardized in HTMLv3
  - will be similar to LaTeX maths mode
  - not yet finalised
  - for now translators render equations as images
- style sheets
  - both for specification by server
  - also for custom user
  - being worked on in HTMLv3
Lab Session
- goals for this session
  - create your own first document using a text editor to manipulate HTML files
    - use first.html and webskel.html as guides
  - run through and experiment with tutorials
    - Writing HTML Tutorial
      - http://www.cs.adfa.edu.au/other/writingHTML/start.html
    - Beginners's Guide to HTML
      - http://www.cs.adfa.edu.au/other/HTMLPrimer.html
  - start creating a personal home page with information about yourself and your interests
References
- some useful references on HTML:
  - Barebone Guide to HTML
    - http://www.cs.adfa.edu.au/other/barebone.html
  - Beginners's Guide to HTML
    - http://www.cs.adfa.edu.au/other/HTMLPrimer.html
  - Writing HTML Tutorial
    - http://www.cs.adfa.edu.au/other/writingHTML/start.html
  - above are local copies kept on CS server
  - the definitive reference
    - http://www.w3.org/hypertext/WWW/MarkUp/MarkUp.html
    - found on the official W3 consortium server www.w3.org
Review
- what is HTML
- basic structure of HTML documents
- look at details of HTML tags
Lawrie.Brown@adfa.edu.au / 31-Oct-95