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 1 year agoRelated 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"> </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"...
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
Latest Questions
- Baked potatoes are normally wrapped in aluminum foil. How does this affect the cooling of the...
- What is the process to obtain biomass production
- A labor market has 50,000 people in the labor force. Each month, a fraction p of...
- A road with a radius of 72 m is banked so that a car can navigate...
- 1) If you had not dried the solid, would the calculated percent yield have been higher,...
- Two structures of alanine can be drawn that have a net charge of zero, but the...
- Co(II) was used as an internal standard to analyze a sample of Ti(IV) with atomic absorption...
ADVERTISEMENT