HTML Tema 2: Formatos, listas y tablas
Diapositiva resumen <ul><li>Espacios, tabuladores, … </li></ul><ul><li>Texto preformateado - <pre> </li></ul><ul><li>Eleme...
Espacios, tabuladores, … <ul><li>Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la pági...
Texto preformateado - <pre> <ul><li><pre>  Texto preformateado, implica que se respetan los espacios, tabuladores, etc  </...
Atributos title y align <ul><li>title = “texto”     título del elemento. En algunos elementos, como acronym o abbr, al pa...
Elementos en línea o en bloque <ul><li>Elementos en bloque    suelen provocar un salto de línea antes y otro después. Pue...
Bloques de texto  - <div> y <span> <ul><li>Se utilizan para añadir estructura a los documentos    Contenedores genéricos ...
Párrafos y saltos de línea – <p> y <br> <ul><li><p>  párrafo  </p>     no puede contener otros elementos de tipo bloque (...
Elementos para títulos o cabeceras <ul><li>Elementos de tipo título para diferenciar partes del contenido.  </li></ul><ul>...
Texto estructurado – Elementos de frase (I) – <em>, <strong>, … <ul><li>Normalmente <em> se representa como cursiva y <str...
Texto estructurado – Elementos de frase (II)
Texto estructurado – Elementos de frase (y III) Valor del atributo título al pasar el ratón    Continúa  Ejercicio 2.5
Citas - <BLOCKQUOTE> y <Q> <ul><li><blockquote>  cita larga, contenido en bloque. Muchos lo utilizan para dar márgenes al ...
Subíndices, superíndices y direcciones - <sub>, <sup> y <address> <ul><li><sub>  subíndice  </sub> </li></ul><ul><li><sup>...
Elementos <Font> y <BaseFont> <ul><li><font> y <basefont>    se utilizan para dar formato al texto (ambos están  desaprob...
Elementos de estilo de fuente - <tt>, <i>, <b>, … <strong>, <em>, … indican cómo  interpretar  el texto (más importante, m...
Elemento separador - <hr> <ul><li><hr>    muestra una línea horizontal </li></ul><ul><li>No tiene etiqueta de cierre </li...
Listas (I) Ordenadas Desordenadas De definición
Listas (y II) - atributos para las listas ordenadas <ol> y desordenadas <ul> <ul><li>La etiqueta final de <li> puede omiti...
Tablas - Introducción <ul><li>Es una estructura compleja que necesita la unión de varios elementos, todos contenidos dentr...
Tablas – Atributos de <table> (I) Width, cellpadding y cellspacing  pueden ser: pixeles (p.e. 3) o porcentaje del espacio ...
Tablas – Atributos de <table> (II)
Tablas – Atributos de <table> (y III) Vista en Internet Explorer Vista en Internet Explorer
Tablas – Atributos de <caption> Vista en Mozilla Firefox
Tablas – Atributos de filas <tr> Vista en Mozilla Firefox Estos atributos afectan a todas las celdas de la fila
Tablas – Atributos de celdas <th> y <td> Vista en Mozilla Firefox Width y height  pueden ser: pixeles (p.e. 30) o porcenta...
Fin Tema 2 – Formatos, listas y tablas Volver al índice
Upcoming SlideShare
Loading in …5
×

H T M L Tema 2 Formatos, Listas Y Tablas

4,807 views

Published on

Tema 2 HTML - pruebas con slide share

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,807
On SlideShare
0
From Embeds
0
Number of Embeds
80
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • A partir de esta diapositiva empezamos con Dreamweaver  que lo instalen y trabajar en modo código.
  • H T M L Tema 2 Formatos, Listas Y Tablas

    1. 1. HTML Tema 2: Formatos, listas y tablas
    2. 2. Diapositiva resumen <ul><li>Espacios, tabuladores, … </li></ul><ul><li>Texto preformateado - <pre> </li></ul><ul><li>Elementos en línea o en bloque </li></ul><ul><li>Atributos title y align </li></ul><ul><li>Bloques de texto - <div> y <span> </li></ul><ul><li>Párrafos y saltos de línea – <p> y <br> </li></ul><ul><li>Elementos para títulos o cabeceras </li></ul><ul><li>Texto estructurado – Elementos de frase – <em>, <strong>, … </li></ul><ul><li>Citas - <BLOCKQUOTE> y <Q> </li></ul><ul><li>Subíndices y superíndices - <sub> y <sup> </li></ul><ul><li>Elementos <Font> y <BaseFont> </li></ul><ul><li>Colores en HTML </li></ul><ul><li>Elementos de estilo de fuente - <tt>, <i>, <b>, … </li></ul><ul><li>Elemento separador - <hr> </li></ul><ul><li>Listas </li></ul><ul><li>Tablas </li></ul>
    3. 3. Espacios, tabuladores, … <ul><li>Cuando un navegador lee el código HTML de una página y lo interpreta para mostrar la página, todos los espaciados múltiples, tabulados o saltos de línea que se haya incluido en los textos serán interpretados como un único espacio (a excepción de la etiqueta <pre>). Lo vemos en un ejemplo: </li></ul><ul><li>Ejemplo 2.1 : Crea una página Web en la que introduzcas cualquier texto, utiliza saltos de línea, espaciado múltiple y tabulaciones. Comprueba si el navegador respeta el formato que has utilizado. </li></ul> Ejercicio 2.1
    4. 4. Texto preformateado - <pre> <ul><li><pre> Texto preformateado, implica que se respetan los espacios, tabuladores, etc </pre> </li></ul> Ejercicio 2.2
    5. 5. Atributos title y align <ul><li>title = “texto”  título del elemento. En algunos elementos, como acronym o abbr, al pasar el ratón sobre ellos se muestra el texto de este atributo. </li></ul><ul><li>align = left, center, right o justify (izquierda, centrado, derecha o justificado)  especifica la alineación horizontal, para elementos tipo bloque como los párrafos (<p>) </li></ul>
    6. 6. Elementos en línea o en bloque <ul><li>Elementos en bloque  suelen provocar un salto de línea antes y otro después. Pueden contener otros elementos en línea y algunos también otros elementos en bloque. Por ejemplo: <p> (párrafo), <ol> (lista ordenada) o <li> (lista) </li></ul><ul><li>Elemento en línea  no pueden contener elementos en bloque. No suelen provocar un salto de línea. Por ejemplo: <em> (énfasis) o <abbr> (abreviatura). </li></ul>
    7. 7. Bloques de texto - <div> y <span> <ul><li>Se utilizan para añadir estructura a los documentos  Contenedores genéricos </li></ul><ul><li>Si el contenido es en línea, por ejemplo, una frase de un párrafo, utilizamos <span> y si es en bloque, como los párrafos, utilizamos <div> </li></ul><ul><li>Se utilizan mucho junto con CSS (hojas de estilo) </li></ul><center> Texto centrado</center> equivale a <div align=“center”> Texto centrado</div>  Ejercicio 2.3
    8. 8. Párrafos y saltos de línea – <p> y <br> <ul><li><p> párrafo </p>  no puede contener otros elementos de tipo bloque (por ejemplo anidar con otro <p>), sí de línea </li></ul><ul><li><br> salto de línea (no tiene etiqueta de cierre) </li></ul> Ejercicio 2.4
    9. 9. Elementos para títulos o cabeceras <ul><li>Elementos de tipo título para diferenciar partes del contenido. </li></ul><ul><li>Muchos lo utilizan simplemente para aumentar el tamaño del texto, pero es incorrecto. </li></ul> Inicio Ejercicio 2.5
    10. 10. Texto estructurado – Elementos de frase (I) – <em>, <strong>, … <ul><li>Normalmente <em> se representa como cursiva y <strong> como negrita. </li></ul><ul><li>Los sintetizadores de voz pueden cambiar los parámetros de síntesis, como el volumen, el tono y la velocidad </li></ul><ul><li>Indican el significado del texto que encierran, no cómo se tiene que representar </li></ul>
    11. 11. Texto estructurado – Elementos de frase (II)
    12. 12. Texto estructurado – Elementos de frase (y III) Valor del atributo título al pasar el ratón  Continúa Ejercicio 2.5
    13. 13. Citas - <BLOCKQUOTE> y <Q> <ul><li><blockquote> cita larga, contenido en bloque. Muchos lo utilizan para dar márgenes al texto, aunque está desaprobado. </blockquote> </li></ul><ul><li><q> cita corta, contenido en línea que no produce cambio de párrafo. </q> </li></ul> Continúa Ejercicio 2.5
    14. 14. Subíndices, superíndices y direcciones - <sub>, <sup> y <address> <ul><li><sub> subíndice </sub> </li></ul><ul><li><sup> superíndice </sup> </li></ul><ul><li><address> dirección-información de contacto </address> </li></ul> Fin Ejercicio 2.5
    15. 15. Elementos <Font> y <BaseFont> <ul><li><font> y <basefont>  se utilizan para dar formato al texto (ambos están desaprobados ) </li></ul><ul><li><basefont>  establece las propiedades de fuente por defecto para el documento. Normalmente se pone después de la etiqueta <body>. </li></ul> Inicio Ejercicio 2.6 Valor entero entre 1 y 7, por defecto es el 3. Si ponemos + o – delante es incremento con respecto a la base (establecida con basefont) Tamaño size Lista de nombres de fuentes separados por comas. El navegador mostrará la primera que conozca Fuente face Ver diapositiva de color Color color Valores Descripción Atributo
    16. 16. Elementos de estilo de fuente - <tt>, <i>, <b>, … <strong>, <em>, … indican cómo interpretar el texto (más importante, menos, etc), mientras que <b>, <i>, .. Indican cómo representarlo  en la práctica la mayoría de los navegadores representan <strong> igual que <b> (negrita) y <em> igual que <i> (cursiva)  Continúa Ejercicio 2.6 Texto subrayado <u> Tamaño de texto menor <small> Tamaño de texto mayor <big> Como de máquina de escribir (ancho fijo) <tt> Texto en negrita <b> Texto en itálica (cursiva) <i> Ejemplo Descripción Elemento
    17. 17. Elemento separador - <hr> <ul><li><hr>  muestra una línea horizontal </li></ul><ul><li>No tiene etiqueta de cierre </li></ul> Fin Ejercicio 2.6 Ancho de la barra en píxeles o en tanto por ciento Tamaño (ancho) width center (valor por defecto), left (izquierda) o right (derecha) Alineación align Alto de la barra en píxeles. Tamaño (alto) size No tiene valor Sin sombra noshade Valores Descripción Atributo
    18. 18. Listas (I) Ordenadas Desordenadas De definición
    19. 19. Listas (y II) - atributos para las listas ordenadas <ol> y desordenadas <ul> <ul><li>La etiqueta final de <li> puede omitirse </li></ul><ul><li>Pueden estar anidadas </li></ul> Ejercicio 2.7 No tiene valor Modo compacto compact <OL>  1 (1, 2, 3,…), a (a, b, c, …), A (A, B, C, …), i (i, ii, iii,….), I (I, II, III,…) <UL>  disc (disco), square (cuadrado), circle (círculo) Tipo del objeto type Es el número del elemento. Solo se aplica a <li> Valor value Es el número de comienzo de la lista, por defecto es 1. Sólo se aplica a <ol> Valor inicial start Valores Descripción Atributo
    20. 20. Tablas - Introducción <ul><li>Es una estructura compleja que necesita la unión de varios elementos, todos contenidos dentro de <table > </li></ul><ul><li>Se suelen utilizar para organizar la presentación de los contenidos  pero es mejor utilizar hojas de estilo . </li></ul><ul><li>Cada fila se identifica por el elemento <tr> y cada celda por <th> (celda tipo encabezado) o <td> . Las celdas pueden contener cualquier elemento HTML: texto, imágenes, enlaces e incluso otras tablas anidadas </li></ul><ul><li>También hay otros elementos útiles en la construcción de tablas: </li></ul><ul><ul><li><caption>  título de la tabla, aparece después de la etiqueta <table> y sólo una vez </li></ul></ul><ul><ul><li><thead>, <tfoot> y <tbody>  para dividir la tabla en secciones (cabecera, pie y cuerpo) </li></ul></ul><ul><ul><li><colgroup> y <col>  para definir la estructura de la tabla y ayudar a su representación por parte de los navegadores. </li></ul></ul>El tamaño especificado a la tabla es respetado por los navegadores siempre que quepa el contenido, si no, se redimensiona de forma automática.
    21. 21. Tablas – Atributos de <table> (I) Width, cellpadding y cellspacing pueden ser: pixeles (p.e. 3) o porcentaje del espacio libre (p.e. 40%) Align  alineación de la tabla no de su contenido Vista en Internet Explorer Vista en Mozilla Firefox
    22. 22. Tablas – Atributos de <table> (II)
    23. 23. Tablas – Atributos de <table> (y III) Vista en Internet Explorer Vista en Internet Explorer
    24. 24. Tablas – Atributos de <caption> Vista en Mozilla Firefox
    25. 25. Tablas – Atributos de filas <tr> Vista en Mozilla Firefox Estos atributos afectan a todas las celdas de la fila
    26. 26. Tablas – Atributos de celdas <th> y <td> Vista en Mozilla Firefox Width y height pueden ser: pixeles (p.e. 30) o porcentaje del espacio libre (p.e. 40%) Nowrap  deshabilita el ajuste automático de línea, es decir, no divide una línea en varias Colspan, rowspan  combinación de celdas  Ejercicios 2.8 - 2.11
    27. 27. Fin Tema 2 – Formatos, listas y tablas Volver al índice

    ×