Editores de Código para HTML

Para escribir y desarrollar HTML no necesitas herramientas complejas ni de pago. Un simple editor de texto plano es suficiente, aunque existen editores especializados que facilitan la escritura mediante auto-completado y resaltado de sintaxis.

Editores Gratuitos Recomendados:

• Visual Studio Code (VS Code): El estándar de la industria desarrollado por Microsoft. Cuenta con extensiones muy útiles como Live Server.
• Notepad++: Una opción ligera, rápida y fácil de usar para entornos Windows.
• Sublime Text: Un editor liviano, elegante y con un excelente rendimiento.

Elementos Básicos de HTML

Un elemento HTML se compone de una etiqueta de apertura, el contenido que se desea mostrar y una etiqueta de cierre.

<etiqueta>Contenido aquí...</etiqueta>

Encabezados en HTML

Los encabezados permiten definir títulos y subtítulos dentro de la página. Sirven para organizar jerárquicamente la información tanto para el usuario como para los motores de búsqueda (SEO).

Existen 6 niveles de encabezados, marcados desde el <h1> (más importante) hasta el <h6> (menos importante).

Párrafos y Formato de Texto

El elemento <p> se utiliza para definir párrafos de texto. Los navegadores añaden automáticamente un margen antes y después de cada párrafo.

Etiquetas Principales de Formato:

• <strong> o <b>: Texto en negrita.
• <em> o <i>: Texto en cursiva / itálica.
• <mark>: Texto resaltado.
• <br>: Inserta un salto de línea (etiqueta sin cierre).
• <hr>: Crea una línea horizontal de separación temática.

Atributos en HTML

Los atributos proporcionan información o configuración adicional sobre los elementos HTML. Se colocan siempre dentro de la etiqueta de apertura y generalmente vienen en pares de clave/valor (nombre="valor").

Atributos más comunes:

• href: Utilizado en enlaces para definir la URL de destino.
• src: Utilizado en imágenes y scripts para definir la ruta del archivo.
• alt: Proporciona un texto alternativo si la imagen no se carga o para lectores de pantalla.
• class y id: Permiten identificar elementos para aplicarles estilos CSS o scripts JavaScript.

Imágenes en HTML

Las imágenes se incrustan en la página mediante la etiqueta vacía <img>. Requiere principalmente dos atributos: src (ruta de la imagen) y alt (texto alternativo).

Enlaces o Hipervínculos

Los enlaces se crean utilizando la etiqueta <a> (anchor). El atributo href especifica la dirección web de la página a la que te redirigirá.

Tablas en HTML

Las tablas permiten organizar y estructurar datos en filas y columnas de forma clara y accesible.

Etiquetas fundamentales para crear tablas:

• <table>: Contenedor principal de la tabla.
• <tr> (Table Row): Define una fila.
• <th> (Table Header): Celda de encabezado (texto en negrita y centrado).
• <td> (Table Data): Celda de contenido normal.

Listas en HTML

HTML ofrece dos tipos principales de listas para agrupar elementos ordenados o desordenados.

1. Listas Desordenadas (Unordered List - <ul>)

Muestran los elementos con viñetas o puntos.

2. Listas Ordenadas (Ordered List - <ol>)

Muestran los elementos numerados o con secuencias alfabéticas.

Formularios en HTML

Los formularios capturan información que introduce el usuario (datos personales, mensajes, credenciales) y los envían a un servidor para procesarlos.

Componentes comunes:

• <form>: El contenedor general del formulario.
• <input>: Campo de entrada de datos (puede ser texto, contraseña, fecha, checkbox, etc.).
• <textarea>: Campo para textos largos (comentarios o mensajes).
• <select>: Desplegable de opciones.
• <button>: Botón de envío.

Ejercicios de Autoevaluación de HTML

Comprueba tus conocimientos respondiendo las preguntas a continuación:

Introducción a CSS

CSS (Cascading Style Sheets / Hojas de Estilo en Cascada) es el lenguaje utilizado para controlar el aspecto visual, colores, tipografías y la disposición general de las páginas web escritas en HTML.

Mientras que HTML define la **estructura** (esqueleto), CSS otorga la **apariencia visual** (diseño, colores, animaciones).

Sintaxis de CSS

Una regla CSS está formada por un **Selector** y un **Bloque de Declaraciones** encerrado entre llaves {}.

Selectores en CSS

Los selectores determinan a qué elementos HTML específicos se les aplicarán los estilos.

Los 3 Selectores Básicos:

• Selector de Elemento / Etiqueta: Selecciona todos los elementos por su nombre de etiqueta (ej: h1, p, button).
• Selector de Clase (.): Selecciona elementos que tienen un atributo class en particular. Se escribe con un punto inicial (ej: .mi-clase).
• Selector de ID (#): Selecciona un único elemento mediante su atributo id. Se escribe con un numeral inicial (ej: #mi-encabezado).

3 Formas de Añadir CSS a un Documento

1. CSS Externo (Recomendado)

Los estilos se escriben en un archivo .css separado y se enlazan mediante la etiqueta <link> dentro del <head>.

2. CSS Interno

Se colocan los estilos dentro de una etiqueta <style> dentro de la sección <head> de la página HTML.

3. CSS En Línea (In-line)

Se asigna directamente en el atributo style del elemento HTML correspondiente.

Colores y Fondos en CSS

CSS permite aplicar colores mediante nombres, códigos Hexadecimales (ej: #ff0000) o formato RGB (ej: rgb(255, 0, 0)).

El Modelo de Caja en CSS (Box Model)

Todos los elementos HTML se consideran cajas rectangulares. El modelo de caja define las dimensiones y los espacios que ocupa cada elemento.

• Content: El texto, imagen u objeto real.
• Padding: Espacio libre alrededor del contenido (dentro del borde).
• Border: Borde que rodea el padding y el contenido.
• Margin: Espacio exterior libre que separa este elemento de los demás.

Introducción a Flexbox

Flexbox (Módulo de Caja Flexible) es una herramienta de CSS3 diseñada para alinear, distribuir y organizar elementos en contenedores de forma responsiva y sencilla.

Ejercicios de Autoevaluación de CSS

Evalúa tus avances en el aprendizaje de CSS:

⚡ Compilador / Editor de Código en Vivo

Modifica el código fuente en la caja izquierda y presiona el botón verde para ejecutar y observar el resultado renderizado en tiempo real a la derecha: