GoldBorder Title
GoldBorder Title
Gold Border
 Assignment Five: Insert a graphic, building a table
[ Acrobat Format ]
Next Assignment: Lists
 
 
INTRODUCTION

Images & Tables
Having nice looking text with colors is a good start, but to have a webpage become visibly appealing you need to add a graphicor two (or three or four or ....). So, we are going to delve into code that will allow you to place graphics into your information and latershow you how to use TABLES to organize your information. You will find out as you progress along the web programming path that TABLES willbecome one of your most powerful tools for organization.


The Assignment

At the end of this assignment you should be able to...


(1) Insert Graphics Into Your Webpage
    The command to insert a graphic is <img> . The <img> command is one of the exceptions that you donot need an ending command because you are not affecting the information. You are simply telling the browser to place an imageinto a specific place on the page.

    There is one mandatory attribute you must include in the image command. That is the src attribute. The src attribute tells the <img> command where the image is located so that it can retrieve it for the user. You follow the src attribute with an = sign and then the location contained in quotes (remember the link command?). One of the greatest flexibilities of webpages and internet is the ability for information to reside in multiple locations (computers) andstill be shown on one webpage. So you could have your text information encoded into your webpage and yet tell your webpage to displaya graphic that is located on a computer in Japan.

    Now for the code. In the following image, I am going to have this webpage (assignment 5) display a picture of a logo on a herbal webpage. This imageis actually sitting on the http://www.tinasherbs.com computer and I am just telling my webpage to use it. Here goes:


      Code Used: <img src="http://www.tinasherbs.com/logo003.jpg">

    There are two types of image formats you can use in your webpage. They are the .jpg (sometimesending in .jpeg ) and the .gif . The jpg images are usually used for images dealing witha lot of detail like pictures or where you need the pictures colors to blend. The gif format is usedfor smaller file size (downloads to your computer faster) and for moving pictures (i.e. ). The drawback to jpg 's is that you can not have a moving pictures and the drawback to gif 's is that the colors willnot blend together as well.

    You should learn the concept of location when referring to images (as well as links). Most people do notspend the effort to understand how the src (image command) and href (link command) attributes understandthe location of what you are asking for. As a result there are numerous webpages that have images that don't display andlinks that give error messages when clicked on.

      Lesson on locations
      When referring to an image or creating a link you need to take into account where your current webpage resides andwhere you are referring to. Remember in the previous assignment I told you that if you are linking to a webpage thatresides in the same location as your current webpage that you can just type the name of the webpage without the fullinternet address? The same holds true for images. Here is a table that should help you in determing how to type your src and href attributes:
        Location of current webpage vs. image/linked-page
        Both in same location
        You can just type the name of the image or page.
        Live Example <a href="assign.htm"> Assignments </a>
        On same computer (site) but different directory
        Live Example <a href="/htmlguide/assign.htm"> Assignments </a>
        On different computers (sites)
        Live Example <a href="http://goldborder.com/htmlguide/assign.htm"> Assignments </a>

      Why not use the full internet address each time? You could just type the full internet address each timeand not have to learn about locations. But, you will not only cause more typing on your end but you will end up withheadaches if locations change (which they do often). For instance, if you have a webpage with a graphic called dog.gif that resides in the same location as your webpage and your webpage sites on a server (computer/site) called http://www.animals.com . If the company who owns the server decides to change the name of their site to http://www.greatanimals.com , any links/images thatyou typed the full internet address (pointing to the old name) will not work.

      On the other hand, if you had typed links with just the name (understanding locations) because the picture is in the same location as your webpage, when the site changed itsname, your code would still work.

    Time for you to place an image in your page two . I have a table of images listed below that you can usefor now. You may not find an animal that comes close to your animals but use one of them just for this exercise.

    You will notice that on the first listing I show the address in long , shorter . Any one of them will work but you should understand (from locations above) why each one is different and why they work. Here is a brief explanation of why each one works:

      Long , has the full internet address. Should not be used unless you have to since your webpage may be moved later.
      Shorter , since webpage and graphic reside on the same site (computer), I can start the address with a / andput the directory where the graphic is located. pics I called just place a . (period, which means start looking in the current webpages directory) and then the name of the directory where the picture resides.

    Go to your page two and put one of the following pictures intoyour webpage right above the ad for the animal.

    Click Here To View My Updated Page Two

