imyisusdev
imyisusdev
El viaje de la información en segundos.
Escribís la dirección de la web en tu navegador y hacés 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. Abrís la caja con una etiqueta, metés tu texto e imágenes, y la cerrás 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 tirás todo en un galpón gigante. Dividís 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.
Usá <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 encontrás 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.
💡 Agregá target="_blank" para abrir el link en otra pestaña.
Abrí tu CodePen y copiá la plantilla de base/index.html.
Maquetá 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