Tutorial HTML

TUTORIAL HTML - TABLA DE CONTENIDOS

TUTORIAL HTML

TABLA DE CONTENIDO

• Introducción

Breve introducción y qué aprenderás usando este tutorial.

• Lección 1: ¡Nos ponemos en marcha!

Descubre qué herramientas necesitas para crear tu propio sitio web.

• Lección 2: ¿Qué es HTML?

Comprende qué es HTML y qué significa.

• Lección 3: ¿Elementos y etiquetas?

Qué son los elementos y las etiquetas y para qué se usan.

• Lección 4: Crea tu primer sitio web

Aprende a crear tu primer documento HTML; crea la plantilla básica para futuras páginas.

• Lección 5: ¿Qué has aprendido hasta ahora?

Resumen de lo aprendido hasta ahora y descubre qué aprenderás en las siguientes lecciones.

• Lección 6: Más elementos

Familiarízate con siete de los elementos más usados.

• Lección 7: Atributos

Aprende a añadir información adicional a las etiquetas y formula comandos de un modo más claro.

• Lección 8: Enlaces

Descubre cómo crear enlaces internos a tus propias páginas y externos a otras páginas de Internet.

• Lección 9: Imágenes

Descubre lo sencillo y fácil que es insertar imágenes en tus páginas.

• Lección 10: Tablas

Construye tablas con HTML para presentar contenido estructurado.

• Lección 11: ... y más tablas

Crea tablas aún más sofisticadas.

• Lección 12: Presentación (CSS)

Comprende cómo se usan las Hojas de Estilo en Cascada (CSS) para añadir una presentación de fantasía a tus páginas.

• Lección 13: Sube tus páginas a Internet

Descubre cómo publicar tus páginas en Internet para que otros también puedan disfrutarlas.

• Lección 14: Estándares web y validación

Aprende sobre el estándar común de HTML y cómo comprobar que el código escrito es correcto.

• Lección 15: Últimos consejos

Unos cuantos consejos a tener en cuenta al crear tus proyectos de web.

INTRODUCCIÓN - TUTORIAL HTML GRATUITO

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 tutorial es proporcionarte una introducción fácil, pero al mismo tiempo completa y correcta sobre cómo crear sitios web. Este tutorial empieza de cero y no es necesario, en absoluto, tener conocimientos previos sobre programación.

Este tutorial 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 tutorial depende de ti. Te sugerimos, 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.

Bien, ya vale de chachara. ¡Nos ponemos en marcha!

LECCIÓN 1: ¡NOS PONEMOS EN MARCHA!

En esta primera lección te presentaremos 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 esta página en el navegador.

No importa qué navegador uses. El más habitual es Microsoft Internet Explorer, pero existen otros como Opera y Mozilla 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 sencillo editor de texto. Si utilizas Windows puedes usar el Bloc de notas, que se encuentra normalmente pinchando 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 enojoso, 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 tutorial y aprender a crear tus propios sitios web.

¿ES NECESARIO ESTAR CONECTADO A INTERNET?

No es necesario conectarse a Internet, ni cuando estés leyendo este tutorial ni al crear tus sitios web.

Si quieres evitar tener que conectarte mientras lees este tutorial, o bien puedes imprimirlo o desconectarte de Internet mientras lo lees en la pantalla; para crear el sitio web puedes hacerlo en el disco duro de tu ordenador y subirlo después a Internet una vez terminado.

¿Y AHORA QUÉ SIGUE?

Pasa a la siguiente lección y lee algo de información relativa a HTML antes de empezar con la diversión en la lección 3.

LECCIÓN 2: ¿QUÉ ES HTML?

En esta lección haremos una breve presentación de tu nuevo amigo: 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" (en Internet Explorer).

Para el ojo inexperto, el código HTML parece complicado, pero este tutorial 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 sencillo!

VALE, PERO... ¿QUÉ REPRESENTAN 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 animalillo 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 tutorial 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

...