Curso de HTML5

Introducin al Html:
Introduccin
La estructura
Tipo de Documento
Especificar el idioma
Titulo o Title
Meta Description
Tipo de Codificacin
Prrafos
Resaltar Textos
Comentarios
Ttulos h1, h2...
Las Imgenes
Etiqueta de Imagen
Ruta de Imagen
Nombre de Archivo
Dimensiones
Texto Alternativo
Los Enlaces
Etiqueta de Enlaces
Ruta de Enlaces
El Target
Title Alternativo
Anclajes
Propiedad rel
Ejemplo Hasta Ahora
Saltos de Lnea
Las Listas
Listas Desordenadas
Listas Ordenadas
Metatag description
Palabras Clave

Curso de HTML5
Lo que hacen FrontPage, Dreamweaver, Html-Kit, NVU o cualquier otro
programa de los que te ayudan a hacer pginas web, es traducir lo que
vosotros queris a cierto cdigo llamado HTML. En un principio las pginas se
hacan directamente en este cdigo, hasta que han surgido programas como
los mencionados antes que permiten crear una web sin saber nada de cdigos.
No obstante, es recomendable conocer al menos algunos aspectos bsicos
de cdigo Html pues nos permitir hacer muchas mejoras en nuestra web,
como por ejemplo mejorar nuestra posicin en los buscadores, insertar con
xito publicidad, contadores, estadsticas y foros, y otras cosillas que os
contar conforme vayamos avanzando en esto. Aprender cdigo Html es
bsico y como vers en este tutorial, son solo tres cosillas las que hay que
aprenderse.
Aunque te pueda parecer en principio algo muy raro o complicado, te
recomiendo que repases estas lecciones, pues te abren un gran abanico de
posibilidades. Yo cuando comenc a aprender a crear webs vea como bichos
raros a aquellos webmasters que hacan las pginas en Html escribiendo
cdigo Html directamente... ahora soy otro de los que lo usan, je, y una de dos,
o no eran tan raros o me he convertido en uno de esos bichos raros!.
Te recomiendo tambin que a la vez que te adentras en esto del cdigo Html
te mires tambin el tema de los Estilos CSSpues son bastante
complementarios. A la larga lo agradecers mucho.
Bueno, sin ms rollo, vamos a ver qu facilito es este tutorial completo y
gratuito de Html5 y el gran provecho que le vas a sacar a esto! Para avanzar
pulsa sobre la flechita de abajo para pasar a la pgina siguiente, o pulsa sobre
el enlace en el que pone "Introduccin al Html" en la barra naranja de arriba.

Introduccin al Curso de HTML

Antes de empezar quiero comentarte alguna cosilla. En adelante te vas a
encontrar con unos cuantos ejemplos que puedes ir copiando con el block de
notas de Windows (notepad.exe) por ejemplo. No uses el Wordpad de Windows
ni el Microsoft Word ni ningn otro procesador de textos, pues es preciso que el
software en el que escribas cdigo HTML (o Php, Java script, etc.) NO le asigne
formatos al texto (color, tamao, etc., como el Word de Microsoft, etc.).
Visita la seccin Editores de Texto Plano para saber un poco ms del porqu y
para encontrar enlaces de descarga de Editores de Texto Plano gratuitos.
Vers como el cdigo HTML (html5) que te pongo en los ejemplos suele ir
coloreado de azul. Esto es para poder diferenciarlo ms tarde con otros tipos
de cdigo (como el css, php, java script, etc. que irn de otro color). Eso nos
clarificar los ejemplos bastante.
Bajo mi punto de vista (y de muchos otros webmasters, claro) el cdigo HTML
solo hay que usarlo para aadir el contenido en la web, pero no para darle
formas, colores ni nada que signifique "adornar" la web. Para eso usaremos
los Estilos CSS que veremos despus de terminar este curso de Html5. Es por
eso que prescindiremos de todo el HTML que se usa para adornos. Repito,
HTML solo para aadir informacin, CSS para darle forma, Si usas HTML para
cambiar tamao al texto, poner bordes o recuadros, dar mrgenes, colores de
fondo y tal, estars perdiendo el tiempo y te acordars de estas notas
cuando veas que tus pginas web no se ven igual en unos navegadores que en
otros. Seguir los consejos de CCTW es un acto de fe, Me hars caso? Ya lo
veremos.

La estructura
Ms de una vez os habris tropezado, bien por curiosidad o bien por error al
pulsar el botn equivocado, con una pantalla llena de nmeros y letras que ni
por asomo parecen algo con sentido. Los ms aventureros habris entrado en
esa zona "prohibida" para insertar algunos fragmentos de cdigo para vuestro
contador, estadsticas, etc., pensando "como esto no chute....como me cargue
m querida pgina...va a ver ese Jorgens lo que es bueno. Pues bien, vamos a
desmenuzar la estructura de una pgina web para ir perdindole el miedo.
Toda pgina web hecha con Html5, por complicada que parezca, se divide en
dos partes bien diferentes a las que llamaremos Cabecera (head)
y Cuerpo (body). Adems, todas las pginas web empiezan con la palabra
mgica (o etiqueta) <HTML> y terminan con la etiqueta </HTML>. Cada
pgina web adems, solo tiene una sola cabecera y un solo cuerpo. Nos
dejamos los dobles cuerpos y dobles cabezas para la mitologa. Para que os
hagis una idea, esto sera una pgina web con todas las de la Ley, eso s,
vaca.

<html>
<head>
</head>
<body>

</body>
</html>

Buscando un smil, podramos decir que todo el cdigo va metido en un

armario llamado HTML y que a su vez tiene dos compartimentos separados,
uno llamado head y otro llamado body.
El contenido correspondiente a la cabecera (head) tendr que ir siempre
entre la etiqueta <head> que indica inicio de la cabecera, y la
etiqueta </head> que indica el fin de la cabecera. Estas dos etiquetas se
diferencian por la barra que tiene delante la que indica fin: /. La que no tiene la
barra siempre indica que a partir de ah el cdigo pertenece a esa etiqueta
(head, body o lo que sea), mientras que la que s lleva la barra indica siempre
que el cdigo de esa parte ha terminado.
Lo mismo ocurre con el Cuerpo (body), cuyo contenido ha de estar siempre
entre la etiqueta <body> que indica comienzo del Cuerpo, y la
etiqueta </body> que indica su final. Con esto ya te ha de quedar bien claro
que la barra "/" indica siempre final de una parte, no?

Existen cosillas que SOLO podremos colocar dentro del encabezado (head) y
otras cosas que solo funcionarn dentro del cuerpo (body), pero esas cosas las
iremos viendo conforme avancemos.
Os muestro abajo el cdigo de una pgina web vaca, pero con algunas
cosillas ms. Este cdigo es el que tiene una pgina de esas que creis con
FrontPage, Dreamweaver, Html-Kit o programas por el estilo (programas que
deberas desinstalar ya mismo...), nada ms empezar, es decir, cuando an no
habis metido nada en ella.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso8859-1">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>

Vemos
en
este
cdigo
las
palabras
mgicas
comentadas
antes, HTML, head, body y sus correspondientes cierres con la barra "/". A
estas palabras encerradas con los smbolos < y > las llamaremos etiquetas.
Aparecen algunas cosas nuevas, pero las veremos con detenimiento ms
adelante.
Con esto que sabes ahora mismo, podras mirar el cdigo Html de cualquier
pgina web e identificar dnde empieza su cdigo HTML, dnde termina, y
dnde empiezan y acaban la cabecera y el body, verdad?.
En CCTW tienes instrucciones sobre cmo ver el cdigo Html de cualquier
pgina web, por si te interesa aprenderlo (y creme, S te interesa!).

Definicin del tipo de documento con DOCTYPE

Aunque te he dicho antes que la primera etiqueta con la que ha de empezar
el cdigo de una pgina web deba ser la etiqueta <HTML>, realmente la
primera lnea, antes de esa etiqueta, debe ser la de definicin del tipo de
documento. Lo dicho sigue siendo cierto, pues la lnea de la que te hablo ahora
no es cdigo Html sino solo un modo de indicar al navegador qu tipo de
documento le estamos presentando.
Mediante esa lnea por tanto, podemos indicar al navegador que lo que
contiene el archivo que estamos creando es cdigo Html y qu tipo de Html
concretamente, pues hay varias formas de escribirlo en funcin de la versin
de Html que vayamos a usar al escribir el cdigo.
En estas lecciones estamos aprendiendo Html5, la ltima versin de Html por
el momento. Siempre que crees una pgina web basada en el Html explicado
en ComoCrearTuWeb coloca este cdigo en la primera lnea de los archivos
HTML, tal cual, sin cambiar nada. Eso especifica que usamos la versin Html5.
<! DOCTYPE HTML>
Anteriormente, para otras versiones de Html, la lnea para definir el tipo de
documento era ms larga y liosa, pero ahora en Html5 es as de cortita. Mejor,
no?
Qudate con que en estas lecciones vamos a escribir cdigo Html del
tipo HTML5, y con cul es la primera lnea que debe aparecer en el archivo de
cada una de tus pginas.
De modo que, una pgina web vaca, pero con el tipo de documento ya
declarado correctamente, sera as:
<! DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Esto por el momento es un acto de fe. Agradecers esa lnea si alguna vez
quieres validar tu cdigo Html, cosa que ya veremos lo que es. Seguimos?
Pues dale a la flecha de la derecha y continuamos!

Cmo y dnde indicar el idioma en HTML5

Como decamos, estamos aprendiendo HTML5 y esta versin nos

