Welcome
Arachne's Web
A group focused on serving the AW community by providing help and discussion on topics such as HTML, CSS, web design, homesite decorating, netiquette and issues important to web artists.

Arachne's Web Academy (- threads, 696 posts)
    Tutorials - HTML/XHTML (320 posts)
    Social Thread

    Expand your own skills and aid others in learning HTML to XHTML by offering us a tutorial of your own! ...
    26 Members have made 110 Posts here to date.
    Google
    AncientWorlds.net Web
    Next: 18 - Finishing Touches
    Prev: 16 - Nesting the tables
    17 - Adding the graphics
    Sankira.gif
    Author: * Sankira Qin - 18 Posts on this thread out of 1,340 Posts sitewide.
    Date: Nov 10, 2008 - 18:06

    Adding the graphics

    The last major step we have to do is add the graphics to the cells we have already created. We do this in the following way:
    1. First, we're going to remove the background color of the document and add a background image. Open your document and replace bgcolor="#CFBAA7" with background="http://www.ancientworlds.net/aworlds_media/ibase_1/00/07/23/00072389_000.jpg" (Notice we're using absolute URLs, since the document you are creating is not being saved on the Ancientworlds server.)


    2. Now, add the following URLs to the first three cells--notice the first and third columns have both a graphic as a background= attribute and a graphic inserted into the cell.



      As I mentioned, in the first and third cells we include a background image. This graphic is the African graphic from Jaguarwoman. We set it as a background so that it will continue to fill the cell no matter how long the cell gets. The graphic included as a src= graphic in the table cell is a blank spacer. We use this so we can set the width= attribute to make sure the column remains the same width as the graphic being used for the background.

      In the middle cell, we don't use a background graphic. Instead we insert the photographic image, including the width= and height= attribute tags. For those users who have their browsers set not to show images, we include a text description of the graphic in an alt= tag.

      I have used all caps for IMG SRC= in this document because Ancientworlds will convert AW graphics to a coded number unless you use all caps for the Image and source tags. On other websites, you could stick with all lowercase letters as with the other tags.


    3. In the first cell of the second row, add the same text you added in the first cell of the first row. In the second cell of the second row, be sure to add the vertical alignment tag to align the table with the top of the cell.



    4. Again, we have reached the beginning of the existing table. Now, we have to drop to the bottom of the page and insert the background graphic in the last cell of the second row.



    5. Since the main photograph already has the heading "Tree of Life Garden", there's no point in repeating it in the text. So delete the entry:




    Now, if you save and view your document, it should look something like this: Tree of Life Garden.


    NEXT: 18 - Finishing Touches
    PREV: 16 - Nesting the tables
Rome - Rome, Season 1 - The Stolen Eagle


Copyright 2002-2011 AncientWorlds LLC | Code of Conduct and Terms of Service | Contact Us! | The AncientWorlds Staff