Guida di HTML (base)

Altri tag

Ciò che abbiamo imparato nei precedenti capitoli copre tutti gli argomenti più importanti dell'HTML; utilizzando i tag visti finora possiamo creare pagine HTML complete e ordinate, pronte per essere impaginate e colorate con i CSS.

Questo capitolo è dedicato ad alcuni elementi aggiuntivi che completeranno la nostra conoscenza del linguaggio, e che guarderemo velocemente, senza soffermarci troppo sul loro utilizzo.

Mappe cliccabili

Le mappe cliccabili di HTML servono a creare dei collegamenti ipertestuali sulle immagini, in modo però che i diversi collegamenti siano attivi solo in certe zone dell'immagine.

Si pensi, ad esempio, di avere sottomano una cartina dell'Italia, e di voler far sì che l'utente, cliccando sulle diverse regioni, apra la pagina specifica di ogni regione. Questo ora come ora non lo possiamo fare: al massimo possiamo usare un tag <a href="... sull'intera cartina, ma non su ciascuna regione!


Esempio di utilizzo di una image map: le diverse città della Toscana sono cliccabili e rimandano ciascuna ad una pagina diversa. nota: esempio tratto dal Quaderno di informatica di Mattia del Molino; utilizzato nel rispetto della licenza CC BY

Non vedremo esempi di codice delle mappe cliccabili, perchè si tratta di elementi utilizzati molto raramente, e perdipiù la sintassi necessaria per descriverli non è delle più semplici.

Chi fosse comunque interessato può fare riferimento a questi link:

Frames

I frame (frame in inglese significa "cornice") sono una struttura particolare, che serve a visualizzare tante pagine HTML diverse nella stessa finestra del browser, suddividendo quest'ultima in diversi riquadri indipendenti. La seguente immagine può aiutare a capire meglio cosa si intende parlando di frame:


Questa pagina è suddivisa in tre frame. Notare che ciascuna sezione è una pagina HTML completa e indipendente dalle altre, e dispone addirittura delle proprie barre di scorrimento. nota: fonte sconosciuta, in ogni caso fuori dalla licenza Creative Commons di RePNI.

Una pagina con i frame funziona proprio in questo modo: suddivide lo schermo in un certo numero di riquadri, ed in ciascuno di essi carica altre pagine HTML.

Non vedremo esempi di codice per i frameset (pagine con frame), sia perchè si tratta di una tecnologia sempre meno usata su Internet, sia perchè non è prevista dalla versione di HTML che stiamo studiando (sì, esistono diverse versioni del linguaggio HTML, ma ne parleremo meglio nell'ultimo capitolo...).

Chi fosse comunque interessato all'argomento può fare riferimento a questi link:

Form

Se i frame ormai stanno passando di moda, attualissimo è il prossimo costrutto che andremo a "curiosare": i form.

Form in italiano significa "modulo"; nella nostra esperienza siamo abituati ad avere a che fare con parecchi moduli cartacei, come ad esempio la richiesta annuale per l'abbonamento ai mezzi pubblici, le giustificazioni per le assenze a scuola, e via dicendo. Un modulo quindi è uno spazio da compilare, inserendo i dati richiesti (nome, cognome, giorno dell'assenza, firma del genitore, etc.) negli appositi spazi.

Tutto questo esiste anche in versione elettronica; Internet è ricca di esempi: compiliamo form quando creiamo un indirizzo email, quando ci registriamo a un forum, o quando firmiamo una petizione. I form sono elementi molto importanti, perchè permettono all'utente di interagire con la pagina web, inserendo contenuti personali oltre che semplicemente guardare le pagine.

Per descrivere i form si usa naturalmente il linguaggio HTML; un semplice form HTML può apparire così:

Un semplice form HTML, con relativo codice sorgente
Un semplice form HTML. Notare i diversi tipi di elementi presenti, che vanno dalle caselle da spuntare agli spazi in cui inserire testo libero.

