Primer mòdul de la sèrie de 21 mòduls del Curs d'HTML5: "Tot allò que necessites saber d'HTML i mai no t'has atrevit a preguntar, de Cros i Massó. El Curs està dirigit a persones qeu no saben programació però necessiten mantenir un espai web o un blog. En aquest primer mòdul s'explica, de forma molt didàctica, el què és i com funciona el llenguatge HTML.

1. Per començar
amb HTML
1
Nivell bàsic

2. Nivell bàsic
1
¿Què és HTML?
¿Per què HTML és poderós?
HTML: el text d’etiquetes
Però, què és una etiqueta?
La majoria de llenguatges són així
Lenguatge per a màquines.
Resum i exercicis pràctics.
1
2
3
4
5
6
7

3. 1
Nivell bàsic
¿Què és
HTML?

4. Nivell bàsic
1 1 HTML és un llenguatge
HTML són les inicials de “Hyper Text Markup Language”.
• És el llenguatge amb el qual s’escriuen les
pàgines web.
• És el llenguatge anomenat hipertext.

5. Nivell bàsic
1 1 Un llenguatge poderós
Hiper = superioritat.
És a dir: HTML és un llenguatge superior,
un llenguatge poderós.

6. Nivell bàsic
2 Per què
HTML és
poderós?

7. Nivell bàsic
1 2 HTML permet moltes coses
Tantes coses com som capaços de veure o sentir en una
pantalla d’ordinador, tablet o mòbil, amb connexió a
Internet:
• textos.
• formes, gràfiques...
• fotografies, videos, so...

8. Nivell bàsic
1 12 El llenguatge que enllaça el món
L’HTML o hipertext permet una cosa fonamental, quasi
evident en el món actual, però
impossible abans d’existir Internet:
els links

9. Nivell bàsic
1 2 El llenguatge que enllaça el món
És a dir, HTML té la capacitat de:
• Enllaçar pàgines d’ordinadors diferents, a
països distants.
• Unir una xarxa amb bilions de links.
• Sense HTML no existiria Internet.

10. Nivell bàsic
3 HTML: el text
d’etiquetes

11. Nivell bàsic
1 3 HTML: simple o poderós?
Hem dit que HTML és un llenguatge que té poder. Però,
en rigor, és un text simple. Es pot escriure a qualsevol
Bloc de notes, SimpleText, Word...
• És text, pur i simple.
• O sigui: vocals, consonants, números...
• El text de sempre.

12. Nivell bàsic
1 3 En què quedem?
Llavors, ¿per què és Hiper?
Perque té una cosa molt important pròpia dels
llenguatges de programació:
les etiquetes

13. Nivell bàsic
1 3 HTML és molt poderós
És un text estructurat, format per etiquetes que
marquen l’inici i la fi de cada element.
El principi i la fi
<avís>That is the question.</avís>

14. Nivell bàsic
1 3 El text d’etiquetes
Cada element:
• Comença amb una etiqueta
• I acaba amb la mateixa etiqueta, amb
una barra inclinada.
Les etiquetes també poden ser anomenades
marques (anglès: Markup).

15. Nivell bàsic
4 Però, què
és una
etiqueta?

16. Nivell bàsic
1 4 Una etiqueta és un avís
Una etiqueta és un avís al lector que:
• Alguna cosa és a punt de començar o
acaba de finalitzar.
• L’avís té nom i s’escriu entre els signes:
< i >

17. Nivell bàsic
1 4 Alguna cosa comença i acaba
L’etiqueta indica que alguna cosa és a punt de
començar o alguna cosa acaba de finalitzar:
<avís>Això és la cosa.</avís>
començar finalitzar

18. Nivell bàsic
1 4 Alguna cosa comença i acaba
<avís>El contingut.</avís>
<avís>El contingut pot ser molt extens, tan
extens com es vulgui. Comença amb una etiqueta
i acaba amb una / i la mateixa etiqueta.</avís>

19. Nivell bàsic
5 La major part
de llenguatges
són així.

20. Nivell bàsic
1 Quin ensurt!
Això és un fragment de text HTML.
5
El text HTML també pot ser anomenat codi.

21. Nivell bàsic
1 5 Això de codi, és tan estrany?
El nostre cervell quan comença a veure codi:
• El considera estrany.
• Fins i tot, incòmode (quasi horrible :-(
Però la majoria de llenguatges són així.

22. Nivell bàsic
1 5 Comença i acaba
Si diem: ”El mico ha parat de grimpar”, implícitament
estem entenent això:
El mico ha parat de grimpar.
“etiqueta” que comença “etiqueta” que acaba.

23. Nivell bàsic
1 5 En parlar, “entonem” etiquetes
Vegem un exemple. No llegim igual aquestes dues
seqüències. Podem fer la prova amb el traductor de
Google.
<avís>That is the question. That is de
question.</avís>
<avís>That is the question that is the
question.</avís>

24. Nivell bàsic
1 5 HTML: un llenguatge visual
El mateix ens passa amb molts llenguatges visuals,
per exemple:
les senyals de trànsit.
autopista

25. Nivell bàsic
1 5 HTML: un llenguatge visual
El mateix ens passa amb molts llenguatges visuals,
per exemple:
les senyals de trànsit.
Prohibit + de 60

26. Nivell bàsic
6 Llenguatge
per a
màquines

27. Nivell bàsic
1 6 Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix
d’esquerra a dreta.

28. Nivell bàsic
1 6 Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix
d’esquerra a dreta.

29. Nivell bàsic
1 6 Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix
d’esquerra a dreta.
un plat de
gambes

30. Nivell bàsic
1 6 Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix
d’esquerra a dreta.
un plat de
gambes
un plat de gambes

31. Nivell bàsic
1 6 Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix
d’esquerra a dreta.
un plat de gambes
1 un plat de
gambes

32. Nivell bàsic
1 6 Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix
d’esquerra a dreta.
un plat de
gambes
un plat de gambes

33. Nivell bàsic
1 6 Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix
d’esquerra a dreta.
un plat de
gambes
un plat de gambes

34. Nivell bàsic
1 6 Uns escriuen, altres llegeixen
El text HTML es llegeix com un
llenguatge occidental: d’esquerra a dreta.
• Les persones l’escrivim.
• Les màquines són les que el llegeixen.

35. Nivell bàsic
1 6 Els navegadors llegeixen
Els navegadors són els encarregats de llegir l’HTML
Crome Firefox
Safari Explorer

36. Nivell bàsic
1 L’entenen
• Els navegadors entenen el text HTML.
• Són capaços d’interpretar el text.
6
<HTML> <body>
<p>Text <br>
Més text
<img src />
</p></body>
</HTML>
Ok. Ho
entenc tot.
Ara us ho
explico...

37. Nivell bàsic
1 6 I ho expliquen
Els navegadors són capaços d’explicar detalladament als
dispositius allò que han llegit.

38. Nivell bàsic
1 6 I ho expliquen
Els navegadors són capaços d’explicar detalladament als
dispositius allò que han llegit.

39. Nivell bàsic
1 6 I ho expliquen
Els navegadors són capaços d’explicar detalladament als
dispositius allò que han llegit.

40. Nivell bàsic
7 Resum i
exercicis
pràctics.

41. Nivell bàsic
1 7 Resum d’aquest mòdul
1 HTML és el llenguatge per fer pàgines web.
2 HTML és simple, però és potent.
3 Simple perquè és un simple text que es pot escriure en
qualsevol bloc de notes.
4 Potent perquè té links que enllacen bilions de pàgines
entre si.
5 És un llenguatge visual, l’element fonamental del qual
són les etiquetes.
6 Els navegadors són els que llegeixen aquest llenguatge.
7 Els ordinadors, tablets, mòbils, etc., l’entenen i,
finalment, ens ho presenten tot en pantalla.

42. Nivell bàsic
1 7 Però, ¿qui ho escriu?
Potser t’estiguis preguntant: però algú haurà d’escriure
aquest text, oi?
Efectivament: algú l’haurà d’escriure...
Nosaltres
Això és el que estem aprenent en aquest Curs.

43. Nivell bàsic
1 7 Alguns exemples
Vegem alguns exemples simples de codi.
Observem com un text simple, i res més, només per
incloure algunes etiquetes, pot canviar d’aspecte de
forma espectacular.
En aquest vídeo podràs veure aquest mòdul més
desenvolupat. Al final del vídeo, a més, podràs veure
exemples pràctics dels conceptes explicats en aquest
tutorial.

44. Nivell bàsic
1 7 Fins aquí el mòdul núm. 1
Seguim!

45. Cros i Massó