HTML

HyperText Markup Language

Historia de HTML

Orígenes

Creado por Tim Berners-Lee en 1991 en el CERN.

Evolución

HTML 1.0 (1993) - Primer estándar
HTML 2.0 (1995) - Formularios y tablas
HTML 3.2 (1997) - Soporte para estilos en línea
HTML 4.0 (1999) - Separación entre HTML y CSS
HTML5 (2014 - Actualidad) - Semántico y multimedia

Definición y Estructura de HTML

¿Cómo está estructurado un documento HTML?

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página</title>
</head>
<body>
    <h1>Hola, mundo!</h1>
    <p>Bienvenido a mi página web.</p>
</body>
</html>

Elementos de HTML

Elementos de bloque: <div>, <p>, <h1>-<h6>, <section>, <article>
Elementos en línea: <span>, <a>, <strong>, <em>, <img>

HTML Semántico

¿Qué es HTML semántico?

Uso de etiquetas que describen el contenido de la página.

Ejemplo

<header>
    <nav>Menú</nav>
</header>
<main>
    <section>Contenido principal</section>
</main>

Etiquetas Básicas

Encabezados y Párrafos

<h1>Título Principal</h1>
<p>Este es un párrafo de texto.</p>

Imágenes

<img src="imagen.jpg" alt="Descripción de la imagen">

Enlaces

<a href="pagina.html">Ir a otra página</a>

Listas

<ul>
    <li>Elemento 1</li>
    <li>Elemento 2</li>
</ul>

Tablas en HTML

Ejemplo de tabla básica:


<table>
    <tr>
        <th>Producto</th>
        <th>Precio</th>
    </tr>
    <tr>
        <td>Manzana</td>
        <td>$1.00</td>
    </tr>
</table>

Uso de thead, tbody y tfoot


<table>
    <thead>
        <tr>
            <th>Producto</th>
            <th>Precio</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Manzana</td>
            <td>$1.00</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>Total</td>
            <td>$1.00</td>
        </tr>
    </tfoot>
</table>

Formularios

Ejemplo de formulario:


<form>
    <label>Nombre: <input type="text" name="nombre" required></label><br>
    <label>Email: <input type="email" name="email"></label><br>
    <label>Fecha de nacimiento: <input type="date" name="nacimiento"></label><br>
    <input type="submit" value="Enviar">
</form>

Listas y Menús

Ejemplo de lista anidada:


<ul>
    <li>Frutas
        <ul>
            <li>Manzana</li>
            <li>Banana</li>
        </ul>
    </li>
</ul>

Paths Absolutos vs Relativos

Diferencias entre rutas absolutas y relativas

Ruta Absoluta: Contiene la ubicación completa del archivo.

<img src="C:/Users/Usuario/Desktop/imagen.jpg">

Ruta Relativa: Ubicación basada en la estructura del proyecto.

<img src="imagenes/imagen.jpg">

Errores comunes con rutas absolutas

❌ Error común:

<img src="C:/Users/Usuario/Desktop/imagen.jpg">

⚠ Este enlace solo funciona en la computadora del usuario, no en un servidor.

✅ Solución: Usar rutas relativas

<img src="/assets/images/logo.png">

Tipos de rutas relativas

Tipo de Ruta	Ejemplo
Mismo directorio	`href="index.html"`
Un nivel arriba	`href="../archivo.html"`
Desde la raíz	`href="/imagenes/logo.png"`

Links Simbólicos en Linux y Servidores

¿Qué es un link simbólico?

Un link simbólico es un atajo que apunta a otro archivo o carpeta.

Permite trabajar en cualquier carpeta sin mover archivos al root del servidor.

Ejemplo de link simbólico en un servidor local

Crear un link simbólico en Linux/macOS:

ln -s /var/www/html/mis_proyectos ~/mis_proyectos

Ahora puedes trabajar en ~/mis_proyectos en lugar de en /var/www/html.

Beneficios de los links simbólicos

Permite desarrollar en tu carpeta habitual sin copiar archivos manualmente al servidor.
Evita modificar la configuración del servidor innecesariamente.
Facilita el trabajo en equipo sin alterar la estructura del servidor.

Mejores Prácticas

Evitar rutas absolutas locales.
Usar etiquetas semánticas en lugar de <div>.

Conclusión

HTML es la base de cualquier página web.
HTML semántico mejora accesibilidad y SEO.
Usar rutas relativas evita errores comunes.