Aprender a crear tu primer archivo HTML empieza por algo más básico de lo que parece: entender cómo funciona el sistema de archivos de tu computadora. Si quieres programar, necesitas dejar de ver tu sistema operativo en modo principiante y empezar a tratarlo como una herramienta profesional, donde cada archivo tiene un nombre, un punto y una extensión que define qué tipo de archivo es.
¿Qué es una extensión de archivo y por qué importa al programar?
Todo archivo, sin importar si estás en Windows, Linux, Mac, iOS o Android, tiene la misma estructura: un nombre, un punto y una extensión. En las computadoras modernas esa extensión suele estar oculta, lo que la vuelve invisible para el usuario común, pero siempre está ahí.
Las letras después del punto identifican el tipo de archivo:
- carta.docx corresponde a un documento de Word.
- hoja.xlsx corresponde a una hoja de cálculo de Excel.
- pagina.html corresponde a una página web.
¿Qué significa HTML? HyperText Markup Language, o lenguaje de etiquetas de hipertexto. Es el lenguaje sobre el que está construido Internet y el que vas a aprender primero.
HTML funciona como el formato que engloba otras tecnologías web. Cuando ves una imagen en un sitio, estás usando JPG, PNG o GIF. Cuando ves diseño aplicado, estás viendo CSS, que significa Cascading Style Sheets u hojas de estilo en cascada. Y cuando una página tiene interacción real, ahí entra JavaScript, el lenguaje de programación más usado del planeta y con el que está construido Platzi.
¿Cómo configurar Windows para ver las extensiones de archivo?
Antes de crear tu archivo, necesitas que tu sistema te muestre las extensiones reales. En Windows, abre el explorador de archivos, ve al menú Vista y activa dos opciones clave:
- Extensiones de nombre de archivo.
- Elementos ocultos.
Con esto activado, ya puedes ver y editar los nombres completos de tus archivos, incluyendo el .txt, .html o cualquier otro.
¿Cómo crear la carpeta y el archivo HTML?
En el escritorio crea una carpeta nueva y llámala Programar. Ábrela, da clic derecho y selecciona Nuevo, luego Documento de texto. Verás aparecer un archivo terminado en .txt.
Ahora cámbiale el nombre. Quita la parte .txt y escribe pagina.html. Windows te va a preguntar si estás seguro de cambiar la extensión, porque eso puede inutilizar el archivo. Tu respuesta es sí. Y aquí viene lo interesante: el archivo cambia de tipo aunque por dentro sigue siendo texto plano.
¿Por dentro qué es un archivo HTML? Es texto plano, igual que un .txt. La diferencia está en la extensión, que le indica al navegador cómo interpretarlo.
¿Cómo escribir tu primera línea de código HTML?
Abre el Bloc de notas, también conocido como Notepad. Ve a Archivo, luego Abrir, navega hasta el escritorio y entra a la carpeta Programar. Como el Bloc de notas por defecto solo muestra archivos .txt, cambia el filtro a Todos los archivos para que aparezca tu pagina.html.
Escribe dentro del archivo:
html
Hola, querida clase
Guarda con Archivo, Guardar. Luego abre el navegador, ve a Archivo, Abrir, busca tu archivo y verás el mensaje renderizado. Ya tienes una página web funcionando.
¿Cómo aplicar negritas y títulos con etiquetas HTML?
Las etiquetas son las instrucciones que van entre los signos menor que y mayor que. Le dicen al navegador cómo mostrar el contenido. Para poner una palabra en negrita, envuélvela con la etiqueta strong:
html
Hola, <strong>querida</strong> clase
Fíjate en el detalle: la etiqueta de cierre lleva una barra inclinada (slash) antes del nombre. La programación es exacta, no admite un espacio de más ni de menos.
Para agregar un título principal, usa la etiqueta h1 arriba del mensaje:
html
<h1>Mi primer sitio web</h1>
Hola, <strong>querida</strong> clase
Guarda el archivo y vuelve al navegador. En lugar de abrirlo otra vez, da clic en el ícono de refrescar y verás los cambios al instante.
¿Por qué no se actualiza mi página web? Porque no guardaste el archivo. El navegador solo muestra lo que está escrito en el disco, así que cada cambio en el editor necesita un Archivo, Guardar antes de refrescar.
¿Qué herramientas y conceptos clave aparecen en esta práctica?
A lo largo del ejercicio aparecen varios elementos que vale la pena tener claros porque los vas a usar todo el tiempo:
- Sistema de archivos y extensiones [00:24]: estructura nombre + punto + extensión presente en Windows, Linux, Mac, iOS y Android.
- HTML [01:30]: lenguaje de etiquetas de hipertexto, base estructural de Internet.
- CSS [02:00]: hojas de estilo en cascada para definir el diseño visual.
- JavaScript [02:30]: lenguaje de programación más usado del mundo, con el que está construido Platzi.
- Bloc de notas o Notepad [04:10]: editor básico que abre cualquier archivo de texto, incluido HTML.
- Etiqueta strong [05:30]: aplica negrita al texto que envuelve.
- Etiqueta h1 [06:00]: define el título principal de la página.
- Ciclo guardar y refrescar [06:40]: flujo básico para ver cambios reflejados en el navegador.
Con esta estructura mínima ya tienes lo que necesitas para empezar a programar tus propias páginas. ¿Qué etiqueta vas a probar primero después de strong y h1? Cuéntame en los comentarios qué experimentaste al refrescar tu navegador por primera vez.
