Category Archives: HTML

Attributi comuni

Alcuni attributi possono essere utilizzati all’interno di tag diversi.

Valori
class “testo” Nome della classe per il foglio di stile
dir
  • “ltr”
  • “rtl”
Direzione del testo
hidden “hidden” Elemento nascosto (non visibile)
id “testo” Tutti gli elementi con id possono essere manipolati tramite
lang “testo” Lingua…
name “nome” Un elemento con nome può essere manipolato tramite
style Specifiche di stile
tabindex “numero” L’ordine nella sequenza di navigazione con il tasto TAB
title “testo” Il suggerimento (tooltip) che appare al passaggio del mouso sull’elemento

Attributi comuni

Alcuni attributi possono essere utilizzati all’interno di tag diversi.
Alcuni attributi comuni sono specifici dei moduli.

Valori Nel tag
autofocus “autofocus” L’elemento riceve il fuoco quando la pagina viene caricata
class “testo” Nome della classe per il foglio di stile
disabled “disabled”
  • BUTTON
  • FIELDESET
  • INPUT
  • OPTGROUP
  • OPTION
  • SELECT
  • TEXTAREA
Il campo disabilitato non viene inviato, non permette l’accesso al valore per copia, incolla, modifica
form “testo” Specifica a quale form appartiene il campo
formaction URL Per un pulsante “submit” è possibile specificare un’URL diverso da quello del form
id “testo” Tutti gli elementi con id possono essere manipolati tramite
readonly “readonly”

 

  • INPUT
  • TEXTAREA
Il valore può essere copiato ma non può essere modificato
style Specifiche di stile
tabindex “numero” L’ordine nella sequenza di navigazione con il tasto TAB

Riepilogo attributi

Un attributo può assumere valori predefiniti, numerici, testuali, … e può comparire in diversi tag

Per esteso Valori Con i tag
align Alignment
  • bottom | middle | top
  • center | justify | left | right
CAPTION DIV H1 H2 H3 H4 H5 H6 HR IMG LI P TABLE TD TR
alink Active link color colore BODY
alt Alternative text testo IMG
background Background immagine BODY
bgcolor Background color colore BODY TABLE TD TH TR
border pixel IMG TABLE
cellpadding pixel TABLE
cellspacing pixel TABLE
class testo
color colore FONT HR
colspan column span numero TD TH
face nome FONT
height pixel IMG (TD TH) TR
href Hypertext reference URL A
hspace Horizontal space pixel IMG
id Identifier testo
link Link color colore BODY
name testo A …
noshade noshade HR
rel Relantionship stylesheet | …
LINK
rowspan numero TD TH
size pixel FONT HR
src Source URL IMG SCRIPT
start valore OL
style testo
target
  • testo
  • _blank | _parent | _self | _top
A
text Text color colore BODY
title testo ABBR ACRONYM IMG …
type
  • circle | disc | square
  • 1 A|a I|i
  • application/javascript
  • text/css | text/html | text/plain | text/tcl | text/vbscript | text/xml
LINK OL UL SCRIPT
valign Vertical alignment bottom middle top TD TH TR
value numero LI (OL)
vlink Visited link color colore BODY
vspace Vertical space pixel IMG
width pixel | percentuale HR IMG TABLE TD

Un valore costante può comparire in diversi attributi…

Per esteso Con gli attributi Con i tag
colore alink | bgcolor | color | link | text | vlink BODY HR TABLE TD TH TR
numero border | cellpadding | cellspacing | colspan | height | hspace | rowspan | size | start | value | vspace | width HR IMG LI OL TABLE TD TH TR
percentuale height | width HR IMG TABLE TD TH TR
testo alt | id | name | title IMG …
URL href | src A IMG LINK
1 numeric… type OL
A | a
alphabetic… type OL
application/javascript type SCRIPT
bottom align | valign IMG TD TH TR
center align DIV P H1… TABLE TD TH TR
circle type UL
disc type UL
I | i
italian? type OL
justify align DIV P H… TD TH TR
middle align | valign IMG TD TH TR
right align DIV IMG TABLE TD TH TR
square type UL
stylesheet rel LINK
text/css text/html
text/plain text/tcl
text/vbscript text/xml
type LINK
top align | valign IMG TD TH TR

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.


Consulta Color Tutorial di w3schools.


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