Introdución Al Curso de Html5

http://www.comocreartuweb.com/curso-de-html/curso-html-introducion.
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
Introdución 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
ningún otro procesador de textos, pues es preciso que el software en el que escribas
código html (o Php, Javascript, etc) NO le asigne formatos al texto (color, tamaño, etc,
como el Word de Microsoft, etc).
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>
Buscando un simil, podríamos decir que todo el código 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 código
pertenece a esa etiqueta (head, body o lo que sea), mientras que la que sí lleva la barra
indica siempre que el código 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 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.
En estas lecciones estamos aprendiendo Html5, la última versión de Html por el

momento. Siempre que crees una página web basada en el Html explicado en
ComoCrearTuWeb coloca este código en la primera línea de los archivos html, tal cual,
sin cambiar nada. Eso especifica que usamos la versión Html5.
<!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!
Cómo y dónde indicar el idioma en

HTML5
Como decíamos, estamos aprendiendo HTML5 y esta versión nos obliga a definir qué
lenguaje o idioma estamos usando para los contenidos. Esta definición se indica en la
etiqueta que abre el código, la etiqueta <html>, quedando de este modo:
<!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.
Nuestro código Html ya es así de grandote!:
<!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?
La línea completa de un código de página sería por ejemplo este:
<title>Título de esta página</title>
Quedando el código completo de nuestro ejemplo de este modo:
<!DOCTYPE html>
<html lang="es">
<head>
</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.
Se recomienda, además de no repetirse en las distintas páginas de tu web, que el

contenido del title no tenga más de 65 letras o caracteres ni más de 15 palabras.
Aprovécha para incluir en los títulos palabras clave de esa página, es decir, algunas de
aquellas palabras por las que crees que podrías ser encontrado si alguien está interesado
en encontrar una página como esa. Qué escribiría un usuario en Google para
encontrarla? Pues esas son tus palabras clave para esa página concreta, oki? Además, no
se pueden colocar dos etiquetas title dentro de la cabecera de una misma página, tan
solo una por página, de acuerdo?
Etiqueta meta description en Html5
Además de la etiqueta title que acabamos de ver y que define el título de la página (no
de la web, sino de esa página concreta) y que como hemos dicho, ha de ser distinta en
cada una de las páginas de tu web, tenemos otra etiqueta de tipo meta importante, la
etiqueta description.
<meta name="Description" content="descripción de la 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.
Se recomienda que el contenido dentro de la meta etiqueta description no tenga más de

150 caracteres ni más de 30 palabras. Aprovecha y piensa bien lo que vas a poner, pues
las palabras clave de tu web deberían aparecer dentro, sin repeticiones y manteniendo
cierto sentido, oki? Recuerda que es una descripción, no una ristra de palabras sin
sentido. No coloques dos líneas de description dentro de la cabecera de una misma
página, oki? Recuerda, igual que con title, coloca solamente un description.
Definir el charset o tipo de codificación

de tus páginas
Es posible que al escribir el título de tu web del modo que te he enseñado antes, veas
que aparecen carácteres extraños en esa barra superior del navegador. Sobre todo al usar
acentos o "eñes". Por qué ocurre esto? Cómo lo evitamos?
Imaginas la cantidad de carácteres extraños que existen? Cosas en hebreo, en chino, o si

no las letras rusas esas tan raras, je je je. Para no volver locos a los navegadores
tenemos que indicarles qué tipo de codificación vamos a usar en nuestras páginas web.
Por ejemplo, para escribir en español o castellano y evitar que aparezcan símbolos raros
al escribir los acentos, tenemos que avisar que estamos tratando de escribir en ese
idioma. Para que se muestren carácteres chinos y no una ristra de cosas sin sentido
(como si el chino tuviera sentido....) tendríamos que avisarle igualmente al navegador
que mostrara los carácteres segun esa codificación. Me explico?
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>
</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 y 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 "/".
Por ejemplo, si queremos que en nuestra web aparezca el siguiente párrafo:
Hola amigos, esta es mi nueva Web
tendremos que escribir, entre <body> y </body> la siguiente línea:
Hola amigos, esta es mi nueva Web
de forma que el ejemplo anterior quedaría así:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Mi Nueva Web</title>
</head>
<body>
</body>
</html>
Como ves, en este ejemplo se ha puesto ya el título a la página. En concreto se le ha

llamado "Mi Nueva Web".
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>
</head>
<body>
BIENVENIDOS!
</body>
</html>
Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el final del
párrafo con . Te evitará problemas más adelante.
 Ver como queda el ejemplo hasta ahora.
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.
Si os va gustando todo esto seguidme a la página siguiente.
Resaltar Textos
Con el tag (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 y éste aparecerá en negrita. El tag representa
a la propiedad "bold" que significa negrita.
Podemos aplicar a la vez los tags , y cualquiera de los que se explican abajo.
Un ejemplo de un párrafo simple con una palabra en negrita, la palabra "negrita":
Este párrafo es normal y esta palabra va en negrita, lo ves? 

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 y éste aparecerá en cursiva. El tag 
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 , , 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":
Este párrafo es normal y esta palabra va en cursiva, lo ves? 
Textos Subrayados
Si encerramos un texto entre y éste aparecerá subrayados. El tag 
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 , , y , entre otros.
Un ejemplo de un párrafo simple con un trozo subrayado:
Este párrafo tiene un trozo subrayado. Te gusta? 

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 fácil de explicar, je je je. No os habéis enterado no? Bueno, vamos a ver si
con un ejemplillo...
Mirad esta línea:
Hola amigos y amigas
Todo eso es un párrafo, pues está encerrado entre y . Vamos a poner todo en
negrita:
Hola amigos y amigas
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.
Vamos a ver un ejemplo mal hecho:
Hola amigos y amigas
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".
Vamos a ver un tercer ejemplo mal hecho:
Este es un ejemplo de etiquetas en html
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".
El mismo ejemplo pero bien hecho sería:
Este es un ejemplo de etiquetas en html

Espero que os hayais aclarado con esto. Sabed que las etiquetas pueden escribirse en
mayúsculas o minúsculas, da lo mismo. Además, todas estas deben cerrarse siempre. No
vale abrir una etiqueta, por ejemplo y no cerrarla al final con . 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.
También os recomiendo siempre escribir las etiquetas en minúscula.
Comentarios
Para insertar un comentario solo necesitamos encerrarlo entre estos dos símbolos o
etiquetas:
 ( y con esto se termina el comentario)
Por ejemplo, esto que sigue es un comentario:

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, .
Los comentarios no aparecen en la página 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 código,
sepa qué es cada trozo de código. Es decir, podemos insertar comentarios en alguna
parte del código Html de nuestra página para saber qué hace ese trozo, para dejárnos
notas a nosotros mismos.
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>

</head>
<body>
BIENVENIDOS!
</body>
</html>
En Dreamweaver o en algunos editores de texto plano es muy fácil identificar esos

comentarios, pues al ver el código de cualquier web con él, los comentarios aparecen en
gris claro.
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í:


<!DOCTYPE html>
<html lang="es">
<head>
</head>
<body>

</body>
</html>
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?
No olvidéis cerrar siempre los comentarios con el símbolo -->.
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?
Los Títulos Html para resaltar titulares

de tus textos.
Hasta ahora sabes ya crear una página web algo miserable, pues solo has aprendido a
colocarle textos en forma de párrafos. Ahora vamos a aprender a crear titulares con la
ayuda de las etiquetas correspondientes de Html5. Verás qué fácil.
Al igual que para crear un párrafo encerrábamos su contenido entre las etiquetas y
, 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 y del texto
BIENVENIDOS! y vamos a encerrar esa palabra entre las nuevas etiquetas de titulo:
......
<body>
<h1>BIENVENIDOS!</h1>
.......
Si ahora guardas el archivo del ejemplo y lo abres como página web, verás este
resultado.
La apariencia es sin duda distinta, como si de un titular de periódico se tratara, verdad?

Existen otras etiquetas de títulos 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 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.
Insertar imágenes en una página web con

el código Html correcto
Ya sabemos el codigo Html5 correcto para añadir párrafos y titulares en una web. Ahora
aprenderemos a escribir el código Html5 para la inserción de imágenes.
Las imágenes son un elemento más en las páginas web y aunque adornan (y tendría que
decirte que los adornos son cosa del CSS) hay que añadirlos en el Html de las páginas,
salvo algunas excepciones, como es el caso de las imágenes de fondo que sí que irán en
el CSS. Si te estás liando ;=) simplemente sigue leyendo, aprende a colocar imágenes y
ya nos aclararemos más más adelante.
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:
<img src="ruta/archivo.extensión" width="111px" height="222px" alt="Texto

