|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.
I highly recommend this book to anyone who is serious about learning HTML5.
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.
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.
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.
The above code produces the output below.
When setting the z-index you may not get the behaviour that you expected. In order for the z-index to work, you also have to set the position attribute. I discovered this when redeveloping our company website. The z-index would not work. I then set the position attribute to relative, and hey presto! It worked.
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.
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.