HTML Tutorial for Beginners

Se vuoi diventare un webmaster e imparare a creare un sito web, potresti trovare la prospettiva di imparare l’HTML abbastanza scoraggiante.

Questo è qualcosa che non può essere evitato, tuttavia, poiché la stragrande maggioranza delle pagine web che visiterai saranno state scritte e strutturate utilizzando elementi HTML. Infatti, l’HTML è ora usato da più del 74% di tutti i siti web conosciuti, mentre questo linguaggio aiuta anche a migliorare tutto, dal design del tuo sito alla qualità del contenuto che contiene.

In questa guida, esploreremo i principi di base dell’HTML e le sue potenziali applicazioni, prima di guardare esempi dei singoli elementi che si usano quando si codifica il tuo sito web.

Che cos’è l’HTML?

In termini semplici, l’HTML rappresenta il linguaggio di markup standard per creare pagine web online. Sta per Hyper Text Markup Language, e la sua funzione principale è quella di stabilire la struttura, il layout e la presentazione delle singole pagine di destinazione. Mentre i browser web non visualizzano direttamente il linguaggio HTML, esso gioca un ruolo fondamentale nell’aiutare a creare un sito visibile, accessibile e facile da usare.

HTML è anche sostenuto da una serie di elementi individuali, che gradualmente costruiscono le pagine web, strutturano la presentazione del contenuto e danno vita al tuo sito web. Questi elementi sono creati e contenuti all’interno di ‘tag’, che definiscono pezzi alternati di contenuto come titoli, paragrafi ed esempi simili.

Esamineremo questi elementi e la loro costruzione in maggior dettaglio qui di seguito, guardando anche come possono essere personalizzati per introdurre colore, link e tipografia variabile al tuo sito web.

Dove si usa l’HTML?

Come possiamo vedere, l’applicazione più comune per l’HTML è il design delle singole landing page che compongono il tuo sito web. Questa non è l’unica applicazione del popolare strumento di codifica, tuttavia, comprendere i suoi usi aggiuntivi ti aiuterà a ottenere il massimo dal linguaggio come nuovo webmaster. Quindi, ecco alcuni degli ulteriori modi in cui l’HTML può essere applicato:

• Creare elementi personalizzabili all’interno di una pagina esistente. Se avete intenzione di permettere i commenti ai post dei blog o la pubblicazione di contenuti generati dagli utenti sul vostro sito web, potete usare i frammenti di codice HTML per abilitarlo. Questi elementi permetteranno agli utenti di enfatizzare le parole chiave, incorporare link, e formattare i commenti a seconda delle restrizioni che metterai in atto come moderatore.
• Crea contenuti aggiuntivi per le e-mail. L’e-mail utilizza anche l’HTML come linguaggio per i messaggi di testo ricco, che presentano link, testo e una varietà di altri elementi che non possono essere presenti solo nel testo semplice. Quindi, se stai cercando di condividere un ebook che si riferisce al tuo sito web attraverso la posta elettronica, è possibile utilizzare l’HTML per ottimizzare l’impatto del tuo messaggio.
• Comprendere i documenti di aiuto offline che sono installati sul tuo computer. È interessante notare che l’HTML è usato come formato per i documenti di aiuto basati sul computer che sono accessibili offline. La conoscenza di base dell’HTML può, quindi, aiutarvi a capire i problemi con il vostro hardware e risolverli più velocemente, il che a sua volta può garantire che siate in grado di ripristinare il vostro sito web più velocemente nei casi in cui è andato offline.

Struttura della pagina HTML

Prima di poter costruire una pagina html, hai bisogno delle basi sul posto.

In genere, una pagina sarà composta da tre elementi strutturali:

1. Intestazione: L’intestazione contiene contenuti rilevanti per tutte le pagine del tuo sito, come un logo o il nome del sito, e un sistema di navigazione. L’intestazione è vista su ogni pagina.
2. Corpo principale: Questo occupa l’area più grande di una pagina web. Contiene contenuti specifici per la pagina visualizzata.
3. Piè di pagina: Il contenuto del piè di pagina di solito include informazioni di contatto, un indirizzo di spedizione o avvisi legali. Come l’intestazione, il piè di pagina appare su ogni pagina, ma è posizionato in basso.

Ecco come appaiono questi elementi strutturali di base quando sono insieme:

Ecco un altro esempio, usando i tag header e il tag paragraph per strutturare il contenuto esteticamente. Inoltre, abbiamo inserito un tag footer per il contenuto sotto il corpo principale di una pagina:

Tags HTML

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

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

Tag di intestazione

