Conocimientos de HTML en Un Libro Hecho de Mi

La estructura
Ms de una vez os habris tropezado, bien por curiosidad o bien por error al pulsar el botn equivocado, con una pantalla llena de numerajos y letruchas que ni por asomo parecen algo con sentido. Los ms aventureros habris entrado en esa zona "prohibida" para insertar algunos fragmentos de cdigo para vuestro contador, estadsticas, etc, pensando "como esto no chute....como me cargue mi querida pagina...va a ver ese Jorgens lo que es bueno" je je je. Pues bien, vamos a desmenuzar la estructura de una pgina web para ir perdindole el miedo. Toda pgina web hecha con Html5, por complicada que parezca, se divide en dos partes bien diferentes a las que llamaremos Cabecera (head) y Cuerpo (body). Adems, todas las pginas web empiezan con la palabra mgica (o etiqueta) <html> y terminan con la etiqueta</html>. Cada pgina web adems, solo tiene una sola cabecera y un solo cuerpo. Nos dejamos los dobles cuerpos y dobles cabezas para la mitologa, oki? Para que os hagis una idea, esto sera una pgina web con todas las de la Ley, eso s, vacia.
<html> <head> </head> <body> </body> </html>
Buscando un simil, podramos decir que todo el cdigo va metido en un armario llamado html y que a su vez tiene dos compartimentos separados, uno llamado head y otro llamado body. El contenido correspondiente a la cabecera (head) tendr que ir siempre entre la etiqueta <head> que indica inicio de la cabecera, y la etiqueta </head> que indica el fin de la cabecera. Estas dos etiquetas se diferencian por la barra que tiene delante la que indica fin: /. La que no tiene la barra siempre indica que a partir de ah el cdigo pertenece a esa etiqueta (head, body o lo que sea), mientras que la que s lleva la barra indica siempre que el cdigo de esa parte ha terminado. Lo mismo ocurre con el Cuerpo (body), cuyo contenido ha de estar siempre entre la etiqueta <body> que indica comienzo del Cuerpo, y la etiqueta </body> que indica su final. Con esto ya te ha de quedar bien claro que la barra "/" indica siempre final de una parte, no?
Existen cosillas que SOLO podremos colocar dentro del encabezado (head) y otras cosas que solo funcionarn dentro del cuerpo (body), pero esas cosas las iremos viendo conforme avancemos. Os muestro abajo el cdigo de una pgina web vacia, pero con algunas cosillas ms. Este cdigo es el que tiene una pgina de esas que creis con FrontPage, Dreamweaver, Html-Kit o programas por el estilo (programas que deberas desinstalar ya mismo...), nada ms empezar, es decir, cuando an no habis metido nada en ella.
<html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF"> </body> </html>
Vemos en este cdigo las palabras mgicas comentadas antes, html, head, body y sus correspondientes cierres con la barra " < y > las llamaremos etiquetas. Aparecen algunas cosas nuevas, pero las veremos con detenimiento ms adelante. Con esto que sabes ahora mismo, podras mirar el cdigo Html de cualquier pgina web e indentificar dnde empieza su cdigo html, dnde termina, y dnde empiezan y acaban la cabecera y el body, verdad?. En CCTW tienes instrucciones sobre cmo ver el cdigo Html de cualquier pgina web, por si te interesa aprenderlo (y creeme, S te interesa! je je je)
Definicin del tipo de documento con DOCTYPE
Aunque te he dicho antes que la primera etiqueta con la que ha de empezar el cdigo de una pgina web deba ser la etiqueta <html>, realmente la primera lnea, antes de esa etiqueta, debe ser la de definicin del tipo de documento. Lo dicho sigue siendo cierto, pues la lnea de la que te hablo ahora no es cdigo Html sino solo un modo de indicar al navegador qu tipo de documento le estamos presentando. Mediante esa lnea por tanto, podemos indicar al navegador que lo que contiene el archivo que estamos creando es cdigo Html y qu tipo de Html concretamente, pues hay varias formas de escribirlo en funcin de la versin de Html que vayamos a usar al escribir el cdigo. En estas lecciones estamos aprendiendo Html5, la ltima versin de Html por el momento. Siempre que crees una pgina web basada en el Html explicado en ComoCrearTuWeb coloca este cdigo en la primera lnea de los archivos html, tal cual, sin cambiar nada. Eso especifica que usamos la versin Html5.
<!DOCTYPE html>
Anteriormente, para otras versiones de Html, la lnea para definir el tipo de documento era ms larga y liosa, pero ahora en Html5 es as de cortita. Mejor, no? Qudate con que en estas lecciones vamos a escribir cdigo Html del tipo HTML5, y con cul es la primera lnea que debe aparecer en el archivo de cada una de tus pginas. De modo que, una pgina web vacia, pero con el tipo de documento ya declarado correctamente, sera as: <!DOCTYPE html> <html> <head> </head> <body> </body> </html> Esto por el momento es un acto de f, je je je. Agradecers esa lnea si alguna vez quieres validar tu cdigo Html, cosa que ya veremos lo que es. Seguimos? Pues dale a la flecha de la derecha y continuamos!
Cmo y dnde indicar el idioma en HTML5
Como decamos, estamos aprendiendo HTML5 y esta versin nos obliga a definir qu lenguaje o idioma estamos usando para los contenidos. Esta definicin se indica en la etiqueta que abre el cdigo, la etiqueta <html>, quedando de este modo:
<!DOCTYPE html> <html lang="es"> ..........
Adems, no se pueden indicar varios idiomas en una misma pgina. Olvida la idea de colocar un prrafo en un idioma y el de abajo en otro traduciendo el anterior. Si necesitas una pgina en varios idiomas has de crear una pgina para cada idioma, si es posible en un dominio con la extensin correspondiente (un punto es, otra con punto it, etc). Si no fuera posible, hazlo en un subdominio de tu dominio. No deberas hacerlo en una carpeta aparte ni mucho menos en la misma carpeta en la que est la versin del idioma principal, de veras. El rey del posicionamiento es Google (claro, es quien dicta las normas, ja ja ja) y fjate que ellos tienen un dominio distinto para cada lenguaje. Puedes crear subdominios para las traducciones. Yo, por ejemplo, podra crear el subdominio en.comocreartuweb.com para la versin en ingls, de.comocreartuweb.com para la traduccin en alemn, it.comocreartuweb.com para la italiana. Esa es
una buena prctica si no quieres comprar un dominio para cada idioma. Resumiendo, las dos lneas de arriba son comunes a toooodas las pginas de tus webs, y de las mias, je je. A menos claro que el idioma elegido no sea el espaol (es). Para otros idiomas las siglas son otras, claro. Puedes ver las siglas de cada idioma en la wikipedia mismo. Nuestro cdigo 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 pginas y el title o ttulo definido en la cabecera es uno de estos y, adems, es importantsimo. Con las etiquetas <title> y </title> se define el ttulo de cada una de las pginas de una web. No de la web completa sino de cada pgina del sitio web. Por ejemplo, si tienes una web que habla de cocina, tendr dentro una pgina que hable de una sopa, otra de tarta de fresa, etc, etc. Pues cada una de esas pginas ha de tener un ttulo que represente a esa pgina, no uno genrico de la web sino un <title> concreto para cada una de sus pginas. Fjate que tenemos una etiqueta para indicar que empieza el ttulo y otra para indicar que el ttulo ha terminado, <title> y </title>, oki? La lnea completa de un cdigo de pgina sera por ejemplo este:
<title>Ttulo de esta pgina</title>
Quedando el cdigo completo de nuestro ejemplo de este modo: <!DOCTYPE html> <html lang="es"> <head> <title>Ttulo de esta pgina</title> </head> <body> </body> </html> Lo que pongas entre esas etiquetas <title> ser lo que va a aparecer en la barrita azul que hay en la
parte superior de los navegadores, pero no aparece dentro de la ventana del navegador, solo en esa barrita de arriba. Sirven no solo para indicar al visitante qu va a encontrar en esa pgina, sino tambin a los buscadores para saber de qu hablas en esa pgina. Es muy muy muy importante que el ttulo de cada una de las pginas de tu web sea distinto de unas a otras. Como tengas dos titles exctamente iguales en varias de las pginas de tu sitio web, los buscadores (por ejeplo Google) creern que tienes dos pginas idnticas (que una es copia de la otra) de modo que solo har caso a una de ellas, solo indexar una de las dos. Cuida que todas sean distintas para aumentar la cantidad de pginas que los buscadores conocen de tu web y conseguir as aumentar las visitas de tu web. No lo olvides! Procura tambin, sin abusar, que entre las palabras del ttulo aparezcan las palabras clave de esa pgina, es decir, aquellas palabras por las que crees que podras ser encontrado por alguien que est usando Google para llegar a esa pgina. Se recomienda, adems de no repetirse en las distintas pginas de tu web, que el contenido del title no tenga ms de 65 letras o caracteres ni ms de 15 palabras. Aprovcha para incluir en los ttulos palabras clave de esa pgina, es decir, algunas de aquellas palabras por las que crees que podras ser encontrado si alguien est interesado en encontrar una pgina como esa. Qu escribira un usuario en Google para encontrarla? Pues esas son tus palabras clave para esa pgina concreta, oki? Adems, no se pueden colocar dos etiquetas title dentro de la cabecera de una misma pgina, tan solo una por pgina, de acuerdo?
Etiqueta meta description en Html5
Adems de la etiqueta title que acabamos de ver y que define el ttulo de la pgina (no de la web, sino de esa pgina concreta) y que como hemos dicho, ha de ser distinta en cada una de las pginas de tu web, tenemos otra etiqueta de tipo meta importante, la etiqueta description.
<meta name="Description" content="descripcin de la pgina">
Actualmente los buscadores (incluido Google, el rey) solo hacen caso de las meta etiquetastitle y description, por lo que no hablaremos ya de ninguna otra. Si tienes alguna ms 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 pginas de tu web, no lo olvides pues es un error muy comn, incluso en pgina de cierta importancia. Repito, si tienes dos title o dosdescription idnticos en dos o ms pginas dentro de tu web, Google las tomar como copias y solo indexar una de ellas, perdiendo posibilidades de ser encontrado por los usuarios del buscador. Se recomienda que el contenido dentro de la meta etiqueta description no tenga ms de 150 caracteres ni ms de 30 palabras. Aprovecha y piensa bien lo que vas a poner, pues las palabras clave de tu web deberan aparecer dentro, sin repeticiones y manteniendo cierto sentido, oki? Recuerda que es una
descripcin, no una ristra de palabras sin sentido. No coloques dos lneas de description dentro de la cabecera de una misma pgina, oki? Recuerda, igual que con title, coloca solamente un description.
Definir el charset o tipo de codificacin de tus pginas
Es posible que al escribir el ttulo de tu web del modo que te he enseado antes, veas que aparecen carcteres extraos en esa barra superior del navegador. Sobre todo al usar acentos o "ees". Por qu ocurre esto? Cmo lo evitamos? Imaginas la cantidad de carcteres extraos 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 codificacin vamos a usar en nuestras pginas web. Por ejemplo, para escribir en espaol o castellano y evitar que aparezcan smbolos raros al escribir los acentos, tenemos que avisar que estamos tratando de escribir en ese idioma. Para que se muestren carcteres chinos y no una ristra de cosas sin sentido (como si el chino tuviera sentido....) tendramos que avisarle igualmente al navegador que mostrara los carcteres segun esa codificacin. Me explico? Pues bien, para que se muestren correctamente las tildes o acentos que escribamos en el contenido de nuestras pginas, tenemos que aadir una lnea que indique ese tipo de codificacin. Como eso es algo que no se ve directamente en el navegador, sino que es un tipo de definicin, est claro que esa lnea de cdigo ha de ir en la cabecera. La lnea para que los carcteres en castellano aparezcan bien en los navegadores cuando se escribe cdigo Html5 sera esta: <meta charset="utf-8" /> Esa lnea ha de ir en todas las pginas de nuestras webs, o al menos, en las que no hablemos en chino ;=) Colcala siempre sin cambiarle nada, tal cul est. Vers que esta etiqueta empieza por la palabra meta y que no tiene etiqueta de cierre (no se pone </meta> al final de la lnea). Es un caso un poco especial pues normalmente casi siempre hay una etiqueta de cierre tras una etiqueta de apertura. En el caso caso de que una etiqueta no use la correspondiente etiqueta de cierre, se coloca en su lugar una barra al final de la lnea de apertura. En este caso la puedes ver al final del cdigo que he colocado antes. Te la he sealado en rojo para destacarla. Otra etiqueta que no tiene etiqueta de cierre es la de imagen, que veremos enseguida. Ahora que tenemos claro que el cdigo Html va a tener una codificiacin del tipo UTF-8, hemos de asegurarnos de que cada vez que guardamos un archivo de cdigo, ha de guardarse como tal, como UTF-8. Si lo guardamos sin especificar esto y por defecto se guardara con otra codificacin, podramos tener los problemas comentados atrs, como que los acentos aparezcan raros, etc. Visita la seccin Editores de Texto Plano de nuevo para leer cmo se elige la codificacin antes de guardar un archivo, oki? Especialmente si usas el Block de Notas o Notepad. Creo que el Sublime Text reconoce automticamente la codificacin y no necesita que le digas nada.
Y este es el cdigo que llevamos hecho por el momento en este tutorial y que conocemos ya perfectamente, lnea a lnea!
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Ttulo de esta pgina</title> </head> <body> </body> </html>
Por ltimo y antes de seguir aadiendo lneas y lneas de cdigo Html5 a nuestros ejemplos, recuerda que la lnea que especifica el charset="utf-8" tiene que ser la primera lnea que haya justo despus de <head>, oki? En caso contrario podria no ser leida por los navegadores. (Debe estar dentro de los primeros 512 carcteres del archivo). Y tras estas ltimas pginas que han sido un poco rollo, vamos a ver cosas ms vistosas, vale?
Prrafos
Con lo explicado antes seguimos teniendo una pgina vacia. Os explico ahora algunos elementos que podemos usar en nuestras pginas web, empezando por los prrafos. Lo ms bsico que podemos insertar en nuestra nueva pgina an en blanco, son palabras. Vamos a ver como se pone en cdigo Html5 un prrafo. En primer lugar deciros que todos los elementos (o casi todos los elementos) de una web, (me refiero a todo lo "visible", o casi) ir dentro del body que ya conocis, es decir, entre <body> y</body>. Existen otras cosas que no son "visibles" y esas irn en el head principalmente. Las lnea que vimos para especificar el tipo de codificacin no es algo visible, mientras un prrafo que intenta transmitir algo a los visitantes, obviamente si que es visible. Para escribir un prrafo, lo haremos dentro de la zona visible (el body) encerrando lo que queremos escribir entre los smbolos <p> y </p> que son las etiquetas para escribir prrafos. Como vis, la primera etiqueta indica comienzo de prrafo (de ah la "p" de prrafo) y la segunda situada al final indica el final del prrafo, y lleva por tanto la barrita "/". Por ejemplo, si queremos que en nuestra web aparezca el siguiente prrafo:
Hola amigos, esta es mi nueva Web
tendremos que escribir, entre <body> y </body> la siguiente lnea:

