<!
DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tipos de Listas en HTML</title>
</head>
<body>
<h2>1. Lista Ordenada</h2>
<ol>
<li>Despertarse</li>
<li>Desayunar</li>
<li>Ir al trabajo</li>
<li>Hacer ejercicio</li>
</ol>
<h2>2. Lista No Ordenada</h2>
<ul>
<li>Manzana</li>
<li>Banana</li>
<li>Naranja</li>
<li>Uva</li>
</ul>
<h2>3. Lista de Definición</h2>
<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado para crear páginas web.</dd>
<dt>CSS</dt>
<dd>Lenguaje utilizado para dar estilos a las páginas web.</dd>
<dt>JavaScript</dt>
<dd>Lenguaje de programación que permite agregar interactividad.</dd>
</dl>
</body>
</html>
7 tablas simple
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Tabla</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>Encabezado 1</th>
<th>Encabezado 2</th>
<th>Encabezado 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Fila 1 Columna 1</td>
<td>Fila 1 Columna 2</td>
<td>Fila 1 Columna 3</td>
</tr>
<tr>
<td>Fila 2 Columna 1</td>
<td>Fila 2 Columna 2</td>
<td>Fila 2 Columna 3</td>
</tr>
<tr>
<td>Fila 3 Columna 1</td>
<td>Fila 3 Columna 2</td>
<td>Fila 3 Columna 3</td>
</tr>
</tbody>
</table>
</body>
</html>
[Link] estructurada
<table border="1">
<thead>
<tr>
<th>Producto</th>
<th>Cantidad</th>
<th>Precio</th>
</tr>
</thead>
<tbody>
<tr>
<td>Teclado</td>
<td>4</td>
<td>$25</td>
</tr>
<tr>
<td>Monitor</td>
<td>2</td>
<td>$150</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>6</td>
<td>$175</td>
</tr>
</tfoot>
</table>
[Link] basico
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario Básico</title>
</head>
<body>
<form action="#" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" required>
<br><br>
<label for="correo">Correo:</label>
<input type="email" id="correo" name="correo" required>
<br><br>
<button type="submit">Enviar</button>
</form>
</body>
</html>
10 formulario intermedio
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario Intermedio</title>
</head>
<body>
<form action="#" method="post">
<!-- Nombre -->
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre" placeholder="Ingresa tu nombre" required>
<br><br>
<!-- Correo -->
<label for="correo">Correo:</label>
<input type="email" id="correo" name="correo" placeholder="ejemplo@[Link]" required>
<br><br>
<!-- País -->
<label for="pais">País:</label>
<select id="pais" name="pais" required>
<option value="">Selecciona tu país</option>
<option value="mexico">México</option>
<option value="espana">España</option>
<option value="colombia">Colombia</option>
<option value="argentina">Argentina</option>
</select>
<br><br>
<button type="submit">Enviar</button>
</form>
</body>
</html>
11radio y checkbox
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Formulario Tipo Clásico</title>
</head>
<body>
<form action="#" method="post">
<!-- Género -->
<label>Género:</label><br>
<input type="radio" id="masculino" name="genero" value="masculino" required>
<label for="masculino">Masculino</label>
<input type="radio" id="femenino" name="genero" value="femenino">
<label for="femenino">Femenino</label>
<input type="radio" id="otro" name="genero" value="otro">
<label for="otro">Otro</label>
<br><br>
<!-- Intereses -->
<label>Intereses:</label><br>
<input type="checkbox" id="deporte" name="intereses" value="deporte">
<label for="deporte">Deporte</label>
<input type="checkbox" id="musica" name="intereses" value="musica">
<label for="musica">Música</label>
<input type="checkbox" id="lectura" name="intereses" value="lectura">
<label for="lectura">Lectura</label>
<br><br>
<button type="submit">Enviar</button>
</form>
</body>
</html>
[Link] semanticas
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Página Semántica</title>
</head>
<body>
<!-- Encabezado -->
<header>
<h1>Mi Página Web</h1>
</header>
<!-- Navegación -->
<nav>
<a href="#inicio">Inicio</a> |
<a href="#servicios">Servicios</a> |
<a href="#contacto">Contacto</a>
</nav>
<!-- Contenido principal -->
<main>
<!-- Sección de inicio -->
<section id="inicio">
<h2>Bienvenido</h2>
<p>Esta es la sección de inicio de la página.</p>
</section>
<!-- Sección de servicios -->
<section id="servicios">
<h2>Servicios</h2>
<p>Aquí describimos los servicios que ofrecemos.</p>
</section>
<!-- Sección de contacto -->
<section id="contacto">
<h2>Contacto</h2>
<p>Puedes contactarnos a través del formulario o por correo.</p>
</section>
</main>
<!-- Pie de página -->
<footer>
<p>© 2026 Mi Página Web</p>
</footer>
</body>
</html>
Multimedia
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Multimedia</title>
</head>
<body>
<!-- Audio con controles -->
<h2>Audio</h2>
<audio controls>
<source src="audio-ejemplo.mp3" type="audio/mpeg">
Tu navegador no soporta el audio.
</audio>
<br><br>
<!-- Video con controles -->
<h2>Video</h2>
<video width="480" height="270" controls>
<source src="video-ejemplo.mp4" type="video/mp4">
Tu navegador no soporta el video.
</video>
</body>
</html>