Primer módulo de la serie de 21 módulos del Curso, Todo lo que necesitas saber de HTML y nunca te atreviste a preguntar, de Cros i Massó. En este primer módulo se explica, de forma muy didáctica, lo que es y como funciona el lenguaje HTML5., cual es su esencia y su lógica.

1. 1
Para empezar
con HTML
1
Nivel básico

2. 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

3. 1
Nivel básico
¿Qué es
HTML?

4. Nivel básico
1 1 HTML 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.

5. Nivel básico
1 1 Un lenguaje poderoso
Hiper = superioridad.
Es decir: HTML es un lenguaje superior,
un lenguaje poderoso.

6. Nivel básico
2 ¿Por qué
HTML es
poderoso?

7. Nivel básico
1 2 HTML 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...

8. Nivel básico
1 2 El 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

9. Nivel básico
1 2 El 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.

10. Nivel básico
3 HTML: el texto
de etiquetas

11. Nivel básico
1 3 HTML: 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.

12. Nivel básico
1 3 HTML: ¿simple o poderoso?
Entonces, ¿por qué es Hiper?
Porque incluye una cosa muy importante,
propia de los lenguajes de programación:
las etiquetas

13. Nivel básico
1 3 HTML es muy poderoso
Es un texto estructurado, compuesto por etiquetas
que marcan el principio y el fin de cada elemento.
El principio y el fin
<aviso>That is the question.</aviso>

14. Nivel básico
1 3 El 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).

15. Nivel básico
4 Pero, ¿qué
es una
etiqueta?

16. Nivel básico
1 4 Una 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 >

17. Nivel básico
1 4 Algo 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

18. Nivel básico
1 4 Algo 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>

19. Nivel básico
5 La mayoría de
lenguajes son
así.

20. Nivel básico
1 ¡Qué susto!
Esto es un fragmento de texto HTMlL.
5
El texto HTML también puede ser llamado código.

21. 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í.

22. Nivel básico
1 5 Algo empieza y, después, termina
Si decimos El gato duerme, implícitamente estamos
entendiendo esto:
El gato duerme.
“etiqueta” que empieza “etiqueta” que termina.

23. Nivel básico
1 5 Al 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>

24. Nivel básico
1 5 HTML: un lenguaje visual
Lo mismo nos ocurre con muchos lenguajes visuales,
por ejemplo:
las señales de tráfico.
autopista

25. Nivel básico
1 5 HTML: un lenguaje visual
Lo mismo nos ocurre con muchos lenguajes visuales,
por ejemplo:
las señales de tráfico.
Prohibido + de 60

26. Nivel básico
6 Lenguaje para
máquinas

27. Nivel básico
1 6 Como funciona un lenguaje
Un lenguaje occidental como el nuestro se lee de
izquierda a derecha.

28. Nivel básico
1 6 Como funciona un lenguaje
Un lenguaje occidental como el nuestro se lee de
izquierda a derecha.

29. Nivel básico
1 6 Como funciona un lenguaje
Un lenguaje occidental como el nuestro se lee de
izquierda a derecha.
un plato de
gambas

30. Nivel básico
1 6 Como funciona un lenguaje
Un lenguaje occidental como el nuestro se lee de
izquierda a derecha.
un plato de
gambas
un plato de gambas

31. Nivel básico
1 6 Como funciona un lenguaje
Un lenguaje occidental como el nuestro se lee de
izquierda a derecha.
un plato de gambas
1 un plato de
gambas

32. Nivel básico
1 6 Como funciona un lenguaje
Un lenguaje occidental como el nuestro se lee de
izquierda a derecha.
un plato de
gambas
un plato de gambas

33. Nivel básico
1 6 Como funciona un lenguaje
Un lenguaje occidental como el nuestro se lee de
izquierda a derecha.
un plato de
gambas
un plato de gambas

34. Nivel básico
1 6 Unos 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.

35. Nivel básico
1 6 Los navegadores leen
Los navegadores son los encargados de leer el HTML.
Crome Firefox
Safari Explorer

36. Nivel básico
1 Lo 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...

37. Nivel básico
1 6 Y lo explican
Los navegadores son capaces de contar detalladamente a
los dispositivos lo que han leído.

38. Nivel básico
1 6 Y lo explican
Los navegadores son capaces de contar detalladamente a
los dispositivos lo que han leído.

39. Nivel básico
1 6 Y lo explican
Los navegadores son capaces de contar detalladamente a
los dispositivos lo que han leído.

40. Nivel básico
Resumen y
ejercicios
prácticos
7

41. Nivel básico
1 7 Resumen 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.

42. Nivel básico
1 7 Pero, ¿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.

43. Nivel básico
1 7 Algunos 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.

44. Nivel básico
1
Hasta aquí el módulo núm. 1
Seguimos!

45. Cros i Massó