<p>Hola amigos, esta es mi nueva Web</p>
de forma que el ejemplo anterior quedara as: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Mi Nueva Web</title> </head> <body> <p>Hola amigos, esta es mi nueva Web</p> </body> </html> Como ves, en este ejemplo se ha puesto ya el ttulo a la pgina. En concreto se le ha llamado "Mi Nueva Web". Si ahora quieres aadir otro prrafo, simplemente coloca otra lnea ms antes o despus de la escrita antes, segn quieras que la nueva aparezca encima o debajo del prrafo antiguo. Por ejemplo, si quiero que antes del prrafo "Hola amigos...." aparezca la palabra "BIENVENIDOS" el cdigo HTML debera quedar como sigue: <!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Mi Nueva Web</title> </head> <body> <p>BIENVENIDOS!</p> <p>Hola amigos, esta es mi nueva Web</p> </body> </html> Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el final del prrafo con </p>. Te evitar problemas ms adelante. Ver como queda el ejemplo hasta ahora. Si una vez abierta la ventana pulsas en "Ver" y luego en "Cdigo Fuente" vers el cdigo HTML de esa pgina. Si no ves botones donde elegir "ver el cdigo fuente" en la ventana que se abre, prueba a pulsar sobre el interior de la pantalla de ejemplo con el botn derecho del ratn y escoge ah "ver el cdigo fuente". Por supuesto, debera ser idntico al escrito arriba. Si os va gustando todo esto seguidme a la pgina siguiente.
Resaltar Textos
Con el tag <p> (as se llama eso, o etiqueta, que se le va a hacer...) ya sabemos poner un texto
simple. Pero quizs en algn momento queramos escribir texto en negrita, o subrrayado, o cursiva, etc, etc, verdad? Pues tambin para esos estilos existe un "tag" o una etiqueta determinada.
Textos en Negrita
Si encerramos un texto entre <b> y </b> ste aparecer en negrita. El tag <b> representa a la propiedad "bold" que significa negrita. Podemos aplicar a la vez los tags <p>, <b> y cualquiera de los que se explican abajo. Un ejemplo de un prrafo simple con una palabra en negrita, la palabra "negrita":
<p>Este prrafo es normal y esta palabra va en <b>negrita</b>, lo ves? </p>
Ver como queda el ejemplo hasta ahora. Recuerda que para insertar un prrafo debes incluir esa lnea entre <body> y </body>. Si olvidas colocar la etiqueta de cierre es muy posible que todo el texto de la pgina a partir de ah aparezca en negrita.
Textos en Cursiva
Si encerramos un texto entre <i> y </i> ste aparecer en cursiva. El tag <i> representa a la propiedad cursiva. Al igual que "b" representa "bold", "i" representa "italic" que significa cursiva (lo 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 prrafo simple con dos palabras en cursiva, las palabras "cursiva" y "ves":
<p>Este prrafo es normal y esta palabra va en <i>cursiva</i>, lo <i>ves</i>? </p>
Ver como queda el ejemplo Html5 hasta ahora.
Textos Subrayados
Si encerramos un texto entre <u> y </u> ste aparecer subrayados. El tag <u> representa a la propiedad subrayado. Al igual que "b" representa "bold", "u" representar.... yoques.. si lo sabes me lo dices (underline quizs?). Podemos aplicar a la vez los tags <p>, <b>, <i> y <u>, entre otros. Un ejemplo de un prrafo simple con un trozo subrayado:
<p>Este prrafo <u>tiene un trozo subrayado.</u> Te gusta? </p>
Ver como queda el ejemplo hasta el momento.
Textos con Varios Estilos a la Vez

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

<p>Hola amigos y amigas</p>
Todo eso es un prrafo, pues est encerrado entre <p> y </p>. Vamos a poner todo en negrita:
<p><b>Hola amigos y amigas</b></p>
Ahora todo est en negrita. Esto est bien, pues hemos cerrado la etiqueta "b" dentro de la que la contiene, es decir, dentro de la etiqueta "p", de prrafo. Vamos a ver un ejemplo mal hecho:
<p><b>Hola amigos y amigas</p></b>
Esta lnea est mal, pues se ha cerrado la etiqueta "b" fuera (detrs) de la etiqueta que la contiene, es decir, fuera de "p". Vamos a ver un tercer ejemplo mal hecho:
<p>Este <u>es un <b>ejemplo de etiquetas</u></b> en html</p>
Esa lnea est mal hecha, pues hemos cerrado "b" fuera de "u". Como "b" empieza dentro de "u", debe cerrarse tambin dentro de "u". El mismo ejemplo pero bien hecho sera:
<p>Este <u>es un <b>ejemplo de etiquetas</b></u> en html</p>
Ver como queda el ejemplo hasta ahora. Espero que os hayais aclarado con esto. Sabed que las etiquetas pueden escribirse en maysculas o minsculas, da lo mismo. Adems, todas estas deben cerrarse siempre. No vale abrir una etiqueta, por ejemplo <p> y no cerrarla al final con </p>. Es muy posible que a pesar de no cerrarla, parezca que funciona, pero os recomiendo cerrarlas siempre para evitar problemas a la gente que os visite con otros navegadores distintos al vuestro. Tambin os recomiendo siempre escribir las etiquetas en minscula.
Comentarios
Para insertar un comentario solo necesitamos encerrarlo entre estos dos smbolos o etiquetas:
 ( y con esto se termina el comentario)
Por ejemplo, esto que sigue es un comentario:


Otro ejemplo es este, donde vemos que podemos meter ms guiones por si queremos dejarlo ms visible:

pero como mnimo debe tener los dos guiones tanto al principio como al final, adems del resto de la etiqueta, . Los comentarios no aparecen en la pgina cuando la visita alguien. En realidad no hacen nada de nada de nada. Solo sirven para que el autor de la web, cuando mire su cdigo, sepa qu es cada trozo de cdigo. Es decir, podemos insertar comentarios en alguna parte del cdigo Html de nuestra pgina para saber qu hace ese trozo, para dejrnos notas a nosotros mismos. Por ejemplo, si algn da insertamos un contador en nuestra web (lo haremos, lo haremos..) se nos proporcionar un trozo de cdigo para que al insertarlo en la pgina aparezca ese contador. Podemos entonces poner al principio y al final de ese cdigo algunos comentarios indicando, por ejemplo, "inicio de codigo contador" y "final de codigo contador". De ese modo, si pasado el tiempo revisamos la pgina, es posible que ni nos acordemos de qu es ese trozo de cdigo tan raro. Pero al haber puesto esos comentarios podremos acordarnos fcilmente. Vamos a aplicar esto. Podemos poner en una pgina un comentario para recordar que la parte <head> o cabecera es donde debemos insertar la "metatags". El da que las insertemos, podemos quitarlo, pero mientras, nos recordar dnde hay que ponerlas. El cdigo sera el siguiente:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Mi Nueva Web</title>  </head> <body> <p>BIENVENIDOS!</p> <p>Hola amigos, esta es mi nueva Web</p> </body> </html>
Ver como queda el ejemplo Html hasta ahora. En Dreamweaver o en algunos editores de texto plano es muy fcil identificar esos comentarios, pues al ver el cdigo de cualquier web con l, los comentarios aparecen en gris claro. Otra utilidad que tienen los comentarios es la siguiente. Si deseis anular algn trozo de vuestra web, pero no queris borrar su cdigo, pues no sabis si ms adelante os har falta, o simplemente, por que queris ver que tal se ve la web sin cierto elemento, solo tenis que encerrar todo ese trozo de cdigo entre los smbolos de comentario y ese trozo quedar anulado. Si ms tarde os arrepents, podis volver a ponerlo en funcionamiento sin ms que quitar los smbolos de comentario. Util, no? Por ejemplo, para evitar que en el ejemplo de aqu arriba (de la ventana de fondo blanco) aparezca la frase "Bienvenidos", bastara con poner los smbolos de comentario al inicio y final de esa lnea, as:
 <!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>
Ver como queda el ejemplo hasta ahora. y no aparecer en la web, aunque el cdigo an est en la pgina. Para seguir con las lecciones eliminad esos comentarios de la lnea de Bienvenidos, oki? No olvidis cerrar siempre los comentarios con el smbolo -->. 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 cdigo. Colocar un comentario al lado puede ser esclarecedor. As que nos lo pasamos por... por alto, y ya los eliminaremos de nuestras pginas cuando lo tengamos todo ms controlado, oki?
Los Ttulos Html para resaltar titulares de tus textos.
Hasta ahora sabes ya crear una pgina web algo miserable, pues solo has aprendido a colocarle textos en forma de prrafos. Ahora vamos a aprender a crear titulares con la ayuda de las etiquetas correspondientes de Html5. Vers qu fcil. Al igual que para crear un prrafo encerrbamos su contenido entre las etiquetas <p> y </p>, para crear ahora un ttular basta con escribir su texto y encerrarlo en este caso entre las etiquetas <h1> y </h1>. De este modo, cuando el navegador lea el contenido de tu pgina y vea que ese texto est entre esas etiquetas, lo presentar en la ventana del navegador de un modo distinto, algo ms destacado que el prrafo normal, como corresponde a todo un titular. Para ver esto ms claro vamos a colocar alguna de estas nuevas etiquetas en el cdigo de nuestro ejemplo. Vamos a eliminar las etiquetas <p> y </p> del texto BIENVENIDOS! y vamos a encerrar esa palabra entre las nuevas etiquetas de 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 pgina web, vers este resultado. Ver como queda el ejemplo hasta ahora. La apariencia es sin duda distinta, como si de un titular de peridico se tratara, verdad? Existen otras
etiquetas de ttulos en Html5, h2, h3, h4, h5.... y hasta el 6 creo, aunque no creo que pasemos del h2 o h3 normalmente. El aspecto de estos otros tipos de titular es menos cantoso, menos destacado conforme mayor es el numerito que sigue a la letra h. Una cosa importante. Los ttulos son PARA USARLOS. Hay algunas cosas que sabemos que llaman la atencin a Google y una de ellas son los ttulos. Porque querrs estar entre los primeros en los buscadores, no? ;=). Te gusten o no vamos a usarlos. Si es el aspecto lo que no te agrada no te preocupes, pues como te deca, al trabajar con Html nos tiene que dar igual que un elemento sea feo o bonito. Lo importante es que cada elemento sea de un tipo concreto segn el cdigo Html (prrafo, ttulo, imagen,....). El aspecto, lo precioso que sea, lo conseguiremos despus, con los estilos CSS, pero por ahora necesitamos lo bsico, el contenido, y eso es lo que hacemos con el Html5, solo poner contenido en las pginas. Repito, luego con los estilos css les darmos forma y color. Si no te gustan subrayados, se lo quitaremos, si los prefieres ms pequeos o de otro color, lo conseguiremos, pero con CSS. Veo que te voy convenciendo, ja ja ja. Genial! Cuando nos ponemos el disfraz de Html el aspecto nos importa un pimiento. Usaremos h1 para titulares principales y h2para titulares secundarios. Si se diera el caso tambin los h3 para titulares menores, oki? Ms adelante os hablo ms a fondo sobre los titulares en Html5. Por el momento nos basta con estas notas.
Insertar imgenes en una pgina web con el cdigo Html correcto
Ya sabemos el codigo Html5 correcto para aadir prrafos y titulares en una web. Ahora aprenderemos a escribir el cdigo Html5 para la insercin de imgenes. Las imgenes son un elemento ms en las pginas web y aunque adornan (y tendra que decirte que los adornos son cosa del CSS) hay que aadirlos en el Html de las pginas, salvo algunas excepciones, como es el caso de las imgenes de fondo que s que irn en el CSS. Si te ests liando ;=) simplemente sigue leyendo, aprende a colocar imgenes y ya nos aclararemos ms ms adelante. Ser capaz de terminar esta parte con Carlitos rondndome? Es que no se cansa nunca de comer pipas? Claro, si se las pelo yo, cmo se va a cansar. En fin, intentemos seguir.... je je je. El cdigo Html5 correcto para insertar una imagen en una pgina web es este:
<img src="ruta/archivo.extensin" width="111px" height="222px" alt="Texto Alternativo">
Un poco largo quizs? je je je. En cuanto aadas unas pocas imgenes se te queda en la memoria, seguro. Te explico cada cosa rara de esa lnea, vers como todo tiene su sentido. Las imgenes, definidas como vemos con la etiqueta img, las relacionaremos bastante con las nuevas etiquetas de Html5<figure>, <figcaption> y/o <aside>, pero eso lo veremos en pginas posteriores, no ahora.
La etiqueta Html de Imagen
Etiqueta de imagen
La etiqueta para las imgenes es <img ............ >, todo lo dems que va dentro son detalles que se le aaden y que son necesarios (todos). Esta etiqueta es algo especial, pues as como las etiquetas de prrafo y de ttulos (y muchas otras que hemos visto) necesitan obligatoriamente de su correspondiente etiqueta de cierre, la etiqueta de imagen no tiene etiqueta de cierre. Es decir, con las imgenes no se hace esto:
<img>imagen</img>
sino esto otro:

<img ......resto de propiedades.... >
Y ahora veamos el resto de propiedades que se le colocan dentro a esa etiqueta. Si estabas familiarizado con XHML (en el que las etiquetas que no 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 aadir esa barrita de cierre en las etiquetas que solo tienen apertura. Si la colocas el cdigo se puede validar igualmente para Html5, pero no es obligatoria. Nosotros no vamos a usarlas en estas lecciones ya que Html5 no las requiere, pero como te digo, si las usas no pasara nadamalo.
Explicacin sobre las rutas de una imagen.
Quizs uno de los conceptos ms enrevesados de los que encontrars en este mundillo. La ruta de la imagen es el camino que hay que seguir para llegar desde el archivo en el que vas a guardar el codigo Html hasta el lugar donde guardars el archivo de la imagen que deseas insertar en esa pgina. 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 guardars el archivo .html. En ese caso el camino es nulo. El archivo no tiene que ir a ninguna parte a buscar la imagen, por lo tanto en este caso no hay ruta, no se pone nada en donde yo he puesto ruta/.Solo tendras que colocar directamente el nombre del archivo de imagen con su extensin. Imagina ahora que dentro de la carpeta en la que vas a guardar el archivo .html, creas una carpeta llamada imagenes. En este caso s hay que seguir un caminito para llegar desde la pgina hasta la imagen, y por lo tanto la ruta sera 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 paisajescreada dentro de la carpeta imagenes de antes, la ruta en este caso sera, 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 sera imagenes/paisajes/. Seguido claro del nombre del archivo de imagen con su extensin. Lo pillas? Ahora imagina que es al revs, que el archivo .html est en esa carpeta paisajes y que la imagen est dentro de la carpeta 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 extensin. Como profundizar en esto de la rutas escapa del objetivo de esta seccin, mejor pasa por la Enciclopedia CCTW para aprender bien su uso. Es imprescindible dominar esto, pues forman cerca del 75% de los fallos que se cometen al principio. Domnalas!! je je je.
El nombre del archivo y su extensin
De nada sirve colocar la ruta bien para llegar desde el archivo hasta la imagen si luego el navegador no es capaz de encontrar la imagen dentro de esa carpeta, no? Pues nos pasar unas cuantas veces, ya vers, je je je. Para evitar problemas en este sentido fjate siempre que en el cdigo Html del enlace aparece el nombre y su extensin tal y como se llama realmente dentro de esa carpeta, exctamente igual, prestando especial atencin a las maysculas y minsculas. Eso significa que si el archivo se llama Imagen.BMP no podemos poner en la lnea de cdigo Html de la imagen el nombre imagen.bmp, pues son cosas distintas (una tiene letras maysculas y la otra no). Si no lo hacemos bien el navegador nunca encontrar la imagen a pesar de que la ruta est bien. Y como remediamos esto? La solucin que se me ocurre es bien sencilla. Siempre que tengas alguna imagen preparada para colgarla en tu web, escrbela completamente en minsculas antes de subirla al servidor. Y siempre que escribas la ruta y el nombre del archivo (y su extensin) en el cdigo Html, hazlo con todas las letras en minsculas tambin. De este modo nunca tendrs problemas (de este tipo, de otros ya veremos.... je 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 pginas web han de ir SIEMPRE escritas SOLO con letras MINSCULAS. Recuerda tambin asegurarte de que el nombre del archivo no contenga ningn smbolo raro, como acentos o tildes y espacios en blanco. Si es as, o los eliminas del nombre del archivo o casi seguro que vas a tener problemas con l y no te aparecer la imagen en tu pgina.
Las dimensiones de las imgenes en el Html
En ocasiones quizs hayas visitado una web y nada mas intentar entrar ves parte de la web, algo desmoronada o desordenada y, conforme se van cargando imgenes la web va tomando forma. Te ha ocurrido? No es nada grave a no ser que una de las imgenes tenga la ruta mal escrita (como hemos visto antes) en cuyo caso el desmorone o desorden se mantendr en la web. Esto ocurre porque el navegador no sabe cunto ocupa la imagen (cul es su altura y anchura) hasta que la carga y, si no consigue cargarla, no sabe lo que ocupa, claro. Para evitar esto y porque adems es la forma correcta de escribir el cdigo Html, hay que definir la altura y anchura de las imgenes en esa lnea de cdigo que os comentaba pginas atrs. Vamos a ver cmo se hace.
Definir la anchura de una imagen

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

Del mismo modo, para definir la altura de la imagen en su lnea de cdigo Html hay con colocar esto otro:
height="222px"
Donde height significa altura en ingls. La cifra que he puesto de ejemplo, el 222 ser la anchura expresada en pixeles. Despus se escriben las letras px que significa "pixeles" y terminado. Para saber cules son las dimensiones de la imagen que vas a colocar, ve a la carpeta donde la tienes guardada y pulsando sobre su archivo con el botn derecho del ratn pulsa en "Informacin", "Propiedades" o algo as (depende de tu sistema operativo) y te aparecern. En ocasiones con solo colocar el puntero del ratn sobre el archivo y esperando un poco aparece un mensajito al lado indicndo estas dimensiones, entre otras cosas. Es buena idea no dejar ningn espacio en blanco dentro de las comillas que contienen la cifra y las unidades. Por ejemplo, podras tener problemas escribiendo "222 px", " 222 px ", " 222px", etc. La forma correcta es sin espacios en blanco dentro de las dobles comillas, as "222px". Si no colocas las comillas sino solo el valor sin ellas (el Htmlo5 permite usar comillas o no utilizarlas, pero yo te recomiendo MUCHO que s las uses siempre) tendras fallos si dejas espacios en blanco entre el signo igual y la cifra, o entre la cifra y las unidades. Estara mal por tanto escribir width=222 px, o width= 222px. La manera correcta serawidth=222px, pero como te digo, lo mejor es usar las dobles comillas y escribirlo as: width="222px".
Qu son los Textos Alternativos y cmo se colocan?
Ya solo nos queda un trocito de aqul cdigo para dominar el Html de las imgenes. Se trata del alt, que sirve para indicar los textos alternativos a la imagen. Pero qu es eso? El texto 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 lnea de cdigo no est bien escrita, o si has escrito mal la ruta de la imagen (colocando maysculas por ejemplo...) u olvidaste subir la imagen al servidor. Pero a pesar de estar seguro de que nada de eso va a ocurrir, an as, es obligatorio colocar ese alt. Un motivo es, porque es el modo correcto de escribir cdigo Html5. Otro motivo, y este s que es importante, es que Google va a conocer la temtica de tus pginas por la cantidad de palabras clave que aparezcan en ella y, uno de los lugares en los que busca esas palabras clave es en el alt de las imgenes, de modo que seramos muy tontos si no aprovechramos esa oportunidad, no? Si no sabes lo que son las palabras clave confrmate con acordarte de poner siempre los alt y ya sabrs mejor el porqu ms adelante, 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 descripcin de la misma. Y si puedes aprovechar para usar algunas de tus palabras clave en esa descripcin, mejor que mejor. Con esto nos cargamos la explicacin de la lnea de cdigo Html necesario para colocar imgenes en una pgina web. La lnea completa, te recuerdo, queda as:
<img src="ruta/archivo.extensin" width="111px" height="222px" alt="Texto Alternativo">
o, para que veas un ejemplo real (aunque inventado), este otro:

<img src="imagenes/puesta-de-sol.png" width="450px" height="230px" alt="Las mejores puestas de sol, todoimagenes.com">
Si ahora cotilleas dentro del cdigo de algunas pginas (de esta misma que lees) podrs ya identificar las lneas Html correspondientes a las imgenes y podrs ver todas estas propiedaes que te acabo de contar. Si ves alguna ms que no he puesto yo ser porque no hacen falta para nada o de algn asuntillo que me pueda quedar pendiente de explicaros, y que veremos ms adelante. Fcil o qu? ;=)
Los enlaces y su cdigo Html
Qu es un enlace, un vnculo, un link? Todos esos trminos significan lo mismo, un lugar en el que si hacemos clic con el ratn somos dirigidos a otra parte. Puede ser un texto (normalmente subrayado) o una imagen (sobre la que podemos hacer clic para ir a otro lugar de la web). No es fcil? je je je. Aprendamos ms. Sera impensable una pgina web sin ningn tipo de enlace o vnculo. No tendra mucho sentido, verdad? Vamos a ver ahora todo lo necesario para contruir enlaces en nuestras pginas web, tanto enlaces internos (hacia otras partes de nuestra web) como enlaces externos (hacia otros sitios) y todas las variantes que podemos aprovechar para sacarles todo el jugo a los links. Con estas lecciones aprenderemos a colocar enlaces desde cachitos de texto e incluso desde bloques de palabras o desde imgenes, es decir, que daremos la posibilidad al visitante a acceder a otras partes de la web haciendo click o bien en textos o bien sobre imgenes. En ocasiones habrs visto enlaces que se colorean y otros incluso que no cambian de color al pulsarlos. Esto son cambios en su apariencia. Recuerdas dnde quedaban las apariencias y adornos? Exacto, los detalles y adornos los dejamos para el CSS que veremos en otra seccin de ComoCrearTuWeb, de modo que esos detalles no los veremos en esta seccin de Html5 sino en el curso de CSS3, vale? Aqu aprendemos a colocarlos y en el curso de CSS3 a darles color y formas. Aunque en las siguientes pginas veremos con detalle cada una de las propiedades que podemos darle a un enlace, ste sera, para que te hagas desde ya una idea, el cdigo correcto y completo que podra tener un vnculo en perfecto Html5:
<a href="http://www.comocreartuweb.com" target="_blank" title="Crear pginas web">Crear Paginas Web</a>
No parece muy complicado, no? Es que no lo es, je je je. Es un ejemplo bsico, y veremos ms tarde otras cosillas que se le pueden aadir, pero en la mayora de los casos ser suficiente con esa sola lnea. Si me acompaas te lo enseo a fondo, como siempre, pulsando en la flechita de la derecha para seguir un orden y no perdernos nada!
La etiqueta A en Html5 para crear enlaces
En el caso de los links, vnculos, hipervnculos o enlaces (es lo mismo una cosa que la otra) la etiqueta que se usa es una simple letra "a", tal y como vemos abajo:
<a .....propiedades....> </a>
En este caso de los enlaces, su etiqueta como ves S que tiene etiqueta de cierre, con su barrita, acurdate.
Esa etiqueta por s sola no hace nada. Un enlace en condiciones debe dar alguna pista ms para que funcione y es lo que le indicaremos con las propiedades que vamos a ver a continuacin. Podras adivinar algunas de ellas? Qu necesitara saber un navegador para conseguir enviar a los visitantes desde una pgina a otra? Pues se me ocurre, la direccin de la pgina a la que lo queremos enviar a las visitas; si queremos que se abra o no otra ventana de su navegador al mostrar esa otra pgina, o darle un texto alternativo tal y como hacamos con la etiqueta alt de las imgenes, verdad? Pues en la siguiente pgina vamos a ver a fondo todas esas propiedades que nos ofrece el cdigo Html5 para definir perfectamente un enlace para que se comporte tal y como nosotros queremos. No te asustes si parece algo demasiado espeso como para acordarse. Siempre puedes apuntar lo importante en un block para consultarlo cada vez que quieras crear un enlace. De todos modos, te aseguro que en cuanto coloques 4 o 5 enlaces en una de tus pginas web, todo este cdigo Html5 lo vas a poder recordar sin ningn problema.
La ruta de los enlaces en cdigo Html5

Ya hemos visto que un enlace en el que no se indique la direccin de la pgina o de la parte de la web a la que queremos enviar a las visitas es como un pjaro sin plumas. Vamos a ver cmo se indica al navegador a dnde queremos enviar a las visitas al pulsar sobre cada enlace de la pgina. La propiedad que se usa para indicar esto, es href y tras ella y entre comillas dobles es donde colocamos la ruta y el nombre del archivo de la pgina de destino, de este modo: <a href="ruta-del-enlace/nombre-del-archivodestino.extension">Texto del enlace</a> Las explicaciones acerca de las rutas que comentamos en la seccin de las imgenes y que puedes encontrar en la definicin de Rutas de Archivos de la Enciclopedia CCTW es igualmente vlida en este caso. Teniendo claro entonces el concepto de ruta, ya sabes que tienes que poner tanto la ruta como el nombre del archivo relacionado con ese documento enlazado dentro de las dobles comillas 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 minsculas. De ese modo no tendrs que recordar si a aqul archivo le pusiste o no letras maysculas. En caso de enlazar con archivos que estn fuera de tu web (otras pginas que no son la tuya) tendrs que mirar su nombre excto, no sea que en ese sitio s usen alguna letra mayscula, claro. Se pueden enlazar tanto otras pginas web como archivos de msica, archivos de imgenes, etc, etc. En estos casos no se muestra la imagen o la msica enlazada, sino que al pulsar sobre el enlace se ofrecer la descarga al visitante. Ya veremos esto mejor ms adelante. Recuerda tener bin claro el concepto de ruta para no tener ningn 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 pgina, pongamos un ejemplo rpido y sencillo, vale? Qu cdigo Html habra que colocar dentro del cdigo de una web para colocar un enlace dirigido a ComoCrearTuWeb? <a href="http://www.comocreartuweb.com">ComoCrearTuWeb</a> Otro ms. Imagina que quiero colocar un enlace desde el index.html de mi web hacia una pgina tambien de mi web que est dentro de una carpeta llamada "noticias" y cuyo nombre de archivo es "noticias-de-actualidad.html". Qu cdigo tendra que tener ese enlace, desde index hacia esa pgina? <a href="noticias/noticias-de-actualidad.html">Noticias</a> Todo esto as, de sopetn, puede que te resulte muy pesado. T sigue leyendo y vers como conforme avances en este tutorial, se te van aclarando todos estos conceptos, ten fe!
Abrir o no en una nueva ventana del navegador con la propiedad Target de los enlaces
Si ya has navegado un poco por internet, te habrs dado cuenta de que al pulsar enlaces en ocasiones te aparece la pgina de destino en la misma ventana del navegador (internet explorer, firefox o el que sea) y en otras ocasiones en una ventana nueva, aparte de la que estabas mirando, no? Esto se consigue con la propiedad target que puede tomar los siguientes valores: target="_top": Se usa esta opcin cuando queremos que el archivo enlazado se muestre en una pantalla completa de la ventana eliminando los frames o marcos si los hay. Esta opcin se utiliza solo cuando nuestra pgina web est hecha con frames o marcos y, como yo no lo recomiendo para nada, puedes olvidarte de ella ;) target="_parent": Con esta opcin la pgina destino se muestra en marco anterior al marco o frame en el que est el enlace. No me explico bien? Pues no pasa nada, pues es tambin para usar cuando tienes marcos y no va a ser el caso, verdad? ;) target="_self": Con esta tercera opcin, la pgina de destino a la que apunta en vnculo se mostrar en la misma ventana del navegador del visitante, es decir, no se abrir en una ventana aparte. Esta opcin es la que se toma por defecto, la que se activa si no se indica ninguna propiedad target y por tanto tampoco la usaremos. Para qu poner esto si ya va a funcionar as sin ponerlo? target="_blank": Esta es la nica que nos interesa. Con esta opcin la pgina enlazada se abrir en una ventana nueva del navegador. Resulta til cuando queremos enviar a las visitas a una pgina externa, fuera de nuesta web. As se mantendr nuestra web abierta en otra ventana y no perdemos esa visita, pues tiene nuestra pgina a mano. Tambin la puedes usar cuando quieres mostrar otra pgina de tu web, pero sin que el visitante pierda de vista la pgina en la que estaba. Yo la uso por ejemplo cuando os quiero mostrar alguna definicin de la enciclopedia CCTW. As, veis la definicin en otra ventana sin perder de vista la pgina en la que estbais. Luego podis cerrar la de la definicin y continuar sin
perder el hilo. Me explico? Resumiendo, si queremos que la pgina de destino se abra en otra ventana del navegador usaremos target="_blank" y en caso contrario no colocamos esa propiedad target. Qu bien eso de simplificar, no? Pues olvidate del resto! ;=)
Textos Altenativos con la propiedad Title de Html5
Igual que vimos en las imgenes, en las que se poda definir un texto alternativo con la propiedad alt="Texto Alternativo", en el cdigo html de los enlaces existe algo similar, usando la propiedad title="Texto Alternativo". En caso de usarlo, cosa que yo te recomiendo, ser este el texto que aparecer al dejar el cursor del ratn sobre el enlace. Si colocas el puntero de tu ratn sobre cualquiera de los enlaces de CCTW vers (a no ser que se me haya olvidado, je je je) ese texto del que te hablo. Se utiliza para dar un poco mas de informacin a las visitas sobre qu van a encontrar si pulsan el enlace. Sobre todo se utiliza cuando colocamos enlaces en imgenes, pues en algunos casos no est tan claro su destino como en los enlaces sobre texto, pues se supone (solo se supone...) que ese mismo texto ya es lo suficientemente representativo. No obstante te recomiendo colocar algo, algo que complemente a ese texto. Adems, recuerdas que te dije que Google buscaba tus palabras clave dentro de los alt de las imgenes? Pues con los title ocurre lo mismo, son otro de los lugares en los que Google busca esas palabras, de modo que no solo has de colocar siempre las propiedades title sobre todos tus enlaces, sino que adems has de procurar que estos incluyan algunas de tus palabras clave, eso 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 ms cosas. De veras que no te pierdes nada de lo importante.
Los Anclajes o enlaces tipo Ancla en Html5
Ya hemos aprendido a enviar a las visitas a una pgina u otra de nuestra web. Pero en ocasiones,
tenemos pginas con un contenido tan grande que nos interesa enviar a estas visitas no a una pgina sino a una "parte" concreta de una pgina de nuestra web. Para que sepas de qu te hablo, me refiero con esto al tipo de enlace que tienes en la parte inferior de las pginas de ComoCrearTuWeb, la flecha de en medio que te dirige hacia la parte superior de la pgina (Ir arriba). Para estos casos Html ha definido un enlace especial que denomina Ancla o Anclaje. Vamos a ver cmo podemos colocarlos en nuestro sitio. Usando las anclas o anclajes puedes hacer que cuando las visitas pulsen sobre ese enlace, la ventana del navegador corra hacia esa parte concreta de la misma pgina o bien, pase a otra pgina distinta, pero no a su comienzo, sino a la parte media o a la parte que t desees de esa otra pgina. Para verlo ms claro an. Imagina que en una misma pgina de tu web hablas de pelculas de accin, y luego, debajo, de pelculas de humor, y bajo sta parte, de pelculas de ciencia ficcin. Si defines un ancla o un anclaje en cada uno de sus ttulos puedes luego colocar vnculos de modo que al pulsarlos se dirija justo a esa parte de la pgina. Si defines un ancla al principio del contenido y colocas un enlace en la parte inferior indicando "Ir al principio de la pgina", al pulsarlo se dirigir automticamente a la parte superior, an siendo la misma pgina. Lo pillas ahora? Bien, pues vamos a ver cmo se hace esto. Para empezar hay que definir esa parte a la que quieres enviar a las visitas cuando hagan clic sobre ese enlace que pondremos despus. Por ejemplo, veamos cmo se define un ancla en la parte superior. Basta con colocar esta lnea de cdigo en la parte correspondiente:
<a name="arriba"></a>
Con esto definimos un lugar al que podemos enviar a las visitas si pulsan el enlace que luego veremos cmo colocar. Si ahora en la parte inferior colocamos otra lnea como esta:
<a name="abajo"></a>
tendremos la posibilidad de poder enviarlas tambin a la parte baja de esa pgina web. Ahora falta colocar el propio enlace. Si queremos enviar a las visitas a la parte superior, lo normal es colocar el enlace en la parte inferior (si el usuario est arriba, para que darle la opcin de ir arriba si ya est all, verdad?). Esto se puede hacer con por ejemplo esta lnea de Html:
<a href="#arriba" title="Ir Arriba">Ir arriba</a>
Del mismo modo, podramos colocar arriba de la pgina otro enlace que permitiera a las visitas ir al parte inferior (a modo de ejemplo, pues no es una opcin que sirva de mucho al lector, no?):
<a href="#abajo" title="Ir Abajo">Ir abajo</a>
Si en una pgina de tu web escribes mucho texto y tiene digamos 3 partes diferenciadas (3 ttulos por ejemplo) podras definir un ancla en cada uno de esos ttulos, y luego colocar un men en la parte inferior, o en la parte superior, o en ambas, dando la opcin a las visitas a dirigirse, dentro de esa misma pgina, a la seccin que deseen. En ese caso colocaras al principio (o al final) ese men, de este modo por ejemplo:
<a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a> <a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a> <a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a>
Y ahora solo te faltara colocar esas 3 anclas justo al lado de esos ttulos, lneas de cdigo como sta:
<h1>Ttulo Uno</h1><a name="titulouno"></a> <p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms largo para que se note el efecto.</p> <h1>Ttulo Dos</h1><a name="titulodos"></a> <p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms largo para que se note el efecto.</p> <h1>Ttulo Tres</h1><a name="titulotres"></a> <p>Este es el texto correspondiente al ttulo tres, aunque debera ser ms largo para que se note el efecto.</p>
Si en lugar de querer enviar a las visitas a una parte concreta de esa misma pgina, quieres enviarlas a una parte concreta de otra pgina de tu web, has de definir ese ancla en la pgina y lugar que quieres elegir de destino, como en este ejemplo, pero en el enlace has de colocar adems del ancla, la ruta de esa otra pgina, tal y como aparece aqu abajo:
<a href="pagina-de-destino.html#nombre-del-ancla">Enlace hacia el ancla</a>
Es decir, si en una pgina de tu web quieres colocar un enlace hacia el ttulo dos que hemos visto en el ejemplo de antes, si esa pgina que contiene los tres ttulos se llama titulares.html, entonces en la otra pgina tendras que poner esta lnea:
<a href="titulares.html#titulodos">Ir al ttulo dos de la pgina titulares</a>
Si no ha quedado lo suficientemente claro o te surge alguna duda pregntanos lo que quieras en el Foro CCTW, oki?
Propiedad rel para los enlaces en el Html5

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

