Crea tu primer archivo HTML desde cero

Curso Gratis de Programación Básica 2022

Contenido del curso

No sé dónde empezar

Fundamentos de Programación

Desarrollando un juego con HTML y JavaScript

Estilos con CSS

Optimización de código

Mapa con canvas

Backend: videojuego multijugador

Próximos pasos

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:39

Crea tu primer archivo HTML desde cero

Curso Gratis de Programación Básica 2022

Clase 3 de 84

Clase 3 / 84

Recursos

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.

Comentarios (1079)1079 comentarios

Carlos Eduardo Gomez García

Hace 4 años

☝ Hay un dicho que me encanta para describir las extensiones y es: "las extensiones son mera cortesía para tu sistema operativo" 🤓. ¿Por qué? Porque tal como menciona la clase, no importa qué extensión tengas, a final de cuentas, todo termina siendo un archivo de texto puro para tu computadora 😄. . ¡Sí! Literalmente puedes abrir cualquier archivo en un bloc de notas (aunque algunos de ellos te aparecerán con símbolos extraños si intentas abrirlo 😵). A lo que tu computadora le interesa es que ese archivo de texto que escribes contenga información que ella pueda leer e interpretar para poder mostrarte a ti algo en pantalla 💚. . Profundizo un poco más en cómo funciona esto en este blogpost 👇: . 💻 ¿Qué computadora necesito para programar?

Samuel Steven Bernal Martínez

muy recomendado este blog!

Carlos Olaya

Buen aporte del Blog

Napoleon Calcina

Un pequeño ejemplo para comprender mejor la parte de HTML, CSS y JS Vease a HTML como el esqueleto, la estructura del programa. CSS como el diseño o apariencia que se le dará. JS como el cerebro que ejecutará acciones. .

Carlos Roberto Doblado Ochoa

Excelente caracterización para comprender mejor los conceptos, gracias.

eduardo zampa

buena analogia gracias

Un tip para abrir el archivo de manera rápida en el navegador (En mi caso Chrome) es usar las teclas ++++Control + O++++

Luis Giordán

Justo lo que necesitaba, gracias!!

Juan Carlos Silva Vargas

Control + T, si tienen el navegador en Inglés (para abrir una nueva pestaña).

Rolando Tarqui Benito

3 - Crea tu primer sitio web

Estructura de un archivo: <nombre de archivo>.<extension>
- archivo**.extension**
- carta**.docx**
- hoja**.xls**
- pagina**.html** →
HTML (Hyper Text Markup Language): lenguaje sobre el que esta construido internet, es un formato que engloba otras tecnologias que nos permiten usar sitios WEB. Ej: gifs, imagenes (png, jpg), video, diseño,
CSS (Hojas de estilo en cascada): lenguaje de declaración del estilos de diseño de una pagina web. Puede ir dentro del HTML o aparte.
JavaScript: Es un lenguaje de programación, de los más usados en el planeta. Con el se puede construir lo que sea. Pero antes se debe estructurar la información con HTML

<aside> 💡 HTML define la estructura de una pagina, CSS el diseño de la interfaz y JS se encarga de las funcionalidades </aside>

Por dentro todos los archivos son textos, organizados de distintas forma. por eso es posible abrir cualquier archivo con un editor de texto como block de notas

1ra pagina web con html:

<h2>Mi primer sitio WEB</h2>
Hola <strong>querida</strong> clase

Karina L Biasini

Resumen espectacular!! 🙏

Javier Albeiro Blandon Henao

Gracias por el aporte

Matías Diego Balcázar Ureña

Kristhian Lizcano

Jajaja

Mario Merlo

Jajaja muy cierto

Jhon Deiby Salazar Rayo

Para los usuarios de macOS, para crear un documento de texto, seria de esta forma.

-Buscan la aplicación TextEdit y la abren

Luego se van a nuevo documento

Donde dice archivo le pican y van a donde dice guardar

Luego ya le ponen el nombre y la formato seria la extensión que necesitan

Bernardo Trejos

Muchas gracias!

Freddy Vega

Team Platzi

Buen mini tutorial.

Andrés Sanchez

Siendo sincero estoy en mi 4 semestre de ingeniería de software y no siento que haya aprendido lo suficiente, así que decidí dejar la flojera a un lado y por fin comenzar mi camino autodidacta, esto depende de mi y agradezco a platzi por ayudar en mi proceso

Gran actitud Andrés. Lo único que importa es tu conocimiento y como creces personalmente. Genial 💚

David Alonso Flores Castro

Hola Andres! Una pregunta, acabo de aplicar para la carrera de Ing. en Software y tu comentario me consterna un poco, en qué Universidad estás estudiando (sin afán de quemar a nadie)?

Pryscilla Sanchez

