{"id":940,"date":"2026-04-08T16:08:37","date_gmt":"2026-04-08T22:08:37","guid":{"rendered":"https:\/\/ismael-ochoa.com\/sitiowp\/?p=940"},"modified":"2026-04-08T16:36:22","modified_gmt":"2026-04-08T22:36:22","slug":"html-desde-cero","status":"publish","type":"post","link":"https:\/\/ismael-ochoa.com\/sitiowp\/index.php\/2026\/04\/08\/html-desde-cero\/","title":{"rendered":"HTML desde cero"},"content":{"rendered":"\n
\"Portada<\/figure>\n\n\n\n

Llevas a\u00f1os visitando p\u00e1ginas web. Probablemente decenas al d\u00eda. Pero si alguien te preguntara c\u00f3mo est\u00e1n hechas, \u00bfsabr\u00edas responder algo m\u00e1s all\u00e1 de \u00abcon computadoras y c\u00f3digo\u00bb?<\/p>\n\n\n\n

No te preocupes. La mayor\u00eda de la gente tampoco lo sabe, y eso incluye a personas que usan la web profesionalmente todos los d\u00edas. Lo que s\u00ed es cierto es que entenderlo cambia la manera en que la ves \u2014 y abre una puerta que, una vez abierta, es dif\u00edcil cerrar.<\/p>\n\n\n\n

\n\n\n\n

Una p\u00e1gina web es, b\u00e1sicamente, un documento<\/h2>\n\n\n\n

As\u00ed como existe un documento de Word, un PDF o una hoja de Excel, una p\u00e1gina web es tambi\u00e9n un tipo de documento. La diferencia est\u00e1 en que fue dise\u00f1ado para verse dentro de un programa espec\u00edfico: el navegador. Ya sea Chrome, Firefox, Edge o Safari, todos hacen lo mismo \u2014 leer ese documento y mostr\u00e1rtelo de manera visual.<\/p>\n\n\n\n

\"\u00edconos<\/figure>\n\n\n\n

Cuando escribes una direcci\u00f3n en la barra de tu navegador y presionas Enter, tu dispositivo va a buscar ese documento a otro lugar (un servidor, que es b\u00e1sicamente una computadora siempre encendida y conectada a internet), lo trae, y el navegador se encarga de \u00abtraducirlo\u00bb a lo que t\u00fa ves en pantalla: colores, textos, im\u00e1genes, botones.<\/p>\n\n\n\n

\u00bfY en qu\u00e9 est\u00e1 escrito ese documento? En un lenguaje llamado HTML<\/strong>. De eso hablaremos m\u00e1s adelante. Por ahora qu\u00e9date con la idea clave: una p\u00e1gina web es un documento digital que vive en un servidor y que el navegador interpreta para mostr\u00e1rtelo.<\/em><\/p>\n\n\n\n

\n\n\n\n

\u00bfEst\u00e1tica o din\u00e1mica? No es lo mismo<\/h2>\n\n\n\n

No todas las p\u00e1ginas web funcionan igual. Hay dos tipos b\u00e1sicos, y vale la pena distinguirlos desde el principio.<\/p>\n\n\n\n

Una p\u00e1gina est\u00e1tica<\/strong> muestra siempre el mismo contenido a todos los que la visitan. Es como un cartel digital: est\u00e1 ah\u00ed, se ve bien, pero no cambia seg\u00fan qui\u00e9n la vea ni qu\u00e9 haga. Son m\u00e1s simples de construir y perfectas para empezar a aprender.<\/p>\n\n\n\n

Una p\u00e1gina din\u00e1mica<\/strong>, en cambio, genera contenido personalizado en tiempo real. Cuando entras a tu cuenta de Netflix y ves recomendaciones basadas en lo que has visto, eso es una p\u00e1gina din\u00e1mica. Cuando publicas algo en redes sociales y aparece en el feed de tus contactos al instante, tambi\u00e9n. Detr\u00e1s de eso hay mucha m\u00e1s tecnolog\u00eda involucrada \u2014 bases de datos, servidores, lenguajes de programaci\u00f3n del lado del servidor.<\/p>\n\n\n\n

La buena noticia: para aprender a hacer p\u00e1ginas web, empiezas por las est\u00e1ticas. Y con HTML, ya puedes construir algo real desde la primera lecci\u00f3n.<\/p>\n\n\n\n

\n\n\n\n

\u00bfY un sitio web es lo mismo que una p\u00e1gina web?<\/h2>\n\n\n\n

No exactamente, aunque se usan como sin\u00f3nimos todo el tiempo. Una p\u00e1gina web<\/strong> es un documento individual. Un sitio web<\/strong> es un conjunto de p\u00e1ginas relacionadas bajo el mismo dominio. Por ejemplo, la p\u00e1gina de inicio de Wikipedia es una p\u00e1gina web; Wikipedia completa, con todos sus art\u00edculos, es un sitio web.<\/p>\n\n\n\n

Cuando aprendes HTML, empiezas por crear p\u00e1ginas. Despu\u00e9s, cuando conectas varias entre s\u00ed, ya tienes un sitio.<\/p>\n\n\n\n

\n\n\n\n

\u00bfQu\u00e9 hay detr\u00e1s de lo que ves?<\/h2>\n\n\n\n

Cuando visitas cualquier p\u00e1gina, est\u00e1s viendo el resultado final. Pero detr\u00e1s de esa pantalla hay tres tecnolog\u00edas que trabajan juntas, y entender para qu\u00e9 sirve cada una te dar\u00e1 una ventaja enorme cuando empieces a aprender.<\/p>\n\n\n\n

\"Imagen<\/figure>\n\n\n\n

HTML<\/strong> es la estructura. Pi\u00e9nsalo como el esqueleto: define qu\u00e9 elementos existen en la p\u00e1gina y en qu\u00e9 orden aparecen. Un t\u00edtulo, un p\u00e1rrafo, una imagen, un enlace \u2014 todo eso lo pone HTML. Sin \u00e9l, simplemente no hay nada que mostrar.<\/p>\n\n\n\n

CSS<\/strong> es la apariencia. Una vez que HTML pone los elementos, CSS decide c\u00f3mo se ven: colores, tipograf\u00edas, tama\u00f1os, espaciados. Es lo que convierte una lista aburrida de texto en una p\u00e1gina visualmente atractiva. Sin CSS, todo se ver\u00eda como un documento de texto plano de los a\u00f1os 90.<\/p>\n\n\n\n

JavaScript<\/strong> es el comportamiento. Es lo que hace que una p\u00e1gina responda a lo que haces: un men\u00fa que se despliega, una notificaci\u00f3n que aparece, un carrito de compras que se actualiza sin recargar la p\u00e1gina. Sin JavaScript, las p\u00e1ginas ser\u00edan est\u00e1ticas, como folletos digitales sin vida propia.<\/p>\n\n\n\n

Las tres son complementarias \u2014 cada una resuelve un problema distinto. Y no necesitas dominarlas al mismo tiempo para empezar. Todo comienza con HTML, y eso es exactamente lo que puedes aprender hoy.<\/p>\n\n\n\n

\n\n\n\n

\u00bfLo puedes ver t\u00fa mismo?<\/h2>\n\n\n\n

S\u00ed, ahora mismo, sin instalar nada.<\/p>\n\n\n\n

Abre cualquier p\u00e1gina web, haz clic derecho sobre cualquier parte de ella y selecciona Inspeccionar<\/strong> (o \u00abInspect\u00bb si tu navegador est\u00e1 en ingl\u00e9s). Se abrir\u00e1 un panel que muestra el c\u00f3digo HTML real de esa p\u00e1gina. Lo que ves ah\u00ed es exactamente lo que el navegador interpret\u00f3 para mostrarte lo que est\u00e1s viendo.<\/p>\n\n\n\n

Puedes hacerlo en Google, en Wikipedia, en cualquier sitio. Es un h\u00e1bito que tienen todos los que aprenden desarrollo web: ver c\u00f3mo lo hacen los dem\u00e1s. Y una vez que sabes leer HTML, ese panel deja de ser un misterio y se convierte en una herramienta.<\/p>\n\n\n\n

\n\n\n\n

\u00bfPor qu\u00e9 aprender HTML si ya existen herramientas como WordPress o Wix?<\/h2>\n\n\n\n

Es una pregunta v\u00e1lida, y merece una respuesta honesta.<\/p>\n\n\n\n

Herramientas como WordPress, Wix o Squarespace son \u00fatiles para montar algo r\u00e1pido sin escribir una sola l\u00ednea de c\u00f3digo. Pero tienen un l\u00edmite claro: cuando algo no funciona como quieres, cuando necesitas personalizar algo que la herramienta no permite, o cuando un cliente te pide algo espec\u00edfico, te quedas sin opciones.<\/p>\n\n\n\n

Quien entiende HTML no tiene ese techo. Puede trabajar con cualquier herramienta, entender lo que hace, modificarla y resolver problemas que otros no pueden. La diferencia no es solo t\u00e9cnica \u2014 es la diferencia entre usar algo y entenderlo.<\/p>\n\n\n\n

Adem\u00e1s, HTML es el punto de entrada m\u00e1s accesible que existe en el mundo del desarrollo web. No requiere instalaciones complejas, no necesitas experiencia previa y los resultados se ven de inmediato en el navegador. Es, literalmente, el mejor lugar para empezar.<\/p>\n\n\n\n

\n\n\n\n

\u00bfQuieres aprender a construirlas t\u00fa mismo?<\/h2>\n\n\n\n

Si llegaste hasta aqu\u00ed, ya tienes algo que mucha gente no tiene: contexto. Sabes qu\u00e9 es una p\u00e1gina web, c\u00f3mo funciona por dentro y qu\u00e9 tecnolog\u00edas la hacen posible. El siguiente paso natural es aprender a crear una t\u00fa mismo, desde cero, sin conocimientos previos.<\/p>\n\n\n\n

Para eso existe HTML desde cero<\/strong>, un curso dise\u00f1ado exactamente para quien est\u00e1 donde t\u00fa est\u00e1s ahora: con ganas de aprender, sin saber por d\u00f3nde empezar. Sin tecnicismos innecesarios, sin dar por sentado que ya sabes algo, y con resultados visibles desde la primera lecci\u00f3n.<\/p>\n\n\n\n

\ud83c\udf93 HTML desde cero \u2014 Empieza hoy<\/p>\n\n\n\n

El curso que te lleva de no saber nada a construir tu primera p\u00e1gina web, paso a paso.<\/p>\n\n\n\n

Quiero empezar \u2192<\/a><\/p>\n\n\n\n

Y si prefieres empezar por el video de esta lecci\u00f3n \u2014 donde explicamos qu\u00e9 es una p\u00e1gina web de manera visual y en menos de 3 minutos \u2014 tambi\u00e9n lo tienes aqu\u00ed:<\/p>\n\n\n\n

\ud83c\udfac Ver el video: \u00bfQu\u00e9 es una p\u00e1gina web?<\/p>\n\n\n\n

Ver en YouTube \u2192<\/a><\/p>\n\n\n\n

\u00bfPrefieres aprender acompa\u00f1ado? \u00danete a Quiero ser dise\u00f1ador web<\/strong>, la comunidad de Facebook donde compartimos tips, tutoriales y retos para aprender dise\u00f1o web de manera pr\u00e1ctica. Un lugar para preguntar sin miedo, avanzar a tu ritmo y conectar con personas que est\u00e1n en el mismo camino que t\u00fa.<\/p>\n\n\n\n

\ud83d\udcac \u00danete al grupo: Quiero ser dise\u00f1ador web<\/p>\n\n\n\n

Unirme <\/a>al <\/a>grupo \u2192<\/a><\/p>\n\n\n\n

<\/p>\n\n\n\n

\n
Crea tu propia p\u00e1gina web f\u00e1cilmente<\/a><\/blockquote>