HTML + CSS

Introducción a HTML y CSS, por Sergio Nouvel, Consultor UX y Diseñador Front-end.

1. HTML +CSS
2. SERGIO NOUVEL @SHESHO
3.           
4.            USUARIO NAVEGADOR PETICIÓN SERVIDOR RESPUESTA
5.            TÚ CHROME “GUARDA MIS DATOS” “OK, DUDE” PÁGINA WEB (HTML+CSS +IMÁGENES)
6. HTML = CONTENIDO “QUÉ” CSS = PRESENTACIÓN “CÓMO”
7. HTML = CONTENIDO “HOOOLA, LES QUIERO DECIR QUE BLA BLA BLA” CSS = PRESENTACIÓN “OK, ESO VA CON TEXTO ROJO Y 2 PX DE MARGEN”
8. HTML DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscing elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr eget magna. Etiam libero pellentesque placerat SDFDSFSFSDF SDFFFF “ESO ES UN PÁRRAFO” “ESO ES UN TÍTULO 1” “AHÍ TIENE QUE IR UNA IMAGEN” “ESO ES UN LISTADO”
9. HTML DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscing elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr eget magna. Etiam libero pellentesque placerat SDFDSFSFSDF SDFFFF <P> <H1> <IMG> <UL>
10. CSS DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscing elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr eget magna. Etiam libero pellentesque placerat SDFDSFSFSDF SDFFFF “ESE LINK VA SUBRAYADO” “ESO VA CON ARIAL” “ESTA PARTE VA EN NEGRITA Y BORDE ROJO” “ESA CAJA VA A LA IZQUIERDA”
11. CSS DICE: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras est est, condimentum a vulputate ut, imperdiet nec elit Aenean nec dui et risus suscipit malesuada. Nunc auctor pellentes nulla in suscipit. Lorem ipsum dol sit amet, consectetur adipiscing elit. Donec purus nisl, vulputate vitae pretium tincidunt, pharetr eget magna. Etiam libero pellentesque placerat SDFDSFSFSDF SDFFFF text-decoration: underline; font-family: arial; font-weight: bold; border: 1px solid red; float: left;
12.  CSS  HTML  HTML  HTML  HTML
13. HTML ES SEMÁNTICO
14. SINTAXIS HTML <etiqueta> contenido… </etiqueta> APERTURA CIERRE
15. <strong>Esto  es  una  negrita </strong>  y  esto  no  lo  es.   <em>Esto  está  en  cursiva</em>   y  esto  no  lo  está. <perro>Esto  es  un  perro </perro>  y  esto  no  lo  es.
16. <strong>Esto  es  una   negrita</strong>  y   esto  no  lo  es.   <em>Esto  está  en   cursiva</em>  y  esto   no  lo  está. <perro>Esto  es  un   perro</perro>  y  esto   no  lo  es. Esto es una negrita y esto no lo es. Esto está en cursiva y esto no lo está. y esto no lo es.
17. <ironía>   Qué  bonito  te  queda   ese  vestido! </ironía>
18. ALGUNAS ETIQUETAS SE CIERRAN A SÍ MISMAS <p>A  continuación,  un   salto  de  línea:   <br/>   Gracias,  salto  de   línea.</p>
19. ALGUNAS ETIQUETAS SE CIERRAN A SÍ MISMAS <p>A  continuación,  una   imagen:   <img  />   Gracias,  imagen.</p>
20. <p> <a> <strong> <em> <h1>…<h6> PÁRRAFO VÍNCULO (ANCLA) NEGRITA CURSIVA TÍTULOS (1 AL 6)
21. ALGUNAS ETIQUETAS PUEDEN CONTENER A OTRAS (ANIDACIÓN) <p> Esto  es  un  párrafo   <a>y  esto  es  un  vínculo  dentro   del  párrafo.</a>   Esto  es  sólo  párrafo. </p> Esto  no  es  párrafo  ni  vínculo.
22. Y OTRAS PUEDEN CONTENERSE A SÍ MISMAS <div> Esto  es  una  "div",  y   <div> esto  es  una  sub  "div"   dentro  de  otra </div> y  esto  es  parte  de  la  “div”  grande </div>  
23. <div> Esto  es  una  "div",  y   <div> esto  es  una  sub  "div"   dentro  de  otra </div> y  esto  es  parte  de  la   “div”  grande </div>   ETIQUETA “PARENT” ETIQUETA “CHILD”
24. ...SÍ, EXACTO
25. LA GRACIA DE LAS ETIQUETAS SON SUS ATRIBUTOS <a>Este  vínculo  no  lleva  a   ninguna  parte</a> <a  href="http://example.com">Este   vínculo  me  lleva  a  example.com </a>
26. LAS ETIQUETAS PUEDEN TENER MUCHOS ATRIBUTOS <a  href="index.html"   target="_blank">Home</a> <img  src="foto.jpg"  title="hover   me!"  width="500"  height="400"/> (OJO, SIEMPRE VAN EN LA ETIQUETA DE APERTURA)
27. href src title target type URL DEL LINK UBICACIÓN DEL RECURSO LEYENDA AL PASAR EL MOUSE PARA ABRIR EN VENTANA NUEVA SI ES UN BOTÓN, UN CHECKBOX, UN CAMPO DE TEXTO, ETC.
28. <a  href="http://example.com"> <img  src="foto.jpg"  /> <p  title="hover  me!"> <a  target="_blank"> <input  type="button"  /> ATRIBUTO VALOR
29. ALGUNOS ATRIBUTOS NO NECESITAN UN VALOR <script  async  src="jquery.js"> <input  type="text"  required  /> <input  type="checkbox"  checked  />
30. LA PÁGINA WEB MÁS BÁSICA DEL UNIVERSO ES ASÍ: <html> <head>...</head> <body>...</body> </html>
31. <head> <title> <meta> <link> <script> <style> </head> TÍTULO DE LA PÁGINA FORMATO DE CARACTERES E INFO ÚTIL PARA GOOGLE VINCULAR CSS, MOSTRAR FAVICONS, ETC INSERTAR JAVASCRIPT INSERTAR CSS DIRECTAMENTE
32. BLOCK V/S INLINE
33. BLOCK: UNA CAJA QUE OCUPA SU CARRIL PROPIO Block& Block&(predeterminado)& Block&
34. ALGUNAS ETIQUETAS BLOCK <div> <p> <header> <ul> <aside> "CAJA" NO SEMÁNTICA PÁRRAFO ENCABEZADO DE LA PÁGINA LISTADO (VIÑETAS) INFORMACIÓN COMPLEMENTARIA (SIDEBAR)
35. INLINE: FLUYE CON EL TEXTO Y NO TIENE DIMENSIONES Hola, esto es un párrafo, y esto es un elemento inline dentro de este párrafo.
36. <p>Hola,  esto  es  un   párrafo,  <span>  y  esto   es  un  elemento   inline</span>  dentro   de  ese  párrafo.</p>
37. ALGUNAS ETIQUETAS INLINE <span> <a> <strong> <em> <time> "FRAGMENTO" NO SEMÁNTICO VÍNCULO NEGRITA CURSIVA (ÉNFASIS) FECHA/HORA
38. HTML5
39. HTML5 ES HTML.
40. ETIQUETAS HTML5: MEDIA <canvas> <audio> <video> LIENZO DE DIBUJO ADIVINEN ADIVINEN
41. ETIQUETAS HTML5 ESTRUCTURALES <header> <aside> <footer> <hgroup> <nav> ENCABEZADO INFO COMPLEMENTARIA (SIDEBAR) PIE DE PÁGINA GRUPO DE ENCABEZADOS MENÚ DE NAVEGACIÓN
42. ETIQUETAS HTML5 SEMÁNTICAS <article> <section> <time> UNIDAD DE INFORMACIÓN GRUPO DE UNIDADES DE INFORMACIÓN FECHA/HORA
43. CLASS & ID
44. ATRIBUTOS APLICABLES A LO QUE SEA <a  class="button">Home</a> <p  id="importante">Párrafo</p> <article  class="blog-­‐post"   id="post-­‐528">Hola</article>
45. "MARCAN" EL HTML CON NOMBRES QUE LUEGO USAREMOS EN CSS "A  todos  los  párrafos  con  nombre   de  clase  'destacado',  se  les   solicita  usar  fuente  Tahoma  a  la   brevedad  posible." -­‐  CSS
46. CLASS = MUCHAS VECES “PERRO” ID = SÓLO UNA VEZ “FIRULAIS”
47. CLASS = VARIAS A LA VEZ “PERRO COLLIE” ID = SÓLO UNA VEZ “FIRULAIS”
48. CLASS = REUTILIZACIÓN “HEY! USTEDES!” ID = DIFERENCIACIÓN “TÚ, SOLAMENTE TÚ”
49. <a  class="button">Click1</a> <a  class="button"   id="submit">Click2</a> <a  class="button   small">Click3</a> <a  class="button  small"   id="toggle">Click4</a> <a  class="button   large">Click5</a>
50. CSS CASCADING STYLE SHEETS
51. SINTAXIS CSS selector  {   regla1:valor1; regla2:valor2; } QUÉ SE MODIFICARÁ CÓMO SE MODIFICARÁ ...FIN
52. SINTAXIS CSS a  {   color:green; font:Arial; } QUÉ SE MODIFICARÁ CÓMO SE MODIFICARÁ ...FIN "A TODAS LAS ETIQUETAS <A>…"
53. SINTAXIS CSS h1  {   width:100px; margin:1em; } QUÉ SE MODIFICARÁ CÓMO SE MODIFICARÁ ...FIN "A TODAS LAS ETIQUETAS <H1>…"
54. CSS TE CAMBIARÁ LA VIDA a  {   color:red; } SIN CSS :(
55. SINTAXIS DE SELECTORES perro .gris #firulais SELECTOR HTML <perro> class="gris" id="firulais"
56. SINTAXIS DE SELECTORES article .button #toggle SELECTOR HTML <article> class="button" id="toggle"
57. SINTAXIS DE SELECTORES perro.gris perro#firulais perro.gris.maltes SELECTOR HTML <perro  class="gris"> <perro   id="firulais"> <perro  class="gris   maltes">
58. .form-­‐item SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
59. div.form-­‐item SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
60. .form SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
61. .form.item SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
62. #submit SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
63. div  input SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div> OJO: ESPACIO
64. div  div SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
65. a,  .item,  input SELECTOR HTML <a  class="form-­‐item"   href="#">Toggle</a> <div  class="form-­‐item"> <div  class="form"   id="submit"> <input  type="text"  /> </div> </div> <div  class="form  item"> Text  here</div>
66. MODELO DE CAJA OUTLINE
67. header  {   margin-­‐top:100px; margin-­‐right:50px; margin-­‐bottom:40px; margin-­‐left:90px; }
68. header  {   margin:100px  50px   40px  90px; } ...LA MAGIA DEL SHORTAND
69. footer  {   padding-­‐top:40px; padding-­‐right:10px; padding-­‐bottom:40px; padding-­‐left:10px; }
70. footer  {   padding:40px  10px; } ...LA MAGIA DEL SHORTAND
71. aside  {   border-­‐color:#ffc; border-­‐style:solid; border-­‐width:2px; }
72. aside  {   border:2px  solid  #ffc; } ...LA MAGIA DEL SHORTAND
73. FRAME... WORKS?
74. HTML = BOILERPLATE CSS = BOOTSTRAP JS = JQUERY
75. HTML = HAML CSS = SASS JS = COFFEESCRIPT LENGUAJES DE ABSTRACCIÓN/ PREPROCESADORES
76. (GRACIAS, RUBY)
77. ABSTRACCIÓN .container %strong Hola %a{:href=>"#"} Click  here #featured %em  Look! HAML HTML <div  class="container"> <strong>  Hola  </strong> <a  href="#"> Click  here </a> <div  id="featured"> <em>Look!  </em> </div> </div>
78. ABSTRACCIÓN .container width:  300px color:  red a border:  none .item cursor:  pointer SASS CSS .container  { width:  300px; color:  red; } .container  a  { border:  none; } .container  .item  { cursor:  pointer; }
79. BORRE CÓDIGO.
80. GRACIAS. slideshare.net/fondiu www.continuum.cl