HTML primi passi - corso HTML
HTML è un linguaggio piuttosto semplice. Viene insegnato a tutti gli studenti delle specialità tecniche e umanistiche nelle università, e ormai credo che venga studiato anche nella maggior parte delle scuole. Tutto è molto semplice, perché HTML non è nemmeno un linguaggio di programmazione.
HTML è un linguaggio di markup: ciò che scriviamo è esattamente ciò che viene visualizzato sullo schermo. Nessun algoritmo, nessuno schema, nessun ciclo, nessuna variabile o classe — solo testo, testo, testo. In HTML esistono soltanto i tag, e in realtà non ce ne sono poi così tanti: quelli comunemente usati non arrivano nemmeno a una trentina. Quindi, se hai deciso di iniziare con un linguaggio affine ai linguaggi di programmazione, HTML è la scelta giusta.
Per iniziare a creare documenti in formato HTML, ci serve un semplice editor di testo (ad esempio il Blocco Note, già incluso in Windows e Linux) e un browser per visualizzare il documento (Firefox, Opera, Chrome o Internet Explorer). Come editor di testo su Windows, io utilizzo Notepad++.
Credo che queste poche righe ti abbiano già preparato all’apprendimento, e non serve nient’altro. Quindi, iniziamo.
Il mio primo documento HTML
I documenti HTML sono file di testo comuni, come i file readme.txt o qualsiasi altro file con estensione .txt.
Nota:
Che cos’è un’estensione?
Le estensioni dei file sono una caratteristica tipica dei sistemi operativi con interfaccia grafica. Il loro scopo principale è indicare al sistema operativo quale programma deve essere utilizzato per aprire un determinato file. Non parleremo qui delle varie estensioni relative ai file eseguibili, poiché l’interprete dei comandi del sistema operativo è anch’esso un programma che lavora con file con estensioni come .COM, .EXE, .BAT, .CMD, .VBS.
Per i documenti HTML useremo le estensioni .HTML e .HTM.
È arrivato il momento di creare un documento. Apri la cartella desiderata e fai clic con il tasto destro del mouse in uno spazio vuoto:
Seleziona la creazione di un nuovo documento di testo. Chiamiamo il file index.html; è anche possibile usare l’estensione .htm.
È possibile che le impostazioni del tuo sistema non permettano di cambiare l’estensione e che il file venga salvato come index.txt. In tal caso:
- Apri il file index.txt con il Blocco Note.
- Seleziona nel menu File → Salva con nome.
- Nella finestra che appare, ora puoi impostare manualmente l’estensione del file.
Ora che il file index.html è stato creato, aprilo con il Blocco Note e inizia a scrivere la struttura HTML.
La marcatura HTML si crea usando i tag. I tag hanno il seguente formato:
<tag>Testo qualsiasi</tag>
Per prima cosa c’è il tag di apertura, una parola racchiusa tra i simboli minore e maggiore. Questi simboli non si pronunciano: si dice semplicemente “tag X”.
Iniziamo con il tag più semplice: <html></html>. È il tag principale: con esso inizia un documento HTML e con esso termina.
<html> </html>
I tag possono essere scritti sulla stessa riga, ma è più comodo allinearli verticalmente: in questo modo Notepad++ evidenzia automaticamente i tag.
All’interno del tag <html>, posizioniamo il tag <body></body>. “Body” significa corpo, e rappresenta il contenuto visibile del documento. Tutto ciò che vediamo nel browser si trova all’interno del tag <body>. A proposito di browser — modifichiamo il file index.html e salviamolo.
<html> <body> </body> </html>
Nota come ho posizionato il tag <body>: con un rientro di due spazi rispetto al tag <html>. Questo migliora la leggibilità del documento HTML. Ora salva il file e aprilo nel browser.
Dovresti vedere una pagina vuota. Ed è giusto così, perché non abbiamo ancora aggiunto alcun testo.
Aggiungiamo ora del testo, direttamente tra i tag <body>:
<html>
<body>
HTML i miei primi passi
</body>
</html>
Salva il documento e aggiorna la pagina nel browser. Ora apparirà il testo “HTML i miei primi passi”. Questo perché lo abbiamo inserito all’interno del tag <body>, non sopra né sotto di esso, ma esattamente al suo interno.
Avrai notato che nella scheda del browser compare solo la scritta “Mozilla Firefox” — il nostro documento non ha ancora un titolo. Correggiamo questo e aggiungiamo un’intestazione.
I titoli si aggiungono all’interno di un altro tag: <head></head>. Il tag <head> si trova sopra al tag <body>:
<html>
<head>
</head>
<body>
HTML i miei primi passi
</body>
</html>
Se salvi il documento e aggiorni la pagina, non vedrai ancora differenze: nel tag <head> dobbiamo aggiungere il tag <title></title>, che definisce il titolo della pagina:
<html>
<head>
<title>HTML primi passi drupalbook.org</title>
</head>
<body>
HTML i miei primi passi
</body>
</html>
Salva il file, aggiorna la pagina nel browser e voilà — il nostro documento ora ha un titolo!
Penso che per una lezione introduttiva sia abbastanza. Nelle prossime lezioni impareremo molte altre cose.