Alternativo">
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 Html de Imagen

Etiqueta de imagen
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>
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 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.
Explicación sobre las rutas de una

imagen.
Quizás uno de los conceptos más enrevesados de los que encontrarás 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 codigo Html hasta el lugar donde guardarás el archivo de la imagen
que deseas insertar en esa página. Me explico mejor con un ejemplo, je je je.
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
Si en lugar de en esa carpeta, la imagen se guardara dentro de una carpeta llamada

paisajes creada dentro de la carpeta imagenes de antes, la ruta en este caso sería, ir a la
carpeta imagenes y una vez dentro entrar en la carpeta paisajes para encontrar la imagen
que queremos. En este otro caso la ruta sería imagenes/paisajes/. Seguido claro del
nombre del archivo de imagen con su extensión. Lo pillas?
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.
El nombre del archivo y su extensión

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 verás, je je je.
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).
Pues lo dicho, que no se te olvide, los nombres de archivos y sus extensiones y el

nombre de las carpetas de tus páginas web han de ir SIEMPRE escritas SOLO con letras
MINÚSCULAS.
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.
Las dimensiones de las imágenes en el

Html
En ocasiones quizás hayas visitado una web y nada mas intentar entrar ves parte de la
web, algo desmoronada o desordenada y, conforme se van cargando imágenes la web va
tomando forma. Te ha ocurrido? No es nada grave a no ser que una de las imágenes
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 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.
Definir la anchura de una imagen
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".
Qué son los Textos Alternativos y cómo se

colocan?
Ya solo nos queda un trocito de aquél código para dominar el Html de las imágenes. Se
trata del alt, que sirve para indicar los textos alternativos a la imagen. Pero qué es eso?
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.
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 descripción de la misma. Y si
puedes aprovechar para usar algunas de tus palabras clave en esa descripción, mejor que
mejor.
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í:
<img src="ruta/archivo.extensión" width="111px" height="222px" alt="Texto

Alternativo">
o, para que veas un ejemplo real (aunque inventado), este otro:
<img src="imagenes/puesta-de-sol.png" width="450px" height="230px" alt="Las

mejores puestas de sol, todoimagenes.com">
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.
Fácil o qué? ;=)
Los enlaces y su código Html

Qué es un enlace, un vínculo, un link? Todos esos términos significan lo mismo, un
lugar en el que si hacemos clic con el ratón 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 fácil? je je je. Aprendamos más.
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:
<a href="http://www.comocreartuweb.com" target="_blank" title="Crear páginas

web">Crear Paginas Web</a>
No parece muy complicado, no? Es que no lo es, je je je. Es un ejemplo básico, y

veremos más tarde otras cosillas que se le pueden añadir, pero en la mayoría de los
casos será suficiente con esa sola línea.
Si me acompañas te lo enseño 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, vínculos, hipervínculos 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, 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 ruta de los enlaces en código Html5

