Lesson Nine: Introducing Tables and Table Cells

  1. In this lesson you will build a webpage from scratch. You can either enter this html skeleton code or cut and paste the code to a new file 
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="text.css">
    </head>
    <body>
    <h1></h1>
    <p></p>
    </body>
    </html>

    Save the file as ak1.html in the historytree folder. Then double click the file to see what an empty html file looks like. Sample

    Hopefully, you will learn a lot from building this Animal Kingdom page from scratch. Follow these steps (it is very important that you save and test the page after each step:)

  2. Create a new .CSS file with this body code:
    body { border: solid 2px darkgreen; }

    Save the file as ak1.css

  3. Link the .CSS file to the .HTML file. Here is the line that must be in the head element of the .HTML file:
    <link rel="stylesheet" type="text/css" href="ak1.css">

    Test your html file to be sure that the link is working - you should see a green box (the body.) Sample

  4. The width of the body border is determined by the size of your browser window. This will be an entirely fluid page, which means that all the information in the body will adjust to your browser window size. Test this out by making your window narrower and then wider. Now enter the title The Animal Kingdom between the title tags and the h1 tags. Again save and test your page.

    Your page should look like this: Sample

Lesson Ten: Floating Images