To kick off my topics on programming, I thought I would open with a list of web programming resources that I find indispensable. There's some stuff on this list both for any advanced programmers who happen to be here, as well as those with only a passing familiarity with basic HTML tags. In the past, this is what I have given to people who join my work team with a degree in computer science but no experience in web programming.
Here we go:
Basic Tutorials
W3Schools Introduction to HTML
If you have a blog or website but don't know anything about HTML, you should probably start here. Why pay someone to handle the basic stuff (or be stuck relying on a WYSIWYG editor alone), when you can learn a little bit of basic programming syntax on your own?
W3Schools Introduction to JavaScript
If you know the basics of HTML, and now want to learn how to make your website come to life, here's how you can put the "D" into DHTML ("D" stands for "dynamic"). This is good stuff to know if you have anything beyond a basic informational website (or blog).
Big Browser References
MSDN DHTML Elements
This reference is my very favorite, but you probably need to already know HTML pretty well before this will be very useful to you. The tree on the left menu includes all of the DHTML objects/tags by name, and you can get oodles of info (and sometimes examples) within each. In each object/tag, there are a number of subsections, and I go through each below:
(+/-) Click to Show/Hide Details
The Attributes/Properties section has all of the attributes that can be applied to each HTML tag. The “Attribute” column shows how the modifier is written out in markup on the tag in the HTML itself, and the “Property” column is how that same modifier is accessed through JavaScript. Do note that some attributes don’t have a way to be accessed from JS, and some JS properties can’t be applied by HTML attributes. In those cases, one of the columns is blank, and that’s OK.
The Behaviors section details functionality related to “Behaviors,” which are IE-specific. Not only that, but in IE6 a number of them are prone to memory leaks. I wouldn't recommend using anything in here.
The Collections section has a list of all the collections of sub-objects that can be accessed through JS. Do note that some of these are IE-only, even more so than in the other sections. For example, use the childNodes collection instead of the children collection (they are identical, but the former is cross-browser compatible), and don’t ever use the all collection (that’s an IE-only thing. There is no equivalent in the standards, but that can be worked around pretty easily).
The Events section includes all of the JS event handlers (these are all client side, understand) that can be attached to or triggered. All of these can be attached to by using them as an attribute on the HTML tag itself ( for instance <body onload="pageload();">, which fires a custom JS method called “pageLoad” when the body element is loaded), or via JS. It’s a bit harder to do through JS, because the syntax varies between browsers.
The Filters section includes info on the DirectX-powered visual effects that can be implemented. These are implemented as CSS properties. These are IE-only, so generally I do not use them, but there are also similar functions for many of these in FireFox, so if you did want to implement alpha blending (by-pixel transparency) or something, you'd do so by adding code for both an IE Filter and for a FireFox Effect to your CSS definitions. The browsers just ignore CSS rules that they can’t interpret; as you learn more about web programming, you’ll see how you can use this to your advantage a lot.
The Methods section has all the JavaScript methods that can be called from that object (so, object.methodName() ).
The Objects section has a list of all the JS properties that are actually full sub-objects in themselves. All of the display-focused objects have a style object which we’ll use frequently. Most objects don’t have much more than this that is useful, however. Some of the major exceptions are window, document, and iframe, which have a number of very useful sub-objects that you’ll use from time to time.
The Styles section is a list of all the CSS properties that can be applied. The “Style Attribute” column is how the style is written in markup or CSS, and the “Style Property” column is how the style is accessed through JavaScript (so, object.style.propertyName when working in JS).
Do note that some of the information in here is IE-only, though a lot of it also applies to FireFox (80%, let’s say). You can see if a given reference item is cross-browser compliant by looking at the bottom of the item’s page in the Standards Information section. If there isn’t a standard that applies, then you know that nobody else supports this.
MSDN CSS Reference
Pay attention to the sidebar on the left in here. A LOT of this information is cross-referenced from the DHTML reference, but there is also a lot of information on CSS rules, selectors, etc, that you can’t find in the other reference. If you are looking for a good CSS reference, this section is a great one for IE, and the Overviews/Tutorials link on the sidebar has a lot of introductory reading material that would be good to familiarize yourself with the concepts at play here.
Gecko DOM Reference
This is the FireFox analogue to the IE MSDN references. “Gecko” is the name of the underlying HTML rendering engine that is used in the Mozilla and FireFox browsers (these are actually two separate browsers, even though they are both by the Mozilla Foundation. But almost everyone thinks of both as FireFox.). This link also includes great into articles about “What is Gecko?” and “What is the DOM?” and things like that. Good introductory reading that also applies to IE (in the case of the DOM). Below that is the actual element reference, which is what you’ll use in the long term whenever your HTML/CSS/JS works in IE but doesn’t work in FireFox for some reason.
General Web Programming References
DevGuru JavaScript Index
This one has a lot of explanations of the various built-in javascript methods and how they work. Also includes basic JS syntax, statement construction, operators, etc. This reference is a couple of years out of date, but still includes pretty much all the functions that you are likely to use.
W3Schools Color Names Reference
Includes the names of all the “named colors” in HTML, as well as their hexadecimal codes. My advice is to use a program like Photoshop (or whatever) to get a color the way that you want, and then use that program to tell you the hex code. But if you don’t want to go to those lengths, here’s a good reference of the basics. Great for designing blog color schemes!
W3C HTML 4 Elements
The W3C is the “World Wide Web Consortium,” and this is their reference for the various elements of HTML 4.0. That means that it does not include some of the more recent elements, or all the properties, but this gives a pretty good baseline of what is supposed to be out there. This is of somewhat limited use, primarily because of the manner in which it is presented, but if you can’t figure out something from the MSDN references or the Gecko reference (or by talking to me), then this is the next place to look.
W3C Document Object Model Core
This is the “official” specification behind the DOM, which is the basis of DHTML and JavaScript. This is more targeted at people who want to code their own browser, but section 1.2 does include the spec for a lot of the basic elements (document, node, etc—every object is a node). This is more for informational purposes or as an all-out last resort than anything else.
Niche References
W3Schools HTTP Messages Reference
Good reference for understanding those message/error codes that you've probably seen about town. 503, 404, 200, and all that. Everyone knows what 404 means, of course, but what about all the others?
W3Schools ASCII Codes Reference
Looking for the HTML syntax for an ASCII code? This has a pretty good list.
VML Reference
If it ever turns out that you need to start dynamically drawing complex shapes (like pie charts) in just IE, then VML is one way to go. VML stands for Vector Markup Language, and lets you draw vector graphics in IE5 or greater. A better alternative might be to render custom images on the server side (using ASP.NET or somesuch), because that would be cross-browser compatible, but that has the disadvantage of being more intensive on the server, and immutable except when a round-trip to the server is made for the updated image. VML can be changed in real time on the client side, just like any other part of your page.
Other Articles
This section contains articles that I have found useful on various topics. Most of these topics are fairly advanced or are very niche in nature, but might be just what you're looking for at some point in the future. I have listed them in descending order of relevance.
Internet Explorer & CSS Issues
Introduces a few of the cross-browser compatibility problems. This highlights some of the most common problems with CSS between IE and other browsers, and shows workarounds.
Drawing Lines in Mozilla and IE
Normally, drawing free-standing lines is not supported by browsers. You can do this with VML in IE, but that’s in IE-only, and very markup-heavy. You probably wouldn't have any need to do this sort of thing unless you got into diagramming in the browser window (which is a feature of my company Starta, by the way, though we use an entirely different approach for this).
Thanks! Naturally I have to start with the first source you listed, since you described all the others in a foreign language. And already I've learned something: the "H" in "HTML" doesn't stand for "Hacker!"
ReplyDeleteIncidentally, Java is an island in Indonesia. Just thought I'd clue you in on that one.
And speaking of favors, if you ever need one of me all you need do is ASCII.
Hahahahahahaha!
You, sir, are hilarious. :)
ReplyDelete