HTML Authoring

1
HTML Authoring

• Joiana Nascarella
• joiana_at_unimelb.edu.au

2
Design

• A good website starts its life in the design
  stage
• Layout, Color, Sound, Content, Functionality and
  Maintainability aspects are formed in the design
  stage.
• Designing a website involves
• Look and Feel of the site, languages server
  resources, programming data structures
  involved, the time and programming abilities
  needed, end user ease, site maintenance.

3
Good Design vs Bad Design

• What makes a good design?
• Plan the web site structure
• Plan the navigation setup
• Plan the page layout, considering how and where
  to use color and sound
• Plan your content
• The 5 ws Who, What, When, Where, Why

4
Good Design vs Bad Design

• Examples of good web design
• http//www.geom.unimelb.edu.au/
• http//www.theage.com.au/
• http//www.virgintravelstore.com
• http//www.ge.ucl.ac.uk

5
Good Design vs Bad Design

• What makes a bad design?
• Poor Planning!
• The 10 Sins of web design
• http//www.peckwebs.com/sins.htm
• Examples of bad web design
• http//www.ratz.com/featuresbad.html

6
Building a Website

• Set up the web site folder structure first
• Example
• public_html/index.html -my home page
• public_html/assignments/ -my assignments
• public_html/images/ -my pictures
• public_html/include/ -my style sheet
• public_html/multimedia/ -my multimedia
• public_html/templates/ -my templates

7
Building a Website

• Create a template file
• Use include files for common content
• Frames?
• OK for managing simple websites though beware
  frames can be annoying to work with when you have
  a large website

8
Building a Website

• Other tips Be consistent
• E.g. 1. Use a style sheet rather than remember
  what font style you want to use
• E.g. 2. If your website uses frames, use the same
  frame structure throughout
• E.g. 3. Make comments to yourself in HTML code if
  it helps
• lt!- - my comments go here - -gt
• Remember Planning and Consistency are the key to
  a well designed website!

9
Web Development Tools

• What kind of tools can be used?
• Text editors
• E.g.. Notepad, WordPad, crimson editor
• Specific Software
• Microsoft Word
• Netscape Composer
• Microsoft FrontPage
• Macromedia Dreamweaver

10
HTML Tags

• ltHTMLgt
• The first tag in every HTML file
• Indicates that the content of the file is in HTML
• All text and HTML commands should fall within
  the beginning and ending ltHTMLgt tags

lthtmlgt ltheadgt lttitlegtA Web Pagelt/titlegt lt/headgt ltb
odygt A simple web page lt/bodygt lt/htmlgt
11
HTML Tags

• ltHEADgt
• Reserved section for only a few tags (e.g..
  ltTITLEgt)

• ltTITLEgt
• Each HTML page needs atitle to indicate what
  the pagedescribes
• Used by browsers bookmarksand by other
  programs thatcatalog Web pages

lthtmlgt ltheadgt lttitlegtA Web Pagelt/titlegt lt/headgt ltb
odygt A simple web page lt/bodygt lt/htmlgt
12
HTML Tags

• ltBODYgt
• The remainder of the page, including all text,
  graphics etc. is enclosed within the ltBODYgt tag

lthtmlgt ltheadgt lttitlegtA Web Pagelt/titlegt lt/headgt ltb
odygt A simple web page lt/bodygt lt/htmlgt
13
HTML Tags

• Page Formatting
• Background color
• ltBODY BGCOLORFFFFFFgt
• ltBODY BGCOLORREDgt
• Background Image
• ltBODY BACKGROUNDtiles.gif gt

14
HTML Tags

• Font Formatting
• ltH1gt lt/H1gt
• ltH2gt lt/H2gt
• ltH3gt lt/H3gt
• ltPgt lt/Pgt
• ltBgt lt/Bgt
• ltIgt lt/Igt

• Alignment
• ALIGNCENTER
• ALIGNLEFT
• ALIGNRIGHT

ltbodygt ltH1 ALIGNCENTERgt A simple web page
lt/H1gt lt/bodygt lt/htmlgt
15
HTML Tags

• Hyperlinks
• ltAgt
• Link or anchor tag

ltbodygt ltH1 ALIGNCENTERgt A simple web page
lt/H1gt ltA HREFpage2.htmgtPage 2lt/Agt lt/bodygt lt/htm
lgt
16
HTML Tags

