Crear página web HTML básica

HTML
básico
-I
Cómo crear una página web
En este primer capítulo, presentaremos las nociones básicas del lenguaje HTML. Con una
utilización inteligente de las etiquetas HTML más sencillas, pueden lograrse documentos web de
calidad suficiente. Al fin y al cabo, no debe olvidarse que lo importante, tanto en un papel como en
Internet, sigue siendo el contenido.
1. Introducción
2. La estructura mínima de un documento HTML
3. El texto básico de un documento HTML
4. Los párrafos de un documento HTML
5. Los enlaces de un documento HTML
1. Introducción
 HTML1 es un lenguaje universal, que funciona en cualquier plataforma (Windows,

Macintosh, Unix, OS/2, etc.) y con cualquier navegador o browser (Netscape, Internet
Explorer, Mozilla Firefox, etc.). El precio que paga por su universalidad es su poca
sofisticación, puesto que no es otra cosa que el viejo formato ASCII2 (y con 7 bits en lugar
de ocho, por lo que ni tan siquiera tiene acentos ni otros caracteres especiales).
 Por tanto, para que un documento HTML sea algo más que simples caracteres básicos,
debe contener, además de dicho texto, una serie de instrucciones para el browser que lo
va a reproducir: estas intrucciones se denominan etiquetas o tags y se distinguen del texto
porque van entre guiones (< >)3. Estas etiquetas contienen todo el resto de la información
de la página web.
 Por tanto, si un documento HTML no es más que texto ASCII (parte sin guiones y parte
entre guiones: las etiquetas), cualquier documento web, hasta el más sofisticado, puede
escribirse directamente desde un sencillo programa básico de texto, como el Cuaderno de
Notas (Notepad) de Windows, por ejemplo.
 Sin embargo, escribir un documento complejo de esta manera exige un conocimiento

exhaustivo de las numerosísimas etiquetas existentes y sus normas de utilización; para
evitar esta dificultad, hay una serie de programas denominados comúnmente editores de
HTML (desde el Composer al Dreamweaver, pasando por tantos otros), que permiten al
usuario componer una página (es decir, generar etiquetas HTML) desde un interfaz más o
menos parecido al de un procesador de textos.
 A la hora de crear una página web, y aunque utilicemos un editor de HTML, es casi
imprescindible entender la disposición del etiquetado de un documento y manejar
siquiera las etiquetas más elementales. Son varias las razones que pueden aducirse para
ello:
1. Los editores de HTML no son siempre herramientas perfectas, sobre todo cuando
ha habido muchas modificaciones durante el proceso de creación. Con bastante
frecuencia se hará necesario consultar el código completo, con las etiquetas HTML
(lo que se suele denominar código fuente o código madre) para corregir las
disfunciones.
2. Tal vez la mejor manera de aprender a diseñar páginas web es observar las
páginas de los demás, cuyos códigos fuente están siempre disponibles para ser
imitados (o incluso copiados, técnicamente, al menos). Pero, para ello, es
necesario entenderlos.
3. Los mismos editores HTML manejan términos propios del lenguaje HTML
(heading, cellspacing, etc.), que es preciso comprender.
4. Es necesario un buen conocimiento de HTML para insertar otros códigos más

potentes, como los de Javascript, por ejemplo.
 El objetivo de este documento es aprender a componer una sencilla página web desde el
más básico de los programas de texto disponibles en Windows: el Cuaderno de Notas.4 De
esta manera, seremos capaces de entender y manejar los códigos fuente de las páginas
más complejas.
inicio
2. Esquema mínimo de un documento HTML
 Un documento HTML comienza siempre con la etiqueta <HTML>5, que indica que el
documento en cuestión está construido con dicho lenguaje.
 La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la

acción y </...> indica el fin de dicha acción.
 Por tanto, una página web estará siempre contenida entre las etiquetas <HTML> y
</HTML>.
 Por otra parte, todo documento HTML consta de dos partes: la cabecera (head) y el
cuerpo del documento (body).
1. La cabecera contiene básicamente información destinada al browser (o

navegador), que queda oculta al usuario. Su etiqueta (pareada) es <HEAD>.
2. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.

 Ya estamos en condiciones de componer nuestra primera página web. Basta con escribir
las siguientes etiquetas en nuestro editor de texto y salvar el resultado con la extensión
*.HTML o *.HTM:
EJEMPLO 1
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
Ver resultado
 He introducido una pequeña tabulación a la hora de escribir las etiquetas de cabecera y

cuerpo, simplemente para facilitar su compresión gráfica, puesto que esta cuestión es
totalmente indiferente. El resultado no variaría de haber colocado las etiquetas de
cualquier otra manera. Por ejemplo:
EJEMPLO 1: Variantes de escritura
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
<HTML><HEAD></HEAD><BODY></BODY></HTML>
<HTML>
<HEAD></HEAD>
<BODY></BODY>
</HTML>
Ver resultado
 Esta primera página web está, lógicamente, vacía, pero es perfectamente operativa. Para
modificarla, basta con modificar sus códigos en el editor de texto. No hace falta cerrar
para ello el navegador: una vez modificado –y salvado– el fichero, basta con utilizar el
comando Actualizar (o Refresh) para ver los cambios.
 Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana

correspondiente sólo aparece el nombre del navegador (con Netscape) o la trayectoria
completa del archivo (con Explorer). Esto sucede porque nuestro documento no posee un
título propio. Para crearlo, debemos introducir una nueva etiqueta (pareada) en la
cabecera: <TITLE>. Nuestro página web podría quedar, por tanto, así:
EJEMPLO 2
<HTML>
<HEAD>
<TITLE>Ejemplo 2</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Ver resultado
 Ya sabemos crear el esqueleto de una página web. La siguiente tarea será aprender a
introducir texto (entre los tags <BODY> y </BODY>) y controlar sus etiquetas elementales.
inicio
3. El texto básico de un documento HTML
 El texto básico de un documento HTML puede escribirse sin etiquetas. Cada navegador lo
visualiza entonces con el tipo y tamaño de caracteres escogidos en su configuración por
defecto, e introduce un salto de línea cuando los caracteres alcanzan el borde de la
ventana.
 Para dominar las cuestiones de formato (de caracteres, de párrafo, etc.) es necesario