Tutti i documenti online, incluse le pagine web, iniziano con un’intestazione. Questi sono costruiti utilizzando i tag HTML, con il linguaggio che attualmente permette fino a sei elementi di dimensioni variabili che consentono anche di strutturare il contenuto con titoli aggiuntivi, sottotitoli e linee evidenziate di testo in grassetto. Per iniziare il tuo titolo, devi semplicemente prefissare il testo rilevante con il tag <h1> , <h2> , <h3> , <h4> , <h5> o <h6> a seconda della dimensione desiderata.

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

Una volta confermato, questo si tradurrà nella seguente estetica sulla landing page del tuo sito:

Qui, le varie dimensioni delle rubriche variabili sono chiare da vedere, come il fatto che il browser aggiunge una linea prima e dopo la rubrica. Noterai anche che il tag di chiusura alla fine del testo dell’intestazione ha un’estetica leggermente diversa, ma di questo ci occuperemo nel prossimo capitolo quando cercheremo di usare i tag per definire elementi specifici.

Tagle di paragrafo

Un principio simile è applicato ai tag di inizio paragrafo, che sono rappresentati da <p>. Questo ti permette di strutturare il tuo contenuto e dividerlo in paragrafi rilevanti, che a sua volta si traduce in un’esperienza di lettura più facile e senza soluzione di continuità. Ancora una volta, il tag <p> dovrebbe essere posizionato all’inizio del testo rilevante, prima che il tag di chiusura alternativo sia applicato alla fine per completare l’effetto. A differenza dei tag di intestazione, tuttavia, non ci sono vari numeri che possono alterare la dimensione del testo presente nel paragrafo.

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

Tags di interruzione di linea

I primi esempi rappresentano i tag HTML più basilari, ma ce ne sono altri che utilizzano un formato diverso e chiusure alternative. Prendiamo le interruzioni di linea, per esempio, che creano una distinzione in cui le linee di testo sono interrotte e continuano sulla linea successiva. C’è una differenza fondamentale tra le interruzioni di riga e i paragrafi nel campo dell’HTML, poiché mentre questi ultimi sono elementi di blocco standard che contengono testo, il primo crea una separazione all’interno di un elemento <p> esistente.

Per questo motivo, le interruzioni di riga rappresentano un elemento vuoto in HTML e quindi non sono definite da tag di apertura o chiusura. Invece, sono rappresentati dal tag <br />, che può essere inserito in elementi <p> esistenti per spezzare il testo e potenzialmente evidenziare pezzi importanti di informazione. Il singolo spazio tra il carattere <be> e il forward-slash è cruciale, perché 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 quante volte vuoi all’interno di un elemento di paragrafo esistente, finché aggiungono valore e rendono 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 usati per modificare il layout del testo incluso all’interno.

Questo è uno degli esempi di come i tag HTML possono essere usati per alterare gli elementi esistenti, il che gioca un ruolo chiave nel definire il layout visivo delle tue pagine web e dei tuoi contenuti.

Linee orizzontali

Similmente, ci sono altri tag che possono essere usati all’interno dell’elemento <p> o per separare ulteriormente corpi di testo sulla tua pagina web. Uno dei più usati è il tag <hr>, che aiuta a creare un elemento vuoto che disegna una linea visiva orizzontale tra sezioni alternative di un documento online. Potresti voler posizionare una linea tra due corpi di testo, per esempio, per rifocalizzare il lettore o semplicemente per introdurre un nuovo elemento visivo. Ecco come si crea una tale interruzione in HTML:

Qui, la rottura tra i caratteri hr e la barra in avanti 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 visualizzazione:

I tag immagine

Anche i tag immagine rappresentano elementi vuoti in HTML, il che ancora una volta significa che non hanno un tag di chiusura. Poiché contengono solo attributi che si riferiscono all’URL dell’immagine che state incorporando nel sito, sono definiti semplicemente dal tag <img > all’inizio dell’elemento. Questi possono essere posizionati ovunque sul tuo sito web, anche se è insolito includerli in elementi esistenti come paragrafi o titoli. Ecco come si presenterà un tipico tag immagine HTML:

Dovreste anche fornire un testo alternativo per la vostra immagine, che aiuti le persone a vederla in caso di tempi di caricamento lenti o l’uso di screen reader. In questo modo, se il browser non riesce a trovare un’immagine, mostrerà agli spettatori il valore dell’attributo alternativo. Questo ancora una volta usa il tag image, ma include un diverso set di attributi:

Elementi HTML

In precedenza, abbiamo visto come i semplici tag HTML sono usati per definire gli elementi della pagina, esplorando anche come possono essere ulteriormente personalizzati usando elementi vuoti contenenti tag immagine e interruzione di riga. Questo ci aiuta a capire la relazione che esiste tra tag ed elementi, e come possono essere usati per definire diversi tipi di contenuto sul tuo sito web.

