Fondamenti di programmazione

Corso php a cura del prof. Pietro De Paolis

Font e tabelle

Vediamo ora di curare un pò la parte grafica del nostro programma. Sappiamo che esistono in giro dei programmi di grafica. Noi possiamo fare, anzi, dobbiamo fare delle scelte. La grafica richiede oltre che una certa quantità di memoria anche dei file piuttosto lunghi. Ma ricordiamo che lavoriamo su Internet dove il tempo è denaro. Vediamo spesso dei siti curati molto graficamente a danno della leggibilità e della chiarezza. Sappiamo che il tempo è denaro; nel senso che il tempo dedicato alla grafica è tempo sottratto alle altre caratteristiche del programma.

Qui non voglio influenzare le scelte degli altri. Io personalmente, dal mio punto di vista, se ho un'ora di tempo preferisco dedicarla alle caratteristiche funzionali del programma piuttosto che a curare gli aspetti grafici.

Tuttavia, un minimo di cura delle veste grafica, col fine di rendere il programma più leggibile all'utente, è necessario. Tratteremo solo di questo minimo di grafica che diciamo funzionale alla chiarezza del programma.

Se eseguiamo stipendio6.php abbiamo visto che otteniamo:

Notiamo che ci sono solo due menu a tendina e ci servono degli altri da inserire. In questa lezione impareremo ad usare i vari tipi di carattere e le tabelle.

I font

Nella normale scrittura noi abbiamo diversi tipi di carattere con cui scriviamo; ma vediamo un pò di termini tecnici. In italiano la parola font sta a significare il tipo di carattere che usiamo, cioè la sua conformazione.

Esempio

La parola stipendio la posso scrivere in diversi modi, cioè con diversi font:

Una volta scelto il font, cioè il modo in cui viene scritto il carattere, cioè la sua forma, possiamo cambiare la dimensione del carattere, detta anche corpo del carattere; il corpo o la dimensione si misura in punti; ma possiamo anche usare dei numeri che vanno da 1 a 6:

Scelto il font e la dimensione possiamo anche cambiare il colore:

Non possiamo fare tutti i comandi da dare per cambiare il colore o il font o la dimensione, ma facciamo solo alcuni. Intanto diciamo che il carattere lo gestiamo con l'html. Quindi vediamo i comandi da dare in html.

<font>        da qui inizia il cambio di font, o della dimensione o del colore.

</font>     qui finisce l'ultimo comando di font dato.

Se vogliamo cambiare la forma del carattere cioè quello che in italiano diciamo font, dobbiamo utilizzare il comando face.

Esempio

<font face="Verdana">

oppure:

<font face="Courier">

Per cambiare la dimensione usiamo size.

Esempio

<font size="2">

<font size="5">

Infine, per cambiare il colore usiamo color.

Esempio

<font color ="#000000">

<font color"#0000FF">

<font color"#FF0000">

Il comando font può essere multiplo e vale sino a quando non si cambia con </font>.

Esempio

<font face="Verdana" size="4" color="#0000FF">

da questo punto in poi il carattere avrà font = Verdana; dimensione = 4; colore = blu.

Le parole da scrivere vanno messe dopo il segno di > e poi si termine con </font>.

Esempio

<font face="Verdana" size="4" color=" #0000FF">stipendio</font>

scrive la parola stipendio con font, dimensione e colore scelti. Se non specifichiamo il colore viene sempre usato il nero.

Modifichiamo ora il listato di stipendio6.php aggiungendo il comando font; otteniamo modificando solo le prime righe e lasciando il resto inalterato:

salviamolo come stipendio6.php ed eseguiamolo; otteniamo:

Notiamo il cambio delle dimensioni e del colore.

Tabelle

Le tabelle noi le usiamo per disporre nella posizione opportuna di una pagina sia le immagini, sia il testo sia i menu a discesa, sia le caselle di testo. In pratica si creano tante celle sulla pagina, celle che possono essere anche non visibili all'utente, e all'interno della cella voluta si posiziona quello che si vuole.

Le tabelle le costruiamo in html. Il comando è:

<table>   qui inizia la tabella.

</table>   qui finisce la tabella.

La larghezza della tabella può essere fissata sia in pixel, cioè numero di punti sullo schermo, sia in percentuale. Se la fissiamo in pixel la sua larghezza è fissa; se la fissiamo in % la sua larghezza è variabile in base al tipo di schermo utilizzato; cioè la tabella si adatta alla pagina che vede l'utente. Per cui noi preferiamo definire la larghezza in %.

Esempio

<table width="100%"> adatta la larghezza della tabella al 100% in orizzontale dello schermo.

Se vogliamo che la tabella non sia visibile non disegnamo il bordo; se invece vogliamo che sia visibile mettiamo un bordo diverso da zero, per esempio:

<table border="1"> indica che il bordo della tabella, cioè il contorno delle celle, deve essere uguale a 1.

I comandi, però, li mettiamo tutti insieme all'inizio della tabella; cioè:

<table border="1" width="100%">

e poi alla fine mettiano il fine tabella:

</table>.

Ora dobbiamo decidere le righe della tabella; ogni riga viene disegnata con il comando:

<tr>     qui inizia una riga.

</tr>   qui finisce una riga.

Non basta; all'interno di sciacuna riga dobbiamo dire quante colonne ci sono con il comando:

<td>     qui inizia una colonna.

</td>    qui finisce una colonna.

Vediamo una tabella con una riga e due colonne:

<table border="1" widht="100%">

<tr> 

<td></td>

<td></td>

</tr>

</table>

Otteniamo:

Volendo tre colonne scriviamo:

<table border="1" width="100%">

<tr>

<td></td>

<td></td>

<td></td>

</tr>

</table>

ed otteniamo:

Volendo due righe aggiungiamo un <tr>

quindi scriviamo:

<table border="1" width="100%">

<tr>

<td></td>

<td></td>

<td></td>

</tr>

<tr><td></td> <td></td><td></td></tr>

</table>

ed otteniamo:

una tabella con due righe e tre colonne.

Vediamo ora come modificare il nostro programma  stipendio6.php inserendo le tabelle.

Il listato era:

Ora inseriamo i due comandi <select> che disegnavano i due menu a discesa in una tabella; il listato diventa il seguente:

Eseguendo stipendio6.php  otteniamo:

Inseriamo ora una seconda riga in modo da ottenere migliore chiarezza per l'utente nel seguente modo:

Eseguiamo stipendio6.php ed otteniamo:

Corso di programmazione in PHP

Dizionario php

prof. Pietro De Paolis

Scuola Elettrica

Altre applicazioni

Mappa per tipo di scuola

Indice di tutte le pagine del sito

Guida per navigare

Richiesta informazioni