¡Bienvenido a la Guía de HTML!

HTML (Hypertext Markup Language) es un lenguaje de programación que se utiliza para crear y estructurar páginas web. 🌐 Es el código estándar que se utiliza para dar estructura a los contenidos de una página web. 📄 Con HTML, puedes crear encabezados, párrafos, listas, enlaces, imágenes y mucho más. 🚀 ¡Es el primer paso para convertirte en un desarrollador web! 💻

Etiquetas Básicas de HTML

HTML es el lenguaje de marcado estándar para crear páginas web. Aquí tienes algunas etiquetas básicas:

<html>

Define el documento HTML.
<head>

Contiene metadatos y enlaces a recursos.
<body>

Contiene el contenido visible de la página.
<h1> a <h6>

Encabezados de diferentes niveles.
<p>

Define un párrafo.

Ejemplo de estructura básica HTML

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

Listas en HTML

HTML permite crear listas ordenadas y desordenadas:

Lista Ordenada

Primer elemento
Segundo elemento
Tercer elemento

Lista Desordenada

Elemento 1
Elemento 2
Elemento 3

Código de listas HTML

<!-- Lista ordenada -->
<ol>
  <li>Primer elemento</li>
  <li>Segundo elemento</li>
  <li>Tercer elemento</li>
</ol>

<!-- Lista desordenada -->
<ul>
  <li>Elemento 1</li>
  <li>Elemento 2</li>
  <li>Elemento 3</li>
</ul>

Multimedia en HTML

HTML permite incrustar audio y video en las páginas web.

Audio

Video

Código de elementos multimedia

<!-- Elemento de audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  Tu navegador no soporta el elemento de audio.
</audio>

<!-- Elemento de video -->
<video controls width="400">
  <source src="video.mp4" type="video/mp4" />
  Tu navegador no soporta el elemento de video.
</video>

Formulario de Contacto

Código de formulario HTML

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

  <label for="email">Correo Electrónico:</label>
  <input type="email" id="email" name="email" required />

  <label for="mensaje">Mensaje:</label>
  <textarea id="mensaje" name="mensaje" rows="4" required></textarea>

  <button type="submit">Enviar</button>
</form>

Tabla de Ejemplo

Etiqueta	Descripción
<h1>	Encabezado de nivel 1
<p>	Párrafo
<a>	Hipervínculo
<img>	Imagen
<div>	Contenedor genérico

Código de tabla HTML

<table>
  <thead>
    <tr>
      <th>Etiqueta</th>
      <th>Descripción</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>&lt;h1&gt;</td>
      <td>Encabezado de nivel 1</td>
    </tr>
    <tr>
      <td>&lt;p&gt;</td>
      <td>Párrafo</td>
    </tr>
  </tbody>
</table>

Map-Area

Código de map-area

<img src="mapa.png" alt="Mapa de Ejemplo" usemap="#mapa-ejemplo" />
<map name="mapa-ejemplo">
  <area
    shape="rect"
    coords="0,0,100,100"
    href="#etiquetas-basicas"
    alt="Etiquetas Básicas"
  />
  <area 
    shape="circle" 
    coords="150,150,50" 
    href="#listas" 
    alt="Listas" 
  />
</map>

Mapa de Google

Código de iframe para Google Maps

<iframe
  src="https://www.google.com/maps/embed?pb=!1m18!1m12!..."
  width="600"
  height="450"
  style="border: 0"
  allowfullscreen=""
  loading="lazy"
  referrerpolicy="no-referrer-when-downgrade"
>
</iframe>