obliga a definir qu lenguaje o idioma estamos usando para los
contenidos. Esta definicin se indica en la etiqueta que abre el cdigo, la
etiqueta <HTML>, quedando de este modo:
<!DOCTYPE html>
<html lang="es">
..........
Adems, no se pueden indicar varios idiomas en una misma pgina.
Olvida la idea de colocar un prrafo en un idioma y el de abajo en otro
traduciendo el anterior. Si necesitas una pgina en varios idiomas has de
crear una pgina para cada idioma, si es posible en un dominio con la
extensin correspondiente (un punto es, otra con punto it, etc.). Si no
fuera posible, hazlo en un subdominio de tu dominio. No deberas
hacerlo en una carpeta aparte ni mucho menos en la misma carpeta en
la que est la versin del idioma principal, de veras.
El rey del posicionamiento es Google (claro, es quien dicta las normas)
y fjate que ellos tienen un dominio distinto para cada lenguaje. Puedes
crear subdominios para las traducciones. Yo, por ejemplo, podra crear el
subdominio en.comocreartuweb.com para la versin en ingls,
de.comocreartuweb.com
para
la
traduccin
en
alemn,
it.comocreartuweb.com para la italiana. Esa es una buena prctica si no
quieres comprar un dominio para cada idioma.
Resumiendo, las dos lneas de arriba son comunes a toooodas las
pginas de tus webs, y de las mas. A menos claro que el idioma elegido
no sea el espaol (es). Para otros idiomas las siglas son otras, claro.
Puedes ver las siglas de cada idioma en la wiki peda mismo.
Nuestro cdigo Html ya es as de grandote!:
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>

Etiqueta Title
Como te he dicho antes, hay una serie de elementos que no se ven
directamente en el contenido de las pginas y el title o ttulo definido en la
cabecera es uno de estos y, adems, es importantsimo.
Con las etiquetas <title> y </title> se define el ttulo de cada una de las
pginas de una web. No de la web completa sino de cada pgina del sitio web.
Por ejemplo, si tienes una web que habla de cocina, tendr dentro una pgina
que hable de una sopa, otra de tarta de fresa, etc., etc. Pues cada una de esas

pginas ha de tener un ttulo que represente a esa pgina, no uno genrico de

la web sino un <title> concreto para cada una de sus pginas.
Fjate que tenemos una etiqueta para indicar que empieza el ttulo y otra
para indicar que el ttulo ha terminado, <title> y </title>.
La lnea completa de un cdigo de pgina sera por ejemplo este:
<title>Ttulo de esta pgina</title>
Quedando el cdigo completo de nuestro ejemplo de este modo:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ttulo de esta pgina</title>
</head>
<body>
</body>
</html>
Lo que pongas entre esas etiquetas <title> ser lo que va a aparecer en la
barrita azul que hay en la parte superior de los navegadores, pero no aparece
dentro de la ventana del navegador, solo en esa barrita de arriba. Sirven no
solo para indicar al visitante qu va a encontrar en esa pgina, sino tambin a
los buscadores para saber de qu hablas en esa pgina.
Es muy muy muy importante que el ttulo de cada una de las pginas de
tu web sea distinto de unas a otras. Como tengas dos titles exactamente
iguales en varias de las pginas de tu sitio web, los buscadores (por ejemplo
Google) creern que tienes dos pginas idnticas (que una es copia de la otra)
de modo que solo har caso a una de ellas, solo indexar una de las dos. Cuida
que todas sean distintas para aumentar la cantidad de pginas que los
buscadores conocen de tu web y conseguir as aumentar las visitas de tu web.
No lo olvides!
Procura tambin, sin abusar, que entre las palabras del ttulo aparezcan las
palabras clave de esa pgina, es decir, aquellas palabras por las que crees que
podras ser encontrado por alguien que est usando Google para llegar a esa
pgina.
Se recomienda, adems de no repetirse en las distintas pginas de tu web,
que el contenido del title no tenga ms de 65 letras o caracteres ni ms de 15
palabras. Aprovecha para incluir en los ttulos palabras clave de esa pgina, es
decir, algunas de aquellas palabras por las que crees que podras ser
encontrado si alguien est interesado en encontrar una pgina como esa. Qu
escribira un usuario en Google para encontrarla? Pues esas son tus palabras
clave para esa pgina concreta. Adems, no se pueden colocar dos
etiquetas title dentro de la cabecera de una misma pgina, tan solo una por
pgina, de acuerdo?

Etiqueta meta description en Html5

Adems de la etiqueta title que acabamos de ver y que define el ttulo de la
pgina (no de la web, sino de esa pgina concreta) y que como hemos dicho,

ha de ser distinta en cada una de las pginas de tu web, tenemos otra etiqueta
de tipo meta importante, la etiqueta description.
<meta name="Description" content="descripcin de la pgina">
Actualmente los buscadores (incluido Google, el rey) solo hacen caso de las
meta etiquetas title y description, por lo que no hablaremos ya de ninguna
otra. Si tienes alguna ms en tu web puedes eliminarlas sin problema alguno.
Eso s, recuerda que el contenido de estas dos etiquetas ha de ser diferente en
cada una de las pginas de tu web, no lo olvides pues es un error muy comn,
incluso en pgina de cierta importancia. Repito, si tienes dos title o
dos descriptionidnticos en dos o ms pginas dentro de tu web, Google las
tomar como copias y solo indexar una de ellas, perdiendo posibilidades de
ser encontrado por los usuarios del buscador.
Se recomienda que el contenido dentro de la meta etiqueta description no
tenga ms de 150 caracteres ni ms de 30 palabras. Aprovecha y piensa bien
lo que vas a poner, pues las palabras clave de tu web deberan aparecer
dentro, sin repeticiones y manteniendo cierto sentido. Recuerda que es una
descripcin, no una ristra de palabras sin sentido. No coloques dos lneas de
description dentro de la cabecera de una misma pgina, recuerda, igual que
con title, coloca solamente un description.

Definir el charset o tipo de codificacin de tus pginas

Es posible que al escribir el ttulo de tu web del modo que te he enseado
antes, veas que aparecen caracteres extraos en esa barra superior del
navegador. Sobre todo al usar acentos o "ees". Por qu ocurre esto? Cmo
lo evitamos?
Imaginas la cantidad de caracteres extraos que existen? Cosas en hebreo,
en chino, o si no las letras rusas esas tan raras. Para no volver locos a los
navegadores tenemos que indicarles qu tipo de codificacin vamos a usar en
nuestras pginas web. Por ejemplo, para escribir en espaol o castellano y
evitar que aparezcan smbolos raros al escribir los acentos, tenemos que avisar
que estamos tratando de escribir en ese idioma. Para que se muestren
caracteres chinos y no una ristra de cosas sin sentido (como si el chino tuviera
sentido....) tendramos que avisarle igualmente al navegador que mostrara los
caracteres segn esa codificacin. Me explico?
Pues bien, para que se muestren correctamente las tildes o acentos que
escribamos en el contenido de nuestras pginas, tenemos que aadir una lnea
que indique ese tipo de codificacin. Como eso es algo que no se ve
directamente en el navegador, sino que es un tipo de definicin, est claro que
esa lnea de cdigo ha de ir en la cabecera.
La lnea para que los caracteres en castellano aparezcan bien en los
navegadores cuando se escribe cdigo Html5 sera esta:

<meta charset="utf-8" />

Esa lnea ha de ir en todas las pginas de nuestras webs, o al menos, en las

que no hablemos en chino ;=) Colcala siempre sin cambiarle nada, tal cual
est.
Vers que esta etiqueta empieza por la palabra meta y que no tiene etiqueta
de cierre (no se pone </meta> al final de la lnea). Es un caso un poco especial
pues normalmente casi siempre hay una etiqueta de cierre tras una etiqueta
de apertura. En el caso de que una etiqueta no use la correspondiente
etiqueta de cierre, se coloca en su lugar una barra al final de la lnea de
apertura. En este caso la puedes ver al final del cdigo que he colocado antes.
Te la he sealado en rojo para destacarla. Otra etiqueta que no tiene etiqueta
de cierre es la de imagen, que veremos enseguida.
Ahora que tenemos claro que el cdigo Html va a tener una codificacin del
tipo UTF-8, hemos de asegurarnos de que cada vez que guardamos un archivo
de cdigo, ha de guardarse como tal, como UTF-8. Si lo guardamos sin
especificar esto y por defecto se guardara con otra codificacin, podramos
tener los problemas comentados atrs, como que los acentos aparezcan raros,
etc. Visita la seccin Editores de Texto Plano de nuevo para leer cmo se elige
la codificacin antes de guardar un archivo. Especialmente si usas el Block de
Notas o Notepad. Creo que el Sublime Text reconoce automticamente la
codificacin y no necesita que le digas nada.
Y este es el cdigo que llevamos hecho por el momento en este tutorial y que
conocemos ya perfectamente, lnea a lnea
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Ttulo de esta pgina</title>
</head>
<body>
</body>
</html>
Por ltimo y antes de seguir aadiendo lneas y lneas de cdigo Html5 a
nuestros ejemplos, recuerda que la lnea que especifica el charset="utf-8" tiene
que ser la primera lnea que haya justo despus de <head>. En caso contrario
podra no ser leda por los navegadores. (Debe estar dentro de los primeros
512 caracteres del archivo).
Y tras estas ltimas pginas que han sido un poco rollo, vamos a ver cosas
ms vistosas.

Prrafos
Con lo explicado antes seguimos teniendo una pgina vaca. Os explico ahora
algunos elementos que podemos usar en nuestras pginas web, empezando
por los prrafos.
Lo ms bsico que podemos insertar en nuestra nueva pgina an en blanco,
son palabras. Vamos a ver como se pone en cdigo Html5 un prrafo.

En primer lugar deciros que todos los elementos (o casi todos los elementos)
de una web, (me refiero a todo lo "visible", o casi) ir dentro del body que ya
conocis, es decir, entre <body> y</body>. Existen otras cosas que no son
"visibles" y esas irn en el head principalmente. La lnea que vimos para
especificar el tipo de codificacin no es algo visible, mientras un prrafo que
intenta transmitir algo a los visitantes, obviamente s que es visible.
Para escribir un prrafo, lo haremos dentro de la zona visible (el body)
encerrando lo que queremos escribir entre los smbolos <p> y </p> que son
las etiquetas para escribir prrafos.
Como veis, la primera etiqueta indica comienzo de prrafo (de ah la "p" de
prrafo) y la segunda situada al final indica el final del prrafo, y lleva por tanto
la barrita "/".
Por ejemplo, si queremos que en nuestra web aparezca el siguiente prrafo:
Hola amigos, esta es mi nueva Web
tendremos que escribir, entre <body> y </body> la siguiente lnea:
<p>Hola amigos, esta es mi nueva Web</p>
de forma que el ejemplo anterior quedara as:
<!DOCTYPE HTML>
<HTML lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
</head>
<body>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</HTML>
Como ves, en este ejemplo se ha puesto ya el ttulo a la pgina. En concreto
se le ha llamado "Mi Nueva Web".
Si ahora quieres aadir otro prrafo, simplemente coloca otra lnea ms
antes o despus de la escrita antes, segn quieras que la nueva aparezca
encima o debajo del prrafo antiguo.
Por ejemplo, si quiero que antes del prrafo "Hola amigos...." aparezca la
palabra "BIENVENIDOS" el cdigo HTML debera quedar como sigue:
<!DOCTYPE HTML>
<HTML lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
</head>
<body>
<p>BIENVENIDOS!</p>
<p>Hola amigos, esta es mi nueva Web</p>

</body>
</HTML>
Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el
final del prrafo con </p>. Te evitar problemas ms adelante.

Ver cmo queda el ejemplo hasta ahora.

Si una vez abierta la ventana pulsas en "Ver" y luego en "Cdigo Fuente"
vers el cdigo HTML de esa pgina. Si no ves botones donde elegir "ver el
cdigo fuente" en la ventana que se abre, prueba a pulsar sobre el interior de
la pantalla de ejemplo con el botn derecho del ratn y escoge ah "ver el
cdigo fuente". Por supuesto, debera ser idntico al escrito arriba.
Si os va gustando todo esto seguidme a la pgina siguiente.

Resaltar Textos
Con el tag <p> (as se llama eso, o etiqueta, que se le va a hacer...) ya
sabemos poner un texto simple. Pero quizs en algn momento queramos
escribir texto en negrita, o subrayado, o cursiva, etc., etc., verdad? Pues
tambin para esos estilos existe un "tag" o una etiqueta determinada.
Textos en Negrita
Si encerramos un texto entre <b> y </b> ste aparecer en negrita. El
tag <b> representa a la propiedad "bold" que significa negrita.
Podemos aplicar a la vez los tags <p>, <b> y cualquiera de los que se
explican abajo.
Un ejemplo de un prrafo simple con una palabra en negrita, la palabra
"negrita":

<p>Este prrafo es normal y esta palabra va en <b>negrita</b>, lo ves?

</p>
Ver cmo queda el ejemplo hasta ahora.
Recuerda que para insertar un prrafo debes incluir esa lnea
entre <body> y </body>. Si olvidas colocar la etiqueta de cierre es muy
posible que todo el texto de la pgina a partir de ah aparezca en negrita.

Textos en Cursiva
Si encerramos un texto entre <i> y </i> ste aparecer en cursiva. El
tag <i> representa a la propiedad cursiva. Al igual que "b" representa "bold",
"i" representa "italic" que significa cursiva (lo s porque me lo han dicho
colegas del foro CCTW ).
Podemos aplicar a la vez los tags <p>, <b>, <i> y cualquiera de los que se
explican abajo.
Un ejemplo de un prrafo simple con dos palabras en cursiva, las palabras
"cursiva" y "ves":
<p>Este prrafo es normal y esta palabra va en <i>cursiva</i>, lo
<i>ves</i>? </p>
Ver cmo queda el ejemplo Html5 hasta ahora.
Textos Subrayados
Si encerramos un texto entre <u> y </u> ste aparecer subrayados. El
tag <u> representa a la propiedad subrayado. Al igual que "b" representa
"bold", "u" representar.... yo que s.. si lo sabes me lo dices (underline
quizs?).
Podemos aplicar a la vez los tags <p>, <b>, <i> y <u>, entre otros.
Un ejemplo de un prrafo simple con un trozo subrayado:
<p>Este prrafo <u>tiene un trozo subrayado.</u> Te gusta? </p>
Ver cmo queda el ejemplo hasta el momento.

Textos con Varios Estilos a la Vez

Como os he dicho antes, podemos combinar todos estos estilos HTML. Eso s,
debemos respetar una cosilla. Espero explicarla bien, que no se no se...
A ver... "no podemos cerrar una etiqueta fuera de la etiqueta que la
contiene". Lo veis? No es tan fcil de explicar. No os habis enterado no?
Bueno, vamos a ver si con un ejemplillo...
Mirad esta lnea:

<p>Hola amigos y amigas</p>

Todo eso es un prrafo, pues est encerrado entre <p> y </p>. Vamos a
poner todo en negrita:

<p><b>Hola amigos y amigas</b></p>

Ahora todo est en negrita. Esto est bien, pues hemos cerrado la etiqueta
"b" dentro de la que la contiene, es decir, dentro de la etiqueta "p", de prrafo.
Vamos a ver un ejemplo mal hecho:

<p><b>Hola amigos y amigas</p></b>

Esta lnea est mal, pues se ha cerrado la etiqueta "b" fuera (detrs) de la
etiqueta que la contiene, es decir, fuera de "p".
Vamos a ver un tercer ejemplo mal hecho:

<p>Este <u>es un <b>ejemplo de etiquetas</u></b> en HTML</p>

Esa lnea est mal hecha, pues hemos cerrado "b" fuera de "u". Como "b"
empieza dentro de "u", debe cerrarse tambin dentro de "u".
El mismo ejemplo pero bien hecho sera:

<p>Este <u>es un <b>ejemplo de etiquetas</b></u> en HTML</p>

Ver cmo queda el ejemplo hasta ahora.

Espero que os hayis aclarado con esto. Sabed que las etiquetas pueden
escribirse en maysculas o minsculas, da lo mismo. Adems, todas estas
deben cerrarse siempre. No vale abrir una etiqueta, por ejemplo <p> y no

cerrarla al final con</p>. Es muy posible que a pesar de no cerrarla, parezca

que funciona, pero os recomiendo cerrarlas siempre para evitar problemas a la
gente que os visite con otros navegadores distintos al vuestro. Tambin os
recomiendo siempre escribir las etiquetas en minscula.

Comentarios
Para insertar un comentario solo necesitamos encerrarlo entre estos dos
smbolos o etiquetas:
<!-- (Este es el smbolo que indica inicio de comentario)
--> ( y con esto se termina el comentario)
Por ejemplo, esto que sigue es un comentario:
<!-- esto es un comentario -->
Otro ejemplo es este, donde vemos que podemos meter ms guiones por si
queremos dejarlo ms visible:
<!----- esto es un comentario ----->
pero como mnimo debe tener los dos guiones tanto al principio como al final,
adems del resto de la etiqueta, <!-- y -->.
Los comentarios no aparecen en la pgina cuando la visita alguien. En
realidad no hacen nada de nada de nada. Solo sirven para que el autor de la
web, cuando mire su cdigo, sepa qu es cada trozo de cdigo. Es decir,
podemos insertar comentarios en alguna parte del cdigo Html de nuestra
pgina para saber qu hace ese trozo, para dejarnos notas a nosotros mismos.
Por ejemplo, si algn da insertamos un contador en nuestra web (lo
haremos, lo haremos..) se nos proporcionar un trozo de cdigo para que al
insertarlo en la pgina aparezca ese contador. Podemos entonces poner al
principio y al final de ese cdigo algunos comentarios indicando, por ejemplo,
"inicio de cdigo contador" y "final de cdigo contador".
De ese modo, si pasado el tiempo revisamos la pgina, es posible que ni nos
acordemos de qu es ese trozo de cdigo tan raro. Pero al haber puesto esos
comentarios podremos acordarnos fcilmente.
Vamos a aplicar esto. Podemos poner en una pgina un comentario para
recordar que la parte <head> o cabecera es donde debemos insertar la
"metatags". El da que las insertemos, podemos quitarlo, pero mientras, nos
recordar dnde hay que ponerlas. El cdigo sera el siguiente:
<!DOCTYPE html>
<html lang="es">

<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aqu mas Metatags-->
</head>
<body>
<p>BIENVENIDOS!</p>
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</HTML>
Ver cmo queda el ejemplo Html hasta ahora.
En Dreamweaver o en algunos editores de texto plano es muy fcil identificar
esos comentarios, pues al ver el cdigo de cualquier web con l, los
comentarios aparecen en gris claro.
Otra utilidad que tienen los comentarios es la siguiente. Si deseis anular
algn trozo de vuestra web, pero no queris borrar su cdigo, pues no sabis si
ms adelante os har falta, o simplemente, por qu queris ver qu tal se ve la
web sin cierto elemento, solo tenis que encerrar todo ese trozo de cdigo
entre los smbolos de comentario y ese trozo quedar anulado.
Si ms tarde os arrepents, podis volver a ponerlo en funcionamiento sin
ms que quitar los smbolos de comentario. til, no?
Por ejemplo, para evitar que en el ejemplo de aqu arriba (de la ventana de
fondo blanco) aparezca la frase "Bienvenidos", bastara con poner los smbolos
de comentario al inicio y final de esa lnea, as:
<!-- <p>BIENVENIDOS</p> -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aqu mas Metatags-->
</head>
<body>
<!-- <p>BIENVENIDOS!</p> -->
<p>Hola amigos, esta es mi nueva Web</p>
</body>
</HTML>
Ver cmo queda el ejemplo hasta ahora.
y no aparecer en la web, aunque el cdigo an est en la pgina. Para seguir
con las lecciones eliminad esos comentarios de la lnea de Bienvenidos,.
No olvidis cerrar siempre los comentarios con el smbolo -->.
Los comentarios creo recordar que no se recomiendan en el HTML, pero lo
cierto es que pesar de eso, funcionan y pueden ser tiles, al menos al principio,

cuando no tenemos demasiado claro para qu es cada cdigo. Colocar un

comentario al lado puede ser esclarecedor. As que nos lo pasamos por... por
alto, y ya los eliminaremos de nuestras pginas cuando lo tengamos todo ms
controlado.

Los Ttulos Html para resaltar titulares de

