Using this book
This book will get you up-and-running fast with HTML5 and CSS3. The HTML5 Digital Classroom is divided into two sections. The first section covers the fundamentals of HTML5 along with the essentials of styling text and creating page layouts using XHTML/HTML and CSS. If you are new to web page development, or are updating your skills from using HTML tables for layout, or simply want a refresher in CSS and HTML fundamentals, start with section one. Even if you consider yourself a skilled web pro, start with lesson one before jumping ahead to the second section where youll dive into HTML5. The second section makes up the bulk of this book. Feel free to jump ahead to this if you are an experienced web designer or developer, and already have a solid grasp of the fundamentals involved with coding HTML and CSS.
Some of the foundational material contained in the first five lessons of this book was originally published in the Web Design with HTML and CSS Digital Classroom , and it has been updated for use in this book.
About HTML5 Digital Classroom
The HTML5 Digital Classroom provides you with the information you need to explore and understand the rapidly evolving landscape of web technologies. You may already have some experience building web pages and websites and may even be experienced with design tools like Dreamweaver or Expression Web. While HTML5 and related technologies such as CSS3 and JavaScript are still undergoing revision, this book helps you understand the underlying concepts for organizing, creating, and delivering web content effectively using best practices.
The HTML5 Digital Classroom helps you to get up-and-running quickly with HTML5. While you can work through the lessons in this book in any sequence, we recommend that you start in at the first lesson and progress through the book in the sequence in which they are presented. If you are an experienced web developer, you may decide to start in lesson one, then glance over lessons two through five and resume your learning with lessons six through 15. Each lesson is designed to be stand-alone, so if you need to focus on a particular part of HTML5, feel free to jump right to that section. Each lesson includes detailed, step-by-step instructions, background information, companion video tutorials that relate directly to the lesson in the book, and lesson files for you to follow along with the concepts being presented.
The HTML5 Digital Classroom is like having your own expert instructor guiding you through each lesson while you work at your own pace. This book includes 15 self-paced lessons that let you discover essential skills, explore web design, and learn HTML5, CSS3 and JavaScript techniques that will save you time and allow you to more easily create effective HTML5 websites. Youll become productive right away with real-world exercises and simple explanations. Each lesson includes step-by-step instructions, lesson files, and video tutorials, all of which are available on http://www.digitalclassroombooks.com/epub/html5 . The HTML5 Digital Classroom lessons are developed by the same team of instructors and experts who have created many of the official training titles for companies such as Adobe Systems and Microsoft. Now you can benefit from the clear and detailed instructions provided by the expert instructors that are part of the Digital Classroom team.
Prerequisites
This book relies heavily on adding code by hand, but does not require a specific text editor when working with the HTML and CSS code. The exact text editor you use is not important, but you should choose and install a text editor before you start with the exercises in this book so that you can easily open and work with the lesson files presented in this book. You may currently have your own preferences, but weve listed some options below.
Some Mac OS text editors include BBedit and TextWrangler, both of which are available at http://www.barebones.com . Or you can use TextMate which is available for download at http://macromates.com . Another Mac OS text editor is Coda which can be found at http://www.panic.com/coda/ .
If you work on a Windows computer, you may wish to use E Text Editor which is available at http://www.e-texteditor.com or Microsoft Visual Web Developer Express which can be found at http://www.microsoft.com/expression/web .
If you already have a visual web design tool like Adobe Dreamweaver or Microsoft Expression Web installed on your computer, you can use the coding tools integrated with these software packages instead of installing a dedicated text editor. Although both Adobe and Microsoft offer free trial versions of these software tools, if you dont have either one installed, we recommend skipping them for now and instead using any one of the text editors listed above while working with this book. By using a text editor, you can focus on the design and underlying code rather than learning the user interface and functions of a specific software package.
System requirements
Before starting the lessons in the HTML5 Digital Classroom, make sure that your computer is equipped for creating and managing static websites. Because you will be using a variety of software tools, there is no formal minimum requirement for your computer, however we suggest that your computer meet or exceed the following guidelines:
Windows OS
Intel Pentium 4, AMD Athlon 64, or Multicore Intel processor; Microsoft Windows XP with Service Pack 2; Windows Vista Home Premium, Business, Ultimate, or Enterprise with Service Pack 1; or Windows 7
1GB recommended RAM
1GB of available hard-disk space for working with files
1280 800 display with 16-bit video card
Broadband Internet connection
Macintosh OS
Multicore Intel processor
Mac OS X v10.4 or greater
1 GB of RAM 1 GB of available hard-disk space for working with lesson files.
1280 800 display with 16-bit video card
Broadband Internet connection
Using web browsers that support HTML5 tags
HTML5 is a new and evolving technology and the browser you use to preview your web pages may provide dramatic differences. We make every possible effort to point out these differences in the exercises used in this book. To ensure the best results you need to use the most current version of your browser. Throughout the book you may see references to modern browsers. These are the browsers we used throughout:
Mozilla Firefox 4.0+ ( http://www.getfirefox.com )
Google Chrome 11.0+ ( http://www.google.com/chrome/ )
Apple Safari 5.0+ ( http://www.apple.com/safari/download/ )
Internet Explorer 9.0+ ( http://windows.microsoft.com/en-US/internet-explorer/products/ie/home )
Opera 11.0+ ( http://www.opera.com/browser/download/ )
You should consider downloading two or more browsers and have these available on your system. For designers and developers, it is common to have access to multiple browsers and this is important as you test HTML5 pages.
Understanding menus and commands
Menus and commands within the software tools discussed in this book are identified by using the greater-than symbol (>). For example, the command to print a document might appear as File > Print, representing that you click the File menu, then choose the Print command.