Está churris el Freddy :D ♥

Fabio Castro

jajaja buena

sara barrios

l,no

Jhovani Aguirre

Mi esposa me mantendra 6 meses para que yo pueda dedicarme enteramente a estudiar los cursos de Platzy, estoy emocionado 💗 a darle duro

Daniela Villota Araujo

A mi tambiéeen (mi mamá), pero en este semestre, además, debo terminar una maestría que empecé, nada relacionado con programación !! Estoy asustada por si podré hacer ambas cosas! Ánimo!

Emanuel Cordova

Que gran oportunidad Jhovani, aprovéchala.

Franco Moreira

Este curso se actualizó xq en el otro salía Freddy sin barbita..

Eloy Chávez Dev

Chii, se renovó totalmente, es hermoso!!! y el curso también hehe

haha esa referencia sospechosa :P

Resumen de la clase 😃

Estructura de un archivo: <nombre de archivo>.<extension>
- archivo.extension
- carta.docx
- hoja.xls
- pagina.html
HTML (Hyper Text Markup Language): lenguaje sobre el que esta construido internet, es un formato que engloba otras tecnologias que nos permiten usar sitios WEB. Ej: gifs, imagenes (png, jpg), video, diseño,
CSS (Hojas de estilo en cascada): lenguaje de declaración del estilos de diseño de una pagina web. Puede ir dentro del HTML o aparte.
JavaScript: Es un lenguaje de programación, de los más usados en el planeta. Con el se puede construir lo que sea. Pero antes se debe estructurar la información con HTML

💡 HTML define la estructura de una pagina, CSS el diseño de la interfaz y JS se encarga de las funcionalidades

Por dentro todos los archivos son textos, organizados de distintas forma. por eso es posible abrir cualquier archivo con un editor de texto como block de notas, existen otros como notepad, lo mas usados para programar son visual estudio code, sublime text entre otros.

Eliecer Hernandez

Gracias por el resumen!

Francisco Hunahpu Sahagun Gonzalez

Buen Resumen Gracias!!

al mn

Tomé el anterior curso de programación aún asi tomaré este para seguir aprendiendo 💪💚

luisa Garcia

le sabes

Javier Alvarado

Yo iba por el 16. Ahora empece este tambien. Asi refuerzo lo que aprendo del primero.

marco cega

Pa la proxima tambien se debe explicar a lo que usamos el sistema iOs

JOSE BALDI

como se hace para poner en modo "pro" lo de los archivos con ios?

María Fernanda Pinto López

Es verdad, yo también uso ios y no trabaja igual

Griger Ratia

👉Aprender HTML, CSS y JavaScript es fundamental. Por eso es recomendable no correr demasiado rápido mientras intentas dominarlo.

🧐Mientras mejor afiances tus conocimientos de estas tres tecnologías en tu primer intento, no tendrás que volver al principio tantas veces a repasar lo que debiste haber aprendido bien.

🥇En esta carrera no debes llegar de primero, lo importante es llegar. Te aseguro que si corres demasiado rápido no serás de los primeros, es muy probable que tardes mucho más.

Luis Infante

Así es, yo tampoco se nada de programación pero aquí en este curso explican muy bien, así que vamos lento pero seguro.

Juan Camilo Mesa Muñoz

Es como una maratón, si agotas tus fuerzas al principio, no podrás tu 100% en los momentos más cruciales.

Jorge Del Pezo

Like si amas a Freddy :D

Selene del Sagrario Martínez Pinto

Para los usuarios de Mac que tienen problemas para visualizar las etiquetas de HTML vayan a w3schools.com/html/html_editors.asp ahí viene todo, les pondría captura de pantalla pero es la primera vez que hago un aporte y no sé cómo hacerle 😆😂

Jorge Bejarano

¡Funcionó! Muchas gracias, al principio no pude visualizar las etiquetas pero con esto lo logré.

Aquí dejo la captura 👇

Manuel Pulido

Muchas gracias aportazo!!! me estaba frustrando con el Mac.

Max Castillo

Zaul Almazan

como lo lograste en Mac?

Luisa Fernanda Morales

Hace 3 años

Cristhian Camilo Jaramillo González

Bueno, aquí voy de nuevo, el anterior curso no lo terminé nunca, a pesar de intentarlo varias veces, espero en verdad poder terminar este y sobretodo aprender de verdad a programar y poder darle un futuro diferente a mi familia. gracias Platzi por tanto amor que se ve en cada clase.

Eduardo Monzón

Gracias por compartir ese lindo comentario, Cristhian, mucha fuerza.

Sarah Daniela Zafrani Lamoth

Hace 2 años

jjjjjsjsjs

Valeria Gómez

Hola! cuál sería el equivalente en macbook para "nuevo, documento de texto"? ya habilité la opción para visualizar las extensiones, gracias

