El documento resume la cuarta sesión de un curso de HTML y CSS. Cubre la historia y versiones de HTML, elementos HTML, introducción a CSS incluyendo propiedades de color, texto, fuentes y posicionamiento. También presenta conceptos básicos de diseño de sitios web como cajas de modelo, tablas, listas y selectores CSS. Por último, brinda consejos sobre optimización para motores de búsqueda (SEO).

1. Curso HTML / CSS Cuarta Sesión

2. Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias

3. Cuarta Sesión Introducción HTML. Historia. Versiones. CSS. HTTP y tipos de sitios web. HTML Estructura y sintaxis. Secciones y elementos. Elementos. Clasificación. Ejemplos Formularios CSS Referencia. Sintaxis. Elementos y selectores. Layout tipicos SEO

4. CSS Propiedades simples

5. CSS | Background background-color: color | none background-image: none | url () background-position: x y background-repeat: repeat| repeat-x | repeat-y| no-repeat background-attachment: scroll | fixed background: ... ... >> Ver ejemplos y cheat sheet

6. CSS | Texto Atributos del texto color: color direction: ltr | rtl line-height : <tamaño> letter-spacing: <tamaño> text-align: left | right | none | justify text-decoration: underline | none text-indent : <tamaño> text-transform : none | capitalize | uppercase | lowercase white-space: nomal | nowrap word-spacing: <lenght> >> Ver ejemplos

7. CSS | Font Atributos del font. font-family : “Arial”, sans-serif font-size: <tamaño> font-stretch: [ultra-|extra-] wider|condensed font-style: italic | oblique font-variant: small-caps font-weight: bold|bolder|lighter|x00 >> Ver ejemplos

8. CSS | Box model Mediante este modelo se determina el entorno y el tamaño de los elementos:

9. CSS | Border Define el borde del elemento (fuera del elemento) border-bottom-color: <color> border-bottom-style: solid|dashed|groove|inset|outset|... border-bottom-width: <tamaño> border-top|border-bottom|border-left|border-right: <tamaño> <style> <color> border: <tamaño> <style> <color> >> Ver ejemplos

10. CSS | Margin margin-top| margin-right| margin-bottom| margin-left : <tamaño> margin: <tamaño> Ejemplos margin: 10px; margin-top:10px; margin: 2em 2em; margin: 1em 2em 3em 4em;

11. CSS | Padding Define un margen interno al elemento padding-top| padding-right| padding-bottom| padding-left : <tamaño> padding: <tamaño> CSS | Tables border-collapse: collapse|separate border-spacing: <tamaño> <tamaño>

12. CSS | Listas Atributos de Listas list-style-image: url() list-style-position: inside|outside list-style-type: circle| square| decimal |hiragana | ... marker-offset: display: inline => A list Apart : Taming list

13. CSS + propiedades

14. CSS | Position Static : Comportamiento por default. La posición esta determinada por el flujo normal de los elementos. Absolute: La posición esta fija en la página. Relative: La posición es 'static' más un desplazamiento. Fixed: La posición es fija en la pantalla. Propiedades: top, left, right, bottom >> Ver ejemplos de posición + box model

15. CSS | Position Atributos relacionados position: absolute|relative|fixed top: 1em left: 50% right: 2cm bottom: -300px >> Pruebas con “.nav”

16. CSS | Tamaño width : <tamaño> height : <tamaño> min-height|max-height|min-width|max-width: <tamaño>

17. CSS | Clasificación float: left|right|none clear: both| left | right cursor: pointer | default | move |... display: inline | block | none position: ... visibility: visible | hidden http://css.maxdesign.com.au/floatutorial

18. CSS | Selectores nombres de elementos p,a { font-weight:bold } clases .contenido, .footer { color:red } ids #encabezado { margin:2em } Combinaciones div.primero ul#navegacion

19. El documento HTML puede ser visto como un árbol. Los selectores puede particularizarse: div div.lister .container h1 div h1 em CSS | Selectores

20. De esta manera se puede definir atributos según el entorno. .producto { xxx} div.listavertival .producto { yyy } div.listahorizontal .producto { zzz } CSS | Selectores

21. Incluso usando propiedades como display:none ! >> Ver ejemplos CSS | Selectores

22. CSS | Selectores Pseudo Classes: agregan efectos a ciertos elementos a:visited|link|active|hover first-child | first-letter| first-line | ... before| after : content()

23. CSS | Layout Existen muchas formas estandar de definir la dispoción general de los elementos en la pantalla. 2 column, 3 column, 3 column + header + footer Liquids http://blog.html.it/layoutgala

24. CSS | Selectores Media types <style href=”xxxx” media=”yyyy”> all aural braille handheld projection screen tty tv

25. SEO

26. SEO Search Engine Optimization Tips CONTENIDO + ACCESO CONTENIDO: Texto original No duplicar, ni parcial ni total. A no más de dos o tres links del home. “ description” relevantes. Usar H1, H2... con coherencia.

27. SEO ACCESO: Mantener la estructura de links Usar TEXTO en links Poner palabras relavantes en los textos de los links No usar flash / JS para menu Usar sitemaps Tratar de obtener links de páginas relevantes.

28. Resumen

29. Resumen Versiones e historia del HTML Nociones de HTTP Elementos descriptivos de HTML CSS simples y selectores Nociones de SEO

30. ¡Muchas Gracias! HTML / CSS

31. Stay in touch! HTML / CSS