Murach’s HTML5 and CSS3 (3rd Edition)

Section 1: A crash course in HTML5 and CSS3

In the 8 chapters of section 1, your students will learn how to use HTML5 to mark up the content of web pages and CSS3 to present that content. In fact, by the end of section 1, your students will be able to develop web pages the way today’s best professionals do.

That means they will be using the HTML5 semantic elements to mark up the structure of a page. They will be using float and the CSS box model right from the beginning. And they will be using a professional subset of HTML5 and CSS3 that consists of the most-used HTML elements, CSS selectors, and CSS properties.
Now, in this new edition, your students will also learn how to use Responsive Web Design so their pages will work on all screens, from mobile devices to computers. This, of course, has become an essential skill for all web developers. That’s why it’s in the first section of the book.

Section 2: The rest of the HTML and CSS skills

Section 2 expands on section 1 by presenting the other HTML5 and CSS3 skills that professional developers need. That includes:

• How to work with images, which were introduced in section 1, including thumbnails, rollovers, and image maps
• When and how to use tables
• How to work with forms and the HTML5 validation features
• How to add audio and video to web pages by using HTML5 to work with the players that are built into all modern browsers
• How to use embedded fonts so all browsers will have access to them
• How to format web pages for printing
• How to use the CSS3 features for transitions, animation, transforms, and filters

Section 3: JavaScript and jQuery skills

Section 3 shows how to add JavaScript and jQuery features to web pages...without knowing how to code JavaScript and jQuery. That will answer the questions your students are likely to have about the common features that they see on websites. Specifically, you’re students will learn how to use

• JavaScript and jQuery to enhance web pages with features like image rollovers and image swaps
• jQuery UI and jQuery plugins to enhance web pages with features like accordions, tabs, carousels, and slide shows
• jQuery Mobile to develop a separate website for mobile devices when it’s impractical to add Responsive Web Design to an established site

If you have time to teach more JavaScript than that in your course, you can combine our HTML5 and CSS3 book with our jQuery book.

Section 4: Design and deployment

Section 4 consists of two chapters. Chapter 18 presents today’s best practices for designing a website. And chapter 19 shows not only how to deploy a site on a web server, but also how to get the site indexed on the major search engines and directories. Because of the modular structure of this book, you can teach these chapters any time after your students finish section 1…immediately after, if you want.

Most important is a new chapter on Responsive Web Design that presents all of the skills that your students need for building responsive websites that will work on all screens, from phones to tablets to computers.

Of less importance is a new chapter on CSS3 transitions, transforms, animation, and filters that lets your students add eye-catching features to their websites without using JavaScript or jQuery.

Beyond that, every chapter in the book has been improved, enhanced, and upgraded. That’s why this book works even better than the previous edition.

Like all of our books, this one has our standard features, like paired pages, logical content organization, real-world examples, modular design, exercises that solidify your students’ skills, and much more. Here, though, are features that are specific to this book.

HTML and CSS are always related

In a modern website, HTML is used to define the structure and content for the site, and CSS is used to format the content. In other words, they always work together, and that’s the way our book teaches them...from the first chapter to the last.

In contrast, some books start by first presenting a complete subset of HTML and then presenting a subset of CSS. But that means that the students don’t see the relationships between HTML and CSS until later in the book. Worse, some books have a section on HTML and a separate section on CSS. That may work okay for reference, but it doesn’t work didactically.

HTML and CSS are presented before web design

Many HTML and CSS books present web design before the students understand how a website is implemented with HTML and CSS. We think that’s a mistake.
As a result, our book first shows how to build pages with HTML and CSS. Then, after the students understand how websites are implemented, they are ready to learn the principles of web design, which can be taught any time after section 1.

Accessibility and SEO guidelines are integrated

User accessibility and search engine optimization are presented in chapter 1. After that, guidelines for accessibility and SEO are presented whenever they are relevant. For instance, when the <a> element is presented, the related accessibility and SEO guidelines are presented too.

The Responsive Web Design chapter raises your students to a new level

Chapter 8 in this book shows how to build responsive web pages with fluid layout, scalable images, and media queries. It also shows how to use a jQuery plugin called SlickNav to convert the menus for a page to a form that works on mobile devices. So, in this one manageable chapter, your students learn all the skills that they need for building responsive websites at a professional level.

The JavaScript and jQuery section adds client-side perspective

In our book, JavaScript is introduced in section 1. This gives the student some added perspective about what else the client can do, as well as some insight into how data validation, image swaps, and slide shows work.

That’s good in itself, but our book also has a section on JavaScript that includes the use of jQuery, jQuery UI,  jQuery plugins, and jQuery Mobile. Although you can skip this section if you don’t have time for it, these chapters give a useful perspective for all web designers.

The continuing application is real-world

Like other books, our book has dozens of examples that show how HTML and CSS are used in a variety of contexts. Beyond that, though, our book presents a real-world application that is progressively enhanced from one chapter to the next. In fact, this application is a simplified version of a site that we developed for a local nonprofit that brings six speakers each year to its Town Hall meetings.

This book is currently used in dozens of colleges and universities under a variety of course titles. In general, though, these course titles fall into the two categories that follow.

Web design with HTML5 and CSS3

If you want to teach a web design course that is, in essence, an HTML5 and CSS3 course, this is the book for you.

