Customer Service 1-800-221-5528

Murach’s HTML5 and CSS3 (3rd Edition)

by Zak Ruvalcaba and Anne Boehm
19 chapters, 682 pages, 289 figures
Published April 2015
ISBN 978-1-890774-83-7
List price: $54.50

This book presents a complete course in web design using HTML5 and CSS3. It starts with a crash course in the first 8 chapters...including a new chapter on Responsive Web Design...that gets your students using HTML and CSS at a professional level. It is followed by three sections that can be taught in whatever sequence you think works the best.

Buy This Book

You are currently on the Murach site for instructors. To buy this book, please visit our retail site.

I love the Murach HTML5 book—and a couple of my colleagues have heard good things through the grapevine and stopped by to ask which book I was using, so you might just pick up a couple more adoptees. I'm very happy with it and am planning to use it as my primary text for the foreseeable future.”

Shelly Hokanson, Assistant Professor
School of Media Arts and Design
James Madison University

  • About this Book
  • Table of Contents
  • Courseware
  • FAQs
  • Corrections

What this book does

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.

What's new in this book

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.

Book features

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.

What courses this book can be used for

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).

What software your students need

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.

That’s why our book recommends Aptana Studio 3 as the text editor. This editor is available for free; it can be used for entering HTML and CSS (and JavaScript, too); and it runs on both Windows and Mac OS systems. To make it easy for your students to adjust to this editor, the appendix in our book shows how to download and install the software, and chapter 2 gives a quick tutorial on using it.

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.

Presentation options

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.

What instructors say about this book

“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

View the table of contents for this book in a PDF: Table of Contents (PDF)

Click on any chapter title to display or hide its content.

Section 1 A crash course in HTML and CSS

Chapter 1 Introduction to web development

How web applications work

The components of a web application

How static web pages are processed

How dynamic web pages are processed

A survey of web browsers and server-side scripting languages

How client-side JavaScript fits into web development

An introduction to HTML and CSS

The HTML for a web page

The CSS for a web page

A short history of the HTML and CSS standards

Tools for web development

Text editors for HTML and CSS

IDEs for web development

FTP programs for uploading files to the web server

How to view deployed web pages

How to view a web page

How to view the source code for a web page

Five critical web development issues

Users and usability

Cross-browser compatibility

User accessibility

Search engine optimization

Responsive Web Design

Chapter 2 How to code, test, and validate a web page

The HTML syntax

The basic structure of an HTML document

How to code elements and tags

How to code attributes

How to code comments and whitespace

The CSS syntax

How to code CSS rule sets and comments

How to code basic selectors

How to use Aptana to work with HTML and CSS files

How to create a project

How to open an HTML file

How to start a new HTML file

How to edit an HTML file

How to open or start a CSS file

How to edit a CSS file

How to preview and run an HTML file

How to test, debug, and validate HTML and CSS files

How to test and debug a web page

How to validate an HTML file

How to validate a CSS file

Chapter 3 How to use HTML to structure a web page

How to code the head section

How to code the title element

How to link to a favicon

How to include metadata

How to code text elements

How to code headings and paragraphs

How to code special blocks of text

How to code inline elements for formatting and identifying text

How to code character entities

How to code the core attributes

How to structure the content of a page

How to use the primary HTML5 semantic elements

How to use some of the other HTML5 semantic elements

When and how to code div and span elements

How to code links, lists, and images

How to code absolute and relative URLs

How to code links

How to code lists

How to include images

A structured web page

The page layout

The HTML file

Chapter 4 How to use CSS to format the elements of a web page

An introduction to CSS

Three ways to provide CSS styles for a web page

Two ways to provide for browser compatibility

How to specify measurements and colors

How to specify measurements

How to specify colors

How to use the CSS3 color specifications

How to code selectors

How to code selectors for all elements, element types, ids, and classes

How to code relational selectors

How to code combinations of selectors

How to code attribute selectors

How to code pseudo-class and pseudo-element selectors

How to work with Cascading Style Sheets

How the cascade rules work

How to use the developer tools to inspect the styles that have been applied

How to work with text

How to set the font family and font size

How to set the other properties for styling fonts

How to set properties for formatting text

How to use CSS3 to add shadows to text

How to float an image so text flows around it

A web page that uses external style sheets

The page layout

The HTML file

The CSS file

Chapter 5 How to use the CSS box model for spacing, borders, and backgrounds

An introduction to the box model

How the box model works

A web page that illustrates the box model

How to size and space elements

How to set heights and widths

How to set margins

How to set padding

A web page that illustrates sizing and spacing

The HTML for the web page

The CSS for the web page

A version of the CSS that uses a reset selector

How to set borders and backgrounds

How to set borders

How to use CSS3 to add rounded corners and shadows to borders

How to set background colors and images

How to use CSS3 to set background gradients

A web page that uses borders and backgrounds

The HTML for the web page

The CSS for the web page

Chapter 6 How to use CSS for page layout

How to float elements in 2- and 3-column layouts

