Unidad 2 - Encuentro 1 - Asincronico

‘Unidad 2:’ {
Diseño de
Aplicaciones Web
}
1 CONTENIDOS DE LA CLASE {
2
3 ESTRUCTURA DE UN DOCUMENTO HTML
4
5
Introduccion a HTML y su funcion en el desarrollo web
6
7
8
9
Estructura basica de un documento HTML
10
11
12 Elementos HTML
13
14 }
Argentina Programa 4.0
1 CONTENIDOS DE LA CLASE {
2
3 ESTRUCTURA DE LA WEB SEMÁNTICA
4
5
6 Introduccion a la Web Semantica y su importancia en la
7 accesibilidad y el SEO
8
9
10 Etiquetas Semánticas HTML
11
12
13
14 }
UNIDAD 2 - Diseño de Aplicaciones Web
1
2
‘Estructura de un documento HTML’ {
3
4
5
6
7 [1. Introduccion a ‘HTML’ y su
8 funcion en el ‘Desarrollo Web’]
9
10
11
12
13
14 }
Estructura de un documento HTML UNIDAD 2 - Diseño de Aplicaciones Web
1 ¿Qué es HTML? {
2
3
4
[HIPERTEXT MARKUP LANGUAGE]
5
6 < Es un lenguaje de marcado que se utiliza
7 para crear y diseñar páginas web. Es el
8 lenguaje base de la Web y se utiliza en
9 conjunto con otros lenguajes como CSS y
10 JavaScript. >
11
12
13
}
14

1 ¿Para qué se utiliza HTML? {

2
3
4
5 < Se utiliza para estructurar y formatear el
6 contenido de una página web, es decir, para
7 definir la estructura de la página, como el
8 encabezado, los párrafos, las listas, las
9 tablas, los enlaces, los formularios, las
10 imágenes, los videos, etc. >
11
12
13
}
14

1 ¿Para qué se utiliza HTML? {

2
3
4
5
6
7
8
9
10
11
12
13
}
14

1 Relación de HTML con otros lenguajes {

2
3
4
5 <HTML es uno de los lenguajes base del desarrollo
6 web que se utiliza junto con otros lenguajes como
7 CSS (Cascading Style Sheets) y JavaScript para
8 crear páginas web interactivas y atractivas. CSS se
9 utiliza para dar estilo y formato al contenido
10 HTML, mientras que JavaScript se utiliza para crear
11 interactividad y funcionalidad en la página. >
12
13
14
}

1 Relación de HTML con otros lenguajes {

2
3
4
5
6
7
8
9
10
11
12
13
}
14

1
2
3
4
5
6
7 [2. Estructura básica de un
8 documento ‘HTML’]
9
10
11
12
13
14 }
1 Partes fundamentales de un documento HTML {

2
3 < Un documento HTML consta de varias partes,
4 cada una de las cuales cumple una función
5 importante en la estructura y el contenido de
6 una página web. Las partes fundamentales de un
7 documento HTML son las siguientes: >
8
9 <!DOCTYPE html>
10
<html>
11
<head>
12
<body>
13
14 }

Estructura de un documento HTML workshop.css
1 <!DOCTYPE html>{
2
3
4 < Esta es la declaración de tipo de
5 documento y se coloca en la parte superior
6 del documento HTML. Indica al navegador web
7 que el documento es un archivo HTML y cuál
8 es su versión. Es importante incluir esta
9 declaración porque ayuda al navegador a
10 interpretar el contenido del documento
11 correctamente. >
12
13
14 }
1 <html>{
2
3
4
5 < Esta es la etiqueta de apertura del
6 elemento HTML raíz. Todo el contenido de
7 una página web debe estar contenido dentro
8 de esta etiqueta. También se utiliza para
9 indicar al navegador que el documento es un
10 archivo HTML. >
11
12
13
14 }
1 <head>{
2
3 < Esta es la sección del documento HTML que
4 contiene información sobre la página web
5 que no se muestra en la pantalla, como el
6 <title> de la página, las metaetiquetas,
7 las hojas de estilo CSS y los scripts de
8 JavaScript. Es importante incluir esta
9 sección porque ayuda al navegador a
10 comprender mejor el contenido de la página
11 y mejorar su indexación en los motores de
12 búsqueda. >
13
14 }
1 <body>{
2
3
4
5 < Esta etiqueta se utiliza para definir el
6 contenido de la página que se mostrará en
7 el navegador web. Todos los elementos HTML
8 que representan el contenido visible de la
9 página deben estar contenidos dentro de
10 esta etiqueta. >
11
12
13
14 }
1 Partes fundamentales de un documento HTML {

2
3
4
5
6
7
8
9
10
11
12
13
}
14

