Basic HTML Workshop - PowerPoint PPT Presentation

About This Presentation
Title:

Basic HTML Workshop

Description:

Anchor tag a 2 kinds. Link to another web page. Use href attribute ... a href='mailto:your email address' write out your email address again or some ... – PowerPoint PPT presentation

Number of Views:95
Avg rating:3.0/5.0
Slides: 15
Provided by: dianeku
Learn more at: http://www.hawaii.edu
Category:
Tags: html | basic | code | href | html | mailto | workshop

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com