HTML5 CSS3 HANDBOOK

INTRODUCING HTML5 AND CSS3 GETTING TO KNOW HTML5 The Element The Element The Element The Element The Element The Element 10 The Element 10 The Element 11 INTRODUCING CSS3 The border-radius Property 13 The box-shadow Property 14 The text-shadow Property 15 The @font-face Declaration 15 The transition Property 16 PUTTING IT ALL TOGETHER WITH COFFEECUP HTML EDITOR 19 Tag List 19 Code Completion 19 HTML5 Themes and Layouts 20 Not Just a Plug 21 HTML5 AND CSS3: LOOKING FORWARD 12 22 HTML5 Forms 22 The and Elements  23 The Element 23 Data Storage 23 Thanks for Reading! 24 APPENDIX A: HTML5 CODE 25 APPENDIX B: CSS3 CODE 30 INTRODUCING HTML5 AND CSS3 Get ready, people, ’cause there’s a revolution underway It’s going to change the way websites are built and viewed, and it’s going to make the web more accessible for people, search engines, computers, smartphones, you name it It’s the shift to HTML5 and CSS3 Mark your calendars, because by mid-2011, you can expect widespread browser support for these languages What exactly are HTML5 and CSS3? They’re revised versions of the web design languages we’ve come to know and love Now keep in mind that the existing versions of HTML and CSS aren’t getting scrapped; instead, more elements and properties — and by extension, more functionality — are being added But if it’s not broken, why fix it? The answer to that question actually lies in the history behind HTML5 and CSS3 See, in 1997, the grand high pooh-bahs at the World Wide Web Consortium (W3C for short) decided to stop extending the then-current version of HTML, and instead turned their focus toward XML and XHTML Their intentions were good, and by using languages that had to be formatted correctly in order to validate, they hoped to keep things standard across the web Some designers readily adopted this new system, whereas others stuck with HTML for the looser syntax and validation rules, and still others weren’t even aware of the change A few years later, a group of developers and browser vendors petitioned the W3C to update HTML and CSS to reflect the changing nature of the web The W3C refused, staunchly clinging to the XML/XHTML ideal However, a group of people calling themselves the Web Hypertext Applications Technology Working Group (WHATWG) broke apart from the W3C They were dedicated to updating HTML and CSS while maintaining backward compatibility and forgiving error handling Eventually, the W3C saw the light and joined forces with the WHATWG, and they began work on HTML5 and CSS3 in earnest One of the things that makes HTML5 and CSS3 so powerful is hindsight We’ve learned a lot about how people interact with the web — and about the web itself — in the years since its inception, and HTML5 and CSS3 take this knowledge into account They’re also more suited to the technologies of our modern age, like smartphones and iPads, as well as to disabled users and search engines Finally, the languages are much more intuitive, meaning they’ll be easier to learn, easier to master, and easier to use to create kick-butt websites Sound too good to be true? It’s not Throughout the course of this handbook, you’ll learn just how these languages make things easier for designers, users, and devices And this webpage (Figure 1.1) is how we’re going to teach you: Fig 1.1 A webpage designed using HTML5 and CSS3 There are two things that are special about this page: 1) It’s written in HTML5 and CSS3, and 2) It will work in any current browser That’s right — you can start using this new technology today! Over the next two chapters, we’ll walk you through the steps we took to make this page By the time you finish this guide, you will be able to create simple page designs using HTML5 and CSS3 Let’s get started GETTING TO KNOW HTML5 So, how exactly does HTML5 simplify everything so much? Well, for years, we’ve had to improvise when designing page elements like headers and sidebars, and it shows If you’ve looked at the source code of most modern websites, you’ll see what is commonly referred to as “tag soup,” a seemingly endless array of elements nested inside other elements This is the standard way of doing things ­— using divisions and IDs to give semantic meaning to our markup This method came from our most respected HTML luminaries, and it has worked well up to this point However, HTML5 is going to make this process simpler and more intuitive HTML5 makes more sense from a structural standpoint by introducing more intuitive semantic elements and cleaning up a lot of the work-arounds and ambiguous markup we use today To illustrate this, let’s take a look at the HTML5 webpage we saw in the previous chapter Figure 2.1 shows how it looks without any styles Fig 2.1 A page created using just HTML5 Now, let’s take a look at the code that makes it possible We’ve included the full code for this page in Appendix A (Page 25), so you can take a look at it in its entirety You’ll notice a lot of familiar HTML elements in that block of code — old pals like ,

