I’ve been teaching myself web development (slowly) for the past couple of months. I’ve read two books on HTML/XHTML, am on my second CSS book and I’ve taken one online CSS tutorial.
The logistics, tagging, and cascading stuff…that all I get. What confounds me, however, is how to start off a document. The easy stuff…that a lot of books and online guides gloss over. For instance, I just had someone else from Yahoo Answers tell me all about linking to CSS documents from within your XHTML document.
Now I’m trying to figure out doctypes, content types and namespaces. What are they and where do they go? Also, what do they do? Are they always used the same way, or no?
To my understanding thus far, a doctype is a line of code that tells the browser what rules you’re using for XHTML/CSS. I’ve also learned that there’s several different kinds. What do I need to know and what questions do I need to ask to know what kind of doctype I should use? Also, where do I put it?
Namespaces and content types I know less about…or rather, nothing at all to be more specific. I’ve come across some explanations regarding them, but I’m still not very clear. Again, what are they, what do they do, and where do they go?
What I’m really trying to do is nail the basics here on how to kickoff a document with code so that I can browse it in an internet browser. Here is my current understanding of how a document should be laid out:
HTML HEAD TITLE Example /TITLE CSS Link stuff /HEAD BODY
Imaginery code /BODY /HTML
How does a doctype, content type, and namespace fit into this? Where do they go?
Help would be greatly appreciated
I’ve asked this same question in Yahoo Answers as well, but I’ve not really recieved a satisfactory answer.
Honestly, just look at the source of some of your favorite web pages. You can look up what specific doctype to use to get the specific rendering quirks you want, but you don’t even need it for the page to display. It’s like worrying about how to double-clutch before you can ride a bike.
To make a page that will display in a browser, just put this in a text file and change the extension to “.html”:
<HTML>
<HEAD><TITLE>My Page</TITLE></HEAD>
<BODY>
This is my page
</BODY>
</HTML>
Just start from there. I think this page does a good job explaining and giving example doctypes. Just grab one of the examples for now. Your need to know more will go hand-in-hand with your ability to understand it.
Use this as your baseline for XHTML 1.0 Strict DOC-Type.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="language" content="en-US" />
<link href="/path/link/to/external/stylesheet.css" rel="stylesheet" media="print" type="text/css" />
<title>Untitled Document</title>
</head>
<body>
-----> Your content will go here <-----
</body>
</html>
The position of the DOC-TYPE within the code is critical, including having no code above it, lest you want IE to belch and fart in quirks mode. If you plan to use XHTML as opposed to HTML, attention to tag case and properly closing tags is critical.
Writing standards-compliant code isn’t rocket science by any means. It’s actually much harder. Seriously.
The main difference between HTML and XHTML is that XHTML is based on an XML standard which will require more precise formatting rules in the code. This makes it easier to validate the syntax of document but does not really change the performance or features available to you.
The namespace is also used in conjunction with XHTML and is used to define new tags which is why XHTML is called “extensible hypertext markup language”.
The content-type meta tag is useful if you write your pages in a foreign language that requires a character set that may not be the default for most of your users. For documents containing only basic ASCII characters, it’s not going to make any difference but it’s generally a good idea to specify this tag.
I second the suggestion to read A List Apart: http://alistapart.com/ This is one of th best sites to learn about web design standards and css.
A content type is sent by the webserver in the HTTP response header. This means it’s not part of the document per se. A content type describes what kind of resource (file) is being sent: whether it’s a GIF image, a text file, XML, HTML or XHTML, or something else.
A doctype is specific to SGML, of which XML and HTML are subsets. It specifies what kind of tags are valid in the document. For HTML and XHTML, the doctype mostly specifies which “version” of HTML / XHTML is being used, but the most important use today is that specific doctypes put browser in either standards compliance / strict mode or “quirks mode”. See also: http://www.quirksmode.org/css/quirksmode.html
A doctype should be at the line before the first tag in an XML/HTML file. X(HT)ML files may have an XML prolog before that. HTML files may not.
For new pages, you should ALWAYS use strict mode, since it’s much more reliable than quirks mode and generally means you have a better chance of your pages rendering correctly in different browsers.
Also, you should ALWAYS use HTML for public web pages. XHTML is a nice idea, but it’s completely unsupported by the web browser with the largest market share: internet explorer. I’m not even sure IE 8 will support it when it finally makes it out of beta. The hacks you currently need to get XHTML to render at all in IE basically mean you’re pushing invalid HTML instead of valid XML and that will cause problems sooner or later. Better to use valid HTML 4.01 strict.
Namespaces are a way of mixing different document types in the same XML / XHTML document. Which is nice because it means you can put XHTML, MathML and SVG in the same file, but this is supported even less than XHTML. Don’t worry about it unless you really want to.
[rant] Is JUST the kind of help I’m looking for. I need to know what I need to know, need to know what I don’t need to know, how much of it I do and don’t need to know, and by God, I need ***EXAMPLES ***of it all! From start to finish! None of those “here’s an example of 1/10 of the code you’ll be writing with complete ommissions of the beginning and ending of the script, thus leaving you blind to what exactly you’ll be doing”. [/rant]
So I guess what I’m saying is thanks:).
I am looking at the source of webpages, but when you’re getting yourself started it’s hard to know what to include and omit in your own code from a page with all kinds of bells and whistles.
Thanks! Very helpful info.
The standards seem a bit much, but I don’t think I’ll have a problem with them so long as I can figure out what I need to know in the first place.
Let me get this straight: A namespace is just used so I can make new tags? Isn’t that what CSS is sorta used for (in additiona to several other things)? So this means I don’t have to use a namespace at all if I don’t want to, right?
And for someone who’s wanting to make an website that focuses on an American audience (if only at first), I don’t need to concern myself with content type either? Is that right?
I’ll give the website you mention a whirl. Right now I’m reading Stylin’ with CSS by Charles Wykes-Smith.
Wait…ok so how important is content type then? I plan for the site I want to develop to have images, but that’s about it. It’s going to pretty pretty basic, if only at first. If I don’t need it what’s the advantage to using one? From what **Cubed ** told me it sounds like I can completely omit it.
Basic HTML I know. I can get it to work, no problem. Problems started once I started trying to learn CSS, primarily because none of the books or tutorials I started myself with wanted to spent any time talking about external and internal CSS files, and linking a HTML file to a CSS file, and so on and so forth. I couldn’t figure out How. To. Make. Stuff. Go.
So what are the bigger names in websites using? Like Reddit.com? Or Craigslist? Are they all just HTML with CSS, Java, and other upmarks applied? Or are they using XHTML?
I’d rather never spend another moment thinking about Namespaces. I can handle the rest, but this still sounds confusing. My head actually has a “spinning” feeling to it just thinking about it right now :p.
Good info eveybody! Keep it up if you can, I’m taking it all in like a sponge!
Over ten years ago I stated coding HTML by hand just by copying code from other pages and playing around. I have never learnt CSS or other more complex things. Just basic HTML. My pages are fairly simple but they load fast and use little bandwidth. Unless you are planning on creating a big corporate site I think you need to know very little in order to make a basic web site with a few pages. In fact some of my sites have grown over time and now they might have been better with CSS etc but they started small and grew.
JoeSki, you may be overthinking it a little. Here is what I use on just about every HTML page on my site:
<!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=utf-8">
<title>Some title here</title>
<link href="css/mystylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>... content goes here
That’s enough to get you started and will allow you to use most of the css properties. (browsers don’t render every css property in the spec).
Forget about namespaces for now. By adding tags, I mean adding tags that are not a part of HTML. Yes you can do this with XML/XHTML, but you need some addtional “stylesheet” files to tell the browser how to render them. This is not the road to go down if you want to write pages for a mass audience.
Many people have an impression that web design is pretty basic. But at the professional level it requires a great deal of experience just like most other professions. You’re not going to find to many step-by-step tutorials that cover everything. Just keep reading sites that discuss css and you’ll gradually add techniques to your repitorie.
Well the site I’m planning is going to be basic, but I would like it to have some style, and it appears CSS gives me more freedom in regards to that. If all goes well and it’s succsesfull, it will become quite large, so changing the design of all the pages from a single document would be a good advantage as well. So that’s the appeal for me.
Here’s what I typically use, which has some meta tags, which are important for how your site shows up in search engines, and the favicon (the little icon you see in the url field in your browser):
And don’t forget to validate your code! You can learn so much simply by checking your code and fixing the errors - the W3C validator tells you exactly what is wrong and how to fix it. Eventually your code will be perfect and you will have learned a bunch of new rules along the way.
One more thing - you are new to this, and said you are making a pretty basic site… maybe you might want to try a HTML 4.01 Transitional doctype to begin with. It’s a lot easier to validate. This is what I am still using for most of my web sites. XHTML has a lot of newer rules which are sometimes harder to comply with. Here is the header I use the most:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<head>
<title>Title goes here</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<meta name="description" content="Description goes here">
<meta name="keywords" content="Keywords go here">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
PAGE CONTENT
</body>
</html>
Although on the other hand, maybe it’s best for you to just go ahead and learn XHTML starting out! Let us know how it goes!
Ok, I’ve not had a chance to put any of this into practice as I’ve either been at work or my girlfriend’s for the past few days, but I’m going to run with all this either today or tomorrow and see if I can’t make stuff happen.
Ok, so I’ve been toying around with things, and stuff is working!
I can now link from a HTML document to a seperate CSS file and display the results on a brower. Yay! I appreciate the help from everyone who responded :).
Basically, yes: a namespace is there so you can use tags from other kinds of XML document types into your XHTML. But you really don’t need to worry about that right now.
Css, on the other hand, is used to modify the presentation of the tags that are standard already. This is what you usually want anyway.
Don’t worry about the content type. As long as you put your HTML in a file with an .html (or .htm) extension, the content-type will work, since the web server will recognize that extension and send the correct content-type, just like it will send the correct content-type if you put a .gif or .jpg file there by default. Things are different for XHTML, but that’s one of the reasons I recommend not using XHTML unless you run into a situation where you really need it. If all you want to do is make public web-pages like 99% of the web right now, you probably only need HTML.
IFAICT, most big sites use either plain HTML, or some horrible XHTML/HTML bybrid, and they probably add a bit of CSS and JavaScript. Again, in my experience, it’s best to use plain HTML, and using HTML with the STRICT doctype will help make your sites more easily portable (though as the name implies, it’s a little less forgiving about certain details) - if you get a strict html file to work in one browser, it’ll generally work well in most others too. As long as you don’t get carried away with the CSS and JavaScript.
While I often run by that code validator I have found that some times I often want to deliberately leave things which the validator considers non-kosher. i consider it a good rule but sometimes I decide to break it. I do not consider it as something which has to be abided at all costs.
