Teoría General de HTML
Conceptos fundamentales del lenguaje de marcado
HTML (HyperText Markup Language) es el estándar para crear páginas web. Define la estructura del contenido mediante etiquetas (tags).
Estructura Básica y Etiquetas de Texto
<!DOCTYPE html>
Indica al navegador que el documento es HTML5.
<br>
Salto de línea simple dentro de un texto.
Encabezados (Headings)
<h1>Título Principal</h1>
<h2>Subtítulo Nivel 2</h2>
...
<h6>Subtítulo Nivel 6</h6>
<h2>Subtítulo Nivel 2</h2>
...
<h6>Subtítulo Nivel 6</h6>
Párrafos (<p>) y Texto Preformateado (<pre>)
El tag <p> define párrafos de texto estándar.
Ejemplo de
<pre>: Mantiene espacios y saltos de línea exactamente como se escriben en el código.
Aquí hay muchos espacios y un salto de línea.
Enlaces e Imágenes
El tag de Hipervínculo (<a>)
Permite conectar páginas. Atributo clave: href (destino).
Tipos de enlace:
- Enlace externo:
<a href="https://www.w3schools.com" target="_blank">(Abre en pestaña nueva). - Enlace interno:
<a href="html.html">. - Ancla:
<a href="#ejercicios">(Salta a una sección dentro de esta página).
Inserción de Imágenes (<img>)
Etiqueta vacía (no requiere cierre). Atributos obligatorios: src (ruta) y alt (texto descriptivo).
<img src="img/AC1.png" alt="Icono de HTML" width="100">
Organización: Listas y Tablas
Lista Desordenada (<ul>)
- Item 1 (
<li>) - Item 2
Lista Ordenada (<ol>)
- Primer elemento
- Segundo elemento
Tablas (<table>)
Estructura: <tr> (fila), <th> (encabezado celda), <td> (celda de datos).
| Etiqueta | Atributos Comunes |
|---|---|
| <table></table> | width, border (obsoletos, usar CSS) |
| <tr></tr> | align, valign (obsoletos, usar CSS) |
| <td> / <th> | colspan (unir columnas), rowspan (unir filas) |
Atributos Clave
Los atributos proporcionan información adicional sobre los elementos.
| Atributo | Descripción y Uso Común |
|---|---|
class / id |
Identificadores para aplicar estilos CSS o Javascript. (`id` debe ser único). |
style |
CSS directo al elemento (evitar si es posible). |
title |
Texto emergente al pasar el ratón (tooltip). |
align |
OBSOLETO Alineación (left, center, right). Usar CSS. |
color / bgcolor |
OBSOLETO Color de texto o fondo. Usar CSS. |
Actividades Propuestas
Utiliza el editor de texto y lo aprendido en esta sección para realizar los siguientes ejercicios prácticos:
- Crear una página básica con imágenes, colores y texto de muestra.
- Crear una lista desordenada y otra ordenada anidadas.
- Maquetar una tabla compleja (unir columnas y filas) similar al horario del curso.
- Generar una web basada en imágenes con hipervínculos cruzados entre ellas.