Dai precedenti articoli hai visto come sono fatti i tag HTML e sperimentato dei piccoli esempi per capire a cosa servono (sostanzialmente per creare e formattare una pagina web).
In questo articolo andiamo scoprire qualcosa in più sull’HTML, in particolare gli attributi.
Come esempio utilizziamo il tag “<a>” necessario per creare un link verso una risorsa come un’altra pagina web o verso un qualsiasi file.
Il solo tag <a> immaginerai che non è sufficiente al browser per sapere a quale risorsa deve accede quando l’utente clicca sul testo all’interno dello stesso tag.
È proprio per questo motivo che entrano in gioco gli attributi dei nostri tag. Formalmente gli attributi sono del testo scritto all’interno del tag di apertura; ad esempio, relativamente al nostro tag utilizzato per creare un link scriveremo:
<a attributo=”caratteristica attributo”> testo qualsiasi </a>
L’attributo del tag <a> per indicare il link al browser è “href”; se volessi creare un link con il testo “altra pagina web” che indica al browser di aprire una seconda pagina web dovresti scrivere il codice HTML di seguito:
<a href=”c:/secondapagina.html”> altra pagina web </a>
Scrivendo questo codice il browser visualizzerà il testo “altra pagina web” con il formato di un link (di default sottolineato e celeste); in caso di click sopra tale teso il browser aprirà la seconda pagina web indicata nell’attributo href. Nell’esempio abbiamo considerato una seconda pagina .html creata e salvata nel disco locale C di Windows; allo stesso modo potevamo indicare l’apertura di un qualsiasi sito web inserendo nell’attributo il relativo link (ad esempio href=”www.ansa.it”).
Benissimo, hai realizzato il primo tag HTML contenente un attributo!
Ricorda che per programmare, oltre a studiare l’argomento di interessa, la parte importante sta nel provare ad eseguirlo, quindi fare test di tutti i tipi per capire bene il funzionamento!
Inoltre considera che il risultato di ciò che si vuole realizzare può essere raggiunto in infinite modalità, in generale dovrai capire quale sia quella migliore per te.
Supponiamo ad esempio di voler assegnare il colore rosso ad un nostro testo; tale obiettivo può essere realizzato in diversi modi. Noi utilizziamo l’attributo “Style” all’interno del tag <p>.
L’esempio in questione è il seguito:
<p style=”colore: red”> testo di colore rosso </p>
Il tag <p> è uno dei tag dell’HTML che serve per scrivere dei paragrafi, l’attributo Style serve appunto per lo stile da assegnare al contenuto del testo presente all’interno del tag <p>. Come puoi osservare l’attributo Style è leggermente più complesso del precedente attributo “href” che abbiamo visto; in questo caso all’interno dell’attributo style possiamo impostare diverse proprietà del testo in questione. Una delle proprietà del testo è proprio il colore impostato nell’esempio, style=”color:red”. Una seconda proprietà è il font del testo, ad esempio style=”color:red; font-family:verdana;” imposta il colore del testo in rosso e il font verdiana. Altre proprietà sono la dimensione dei caratteri (font-size) o l’allineamento del testo (text-align).
In generale quando impari a programmare devi capire prima il concetto base e il funzionamento del codice, in seguito approfondisci tutti i dettagli e le caratteristiche.
Ottimo, hai compreso cosa sono i tag HTML e gli attributi dei tag, fai tutte le prove possibili perché per imparare a programmare è fondamentale provare il codice.
Non esitare a lasciare un commento o chiedere informazioni per chiarire i tuoi dubbi!