HTML5 Y CSS
Integrantes:
• Moreno Sosa Arturo
• Sanchez Calixto Jeidy
• Janampa Ramirez Lizbeth
• Lino Tito Valentina
Docente:
BARRÓN CURIOSO DALTON MANUEL
hUACHO - perú
2025
HTML5
QUÉ ES
HTML5?
• HTML significa HyperText
Markup Language (Lenguaje de
Marcado de Hipertexto).
• HTML5 es la quinta versión del
lenguaje HTML.
• Se usa para estructurar el
contenido de las páginas web.
• Permite incluir textos,
imágenes, videos, formularios,
etc.
• Es la base de toda página web,
junto con CSS y JavaScript.
HTML5
CARACTERISTICAS:
GRÁFICOS VECTORIALES:
Soporta SVG (Scalable Vector Graphics)
p a r a g r á fi c o s e s c a l a b l e s d e a l t a
calidad.
FORMULARIOS MEJORADOS:
Ofrece nuevos tipos de datos para
formularios, como fechas, colores,
correos electrónicos, etc., y la
posibilidad de validación sin
JavaScript.
M E J O R R E N D I M I E N T O Y C O M PAT I B I L I D A D :
HTML5 se analiza de manera más
HTML5
CARACTERISTICAS:
4. PUEDES HACER DIBUJOS Y GRÁFICOS
Con la etiqueta <canvas> puedes hacer
dibujos, juegos o animaciones usando
JavaScript.
RepRODUCE AUDIO Y VIDEO SIN
PROGRAMAS EXTRAS
Antes necesitabas instalar plugins como
Flash. Ahora, con HTML5 puedes agregar
música o videos
FORMULARIOS MÁs inteligentes
Ahora puedes hacer formularios que
detectan errores por sí solos.
.
V E N TA J A S Y D E S V E N TA J A S
DEL
HTML5
V E N TA J A S HTML5
-Multiplataforma (funciona en PC, tablet y
celular).
-Reproduce audio y video sin programas
externos.
- Usa etiquetas semánticas como <header>,
<section>, <footer>.
- Ay u d a a l d i s e ñ o re s p o n s i v o
-Puede guardar datos en el navegador
D E S V E N TA J A S :
-No funciona bien en navegadores antiguos.
-Algunas funciones nuevas no están 100%
estandarizadas.
-Necesita CSS y JavaScript para diseño e
interacción.
-Puede tener riesgos de seguridad si no se
usa bien.
CSS
QUÉ ES CSS?
• CSS significa Cascading Style
Sheets (Hojas de Estilo en
Cascada).
• Se usa para dar estilo a los
elementos creados con HTML.
• Permite controlar colores,
fuentes, tamaños, márgenes,
animaciones, etc.
• Separa la estructura (HTML) del
diseño visual (CSS).
• Hace que las páginas se vean
atractivas y profesionales.
SIN CSS CON CSS
CSS
CARACTERISTICAS:
HOJAS DE ESTILO EN CASCADA (CASCADING
STYLE SHEETS):
CSS se basa en un sistema de cascada que
permite aplicar estilos de diferentes
fuentes (hojas de estilo) y donde los
e s t i l o s m á s e s p e c í fi c o s o d e fi n i d o s m á s
tarde tienen prioridad.
S E PA R A C I Ó N D E C O N T E N I D O Y
P R E S E N TA C I Ó N :
CSS separa el contenido (HTML) de la
presentación visual, lo que facilita el
mantenimiento y la reutilización del
código.
FLEXIBILIDAD Y CONTROL:
C S S o f r e c e u n a g r a n fl e x i b i l i d a d y c o n t r o l
sobre el diseño de la página, permitiendo
CSS
CARACTERISTICAS:
A D A P TA B I L I D A D :
CSS permite crear diseños
adaptativos que se ajustan a
diferentes tamaños de pantalla y
dispositivos mediante el uso de
media queries.
PROPIEDADES:
C S S d e fi n e p r o p i e d a d e s p a r a
controlar la apariencia de los
e l e m e n t o s , c o m o e l c o l o r, e l t a m a ñ o
de la fuente, los márgenes, etc.
CSS
CARACTERISTICAS:
C O M PAT I B I L I D A D :
CSS es compatible con la mayoría de
los navegadores web y dispositivos.
Modularidad:
Se pueden crear módulos de CSS
reutilizables en diferentes partes de
un sitio web o incluso en diferentes
proyectos.
Facilidad de uso y apRENDIZAJE:
CSS es relativamente fácil de
a p r e n d e r y u s a r, e s p e c i a l m e n t e p a r a
principiantes en desarrollo web.
V E N TA J A S Y D E S V E N TA J A S
DEL
CSS
+CSS
Ventajas:
• Separa el contenido (HTML) del diseño.
• Mejora la apariencia visual.
• Fa c i l i t a c a m b i o s d e e s t i l o e n t o d a l a
página.
• Ahorra tiempo y código.
• Diseños organizados y responsivos
Desventajas:
• P u e d e v e r s e d i s t i n t o e n c a d a n a v e g a d o r.
• Se vuelve difícil de mantener si el
código está desordenado.
• Requiere práctica para lograr buenos
resultados.
• Errores pequeños pueden afectar todo el
diseño.
¿DÓNDE SE
APLICA EL
HTML5 +CSS?
¿DÓNDE SE APLICA HTML5 +CSS?
• D ES ARR O L LO D E PÁG I NAS WEB : • APLICACIONES MÓVILES:
HTML5 se utiliza para estructurar el contenido, Con frameworks como Apache Cordova, se pueden
mientras que CSS se encarga de la presentación crear aplicaciones móviles utilizando HTML5 y CSS.
visual.
• APLICACIONES WEB:
Muchas aplicaciones interactivas, como Google Docs o
plataformas de aprendizaje en línea, utilizan HTML5 y CSS
para su interfaz.
• C O N T E N I D O M U LT I M E D I A :
HTML5 incluye etiquetas para audio y video.
• JUEGOS EN LÍNEA:
HTML5 permite desarrollar juegos que se pueden jugar en
navegadores sin necesidad de plugins adicionales.
CASOS DE USO DE HTML5 + CSS
• SITIOS WEB RESPONSIVOS:
• APLICACIONES DE
HTML5 y CSS permiten la
GEOLOCALIZACIÓN:
creación de sitios que se HTML5 incluye APIs que
adaptan a diferentes permiten acceder a la ubicación
dispositivos (móviles, tabletas, del usuario.
d eE sj e
kmt oppl so ): . U n s i t i o w e b d e
comercio electrónico Ejemplo: Una aplicación de
mapas que muestra la ubicación
actual
• ALMACENAMIENTO LOCAL:
• FORMULARIOS INTERACTIVOS:
HTML5 ofrece nuevos tipos de HTML5 permite almacenar
campos de formularios (como datos en el navegador del
email, fecha, etc.) que mejoran usuario, lo que es útil para
la experiencia del usuario. aplicaciones que requieren
a c c e s o o ffl i n e .
Ejemplo: Un formulario de
registro que utiliza validación Ejemplo: Un juego que guarda
en tiempo real. el progreso del jugador
localmente
EJEMPLOS PRÁCTICOS
• SITIO WEB DE NOTICIAS
• REPRODUCTOR DE VIDEO
• APLICACIONES DE REDES
SOCIALES
MUCHAS GRACIAS
