My class was asked to use HTML5, not CSS, to create this web page.
Question: I have two h2s, I read somewhere that this is legal and two sets of "unordered lists", but they are not lining up. I mean lining right under each other: example
Confusion
aaa
bbb
ccc
Calm
abc
bca
bac
They are lining up cantilever (?). The Calm header & its lists are more to the right. I've researched several sites and have not come up with why this is happening. I appreciate your help and insight.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Serenity</title>
<style type="text/css">
body
{
background-image:url("images/bg-ocean-body.jpg");
background-repeat:no-repeat;
background-size: cover;
}
</style>
<h1 span style="text-align:center; color:green;">Achieving Calm Amid<span style="color:black"> Confusion</h1>
<h2>Confusion</h2>
<ul>
<li>Government Shutdown</li>
<li>"do nothing" congress</li>
<li>bridgegate, sandygate</li>
<li>Putin, Sochi</li>
<h2 span style="color: green; text-align:left;">Calm</h2>
<ul>
<li>wipe away stress</li>
<li>gain mental/emotional balance</li>
<li>anxiety decreases</li>
<li>develop perspective</li>
</ul>
</head>
</html>
You are adding <span> tags in the wrong place. <span> is a separate tag, not an attribute of <h2>.
You are nearly using <span> correctly around confusion, for example, but you are not closing it with </span>.
I believe you're looking to do something like:
<h1><span style="text-align:center; color:green;">Achieving Calm Amid</span><span style="color:black"> Confusion</span></h1>
Also, you need to close your first <ul> tag with </ul>.
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 am just using basic HTML - with no Javascript, XML, CSS etc. I would like to find the instances of "--" and replace them with an 'em dash'. My code so far is:
<!DOCTYPE html>
<html>
<center>
<head>
<title>TREASURE ISLAND</title>
</head>
<header>
<h1>TREASURE ISLAND</h1>
<h3>by Robert Louis Stevenson</h3>
<h3>PART ONE--The Old Buccaneer</h3>
<h4>Chapter 1--The Old Sea-dog at the Admiral Benbow</h4>
</header>
</center>
<body>
"Fifteen men on the dead man's chest -- Yo-ho-ho, and a bottle of rum!"
</body>
<Style>
Body {
margin-left:20%;
margin-right:20%;
}
<Style/>
</html>
I have searched "find and replace, HTML" on Google but all the results talk about using Java. Can anyone offer some hints on how to achieve this, or improve my code in general?
Your question states you are not using JavaScript and not that you do not want to use it.
I don't see how this can be done without some kind of DOM manipulation which is beyond the scope of basic HTML.
If you are willing to use JavaScript you can simply add this code to your webpage.
(function() {
var str = document.getElementById("Body").innerHTML;
var res = str.replace("--", "—");
document.getElementById("Body").innerHTML = res;
})();
<center>
<header>
<h1>TREASURE ISLAND</h1>
<h3>by Robert Louis Stevenson</h3>
<h3>PART ONE--The Old Buccaneer</h3>
<h4>Chapter 1--The Old Sea-dog at the Admiral Benbow</h4>
</header>
</center>
<section id="Body">
"Fifteen men on the dead man's chest -- Yo-ho-ho, and a bottle of rum!"
</section>
The text-align:center is not working. Please help me out. Why is it not working?
That's the HTML below:
<!DOCTYPE html>
<html>
<head>
<title>Wheat and Barley</title>
</head>
<body style="font-family:Helvetica;">
<div style="display:inline-block;">
<h1 style="font-weight:bold; text-align:center; background-color:blue;">
Wheat
</h1>
</div>
<p>Wheat is a cereal grain...</p>
<p>This grain...</p>
</body>
</html>
Make use of center tag
Surround the div like this -
<center><div> ... </div></center>
It works, the color will stay behind the text only! Also it'd be centered!
Thanks.
Text align work fine, but display inline-block elements are like inline elements but they can have a width and a height.
If you don't assign width the div as wide as the text.
Simply remove inline-block, div element is already display block.
<!DOCTYPE html>
<html>
<head>
<title>Wheat and Barley</title>
</head>
<body style="font-family:Helvetica;">
<div><h1 style="font-weight:bold; text-align:center; background-color:blue;">Wheat</h1></div>
<p>Wheat is a cereal grain, originally from the Levant region of the Near East but now cultivated worldwide. In 2013, world production of wheat was 713 million tons, making it the third most-produced cereal after maize (1,016 million tons) and rice (745 million tons). Wheat was the second most-produced cereal in 2009; world production in that year was 682 million tons, after maize, and with rice as a close third.</p>
<p>This grain is grown on more land area than any other commercial food. World trade in wheat is greater than for all other crops combined. Globally, wheat is the leading source of vegetable protein in human food, having a higher protein content than other major cereals, maize (corn) or rice. In terms of total production tonnages used for food, it is currently second to rice as the main human food crop and ahead of maize, after allowing for maize's more extensive use in animal feeds. The archaeological record suggests that this first occurred in the regions known as the Fertile Crescent.</p>
</body>
</html>
If possible don't use inlene CSS but in external file. For reference:
http://www.w3schools.com/css/css_howto.asp
You can Add width:100% to h1 style and can remove div..
<h1 style="font-weight:bold; text-align:center; background-color:blue; width:100%">Wheat</h1>
Here is JSFIDDLE
EDIT :
Do you want like this ? Just Check Updated JSFIDDLE
Thanks to everybody who has so far answered this question. #HMGtbOfficial's post proved most helpful among all others. As per his suggestion, I put the <div> in the center. Hopefully, this works! A big, fat thanks to him. Thanks for helping me out!
I rewrote the HTML code as such:
<!DOCTYPE html>
<html>
<head>
<title>Wheat and Barley</title>
</head>
<body style="font-family:Helvetica;">
<div style="display:inline-block; text-align:center;">
<h1 style="font-weight:bold; background-color:blue;">
Wheat
</h1>
</div>
<p>Wheat is a cereal grain...</p>
<p>This grain...</p>
</body>
</html>
Which is right? This:
<h2>heading 2</h2>
<p>link 1</p>
<h2>heading 2 </h2>
<p>link 2</p>
<h2>heading 2 </h2>
<p>link 3</p>
<h2>heading 2 </h2>
<p>link 4</p>
or this:
<h2>heading 2</h2>
link 1
<h2>heading 2 </h2>
link 2
<h2>heading 2 </h2>
link 3
<h2>heading 2 </h2>
link 4
Both are right, both will validate
Both are fine but having floating inline elements bothers me for some reason
#Jitendra, I agree with your point .. but only if you are using strict.dtd (HTML/XHTML)
According to W3C recommendation(for strict dtd) .. the tag <a> must be used in a block element.
Look at the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
<title>example</title>
</head>
<body>You don't have sufficient privileges to access the page.Click here to go back.
</body>
</html>
The above code produces error while doing HTML validation .. saying
document type does not allow element "A" here; missing one of "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS" start-tag
Making the dtd as loose/transitional you can get rid of the error .. For Strict HTML or Strict XHTML this error is obvious ..
Hope it helped .. :)
regards-Infant Pro
While I have never cared about the "non-block in block element" rule when writing HTML codes, the body element is supposed to be a block element. (I've forgotten where I read it tho') i.e. your both HTML code fragments are right.
Neither of them are truly 'right' semantically :-)
Put them as a list and try to avoid the target="_blank". There's probably no reason to put a <p> around each <a> (just ensure that the whole lot is in a block level element if you want to validate with strict - good point infant programmer).
If you want the <a> to act as block level element and thus remove the <p> just use
#somewrapper a
{
display: block;
}