tus textos.
Hasta ahora sabes ya crear una pgina web algo miserable, pues solo has
aprendido a colocarle textos en forma de prrafos. Ahora vamos a aprender a
crear titulares con la ayuda de las etiquetas correspondientes de Html5. Vers
qu fcil.
Al igual que para crear un prrafo encerrbamos su contenido entre las
etiquetas <p> y </p>, para crear ahora un titular basta con escribir su texto y
encerrarlo en este caso entre las etiquetas<h1> y </h1>.
De este modo, cuando el navegador lea el contenido de tu pgina y vea que
ese texto est entre esas etiquetas, lo presentar en la ventana del navegador
de un modo distinto, algo ms destacado que el prrafo normal, como
corresponde a todo un titular.
Para ver esto ms claro vamos a colocar alguna de estas nuevas etiquetas en
el cdigo de nuestro ejemplo. Vamos a eliminar las etiquetas <p> y </p> del
texto BIENVENIDOS! y vamos a encerrar esa palabra entre las nuevas etiquetas
de ttulo:
......
<body>
<h1>BIENVENIDOS!</h1>
<p>Hola amigos, esta es mi nueva Web</p>
.......
Si ahora guardas el archivo del ejemplo y lo abres como pgina web, vers
este resultado.
Ver cmo queda el ejemplo hasta ahora.
La apariencia es sin duda distinta, como si de un titular de peridico se
tratara, verdad? Existen otras etiquetas de ttulos en Html5, h2, h3, h4, h5.... y
hasta el 6 creo, aunque no creo que pasemos del h2 o h3 normalmente. El
aspecto de estos otros tipos de titular es menos cantoso, menos destacado
conforme mayor es el numerito que sigue a la letra h.
Una cosa importante. Los ttulos son PARA USARLOS. Hay algunas cosas que
sabemos que llaman la atencin a Google y una de ellas son los ttulos. Porque

querrs estar entre los primeros en los buscadores, no? ;=). Te gusten o no
vamos a usarlos. Si es el aspecto lo que no te agrada no te preocupes, pues
como te deca, al trabajar con Html nos tiene que dar igual que un elemento
sea feo o bonito. Lo importante es que cada elemento sea de un tipo concreto
segn el cdigo Html (prrafo, ttulo, imagen,....). El aspecto, lo precioso que
sea, lo conseguiremos despus, con los estilos CSS, pero por ahora
necesitamos lo bsico, el contenido, y eso es lo que hacemos con el Html5,
solo poner contenido en las pginas. Repito, luego con los estilos css les darnos
forma y color. Si no te gustan subrayados, se lo quitaremos, si los prefieres ms
pequeos o de otro color, lo conseguiremos, pero con CSS. Veo que te voy
convenciendo. Genial!
Cuando nos ponemos el disfraz de Html el aspecto nos importa un pimiento.
Usaremos h1 para titulares principales y h2para titulares secundarios. Si se
diera el caso tambin los h3 para titulares menores. Ms adelante os hablo
ms a fondo sobre los titulares en Html5. Por el momento nos basta con estas
notas.

Insertar imgenes en una pgina web con el

cdigo Html correcto
Ya sabemos el cdigo Html5 correcto para aadir prrafos y titulares en una
web. Ahora aprenderemos a escribir el cdigo Html5 para la insercin de
imgenes.
Las imgenes son un elemento ms en las pginas web y aunque adornan (y
tendra que decirte que los adornos son cosa del CSS) hay que aadirlos en el
Html de las pginas, salvo algunas excepciones, como es el caso de las
imgenes de fondo que s que irn en el CSS. Si te ests liando ;=)
simplemente sigue leyendo, aprende a colocar imgenes y ya nos aclararemos
ms adelante.
Ser capaz de terminar esta parte con Carlitos rondndome? Es que no se
cansa nunca de comer pipas? Claro, si se las pelo yo, cmo se va a cansar. En
fin, intentemos seguir.....
El cdigo Html5 correcto para insertar una imagen en una pgina web es
este:
<img src="ruta/archivo.extensin" width="111px" height="222px" alt="Texto
Alternativo">
Un poco largo quizs? je. En cuanto aadas unas pocas imgenes se te
queda en la memoria, seguro. Te explico cada cosa rara de esa lnea, vers
como todo tiene su sentido.
Las imgenes, definidas como vemos con la etiqueta img, las relacionaremos
bastante
con
las
nuevas
etiquetas
de

Html5 <figure>, <figcaption> y/o <aside>, pero eso lo veremos en pginas

posteriores, no ahora.

La etiqueta Html de Imagen

Etiqueta de imagen
La etiqueta para las imgenes es <img ............ >, todo lo dems que va
dentro son detalles que se le aaden y que son necesarios (todos).
Esta etiqueta es algo especial, pues as como las etiquetas de prrafo y de
ttulos (y muchas otras que hemos visto) necesitan obligatoriamente de su
correspondiente etiqueta de cierre, la etiqueta de imagen no tiene etiqueta de
cierre. Es decir, con las imgenes no se hace esto:

<img>imagen</img>
sino esto otro:

<img ......resto de propiedades.... >

Y ahora veamos el resto de propiedades que se le colocan dentro a esa
etiqueta.
Si estabas familiarizado con XHML (en el que las etiquetas que no tenan la
correspondiente etiqueta de cierre se colocaban con la barrita de cierre al final
de la etiqueta de apertura), has de saber que en Html5 no es preciso aadir
esa barrita de cierre en las etiquetas que solo tienen apertura. Si la colocas el
cdigo se puede validar igualmente para Html5, pero no es obligatoria.
Nosotros no vamos a usarlas en estas lecciones ya que Html5 no las requiere,
pero como te digo, si las usas no pasara nada malo.

Explicacin sobre las rutas de una

imagen.
Quizs uno de los conceptos ms enrevesados de los que encontrars en
este mundillo. La ruta de la imagen es el camino que hay que seguir para llegar
desde el archivo en el que vas a guardar el cdigo Html hasta el lugar donde
guardars el archivo de la imagen que deseas insertar en esa pgina. Me
explico mejor con un ejemplo, je.
Imagina que vas a guardar el archivo de la imagen dentro de la misma
carpeta en la que guardars el archivo .HTML. En ese caso el camino es nulo. El
archivo no tiene que ir a ninguna parte a buscar la imagen, por lo tanto en este
caso no hay ruta, no se pone nada en donde yo he puesto ruta/.Solo tendras
que colocar directamente el nombre del archivo de imagen con su extensin.
Imagina ahora que dentro de la carpeta en la que vas a guardar el archivo
.HTML, creas una carpeta llamada imgenes. En este caso s hay que seguir un
caminito para llegar desde la pgina hasta la imagen, y por lo tanto la ruta
sera imgenes/. Con esto indicamos que la imagen est en la
carpeta imgenes
Si en lugar de en esa carpeta, la imagen se guardara dentro de una carpeta
llamada paisajes creada dentro de la carpeta imgenes de antes, la ruta en
este caso sera, ir a la carpeta imgenes y una vez dentro entrar en la
carpeta paisajes para encontrar la imagen que queremos. En este otro caso la
ruta sera imgenes/paisajes/. Seguido claro del nombre del archivo de imagen
con su extensin. Lo pillas?
Ahora imagina que es al revs, que el archivo .HTML est en esa
carpeta paisajes y que la imagen est dentro de la carpeta imgenes. En este
caso hay que retroceder, es decir, salir de la carpeta para alcanzar la carpeta
anterior. En ese caso, para retroceder una carpeta, se coloca en la ruta dos
puntitos y la contra barra. En este caso la ruta seria entonces ../ y el nombre
del archivo de imagen con su extensin.
Como profundizar en esto de las rutas escapa del objetivo de esta seccin,
mejor pasa por la Enciclopedia CCTW para aprender bien su uso. Es
imprescindible dominar esto, pues forman cerca del 75% de los fallos que se
cometen al principio. Domnalas!! je.

El nombre del archivo y su extensin

De nada sirve colocar la ruta bien para llegar desde el archivo hasta la
imagen si luego el navegador no es capaz de encontrar la imagen dentro de
esa carpeta, no? Pues nos pasar unas cuantas veces, ya vers, je.
Para evitar problemas en este sentido fjate siempre que en el cdigo Html
del enlace aparece el nombre y su extensin tal y como se llama realmente
dentro de esa carpeta, exactamente igual, prestando especial atencin a las
maysculas y minsculas. Eso significa que si el archivo se
llama Imagen.BMP no podemos poner en la lnea de cdigo Html de la imagen
el nombreimagen.bmp, pues son cosas distintas (una tiene letras maysculas y
la otra no). Si no lo hacemos bien el navegador nunca encontrar la imagen a
pesar de que la ruta est bien.
Y como remediamos esto? La solucin que se me ocurre es bien sencilla.
Siempre que tengas alguna imagen preparada para colgarla en tu web,
escrbela completamente en minsculas antes de subirla al servidor. Y siempre
que escribas la ruta y el nombre del archivo (y su extensin) en el cdigo Html,
hazlo con todas las letras en minsculas tambin. De este modo nunca tendrs
problemas (de este tipo, de otros ya veremos.... je).
Pues lo dicho, que no se te olvide, los nombres de archivos y sus extensiones
y el nombre de las carpetas de tus pginas web han de ir SIEMPRE escritas
SOLO con letras MINSCULAS.
Recuerda tambin asegurarte de que el nombre del archivo no contenga
ningn smbolo raro, como acentos o tildes y espacios en blanco. Si es as, o los
eliminas del nombre del archivo o casi seguro que vas a tener problemas con l
y no te aparecer la imagen en tu pgina.
Las dimensiones de las imgenes en el Html
En ocasiones quizs hayas visitado una web y nada mas intentar entrar ves
parte de la web, algo desmoronada o desordenada y, conforme se van
cargando imgenes la web va tomando forma. Te ha ocurrido? No es nada
grave a no ser que una de las imgenes tenga la ruta mal escrita (como hemos
visto antes) en cuyo caso el desmorone o desorden se mantendr en la web.
Esto ocurre porque el navegador no sabe cunto ocupa la imagen (cul es su
altura y anchura) hasta que la carga y, si no consigue cargarla, no sabe lo que
ocupa, claro. Para evitar esto y porque adems es la forma correcta de escribir