Las propiedades rel que vamos a ver se colocan dentro de la etiqueta de apertura del enlace o vnculo. Puedes colocar varias, una o ninguna. Veamos un ejemplo de un enlace con dos propiedades rel:
<a href="tema/pagina.html" title="bla bla bla bla" rel="next" rel="prefetch">Anchor Text</a>
Propiedad rel="archives" del nuevo Html5

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

Se utilizan sobretodo en blogs y pginas de contenido de autor. Se coloca a aquellos enlaces que se dirigen hacia la web personal del autor del artculo, o a aquellas en las que se habla de ellos.
Propiedad rel="prev", rel="start" y rel="next" para indicar incicio, siguiente y pgina anterior
Son idoneas para informar a los navegadores de cul es la pgina inicial de una seccin, cul es la siguiente y cul la anterior respecto de la pgina donde se encuentra el visitante. Son geniales para colocar en las tpicas flechitas de adelante y atrs y logran que los navegadores se puedan hacer una idea del orden de las pginas de una web, si es que estn ordenadas, claro.
Propiedad rel="first", rel="last" y rel="up" indicando la primera y ltima pgina

Muy similares a las anteriores, salvo que en estos casos se informa al nvegador que la pgina enlazada es la primera o la ltima en el orden de la seccin a la que pertenece. Adems, tenemos el valor up para indicar que la pgina vinculada pertenece a un nivel jerrquico superior al de la pgina actual..
Propiedad rel="prefetch", cargando la pgina siguiente antes de que el usuario haga clic
Esta es de las que ms me gustan! Con el valor prefetch se est ordenando al navegador que vaya leyendo y memorizando una pgina distinta, la que presumimos que ser la siguiente que va a leer el visitante. De ese modo, cuando as sea y el visitante pulse ese enlace, el navegador la tendr en su cach preparada para mostrarla en cuanto el enlace sea pulsado, pues ha estado cargando la informacin mientra el lector permaneca leyendo en la pgina anterior. Lo idoneo sera saber cules son las pginas hacia donde se dirigen las visitas, claro. En caso de que stas se decidan por visitar otra distinta, no ocurrir nada malo, pero si acertamos la velocidad sera mucho mayor, claro. Tampoco es cuestin de colocar ese valor a todos los enlaces de tus pginas, que te veo venir! je je je.
Otros valores para la propiedad rel

