Scribd
Cargar
17 vistas4 páginas

Curso HTML JavaScript COMPLETO

El documento es un curso completo de HTML y JavaScript que abarca desde la introducción a HTML y su estructura básica, hasta la creación de formularios y la implementación de JavaScript para agregar interactividad. Incluye módulos prácticos que enseñan a crear archivos HTML, formularios, y a utilizar condicionales y el DOM. El curso culmina con un proyecto final donde se desarrolla una calculadora de edad utilizando los conceptos aprendidos.

Cargado por

Jam Gnrs
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
17 vistas4 páginas

Curso HTML JavaScript COMPLETO

El documento es un curso completo de HTML y JavaScript que abarca desde la introducción a HTML y su estructura básica, hasta la creación de formularios y la implementación de JavaScript para agregar interactividad. Incluye módulos prácticos que enseñan a crear archivos HTML, formularios, y a utilizar condicionales y el DOM. El curso culmina con un proyecto final donde se desarrolla una calculadora de edad utilizando los conceptos aprendidos.

Cargado por

Jam Gnrs
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd

CURSO COMPLETO DE HTML + JAVASCRIPT

MÓDULO 1: Introducción a HTML


TEORÍA:

HTML (HyperText Markup Language) es el lenguaje de marcado que se utiliza para estructurar contenidos

en la web.

Su sintaxis se basa en etiquetas que envuelven el contenido.

Estructura básica de un documento HTML:

<!DOCTYPE html>

<html>

<head>

<title>Título de la página</title>

</head>

<body>

<h1>Encabezado</h1>

<p>Párrafo</p>

</body>

</html>

Etiquetas comunes:

- <h1> a <h6>: Encabezados

- <p>: Párrafos

- <a>: Enlaces

- <img>: Imágenes

- <ul>, <ol>, <li>: Listas

PRÁCTICA:

1. Crear un archivo llamado [Link]

2. Agregar título, párrafo, imagen y enlace.

3. Visualizar en el navegador.

MÓDULO 2: Formularios en HTML


TEORÍA:

Los formularios permiten recolectar datos del usuario mediante inputs:

<form> agrupa los campos

<input> define campos de entrada

<button> o <input type="submit"> envía los datos

Tipos de <input> comunes:

- text

- email

- number

- password

- radio

- checkbox

- submit

PRÁCTICA:

1. Crear un formulario con nombre y correo.

2. Añadir botón de envío.

3. Validar que los campos sean obligatorios usando "required".

MÓDULO 3: Introducción a JavaScript


TEORÍA:

JavaScript es un lenguaje de programación que permite agregar interactividad a las páginas web.

Se puede incluir con:

<script>

// Código aquí

</script>

Variables:

- let: permite cambiar el valor

- const: valor constante

Funciones:
function saludar(nombre) {

alert("Hola " + nombre);

PRÁCTICA:

1. Crear un archivo <script> dentro del HTML.

2. Mostrar un alert con tu nombre.

3. Crear una función que salude al usuario.

MÓDULO 4: Condicionales y Entrada de Datos


TEORÍA:

- prompt(): solicita datos al usuario

- alert(): muestra un mensaje

- if/else: estructuras condicionales

Ejemplo:

let edad = prompt("¿Cuántos años tienes?");

if (edad >= 18) {

alert("Eres mayor de edad");

} else {

alert("Eres menor de edad");

PRÁCTICA:

1. Pedir la edad del usuario.

2. Mostrar si es mayor o menor de edad.

MÓDULO 5: DOM - Document Object Model


TEORÍA:

El DOM representa la estructura HTML como objetos de JavaScript. Permite manipular elementos HTML.

Métodos útiles:

- [Link]("id")

- [Link]
- addEventListener("click", función)

PRÁCTICA:

1. Crear un botón en HTML.

2. Al hacer clic, cambiar el contenido de un párrafo.

3. Probar con varios botones y funciones.

MÓDULO 6: Proyecto Final - Calculadora de Edad


OBJETIVO:

Crear una aplicación web simple que calcule la edad de una persona y muestre si es mayor o menor de

edad.

HTML:

- Inputs para año actual y nacimiento

- Botón de cálculo

JavaScript:

- Obtener los valores con getElementById

- Restar los años

- Mostrar resultado con innerHTML

DESAFÍO:

Agrega validaciones para verificar que los campos no estén vacíos y que los años tengan sentido.

También podría gustarte