Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

xhtml tutorials 3

Status
Not open for further replies.
c1sissy

c1sissy

Technical User
Sep 23, 2002
25
0
0
US
If someone could guide me to an extensive online tutorial for advanced html which covers the div/class/id/ span etc... I would appreciate it.

since i have been self teaching myself I know that I am missing things.

I would also like some links to xhtml as well. I have a few books on xhtml, however, to me I don't see much of a difference between the html and xhtml but for the strictness of the coding.

My weakness is tables, could use some advance tutorials on this as well.

I know of the w3schools, as I have been in there as well.

Would appreciate any help. thanks.

 
Sort by date Sort by votes
You are right, XHTML is HTML 4.01 but it forces you to do things properly. This makes it useful if you want to ensure that your pages will work in as many environments as possible.

Webmonkey ( is a good resource for all kinds of web related issues. I would make this my first stop. If you still have problems then post some specific questions here.

MrBelfry
 
Upvote 0 Downvote
Hi Mr.Belfry:
I appreciate your reply to my post.

I'm also in the process of self teaching css. What I have found though is that I have never went over the div/span/id/class from html. So since I haven't any idea of their usage in html, this is causing some confusion for me in the learning process.

I did print a tutorial from sitebilder.com on div with absoulte and relational postitioning. Ieee. I'm so lost with all of this.

The basics of html I think that I have ok. Also I took the test at the w3 schools on xhtml and css, and scored in the 90% range with the tests. So the information is in there, it is just a matter of why can't I get this to process and work in my head? Is it a matter of the fear of not getting the coding correct? Or recalling what I have read so far?

Also confusing are the absolute relational/physical virtual terms. heavy sigh.

I"m debating on taking a credited course through our local college online. I can refer you to the book online if you wish to see if this would be a good course to take.

Here are two sites that I have done. One is done with frontpage, the other is a site that is completly in the work of hand coding, not yet finished.
The asphost site is the handcoding that I have been working on for a long time. I would eventually like to transform this into a css site.

I also have purchased the westciv course bundle and their stylemaster editor. Though I firmly believe in learning the handcoding so that you know what goes on behind the scenes in the editors. I found that the w3c recomends their courses and their editor, and would highly recomend this to anyone due to their customer service as well. They are excellent people to deal with.

I hope that this reply makes sense to you, lol.
 
Upvote 0 Downvote
Think of divs and spans as being boxes that contain the content of your site. You generally use the id and class attributes to identify the boxes. The id attribute tends to be used with scripts (where it is useful to have each element individually named) more than CSS. Class is used with CSS because you can multiple elements that are the same class! I'll assume that you are even more confused now.

Here's how you use them in HTML:
<div id=&quot;main&quot; class=&quot;content&quot;>Some content goes here</div>

or

<span id=&quot;main&quot; class=&quot;content&quot;>Some content goes here</span>

The main difference is that DIV will put a line break in for you (like a <p> tag) and SPAN will not (like <b>)!

If you're not using scripts then ignore id and use class.

I also noticed that you've used some tags that are not supported in the latest version of HTML (like font and align) you should replace these tags with some style info. You've also not closed a tag properly here:
<color red]<h3>Welcome</h3</td>[/color] should read
<h3>Welcome</h3></td>

Forget about relational and absolute positioning until you've got the basics


MrBelfry
 
Upvote 0 Downvote
&quot;I'll assume that you are even more confused now&quot;

lol, that is sooo true!

The site that I am working on in html hand coding is from a course online. I am sure that a good bit of this coding is not up to date. Also, thanks for letting me know about the unclosed tag.

With xhtml, are tables done differntly? Is the coding bascially the same?

I need to finish the rest of the pages on the asp host site, however I would like them to be in xhtml/css.

 
Upvote 0 Downvote
id and class

An id identifies a single element on an HTML page. Like MrBelfry says, it's often used in scripts, and when doing CSS positioning to address particular areas. Only ONE element on any given page can have a particular id. For example you might want to identify a particular <div> which contains a menu:
[tt]
<div id=&quot;menu&quot;>
[/tt]
A class identifies a particular type of element. The same class can be applied to multiple elements on a page, even to different tags. You use them to apply visual styles to certain parts of your document. For example, say you want to make text written in French appear different to that in English:
[tt]
<p class=&quot;french&quot;>Quelques nombres en française et anglais:</p>
<ul>
<li class=&quot;french&quot;>un</li>
<li>two</li>
<li>three</li>
<li class=&quot;french&quot;>quatre</li>
</ul>
[/tt]
Your style sheet would have to define a style to go with this class:
[tt]
.french { color:blue; }
[/tt]
I rarely use ids, I use classes all the time.


<span> and <div>

As can be seen above, classes and ids are applied to HTML tags. What if the text you want to style is just part of the content of an element? What if it's the content of a whole succession of them? That's where <span> and <div> come in.

