1 – Create a webpage that contains a table with exactly three rows and two columns....

1 – Create a webpage that contains a table with exactly three rows and two columns.

The first row will contain a table heading containing the name of a US National Park, that spans across all columns. Hint: use the colspan attribute inside the opening th tag
Give the table heading an onmouseover that will change the text of the heading when it is moused over to read My Favorites Park! (Hint: use innerHTML). Use onmouseout to change it back.
The second and third rows will contain 2 thumbnail(small) images each. (See Creating Square Thumbnails section below).

These are images from the National Park that you selected
Remember your code, pages, images will not be like anyone else’s. When they are compared you do not want your file to be flagged.

Use the anchor element on the thumbnail images, so that each thumbnail image opens a larger version of the same image in a new tab. (Hint: if you give the target a name, you can have them all open in the same tab rather than using _blank and having a new tab open each time one is clicked. This avoids opening too many tabs.)
Apply style to the table. Again, your table will not be like anyone else’s. Your work is to be your own work.
1. Create a webpage that contains a table with four columns and six rows.
2. The first row will contain a heading that spans across all columns. This heading will say Yellowstone National Park.
3. The second row will contain a heading that spans across all columns. This heading will tell the user to click on any image to enlarge.
4. The third row will contain four images. Use the thumbnail(smaller) images of scenes geysers in Yellowstone. Using paint, make the smaller images 150px X 150px.
(See Creating Square Thumbnails section below)
1. The Fourth row will contain three cells, the first cell and third cell are thumbnails of more geysers in Yellowstone.
  1. The second cell contains an image of Old Faithful Geyser that is 300px by 300px. (You must specify the size in the imgelement)
  2. Hint: Use both rowspan and colspan so that this image covers 4 cells. This image will be replaced when the user clicks on any thumbnail image.
