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

[TDD]

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:

<!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...

<!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 xmlns="http://www.w3.org/1999/xhtml">

Beginning of the xHTML document.

<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.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

This sets the default language for this document to unicode 8.

<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".

</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.

<body>
</body>

this is where all the information that gets shown to the user is placed.

</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)

<h1></h1>

Heading #1 - this is the most important heading in the document, do not confuse this with the header though.

<h2></h2>

Second most important heading.

(these tags go down to <h6>)

<b></b>

This is to format the text inside this tag as bold, it has since been deprecated for

<strong></strong>

so we will be using <strong>

<i></i>

Used to make text italic, again, it's better to use

<em></em>

(emphasis) so we'll use that.

<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.

<p></p>

Paragraph tag, this is what your body text should be inside, it sorts the content into paragraphs... logical amirite?

<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.

<blockquote></blockquote>

If the tag isn't self explanitory enough, it's used for quotes and shit.

<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.

<ol></ol>

Ordered List (numbered).

<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.

<dl></dl>

definition list... very tiny chance you'll use it.

<div></div>

This is the most valuable design tool for CSS Design, it is an entirely empty tag, perfect for styling for any job.

<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:

<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!).

<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]

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

 

[Phil]

Thanks a lot Mat, you be useful

 

[TDD]

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

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

 

[MDS]

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

 

[Deacon Frost]

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

 

[Faskist]

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

 

[gtr4life]

thx man! this is so useful!!!

 

[TDD]

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

pfffft

 

[Byrdman--1-7]

Nicely made guide

 

[Clank]

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

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

 

[Nullware]

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

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

 

[TDD]

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

ahaha whoops

 

[Ryan]

Tables ftw. Don't listen to TDD

(Inside Joke)

 

[The Dark]

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]

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

 

[HackMyWorld]

Thanks man , you included a lot without making it messy

 

[NINJA YETI]

Thanks for this It's showed me a lot.

 

[wcer2552]

wow thanks a lot for this helped a lot

 

[StanRoy]

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