BEGINNING HTML

1
BEGINNING HTML

• DESIGNING YOUR OWN
• WWW
• PAGES

2
What is HTML?

• Hypertext Markup Language
• Used to create documents for the WWW
• Structure is important

3
General Command Format

• Not case sensitive
• Tabs and Returns are not recognized
• Commands start with a lt and end with a gt
• There is a beginning and an ending to most
  command structures
• The / symbol is used to terminate a command
  structure

4
Starting a WWW page

• Start a WWW page by declaring itself
  lthtmlgt
• End a WWW page by terminating itself lt/htmlgt

5
Parts of a HTML document

• lthtmlgt
• Heading
• Title
• Body
• lt/htmlgt

6
The Heading

• ltheadgt
• lttitlegt
• Title of your WWW page
• lt/titlegt
• lt/headgt

7
The Body

• Starts with ltbodygt
• Heading Levels
• Paragraphs
• Lists
• Links
• Ends with lt/bodygt

8
The Body Heading Levels

• Six heading levels h1 to h6
• General format
• lthxgt and lt/hxgt where x is the heading level 1..6
• Level 1 is the largest font size and 6 the
  smallest
• Example lth1gtMy First Page lt/h1gt

9
The Body Paragraphs

• Used to separate paragraphs
• General format
• ltpgt
• This is your paragraph
• lt/pgt

10
The Body Lists

• Three kinds of lists
• Ordered Numbered
• Unordered Bullets
• Definition Explanatory List

11
Lists Ordered

• Numbered
• General Format
• Begins with ltolgt and ends with lt/olgt
• Individual items in the list are designated with
  a ltligt in front of them. (NOTE there is no
  lt/ligt)
• Example ltolgt ltligt Chapter 1 ltligt
  Chapter 2 lt/olgt

12
Lists Unordered

• Bullets
• General Format
• Begins with ltulgt and ends with lt/ulgt
• Individual items in the list are designated with
  a ltligt in front of them. (NOTE there is no
  lt/ligt)
• Example ltulgt ltligt Chapter 1 ltligt
  Chapter 2 lt/ulgt

13
Examples

• Ordered
• My first WWW page
• This is your paragraph
• 1. Chapter 1
• 2. Chapter 2

• Unordered
• My first WWW page
• This is your paragraph
• Chapter 1
• Chapter 2

14
Lists Definition

• Bullets
• General Format
• Begins with ltdlgt and ends with lt/dlgt
• Individual items in the list have two parts
• Term ltdtgt (NOTE there is no lt/dtgt)
• Definition ltddgt (NOTE there is no lt/ddgt)
• Example ltdlgt ltdtgt Chapter 1 ltddgt
  Keys to Success lt/dlgt

15
The Body Links

• Four types
• Page
• Images - still
• Images - motion
• Sound

16
Links Page

• URL - Uniform Resource Locator
• Internet protocol used to reach document or
  resource
• Address of a document or resource
• protocol//machine.name.directory/document
• http//www.bps.k12.nd.us

17
Links Page

• General Format
• lt a href URL gt text of link lt/agt
• The text of link is the part that the users will
  click or select to activate the link
• Example
• lt a href http//www.bps.k12.nd.usgtDakota
  RoughRider lt/agt

18
Links Images - Still

• Image must be in GIF or JPEG format
• Image must be in same folder as your html file
• General Format
• lt img src image name.gifgt optional caption
• Example
• lt img src parrot.gifgt This is a parrot

19
Links Images - Still

• Options
• Image alignment - top, middle or bottom
• Aligns base of the image with the base line of
  the surrounding text
• General Format
• ltimg align alignment src image name.gifgt
  optional caption
• Example
• lt img align middle src parrot . gifgt parrot

20
Links Images - Motion

• Image should be in MPEG format
• Image must be in same folder as you html file
• General Format
• lt a hrefimage name.mpeggt text of link lt /a gt
• Example
• lt a href birds.mpeg gt Parrots in flight lt /a gt

21
Links Sound

• Sound should be in AU format
• Image must be in same folder as you html file
• General Format
• lt a hrefsound name.augt text of link lt /a gt
• Example
• lt a href brdsnd.au gt Sounds of parrots lt /a gt

22
Extras

• Bold lt b gt text lt /b gt
• Italic lt i gt text lt /i gt
• Center lt center gt text or image lt /center gt

23
General Overview

• lt html gt
• lt head gt
• lt title gt Ostrich lt /title gt
• lt /head gt
• lt body gt
• text for your page
• lt /body gt
• lt /html gt

24
Java Applets

• A Java applet is a small Java application that is
  embedded in an HTML document and runs in a
  browser window.
• When a browser interprets a document that
  contains a Java applet, the program files are
  downloaded onto the users machine and then the
  browsers Java interpreter runs the applet.

25
Making an Applet

• Must change your program to extend to the class
  GBApplet rather than GBFrame.
• public class programName extends GBApplet
• Must also import
• java.applet.
• java.awt.
• Must add a reference to the class file in a HTML
  document to access Java file.
• ltApplet codeprogramName.class" width200",
  height"200"gtlt/appletgt
• Must be included in the body of the HTML
  document.