Imparare una nuova lingua richiede tempo e disciplina.
Che tu stia studiando l'italiano in vista della tua vacanza in Europa o finendo i compiti di spagnolo, c'è molto da fare per leggere, scrivere e parlare una lingua che non usi regolarmente.
Lo stesso si può dire per imparare l'HTML per programmare un sito web. Anche se non è necessario imparare a "parlare" HTML per usarlo, dovrai identificare i componenti dell'HTML, cosa significano e come appariranno su una pagina web. Imparare l'HTML è anche una parte vitale della creazione di siti web.
Cos'è l'HTML?
HTML sta per linguaggio di marcatura ipertestuale. È il linguaggio di marcatura standard per le pagine web che definisce la struttura del contenuto. Questi elementi sono i mattoni di qualsiasi sito web.
Cos'è l'HTML?
L'HTML consente agli utenti di creare e strutturare sezioni, intestazioni, collegamenti, paragrafi e altro su un sito web utilizzando vari tag ed elementi. Quasi tutto ciò che vuoi creare su una pagina web può essere fatto usando un codice HTML specifico.
Anche se potresti pensare che l'HTML sia complicato, o dire "Ho dimenticato un simbolo e tutto è andato storto!", l'HTML è molto simile all'apprendimento di una nuova lingua. Ma una volta che ci prendi la mano, sembrerà una seconda natura e creerai pagine web usando l'HTML in pochissimo tempo. Pronto a saperne di più? Continua a leggere.
Vuoi saperne di più su Sviluppatori Web? Esplora i prodotti Sviluppatori Web.
Come funziona l'HTML?
Sono sicuro al 100% che hai visualizzato un sito web che utilizza il codice HTML. Come lo so? Questo articolo è composto da tag ed elementi HTML nel backend.
Questo browser non visualizza i tag HTML effettivi ma li utilizza per rendere contenuti specifici sulla pagina in modo che i visitatori del sito web possano visualizzarli. Di solito, il sito web medio include diverse pagine con codice HTML, come la homepage, la pagina "chi siamo" e la pagina "contattaci", ciascuna con i propri documenti HTML unici.
Elementi HTML
L'anatomia di un elemento HTML consiste in un tag di apertura, un tag di chiusura e il contenuto intermedio. Pensa a questi elementi come ai mattoni per le pagine HTML.
Questi tag sono nomi di elementi circondati da parentesi angolari, in questo caso <p>, che sta per paragrafo.
Il primo tag è il tuo tag di apertura, il secondo è il tag di chiusura. Devono essere scritti allo stesso modo, tranne che il tag di chiusura avrà una barra in avanti prima del nome del tag. Il contenuto tra questi due tag verrà visualizzato nel formato paragrafo sul sito web.
Consiglio: Vuoi imparare come estrarre dati con la tua nuova conoscenza dell'HTML? Dai un'occhiata alla nostra guida su Web Scraping ora! Puoi anche dare un'occhiata a questa guida completa sulla creazione di siti web.
Tag HTML comuni
Ci sono molti tag HTML comuni che vengono utilizzati spesso nella creazione di una pagina web. Di seguito sono riportati alcuni dei tag frequentemente utilizzati per costruire una pagina web dall'inizio alla fine.
Tipo di documento
La dichiarazione del tipo di documento aiuta i browser a visualizzare correttamente la tua pagina web. Apparirà solo una volta, in cima alla pagina.
Tutti i documenti HTML iniziano con il codice che dichiara il documento. Questo tag appare così:
<!DOCTYPE html>
Questo può sembrare confuso, ma fondamentalmente, basta metterlo in cima al tuo documento e continuare a costruire.
Tag HTML
Come avrai intuito, questo tag è scritto come: <html>.
Questo elemento avvolge tutto il contenuto dell'intera pagina e potresti sentirlo chiamare l'elemento radice. Questo tag sarà sotto il tag del documento e dovrà essere chiuso, usando </html>, alla fine della pagina web.
Tag del titolo
Qual è il titolo della pagina che stai creando? Qualunque esso sia, sarà avvolto nell'elemento <title> e sarà verso l'inizio dei tuoi tag.
<title>Titolo della Pagina</title>
Tag del corpo
L'elemento <body> contiene tutto il contenuto che vuoi mostrare ai visitatori della tua pagina web. Questo include testo, immagini, video, tracce audio riproducibili e altro. Dovrà anche essere chiuso, usando </body>, alla fine della pagina web.
Tag dell'intestazione
Questo è scritto come <h1> e definisce un'intestazione più grande sulla pagina. Puoi avere più di un tag di intestazione e ogni elemento avrà un numero corrispondente.
<h1>Questa è un'intestazione.</h1>
<h2>Questa è anche un'intestazione.</h2>
Tag del paragrafo
Il tag del paragrafo definisce quale testo verrà visualizzato come paragrafo utilizzando l'elemento <p>.
<p>Questo è un paragrafo sui cani.</p>
<p>Questo è un altro paragrafo sui cani.</p>
Liste
Utilizzando il tag <ul> definirai quale testo verrà scritto come lista numerata <ol> o lista puntata <li>.
Un esempio di lista puntata sarebbe:
<ul>
<li>Farina</li>
<li>Zucchero</li>
<li>Burro</li>
</ul>
Utilizzando questo codice, il testo apparirà sulla pagina web come:
- Farina
- Zucchero
- Burro
Tag della lingua
La lingua del documento è definita dal tag "lang". Se la tua pagina verrà visualizzata in inglese, il tag sarà:
<html lang=”en”>
In questo caso, en rappresenta l'inglese. Altri tag di lingua popolari sono es per lo spagnolo, fr per il francese, it per l'italiano, he per l'ebraico e zh per il cinese.
Hai bisogno che la tua pagina web sia in una lingua diversa? Dai un'occhiata a questa lista di codici di lingua HTML.
Immagini
L'inizio del tuo elemento immagine inizierà con il tag <img>, ma ci sono altri componenti che devono essere inclusi.
Ci saranno anche i tag del file sorgente (src), del testo alternativo (alt) e della larghezza e altezza. Se sto usando una foto dei Chicago Cubs che è larga 600 pixel e alta 450 pixel, il tag dell'immagine apparirà così:
<img src=”Chicago_Cubs.jpg” alt=”Chicago-Cubs” style=”width:600px;height:450px”>
Collegamenti
C'è un modo specifico per aggiungere un collegamento nel tuo testo usando l'HTML. Per farlo, usa l'elemento <a>, che è l'abbreviazione di ancora.
In questo caso, supponiamo che il mio testo di ancoraggio sia G2 Learning Hub.
<a>G2 Learning Hub</a>
Successivamente, dai all'elemento <a> un attributo href con virgolette vuote:
<a href= “ “G2 Learning Hub</a>
Consiglio: Href sta per riferimento ipertestuale.
Quindi, riempi il valore di questo attributo (tra le virgolette) con l'URL a cui vuoi collegarti.
<a href= “https://learn.g2crowd.com/G2”>Learning Hub</a>
Dizionario HTML
- <!DOCTYPE html> Tipo di Documento
- <html> Tag HTML
- <title> Tag del titolo
- <body> Tag del corpo
- <H1> Tag dell'intestazione
- <p> Tag del paragrafo
- <ul> Tag della lista
- <html lang="en"> Tag della lingua inglese
- <img> Tag dell'immagine
- <a> Tag del collegamento ancora
Documento HTML di base
Se stavo creando un documento HTML di base che conteneva tutti gli elementi e i tag elencati sopra, apparirebbe così:
<!DOCTYPE html>
<html>
<html lang=”en”>
<title>Titolo della Pagina</title>
<body>
<h1>Questa è la tua prima intestazione</h1>
<p>Questo è il testo del paragrafo che riguarda la tua prima intestazione.</p>
<h2>Questa è la tua seconda intestazione</h2>
<p>Questo è il testo del paragrafo che riguarda la tua seconda intestazione.</p>
<ul>
<li>Lista</li>
<li>Lista</li>
<li>Lista</li>
</ul>
<img src=”Image.jpg” alt=”Image-Alt-Text” style=”width:600px;height:450px”>
Fai clic sul collegamento <a href= “https://learn.g2crowd.com/G2”>qui</a> per essere portato al G2 Learning Hub.
</body>
</html>
Correlato: Scopri di più su JavaScript e come puoi esercitare le tue abilità!
Vantaggi dell'HTML
Ci sono molti vantaggi nell'usare l'HTML per creare una pagina web. Alcuni includono:
- Linguaggio di codice ampiamente utilizzato con una grande comunità che lo utilizza
- Funziona su tutti i browser web
- Utilizza una marcatura pulita e coerente
- Completamente gratuito e open source
Svantaggi dell'HTML
Come tutte le cose che hanno un vantaggio, anche l'HTML ha alcuni svantaggi che dovrai considerare.
- Principalmente utilizzato per pagine web statiche
- Tutte le pagine web devono essere create separatamente, anche se utilizzano gli stessi elementi e tag
- Se stai usando un browser più vecchio, potrebbe non rendere i tag sviluppati di recente
Rimboccati le maniche e inizia a programmare
Che tu sia un esperto o un principiante nella creazione di un sito web, è probabile che utilizzerai l'HTML per creare varie pagine web. Anche se potresti sentirti esitante a scrivere codice HTML all'inizio, con il tempo sembrerà una seconda natura e leggerai e scriverai righe di codice nel sonno.
Ora che hai capito l'HTML, potresti essere interessato a imparare CSS e PHP. Oppure dai un'occhiata a questi consigli per programmare siti web!
Mara Calvello
Mara Calvello is a Content and Communications Manager at G2. She received her Bachelor of Arts degree from Elmhurst College (now Elmhurst University). Mara writes content highlighting G2 newsroom events and customer marketing case studies, while also focusing on social media and communications for G2. She previously wrote content to support our G2 Tea newsletter, as well as categories on artificial intelligence, natural language understanding (NLU), AI code generation, synthetic data, and more. In her spare time, she's out exploring with her rescue dog Zeke or enjoying a good book.
