HTML5 AND CSS                 <Aside>Explaining the “Aside” function in HTML5and how to use Cascading Style Sheets(CSS)   ...
PURPOSETo explain the “Aside” function in HTML5 for the everyday person. To demonstrate how Cascading style sheets (CSS) c...
WHAT IS HTML5 ?HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web HypertextApplication Technol...
WEB ACCESSIBILITY                 STANDARDS                          The Web Accessibility Initiative - WAIWAI (created by...
CASCADING STYLE SHEETS             (CSS)              CSS defines HOW HTML elements are to be displayed.CSS describes the ...
ASIDE   The aside element represents a section of a page that consists of content that is   tangentially related to the co...
LETS LOOK AT SOME   HTML5 CODE
OUR HTML5 PAGEThe page has the correct doctypeformat for HTML 5. It contains aTitle tag, a body, an article, aparagraph ta...
THE ASIDE TAGThe aside tag lives within the articletag. The content of the tag is notessential information about the craze...
LETS LOOK AT OUR CSS        PAGE
GANGNAM CSSCurrently empty. This is the page thatwill create style within the page.
LETS LOOK AT OUR HTML        PAGE
GANGNAM HTMLThis is how our page looks likewithout any CSS to style it. Youcannot tell the difference between thetext insi...
LETS ADD SOME CODE TO     OUR CSS PAGE
GANGNAM CSSWe have added some CSS code tochange the aside tag, we have given itan orange colour and aligned it in thecentr...
GANGNAM HTMLThis is how our page looks like withthe CSS changing it.
LETS ADD SOME MORECODE TO OUR CSS PAGE
GANGNAM CSSWe have added some more CSS codeto change the aside tag, we havechanged the colour to blue, changedthe font fam...
GANGNAM HTMLThis is how our page looks like withthe CSS changing it. It looks morehighlighted now; more of ainteresting ti...
GANGNAM HTMLThis is how our page looks like withthe CSS changing it. It looks morehighlighted now; more of ainteresting ti...
LETS VALIDATE OUR CODE
GANGNAM HTMLWe have validated our HTML and itis now valid in HTML5.
GANGNAM CSSWe have validated our CSS Code andit is now successfully valid.
LETS TEST OUR PAGE IN DIFFERENT BROWSERS
PAGE IN INTERNET   PAGE IN GOOGLE   EXPLORER           CHROME
PAGE IN MOZILLA    FIREFOX       PAGE IN OPERA
WEB ACCESSIBILITY                   STANDARDS                                         WCAG 2.0 Guidelines Principle 1: Per...
HOW THE PAGE MEETS WCAG     2.0 GUIDELINES                   Principle 1: Perceivable – The page is all text.           Th...
SUMMARY  We have created a webpage using HTML5. We have created styled itusing Cascading style sheets(CSS). We have shown ...
REFERENCES            http://www.w3schools.com/html/html5_intro.asp        http://www.w3schools.com/quality/quality_access...
Upcoming SlideShare
Loading in …5
×

Aside, within HTML5 + CSS

11,576 views

Published on

A Presentation showing how to use the <aside> function within HTML5, using Cascading Style Sheets (CSS) to style it.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
11,576
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Aside, within HTML5 + CSS

  1. 1. HTML5 AND CSS <Aside>Explaining the “Aside” function in HTML5and how to use Cascading Style Sheets(CSS) to style HTML5
  2. 2. PURPOSETo explain the “Aside” function in HTML5 for the everyday person. To demonstrate how Cascading style sheets (CSS) can be used to manipulate code within HTML5.To show how to style code so that it adheres to the web accessibility standards required for modern day use
  3. 3. WHAT IS HTML5 ?HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web HypertextApplication Technology Working Group (WHATWG).WHATWG was working with web forms and applications, and W3C was working with XHTML 2.0. In2006, they decided to cooperate and create a new version of HTML.Some rules for HTML5 were established:New features should be based on HTML, CSS, DOM, and JavaScriptReduce the need for external plugins (like Flash)Better error handlingMore markup to replace scriptingHTML5 should be device independentThe development process should be visible to the public
  4. 4. WEB ACCESSIBILITY STANDARDS The Web Accessibility Initiative - WAIWAI (created by W3C, in 1997) is a set of guidelines intended for web developers, authors, and designers- about how to make the web content accessible to people with disabilities. The goal of these guidelines is accessibility, but they will also help make web contents available to more browsers (voice browsers, cell phones, hand-held devices), and to moreusers working in difficult environments (hands-free, strong light, darkness, bad sight, heavy noise).
  5. 5. CASCADING STYLE SHEETS (CSS) CSS defines HOW HTML elements are to be displayed.CSS describes the visual style (appearance, layout, colour, fonts) of HTML elements. CSS was designed to separate document layout from document content (which greatly improved HTML flexibility and reduced HTML complexity).
  6. 6. ASIDE The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could beconsidered separate from that content. Such sections are often represented as sidebars in printed typography. Just because some content appears to the left or right of themain content isn‟t enough reason to use the aside element. Ask yourself if the content within the aside can be removed without reducing the meaning of the main content. Pullquotes are an example of tangentially related content.
  7. 7. LETS LOOK AT SOME HTML5 CODE
  8. 8. OUR HTML5 PAGEThe page has the correct doctypeformat for HTML 5. It contains aTitle tag, a body, an article, aparagraph tag and an aside tag. The<p>tag contains a paragraph about acurrent craze – Gangnam Style -taken from wikipedia.
  9. 9. THE ASIDE TAGThe aside tag lives within the articletag. The content of the tag is notessential information about the craze,but is interesting enough to note amention. Information that appearswithin this tag is not meant to be vitalinformation regarding a topic.
  10. 10. LETS LOOK AT OUR CSS PAGE
  11. 11. GANGNAM CSSCurrently empty. This is the page thatwill create style within the page.
  12. 12. LETS LOOK AT OUR HTML PAGE
  13. 13. GANGNAM HTMLThis is how our page looks likewithout any CSS to style it. Youcannot tell the difference between thetext inside the article tag and insidethe aside tag
  14. 14. LETS ADD SOME CODE TO OUR CSS PAGE
  15. 15. GANGNAM CSSWe have added some CSS code tochange the aside tag, we have given itan orange colour and aligned it in thecentre of the page.
  16. 16. GANGNAM HTMLThis is how our page looks like withthe CSS changing it.
  17. 17. LETS ADD SOME MORECODE TO OUR CSS PAGE
  18. 18. GANGNAM CSSWe have added some more CSS codeto change the aside tag, we havechanged the colour to blue, changedthe font family to Arial, and created aborder with padding and a margin.
  19. 19. GANGNAM HTMLThis is how our page looks like withthe CSS changing it. It looks morehighlighted now; more of ainteresting tidbit.
  20. 20. GANGNAM HTMLThis is how our page looks like withthe CSS changing it. It looks morehighlighted now; more of ainteresting titbit. We‟ve now addedanother paragraph in to highlight theaside sitting in the middle.
  21. 21. LETS VALIDATE OUR CODE
  22. 22. GANGNAM HTMLWe have validated our HTML and itis now valid in HTML5.
  23. 23. GANGNAM CSSWe have validated our CSS Code andit is now successfully valid.
  24. 24. LETS TEST OUR PAGE IN DIFFERENT BROWSERS
  25. 25. PAGE IN INTERNET PAGE IN GOOGLE EXPLORER CHROME
  26. 26. PAGE IN MOZILLA FIREFOX PAGE IN OPERA
  27. 27. WEB ACCESSIBILITY STANDARDS WCAG 2.0 Guidelines Principle 1: Perceivable - Information and user interface components must be presentable to users in ways they can perceive. Principle 2: Operable - User interface components and navigation must be operable.Principle 3: Understandable - Information and the operation of user interface must be understandable.Principle 4: Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
  28. 28. HOW THE PAGE MEETS WCAG 2.0 GUIDELINES Principle 1: Perceivable – The page is all text. The Principle 2: Operable – There are no operable interfacesPrinciple 3: Understandable – The information is presented in an easy to understand manor. Principle 4: Robust – The page can be loaded up in a variety of browsers and still keep its format.
  29. 29. SUMMARY We have created a webpage using HTML5. We have created styled itusing Cascading style sheets(CSS). We have shown how the concept of„aside‟ works within HTML and explained the context of where it wouldbest be used. We have shown the WCAG 2.0 Guidelines – and how the page we created fits in to those guidelines.
  30. 30. REFERENCES http://www.w3schools.com/html/html5_intro.asp http://www.w3schools.com/quality/quality_accessibility.asp http://html5doctor.com/understanding-aside/http://www.anthonycalzadilla.com/2010/08/html5-section-aside-header-nav- footer-elements-not-as-obvious-as-they-sound/ http://en.wikipedia.org/wiki/Gangnam_Style

×