Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Curso HTML CSS 4/4

2,252 views

Published on

  • Be the first to comment

Curso HTML CSS 4/4

  1. 1. Curso HTML / CSS Cuarta Sesión
  2. 2. Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias
  3. 3. Cuarta Sesión <ul><li>Introducción </li></ul><ul><ul><li>HTML. Historia. Versiones. CSS. </li></ul></ul><ul><ul><li>HTTP y tipos de sitios web. </li></ul></ul><ul><li>HTML </li></ul><ul><ul><li>Estructura y sintaxis. </li></ul></ul><ul><ul><li>Secciones y elementos. </li></ul></ul><ul><li>Elementos. </li></ul><ul><ul><li>Clasificación. Ejemplos </li></ul></ul><ul><ul><li>Formularios </li></ul></ul><ul><li>CSS </li></ul><ul><ul><li>Referencia. Sintaxis. </li></ul></ul><ul><ul><li>Elementos y selectores. </li></ul></ul><ul><ul><li>Layout tipicos </li></ul></ul><ul><li>SEO </li></ul>
  4. 4. CSS Propiedades simples
  5. 5. CSS | Background <ul><li>background-color: color | none </li></ul><ul><li>background-image: none | url () </li></ul><ul><li>background-position: x y </li></ul><ul><li>background-repeat: repeat| repeat-x | repeat-y| no-repeat </li></ul><ul><li>background-attachment: scroll | fixed </li></ul><ul><li>background: ... ... </li></ul><ul><li>>> Ver ejemplos y cheat sheet </li></ul>
  6. 6. CSS | Texto <ul><li>Atributos del texto </li></ul><ul><li>color: color </li></ul><ul><li>direction: ltr | rtl </li></ul><ul><li>line-height : <tamaño> </li></ul><ul><li>letter-spacing: <tamaño> </li></ul><ul><li>text-align: left | right | none | justify </li></ul><ul><li>text-decoration: underline | none </li></ul><ul><li>text-indent : <tamaño> </li></ul><ul><li>text-transform : none | capitalize | uppercase | lowercase </li></ul><ul><li>white-space: nomal | nowrap </li></ul><ul><li>word-spacing: <lenght> </li></ul><ul><li>>> Ver ejemplos </li></ul>
  7. 7. CSS | Font <ul><li>Atributos del font. </li></ul><ul><li>font-family : “Arial”, sans-serif </li></ul><ul><li>font-size: <tamaño> </li></ul><ul><li>font-stretch: [ultra-|extra-] wider|condensed </li></ul><ul><li>font-style: italic | oblique </li></ul><ul><li>font-variant: small-caps </li></ul><ul><li>font-weight: bold|bolder|lighter|x00 </li></ul><ul><li>>> Ver ejemplos </li></ul>
  8. 8. CSS | Box model <ul><li>Mediante este modelo se determina el entorno y el tamaño de los elementos: </li></ul>
  9. 9. CSS | Border <ul><li>Define el borde del elemento (fuera del elemento) </li></ul><ul><li>border-bottom-color: <color> </li></ul><ul><li>border-bottom-style: solid|dashed|groove|inset|outset|... </li></ul><ul><li>border-bottom-width: <tamaño> </li></ul><ul><li>border-top|border-bottom|border-left|border-right: <tamaño> <style> <color> </li></ul><ul><li>border: <tamaño> <style> <color> </li></ul><ul><li>>> Ver ejemplos </li></ul>
  10. 10. CSS | Margin <ul><li>margin-top| margin-right| margin-bottom| margin-left : <tamaño> </li></ul><ul><li>margin: <tamaño> </li></ul><ul><li>Ejemplos </li></ul><ul><ul><li>margin: 10px; </li></ul></ul><ul><ul><li>margin-top:10px; </li></ul></ul><ul><ul><li>margin: 2em 2em; </li></ul></ul><ul><ul><li>margin: 1em 2em 3em 4em; </li></ul></ul>
  11. 11. CSS | Padding <ul><li>Define un margen interno al elemento </li></ul><ul><li>padding-top| padding-right| padding-bottom| padding-left : <tamaño> </li></ul><ul><li>padding: <tamaño> </li></ul>CSS | Tables <ul><li>border-collapse: collapse|separate </li></ul><ul><li>border-spacing: <tamaño> <tamaño> </li></ul>
  12. 12. CSS | Listas <ul><li>Atributos de Listas </li></ul><ul><li>list-style-image: url() </li></ul><ul><li>list-style-position: inside|outside </li></ul><ul><li>list-style-type: circle| square| decimal |hiragana | ... </li></ul><ul><li>marker-offset: </li></ul><ul><li>display: inline </li></ul><ul><li>=> A list Apart : Taming list </li></ul>
  13. 13. CSS + propiedades
  14. 14. CSS | Position <ul><li>Static : Comportamiento por default. La posición esta determinada por el flujo normal de los elementos. </li></ul><ul><li>Absolute: La posición esta fija en la página. </li></ul><ul><li>Relative: La posición es 'static' más un desplazamiento. </li></ul><ul><li>Fixed: La posición es fija en la pantalla. </li></ul><ul><li>Propiedades: top, left, right, bottom </li></ul><ul><li>>> Ver ejemplos de posición + box model </li></ul>
  15. 15. CSS | Position <ul><li>Atributos relacionados </li></ul><ul><ul><li>position: absolute|relative|fixed </li></ul></ul><ul><ul><li>top: 1em </li></ul></ul><ul><ul><li>left: 50% </li></ul></ul><ul><ul><li>right: 2cm </li></ul></ul><ul><ul><li>bottom: -300px </li></ul></ul><ul><ul><li>>> Pruebas con “.nav” </li></ul></ul>
  16. 16. CSS | Tamaño <ul><li>width : <tamaño> </li></ul><ul><li>height : <tamaño> </li></ul><ul><li>min-height|max-height|min-width|max-width: <tamaño> </li></ul>
  17. 17. CSS | Clasificación <ul><li>float: left|right|none </li></ul><ul><li>clear: both| left | right </li></ul><ul><li>cursor: pointer | default | move |... </li></ul><ul><li>display: inline | block | none </li></ul><ul><li>position: ... </li></ul><ul><li>visibility: visible | hidden </li></ul><ul><ul><li>http://css.maxdesign.com.au/floatutorial </li></ul></ul>
  18. 18. CSS | Selectores <ul><ul><li>nombres de elementos p,a { font-weight:bold } </li></ul></ul><ul><ul><li>clases .contenido, .footer { color:red } </li></ul></ul><ul><ul><li>ids #encabezado { margin:2em } </li></ul></ul><ul><ul><li>Combinaciones div.primero ul#navegacion </li></ul></ul>
  19. 19. <ul><ul><li>El documento HTML puede ser visto como un árbol. </li></ul></ul><ul><ul><li>Los selectores puede particularizarse: </li></ul></ul><ul><ul><ul><li>div div.lister </li></ul></ul></ul><ul><ul><ul><li>.container h1 </li></ul></ul></ul><ul><ul><ul><li>div h1 em </li></ul></ul></ul>CSS | Selectores
  20. 20. <ul><ul><li>De esta manera se puede definir atributos según el entorno. </li></ul></ul><ul><ul><ul><ul><ul><ul><li>.producto { xxx} </li></ul></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><li>div.listavertival .producto { yyy } </li></ul></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><li>div.listahorizontal .producto { zzz } </li></ul></ul></ul></ul></ul></ul>CSS | Selectores
  21. 21. <ul><ul><li>Incluso usando propiedades como display:none ! </li></ul></ul><ul><li>>> Ver ejemplos </li></ul>CSS | Selectores
  22. 22. CSS | Selectores <ul><li>Pseudo Classes: agregan efectos a ciertos elementos </li></ul><ul><ul><li>a:visited|link|active|hover </li></ul></ul><ul><ul><li>first-child | first-letter| first-line | ... </li></ul></ul><ul><ul><li>before| after : content() </li></ul></ul>
  23. 23. CSS | Layout <ul><li>Existen muchas formas estandar de definir la dispoción general de los elementos en la pantalla. </li></ul><ul><ul><li>2 column, 3 column, 3 column + header + footer </li></ul></ul><ul><ul><li>Liquids </li></ul></ul><ul><ul><li>http://blog.html.it/layoutgala </li></ul></ul>
  24. 24. CSS | Selectores <ul><li>Media types </li></ul><ul><li><style href=”xxxx” media=”yyyy”> </li></ul><ul><ul><li>all </li></ul></ul><ul><ul><li>aural </li></ul></ul><ul><ul><li>braille </li></ul></ul><ul><ul><li>handheld </li></ul></ul><ul><ul><li>projection </li></ul></ul><ul><ul><li>screen </li></ul></ul><ul><ul><li>tty </li></ul></ul><ul><ul><li>tv </li></ul></ul>
  25. 25. SEO
  26. 26. SEO <ul><li>Search Engine Optimization </li></ul><ul><ul><li>Tips </li></ul></ul><ul><ul><li>CONTENIDO + ACCESO </li></ul></ul><ul><ul><li>CONTENIDO: </li></ul></ul><ul><ul><ul><li>Texto original </li></ul></ul></ul><ul><ul><ul><li>No duplicar, ni parcial ni total. </li></ul></ul></ul><ul><ul><ul><li>A no más de dos o tres links del home. </li></ul></ul></ul><ul><ul><ul><li>“ description” relevantes. </li></ul></ul></ul><ul><ul><ul><li>Usar H1, H2... con coherencia. </li></ul></ul></ul>
  27. 27. SEO <ul><li>ACCESO: </li></ul><ul><ul><li>Mantener la estructura de links </li></ul></ul><ul><ul><li>Usar TEXTO en links </li></ul></ul><ul><ul><li>Poner palabras relavantes en los textos de los links </li></ul></ul><ul><ul><li>No usar flash / JS para menu </li></ul></ul><ul><ul><li>Usar sitemaps </li></ul></ul><ul><ul><li>Tratar de obtener links de páginas relevantes. </li></ul></ul>
  28. 28. Resumen
  29. 29. Resumen <ul><ul><li>Versiones e historia del HTML </li></ul></ul><ul><ul><li>Nociones de HTTP </li></ul></ul><ul><ul><li>Elementos descriptivos de HTML </li></ul></ul><ul><ul><li>CSS simples y selectores </li></ul></ul><ul><ul><li>Nociones de SEO </li></ul></ul>
  30. 30. ¡Muchas Gracias! HTML / CSS
  31. 31. Stay in touch! HTML / CSS

×