Beginning HTML5 and CSS3 For Dummies

✍ Scribed by Ed Tittel; Chris Minnick

Publisher: John Wiley & Sons, Inc.
Year: 2013
Tongue: English
Leaves: 387
Series: For Dummies
Edition: 1
Category: Library

No coin nor oath required. For personal study only.

✦ Synopsis

Your full-color, friendly guide to getting started with HTML5 and CSS3!

HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the latest versions of HTML and CSS: HTML5 and CSS3. Introducing you to the syntax and structure of the languages, this helpful guide shows you how to create and view a web page, explains ideal usage of HTML5 and CSS3, walks you through the CSS3 rules and style sheets, addresses common mistakes and explains how to fix them, and explores interesting HTML5 tools.

• Serves as an ideal introduction to HTML5 and CSS3 for beginners with little to no web development experience
• Details the capabilities of HTML5 and CSS3 and how to use both to create responsive, practical, and well-designed websites
• Helps you understand how HTML5 and CSS3 are the foundation upon which hundreds of millions of web pages are built
• Features full-color illustrations to enhance your learning process

Beginning HTML5 and CSS3 For Dummies is the perfect first step for getting started with the fundamentals of web development and design.

✦ Table of Contents

Title Page
Copyright Page
Table of Contents
Introduction
About this Book
Foolish Assumptions
Icons Used in This Book
Beyond the Book
Where to Go from Here
Part I: Getting Started with HTML and CSS on the Web
Chapter 1: An Overview of HTML and CSS on the Web
How and Where Web Pages Come to Life Online
HyperText
Content versus presentation
Web browsers
Getting to know Internet protocols
Understanding HTML and Its Versions
Different versions of HTML
Creating HTML markup
Building HTML documents
Understanding the Role of CSS
Different versions here, too
Creating CSS markup
Dissecting a Simple Markup Example
Where’s the HTML?
Where’s the CSS?
A partnership of equals
Chapter 2: Meeting the Structure and Components of HTML
Like Any Language: Syntax and Rules
Color-coding the markup
Breaking down the elements
Adding Attributes to Your HTML
Examining Entities in Markup
Non-ASCII characters
Character codes
(Special) tag characters
Organizing Web Pages
Organizing HTML text
Complementing and enhancing text
Chapter 3: Creating and Viewing a Web Page
Before You Get Started
Creating a Page from Scratch
Step 0: Gather your tools
Step 1: Planning a simple design
Step 2: Writing some HTML
Step 3: Saving your page
Step 4: Viewing your page
Editing an Existing Web Page
Posting Your Page Online
Part II: Getting the Structure and Text Right
Chapter 4: HTML Documents Need Good Structure
Establishing a Document Structure
HTML Document Organization Revisited
HTML DOCTYPE Starts Things Off
The Element
Anatomy of the
Meeting the himself
Handling metadata with
Redirecting users to another page
Naming your page with a <br /> The <body> Is a BIG Container<br /> Chapter 5: Text and Lists<br /> Formatting Text<br /> Paragraphs<br /> Headings<br /> Controlling Text Blocks<br /> Block quotes<br /> Preformatted text<br /> Horizontal rules<br /> Organizing Information<br /> Numbered lists<br /> Bulleted lists<br /> Defi nition lists<br /> Nesting lists<br /> Chapter 6: Tip-Top Tables in HTML<br /> How <table> Got a Bad Name in HTML<br /> What’s in a Table? LOTS of Markup<br /> Setting Up a Table Border<br /> The Table Head (<thead>) and Its Elements<br /> Managing Table Layouts<br /> Making Good Table Bodies<br /> Shaping a solid table<br /> Sitting at the Footer of the Table<br /> Exploring and Explaining a Table<br /> Oh caption, my caption<br /> Is the header dead yet?<br /> Marching through the table body<br /> Finishing with the footer<br /> Chapter 7: Working with Forms in HTML<br /> Exploring Types of Web Forms<br /> Search forms<br /> Data collection forms<br /> Creating Forms<br /> Structure<br /> Input tags<br /> Input fi elds<br /> Form validation<br /> Processing Data<br /> Processing forms on your pages<br /> Designing User-Friendly Forms<br /> Other Noteworthy Forms-Related Markup<br /> Form Frameworks<br /> Part III: Adding Links, Images, and Other Media<br /> Chapter 8: Getting Hyper with Links in HTML<br /> Basic Links 101<br /> Exploring link options<br /> Avoiding common mistakes<br /> Customizing Links<br /> Opening new windows<br /> Specifying locations in web pages<br /> Linking to non-HTML resources<br /> Chapter 9: Working with Images in HTML<br /> The Role of Images in a Web Page<br /> Creating Web-Friendly Images<br /> Adding an Image to a Web Page<br /> Image location<br /> Using the <img> element<br /> Adding alternative and title text<br /> Specifying image size<br /> Image borders and alignment<br /> Images That Link<br /> Triggering links<br /> Building image maps<br /> Chapter 10: Managing Media and More in HTML<br /> The Battle of the Media Formats<br /> Meet the major audio formats<br /> Meet the major video formats<br /> Comparing Traditional and HTML5 Media Handling<br /> Mastering HTML5 Media Markup<br /> Making beautiful music with audio<br /> Moving media with video<br /> Undergoing the conversion experience<br /> Working with Web Page Controls<br /> Displaying a meter bar<br /> Tracking progress on activities<br /> Tracking and reporting on time<br /> Updating HTML5 controls<br /> Part IV: Adopting CSS Style<br /> Chapter 11: Advantages of Style Sheets<br /> Advantages of Style Sheets<br /> The four steps to style<br /> Understanding the C in CSS<br /> What CSS can do for a web page<br /> Styling a Document with CSS<br /> Using HTML5 Boilerplate<br /> Normalize before you stylize<br /> What you can do with CSS<br /> Putting CSS in Its Place<br /> Pixels, points, and dots — Oh my!<br /> Understanding the viewport<br /> Property measurement values<br /> About the CSS3 Standard<br /> Chapter 12: CSS Structure and Syntax<br /> Exploring CSS Structure and Syntax<br /> Selectors and declarations<br /> The selectors<br /> Inheriting styles<br /> Understanding the Cascade<br /> Chapter 13: Using Different Kinds of Style Sheets<br /> Applying Inline Styles<br /> Getting to Know Internal Style Sheets<br /> Understanding the <style> element<br /> Figuring out internal style sheet scope<br /> Working with External Style Sheets<br /> CSS fi les<br /> Link element attributes<br /> Importing and when to use @import<br /> Part V: Enhancing Your Pages’ Look and Feel<br /> Chapter 14: Managing Layout and Positioning<br /> Managing Layout<br /> Tiny boxes<br /> Block versus inline elements<br /> Normal flow<br /> Managing Positioning<br /> About coordinates and offsets<br /> Relative positioning<br /> Absolute positioning<br /> Floating<br /> Using a Layout Generator<br /> Chapter 15: Building with Boxes, Borders, and Buttons<br /> Meeting the Box Model<br /> Putting the Box Model into Practice<br /> Specifying padding and margin widths<br /> Adding borders<br /> Aligning text<br /> Indenting text<br /> Creating buttons with CSS<br /> Chapter 16: Using Colors and Backgrounds<br /> Defi ning Color Values<br /> Color names<br /> Color numbers<br /> Defi ning Color Defi nitions<br /> Text<br /> Links<br /> Backgrounds<br /> Advanced backgrounds<br /> Chapter 17: Web Typography<br /> Finding Out about Fonts<br /> Font family<br /> Sizing<br /> Trying Out Text Treatments<br /> Embolden with bold<br /> Emphasizing with italic<br /> Changing capitalization<br /> Getting fancy with the text-decoration property<br /> Checking Out the Catchall Font Property<br /> Experimenting with Web Fonts<br /> Font fi le formats<br /> Finding fonts<br /> Linking fonts<br /> Using Google Fonts<br /> Chapter 18: CSS Text and Shadow Effects<br /> Creating Shadows<br /> text-shadow<br /> box-shadow<br /> Creating Inset Text<br /> Creating 3D Text<br /> Creating a Letterpress Effect<br /> Drop Shadows<br /> Text Rotation<br /> Chapter 19: Multimedia and Animation with CSS<br /> Using CSS with Multimedia<br /> Visual media styles<br /> Paged media styles<br /> Getting Animated<br /> Using the animation properties<br /> Creating animations with @keyframes<br /> Animating color<br /> Part VI: The Part of Tens<br /> Chapter 20: Ten Keys to Mobile Web Design<br /> Design for Different Mobile Devices<br /> Design for People<br /> Design for Small Screens<br /> Design for Low Bandwidth<br /> Design for Touch<br /> Design for Distracted Surfers<br /> Test on Many Mobile Devices<br /> Design for Simplicity<br /> Set Up Mobile Web Addresses<br /> Include a Link to the Desktop Site<br /> Chapter 21: Ten HTML Do’s and Don’ts<br /> Don’t Lose Sight of Your Content<br /> Do Structure Your Documents and Your Site<br /> Do Make the Most from the Least<br /> Do Build Attractive Pages<br /> Don’t Lose Track of Those Tags<br /> Do Avoid Browser Dependencies<br /> Don’t Make It Hard to Navigate Your Wild and Woolly Web<br /> Don’t Think Revolution, Think Evolution<br /> Don’t Get Stuck in the Two-Dimensional-Text Trap<br /> Don’t Let Inertia Overcome You<br /> Chapter 22: Ten Ways to Kill Web Bugs Dead<br /> Make a List and Check It — Twice<br /> Master Text Mechanics<br /> Lack of Live Links — a Lousy Legacy<br /> When Old Links Must Linger<br /> Make Your Content Mirror Your World<br /> Look for Trouble in All the Right Places<br /> Cover All the Bases with Peer Reviews<br /> Use the Best Tools of the Testing Trade<br /> Schedule Site Reviews<br /> Foster User Feedback<br /> If You Give to Them, They’ll Give to You!<br /> Chapter 23: Ten Cool HTML Tools and Technologies<br /> WYSIWYG HTML Editors<br /> Dreamweaver<br /> Other WYSIWYG editors<br /> Helper HTML Editors<br /> Aptana Studio<br /> Other helper editors<br /> Inexpensive Graphics Editors<br /> Professional Graphics Editors<br /> Adobe Photoshop<br /> Adobe Fireworks<br /> W3C Link Checker<br /> Other Link Checkers<br /> HTML Validators<br /> FTP Clients<br /> Miscellaneous Helpful Web Tools<br /> Part VII: Appendixes<br /> Appendix A: Twitterati<br /> Appendix B: About the Dummies HTML Site<br /> About WordPress<br /> The dashboard<br /> Appearance and themes<br /> Pages and posts<br /> Widgets<br /> Responsive Design<br /> HTML5 Cafe<br /> The home page<br /> About Us<br /> The Menu<br /> Contact Us<br /> HTML5 Boilerplate<br /> Index<br /> EULA</p> </div> </section> <section class="parchment-card rounded-sm p-4"> <h2 class="cinzel text-sm tracking-widest mb-1" style="color:var(--gold);">✦ Subjects</h2> <hr class="divider mb-3"> <p class="text-sm italic" style="color:var(--ink-faint);">HTML; cascading style sheets</p> </section> </div> <div class="mt-10"> <div class="flex items-center gap-3 mb-6"> <hr class="divider flex-1"> <p class="cinzel text-xs tracking-[0.25em] shrink-0" style="color:var(--gold);">📜 SIMILAR VOLUMES</p> <hr class="divider flex-1"> </div> <div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Beginning HTML5 and CSS3 for Dummies </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/beginning-html5-and-css3-for-dummies-29383080" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Beginning HTML5 and CSS3 for Dummies </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Tittel, Ed;Minnick, Chris</span> <span>📂 Library</span> <span>📅 2013</span> <span>🏛 For Dummies</span> <span>🌐 English</span> </div> <p class="mt-2 text-sm line-clamp-2 italic" style="color:var(--ink-faint);"> <b>Your full-color, friendly guide to getting started with HTML5 and CSS3!</b><br /><br />HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the latest </p> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Beginning HTML5 and CSS3 For Dummies </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/beginning-html5-and-css3-for-dummies-27378235" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Beginning HTML5 and CSS3 For Dummies </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Ed Tittel, Chris Minnick</span> <span>📂 Library</span> <span>📅 2013</span> <span>🏛 For Dummies</span> <span>🌐 English</span> </div> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Beginning HTML5 and CSS3 For Dummies </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/beginning-html5-and-css3-for-dummies-27911361" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Beginning HTML5 and CSS3 For Dummies </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Ed Tittel, Chris Minnick</span> <span>📂 Library</span> <span>📅 2013</span> <span>🏛 Wiley</span> <span>🌐 English</span> </div> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Beginning HTML5 & CSS3 for dummies </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/beginning-html5-css3-for-dummies-27723295" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Beginning HTML5 & CSS3 for dummies </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Ed Tittel, Chris Minnick</span> <span>📂 Library</span> <span>📅 2013</span> <span>🏛 Wiley</span> <span>🌐 English</span> </div> <p class="mt-2 text-sm line-clamp-2 italic" style="color:var(--ink-faint);"> <strong>Your full-color, friendly guide to getting started with HTML5 and CSS3!</strong> HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the lates </p> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> Beginning HTML5 & CSS3 for dummies </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/beginning-html5-css3-for-dummies-27722701" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 Beginning HTML5 & CSS3 for dummies </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Ed Tittel, Chris Minnick</span> <span>📂 Library</span> <span>📅 2013</span> <span>🏛 Wiley</span> <span>🌐 English</span> </div> <p class="mt-2 text-sm line-clamp-2 italic" style="color:var(--ink-faint);"> <strong>Your full-color, friendly guide to getting started with HTML5 and CSS3!</strong> HTML and CSS are essential tools for creating dynamic websites and help make your websites even more effective and unique. This friendly-but-straightforward guide gets you started with the basics of the lates </p> </div> </div> </article> <article class="parchment-card rounded-sm p-4 transition-all"> <div class="flex gap-4"> <div class="shrink-0"> <div class="w-[60px] h-[80px] flex items-end justify-center pb-1 overflow-hidden" style="background:linear-gradient(160deg,var(--parchment-d),var(--vellum)); border:2px solid var(--gold); box-shadow:2px 2px 0 var(--parchment-d);"> <span class="text-center leading-tight px-1" style="font-family:'Cinzel',serif; font-size:0.5rem; color:var(--ink-faint); word-break:break-word;"> HTML, XHTML and CSS For Dummies </span> </div> </div> <div class="flex-1 min-w-0"> <div class="flex items-start gap-2 flex-wrap"> <a href="/html-xhtml-and-css-for-dummies-31251292" class="font-semibold text-base leading-snug line-clamp-2" style="color:var(--crimson); font-family:'Cinzel',serif;"> 📁 HTML, XHTML and CSS For Dummies </a> </div> <div class="mt-1 flex flex-wrap gap-x-4 gap-y-0.5 text-xs italic" style="color:var(--ink-faint);"> <span>✍ Ed Tittel, Jeff Noble</span> <span>📂 Library</span> <span>📅 2011</span> <span>🏛 Wiley</span> <span>🌐 English</span> </div> <p class="mt-2 text-sm line-clamp-2 italic" style="color:var(--ink-faint);"> The indispensable introductory reference guide to HTML, XHTML and CSSEven though new technologies enable people to do much more with the Web, in the end HTML, XHTML and CSS are still at the root of any Web site. The newest edition of this bestselling guide is fully updated and revised for the latest </p> </div> </div> </article> </div> </div> </div> </main> <footer style="border-top:2px solid var(--gold); background:var(--parchment-d);" class="mt-16 py-8 text-center text-sm"> <p class="fraktur text-2xl ornament mb-1">❧ Scriptorium Liberum ❧</p> <p style="color:var(--ink-faint);" class="cinzel text-xs tracking-wider"> 130M+ Volumes · Free Search & Download · No Pledge of Fealty Required </p> <p class="mt-2 text-xs" style="color:var(--ink-faint);"> Tomes are for personal study only and may not be traded for coin or commerce. </p> </footer> </body> </html>