Páginas WEB

19 de enero de 2013
Índice
1. Primera página WEB 3
1.1. Introducción . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2. Metodología . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3. Alternativas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4. Servidores y direcciones URL . . . . . . . . . . . . . . . . . . . . . 3
1.5. ¿Qué es una página web? . . . . . . . . . . . . . . . . . . . . . . . 4
1.6. Un sitio web . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

2. HTML básico 6
2.1. Etiquetas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
2.2. Estructura básica de la página . . . . . . . . . . . . . . . . . . . . 7
2.3. Estructura del texto . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.4. Imágenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.5. Enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.6. Divisiones o capas . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

3. Aspecto de la página. Estilos básicos (I) 15

3.1. Estilos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3.2. Formato del texto . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.1. Color . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.2. Fuente . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.2.3. Tamaño . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2.4. Inclinación . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2.5. Grosor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19
3.2.6. Decoración . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.3. Bordes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
3.4. Márgenes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
3.5. Fondo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
3.6. Cómo declarar un estilo . . . . . . . . . . . . . . . . . . . . . . . . 23
3.7. Dónde declarar un estilo . . . . . . . . . . . . . . . . . . . . . . . . 24
3.8. Orden de aplicación de los estilos CSS . . . . . . . . . . . . . . . . 25

4. Preparación de un sitio web 27

4.1. ¿Qué es un sitio web? . . . . . . . . . . . . . . . . . . . . . . . . . 27
4.2. La temática del sitio . . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.3. Organizar los archivos . . . . . . . . . . . . . . . . . . . . . . . . . 28
4.4. Navegación . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
4.5. Estructura del menú . . . . . . . . . . . . . . . . . . . . . . . . . . 31
4.6. Estructura de la página . . . . . . . . . . . . . . . . . . . . . . . . 31

5. Publicación 32
5.1. Servidores . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33
5.1.1. Servidores gratuitos . . . . . . . . . . . . . . . . . . . . . . 33
5.1.2. Servidores de pago . . . . . . . . . . . . . . . . . . . . . . . 33
5.2. Dominios de Internet . . . . . . . . . . . . . . . . . . . . . . . . . . 34
5.3. Subir archivos al servidor . . . . . . . . . . . . . . . . . . . . . . . 34
5.4. Obtener visitantes . . . . . . . . . . . . . . . . . . . . . . . . . . . 35

1
 5.4.1. Posicionamiento . . . . . . . . . . . . . . . . . . . . . . . . 35
5.4.2. Conseguir enlaces. . . . . . . . . . . . . . . . . . . . . . . . 37
5.5. Publicidad . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37

2
1. Primera página WEB
1.1. Introducción
El objetivo de este tema es enseñar a crear páginas web utilizando el lenguaje
HTML (Hyper Text Markup Lenguage).
A la hora de crear páginas web lo más importante es conocer eL lenguaje
HTML, si bien esto no es su…ciente: si se desea ubicar una imagen en la pági-
na se necesitará saber un poco sobre grá…cos web para recortar la imagen al
tamaño adecuado; si se desea insertar un menú desplegable sería conveniente cono-
cer los conceptos básicos sobre JavaScript; si se desea recoger datos de los usuarios
mediante un formulario es conveniente utilizar un lenguaje tipo PHP (Hypertext
Pre-processor). También es conveniente utilizar un editor web para facilitar la es-
critura de este tipo de páginas, como KompoZer. Para que la página sea agradable
es conveniente saber algo sobre diseño web. Por último para que los internautas
tengan acceso a la página se necesita subirla aun servidor de Internet y darla a
conocer.
En este tema no se van a tratar todos estos aspectos por lo que se haciendo
hincapié principalmente en la creación de páginas mediante HTML.

1.2. Metodología
Puesto que los conceptos utilizados en la creación de páginas web son eminente-
mente prácticos, el desarrollo de esta unidad se ha llevado a cabo de una forma
progresiva mediante la creación de un sitio web sobre un tema de ‡ores (botánica).
Así, se irán introduciendo conceptos según se vayan necesitando.

1.3. Alternativas
Crear páginas web es la forma básica de comunicar en Internet, pero no es la
única ni la más adecuada para todos los casos. Dependiendo de la actividad que se
quiera desarrollar a nivel de red pude haber alternativas a las páginas web. Este es
el caso de los blogs, Los blogs son muy útilies cuando la parte literaria cobra capital
importancia. Escribir contenidos en un blog es mucho más sencillo que crear una
página web, sin embargo, los blogs resultan más rígidos que las páginas web.

1.4. Servidores y direcciones URL

Cuando se visita una página web, en realidad, se está accediendo a archivos en un
servidor web. La dirección o URL tiene el formato:

http://www.nombredominio.com/directorio/paginaweb.htm

donde http:// es el protocolo y www. indica el sistema de páginas web. Puede

observarse que no es necesario escribir esto en el navegador ya que él mismo;
nombredominio.com es el nombre del sitio. Al ir directamente ahí, se va a su
página de inicio. La última parte indica el archivo del sitio quese está viendo: en
este caso, una página llamada paginaweb.htm que está en una carpeta llamada
directorio.

3
 Se puede visitar una dirección desde un buscador o desde un enlace en otra
página, para ello hay que teclear la dirección en la barra de direcciones del
navegador o acceder desde favoritos.
Internet esta formada por un conjunto de servidores conectados. Un servi-
dor es un ordenador conectado a la red de acceso a Intenet que dispone de un
programa que es capaz de recibir una URL y devolver una página web al que hi-
zo la petición. Internet está formado por una gran cantidad de ordenadores que
pueden intercambiar información entre ellos.1 . Los ordenador que están conectados
a internet utilizan un lenguaje o protocolo común: TCP/IP.
Según el esquema de la Figura 1, un usuario se conecta a la red a través de
un módem o un router, ya sea vía línea telefónica, cable, satélite, etc., y a partir
de ese momento, el protocolo TCP/IP entra en juego, gracias a él es posible la
comunicación con el Proveedor de Servicios de Internet (ISP ) dándole a conocer
la dirección física. Utilizando TCP/IP, el ISP asigna una dirección IP al PC y en
ese momento se le da acceso a la red. Cuando se desea acceder a una página hay
que proporcionar un dominio que es traducido localizado en los Servidores DNS.
Cuando se sabe en qué servidor web se encuentra la página que se desea visitar,
se procede a su descarga y visualización en el navegador del PC.

Figura 1: Esquema de conexión a internet.

1.5. ¿Qué es una página web?

Una página web es un documento de texto con marcas, llamadas, etiquetas (tags
en inglés), etc. Cuando este documento se ve a través de un navegador web, las
etiquetas se interpretan y se visualiza el documento como una página web. Las
1
Como se comentó en el capítulo de redes locales, Internet es una red a nivel mundial de
ordenadores.

4
etiquetas no se muestran pero determinan el aspecto de la página, y otras carac-
terísticas. Por ejemplo, si el texto es un enlace, en la etiqueta se indica la página
a la que conduce el enlace.
Por lo tanto, si se es capaz de escribir un documento de texto, también se será
capaz de escribir una página web. Sólo se necesitará conocer el lenguaje de las
etiquetas o HT
Supóngase que se desea escribir una página web muy sencilla. Para ello se
utilizará un editor de texto sin formato (bloc de notas -notepad-).2 Ahora hay que
escribir el siguiente código (más adelante se verá lo qué es cada elemento):
<html>
<head>
<title>Mi primera página</title>
</head>
<body>
<p>Hola mundo</p>
</body>
</html>
Seguidamente hay que guardar el …chero con el nombre primera.htm. Final-
mente se abre el …chero desde el directorio donde se guardó (se abrirá la página
con el navegador predeterminado en el equipo). El resultado es el que muestra la
Figura 2:

Figura 2: Primera página web.

Por la …gura anterior se puede observar que en la ventana no se muestra todo

lo que ha sido escrito. Según el código de texto que se introdujo en el notepad
todo lo que se encuentra entre los brackets <> no aparecerá en pantalla. Los
brackets delimitan una etiqueta de HTML, y todas las que se han utilizado siguen
2
Este software puede encontrarse en la ruta: Todos los programas - Accesorios. El aspecto del
Bloc de notas es muy simple: una hoja en blanco con una barra de menús.

5
el formato: <etiqueta>contenido</ etiqueta>. Por ejemplo, la etiqueta <title>
contiene el texto que se mostrará como título de la página, y la etiqueta <p>
indica un párrafo con texto normal.
Por lo tanto, un navegador web es una aplicación capaz de interpretar el código
HTML (formado por etiquetas) y mostrarlo debidamente formateado. En cualquier
momento, es posible ver el código HTML de la página que estamos visualizando. En
Internet Explorer, puede hacerse desde el menú Ver-Código fuente, y se mostrará
utilizando el notepad.

1.6. Un sitio web

Cuando se dispone de varias páginas, éstas pueden ser organizadas en un sitio
web. Un sitio web no es más que una carpeta que se encuentra en un equipo infor-
mático, ya sea un ordenador personal o un potente servidor. La primera carpeta es
la carpeta raíz. Por ejemplo, si se accede a "www.aulaclic.es", se está accediendo
a la carpeta raíz del sitio de aulaclic.
Cuando se introduce "www.aulaclic.es"en el navegador, en realidad se está ac-
cediendo a la página www.aulaclic.es/index.htm, es decir, al escribir una dirección
que no acaba en .html (o en .html), el navegador lo interpreta como el nombre de
una carpeta y busca en ella un archivo que se llame index.htm, si no lo encuentra
devuelve el mensaje del tipo "No se puede encontrar la página web".
Tal como se haría con una carpeta de Windows, el sitio web se puede organizar
con subcarpetas. Por ejemplo, una carpeta con imágenes, otra con los vídeos, etc.
Coloquialmente, es frecuente referirse a un sitio web sólo como página web. Por
ejemplo, es común utilizar la frase: "se ha actualizado la página web del ministe-
rio", aunque no se está re…riendo a una página en concreto.

2. HTML básico
A continuación se tratarán los elementos básicos o fundamentales del HTML. En
primer lugar se tratará la estructura general de las etiquetas, seguido de la estruc-
tura básica de la página, a continuación se colocarán elementos en la página (texto,
imágenes, enlaces), por último, y de forma breve, se analizará la herramienta que
sirve para colocar cada elemento en el sitio deseado: las capas.

2.1. Etiquetas
El lenguaje HTML se basa en etiquetas, por eso es importante entender bien
la sintaxis de las etiquetas. En el primer ejemplo de página web se han introducido
algunas etiquetas. Las etiquetas siempre van contenidas entre los signos brackets
< >. Por ejemplo: <body>,<title> o <p>. A cada etiqueta le corresponde una
de apertura y una de cierre, ésta última marcada por el signo /. Por ejemplo
<body> (apertura) y </body> (cierre). Entre la apertura y el cierre, se encuentra
el contenido de la etiqueta, que puede ser texto u otras etiquetas, depende del
tipo de etiqueta. Algunas etiquetas, no tienen contenido, y se cierran sobre sí
mismas. Esto se expresa colocando la apertura y el cierre en la misma etiqueta,
como por ejemplo: <br />, que equivaldría a <br></br>. La etiqueta <br />
escribe un salto de línea.

6
 Atendiendo a la apertura de la etiqueta, la primera palabra que aparece es el
nombre o identi…cador de la etiqueta; aparte se pueden encontrar atributos
con sus valores, siguiendo el formato:

<etiqueta atributo1 = "valor" atributo2 = "valor">

La sintaxis correcta es escribir el nombre de la etiqueta y los atributos en

minúscula, y los valores contenidos entre comillas dobles. Si un atributo tiene más
de un valor, se escribirán todos los valores dentro de las mismas comillas, separados
por espacios en blanco. Por ejemplo:

<etiqueta atributo = "valor1 valor2">

Hasta hace poco tiempo, a la hora de escribir páginas web, lo más usual era que
cada etiqueta tuviera bastantes atributos, que se referían a propiedades del formato
o representación de los elementos. La tendencia actual es la de separar el formato
del contenido, descartando estos atributos, sustituyéndolos por propiedades de
estilo3 .
Por ejemplo, para escribir la siguiente línea: Bienvenidos a www.aulaclic.es,
antes, sin estilos, se escribía:

<p align=çenter"><font color="#993366"size="4"face=Çomic Sans

MS, Arial, MS Sans Serif">Bienvenidos a
www.aulaclic.es</font></p>

actualmente, con estilos:

<p class="presentacion">Bienvenidos a www.aulaclic.es </p>

2.2. Estructura básica de la página

Todo el documento HTML viene contenido dentro de la etiqueta: <html></html>.
Dentro de la etiqueta <html>, se encuentran dos subdivisiones: la cabecera, de-
limitada por las etiquetas <head></head>, y el cuerpo, delimitado por las
etiquetas <body></body>. Por lo tanto, el aspecto básico de cualquier página
web, es el siguiente:
<html>
<head>
...
</head>
<body>
...
</body>
</html>
La etiqueta <head> contiene información sobre la página. Por ejemplo, con-
tiene etiquetas que indican la temática de la página, el título que debe de mostrar
en la barra del navegador, o código javascript y estilos, que pueden estar en el
3
En las siguientes secciones se tratará sobre las propiedades de estilo.

7
propio encabezado o como llamadas a otros archivos. Normalmente, lo que con-
tiene esta etiqueta no se muestra en el navegador. De momento, sólo indicar que
la etiqueta <head> debe de contener la etiqueta <title></title>, que, a su vez,
contine el título de la página y se visualiza en la barra de título del navegador.
En el <body> se encuentra el contenido de la página, y es lo que se ve a través
del navegador: texto, imágenes, enlaces, tablas, etc.
En el siguiente ejemplo, se va a modi…car el código utilizado en la primera
página creada en el tema anterior (primera.htm) con los elementos que se han
ido comentando. Concretamente, se ha añadido la etiqueta <br /> para saltar de
línea. Esta es la primera página del sitio que se irá construyendo a lo largo del
capítulo.

<html>

<head>

<title>Floramics. Amigos de las ‡ores</title>

</head>

<body>

<p>Bienvenido a Floramics

<br /> En esta web encontrarás información sobre la asociación y

nuestra colección de fotografías de ‡ores.</p>

</body>

</html>

Copiando el texto anterior e introduciéndolo de nuevo en un editor de textos,

como notepad, y atribuyendo al …chero la extensión *.htm (segunda.htm), se ha
generado la siguiente página web Figura:3

Figura 3: Aspecto de la página web segunda.htm.

8
2.3. Estructura del texto
Como ha sido comentado anteriormente, todo el texto de la página estará dentro
de las etiquetas de apertura y cierre <body>, y que a su vez se ubican dentro de las
<html>. El texto siempre ha de estar dentro de párrafos. En HTML, los párrafos
se identi…can con la etiqueta <p></p>. Dentro de los párrafos se colocarán texto
e imágenes, y algunas etiquetas que permitan dar formato al texto, pero no pueden
generarse párrafos anidados4 .
En HTML se dispone también de encabezados que permiten organizar el tex-
to. Los encabezados van desde el <h1></h1> de mayor tamaño, al <h6></h6>,
el más pequeño. Por ejemplo, un <h1> se utilizaría para poner el rótulo princi-
pal de la página, el <h2> para los títulos de las secciones, y el <h3> para las
subsecciones. Como siempre, el texto de cada apartado iría contenido en párrafos
<p></p>.
Una de las peculiaridades del texto, es que los espacios en blanco consecutivos
y saltos de línea no se muestran como en el código fuente. Si hay varios espa-
cios seguidos, sólo se mostrará uno. Por ejemplo, si en el código fuente se escribe:
Bienvenido a Floramics; se verá: Bienvenido a Floramics. Si lo que se desea es in-
sertar varios espacios seguidos, habrá que utilizar el código HTML para el espacio:
&nbsp;.
Del mismo modo, el navegador también ignora los saltos de línea. Así, si dentro
de un párrafo se quieren insertar varios saltos de línea mediante la tecla Intro, estos
no se verán. Como ya se comentó, para crear un salto de línea dentro de un párrafo,
hay que utilizar la etiqueta <br />.
Todo esto se puede ver en el siguiente ejemplo:

<html>

<head>

<title>Floramics. Amigos de las ‡ores</title>

</head>

<body>

<h1>Bienvenido a Floramics</h1>

<h2>Presentación</h2>

<p> En esta web encontrarás información sobre la asociación y

nuestra colección de fotografías de ‡ores.<br />Tenemos las fo-
tografías organizadas en diferentes categorías</p>

<h2>Contacto</h2>

<p> Si quieres comunicarte con nosotros visita nuestra página de

contacto. &nbsp;&nbsp;Te esperamos.</p>

</body>
4
Una determinada estructura se de…ne como anidada cuando se ubica dentro de otra.

9
 </html>

Este ejemplo puede visualizarse en una nueva pagína web (tercera.htm) sigu-
iendo los pasos dados para las anteriores páginas (Figura 4).

Figura 4: Aspecto de la página web tercera.htm

2.4. Imágenes
Uno de los elementos más utilizados en una página web son las imágenes, tanto
para mostrar información como para formar parte del propio diseño de la pági-
na. Las imágenes pueden ser fotografías o grá…cos creados por programas como
Photoshop, Illustrator. etc.6
Básicamente, en páginas web suelen utilizarse tres formatos de imágenes: GIF,
PNG y JPG. Cuando se desea introducir una imagen se utiliza la etiqueta: <img
/>. Los atributos que como mínimo ha de tener la etiqueta son los siguientes:

<img src=übicacion/imagen.gif.alt="texto alternativo/>

Lo primero que ha de saberse es dónde se encuentra la imagen, es decir,

su ubicación, y es lo que debe contener el atributo src. Si la imagen está en
una página web, basta con saber su ruta, por ejemplo:http://www.aulaclic.es/
logo_ac1.jpg. Esto es lo que se llama una dirección absoluta. Si la imagen se
encuentra en el mismo sito que la página web, se puede utilizar una dirección
relativa, como imagen.gif o imagenes/imagen.gif.
Cuando el navegador no encuentre la imagen indicada en scr la imagen no
podrá ser visualizada. En su lugar en la pantalla se visualiza una imagen de error,
como en Internet Explorer (Figura 5).
Además de la imagen de error, también se mostrará el texto contenido en el
atributo alt, ya que ésa es su función: mostrar un texto alternativo cuando no se
puede mostrar la imagen seleccionada. Esto es importante para la accesibilidad
a la web: supóngase que se dispone de unas imágenes que tienen una función de
botón para acceder a determinados sitios de la web, como Inicio o Galería; si no se
hubiese puesto el atributo alt, y no se muestran las imágenes, el usuario no podría
navegar por el sitio.

10
 Figura 5: Imagen de error con Internet Explorer.

Aunque no son obligatorios, es muy frecuente añadir a la imagen los atributos

height (alto) y width (ancho), introduciendo en ellos las dimensiones de la imagen,
en píxeles. Al cargar una página, el navegador muestra primero el texto y después
las imágenes. Si conoce las dimensiones de cada imagen, puede dejar un hueco
reservado para ellas. Si no, pondrá el texto y luego irá desplazándolo para colocar
las imágenes, lo que hará incómodo la lectura de la página hasta que no esté
totalmente cargada.
Otro atributo frecuente en las imágenes es title. Si se pone en la imagen, al
posar el cursor sobre ella se mostrará su valor. Por ejemplo, para el siguiente
código:

<img
src=çomunes/aulaclic.gif.alt=.aulaClic"width="91"height="41"title=
"El logo de aulaClic/>

se muestra la imagen de la Figura 6.

Figura 6: Ejemplo de imagen a ubicar en una página web.

Como ejemplo, y después de estas pequeñas nociones sobre la ubicación y

atributos de imágenes, resulta interesante insertar una imágen en la página de
Floramics. La imagen (arbol.jpg) se encuentra ubicada en la carpeta donde se están
guardando todas las páginas web que se van con…gurando durante el desarrollo
del tema. Ahora hay que introducir el código:

<img src="gra…cos/‡or_ejemplo2.jpg"width="150"height="150"
alt="No se encuentra esta imagen/>

en el código HTML del archivo tercera.htm, resultando:

<html>

<head>

<title>Floramics. Amigos de las ‡ores</title>

</head>

11
 <body>

<h1>Bienvenido a Floramics</h1>

<h2>Presentación</h2>

<p> En esta web encontrarás información sobre la asociación y

