HTML: Happy toothless misunderstood lamas

1
HTML Happy toothless misunderstood lamas

• Jons Head, W3 Schools, Blooberry

2
Test questions revisited

• In most Windows application, this is what Save
  As can do that Save cannot
• Save a file to your hard drive
• Wrong. Save and Save As can both do this
• Save a file to a CD or Disk
• Wrong. Save and Save As can both do this
• Save a file with a new name
• Right
• Save a file in a new place while deleting the old
  file
• Wrong. Save As does not delete the old file

3
Test questions revisited

• What id the difference between RAM ROM
• You can only read from RAM
• Wrong. This statement is simply not true. This
  implies that you can not read from ROM which is
  not the case.
• You can only read from ROM
• Wrong. This statement is simply not true. This
  implies that you can not read from RAM which is
  not the case.
• You can only write to RAM
• You can only write to ROM
• Wong. You can not write to ROM

4
HTML

• What is HTML
• What is it used for
• What does it mean for text to be marked up?

5
How it is used

• Sent to web browsers via HTTP
• Interpreted by your browser do display rich text
• Normally has a htm or html extension
• View source

6
How do I make it

• WYSIWYG editors
• Advantages
• Disadvantages
• Text editors
• Advantages
• Disadvantages
• Static vs Dynamic

7
Everything you didnt want to know about tags

• How the markup is performed
• Surrounded by an opening lt and a closing gt
• Pointy (angle) Brackets to sound Computer
  Science-y
• Start tags and end tags
• Not case sensitive
• Can have attributes
• No difference between and

8
HTML is a tree

• Take advantage of this when writing html

HTML
HEAD
BODY
TITLE
H1
P
TABLE
9
Layout of HTML

• Top most level is the html tag
• The html tag should only have two children
• head
• This is information about the page and that will
  no be displayed on the page
• body
• Content of the page. This is what is shown by
  the web browser

10
What goes in the Head

• Title
• Note that the same as a heading
• Where does this show up
• Scripts
• Style Definitions
• Note HTML is not for styling content

11
Comments

• What is a comment
• Why are comments used
• Comment Syntax
• lt!-- This is a comment --gt

12
What goes in the body

• Everything else

13
How can I tell if my HTML is correct

• Validate
• Ensures proper HTML
• Also helps to ensure browser independence
• Whats browser independence
• Is browser interoperability a big deal?
• Doc type
• Encoding

14
P tag

• P is short for paragraph
• A logical division of text

15
H Tag

• Heading tags
• Not the same as a title
• H1 H6
• H1 is a huge heading
• H6 is a small heading
• Very useful when CSS is used

16
What about white space

• ltbrgt or ltbr/gt is a new line
• nbsp is a space

17
HR tag

• Short for horizontal rule
• Give a line across the screen

18
A tag

• Short for anchor, Also know as a link or
  hyperlink
• href attribute tells the destination
• target attribute tells the frame which to open in
• lta hrefhttp//www.google.comgtClick here to go
  to googlelt/agt
• Can be an image inside instead of text

19
Table and its children

• Table is short for .
• Made up of rows which are tr (table row) tags
• Made up of cells which are td (table data) or th
  (table header)
• lttablegt
• lttrgt
• ltthgt
• lttdgt

20
Attributes of TD and TH

• Rowspan
• Colspan

21
Lists

• UL
• Unordered List
• A bulleted list
• OL
• Ordered List
• A numbered list
• li
• List item

22
Img tag

• Short for ..
• Has two mandatory attributes
• SRC
• Where the picture is at
• ALT
• A text description about this picture
• Why is this important
• ltimg srchttp//www.google.com/images/logo_sm.gif
  altGoogles Logo /gt

23
What if I want to use a lt or a gt

• Special charters have to be escaped
• gt
• lt
• amp

24
What about pretty colors and interactions

• Styling is done by CSS
• Can it be done by HTML?
• Colors, Background and Text
• Left, Right, Center
• Interactions are handled by Java Script
• Can it be dont by HTML?