This is going to be
the fourth post in a series of posts regarding HTML 5. You can find
the other posts here , here and here.In this post I will provide a hands-on example with HTML 5 and CSS 3 on how to create a page with multiple columns and proper layout.I will show you how to use CSS 3 to create columns much easier than relying on DIV elements and
the float CSS rule.I will also show you how to use browser-specific prefix rules (-ms for Internet Explorer and -moz for Firefox ) for browsers that do not fully support CSS 3.In order to be absolutely clear this is not (and could not be) a detailed tutorial on HTML 5. There are other great resources for that.Navigate to
the excellent interactive tutorials of W3School.Another excellent resource is HTML 5 Doctor.Two very nice sites that show you what features and specifications are implemented by various browsers and their versions are http://caniuse.com/ and http://html5test.com/. At this times Chrome seems to support most of HTML 5 specifications.Another excellent way to find out if
the browser supports HTML 5 and CSS 3 features is to use
the Javascript lightweight library Modernizr.In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.I will create a simple page with information about HTML 5, CSS 3 and JQuery. This is
the full HTML 5 code. <!DOCTYPE html><html lang="en"> <head> <title>HTML 5, CSS3 and JQuery</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="header"> <h1>Learn cutting edge technologies</h1> <p>HTML 5, JQuery, CSS3</p> </div> <div id="main"> <div id="mainnews"> <div> <h2>HTML 5</h2> </div> <div> <p> HTML5 is
the latest version of HTML and XHTML.
The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses
the needs of Web Applications, an area previously not adequately covered by HTML. </p> <div class="quote"> <h4>Do More with Less</h4> <p> jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. </p> </div> <p>
The HTML5 test(html5test.com) score is an indication of how well your browser supports
the upcoming HTML5 standard and related specifications. Even though
the specification isn't finalized yet, all major browser manufacturers are making sure their browser is ready for
the future. Find out which parts of HTML5 are already supported by your browser today and compare
the results with other browsers.
The HTML5 test does not try to test all of
the new features offered by HTML5, nor does it try to test
the functionality of each feature it does detect. Despite these shortcomings we hope that by quantifying
the level of support users and web developers will get an idea of how hard
the browser manufacturers work on improving their browsers and
the web as a development platform.</p> </div> </div> <div id="CSS"> <div> <h2>CSS 3 Intro</h2> </div> <div> <p> Cascading Style Sheets (CSS) is a style sheet language used for describing
the presentation semantics (the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but
the language can also be applied to any kind of XML document, including plain XML, SVG and XUL. </p> </div> </div> <div id="CSSmore"> <div> <h2>CSS 3 Purpose</h2> </div> <div> <p> CSS is designed primarily to enable
the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as
the layout, colors, and fonts.[1] This separation can improve content accessibility, provide more flexibility and control in
the specification of presentation characteristics, enable multiple pages to share formatting, and reduce complexity and repetition in
the structural content (such as by allowing for tableless web design). </p> </div> </div> </div> <div id="footer"> <p>Feel free to google more about
the subject</p> </div> </body> </html> The markup is very easy to follow. I have used some HTML 5 tags and
the relevant HTML 5 doctype.
The CSS code (style.css) follows body{ line-height: 30px; width: 1024px; background-color:#eee; } p{ font-size:17px; font-family:"Comic Sans MS" } p,h2,h3,h4{ margin: 0 0 20px 0; } #main, #header, #footer{ width: 100%; margin: 0px auto; display:block; } #header{ text-align: center; border-bottom: 1px solid #000; margin-bottom: 30px; } #footer{ text-align: center; border-top: 1px solid #000; margin-bottom: 30px; } .quote{ width: 200px; margin-left: 10px; padding: 5px; float: right; border: 2px solid #000; background-color:#F9ACAE; } .quote :last-child{ margin-bottom: 0; } #main{ column-count:2; column-gap:20px; column-rule: 1px solid #000; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #000; -webkit-column-rule: 1px solid #000; } All
the rules in
the css code are pretty simple.
The layout is achieved with that CSS rule #main{ column-count:2; column-gap:20px; column-rule: 1px solid #000; -moz-column-count: 2; -webkit-column-count: 2; -moz-column-gap: 20px; -webkit-column-gap: 20px; -moz-column-rule: 1px solid #000; -webkit-column-rule: 1px solid #000; Do note
the column-count,column-gap and column-rule properties. These properties make
the two column layout possible.Please have a look at
the picture below to see why I used prefixes for Chrome (webkit) and Firefox(moz).It clearly indicates that
the CSS 3 column layout are not supported from Firefox and Chrome. Finally I test my simple HTML 5 page using
the latest versions of Firefox,Internet Explorer and Chrome. In my
machine I have installed Firefox 15.0.1.Have a look at
the picture below to see how
the page looks I have installed Google Chrome 21.0 in my
machine.Have a look at
the picture below to see how
the page looks Have a look at
the picture below to see how my page looks in IE 10. My page looks
the same in all browsers. Hope it helps!!!
