posted
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?
posted
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.
posted
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 |
posted
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 |
posted
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. Posts: 8355 | Registered: Apr 2003
| IP: Logged |
posted
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 |
posted
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 |
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.
posted
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:
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 |
posted
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.
posted
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.
posted
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 |
posted
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 .
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 |
posted
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.
Printer-friendly view of this topic
![[Dont Know]](graemlins/dontknow.gif)
![[Grumble]](graemlins/grumble.gif)
![[Eek!]](eek.gif)
dreamweaver ![[Smile]](smile.gif)
![[Wink]](wink.gif)
