Sorry your browser is not supported!

Hi guys,

I'm in tutorial making mode again, and decided to try my hand at something a little different. This time I'm covering HTML and website design. The first two tutorials have been created. The first, discusses HTML and demonstrates how to create a simple freeform webpage, and how to use tags.

The second relates to the more professional XHTML standard, and discusses how to setup a template html document that conforms to the XHTML standards.

The third, which is still being written will cover CSS usage.

For how, here's the first of the three. I'll get the second one up in the next half hour, I'm just waiting for youtube to do it's thing.

Lesson One, free-form HTML



Lesson Two, XHTML template



Lesson Three, CSS



Lesson Four, Validating XHTML and CSS



XHTML, CSS and HTML5 tips and tricks video.

Are people still using xhtml for new sites? I think time would be better spent learning html5 and learning xml for rss feeds.

I'm not saying there's no use for xhtml, but seems like a wasted effort. Anyways, I haven't watched the videos yet so I will when I get some time

The short version:

HTML5 support is crap. Even with the latest browsers, it's standard still isn't implemented. And if you ever want to run HTML5 on internet explorer or older web browsers. You're screwed.

The long version:

There are four primary web engines, Trident, Gecko, Webkit, and Presto. Trident is Internet explorer's engine, this has the worst support for HTML5 at this time. Gecko is better but not great, this is the basis of Firefox, then there's Presto which is Opera's engine, finally the best engine with HTML5 support is Webkit, this covers apples safari, and Google chrome was well as a number of mobile devices.

If you have a look at http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(HTML5) it will explain which elements of the HTML5 standards are supported and which isn't. As you can see Internet explorer, the most widely distributed web browser has terrible support and they don't seem to be making a lot of effort to change this. This means if you wish to use a lot of HTML5's features users will have to grab Google Chrome for maximum compatibility.

If your user base is using anything other than the very latest releases of IE, Opera and firefox then they can forget about any html5 support at all!

XHTML 1.1 on the other hand, is a mature standard, and has been adopted by all modern web browsers in full. Internet explorer 8 and 7 were an exception, but everything else supports it, and Internet explorer 9 has full support now.

The upshot of this, is that HTML5 while newer, is still being implemented, XHTML 1.1 has been implemented, so if I want to write a web page that works with all web browsers of a reasonable age. Then XHTML is the better standard.

It should be noted that XHTML 2.0. and XHTML5 are also being developed. So your hard won XHTML 1.1 knowledge need not go to waste. The books I've read relating to HTML5 so far, teach XHTML 1.1 first, and add's information on HTML5 elements as it goes on.

Finally there are applications for XHTML that go beyond the web browser. For instance, I released an ebook not so long ago in epub format. The epub format uses XHTML code and CSS, both formats I demonstrate in my tutorials.

HTML5 at the moment is a big buzz word, but it's going to be a few years before working with it is really worth while. After all what is the point in writing a website with elements most of the worlds browsers can't even use?

Hmm, yeah, it's never clear cut. ie8 and 9 have their own issues and I along with many other people can't switch to it.

At the same time, like you said not everyone supports html5. html4.01 is probably the best supported, but it's not as nice of an option. Really, it depends on what you're doing and what you want your site to look like when it fails to work fully.

Tutorial 3 uploaded, tutorial 4 will follow in about an hour to an hour and a half.

And video 4 is up, that concludes the first tutorial set.

Absolutely. Daniel pretty much explained it. I don't see xhtml getting dumped for quite some time still.

Sorry, but are you new to web development? This is not a quality unique to HTML5, it's the same with everything about web development

HTML5 is a good example, but there are examples even in CSS1 support. Try font-size with px units, for example:

font-size:20px;

is honored by all browsers but

font-size: 20 px;

(with space after number) is only honored by Chrome (depends on other elements in the CSS, but in general this is the case). Heck, even if this property is honored, font size is not consistent between browsers, nor is font or WOFF support.

So, complaining about support issues between browsers? Welcome to web development!

I wouldn't really say that's a support issue, more of a syntax issue. The code is supported, it's just that chrome is a little less restrictive towards that particular error.

If if was only chrome that support font-size: at all, I'd see your point. For the most part, from what I've seen CSS2.1 (which is what I validate my code too in the tutorials) is mostly supported.

For a complete reference you can check http://www.webdevout.net/browser-support-css I admit no browser is perfect, however Internet explorer 6 and 7 are the worst offenders, and they are pretty old now. Even firefox 2 does a lot better. CSS3 pretty much fails. Which really just goes to demonstrate my point. The newer standards are fantastic, right up until you try to make the sodding things work lol. The older standards may not have all the features you desire! But at last the support in newer web browsers is pretty much complete now.

I suspect HTML5 and CSS3 will come into their own in a few years. But for now, the oldies work! When the new stuff works I'll be happy to adopt it, and start writing tutorials

Ok last tutorial for a bit, this one relates to HTML5. It demonstrates that all your hard won XHTML and CSS knowledge isn't going to waist! It shows you how to go from XHTML to HTML5 and integrate a video directly into your webpage with some kind of reasonable formatting.

See the first post for the 5th video.

Tomorrow it's back to work, and writing! Yay!!

Hey Daniel, you know what's going on with the video codec for HTML5? What the majority will actually be using?

As always with HTML standards, it's a bit of a mess. Basically people are debating the issue. At the moment, as far as I can tell the formats:

mp4 (I've tested with h.264 and MPEG-4, both work in Chrome)
ogv (the ogg vorbis offering)
Webm (googles format)

Are supported in Chrome. I believe OGV and mp4 are supported in firefox 4.0 but don't quote me on that.

Usefully Internet Explorer of course doesn't work with any of it lol. Go microsoft!

Anyway I've not had to install a codec because as far as I'm aware the browser does the decoding for these formats.