Per començar amb HTML

1

Nivell bàsic

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

1

Nivell bàsic

¿Què és HTML?

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

2 Per quèHTML és 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

3 HTML: el text d’etiquetes

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

4 Però, quèés una etiqueta?

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

5 La major part de llenguatges són així.

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

6 Llenguatge per a màquines

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

7 Resum i exercicis pràctics.

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.

Nivell bàsic

1 7Fins aquí el mòdul núm. 1

Seguim!

Cros i Massó