1
2
3
4
5
6
7 [3. Elementos ‘HTML’]
8
9
10
11
12
13
14 }
1 Elementos HTML {
2
3
4 < Los elementos HTML son etiquetas que se utilizan para
5 mostrar y definir el contenido y la estructura de una
6 página web.
7 Cada elemento HTML tiene una etiqueta de apertura y una
de cierre, estas pueden contener texto, imágenes,
8
enlaces, formularios, videos y otros tipos de contenido
9
multimedia. >
10
11
12
13
}
14

1 Elementos HTML {
2
3
4
5
6
7
8
9
10
11
12
13 }
14

1 Tipos de Elementos HTML {

2 [ Hay muchos elementos HTML, pero algunos de los más comunes y su uso son:
3 ]
4 * <h1> - <h6>
5 < Se utilizan para definir encabezados o títulos en una página,
6 siendo <h1> el encabezado más grande y <h6> el más pequeño. >
7
8 * <p>
9 < Se utiliza para definir un
párrafo de texto. >
10
11
12
* <img>
< Se utiliza para insertar
13
} imágenes en una página. >
14


2 [ Hay muchos elementos HTML, pero algunos de los más comunes y su uso son:
3 ]
4 * <ul> y <li>
5 < Se utilizan juntos para crear listas no ordenadas. El elemento <ul>
define la lista y cada elemento de la lista se define con el elemento
6 <li>. >
7
8 * <ol> y <li>
< Se utilizan juntos para crear listas ordenadas. El
9 elemento <ol> define la lista y cada elemento de la
10 lista se define con el elemento <li>. >
11
12
* <a>
< Se utiliza para crear enlaces a otras
13
} páginas o recursos. >
14


2
3
4
5
6
7
8
9
10
11
12
13
}
14

1 Elementos HTML {
2
3 < Los elementos HTML además, pueden tener atributos que
4 son características adicionales que se agregan a estos
5 para modificar su comportamiento o apariencia. Estos
6 atributos proporcionan información adicional sobre un
7 elemento y se escriben dentro de la etiqueta de
apertura del elemento. Cada atributo tiene un nombre y
8
un valor separados por un signo igual.
9
Pueden proporcionar informacion como el color de fondo,
10
el tamaño de la fuente, etc. >
11
12
13
}
14

1 Elementos HTML {
2
3
4
5
6
7
8
9
10
11
12
13 }
14

1
2
‘Estructura de la Web Semántica’ {
3
4
5
6
7 [1. Introducción a la ‘Web
8 semántica’ y su importancia en
9
10
la ‘accesibilidad’ y el ‘SEO’]
11
12
13
14 }
Estructura de la Web Semántica UNIDAD 2 - Diseño de Aplicaciones Web
1 ¿Qué es la Web Semántica? {

2
< La Web Semántica es una extensión de la World
3
Wide Web que tiene como objetivo hacer que la
4
información en la web sea más fácilmente
5
procesable por las máquinas, permitiendo que
6
7
las computadoras puedan comprender el
8
significado y contexto de la información, en
9 lugar de simplemente tratarla como texto plano.
10 Esto permite a los motores de búsqueda y otros
11 programas informáticos entender el significado
12 de la información que se encuentra en la web.
13 }>
14

1 ¿Por qué es importante la Web Semántica en la

2 accesibilidad? {
3 < La Web Semántica es importante en la accesibilidad
4 porque permite que las máquinas comprendan el
5 contenido de una página web y lo presenten de una
6 manera más accesible a las personas con
7 discapacidad.
Ademas permite que los desarrolladores de páginas
8
web proporcionen metadatos y etiquetas más
9
detallados y precisos sobre el contenido de la
10
página, lo que puede ayudar a las personas con
11 discapacidad a encontrar y acceder a la información
12 relevante de manera más eficiente. >
13 }
14