nuestra colección de fotografías de ‡ores.<br /> Tenemos las fo-
tografías organizadas en diferentes categorías</p>

<img src="gra…cos/‡or_ejemplo2.jpg"width ="150"height ="150"

alt ="No se encuentra esta imagen/>

<h2>Contacto</h2>

<p> Si quieres comunicarte con nosotros visita nuestra página de

contacto. &nbsp;&nbsp;Te esperamos.</p>

</body>

</html>

Grabando este código en el …chero cuarta.htm, y ejecutando directamente el

…chero, se obtiene una página como se indica en la Figura 7.

Figura 7: Página web con la fotografía arbol.jpg insertada.

Por último, a la hora de elegir una imagen ha de tenerse en cuenta que, para
poder mostrarla, el navegador debe de descargarla primero. Y es fácil que una
sola imagen ocupe más tamaño que el resto de elementos de la página. Por ello,
se ha de intentar optimizar al máximo las imágenes, e intentar que "pesen"lo
menos posible, es decir que su tamaño en Kb.sea bajo. El sentido común dicta
que cuanto más grande sea la imagen, más ocupa, por lo tanto, hay que procurar
usar imágenes lo más pequeñas posibles, siempre que lo que queramos mostrar se
vea con su…ciente nitidez. Sin embargo, dos imágenes del mismo tamaño pueden
tener "pesos"diferentes, ya que una de ellas puede tener más resolución de la
que es necesaria para que se vea bien. Es decir, que aparte del tamaño in‡uye
la resolución. Para optimizar la resolución de las imágenes conviene utilizar un
programa grá…co, ya que estos programas tienen opciones para ello.

12
2.5. Enlaces
Cualquier página web tiene imágenes o texto, que al pulsarlos (hacer click sobre
ellos) redirigen a otra página del mismo sitio, o a una página de un sitio distinto.
Esto es lo que se denomina enlace o hiperenlace (en inglés link o hyperlink )
también llamado hipertexto o hipervínculo.
Un enlace se diferencia del texto normal porque al colocar el cursor sobre él,
cambia de forma pasando de una ‡echa a una mano. También es muy frecuente que
los enlaces aparezcan subrayados, ya que es la opción por defecto que les asigna
el HTML.
En HTML, el enlace se identi…ca con la etiqueta <a></a>. La forma más
básica de un enlace es la siguiente:

<a href=.archivo_enlazado">contenido del enlace</a>

El atributo href indica la dirección (URL) a la que se enlaza, que normalmente

es un archivo *.html ; por ejemplo http://www.aulaclic.es/index.html . El contenido
del enlace es lo que lo que se visualiza en la página y que al pulsar sobre él redirige
al enlace. Normalmente es texto o una imagen, en el siguiente ejemplo es el texto
aquí.
El atributo href puede ser una dirección absoluta, como: http://www.aulaclic.es
/paginasweb/ejercicios/citas_celebres.htm; o una direccion relativa, como: ejerci-
cios/citas_celebres.htm, de la misma forma que se comentó para las imágenes.
Es muy común añadir a los enlaces el atributo title, para que muestre infor-
mación sobre el destino del enlace cuando el usuario deje unos instantes el cursor
encima del enlace.
Por defecto, el enlace se abrirá en la misma ventana. Si se desea que se abra
en una nueva ventana, se ha de utilizar el atributo target="_blank". Aunque, el
W3C 5 desaconseja su uso, con la idea de que se debe permitir al usuario decidir si
quiere abrir el enlace en la misma u otra ventana pulsando con el botón derecho
del ratón sobre el enlace, el atributo target se sigue utilizando porque la mayoría
de los usuarios pulsan directamente sobre el enlace, sin usar el botón derecho. Así
pues si en la página se desea informar sobre la existencia de otra página del mismo
tema, habrá que colocar un enlace a ella y poner el atributo target="_blank" para
evitar que el usuario se vaya a esa página y no se acuerde de volver a la original.
Normalmente se utilizan enlaces para navegar por un determinado sitio. Se ha
de evitar enviar al usuario a páginas en las cuales no sepa como volver a la página
anterior o como ir a la página principal. Siempre es mejor añadir un enlace volver,
que con…ar en que el usuario utilice el botón ATRAS del navegador. Más adelante
se verá como diseñar un buen sistema de navegación un determinado sitio web.
Aquí puedes ver un ejemplo con enlaces e imágenes:

<html>

<head>

<title>Floramics. Amigos de las ‡ores</title>

5
El W3C es organismo que regula los estándares del HTML.

13
 </head>
<body>
<h1>Bienvenido a Floramics</h1>
<h2>Presentación</h2>
<p> En esta web encontrarás información sobre la asociación y
nuestra colección de fotografías de ‡ores.<br /> Tenemos un índice
alfabético con todas las fotografías, o puedes verlas organizadas en
diferentes categorías.</p>
<img src="gra…cos/‡or_ejemplo2.jpg"width="150"height="150"
alt="No se encuentra esta imagen/>
<p>Interesante enlace sobre ‡ores: <a href="http://www.
mundo‡ores.net">Mundo‡ores</a></p>
<h2>Contacto</h2>
<p> Si quieres comunicarte con nosotros visita nuestra página de
contacto. &nbsp;&nbsp;Te esperamos.</p>
</body>
</html>

En este ejemplo se ha insertado la línea: <p>Interesante enlace sobre ‡ores:

<a href="http://www.mundo‡ores.net">Mundo‡ores</a> en el código HTML
del …chero cuarta.htm. Todo el código se ha intoducido en el …chero de texto
quinta.htm que, una vez ejecutado, ofrece una página cuyo aspecto se muestra en
la Figura 8.

Figura 8: Aspecto de la página correspondiente al …chero quinta.htm. En la página

se observa el enlace Mundo‡ores.

14
2.6. Divisiones o capas
Una etiqueta muy utilizada es la etiqueta <div></div>. Esta etiqueta forma una
caja, un rectángulo, igual que el párrafo; pero mientras que el párrafo se utiliza
generalmente para contener texto, en un div se puede colocar lo que se desee
siempre que se respete la anidación. Esta etiqueta resultará muy útil para distribuir
los elementos en las páginas. La etiqueta <div> es denominada de muchas formas:
divisiones, capas, cajas, contenedores, por lo que es normal referirse a ella con
estos nombres.
Por ejemplo, si se desea colocar la imagen de la página del ejemplo anterior
en la parte derecha, hay que crear una capa con el estilo "‡otar a la derecha" 6 y
pondremos la imagen dentro. Para ello en el código del ejemplo anterior hay que
modi…car la línea de propiedades de la imagen:

<div style="‡oat right"><img src="gra…cos/‡or_ejemplo2.jpg

"width="150"height="150.alt="No se encuentra esta
imagen/></div>

El resultado al ejecutar el …chero sexta.htm que es en el que se han introducido

estos cambios de código es el que se indica en la Figura 9:

Figura 9: Aspecto que presenta la página al introducir la etiqueta <div>.

3. Aspecto de la página. Estilos básicos (I)

Hasta ahora se ha tratado la utilización de los elementos básicos de HTML para
escribir texto, imágenes y enlaces, pero los resultados han sido muy pobres desde
el punto de vista estético. A continuación se van a considerar aquellos aspectos
necesarios para dotar a las página de una buena estética, para lo que habrá que
formatear texto, texto con bordes, márgenes y fondos. A lo largo de esta sección
se verá un potente concepto: el estilo CSS. El aspecto de la página se controla
con los estilos CSS.

3.1. Estilos
La forma en que se ven todos los elementos de la página web depende del estilo.
El estilo se compone de distintas propiedades y sus valores correspondientes. Las
propiedades pueden ser el color de la fuente, el tamaño, la alineación, los márgenes,
etc. Los valores dependen de cada propiedad, por ejemplo, a la propiedad color
le podemos asignar valores como red (rojo), blue (azul), y a la propiedad tamaño
fuente le podemos asignar un valor en porcentaje 100 %, 120 %, ... o en pixels 12px,
6
Más adelante se explicará el estilo "‡otar a la derecha: "style="‡oat: right".

