I can not open the hyperlink of "elixirs" and "detailed directions", I do not why ,they are all in a file.
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src="drinks.gif">
<p>
Join us any evening for refreshing <a href=“elixir.html”>elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out our <a href = “directions.html”>detailed directions</a>.
Come join us!
</p>
</body>
</html>
Just put single quotes ' on every href
try this
<html>
<head>
<title>Head First Lounge</title>
</head>
<body>
<h1>Welcome to the New and Improved Head First Lounge</h1>
<img src='drinks.gif'>
<p>
Join us any evening for refreshing <a href='elixir.html'>elixirs</a>,
conversation and maybe a game or two of
<em>Dance Dance Revolution</em>.
Wireless access is always provided;
BYOWS (Bring your own web server).
</p>
<h2>Directions</h2>
<p>
You'll find us right in the center of downtown Webville.
If you need help finding us, check out our <a href = 'directions.html'>detailed directions</a>.
Come join us!
</p>
</body>
</html>
Related
I am new to programming, just started with HTML recently, and as I was trying to create a sample website and checking it on validator.w3c it gave me the above error, and I am pretty sure that all the start and end tags are exactly the same count, can someone please help me with this, below is the code iam doing.
<!DOCTYPE html>
<html lang="en">
<title>Pizza</title>
<p><h1>My Favorite Pizza</h1></p>
<p><h2>What is <em>Pizza</em>?</h2>
<p>a dish of Italian origin, consisting of a flat round base of dough baked with a topping of tomatoes and cheese, typically with added meat, fish, or vegetables.</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Eq_it-na_pizza-margherita_sep2005_sml.jpg/330px-Eq_it-na_pizza-margherita_sep2005_sml.jpg" alt="Pizza">
<p><h3>What are the types of Pizza?</h3></p>
<ol>
<li>Neapolitan Pizza.
<li>Chicago Pizza.
<li>New York-Style Pizza.
<li> Sicilian Pizza.
<li> Greek Pizza.
<li>California Pizza.
<li>Detroit Pizza.
<li>St. Louis Pizza.
</ol>
<p><h3>examples of Pizza types</h3></p>
<img src="https://image.shutterstock.com/image-photo/pizza-cheese-seafood-260nw-1099161842.jpg" alt="Meat Pizza">
<img src="https://image.shutterstock.com/image-photo/pizza-ham-mozzarella-tomatoes-radicchio-260nw-1085673227.jpg" alt="Vegetables Pizza">
<img src="https://image.shutterstock.com/image-photo/supreme-pizza-pepperoni-mushrooms-mozzarella-600w-1918786631.jpg" alt="Pepperoni Pizza">
<p><h4>Common Places that sells pizza</h4></p>
<p><a href= https://www.instagram.com/pizzastation.eg/>Pizza Station</a></p>
<p>Pizza Hut</p>
<p>Domions Pizza</p>
<p>Papa Johns</p>
</body>
Also I made this on my own computer how can I have someone else able to view it?
Try this code below. I have formatted it and fixed the errors you had.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pizza</title>
</head>
<body>
<h1>My Favorite Pizza</h1>
<h2>What is <em>Pizza</em>?</h2>
<p>
a dish of Italian origin, consisting of a flat round base of dough baked
with a topping of tomatoes and cheese, typically with added meat, fish, or
vegetables.
</p>
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/Eq_it-na_pizza-margherita_sep2005_sml.jpg/330px-Eq_it-na_pizza-margherita_sep2005_sml.jpg"
alt="Pizza"
/>
<h3>What are the types of Pizza?</h3>
<ol>
<li>Neapolitan Pizza.</li>
<li>Chicago Pizza.</li>
<li>New York-Style Pizza.</li>
<li>Sicilian Pizza.</li>
<li>Greek Pizza.</li>
<li>California Pizza.</li>
<li>Detroit Pizza.</li>
<li>St. Louis Pizza.</li>
</ol>
<h3>examples of Pizza types</h3>
<img
src="https://image.shutterstock.com/image-photo/pizza-cheese-seafood-260nw-1099161842.jpg"
alt="Meat Pizza"
/>
<img
src="https://image.shutterstock.com/image-photo/pizza-ham-mozzarella-tomatoes-radicchio-260nw-1085673227.jpg"
alt="Vegetables Pizza"
/>
<img
src="https://image.shutterstock.com/image-photo/supreme-pizza-pepperoni-mushrooms-mozzarella-600w-1918786631.jpg"
alt="Pepperoni Pizza"
/>
<h4>Common Places that sells pizza</h4>
<p>Pizza Station</p>
<p>Pizza Hut</p>
<p>Domions Pizza</p>
<p>Papa Johns</p>
</body>
</html>
<!-- Also I made this on my own computer how can I have someone else able to view it? -->
The errors in your code and how I fixed them:
Your heading tags (h1, h2, etc) should not be nested inside <p> tags. In HTML, <p> means paragraph, and will make the font-size 16px, which you don't want in a heading. I have removed the <p> tags from all of your headings as they aren't supposed to be there.
On line 24, you had the following code: <p><a href= https://www.instagram.com/pizzastation.eg/>Pizza Station</a></p>. Since you forgot to put the URL in quotation marks, it was considered a self closing tag because it had this format: <tag /> (a normal tag with a / after it), which is what self closing tags look like. Here are some examples: <br />, <meta />. I added quotation marks around the url so that it acts like a normal anchor tag.
I put the <title> inside a <head> tag. The head tag should contain the following tags (if you're using them), not all of these are mandatory to have): <link>, <title>, <meta>, <style>, <script>, etc.
For others to view your website, you need to publish it to a web host. InfinityFree is a good one, but it could be a bit complicated for your first website. I would recommend W3Schools Spaces.
Good luck further learning HTML, you have started off well and are doing a good job :)
<p><h2>What is <em>Pizza</em>?</h2>
you haven’t closed tag here .
Close it in the end
Here is the HTML code :
<!DOCTYPE.html>
<html>
<head>
<title>bob is a big fat baby</title>
</head>
</body>
this is my first webpage
<h1>this is u are bob baby<h1>
<h2>how exciting<h2>
<ol>
<ol>bob is a big fat baby<ol>
<ol> he really needs a life<ol>
<p>spinz.io the very fun game<p>
<p><a href="spinz.io</a></p>
spinz.io a very fun game
<p> please be honest and put in the box yes or no if u are bob baby or not <p>
What is the prbolem in this? When I tried it, all of the text was slanted.
Also, there was no text box.
If there are any other problems, let me know.
Your HTML code is likely slanted because the HTML parser is getting confused. This is because your code contains invalid markup. You can read up on the basics of HTML to learn the required HTML structure, and you can validate that your code correctly follows the structure with the W3 Markup Validator.
Here's a short list of some of the things wrong with the above code:
!DOCTYPE html should have a space rather than a dot.
</body> should be <body> -- the slash denotes that you are closing the tag, and you haven't opened <body> yet.
You need to close (nearly) all tags such as <h1></h1>.
When linking to an external resource (or website), you need to preface the link with the protocol. In this case, that's http://www to link to the full spinz.io with http://www.spinz.io.
You need to close both </body> and </html>.
To help get you started, here's the above code with correct markup:
<!DOCTYPE html>
<html>
<head>
<title>bob is a big fat baby</title>
</head>
<body>
<h1>this is my first webpage</h1>
<h2>this is u are bob baby</h2>
<h2>how exciting</h2>
<ol>
<li>bob is a big fat baby</li>
<li>he really needs a life</li>
<li>spinz.io the very fun game - spinz.io</li>
</ol>
<p>please be honest and put in the box yes or no if u are bob baby or not</p>
</body>
</html>
Hope this helps! :)
i been doing a codecadmey course on html one of the task were to make the code so it follows the rules of the The World Wide Web Consortium by 2 space indents.I asked a few people where to put the indentations but every time i try i still cant proceed to the next task. here my code below can anyone help me to put the indentations.!!!
<!DOCTYPE html>
<html>
<head>
<title>Animals Around the World</title>
</head>
<body>
<h1> The Brown Bear </h1>
<p> The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear. </p>
Learn more
<p> The following are subspecies of bears: </p>
<ul>
<li> Arctos </li>
<li> Collarus </li>
<li> Horribilis </li>
<li> Nelsoni (extinct) </li>
</ul>
<p> The following countries have the largest populations of brown bears: </p>
<ol>
<li> Russia </li>
<li> United States </li>
<li> Canada </li>
</ol>
<a href="https://en.wikipedia.org/wiki/Brown_bear"target="_blank">
<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt="bear photo"/></a>
</body>
</html>
Check your spacing. For instance on the link below you should have a space between the href and the target.
<a href="https://en.wikipedia.org/wiki/Brown_bear"target="_blank">
Should be
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">
<!DOCTYPE html>
<html>
<head>
<title>Animals Around the World</title>
</head>
<body>
<h1> The Brown Bear </h1>
<p> The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently "Least Concern." There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.
</p>
Learn more
<p> The following are subspecies of bears: </p>
<ul>
<li> Arctos </li>
<li> Collarus </li>
<li> Horribilis </li>
<li> Nelsoni (extinct) </li>
</ul>
<p> The following countries have the largest populations of brown bears: </p>
<ol>
<li> Russia </li>
<li> United States </li>
<li> Canada </li>
</ol>
<a href="https://en.wikipedia.org/wiki/Brown_bear" target="_blank">
<img src="https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg" alt="bear photo" /></a>
</body>
</html>
The speediest solution is to use the HTML Tidy tool which you may find available online so that you may download and install it. But, there are also websites that make that tool freely available for immediate use, such as codepen.io. But, that is actually more effort than you need to expend, given that a tidy tool exists at StackOverflow as part of the functionality that the OP uses to display the HTML code in question. If the OP were to click the option to edit the posed question, a link is provided ("edit the above snippet") that allows one to edit the code. If you click that link, you will note on the left side a tidy tool that works on HTML, CSS or JavaScript. So, you may choose to spend your time efficiently by utilizing this tool to have the desired indented code or else visually scan each line and character of the code to figure out for yourself where the spacing needs adjustment.
I'm a student in the process of learning HTML and have been having difficulty positioning a div tag. When I try to change the position (I need it to be "position:fixed;") it doesn't move. What I've gathered from other threads is that the div tag is positioning itself relative to the body, however if it has the position set to fixed, shouldn't it be fixed?
Note: This is all messy because I am still trying to learn the language. I included the entire HTML file just in case something else is causing the error. There is no CSS file involved yet in the document.
Below is the part I am trying to get to work. Thanks in advance.
a{position:fixed;}
<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Home
Portfolio
Links
Contact
</div>
body{font-fmaily:Times New Roman;}
h1,p{text-align:center;}
a{position:fixed;}
<!DOCTYPE html>
<html>
<head>
<title>Jem Jolly</title>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
<img src="Random Banner.png" alt="Random Banner" style="position:fixed;left:130px;top:43px"/>
</div>
<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Home
Portfolio
Links
Contact
</div>
<div>
<div style="background:#A7DbD8;position:fixed;height:300px;width:600px;top:175px;left:20px;border:3px solid #19B3B0">
<h1 style="font-family:cooper black;">JEM JOLLY</h1>
<p>JEM JOLLY Founded in 2000, Jem Jolly started as a small, family-owned jewelry store. All of our products were hand-crafted by local artists, metalsmiths, and bead workers. Since our humble beginnings, we have grown into a nationwide company with distributors, retailers, and other wholesalers representing us and our products in 20 states, as well as Canada and the UK. Check out our retailer list <insert link to retailer page once it is created> for locations near you.</p>
<p>We also take custom orders. Feel free to send us specific instructions for custom orders through our contact form <insert link to contact page once it is created>, if you are interested in a unique item for that special someone!</p>
<p>Jem Jolly is pleased to be your supplier of finely crafted, high-quality jewelry that is timeless, eye-catching, and unlike anything you've seen before.
</p>
</div>
</div>
<div>
<div style="background:A7DbD8;position:fixed;height:240px;width:320px;top:175px;left:640px;border:3px solid #19B3B0">
<video width="320" height="240" controls>
<source src="intermediate_web_design_U4L3_vid 10-39-13.mp4" type="video/mp4"></source>
</video>
</div>
</div>
<div style=width:500px;height:100px; position: relative;">
<img src="rsz_3logo.png" alt="Random Logo" style="left:20px;top:43px"/>
</div>
</body>
</html>
You have misspelled the word position
CODE
<div style="background:#A7DbD8;positon:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Fix to
<div style="background:#A7DbD8;position:absolute;left:50px;height:25px;width:500px;border:3px solid #19B3B0">
Are you working with some kind of an editor?
If you are working with just notepad you are going to get mad with those short of tiny errors.
Get yourself a decent editor...
Also, you don't need all of those menu items in fixed position, its enough that the parent element is fixed.
I understand that it takes time for Google to show rich snippets for a website. But, I want to make sure that I'm marking up my structured data correctly in the mean time. Is the following code okay for a review? Can it be done better?
<main itemscope itemtype="http://schema.org/Review">
<meta itemprop="inLanguage" content="en-CA">
<article itemprop="reviewBody">
<header>
<img itemprop="thumbnailUrl" src="/review/pushmo.jpg" alt="Pushmo">
<h1 itemprop="name"><span itemprop="itemReviewed" itemscope itemtype="http://schema.org/Thing"><span itemprop="name">Pushmo</span></span> Review</h1>
<h2 itemprop="headline">This sumo wrestling cat has children to rescue</h2>
<p>Reviewed by <span itemprop="name">A.J. Maciejewski</span><meta itemprop="url" content="http://example.com/profile/crazyaj"> on <time itemprop="datePublished" datetime="2014-09-03T20:33:03-07:00">September 3, 2014</time></p>
<meta itemprop="description" content="Review for Pushmo on 3DS. This sumo wrestling cat has children to rescue. Pushmo proves that Nintendo still has the ability to produce great new properties.">
<meta itemprop="keywords" content="Review,3DS,Pushmo">
</header>
<p>blah blah blah</p>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<span itemprop="ratingValue">8.4</span> <small>out of <meta itemprop="worstRating" content="1"><span itemprop="bestRating">10</span></small>
</div>
</article>
</main>
As a side note, I noticed when I search for "review site:example.com" the rich snippets appear but they don't when I don't use "site:example.com". Does anyone know why this is?
Thanks again for reading. Any help would be greatly appreciated.
Apart from the following points, your use of HTML5, Microdata and schema.org looks good to me.
When the value is a URL, you must use link instead of meta. So it should be
<link itemprop="url" href="http://example.com/profile/crazyaj">
As value for itemReviewed, you might want to use a more specific type than Thing. For Pushmo, it would be SoftwareApplication (the subtype VideoGame will probably be added soon, it’s already proposed and discussed).
You should not use h2 for a subtitle. This was possible with the hgroup element, but as hgroup is no longer part of HTML5, this would now create a wrong document outline. Instead, simply use a div/p for the subtitle.