Curso HTML CSS Sesion 2/4

1,945 views

Published on

Curso HTML CSS Sesion 2/4

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

No Downloads
Views
Total views
1,945
On SlideShare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
Downloads
0
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • Curso HTML CSS Sesion 2/4

    1. 1. Curso HTML / CSS Segunda 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. Primera 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><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. HTML | Sintaxis
    5. 5. HTML | Sintaxis <ul><li>Caracteres de control: </li></ul><ul><ul><li>Mayor y menor < > </li></ul></ul><ul><ul><li>Punto y coma ; </li></ul></ul><ul><ul><li>Ampersand & </li></ul></ul><ul><ul><li>Comillas “ </li></ul></ul><ul><li>Utiliza tags SGML <> </li></ul><ul><ul><li><div> <form> </div> <p> <div id=”123”> </li></ul></ul><ul><li>Comentarios </li></ul><ul><ul><li><!-- un comentario --> </li></ul></ul><ul><ul><li>Pueden expandirse varias líneass </li></ul></ul><ul><ul><li>No pueden anidarse </li></ul></ul>
    6. 6. HTML | Sintaxis <ul><li>Entidades </li></ul><ul><ul><li>Permiten representar caracteres especiales, mediante un código numérico o un nombre. </li></ul></ul><ul><ul><li>Hay un total de 252 entidades con nombre, por ejemplo: </li></ul></ul><ul><ul><li>&quot; &rarr; &copy; </li></ul></ul><ul><ul><li>&xE1; </li></ul></ul><ul><li>Ver ejemplo. Entidad errónea. Más entidades </li></ul>
    7. 7. HTML | Sintaxis <ul><li>Entidades </li></ul><ul><ul><li>Además, las entidades permiten representar los caracteres de control. </li></ul></ul><ul><ul><li><p> 4 < 3 [ERROR!] </li></ul></ul><ul><ul><li><p> 4 &lt; 3 [OK] </li></ul></ul><ul><ul><li><p> AT&T; IBM y HP [ERROR] </li></ul></ul><ul><ul><li><p> AT&amp;T IBM y HP [OK] </li></ul></ul>
    8. 8. HTML | Sintaxis <ul><li>Los espacios/tabs/retornos múltiples (HTML) son condensados! </li></ul><ul><ul><li><p> Hola Juan </li></ul></ul><ul><ul><li><p> Hola Juan </li></ul></ul><ul><li>Todos los elementos pueden tener los atributos: </li></ul><ul><ul><li>id : Identifica al elemento. DEBE ser único </li></ul></ul><ul><ul><li>class : Clasifica al elemento asignandole una o más clases. </li></ul></ul>
    9. 9. HTML | Sintaxis <ul><li>Ejemplos </li></ul><ul><ul><li><p id=”para1” class=”muyimportante azul”> </li></ul></ul><ul><ul><li><p class=”masd123”> </li></ul></ul><ul><ul><li><p id=”a123” id=”a434”> </li></ul></ul><ul><ul><ul><li><p class=”a123” class=”a434”> </li></ul></ul></ul><ul><ul><ul><li>Probar validación. </li></ul></ul></ul>
    10. 10. HTML | Estructura
    11. 11. HTML | Estructura <ul><li>!Doctype </li></ul><ul><li>html </li></ul><ul><ul><ul><ul><li>head </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><li>title </li></ul></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><li>meta </li></ul></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>body </li></ul></ul></ul></ul>
    12. 12. HTML | Estructura <ul><li>!Doctype Define el tipo de documento HTML o XHTML </li></ul><ul><li>html Raíz del todos los elementos. Puede tener el atributo “lang”. </li></ul><ul><ul><ul><ul><li>head Encabezado del documento </li></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><li>title Título del documento. No aparece en el documento. </li></ul></ul></ul></ul></ul></ul><ul><ul><ul><ul><ul><ul><li>meta Metainformación: autores, descripción, keywords, etc. </li></ul></ul></ul></ul></ul></ul><ul><ul><ul><ul><li>body Cuerpo del documento </li></ul></ul></ul></ul>
    13. 13. HTML | Header <ul><li>Head tiene usualmente los elementos: Title, Meta y Link </li></ul><ul><li>Title define el título del documento. NO puede tener elementos internos. SI entidades. </li></ul><ul><li>Meta se utiliza para definir metaformación, por ejemplo: </li></ul><ul><ul><li><meta name=”author” content=”Juan Rios”> </li></ul></ul><ul><ul><li>Los “names” posible son: </li></ul></ul><ul><ul><ul><li>authors, copyright, keywords, description, </li></ul></ul></ul><ul><ul><li>También puede utilizarse para definir headers HTTP </li></ul></ul><ul><ul><ul><li><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1”> </li></ul></ul></ul><ul><li>Links define referencias externas al documento. </li></ul>
    14. 14. HTML | Header Ver ejemplos en Firefox <head> <meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=ISO-8859-1&quot;> <title>The global structure of an HTML document</title> <link rel=&quot;previous&quot; href=&quot;../types.html&quot;> <link rel=&quot;next&quot; href=&quot;dirlang.html&quot;> <link rel=&quot;contents&quot; href=&quot;../cover.html#toc&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href= &quot;http://www.w3.org/StyleSheets/TR/W3C-REC&quot;> <link rel=&quot;STYLESHEET&quot; href=&quot;../style/default.css&quot; type=&quot;text/css&quot;> </head>
    15. 15. HTML | Body <ul><li>Body contiene el cuerpo del documento. </li></ul><ul><li>Los elementos en Body pueden clasificase en: </li></ul><ul><ul><li>Inline Estan embebidos en el texto. Sólo pueden contener elementos inline. </li></ul></ul><ul><ul><li>Block-level Comienzan y terminan con un salto de línea. Pueden contener elementos inline o block-level. </li></ul></ul>
    16. 16. HTML | Estructura <!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;> <html lang=&quot;es&quot;> <head> <title> Altas Cumbres </title> <meta name=&quot;description&quot; content=&quot;las mas altas cumbres&quot;> <meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=UTF-8&quot;> <meta name=&quot;keywords&quot; content=&quot;cumbres, altas, montañas &quot;> <meta name=&quot;content-language&quot; content=&quot;es_AR&quot;> <link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;/css/altos.css&quot; media=&quot;all&quot;> </head> <body> .... </body> </html>
    17. 17. HTML | Elementos
    18. 18. HTML | Elementos <ul><li>Vamos describir los elementos descriptivos! </li></ul><ul><li>( no procedurales) </li></ul><ul><li>El objetivo es armar HTMLs bien estructurados. </li></ul><ul><li>Luego nos preocuparemos por la presentación </li></ul>
    19. 19. HTML | Elementos <ul><li>Agrupamiento (div y span) </li></ul><ul><li>Títulos (h1... h6) </li></ul><ul><li>Parrafos (p) </li></ul><ul><li>Links (a) </li></ul><ul><li>Listas (ul ol li) </li></ul>
    20. 20. HTML | Elementos <ul><li>Agrupamiento </li></ul><ul><ul><li><div> : Block-level </li></ul></ul><ul><ul><li><span> : Inline </li></ul></ul><ul><li>Sirven para agrupar información relacionada. </li></ul><ul><li>A estos grupos es posible asignarles estilos. </li></ul><ul><li>Clases y ids. </li></ul><ul><li>Ver ejemplo de grupos </li></ul>
    21. 21. HTML | Elementos <ul><li>Headers </li></ul><ul><ul><li>H1,H2,...H6 </li></ul></ul><ul><ul><li>En orden de importancia. </li></ul></ul><ul><ul><li>Todas las páginas debería tener por lo menos un H1 y un H2. </li></ul></ul><ul><ul><li>inline: por lo que no es recomendable usar elementos “block-level” adentro. </li></ul></ul><ul><ul><li>Son usados por los robots de indexación. </li></ul></ul><ul><ul><li>Ver ejemplo. </li></ul></ul>
    22. 22. HTML | Elementos <ul><li>Párrafos </li></ul><ul><ul><li><p> Lorem ipsum </p> </li></ul></ul><ul><ul><li>El texto en general no debe estar “suelto”. </li></ul></ul><ul><ul><li></p> es opcional en HTML </li></ul></ul><ul><ul><li>Permite luego alinear, justificar, ocultar con mayor facilidad. </li></ul></ul><ul><ul><li>Inline </li></ul></ul>
    23. 23. HTML | Elementos <ul><li>Hipervínculos </li></ul><ul><ul><li><a href=”URL_DESTINO”> descripción </a> </li></ul></ul><ul><ul><li>inline </li></ul></ul><ul><ul><li>URL_DESTINO debe ser un URL relativo, absoluto o canónico. </li></ul></ul><ul><ul><ul><ul><li>“ ../index.html” [RELATIVO] </li></ul></ul></ul></ul><ul><ul><ul><ul><li>“ /paginas/seccion2.html” [ABSOLUTO] </li></ul></ul></ul></ul><ul><ul><ul><ul><li>“ http://otrositio.com/ ” [CANONICO] </li></ul></ul></ul></ul><ul><ul><ul><li>Mejor Absoluto y canónico </li></ul></ul></ul>
    24. 24. HTML | Elementos <ul><li>Hipervínculos </li></ul><ul><ul><li>La descripción y MUY imporante. Define keywords al destino. </li></ul></ul><ul><ul><li>NO usar “aqui” “este” como descripción: </li></ul></ul><ul><ul><ul><li>para ver más modelos, hacer click aqui [NO] </li></ul></ul></ul><ul><ul><ul><li>Ver más modelos [SI] </li></ul></ul></ul><ul><ul><li>Usar acciones! Cuando son acciones. </li></ul></ul><ul><ul><li>Sustantivos, cuando son referencias: </li></ul></ul><ul><ul><ul><li>En el avión hércules se encontraron 23 ... </li></ul></ul></ul>
    25. 25. HTML | Elementos <ul><li>Hipervínculos </li></ul><ul><ul><li>Deben ser identificables como hipervínculos rápidamente. (tratar de preservar color y subrayado estándar). </li></ul></ul><ul><ul><li>El atributo: target=”_blank” permite abrir en ventanas nuevas. </li></ul></ul><ul><ul><li>Tienen 4 estados: </li></ul></ul><ul><ul><ul><li>link </li></ul></ul></ul><ul><ul><ul><li>visited </li></ul></ul></ul><ul><ul><ul><li>hover </li></ul></ul></ul><ul><ul><ul><li>active </li></ul></ul></ul><ul><ul><li>Es posible asignarle estilos a cada estado por separado. </li></ul></ul>
    26. 26. HTML | Elementos <ul><li>Listas </li></ul><ul><ul><li>Permite enumerar un conjunto de items relacionados </li></ul></ul><ul><ul><li>Es recomendable usarles siempre que sea posible. </li></ul></ul><ul><ul><li>Por defecto, se muestran como bullets, pero pueden ser muy diferentes. </li></ul></ul><ul><ul><li>Pueden anidarse. </li></ul></ul>
    27. 27. HTML | Elementos <ul><li>Listas Ordenadas <ol> </li></ul><ul><li>Listas sin orden <ul> </li></ul><ul><li>Item <li> </li></ul><ul><ul><li>Elemplo: </li></ul></ul><ul><ul><li><ul id=”tipos_de_elementos”> </li></ul></ul><ul><ul><ul><ul><li><li> Nobles </li> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><li> Metálicos </li> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><li> No metálicos </li> </li></ul></ul></ul></ul><ul><ul><ul><ul><li><li> Tierras raras </li> </li></ul></ul></ul></ul><ul><ul><ul><ul><li></ul> </li></ul></ul></ul></ul>
    28. 28. HTML | Elementos <ul><li>Ejercicios </li></ul><ul><ul><li>HTML que describa un cuestionario </li></ul></ul><ul><ul><li>HTML que describa un producto </li></ul></ul>
    29. 29. HTML | Elementos más!
    30. 30. HTML | + Elementos <ul><li>Emphasis <em> </li></ul><ul><ul><li>Marca una porción de texto como especial </li></ul></ul><ul><ul><li>=> Ud. esta en <em> miCurso</em>. </li></ul></ul><ul><ul><li>Es descriptivo, no procedural! </li></ul></ul><ul><ul><li>Es el mejor ejemplo para reemplazar <i> (en muchos browsers tiene el mismo efecto) </li></ul></ul>
    31. 31. HTML | + Elementos <ul><li>Acronyms <acronym> </li></ul><ul><ul><li>Define el comienzo una sigla. </li></ul></ul><ul><ul><li><acronym title=”Central General de Trabajadores”>CGT</acronym> </li></ul></ul><ul><ul><li><acronym title=”HyperText MetaLanguage”>HTML</acronym> </li></ul></ul><ul><ul><li>En algunos browsers el title se muestra como popup. </li></ul></ul>
    32. 32. HTML | + Elementos <ul><li>Abbreviations <abbr> </li></ul><ul><ul><li>Define abreviaciones. </li></ul></ul><ul><ul><li><abbr title=”Binary digiT”>Bit</abbr> </li></ul></ul><ul><ul><li>También se muestra en el title </li></ul></ul>
    33. 33. HTML | + Elementos <ul><li>Quotations <q> </li></ul><ul><ul><li>Define citas literales! </li></ul></ul><ul><ul><li>El me dijo <q> Lo que es moda no incomoda </q> </li></ul></ul><ul><ul><li>Generalmente de muestran como comillas PERO es descriptivo. </li></ul></ul>
    34. 34. HTML | + Elementos <ul><li>Citas <cite> </li></ul><ul><ul><li>Define citas! </li></ul></ul><ul><ul><li><p> Y <cite> Juan</cite> dijo <q> No voy a ir!!</q> </li></ul></ul><ul><ul><li>Se muestra en itálicas. </li></ul></ul>
    35. 35. HTML | Elementos Tablas
    36. 36. HTML | Tablas <ul><li>Tablas <table> </li></ul><ul><ul><li>Sólo para contenidos que sean tablas!! </li></ul></ul><ul><ul><ul><li>Captions <caption> </li></ul></ul></ul><ul><ul><ul><li>headers <thead> </li></ul></ul></ul><ul><ul><ul><li>footers <tfoot> </li></ul></ul></ul><ul><ul><ul><li>body <tbody> </li></ul></ul></ul><ul><ul><ul><li>Table Cell <td> </li></ul></ul></ul><ul><ul><ul><li>Table header <th> </li></ul></ul></ul><ul><ul><ul><li>Table row <tr> </li></ul></ul></ul>
    37. 37. HTML | Tablas <ul><li>Ejemplo </li></ul>< table border=&quot;1&quot;> <thead> <tr><th>Artist</th><th>Title</th></tr> </thead> <tfoot> <tr><th colspan=&quot;2&quot;>This is my CD collection</th></tr> </tfoot> <tbody> <tr> <td><span datafld=&quot;artist&quot;></span></td> <td><span datafld=&quot;title&quot;></span></td> </tr> </tbody> </table>
    38. 38. HTML | Tablas <ul><li>Spanning </li></ul><ul><ul><li>No siempre la vida de cuadrada! </li></ul></ul><ul><ul><li>http://www.w3schools.com/html/tryit.asp?filename=tryhtml_table_span </li></ul></ul><ul><ul><li>colspan=”2” </li></ul></ul><ul><ul><li>rowspan=”2” </li></ul></ul>
    39. 39. HTML | Elementos FORMS!
    40. 40. HTML | Forms! <ul><li>FORMS </li></ul><ul><ul><li>Los forms permiten interactuar con el usuario mediante un conjunto predefinido de componentes de entrada. </li></ul></ul><ul><ul><li><form action=”URL” method=”GET”> Nombre: <input type=”text” name=”nombre”><BR> Apellido: <input type=”text” name=”apellido”><BR> </form> </li></ul></ul>
    41. 41. HTML | Forms! <ul><li>FORMS </li></ul><ul><ul><li>Tipos de entrada: </li></ul></ul><ul><ul><ul><li>BUTTON </li></ul></ul></ul><ul><ul><ul><li>CHECKBOX </li></ul></ul></ul><ul><ul><ul><li>RADIO </li></ul></ul></ul><ul><ul><ul><li>SELECT </li></ul></ul></ul><ul><ul><ul><li>FILE </li></ul></ul></ul><ul><ul><ul><li>HIDDEN </li></ul></ul></ul>
    42. 42. HTML | Elementos FORMS!
    43. 43. HTML | Validación <ul><ul><li>Demo W3C </li></ul></ul>

    ×