15
15px, etc. El formato a seguir para de…nir una propiedad es propiedad: valor ; o
propiedad: valor1 valor2 valor3, si la propiedad puede adquirir diferentes valores.
Por ejemplo, si se desea que el texto tenga color rojo y un tamaño de fuente
de 120 %, hay que escribir: color:red; font-size:120 %
A la hora de escribir el estilo lo más recomendable es agrupar todas las declara-
ciones de estilos en un solo lugar, de…niendo un bloque dentro de la etiqueta
<head > que contega la de…nición de estilos. Para ello, hay que incluir en la eti-
queta <style type="text/css"> ... </style> y de…nir dentro los estilos correspon-
dientes a cada elemento de la página.
Si se desea que un estilo afecte a todos los elementos de la página, hay que
de…nir un estilo para la etiqueta <body>. En esta etiqueta se suele de…nir el color
de fondo y los valores genéricos de color y tamaño del tipo de letra. Para el ejemplo
que se sigue en este capítulo se puede de…nir el estilo del body así:
body {font-family: Verdana,Arial,sans-serif;
font-size: 15px;
color: #735846;
text-align: justify;
background-color: #3d2e2a;}
Lo que se traduce de la siguiente forma: el tipo de letra o fuente, será Verdana, ( o
Arial si no existe Verdana, o sans-serif si no existen las anteriores); el tamaño será
15 pixels, el color será el de…nido por el valor #735846 (esta cifra tiene también
una interpretación), la alienación del texto será justi…cada y el color de fondo de
la página será el #3d2e2a.
Siguiendo con el ejemplo, se puede de…nir el estilo de la etiqueta h1, de la
siguiente forma:
h1{ margin-left: 80px;
margin-top: 20px;
font-size: 180 %;
color: #d38451;}
Que quiere decir que todas las cabeceras h1 tendrán un margen izquierdo de 80
pixels (si no se pone la unidad, se toman pixels), un margen superior de 20 pixels,
un tamaño de letra de 180 % y el color #d38451. En la Figura 10 se observa como
quedaría el texto de la cabecera h1 despues de de…nir sus códigos de estilo (estos
estilos se mantendrían para todas las cabeceras de tipo h1 )

Figura 10: Aspecto del cabecero h1 tras el cambio de código.

Es importante señalar que el estilo de…nido en h1 prevalece ante el de…nido en

body.
Siguiendo con el ejemplo, a continuación se de…nirá un mismo estilo para las
cabeceras h2 y h3, con color diferente para esta última cabecera. por lo que habrá
que volver a de…nir otro estilo a continuación para h3 con el valor del color deseado.

16
Es decir, el valor válido es el último valor de…nido, y es por ello por lo que los
estilos se llaman CSS (Cascade Style Sheet).
A continuación se de…nirá el estilo de los párrafos (etiqueta <p>) con un line-
height (interlineado) de 1.5 em7 , una identación de 15 pixels y un margen de 35
pixels.
Según se ha de…nido el código hasta ahora, el texto que se escriba en los
párrafos tomará las propiedades de…nidas en los estilos de la etiqueta body y de la
etiqueta p, pero cabe plantearse la siguiente cuestión: ¿cómo se puede cambiar el
color de una palabra concreta dentro de un párrafo? Para conseguir esto habrá
que de…nir un nuevo tipo de estilo: las clases. De…nir un estilo de clase es muy
sencillo, basta escribir un punto y un nombre (hay que introducirlo dentro de las
etiquetas <style>), por ejemplo:
.azul { font-weight: bold;
color: #6C6CCA;}
Así, se ha creado un estilo para la clase azul con tipo de fuente negrita y color
#6C6CCA. Una vez de…nida la clase, para aplicársela a una palabra basta utilizar
la etiqueta span enmarcando la palabra. Por ejempo, para asignarle la clase azul
a la palabra información (que esta dentro de un párrafo), hay que escribir:

<p>En esta web encontrarás <span class=.azul">información

</span> sobre la asociación y nuestra colección de fotografías de
‡ores.</p>

lo que haría que el párrafo se viese así (Figura 11):

Figura 11: Aspecto del texto del párrafo después de cambiar los códigos de estilo.

Con el ejemplo anterior puede observarse que la clase azul ha .añadido"las

propiedades color azul y negrita a la palabra información, manteniendo las otras
propiedades que ya tenía por pertenecer a un párrafo. Es decir, los estilos van
sumando propiedades sin eliminar las que ya se tienen.
Con los estilos CSS se consigue dar formato a las páginas web separando el
formato del contenido. Por un lado se de…nen los estilos y por otro lado el propio
texto de la página. Este concepto es muy importante porque hace que el trabajo
de creación y mantenimiento de una página web sea más sencillo.8
Antes de continuar, es conveniente es conveniente echar un vistazo a la página
ejemplo (septima.htm) para visualizar los cambios tras introducir los nuevos estilos
(Figura ).
7
em es una medida de espaciado utilizada e los tratamientos de texto.
8
Hasta que aparecieron los estilos CSS, formatos y textos estaban mezclados.

17
Figura 12: Aspecto de la página web tras realizar todos los cambios de código
indicados hasta el momento.

3.2. Formato del texto

A partir de ahora se tratará con más detalle las posibilidades que ofrecen los difer-
entes estilos CCS, comenzando con el formato del texto y propiedades asociadas:
fuente, tamaño, inclinación, grosor, decoración y mayúsculas/minúsculas.

3.2.1. Color
El color se expresa con la propiedad color. El valor que puede tomar esta propiedad
se puede expresar de varias formas:

Un número hexadecimal. Por ejemplo color: #0000FF;,o color: 0x800080;

Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0, 255);

Tres números entre 0 y 100. Por ejemplo color: rgb(10 %, 20 %, 75 %);

Un nombre. Algunos colores se pueden expresar con su nombre en inglés.

Por ejemplo color: green; o color: DarkGreen;

El tratar con tantas posibilidades es algo engorroso y por ello existen her-
ramientas que facilitan el trabajo con los colores.9 .

3.2.2. Fuente
La fuente, o tipo de letra, se puede elegir a través del atributo font-family. A la
hora de seleccionar una fuente hay que tener en cuenta que si el nombre de la
fuente incluye espacios en blanco, dicho nombre ha de ir entre comillas dobles.
9
Por ejemplo, ColorPic es un pequeño programa gratuito que puede descargarse en la dirección
http://www.iconico.com/colorpic/. Los mejores editores grá…cos también incorporan herramientas
en este sentido un ejemplo es el editor Kompozer.

18
Por ejemplo font-family: arial (en el caso de no contener espacios en blanco); o
font-family: "Times New Roman" (en el caso de contener espacios en blanco).
Siempre que se elija una fuente ha de considerarse el caso de que quien la
invoque la página web no tiene por qué tener instalada la fuente utilizada en
la página. Para solucionar este problema es conveniente utilizar alguna de las
cinco fuentes genéricas que sí se mostrarán en cualquier equipo: serif, sans-serif,
cursive, fantasy, monospace. Esto no signi…ca que sólo se deban utilizar estas
cinco. El valor de font-family puede incluir varias fuentes, separadas por comas; el
navegador elegirá, comenzando por la derecha, la primera disponible, por lo que
es conveniente terminar por una genérica. Por ejemplo: font-family:Georgia,
"Times New Roman", Times, serif.10

3.2.3. Tamaño
El tamaño de una determinada fuente se regula a través de la propiedad font-size.
En HTML se puede utilizar cualquiera de las unidades de tamaño, pero lo más
frecuente es utilizar px (pixels), porcentajes ( %) o em.11
La utilización de valores relativos, facilitaría el poder cambiar de tamaño todo
el texto de la página de forma coherente.

3.2.4. Inclinación
Las fuentes pueden escribirse dos estilos diferentes utilizando la propiedad font-
style: normal y cursiva. Esta propiedad puede tomar uno de los siguientes valores:

normal: Coloca el estilo de forma normal, sin inclinación.

oblique: Inclina el texto.

italic: Además de inclinarlo, susituye la fuente por su versión en itálica si

está disponible.12

3.2.5. Grosor
El grosor de la fuente, puede seleccionarse mediante la propiedad font-weight.y los
siguientes valores:

normal: Grosor estándar de la fuente en función de su tamaño.

bold: El texto se muestra en negrita.

En principio se pueden indicar distintas intensidades de negrita, pero los nave-

gadores no las muestran.
10
Los editores grá…cos ofrecen la posibilidad de elegir diferentes fuentes y previsualizar su
forma. Este es el caso del software Kompozer.
11
Las unidades en % y lo valores em indican valores relativos al tamaño de la fuente del elemento
que está por encima. Así, 100 % o 1em, signi…caría el mismo tamaño, 200 % o 2em el doble, y
50 % o 0.5em la mitad.
12
Esta es una opción interesante, si bien, la mayoría de los navegadores no lo hacen.

19
3.2.6. Decoración
Con la propiedad text-decoration se pueden introducir en el texto distintos tipos
de subrayado, para lo que se utilizarán los siguientes valores:

none: El texto se muestra sin ningún tipo de decoración.

underline: El texto aparece subrayado.

overline: El texto aparece sobrerrayado.

line-through: El texto aparece tachado.

blink: El texto parpadea.13

3.3. Bordes
En HTML se puede agregar un borde alrededor de un elemento html, con la
propiedad border. Esta propiedad ofrece tres posibilidades:

color :- Un color RGB. Se de…ne con la propiedad border-color. Por ejemplo:

border-color: blue; o border-color: #F37760.

grosor.- Normalmente expresado en px, se de…ne con la propiedad border-

width. Por ejemplo: border-width: 2px.

estilo.- Es el aspecto que puede tener el borde y se de…ne con la propiedad

border-style. La Figura 13 muestra los diferentes tipos de estilo.

none dotted dashed solid double groove ridge inset outset

Figura 13: Difentes estilos que ofrece HTML.

Como ejemplo se puede de…nir el borde para un determinado elemento de la

siguiente manera:

<p style="border-color:#009933; border-width: 3px;

border-style:double;">bordes</p>

quedando como indica la Figura 14.

Cada elemento (en el ejemplo de la Figura 14, el texto border ) tiene cuatro
bordes, que pueden de…nirse de forma independiente como: border-top, border-
right, border-bottom y border-left. A su vez, para cada uno de ellos se pueden
de…nir de forma independiente el color, grosor y estilo. Por ejemplo: border-
bottom-color: blue, o border-top-width: 5px.
13
No funciona en Internet Explorer pero sí en Firefox 3.

20
 bordes

Figura 14: Ejemplo de una decoración para el texto borde con doble línea de color
verde.

3.4. Márgenes
Los elementos html tienen dos márgenes: el margen externo y el margen in-
terno. Ambos se re…eren a la la distancia hacia uno u otro lado con respecto al
borde del elemento, es decir, a su límite, independientemente de que el borde sea
visible o no.
El margen externo se regula con la propiedad margin. El margen exterior es
la distancia mínima que habrá entre el borde exterior del elemento y el elemento
siguiente, por cada uno de sus cuatros lados. Los margenes no se suman, se solapan,
prevaleciendo el mayor. Así, si un párrafo tiene un margen inferior de 50px y el
de abajo un margen superior de 30px, entre ellos quedará un margen de 50px, por
ser el mayor, pero no de 70px. Otro valor que puede darse al margen es auto.
El margen interno se regula con la propiedad padding y se re…ere a la distancia
que hay ente el borde del elemento y su contenido, como puede ser el texto.
Por defecto, la mayoría de elementos incluyen un margen exterior, y algunos
un margen interior, que siempre ha de tenerse en cuenta.
Para entender mejor todo esto puede ejecutarse el siguiente código en el …chero
margenes.htm:

<html>

<head>

<title>Bordes y m&aacute;rgenes</title>

<meta http-equiv=çontent-typeçontent="text/html; charset=iso-8859-1/>

</head>

<body style="background-color:whitesmoke; font-family: sans-serif;">

<h1 style="font-size: 120 %; background-color: #99CCFF; color: #FFFFFF;

border-color: #6666FF;border-style: solid; border-width: 0 0 2px 5px; padding-left:
20px;">
Bordes y m&aacute;rgenes</h1>

<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es un p&aacute

;rrafo sin margen.</p>

<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es otro p&aacute

;rrafo sin margen.</p>

<p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un

p&aacute;rrafo con margin:20px.</p>

21
 <p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;
rrafo con margin:20px.</p>

<p style="background-color:#99CCFF; margin: 20px; padding: 10px">&Eacute;ste

es un p&aacute;
rrafo con margin:20px y padding:10px.</p>

<p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan

4px inset">&Eacute;
ste es un p&aacute;rrafo con margin:20px, padding:10px y border: cyan 4px inset</p>

<p style="background-color:#99CCFF; margin-right:25 %;">&Eacute;ste es un

p&aacute;rrafo con margin-right:25 %.<br /> Cambia al cambiar la ventana.</p>

</body>

</html>

Resultando la página web de la Figura ??.

3.5. Fondo
Otro aspecto que puede personalizarse con HTML es el fondo mediante la propiedad
background,.que permite establecer el color de fondo de un determinado elemento.
Por ejemplo: background-color: green.
La propieadad background también permite utilizar imágenes: url(gra…cos
/fondo.png). En url() hay que introducir la dirección de la imagen que se desea
insertar como fondo. Utilizando imágenes se pueden con…gurar otras propiedades.
Este es el caso de de background-repeat, que determina si el fondo se repite; puede
tomar los valores no-repeat si no se desea que se repita, repeat-x para que se repita
en horizontal, repeat-y para que lo haga en vertical, o repeat para que llene todo el
fondo, que es el valor que toma si no se indica otra cosa. Si no se repite la imagen
de fondo, ésta puede posicionarse con background-position mediante los valores:
top, right, bottom y left, que, a su vez, permiten ser combinados para colocarla en
las esquinas (top left) o centrarla mediante el valor center. Por último, también es
posible introducir medidas, donde el primer valor se re…ere a la posición horizontal
y el segundo al vertical. Por ejemplo background-position: 50 % 50 %.
Para visualizar como afecta esta propiedad al aspecto de una determinada
página web, se introducirá en el …chero background.htm el siguiente código:

<html>

<head>

<title>Bordes y m&aacute;rgenes</title>

<meta http-equiv=çontent-typeçontent="text/html; charset=iso-8859-1/>

</head>

<body style="background-image: url(arbol.jpg); background-color: #C9B2AC;

background-repeat: repeat-y; background-position: center">

22
 <h1 style="background-color: #CC9999; color: #FFFFFF;">Fondos</h1>

<p style="background-color: #CC9999; color: #FFFFFF;">Ve cambiando

los valores de background-repeat y background-position.</p>

</body>

</html>

El resultado de la ejecución del …chero anterior se visualiza en la Figura 15,

en la que se observa que el fondo de la página corresponde a la imagen del …chero
arbol.jpg 14 que está ubicado en la misma carpeta donde se encuentra el …chero
correspondiente a la página.

Figura 15: Página web con el …chero de imagen arbol.jpg como fondo.

3.6. Cómo declarar un estilo

Hasta ahora se han aplicado los estilos directamente sobre el elemento considerado,
utilizando el atributo style. Esto es lo que se denomina estilos incrustados que
son útiles cuando hay que asignar un estilo muy concreto a un elemento puntual.
Sin embargo, cuando se quiere aplicar un determinado estilo a todos los elementos
de una página este tipo de estilos se hace muy poco práctico. Por ejemplo, tomando
una página con 20 párrafos, resultaría muy costoso modi…car el estilo de cada uno
de estos párrafos cuando se desea efectuar un cambio.
Con el …n de evitar el problema anterior, se podría declarar un determinado
estilo y, una vez declarado se invocaría cada vez que fuese necesario. Un estilo se
declara con un selector y un bloque de declaración, siguiendo el formato:

selector {bloque de declaración;}

El selector identi…ca al elemento al que se le aplica el estilo y esto puede hacerse

de las siguientes maneras:
14
Este …chero ha sido utilizado en numeros ejemplos.

23
 Si se desean formatear todas las apariciones de una etiqueta, se utilizará la
etiqueta como selector. Por ejemplo, body o p.

Para formatear determinados elementos se pueden de…nir clases. En la

de…nición de una clase se utilizará el signo (.) seguido del nombre (es acon-
sejable que sea descriptivo) que se quiera dar a la clase. Por ejemplo: .re-
saltado. De esta forma, creamos una clase genérica, y el estilo afectará a
todos los elementos, sean del tipo que sean, que tengan esa clase. También se
puede especi…car cómo se comporta la clase para cada elemento mediante el
formato etiqueta.clase. Por ejemplo: p.resaltado. Por último, para aplicar
la clase a los elementos no hay más añadirles el atributo class con el nombre
de la clase deseada. Por ejemplo: <p class=resaltado">.

Para darle estilo a un elemento en concreto, podemos utilizar su atributo

id. En el selector, se precederá el id por el signo #. Por ejemplo: #logo. De
forma opcional se puede preceder el identi…cador con el tipo de elemento de
que se trata. Esto puede ser útil a la hora de recordar de qué elemento se
trata.

También se pueden anidar selectores separándolos por espacios. En este caso,

el estilo sólo afectará a los elementos contenidos en el selector que haya más
a la izquierda. Por ejemplo, el selector p.resaltado span sólo afectará a las
etiquetas span que estén dentro de algún párrafo (p) que tenga la clase
resaltado (class=resaltado").

Por último, al de…nir estilos se pueden utilizar varios selectores a la vez si

se separan por comas. Por ejemplo, utilizando el selector p, h2, h1 se puede
de…nir a la vez el estilo de las etiquetas p, h1 y h2.

El bloque de declaración, es la relación de cada propiedad del estilo con el

valor que toma. Es decir, contendrá lo que se colocaría en la etiqueta style del
propio elemento. El bloque de declaración se sitúa detrás del selector, encerrado
entre llaves { }. Lo normal es formatearlo para que sea fácil de leer (con este …n
se pueden utilizar saltos de línea, espacios o tabulaciones). Una forma común de
formatear el estilo, es como vemos en el siguiente ejemplo:
p{
color: blue;
background-color: #F7F0E2;
font-style: oblique;
}

3.7. Dónde declarar un estilo

En casos muy puntuales y concretos, se declarará el estilo incrustado al elemento
o en línea, utilizando el atributo style. Por ejemplo, consideresé un determinado
párrafo al que se desea aumentar un el margen porque queda más estético; lo más
sencillo será recordar que el estilo está en el elemento y crear una clase que no
serviría de nada si se borra el elemento. De todas formas, aquí no se declarará

24
todo el estilo, sólo los atributos que sean distintos al resto de elementos del mismo
tipo.
Si sólo existe una página, se pueden de…nir los estilos dentro del <head >.
Para ello, hay que incluirlos en la etiqueta <style type="text/css"> ... </style>,
de…niendo los estilos con el selector y su bloque de declaración.
Lo más habitual es tener varias páginas. En este caso resulta muy útil tener
los estilos de…nidos en una hoja independiente, es decir, en una hoja de estilos.
Una hoja de estilos no es más que un archivo de texto, pero con la extensión *.css,
donde aparecen de…nidos los estilos que utilizarán las páginas. Para que funcione,
hay que establecer enlaces con la hoja de estilo, para lo que se utiliza la siguiente
etiqueta en el <head >:

<link href="hoja_de_estilo.cssrel="stylesheet"type="text/css/>

En este código, href indica la ubicación de la hoja de estilo, tal como se pondría
en un enlace; rel se re…ere a la relación del archivo con la página concreta. Al
poner stylesheet se está indicando que se trata de una hoja de estilo. Por ejemplo,
se podría poner alternate stylesheet, lo que indicaría que se trata de una hoja de
estilo alternativa.15

3.8. Orden de aplicación de los estilos CSS

Después de lo anterior, si se de…ne en varios sitios el estilo para un elemento, cabe
hacerse la siguiente pregunta: ¿cuál de ellos se aplica?. Realmente, los estilos se
van sumando, por lo que si no se repete ninguna propiedad, el estilo …nal de un
elemento será la suma de todos los estilos que afecten al elemento. Pero, ¿qué
ocurre si se repite una propiedad? Como norma general, prevalecerá el estilo más
concreto sobre el más genérico. Por ejemplo, si en la hoja de estilo se de…ne el
texto de los párrafos en rojo, y en la cabecera de la página se de…ne el color de los
párrafos en azul, prevalecerá éste último, ya que es más concreto. Y si, continuando
con el ejemplo, en un párrafo de la página, en el atributo style se indica el color
de texto verde, entonces prevalecerá éste por ser el más concreto de todos.
Lo mismo ocurre con los selectores. Por ejemplo, p.inicio es más concreto que
p, ya que se re…ere sólo a los párrafos con esa clase. Del mismo modo, p#titulo
sería aún más concreto, ya que se re…ere directamente a un determinado párrafo.
Lo mismo ocurre al anidar los selectores: p.inicio span es más concreto que poner
sólo span.
En caso de igualdad, por ejemplo, al de…nir varias veces la misma propiedad
en una hoja de estilo, se tomará en cuenta la última, que anulará a las anteriores.
Por ejemplo, poner p {margin: 20px; margin-bottom: 5px;} sería como poner p
{margin: 20px 20px 5px;}. En cualquier momento se podrá saltar el orden de
prioridad de los estilos, añadiendo !important al …nal de una propiedad, lo que
hace que tenga preferencia sobre el resto. Así, en el ejemplo:
p { color: blue !important;
color: red;
}
15
Algunos navegadores como Firefox, permiten elegir entre la hoja normal o la alternativa a
través del menú: Ver - Estilo de página.

25
 El párrafo debería de ser de color rojo porque el valor rojo anulará al azul. Sin
embargo, al poner !important, hace que el texto sea azul.
Hay que tener en cuenta que las propiedades se heredan de los elementos
padre. Por ejemplo, si se indica que el texto del body sea de color azul, todos los
elementos tendrán este color para el texto, a no ser que indique lo contrario.
La mejor forma de entender todo esto, es probar con el siguiente ejemplo:
<html>
<head>
<meta http-equiv=Çontent-Typeçontent="text/html; charset=iso-8859-1/>
<title>Estilos</title>
<style type="text/css">
body {
font-family:sans-serif;
background-color: lightyellow;
}
h1 {
border-bottom: #FFCC66 5px solid;
text-align: center;
}
p{
color:#660000;
border: #FF9933 10px solid;
border-width: 0 0 2px 2px;
}
p.derecha {
text-align: right;
border-width: 0 2px 2px 0;
}
#Pepe {
color: red;
border-width: 0;
}
.destacado {
color: white;
background-color: red;
}
p.destacado span.destacado {
color: red;
background-color: white;
}
</style>
</head>
<body>
<h1>Estilos</h1>
<p>Los estilos simpli…can el dise&ntilde;o de una p&aacute;gina.</p>
<p class="derecha">Podemos de…nirlos en el propio <span
class="destacado">elemento</span>.</p>

26
 <p>De…nirlos en la <span class="destacado">cabecera</span>.</p>
<p class="derecha">O utilizar una <span class="destacado">hoja de estilo
</span>.</p>
<p>&nbsp;</p>
<p id="Pepe">Este es el p&aacute;rrafo Pepe, con su propio estilo.</p>
<p class="destacado">Este es un p&aacute;rafo de la clase <span class=
"destacado">destacado</span>.</p>
<p class="destacado"style="background-color: orange">&Eacute;ste,tambi&eacute;
n es destacado, pero con style=&quot;background-color: orange&quot;.</p>
</body>
</html>
La Figura 16 muestra el aspecto de la página tras aplicar el codigo anterior
(…chero: estilos.htm).

Figura 16: Aspecto de la página web después de ser ejecutado el …chero estilos.htm.

4. Preparación de un sitio web

4.1. ¿Qué es un sitio web?
Un sitio web o website, es un conjunto de páginas web, más o menos extenso,
agrupadas bajo un dominio, como puede ser www.aulaclic.es o www.elpais.com.
Lo normal, es que el sitio web parta desde una página inicial, o home, desde la
que se puede acceder de forma jerárquica a todo el contenido del sitio a través de
hiperenlaces. A su vez, se pueden encontrar enlaces hacia otros sitios distintos, ya
que cada sitio tiene una URL única que permite acceder a él. El conjunto de los
sitios publicados en Internet forman la WEB o WWW.
El contenido de las páginas del sitio, puede estar escrito directamente en
HTML. Esto genera un sitio estático, que sólo recibe actualizaciones de vez
en cuando, ya que hay que hacerlas manualmente sobre el código. En cambio,
existen otros lenguajes, como PHP, ASP o JSP que generan en HTML a partir
de datos, como contenidos de bases de datos, datos introducidos por el usuario,

27
información global, etc. Esto origina sitios dinámicos, ya que los cambios se
producen frecuentemente y son generados desde la propia página. Por ejemplo,
una página que muestra la fecha del día actual sería un contenido dinámico. Otro
ejemplo sería un foro.

4.2. La temática del sitio

La idea de crear un sitio web nace por la necesidad o deseo de comunicar con
el mundo. A la hora de elegir una temática hemos de tener en cuenta diferentes
consideraciones, como pueden ser:

El tipo de personas a las que, principalmente, se dirigirá la página.

Que el tema resulte interesante para que la página tenga un cierto "éxito a
la hora de ser visitada".

Que el mensaje a difundir posea un cierto grado de concreción, evitando

dispersiones y mezclas de diferentes temáticas.

Una vez elegida la temática han de elegirse las categorías en las que se va a
dividir el sitio web. Las categorías serán más o menos genéricas dependiendo del
tamaño del sitio.

4.3. Organizar los archivos

El sitio web se encuentra alojado en un servidor, que no es más que un orde-
nador conectado a internet, capaz de "dar.archivos a quien lo solicite. Así, cuando
se accede a un sitio web, realmente se está accediendo a una carpeta de ese orde-
nador, que funciona como raíz del sitio. Internamente, dentro de esa carpeta, se
encontrarán archivos y subcarpetas que permitirán organizar el sitio.
Cabe, entonces, la siguiente pregunta: ¿cómo se organizan los archivos del sitio?
No existe una regla exacta a la hora de contestar esa cuestión, ya que depende de
varios factores, como son: el número de páginas, cómo se desea navegar entre ellas,
cómo se organiza el contenido, etc. Para simpli…car y poder abordar la cuestión,
se tendrán en cuenta las siguientes consideraciones:

En la raíz del sitio, se ubicará, como mínimo, la página de inicio, que se

denominará index.html (o .htm). Esto se debe a que cuando a un navegador
se le indica que abra una carpeta, el navegador busca el archivo index de la
misma.

Los diferentes tipos de archivo se organizarán en carpetas. Por ejemplo, una

carpeta para las imágenes que forman parte del diseño de la página; si en la
página se dispone de una galería de fotografías que no tienen relación con
el diseño, es deseable ponerlas en otra carpeta; otra carpeta para archivos
javascript, etc.

Si se dispone de secciones claramente de…nidas, es deseable guardar sus pági-

nas en subcarpetas.

28
 También es conveniente asignar un nombre descriptivo a los archivos. Como
ejemplo, resultará mucho más sencillo si los archivos se llaman contacto.html
y noticias.html que si se llamasen pagina_1.html y pagina_2.html, a no ser
que se tratase de páginas del mismo tipo en las que es clave el orden, como
es el caso de las páginas de un manual.

Es conveniente plani…car cómo va a ser el sitio web partiendo de las carpetas

iniciales. Lógicamente, es imposible tener todo en cuenta, por lo que a medida
que vaya creciendo el sitio, se irán creando las carpetas que sean necesario.

Siguiendo con el ejemplo que se está desarrollando según se completan los

contenidos del tema, en primer lugar se creará el sitio web en el ordenador, y
cuando se de por …nalizado se subirá a un servidor web.
En primer lugar se creará la carpeta raíz, que en este caso se ha denominado
sitio_‡ores, y se ha ubicado en la carpeta de ejercicios del curso.
A priori, la carpeta contendrá las páginas web, entre las que habrá que incluir
un index, una hoja de estilo, e imágenes del diseño de la página, como
logos, imágenes para el fondo, etc. Es deseable que las imágenes se ubiquen en
una carpeta que puede llamarse imagenes. Si más adelante se dispone de otros
elementos, como archivos javascript, archivos para descargar, etc, habrá que crear
nuevas carpetas para ubicarlos con un cierto orden.
Un ejemplo de las secciones que se pueden crear son:

Una sección sobre las ‡ores, con fotografías.

Una página sobre la asociación.

Un formulario de contacto.

Una página con noticias sobre el tema.

A excepción de la sección de ‡ores, las otras serán páginas simples, que se

pueden ubicar en la carpeta raíz.
Siguiendo con el ejemplo, en la sección de ‡ores sería deseable mostrar una
amplia galería de fotografías. Para que el visitante pueda encontrar una ‡or en
concreto, es importante que las fotografías están clasi…cadas. Por ello, es intere-
sante crear un índice alfabético con las ‡ores. En otra página se mostrarán las
fotos. Como no conviene crear una página muy grande, con muchas fotografías, se
puede dividir en las distintas categorías, que en principio serán cuatro.
En resumen, para la sección de ‡ores, se necesitarían 5 páginas y fotografías,
que estarán mejor recogidas en una carpeta denominada fotos. No son demasiados
elementos, pero puede pensarse en agruparlos todos dentro de una carpeta. Esto
se hace necesario cuando hay muchos archivos, pero con tan pocos puede resultar
molesto. Como el …n del ejemplo es didáctico, se creará una subcarpeta para esta
sección, que se denominará ‡ores.
Por lo tanto, la estructura de archivos planteada para el sitio quedaría así
(Figura 17):

29
Figura 17: Estructura de …cheros creada como ejemplo de un sitio web
(sitio_‡ores).

4.4. Navegación
Antes de comenzar a de…nir la navegación, se ha de tener una idea clara de cómo
va a ser el sitio web, es decir, tener preconcebido tanto la estructura como la
extensión del sitio. Así, se podrá elegir el sistema de navegación más adecuado.
Si se crea un sitio sobre la marcha, sin plani…cación, según vaya creciendo,
la navegación a través de él se hará más complicada y al …nal no quedará más
remedio que hacer modi…caciones que resultarán muy costosas. Existe una regla
que dice que un usuario no debería de necesitar más de tres clics para llegar a la
página que busca, y es por ello por lo que hay que pensar en facilitar la navegación.
Así, el usuario ha de ser capaz de moverse de forma intuitiva por el sitio web sin
perderse, y con este …n habrá que tener en cuenta las siguientes consideraciones:

El usuario debe de saber dónde está.- Con un buen diseño de la página

el usuario siempre tendrá claro en qué parte del sitio se encuentra. A este
respecto resulta muy útil el título de la página y utilizar un encabezado que
identi…que la sección. También es necesario que el usuario controle en todo
momento si está en un sitio concreto o ha pulsado un enlace que le ha llevado
a otro diferente.

El usuario debe de saber dónde ha estado.- Hay que evitar que el

usuario pase una y otra vez por la misma página para buscar algo. Por
ejemplo, distinguiendo los enlaces ya visitados.

El usuario debe de saber dónde puede ir.- Una página web se basa
en enlaces, y estos deben de ser claramente identi…cables. Además, no deben
de ofrecer dudas de a dónde llevan, por ejemplo con nombres de páginas en-

30
 tendibles, que se muestran en la barra de estado, o con textos de información
emergentes.

Debe de poder seguir navegando.- El diseño del sitio ha de ser tal que
en ningún caso se enviará a un usuario a una página en la que no existan
enlaces, desde la que no pueda continuar recorriendo el sitio.

4.5. Estructura del menú

El uso de menús es muy habitual en las páginas web. Un menú no es más que
una lista de enlaces relativos a un determinado sitio denominados elementos del
menú.
Por lo general el menú se suele colocar en la parte superior de la página, junto
al logo o debajo de él, o en un lateral (normalmente el izquierdo). El menú no debe
de ser demasiado extenso. En un sitio grande no ha de pretenderse enlazar con
todas las páginas, y no sería útil que el usuario tuviese que buscar entre multitud
de enlaces.
Normalmente, aparecerán las secciones del sitio web, y por ejemplo, se podrán
utilizar diferentes métodos para que el usuario pueda expandir cada sección y ver
enlaces a los apartados de la sección, o utilizar menús desplegables. También se
pueden mostrar los enlaces a las distintas partes de la sección en que se encuentra
el usuario, ya que si está en esa sección es probable que le interesen los apartados
relacionados.
Por otro lado, los elementos del menú han de ser descriptivos. Por ejemplo, no
es útil poner una imagen, por bonita que sea, si puede que el usuario no entienda
qué signi…ca o a dónde lleva, o que para saberlo tenga que poner el cursor sobre
él. El menú ha de ser ligero y no ocupar demasiado espacio ya que se repetirá en
todas las páginas.
En lo que se re…ere al código, el menú suele tener elementos basados en
<ul></ul>. Dentro de cada elemento de la lista, se colocará un enlace. El as-
pecto del menú se consigue por CSS.

4.6. Estructura de la página

Como norma general todas las páginas mantendrán una misma estructura. Por
ejemplo, tendrán el mismo logo o título, el sistema de navegación en la misma
posición, el mismo pie, etc. Así, únicamente se cambiará el contenido.
Una excepción a esta regla puede ser la página de inicio puesto que esta
página puede servir para la presentación del sitio, y el visitante se hará una idea
de qué es lo que puede encontrar en ese sitio a partir de ella (una consecuencia de
esto es que tenga más enlaces que las otras páginas). Respecto al resto de páginas,
no es mala idea comenzar creando una página base con elementos comunes para
utilizar a modo de plantilla. Para el ejemplo que se está considerando desde el
inicio del capítulo se necesitarían los siguientes elementos:

Un título.- Para lo que se podra utilizar un encabezado h1. En el se mostrará

el nombre de la asociación: Floramics.

Un menú.- En este caso se pondrá un enlace a las siguientes secciones:

31
 Inicio (index.html ).
Flores (‡ores/index.html ).
Nosotros (nosotros.html ).
Contacto (contacto.html ).
Noticias (noticias.html )

Como el menú sólo tiene cinco elementos, se podrá ubicar en la parte

superior, ya que en un lateral se desperdiciaría espacio.
Un área de contenido.- Cambiará en cada página, pero tendrá un título
para la sección.
El pie.- Por ejemplo para poner el copyright de la página. Para el pie se
podrá utilizar un elemento de bloque como un párrafo o un div ; también ex-
iste una etiqueta especí…ca, <address> utilizada para contener información
sobre el autor de la página.
Para que quede mejor estructurada la página se pueden utilizar divisiones en
las tres secciones: encabezado (Título y menú), contenido y pie. De esta manera,
entre páginas, prácticamente, sólo se cambiará el contenido.
Con esta estructura en mente ya se puede escribir el código. Se creará una
nueva página, con head, body, etc. Dentro se crearán tres divisiones, en la primera,
se colocará un <h1> con el nombre de la asociación. También una <ul>, con un
elemento y un enlace para cada una de las secciones. La división central se dejará
en blanco, ya que será la que se irá cambiando. En la tercera división se introducirá
el texto del pie. Por ejemplo: c Todos los derechos reservados.
Como, por ejemplo, en un futuro la página contendrá un enlace a la hoja de
estilos, es conveniente ponerlo ya, decidiendo un nombre para la hoja, por ejemplo:
estilo.css.
Una vez creada la página se guardará con el nombre: base.html.
Como la página tiene pocos elementos, es recomendable diseñarla escribiendo
directamente el código fuente. Una vez creada, la página se puede visualizar con
un navegador haciendo doble click directamente sobre el archivo.

5. Publicación
Una vez que se da por …nalizada la página web sólo queda publicarla en Internet
para hacerla accesible a los internautas de todo el mundo. Hoy en día parece
normal que cualquier persona del planeta pueda tener acceso a páginas web en
Internet pero hasta la década de 1990 a nadie habría pensado que sería tan fácil
y tan barato poder comunicarse con millones de personas.
Básicamente, para publicar hace falta tener acceso a un servidor de Internet
y disponer de una forma de subir los archivos al servidor. También es conveniente
saber lo que es un dominio de Internet y cómo hacer que la página en cuestión
sea encontrada por los buscadores.
También es posible publicar en un servidor local instalado en un ordenador
concreto, de esta forma se pueden probar las páginas dinámicas sin subirlas a In-
ternet. Por ejemplo, WAMP o XAMPP permite instalar un entorno con el servidor
APACHE, PHP, MySQL en Windows (para Linux XAMPP o LAMP ).

32
 Como se advirtió anteriormente, si lo que interesa es simplemente escribir en
Internet sin quererse implicar en la parte técnica o informática, lo más adecuado
es utilizar los blogs gratuitos como Blogger o WordPress.com.

5.1. Servidores
Para que la página web se vea desde Internet, simplemente ha de estar almacenada
en un servidor de Internet. Es decir, se ha de disponer de espacio en un servidor
para poder subir los archivos, donde cualquier persona pueda verlos.
Es fácil disponer de un servidor de Internet, sólo hace falta un ordenador, una
dirección IP …ja, una conexión telefónica y un software adecuado (como el servidor
Apache, que además es gratuito).16 .
Aun así, crear un servidor tiene cierta complejidad y se sale del ámbito de este
tema, además se necesitaría una conexión permanente a Internet y un ordenador
con el servidor web en funcionamiento las 24 horas del día. Es más accesible instalar
un servidor local como WAMP.
Para acceder a un servidor de Internet existen dos alternativas, buscar un
servidor gratuito o contratar uno de pago. Para empezar se puede utilizar un
servidor gratuito, pero para trabajos más serios es conveniente utilizar un servidor
de pago.

5.1.1. Servidores gratuitos

Existen dos alternativas gratuitas:

Sitios especializados.- Existen sitios web especializados en ofrecer espacio

gratuito (ej.: Fortunecity, Tripod, iEspaña, Galeon , etc.). La mayoría colo-
carán publicidad en las páginas alojadas. Los servidores gratuitos pueden
imponer restricciones en el uso de ciertas instrucciones de programación web
y no permiten cambiar la con…guración del servidor. Cada vez es más difícil
encontrar servidores gratuitos con un mínimo de calidad. Google Sites es un
caso aparte.17

Proveedores de acceso.- Cuando se contrata un servicio de conexión a

Internet a través de un proveedor, suelen ofrecer de forma gratuita un espacio
web en sus servidores (ej.: ya.com, Orange, Telefónica, etc.18

5.1.2. Servidores de pago

Si se desea tener un lugar más "profesional"donde colocar las páginas personales o
las de una empresa, se pueden utilizar los servicios de empresas especializadas que
por un precio razonable ofrecen muchos servicios (ej.: Arsys , Acens o Alojalia).
16
Esto explica el gran crecimiento inicial de Internet.
17
Algunos proveedores anuncian servidores gratuitos pero al leer el contrato con detalle se
pueden encontrar condiciones como que sólo es gratuito el primer mes, que hay que tener un
número mínimos de visitas, etc. También hay que destacar que la mayoría de servidores gratuitos
no admiten el uso de páginas dinámicas ni bases de datos.
18
Si se tiene contratada una conexión a Internet, es conveniente revisar las condiciones del
contrato porque probablemente se tiene derecho a un espacio gratuito en el servidor.

33
 Los servidores pueden ser de dos tipos básicos: compartidos o dedicados.
Un servidor compartido (shared hosting) es aquel que comparte máquina física con
otros servidores compartidos. En un servidor dedicado una máquina física soporta
un solo servidor dedicado.
En un servidor compartido no se permite cambiar completamente la con…gu-
ración del servidor, ni hacer reinicios físicos de la máquina; por el contrario, en
un servidor dedicado se pueden hacer las modi…caciones que se deseen, puesto
que el servidor está completamente a "tu"disposición. Inicialmente es preferible
un servidor compartido ya que es más asequible y ofrece prácticamente todos los
servicios que son necesarios para un uso particular o profesional. Un servidor ded-
icado es conveniente para un sitio web con muchas visitas, o si se requiere una
con…guración muy especial del servidor.
Por último, indicar que a la hora de contratar un servidor se ha de tener en
cuenta que es importante la velocidad con la que las páginas se cargan en Internet
y no todos ofrecen la misma velocidad de transferencia o ancho de banda. Algunos
servidores ofrecen "espacio ilimitado"pero en realidad quieren decir "espacio su…-
ciente"para la mayor parte de los usuarios. También es importante …jarse en las
condiciones del servicio de atención al cliente que ofrecen los distintos proveedores.

5.2. Dominios de Internet

Un servidor web necesita disponer de un dominio de Internet para que se pueda
acceder a él en la forma http://www.nombre_dominio.com. Por ejemplo, si se
desea disponer del sitio web http://www.dibujosdemotos.com habrá que contratar
el registro del dominio "dibujosdemotos.com"(y eso, siempre que alguien no lo
haya registrado antes).
Los dominios hay que contratarlos en un registrador autorizado por un periodo
de tiempo determinado, por ejemplo, un dominio .com por un año vale sobre 25
euros. Las empresas que ofrecen alojamiento también suelen ofrecer registro de
dominios: Arsys o Acens.
Los servidores gratuitos suelen ofrecer subdominios de la forma
http://www.servidor_gratuito.com/tu_subdominio, de modo que no se necesita
registrar ningún dominio ya que los subdominios no se registran.

5.3. Subir archivos al servidor

Lo normal es desarrollar el sitio web de forma local, es decir, en un equipo propio.
Pero una vez se haya conseguido un servidor, gratuito o de pago, habrá que subirle
todos los archivos implicados en la páginna web. Hay varias opciones a la hora de
subir los archivos al servidor:

a) Utilizar un programa especí…co para ello (ej.: Filezilla).- Se trata de

un cliente FTP. Para transferir …cheros por FTP se necesita tener instalado
un programa cliente de FTP en el ordenador y conocer la dirección del
servidor FTP con la que se desea conectar. La dirección la proporcionará la
empresa con la que se tenga el alojamiento. Una vez conectado, los programas
FTP tienen un interfaz bastante simple. Básicamente, muestran los archivos
del equipo a un lado, y los del servidor a otro, con lo que sólo hay que
arrastrar y soltar archivos de un lado a otro. La principal ventaja del FTP,

34
 a parte de su comodidad, es que permite subir varios archivos y carpetas
enteras a la vez, sin tener que ir uno por uno.

b) Utilizar un editor de páginas web que incorpore esta funcionalidad

