How do I fix the encoding of my webpage. The webpage can be found at
cis.csuohio.edu/~daloucks/test.html
I'm doing this for a class and we are required to eliminate all the warnings. Once I add the meta tag I get stray tag errors. I was told to change the encoding in my editor to UTF-8 (I'm using notepad++), this added more errors. I used plain notepad and this also didn't solve the problem.
i.imgur.com/N6jjOfM.png These are the errors I am getting, after I changed test to text. I'm using a validator at https://validator.w3.org and that is giving me the warnings for the encoding of the document.
Change your document to look like this and then revalidate
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Test </title>
<style>
body{
background-color: #d0e4fe;
}
h1{
color: orange;
text-align: center;
}
p{
font-family: "Times New Roman";
font-size: 20px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
</body>
</html>
Related
So I am having an issue with setting up my styles.css file and attaching it to my index.html file.
For some reason the body in the css file is overriding the h1 css.
Here's the code, and sorry if there's any glaring mistakes. I am brand new to this stuff.
h1 {
font-style: Georgia;
font-size: 48px;
color: red:
}
body {
font-style: Georgia;
font-size: 14px;
}
and my html index
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="styles.css">
<head>
<title>rdhamill's personal github page. </title>
</head>
<h1> Github.io page for Rdhamill </h1>
<body>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
Edit: thanks for the help and sorry for the obvious issues!
Firstly, your h1 tag is outside the body, put that inside.
And in addition to that put the link tag inside the head tag.
And in addition to that remove : from the end of the color attribute in h1 style.
All your elements need to be inside the head or body tags. See the snippet below to see where your elements belong. The text inside the p tag is just to clean it up a bit.
edit: as per Dude Coder's above comment, fixed the CSS declaration. Make sure they always end in semi-colons, instead of colons.
Also changed font-style to font-family, which only needs to be set on the body (in this case, as all descendants will inherit it until it's changed elsewhere).
h1 {
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
<p>This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.</p>
</body>
</html>
Your HTML is too complex for an old browser to understand and render correctly. <h1> should be placed inside <body>. <link> should be placed inside <head>. Your CSS also has a typographical error. Either drop the final colon in color: red or type a semicolon; a colon won't work.
Back to the main subject:
The browser (a modern one) automatically places <h1> inside <body> and <link> inside <head>. And according to W3C, when you define the same style for an element and its child, the style defined for the child has priority over that defined for the parent element. Therefore, your body rule is not overriding h1. The problem is typographical: you typed a : instead of a ;
h1 {
font-family: Georgia;
font-size: 48px;
color: red;
}
body {
font-family: Georgia;
font-size: 14px;
}
<!DOCTYPE html>
<html>
<head>
<title>rdhamill's personal github page. </title>
</head>
<body>
<h1> Github.io page for Rdhamill </h1>
This is where I plan on adding a list of projects, accomplishments, contact info and career goals. So stay tuned, and thanks for all the fish.
</body>
</html>
One a side note: I replaced font-style with font-family. To specify the font, use font-family. font-style is used for enhancements (italic, underline, etc...).
I know it's been asked and I've compared my code to what others have posted but I haven't had any luck fixing it!
My assignment requires that I use XHTML and external style CSS.The HTML works but the CSS is not being applied to the webpage. I've tried changing the DocType. Both documents are in the same folder.
This is what I have...
HTML (index.html)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Homepage</title>
<link rel="stylesheet"
type="text/css"
href="style.css" />
</head>
<!-- etc... -->
CSS (style.css)
body {
background-color: #EEE;
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3 {
margin: 0;
}
a {
text-decoration: none;
color: #000;
}
#container {
background-color: #FFFFFF;
width: 800px;
margin-left: auto;
margin-right: auto;
}
/* etc... */
I finally decided to retype the whole head and it solved the problem. So I'm assuming the problem was invisible characters in the the link tag. This must have happened when I switched from textEdit to Sublime. Thanks for trying to help.
This part <?xml version="1.0" encoding="UTF-8"?> is making your file an xml file. Just erase that.
This link is pointing to a style.css in the same folder that your html is
<link rel="stylesheet" type="text/css" href="style.css" />
You will need to make sure that your file is there.
Your link must have media declared. Like this specification
Well...as pointed by the guy in the comments, sorry guy, i'm new at this. You could try some standard headers http://www.w3.org/QA/2002/04/valid-dtd-list.html
[Solved] I now understand that I didn't "lose" my style, it just got applied twice by the nesting. I have now moved my font-size out and restructured my code considerably, and it all works much better now.
[Original Question]
In html I am quoting from a book, and the quoted text contains another quote, so I put in a nested blockquote tag. I do get the second level indent okay, but the font style is lost. What is the proper way to do this?
[EDIT: code added - I didn't know how to use ctrl-K for quoting html code at first]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Two Mouthed Sword</title>
<style type="text/css">
body
{
font-family:Arial,Helvetica,sans-serif;
font-size:100%;
background-color:#d0e4fe;
margin: auto;
max-width: 780px;
}
h2
{
text-align:center;
font-size:1.6em;
}
p
{
font-size:1.3em;
}
blockquote
{
font-size:1.3em;
}
</style>
</head>
<body>
<h2>The Two Mouthed Sword</h2>
<p>When Jesus spoke the parable of the sower...</p>
<blockquote>
14 And in them the prophecy of Isaiah is fulfilled, which says:
<blockquote>
'Hearing you will hear and shall not understand,
</blockquote>
16 But blessed are your eyes for they see, and your ears for they hear;
</blockquote>
</body>
</html>
I totally see it now!
In my blockquote style I have:
font-size:1.3em;
which makes the font bigger, and is being applied twice because of nesting.
Silly me.
i'm running some basic beginner tutorials in order to learn how to properly run html. I've come to the portion where i'm using a div tag in css to center the content. However, once i open the test page, everything stays locked to the right of the browser. I've been scouring the forums for any solution and nothing seems to fix the issue. Tested in Chrome and IE.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>My First Website</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div>
<h1> My Website </h1>
<p>Learn more about me.</p>
<img src="img/lady.jpg" alt="skyrim">
<h2>My New Section </h2>
</div>
</body>
</html>
Here's the CSS:
a {
color: red;
text-decoration: none;
}
h1 {
font-family: sans-serif;
}
div {
width: 500px;
margin: 0 auto;
background: red;
text-align: center;
}
You have no Doctype. This puts you in Quirks mode (the land of incompatibility).
Add one as the very first thing in your document.
<!DOCTYPE html>
It looks fine in my end:
http://jsfiddle.net/Riskbreaker/JH7NK/
If you mean that extra space you have vertically on top its your h1.
I edited to show you:
div h1 {margin: 0}
You need to add a DOCTYPE. This is an example of the HTML5 DOCTYPE
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
HTML here
</body>
</html>
A ridiculously simple bit of web coding is failing to work for me, and for the life of me I can't figure out what I'm doing wrong.
This is my HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Experiment</title>
<link rel="stylesheet/css" type="text/css" href="/team/css/style.css">
</head>
<body>
<div id="user_box">
<p>Hi. Whassup?</p>
</div>
</body>
</html>
And this is the CSS file it's linking to:
#user_box {
position: fixed;
left: 10px;
top: 10px;
padding: 5px;
z-index: 100;
height: 40em;
width: 16em;
background-color: white;
border: solid black;
}
It doesn't work. The CSS formatting is ignored entirely. However, when I copy the content of #user_box into a style= tag, it works exactly the way I think it should.
I'm confirming that the CSS file is where it should be and the browser can see it; when I view the source, I can click that link, and it downloads just fine.
I suspect I'm missing something obvious/stupid, but I'm failing to figure out what it is. I beg you, point out my stupid and get a shiny shiny check mark.
The correct rel for a stylesheet is simply stylesheet, not stylesheet/css. Remove that /css and all should be fine.
Try removing the rel="stylesheet/css".
Change the tag to have:
rel="stylesheet"
i.e.
<link rel="stylesheet" type="text/css" href="/team/css/style.css">
Make sure that team is a root folder in your web directory and that it has a subdirectory of css with a style.css file