Existen un montn de valores posibles que yo considero menos importantes, pero que quiero citar por
si a alguien le interesa utilizar, como el tpico nofollow que indica que el destino no tiene naa que ver con la temtica de la web,sidebar que no est an muy definido, search para pginas que muestran resultados de bsquedas, noreferer para que el navegador haga caso omiso de las posibles variables de referencia aadidas a la url, el tpico pingback de los blogs y alguno que otro ms.
Advertencia
No todos los navegadores saben interpretar an todos estos valores. De hecho algunos no son reconocidos por ningn navegador todava, pero la especificacin Html5 existe, de modo que no tardarn mucho en aplicarlos. En cualquier caso en caso de no ser interpretados, tampoco ocasionan errores, por lo que quizs decidas usarlos desde ya y no esperar a que los navegadores aprendan esta leccin, verdad?
Ejemplo de lo aprendido hasta el momento
Antes de seguir con ms cdigo Html, quiero ensearte un ejemplo el que aplicamos todo lo que hemos visto hasta el momento. Revsalo a fondo y pregunta todo lo que no entiendas en el foro antes de continuar para ir ms suelto con el resto de las explicaciones que ir colocando, oki? El restultado del ejemplo es de lo ms sencillo y muy muy poco vistoso. No te preocupes por eso, pues como te he dicho antes, el darle un aspecto ms profesional, con mrgenes adecuados, colores de fondo y todo tipo de adornos, lo veremos en el curso de CSS. As que todos los ejemplos que veamos del curso de Html van a ser as de sosos. Eso no significa que estemos aprendiendo muy poco o que lo aprendido no sirva de mucho, de veras. Estamos colocando solo el contenido y en el curso de CSS aprenderemos a adornarlo hasta obtener un aspecto totalmente profesional, sin nada que envidiar a cualquiera otra pgina web. Ten fe! El resultado de este ejemplo cuyo cdigo te coloco ms abajo es este: Ver resultado del ejemplo. y este es su cdigo:
<!DOCTYPE html> <html lang="es"> <head> <meta charset="utf-8" /> <title>Mi Nueva Web</title>  </head> <body> <a name="arriba"></a>
<img src="imagenes/logotipo.gif" alt="En ComoCrearTuWeb puedes aprender a disear pginas web" width="270px" height="80px" /> <h1>Men de Contenidos</h1> <a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a> <a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a> <a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a> <h2>Ttulo Uno</h2> <a name="titulouno"></a> <p>Este es el <u>texto correspondiente</u> al ttulo uno, aunque debera ser ms largo para que se note el efecto.</p> <p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms largo para que se note el efecto.</p> <p>Este es el texto correspondiente al ttulo uno, aunque debera ser ms largo para que se note el efecto.</p> <h2>Ttulo Dos</h2> <a name="titulodos"></a> <p>Este es el <i>texto correspondiente</i> al ttulo dos, aunque debera ser ms largo para que se note el efecto.</p> <p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms largo para que se note el efecto.</p> <p>Este es el texto correspondiente al ttulo dos, aunque debera ser ms largo para que se note el efecto.</p> <h2>Ttulo Tres</h2> <a name="titulotres"></a> <p>Este es el <b>texto correspondiente</b> al ttulo tres, aunque debera ser ms largo para que se note el efecto.</p> <p>Este es el texto correspondiente al ttulo tres, aunque debera ser ms largo para que se note el efecto.</p> <p>Este es el texto correspondiente al ttulo tres, aunque debera ser ms largo para que se note el efecto.</p> <a href="http://www.comocreartuweb.com" target="_blank" title="Como hacer pginas web">ComoCrearTuWeb</a> <p>Adios <b>Amigos</b>!</p> <a href="#arriba" title="Ir Arriba">Ir Arriba</a> </body> </html>
La etiqueta BR para los saltos de lnea en los textos de una web
A la hora de escribir textos vimos cmo usar los prrafos. Recuerdas sus etiquetas <p> y </p>? Al usar los prrafos, no aparecen saltos de lnea hasta que no termina ese prrafo, es decir, no se ven saltos de lnea hasta que se alcanza la etiqueta de cierre </p>. Existe no obstante una etiqueta para provocar un salto de lnea sin tener que esperar a cerrar el prrafo. Los saltos de lnea se definen con la etiqueta <br />. Esta etiqueta, al igual que la de imagen y la de las metas, no tiene etiqueta de cierre y por eso se le coloca la barra al final, como puedes ver. Puedes usar los saltos de lnea siempre que quieras que un elemento aparezca en la lnea siguiente. Esto no solo ocurrir dentro de los prrafos. Si por ejemplo tienes varios enlaces que te aparecen en la misma lnea y t deseas que aparezcan uno bajo el otro, puedes colocar la etiqueta <br /> al final de cada uno de los cdigos de los enlaces para conseguirlo. Recuerdas el ejemplo de la pgina anterior? Pusimos tres enlaces para enviar a los visitantes al ttulo uno, dos o tres. Esos enlaces aparecan juntos en la misma lnea. Si ahora en lugar de esto:
........ <h1>Men de Contenidos</h1> <a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a> <a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a> <a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a> <h2>Ttulo Uno</h2> ........
colocamos la etiqueta de salto de lnea tras los dos primeros enlaces, as: ........ <h1>Men de Contenidos</h1> <a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a><br /> <a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a><br /> <a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a> <h2>Ttulo Uno</h2> ........ conseguimos que cada enlace aparezca en una nueva lnea. Del mismo modo, si insertamos la etiqueta de salto de lnea en medio del texto de un prrafo, provocaremos un salto de lnea justo en esa parte, a pesar de que el prrafo an no haya terminado. Siempre que lo uses recuerda ponerle la barrita, y dejar un espacio entre br y la barra, oki? Aprovecho para decirte algo sobre los saltos de lnea. Cada vez que abres un prrafo con su etiqueta <p> aparece un salto de lnea sin necesidad de colocar la etiqueta <br />. Tambin aparecen saltos cuando empiezas un ttulo con <h1>,<h2>, etc.
En cambio, no aparecen saltos automticamente, cuando insertas en una web un enlace (<a href="....), o una imagen (<img src=....>). Es por eso que en el ejemplo de la pgina anterior, los enlaces aparecan en la misma lnea y por eso para que aparezcan en lneas distintas hemos tenido que aadirles la etiqueta <hbr />. Los elementos que producen un salto de lnea automticamente sin necesidad de colocar la etiqueta <br /> se denominan Elemenos de Bloque mientras que los que no producen este salto de modo automtico se llaman Elementos de Lnea. Se puede conseguir que elementos de bloque no produzcan esos saltos, e igualmente, que elementos de lnea s tengan saltos, sin necesidad de ponerles el <br />. Cmo? Usando estilos CSS, pero eso lo veremos en ese otro curso, oki?
Listados de elementos y su cdigo Html
Otro elemento que suele usarse bastante en la construccin de pginas web son las listas o listados de elementos. Se utilizan para colocar una serie de elementos organizados en listas (cmo no). Aunque quizs no se te ocurra qu utilidad pueden tener para t, te aconsejo que aprendas a usarlos pues, como veremos ms adelante, son muy tiles en algunos casos. Por ejemplo, si en una de las pginas de tu web necesitas enumerar una serie de elementos, como por ejemplo, un listado de marcas de coches, de equipos de futbol, de accesorios o de productos a la venta, puedes usar esas listas para representarlos de un modo cmodo en tu web. Date cuenta que un men de enlaces, tanto si ha de aparecer de modo vertical (un enlace bajo otro, como el men lateral izquierdo de esta web) como si quieres mostrarlo con los enlaces en horizontal (uno al lado de otro, como los de la parte superior de estas pginas) no es ms que una lista de elementos, de enlaces en este caso, por lo que estas etiquetas se usan mucho para eso, construir mens de enlaces. A que ahora s les vas a hacer caso? je 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 nmero al principio de cada uno de ellos, de forma automtica. Eso significa que no es necesario escribir el nmero sino que aparecer solo, y consecutivo, desde el uno hasta el que corresponda al ltimo elemento de la lista. El otro tipo es idntico, pero en ese caso en lugar de aparecer nmeros al principio, aparece una rallita o un circulo redondo. En cualquier caso, tanto esos nmeros como las rayitas, se pueden retocar o incluso eliminar usando los estilos CSS, de modo que aqu, como ya os he dicho, nos conformaremos con saber usar las listas, sin que nos importe por el momento el aspecto que puedan tener. Ya le daremos forma y color con los estilos cuando hagamos el curso de CSS,vale?. Es posible que en internet o en algn libro, encuentres otras cosas que se le pueden aadir a los
cdigos de las listas, adems de lo que te muestro en estas lecciones. Yo no lo veo til y por eso ni los nombro, pero cada uno es libre de colocar lo que desee, claro. Aqu intento ensear lo imprescindible, aunque totalmente suficiente como para conseguir todo lo que desees, te lo aseguro. Ahora pulsa en la flecha de abajo a la derecha para ver cada una de las dos listas que te he citado.
Las Listas de elementos desordenadas
Para construir una lista se utilizan dos etiquetas, una para indicar que va a comenzar la lista y otra cada vez que empecemos a definir un elemento de dentro de esa lista. La lista es solo una, pero los elementos que la componen pueden ser varios. La etiqueta de apertura de una lista desordenada es <ul> y la de cierre es </ul>. Por tanto, una lista desordenada totalmente vacia, sin elementos dentro, tendra este cdigo Html:
<ul> </ul>
Las etiquetas de inicio y fin de cada uno de los elementos que le queramos aadir a esa lista, seran <li> y </li>, de modo que el cdigo Html de una lista con tres elementos vacios, sera este:
<ul> <li></li> <li></li> <li></li> </ul>
Un poco sosa, no? Para aadir algo a cada elemento, basta con colocar ese algo entre las etiquetas <li> y </li>. Vamos por ejemplo a contruir una lista con los tres enlaces del ejemplo que estamos viendo en estas pginas atrs. El cdigo de esos tres enlaces era este:
........ <a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a> <a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a> <a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a> ........
de modo que para aadirlos a la lista anterior, solo habra que colocar las etiquetas de inicio y fin de lista antes y despus de todo ese cdigo y adems colocar las etiquetas de inicio y fin de elemento antes y despus de cada enlace. Quedara as: ........ <ul>
<li><a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a></li> <li><a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a></li> <li><a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a> </li> </ul> ........
Aunque como vamos diciendo, el aspecto que tomen nos importa un pepino, ste es el resultado del ejemplo una vezmetidos los enlaces en una lista desordenada. Tanto la etiqueta <ul> como las etiquetas <li> son etiquetas de bloque, lo que significa que NO es necesario aadir el salto de lnea con <br /> si queremos que aparezcan un enlace bajo el otro. Con CSS como te coment, podemos hacer si queremos que estos elementos aparezcan en lnea y no uno bajo otro, para construir un men horizontal, por ejemplo. Ya lo veremos en CSS, pero sigue siendo muy til que estn incluidos en una de estas listas. Ves ese circulito negro que aparece al a izquierda de cada elemento? Es lo que te deca antes que podemos retocar con los estilos CSS, de modo que si no te gusta su aspecto, no te preocupes, se podr cambiar cuando aprendamos CSS.
Las Listas de elementos ordenadas
Las listas que hemos visto antes se llaman "desordenadas" por que el circulito negro de la izquierda de cada elemento no indica ningn orden. Si quisiramos que aparezca un nmero o una letra correlativa en cada uno de esos elementos, tendramos que usar etiquetas de listas "ordenadas". Esas listas ordenadas se construyen exctamente igual que las que acabamos de ver en la pgina anterior, solo que en este caso las etiquetas de apertura y cierre de la lista son<ol> y </ol> siendo las etiquetas de apertura y cierre de sus elementos igual que en el caso anterior, <li> y </li>. El cdigo Html de la lista anterior, pero ordenada en este caso, sera este: ........ <ol> <li><a href="#titulouno" title="Ir al ttulo uno">Ir al ttulo uno</a></li> <li><a href="#titulodos" title="Ir al ttulo dos">Ir al ttulo dos</a></li> <li><a href="#titulotres" title="Ir al ttulo tres">Ir al ttulo tres</a></li> </ol> ........ y as es cmo se ve aquella lista en el caso de usar la etiqueta de lista ordenada.
A menos que quieras que aparezcan esos nmero o letras antes de cada elemento, te recomiendo usar siempre las otras, oki? Siempre puedes ponerle el nmero o letra a mano, dentro de cada <li>.Volvers a verlas cuando expliquemos en el curso de CSS cmo organizar un men, o en los ejemplos con DIVs.
La Metatag description
Cuando te habl de la etiqueta <title> y de las caractersticas alt="...." de las imgenes o lostitle="...." de los enlaces, te dije que eran muy buenos lugares donde colocar las palabras clave de tus pginas web. Te hablo ahora de dos lugares ms en las que poder aadir estas keywords o palabras clave. La metatag description que te explico abajo y la metatag keywords que veremos en la pgina siguiente. La metatag description se coloca en la cabecera de la pgina (entre <head> y </head>). Se llama metatag por la palabra con la que empieza su lnea de cdigo, que es esta: <meta name="description" content=". . . . descripcin de la pgina . . . " /> Esa lnea es obligatoria (si deseas aparecer en buenos puestos en los buscadores) y has de copiarla tal cul te la he escrito, cambiando solamente lo coloreado en rojo, la descripcin de esa pgina web concreta. Al igual que ocurre con el ttulo que pusimos con la etiqueta <title>, ha de ser diferente en cada una de las pginas de tu web. Si se te ocurre colocar dos metatags de descripcin con el mismo contenido en dos o ms de las pginas de tu sitio, buscadores como Google entendern que solo una es la original y que el resto son copias, por lo que aunque no te va a castigar de cara a la pared, s que va a olvidar las otras que entiende como copias. As que, no solo procura que todas las pginas tengan ese metatag description sino que adems has de asegurarte de que todos son distintos. Por otro lado y puesto que ste es otro de los sitios donde los buscadores van a buscar tus palabras clave, has de escribir una descripcin con cierta maa, de modo que uses en esa frase algunas de las palabras clave que caracterizan a esa pgina concreta. Y todo ello procurando que la frase tenga sentido. Nada de colocar palabras clave al tuntn, ni repetir la misma veinte veces, oki? Ten adems en cuenta que las palabras clave a incluir en todas estas etiquetas que te voy comentando, han de ser de esa pgina en concreto, no de tu web en general, sino justo de la pgina de tu web para la que ests escribiendo esa lnea. Cada pgina de tu web ha de tener sus propias palabras clave, es lo mejor.
Metatag Keywords y Palabras Clave
Pues esta es otra etiqueta ms en donde puedes colocar las palabras clave o keywords de tus pginas web. Todo lo comentado en la pgina anterior para la descripcin es aplicable a este otro caso. La lnea de cdigo que has de colocar tambin dentro del head de tus pginas, por ejemplo, bajo la lnea de descripcin, sera esta: <meta name="keywords" content="palabrauno, palabra2, par de palabras, palabra4......., palabra10" /> Date cuenta de nuevo que esta otra metatag tampoco lleva etiqueta de cierre, por lo que habr que colocarle la barrita casi al final para tener un cdigo Xhtml correcto, oki? No coloques ms de 10 palabras o grupos de palabras para no saturar al buscador. En cualquier caso no va a leer todas las que pongas. Con unas 10 tienes suficiente para hacer entender al buscador cul es el tema de esa pgina. Aunque no hay mucho escrito sobre esto, yo separo cada palabra con una coma y un espacio. Tambin uso tildes o acentos si la palabra los tiene e intento colocar siempre plurales, pues una palabra en plural suele contener tambin a la singular. Es decir, el plural "pginas" contiene a su vez la palabra "pgina" en su interior, por lo que colocando ste plural, tambin estoy cubriendo el singular. Ah! Y no repitas palabras a menos que andes escribiendo conjuntos de palabras. O lo que es lo mismo, no coloques "gratis, gratis, gratis, gratis...." pues no vale de nada, a no ser que andes intentando que los buscadores te encuentren por los conjuntos de palabras "juegos gratis, online gratis, videojuegos gratis, loquesea gratis", aunque tampoco en ese caso deberas 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 ms gente que piensa que Google la lee y la tiene en cuenta. En el apartado "Los Buscadores" de la lengueta "Promocin de Webs" deberas poder encontrar informacin ms abundante sobre lo que son las palabras clave. Al no ser ya cosa de Html preferir explicarlo all. Actualizo esto para comentar que al parecer, este metatag ya no es utilizado por Google, por lo que en principio podramos prescindir de colocarlo en nuestras pginas... yo por el momento lo mantendr, por si acaso, je je je.
Ms lecciones de cdigo Html
Bueno bueno, hemos aprendido un montn de cdigo Html ya, verdad? Sabemos definir correctamente la cabecera de las pginas, colocar textos, vnculos, imgenes y tambin sabermos dnde y cmo colocar nuestras palabras clave de modo que los buscadores nos posicionen en los primeros lugares para aumentar la cantidad de visitas a nuestra web. No nos queda demasiado por aprender ya, aunque esto que veremos en esta seccin es de mucha utilidad tambin.
Estudiaremos ahora el uso de las tablas, un buen modo de organizar datos. Tambin aprenderemos a asignar indicadores (uso de capas o divs) a cada elementode la web, de modo que podamos darles color y detaller ms tarde con los estilos CSS. Y para terminar con todo esto veremos tambin las palabrejas usadas para crear formularios y otras cosillas ms. Te recomiendo leerlas todas, aunque ya te suenen algunas. De ese modo quizs aprendas algo que no sabas, o quizs puedas corregirme si me equivoco en algo! je je je. En cualquier caso recuerda que ests invitado a comentarnos lo que te apetezca en el Foro de CCTW, vale? Pues sigamos con este turorial de Html!
Diseo de tablas Html
Una tabla en Html no es ms que un modo de presentar una serie de datos que guardan cierto orden y relacin entre ellos. Un ejemplo de tabla es la siguiente:
Como ves, usando tablas puedes organizar los datos de modo que aparezcan ordenados en filas y columnas. Tambin puedes hacer que aparezca un borde alrededor de cada datos y, como puedes ver en la imagen de abajo, combinar algunas celdas:
Una vez entendido esto, puedes imagina las aplicaciones que se le pueden dar. Desde por ejemplo colocar datos ordenadamente, como en el ejemplo anterior, hasta usarla para darle forma a una web, si en lugar de meros datos, lo que colocas en cada celda son imgenes y conjuntos de datos. Por ejemplo, puedes colocar una imagen de fondo en la primera fila con aspecto de borde superior, otra con aspecto de borde inferior en la fila de abajo, un men en una celda lateral, y dejar los textos principales de la web para las celdas de la parte central, tal que as:
El uso de tablas para dar forma a una pgina web ya no se estila, no se recomienda en absoluto, aunque funcionar funciona. Para dar forma a una web es mejor usar capas o DIVs. Desde que sali la versin HTML5 incluso se tiende a no usar ni siquiera capas o DIVs, sino algunas etiquetas nuevas de HTML5 que comentaremos en la siguiente seccin. De modo que olvda las tablas a menos que sea para lo que estn inventadas, para colocar datos, no para dar forma a una web, oki? Recuerda que en esta seccin solo veremos Html, de modo que solo veremos cmo se usan y definen las tablas. Si luego quieres una anchura concreta para alguna celda o columna, una altura distinta, un borde ms o menos grueso o invisible, imgenes de fondo para cierta fila etc, etc, tendrs que aprender
a definirlas usando los estilos css. En html tambin se puede definir, pero no merece la pena, es mucho mejor hacerlo con estilos, oki? Vers cmo en el curso de estilos Css, no te preocupes. Pasemos entonces a estudiar las tablas en cdigo Html en la pgina siguiente.
Las etiquetas de Tabla en cdigo Html
Esto va a ser similar a lo que vimos para la construccin de las listas, solo que en este caso se define el comienzo de una tabla con la etiqueta <table> y su final con la etiqueta de cierre correspondiente, es decir, con la barrita, </table> Una vez definida la tabla, hay que colocar las filas y columnas en su interior. Has de recordar que las tablas de dividen en filas horizontales y que luego esas filas se dividen a su vez en trocitos, dando lugar a las columnas. Por lo tanto, en el cdigo Html tendremos que colcocar primero tantas etiquetas de apertura y cierre de filas como filas queramos, y luego, en el interior de cada fila, colocaremos las celdas en las que queramos dividir cada una de esas filas. Si, es algo complicado as escrito, pero os pondr ejemplos prcticos para que quede bien clarito, oki? Las etiquetas que indican apertura y cierre de una fila (las filas son las horizontales y las columnas las verticales) son<tr> y </tr>, mientras que las que definen el inicio y final de una celda dentro de una fila son <td> y </td>. Veamos esos ejemplos en la pgina siguiente. Por el momento tan solo recuerda esas nuevas etiquetas
La estructura de las tablas
Ya conocemos las tres etiquetas principales que se usan para fomar una tabla en cdigo Html. Veamos ahora de forma prctica cmo colocarlas para obtener las tablas que queramos. Para empezar veamos cul es la estructura de una tabla formada tan solo por una celda. Todas las celdas pertenecen obligatoriamente a una fila, de modo que la estructura sera esta:
<table> <tr> <td>contenido1</td> </tr> </table>
Dentro de la nica celda, es decir, entre las etiquetas <td> y </td>, he colocado la palabra contenido1, que es lo que se mostrar dentro de la celda. Todos los contenidos de una tabla siempre van dentro de celdas, nunca directamente dentro de una fila o una tabla, oki? El resultado del cdigo anterior sera este:
Realmente no se ve as en el navegador. He colocado algunos bordes y colores de fondo para que se vea clara la diferencia de lo que es tabla, fila y celda. En la imagen de arriba, el recuadro rosa o rojo claro corresponde a la tabla. Dentro puede verse un recuadro con fondo azulado, que corresponde a la fila. Y dentro de esa fila hay otro recuadro con fondo amarillo que sera finalmente la celda, con la palabra contenido, pues la hemos escrito dentro de las etiquetas de la celda. Vamos a ver ahora cmo sera una tabla con dos celdas dentro de esa nica fila anterior. El cdigo Html sera este: <table> <tr> <td>contenido1</td><td>contenido2</td> </tr> </table>
En este caso, tenemos dos celdas dentro de la nica fila que tiene la tabla. Podemos colocar todas las que queramos y aparecern siempre una al lado de la otra, pues todas estn dentro de la misma fila, entre las etiquetas <tr> y </tr> El siguiente ejemplo lo haremos con dos filas, vale? Una tabla con dos filas y con una celda en cada fila tendra este cdigo Html: <table> <tr> <td>contenido1</td> </tr> <tr> <td>contenido2</td> </tr> </table>
En este caso basta con duplicar el cdigo anterior, es decir, colocar otras lneas de apertura y cierre para la nueva fila y escribir dentro la celda con el contenido. El ltimo ejemplo por el momento sera una tabla con dos filas y dos celdas en cada una de ellas. Tendra este cdigo Html:
<table> <tr> <td>contenido1</td><td>contenido2</td>
</tr> <tr> <td>contenido3</td><td>contenido4</td> </tr> </table>
Ves? Los recuadros azules son las filas, cada recuadro amarillo es una celda, y el conjunto es la tabla completa. Adems, se pueden combinar celdas, pero eso lo vemos en las pginas siguientes. Esto es facilsimo, verdad? Je je je.
Cmo combinar celdas de una tabla en Html
En ocasiones crear una tabla de ese modo tan cuadriculado no se acerca mucho a lo que queremos. A veces nos viene mejor que una de las celdas sea ms larga o ms alta que las otras, es decir, que ocupe varias celdas. Para lograr esto hay que recurrir a combinar celdas. Vamos a ver cmo se hace eso. El ejemplo ms clarito que se me puede ocurrir ahora mismo (con Carlitos dndome la lata con sus juguetes... je je je), es la de una tabla con, por ejemplo, tres columnas (verticales) pero en la que aparezca una sola celda arriba del todo, ocupando la anchura total de la tabla. Algo como esto:
Para conseguir eso, tenemos que colocar en esa primera fila una sola celda, pero hay que ponerle una palabra mgica para indicar a cuntas celdas corresponde o lo que es lo mismo, cuantas celdas hemos de combinar para conseguir esa tan ancha. Como el resto de filas tiene tres celdas, est claro que la superior ha de combinar tambin 3. Un poco lio? Je je je. Primero te coloco el cdigo Html completo de una celda de cinco filas (horizontales) y tres columnas, o tres celdas por fila, que es lo mismo. En la primera fila solo colocar una celda, por ahora sin la palabra mgica para ver cmo queda:
<table> <tr> <td>Nmeros de Telfono</td>
</tr> <tr> <td>Nombre</td><td>Apellido</td><td>Telfono</td> </tr> <tr> <td>Pablo</td><td>Garcia</td><td>123456789</td> </tr> <tr> <td>Pedro</td><td>Sanchez</td><td>234567890</td> </tr> <tr> <td>Antonio</td><td>Fernandez</td><td>345678901</td> </tr> </table>
Si copias ese cdigo y lo pegas en un archivo ponindole la extensin .html podrs ver el resultado haciendo doble clic sobre ese archivo. Eso si, no vers los bordes pues no los hemos definido an. Yo los he puesto en las imgenes para que se vea ms clara la tabla, pero para que aparezcan hay que especificarlo. Ya te contar cmo. El resultado con el cdigo de arriba sera algo as:
Por mucho que queramos, esa celda de arriba nunca podr ser ms ancha que la celda que tiene debajo suya, pues la tabla tiende a guardar el espacio de su derecha para otras celdas, que en este caso no existen. Para conseguir que esa primera celda ocupe todo el ancho de la tabla es necesario indicar que equivale a tres celdas. De ese modo ocupar todo el ancho, o el ancho de tres celdas. El codigo Html que hay que aadirle a la etiqueta <td> para indicar que equivale a tres celdas es el siguiente: <td colspan="3">Nmeros de Telfono</td> Aadiendo esa palabra mgica conseguimos lo que decamos al principio, una celda superior que ocupa todo el ancho, tres celdas combinadas:
En la pgina siguiente vemos cmo combinar varias celdas verticales, oki?
Cmo combinar celdas verticales en una tabla Html
Al igual que se pueden combinar celdas horizontales para formar una sola ms ancha, tambin existe una palabra mgica para conseguir combinar dos o ms celdas verticales para formar una de ms altura. Veamos cmo se hace. Imaginemos una tabla inicial ahora de tres filas y tres celdas por cada una de ellas, es decir, de 3x3, tal y como esta:
El cdigo Html de esa tabla sera algo como esto:

<table> <tr> <td>imagen</td><td>contenido1</td><td>contenido2</td> </tr> <tr> <td>imagen</td><td>contenido3</td><td>contenido4</td> </tr> <tr> <td>imagen</td><td>contenido5</td><td>contenido6</td> </tr> </table>
Disculpa, no se me ocurre otro ms representativo ;=). Imaginad que no es esa la estructura que quiero, sino que prefiero colocar una sola imagen a la izquierda, ocupando todo el alto de la tabla y no tres huecos para tres imgenes como hay ahora. La solucin es combinar las tres celdas verticales para dejarla de este otro modo:
La palabra mgica a colocar en este caso de combinaciones de celdas en vertical ser <td rowspan="3">. Es decir,colspan para combinar celdas horizontales y rowspan para combinar celdas verticales, oki? Adems, recuerda que hay que colocar la cantidad de celdas que quieres que ocupe la que combinamos. En el caso de nuestro ejemplo queremos combinar las tres celdas en una, de modo que en el cdigo inicial tendramos que eliminar el cdigo Html correspondiente a las celdas de imagen de la segunda y tercera fila y, en la que queda (la de la primera) colocarle <td rowspan="3">, quedndo as el cdigo Html:
<table> <tr> <td rowspan="3">imagen</td><td>contenido1</td><td>contenido2</td> </tr> <tr> <td>contenido3</td><td>contenido4</td>
</tr> <tr> <td>contenido5</td><td>contenido6</td> </tr> </table>
El resultado sera el de la ltima imagen que pusimos arriba. Como ves, en el cdigo de la primera fila se colocan las etiquetas td de la celda de la imagen, y las otras dos de su derecha. En cambio en las otras dos filas solo se colocan las etiquetas td de los contenidos y nada de la celda de imagen, pues est toda contenida ya en el cdigo de la fila primera. Con la palabra <td rowspan="3"> se indicaba ya que la celda ocupara las otras dos de debajo de esa, por lo que no es necesario colocar nada de cdigo en las filas dos y tres correspondientes a la celda de imagen. Esto es un poco rollo y quizs no se entienda bien a la primera. Si no me he explicado perfectamente dmelo en el foro y lo intento explicar mejor, oki compaero?
Otras combinaciones de celdas.
Lamentablemente (o no tanto) solo podemos combinar celdas de una misma fila o de una misma columna, pero no se pueden combinar grupos de por ejemplo 2x2 celdas (un rectangulo de dos celdas de ancho por dos de alto no se pueden agrupar en una sola). Tampoco se pueden agrupar celdas que no estn juntas, ni agrupar celdas en diagonal. Si necesitas malabarismos de ese tipo.... habr que buscar otras opciones, je je je. En los ejemplos anteriores hemos visto cmo combinar todas las celdas de esa fila o de esa columna, pero eso no significa que no se puedan combinar tan solo dos de ellas. El modo de hacerlo es el mismo pero colocando un 2 en lugar del 2 que apareca en el colspan (para combinaciones en horizontal) o en el rowspan (para combinar celdas en vertival). Si en una tabla de 3x3 como la del cdigo de aqu debajo:
<table> <tr> <td>contenido1</td><td>contenido2</td><td>contenido3</td> </tr> <tr> <td>contenido4</td><td>contenido5</td><td>contenido6</td> </tr> <tr> <td>contenido7</td><td>contenido8</td><td>contenido9</td> </tr> </table>
quisieramos combinar tan solo las dos celdas de abajo a la derecha, el cdigo Html correcto sera el siguiente:
<table> <tr> <td>contenido1</td><td>contenido2</td><td>contenido3</td> </tr> <tr> <td>contenido4</td><td>contenido5</td><td>contenido6</td> </tr> <tr> <td>contenido7</td><td colspan="2">contenido8</td> </tr> </table>
Lo ves claro? Colocamos <td colspan="2"> en la segunda celda de la tercera fila (se coloca el colspan en la celda en la que empieza la combinacin, en este caso en la segunda celda de la tercera columna que es lo que queramos en este ejemplo), le escribimos un 2, pues queremos combinar tan solo dos celdas, y eliminamos el cdigo correspondiente al contenido 9 (<td>contenido9</td>), pues ya no tiene sentido esa tercera celda para la tercera fila. Se ve claro?
Puedes usar varias tablas en lugar de solo una
Ya hemos visto cmo podemos combinar celdas dentro de una misma tabla para conseguir el resultado, esquema o organizacin que queramos conseguir. Pero tambin hemos visto que existen ciertas limitaciones, como el no poder combinar grupos de celdas horizontales y verticales a la vez. Es decir, con una sola tabla no podramos conseguir esto:
En esa imagen se muestra una tabla de 4 filas por 4 columnas en la que se desean combinar las celdas del interior, quizs para alojar ah el contenido principal de la web dejando las celdas de los alrededores para mens, logotipos, publicidad, o lo que sea. Eso no se puede conseguir combinando celdas de una tabla, pero... podemos usar varias tablas para obtener esa estructura! Se trata pues de dividir esa estructura en varias tablas, hasta conseguir lo que deseamos. Se me ocurre por ejemplo, separar la primera fila en una sola tabla (de una sola fila y cuatro celdas), otra tabla ms para las filas segunda y tercera (sera una tabla con dos filas y 3 columnas solo) y finalmente para terminar ese diseo, colocar abajo de las tablas anteriores otra tabla como la primera, con una sola fila y cuatro celdas. Es decir, la siguiente divisin:
De este modo s que podemos conseguir esa estructura. Bastara tan solo combinar verticalmente las
filas centrales de la segunda tabla para conseguir lo que deseabamos al principio. El cdigo Html completo de con las tres tablas sera este:
<table> <tr> <td>a1</td><td>a2</td><td>a3</td><td>a4</td> </tr> </table> <table> <tr> <td>b1</td>< rowspan="2">central</td><td>b4</td> </tr> <tr> <td>c1</td><td>c4</td> </tr> </table> <table> <tr> <td>d1</td><td>d2</td><td>d3</td><td>d4</td> </tr> </table>
Solo tendrias ahora que eliminar los margenes o separaciones que pudieran existir entre esas tres tablas para que quedaran totalmente pegadas para conseguir lo que queramos. Pero recuerda, todo lo que tenga que ver con mrgenes, anchuras, etc, lo dejamos para los estilos CSS. Por lo que en cuanto a Html ya lo tendramos terminado. Genial, no? Cualquier otra combinacin seguro que se puede conseguir sin ms que darle un poco de rienda suelta a la imaginacin. Tambin podras colocar una tabla dentro de la celda de otra tabla si fuera necesario. Son cosas raras ya, pero es posible, claro.
Algunos comentarios sobre el uso de las tablas
Como ves, una vez comprendidas y dominadas las tablas y su cdigo Html, se te pueden ocurrir mil utilidades, o al menos, si no mil, unas dos o tres, no? je je je. La primera utilidad es para cuando queramos colocar una serie de datos ordenados por el ndice que le pongamos arriba, como en el caso de la primera imagen que te puse al principio de estas lecciones sobre tablas. De hecho, es para eso para lo que se ha inventado este cdigo. Otro uso bastante utilizado es el de organizar mediante tablas el contenido completo de una web, como vimos en otro de los ejemplos. Es decir, crear una tabla con tantas celdas como cachitos de contenido
vayamos a colocar en una pgina web y colocar luego el cdigo correspondiente dentro de cada celda. As, se puede maquetar o dar forma a una pgina web y conseguir mantener la forma que deseamos para ella. Un logotipo de la fila de arriba, un pie de pgina en la de ms abajo, men lateral en una celda de la izquierda, contenidos a su derecha.... resulta bastante sencillo de este modo. En el Ejemplo con Tablas de CCTW puedes encontrar cmo construir un diseo de pgina web usando tablas. Ahora que sabes usarlas quizs te resulte fcil seguir ese ejemplo. No obstante, para mi gusto personal, no son la mejor opcin. Supone hacer leer a los robots como google un montn de cdigo hasta llegar al contenido principal. Esos robots han de empezar a leer desde el principio, pasando por el cdigo del logotipo (primera fila normalmente), celdas del men lateral, etc, etc, y corremos el riesgo de que cuando llegue a leer el contenido principal, los textos principales que suelen estar en la parte central de la pgina, el robot est harto de cdigo y se pierda esa parte importante. Una alternativa al uso de las tablas a la hora de maquetar o dar forma al diseo de una pgina web es el uso de las capas o Divs. Es un concepto totalmente distinto que veremos ms adelante dentro de este curso de Html y te recomiendo que lo aprendas bien, pues seguramente prefiera esa forma cuando quieras crear tu diseo. Tambin dispones en CCTW de un Ejemplo paso a paso de diseo web con Divs o capas. Lo nico que quera advertirte antes de seguir, es que antes de decidirte a crear el diseo basado en tablas, al menos conozcas esa otra alternativa mediante el uso de capas o Divs, oki?
Las etiquetas para crear formularios
Realmente, escribir y publicar contenidos en nuestras pginas web seria algo totalmente a ciegas si no conocemos la opinin de nuestros lectores. Por otro lado, no se me ocurre cmo podramos gestionar un pedido de compra sin dar la oportunidad a los visitantes a comunicarnos qu y cunto quieren, verdad? Para estas cuestiones y para muchas aplicaciones ms, surgen los formularios. Los formularios son recuadritos donde las visitas pueden escribir datos, datos que luego sern procesados para una u otra accin. Ser enviados a una direccin de email que le indiquemos, o pasados a un departamento de ventas para procesar un pedido, o incluso ir a parar a un foro en forma de mensaje o respuesta. Es uno de los mtodos ms bsicos y utilizados para la comunicacin entre webmaster y visitantes. Aprendemos a usarlos? Las etiquetas que abren y cierran un formulario son <form> y </form> (apertura sin barra y cierre con barra, como siempre). Adems, en la etiqueta de apertura se aade qu queremos que se haga con los datos que se recojan, o mejor dicho, qu archivo va a procesar esos datos. Mira este ejemplo de abajo:
...... <form method="post" action="mostrardatosenpagina.php"> ...... </form> .......
Es un formulario vacio, pero se ve cmo se indica a qu archivo se van a enviar los datos recogidos por
el fomulario. Otro cantar ser cmo crear ese archivo, pero ya escapa del alcance de este apartado en el que solo veremos puro Html. Si quieres ver cmo usar los formularios ms a fondo visita la seccin que hay dentro del curso de Php y Mysql, en el que encontrars mucha informacin para aprender a usar formularios. Ahora, entre esas dos etiquetas, hemos de colocar los recuadritos que recopilarn la informacin del visitante. Existen recuadros de muchos tipos. Unos son para recoger algunas palabras, otras para grandes textos, tmabin los hay para recoger contrasear, o desplegables en los que se muestran varias opciones de las que el visitante ha de recoger una o varias de ellas, adems de casillas de verificacin que se pueden activar o desactivar, etc, etc, etc. Todo esto y mucho ms lo tenemos explicado dentro del curso de Php y MySql, en la seccin todo sobre formularios, de modo que prefiero no repetirlo ac de nuevo, oki?
Agrupando Elementos
Ahora que conoces las principales etiquetas Html que vas a poder necesitar para hacer una pgina web y tras haberte comentado unas cien veces que en el Html no deberamos colocar nada de cdigo que tenga que ver con la esttica de sus elementos (anchuras, colores, fondos, mrgenes, etc, etc) toca el turno de presentaros estas dos maravillosas etiquetas, <div> y<span>. Y por qu te digo esto? Por que esas dos etiquetas son las encargadas de agrupar uno o varios elementos de una web y de darles un identificador, que usaremos luego en la hoja de estilos CSS para relaccionarlos. Me explico mejor con un ejemplo, oki? je je je. Imagina que quiero crear una lista de elementos como vimos pginas atrs. Pero queremos que tenga una imagen de fondo que tenemos por ah guardada, y queremos darle cierta anchura, y un borde de color marrn que sea un poquito ancho, y ya puestos que el tamao de sus textos sea pequeito y... y muchas cosas ms. Como ves, todo esto son detalles estticos y segn mis recomendaciones no deben definirse dentro del cdigo Html. Correcto? Todos esos detalles los vamos a definir en un archivo aparte, no en el archivo .html de la pgina web sino en lo que llamaremos hoja de estilos, un pequeo archivo con extensin .css que ya veremos en el curso de estilos ms adelante. Pero cmo podra saber el navegador que nuestra querida lista ha de tomar todos esos estilos o detalles? Ah es donde aparecen nuestras nuevas amigas, las etiquetas <div> y <span>. Con ellas podremos, en el cdigo Html, darle un nombre a esa lista. As, cuando el navegador la vea en nuestra web, ver que tiene un nombre y buscar qu estilos han de tener las listas con ese nombre en la hoja de estilo. El navegador leer esos estilos o detalles y se los aplicar a la lista, quedando tal y como la queramos. Genial, no? Ahora estamos en el curso de Html, de modo que no profundizaremos mucho en los estilos. Te sobra con saber que para asignarle nombres a elementos o grupos de elementos del Html y poder darle estilos, usaremos las etiquetas <div> y<span>. Veamos cmo se hace en las pginas siguientes.
La etiqueta Span para agrupar elementos en lnea
La etiqueta <span> se utiliza para asignar un nombre a un trocito de un elemento de nuestra pgina web. Como deca en la pgina anterior, cuando el navegador vea que ese trozo de elemento tiene asignado un nombre, ir a ver si existen definidos algunos estilos para l y en caso de encontrar alguno, los aplicar. Pero vemoslo con un ejemplo, que parece que se entiende mejor, no? Imagina, ahora que sabes escribir textos en Html, que tenemos una pgina web con el siguiente prrafo: <p>Estamos aprendiendo a utilizar la etiqueta span de Html en este tutorial tan majo.</p> Imagina que queremos que aparezcan las palabras "etiqueta span" en negrita y de color rojo. Tal y como hemos visto hasta ahora, debemos evitar aplicar ese tipo de detalles en el cdigo Html, verdad? Lo que haremos ser darle a esas dos palabras un identificador o nombre y, ms tarde, en la hoja de estilo, definirle a ese nombre las propiedades negrita y color rojo. El nombre que vamos a escoger va a ser "resaltado", y para aplicrselo a esas dos palabras usaremos el siguiente cdigo: <p>Estamos aprendiendo a utilizar la <span class="resaltado">etiqueta span</span> de Html en este tutorial tan majo.</p> De este modo, el navegador al leer el cdigo Html ver que a esas dos palabras encerradas ha de aplicarles los estilos que tenga el identificador resaltado" en la hoja de estilos. No parece muy complicado, no? Es que no lo es! je je je. Has de saber que se usa la etiqueta <span> cuando quieres encerrar trocitos o parte de un elemento. Un prrago entero es un elemento, pero esas dos palabras son "un trocito" de elemento y por lo tanto hay que seleccionarlas con un <span>. Para seleccionar no partes sino conjuntos de elementos (como por ejemplo varios prrafos) hay que usar la etiqueta que veremos en la pgina siguiente, la etiqueta <div>. Normalmente, yo solo uso <span> para esto, para dar un estilo diferente a una parte de un prrafo, como por ejemplo una sola palabra o solo unas pocas del prrafo. No lo uso para ninguna otra cosa que ahora mismo recuerde, de modo que puedes limitarte a usarlo como yo, solo para eso. Quizs se te ocurran ms aplicaciones con el tiempo. Pensando pensando... quizs otra utilidad podria ser la de enfatizar la primera letra de un prrafo, tal y como hacen algunos peridicos, es decir, colocar la primera letra en negrita y de un tamao bastante mayor que el resto del prrafo. Esto se podra lograr aplicando la la estiqueta <span> tan solo a la primera letra del prrafo, de este modo: <p><span class="capital">L</span>a primera letra de este prrafo, la "ele", tendr un estilo diferente, si es que lo defino en la hoja de estilos, claro.</p>
Debera aparecer ms o menos as, si defino en la hoja de estilos que sea negrita, de color azul y de un tamao mayor que el resto del prrafo:
La primera letra de este prrafo, la "ele", tendr un estilo diferente, si

