Basic HTML

1
Basic HTML

• Trystan Upstill
• Comp3400 Lecture 06/03/2001

2
Introduction

• HyperText Markup Language
• Driven by Netscape and Microsoft IE
• Formalised/Compiled by W3C
• Looking at HTML 3.2
• 4.0 defined, not yet completely supported by
  Netscape
• HTML Creation
• WYSIWYG vs TC
• Today TC

3
HTML Considerations

• Uniformity
• How will your page look on different systems
• Concerns specifying font sizes, using
  non-standard HTML Tags
• Can common browsers view your page
• Try on several systems MSIE and Netscape
  Navigator (and Lynx if you are keen)
• Can search engines extract information from your
  page
• Do you want them to?
• This Lecture
• Markup language is standard in IE3.0 and
  Netscape 3.0.
• Generally HTML 3.2 compliant.

4
HTML Constructs

• HTML document construction
• HTML documents contain HTML elements
• HTML elements are marked up by HTML tags
• Elements normally have opening and closing HTML
  tags
• HTML tags are text bounded by
• Opening HTML tags are , closing are
• Eg The Page Title
• HTML Tags not case-sensitive
• Lower-case tags recommended
• HTML Tags may contain attributes

5
HTML Tag Standards

• HTML Tag Attribute values surrounded by
  characters
• Eg
• HTML colours described in hex RGB components
• RRGGBB
• Widths, Heights given in of screen or pixels
• eg width25 OR width400

6
Starting an HTML document HTML headers

• ANU CSIT Building Fan Site
• Building and DCS Fan Site"
• Fan Site,Indoor Fun"
• content"text/html charsetiso-8859-1"

7
Basic HTML Tags

• The HTML body tag
• page content
• Headings
• Biggest
• Smallest
• Paragraphs
• paragraph
• Line Breaks
• 
  
• Comments

The
ANU CSIT Building Fan Page

By Trystan Upstill This page has been
created to teach
8
HTML Text Formatting
The Department of Computer Science
Australian National University ANU. The CSIT building houses the
Department Winner, Master
Builders Association of the Australian Capital
. The building is

• Text Formatting Tags
• Font-type
• Size
• Position
• Text Block Tags
• Address
• Quote
• Citation
• More in CSS, HTML becoming deprecated

9
HTML Character Entities

• Special Characters

10
HTML Links

• Anchor Tag
• link
• Attributes attr
• href page link
• Relative
• Absolute
• Same Page to Anchor
• target target window target_blank
• name anchor name

The building is divided into hrefwings"wings and
hreflevs"levels.
name"wings" The North and South Wing
The South Wing is used by
"http//www.csiro.au" target"_blank" CSIRO
Mathematical and Information Sciences
. The levels of the
North Wing
11
HTML Links (cont)

• URL Form
• scheme//host.domainport/path/filename
• scheme type of service
• host defines host name (www by default)
• domain internet domain name (eg anu.edu.au)
• port port the Web server is running on.
• path path to the documents on the server.
• filename path to the files

12
HTML Link Examples

• local copy of the ANU CSIT fan page
• file/home/trystan/comp3400/example-webpage.html
• Web copy of the ANU CSIT fan page
• http//cs.anu.edu.au/Trystan.Upstill/coursework/c
  omp3400.html
• ANU CSIT fan page level section
• http//cs.anu.edu.au/Trystan.Upstill/coursework/c
  omp3400.htmllevs
• File transfer protocols
• ftp//example.anu.edu.au/blah/example.html
• Email Link
• mailtotrystan_at_cs.anu.edu.au

13
HTML Lists

• The North Wing is used
  
• The South Wing is used
  

The levels
of

1. Undergraduate
   
2. Department of
3. Department of
   

• Unordered Lists
• • item
• Ordered Lists
• 1. item
• Definition Lists
• termdefinition

14
HTML Images

• Images
• Attributes
• src image location
• width, height, align
• alt alternate text
• usemap link maps
• Also image maps and image areas

width"284" height"219 altCSIT
Front
this picture was
taken from http//cs.anu.edu.auSom
e Interesting
15
HTML Tables
statistics border"1" cellspacing"0" cellpadding"1"
bgcolor"CCCCCC" color"FFFFFF" Statistic
color"FFFFFF" Value
Size 6400
square metres

• Tables
• Have Headings, Rows, Elements and Captions
• ,
• Table Attributes
• border, bgcolor, height, width, cellpadding,
  cellspacing
• Row
• width, bgcolor, align, valign

16
(More) Advanced HTMLFrames

• Used to display more that one HTML document in
  the same browser window.
• Setting up frames
• Create an extra HTML file
• (noframes optional)
• Attributes rows OR cols
• example srcframe1.htm
  frameset Frames
  Reqd!

17
(More) Advanced HTML Forms

• Forms can provide input for dynamic content
• CGI, MOD, ASP (coming soon)
• Form tags
• Input tags
• type, name and value fields
• type type of input (checkbox, radio, text)
• name name of the input field
• value default value
• Also , ,
• Submit

18
(More) Advanced HTML Tables for Layout

• Potential Uses
• Advanced Text Layout
• Vertical spacing
• However, height attribute not official HTML 3.2
• Multiple columns of Text
• Using 2 cols
• Sophisticated Table Borders
• Using table-within-a-table
• Making your page the same at all resolutions and
  on all browsers
• Experiment with no border tables and alignment,
  cell-padding and cell-spacing

19
(More) Advanced HTML Inserting Scripts

• document.write("Hel
  lo World!")

20
HTML Creation Links

• WYSIWYG Editors
• Macromedia Dreamweaver 4.0
• 30 Day Trial
• http//www.macromedia.com
• Netscape Composer
• Free
• http//www.netscape.com and on iwaki
• Microsoft Frontpage
• Part of Microsoft Office
• Frontpage lite available free
• Further Tutorials / More Info
• http//www.w3schools.com
• http//www.stars.com