HTML5 - Learning From Scratch

F@ces

Hi,

Just wondering would anyone know of the best resources for learning HTML5 from scratch. When I say from scratch I mean someone with zero web development skills; no knowledge of HTML, JS or CSS. I am a developer (C++/.NET), but am looking to learn HTML5 as well.

The reason I ask is every book or website I come across assumes you have some experience (i.e. looks at the difference between HTML4 and 5, and goes from there). Same with the web and example galleries. I don't even know what my dev tool options are (my understanding is the design experience is nothing like that within Visual Studio and Blend - I wonder what tools MS are using to develop Windows 8 in HTML5?)! So what is the best way to learn it all from the beginning? Do I need to pick up individual books on HTML, Java, CSS and after all that pick up a HTML5 book? :eek:

Thanks

tadcan

http://www.w3schools.com/ has very simple lessons on the basics of both HTML/5. Dreamweaver could be called an IDE for HTML. Or you could use notepad++, save the files as index.html (index is the first page of a website) and *.css.

http://html5doctor.com/ is a good resource as well. If you are already a programmer getting up to speed should be simple enough.

http://www.sitepoint.com/ have some good books on web development.

stevenmu

Keep in mind that technically HTML 5 isn't really something brand new, it's just some proposed extensions to HTML so you have a few extra tags available to use. Although it does imply using CSS3 and Javascript. But it would stand you in good stead to just learn HTML/Javascript/CSS and then learn the extra capabilities of HTML 5.

Visual Studio 2010 does a half-decent job with HTML/Javascript, and I'd bet the next version will do a much better job (and have built in templates for the new style of Windows 8 apps).

But like learning other stuff, if you start off using a WYSIWYG editor to do everything you don't really learn the basics very well. The best things tools you can use are probably just a syntax-colouring text editor and the standard range of browsers.

The browsers all have dev tools available that help with testing and debugging that are worth looking at. IE8+ has Web Developer Tools with a good javascript debugger (early versions had a downloadable web developer extension). Firefox has a Web Developer Toolbar extension which is great for inspecting elements of your page, seeing what styles are applied etc and dynamically making changes to see how they look, and a Firebug extension which is meant to be very good for debugging javascript. Chrome has built in developer tools too which I haven't really used yet.

An important part of web/html development is standards and best practices so put a lot of your effort into this. As a quick example, when you come across tables you'll probably think that they would make a great way to lay out your whole page, but this is a bad idea for a number of reasons, you should use div tags and CSS instead (although nowadays a lot of people are making the argument in favour of tables again, but it's probably important to at least understand the argument and make an informed choice)

professore

stevenmu wrote: »

As a quick example, when you come across tables you'll probably think that they would make a great way to lay out your whole page, but this is a bad idea for a number of reasons, you should use div tags and CSS instead (although nowadays a lot of people are making the argument in favour of tables again, but it's probably important to at least understand the argument and make an informed choice)

The attached graphic will help you to make an informed choice on this

Placebo

while on this topic, can anyone tell me what browsers 100% support HTML5/CSS3 and is there any point really using them if you're gonna be doing things twice [i.e apple site has their menu as css3 and normal]

stevenmu

None of them have 100% support yet. At the moment they all support different subsets of the proposed specification, and all claim that they support more of it than the others. What's even worse is that they're all supporting them in slightly different ways, for e.g. I think they all support the <video> tag, but they require different video formats for it to work.

Some of the more bog standard stuff should be ok to use, but you'll need to do a lot of cross browser checking and hope that updates don't break anything. It's not something I'd invest a lot of time in or make a large project depend on it.

tadcan

No browser completely supports HTML5 as the spec has not been fully agreed on. It will take years for this to happen. Meanwhile feature are slowly being added over time. The web world is a bit like world history, the past is still relevant and the further promises change.

No browser supports the the html4.1/ xhtml1.1 as written. Then main reason is backwards compatibility. That is to strictly enforce the w3 standard would break many sites.

Behind the scenes the web is a shifting, moving set of technologies, loosely followed standards. It is easy to make a complete dogs dinner of the code, but the browser will do its best to show the content. IE is singled out because MS followed their own standard, now with firefox/chrome who more closely follow the standard, IE9 has had to move back towards compliance. Between firefox and chrome, the space between letters on a h1 (heading) is noticeable in the difference. From what I have heard chrome is the most 'strict' of the browsers. Though the term strict in this sense is very relative term.

tadcan

I agree with stevenmu. You can learn the basics and most of that will look almost the same across browsers. Html5 is 80% html4 with extra stuff. That 80 percent is what is used most of the time and is the bread and butter of webdev.

Placebo