<span> is an inline element that marks up a string within another element. It behaves like <b> or <i>, but doesn't do anything - it's only a placeholder for a class or a div. For example, what if you want to markup one of George Bush's pearls of wisdom:
[tt]
<p>The French have no word for <span class=&quot;french&quot;>entrepreneur</span></p>
[/tt]

<div> is a block element that encloses multiple elements, applying the same CSS to all of them. It's probably more like a <td> than a <p>, in that it can enclose multiple paragraphs, tables, images, etc. Like <span> it doesn't DO anything in itself (apart from force its contents to start on a new line, if they weren't going to already) but is used to apply styles to. It's most commonly used for CSS positioning, but can also be used to save typing:
[tt]
<div class=&quot;french&quot;>
<p>Les nombres, encore un fois:</p>
<ul>
<li>un</li>
<li>deux</li>
<li>trois</li>
</ul>
</div>
[/tt]

-- Chris Hunt
 
Upvote 0 Downvote
Hi Chris, thanks for the reply.

I have read about the id and class in my css readings.

ID, I do understand the amount of usage per page on this one, and the reason why, as it is used is scripting. And the usage of CLASS could be used more then once.

Div: When using this in css, would you use this in place of where you would normally in html build a table? Is this one of the uses for this tag?

I guess what this needs to come down to for me is to get this all to click in. The light bulb moment. I apprecaite the replies and will keep reading them as I read the books, and tutorials online. I appreciate the time that you and MrBelfry took to explain this to me.

 
Upvote 0 Downvote
If you're using CSS for layout instead of tables, you'd generally put a <div> where you'd have put a <td> in your layout table. So you might put a title bar in one <div>, a column of navigation links in another, the page content in a third and the footer in a fourth. Using CSS positioning you can place each <div> in the appropriate position on the screen (in theory anyway).

-- Chris Hunt
 
Upvote 0 Downvote
>> Div: When using this in css, would you use this in place of where you would normally in html build a table? Is this one of the uses for this tag?

One of the traps of the &quot;nouvel enfant sauvage de CSS&quot; (to continue the french theme) is the consignment of the table to the scrapheap. Tables are a valid part of the HTML standard. And they're absolutely unbeatable for doing what they were designed for - displaying tabular data.

A div in HTML, which can be modified using css is used to define an area, a rectangle of space within your page. Without divs and css, in older browsers where we had no option - we did (and are not entirely proud of) use tables to construct complex layouts. So the answer to your question is &quot;Yes&quot; - where once you might have corrupted the innocence of a table to give you the desired result, you can now much more cleanly use DIV tags formatted with CSS. However you shouldn't lose sight of what the table was originally conceived to do.
 
Upvote 0 Downvote
Chris:
Say I have a 30 row table that is two columns. This table would take up about 75% of the page. Cell 1 would be 65% of the table and cell two would be 35% of the table. btw, this is an exercise that someone asked me to see if I could come up with a css answer to this. I don't want the answer given to me as I want to work this out myself in the learning process. I was asked to come up with a css answer and an xhtml answer to this. lol, I'm sure that this person most likely already has the answer and is just giving me some table work to do, as this is a weakness of mine, and to give me something to use in the thought process of figuring things out.

Also, thanks for showing me that the div would be used in place of the td. My thought process had this being used in the tr.

What I would like to know is could this be done with css? As far as the building of this in both xhtml and css, I would like to figure out on my own. I learn better by doing the things.
Thanks.
 
Upvote 0 Downvote
Have a play with the following code and see what you can come up with:
[tt]
<?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?>
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;<html xmlns=&quot;<head>
<title>Untitled Document</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; />
<style type=&quot;text/css&quot;>
.tablerow {
width:75%;
}
.thead {
font-weight:bold;
border:1px solid #000000;
background:#cccccc;
}
.tbody {
font-weight:normal;
border:1px solid #000000;
background:#ffffff;
}
.tfoot {
border:1px solid #000000;
background:#cccccc;
font-style: italic;
}
#firstcol {
width:35%;
}
#secondcol {
width:65%;
}
</style>
</head>

