paginas web html
Presentation
•
Other
•
Professional Development
•
Practice Problem
•
Hard
Alexis Caratar
Used 6+ times
FREE Resource
14 Slides • 0 Questions
1
Introducción al Desarrollo
de Páginas Web
Esta presentación ofrece una visión general del desarrollo web.
Exploraremos HTML, CSS y JavaScript. Aprenderemos sobre la
estructura, el estilo y la interactividad. Prepárense para un viaje al mundo
del diseño web.
Ing. Alexis Caratar
2
3
Introducción a HTML, CSS
y JavaScript
Descubre los pilares del desarrollo web moderno. Aprende cómo HTML
estructura el contenido. Explora cómo CSS da estilo y diseño. Sumérgete
en cómo JavaScript añade interactividad. Esta presentación te guiará
por los conceptos básicos.
4
5
Estructura básica de un
documento HTML
Un documento HTML comienza con la etiqueta <!DOCTYPE html>.
Contiene las etiquetas <html>, <head> y <body>. El <head> incluye
metadatos y el <body> el contenido visible.
1 <!DOCTYPE html>
Define el tipo de documento.
2 <html>
Elemento raíz del documento.
3 <head>
Metadatos y configuración.
4 <body>
Contenido visible de la página.
6
Etiquetas HTML
Fundamentales
1
<div>
Define una división o sección en el documento. Es un contenedor
genérico.
2
<span>
Es un contenedor en línea para texto o elementos. Se usa para
estilos específicos.
3
<a>
Crea un enlace a otra página o recurso. Usa el atributo "href" para
la URL.
4
<img>
Inserta una imagen en la página. Usa el atributo "src" para la ruta
de la imagen.
7
Encabezados y Párrafos
<h1> a <h6>
Definen encabezados de
diferentes niveles. <h1> es el
más importante.
<p>
Representa un párrafo de
texto. Se utiliza para contenido
textual extenso.
Anidamiento
Los encabezados no deben anidarse directamente. Usar la jerarquía
correctamente.
8
Enlaces y Listas
1
Enlaces
Crean hipervínculos a otros documentos o ubicaciones.
Usar el atributo href.
2
Listas Ordenadas
Muestran elementos en un orden específico. Se usa la
etiqueta <ol>.
3
Listas No Ordenadas
Presentan elementos sin un orden particular. Se usa la
etiqueta <ul>.
9
Imágenes y Multimedia
<img>
Muestra imágenes en
la página web. El
atributo src
especifica la fuente.
<video>
Inserta videos en la
página. Controlar con
atributos como
controls.
<audio>
Integra audio en la
página. Similar a
video, usa el atributo
controls.
10
¿Qué es CSS?
CSS (Cascading Style Sheets) controla la presentación visual de una
página web. Define colores, fuentes, márgenes y diseños. Separa el
estilo del contenido, facilitando el mantenimiento.
Estilo visual
Define la apariencia de los elementos HTML.
Diseño
Controla la disposición de los elementos en la página.
11
Estilos con CSS
1
2
3
CSS (Cascading Style Sheets) se usa para dar estilo y formato a las páginas web. Separar la presentación del contenido
mejora la mantenibilidad. Se aplica mediante selectores, propiedades y valores.
Selectores
Apuntan a los elementos HTML que
se van a estilizar.
Propiedades
Determinan el aspecto del elemento,
como color, fuente, etc.
Valores
Especifican la configuración para
cada propiedad.
12
¿Qué es JavaScript?
JavaScript es un lenguaje de programación que añade interactividad a
las páginas web. Permite crear efectos dinámicos, animaciones y
respuestas a las acciones del usuario.
1
Interactividad
Añade dinamismo a las páginas web.
2
Funcionalidad
Permite responder a las acciones del usuario.
13
Interacción con JavaScript
1
Eventos
2
Funciones
3
DOM
JavaScript añade interactividad a las páginas web. Permite modificar el DOM (Document Object Model). Se usan eventos y
funciones para crear experiencias dinámicas. Los frameworks como React simplifican el desarrollo.
14
Integración de los tres lenguajes
HTML proporciona la estructura, CSS el estilo y JavaScript la interactividad. Los tres lenguajes trabajan juntos para crear una
experiencia web completa y atractiva. Una buena integración es clave para el éxito.
1 Experiencia web
2
JavaScript
3
CSS
4
HTML
Introducción al Desarrollo
de Páginas Web
Esta presentación ofrece una visión general del desarrollo web.
Exploraremos HTML, CSS y JavaScript. Aprenderemos sobre la
estructura, el estilo y la interactividad. Prepárense para un viaje al mundo
del diseño web.
Ing. Alexis Caratar
Show answer
Auto Play
Slide 1 / 14
SLIDE
Similar Resources on Wayground
10 questions
A favor o en contra
Presentation
•
Professional Development
10 questions
Profundizar en rodamientos rígidos a bolas
Presentation
•
Professional Development
10 questions
Palabras agudas
Presentation
•
Professional Development
10 questions
Metodologías de Proyectos Educativos
Presentation
•
Professional Development
10 questions
ACTIVIDADES CEDIS MAYO
Presentation
•
KG
10 questions
ACTIVIDAD JULIO
Presentation
•
KG
10 questions
politicas
Presentation
•
Professional Development
10 questions
Countryballs Potato Mayhem
Presentation
•
KG
Popular Resources on Wayground
16 questions
Grade 3 Simulation Assessment 2
Quiz
•
3rd Grade
19 questions
HCS Grade 5 Simulation Assessment_1 2526sy
Quiz
•
5th Grade
10 questions
Cinco de Mayo Trivia Questions
Interactive video
•
3rd - 5th Grade
17 questions
HCS Grade 4 Simulation Assessment_2 2526sy
Quiz
•
4th Grade
24 questions
HCS Grade 5 Simulation Assessment_2 2526sy
Quiz
•
5th Grade
13 questions
Cinco de mayo
Interactive video
•
6th - 8th Grade
20 questions
Math Review
Quiz
•
3rd Grade
30 questions
GVMS House Trivia 2026
Quiz
•
6th - 8th Grade