TDD's Web Design series: Part 1 - The xHTML Tags.

TDD · Apr 23, 2008

Alright kids, let's have some fun with xHTML and CSS Designing, this will be a series that will eventually teach you all how to make a full blown site.

Part 1 - The basic Markup and Tags

Contrary to what everyone else has been posting, I will show you the proper way to markup your xHTML document:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>
Now let's examine what we have here...
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
This tells the browser what version of (x)HTML we are using, this is important so that it will render 'properly' for that version and this way you are less likely to need to rely on that browser's error checking.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
Beginning of the xHTML document.
HTML:
<head>
This is the beggining of the HEADER, this is to contain purely information, there is to be NOTHING in here for the end user, it is purely for browsers/bots to view, Document title, stylesheet linking, meta tags, etc. go in this area.
HTML:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
This sets the default language for this document to unicode 8.
HTML:
<title>Untitled Document</title>
This is where you'd put your document title, it goes inside the tag, so you'd replace "Untitled Document" with something like "TDD is a fucking god".
HTML:
</head>
This closes the header, it is VITAL to close ALL open tags, there are exceptions to this rule though, when it comes to self-closing tags, but we'll get to that later.
HTML:
<body>
</body>
this is where all the information that gets shown to the user is placed.
HTML:
</html>
This is the end of the HTML document, there should be nothing after this closing tag.

now that we've got a little explanation about what each of these does, let me tell you other HTML Tags that will aid you in this course (I won't explain them all, just the ones you'll more than likely use):

(There will be people who will probably try to argue that i have left out styling attributes in this, but that is for good reason, you DO NOT style the page in the HTML document, you do that in a seperate CSS file that I will explain in the next part)
HTML:
<h1></h1>
Heading #1 - this is the most important heading in the document, do not confuse this with the header though.
HTML:
<h2></h2>
Second most important heading.

(these tags go down to <h6>)
HTML:
<b></b>
This is to format the text inside this tag as bold, it has since been deprecated for
HTML:
<strong></strong>
so we will be using <strong>
HTML:
<i></i>
Used to make text italic, again, it's better to use
HTML:
<em></em>
(emphasis) so we'll use that.
HTML:
<a href="" target=""></a>
Anchor(link) tag, this is used to define a link on the webpage to the location (href) you choose, by putting the destination inside the "" in href="", target is for telling the browser to do things like open in a new window (target="_blank") etc, you can also use it to link to a specific part of the document through IDs, but i'll explain this later.
HTML:
<p></p>
Paragraph tag, this is what your body text should be inside, it sorts the content into paragraphs... logical amirite?
HTML:
<br />
Break tag, this tells the browser to now go to the next 'line' in the document. This is also our first SELF CLOSING tag.
HTML:
<blockquote></blockquote>
If the tag isn't self explanitory enough, it's used for quotes and shit.
HTML:
<ul></ul>
Unordered List, this is probably the second most valuable tool in the web design arsenal when it comes to CSS Design, it can be used for virtually anything.
HTML:
<ol></ol>
Ordered List (numbered).
HTML:
<li></li>
This is used INSIDE the <ul> and <ol> tag, as it is a LIST ITEM (li), this tells the browser everything inside it is grouped.
HTML:
<dl></dl>
definition list... very tiny chance you'll use it.
HTML:
<div></div>
This is the most valuable design tool for CSS Design, it is an entirely empty tag, perfect for styling for any job.
HTML:
<img src="" alt="" />
This is our second SELF-CLOSING tag, see how the end is "/>" instead of ">" this closes itself. src="" tells the browser where the source(src) of the image file is relative to the HTML file, the alternate(alt) text for read-aloud browsers is kept inside alt="", this is a web standard and a requirement in ALL xHTML documents, you MUST include an ALTernate description.

I'd mention forms, but we won't go into that in the near future, they are tricky bastards.

What NOT to use:
HTML:
<table></table>
use this tag for ANYTHING other than non-tabular data and you are not worthy of the internet (yes Cruel__Machine, that means you!).
HTML:
<frame></frame>
Frames are useless faggotry, do not use them, there is no need to, they simply cause pain for the end user that is uneeded. same goes for <iFrame></iFrame>

