Post on 30-Jul-2015
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
Nivell bàsic
11HTML é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.
Nivell bàsic
11Un llenguatge poderós
Hiper = superioritat.
És a dir: HTML és un llenguatge superior,
un llenguatge poderós.
Nivell bàsic
1 2HTML 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...
Nivell bàsic
11 2El 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
Nivell bàsic
1 2El 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.
Nivell bàsic
1 3HTML: 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.
Nivell bàsic
1 3En què quedem?
Llavors, ¿per què és Hiper?
Perque té una cosa molt important pròpia dels
llenguatges de programació:
les etiquetes
Nivell bàsic
1 3HTML és molt poderós
És un text estructurat, format per etiquetes que marquen l’inici i la fi de cada element.
Elprincipiilafi
<avís>That is the question.</avís>
Nivell bàsic
1 3El 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).
Nivell bàsic
1 4Una 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 >
Nivell bàsic
1 4Alguna 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
Nivell bàsic
1 4Alguna 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>
Nivell bàsic
1Quin ensurt!
Això és un fragment de text HTML.
5
El text HTML també pot ser anomenat codi.
Nivell bàsic
1 5Això 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í.
Nivell bàsic
1 5Començ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.
Nivell bàsic
1 5En 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>
Nivell bàsic
1 5HTML: un llenguatge visual
El mateix ens passa amb molts llenguatges visuals, per exemple:
les senyals de trànsit.
autopista
Nivell bàsic
1 5HTML: un llenguatge visual
El mateix ens passa amb molts llenguatges visuals, per exemple:
les senyals de trànsit.
Prohibit + de 60
Nivell bàsic
1 6Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix d’esquerra a dreta.
Nivell bàsic
1 6Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix d’esquerra a dreta.
Nivell bàsic
1 6Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix d’esquerra a dreta.
un plat de gambes
Nivell bàsic
1 6Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix d’esquerra a dreta.
un plat de gambes
un plat de gambes
Nivell bàsic
1 6Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix d’esquerra a dreta.
un plat de gambes
1un plat de gambes
Nivell bàsic
1 6Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix d’esquerra a dreta.
un plat de gambes
un plat de gambes
Nivell bàsic
1 6Com funciona un llenguatge
Un llenguatge occidental com el nostre es llegeix d’esquerra a dreta.
un plat de gambes
un plat de gambes
Nivell bàsic
1 6Uns 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.
Nivell bàsic
1 6Els navegadors llegeixen
Els navegadors són els encarregats de llegir l’HTML
Crome Firefox
Safari Explorer
Nivell bàsic
1L’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...
Nivell bàsic
1 6I ho expliquen
Els navegadors són capaços d’explicar detalladament als dispositius allò que han llegit.
Nivell bàsic
1 6I ho expliquen
Els navegadors són capaços d’explicar detalladament als dispositius allò que han llegit.
Nivell bàsic
1 6I ho expliquen
Els navegadors són capaços d’explicar detalladament als dispositius allò que han llegit.
Nivell bàsic
1 7Resum 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.
Nivell bàsic
1 7Però, ¿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.
Nivell bàsic
1 7Alguns 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.