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! :)
Related
A little background about what I am trying to do— As of recent I have started to read Jon Ducketts “HTML&CSS” book which I am enjoying thoroughly. I finished HTML and now am beginning the CSS side of the book.
What I am trying to accomplish is making a website that shows everything the book has covered and essentially have a navigation bar to give users easier access to go throughout my website to learn about topics that are not yet clear to them (myself).
The problem is that while I am trying to style my text color it isn’t changing color and for the life of me I cannot figure out why.
Is the problem within my link with the wrong file paths I specified in the head or is it a problem with how I have my classes set up in HTML and CSS?
My CSS code is at the bottom of the page that I tried to create classes with. Since you need a “10 reputation” to post photos I’ll be writing my HTML / CSS file name and folder path here.
Name- newWebsiteFinalCSS.css
Folder Path- C:\Users\MyName\Desktop\Website
Name- newWebsiteFinal.html
Folder Path- C:\Users\MyName\Desktop\Website
.headingcolors {
color: red;
}
.p {
color: red;
}
<!doctype>
<html>
<head>
<title>Final HTML CSS Website</title>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
</head>
<!-- This section i want to create a link to different topics within my own website so it is easier to go throughout the site and
only look at things you want to be reasearching about if you come across a problem with a topic about HTML or CSS. -->
<header class="topnav">
Home
Text
Lists
Links
Images
Tables
Forms
Extra Markup
</header>
<!-- insert navigation bar here -->
<body>
<h1 id="top" class="headingcolors"> Welcome to my first Web Page created with HTML & CSS </h1>
<p>//// During the process of making this website, I will be showing you how I learned to do simple webpage making with very easy to understand the code. This code includes languages called HyperText Markup Language (otherwise known as HTML), and a styling
language called Cascading Style Sheets (otherwise known as CSS). This website was made possible by reading a book called <i>HTML&CSS; design
and build websites</i> by Jon Duckett. I am a fan of Jon Duckett's book and it made me feel excited to read something that was so interesting and brought color to such a fundamental topic of learning a computer language. This website will be a work in
progress with perfecting every single topic covered in HTML as well as styling my webpage and making it a professional looking website that any CEO or businessman would be interested in reading. I hope you enjoy browsing casually throughout my website and enjoying some of the topics as much as I did learning about them! ////</p>
<h2 id="text" class="p">Texts</h2>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h3 id="lists" class="p">Lists</h3>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h4 id="links" class="p">Links</h4>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h5 id="images" class="p">Images</h5>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h6 id="tables" class="p">Tables</h6>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h7 id="forms" class="p">Forms</h7>
<p>This is some text, hopefully i can figure out how to add color.</p>
<br>
<br>
<br>
<br>
<br>
<br>
<h8 id="extramarkup" class="p">Extra Markup</h8>
<p>This is some text, hopefully i can figure out how to add color.</p>
Top of Webpage
</body>
</html>
<link type="text/css" href="Website/newWebsiteFinalCSS.css" rel="stylesheet">
is relative to the html file.
If the html file is in C:\Users\MyName\Desktop\Website.
Then the link is pointing at C:\users\MyName\Desktop\website\Website\newWebsiteFinalCSS.css
It should be
<link type="text/css" href="newWebsiteFinalCSS.css" rel="stylesheet">
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>
In terms of accessibility, is it OK to have something like:
<html lang="en">
<body>
<h2 lang="fr">Imagine this is in French</h2>
<h2 lang="en">English headline</h2>
<h2 lang="en">English headline</h2>
<h2 lang="fr">Imagine this is in French</h2>
</body>
</html>
Please note this is just a rough and ready example to demonstrate, I don't need HTML validation.
As you can see from the example, I assume that the ideal scenario would be to have the above but without lang definitions for the English headlines since it's given by the overall document. But is there any harm in defining them from an accessibility point of view?
The lang attribute can and should be used to indicate language changes within a document. This allows assistive technology - like the screen readers - to change their enunciation to read the text in an understandable accent.
Your example is ok, but unnecessary because the base language of the document is English, you only need to indicate the changes to other languages (the scope is hierarchical - i.e. it only applies to the element and its children).
<html lang="en">
<body>
<h2 lang="fr">Parlez-vous Francais?</h2>
<h2>English headline</h2>
<h2>English headline</h2>
<h2 lang="de">Sprechen Sie Deutsch?</h2>
</body>
</html>
Here is a W3C reference that supports this usage http://www.w3.org/International/questions/qa-lang-why.en
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>.
I am writing HTML(5) which, on a few different pages, has a number of sections which contain a header (represented by a grey bar). This is a common pattern except for 1 page where this grey bar contains some navigational aids, but the header (as in the h1) is not in the grey bar but beneath it.
In terms of writing semantic HTML5 is it a violation to have something like:
<header><a>Go Back<a/></header>
<h1>This is the header</h1>
Or should it be:
<div class="nav-links"><a>Go Back</a></div>
<header><h1>This is the header</h1></header>
The latter requires much more CSS to handle the edge case so if the former is not a violation of HTML then I prefer it.
Does the first way violate HTML5 semantics?
It is valid. You can use w3c validator for these things.
using
<!DOCTYPE html>
<head><title></title></head>
<body>
<header><a>Go Back</a>
</header>
<h1>This is the header</h1>
</body></html>
Validates so it means it's valid by W3C standards.