But it will also work for an introductory web design course that doesn’t cover HTML and CSS in as much depth. Because all of the sections and chapters after section 1 are independent instructional modules, you can teach section 1, select the remaining chapters that you want to include, and skip the other chapters. In that case, your students can use the rest of the book in an advanced course or as a reference for their own work.

Web design with HTML5, CSS3, and JavaScript

Because this book includes a substantial section on the use of JavaScript, jQuery, jQuery UI, and jQuery Mobile, you can also use it to teach a web design course or an introductory web design course that includes JavaScript along with HTML and CSS. Or, if you want to teach more JavaScript and jQuery in your course, you can combine our HTML5 and CSS3 book with either our Murach's JavaScript (2nd Edition) or Murach's jQuery (2nd Edition).

A text editor

Although your students can use a text editor as simple as Notepad to code HTML and CSS, we think that a text editor that includes syntax coloring, auto-completion, and error-marking will help your students build web pages more quickly and with fewer errors. That in turn means that they will learn faster.

In the book, we recommend Aptana Studio 3 as the text editor; however, it’s no longer supported and has become hard to install. So now, we recommend Brackets. It’s available for free, it can be used for entering HTML and CSS code (as well as JavaScript code), and it runs on Windows, Mac OS, and Linux systems. To help your students get started with installing and using Brackets, we’ve created a Brackets tutorial that you can use in place of the Aptana material in the book. You can distribute this to your students or have them download it from the book page at our retail website.

Of course, if you or your students are already familiar with another text editor that has similar features for working with HTML and CSS, it can be used instead.

At least two web browsers

To run and test web applications, your students should use at least two browsers:

• Their default browser: Internet Explorer (on a Windows system) or Safari (on a Mac system)
• Chrome, Firefox, or Opera

Since Internet Explorer and Safari are installed automatically, your students won’t have to install either of those browsers. And the appendix in this book shows how to download and install Firefox and Chrome.

Remember that this book is modular. That means that you can teach the chapters in sections 2, 3, and 4 in whatever sequence you prefer after your students complete section 1. That gives you content options like those that follow.

Teach the web design chapter right after section 1

Section 4 consists of two chapters. Chapter 18 is “How to design a website,” and chapter 19 is “How to test and deploy a website.” Because these chapters are independent modules, one of your content options is to teach either of these chapters right after your students complete section 1.

If, for example, the focus of your course is more on web design than HTML and CSS, we recommend that you teach chapter 18 right after section 1. That way, your students learn the principles of web design right after they learn how to use HTML and CSS to build web pages. We think this works better than teaching the principles of web design before your students have seen how the theory is applied in the real world, which is the way most textbooks handle this.

Teach only the chapters in section 2 that you select

Section 2 presents professional skills for enhancing a website, like: working with images, using tables and forms, adding audio and video, and printing a web page in a readable format. Remember, though, that you don’t have to assign all of these chapters. You don’t even have to cover every single topic within a chapter. You can choose just those that meet your course objectives.

Remember, too, that you can teach the chapters in any order. Of course, when in doubt, the sequence in the book works well. In general, this sequence moves from the simple to the complex, and from the most useful skills to the least useful. But don’t hesitate to modify it. Often, the most effective teaching sequence is the one that best reflects the interests of your students, and this book enables you to structure your course that way.

Teach only the chapters in section 3 that you select

Section 3 shows how to use JavaScript and jQuery to enhance a website. Although you probably won’t be able to assign all of these chapters in a single course, you can decide which chapters are most important and assign those.

Remember too that you don’t have to teach the chapters in section 3 after you teach the chapters in section 2. For a change of pace, you can mix some of the JavaScript and jQuery chapters in with the chapters in section 2. Since students enjoy making JavaScript enhancements to their web pages, it’s easy to get them interested. And if you’re going to show how to build mobile websites in your course, jQuery Mobile is a great way to do that.

Skip section 3 entirely

In our experience, some instructors are reluctant to adopt books that contain substantial content that they don’t have time to cover. But remember that this book is modular, so skipping the JavaScript section won’t hurt your course in any way.

And because this book costs less than most competing books, your students won’t object to it having extra content. In fact, instructors tell us that some students really appreciate it: They go on to experiment with JavaScript and jQuery on their own or use the material in a work environment.

Skip section 3 entirely

In our experience, some instructors are reluctant to adopt books that contain substantial content that they don’t have time to cover. But remember that this book is modular, so skipping the JavaScript section won’t hurt your course in any way.

And because this book costs less than most competing books, your students won’t object to it having extra content. In fact, instructors tell us that some students really appreciate it: They go on to experiment with JavaScript and jQuery on their own or use the material in a work environment.

“The HTML5/CSS3 book was an instant hit. I asked a student to evaluate it for me, and now I cannot get it back!”
- James Gonzalez, Multimedia Studies Instructor College of Marin

“Murach's HTML5 and CSS3 is still getting rave reviews from my students.”
- Al Cutting, Professor, Rhode Island

“My students have really enjoyed the HTML5 book. My thoughts are Murach books are uniquely geared towards two-year colleges. We need books that cut to the chase and hit the ground running. Thanks for providing affordable and quality books.”
- René Bylander, Instructor IT Web & Software Developer Program Wisconsin Indianhead Technical College

“Murach's HTML5 and CSS3 is the only worthwhile book I have seen in this category.”
- Andrew McConnell, Emeritus Professor Napa Valley College