Introducción a la Programación (HTML, CSS, JS)
¿Imaginas crear tu propia página web desde cero, aunque nunca hayas programado? 🚀
En este curso “Introducción a la Programación: De Cero a tu Primera Página Web Interactiva” lo harás posible. Aprenderás las bases de HTML, CSS y JavaScript, las mismas tecnologías que usan los profesionales del desarrollo web.
Desde el primer día, trabajarás en proyectos reales. En el Módulo 1, entenderás cómo funciona la web y crearás tu primera página con textos, enlaces, imágenes y videos. Además, darás forma a tu propio proyecto: una página biográfica lista para mostrar al mundo.
En el Módulo 2, transformarás tu página en un sitio atractivo y moderno. Aprenderás a aplicar colores, tipografía y diseños flexibles con CSS. Finalmente, cerrarás el módulo con un proyecto que dejará claro que tienes ojo para el diseño.
En el Módulo 3, llega la magia: la interactividad. Con JavaScript, añadirás botones, mensajes y efectos que harán que tu web cobre vida. Por lo tanto, pasarás de tener una página estática a un sitio dinámico y funcional.
Al terminar, tendrás una página web completa, tus primeros proyectos para portafolio y la seguridad de que puedes seguir creciendo en el mundo del desarrollo.
✅ Aprende haciendo.
✅ Proyectos reales y aplicables.
✅ Resultados visibles desde el primer día.
No esperes más. 💻 Empieza hoy y crea la web que siempre soñaste.
-
1
¿Qué es la Web? Entendiendo Clientes, Servidores y el rol de HTML.En esta primera lección descubrirás qué es realmente la Web y cómo funciona “tras bambalinas”.
Aprenderás qué son el cliente y el servidor, cómo se comunican mediante peticiones y respuestas, y qué papel juegan los tres lenguajes esenciales de cualquier página: HTML (estructura), CSS (diseño) y JavaScript (interactividad). Esta base te ayudará a entender cada paso que darás en el curso y te preparará para crear tu primera página web desde cero. -
2
Tu Primera Página Web: La estructura básica de un documento HTML.
Guía de Estudio: Lección 1.2 - Tu Primera Página Web 📝
Esta guía te ayudará a repasar los elementos esenciales para crear tu primer documento HTML válido.
1. Objetivos de la Lección
-
Crear y nombrar correctamente un archivo HTML.
-
Entender la función de las etiquetas HTML de apertura y cierre.
-
Memorizar la estructura básica y obligatoria de cualquier página web.
-
Diferenciar entre las secciones
<head>y<body>y conocer su propósito.
2. Conceptos Clave
El Archivo
index.html-
Extensión
.html: Es fundamental que tu archivo termine con.html. Así, tanto tu computadora como los navegadores saben que es un documento web. -
Nombre
index.html: Este es el nombre estándar para la página de inicio o principal de un sitio web. Cuando un usuario visita un dominio (ej:www.misitio.com), el servidor busca automáticamente un archivo llamadoindex.htmlpara mostrarlo.
La Anatomía de una Etiqueta HTML
Las etiquetas son los bloques de construcción de HTML. Le dicen al navegador cómo estructurar y mostrar el contenido.
-
La mayoría de las etiquetas tienen una etiqueta de apertura (ej:
<body>) y una etiqueta de cierre (ej:</body>), que se diferencia por tener una barra inclinada (/). -
El contenido se coloca entre la etiqueta de apertura y la de cierre.
3. La Estructura Fundamental de HTML
Toda página web, sin importar cuán compleja sea, se basa en esta estructura esquelética. Es como los cimientos de una casa.
1.
<!DOCTYPE html>-
Propósito: Es la primera línea, siempre. No es una etiqueta HTML, sino una declaración. Le informa al navegador que el documento está escrito en la versión más reciente de HTML (HTML5). Esto asegura que la página se interprete correctamente.
2.
<html>-
Propósito: Es la etiqueta raíz que envuelve todo el contenido de la página. Todo lo demás (excepto el
<!DOCTYPE>) va dentro de<html>...</html>.
3.
<head>(La Cabeza)-
Propósito: Contiene metadatos e información para el navegador, no para el visitante. El contenido aquí no se muestra en la ventana principal de la página.
-
Contenido típico:
-
<title>: El texto que aparece en la pestaña del navegador. Es muy importante para el posicionamiento en buscadores (SEO) y para la experiencia del usuario. -
(Más adelante aprenderás a poner aquí también enlaces a archivos CSS, scripts, etc.)
-
4.
<body>(El Cuerpo)-
Propósito: ¡Aquí es donde ocurre la magia visible! 🎨 Todo el contenido que el usuario ve directamente en la página —textos, imágenes, videos, enlaces, etc.— debe ir dentro de la etiqueta
<body>...</body>.
4. Código de Ejemplo Completo
Este es el código completo que resume toda la lección. Puedes usarlo como plantilla para todos tus futuros proyectos.
HTML<!DOCTYPE html> <html> <head> <title>Mi Primera Página Web</title> </head> <body> ¡Hola, Mundo! </body> </html>
5. Resumen y Puntos a Recordar
-
Tu página principal debe llamarse
index.html. -
La estructura mínima indispensable es:
<!DOCTYPE html>,<html>,<head>, y<body>. -
El
<head>es para el navegador (como el<title>de la pestaña). -
El
<body>es para el usuario (todo el contenido visible).
¡Felicidades! 🥳 Ya conoces el esqueleto de la web. Ahora estás listo para empezar a añadir contenido y darle vida a tus páginas.
-
-
3
Textos y Títulos: Párrafos, encabezados y cómo dar formato al texto.
Aprende a estructurar el contenido de tu página web utilizando las etiquetas HTML esenciales para textos y títulos. Esta lección te enseña a crear jerarquías con encabezados (de
<h1>a<h6>), a organizar texto en párrafos (<p>), y a dar un significado especial a ciertas palabras con<strong>(importancia) y<em>(énfasis). Domina estas herramientas para crear contenido claro, legible y semánticamente correcto. -
4
Listas y Enlaces: Creando listas ordenadas/desordenadas y navegando por la web.
Esta lección enseña dos conceptos fundamentales de HTML para estructurar contenido y crear interactividad en una página web:
-
Organización de Información: Aprenderás a usar listas para agrupar elementos. Se explica la diferencia entre las listas desordenadas (
<ul>), que usan viñetas para ítems sin un orden específico, y las listas ordenadas (<ol>), que usan números para indicar una secuencia o pasos a seguir. -
Navegación Web: Se muestra cómo crear enlaces o hipervínculos (
<a>) para conectar páginas. La lección se enfoca en el uso del atributo esencialhrefpara especificar la URL de destino y en cómo controlar el comportamiento del enlace, como hacerlo abrir en una nueva pestaña.
-
-
5
Imágenes y Multimedia: Cómo añadir imágenes y videos.
Este video tutorial, titulado "Imágenes y Multimedia en HTML", explica cómo integrar contenido visual en páginas web. Comienza detallando el uso de la etiqueta
<img>para incorporar imágenes, enfatizando la importancia de los atributossrc(fuente del archivo) yalt(texto alternativo para accesibilidad y SEO). También se cubre la manipulación del tamaño de la imagen mediante los atributoswidthyheight. Finalmente, el tutorial aborda la inserción de videos, sugiriendo el método más común y sencillo: incrustar contenido desde plataformas externas como YouTube o Vimeo utilizando la etiqueta<iframe>. -
6
Proyecto Módulo 1: Crear una página biográfica simple sobre ti mismo
-
7
¿Qué es CSS? Las tres formas de añadir estilos a tu página.
-
8
¿Qué es Css? -
9
Selectores y Propiedades: Cómo "apuntar" a un elemento y cambiar su apariencia.
-
10
Colores y Fondos: Dominando el arte del color en tu web.
Aprende a controlar el aspecto visual de tu web dominando los colores y fondos con CSS. En esta lección descubrirás cómo cambiar el color del texto y los fondos, utilizar los diferentes formatos de color (nombres, hexadecimal, RGBA) para añadir transparencias, y establecer imágenes de fondo para crear diseños más impactantes y profesionales.
-
11
Tipografía Moderna: Usando fuentes personalizadas y dando estilo al texto.
-
12
Posicionamiento con Flexbox: Creando layouts flexibles y modernos.
-
13
Proyecto Módulo 2: Aplicar estilos y colores a tu página biográfica.
-
14
¿Qué es JavaScript? Tu primer "Hola Mundo" en la consola.
-
15
Variables y Tipos de Datos: Guardando información en la memoria.
-
16
Interactuando con el Usuario: alert, prompt y confirm.
-
17
El DOM (Document Object Model): Cómo JavaScript "ve" y manipula tu HTML.
-
18
Eventos: Haciendo que las cosas sucedan cuando el usuario hace clic o escribe.
-
19
Funciones: Creando bloques de código reutilizables.
-
20
Proyecto Módulo 3: Crear un Interruptor de Modo Oscuro / Modo Claro
Video source is missing or invalid.
