En su corazón, HTML es un lenguaje muy sencillo compuesto de elementos, que pueden ser aplicados a piezas de texto para darles un significado diferente en un documento (¿Esto es un párrafo? ¿Esto es una lista con viñetas? ¿Esto es parte de una tabla?), estructura un documento en secciones lógicas (¿Tiene una cabecera? ¿Tres columnas de contenido? ¿Un menú de navegación?) e incrusta contenido como imágenes y vídeos en una página. Este módulo introducirá los dos primeros de estos, e introduce conceptos fundamentales y la sintaxis que necesitas para entender HTML.
Requisitos previos
Antes de empezar este módulo, no necesitas conocimientos previos de HTML, pero deberías estar, al menos, familiarizado con el uso básico de computadoras, y usar la Web pasivamente (i.e. sólo revisándolo, consumiendo el contenido). Deberías tener un entorno de trabajo básico establecido como se detalla en Instalación de software básico, y entender cómo crear y gestionar archivos, como se detalla en Manejando los archivos — ambas son partes de nuestro módulo para principiantes Primeros pasos en la Web.
Nota: Si estás trabajando en una computadora, tablet u otro dispositivo en donde no tengas la capacidad de crear tus propios archivos, podrías probar (en su mayoría) los códigos de ejemplo en un programa para escribir código en línea como JSBin o Thimble.
Guías
Este módulo contiene los siguientes artículos, que te llevarán a través de toda la teoría básica de HTML, y te proporcionarán una amplia oportunidad de probar algunas habilidades.
- Empezar con HTML
- Cubre las bases absolutas de HTML, para que puedas empezar — definimos elementos, atributos, y todas los otros términos importantes que puedes haber escuchado, y en donde encajan en el lenguaje. También mostramos cómo un elemento HTML está estructurado, cómo está estructurada una página HTML típica, y explica otras características importantes. En el camino, vamos a tener un juego con algo de HTML ¡Para que te intereses!
- ¿Qué hay en la cabecera? Metadatos en HTML
- La cabecera de un documento HTML es la parte que no se muestra en el navegador web cuando se carga una página. Esta contiene información como el título (
<title>) de la página, enlaces a CSS (si quieres estilizar tu contenido HTML con CSS), enlaces a favicons personalizados, y metadatos (que son los datos sobre el HTML, como quién lo escribió, y palabras clave que describen el documento). - Fundamentos de texto HTML
- Uno de los principales trabajos de HTML es darle significado al texto (también conocido como semántica) para que el navegador sepa cómo mostrarlo correctamente. Este artículo trata cómo usar HTML para convertir un bloque de texto en una estructura de encabezados y párrafos, agregar énfasis o importancia a las palabras, crear listas y más.
- Creando hipervínculos
- Los hipervínculos son realmente importantes — estos son los que hacen la Web. Este artículo muestra la sintaxis requerida para hacer un enlace, y discute las mejores prácticas sobre enlaces.
- Formateo de texto avanzado
- Hay muchos otros elementos en HTML para formatear texto, que no hemos tratado en los artículos fundamentos de texto HTML. Los elementos aquí son menos conocidos, pero siguen siendo útiles conocer. Aquí aprenderás sobre el marcado de citas, listas de descripción, código de computadoras y otros textos relacionados, subíndices y superíndices, información de contacto, y mucho más.
- Estructura web y documentación
- Así como definimos las partes individuales de tu página (como "un párrafo" o "una imagen"), HTML también es usado para definir las áreas de tu sitio web (como "la cabecera", "el menú de navegación", "la columna de contenido principal"). Este artículo trata sobre cómo planear una estructura básica del sitio web, y escribir el HTML para representar esta estructura.
- Depurar el HTML
- Escribir HTML está bien, pero ¿Qué pasa si algo está mal, y no puedes encontrar en dónde está el error en el código? Este artículo introducirá algunas herramientas que te podrán ayudar.
Evaluaciones
Las siguientes evaluaciones probarán tu entendimiento de las bases de HTML cubiertas en las guías anteriores.
- Marcando una carta
- Todos aprendemos a escribir una carta, tarde o temprano; ¡Este también es un ejemplo útil para poner a prueba nuestras habilidades de formato de texto! Así que en esta evaluación se te dará una carta a la cual le tendrás que dar un marcado HTML.
- Estructuración de una página de contenido
- Esta evaluación prueba tu capacidad para usar HTML para estructurar una simple página de contenido, conteniendo una cabecera, pie de página, menú de navegación, contenido principal, y una barra lateral.
Ver también
- Bases de la alfabetización Web 1
- Un curso excelente de la fundación Mozilla que explora y pone a prueba muchas de las habilidades sobre las cuales hablamos en el módulo de Introducción a HTML. Los estudiantes se familiarizan con la lectura, escritura y participan de la web en este módulo de seis partes. Descubre los fundamentos de la web a través de la producción y colaboración.