Simple Xhtml Tutorial - Simple tutorial I wrote
Pages: 1, 2
free web hosting

Read Latest Entries..: (Post #17) by Hat on Mar 6 2006, 08:27 PM. (Line Breaks Removed)
Yeah, that made the tutorial really longer than it should've been...MAYBE I'll fix it later
Read the FIRST post of this Topic. - Express your Opinion! Contribute Knowledge :-).

Open Discussion > CONTRIBUTE > Tutorials

Simple Xhtml Tutorial - Simple tutorial I wrote

Hat
Jan 28 2006, 06:51 PM
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:
HTML
<em><p>hello</em></p>
-That is incorrect
HTML
<em><p>hello</p></em>
-That is correct
Tags must be all lower-case:
-Tags are now case-sensitive
HTML
<LI>List Item</LI>
-Incorrect
HTML
<li>List Item</li>
-Correct
Tags must be closed:
-You must close all your tags
HTML
<i>look, I'm in italics! <i> Me too!
-Incorrect
HTML
<i>look, I'm in italics!</i> <i> Me too!</i>
-Correct
For tags with no ending tag, use />: *edit* now it is good
HTML
<br>
-Incorrect
HTML
<br />
-Correct *edit* now it is
Attribute values must be in quotes:
HTML
<td class=content>
-Incorrect
HTML
<td class="content">
-Correct
This is just a short list.
For a full list, go to: http://www.w3.org/TR/xhtml1/#diffs
---MAKING THE PAGE---
First, you need webspace. If you don't have any, go to www.free-webhosting.com. If you want a pay host, I suggest 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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
HTML
<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:
HTML
<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:
HTML
<!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:
HTML
<!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:
HTML
<!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:
HTML
<!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---
HTML
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:
HTML
<!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:
HTML
<!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://infinity-stuff.com
It uses a sidebar, and well, its organized.
-CSS-
Here is a css code for a layout:
HTML
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:
HTML
<!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:
HTML
<!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

---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
HTML
.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:
HTML
<!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:
HTML
<!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/reference/htmltags/

---CSS PROPERTIES---
Here is a list of CSS 2.1 properties:
http://htmldog.com/reference/cssproperties/

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

 

 

 


Reply

zwek
Feb 22 2006, 06:00 PM
not bad this tutorial can help beginers smile.gif

Reply

final_fantasy
Feb 22 2006, 07:20 PM
good tutorials thank you for you post freand

Reply

Plenoptic
Feb 22 2006, 08:42 PM
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://imagelink.com/image.jpg" /> If you want to double check to make sure your xthml is valid go to http://validator.w3.org/

Reply

apollo
Feb 22 2006, 08:59 PM
Nice tutorial. Thanks a lot. Keep going men. I woudn`t say that it`s only for begginers. Anyway, nice...

Reply

Tyssen
Feb 23 2006, 02:08 AM
QUOTE(Hat @ Jan 29 2006, 04:51 AM) *

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


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

Also, if you're using an XHTML doctype, you need to change <html> to this <html xmlns="http://www.w3.org/1999/xhtml">.

Reply

sharpz
Feb 23 2006, 08:04 AM
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.

Reply

smartbei
Feb 24 2006, 08:25 AM
QUOTE(Plenoptic @ Feb 22 2006, 10:42 PM) *

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://imagelink.com/image.jpg" /> 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?

Reply

Hat
Feb 26 2006, 03:51 AM
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.

Reply

Tyssen
Feb 26 2006, 06:28 AM
QUOTE(smartbei @ Feb 24 2006, 06:25 PM) *

So normal HTML does not work well in FireFox?

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

Reply

Latest Entries

Hat
Mar 6 2006, 08:27 PM
Yeah, that made the tutorial really longer than it should've been...MAYBE I'll fix it later

Reply

Tyssen
Mar 6 2006, 05:21 AM
QUOTE(Hat @ Mar 6 2006, 12:22 PM) *

Updated version is in the first post

I don't think you really needed to repeat the code for both XHTML 1.0 and 1.1 as in all cases, the only thing different is the doctype. It's more important to highlight the differences between XHTML and HTML than between the two versions of XHTML.

Reply

Kioku
Mar 5 2006, 09:46 PM
Validation should be a good idea. I should do that, considering I have some old pages I should convert over and fix up so they'll work on just about any browser.

Reply

Hat
Mar 5 2006, 07:06 PM
..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.

Reply

mama_soap
Mar 5 2006, 05:43 AM
Hat,

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

Cheers!

Reply


Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.

Pages: 1, 2
Recent Queries:-
  1. "xhtml 1.1" "internal stylesheet" - 45.66 hr back. (1)
  2. xhtml1.1 tutorial - 88.98 hr back. (1)
  3. xhtml website example - 107.21 hr back. (1)
  4. simple xhtml layout - 123.58 hr back. (1)
  5. xhtml tutorial - 126.78 hr back. (1)
  6. underline tag xhtml 1.0 strict - 142.05 hr back. (1)
  7. xhtml made easy - 143.92 hr back. (1)
  8. php with xhtml tutorial - 148.97 hr back. (1)
  9. xhtml 1.1 underline - 158.86 hr back. (1)
  10. xhtmltutorial footer - 173.68 hr back. (1)
  11. strict xhtml simple - 176.21 hr back. (1)
  12. xhtml hr color dotted - 191.63 hr back. (1)
  13. xhtml underline - 180.61 hr back. (4)
  14. "link rel" xhtml tutorial - 238.17 hr back. (1)
Similar Topics

Keywords : xhtml

  1. The Art Of Xhtml, Css And Web Standards - Part 1 - The Markup and Style Guidebook (19)
    Being the XHTML and CSS freak that I am, I have decided to create a guidebook on developing
    websites using XHTML, CSS and implementing Web STandards. While this is not a step by step tutorial
    on making websites, and nor is it a beginners guide to CSS and XHTML, this is a handbook where you
    can learn from other website examples, and grab insight from my own opinions, and then implement it
    onto your own website. This guidebook is divided into three chapters, each covering a different
    aspect of XHTML, CSS, and Web Standards. With out further ado, here starts Chapte...
  2. Saint Michael Xhtml Tips And Tricks #1 - xhtml= html 5.0 :P (3)



Looking for simple, xhtml, simple, wrote

*RANDOM STUFF*





*SIMILAR VIDEOS*
Searching Video's for simple, xhtml, simple, wrote
Watch the latest videos on YouTube.com

*MORE FROM TRAP17.COM*
advertisement



Simple Xhtml Tutorial - Simple tutorial I wrote



 

 

 

 

ADD REPLY / Got an Opinion! a humble request :-) RAPID SEARCH! Free Hosting [X]
Express your Opinions, Thoughts or Contribute your information that might help someone here.
Ask your Doubts & Queries to get answers.. "Together, We enlight each other!" 		Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE