TOC

This article is currently in the process of being translated into Italian (~99% done).

Introduction to HTML:

Your First Webpage

Ecco un esempio di documento in HTML5, uno dei più semplici che tu possa creare. Inizia con il doctype HTML5, seguito dal titolo della pagina e seguito da alcuni contenuti. In questo caso un singolo paragrafo.

<!DOCTYPE html>
<title>Your first HTML5 Document</title>
<p>Okay, now we’re going somewhere!</p>

Dovresti avere un'idea di come apparirà in un browser: il titolo (title) del documento, "Your first HMTL5 Document" ed il testo "Okay, now we're going somewhere!" nella zona in alto a sinistra della pagina.

La dichiarazione doctype indica a chi legge il documento che il contenuto successivo è in HTML.

<!DOCTYPE html>

Se hai già avuto modo di guardare il markup dei documenti HTML, ti sarà capitato di vedere una dichiarazione doctype molto simile a questa:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Persino i webdeveloper professionisti copiano e incollano questo lungo doctype da un documento ad un altro. Il nuovo doctype è invece più semplice e facile da ricordare. Poiché non viene dichiarato alcuna versione specifica, tutte le nuove funzionalità future saranno in automatico disponibili per la tua pagina.

A cosa serve il DOCTYPE?

Ma perché c'è un doctype? Tutti i browser hanno due diversi modi di leggere il documento: la modalità standard e la modalità quirks. Se non specifichi che tipo di documento dovranno gestire, la modalità sarà quirks. Pensa a tutto questo un po' come al vecchio metodo di leggere il tuo documento: potrebbero esserci alcuni errori e potrai essere sicuro che non tutti i browser riusciranno a leggerlo nello stesso modo. Dichiarare un doctype costringe invece i browser a passare alla modalità standard, ovvero il "nuovo" metodo per leggere il documento. Se userai la modalità standard, la maggior parte dei browser leggerà la pagina nello stesso modo e capirà senza dubbio che cosa stai scrivendo.

Per rendere più comprensibile un documento HTML5, è consigliabile usare i due elementi di sezione <head> e <body>. Usando queste sezioni, separerai con chiarezza le informazioni sulla tua pagina (head) dal contenuto reale (body). Se li userai, la tua pagina web sarà simile a questa:

<!DOCTYPE html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>

Ti stai chiedendo che cosa potrebbe succedere con il rientro? Andare a capo oppure no è una tua libera scelta, ma in questo modo visualizzerai la struttura della pagina e sarà più semplice fare una lettura a colpo d'occhio.

L'ultima cosa che vorrai aggiungere è l'elemento <html> e viene posizionato subito dopo la dichiarazione doctype.

<!DOCTYPE html>
<html>
<head>
	<title>Your first HTML5 Document</title>
</head>
<body>
	<p>Okay, now we’re going somewhere!</p>
</body>
</html>

Congratulazioni, hai appena creato la tua prima pagina web HTML5! Hai notato che l'elemento <p> si trova all'interno dell'elemento <body>? Questo costrutto è chiamato elemento di nidificazione e rappresenta una parte essenziale della struttura HTML. Per adesso lo metterò in pausa, ma volevo solo darti un'idea degli elementi di nidificazione.

Cosa hai imparato

  • Dichiara sempre il doctype - <!DOCTYPE html>
  • Utilizza l'elemento <head> per separare le informazioni che riguardano la tua pagina
  • Usa l'elemento <body> per separare il contenuto della tua pagina
  • Usare <html>, <head>, e <body> è solo una questione di stile nell'HTML5, ma la struttura della pagina ti sarà più chiara
  • Mandare a capo il tuo markup facilita la comprensione
  • Puoi nidificare un elemento all'interno di un altro
This article has been fully translated into the following languages: Is your preferred language not on the list? Click here to help us translate this article into your language!