Internet de les coses amb ESP32 i ESP8266

Exemples Referència Plaques   Recursos CITCEA
Projectes Programació Perifèrics   Inici

Llenguatge html

L'estructura bàsica d'una pàgina web en html seria la següent, on el contingut aniria on hi ha els punts suspensius.

<!DOCTYPE HTML>
<meta charset='UTF-8'>
<html>
<head>
<title>Títol de la pàgina</title>
</head>
<body>
...
</body>
</html>

Però les comandes mínimes per a que funcioni serien:

<!DOCTYPE HTML>
<meta charset='UTF-8'>
<html>
...
</html>

El llenguatge html és molt complet. Aquí només comentarem les instruccions que fem servir en aquest web.

Les instruccions s'implementen a base d'etiquetes. Una etiqueta html comença sempre amb el signe < i acaba amb el signe >. La gran majoria de les instruccions html són dobles, és a dir que tenen una etiqueta d'obertura i una de tancament. Les etiquetes de tancament tenen el mateix nom que les d'obertura però porten una barra / al davant. Per exemple <html> és una etiqueta d'obertura i </html> és la seva corresponent etiqueta de tancament. Si la instrucció té paràmetres, aquests han d'anar a l'etiqueta d'obertura, per exemple:

<button type='button' onClick=location.href='/?LED=0'>Apaga</button>

Instruccions que donen l'estructura general de la pàgina

Etiqueta obertura Etiqueta tancament Descripció
<!DOCTYPE HTML> Primera etiqueta del document que indica que és una pàgina html
<meta> Etiqueta que permet indicar paràmetres de configuració
<html> </html> Engloba tot el contingut html de la pàgina
<head> </head> Engloba la capçalera de la pàgina.
El contingut de la capçalera no apareix en la part visible de la pàgina.
<title> </title> Engloba el títol de la pàgina.
El títol, en principi, es mostra a la pestanya del navegador.
<body> </body> Engloba el cos (la part que, en principi, es mostra) de la pàgina.

Instruccions per estructurar el text

Etiqueta obertura Etiqueta tancament Descripció
<h1> </h1> Títol principal o de primer nivell
<h2> </h2> Títol de segon nivell
<h3> </h3> Títol de tercer nivell
<h4> </h4> Títol de quart nivell
<h5> </h5> Títol de cinquè nivell
<h6> </h6> Títol de sisè nivell
<p> </p> Paràgraf
<br> Salt de línia

Instruccions de format de text

Etiqueta obertura Etiqueta tancament Descripció
<b> </b> Negreta
<strong> </strong> Lletra gruixuda. Normalment és similar a negreta
<i> </i> Itàlica (cursiva)
<em> </em> Itàlica (cursiva)

Instruccions de formularis

Etiqueta obertura Etiqueta tancament Descripció
<form> </form> Engloba tots els camps i botons que pertanyen al mateix formulari i
les seves dades s'envien conjuntament quan es prem el botó d'acceptar
<button> </button> Botó (sobre el que es pot fer clic amb el ratolí o el teclat)
<input> Element d'entrada genèric del formulari

La instrucció form té un paràmetre action que indica l'acció que es farà quan es prem el botó i un paràmetre method on indiquem la forma (get o post) com s'envien les dades. Nosaltres, en principi, farem servir get.

<form action='/' method='get'>

La instrucció button pot ser de tres tipus: button (botó en general), reset (botó de reiniciar) i submit (botó d'acceptar o enviar un formulari). Pot tenir també un paràmetre onClick que indica l'acció que es farà quan es prem el botó. El text del botó el posem entre les etiquetes d'obertura i tancament.

<button type='button' onClick=location.href='/?LED=1'>Encén</button>

La instrucció input pot ser de diversos tipus:

Tipus Aplicació
text Camp per escriure text
submit Botó d'enviar
range Cursor lliscant

El paràmetre type és el tipus. Quan té sentit, el paràmetre name és el nom, que es correspon amb el paràmetre d'enviament. El paràmetre value és el valor que apareix per defecte en el camp. Alguns exemples:

<input type='text' name='B' value=''><br>
<input type='submit' value='Enviar'>

En el cas del tipus range tenim més paràmetres, min és el valor que correspon a la posició de més a l'esquerra del cursor i max el que correspon a la posició de més a la dreta.

<input type='range' name='B' min='0' max='255' value='0'>

Caràcters especials

Els caràcters que no són ASCII no sempre es mostren correctament al navegador. Per eviatr problemes de visualització, és recomanable substituir-los pels codis que els corresponen. La taula següent mostra els d'ús més habitual.

Caràcter Codi                     Caràcter Codi                     Caràcter Codi                     Caràcter Codi
à &agrave; í &iacute; ò &ograve; ç &ccedil;
À &Agrave; Í &Iacute; Ò &Ograve; Ç &Ccedil;
é &eacute; ï &iuml; ú &uacute; · &middot;
É &Eacute; Ï &Iuml; Ú &Uacute; ñ &ntilde;
è &egrave; ó &oacute; ü &uuml; Ñ &Ntilde;
È &Egrave; Ó &Oacute; Ü &Uuml; &nbsp;

 En html les línies de text es poden tallar per qualsevol espai en blanc per donar format al text. Quan volem especificar que un espai en blanc no es pot tallar podem fer servir el codi &nbsp;. Això és útil, per exemple, per indicar que un nombre i les seves unitats no poden estar en línies diferents. En html també es suprimeixen els espais en blanc redundants (si n'hi ha més d'un només se'n mostra un). Aquest codi també ens serveix per deixar més espai ja que els &nbsp; no es suprimeixen.

En aquesta pàgina es pot consultar la llista completa.

 

 

 

 

 

 

 

 

 

 

Licencia de Creative Commons
Esta obra de Oriol Boix está licenciada bajo una licencia no importada Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0.