Tutorial: Html5 And Css3 Site
•Download as PPTX, PDF•
7 likes•2,100 views
A simple tutorial on how to create a basic page using HTML5 and CSS3
Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Tutorial: Html5 And Css3 Site
- 1. HTML 5 and css 3 Adam’s Simple Website Tutorial
- 2. New HTML 5 Elements Header, Nav, Section, Aside, Article & Footer Usually need to create ID such as #header or #nav
- 3. New CSS 3 Elements -webkit-box-shadow OR -moz-box-shadow – webkit browsers (Safari, Crome) or Mozila Browser (flock, firefox) #ccc 5px 5px 20px; - Colour, top/right, bottom/left & spread E.g -moz-box-shadow: #ccc 5px 5px 20px;
- 4. Some Info Colours: Blue - #2DA5BF Red - #DA1F28 Grey - #464646
- 5. New HTML 5 Layout <!DOCTYPE html> <html lang="en"> Instead of <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Far more simple and straightforward
- 6. Head <head> <title>HTML5 & CSS3 Example Page</title> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <link rel="stylesheet" href=“style.css" type="text/css" /> </head>
- 7. Header (new) <header id="header"> <h1>HTML5 & CSS3 Website</h1> <p>Simple website built using HTML 5 and CSS 3</p> </header>
- 8. Nav (new) <nav class="container"> <ul id="primaryNav"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> </ul> <ul id="secondaryNav"> <li><a href="http://css-tricks.com/">Contact Us</a></li> </ul> </nav>
- 9. Section (new) <section class="container"> <div> <div><imgsrc=“example.jpg" alt="image" height="246" class="polaroid"/></div> </div>
- 10. Section (new) - Cont <aside> <h2> <p>Welcome to my Website!</p> </h2> <p>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.</p> </aside> </section>
- 11. Footer (new) <footer> <p>Website copyright 2009 Adam Stewart</p> </footer>
- 12. CSS - Body body { background: #EBEBEB; font: 15px/1.5 Georgia, Serif; width: 1000px; margin: 0 auto;}
- 13. CSS- The “Clearfix” hack. .container:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } .container { display: inline-block; } /* start commented backslash hack / * html .container { height: 1%; } .container { display: block; } /* close commented backslash hack */
- 14. CSS - Style a { text-decoration: none; } h1 { font: bold 30px Helvetica, Sans-Serif; margin: 0 0 5px 0; color:#464646; } h2 { font: bold 20px Helvetica, Sans-Serif; margin: 0 0 10px 0; color: #DA1F28; }
- 15. CSS - Header header { margin-top: 1em; } header p { margin: 0 0 12px 0; padding:0; color:#464646; font-family:Arial, Helvetica, sans-serif; }
- 16. CSS - Nav nav { background: #464646;} nav a { color: #fff; padding: 10px; display: block; border-right: solid #fff 1px; font-family:Arial, Helvetica, sans-serif;} nav a:hover { background-color: #DA1F28; } navul { list-style: none; } navulli { float: left; font-size: 16px; } nav#leftNav{ margin-left: 10px; } nav#rightNavli { float:right; } nav #rightNava { border-left:solid #666 1px; border-right:none; background: #DA1F28; } nav #rightNava:hover { background: #2DA5BF;} nav #rightNav{ margin-right: 10px;} nav, footer{ -moz-border-radius:10px; -webkit-border-radius:10px; }
- 17. CSS – aside and section aside { color: #464646; font-family:Arial, Helvetica, sans-serif; float:right; width:300px;} section { margin-top: 2em; padding:10px;}
- 18. CSS – Image (polaroid) .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;} .polaroidimg { width: 640px; }
- 19. CSS - Footer footer { padding: 8px; text-align: center; background:#CCC; margin-top: 2em; position: relative; font-family:Arial, Helvetica, sans-serif; color:#464646;}
- 20. CSS – HTML5 Elements /* HTML5 tags */ header, section, footer, aside, nav, article, figure { display: block; }
Editor's Notes
- In HTML 5 there are some new elements. These have been introduced to make web design more “semantic” i.e it does what is says on the tine. So in this case header would be the header of the page, footer would be the footer of the page and so on.Before we would have had to create ID’s in CSS such as #header in order to define a header section.
- In CSS3 like HTML5 there are also some new elements that you can use to make life a lot easier. For instance this code shows how CSS can now create shadows!Before it would have been a lengthy and monotonous process of creating a top-right-corner shadow image and a top-left-corner shadow image etc. Now it’s nice a simple and part of css which also means that the shadow will not affect other objects it will simple sit on top of them nicely if you so wish.As you can see the css here is saying webkit-box-shadow which means that webkit browsers such as Safari and Chrome will respond to this tag whereas the moz-box-shadow will affect how mozilla based browser show a shadow such as firefox and flock.
- Here are the colours we will be using in the tutorial, it may be best to jot these down now as they will come in handy later. These are Hex codes as colours in HTML are defined by a hash tag and then 6 numbers after. HTML/CSS can also recognise “red”, “black” etc however if you want a custom colour this is the way to go about it.
- So lets begin, open dreamweaver up and click file, new then double click on HTML. With your blank html file delete all the stuff that Dreamweaver puts in for you, we don’t need that we are going to enter it all in ourselves. Save this HTML as index.htmlWith HTML 5 the layout has changed a little, as you can see here instead of define a DOCTYPE which I have to admit is very confusing even to me you simply put <!DOCTYPE html>, wow I hear you say! The same for language, nice and simple <html lang="en"> so html language is English.This is far more simple and straightforward
- Now we are editing the body section of the site, this is where everything a users see sits.So we open body up with <body>Right so this is the new HTML5 element “Header”So this is going to contain our title and subtitle of the site, it can also be used to hold the logo and other “header” elements such as logins, search forms etc.This is nice and simple so we open the header with <header> and open the heading 1 class which is <h1> so that our title will be read first in screen readers for accessibility reason and for correctly structuring the site. Add the title “HTML 5 & CSS3 Website” then close the heading 1 with the forward slash at the front </h1>After that we will add a little bit of text using the paragraph tag so <p> and close it it with </p>Then close the header </header>
- Again a new element Nav or navigationHere we start we <nav> but we are going to give it a class of “container” we we learn what this does later.Then we will start the navigation with <ul> or unordered list so this is hear to hold the bullet points or <li>, the css will put these bullet points inline and structure them correctly with the CSS later. The first <ul> has an ID of “leftNav” as it will be on the left side of the navigation and the second ul will have a ID of “rightNav” as it will be on the right hand side of the navigation.In each <ul> is a <li> element or list item which is the bullet points we spoke about that will get transformed later. In the <li> we have <a href=“#”> which is the hyperlink to where the “click” will go and then the actual text that will show, so “Home”, “About and “Gallery”We make sure all elements are closed with the forward slash and then close the nav - </nav>
- Section is a new element that defines an area or section in a site so we are going to include the aside and image div in this.So we open section up <section> and again we are adding the class-”container” this basically make sure no elements overlap and that the div don’t collapse.Then we have a <div> to hold the image in. Within that div we have the image div itself “imgsrc=“example.jpg" alt="image" height="246“ class="polaroid"” so this is pointing to the image, example.jpg and saying how high and wide it should be as well as applying that polaroid class to it.The class polaroid refers to a CSS class that makes the photo have a shadow and a white polaroid like border around itClose those divs off </div> and now onto the aside
- The aside is like a sidebar in wordpress, it is a section that relates bit not directly so it is aside or to the side.This is really simple HTML with a heading 2 class <h2> and the <p> class we had in the header earlier.Close all the elements offAnd we can now close the section as we are done with that </section>
- Now for the CSS......................Go to file, new then double click CSS. Save this as style.css so that the stylesheet link we put in the HTML will find this CSS, also make sure it is in the SAME folder as the index.html file.SO we need to firstly say how the body of the page it self should look.So we have defined the background which in this case is just a colour but it could be an image too. What font size and type and the width of the page itself. We also have the margin class will ensure that the page stays in the centre at all time.So we write body then open it with { add the above elements the close it } there are no forward slash closes here, that is just HTML. Also each element with the class is separated by a semi colon “;” not a comma or dash etc.
- Right complicated bit the Clear Fix hack,Now for the purpose of this tutorial I will basically explain this, it makes sure that when you have two “floating “ divs within one big div that the big div does not “collapse” because floating divs do not define a height for them main div so it believes there is nothing in there.This puts a space after the floats to expand the main div so the illusion of the divs inside the main div is created.Don’t worry if you don’t understand that it is something you should always have in your arsenal so I thought I would tell you about it.
- We now need to define the style of the webpage so here are those <h1> and <h2> classes we used in the HTMLHere we are telling the browser what size, font, colour the headings should have as well as the margins around them so hear we are saying the bottom should have a 5px “space” because margins and elements that have 4 sides work like this0, 0, 5px, 0 – so top, left, bottom, right
- Here the header.Now it’s strange in CSS to see just header on its own as like I said before we are used to seeing #header but this is the beauty of CSS3Here we a saying what the margin the header should have and how the <p> tag that we used should be displayed so it’s margin, padding, colour, font etc.
- This is a biggy. The Nav.Now the first line is telling the browser what the whole nav background should be, simple.Then it is saying how all the text, a, should looks.Then what it looks like when the mouse hovers overThen how to display the list, or the <ul>And how to display the <li> within the <ul>Then we go into the leftNav and rightNav ID, where its saying the theleftNav in the nav section should have a left margin of 10px.With the rightNav there is more as we want it to do something different, so when you hover over it is a different colour to the generic nav hover. So we write nav#rightNav a:hover{{ background: #2DA5BF;} so that the background colour of the hover is different to the #DA1F28 colour of the “normal” hover.Then finally we are telling the nav and footer to have rounded edges, again another new CSS3 element where before you would needs different images to get a rounded corner effect. It’s very simple it’s telling Mozilla browsers and webkit browser to put a corner radius of 10px, so it will be rounded by 10px.
- The aside is nice and simple as is the sectionFor the aside we are saying how wide it should be and how the text inside it should look so th font, color as well as the float.Floating is how a div relates to another div so float right here means that the div with align to the very right of the container div or in this case the section class.Section has a simple margin and padding placed upon it, padding if you don’t know means how far text, images etc in side a div are away from it’s edge whereas margin is how far other divs and elements are away from that div.
- This is where we make the image look a bit like a poloroid whilst also using the new shadow CSS3 element.Here we are saying that the image should have a shadow of 5px all around and a spread of 20px in moz and webkit browsers.Also the usual background and width as well as another float but this time left, so this will be to the far left of the section container.
- Last of the new elements, footer.In this we are using the same tags, padding, background, margin, font, color etc to make sure that everything inside the footer shows and looks right.We do have “position:relative;” which tells the footer to position itself in relation to the other divs and elements on the page. You can have absolute where it stays in exactly the same place no matter what.
- Finally this makes sure internet explorer shows each of the new elements as block elements so that the display correctlyNow you done, save both files and preview it, preferably in Firefox 3 or Google Chrome, you cna see what it looks like in internet explore and you will notice that the rounded edges on the nav and footer have gone....