<body>
<div id=&quot;tablehead&quot; class=&quot;tablerow&quot;><span id=&quot;firstcol&quot; class=&quot;thead&quot;>Name</span><span id=&quot;secondcol&quot; class=&quot;thead&quot;>Address</span></div>
<div id=&quot;trow1&quot; class=&quot;tablerow&quot;><span id=&quot;firstcol&quot; class=&quot;tbody&quot;>Bill</span><span id=&quot;secondcol&quot; class=&quot;tbody&quot;>123 some street</span></div>
<div id=&quot;trow2&quot; class=&quot;tablerow&quot;><span id=&quot;firstcol&quot; class=&quot;tbody&quot;>Sue</span><span id=&quot;secondcol&quot; class=&quot;tbody&quot;>42 any drive</span></div>
<div id=&quot;trow3&quot; class=&quot;tablerow&quot;><span id=&quot;firstcol&quot; class=&quot;tbody&quot;>Rick</span><span id=&quot;secondcol&quot; class=&quot;tbody&quot;>21 passing parade</span></div>
<div id=&quot;trow4&quot; class=&quot;tablerow&quot;><span id=&quot;firstcol&quot; class=&quot;tbody&quot;>Jane</span><span id=&quot;secondcol&quot; class=&quot;tbody&quot;>46 appletree avenue</span></div>
<div id=&quot;tablefoot&quot; class=&quot;tablerow&quot;><span id=&quot;firstcol&quot; class=&quot;tfoot&quot;>Name</span><span id=&quot;secondcol&quot; class=&quot;tfoot&quot;>Address</span></div>
</body>
</html>
[/tt]
 
Upvote 0 Downvote
Hi dwarfthrower:
Thanks for both your posts.

Yes, I do understand what the orignal reasoning for tables was/is. This was for data I believe if I'm not on the wrong trail.

I'll play with the code that you posted and place a link for it so thatyou can see what I do with it. thanks again.

 
Upvote 0 Downvote
Hi everyone, I do have an additional question regarding the following
<?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?>

the encoding is actually my question. How do you know what to use in here? Is this the standard? Is this also a must? Also, is this called the name space/character coding? (Please don't laugh at me.) If not, please explain.

I have read about this in two different books that I have. They only briefly go over this. One book stated that this isn't necessary to place in your pages. And does this always preceed the doctype?

I'm curious because I had tried to validate
with the xhtml online validator. I know that it isn't in xhtml, but thought that if I did this it would give me some ideas as to how to do this with this site. The following is what I got....

&quot;I was not able to extract a character encoding labeling from any of the valid sources for such information. Without encoding information it is impossible to validate the document. The sources I tried are:

The HTTP Content-Type field.
The XML Declaration.
The HTML &quot;META&quot; element.&quot;


Thanks in advance.
 
Upvote 0 Downvote
[tt]<?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot;?>[/tt]
>> How do you know what to use in here?
Dreamweaver puts it there. Otherwise I'd go and look up the standard encoding for XML documents.

>> Is this the standard?
It's a standard, yes. The iso at the start stands for the International Organisation for Standardisation. They list the international standards for lots of stuff.

>> One book stated that this isn't necessary to place in your pages
Well, your pages don't have it and they render just fine. But they're not xml documents.

>> And does this always preceed the doctype?
It's always the first line of an XML document. XHTML documents should also be properly encoded XML.

>> The sources I tried are...
Without the XML declaration, doctype or html namespace the validator will simply throw a hissy-fit and not go any further. The reason being is that it tries to parse your files as XML, which they're not. One of the prime rules for an XML parser is that they stop everything when they hit any error at all. XML has to be precise, that's one of the things that makes it so flexible.
 
Upvote 0 Downvote
Thanks for your reply and explainations. lol, also love your word hissy fit. I use that and don't know of too many others that do!
 
Upvote 0 Downvote
The <?xml... declaration at the top of the document is actually optional for XML documents (see ). It's a good idea to omit it from XHTML documents because some browsers may see it and decide to render the document as XML instead of (X)HTML.

You DO need a doctype - not to make the document valid, but to tell the browser how to render it - and you also need to include a content-type declaration since your server clearly isn't sending one by default. Start your XHTML documents like this and you should be OK...
[tt]
<!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;
<html xmlns=&quot;<head>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot; />
[/tt]

-- Chris Hunt
 
Upvote 0 Downvote
Hi guys
Well dwarfthrower, I have accomplished what you sent me to play about with, I even managed to change a few things!

Now, how would you change the header cell to be just one cell across instead of two?

I have to run for now but am going to play with this a bit later on to figure out how to do this as well as work on adding, if this is possible cell height and padding if necessary.

thanks again, and sorry so long getting back to this. I didn't want you guys to think I wasn't working ;>)
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ThomasJSmart
  • Locked
  • Question
XHTML or XML for SEO ?
Replies
11
Views
64
ChrisHunt
ChrisHunt
Manjinda
  • Locked
  • Question
xhtml pop up
Replies
1
Views
20
Vragabond
Vragabond
Leozack
  • Locked
  • Question
XHTML + iframe/object
Replies
6
Views
27
Leozack
Leozack
jmeyer9807
  • Locked
  • Question
xhtml strict form validation issues 1
Replies
6
Views
38
jmeyer9807
jmeyer9807
dartmoortom
  • Locked
  • Question
xhtml validation - attributes construct error
Replies
6
Views
51
johnwm
johnwm

Part and Inventory Search

Sponsor

Back
Top