Il termine "markup" deriva dal mondo della tipografia tradizionale. Quando un autore scriveva un testo, spesso usava delle annotazioni a mano o dei simboli sul manoscritto per indicare all'editore o al tipografo come formattare il documento: ad esempio, dove mettere un titolo, dove iniziare un nuovo paragrafo, dove inserire una parte in grassetto o in corsivo. Queste annotazioni erano, in pratica, dei "marcatori".
La differenza fondamentale da un linguaggio di programmazione sta nel fatto che un linguaggio di markup non contiene istruzioni logiche. Non può eseguire calcoli, prendere decisioni (if/else), o gestire cicli (for). Il suo unico scopo è descrivere la struttura e l'organizzazione del testo.
I tag
HTML usa dei marcatori chiamati tag per indicare al browser come visualizzare un documento. I tag sono racchiusi tra parentesi angolari (<>). Generalmente, un elemento HTML è composto da un tag di apertura e un tag di chiusura, come ad esempio <p> per un paragrafo e </p> per la sua fine.
La struttura base di un tag è
<nomeTag>contenuto</nomeTag><nomeTag>rappresenta l\apertura del tagcontenuto: è ciò che contiene il tag</nomeTag>: è la chiusura del tag
<!DOCTYPE html>
<html>
<head>
<title>Titolo della Pagina</title>
</head>
<body>
<!-- Il contenuto della pagina va qui -->
</body>
</html>
<!DOCTYPE html>: questa dichiarazione, posta all'inizio di ogni documento HTML, specifica al browser che il documento è scritto in HTML5.
<html>: è l'elemento radice che racchiude tutto il contenuto della pagina.
<head>: contiene metadati e informazioni sulla pagina non visibili all'utente (come il titolo della pagina nel browser, i collegamenti a file CSS o script JavaScript).
<body>: contiene tutto il contenuto visibile della pagina, come testo, immagini, link e tabelle.
Editor per html
Per scrivere codice HTML non serve un software speciale. Ti basta un semplice editor di testo, come il Blocco Note su Windows o TextEdit su Mac. Questi programmi ti permettono di scrivere e salvare il codice in formato testo semplice, che è esattamente ciò che serve per creare una pagina web.In alternativa, esistono anche editor di codice più avanzati e professionali come Visual Studio Code (VS Code), che offrono funzionalità extra come la colorazione del codice e il completamento automatico, rendendo il lavoro più facile e veloce. Tuttavia, per la nostra prima esercitazione, un semplice editor di testo andrà benissimo, così da concentrarci sui fondamenti del linguaggio.
LABORATORIO
Creare la Prima Pagina Web
Imparerai a riconoscere la struttura di un documento HTML, a scrivere e salvare il tuo primo file .html, e a visualizzarlo direttamente nel tuo browser.
1 Creazione e salvataggio del file HTML
- Crea un file nuovo: vai sul desktop e premi il tasto destro del mouse:
nuovo documento di testo. - Apri il file con un editor di testo: utilizza un editor semplice come il Blocco Note (su Windows) o TextEdit (su macOS).
- Scrivi il codice: inserisci il codice HTML: la struttura di base di un documento HTML.
- Scrivi un testo: tra i tag scrivi un testo ad esempio
<h1>La mia prima pagina</h1> - Salva il file: vai su "
File" -> "Salva con nome" (Salva come: tutti i file!) e assegna al file un nome, ad esempio la-mia-pagina.html. È fondamentale che l'estensione del file sia .html (ad esempio Nome.html), altrimenti il browser non lo riconoscerà come pagina web.
2 Visualizza il risultato nel browser
- Apri il file nel browser: sul file clicca sul tasto destro del mouse e seleziona
Apri cone scegli il browser che preferisci.