Question

In: Computer Science

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

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

<!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" alt=""></a></li>

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

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

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

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

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

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

        </ul>

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

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

    </main>

</body>

</html>

Solutions

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.


Related Solutions

Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form>...
Remove inline style to an external file <!DOCTYPE html> <html> <head> <title>PROBLEM</title> </head> <body>    <form> <table style="color:white;background-color:blue;border:solid black 7px;border-radius:25px;"> <tr><th colspan="2" style="color:white;background-color:black;border:solid black 2px;outline:solid black 2px;">SQUARE PROBLEM</th></tr> <tr> <td><label>Enter side:</label></td><td> <input type="text" style="background-color:#DEDEE6;border:4px solid red;"/> </td> </tr> <tr> <td><label>Area:</label></td><td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr> <td><label>Perimeter:</label></td>   <td> <input type="text" readonly style="background-color:#DEDEE6;border:4px solid yellow;"/> </td> </tr> <tr>    <td colspan="2" >    <center>    <input type="button" value="Area" style="color:white;background-color:black;border:1px solid red;"/>    <input type="button" value="Perimeter" style="color:white;background-color:black;border:1px solid white;"/>...
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = new Date(2020, 12, 29);           // HINT: Be careful with getMonth()           var d =  a.getFullYear() + a.getMonth();           var sum = d % 5;           document.getElementById("ans").innerHTML = sum.toString();         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <input type="button" name="Submit" id="submit" value="Submit" onclick="findAnswer();"/>          </form>     <p id ="ans"></p>   </body> </html> none Will the code from above print anything, if so, what printed ?...
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>           
<!doctype html> <html lang="en">   <head>     <title>Programming 1</title>     <meta charset="utf-8"/>                     </head>      <body>     <script type="text/javascript">              function findAnswer() {           var a = document.getElementById("box1").value;           var b = document.getElementById("box2").value;                        if (typeof(a) == "number" && typeof(b) == "number") {               var c = (a + b) % 5;               document.getElementById("ans").innerHTML = c.toString();             } else {                document.getElementById("ans").innerHTML = "no Good";             }         }     </script>              <form action="#" method="post" name="form1" id="form1" class="form" >        <label>Enter Numbers: </label> <br />           <label> Value 1  : </label><input type="text" name="box1" id="box1"  value="10" /><br/>           <label> Value...
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change...
<!DOCTYPE html> <html> <head> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Do not change anything within the <head></head> section of the HTML * --> <!-- * * --> <!-- *************************************************************************************** --> <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> <!-- *************************************************************************************** --> <!-- * * --> <!-- * Nothing to change here in the <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">&nbsp;</span>:             <span id="minutes">&nbsp;</span>:             <span id="seconds">&nbsp;</span>&nbsp;             <span id="ampm">&nbsp;</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 {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {...
<!DOCTYPE html> <html lang="en"> <head>    <title>Form Display Example</title>    <script type="text/javascript">    function display() {    dispWin = window.open('','NewWin','toolbar=no,status=no,width=300,height=200')       message = "<ul><li>NAME:" + document.form1.name.value;    message += "<li>ADDRESS:" + document.form1.address.value;    message += "<li>PHONE:" + document.form1.phone.value;    message += "</ul>";    dispWin.document.write(message); } </script> </head> <body>    <h1>Form Display Example</h1>    <p>Enter the following information. When you press the Display button, the data you entered will be displayed in a pop-up.</p>    <form name="form1" method="get" action="">   ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial,...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>All Pets Veterinary Hospital</title> <style> body { font-family: arial, sans-serif; font-size: 100%; } /* outer container */    #wrapper { width: 960px; margin: 50px auto; padding: 0px; background-color: rgb(255, 255, 255); /* white */ border: 1px solid #000; /* black */ }    header h1 { text-align: center; }    nav { text-align: center; background: rgb(175, 196, 206); }    address figure { text-align: center; } </style> </head> <body> <div id="wrapper"> <!-- outer...
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"...
Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-
Question Block elements v.s. inline elements. <!DOCTYPE html> <html> <head> <style>     body{                      text-align: center;     }     .textdiv {        background-color: LightSlateGrey;        width: 50%;     }     .imgdiv {                      background-color: PapayaWhip;                   width: 30%;     } </style> </head> <body>     <h2>Center Me</h2>     <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."</p>     <div class="textdiv">                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt...
<!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) {...
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT