Html para principiantes
tutorial sobre html y sus etiquetas basicas y necesarias para iniciar en el mundo web
HTML
1/14/20265 min read
1) ¿QUÉ ES HTML 4?
HTML (HyperText Markup Language) es un lenguaje de marcado para crear páginas web.
HTML 4 es una versión clásica (old school) ideal para aprender lo esencial:
Estructura de una página
Texto y encabezados
Enlaces e imágenes
Listas
Tablas
Formularios
Idea clave: HTML no “programa”, describe contenido.
2) ESTRUCTURA BÁSICA DE UN DOCUMENTO HTML 4
En HTML 4, el DOCTYPE es importante porque le dice al navegador qué versión de HTML estás usando.
✅ EJEMPLO: Estructura base (HTML)
<!DOCTYPE HTML>
<html>
<head>
<title>Mi primera página HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
Hola mundo desde HTML 😄
</body>
</html>
Detalles importantes
<html>: contiene todo el documento.
<head>: info para el navegador (título, meta, etc.).
<title>: aparece en la pestaña del navegador.
<meta http-equiv="Content-Type"...>: define el tipo de texto y la codificación (UTF-8).
<body>: contenido visible de la página.
3) TEXTO BÁSICO: p, br, hr, strong, em
3.1) <p> Párrafo
Ejemplo:
<p>Este es un párrafo. HTML es más fácil de lo que parece.</p>
<p>Este es otro párrafo.</p>
3.3) <hr> Línea horizontal (separador)
Ejemplo:
<p>Sección A</p>
<hr>
<p>Sección B</p>
3.4) Énfasis: <strong> y <em>
Ejemplo:
<p><strong>Importante:</strong> esto va en negrita.</p>
<p><em>Nota:</em> esto va en cursiva.</p>
📌 Detalle:
<strong> y <em> no son solo “negrita/cursiva”; también expresan importancia y énfasis.
4) ENCABEZADOS: h1 a h6
Los encabezados organizan el contenido, como títulos y subtítulos.
Ejemplo:
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h3>Sección</h3>
<h4>Subsección</h4>
<h5>Detalle</h5>
<h6>Nota pequeña</h6>
✅ Buena práctica:
Normalmente usar un <h1> por página (aunque HTML 4 no lo “prohíbe”, es buena práctica).
5) CONTENEDORES: div y span
5.1) <div> (bloque)
Ocupa todo el ancho disponible.
Se usa para agrupar secciones.
Ejemplo:
<div>
<h2>Noticias</h2>
<p>Hoy aprendimos HTML 4.</p>
</div>
5.2) <span> (en línea)
Envuelve texto o partes pequeñas.
No hace salto de línea.
Ejemplo:
<p>Hola, <span>este pedacito</span> está dentro de un span.</p>
💡 Idea fácil:
div = caja grande
span = sticker pegado a una palabra
6) ENLACES: etiqueta a
6.1) Enlace normal
<a href="https://example.com">Visitar Example</a>
6.2) Abrir en una nueva pestaña
<a href="https://example.com" target="_blank">Abrir en otra pestaña</a>
6.3) Enlace a una parte de la misma página (ancla)
<a href="#contacto">Ir a Contacto</a>
<h2 id="contacto">Contacto</h2>
<p>Escríbeme al correo...</p>
Detalle: el atributo clave es href.
7) IMÁGENES: etiqueta img
img no tiene cierre; es una etiqueta “vacía”.
Ejemplo:
<img src="foto.jpg" alt="Foto de ejemplo" width="300" height="200">
Detalles importantes
src: ruta de la imagen.
alt: texto alternativo (accesibilidad y cuando la imagen falla).
width y height: tamaño (en HTML 4 se usa mucho así).
8) LISTAS: ul, ol, li
8.1) Lista desordenada (ul)
<ul>
<li>Pan</li>
<li>Leche</li>
<li>Huevos</li>
</ul>
8.2) Lista ordenada (ol)
<ol>
<li>Encender la PC</li>
<li>Abrir el navegador</li>
<li>Escribir código</li>
</ol>
Detalle: li siempre va dentro de ul u ol.
9) TABLAS: table, tr, th, td
Las tablas se usan para datos (no para maquetar, aunque en HTML 4 era común).
Ejemplo:
<table border="1" cellpadding="6" cellspacing="0">
<tr>
<th>Nombre</th>
<th>Edad</th>
<th>Ciudad</th>
</tr>
<tr>
<td>Ana</td>
<td>20</td>
<td>Santo Domingo</td>
</tr>
<tr>
<td>Carlos</td>
<td>22</td>
<td>San Cristóbal</td>
</tr>
</table>
Detalles
tr: fila
th: encabezado (suele verse en negrita)
td: celda normal
Atributos clásicos: border, cellpadding, cellspacing
10) FORMULARIOS: form, input, textarea, select, option, label
Los formularios capturan datos del usuario.
EJEMPLO COMPLETO
<form action="procesar.php" method="post">
<p>
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre">
</p>
<p>
<label for="correo">Correo:</label><br>
<input type="text" id="correo" name="correo">
</p>
<p>
<label for="clave">Contraseña:</label><br>
<input type="password" id="clave" name="clave">
</p>
<p>
<label>Género:</label><br>
<input type="radio" name="genero" value="M"> Masculino
<input type="radio" name="genero" value="F"> Femenino
</p>
<p>
<label>Intereses:</label><br>
<input type="checkbox" name="intereses" value="prog"> Programación
<input type="checkbox" name="intereses" value="games"> Videojuegos
</p>
<p>
<label for="pais">País:</label><br>
<select id="pais" name="pais">
<option value="rd">República Dominicana</option>
<option value="mx">México</option>
<option value="co">Colombia</option>
</select>
</p>
<p>
<label for="mensaje">Mensaje:</label><br>
<textarea id="mensaje" name="mensaje" rows="4" cols="40"></textarea>
</p>
<p>
<input type="submit" value="Enviar">
<input type="reset" value="Limpiar">
</p>
</form>
Detalles importantes
action: a dónde se envían los datos (archivo/ruta).
method:
get: manda datos por URL (visible)
post: manda datos “por detrás” (más usado)
name: el “nombre real” del dato cuando llega al servidor.
label for="id": conecta la etiqueta con el control (mejora la experiencia).
11) COMENTARIOS EN HTML
Los comentarios no se ven en la página, pero ayudan a documentar.
Ejemplo:
<!-- Esto es un comentario -->
<p>Este texto sí se ve.</p>
12) ETIQUETAS EXTRA ÚTILES (CLÁSICAS Y COMUNES)
12.1) center (clásica)
<center>Texto centrado (muy de HTML 4)</center>
Nota: hoy se recomienda CSS, pero en HTML 4 esto es común.
12.2) font (clásica)
<font face="Arial" size="4" color="blue">Texto con fuente, tamaño y color</font>
12.3) blockquote (cita)
<blockquote>
La práctica convierte el “no sé” en “ya lo tengo”.
</blockquote>
13) MINI-PROYECTO FINAL (TODO JUNTO)
Este ejemplo junta: estructura, textos, imagen, enlace, lista, tabla y formulario.
<!DOCTYPE HTML >
<html>
<head>
<title>Mi página práctica</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<h1>Mi Blog de Práctica (HTML )</h1>
<p>Bienvenido. Aquí practicaré enlaces, imágenes, listas, tablas y formularios.</p>
<hr>
<h2>Enlace e imagen</h2>
<p>
Visita mi sitio favorito:
<a href="https://example.com" target="_blank">Example</a>
</p>
<img src="foto.jpg" alt="Imagen de ejemplo" width="250" height="160">
<hr>
<h2>Lista de temas</h2>
<ul>
<li>Etiquetas de texto</li>
<li>Enlaces e imágenes</li>
<li>Listas</li>
<li>Tablas</li>
<li>Formularios</li>
</ul>
<hr>
<h2>Tabla de estudiantes</h2>
<table border="1" cellpadding="6" cellspacing="0">
<tr>
<th>Nombre</th>
<th>Curso</th>
<th>Estado</th>
</tr>
<tr>
<td>Laura</td>
<td>HTML 4</td>
<td>Activo</td>
</tr>
<tr>
<td>Pedro</td>
<td>HTML 4</td>
<td>Activo</td>
</tr>
</table>
<hr>
<h2>Formulario de contacto</h2>
<form action="procesar.php" method="post">
<p>
<label for="nombre">Nombre:</label><br>
<input type="text" id="nombre" name="nombre">
</p>
<p>
<label for="mensaje">Mensaje:</label><br>
<textarea id="mensaje" name="mensaje" rows="4" cols="40"></textarea>
</p>
<p>
<input type="submit" value="Enviar">
</p>
</form>
</body>
</html>