I have to create a DOM Tree for class and just wanted to know if I did it correctly before I turn it in. If anyone could confirm for me that it is correct or point out what I did wrong I would appreciate it. Here is the code:
<!DOCTYPE html>
<html lang = "en">
<head>
<title>Lab 2</title>
<link href="lab2.css" type="text/css" rel="stylesheet">
<script src="lab2.js"></script>
</head>
<body>
<h1>Images</h1>
<div id="content">
<img id="display" src="images/blank.gif" alt="Blank Image"><br />
<button onclick="change()" id="changeImage">Display Image</button>
<h2 id="description">The image is blank</h2>
</div>
</body>
</html>
The img and the h2 are children of the div, not siblings.
Also, what happened to the button and the br?
Related
This is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>Abbas Maheryar - Inquiries</title>
</head>
<body>
<center><h1>Inquiries</h1></center>
<h3><u>Use this information to contact me</u></h3>
<div>
<center><p><b>Phone:</b=> 818-857-0846
<p><b>Email:</b></p><a href="mailto:abbasmaheryar#gmail.com?Subject=Service Inquiry"target="_top"><p>abbasmaheryar#gmail.com</p>
</center>
</div>
<div>
<p>Inquiries</p> | <a href="./news.html"><p>News</p>
</div>
</body>
</html>
My problem is that when i try to link my email, it also links Inquiries down at the bottom. What can i do to fix this?
Semantically correct HTML should look like this:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>Abbas Maheryar - Inquiries</title>
</head>
<body>
<center>
<h1>Inquiries</h1>
</center>
<h3><u>Use this information to contact me</u></h3>
<div>
<center>
<p>
<b>Phone:</b> 818-857-0846
</p>
<p>
<b>Email:</b>
<a href="mailto:abbasmaheryar#gmail.com?Subject=Service Inquiry" target="_top">
abbasmaheryar#gmail.com
</a>
</p>
</center>
</div>
<div>
<p>
Inquiries | News
</p>
</div>
</body>
</html>
Your hyperlinks are running together, because you have forgotten to close your email hyperlink with </a>.
<p>abbasmaheryar#gmail.com</p>
You also need to close your news hyperlink, which will cause the same problem with any proceeding hyperlinks. This needs closing as well:
<p>News</p>
Also note that <p> tags should not got within <a> tags, as this is unsupported markup in HTML4, and flaky in HTML5. Instead, you should move your paragraphs to the outside of your links, and structure your two blocks of code like this:
<p>abbasmaheryar#gmail.com</p>
<p>News</p>
The full markup you are looking for is:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>Abbas Maheryar - Inquiries</title>
</head>
<body>
<center>
<h1>Inquiries</h1>
</center>
<h3><u>Use this information to contact me</u></h3>
<div>
<center>
<p><b>Phone:</b> 818-857-0846
<p><b>Email:</b></p>
<p>
<a href="mailto:abbasmaheryar#gmail.com?Subject=Service Inquiry" target="_top">
abbasmaheryar#gmail.com</a>
</p>
</center>
</div>
<div>
<p>Inquiries</p> |
<p>
News
</p>
</div>
</body>
</html>
Hope this helps! :)
The following html intepreted wrongly.
Using debug tool of chrome, the <head> appears inside the <body>.
Why is that happening ?
Code:
<!DOCTYPE html>
<html>
<hed>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</hed>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Result:
https://zoharch.github.io/position/index.html
Because you have a error in the head tag
<hed> should be <head>
</hed> should be </head>
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link href="_css/style.css" rel="stylesheet" />
<title>Position test</title>
</head>
<body>
<div class="block">
<p>this p inside a div</p>
</div>
<table>
<tr>
<td><p>this p inside td</p></td>
<td></td>
</tr>
</table>
<div class="table">
<p>this p inside a div displayed as a table</p>
</div>
</body>
</html>
Your spelling is not correct for head. you wrote hed.
it will be:
<head></head>
It happens because the <hed> tag (misspelling of <head>) is not recognized, so the browser treats it as starting a hed element of unknown type. Since no such element is allowed in a head element, the browser implies the start of a body element, containing all the rest in the document. Before this, it implies an empty head element.
In most situations, this does not really matter, since the division of an HTML document to head and body elements is syntactical and “philosophical”. The meta, link, and title element work normally in practice, even though the browser treats them as being inside body. But of course you should correct the misspellings of the <head> and </head> tags.
it should be like this just copy paste this head and it will be OK :)
<head>
<meta charset="utf-8">
<link href="_css/style.css" rel="stylesheet">
<title>Position test</title>
</head>
In html programming class I tried to make an html file and display two images. For any reason me and my teacher can't determine, there is one image which isn't being displayed.
Could you please let me know why this is happening?
<!DOCTYPE html>
<html Lang="es">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>
<img scr="https://www.sublimetext.com/images/windows_48.png" />
</div>
<div>
<img src="https://www.gstatic.com/images/branding/googlelogo/2x/googlelogo_color_284x96dp.png">
</div>
</body>
you have misspelled src, you have scr
it should be <img src="https://www.sublimetext.com/images/windows_48.png" />
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
even though both the image are showing when I try to save the code its showing an error.
Can anyone help me with it.
Thank you
The only error in your HTML I see, is the missing closing HTML-Tag. Perhaps your "Code Academy" environment is very "picky" and sensible to these kind of errors a classic browser would ignore.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="https://s3.amazonaws.com/codecademy-blog/assets/f3a16fb6.jpg" />
<img src="https://s3.amazonaws.com/codecademy-blog/assets/ninja_zpsa5dbe37a.jpg"/>
</body>
</html>
Hello friends i have created two page one is index.html and second is about.html . I just want to add back button on about.html using jQuery mobile . i have tried it but back button is not working in my code i dont know what is the problem
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="data-add-back-btn ">Back</div>
<div><h1>Page title</h1>
About us</div>
</div>
</body>
</html>
Please help me. Thanks in advance...
You may try creating your back button by using data-rel="back" as follows:
<a data-role="button" data-rel="back">Back</a>
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css" />
<script src="jquery-1.8.2.min.js"></script>
<script src="jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page">
<a data-role="button" data-rel="back">Back</a>
<div>
<h1>Page title</h1>
About us
</div>
</div>
</body>
</html>
Check the section "Back" button links of the online doc for more information: http://jquerymobile.com/demos/1.2.0/docs/pages/page-links.html