Non entreremo nel dettaglio della sintassi dei form, un po' perchè quest'ultima è piuttosto articolata, ma soprattutto perchè un form da solo non serve a niente. Facciamo un esempio cartaceo per chiarire la situazione: quando la mattina "non suona la sveglia" (sì, va beh...) ed entro a scuola con oltre mezz'ora di ritardo, prima di entrare devo compilare un modulo scrivendo nome, cognome, motivazione del ritardo etc. Questo modulo andrà poi consegnato in segreteria, dove qualche impiegato lo leggerà, inserirà i dati sul computer, e magari avviserà pure i genitori del mio ritardo. Un modulo in HTML è come il foglietto compilato all'ingresso: nel momento in cui viene schiacciato il pulsante di invio, esso viene consegnato, ma tutta la parte successiva (nel nostro esempio, il lavoro della segreteria) non riguarda l'HTML, ma altri sistemi nascosti nei meandri del web. Il destinatario di un modulo HTML spesso è un programma informatico, che riceve i dati e svolge i compiti definiti dal programmatore. Per svolgere questi compiti esistono appositi linguaggi, tra i più famosi ricordiamo PHP (Open source) e ASP (Microsoft).

La morale della storia è che avrebbe poco senso imparare a disegnare i form in HTML, se poi non sappiamo costruire un programma destinatario che ne gestisca i contenuti.

Chi volesse comunque approfondire l'argomento può prendere spunto dall'esempio riportato nell'immagine, o fare riferimento ai seguenti siti web:

Verso i CSS: i tag span e div

Concludiamo questa nostra carrellata di costrutti e funzionalità con due tag "misteriosi": span e div.

Dico misteriosi perchè il loro uso non sembra sortire alcun effetto:

Tag div e span
L'uso dei tag div e span nell'HTML sembra non produrre alcun risultato, a parte l'andare a capo del testo tra una riga e l'altra.

Invece si tratta di due tag molto importanti, tra i più usati nel moderno web. E perchè mai? Perchè sono gli elementi chiave, su cui si poggia il disegno delle pagine con i CSS.

  • Il tag div (il nome sta per division) indica una sezione del documento. Un div è una "scatola" dentro la quale mettere qualsiasi genere di contenuto.
  • Il tag span (che in questo contesto possiamo tradurre con spanna) serve a racchiudere porzioni di testo.

Si tratta quindi di due tag completamente logici, ovvero privi di un particolare aspetto. L'aspetto però può essere definito a piacere utilizzando i fogli di stile CSS:

Lo stesso HTML della figura precedente, con un foglio di stile associato
Il codice HTML è identico a quello dell'esempio precedente, ma stavolta un foglio di stile regola l'aspetto di span e div.

Ovviamente non ci addentreremo nella sintassi dei CSS: per approfondire l'argomento servirà una guida apposita, che con un po' di fortuna vedremo un giorno su queste pagine.

In breve...

  • Oltre a quelli che abbiamo già visto, HTML comprende alcuni altri tag e costrutti, che non andremo ad analizzare nel dettaglio.
  • Una mappa cliccabile è un'evoluzione dei collegamenti ipertestuali sulle immagini: ciascuna zona dell'immagine può essere collegata ad una diversa pagina web.
  • Utilizzando i frame una pagina HTML può essere suddivisa in tanti riquadri indipendenti; in ciascuno di essi sarà caricata una diversa pagina web.
  • Una pagina web può essere usata anche per trasmettere attraverso Internet dati inseriti dall'utente che visualizza la pagina. Per fare questo si inserisce un modulo (form) nella pagina.
    • I moduli sono fatti per trasmettere i dati ad appositi programmi informatici in grado di riceverli. Per chi volesse imparare a costruire questo tipo di programmi, un buon inizio potrebbe essere seguire una guida sul linguaggio PHP.
  • In HTML esistono altri due tag, span e div, che usati da soli sembrano "invisibili", ma che si rivelano indispensabili quando si usano i fogli di stile per definire l'aspetto della pagina.

E con questo capitolo abbiamo esaurito gli argomenti da trattare: complimenti, ora conosci l'HTML! Nel prossimo capitolo vedremo come pubblicare un piccolo sito Internet, registrandoci ad uno dei più famosi servizi gratuiti di Hosting italiano.

Ok, in realtà forse qualche altra cosa potremmo ancora dirla, qualche tag semi-sconosciuto l'abbiamo saltato, qualche dettaglio non l'abbiamo approfondito, ma di certo quanto scritto in questa guida è tutto quello che serve per scrivere del buon HTML, pronto per essere abbellito con i CSS.

E se qualcuno avesse dubbi o curiosità, non esiti a fare uso delle apposite pagine dei commenti, e per il resto... Google è nostro amico, e magari anche tra i link in bibliografia si trova qualcosa di interessante!

  1. Introduzione
  2. La prima pagina web
  3. Formattare il testo (1)
  4. Formattare il testo (2)
  5. Elenchi
  6. Immagini
  7. Immagini per il Web
  8. Collegamenti ipertestuali
  9. Tabelle
  10. Altri tag