Question

Section 1.1: Creating the First Table

1. Locate the HTML comment that reads "table 1" just below the opening body tag.
2. Add a table tag with the following specifications using the style attribute and CSS:
   1. width with a value of 650 pixels
   2. a margin set to auto – this will center the table within the web page
   3. a border set to none - this removes the table border
3. Add a table row (<tr>)
4. Add a table data container tag (<td></td>)
5. Within the <td> container tag you just created, use the image tag (<img>) to insert an image within the table cell using the following attributes and values: a. src with a value of bensonjarreau.jpg
   2. width with a value of 184
   3. height with a value of 186
   4. alt with a value of Album Graphic
   5. title with a value of Album Graphic

NOTE: Remember that all attribute values are enclosed within double quotes and the image tag is an empty tag. Watch your spacing!

6. Add another table data container tag (<td></td>).
7. Within the td container tag include the following in this exact order:
   1. Add the following text using a heading 2 tag: Givin' It Up
   2. Add the following text using a heading 3 tag: Album Review
   3. Create a paragraph container tag with the following text:

Givin' It Up finds crossover jazz icons guitarist George Benson and vocalist Al Jarreau teaming up for a breezy, enjoyable melodic session that highlights both artists' long careers. Technically a duo album, it is Benson's first since signing with Concord Records. More…

4. Hyperlink the word More… so that it links to the following URL:

http://itunes.apple.com/us/album/givin-it-up/id191922746

5. Create a paragraph container tag with the following text (you will have to use line breaks for each line of text):

Genre: Jazz

Released: Sep 26, 2006

&copy; 2006 Concord Music Group, Inc./Monster LLC.

6. Add a line break after the word Jazz and Sep 26, 2006
7. Following the paragraph including the text you just created, close the table cell and table row (</td></tr>)
8. Close the table tag (</table>)

  

Section 1.2: Creating the Second Table

1. Locate the HTML comment that reads "table 2" just below the opening body tag.
2. Add a table tag with the following specifications using the style attribute and CSS:
   1. width with a value of 650 pixels
   2. a margin set to auto – this will center the table within the web page
   3. a border set to none - this removes the table border
   4. a background color of #ccf
3. Add an opening table row tag (<tr>)
4. Following the opening <tr> tag you just created, type the following source code to create four table headers:
5. Close the table row tag.

You are now going to create six more rows containing 4 columns within each row. Ready?

6. Type an opening table row tag.
7. Create four sets of table data (<td></td>) container tags.
8. Add the following information to the table cells:
   1. The first cell should contain the following text: 1
   2. The second cell should contain the following text: Breezin'
   3. The third cell should contain the following text: George Benson &amp; Al

Jarreau

8. 4. The fourth cell should contain the following text: 5:39
9. Close the table row tag.

10. Using steps 6-9 from above and the screen shot below as a reference, create the next three rows. Remember to use special characters where appropriate.

11. Type an opening table row tag.
12. Create a table cell (<td>) with the colspan attribute that spans across four columns:
13. Within the table cell you just created, type the words See More…
14. Hyperlink the words See More… so that they link to the following URL:

http://itunes.apple.com/us/album/givin-it-up/id191922746

15. Close the table row tag.
16. Add an opening table row tag.
17. Create a table cell (<td>) with the colspan attribute that spans across four columns:

18. Within the table cell you just created, use HTML commenting to add the following text: place the HTML5 validation link within this table cell
19. Close the table row tag.
20. Close the table tag (</table>) .

Section 1.4 – HTML Commenting

1. Within the head container tag just above the title tag, use HTML comments to include your name.
2. Please use the web to find out the proper syntax used for adding HTML comments to an HTML document. We also discussed this in class and I used it already in the document I supplied to you.

Answer 1

Heres the first setion

<style>
    table {
        width: 650px;
        margin: auto;
        border: none;
    }
</style>
<table>
    <tr>
        <td>
            <img src="bensonjarreau.jpg" width="184" height="186"  title="Album Graphic">
        </td>
        <td>
            <h2>Givin' It Up</h2>
            <h3>Album Review</h3>
            <p>
                Givin' It Up finds crossover jazz icons guitarist George Benson 
                and vocalist Al Jarreau teaming up for a breezy, enjoyable melodic 
                session that highlights both artists' long careers. Technically a duo 
                album, it is Benson's first since signing with Concord Records. 
                <a href="http://itunes.apple.com/us/album/givin-it-up/id191922746">More...</a>
            </p>
            <p>
                Genre: Jazz <br>
                Released: Sep 26, 2006 <br>
                &copy; 2006 Concord Music Group, Inc./Monster LLC. 
            </p>
        </td>
    </tr>
</table>

Second part, as youy have not attached screenshot so do as needed

<style>
    table {
        width: 650px;
        margin: auto;
        border: none;
        background-color: #ccf;
    }
</style>
<table>
    <tr>
        <!-- Add the required source code of table headers-->
    </tr>
    <tr>
        <td>1</td>
        <td>Breezin'</td>
        <td>George Benson &amp; Al Jarreau</td>
        <td>5:39</td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td colspan="4">
            <!--Place the HTML5 validation link within this table cell-->
        </td>
    </tr>

    
</table>