thanks, i thought so, its nothing i cant pick up or look into, i just feel its a tad waste of time at the moment, drop shadows and gradients and even radius effect would work wonders but when almost 40%* is still on an old internet explorer, i guess theres not much point [*actual average stat from some of the websites i've done, god bless google analytics]

F@ces

Thanks a million everyone - excellent replies! Really appreciate it.

@tadcan - I'll check those out buddy - cheers

@stevenmu - thank you for the lengthy reply/information. Very interesting.

Placebo wrote: »

while on this topic, can anyone tell me what browsers 100% support HTML5/CSS3 and is there any point really using them if you're gonna be doing things twice [i.e apple site has their menu as css3 and normal]

This may be of help, if a little confusing

lemon_remon

I was gonna make a new thread for this but I might as well ask here.

Seeing as HTML5 is not XML will there be a such thing as XHTML5 or will HTML5, being a completely different specification, replace XHTML? Also if there will be a XHTML5 will this be recommended to use by the W3C or will HTML5 remain the standard?

tadcan

Html5 is supposed to simply the previous standards. The people behind xhtml 1 wanted a stronger typed language and I read that they may make a new version that built on html5, since that was a compromise between the previous versions.

There was a comic that explained the whole change over process. My google fu has failed me. If I get it I'll post a link.

Giblet

Placebo wrote: »

thanks, i thought so, its nothing i cant pick up or look into, i just feel its a tad waste of time at the moment, drop shadows and gradients and even radius effect would work wonders but when almost 40%* is still on an old internet explorer, i guess theres not much point [*actual average stat from some of the websites i've done, god bless google analytics]

You can do clever tricks to accomplish most of this stuff cross browser, and there's also the concept of progressive enhancement, whereas you upgrade the visual fidelity of the site, as the browser supports it.

Or, for example, you can do horrible things like this which I had to do in a project recently.

background: -moz-linear-gradient(top, rgba(225,218,208,1) 20%, rgba(255,255,255,1) 80%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(225,218,208,1)), color-stop(80%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(225,218,208,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(225,218,208,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, rgba(225,218,208,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1dad0', endColorstr='#aaffffff',GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, rgba(225,218,208,1) 20%,rgba(255,255,255,1) 80%,rgba(255,255,255,0) 100%); 

Manach

I started "HTML5 For Dummies Quick Reference" to get an overview of what the changes are. So far, fair enough.

F@ces

Anyone hear of ProStudio .NETHTML5 or have any comments on it?

EDIT: Ignore this - from what I can tell its a way of allowing winforms to work as HTML5 - meh, no thanks.

mewso

Really if you are starting from scratch simply learn HTML 4. XHTML is effectively dead. The XHTML group are gone and the cool kids are all talking about HTML5. You know those guys who write the blogs and articles about how to use the storage api and the video element while the rest of do it for a living using reliable technology that works (like HTML4).

XHTML was very promising but failed in the end because every one was really still using html and not xml. I would love to see stats but at a guess a huge percentage of developers deployed XHTML Transitional web pages and still do despite the fact that the intention was that the transitional standard was to be a stepping stone before moving on to XHTML 1.1 Strict.

It failed really because IE for example couldn't parse XML so the Strict standard couldn't even be used for the most popular browser at the time. Also if you were using a CMS you couldn't really guarantee that your content would be valid XML so people might only see an error when viewing your page. It was a nice idea but doomed really.

I think most actual developers will bide their time before using HTML5. It does introduce some good things and some bad. It wants to help us be more semantic but wrapping my unordered list (<ul>) in a nav element adds an unnecessary element in my eyes. In time it may help us to avoid div-itis but old habits dye slowly.

At the end of the day learn HTML4:-

Make your html semantic - if you wrap one element with a div you don't need the div.
Make your html accessible.
Make your javascript unobtrusive.

If you have to use HTML5 and you are using Visual Studio 2010 then download the new Web Standards Update. In general if you are an asp.net developer do not under any circumstances use any of the Asp.Net Ajax stuff use something like jQuery that makes it easier to generate unobtrusive script. Use a repeater instead of a datagrid for example so you can generate a proper table with caption, thead etc. Use controls that give you more control over the html you produce.

F@ces

@mewso - very interesting. Many thanks for the "Announcing the Web Standards Update - HTML5 Support for the Visual Studio 2010 Editor" link!

Giblet

mewso brings up an interesting point.
You will see a lot of
<nav><ul> embedding, which for me, while being semantic, just adds more tags. The entire poiint is to be semantic and accessible, but I don't want to complicating the dom either.

A simple <ul role="navigation"> works much better in my opinion, especially considering screen readers and such.

Also, if you are a .net developer, screw repeaters, get with Razor

mewso

Giblet wrote: »

Also, if you are a .net developer, screw repeaters, get with Razor

Absolutely MVC is the way to go but if someone is using a datagrid in a webforms project then that is who I'm addressing. Mind you the MVC grid helpers out there are repeating the same mistakes with tables I notice. I'm having to customise the scaffolding for say an index view too to get those theads in as well as id attributes on th cells, headers attribute on body tds and so on.