Hi, I'm trying to get some text to display correctly using an external CSS. I followed all the syntax in a tutorial example I have, but it doesn't seem to want to work. I'm sure I'm missing something simple here, but I can't figure it out. I can get the heading and the validator link to work but none of the <p> text shows up. Furthermore, I ran it through the validator and it seems the <head> element is being misused somehow? I'm lost..
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>This is a generic HTML document using CSS test.</title>
<head>
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"generic style sheet.css" />
</head>
<body>
<h1> This displays the usage of the heading element combined with an
external style sheet that changes the font color and type. </h1>
<p This displays how to change font size,color, and type together with
the external style sheet.
</p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
<!-- this is a comment -->
</body>
</html>
Here's the CSS:
body {background-color:tan}
h1 {color:black; font-size:20pt}
p {font-size:12pt;margin-left: 15px}Start by learning HTML. <http://www.w3.org/TR/html401/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>This is a generic HTML document using CSS test.</title>
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"generic-style-sheet.css" />
</head>
<body>
<h1>This displays the usage of the heading element combined with an
external style sheet that changes the font color and type.</h1>
<p>This displays how to change font size,color, and type together with
the external style sheet.
</p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</body>
</html>Originally posted by Jona
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"generic-style-sheet.css" /> That's XHTML and not HTML. The trailling slashes have no place in HTML.Originally posted by Charles
That's XHTML and not HTML. The trailling slashes have no place in HTML.
Sorry, I didn't even notice the ending slash. You are right, though. I stand corrected.Originally posted by Jona
Sorry, I didn't even notice the ending slash. You are right, though. I stand corrected. It is a simple mistake and I pointed it out only to demonstrate the pernicious influence of XHTML.Ok, I got it. It seems that I somehow deleted the first <HTML> and completely missed it, and I didn't know that the meta had to be inside the <head>. Now I do, thank you very much. After you posted the code in correct form, I still couldn't figure out what was missing even after correcting the above issues. Finally I saw that I missed the > in the first <p>. Man, small things really mess you up when you use html huh?
Thanks again guys.If you're using a code editor that has syntax highlighting, mistakes like missing '>' or missing quotation marks are quickly spotted. Just a suggestion.To make matters even worse, you really don't need the HTML, HEAD and BODY tags. But if you use them you do have to nest everything properly. HTML has a steep, but really short, learning curve. Your best bet is simply to run everything through The Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) once you have put the following at the start of each page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Originally posted by Charles
To make matters even worse, you really don't need the HTML, HEAD and BODY tags. But if you use them you do have to nest everything properly. HTML has a steep, but really short, learning curve. Your best bet is simply to run everything through The Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) once you have put the following at the start of each page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
If you left out the HTML element, your page would not be able to contain any data, since other HTML elements must be contained inside the HTML element. Likewise, if you want to have any data, you are also required to have the head and body elements. And the head element requires the use of the title element inside of it. Plus, one should declare the characterset inside a meta tag, like so:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
It is not required, however, it is very good idea to include as well.The HTML element must exist, but you don't have to use the HTML start and end tags to create it. If you omit one or both of the tags the element is said to be there by implication.
From the HTML 4.01 DTD:
<!ELEMENT HTML O O (%html.content
-- document root element -->
<!ELEMENT P - O (%inline* -- paragraph -->
Those the "O" and the "O" in that first one mean that the start and the end tags are optional. You'll note that with the second one, only the end tag is optional. That some tags can be optional in SGML languages makes it impossible to do any error checking on them without a DTD. That's why XML was invented. In XHTML, which is an XML language, you cannot omit any tags.The confusing here is that the DTD states that the elements is optional, yet validate a page without the elements and it won't happen. The HTML validator won't assume the tags. Besides the fact that I would never recommend anyone go without these tags. Though the DTD may state them as being optional, from an accessibility standpoint, it'd be inane to leave them out. (Maybe I'm just partial to XML). At any rate, I'd say that any HTML 4.01 webpage on the web, and thus intended for public use, should contain the DTD, html, head, title, and body elements. It's also wise to include the Content-type and character set information in meta tags. Just because it's not a requirment, doesn't mean you shouldn't. It is most beneficial.Originally posted by MstrBob
The confusing here is that the DTD states that the elements is optional, yet validate a page without the elements and it won't happen. The HTML validator won't assume the tags. Besides the fact that I would never recommend anyone go without these tags. Though the DTD may state them as being optional, from an accessibility standpoint, it'd be inane to leave them out. (Maybe I'm just partial to XML). At any rate, I'd say that any HTML 4.01 webpage on the web, and thus intended for public use, should contain the DTD, html, head, title, and body elements. It's also wise to include the Content-type and character set information in meta tags. Just because it's not a requirment, doesn't mean you shouldn't. It is most beneficial. I'm sorry, but you are simply and completely wrong. The validator does no more and no less than check the encoding and check the mark up against the DTD. And when the DTD says that something is optional then the validator considers it optional. And optional tags have nothing whatsoever to do with accessibility. User agents have figured out by now how to deal with them.Allow me to apologize. I of course was testing numerous pages under the HTML validator, which is why I said what I did. HTML documents minus the head element wouldn't validate. I now, however, realize that said documents were missing the (required) title element.
I still will not tell anyone to leave those tags out. Yes browser agents SHOULD follow the specs. But my experiences with designing for multiple browsers has taught me to rely as little as possible on the browser. Assume that the browser knows nothing, and feed them all the data you can. The more data they have to work with, the better off they are, in my experience.
Here's the HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>This is a generic HTML document using CSS test.</title>
<head>
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"generic style sheet.css" />
</head>
<body>
<h1> This displays the usage of the heading element combined with an
external style sheet that changes the font color and type. </h1>
<p This displays how to change font size,color, and type together with
the external style sheet.
</p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
<!-- this is a comment -->
</body>
</html>
Here's the CSS:
body {background-color:tan}
h1 {color:black; font-size:20pt}
p {font-size:12pt;margin-left: 15px}Start by learning HTML. <http://www.w3.org/TR/html401/>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1">
<title>This is a generic HTML document using CSS test.</title>
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"generic-style-sheet.css" />
</head>
<body>
<h1>This displays the usage of the heading element combined with an
external style sheet that changes the font color and type.</h1>
<p>This displays how to change font size,color, and type together with
the external style sheet.
</p>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"http://validator.w3.org/check?uri=referer"><img
src=http://www.webdeveloper.com/forum/archive/index.php/"http://www.w3.org/Icons/valid-html401"
alt="Valid HTML 4.01!" height="31" width="88"></a>
</body>
</html>Originally posted by Jona
<link rel="stylesheet" type="text/css"
href=http://www.webdeveloper.com/forum/archive/index.php/"generic-style-sheet.css" /> That's XHTML and not HTML. The trailling slashes have no place in HTML.Originally posted by Charles
That's XHTML and not HTML. The trailling slashes have no place in HTML.
Sorry, I didn't even notice the ending slash. You are right, though. I stand corrected.Originally posted by Jona
Sorry, I didn't even notice the ending slash. You are right, though. I stand corrected. It is a simple mistake and I pointed it out only to demonstrate the pernicious influence of XHTML.Ok, I got it. It seems that I somehow deleted the first <HTML> and completely missed it, and I didn't know that the meta had to be inside the <head>. Now I do, thank you very much. After you posted the code in correct form, I still couldn't figure out what was missing even after correcting the above issues. Finally I saw that I missed the > in the first <p>. Man, small things really mess you up when you use html huh?
Thanks again guys.If you're using a code editor that has syntax highlighting, mistakes like missing '>' or missing quotation marks are quickly spotted. Just a suggestion.To make matters even worse, you really don't need the HTML, HEAD and BODY tags. But if you use them you do have to nest everything properly. HTML has a steep, but really short, learning curve. Your best bet is simply to run everything through The Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) once you have put the following at the start of each page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">Originally posted by Charles
To make matters even worse, you really don't need the HTML, HEAD and BODY tags. But if you use them you do have to nest everything properly. HTML has a steep, but really short, learning curve. Your best bet is simply to run everything through The Validator (<!-- m --><a class="postlink" href="http://validator.w3.org/">http://validator.w3.org/</a><!-- m -->) once you have put the following at the start of each page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
If you left out the HTML element, your page would not be able to contain any data, since other HTML elements must be contained inside the HTML element. Likewise, if you want to have any data, you are also required to have the head and body elements. And the head element requires the use of the title element inside of it. Plus, one should declare the characterset inside a meta tag, like so:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
It is not required, however, it is very good idea to include as well.The HTML element must exist, but you don't have to use the HTML start and end tags to create it. If you omit one or both of the tags the element is said to be there by implication.
From the HTML 4.01 DTD:
<!ELEMENT HTML O O (%html.content
-- document root element --><!ELEMENT P - O (%inline
* -- paragraph -->Those the "O" and the "O" in that first one mean that the start and the end tags are optional. You'll note that with the second one, only the end tag is optional. That some tags can be optional in SGML languages makes it impossible to do any error checking on them without a DTD. That's why XML was invented. In XHTML, which is an XML language, you cannot omit any tags.The confusing here is that the DTD states that the elements is optional, yet validate a page without the elements and it won't happen. The HTML validator won't assume the tags. Besides the fact that I would never recommend anyone go without these tags. Though the DTD may state them as being optional, from an accessibility standpoint, it'd be inane to leave them out. (Maybe I'm just partial to XML). At any rate, I'd say that any HTML 4.01 webpage on the web, and thus intended for public use, should contain the DTD, html, head, title, and body elements. It's also wise to include the Content-type and character set information in meta tags. Just because it's not a requirment, doesn't mean you shouldn't. It is most beneficial.Originally posted by MstrBob
The confusing here is that the DTD states that the elements is optional, yet validate a page without the elements and it won't happen. The HTML validator won't assume the tags. Besides the fact that I would never recommend anyone go without these tags. Though the DTD may state them as being optional, from an accessibility standpoint, it'd be inane to leave them out. (Maybe I'm just partial to XML). At any rate, I'd say that any HTML 4.01 webpage on the web, and thus intended for public use, should contain the DTD, html, head, title, and body elements. It's also wise to include the Content-type and character set information in meta tags. Just because it's not a requirment, doesn't mean you shouldn't. It is most beneficial. I'm sorry, but you are simply and completely wrong. The validator does no more and no less than check the encoding and check the mark up against the DTD. And when the DTD says that something is optional then the validator considers it optional. And optional tags have nothing whatsoever to do with accessibility. User agents have figured out by now how to deal with them.Allow me to apologize. I of course was testing numerous pages under the HTML validator, which is why I said what I did. HTML documents minus the head element wouldn't validate. I now, however, realize that said documents were missing the (required) title element.
I still will not tell anyone to leave those tags out. Yes browser agents SHOULD follow the specs. But my experiences with designing for multiple browsers has taught me to rely as little as possible on the browser. Assume that the browser knows nothing, and feed them all the data you can. The more data they have to work with, the better off they are, in my experience.