Indice:
il tag <a> (Ancora) può assumere due significati a seconda se è presente l'attributo name o l'attributo href
Link
Specificando l'attributo href si definisce un collegamento ad una pagina residente su un sito
esterno (http://www.frapec.it), pppure un riferimento ad una pagina che si trova sullo stesso sito (indice.htm).
In quest'ultimo caso potrebbe essere necessario specificare il percorso completo.
Il testo compreso tra il tag di apertura e il tag di chiusura (</a>) rappresenta il collegamento ipertestuale.
Esempi:
un indirizzo per chi vuole <a href="http://www.frapec.it">studiare</a>
vai alla pagina <a href="indice.htm">iniziale</a>
Segnalibro
specificando l'attributo name si definisce un segnalibro nella pagina.
Per raggiungerlo bisogna assegnare alla proprietà href il nome del segnalibro preceduto dal carattere #.
Esempio:
Nel punto in cui si vuole inserire il segnalibro:
Per raggiungerlo dalla stessa pagina:
<a href="#classifica">vai</a>se invece ci si trova in un'altra pagina bisogna assegnare ad href il nome della pagina seguito dal segnalibro.
Esempio:
<a href="indice.htm#classifica">vai</a>Un altro metodo per inserire un segnalibro in una pagina consiste nell'usare l'attributo ID. Esempio:
si assegni un ID al tag p:
<p id="torna">Per inserire il collegamento al segnalibro:
<a href="#torna">vai a inizio</a>In un Link della forma:
<a href="indice.htm" target="finestra">l'attributo target specifica il nome di una finestra o di un frame.
La pagina indice.htm viene aperta in una finestra o in un frame che possiede la proprietà name="finestra"
All'attributo target si possono assegnare valori speciali:
L'uso dell'attributo target, per aprire una pagina in una nuova finestra, deve essere limitato alle sole occasioni veramente necessarie. Infatti, se il lettore intende aprire un collegamento in una nuova scheda o in una nuova finestra, lo può fare autonomamente. Ritrovarsi con molte finestre aperte potrebbe disorientare il lettore. Inoltre aprendo una pagina in una nuova finestra il pulsate Indietro, sulla barra del browser, non ha più effetto.
L'uso appropriato dell'attributo target avviene quando una pagina è organizzata in frame.
In un link della forma:
<a href="indice.htm" title="torna">
l'attributo title specifica un commento che compare accanto al link quando il puntatore del mouse viene portato sopra il link.
Il tag (Definition List) <dl> ... <dl> delimita un elenco di definizioni, cioè una serie di termini seguiti dalla descrizione del loro significato,
i termini da definire sono racchiusi tra i tag (Definition Term) <dt> ... </dt>
La descrizione dei termini, invece, è racchiusa tra i tag (Definition Description) <dd> ... </dd>
Esempio:
Documenti da presentare:
<ul type="square">
<li>Carta d'identità</li>
<li>Codice fiscale;</li>
<li>Scheda sanitaria;</li>
</ul>
il browser mostra:
Documenti da presentare:
Possono essere di due tipi:
le linee dell'elenco sono individuate da un segno o da un numero.
Nel seguente esempio le righe dell'elenco non hanno un ordine. L'elenco è detto non ordinato ed è racchiuso tra i tag <ul> ... </ul> (Unordered List).
La proprietà type è utile quando gli elenchi sono nidificati, altrimenti può essere omesso.
Altri valori della proprietà type del tag ul sono:
disc (cerchio pieno),
circle (cerchio),
square (quadrato)
Esempio di elenchi non ordinati nidificati:
Regioni e città d'Italia:
Ogni volta che si apre un nuovo tag ul l'elenco rientra e il segno di inizio riga cambia.
Elenchi ordinati.
Esempio:
Operazioni:
<ol type="A">
<li>Scegliere il menu file</li>
<li>selezionare il comando Salva con nome ...</li>
<li>ecc..;</li>
</ol>
il browser mostra:
Operazioni:
Gli elenchi possono essere contenuti uno nell'altro. La numerazione delle liste interne passa dalla forma (ad esempio) numerica a quella letterale.
Per gli elenchi ordinati, altri valori della proprietà type sono:
a (lettere minuscole),
i (cifre romane),
in assenza di specifiche dell'attributo type si adotta la numerazione con cifre.
Per il tag ol (Ordered List) si può anche specificare l'attributo start, che consente di assegnare il valore iniziale dell'elenco, utile quando l'elenco viene ripreso dopo un'interruzione.
Esempio di elenchi ordinati nidificati:
Ogni volta che si apre un tag ol interno, si assegna type="a"
Con il tag Form si crea una scheda contenente campi per l'immissione di dati, caselle di scelta, pulsanti ecc.
Ogni elemento da inserire sulla scheda deve essere definito con un appropriato tag (come <INPUT>, <SELECT>, ecc.)
Quando l'utente completa i campi usando gli elementi dell'interfaccia, trasmette i dati al server web premendo il pulsante SUBMIT.
Sintassi:
Gli attributi del tag FORM:
Gli elementi sono definiti mediante il tag INPUT. L'attributo TYPE specifica se l'elemento è un pulsante, una casella di testo, ecc.
Fanno eccezione le caselle con apertura a discesa per le quali si usa il tag SELECT e le caselle per inserire testo su più linee per le quali si usa il tag TEXTAREA.
Per permettere l'elaborazione dei dati che l'utente ha inserito nei campi del form, deve essere presente un pulsante con TYPE="SUBMIT". L'azione del pulsante SUBMIT è predefinita: trasmette i dati al programma specificato con l'attributo ACTION del tag FORM.
Prima di trasferire i dati al server conviene effettuare un controllo locale sulla validità dei dati. Infatti è dannoso impegnare il server e la linea di trasmissione per accorgersi che i dati sono errati e richiedere all'utente di rettificare i dati.
Quando si preme il pulsante Submit di un form avente attibuto method=get, i dati contenuti sulla scheda sono trasmessi, dopo l'indirizzo, come una serie di coppie NOME:VALORE.
La parte NOME di ogni coppia è il nome assegnato all'elemento dell'interfaccia con l'attributo NAME, mentre la parte VALORE è il contenuto immesso dall'utente nel campo.
Esempio:
<form method="post" action="elabora.php">L'attributo type specifica il componente da collocare sul modulo. Il valore di type="text" si riferisce ad una casella di testo. Il valore di type="submit" si riferisce al pulsante predefinito che invia i dati al programma che, nell'esempio, si chiama "elabora.php" residente sullo stesso server web.
Esempio:
<form method="post" action="elabora.php">
<input type="text" size="10">
<input type="image" name="submit" src="go.jpg">
</form>
La text area differisce dalla casella di testo
per la possibilità di inserire
righe su
linee separate.
Una TEXTAREA ha la caratteristica di consentire di scrivere un testo che occupa più linee,
cioè ammette l'utilizzo del tasto invio.
Esempio:
Esempio:
Scegli la città
<form method="post" action="elabora.php">
<select>
<option selected>Torino</option>
<option>Firenze</option>
<option>Roma</option>
<option>Palermo</option>
</select>
</form>
Esempio:
indica lo stato civile
<form method="post" action="elabora.php">
<input type="radio" name="stato" checked>Celibe
<input type="radio" name="stato">Coniugato
<input type="radio" name="stato">Separato
</form>
Assegnando lo stesso valore alla proprietà name si crea un gruppo di radio button.
L'utente può selezionare una sola delle opzioni dei pulsanti che appartengono allo stesso gruppo.
Esempio:
indica i tuoi sport preferitiAssegnando lo stesso valore alla proprietà name si crea un gruppo di check button tra i quali si possono scegliere più opzioni.
Il tag Table consente di mostrare informazioni che devono essere rappresentate su Righe diverse e, per ciascuna riga, ogni informazione deve essere elencata sotto un'intestazione di colonna appropriata.
I progettisti di pagine web, hanno usato spesso la tabella per superare una carenza iniziale del linguaggio Html, quella di non consentire il posizionamento diretto di un elemento (immagine, testo, ...) sulla pagina. Questa tecnica si dovrebbe abbandonare a favore dei fogli di stile.
Il tag <table>...</table> contiene altri tag:
Il tag <CAPTION>...</CAPTION> (facoltativo) fornisce la didascalia per la tabella. Quando viene usato deve essere il primo tag dopo <table>
All'interno della tabella si devono specificare le righe mediante il tag Table Row: <TR>...</TR>
tra i tag che definiscono la riga bisogna specificare le celle (e quindi il numero di colonne) mediante i tag Table Data: <TD>...</TD>
il tag table può specificare lo spessore del bordo delle celle mediante l'attributo border.
Per calcolare il numero di righe e di colonne il browser usa i tag tr per riconoscere l'inizio di una riga e il tag td per riconoscere una cella.
È opportuno prestare attenzione che ogni riga contenga sempre lo stesso numero di celle, queste infatti rappresentano il numero di colonne della tabella.
| Cella di riga 1, colonna 1 |
Cella di riga 1, colonna 2 |
| Cella di riga 2, colonna 1 |
Cella di riga 2, colonna 2 |
<table border="1">
<caption>Esempio di tabella</caption>
<tr>
<td>
Cella di riga 1, colonna 1
</td>
<td>
Cella di riga 1, colonna 2
</td>
</tr>
<tr>
<td>
Cella di riga 2, colonna 1
</td>
<td>
Cella di riga 2, colonna 2
</td>
</tr>
</table>
<table
ALIGN="LEFT|RIGHT|CENTER"
BGCOLOR="colore"
BORDER="valore"
CELLPADDING="valore"
CELLSPACING="valore"
HEIGHT="altezza"
WIDTH="larghezza"
COLS="valore"
HSPACE="Margine Orizzontale"
VSPACE="Margine Verticale" >
... descrizione delle celle della tabella ...
</table>
l'attributo ALIGN specifica la posizione orizzontale della tabella. Può assumere i valori:
| 1 | 3 |
| 2 | 4 |
L'attributo BGCOLOR imposta il colore di sfondo della tabella. Il colore può essere ridefinito assegnando un valore all'attributo BGCOLOR nei tag TH , TR o TD.
L'attributo BORDER specifica lo spessore, in pixel, dei bordi della griglia della tabella.
L'attributo CELLPADDING determina i margini interni, in pixel, tra i bordi della cella e il contenuto della cella. Il default è 1.
L'attributo CELLSPACING determina lo spazio di separazione, in pixel, tra le singole celle.
L'attributo WIDTH specifica la larghezza della tabella. Se non viene specificato, la larghezza è decisa dal browser in base al contenuto delle celle. Il valore può essere espresso in percentuale dell'area client del browser.
L'attributo HEIGHT specifica l'altezza della tabella. Il valore può essere espresso in percentuale dell'area client del browser.
L'attributo COLS indica il numero delle colonne iniziali, o di tutta la tabella che devono avere la stessa larghezza.
Definisce la didascalia della tabella. Possiede l'attributo ALIGN al quale si possono assegnare i due valori:
| Inglese | Spagnolo | Tedesco |
|---|---|---|
| one | uno | ein |
| two | dos | zwei |
| three | tres | drei |
Indica l'inizio di una riga della tabella. I possibili attributi sono:
Specifica il contenuto di una cella.
Se una cella è vuota il tag <TD> è seguito immediatamente dal tag </TD>.
I possibili attributi sono:
Esempio. La seguente tabella:
| colspan=2 | ||
| rowspan=2 | 1 | 2 |
| 3 | 4 | |
La tabella di 3 righe x 3 colonne mostrata a lato, con il relativo codice HTML, viene descritta nel seguente modo:
la prima riga contiene solo due celle (ci sono 2 tag <TD>...</TD>), perchè la seconda cella copre due colonne (COLSPAN="2").
Quindi nelle righe sottostanti si devono incontrare 3 celle.
La seconda riga contiene, infatti, 3 celle. Ma la prima cella deve coprire 2 righe (ROWSPAN="2").
Di conseguenza la terza riga della tabella contiene solo 2 celle, perchè una è
occupata dall'espansione della cella della riga superiore.