es que lo defino en la hoja de estilos, claro. Dentro de un par de pginas te explico con ms detalle el uso de la propiedad class, no temas. Veamos ahora la etiqueta div.
Las capas, etiquetas Div para aplicar estilos CSS
Ya te coment en la pgina anterior que para cachitos de elemento se usa la etiqueta <span>y para bloques o grupos de elementos la etiqueta <div>. Vamos a verla con ms detenimiento. La forma de usarla es muy similar al caso anterior. Basta con colocar la etiqueta de apertura antes de donde empiece el grupo, indicando el nombre dentro de esa etiqueta, y colocar luego la etiqueta de cierre al final del grupo. Muy sencillo. Para agrupar dos prragos podramos escribir este cdigo de abajo, por ejemplo:
<div class="letra-grande"> <p>Este es el primer prrafo de este grupo.</p> <p>Que listo eres, si, este es el segundo, je je je.</p> </div>
Por tanto se usa la etiqueta Html <div> cuando queremos darle un nombre o identificador no a un trozo de elemento (un par de palabras de un prrafo, por ejemplo) sino a un elementos entero (el prrafo completo) o ms habitualmente, a un grupo de elementos, varios prrafos, varias imgenes, un bloque formado por varios prrafos e imgenes, o incluso la pgina completa. De ese modo, podemos darle los estilos definidos a ese nombre en la hoja de estilos, a todos los elementos de ese grupo. De nuevo, veamos algunos ejemplos concretos para aclarar el concepto. Imagina que queremos darle un ancho concreto a toda la web. Podramos crear un estilo en la hoja de estilos llamado "anchura", darle el valor de 800px de ancho y.... a quin se lo aplico? Pues por ejemplo, a toda la web, no? Para eso bastara con colocar la lnea:
...... </head> <body> <div class="anchura"> ......
al principio del contenido de la web, es decir, justo despus de la etiqueta <body> y luego, antes de </body> colocar el cierre de ese div con esta otra lnea:
...... </div> </body> </html>
O imagina que tenemos una lista de elementos construida con las etiquetas que vimos atrs, las etiquetas <ul> y <li>con las que hemos hecho el men lateral. Para darle la forma, anchura y colores que queramos podramos encerrarla dentro de un div y darle el nombre de "menu" de este modo:
...... <div class="menu"> <ul> <li>enlace 1</li> <li>enlace 2</li> <li>enlace 3</li> </ul> </div> ......
Bueno, para saber cmo se usan estas etiquetas tienes ms que suficiente, no? Para mejorar los conocimientos en cuanto a su aplicacin prctica te recomiendo que sigas el tutorial Ejemplo con Divs en el que terminars de entender todo esto perfectamente, ya lo creo que s ;=) Pasamos ahora a ver un par de propiedades relacionadas con estas dos etiquetas tan prometedoras. Me sigues? Por cierto! Se me olvidaba comentarlo. Cualquier elemento o conjunto de elementos encerrados por la etiqueta <div>es una capa. Si, las capas no son ms que eso, agrupaciones de elementos entre esas etiquetas con el fin de poder aplicarle estilos a lo que tenga en el interior. Ves? Ya sabes lo que son las famosas capas, esa tecnologa tan tan moderna para hacer webs profesionales!! je je je. Puedes aprender mucho ms sobre ellas con el Ejemplo con Divs que tenemos en CCTW, donde aprenders a crear una pgina web desde cero y pasito a pasito.
Cuando usar Id o Class?
En las pginas anteriores, mientras hablbamos de las etiquetas <div> y <span>, pusimos la propiedad class para indicar el nombre que identificara a ese grupo o cachito de elemento, recuerdas? No te coment nada ms para no liarte al mezclar unas cosas con otras, pero ahora que sabes manejar las etiquetas <div> y <span> perfectamente (o ms o menos perfectamente.... je je je) puedo contarte ya lo siguiente. Existen dos formas de asignar un nombre a un <div> o a un <span>. Una la hemos visto en los ejemplos anteriore, la propiedad class, pero existe otra ms, la propiedad id. Vamos a ver cundo se utiliza una y cundo la otra.
Podramos decir que existen dos tipos de estilos. Los que se definen para objetos concretos, como el men lateral, la cabecera de la pgina, el pie de pgina, etc, y los estilos que usamos a discreccin, como los estilos para resaltar ciertos textos, o para dar unas propiedades caractersticas a ciertos enlaces. Estilos estos ltimos que podemos aplicar a este elemento de aqu o a aquel otro de all. Me sigues? Asignaremos un nombre con la propiedad id cuando pertenezca a un objeto que solo aparece una vez en cada pgina web. Es el caso del pie de pgina (no suele haber dos), o a la cabecera (suele haber uno solo), o del men lateral. Son objetos que en caso de aparecer en una de las pginas de nuestra web, lo hacen una sola vez. En cambio hay otros estilos que podemos aplicar a discreccin y repetidas veces. Si creo un estilo llamado "resaltado" que puedo aplicar a una palabra de cierto prrafo, y a otro grupo de palabras de otro prrafo distinto, y a aquel enlace de ah arriba, etc, etc, es decir, que vamos a aplicar varias veces en una pgina de nuestra web, usaremos en lugar de la propiedad id la propiedad class para asignar el nombre de estilo, de acuerdo?. No te asustes! Lo he comentado ac por que es algo que aparece dentro del cdigo Html de las pginas bien hechas. Pero como estn directamente relacionadas con los estilos css, volver a explicarlo, con ms detalle y espero que mejor, en las lecciones de estilo. No quera que encontraras esas palabrejas en una web y que pensaras que el vago de jorgens no las habia ni nombrado en el curso de Html, je je je je. Son ms fciles de lo que parece.