• Hyperlinks
• Relative Pathname
• HREFfile.htm HREFassign2.ppt
• HREFfiles/file.htm
• HREF../file.htm
• Absolute Pathname
• HREF/user1/joiana/file.htm
• HREFhttp//www.geom.unimelb.edu.au

17
HTML Tags

• Hyperlinks
• Mail to

ltbodygt ltH1 ALIGNCENTERgt A simple web page
lt/H1gt ltA HREFmailtojoiana_at_unimelb.edu.augtEmail
me lt/Agt lt/bodygt lt/htmlgt
18
HTML Tags

• Tables
• ltTABLEgt
• Holds the table contents and an optional caption

lttable border0gt ltTRgt ltTHgtLecturerlt/THgt
ltTHgtSubjectlt/THgt lt/TRgt ltTRgt ltTDgtCliff
Oglebylt/TDgt ltTDgt451-113lt/TDgt lt/TRgt lt/tablegt
19
HTML Tags

• Frames
• Frameset document

lthtmlgt ltframeset cols100,50,gt ltframe
srcleftcol.html nameleftgt ltframe
srcmidcol.html namemiddlegt ltframe
srcrightcol.html namerightgt ltnoframesgt This
site requires frames. lt/noframesgt lt/framesetgt lt/ht
mlgt
20
HTML Tags

• Images
• Inline format GIF, JPG
• External format TIFF, BMP, PNG
• ltIMGgt
• ltIMG SRCimage1.gifgt
• ALIGNTOP
• ALIGNMIDDLE
• ALIGNBOTTOM
• E.g.. An image as a link
• ltA HREFpage2.htmgtltIMG SRCarrow.gif
  BORDER0gtlt/Agt

21
Web Graphics

• Animated GIFs

22
HTML Tags

• Inserting Multimedia
• Flash files
• Shockwave files
• Plugins
• E.g.. A flash animation object
• ltOBJECT width"550" height"400"gt ltparam
  name"movie" valueflashfilename.swf"gt ltEMBED
  srcflashfilename.swf" width"550" height"400"gt
  lt/EMBEDgt lt/OBJECTgt

23
Useful Links

• http//www.goodpractices.com
• http//www.w3.org/MarkUp
• http//www.htmlhelp.com/reference
• http//www.coolhomepages.com
• http//www.med.yale.edu/caim/manual/contents.html
• http//hotwired.lycos.com/webmonkey/design
• http//www.wpdfd.com/resources/Layout.htm
• http//webhelp.org
• http//www.htmlgoodies.com

24
Advanced HTML

• Cascading Style Sheets
• E.g.. styles.css sets the style for the body tag

lthtmlgt ltheadgt lttitlegtA Web Pagelt/titlegt ltlink
hrefstyles.css" rel"style sheet"
type"text/css"gt lt/headgt ltbodygt A simple web page
lt/bodygt lt/htmlgt
Web page - index.html
body font-family Geneva, Arial, Helvetica,
sans-serif font-size 12px color 000000
Style Sheet styles.css
25
Advanced HTML

• Image Maps
• ltimg src"images/toplinks_vsv.gif" width"800"
  height"22" border"0" usemap"Map"gt
• ltmap name"Map"gt ltarea shape"rect"
  coords"7,1,58,22" hrefindex.htmlgt ltarea
  shape"rect" coords"83,1,138,20"
  hrefassignments.html"gt ltarea shape"rect"
  coords"163,2,214,20" hrefresume.html"gt
• lt/mapgt

26
Advanced HTML

• Layers
• ltdiv id"Layer1" style"positionabsolute
  width200px height115px z-index1"gtlt/divgt

27
Javascript

• A programming language for adding functionality
  and features to web pages.
• Javascript is embedded into HTML
• E.g.. Rollover buttons

28
Java

• Object oriented programming language
• Designed with the intent
• Write a program once and run it on many different
  platforms
• Java programs are compiled into bytecode
• Applets

29
Flash

• Allows vector animation
• Is extremely compact
• Has streaming capabilities
• Used to create entire websites
• Used as an advertising tool
• animations games

30
Flash

• Examples
• http//www.airforce.com/index_fr.htm
• http//www.lookandfeel.com/
• http//www.flasharcade.com/
• http//www.flasharcade.com/game.cgi?bubbletrouble

31
Flash

• Principles of flash animation
• Animation sequence based on a timeline
• Vector objects created in Flash
• Library of objects of which there can be many
  instances.