Category Archives: HTML

Formattazione delle tabelle

Attributi di TABLE

  • align, left/center/right, posizione della tabella nella pagina
  • bgcolor, colore dello sfondo
  • border, spessore della cornice in pixel
  • cellpadding, spazio all’interno delle celle in pixel
  • cellspacing, spazio tra le celle in pixel
  • width, larghezza della tabella in pixel o in percentuale

Attributi di TR, per tutte le celle all’interno di una riga

  • align, left/center/right/justify, allineamento orizzontale del contenuto
  • bgcolor, colore di sfondo
  • height, altezza in pixel
  • valign, top/middle/bottom, allineamento verticale del contenuto

Attributi di TD / TH

  • align, left/center/right/justify, allineamento orizzontale del contenuto
  • bgcolor, colore di sfondo
  • colspan, vedi…
  • rowspan, vedi…
  • valign, top/middle/bottom, allineamento verticale del contenuto
  • width, larghezza in pixel o in percentuale

Gli attributi compaiono nei tag dove hanno senso

TABLE TR TD / TH
align *** ** *
bgcolor *** ** *
border ***
celllpadding ***
cellspacing ***
colspan *
height **
rowspan *
valign ** *
width *** *

Prova delle combinazioni di

  • bgcolor
    • colore della tabella
    • di una riga
    • di una cella
  • cellspacing, cellpadding
    • (0,0)
    • (0,10)
    • (10,0)
    • (10,10)
  • align, valign
    • I contenuti lontani dalla cella centrale
      top
      left
      top
      center
      top
      right
      middle
      left
      middle
      center
      middle
      right
      bottom
      left
      bottom
      center
      bottom
      right
    • I contenuti vicini alla cella centrale
      bottom
      right
      bottom
      center
      bottom
      left
      middle
      right
      middle
      center
      middle
      left
      top
      right
      top
      center
      top
      left

Struttura delle tabelle

Informazioni organizzate per righe e colonne

cella 1.1 cella 1.2
cella 2.1 cella 2.2

Tag

  • TABLE, contenitore di righe
  • TR, table row, contenitore di celle
  • TD, table data, contenitore di un’informazione
  • TH, table header, contenitore di un’intestazione


Intestazione 1 Intestazione 2
cella 1.1 cella 1.2
cella 2.1 cella 2.2

Il contenuto della cella TH viene formattato in grassetto con allineamento al centro

IFRAME

Inline Frame

IFRAME permette di caricare una pagina in un’area rettangolare che può essere manipolata (bordo, posizione, dimensioni, …) come un’immagine

Attributi

  1. align, allineamento rispetto al contenuto della pagina
    • left, center, right
    • top, middle, bottom
  2. frameborder, bordo

    • frameborder=”0″
    • frameborder=”1″
  3. height, altezza del frame
  4. marginwidth, spazio in orizzontale
  5. marginheight, spazio in verticale
  6. src, URL della risorsa da caricare
  7. width, larghezza del frame
    • width=”100%”, tutto lo spazio disponibile

Colori

Le pagine HTML tramite il colore possono essere rese più leggibili e piacevoli.

I tag e gli attributi coinvolti sono

  • BODY: alink bgcolor link text vlink
  • FONT HR: color
  • TABLE TD TH TR: bgcolor

Lo stesso colore può essere specificato in diversi modi

  • nome: black, blue, green, red, yellow, white, …
  • RGB (6 cifre): #000000, #0000FF, #00FF00, #FF0000, #FFFF00, #FFFFFF, …
  • RGB (3 cifre): #000, #00F, #0F0, #F00, #FF0, #FFF, …

Colori sicuri

Sono detti colori sicuri quelle sfumature di colore rappresentate allo stesso modo da qualsiasi browser.

In passato i browser presentavano differenze marcate anche con i colori di base ma negli anni si è passati da 8 a 16, 216, … colori sicuri.


Gli 8 colori sicurissimi

I codici colore utilizzati sono solo due: 00 e FF

#000000 black
#0000FF blue
#00FF00 lime
#00FFFF aqua
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
#FFFFFF white

Prova…

00 FF Red
00 FF Green
00 FF Blue


I 16 colori molto sicuri…

I codici colore utilizzati sono: 00, 80, C0, FF.

