Está en la página 1de 36

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>
<TITLE>Ejemplo 3</TITLE>
</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="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 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>
<TITLE>Ejemplo 4</TITLE>
</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="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 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>
<TITLE>Ejemplo 5</TITLE>
</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>
<TITLE>Ejemplo 6</TITLE>
</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>
<TITLE>Ejemplo 7</TITLE>
</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>
<TITLE>Ejemplo 8</TITLE>
</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>
<TITLE>Ejemplo 9</TITLE>
</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>
<TITLE>Ejemplo 10</TITLE>
</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/fiche
ro.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>
<TITLE>Ejemplo 11</TITLE>
</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,<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,<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.

inicio
Alexander Iribar >> Edición digital
Comentarios: alex.iribar@deusto.es

Dante dos

selecciona la sección deseada y aprieta el botón...


Ahora, procederemos a crear una página web de ejemplo y veremos cómo
puede hacerse simplemente con ciertos conocimientos básicos del lenguaje
HTML. Una página web es una página normal con informaciones en cuyo texto
intercalamos códigos o etiquetas (tags en inglés) que determinan la forma en
que es mostrada en Internet y los enlaces con otras páginas en la red.
Afortunadamente, las páginas web, como simples archivos de texto que son,
funcionan también sin necesidad de Internet y podemos hacer el ejercicio a
continuación sin necesidad de conectarnos a la red o colocar nuestros archivos
en servidor alguno.

Esta facilidad es útil también para presentar nuestros proyectos, propuestas o


muestras de página web antes de subirlas a Internet, o en lugares sin acceso a la
red. Tan sólo necesitamos copiar nuestras páginas webs y los archivos
adicionales usados (gráficos, fotos, etc.) en nuestra computadora.

El Hypertext MarkUp Language (HTML) es el lenguaje para la creación de


páginas con enlaces y referencias insertando marcas o códigos en el texto
normal o información de las mismas. Esos enlaces y referencias en el texto que
nos llevan a otras páginas web se conocen como hipertexto.

Nota: La página que aquí crearemos sólo será visible en nuestra computadora y si queremos
mostrarla al mundo a través de la red necesitamos de un lugar para alojarla en Internet como se
explica en la sección anterior.

¿Qué se necesita para


realizar el ejercicio?

Lo primero que debemos aclarar aquí es que el ejemplo siguiente


mostrará cómo crear una página web sin ninguna herramienta auxiliar,
trabajando directamente con el "código fuente" de la página. Existen
numerosos programas, tal como se mencionó antes, que nos permiten
crear páginas webs sin tener que ver todos los códigos incluidos y que
son tan simples de usar como un procesador de palabras. Esos
programas van desde sencillos auxiliares, hasta completos paquetes de
diseño y es recomendable obtener uno de acuerdo con nuestras
habilidades en la computadora y las expectactivas para crear nuestras
páginas web. Incluso las versiones recientes de los programas
procesadores de palabras incluyen opciones que nos permiten crear
páginas webs a partir de nuestros documentos (ver opción Save as
HTML o Guardar como HTML en Microsoft Word por ejemplo).

De todos modos, el ejemplo a continuación es un interesante ejercicio que


le permitirá conocer y entender un poco mejor la naturaleza de las
páginas web. Esto es importante además porque lo que los programas de
diseño de páginas web hacen en todo caso es generar un código similar
al de nuestro ejemplo.

Para el ejercicio, necesitaremos apenas:

Un editor de texto.
No importa cual, basta con que grabe los archivos como texto puro
o ASCII . Los usuarios de Windows pueden usar el Notepad
incluido en el sistema operativo. Si lo desea, puede usar también su
procesador de palabras favorito, pero tendrá que asegurarse de
grabar los archivos como "archivos de texto" o "archivos ASCII" ("text
files" o "ASCII files" en inglés).
Un programa navegador.
Para poder ver las páginas creadas. Basta con el mismo programa
que usamos para navegar por Internet, ya sea Netscape, Internet
Explorer o cualquier otro.

Etiquetas que
se abren y se cierran

Todas las instrucciones o códigos que colocamos en las páginas HTML se


insertan en el texto enmarcadas por los símbolos < y >. Por ejemplo, el
código o etiqueta para indicar letras itálicas o cursivas es <I>. Buena
parte de estos códigos tienen su correspondiente etiqueta para cancelar o
cerrar el comando, usándose generalmente el mismo código, precedido
de un "/". Así, por ejemplo para mostrar la frase "la potenciación de la
mujer debe ser parte integral de los programas de desarrollo" con
potenciación de la mujer en cursivas, escribiríamos "la <i>potenciación
de la mujer</i> debe ser parte integral de los programas de desarrollo".

El uso de mayúsculas o minúsculas no tiene relevancia alguna al usar los


códigos HTML.

Estructura de una
página HTML

Toda página HTML inicia con la etiqueta <html>, indicando así a los
programas navegadores que no se trata de un simple archivo texto sino
de una página web y que debe ser interpretada como tal.
Correspondientemente, la última etiqueta o código insertado en una
página web debe ser </html>.
Entre ambas etiquetas (o tags en inglés) se deben encontrar las dos áreas
principales que componen la página:

La Cabecera (head).
Demarcada por las etiquetas <head> y </head> (head significa cabeza
en inglés), contiene información sobre el título de la página, su
contenido, su autor, temas tratados, etc.
El cuerpo del documento (body).
Es aquí donde colocamos la información que será desplegada en
nuestra página web, delimitada por las
etiquetas <body> y </body> (body significa cuerpo en inglés).

Veamos entonces un ejemplo simple del texto que conforma una página
web típica:

<html> Fig. 19. Resultado del ejercicio, visualizado en Internet Explorer.

<head>

<title>
Mi Página de
prueba
</title>

</head>

<body>
<p>
Bienvenido a
mi primera
<i>página
web</i>.
<p>
Espero se sientan a gusto y disfruten su visita.
</body>

</html>

En el ejemplo anterior se usaron diferentes espaciados para ilustrar las


secciones en las páginas, pero ni las líneas ni los espacios en blanco o
sangrías, tienen efecto alguno en el aspecto final de la página web. Como
vemos, la etiqueta <title> sirve para definir el título de la página, el cual es
desplegado en la barra superior del navegador cuando abrimos la
página. También es usada para catalogar y archivar nuestra página en los
directorios y herramientas de búsqueda en Internet.

Dentro del cuerpo (body), encontramos las etiquetas <p>, que sirven para
señalar el inicio de cada párrafo y dejar un poco de espacio vertical en su
lugar.
Escriba las líneas del ejemplo en un editor de texto y grábelas en un
archivo llamado practica.htm en formato ASCII o de texto (aunque el
archivo puede contener acentos, el nombre no debe llevarlos, así que
recuerde no acentuar la primera "a" en practica.htm). Luego vea ese
archivo en su navegador favorito escribiendo el nombre completo del
archivo y el nombre o directorio donde se encuentra en la barra de
direcciones (donde típicamente
aparece http://www.ladireccion.com/delsitio/quevisitamos.html). O si lo desea
use la opción de Abrir en el menú File y localice el archivo en su disco
duro. Al ver dicho archivo en su navegador, se le mostrará el texto de la
página, pero sin las etiquetas usadas.

Dar colores a una


página HTML

Si deseamos introducir un poco de color en la página, podemos hacerlo


agregando las instrucciones correspondientes a la etiqueta <body> en la
forma siguiente: <body bgcolor=blue text=yellow>. Esto hará que el color de
fondo de la página (background color o bgcolor en inglés) sea azul (blue en
inglés) y el color del texto sea amarillo (yellow en inglés). La etiqueta
body de clausura sigue siendo simplemente </body> sin importar las
opciones incluidas en la etiqueta body inicial.

También podemos colorear ciertas frases o palabras por separado.


Usando la etiqueta <font color=red>, por ejemplo hacemos todo el texto que
le siga rojo (font es tipo de letra y red es rojo en inglés), hasta que
cancelemos la instrucción con una etiqueta </font>.

En ambos casos mencionados, podemos experimentar con otros nombres


de colores en inglés como white, black, gray, maroon, yellow, lime, green,
navy, aqua, olive, purple, etc.

Alineación del texto

Para escribir un texto centrado o cuyas líneas estén alineadas con el


margen derecho de la página, incluimos la opción deseada en la
etiqueta <p>, de forma tal que <p align=center> produce texto centrado y <p
align=right> produce texto alineado con el margen derecho de la pantalla.
Posteriormente se agregó otra opción, la de <p align=justify>, que produce
un texto espaciado de forma tal que tanto el inicio como el final de cada
línea terminan en el margen correspondiente de la página.

Resaltando
los títulos

El HTML nos ofrece seis etiquetas distintas para señalar rápidamente


seis niveles jerárquicos de títulos, cada uno con un tamaño distinto de
letras y espaciado vertical antes y después del título. <h1> es la etiqueta
para indicar un título principal o grande y se cancela con </h1>. Así, para
insertar un texto o título grande en la página escribimos <h1> y este texto
a continuación aparecería grande hasta que insertemos </h1>.

Al igual que con la etiqueta de párrafos <p>, podemos incluir dentro de


ella las opciones align=center y align=right para centrar el título o alinear sus
líneas al margen derecho.

Además de h1 podemos usar en la misma forma h2, h3, h4, h5 y h6. Cada
una de estas opciones produce títulos de menor tamaño y jerarquía
que h1.

Líneas separadoras

Conjuntamente con los títulos, el HTML nos brinda una útil etiqueta que
nos permite separar visualmente el contenido y los elementos de nuestra
página en diferentes secciones. Usando la etiqueta <hr> introducimos una
simple línea separadora que atraviesa la pantalla horizontalmente.

Saltos de línea y
párrafos

Ya mencionamos el uso de la etiqueta <p> para indicar el inicio de un


párrafo. Esto es necesario porque los navegadores, al leer nuestras
páginas escritas en HTML, ignoran los saltos de línea (o retornos de
carro como se les llama en mecanografía) y los espacios en blanco que
dejamos en el texto. Si deseamos que el texto continúe en la línea
siguiente, pero sin el espacio vertical que deja la etiqueta <p>, entonces
debemos usar la etiqueta <br> (del inglés break o rotura de línea).

Tamaño
del texto

En ocasiones deseamos un tamaño menor o mayor para una parte del


texto. Sabemos que esto se puede hacer con las etiquetas <h1>, <h2>, etc.,
pero dichas etiquetas inician una nueva línea antes y después del texto
que abarcan y, además, dejan un espacio vertical. Incluyendo la
opción size=-1 dentro de la etiqueta <font> podemos hacer que el texto
hasta la próxima etiqueta </font> aparezca con un tamaño menor al
normal. Si queremos un texto aún más chico, podemos usar size=-2. Del
mismo modo, si lo que deseamos es hacer el texto mayor, podemos
usar size=+1 ó size=+2 para lograr el efecto deseado. Experimente con
diversos tamaños y observe qué ocurre.

La opción size= puede ser usada en combinación con la que vimos antes
de color= sin problemas y sin importar el orden en que las coloquemos.
Así da igual escribir <font color=red size=+1> que <font size=+1 color=red>.

Veamos un nuevo ejemplo ahora con las cosas que hemos aprendido.

<html>

<head>
<title>
INSTRAW en la red
</title>
</head>

<body bgcolor=navy text=white>

<h1 align=center>
<font color=yellow> Instituto Internacional de Investigaciones y Capacitación
para la Promoción de la Mujer<br>
- INSTRAW -
</font>
</h1>

<hr>

<p align=center>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un
mejor servicio y una vía directa alternativa de comunicación e información de
apoyo para la <i>potenciación de la mujer</i>.

<hr>

<h4>
Cómo contactarnos
</h4>

<p align=right>
<font color=lime size=-1>
César Nicolás Penson 102-A<br>
Santo Domingo, República Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e: instraw.hq.sd@codetel.net.do
</font>

</body>
</html>

Insertar listas
en el texto

Cuando preparamos material en línea, frecuentemente preparamos listas


de artículos u opciones al resumir los textos, en la forma:

Los objetivos del INSTRAW son:

Estimular y asistir el avance de la mujer, por medio de la investigación, la


capacitación y la recolección y diseminación de información.
Hacer más visible la contribución de la mujer al desarrollo.
Apoyar los esfuerzos de organizaciones inter-gubernamentales, gubernamentales y no
gubernamentales para estos fines.

En HTML podemos crear fácilmente dichas listas y sangrar cada uno de


sus componentes usando las etiquetas <ul>, <ol> y <li>. Con <ul> (inciales
de un-ordered list o lista no ordenada en inglés) indicamos que vamos a
introducir una lista no numerada como en el ejemplo mostrado arriba.
Luego, usamos <li> delante de cada uno de los elementos de la lista y
finalmente cerramos o indicamos el final de la lista con </ul>.

El ejemplo anterior, se escribiría así en HTML:

<p>
Los objetivos del INSTRAW son:
<ul>
<li>
Estimular y asistir el avance de la mujer, por medio de la investigación, la
capacitación y la recolección y diseminación de información.
<li>
Hacer más visible la contribución de la mujer al desarrollo.
<li>
Apoyar los esfuerzos de organizaciones inter-gubernamentales,
gubernamentales y no gubernamentales para estos fines.
</ul>

En caso de que deseemos que cada opción sea numerada


automáticamente, usamos <ol> (iniciales de ordered list o lista ordenada en
inglés) con su correspondiente </ol> para abrir y cerrar la lista y cada uno
de sus elementos será numerado automáticamente como 1., 2., 3., etc. Si
deseamos que la numeración se haga en forma alfabética (a., b., c., etc.)
en vez de numérica, simplemente iniciamos la lista entonces con la
etiqueta <ol type=a>.

Insertar gráficos
en nuestras páginas

Para colocar imágenes, fotos, ilustraciones o cualquier tipo de gráficos en


nuestras páginas HTML, debemos usar formatos gráficos estándares que
puedan ser vistos por la mayoría de los usuarios en Internet. Los dos
formatos más comunes y que son mostrados sin problemas por
prácticamente por todos los navegadores gráficos en cualquier
plataforma son el gif (Compuserve Graphics Interchange Format) y
el jpeg (Joint Photographic Experts Group). El formato gif se usa
comúnmente para gráficos e ilustraciones que requieren menos de 256
colores (éste es el límite de colores que muestra), mientras que el
formato JPEG es la opción de preferencia para fotografías e imágenes
coloridas porque permite hasta 16 millones de colores y comprime el
tamaño del archivo, permitiendo que se puede mostrar más rápido en
nuestras pantallas.
Asegúrese de tener su gráfico en uno de estos dos formatos, antes de
intentar colocarlo en una página web. Si por el contrario estuviera en
otro formato, use un programa gráfico para convertirlo a gif o jpeg. La
mayoría de los programas gráficos le permiten grabar sus imágenes e
ilustraciones en estos formatos.

Insertar una imagen en su página web es simple una vez que la tenemos
en uno de estos formatos. Si nuestro gráfico se llama logo.gif entonces
basta con usar la etiqueta <img src=logo.gif>. Si deseamos que la imagen
aparezca a un lado de la página y el texto corra a su alrededor, entonces
haríamos <img src=logo.gif align=left> para colocarla a la izquierda o <img
src=logo.gif align=right> para colocarla a la derecha.

Si queremos que las imágenes muestren un texto explicativo o


alternativo en pantalla cuando el visitante pasa el mouse por encima de
ellas, podemos indicarlo incluyendo la opción alt dentro de la etiqueta en
la forma siguiente <img src=logo.gif align=left alt="texto descriptivo">.

Introducir enlaces
con otras páginas

Desde el inicio de esta guía hemos señalado repetidamente la


importancia de los enlaces en las páginas webs. Además de permitirnos
hacer referencia a otras páginas en Internet, los enlaces nos permiten
segmentar nuestra propia información en diferentes páginas conectadas
entre sí para hacer más ágil y organizada la presentación a nuestros
visitantes.

Si, por ejemplo, deseamos incluir un enlace para la página de las


Naciones Unidas en nuestra página, escribiríamos <a
href=http://www.un.org> Seleccione aquí para visitar las Naciones
Unidas</a>. Fíjese que la etiqueta inicial es <a href=…> y que se cierra con
un simple </a>.

El texto que queda entre las etiquetas <a href=…> y </a> aparecerá
subrayado en la mayoría de los navegadores para indicar que es un
enlace de hipertexto.

Además de texto, podemos incluir imágenes como enlaces entre las


etiquetas y así hacer más vistosas nuestras páginas, por ejemplo <a
href=principal.html><img src=flechita.gif alt="seleccione aquí para volver a la página
principal"></a>. En este caso, la imagen flechita.gif aparecerá con un borde a
su alrededor y si la seleccionamos con el mouse, nos llevará al
archivo principal.html. Si por razones estéticas no deseamos que se
muestre el borde alrededor de la imagen, basta con
escribir border=0 dentro de la etiqueta img así: <img src=flechita.gif
alt="seleccione aquí para volver a la página principal" border=0>.

Si deseamos que las personas puedan escribirnos directamente a nuestro


correo electrónico, podemos incluir un enlace especial usando el
protocolo mailto en nuestra página.

En el caso de Instraw, sería algo así: <a


href=mailto:instraw.hq.sd@codetel.net.do>Seleccione aquí para enviarnos un mensaje
de correo electrónico</a>. Cuando el visitante, seleccione con el mouse la
opción anterior, se le abrirá una ventana o su programa de correo
electrónico favorito (depende de cómo el visitante tenga configurada su
computadora), desde la cual podrá enviarnos un mensaje de correo por
la red.

Volvamos a nuestro ejemplo anterior y pongamos en práctica lo que


hemos visto en las últimas páginas. Si desea ver el resultado de esta
página en Internet, la hemos colocado en línea para usted
en http://www.civila.com/instraw/ejemplo. Compare la ilustración debajo y lo
que ve en su pantalla, con el texto a continuación que lo define.

<html>
<head>
<title>
Welcome to INSTRAW </title>
</head>
<body bgcolor=navy text=white link=yellow vlink=lime>
<a href=http://www.un.org/instraw>
<img src=http://www.civila.com/instraw/graficos/logos/instraw-01.gif align=left
alt="seleccione aquí para visitar la página oficial de Instraw" border=0>
</a>
<a href=http://www.un.org/spanish>
<img src=http://www.civila.com/instraw/graficos/logos/onu-01.gif align=right
alt="seleccione aquí para visitar la página oficial de las Naciones Unidas en
español" border=0>
</a>
<h2 align=center>
<font color=yellow>
Instituto Internacional de Investigaciones y Capacitación para la Promoción de
la Mujer<br>
- INSTRAW -
</font>
</h2>
<p>
Bienvenidos a nuestras oficinas virtuales, donde esperamos brindarles un
mejor servicio y una vía directa alternativa de comunicación e información de
apoyo para la <i>potenciación de la mujer</i>.
<hr>
<img src=http://www.civila.com/instraw/graficos/misc/mujeres-01.gif align=left>
<ul>
<li>
<a href=http://www.civila.com/instraw/ejemplo/que-es.html>
¿Qué es Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/como.html>
¿Cómo trabaja Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/recursos.html>
¿De dónde vienen los recursos financieros de Instraw?
</a>
<li>
<a href=http://www.civila.com/instraw/ejemplo/donde.html>
¿Dónde está Instraw?
</a>
</ul>
<hr>
<p align=right>
<a href=http://www.un.org/instraw>
<img src=http://www.civila.com/instraw/graficos/logos/instraw-02.gif align=right
alt="seleccione aquí para visitar la página oficial de Instraw" border=0>
</a>
<font color=lime size=-1>
César Nicolás Penson 102-A<br>
Santo Domingo, República Dominicana<br>
(809)685-211 - fax (809)685-2117<br>
correo-e:
<mailto:instraw.hq.sd@codetel.net.do>instraw.hq.sd@codetel.net.do</a>
</font>
</body>
</html>

Fig. 21. Resultado final del ejercicio completo


visualizado en el programa navegador.

Trucos y consejos adicionales


al construir sus páginas web

A continuación incluimos una serie de instrucciones avanzadas que le


ayudarán a mejorar sus páginas y darlas a conocer una vez que tenga
cierta experiencia y conocimientos al construirlas. Si las indicaciones
debajo le parecen complicadas, simplemente ignórelas por ahora y
vuelva a consultarlas cuando tenga un poco más de experiencia o páselas
a alguien que sí pueda tomar provecho de ellas.
Los números de los colores Color Código
Color
Hex. texto
Si lo deseamos, podemos indicar Negro #000000 Black
libremente combinaciones de Marrón #800000 Maroon
rojo, verde y azul para una mayor Verde
variedad de colores en nuestra Oscuro
#008000 Green
página. En vez de indicar un Verde Oliva #808000 Olive
nombre en el atributo color, Azul Marino #000080 Navy
indicamos un símbolo Morado #800080 Purple
numérico (#) y el código de 6
Azul Pálido #008080 Teal
números y letras,
Gris #808080 Gray
correspondientes a tres pares
Plata #C0C0C0 Silver
hexadecimales que representan la
Rojo #FF0000 Red
cantidad de cada color a usar.
Cada par de dígitos puede tener Verde Claro #00FF00 Lime
un valor desde 00 (0%) hasta FF Amarillo #FFFF00 Yellow
(100%). Así, el valor del negro, Azul #0000FF Blue
ausencia de todo color, Lila #FF00FF Fuchsia
es #000000, mientras que el Azul Claro #00FFFF Aqua
blanco, todos los colores al Blanco #FFFFFF White
mismo tiempo es #FFFFFF.

Las primeras dos posiciones corresponden al rojo, las siguientes dos al


verde y las últimas dos al azul. Así, el rojo puro es #FF0000, el verde
es #00FF00 y el azul es #0000FF.

Podemos usar variantes de los colores, como vino (50% rojo o #800000),
verde oscuro (50% verde o #008000), azul marino (50% azul o #000080) e
incluso hacer combinaciones de los mismos, como amarillo (100% rojo y
100% verde o #FFFF00) y morado (50% rojo y 50% azul o #800080).

Ahora bien, no es cosa de complicarnos mucho con esos números,


recuerde que para los principales colores podemos escribir su nombre en
inglés sin necesidad de usar códigos hexadecimales. También las
herramientas para crear páginas webs nos asisten en esto, mostrándonos
comúnmente una amplia paleta de colores en la cual seleccionamos el
color deseado (o creamos uno nuevo combinando) y el programa inserta
el código correspondiente en el texto.

Colocar música de fondo


en sus páginas

Si quiere que al mostrar su página tenga una música de fondo, la opción


más común es cargar un archivo midi o de música instrumental digital,
ya que los mismos típicamente no son muy grandes (desde unos 10k
hasta 80k la mayoría) y pueden ofrecer una agradable melodía de fondo
sin perturbar la atención del visitante.
Hasta hace poco Netscape e Internet Explorer manejaban la música de
fondo de forma distinta, por lo que es recomendable usar un pequeño
código en Javascript para colocarla correctamente en nuestras páginas.
Copie las líneas debajo exactamente (ya que en Javascript la separación
de líneas cuenta) y sustituya por el nombre de su archivo de música
donde se indica:

<SCRIPT LANGUAGE="JavaScript">';
<!--
var BrowserName=navigator.appName
var BrowserVersion=navigator.appVersion.substring(0,1)
if (BrowserName == "Microsoft Internet Explorer" && BrowserVersion < 4)
// para versiones de IExplorer anteriores a la 4.0
document.write("<BGSOUND SRC='tuarchivo.mid'>")
else
// para Netscape e IExplorer 4.0
document.write("<EMBED SRC='tuarchivo.mid' WIDTH=145 HEIGHT=60
AUTOSTART=true></EMBED>")
// -->
</SCRIPT>

Aquí, el bgsound src= es usado cuando el visitante tiene una versión del
Internet Explorer anterior a la 4, mientras que el embed src= es usado para
el Internet Explorer 4 y todas las versiones de Netscape.

Incluir un canal de chat


en su página

Si desea hacer su página interactiva con sus visitantes, puede colocar un


canal de conversaciones con java en la misma e incluso canales existentes
en la red del Microsoft Chat (conocido por muchos como el Comic Chat),
usando los códigos debajo:

<applet code=MSChat archive=mschat.jar codebase=http://irc.msn.com/Java


width=100% height=92%>
<param name=cabbase value=mschat.cab>
<param name=port value=6667>
<param name=room value=Nombre_del_Canal>
<param name=autodisconnect value=true>
</applet>

Nota: Nombre_del_Canal es el nombre de la sala en los servidores de Microsoft


Chat, donde será visible a todos sus usuarios, inclusive a aquellos que no estén
en su página. Esto le permite acceder a canales populares ya establecidos en la
red.

Una muestra de este chat es el que hemos colocado aquí como


complemento a la guía en www.civila.com/instraw/chat.

Otra alternativa es crear una sala de conversaciones independiente


usando los servicios gratuitos o comerciales de ParaChat, siguiendo las
instrucciones en www.parachat.com.

Dar a conocer
sus páginas

Si desea que su página aparezca en los principales directorios latinos, use


uno de los dos servicios listados para registrarse semi-automáticamente
en más de 100 herramientas y directorios de búsqueda:

Atajos - Autoregístralo
http://www.xyz.com.mx/atajos/autoregistralo.html

Dejar Huella
http://web.jet.es/lp/huella/index.html

Pero antes de registrar su página en los directorios, asegúrese de haberla


preparado correctamente para ser encontrada por las personas que
buscan la información sobre la que trata siguiendo las instrucciones en la
sección siguiente.

Para ser encontrado en los


directorios de búsqueda

Con miles y hasta millones de páginas registradas, se hace cada vez más
difícil que cuando una persona busca información sobre un tema en una
herramienta de búsqueda o directorio, aparezca nuestra página entre las
primeras que son listadas.

Para garantizar que nuestra página sea identificada y clasificada


correctamente en los directorios y herramientas de búsqueda debemos
incluir los siguientes tags HTML en su cabecera o seccion <head>, donde
nos identificamos como autores e indicamos un título, una descripción y
los temas tratados o las palabras claves para ser usadas en su
identificación.

Puede copiar los tags debajo y llevarlos a su página HTML, sustituyendo


con sus propias informaciones los datos correspondientes en el ejemplo.
Al hacerlo, asegúrese de no duplicar la sección <head> y de que ésta sólo
aparezca una vez en su página.

<HEAD>
<TITLE>
Escribimos aquí el título de la página
</TITLE>
<META NAME=author CONTENT="Su nombre o el de su institución">
<META NAME=keywords CONTENT="Topico 1, Topico 2, Topico 3, Topico 4,
etc.">
<META NAME=description CONTENT="Breve descripción en una frase de la
pagina">
</HEAD>
Si le parece complicado escribir esos tags, puede siempre visitar la
siguiente página, responder un formulario y recibir en su correo-e los
tags preparados para incluir en su página:

Preparar huella
http://web.jet.es/lp/huella/generadormetas.html

Una vez preparada correctamente nuestra página, podemos proceder a


registrarla en los principales directorios de búsqueda con los servicios
descritos en la sección anterior.

Obtener estadísticas detalladas


sobre nuestras visitas

Si contratamos servicios comerciales profesionales para colocar nuestras


páginas web, es probable que incluyan un reporte periódico y detallado
sobre las visitas que recibimos. Pero si este servicio no es incluido o si
alojamos las páginas en un servidor gratuito y deseamos conocer más
sobre quiénes nos visitan (incluyendo su país de origen y de qué página
vienen), podemos usar los servicios gratuitos de Nedstat Básico,
suscribiéndonos en su página web:
Nedstat España
http://es.nedstat.net

Dónde obtener elementos gráficos


para nuestras páginas

En Internet encontramos numerosos lugares que ofrecen imágenes,


íconos, fondos e incluso sonidos que podemos usar e incluir en nuestras
páginas web sin costo alguno.
Desktop Publishing: Cuenta con más de 5,000 páginas que
incluyen elementos gráficos gratis, guías explicativas, trucos,
enlaces, tienda de libros y programas, enlaces, revistas en línea y
mucho más, orientados a la producción electrónica de material
informativo, tanto páginas de Internet como impresos (brochures,
etc.)
http://www.desktoppublishing.com

Microsoft Gallery: Aquí podemos obtener gratis íconos, botones,


líneas separadoras, fondos, sonidos e incluso porciones de código
avanzado.
http://www.microsoft.com/gallery

Incluir efectos especiales y


aplicaciones de Java

Si deseamos agregar dinamismo y atractivo a nuestras páginas, podemos


usar aplicaciones de Java sin tener que saber programar ni
preocuparnos mucho por el complicado código usado para crearlas. En
la boutique de Java encontramos más de 140 aplicaciones de Java o Java
applets que incluyen efectos de sonido y visuales, aplicaciones
educativas y mucho más:
Java Boutique
http://mexico.internet.com/java/javaboutique.htm

Incluir formularios y aplicaciones


avanzadas en nuestras páginas

Existe un potencial inmenso para lo que podemos hacer con la


información que nos proporciona un visitante al llenar un formulario,
desde incluirlo en un directorio de personas o crear un foro interactivo
hasta actualizar un calendario de actividades e incluso mandar tarjetas
postales o mensajes de saludo. Para esto es necesario un poco de
programación, o al menos obtener el código de aplicaciones ya escritas, y
tener un directorio con permiso para ejecutar programas en nuestro
servidor (típicamente conocido como cgi-bin).
The CGI Resource Index: Incluye más de 1,000 aplicaciones listas
para su uso.
http://www.cgi-resources.com

FreeCode: Incluye más de 400 aplicaciones y herramientas que


podemos usar.
http://www.freecode.com

Kira's Web Toolbox: Incluye un completo tutor sobre


programación CGI. Sólo para las dispuestas a introducirse en el
aspecto técnico de las cosas.
http://lightsphere.com/dev/class

Obtener programas en línea

Si aún no encuentra lo que busca o necesita un programa para sus


necesidades específicas, tanto en línea como en el trabajo normal,
consulte los completos directorios de programas que podemos copiar e
instalar en nuestras computadoras por Internet:
ProgramasNet: Cientos de programas e instrucciones en español.
http://www.programasnet.com

Download: Miles de programas en todas las categorías


imaginables.
http://www.download.com
ASCII, siglas de American Standar Code for Information Interchange o Código Americano
Estándar para el Intercambio de Información. En general se refiere a textos compuestos
exclusivamente por letras y símbolos del alfabeto occidental con unos cuantos caracteres no
visibles reservados para indicar saltos de línea, fin de documento, etc.

Si está usando Microsoft Word for Windows, no use la opción Save as HTML. Grábe su
archivo en el formato "text-only".

Para una lista completa de las opciones de colores y cómo indicar nuestra propia selección
de colores libremente, refiérase a la sección correspondiente "Los números de los colores" más
adelante en "Trucos y consejos adicionales al construir su página web".

Java es un lenguajes de programación diseñado especialmente para crear aplicaciones que


sean incluidas en las páginas de Internet. Permiten incluir animaciones y aplicaciones
(conocidas como "Java applets") en las cuales se interactúa con la usuaria (el visitante hace
click en un lugar y la aplicación responde de inmediato, o entra un valor y la aplicación le
retorna una respuesta, etc.).
Presentación: [ Bienvenida ] [ Naturaleza de la guía ]
[ La red y la mujer ] [ Internet y la comunicación
Introducción:
electrónica ]
Navegando: [ La telaraña mundial ] [ Gopher ] [ Telnet ]
[ Correo-e ] [ Listas de correo ] [ Grupos de discusión ]
Comunicándose:
[ Chat y teleconferencia ]
[ Un día en la vida de Nancy ] [ Nancy en acción ]
Ejemplos:
[ Casos de la vida real ]
[ Crear nuestra propia página ] [ Ejercicio Práctico ]
Creando Páginas
[ Asistente para generar código HTML ]

Recursos sobre la
[ Buscar ] [ Insertar ] [ Activar ] [ Borrar ]
Mujer
[ Obtener una copia de esta guía ]
Referencia: [ Preguntas y respuestas ] [ Glosario ]
[ Formulario de evaluación ]