HTML5, jQuery, etc
- Started
- Last post
- 43 Responses
- stewdio
I keep seeing questions about learning HTML5, JavaScript, jQuery, etc from print designers and thought it was time for a fresh new thread that consolidated some information into one location. The main thing to know is that this stuff is EASY to jump into. (So you can start messing about straight away.) But, like most things, it will take a while to master so don't worry if things don't click for you right away. And relax: If you write some bad code the worst thing that will happen is your page won't look the way you intended. So don't be afraid to experiment and mess up. You won't break anything.
Quick Start (under ten minutes?)
You don't need Web hosting or anything fancy to get started. You can do HTML, CSS, and JavaScript right from your desktop. All you need is a text editor and your favorite browser. ...Unless your favorite browser is Internet Explorer, in which case I implore you to try something else:
Safari http://apple.com/safari/download…
FireFox http://mozilla.com/firefox/
Chrome http://google.com/chrome
Opera http://opera.com/download/Your OS already comes with a simple text editor. That would be TextEdit on a Mac, or Notepad on a PC. The important thing is that you want to use plain text, not styled text. (In TextEdit go to Format > Make Plain Text in the application bar.) These built-in editors are a life saver, but they don't color-code your text which is a very helpful thing as you'll see when you start to experiment. My favorite text editor is TextMate for Mac, but it's not free. TextWrangler, however, is nearly as good and is free. Both are built specifically for coding so you're ready to go from the moment you open them.
TextWrangler http://www.barebones.com/product…All you need is a browser and a text editor. To view your HTML file in a browser just drag and drop the file from your desktop onto your browser. After you make some edits in your text editor just hit refresh in your browser. It's that easy. Now that you've got that you're ready to roll.
.
.
.
HTML5
The acronym HTML stands for HyperText Markup Language. Hypertext is just text that you can click on and it leads you somewhere else. Usually UI designers make hyperlinked words a different color or underline them, etc for clarity but it's not necessary. Click on a hyperlinked word and you're transported to another location in the document, or another document entirely. (But you know that already because this is how the Web works.) Hypertext was invented in the 1960's by Douglas Engelbart's team at SRI but there are some interesting earlier precursors as well.
HyperText http://en.wikipedia.org/wiki/Hyp…My favorite site from the early days of the Web was Suck.com. It was a highly sarcastic running commentary where the hyperlinks were often punchlines. For example in an article on relationships there might be a sentence saying something like "no one believes in love anymore" where the word 'love' would be a hyperlink. Clicking on it would open up a new window to a news article with a photo of a cracked-out Courtney Love. The hyperlinks were the stream-of-consciousness jokes; the side commentary (or 'gloss' if you're an old-school book designer).
About Suck.comhttp://en.wikipedia.org/wiki/Suc…HTML is just plain text. You can write HTML in a simple text editor like Notepad for Windows or TextEdit on a Mac. No big deal. There are commands for things like making text bold, or changing typefaces, etc. But it's all just written as text. And the best part is, you can view the HTML source code for any website. If you're in Safari just click on View > View Source in the application bar up top and you'll see a ton o' text making up this very page. [Go ahead and try this now.]
So what's HTML5 then? It's just the latest version of HTML that adds some new commands and attempts to push some older less consistent commands out of spec. Exciting new commands like CANVAS, AUDIO, and VIDEO. (This is where Flash enthusiasts begin to raise an eyebrow.) There's some talk about HTML5 not being 'official' yet. Well, if you were around for the early days of the Web this won't bother you at all. If we're being honest nothing was ever really 'official' regardless of how it was labeled. The thing that matters is that Safari, FireFox, Chrome, Opera, and other browsers already support much of what's been proposed for HTML5. And Internet Explorer is still stuck in 2001.
Here's a grab-bag of links to help you get started with HTML.
HTML5 http://en.wikipedia.org/wiki/HTM…
HTML Elements http://en.wikipedia.org/wiki/HTM…
HTML Tags http://htmldog.com/reference/htm…
HTML Beginner Tutorial http://htmldog.com/guides/htmlbe…
.
.
.
CSS
I won't focus too much here on CSS. It stands for Cascading Style Sheets. Originally all styling (colors, typefaces, etc) was done directly in HTML. And on some sites it still is. But HTML was never intended for styling documents and as demand grew for more finely-tuned visuals CSS stepped in to the rescue. The new cascading structure of CSS allowed you to style one HTML element, or a class of elements, and then have that style cascade down to its children elements. (Or at least that was the original idea; it's slightly more convoluted than that now.) This was a huge improvement over having to individually style each paragraph or link as you would do in straight HTML!
http://en.wikipedia.org/wiki/Css…So today the preferred method is to outline the structure of your document using HTML, and then style it using CSS. If that seems a little abstract at first then imagine that you're a blind person using a Web interface. (Keep in mind this is also how search engines understand your site.) Visual style (CSS) immediately goes out the window. But hierarchy and meta information (HTML) does not. It still makes sense to tag your headings as headings, your links as links, etc. because these are structural (HTML) tags.
Well actually... with CSS you can now also specify styles for Braille interfaces (not totally sure what those are though), but I think the above helps to illustrate the point. HTML is for structure. CSS is for style. CSS is also just plain text of course. You can include CSS commands directly in your HTML or you can created a separate CSS document. Using a separate CSS document is great because then you can just tell multiple HTML documents to look at one CSS file for style. You make one update in your CSS file and all the HTML files looking at it will be updated in turn; fix once to fix everywhere.
CSS Properties http://htmldog.com/reference/css…
CSS Beginner Tutorial http://htmldog.com/guides/cssbeg…
.
.
.
JavaScript
This is one of the most misunderstood languages. Its composition has absolutely nothing to do with Java. It was originally slated to be called "LiveScript" but at the last minute the name was changed to ride on the coat tails of Java's hype machine (JavaScript is actually based on Scheme and Lisp which is super cool!) There's a lot more to this story here if you're interested; I highly recommend these videos to noobs and pros alike:
http://developer.yahoo.com/yui/t…JavaScript is what allows you to really add logic and complexity to your site. Animations, rollovers, AJAX, etc. Again, it's just plain text that you can write in a text editor.
.
.
.Since this is taking way longer than I anticipated I'm going to bail here and let others fill in. (Sorry... but I do have to get back to real work!) Points either myself or someone else should make in following posts:
jQuery is just a heap of JavaScript code that does a lot of complex JavaScripting for you. It allows you to write fewer, easier commands and then it does the heavy lifting. Very elegant tool that's quickly gained converts from Prototype, a clunkier JS library that was briefly the standard.
Ruby on Rails, Python Django, Perl, PHP, etc.
These are not replacements for HTML, CSS, JavaScript, and so on. These are just languages that assist in managing those scripts for you. Definitely need to expand on this topic... So basically before you jump into Ruby on Rails, etc. you still need to know a bit about HTML, CSS, and JavaScript.
- georgesIII0
You're awesome.!
- ok_not_ok0
nice!
- ORAZAL0
I can't believe it's not butter, a useful post on QBN!
- stewdio0
Also helpful, QBN's Useful Thread:
http://www.qbn.com/topics/577702…
- Daithi0
Fair play, this is a great idea.
Smultron http://smultron.sourceforge.net/… is another handy - free - text editor for Mac, which does will color-code your text quite nicely.
- stewdio0
Yea, I've heard Notepad++ for Windows is good. You can download the installer here:
http://sourceforge.net/projects/…- HTMLKit wasn't bad either, if I remember well. So was EditPlus.Continuity
- clearThoughts0
You can call yourself a HTML evangelist now and die in peace.
- dibec0
stew ... that's tits.
- iheartfun0
bookmarked :)
- pango0
bookmarked!
awesome dude!
- Milan0
is your real name Steve Jobs?
- SigDesign0
This is great! I'd like to see more interesting posts like this one on here...
- BattleAxe0
someone do this for Photography :)
- Douglas0
Stew, this is a great post!
We tried doing an event like this last fall, but it still went over many people's heads. http://www.aigany.org/events/det… Seeing it all written out is easier to consume and review.
- instrmntl0
nice, thank you sir.
- ukit0
"Click on a hyperlinked word and you're transported to another location in the document, or another document entirely."
Tell me more, Stew, tell me more.
- stewdio0
Sorry, too basic? Was trying to strip away jargon (a difficult task for me!) and start from zero. But maybe that was more like -1 instead of 0.
- ukit0
no, not at all, just kidding around. Actually I'm a fan of this approach, I find myself sometimes reading Wikipedia entries of really basic topics just to see what it says. I'm often surprised at the things I learn or misconceptions I had.