1

Para empezar con HTML

1

Nivel básico

Nivel básico

1¿Qué es HTML?

¿Por qué HTML es poderoso?

HTML: el texto de etiquetas.

Pero, ¿qué es una etiqueta?

La mayoría de lenguajes son así.

Lenguaje para máquinas.

Resumen y ejercicios prácticos.

1

2

3

4

5

6

7

1

Nivel básico

¿Qué es HTML?

Nivel básico

11HTML es un lenguaje

HTML son las iniciales de Hyper Text Markup Language.

• Es el lenguaje con el que se escriben las

páginas web.

• Es el lenguaje llamado de hipertexto.

Nivel básico

11Un lenguaje poderoso

Hiper = superioridad.

Es decir: HTML es un lenguaje superior,

un lenguaje poderoso.

Nivel básico

2 ¿Por qué HTML es poderoso?

Nivel básico

1 2HTML permite muchas cosas

Tantas cosas como somos capaces de ver u oír en una pantalla de ordenador, tablet o móvil, con conexión a Internet:

• textos

• formas,gráficos...

• fotografías, videos, sonido...

Nivel básico

1 2El lenguaje de los links

El HTML o hipertexto permite algo fundamental, casi evidente en el mundo actual, pero

Imposible antes de existir Internet:

los links

Nivel básico

1 2El lenguaje que enlaza el mundo

Es decir HTML tiene la capacidad de:

• Enlazar páginas de ordenadores diferentes,

en países distantes.

•Unir una red con billones de links.

• Sin HTML no existiría Internet.

Nivel básico

3 HTML: el texto de etiquetas

Nivel básico

1 3HTML: un simple texto

Hemos dicho que HTML es un lenguaje que tiene poder. Pero, en rigor, es un simple texto. Se puede escribir en cualquier Bloc de notas, SimpleText, Word...

• Es texto, puro y simple.

•O sea: vocales, consonantes, números...

• El texto de siempre.

Nivel básico

1 3HTML: ¿simple o poderoso?

Entonces, ¿por qué es Hiper?

Porque incluye una cosa muy importante,

propia de los lenguajes de programación:

las etiquetas

Nivel básico

1 3HTML es muy poderoso

Es un texto estructurado, compuesto por etiquetas que marcan el principio y el fin de cada elemento.

Elprincipioyelfin

<aviso>That is the question.</aviso>

Nivel básico

1 3El texto de etiquetas

Cada elemento:

• Empieza con una etiqueta

•Y termina con la misma etiqueta, dentro

de la cual hay una barra inclinada.

Las etiquetas pueden ser también llamadas marcas (inglés: Markup).

Nivel básico

4 Pero, ¿quées una etiqueta?

Nivel básico

1 4Una etiqueta es un aviso

Una etiqueta es un aviso al lector de HTML de que:

•Algo está a punto de empezar o algo acaba de

terminar.

• El aviso tiene nombre y se escribe entre los

signos:

< y >

Nivel básico

1 4Algo empieza y algo termina

La etiqueta indica que algo está a punto de empezar o algo acaba de terminar:

<aviso>Esto es el algo.</aviso>

empezar terminar

Nivel básico

1 4Algo empieza y algo termina

<aviso>El contenido.</aviso>

<aviso>El contenido puede ser muy extenso,

tan extenso como queramos. Empieza con

una etiqueta y termina con una / y la misma

etiqueta.</aviso>

Nivel básico

5 La mayoría de lenguajes son así.

Nivel básico

1¡Qué susto!

Esto es un fragmento de texto HTMlL.

5

El texto HTML también puede ser llamado código.

Nivel básico

1 5¿El código es algo raro?

Nuestro cerebro cuando empieza a ver código:

• Lo considera algo raro.

