Curso HTML CSS 4/4

2,221 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,221
On SlideShare
0
From Embeds
0
Number of Embeds
19
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Presentación de Alumnos - Nombre, cargo, sector, actividad
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • Levantan las manos por nivel. Anotar totales.
  • 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

    ×