Clase 1 — Introducción al desarrollo Front-End y estructura básica de HTML

Descripción general

Este material funciona como apunte de referencia para la primera clase de la materia Desarrollo de Sistemas Web (Front-End). Su propósito es dejar por escrito los conceptos fundamentales vistos al inicio de la cursada, con explicaciones claras, ejemplos y fragmentos de código simples.

La idea no es solamente mostrar etiquetas o definiciones aisladas, sino ayudar a construir una base conceptual firme para lo que viene después. En esta primera etapa importa más entender el mapa general que memorizar muchos elementos.

Objetivos de esta clase

Al finalizar esta clase, el estudiante debería poder:

comprender qué es el desarrollo Front-End;
diferenciar HTML, CSS y JavaScript;
entender cómo se relacionan estructura, presentación e interacción;
reconocer la estructura básica de un documento HTML;
escribir una página HTML mínima;
identificar errores comunes al comenzar.

1. ¿Qué es el desarrollo Front-End?

El desarrollo Front-End es la parte de una aplicación web con la que interactúa directamente el usuario desde el navegador.

Cuando una persona entra a un sitio web, ve texto, botones, imágenes, formularios, menús, enlaces y mensajes en pantalla. Todo eso forma parte del Front-End.

El Front-End no se limita a lo visual. También incluye:

organización del contenido;
jerarquía de la información;
interacción con el usuario;
adaptación a distintos tamaños de pantalla;
claridad en la experiencia de uso.

Ejemplo cotidiano

Pensemos en una pantalla de inicio de sesión.

Lo que pertenece al Front-End es, por ejemplo:

el campo para escribir el correo electrónico;
el campo para la contraseña;
el botón de ingreso;
el mensaje de error si falta completar algo;
la forma en que todo eso se ve y se acomoda en pantalla.

En cambio, verificar si el usuario existe o si la contraseña es correcta pertenece generalmente al Back-End.

2. Front-End y Back-End

Aunque en esta materia el foco está en el Front-End, conviene entender la diferencia general.

Parte	Qué hace
Front-End	Muestra la interfaz y gestiona la interacción visible con el usuario
Back-End	Procesa lógica, datos, autenticación, base de datos y operaciones internas

Idea clave

El usuario usa directamente el Front-End.
El Back-End trabaja detrás del sistema.

3. Tecnologías principales del Front-End

En esta materia vamos a trabajar principalmente con tres tecnologías:

HTML
CSS
JavaScript

Es importante entender desde el principio que no cumplen la misma función.

4. HTML: estructura del contenido

HTML es un lenguaje de marcado. Su función es estructurar el contenido de una página web.

Con HTML definimos qué hay en la página:

títulos;
párrafos;
listas;
enlaces;
imágenes;
tablas;
formularios.

Ejemplo

<h1>Bienvenidos</h1>
<p>Este es el sitio oficial de la materia.</p>

En ese ejemplo, HTML indica que hay un encabezado principal y un párrafo.

Qué no hace HTML

HTML no define:

colores;
tamaños visuales;
animaciones;
interacciones complejas.

Eso corresponde a otras tecnologías.

5. CSS: presentación visual

CSS es un lenguaje de estilos. Su función es definir cómo se ve el contenido.

Con CSS se puede definir:

color del texto;
color de fondo;
tamaño de letra;
tipografía;
márgenes;
bordes;
distribución visual;
adaptación responsive.

Ejemplo

h1 {
  color: blue;
  font-size: 40px;
}

Acá no se crea el título. El título ya existe en HTML.
CSS solo cambia su apariencia.

6. JavaScript: comportamiento e interacción

JavaScript es un lenguaje de programación. Su función es agregar comportamiento a la página.

Con JavaScript se puede:

responder a clics;
validar formularios;
mostrar mensajes;
modificar contenido dinámicamente;
reaccionar a acciones del usuario.

Ejemplo

alert("Bienvenidos a la clase");

Ese código muestra una ventana de alerta.

7. Diferencia entre HTML, CSS y JavaScript

Una forma simple de recordar la diferencia es esta:

HTML estructura;
CSS presenta;
JavaScript agrega comportamiento.

Ejemplo integral

<h1>Hola</h1>

h1 {
  color: green;
}

console.log("Se cargó la página");

En ese caso:

HTML crea el título;
CSS cambia su color;
JavaScript ejecuta una acción.

8. Cómo funciona una página web

Cuando una persona entra a una web, el navegador recibe archivos y los interpreta.

De forma simplificada, el proceso es así:

el usuario entra a una dirección;
el navegador obtiene el contenido;
interpreta HTML;
aplica CSS;
ejecuta JavaScript;
muestra el resultado en pantalla.

Idea importante

El navegador no adivina nada.
Hace lo que el código le indica.

Por eso, si el código está mal escrito o mal organizado, la página puede verse mal o no funcionar correctamente.

9. Estructura básica de un documento HTML

Todo documento HTML mínimo tiene una estructura base.

Ejemplo completo

<!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</title>
</head>
<body>
  <h1>Hola mundo</h1>
  <p>Esta es mi primera página web.</p>
</body>
</html>

Este es el ejemplo más importante de esta clase. Conviene leerlo varias veces hasta entender qué hace cada parte.

10. Explicación línea por línea

`<!DOCTYPE html>`

Indica que el documento está escrito en HTML5.

<!DOCTYPE html>

No es una etiqueta común. Es una declaración que ayuda al navegador a interpretar correctamente el documento.

`<html lang="es">`

Es el elemento raíz del documento. Todo el contenido HTML queda dentro de esta etiqueta.

<html lang="es">

El atributo lang="es" indica que el idioma principal del documento es español.

`<head>`

Contiene información sobre el documento que no forma parte del contenido principal visible.

<head>

Dentro de head suelen colocarse metadatos y configuraciones.

`<meta charset="UTF-8">`

Define la codificación de caracteres del documento.

<meta charset="UTF-8">

Esto permite mostrar correctamente tildes, eñes y otros caracteres especiales.

`<meta name="viewport" ...>`

Ayuda a que la página se adapte mejor a dispositivos móviles.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

`<title>`

Define el texto que aparece en la pestaña del navegador.

<title>Mi primera página</title>

Esto no aparece como contenido principal dentro de la página.

`<body>`

Contiene todo lo que el usuario ve en pantalla.

<body>

Dentro de body van los títulos, párrafos, imágenes, listas, formularios y demás elementos visibles.

`<h1>`

Representa un encabezado principal.

<h1>Hola mundo</h1>

`<p>`

Representa un párrafo.

<p>Esta es mi primera página web.</p>

11. Diferencia entre `title` y `h1`

Esta confusión es muy común al principio.

Elemento	Dónde se ve	Para qué sirve
`title`	En la pestaña del navegador	Identifica el documento
`h1`	Dentro de la página	Muestra el encabezado principal visible

Ejemplo

<title>Clase 1</title>
<h1>Introducción al Front-End</h1>

Acá:

Clase 1 aparece en la pestaña;
Introducción al Front-End aparece dentro del contenido.

12. Etiquetas de apertura y cierre

La mayoría de las etiquetas HTML tienen apertura y cierre.

Ejemplo correcto

<p>Este es un párrafo.</p>

Error común

<p>Este es un párrafo.

En ese caso falta la etiqueta de cierre.

13. Estructura jerárquica

HTML no es texto suelto. Es una estructura ordenada.

Ejemplo

<html>
  <head>
    <title>Ejemplo</title>
  </head>
  <body>
    <h1>Título</h1>
    <p>Contenido.</p>
  </body>
</html>

Acá:

title está dentro de head;
h1 y p están dentro de body;
head y body están dentro de html.

14. Anidación

Anidar significa colocar elementos dentro de otros respetando el orden correcto.

Ejemplo correcto

<body>
  <p>Hola</p>
</body>

Ejemplo incorrecto

<body>
  <p>Hola
</body>
</p>

Ahí el cierre está mal ubicado.

15. Primeros ejemplos simples

Ejemplo 1: título y párrafo

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo 1</title>
</head>
<body>
  <h1>Bienvenidos</h1>
  <p>Este es un ejemplo básico.</p>
</body>
</html>

Ejemplo 2: dos párrafos

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejemplo 2</title>
</head>
<body>
  <h1>Presentación</h1>
  <p>Mi nombre es Ana.</p>
  <p>Estoy aprendiendo desarrollo web.</p>
</body>
</html>

Ejemplo 3: contenido más personal

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi perfil</title>
</head>
<body>
  <h1>Juan Pérez</h1>
  <p>Estudio desarrollo de software.</p>
  <p>Me interesa aprender HTML, CSS y JavaScript.</p>
</body>
</html>

16. Ejemplos comparados

Correcto

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Correcto</title>
</head>
<body>
  <h1>Título principal</h1>
  <p>Texto visible.</p>
</body>
</html>

Incorrecto

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Incorrecto</title>
  <h1>Título principal</h1>