1
¿Cómo afecta la Web Semántica en el SEO? {
2
3
4
< El SEO (Search Engine Optimization) se refiere a las técnicas y
5 estrategias utilizadas para mejorar el posicionamiento de un sitio web
6 en los resultados de los motores de búsqueda. El objetivo del SEO es
hacer que un sitio web sea más visible y atractivo para los motores de
7 búsqueda, lo que puede aumentar el tráfico y la visibilidad del sitio.
8 >
< La Web Semántica tiene un impacto positivo en el SEO ya que los
9 motores de búsqueda pueden entender mejor el contenido de la página y
10 proporcionar resultados más precisos en las búsquedas. Esto se debe a
que las etiquetas semánticas proporcionan información valiosa sobre la
11
estructura y el contenido de la página. >
12
13 }
14

1
2
‘Estructura de la Web Semántica’ {
3
4
5
6
7 [1. Etiquetas ‘semánticas HTML’ ]
8
9
10
11
12
13
14 }
1 ¿Qué son las etiquetas semánticas HTML? {

2
3 < Las etiquetas semánticas en HTML son un conjunto de
elementos de marcado que se utilizan para dar significado y
4 estructura a una página web. A diferencia de las etiquetas
5 no semánticas, las etiquetas semánticas se utilizan para
6 definir el contenido de una página de manera más clara y
7 comprensible tanto para los motores de búsqueda como para
los usuarios.
8
Estas etiquetas ayudan a los motores de búsqueda a
9 comprender mejor el contenido de la página y a los usuarios
10 a navegar por ella de manera más fácil y clara. Además, el
11 uso de etiquetas semánticas también puede mejorar la
accesibilidad de la página para personas con discapacidades
12
visuales o auditivas. >
13 }
14

1
Etiquetas semánticas HTML para la estructura básica de
2 una página web {
3
4 * <header>
5 < Para definir el encabezado de la página web, que incluye el título y
6 el menú de navegación. >
7
8 * <nav>
9 < Para definir la sección del menu de navegación de la
página. >
10
11
12
13
}
14

1
2 una página web {
3
4
* < <main>
Para definir el contenido principal de la página.Debe contener todo
5 el contenido que sea relevante para el propósito principal de la
página. >
6
7 * <section>
8 < Para agrupar contenido y separarlo por secciones. >
9
10
* <article>
< Para definir un artículo independiente y completo dentro
11 de la página.>
12
13 }
* <aside>
< Para definir una sección de contenido relacionado
14 que se encuentra al margen del contenido
principal.>

1
2 una página web {
3
4 * <footer>
5 < Para definir el pie de página de la página. Suele incluir información
adicional sobre el sitio web, como enlaces a las redes sociales,
6 información de contacto, derechos de autor, términos de uso y políticas
7 de privacidad. >
8
9
10
11
12
13 }
14

1
2 una página web {
3
4
5
6
7
8
9
10
11
12
13
}
14

Unidad 2 - Encuentro 1 - Asincronico

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad 2 - Encuentro 1 - Asincronico

Cargado por

Copyright:

Formatos disponibles

‘Unidad 2:’ {

Argentina Programa 4.0

1 ¿Para qué se utiliza HTML? {

Argentina Programa 4.0

1 ¿Para qué se utiliza HTML? {

Argentina Programa 4.0

1 Relación de HTML con otros lenguajes {

Argentina Programa 4.0

1 Relación de HTML con otros lenguajes {

Argentina Programa 4.0

1 Partes fundamentales de un documento HTML {

Argentina Programa 4.0

1 Partes fundamentales de un documento HTML {

Argentina Programa 4.0

Argentina Programa 4.0

Argentina Programa 4.0

1 Tipos de Elementos HTML {

Argentina Programa 4.0

1 Tipos de Elementos HTML {

Argentina Programa 4.0

1 Tipos de Elementos HTML {

Argentina Programa 4.0

Argentina Programa 4.0

Argentina Programa 4.0

1 ¿Qué es la Web Semántica? {

Argentina Programa 4.0

1 ¿Por qué es importante la Web Semántica en la

Argentina Programa 4.0

Argentina Programa 4.0

1 ¿Qué son las etiquetas semánticas HTML? {

Argentina Programa 4.0

Argentina Programa 4.0

Argentina Programa 4.0

Argentina Programa 4.0

Argentina Programa 4.0

También podría gustarte