########################### HTML ####################################################
#####################################################################################
Tag di apertura e chiusura di una pagina web
#####################################################################################
Tag dell'area di intestazione contiene il tag
#####################################################################################
<meta attributo1="valore"attributo2="valore">
Il tag meta va inserito all'interno del tag (<head>).
serve ad inserire informazioni sul sito che non vengono visualizzate nella pagina ma servono al browser e ai motori di ricerca per gestire al meglio i contenuti. Questo tag non necessita di un tag di chiusura.
ESEMPI :
<meta name="description" content="breve descrizione della pagina">
inserisce una descrizione che viene usato dai motori di ricerca
<meta name="keywords" content="parola1,parola2,parola3">
inserisce un elenco di parole chiave usate dai motori di ricerca
<meta name="robots" content="valore">
info per i robots dei motori di ricerca i possibili (valori) sono :
index la pagina viene indicizzata
noindex non viene indicizzata
follow le pagine linkate al documento vengono indicizzate
nofollow non vengono indicizzate
<meta http-equiv="refresh" content="secondi; url=pagina.html">
redirige il visitatore alla pagina (pagina.html) dopo il numero di (secondi) specificati
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15">
indica al browser che deve caricare il set di caratteri occidentale
############################################################################################
<title> Tag in cui definire il titolo che compare il cima alla finestra
#####################################################################################
Tag che indica l'apertura della pagina vera e propria, il tag supporta 6 attributi;
bgcolor="valore" il valore è la cifra esadecimale del colore preceduta dal segno del cancelletto (#) si puo utilizzare anche il nome del colore ma la scelta è piu limitata
backgrond="percorso/nomeFile" utilizzato per inserire un immagine come sfondo alla pagina, se l'immagine è piu piccola verra ripetuta fino a riempire la pagina.
text="valore" imposta il colore del testo
link="valore" il colore dei link (il default è blu)
alink="valore" imposta il colore del link su cui si è cliccato (default rosso)
vlink="valore" imposta il colore dei link che si è gia' visitato (default viola)
#####################################################################################
################# FORMATTAZIONE DEL TESTO############################################
#####################################################################################
per inserire un commento per rendere comprensibile i passaggi e che non verra visualizzato dal browser lo si racchiude tra ()
#####################################################################################
Il tag indica un paragrafo inserendo una riga vuota tra un paragrafo ed il sucessivo creando cosi ordine nel testo il tag va' inserito sulla stessa riga del testo e per ragioni di conformita' alla versione 4 di HTML si inserisce anche il tag di chiusura che non sarebbe necessario il tag supporta le opzioni di allineamento:
align="left" align="center" align="right" align="justify" Direi che si spiegano da soli :-)
#####################################################################################
Con questa coppia di tag si puo creare un blocco, contenente (testo,immagini o altro) di cui si puo gestire l'allineamento infatti l'attributo di è il solito :
align="valore" il valore puo essere [left-right-center-justify]
#####################################################################################
Tag di intestazione che va' da
il piu grande a piu piccolo supporta le opzioni di allineamento (align="valore")
#####################################################################################
Tag di interruzione di riga per mandare a capo il testo se ne puo usare anche piu di uno per inserire piu righe vuote, non necessita del tag di chiusura
#####################################################################################
Tag per mantenere un insieme di parole sulla stessa riga
#####################################################################################
Tag per il controllo dei font e necessario aggiungere almeno un opzione :
per sciegliere il tipo di font
specifica le dimensioni del font il valore va' da 1 (piccolo) a 7 (grande) di default il valore è 3
per impostare il colore
#####################################################################################
impostare un carattere a spaziatura fissa
#####################################################################################
grassetto
corsivo
sottolineato
testo barrato
pedice
apice
mantiene la formattazione usata nel codice (utile per ascii art)
#####################################################################################
Per specificare il senso esteso di un acronimo si utilizza questo tag con l'attributo (title) es.
WWW
La scritta compresa nel campo title compare nella pagina come suggerimento quando si passa con il mouse sull'acronimo WWW
#####################################################################################
Tag per inserire una linea (utile per separare un blocco di testo da un immagine o da un altro blocco di testo) la lunghezza e la larghezza della linea viene definita negli attributi
width="valore" al posto del termine valore si puo imserire il valore in pixel o in percentuale
size="pixel" il valore puo essere espresso solo in pixel
align="valore" valore puo essere [left-center(default)-right]
noshade elimina l'effetto grafico di profondità della linea
#####################################################################################
Tag per creare un rientro del testo
#####################################################################################
###################### ELENCHI ######################################################
#####################################################################################
- elemento1
- elemento2
Il tag supporta l'attributo (type) che puo avere 5 valori
1 = numerazione araba (valore di default)
i = numerazione araba (lettere piccole)
I = numerazione araba (lettere grandi)
a = lettere (piccole)
A = lettere (grandi)
Il tag supporta l'attributo (type) che puo avere 3 valori
disc = un pallino nero (valore di default)
circle = un pallino vuoto
square = un quadretto nero
PER CREARE UN GLOSSARIO :
- termine1
- definizione1
- termine2
- definizione2
######################################################################################
####################### INSERIRE IMMAGINI ############################################
######################################################################################
Questo è il tag per inserire un immagine gli attributi sono :
width="pixel" Larghezza da indicare in pixel
height="pixel" Altezza da indicare in pixel
alt="descrizione" descrizione alternativa per chi non visualizza le immagini
border="numero" quando l'immagine è usata come link viene circondata da un bordo,con questo attributo se ne imposta lo spessore, assegnando il valore (0) si disabilita il bordo
align="valore" I valori possibili sono 5 :
left Immagine si trova a sinistra, il testo scorre a destra
right Immagine a destra, il testo scorre a sinistra
top Bordo superiore dell'immagine allineato a bordo superiore testo
middle Il testo si trova in corrispondenza della meta' del valore height
bottom Bordo inferiore immagine allineato a bordo inferiore testo
hspace="pixel" per aggiungere spazio orrizontale tra l'immagine ed il testo(espresso in pixel)
vspace="pixel" per aggiungere spazio verticale tra l'immagine ed il testo(espresso in pixel)
###########################################################################################
############################### LINK ######################################################
###########################################################################################
Per inserire un collegamento si usa la coppia di tag tra cui si inserisce le parole che compariranno come link sulla pagina mentre con l'attributo (href) si indica il collegamento vero e proprio ESEMPI :
clicca qui
Collegamento ad un altra pagina del sito
vai al sito
Collegamento ad un sito esterno
vai al sito
Apre il collegamento in una nuova finestra, vale per tutti i tipi di link
Per utilizzare un immagine come link a cui si possono aggiungere altri attributi
vai a segnaposto
Con il primo tag si crea una marcatura all'interno della pagina e con il secondo si puo tornare al punto marcato da qualsiasi altra parte della pagina, per tornare al punto marcato da una pagina diversa si deve aggiungere il nome della pagina in cui si trova il tag marcatore all'attributo (href) del secondo tag
e-mail
Link ad un indirizzo E-mail attiva il programma di posta con il campo (to) attivo
E-mail+Oggetto
attiva il programma di posta con gia inserito anche l'oggetto (subject)
Visita HTML.it
utilizzando l'attributo (title) si puo aggiungere un commento che verra visualizzato quando si sosta col mouse sul link.
############################################################################################
########################### TABELLE ########################################################
############################################################################################
Questa è la struttura base di una tabella :
inizio tabella
prima riga
| | prima cella della 1 riga
| seconda cella della 1 riga
fine prima riga
inizio seconda riga
| | prima cella seconda riga
fine seconda riga
fine tabella
il tag (table) supporta i seguenti 6 attributi
width="valore" specifica la larghezza della tabella puo essere espresso in pixel o in percentuale
align="valore" Il valore puo essere (left-right-center)
border="pixel" spessore del bordo (defaul è 1) per eliminare il bordo si imposta a (0)
cellspacing="pixel" Imposta la spaziatura tra le celle espresso in pixel
cellpadding="pixel" imposta la spaziatura tra il contenuto ed i bordi delle celle
bgcolor="#valoreHex" imposta il colore di sfondo della tabella
I tag (tr)e(td) supportano i seguenti 3 attributi
align="valore" Allineamento orrizontale il valore puo essere (left-right-center)
valign="valore" Allineamento verticale il valore puo essere (top-middle-bottom)
bgcolor="#valoreHex" colore di sfondo
Il tag (td) inoltre supporta i seguenti 2 attributi
rowspan="numero" estende la cella attraverso il numero di righe specificato
colspan="numero" estende la cella attraverso il numero di colonne specificato
width="valore" specifica la larghezza della cella puo essere espresso in pixel o in percentuale
height="pixel" specifica l'altezza della cella in pixel
Nel caso si volesse creare una tabella vera e propria tornano utili anche questi tag :
è il titolo della tabella viene subito dopo il tag
è l'intestazione quella che contiene indicazioni sul contenuto delle celle al suo interno si puo usare il tag | al posto di | così facendo le scritte all'interno delle celle compariranno in grassetto e centrate
è la riga finale che va inserita prima del corpo della tabella
è la parte centrale con il contenuto della tabella
ESEMPIO :
Fatturato dell'azienda XYZ
| Mesi di attività |
Fatturato da attività 1 (in euro) |
Fatturato da attività 2 (in euro) |
| Totale |
450.000 |
45.000 |
| gen |
10.000 |
1.000 |
| feb |
20.000 |
2.000 |
###################################################################################################################################################### - FRAME - ########################################################## ##############################################################################################################
sostituendo questi tag ai tag si crea una pagina basata sui frame. supporta i seguenti attributi.
rows="valore,valore" per dividere la pagina in righe. Il valore puo essere [percentuale%-pixel-*]
il carattere "*" indica una dimensione dinamica si potrebbe usare anche :
rows="*,2*" crea due righe dinamiche di cui la seconda il doppio della prima. Ogni valore deve essere separato da una virgola.
cols="valore,valore" per dividere la pagina in colonne vale lo stesso che per l'attributo (rows).
usando le colonne una buona soluzione è definirne una fissa in pixel e una dinamica; cols="150,*" ma ovviamente l'unico limite è la fantasia.
###########################################################
Per creare pagine divise in righe e colonne bisogna annidare i tag . Ad esempio per avere una pagina formata da una riga superiore alta 100 pixel e una inferiore divisa in due colonne una fissa a 150 pixel ed una dinamica il codice è questo:
#############################################################
con gli attributi :
frameborder="pixel" framespacing="pixel" border="pixel"
si impostano bordi e spaziature tra i frame, inpostandoli tutti a "0" si eliminano i bordi, questi attributi vanno aggiunti a tutti i tag nelle strutture annidate.
indica la pagina da caricare nel frame, in caso di pagine divise in colonne la prima istanza di indica la prima colonna a sinistra, in pagine divise in righe il primo indica la prima riga in alto. Non necessita del tag di chiusura. attributi :
scrolling="valore" per impostare le barre di scorrimento, i valori possibili sono :
yes - no - auto
noresize per impedire di ridimensionare i frame
name="nome" per assegnare un nome al frame questo è molto importante per poi gestire l'apertura dei link all'interno del frame desiderato
Per guidare l'apertura dei link bisogna spostarsi nella pagina html e nel tag del link aggiungere l'attributo target="nomedelframe" per questo è importante aggiungere sempre l'attributo name al tag .
l'HTML consente di impiegare "valori speciali" per indirizzare contenuti dei link :
target="_blank" apre in una nuova pagina
target="_self" apre nello stesso frame che contiene il link
target="_parent" apre nel framset primario
target="_top" apre nella finestra ingrandita e si sostituisce agli altri frame sulla pagina
aggiungendo questi tag dopo l'ultimo tag si può indicare un messaggio ai visitatori che non visualizzano i frame ed eventualmente indirizzarli ad una versione della pagina che non usa i
frame.
Per inserire dei frames in una pagina html normale si usano i tag :
gli attributi vanno ripetuti sia per il tag