Jump to content
xisto Community
Hat

Simple Xhtml Tutorial Simple tutorial I wrote

Recommended Posts

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

<LI>List Item</LI>

-Incorrect

<li>List Item</li>

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

<td class=content>

-Incorrect

<td class="content">

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

 

 

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

 

 

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>

 

 

<title>My uber site</title>

 

 

XHTML 1.0:

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

 

 

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

 

 

<head>

 

 

<title>My uber site</title>

 

 

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:

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

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:

<style type="text/css">

 

 

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>

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

</head>

 

 

XHTML 1.0:

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

 

 

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

 

 

<head>

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

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

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

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

 

 

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

 

 

<head>

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

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

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

</head>

 

 

<body>

 

 

<p class="text">Text omg</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;

 

 

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

 

 

<head>

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

</head>

 

 

<body>

 

 

<p class="text">Text omg</p>

 

 

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

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

</head>

 

 

<body>

 

 

<div id="content">

 

 

<h3>News</h3>

 

 

Content here</div>

 

 

<div id="side">

 

 

<h3>Links</h3>

 

 

<ul>

 

 

<li><a href="#">Link</a></li>

 

 

<li><a href="#">Link</a></li>

 

 

<li><a href="#">Link</a></li>

 

 

<li><a href="#">Link</a></li>

 

 

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

 

 

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

 

 

<head>

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

</head>

 

 

<body>

 

 

<div id="content">

 

 

<h3>News</h3>

 

 

Content here</div>

 

 

<div id="side">

 

 

<h3>Links</h3>

 

 

<ul>

 

 

<li><a href="#">Link</a></li>

 

 

<li><a href="#">Link</a></li>

 

 

<li><a href="#">Link</a></li>

 

 

<li><a href="#">Link</a></li>

 

 

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

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

</head>

 

 

<body>

 

 

<div class="content">

 

 

Look at my sweet solid border!

 

 

</div>

 

 

<div class="nav">

 

 

<a href="#">Link</a><br />

 

 

<a href="#">Link</a><br />

 

 

<a href="#">Link</a><br />

 

 

Don't you love the dash?

 

 

</div>

 

 

<div class="footer">

 

 

Copyright � Me 2005. I love this dotted border

 

 

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

 

 

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

 

 

<head>

 

 

<title>My uber site</title>

 

 

<link rel="stylesheet" type="text/css" href="css.css" />

 

 

</head>

 

 

<body>

 

 

<div class="content">

 

 

Look at my sweet solid border!

 

 

</div>

 

 

<div class="nav">

 

 

<a href="#">Link</a><br />

 

 

<a href="#">Link</a><br />

 

 

<a href="#">Link</a><br />

 

 

Don't you love the dash?

 

 

</div>

 

 

<div class="footer">

 

 

Copyright � Me 2005. I love this dotted border

 

 

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

 

 

This tutorial is copyright Hat 2005-2006. Thanks to HTML Dog, Kev, and w3

 

 

 

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 by OpaQue (see edit history)

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.