utilizar las etiquetas correspondientes.
3.1. La etiqueta básica
 La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>.
 <FONT> es una etiqueta pareada. Por tanto, afecta a los caracteres introducidos entre
<FONT> y </FONT>. Pero sin más especificaciones, la etiqueta aún no sirve para nada.
 Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la

etiqueta, de la siguiente manera (en este caso, la fuente escogida es Arial): <FONT
FACE="Arial">...</FONT>.
 Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>.

Para especificar los colores, conviene saber al menos lo siguiente:
1. Cada color posee su correspondiente código.
2. Hay dos códigos: hexadecimal –lo más habitual– o RGB. En ambos casos se trata
de expresar las proporciones de tres colores básicos: rojo, verde y azul.
3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:
1. Rojo: color:#ff0000;
2. Verde: color:#00ff00;
3. Azul: color:#0000ff;
4. Los mismos colores, expresados con los valores RGB (red, green, blue), son los
siguientes:
1. Rojo: color:rgb(255,0,0);
2. Verde: color:rgb(0,255,0);
3. Azul: color:rgb(0,0,255);
5. Todos los colores se expresan mediante combinaciones de estos tres colores

básicos. Existen muchos programas que proporcionan los valores de todos los
colores que el usuario puede componer. También en internet existen muchas
páginas con los Códigos de colores.
6. Los colores más básicos pueden especificarse sin código, simplemente escribiendo
la palabra correspondiente (por supuesto en inglés). Por ejemplo: <FONT
COLOR="blue">...</FONT>, <FONT COLOR="red">...</FONT>, etc.
 Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>.

El valor del tamaño ("?") deseado puede suministrarse de manera absoluta (un número
del 1 al 7) o relativa (+1, +2, -1, -2, etc., teniendo en cuenta que el valor por defecto es 3).6
 Todas estas etiquetas se pueden combinar, de modo que con una sola se controla, por
ejemplo, el tipo, el tamaño y el color de los caracteres: <FONT FACE="Arial"
COLOR="#0000FF" SIZE="5">...</FONT>.
Con esta etiqueta hemos visto ya la sintaxis básica de las etiquetas HTML, que podíamos
formalizar así: <ETIQUETA [ATRIBUTO="valor"]>.
Lo anterior quiere decir que una etiqueta HTML (por ejemplo, FONT) puede llevar uno o varios
atributos (FACE, COLOR, SIZE), cuyos valores se colocan entrecomillados tras el signo igual
(="arial", ="#0000FF", etc.).
Esto será válido para todas las etiquetas HTML que veamos a partir de este momento.
 Volvamos a nuestro documento web y practiquemos con las posibilidades de la etiqueta

<FONT>. Por ejemplo:
EJEMPLO 3
<HTML>
<HEAD>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo visualizará según

su configuración por defecto.
<FONT SIZE="1">Este texto es tamaño 1.</FONT>
<FONT SIZE="+1">Este texto es tamaño +1 (que es lo

mismo que tamaño 4).</FONT>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto

posee varias especificaciones de formato.</FONT>
</BODY>
</HTML>
Ver resultado
 Nuestra página web, tal y como está diseñada en el Ejemplo 3, no posee ninguna
especificación de líneas. A pesar de que las etiquetas están ordenadas en varias líneas, el
navegador coloca todos los caracteres seguidos (sólo tiene en cuenta un único espacio
entre palabras). Para corregir este problema podemos utilizar la etiqueta <BR>, que
introduce un salto de línea. Nuestro página quedaría entonces así:
EJEMPLO 4
<HTML>
<HEAD>
</HEAD>
<BODY>
Esto es texto simple: cada navegador lo visualizará según

su configuración por defecto.<BR>
<FONT SIZE="1">Este texto es tamaño 1.</FONT><BR>
<FONT SIZE="+1">Este texto es tamaño +1 (que es lo

mismo que tamaño 4).</FONT><BR>
<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto

posee varias especificaciones de formato.</FONT>
</BODY>
</HTML>
Ver resultado
Hay otra cuestión importante que debe saberse sobre la etiqueta <FONT>: es la etiqueta más
básica, y conviene empezar a aprender por ella, pero está en desuso y desaparecerá en las
versiones futuras de HTML. En su lugar, existen otras etiquetas más potentes, que iremos viendo
en su momento.
3.2. Etiquetas de formato de caracteres
 A partir de este momento, se trata simplemente de añadir más etiquetas a nuestra aún
pequeña colección, de modo que vayamos teniendo cada vez más control sobre el
formato de los caracteres. La tabla siguiente muestra las más comunes:
Código Función
<B>...</B> Negrita
<I>...</I> Cursiva
<U>...</U> Subrayado
<SUB>...</SUB> Subíndice
<SUP>...</SUP> Superíndice
 Hay que realizar algunos comentarios sobre las etiquetas precedentes:
1. Existe otra etiqueta similar a <B>, menos utilizada porque depende de las
opciones de configuración del navegador: <STRONG>...</STRONG>.
2. Existe otra etiqueta similar a <I>, menos utilizada porque depende de las opciones
de configuración del navegador: <EM>...</EM>.
3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que éste se

utiliza convencionalmente para indicar los hiperenlaces, y podría por tanto
resultar confuso para el usuario.
 Es normal utilizar varias etiquetas para un mismo elemento de texto. En ese caso, hay que
tener cuidado para encajarlas correctamente. Por ejemplo:
<FONT FACE="Courier"><B><I>...</I></B></FONT> es correcto, pero
<FONT FACE="Courier"><B><I>...</FONT><B></I> es incorrecto.
3.3. Otras etiquetas de caracteres
 Hay muchas otras etiquetas que afectan a los caracteres. Vamos a presentar varias más,
que deben manejarse con cierta precaución:
1. La etiqueta <PRE>...</PRE> indica que el texto afectado está preformateado, de

modo que el navegador sí tiene en cuenta todos los espacios y saltos de línea
definidos en la pantalla.
2. La etiqueta <BLINK>...</BLINK> indica texto parpadeante. Sólo funciona con

Netscape.
3. La etiqueta <S>...</S> genera texto tachado.
4. La etiqueta <TT>...</TT> genera texto similar al de una máquina de escribir

