HTML code indentation issues - html

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.

Related

No P element but an end tag seen

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

Usage of semantic HTML tags in regards to lists/overview

I just recently started learning semantic HTML tags and I'm a bit confused about when to use section or article when I want to make an overview of the whole website or just a list of contents.
For example, how would you structure something like this with semantic tags. Each item of this list would have their own page and a link in the main nav bar. And each of these pages would contain couple of blog posts inside.
<main>
<section>
<h2>Contents of this site:</h2>
<p>Here is a quick summary of what you can see on this website.</p>
<ul>
<li>
<h3>About me</h3>
<p>Learn more about the author of this site.</p>
</li>
<li>
<h3>Favorite music</h3>
<p>Here I will tell you about some of my favorite musicians.</p>
</li>
<li>
<h3>Favorite games</h3>
<p>Here I will tell you about some of my favorite games.</p>
</li>
<li>
<h3>Favorite books</h3>
<p>Here I will tell you about some of my favorite books.</p>
</li>
<li>
<h3>Favorite movies</h3>
<p>Here I will tell you about some of my favorite movies.</p>
</li>
<li>
<h3>Favorite recipes</h3>
<p>Here I will tell you about some of my favorite recipes.</p>
</li>
</ul>
</section>
</main>
Would this be the best practice or should I wrap each <li> inside of an article? Or should I just leave out the unordered list and just use articles only instead?
Thank you in advance for help explaining this.
If you want to make use of semantic <article> tag in this code, you can wrap your <h3> & <p> tag with <article> tag instead of wrapping <li> with <article> tag, and it won't work as you expected.
That all looks pretty good to me.
<section> is best used to divide up a page when you have different topics or different things to highlight. Say for example you have a Home page with a general summary at the top and a contact form lower down then a call to action lower down. You might want to use three sections for that. But, for semantics... sections are generic and there may be a tag which suits better and is more specific for the info you're displaying (see the link below).
<article> would be really good to use as a wrapper around the actual text for each blog post. Think of this one as highlighting the individually composed or unique info. News articles, reviews etc.
Info : https://css-tricks.com/how-to-section-your-html/

Why can't I open the hyperlink

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>

HTML lists not visible