How to float and clear elements

How to use floating in a 2-column, fixed-width layout

How to use floating in a 2-column, fluid layout

How to use floating in a 3-column, fixed-width layout

Two web pages that use a 2-column, fixed-width layout

The home page

The HTML for the home page

The CSS for the home page

The speaker page

The HTML for the speaker page

The CSS for the speaker page

How to use CSS3 to create text columns

The CSS3 properties for creating text columns

A 2-column web page with a 2-column article

How to position elements

Four ways to position an element

How to use absolute positioning

How to use fixed positioning

A table of contents that uses positioning

Chapter 7 How to work with lists and links

How to code lists

How to code unordered lists

How to code ordered lists

How to code nested lists

How to code description lists

How to format lists

How to change the bullets for an unordered list

How to change the numbering system for an ordered list

How to change the alignment of list items

How to code links

How to link to another page

How to format links

How to use a link to open a new browser window or tab

How to create and link to placeholders

How to link to a media file

How to create email, phone, and Skype links

How to create navigation menus

How to create a vertical navigation menu

How to create a horizontal navigation menu

How to create a 2-tier navigation menu

How to create a 3-tier navigation menu

The CSS for a 3-tier navigation menu

Chapter 8 How to use Responsive Web Design

Introduction to Responsive Web Design

The three components of a responsive design

How to test a responsive design

How to implement a fluid design

Fluid layouts vs. fixed layouts

How to convert fixed widths to fluid widths

How to size fonts

How to scale images

A web page with a fluid design

How to use CSS3 media queries

How to control the mobile viewport

How to code media queries

Common media queries for a responsive design

How to build responsive menus with the SlickNav plugin

A web page that uses Responsive Web Design

The design of the web page

The HTML for the web page

The CSS for the web page

Section 2 More HTML and CSS skills as you need them

Chapter 9 How to work with images

Basic skills for working with images

Types of images for the Web

How to include an image on a page

How to resize an image

How to align an image vertically

How to float an image

Advanced skills for working with images

How to use the HTML5 figure and figcaption elements

How to work with thumbnails

How to do image rollovers

How to create image maps

Related skills for working with images

When to use an image editor

How to get images and icons

How to create favicons

Chapter 10 How to work with tables

Basic HTML skills for coding tables

An introduction to tables

How to create a table

How to add a header and footer

Basic CSS skills for formatting tables

How to use CSS properties to format a table

How to use the CSS3 structural pseudo-classes for formatting tables

Other skills for working with tables

How to use the HTML5 figure and figcaption elements with tables

How to merge cells in a column or row

How to provide for accessibility

How to nest tables

How to control wrapping

Chapter 11 How to work with forms

How to use forms and controls

How to create a form

How to use buttons

How to use text fields

How to use radio buttons and check boxes

How to use drop-down lists

How to use list boxes

How to use text areas

How to use labels

How to group controls with fieldset and legend elements

How to use a file upload control

Other skills for working with forms

How to align controls

How to format controls

How to set the tab order and assign access keys

How to use the HTML5 features for data validation

The HTML5 attributes and CSS3 selectors for data validation

How to use regular expressions for data validation

How to use a datalist to present entry options

How to use the HTML5 controls

How to use the email, url, and tel controls

How to use the number and range controls

How to use the date and time controls

How to use the search control for a search function

How to use the color control

How to use the output element to display output data

How to use the progress and meter elements to display output data

A web page that uses HTML5 data validation

The page layout

The HTML

The CSS

Chapter 12 How to add audio and video to your website

An introduction to media on the web

Common media types for video and audio

Video codecs

Audio codecs

Audio and video support in current browsers

How to encode media

How to add audio and video to a web page

How to use the object and param elements

How to use the embed element

How to use the HTML5 video and audio elements

How to fall back to Flash for backward compatibility

A web page that offers both audio and video

The page layout

The HTML

Chapter 13 How to work with fonts and printing

How to embed fonts in a web page

How to use the CSS3 @font-face selector to embed fonts

How to use Google Web Fonts

How to use Adobe Edge Web Fonts

The skills for formatting printed web pages

How to define the style sheets and rule sets for printed pages

Recommendations for print formatting

CSS properties for printed pages

A two-column web page with print formatting

The web page

The links to the style sheets

The printed page

The CSS for the print style sheet

Chapter 14 How to use CSS3 transitions, transforms, animations, and filters

How to use CSS3 transitions

How to code transitions

How to create an accordion using transitions

How to use CSS3 transforms

How to code 2D transforms

A gallery of images with 2D transforms

How to use CSS3 animations

How to code simple animations

How to set the keyframes for a slide show

How to use CSS3 filters

How to code filters

The ten filter methods applied to the same image

Section 3 JavaScript and jQuery for the non-programmer

Chapter 15 How to use JavaScript and jQuery to enhance your web pages

Introduction to JavaScript

How JavaScript works

Three ways to include JavaScript in a web page

How DOM scripting works

Methods and properties for DOM scripting

