Sunteți pe pagina 1din 10

HTML bsico - II

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

1. Las imgenes de un documento HTML


Las imgenes estn presentes en los documentos HTML de muchas maneras:
fotografas, dibujos, iconos, fondos, etc. Ninguno de estos elementos es
imprescindible para una pgina web, pero todos son recomendables.
Antes de tratar sobre las cuestiones tcnicas, conviene reflexionar acerca de la
propia utilizacin de los grficos en los documentos HTML.

1.1. Imgenes: consideraciones previas


En muchas ocasiones, las imgenes no son otra cosa que el "maquillaje" del documento. Conviene
que nuestras pginas sean bonitas, pero sin olvidar lo verdaderamente importante, el contenido, que
habitualmente no son las imgenes.
Aunque parezca estar en contradiccin con lo anterior, a veces resulta ms importante tener recursos
en la edicin de imgenes que en la propia edicin HTML. Dicho de otra manera: para conseguir una
buena pgina web, resulta casi imprescindible manejar algn programa de edicin de imgenes (Paint
Shop Pro, Photoshop, etc.).
Para evitar que las imgenes parezcan meros "pegotes para hacer bonito", conviene integrarlas al
mximo, conseguir que posean alguna funcin dentro del documento. La solucin ms obvia (adems
de no colocar imgenes sin relacin directa con el tema tratado) es que resulten "pinchables", es
decir, que remitan a sus propios enlaces (ndices, anclas, contenidos secundarios, etc.).
Conviene recordar que resulta muy sencillo hacerse con una pequea biblioteca de imgenes a
medida que navegamos por la red, puesto que la mayor parte de las veces pueden descargarse y
almacenarse. (Basta con pinchar la imagen deseada con el botn derecho del ratn y seleccin la
opcin Salvar imagen como.) Por otra parte, la propia red dispone de miles de imgenes, al alcance
de cualquier buscador (Google Images, por ejemplo)
Un problema fundamental a la hora de introducir imgenes en un documento HTML es su "peso", es
decir, su tamao en bites. Cuantas ms imgenes haya en un documento web, mayores y de mayor
calidad, ms ocuparn, y, por tanto, ms tiempo tardar el usuario en descargarlas de la red.

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

HTML bsico - II

Conviene tener en cuenta lo siguiente:


1. Los formatos de imgenes habituales en la Web son *.GIF y *.JPEG. Utilizar otros formatos
ocupa habitualmente mucho ms espacio y, adems, resulta problemtico.
2. Cul de los dos formatos resulta ms adecuado? El GIF permite, por su caracterstico
entrelazado, recargar progresivamente una imagen al abrir la pgina. Por su parte, el JPEG
posee algo ms de calidad en el tratamiento de los tonos (el GIF slo maneja 256 colores),
pero "pesa" ms y tarda ms en descargarse. En definitiva, para imgenes sin excesivas
pretensiones de calidad (iconos, fondos, etc.) los dos formatos vienen a resultar equivalentes.
3. Si, a pesar de todo, una imagen ocupa mucho espacio, una buena idea puede ser colocar en
la pgina principal una pequea imagen de baja calidad, a modo de icono, enlazada con la
imagen completa.

1.2. Imgenes: las etiquetas


