Estructura Básica de HTML

HTML (HyperText Markup Language) es el lenguaje estándar para crear páginas web. No es un lenguaje de programación, sino de marcado.

Elementos principales:

<!DOCTYPE html>: Declara que es un documento HTML5
<html>: Elemento raíz que contiene todo el documento
<head>: Contiene metadatos y enlaces a recursos
<body>: Contiene el contenido visible de la página

Ejemplo básico:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi Página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <p>Mi primera página web.</p>
</body>
</html>

Elementos de Texto

Encabezados:

Los encabezados van desde <h1> (más importante) hasta <h6> (menos importante).

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5

Encabezado 6

Párrafos y formato:

Este es un párrafo normal.

Este texto está en negrita.

Este texto está en cursiva.

Este texto está subrayado.

Texto con _subíndice y ^superíndice.

Listas

Lista no ordenada (con viñetas):

Elemento 1
Elemento 2
Elemento 3

Lista ordenada (numerada):

Primer elemento
Segundo elemento
Tercer elemento

Listas anidadas:

Elemento principal 1
1. Subelemento 1
2. Subelemento 2
Elemento principal 2

Enlaces (Hipervínculos)

Los enlaces se crean con la etiqueta <a> y el atributo href:

Tipos de enlaces:

Enlace con imagen:

Imágenes

Las imágenes se insertan con la etiqueta <img>:

Atributos importantes:

src: Ruta de la imagen
alt: Texto alternativo (accesibilidad)
width/height: Tamaño de la imagen

Ejemplo:

Nota: Esta es una imagen de placeholder. En un proyecto real, usarías tus propias imágenes.

Tablas

Las tablas se crean con las etiquetas <table>, <tr> (fila), <th> (encabezado) y <td> (celda).

Ejemplo básico:

Nombre	Edad	Ciudad
Juan Pérez	30	Madrid
María Gómez	25	Barcelona
Carlos Ruiz	35	Valencia

Tabla con celdas combinadas:

Información Personal		Contacto
Nombre	Juan Pérez	juan@example.com 555-1234
Edad	30	juan@example.com 555-1234

Formularios

Los formularios permiten recopilar datos del usuario. Se crean con la etiqueta <form>.

Elementos básicos:

Nombre completo: Correo electrónico: Contraseña: Edad: País: Comentarios: Acepto los términos y condiciones

Género: Hombre Mujer Otro

Atributos importantes:

action: URL donde se enviarán los datos
method: GET (datos visibles en URL) o POST (datos ocultos)
required: Campo obligatorio
placeholder: Texto de ayuda
min/max: Valores mínimos/máximos

Multimedia

Vídeo:

Audio:

Iframe (contenido incrustado):

Elementos Semánticos

HTML5 introdujo elementos semánticos que describen mejor su contenido:

<header>: Encabezado de la página o sección
<nav>: Barra de navegación
<main>: Contenido principal
<section>: Sección temática
<article>: Contenido independiente
<aside>: Contenido relacionado indirectamente
<footer>: Pie de página o sección

Ejemplo de estructura semántica:

<body>
    <header>
        <h1>Título del sitio</h1>
        <nav>...</nav>
    </header>
    
    <main>
        <article>
            <h2>Artículo principal</h2>
            <p>Contenido...</p>
        </article>
        
        <aside>
            <h3>Información relacionada</h3>
            <p>Contenido secundario...</p>
        </aside>
    </main>
    
    <footer>
        <p>Derechos reservados © 2023</p>
    </footer>
</body>

CSS (Cascading Style Sheets)

CSS se usa para dar estilo y diseño a las páginas web.

Formas de aplicar CSS:

Inline (en línea): Usando el atributo style en elementos HTML
Ejemplo de texto con estilo en línea.
Interno: Usando la etiqueta <style> en el <head> (como en este documento)
Externo: En un archivo .css separado (recomendado para proyectos grandes)

Selectores CSS:

Por elemento: p { color: blue; }
Por clase: .clase { font-weight: bold; }
Por ID: #id { background: yellow; }
Por atributo: input[type="text"] { border: 1px solid #ccc; }

Modelo de caja:

Este es un ejemplo del modelo de caja con margin, border y padding.

Flexbox:

Flexbox es un modelo de diseño que facilita la distribución de elementos.

Elemento 1

Elemento 2

Elemento 3

Diseño responsivo:

Usando media queries podemos adaptar el diseño a diferentes tamaños de pantalla.

@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }
    
    h1 {
        font-size: 2em;
    }
}

Comentarios y Atributos

Comentarios en HTML:

Los comentarios en HTML no se muestran en el navegador pero ayudan a documentar el código.

<!-- Este es un comentario en HTML -->

Comentarios en CSS:

/* Este es un comentario en CSS */

Atributos globales:

id: Identificador único para un elemento
class: Clase para agrupar elementos con estilos similares
style: Estilos CSS en línea
title: Información adicional que aparece al pasar el mouse

Atributos de eventos:

<button onclick="alert('¡Hola!')">Botón</button>

Estructura Básica de HTML

Elementos principales:

Ejemplo básico:

Elementos de Texto

Encabezados:

Encabezado 1

Encabezado 2

Encabezado 3

Encabezado 4

Encabezado 5

Encabezado 6

Párrafos y formato:

Listas

Lista no ordenada (con viñetas):

Lista ordenada (numerada):

Listas anidadas:

Enlaces (Hipervínculos)

Tipos de enlaces:

Enlace con imagen:

Imágenes

Atributos importantes:

Ejemplo:

Tablas

Ejemplo básico:

Tabla con celdas combinadas:

Formularios

Elementos básicos:

Atributos importantes:

Multimedia

Vídeo:

Audio:

Iframe (contenido incrustado):

Elementos Semánticos

Ejemplo de estructura semántica:

CSS (Cascading Style Sheets)

Formas de aplicar CSS:

Selectores CSS:

Modelo de caja:

Flexbox:

Diseño responsivo:

Comentarios y Atributos

Comentarios en HTML:

Comentarios en CSS:

Atributos globales:

Atributos de eventos:

Recursos y Bibliografía

Recursos recomendados:

Sección Local (Ancla)