(ej: Dreamweaver ).- Algunos editores profesionales incorporan el acceso
FTP. Esto posibilita subir y descargar los archivos cómodamente usando el
interfaz del editor. Además, permiten tenerlos sincronizados, e ir subiendo
automáticamente aquellos …cheros que se vayan actualizando.

c) Utilizar las facilidades proporcionadas por la empresa de hosting.-

Realmente no se necesita ninguno de los programas citados anteriormente,
aunque dichos programas ofrezcan una gran calidad. Toda empresa de host-
ing proporciona un interfaz a través del que subir archivos al servidor. Este
interfaz depende de la empresa: los de alojamientos gratuitos suelen ser bas-
tantes simples, permitiendo subir unos pocos archivos cada vez a través de un
formulario web (esto resulta muy tedioso si se ha de subir un sitio completo
de tamaño medio); los alojamientos de pago suelen tener un mejor servicio
y algunos implementan un interfaz muy completo (WebFTP ) que realmente
puede sustituir al cliente FTP.

5.4. Obtener visitantes

Una vez se tenga "pinchada"la página web en Internet, interesará que la visiten
muchas personas (especialmente si tiene una …nalidad mercantil). Para ello lo fun-
damental es que la página tenga contenido interesante, buen diseño y se actualice
periódicamente. Además de lo indicado anteriormente aún hay algunas otras cosas
que se pueden hacer para conseguir más visitas y que se detallarán a continuación.
Los visitantes llegan por primera vez a una página web de dos formas bási-
cas, una es a través de los buscadores y la segunda a través de enlaces que los
internautas encuentran en otras páginas. No hay una estadística o…cial de la im-
portancia de cada vía de acceso, pero se estima que es más importante a través
de los buscadores (en torno a un 80-90 %), aunque inicialmente los enlaces tienen
más importancia porque sin ellos no se podría subir puestos en los buscadores.
Para conseguir visitas provenientes de los buscadores hay que utilizar técnicas de
posicionamiento y para conseguir visitas desde otras páginas hay que conseguir en-
laces. Técnicas de posicionamieno y enlaces están relacionados ya que de cuantos
más enlaces se disponga, más se aparecerá en los buscadores, y viceversa.
Aunque está aceptado que las técnicas de posicionamiento e intercambios in-
‡uyen mucho en el número de visitas recibidas (y cobran mucho dinero por aplicar-
las) en realidad lo más importante es el contenido de la web, ya que con un buen
contenido, los propios buscadores incluirían la página automáticamente en sus
buscadores en una buena posición y los webmasters incluirían enlaces en la página
sin pedírselo. Todo esto no quiere decir que no haya que utilizar estas técnicas,
sino que su importancia es relativa y supeditada al contenido de la página.