(fuente courier de paso fijo).
5. La etiqueta <BIG>...</BIG> aumenta el tamaño de letra (equivale a <FONT

SIZE="+1">).
6. La etiqueta <SMALL>...</SMALL> disminuye el tamaño de letra (equivale a <FONT

SIZE="-1">).
EJERCICIO 1
Ya es hora de practicar con las herramientas que
hemos presentado hasta ahora. ¿Cómo? Es muy
sencillo: ¡crea una página web!
Si no se te ocurre nada, te propongo que

reproduzcas esta página. Para que no tengas
que teclearlo todo, aquí tienes el archivo de
texto, de modo que, si quieres, no tienes más
que pegarlo en tu editor y colocar las etiquetas
correspondientes en los lugares adecuados.
(Por cierto: las fuentes que he utilizado son Arial

y Comic Sans MS.)
inicio
4. Los párrafos de un documento HTML
En el apartado anterior hemos aprendido a controlar la apariencia de los caracteres. (Recuerda, de

todas maneras, que la etiqueta <FONT> está en desuso.) Vamos ahora a estudiar las etiquetas
fundamentales que controlan la organización de los párrafos en un texto más complejo.
 Ya conocemos un tag que afecta a las líneas: <BR>. Si deseamos que una línea no se parta
al llegar al final de la ventana del navegador, debemos colocar al comienzo la etiqueta
<NOBR>, y el navegador colocará entonces un scroll o barra de desplazamiento horizonal.
 Por supuesto, si queremos que haya más líneas, al final sí deberá aparecer <BR>.
4.1. Los párrafos y su alineamiento
 La etiqueta <BR> inserta un salto de línea, pero no un salto de párrafo.7 En cambio, la

etiqueta <P>...</P> inserta una salto de línea y una línea en blanco, por lo que, en la
práctica, equivale a un nuevo párrafo.
 Por supuesto, tanto <BR> como <P>...</P> pueden repetirse varias veces seguidas para
dejar más distancia entre las líneas y los párrafos.
 De todas maneras, sólo podemos separar los párrafos con líneas completas (una, dos,
etc.), pero no podemos controlar el espacio entre los párrafos con la precisión que
permite, por ejemplo, el programa Word (con las opciones de espaciado anterior y
posterior).8
 Un párrafo puede alinearse introduciendo los siguientes atributos en la etiqueta habitual:

Código Función
<P align="left">...</P> Párrafo alineado a la izquierda
<P align="center">...</P> Párrafo centrado
<P align="right">...</P> Párrafo alienado a la derecha
<P align="justify">...</P> Párrafo justificado
 Las etiquetas anteriores permiten alinear los párrafos enteros, pero siempre dejando una
línea vacía delante de cada uno de ellas. ¿Hay alguna manera de alinear
independientemente líneas o grupos de líneas? Sí, con las siguientes etiquetas:
Código Función
<DIV align="left">...</DIV> Línea(s) alineada(s) a la izquierda
<DIV align="center">...</DIV> Línea(s) centrada(s)
<DIV align="right">...</DIV> Línea(s) alineada(s) a la derecha
<DIV align="justify">...</DIV> Línea(s) alineada(s) justificadas
 En definitiva, disponemos de varias etiquetas similares para la creación y la alineación de

los párrafos, que serán más o menos apropiadas dependiendo de las ocasiones. Veamos
cómo funcionan en una página web:
EJEMPLO 5
<HTML>
<HEAD>
</HEAD>
<BODY>
<P align="left">Este párrafo está alineado a la izquierda.

En la práctica, equivale sencillamente a la misma etiqueta
sin indicación de alineación.</P>
<P align="center">Este párrafo está centrado. Hay una

línea en blanco entre este párrafo y el anterior.</P>
<P>Ahora vamos a alinear tres líneas seguidas de tres
maneras diferentes, pero sin dejar líneas vacías entre
ellas, por medio de otras etiquetas:</P>
<DIV align="left">alineado izquierdo alineado izquierdo

alineado izquierdo alineado izquierdo</DIV>
<DIV align="center">alineado centrado alineado centrado

alineado centrado alineado centrado</DIV>
<DIV align="right">alineado derecho alineado derecho

alineado derecho alineado derecho </DIV>
</BODY>
</HTML>
Ver resultado
 Otra etiqueta que afecta a la alineación de los párrafos es

<BLOCKQUOTE>...<BLOCKQUOTE>, que introduce una doble sangría, derecha e izquierda.
Pueden colocarse varias etiquetas seguidas para acentuar la sangría, como se observa en
el siguiente ejemplo:
EJEMPLO 6
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Párrafo normal Párrafo normal Párrafo normal Párrafo

normal Párrafo normal Párrafo normal Párrafo normal
Párrafo normal.</P>
<P><BLOCKQUOTE>Párrafo con una sangría izquierda-

derecha Párrafo con una sangría izquierda-derecha Párrafo
con una sangría izquierda-derecha Párrafo con una sangría
izquierda-derecha.</BLOCKQUOTE></P>
<P><BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>Párrafo
con tres sangrías izquierda-derecha Párrafo con tres sangrías
izquierda-derecha Párrafo con tres sangrías izquierda-
derecha Párrafo con tres sangrías izquierda-
derecha.</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE><
/P>
</BODY>
</HTML>
Ver resultado
4.2. Los títulos
 Pueden utilizarse hasta seis tipos de títulos en un documento HTML, ordenados

jerárquicamente por medio de la etiqueta <Hn>...</Hn>, donde n = 1 a 6.
 Las etiquetas de los títulos introducen una línea superior en blanco. Como lo habitual
después de un título es un nuevo párrafo (<P>), que también introduce su propia línea, el
resultado final suele ser que una línea de título tiene una línea en blanco antes y otra
después.
 Las etiquetas de los títulos admiten indicaciones de alineación, de la misma manera que la
etiqueta de párrafo.
 Veamos qué aspecto tienen los títulos de un documento HTML:
EJEMPLO 7
<HTML>
<HEAD>
</HEAD>
<BODY>
<H1>Título 1</H1>
<H2>Título 2</H2>
<H3>Título 3</H3>
<H4>Título 4</H4>
<H5>Título 5</H5>
<H6>Título 6</H6>
<H7>Título 7 (como no existe, no supone ningún
cambio)</H7>
<P>Además, los títulos pueden recibir indicaciones de

alineación, como en los siguientes ejemplos</P>
<H3 align="center">Título centrado</H3>
<H3 align="right">Título a la derecha</H3>
</BODY>
</HTML>
Ver resultado
 Este ejemplo permite plantear el siguiente ejercicio:
