basic html workshop l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Basic HTML Workshop PowerPoint Presentation
Download Presentation
Basic HTML Workshop

Loading in 2 Seconds...

play fullscreen
1 / 21

Basic HTML Workshop - PowerPoint PPT Presentation


  • 108 Views
  • Uploaded on

Basic HTML Workshop. LIS Web Team Spring 2007. What is HTML?. Stands for H yper T ext M arkup L anguage Computer language used to create web pages HTML file = text file containing markup tags such <p> Tags tell Web browser how to display a page

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Basic HTML Workshop' - zoie


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
basic html workshop

Basic HTML Workshop

LIS Web Team

Spring 2007

what is html
What is HTML?
  • Stands for Hyper Text Markup Language
  • Computer language used to create web pages
  • HTML file = text file containing markup tags such <p>
  • Tags tell Web browser how to display a page
  • Can have either *.htm or *.html file extension
html elements
HTML Elements
  • Tags are the elements that create the components of a page
  • Tags surrounded by angle brackets < >
  • Usually come in pairs
    • Example: Start tag <p> and end tag </p>
  • Stuff between is called “element content”
  • Tags are not case sensitive
    • New standard is to use lower case
xhtml
XHTML
  • Lower case for tags = new standard
  • Preparing for next generation of HTML called XHTML
your created html document
Your created HTML document

<html>

<head>

<title> …document title… </title>

</head>

<body>

…your page content…

</body>

</html>

page components
Page Components
  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    • First line of code
    • Declaration of version of HTML
  • <html>…</html>
    • Container for the document
  • <head>…</head>
    • <title> Title of page </title>
  • <body>…</body>
    • Content of page

<html>

<head>

<title> …document title… </title>

</head>

<body>

…your page content…

</body>

</html>

basic tags
Basic Tags
  • Headings
    • <h1>…</h1> to <h6>…</h6>
    • Like in Word
    • See example
  • Paragraph
    • <p>… </p>
    • Inserts a line space before and after a paragraph
    • See example

http://library.manoa.hawaii.edu/about/exhibits/index.html

link tag
Link Tag
  • Link
    • Anchor tag <a>…</a>
    • 3 kinds
      • Link to page in same folder
      • Link to page in different folder
      • Link to outside webpage on the Internet.
example of anchor tag
Example of Anchor Tag

<a href="http://www.hawaii.edu/slis">Go to the LIS home page</a>

addresstext in page

  • 2 components
    • Address
    • Text or description – this is what you see on the page
image source tag
Image Source Tag
  • Empty tag – no closing tag
  • Components of Img tag

<img src="url“ alt = “description of image” />

    • url = points to location of the image file
    • alt = describes image for screen readers
specify file location
Specify file location
  • Same folder: “pic.gif”
    • Document-relative link
    • Look for image in same folder
  • Different folder named images:“/images/pic.gif”
division tag
Division Tag
  • <div>…</div>
    • Division or section of document
    • Use to group elements to apply formatting or style
    • Example: all text within div tag will be fuschia

<div style="color: #FF00FF">

<h1> Title of section</h1>

<p> bla bla bla bla </p>

</div>

exercise
Exercise
  • Add a paragraph
  • Add some links
  • Add an image
  • Create 3 divisions
your session1 html document
Your session1 HTML document

<html>

<head>

<title> …document title… </title>

</head>

<body>

…your page content…

</body>

</html>

end product
End Product
  • <html>
  • <head>
  • <title>Caitlin’s Page</title>
  • </head>
  • <body>
  • <div>
  • <a href="index.html>Home</a><br />
  • <a href="courses.html">Courses</a><br />
  • <a href="personal.html">Personal</a><br />
  • </div>
  • <p>Hello my name is Caitlin Nelson and I am writing about myself. Contact info:
  • <a href="http://www.hawaii.edu/slis/webteam">Web Team</a>
  • <div>
  • <img src="palmtree.jpg"alt=”a picture of a palm tree”/>
  • </div>
  • </div>
  • </body>
  • </html>
next mission
Next Mission
  • Choose colors for your page
    • Text color
    • Link color
    • Background color
  • Choose font size
    • Type of font
    • Font size