</head>
<body>
  <p>Texto visible.</p>
</body>
</html>

Qué está mal

El h1 no debería ir dentro de head.
El contenido visible debe ir dentro de body.

17. Más ejemplos de estructura básica

Ejemplo con varios títulos y párrafos

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Clase Front-End</title>
</head>
<body>
  <h1>Desarrollo Front-End</h1>
  <p>El Front-End es la parte visible de una aplicación web.</p>
  <p>Trabajaremos con HTML, CSS y JavaScript.</p>
</body>
</html>

Ejemplo con texto de la materia

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Desarrollo de Sistemas Web</title>
</head>
<body>
  <h1>Clase 1</h1>
  <p>Introducción al desarrollo Front-End.</p>
  <p>Estructura básica de HTML.</p>
</body>
</html>

18. Qué parte se ve y qué parte no se ve

No visible directamente en la página

DOCTYPE
html
head
meta
title como contenido principal

Visible dentro de la página

body
h1
p

Ejemplo

<head>
  <title>Mi sitio</title>
</head>
<body>
  <h1>Bienvenidos</h1>
  <p>Este texto sí se ve en la página.</p>
</body>

19. Errores comunes al comenzar

1. Confundir `title` con `h1`

title no reemplaza al encabezado visible de la página.

2. Escribir contenido dentro de `head`

El contenido visible debe ir en body.

3. Olvidar cerrar etiquetas

Por ejemplo:

<p>Hola

4. Guardar el archivo sin extensión `.html`

El archivo debería llamarse, por ejemplo:

index.html

5. No actualizar el navegador

A veces el código fue corregido, pero no se recargó la página.

20. Ejemplo de archivo `index.html`

Un primer archivo típico puede verse así:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Presentación personal</title>
</head>
<body>
  <h1>María López</h1>
  <p>Estoy cursando Desarrollo de Sistemas Web.</p>
  <p>Me interesa aprender a construir interfaces web.</p>
</body>
</html>

21. Qué conviene mirar cuando algo no funciona

Cuando una página no sale como esperamos, conviene revisar:

si el archivo está guardado como .html;
si faltan etiquetas de cierre;
si el contenido visible está dentro de body;
si el título de pestaña está dentro de title;
si el navegador fue actualizado.

22. Ejercicios resueltos

Ejercicio 1

Consigna: crear una página con título de pestaña, un encabezado principal y un párrafo.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Ejercicio 1</title>
</head>
<body>
  <h1>Mi primera práctica</h1>
  <p>Este es mi primer ejercicio en HTML.</p>
</body>
</html>

Ejercicio 2

Consigna: crear una presentación personal con dos párrafos.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Presentación</title>
</head>
<body>
  <h1>Lucía Fernández</h1>
  <p>Tengo interés en el desarrollo web.</p>
  <p>Quiero aprender a construir páginas ordenadas y claras.</p>
</body>
</html>

Ejercicio 3

Consigna: hacer una página sobre la materia.

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Materia</title>
</head>
<body>
  <h1>Desarrollo de Sistemas Web</h1>
  <p>En esta materia estudiaremos Front-End.</p>
  <p>Empezaremos con HTML, luego CSS y JavaScript.</p>
</body>
</html>

23. Mini comparación entre HTML, CSS y JavaScript

HTML

<h1>Hola</h1>

Crea un título.

CSS

h1 {
  color: red;
}

Cambia cómo se ve ese título.

JavaScript

alert("Hola");

Genera una acción o comportamiento.

24. Qué estamos aprendiendo realmente en esta primera clase

Aunque parece que solo estamos viendo etiquetas básicas, en realidad estamos construyendo ideas importantes:

que una página tiene estructura;
que no todo lo que está en el archivo se muestra visualmente;
que cada tecnología cumple un rol distinto;
que el navegador interpreta instrucciones;
que escribir con orden es parte del desarrollo web.

25. Actividad propuesta

Crear un archivo llamado index.html que contenga:

un title en la pestaña;
un h1 con tu nombre;
dos párrafos de presentación;
una breve descripción de por qué te interesa la materia.

Modelo posible

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Mi presentación</title>
</head>
<body>
  <h1>Tu nombre</h1>
  <p>Estoy cursando Desarrollo de Sistemas Web.</p>
  <p>Me interesa aprender a crear páginas web bien estructuradas.</p>
</body>
</html>

26. Preguntas de repaso