Ya hemos visto que un enlace en el que no se indique la dirección de la página o de la
parte de la web a la que queremos enviar a las visitas es como un pájaro sin plumas.
Vamos a ver cómo se indica al navegador a dónde queremos enviar a las visitas al
pulsar sobre cada enlace de la página.
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:
<a href="ruta-del-enlace/nombre-del-archivo-destino.extension">Texto del

enlace</a>
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="_parent": Con esta opción la página 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
también para usar cuando tienes marcos y no va a ser el caso, verdad? ;)
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?
Resumiendo, si queremos que la página 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 olvidate del resto! ;=)
Textos Altenativos con la propiedad Title

de Html5
Igual que vimos en las imágenes, en las que se podía definir un texto alternativo con la
propiedad alt="Texto Alternativo", en el código 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 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.
Los Anclajes o enlaces tipo Ancla en

Html5
Ya hemos aprendido a enviar a las visitas a una página u otra de nuestra web. Pero en
ocasiones, tenemos páginas con un contenido tan grande que nos interesa enviar a estas
visitas no a una página sino a una "parte" concreta de una página 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 páginas de ComoCrearTuWeb, la flecha de en medio que te dirige hacia
la parte superior de la página (Ir arriba). Para estos casos Html ha definido un enlace
especial que denomina Ancla o Anclaje. Vamos a ver cómo 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 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.
Basta con colocar esta línea de código 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 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:
<a href="#arriba" title="Ir Arriba">Ir arriba</a>
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?):
<a href="#abajo" title="Ir Abajo">Ir abajo</a>
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:
<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>
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>
Este es el texto correspondiente al título uno, aunque debería ser más largo para que
se note el efecto.
<h1>Título Dos</h1><a name="titulodos"></a>
Este es el texto correspondiente al título dos, aunque debería ser más largo para que
<h1>Título Tres</h1><a name="titulotres"></a>
Este es el texto correspondiente al título tres, aunque debería ser más largo para que
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:
<a href="pagina-de-destino.html#nombre-del-ancla">Enlace hacia el ancla</a>
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:
<a href="titulares.html#titulodos">Ir al título dos de la página titulares</a>
Si no ha quedado lo suficientemente claro o te surge alguna duda pregúntanos lo que

quieras en el Foro CCTW, oki?
Propiedad rel para los enlaces en el

Html5
La nueva versión 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 páginas web.
Será interesante especialmente en dispositivos móviles, y también en las nuevas
versiones de los navegadores habituales. Veamos los más destacados.
Dónde 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 vínculo. 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 página 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 página por contener aún información interesante, pero se avisa que se
desea mantener en estado de archivo. Podría ser el caso de noticias ya pasadas, páginas
con contenidos algo pasados de moda o sustituidos por versiones más 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 páginas de contenido de autor. Se coloca a aquellos

enlaces que se dirigen hacia la web personal del autor del artículo, o a aquellas en las
que se habla de ellos.
Propiedad rel="prev", rel="start" y rel="next" para indicar incicio, siguiente y

página anterior
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.
Propiedad rel="first", rel="last" y rel="up" indicando la primera y última página
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..
Propiedad rel="prefetch", cargando la página siguiente antes de que el usuario

haga clic
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.
Otros valores para la propiedad rel
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?
Ejemplo de lo aprendido hasta el

momento
Antes de seguir con más código Html, quiero enseñarte un ejemplo el que aplicamos
todo lo que hemos visto hasta el momento. Revísalo a fondo y pregunta todo lo que no
entiendas en el foro antes de continuar para ir más suelto con el resto de las
explicaciones que iré colocando, oki?
El restultado del ejemplo es de lo más sencillo y muy muy poco vistoso. No te

