imyisusdev
imyisusdev
El viaje de la información en segundos.
Escribes la dirección de la web en tu navegador y haces una petición de archivo.
Lleva tu consulta a través del mundo y te devuelve los datos de respuesta.
Una computadora remota que busca el archivo HTML solicitado y te lo envía.
HTML no es un lenguaje de programación. Es un lenguaje de marcado. Define el esqueleto y estructura de tu web: vigas, paredes y dónde va cada elemento de tu casa digital.
Aunque programemos en CodePen, los archivos reales necesitan un "apellido" o extensión.
La extensión .html le avisa a tu computadora que este archivo debe abrirse con un navegador web (Chrome, Firefox, Safari) y no con un procesador de textos como Word.
El archivo principal de cualquier página web siempre se llama index.html. Es la portada del sitio.
HTML funciona como cajas contenedoras. Abres la caja con una etiqueta, metes tu texto e imágenes, y la cierras usando la barra diagonal /.
Como las muñecas rusas (Matryoshkas), las etiquetas van unas dentro de otras de forma organizada.
El esqueleto clásico de un archivo en tu computadora.
<!DOCTYPE html>: Le dice al navegador: "Soy HTML5 moderno".
<html>: Envoltura raíz de toda la página web.
<head>: El cerebro. Datos invisibles (idioma, título de la pestaña).
<body>: El cuerpo. Todo lo que el usuario ve y toca en pantalla.
No tiras todo en un almacén gigante. Divides en: entrada, comedor, sótano. De la misma forma, estructuramos con significado.
La semántica ayuda a Google (SEO) y a los lectores de pantalla para la Accesibilidad.
Viene de la palabra inglesa Heading. Define la jerarquía y el tamaño del título:
<h1>: El título central (Solo uno por página).<h2>: Secciones secundarias.<h3> a <h6>: Subtemas de menor rango.Viene del inglés Paragraph. Representa bloques de texto normales.
Usa <strong> para resaltar en negrita y <em> para dar énfasis en cursiva.
<p>Hola, soy <strong>Jesús</strong>. En redes me encontrarás como <em>@imyisusdev</em></p>
Hola, soy Jesús. En redes me encuentras como @imyisusdev.
Del inglés Unordered List (Lista desordenada/viñetas) y List Item (Elemento de lista).
Es la manera semántica perfecta de agrupar y ordenar tus enlaces de contacto y redes sociales.
Viene de Image. Es una etiqueta autocerrable.
src (Source / Fuente): URL o dirección de la foto.alt (Alternative): Texto descriptivo para lectores de pantalla.Viene de Anchor. Como un ancla amarra tu barco en el puerto, esta etiqueta amarra tu página a otra dirección web.
💡 Agrega target="_blank" para abrir el link en otra pestaña.
Abre tu CodePen y copia la plantilla de base/index.html.
Maqueta el esqueleto semántico agregando tus datos reales y tu lista ordenada de redes.
base/index.html.<ul> y <li> para tus redes.
imyisusdev - Programación desde cero