#000000 black
#000080 navy
#0000FF blue
#008000 green
#008080 teal
#00FF00 lime
#00FFFF aqua
#800000 maroon
#800080 purple
#808000 olive
#808080 gray
#C0C0C0 silver
#FF0000 red
#FF00FF fuchsia
#FFFF00 yellow
#FFFFFF white

I 216 colori sicuri…

Per avere una scelta ancora maggiore si consiglia di utilizzare al più le sei costanti 00, 33, 66, 99, CC e FF

Prova…

Red
Green
Blue


Osserva

  1. si ha una scelta di 6*6*6=216 colori...
  2. è più intuitivo raggiungere il colore desiderato
  3. si possono abbreviare come terna esadecimale (es. #FF3366 --> #F36)
  4. sono di facile memorizzazione.

Vedi la tabella corrispondente
I colori sono in ordine crescente di codice numerico.
Il codice RGB appare al passaggio del mouse su ciascuna cella.


Tutti i colori

Si assegnano 6 cifre esadecimali e si ottiene il codice, #RRGGBB, da utilizzare nelle pagine HTML.

Prova...

Red
Green
Blue


Osserva

  1. Le cifre in base 16 sono: 0 1 2 3 4 5 6 7 8 9 A B C D E F
  2. In ogni coppia di cifre la prima cifra pesa più della seconda…
  3. Il codice per ogni componente del colore va da 00 a FF (da 0 a 255)
  4. Le combinazioni totali sono 16*16*16*16*16*16 = 256*256*256 = 224 (più di 16 milioni).

Se vuoi sperimentare...

Campo Image

Da revisionare

Il pulsante submit può essere sostituito da un’immagine che svolgerà lo stesso ruolo

con src il file dell’immagine
Esempio

Target

Se a un frame si da un nome, name, allora sarà possibile aprire le pagine web all’interno di esso tramite l’attributo target

La pagina sinistra1.htm contiene dei link con specificato il frame destra come target.

Si possono specificare due frame…

e indirizzarli selettivamente

Se il frame di destinazione è sempre lo stesso è possibile specificarlo una sola volta nella pagina di sinistra con il tag BASE

Gli attributi di BASE sono

href riferimento assoluto
target frame di destinazione

Come bersagli si possono usare anche alcuni predefiniti

_self la stessa pagina…
_parent il frame di livello superiore
_top la stessa finestra ma senza alcun frame
_blank una nuova finestra del browser

Esempio

Tutti i link della pagina sono sezioni dello stesso sito e saranno aperti in una nuova istanza del browser

FRAME

Il tag FRAME indica una delle pagine all’interno del FRAMESET.

Gli attributi sono

name nome
src pagina sorgente
frameborder 1/0
marginwidth
marginheight
spazio libero sui quattro lati
noresize
scrolling yes/no

Esempio 1

Leggere contemporaneamente due quotidiani…

Esempio 2

Funzionalità personalizzate

FRAMESET

Obsoleto per HTML5

La sezione FRAMESET sostituisce la sezione BODY di una pagina normale.
È un contenitore per più pagine, FRAME, affiancate in orizzontale o verticale.
Annidando più sezioni FRAMESET si possono realizzare strutture molto complesse…

Gli attributi sono

cols proprietà colonne
rows proprietà righe

Esempio 1

Due frame vuoti in orizzontale

Due frame con dimensione libera

Esempio 2

Tre frame vuoti in verticale

Esempio 3

Con le dimensioni in percentuale e in pixel

Ridimensionando la finestra il primo frame rimane fisso a 50 px e il terzo è ridimensionato in modo da occupare il 25% dello spazio disponibile, il resto rimane al frame centrale la cui dimensione non è specificata

Esempio 4

Nove frame!

Modulo REGISTRAZIONE

Un modulo di registrazione per un servizio del web (forum, chat, …) richiede l’inserimento di

  • alcuni dati anagrafici
  • i dati personali per gli accessi successivi
DATI ANAGRAFICI

Cognome

Nome

SESSO

Maschio
Femmina

INDIRIZZO

Via num.

CAP Città

Provincia

DATI DI IDENTIFICAZIONE

Scegli le informazioni personali per l’accesso all’area riservata

Nome utente

Password riscrivi…

Completa la registrazione:

Sono presenti gruppi di campi, etichette, stili, una tabella…

Campo Hidden

Variabili nascoste

Si comportano come le variabili dei linguaggi di programmazione: sono dei contenitori per dati che passano da un modulo al successivo senza che l’utente se ne accorga…

Esempi…