Scribd Logo
Unggah

Selamat datang di Scribd!

  • Curso HTML

    Diunggah oleh

    Fabian de la Ossa
    7 tayangan23 halaman

    Hak Cipta

    © Attribution Non-Commercial (BY-NC)

    Format Tersedia

    DOCX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    7 tayangan23 halaman

    Curso HTML

    Diunggah oleh

    Fabian de la Ossa

    Hak Cipta:

    Attribution Non-Commercial (BY-NC)
    Unduh sebagai DOCX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 23

    Estructura

    Ms de una vez os habris tropezado, bien por curiosidad o bien por error al pulsar el boton 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 pagina web para ir perdindole el miedo. Toda pgina web hecha con Html, 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 (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 meter en el encabezado (head) y otras cosas que solo funcionarn en el 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, 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 "/". A estas palabras encerradas con los smbolos < y > como ya ves, las llamamos etiquetas. Aparecen algunas cosillas nuevas, pero eso y muchas cosas ms las veremos con detenimiento a continuacin. Con esto que sabes ahora mismo, podras mirar el cdigo Html de cualquier pgina web e indentificar dnde empieza el cdigo html, dnde termina, y dnde empiezan y acaban la cabecera y el body.

    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).

    Deficinin del tipo de 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 estas lecciones usarmos el tipo de Html que mejor creo que cuadra con nosotros, llamado XHTML 1.0 Transitional. En otra ocasin os hablar ms detenidamente de las caractersticas de este tipo de Html, pero ahora mismo igual os suena un poco a chino an. Pero a lo que vamos, siempre que crees una pgina web basada en el Html explicado en comocreartuweb coloca este cdigo en la primera lnea de ese archivo, tal cual, sin cambiar nada. <!DOCTYPEhtmlPUBLIC"//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd"> Qudate con que en estas lecciones vamos a escribir cdigo Html del tipo XHTML 1.0 Transitional. No es necesario que lo memorices, pues lo vas a poner en todas tus pginas :=) Otra cosilla. La lnea que os he dicho obliga a colocar un detalle dentro de la etiqueta <html> de modo que siempre que coloques ese DOCTYPE coloca la equiqueta <html> de este modo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> Esto por el momento es un acto de f, je je je. Agradecers esas 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!

    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 ttulo definido en la cabecera es uno de estos y, adems, es importantisimo. Con las etiquetas <title> y </title> se define el ttulo de la pgina web, no de la web completa (en mi caso www.comocreartuweb.com) sino de esa pgina concretamente (en el caso de esta pgina, "El ttulo de una pgina web, etiqueta html title de la cabecera"). Lo ves arriba? Fjate que tenemos una etiqueta para indicar que empieza el ttulo y otra para indicar que el ttulo ha terminado, 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ttulo de esta pgina</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#FFFFFF"> </body> </html> Lo que pongas entre esas etiquetas es 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. 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. Como tengas dos exctamente iguales, 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!

    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. 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 (concretamente sera la iso-8859-1). 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 carcteres en castellano sera esta: <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" /> 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. 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 siempre hay una etiqueta de cierre tras una de apertura. En el caso caso de una etiqueta no use la correspondiente etiqueta de cierre, se coloca en su lugar una barra al final de la lnea. 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. 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 Html 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 palabras clave por las que se quiere identificar una pgina web no son por ejemplo cosas vibiles, mientras un prrafo que intenta transmitir algo a los visitantes, obviamente si es algo 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>. Como vis, la primera etiqueta indica comienzo de prrafo (de ah la "p" de prrafo) y la segunda situada al final indica eso, 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 como: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi Nueva Web</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF"> <p>Hola amigos, esta es mi nueva Web</p> </body> </html> Como vis, en este ejemplo se ha puesto ya el ttulo a la pgina. En concreto se le ha llamado "Mi Nueva Web". Si ahora queris meter otro prrafo, simplemente aadid otra lnea ms antes o despus de la escrita antes, segn queris 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: <html> <head> <title>Mi Nueva Web</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF"> <p>BIENVENIDOS!</p> <p>Hola amigos, esta es mi nueva Web</p> </body> </html> Aunque a veces funcione sin l, no olvideis nunca indicar el final del prrafo con </p>. Os evitar problemas ms adelante. Ver como queda la cosa hasta ahora. Si una vez abierta la ventana le dais a "Ver" y luego en "Cdigo Fuente" veris el cdigo HTML de esa pgina. Por supuesto, debera ser idntico al escrito arriba. Si os va gustando todo esto seguidme a la pgina siguiente.

    Resaltar Texto
    Con el tag <p> (as se llama eso, que se le va a hacer...) ya sabemos poner un texto simple. Pero quizs en algn momento queramos escribir 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 la cosa hasta ahora. Recuerda que para insertar un prrafo debes incluir esa lnea entre <body> y </body>.

    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 la cosa 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 (underscore 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 la cosa hasta ahora.

    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 la cosa 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.

    Comentarios
    Para insertar un comentario solo necesitamos encerrarlo entre estos dos smbolos o etiquetas: <!-- (Este es el smbolo que indica inicio de comentario) --> ( y con esto se termina el comentario) Por ejemplo, esto que sigue es un comentario: <!-- esto es un comentario --> Otro ejemplo es este, donde vemos que podemos meter ms guiones por si queremos dejarlo ms visible: <!----- esto es un comentario -----> pero como mnimo debe tener los dos guiones tanto al principio como al final, adems del resto de la etiqueta, <!-- y -->. Los comentarios no aparecen en la pgina cuando la visita alguien. En realidad no hacen nada de nada de nada. Solo sirven para que el autor de la web, cuando mire su cdigo, sepa qu es cada trozo de cdigo. Es decir, podemos insertar comentarios en alguna parte del cdigo Html de nuestra pgina para saber qu hace ese trozo, para 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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi Nueva Web</title> <!-- Insertar aqu las Metatags--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF"> <p>BIENVENIDOS!</p>

    <p>Hola amigos, esta es mi nueva Web</p> </body> </html> Ver como queda la cosa hasta ahora. En Dreamweaver 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: <!-- <p>BIENVENIDOS</p> --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi Nueva Web</title> <!-- Insertar aqu las Metatags--> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body bgcolor="#FFFFFF"> <!-- <p>BIENVENIDOS!</p> --> <p>Hola amigos, esta es mi nueva Web</p> </body> </html> Ver como queda la cosa 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 adornos son para el CSS, nos sobran en el html


    Te lo he comentado antes, pero es impotante que tengas esto bien claro si quieres hacer pginas web en condiciones y si no quieres tener problemas en el futuro con el modo en que los distintos navegadores van a mostrar tu genial web. Querrs que en todos se vea igual tu sitio, verdad?

    Te coment que todo lo que fueran adornos, colores, tamaos, formas... todo lo que definiera la apariencia de algn elemento de la web, no deba estar dentro del cdigo Html sino en la hoja de estilos CCS que veremos ms adelante. Como poder, se puede. De hecho se usan en un sin fin de ejemplos que encontrars en libros y webs, pero es un consejo que entenderas perfectamente cuando termines ste cursico, y el de CSS. Tmalo como otro acto de f, je je je. Y qu elementos estticos tenemos en nuestro cdigo? Pues solo un color definido dentro de la etiqueta del cuerpo, esta de abajo: <body bgcolor="#FFFFFF"> Si si, es verdad que eso lo he puesto yo y no t y que no tengo porqu reirte, je je je. Lo puse pues es lo que normalmente te coloca un programa de creacin de pginas web de forma predeterminada. As si te lo encuentras sabrs que hay que cargrselo rpidamente. Adems, as veis que es posible aadir estilos (color de fondo blanco en este caso) dentro de la etiquetas, aunque como te repito, no me gusta ese modo de hacer las cosas. Si quieres un fondo blanco o del color que sea, ese no es el sitio en el que ponerlo correctamente. Oki? Bien, nos vamos entendiendo, je je je. Nuestro cdigo queda entonces de este modo: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Mi Nueva Web</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </head> <body> <p>BIENVENIDOS!</p> <p>Hola amigos, esta es mi nueva Web</p> </body> </html>

    Los Ttulos Html para resaltar titulares de tus textos


    Hasta ahora sabes ya crear una pgina web algo misarable, 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 Html. Vers qu fcil. Al igual que para crear un prrafo encerrbamos su contenido entre las etiquetas <p> y </p>, para crear ahora un ttulas 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. La apariencia es sin duda distinta, como si de un titular de peridico se tratara, verdad? Existen otras etiquetas de ttulos en Html, h2, h3, h4, h5.... y hasta el 7 creo, aunque no creo que pasemos del h2 o h3 normalmente. El aspecto de estos otros tipos de titular en 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 Html, solo poner contenido en las pginas. Repito, luego con los estilos css les darmos forma y color. Veo que te voy convenciendo, ja ja ja. Genial! No te pongo qu aspecto tiene un ttulo, pues como te he dicho es lo de menos. Cuando nos ponemos el disfraz de Html el aspecto nos importa un pimiento. Usaremos h1 para titulares principales y h2 para titulares secundarios. Si se diera el caso tambin los h3 para titulares menores, oki?

    Insertar imgenes en una pgina web con el cdigo html correcto


    Ya sabemos el codigo Html correcto para aadir prrafos y titulares en una web. Ahora aprenderemos a escribir el cdigo Html 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. El cdigo 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.

    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 la tiene. Es por eso que se coloca la barrita de cierre al final de la etiqueta y no colocando otra etiqueta ms con esa barra. Es decir, con las imgenes no se hace esto: <img>imagen</img> sino esto otro: <img ......resto de propiedades.... /> pero no olvides colocar la barrita al final, y de dejar el espacio que hay antes de ella. Y ahora veamos el resto de propiedades que se le colocan dentro a esa etiqueta.

    Explicacin de las rutas de una imagen


    Quizs uno de los conceptos ms enrrevesados 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/. 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 paisajes creada 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/. 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 ../.

    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


    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", "Propiedaes" 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.

    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 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 internos (hacia otras partes de nuestra web) como externos (hacia otros sitios) y todas las variantes que podemos aprovechar para sacarles todo el jugo. 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 bien en textos o bien sobre imgenes. En ocasiones habrs visto enlaces que se colorean o que no cambian de color al pulsarlos. Esto son cambios en su apariencia. Recuerdas dnde quedaban las apariencias y adornos? Exacto, detalles para el CSS que veremos en otra seccin de CCTW, de modo que esos detalles no los veremos en esta seccin de Html sino en el curso de CSS, vale? Aqu aprendemos a colocarlos y en el curso de CSS 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: <a href="http://www.comocreartuweb.com" target="_blank" title="Visita la web de Jorgens">ComoCrearTuWeb</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 html para los enlaces


    En el caso de los vnculos 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 a otro lugar? 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 veamos todas esas propiedades a fondo en la siguiente pgina.

    Las rutas de los enlaces


    Ya hemos visto que un enlace sin 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 enviarlos al pulsar sobre el enlace. La propiedad que se usa para indicar esto es href y tras ella y entre comillas dobles colocamos la ruta y el nombre del archivo de la pgina de destino, de este modo:
    <a href="ruta-del-enlace/nombre-del-archivo-destino.extension">Texto del enlace</a>

    Las explicaciones acerca de las rutas que comentamos en la seccin de las imgenes y que puedes encontrar en la definicin de Rutas de Archivos de la Enciclopedia CCTW es igualmente vlida en este caso. Tenindolas claras, 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.

    Abrir o no otra 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


    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


    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?

    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 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Pgina Ejemplo 001</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> </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="Todo sobre diseo de pginas web">ComoCrearTuWeb</a> <p>Adios <b>Amigos</b>!</p><!-- Enlace tipo ancla hacia la parte superior --> <a href="#arriba" title="Ir Arriba">Ir Arriba</a> </body> </html>

    La etiqueta BR para los saltos de lnea en los Textos.


    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 vez metidos los enlaces en una lista desordenada. Tanto la etiqueta <ul> como las etiquetas <li> son etiquetas de bloque, lo que significa que NO es necesario 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 los title="...." 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.

    Anda mungkin juga menyukai