Guía Básica de HTML - Irene-Frias/1DAM GitHub Wiki

📝 Guía Básica de HTML

HTML (HyperText Markup Language) es el lenguaje estándar para la creación de páginas web. Es un lenguaje de marcado que estructura el contenido y lo presenta de forma que los navegadores puedan mostrarlo correctamente. Aquí te dejamos una guía rápida de los aspectos más importantes que debes saber sobre HTML para comenzar a crear sitios web.

🌍 ¿Qué es HTML?

HTML es un lenguaje de marcado utilizado para estructurar y organizar el contenido de una página web. Utiliza etiquetas (también llamadas "elementos") para definir diferentes partes de la página, como encabezados, párrafos, listas, enlaces, imágenes, formularios y mucho más.

Características principales de HTML:

  • Lenguaje de marcado: Utiliza etiquetas para dar estructura al contenido.
  • Jerárquico: Los elementos HTML pueden estar anidados dentro de otros elementos.
  • No es un lenguaje de programación: HTML solo define la estructura, no tiene lógica o interactividad por sí mismo (para eso usamos JavaScript).
  • Multimedia: Permite incluir imágenes, videos, audio y otros tipos de medios.

🧩 Estructura Básica de un Documento HTML

Un documento HTML típico se estructura de la siguiente manera:

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta lang="es">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="width-device-view-port">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style/style.css">
    <title>Título de la Página</title>
  </head>
  <body>
    <header>
      <h1>Bienvenidos a mi sitio web</h1>
    </header>
    <main>
      <p>Contenido principal de la página.</p>
    </main>
    <footer>
      <p>&copy; 2024 Mi Sitio Web</p>
    </footer>
  </body>
</html>

🧩 Componentes Clave

  1. <!DOCTYPE html>
    Indica que el documento es HTML5.

  2. <html>
    Contenedor principal del documento HTML.

  3. <head>
    Contiene metadatos, enlaces a hojas de estilo, scripts, y el título de la página.

  4. <body>
    Contiene el contenido visible de la página web, como textos, imágenes, enlaces, etc.

  5. <title>
    Define el título que aparecerá en la pestaña del navegador.

🖋 Etiquetas y Elementos Comunes

1. Encabezados (<h1>, <h2>, ..., <h6>)

Los encabezados son utilizados para estructurar el contenido y organizarlo en secciones jerárquicas. <h1> es el encabezado principal y <h6> el menor.

  • Ejemplo:

    <h1>Este es un encabezado principal</h1>

2. Párrafos (<p>)

Los párrafos se usan para agrupar texto.

  • Ejemplo:

    <p>Este es un párrafo de texto.</p>

3. Enlaces (<a>)

Los enlaces se utilizan para navegar entre páginas o sitios web. El atributo href especifica la URL del destino.

  • Ejemplo:

    <a href="https://www.example.com">Visita nuestro sitio</a>

4. Imágenes (<img>)

La etiqueta <img> se usa para insertar imágenes. El atributo src especifica la ubicación del archivo de imagen, y alt proporciona un texto alternativo.

  • Ejemplo:

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

5. Listas (<ul>, <ol>, <li>)

HTML soporta listas ordenadas (<ol>) y no ordenadas (<ul>). Los elementos de la lista se definen con <li>.

  • Ejemplo:

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

6. Tablas (<table>, <tr>, <td>, <th>)

Para organizar datos en formato tabular. Se crean con datos organizados <table> a través de los siguientes:

  • th: Para el encabezado de la tabla.
  • tr: Para las filas.
  • td: Para las celdas.

    • Ejemplo:

      <table>
    Nombre Edad Juan 25
