Se vuoi diventare un webmaster e imparare come creare un sito Web, potresti trovare scoraggiante la prospettiva di prendere confidenza con l'HTML.

Questo è qualcosa che non può essere evitato, tuttavia, poiché la stragrande maggioranza delle pagine di destinazione dei siti Web che visiterai sarà stata scritta e strutturata utilizzando elementi HTML. In effetti, l'HTML è adesso utilizzato da oltre il 74% di tutti i siti web conosciuti, mentre questo linguaggio aiuta anche a migliorare tutto, dal design del tuo sito alla qualità dei contenuti che presenta.

In questa guida esploreremo i principi di base dell'HTML e le sue potenziali applicazioni, prima di esaminare esempi dei singoli elementi che utilizzi durante la codifica del tuo sito web.

Cos'è l'HTML?

In parole povere, HTML rappresenta il linguaggio di markup standard per creare pagine web on-line. Sta per Hyper Text Markup Language e la sua funzione principale è stabilire la struttura, il layout e la presentazione delle singole pagine di destinazione. Sebbene i browser Web non visualizzino direttamente il linguaggio HTML, esso svolge un ruolo fondamentale nel contribuire a creare un sito visibile, accessibile e facile da usare.

L'HTML è inoltre sostenuto da una serie di singoli elementi che gradualmente costruiscono le pagine web, strutturano la presentazione dei contenuti e danno vita al tuo sito web. Questi elementi vengono creati e contenuti all'interno di "tag", che definiscono parti di contenuto alternative come intestazioni, paragrafi ed esempi simili.

Esploreremo questi elementi e la loro costruzione in maggior dettaglio di seguito, esaminando anche come possono essere personalizzati per introdurre colori, collegamenti e tipografia variabile nel tuo sito web.

Dove viene utilizzato l'HTML?

Come possiamo vedere, l'applicazione più comune dell'HTML è la progettazione delle singole pagine di destinazione che compongono il tuo sito web. Questa non è l'unica applicazione del popolare strumento di codifica, tuttavia, comprenderne gli ulteriori usi ti aiuterà a ottenere il massimo dal linguaggio come nuovo webmaster. Quindi, ecco alcuni degli ulteriori modi in cui è possibile applicare l'HTML:

• Crea elementi personalizzabili all'interno di una pagina esistente. Se intendi consentire commenti sui post del blog o la pubblicazione di contenuti generati dagli utenti sul tuo sito web, puoi utilizzare frammenti di codice HTML per abilitarli. Questi elementi consentiranno agli utenti di enfatizzare parole chiave, incorporare collegamenti e formattare commenti a seconda delle restrizioni che imposti come moderatore.
• Crea contenuti aggiuntivi per la posta elettronica. L'e-mail utilizza anche l'HTML come linguaggio per i messaggi di testo RTF, che contengono collegamenti, testo e una varietà di altri elementi che non possono essere rappresentati solo nel testo normale. Pertanto, se stai cercando di condividere un ebook correlato al tuo sito Web tramite e-mail, puoi utilizzare HTML per ottimizzare l'impatto del tuo messaggio.
• Comprendere i documenti della guida offline installati sul computer. È interessante notare che l'HTML viene utilizzato come formato per i documenti della guida basati su computer accessibili offline. Una conoscenza di base dell'HTML può, quindi, aiutarti a comprendere i problemi con il tuo hardware e risolverli più rapidamente, il che a sua volta può garantire che tu sia in grado di ripristinare il tuo sito web più rapidamente nei casi in cui è andato offline.

Struttura della pagina HTML

Prima di poter creare una pagina HTML, sono necessarie le nozioni di base.

Tipicamente, una pagina sarà composta da tre elementi strutturali:

1. Intestazione: L'intestazione contiene contenuti pertinenti a tutte le pagine del tuo sito, come un logo o il nome del sito web e un sistema di navigazione. L'intestazione è visibile su ogni pagina.
2. Corpo principale: Occupa l'area più grande di una pagina web. Contiene contenuti specifici della pagina visualizzata.
3. Piè di pagina: Il contenuto del piè di pagina solitamente include informazioni di contatto, un indirizzo di spedizione o note legali. Come l'intestazione, il piè di pagina appare su ogni pagina, ma è posizionato in fondo.

Ecco come appaiono questi elementi strutturali di base quando si uniscono:

Ecco un altro esempio, utilizzando i tag di intestazione e il tag di paragrafo per strutturare esteticamente il contenuto. Inoltre, abbiamo inserito un tag footer per i contenuti sotto il corpo principale di una pagina:

Tag HTML

Il punto di partenza di qualsiasi codice HTML sono i singoli tag, che possono essere utilizzati per creare tutti gli elementi cruciali e aiutare a strutturare le vostre pagine web.

Di seguito, daremo uno sguardo ai tag più comuni prima di esplorare come possono essere sfruttati per generare elementi specifici sulla pagina:

Tag di intestazione

Tutti i documenti online, comprese le pagine web, iniziano con un titolo. Questi sono costruiti utilizzando tag HTML, con il linguaggio che attualmente consente fino a sei elementi di dimensioni variabili che ti consentono anche di strutturare i tuoi contenuti con titoli aggiuntivi, sottotitoli e righe evidenziate di testo in grassetto. Per iniziare l'intestazione, fai semplicemente precedere il testo pertinente con il , , , , O tag a seconda della dimensione desiderata.

Dovrai poi applicare un tag di chiusura alla fine dell'intestazione per incapsulare il testo, e verrà visualizzato come segue in formato HTML:

Una volta confermato, ciò si tradurrà nella seguente estetica sulla pagina di destinazione del tuo sito web:

Qui le diverse dimensioni delle intestazioni delle variabili sono evidenti, così come il fatto che il browser aggiunge una riga prima e dopo l'intestazione. Noterai anche che il tag di chiusura alla fine del testo dell'intestazione ha un'estetica leggermente diversa, ma ne parleremo nel capitolo successivo mentre cercheremo di utilizzare i tag per definire elementi specifici.

Tag di paragrafo

Un principio simile viene applicato ai tag del paragrafo iniziale, che sono rappresentati da . Ciò ti consente di strutturare i tuoi contenuti e dividerli in paragrafi pertinenti, il che a sua volta si traduce in un'esperienza di lettura più semplice e fluida. Ancora una volta, il il tag deve essere posizionato all'inizio del testo pertinente, prima che il tag di chiusura alternativo venga applicato alla fine per completare l'effetto. A differenza dei tag di intestazione, tuttavia, non esistono variazioni numeriche che possano alterare la dimensione del testo presente nel paragrafo.

Al di fuori del formato HTML, questo suddividerà il testo come segue nella pagina web finita:

Tag di interruzione di riga

I primi esempi rappresentano i tag HTML più elementari, ma ce ne sono altri che utilizzano un formato diverso e riprese di chiusura alternative. Prendiamo ad esempio le interruzioni di riga, che creano una distinzione in cui le righe di testo vengono interrotte e continuano nella riga successiva. Esiste una differenza fondamentale tra interruzioni di riga e paragrafi nel campo dell'HTML, poiché mentre questi ultimi sono elementi di blocco standard che contengono testo, i primi creano separazione all'interno di un blocco esistente. elemento.

Per questo motivo, le interruzioni di riga rappresentano un elemento vuoto in HTML e pertanto non sono definite né dai tag di apertura né da quelli di chiusura. Invece, sono raffigurati da tag, che può essere inserito in esistente elementi per suddividere il testo e potenzialmente evidenziare informazioni importanti. Lo spazio singolo tra il carattere e la barra è fondamentale, altrimenti il ​​tag non è riconoscibile nel formato HTML.

Una volta applicato, questo suddividerà il testo come segue:

Come puoi vedere, puoi applicare interruzioni di riga tutte le volte che vuoi all'interno di un elemento di paragrafo esistente, purché aggiungano valore e rendano le informazioni più facili da digerire. Vedrai anche che i tag di apertura e chiusura del paragrafo rimangono invariati, con i tag di interruzione di riga utilizzati per modificare il layout del testo incluso all'interno.

Questo è uno degli esempi di come i tag HTML possono essere utilizzati per alterare elementi esistenti, che gioca un ruolo chiave nella definizione del layout visivo delle tue pagine web e dei tuoi contenuti.

Linee orizzontali

Allo stesso modo, ci sono altri tag che possono essere utilizzati all'interno del file elemento o per separare ulteriormente i corpi di testo della tua pagina web. Uno dei più utilizzati è il tag, che aiuta a creare un elemento vuoto che disegna una linea visiva orizzontale tra sezioni alternate di un documento online. Potresti voler posizionare una linea tra due corpi di testo, ad esempio, per focalizzare nuovamente il lettore o semplicemente introdurre un nuovo elemento visivo. Ecco come crei una tale interruzione in HTML:

Qui, l'interruzione tra i caratteri hr e la barra evidenzia la costruzione di un elemento vuoto, mentre ancora una volta non è richiesto alcun tag di chiusura per completare l'effetto. Questo creerà la seguente immagine visiva:

Tag immagine

I tag immagine rappresentano anche elementi vuoti in HTML, il che significa ancora una volta che non presentano un tag di chiusura. Poiché contengono solo attributi relativi all'URL dell'immagine che stai incorporando nel sito, sono definiti semplicemente dal tag all'inizio dell'elemento. Questi possono essere posizionati ovunque sul tuo sito web, anche se è insolito includerli in elementi esistenti come paragrafi o intestazioni. Ecco come si presenterà un tipico tag immagine HTML:

Dovresti anche fornire un testo alternativo per la tua immagine, che aiuti le persone a visualizzarla in caso di tempi di caricamento lenti o di utilizzo di uno screen reader. In questo modo, se il browser non riesce a trovare un'immagine, mostrerà agli spettatori il valore dell'attributo alternativo. Anche in questo caso viene utilizzato il tag immagine, ma include un diverso insieme di attributi:

Elementi HTML

In precedenza, abbiamo esaminato come vengono utilizzati semplici tag HTML per definire gli elementi sulla pagina, esplorando anche come possano essere ulteriormente personalizzati utilizzando elementi vuoti contenenti tag immagine e di interruzione di riga. Questo ci aiuta a comprendere la relazione che esiste tra tag ed elementi e come possono essere utilizzati per definirne di diversi tipi di contenuti sul tuo sito web.

Mentre tutti gli aspetti del linguaggio HTML sono rappresentati da un tag, ad esempio, un elemento definito che include contenuto deve avere sia un tag di inizio che uno di chiusura. Pertanto, intestazioni e paragrafi sono elementi HTML perché utilizzano tag di inizio e chiusura per incapsulare e ampliare il testo pertinente. Al contrario, gli elementi vuoti contengono attributi o non contengono alcun contenuto, consentendo loro di essere utilizzati all'interno di elementi esistenti senza la necessità di un tag di chiusura.

Definizione degli elementi HTML

Quando si utilizzano esempi come intestazioni e paragrafi, la corretta applicazione dei tag di inizio e chiusura è fondamentale. È il tag iniziale (come O ) che definisce l'elemento in questione, ad esempio, mentre il tag di chiusura garantisce che questo elemento non continui nel resto della pagina web. Se non si riesce a utilizzare la chiusura tag alla fine del paragrafo desiderato, ad esempio, il testo apparirà in un unico blocco antiestetico ed estremamente difficile da leggere.

Tutti i tag di chiusura sono identici ai tag iniziali, tranne per il fatto che i primi presentano una barra prima dei caratteri rilevanti. Quindi, nel caso di an titolo, il tag di chiusura sarà , mentre per i paragrafi utilizzerai sempre per definire l'interruzione nel testo. Ciò richiede attenzione ai dettagli durante la codifica ed è importante notare quando si programmano le intestazioni che il numero utilizzato (come h1 o h1) viene applicato sia nei tag di inizio che in quelli di chiusura.

Utilizzo di elementi HTML nidificati

A questo punto, è chiaro che i documenti HTML e le pagine web sono formati da un albero di vari elementi, che fungono da elementi costitutivi per una serie di risorse. Abbiamo anche esaminato come questi elementi possono essere formati e utilizzati per strutturare il contenuto online e continueremo ora esaminando gli elementi HTML nidificati.

