Murach’s JavaScript and jQuery_175x220.jpg)
Murach's HTML5 and CSS3 (3rd Edition)
Murach’s Dreamweaver CC 2014Our Ironclad Guarantee
You must be satisfied. Try our print books for 30 days or our eBooks for 14 days. If they aren't the best you've ever used, you can return the books or cancel the eBooks for a prompt refund. No questions asked!
Murach's HTML5 and CSS3
There is a new edition of this book. Here is the original copy for this book: HTML5 and CSS3 have made significant changes to the way HTML and CSS are coded, taking web design to a new level. So if you’re learning HTML and CSS for the first time, you need to learn HTML5 and CSS3 from the start. And if you’re still using HTML and CSS, you need to upgrade to HTML5 and CSS3 right away.
College Instructors
Go to our instructor's site to learn more about this book and its instructor's materials.
As I am completing Chapter 15 in your HTML5 & CSS book, I just want to let you know how much I enjoy this book, all the cool things I am learning that continually have me saying ‘wow’ as I go through the chapters."
Dawn Kaczor, Groveland, MA
- About this Book
- Table of Contents
- FREE Downloads
- Book FAQs
- Corrections
- Reviews
What this book does
Section 1: A crash course in HTML5 and CSS3
In the 6 chapters of section 1 of this book, you’ll learn more about web development than you can from most full books. In fact, by the end of those chapters, you’ll be developing web pages the way today’s best professionals do.
That means you’ll be using HTML5 semantic elements to mark up the structure of the content on the page and CSS to format and lay out that content. If you’re new to the subject, you’ll see why you need to use float and the CSS box model right from the beginning. If you’ve used earlier editions of CSS, you’ll be amazed at how easily CSS3 lets you create pages with text and box shadows, rounded corners, and gradients.
Section 2: Refine your web pages with the features that users expect in websites today
That includes:
- How to work with links, lists, navigation bars, and navigation lists
- How to work with images, including thumbnails and rollovers
- When and how to use tables
- How to work with forms and the HTML5 validation features
- How to add audio and video to your pages (HTML5 lets you take advantage of the players that are built into all modern browsers, but you’ll also learn how to use Flash as a fallback solution for older browsers)
- How to format your web content for printing
Section 3: Use JavaScript and jQuery for special effects
This section introduces you to JavaScript and jQuery, so you can see how to:
- Use tested JavaScript code to enhance your web pages with features like image rollovers, image swaps, and slide shows
- Use jQuery to enhance your web pages with features like accordions, carousels, and popup boxes
- Use jQuery Mobile to develop web pages for mobile devices with the look-and-feel of native applications
- Get started with the HTML5 features that require the use of JavaScript, like embedded fonts, geolocation, and canvas
You’re still going to want to learn JavaScript and jQuery after you read this section so you can take them to the next level. But when you’re ready for that, you can get our JavaScript and jQuery book.
Section 4: Design and deployment
Once you have a good grasp of how to develop web pages, you can understand today’s best practices for designing a site, as shown in chapter 17. Then, chapter 18 shows you not only how to deploy your site on a web server, but how to get the site indexed on the major search engines and directories.
Who this book is for
This book is for anyone who wants to develop web pages the professional way, using HTML5 semantic tags to structure the content and CSS to format and lay it out on the page. That includes:
- budding web developers
- experienced web developers who want to upgrade to HTML5 and CSS3
- web developers who still use tables for page layout when they should be using CSS
- web programmers who don’t fully understand the power of HTML5
As we see it, mastering HTML5 and CSS3 will make any web developer at any level more effective.
What software you need
- To develop web pages, you need:
- a text editor (we recommend Aptana Studio 3)
- two or more web browsers (Internet Explorer for Windows, Safari for Macs, Google’s Chrome, Mozilla Firefox, or Opera)
The appendix in this book shows you how to download and install Aptana and the web browsers. And chapter 2 gives you a quick tutorial on using Aptana Studio 3.
Another great editor is Dreamweaver. However, it costs around $20 a month. If you want to try it, we have a book on the Dreamweaver CC version.
The perfect companion books
If you combine our HTML5 and CSS3 book with its two companion books, you’ll have the answers to all of your client-side development questions.
Murach’s Dreamweaver CC 2014
Dreamweaver is the most widely-used IDE for professional web developers. It has a powerful user interface that you can use to add HTML to a page and provide the CSS that formats it...without coding the HTML and CSS yourself. To learn how to use the latest and best version of Dreamweaver, please consider Murach’s Dreamweaver CC 2014.
Murach’s JavaScript and jQuery
Section 3 of our HTML5/CSS3 book shows you how to use tested JavaScript and jQuery code to add features like image rollovers and slide shows to your web pages. But if you want to write your own JavaScript and jQuery routines, our JavaScript and jQuery book will take your skills to the professional level.
What people say about this book
"An excellent source for anybody, novice or professional, looking to get started with HTML5 and CSS3. It is my go-to guide when I’m designing web pages."
- Jamie McMahon, DreamInCode.net
“Entry-level options don't get any better. You'll have all the skills you need to create basic web pages by the end, including HTML structure, styling with CSS, mobile web design, as well as basic JavaScript and jQuery skills.”
- Posted at an online bookseller
“For me, the great thing about this book is the way it is laid out. Information is on the left page and the visual of what is being discussed is on the right page - genius!”
- Posted at an online bookseller
"I needed to solve some specific issues with our company web site, so I dove directly into the chapters that addressed my problems. Chapter 12, How to format web pages for printing, was worth the price of the book all by itself. It allowed us to unsnarl the mess we had made of the printed version of our web pages because we got our original instructions from online articles and blogs."
- Marnie Hutcheson; posted at an online bookseller
“What makes the book better than so many other technical books is how it uses a running example that becomes more complex, and weaves in lots of CSS3 along the way. It's been very helpful towards learning the fundamentals, and not merely being used as a cookbook.”
- Posted at an online bookseller
“I usually do not like big thick programming books, but I was very impressed on how this book was structured and organized. Unlike other programming books, it was not boring at all and it was so well written that it was very easy to follow, understand, and most importantly, to LEARN from. After reading this book at work, I decided to purchase a copy of my own.”
- Posted at an online bookseller
"This is not just a training book, but also something of a cookbook and reference guide. I can see it not spending much time on my bookshelf!"
- David Bolton, news.dice.com
“In the typical Murach style, this book walks you through HTML in a clever step-by-step fashion, making it extremely easy to learn and remember. As an added benefit, the book teaches you best practices for making your web page easily accessible on the web, along with SEO every step of the way.”
- Posted at an online bookseller
“It's the first time I bought a book and enjoyed every page of it. I've been doing web developing for a while. Never saw a book like this. A++++”
- Posted at an online bookseller
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
Three critical web development issues
Cross-browser compatibility
User accessibility
Search engine optimization
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 code div and span elements
How to structure a page with the HTML5 semantic elements
How to use some of the other HTML5 semantic 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
How to use CSS with the HTML5 semantic elements in older browsers
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 the cascade rules work
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 indent and align text
How to transform and decorate 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 an external style sheet
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, liquid 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
Section 2 More HTML and CSS skills as you need them
Chapter 7 How to work with links and lists
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 or start an email message
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 navigation lists and bars
How to create a navigation list
How to create a navigation bar
The Town Hall home page with a navigation bar
Chapter 8 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 9 How to work with tables
Basic skills for using tables
An introduction to tables
How to create a table
How to use CSS to format a table
How to add a header and footer
How to use the CSS3 structural pseudo-classes for formatting 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
Other skills for working with tables
How to nest tables
How to control wrapping
Chapter 10 How to work with forms
How to use forms and controls 318
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 11 How to add audio and video to your web site
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 12 How to format web pages for printing
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 special formatting for printing
The web page
The links to the style sheets
The printed page
The CSS for the print style sheet
Section 3 JavaScript and jQuery skills
Chapter 13 How to use JavaScript to enhance your web pages
Introduction to JavaScript and DOM scripting
How JavaScript works
How the DOM (Document Object Model) works
How DOM scripting works
How to include JavaScript in an HTML document
How to use JavaScript to enhance your web pages
JavaScript for opening a popup window
JavaScript for image rollovers
JavaScript for image swaps
JavaScript for slide shows
JavaScript for tabbed data
What to do if the JavaScript doesn’t work
Web sites for JavaScript code
Another example: JavaScript for data validation
The page layout
The HTML
The JavaScript code
Chapter 14 How to use jQuery to enhance your web pages
Introduction to jQuery
What jQuery is and where to get it
How to include jQuery and jQuery UI in your web pages
How to use jQuery
How to use two of the jQuery features
jQuery for carousels
jQuery for slide shows
How to use four of the jQuery UI features
jQuery UI for accordions
jQuery UI for auto-completion
jQuery UI for popup dialog boxes
jQuery UI for sortable lists
A web page that uses jQuery
The page layout
The HTML for the accordion and the popup dialog box
The CSS for the accordion and the popup dialog box
Chapter 15 How to use jQuery Mobile to build mobile web sites
How to work with mobile devices
How to provide pages for mobile devices
How to set the viewport properties
Guidelines for designing mobile web pages
Guidelines for testing mobile web pages
An introduction to 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 use jQuery Mobile to create a mobile web site
How to code multiple pages in a single HTML file
How to use dialog boxes 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 lay out your content in two columns
How to create collapsible content blocks
How to create an accordion
How to create a contents list
A mobile web site that uses jQuery Mobile
The layout for the mobile web site
The HTML for the mobile web site
Chapter 16 Advanced HTML5 and CSS3 features
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 Typekit fonts
Other options for embedding fonts
How to use the Geolocation feature
How Geolocation works
How to show the geolocation on a Google map
How to handle Geolocation errors
How to use the web storage feature
How to use local storage
How to use session storage
How to use the Canvas feature
How Canvas works
How to draw shapes
How to draw paths and text
How to draw transparent shapes and use gradients
How to use the Drag and Drop feature
How to use HTML to create draggable content
How to use HTML to work with drag-and-drop events
How to use JavaScript for the event handlers
Section 4 How to design and deploy a web site
Chapter 17 How to design a web site
Users and usability
What web users want is usability
The current conventions for usability
Design guidelines
Use the home page to sell the site
Let the users know where they are
Make the best use of web page space
Write for the web
Chunk long pages into shorter pages
Know the basic principles of graphics design
Design methods and procedures
The use of development teams
Top-down design, stepwise refinement, and prototyping
The lifecycle of a web site
The design procedure applied to a small web site
Define the audience and set the goals
Design the home page
Design the primary content pages
Design the other pages
Plan the navigation
Plan the folders for the site
Chapter 18 How to deploy a web site 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 web site on a remote web server
How to upload and download files
Three more skills for deploying a web site
How to test a web site that has been uploaded to the web server
How to get your web site into search engines and directories
How to control which pages are indexed and visited
Appendixes
Appendix A How to set up your computer for this book
How to install Aptana Studio 3
On a Windows system
On a Mac OS system
How to install Firefox
How to install and use the source code for this book
For Windows users
For Mac OS users
Sample chapters
Chapter 5: How to use the CSS box model for spacing, borders, and backgrounds
To give you an idea of how well this book works, you can download this chapter. It shows you how to use the CSS box model to control the spacing above, below, and on the sides of elements like headings, text, and images.
This chapter also shows you how to use CSS to add borders or backgrounds to elements. That includes the CSS3 features that let you round the corners of borders, add shadows to borders, and provide gradients as backgrounds…without using the images that were required before CSS3.
Chapter 5 PDF (715Kb) Download Now
Book applications and exercises
This download includes:
- The HTML and CSS code for all of the applications that are presented in the book
- The starting source code for the exercises in the book
- The cumulative solutions for the exercises in Section 1 and Section 2 (the solution for Section 1 is the starting code for the exercises in Section 2; the solution for Section 2 is the starting code for the exercises in Section 3)
Appendix A in the book shows how to install and use these files on Windows and Mac systems.
Exe file for Windows (44Mb) Download Now
Zip file for any system (44Mb) Download Now
To view the "Frequently Asked Questions" for this book in a PDF, just click on this link: View the questions
Then, if you have any questions that aren't answered here, please email us. Thanks!
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!