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
Starting a WWW page

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

4
Parts of a HTML document

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

5
(No Transcript)
6
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

7
The Heading

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

8
The Body

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

9
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

10
The Body Paragraphs

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

11
The Body Lists

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

12
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

13
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

14
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

15
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

16
The Body Links

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

17
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

18
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

19
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

20
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

21
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

22
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

23
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

24
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

25
The End