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
Acuerdo 050424 Lineamientos del CTE Función Docente
Presentation
•
Professional Development
10 questions
Vigostky
Presentation
•
Professional Development
11 questions
Promoción Horizontal YOUTUBE 11
Presentation
•
Professional Development
11 questions
CONOCIMIENTOS SISTEMAS COSTITUTIVOS CIMENTACIONES
Presentation
•
Professional Development
10 questions
Encuentra los Errores de Seguridad
Presentation
•
Professional Development
10 questions
INCLUSIÓN
Presentation
•
Professional Development
10 questions
les nombres
Presentation
•
KG
10 questions
Artículo 3ro Constitucional
Presentation
•
Professional Development
Popular Resources on Wayground
24 questions
PBIS-HGMS Day 10
Quiz
•
6th - 8th Grade
10 questions
HCS SCI 03 Summer School Review 3
Quiz
•
3rd Grade
11 questions
Home Scope
Quiz
•
7th - 8th Grade
15 questions
HCS SCI 05 Summer School Assessment 3 Review
Quiz
•
5th Grade
35 questions
Lufkin Road Middle School Student Handbook & Policies Assessment
Quiz
•
7th Grade
18 questions
Geo 11.3 Area of Circles and Sectors
Quiz
•
9th - 11th Grade