FacebookTwitter
Hatrack River Forum   
my profile login | search | faq | forum home

  next oldest topic   next newest topic
» Hatrack River Forum » Active Forums » Books, Films, Food and Culture » Learning Html

   
Author Topic: Learning Html
CalvinMaker
Member
Member # 2032

 - posted      Profile for CalvinMaker   Email CalvinMaker         Edit/Delete Post 
So for my winter term project I have to learn html. I told the teacher I'd buy this book called "html and xhtml" that has a koala on the cover. I'd heard good stuff about that line of books.

But the problem is, the book won't get here for a while, and I want to start learning it.

Anyone know of some free web places or something that teach html so I can start learning it now?

Also, what's the difference between html and xhtml?

thanks
-CM

Posts: 1934 | Registered: Jun 2001  |  IP: Logged | Report this post to a Moderator
Dagonee
Member
Member # 5818

 - posted      Profile for Dagonee           Edit/Delete Post 
Find a book that's going to teach you CSS-based HTML. Fugu might be able to reccomend one. Not having to unlearn 8 years of bad habits will be a big help.

Dagonee

Posts: 26071 | Registered: Oct 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
That's a pretty good book. Here's a tutorial site to get you started: http://www.w3schools.com

The difference between HTML and XHTML is simple . . . sort of.

From a classificatory viewpoint, HTML is an SGML application which is not an XML application, and XHTML is an XML application (which is a subset of SGML).

From someone writing them's viewpoint, XHTML is HTML where every tag is closed and lowercase, and instead of <br> and <img src=''> and the like one writes <br /> and <img src='' /> and such. Also things like every attribute must be in quotation marks. Basically a slightly stricter set of rules to adhere to.

XHTML has the advantage of being XML, which enables one to take advantage of the large number of XML-enabled things out there.

HTML has the advantage of being something browsers actually read. No major browser really "speaks" XHTML, they all take XHTML and basically treat it as HTML (with a few alterations in behavior). This can cause problems, particularly in the differences in degree of "speaking" XHTML across browsers, as most browsers "speak" HTML at about the same level.

Which to use? Depends. For certain things the choice is clear -- writing a web application of any size and you should be writing XHTML. The code is just that much cleaner to work with. If you are coding a visual website largely by hand . . . I don't know. I'm in favor of an eventual migration to XHTML, but at the same time HTML's behaviors are better understood. In XHTML you get odd stuff that you wouldn't expect, because no matter how much it might look like it, XHTML is not HTML with slightly stricter rules. XHTML is a re-envisioning of the HTML document in ways which aren't apparent at the markup level.

Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
quidscribis
Member
Member # 5124

 - posted      Profile for quidscribis   Email quidscribis         Edit/Delete Post 
Um, what? [Dont Know]
Posts: 8355 | Registered: Apr 2003  |  IP: Logged | Report this post to a Moderator
Icarus
Member
Member # 3162

 - posted      Profile for Icarus   Email Icarus         Edit/Delete Post 
Well, I can hardly call myself an expert, but I've learned enough to be dangerous, and I don't own a single book on the topic. Have you noticed that one of the options on your browser is "View Source"? I've pretty much used this to learn by example. Every time I've wanted to have something particular on one of my two webpages, I look for a webpage that already does what I want to do and look at its source code to figure out how they did it. Whenever I'm not certain how to use a command, I google it, and find a bunch of tutorial sites that way.

Now I've noticed when I look back on older code of mine, there are things I've since come to understand better and therefore things that I would now do differently, but I think it's not a bad way to learn.

Posts: 13680 | Registered: Mar 2002  |  IP: Logged | Report this post to a Moderator
quidscribis
Member
Member # 5124

 - posted      Profile for quidscribis   Email quidscribis         Edit/Delete Post 
I switched from the dark side (FrontPage) to the Force (Dreamweaver), and I design with both code and design view showing. In theory so I can learn more about html code. It's somewhat working. But I'm a little slow. [Grumble]
Posts: 8355 | Registered: Apr 2003  |  IP: Logged | Report this post to a Moderator
Icarus
Member
Member # 3162

 - posted      Profile for Icarus   Email Icarus         Edit/Delete Post 
Do you ever have any reason to tweak your code from another computer--one that doesn't have dreamweaver installed? Because I started with Dreamweaver, but having to update my site from work instead of home helped me break those ties. Now I almost never fire up Dreamweaver--it's too much of a hassle.
Posts: 13680 | Registered: Mar 2002  |  IP: Logged | Report this post to a Moderator
raventh1
Member
Member # 3750

 - posted      Profile for raventh1           Edit/Delete Post 
