--~ ·.: ~--::c . .. . ·- -.. - GET OFF TO A FAST START with an 8-chapter crash course on the HTML and CSS slcills that every web developer needs to lmow USE RESPONSIVE WEB DESIGN to create pages tl1at look good ai1d work right on any screen or device ... with new chapters on Flexible Box and Grid Layout MASTER HTMLS AND CSS3 as you enhance your sites with videos, forms, embedded fonts, gradients, rounded corners, transitio11s, animation, and more! LEARN PROFESSIONAL SKILLS for every phase of, vebsite development including design and deployment 4 T H EDITION Anne Boehm Zak Ruvalcaba T R A I N I N G & R E F E R E N C E 4TH EDITION Anne Boehm Zak Ruvalcaba & MIKE MURACH ASSOCIATES, INC. 4340 N. Knoll Ave. • Fresno, CA 93722 www.murach.com • [email protected] Editorial team Authors: Anne Boehm Zak Ruvalcaba Editor: Mike Murach Production: Samantha Walker Books for web and mobile developers Murach's HTML5 and CSS3 (4th Edition) Murach's JavaScript andjQuery (3rd Edition) Murach's PHP and MySQL (3rd Edition) Murach's Java Servlets and JSP (3rd Edition) Murach's ASP.NET 4.6 Web Programming with C# 2015 Books on core Java, C#, and Visual Basic Murach's Java Programming (5th Edition) Murach's C# 2015 Murach's Visual Basic 2015 Books for database programmers Murach's MySQL (2nd Edition) Murach's SQLServer 2016for Developers Murach's Oracle SQL and PUSQLfor Developers (2nd Edition) For more on Murach books, please visit us at www.murach.com © 2018, Mike Murach & Associates, Inc. All rights reserved. Printed in the United States of America 10 9 8 7 6 5 4 3 2 1 ISBN: 978-1-943872-26-8 o n t e n t Introduction xv Section 1 The essential concepts and skills Chapter 1 Introduction to web development 3 Chapter 2 How to code, test, and validate a web page 45 Chapter 3 How to use HTML to structure a web page 85 Chapter4 How to use CSS to format the elements of a web page 123 Chapter 5 How to use the CSS box model for spacing, borders, and backgrounds 167 Chapter 6 How to use CSS for page layout 201 Chapter? How to work with lists, links, and navigation menus 239 Chapter 8 How to use Responsive Web Design 281 Section 2 Page layout and Responsive Web Design Chapter 9 How to use Flexible Box Layout for page layout and RWD 323 Chapter 10 How to use Grid Layout for page layout and RWD 351 Section 3 More HTML and CSS skills as you need them Chapter 11 How to work with images and icons 391 Chapter 12 How to work with tables 421 Chapter 13 How to work with forms 447 Chapter 14 How to add audio and video to your website 505 Chapter 15 How to work with fonts and printing 529 Chapter 16 How to use CSS3 transitions, transforms, animations, and filters 549 Section 4 Web design and deployment Chapter 17 How to design a website 571 Chapter 18 How to deploy a website on a web server 607 Section 5 Other skills for professional web developers Chapter 19 How JavaScript andjQuery are used to enhance web pages 629 Chapter 20 When and how to use third-party development tools 661 Appendixes Appendix A How to set up your computer for this book 685 •• Expanded contents VI I E x p a n d e d c o n t e n t s Section 1 The essential concepts and skills Chapter 1 Introduction to web development How web applications work ............................................................... 4 The components of a web application ............................................................................. 4 How static web pages are processed ............................................................................... 6 How dynanric web pages are processed .......................................................................... 8 A survey of web browsers and server-side scripting languages .................................... 10 How client-side JavaScript fits into web development .................................................. 12 An introduction to HTML and CSS .................................................. 14 The HTML for a web page ............................................................................................ 14 The CSS for a web page ................................................................................................ 16 A short history of the HTML and CSS standards ......................................................... 18 Tools for web development. ............................................................. 20 Text editors for HTML and CSS ................................................................................... 20 IDE s for web development ............................................................................................ 22 FTP programs for uploading files to the web server ..................................................... 24 How to view deployed web pa51es ................................................... 26 How to view a web page ............................................................................................... 26 How to view the source code for a web page ................................................................ 28 Five critical web development issues. ............................................ 30 Users and usability ........................................................................................................ 30 Cross-browser compatibility ......................................................................................... 32 User accessibility .......................................................................................................... 34 Search engine optiinization ........................................................................................... 36 Responsive Web Design ................................................................................................ 38 Chapter 2 How to code, test, and validate a web page The HTML syntax .............................................................................. 46 The basic structure of an HTML document .................................................................. 46 How to code elements and tags ..................................................................................... 48 How to code attributes ................................................................................................... 50 How to code comments and whitespace ....................................................................... 52 The CSS syntax .................................................................................5 4 How to code CSS styl e rules and comments ................................................................. 54 How to code basic selectors .......................................................................................... 56 How to use Brackets to work with HTML and CSS files ............... 58 How to open and close the folder for a website ............................................................ 58 How to open, close, and display files ............................................................................ 60 How to start a new HTML file ...................................................................................... 62 How to edit an HTML file ............................................................................................. 64 How to start and edit a CSS file .................................................................................... 66 How to use split view and the Quick Edit feature ......................................................... 68 How to preview an HTML file ...................................................................................... 70 ••• VI 11 Expanded contents How to test, debug, and validate HTML and CSS files. ................. 72 How to test and debug a web page ................................................................................ 72 How to validate an HTML file ...................................................................................... 74 How to validate a CSS file ............................................................................................ 78 Chapter 3 How to use HTML to structure a web page How to code the head section ......................................................... 86 How to code the title element ........................................................................................ 86 Ho\\' to lirlk t() a :f£1.\Ti~o11 ................................................................................................ 86 Ho\\! to i11clll.cle II1eta.cla.ta. ............................................................................................... ~8 How to code tel<t elelllents ..............................................................~ () How to code headings and paragraphs .......................................................................... 90 How to code special blocks of text ................................................................................ 92 How to code inline elements for formatting and identifying text ................................. 94 How to code character entities ...................................................................................... 96 How to code the core attributes ..................................................................................... 98 How to structure the content of a page ........................................ 1O C> How to use the primary HTML5 semantic elements .................................................. 100 How to use some of the other HTML5 semantic elements ......................................... 102 When and how to code div and span elements ............................................................ 104 How to code links, lists, and illlages ............................................ 1( )6 How to code absolute and relative URLs .................................................................... 106 How to code link.s ........................................................................................................ 108 How to code lists ......................................................................................................... 110 How to include images ................................................................................................ 112 A structured web page ................................................................... 114 The page layout ........................................................................................................... 114 The HTML file ............................................................................................................ 116 Chapter 4 How to use CSS to format the elements of a web page An introduction to CSS .................................................................. 124 Three ways to provide CSS styles for a web page ...................................................... 124 Two ways to provide for browser compatibility .......................................................... 126 How to specify 1T1easure1T1ents and colors. .................................. 128 How to specify measurements ..................................................................................... 128 How to specify colors .................................................................................................. 130 How to use the CSS3 color specifications ................................................................... 132 How to code selectors .................................................................... 134 How to code selectors for all elements, element types, ids, and classes ..................... 134 How to code relational selectors ................................................................................. 136 How to code combinations of selectors ....................................................................... 138 How to code attribute selectors ................................................................................... 13 8 How to code pseudo-class and pseudo-element selectors ........................................... 140 How to work with Cascading Style Sheets. .................................. 142 How the cascade rules work ........................................................................................ 142 How to use the developer tools to inspect the styles that have been applied ................................................................................................. 144 How to work with text ..................................................................... 146 How to set the font family and font size ..................................................................... 146 How to set the other properties for sty ling fonts ......................................................... 148 How to set properties for formatting text .................................................................... 150 How to use CSS3 to add shadows to text .................................................................... 152 How to float an image so text flows around it ............................................................. 154