¿Qué es el desarrollo Front-End?
¿Qué diferencia hay entre HTML, CSS y JavaScript?
¿Qué función cumple head?
¿Qué diferencia hay entre title y h1?
¿Qué parte del documento contiene el contenido visible?
¿Qué significa que HTML tenga una estructura jerárquica?
¿Qué es la anidación?

27. Respuestas breves de repaso

¿Qué es el Front-End?

La parte visible e interactiva de una aplicación web.

¿Qué hace HTML?

Estructura el contenido.

¿Qué hace CSS?

Define la presentación visual.

¿Qué hace JavaScript?

Agrega comportamiento e interacción.

¿Dónde va el contenido visible?

Dentro de body.

¿Dónde aparece el texto de la pestaña?

Dentro de title.

28. Resumen final

En esta primera clase vimos la base del desarrollo Front-End. Entendimos que el usuario interactúa con una interfaz construida con distintas tecnologías que cumplen roles diferentes.

Aprendimos que:

HTML estructura el contenido;
CSS define cómo se ve;
JavaScript agrega comportamiento.

También trabajamos la estructura básica de un documento HTML y analizamos los elementos principales:

<!DOCTYPE html>
html
head
meta
title
body
h1
p

Además, vimos reglas básicas como apertura y cierre de etiquetas, jerarquía y anidación, y revisamos errores frecuentes de principiante.

La próxima etapa será profundizar en HTML con más elementos para organizar contenido real, especialmente:

encabezados;
párrafos;
listas;
enlaces;
imágenes.

29. Idea clave para conservar

Una página web no se construye toda junta.
Se construye por capas:

primero la estructura;
después la presentación;
luego la interacción.

Ese orden conceptual es importante para toda la materia.

Última modificación: lunes, 20 de abril de 2026, 18:19

Clase 1 — Introducción al desarrollo Front-End y estructura básica de HTML

Descripción general

Objetivos de esta clase

1. ¿Qué es el desarrollo Front-End?

Ejemplo cotidiano

2. Front-End y Back-End

Idea clave

3. Tecnologías principales del Front-End

4. HTML: estructura del contenido

Ejemplo

Qué no hace HTML

5. CSS: presentación visual

Ejemplo

6. JavaScript: comportamiento e interacción

Ejemplo

7. Diferencia entre HTML, CSS y JavaScript

Ejemplo integral

8. Cómo funciona una página web

Idea importante

9. Estructura básica de un documento HTML

Ejemplo completo

10. Explicación línea por línea

<!DOCTYPE html>

<html lang="es">

<head>

<meta charset="UTF-8">

<meta name="viewport" ...>

<title>

<body>

<h1>

<p>

11. Diferencia entre title y h1

Ejemplo

12. Etiquetas de apertura y cierre

Ejemplo correcto

Error común

13. Estructura jerárquica

Ejemplo

14. Anidación

Ejemplo correcto

Ejemplo incorrecto

15. Primeros ejemplos simples

Ejemplo 1: título y párrafo

Ejemplo 2: dos párrafos

Ejemplo 3: contenido más personal

16. Ejemplos comparados

Correcto

Incorrecto

Qué está mal

17. Más ejemplos de estructura básica

Ejemplo con varios títulos y párrafos

Ejemplo con texto de la materia

18. Qué parte se ve y qué parte no se ve

No visible directamente en la página

Visible dentro de la página

Ejemplo

19. Errores comunes al comenzar

1. Confundir title con h1

2. Escribir contenido dentro de head

3. Olvidar cerrar etiquetas

4. Guardar el archivo sin extensión .html

5. No actualizar el navegador

20. Ejemplo de archivo index.html

21. Qué conviene mirar cuando algo no funciona

22. Ejercicios resueltos

Ejercicio 1

Ejercicio 2

Ejercicio 3

23. Mini comparación entre HTML, CSS y JavaScript

HTML

CSS

JavaScript

24. Qué estamos aprendiendo realmente en esta primera clase

25. Actividad propuesta

Modelo posible

26. Preguntas de repaso

27. Respuestas breves de repaso

¿Qué es el Front-End?

¿Qué hace HTML?

¿Qué hace CSS?

`<!DOCTYPE html>`

`<html lang="es">`

`<head>`

`<meta charset="UTF-8">`

`<meta name="viewport" ...>`

`<title>`

`<body>`

`<h1>`

`<p>`

11. Diferencia entre `title` y `h1`

1. Confundir `title` con `h1`

2. Escribir contenido dentro de `head`

4. Guardar el archivo sin extensión `.html`

20. Ejemplo de archivo `index.html`