Para crear en MacOS un documentos de texto, debes hacer lo siguiente, busca la app que se llama "TextEdit”

Luego te deberá abrir algo como esto →

Le das a donde dice nuevo documento de texto

Después de abrirlo, te saldrá algo como esto, y luego te vas al apartado de archivo, la opción que dice “GUARDAR”

Ya le pones el nombre al archivo y en el formato le das HTML O el que necesites :D

Andrea Fernandez

si, pero la opción de deiby es paga. existe otra?

Tania Zepeda

Literal no se ABOSOLUTAMENTE NADA de esto jaja, pero me llama mucho la atención la programación porque me encantan los video juegos, pero me da miedo por como se ve todo. Espero de aquí a un año o menos, aprender como lo han hecho mucho de ustedes, es super bonito ver el entusiasmo de los maestros al explicar y de los alumnos dejando comentarios con grandes aportes. ANIMOS para todos :3

rosy vargas

como te a ido ??

Saraí Gonzalez

También yo! Yo pase de ser enfermera y entrenadora deportiva a empezar a ver programacion! Tengo miedo pero vamos adelante! 😁

Fundamentos de Programación

Programa tu primer videojuego desde cero

Tu primera variable en la consola del navegador

Crea tu primer archivo HTML desde cero

Estructura básica de HTML: head y body

Estructura de árbol en HTML y JavaScript

Instala VS Code y configura tu primer HTML

Variables con let, prompt y alert

Condicionales if y else en JavaScript

Lógica if-else en piedra papel tijera

Números aleatorios con Math.random y Math.floor

Creación y uso de funciones en programación

Cómo funcionan los ciclos en programación

While en JavaScript: cómo evitar loops infinitos

Rutas relativas para separar JS del HTML

Qué es el DOM y los eventos en JS

Desarrollando un juego con HTML y JavaScript

Cómo usar section, id y span en HTML

Radio buttons para elegir mascota en HTML

Cómo hacer que un botón responda al clic

Detectar el input seleccionado con checked

Detectar la mascota seleccionada con checked

innerHTML para mostrar la mascota elegida

Mascota enemiga aleatoria con JavaScript

Selección de ataques con variables globales en JS

Ataque aleatorio enemigo en JavaScript

createElement y appendChild en el DOM

Lógica de ganaste, perdiste o empataste en JS

Tablas de verdad con AND, OR y NOT

Vidas dinámicas con innerHTML en JavaScript

Validar vidas en cero con JavaScript

Reiniciar juego con location.reload

Mostrar y ocultar secciones con JavaScript

Estilos con CSS

Selectores, propiedades y valores en CSS

block, inline e inline-block en CSS

Centrar elementos en CSS con Flexbox

Modelo de caja en CSS explicado

Diseño y Estilo de Páginas Web con HTML y CSS

Cómo estilizar botones con CSS y Google Fonts

Estilos CSS para Mejorar la Interfaz de un Juego

Estiliza botones de ataque con Flexbox

Separación de mensajes y estilos en JavaScript y HTML

CSS Grid para organizar ataques en columnas

Diseño responsivo con media queries CSS

CSS :checked para resaltar selección activa

Optimización de código

Refactoriza tu JavaScript antes de escalar

let vs const al refactorizar funciones

Clases y objetos en JavaScript explicados

Clases y objetos en JavaScript con Mokepones

Uso de Arreglos para Almacenar Objetos en JavaScript

Ataques de Mokepon con arrays y push

Renderizar arrays en HTML con forEach

Cómo evitar null al inyectar HTML dinámico

Eliminar hardcode con fuente de verdad

Selección aleatoria de mascotas con arrays

Botones de ataque dinámicos con for loop

Botones de ataque dinámicos con forEach

Eventos de clic en botones dinámicos con JS

Secuencia de ataques aleatorios del enemigo

Lógica de combate por turnos en JavaScript

Lógica de victorias en un juego JavaScript

Optimización y Corrección de Errores en Juegos Web con JavaScript

Mapa con canvas

Dibuja imágenes en canvas con JavaScript

Mover personajes en canvas con JavaScript

Movimiento continuo en canvas con setInterval

Eventos de Teclado para Controlar Personajes en Juegos

Fondo del canvas y mascota dinámica en JS

Métodos de clase para pintar enemigos en Canvas

Cómo detectar colisiones entre objetos en JS

Conectar colisiones con ataques en JS

Ajuste Responsivo de Mapas en Pantallas con JavaScript

Estilos responsive para el mapa con CSS

Backend: videojuego multijugador

Cómo funciona la arquitectura cliente servidor

Instalación de Node.js en Windows para desarrollo backend

Hola Mundo con Node.js y npm

Servidor web con Express.js desde cero