el cdigo Html, hay que definir la altura y anchura de las imgenes en esa lnea
de cdigo que os comentaba pginas atrs. Vamos a ver cmo se hace.
Definir la anchura de una imagen
Para definir la anchura de la imagen en su lnea de cdigo Html basta con
colocar esto:

width="111px"
El trmino width significa anchura en ingls. Original, verdad? y la cifra que
he puesto de ejemplo, el 111 es la anchura expresada en pixeles. Despus se
colocan las letras px que significa "pixeles" y listo. No olvides encerrar todo
entre dobles comillas " " pues es el modo correcto de hacerlo.
Definir la altura de las imgenes
Del mismo modo, para definir la altura de la imagen en su lnea de cdigo
Html hay con colocar esto otro:

height="222px"
Donde height significa altura en ingls. La cifra que he puesto de ejemplo,
el 222 ser la anchura expresada en pixeles. Despus se escriben las
letras px que significa "pixeles" y terminado.
Para saber cules son las dimensiones de la imagen que vas a colocar, ve a
la carpeta donde la tienes guardada y pulsando sobre su archivo con el botn
derecho del ratn pulsa en "Informacin", "Propiedades" o algo as (depende de
tu sistema operativo) y te aparecern. En ocasiones con solo colocar el puntero
del ratn sobre el archivo y esperando un poco aparece un mensajito al lado
indicando estas dimensiones, entre otras cosas.
Es buena idea no dejar ningn espacio en blanco dentro de las comillas que
contienen la cifra y las unidades. Por ejemplo, podras tener problemas
escribiendo "222 px", " 222 px ", " 222px", etc. La forma correcta es sin
espacios en blanco dentro de las dobles comillas, as "222px".
Si no colocas las comillas sino solo el valor sin ellas (el Htmlo5 permite usar
comillas o no utilizarlas, pero yo te recomiendo MUCHO que s las uses

siempre) tendras fallos si dejas espacios en blanco entre el signo igual y la

cifra, o entre la cifra y las unidades. Estara mal por tanto escribir width=222
px, o width= 222px. La manera correcta sera width=222px, pero como te digo,
lo mejor es usar las dobles comillas y escribirlo as: width="222px".

Qu son los Textos Alternativos y cmo se

colocan?
Ya solo nos queda un trocito de aqul cdigo para dominar el Html de las
imgenes. Se trata del alt, que sirve para indicar los textos alternativos a la
imagen. Pero qu es eso?
El texto alternativo es aquella frase que aparecer en la web cuando por el
motivo que sea el navegador no consigue mostrar la imagen. Esto puede
ocurrir cuando el navegador del visitante es muy antiguo, o cuando la lnea de
cdigo no est bien escrita, o si has escrito mal la ruta de la imagen (colocando
maysculas por ejemplo...) u olvidaste subir la imagen al servidor.
Pero a pesar de estar seguro de que nada de eso va a ocurrir, an as, es
obligatorio colocar ese alt. Un motivo es, porque es el modo correcto de
escribir cdigo Html5. Otro motivo, y este s que es importante, es que Google
va a conocer la temtica de tus pginas por la cantidad de palabras clave que
aparezcan en ella y, uno de los lugares en los que busca esas palabras clave es
en el alt de las imgenes, de modo que seramos muy tontos si no
aprovechramos esa oportunidad, no? Si no sabes lo que son las palabras clave
confrmate con acordarte de poner siempre los alt y ya sabrs mejor el porqu
ms adelante. Confa en m!! je.
La forma correcta de colocar el alt es simplemente escribiendo alt="y dentro
lo que quieras". No olvides las dobles comillas encerrando el texto. Procura
poner algo que tenga que ver con la imagen, como por ejemplo una
descripcin de la misma. Y si puedes aprovechar para usar algunas de tus
palabras clave en esa descripcin, mejor que mejor.
Con esto nos cargamos la explicacin de la lnea de cdigo Html necesario
para colocar imgenes en una pgina web. La lnea completa, te recuerdo,
queda as:
<img src="ruta/archivo.extensin" width="111px" height="222px" alt="Texto
Alternativo">
o, para que veas un ejemplo real (aunque inventado), este otro:
<img src="imgenes/puesta-de-sol.png" width="450px" height="230px"
alt="Las mejores puestas de sol, todoimagenes.com">
Si ahora cotilleas dentro del cdigo de algunas pginas (de esta misma que
lees) podrs ya identificar las lneas Html correspondientes a las imgenes y
podrs ver todas estas propiedades que te acabo de contar. Si ves alguna ms
que no he puesto yo ser porque no hacen falta para nada o de algn asuntillo
que me pueda quedar pendiente de explicaros, y que veremos ms adelante.

Fcil o qu? ;=)

Los enlaces y su cdigo Html

Qu es un enlace, un vnculo, un link? Todos esos trminos significan lo
mismo, un lugar en el que si hacemos clic con el ratn somos dirigidos a otra
parte. Puede ser un texto (normalmente subrayado) o una imagen (sobre la
que podemos hacer clic para ir a otro lugar de la web). No es fcil? je.
Aprendamos ms.
Sera impensable una pgina web sin ningn tipo de enlace o vnculo. No
tendra mucho sentido, verdad? Vamos a ver ahora todo lo necesario para
construir enlaces en nuestras pginas web, tanto enlaces internos (hacia otras
partes de nuestra web) como enlaces externos (hacia otros sitios) y todas las
variantes que podemos aprovechar para sacarles todo el jugo a los links.
Con estas lecciones aprenderemos a colocar enlaces desde cachitos de texto
e incluso desde bloques de palabras o desde imgenes, es decir, que daremos
la posibilidad al visitante a acceder a otras partes de la web haciendo clic o
bien en textos o bien sobre imgenes.
En ocasiones habrs visto enlaces que se colorean y otros incluso que no
cambian de color al pulsarlos. Esto son cambios en su apariencia. Recuerdas
dnde quedaban las apariencias y adornos? Exacto, los detalles y adornos los
dejamos para el CSS que veremos en otra seccin de ComoCrearTuWeb, de
modo que esos detalles no los veremos en esta seccin de Html5 sino en el
curso de CSS3, vale? Aqu aprendemos a colocarlos y en el curso de CSS3 a
darles color y formas.
Aunque en las siguientes pginas veremos con detalle cada una de las
propiedades que podemos darle a un enlace, ste sera, para que te hagas
desde ya una idea, el cdigo correcto y completo que podra tener un vnculo
en perfecto Html5:
<a href="http://www.comocreartuweb.com" target="_blank" title="Crear
pginas web">Crear Paginas Web</a>
No parece muy complicado, no? Es que no lo es, je. Es un ejemplo bsico, y
veremos ms tarde otras cosillas que se le pueden aadir, pero en la mayora
de los casos ser suficiente con esa sola lnea.
Si me acompaas te lo enseo a fondo, como siempre, pulsando en la
flechita de la derecha para seguir un orden y no perdernos nada!

La etiqueta A en Html5 para crear enlaces

En el caso de los links, vnculos, hipervnculos o enlaces (es lo mismo una
cosa que la otra) la etiqueta que se usa es una simple letra "a", tal y como
vemos abajo:
<a .....propiedades....> </a>

En este caso de los enlaces, su etiqueta como ves S que tiene etiqueta de
cierre, con su barrita, acurdate.
Esa etiqueta por s sola no hace nada. Un enlace en condiciones debe dar
alguna pista ms para que funcione y es lo que le indicaremos con las
propiedades que vamos a ver a continuacin. Podras adivinar algunas de ellas?
Qu necesitara saber un navegador para conseguir enviar a los visitantes
desde una pgina a otra? Pues se me ocurre, la direccin de la pgina a la que
lo queremos enviar a las visitas; si queremos que se abra o no otra ventana de
su navegador al mostrar esa otra pgina, o darle un texto alternativo tal y
como hacamos con la etiqueta alt de las imgenes, verdad?
Pues en la siguiente pgina vamos a ver a fondo todas esas propiedades que
nos ofrece el cdigo Html5 para definir perfectamente un enlace para que se
comporte tal y como nosotros queremos.
No te asustes si parece algo demasiado espeso como para acordarse.
Siempre puedes apuntar lo importante en un block para consultarlo cada vez
que quieras crear un enlace. De todos modos, te aseguro que en cuanto
coloques 4 o 5 enlaces en una de tus pginas web, todo este cdigo Html5 lo
vas a poder recordar sin ningn problema.

La ruta de los enlaces en cdigo Html5

Ya hemos visto que un enlace en el que no se indique la direccin de la
pgina o de la parte de la web a la que queremos enviar a las visitas es como
un pjaro sin plumas. Vamos a ver cmo se indica al navegador a dnde
queremos enviar a las visitas al pulsar sobre cada enlace de la pgina.
La propiedad que se usa para indicar esto, es href y tras ella y entre comillas
dobles es donde colocamos la ruta y el nombre del archivo de la pgina de
destino, de este modo:
<a href="ruta-del-enlace/nombre-del-archivo-destino.extension">Texto
del enlace</a>
Las explicaciones acerca de las rutas que comentamos en la seccin de las
imgenes y que puedes encontrar en la definicin de Rutas de Archivos de
la Enciclopedia CCTW es igualmente vlida en este caso.
Teniendo claro entonces el concepto de ruta, ya sabes que tienes que poner
tanto la ruta como el nombre del archivo relacionado con ese documento
enlazado dentro de las dobles comillas delhref. De nuevo y para evitar posibles
problemas al memorizar y escribir la ruta correcta, procura nombrar siempre a
los archivos y sus extensiones con letras minsculas. De ese modo no tendrs
que recordar si a aqul archivo le pusiste o no letras maysculas. En caso de
enlazar con archivos que estn fuera de tu web (otras pginas que no son la
tuya) tendrs que mirar su nombre exacto, no sea que en ese sitio s usen
alguna letra mayscula, claro.
Se pueden enlazar tanto otras pginas web como archivos de msica,
archivos de imgenes, etc., etc. En estos casos no se muestra la imagen o la

msica enlazada, sino que al pulsar sobre el enlace se ofrecer la descarga al