(2) Create And Fill A Table
    Tables, tables, whos got the tables? (smile)

    Seriously though, tables are one of the best tools in the HTML language. By harnessing the power of tablesyou can organized your page into any imaginable arrangement. Or you can ignore tables and leave your pageis an always vertical organization like many HTML designers do.

    The reason some designers don't tackle tables is that it takes three commands (6 if you include ending commands)to get a basic table and you must have the three commands in the right order. Scared? You shouldn't be! Why?Because you're going to be a GREAT designer...remember?

    Okay, now the concept. A table consists of the following three commands: <table> , <tr> and <td> . Remember how to create a webpage? You first had to placea <html> command to start the page and to end the page you placed a </html> .

    The same holds true for tables . You start a table with a <table> command and when you aredone creating a table you place a </table> . Easy so far? Now for the second command, the <tr> .The <tr> command tells the table to start a new row . And guess what? The </tr> tells the table to end the row . (Heh, you've learned 2 out of the three parts!)

    The last command is the <td> command. This tells a row that you want a cell . And to endthe cell? Use the </td> . Now that you understand the three commands, let's discuss the rules in using them:

      Rules
    • Every table must have at least one <tr> (row)
    • Every row must have at least one <td> (cell)
    • Information and image are only placed in <td> 's
    • You can have as many rows as you want in a table
    • You can have as many cells as you want in a row
    • Here is the code for a basic table:

        <table>
        <tr>
        <td>
        </td>
        </tr>
        </table>
        (start table)
        (start row)
        (start cell)
        (end cell)
        (end row)
        (end table)

    Why use tables? Tables allow you to place information anywhere on the screen and around other informationthat you normally cannot accomplish with <br> , <p> , and other formatting commands.

    One more concept before we do the code. An attribute you can use in the <table> command is called border . By using border you can tell the table to put lines around the cells (like the image table above)and how thick the lines should be, or tell the table not to have lines (invisible). Here are three examples of using the border attribute:

      <table border=0> (no border)
      <table border="1"> (border with a line size of 1)
      <table border="3"> (border with a line size of 3)

      NOTE: If you just put <table> , the browser will default toa border size of 1 (one).

    In the following I will demonstrate how to use tables in various scenarios:

      Desired Result: Place a name with a phone number (NOT YOUR REAL ONE) to the right.
      Result Code Used
      GoldBorder Creator (800) 123-4567
      <table border="1">
      <tr>
      <td>GoldBorder Creator</td>
      <td>(800) 123-4567</td>
      </tr>
      </table>

      Desired Result: Place a name with a butterfly to the right and then a phone number to the right.
      Result Code Used
      GoldBorder Creator (800) 123-4567
      <table border="1">
      <tr>
      <td>GoldBorder Creator</td>
      <td><img src="./pics/butterfly.gif"></td>
      <td>(800) 123-4567</td>
      </tr>
      </table>

      Desired Result: Place a name with a list of phone numbers.
      Result Code Used
      GoldBorder Creator (800) 123-4567
      (888) 432-1234
      (360) 000-1111
      (503) 123-3333
      <table border="1">
      <tr>
      <td>GoldBorder Creator</td>
      <td>(800) 123-4567
      <br>(888) 432-1234
      <br>(360) 000-1111
      <br>(503) 123-3333
      </td>
      </tr>
      </table>

      Desired Result: Place a name above a butterfly and phone number, centered.
      Result Code Used
      GoldBorder Creator
      (800) 123-4567
      <table border="1">
      <tr>
      <td align="center" colspan="2">GoldBorder Creator</td>
      </tr>
      <tr>
      <td><img src="./pics/butterfly.gif"></td>
      <td>(800) 123-4567</td>
      </tr>
      </table>

      Did you notice the two new attributes I place in the <td> command? The align attribute of the <td> command tells the browser how to horizontally align the information in the cell. The browser will automatically place everything to the leftin a cell if you do not tell it how to align the information (as in the earlier table examples with a align command). In this example I specifically told the browser to align the information in the cell in the center.

      The other attribute is colspan . You can use this attribute to tell the browser how many columns this celloccupies. (columns are vertical and rows are horizontal). I told the browser that the cell with the name should occupytwo columns since the information on the next row has two columns (butterfly and phone number). By using two columnsthe name is being centered over both the butterfly and phone number. If I had only done one cell with the name, the name wouldonly be over the butterfly.

      Here are examples of rows and columns:

        Table with one row and three columns
        column one column two column three
        row one
        Click Here To View Code To Produce The Above Table
        Table with two rows and three columns
        column one column two column three
        row one
        row two
        Click Here To View Code To Produce The Above Table
        Table with two rows and three columns, butterfly occupying two rows
        column one column two column three
        row one
        Notice I occupy two rows?
        row two
        Click Here To View Code To Produce The Above Table
        Table with two rows and three columns, butterfly occupying two columns
        column one column two column three
        row one
        Notice I occupy two columns?
        row two
        Click Here To View Code To Produce The Above Table

    Now it is time to use tables to make your page two lookmore professional. Go to your page two and use a table to organize the pictures of your animal with the ad aboutit. I want a table where the picture is in a cell (column one) and the ad is in a cell to the right of the picture (column two).

    Click Here To view MY Updated Page Two

    We will cover more about tables soon.


(3) Surprise!
    Categories 1 and 2 above were enough instruction for this assignment. Time to relax!
 Assignment Five: Insert a graphic, building a table
Next Assignment: Lists