Simple Xhtml Tutorial Simple tutorial I wrote

Hat · January 28, 2006

Updated Version made on 3/5/06   Updates:   1.Made it for JUST XHTML   2.Differences from HTML section   3.XHTML1.1 and 1.0   Welcome to my basic XHTML tutorial.   ---DIFFERENCES FROM HTML---   The document must be well formed:   -You can't have overlapping tags, for example: 

<em><p>hello</em></p>

-That is incorrect

<em><p>hello</p></em>

-That is correct

Tags must be all lower-case:

-Tags are now case-sensitive

-Incorrect

-Correct

Tags must be closed:

-You must close all your tags

<i>look, I'm in italics! <i> Me too!

-Incorrect

<i>look, I'm in italics!</i> <i> Me too!</i>

-Correct

For tags with no ending tag, use />: *edit* now it is good

<br>

-Incorrect

<br />

-Correct *edit* now it is

Attribute values must be in quotes:

-Incorrect

-Correct

This is just a short list.

For a full list, go to: http://www.w3.org/TR/xhtml1/

---MAKING THE PAGE---

First, you need webspace. If you don't have any, go to https://fukitol.com/optin. If you want a pay host, I suggest https://www.dreamhost.com/

If you already have webspace, we are ready to start.

--The doctype--

A doctype specifies what type of XHTML the page is using.

Here is the XHTML 1.1 doctype:

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

Here is the XHTML 1.0 doctype:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

The doctype is the first thing you put in your file(unless there is PHP involved). I suggest using the XHTML 1.1

--Whats next--

Well, after you have the doctype in, you need to put an html tag in there.

Here is what the code should look like for XHTML 1.1:

<!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/;

Here is what the code should look like for XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

After the html tag, you need a head tag. Put <head> under <html>. Next, you need to title your page.

Here is an example of title in XHTML 1.1:

<!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/;

<head>

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

<head>

Notice how I close the tags. If don't close tags, the won't work properly.

--Adding CSS--

CSS is what makes the page colorful. It also make the page layout. There are a few ways to use CSS.

One way is use the link tag. Here is the code:

Put that after the title tag. That code is for external style sheets. Notice how there is no </link> tag. That is because there is no finishing tag. When a tag has no finishing tag, use /> at the end.

Here is the code for internal style sheets:

body { background-color: #FFFFFF }

</style>

Internal stylesheets also go under the title.

--The finished head code--

Here is what the finished head code should look like(you can customize it anyway you want^_^!)

XHTML 1.1:

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

<html>

<head>

</head>

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

<head>

</head>

**NOTICE** You can use either the internal or external stylesheet. I cover CSS later in the tutorial.

--That's cool and all, but noting is showing up on my site--

Patience. You still need to add more tags.

The body tag is used for all the content on your site. For example:

XHTML 1.1:

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

<html>

<head>

</head>

<body>

<p>Here is a paragraph. <b>Some text</b> is bold. <u>Underline'd</u>. <i>I love italics!</i></p>

</body>

</html>

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

<head>

</head>

<body>

<p>Here is a paragraph. <b>Some text</b> is bold. <u>Underline'd</u>. <i>I love italics!</i></p>

</body>

</html>

**Some notes** Use the <p> tag whenever you use text. As you can see, <b> is bold, <u> is underline, and <i> is italics.

---CSS---

Now, that was a very simple page. Sure, you had css, but it wasn't used at all.

Here is a code for what you can have in css.css:

body { background-color: #FFFFFF; color: #000000 }

p.text { background-color: #000000; color: #FFFFFF }

**Some Notes** #000000 is black, #FFFFFF is white

Now here is the code in XHTML 1.1:

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

<html>

<head>

</head>

<body>

</body>

</html>

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

<head>

</head>

<body>

</body>

</html>

--Layout--

Now that website example is just a black line with text. Not really a layout.

Here is an example of a layout: http://forums.xisto.com/no_longer_exists/

It uses a sidebar, and well, its organized.

-CSS-

Here is a css code for a layout:

body { background-color: #303030; font-family: Vernada, Arial; margin: 0px; color: #FFFFFF; padding: 0px; }

h3, div, ul { background-color: #303030; font-family: Vernada, Arial; margin: 0px; color: #FFFFFF; padding: 0px; }

h3 { margin: 0px; padding: 0px; background: #330099; }

#content { float: right; width: 80%; postion: absolute; }

#side { float: left; width: 20%; }

#side li {list-style: none; background: #000066; font-size: 11pt; }

a { color: #000000; }

a:hover { color: #FFFFFF }

XHTML 1.1 code:

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

<html>

<head>

</head>

<body>

Content here</div>

<h3>Links</h3>

<ul>

</ul>

</div>

</body>

</html>

XHTML 1.0 code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

<head>

</head>

<body>

Content here</div>

<h3>Links</h3>

<ul>

</ul>

</div>

</body>

</html>

**NOTICE** You can edit the content and links, maybe you could add a banner. Here is an example of the layout: http://hatgal.hostingrapid.com/rg-erdr.php?_rpo=t

---DIVS---

<div> is a common-used tag. As you can see in the above example, I use <div id="side"> along with <div id="content">

When using css with divs, #titlehere is used with id, and .titlehere is used for class.

--Borders--

Here is the css part

.content { float: right; border-style: solid; border-width: thin; width: 75%; }

.nav { float: left; border-style: dashed; border-width: thin; width: 25%; }

.footer { border-style: dotted; border-width: thin; width: 100%; }

XHTML 1.1:

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

<html>

<head>

</head>

<body>

Look at my sweet solid border!

</div>

Don't you love the dash?

</div>

</div>

</body>

</html>

XHTML 1.0:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;

<head>

</head>

<body>

Look at my sweet solid border!

</div>

Don't you love the dash?

</div>

</div>

</body>

</html>

---XHTML TAGS---

Here is a list of XHTML tags:

http://htmldog.com/references/html/tags/

---CSS PROPERTIES---

Here is a list of CSS 2.1 properties:

http://htmldog.com/references/css/properties/

---COPYRIGHT---

Any questions? Email me: zeehow.lee@gmail.com

Notice from jlhaslip:

edit to fix 'bolded' closing tags originally shown as back-slashes '\' in error

Edited December 16, 2016 by OpaQue (see edit history)

zwek · February 22, 2006

not bad this tutorial can help beginers :huh:

final_fantasy · February 22, 2006

good tutorials thank you for you post freand

Plenoptic · February 22, 2006

I recently converted to xhtml so my site would work in firefox and other browsers. Just make sure that you close ALL of your tags even <br> make it <br /> and image <img src="http://forums.xisto.com/no_longer_exists/; /> If you want to double check to make sure your xthml is valid go to http://validator.w3.org/

apollo · February 22, 2006

Nice tutorial. Thanks a lot. Keep going men. I woudn`t say that it`s only for begginers. Anyway, nice...

Tyssen · February 23, 2006

You want to be careful using an XHTML 1.1 doctype. This thread explains why.

sharpz · February 23, 2006

I never really knew what the difference between XHTML and HTML is. Is XHTML just really, really strict HTML? Thats what i heard from a friend and wasn't quite sure.

smartbei · February 24, 2006

I recently converted to xhtml so my site would work in firefox and other browsers. Just make sure that you close ALL of your tags even <br> make it <br /> and image <img src="http://forums.xisto.com/no_longer_exists/; /> If you want to double check to make sure your xthml is valid go to http://validator.w3.org/

So normal HTML does not work well in FireFox? If this is true...Crap...I need to go through and change everything. Is XHTML considered better practice or is it just somehting that firefox cares about and the other browsers do not?

Hat · February 26, 2006

I don't really think it matters if you use XHTML or HTML...you mostly get the same results on your website...Most of the newer websites are using XHTML, so if I were you I'd change to XHTML...it's not that hard.

Tyssen · February 26, 2006

So normal HTML does not work well in FireFox?

Normal HTML works just fine in Firefox and every other browser.

Kioku · February 27, 2006

I really don't understand why so many people are reluctant to take a few moments and learn HTML codes, but instead choose to use Page Builder. If only they knew the benefits of making the pages their own self. After all, the best page builder for me always has been notepad and typing out the HTML code. Less hassle. :lol: lol

mama_soap · February 27, 2006

I really don't understand why so many people are reluctant to take a few moments and learn HTML codes, but instead choose to use Page Builder. If only they knew the benefits of making the pages their own self. After all, the best page builder for me always has been notepad and typing out the HTML code. Less hassle. lol

I agree totally. I've somehow found that Notepad is practically the most straightforward HTML tool I've ever used. Type it out. Rush to validator. Correct errors. Repeat prev two steps as many times as is necessary. Should get you started.

As for this tutorial, it was nicely done. I'm really looking for a good essay explaining the difference between HTML and XHTML, maybe your tutorial can begin with why it's important to switch/convert to XHTML? Just a random thought. Sorry if you've explained this already, I only skimmed through your article... but I do think it's nicely laid out and everything :lol:

Cheers!

Hat · March 4, 2006

Well, I wrote this awhile ago (summer 2005) and I kinda just rushed through it. I'll do some research about why XHTML and HTML are different, and update my tutorial. Thanks for the suggestions.

mama_soap · March 5, 2006

Hat,This is cool startup tutorial. If it's almost a year old; then even more so :lol: I will look forward very much to whatever updates you have in mind. Thanks for this one in the meantime...Cheers!

Hat · March 5, 2006

..I should start working on this....Should I make a new topic for the updated version, or just post it here?Updated version is in the first post

Notice from jlhaslip:

Merged triple post. We now enjoy the luxury of an edit button.

Sign In

Simple Xhtml Tutorial Simple tutorial I wrote

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Important Information