Want to create interactive content? It’s easy in Genially!

Get started free

"Introducción al Desarrollo Web: HTML, CSS y JavaScript"

JESUS RAFAEL MURILLO MARTINEZ

Created on October 31, 2025

Start designing with a free template

Discover more than 1500 professional designs like these:

Audio tutorial

Pechakucha Presentation

Desktop Workspace

Decades Presentation

Psychology Presentation

Medical Dna Presentation

Geometric Project Presentation

Explore all templates

Transcript

"Introducción al Desarrollo Web: HTML, CSS y JavaScript"

Fundamentos de la web

Índice

1. HTML

2. ¿QUE ES CCS?

3. JAVA SCRIPT

¿Qué es el HTML?

Es el lenguaje base para crear páginas web. No es un lenguaje de programación, sino un lenguaje de marcado que define la estructura del contenido.

Para qué sirve?

  • Define qué elementos aparecen en la página: títulos, párrafos, imágenes, enlaces, listas, tablas, formularios, etc.
  • Es el esqueleto de cualquier sitio web.
  • Es interpretado por los navegadores para mostrar el contenido al usuario.

Caracteristicas

Etiquetas comunes:<h1> a <h6>: Encabezados <p>: Párrafo <a href="">: Enlace <img src="">: Imagen <ul>, <ol>, <li>: Listas

: Aplicaciones y buenas prácticasHTML semántico: Uso de etiquetas como <header>, <nav>, <section>, <article>, <footer> para mejorar accesibilidad y SEO. Formularios: <form>, <input>, <textarea>, <button>Multimedia: <video>, <audio> Buenas prácticas: Usar etiquetas semánticas Validar el código con herramientas como W3C ValidatorMantener una estructura clara y ordenada [w3schoolsu....github.io]

¿Qué son los estilos CSS?

CSS define la presentación visual de los elementos HTML: colores, fuentes, márgenes, posiciones, animaciones, etc.

Para qué sirve?

  • Define qué elementos aparecen en la página: títulos, párrafos, imágenes, enlaces, listas, tablas, formularios, etc.
  • Es el esqueleto de cualquier sitio web.
  • Es interpretado por los navegadores para mostrar el contenido al usuario.

Diseño moderno

Selectores: por etiqueta (h1), clase (.clase), ID (#id) Modelo de caja: margin, border, padding, content Diseño responsivo: uso de media queries Flexbox y Grid: para layouts adaptables Animaciones y transiciones: para efectos visuales Ventajas: separación de contenido y diseño, reutilización, consistencia visual

: Conceptos clave

  • Selectores: aplican estilos a elementos (h1, .clase, #id)
  • Modelo de caja: margin, border, padding, content
  • Diseño responsivo: uso de media queries para adaptar el diseño a móviles y tablets
  • Flexbox y Grid: sistemas modernos para organizar el diseño en columnas y filas
  • Transiciones y animaciones: efectos visuales dinámicos

¿Que es JavaScript?

JavaScript es un lenguaje de programación que permite agregar interactividad y dinamismo a las páginas web. Se ejecuta en el navegador del usuario (cliente), lo que lo hace ideal para crear experiencias interactivas.

  • ¿Para qué sirve?
  • Validar formularios antes de enviarlos
  • Crear menús desplegables, carruseles, juegos, animaciones
  • Modificar el contenido de la página sin recargarla
  • Detectar eventos como clics, teclas, movimientos del mouse.

Conceptos clave

Variables: let, const, var Condicionales: if, else, switch Bucles: for, while Funciones: bloques de código reutilizable Eventos: acciones del usuario que activan funciones (onclick, onchange, etc.) DOM (Document Object Model): permite acceder y modificar elementos HTML desde JavaScript 🔹 Avanzado Uso de APIs para conectar con servicios externos Librerías como jQuery, React, Vue.js Comunicación con servidores usando AJAX o Fetchariables: let, const, var Condicionales: if, else, switch Bucles: for, while Funciones: bloques de código reutilizable

¡Muchas Gracias!