Welcome Guest ( Log In | Register)



2 Pages V   1 2 >  
 Reply to this topicStart new topic
> Simple Xhtml Tutorial, Simple tutorial I wrote
Hat
post Jan 28 2006, 06:51 PM
Post #1


Newbie [Level 1]
*

Group: Members
Posts: 20
Joined: 28-January 06
Member No.: 17,811
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


This post has been edited by jlhaslip: Mar 6 2006, 06:11 AM

(list)

Go to the top of the page
 
+Quote Post
zwek
post Feb 22 2006, 06:00 PM
Post #2


Newbie [Level 1]
*

Group: Members
Posts: 24
Joined: 29-November 05
Member No.: 15,102
not bad this tutorial can help beginers smile.gif

(list)

Go to the top of the page
 
+Quote Post
final_fantasy
post Feb 22 2006, 07:20 PM
Post #3


Newbie [Level 3]
***

Group: Members
Posts: 49
Joined: 19-January 06
Member No.: 17,375
good tutorials thank you for you post freand

(list)

Go to the top of the page
 
+Quote Post
Plenoptic
post Feb 22 2006, 08:42 PM
Post #4


Trap Double Mocha Member
***************

Group: [HOSTED]
Posts: 2,224
Joined: 5-November 05
From: That one place over there...
Member No.: 13,830
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/

(list)

Go to the top of the page
 
+Quote Post
apollo
post Feb 22 2006, 08:59 PM
Post #5


Member [Level 1]
****

Group: Members
Posts: 68
Joined: 22-January 06
From: Latvia, Ogre
Member No.: 17,468
Nice tutorial. Thanks a lot. Keep going men. I woudn`t say that it`s only for begginers. Anyway, nice...

(list)

Go to the top of the page
 
+Quote Post
Tyssen
post Feb 23 2006, 02:08 AM
Post #6



***********

Group: Members
Posts: 1,161
Joined: 9-May 05
From: Brisbane, QLD
Member No.: 6,818
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">.

(list)

Go to the top of the page
 
+