La etiqueta bsica para insertar una imagen es: <IMG SRC="direccin de la imagen">. De esta
manera, el navegador visualizar la imagen contenida en la direccin especificada.1
Como puede verse, la imagen no forma parte de un documento HTML: ste slo indica al navegador
dnde puede descargarla.
Esta etiqueta bsica posee varios atributos, que se muestran en la siguiente tabla:
Atributos
Funcin
<IMG alt="***">
Texto alternativo (el que aparece cuando se posa el ratn sobre la imagen)
<IMG width="?">
Especificacin de la altura y la anchura en pxeles
<IMG height="?">
<IMG align="top">
Distintas posibilidades de alineacin con respecto al texto
<IMG align="middle">
<IMG align="botton">
<IMG align="left">
<IMG align="right">
<IMG border="?">
Borde de la imagen
Conviene hacer algunas aclaraciones con respecto a estos atributos:
1. El "texto alternativo" se denomina as porque supone una verdadera alternativa al grfico.
Hay que tener en cuenta la posibilidad de que el navegador que visite nuestra pgina tenga
desactivada la opcin de "ver imgenes" (o incluso un error en el enlace por nuestra parte!),
en cuyo caso slo aparecera dicho texto.2 En condiciones "normales", el texto alternativo
posee la funcin de un pie de foto, puesto que aparece al posar el cursor sobre la imagen.
2. El tamao de la imagen puede modificarse, efectivamente, con <IMG width="?"
height="?">, pero hay que tener en cuenta que los valores que sealemos aqu no
alteren las proporciones de la imagen original. En cualquier caso, como norma general, es
mejor efectuar todos los ajustes necesarios en un programa de edicin grfica (Paint Shop
Pro, Photoshop, etc.) .
3. Los ajustes de <IMG align> pueden referise a la lnea de texto o al prrafo:
Una imagen pequea (como un icono) puede presentarse dentro de una lnea de
texto. En este caso, puede alinearse justo sobre la lnea del texto (<IMG
align="top">), debajo (<IMG align="bottom">) o en el medio (<IMG
align="middle">). 3
Una imagen puede colocarse dentro de un prrafo, de modo que el texto se
presente a la izquierda (<IMG align="right">) o a la derecha (<IMG

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

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.

1.3. Los fondos de pantalla


Para mejorar su presentacin general, un documento HTML puede llevar un fondo coloreado o una
imagen, del tipo que sea.
La instruccin para el fondo de pantalla se aade a la etiqueta del <BODY>:
1. Si es un color de fondo, la etiqueta es, por ejemplo: <BODY BGCOLOR="#000088">.
2. Si es una imagen de fondo, la etiqueta es: <BODY BACKGROUND="direccin">.
Cuando se utiliza una imagen de fondo, suele tratarse simplemente de algn pequeo archivo con
algn tipo de textura, que se coloca a modo de mosaico, como si fuera un papel pintado. 6
La utilizacin de fondos puede llegar a dificultar gravemente la lectura de los caracteres. Vemoslo
con un doble ejemplo de color de fondo e imagen de fondo:
EJEMPLO 1-a

EJEMPLO 1-b

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

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

Conviene hacer algunas aclaraciones con respecto a estas etiquetas:


1. En primer lugar, debe quedar claro que estas etiquetas no se refieren a las imgenes, sino al
color de los caracteres del documento. Simplemente, ste es el momento adecuado para
presentarlas.
2. En principio, el color de los caracteres puede variar segn los navegadores, puesto que
depende de sus opciones por defecto. Estas etiquetas anulan dichas especificaciones por
defecto, asegurando por tanto que todos los caracteres del documento se vern de igual
manera en cualquier browser.
3. Como estas etiquetas se insertan en la etiqueta <BODY>, afectan a todo el documento; son,
por tanto, mucho ms potentes que la etiqueta <FONT COLOR>.
Veamos ahora cmo pueden mejorarse con estas nuevas etiquetas los ejemplo anteriores:
EJEMPLO 2-a
<HTML>
<HEAD>
</HEAD>
<BODY BGCOLOR="#000088"
TEXT="#FFFF00">
Esto tiene un color de fondo.
</BODY>
</HTML>
Ver resultado

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

2. Las tablas de un documento HTML


http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

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

2.1. Las propiedades de la tabla


La tabla del Ejemplo 3 es muy rudimentaria, puesto que no se ha definido ninguna de sus
caractersticas generales, salvo el nmero de filas y columnas.
La etiqueta <TABLE> posee una serie de atributos que permiten controlar sus caractersticas
bsicas. Se muestran en la siguiente tabla:
Atributos

Funcin

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

HTML bsico - II

<width="n / n%">
<height="n / n%">
<cellspacing="n">

Anchura de la tabla (en pxeles / en porcentaje)


Altura de la tabla (en pxeles / en porcentaje)
Espacio (en pxeles) entre las celdas
(o sea, el espesor de las lneas del cuadriculado)
<cellpadding="n">
Espacio (en pxeles) entre el borde y el contenido
(o sea, la envoltura de las celdas)
<align="left / right / center"> Alineado de la tabla
<border="n">
Grosor (en pxeles) de las lneas
<bordercolor="?">
Color de las lneas
<bgcolor="?">
Color de fondo
<background="imagen">
Imagen de fondo
Conviene realizar varias pruebas con distintos valores de los atributos anteriores para controlar
adecuadamente el aspecto de las tablas. En cualquier caso, la tabla anterior puede actualizarse, por
ejemplo, de la siguiente manera:
EJEMPLO 4
<HTML>
<HEAD>
<TITLE>Ejemplo 4</TITLE>
</HEAD>
<BODY>
<TABLE align="center" width="50%"
height="150" border="1" cellspacing="2"
cellpadding="2" bordercolor="red">
<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
Como es lgico, una tabla puede verse afectada por un considerable nmero de las etiquetas
expuestas en los apartados anteriores.
EJERCICIO 2
Para empezar, debes crear una serie de tablas:
de 3x3 (o sea, 3 filas y 3 columnas), 4x4, 3x2 y
2x4. Numera las celdas de manera similar a los
ejemplos.
Ahora vamos a plantear un pequeo problema
que te obligar a manejar algunas etiquetas
anteriores: simplemente, debes reproducir la
tabla del Ejemplo 4 y copiarla alineada a la
izquierda, centrada y alineada a la derecha.
Te das cuenta inmediatamente de cmo debes
hacerlo? Excelente! Necesitas repasar todo lo
http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

HTML bsico - II

anterior? Bueno, no pasa nada: es lo normal.


Llevas un tiempo intentndolo y no lo
consigues? No te desanimes, pero tal vez
deberas volver a trabajar estos apuntes desde
el principio. De todas maneras, si quieres, aqu
tienes la solucin.

2.2. Las propiedades de la celdas


Cada celda dentro de una tabla puede contener todo tipo de elementos: texto, imgenes, enlaces, etc.
Una celda puede incluso contener dentro de s una tabla secundaria completa. De este modo, las
tablas pueden anidinarse unas dentro de otras.
El contenido de cada celda puede verse afectado por infinidad de etiquetas distintas, como cualquier
otra porcin de texto: fuentes, tamaos, colores, alineados, etc.
En el subapartado anterior, hemos presentado las propiedades generales de la tabla. Vamos a ver
ahora cmo controlar las propiedades que afectan a una fila o a una nica celda:
Atributos
<width="n / n%">
<height="n / n%">
<border="n">
<bordercolor="?">
<bgcolor="?">
<background="imagen">
<align="left / right / center">
<valign="top / middle / bottom">

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>

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

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>

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

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

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

HTML bsico - II

un scroll horizontal en caso de necesidad.

inicio

Alexander Iribar >> Edicin digital


Comentarios: alex.iribar@deusto.es

http://paginaspersonales.deusto.es/airibar/Ed_digital/HTML/HTML_2.html[04/07/2013 01:06:08 p.m.]

S-ar putea să vă placă și