Mentre tutti gli aspetti del linguaggio HTML sono rappresentati da un tag, per esempio, un elemento definito che include contenuto deve avere sia un tag iniziale che uno finale. Così, titoli e paragrafi sono elementi HTML perché usano tag iniziali e di chiusura per incapsulare e aumentare il testo rilevante. Al contrario, gli elementi vuoti o contengono attributi o non contengono alcun contenuto, permettendo loro di essere usati all’interno di elementi esistenti senza la necessità di un tag di chiusura.

Definizione degli elementi HTML

Quando si usano esempi come titoli e paragrafi, la corretta applicazione dei tag iniziali e finali è fondamentale. È il tag iniziale (come <h1> o <p>) che definisce l’elemento in questione, per esempio, mentre il tag di chiusura assicura che questo elemento non sia continuato nel resto della pagina web. Se non si usa il tag di chiusura </ p> alla fine di un paragrafo desiderato, per esempio, il testo apparirà in un unico blocco antiestetico ed estremamente difficile da leggere.

Tutti i tag di chiusura sono identici ai tag iniziali a parte il fatto che i primi hanno una barra in avanti prima dei caratteri corrispondenti. Così nel caso di un <h1>heading, il tag di chiusura sarà </ h1> , mentre per i paragrafi si userà sempre </ p> per definire l’interruzione del testo. Questo richiede attenzione ai dettagli durante la codifica, ed è importante notare quando si programmano le intestazioni che il numero che si usa (come h1 o h2) viene applicato sia nel tag iniziale che in quello di chiusura.

Utilizzare elementi HTML annidati

A questo punto, è chiaro che i documenti HTML e le pagine web sono formati da un albero di vari elementi, che servono come mattoni per una serie di risorse. Abbiamo anche visto come questi elementi possono essere formati e usati per strutturare il contenuto online, e continueremo ora guardando gli elementi HTML annidati.

