What are the prerequisites to learn HTML5?
April 25, 2013 2:25 AM Subscribe
I am a beginner in information technology, and I need to learn HTML5.
For me to start learning HTML5, I need to know what languages/codes that I should know to start working in HTML5.
I know HTML5 are used for webpages, mobile, games, and others.
For example, I knew that I should be familiar with CSS3
So what are other basic information and skills needed to learn before starting with HTML5?
Thanks
Best answer: HTML5 and CSS3 have both acquired semi-buzzword status. It's basically more useful to think of simply learning HTML and CSS. Five and three are the latest versions of the respective standards documents, and these new standards do include some rather fancy functionality, but you don't need to worry about that in the beginning. If you try to find help on CSS3, you're likely to find specific stuff about the latest amazing magic for doing animations and fireworks, but it's better to focus on the basics of layout, the box model, selectors, and so on.
Basically HTML is like a tree structure that describes the content of a web page, and CSS is a language for describing the transformation of this structure into pixels. In a utopian world, an author would write HTML without considering how the page will look, whether it will be displayed on a desktop monitor, a phone, or a printed page. Then a designer would create CSS stylesheets for displaying it in beautiful ways depending on the medium.
As with any IT work, there are two not quite separate concerns: making it work, and making it good. To make a page work, that is look about the way you want it, you can just learn the building blocks of HTML and CSS and hack something together. Experiment with this, learn how to make different things happen. The working material is free, so play around all you want. But making it good implementation-wise is (usually) of very high importance, and is actually the most difficult part. That means learning to structure your code so that it's readable, changeable, and beautiful. It means choosing between different ways of doing things to increase platform compatibility and accessibility. And so on. Cultivate a sense for quality code, and be obsessive about it, without being stupidly perfectionistic.
Sorry I can't give any specific tips, because I've always been the type to just google around and play around. I think "Dive Into HTML5" is likely to be a good book, although it might not be for total beginners.
posted by mbrock at 2:50 AM on April 25, 2013 [2 favorites]
Basically HTML is like a tree structure that describes the content of a web page, and CSS is a language for describing the transformation of this structure into pixels. In a utopian world, an author would write HTML without considering how the page will look, whether it will be displayed on a desktop monitor, a phone, or a printed page. Then a designer would create CSS stylesheets for displaying it in beautiful ways depending on the medium.
As with any IT work, there are two not quite separate concerns: making it work, and making it good. To make a page work, that is look about the way you want it, you can just learn the building blocks of HTML and CSS and hack something together. Experiment with this, learn how to make different things happen. The working material is free, so play around all you want. But making it good implementation-wise is (usually) of very high importance, and is actually the most difficult part. That means learning to structure your code so that it's readable, changeable, and beautiful. It means choosing between different ways of doing things to increase platform compatibility and accessibility. And so on. Cultivate a sense for quality code, and be obsessive about it, without being stupidly perfectionistic.
Sorry I can't give any specific tips, because I've always been the type to just google around and play around. I think "Dive Into HTML5" is likely to be a good book, although it might not be for total beginners.
posted by mbrock at 2:50 AM on April 25, 2013 [2 favorites]
Best answer: "Dive into HTML5" is written to people who already know HTML; it's a book about the changes in the HTML5 standard, and a good read.
If you're interested in app or web development, you'll want to pick up:
* HTML5: Document content - what appears on the page
* CSS: Document layout - how the page appears
* Javascript: Client-side code layer - making the page interactive
* PHP or Django: Server side code - serving individualized pages, especially for interacting with databases.
I would recommend getting started with code academy. They have tracks on all of the above. If you're an experienced coder wanting to learn how to program for the web (like I was), you can run through everything in a couple-few weeks and be building things in no time. If you're a new person to coding, the exercises are gentle and you can take it at your own pace, building your skills over a few months. Depending on your goals, you'll probably want to do some reading and coding on the side, too, to make sure you understand how to write code on your own machine or in your own context.
posted by kaibutsu at 2:59 AM on April 25, 2013 [4 favorites]
If you're interested in app or web development, you'll want to pick up:
* HTML5: Document content - what appears on the page
* CSS: Document layout - how the page appears
* Javascript: Client-side code layer - making the page interactive
* PHP or Django: Server side code - serving individualized pages, especially for interacting with databases.
I would recommend getting started with code academy. They have tracks on all of the above. If you're an experienced coder wanting to learn how to program for the web (like I was), you can run through everything in a couple-few weeks and be building things in no time. If you're a new person to coding, the exercises are gentle and you can take it at your own pace, building your skills over a few months. Depending on your goals, you'll probably want to do some reading and coding on the side, too, to make sure you understand how to write code on your own machine or in your own context.
posted by kaibutsu at 2:59 AM on April 25, 2013 [4 favorites]
The skills required to learn HTML (using the latest version should go without saying) are being able to open a text editor (not Microsoft Word) and type in it; knowing how to save a text file, and knowing how to find that file and open it in a web browser.
CSS goes hand in hand with HTML, and it makes no sense to learn it first. You'll probably end up learning them alongside one another, like you learn how to use the steering wheel and the accelerator pedal at the same time in a car.
All the other things people are going on about (javascript and so on) you learn AFTER you learn HTML. HTML is the prerequisite for all of that. It is really easy to get started, don't worry about it!
Here's a start. Mess about with the examples and try things out! Right now! You can't break anything.
posted by emilyw at 3:25 AM on April 25, 2013 [1 favorite]
CSS goes hand in hand with HTML, and it makes no sense to learn it first. You'll probably end up learning them alongside one another, like you learn how to use the steering wheel and the accelerator pedal at the same time in a car.
All the other things people are going on about (javascript and so on) you learn AFTER you learn HTML. HTML is the prerequisite for all of that. It is really easy to get started, don't worry about it!
Here's a start. Mess about with the examples and try things out! Right now! You can't break anything.
posted by emilyw at 3:25 AM on April 25, 2013 [1 favorite]
Right, you'll want to learn databases, javascript, etc, after HTML. Didn't mean to imply that you need to learn it before or right away, they're all just 'good to know' without being strictly necessary. HTML is where you start, if you want to work on webdesign.
posted by empath at 3:45 AM on April 25, 2013 [1 favorite]
posted by empath at 3:45 AM on April 25, 2013 [1 favorite]
WebPlatform.org is an ideal starting point. It's the old Opera / W3C curriculum combined with other resources and wiki-fied as an effort to be the one-stop open resource for learning about the web. The 'alpha' status is misleading--the stuff collated there is often very mature.
posted by Monsieur Caution at 6:45 AM on April 25, 2013 [1 favorite]
posted by Monsieur Caution at 6:45 AM on April 25, 2013 [1 favorite]
When people talk about HTML5, they're really talking more about a lot of recent JavaScript libraries than HTML itself (which is only moderately different from HTML 4), just FYI
posted by tylerkaraszewski at 7:12 AM on April 25, 2013 [1 favorite]
posted by tylerkaraszewski at 7:12 AM on April 25, 2013 [1 favorite]
tylerkaraszewski has it.
HTML and CSS haven't changed that drastically since Day One. If anything, they are simpler now than ever to use.
"HTML5" is kinda codespeak for the new direction web pages are taking: interactive and responsive (meaning they reconfigure themselves based on what kind of device the user is using). HTML5 has a set of APIs "baked in" to accomplish a lot of that, and javascript is now the default way to make everything happen. (Even though there's a lot you can do with CSS3 that used to require scripting and hacking.)
Learn HTML and CSS. Pay particular attention to the concepts of responsive design. At least learn the basics of javascript. In that order.
posted by Benny Andajetz at 8:37 AM on April 25, 2013 [2 favorites]
HTML and CSS haven't changed that drastically since Day One. If anything, they are simpler now than ever to use.
"HTML5" is kinda codespeak for the new direction web pages are taking: interactive and responsive (meaning they reconfigure themselves based on what kind of device the user is using). HTML5 has a set of APIs "baked in" to accomplish a lot of that, and javascript is now the default way to make everything happen. (Even though there's a lot you can do with CSS3 that used to require scripting and hacking.)
Learn HTML and CSS. Pay particular attention to the concepts of responsive design. At least learn the basics of javascript. In that order.
posted by Benny Andajetz at 8:37 AM on April 25, 2013 [2 favorites]
one more resource you might want to check out is the Mozilla Developer Network. they have a pretty exhaustive collection of intros and reference guides and such for pretty much anything you'd want to do client-side (i.e. in the browser). they have a pretty decent (but basic) intro to HTML available here. their information is generally more accurate than w3schools.
one other thing: as far as tools go, any regular text editor will do for authoring (from scratch). you should be more picky about your browser, though. if you're still using Internet Explorer, now's a good time to stop (at least until you have to check your stuff out in it to make sure it still works). both Chrome and Firefox adhere more towards standards than IE, and both have some pretty excellent tools to help you debug and work with your code. Chrome has the Web Inspector and Firefox has Firebug (which is a 3rd party extension you have to install), and both can help you see how everything interacts together and will allow you to even make changes to your code live so you can see how it works. and, once you get into JavaScript and stuff of that nature, both have pretty excellent regular debugging tools. (keep in mind HTML and CSS are not programming languages, per se, where JavaScript is.) if you're on a Mac, you can for the most part swap out Safari for Chrome. at some point you will have to deal with IE's idiosyncrasies but for starting out ignoring it will make things easier.
posted by mrg at 3:30 PM on April 25, 2013 [1 favorite]
one other thing: as far as tools go, any regular text editor will do for authoring (from scratch). you should be more picky about your browser, though. if you're still using Internet Explorer, now's a good time to stop (at least until you have to check your stuff out in it to make sure it still works). both Chrome and Firefox adhere more towards standards than IE, and both have some pretty excellent tools to help you debug and work with your code. Chrome has the Web Inspector and Firefox has Firebug (which is a 3rd party extension you have to install), and both can help you see how everything interacts together and will allow you to even make changes to your code live so you can see how it works. and, once you get into JavaScript and stuff of that nature, both have pretty excellent regular debugging tools. (keep in mind HTML and CSS are not programming languages, per se, where JavaScript is.) if you're on a Mac, you can for the most part swap out Safari for Chrome. at some point you will have to deal with IE's idiosyncrasies but for starting out ignoring it will make things easier.
posted by mrg at 3:30 PM on April 25, 2013 [1 favorite]
This thread is closed to new comments.
I'd recommend this book as an introduction. It's very simple and assumes you know nothing about anything. It's html 4, but the differences between 4 and 5 are slight enough that you can learn them afterwards, and all major browsers support both equally well.
You will eventually want to familiarize yourself with mysql (or another database like postgres), javascript, and one other programming language (ruby, php, python, or something similar), but again, you don't need to know ANY of those to get started with HTML.
posted by empath at 2:45 AM on April 25, 2013 [5 favorites]