Curso HTML / CSS Tercera Sesión
Presentación Matías Alejo García mailto: [email_address] msn:matias_alejo@hotmail.com http://linkedin.com/in/matias
Qué vimos hasta ahora? <ul><li>Sesión 1 </li></ul><ul><ul><li>Definición de HTML, diferencias markup procedural y descript...
Qué vimos hasta ahora? <ul><li>Sesión 2 </li></ul><ul><ul><li>Sintáxis HTML.  </li></ul></ul><ul><ul><ul><li>Caracteres de...
Qué vimos hasta ahora? <ul><li>Sesión 2 </li></ul><ul><ul><li>Body: </li></ul></ul><ul><ul><ul><li>DIV y SPAN </li></ul></...
Tercera Sesión <ul><li>Introducción </li></ul><ul><ul><li>HTML. Historia. Versiones. CSS. </li></ul></ul><ul><ul><li>HTTP ...
HTML | FORM y OTROS
HTML  <ul><li>< IMG/> </li></ul><ul><li>Define un link a una imagen en el documento. </li></ul><ul><li>Tiene DOS atributos...
HTML  <ul><li>< IMG/> </li></ul><ul><li>Define un link a una imagen en el documento. </li></ul><ul><li>Tiene DOS atributos...
HTML  <ul><li><BR/> </li></ul><ul><ul><li>Line Break </li></ul></ul><ul><li><HR/> </li></ul><ul><ul><li>Horizontal Line </...
HTML | Forms <ul><li><FORM> </li></ul><ul><ul><ul><li>Recibe dos atributos: </li></ul></ul></ul><ul><ul><ul><ul><li>action...
HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li>text </li></ul></ul><ul><ul><ul><li>size </li></ul></ul></ul><ul...
HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li>radio </li></ul></ul><ul><ul><ul><li>value </li></ul></ul></ul><...
HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li>Checkbox </li></ul></ul><ul><ul><ul><li>value </li></ul></ul></u...
HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li><SELECT> </li></ul></ul><ul><ul><ul><li><OPTION> </li></ul></ul>...
HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li><TEXTAREA> </li></ul></ul><ul><ul><ul><li>rows </li></ul></ul></...
CSS
CSS <ul><li>CSS </li></ul><ul><li>Cascade Style Sheet </li></ul><ul><li>Lenguaje que define el estilo de una página </li><...
CSS | Básicos <ul><li>Ejemplo: </li></ul><ul><li>>> Ver ejemplo </li></ul><ul><li>Probar </li></ul><ul><li>color </li></ul...
CSS | Básicos <ul><li>Sintáxis Básica </li></ul><ul><li><selector> { </li></ul><ul><li>propiedad1 : valor2; </li></ul><ul>...
<ul><li>Ejemplo de propiedades </li></ul><ul><ul><li>color </li></ul></ul><ul><ul><li>background </li></ul></ul><ul><ul><l...
<ul><li>Unidades básicas </li></ul>CSS | Básicos
<ul><li>¿Cuál es la diferencia  </li></ul><ul><li>entre un mm y un píxel? </li></ul><ul><li>¿Cómo se especifica un color? ...
<ul><li>Unidades  </li></ul><ul><ul><li>Tamaños </li></ul></ul><ul><ul><ul><li>em : relativo al tamaño de texto actual: 1e...
<ul><li>Unidades  </li></ul><ul><ul><li>Colores </li></ul></ul><ul><ul><ul><li>nombre! (red, yellow...) </li></ul></ul></u...
Algunos ejemplos p { color: red; background: green url(“/wall.png”); width: 70%; border: 2mm solid red; font-size: 1.2em; ...
CSS | Cómo utilizarlos? <ul><li>Agregar CSS a HTML </li></ul><ul><ul><li>Inline </li></ul></ul><ul><ul><ul><li>Sólo útil p...
<ul><li>Agregar CSS a HTML </li></ul><ul><ul><li>Inline </li></ul></ul><ul><ul><ul><li><p style=”color:red”>hola</p> </li>...
Upcoming SlideShare
Loading in …5
×

Curso HTML CSS 3/4

1,178 views

Published on

  • Be the first to comment

Curso HTML CSS 3/4

  1. 1. Curso HTML / CSS Tercera 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. Qué vimos hasta ahora? <ul><li>Sesión 1 </li></ul><ul><ul><li>Definición de HTML, diferencias markup procedural y descriptivo. </li></ul></ul><ul><ul><li>Elementos y atributos. </li></ul></ul><ul><ul><li>HTTP, URLs, </li></ul></ul><ul><ul><li>Métodos y Headers HTTP. </li></ul></ul>
  4. 4. Qué vimos hasta ahora? <ul><li>Sesión 2 </li></ul><ul><ul><li>Sintáxis HTML. </li></ul></ul><ul><ul><ul><li>Caracteres de Control. </li></ul></ul></ul><ul><ul><ul><li>Comentarios. </li></ul></ul></ul><ul><ul><ul><li>Entidades </li></ul></ul></ul><ul><ul><li>Estructura. head y body. </li></ul></ul><ul><ul><li>Head; Title, Meta, Links </li></ul></ul>
  5. 5. Qué vimos hasta ahora? <ul><li>Sesión 2 </li></ul><ul><ul><li>Body: </li></ul></ul><ul><ul><ul><li>DIV y SPAN </li></ul></ul></ul><ul><ul><ul><li>Hs, P, A, UL, OL (Block e inline). </li></ul></ul></ul><ul><ul><li>Otros: EM, ACRONYM, ABBR, Q, CITE </li></ul></ul><ul><ul><li>TABLE, TBODY, TR, TH, TD </li></ul></ul><ul><ul><li>FORM </li></ul></ul><ul><ul><ul><li>INPUT </li></ul></ul></ul><ul><li>Validación W3C </li></ul>
  6. 6. Tercera 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>
  7. 7. HTML | FORM y OTROS
  8. 8. HTML <ul><li>< IMG/> </li></ul><ul><li>Define un link a una imagen en el documento. </li></ul><ul><li>Tiene DOS atributos obligatorios: </li></ul><ul><ul><li>src : URL de la imagen (Abs o rel) </li></ul></ul><ul><ul><li>alt : Texto alternativo para la imagen. </li></ul></ul><ul><li>Puede tener además: title, align, width, height. </li></ul><ul><li><img src=”/images/launch.jpg” alt=”Launch”> </li></ul><ul><li><img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/> </li></ul>
  9. 9. HTML <ul><li>< IMG/> </li></ul><ul><li>Define un link a una imagen en el documento. </li></ul><ul><li>Tiene DOS atributos obligatorios: </li></ul><ul><ul><li>src : URL de la imagen (Abs o rel) </li></ul></ul><ul><ul><li>alt : Texto alternativo para la imagen. </li></ul></ul><ul><li>Puede tener además: title, align, width, height. </li></ul><ul><li>Ejemplos: <img src=”/images/launch.jpg” alt=”Launch”> </li></ul><ul><li><img src=”http://wikipedia.com/img/logo” alt=”Wikipedia”/> </li></ul>
  10. 10. HTML <ul><li><BR/> </li></ul><ul><ul><li>Line Break </li></ul></ul><ul><li><HR/> </li></ul><ul><ul><li>Horizontal Line </li></ul></ul><ul><li>Sólo usar en </li></ul><ul><li>caso de emergencias... </li></ul>
  11. 11. HTML | Forms <ul><li><FORM> </li></ul><ul><ul><ul><li>Recibe dos atributos: </li></ul></ul></ul><ul><ul><ul><ul><li>action : URL que recibe el form </li></ul></ul></ul></ul><ul><ul><ul><ul><li>method : GET o POST </li></ul></ul></ul></ul><ul><ul><ul><ul><li>enctype: multipart/form-data ó application/x-form-urlencoded </li></ul></ul></ul></ul><ul><ul><li><LABEL> </li></ul></ul><ul><ul><ul><li>for </li></ul></ul></ul><ul><ul><li><INPUT/> </li></ul></ul><ul><ul><ul><li>type </li></ul></ul></ul><ul><ul><ul><li>name </li></ul></ul></ul><ul><ul><ul><li>checked </li></ul></ul></ul><ul><ul><ul><li>value </li></ul></ul></ul>
  12. 12. HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li>text </li></ul></ul><ul><ul><ul><li>size </li></ul></ul></ul><ul><ul><ul><li>maxlength </li></ul></ul></ul><ul><ul><ul><li>disabled </li></ul></ul></ul><ul><ul><ul><li>readonly </li></ul></ul></ul><ul><ul><ul><li>id </li></ul></ul></ul><ul><ul><ul><li>name </li></ul></ul></ul><ul><ul><ul><li>>> Ver ejemplos </li></ul></ul></ul>
  13. 13. HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li>radio </li></ul></ul><ul><ul><ul><li>value </li></ul></ul></ul><ul><ul><ul><li>checked </li></ul></ul></ul><ul><ul><ul><li>readonly </li></ul></ul></ul><ul><ul><ul><li>disabled </li></ul></ul></ul><ul><ul><ul><li>id </li></ul></ul></ul><ul><ul><ul><li>name </li></ul></ul></ul><ul><ul><ul><li>>> Ver ejemplos </li></ul></ul></ul>
  14. 14. HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li>Checkbox </li></ul></ul><ul><ul><ul><li>value </li></ul></ul></ul><ul><ul><ul><li>checked </li></ul></ul></ul><ul><ul><ul><li>readonly </li></ul></ul></ul><ul><ul><ul><li>disabled </li></ul></ul></ul><ul><ul><ul><li>id </li></ul></ul></ul><ul><ul><ul><li>name </li></ul></ul></ul><ul><ul><ul><li>size </li></ul></ul></ul><ul><ul><ul><li>>> Ver ejemplos </li></ul></ul></ul>
  15. 15. HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li><SELECT> </li></ul></ul><ul><ul><ul><li><OPTION> </li></ul></ul></ul><ul><ul><ul><ul><li>value </li></ul></ul></ul></ul><ul><ul><ul><ul><li>selected </li></ul></ul></ul></ul><ul><ul><ul><li>>> Ver ejemplos </li></ul></ul></ul>
  16. 16. HTML | Forms <ul><li>Tipos de INPUT </li></ul><ul><ul><li><TEXTAREA> </li></ul></ul><ul><ul><ul><li>rows </li></ul></ul></ul><ul><ul><ul><li>cols </li></ul></ul></ul><ul><ul><ul><li>name </li></ul></ul></ul><ul><ul><ul><li>id </li></ul></ul></ul><ul><ul><ul><li>disabled </li></ul></ul></ul><ul><ul><ul><li>readonly </li></ul></ul></ul><ul><ul><ul><li>>> Ver ejemplos </li></ul></ul></ul>
  17. 17. CSS
  18. 18. CSS <ul><li>CSS </li></ul><ul><li>Cascade Style Sheet </li></ul><ul><li>Lenguaje que define el estilo de una página </li></ul><ul><li>Es interpretado por el browser. </li></ul><ul><li>Mejora la separación contenido <-> presentación y con ellos la accesibilidad </li></ul><ul><ul><li>Tiene una sintáxis simple </li></ul></ul><ul><li>Puede estar definido en el documento HTML, o referido como un recurso externo. </li></ul>
  19. 19. CSS | Básicos <ul><li>Ejemplo: </li></ul><ul><li>>> Ver ejemplo </li></ul><ul><li>Probar </li></ul><ul><li>color </li></ul><ul><li>background </li></ul><ul><li>margin </li></ul><ul><li>border </li></ul><ul><li>font-size </li></ul>
  20. 20. CSS | Básicos <ul><li>Sintáxis Básica </li></ul><ul><li><selector> { </li></ul><ul><li>propiedad1 : valor2; </li></ul><ul><ul><li>propiedad2 : valor2; </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><li>} </li></ul><ul><li>Los selectores pueden ser Ids, Clases or Elementos. Las propiedads son nombres en inglés. Los valores pueden identificarse en diferentes unidades. </li></ul>
  21. 21. <ul><li>Ejemplo de propiedades </li></ul><ul><ul><li>color </li></ul></ul><ul><ul><li>background </li></ul></ul><ul><ul><li>margin </li></ul></ul><ul><ul><li>border </li></ul></ul><ul><ul><li>font-size </li></ul></ul>CSS | Básicos
  22. 22. <ul><li>Unidades básicas </li></ul>CSS | Básicos
  23. 23. <ul><li>¿Cuál es la diferencia </li></ul><ul><li>entre un mm y un píxel? </li></ul><ul><li>¿Cómo se especifica un color? </li></ul>CSS | Básicos
  24. 24. <ul><li>Unidades </li></ul><ul><ul><li>Tamaños </li></ul></ul><ul><ul><ul><li>em : relativo al tamaño de texto actual: 1em </li></ul></ul></ul><ul><ul><ul><li>% : relativo al tamaño de texto o al tamaño de la ventata. </li></ul></ul></ul><ul><ul><ul><li>px : pixeles (unidad de resolución) </li></ul></ul></ul><ul><ul><ul><li>mm/cm ; pc/pt/in: (unidades de medidas físicas) </li></ul></ul></ul><ul><ul><li>URL </li></ul></ul><ul><ul><ul><li>url(http:/xxx/yyy) </li></ul></ul></ul><ul><ul><ul><li>url(/xxx/yyy) </li></ul></ul></ul><ul><ul><ul><ul><ul><ul><ul><ul><li>>>Ver ejemplo URL </li></ul></ul></ul></ul></ul></ul></ul></ul>CSS | Básicos
  25. 25. <ul><li>Unidades </li></ul><ul><ul><li>Colores </li></ul></ul><ul><ul><ul><li>nombre! (red, yellow...) </li></ul></ul></ul><ul><ul><ul><li>rgb(255,255,255) </li></ul></ul></ul><ul><ul><ul><li>rgb(100%,100%,100%) </li></ul></ul></ul><ul><ul><ul><li>#RRGGBB </li></ul></ul></ul><ul><ul><ul><li>#RGB </li></ul></ul></ul>CSS | Básicos Números hexadecimales entre 0 y F B R G
  26. 26. Algunos ejemplos p { color: red; background: green url(“/wall.png”); width: 70%; border: 2mm solid red; font-size: 1.2em; } CSS | Básicos Agrupamiento p, form, li { color: red; }
  27. 27. CSS | Cómo utilizarlos? <ul><li>Agregar CSS a HTML </li></ul><ul><ul><li>Inline </li></ul></ul><ul><ul><ul><li>Sólo útil para estilos únicos </li></ul></ul></ul><ul><ul><li>Embedded </li></ul></ul><ul><ul><ul><li>No es aconsejable, pero es rápido. </li></ul></ul></ul><ul><ul><li>Linked : El CSS se encuentra en un archivo externo. </li></ul></ul><ul><ul><ul><li>Mejor para mantener </li></ul></ul></ul><ul><ul><ul><li>Optimiza la velocidad de carga de la página. </li></ul></ul></ul>
  28. 28. <ul><li>Agregar CSS a HTML </li></ul><ul><ul><li>Inline </li></ul></ul><ul><ul><ul><li><p style=”color:red”>hola</p> </li></ul></ul></ul><ul><ul><li>Embedded </li></ul></ul><ul><ul><ul><li><head> <style type=”text/css”> rojo { color:red } </style> </head> </li></ul></ul></ul><ul><ul><ul><li><p class=”rojo”> </li></ul></ul></ul><ul><ul><li>Linked : El CSS se encuentra en un archivo externo. </li></ul></ul><ul><ul><ul><li><link ref=”stylesheet” type=”text/css” href=”xx.css”> </li></ul></ul></ul><ul><ul><ul><li><p class=”rojo”> </li></ul></ul></ul>CSS | Cómo utilizarlos?

×