Professional Documents
Culture Documents
html
Introdución al Html:
Introdución
La estructura
Tipo de Documento
Especificar el idioma
Titulo o Title
Meta Description
Tipo de Códificación
Párrafos
Resaltar Textos
Comentarios
Titulos h1, h2...
Las Imágenes
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 Línea
Las Listas
Listas Desordenadas
Listas Ordenadas
Metatag description
Palabras Clave
Visita la sección Editores de Texto Plano para saber un poco más del porqué y para
encontrar enlaces de descarga de Editores de Texto Plano gratuitos, oki?
Verás como el código Html (html5) que te pongo en los ejemplos suele ir coloreado de
azul. Esto es para poder diferenciarlo más tarde con otros tipos de código (como el css,
php, javascript, etc que irán de otro color). Eso nos clarificará los ejemplos bastante.
Bajo mi punto de vista (y de muchos otros webmasters, claro) el código Html solo hay
que usarlo para añadir 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
después de terminar este curso de Html5. Es por eso que prescindiremos de todo el
Html que se usa para adornos. Repito, Html solo para añadir información, CSS para
darle forma, oki? Si usas Html para cambiar tamaño al texto, poner bordes o recuadros,
dar márgenes, colores de fondo y tal, estarás perdiendo el tiempo y te acordarás de
estas notas cuando veas que tus páginas web no se ven igual en unos navegadores que
en otros. Seguir los consejos de CCTW es un acto de fé, je je je. Me harás caso? Ya lo
veremos, je je je.
La estructura
Más de una vez os habréis tropezado, bien por curiosidad o bien por error al pulsar el
botón equivocado, con una pantalla llena de numerajos y letruchas que ni por asomo
parecen algo con sentido. Los más aventureros habréis entrado en esa zona "prohibida"
para insertar algunos fragmentos de código para vuestro contador, estadísticas, etc,
pensando "como esto no chute....como me cargue mi querida pagina...va a ver ese
Jorgens lo que es bueno" je je je. Pues bien, vamos a desmenuzar la estructura de una
página web para ir perdiéndole el miedo.
Toda página web hecha con Html5, por complicada que parezca, se divide en dos partes
bien diferentes a las que llamaremos Cabecera (head) y Cuerpo (body). Además, todas
las páginas web empiezan con la palabra mágica (o etiqueta) <html> y terminan con la
etiqueta </html>. Cada página web además, solo tiene una sola cabecera y un solo
cuerpo. Nos dejamos los dobles cuerpos y dobles cabezas para la mitología, oki? Para
que os hagáis una idea, esto sería una página web con todas las de la Ley, eso sí, vacia.
<html>
<head>
</head>
<body>
</body>
</html>
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 funcionarán dentro del cuerpo (body), pero esas cosas las iremos viendo
conforme avancemos.
Os muestro abajo el código de una página web vacia, pero con algunas cosillas más.
Este código es el que tiene una página de esas que creáis con FrontPage, Dreamweaver,
Html-Kit o programas por el estilo (programas que deberías desinstalar ya mismo...),
nada más empezar, es decir, cuando aún no habéis metido nada en ella.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF">
</body>
</html>
Vemos en este código las palabras mágicas comentadas antes, html, head, body y sus
correspondientes cierres con la barra "/". A estas palabras encerradas con los símbolos <
y > las llamaremos etiquetas.
Aparecen algunas cosas nuevas, pero las veremos con detenimiento más adelante.
Con esto que sabes ahora mismo, podrías mirar el código Html de cualquier página web
e indentificar dónde empieza su código html, dónde termina, y dónde empiezan y
acaban la cabecera y el body, verdad?.
En CCTW tienes instrucciones sobre cómo ver el código Html de cualquier página web,
por si te interesa aprenderlo (y creeme, SÍ te interesa! je je je).
Definición del tipo de documento con
DOCTYPE
Aunque te he dicho antes que la primera etiqueta con la que ha de empezar el código de
una página web debía ser la etiqueta <html>, realmente la primera línea, antes de esa
etiqueta, debe ser la de definición del tipo de documento. Lo dicho sigue siendo cierto,
pues la línea de la que te hablo ahora no es código Html sino solo un modo de indicar al
navegador qué tipo de documento le estamos presentando.
Mediante esa línea por tanto, podemos indicar al navegador que lo que contiene el
archivo que estamos creando es código Html y qué tipo de Html concretamente, pues
hay varias formas de escribirlo en función de la versión de Html que vayamos a usar al
escribir el código.
<!DOCTYPE html>
Anteriormente, para otras versiones de Html, la línea para definir el tipo de documento
era más larga y liosa, pero ahora en Html5 es así de cortita. Mejor, no?
Quédate con que en estas lecciones vamos a escribir código Html del tipo HTML5, y
con cuál es la primera línea que debe aparecer en el archivo de cada una de tus páginas.
De modo que, una página web vacia, pero con el tipo de documento ya declarado
correctamente, sería así:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Esto por el momento es un acto de fé, je je je. Agradecerás esa línea si alguna vez
quieres validar tu código Html, cosa que ya veremos lo que es. Seguimos? Pues dale a
la flecha de la derecha y continuamos!
<!DOCTYPE html>
<html lang="es">
..........
Además, no se pueden indicar varios idiomas en una misma página. Olvida la idea de
colocar un párrafo en un idioma y el de abajo en otro traduciendo el anterior. Si
necesitas una página en varios idiomas has de crear una página para cada idioma, si es
posible en un dominio con la extensión correspondiente (un punto es, otra con punto it,
etc). Si no fuera posible, hazlo en un subdominio de tu dominio. No deberías hacerlo en
una carpeta aparte ni mucho menos en la misma carpeta en la que esté la versión del
idioma principal, de veras.
El rey del posicionamiento es Google (claro, es quien dicta las normas, ja ja ja) y fíjate
que ellos tienen un dominio distinto para cada lenguaje. Puedes crear subdominios para
las traducciones. Yo, por ejemplo, podría crear el subdominio en.comocreartuweb.com
para la versión en inglés, de.comocreartuweb.com para la traducción en alemán,
it.comocreartuweb.com para la italiana. Esa es una buena práctica si no quieres comprar
un dominio para cada idioma.
Resumiendo, las dos líneas de arriba son comunes a toooodas las páginas de tus webs, y
de las mias, je je. A menos claro que el idioma elegido no sea el español (es). Para otros
idiomas las siglas son otras, claro. Puedes ver las siglas de cada idioma en la wikipedia
mismo.
<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>
</body>
</html>
Sigamos!
Etiqueta Title
Como te he dicho antes, hay una serie de elementos que no se ven directamente en el
contenido de las páginas y el title o título definido en la cabecera es uno de estos y,
además, es importantísimo.
Con las etiquetas <title> y </title> se define el título de cada una de las páginas de una
web. No de la web completa sino de cada página del sitio web. Por ejemplo, si tienes
una web que habla de cocina, tendrá dentro una página que hable de una sopa, otra de
tarta de fresa, etc, etc. Pues cada una de esas páginas ha de tener un título que represente
a esa página, no uno genérico de la web sino un <title> concreto para cada una de sus
páginas.
Fíjate que tenemos una etiqueta para indicar que empieza el título y otra para indicar
que el título ha terminado, <title> y </title>, oki?
<!DOCTYPE html>
<html lang="es">
<head>
<title>Título de esta página</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 página, sino también a los buscadores para saber de qué hablas en
esa página.
Es muy muy muy importante que el título de cada una de las páginas de tu web sea
distinto de unas a otras. Como tengas dos titles exáctamente iguales en varias de las
páginas de tu sitio web, los buscadores (por ejeplo Google) creerán que tienes dos
páginas idénticas (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 páginas que los buscadores conocen de tu web y conseguir así aumentar las
visitas de tu web. No lo olvides!
Procura también, sin abusar, que entre las palabras del título aparezcan las palabras
clave de esa página, es decir, aquellas palabras por las que crees que podrías ser
encontrado por alguien que está usando Google para llegar a esa página.
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 más en tu web puedes eliminarlas sin problema alguno. Eso si, recuerda que el
contenido de estas dos etiquetas ha de ser diferente en cada una de las páginas de tu
web, no lo olvides pues es un error muy común, incluso en página de cierta importancia.
Repito, si tienes dos title o dos description idénticos en dos o más páginas 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.
Pues bien, para que se muestren correctamente las tildes o acentos que escribamos en el
contenido de nuestras páginas, tenemos que añadir una línea que indique ese tipo de
codificación. Como eso es algo que no se ve directamente en el navegador, sino que es
un tipo de definición, está claro que esa línea de código ha de ir en la cabecera. La línea
para que los carácteres en castellano aparezcan bien en los navegadores cuando se
escribe código Html5 sería esta:
<meta charset="utf-8" />
Esa línea ha de ir en todas las páginas de nuestras webs, o al menos, en las que no
hablemos en chino ;=) Colócala siempre sin cambiarle nada, tal cuál está.
Verás que esta etiqueta empieza por la palabra meta y que no tiene etiqueta de cierre (no
se pone </meta> al final de la línea). Es un caso un poco especial pues normalmente
casi siempre hay una etiqueta de cierre tras una etiqueta de apertura. En el caso caso de
que una etiqueta no use la correspondiente etiqueta de cierre, se coloca en su lugar una
barra al final de la línea de apertura. En este caso la puedes ver al final del código que
he colocado antes. Te la he señalado 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 código Html va a tener una codificiación del tipo UTF-
8, hemos de asegurarnos de que cada vez que guardamos un archivo de código, ha de
guardarse como tal, como UTF-8. Si lo guardamos sin especificar esto y por defecto se
guardara con otra codificación, podríamos tener los problemas comentados atrás, como
que los acentos aparezcan raros, etc. Visita la sección Editores de Texto Plano de nuevo
para leer cómo se elige la codificación antes de guardar un archivo, oki? Especialmente
si usas el Block de Notas o Notepad. Creo que el Sublime Text reconoce
automáticamente la codificación y no necesita que le digas nada.
Y este es el código que llevamos hecho por el momento en este tutorial y que
conocemos ya perfectamente, línea a línea!
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Título de esta página</title>
</head>
<body>
</body>
</html>
Por último y antes de seguir añadiendo líneas y líneas de código Html5 a nuestros
ejemplos, recuerda que la línea que especifica el charset="utf-8" tiene que ser la primera
línea que haya justo después de <head>, oki? En caso contrario podria no ser leida por
los navegadores. (Debe estar dentro de los primeros 512 carácteres del archivo).
Y tras estas últimas páginas que han sido un poco rollo, vamos a ver cosas más vistosas,
vale?
Párrafos
Con lo explicado antes seguimos teniendo una página vacia. Os explico ahora algunos
elementos que podemos usar en nuestras páginas web, empezando por los párrafos.
Lo más básico que podemos insertar en nuestra nueva página aún en blanco, son
palabras. Vamos a ver como se pone en código Html5 un párrafo.
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 conocéis, es
decir, entre <body> y </body>. Existen otras cosas que no son "visibles" y esas irán en
el head principalmente. Las línea que vimos para especificar el tipo de codificación no
es algo visible, mientras un párrafo que intenta transmitir algo a los visitantes,
obviamente si que es visible.
Para escribir un párrafo, lo haremos dentro de la zona visible (el body) encerrando lo
que queremos escribir entre los símbolos <p> y </p> que son las etiquetas para escribir
párrafos.
Como véis, la primera etiqueta indica comienzo de párrafo (de ahí la "p" de párrafo) y la
segunda situada al final indica el final del párrafo, y lleva por tanto la barrita "/".
<!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>
Si ahora quieres añadir otro párrafo, simplemente coloca otra línea más antes o después
de la escrita antes, según quieras que la nueva aparezca encima o debajo del párrafo
antiguo.
Por ejemplo, si quiero que antes del párrafo "Hola amigos...." aparezca la palabra
"BIENVENIDOS" el código HTML debería 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
párrafo con </p>. Te evitará problemas más adelante.
Si una vez abierta la ventana pulsas en "Ver" y luego en "Código Fuente" verás el
código HTML de esa página. Si no ves botones donde elegir "ver el código fuente" en la
ventana que se abre, prueba a pulsar sobre el interior de la pantalla de ejemplo con el
botón derecho del ratón y escoge ahí "ver el código fuente". Por supuesto, debería ser
idéntico al escrito arriba.
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 quizás en algún momento queramos escribir texto en negrita, o
subrrayado, o cursiva, etc, etc, verdad? Pues también 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.
Recuerda que para insertar un párrafo debes incluir esa línea entre <body> y </body>.
Si olvidas colocar la etiqueta de cierre es muy posible que todo el texto de la página 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 se porque me lo han dicho colegas del foro CCTW je je
je).
Podemos aplicar a la vez los tags <p>, <b>, <i> y cualquiera de los que se explican
abajo.
Un ejemplo de un párrafo simple con dos palabras en cursiva, las palabras "cursiva" y
"ves":
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á.... yoquesé.. si lo sabes me lo dices (underline quizás?).
Podemos aplicar a la vez los tags <p>, <b>, <i> y <u>, entre otros.
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 fácil de explicar, je je je. No os habéis enterado no? Bueno, vamos a ver si
con un ejemplillo...
Todo eso es un párrafo, pues está encerrado entre <p> y </p>. Vamos a poner todo en
negrita:
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 párrafo.
Esta línea está mal, pues se ha cerrado la etiqueta "b" fuera (detrás) de la etiqueta que la
contiene, es decir, fuera de "p".
Esa línea está mal hecha, pues hemos cerrado "b" fuera de "u". Como "b" empieza
dentro de "u", debe cerrarse también dentro de "u".
Comentarios
Para insertar un comentario solo necesitamos encerrarlo entre estos dos símbolos o
etiquetas:
Otro ejemplo es este, donde vemos que podemos meter más guiones por si queremos
dejarlo más visible:
pero como mínimo debe tener los dos guiones tanto al principio como al final, además
del resto de la etiqueta, <!-- y -->.
Por ejemplo, si algún día insertamos un contador en nuestra web (lo haremos, lo
haremos..) se nos proporcionará un trozo de código para que al insertarlo en la página
aparezca ese contador. Podemos entonces poner al principio y al final de ese código
algunos comentarios indicando, por ejemplo, "inicio de codigo contador" y "final de
codigo contador".
De ese modo, si pasado el tiempo revisamos la página, es posible que ni nos acordemos
de qué es ese trozo de código tan raro. Pero al haber puesto esos comentarios podremos
acordarnos fácilmente.
Vamos a aplicar esto. Podemos poner en una página un comentario para recordar que la
parte <head> o cabecera es donde debemos insertar la "metatags". El día que las
insertemos, podemos quitarlo, pero mientras, nos recordará dónde hay que ponerlas. El
código sería 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>
Otra utilidad que tienen los comentarios es la siguiente. Si deseáis anular algún trozo de
vuestra web, pero no queréis borrar su código, pues no sabéis si más adelante os hará
falta, o simplemente, por que queréis ver que tal se ve la web sin cierto elemento, solo
tenéis que encerrar todo ese trozo de código entre los símbolos de comentario y ese
trozo quedará anulado.
Si más tarde os arrepentís, podéis volver a ponerlo en funcionamiento sin más que
quitar los símbolos de comentario. Util, no?
Por ejemplo, para evitar que en el ejemplo de aquí arriba (de la ventana de fondo
blanco) aparezca la frase "Bienvenidos", bastaría con poner los símbolos de comentario
al inicio y final de esa línea, así:
y no aparecerá en la web, aunque el código aún está en la página. Para seguir con las
lecciones eliminad esos comentarios de la línea de Bienvenidos, oki?
Los comentarios creo recordar que no se recomiendan en el xhtml, 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 código. Colocar un comentario al lado puede ser
esclarecedor. Así que nos lo pasamos por... por alto, y ya los eliminaremos de nuestras
páginas cuando lo tengamos todo más controlado, oki?
Al igual que para crear un párrafo encerrábamos su contenido entre las etiquetas <p> y
</p>, para crear ahora un títular 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 página y vea que ese texto
está entre esas etiquetas, lo presentará en la ventana del navegador de un modo distinto,
algo más destacado que el párrafo normal, como corresponde a todo un titular.
Para ver esto más claro vamos a colocar alguna de estas nuevas etiquetas en el código
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 titulo:
......
<body>
<h1>BIENVENIDOS!</h1>
<p>Hola amigos, esta es mi nueva Web</p>
.......
Si ahora guardas el archivo del ejemplo y lo abres como página web, verás este
resultado.
Una cosa importante. Los títulos son PARA USARLOS. Hay algunas cosas que
sabemos que llaman la atención a Google y una de ellas son los títulos. Porque querrás
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 decía, 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 según el código Html (párrafo, título, imagen,....).
El aspecto, lo precioso que sea, lo conseguiremos después, con los estilos CSS, pero por
ahora necesitamos lo básico, el contenido, y eso es lo que hacemos con el Html5, solo
poner contenido en las páginas. Repito, luego con los estilos css les darmos forma y
color. Si no te gustan subrayados, se lo quitaremos, si los prefieres más pequeños o de
otro color, lo conseguiremos, pero con CSS. Veo que te voy convenciendo, ja ja ja.
Genial!
Cuando nos ponemos el disfraz de Html el aspecto nos importa un pimiento. Usaremos
h1 para titulares principales y h2 para titulares secundarios. Si se diera el caso también
los h3 para titulares menores, oki? Más adelante os hablo más a fondo sobre los titulares
en Html5. Por el momento nos basta con estas notas.
Seré capaz de terminar esta parte con Carlitos rondándome? Es que no se cansa nunca
de comer pipas? Claro, si se las pelo yo, cómo se va a cansar. En fin, intentemos
seguir.... je je je.
El código Html5 correcto para insertar una imagen en una página web es este:
Un poco largo quizás? je je je. En cuanto añadas unas pocas imágenes se te queda en la
memoria, seguro. Te explico cada cosa rara de esa línea, verás como todo tiene su
sentido.
Las imágenes, 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 páginas posteriores, no ahora.
La etiqueta para las imágenes es <img ............ >, todo lo demás que va dentro son
detalles que se le añaden y que son necesarios (todos).
Esta etiqueta es algo especial, pues así como las etiquetas de párrafo y de títulos (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
imágenes no se hace esto:
<img>imagen</img>
Si estabas familiarizado con XHML (en el que las etiquetas que no tenian 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 añadir esa barrita de
cierre en las etiquetas que solo tienen apertura. Si la colocas el código 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 pasaría
nadamalo.
Imagina que vas a guardar el archivo de la imagen dentro de la misma carpeta en la que
guardarás 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 tendrías que colocar directamente el nombre del
archivo de imagen con su extensión.
Imagina ahora que dentro de la carpeta en la que vas a guardar el archivo .html, creas
una carpeta llamada imagenes. En este caso sí hay que seguir un caminito para llegar
desde la página hasta la imagen, y por lo tanto la ruta sería imagenes/. Con esto
indicamos que la imagen está en la carpeta imagenes
Ahora imagina que es al revés, que el archivo .html está en esa carpeta paisajes y que la
imagen está dentro de la carpeta imagenes. 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 contrabarra. En este caso la ruta seria
entonces ../ y el nombre del archivo de imagen con su extensión.
Como profundizar en esto de la rutas escapa del objetivo de esta sección, 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.
Para evitar problemas en este sentido fíjate siempre que en el código Html del enlace
aparece el nombre y su extensión tal y como se llama realmente dentro de esa carpeta,
exáctamente igual, prestando especial atención a las mayúsculas y minúsculas. Eso
significa que si el archivo se llama Imagen.BMP no podemos poner en la línea de
código Html de la imagen el nombre imagen.bmp, pues son cosas distintas (una tiene
letras mayúsculas 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 solución que se me ocurre es bien sencilla. Siempre que
tengas alguna imagen preparada para colgarla en tu web, escríbela completamente en
minúsculas antes de subirla al servidor. Y siempre que escribas la ruta y el nombre del
archivo (y su extensión) en el código Html, hazlo con todas las letras en minúsculas
también. De este modo nunca tendrás problemas (de este tipo, de otros ya veremos.... je
je je).
Recuerda también asegurarte de que el nombre del archivo no contenga ningún símbolo
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
página.
Esto ocurre porque el navegador no sabe cuánto ocupa la imagen (cuál 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 además es la forma correcta de escribir el código Html, hay que
definir la altura y anchura de las imágenes en esa línea de código que os comentaba
páginas atrás. Vamos a ver cómo se hace.
Para definir la anchura de la imagen en su línea de código Html basta con colocar esto:
width="111px"
El término width significa anchura en inglés. Original, verdad? y la cifra que he puesto
de ejemplo, el 111 es la anchura expresada en pixeles. Después 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 imágenes
Del mismo modo, para definir la altura de la imagen en su línea de código Html hay con
colocar esto otro:
height="222px"
Donde height significa altura en inglés. La cifra que he puesto de ejemplo, el 222 será la
anchura expresada en pixeles. Después se escriben las letras px que significa "pixeles" y
terminado.
Para saber cuáles 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 botón derecho del ratón
pulsa en "Información", "Propiedades" o algo así (depende de tu sistema operativo) y te
aparecerán. En ocasiones con solo colocar el puntero del ratón sobre el archivo y
esperando un poco aparece un mensajito al lado indicándo estas dimensiones, entre
otras cosas.
Es buena idea no dejar ningún espacio en blanco dentro de las comillas que contienen la
cifra y las unidades. Por ejemplo, podrías 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) tendrías fallos si
dejas espacios en blanco entre el signo igual y la cifra, o entre la cifra y las unidades.
Estaría mal por tanto escribir width=222 px, o width= 222px. La manera correcta sería
width=222px, pero como te digo, lo mejor es usar las dobles comillas y escribirlo así:
width="222px".
El texto alternatico es aquella frase que aparecerá en la web cuando por el motivo que
sea el navegador no cosigue mostrar la imagen. Esto puede ocurrir cuando el navegador
del visitante es muy antiguo, o cuando la línea de código no está bien escrita, o si has
escrito mal la ruta de la imagen (colocando mayúsculas por ejemplo...) u olvidaste subir
la imagen al servidor.
Pero a pesar de estar seguro de que nada de eso va a ocurrir, aún así, es obligatorio
colocar ese alt. Un motivo es, porque es el modo correcto de escribir código Html5.
Otro motivo, y este sí que es importante, es que Google va a conocer la temática de tus
páginas 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 imágenes, de modo que seríamos
muy tontos si no aprovecháramos esa oportunidad, no? Si no sabes lo que son las
palabras clave confórmate con acordarte de poner siempre los alt y ya sabrás mejor el
porqué más adelante, oki? Confia en mí!! je je je.
Con esto nos cargamos la explicación de la línea de código Html necesario para colocar
imágenes en una página web. La línea completa, te recuerdo, queda así:
Si ahora cotilleas dentro del código de algunas páginas (de esta misma que lees) podrás
ya identificar las líneas Html correspondientes a las imágenes y podrás ver todas estas
propiedaes que te acabo de contar. Si ves alguna más que no he puesto yo será porque
no hacen falta para nada o de algún asuntillo que me pueda quedar pendiente de
explicaros, y que veremos más adelante.
Sería impensable una página web sin ningún tipo de enlace o vínculo. No tendría mucho
sentido, verdad? Vamos a ver ahora todo lo necesario para contruir enlaces en nuestras
páginas 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 imágenes, es decir, que daremos la posibilidad al
visitante a acceder a otras partes de la web haciendo click o bien en textos o bien sobre
imágenes.
En ocasiones habrás visto enlaces que se colorean y otros incluso que no cambian de
color al pulsarlos. Esto son cambios en su apariencia. Recuerdas dónde quedaban las
apariencias y adornos? Exacto, los detalles y adornos los dejamos para el CSS que
veremos en otra sección de ComoCrearTuWeb, de modo que esos detalles no los
veremos en esta sección 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 páginas veremos con detalle cada una de las propiedades que
podemos darle a un enlace, éste sería, para que te hagas desde ya una idea, el código
correcto y completo que podría tener un vínculo en perfecto Html5:
En este caso de los enlaces, su etiqueta como ves Sí que tiene etiqueta de cierre, con su
barrita, acuérdate.
Esa etiqueta por sí sola no hace nada. Un enlace en condiciones debe dar alguna pista
más para que funcione y es lo que le indicaremos con las propiedades que vamos a ver a
continuación. Podrías adivinar algunas de ellas? Qué necesitaría saber un navegador
para conseguir enviar a los visitantes desde una página a otra? Pues se me ocurre, la
dirección de la página 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 página, o darle un texto
alternativo tal y como hacíamos con la etiqueta alt de las imágenes, verdad?
Pues en la siguiente página vamos a ver a fondo todas esas propiedades que nos ofrece
el código 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 páginas
web, todo este código Html5 lo vas a poder recordar sin ningún problema.
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 página de destino, de este modo:
Las explicaciones acerca de las rutas que comentamos en la sección de las imágenes y
que puedes encontrar en la definición de Rutas de Archivos de la Enciclopedia CCTW
es igualmente válida 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 del href. 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 minúsculas. De ese modo no tendrás que recordar si a aquél archivo le pusiste o
no letras mayúsculas. En caso de enlazar con archivos que están fuera de tu web (otras
páginas que no son la tuya) tendrás que mirar su nombre exácto, no sea que en ese sitio
sí usen alguna letra mayúscula, claro.
Se pueden enlazar tanto otras páginas web como archivos de música, archivos de
imágenes, etc, etc. En estos casos no se muestra la imagen o la música enlazada, sino
que al pulsar sobre el enlace se ofrecerá la descarga al visitante. Ya veremos esto mejor
más adelante.
Recuerda tener bién claro el concepto de ruta para no tener ningún problema con todo
esto, oki? 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 página, pongamos un ejemplo rápido y sencillo, vale? Qué
código Html habría que colocar dentro del código de una web para colocar un enlace
dirigido a ComoCrearTuWeb?
<a href="http://www.comocreartuweb.com">ComoCrearTuWeb</a>
Otro más. Imagina que quiero colocar un enlace desde el index.html de mi web hacia
una página tambien de mi web que está dentro de una carpeta llamada "noticias" y cuyo
nombre de archivo es "noticias-de-actualidad.html". Qué código tendría que tener ese
enlace, desde index hacia esa página?
<a href="noticias/noticias-de-actualidad.html">Noticias</a>
Todo esto así, de sopetón, puede que te resulte muy pesado. Tú sigue leyendo y verás
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 habrás dado cuenta de que al pulsar enlaces
en ocasiones te aparece la página 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 opción cuando queremos que el archivo enlazado se muestre
en una pantalla completa de la ventana eliminando los frames o marcos si los hay. Esta
opción se utiliza solo cuando nuestra página web esté hecha con frames o marcos y,
como yo no lo recomiendo para nada, puedes olvidarte de ella ;)
target="_self": Con esta tercera opción, la página de destino a la que apunta en vínculo
se mostrará en la misma ventana del navegador del visitante, es decir, no se abrirá en
una ventana aparte. Esta opción 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 opción la página enlazada
se abrirá en una ventana nueva del navegador. Resulta útil cuando queremos enviar a las
visitas a una página externa, fuera de nuesta web. Así se mantendrá nuestra web abierta
en otra ventana y no perdemos esa visita, pues tiene nuestra página a mano. También la
puedes usar cuando quieres mostrar otra página de tu web, pero sin que el visitante
pierda de vista la página en la que estaba. Yo la uso por ejemplo cuando os quiero
mostrar alguna definición de la enciclopedia CCTW. Así, veis la definición en otra
ventana sin perder de vista la página en la que estábais. Luego podéis cerrar la de la
definición y continuar sin perder el hilo. Me explico?
En caso de usarlo, cosa que yo te recomiendo, será este el texto que aparecerá al dejar el
cursor del ratón sobre el enlace. Si colocas el puntero de tu ratón sobre cualquiera de los
enlaces de CCTW verás (a no ser que se me haya olvidado, je je je) ese texto del que te
hablo.
Se utiliza para dar un poco mas de información a las visitas sobre qué van a encontrar si
pulsan el enlace. Sobre todo se utiliza cuando colocamos enlaces en imágenes, 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.
Además, recuerdas que te dije que Google buscaba tus palabras clave dentro de los alt
de las imágenes? 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 además has de procurar que estos
incluyan algunas de tus palabras clave, eso si, 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 más
cosas. De veras que no te pierdes nada de lo importante.
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 página o
bien, pase a otra página distinta, pero no a su comienzo, sino a la parte media o a la
parte que tú desees de esa otra página.
Para verlo más claro aún. Imagina que en una misma página de tu web hablas de
películas de acción, y luego, debajo, de películas de humor, y bajo ésta parte, de
películas de ciencia ficción. Si defines un ancla o un anclaje en cada uno de sus títulos
puedes luego colocar vínculos de modo que al pulsarlos se dirija justo a esa parte de la
página. Si defines un ancla al principio del contenido y colocas un enlace en la parte
inferior indicando "Ir al principio de la página", al pulsarlo se dirigirá automáticamente
a la parte superior, aún siendo la misma página. Lo pillas ahora? Bien, pues vamos a ver
cómo 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 después. Por ejemplo, veamos cómo se define un
ancla en la parte superior.
<a name="arriba"></a>
Con esto definimos un lugar al que podemos enviar a las visitas si pulsan el enlace que
luego veremos cómo colocar. Si ahora en la parte inferior colocamos otra línea como
esta:
<a name="abajo"></a>
tendremos la posibilidad de poder enviarlas también a la parte baja de esa página 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 opción de ir arriba si ya está allí, verdad?). Esto se puede hacer con por ejemplo
esta línea de Html:
Del mismo modo, podríamos colocar arriba de la página otro enlace que permitiera a las
visitas ir al parte inferior (a modo de ejemplo, pues no es una opción que sirva de
mucho al lector, no?):
Si en una página de tu web escribes mucho texto y tiene digamos 3 partes diferenciadas
(3 títulos por ejemplo) podrías definir un ancla en cada uno de esos títulos, y luego
colocar un menú en la parte inferior, o en la parte superior, o en ambas, dando la opción
a las visitas a dirigirse, dentro de esa misma página, a la sección que deseen.
En ese caso colocarías al principio (o al final) ese menú, de este modo por ejemplo:
Y ahora solo te faltaría colocar esas 3 anclas justo al lado de esos títulos, líneas de
código como ásta:
<h1>Título Uno</h1><a name="titulouno"></a>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que
se note el efecto.</p>
<h1>Título Dos</h1><a name="titulodos"></a>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que
se note el efecto.</p>
<h1>Título Tres</h1><a name="titulotres"></a>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que
se note el efecto.</p>
Si en lugar de querer enviar a las visitas a una parte concreta de esa misma página,
quieres enviarlas a una parte concreta de otra página de tu web, has de definir ese ancla
en la página y lugar que quieres elegir de destino, como en este ejemplo, pero en el
enlace has de colocar además del ancla, la ruta de esa otra página, tal y como aparece
aquí abajo:
Es decir, si en una página de tu web quieres colocar un enlace hacia el título dos que
hemos visto en el ejemplo de antes, si esa página que contiene los tres títulos se llama
titulares.html, entonces en la otra página tendrías que poner esta línea:
Las propiedades rel que vamos a ver se colocan dentro de la etiqueta de apertura del
enlace o vínculo. Puedes colocar varias, una o ninguna. Veamos un ejemplo de un
enlace con dos propiedades rel:
Son idoneas para informar a los navegadores de cuál es la página inicial de una sección,
cuál es la siguiente y cuál la anterior respecto de la página donde se encuentra el
visitante. Son geniales para colocar en las típicas flechitas de adelante y atrás y logran
que los navegadores se puedan hacer una idea del orden de las páginas de una web, si es
que están ordenadas, claro.
Muy similares a las anteriores, salvo que en estos casos se informa al nvegador que la
página enlazada es la primera o la última en el orden de la sección a la que pertenece.
Además, tenemos el valor up para indicar que la página vinculada pertenece a un nivel
jerárquico superior al de la página actual..
Esta es de las que más me gustan! Con el valor prefetch se está ordenando al navegador
que vaya leyendo y memorizando una página 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 información mientra el lector permanecía
leyendo en la página anterior. Lo idoneo sería saber cuáles son las páginas 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 sera mucho mayor, claro. Tampoco
es cuestión de colocar ese valor a todos los enlaces de tus páginas, que te veo venir! je
je je.
Existen un montón de valores posibles que yo considero menos importantes, pero que
quiero citar por si a alguien le interesa utilizar, como el típico nofollow que indica que
el destino no tiene naa que ver con la temática de la web, sidebar que no está aún muy
definido, search para páginas que muestran resultados de búsquedas, noreferer para que
el navegador haga caso omiso de las posibles variables de referencia añadidas a la url, el
típico pingback de los blogs y alguno que otro más.
Advertencia
No todos los navegadores saben interpretar aún todos estos valores. De hecho algunos
no son reconocidos por ningún navegador todavía, pero la especificación Html5 existe,
de modo que no tardarán mucho en aplicarlos. En cualquier caso en caso de no ser
interpretados, tampoco ocasionan errores, por lo que quizás decidas usarlos desde ya y
no esperar a que los navegadores aprendan esta lección, verdad?
y este es su código:
<!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 diseñar
páginas web" width="270px" height="80px" />
<h1>Menú de Contenidos</h1>
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<h2>Título Uno</h2>
<a name="titulouno"></a>
<p>Este es el <u>texto correspondiente</u> al título uno, aunque debería ser más largo
para que se note el efecto.</p>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que
se note el efecto.</p>
<p>Este es el texto correspondiente al título uno, aunque debería ser más largo para que
se note el efecto.</p>
<h2>Título Dos</h2>
<a name="titulodos"></a>
<p>Este es el <i>texto correspondiente</i> al título dos, aunque debería ser más largo
para que se note el efecto.</p>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que
se note el efecto.</p>
<p>Este es el texto correspondiente al título dos, aunque debería ser más largo para que
se note el efecto.</p>
<h2>Título Tres</h2>
<a name="titulotres"></a>
<p>Este es el <b>texto correspondiente</b> al título tres, aunque debería ser más largo
para que se note el efecto.</p>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que
se note el efecto.</p>
<p>Este es el texto correspondiente al título tres, aunque debería ser más largo para que
se note el efecto.</p>
<a href="http://www.comocreartuweb.com" target="_blank" title="Como hacer páginas
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>
Puedes usar los saltos de línea siempre que quieras que un elemento aparezca en la línea
siguiente. Esto no solo ocurrirá dentro de los párrafos. Si por ejemplo tienes varios
enlaces que te aparecen en la misma línea y tú deseas que aparezcan uno bajo el otro,
puedes colocar la etiqueta <br /> al final de cada uno de los códigos de los enlaces para
conseguirlo.
Recuerdas el ejemplo de la página anterior? Pusimos tres enlaces para enviar a los
visitantes al título uno, dos o tres. Esos enlaces aparecían juntos en la misma línea. Si
ahora en lugar de esto:
........
<h1>Menú de Contenidos</h1>
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<h2>Título Uno</h2>
........
colocamos la etiqueta de salto de línea tras los dos primeros enlaces, así:
........
<h1>Menú de Contenidos</h1>
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a><br />
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a><br />
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
<h2>Título Uno</h2>
........
Del mismo modo, si insertamos la etiqueta de salto de línea en medio del texto de un
párrafo, provocaremos un salto de línea justo en esa parte, a pesar de que el párrafo aún
no haya terminado.
Siempre que lo uses recuerda ponerle la barrita, y dejar un espacio entre br y la barra,
oki?
Aprovecho para decirte algo sobre los saltos de línea. Cada vez que abres un párrafo con
su etiqueta <p> aparece un salto de línea sin necesidad de colocar la etiqueta <br />.
También aparecen saltos cuando empiezas un título con <h1>,<h2>, etc.
Por ejemplo, si en una de las páginas 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 cómodo 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
páginas) no es más que una lista de elementos, de enlaces en este caso, por lo que estas
etiquetas se usan mucho para eso, construir menús de enlaces. A que ahora sí les vas a
hacer caso? je je 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 número al principio de
cada uno de ellos, de forma automática. Eso significa que no es necesario escribir el
número sino que aparecerá solo, y consecutivo, desde el uno hasta el que corresponda al
último elemento de la lista.
El otro tipo es idéntico, pero en ese caso en lugar de aparecer números al principio,
aparece una rallita o un circulo redondo.
En cualquier caso, tanto esos números 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,vale?.
Es posible que en internet o en algún libro, encuentres otras cosas que se le pueden
añadir a los códigos de las listas, además 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 enseñar 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.
<ul>
</ul>
Las etiquetas de inicio y fin de cada uno de los elementos que le queramos añadir a esa
lista, serían <li> y </li>, de modo que el código Html de una lista con tres elementos
vacios, sería este:
<ul>
<li></li>
<li></li>
<li></li>
</ul>
Un poco sosa, no? Para añadir algo a cada elemento, basta con colocar ese algo entre las
etiquetas <li> y </li>. Vamos por ejemplo a contruir una lista con los tres enlaces del
ejemplo que estamos viendo en estas páginas atrás. El código de esos tres enlaces era
este:
........
<a href="#titulouno" title="Ir al título uno">Ir al título uno</a>
<a href="#titulodos" title="Ir al título dos">Ir al título dos</a>
<a href="#titulotres" title="Ir al título tres">Ir al título tres</a>
........
de modo que para añadirlos a la lista anterior, solo habría que colocar las etiquetas de
inicio y fin de lista antes y después de todo ese código y además colocar las etiquetas de
inicio y fin de elemento antes y después de cada enlace. Quedaría así:
........
<ul>
<li><a href="#titulouno" title="Ir al título uno">Ir al título uno</a></li>
<li><a href="#titulodos" title="Ir al título dos">Ir al título dos</a></li>
<li><a href="#titulotres" title="Ir al título tres">Ir al título tres</a></li>
</ul>
........
Aunque como vamos diciendo, el aspecto que tomen nos importa un pepino, éste es el
resultado del ejemplo una vez metidos 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 añadir el salto de línea 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 línea y no uno bajo otro, para construir un menú horizontal, por
ejemplo. Ya lo veremos en CSS, pero sigue siendo muy útil que estén incluidos en una
de estas listas.
Ves ese circulito negro que aparece al a izquierda de cada elemento? Es lo que te decía
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.
El código Html de la lista anterior, pero ordenada en este caso, sería este:
........
<ol>
<li><a href="#titulouno" title="Ir al título uno">Ir al título uno</a></li>
<li><a href="#titulodos" title="Ir al título dos">Ir al título dos</a></li>
<li><a href="#titulotres" title="Ir al título tres">Ir al título tres</a></li>
</ol>
........
A menos que quieras que aparezcan esos número o letras antes de cada elemento, te
recomiendo usar siempre las otras, oki? Siempre puedes ponerle el número o letra a
mano, dentro de cada <li>.Volverás a verlas cuando expliquemos en el curso de CSS
cómo organizar un menú, o en los ejemplos con DIVs.
La Metatag description
Cuando te hablé de la etiqueta <title> y de las características alt="...." de las imágenes o
los title="...." de los enlaces, te dije que eran muy buenos lugares donde colocar las
palabras clave de tus páginas web. Te hablo ahora de dos lugares más en las que poder
añadir estas keywords o palabras clave. La metatag description que te explico abajo y la
metatag keywords que veremos en la página siguiente.
La metatag description se coloca en la cabecera de la página (entre <head> y </head>).
Se llama metatag por la palabra con la que empieza su línea de código, que es esta:
Esa línea es obligatoria (si deseas aparecer en buenos puestos en los buscadores) y has
de copiarla tal cuál te la he escrito, cambiando solamente lo coloreado en rojo, la
descripción de esa página web concreta.
Al igual que ocurre con el título que pusimos con la etiqueta <title>, ha de ser diferente
en cada una de las páginas de tu web. Si se te ocurre colocar dos metatags de
descripción con el mismo contenido en dos o más de las páginas de tu sitio, buscadores
como Google entenderán 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 páginas tengan ese metatag
description sino que además 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 descripción con cierta maña, de modo que uses en
esa frase algunas de las palabras clave que caracterizan a esa página concreta. Y todo
ello procurando que la frase tenga sentido. Nada de colocar palabras clave al tuntún, ni
repetir la misma veinte veces, oki?
Ten además en cuenta que las palabras clave a incluir en todas estas etiquetas que te voy
comentando, han de ser de esa página en concreto, no de tu web en general, sino justo
de la página de tu web para la que estás escribiendo esa línea. Cada página de tu web ha
de tener sus propias palabras clave, es lo mejor.
La línea de código que has de colocar también dentro del head de tus páginas, por
ejemplo, bajo la línea de descripción, sería esta:
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 código Xhtml correcto, oki? No
coloques más 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 cuál es el tema de esa página.
Aunque no hay mucho escrito sobre esto, yo separo cada palabra con una coma y un
espacio. También uso tildes o acentos si la palabra los tiene e intento colocar siempre
plurales, pues una palabra en plural suele contener también a la singular. Es decir, el
plural "páginas" contiene a su vez la palabra "página" en su interior, por lo que
colocando éste plural, también estoy cubriendo el singular.
Aunque hay gente que piensa que esta metatag no es leida por Google y otros, yo
siempre la coloco. Sobre la metatag description si parece haber mucha más gente que
piensa que Google la lee y la tiene en cuenta.
Actualizo esto para comentar que al parecer, este metatag ya no es utilizado por Google,
por lo que en principio podríamos prescindir de colocarlo en nuestras páginas... yo por
el momento lo mantendré, por si acaso, je je je.