Programación guiada: cree una página web sencilla
Siga instrucciones paso a paso para crear una página divertida
Programación guiada: cree una página web sencilla es una lección gratuita de HTML for Kids en CoddyKit. Esta es la lección 1 de 2. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML for Kids, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML for Kids incluye 2 lecciones en total.
Creación de su primera página web
Programación guiada: cree una página web sencilla
¡Bienvenido a su primer proyecto de programación! En esta lección, crearemos una página web sencilla paso a paso. Siga el proceso para ver cómo se combinan HTML, CSS y los conceptos básicos de diseño.
Objetivo: Crear una página de perfil personal.
Configuración del archivo
Paso 1: Configuración del archivo
Primero, creemos una carpeta para su proyecto y añadamos un archivo HTML:
- Cree una carpeta nueva en su computadora llamada MyWebPage.
- Dentro de la carpeta, cree un archivo llamado
index.html. - Abra el archivo en su editor de código (por ejemplo, Visual Studio Code).
Consejo: El nombre de archivo index.html se utiliza habitualmente para la página principal de un sitio web.
Adición de la estructura básica
Paso 2: Adición de la estructura básica
Ahora, añada la estructura HTML básica a su archivo. Esta incluye las etiquetas <!DOCTYPE html>, <html>, <head> y <body>.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>My Profile Page</title>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
</body>
</html>
Adición de una sección de perfil
Paso 3: Adición de una sección de perfil
Añadamos una sección para mostrar su nombre y una breve descripción.
Ejemplo:
<body>
<h1>Welcome to My Page</h1>
<p>This is my personal profile page.</p>
<!-- Profile Section -->
<h2>About Me</h2>
<p>Hi, I’m [Your Name]. I’m learning web development, and this is my first project!</p>
</body>
Adición de una imagen
Paso 4: Adición de una imagen
A continuación, añadamos una foto de perfil mediante la etiqueta <img>. Guarde una imagen en la carpeta del proyecto y vincúlela a su archivo HTML.
Ejemplo:
<!-- Profile Picture -->
<img src="profile.jpg" alt="My Profile Picture" width="200" />
Adición de una lista de pasatiempos
Paso 5: Adición de una lista de pasatiempos
Cree una lista no ordenada de sus pasatiempos mediante las etiquetas <ul> y <li>.
Ejemplo:
<!-- Hobbies Section -->
<h2>My Hobbies</h2>
<ul>
<li>Reading books</li>
<li>Playing video games</li>
<li>Coding projects</li>
</ul>
Adición de un enlace
Paso 6: Adición de un enlace
Añada un enlace a su sitio web favorito mediante la etiqueta <a>.
Ejemplo:
<!-- Favorite Website -->
<h2>My Favorite Website</h2>
<p>Check out my favorite website: <a href="https://example.com" target="_blank">Example</a>.</p>
Adición de estilos en línea
Paso 7: Adición de estilos en línea
Añadamos algunos estilos básicos directamente a su HTML mediante el atributo style.
Ejemplo:
<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>
<p style="font-size: 16px; color: gray;">This is my personal profile page.</p>
Repaso del proyecto de página web
¡Excelente trabajo!
¡Felicidades! Ha creado su primera página web paso a paso. En este proyecto, ha aprendido a estructurar su HTML, añadir contenido y aplicar estilos en línea. ¡Siga experimentando y añadiendo nuevas secciones a su página!
Consejo: ¡Intente alojar su página en GitHub Pages para compartirla con sus amigos!
Preguntas frecuentes
¿La lección «Programación guiada: cree una página web sencilla» es gratis?
Sí — el texto completo de «Programación guiada: cree una página web sencilla» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML for Kids, actualiza a CoddyKit PRO. El curso de HTML for Kids incluye 2 lecciones en total.
¿Qué aprenderé en «Programación guiada: cree una página web sencilla»?
Siga instrucciones paso a paso para crear una página divertida Practicas HTML for Kids con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML for Kids?
No se requiere experiencia previa. HTML for Kids en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 2.
¿Cuánto tiempo toma la lección «Programación guiada: cree una página web sencilla»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML for Kids?
Sí. Cada lección de HTML for Kids incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Programación guiada: cree una página web sencilla
- Búsqueda del tesoro en HTML