Questo tutorial di sviluppo Web HTML ha lo scopo di fornire una conoscenza dettagliata degli attributi HTML, utilizzando esempi di codice concreti per aiutarti a comprenderli più rapidamente e facilmente. Con questo in mente, iniziamo dicendo che gli elementi nell’albero DOM, chiamati tag, può avere attributi HTML. Questi attributi HTML forniscono informazioni aggiuntive sugli elementi HTML. Esistono diversi tipi di attributi, alcuni dei quali sono obbligatori, alcuni sono standard o facoltativi e alcuni sono attributi di evento. Lo scopo dell’utilizzo degli attributi HTML è quello di modificare gli elementi che contengono l’albero DOM e di fornire loro informazioni aggiuntive su tali elementi.
Obbligatorio gli attributi sono quelli necessari per un tipo di elemento; si assicurano che la sua funzione funzioni correttamente. Opzionale gli attributi, nel frattempo, vengono utilizzati per modificare la funzionalità predefinita di determinati tipi di elementi.
Standard gli attributi sono accettati per un gran numero di tipi di elemento e sono il tipo di attributo più frequente. Evento gli attributi vengono utilizzati per determinare i tipi di elementi che possono specificare gli script da eseguire in determinate situazioni.
Gli attributi sono usati come coppie – più precisamente, nome e valore – e vengono inseriti all’inizio, dopo il nome dell’elemento. Per il corretto utilizzo degli attributi, dobbiamo sempre separare il nome e il valore dal “=” cartello.
Di seguito troverai gli attributi HTML più importanti, che includono: href, lang, alt, stile, src, titolo, larghezzae altezza.
Leggere: Strumenti e librerie HTML, CSS e JavaScript
L’attributo href in HTML
L’HTML href L’attributo viene utilizzato per specificare l’URL di una pagina particolare a cui va il collegamento. Una volta che il collegamento è stato aggiunto al href attributo, è collegato al testo visualizzato nell’ un tag (questo tag definisce un collegamento ipertestuale). Quando l’utente fa clic su di esso, verrà reindirizzato all’indirizzo del collegamento menzionato. Ecco alcuni esempi di codice che mostrano come utilizzare l’HTML href attributo:
<html> <html lang="en"> <body> <h2>The href Attribute</h2> <p>Please click on the link to visit it</p> <a href="https://www.htmlgoodies.com/">Visit Html Goodies</a> <p>Using the target attribute, we can specify where to open the page we want to access</p> <a href="https://www.htmlgoodies.com/" target="_blank">Visit Html Goodies</a> <p> This attribute can have the following values: _self which is default, _black which opens the link in a new window, _parent which opens the document within the parent and _top which opens the document in the whole body of the window </p> </body> </htm>
L’attributo lang in HTML
L’HTML lang attributo aiuta a dichiarare una lingua. Dovresti sempre usare il lang attributo all’interno del html tag per dichiarare la lingua della tua pagina web. Ecco un esempio che mostra come utilizzare l’HTML lang attributo:
<!DOCTYPE html> <html lang="ro"> <body> ... </body> </html>
Possiamo anche utilizzare caratteri che determinano la lingua della tua pagina web, ma anche caratteri che possono definire il paese, più precisamente i codici paese. Vediamo le prossime righe:
<!DOCTYPE html> <html lang="ro"> <body> ... </body> </html>
Possiamo anche utilizzare caratteri che determinano la lingua della tua pagina web, ma anche caratteri che possono definire il paese, più precisamente i codici paese. Vediamo le prossime righe:
<!DOCTYPE html> <html lang="ro-RO"> <body> ... </body> </html>
L’attributo alt in HTML
L’attributo HTML alt viene utilizzato come etichetta alternativa per visualizzare qualcosa se l’attributo principale, ovvero il img tags, non riesce a visualizzare il valore originale assegnatogli. In altre parole, se l’immagine principale non viene visualizzata, l’altro attributo viene utilizzato come alternativa aggiuntiva. Può anche essere usato per descrivere l’immagine che viene utilizzata. Ecco un esempio di come utilizzare il alt attributo in HTML:
<!DOCTYPE html> <html> <body> <h2>The alt Attribute</h2> <p>This attribute is used to describe the contents of the image, if the image could not be displayed and users cannot see it. </p> <img src="https://mcdn.wallpapersafari.com/medium/13/40/sTDbOH.jpg" alt="Lake at sunset" width="300" height="200" /> </body> </html>
Leggere: Alcuni dei tag HTML più belli e meno conosciuti
L’attributo di stile HTML
Con il stile attributo, gli sviluppatori Web possono specificare le regole CSS (Cascading Style Sheet) all’interno di qualsiasi elemento dell’albero DOM. Con esso, i programmatori possono inserire stili, come famiglia di font, dimensione del font, colore di sfondo, colore, allineamento del testo, e altro ancora. Ecco un esempio di come utilizzare l’HTML stile attributo:
<!DOCTYPE html> <html> <body> <h2>The style Attribute</h2> <p style="color: white; font-family: verdana; font-size: 100%; background-color: powderblue;"> "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." </p> </body> </html>
L’attributo HTML src
L’HTML src viene utilizzato quando è necessario aggiungere un’immagine alla pagina web, utilizzando l’ img tag davanti – e dopo – questo attributo. All’interno di questo attributo, possiamo aggiungere l’indirizzo di un’immagine tra virgolette. In poche parole, specifica il percorso dell’immagine che verrà visualizzata sulla pagina. Ecco un esempio di come utilizzare l’HTML src attributo:
<!DOCTYPE html> <html> <body> <h2>The src Attribute</h2> <p>Use the src attribute to specify the image source next to the <img /> tag</p> <img src="https://cdn.wallpapersafari.com/1/28/Taoxg9.jpg" width="400" height="300" /> </body> </html>
L’attributo del titolo HTML
L’HTML titolo l’attributo viene utilizzato per fornire informazioni aggiuntive su un elemento. Il valore del titolo l’attributo verrà visualizzato quando si sposta il mouse sull’elemento: questo metodo è noto come descrizione comando.
<!DOCTYPE html> <html> <body> <h2>The title Attribute</h2> <p title="Using a tooltip">If you hover your mouse over the paragraph, the title will appear absolutely. </p> </body> </html>
Gli attributi di larghezza e altezza in HTML
Il larghezza e altezza gli attributi ti danno la possibilità di ridimensionare un’immagine, rimpicciolirla o ingrandirla secondo necessità. Questi sono attributi molto utili, quindi puoi controllare la dimensione di un’immagine all’interno del file img etichetta. Ecco un esempio di come utilizzare il larghezza e altezza attributi in HTML:
<!DOCTYPE html> <html> <body> <h2>Width and Height Attributes</h2> <p>An example in which we change the height and width of the images as needed:</p> <img src="https://mcdn.wallpapersafari.com/medium/84/92/dDWHj5.jpg" width="300" height="200" /> <img src="https://mcdn.wallpapersafari.com/medium/29/51/X39hlN.jpg" width="310" height="200" /> <img src="https://mcdn.wallpapersafari.com/medium/55/8/JdBhVz.jpg" width="295" height="195" /> <img src="https://mcdn.wallpapersafari.com/medium/88/66/lpaQ3r.jpg" width="315" height="195" /> </body> </html>
Considerazioni finali sugli attributi HTML
L’HTML viene utilizzato per creare varie applicazioni Web, la tecnologia si evolve gradualmente e offre molte funzionalità per gli elementi DOM. Offre anche una varietà di attributi HTML per rendere le pagine web molto interattive. Questi attributi includono attributi di base, che sono gli attributi di internazionalizzazione più comunemente usati, attraverso i quali possiamo cambiare la lingua, attributi di dati che aiutano a memorizzarli e personalizzarli e, ultimo ma non meno importante, gli attributi di evento che vengono attivati quando un determinato tipo di evento si verifica. Quindi, l’utilizzo di tutti gli attributi presenti aiuterà gli sviluppatori web a creare un’applicazione web molto bella in un modo molto semplice.
Leggere: Schede di formattazione HTML