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>
<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.
venereology answered 4 months agoRelated Solutions
<!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"> </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 {...
<!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"...
<!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) {...
<html> <head> <title>Nick D'Angelo</title> </head> <body> <h1>This is a header</h1> <h2>This is a subheader</h2> &nbs
<html>
<head>
<title>Nick
D'Angelo</title>
</head>
<body>
<h1>This is a
header</h1>
<h2>This is a
subheader</h2>
<p>The quick
<b>brown</b> fox jumped <i>over</i> the
lazy dog.</p>
<!--additional paragraph-->
<!--here two words are bold and two
are italicized-->
<p>Pack my <b>box</b>
with <i>five</i> dozen <b>liquor</b>
<i>jugs</i>. Go to <a href='https://www.esu.edu'
target="_blank">site</a></p>
<a
href="http://ndangelo.com">Nick's Homepage</a>
<a href="http://ndangelo.com"
target="_blank">Nick's Homepage</a>
</body>
<html>
Add an Ordered, Unordered, Definition and Nested list to
your html file (one for each). Each should be at least 10 lines or
more....
<!DOCTYPE html> <html> <body> <!-- replace the text below with your name!--> <!-- --> <!-- -->...
<!DOCTYPE html>
<html>
<body>
<!-- replace the text below with your name!-->
<!-- -->
<!-- -->
<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>
<!-- Calling CSS File -->
<link rel="stylesheet" href="layout.css">
<!----------------------------------------->
<!-- Navbar Links to both Pages -->
<ul>
<li><a class="active" href="MarcosPage.html">Marcos
Page</a></li>
<li><a href="JessesPage.html">Jesses
Page</a></li>
</ul>
<!----------------------------------------------------------------->
<!-- Java Script for creating arrays -->
<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>
<!-- Webpage HTML document for Lab 03.
Author: Amir H Chinaei
For: EECS 1012, York University, Lassonde School of
Engineering -->
<html lang="En">
<head>
<meta charset="UTF-8">
<title> EECS1012: Lab 3 - My Kit
</title>
<!-- in Ex1, add a link tag here to connect it to
the css file -->
<link rel="stylesheet" type="text/css"
href="myLearningKit_ex2.css">
<script
src="myLearningKit_ex4.js"></script>
<!-- in Ex2, add a script tag here to connect it
to the js file -->
...
ADVERTISEMENT
ADVERTISEMENT
Latest Questions
- In two or three sentences, explain how you have seen the concept of grit work in...
- You have invested 30 percent of your portfolio in Jacob, Inc., 40 percent is Bella Co.,...
- Parallel Arrays This question is in MindTap Cengage Summary In this lab, you use what you...
- 5. You have invested 30 percent of your portfolio in Jacob, Inc., 40 percent is Bella...
- JAVA Write a test program that prompts the user to enter a series of integers and...
- (2) Cite an example on how organizations like Google, Facebook, Youtube etc collect data for image...
- The legal landscape is perpetually changing. Psychologists must remain abreast of these changes to avoid potentially...
ADVERTISEMENT