HTML
HyperText Markup Language (HTML)
Potresti essere sorpreso nell’apprendere che le pagine interattive e ricche di grafica che vediamo sul Web sono in realtà generate da semplici documenti di solo testo (source document).
Le pagine Web utilizzano un linguaggio di markup chiamato HyperText Markup Language o HTML, che è stato creato appositamente per i documenti con collegamenti ipertestuali.
HTML definisce dozzine di elementi di testo che compongono i documenti, ad esempio: intestazioni, paragrafi, testo sottolineato e, naturalmente, collegamenti.
La pagina web mostrata in questa immagine è, in realtà, composta da quattro file separati:
- un documento di testo HTML
- un foglio di stile CSS
- due immagini
Il linguaggio HTML utilizza un insieme predefinito di marcatori o tag per descrivere gli elementi di una pagina Web, ad esempio:
<head></head>
<body></body>
<h1> </h1>
<p> </p>
I TAG inseriti nel documento sorgente HTML danno istruzioni al browser su come strutturare il testo del documento visualizzato sullo schermo e dove dovrebbero essere posizionate le immagini all’interno di tale documento.
Da notare, prima di tutto, che il testo tra le parentesi uncinate (o angolari o acute, dette anche diplé o chevron (< >)) (ad esempio, <body> o <html>) non sono visualizzate nella pagina finale.
Il marcatore o markup o tag è nascosto. Il browser mostra solo ciò che c’è tra il tag: il contenuto dell’elemento.
Il tag fornisce il nome dell’elemento HTML: ad esempio “h1” per il titolo di livello 1 o “em” per il testo sottolineato.
Nel documento HTML, <h1> indica che il testo seguente dovrebbe essere un titolo di livello 1; </h1> indica la fine dell’intestazione.
In secondo luogo, è da notare che la maggior parte dei tag HTML viene visualizzata in coppie circostanti il contenuto dell’elemento.
<title>Jen’s Kitchen</title>
Alcuni elementi, chiamati elementi vuoti, non hanno contenuto.
Nel nostro esempio, il tag <hr> indica un elemento vuoto che indica al browser “Inserisci qui un divisore tematico” (la maggior parte dei browser indica il divisore tematico con una linea orizzontale).
Il browser interpreta i caratteri uno per uno, in sequenza.
Per esempio, quando il browser incontra una parentesi aperta <, assume che tutto ciò che segue è parte del markup fino a quando non trova la parentesi di chiusura > .
Allo stesso modo, il browser presuppone che tutto il contenuto che segue un tag <h1> di apertura sia un titolo di livello 1, finché non incontra il tag di chiusura </ h1>.
Questo è il modo in cui il browser analizza il documento HTML.
Ma dove sono le immagini?
Ovviamente, non ci sono immagini nel file HTML, quindi come si inseriscono nella pagina finale visualizzata?
Ogni immagine è un file separato ed è inserito nel flusso del testo con il tag img che dice al browser dove trovare tale immagine tramite il suo URL (indirizzo):
<img src=”foods.gif” alt=”food illustration”>
Quando il browser trova l’elemento img, effettua un’altra richiesta al server per ottenere il file immagine, e quindi lo inserisce nel flusso dei contenuti.
Video e altri file multimediali sono aggiunti più o meno allo stesso modo.
Aggiungere un po’ di stile
Nella parte superiore del documento HTML c’è un elemento di collegamento che punta al foglio di stile kitchen.css.
<link rel=”stylesheet” href=”kitchen.css” type=”text/css” >
Il foglio di stile include alcune righe di istruzioni su come dovrebbe apparire la pagina nel browser.
Il CSS consente ai designer di aggiungere istruzioni di stile visivo (presentazione del documento) al testo con i marcatori (la struttura del documento).
La Figura seguente mostra la pagina di web con e senza le istruzioni di stile:
I browser sono dotati di stili predefiniti per ogni elemento HTML, quindi se un documento HTML non ha le proprie istruzioni di stile personalizzate, il browser userà il suo (è ciò che vedi nella schermata sulla sinistra).