preocupes por eso, pues como te he dicho antes, el darle un aspecto más profesional,
con márgenes 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 página web. Ten fe!
El resultado de este ejemplo cuyo código te coloco más abajo es este:
Ver resultado del ejemplo.
y este es su código:
<!DOCTYPE html>
<html lang="es">
<head>
</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>
<h2>Título Uno</h2>
<a name="titulouno"></a>
Este es el texto correspondiente al título uno, aunque debería ser más largo
para que se note el efecto.
<h2>Título Dos</h2>
<a name="titulodos"></a>
Este es el texto correspondiente al título dos, aunque debería ser más largo
<h2>Título Tres</h2>
<a name="titulotres"></a>
Este es el texto correspondiente al título tres, aunque debería ser más largo
<a href="http://www.comocreartuweb.com" target="_blank" title="Como hacer páginas
web">ComoCrearTuWeb</a>
Adios Amigos!
<a href="#arriba" title="Ir Arriba">Ir Arriba</a>
</body>
</html>
La etiqueta BR para los saltos de línea en

los textos de una web
A la hora de escribir textos vimos cómo usar los párrafos. Recuerdas sus etiquetas 
y ? Al usar los párrafos, no aparecen saltos de línea hasta que no termina ese
párrafo, es decir, no se ven saltos de línea hasta que se alcanza la etiqueta de cierre
. Existe no obstante una etiqueta para provocar un salto de línea sin tener que
esperar a cerrar el párrafo.
Los saltos de línea se definen con la etiqueta . 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 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 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:
........
........
colocamos la etiqueta de salto de línea tras los dos primeros enlaces, así:
........
<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> 
........
conseguimos que cada enlace aparezca en una nueva línea.
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 aparece un salto de línea sin necesidad de colocar la etiqueta .
También aparecen saltos cuando empiezas un título con <h1>,<h2>, etc.
En cambio, no aparecen saltos automáticamente, cuando insertas en una web un enlace

