Chiudi menu
Mostra/Nascondi menu
Sommario
< Home
Stampa

Introduzione ad HTML

HTML (Hypertext Markup Language) è un linguaggio che serve per descrivere la pagina Web.

Vediamo le sue caratteristiche principali:

  • è un linguaggio di “markup”, ogni sua parola chiave è racchiusa tra parentesi angolari < > come ad esempio <body> o <head>. Questi elementi sono chiamati tag.
  • definisce la struttura della pagina, ma non il layout grafico, di questo si occupa CSS
  • non ha variabili, espressioni, strutture di controllo o flusso. Il browser legge il codice HTML e lo traduce in una pagina web.
  • il documento HTML è un file di testo semplice, come qualsiasi altro sorgente di qualsiasi linguaggio. La sua estensione è .html o .htm

Il linguaggio è definito da un insieme di regole standard, gestite da una organizzazione, il W3C, che stabilisce e aggiorna periodicamente il linguaggio. La versione attuale è la 5. Tutti i browser in commercio quindi si attengono alle regole del W3C.

Prima pagina HTML

Vediamo qui la prima pagina HTML

<!DOCTYPE html>
<html>

<head>
   <meta charset="UTF-8">
   <title>Prima pagina</title>
</head>

<body>
   <div>
      Hello world
   </div>
</body>

</html>

Copiare la pagina in un file di testo, salvarlo con estensione .html ed aprirlo con il browser.

Apparirà la scritta “Hello World” in una pagina con titolo “Prima pagina”. La URL è particolare perché comincerà con qualcosa tipo “file://… “.

Vediamo la struttura:

  • è previsto un tag iniziale <!DOCTYPE html> che identifica che è una pagina html
  • è poi presente un tag <html>. Osserviamo che al termine del documento è presente un tag </html> detto chiusura del tag. Questo perché di norma tutti i tag sono dei contenitori, che vanno aperti e poi chiusi ed identificano quindi una sezione che ha dei tag al suo interno.
  • E’ presente poi un tag <head> che identifica la testata della pagina con informazioni non visibili, ma importanti: il charset (caratteri occidentali) e il titolo (della pagina).
  • Il tag <body> invece identifica il contenuto visibile.
  • E’ infine presente un tag <div> che identifica qualsiasi contenitore di testo o altri elementi.

IDE

Per scrivere pagine Web useremo una applicazione apposita, chiamata IDE, che oltre ad avere un editor di testo, ci consentirà di gestire una o più pagine Web (ed in futuro CSS e Javascript) in una cartella di progetto. Inoltre permetterà un insieme di operazioni di supporto che semplificheranno lo sviluppo.

  1. Installiamo quindi Visual Studio Code, uno degli IDE gratuiti più diffusi al mondo, specificatamente progettato per la programmazione Web.

2. Dopo averlo installato aggiungiamo una estensione. Clicchiamo dove indicato:

E cerchiamo “Live Server” e lo installiamo.

3. A questo punto creiamo il nostro primo progetto. Creiamo una cartella apposta “primo progetto html” e la apriamo con VS Code (File -> apri cartella).

4. Creiamo un file “index.html” e inseriamo il codice sopra indicato.

5. Premiamo col tasto destro sul nome del file e clicchiamo su “live server”. Si aprirà il browser con la pagina che abbiamo appena creato.

Cosa è cambiato rispetto ad aprire il file direttamente col browser?

Quando creiamo un file html e lo apriamo da gestione file col browser, in realtà lo stiamo visualizzando solamente, ma non stiamo replicando la tecnologia del Web che come abbiamo visto nella lezione precedente, si basa su una comunicazione client server.

Di norma la comunicazione client-server prevede un accesso ad un qualche server remoto su Internet. Ma noi possiamo anche creare un server sul nostro stesso computer, e far connettere il browser a questo server.

La url che vedremo sarà in una forma simile a questa:

http://127.0.0.1:5500/index.html

Dove 127.0.0.1 è l’indirizzo IP del nostro computer. Cosa cambia? Cambia che anche se lavoriamo solo sul nostro computer in realtà stiamo replicando la stessa tecnologia di un vero server, e quindi il browser non farà una semplice visualizzazione, ma si comporterà come se stesse accedendo ad un vero server. Invece quando si apre l’html come file magari sarà visualizzabile, ma non è garantito che funzioni correttamente (ad esempio come vedremo i link potrebbero non funzionare in modo corretto, così come il Javascript o il CSS).

Browser

Il browser è l’ambiente di esecuzione della pagina Web. Esso si occupa di eseguire il rendering della pagina. E’ possibile accedere al contenuto della pagina cliccando col tasto destro su un punto qualsiasi e cliccando sulla voce “ispeziona” (su Chrome, il nome potrebbe cambiare su altri browsers).

Comparirà una finestra (in basso o laterale, a scelta dell’utente) come la seguente:

Questo strumento si rivelerà col tempo molto importante, sia per analizzare la struttura della pagina, sia per la programmazione in Javascript.

Conclusioni

HTML è un linguaggio di descrizione della pagina Web. Viene erogato di norma da un server web (remoto o anche locale). La pagina HTML è costituita da tag racchiusi da parentesi angolari. Per descrivere la grafica è invece necessario utilizzare un altro linguaggio, il CSS.

Per editare le pagine web utilizzeremo Visual Studio Code, un IDE che consente di editare più pagine dello stesso progetto e permette inoltre di creare un server locale che ci consente di verificare in modo corretto il funzionamento delle pagine web che andremo a creare.