HTML

How to write web pages using HyperText Markup Language, from beginner’s lessons to more advanced tutorials.

Build Responsive Sites Quickly with Foundation

31 July 2012 / 5 Comments

Responsive design is a big topic these days. A website with a responsive layout adapts to different devices — from widescreen desktops down to mobile phones — by resizing and rearranging the content in the page, as well as showing or hiding content.

While a basic responsive layout isn’t too hard to create, things can get fiddly once your layout starts getting more complex. On top of that, there are cross-browser issues to deal with, as well as setting up nice defaults for typography, colours, buttons, forms, menus, and so on.

This is where frameworks like Foundation come in. Foundation takes care of a lot of the “grunt work” involved in setting up a new site, with a responsive grid, cross-browser CSS, and good-looking default settings for all sorts of page elements.

In this introduction to Foundation, you’ll get an overview of Foundation’s features, and see how you can use the framework to rapidly prototype and build your next website. Enjoy!

7 Lovely Things About HTML5 Markup

12 July 2011 / 6 Comments

HTML5 — the latest generation of the Web’s markup language — has been creating quite a stir over the last couple of years, as more and more browsers implement the latest and greatest HTML5 features. HTML5 really hit the mainstream in 2010, in part driven by Steve Jobs’ open letter, Thoughts on Flash.

HTML5 is quite a broad term, encompassing everything from the revised markup specification through to new API features such as audio, video, canvas and geolocation.

In this article I’m going to focus on the markup language itself, and look at seven reasons why I love HTML5’s markup more than HTML4’s. We’ll look at:

Doctypes
data- attributes
Some new and improved elements and attributes
More flexible linking
Simpler markup, and
Enhancements to web forms.

Ready to upgrade your markup? Let’s go!

The Joy of HTML5 Audio: Tips & Tricks for Easy Sound Embedding

21 December 2010 / 54 Comments

Up to now, playing audio in a web browser has been a bit of a black art. Traditionally there are several ways to embed a sound in a web page — some work better than others, and many only work if you happen to be using the right browser with the right plugin.

The ubiquity of the Flash plugin has helped to a large extent, since Flash makes it easy to embed audio in a way that works with most browsers. However, this doesn’t help with browsers such as Safari on the iPhone and iPad, which don’t support Flash at all.

In short, it’s all a bit of a mess.

Fortunately, HTML5 looks set to make life easier for us developers, thanks to its audio element. This element lets you embed an audio file in a web page, as well as control playback of the sound using JavaScript. More importantly, it doesn’t require any plugin to work, and is supported by nearly all modern web browsers. (We’ll come back to browser support later!)

In this tutorial I’ll show you how to embed sounds in a page with the audio element. We’ll also take a look at how to trigger and stop the audio via JavaScript, and how to ensure our audio can play on as many web browsers as possible.

Banish JavaScript in Web Forms with HTML5

3 September 2010 / 4 Comments

View Demo »

Download Code

For years now, most Web forms have included at least some lines of JavaScript code. Typically this JavaScript is used to validate the form — that is, check all the fields have been filled in correctly before the form is sent to the server. JavaScript is also used to enhance forms with additional functionality, such as calendar widgets and the like.

While using JavaScript for these purposes is a pretty good solution, it’s not without its problems:

Not all browsers have JavaScript enabled, or can even run JavaScript.
Each Web developer builds their JavaScript form validation and widgets differently. This means that, when confronted with a new form, a user has to learn the form’s unique quirks and foibles in order to use it.
Adding decent validation to a form — not to mention creating custom widgets for things like dates and number ranges — is both fiddly and time-consuming.

The good news is that these dark days of JavaScript-laden Web forms may soon be coming to an end. Thanks to the joys of HTML5, we can now create forms with built-in validation and rich widgets for dates, numbers and so on, all without including a single line of JavaScript code. Hallelujah!

As with most cutting-edge Web stuff, there’s a catch to all this, and that is browser support (or lack of it). Fortunately, there are a few JavaScript libraries out there that can emulate HTML5 form validation and widgets, as we’ll see later in the tutorial. Sure, this does mean we’re not exactly banishing JavaScript for now, but at least we can remove it once the browsers catch up!

In this tutorial I’m going to walk you through the process of creating a nice, self-validating, widget-rich, HTML5 Web form. It’s an online order form for an imaginary software company.

You can play with the form now by trying out the demo. Fill in a couple of fields, then click “Place Your Order” to see the validation kick in. Try clicking the “Expiry date” field and see what happens.

Ready to code it? Let’s get started!

Your First 10 HTML Tags

13 July 2010 / 19 Comments

Just starting out with HTML? Here are 10 essential HTML tags that you’ll need to know when building your web pages. If you learn how these 10 tags work then you’ll have enough knowledge to put together a basic page.

At the end of the tutorial you’ll find code for an example web page that includes all 10 tags, so that you can see how to use them.

Textile and Markdown: 2 Nice Alternatives to WYSIWYG Editors

16 March 2010 / Leave a Comment

These days, many websites allow you to enter your own content — whether it’s creating a Web page, writing a blog post, or posting in a forum. In order to allow people to enter richly-formatted text and images, many sites use WYSIWYG (What You See Is What You Get) HTML editors. Great though these editors are, they do have a few drawbacks.

In this article you’ll learn about 2 popular alternatives to WYSIWYG editors: Textile and Markdown. You’ll learn what they are, how to install them, and how to use them. You’ll also compare them to each other, and to using WYSIWYG editors. The article ends with lots of useful links to help you find out more about Textile and Markdown.

HTML Comments

15 June 2009 / Leave a Comment

Like many programming languages, HTML lets you embed comments within your Web pages. A comment is a piece of text intended just for people to read; Web browsers ignore any HTML comments embedded in a page.

[Read more…] about HTML Comments

The HTML Alt and Title Attributes

17 March 2008 / 7 Comments

HTML provides two main ways to add descriptive text to page elements: the alt attribute, and the title attribute. While these two attributes may appear to work in a similar way, they have quite different purposes. This article takes a look at these two attributes, explores their similarities and differences, and shows how to use both attributes correctly.

Writing HTML-compatible XHTML

3 December 2007 / Leave a Comment

As we’ve seen in other articles in this series, XHTML offers a lot of advantages over HTML. It’s stricter, cleaner, more robust, and extensible. However, some modern browsers such as Internet Explorer don’t understand XHTML; they only understand HTML 4. Fortunately, the two languages are very similar and, by bearing a few guidelines in mind, you can write valid XHTML documents that can be processed correctly by HTML 4 browsers.

XHTML Document Types

19 November 2007 / Leave a Comment

In this article you take a look at the concept of document type definitions, or DTDs, and explore the three DTDs available to you when writing XHTML documents.

[Read more…] about XHTML Document Types

HTML

Footer

Contact Matt

Follow Matt