Well, there's our first installment of TDD's web design tutorial, tune in next time for some more info on how to do shit right.

Ps: I should probably also mention that in xHTML you always use lowercase tags, not uppercase.

Clank · Apr 23, 2008

This is really quite detailed for a short guide. Thanks for this.
(First post ftw.)

Phil · Apr 23, 2008

Thanks a lot Mat, you be useful

TDD · Apr 23, 2008

Clank said: ↑

This is really quite detailed for a short guide. Thanks for this.
(First post ftw.)
Click to expand...

barely touched the surface of what i'll teach everyone.

MDS · Apr 23, 2008

awesome guide, i have been looking to learn some html. thanks and i cant wait to see more

Deacon Frost · Apr 23, 2008

Bitchin! I'll just refer anyone who reads mine to your guides

Faskist · Apr 23, 2008

RAGE that you didn't mention the difference between standards mode and quirks mode.

gtr4life · Apr 23, 2008

thx man! this is so useful!!!

TDD · Apr 23, 2008

Faskist said: ↑

RAGE that you didn't mention the difference between standards mode and quirks mode.
Click to expand...

pfffft

Byrdman--1-7 · May 1, 2008

Nicely made guide

Clank · May 4, 2008

TDD said: ↑

barely touched the surface of what i'll teach everyone.
Click to expand...

^ Oooh, glad to hear it. Can you check my guide on HTML? Maybe provide some editing?

Nullware · May 6, 2008

use this tag for ANYTHING other than non-tabular data and you are not worthy of the internet (yes Cruel__Machine, that means you!).
Click to expand...

I think you probably mean "for ANYTHING other than tabular data".

TDD · May 6, 2008

Nullware said: ↑

I think you probably mean "for ANYTHING other than tabular data".
Click to expand...

ahaha whoops

Ryan · May 6, 2008

Tables ftw. Don't listen to TDD

(Inside Joke)

The Dark · May 11, 2008

Only thing i don't understand about webdesign is why look at a load of jumbled code when you can see it in something like Dreamweaver?
Answer me that, and i'm going to learn it the code way.

'Answer me that' not meant in the sence that you can't answer it, just really looking for an excuse to learn it the code way.

ssj_ion · May 17, 2008

thanks man it helped alot but there could hav been alot more

HackMyWorld · Jul 27, 2008

Thanks man , you included a lot without making it messy

NINJA YETI · Jul 28, 2008

Thanks for this It's showed me a lot.

wcer2552 · Aug 4, 2008

wow thanks a lot for this helped a lot

StanRoy · Aug 12, 2008

cool, some i already knew from looking at the code in dreamweaver.

Log in or Sign up

TDD's Web Design series: Part 1 - The xHTML Tags.

TDD Web Design Expert

Clank Guru

Phil Ex-Mod
♥ Will Love Govind Forever ♥

TDD Web Design Expert

MDS Forum Addict

Deacon Frost Grand Master

Faskist Tuxhead

gtr4life Apprentice

TDD Web Design Expert

Byrdman--1-7 Member

Clank Guru

Nullware Guru

TDD Web Design Expert

Ryan Hopeless Romantic

The Dark Guru

ssj_ion Guest

HackMyWorld Active Member

NINJA YETI Guest

wcer2552 Guru

StanRoy Forum Addict

Log in or Sign up

TDD's Web Design series: Part 1 - The xHTML Tags.

Thread Tools

TDD Web Design Expert

Clank Guru

Phil Ex-Mod♥ Will Love Govind Forever ♥

TDD Web Design Expert

MDS Forum Addict

Deacon Frost Grand Master

Faskist Tuxhead

gtr4life Apprentice

TDD Web Design Expert

Byrdman--1-7 Member

Clank Guru

Nullware Guru

TDD Web Design Expert

Ryan Hopeless Romantic

The Dark Guru

ssj_ion Guest

HackMyWorld Active Member

NINJA YETI Guest

wcer2552 Guru

StanRoy Forum Addict

Phil Ex-Mod
♥ Will Love Govind Forever ♥