PART I:  GETTING STARTED ON THE WEBLesson 1:  Understanding How the Web Works     1 A Brief History of HTML and the World Wide Web     2Creating Web Content     2Understanding Web Content Delivery     3Selecting a Web Hosting Provider     6Testing with Multiple Web Browsers and Devices     8Creating a Sample File     9Using FTP to Transfer Files     10Understanding Where to Place Files on the Web Server     14Distributing Content Without a Web Server     17Tips for Testing Web Content     18Summary     19Q&A     20Workshop     20Exercises     22Lesson 2:  Creating Web Content     2Getting Prepared     24Getting Started with a Simple Web Page     25HTML Tags Every Web Page Must Have     28Organizing a Page with Paragraphs and Line Breaks     31Organizing Your Content with Headings     33Understanding Semantic Elements     36Using in Multiple Ways     42Understanding the Element     44Using      45Implementing the Element     45When to Use      47Using Effectively     48Summary     49Q&A     50Workshop     51Exercises     53Lesson 3:  Understanding Cascading Style Sheets     55How CSS Works     56A Basic Style Sheet     57A CSS Style Primer     63Using Style Classes     68Using Style IDs     70Internal Style Sheets and Inline Styles     71Summary     74Q&A     75Workshop     75Exercises     77Lesson 4:  Understanding JavaScript     79Learning Web Scripting Basics     80How JavaScript Fits into a Web Page     81Exploring JavaScript’s Capabilities     84Displaying Time with JavaScript     85Testing the Script     89Summary     93Q&A     93Workshop     94Exercises     96Lesson 5:  Validating and Debugging Your Code     97Validating Your Web Content     97Debugging HTML and CSS Using Developer Tools     99Debugging JavaScript Using Developer Tools     112Summary     118Q&A     118Workshop     118Exercises     120PART II:  BUILDING BLOCKS OF PRACTICAL WEB DESIGNLesson 6:  Working with Fonts, Text Blocks, Lists, and Tables     121Working with Special Characters     122Boldface, Italic, and Special Text Formatting     126Tweaking the Font     129Using Web Fonts     133Aligning Text on a Page     136The Three Types of HTML Lists     139Placing Lists Within Lists     142Creating a Simple Table     147Controlling Table Sizes     151Alignment and Spanning Within Tables     154Page Layout with Tables     157Using CSS Columns     158Summary     162Q&A     164Workshop     165Exercises     166Lesson 7:  Using External and Internal Links     167Using Web Addresses     167Linking Within a Page Using Anchors     170Linking Between Your Own Web Content     174Linking to Non-HTML Files     177Linking to External Web Content     178Linking to an Email Address     179Opening a Link in a New Browser Window     180Giving Titles to Links     181Using CSS to Style Hyperlinks     182Using Links Effectively     186Summary     187Q&A     188Workshop     189Exercises     190Lesson 8:  Working with Colors, Images, and Multimedia     191Best Practices for Choosing Colors     192Understanding Web Colors     194Using Hexadecimal Values for Colors     196Using RGB and RGBa Values for Colors     197Using CSS to Set Background, Text, and Border Colors     199Choosing Graphics Software     201The Least You Need to Know About Graphics     202Preparing Photographic Images     203Creating Banners and Buttons     210Optimizing Images by Reducing or Removing Colors     211Creating Tiled Background Images     212Placing Images on a Web Page     214Describing Images with Text     217Specifying Image Height and Width     218Aligning Images     219Turning Images into Links     223Using Background Images226Using Image Maps     227Linking to Multimedia Files     233Embedding Multimedia Files     237Additional Tips for Using Multimedia     242Summary     242Q&A     245Workshop     246Exercises     248PART III:  ADVANCED WEB PAGE DESIGN WITH CSSLesson 9:  Working with Margins, Padding, Alignment, and Floating     249Using Margins     249Padding Elements     257Keeping Everything Aligned     261Centering Blocks of Content     262Understanding the float Property     263Summary     267Q&A     267Workshop     267Exercises     270Lesson 10:  Understanding the CSS Box Model and Positioning     271The CSS Box Model     271Changing the Box Model     275The Whole Scoop on Positioning     276Controlling the Way Things Stack Up     281Managing the Flow of Text     284Summary     285Q&A     285Workshop     286Exercises     288Lesson 11:  Using CSS to Do More with Lists, Text, and Navigation     289HTML List Refresher     290How the CSS Box Model Affects Lists     290Placing List Item Indicators     294Creating Image Maps with List Items and CSS     296How Navigation Lists Differ from Regular Lists     299Creating Vertical Navigation with CSS     300Creating Horizontal Navigation with CSS     310Summary     314Q&A     314Workshop     315Exercises     316Lesson 12:  Creating Layouts Using Modern CSS Techniques     317Getting Ready to Do Page Layout     318The Importance of Putting Mobile Devices First     319Understanding Fixed Layouts     319Understanding Liquid Layouts     322Creating a Fixed/Liquid Hybrid Layout     324Using Modern CSS Layout Techniques     335Summary     349Q&A     350Workshop     350Exercises     352Lesson 13:  Taking Control of Backgrounds and Borders     353Reviewing Background and Border Basics     353Using Multiple Borders and Backgrounds     355Using Forgotten Background Properties     359Using Gradients as Backgrounds     365Rounding the Corners of HTML Elements     371Using Images as Borders     373Understanding CSS Outlines     378Summary     379Q&A     379Workshop     379Exercises     381Lesson 14:  Using CSS Transformations and Transitions     383Understanding CSS 2D Transformations     383Transforming Elements in Three Dimensions     392Working with CSS Transitions     393Using JavaScript to Trigger Transitions     397Summary     398Q&A     399Workshop     399Exercises     400Lesson 15:  Animating with CSS and the Canvas     401Understanding CSS Animation     401Using the CSS Canvas     410Choosing Between CSS Animation and Canvas Animation     423Summary     424Q&A     424Workshop     424Exercises     426PART IV:  RESPONSIVE WEB DESIGNLesson 16:  Understanding the Importance of Responsive Web Design     427What Is Responsive Web Design?     427What Is Progressive Enhancement?     431Writing HTML for Responsive Web Design     435Validating HTML, CSS, and JavaScript     438Summary     439Q&A     440Workshop     440Exercises     442Lesson 17:  Designing for Mobile Devices     443Designing for Mobile Devices     443Understanding Mobile First Design     451Using Responsive Tables and Images     455Creating Responsive Layouts Without Media Queries     464Alternatives for Mobile Design Besides RWD     466Summary     468Q&A     469Workshop     469Exercise     470Lesson 18:  Using Media Queries and Breakpoints     471What Is a Media Query?     471Using Media Query Expressions     476What Is a Breakpoint?     477How to Define Breakpoints in Your CSS     477Optimal Breakpoints     483Summary     484Q&A     484Workshop     485Exercises     486PART V:  GETTING STARTED WITH DYNAMIC SITESLesson 19:  Understanding Dynamic Websites and HTML5 Applications     487Understanding the Different Types of Scripting     487Including JavaScript in HTML     488Displaying Random Content     491Understanding the Document Object Model     495Changing Images Based on User Interaction     498Thinking Ahead to Developing HTML5 Applications     501Summary     501Q&A     502Workshop     502Exercises     506Lesson 20:  Getting Started with JavaScript Programming     507Basic Concepts     507JavaScript Syntax Rules     514Using Comments     515Best Practices for JavaScript     516Understanding JSON     517Summary     518Q&A     518Workshop     519Exercises     522Lesson 21:  Working with the Document Object Model (DOM)     523Understanding the Document Object Model     523Using window Objects     524Working with the document Object     525Accessing Browser History     528Working with the location Object     530More About the DOM Structure     531Working with DOM Nodes     534Creating Positionable Elements (Layers)     536Hiding and Showing Objects     541Modifying Text in a Page     543Adding Text to a Page     545Summary     547Q&A     547Workshop     548Exercises     550Lesson 22:  Using JavaScript Variables, Strings, and Arrays     551Using Variables     552Understanding Expressions and Operators     555Data Types in JavaScript     556Converting Between Data Types     557Using String Objects     558Working with Substrings     562Using Numeric Arrays     564Using String Arrays     565Sorting a Numeric Array     567Using Functions     570Introducing Objects     575Using Objects to Simplify Scripting     577Extending Built-in Objects     582Using the Math Object     583Working with Math Methods     585Working with Dates     587Summary     590Q&A     590Workshop     591Exercises     594Lesson 23:  Controlling Flow with Conditions and Loops     595The if Statement     595Using Shorthand Conditional Expressions     599Testing Multiple Conditions with if and else     600Using Multiple Conditions with switch     602Using for Loops     604Using while Loops     606Using do...while Loops     607Working with Loops     607Looping Through Object Properties     609Summary     612Q&A     612Workshop     613Exercises     615Lesson 24:  Responding to Events and Using Windows     617Understanding Event Handlers     618Using Mouse Events     623Using Keyboard Events     627Using the load and unload Events     630Using click to Change the Appearance of a      631Controlling Windows with Objects     638Moving and Resizing Windows     643Using Timeouts     645Displaying Dialog Boxes     648Summary     650Q&A     650Workshop     651Exercises     654Lesson 25:  JavaScript Best Practices     655Scripting Best Practices     655Reading Browser Information     666Cross-Browser Scripting     669Supporting Non-JavaScript-Enabled Browsers     671Creating an Unobtrusive Script     674Summary     677Q&A     677Workshop     677Exercises     680Lesson 26:  Using Third-Party JavaScript Libraries and Frameworks     681Using Third-Party JavaScript Libraries     681Adding JavaScript Effects by Using a Third-Party Library     686Using JavaScript Frameworks     689Summary     691Q&A     691Workshop     692Exercises     694PART VI:  ADVANCED WEBSITE FUNCTIONALITY AND MANAGEMENTLesson 27:  Working with Web-Based Forms     695How HTML Forms Work     695Creating a Form     696Accepting Text Input     702Naming Each Piece of Form Data     703Labeling Each Piece of Form Data     703Grouping Form Elements     705Exploring Form Input Controls     706Using HTML5 Form Validation     716Submitting Form Data     718Accessing Form Elements with JavaScript     720Summary     723Q&A     725Workshop     725Exercises     728Lesson 28:  Organizing and Managing a Website     729When One Page Is Enough     730Organizing a Simple Site     732Organizing a Larger Site     735Optimizing Your Site for Search Engines     738Writing Maintainable Code     740Thinking About Version Control     743Using HTML and CSS Frameworks     745Summary     746Q&A     746Workshop     747Exercises     750Index     751

A mastery of HTML, CSS, and JavaScript is vital for any beginning web developer — and is only growing in importance Bestselling author Julie Meloni once again crafts an integrated, well-organized book that expertly guides the beginner through these three interconnected technologies Teaches HTML, CSS, and JavaScript in a clear language that any beginner can understand — short, simple lessons focus only on information the reader can immediately put to use in building a web site Coverage of HTML5, CSS3, and the latest JavaScript standard is thoughtfully integrated into every chapter of the book, mentioning new features or tools within context of the task or topic at hand