How JavaScript handles events

The Email List application in JavaScript

The HTML

The JavaScript

Introduction to jQuery

How to include jQuery in your web pages

How to code jQuery selectors, methods, and event methods

The Email List application in jQuery

The HTML

The jQuery

How to use jQuery as a non-progammer

The Image Rollover application

The Image Swap application

A Slide Show application

Websites for JavaScript and jQuery code

Chapter 16 How to use jQuery UI and jQuery plugins to enhance your web pages

Introduction to jQuery UI

What jQuery UI is and where to get it

How to download jQuery UI

How to include jQuery UI in your web pages

How to use any jQuery UI widget

How to use four of the most popular jQuery UI widgets

How to use the Accordion widget

How to use the Tabs widget

How to use the Button and Dialog widgets

Introduction to jQuery plugins

How to find jQuery plugins

How to use any jQuery plugin

How to use three of the most popular plugins

How to use the Lightbox plugin for images

How to use the bxSlider plugin for carousels

How to use the Cycle 2 plugin for slide shows

Chapter 17 How to use jQuery Mobile to build mobile websites

How to work with mobile devices

How to provide pages for mobile devices

How to use a JavaScript plugin to redirect mobile browsers to a mobile website

How to set the viewport properties

Guidelines for designing mobile web pages

Guidelines for testing mobile web pages

How to get started with jQuery Mobile

What jQuery Mobile is and where to get it

How to include jQuery Mobile in your web pages

How to create one web page with jQuery Mobile

How to code multiple pages in a single HTML file

How to navigate between pages

How to use dialogs and transitions

How to create buttons

How to create a navigation bar

How to format content with jQuery Mobile

The default styles that jQuery Mobile uses

How to apply themes to HTML elements

How to use jQuery Mobile for page layout

How to create collapsible content blocks

How to create an accordion

How to create a list

A mobile website that uses jQuery Mobile

The layout for the mobile website

The HTML for the mobile website

Section 4 How to design and deploy a website

Chapter 18 How to design a website

Users and usability

What web users want is usability

The current conventions for usability

Design guidelines

Think mobile from the start

Use the home page to sell the site

Let the users know where they are

Make the best use of web page space

Divide long pages into shorter chunks

Know the principles of graphics design

Write for the web

How to design a website

The lifecycle of a website

Step 1: Define the audience and set the goals

Step 2: Develop the site map

Step 3: Wireframe the critical pages

Step 4: Illustrate the critical pages

Other design considerations

Development teams

Top-down design and prototyping

Chapter 19 How to deploy a website on a web server

How to get a web host and domain name

How to find a web host

How to get a domain name

How to transfer files to and from the web

How to install FileZilla Client

How to connect to a website on a remote web server

How to upload and download files

Four more skills for deploying a website

How to test a website that has been uploaded to the web server

How to get your website into search engines and directories

How to control which pages are indexed and visited

How to maintain a healthy website

If you aren’t already familiar with the supporting courseware that we provide for a book, please go to About our Courseware. As you will see, our courseware consists of the end-of-chapter activities in the book, the files in the student download at our retail site, and the instructor’s materials. These components provide everything that other publishers provide in a way that delivers better results.

If you are familiar with our courseware, here’s a quick summary of the courseware for this book. For a detailed description in PDF format, please read the Instructor’s Summary.

End-of-chapter activities in the book

  • Term lists
  • Chapter summaries
  • Practice exercises

Student download at our retail site

  • HTML and CSS code for the applications and examples in the book
  • Starting code for the book exercises
  • Solutions to the book exercises

Appendix A in the book gives your students complete instructions for downloading and installing these items on a PC or Mac.

Instructor’s materials

  • Instructional objectives by chapter
  • PowerPoint slides for classroom presentations
  • Test banks in multiple formats
  • Additional chapter exercises that aren’t in the book, plus their solutions
  • Short exercises that aren’t in the book that can be used for added practice, quizzes, or tests, plus their solutions
  • Generic projects that offer minimal guidance as they have your students develop small websites using their own content (as a result, we don't provide solutions to these projects)
  • The files that students can download at our retail site: (1) the book applications, (2) starting points for the exercises in the book, and (3) solutions to the exercises in the book

Below are the answers to the questions that have come up most often about this book. If you have any questions that aren’t answered here, please email us. Thanks!

What do I do if I get this error when installing Aptana Studio 3: “Failed to correctly acquire installer_nodejs_windows.msi fle: CRC error”?

This error message indicates that you don’t have a version of Node.js on your computer that is compatible with the version of Aptana that you’re installing. If you see this message, exit from the Aptana installer. Then, go to this website address to automatically download an installer file named node-v0.10.13-x86.msi: http://go.aptana.com/installer_nodejs_windows. Finally, run this installer file. After that, you should be able to install Aptana without any problem.

To view the corrections for this book in a PDF, just click on this link: View the corrections

Then, if you find any other errors, please email us so we can correct them in the next printing of the book. Thank you!

Murach college books and courseware since 1974