Html+css 2013

3,247 views
3,198 views

Published on

0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,247
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
164
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

Html+css 2013

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

×