Basic HTML Workshop

1
Basic HTML Workshop

• LIS Web Team
• Fall 2006

2
What is HTML?

• Stands for Hyper Text Markup Language
• Computer language used to create web pages
• HTML file text file containing markup tags such
  ltpgt
• Tags tell Web browser how to display a page
• Can have either .htm or .html file extension

3
HTML Elements

• Tags surrounded by angle brackets lt gt
• Usually come in pairs
• Start tag eg. ltpgt and end tag lt/pgt
• Stuff between is called element content
• Tags are not case sensitive
• New standard is to use lower case

4
XHTML

• Lower case for tags new standard
• Preparing for next generation of HTML called
  XHTML

5
Your created HTML document

• lthtmlgt
• ltheadgt
• lttitlegt document title lt/titlegt
• lt/headgt
• ltbodygt
• your page content
• lt/bodygt
• lt/htmlgt

6
Page Components

• lt!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
  Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"gt
• First line of code
• Declaration of version of HTML
• lthtmlgtlt/htmlgt
• Container for the document
• ltheadgtlt/headgt
• lttitlegt Title of page lt/titlegt
• ltbodygtlt/bodygt
• Content of page

lthtmlgt ltheadgt lttitlegt document title
lt/titlegt lt/headgt ltbodygt your page
content lt/bodygt lt/htmlgt
7
Basic Tags

• Headings
• lth1gtlt/h1gt to lth6gtlt/h6gt
• Paragraph
• ltpgt lt/pgt
• Inserts a line space before and after a paragraph

8
Image Source Tag

• ltimg src"url alt description of image /gt
• Empty tag no closing tag
• Document-relative link
• url points to location of the image
• pic.gif
• /images/pic.gif
• alt describes image for screen readers

9
Division Tag

• ltdivgtlt/divgt
• Division or section of document
• Use to group elements to apply formatting or
  style
• Example all text within div tag will be green
• ltdiv style"color 669966"gt
• lth1gt Title of sectionlt/h1gt
• ltpgt bla bla bla bla lt/pgt
• lt/divgt

10
Link Tag

• Link
• Anchor tag ltagt
• 2 kinds
• Link to another web page. Use href attribute
• lta href"url"gtText to be displayedlt/agt
• Create a bookmark inside a page by using name
  attribute
• lta nametopgtTop of pagelt/agt
• Link to mail message
• lta hrefmailtoyour email addressgtwrite out
  your email address again or some descriptive
  textlt/agt

11
Exercise

• Create 3 divs
• Add in some links
• Add a paragraph
• Add an email link
• Add an external page link
• Add in an image

12

• lthtmlgt
• ltheadgt
• lttitlegtCaitlins Pagelttitlegt
• lt/headgt
• ltbodygt
• ltdivgt
• lta href"index.htmlgtHomelt/agtltbr /gt
• lta href"courses.html"gtCourseslt/agtltbr /gt
• lta href"personal.html"gtPersonallt/agtltbr /gt
• lt/divgt
• ltdivgt
• ltpgtHello my name is Caitlin Nelson and I am
  writing about myself. Contact info
• lta href"mailtocnelson_at_hawaii.edu"gtcnelson_at_hawai
  i.edult/agt
• lt/pgt
• lta href"http//www.hawaii.edu/slis/webteam"gtWeb
  Teamlt/agt
• ltdivgt
• ltimg src"palmtree.jpg"alta picture of a
  palm tree/gt
• lt/divgt

13
Next Mission

• Choose colors for your page
• Text color
• Link color
• Background color
• Choose font size
• Type of font
• Font size

14
End Product

• lthtmlgt
• ltheadgt
• lttitlegtCaitlins Pagelttitlegt
• lt/headgt
• ltbodygt
• ltdivgt
• lta href"index.htmlgtHomelt/agtltbr /gt
• lta href"courses.html"gtCourseslt/agtltbr /gt
• lta href"personal.html"gtPersonallt/agtltbr /gt
• lt/divgt
• ltdivgt
• ltpgtHello my name is Caitlin Nelson and I am
  writing about myself. Contact info
• lta href"mailtocnelson_at_hawaii.edu"gtcnelson_at_hawai
  i.edult/agt
• lt/pgt
• lta href"http//www.hawaii.edu/slis/webteam"gtWeb
  Teamlt/agt
• ltdivgt
• ltimg src"palmtree.jpg"alta picture of a
  palm tree/gt
• lt/divgt