, , and the rest of the gang — but there are a few new faces there too Everything we cover in this example can be used in current browsers — including Internet Explorer, just as long as you paste this code into the section of your document: This link, a handy piece of JavaScript called HTML5 Shim, helps translate HTML5 for IE so it can render pages correctly We’ll spare you the technical details about how it works, but as long as you remember to post this just before your tag, your new designs will work just fine in IE The Element As all you seasoned web designers know, the element is a total mess: Yuck Well, have we got good news for you! With HTML5, you’ll notice a pleasant change Ladies and gentlemen, meet the new and improved element That’s right, with just two words, you achieve the same effect as the mess we’ve all grown to know and loathe The best part? It’s totally backwards-compatible, which means that you can use this code to specify the DOCTYPE even if you’re using HTML 4.01 or XHTML 1.0 Why would you want to that? Well, if you’re going to be switching over to HTML5 eventually anyway, you may as well start here So go ahead, what are you waiting for? The Element Moving on, you’ll notice the element Website Name This element is used to differentiate a heading from the rest of the page In this case, the heading is the element, but it can include any of the header elements (-), a table of contents, a search box, a logo — pretty much anything you might consider a heading The element is a good example of how HTML5 strives for more semantic markup See, browsers, search engines, and assistive devices interpret header elements as text, but there’s no special meaning there to set them apart from any of the other text on the page With HTML5, they know that anything inside the elements is, well, a header This means they can interpret them more appropriately That idea of appropriate interpretation is the driving force behind HTML5 The Element The next new element we’re going to cover is :
• Home
• About
• Services
• Contact
It’s used to mark up the section of the page containing navigation — think navigation bars or a links section The Element The element is used to mark up self-contained content that is intended to be distributed or syndicated — blog posts, user comments, and, you guessed it, articles — as well as any associated headers or footers In our example page, we used the element to mark up a blog post: Article Title

Posted on June 29th 2009 (…)

Lorem ipsum dolor sit amet, consectetur adipiscing elit Proin euismod tellus eu orci imper (…)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt (…)

The Element The element gives you a way to encode dates and times in your webpage code One common use for this element — including in our sample webpage — is to specify the publication date of a piece of content If you’re doing so, be sure to include the pubdate attribute, like so: June 29th 2009 There are actually a few different ways to format the datetime attribute value (the bit between the quotation marks): June 8, 2010 9 a.m on June 8, 2010 9 a.m on June 8, 2010 in Asturias, Spain Dates are always written out in YYYY-MM-DD format, and you can append them with the specific time, if you want To this, put a T right after the date, followed immediately by the time, formatted like so: HH:MM:SS (Note: Seconds are optional If you don’t want to include them, just omit the :SS bit.) Finally, append the whole kit and kaboodle with either: • Z: This sets the time to Coordinated Universal Time (UTC) • +HH:DD or -HH:DD: This allows you to set time-zone offsets from UTC Using +HH:DD format adds the amount of time you specify to your current time; using -HH:DD format subtracts the specified time The Element The element is usually used to mark up sidebars and other content that is related, but not essential, to the rest of the content An can occur within an article (like a sidebar to a story) or, as in our example, as a sidebar menu: Categories
• Menu Link
• Menu Link
• Menu Link
(…) The Element The element is a little more vague than the other elements we’ve talked about It’s basically used for just what it sounds like: to section off related parts of a document It’s up to you to decide what parts might need to be sectioned off You could use to create logical sections, like subheadings in a long article, or you could use it structurally, like we did in our sample webpage We used elements to set off the introduction to the page, the articles, different areas of the sidebar, etc.: About

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor (…)

10 Although you can use to create structural or logical sections, you should choose one usage and stick with it
• Menu Link
• Menu Link
• Menu Link
• Menu Link
• Menu Link
• Menu Link
About

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna aliqua Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