visitante. Ya veremos esto mejor ms adelante.
Recuerda tener bien claro el concepto de ruta para no tener ningn problema
con todo esto, Usa el Foro CCTW si no consigues tenerlo bien claro, pero si
alguna vez un enlace no te funciona, piensa que has podido poner la ruta mal
antes de buscar el problema en cualquier otro lado.
Antes de terminar esta pgina, pongamos un ejemplo rpido y sencillo, vale?
Qu cdigo Html habra que colocar dentro del cdigo de una web para colocar
un enlace dirigido a ComoCrearTuWeb?
<a href="http://www.comocreartuweb.com">ComoCrearTuWeb</a>
Otro ms. Imagina que quiero colocar un enlace desde el index.html de mi
web hacia una pgina tambin de mi web que est dentro de una carpeta
llamada "noticias" y cuyo nombre de archivo es "noticias-de-actualidad.html".
Qu cdigo tendra que tener ese enlace, desde ndex hacia esa pgina?
<a href="noticias/noticias-de-actualidad.html">Noticias</a>
Todo esto as, de sopetn, puede que te resulte muy pesado. T sigue
leyendo y vers como conforme avances en este tutorial, se te van aclarando
todos estos conceptos, ten fe!

Abrir o no en una nueva ventana del

navegador con la propiedad Target de los
enlaces

Si ya has navegado un poco por internet, te habrs dado cuenta de que al

pulsar enlaces en ocasiones te aparece la pgina de destino en la misma
ventana del navegador (internet Explorer, firefox o el que sea) y en otras
ocasiones en una ventana nueva, aparte de la que estabas mirando, no?
Esto se consigue con la propiedad target que puede tomar los siguientes
valores:

target="_top": Se usa esta opcin cuando queremos que el archivo enlazado

se muestre en una pantalla completa de la ventana eliminando los frames o

marcos si los hay. Esta opcin se utiliza solo cuando nuestra pgina web est
hecha con frames o marcos y, como yo no lo recomiendo para nada, puedes
olvidarte de ella ;)

target="_parent": Con esta opcin la pgina destino se muestra en marco

anterior al marco o frame en el que est el enlace. No me explico bien? Pues no
pasa nada, pues es tambin para usar cuando tienes marcos y no va a ser el
caso, verdad? ;)

target="_self": Con esta tercera opcin, la pgina de destino a la que apunta

en vnculo se mostrar en la misma ventana del navegador del visitante, es
decir, no se abrir en una ventana aparte. Esta opcin es la que se toma por
defecto, la que se activa si no se indica ninguna propiedad target y por tanto
tampoco la usaremos. Para qu poner esto si ya va a funcionar as sin ponerlo?

target="_blank": Esta es la nica que nos interesa. Con esta opcin la pgina
enlazada se abrir en una ventana nueva del navegador. Resulta til cuando
queremos enviar a las visitas a una pgina externa, fuera de nuestra web. As
se mantendr nuestra web abierta en otra ventana y no perdemos esa visita,
pues tiene nuestra pgina a mano. Tambin la puedes usar cuando quieres
mostrar otra pgina de tu web, pero sin que el visitante pierda de vista la
pgina en la que estaba. Yo el uso por ejemplo cuando os quiero mostrar
alguna definicin de la enciclopedia CCTW. As, veis la definicin en otra
ventana sin perder de vista la pgina en la que estabais. Luego podis cerrar la
de la definicin y continuar sin perder el hilo. Me explico?
Resumiendo, si queremos que la pgina de destino se abra en otra ventana
del navegador usaremos target="_blank" y en caso contrario no colocamos esa
propiedad target. Qu bien eso de simplificar, no? Pues olvdate del resto! ;=)

Textos Alternativos con la propiedad Title de

Html5

Igual que vimos en las imgenes, en las que se poda definir un texto
alternativo con la propiedad alt="Texto Alternativo", en el cdigo HTML de los
enlaces existe algo similar, usando la propiedad title="Texto Alternativo".
En caso de usarlo, cosa que yo te recomiendo, ser este el texto que
aparecer al dejar el cursor del ratn sobre el enlace. Si colocas el puntero de
tu ratn sobre cualquiera de los enlaces de CCTW vers (a no ser que se me
haya olvidado, je) ese texto del que te hablo.
Se utiliza para dar un poco mas de informacin a las visitas sobre qu van a
encontrar si pulsan el enlace. Sobre todo se utiliza cuando colocamos enlaces
en imgenes, pues en algunos casos no est tan claro su destino como en los
enlaces sobre texto, pues se supone (solo se supone...) que ese mismo texto ya
es lo suficientemente representativo. No obstante te recomiendo colocar algo,
algo que complemente a ese texto.
Adems, recuerdas que te dije que Google buscaba tus palabras clave dentro
de los alt de las imgenes? Pues con los title ocurre lo mismo, son otro de los
lugares en los que Google busca esas palabras, de modo que no solo has de
colocar siempre las propiedades title sobre todos tus enlaces, sino que adems
has de procurar que estos incluyan algunas de tus palabras clave, eso s,
intentando que el texto tenga cierto sentido, nada de colocar palabras clave
por colocar, ni poner una ristra de palabras clave sin que la frase tenga sentido
alguno, pues Google lo ver mal y podr perjudicarte en lugar de beneficiarte.
Aunque hay otras propiedades que podemos asignar a los enlaces, no las veo
nada tiles para construir una web completa y perfecta, de modo que no te
lleno la cabeza con ms cosas. De veras que no te pierdes nada de lo
importante.

Los Anclajes o enlaces tipo Ancla en

Html5
Ya hemos aprendido a enviar a las visitas a una pgina u otra de nuestra
web. Pero en ocasiones, tenemos pginas con un contenido tan grande que nos
interesa enviar a estas visitas no a una pgina sino a una "parte" concreta de
una pgina de nuestra web. Para que sepas de qu te hablo, me refiero con
esto al tipo de enlace que tienes en la parte inferior de las pginas de
ComoCrearTuWeb, la flecha de en medio que te dirige hacia la parte superior
de la pgina (Ir arriba). Para estos casos Html ha definido un enlace especial
que denomina Ancla o Anclaje. Vamos a ver cmo podemos colocarlos en
nuestro sitio.

Usando las anclas o anclajes puedes hacer que cuando las visitas pulsen
sobre ese enlace, la ventana del navegador corra hacia esa parte concreta de
la misma pgina o bien, pase a otra pgina distinta, pero no a su comienzo,
sino a la parte media o a la parte que t desees de esa otra pgina.
Para verlo ms claro an. Imagina que en una misma pgina de tu web
hablas de pelculas de accin, y luego, debajo, de pelculas de humor, y bajo
sta parte, de pelculas de ciencia ficcin. Si defines un ancla o un anclaje en
cada uno de sus ttulos puedes luego colocar vnculos de modo que al pulsarlos
se dirija justo a esa parte de la pgina. Si defines un ancla al principio del
contenido y colocas un enlace en la parte inferior indicando "Ir al principio de la
pgina", al pulsarlo se dirigir automticamente a la parte superior, an siendo
la misma pgina. Lo pillas ahora? Bien, pues vamos a ver cmo se hace esto.
Para empezar hay que definir esa parte a la que quieres enviar a las visitas
cuando hagan clic sobre ese enlace que pondremos despus. Por ejemplo,
veamos cmo se define un ancla en la parte superior.
Basta con colocar esta lnea de cdigo en la parte correspondiente:
<a name="arriba"></a>
Con esto definimos un lugar al que podemos enviar a las visitas si pulsan el
enlace que luego veremos cmo colocar. Si ahora en la parte inferior
colocamos otra lnea como esta:
<a name="abajo"></a>
tendremos la posibilidad de poder enviarlas tambin a la parte baja de esa
pgina web.
Ahora falta colocar el propio enlace. Si queremos enviar a las visitas a la
parte superior, lo normal es colocar el enlace en la parte inferior (si el usuario
est arriba, para que darle la opcin de ir arriba si ya est all, verdad?).
Esto se puede hacer con por ejemplo esta lnea de Html:
<a href="#arriba" title="Ir Arriba">Ir arriba</a>
Del mismo modo, podramos colocar arriba de la pgina otro enlace que
permitiera a las visitas ir al parte inferior (a modo de ejemplo, pues no es una
opcin que sirva de mucho al lector, no?):
<a href="#abajo" title="Ir Abajo">Ir abajo</a>
Si en una pgina de tu web escribes mucho texto y tiene digamos 3 partes
diferenciadas (3 ttulos por ejemplo) podras definir un ancla en cada uno de
esos ttulos, y luego colocar un men en la parte inferior, o en la parte superior,
o en ambas, dando la opcin a las visitas a dirigirse, dentro de esa misma
pgina, a la seccin que deseen.
En ese caso colocaras al principio (o al final) ese men, de este modo por
ejemplo:
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a>
<a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a>
<a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>

Y ahora solo te faltara colocar esas 3 anclas justo al lado de esos ttulos,
lneas de cdigo como sta:
<h1>Ttulo Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms
largo para que se note el efecto.</p>
<h1>Ttulo Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms
largo para que se note el efecto.</p>
<h1>Ttulo Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al ttulo tres, aunque debera ser ms
largo para que se note el efecto.</p>
Si en lugar de querer enviar a las visitas a una parte concreta de esa misma
pgina, quieres enviarlas a una parte concreta de otra pgina de tu web, has
de definir ese ancla en la pgina y lugar que quieres elegir de destino, como en
este ejemplo, pero en el enlace has de colocar adems del ancla, la ruta de esa
otra pgina, tal y como aparece aqu abajo:
<a href="pagina-de-destino.html#nombre-del-ancla">Enlace hacia el
ancla</a>
Es decir, si en una pgina de tu web quieres colocar un enlace hacia el ttulo
dos que hemos visto en el ejemplo de antes, si esa pgina que contiene los tres
ttulos se llama titulares.html, entonces en la otra pgina tendras que poner
esta lnea:
<a href="titulares.html#titulodos">Ir al ttulo dos de la pgina titulares</a>
Si no ha quedado lo suficientemente claro o te surge alguna duda
pregntanos lo que quieras en el Foro CCTW.

Propiedad rel para los enlaces en el Html5