```

Atributos que tiene la tabla:

  • colspan: Permite que una celda se extienda horizontalmente sobre varias columnas. Se usa comúnmente en celdas de encabezado para crear títulos de sección.

    • Ejemplo: Si quieres que una celda abarque 3 columnas, usas colspan="3" en la etiqueta de la celda (<td> o <th>).
    <table>
  <tr>
    <th colspan="3">Encabezado Principal</th>
  </tr>
  <tr>
    <td>Celda 1</td>
    <td>Celda 2</td>
    <td>Celda 3</td>
  </tr>
</table>

  • rowspan: Permite que una celda se extienda verticalmente sobre varias filas. Se usa cuando quieres que una celda ocupe varias filas, como en tablas que necesitan una categoría común en varias filas consecutivas.

    • Ejemplo: Si quieres que una celda abarque 2 filas, usas rowspan="2".
    <table>
  <tr>
    <td rowspan="2">Celda Unificada</td>
    <td>Celda A1</td>
    <td>Celda A2</td>
  </tr>
  <tr>
    <td>Celda B1</td>
    <td>Celda B2</td>
  </tr>
</table>

7. Formularios (<form>, <input>, <button>)

Los formularios permiten que los usuarios envíen datos. Se utilizan en conjunto con varios elementos como input, textarea, button, entre otros.

  • action: Define la URL a la que se enviará el formulario.
  • method: Especifica el método de envío de datos (<GET> o <POST>).
  • type: Define el tipo de <input> como texto, contraseña, botón,...
  • name: Especifica el nombre del campo para identificarlo en el servidor.

    • Ejemplo:

      <form action="/submit" method="POST">
  <input type="text" name="nombre" placeholder="Tu nombre">
  <button type="submit">Enviar</button>
</form>

Elementos comunes en los formularios:

  • Etiqueta <label> : Asociadas a un texto descriptivo con un control de entrada.

     <label for="nombre">Nombre:</label>
 <input id="nombre" type="text" name="nombre">

  • Etiqueta <input> : Se utiliza para capturar diversos tipos de datos.

    • Texto <text> con atributos como <size>, <placeholder>, <pattern>, <maxlength>

       <input type="text" name="usuario" size="30" maxlength="50" placeholder="Introduce 
 tu nombre" pattern="[A-Za-z ]+">

    • Email <email> con atributos como <size>, <placeholder>, <pattern>, <maxlength>

      <input type="email" name="correo" size="30" placeholder="[email protected]">

    • Contraseña <password> con atributos como <size>, <placeholder>, <pattern>, <maxlength>

     <input type="password" name="clave" size="20" maxlength="20" placeholder="Contraseña">

    • Teléfono <tel> con atributos como <size>, <placeholder>, <pattern>, <maxlength>

      <input type="tel" name="telefono" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">

    • Color <color>

     <input type="color" name="favorito">
    • Fecha y hora <date>, <time>, <datetime-local> 

     <input type="date" name="fecha">
 <input type="time" name="hora">
 <input type="datetime-local" name="cita">

  • Tipos de entrada

    • Checkbox

      <input type="checkbox" name="suscripcion" checked> Suscribirse

    • Radio, todos los radios deben compartir el mismo atributo name pero tener valores únicos.

      <input type="radio" name="genero" value="masculino" checked> Masculino

    • File

       <input type="file" name="documento">

    • Hidden

      <input type="hidden" name="token" value="12345">

  • Otros elementos

    • Lista de datos <datalist>, proporciona opciones predefinidas para un campo de entrada.

      <input type="text" name="ciudad" list="ciudades">
<datalist id="ciudades">
      <option value="Madrid"></option>
      <option value="Barcelona"></option>
      <option value="Sevilla"></option>
</datalist>

    • Área de texto <textarea>, permite entradas de texto de varias líneas.

      <textarea name="comentarios" rows="5" cols="30" placeholder="Escribe tu mensaje"> 
</textarea>

    • Lista de desplegable <select>, proporciona opciones en forma de menú desplegable.

      <select name="pais">
    <option value="es">España</option>
    <option value="fr">Francia</option>
    <option value="it">Italia</option>
</select>

    • Agrupación con <fieldset> y <legend>, agrupa controles relacionados.

      <fieldset>
    <legend>Información personal</legend>
    <label for="nombre">Nombre:</label>
    <input id="nombre" type="text" name="nombre">
</fieldset>

  • Botones

    • Enviar submit

      <input type="submit" value="Enviar">

    • Reiniciar reset

      <input type="reset" value="Reiniciar">

    • Deshailitado disabled

      <input type="button" value="No disponible" disabled>

🎨 Atributos Importantes en HTML

Los atributos proporcionan información adicional sobre los elementos HTML. Aquí algunos de los más comunes:

  • href: Especifica la URL de un enlace (<a>).
  • src: Especifica la fuente de una imagen (<img>).
  • alt: Proporciona un texto alternativo para una imagen.
  • class: Define una clase CSS para un elemento.
  • id: Define un identificador único para un elemento.
  • style: Permite aplicar estilos CSS directamente a un elemento.

🔗 Enlaces Internos y Externos

HTML permite crear enlaces tanto a otras páginas web (enlaces externos) como a secciones dentro de la misma página (enlaces internos). Los enlaces internos se hacen utilizando el atributo id para referirse a una sección específica.

Enlace interno:

<a href="#seccion1">Ir a la Sección 1</a>

<!-- En la misma página -->
<section id="seccion1">
  <h2>Sección 1</h2>
  <p>Contenido de la sección 1.</p>
</section>

© 2025 Irene Frías Ramos Wiki Educativa 1º DAM

⚠️ **GitHub.com Fallback** ⚠️