Website Design Forum

**playmenow** · 02-19-2006, 12:33 PM

XHTML
Yoy need to know basic HTML for this tutorial...I mean, what tags like <div>, <table>, etc. are. If not, go to http://www.w3schools.com/html and study.

Alright. Here's how you can create your own web site without any editor. Just notepad. First, you need a doctype:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Then, type:

Code:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<title>My Web Site</title>
<link rel="author" title="Chirea Mircea Mark Aurel" href="mailto:chireamircea@yahoo.com" />

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="English" />

<style type="text/css">
/* Nothing here. Replace with CSS */
</style>

</head>

The <meta http-equiv="Content-Type" content="*; *" /> tag defines the content type of the page. THe first star is the type of the page, in this case it's application/xhtml+xml (as required by xhtml), and the second star, id the encoding,. This can be anything.

The <link> tag defines an external file (css, rss) or info for web developer browsers or voice browsers. Please leave the link tag with my name, as I like to press the SPAM button

The "Content-Language" meta tag is used to say the language of the content (only 2 letters, 4 if en-us, etc...). If you change it's value, change the vaue of the attribute xml:lang from the <html> tag. The <meta name="language" content="English" /> tag is used by some old browsers and search engine crawlers. It's good to use this too, as you can supply the full name of the language, IN IT'S OWN WORD (Like if you are writing in Romanian, you can type 'Romana'...don't ask).

Now, let's get on the body. I'll use tables for design, as i'm, too lazy to make some divisions and use CSS to make them float (as on my site). Type:

Code:

<body>
<table summary="The whole content">
<tr>
<td class="header">
<h1>Welcome to my site!</h1>
</td>
<tr>
<td class="menu">
<div id="top">



Something...

Something...

Something...

Something...

Something...
</p>
</div>
<div>



<a href="http://www.something.com">
[img]skyscraper.png[/img]
</a>
</div>
</td>
<td class="text">
<h2>Content</h2>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>
</td>
<td class="ads">
<div id="top">



Something...

Something...

Something...

Something...

Something...

Something...

Something...

Something...

Something...

Something...
</p>
</div>
<div>



<a href="http://www.something.com">
[img]skyscraper2.png[/img]
</a>
</div>
</td>
</tr>
</table>
</body>
</html>

Alright. This is a basic page. You can test it, but the skyscrapers wil never showi f u don't have some. Now let's get on CSS. The IDs and CLASSes will be useful here.

CSS

Alright, here's the CSS part. Remember that in the <head> is a tag like this:

Code:

<style type="text/css">
/* Nothing here. Replace with CSS */
</style>

???
Well, we will replace it's content with CSS. Let's set a color, the align direction, the apdding, spacing and border for all the elements:

Code:

* {color: red;text-align: center;padding: 0px;border-spacing: 0px;border: 0px}

Now, let's make a background color and more for the divisions with the menu, ads and for the <td> with the content. If it's id="*" then use #, if is class="*" then use . (dot):

Code:

.menu {background-color: green}
#top {vertical-align: top}
.ads {background-color: green}
.text {background-color: blue;vertica;-align: top}

Now, I'm tired. I won't get through all the CSS. GO here: http://www.w3schools.com/css.
Now the whole code should look like this:

Code:

<!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>My Web Site</title>
<link rel="author" title="Chirea Mircea Mark Aurel" href="mailto:chireamircea@yahoo.com" />


<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="English" />

<style type="text/css">
* {color: red;text-align: center;padding: 0px;border-spacing: 0px;border: 0px}
.menu {background-color: green}
#top {vertical-align: top}
.ads {background-color: green}
.text {background-color: blue;vertica;-align: top}
</style>

</head>

<body>
<table summary="The whole content">
<tr>
<td class="header">
<h1>Welcome to my site!</h1>
</td>
<tr>
<td class="menu">
<div id="top">



Something...

Something...

Something...

Something...

Something...
</p>
</div>
<div>



