HTML 4.01 XHTML 1.0 Il linguaggio dei siti web
annuncio pubblicitario
Dott.Ing.Ivan Ferrazzi
HTML 4.01
XHTML 1.0
Il linguaggio dei siti web
Autore: Dott.Ing. Ivan Ferrazzi
V1.2 del 04/09/2013
(c)2013 Ferrazzi s.a.s.
http://www.ferrazzi.info
1/37
Dott.Ing.Ivan Ferrazzi
Copyright ©2013 Dott.Ing. Ivan Ferrazzi
Permission is granted to copy, distribute and/or modify this
document under the terms of the GNU Free Documentation
License, Version 1.2 or any later version published by the
Free Software Foundation; with no Invariant Sections, no
Front-Cover Texts, and no Back-Cover Texts.
2/37
Dott.Ing.Ivan Ferrazzi
Indice generale
Introduzione.........................................................................................................4
HTML....................................................................................................................5
XHTML..............................................................................................................6
I tag e gli attributi............................................................................................6
I commenti.......................................................................................................7
I tag di struttura..................................................................................................9
Il tag <html>...</html>..................................................................................9
Il tag <head>...</head>...............................................................................10
Il tag <body>...</body>...............................................................................10
Tipi di tag...........................................................................................................14
Tag a blocco...................................................................................................14
Tag in linea....................................................................................................14
Tag a blocco in linea......................................................................................14
Tag per i testi....................................................................................................15
I tag per definire i titoli..................................................................................15
Il tag per tipo , dimensione e colore del carattere.........................................15
Lo stile dei testi.............................................................................................16
I paragrafi......................................................................................................17
Interruzione di riga........................................................................................17
Il tag per definire i link (le ancore).................................................................18
Le linee divisorie............................................................................................18
Le tabelle...........................................................................................................20
Le immagini.......................................................................................................25
Gli elenchi..........................................................................................................27
Tag per moduli da compilare.............................................................................29
Il
Il
Il
Il
Il
tag
tag
tag
tag
tag
<input />................................................................................................................. 30
<lable>...</lable>................................................................................................... 31
<fieldset>...</fieldset>........................................................................................... 31
<textarea>...</textarea>.......................................................................................32
<select>...</select>............................................................................................... 32
I frame...............................................................................................................34
Validare il codice...............................................................................................36
3/37
Dott.Ing.Ivan Ferrazzi
Introduzione.
Internet è divenuto ormai il canale di comunicazione per eccellenza. L'Internet
ci permette di trasportare in tempo reale testi, voce e video da una parte
all'altra del mondo. Una parte dell'Internet che permette di trasferire
informazioni di ogni genere mediante il protocollo HTTP è il World Wide Web
(WWW).
Il software necessario sul nostro computer per poter usufruire di questo servizio
è il web browser, oppure comunemente chiamato browser. Alcunti dei browser
più conosciuti sono MS Internet Explorer, Mozilla Firefox, Opera.
Le informazioni vengono trasmesse attraverso il WWW utilizzando il linguaggio
HTML (Hyper Text Markup Language) che poi viene interpretato dal relativo
browser che ripropone i contenuto del giusto formato.
4/37
Dott.Ing.Ivan Ferrazzi
HTML
HTML (Hypertext Markup Language) è un linguaggio con il quale si può definire
l'aspetto delle pagine Web. Possiamo definire come disporre le immagini, come
formattare ed allineare il testo, effettuare collegamenti tra varie pagine Web,
ecc. utilizzando dei marcatori, chiamati “tag”. Quello che invece non possiamo
fare è modificare il flusso di elaborazione durante l'interpretazione, come viene
fatto con tutti i normali linguaggi di programmazione. Proprio per questo
motivo HTML non può essere classificato un linguaggio di programmazione.
Un file HTML può essere creato con un qualsiasi editor testuale che permetta il
salvataggio del solo testo, senza quindi aggiunta di formattazione. L'estensione
utilizzata per un file HTML è .html oppure .htm.
Un nome di dominio (es. www.miodominio.it) fa riferimento ad uno spazio Web
che deve contenere (parlando di sole pagine HTML) la pagina index.html,
oppure index.htm per funzionare in maniera corretta. Una volta creato il file
HTML viene quindi trasmesso o copiato sul server Web da dove può essere
scaricato utilizzando un browser (programma per la navigazione su Internet). E'
poi compito del browser interpretare il linguaggio HTML presente all'interno del
relativo file scaricato e visualizzare la pagina Web in maniera corretta. Lo
stesso codice può, infatti, essere interpretato differentemente da vari browser
(tipo Internet Explorer, oppure Mozilla Firefox) che può quindi portare a risultati
diversi. E' quindi consigliabile effettuare dei test su più browser prima di
pubblicare le pagine create.
L'organizzazione che si occupa di standardizzare il linguaggio HTML è il W3C,
ossia World Wide Web Consortium. L'ultima versione rilasciata da questa
organizzazione è HTML 4.01 ed è quella che tratteremo in questa
documentazione.
5/37
Dott.Ing.Ivan Ferrazzi
XHTML
XHTML (Extensible Hypertext Markup Language) è identico a HTML 4.01, infatti,
utilizza le definizioni di HTML come applicazione XML. Le direttive di XHTML
definiscono che:
●
●
●
●
●
●
●
●
i tag devono essere incorporati gli uni negli altri;
ogni tag deve essere chiuso, anche quelli privi di tag di chiusura;
tutti gli elementi (tag e attributi) vengono scritti in minuscolo;
i valori degli attributi vengono scritti tra virgolette (“);
gli attributi non possono essere minimizzati (checked=”checked” al posto
di un semplice checked);
l'attributo id dovrebbe sostituire l'attributo name;
ogni pagina deve avere un elemento root (<html>...</html>);
ogni pagina deve contenere i tag <!DOCTYPE>, <html>, <head>, <title>
e <body>, esempio:
<!DOCTYPE ...>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>...</title>
</head>
<body>
...
</body>
</html>
L'attributo xmlns all'interno del tag <html> può anche essere lasciato via
visto e considerato che viene aggiunto automaticamente durante
l'interpretazione del codice.
All'interno di questo manuale cercherò di indicare gli attributi possibili e le
rispettive proprietà CSS. Gli attributi vengono indicati anche se le direttive
specificano l'obbligo di utilizzo di stili piuttosto che gli attributi dove possibile.
I tag e gli attributi
Il linguaggio HTML è un insieme di marcatori (detti “tag”) che permettono di
definire la visualizzazione di una pagina Web. Un tag è di solito composto da
due parti: una apertura, il contenuto e una chiusura. L'apertura contiene un
nome che ne identifica la funzione e una serie di attributi che permettono di
modificare il comportamento della funzione stessa. Il tutto viene inserito
all'interno di parentesi uncinate. Il contenuto è di solito quello che viene
presentato direttamente all'interno della pagina Web. La chiusura, invece,
contiene uno slash “/” prima del nome che identifica la funzione del tag aperto.
Anche la chiusura viene inserita all'interno di parentesi uncinate.
6/37
Dott.Ing.Ivan Ferrazzi
<tag attributo attributo ...>contenuto</tag>
La struttura utilizzata per gli attributi è nome_attributo=”valore”. Un esempio
concreto potrebbe essere:
<span id=”saluto”>Benvenuti sul mio sito</font>
Non tutti i tag hanno una chiusura. In questo caso si parla di tag vuoti (empty
tags). Il tag per l'inserimento delle immagini, ad esempio, viene utilizzato come
segue
<img src=”immagine.gif” />
La chiusura in questione avviene all'interno dello stesso tag di apertura.
I tag possono essere annidati l'uno dentro l'altro, ma è importante chiudere i
tag partendo dall'ultimo aperto.
Esempio:
<TAG1 attributo>
contenuto1
<TAG2 attributo>
contenuto2
</TAG2>
</TAG1>
Dall'esempio visualizzato diventa chiara anche l'importanza dell'indentazione
del codice per renderlo più leggibile. Più spazi ed invii consecutivi vengono
interpretati da un browser come un unico spazio.
I seguenti attributi non verranno descritti per i vari tag perché disponibili per un
qualsiasi elemento:
class
id
style
title
permette di definire una o più classi di stile per l'elemento in
questione
permette di specificare un identificatore univoco
permette di specificare le proprietà CSS per l'elemento
permette di aggiungere un testo all'elemento visualizzato come
etichetti nel momento in cui ci si trova sopra con il puntatore del
mouse
I commenti
Per aumentare ulteriormente il grado di leggibilità del codice possiamo inserire
anche dei blocchi di commento come segue:
<!-- Questo è il mio commento -->
7/37
Dott.Ing.Ivan Ferrazzi
Questi blocchi sono presenti, ma non vengono interpretati dal web browser.
8/37
Dott.Ing.Ivan Ferrazzi
I tag di struttura
Vediamo in questa sezione i principali tag utilizzati per creare la struttura
iniziale di una pagina html.
Il tag <html>...</html>.
Il tag principale che definisce il contenuto della pagina HTML è <html>...</html>.
All'interno di esso possiamo trovare i tag <head>...</head> e <body>...</body>
che permettono di definire rispettivamente informazioni particolari della pagina
stessa (head) ed il suo contenuto (body).
Vediamo ora un esempio pratico. Creiamo utilizzando il seguente codice un
semplice file di testo che andremo a chiamare hello.html:
<html>
<head>
</head>
<body>
Hello World!
</body>
</html>
Se, dopo averlo creato, clicchiamo due volte con il tasto sinistro del mouse
sull'icona del file stesso vedremo apparire la scritta Hello World! all'interno del
nostro web browser predefinito.
9/37
Dott.Ing.Ivan Ferrazzi
Il tag <head>...</head>.
All'interno del tag <head>...</head> possiamo trovare diversi tag alcuni dei quali
sono:
<title>...</title>
<meta ... />
<script>...</script>
<style>...</style>
Questo tag permette di definire il titolo che
vogliamo dare alla nostra pagina HTML e dovrebbe
sempre essere presente. Il testo che viene inserito
all'interno di questo tag viene visualizzato nella
barra dei titoli del web browser.
I META-tag sono dei tag che permettono di dare
delle informazioni aggiuntive della pagina stessa al
web browser, come la lingua utilizzata, il charset,
l'autore della pagina, la descrizione dei contenuti,
ecc.
Questo tag permette di utilizzare codice di
linguaggi di programmazione aggiuntivo come ad
esempio Javascript.
All'interno di questo tag possiamo definire gli stili
da utilizzare per i singoli contenuti della pagina.
Proviamo a modificare il nostro semplice esempio iniziale come segue:
<html>
<head>
<title>Titolo della pagina</title>
</head>
<body>
Hello World!
</body>
</html>
Il tag <body>...</body>
Come precedentemente accennato utilizziamo questo tag per definire tutto il
contenuto della pagina stessa, quindi quello che vediamo direttamente
all'interno del web browser.
Questo tag consente l'utilizzo di vari attributi che ne modificano il
comportamento. HTML 4, però, ha introdotto un l'attributo style con il quale
possiamo specificare il comportamento dell'elemento utilizzando i fogli di stille
(CSS).
background=”[percorso/]file_immagine”
style=”background-image:url([percorso/]file_immagine)”
Con l'utilizzo di questo attributo possiamo inserire un'immagine come sfondo
del web browser. L'immagine verrà inserite con le sue dimensioni originali e
moltiplicata verticalmente ed orizzontalmente nel caso in cui lo spazio
10/37
Dott.Ing.Ivan Ferrazzi
all'interno del web browser fosse più grande delle dimensioni originali
dell'immagine stessa.
Il percorso serve a definire la posizione attuale dell'immagine a partire dalla
posizione del file html che contiene questa richiesta. Se questa indicazione
viene omessa l'immagine verrà cercata nella stessa posizione del file html in
esecuzione.
Poniamo come esempio la seguente struttura:
|- immagini
|
|- sfondo.jpg
|
|- sito
|- index.html
Dove immagini e sito sono le cartelle principale, mentre sfondo.jpg è il file
dell'immagine che vogliamo utilizzare e index.html la pagina web per la quale
vogliamo definire un'immagine come sfondo.
Nel file index.html troviamo il seguente codice:
<html>
<head>
<title>Il mio sfondo</title>
</head>
<body background=”../immagini/sfondo.jpg”>
Hello World!
</body>
</html>
Siccome dobbiamo definire l'esatta posizione dell'immagine a partire dalla
posizione della pagina html che ne vuole fare utilizzo mettiamo il ../ per uscire
dall'attuale cartella sito e immagini/ per entrare nella rispettiva cartella che
contiene l'immagine desiderata.
bgcolor=”{colore|codice esadecimale}”
style=”background-color:{colore|codice esadecimale}”
Questo attributo viene utilizzato per definire il colore di sfondo della pagina
html che vogliamo visualizzare. Come valori possiamo utilizzare il colore in
lingua inglese (es. “red”, “black”, “yellow”, ecc.), oppure il codice esadecimale
con un # posto davanti utilizzando il formato #RRVVBB. Il codice permette di
identificare l'esatta sfumatura tra i 16 milioni di colori possibili utilizzando
quindi la combinazione tra i valori di rosso (RR), verde (VV) e blu (BB) (es.
“#FF0000” per il rosso, “#00FF00” per il verde e “#0000FF” per il blu).
<html>
<head>
<title>Lo sfondo diventa rosso</title>
</head>
<body bgcolor=”#FF0000”>
Hello World!
</body>
11/37
Dott.Ing.Ivan Ferrazzi
</html>
bgproperties=”fixed”
style=”background-attachment:fixed”
Nel caso in cui volessimo utilizzare un'immagine di sfondo all'interno di una
pagina html che mette a disposizione un contenuto che supera la singola
videata possiamo utilizzare la relativa barra di scorrimento per visualizzare
l'intero contenuto della pagina stessa. Utilizzando un'immagine di sfondo
abbiamo il probabilmente indesiderato effetto di ripetizione dell'immagine
inserita come sfondo. Per evitare questo comportamento possiamo utilizzare
questo attributo che fissa l'immagine allo sfondo e permette di farci scorrere
sopra il contenuto dell'intera pagina html. Il primo attributo ( BGPROPERTIES) viene
utilizzato per attivare la rispettiva proprietà sul browser Internet Explorer,
proprietà che però non funziona ad esempio su Mozilla Firefox per il quale
dobbiamo utilizzare la seconda proprietà indicata ( STYLE) ossia la modifica dello
stile.
link=”{colore|codice esadecimale}” (solo Internet Explorer)
Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per i
link della pagina.
vlink=”{colore|codice esadecimale}” (solo Internet Explorer)
Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per i
link già visitati della pagina.
alink=”{colore|codice esadecimale}” (solo Internet Explorer)
Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per i
link attivi della pagina.
text=”{colore|codice esadecimale}”
style=”color:{colore|codice esadecimale}”
Questo attributo permette di definire il colore (vedi BGCOLOR) da utilizzare per
l'intero testo della pagina.
topmargin=”valore”
style=”margin-top:valore”
Questo attributo permette di definire la distanza in pixel ( valore) dal margine
superiore al contenuto più alto della pagina.
bottommargin=”valore”
style=”margin-bottom:valore”
Questo attributo permette di definire la distanza in pixel ( valore) dal margine
inferiore al contenuto basso della pagina.
leftmargin=”valore”
style=”margin-left:valore”
Questo attributo permette di definire la distanza in pixel ( valore) dal margine
12/37
Dott.Ing.Ivan Ferrazzi
sinistro al contenuto più a sinistra della pagina.
rightmargin=”valore”
style=”margin-right:valore”
Questo attributo permette di definire la distanza in pixel ( valore) dal margine
destro al contenuto più a destra della pagina.
Esempio:
<html>
<head>
<title>Pagina con margini</title>
</head>
<body background=”sfondo.jpg” topmargin=”60” bottommargin=”20”
leftmargin=”70” rightmargin=”50”>
Hello World!
</body>
</html>
13/37
Dott.Ing.Ivan Ferrazzi
Tipi di tag
I tipi di tag si dividono principalmente in tag a blocco, tag in linea, oppure tag a
blocco in linea.
Tag a blocco
Questi tag identificano dei contenitori che utilizzano di default l'intera larghezza
messa a disposizione dall'elemento padre. Inoltre sono caratterizzati da un
break line (nuova riga) prima e dopo la sua visualizzazione all'interno del
browser. Alcuni dei tag a blocco sono: div, h1...h6, p, ul, ol.
Tag in linea
Questi tag identificano gli elementi che di default possono essere inseriti in
sequenza orizzontale. Il break line deve quindi avvenire in maniera forzata (es.
con br). Gran parte degli elementi in linea non reagiscono ad eventuali
impostazioni di dimensione. Alcuni dei tag in linea sono: b, strong, span, u, i.
Tag a blocco in linea
Questi tag identificano gli elementi che di default possono essere inseriti in
sequenza orizzontale mantenendo però la possibilità di essere personalizzati da
un punto di vista di dimensione. Il tag che utilizza questa impostazione di
default è il tag img.
14/37
Dott.Ing.Ivan Ferrazzi
Tag per i testi
I seguenti tag possono essere utilizzati per visualizzare in maniera specifica
parole, frasi, oppure blocchi di testo.
I tag per definire i titoli
I tag <hx>...</hx> dove x sta per il numero di livello che va dal valore 1 (titolo
con caratteri più grandi) al valore 6 (titolo con caratteri più piccoli).
Esempio:
<html>
<head>
<title>Testo con titolo</title>
</head>
<body>
<h1>Il mio titolo</h1>
<font face=”Verdana,Arial” size=”2” color=#FF0000”>
Hello World!
</font>
</body>
</html>
Il tag per tipo , dimensione e colore del carattere.
Il tag utilizzato per definire il tipo, la dimensione ed il colore del carattere era il
font che però è ormai deprecato da tempo e quindi non più utilizzato. Il tag che
lo sostituisce è span. Gli attributi indicati in questa sezione funzionano
esclusivamente con il tag font, mentre per lo span è indispensabile l'utilizzo
15/37
Dott.Ing.Ivan Ferrazzi
delle proprietà CSS. Vediamo comunque gli attributi più importanti del vecchio
tag e i corrispettivi stili da utilizzare con span:
face=”tipo carattere[,tipo carattere,...]”
style=”font-family:tipo carattere[,tipo carattere,...]”
Questo attributo permette di definire quale tipo di carattere utilizzare per la
visualizzazione del testo. Possiamo aggiungere anche più di un tipo di
carattere, in questo caso verrà utilizzato il primo (a partire da sinistra) dei tipi
di carattere presenti sul computer del client che sta visualizzando la nostra
pagina. Nel caso in cui nessuno dei tipi di carattere elencati fosse presente sul
sistema del client il web browser userebbe il suo tipo di carattere di default.
size=”valore”
style=”font-size:valore px”
Questo attributo ci da la possibilità di definire la dimensione del carattere con
un valore che va da 1 (piccolo) a 6 (molto grande).
color=”{colore|valore esadecimale}”
style=”color:{colore|valore esadecimale}”
Con questo attributo possiamo definire il colore (vedi bgcolor) del testo
compreso tra il file di apertura e chiusura.
Esempio:
<html>
<head>
<title>Il testo formattato</title>
</head>
<body>
<font face=”Verdana,Arial” size=”2” color=#FF0000”>
Hello World!
</font>
</body>
</html>
Lo stile dei testi
Precedentemente abbiamo visto il tag <font>...</font> (anche se deprecato)
che permette di definire il tipo di carattere, la dimensione ed il colore del testo.
Senza utilizzare gli stili non ci è possibile modificare con questo tag lo stile del
testo inserito. Per questo motivo ci vengono messi a disposizione diversi tag
alcuni dei quali sono:
<strong>...</strong> per il grassetto
style=”font-weight:bold”
Questo tag permette di mettere in grassetto il testo contenuto tra il tag iniziale
e quello finale.
<u>...</u> per la sottolineatura
style=”text-decoration:underline”
16/37
Dott.Ing.Ivan Ferrazzi
Questo tag permette di sottolineare il testo contenuto tra il tag iniziale e quello
finale.
<i>...</i> per il corsivo
style=”font-style:italic”
Questo tag permette di mettere in corsivo il testo contenuto tra il tag iniziale e
quello finale.
Gli stili possono essere utilizzati anche in combinazione l'uno con l'altro, ma è
molto importante che venga chiuso per primo l'ultimo tag iniziale utilizzato.
Esempio:
<html>
<head>
<title>Grassetto e corsivo</title>
</head>
<body>
<font face=”Verdana,Arial” size=”2” color=#FF0000”>
<strong><i>Hello World!</i></strong>
</font>
</body>
</html>
Nel precedente esempio chiudiamo, infatti, prima il tag <i> utilizzato per ultimo
e poi il tag <i> utilizzato per primo.
I paragrafi
Con il tag <p>...</p> possiamo definire dei paragrafi, ossia dei blocchi di testo
per i quali valgono delle precise regole di formattazione. Queste regole
possono essere definite con l'utilizzo degli attributi uno dei quali è align.
align=”allineamento”
style=”text-align:{left|center|right|justify}”
Con questo attributo possiamo definire l'allineamento all'interno del paragrafo.
I valori che possiamo utilizzare sono center, per centrare il testo, left per
allineare a sinistra, right per allineare a destra e justify per giustificare il testo.
Interruzione di riga
Il tag <br />, privo di tag finale e quindi terminato con /> costringe il web
browser ad andare a capo.
Esempio:
<html>
<head>
<title>A capo</title>
</head>
17/37
Dott.Ing.Ivan Ferrazzi
<body>
Hello World!<br />
Ciao mondo!<br />
Bye.
</body>
</html>
Il tag per definire i link (le ancore)
Un link non è altro che un collegamento ad un'altra pagina. Cliccando sul link
che verrà poi visualizzato all'interno della pagina html ne possiamo vedere la
pagina di destinazione. Il tag che utilizziamo per definire i link è <a>...</a>.
All'interno di questo link possiamo trovare tra l'altro dei blocchi di testo, oppure
delle immagini. Questo tag mette a disposizione una vasta gamma di attributi
alcuni dei quali sono:
href=”[percorso/]pagina_web”
Questo attributo permette di definire la pagina di destinazione da aprire nel
caso in cui si clicchi sopra il rispettivo link.
target=”posizione_di_caricamento”
Con questo attributo è possibile definire il dove viene visualizzata la pagina di
destinazione identificata dal link stesso. Alcuni valori possono essere _blank per
aprire la destinazione all'interno di una nuova finestra del web browser (la
precedente rimane visualizzata all'interno di una precedente finestra), top evita
di rimanere legati ad un'eventuale struttura definita con FRAME (vedi più avanti
) e ne carica completamente il contenuto, oppure il nome del FRAME (vedi più
avanti) per identificare il frame all'interno del quale vogliamo visualizzare il
contenuto della pagina di destinazione.
Se questo attributo non viene utilizzato la pagina di destinazione viene caricata
al posto della pagina attualmente visualizzata.
<html>
<head>
<title>Link</title>
</head>
<body>
<a href=”prova.html” target=”_blank”>Hello World!</a>
</body>
</html>
Le linee divisorie
si utilizza per creare una linea divisoria orizzontale e, a differenza degli
altri tag visti precedentemente, non necessita di chiusura. Questo tag supporta
diversi attributi alcuni dei quali sono:
<hr />
color=”{colore|valore esadecimale}”
18/37
Dott.Ing.Ivan Ferrazzi
style=”color:{colore|valore esadecimale}”
Questo attributo permette di definire il colore (vedi bgcolor) della linea
divisoria.
align=”allineamento”
style=”text-align:{left|center|right}”
Questo attributo permette di definire l'allineamento della linea divisoria nel
caso in qui la sua dimensione fosse inferiore dell'intera larghezza utilizzata.
Come valori possiamo utilizzare left, per allinearla a sinistra, right per
allinearla a destra e center per centrarla.
size=”valore”
style=”height:valore”
Questo attributo permette di definire lo spessore della linea divisoria. Il valore definisce lo spessore in pixel.
width=”valore”
style=”width:valore”
Con questo attributo possiamo definire la larghezza della linea. Come valore possiamo utilizzare un numero che ne definisce la dimensione in pixel, oppure
un valore percentuale, per definirne la dimensione in base all'intera larghezza
messa a disposizione.
Esempio:
<html>
<head>
<title>Linea divisoria</title>
</head>
<body>
<hr width=”70%” />
Hello World!
<hr width=”50” />
</body>
</html>
noshade=”noshade”
Permette di inserire una linea divisoria senza ombreggiatura.
19/37
Dott.Ing.Ivan Ferrazzi
Le tabelle
La tabella ha come tag principale <table>...</table> all'interno del quale si
inserisce con dei tag particolari l'intera struttura della tabella. Il tag principale
può contenere degli attributi che definiscono il comportamento di
visualizzazione dell'intera tabella. Gli attributi più utilizzati sono:
border=”valore”
style=”border:valore”
Questo attributo permette di definire lo spessore delle linee verticali ed
orizzontali che delimitano le parti dell'intera tabella. Un valore pari a 0 rende
invisibili queste linee delimitatrici.
bordercolor=”{colore|valori esadecimali}”
style=”border-color:{colore|valori esadecimali}”
Questo attributo ci da la possibilità di definire il colore (vedi bgcolor) del bordo
utilizzato. Il colore è visualizzabile solo se viene utilizzato un valore per border
superiore a 0.
cellpadding=”valore”
style=”padding:valore”
Con questo attributo possiamo definire lo spazio tra il bordo della cella ed il suo
contenuto. Un valore pari a 0 permette di attaccare il contenuto direttamente
al bordo della cella.
cellspacing=”valore”
style=”border-spacing:valore[[,valore],valore,valore]”
Questo attributo ci permette di modificare lo spazio tra il bordo di una cella ed
il bordo delle altre celle della tabella. Un valore pari a 0 permette di attaccare
20/37
Dott.Ing.Ivan Ferrazzi
una cella direttamente all'altra.
width=”valore”
style=”width:valore”
Questo attributo permette di definire la larghezza dell'intera tabella. Il valore
può essere messo come numero che identifica la larghezza in pixel, oppure
come valore percentuale dove verrebbe utilizzata come larghezza la
dimensione percentuale relativa all'interno spazio disponibile.
HEIGHT=”valore”
style=”height:valore”
Questo attributo permette di definire l'altezza dell'intera tabella. Il valore può
essere messo come numero che identifica l'altezza in pixel, oppure come
valore percentuale dove verrebbe utilizzata come altezza la dimensione
percentuale relativa all'interno spazio disponibile.
align=”allineamento”
style=”text-align:{left|center|right}”
Con questo attributo possiamo definire l'allineamento della tabella. I possibili
valori per definire l'allineamento sono center, che centra la tabella rispetto al
restante contenuto, left che allinea la tabella a sinistra e right che la allinea
a destra.
bgcolor=”{colore|valore esadecimale}”
style=”background-color:{colore|valore esadecimale}”
Questo attributo definisce il colore di sfondo dell'intera tabella. Possiamo
inserire il nome inglese relativo al colore che desideriamo (es. red) oppure
inserire il codice con il formato esadecimale (es. #ff0000). Il colore definito con
questo attributo viene utilizzato per tutte quelle celle dove non è stato definito
a loro volta un eventuale colore di sfondo.
background=”[percorso/]file_immagine”
style=”background-image:url([percorso/]file_immagine)”
Questo attributo permette di definire un'immagine da utilizzare come sfondo
dell'intera tabella (vedi background del tag body).
Esempio:
<html>
<head>
<title>La mia tabella</title>
</head>
<body>
<table border=”0” cellpadding=”0” cellspacing=”0”>
...
</table>
</body>
</html>
Per creare l'effettiva struttura della tabella possiamo utilizzare <tr>...</tr>
21/37
Dott.Ing.Ivan Ferrazzi
all'interno del quale viene definita la struttura per un'intera riga ed il tag
<th>...</th> che permette di definire una riga di titolo, mentre <td>...</td>
permette di definire le singole celle all'interno di una riga. Cerchiamo di creare
la seguente semplice tabella per capire bene l'utilizzo di questi due tag.
Cognome Nome Nr.telefono
Pinco
Palla
123456
Il codice HTML che permette di realizzare questa tabella è:
<html>
<head>
<title>Elenco</title>
</head>
<body>
<table>
<tr><th>Cognome</th>
<td>Nome</th>
<td>Nr.telefono</th></tr>
<tr><td>Pinco</td>
<td>Palla</td>
<td>123456</td></tr>
</table>
</body>
</html>
Andiamo ora ad analizzare quello che abbiamo scritto. Il tag principale
<table>...</table> definisce il contenuto dell'intera tabella. Utilizziamo
all'interno di questo tag il <tr> per definire l'inizio di una nuova riga, seguito
subito dai tre tag <th>...</th> che contengono il testo relativo ai titoli di
colonna. Poi apriamo una nuova riga con il tag <tr> seguito dai tre tag
<td>...</td> che contengono il testo relativo alle singole cella appartenenti alla
stessa riga. Definiamo la fine della riga con il tag di chiusura </tr>.
Poi nuovamente un blocco <tr>...</tr> che contiene per ogni cella un
<td>...</td> con i rispettivi contenuti.
Il tag <td>...</td> mette a disposizione una vasta gamma di attributi che ne
definiscono il comportamento. Tra questi troviamo:
colspan=”numero_celle”
L'attributo COLSPAN permette di adattare la larghezza di una cella alla larghezza
di numero_celle celle. Per utilizzare in maniera corretta questo attributo è
importante capire come il tag TABLE identifica il numero delle colonne della
struttura che stiamo cercando di creare. Vediamo un semplice esempio:
Titolo1
Titolo2
Titolo3
CellaA
CellaB
22/37
Dott.Ing.Ivan Ferrazzi
CellaC
CellaD
Nella tabella precedente vediamo che il numero delle colonne dipende dalla
riga con all'interno il numero più elevato di celle. In questo caso prediamo
come punto di riferimento la prima riga composta dai valori Titolo1, Titolo2 e
Titolo3.
Nella seconda riga notiamo la cella con il contenuto CellaA che deve avere una
larghezza pari alle prime due celle della riga di riferimento (quella con il
numero più alto di celle). La stessa situazione la troviamo nella terza riga dove
la cella CellaD deve essere lunga quanto le ultime due della riga di riferimento.
Vediamo come scrivere il relativo codice html:
<html>
<head>
<title>Tabella</title>
</head>
<body>
<table>
<tr><td>Titolo1</td>
<td>Titolo2</td>
<td>Titolo3</td></tr>
<tr><td colspan=”2”>CellaA</td>
<td>CellaB</td></tr>
<tr><td>CellaC</td>
<td colspan=”2”>CellaD</td></tr>
</table>
</body>
</html>
Notiamo nel presente codice l'utilizzo dell'attributo COLSPAN che permette di
definire a quanti blocchi <td>...</td> corrisponde il relativo <td> di riferimento.
rowspan=”numero_celle”
Come l'attributo precedente, ma permette di definire quante celle in altezza
deve utilizzare la cella desiderata in base alla colonna con più celle.
width=”valore”
style=”width:valore”
Questo attributo permette di definire la larghezza della cella. Il valore può
essere messo come numero che identifica la larghezza in pixel, oppure come
valore percentuale dove verrebbe utilizzata come larghezza la dimensione
percentuale relativa all'interno spazio messo a disposizione dalla tabella.
height=”valore”
style=”height:valore”
Questo attributo permette di definire l'altezza della riga. Il valore può essere
messo come numero che identifica l'altezza in pixel, oppure come valore
percentuale dove verrebbe utilizzata come altezza la dimensione percentuale
relativa all'interno spazio messo a disposizione dalla tabella.
align=”allineamento”
23/37
Dott.Ing.Ivan Ferrazzi
style=”text-align:{left|center|right}”
Con questo attributo possiamo definire l'allineamento orizzontale del contenuto
della cella. I possibili valori per definire l'allineamento sono center, che centra il
contenuto, left che allinea il contenuto a sinistra e right che lo allinea a destra.
valign=”allineamento”
style=”vertical-align:{top|middle|bottom}”
Con questo attributo possiamo definire l'allineamento verticale del contenuto
della cella. I possibili valori per definire l'allineamento sono top, che allinea il
contenuto in alto, center che centra il contenuto e bottom che lo allinea in basso.
bgcolor=”{colore|valore esadecimale}”
style=”background-color:{colore|valore esadecimale}”
Questo attributo definisce il colore di sfondo (vedi bgcolor) della cella.
background=”[percorso/]file_immagine”
style=”background-image:url([percorso/]file_immagine)”
Questo attributo permette di definire un'immagine da utilizzare come sfondo
della cella (vedi background del tag body).
24/37
Dott.Ing.Ivan Ferrazzi
Le immagini
Le immagini in una pagina web sono di fondamentale importanza, un sito senza
immagini sarebbe noioso e privo di ogni tipo di struttura grafica. I formati
sicuramente supportati dai web browser sono .jpg ed il .gif , si consiglia quindi
di utilizzare uno di questi per le proprie realizzazioni.
Per inserire le immagini utilizziamo il tag <img> che non necessita di chiusura.
Per utilizzarlo usiamo la seguente forma:
<img src=”[percorso/]file_immagine” />
L'attributo SRC (source) serve per definire la posizione del file immagine che
vogliamo presentare all'interno del nostro sito. Se l'immagine non si trova
direttamente all'interno della stessa cartella usata per il file html che la
contiene possiamo utilizzare ../ (andare al livello superiore) ed i nomi delle
singole cartelle separate da uno slash (/) per definirne l'esatta posizione.
Il tag <img> supporta diversi attributi alcuni dei quali sono:
width=”larghezza”
style=”width:larghezza”
Con questo attributo possiamo definire il valore larghezza in pixel (o in
percentuale in base alla dimensione originale) che vogliamo utilizzare per la
visualizzazione dell'immagine sul sito. Se non viene utilizzato l'attributo height
l'altezza verrà adattata proporzionalmente.
height=”altezza”
style=”height:altezza”
Con questo attributo possiamo definire il valore altezza in pixel (o in
percentuale in base alla dimensione originale) che vogliamo utilizzare per la
25/37
Dott.Ing.Ivan Ferrazzi
visualizzazione dell'immagine sul sito. Se non viene utilizzato l'attributo width
la larghezza verrà adattata proporzionalmente.
alt=”testo”
Questo attributo è molto importante e non dovrebbe mancare mai all'interno
del tag img. Infatti permette di definire un testo che
il browser deve
visualizzare nel caso in cui non fosse possibile la visualizzazione dell'immagine
stessa.
title=”testo”
Con questo attributo possiamo definire il testo che deve comparire all'interno
dell'etichetta che appare nel web browser quando rimaniamo fermi con il
puntatore del mouse sopra l'immagine o se l'immagine, per un qualsiasi
motivo, non venisse visualizzata.
border=”spessore”
style=”border-width:spessore”
Se il tag <img> viene utilizzato all'interno di un tag di ancoraggio <a>...</a>
possiamo utilizzare questo attributo per definire con il valore spessore lo
spessore del bordo da visualizzare intorno all'immagine stessa.
26/37
Dott.Ing.Ivan Ferrazzi
Gli elenchi
Gli elenchi si dividono in tre categorie: elenchi puntati, elenchi numerati e
elenchi di definizioni.
<ul>...</ul>
Questo tag permette di definire un elenco puntato. I singoli elementi della lista
vengono aggiunti con il tag <li>...</li>.
<ul>
<li>elemento 1</li>
<li>elemento 2</li>
</ul>
<ol>...</ol>
Questo tag permette di definire un elenco numerato. I singoli elementi della
lista vengono aggiunti con il tag <li>...</li>.
<ol>
<li>elemento 1</li>
<li>elemento 2</li>
</ol>
<dl>...</dl>
Questo tag permette di definire un elenco di definizioni. I titoli di definizione
vengono inseriti con il tag <dt>...</dt> mentre i blocchi descrittivi vengono
aggiunti con il tag <dd>...</dd>.
<dl>
<dt>elemento 1</dt>
<dd>descrizione 1</dd>
<dt>elemento 2</dt>
27/37
Dott.Ing.Ivan Ferrazzi
<dd>descrizione 2</dd>
</dl>
28/37
Dott.Ing.Ivan Ferrazzi
Tag per moduli da compilare
Il tag principale che permette di definire l'intero contenuto di un modulo è
<form>...</form>. Questo tag mette a disposizione vari attributi alcuni dei quali
sono:
method=”{post|get}”
Questo attributo definisce la modalità di trasferimento dei dati inseriti nei
componenti del modulo. Il trasferimento può avvenire mediante modalità get
oppure post. Il metodo get inserisce i valori da trasferire direttamente dietro la
URI della pagina da caricare e quindi è legata ad un determinato limite di
lunghezza, mentre post li manda nascosti all'interno degli header della pagina.
action=”pagina_web”
Con questo attributo definiamo quale sarà la pagina web alla quale verrà
inviato l'intero contenuto del modulo.
Per definire un form possiamo quindi scrivere:
<html>
<head>
<title>Il mio modulo</title>
</head>
<body>
<form method=”post” action=”prova.php”>
...
</form>
</body>
</html>
29/37
Dott.Ing.Ivan Ferrazzi
Il tag <input />
Questo tag è un tag particolare senza tag di chiusura che permette di definire
diversi tag utilizzati per l'inserimento di dati direttamente dall'utente della
pagina web. Questo tag mette a disposizione vari attributi alcuni dei quali sono:
type=”{text|password|checkbox|radio|button|submit}”
Questo attributo è l'attributo più importante perchè ne definisce il
comportamento. Utilizziamo text per definire una campo di inserimento testo,
password per campi per l'inserimento di parole chiave (quello che viene
digitato viene nascosto), checkbox per le caselle che permettono di attivare o
disattivare determinate opzioni, radio per creare liste di opzioni all'interno
delle quali può essere scelta un'unica opzione, button per creare dei pulsanti e
submit per definire il pulsante che verrà utilizzato per l'invio dei dati del
modulo.
name=”nome”
Questo attributo permette di definire il nome che vogliamo dare al componente
presente nel nostro modulo. Il nome viene utilizzato per riconoscere
l'appartenenza di un determinato valore trasmesso. In alcuni casi (ad esempio
con i componenti radio) il nome deve essere uguale per tutti i componenti
dello stesso gruppo.
value=”valore iniziale”
Questo attibuto permette di definire il valore iniziale del componente (solo con
i componenti text o password) o il valore da utilizzare nel caso in qui venisse
scelto il rispettivo componenti (con i componenti radio o checkbox).
Utilizziamo VALUE anche per assegnare il testo da utilizzare all'interno di un
componente BUTTON oppure SUBMIT.
size=”lunghezza” (solo per input oppure password)
Questo parametro permette di definire la lunghezza stimando il numero di
caratteri direttamente visualizzabili.
maxlength=”lunghezza” (solo per input oppure password)
Con questo attributo definiamo quanto lungo può essere al massimo il testo
che viene inserito.
checked=”checked” (solo per checkbox)
Questo attributo, senza assegnazione di valori,
l'eventuale componente checkbox di riferimento.
permette
di
spuntare
selected=”selected” (solo per radio)
Questo attributo, senza assegnazione di valori, permette di attivare il
componente presente all'interno di una lista di opzioni radio.
I componenti possono essere disposti all'interno di un form con l'utilizzo di una
30/37
Dott.Ing.Ivan Ferrazzi
tabella. Vediamo un semplice esempio:
<html>
<head>
<title>Il mio modulo</title>
</head>
<body>
<form name=”login” method=”post” action=”checkLogin.php”>
<table>
<tr><td>Nome utente:</td>
<td><input type=”text” name=”UID” value=”nome” /></td>
</tr>
<tr><td>Nome utente:</td>
<td><input type=”password” name=”PWD” /></td>
</tr>
<tr><td colspan=”2” align=”center”>
<input type=”submit” value=”login” />
</td>
</tr>
</table>
</form>
</body>
</html>
Il tag <lable>...</lable>
Questo tag viene utilizzato per definire un'etichetta da aggingere ad un input di selezione (ad esempio radio). In questo caso possiamo scegliere una delle
opzioni possibili cliccando direttamente sul nome definito per l'input in
questione:
for=”id”
Questo attributo permette di inserire l'id dell'elemento input per il quale si
vuole aggiungere l'etichetta.
Il tag <fieldset>...</fieldset>
Questo tag viene utilizzato per creare un bordo intorno a degli elementi.
All'interno del bordo possiamo inserire un'etichetta che ne definisce il titolo
utilizzando il tag <legend>...</legend>.
<html>
<head>
<title>FIELDSET</title>
</head>
<body>
<fieldset>
<legend>titolo</legend>
Nome: <input type=”text” /><br />
Cognome: <input type=”text” /><br />
</fieldset>
</body>
</html>
31/37
Dott.Ing.Ivan Ferrazzi
Il tag <textarea>...</textarea>
Questo tag viene utilizzato per definire una casella di inserimento testo
composto da più righe. Il testo compreso tra i due tag, di apertura e di
chiusura, viene visualizzato direttamente all'interno del componente stesso.
Tra i vari attributi che questo tag mette a disposizione vediamo quelli più
importanti:
name=”nome”
Questo attributo permette di definire il nome che vogliamo dare al componente
presente nel nostro modulo. Il nome viene utilizzato per riconoscere
l'appartenenza di un determinato valore trasmesso.
cols=”numero_caratteri”
Questo attributo permette di definire la larghezza del componenti stimando il
numero di caratteri che possiamo inserire in una riga. Nel caso in cui si
inseriscono più caratteri vediamo apparire la barra di scorrimento orizzontale.
rows=”numero_righe”
Questo attributo permette di definire il numero delle righe direttamente
visualizzabili all'interno del componente. Nel caso in cui si inserisce un testo più
lungo di numero_righe righe appare la barra di scorrimento verticale.
Vediamo ora un semplice esempio:
<html>
<head>
<title>Il messaggio</title>
</head>
<body>
<form name=”messaggio” method=”post” action=”invio.php”>
<table>
<tr><td>Messaggio:</td>
<td><textarea name=”testo” rows=”30” cols=”5”>
Questo testo viene visualizzato!
</textarea>
</td>
</tr>
<tr><td colspan=”2” align=”center”>
<input type=”submit” value=”invia”>
</td>
</tr>
</table>
</form>
</body>
</html>
Il tag <select>...</select>
Con questo tag possiamo definire dei menu a tendina. Il tag principale <select>
mette a disposizione diversi attributi, ma quello più utilizzato è il seguente:
name=”nome”
32/37
Dott.Ing.Ivan Ferrazzi
Questo attributo permette di definire il nome che vogliamo dare all'intero
componente. Il nome viene utilizzato per riconoscere l'appartenenza del valore
selezionato.
All'interno del tag principale inseriamo una serie di tag <option>...</option> per
definire le singole righe di menu del nostro menu a tendina. Alcuni degli
attributi che possiamo utilizzare all'interno di questo sono:
value=”valore”
Questo attributo permette di definire il valore che viene inviato nel caso in cui
questa voce di menu fosse quella attualmente selezionata.
selected=”selected”
Questo attributo permette di definire quale delle voci inserite deve essere
quella selezionata (quindi visualizzata all'interno del componente menu a
tendina chiuso).
I vari tag <option>...</option> possono essere raggruppati utilizzando il tag
<optgroup>...</optgroup>. All'interno di quest'ultimo possiamo inserire l'attributo
label che permette di definire il nome del gruppo.
label=”nome”
Questo attributo permette di definire il nome del gruppo all'interno del menu a
tendina.
Vediamo ora un esempio:
<html>
<head>
<title>Menu a tendina</title>
</head>
<body>
<select name=”scelta”>
<optgroup label=”gruppo 1”>
<option value=”1”>Elemento 1</option>
<option value=”2” selected=”selected”>Elemento 2</option>
</optgroup>
<optgroup label=”gruppo 2”>
<option value=”3”>Terza riga</option>
</optgroup>
</select>
</body>
</html>
33/37
Dott.Ing.Ivan Ferrazzi
I frame
I FRAME venivano utilizzati per suddividere una pagina web in sezioni separate,
le quali erano completamente indipendenti l'una dall'altra. I frame sono
attualmente deprecati e non si dovrebbero più utilizzare. Manteniamo
comunque questa sezione per dare la possibilità di interpretare eventuale
codice datato.
La suddivisione viene definita utilizzando il tag <frameset>...</frameset> e gli
attributi principali rows e cols che definiscono rispettivamente quante righe
oppure colonne utilizzare per la visualizzazione della sezione in questione.
All'interno di una pagina web utilizzata per definire la struttura di suddivisione
di un'intera pagina viene normalmente utilizzato senza blocco <body>...</body>.
rows=”alt_riga_1,alt_riga_2,...,alt_riga_n”
Questo attributo permette di suddividere l'intero spazio in altezza dedicato al
frameset. I valori possono essere espressi in pixel, oppure come valore
percentuale in proporzione all'intero spazio dedicato. Possiamo anche utilizzare
l'asterisco che permette di definire il restante spazio disponibile.
cols=”lar_col_1,lar_col_2,...,lar_col_n”
Questo attributo permette di suddividere l'intero spazio in larghezza dedicato al
frameset. I valori possono essere espressi in pixel, oppure come valore
percentuale in proporzione all'intero spazio dedicato. Possiamo anche utilizzare
l'asterisco che permette di definire il restante spazio disponibile.
Ad ogni singola suddivisione va assegnata una rispettiva pagina web da
caricare con il tag <frame> che non possiede un tag di chiusura, oppure può
essere suddivisa ulteriormente utilizzando un nuovo frameset. Alcuni degli
34/37
Dott.Ing.Ivan Ferrazzi
attributi che possiamo utilizzare all'interno del tag <frame> sono:
name=”nome”
Con l'utilizzo di questo attributo è possibile assegnare un nome alla relativa
sezione creata. Questo nome può essere utilizzato ad esempio dal tag con il
quale si crea dei link <a>...</a> per definire all'interno di quale sezione caricare
l'eventuale pagina web collegata (vedi l'attributo target).
src=”[percorso/]pagina_web”
Questo attributo ci permette di definire quale pagina web caricare all'interno
della sezione definita. Se la pagina che definisce la struttura con frameset non
si trova all'interno della stessa cartella delle pagine da caricare possiamo
definire l'intero percorso a partire dalla pagina stessa.
Per semplificare la comprensione vediamo ora il codice di una pagina web che
definisce la seguente struttura:
intestazione.html
menu.html
main.html
Vediamo ora la relativa pagina web:
<html>
<head>
</head>
<frameset rows=”100,*”>
<frame name=”intestazione” src=”intestazione.html”>
<frameset cols=”200,*”>
<frame name=”menu” src=”menu.html”>
<frame name=”main” src=”main.html”>
</frameset>
</frameset>
</html>
Nel primo frameset notiamo la suddivisione dell'altezza con l'attributo rows dove
100 pixel vengono dedicati all'intestazione, mentre il resto ( *) viene dedicato al
menu e al blocco centrale (main).
Nelle righe successive notiamo che i primi 100 pixel vengono dedicati
interamente al FRAME chiamato intestazione, mentre il resto viene ulteriormente
suddiviso in larghezza mediante l'attributo cols.
I 200 pixel di larghezza vengono quindi dedicati al FRAME chiamato menu ed il
restante spazio al FRAME chiamato main.
35/37
Dott.Ing.Ivan Ferrazzi
Validare il codice
Con l'aggiunta di uno dei seguenti blocchi di codice all'inizio della nostra pagina
(quindi prima del tag <html>...</html>) possiamo validare il proprio codice come
HTML 4.01 oppure come XHTML 1.0. Il primo blocco definito come strict DTD
include tutti gli elementi e attributi che non sono stati deprecati:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Il prossimo codice, invece, definito come transitional DTD include gli elementi
ed attributi inclusi dal blocco strict DTD con l'aggiunta degli elementi e degli
attributi deprecati:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Il prossimo codice permette di validare la pagina come frameset DTD, ossia come
transitional DTD con l'aggiunta degli elementi e degli attributi per i frameset:
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
36/37
Dott.Ing.Ivan Ferrazzi
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
37/37
