HTML5 Step by Step


HTML5 Step by Step

Faithe Wempen

If you are completely new to building web pages with HTML, and especially HTML5, then this book is for you. This book is one that I own and it is a very practical book. The good thing about buying this book is that you get access to the online version with source files free.

Faithe Wempen does a very good job of easing people new to building web pages in, and getting them up to speed quickly. The way the book is written makes it easy to read all the way through. You also build a gardening website as you work your way through the book. So if you have never built a website in your life, and don’t know where to start, then by the end of this book you will have learnt the latest web standard (HTML5) that works consistently on all operating systems including Apple, built your very first functional website to add to your budding web portfolio, and you will have a solid grounding to build compelling Internet websites, games, and business applications by enhancing your knowledge of HTML Games Programming, CSS3, and JavaScript. Once you have learnt the basics, you are free to explore the potential of what you capable of achieving.

I highly recommend this book to anyone who is serious about learning HTML5.

Advertisements

Internet Explorer Developer Toolbar


If you are a web developer and would like to know how certain websites are put together, or you want to debug your own website, then there is a good little tool for you to use in Internet Explorer. The Internet Explorer Developer Toolbar provides a number of different tools for viewing markup, css, scripts, providing link and image reports, and for validating a web page against various standards.

IEDeveloperToolbar
IE Developer Toolbar In Action

HTML Utopia: Designing Without Tables Using CSS


HTML Utopia: Designing Without Tables Using CSS (Build Your Own) by Dan Shafer is a practical step-by-step guide to building attractive websites using CSS in place of tables. I have used this book to learn CSS when I was working for a UK company to redevelop their website.  The content of this book is very useful, and I find that it is a very good book to have on your desk when doing web development.  The book comes with sample source code that you can download from the book’s website.  You may find that having a simple grasp of writing HTML is useful when reading this book.

CSS Layers


The sample code below shows how to put one layer behind another using css. The parent layer contains the image. The child layers contains the text content. In the head you will notice that there is a style for the child layer, and the only setting in it is the position attribute. The position attribute is set to absolute positioning. It’s that simple.

CSS Layers Example using Absolute Positioning
CSS Layers Example using Absolute Positioning

The above code produces the output below.

Screen shot of a an unordered list with a background image using layers.
Screen Shot Produced by the Above HTML

Debugging Websites


When faced with problem websites that do not render as they should in different browsers, there are three sets of debugging tools that are at your disposal. The tools are FireBug which is a FireFox plugin, the IE9 Developer Tools, and Google Chrome’s Developer Tools. Each set of tools has its own set of useful features.

I will leave it up to you to investigate each set of tools and their features. Personally, I like FireBug for the way it displays the DOM and various types of errors, Google Chrome for the way you can inspect elements and step through JavaScript, and IE9 for the Layout feature to help you find formatting issues.

Another thing to be aware of is that Opera does not like empty strings. To get round this, place a space inside the double quotes.

When developing new websites that simple work in all different browsers with graceful degradation, I suggest using Google Chrome Frame and HTML5 Boilerplate.