Frontend for Developers      HTML for WebApps
The Web Browser
Web BrowsersThe most important ones. • Internet Explorer • Chrome • Firefox • Safari • Opera
Web BrowsersChrome is bigger than Internet Explorer. • Chrome • Internet Explorer • Firefox • Safari • Opera
Rendering engineHow it works?     1. Parses HTML to construct the DOM tree     2. Renders tree construction     3. Creates...
Web Browser’s partsretrieves resources from the server and visually presents them.
The DOMis a language-independent API.
The DOMis implemented in JavaScript in the browser.
The DOMis the object presentation of the HTML document.             html     head           body   title     h1       p   ...
The DOMis the interface of HTML elements to the outside world.
Rendering engineby browser.  Engine                                used by           Firefox, SeaMonkey, Galeon, Camino, K...
JavaScript engineby browser.     Engine                            used bySpiderMonkey   Mozilla FirefoxRhino          Moz...
The User Experience
Progressive Enhancementaims to deliver information to the widest possible audience. • sparse, semantic markup contains all...
Progressive Enhancementbasic content should be accessible to all web browsers.
Progressive Enhancementbasic functionality should be accessible to all web browsers.
Progressive Enhancementenhanced layout is provided by externally linked CSS.
Progressive Enhancementenhanced behavior is provided by unobtrusive JavaScript.
Polyfillsis a feature detection technique for regressive enhancement.
FrontendIts parts.             • The Web Browser             • The User Experience             • The Content Layer        ...
The Content Layer
What is HTML  • HyperText Markup Language  • Markup language is not programming language  • The web is published in HTML  ...
ElementsTypes of elements according to the tag.      <p>It’s the content</p>      Open tag & close tag. Element with conte...
AttributesSyntax.     <p id=”paragraph”>It’s the content</p>     Open tag & close tag. Element with content.     <img src=...
AttributesThe common attributes for the HTMLElement.   • title   • id   • class   • lang   • dir   • data-*
ReservedCharacters  Entities
Reserved Characterscannot be used inside the document.    • < can be mixed with tags    • > can be mixed with tags    • “ ...
Entitiesare used to implement reserved characters.               < --------- &lt;               > --------- &gt;          ...
Entitiesexamples.10 < 20<p> 10 &lt; 20 </p>20 > 10<p> 10 &gt; 20 </p>He said: “Don’t do it”<p>He said: &quot;Don’t do it&q...
The Structurehtml, head & body
The doctypeis required to do cross browser.<!doctype html><html>   <head>       <title>MercadoLibre</title>   </head>   <b...
The html elementis the root of the document.<!doctype html><html>   <head>       <title>MercadoLibre</title>   </head>   <...
The head elementis a collection of metadata.<!doctype html><html>   <head>       <title>MercadoLibre</title>   </head>   <...
The body elementis the place for the content.<!doctype html><html>   <head>       <title>MercadoLibre</title>   </head>   ...
The DOMIt’s the interface of HTML elements to the outside world
The DOMinterface of a image element.interface HTMLImageElement : HTMLElement {             attribute DOMString alt;       ...
PracticesThe best of them
Commentthe code.<!doctype html><html>   <head>       <title>MercadoLibre</title>   </head>   <body>       <p>The basic con...
Attributesmust always be between quotes.<img width=”50” height=”90” alt=”Iphone Image” />
Attributesmust always be between quotes.<img width=”50” height=”90” alt=”Iphone Image” />
JavaScriptfunctions should never go in event attributes.<p onclick=”hideDiv();”></p>
JavaScriptfunctions should never go in event attributes.<p onclick=”hideDiv();”></p>   not recommended
JavaScriptfunctions should never go in event attributes.<p id=”overview”></p><p onclick=”hideDiv();”></p>   not recommended
JavaScriptnever goes in head element.<!doctype html><html>   <head>       <title>MercadoLibre</title>       <script>      ...
JavaScriptnever goes in head element.<!doctype html><html>   <head>       <title>MercadoLibre</title>       <script>      ...
JavaScriptnever goes in head element.<!doctype html><html>   <head>       <title>MercadoLibre</title>   </head>   <body>  ...
CSSrules should never go inline.<p style=”color:#ffffff;”></p>
CSSrules should never go inline.<p style=”color:#ffffff;”></p>   not recommended
CSSrules should never go inline.<p class=”featured”></p><p style=”color:#ffffff;”></p>   not recommended
MetadataInside the head
The head elementthe place for metadata. <head> </head>
The title elementrepresents the document’s name and identifies it out of context.     • Required     • Unique     • ~ 64 ch...
The title elementrepresents the document’s name and identifies it out of context.<head>   <title>MercadoLibre Argentina</ti...
The link elementallows you to link the current document to other resources. <link />            • rel            • href   ...
The rel attributeadds meaning to the external resources.    • alternate                  • nofollow    • author           ...
The rel attributeexamples.<link rel=”stylesheet” type=”text/css” href=”/external.css” ... /><link rel=”alternate” type=”ap...
The meta elementrepresents various kinds of metadata. <meta />     • name     • charset     • http-equiv     • content
The meta elementThe name attribute.<meta name=”author” content=”Hernan Mammana” /><meta name=”copyright” content=”2011” />...
The meta elementThe charset attribute.<meta charset=”utf-8” />
The ContentInside the body
The elements for textare used to give meaning to the content.     • Headings        • h1, h2, h3, h4, h5, h6     • Paragra...
HeadingsExamples from Home.                      <h1>MercadoLibre</h1>                      <h2>Clasificados</h2>          ...
HeadingsExamples for VIP.                    <h1>Apple Ipod touch...</h1>                    <h2>Reputación del vendedor</...
Paragraphexamples.<p>MercadoLibre no vende este artículo ... </p><p>Local Palermo Fscomputers Dist Autorizado ... </p>
Inside paragraphs ...Examples. <p><strong>Elige el motivo de tu denuncia: </strong></p> <p><strong>$ 1.899<sup>99</sup></s...
ListsTo add meaning
Ordered & Unordered ListsThe most used lists on the web.    • Ordered List       To show rankings, prioritize tasks and se...
Ordered Listis used to show rankings, prioritize tasks and search results.<ol>    <li>Apple Ipod Touch 8 Gb 4ta Generaci.....
Unordered Listis used to list anything without priorities.                                 <ul>                           ...
Description Listis used to make dictionaries, screenplays and key-value pairs.     • It has three parts        • Descripti...
Definition ListExample.             <dl>	              <dt>Condición:</dt>              <dd>Artículo nuevo</dd>            ...
TableTo organize the     data
The table elementand all its semantic elements.     • The basic elements        table, tr, td, th     • The semantic eleme...
The table elementExample.
The basic elementsThe semantic table elements.<table>   <tr>      <th>header</th>      <th>header</th>   </tr>   <tr>     ...
The table elementThe global data container.<table>   <tr>      <th>header</th>      <th>header</th>   </tr>   <tr>      <t...
The tr elementThe row.<table>   <tr>      <th>header</th>      <th>header</th>   </tr>   <tr>      <td>data</td>      <td>...
The th elementThe header data element.<table>   <tr>      <th>header</th>      <th>header</th>   </tr>   <tr>      <td>dat...
The td elementThe content data element.<table>   <tr>      <th>header</th>      <th>header</th>   </tr>   <tr>      <td>da...
The semantic elementsThe semantic table elements.<table>   <caption>It’s title of the table</caption>   <thead>    </thead...
The semantic elementsThe semantic table elements.<table>   <caption>It’s title of the table</caption>   <thead>    </thead...
The semantic elementsThe semantic table elements.<table>   <caption>It’s title of the table</caption>   <thead>    </thead...
The semantic elementsThe semantic table elements.<table>   <caption>It’s title of the table</caption>   <thead>    </thead...
The semantic elementsThe semantic table elements.<table>   <caption>It’s title of the table</caption>   <thead>    </thead...
The semantic elementsThe semantic table elements.<table>   <caption>It’s title of the table</caption>   <thead>    </thead...
The semantic elementsThe semantic table elements.   table   first name   last name       age   purchase
The semantic elementsThe semantic table elements.   table   first name   last name       age   purchase
The semantic elementsThe semantic table elements.   table        personal data                purchase   first name   last ...
The semantic elementsThe semantic table elements.   table        personal data                purchase   first name   last ...
The semantic elementsThe semantic table elements.<table>    <caption>Title of the table</caption>    <colgroup>        <co...
The semantic elementsThe semantic table elements.   table        personal data          age   purchase   first name   last ...
The semantic elementsThe semantic table elements.<table>    <caption>Title of the table</caption>    <colgroup>        <co...
The semantic elementsThe semantic table elements.<table>    <caption>Title of the table</caption>    <colgroup id=”persona...
Yes, we can use tables!      Only for data!
LinksThe hypertext
The a elementallows you to link current document to other resources.    • href    • rel    • target    • title    • type
The a elementURL decomposition attributes.   interface HTMLAnchorElement : HTMLElement {   ...         attribute DOMString...
ImagesNon decorative
The img elementallows you to insert an image.    • src    • alt    • title    • width    • height
The img elementallows you to insert an image.<img src=”/image.jpg” alt=”It has a book.” />
FormsGetting the user’s      data
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.
The form elementestablishes a relationship between the user and the organization.    • Component of a web page    • They h...
The form elementexample.   <form method=”post” action=”/signup”>   </form>
The form elementThe method attribute.    <form method=”post” action=”/signup”>    </form>
The form elementThe action attribute.    <form method=”post” action=”/signup”>    </form>
Semantic elementsfor the form.      • fieldset         is the element to group similar meaning controls      • legend      ...
Semantic elementsfor the form.  <form method=”post” action=”/signup”>      <fieldset>         <legend>Regístrate</legend>  ...
Form controlsThe elements inside the form.    • input,       It render very different control related to his type attribut...
The input elementIt has many types. Each type has a different display.    <input type=”{VALUE}” />    •   hidden          ...
The input elementIt has many types. Each type has a different display.<input type=”{TYPE}” name=”{NAME}” id=”{ID}” /> •   ...
The type hiddenrepresents a value that isn’t intended to be manipulated.<input type=”hidden” /> • name • value
The type textrepresents a one line text edit control for the element’s value.<input type=”text” /> • autocomplete • autofo...
The type textrepresents a one line text edit control for the element’s value.<input type=”search” /> • autocomplete • auto...
The type telrepresents a control for editing a telephone number.<input type=”tel” /> • autocomplete • autofocus • disabled...
The type passwordrepresents a one line text edit control for the element’s value.<input type=”password” /> • autocomplete ...
The type emailrepresents a control for editing the e-mail addresses.<input type=”email” /> • autocomplete • autofocus • di...
The type urlrepresents a control for editing a single absolute URL.<input type=”url” /> • autocomplete • autofocus • disab...
The type filerepresents a list of selected files. <input type=”file” /> • accept • autocomplete • autofocus • disabled • mult...
The type daterepresents a control for setting a string representing a date.<input type=”date” /> • autocomplete • autofocu...
The type datetimerepresents a control for setting a global date and time.<input type=”datetime” /> • autocomplete • autofo...
The type monthrepresents a control for setting a string representing a month.<input type=”month” /> • autocomplete • autof...
The type weekrepresents a control for setting a string representing a week.<input type=”week” /> • autocomplete • autofocu...
The type datetime-localrepresents a control for setting a local date and time.<input type=”datetime-local” /> • autocomple...
The type numberrepresents a control for setting a string representing a number<input type=”number” /> • autocomplete • aut...
The type rangerepresents a number, but the exact value is not important.<input type=”range” /> • autofocus • disabled • ma...
The type colorrepresents a control for setting a string simple color.<input type=”color” /> • autocomplete • autofocus • d...
The type checkboxrepresents a two-state control.<input type=”checkbox” /> • checked • disabled • readonly • required • value
The type radiorepresents a mutually exclusive options control.<input type=”radio” /> • checked • disabled • readonly • req...
The type imagerepresents an button from which we can add some behavior.<input type=”image” /> • autofocus • disabled • rea...
The type submitrepresents a button that, when activated, submits the form.<input type=”submit” /> • autofocus • disabled •...
The type resetrepresents a button that, when activated, resets the form.<input type=”reset” /> • autofocus • disabled • re...
The type buttonrepresents a button with no default behavior.<input type=”button” /> • autofocus • disabled • required • va...
The select elementrepresents a control for selecting amongst a set of options.<select>    <option>Otros (Debes completar e...
The select elementAttributes.      <select> ... </select>      • autofocus   html5      • multiple      • size      • requ...
The select elementExamples.    <select>        <option value=”opt1”>value</option>    </select>    <select>        <optgro...
The textarea elementrepresents a multiline plain text edit control.     <textarea></textarea>
The textarea elementis used for long inputs of text.     <textarea></textarea>       • autofocus       • cols       • dirn...
Thanks
Upcoming SlideShare
Loading in …5
×

Frontend for developers

776 views

Published on

This presentation was done for MercadoLibre developers. The goal was improving the knowledge about HTML and avoid semantic ambiguities.

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
776
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
18
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Frontend for developers

  1. 1. Frontend for Developers HTML for WebApps
  2. 2. The Web Browser
  3. 3. Web BrowsersThe most important ones. • Internet Explorer • Chrome • Firefox • Safari • Opera
  4. 4. Web BrowsersChrome is bigger than Internet Explorer. • Chrome • Internet Explorer • Firefox • Safari • Opera
  5. 5. Rendering engineHow it works? 1. Parses HTML to construct the DOM tree 2. Renders tree construction 3. Creates layout of the render tree 4. Paints the render
  6. 6. Web Browser’s partsretrieves resources from the server and visually presents them.
  7. 7. The DOMis a language-independent API.
  8. 8. The DOMis implemented in JavaScript in the browser.
  9. 9. The DOMis the object presentation of the HTML document. html head body title h1 p h2 ul div li li span img p
  10. 10. The DOMis the interface of HTML elements to the outside world.
  11. 11. Rendering engineby browser. Engine used by Firefox, SeaMonkey, Galeon, Camino, K-Meleon, Flock, Epiphany-Gecko gecko ... etcPresto Opera, Opera Mobile, Nintendo DS & DSi Browser, Internet ChannelTrident Internet Explorer, Windows Phone 7 Safari, Chrome, Adobe Air, Android Browser, Palm webOS, SymbianWebKit S60, OWB, Stream, Flock, RockMelt
  12. 12. JavaScript engineby browser. Engine used bySpiderMonkey Mozilla FirefoxRhino MozillaCarakan OperaChakra Internet Explorer > 9JScript Internet Explorer < 8V8 ChromeNitro Safari
  13. 13. The User Experience
  14. 14. Progressive Enhancementaims to deliver information to the widest possible audience. • sparse, semantic markup contains all content • end-user web browser preferences are respected
  15. 15. Progressive Enhancementbasic content should be accessible to all web browsers.
  16. 16. Progressive Enhancementbasic functionality should be accessible to all web browsers.
  17. 17. Progressive Enhancementenhanced layout is provided by externally linked CSS.
  18. 18. Progressive Enhancementenhanced behavior is provided by unobtrusive JavaScript.
  19. 19. Polyfillsis a feature detection technique for regressive enhancement.
  20. 20. FrontendIts parts. • The Web Browser • The User Experience • The Content Layer • The Visual Layer • The Behavior Layer
  21. 21. The Content Layer
  22. 22. What is HTML • HyperText Markup Language • Markup language is not programming language • The web is published in HTML • It’s maintained by the W3C
  23. 23. ElementsTypes of elements according to the tag. <p>It’s the content</p> Open tag & close tag. Element with content. <img /> Unique tag. Element without content.
  24. 24. AttributesSyntax. <p id=”paragraph”>It’s the content</p> Open tag & close tag. Element with content. <img src=”/image.jpg” alt=”It has a book.” /> Unique tag. Element without content.
  25. 25. AttributesThe common attributes for the HTMLElement. • title • id • class • lang • dir • data-*
  26. 26. ReservedCharacters Entities
  27. 27. Reserved Characterscannot be used inside the document. • < can be mixed with tags • > can be mixed with tags • “ the quotes start an attribute • & the ampersand is also reserved
  28. 28. Entitiesare used to implement reserved characters. < --------- &lt; > --------- &gt; & --------- &amp; “ --------- &quote;
  29. 29. Entitiesexamples.10 < 20<p> 10 &lt; 20 </p>20 > 10<p> 10 &gt; 20 </p>He said: “Don’t do it”<p>He said: &quot;Don’t do it&quot; </p>Company & Co.<p> Company &amp; Co. </p>
  30. 30. The Structurehtml, head & body
  31. 31. The doctypeis required to do cross browser.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  32. 32. The html elementis the root of the document.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  33. 33. The head elementis a collection of metadata.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  34. 34. The body elementis the place for the content.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  35. 35. The DOMIt’s the interface of HTML elements to the outside world
  36. 36. The DOMinterface of a image element.interface HTMLImageElement : HTMLElement { attribute DOMString alt; attribute DOMString src; attribute DOMString crossOrigin; attribute DOMString useMap; attribute boolean isMap; attribute unsigned long width; attribute unsigned long height; readonly attribute unsigned long naturalWidth; readonly attribute unsigned long naturalHeight; readonly attribute boolean complete;};
  37. 37. PracticesThe best of them
  38. 38. Commentthe code.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  39. 39. Attributesmust always be between quotes.<img width=”50” height=”90” alt=”Iphone Image” />
  40. 40. Attributesmust always be between quotes.<img width=”50” height=”90” alt=”Iphone Image” />
  41. 41. JavaScriptfunctions should never go in event attributes.<p onclick=”hideDiv();”></p>
  42. 42. JavaScriptfunctions should never go in event attributes.<p onclick=”hideDiv();”></p> not recommended
  43. 43. JavaScriptfunctions should never go in event attributes.<p id=”overview”></p><p onclick=”hideDiv();”></p> not recommended
  44. 44. JavaScriptnever goes in head element.<!doctype html><html> <head> <title>MercadoLibre</title> <script> function greet(){ alert(“hello world!”); } </script> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  45. 45. JavaScriptnever goes in head element.<!doctype html><html> <head> <title>MercadoLibre</title> <script> function greet(){ not recommended alert(“hello world!”); } </script> </head> <body> <p>The basic content</p> <!-- Comment --> </body></html>
  46. 46. JavaScriptnever goes in head element.<!doctype html><html> <head> <title>MercadoLibre</title> </head> <body> <p>The basic content</p> <!-- Comment --> <script> function greet(){ alert(“hello world!”); } </script> </body></html>
  47. 47. CSSrules should never go inline.<p style=”color:#ffffff;”></p>
  48. 48. CSSrules should never go inline.<p style=”color:#ffffff;”></p> not recommended
  49. 49. CSSrules should never go inline.<p class=”featured”></p><p style=”color:#ffffff;”></p> not recommended
  50. 50. MetadataInside the head
  51. 51. The head elementthe place for metadata. <head> </head>
  52. 52. The title elementrepresents the document’s name and identifies it out of context. • Required • Unique • ~ 64 characters
  53. 53. The title elementrepresents the document’s name and identifies it out of context.<head> <title>MercadoLibre Argentina</title></head>
  54. 54. The link elementallows you to link the current document to other resources. <link /> • rel • href • media • type
  55. 55. The rel attributeadds meaning to the external resources. • alternate • nofollow • author • noreferrer • bookmark • prefetch • help • prev • icon • search • license • stylesheet • next • tag
  56. 56. The rel attributeexamples.<link rel=”stylesheet” type=”text/css” href=”/external.css” ... /><link rel=”alternate” type=”application/rss+xml” ... /><link rel=”prev” title=”Chapter 2” href=”/chapter-2” ... /><link rel=”next” title=”Chapter 4” href=”/chapter-4” ... /><link rel=”alternate stylesheet” title=”New Layout” ... />
  57. 57. The meta elementrepresents various kinds of metadata. <meta /> • name • charset • http-equiv • content
  58. 58. The meta elementThe name attribute.<meta name=”author” content=”Hernan Mammana” /><meta name=”copyright” content=”2011” /><meta name=”description” content=”It’s the ... for HTML talk” /><meta name=”generator” content=”gDocs” /><meta name=”keywords” content=”html,talk,slideshow” /><meta name=”robots” content=”all” />
  59. 59. The meta elementThe charset attribute.<meta charset=”utf-8” />
  60. 60. The ContentInside the body
  61. 61. The elements for textare used to give meaning to the content. • Headings • h1, h2, h3, h4, h5, h6 • Paragraph • p • Inside Headings, Paragraph and List • strong, em, cite, sup, sub, acronym, a
  62. 62. HeadingsExamples from Home. <h1>MercadoLibre</h1> <h2>Clasificados</h2> <h2>Categorías</h2> <h2>Recomendados</h2> <h2>Más vendidos de la ... </h2> <h2>Destacados</h2> <h2>Más Compartidos</h2> <h2>Subastas desde $1</h2> <h2>Historial</h2> <h2>12 Cuotas sin interés</h2> <h2>Imperdibles del día</h2>
  63. 63. HeadingsExamples for VIP. <h1>Apple Ipod touch...</h1> <h2>Reputación del vendedor</h2> <h2>Medios de pago</h2> <h2>Medios de envío</h2>
  64. 64. Paragraphexamples.<p>MercadoLibre no vende este artículo ... </p><p>Local Palermo Fscomputers Dist Autorizado ... </p>
  65. 65. Inside paragraphs ...Examples. <p><strong>Elige el motivo de tu denuncia: </strong></p> <p><strong>$ 1.899<sup>99</sup></strong></p>
  66. 66. ListsTo add meaning
  67. 67. Ordered & Unordered ListsThe most used lists on the web. • Ordered List To show rankings, prioritize tasks and search results • List Item To put anything inside the Ordered List • Unordered List To list anything without priorities • List Item To put anything inside the Unordered Lists
  68. 68. Ordered Listis used to show rankings, prioritize tasks and search results.<ol> <li>Apple Ipod Touch 8 Gb 4ta Generaci... </li> <li>Apple Ipod Touch 32gb 4g 4ta Gener... </li> <li>Apple Ipod Nano 8gb 6g 6ta Genera... </li></ol>
  69. 69. Unordered Listis used to list anything without priorities. <ul> <li>Artículo nuevo </li> <li>208 vendidos </li> <li>Capital Federal </li> </ul> <ul> <li>Efectivo </li> <li>Visa American... </li> <li>Tu compra esta...</li> </ul>
  70. 70. Description Listis used to make dictionaries, screenplays and key-value pairs. • It has three parts • Description List element • Description Term element • Description Definition element
  71. 71. Definition ListExample. <dl> <dt>Condición:</dt> <dd>Artículo nuevo</dd> <dt>Ubicación:</dt> <dd>capital federal</dd> <dt>Vendidos:</dt> <dd>193 vendidos</dd> <dt>Finaliza en:</dt> <dd>Finaliza en 4d 2h</dd> </dl>
  72. 72. TableTo organize the data
  73. 73. The table elementand all its semantic elements. • The basic elements table, tr, td, th • The semantic elements caption, thead, tbody, tfoot, colgroup, col
  74. 74. The table elementExample.
  75. 75. The basic elementsThe semantic table elements.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  76. 76. The table elementThe global data container.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  77. 77. The tr elementThe row.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  78. 78. The th elementThe header data element.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  79. 79. The td elementThe content data element.<table> <tr> <th>header</th> <th>header</th> </tr> <tr> <td>data</td> <td>data</td> </tr></table>
  80. 80. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  81. 81. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  82. 82. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  83. 83. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  84. 84. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  85. 85. The semantic elementsThe semantic table elements.<table> <caption>It’s title of the table</caption> <thead> </thead> <tfoot> </tfoot> <tbody> </tbody></table>
  86. 86. The semantic elementsThe semantic table elements. table first name last name age purchase
  87. 87. The semantic elementsThe semantic table elements. table first name last name age purchase
  88. 88. The semantic elementsThe semantic table elements. table personal data purchase first name last name age
  89. 89. The semantic elementsThe semantic table elements. table personal data purchase first name last name age
  90. 90. The semantic elementsThe semantic table elements.<table> <caption>Title of the table</caption> <colgroup> <col /> <col /> <col /> </colgroup> <tfoot> ...</table>
  91. 91. The semantic elementsThe semantic table elements. table personal data age purchase first name last name
  92. 92. The semantic elementsThe semantic table elements.<table> <caption>Title of the table</caption> <colgroup> <col /> <col /> </colgroup> <col /> <tfoot> ...</table>
  93. 93. The semantic elementsThe semantic table elements.<table> <caption>Title of the table</caption> <colgroup id=”personalData”> <col class=”first-name” /> <col class=”last-name” /> </colgroup> <col class=”age” /> <tfoot> ...</table>
  94. 94. Yes, we can use tables! Only for data!
  95. 95. LinksThe hypertext
  96. 96. The a elementallows you to link current document to other resources. • href • rel • target • title • type
  97. 97. The a elementURL decomposition attributes. interface HTMLAnchorElement : HTMLElement { ... attribute DOMString protocol; attribute DOMString host; attribute DOMString hostname; attribute DOMString port; attribute DOMString pathname; attribute DOMString search; attribute DOMString hash; };
  98. 98. ImagesNon decorative
  99. 99. The img elementallows you to insert an image. • src • alt • title • width • height
  100. 100. The img elementallows you to insert an image.<img src=”/image.jpg” alt=”It has a book.” />
  101. 101. FormsGetting the user’s data
  102. 102. The form elementestablishes a relationship between the user and the organization.
  103. 103. The form elementestablishes a relationship between the user and the organization.
  104. 104. The form elementestablishes a relationship between the user and the organization.
  105. 105. The form elementestablishes a relationship between the user and the organization.
  106. 106. The form elementestablishes a relationship between the user and the organization.
  107. 107. The form elementestablishes a relationship between the user and the organization. • Component of a web page • They have form controls, like text fields & buttons • The user can interact with them • The user’s data can be sent to the server • No client side scripting is needed • An API is available. It augments the user experience
  108. 108. The form elementexample. <form method=”post” action=”/signup”> </form>
  109. 109. The form elementThe method attribute. <form method=”post” action=”/signup”> </form>
  110. 110. The form elementThe action attribute. <form method=”post” action=”/signup”> </form>
  111. 111. Semantic elementsfor the form. • fieldset is the element to group similar meaning controls • legend is the element to give a meaning to the fieldset • label is the element to give meaning to a control
  112. 112. Semantic elementsfor the form. <form method=”post” action=”/signup”> <fieldset> <legend>Regístrate</legend> <label>Nombre:</label> </fieldset> </form>
  113. 113. Form controlsThe elements inside the form. • input, It render very different control related to his type attribute. • select It render two list of options, single and multiple. • optgroup Semantic element to group similar options. • option It’s a option in the select list. • textarea It render a control to multiline text. • button It render a common button. Could be user outside the form tag.
  114. 114. The input elementIt has many types. Each type has a different display. <input type=”{VALUE}” /> • hidden • month html5 • text • week html5 • search html5 • time html5 • tel html5 • datetime-local html5 • url html5 • number html5 • file • email html5 • range html5 • submit • password • color html5 • image • datetime html5 • checkbox • reset • date html5 • radio • button
  115. 115. The input elementIt has many types. Each type has a different display.<input type=”{TYPE}” name=”{NAME}” id=”{ID}” /> • accept • multiple • autocomplete • pattern • autofocus • placeholder • checked • readonly • disabled • required • list • size • max • src • maxlength • step • min • value
  116. 116. The type hiddenrepresents a value that isn’t intended to be manipulated.<input type=”hidden” /> • name • value
  117. 117. The type textrepresents a one line text edit control for the element’s value.<input type=”text” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  118. 118. The type textrepresents a one line text edit control for the element’s value.<input type=”search” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  119. 119. The type telrepresents a control for editing a telephone number.<input type=”tel” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  120. 120. The type passwordrepresents a one line text edit control for the element’s value.<input type=”password” /> • autocomplete • autofocus • disabled • maxlength • placeholder • readonly • required • size
  121. 121. The type emailrepresents a control for editing the e-mail addresses.<input type=”email” /> • autocomplete • autofocus • disabled • maxlength • multiple • placeholder • readonly • required • size
  122. 122. The type urlrepresents a control for editing a single absolute URL.<input type=”url” /> • autocomplete • autofocus • disabled • maxlength • multiple • placeholder • readonly • required • size
  123. 123. The type filerepresents a list of selected files. <input type=”file” /> • accept • autocomplete • autofocus • disabled • multiple • placeholder • readonly • required • size
  124. 124. The type daterepresents a control for setting a string representing a date.<input type=”date” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  125. 125. The type datetimerepresents a control for setting a global date and time.<input type=”datetime” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  126. 126. The type monthrepresents a control for setting a string representing a month.<input type=”month” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  127. 127. The type weekrepresents a control for setting a string representing a week.<input type=”week” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  128. 128. The type datetime-localrepresents a control for setting a local date and time.<input type=”datetime-local” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  129. 129. The type numberrepresents a control for setting a string representing a number<input type=”number” /> • autocomplete • autofocus • disabled • max • min • placeholder • readonly • required • size • step
  130. 130. The type rangerepresents a number, but the exact value is not important.<input type=”range” /> • autofocus • disabled • max • min • readonly • required • size • step
  131. 131. The type colorrepresents a control for setting a string simple color.<input type=”color” /> • autocomplete • autofocus • disabled • placeholder • readonly • required • size
  132. 132. The type checkboxrepresents a two-state control.<input type=”checkbox” /> • checked • disabled • readonly • required • value
  133. 133. The type radiorepresents a mutually exclusive options control.<input type=”radio” /> • checked • disabled • readonly • required • value
  134. 134. The type imagerepresents an button from which we can add some behavior.<input type=”image” /> • autofocus • disabled • readonly • required • src
  135. 135. The type submitrepresents a button that, when activated, submits the form.<input type=”submit” /> • autofocus • disabled • required • value
  136. 136. The type resetrepresents a button that, when activated, resets the form.<input type=”reset” /> • autofocus • disabled • required • value
  137. 137. The type buttonrepresents a button with no default behavior.<input type=”button” /> • autofocus • disabled • required • value
  138. 138. The select elementrepresents a control for selecting amongst a set of options.<select> <option>Otros (Debes completar el comentario).</option></select>
  139. 139. The select elementAttributes. <select> ... </select> • autofocus html5 • multiple • size • required • readonly • disabled • name
  140. 140. The select elementExamples. <select> <option value=”opt1”>value</option> </select> <select> <optgroup label=”Group One”> <option value=”opt1”>value</option> </optgroup> </select>
  141. 141. The textarea elementrepresents a multiline plain text edit control. <textarea></textarea>
  142. 142. The textarea elementis used for long inputs of text. <textarea></textarea> • autofocus • cols • dirname • disabled • maxlength • name • placeholder html5 • readonly • required • rows • wrap
  143. 143. Thanks

×