HTML

Juan Pablo Córdova Igartúa

HTML iNForMaTIcA 3

Comenzar

¿Qué son?

Los HTML son el Lenguaje de Marcado de Hipertextos, en ingles HyperText Markup Language de ahí sus siglas, es el código que utilizamos para estructurar y desplegar una página web y sus contenidos, por ejemplo; sus contenidos podrían ser párrafos, una lista con viñetas, o imagenes con tablas de datos

NIVEL 1:Conocerlos

Entendamoslo

Para entender que es un HTML de derecho y revés, veamos y analizemos cada palabra;HyperText (Hipertexto); texto usualmente enlace que está organizado de manera que conecta elementos relacionados Markup (Marcado); Es una guía de estilo para presentar elementos que son mostrados de formq visualen en el navegador Language (Lenguaje); Un lenguaje que entiende una computadora y utiliza para interpretar comandos

1/2

00:15

2/2

00:15

NIVEL 2:Comprendimiento

Definiciones, Elementos y Atributos

Ya que HTML define la estructura de una página web, querrás que el texto, imágenes y otros elementos se muestren de cierta forma. Por ejemplo, que un texto se vea grande y otro pequeño, que esté en negritas, cursiva, o sea una lista con viñetas. HTML tiene "etiquetas" que te dejan hacer esto y mucho más. Hay etiquetas para crear títulos, párrafos, resaltar palabras, escribir en cursiva, etc.

Un elemento consiste de una etiqueta de apertura, un contenido y una etiqueta de cierre. También existen "elementos vacíos" que solo utilizan una etiqueta, no necesitan etiqueta de cierre, en su lugar utilizan un enlace o una fuente, ha contenido que quieras insertar en la página web. Un ejemplo de este tipo de elementos es <img>, que se utiliza para insertar imágenes en una página web

Atributos

Atributos HTML Las etiquetas HTML también acepta "atributos". Los atributos se añaden en la etiqueta de apertura y pueden ser de tipo style, id, class, etc. Los atributos toman un valor, que le da información extra a un elemento para agregar estilos o interactividad con JavaScript En la siguiente infografía, la etiqueta de apertura contienen un atributo class con el valor “text”. Esto puede ser útil para darle estilo al elemento o seleccionarlo con JavaScript para hacerlo interactivo.

1/1

00:15

Etiquetas

HTML

Elemento

Encuentra la respuesta correctaconsiste de una etiqueta de apertura, un contenido y una etiqueta de cierre.

NIVEL 3:Elementos

Ventajas y Desventajas

Ventajas y desventajas del lenguaje HTML Ventajas: Permite describir hipertexto, tiene un despliegue rápido, lo reconoce y admite cualquier tipo de explorador y permite archivos pequeños. Desventajas: El diseño es más lento, tiene un lenguaje estático y las etiquetas son limitadas.

3/4

00:15

÷

16

x

8

4

4/4

00:15

+

(20

÷

-

5)

5

5

NIVEL 4:Cueva multicamino

Cueva multicamino

Has llegado a una cueva dónde tendrás que elegir el camino adecuado. ¡Sigue tu instinto y ten cuidado para no perderte!

1/4

Observa las imágenes y responde¿Cuál es un pez payaso?

00:15

2/4

00:15

Observa las imágenes y responde¿Cuál es de un cangrejo común?

3/4

00:15

Observa las imágenes y responde¿Cuál es una caracola marina?

4/4

00:15

Observa las imágenes y responde¿Cuál es un caballito de mar?

NIVEL 5:Ópera marina

Ópera marina

Escuchas una melodía en la lejanía... ¡Es la ópera del fondo del mar que ha decidido organizar un concierto! Identifica y relaciona cuál es el sonido que corresponde a cada músico para poder avanzar.

Solución

1. Triángulo

2. Saxofón

3. Contrabajo

1/4

A

C

Arrastra las palabras con su sonido correspondiente

B

Arrastra las palabras con su sonido correspondiente

2/4

1. Piano

2. Batería

3. Voz

A

C

B

3/4

1. Contrabajo

2. Saxofón

3. Piano

A

C

B

Arrastra las palabras con su sonido correspondiente

4/4

1. Batería

2. Voz

3. Triángulo

A

C

B

Arrastra las palabras con su sonido correspondiente

????

VS

¡Vamos!

00:15

00:15

00:15

¡Has derrotadoal Rey Anguila!¡Vamos, usa la llave!

Elige tu cofre del tesoro

¡Enhorabuena!

Has encontrado un cofre lleno de reliquias que valen una fortuna. ¡Prepárate para hacerte de oro al llegar a la superficie!

Volver a empezar

¡Wow!

¿Quién diría que dentro del tesoro se esconde... ¿un mapa hacia otro tesoro? ¡Parece ser que las aventuras de este submarino no acaban aquí!

Volver a empezar

¡Qué sorpresa!

Parece que los secuaces del Rey Anguila te han elegido como nuevo soberano. ¿Elegirás el camino del bien o preferirás mantener el legado del mal?

Volver a empezar

¡Vuelve a intentarlo!

¡Vuelve a intentarlo!

¡Vuelve a intentarlo!

¡Vuelve a intentarlo!

B - 2

A - 3

C - 1

Continuar

¡Vuelve a intentarlo!

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¡Vuelve a intentarlo!

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¡Vuelve a intentarlo!

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

B - 2

Continuar

A - 1

C - 3

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

B - 1

A - 2

C - 3

Continuar

¡Vuelve a intentarlo!

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¡Vuelve a intentarlo!

¡Vuelve a intentarlo!

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¡Vuelve a intentarlo!

¡Vuelve a intentarlo!

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

Continuar

B - 2

A - 3

C - 1

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso

¿Seguro que quieres volver al inicio?

Perderás todo tu progreso