<a href="http://www.something.com">
[img]skyscraper.png[/img]
</a>
</div>
</td>
<td class="text">
<h2>Content</h2>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>


Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. Text here. </p>
</td>
<td class="ads">
<div id="top">



Something...

Something...

Something...

Something...

Something...

Something...

Something...

Something...

Something...

Something...
</p>
</div>
<div>



<a href="http://www.something.com">
[img]skyscraper2.png[/img]
</a>
</div>
</td>
</tr>
</table>
</body>
</html>

If you want, remove the comments around the <link> tag, include the contents of <style> in a file & save is as style.css. Now, delete the <style> tag. It's better to use external file, because u can save bandwidth and time.

Well, I hope you can learn something from this. If there are some errors, don't blame me, I'm tired.

**playmenow** · 02-27-2006, 04:13 PM

Hmm...this thread was viewed ~20 times and nobody said even thanks! :evil:

**Superpoo** · 02-27-2006, 06:39 PM

well... thanks!
i didn't thank before cause i'm not going to use it =P
but thanks anyway for the hard work!

**sartajc** · 03-05-2006, 10:05 PM

Thanx alot. but can you tell me how to center iframes and pics and tables?

**playmenow** · 03-06-2006, 02:19 AM

text-align: center.
you can use this attributte: style="text-align: center
or:

Code:

<p style="text-align: center">
****
</p>

better:
CSS:

Code:

.center {text-align: center}

HTML:

Code:

<tag class="center">
blah blah it's centered
</tag>

[/code]

**ferretsrule** · 03-08-2006, 02:11 PM

or, you could put it in center tags...

**playmenow** · 03-08-2006, 02:18 PM

and <center> is very bad!

**LeeD** · 09-22-2006, 04:07 PM

This is a good thread - thanks for sharing!

**kthdsn** · 09-22-2006, 06:21 PM

Don't forget to check your code at http://validator.w3.org and http://jigsaw.w3.org/css-validator

Also, don't assume that it's well written just because it validates. Validation is as useful as a spell checker. It points out the obvious mistakes but it can't catch stupid errors like using a million div tags for no reason

**briansol** · 09-24-2006, 06:20 PM

I appreciate your efforts, but I would NEVER suggest this to a beginner.
If you're a beginner, hit your back button and forget you ever saw this thread.

Why?

IE6ucks doesn't support Application+xml. It needs to be served text/html, thus making xhtml1.1 pretty useless right now to 85% of the internet unless you want download prompts on every page....

On top of all that,
you're missing scope attributes for your table's columns/rows, and other more advanced xhtml1.1 that probably no one but you and I know about. Moreover, why use a table at all?

* attributes should be avoided at all costs for future portability. using body is a better idea and has the same effect.

missing media declaration on the style sheet. (media="all" or media="screen" in most cases, or media="print" for your print style sheet, etc...)

setting a background color without an implicit color attribute will throw validator warnings. Not everyone browses with white BG, and black text.

**imported_mattd** · 09-24-2006, 08:21 PM

Thanks for sharing, but I'd also argue that this is perhaps not the best way to teach someone XHTML for the reasons mentioned above, but also for a few others which I think are pretty significant.

Using tables for layout is a wrong. Very wrong! Using tables has immediate implications for users with disabilites, but it can also be slow to render for large sites, as well as causing problems with printing and also for people browsing your site on a device other than a PC (e.g. mobile phone). Its not much more effort to use divs!

Also you have inline CSS (including a typo for "vertica;-align") which defeats one of the main uses of CSS - i.e. being able to change one file and change all pages on the site at once! You've also not included comments in your style tag meaning older browsers will display your CSS on the page.

You've got the id "top" defined more than once - ids are just that: id! You can only use each once. Maybe you should try a class next time?

But marks for the effort and sharing

Oh you've got some spurious </p> tags in there, as well as missing a </tr> here and there I think. I know that </tr> isn't strictly required in HTML4- (IIRC), but it wont validate as XHTML, as XHTML must be valid like all XML.