Conocimientos de HTML en Un Libro Hecho de Mi

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Conocimientos de HTML en Un Libro Hecho de Mi

Încărcat de

Drepturi de autor:

Formate disponibile

La estructura

Definicin del tipo de documento con DOCTYPE

Cmo y dnde indicar el idioma en HTML5

Etiqueta meta description en Html5

Definir el charset o tipo de codificacin de tus pginas

tendremos que escribir, entre <body> y </body> la siguiente lnea:

Ver como queda el ejemplo Html5 hasta ahora.

Ver como queda el ejemplo hasta el momento.

Textos con Varios Estilos a la Vez

Mirad esta lnea:

Por ejemplo, esto que sigue es un comentario:

Los Ttulos Html para resaltar titulares de tus textos.

Insertar imgenes en una pgina web con el cdigo Html correcto

La etiqueta Html de Imagen

sino esto otro:

Explicacin sobre las rutas de una imagen.

El nombre del archivo y su extensin

Las dimensiones de las imgenes en el Html

Definir la anchura de una imagen

Definir la altura de las imgenes

Qu son los Textos Alternativos y cmo se colocan?

o, para que veas un ejemplo real (aunque inventado), este otro:

Los enlaces y su cdigo Html

La etiqueta A en Html5 para crear enlaces