2. The fifth row will contain two thumbnail images of hot pools found in Yellowstone Park. (An image on each side of the lower half of the center image.

Solutions

Expert Solution

a. According to the question, design the table using html and css, here the code of index.html

<!DOCTYPE html>
<html>
<head>
<title>Table two rows and three column</title>
</head>
<body>

<div class="wrapper">

<table>
<thead>
<tr>
<th id="message" colspan="2" onmouseover = "document.getElementById('message').innerHTML='My Favorites Park!';" onmouseleave = "document.getElementById('message').innerHTML='US National Park'; " onmouseout="this.style.color='black'">US National Park</th>
    </tr>
</thead>

<tbody>
<tr class="math">
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
</tr>

<tr class="math">
<td></td>
<td></td>
</tr>

<tr class="math">
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
</tr>  

</tbody>
</table>
</div>

</body>
</html>

now, to design the table with fancy css sytle, here the code for css

html { box-sizing: border-box; }

*,
*::before,
*::after { box-sizing: inherit; }

body,
body * {
    margin: 0;
    padding: 0;
}

body {
    font: normal 100%/1.15 "Open Sans", sans-serif;
    background-color: #fffaf0;
    color: #555;
        counter-reset: tb;
}

.wrapper {
    position: relative;
    max-width: 64em;
    height: auto;
    margin: 0 auto;
    padding: 1em 1em;
}


table {
        width: 100%;
        min-width: 40em;
        margin-top: 1em;
        border-collapse: separate;
        border-spacing: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
        background-color: #f5deb3;
}

thead th { background-color: #fff; }



th, td {
        position: relative;
        padding: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
}

tbody tr:nth-of-type(odd) { background-color: #fffacd; }

tbody tr:nth-of-type(even) { background-color: #f5f5f5; }

Now, the final html page including the CSS which is embeded inside the head tag using the style tag, here the final code

<!DOCTYPE html>
<html>
<head>
<title>Table two rows and three column</title>
<style>
html { box-sizing: border-box; }

*,
*::before,
*::after { box-sizing: inherit; }

body,
body * {
    margin: 0;
    padding: 0;
}

body {
    font: normal 100%/1.15 "Open Sans", sans-serif;
    background-color: #fffaf0;
    color: #555;
        counter-reset: tb;
}

.wrapper {
    position: relative;
    max-width: 64em;
    height: auto;
    margin: 0 auto;
    padding: 1em 1em;
}


table {
        width: 100%;
        min-width: 40em;
        margin-top: 1em;
        border-collapse: separate;
        border-spacing: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
        background-color: #f5deb3;
}

thead th { background-color: #fff; }



th, td {
        position: relative;
        padding: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
}

tbody tr:nth-of-type(odd) { background-color: #fffacd; }

tbody tr:nth-of-type(even) { background-color: #f5f5f5; }



</style>
</head>
<body>

<div class="wrapper">

<table>
<thead>
<tr>
<th id="message" colspan="2" onmouseover = "document.getElementById('message').innerHTML='My Favorites Park!';" onmouseleave = "document.getElementById('message').innerHTML='US National Park'; " onmouseout="this.style.color='black'">US National Park</th>
    </tr>
</thead>

<tbody>
<tr class="math">
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
</tr>

<tr class="math">
<td></td>
<td></td>
</tr>

<tr class="math">
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
<td><a href="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/9/97/Logo_of_the_United_States_National_Park_Service.svg"  width="70px" height="70px"></a></td>
</tr>  

</tbody>
</table>
</div>

</body>
</html>

Now, copy the above code on your system and name as index.html and view on browser, the output look like this

b. According to the instruction, the table with 4 columns with 6 rows, here the html code for index2.html

<!DOCTYPE html>
<html>
<head>
<title>Table 4 rows and 6 column</title>
</head>
<body>

<div class="wrapper">

<table>
<thead>
<tr>
<th colspan="4">Yellowstone National Park</th>
</tr>
</thead>

<tbody>
<tr class="math">
<td align="center" colspan="4" style="color: #000;">click on any image to enlarge</td>
</tr>

<tr class="math">
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
</tr>

<tr class="math">
<td colspan="2" align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://www.yellowstonepark.com/.image/t_share/MTQ3MzIwMDY3OTc4NjM1MDU1/yellowstone_old_faithful.jpg" width="300px" height="300px"></td> 
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>  
</tr>

<tr class="math">
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
</tr>   
</tbody>
</table>
</div>
</body>
</html>

To Desing the table css defined so that table look good on webpage, here the css code:

html { box-sizing: border-box; }

*,
*::before,
*::after { box-sizing: inherit; }

body,
body * {
    margin: 0;
    padding: 0;
}

body {
    font: normal 100%/1.15 "Open Sans", sans-serif;
    background-color: #fffaf0;
    color: #555;
        counter-reset: tb;
}

.wrapper {
    position: relative;
    max-width: 64em;
    height: auto;
    margin: 0 auto;
    padding: 1em 1em;
}


table {
        width: 100%;
        min-width: 40em;
        margin-top: 1em;
        border-collapse: separate;
        border-spacing: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
        background-color: #f5deb3;
}

thead th { background-color: #fff; }



th, td {
        position: relative;
        padding: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
}

tbody tr:nth-of-type(odd) { background-color: #fffacd; }

tbody tr:nth-of-type(even) { background-color: #f5f5f5; }

The final code with css embeded in the html page, the css is used before the head tag using style tag, here the final code:

<!DOCTYPE html>
<html>
<head>
<title>Table 4 rows and 6 column</title>
</head>
<style>
html { box-sizing: border-box; }

*,
*::before,
*::after { box-sizing: inherit; }

body,
body * {
    margin: 0;
    padding: 0;
}

body {
    font: normal 100%/1.15 "Open Sans", sans-serif;
    background-color: #fffaf0;
    color: #555;
        counter-reset: tb;
}

.wrapper {
    position: relative;
    max-width: 64em;
    height: auto;
    margin: 0 auto;
    padding: 1em 1em;
}


table {
        width: 100%;
        min-width: 40em;
        margin-top: 1em;
        border-collapse: separate;
        border-spacing: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
        background-color: #f5deb3;
}

thead th { background-color: #fff; }



th, td {
        position: relative;
        padding: 0.25em 0.25em;
        border-radius: 0.35em 0.35em;
}

tbody tr:nth-of-type(odd) { background-color: #fffacd; }

tbody tr:nth-of-type(even) { background-color: #f5f5f5; }



</style>
<body>

<div class="wrapper">

<table>
<thead>
<tr>
<th colspan="4">Yellowstone National Park</th>
</tr>
</thead>

<tbody>
<tr class="math">
<td align="center" colspan="4" style="color: #000;">click on any image to enlarge</td>
</tr>

<tr class="math">
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
</tr>

<tr class="math">
<td colspan="2" align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>
<td align="center"><img src="https://www.yellowstonepark.com/.image/t_share/MTQ3MzIwMDY3OTc4NjM1MDU1/yellowstone_old_faithful.jpg" width="300px" height="300px"></td> 
<td align="center"><img src="https://d279m997dpfwgl.cloudfront.net/wp/2016/08/0823_old-faithful.jpg" width="150px" height="150px"></td>  
</tr>

<tr class="math">
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
<td align="center" rowspan="2"><p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>   
<p><img src="https://i.insider.com/594408f1e92b94051767da57?width=1100&format=jpeg&auto=webp" width="150px" height="150px" onclick="this.src='https://www.nps.gov/yell/learn/nature/images/hotspring_works.jpg'"></p>  
</td>  
</tr>   
</tbody>
</table>
</div>
</body>
</html>

Copy the above code, save as file as index2.html, view on the browser when you click on last row of images the image will change, here the output on the browser looks like this:

venereology answered 4 months ago

Next > < Previous

Related Solutions

1 – Create a webpage that contains a table with exactly three rows and two columns....

1 – Create a webpage that contains a table with exactly three rows and two columns. The first row will contain a table heading containing the name of a US National Park, that spans across all columns. Hint: use the colspan attribute inside the opening th tag Give the table heading an onmouseover that will change the text of the heading when it is moused over to read My Favorites Park! (Hint: use innerHTML). Use onmouseout to change it back....

"Create a program that displays a table consisting of four rows and five columns. The first...

"Create a program that displays a table consisting of four rows and five columns. The first column should display the numbers 1 through 4. The second and sub-sequent columns should display the result of multiplying the number in the first column by the numbers 2 through 5. If necessary, create a new project named Introductory14 Project, and save it in the Cpp8\Chap08 folder. Enter the C++ instructions into a source file named Introductory14.cpp. Also enter appropriate comments and any additional...

Create a table in SQL with foreign key reference: 1.Create the three tables without any columns...

Create a table in SQL with foreign key reference: 1.Create the three tables without any columns 2.Alter the tables to add the columns 3.Alter the tables to create the primary and foreign keys

Create a Word document and title it “College Expenses”. In the Word document, insert a table with at least 5 rows and 5 columns. Insert>Table.

Assignment 3 – Incorporating a Table into a Document.Create a Word document and title it “College Expenses”. In the Word document, insert a table with at least 5 rows and 5 columns. Insert>Table.Tell me about your college expenses you have by filling this table with subjects and data. Then write two paragraphs telling me about the information you provided in the table. Bold and color table heading. Example of table:College ExpensesTuitionBooksComputer/InternetOther suppliesScience ClassMath classC.I.S. ClassEnglish ClassGive the page a proper title....

When testing for independence in a contingency table with 2 rows and 2 columns at 5%...

When testing for independence in a contingency table with 2 rows and 2 columns at 5% level of significance, the critical value of the test statistic is____

JavaScript Create a welcome message on your webpage using three variables At least two of the...

JavaScript Create a welcome message on your webpage using three variables At least two of the variables should be concatenated together Use document.write to add a statement about what is your favorite past time? Format the HTML document appropriately with a title, and the correct HTML structure to hold the JavaScript Create an array to share what your favorite color is. The array must have at least three values and be called via the index value Correctly link the JavaScript...

Create a table with two columns. Name the table First Initial _ Last Name (e.g. John...

Create a table with two columns. Name the table First Initial _ Last Name (e.g. John Dow will create table j_dow). You have to audit all DML statements on your table. To do this you write two triggers: 1. To log any DML statements that users might run on this table. The results must be stored in the First Initial _ Last Name _ Log table (e.g. John Dow will create table j_dow_log). The table should have unique event ID,...

Write a Python program which adds up columns and rows of given table as shown in...

Write a Python program which adds up columns and rows of given table as shown in the specified figure. Example test case (the four lines below “Input cell value” are input from user, and the five lines below “Results:” are the output of the program.): Input number of rows/columns (0 to exit) 4 Input cell value: 25 69 51 26 68 35 29 54 54 57 45 63 61 68 47 59 Result: 25 69 51 26 171...

Write a Python program which adds up columns and rows of given table as shown in...

1. Write the statements to create a table named REQUIREMENTS. The table has the following columns:...

1. Write the statements to create a table named REQUIREMENTS. The table has the following columns: credits number (primary key) and degree name. 2. Write the statements to create a table named CANDIDATE with the following columns names. Pick the best column type: student_id, first name, last name, credits and graduation date. The credits column is a foreign key to the credits column in the REQUIREMENTS table. 3. Write the statement(s) to Insert 2 rows in your REQUIREMENTS table. Make...

Subjects