Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Tutorial: Html5 And Css3 Site

6,723 views

Published on

A simple tutorial on how to create a basic page using HTML5 and CSS3

Tutorial: Html5 And Css3 Site

  1. 1. HTML 5 and css 3<br />Adam’s Simple Website Tutorial<br />
  2. 2. New HTML 5 Elements<br />Header, Nav, Section, Aside, Article & Footer<br />Usually need to create ID such as #header or #nav<br />
  3. 3. New CSS 3 Elements<br />-webkit-box-shadow OR -moz-box-shadow – webkit browsers (Safari, Crome) or Mozila Browser (flock, firefox)<br />#ccc 5px 5px 20px; - Colour, top/right, bottom/left & spread<br />E.g<br />-moz-box-shadow: #ccc 5px 5px 20px; <br />
  4. 4. Some Info<br />Colours:<br />Blue - #2DA5BF<br />Red - #DA1F28<br />Grey - #464646<br />
  5. 5. New HTML 5 Layout<br />&lt;!DOCTYPE html&gt; <br />&lt;html lang=&quot;en&quot;&gt;<br />Instead of<br />&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;<br />Far more simple and straightforward<br />
  6. 6. Head<br />&lt;head&gt; <br /> &lt;title&gt;HTML5 &amp; CSS3 Example Page&lt;/title&gt; <br />&lt;!--[if IE]&gt; <br /> &lt;script src=&quot;http://html5shiv.googlecode.com/svn/trunk/html5.js&quot;&gt;&lt;/script&gt;<br /> &lt;![endif]--&gt; <br /> &lt;link rel=&quot;stylesheet&quot; href=“style.css&quot; type=&quot;text/css&quot; /&gt; <br />&lt;/head&gt; <br />
  7. 7. Header (new)<br />&lt;header id=&quot;header&quot;&gt; <br /> &lt;h1&gt;HTML5 &amp; CSS3 Website&lt;/h1&gt;<br /> &lt;p&gt;Simple website built using HTML 5 and CSS 3&lt;/p&gt;<br /> &lt;/header&gt;<br />
  8. 8. Nav (new)<br />&lt;nav class=&quot;container&quot;&gt;<br /> &lt;ul id=&quot;primaryNav&quot;&gt;<br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt;<br /> &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Gallery&lt;/a&gt;&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;ul id=&quot;secondaryNav&quot;&gt;<br /> &lt;li&gt;&lt;a href=&quot;http://css-tricks.com/&quot;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;<br /> &lt;/ul&gt;<br /> &lt;/nav&gt;<br />
  9. 9. Section (new)<br />&lt;section class=&quot;container&quot;&gt;<br /> &lt;div&gt;<br />&lt;div&gt;&lt;imgsrc=“example.jpg&quot; alt=&quot;image&quot; height=&quot;246&quot; class=&quot;polaroid&quot;/&gt;&lt;/div&gt;<br /> &lt;/div&gt;<br />
  10. 10. Section (new) - Cont<br /> &lt;aside&gt;<br /> &lt;h2&gt;<br />&lt;p&gt;Welcome to my Website!&lt;/p&gt;<br />&lt;/h2&gt;<br /> &lt;p&gt;Loremipsumdolor sit amet, consecteturadipiscingelit. Phasellus in massatortor. Sed mi dui, aliquam a lobortiseu, ultrices a erat. Duiserostellus, bibendum sit amettinciduntelementum, tempus necerat. Craspretiummassadiam. Nuncvolutpatlaoreeterategetluctus. Duisconsecteturlectus a massacondimentumsodales. Nullamluctusposuerenibhquisdignissim. Maurismattisnislutturpissagittis at consequatleoporta.&lt;/p&gt;<br /> &lt;/aside&gt;<br /> &lt;/section&gt;<br />
  11. 11. Footer (new)<br />&lt;footer&gt; <br /> &lt;p&gt;Website copyright 2009 Adam Stewart&lt;/p&gt;<br /> &lt;/footer&gt;<br />
  12. 12. CSS - Body<br />body { background: #EBEBEB; font: 15px/1.5 Georgia, Serif; width: 1000px; margin: 0 auto;}<br />
  13. 13. CSS- The “Clearfix” hack.<br />.container:after {<br /> visibility: hidden;<br /> display: block;<br /> font-size: 0;<br /> content: &quot; &quot;;<br /> clear: both;<br /> height: 0;<br /> }<br />.container { display: inline-block; }<br />/* start commented backslash hack */<br />* html .container { height: 1%; }<br />.container { display: block; }<br />/* close commented backslash hack */<br />
  14. 14. CSS - Style<br />a { text-decoration: none; }<br />h1 { font: bold 30px Helvetica, Sans-Serif; margin: 0 0 5px 0; color:#464646; }<br />h2 { font: bold 20px Helvetica, Sans-Serif; margin: 0 0 10px 0; color: #DA1F28; }<br />
  15. 15. CSS - Header<br />header { margin-top: 1em; }<br />header p { margin: 0 0 12px 0; padding:0; color:#464646; font-family:Arial, Helvetica, sans-serif; }<br />
  16. 16. CSS - Nav<br />nav { background: #464646;}<br />nav a { color: #fff; padding: 10px; display: block; border-right: solid #fff 1px; font-family:Arial, Helvetica, sans-serif;}<br />nav a:hover { background-color: #DA1F28; }<br />navul { list-style: none; }<br />navulli { float: left; font-size: 16px; }<br />nav#leftNav{ margin-left: 10px; }<br />nav#rightNavli { float:right; }<br />nav #rightNava { border-left:solid #666 1px; border-right:none; background: #DA1F28; }<br />nav #rightNava:hover { background: #2DA5BF;}<br />nav #rightNav{ margin-right: 10px;}<br />nav, footer{ -moz-border-radius:10px; -webkit-border-radius:10px; }<br />
  17. 17. CSS – aside and section<br />aside { color: #464646; font-family:Arial, Helvetica, sans-serif; float:right; width:300px;}<br />section { margin-top: 2em; padding:10px;}<br />
  18. 18. CSS – Image (polaroid)<br />.polaroid { display: block; background: #fff; padding: 10px; -moz-box-shadow: #ccc 5px 5px 20px; -webkit-box-shadow: #ccc 5px 5px 20px; margin-bottom:1em; width:640px; float:left;}<br />.polaroidimg { width: 640px; }<br />
  19. 19. CSS - Footer<br />footer { padding: 8px; text-align: center; background:#CCC; margin-top: 2em; position: relative; font-family:Arial, Helvetica, sans-serif; color:#464646;}<br />
  20. 20. CSS – HTML5 Elements<br />/* HTML5 tags */ <br />header, section, footer, <br />aside, nav, article, figure { <br /> display: block; <br />}<br />

×