Question

In: Computer Science

Draw the DOM tree for the HTML of the ImageSwap application. <!DOCTYPE html> <html> <head> <title>Image...

Draw the DOM tree for the HTML of the ImageSwap application.

<!DOCTYPE html>

<html>

<head>

<title>Image Swap Application</title>

</head>

<body>

<main>

<h1>Fishing Images</h1>

<p>Click on an image to enlarge.</p>

<ul id="imageLinks">

</ul>

<h2 id="caption">Catch and Release</h2>

</main>

</body>

</html>

Expert Solution

Hi.

Document object model or DOM is a structure which specifies the tags, nested tags and their children. It also structures the text inside the objects. DOM tree is very useful to keep the records of the tags and their children.

In the above question, for the given html code:

<!DOCTYPE html>

<html>

<head>

<title>Image Swap Application</title>

<link rel="stylesheet" type="text/css" href="image_swap.css">

<script type="text/javascript" src="image_swap.js"></script>

</head>

<body>

    <main>

        <h1>Fishing Images</h1>

        <p>Click on an image to enlarge.</p>

        <ul id="imageLinks">

            <li><a href="images/release.jpg" title="Catch and Release">

                <img src="thumbnails/release.jpg" ></a></li>

            <li><a href="images/deer.jpg" title="Deer at Play">

                <img src="thumbnails/deer.jpg" ></a></li>

            <li><a href="images/hero.jpg" title="The Big One!">

                <img src="thumbnails/hero.jpg" ></a></li>

            <li><a href="images/bison.jpg" title="Grazing Bison">

                <img src="thumbnails/bison.jpg" ></a></li>

        </ul>

       <h2 id="caption">Catch and Release</h2>

        <p><img id="main_image" src="images/release.jpg" ></p>

    </main>

</body>

</html>

The DOM tree will be:

And the output of the html file will be:

For any doubts please comment below.

venereology answered 3 months ago

<!DOCTYPE html> <html> <head>   <!-- * Do not change...

<!DOCTYPE html> <html> <head>      <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <style> .btn{border:1px solid black; padding:5px;display:inline-block} </style> </head> <body>     <!-- ***************************************************************************************...

HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Clock</title> <link rel="stylesheet" href="clock.css"> &n

HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Clock</title> <link rel="stylesheet" href="clock.css"> <script src="clock.js"></script> </head> <body> <main> <h1>Digital clock</h1> <fieldset> <legend>Clock</legend> <span id="hours"> </span>: <span id="minutes"> </span>: <span id="seconds"> </span>  <span id="ampm"> </span> </fieldset> </main> </body> </html> CSS: body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 450px; border: 3px solid blue; padding: 0 2em 1em; } h1 { color: blue; } label { float: left; width: 11em; text-align: right; padding-bottom: .5em; } input { margin-left: 1em; margin-bottom: .5em; } fieldset {...

Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head>...

Please create a PHP action codes for the HTML CODE provided below. <!DOCTYPE html> <html> <head> <title> Project for keeping all your input </title> </head> <body> <h1>Welcome to this Web Based Test!!!</h1> <p>Please answer the following questions:</p> <hr/> <form action="" method="post"> Name: <input type="text" name="name" value=""> <font color=red>*</font><br/><br/> E-mail: <input type="text" name="email" value=""> <font color=red>*</font><br> <hr/> Choose your major area of study: <select name="major"> <option value="Digital Media" >Digital Media</option> <option value="Software" >Software</option> <option value="Security" >Security</option> <option value="Business" >Business</option> <option value="Other"...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet"...

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Weather App </title> <link rel="stylesheet" href="main.css" /> </head> <body> <div class="app-wrap"> <header> <input type="text" autocomplete="on" class="search-box" placeholder="Enter your location..." /> </header> <main> <section class= "location"> <div class="city">Hyderabad, IN</div> <div class="date">Thursday 23 July 2020</div> </section> <div class="current"> <div class="temp">25<span>°c</span></div> <div class="weather">Rainy</div> <div class="hi-low">20°c / 23°c</div> </div> </main> </div> <script src="main.js"></script> </body> </html> MAIN.js const api = { key="091ff564240e0e16c46ae680b188ca3e" base: "https://api.openweathermap.org/data/2.5" }; const searchbox = document.querySelector(".search-box"); searchbox.addEventListener("keypress", setQuery); function setQuery(evt) {...

<!DOCTYPE html> <html> <body>   ...

<!DOCTYPE html> <html> <body>    <title> TYPE YOUR NAME HERE</title> <script> // // A bug collector collects bugs every day for five days. Write a function that keeps // a running total of the number of bugs collected during the five days. The loop // should ask for the number of bugs collected for each day, and when the loop is // finished, the program should display the total...

images wont show what is wrong with this code? <html> <head> <title>Major North American Sports Leagues</title>...

images wont show what is wrong with this code? <html> <head> <title>Major North American Sports Leagues</title>  <link rel="stylesheet" href="layout.css">   <ul> <li><a class="active" href="MarcosPage.html">Marcos Page</a></li> <li><a href="JessesPage.html">Jesses Page</a></li> </ul>   <script> //Creates array for title names var title = []; title[0] = ["NBA"]; title[1] = ["MLB"]; title[2] = ["NHL"]; title[3] = ["NFL"]; title[4] = ["MLS"]; title[5] = ["CFL"]; //Creates array for...

lab3 exercise 5 html <!DOCTYPE html> <!-- Webpage HTML document for Lab 03. Author: Amir H...

lab3 exercise 5 html <!DOCTYPE html>  <html lang="En"> <head> <meta charset="UTF-8"> <title> EECS1012: Lab 3 - My Kit </title>  <link rel="stylesheet" type="text/css" href="myLearningKit_ex2.css"> <script src="myLearningKit_ex4.js"></script>  ...

Assume that there is an image “fewa.jpg” in the root of the HTML folder. Write HTML...

Assume that there is an image “fewa.jpg” in the root of the HTML folder. Write HTML code to insert that image with appropriate alternative text. Also, apply an appropriate title to the image.?

Develop and test an HTML document to use the DOM 2 event model that has text...

Develop and test an HTML document to use the DOM 2 event model that has text boxes for apple (59 cents each), orange (49 cents each), and banana (39 cents each), along with a Submit button. These text boxes take a number, which is the purchased number of the particular fruit. Add reality checks to the text boxes of the document to ensure that the input values are numbers in the range from 0 to 99. Each of the text...

BEFORE html <html> <head> <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body> <p>

BEFORE html <html> <head> <link rel="stylesheet" type="text/css" href="mystyle98_d.css"> </head> <body> <p> I'm a paragraph, what color am I ? </p> <ul> <li id = "fix"> I'm a list item;what color am I? </li> </ul> <div class = "central1"> <p class ="above"> I'm a paragraph; what color am I? </p> <p> I'm another paragraph, what color am I ? </p> <ol> <li id = "fix1"> I'm another list item;what...