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



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



Texto preformateado - <pre>

<pre> Texto preformateado, implica que se respetan los espacios, tabuladores, etc </pre>

Ejercicio 2.2



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>)



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).



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



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



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



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



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>

<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>




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



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



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)




Elemento separador - <hr>

<hr> muestra una línea horizontal No tiene etiqueta de cierre


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



Listas (I)

OrdenadasDesordenadas

De definición



Listas (y II) - atributos para las listas ordenadas <ol> y desordenadas <ul>

La etiqueta final de <li> puede omitirse Pueden estar anidadas


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



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.



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



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>


Estos atributos afectan a todas las celdas de la fila



Tablas – Atributos de celdas <th> y <td>


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

h t m l tema 2 formatos, listas y tablas

Technology