No és un llenguatge de programació. És un llenguatge d’estructura.
És la base de totes les pàgines web del món.
L’objectiu és dir als navegadors quina és l’estructura de la nostra pàgina web i els tipus de contingut, per als cercadors. Molt important pel posicionament (SEO).
HTML no serveix per fer maques les coses, per això s’utilitza CSS.
Funciona amb etiquetes. Hi ha molts tipus d’etiquetes i cadascuna serveix per a un contingut en particular. Si no posem l’etiqueta correcta, es veurà el contingut, però els motors de cerca no ho entendran bé.
En general, les etiquetes s’obren i es tanquen, la sintaxi és:
Les etiquetes poden tenir Atributs. Els atributs són valors addicionals que configuren els elements o ajusten el seu comportament. P.ex: <html lang="ca"> ó <h1 class="titol">
Es poden posar etiquetes a dins d’una altre etiqueta (pares, fills, germans, etc.).
L'estructura principal de totes les webs és:
<!DOCTYPE html>
<html>
<head>
……….
</head>
<body>
………..
</body>
</html>
<!DOCTYPE html> El tipus de document, ajuda al navegador web a mostrar la pàgina web correctament
L’etiqueta <html> indica que escriurem amb llenguatge HTML i embolcalla tota la resta del codi.
L’etiqueta <head> és la capçalera del document HTML i conté tots els elements no visibles que ajuden a fer que la pàgina funcioni correctament.
L’etiqueta <body> conté tots els elements visibles.
Les metadades del document, com el títol, la configuració de la finestra gràfica, la descripció, l'URL base o els enllaços del full d'estil, es troben dins de l'element <head>.
El primer element del <head> hauria de ser la declaració de codificació de caràcters, charset. Va abans del títol per assegurar-se que el navegador pot representar els caràcters d'aquest títol i tots els caràcters de la resta del document. Hauríeu d'utilitzar UTF-8, ja que permet la codificació d'un a quatre bytes de tots els caràcters i és el tipus de codificació requerit per HTML5.
La vostra pàgina d'inici i totes les pàgines addicionals haurien de tenir un títol únic. Els continguts del títol del document, el text entre les <title>, es mostren a la pestanya del navegador, la llista de finestres obertes, l'historial, els resultats de la cerca i, tret que es redefineixin amb etiquetes <meta>, a les targetes de xarxes socials.
L'altra metaetiqueta que s'ha de considerar essencial és la metaetiqueta de la finestra gràfica, que ajuda a la capacitat de resposta del lloc, permetent que el contingut es mostri bé de manera predeterminada, independentment de l'amplada de la finestra gràfica. Per defecte utilitzarem:
<meta name="viewport" content="width=device-width" />
El codi anterior significa "fer que el document es carregui començant per fer que l'amplada del contingut sigui l'amplada de la pantalla".
Aquestes són les principals metadades que hem d'incloure a totes les pàgines web, però n'hi ha moltes més com per exemple, l'enllaç amb fulls d'estil (ho veurem més endavant), o la descripció i targetes que es mostrarà als navegadors o quan compartim la web per xarxes socials.
Obre el teu editor de codi i escriu:
Abans d'executar el codi,
què creus que farà aquest codi?
es veurà alguna cosa a la pantalla? per què?
Ara executa'l.
Passa el que havies previst?
On apareix el títol "La meva web"?
Per últim, descarrega una imatge tipus icona i guarda-la a la mateixa carpeta on tens l'arxiu HTML. Pots descarregar una icona d'AQUESTES. Afegeix una línia al teu codi, de manera que et quedi així (on "icona.png" ha de ser el nom de la teva imatge):
Què passa quan executes aquest codi? Apareix la imatge? On? Per què?
L'etiqueta link s'utilitza per crear relacions entre el document HTML i recursos externs. El tipus de relació es defineix pel valor de l'atribut rel. Actualment hi ha 25 valors disponibles per a l'atribut rel que es poden utilitzar amb <link>, <a>i <area>, o <form>, amb uns quants que es poden utilitzar amb tots.
Hi ha 6 nivells de títols: h1, h2, h3, h4, h5 i h6.
h2 és un subapartat de h1, i h3 un subapartat de h2, etc.
Els paragrafs de text van amb l’etiqueta <p>
Tot el text dins l’etiqueta <p> s’interpreta com a una sola línia, encara que nosaltres fem salts de línia amb “enter”. Si volem forçar un salt de línia hem de posar l’etiqueta <br>.
Si es vol mostrar un tros de text en cursiva, s'embolcalla aquest text amb l'etiqueta <em> (d'èmfasis).
Si es vol posar un text en negreta, s'embolcalla aquest text amb l'etiqueta <strong>.
Amb <hr> s'afegeix una línia separadora horitzontal.
Per indicar els elements d'una llista s'utilitza l'etiqueta <li>. Si la llista no té un ordre concret els elements <li> s'embolcallen amb l'etiqueta <ul>, en canvi si l'ordre dels elements és important s'utilitza l'embolcall <ol>.
Escriu i executa el següent codi dins el cos (<body>) de la teva pàgina, intenta entendre què fa cada línia i prova de fer-hi alguns canvis:
L'etiqueta <a> s'utilitza per definir un hiperenllaç, que s'utilitza per enllaçar pàgines web. Dins de l'etiqueta <a> hi ha l'atribut href, que dóna a l'URL la destinació de l'enllaç. El text o imatges tancats per les etiquetes <a> i </a> seran visibles a la pàgina web i clicables. Escriu aquesta línia de codi dins el cos del teu fitxer:
Entens el que passa i per a què serveix l'etiqueta <a> i l'atribut href?
Podeu utilitzar l'atribut target per especificar on obrir la pàgina web enllaçada. L'exemple següent utilitza el valor _blank per obrir la pàgina d'inici a la web Ara és demà en una pestanya nova:
Tipus de rutes:
Rutes absolutes -> tenen un protocol http, es solen utilitzar per rutes externes.
Rutes relatives -> relatives al punt on ens trobem. El millor és utilitzar rutes relatives a l’arrel: “/jjjj/xxx.html”
També es pot navegar a diferents punts de la pàgina a través d’enllaços. Cal posar una id als apartats on s’ha de navegar i on posem l’enllaç href=”#id”.
L'etiqueta <img> s'utilitza per inserir imatges a la pàgina web. L'origen de la imatge s'indica amb l'atribut src. Atenció!, aquesta etiqueta no cal tancar-la, es tanca sola automàticament.
Sempre és preferible tenir les imatges guardades juntament amb la web i treballar amb referències relatives:
Per especificar la mida de la imatge podem utilitzar els atributs width i height.
Fem un exemple, copia l'enllaç a la imatge d'algun logotip que t'agradi i escriu el següent codi:
Ara ajusta'n la mida per tal que faci 100 x 100 píxels:
Si et queda distorsionat prova d'ajustar només una de les mides.
En escriure HTML, és comú cometre errors com ara:
Oblidant les etiquetes de tancament
Falten les cometes per a un URL
Escriure malament src com a scr
Posar contingut visible de la web al <head>
Escriure malament la ruta d'un fitxer
Aquests errors poden ser difícils de detectar, però aquí teniu alguns consells per ajudar-vos:
Llegeix el codi HTML línia per línia
Mireu la vista prèvia del vostre lloc web cada vegada que feu un canvi a l'HTML, per assegurar-vos que el que volíeu que passés ha passat.
Allunya't del teclat. Dedica uns minuts a fer una activitat diferent i torna i prova un enfocament diferent.