RaysWebClass.Com

Lesson 3:   HTML Tag Attributes


HTML Tags
  1. The body Tag Attributes
    Remember, everthing that appears on a web page is in the body tab container.
        (See Web-save Colors and also More Colors)



  2. The br (break) Tag
    (This is one of only a few tags that is not a container)
    The br tab is used for a line feed/carrage return.
    One
    Two
    Three
    (will all apear on the same line)

    eg:
    One Two Three

    One<br>   Two<br>   Three<br>
    (will appear on three separate lines)

    eg:
    One
    Two
    Three

    One<br><br>   Two<br><br>   Three<br><br>
    (will be bouble spaced)

    eg:
    One

    Two

    Three


  3. The p (paragraph) Tag
    <p>One</p>   <p>Two</p>   <p>Three</p>

    eg:

    One

    Two

    Three



  4. The &nbsp; (no-break-space) Entity
    This is not an HTML tag, it's an entity (there are many more entities and we will learn about them in the next lesson). This entity is called the no-break-space and it will allow you to create multiple spaces in a line.
    If you type this on your Web page:
    One       Two       Three

    It will look like this:
    One Two Three

    The multiple spacing goes away.
    To create mutiple spacing use the &nbsp;
    One   &nbsp;   &nbsp; Two   &nbsp;   &nbsp; Three

    eg:
    One         Two         Three


  5. The img (image) Tag Attributes
    Images transform an ordinary page into a page that captures the views imagination!

  6. The a (anchor) Tag Attributes
    The Anchor tag is the main reason the World Wide Web is so popular just click on an anchor and you are transported to another page or web site, an email address, or download a file. The following are anchor attributes:

Web Page Design: Exercise 3

Now let's use these tags to put together our home page.

  1. Open the HTMLClass folder.

  2. Right click on test.html, choose copy.


  3. Right anywhere and choose past.


  4. Right click on test - Copy.html and choose rename.


  5. Rename the file to index.html.

    NOTE: index.html is the default or home page name.
    e.g.: when you open a web site that has many pages in it and you do not spesify which page you want opened, the default page (index.html) will open. This is why index.html is referred to as the Home page.

  6. Now, double click index.html. It will open in the browser.


  7. Right click in the browser and choose view source.

  8. Replace all the code with this:
    <!DOCTYPE html>
    <html lang='en'>
    <head>
      <meta charset='utf-8'>
      <title>Global Company - Home</title>
    </head>
    <body bgcolor='gray' align='center'>
    <font size='3' face='verdana'>
    <table border='1' cellspacing='0' width='800'
     align='center' bgcolor='white'>
    <tr>
      <td colspan='2' bgcolor='#2E869D' height='50'>
      
      HEADER  
      
      </td>
    </tr>
    <tr valign='top'>
      <td width='110'>
      
      MENU
      
      </td>
      <td height='1000'>
      
      MAIN PAGE
      
    </tr>
    <tr>
      <td colspan='2' height='17' align='center'>
      
      FOOTER
      
      </td>
    </tr>
    </table>
    </font>
    </body>
    </html> 
  9. Save index.html. Refresh the browser to see the changes.



  10. Add content:
    (If these images are not already in the images folder,
      copy them and paste them into your images folder.)


    NOTE: You may have to remove the [1] from the name of the copied images.
    For example, Globe.gif may copy over to the images folder as Globe[1].gif


    In the header container, replace the word Header with this code:
        <!-- * * * * * * -->
        <!-- * Header  * -->
        <!-- * * * * * * -->
        <h2>&nbsp;Global Company&nbsp;
        <img src='images/Globe.gif' align='middle'></h2>

    In the nav container, replace Menu with:
        <!-- * * * * * * * * * * -->
        <!-- * Navigation Menu * -->
        <!-- * * * * * * * * * * -->
        <br>
        &nbsp;<a href='index.html'>Home</a>
        <br><br>

        &nbsp;<a href='History.html'>History</a>
        <br><br>

        &nbsp;<a href='Products.html'>Products</a>
        <br><br>

        &nbsp;<a href='Contact.html'>Contact Us</a>
        <br><br>

    In the section container, replace Main Body with:
        <!-- * * * * * * * * * * * * * -->
        <!-- * Main Page: BELOW Here * -->
        <!-- * * * * * * * * * * * * * -->

        <img src='images/GlobalCompany.png' align='left'>
        <h1><font color='#2E869D'>
        &nbsp;Global Company
        </font></h1>

        <br><br><br><br><br>

        &nbsp;
        <img src='images/Gadget.gif'>
        <img src='images/Widget.gif'>
        <br clear='all'><br>

        Welcome to Global Company, the company that manufactured no less than two products!
        Read the <a href='History.html'>history</a> of our great company and see our
        <a href='Products.html'>products</a>.

        <!-- * * * * * * * * * * * * * -->
        <!-- * Main Page: ABOVE Here * -->
        <!-- * * * * * * * * * * * * * -->

    In the footer container, replace Footer with:
        <!-- * * * * * * -->
        <!-- * Footer  * -->
        <!-- * * * * * * -->
        <small>
            Copyright &copy;
            <!-- * * * * * * * * * * * * * -->
            <!-- * Displays Current Year * -->
            <!-- * * * * * * * * * * * * * -->
            <script type="text/javascript">
              var theDate=new Date()
              document.write(theDate.getFullYear())
            </script>
            Global Company
        </small>
  11. Save index.html. Refresh the browser to see the changes.

  12. Change border='1' to border='0' in the <table> tag (just below the body tag).

  13. Save index.html. Refresh the browser to see the changes.