Introduction 1
About this Book 2
Foolish Assumptions 3
Icons Used in This Book 4
Beyond the Book 4
Where to Go from Here 5
Part I: Getting Started with HTML and CSS on the Web 7
Chapter 1: An Overview of HTML and CSS on the Web 9
How and Where Web Pages Come to Life Online 10
HyperText 10
Content versus presentation 14
Web browsers 14
Getting to know Internet protocols 16
Understanding HTML and Its Versions 17
Different versions of HTML 17
Creating HTML markup 18
Building HTML documents 19
Understanding the Role of CSS 20
Different versions here, too 20
Creating CSS markup 21
Dissecting a Simple Markup Example 22
Where’s the HTML? 22
Where’s the CSS? 23
A partnership of equals 23
Chapter 2: Meeting the Structure and Components of HTML 25
Like Any Language: Syntax and Rules 25
Color-coding the markup 26
Breaking down the elements 27
Adding Attributes to Your HTML 29
Examining Entities in Markup 30
Non-ASCII characters 30
Character codes 31
(Special) tag characters 32
Organizing Web Pages 32
Organizing HTML text 34
Complementing and enhancing text 36
Chapter 3: Creating and Viewing a Web Page 37
Before You Get Started 37
Creating a Page from Scratch 39
Step 0: Gather your tools 39
Step 1: Planning a simple design 40
Step 2: Writing some HTML 41
Step 3: Saving your page 44
Step 4: Viewing your page 46
Editing an Existing Web Page 47
Posting Your Page Online 49
Part II: Getting the Structure and Text Right 51
Chapter 4: HTML Documents Need Good Structure 53
Establishing a Document Structure 53
HTML Document Organization Revisited 54
HTML DOCTYPE Starts Things Off 55
The Element 56
Anatomy of the 56
Meeting the himself 57
Handling metadata with 57
Redirecting users to another page 58
Naming your page with a
61</p><p>The Is a BIG Container 61</p><p><b>Chapter 5: Text and Lists 63</b></p><p>Formatting Text 63</p><p>Paragraphs 65</p><p>Headings 66</p><p>Controlling Text Blocks 68</p><p>Block quotes 68</p><p>Preformatted text 69</p><p>Horizontal rules 71</p><p>Organizing Information 73</p><p>Numbered lists 73</p><p>Bulleted lists 75</p><p>Definition lists 77</p><p>Nesting lists 79</p><p><b>Chapter 6: Tip-Top Tables in HTML 81</b></p><p>How <table> Got a Bad Name in HTML 81</p><p>What’s in a Table? LOTS of Markup 82</p><p>Setting Up a Table Border 84</p><p>The Table Head (<thead>) and Its Elements 85</p><p>Managing Table Layouts 87</p><p>Making Good Table Bodies 89</p><p>Shaping a solid table 89</p><p>Sitting at the Footer of the Table 92</p><p>Exploring and Explaining a Table 92</p><p>Oh caption, my caption 93</p><p>Is the header dead yet? 93</p><p>Marching through the table body 94</p><p>Finishing with the footer 94</p><p><b>Chapter 7: Working with Forms in HTML 97</b></p><p>Exploring Types of Web Forms 97</p><p>Search forms 98</p><p>Data collection forms 99</p><p>Creating Forms 100</p><p>Structure 101</p><p>Input tags 102</p><p>Input fields 103</p><p>Form validation 113</p><p>Processing Data 115</p><p>Processing forms on your pages 115</p><p>Designing User-Friendly Forms 117</p><p>Other Noteworthy Forms-Related Markup 118</p><p>Form Frameworks 120</p><p><b>Part III: Adding Links, Images, and Other Media 123</b></p><p><b>Chapter 8: Getting Hyper with Links in HTML 125</b></p><p>Basic Links 101 125</p><p>Exploring link options 127</p><p>Avoiding common mistakes 129</p><p>Customizing Links 130</p><p>Opening new windows 130</p><p>Specifying locations in web pages 132</p><p>Linking to non-HTML resources 134</p><p><b>Chapter 9: Working with Images in HTML 139</b></p><p>The Role of Images in a Web Page 139</p><p>Creating Web-Friendly Images 140</p><p>Adding an Image to a Web Page 142</p><p>Image location 142</p><p>Using the <img> element 143</p><p>Adding alternative and title text 143</p><p>Specifying image size 146</p><p>Image borders and alignment 149</p><p>Images That Link 149</p><p>Triggering links 149</p><p>Building image maps 150</p><p><b>Chapter 10: Managing Media and More in HTML 153</b></p><p>The Battle of the Media Formats 154</p><p>Meet the major audio formats 155</p><p>Meet the major video formats 156</p><p>Comparing Traditional and HTML5 Media Handling 157</p><p>Mastering HTML5 Media Markup 158</p><p>Making beautiful music with audio 158</p><p>Moving media with video 159</p><p>Undergoing the conversion experience 162</p><p>Working with Web Page Controls 163</p><p>Displaying a meter bar 163</p><p>Tracking progress on activities 165</p><p>Tracking and reporting on time 166</p><p>Updating HTML5 controls 168</p><p><b>Part IV: Adopting CSS Style 169</b></p><p><b>Chapter 11: Advantages of Style Sheets 171</b></p><p>Advantages of Style Sheets 172</p><p>The four steps to style 173</p><p>Understanding the C in CSS 174</p><p>What CSS can do for a web page 174</p><p>Styling a Document with CSS 175</p><p>Using HTML5 Boilerplate 176</p><p>Normalize before you stylize 176</p><p>What you can do with CSS 180</p><p>Putting CSS in Its Place 182</p><p>Pixels, points, and dots — Oh my! 182</p><p>Understanding the viewport 183</p><p>Property measurement values 184</p><p>About the CSS3 Standard 186</p><p><b>Chapter 12: CSS Structure and Syntax 191</b></p><p>Exploring CSS Structure and Syntax 191</p><p>Selectors and declarations 194</p><p>The selectors 195</p><p>Inheriting styles 204</p><p>Understanding the Cascade 205</p><p><b>Chapter 13: Using Different Kinds of Style Sheets 207</b></p><p>Applying Inline Styles 208</p><p>Getting to Know Internal Style Sheets 210</p><p>Understanding the <style> element 210</p><p>Figuring out internal style sheet scope 210</p><p>Working with External Style Sheets 212</p><p>CSS files 212</p><p>Link element attributes 213</p><p>Importing and when to use @import 214</p><p><b>Part V: Enhancing Your Pages’ Look and Feel 215</b></p><p><b>Chapter 14: Managing Layout and Positioning 217</b></p><p>Managing Layout 217</p><p>Tiny boxes 217</p><p>Block versus inline elements 219</p><p>Normal flow 222</p><p>Managing Positioning 225</p><p>About coordinates and offsets 226</p><p>Relative positioning 226</p><p>Absolute positioning 227</p><p>Floating 228</p><p>Using a Layout Generator 230</p><p><b>Chapter 15: Building with Boxes, Borders, and Buttons 233</b></p><p>Meeting the Box Model 233</p><p>Putting the Box Model into Practice 235</p><p>Specifying padding and margin widths 239</p><p>Adding borders 243</p><p>Aligning text 246</p><p>Indenting text 247</p><p>Creating buttons with CSS 247</p><p><b>Chapter 16: Using Colors and Backgrounds 251</b></p><p>Defining Color Values 251</p><p>Color names 251</p><p>Color numbers 253</p><p>Defining Color Definitions 255</p><p>Text 256</p><p>Links 256</p><p>Backgrounds 258</p><p>Advanced backgrounds 259</p><p><b>Chapter 17: Web Typography 261</b></p><p>Finding Out about Fonts 261</p><p>Font family 262</p><p>Sizing 265</p><p>Trying Out Text Treatments 268</p><p>Embolden with bold 268</p><p>Emphasizing with italic 269</p><p>Changing capitalization 270</p><p>Getting fancy with the text-decoration property 271</p><p>Checking Out the Catchall Font Property 272</p><p>Experimenting with Web Fonts 273</p><p>Font file formats 273</p><p>Finding fonts 274</p><p>Linking fonts 274</p><p>Using Google Fonts 275</p><p><b>Chapter 18: CSS Text and Shadow Effects 281</b></p><p>Creating Shadows 282</p><p>text-shadow 282</p><p>box-shadow 283</p><p>Creating Inset Text 284</p><p>Creating 3D Text 285</p><p>Creating a Letterpress Effect 286</p><p>Drop Shadows 287</p><p>Text Rotation 289</p><p><b>Chapter 19: Multimedia and Animation with CSS 291</b></p><p>Using CSS with Multimedia 291</p><p>Visual media styles 293</p><p>Paged media styles 299</p><p>Getting Animated 300</p><p>Using the animation properties 302</p><p>Creating animations with @keyframes 303</p><p>Animating color 303</p><p><b>Part VI: The Part of Tens 305</b></p><p><b>Chapter 20: Ten Keys to Mobile Web Design 307</b></p><p>Design for Different Mobile Devices 307</p><p>Design for People 310</p><p>Design for Small Screens 310</p><p>Design for Low Bandwidth 311</p><p>Design for Touch 311</p><p>Design for Distracted Surfers 313</p><p>Test on Many Mobile Devices 313</p><p>Design for Simplicity 314</p><p>Set Up Mobile Web Addresses 314</p><p>Include a Link to the Desktop Site 315</p><p><b>Chapter 21: Ten HTML Do’s and Don’ts 317</b></p><p>Don’t Lose Sight of Your Content 317</p><p>Do Structure Your Documents and Your Site 318</p><p>Do Make the Most from the Least 318</p><p>Do Build Attractive Pages 319</p><p>Don’t Lose Track of Those Tags 319</p><p>Do Avoid Browser Dependencies 320</p><p>Don’t Make It Hard to Navigate Your Wild and Woolly Web 321</p><p>Don’t Think Revolution, Think Evolution 322</p><p>Don’t Get Stuck in the Two-Dimensional-Text Trap 323</p><p>Don’t Let Inertia Overcome You 323</p><p><b>Chapter 22: Ten Ways to Kill Web Bugs Dead 325</b></p><p>Make a List and Check It — Twice 325</p><p>Master Text Mechanics 326</p><p>Lack of Live Links — a Lousy Legacy 327</p><p>When Old Links Must Linger 328</p><p>Make Your Content Mirror Your World 328</p><p>Look for Trouble in All the Right Places 328</p><p>Cover All the Bases with Peer Reviews 329</p><p>Use the Best Tools of the Testing Trade 330</p><p>Schedule Site Reviews 330</p><p>Foster User Feedback 331</p><p>If You Give to Them, They’ll Give to You! 332</p><p><b>Chapter 23: Ten Cool HTML Tools and Technologies 333</b></p><p>WYSIWYG HTML Editors 334</p><p>Dreamweaver 334</p><p>Other WYSIWYG editors 335</p><p>Helper HTML Editors 335</p><p>Aptana Studio 335</p><p>Other helper editors 336</p><p>Inexpensive Graphics Editors 337</p><p>Professional Graphics Editors 337</p><p>Adobe Photoshop 338</p><p>Adobe Fireworks 338</p><p>W3C Link Checker 339</p><p>Other Link Checkers 339</p><p>HTML Validators 340</p><p>FTP Clients 341</p><p>Miscellaneous Helpful Web Tools 341</p><p><b>Part VII: Appendixes 343</b></p><p>Appendix A: Twitterati 345</p><p>Appendix B: About the Dummies HTML Site 349</p><p>About WordPress 349</p><p>The dashboard 349</p><p>Appearance and themes 350</p><p>Pages and posts 351</p><p>Widgets 351</p><p>Responsive Design 352</p><p>HTML5 Cafe 352</p><p>The home page 352</p><p>About Us 354</p><p>The Menu 354</p><p>Contact Us 354</p><p>HTML5 Boilerplate 355</p><p>Index 357</p></div>
</div>
</div>
<div class="tab_container">
<div class="descriptif tab_content" id="descriptif_public_vise">
<div><ul><li><b>Why this topic is hot: </b>HTML5 and CSS3 continue to serve as the foundation upon which hundreds of millions of web pages are built. In addition, the proliferation of mobile devices with web browsing capabilities has lead to a resurgence in the need to understand the fundamentals of HTML5 and CSS3. While not ratified, both standards have hit critical mass on being used for website development.</li><li><b>Who we are targeting:</b> beginning web programmers, designers, developers, students, and hobbyists who are just getting started with HTML5 and CSS3; as well as those users with some experience who need a handy reference by their side.</li></ul></div>
</div>
</div>
<div class="tab_container">
<div class="descriptif tab_content" id="descriptif_biographie">
<div> <p><b>Ed Tittel</b> is a 30-year veteran of the technology industry with more than 140 computing books to his credit, including the bestselling <i>HTML For Dummies</i>. <p><b>Chris Minnick</b> runs Minnick Web Services. He teaches, speaks, and consults on web-related topics and has contributed to numerous books, including <i>WebKit For Dummies</i>. </div>
</div>
</div>
<div class="trait"></div>
<div id="copyright">
© 2024 LAVOISIER S.A.S.
</div>
</div><!-- fin fiche2 -->
</main>
<div class="clear"></div>
</div><!-- fin bordure -->
<div id="recommandation">
<h2>These books may interest you</h2>
<div class="reco-ouvrage">
<a onclick="_gaq.push(['_trackEvent', 'Recommandation', '3054671 - 9781118657201 - beginning-html5-and-css3-for-dummies', 'proposition 1/3 : 2919715 - 9781118588635 - html5-and-css3-for-dummies']);" href="/books/other/html5-and-css3-for-dummies/karlins/description_2919715"><img src="https://images.lavoisier.fr/vignettes/1316428606.jpg">
<br><span class="reco-titre">HTML5 & CSS3 For Dummies</span></a>
<span class="reco-ouvrage-prix">27.33 €</span>
</div>
<div class="reco-ouvrage">
<a onclick="_gaq.push(['_trackEvent', 'Recommandation', '3054671 - 9781118657201 - beginning-html5-and-css3-for-dummies', 'proposition 2/3 : 2639723 - 9781118289389 - html5-and-css3-all-in-one-for-dummies']);" href="/books/other/html-xhtml-and-css-all-in-one-for-dummies-paperback/harris/description_2639723"><img src="https://images.lavoisier.fr/vignettes/2641708.jpg">
<br><span class="reco-titre">HTML5 and CSS3 All-in-One For Dummies</span></a>
<span class="reco-ouvrage-prix">34.72 €</span>
</div>
<div class="reco-ouvrage">
<a onclick="_gaq.push(['_trackEvent', 'Recommandation', '3054671 - 9781118657201 - beginning-html5-and-css3-for-dummies', 'proposition 3/3 : 3079377 - 9781119001164 - html5-javascript-and-jquery-24-hour-trainer']);" href="/books/information-technology/html5-javascript-and-jquery-24-hour-trainer/cameron/description_3079377"><img src="https://images.lavoisier.fr/vignettes/1316599303.jpg">
<br><span class="reco-titre">HTML5, JavaScript, and jQuery 24-Hour Trainer</span></a>
<span class="reco-ouvrage-prix">43.31 €</span>
</div>
<div class="clear"></div>
</div>
</div><!-- fin bloc -->
<div class="clear"></div>
</div><!-- fin notice -->
<!--
<script type="text/javascript" src="https://s7.addthis.com/js/250/addthis_widget.js#pubid=ra-4e56076857ff68f7"></script>
-->
<!-- SCRIPT POUR AFFICHAGE DES DESCRIPTIFS VIA DES ONGLETS -->
<script type="text/javascript">
$(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
hash = ''; //window.location.hash;
elements = $('a[href="' + hash + '"]');
if (elements.length === 0) {
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
} else {
elements.click();
}
});
</script></article>
<footer><div id="footer">
<div id="footer-liens">
<p>
<a href="/books/confidentiality.asp" rel="nofollow">Confidentiality & Security</a>
<span>-</span>
<a href="/books/help.asp" rel="nofollow">Help</a>
<span>-</span>
<a href="/books/company.asp" rel="nofollow">Company information</a>
<span>-</span>
<a href="/books/general_terms_and_conditions_of_sale.asp" rel="nofollow">Terms & conditions</a>
<span>-</span>
<a href="/books/editors.asp" rel="nofollow">Notes for publishers</a>
<span>-</span>
<a href="/books/order-tracking.asp">Order tracking</a>
<span>-</span>
<a href="/books/contacts.asp" rel="nofollow">Contact us</a>
</p>
</div>
</div></footer>
<div id="bottom"></div>
<div class="clear"></div>
</div>
</body>
</html>