La nueva versin de Html5 a mantenido, modificado y creado algunos valores
para la propiedad rel que nos interesa conocer. Con ellos ayudamos a los
navegadores a conocer qu tipo de enlaces estamos incluyendo realmente en
nuestras pginas web. Ser interesante especialmente en dispositivos mviles,
y tambin en las nuevas versiones de los navegadores habituales. Veamos los
ms destacados.

Dnde se coloca la propiedad Rel de los enlaces?

Las propiedades rel que vamos a ver se colocan dentro de la etiqueta de
apertura del enlace o vnculo. Puedes colocar varias, una o ninguna. Veamos un
ejemplo de un enlace con dos propiedades rel:

<a href="tema/pagina.html" title="bla bla bla bla" rel="next"

rel="prefetch">Anchor Text</a>

Propiedad rel="archives" del nuevo Html5

Cuando a la propiedad rel le colocamos el valor archives estamos indicando
al navegador que la pgina a la que se est enlazando esta archivada, que ha
dejado de tratar un tema de actualidad, o que ha podido quedar incluso
obsoleto. No se ha eliminado la pgina por contener an informacin
interesante, pero se avisa que se desea mantener en estado de archivo. Podra
ser el caso de noticias ya pasadas, pginas con contenidos algo pasados de
moda o sustituidos por versiones ms actuales pero que no eliminamos para no
perder el posicionamiento que nos puedan estar generando.

Propiedad rel="author" para especificar el autor

Se utilizan sobretodo en blogs y pginas de contenido de autor. Se coloca a
aquellos enlaces que se dirigen hacia la web personal del autor del artculo, o a
aquellas en las que se habla de ellos.

Propiedad rel="prev", rel="start" y rel="next" para

indicar incicio, siguiente y pgina anterior
Son idneas para informar a los navegadores de cul es la pgina inicial de
una seccin, cul es la siguiente y cul la anterior respecto de la pgina donde
se encuentra el visitante. Son geniales para colocar en las tpicas flechitas de
adelante y atrs y logran que los navegadores se puedan hacer una idea del
orden de las pginas de una web, si es que estn ordenadas, claro .

Propiedad rel="first", rel="last" y rel="up"

indicando la primera y ltima pgina
Muy similares a las anteriores, salvo que en estos casos se informa al
navegador que la pgina enlazada es la primera o la ltima en el orden de la
seccin a la que pertenece. Adems, tenemos el valor up para indicar que la

pgina vinculada pertenece a un nivel jerrquico superior al de la pgina

actual..

Propiedad rel="prefetch", cargando la pgina

siguiente antes de que el usuario haga clic
Esta es de las que ms me gustan! Con el valor prefetch se est ordenando
al navegador que vaya leyendo y memorizando una pgina distinta, la que
presumimos que ser la siguiente que va a leer el visitante. De ese modo,
cuando as sea y el visitante pulse ese enlace, el navegador la tendr en su
cach preparada para mostrarla en cuanto el enlace sea pulsado, pues ha
estado cargando la informacin mientras el lector permaneca leyendo en la
pgina anterior. Lo idneo sera saber cules son las pginas hacia donde se
dirigen las visitas, claro. En caso de que stas se decidan por visitar otra
distinta, no ocurrir nada malo, pero si acertamos la velocidad ser mucho
mayor, claro. Tampoco es cuestin de colocar ese valor a todos los enlaces de
tus pginas, que te veo venir! je.

Otros valores para la propiedad rel

Existen un montn de valores posibles que yo considero menos importantes,
pero que quiero citar por si a alguien le interesa utilizar, como el
tpico nofollow que indica que el destino no tiene nada que ver con la temtica
de la web, sidebar que no est an muy definido, search para pginas que
muestran resultados de bsquedas, noreferer para que el navegador haga caso
omiso de las posibles variables de referencia aadidas a la url, el
tpico pingback de los blogs y alguno que otro ms.

Advertencia
No todos los navegadores saben interpretar an todos estos valores. De
hecho algunos no son reconocidos por ningn navegador todava, pero la
especificacin Html5 existe, de modo que no tardarn mucho en aplicarlos. En
cualquier caso en caso de no ser interpretados, tampoco ocasionan errores, por
lo que quizs decidas usarlos desde ya y no esperar a que los navegadores
aprendan esta leccin, verdad?

Ejemplo de lo aprendido hasta el momento

Antes de seguir con ms cdigo Html, quiero ensearte un ejemplo el que
aplicamos todo lo que hemos visto hasta el momento. Revsalo a fondo y
pregunta todo lo que no entiendas en el foro antes de continuar para ir ms
suelto con el resto de las explicaciones que ir colocando.

El resultado del ejemplo es de lo ms sencillo y muy poco vistoso. No te

preocupes por eso, pues como te he dicho antes, el darle un aspecto ms
profesional, con mrgenes adecuados, colores de fondo y todo tipo de adornos,
lo veremos en el curso de CSS. As que todos los ejemplos que veamos del
curso de Html van a ser as de sosos. Eso no significa que estemos
aprendiendo muy poco o que lo aprendido no sirva de mucho, de veras.
Estamos colocando solo el contenido y en el curso de CSS aprenderemos a
adornarlo hasta obtener un aspecto totalmente profesional, sin nada que
envidiar a cualquiera otra pgina web. Ten fe!
El resultado de este ejemplo cuyo cdigo te coloco ms abajo es este:
Ver resultado del ejemplo

.
y este es su cdigo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Mi Nueva Web</title>
<!-- Insertar aqu mas Metatags-->
</head>
<body>
<a name="arriba"></a>
<img src="imagenes/logotipo.gif" alt="En ComoCrearTuWeb puedes
aprender a disear pginas web" width="270px" height="80px" />
<h1>Men de Contenidos</h1>
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a>
<a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a>
<a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>
<h2>Ttulo Uno</h2>
<a name="titulouno"></a>
<p>Este es el <u>texto correspondiente</u> al ttulo uno, aunque
debera ser ms largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms
largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms
largo para que se note el efecto.</p>
<h2>Ttulo Dos</h2>
<a name="titulodos"></a>
<p>Este es el <i>texto correspondiente</i> al ttulo dos, aunque debera
ser ms largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms
largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms

largo para que se note el efecto.</p>

<h2>Ttulo Tres</h2>
<a name="titulotres"></a>
<p>Este es el <b>texto correspondiente</b> al ttulo tres, aunque
debera ser ms largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al ttulo tres, aunque debera ser
ms largo para que se note el efecto.</p>
<p>Este es el texto correspondiente al ttulo tres, aunque debera ser
ms largo para que se note el efecto.</p>
<a href="http://www.comocreartuweb.com" target="_blank" title="Como
hacer pginas web">ComoCrearTuWeb</a>
<p>Adios <b>Amigos</b>!</p><!-- Enlace tipo ancla hacia la parte
superior -->
<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
</body>
</HTML>

La etiqueta BR para los saltos de lnea en los

textos de una web
A la hora de escribir textos vimos cmo usar los prrafos. Recuerdas sus
etiquetas <p> y </p>? Al usar los prrafos, no aparecen saltos de lnea hasta
que no termina ese prrafo, es decir, no se ven saltos de lnea hasta que se
alcanza la etiqueta de cierre </p>. Existe no obstante una etiqueta para
provocar un salto de lnea sin tener que esperar a cerrar el prrafo.
Los saltos de lnea se definen con la etiqueta <br />. Esta etiqueta, al igual
que la de imagen y la de las metas, no tiene etiqueta de cierre y por eso se le
coloca la barra al final, como puedes ver.
Puedes usar los saltos de lnea siempre que quieras que un elemento
aparezca en la lnea siguiente. Esto no solo ocurrir dentro de los prrafos. Si
por ejemplo tienes varios enlaces que te aparecen en la misma lnea y t
deseas que aparezcan uno bajo el otro, puedes colocar la etiqueta <br /> al
final de cada uno de los cdigos de los enlaces para conseguirlo.
Recuerdas el ejemplo de la pgina anterior? Pusimos tres enlaces para enviar
a los visitantes al ttulo uno, dos o tres. Esos enlaces aparecan juntos en la
misma lnea. Si ahora en lugar de esto:
........
<h1>Men de Contenidos</h1>
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a>
<a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a>
<a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>
<h2>Ttulo Uno</h2>
........
colocamos la etiqueta de salto de lnea tras los dos primeros enlaces, as:
........
<h1>Men de Contenidos</h1>
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a><br />

<a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a><br />

<a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>
<h2>Ttulo Uno</h2>
........
conseguimos que cada enlace aparezca en una nueva lnea.
Del mismo modo, si insertamos la etiqueta de salto de lnea en medio del
texto de un prrafo, provocaremos un salto de lnea justo en esa parte, a pesar
de que el prrafo an no haya terminado.
Siempre que lo uses recuerda ponerle la barrita, y dejar un espacio entre br y
la barra.
Aprovecho para decirte algo sobre los saltos de lnea. Cada vez que abres un
prrafo con su etiqueta <p> aparece un salto de lnea sin necesidad de colocar
la etiqueta <br />. Tambin aparecen saltos cuando empiezas un ttulo
con <h1>,<h2>, etc.

En cambio, no aparecen saltos automticamente, cuando insertas en una

