Documente Academic
Documente Profesional
Documente Cultură
HTML bsico - II
Algunos componentes
fundamentales
En el primer captulo hemos aprendido a realizar sencillas pginas web. En este
segundo captulo presentaremos dos elementos habituales de estos documentos, de
una importancia fundamental: los grficos y las tablas.
1. Las imgenes de un documento HTML
2. Las tablas de un documento HTML
HTML bsico - II
HTML bsico - II
align="left">) de la imagen. 4
Una imagen puede presentarse formando su propio prrafo. En ese caso, una buena
manera de alinearla es colocar la imagen dentro de una etiqueta <DIV>...</DIV>.
4. Para que la imagen no presente bordes, el valor del atributo ha de ser <border="0">.
Una imagen puede soportar su propio enlace. 5 Para ello, basta con enlazar la etiqueta de la imagen
de la manera ya conocida. Por ejemplo:
<A HREF="fichero.html"><IMG SRC="imagen.gif"></A>
.
EJERCICIO 1
Vamos a practicar un poco con imgenes:
1. Para empezar, necesitamos algunas
imgenes. Vamos a utilizar dos: el icono de
"inicio" (el pequeo tringulo azul al final de
cada apartado) de esta misma pgina, y el
de la UDWeb (en mi home). Guarda ambos
en tu disco.
2. Crea un documento HTML y coloca el
anagrama de UD antes del ttulo (que puede
ser, por ejemplo, "Ejercicio 1").
3. Ahora modifica el tamao de la imagen, para
que sea ms pequea que el original. Para
eso necesitas conocer el tamao original,
verdad? Pues avergualo en el cdigo de la
pgina original.
4. Ahora quiero que la conviertas exactamente
al triple de su tamao. Observa que al
aumentar el tamao se pierde calidad.
5. Coloca el icono de "inicio" junto al texto
"volver arriba". Copia el conjunto tres veces
y colcalo con distintas alineaciones.
6. Enlaza el anagrama de la UD a la pgina
principal de la UDWeb (ya sabes:
http:///www.deusto.es). Observars que se
ha aadido un marco a la imagen. Cmo
puedes quitarlo?
7. Por ltimo, coloca el texto alternativo "Web
de la UD" en la imagen anterior.
EJEMPLO 1-b
HTML bsico - II
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#000088">
Esto tiene un color de fondo.
</BODY>
</HTML>
Ver resultado
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="g_logo.gif">
Esto tiene una imagen de fondo.
</BODY>
</HTML>
Ver resultado
Para solucionar este problema, existen etiquetas que permiten especificar el color del texto y de los
enlaces:
Etiquetas
<BODY TEXT="#?">
<BODY LINK="#?">
<BODY VLINK="#?">
<BODY ALINK="#?">
Funcin
Determina
Determina
Determina
Determina
el color
el color
el color
el color
del
del
del
del
texto
enlace
enlace visitado
enlace activo
EJEMPLO 2-b
<HTML>
<HEAD>
</HEAD>
<BODY BACKGROUND="g_logo.gif"
TEXT="#FFFF00">
Esto tiene una imagen de fondo.
</BODY>
</HTML>
Ver resultado
Como puede observarse, el Ejemplo 2-b resulta prcticamente imposible de leer con esa definicin de
color. Podramos buscar alguna combinacin que destacase ms, pero el verdadero problema de ese
documento es que la imagen utilizada como fondo es inadecuada. La solucin consiste como
mnimo en tratar dicha imagen en un programa adecuado, para suavizar sus tonos.
inicio
HTML bsico - II
Las tablas permiten ordenar y alinear los elementos de un documento de una manera precisa.
Las tablas son mucho ms frecuentes de lo que parece a primera vista, puesto que, en la mayor parte
de los casos, las lneas que las definen permanecen ocultas.
Las etiquetas fundamentales que definen una tabla son las siguientes:
Etiquetas
Funcin
<TABLE>...</TABLE> Principio y final de tabla
<TR>...</TR>
Principio y final de lnea
<TD>...</TD>
Principio y final de celda
Con estas etiquetas ya podemos definir una tabla, por ejemplo, de 2x2 (2 lneas, 2 columnas y 4
celdas):
EJEMPLO 3
<HTML>
<HEAD>
<TITLE>Ejemplo 3</TITLE>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD>Celda 1</TD>
<TD>Celda 2</TD>
</TR>
<TR>
<TD>Celda 3</TD>
<TD>Celda 4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ver resultado
Para la primera fila de una tabla, que en muchas ocasiones contiene el encabezado o el ttulo de las
columnas, puede utilizarse la etiqueta <TH>...</TH> en lugar de la habitual <TD>...</TD>,
porque el contenido de la celda aparece as centrado y en negrita.
La etiqueta <CAPTION>...</CAPTION> permite introducir un pie de tabla. Puede especificarse la
posicin del pie con respecto a la tabla por medio de las siguientes atributos:
Atributos
<CAPTION valign="top / bottom">
Funcin
Encima / debajo de la tabla
<CAPTION align="left / center / right"> Alineado izquierdo / centrado / derecho
Funcin
HTML bsico - II
<width="n / n%">
<height="n / n%">
<cellspacing="n">
HTML bsico - II
Funcin
Anchura de la fila o celda (en pxeles / en porcentaje)
Altura de la fila o celda (en pxeles / en porcentaje)
Grosor (en pxeles) de las lneas
Color de las lneas
Color de fondo
Imagen de fondo
Alineado horizonal
Alineado vertical
Los parmetros de esta tabla pueden aplicarse tanto a filas enteras como a una nica celda.
Un mismo parmetro (el tamao, el color de fondo, etc.) puede especificarse para toda la tabla, para
cada fila o para cada celda. Es importante, por tanto, que los valores de las distintas indicaciones no
resulten contradictorios.
En cualquier caso, la regla general es que la especificacin en una unidad menor se impone a la
especicacin de una unidad mayor. As por ejemplo, el valor de alineamiento de una celda se impone
al alineamiento general de toda una fila.
Todas las celdas de una fila son por defecto de igual anchura, pero se van ajustando al contenido, 7
por lo que muy probablemente se desajustarn al introducir distintos caracteres en cada una de ellas.
Para evitar este problema, es necesario utilizar el atributo <TD width>, como se muestra en el
siguiente ejemplo:
EJEMPLO 5
<HTML>
<HEAD>
<TITLE>Ejemplo 5</TITLE>
</HEAD>
<BODY>
La siguiente tabla, sin indicaciones de anchura para las
celdas, nace simtrica:
<TABLE border="1" cellspacing="0" cellpadding="2">
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD>
</TR>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD>
HTML bsico - II
</TR>
</TABLE>
Pero se vuelve asimtrica si introducimos caracteres
desiguales en las distintas celdas:
<TABLE border="1" cellspacing="0" cellpadding="2">
<TR> <TD>Celda uno</TD> <TD>Segunda Celda</TD>
<TD>Tres</TD> <TD>4</TD> </TR>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
Para corregirlo, debemos definir la anchura de las celdas
(con la primera fila vale), en este caso todas iguales. Como
lo hacemos en trminos porcentuales (25% para cada
celda), el navegador tomar como dicho valor la anchura de
la celda mayor:
<TABLE border="1" cellspacing="0" cellpadding="2">
<TR> <TD width="25%">Celda uno</TD> <TD
width="25%">Segunda Celda</TD> <TD
width="25%">Tres</TD> <TD width="25%">4</TD> </TR>
<TR> <TD>1</TD> <TD>2</TD> <TD>3</TD> <TD>4</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ver resultado
Hasta este momento, slo hemos manejado tablas homogneas, es decir, con un nmero constante
de filas y columnas. Sin embargo, las tablas suelen adoptar otras muchas formas.
Para conseguir una tabla asimtrica hay que ir agrupando las celdas, bien en la fila, bien en la
columna. Las etiquetas para este proceso son las siguientes:
Etiquetas
Funcin
<TD colspan="n"> Fusin de n celdas en la misma fila
<TD rowspan="n"> Fusin de n celdas en la misma columna
El siguiente ejemplo muestra el etiquetado de un par de tablas asimtricas:
EJEMPLO 6
<HTML>
<HEAD>
<TITLE>Tablas asimtricas/TITLE>
</HEAD>
<BODY>
Primera tabla asimtrica:
<TABLE width="50%" border="1" cellspacing="0"
cellpadding="2">
<TR> <TD colspan="4"> </TD> </TR>
<TR> <TD></TD> <TD></TD> <TD></TD>
<TD></TD> </TR>
<TR> <TD></TD> <TD></TD> <TD></TD>
HTML bsico - II
<TD></TD> </TR>
<TR> <TD></TD> <TD></TD> <TD></TD>
<TD></TD> </TR>
</TABLE>
Segunda tabla simtrica:
<TABLE width="50%" border="1" cellspacing="0"
cellpadding="2">
<TR> <TD rowspan="4"> </TD> </TR>
<TR> <TD></TD> <TD></TD> <TD></TD>
</TR>
<TR> <TD></TD> <TD></TD> <TD></TD>
</TR>
<TR> <TD></TD> <TD></TD> <TD></TD>
</TR>
</TABLE>
</BODY>
</HTML>
Ver resultado
En definitiva, la creacin de tablas es poco menos que un "arte", que depende no slo del dominio
tcnico, sino de la imaginacin y del sentido del creador. Por ejemplo, puedes ver aqu un ejemplo
algo ms trabajado, aunque ciertamente feo. La posibilidades de las tablas son prcticamente
ilimitadas.
El manejo del etiquetado de las tablas no es defcil pero s complicado, porque exije una gran
minuciosidad. Aunque utilicemos un editor de HTML.
inicio
Notas
Conviene recordar en este punto todo lo sealado en el captulo anterior sobre el direccionamiento de los
enlaces.
2 El texto alternativo es importante para la accesibilidad de los contenidos. Por ejemplo, un programa lector de
web para invidentes reproducir el contenido de la etiqueta.
3 En realidad existen ms valores para este atributo, pero no suelen usarse, porque son equivalentes a alguno
de los ya sealados (<align="texttop">=<align="top">), <align="baseline">= <align="bottom">,
o bien suponen diferencias casi inapreciables (<align="absbottom"> y <align="absmiddle"> con
respecto a las alineaciones inferior y media).
4 Otra manera de controlar la disposicin conjunta de imgenes y texto es mediante el uso de tablas, como
veremos en el siguiente apartado.
5 Existe adems la posibilidad de crear imgenes con varias zonas definidas dentro de s mismas, que remiten
a sus respectivos enlaces. Como el ejemplo tpico de estas imgenes es un mapa cuyas distintas regiones
remiten a distintas pginas, suelen denominarse "mapas activos" (o "mapas sensitivos"). El etiquetado de
dichas imgenes supera los contenidos de este apartado. Sin embargo, los editores de HTML permiten
realizarlos con relativa facilidad.
6 Por ejemplo, el que utiliza esta misma pgina.
7 Para evitar que el contenido de la celda se ajuste automticamente, puede emplearse el atributo <TD
nowrap>, que hace que el contenido de una celda se presente en una sola lnea, de modo que se genera
1
HTML bsico - II
inicio