Tablas en HTML

Las tablas son sin duda uno de los elementos más potentes del HTML. En el interior de las celdas de una tabla, que pueden ser con borde visible o invisible, se puede poner cualquier cosa: texto de cualquier tamaño y color, imágenes, links... Por supuesto, además de permitir cualquier contenido, tienen sus propios atributos de alineación tanto horizontal como vertical, y atributos de dimensionado. Si no definimos su tamaño, lo adaptan al contenido, pero también es posible definirlo de forma fija. El elemento básico de definición de tabla es <TABLE> </TABLE> y en su interior se disponen los sub elementos <TR> para definir una fila (Row), <TD> para definir una celda de datos (Data). Estos sub elementos también han de llevar sus correspondientes cierres: </TR> y </TD>.

Aunque no es muy habitual su uso también es posible definir una fila de cabecera. Una cabecera <TH> es los mismo que una celda de datos <TD> pero de forma automática el texto de su contenido recibe los atributos de negrita y centrado. Sólo es posible definirlas al principio de las filas, de las columnas o de ambas a la vez.

He aquí una tabla-resumen de los elementos utilizados y los atributos que admite cada uno:

	TABLE	TR	TD	TH	CAPTION
BORDER	X	-	-	-	-
ROWSPAN	-	-	X	X	-
COLSPAN	-	-	X	X	-
ALIGN	-	X	X	X	X
VALIGN	-	-	X	-	-
WIDTH	X	-	X	-	-
HEIGTH	X	-	X	-	-
CELLPADDING	X	-	-	-	-
CELLSPACING	X	-	-	-	-

Veamos el significado de cada atributo:

BORDER: Indica el ancho de los bordes de la tabla. Se mide en píxels. CELLSPACING: Indica el número de píxels que separan una celda de otra. CELLPADDING: Indica los píxels de separación entre el borde de la celda y su contenido. WIDTH: Según donde se escriba, sirve para controlar el ancho de toda la tabla o de sus columnas. Si se incluye en <TABLE> puede indicar el tamaño tanto en píxels como en porcentaje respecto al ancho de la pantalla. ALIGN: Indica la alineación horizontal de los datos dentro de las celdas. Puede tener tres valores: LEFT (izquierda), RIGHT (derecha) y CENTER (centro). VALIGN: Indica la alineación vertical de los datos dentro de las celdas. Puede tener tres valores: TOP (arriba), BOTTOM (abajo) y MIDDLE (centro). ROWSPAN: Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de filas. COLSPAN: Se utiliza en la definición de una celda (<TD>) o cabecera (<TH>) para indicar que su anchura o altura son equivalentes a un determinado número de columnas.

Existen otros elementos interesantes para personalizar el aspecto de las tablas que utilizaremos después con Dreamweaver y cuando estudiemos las hojas de estilo (.css)

Ejercicio: Crea una tabla idéntica a la que aparece más arriba resumiendo los atributos de la etiqueta TABLE.

Ejercicio: Crea una tabla con dos columnas y 4 filas. En la columna izquierda pon los nombres de cuatro ciudades y en la derecha fotografías de esas ciudades.

Aquí tienes un repaso exhaustivo de las tablas en HTML merece mucho la pena leerse y, más aún, entender todo lo que dice.

Formato de texto (II): Listas

En HTML existen varias etiquetas para definir listas. En todas ellas tendremos una etiqueta para definir la lista y en su interior otra etiqueta para los item de la lista. Veamos un ejemplo:

<UL> <LI>Item 1</LI> <LI>Item 2</LI> </UL>

Cuyo resultado sería:

• Item 1
• Item 2

En ese ejemplo hemos utilizado las listas desordenadas o no numeradas. Si queremos que nos aparezcan números en vez de viñetas, sólo tenemos que cambiar <UL> y </UL> por <OL> y </OL>.

En las listas no ordenadas podemos elegir entre varios tipos de viñeta. Con <OL type="Square">, por ejemplo, serán cuadradas. También tenemos los tipos "circle" y "disc".

Viñetas cuadradas	Viñetas circulares	Viñetas "disco"
Primera linea Segunda linea	Primera linea Segunda linea	Primera linea Segunda linea