web un enlace (<a href="....), o una imagen (<img src=....>). Es por eso que
en el ejemplo de la pgina anterior, los enlaces aparecan en la misma lnea y
por eso para que aparezcan en lneas distintas hemos tenido que aadirles la
etiqueta <hbr />.
Los elementos que producen un salto de lnea automticamente sin
necesidad de colocar la etiqueta <br /> se denominan Elementos de
Bloque mientras que los que no producen este salto de modo automtico se
llaman Elementos de Lnea.
Se puede conseguir que elementos de bloque no produzcan esos saltos, e
igualmente, que elementos de lnea s tengan saltos, sin necesidad de ponerles
el <br />. Cmo? Usando estilos CSS, pero eso lo veremos en ese otro curso.

Listados de elementos y su cdigo Html

Otro elemento que suele usarse bastante en la construccin de pginas web
son las listas o listados de elementos. Se utilizan para colocar una serie de
elementos organizados en listas (cmo no). Aunque quizs no se te ocurra qu
utilidad pueden tener para ti, te aconsejo que aprendas a usarlos pues, como
veremos ms adelante, son muy tiles en algunos casos.
Por ejemplo, si en una de las pginas de tu web necesitas enumerar una
serie de elementos, como por ejemplo, un listado de marcas de coches, de
equipos de futbol, de accesorios o de productos a la venta, puedes usar esas
listas para representarlos de un modo cmodo en tu web.
Date cuenta que un men de enlaces, tanto si ha de aparecer de modo
vertical (un enlace bajo otro, como el men lateral izquierdo de esta web)
como si quieres mostrarlo con los enlaces en horizontal (uno al lado de otro,

como los de la parte superior de estas pginas) no es ms que una lista de

elementos, de enlaces en este caso, por lo que estas etiquetas se usan mucho
para eso, construir mens de enlaces. A que ahora s les vas a hacer caso? je.
Existen dos tipos de etiquetas para dos tipos de listados disponibles. La
primera se usa para mostrar un listado de elementos de forma que aparezca
un nmero al principio de cada uno de ellos, de forma automtica. Eso significa
que no es necesario escribir el nmero sino que aparecer solo, y consecutivo,
desde el uno hasta el que corresponda al ltimo elemento de la lista.
El otro tipo es idntico, pero en ese caso en lugar de aparecer nmeros al
principio, aparece una rayita o un circulo redondo.
En cualquier caso, tanto esos nmeros como las rayitas, se pueden retocar o
incluso eliminar usando los estilos CSS, de modo que aqu, como ya os he
dicho, nos conformaremos con saber usar las listas, sin que nos importe por el
momento el aspecto que puedan tener. Ya le daremos forma y color con los
estilos cuando hagamos el curso de CSS.
Es posible que en internet o en algn libro, encuentres otras cosas que se le
pueden aadir a los cdigos de las listas, adems de lo que te muestro en
estas lecciones. Yo no lo veo til y por eso ni los nombro, pero cada uno es libre
de colocar lo que desee, claro. Aqu intento ensear lo imprescindible, aunque
totalmente suficiente como para conseguir todo lo que desees, te lo aseguro.
Ahora pulsa en la flecha de abajo a la derecha para ver cada una de las dos
listas que te he citado.

Las Listas de elementos desordenadas

Para construir una lista se utilizan dos etiquetas, una para indicar que va a
comenzar la lista y otra cada vez que empecemos a definir un elemento de
dentro de esa lista. La lista es solo una, pero los elementos que la componen
pueden ser varios.
La etiqueta de apertura de una lista desordenada es <ul> y la de cierre
es </ul>. Por tanto, una lista desordenada totalmente vaca, sin elementos
dentro, tendra este cdigo Html:
<ul>
</ul>

Las etiquetas de inicio y fin de cada uno de los elementos que le queramos
aadir a esa lista, seran <li> y </li>, de modo que el cdigo Html de una lista
con tres elementos vacios, sera este:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Un poco sosa, no? Para aadir algo a cada elemento, basta con colocar ese
algo entre las etiquetas <li> y </li>. Vamos por ejemplo a construir una lista
con los tres enlaces del ejemplo que estamos viendo en estas pginas atrs. El
cdigo de esos tres enlaces era este:
........
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a>
<a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a>
<a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>
........
de modo que para aadirlos a la lista anterior, solo habra que colocar las
etiquetas de inicio y fin de lista antes y despus de todo ese cdigo y adems
colocar las etiquetas de inicio y fin de elemento antes y despus de cada
enlace. Quedara as:
........
<ul>
<li><a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a></li>
<li><a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a></li>
<li><a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a></li>
</ul>
........
Aunque como vamos diciendo, el aspecto que tomen nos importa un pepino,
ste es el resultado del ejemplo una vez metido los enlaces en una lista
desordenada.
Tanto la etiqueta <ul> como las etiquetas <li> son etiquetas de bloque, lo
que significa que NO es necesario aadir el salto de lnea con <br /> si
queremos que aparezcan un enlace bajo el otro. Con CSS como te coment,
podemos hacer si queremos que estos elementos aparezcan en lnea y no uno
bajo otro, para construir un men horizontal, por ejemplo. Ya lo veremos en
CSS, pero sigue siendo muy til que estn incluidos en una de estas listas.
Ves ese circulito negro que aparece al a izquierda de cada elemento? Es lo
que te deca antes que podemos retocar con los estilos CSS, de modo que si no
te gusta su aspecto, no te preocupes, se podr cambiar cuando aprendamos
CSS.

Las Listas de elementos ordenadas

Las listas que hemos visto antes se llaman "desordenadas" porque el circulito
negro de la izquierda de cada elemento no indica ningn orden. Si quisiramos

que aparezca un nmero o una letra correlativa en cada uno de esos

elementos, tendramos que usar etiquetas de listas "ordenadas". Esas listas
ordenadas se construyen exactamente igual que las que acabamos de ver en la
pgina anterior, solo que en este caso las etiquetas de apertura y cierre de la
lista son <ol> y</ol> siendo las etiquetas de apertura y cierre de sus
elementos igual que en el caso anterior, <li>y </li>.
El cdigo Html de la lista anterior, pero ordenada en este caso, sera este:

........
<ol>
<li><a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a></li>
<li><a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a></li>
<li><a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a></li>
</ol>
........
y as es cmo se ve aquella lista en el caso de usar la etiqueta de lista
ordenada.
A menos que quieras que aparezcan esos nmero o letras antes de cada
elemento, te recomiendo usar siempre las otras. Siempre puedes ponerle el
nmero o letra a mano, dentro de cada <li>.Volvers a verlas cuando
expliquemos en el curso de CSS cmo organizar un men, o en los ejemplos
con DIVs.

La Metatag description
Cuando te habl de la etiqueta <title> y de las caractersticas alt="...." de
las imgenes o lostitle="...." de los enlaces, te dije que eran muy buenos
lugares donde colocar las palabras clave de tus pginas web. Te hablo ahora de
dos lugares ms en las que poder aadir estas keywords o palabras clave. La
metatag description que te explico abajo y la metatag keywords que veremos
en la pgina siguiente.
La metatag description se coloca en la cabecera de la pgina
(entre <head> y </head>). Se llama metatag por la palabra con la que
empieza su lnea de cdigo, que es esta:
<meta name="description" content=". . . . descripcin de la pgina . . . " />
Esa lnea es obligatoria (si deseas aparecer en buenos puestos en los
buscadores) y has de copiarla tal cul te la he escrito, cambiando solamente lo
coloreado en rojo, la descripcin de esa pgina web concreta.

Al igual que ocurre con el ttulo que pusimos con la etiqueta <title>, ha de
ser diferente en cada una de las pginas de tu web. Si se te ocurre colocar dos
metatags de descripcin con el mismo contenido en dos o ms de las pginas
de tu sitio, buscadores como Google entendern que solo una es la original y
que el resto son copias, por lo que aunque no te va a castigar de cara a la
pared, s que va a olvidar las otras que entiende como copias. As que, no solo
procura que todas las pginas tengan ese metatag description sino que
adems has de asegurarte de que todos son distintos.

Por otro lado y puesto que ste es otro de los sitios donde los buscadores van
a buscar tus palabras clave, has de escribir una descripcin con cierta maa,
de modo que uses en esa frase algunas de las palabras clave que caracterizan
a esa pgina concreta. Y todo ello procurando que la frase tenga sentido. Nada
de colocar palabras clave al tuntn, ni repetir la misma veinte veces.
Ten adems en cuenta que las palabras clave a incluir en todas estas
etiquetas que te voy comentando, han de ser de esa pgina en concreto, no de
tu web en general, sino justo de la pgina de tu web para la que ests
escribiendo esa lnea. Cada pgina de tu web ha de tener sus propias palabras
clave, es lo mejor.

Metatag Keywords y Palabras Clave

Pues esta es otra etiqueta ms en donde puedes colocar las palabras
clave o keywords de tus pginas web. Todo lo comentado en la pgina
anterior para la descripcin es aplicable a este otro caso.
La lnea de cdigo que has de colocar tambin dentro del head de tus
pginas, por ejemplo, bajo la lnea de descripcin, sera esta:
<meta name="keywords" content="palabrauno, palabra2, par de palabras,
palabra4......., palabra10" />

Date cuenta de nuevo que esta otra metatag tampoco lleva etiqueta
de cierre, por lo que habr que colocarle la barrita casi al final para tener
un cdigo Xhtml correcto. No coloques ms de 10 palabras o grupos de
palabras para no saturar al buscador. En cualquier caso no va a leer
todas las que pongas. Con unas 10 tienes suficiente para hacer entender
al buscador cul es el tema de esa pgina.
Aunque no hay mucho escrito sobre esto, yo separo cada palabra con
una coma y un espacio. Tambin uso tildes o acentos si la palabra los
tiene e intento colocar siempre plurales, pues una palabra en plural
suele contener tambin a la singular. Es decir, el plural "pginas"
contiene a su vez la palabra "pgina" en su interior, por lo que
colocando ste plural, tambin estoy cubriendo el singular.
Ah! Y no repitas palabras a menos que andes escribiendo conjuntos de
palabras. O lo que es lo mismo, no coloques "gratis, gratis, gratis,
gratis...." pues no vale de nada, a no ser que andes intentando que los

buscadores te encuentren por los conjuntos de palabras "juegos gratis,

online gratis, videojuegos gratis, lo que sea gratis", aunque tampoco en
ese caso deberas abusar demasiado.
Aunque hay gente que piensa que esta metatag no es leda por Google
y otros, yo siempre la coloco. Sobre la metatag description si parece
haber mucha ms gente que piensa que Google la lee y la tiene en
cuenta.
En el apartado "Los Buscadores" de la lengeta "Promocin de Webs"
deberas poder encontrar informacin ms abundante sobre lo que son
las palabras clave. Al no ser ya cosa de Html preferir explicarlo all.
Actualizo esto para comentar que al parecer, este metatag ya no es
utilizado por Google, por lo que en principio podramos prescindir de
colocarlo en nuestras pginas... yo por el momento lo mantendr, por si
acaso.