Crear tu propia página web escribiendo tu propio código, sin ayuda de generadores, builders o inteligencia artificial, puede ser muy fácil si aprendes los conceptos correctos.
Lo primero que debes aprender en tu carrera como desarrollador web es HTML, el lenguaje con el cual se escriben todas las páginas web.
Pero no te asustes, porque aunque es código de computadora, es bastante sencillo de entender. HTML no funciona como un lenguaje de programación tradicional. Su función es etiquetar los elementos de una página web, como quien etiqueta productos en un almacén.
Esto es un título.
Esto es un párrafo.
Esto es una imagen.
Esto es un enlace.
Así de sencillo.
Por qué aprender HTML aunque exista la inteligencia artificial
Hay quienes piensan que no vale la pena aprender HTML porque le puedes pedir a una inteligencia artificial que escriba el código por ti.
Pero una cosa es todo el hype de lanzamiento de ChatGPT y otra cosa es usar estas herramientas sabiendo que no siempre son tan mágicas como parecen.
La inteligencia artificial puede ahorrar tiempo, por supuesto, pero se necesita la experiencia humana para revisar y validar las respuestas que te da.
Por eso, si quieres crear páginas web de verdad, entender HTML sigue siendo necesario.
Qué es HTML
HTML es el lenguaje con el que se escriben todas las páginas web del mundo.
Absolutamente todas están escritas con HTML, sin importar qué otras tecnologías utilicen.
Incluso las páginas web de productos de inteligencia artificial, redes sociales, buscadores o plataformas modernas tienen HTML por debajo.
HTML significa HyperText Markup Language. La parte de “markup” significa marcado, y eso explica muy bien su función: marcar o etiquetar las partes de una página web.
Qué necesitas para crear tu primera página web
Para crear tu primera página web necesitas solamente dos cosas.
La primera es un editor de código.
Una buena opción es Visual Studio Code, porque es gratuito, completo y está pensado específicamente para escribir código.
No uses Word para escribir código. Tampoco es recomendable usar un bloc de notas si estás aprendiendo de forma seria. Lo mejor es usar un editor creado para programar o escribir código.
La segunda cosa que necesitas es un navegador de internet.
Puede ser Google Chrome, Edge, Firefox, Brave o Safari. Con un navegador tienes suficiente.
Ni siquiera necesitas conexión a internet para crear tu primera página web. Necesitas internet para buscar información o ver tutoriales, pero no para crear un archivo HTML en tu computadora.
Crear la carpeta del proyecto
Lo primero que debes hacer es crear una carpeta en tu disco duro donde va a ir tu página web.
Puedes hacer clic derecho, crear una nueva carpeta y ponerle un nombre como:
Mi primera página web
Esa carpeta estará vacía al principio. Después la puedes abrir con Visual Studio Code.
En Visual Studio Code puedes abrir esa carpeta y luego crear un nuevo archivo llamado:
index.html
Es importante que el archivo termine en .html, porque esa extensión le indica al navegador que se trata de una página web.
Crear la estructura básica de HTML
Cuando tengas abierto el archivo index.html, puedes escribir el símbolo de cierre de admiración:
!
Luego presionas la tecla Tab.
Visual Studio Code completará automáticamente una estructura básica de HTML.
Esta estructura es el esqueleto de toda página web.
Un ejemplo se ve así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página web</title>
</head>
<body>
</body>
</html>
No te preocupes si al principio parece mucho código. En realidad es bastante sencillo cuando entiendes qué significa cada parte.
Qué es body en HTML
Dentro de todo este código hay una sección que dice body.
Body significa cuerpo en inglés.
Todo lo que está dentro de body es lo que las personas van a ver en la página web.
Lo que está fuera de body no se ve directamente. El navegador lo utiliza para procesar información y hacer varias cosas, pero las personas solo ven lo que está dentro del cuerpo de la página.
Por ejemplo:
<body>
Esta es mi primera página web
</body>
Si guardas el archivo y lo abres en el navegador, verás ese texto en pantalla.
Con eso ya creaste tu primera página web.
Entender la estructura básica de una página web
La primera línea es:
<!DOCTYPE html>
Esta línea indica el tipo de documento. Le estamos diciendo al navegador que esto es un documento HTML.
Luego tenemos la etiqueta html, que envuelve todo el contenido de la página.
<html lang="es">
</html>
El atributo lang="es" indica que la página está en español. Esto no significa que el navegador traduzca la página. Simplemente le dice al navegador y a los buscadores en qué idioma está el contenido.
Dentro de html hay dos secciones principales:
<head>
</head>
<body>
</body>
Estas son dos de las partes más importantes de una página web.
Qué va dentro de head
Dentro de head va información que le sirve al navegador para interpretar la página web.
Por ejemplo:
<meta charset="UTF-8">
Esta línea indica el tipo de codificación. Es importante porque si no la usas, algunas letras como la ñ o las vocales con tilde pueden aparecer con símbolos raros.
También está esta línea:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Esto sirve para que los celulares interpreten bien la página web y no se vea todo desordenado.
También dentro de head está el título:
<title>Mi primera página web</title>
Ese título se muestra en la pestaña del navegador.
Qué va dentro de body
Dentro de body va lo que los usuarios ven en la pantalla.
Por ejemplo:
<body>
Hola, esta es mi primera página web
</body>
Si escribes texto dentro de body, ese texto aparecerá en el navegador.
Pero hay algo importante: en HTML no basta con escribir texto. También hay que etiquetar qué es ese texto.
Qué son las etiquetas en HTML
HTML sigue un patrón muy sencillo.
Tenemos etiquetas de apertura y etiquetas de cierre.
Por ejemplo:
<p>Este es un párrafo</p>
La etiqueta de apertura es:
<p>
La etiqueta de cierre es:
</p>
La barra inclinada indica que la etiqueta se está cerrando.
Dentro de una etiqueta puede haber texto o puede haber otra etiqueta.
Es como una jerarquía: padre, hijo, nieto y así sucesivamente.
Ejemplo para entender las etiquetas
Imagina que quieres etiquetar una persona.
Podrías tener algo como:
<persona>
<cabeza>
<cabello color="negro">
</cabeza>
<cuerpo>
<tronco></tronco>
<brazos></brazos>
<piernas></piernas>
</cuerpo>
</persona>
Este no es código real para una página web, pero sirve para entender la idea.
HTML se trata de marcar partes de un documento con etiquetas.
Una etiqueta puede estar dentro de otra, y esas etiquetas pueden tener atributos.
Qué son los atributos en HTML
Los atributos son características adicionales que se escriben dentro de una etiqueta.
Por ejemplo:
<cabello color="negro">
Aquí color es el nombre del atributo y "negro" es el valor del atributo.
La estructura es:
nombreDelAtributo="valor"
En HTML real también se usan atributos.
Por ejemplo, en un enlace se usa el atributo href para indicar a dónde debe llevar ese enlace.
Etiquetas que no tienen cierre
Hay etiquetas que no tienen cierre porque no llevan nada dentro.
Por ejemplo, una imagen no necesita una etiqueta de cierre tradicional, porque dentro de una imagen no hay otra imagen.
En HTML también pasa eso. Algunas etiquetas no tienen contenido interno y se escriben de forma única.
Un ejemplo es:
<meta charset="UTF-8">
Esta etiqueta no necesita cierre.
Qué son los comentarios en HTML
Los comentarios sirven para dejar mensajes a nosotros mismos o a nuestros compañeros de trabajo.
El navegador ignora completamente los comentarios.
En HTML se escriben así:
<!-- Este es un comentario que el navegador va a ignorar -->
Los comentarios también pueden usarse para desactivar partes del código sin tener que borrarlas.
Por ejemplo:
<!-- <p>Este párrafo está desactivado</p> -->
Ese párrafo no se mostrará porque está dentro de un comentario.
Crear un título con h1
Ahora volvamos a una página real.
Si escribes un texto directamente dentro de body, funciona, pero todavía no le has dicho al navegador qué es ese texto.
Por ejemplo:
<body>
Mi primera página web
</body>
Ese texto aparece, pero no está etiquetado como título.
Para decir que es un título principal, usamos la etiqueta h1.
<body>
<h1>Mi primera página web</h1>
</body>
h1 significa heading 1 o encabezado de nivel uno.
Es la etiqueta para los títulos principales de una página.
Crear un párrafo con p
Después del título puedes escribir un párrafo.
Para eso usamos la etiqueta p.
<body>
<h1>Mi primera página web</h1>
<p>Estoy aprendiendo HTML desde cero y esta es mi primera página web.</p>
</body>
La etiqueta p sirve para indicar que ese texto es un párrafo o un bloque de texto.
Visualmente puede que no cambie mucho, pero el código ya está correcto y eso evita problemas en el futuro.
Crear un enlace con la etiqueta a
Si quieres agregar un enlace, necesitas usar la etiqueta a.
Por ejemplo:
<a>Visita esta página</a>
Pero esto no basta.
Un enlace necesita un destino, es decir, a dónde va a llevar ese enlace.
Para eso usamos el atributo href.
<a href="https://www.ejemplo.com">Visita esta página</a>
La etiqueta a viene de anchor o ancla.
El atributo href indica el destino del enlace.
Cuidado al escribir enlaces
Un error muy común cuando empezamos a escribir HTML es equivocarnos al escribir un enlace o una ruta.
Si escribes algo como:
<a href="pagina/contacto">Contacto</a>
El navegador puede interpretar que estás buscando un archivo dentro de la misma carpeta.
Pero si quieres llevar al usuario a una página web de internet, normalmente debes escribir la dirección completa con https://.
Por ejemplo:
<a href="https://www.ejemplo.com">Contacto</a>
Esa diferencia es importante.
Si no escribes bien el destino, el enlace puede no funcionar.
Ejemplo completo de una primera página web
Un ejemplo sencillo de página HTML puede quedar así:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mi primera página web</title>
</head>
<body>
<h1>Mi primera página web</h1>
<p>Estoy aprendiendo HTML desde cero y este es mi primer proyecto web.</p>
<p>HTML sirve para etiquetar los elementos de una página web, como títulos, párrafos, imágenes y enlaces.</p>
<a href="https://www.ejemplo.com">Visitar un sitio web</a>
</body>
</html>
Con esto ya tienes una página web básica.
Puedes guardarla como index.html y abrirla en tu navegador.
Conclusión
HTML es el lenguaje con el que se escriben todas las páginas web.
No importa si una página usa otras tecnologías modernas, inteligencia artificial, bases de datos o frameworks. Por debajo, siempre hay HTML.
HTML sirve para etiquetar los elementos de una página web.
Un título se marca con h1.
Un párrafo se marca con p.
Un enlace se marca con a.
Un atributo como href sirve para indicar el destino de un enlace.
Los comentarios sirven para dejar notas que el navegador ignora.
Para crear tu primera página web solo necesitas un editor de código, un navegador y una carpeta donde guardar tu archivo index.html.
Al principio puede parecer la Matrix, mucho código y algo solo para genios, pero en realidad se trata de aprender los principios básicos.
Cuando entiendes la estructura, las etiquetas, los atributos y cómo funciona head y body, ya puedes empezar a crear tus propias páginas web desde cero.