5.4.1. Posicionamiento
Fundamentalmente se hará referencia al posicionamiento en el buscador Google,
porque es el más utilizado y porque los demás buscadores se basan en los mismos

35
principios para ordenar sus resultados.
Cuando una persona introduce una o varias palabras claves en un buscador,
éste realiza complejos procesos para obtener una lista de resultados con las páginas
que mejor responden a esa búsqueda. Estos procesos son secretos y los buscadores
sólo dan una información general de los factores que in‡uyen en los resultados.
Esto es así por dos motivos, el primero para que la competencia no los copie y
el segundo para que los creadores de las páginas no hagan trampas para obtener
mejores posiciones. Además según unos van descubriendo los entresijos de los
buscadores, los otros los van cambiando para penalizar a los tramposos. Al …nal,
desde el punto de vista del creador de páginas web, se impone el sentido común,
y lo mejor es dedicarse a mejorar en contenido en lugar de andar bordeando el
límite de lo permitido en técnicas de posicionamiento.
Conseguir un buen posicionamiento es una tarea que requiere bastante tiem-
po, hasta las dos o tres semanas no se ven los primeros resultados y hacen falta
varios meses para empezar a ver realmente el lugar que le corresponde al sitio web
previamente diseñado.19 Así pues, a la hora de lograr un buen posicionamiento se
tendrán en cuenta las siguientes consideraciones:

