semantics & html
DESCRIPTION
From div to span, every element has it's place and meaning in HTML. Well, ok, maybe not marquee or blink but that's besides the point. Anthony Ticknor has spent more than a decade cultivating his knowledge of each element and it's correct use. His presentation will cover the history & importance of semantics in our websites, the document outline, what the future holds for us, and the role semantics play in crafting a better web for everyone.TRANSCRIPT
![Page 1: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/1.jpg)
Semantics & HTML
![Page 2: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/2.jpg)
This presentation is best viewed in Netscape Navigator 4.0 on an 800 x 600 monitor
![Page 3: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/3.jpg)
How did we get here?
![Page 4: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/4.jpg)
A Brief History
1989 - Tim Berners-Lee writes proposal to join hypertext with the internet ... it’s called vague, but exciting
1991 - the world’s first website is put online at CERN
1994 - the W3C is founded at MIT
2001 - The Semantic Web published by Scientific American
![Page 5: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/5.jpg)
The Semantic Web is
Expressing Meaning
Knowledge Representation
Ontologies
Agents
http://www.scientificamerican.com/article.cfm?id=the-semantic-web
![Page 6: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/6.jpg)
Why semantic HTML?
Provide structure to your document
Construct more meaningful markup
Make your website accessible to a wider audience
Search Engine Optimization
![Page 7: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/7.jpg)
How to ComposeSemantic HTML
![Page 8: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/8.jpg)
POSH!(plain old semantic HTML)
![Page 9: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/9.jpg)
The POSH Process
http://microformats.org/wiki/posh
Publish POSH content
Use valid (X)HTML
Use semantic (X)HTML
Spread and Share the idea of POSH
Improve POSH ideas & patterns
![Page 10: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/10.jpg)
The POSH Checklist
http://microformats.org/wiki/posh
Stop using tables for presentational purposes
Stop using spacer gifs
Fix your Bed & Breakfast markup
Eliminate Anorexic Anchors
Re-use existing POSH patterns
Use good semantic class names
![Page 11: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/11.jpg)
Choose the“Best” Element
![Page 12: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/12.jpg)
Element Selection
Practice, Practice, Practice
Print the designs and write on them
Know the available elements
Know common patterns
![Page 14: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/14.jpg)
http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf
![Page 15: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/15.jpg)
The Document Outline
![Page 16: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/16.jpg)
The Document Outline
Gives the document structure
Built through headings in a linear fashion
New HTML5 sectioning elements and algorithm
Enhances accessibility for assistive devices
![Page 17: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/17.jpg)
The Old Way
<h1>My Website</h1><h2>About Me</h2><p>Lorem ipsum dolor sit amet ... </p><h2>Recent News</h2><h3>News Item 1</h3><p>Lorem ipsum dolor sit amet ... </p><h3>News Item 2</h3><p>Lorem ipsum dolor sit amet ... </p><p>Lorem ipsum dolor sit amet ... </p><h2>Contact Me</h2><p>Lorem ipsum dolor sit amet ... </p>
![Page 18: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/18.jpg)
The Old Way
I. My Website i. About Me ii. Recent News a. News Item 1 b. News Item 2 iii. Contact Me
![Page 19: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/19.jpg)
The New Way
<h1>My Website</h1><section> <h1>About Me</h1> <p> ... </p></section><section> <h1>Recent News</h1> <article> <h1>News Item 1</h1> <p> ... </p> </article> <article> <h1>News Item 2</h1> <p> ... </p> </article></section>
![Page 20: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/20.jpg)
The New Way
I. My Website i. About Me ii. Recent News a. News Item 1 b. News Item 2 iii. Contact Me
![Page 21: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/21.jpg)
The Problem
I. My WebsiteII. About Me III. Recent NewsIV. News Item 1V. News Item 2VI. Contact Me
![Page 22: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/22.jpg)
The Hybrid Solution
<h1>My Website</h1><section> <h2>About Me</h2> <p> ... </p></section><section> <h2>Recent News</h2> <article> <h3>News Item 1</h3> <p> ... </p> </article> <article> <h3>News Item 2</h3> <p> ... </p> </article></section>
![Page 23: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/23.jpg)
The Hybrid Solution
I. My Website i. About Me ii. Recent News a. News Item 1 b. News Item 2 iii. Contact Me
![Page 24: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/24.jpg)
Common Patterns
![Page 25: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/25.jpg)
Generic Elements
<div class="generic-‐block"> ...</div>
<span class="generic-‐inline"> ...</span>
![Page 26: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/26.jpg)
Grid System
<div class="grid-‐group"> <div class="grid single"> ... </div> <div class="grid triple"> ... </div></div>
![Page 27: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/27.jpg)
Site Structure
<body> <header> ... </header> <section> <article> ... </article> </section> <aside> ... </aside> <footer> ... </footer></body>
![Page 28: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/28.jpg)
Navigation
<nav class="nav-‐primary"> <ul class="list-‐nav"> <li><a href="link.html">Nav Item 1</a> <ul class="list-‐subnav"> <li><a href="link.html">Subnav 1</a></li> <li><a href="link.html">Subnav 2</a></li> </ul> </li> <li><a href="link.html">Nav Item 2</a></li> <li><a href="link.html">Nav Item 3</a></li> <li><a href="link.html">Nav Item 4</a></li> </ul></nav>
![Page 29: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/29.jpg)
Breadcrumbs
<ol class="list-‐breadcrumbs"> <li><a href="link.html">Home</a></li> <li><a href="link.html">First Level</a></li> <li><a href="link.html">Second Level</a></li> <li><a href="link.html">Third Level</a></li></ol>
![Page 30: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/30.jpg)
Pagination
<ol class="list-‐pagination"> <li><a href="link.html">First</a></li> <li><a href="link.html">Previous</a></li> <li><a href="link.html">4</a></li> <li><a href="link.html">5</a></li> <li><a href="link.html">6</a></li> <li><a href="link.html">7</a></li> <li><a href="link.html">Next</a></li> <li><a href="link.html">Last</a></li></ol>
![Page 31: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/31.jpg)
Search Form
<form action="link.html" class="form-‐search"> <fieldset> <legend>Search Our Site</legend> <label for="input-‐site-‐search">Search</label> <input type="search" placeholder="Search Our Site" id="input-‐site-‐search" /> <input type="submit" value="Submit" /> </fieldset></form>
![Page 32: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/32.jpg)
List of Articles
<section class="list-‐articles"><article> ... </article><article> ... </article><article> ... </article>
</section>
![Page 33: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/33.jpg)
An Article
<article> <header> <h1>Article Headline</h1> <p>Published on <time datetime="2011-‐11-‐05">November 5th, 2011</time>.</p> </header> <div class="user-‐content"> ... </div> <footer> ... </footer></article>
![Page 34: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/34.jpg)
Comments
<section class="comments"> <h1>Comments</h1> <article class="comment"> <header> <h3>Comment Title</h3> <p>Posted <time datetime="2011-‐11-‐05T19:10-‐08:00">1 hour ago</time> by Author Name</p> </header> <div class="user-‐content"> ... </div> </article> <article class="comment"> ... </article></section>
![Page 35: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/35.jpg)
Carousel
<section class="carousel"> <h1>Featured Content</h1> <article class="slide"> <h2>Slide Title</h2> <div class="slide-‐content"> ... </div> </article> <article class="slide"> <h2>Slide Title</h2> <div class="slide-‐content"> ... </div> </article></section>
![Page 36: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/36.jpg)
Glossary
<aside class="glossary"> <h1>Glossary</h1> <dl> <dt><dfn>Asshole</dfn></dt> <dd>A variant of arsehole, which is still prevalent in British and Australian English, is a term used pejoratively to describe the anus.</dd> </dl></aside>
![Page 37: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/37.jpg)
Audio
<audio controls preload="none"> <source src="ace-‐of-‐spades.ogg" type="audio/ogg"> <source src="ace-‐of-‐spades.mp3" type="audio/mpeg"> <object type="application/x-‐shockwave-‐flash" data="player.swf?soundFile=ace-‐of-‐spades.mp3"> <param name="movie" value="player.swf?soundFile=ace-‐of-‐spades.mp3"> <a href="ace-‐of-‐spades.mp3">Download Ace of Spades</a> </object></audio>
![Page 38: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/38.jpg)
Video
<video controls width="320" height="240" poster="poster.jpg"> <source src="ace-‐of-‐spades.ogv" type="video/ogg"> <source src="ace-‐of-‐spades.mp4" type="video/mp4"> <object type="application/x-‐shockwave-‐flash" width="320" height="240" data="player.swf?file=ace-‐of-‐spades.mp4"> <param name="movie" value="player.swf?file=ace-‐of-‐spades.mp4"> <a href="ace-‐of-‐spades.mp4">Download Ace of Spades</a> </object></video>
![Page 39: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/39.jpg)
Legal Information
<small>© 2012 MyCompany INC</small>
![Page 40: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/40.jpg)
Media Object
<div class="media"> <div class="img"> <img src="image.jpg" alt="image" /> </div> <div class="bd"> ... </div></div>
![Page 41: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/41.jpg)
Common Anti-Patterns
![Page 42: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/42.jpg)
P is for Paragraph
<p class="footer"> © 2012 MyCompany. All Rights Reserved<br/> 123 Test Ave, City, ST, Zip Code</p>
-‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐
<p class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
![Page 43: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/43.jpg)
P is for Paragraph
<div class="footer"> <div>© 2012 MyCompany. All Rights Reserved</div> <div>123 Test Ave, City, ST, Zip Code</div></div>
-‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐ -‐
<blockquote class="quote">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</blockquote>
FTFY
![Page 44: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/44.jpg)
Empty Hyperlinks
<div class="tab-‐navigation"> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a></div><div class="tabs"> <div class="tab"> ... </div> <div class="tab"> ... </div> <div class="tab"> ... </div></div>
![Page 45: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/45.jpg)
Empty Hyperlinks
<div class="tab-‐navigation"> <a href="#tab-‐one">Link 1</a> <a href="#tab-‐two">Link 2</a> <a href="#tab-‐three">Link 3</a></div><div class="tabs"> <div class="tab" id="tab-‐one"> ... </div> <div class="tab" id="tab-‐two" > ... </div> <div class="tab" id="tab-‐three" > ... </div></div>
FTFY
![Page 46: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/46.jpg)
Spacer Gifs!
<div> <img src="spacer.gif" width="100" heigh="100" alt="" /> <p> ... </p></div>
![Page 47: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/47.jpg)
Spacer Gifs!
<div> <p> ... </p></div>
FTFY
![Page 48: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/48.jpg)
Non Breaking Space
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
![Page 49: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/49.jpg)
Non Breaking Space
<p class="indent">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
FTFY
![Page 50: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/50.jpg)
Inline Pipe Delimiters
<footer> <div> <a href="link.html">Link 1</a> | <a href="link.html">Link 2</a> | <a href="link.html">Link 3</a> | <a href="link.html">Link 4</a> | </div></footer>
![Page 51: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/51.jpg)
Inline Pipe Delimiters
<footer> <ul> <li><a href="link.html">Link 1</a></li> <li><a href="link.html">Link 2</a></li> <li><a href="link.html">Link 3</a></li> <li><a href="link.html">Link 4</a></li> </ul></footer>
FTFY
![Page 52: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/52.jpg)
Tables for Layout
<table cellpadding="0" cellspacing="0"> <tr> <td align="left" valign="top"> Left Column </td> <td align="left" valign="top"> Center Column </td> <td align="left" valign="top"> Right Column </td> </tr></table>
![Page 53: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/53.jpg)
Tables for Layout
<div class="grid-‐group"> <div class="grid single"> Left Column </div> <div class="grid double"> Center Column </div> <div class="grid single"> Right Column </div></div>
FTFY
![Page 54: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/54.jpg)
DIVs for Tabular Data
<div class="row"> <div class="row-‐heading"> Name </div> <div class="row-‐heading"> Age </div> <div class="row-‐heading"> Birthday </div></div><div class="row"> <div class="row-‐data"> Anthony </div> <div class="row-‐data"> 32 </div> <div class="row-‐data"> 11/5/79 </div></div>
![Page 55: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/55.jpg)
DIVs for Tabular Data
<table cellpadding="0" cellspacing="0"> <tr> <th> Name </th> <th> Age </th> <th> Birthday </th> </tr> <tr> <td> Anthony </td> <td> 32 </td> <td> 11/5/79 </td> </tr></table>
FTFY
![Page 56: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/56.jpg)
<b> <i> <em> <strong>
<p>There’s a <b>bold</b> word in my sentence. No no no that can’t be right. It should be <strong>bold</strong>.</p><p>On second thought, perhaps using <i>italics</i> is more my style. But isn’t this usage of <em>italics</em> considered better?</p>
![Page 57: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/57.jpg)
<b> <i> <em> <strong>
<p><i>Philosoraptor</i> is an image macro series featuring a clip art of Velociraptor deeply immersed in <b>metaphysical</b> or unraveling quirky paradoxes.</p>
<p>Should I get a nurse? Call a <em>doctor</em> <strong>right now!</strong></p>
FTFY
![Page 58: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/58.jpg)
Microformats
![Page 59: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/59.jpg)
Microformats
Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards. Instead of throwing away what works today, microformats intend to solve simpler problems first by adapting to current
behaviors and usage patterns
![Page 60: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/60.jpg)
hCard<div id="hcard-‐John-‐Patrick-‐Doe" class="vcard"> <span class="fn n"> <span class="given-‐name">John</span> <span class="additional-‐name">Patrick</span> <span class="family-‐name">Doe</span> </span> <div class="org">The Nerdery</div> <a class="email" href="mailto:[email protected]">[email protected]</a> <div class="adr"> <div class="street-‐address">9555 James Ave S</div> <span class="locality">Bloomington</span>, <span class="region">Minnesota</span>, <span class="postal-‐code">55431</span> <span class="country-‐name">USA</span> </div> <div class="tel">888-‐555-‐1234</div></div>
http://microformats.org/wiki/hcard
![Page 61: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/61.jpg)
hCalendar
<div class="vevent" id="hcalendar-‐HTML-‐&-‐Semantics"> <a class="url" href="http://www.fedleague.org"><abbr class="dtstart" title="2012-‐03-‐13T18:00-‐06:0000">March 13, 2012 6</abbr> – <abbr class="dtend" title="2012-‐03-‐13T20:00-‐06:00">8pm</abbr> : <span class="summary">HTML & Semantics</span> at <span class="location">Bloomington, MN</span></a> <div class="description"> Come see a talk about semantics by Anthony Ticknor. </div></div>
http://microformats.org/wiki/hcalendar
![Page 62: Semantics & HTML](https://reader036.vdocument.in/reader036/viewer/2022062406/559b3ac01a28ab0b3f8b4810/html5/thumbnails/62.jpg)
Questions?