Download - H T M L Tema 2 Formatos, Listas Y Tablas
HTML
Tema 2: Formatos, listas y tablas
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Diapositiva resumen
1. Espacios, tabuladores, …2. Texto preformateado - <pre>3. Elementos en línea o en bloque4. Atributos title y align 5. Bloques de texto - <div> y
<span>6. Párrafos y saltos de línea – <p>
y <br>7. Elementos para títulos o
cabeceras8. Texto estructurado – Elementos
de frase – <em>, <strong>, …
9. Citas - <BLOCKQUOTE> y <Q>
10. Subíndices y superíndices - <sub> y <sup>
11. Elementos <Font> y <BaseFont>
12. Colores en HTML13. Elementos de estilo de fuente -
<tt>, <i>, <b>, …14. Elemento separador - <hr>15. Listas16. Tablas
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Espacios, tabuladores, …
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:
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.
Ejercicio 2.1
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto preformateado - <pre>
<pre> Texto preformateado, implica que se respetan los espacios, tabuladores, etc </pre>
Ejercicio 2.2
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Atributos title y align
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.
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>)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos en línea o en bloque
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)
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).
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Bloques de texto - <div> y <span>
Se utilizan para añadir estructura a los documentos Contenedores genéricos
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>
Se utilizan mucho junto con CSS (hojas de estilo)
<center>Texto centrado</center> equivale a <div align=“center”>Texto centrado</div>
Ejercicio 2.3
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Párrafos y saltos de línea – <p> y <br>
<p> párrafo </p> no puede contener otros elementos de tipo bloque (por ejemplo anidar con otro <p>), sí de línea
<br> salto de línea (no tiene etiqueta de cierre)
Ejercicio 2.4
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos para títulos o cabeceras
Elementos de tipo título para diferenciar partes del contenido.
Muchos lo utilizan simplemente para aumentar el tamaño del texto, pero es incorrecto.
Inicio Ejercicio 2.5
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto estructurado – Elementos de frase (I) – <em>, <strong>, …
Normalmente <em> se representa como cursiva y <strong> como negrita.
Los sintetizadores de voz pueden cambiar los parámetros de síntesis, como el volumen, el tono y la velocidad
Indican el significado del texto que encierran, no cómo se tiene que representar
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto estructurado – Elementos de frase (II)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Texto estructurado – Elementos de frase (y III)
Valor del atributo título al pasar el ratón
Continúa Ejercicio 2.5
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Citas - <BLOCKQUOTE> y <Q>
<blockquote> cita larga, contenido en bloque. Muchos lo utilizan para dar márgenes al texto, aunque está desaprobado. </blockquote>
<q> cita corta, contenido en línea que no produce cambio de párrafo. </q>
Continúa Ejercicio 2.5
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Subíndices, superíndices y direcciones - <sub>, <sup> y <address>
<sub> subíndice </sub> <sup> superíndice </sup>
<address> dirección-información de contacto</address>
Fin Ejercicio 2.5
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos <Font> y <BaseFont>
<font> y <basefont> se utilizan para dar formato al texto (ambos están desaprobados)
<basefont> establece las propiedades de fuente por defecto para el documento. Normalmente se pone después de la etiqueta <body>.
Atributo Descripción Valores
size Tamaño 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)
color Color Ver diapositiva de color
face Fuente Lista de nombres de fuentes separados por comas. El navegador mostrará la primera que conozca
Inicio Ejercicio 2.6
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elementos de estilo de fuente - <tt>, <i>, <b>, …
Elemento Descripción Ejemplo
<tt> Como de máquina de escribir (ancho fijo)
<i> Texto en itálica (cursiva)
<b> Texto en negrita
<big> Tamaño de texto mayor
<small> Tamaño de texto menor
<u> Texto subrayado
<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
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Elemento separador - <hr>
<hr> muestra una línea horizontal No tiene etiqueta de cierre
Atributo Descripción Valores
align Alineación center (valor por defecto), left (izquierda) o right (derecha)
noshade Sin sombra No tiene valor
size Tamaño (alto) Alto de la barra en píxeles.
width Tamaño (ancho)
Ancho de la barra en píxeles o en tanto por ciento
Fin Ejercicio 2.6
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Listas (I)
OrdenadasDesordenadas
De definición
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Listas (y II) - atributos para las listas ordenadas <ol> y desordenadas <ul>
La etiqueta final de <li> puede omitirse Pueden estar anidadas
Atributo Descripción Valores
type Tipo del objeto <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)
start Valor inicial Es el número de comienzo de la lista, por defecto es 1. Sólo se aplica a <ol>
value Valor Es el número del elemento. Solo se aplica a <li>
compact Modo compacto
No tiene valor
Ejercicio 2.7
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas - Introducción
Es una estructura compleja que necesita la unión de varios elementos, todos contenidos dentro de <table>
Se suelen utilizar para organizar la presentación de los contenidos pero es mejor utilizar hojas de estilo.
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
También hay otros elementos útiles en la construcción de tablas:– <caption> título de la tabla, aparece después de la etiqueta <table> y
sólo una vez– <thead>, <tfoot> y <tbody> para dividir la tabla en secciones (cabecera,
pie y cuerpo)– <colgroup> y <col> para definir la estructura de la tabla y ayudar a su
representación por parte de los navegadores.
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.
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <table> (I)
Vista en Internet ExplorerVista en Mozilla Firefox
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
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <table> (II)
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <table> (y III)
Vista en Internet Explorer
Vista en Internet Explorer
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de <caption>
Vista en Mozilla Firefox
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
Tablas – Atributos de filas <tr>
Vista en Mozilla Firefox
Estos atributos afectan a todas las celdas de la fila
Curso 2006 - 2007 Antonio Berrocal PirisI.A.I.G.
HTML – Tema 2: Formatos, listas y tablas
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
Fin Tema 2 – Formatos, listas y tablas
Volver al índice