Crear Paginas Web

Crear paginas web
Antes de empezar quiero comentarte alguna cosilla. En adelante te vas a encontrar con unos cuantos ejemplos que puedes ir copiando con el block de notas de windows (notepad.exe) por ejemplo. No uses el Wordpad de Windows ni el Microsoft Word ni ningn otro procesador de textos, pues es preciso que el software en el que escribas cdigo html (o Php, Javascript, etc) NO le asigne formatos al texto (color, tamao, etc, como el Word de Microsoft, etc). Visita la seccin Editores de Texto Plano para saber un poco ms del porqu y para encontrar enlaces de descarga de Editores de Texto Plano gratuitos, oki? Vers como el cdigo Html (html5) que te pongo en los ejemplos suele ir coloreado de azul. Esto es para poder diferenciarlo ms tarde con otros tipos de cdigo (como el css, php, javascript, etc que irn de otro color). Eso nos clarificar los ejemplos bastante. Bajo mi punto de vista (y de muchos otros webmasters, claro) el cdigo Html solo hay que usarlo para aadir el contenido en la web, pero no para darle formas, colores ni nada que signifique "adornar" la web. Para eso usaremos los Estilos CSS que veremos despus de terminar este curso de Html5. Es por eso que prescindiremos de todo el Html que se usa para adornos. Repito, Html solo para aadir informacin, CSS para darle forma, oki? Si usas Html para cambiar tamao al texto, poner bordes o recuadros, dar mrgenes, colores de fondo y tal, estars perdiendo el tiempo y te acordars de estas notas cuando veas que tus pginas web no se ven igual en unos navegadores que en otros. Seguir los consejos de CCTW es un acto de f, je je je. Me hars caso? Ya lo veremos, je je je. 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-88591"> </head> <body bgcolor="#FFFFFF"> </body> </html> Vemos en este cdigo las palabras mgicas comentadas antes, html, head, body y sus correspondientes cierres con la barra "/". A estas palabras encerradas con los smbolos < y > las llamaremos etiquetas. Aparecen algunas cosas nuevas, pero las veremos con detenimiento ms adelante. Con esto que sabes ahora mismo, podras mirar el cdigo Html de cualquier pgina web e 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).
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! 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! 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?
Adems de la etiqueta title que acabamos de ver y que define el ttulo de la pgina (no de la web, sino de esa pgina concreta) y que como hemos dicho, ha de ser distinta en cada una de las pginas de tu web, tenemos otra etiqueta de tipo meta importante, la etiqueta description. <meta name="Description" content="descripcin de la pgina"> Actualmente los buscadores (incluido Google, el rey) solo hacen caso de las meta etiquetas titley 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 dos descriptionidnticos en dos o ms pginas dentro de tu web, Google las tomar como copias y solo indexar una de ellas, perdiendo posibilidades de ser encontrado por los usuarios del buscador. Se recomienda que el contenido dentro de la meta etiqueta description no tenga ms de 150 caracteres ni ms de 30 palabras. Aprovecha y piensa bien lo que vas a poner, pues las palabras clave de tu web deberan aparecer dentro, sin repeticiones y manteniendo cierto sentido, 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.
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="utf8" 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). 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 y 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: Hola amigos, esta es mi nueva Web 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> Hola amigos, esta es mi nueva Web </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> BIENVENIDOS! Hola amigos, esta es mi nueva Web </body> </html> Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el final del prrafo con . 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.
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 y 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: Hola amigos, esta es mi nueva Web 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> Hola amigos, esta es mi nueva Web </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> BIENVENIDOS! Hola amigos, esta es mi nueva Web </body> </html> Aunque a veces funcione sin etiqueta de cierre, no olvides nunca indicar el final del prrafo con . 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. 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 y , 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 y del
texto BIENVENIDOS! y vamos a encerrar esa palabra entre las nuevas etiquetas de titulo: ...... <body> <h1>BIENVENIDOS!</h1> Hola amigos, esta es mi nueva Web ....... 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.
a 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. 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 sera width=222px, pero como te digo, lo mejor es usar las dobles comillas y escribirlo as: width="222px" Ya solo nos queda un trocito de aqul cdigo para dominar el Html de las imgenes. Se trata delalt, 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.
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!

Crear Paginas Web

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Crear Paginas Web

Diunggah oleh

Hak Cipta:

Format Tersedia

Crear paginas web

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

Definir la anchura de una imagen

Definir la altura de las imgenes

Anda mungkin juga menyukai