Proprio come gli elementi vuoti e i tag autonomi (come possono essere incorporati in elementi HTML definiti, i cosiddetti elementi nidificati possono anche essere ospitati all'interno di contenuti come intestazioni e paragrafi. Questi includono esempi come caratteri in grassetto e corsivo e testo sottolineato, mentre possono essere applicati per aggiungere personalità ai tuoi contenuti e attirare l'attenzione del lettore su specifici punti di interesse.

Testo in grassetto, corsivo e barrato in HTML

Diciamo che vuoi evidenziare una parola all'interno di un elemento di paragrafo esistente. Puoi ottenere questo risultato rendendolo in grassetto, utilizzando tag semplici all'interno dello standard elemento. Usando HTML, lo programmerai come segue:

Qui, l'elemento nidificato ha sia un tag di inizio che uno di chiusura, ognuno dei quali segue un formato simile a quelli associati a intestazioni e paragrafi. Possono essere utilizzati senza problemi all'interno di elementi esistenti e, in questo caso, produrranno i seguenti risultati:

Ora, diciamo che vorresti anche cambiare la tipografia di questa parola in modo che sia anch'essa corsiva. Ciò può essere ottenuto semplicemente aggiungendo un altro elemento nidificato, che dovrebbe essere codificato in questo modo:

Come puoi vedere, i tag corsivo iniziale e finale sono stati semplicemente incorporati nel file elemento. Questo ora trasformerà il contenuto all'interno dell'elemento in modo che appaia come segue:  

Naturalmente, potresti decidere di preferire evidenziare questa parola in un modo diverso. È quindi possibile utilizzare un elemento nidificato alternativo, come il barrato (rappresentato dai tag e . Questi tag possono essere applicati allo stesso modo all'interno del elemento, che appare come segue in HTML:

In questo caso, il testo apparirà come segue sul documento o sulla pagina di destinazione:  

Ciò offre una panoramica degli elementi che possono essere formati dai tag, che a loro volta definiscono la struttura delle tue pagine web e il contenuto che presentano. Non solo, è possibile utilizzare anche elementi vuoti e nidificati per definire ulteriormente il contenuto.

Attributi HTML

Se i tag sono gli elementi costitutivi che costruiscono e definiscono gli elementi, allora gli attributi HTML possono essere utilizzati per personalizzare le loro caratteristiche (come stile, colore e lingua). Tutti gli elementi HTML hanno attributi principali, che forniscono informazioni fondamentali e sono sempre specificati all'interno del tag stat Tendono a presentarsi in coppia, quindi spesso appariranno nel seguente formato: nome="valore".

In termini semplici, il nome rappresenta la proprietà che desideri impostare, mentre il valore si riferisce ai criteri specifici che desideri incorporare.

Esistono numerosi attributi che possono essere applicati ai tuoi elementi HTML, ma quelli più rilevanti per i webmaster alle prime armi sono:

L'attributo 'lang'

Il singolo attributo più basilare definisce la lingua del documento e i suoi elementi. Viene dichiarato utilizzando l'attributo 'lang' e, sebbene venga facilmente trascurato, ha il vantaggio di rendere il contenuto più accessibile agli screen reader e ai motori di ricerca. Verrà solitamente presentato all'inizio del documento nel seguente formato:

Dopo l'attributo lang, le prime due lettere specificano la lingua (che in questo caso è l'inglese). Dopo il trattino, le due lettere successive stabiliscono il dialetto, anche se questo non sarà presente per tutte le lingue. È importante che tu abbia questo attributo giusto se vuoi raggiungere con successo il tuo pubblico.

L'attributo 'allinea'

Abbiamo già accennato al formato degli attributi HTML (name="value") e la migliore incarnazione di ciò si verifica quando provi ad allineare il contenuto all'interno dei tuoi elementi. Puoi decidere di centrare tutti i paragrafi su una pagina specifica, ad esempio, impostando l'allineamento come proprietà. Successivamente, 'center' è il valore dell'attributo, anche se puoi scegliere di allineare il testo a sinistra o a destra.

Questo allineerà il tuo elementi al centro della pagina e crea un layout uniforme adatto alla natura specifica del tuo sito web (vedi sotto):

L'attributo 'href'

Se hai intenzione di costruire un sito web visibile, è importante incorporare sia i link in entrata che quelli in uscita. Anche costruire un portafoglio di link che includa backlink a pagine di destinazione interne è una strategia praticabile, quindi dovrai imparare come codificarli in HTML.

I collegamenti HTML sono definiti con il tag, che include il collegamento di destinazione insieme al testo di ancoraggio affiliato che ospiterà l'URL. È l'attributo 'href' che specifica l'indirizzo del sito, tuttavia, questo è incorporato come parte del tag di inizio. È codificato in HTML come segue:

Ciò evidenzia chiaramente la distinzione tra il tag iniziale e quello di chiusura e si tradurrà come segue sulla tua pagina di destinazione:

L'attributo 'colore'

Questo è un altro attributo importante, poiché l’uso del colore può dare vita al tuo sito web contribuendo a creare contrasti importanti e una forte estetica del design. In HTML, un colore può essere specificato utilizzando il suo nome, sebbene sia anche possibile utilizzare un valore RGB o HEX per raggiungere questo scopo. La prima opzione è tuttavia la più semplice da seguire e può essere applicata anche a titoli, paragrafi e altri elementi della pagina.

Questo è un attributo di stile, con la scelta del colore che rappresenta il valore che desideri impostare. Quando si applica il colore rosso all'intestazione principale, ad esempio, apparirà così:

Una volta applicato, questo elemento apparirà come segue sul tuo sito web:

Ancora una volta, c'è una chiara distinzione tra i tag di inizio e di chiusura che definiscono l'elemento, mentre questo è uno degli attributi più facili da applicare in HTML. Evidenzia inoltre ulteriormente il formato name="valore degli attributi HTML, rendendo il processo di apprendimento e la loro applicazione molto più semplice in tutto il tuo sito web.

Provalo tu stesso

Con una conoscenza di base dell'HTML e dei suoi singoli elementi, il passo successivo è intraprendere alcuni semplici progetti e applicare le tue conoscenze teoriche per risolvere sfide pratiche.  

Nell'esercizio dettagliato di seguito, abbiamo presentato un testo tranne e chiesto di formattare vari aspetti utilizzando HTML. Utilizza la guida e tutto ciò che hai imparato finora per completare la sfida mentre ti prepari a codificare il tuo sito web.

domande:

1. Completa l'elemento header con il tag di chiusura corretto.
2. Rendi l'intestazione in grassetto.
3. Inserisci una linea orizzontale sotto l'intestazione.
4. Utilizza l'attributo colore e ombreggia "Grazie per la visita" in verde
5. Inserisci questo collegamento ipertestuale (https://www.w3schools.com/html/) nel testo di ancoraggio "Ulteriori informazioni".
6. In testa alla pagina, usa il formato nome=”valore” per allineare a sinistra i paragrafi

Statistiche e fatti sul linguaggio HTML

1. Gli elementi HTML, head e body fanno parte delle specifiche HTML dalla metà degli anni '1990 e fino a pochi anni fa erano gli elementi principali utilizzati per dare struttura ai documenti HTML. Tuttavia, la situazione è cambiata radicalmente negli ultimi anni poiché HTML5 ha aggiunto una serie di nuovi tag che possono essere utilizzati per aggiungere un ricco significato semantico alla struttura di un documento HTML.
2. I documenti HTML devono iniziare con una dichiarazione del tipo di documento (informalmente, un "doctype"). Nei browser, il doctype aiuta a definire la modalità di rendering. HTML5 non definisce un DTD; pertanto, in HTML5 la dichiarazione doctype è più semplice e breve.
3. I browser mobili hanno adottato completamente HTML5, quindi creare progetti pronti per dispositivi mobili è facile quanto progettare e costruire per i loro display touch screen più piccoli: da qui la popolarità del Responsive Design. Esistono alcuni ottimi meta tag che ti consentono anche di ottimizzare per i dispositivi mobili.  
4. Il 78% degli sviluppatori di contenuti concorda sul fatto che la struttura è adatta alla creazione di app mobili e il 68% afferma che è adatta per progettare qualsiasi tipo di app.
5. HTML5 viene inoltre fornito con una serie di ottime API che ti consentono di creare un'esperienza utente migliore e un'applicazione web più potente e dinamica: ecco un breve elenco di API native:
   • Trascina e rilascia (DND)
   • Database di archiviazione offline
   • Gestione della cronologia del browser
   • Modifica del documento
   • Riproduzione multimediale temporizzata
6. HTML5 non è controllato da una società. Una delle sue migliori caratteristiche sta nel fatto che è uno standard aperto. Gli sviluppatori hanno la libertà di dare libero sfogo alla propria creatività e aggiungere quante più funzioni e caratteristiche possibili.
7. Rispetto ad altri browser, ogni aggiornamento di Google Chrome assicura di includere il supporto per HTML5. Inoltre, il player predefinito di YouTube ora è HTML5 e gli annunci Flash di Google vengono ora convertiti in HTML5.
8. Utilizzo di HTML5 da parte degli sviluppatori (per regione):
   • Nord e America Latina – 70%
   • Sud America – 61%
   • ASPAC – 60%
   • Australia - 60%
   • Europa - 59%
   • Africa – 50%

Conclusione

Sebbene l'HTML sia stato creato solo di recente, nel 1991 (con la prima versione del linguaggio di codifica successivamente lanciata nel 1995), è rapidamente diventato uno strumento fondamentale nella progettazione di siti Web funzionali e visivamente accattivanti. Anche il livello di influenza dell'HTML continua ad evolversi, con l'ultima iterazione (HTML5) adottata da un numero crescente di siti web in tutto il mondo.

A questo proposito, apprendere gli elementi di base dell'HTML e come applicarli è il passo più importante da compiere per creare un sito Web di successo, visibile e, in definitiva, competitivo.