28 Blog Roll
• Menu Link
• Menu Link
• Menu Link
• Menu Link
• Menu Link
• Menu Link
Site Map
• Menu Link
• Menu Link
• Menu Link
• Menu Link
• Menu Link
• Menu Link
29
APPENDIX B: CSS3 CODE Here is the CSS3 code used to style the sample webpage /* Reset v1.0 | 20080212 - http://meyerweb.com/eric/tools/css/reset/ */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { 30 } list-style: none; blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ‘’; content: none; } /* remember to define focus styles! */ :focus { outline: 0; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need ‘cellspacing=”0”’ in the markup */ table { 31 border-collapse: collapse; border-spacing: 0; } /* tells browsers that don’t read HTML5 tags to render like divs */ header, footer, aside, nav, article, section { display: block; margin: 0; padding: 0; } clear:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden; } /* Layout */ body { background: #f0f0f0; border: none; color: #333; margin: auto; font: 14px/24px Helvetica, Arial, sans-serif; width: 960px; } 32 h1 { font: normal bold 34px/50px Arial, Helvetica, sans-serif; padding-top: 30px; } h2 { font-size: 28px; line-height: 44px; padding: 22px 0; } h3 { font-size: 18px; line-height: 22px; padding: 11px 0; } p{ font-weight: normal; padding-bottom: 22px; } a{ color: #CC6600; text-decoration: none; } a:visited { 33 color: #CC6600; outline: none; text-decoration: none; } a:hover { color: #FF9900; text-decoration: underline; } a:active { color: #CC6600; outline: none; text-decoration: none; } a:focus { outline: 1px dotted; } header h1 { padding: 30px 20px 40px; } nav#global { 34 padding: 10px 0; position: absolute; left: 0; width: 100%; background-color: #333; } nav#global ul { margin: auto; width: 960px; border: none; } nav#global ul li { display: inline; list-style: none; padding-left: 40px; } nav#global ul li a { color: #777; background-color: #222; border: 2px solid #222; font: normal bold 14px/44px Arial, Helvetica, sans-serif; padding: 10px; margin-right: 40px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center; } nav#global ul li a:hover { 35 background-color: #111; border: 2px solid #444; color: #FF9900; text-decoration: none; } nav#global ul li.selected a { color: #fff; } nav#global ul li.selected a:hover { color: #FF9900; } #intro { background-color: #ccc; margin-top: 100px; padding: 40px; -moz-border-radius: 15px; -webkit-border-radius: 15px; } #intro header h2 { font-weight: normal; line-height: 30px; padding: 0 15px 0; width: 370px; } #intro p { 36 width: 370px; } #intro a { color: #fff; background-color: #333; font: normal bold 14px/44px Arial, Helvetica, sans-serif; padding: 10px; margin-right: 40px; -moz-border-radius: 5px; -webkit-border-radius: 5px; text-align: center; } #intro a:hover { color: #FF9900; background-color: #222; text-decoration: none; } #intro #photo { 37 background-color: #fff; float: right; margin-top: -170px; -moz-box-shadow: 1px 10px #333; -webkit-box-shadow: 1px 10px #333; -moz-border-radius: 4px; -webkit-border-radius: 4px; width: 400px; height: 300px; } #photo div { background-color: #333; margin: 10px auto auto; -moz-border-radius: 2px; -webkit-border-radius: 2px; width: 380px; height: 260px; text-align: center; } #photo div h3 { color: #fff; font-size: 25px; line-height: 25px; padding: 115px 0 0; } div#main { background: url(main_bkgd.png) repeat-y top right; border: none; } #main #articles { 38 float: left; margin-left: 40px; width: 600px; border: none; } article { border-bottom: 1px dotted #aaa; padding: 15px 0; } article:last-child { border-bottom: none; } aside { float: right; margin-top: 40px; margin-right: 40px; } aside section { background-color: #F5F5F5; margin-bottom: 30px; padding: 20px 40px 20px 20px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } aside h3 { } 39 padding: 0 11px 0; nav#categories ul li, nav#archives ul li { list-style: none; margin: 5px 0; } footer { position: absolute; left: 0; width: 100%; background-color: #333; } footer div { margin: auto; padding: 40px 20px 40px; width: 920px; border: none; } footer div section { color: #777; float: left; margin-right: 25px; width: 230px; border: none; } footer div section h3 { 40 color: #fff; } nav#blogRoll ul li, nav#siteMap ul li { margin-left: 15px; } footer #about { margin-right: 60px; width: 330px; } 41