Home

Ipertesto vero e proprio

La prima cosa che ci verrà voglia di utilizzare nel nostro documento sono i link; la sintassi per legare un parola (od una frase) ad un indirizzo (HTTP, FTP, GOPHER, MAIL, ecc.) è questa:

<a href="http://www.disney.com">Disney</a>

...che darà questo risultato:
Disney

Ricordiamo brevemente quello che avviene al click sulla parola sottolineata. Il navigatore (detto anche browser o agent) invia al server un richiesta tramite il comando di HTTP denominato GET: viene passato anche l'URL della risorsa richiesta e il browser apre una sessione di collegamento con il server in attesa di una qualsiasi risposta del server. Se tale risposta non arriva (ad esempio perché il server è fuori servizio) il browser stesso genererà una eccezione che interromperà l'invio di GET e avvertirà l'utente attraverso una finestra di allarme.
In tutti gli altri casi sarà il server a fornire una risposta al client attraverso l'invio di un set completo di header HTTP (che descrivono ad esempio il tipo di documento inviato) e le informazioni che potranno essere o relative ad un problema che si è verificato nel server (ad esempio URL inesistente) o il documento richiesto.

Esercizio 1: Costruire una pagina html che contenga questi tre link:

Esercizio 2: Costruire una pagina html che contenga un link che permette di spedire posta elettronica al proprio indirizzo.

Il riferimento (HREF) può essere verso qualsiasi tipo di indirizzo raggiungibile col browser, verso qualsiasi URL anche non http; come visto nell'esercizio precedente, si possono fare chiamate utilizzando protocolli gopher, mail o telnet. Nel caso in cui il browser non supporti il tipo di file linkato o non esistano visualizzatori per quel tipo di file il browser chiede come gestirlo, offrendo la possibilità di salvarlo sul disco.
Oltre che verso documenti esterni si possono definire dei documenti interni (utili in caso di pagine di ampie dimensioni contenenti più argomenti); per definire dei link interni bisogna compiere due operazioni, la prima consiste di definire il target (cioè il punto di arrivo del link):

<A NAME = "demo_target">questo è il target</A>

e quindi definire il link con il solito HREF secondo questa modalità:

<A HREF = "#demo_target">link verso un target interno</A>

Bisogna ricordarsi di utilizzare il simbolo # nell'HREF verso un target, inoltre i target possono essere sfruttati anche se usiamo un HREF da un documento esterno <A HREF ="http://nomeserver/nomefile.html#target ">...</A>.

Esercizio 3: costruire una pagina HTML con tre link che puntano a tre terzine diverse della Divina Commedia.

Liste e Menu

Per organizzare al meglio le informazioni e renderle più comprensibili all'utente vengono utilizzate le liste (o i menu); HTML 3 ne mette a disposizione cinque: liste non ordinate, liste ordinate, menu, Directory list e liste di definizione.

Per capirne le differenze e l'utilizzo si possono vedere i seguenti esempi relativi ad ogni tipo di lista:

Lista non ordinata <UL> (Unordered List)

La sintassi per crearla è questa:

<ul type="square"> <li>Primo elemento </li> <li>Secondo elemento </li> </ul>

Dove TYPE definisce il tipo di bullet da utilizzare (Disc - default - , Circle, Square); ogni elemento della lista dev'essere preceduto dal tag <LI> (List Item).

Lista ordinata <OL> (Ordered List)

  1. Primo elemento
  2. Secondo elemento

Con questa sintassi:

<ol type="1" start="1"> <li>Primo elemento </li> <li>Secondo elemento </li> </ol>

L'attributo type ha i seguenti valori:

Nota Bene: questo attributo è case-sensitive (non è indifferente al fatto che usiamo maiuscole o minuscole).

START è il numero di partenza. Si esprime sempre con un numero.

Esercizio 4: Enumerare una serie di case automobilistiche utilizzandola lista non ordinata e il simbolo di indicazione "quadratino"

Esercizio 5: Enumerare i quattro punti cardinali, utilizzando numerazione araba e poi romana minuscola cominciando da 3.

Esercizio 6 (Liste composite): scrivere la lista dei primi cinque compagni della vostra classe e per ciascuno di questi descrivetene sommariamente l'aspetto (colore dei capelli, degli occhi, altezza ed elenco degli hobby in una lista innestata).
Specifica: la lista dei compagni va numerata, le caratteristiche puntate con un circoletto e l'elenco degli hobby numerata con lettere minuscole.

Menu <MENU>

Questo tag, come anche il tag seguente, è sconsigliato (deprecated) dalla versione 4.01 di HTML. L'aspetto risultante è quello di una lista non ordinata.
  • Primo elemento
  • Secondo elemento

    • La sintassi e questa:

    <menu> <li>Primo elemento </li> <li>Secondo elemento </li> </menu>

    Con i List item come al solito.

    Directory List <DIR>

  • Primo elemento
  • Secondo elemento

    • Questa volta i List item sono racchiusi nei contrassegni <DIR> e </DIR>:

    <dir> <li>Primo elemento </li> <li>Secondo elemento </li> </dir>

    Lista di definizioni <DL> (Definition List)

    La Definition List si presenta così:

    Baricentro di un triangolo
    intersezione delle mediane
    Circocentro di un triangolo
    intersezione degli assi

    La sintassi per le definition list è questa:

    <dl> <dt>Baricentro di un triangolo</dt> <dd>intersezione delle mediane</dd> <dt>Circocentro di un triangolo</dt> <dd>intersezione degli assi</dd> </dl>

    I termini di definizione sono contrassegnati con il tag <DT> (Definition Term) e le descrizioni delle definizioni con <DD> (Definition Description).

    Esercizio 7: Costruire una lista di definizioni di termini tecnici inerenti la vostra attività professionale o il vostro hobby.

    Home

    Copyright @ 2000-2017 Marco Barbato htttp://www.betaingegneria.it

    Licenza Creative Commons
    Quest'opera è distribuita con Licenza Creative Commons Attribuzione - Condividi allo stesso modo 4.0 Internazionale.