• Incluso, incómodo (casi horrible :-(

Pero la mayoría de lenguajes son así.

Nivel básico

1 5Algo empieza y, después, termina

Si decimos El gato duerme, implícitamente estamos entendiendo esto:

El gato duerme.

“etiqueta” que empieza “etiqueta” que termina.

Nivel básico

1 5Al hablar “entonamos” etiquetas

Veamos un ejemplo. No leemos igual estas dos secuencias. Podemos hacer la prueba con el traductor de Google.

<aviso>That is the question. That is de

question.</aviso>

<aviso>That is the question that is the

question.</aviso>

Nivel básico

1 5HTML: un lenguaje visual

Lo mismo nos ocurre con muchos lenguajes visuales, por ejemplo:

lasseñalesdetráfico.

autopista

Nivel básico

1 5HTML: un lenguaje visual

Lo mismo nos ocurre con muchos lenguajes visuales, por ejemplo:

lasseñalesdetráfico.

Prohibido + de 60

Nivel básico

6 Lenguaje para máquinas

Nivel básico

1 6Como funciona un lenguaje

Un lenguaje occidental como el nuestro se lee de izquierda a derecha.

Nivel básico

1 6Como funciona un lenguaje

Un lenguaje occidental como el nuestro se lee de izquierda a derecha.

Nivel básico

1 6Como funciona un lenguaje

Un lenguaje occidental como el nuestro se lee de izquierda a derecha.

un plato de gambas

Nivel básico

1 6Como funciona un lenguaje

Un lenguaje occidental como el nuestro se lee de izquierda a derecha.

un plato de gambas

un plato de gambas

Nivel básico

1 6Como funciona un lenguaje

Un lenguaje occidental como el nuestro se lee de izquierda a derecha.

un plato de gambas

1un plato de gambas

Nivel básico

1 6Como funciona un lenguaje

Un lenguaje occidental como el nuestro se lee de izquierda a derecha.

un plato de gambas

un plato de gambas

Nivel básico

1 6Como funciona un lenguaje

Un lenguaje occidental como el nuestro se lee de izquierda a derecha.

un plato de gambas

un plato de gambas

Nivel básico

1 6Unos escriben, otros leen

El texto HTML se lee como un lenguaje occidental:

de izquierda a derecha.

• Las personas lo escribimos.

• Las máquinas son las que lo leen.

Nivel básico

1 6Los navegadores leen

Los navegadores son los encargados de leer el HTML.

Crome Firefox

Safari Explorer

Nivel básico

1Lo entienden

• Los navegadores entienden el texto HTML.

• Son capaces de interpretarlo.

6

<html> <body><p>Texto <br> Mas texto<img src /></p></body></html>

Ok. Lo he entendido todo. Ahora os lo cuento...

Nivel básico

1 6Y lo explican

Los navegadores son capaces de contar detalladamente a los dispositivos lo que han leído.

Nivel básico

1 6Y lo explican

Los navegadores son capaces de contar detalladamente a los dispositivos lo que han leído.

Nivel básico

1 6Y lo explican

Los navegadores son capaces de contar detalladamente a los dispositivos lo que han leído.

Nivel básico

Resumen y ejercicios prácticos

7

Nivel básico

1 7Resumen del módulo

1 HTML es el lenguaje para hacer páginas web.2 HTML es simple, pero es potente.3 Simple porque es un simple texto que se puede escribir

en cualquier bloc de notas.4 Potente porque tiene links que enlazan billones de

páginas entre sí.5 Es un lenguaje visual, cuyo elemento fundamental son

las etiquetas.6 Los navegadores son los que leen este lenguaje.7 Los ordenadores, tablets, móviles, etc., lo entienden y,

finalmente, nos lo muestran en pantalla.

Nivel básico

1 7Pero, ¿quien lo escribe?

Pero ¿quien lo escribe? Porque alguien tendrá que escribir, ¿verdad?

Sí, alguien tiene que escribir.

Nosotros

Esto es lo que estamos aprendiendo en este Curso.

Nivel básico

1 7Algunos ejemplos

Veamos algunos ejemplos simples de código.

Observemos como un texto simple, sin nada más, solo por incluirle algunas etiquetas, puede cambiar su aspecto de forma espectacular.

En este video podrás ver este módulo más desarrollado. Al final de video, además, podrás ver ejemplos prácticos de los conceptos explicados en este tutorial.

Nivel básico

1Hasta aquí el módulo núm. 1

Seguimos!

Cros i Massó