Tag-urile pentru Javascript si CSS

As vrea acum sa vorbim despre cateva tag-uri care se intalnesc foarte des in elementul <head></head>. Si anume cele pentru a incarca fisiere Javascript si CSS.

Tag-ul pentru fisiere Javascript

Pentru a incarca un cod Javascript intr-o pagina HTML vom folosi tag-ul: <script></script>

Continutul unui fisier extern Javascript poate fi incarcat folosind atributul src (care vine de la source):

<script src="un-fisier.js"></script>

In acest caz, browser-ul va cere fisierul de la acea adresa, il va citi si il va interpreta.

Indiferent de ce tag este folosit atributul src, acesta poate primi o cale in doua feluri:

absoluta: prin care precizam exact adresa unde se afla fisierul: src="https://www.edumo.org/un-fisier.js", acesta include protocolul https/http, domeniul www.edumo.org si calea completa a fisierului /un-fisier.js
relativa: daca fisierul Javascript se afla in acelasi folder cu fisierul HTML care il importa. Calea catre fisier va fi in functie fisierul HTML src="un-fisier.js"

Continutul unui fisier Javascript poate fi scris direct in pagina, intre cele doua tag-uri. In acest caz nu mai este nevoie sa precizam atributul src:

<script>
    // codul javascript va fi scris direct aici
</script>

Veti vedea in unele pagini si atributul type folosit cu acest tag, dar acesta nu mai este cerut de nici un browser modern, pentru ca ele stiu acum cum sa interpreteze un astfel de fisier. Cel mai important atribut al tag-ului (si singurul) ramane src.

Tag-ul pentru fisiere CSS

Pentru a incarca fisiere CSS vom folosi tag-ul <link />. Acesta este un tag care nu se inchide iar atributul lui principal href primeste ca valoare calea catre fisierul pe care vrem sa il incarcam:

<link href="style.css" />

La fel ca in cazul atributului src folosit de tag-ul <script></script> acest atribut poate primi un link absolut (adresa completa a fisierului) sau unul relativ (in functie de fisierul HTML care il importa).

Si astfel browser-ul cere fisierul CSS de la acea adresa, il citeste si apoi il interpreteaza.

Alte atribute destul de intalnite ale acestui tag (dar oarecum optionale) sunt:

type: acest atribut ii spune browser-ului ce tip de fisier va gasi la capatul link-ului.

Daca incarcam un fisier cu extensia .css el va presupune ca este un fisier de tipul "text/css", dar daca oferim un link catre un fisier fara o extensie ii poate veni un pic mai greu sa ghiceasca. Valoarea acestui atribut este valoarea MIME type al fisierului. Exemplu:
```
<link href="https://www.edumo.org/style.css" type="text/css" />
```
rel: acest atribut ii spune browser-ului ce rol are acel fisier (rel vine de la relationship, ce legatura/rol are fisierul cu pagina).

De obicei va avea valoarea de "stylesheet", de exemplu:
```
<link href="https://www.edumo.org/style.css" type="text/css" rel="stylesheet" />
```

Mai exista o metoda de a folosi cod CSS, si anume de a-l scrie direct in pagina fara a-l incarca din alta parte. Pentru aceasta in HTML avem un tag special. Diferenta fata de tag-ul <link /> este ca acesta se inchide, iar tot continutul va fi pus intre aceste tag-uri:

<style>
    /* codul css va fi scris direct aici */
</style>

Concluzii

Asadar pentru Javascript avem un singur tag pentru importa un fisier in pagina sau pentru a scrie direct codul, si anume <script></script>.

Iar pentru CSS avem doua tag-uri: unul pentru a-l importa in pagina <link /> si unul pentru a-l scrie direct <style></style>