En las listas ordenadas también podemos utilizar varios tipos: type=1 (el habitual, con números), type="A" (cada línea con letras A, B,...), type="I" (con números romanos),... Estos dos últimos diferencian entre mayúsculas y minúsculas. Ejemplo: Esto es una lista ordenada con numeración romana en mayúsculas:

1. Primera linea
2. Segunda linea
3. Tercera linea
4. Cuarta linea

Se escribe: <OL TYPE=I> <LI>Primera linea <LI>Segunda linea <LI>Tercera linea <LI>Cuarta linea </OL>

Además de las listas ordenadas y no ordenadas, existen otros tipos de lista menos utilizados como <Menu> <dir> y las listas de definición. Prácticamente no se utilizan. Quien se anime puede comprobar su funcionamiento en la página sobre HTML que recomendaba en el post anterior.

Ejercicio: Crea listas con los nombres de los alumnos del curso con los siguientes tipos: no ordenada con cuadrados, ordenada con letras y ordenada con números romanos en minúscula. Sube al servidor FTP la página y pon el enlace en los comentarios con tu nombre.

Formato de texto (I)

Hay diversas etiquetas para aplicar efectos al texto para destacarlo:

• <B>Texto en negrita</B>
• <STRONG>Texto realzado</STRONG>
• <I>Texto en cursiva o itálica</I>
• <EM>Texto con énfasis</EM>
• <TT>Texto teletipo, con caracteres de paso fijo. Similar a las máquinas de escribir</TT>
• <U>Texto subrayado</U>
• <STRIKE>Texto tachado</STRIKE>
• <BLINK>Texto intermitente (Sólo funciona en Netscape y Mozilla Firefox)</BLINK>
• <SUP>Texto Superíndice</SUP>
• <SUB>Texto Subíndice</SUB>
• <BIG>Texto grande</BIG>
• <SMALL>Texto pequeño</SMALL>

Podemos cambiar la fuente, el color y el tamaño de los caracteres de nuestros documentos con <FONT >. Esta etiqueta admite los siguientes atributos:

• Face: nos permite definir el tipo de letra que vamos a utilizar. Por ejemplo si quiero que aparezca con tipo de letra Arial, pondríamos: <FONT face="Arial"> Texto de prueba</FONT >.
• Color: Podemos indicar el color con sus valores en hexadecimal (#ff0000) o con el nombre del color (red). Ejemplo para poner un texto en rojo: <FONT color="red">. Texto </FONT >. Los nombres de colores disponibles son: red, green, blue, yellow, olive, black, white, navy, lime, magenta, cyan, brown, teal, gray,purple. Aquí puedes conseguir el código hexadecimal de los colores.
• Size: El tamaño con este atributo puede tomar valores de 1 (más pequeño) a 6 (más grande). Ejemplo: <FONT face="Arial" size=4> Texto de prueba</FONT >

Ejercicio:Crea una página en la que aparezcan 10 citas célebres utilizando distintos colores y distintos tipos de letra. Junto a cada cita, indica su autor utilizando alguno de los efectos comentados más arriba (negrita, subrayado, etc.).

Dirección recomendada: http://sestud.uv.es/manual.esp/indice.htm

Otra dirección: http://www.htmlpoint.com

Marcas de párrafo y bloque

Las marcas de párrafo y bloque son las que nos permiten formatear el texto para hacerlo más legible. Veamos las marcas más habituales para manejar párrafos, líneas y bloques:

<p> </p> Esta etiqueta se utiliza para indicar que el texto que se incluye es un párrafo de texto normal. El finalizador es opcional; en caso de no existir finalizador, los exploradores asumen que el párrafo acaba, en el momento en que encuentran el inicio del párrafo siguiente. Cuando se acaba un bloque del tipo párrafo, se inserta automáticamente un salto de línea (es como un punto y aparte). Dentro de la marca <p>, podemos indicar la alineación que vamos a asignar al párrafo con la propiedad align:

<BR> Una de las primeras cosas que comprobamos al hacer una página, es que el navegador no respeta los saltos de línea que hemos incluído en el texto original en forma de "INTRO"; sino que hace un salto de línea automático, cuando nuestro texto llega al límite derecho de la ventana. Pues bien, la etiqueta <BR> tiene como misión, forzar al navegador a hacer un salto de línea en el punto donde incluyamos dicha etiqueta. Esta etiqueta no necesita finalizador, no hay que poner </BR>.

<DIV> podemos delimitar bloques y capas dentro de las páginas. Soporta el atributo align de forma similar a <P>: ALIGN=LEFT ALIGN=RIGHT y ALIGN=CENTER. De momento, no le hacemos mucho caso, lo estudiaremos en detalle cuando estudiemos las hojas de estilo (CSS). Ejemplo de utilización de DIV: <DIV ALIGN=Center> Texto de prueba </DIV> Fíjate en que aquí sí se utiliza el cierre </DIV>.

<SPAN> es casi igual que <DIV> pero no admite atributos de alineado, y no produce separación de párrafo ni de línea es <SPAN>. En realidad, de forma directa no sirve para nada, y ha sido creado para aplicar en las hojas de estilo.

<BLOCKQUOTE> que sirve para presentar párrafos tabulados. Habitualmente se utiliza cuando se incluyen citas de otros autores.

<HR> (por Horizontal Rule) que nos coloca una línea horizontal. Al igual que al texto, se le puede incluir un parámetro de color, pero no funciona en todos los navegadores. También se puede cambiar su apariencia añadiéndole el atributo <NOSHADE> para que no ponga sombra a la línea. El elemento <HR> admite dos parámetros: WIDTH y SIZE. El primero define el ancho de la línea y el segundo su grosor. No es obligado usar los dos a la vez.Por ejemplo: <HR WIDTH=400 SIZE=5>. El valor del atributo WIDTH se puede expresar, como en el ejemplo anterior, en número de puntos (píxels), o en tantos por ciento referidos al ancho total de la ventana. Así: <HR WIDTH=80% SIZE=5>

Ejercicio: Crea una página con seis chistes en la que utilices todos las etiquetas comentadas con anterioridad salvo SPAN. Súbela a la carpeta del servidor FTP y deja en los comentarios un enlace a dicha página.

Empezamos con el HTML

H(yper)T(ext)M(arkup)L(anguage). En traducción literal: Lenguaje de marcado de hipertexto. HTML nos permite crear documentos que contengan enlaces a otros textos, imágenes y, por supuesto, texto. Estos documentos se podrán visualizar desde un navegador de Internet: Ms Internet Explorer, Mozilla Firefox, Opera,... Lo primero que debemos tener muy claro es que un documento HTML sólo contiene texto. Por lo tanto podremos crearlos con cualquier programa de edición de textos, como por ejemplo el Bloc de notas. Más adelante en el curso iremos conociendo, programas especializados en la creación de HTML como Dreamweaver. La estructura básica de un documento HTML es la siguiente:

<html>

<head> <title>Mi primera página</title> </head>

<body> Hola Mundo, ya he llegado </body>

</html>

Ya podemos intuir que los símbolos < y > tienen un significado especial. Los comandos o "marcas" de html siempre van señalizadas con estos símbolos.

También podemos intuir que estas marcas o comandos tienen un principio (<title> ) y un final (</title>). El final es el nombre del comando pero precedido de la barra "/". Estas marcas o comandos pueden "anidarse" unas dentro de otras. Estas marcas o comandos tienen utilidades diversas: marcar secciones del documento, modificar el formato del texto, insertar imágenes, enlazar con otros documentos,...

Podemos identificar claramente dos secciones: encabezado (head) y cuerpo (body).

En la primera de ellas que empieza en <head> y termina en </head> aquí aparece datos generales sobre la página y el título acotado por <title> y </title> .

En el cuerpo (body) del documento es donde ponemos lo que realmente se va a "ver".

Ya está bien para empezar. Vamos con el ejercicio:

• Abre el Bloc de notas (Inicio - Todos los programas - Accesorios - Bloc de notas) y escribe la págica anterior. Para guardarlo: Menú Archivo - Guardar como. Al guardar, en el tipo de archivo, cambio "Documentos de texto *.txt" por "Todos los archivos" y no olvides terminar el nombre del archivo con .htm o .html
• Una vez guardada la página, cierra el bloc de notas y haz doble clic sobre el fichero para ver como ha quedado.

Primer Ejercicio del curso

En esta página iré publicando los ejercicios a realizar durante el curso de Diseño Web realizado en Caravaca de la Cruz desde Noviembre del 2004. Para confirmar que has llegado hasta aquí deja tu nombre en los comentarios.