EJERCICIO 2
En el EJEMPLO 7 se observa que siempre queda

una línea en blanco entre un título y el párrafo
siguiente (el que comienza con "Además".
¿Cómo puede suprimirse dicha línea? Elimina,
por ejemplo, la que hay entre el título 7 y el
párrafo siguiente.
¿Sabes solucionarlo? ¿Te parece fácil? Eso

quiere decir que has entendido estupendamente
todo lo expuesto hasta el momento.
¿No lo has conseguido? No pasa nada, pero tal

vez deberías repasar todo lo anterior con más
detalle. En cualquier caso, aquí tienes la
solución.
4.3. Las listas
 Las listas son elementos que, como los títulos, permiten presentar niveles jerarquizados
de texto.
 Los documentos HTML permiten dos tipos de listas:
1. Listas no ordenadas (bullet list): su etiqueta principal es <UL>...</UL>.
2. Listas ordenadas o numeradas (numbered list): su etiqueta principal es

<OL>...</OL>.
3. Listas de definiciones (definition list): su etiqueta principal es <DL>...</DL>

.
 Una vez definido el tipo de lista deseada, los elementos que la componen se marcan de
distinta manera según el tipo:
1. En las listas ordenadas (<OL>...</OL>) o no ordenadas (<UL>...</UL>), cada

elemento de dicha lista se marca con la etiqueta <LI>...</LI> (list item).
2. En las listas de definición (<DL>...</DL>), se utilizan dos: cada elemento que se

define se marca con <DT>...</DT> y el texto de cada definición se marca con
<DD>...</DD>. Esta etiqueta se puede repetir si se necesita introducir varios
elementos de definición.
 Las listas se pueden encajar unas dentro de otras, además de con el resto de las etiquetas
disponibles. Vemos algún ejemplo:
EJEMPLO 8
<HTML>
<HEAD>
</HEAD>
<BODY>
<H3>Los meses de primavera</H3>
<UL>
<LI>Abril</LI>
<LI>Mayo</LI>
<LI>Junio</LI>
</UL>
<BR>
<H3>Los meses de verano</H3>
<OL>
<LI>Julio</LI>
<LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
<BR>
<H3>Los meses del año</H3>

<UL>
<LI>Los meses de primavera
<OL>
<LI>Abril</LI>
<LI>Mayo</LI>
< LI>Junio</LI>
</OL>
</LI>
<LI>Los meses de verano
<OL>
<LI>Julio</LI>
< LI>Agosto</LI>
<LI>Septiembre</LI>
</OL>
</LI>
</UL>
<BR>
<H3>Refranes de los meses</H3>
<DL>
<DT>Marzo</DT>
<DD>El sol de marzo da con el
mazo.</DD>
<DT>Abril</DT>
< DD>El abril, aguas mil.</DD>
<DT>Mayo</DT>
<DD>Hasta el 40 de mayo no te quites
el sayo.</DD>
</DL>
</BODY>
</HTML>
Ver resultado
 Las listas admiten varios parámetros, que varían según el tipo de lista:
1. Las tres listas admiten el parámetro COMPACT, que hace que el navegador
presente la lista de la manera más compacta posible.
2. El parámetro TYPE funciona con las dos primeras listas. Sus valores respectivos
son, lógicamente, distintos:
 En las no numeradas, controla el tipo de viñeta: con forma de disco (<UL
type="disc">, la opción por defecto), de círculo (<UL type="circle">) y de
cuadrado (<UL type="square">).
 En las numeradas, controla el tipo de numeración: con números árabes

(<OL type="1">, la opción por defecto), romanos (<OL type="I">),
romanos en minúsculas (<OL type="i">), letras mayúsculas (<OL
type="A">) y minúsculas (<OL type="a">).
3. La etiqueta <OL start="n"> indica el número por el que empieza la lista numerada.
4. En una lista numerada, se puede cambiar el número de un elemento –y

consiguientemente de los posteriores– con la etiqueta <LI value="n">.
4.4. Las rayas horizontales
 Las rayas horizontales son otro de los procedimientos habituales para separar los
contenidos de un documento HTML. Se introducen simplemente con la etiqueta <HR>.
 Hay una serie de características de las rayas que pueden controlarse, como siempre, por
medio de parámetros añadidos a la etiqueta básica:
1. El tamaño: la etiqueta <HR> introduce una raya que ocupa todo el ancho de la
pantalla. Pueden especificarse distintas anchuras añadiendo el valor deseado,
expresado en pixeles (<HR width="n">) o en términos porcentuales (<HR
width="n%">).9
2. La alineación: cuando una raya ocupa sólo una parte de la pantalla, puede
especificarse su alineación por medio de las etiquetas habituales:
<HR align="left">
< HR align="center">
< HR align="right">
3. La altura: se expresa en píxeles por medio de la etiqueta <HR size="n">. Puede

adoptar el valor 0 (la raya más fina).
4. El color, por medio del párametro habitual: <HR color="?">.
5. El sombreado: la raya posee habitualmente un pequeño efecto de sombreado,

que puede eliminarse con la etiqueta <HR noshade>.10
 Como siempre, lo habitual suele ser la combinación de varios parámetros en una misma
etiqueta. Por ejemplo:
<HR width="50%" size="0" align="center">
 No queda sino practicar con las distintas posibilidades de rayas. Por ejemplo:
EJEMPLO 9
<HTML>
<HEAD>
</HEAD>
<BODY>
Ésta es una línea normal:
<HR>
Ésta es una línea normal, sin sombreado:
<HR noshade>
Ésta es una línea que ocupa la mitad de la pantalla (si no

se establece la alineación, se coloca centrada por
defecto):
<HR width="50%">
Ésta es más estrecha y mucho más gorda:
<HR width="10%" size="20">
Ésta es igual pero de color rojo:
<HR width="10%" size="20" color="#FF0000">
</BODY>
</HTML>
Ver resultado
inicio
5. Los enlaces de un documento HTML
 En los apartados anteriores hemos aprendido a manejar correctamente el elemento

fundamental de todo documento: el texto. Sin embargo, hay otro elemento básico en un
documento HTML, que le proporciona su mayor potencial: los hiperenlaces, que
estudiaremos en este apartado.
 Un hiperenlace es un vínculo que une un elemento del documento activo (por ejemplo,
una palabra) con otro, de manera que activamos ese segundo elemento simplemente con
un click del ratón en el primero.11
 La sintaxis general de la etiqueta es muy simple: <A HREF="destino">...</A>. (Los puntos

suspensivos representan el elemento enlazado.)
 Para que el destino se abra en una ventana nueva, hay que indicar el siguiente atributo:
<A HREF="destino" target="_blank">...</A>
 El destino de un hiperenlace puede ser de tres tipos:
1. Enlace externo: otro documento HTML situado en un ordenador remoto.
2. Enlace local: otro documento HTML situado en el mismo ordenador.
3. Ancla: otro lugar dentro del mismo documento HTML.
 Vamos a examinar separadamente cada uno de estos tipos.
5.1. Los enlaces externos
 Desde cualquier punto de un documento HTML puede establecerse un enlace con

cualquier recurso de Internet.
 Como es sabido, los recursos más habituales de Internet son:
1. La WWW, es decir, las páginas web o documentos HTML. La etiqueta

correspondiente es:
<A HREF="http://servidor/camino.../fichero">...</A>
2. El correo electrónico. La etiqueta correspondiente es:
<A HREF="mailto:usuario@servidor">...</A>
3. La transferencia de ficheros (servidores FTP). La etiqueta correspondiente es:
<A HREF="ftp://servidor/camino.../fichero">...</A>
 Veamos algunos ejemplos:
EJEMPLO 10
<HTML>
<HEAD>
</HEAD>
<BODY>
Vamos a enlazar las palabras "pincha aquí" con algunos

destinos remotos.<BR>
1.- Con la página web de la UD:<BR>
<A HREF="http://www.deusto.es" target="_blank">pincha

aquí</a><BR>
2.- Con el servidor FTP de la sede de Ginebra de la

OMS:<BR>
<A HREF="ftp://ftp.who.ch/" target="_blank">pincha

aquí</a><BR>
3.- Con mi correo electrónico:<BR>
<A HREF="mailto:airibar@fil.deusto.es">pincha
aquí</a><BR>
</BODY>
</HTML>
Ver resultado
5.2. Los enlaces locales
 La mayor parte de las "páginas web" son, en rigor, una colección de páginas, puesto que la
organización clásica de los sitios web consiste en un conjunto ordenado de documentos
HTML entrelazados y residentes en un mismo ordenador.
 Dentro de un mismo ordenador, los documentos HTML pueden residir en un mismo

directorio o en varios:
1. Cuando todos los documentos residen en el mismo directorio no hay ningún

problema, y la etiqueta será, simplemente: <A HREF="fichero.htm">...</A>.
2. Cuando los ficheros residen en diferentes directorios, hay que facilitar la dirección
completa del fichero, lo que puede hacerse de manera absoluta o relativa:
 Direccionamiento absoluto: se indica la trayectoria completa del archivo

en cuestión:
<A HREF=file:///c:/directorio/subdirectorios/fichero.htm">...</A>
 Direccionamiento relativo: no se indican los nombres de los directorios.
Por ejemplo:
<A HREF=../../..fichero.htm">...</A>
 Aun utilizando un direccionamiento relativo, es necesario indicar los nombres de los

directorios "descendentes". Por ejemplo, en una web ordenada como en la figura
siguiente, un enlace desde un documento situado en el directorio <HTML> a un recurso
situado en el directorio <Imágenes> debería especificarse así:
<A HREF=../../../../Componentes/Imágenes/fichero.htm">...</A>
5.3. Las anclas
 Especialmente cuando el documento es largo, conviene utilizar enlaces que apunten hacia
otro lugar dentro del mismo documento. Estos enlaces se denominan anclas, anclajes o
apuntadores.
 El procedimiento de enlace es doble:
1. En primer lugar, hay que establecer el punto de anclaje en el lugar del documento
que vaya a ser el destino del enlace. Su etiqueta es <A NAME=nombre>...</A>.
2. Después sólo queda enlazar los caracteres deseados con el ancla anterior. Su
etiqueta es <A HREF=#nombre>...</A>.
 Algunas observaciones sobre las anclas:
1. El nombre del ancla es arbitrario, pero lo lógico es que guarde alguna relación con
el destino, especialmente cuando hay muchas en un mismo documento.
2. Aunque la etiqueta del ancla sea pareada, lo normal es que no incluya nada entre
sus dos partes (<A NAME=nombre>...</A>), puesto que lo importante es marcar
el punto de inicio del ancla, no su final.
 Vamos a practicar estas etiquetas creando una nota a pie de página como las utilizadas en
este documento, que implican un doble anclaje:
EJEMPLO 11
<HTML>
<HEAD>
</HEAD>
<BODY>
<P>Al final de este párrafo vamos a colocar una nota a pie

de página, de modo que al pinchar sobre la llamada,
vamos a la nota, y al pinchar sobre el número de nota en
el pie de página, volvemos a la llamada.< A
NAME="llamada_1"></A><A
HREF="#nota1"><SUP>1</SUP></A><BR><P>
Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR> Bla,<BR>

Bla,<BR> Bla,<BR> Bla,<BR> Bla,< BR> Bla,<BR> Bla,<BR>
Bla,<BR> Bla,<BR> Bla,<BR> Bla,
<HR size="0">
<A NAME="nota_1"></A><A
HREF="#llamada_1"><SUP>1</SUP></A><FONT SIZE="-
1">Éste es el texto de la nota. Si pinchamos sobre el
número, volvemos a la llamada.</FONT>
</BODY>
</HTML>
Ver resultado
Hemos presentado el etiquetado básico de los enlaces, su utilización y sus tipos, pero aún no
somos capaces de alterar su formato predefinido. Esto lo veremos en el tercer capítulo de esta
serie, dedicado a Información Complementaria.
inicio
Notas
1
HTML es el acrónimo de HyperText Markup Language. Para redactar este apartado me he
valido en buena medida del trabajo de Luc Van Lancker Aprender el lenguaje Html.
2
El código ASCII (American Standard Code for Information Interchange) es el más extendido de
los muchos sistemas de codificación informática, es decir, maneras de representar las
informaciones (letras, números, etc.) con bits (esto es, ceros y unos).
3
Escribiremos todas las etiquetas con color, como suelen aparecer, por mera convención visual,
en los programas editores de HTML.
4
El Cuaderno de Notas de Windows, por su propia simplicidad, genera código ASCII simple. Los
procesadores de textos más potentes (Word y otros) generan códigos propios, que entorpecen
en este caso su conversión a HTML.
5
Las etiquetas no se ven afectadas por mayúsculas o minúsculas, por lo que da igual escribir
<HTML>, <Html>, <html>, etc.
6
Las etiquetas <FONT SIZE="+1"> y <FONT SIZE="-1"> equivalen respectivamente a las etiquetas
<BIG> y <SMALL>.
7
Equivale a la combinación <Shift>+Intro del procesador de textos Word.
8
Por supuesto, sí hay procedimientos HTML para controlar estas distancias con exactitud, pero
son de mayor nivel y no se presentan en este capítulo.
9
La información relativa a los tamaños suele facilitarse más en términos porcentuales que en
pixeles, porque depende menos de las opciones de configuración de cada navegador. Así por
ejemplo, una raya de 100 pixeles ocupará más en una pantalla configurada a 800 x 600 pixeles
que en otra configurada a 1024 x 768. Sin embargo, en cualquier configuración, una raya
definida por ejemplo con el 75% siempre ocupará lo mismo.
10
Tampoco tiene efectos de sombreado con el valor <HR size="0">.
11
Este sistema de hipertexto ha sido utilizado por los ficheros de ayuda de Windows (y aun antes,
en las últimas versiones del MS-Dos), y hoy en día es un procedimiento habitual en un número
creciente de aplicaciones.
HTML básico - II
Algunos componentes fundamentales
En el primer capítulo hemos aprendido a realizar sencillas páginas web. En este segundo capítulo
presentaremos dos elementos habituales de estos documentos, de una importancia fundamental:
los gráficos y las tablas.
1. Las imágenes de un documento HTML
2. Las tablas de un documento HTML
1. Las imágenes de un documento HTML
Las imágenes están presentes en los documentos HTML de muchas maneras: fotografías, dibujos,
iconos, fondos, etc. Ninguno de estos elementos es imprescindible para una página web, pero
todos son recomendables.
Antes de tratar sobre las cuestiones técnicas, conviene reflexionar acerca de la propia utilización
de los gráficos en los documentos HTML.
1.1. Imágenes: consideraciones previas
 En muchas ocasiones, las imágenes no son otra cosa que el "maquillaje" del documento.
Conviene que nuestras páginas sean bonitas, pero sin olvidar lo verdaderamente
importante, el contenido, que habitualmente no son las imágenes.
 Aunque parezca estar en contradicción con lo anterior, a veces resulta más importante
tener recursos en la edición de imágenes que en la propia edición HTML. Dicho de otra
manera: para conseguir una buena página web, resulta casi imprescindible manejar algún
programa de edición de imágenes (Paint Shop Pro, Photoshop, etc.).
 Para evitar que las imágenes parezcan meros "pegotes para hacer bonito", conviene
integrarlas al máximo, conseguir que posean alguna función dentro del documento. La
solución más obvia (además de no colocar imágenes sin relación 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 pequeña biblioteca de
imágenes 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 botón
derecho del ratón y selección la opción Salvar imagen como.) Por otra parte, la propia red
dispone de miles de imágenes, al alcance de cualquier buscador (Google Images, por
ejemplo)
 Un problema fundamental a la hora de introducir imágenes en un documento HTML es su

"peso", es decir, su tamaño en bites. Cuantas más imágenes haya en un documento web,
mayores y de mayor calidad, más ocuparán, y, por tanto, más tiempo tardará el usuario en
descargarlas de la red. Conviene tener en cuenta lo siguiente:
1. Los formatos de imágenes habituales en la Web son *.GIF y *.JPEG. Utilizar otros
formatos ocupa habitualmente mucho más espacio y, además, resulta
problemático.
2. ¿Cuál de los dos formatos resulta más adecuado? El GIF permite, por su
característico entrelazado, recargar progresivamente una imagen al abrir la
página. Por su parte, el JPEG posee algo más de calidad en el tratamiento de los
tonos (el GIF sólo maneja 256 colores), pero "pesa" más y tarda más en
descargarse. En definitiva, para imágenes 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 página principal una pequeña imagen de baja calidad, a modo de
icono, enlazada con la imagen completa.
1.2. Imágenes: las etiquetas
 La etiqueta básica para insertar una imagen es: <IMG SRC="dirección de la imagen">. De
esta manera, el navegador visualizará la imagen contenida en la dirección especificada.1
 Como puede verse, la imagen no forma parte de un documento HTML: éste sólo indica al
navegador dónde puede descargarla.
 Esta etiqueta básica posee varios atributos, que se muestran en la siguiente tabla:
Atributos Función
Texto alternativo (el que aparece cuando se posa el ratón sobre la

<IMG alt="***">
imagen)
<IMG width="¿?"> Especificación de la altura y la anchura en píxeles

<IMG height="¿?">
<IMG align="top"> Distintas posibilidades de alineación 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

gráfico. Hay que tener en cuenta la posibilidad de que el navegador que visite
nuestra página tenga desactivada la opción de "ver imágenes" (¡o incluso un error
en el enlace por nuestra parte!), en cuyo caso sólo aparecería dicho texto.2 En
condiciones "normales", el texto alternativo posee la función de un pie de foto,
puesto que aparece al posar el cursor sobre la imagen.
2. El tamaño de la imagen puede modificarse, efectivamente, con <IMG width="¿?"

height="¿?">, pero hay que tener en cuenta que los valores que señalemos 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 edición
gráfica (Paint Shop Pro, Photoshop, etc.) .
3. Los ajustes de <IMG align> pueden referise a la línea de texto o al párrafo:
 Una imagen pequeña (como un icono) puede presentarse dentro de una

línea de texto. En este caso, puede alinearse justo sobre la línea del texto
(<IMG align="top">), debajo (<IMG align="bottom">) o en el medio
(<IMG align="middle">).3
 Una imagen puede colocarse dentro de un párrafo, de modo que el texto

se presente a la izquierda (<IMG align="right">) o a la derecha (<IMG
align="left">) de la imagen.4
 Una imagen puede presentarse formando su propio párrafo. 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 imágenes:

1. Para empezar, necesitamos algunas
imágenes. Vamos a utilizar dos: el icono de
"inicio" (el pequeño triángulo azul al final de
cada apartado) de esta misma página, 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 título (que puede
ser, por ejemplo, "Ejercicio 1").
3. Ahora modifica el tamaño de la imagen, para

que sea más pequeña que el original. Para
eso necesitas conocer el tamaño original,
¿verdad? Pues averígualo en el código de la
página original.
4. Ahora quiero que la conviertas exactamente

al triple de su tamaño. Observa que al
aumentar el tamaño se pierde calidad.
5. Coloca el icono de "inicio" junto al texto

"volver arriba". Copia el conjunto tres veces y
colócalo con distintas alineaciones.
6. Enlaza el anagrama de la UD a la página

principal de la UDWeb (ya sabes:
http:///www.deusto.es). Observarás que se
ha añadido un marco a la imagen. ¿Cómo
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 presentación general, un documento HTML puede llevar un fondo

coloreado o una imagen, del tipo que sea.
 La instrucción para el fondo de pantalla se añade 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="dirección">.

 Cuando se utiliza una imagen de fondo, suele tratarse simplemente de algún pequeño
archivo con algún tipo de textura, que se coloca a modo de mosaico, como si fuera un
papel pintado.6
 La utilización de fondos puede llegar a dificultar gravemente la lectura de los caracteres.

Veámoslo con un doble ejemplo de color de fondo e imagen de fondo:
EJEMPLO 1-a EJEMPLO 1-b
<HTML> <HTML>
<HEAD> <HEAD>
</HEAD> </HEAD>
<BODY BGCOLOR="#000088"> <BODY BACKGROUND="g_logo.gif">
Esto tiene un color de fondo. Esto tiene una imagen de fondo.
</BODY> </BODY>
</HTML> </HTML>
Ver resultado Ver resultado
 Para solucionar este problema, existen etiquetas que permiten especificar el color del
texto y de los enlaces:
Etiquetas Función
<BODY TEXT="#¿?"> Determina el color del texto
<BODY LINK="#¿?"> Determina el color del enlace
<BODY VLINK="#¿?"> Determina el color del enlace visitado
<BODY ALINK="#¿?"> Determina el color del 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
imágenes, 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 según 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 verán 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 más potentes que la etiqueta <FONT COLOR>.
 Veamos ahora cómo pueden mejorarse con estas nuevas etiquetas los ejemplo anteriores:
EJEMPLO 2-a EJEMPLO 2-b
<HTML> <HTML>
<HEAD> <HEAD>
</HEAD> </HEAD>
<BODY BGCOLOR="#000088" <BODY BACKGROUND="g_logo.gif"

TEXT="#FFFF00"> TEXT="#FFFF00">
Esto tiene un color de fondo. Esto tiene una imagen de fondo.
</BODY> </BODY>
</HTML> </HTML>
Ver resultado Ver resultado
 Como puede observarse, el Ejemplo 2-b resulta prácticamente imposible de leer con esa
definición de color. Podríamos buscar alguna combinación que destacase más, pero el
verdadero problema de ese documento es que la imagen utilizada como fondo es
inadecuada. La solución consiste –como mínimo– en tratar dicha imagen en un programa
adecuado, para suavizar sus tonos.
inicio
2. Las tablas de un documento HTML
 Las tablas permiten ordenar y alinear los elementos de un documento de una manera
precisa.
 Las tablas son mucho más frecuentes de lo que parece a primera vista, puesto que, en la
mayor parte de los casos, las líneas que las definen permanecen ocultas.
 Las etiquetas fundamentales que definen una tabla son las siguientes:
Etiquetas Función
<TABLE>...</TABLE> Principio y final de tabla
<TR>...</TR> Principio y final de línea

<TD>...</TD> Principio y final de celda
 Con estas etiquetas ya podemos definir una tabla, por ejemplo, de 2x2 (2 líneas, 2
columnas y 4 celdas):
EJEMPLO 3
<HTML>
<HEAD>
</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
título 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 posición del pie con respecto a la tabla por medio de las siguientes
atributos:
Atributos Función
<CAPTION valign="top / bottom"> 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
características generales, salvo el número de filas y columnas.
 La etiqueta <TABLE> posee una serie de atributos que permiten controlar sus
características básicas. Se muestran en la siguiente tabla:
Atributos Función
<width="n / n%"> Anchura de la tabla (en píxeles / en porcentaje)
<height="n / n%"> Altura de la tabla (en píxeles / en porcentaje)
<cellspacing="n"> Espacio (en píxeles) entre las celdas

(o sea, el espesor de las líneas del cuadriculado)
<cellpadding="n"> Espacio (en píxeles) 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 píxeles) de las líneas
<bordercolor="?"> Color de las líneas
<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>
</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 lógico, una tabla puede verse afectada por un considerable número 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 pequeño 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 cómo debes
hacerlo? ¡Excelente! ¿Necesitas repasar todo lo
anterior? Bueno, no pasa nada: es lo normal.
¿Llevas un tiempo intentándolo y no lo

consigues? No te desanimes, pero tal vez
deberías volver a trabajar estos apuntes desde
el principio. De todas maneras, si quieres, aquí
tienes la solución.
2.2. Las propiedades de la celdas
 Cada celda dentro de una tabla puede contener todo tipo de elementos: texto, imágenes,
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 porción de texto: fuentes, tamaños, colores, alineados, etc.
 En el subapartado anterior, hemos presentado las propiedades generales de la tabla.

Vamos a ver ahora cómo controlar las propiedades que afectan a una fila o a una única
celda:
Atributos Función
<width="n / n%"> Anchura de la fila o celda (en píxeles / en porcentaje)
<height="n / n%"> Altura de la fila o celda (en píxeles / en porcentaje)
<border="n"> Grosor (en píxeles) de las líneas
<bordercolor="?"> Color de las líneas
<bgcolor="?"> Color de fondo
<background="imagen"> Imagen de fondo
<align="left / right / center"> Alineado horizonal
<valign="top / middle / bottom"> Alineado vertical
 Los parámetros de esta tabla pueden aplicarse tanto a filas enteras como a una única
celda.
 Un mismo parámetro (el tamaño, 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 especificación en una unidad menor se
impone a la especicación 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 desajustarán 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>
</HEAD>
<BODY>
La siguiente tabla, sin indicaciones de anchura para

las celdas, nace simétrica:
<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> </TR>
</TABLE>
Pero se vuelve asimétrica si introducimos caracteres

desiguales en las distintas celdas:
<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 términos porcentuales
(25% para cada celda), el navegador tomará como
dicho valor la anchura de la celda mayor:
<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, sólo hemos manejado tablas homogéneas, es decir, con un número
constante de filas y columnas. Sin embargo, las tablas suelen adoptar otras muchas
formas.
 Para conseguir una tabla asimétrica hay que ir agrupando las celdas, bien en la fila, bien en
la columna. Las etiquetas para este proceso son las siguientes:
Etiquetas Función
<TD colspan="n"> Fusión de n celdas en la misma fila
<TD rowspan="n"> Fusión de n celdas en la misma columna
 El siguiente ejemplo muestra el etiquetado de un par de tablas asimétricas:
EJEMPLO 6
<HTML>
<HEAD>
<TITLE>Tablas asimétricas/TITLE>
</HEAD>
<BODY>
Primera tabla asimétrica:
<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>

<TD></TD> </TR>

<TD></TD> </TR>
</TABLE>
Segunda tabla simétrica:
<TABLE width="50%" border="1"

cellspacing="0" cellpadding="2">
<TR> <TD rowspan="4"> </TD> </TR>
<TR> <TD></TD> < TD></TD> <TD></TD>

</TR>

</TR>

</TR>
</TABLE>
</BODY>
</HTML>
Ver resultado
 En definitiva, la creación de tablas es poco menos que un "arte", que depende no sólo del
dominio técnico, sino de la imaginación y del sentido del creador. Por ejemplo, puedes ver
aquí un ejemplo algo más trabajado, aunque ciertamente feo. La posibilidades de las
tablas son prácticamente ilimitadas.
 El manejo del etiquetado de las tablas no es defícil pero sí complicado, porque exije una
gran minuciosidad. Aunque utilicemos un editor de HTML

Crear página web HTML básica

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Crear página web HTML básica

Încărcat de

Drepturi de autor:

Formate disponibile

HTML

2. La estructura mínima de un documento HTML

3. El texto básico de un documento HTML

4. Los párrafos de un documento HTML

5. Los enlaces de un documento HTML

 HTML1 es un lenguaje universal, que funciona en cualquier plataforma (Windows,

 Sin embargo, escribir un documento complejo de esta manera exige un conocimiento

4. Es necesario un buen conocimiento de HTML para insertar otros códigos más

2. Esquema mínimo de un documento HTML

 La mayoría de las etiquetas son pareadas, es decir, <...> corresponde al principio de la

1. La cabecera contiene básicamente información destinada al browser (o

2. El cuerpo es el documento que ve el usuario. Su etiqueta (pareada) es <BODY>.

 He introducido una pequeña tabulación a la hora de escribir las etiquetas de cabecera y

EJEMPLO 1: Variantes de escritura

 Al visualizar los resultados del Ejemplo 1, en la barra de título de la ventana

3. El texto básico de un documento HTML

 La etiqueta básica, que controla el tipo de fuente utilizado, es <FONT>.

 Se puede especificar el tipo de letra (es decir, la fuente de caracteres) añadiéndolo a la

 Se puede especificar el color de la fuente con la etiqueta <FONT COLOR="?">...</FONT>.

1. Cada color posee su correspondiente código.

3. Los valores hexadecimales de los tres colores se expresan de la siguiente manera:

5. Todos los colores se expresan mediante combinaciones de estos tres colores

 Se puede especificar el tamaño de la fuente con la etiqueta <FONT SIZE="?">...</FONT>.

 Volvamos a nuestro documento web y practiquemos con las posibilidades de la etiqueta

Esto es texto simple: cada navegador lo visualizará según

<FONT SIZE="1">Este texto es tamaño 1.</FONT>

<FONT SIZE="2">Este texto es tamaño 2.</FONT>

<FONT SIZE="4">Este texto es tamaño 4.</FONT>

<FONT SIZE="+1">Este texto es tamaño +1 (que es lo

<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto

Esto es texto simple: cada navegador lo visualizará según

<FONT SIZE="1">Este texto es tamaño 1.</FONT><BR>

<FONT SIZE="2">Este texto es tamaño 2.</FONT><BR>

<FONT SIZE="4">Este texto es tamaño 4.</FONT><BR>

<FONT SIZE="+1">Este texto es tamaño +1 (que es lo

<FONT FACE="Arial" SIZE="5" COLOR="FFFF00">Este texto

3.2. Etiquetas de formato de caracteres

 Hay que realizar algunos comentarios sobre las etiquetas precedentes:

3. Conviene tener cuidado a la hora de manejar el subrayado, puesto que éste se

3.3. Otras etiquetas de caracteres

1. La etiqueta <PRE>...</PRE> indica que el texto afectado está preformateado, de

2. La etiqueta <BLINK>...</BLINK> indica texto parpadeante. Sólo funciona con

3. La etiqueta <S>...</S> genera texto tachado.

4. La etiqueta <TT>...</TT> genera texto similar al de una máquina de escribir

5. La etiqueta <BIG>...</BIG> aumenta el tamaño de letra (equivale a <FONT

6. La etiqueta <SMALL>...</SMALL> disminuye el tamaño de letra (equivale a <FONT

Si no se te ocurre nada, te propongo que

(Por cierto: las fuentes que he utilizado son Arial

4. Los párrafos de un documento HTML

En el apartado anterior hemos aprendido a controlar la apariencia de los caracteres. (Recuerda, de

4.1. Los párrafos y su alineamiento

 La etiqueta <BR> inserta un salto de línea, pero no un salto de párrafo.7 En cambio, la

 Un párrafo puede alinearse introduciendo los siguientes atributos en la etiqueta habitual:

<P align="left">...</P> Párrafo alineado a la izquierda

<P align="center">...</P> Párrafo centrado

<P align="right">...</P> Párrafo alienado a la derecha

<P align="justify">...</P> Párrafo justificado

<DIV align="left">...</DIV> Línea(s) alineada(s) a la izquierda

<DIV align="center">...</DIV> Línea(s) centrada(s)

<DIV align="right">...</DIV> Línea(s) alineada(s) a la derecha

<DIV align="justify">...</DIV> Línea(s) alineada(s) justificadas

 En definitiva, disponemos de varias etiquetas similares para la creación y la alineación de

<P align="left">Este párrafo está alineado a la izquierda.