In questo articolo trattiamo le basi dell'HTML, per farti cominciare. Definiamo gli elementi, gli attributi e tutti gli altri termini che puoi aver sentito e vediamo come si integrano nel linguaggio. Vediamo inoltre come sono strutturati un elemento HTML e una tipica pagina e spieghiamo altre importanti caratteristiche del linguaggio. Lungo il percorso, giocheremo con un po' di HTML per mantenere viva l'attenzione.
| Prerequisiti: | Alfabetizzazione sull'uso del computer, basic software installed, e conoscenze di base di working with files. |
|---|---|
| Obbiettivo: | Acquisire familiarità col linguaggio HTML e fare un po' di pratica nella scrittura di elementi HTML. |
L'{{glossary("HTML")}} (HyperText Markup Language) non è un linguaggio di programmazione ma un linguaggio di markup, usato per dire al browser come strutturare le pagine web. Può essere complicato o semplice, a seconda di come lo sviluppatore desidera che sia. Un file HTML è composto da una serie di {{glossary("Element", "elementi")}} usati per racchiudere o marcare parti di contenuto, così che venga mostrato in un certo modo. I {{glossary("Tag", "tag")}} che racchiudono il contenuto, possono renderlo un collegamento a un altra pagina web, formattarlo in carattere italico e così via. Per esempio prendiamo la seguente linea di codice:
My cat is very grumpy
Se vogliamo che la linea sia isolata, possiamo specificare che è un paragrafo, racchiudendola con due tag ({{htmlelement("p")}})
<p>My cat is very grumpy</p>
Esploriamo ulteriormente il nostro elemento.
Le parti sono:
Modifica la linea sottostante nel campo Input racchiudendola fra i tag <em> e </em> (inserisci il tag {{htmlelement("em")}} all'inizio della riga per aprire l'elemento, e {{htmlelement("/em")}} al termine della riga per chiudere l'elemento), questo evidenzierà il contenuto con il carattere italico. Vedrai l'effetto dei cambiamenti nel campo Output.
Se fai un errore, puoi sempre usare il pulsante reset per ripristinare la situazione iniziale. Se sei bloccato, premi il pulsante Mostra soluzione per vedere la risposta.
<h2>Live output</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Codice modificabile</h2>
<p class="a11y-label">Premi Esc per uscire dalla textarea (La pressione del tasto Tab, inserirà un carattere di tabulazione).</p>
<textarea id="code" class="playable-code" style="min-height: 100px;width: 95%">
Questo è il mio testo.
</textarea>
<div class="controls">
<input id="reset" type="button" value="Reset" />
<input id="solution" type="button" value="Mostra soluzione" />
</div>html {
font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
reset.addEventListener('click', function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = 'Show solution';
updateCode();
});
solution.addEventListener('click', function() {
if(solution.value === 'Show solution') {
textarea.value = solutionEntry;
solution.value = 'Hide solution';
} else {
textarea.value = userEntry;
solution.value = 'Show solution';
}
updateCode();
});
var htmlSolution = '<em>This is my text.</em>';
var solutionEntry = htmlSolution;
textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = function(e){
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret('\t');
}
if (e.keyCode === 27) {
textarea.blur();
}
};
function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
var front = (textarea.value).substring(0, caretPos);
var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = function(){
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if(solution.value === 'Show solution') {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};{{ EmbedLiveSample('Playable_code', 700, 300) }}
Puoi inserire elementi dentro altri elementi: si dice annidare (nesting). Se vogliamo sottolineare che il nostro gatto è MOLTO scontroso (VERY grumpy) possiamo racchiudere la parola "very" in un elemento {{htmlelement("strong")}}, per enfatizzarla fortemente.
<p>My cat is <strong>very</strong> grumpy.</p>
Dovete assicurarvi che gli elementi siano annidati in modo appropriato: nell'esempio viene aperto prima l'elemento p e poi l'elemento strong, dobbiamo perciò chiudere prima l'elemento strong e poi l'elemento p. L'esempio seguente è sbagliato:
<p>My cat is <strong>very grumpy.</p></strong>
Gli elementi devono essere aperti e chiusi correttamente perché sia chiaro se sono all'interno o all'esterno uno dell'altro. Se si mescolano, come nell'esempio qui sopra, il browser cercherà di indovinare quali erano le tue intenzioni e potrebbe darti risultati inaspettati. Quindi presta attenzione.
Ci sono due importanti categorie di elementi in HTML. Questi sono gli elementi di tipo blocco (block level) e elementi in linea (inline).
Prendete l'esempio seguente:
<em>first</em><em>second</em><em>third</em> <p>fourth</p><p>fifth</p><p>sixth</p>
{{htmlelement("em")}} è un elemento in linea, che viene mostrato nell'esempio sottostante, i tre elementi saranno mostrati sulla stessa linea senza nessuno spazio a separarli.
{{htmlelement("p")}} è un elemento blocco, quindi ogni elemento dichiarato con questo tag, apparirà su una nuova linea con spazi sopra e sotto (la spaziatura è dovuta alla formattazione di default (CSS styling) che il browser applica ai paragrafi).
{{ EmbedLiveSample('Confronto_tra_elementi_blocco_e_in_linea', 700, 200) }}
Nota: l'HTML5 ha ridefinito le categorie degli elementi: approfondisci in Categorie degli elementi di contenuto (en) queste nuove definizioni sono più accurate e meno ambigue di quelle definite precedentemente, ma più complicate da capire rispetto a "blocchi" e "in linea", perciò continueremo a usarle in questa spiegazione.
Nota: I termini "block" e "inline", come usati in questo argomento , non dovrebbero essere confusi con i tipi dei box CSS con lo stesso nome. Anche se correlati per default, cambiare la proprietà display nei CSS non cambia la categoria dell'elemento e non modifica quali elementi potrebberso essere contenuti e quali saranno contenuti. Uno dei motivi per cui HTLM5 a deprecato l'uso di questi termini, riguarda la possibilità che questi vengano confusi.
Nota: Nelle pagine di riferimento, troverai delle liste che includono gli elementi di Blocco e quelli In linea — controlla Elementi di tipo blocco e Elementi in linea.
Non tutti gli elementi seguono il modello: tag di apertura, contenuto, tag di chiusura. Alcuni elementi hanno un unico tag, che è abitualmente usato per includere qualcosa nel documento in quel punto. Per esempio l'elemento {{htmlelement("img")}} inserisce un'immagine nella posizione in cui viene scritto.
<img src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png">
Questo fa apparire ciò che segue:
{{ EmbedLiveSample('Elementi_vuoti', 700, 300) }}
Note: Gli elementi vuoti sono a volte chiamati elementi void.
Gli elementi possono avere "attributi" che appaiono così:
Gli attributi contengono informazioni extra, riguardanti l'elemento, che non appaiano nel contenuto visualizzato nella pagina. In questo caso, l'attributo class permette di assegnare uno o più nomi che potrà/anno poi essere usato/i per puntare alle regole di stile per quell elemento o altro.
Un attributo deve avere:
Un altro esempio di elemento é {{htmlelement("a")}} — che sta per "anchor" e rende il contenuto dell'elemento un collegamento ipertestuale (hyperlink). Questo elemento può avere diversi attributi, come vediamo qui sotto:
href: Il valore di questo attributo è l'indirizzo web a cui si vuole che il link punti, ed a cui verra indirizzato il browser quando verrà cliccato. Ad esempio href="https://www.mozilla.org/".title: Questo attributo, fornirà informazioni aggiuntive sul link, come ad esempio il nome della pagina a cui si verrà indirizzati. Ad esempio, title="The Mozilla homepage". Questo attributo verrà mostrato come tooltip quando ci si posizionerà con il mouse sopra il link.target: L'attributo target indica il modo in cui si aprirà il link. Ad esempio, target="_blank" mostrerà il link in un nuovo tab / finestra. Se si vuol aprire il link nel/la tab/finestra corrente, basterà ometterlo.Modifica la linea sottostante nel campo Input per farne un link al tuo sito preferito. Per prima cosa, aggiungi l'elemento {{htmlelement("a")}}. Poi specifica gli attributi href e title. Ed infine, specifica l'attributo target affinche il collegamento si aprà in un nuovo/a tab/finestra.Vedrai l'effetto dei cambiamenti nel campo Output mentre digiti. Dovresti vedere un link che mostrerà il valore dell'attributo title quando il puntatore del mouse verrà posizionato sopra e aprirà la pagina definita dal valore dell'attributo href. Ricorda di lasciare uno spazio tra nome dell'elemento e attributi.
Se hai commesso un errore, puoi sempre tornare allo stato iniziale con il pulsante Reset. Se non riesci proprio a trovare la soluzione, premi il pulsante Mostra soluzione e vedrai la risposta.
<h2>Live output</h2>
<div class="output" style="min-height: 50px;">
</div>
<h2>Input</h2>
<p class="a11y-label">Premi Esc per uscire dall'area del codice (La pressione del tasto Tab inserirà un carattere di tabulazione).</p>
<textarea id="code" class="input" style="min-height: 100px;width: 95%">
<p>Un collegamento al mio sito web preferito.</p>
</textarea>
<div class="playable-buttons">
<input id="reset" type="button" value="Reset">
<input id="solution" type="button" value="Mostra soluzione">
</div>html {
font-family: sans-serif;
}
h2 {
font-size: 16px;
}
.a11y-label {
margin: 0;
text-align: right;
font-size: 0.7rem;
width: 98%;
}
body {
margin: 10px;
background: #f5f9fa;
}
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var solution = document.getElementById('solution');
var output = document.querySelector('.output');
var code = textarea.value;
var userEntry = textarea.value;
function updateCode() {
output.innerHTML = textarea.value;
}
reset.addEventListener('click', function() {
textarea.value = code;
userEntry = textarea.value;
solutionEntry = htmlSolution;
solution.value = 'Mostra soluzione';
updateCode();
});
solution.addEventListener('click', function() {
if(solution.value === 'Mostra soluzione') {
textarea.value = solutionEntry;
solution.value = 'Nascondi soluzione';
} else {
textarea.value = userEntry;
solution.value = 'Mostra soluzione';
}
updateCode();
});
var htmlSolution = '<p>Un collegamento al mio <a href="https://www.mozilla.org/" title="The Mozilla homepage" target="_blank">sito web preferito</a>.</p>';
var solutionEntry = htmlSolution;
textarea.addEventListener('input', updateCode);
window.addEventListener('load', updateCode);
// stop tab key tabbing out of textarea and
// make it write a tab at the caret position instead
textarea.onkeydown = function(e){
if (e.keyCode === 9) {
e.preventDefault();
insertAtCaret('\t');
}
if (e.keyCode === 27) {
textarea.blur();
}
};
function insertAtCaret(text) {
var scrollPos = textarea.scrollTop;
var caretPos = textarea.selectionStart;
var front = (textarea.value).substring(0, caretPos);
var back = (textarea.value).substring(textarea.selectionEnd, textarea.value.length);
textarea.value = front + text + back;
caretPos = caretPos + text.length;
textarea.selectionStart = caretPos;
textarea.selectionEnd = caretPos;
textarea.focus();
textarea.scrollTop = scrollPos;
}
// Update the saved userCode every time the user updates the text area code
textarea.onkeyup = function(){
// We only want to save the state when the user code is being shown,
// not the solution, so that solution is not saved over the user code
if(solution.value === 'Show solution') {
userEntry = textarea.value;
} else {
solutionEntry = textarea.value;
}
updateCode();
};{{ EmbedLiveSample('Playable_code2', 700, 300) }}
A volte potrai trovare degli attributi senza alcun valore — questo è consentito. Questo tipo di attributi, sono chiamati attributi booleani, e possono avere un unico valore, che solitamente è uguale al nome dell'attributo stesso. Ad esempio, analizziamo l'attributo {{htmlattrxref("disabled","input")}} che può essere assegnato agli elementi input dei moduli (form) per disabilitarli (renderli grigi) e fare in modo che non possa essere introdotto alcun dato.
<input type="text" disabled="disabled">
Per brevità, è permesso scriverli come nell'esempio qui sotto (abbiamo incluso anche un campo non disabilitato per confronto, per darti un assaggio di cosa verrà).
<input type="text" disabled> <input type="text">
Entrambi ti mostreranno il seguente output:
{{ EmbedLiveSample('Attributi_booleani', 700, 100) }}
Quando navighi il world wild web, potrai trovare i più strani stili di mark up, inclusi i valori degli attributi senza virgolette: ciò è permesso in alcune circostanze, ma negli altri casi creerà problemi al tuo markup. Per esempio, se riprendiamo il precedente esempio del link, possiamo scriverne una versione base con solo l'attributo href, come qui:
<a href=https://www.mozilla.org/>favourite website</a>
Tuttavia, appena aggiungeremo l'attributo title, le cose smetteranno di funzionare
<a href=https://www.mozilla.org/ title=The Mozilla homepage>favourite website</a>
A questo punto il browser, fraintenderà il tuo markup, interpretando l'attributo title come tre attributi distinti — un attributo title con valore "The" e due attributi booleani Mozilla e homepage. Non è ovviamente ciò che si intendeva e provocherà errori o comportamenti inaspettati, come nell'esempio live sottostante. Prova a posizionare il mouse sopra il link per vedere qual é il title.
{{ EmbedLiveSample('Omettere_le_virgolette_attorno_al_valore_degli_attributi', 700, 100) }}
Il nostro consiglio è di mettere sempre le virgolette — Si evitano questi problemi e si ottiene anche un codice più leggibile.
In questo articolo noterai che sono state usate le doppie virgolette. Potrai tuttavia trovare le virgolette singole in qualche documento HTML. Si tratta esclusivamente di una questione di stile e sei libero di scegliere quelle che preferisci. Le due linee seguenti sono equivalenti.
<a href="http://www.example.com">A link to my example.</a> <a href='http://www.example.com'>A link to my example.</a>
Devi però assicurarti di non mescolarle. L'esempio seguente non funzionerà.
<a href="http://www.example.com'>A link to my example.</a>
Se hai usato un tipo di virgolette nel tuo HTML, puoi usare l'altro tipo nel valore dell'attributo senza nessun problema:
<a href="http://www.example.com" title="Isn't this fun?">A link to my example.</a>
Se vuoi annidare lo stesso tipo di virgolette, dovrai usare {{anch("Entity references: including special characters in HTML")}}.
That wraps up the basics of individual HTML elements, but they aren't very useful on their own. Adesso vedremo come gli elementi sono combinati per formare una intera pagina HTML.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<p>This is my page</p>
</body>
</html>
Qui abbiamo:
<!DOCTYPE html>: La doctype. Nella notte dei tempi, quando l'HTML era appena nato (about 1991/2), doctypeserano utilizzate per collegare set of rules che la pagina HTML doveva rispettare per essere considerata un buon documento HTML, il che significava determinare automaticamente gli errori e altre cose utili. In genere erano qualcosa tipo questo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Tuttavia oggi, a nessuno interessa di loro e sono solo un residuo storico che deve essere incluso per far si che tutto funzioni.
<!DOCTYPE html> è la più corta stringa di caratteri che rappresenta una doctype valida; è tutto ciò che serve sapere.<html></html>: The <html> element. Questo elemento racchiude tutta la pagina e vi si può riferire come "root", elemento radice.<head></head>: The <head> element. Questo elemento serve da contenitore per tutta una serie di cose da includere nel documento HTML che non sono "contenuto" da far visualizzare ai visitatori della tua pagina. Sono incluse cose come le parole chiave e la descrizione della pagina, che vuoi appaia nei risultati dei motori di ricerca, dichiarazioni CSS per formattare il contenuto, dichiarazioni dei set di caratteri e altro. Imparerai di più riguardo a questo nel prossimo articolo della serie.<meta charset="utf-8">: Questo elemento imposta il set di caratteri che il tuo documento dovrebbe usare a utf-8, che include la maggior parte dei caratteri di tutti gli alfabeti umani conosciuti. Sostanzialmente può trattare qualsiasi tipo di testo tu voglia introdurre. non c'è ragione per non usare questo set di caratteri e può evitare problemi in seguito.<title></title>: Questo imposta il titolo della tua pagina, cioè il titolo che appare nella scheda del browser quando la pagina viene caricata e che viene usato per descrivere la pagina quando la salvi tra i preferiti (bookmark).<body></body>: The <body> element. Questo elemento contiene tutto ciò che vuoi mostrare agli utenti del web che visitano la pagina, sia che si tratti di testo, sia di immagini o video, giochi, tracce audio o qualsiasi altra cosa.If you want to experiment with writing some HTML on your local computer, you can: Se vuoi esercitarti a scrivere un po' di HTML sul tuo computer, puoi:
index.htmlNote: Trovi questo modello di base anche nel MDN Learning Area Github repo.
Adesso puoi aprire il file nel tuo browser e vedere come appare il codice, poi puoi modificare il codice e ricaricare la pagina per vedere i risultati. Inizialmente dovrebbe apparire più o meno così:
Così, in questo esercizio, puoi modificare il codice localmente sul tuo computer come mostrato sopra, o puoi modificare l'esempio sotto (l'esempio modificabile rappresenta solo l'elemento <body>). Ci piacerebbe che tentassi di realizzare questi passi:
<body>, aggiungi un titolo principale per il documento; dovrebbe essere racchiuso tra il tag <h1> e il corrispondente tag di chiusura </h1>.<strong> e </strong> per chiudere l'elemento.If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.
<h2>Input</h2> <textarea id="code" class="input"> <p>This is my page</p></textarea> <h2>Output</h2> <div class="output"></div> <div class="controls"> <input id="reset" type="button" value="Reset" /> <input id="solution" type="button" value="Show solution" /> </div>
body {
font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;
}
.input, .output {
width: 90%;
height: 10em;
padding: 10px;
border: 1px solid #0095dd;
}
img {
max-width: 100%;
}
.output {
overflow: auto;
}
button {
padding: 10px 10px 10px 0;
}
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var code = textarea.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");
function drawOutput() {
output.innerHTML = textarea.value;
}
reset.addEventListener("click", function() {
textarea.value = code;
drawOutput();
});
solution.addEventListener("click", function() {
textarea.value = '<p>I really enjoy <strong>playing the drums</strong>. One of my favourite drummers is Neal Peart, who\
plays in the band <a href="https://en.wikipedia.org/wiki/Rush_%28band%29" title="Rush Wikipedia article">Rush</a>.\
My favourite Rush album is currently <a href="http://www.deezer.com/album/942295">Moving Pictures</a>.</p>\
<img src="http://www.cygnus-x1.net/links/rush/images/albums/sectors/sector2-movingpictures-cover-s.jpg">';
drawOutput();
});
textarea.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
{{ EmbedLiveSample('Playable_code3', 700, 600) }}
Nei precedenti esempi potresti aver notato che molto spazio bianco (vuoto) è incluso nel listato del codice - ciò non è affatto necessario; i due seguenti estratti sono equivalenti:
<p>Dogs are silly.</p>
<p>Dogs are
silly.</p>
Non importa quanti spazi usi (includendo sia il carattere spaziatura che le interruzioni di linea), il decodificatore (parser) HTML li riduce tutti ad un unico spazio quando restituisce la pagina. Quindi perché usare così tanti spazi? La risposta é per ottenere leggibilità; è molto più semplice capire cosa fa il tuo codice se lo hai formattato ordinatamente e non solo raggruppato insieme in un grande caos. Nel nostro HTML abbiamo fatto rientrare di due spazi, rispetto all'elemento contenitore, tutti gli elementi annidati. Dipende da te quale stile di formattazione usare (per esempio quanti spazi utilizzare per ogni livello di indentazione), ma devi usare qualche tipo di formattazione.
In HTML, i caratteri <, >,",' e & sono caratteri speciali. Sono anche parti della sintassi dell'HTML, quindi si pone il problema di come poterli includere nel proprio testo, per indicare ad esempio un "minore di", senza che venga interpretato dal parser come codice, cosa che alcuni browser potrebbero fare.
Dobbiamo usare speciali codici che rappresentano quei caratteri e che possono quindi essere usati in quelle circostanze. Ognuno di questi codici (character reference) inizia con un ampersand (&) e finisce con un punto e virgola (;).
| Literal character | Character reference equivalent |
|---|---|
| < | < |
| > | > |
| " | " |
| ' | ' |
| & | & |
Nell'esempio sotto, puoi vedere 2 paragrafi che parlano di tecnologie web:
<p>In HTML, you define a paragraph using the <p> element.</p> <p>In HTML, you define a paragraph using the <p> element.</p>
Nel campo di output istantaneo sotto, puoi vedere che il primo paragrafo è sbagliato, perché il browser pensa che il secondo tag p (<p>) sia l'inizio di un nuovo paragrafo. Il secondo paragrafo funziona perché abbiamo sostituito le parentesi angolate con le entità (character references).
{{ EmbedLiveSample('Elenco_di_riferimento_delle_entità_includere_caratteri_speciali_nell\'HTML', 700, 200) }}
Note: Una tabella di riferimento di tutte le entità disponibili nel linguaggio HTML si trova su Wikipedia: List of XML and HTML character entity references.
In HTML, come in molti linguaggi di programmazione, c'è la possibilità di aggiungere dei "commenti" al codice, che sono ignorati dal browser e sono pertanto invisibili per gli utenti; il loro scopo è di includere nel documento spiegazioni sul funzionamento del codice, su cosa fanno le differenti parti di codice, ecc. Tutto ciò può essere molto utile se ritorni sul codice sei mesi dopo che ci avevi lavorato e non puoi ricordare cosa avevi fatto, o se passi a qualcun'altro il tuo codice perché ci lavori.
Per far si che una parte del contenuto del documento HTML sia un commento, devi includerlo tra speciali segni, che sono <!-- and -->. Avrai per esempio:
<p>I'm not inside a comment</p> <!-- <p>I am!</p> -->
Come puoi vedere qui sotto, il primo paragrafo appare nell'output , mentre il secondo no.
{{ EmbedLiveSample('Commenti_HTML', 700, 100) }}
Hai raggiunto la fine dell'articolo; spero tu abbia gradito questo tour fra le più elementari regole dell'HTML. A questo punto dovresti capire come appare il linguaggio, come funziona ad un livello base e dovresti essere in grado di scrivere alcuni elementi ed attributi. Questo è il punto perfetto a cui essere adesso, perché nei seguenti articoli della serie rivedremo nei dettagli alcune delle cose già viste e introdurremo alcune nuove caratteristiche del linguaggio. Stay tuned! (Resta sintonizzato!)
Note: A questo punto, poiché inizi a saperne di più di HTML, potresti anche voler iniziare ad esplorare i Cascading Style Sheets, o CSS, che é il linguaggio usato per dare stile e abbellire le pagine web (per esempio cambiare il colore dei font o alterare il layout della pagina). HTML e CSS sono fatti per operare insieme, come presto scoprirai.