Primero que nada quiero agradecer a todos los usuarios que me siguen y los que no,que pasaron y agregaron a favoritos y puntuaron este post
Gracias a esto, el post entró en la lista del Top del Día en la categoría hazlo tu mismo
Con frecuencia la gente piense que es muy difícil crear un sitio web. Pues... ¡no es el caso! Todos podemos aprender a crear un sitio web. Y si sigues leyendo, serás capaz de hacerlo en aproximadamente una hora.
Otros creen -y están igual de equivocados- que para crear sitios web es necesario un tipo de software caro y sofisticado. Es cierto que existen muchos programas diferentes que proclaman que pueden crear un sitio web por ti; unos se acercan más que otros. Sin embargo, si quieres que todo salga perfecto, tienes que hacerlo tú mismo. Por suerte, es sencillo y gratuito y ya dispones de todo el software necesario.
El objetivo de este post es proporcionarte una introducción fácil, pero al mismo tiempo completa y correcta sobre cómo crear sitios web. Este post empieza de cero y no es necesario, en absoluto, tener conocimientos previos sobre programación.
Este post no puede enseñártelo todo. Por lo tanto, es necesario comprometerse un poco y tener voluntad para experimentar. Pero no tienes por qué preocuparte: aprender a crear sitios web es de lo más divertido y proporciona una gran satisfacción cuando se da con la solución correcta.
El modo en que utilices el presente post depende de ti. Te sugiero, en todo caso, que sólo leas dos o tres lecciones al día, y luego dediques tiempo a experimentar todo lo nuevo que hayas aprendido en cada lección.
Bueno basta de vueltas y empezemos...!!
Lección 1: ¡Nos ponemos en marcha!
En esta primera lección te presento brevemente las herramientas que necesitas para crear un sitio web.
Lo más probable es que ya tengas todo lo que necesitas.
Ya dispones de un "navegador". El navegador es el programa que te permite navegar y abrir sitios web. En este preciso momento estás viendo este post en el navegador.
No importa qué navegador uses. El más habitual es Google Chrome, pero existen otros como Opera,rockmelt,safari y Firefox, y todos ellos se pueden usar indistintamente.
Es posible que hayas oído hablar, e incluso llegado a usar, programas como Microsoft FrontPage, Macromedia Dreamweaver e incluso Microsoft Word, que pueden o afirman poder crear sitios web por ti. De momento, ¡olvídate de todos estos programas! No son de ninguna ayuda a la hora de aprender a codificar tu propio sitio web.
En su lugar, necesitas un minimalista editor de texto. Si utilizas Windows puedes usar el Bloc de notas, que se encuentra normalmente clickeando en el menú de Inicio, en la sección, Todos los programas y dentro de ésta, en la sección Accesorios:
Si no utilizas Windows, puedes usar un editor de texto parecido. Por ejemplo, Pico (para Linux) o TextEdit (para Mac).
El Bloc de notas es un programa de edición de textos muy básico, excelente para escribir código fuente ya que no interfiere con lo que vas escribiendo, por lo que te proporciona un control total. El problema con muchos de los programas que proclaman que pueden crear sitios web es que disponen de muchas funciones estándar entre las que puedes elegir; la desventaja es que todo tiene que adaptarse a esas funciones estándar. Así pues, este tipo de programas, con frecuencia, no pueden crear un sitio web con la exactitud que uno quiere. O, lo que es más te hace enojar es que hacen cambios al código escrito a mano. Con el Bloc de notas u otros editores de texto sencillos, uno mismo es el único culpable de sus éxitos o errores.
Un navegador y el Bloc de notas (o un editor de texto sencillo similar) es todo lo que necesitas para seguir este post y aprender a crear tus propios sitios web.
En esta lección voy a hacer una breve presentación...HTML
HTML es la "lengua materna" de tu navegador.
Para abreviar una larga historia, podemos decir que un científico llamado Tim Berners-Lee inventó HTML allá por 1990. El objetivo era facilitar a científicos de diferentes universidades el acceso a los documentos de investigación de cada uno de ellos. El proyecto obtuvo un éxito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este científico sentó las bases de la web tal y como la conocemos hoy día.
HTML es un lenguaje que hace posible presentar información (por ejemplo, investigaciones cientíticas) en Internet. Lo que ves al visualizar una página en Internet es la interpretación que hace el navegador del código HTML. Para ver el código HTML de una página sólo tienes que pinchar en la opción "Ver" de la barra de menús y elegir "Código fuente" (Ej: en Internet Explorer...)
Para la gente que no sabe manejar esto, el código HTML parece complicado, pero este post te ayudará a que le encuentres todo su sentido.
Si quieres crear sitios web, no hay otra solución que aprender HTML. Incluso si usas un programa como Dreamweaver, por ejemplo, para la creación de sitios web, poseer unos conocimientos básicos de HTML hacen la vida mucho más fácil y tus sitios web mucho mejores. La buena noticia es que HTML es fácil de aprender y de usar. En las dos próximas lecciones ya habrás aprendido cómo crear tu primer sitio web.
HTML se usa para crear sitios web. ¡Así de fácil,de una...!
HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", y esto ya es más de lo que necesitas saber a estas alturas. En todo caso, para mantener un buen orden, vamos a explicar qué significa con mayor detalle.
Hiper es lo contrario de lineal. En los buenos viejos tiempos -cuando un ratón era un animalito que perseguía un gato- los programas de ordenador se ejectutaban de forma lineal: cuando el programa había ejecutado una acción seguía hasta la siguiente línea, y después de ésta a la siguiente, y a la siguiente, ... HTML, sin embargo, es diferente: se puede ir donde uno quiera cuando uno quiera. Por ejemplo, no es necesario visitar MSN.com antes de visitar HTML.net.
Texto se explica por sí solo.
Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc.
Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos términos en inglés.
Por medio de este post aprenderás lo que se ha dado en llamar XHTML (Extensible HyperText Mark-up Language, es decir, Lenguaje de marcado hipertextual extensible) que, en pocas palabras, es una forma de escribir HTML nueva y mejor estructurada.
Ahora que ya sabes qué representan las siglas HTML (y XHTML), nos ponemos en marcha y empezamos a crear sitios web.
Ahora ya estás listo para aprender lo esencial de HTML: los elementos.
Los elementos proporcionan la estructura al documento HTML e indican al navegador cómo quieres que se presente tu sitio web. Por lo general, los elementos están formados por una etiqueta de inicio, el contenido, y una etiqueta de cierre.
"¿Etiquetas?"
Las etiquetas son marcas que se usan para señalar el inicio y el fin de un elemento.
Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que "<" y terminan con el signo mayor que ">".
Por lo general, hay dos tipos de etiquetas: la etiquetas de inicio, por ejemplo, <html>, y las etiquetas de cierre, por ejemplo, </html>. La única diferencia entre la etiqueta de inicio y la de cierre es la barra oblicua "/". El contenido queda etiquetado al colocarlo entre una etiqueta de inicio y una etiqueta de cierre.
HTML trata esencialmente de elementos. Aprender HTML consiste en aprender a usar diferentes etiquetas.
¿Y si vemos algunos ejemplos?
Vale. El elemento em se usa para dar enfasis al texto. Todo el texto entre la etiqueta de inicio <em> y la etiqueta de cierre </em> aparecerá enfatizado en el navegador. {"em" es la abreviatura de "emphasis"}.
Ejemplo 1:
que se verá así en el navegador:
Los elementos h1, h2, h3, h4, h5 and h6 se utilizan para crear encabezados {"h" es la abreviatura de "heading"}, donde h1 representa el primer nivel y, normalmente, el texto más grande, h2 es el segundo nivel y, normalmente, es un texto algo más pequeño, y h6 es el sexto y último nivel en la jerarquía de los encabezados y es, normalmente, el texto más pequeño.
Ejemplo 2:
que se verá así en el navegador:
Así pues, ¿siempre son necesarias las etiqueta de inicio y de cierre?
Como se dice, siempre hay una excepción que confirma la regla, y en HTML la excepción son unos cuantos elementos que se abren y cierran con la misma etiqueta. Estos elementos que se denominan elementos vacíos no se asocian a un pasaje específico del texto sino que son más bien etiquetas aisladas; por ejemplo, un salto de línea tiene este formato: <br />.
¿Las etiquetas hay que escribirlas en mayúscula o en minúscula?
A la mayoría de los navegadores les da igual si se escriben en mayúscula, minúscula o una mezcla de las dos. <HTML>, <html> or <HtMl> normalmente tendrán el mismo resultado. Sin embargo, el modo correcto es escribir las etiquetas es en minúscula. Así que acostúmbrate a escribir las etiquetas en minúscula.
¿Y dónde coloco todas estas etiquetas?
Las etiquetas se escriben dentro de un documento HTML. Todo sitio web contiene uno o más documentos HTML. Cuando navegas por la web, no haces otra cosa que abrir diferentes documentos HTML.
Lección 4: Crea tu primer sitio web
¿Cómo?
En la leccion 1 vimos qué se necesita para crear un sitio web: un navegador y el Bloc de notas (o un editor de texto similar). Si estás leyendo esto, es porque tenes abierto el navegador. Lo único que necesitas es abrir otra ventana del navegador de forma que puedas seguir leyendo este post y veas cómo va quedando tu nuevo sitio web al mismo tiempo.
Abre también el Bloc de notas (que se encuentra en el menú de Inicio, Todos los programas, en la sección Accesorios):
¿Y qué puedo hacer?
Empecemos con algo sencillo. Que te parece una página que diga: "¡Hurra! Esta es mi primera página web." Sigue leyendo y verás qué sencillo es.
HTML is sencillo y lógico. El navegador lee el código HTML igual que lo haces tú: de arriba abajo y de izquierda a derecha. Así pues, todo documento HTML empieza con lo que debería aparecer en primer lugar en la página y termina con lo que debería ir en último lugar.
Lo primero que tienes que hacer es decirle al navegador que le "hablarás" usando el lenguaje HTML. Esto se consigue con la etiqueta <html> (sin sorpresas, ¿no?). Así que antes de hacer cualquier otra cosa, escribe "<html>" en la primera línea del documento creado con el Bloc de notas.
Como recordarás de las lecciones anteriores, <html> es una etiqueta de inicio y tiene que cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el código HTML. Así que para no olvidar la etiqueta de cierre del elemento HTML escribe "</html>" un par de líneas más abajo, y entre ambas etiquetas <html> y </html> escribe el resto del documento.
Lo siguiente que necesita el documento es una "cabecera", que proporcionará información relativa a este mismo documento, y un "cuerpo" donde se incluirá el contenido del documento. Puesto que HTML es de lo más lógico, la cabecera {es decir, las etiquetas <head> y </head>;} se encuentra encima del cuerpo {o sea, encima de las etiquetas <body> y </body>;}.
El documento debería presentar ahora este aspecto:
Prestá atención a cómo he estructurado las etiquetas introduciendo nuevas líneas (usando la tecla Enter) al igual que hemos usado sangrado (utilizando la tecla Tab). Da lo mismo cómo estructures el documento HTML; sin embargo, para que te sirva de ayuda tanto para vos y como para otros a la hora de interpretar el código fuente, y con el fin tener una buena visión de conjunto, es recomendable estructurar el código HTML de una forma nítida, con saltos de línea y sangrados, como en el ejemplo anterior.
Si el documento se parece al del ejemplo anterior, ya has creado tu primer sitio web: un sitio web especialmente aburrido y en modo alguno parecido a lo que soñabas cuando empezaste a leer este post, pero, con todo y con eso, ya es algo que parece un sitio web. El código que acabas de crear te servirá como plantilla básica para todos tus futuros documentos HTML.
Hasta ahora todo va bien,toda la onda...pero ¿cómo añado contenido a mi sitio web?
Como aprendiste anteriormente, todo documento HTML tiene dos partes: un encabezado y un cuerpo. En la sección del encabezado se incluye información sobre la propia página, mientras que el cuerpo contiene la información que constituye la página en sí..
Por ejemplo, si quieres poner a la página un título que aparecerá en la barra de títulos del navegador, deberías hacerlo en la sección del encabezado, es decir dentro de las etiquetas "head". El elemento que se usa para el título es title, o sea, escribe el título de la página entre la etiqueta de inicio <title> y la etiqueta de cierre </title>:
Ten en cuenta que este título no aparecerá en la página en sí. Cualquier cosa que quieras que aparezca en la página es contenido y debe, por la tanto, añadirse entre las etiquetas <body> y </body>.
Como lo prometido es deuda, vamos a conseguir que la página nos diga: "¡Hurra! Este es mi primer sitio web." Este es el texto que queremos transmitir, y, por lo tanto, pertenece a la sección del cuerpo. Así pues, en la sección del cuerpo, escribe lo siguiente:
La p de <p> es la abreviatura de "párrafo", que es exactamente lo que es: un párrafo de texto.
El documento HTML debería tener ahora este aspecto:
¡Hecho! ¡Acabas de crear ahora mismo tu primer sitio web de verdad!
Lo siguiente que hay que hacer es guardarlo en el disco duro y luego abrirlo en el navegador:
En el Bloc de notas elige "Guardar como..." del menú "Archivo" en el menú principal.
Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.
Ahora guarda el documento como "pagina1.htm" (la terminación ".htm" indica que es un documento HTML; con la terminación ".html" se consigue el mismo resultado. Personalmente, siempre uso ".htm"; tú puedes elegir cualquiera de las dos extensiones, según prefieras). Da igual dónde guardes el documento en el disco duro, siempre que recuerdes dónde lo hiciste para poder recuperarlo con posterioridad.
Ahora pasamos al navegador:
En el menú principal elige "Abrir" del menú "Archivo" (CTRL+O)
Haz clic en el botón "Examinar" de la caja que aparece.
Ahora localiza el documento HTML y haz clic en "Abrir".
En el navegador debería poder leerse ahora: "¡Hurra! Este es mi primer sitio web."
Si estás deseando que todo el mundo vea tu obra maestra ya mismo, salta a la lección 13 y aprende cómo subir tus páginas a Internet. Si no es así, se paciente y sigue leyendo.
Lección 5: ¿Qué has aprendido hasta ahora?
Empieza siempre con la plantilla básica que creamos en la lección anterior:
En la sección del encabezado, incluye siempre un título: <title> El título de la página </title>. Fíjate cómo aparece el título en la esquina superior izquierda del navegador:
En la sección del cuerpo, se escribe el contenido propiamente dicho de la página. Ya conoces algunos de los elementos más importantes
Recuerda: el único modo de aprender HTML es utilizando el método de la prueba y el error. Pero no te preocupes, en modo alguno vas a destrozar tu ordenador o Internet. Así que sigue experimentando; es el mejor modo de adquirir experiencia.
¿Y esto qué se supone que significa?
Nadie se convierte en un buen desarrollador web sólo con aprender los ejemplos de este tutorial. Lo que este tutorial te proporciona son sencillamente unos conocimientos básicos de los elementos esenciales; para llegar a ser bueno tienes que usar estos elementos esenciales de formas nuevas y creativas.
Así pues, lánzate de lleno y empieza a volar por ti mismo... Vale, puede que áun no sea el momento. Pero, de todos modos, inténtalo y experimenta con lo que has aprendido.
¿Y ahora qué sigue?
Intenta crear unas cuantas páginas tú mismo. Por ejemplo, crea una página con un título, un encabezado, algo de texto, un encabezado de segundo nivel y algo más de texto.
Lección 6: Más elementos
¿Has conseguido crear algunas páginas vos solo? Si no pudistes,acá tenes un ejemplo:
¿Y ahora qué?
Bueno ha llegado el momento de aprender siete nuevos elementos...
Del mismo modo que enfatizamos el texto al incluirlo entre la etiqueta de inicio <em> y la etiqueta de cierre </em>, se puede acentuar más ese énfasis usando la etiqueta de inicio <strong> y la etiqueta de cierre </strong>.
Ejemplo 1:
y se verá así en el navegador:
Asimismo, puedes hacer que el texto sea más pequeño usando small:
Ejemplo 2:
y se visualizará así en el navegador
Sí, se pueden usar fácilmente varios elementos a la vez siempre que evitemos elementos superpuestos. Esto lo entenderemos mejor con un ejemplo:
Ejemplo 3:
Si quieres que el texto aparezca enfatizado y más pequeño, se debe hacer de la siguiente manera:
y NO de la siguiente manera
La diferencia estriba en que, en el primer ejemplo, cerramos en último lugar el elemento que abrimos primero. De este modo evitamos confundir al navegador y a nosotros mismos.
Como mencioné en la lección 3, existen una serie de elementos que se abren y cierran con la misma etiqueta. Estos elementos conocidos como elementos vacíos no están relacionados con un pasaje específico del texto sino que son más bien etiquetas aisladas. Un ejemplo de dichas etiquetas es <br /> que crea un salto de línea forzado.
Ejemplo 4:
que se visualizará así en el navegador:
Fíjate en que la etiqueta parece una forma contraída de la etiqueta de inicio y de la etiqueta de cierre con un espacio en blanco y una barra al final: <br />.
Otro elemento que se abre y cierra con la misma etiqueta es <hr />, que se usa para trazar una línea horizontal {"hr" es la abreviatura de "horizontal rule"}:
Ejemplo 5:
que se verá así en el navegador:
Otros ejemplos de elementos que necesitan tanto la etiqueta de inicio como de cierre -la mayoría de elementos cumplen esta norma- son: ul, ol y li. Estos tres elementos se usan para crear listas.
Ul es la forma abreviada de "unordered list" (es decir, lista no ordenada) e inserta viñetas para cada elemento. Ol es la abreviatura de "ordered list" (es decir, lista ordenada) y numera cada elemento de la lista. Para crear elementos de lista use la etiqueta Li ("list item", o sea, elemento de lista). Parece algo confuso, Miren, entonces, algunos ejemplos:
Ejemplo 7:
que se verá así en el navegador:
Ejemplo 8:
que se visualizará así en el navegador:
De momento, sí. Una vez más, experimenta y crea tus propias páginas usando alguno de los siete nuevos elementos que acabas de aprender en esta lección:
Es posible añadir atributos a determinados elementos.
Como recordarás, los elementos sirven para estructurar el contenido de todo el documento HTML e indican al navegador cómo debería presentarse el sitio web (por ejemplo, <br /> informa al navegador para que introduzca un salto de línea). En algunos elementos se puede añadir más información. Esa información extra se denomina atributo.
Ejemplo 1:
Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrás el signo de igual {" = "} con los valores de dichos atributos entre comillas { " " }. El punto y coma que sigue al atributo se usa para separar los diferentes comandos de estilo. Más adelante volveremos a tratar sobre este tema.
Existen muchos atributos diferentes. El primero que vas a aprender es style. Con el atributo style se puede añadir efectos de presentación a tu sitio web. Por ejemplo, un color de fondo:
Ejemplo 2:
El código anterior mostrara un página con fondo rojo en el navegador; adelante, pruébalo tú mismo. En unos minutos explicaré con más detalle cómo funciona el sistema de colores en HTML.
Ten en cuenta que algunas etiquetas y atributos usan ortografía estadounidense, es decir, "color" en vez de "colour". Es importante que utilices la misma ortografía que uso en los ejemplos de este post; de otro modo, los navegadores no serán capaces de interpretar el código. Además, no olvides cerrar siempre las comillas detrás del atributo.
En el ejemplo anterior, hicimos referencia al color de fondo usando el código "#ff0000". Este es el código de color para el rojo en el sistema numérico hexadecimal (HEX). Cada color tiene su propio número hexadecimal.. Y estos son algunos ejemplos:
Blanco: #ffffff
Negro: #000000 (ceros)
Rojo: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarillo: #ffff00
El código de color hexadecimal se compone de una almohadilla, "#", y seis dígitos (del 0 al 9) o letras (de la A a la F). Existen más de 1.000 códigos hexadecimales y no es fácil calcular qué código hexadecimal corresponde a un color específico. Para facilitar las cosas hemos preparado una tabla con los 216 colores más usados:
También se pueden usar los nombres en inglés para los colores más comunues (white: blanco, black: negro, red: rojo, blue: azul, green: verde y yellow: amarillo).
Ejemplo 3:
Listo el tema de los colores. Volvamos a los atributos.
Son varios los atributos diferentes que se pueden aplicar a la mayoría de los elementos.
Por ejemplo, usarás con frecuencia atributos en la etiqueta body, mientras que, por ejemplo, raras veces usarás atributos en la etiqueta br, ya que un salto de línea es un salto de línea que no tiene parametros que ajustar.
Al igual que existen muchos elementos, existen también muchos y diferentes atributos. Algunos atributos están hechos a la medida para un elemento concreto, mientras que otros se pueden usar para muchos elementos diferentes. Y viceversa: algunos elementos sólo pueden contener un tipo de atributo mientras otros pueden contener muchos.
Puede sonar algo confuso, pero una vez que te acostumbres a los diferentes atributos, es en realidad de lo más lógico y pronto verás qué fácil es usarlos y cuántas posibilidades brindan.
Este tutorial te presentará los atributos más importantes.
Por lo general, todo elemento se compone de una etiqueta de inicio, sin atributos o con uno o más atributos, el contenido correspondiente y una etiqueta de cierre. Así de sencillo. Observa la imagen inferior.
Gracias a esto, el post entró en la lista del Top del Día en la categoría hazlo tu mismo
Prestá atención y salí sabiendo HTML,yo te enseño!
Introducción
Con frecuencia la gente piense que es muy difícil crear un sitio web. Pues... ¡no es el caso! Todos podemos aprender a crear un sitio web. Y si sigues leyendo, serás capaz de hacerlo en aproximadamente una hora.
Otros creen -y están igual de equivocados- que para crear sitios web es necesario un tipo de software caro y sofisticado. Es cierto que existen muchos programas diferentes que proclaman que pueden crear un sitio web por ti; unos se acercan más que otros. Sin embargo, si quieres que todo salga perfecto, tienes que hacerlo tú mismo. Por suerte, es sencillo y gratuito y ya dispones de todo el software necesario.
El objetivo de este post es proporcionarte una introducción fácil, pero al mismo tiempo completa y correcta sobre cómo crear sitios web. Este post empieza de cero y no es necesario, en absoluto, tener conocimientos previos sobre programación.
Este post no puede enseñártelo todo. Por lo tanto, es necesario comprometerse un poco y tener voluntad para experimentar. Pero no tienes por qué preocuparte: aprender a crear sitios web es de lo más divertido y proporciona una gran satisfacción cuando se da con la solución correcta.
El modo en que utilices el presente post depende de ti. Te sugiero, en todo caso, que sólo leas dos o tres lecciones al día, y luego dediques tiempo a experimentar todo lo nuevo que hayas aprendido en cada lección.
Bueno basta de vueltas y empezemos...!!
Lección 1: ¡Nos ponemos en marcha!
En esta primera lección te presento brevemente las herramientas que necesitas para crear un sitio web.
¿Qué se necesita?
Lo más probable es que ya tengas todo lo que necesitas.
Ya dispones de un "navegador". El navegador es el programa que te permite navegar y abrir sitios web. En este preciso momento estás viendo este post en el navegador.
No importa qué navegador uses. El más habitual es Google Chrome, pero existen otros como Opera,rockmelt,safari y Firefox, y todos ellos se pueden usar indistintamente.
Es posible que hayas oído hablar, e incluso llegado a usar, programas como Microsoft FrontPage, Macromedia Dreamweaver e incluso Microsoft Word, que pueden o afirman poder crear sitios web por ti. De momento, ¡olvídate de todos estos programas! No son de ninguna ayuda a la hora de aprender a codificar tu propio sitio web.
En su lugar, necesitas un minimalista editor de texto. Si utilizas Windows puedes usar el Bloc de notas, que se encuentra normalmente clickeando en el menú de Inicio, en la sección, Todos los programas y dentro de ésta, en la sección Accesorios:
Si no utilizas Windows, puedes usar un editor de texto parecido. Por ejemplo, Pico (para Linux) o TextEdit (para Mac).
El Bloc de notas es un programa de edición de textos muy básico, excelente para escribir código fuente ya que no interfiere con lo que vas escribiendo, por lo que te proporciona un control total. El problema con muchos de los programas que proclaman que pueden crear sitios web es que disponen de muchas funciones estándar entre las que puedes elegir; la desventaja es que todo tiene que adaptarse a esas funciones estándar. Así pues, este tipo de programas, con frecuencia, no pueden crear un sitio web con la exactitud que uno quiere. O, lo que es más te hace enojar es que hacen cambios al código escrito a mano. Con el Bloc de notas u otros editores de texto sencillos, uno mismo es el único culpable de sus éxitos o errores.
Un navegador y el Bloc de notas (o un editor de texto sencillo similar) es todo lo que necesitas para seguir este post y aprender a crear tus propios sitios web.
Lección 2: ¿Qué es HTML?
En esta lección voy a hacer una breve presentación...HTML
¿Qué es HTML?
HTML es la "lengua materna" de tu navegador.
Para abreviar una larga historia, podemos decir que un científico llamado Tim Berners-Lee inventó HTML allá por 1990. El objetivo era facilitar a científicos de diferentes universidades el acceso a los documentos de investigación de cada uno de ellos. El proyecto obtuvo un éxito mucho mayor del que Tim Berners-Lee nunca hubiese llegado a imaginar. Al inventar HTML, este científico sentó las bases de la web tal y como la conocemos hoy día.
HTML es un lenguaje que hace posible presentar información (por ejemplo, investigaciones cientíticas) en Internet. Lo que ves al visualizar una página en Internet es la interpretación que hace el navegador del código HTML. Para ver el código HTML de una página sólo tienes que pinchar en la opción "Ver" de la barra de menús y elegir "Código fuente" (Ej: en Internet Explorer...)
Para la gente que no sabe manejar esto, el código HTML parece complicado, pero este post te ayudará a que le encuentres todo su sentido.
¿Para qué puedo usar HTML?
Si quieres crear sitios web, no hay otra solución que aprender HTML. Incluso si usas un programa como Dreamweaver, por ejemplo, para la creación de sitios web, poseer unos conocimientos básicos de HTML hacen la vida mucho más fácil y tus sitios web mucho mejores. La buena noticia es que HTML es fácil de aprender y de usar. En las dos próximas lecciones ya habrás aprendido cómo crear tu primer sitio web.
HTML se usa para crear sitios web. ¡Así de fácil,de una...!
Alguna vez te abras preguntado, pero... ¿qué significan las siglas H-T-M-L?
HTML es la abreviatura de "HyperText Mark-up Language", es decir, "Lenguaje de marcado hipertextual", y esto ya es más de lo que necesitas saber a estas alturas. En todo caso, para mantener un buen orden, vamos a explicar qué significa con mayor detalle.
Hiper es lo contrario de lineal. En los buenos viejos tiempos -cuando un ratón era un animalito que perseguía un gato- los programas de ordenador se ejectutaban de forma lineal: cuando el programa había ejecutado una acción seguía hasta la siguiente línea, y después de ésta a la siguiente, y a la siguiente, ... HTML, sin embargo, es diferente: se puede ir donde uno quiera cuando uno quiera. Por ejemplo, no es necesario visitar MSN.com antes de visitar HTML.net.
Texto se explica por sí solo.
Marcado es lo que haces con el texto. Se marca el texto del mismo modo que en un programa de edición de textos con encabezados, viñetas, negrita, etc.
Lenguaje es lo que es HTML. Este lenguaje hace uso de muchos términos en inglés.
Por medio de este post aprenderás lo que se ha dado en llamar XHTML (Extensible HyperText Mark-up Language, es decir, Lenguaje de marcado hipertextual extensible) que, en pocas palabras, es una forma de escribir HTML nueva y mejor estructurada.
Ahora que ya sabes qué representan las siglas HTML (y XHTML), nos ponemos en marcha y empezamos a crear sitios web.
Lección 3: Elementos y etiquetas
Ahora ya estás listo para aprender lo esencial de HTML: los elementos.
Los elementos proporcionan la estructura al documento HTML e indican al navegador cómo quieres que se presente tu sitio web. Por lo general, los elementos están formados por una etiqueta de inicio, el contenido, y una etiqueta de cierre.
"¿Etiquetas?"
Las etiquetas son marcas que se usan para señalar el inicio y el fin de un elemento.
Todas las etiquetas comparten el mismo formato: empiezan con el signo menor que "<" y terminan con el signo mayor que ">".
Por lo general, hay dos tipos de etiquetas: la etiquetas de inicio, por ejemplo, <html>, y las etiquetas de cierre, por ejemplo, </html>. La única diferencia entre la etiqueta de inicio y la de cierre es la barra oblicua "/". El contenido queda etiquetado al colocarlo entre una etiqueta de inicio y una etiqueta de cierre.
HTML trata esencialmente de elementos. Aprender HTML consiste en aprender a usar diferentes etiquetas.
¿Y si vemos algunos ejemplos?
Vale. El elemento em se usa para dar enfasis al texto. Todo el texto entre la etiqueta de inicio <em> y la etiqueta de cierre </em> aparecerá enfatizado en el navegador. {"em" es la abreviatura de "emphasis"}.
Ejemplo 1:
que se verá así en el navegador:
Los elementos h1, h2, h3, h4, h5 and h6 se utilizan para crear encabezados {"h" es la abreviatura de "heading"}, donde h1 representa el primer nivel y, normalmente, el texto más grande, h2 es el segundo nivel y, normalmente, es un texto algo más pequeño, y h6 es el sexto y último nivel en la jerarquía de los encabezados y es, normalmente, el texto más pequeño.
Ejemplo 2:
que se verá así en el navegador:
Así pues, ¿siempre son necesarias las etiqueta de inicio y de cierre?
Como se dice, siempre hay una excepción que confirma la regla, y en HTML la excepción son unos cuantos elementos que se abren y cierran con la misma etiqueta. Estos elementos que se denominan elementos vacíos no se asocian a un pasaje específico del texto sino que son más bien etiquetas aisladas; por ejemplo, un salto de línea tiene este formato: <br />.
¿Las etiquetas hay que escribirlas en mayúscula o en minúscula?
A la mayoría de los navegadores les da igual si se escriben en mayúscula, minúscula o una mezcla de las dos. <HTML>, <html> or <HtMl> normalmente tendrán el mismo resultado. Sin embargo, el modo correcto es escribir las etiquetas es en minúscula. Así que acostúmbrate a escribir las etiquetas en minúscula.
¿Y dónde coloco todas estas etiquetas?
Las etiquetas se escriben dentro de un documento HTML. Todo sitio web contiene uno o más documentos HTML. Cuando navegas por la web, no haces otra cosa que abrir diferentes documentos HTML.
Lección 4: Crea tu primer sitio web
¿Cómo?
En la leccion 1 vimos qué se necesita para crear un sitio web: un navegador y el Bloc de notas (o un editor de texto similar). Si estás leyendo esto, es porque tenes abierto el navegador. Lo único que necesitas es abrir otra ventana del navegador de forma que puedas seguir leyendo este post y veas cómo va quedando tu nuevo sitio web al mismo tiempo.
Abre también el Bloc de notas (que se encuentra en el menú de Inicio, Todos los programas, en la sección Accesorios):
Lo abrimos...
¿Y qué puedo hacer?
Empecemos con algo sencillo. Que te parece una página que diga: "¡Hurra! Esta es mi primera página web." Sigue leyendo y verás qué sencillo es.
HTML is sencillo y lógico. El navegador lee el código HTML igual que lo haces tú: de arriba abajo y de izquierda a derecha. Así pues, todo documento HTML empieza con lo que debería aparecer en primer lugar en la página y termina con lo que debería ir en último lugar.
Lo primero que tienes que hacer es decirle al navegador que le "hablarás" usando el lenguaje HTML. Esto se consigue con la etiqueta <html> (sin sorpresas, ¿no?). Así que antes de hacer cualquier otra cosa, escribe "<html>" en la primera línea del documento creado con el Bloc de notas.
Como recordarás de las lecciones anteriores, <html> es una etiqueta de inicio y tiene que cerrarse con su correspondiente etiqueta de cierre cuando hayas terminado de escribir el código HTML. Así que para no olvidar la etiqueta de cierre del elemento HTML escribe "</html>" un par de líneas más abajo, y entre ambas etiquetas <html> y </html> escribe el resto del documento.
Lo siguiente que necesita el documento es una "cabecera", que proporcionará información relativa a este mismo documento, y un "cuerpo" donde se incluirá el contenido del documento. Puesto que HTML es de lo más lógico, la cabecera {es decir, las etiquetas <head> y </head>;} se encuentra encima del cuerpo {o sea, encima de las etiquetas <body> y </body>;}.
El documento debería presentar ahora este aspecto:
Prestá atención a cómo he estructurado las etiquetas introduciendo nuevas líneas (usando la tecla Enter) al igual que hemos usado sangrado (utilizando la tecla Tab). Da lo mismo cómo estructures el documento HTML; sin embargo, para que te sirva de ayuda tanto para vos y como para otros a la hora de interpretar el código fuente, y con el fin tener una buena visión de conjunto, es recomendable estructurar el código HTML de una forma nítida, con saltos de línea y sangrados, como en el ejemplo anterior.
Si el documento se parece al del ejemplo anterior, ya has creado tu primer sitio web: un sitio web especialmente aburrido y en modo alguno parecido a lo que soñabas cuando empezaste a leer este post, pero, con todo y con eso, ya es algo que parece un sitio web. El código que acabas de crear te servirá como plantilla básica para todos tus futuros documentos HTML.
Hasta ahora todo va bien,toda la onda...pero ¿cómo añado contenido a mi sitio web?
Como aprendiste anteriormente, todo documento HTML tiene dos partes: un encabezado y un cuerpo. En la sección del encabezado se incluye información sobre la propia página, mientras que el cuerpo contiene la información que constituye la página en sí..
Por ejemplo, si quieres poner a la página un título que aparecerá en la barra de títulos del navegador, deberías hacerlo en la sección del encabezado, es decir dentro de las etiquetas "head". El elemento que se usa para el título es title, o sea, escribe el título de la página entre la etiqueta de inicio <title> y la etiqueta de cierre </title>:
Ten en cuenta que este título no aparecerá en la página en sí. Cualquier cosa que quieras que aparezca en la página es contenido y debe, por la tanto, añadirse entre las etiquetas <body> y </body>.
Como lo prometido es deuda, vamos a conseguir que la página nos diga: "¡Hurra! Este es mi primer sitio web." Este es el texto que queremos transmitir, y, por lo tanto, pertenece a la sección del cuerpo. Así pues, en la sección del cuerpo, escribe lo siguiente:
La p de <p> es la abreviatura de "párrafo", que es exactamente lo que es: un párrafo de texto.
El documento HTML debería tener ahora este aspecto:
¡Hecho! ¡Acabas de crear ahora mismo tu primer sitio web de verdad!
Lo siguiente que hay que hacer es guardarlo en el disco duro y luego abrirlo en el navegador:
En el Bloc de notas elige "Guardar como..." del menú "Archivo" en el menú principal.
Elige "Todos los archivos" en la caja "Tipo". Esto es muy importante, pues, de lo contrario, se guardará como documento de texto y no como un documento HTML.
Ahora guarda el documento como "pagina1.htm" (la terminación ".htm" indica que es un documento HTML; con la terminación ".html" se consigue el mismo resultado. Personalmente, siempre uso ".htm"; tú puedes elegir cualquiera de las dos extensiones, según prefieras). Da igual dónde guardes el documento en el disco duro, siempre que recuerdes dónde lo hiciste para poder recuperarlo con posterioridad.
Ahora pasamos al navegador:
En el menú principal elige "Abrir" del menú "Archivo" (CTRL+O)
Haz clic en el botón "Examinar" de la caja que aparece.
Ahora localiza el documento HTML y haz clic en "Abrir".
En el navegador debería poder leerse ahora: "¡Hurra! Este es mi primer sitio web."
Si estás deseando que todo el mundo vea tu obra maestra ya mismo, salta a la lección 13 y aprende cómo subir tus páginas a Internet. Si no es así, se paciente y sigue leyendo.
Lección 5: ¿Qué has aprendido hasta ahora?
Empieza siempre con la plantilla básica que creamos en la lección anterior:
En la sección del encabezado, incluye siempre un título: <title> El título de la página </title>. Fíjate cómo aparece el título en la esquina superior izquierda del navegador:
En la sección del cuerpo, se escribe el contenido propiamente dicho de la página. Ya conoces algunos de los elementos más importantes
Recuerda: el único modo de aprender HTML es utilizando el método de la prueba y el error. Pero no te preocupes, en modo alguno vas a destrozar tu ordenador o Internet. Así que sigue experimentando; es el mejor modo de adquirir experiencia.
¿Y esto qué se supone que significa?
Nadie se convierte en un buen desarrollador web sólo con aprender los ejemplos de este tutorial. Lo que este tutorial te proporciona son sencillamente unos conocimientos básicos de los elementos esenciales; para llegar a ser bueno tienes que usar estos elementos esenciales de formas nuevas y creativas.
Así pues, lánzate de lleno y empieza a volar por ti mismo... Vale, puede que áun no sea el momento. Pero, de todos modos, inténtalo y experimenta con lo que has aprendido.
¿Y ahora qué sigue?
Intenta crear unas cuantas páginas tú mismo. Por ejemplo, crea una página con un título, un encabezado, algo de texto, un encabezado de segundo nivel y algo más de texto.
Lección 6: Más elementos
¿Has conseguido crear algunas páginas vos solo? Si no pudistes,acá tenes un ejemplo:
¿Y ahora qué?
Bueno ha llegado el momento de aprender siete nuevos elementos...
Del mismo modo que enfatizamos el texto al incluirlo entre la etiqueta de inicio <em> y la etiqueta de cierre </em>, se puede acentuar más ese énfasis usando la etiqueta de inicio <strong> y la etiqueta de cierre </strong>.
Ejemplo 1:
y se verá así en el navegador:
Asimismo, puedes hacer que el texto sea más pequeño usando small:
Ejemplo 2:
y se visualizará así en el navegador
¿Puedo usar varios elementos a la misma vez?
Sí, se pueden usar fácilmente varios elementos a la vez siempre que evitemos elementos superpuestos. Esto lo entenderemos mejor con un ejemplo:
Ejemplo 3:
Si quieres que el texto aparezca enfatizado y más pequeño, se debe hacer de la siguiente manera:
y NO de la siguiente manera
La diferencia estriba en que, en el primer ejemplo, cerramos en último lugar el elemento que abrimos primero. De este modo evitamos confundir al navegador y a nosotros mismos.
¡Más elementos!
Como mencioné en la lección 3, existen una serie de elementos que se abren y cierran con la misma etiqueta. Estos elementos conocidos como elementos vacíos no están relacionados con un pasaje específico del texto sino que son más bien etiquetas aisladas. Un ejemplo de dichas etiquetas es <br /> que crea un salto de línea forzado.
Ejemplo 4:
que se visualizará así en el navegador:
Fíjate en que la etiqueta parece una forma contraída de la etiqueta de inicio y de la etiqueta de cierre con un espacio en blanco y una barra al final: <br />.
Otro elemento que se abre y cierra con la misma etiqueta es <hr />, que se usa para trazar una línea horizontal {"hr" es la abreviatura de "horizontal rule"}:
Ejemplo 5:
que se verá así en el navegador:
Otros ejemplos de elementos que necesitan tanto la etiqueta de inicio como de cierre -la mayoría de elementos cumplen esta norma- son: ul, ol y li. Estos tres elementos se usan para crear listas.
Ul es la forma abreviada de "unordered list" (es decir, lista no ordenada) e inserta viñetas para cada elemento. Ol es la abreviatura de "ordered list" (es decir, lista ordenada) y numera cada elemento de la lista. Para crear elementos de lista use la etiqueta Li ("list item", o sea, elemento de lista). Parece algo confuso, Miren, entonces, algunos ejemplos:
Ejemplo 7:
que se verá así en el navegador:
Ejemplo 8:
que se visualizará así en el navegador:
¿Eso es todo?
De momento, sí. Una vez más, experimenta y crea tus propias páginas usando alguno de los siete nuevos elementos que acabas de aprender en esta lección:
Lección 7: Atributos
Es posible añadir atributos a determinados elementos.
¿Y qué es un atributo?
Como recordarás, los elementos sirven para estructurar el contenido de todo el documento HTML e indican al navegador cómo debería presentarse el sitio web (por ejemplo, <br /> informa al navegador para que introduzca un salto de línea). En algunos elementos se puede añadir más información. Esa información extra se denomina atributo.
Ejemplo 1:
Los atributos se incluyen siempre dentro de la etiqueta de inicio y llevan inmediatamente detrás el signo de igual {" = "} con los valores de dichos atributos entre comillas { " " }. El punto y coma que sigue al atributo se usa para separar los diferentes comandos de estilo. Más adelante volveremos a tratar sobre este tema.
¿Cuál es la pega?
Existen muchos atributos diferentes. El primero que vas a aprender es style. Con el atributo style se puede añadir efectos de presentación a tu sitio web. Por ejemplo, un color de fondo:
Ejemplo 2:
El código anterior mostrara un página con fondo rojo en el navegador; adelante, pruébalo tú mismo. En unos minutos explicaré con más detalle cómo funciona el sistema de colores en HTML.
Ten en cuenta que algunas etiquetas y atributos usan ortografía estadounidense, es decir, "color" en vez de "colour". Es importante que utilices la misma ortografía que uso en los ejemplos de este post; de otro modo, los navegadores no serán capaces de interpretar el código. Además, no olvides cerrar siempre las comillas detrás del atributo.
¿Qué ocurrió para que la página apareciera en color rojo?
En el ejemplo anterior, hicimos referencia al color de fondo usando el código "#ff0000". Este es el código de color para el rojo en el sistema numérico hexadecimal (HEX). Cada color tiene su propio número hexadecimal.. Y estos son algunos ejemplos:
Blanco: #ffffff
Negro: #000000 (ceros)
Rojo: #ff0000
Azul: #0000ff
Verde: #00ff00
Amarillo: #ffff00
El código de color hexadecimal se compone de una almohadilla, "#", y seis dígitos (del 0 al 9) o letras (de la A a la F). Existen más de 1.000 códigos hexadecimales y no es fácil calcular qué código hexadecimal corresponde a un color específico. Para facilitar las cosas hemos preparado una tabla con los 216 colores más usados:
También se pueden usar los nombres en inglés para los colores más comunues (white: blanco, black: negro, red: rojo, blue: azul, green: verde y yellow: amarillo).
Ejemplo 3:
Listo el tema de los colores. Volvamos a los atributos.
¿Qué elementos pueden usar atributos?
Son varios los atributos diferentes que se pueden aplicar a la mayoría de los elementos.
Por ejemplo, usarás con frecuencia atributos en la etiqueta body, mientras que, por ejemplo, raras veces usarás atributos en la etiqueta br, ya que un salto de línea es un salto de línea que no tiene parametros que ajustar.
Al igual que existen muchos elementos, existen también muchos y diferentes atributos. Algunos atributos están hechos a la medida para un elemento concreto, mientras que otros se pueden usar para muchos elementos diferentes. Y viceversa: algunos elementos sólo pueden contener un tipo de atributo mientras otros pueden contener muchos.
Puede sonar algo confuso, pero una vez que te acostumbres a los diferentes atributos, es en realidad de lo más lógico y pronto verás qué fácil es usarlos y cuántas posibilidades brindan.
Este tutorial te presentará los atributos más importantes.
¿Y de qué partes se compone exactamente un elemento?
Por lo general, todo elemento se compone de una etiqueta de inicio, sin atributos o con uno o más atributos, el contenido correspondiente y una etiqueta de cierre. Así de sencillo. Observa la imagen inferior.
FIN DEL POST! CONTINUA EN LA SEGUNDA PARTE