Category: HTML Tutorials

What Is HTML5?

There’s been a lot of talk about HTML5 and all of the new elements it introduces. Forms will be built and used completely differently, the structure of documents will be much more semantic, and new features will be available to website and application developers.

But, what are these semantic elements? Are they really anything new? Will they change the structure of your document at all? The simple answer is “no”. The new elements, for the most part, just make your documents easier to parse and understand (for machines and for people using assistive technology). Very few of the new elements are really all that new; they’re just the same old elements with new names for new purposes.

Read More >
Captions in HTML5

As more and more browsers begin to support HTML5 and its elements, one of the nice things we can all begin using is the <figcaption> tag. When coupled together with the new <figure> tag, the <figcaption> tag semantically connects a caption with an illustration (not necessarily an image illustration; it can be a text illustration).

Read More >
Free HTML5 Mobile Training From O’Reilly

Beginning on October 6, 2010, O’Reilly will offer a free 10-week HTML5 mobile course. The live sessions will be held each Tuesday at 3PM Pacific Time. It appears you can download the sessions at a later point but there will be a fee for the download.

Here’s an overview of what the instructor notes you will learn during the course:

  • Discover what’s new in HTML5, CSS3, and JavaScript for mobile development
  • Build your own Twitter App with these technologies
  • Create apps that detect the orientation of mobile devices
  • Use geolocation and maps in a location-based app
  • Enable mobile users to use your app offline
  • Use HTML5 web forms to create an address book app
  • Create drawings and animation with JavaScript and HTML5′s canvas element
  • Use HTML5′s audio and video elements to build a movie trailer app

You should have some basic knowledge of CSS and HTML for the course. They also recommend that you are on a Mac but you can participate if you use a PC or Linux.

Read More >
Creating a Favicon for Apple Devices

I’m making this post as much for my own reference as for anyone else’s. As you may or may not be aware, Apple devices (the iPod Touch, the iPhone and the iPad) use their own icons for bookmarked websites and apps, rather than utilizing the standard favicon.

Read More >
Use HTML5 Elements in Today’s Browsers

I am taking John Allsopp’s HTML5 Live course offered by SitePoint (a great deal, by the way), right now, and he shared a neat little tip that I wanted to pass on. You can use many of the new HTML5 elements (header, article, section, etc.) right now, even in older browsers like Internet Explorer 7.

All you need to do is add an extra “boolean attribute” to the element, and you can then style them with CSS in almost all of the browsers currently being used.

Read More >
Some Handy YouTube Tricks

I’m sure there have been times when you’ve wanted to link to a particular part of a YouTube video but, if you’re anything like me, you had no idea how to go about doing so. Well, you have two options:

  1. You can link to the video on YouTube and specify the minute and second at which you want the video to start playing.
  2. You can embed the video and specify the second at which you would like the video to start playing.
Read More >
Creating a Favicon for Your Website

Editing a favicon in GIMPWhen developing a new website, one of the last things that usually gets done is designing and creating a “favorite” icon for the site. The favicon is an icon that gets displayed in various places for your website visitors. Visitors using tabbed browsers (IE7 and 8, Firefox 2+, Chrome, Safari and Opera) will see the favicon at the left edge of the tab marker; the icon will be used in the bookmarks menu and/or toolbar when the visitor bookmarks your website; it is used as the shortcut icon on Windows when someone creates a desktop shortcut for the website and more.

Although it is possible to use GIF, PNG, JPG and BMP files as your favicon, browser support can sometimes be really inconsistent for those file formats. However, the Windows icon (ICO) format is pretty universally supported, and allows a great deal more flexibility than some of the other file formats.

Unfortunately, however, Photoshop users have probably figured out by now that PS does not support the ICO file format and are probably scratching their heads trying to figure out how to create a favicon file. There are plug-ins available for both Photoshop and Fireworks that allow designers to export images as ICO files, but those may not be ideal for all users.

Instead, you can easily download The GIMP for free (available on Windows, Linux and Mac), which has native support for ICO files.

Read More >
Improve Your Page Performance

The other day, Glen Campbell (no, not “Rhinestone Cowboy” Glen Campbell) posted some tips on Friendfeed to help people improve the performance of their Web pages. I can’t say I completely agree with every single one of the suggestions across all situations, but they are definitely a great place to start. Glen indicated to me that his tips are “basically a distallation of the Yahoo! Developer Network “Best Practices”“, but I think he’s done a really good job of pulling out the meat of those best practices and putting them in a language that can be easily understood. I hope you will evaluate the tips and best practices for yourself and use the tips that apply to your situation as well as you can.

Read More >
Styling a Definition List Nicely

Definition lists (dl) can be somewhat of a bear when trying to style them nicely. Because of the fact that the term/definition sets don’t have any kind of wrappers, you can’t successfully and reliably float them to place the terms on the left and the definitions on the right (however, once CSS2 and CSS3 selectors become more widely supported, you should be able to get more control).

However, you can do some nice things with definition lists. This article will show two examples of how definition lists could be used on your site and how to style them nicely.

Read More >
A Look Into HTML5 and CSS3

I spent most of the day today in a conference session dealing with the new elements that will be coming with the future of HTML5 and CSS3, presented by Molly Holzschlag. The session was extremely informative, and we discussed some really interesting topics. In addition to our discussion on HTML5 and CSS3, we discussed quite a bit about accessibility, browser limitations, the reasons that things are the way they are (doctype declarations, for instance) and how things might be in the future.

Molly made it very clear throughout the session that she does not own a crystal ball, so she obviously can’t tell us exactly how or when the final CSS3 or HTML5 specs will be completed and approved. However, she did give us some insight into the elements that have already been implemented and the elements that are in the process of being implemented in specific browsers. In this article, I will try to give a quick overview of some of the things she mentioned. Most likely, you’ve heard of most, if not all of these. However, I just wanted to put some of them together in one place.

Read More >

Join our team

Do you enjoy technical writing? Care about cross platform mobile apps, HTML5, Javascript and Ninja's? Write for us! We would like to hear from you, get in touch!