1. Contenido de calidad: Es el factor primordial para obtener un buen posi-

cionamiento. Sin contenido de calidad no hay nada que hacer, con contenido
de calidad lo demás viene rodado. Contenido de calidad quiere decir con-
tenido interesante, bien redactado y con diseño agradable. Una página con
un buen contenido y mal posicionamiento tardará más en alcanzar una buena
posición, pero lo conseguirá.

2. Sitio bien estructurado y sencillo: Para los robots de Google cuanto más
fácil sea extraer la información de la página tanto mejor. Hay que colocar
su…cientes enlaces de texto y con las palabras clave adecuadas y huir de las
excesivas ‡orituras y virguerías técnicas.

3. Lograr enlaces desde otros sitios web: El factor de más peso en el PageRank
de Google es el número y la calidad de los enlaces que apuntan al sitio.
Informa de la existencia de la página a todo el mundo, principalmente a los
sitios de temática similar.

4. Alta en Google: El primer paso para conseguir una buena posición en Google
es aparecer en el buscador (para hacerlo visita la página: addurl ).

5. No saltarse las reglas impuestas por los buscadores: Si se hace lo contrario

penalizarán a la página y se perderán muchos meses para recuperar su posi-
cionamiento.

6. Sobre el diseño de la página hay que tener en las siguientes recomendaciones:

Si se utiliza demasiado Flash, frames, DHTML, JavaScript y mucha progra-
mación web se di…cultará el trabajo de los robots. Es conveniente utilizar
títulos cortos y claros, con los estilos de encabezados (h1, h2). Los títulos
son fundamentales en las búsquedas, hay que procurar utilizar el sinónimo
19
Hay que tener en cuenta que dado el gran número de páginas existentes, a los robots de los
buscadores (también conocidos como arañas o crawlers) les lleva bastantes días encontrar las
páginas nuevas.

36
 más común, por ejemplo, coches, vehículos, autos, automóviles, etc. Hay her-
ramientas para ver cuáles son las palabras más buscadas. Google no reconoce
el texto incluido en imágenes por lo que no se deben utilizar imágenes para
los títulos ni para los enlaces principales del sitio web. Si se opta por uti-
lizar imágenes es conveniente recurrir al atributo ALT para poner el texto
relevante.
7. Dar de alta a la página en directorios importantes como Dmoz : Aunque han
perdido importancia todavía son una forma de conseguir enlaces.
8. Conocer las palabras clave más usadas: Para ello existen herramientas como
es el caso de Google AdWords, con la que se puede conocer la relevancia de
palabras clave y las búsquedas que se han hecho con esas palabras.
9. Enlazar las páginas desde el propio sitio web de forma bien estructurada.
10. Informar a Google de la actualizaciones con Sitemaps.

A pesar de estas técnicas, existen algunas recomendaciones que son contra-

dictorias. Por ejemplo, los enlaces con html son mejor indexados por los robots
que los incluidos en funciones javascript, pero los menús con javascript son más
intuitivos para los usuarios y mejoran el diseño de la página.

5.4.2. Conseguir enlaces.

La mejor forma de conseguir que otros webmasters enlacen con una determinada
página es creando una página con contenido y diseño de calidad, así los webmasters
considerarán que poner un enlace a la página es algo útil para sus visitantes.
También es importante dar a conocer el sitio web. Esta tarea es clave, sobre
todo, en una primera fase ya que es casi la única forma de conseguir enlaces.
Conseguir enlaces es realmente difícil por lo que no queda otro remedio que invertir
tiempo y esfuerzo en ello. Hay que buscar sitios de temática similar y registrarse,
participar en las actividades, contestar preguntas en los foros, etc. En función de
la temática de nuestro sitio deberemos buscar participar en determinados lugares
como Foros, Blogs, Directorios, Redes sociales, etc.
Intercambiar enlaces es muy deseable, para ello se buscarán sitios web de
temática similar al del sitio en concreto, y se comprobará si dichos sitios tienen
una sección de intercambio de enlaces. Si es así habrá que escribirles y proponerles
un intercambio. podremos solicitar intercambios con sitios más importantes.
Por último, para conseguir enlaces es muy útil echar mano de los amigos que
se tengan en el ciberespacio.

5.5. Publicidad
Una vez se tiene publicada la página web en Internet y bien posicionada con
muchos visitantes puede ser interesante incluir publicidad en ella. De forma mucho
más sencilla de lo que pudiera parecer se pueden poner anuncios comerciales y
conseguir dinero. La cantidad de dinero es proporcional al número de visitantes
de la página.
Existen diferentes sistemas de publicidad en páginas web que pueden ser agru-
pados en las siguientes categorías:

37
Publicidad contextual.- Es un sistema que inserta de forma automática
publicidad relacionada con el contenido de la página web. Por ejemplo, si la
página habla de deporte, se insertarán anuncios de anunciantes relacionados
con el deporte. Cada vez que un usuario hace clic en un anuncio el propietario
de la página recibe una cantidad de dinero que varía según cada anuncio. El
sistema más popular de publicidad contextual es AdSense de Google.

Publicidad directa.- Es la que el propietario de la página acuerda direc-

tamente con el anunciante, en función del tipo de publicidad y del número
de visitantes se pacta el precio. Una variante de este tipo de publicidad es el
patrocinio mediante el cual una empresa o entidad paga una cantidad al mes
por aparecer como patrocinador de la página. Existen programas gratuitos
que permiten gestionar este tipo de publicidad contabilizando los clicks.

Publicidad por registro o a…liación.- Se basa en pagar por cada registro

o venta que produzca el anuncio, a diferencia de la publicidad contextual que
paga cada vez que el usuario hace click en el anuncio, independientemente de
lo que pase después. Es decir, en la publicidad por registro o venta el sistema
controla si el usuario que hace click acaba registrándose o comprando el pro-
ducto anunciado, y en caso a…rmativo el propietario de la página web recibe
la comisión pactada previamente. Estos sistemas se basan en guardar una
cookie apuntándose un número IP en el ordenador del usuario cuando este
hace click en el anuncio, y comprobando luego si, en un plazo determinado
de días, el usuario acaba comprando el producto o registrandose en la tienda
on-line. En estos sistemas se ofrecen altas comisiones pero el número conver-
siones de clicks en registros o compras son bajos. Ejemplos de este tipo de
publicidad son la publicidad que ofrecen los casinos on-line, TradeDoubler
también tiene una sección con este tipo de publicidad.

La publicidad por agencia.- Está reservada al sector empresarial, al con-

trario que los otros sistemas que han visto anteriormente y que pueden ser
utilizados por autores de páginas web particulares. Las agencias de publi-
cidad en internet gestionan los anuncios de los grandes medios de comuni-
cación y de empresas importantes.

38