|
| |
Corso base di html
Elementi
di base (titolo della pagina, ecc.)
Proprietà
della pagina: sfondi e colori (del testo, dei link, ecc.)
Formattazione
del testo
Collegamenti
(link) interni, ad altre pagine, ad altri siti
Immagini
Formato
di struttura (dipende dal browser)
Divisori
Elenchi
puntati, numerati, ecc.
Tabelle
Tabelle
a struttura complessa (poco usate)
Moduli
(form)
Javascript
e Applet Java
Frame (pagine
con più sezioni)
Vari (keywords
per essere classificati nei motori di ricerca, ecc.)
Caratteri
speciali: come scriverli correttamente in html
I colori
nell'html: il codice esadecimale
Legenda
Note finali
ELEMENTI DI BASE
(tutti i documenti HTML
devono contenere questi tag)
|
|
| Tipo documento |
<HTML></HTML> |
(segnano l'inizio e la fine
del file) |
| Titolo |
<TITLE></TITLE> |
(titolo della pagina, da
inserire all’interno della testata) |
| Testata |
<HEAD></HEAD> |
(informazioni descrittive;
come il titolo) |
| Corpo |
<BODY></BODY> |
(contenuto della pagina) |
|
PROPRIETA' DELLA
PAGINA: SFONDI E COLORI
|
|
| Immagine di sfondo |
<BODY BACKGROUND="URL"> |
| Colore di sfondo |
<BODY BGCOLOR="#******"> |
| Colore del testo |
<BODY TEXT="#******"> |
| Colore dei collegamenti |
<BODY LINK="#******"> |
| Colore dei collegamenti
visitati |
<BODY VLINK="#******"> |
| Colore del collegamento
selezionato |
<BODY ALINK="#******"> |
| Neretto |
<B></B> |
|
| Corsivo |
<I></I> |
|
| Sottolineato |
<U></U> |
(A partire dalle versioni
4.*) |
| Apice |
<SUP></SUP> |
|
| Pendice |
<SUB></SUB> |
|
| Lampeggiante |
<BLINK></BLINK> |
(Supportato solo da Netscape) |
| Testo scorrevole |
<MARQUEE></MARQUEE> |
(Supportato solo da Internet
Explorer) |
| Macchina da scrivere |
<TT></TT> |
(Visualizzato a spaziatura
fissa) |
| Preformattato |
<PRE></PRE> |
(Visualizzato tale e quale,
compresi gli spazi) |
| Centrato |
<CENTER></CENTER> |
(sia per testo che immagini) |
| Font: dimensioni |
<FONT SIZE=?></FONT> |
(valori da 1 a 7) |
| Font: modifica misura |
<FONT SIZE="+|-?"></FONT> |
(valori da –3 a +3) |
| Font: colore |
<FONT COLOR="#******"></FONT> |
|
| Font: tipo |
<FONT FACE="Verdana"></FONT> |
(A partire dalle versioni
4.*) |
| Link a un documento |
<A HREF="URL"></A> |
| Definizione di un’àncora |
<A NAME="nomeàncora"></A> |
| Link a un’àncora
dello stessa pagina |
<A HREF="#nomeàncora"></A> |
| Link a un’àncora
di un’altra pagina |
<A HREF="URL#nomeàncora"></A> |
| Link da visualizzare in
altro frame |
<A HREF="URL" TARGET="_nomedelframe"></A> |
| Link a indirizzo e-mail |
<A HREF="mailto:indirizzo@posta.it"></A> |
| Visualizzazione immagine |
<IMG SRC="URL"> |
| Immagine: allineamento |
<IMG SRC="URL" ALIGN=TOP|BOTTOM|MIDDLE|LEFT|RIGHT> |
| Immagine: testo in alternativa |
<IMG SRC="URL" ALT="***"> |
| Immagine: dimensioni (in
pixel) |
<IMG SRC="URL" WIDTH=?
HEIGHT=?> |
| Immagine: dimensioni (in
% d. largh. e alt. d. pagina) |
<IMG SRC="URL" WIDTH=?%
HEIGHT=?%> |
| Immagine:bordo (in pixel) |
<IMG SRC="URL" BORDER=?> |
| Definizione della mappa |
<MAP NAME="***"></MAP> |
| Sezioni della mappa |
<AREA SHAPE="DEFAULT|RECT|CIRCLE|POLY"
COORDS=",,," HREF="URL"|NOHREF> |
FORMATO DI STRUTTURA
(le caratteristiche di visualizzazione
dipendono dai browser)
|
|
| Titoli |
<H?></H?> |
(sono definiti 6 livelli) |
| Titoli: allineamento |
<H? ALIGN=LEFT | CENTER | RIGHT></H?> |
(sinistra | centrato | destra) |
| Separazione |
<DIV></DIV> |
|
| Separazione: allineamento |
<DIV ALIGN=LEFT | RIGHT | CENTER | JUSTIFY></DIV> |
(sinistra | centrato | destra | giustif.) |
| Contenuto |
<SPAN></SPAN> |
(A partire dalle versioni
4.*) |
| Citazione |
<BLOCKQUOTE></BLOCKQUOTE> |
(in genere visualizz. come
blocco di testo rientr.) |
| Citazione breve |
<Q></Q> |
|
| Evidenziato |
<EM></EM> |
(in genere visualizzato
in corsivo) |
| Molto evidenziato |
<STRONG></STRONG> |
(in genere visualizzato
in neretto) |
| Font molto grande |
<BIG></BIG> |
|
| Font molto piccolo |
<SMALL></SMALL> |
|
| Paragrafo (spesso il comando
di chiusura viene omesso) |
<P></P> |
| Paragrafo: allineamento |
<P ALIGN=LEFT|CENTER|RIGHT></P> |
| Paragrafo: giustificazione
(Supportato solo da Netscape) |
<P ALIGN=JUSTIFY></P> |
| Interruzione riga (Singolo
ritorno a capo) |
<BR> |
| Riga orizzontale |
<HR> |
| Riga orizzontale: allineamento |
<HR ALIGN=LEFT|RIGHT|CENTER> |
| Riga orizzontale: spessore
(in pixel) |
<HR SIZE=?> |
| Riga orizzontale: larghezza
(in pixel) |
<HR WIDTH=?> |
| Riga orizzontale: larghezza
% risp. alla largh. della pagina |
<HR WIDTH="?%"> |
| Riga orizzontale: piena
(senza l'effetto ombra) |
<HR NOSHADE> |
|
ELENCHI PUNTATI,
NUMERATI, ECC.
|
|
| Elenco puntato |
<UL><LI></UL> |
(<LI> prima di ogni elemento) |
| Elenco puntato compatto |
<UL COMPACT></UL> |
|
| Tipo di puntatore |
<UL TYPE=DISC|CIRCLE|SQUARE> |
(per tutta la lista) |
| Tipo di puntatore |
<LI TYPE=DISC|CIRCLE|SQUARE> |
(questo e successivi) |
| Elenco numerato |
<OL><LI></OL> |
(<LI> prima di ogni elemento) |
| Elenco numerato compatto |
<OL COMPACT></OL> |
|
| Tipo di numero |
<OL TYPE=A|a|I|i|1> |
(per tutta la lista) |
| Tipo di numero |
<LI TYPE=A|a|I|i|1> |
(questo e successivi) |
| Numero di partenza |
<OL START=?> |
(per tutta la lista) |
| Numero di partenza |
<LI VALUE=?> |
(questo e successivi) |
| Elenco di definizioni |
<DL><DT><DD></DL> |
(<DT>=termine, <DD>=definizione) |
| Elenco di definizioni compatto |
<DL COMPACT></DL> |
|
| Elenco tipo Menu |
<MENU><LI></MENU> |
(<LI> prima di ogni elemento) |
| Elenco tipo Menu compatto |
<MENU COMPACT></MENU> |
|
| Elenco tipo indirizzario |
<DIR><LI></DIR> |
(<LI> prima di ogni elemento) |
| Elenco tipo indirizzario
compatto |
<DIR COMPACT></DIR> |
|
TABELLE
(alcuni effetti sono supportati
solo dalle versioni 4.* o superiori)
|
|
| Inizio e fine tabella |
<TABLE></TABLE> |
|
| Tabella: allineamento |
<TABLE ALIGN=LEFT|RIGHT|CENTER> |
(A partire dalle versioni
4.*) |
| Tabella: spessore bordo |
<TABLE BORDER=?></TABLE> |
(numero pixel; con '0' non
è visibile) |
| Spazio tra le celle |
<TABLE CELLSPACING=?> |
|
| Spazio nelle celle |
<TABLE CELLPADDING=?> |
|
| Larghezza tabella (in pixel) |
<TABLE WIDTH=?> |
|
| Larghezza % tabella |
<TABLE WIDTH="?%"> |
(in perc. risp. alla pagina
o alla tabella più esterna) |
| Tabella: colore di sfondo |
<TABLE BGCOLOR="#******"></TABLE> |
|
| Riga |
<TR></TR> |
|
| Allineamento della riga |
<TR ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM> |
|
| Cella |
<TD></TD> |
(deve essere all'interno
di una riga) |
| Allineamento della cella |
<TD ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM> |
|
| Senza interruzione |
<TD NOWRAP> |
|
| Unione colonne |
<TD COLSPAN=?> |
|
| Unione righe |
<TD ROWSPAN=?> |
|
| Larghezza celle (in pixel) |
<TD WIDTH=?> |
|
| Larghezza % celle |
<TD WIDTH="?%"> |
(in percentuale risp. alla
tabella) |
| Colore di sfondo della cella |
<TD BGCOLOR="#******"> |
|
TABELLE A STRUTTURA
COMPLESSA
(poco usate)
|
|
| Titolo |
<TH></TH> |
(uguale alle celle di dati,
ma in neretto e centrate) |
| Titolo: allineamento |
<TH ALIGN=LEFT|RIGHT|CENTER
VALIGN=TOP|MIDDLE|BOTTOM> |
|
| Corpo tabella |
<TBODY> |
|
| Pie' di pagina |
<TFOOT></TFOOT> |
(deve essere indicato prima
di THEAD) |
| Titolo |
<THEAD></THEAD> |
|
| Legenda |
<CAPTION></CAPTION> |
|
| Legenda: allineamento |
<CAPTION ALIGN=TOP|BOTTOM> |
(sopra o sotto alla tabella) |
| Colonna |
<COL></COL> |
(attributi per gruppi di
colonne) |
| Unione colonne |
<COL SPAN=?></COL> |
|
| Larghezza colonna |
<COL WIDTH=?></COL> |
|
| Larghezza % colonna |
<COL WIDTH="?%"></COL> |
|
MODULI (FORM)
(generalmente richiedono
uno script sul server;
alcuni effetti sono supportati
solo dalle versioni 4.* o superiori)
|
|
| Definizione |
<FORM ACTION="URL" METHOD=GET
| POST></FORM> |
| Campo di immissione: tipo |
<INPUT TYPE="TEXT
|
PASSWORD | CHECKBOX | RADIO | FILE | BUTTON | IMAGE
|
HIDDEN | SUBMIT | RESET">
(tipo di campo: testo
| password | casella | pallino | file | bottone | immagine
| non visualizzato | invio dati | cancella dati) |
| Nome del campo |
<INPUT NAME="***"> |
| Campo: valore visualizzato
di default |
<INPUT VALUE="***"> |
| Campo selezionato di default |
<INPUT CHECKED> (checkbox
e radio) |
| Campo: misura |
<INPUT SIZE=?> (in caratteri) |
| Campo: lunghezza massima |
<INPUT MAXLENGTH=?> (in
caratteri) |
| Bottone |
<BUTTON></BUTTON> |
| Bottone: nome |
<BUTTON NAME="***"></BUTTON> |
| Bottone: tipo |
<BUTTON TYPE="SUBMIT
|
RESET | BUTTON"></BUTTON>
(Invio dati | cancella
dati | etichetta) |
| Bottone: valore visualizzato
di default |
<BUTTON VALUE="***"></BUTTON> |
| Elenco a scelta singola |
<SELECT></SELECT> |
| Elenco a scelta multipla |
<SELECT MULTIPLE></SELECT>
(per selezionare piu' di un elemento) |
| Nome dell’elenco |
<SELECT NAME="***"></SELECT> |
| Numero di opzioni |
<SELECT SIZE=?></SELECT> |
| Opzioni |
<OPTION> (elementi che
possono essere selezionati) |
| Opzione selezionata di default |
<OPTION SELECTED> |
| Opzione: valore visualizzato
di default |
<OPTION VALUE="testoetichetta"> |
| Area immissione testo |
<TEXTAREA ROWS=? COLS=?></TEXTAREA> |
| Nome dell’area |
<TEXTAREA NAME="***"></TEXTAREA> |
| Upload file |
<FORM ENCTYPE="multipart/form-data"></FORM> |
| Script: inizio e fine |
<SCRIPT></SCRIPT> |
|
| Ubicazione |
<SCRIPT SRC="nomedelfile.js"></SCRIPT> |
|
| Linguaggio |
<SCRIPT LANGUAGE="javascript"></SCRIPT> |
(nel caso si tratti di javascript) |
| Applet: inizio e fine |
<APPLET></APPLET> |
|
| Nome del file |
<APPLET CODE="nomedelfile.jar"> |
|
| Parametri |
<APPLET PARAM NAME="***"> |
|
| Ubicazione |
<APPLET CODEBASE="URL"> |
|
| Denominazione |
<APPLET NAME="***"> |
(per riferimenti) |
| Testo in alternativa |
<APPLET ALT="***"> |
(per i browser che non supportano
Java) |
| Allineamento |
<APPLET ALIGN="LEFT |
RIGHT | CENTER"> |
|
| Dimensioni (in pixel) |
<APPLET WIDTH=? HEIGHT=?> |
|
| Spaziatura (in pixel) |
<APPLET HSPACE=? VSPACE=?> |
|
FRAME
(definizione e gestione
di specifiche sezioni della finestra)
|
|
| Documento Frame |
<FRAMESET></FRAMESET> |
(al posto di <BODY>) |
| Impostazione frame div.
Orizz. |
<FRAMESET ROWS=?,*></FRAMESET> |
(altezza in pixel o %) |
| Larghezza dei frame div.
Vert. |
<FRAMESET COLS=*,?></FRAMESET> |
(larghezza in pixel o %) |
| Bordo fra i frame |
<FRAMESET FRAMEBORDER="yes
| no"></FRAMESET> |
(Sì | No) |
| Larghezza dei bordi fra
i frame |
<FRAMESET BORDER=?> |
|
| Colore del bordo fra i frame |
<FRAMESET BORDERCOLOR="#******"> |
|
| Spaziatura fra i frame |
<FRAMESET FRAMESPACING=?></FRAMESET> |
|
| Definizione del Frame |
<FRAME> |
(contenuto di una sezione) |
| Documento da visualizzare |
<FRAME SRC="URL"> |
|
| Denominazione |
<FRAME NAME="***"|_blank|_self|_parent|_top> |
|
| Larghezza dei margini |
<FRAME MARGINWIDTH=?> |
(margine destro e sinistro) |
| Altezza dei margini |
<FRAME MARGINHEIGHT=?> |
(margine alto e basso) |
| Barra di scorrimento |
<FRAME SCROLLING="YES|NO|AUTO"> |
(sì | no | automatico) |
| Dimensione non modificabile |
<FRAME NORESIZE> |
|
| Presenza del bordo |
<FRAME FRAMEBORDER="yes|no"> |
|
| Colore del bordo |
<FRAME BORDERCOLOR="#******"> |
|
| Contenuto in assenza di
frame |
<NOFRAMES></NOFRAMES> |
(visualizzato dai browser
che non supportano i frame) |
| Frame interno |
<IFRAME></IFRAME> |
(con gli stessi attributi
di FRAME) |
| Frame interno: dimensioni |
<IFRAME WIDTH=? HEIGHT=?></IFRAME> |
|
| Frame interno: dimensioni
% |
<IFRAME WIDTH="?%" HEIGHT="?%"></IFRAME> |
|
| Commenti (non visualizzati
dal browser) |
<!-- testo del commento
--> |
| Dichiarazione tipo di file (primissima riga) |
<!doctype html public
"-//w3c//dtd html 4.0 transitional//en"> |
| Tipo documento |
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"> |
| Editor html utilizzato |
<meta name="Generator"
content="Mozilla/4.5 [it] (Win98; I) [Netscape]"> |
|
|
| Caricamento automatico dopo
? secondi |
<META HTTP-EQUIV="Refresh"
CONTENT="?; URL=URL"> |
|
|
|
|
Per facilitare l’opera
di indicizzazione dei motori di ricerca utilizzare i seguenti tag (da inserire
nella testata)
|
|
| Autore del documento html |
<meta name="Author" content="nomedellautore"> |
| Descrizione dei contenuti |
<meta name="Description"
content="testodelladescrizione"> |
| Parole-chiave per ricerche |
<meta name="Keywords"
content="parole, chiave, da, inserire"> |
CARATTERI SPECIALI
(devono essere digitati
in caratteri minuscoli)
|
|
| < (minore di) |
< |
| > (maggiore di) |
> |
| & (e commerciale) |
& |
| " (virgoletta) |
" |
| © (Copyright) |
© |
| ® (Marchio registrato) |
® |
| (Spazio) |
|
| ç (cediglia) |
ç |
| ñ (n con tilde) |
ñ |
| € (euro) |
€ |
| £ (lira) |
£ |
| ¥ (yen) |
¥ |
| § (sezione) |
§ |
|
| à |
à |
| é |
é |
| è |
è |
| ì |
ì |
| ò |
ò |
| ù |
ù |
| À |
À |
| È |
É |
| È |
È |
| Ì |
Ì |
| Ò |
Ò |
| Ù |
Ù |
|
La lista completa e'
disponibile all'indirizzo http://www.uni-passau.de/%7Eramsch/iso8859-1.html
|
I COLORI NELL'HTML:
il codice esadecimale
|
|
Per definire gli oltre 16 milioni di colori disponibili sul pc,
ossia le varie combinazioni di 256 livelli di rosso, di verde e di blu, per indicare ad esempio un colore con i seguenti livelli di rosso, verde e blu: RGB(130,0,255),
si usa il seguente codice esadecimale: "#8200FF" (nella forma #RRGGBB),
ottenuto mediante coppie di caratteri esadecimali (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F).
Ecco alcuni esempi di codici esadecimali dei colori
Istruzioni: Clicca sul colore desiderato per visualizzarne il codice esadecimale da inserire nelle pagine web
Poi si può anche modificare manualmente il codice colore nel campo Codice colore HEX: basterà un clic su "Test" per visualizzarlo.
LEGENDA
(simboli utilizzati in questa
dispensa)
|
|
Le coppie di tag vanno intese
come delle parentesi che si aprono e si chiudono e tutto il contenuto deve
risiedere all’interno.
Per avere esempi pratici
di utilizzo dei codici quale migliore scuola dei siti realizzati da professionisti?
Quando vedete una pagina Web su Internet e vi piacerebbe realizzarne una
così, andate a curiosare nel codice html: è il modo migliore
per apprenderlo bene (con Internet Explorer usate il tasto destro del mouse
-> HTML oppure Menu Visualizza -> HTML; con Netscape: Menu Visualizza ->
Sorgente Pagina).
|
| |
Navigazione alternativa:
Servizi:
Mail list:
Il luogo ideale per esprimere i tuoi dubbi e chiacchierare con gli
iscritti
Forum:
Cose serie e leggere postate in internet
HELLBRAIN
Qualche notizia sul mio conto per scoprire chi sono
Ricerca in questo sito:
Non trovi qualcosa? con questo motore di ricerca interno le cose non
miglioreranno!
Link preferiti:
Hai un tuo sito preferito, magari il tuo? puoi metterlo qui!
Awards
Candida il tuo sito e scopri chi è stato premiato!
Chat
Scegli un nick e dai appuntamento qui ai tuoi amici!
Guestbook
E per ultimo, il libro degli ospiti
Vota questo sito
Siti amici
Scambio banner
Segnala ad un amico
|
|
Cerchi
un casco per la tua moto a 50 euro?