[Eek!] dreamweaver [Eek!]

Plenty of good html stuff here: http://www.w3.org/MarkUp/

You can do validation on that site too.

Posts: 1132 | Registered: Jul 2002  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Oh, and search for posts containing the word CSS by me, you'll turn up tons of links to resources that have already been pointed out, particularly from A List Apart.
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Dagonee
Member
Member # 5818

 - posted      Profile for Dagonee           Edit/Delete Post 
Quick HTML/CSS question:

I've got content that's in the following block level elements (listed from innermost to outermost):

<td> with no class assigned.
<tr> with no class assigned.
<table class="contentpaneopen">
<div id="maincontent">
<div id="container">
<div id="wrapper">

I want to add elements to the CSS to change how h1, h2, h3, p, li, and ul are displayed. I've got the actual definitions for these elements from a previous site, but these were global redefinitions of the tag. How do I add the following definitions in such a way that as little content other than the content in the <td> is affected. Changing the structure or class names is not an option.

Here's the defintion I want:

code:
h1 {
font-size: 18px;
font-weight: bold;
color: #003366;
padding: 0px;
margin-top: 27px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h2 {
font-size: 14px;
font-weight: bold;
color: #003366;
padding: 0px;
margin-top: 21px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
h3 {
font-size: 12px;
font-weight: bold;
color: #003366;
padding: 0px;
margin-top: 18px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
p {
font-size: 12px;
color: #000000;
padding: 0px;
margin-top: 12px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 30px;
}
li {
font-size: 12px;
color: #000000;
padding: 0px;
margin-top: 6px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
}
ul {
margin-top: 6px;
}

Thanks,

Dagonee

Posts: 26071 | Registered: Oct 2003  |  IP: Logged | Report this post to a Moderator
Teshi
Member
Member # 5024

 - posted      Profile for Teshi   Email Teshi         Edit/Delete Post 
<--------- is also learning html. [Smile]
Posts: 8473 | Registered: Apr 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
In CSS the ways you tell which element you are talking about are called selectors. The most common (and one of the few well-supported) selector is the Descendant selector.

The Descendant selector is very simple. To get all td descendants of things of class .foo, write the following:

.foo td {
. . . styles here . . .
}

That's it, just put a space between them. They can go as deep as you want -- for instance, '#bob div.foo td a' refers to all anchor tags which are in table data tags which are in divs of class foo which are in things of id bob.

Now, this is not a Child selector, but a Descendant selector. This means that a selector of the form 'div p' will select any p which is within a div, no matter how deep it is. For instance, it will select the ps here:

code:
<div><table>
<tr>
<td><p>Hi there.</p></td>
<td><p>And again</p></td>
</tr>
</table></div>

as well as this more expected form:

code:
<div><p>Foo</p><p>Bar</p></div>

The proper use of selectors keeps HTML code clean. For instance, a menu is generally best coded with the following HTML structure:

code:
<div id='menu'>
<ul>
<li><a href=''>Item 1</a></li>
<li><a href=''>Item 2</a></li>
<li><a href=''>Item 3</a></li>
<li><a href=''>Category 1</a>
<ul>
<li><a href=''>Item 4</a></li>
</ul>
</li>
</ul>
</div>

Only 1 CSS reference in all that, and yet each element can be specifically, semantically styled. Now, since Child selectors aren't well supported, note that div#menu li will affect every li, including nested ones. However, if both div#menu li and div#menu li li (which would select only li's at one or more degrees of nesting) are in the CSS and their styles conflict, the latter takes precedence, as it has greater specificity (which is actually a fairly complicated calculation, but it almost always works intuitively).

In your case, most likely .contentpaneopen h1 and the like is fine, so long as you want all h1s in all things of class contentpaneopen to be styled that way. Duplicate for h2, h3, ul, and whatnot.

Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Dagonee
Member
Member # 5818

 - posted      Profile for Dagonee           Edit/Delete Post 
Cool. This is pretty much what I stumbled on, but now I understand why it works.

There's one additional problem. I need the first <h1> tag to have a top margin of zero. I tried making a new class as follows:

code:
.firstheader {}

h1.firstheader {
margin-top: 0px;
}

I tried adding class="firstheader" in the h1 tag and adding a div around it with class="firstheader" in that tag. Neither works, although this worked on a web page with no block-level elements.

Dagonee

Posts: 26071 | Registered: Oct 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Instead of just writing h1.firstheader, if your generic h1 is .contentpaneopen h1, then make the first header .contentpaneopen h1.firstheader.

This ensures that the specificity of the firstheader CSS is higher than the specificity of the base h1 CSS, because all else being equal an additional class adds specificity.

Don't you wish IE actually used standards, though: http://webdesign.about.com/cs/css/qt/tipcss1stchild.htm ?

More explanation of that and other selectors here: http://www.w3.org/TR/REC-CSS2/selector.html#first-child

(When in doubt, go to the w3. They write good technical documents.)

Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
James Tiberius Kirk
Member
Member # 2832

 - posted      Profile for James Tiberius Kirk           Edit/Delete Post 
http://www.htmlgoodies.com/: tutorials, examples, explainations, CSS, JavaScript, Perl/CGI primer, xml... etc. It's how I learned everything.

Shame on you people for not mentioning it earlier. [Wink]

--j_k

[ December 26, 2004, 07:51 PM: Message edited by: James Tiberius Kirk ]

Posts: 3617 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Dagonee
Member
Member # 5818

 - posted      Profile for Dagonee           Edit/Delete Post 
quote:
Don't you wish IE actually used standards, though: http://webdesign.about.com/cs/css/qt/tipcss1stchild.htm ?
Yes I do. Thanks for the help - that got me on the right track. I don't fully understand the precedence, but I'm going through it and figuring it out.

This is why I left UI implementation to my developers and I concentrated on data and process modeling.

Dagonee

Posts: 26071 | Registered: Oct 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Scroll down to the bottom and it tells you how specificity works: http://www.w3.org/TR/REC-CSS2/cascade.html
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
Oh, and I generally don't recommend htmlgoodies because I prefer sites with information from people who actually know the standards, as the htmlgoodies people emphatically don't. Here's a good example of an htmlgoodies page filled with bad information: http://www.htmlgoodies.com/tutors/xhtml.html .
Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Dagonee
Member
Member # 5818

 - posted      Profile for Dagonee           Edit/Delete Post 
OK, I traced through that logic and understand why this specific selection works the way it does.

By the way, did you find that as you developed web pages with a clean structure and CSS that you found WYSIWYG editors less and less useful?

Dagonee

Posts: 26071 | Registered: Oct 2003  |  IP: Logged | Report this post to a Moderator
fugu13
Member
Member # 2859

 - posted      Profile for fugu13   Email fugu13         Edit/Delete Post 
I never really used a WYSIWYG editor as such (for production work). I've always edited in code, and every time I've tried to use one its felt inferior.

Now, I have edited on occasion in Dreamweaver, but only to see instant previewing, and usually because I didn't have a better editor around.

I like BBEdit a lot, though SubEthaEdit is starting to grow on me (plus it allows collaborative, auto-discovering editing between multiple people via Rendezvous!). Both are Mac only (but they're really, really good). I'm not sure what I'd use on windows, as I haven't looked at the field, but probably Emacs or the like. For some reason I've never found a windows editor I like as well as either of those, they're just . . . cleaner. Doesn't mean there aren't any out there, just means I have a hard time finding them [Smile] .

The reason WYSIWYG never really worked for me (and why I'll not use ASP.NET even though its very powerful) is that it abstracts too much. The HTML code produced is still very important, particularly if one cares about accessibility and semantic markup, and WYSIWYG editors just don't offer the same capabilities as hand-editing. Its like . . . reading a legal advice site vs talking to a lawyer.

Oh, and one thing to greatly improve your web development skills -- play around with the web development toolbar for moz/firefox. It really helps you understand what your browser does with the code you give it.

Posts: 15770 | Registered: Dec 2001  |  IP: Logged | Report this post to a Moderator
Dagonee
Member
Member # 5818

 - posted      Profile for Dagonee           Edit/Delete Post 
I've already fallen in love with the Web developer toolbar in Firefox. It's excellent, especially the outline tool and the "View Style Information."

I guess it's much the same as data design - I've never been happy with most data design tools. And for anything going into an app, I like to hand-code my SQL.

Dagonee

Posts: 26071 | Registered: Oct 2003  |  IP: Logged | Report this post to a Moderator
   

   Close Topic   Feature Topic   Move Topic   Delete Topic next oldest topic   next newest topic
 - Printer-friendly view of this topic
Hop To:


Contact Us | Hatrack River Home Page

Copyright © 2008 Hatrack River Enterprises Inc. All rights reserved.
Reproduction in whole or in part without permission is prohibited.


Powered by Infopop Corporation
UBB.classic™ 6.7.2