Week 8: Intro to HTML: Building a Web Home Page

  1. Web Sites and HTML*
    1. *Hypertext Markup Language
  2. What is HTML?
    1. A language that allows you to create documents for the World Wide Web
    2. You embed formatting instructions
    3. Browsers interpret the instructions to display your formatting
  3. What can you do with HTML?
    1. Control how your text is presented
      1. Headings
      2. Paragraphs
      3. Numbered and bulleted lists
      4. Tables
    2. Include Images
      1. Graphics
      2. Photos
    3. Link to other pages or web sites
  4. How does HTML Work?
    1. Everything is done with "Tags"
    2. "Container" tags work in pairs
    3. A container tag "opens" an instruction: <title>
    4. Another "closes" it: </title>
    5. The instruction is applied to the text between the opening and closing tags:
      1. <title>Katz School of Business</title>
      2. Katz School of Business appears in the title bar of the browser
  5. How does HTML Work?
    1. "Separator" tags work alone:
    2. Examples:
      1. <p> paragraph break
      2. <br> line break
      3. <hr> horizontal line
      4. <li> adds a bullet or a number
  6. Building a Web Page - 1
    1. Start with the <html></html> tags:
  7. Building a Web Page - 2
    1. Insert the head and body tags:
      1. <html>
      2. <head>
      3. </head>
      4. <body>
      5. </body>
      6. </html>

     

  8. Building a Web Page - 3
    1. Add the title tags and a title:
      1. <html>
      2. <head>
      3. <title>This is the Title of the Web Page</title>
      4. </head>
      5. <body>
      6. </body>
      7. </html>

     

  9. Building a Web Page - 4
    1. Add some content between the body tags:
      1. <html>
      2. <head>
      3. <title>This is the Title of the Web Page</title>
      4. </head>
      5. <body>
      6. This web site is under construction...
      7. </body>
      8. </html>
      9. http://www.pitt.edu/~richfran/sample0.htm
  10. Another Sample Web Page
      1. <html> <!-- these are "comments" -->
      2. <head> <!-- they won't appear in the browser -->
      3. <title>Another Sample Web Page</title> <!-- the title appears in the Browser title bar -->
      4. </head>
      5. <center> <!-- everything will be centered until closing tag -->
      6. <body bgcolor="#FFFFFF"> <!-- background color set to white -->
      7. <h1>Another Sample Web Page</h1> <!-- h1 is the biggest heading -->
      8. <h2>to illustrate some simple HTML formatting</h2><!-- h2 is the next biggest heading -->
      9. </center> <!-- centering ends here -->
      10. <hr> <!-- horizontal line -->
      11. Just entering text causes it to be displayed in a simple manner. Regardless of where
      12. you hit the enter key when typing, the browser will wrap the text according to how much
      13. space there is.
      14. <p> <!-- tag to force a new paragraph -->
      15. You must use the paragraph tag to force a new paragraph.
      16. <p>
      17. There is a special tag that is used to create hyperlinks to other pages. This tag is
      18. used here to refer to the <A HREF="http://www.pitt.edu">University of Pittsburgh</A>
      19. home page.
      20. </html>
      21. http://www.pitt.edu/~richfran/sample1.htm
  11. HTML Formatting: Headings
    1. Organize document presentation
    2. Use container tags: <h1>Your Text</h1>
    3. Six levels <h1> through <h6>
      1. <h1> produces largest font size
      2. down to <h6>
    4. Closing a heading automatically produces a paragraph break
  12. HTML Formatting: Headings
    1. Sample HTML for headings:
      1. <html>
      2. <head>
      3. <title>Samples for Headings</title>
      4. </head>
      5. <body>
      6. <h1>Heading 1</h1><h2>Heading 2</h2>
      7. <h3>Heading 3</h3><h4>Heading 4</h4>
      8. <h5>Heading 5</h5><h6>Heading 6</h6>
      9. </body>
      10. </html>
      11. http://www.pitt.edu/~richfran/sample2.htm
  13. HTML Formatting: Lists
    1. Ordered Lists use container tags: <ol> </ol>
      1. produce numbers for list items
    2. Unordered Lists use container tags: <ul> </ul>
      1. produce lists with bullets
    3. List items go INSIDE the containers:
      1. <li>first item
      2. <li>second item
    4. Line breaks are automatic
  14. HTML Formatting: Lists
    1. Sample HTML for lists:
      1. <html>
      2. <head>
      3. <title>Samples of Lists</title>
      4. </head>
      5. <body>
      6. Ordered List<ol>
      7. <li>first item<li>second item><li>third item</ol>
      8. Unordered List <ul>
      9. <li>first item<li>second item><li>third item</ul>
      10. </body>
      11. </html>
      12. http://www.pitt.edu/~richfran/sample3.htm
  15. HTML Feature: Hyperlinks
    1. HTML lets you refer to
      1. Other web pages
      2. Other Web Sites
    2. Uses the <A></A> container tags
      1. Uses the URL (Uniform Resource Locator) as part of the HREF argument to the opening tag
      2. Places display text between the tags
      3. <A HREF="http://www.pitt.edu">Pitt Home</A>
  16. HTML Feature: Hyperlinks
    1. Sample HTML with Hyperlinks (in a List!)
      1. <html><head>
      2. <title>Sample of a Graphic Image</title>
      3. </head>
      4. <body bgcolor="#ffffff"> <!-- background color set to white-->
      5. <center> <!-- center on page -->
      6. <IMG SRC="undercon.gif" ALT="webmaster in training">
      7. <p> <!-- paragraph break -->
      8. <H2>Webmaster in Training</H2>
      9. </center>
      10. </body>
      11. </html>
      12. http://www.pitt.edu/~richfran/sample4.htm
  17. HTML Feature: Graphics
    1. You can include pictures or graphics in a page
    2. Use the <IMG> tag (a separator tag)
    3. This tag takes arguments
      1. SRC: (required) name of image file
      2. ALT: (optional) text to describe image
      3. ALIGN: (optional) to align with surrounding text
      4. other optional arguments
    4. <IMG SRC="image.fil" ALT="a cool picture">
  18. HTML Feature: Graphics
    1. Sample HTML to include an image:
      1. <html><head>
      2. <title>Sample of a Graphic Image</title>
      3. </head>
      4. <body bgcolor="#ffffff"> <!-- background color set to white-->
      5. <center> <!-- center on page -->
      6. <IMG SRC="undercon.gif" ALT="webmaster in training">
      7. <p> <!-- paragraph break -->
      8. <H2>Webmaster in Training</H2>
      9. </center>
      10. </body>
      11. </html>
      12. http://www.pitt.edu/~richfran/sample5.htm
  19. HTML Formatting Summary
    1. Tags control formatting:
      1. container tags like <title></title>
      2. separator tags like <br>
    2. Headings
    3. Lists
    4. Hyperlinks
    5. Graphics
    6. Miscellaneous (paragraph & line breaks)
  20. Next Class
    1. Creating your own personal home page
    2. Deploying your personal home page
      1. Using your Pitt UNIX account
      2. Make your personal web page accessible to the entire world-wide-web