La ruta de los enlaces en cdigo Html5

Textos Altenativos con la propiedad Title de Html5

Los Anclajes o enlaces tipo Ancla en Html5

Propiedad rel para los enlaces en el Html5

Dnde se coloca la propiedad Rel de los enlaces?

Propiedad rel="archives" del nuevo Html5

Propiedad rel="author" para especificar el autor

Propiedad rel="first", rel="last" y rel="up" indicando la primera y ltima pgina

Otros valores para la propiedad rel

Ejemplo de lo aprendido hasta el momento

La etiqueta BR para los saltos de lnea en los textos de una web

Listados de elementos y su cdigo Html

Las Listas de elementos desordenadas

Las Listas de elementos ordenadas

Metatag Keywords y Palabras Clave

Ms lecciones de cdigo Html

Diseo de tablas Html

Las etiquetas de Tabla en cdigo Html

La estructura de las tablas

</tr> <tr> <td>contenido3</td><td>contenido4</td> </tr> </table>

Cmo combinar celdas de una tabla en Html

En la pgina siguiente vemos cmo combinar varias celdas verticales, oki?

Cmo combinar celdas verticales en una tabla Html

El cdigo Html de esa tabla sera algo como esto:

</tr> <tr> <td>contenido5</td><td>contenido6</td> </tr> </table>

Otras combinaciones de celdas.

Puedes usar varias tablas en lugar de solo una

Algunos comentarios sobre el uso de las tablas

Las etiquetas para crear formularios

La etiqueta Span para agrupar elementos en lnea

La primera letra de este prrafo, la "ele", tendr un estilo diferente, si

Las capas, etiquetas Div para aplicar estilos CSS

...... </div> </body> </html>

Cuando usar Id o Class?

S-ar putea să vă placă și