(<a href="....), o una imagen (<img src=....>). Es por eso que en el ejemplo de la página
anterior, los enlaces aparecían en la misma línea y por eso para que aparezcan en líneas
distintas hemos tenido que añadirles la etiqueta <hbr />.
Los elementos que producen un salto de línea automáticamente sin necesidad de colocar
la etiqueta se denominan Elemenos de Bloque mientras que los que no producen
este salto de modo automático se llaman Elementos de Línea.
Se puede conseguir que elementos de bloque no produzcan esos saltos, e igualmente,

que elementos de línea sí tengan saltos, sin necesidad de ponerles el . Cómo?
Usando estilos CSS, pero eso lo veremos en ese otro curso, oki?
Listados de elementos y su código Html

Otro elemento que suele usarse bastante en la construcción de páginas web son las listas
o listados de elementos. Se utilizan para colocar una serie de elementos organizados en
listas (cómo no). Aunque quizás no se te ocurra qué utilidad pueden tener para tí, te
aconsejo que aprendas a usarlos pues, como veremos más adelante, son muy útiles en
algunos casos.
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.
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 vacia, sin elementos dentro, tendría este código
Html:
<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:
........
........
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 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.
Las Listas de elementos ordenadas

Las listas que hemos visto antes se llaman "desordenadas" por que el circulito negro de
la izquierda de cada elemento no indica ningún orden. Si quisiéramos que aparezca un
número o una letra correlativa en cada uno de esos elementos, tendríamos que usar
etiquetas de listas "ordenadas". Esas listas ordenadas se construyen exáctamente igual
que las que acabamos de ver en la página 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 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>
........
y así es cómo se ve aquella lista en el caso de usar la etiqueta de lista ordenada.
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:
<meta name="description" content=". . . . descripción de la página . . . " />
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.
Metatag Keywords y Palabras Clave

Pues esta es otra etiqueta más en donde puedes colocar las palabras clave o keywords de
tus páginas web. Todo lo comentado en la página anterior para la descripción es
aplicable a este otro caso.
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:
<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 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.
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, loquesea gratis", aunque tampoco en
ese caso deberías abusar demasiado.
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.
En el apartado "Los Buscadores" de la lengueta "Promoción de Webs" deberías poder

encontrar información más 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 podríamos prescindir de colocarlo en nuestras páginas... yo por
el momento lo mantendré, por si acaso, je je je.

Introdución Al Curso de Html5

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Introdución Al Curso de Html5

Diunggah oleh

Hak Cipta:

Format Tersedia

http://www.comocreartuweb.com/curso-de-html/curso-html-introducion.

Introdución al Curso de Html

Buscando un simil, podríamos decir que todo el código va metido en un armario

El contenido correspondiente a la cabecera (head) tendrá que ir siempre entre la

En estas lecciones estamos aprendiendo Html5, la última versión de Html por el

Cómo y dónde indicar el idioma en

Nuestro código Html ya es así de grandote!:

La línea completa de un código de página sería por ejemplo este:

<title>Título de esta página</title>

Quedando el código completo de nuestro ejemplo de este modo:

Se recomienda, además de no repetirse en las distintas páginas de tu web, que el

<meta name="Description" content="descripción de la página">

Se recomienda que el contenido dentro de la meta etiqueta description no tenga más de

Definir el charset o tipo de codificación

Imaginas la cantidad de carácteres extraños que existen? Cosas en hebreo, en chino, o si

Por ejemplo, si queremos que en nuestra web aparezca el siguiente párrafo:

Hola amigos, esta es mi nueva Web

tendremos que escribir, entre <body> y </body> la siguiente línea:

<p>Hola amigos, esta es mi nueva Web</p>

de forma que el ejemplo anterior quedaría así:

Como ves, en este ejemplo se ha puesto ya el título a la página. En concreto se le ha

 Ver como queda el ejemplo hasta ahora.

Si os va gustando todo esto seguidme a la página siguiente.

Un ejemplo de un párrafo simple con una palabra en negrita, la palabra "negrita":

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

<p>Este párrafo es normal y esta palabra va en <i>cursiva</i>, lo <i>ves</i>? </p>

 Ver como queda el ejemplo hasta ahora.

Un ejemplo de un párrafo simple con un trozo subrayado:

<p>Este párrafo <u>tiene un trozo subrayado.</u> Te gusta? </p>

Textos con Varios Estilos a la Vez

Mirad esta línea:

<p>Hola amigos y amigas</p>

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

Vamos a ver un ejemplo mal hecho:

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

Vamos a ver un tercer ejemplo mal hecho:

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

El mismo ejemplo pero bien hecho sería:

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

 Ver como queda el ejemplo hasta ahora.

<!-- (Este es el símbolo que indica inicio de comentario)

Por ejemplo, esto que sigue es un comentario:

Los comentarios no aparecen en la página cuando la visita alguien. En realidad no hacen

 Ver como queda el ejemplo hasta ahora.

En Dreamweaver o en algunos editores de texto plano es muy fácil identificar esos

 Ver como queda el ejemplo hasta ahora.

No olvidéis cerrar siempre los comentarios con el símbolo -->.

Los Títulos Html para resaltar titulares

 Ver como queda el ejemplo hasta ahora.

La apariencia es sin duda distinta, como si de un titular de periódico se tratara, verdad?

Insertar imágenes en una página web con

<img src="ruta/archivo.extensión" width="111px" height="222px" alt="Texto

La etiqueta Html de Imagen

sino esto otro:

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

Y ahora veamos el resto de propiedades que se le colocan dentro a esa etiqueta.

Explicación sobre las rutas de una

Si en lugar de en esa carpeta, la imagen se guardara dentro de una carpeta llamada

El nombre del archivo y su extensión

Pues lo dicho, que no se te olvide, los nombres de archivos y sus extensiones y el

Las dimensiones de las imágenes en el