Proprio come gli elementi vuoti e i tag indipendenti (come <br / >possono essere incorporati in elementi HTML definiti, i cosiddetti elementi annidati possono anche essere ospitati all’interno di contenuti come titoli e paragrafi. Questi includono esempi come il grassetto e il corsivo e il testo sottolineato, mentre possono essere applicati per aggiungere personalità al tuo contenuto e attirare l’occhio del lettore su specifici punti di interesse.

Gold, italic e strikethrough text in HTML

Diciamo che vuoi evidenziare una parola dentro un elemento di paragrafo esistente. Potete ottenerlo rendendola in grassetto, usando semplici tag all’interno dell’elemento standard <p>. Usando l’HTML, programmerai questo come segue:

Qui l’elemento annidato ha sia un tag iniziale che uno di chiusura, ognuno dei quali segue un formato simile a quelli associati ai titoli e ai paragrafi. Possono essere utilizzati senza soluzione di continuità all’interno di elementi esistenti, e in questo caso, produrrà i seguenti risultati:

Ora, diciamo che vorreste anche cambiare la tipografia di questa parola in modo che sia anche in corsivo. Questo può essere ottenuto semplicemente aggiungendo un altro elemento annidato, che dovrebbe essere codificato in questo modo:

Come potete vedere, i tag di inizio e chiusura in corsivo sono stati semplicemente incorporati nell’elemento <p>. Questo trasformerà ora il contenuto all’interno dell’elemento in modo che appaia come segue:

Ovviamente, potete decidere che preferite evidenziare questa parola in modo diverso. Puoi quindi usare un elemento alternativo annidato, come il barrato (che è rappresentato dai tag <s> e </s>. Questi tag possono essere applicati allo stesso modo all’interno dell’elemento <p>, apparendo come segue in HTML:

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

Questo offre una visione degli elementi che possono essere formati dai tag, che a sua volta definisce la struttura delle vostre pagine web e il contenuto che presentano. Non solo questo, ma gli elementi vuoti e annidati possono anche essere usati per definire ulteriormente il tuo contenuto.

Attributi HTML

Se i tag sono i mattoni che costruiscono e definiscono gli elementi, allora gli attributi HTML possono essere usati per personalizzare le loro caratteristiche (come stile, colore e lingua. Tutti gli elementi HTML hanno attributi fondamentali, che forniscono informazioni fondamentali e sono sempre specificati all’interno del tag stat. Essi tendono ad essere in coppia, quindi spesso appaiono nel seguente formato: name=”value.”

In termini semplici, il nome rappresenta la proprietà che si vuole impostare, mentre il valore si riferisce al criterio specifico che si vuole incorporare.

Ci sono un gran numero di attributi che possono essere applicati ai tuoi elementi HTML, ma quelli che sono più rilevanti per i webmaster principianti sono:

L’attributo ‘lang’

Il singolo attributo più basilare definisce la lingua del documento e dei suoi elementi. Viene dichiarato usando l’attributo ‘lang’, e sebbene sia facilmente trascurato ha il vantaggio di rendere il contenuto più accessibile agli screen reader e ai motori di ricerca. Di solito si presenta all’inizio del documento nel seguente formato:

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

L’attributo ‘align’

Abbiamo già toccato il formato degli attributi HTML (name=”value”), e la migliore incarnazione di questo avviene quando cerchi di allineare il contenuto all’interno dei tuoi elementi. Potreste decidere di centrare tutti i paragrafi in una pagina specifica, per esempio, con l’allineamento che è la proprietà che volete impostare. Di conseguenza, ‘center’ è il valore dell’attributo, anche se avete la scelta di allineare il vostro testo a sinistra o a destra.

Questo allineerà i tuoi elementi <p> al centro della pagina, e creerà un layout uniforme per soddisfare la natura specifica del tuo sito (vedi sotto):

L’attributo ‘href’

Se stai per costruire un sito web visibile, è importante che tu incorpori sia link in entrata che in uscita. Costruire un portafoglio di link che includa backlink a pagine di destinazione interne è anche una strategia praticabile, quindi avrete bisogno di imparare come codificare questi in HTML.

I link HTML sono definiti con il tag <a>, che include il link di destinazione insieme all’anchor text affiliato che ospiterà l’URL. È l’attributo ‘href’ che specifica l’indirizzo del sito, tuttavia, questo è incorporato come parte del tag start. È codificato in HTML come segue:

Questo evidenzia chiaramente la distinzione tra il tag iniziale e quello di chiusura, e si tradurrà come segue sulla vostra landing page:

L’attributo ‘color’

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

Questo è un attributo di stile, con la scelta del colore che rappresenta il valore che vorresti impostare. Applicando il colore rosso all’intestazione principale, per 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 iniziali e finali che definiscono l’elemento, mentre questo è uno degli attributi più facili da applicare in HTML. Inoltre evidenzia ulteriormente il formato name=”value” degli attributi HTML, rendendo il processo di apprendimento e l’applicazione di questi molto più facile in tutto il tuo sito web.

Prova tu stesso

Con una comprensione di base dell’HTML e dei suoi singoli elementi, il passo successivo è quello di intraprendere alcuni semplici progetti e applicare la tua conoscenza teorica per risolvere sfide pratiche.

Nell’esercizio dettagliato qui sotto, abbiamo presentato un testo a parte e chiesto di formattarne vari aspetti usando l’HTML. Usa 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 di intestazione con il tag di chiusura corretto.
2. Rendi l’intestazione in grassetto.
3. Inserisci una linea orizzontale sotto l’intestazione.
4. Utilizza l’attributo color e colora “Grazie per la visita” di verde
5. Inserisci questo collegamento ipertestuale (https://www.w3schools.com/html/) nell’anchor text “Per saperne di più.”
6. In testa alla pagina, usa il formato name=”value” per allineare a sinistra i paragrafi

Statistiche e fatti del linguaggio HTML

1. Gli elementi HTML, head e body fanno parte delle specifiche HTML dalla metà degli anni ’90, e fino a qualche anno fa, erano gli elementi principali usati per dare struttura ai documenti HTML. Tuttavia, la situazione è cambiata drasticamente negli ultimi anni, poiché HTML5 ha aggiunto una serie di nuovi tag che possono essere usati 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 una DTD; quindi, in HTML5 la dichiarazione del doctype è più semplice e più corta.
3. I browser mobili hanno adottato completamente HTML5, quindi creare progetti pronti per i cellulari è facile come progettare e costruire per i loro piccoli display touch screen – da qui la popolarità del Responsive Design. Ci sono alcuni grandi meta tag che permettono anche di ottimizzare per i cellulari.
4. Il 78% degli sviluppatori di contenuti concorda sul fatto che la struttura è adatta alla creazione di app per cellulari, e il 68% dice che è adatta alla progettazione di qualsiasi tipo di app.
5. HTML5 è anche dotato di una serie di grandi API che ti permettono di costruire una migliore esperienza utente e un’applicazione web più robusta e dinamica – ecco un rapido elenco di API native:
   • Drag and Drop (DnD)
   • Base di memoria offline
   • Gestione della cronologia del browser
   • Modifica dei documenti
   • Riproduzione multimediale temporizzata
6. HTML5 non è controllato da una sola azienda. Una delle sue migliori caratteristiche sta nel fatto che è uno standard aperto. Gli sviluppatori hanno la libertà di lasciar fluire la loro creatività e aggiungere quante più funzioni e caratteristiche possibili.
7. Rispetto ad altri browser, ogni aggiornamento di Google Chrome si assicura di includere il supporto per HTML5. Inoltre, il lettore predefinito di YouTube è ora HTML5 e gli annunci Flash di Google sono stati 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

Mentre HTML è stato creato solo nel 1991 (la prima versione del linguaggio di codifica è stata lanciata nel 1995), è diventato rapidamente uno strumento seminale nella progettazione di siti web funzionali e visivamente attraenti.