1 / 27

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using. HTML 5 The next version of HTML 4 and XHTML 1 Currently in draft status Incorporates features of both HTML and XHTML Adds new elements Eliminates some elements Intended to be backward compatible

olives
Download Presentation

HTML 5 and CSS 3: The Techniques You’ll Soon Be Using

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. HTML 5 and CSS 3: The Techniques You’ll Soon Be Using HTML 5 The next version of HTML 4 and XHTML 1 • Currently in draft status • Incorporates features of both HTML and XHTML • Adds new elements • Eliminates some elements • Intended to be backward compatible http://www.w3schools.com/html5/default.asp http://www.webmonkey.com/2010/02/get_started_with_css_3/ • W3C XHTML Validation Tool • http://validator.w3.org • Additional HTML5 Validation Tool • http://html5.validator.nu

  2. Your First HTML5 Web Page: index.html <!doctype html"> <html lang="en"> <head> <title>Page Title Goes Here</title> <meta charset="utf-8" /> </head> <body> ... body text and more HTML tags go here ... </body> </html>

  3. Anatomy of a Web Page DTD – describes the markup language syntax HTML tag – contains the web page document Head tag – contains the head section.The head section contains information that describes the web page document Title tag – Text displays in title bar of window Meta tag – describes the character encoding Body tag – contains the body section The body section contains the text and elements that display in the browser viewport.

  4. Unordered List Example XHTML <ul type=“disc”> <!– or type =“square” <li>TCP</li> <li>IP</li> <li>HTTP</li> <li>FTP</li> </ul> The type attribute is widely used in unordered lists and is valid in XHTML. However, be aware that the type attribute on the <ul> tag is considered obsolete in HTML 5 because it is decorative and does not convey meaning.

  5. Ordered List • Conveys information in an ordered fashion • Ordered List Element <ol type = “A”> <!- upper case letters ->Contains the ordered list • type attribute determinesnumbering scheme of list • default is numerals • In HTML 5, the type attribute is obsolete for use with unordered lists. However, the type attribute is valid when used with ordered lists because the sequencing provides information. • Another handy attribute that can be used is the start attribute, which you can set to an integer value to begin the list at a number other than 1. • <ol type = “1” start=“10”>

  6. Configure List Markers with CSS • CSS Properties • list-style-type • list-style-image • list-style position Example: ul {list-style-image: url(trillium.gif); }

  7. Description List • New name for HTML5 • This element was called a Definition List in previous versions of HTML and XHTML. • Uses: • Display a list of terms and descriptions • Display a list of FAQ and answers • The Description List element<dl> tagContains the definition list • The dtElement<dt> tagContains a term or nameConfigures a line break above and below the text • The dd Element<dd> tagContains a definition or descriptionIndents the text

  8. Description List Example <dl> <dt>IP</dt> <dd>Internet Protocol</dd> <dt>TCP</dt> <dd>Transmission Control Protocol</dd> </dl>

  9. Using background-repeat trilliumbullet.gif: h2 { background-color: #d5edb3; color: #5c743d; font-family: Georgia, "Times New Roman", serif; padding-left: 30px; background-image: url(trilliumbullet.gif); background-repeat: no-repeat; }

  10. CSS3 Multiple Background Images body { background-color: #f4ffe4; color: #333333; background-image: url(trilliumgradient.png); background: url(trilliumfoot.gif) no-repeat bottom right, url(trilliumgradient.png); }

  11. Favorites Icon • Small icon that displays in the address bar or tab bar of some browsers • Also called a favicon <link rel="icon" href="favicon.ico" type="image/x-icon" />

  12. CSS3 Rounded Corners • border-radius property • Example: h1 { border: 1px solid #000033; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; }

  13. CSS3 box-shadow Property • Configure the horizontal offset, vertical offset, blur radius, and valid color value • Example: #wrapper { -webkit-box-shadow: 5px 5px 5px #828282; -moz-box-shadow: 5px 5px 5px #828282; box-shadow: 5px 5px 5px #828282;}

  14. CSS3 text-shadow Property • Configure the horizontal offset, vertical offset, blur radius, and valid color value • Example: #wrapper { text-shadow: 3px 3px 3px #666; }

  15. CSS3 opacity Property • Configure the opacity of the background color • Opacity range: • 0 Completely Transparent • 1 Completely Opaquehorizontal offset, vertical offset, blur radius, and valid color value • Example: h1{ background-color: #FFFFFF; opacity: 0.6; }

  16. CSS3 Gradients • Gradient: a smooth blending of shades from one color to another • Use the background-image property • linear-gradient() • radial-gradient() • Example: background: #8fa5ce; background: -moz-linear-gradient(top, #FFFFFF, #8FA5CE); /*FIREFOX */ background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#8FA5CE)); /*SAFARI */ filter: prodig:DXImageTransform.Microsoft.gradient (startColorstr=#FFFFFFFF. endColorstr=#FF8FA5CE); background-image: linear-gradient (#FFFFFF, #8FA5CE); /*w3c Syntax */

  17. HTML5 Figure and FigcaptionElements <figure> <img src="lighthouseisland.jpg" width="250" height="355" alt="Lighthouse Island"> <figcaption> Island Lighthouse, Built in 1870 </figcaption> </figure> CSS for this is on next Slide

  18. CSS needed to configure the previous display. figure { float:right; width: 260px; margin:10px; } figcaption {text-align:center; font-size:0.8em; font-style: italic; display: block; }

  19. HTML5 Structural Elements • Header Element • Hgroup Element • Nav Element • Footer ElementExample: <header> <hgroup> <h1>Lighthouse&nbsp;Island&nbsp;Bistro</h1> <h2>the best coffee on the coast</h2> </hgroup> </header>

  20. HTML5 Structural

  21. HTML5 Structural 1. <!doctype html> 2. <html> 3. <head> 4. <title>Page title</title> 5. </head> 6. <body> 7. <header> 8. <h1>Page title</h1> 9. </header> 10. <nav> 11. <!-- Navigation --> 12. </nav> 13. <section id="intro"> 14. <!-- Introduction --> 15. </section> 16. <section> 17. <!-- Main content area --> 18. </section> 19. <aside> 20. <!-- Sidebar --> 21. </aside> 22. <footer> 23. <!-- Footer --> 24. </footer> 25. 26. </body> 27. </html>

  22. Marking up the Navigation <nav> <ul> <li><a href="#">Blog</a></li> <li><a href="#">About</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Contact</a></li> <li class="subscribe"><a href="#">Subscribe via. RSS</a></li> </ul> </nav>

  23. Marking Up the Introduction 1. <section id="intro"> 2. <header> 3. <h2>Do you love flowers as much as we do?</h2> 4. </header> 5. <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor nisi ut.</p> 6. </section> http://net.tutsplus.com/tutorials/html-css-techniques/ html-5-and-css-3-the-techniques-youll-soon-be-using/

  24. More HTML5 Elements • Section Element • Article Element • Aside Element The picture has 2 articles in one section

  25. Section Element – Section of a document, such as a chapter or topic. • Article Element – The article element contains an independent entry, such as a blog posting, comment, or any article that could stand on its own. • Aside Element –contains a sidebar.

  26. CSS Styling for the Mobile Web • Configure non-essential content (such as sidebar content to not display (use display: none; ) • Consider replacing images with smaller or cropped graphics • Configure fonts using em units or percentages • Choose colors to maximize contrast • Associate the mobile external style sheet with your web page using a link element with media=”handheld”, as shown below: <link rel="stylesheet" href="lighthousemobile.css" media="handheld">

More Related