I have no clue why my page doesnt display the point i want to be in lists as lists. It just gives out all the points between the li tags in the same line.
also can i link the same css files to all my text files?
<!DOCTYPE html>
<html>
<head>
<link href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/shift.css" rel="stylesheet">
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="main.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>eligiblitypage</title>
</head>
<body>
<h1>Are You Eligible?</h1>
<p>It is great that you took the first step. Yes thinking about
getting transferred. But before proceeding, checks out if
you are eligible for the college you are applying to.</p>
<div class="first">
<div class="info">
<ol>
<li>The first step would be to:
<ol>
<li>Make a list of colleges which you find to be a good match for you (yes Ivies also take transfers!)</li>
<li>If you dont know much about colleges in the US, exploring the CollegeBoard website would be
the first step for you College Search</li>
<li>Filter according to your needs in the website and then finalize some colleges for which you are
eligible.</li>
</ol></li>
<li>Next Steps!
<ol><li>Now that you have got a list of the colleges, visit the college websites and explore the various
oppurtunities you may have in that college.</li>
<li>Also look throught the transfer requirements to see if the college has some special requirements
for transfer students</li>
<li>Attending college in the US may get costly. Try to look at what the cost of attending college would be. If you are an intenrational student
,check out the financial aid page and also the scholarships offered if any.</li>
</ol></li>
<li>Final Steps
<ol>
<li>Dont forget to check on the website if the colleges in your list offer your desired major</li>
<li>Also check the college coursework and see whether you can handle it or not</li>
<li>Now that you know about your eligibility, you can move on to the <a href="#">application process imformation<a></li>
</ol></li>
</ol>
</div>
</div>
</body>
</html>
Also can i add div tags in individual li tags?
Close the last <a> tag, and everything should be fixed.
Change
<li>Now that you know about your eligibility, you can move on to the <a href="#">application process imformation<a></li>
to
<li>Now that you know about your eligibility, you can move on to the application process imformation</li>
Edit:
Here's the complete working body with the one change above, as well as reformatted:
<body>
<h1>Are You Eligible?</h1>
<p>It is great that you took the first step. Yes thinking about
getting transferred. But before proceeding, checks out if
you are eligible for the college you are applying to.
</p>
<div class="first">
<div class="info">
<ol>
<li>
The first step would be to:
<ol>
<li>Make a list of colleges which you find to be a good match for you (yes Ivies also take transfers!)</li>
<li>If you dont know much about colleges in the US, exploring the CollegeBoard website would be
the first step for you College Search
</li>
<li>Filter according to your needs in the website and then finalize some colleges for which you are
eligible.
</li>
</ol>
</li>
<li>
Next Steps!
<ol>
<li>Now that you have got a list of the colleges, visit the college websites and explore the various
oppurtunities you may have in that college.
</li>
<li>Also look throught the transfer requirements to see if the college has some special requirements
for transfer students
</li>
<li>Attending college in the US may get costly. Try to look at what the cost of attending college would be. If you are an intenrational student
,check out the financial aid page and also the scholarships offered if any.
</li>
</ol>
</li>
<li>
Final Steps
<ol>
<li>Dont forget to check on the website if the colleges in your list offer your desired major</li>
<li>Also check the college coursework and see whether you can handle it or not</li>
<li>Now that you know about your eligibility, you can move on to the application process imformation</li>
</ol>
</li>
</ol>
</div>
</div>
</body>

Structured Data for Reocurring Event

I'm the webmaster for smctheatre.com. We're a community theatre that puts on a handful of plays each year. I'm adding to my toolbox with learning structured data. Microformat, microdata, or RDFa, I don't have any strong preference for one over another. I do like the syntax of RDFa Lite and microfomat over microdata and full-blown RDFa.
The only thing I haven't been able to get an answer to is how to mark up an event that occurs on multiple dates, and sometimes at different times.
Here's a trimmed down snippet from the site:
<article>
<header>
<h1>Play Name</h1>
<div class="addthis_toolbox">...</div>
</header>
<aside>
<h2>Dates</h2>
<ul>
<li>May</li>
<li>Fridays 17 & 24</li>
<li>Saturdays 18 & 25</li>
<li>Sundays 19 & 26</li>
<li>Monday 27</li>
<li>All shows start at 7:30 PM</li>
</ul>
<h2>Tickets</h2>
<ul>
<li>Adult $8.00</li>
<li>Child (5-17) $5.00</li>
</ul>
<h2>Directed By</h2>
<ul>
<li>Director Name</li>
</ul>
</aside>
<div>
<p>Summary of a theatre play....</p>
</div>
</article>
Duration of plays are typically two hours, but given that these are live performances, there's no hard and fast ending time.
How do I mark up the content to indicate the dates and times?
Seriously doubt there's an example of exactly what you want, but microformats are flexible and I think I've found enough to get you started:
<div class="vevent">
<a class="url" href="http://conferences.oreillynet.com/pub/w/40/program.html">
http://conferences.oreillynet.com/pub/w/40/program.html
</a>
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2005-10-05">October 5</abbr>-
<abbr class="dtend" title="2005-10-07">7</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</div>
The example below uses multiple dates at the same venue; swap out the div for your article and looks like you're in business. easily make your header the summary, and put the description class on your p for summary...even though that sounds backwards, it's what you want.
How much further you want to take it is really up to you. I see where you could work start times, possibly a url....and also more microformats, to get even more goodness out of them. You should check out the wiki, it's full of great info, and examples from which you can and should pilfer.
http://microformats.org/wiki/hcalendar