|
HTML in 10 passi (ovvero il Bignami dell'HTML)Liberamente adattato da Maria Simi sulla base di una guida di Paolo
Pavan
<HTML> <HEAD> <TITLE> Il titolo del documento: comparira` nell'intestazione del browser </TITLE> </HEAD> <BODY> Il corpo del documento: contiene tutto cio` che il browser visualizzera` </BODY> </HTML> Risultato: Il corpo del documento: contiene tutto cio` che il browser visualizzera` <H1> Titolo di livello 1</H1> <H2> Titolo di livello 2</H2> <H3> Titolo di livello 3</H3> <H2> Titolo di livello 2</H2> I tag <Hn> servono a definire il livello dei titoli e di conseguenza stabilire la dimensione dei caratteri; i livelli vanno da <H1> ad <H6>. Risultato: Titolo di livello 1Titolo di livello 2Titolo di livello 3Titolo di livello 2<P>Nuovo paragrafo</P> I tag <P> e </P> includono un paragrafo. Il tag <P> può anche essere usato da solo come separatore di paragrafi. <B>Formatta il testo in grassetto </B> <STRONG>Formatta il testo in grassetto </STRONG> Risultato: Formatta il testo in grassetto <I>Formatta il testo in corsivo</I> <EM>Formatta il testo in corsivo</EM> Risultato: Formatta il testo in corsivo <CENTER>Centra nella pagina sia il testo che le immagini</CENTER> Risultato: Centra nella pagina sia il testo che le immagini <BLINK>Fa lampeggire il testo (da usare con parsimonia!)</BLINK> Risultato:
<FONT SIZE=5>Pone la dimensione dei caratteri a 5</FONT> La dimensione dei caratteri può essere da 1 a 7. Risultato: Pone la dimensione dei caratteri a 5 <FONT SIZE=+1>Aumenta di 1 la dimensione dei caratteri</FONT> <FONT SIZE=-1>Diminuisce di 1 la dimensione dei caratteri</FONT> Risultato: Aumenta di 1 la dimensione dei caratteri <BASEFONT SIZE=4> La dimensione dei caratteri dei una pagina è normalmente 3. Con questo comando è possibile indicare un valore diverso (da 1 a 7) per le dimensioni dei caratteri di una pagina. <P> Per lasciare una riga bianca. <BR> Per interrompere una riga, e andare a capo. <HR> Inserisce una riga orizzontale <A HREF="doc.html"> Hyperlink al documento di nome doc.html </A> Risultato: Hyperlink al documento di nome doc.html Serve ad inserire un normale ipercollegamento; va indicato l'indirizzo del documento da collegare, a cui si arriverà cliccando sul testo contenuto tra i Tag 'A'. Se il documento non si trova nella stessa directory del documento attuale, andrà specificato tutto il percorso o l'URL completo. Ad esempio: <A HREF="http://www.humnet.unipi.it/~simi/doc.html"> Hyperlink al documento che si trova sul server www.humnet.unipi.it, all'indirizzo ~simi/doc.html </A> <A HREF="#xxxx"></A> <A HREF="URL#xxxx"></A> Permette di collegarsi ad una parte dello stesso documento o di un altro documento utilizzando un'àncora predisposta di nome xxxx <A NAME="xxxx"></A> Predispone un'àncora di nome xxxx nel documento. <IMG SRC="immagine.gif"> Permette di inserire un'immagine che si trova nel file "immagine.gif". <IMG SRC="immagine.gif" ALIGN=TOP|BOTTOM|MIDDLE> L'attributo ALIGN permette di regolare la posizione verticale dell'immagine e cioè di dire se essa è allineata in alto (TOP), in basso (BOTTOM) o centrata (MIDDLE)rispetto al testo che segue. <IMG SRC="gioconda.gif" ALT="Immagine della Gioconda"> Permette di visualizzare del testo sostitutivo quando l'immagine non viene caricata nella pagina, in modo da avere anche in questo caso un'idea del contenuto. <UL TYPE=square> <LI>Primo elemento <LI>Secondo elemento <LI>Terzo elemento </UL> Gli elementi contenuti, preceduti sempre da <LI>, risultano organizzati in una lista non numerata. Risultato:
<UL TYPE=DISC|CIRCLE|SQUARE> Permette di controllare se usare un punto, un circoletto o un quadrato davanti ad ogni elemento della lista. <OL> <LI>Primo elemento <LI>Secondo elemento <LI>Terzo elemento </OL> Gli elementi contenuti, risultano organizzati in una lista numerata. Risultato:
<OL TYPE=A|a|I|i|1> Permette di stabilire per tutti gli elementi della lista quale tipo di numerazione usare. <LI TYPE=A|a|I|i|1> Permette di stabilire per ogni singolo elemento quale tipo di numerazione utilizzare.
<DL COMPACT> <DT>A <DD> lettere maiuscole <DT>a <DD> lettere minuscole <DT>I <DD> numeri romani <DT>i <DD> un numero congruo di 'i' <DT>1 <DD> lista numerata </DL> Permette di creare una lista di definizioni in cui <DT> rappresenta il termine e <DD> la definizione rientrata. Il risultato è illustrato sopra. <BODY BACKGROUND="immagine.gif"> Permette di inserire un'immagine(*.gif,*.jpg) da usare come sfondo della pagina. <BODY BGCOLOR="#xxyyzz"> Permette di dare un colore di sfondo alla pagina utilizzando il codice RGB (una sequenza di 6 cifre esadecimali, da 0 a F) Per comodità, sono stati definiti 12 colori di base, sufficienti a coprire la maggior parte delle esigenze:
<BODY TEXT="#xxyyzz"> Permette di specificare il colore del testo. <BODY LINK="#xxyyzz"> Permette di specificare il colore dei collegamenti. <BODY VLINK="#xxyyzz"> Permette di specificare il colore dei collegamenti già seguiti. <BODY ALINK="#xxyyzz"> Permette di specificare il colore dei collegamenti quando si cliccano. <FONT COLOR=red>Per cambiare il colore del testo.</FONT> Serve per indicare il colore da dare ai caratteri contenuti all'interno del Tag FONT. Risultato: Per cambiare il colore del testo. <TABLE BORDER=1> <TR> <TD>Uno</TD> <TD>Due</TD> <TD>Tre</TD></TR> <TR> <TD>Quattro</TD> <TD>Cinque</TD> <TD>Sei</TD></TR> <TR> <TD>Sette</TD> <TD>Otto</TD> <TD>Nove</TD> </TR> </TABLE> Definisce una tabella con tre righe, di tre elementi ciascuna. Risultato:
Usando l'attributo BORDER=n e' possibile scegliere lo spessore del bordo da visualizzare (BORDER=0 nessun bordo). <TABLE CELLSPACING=xx> Permette di regolare lo spazio tra le celle contigue. <TABLE CELLPADDING=xx> Permette di regolare lo spazio occupato da ogni singola cella. <TABLE WIDTH=xx> Permette di stabilire la larghezza in pixel della tabella. <TABLE WIDTH=xx %> Permette di stabilire la larghezza in pixel che la tabella deve avere in percentuale rispetto alla pagina. <TR ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> I diversi attributi permettono di allineare il contenuto della celle di una riga in orizzontale (ALIGN) ed in verticale (VALIGN). <TD ALIGN=LEFT|RIGHT|CENTER VALIGN=TOP|MIDDLE|BOTTOM> I diversi attributi permettono di allineare il contenuto di una cella in orizzontale (ALIGN) ed in verticale (VALIGN). <TD COLSPAN=x> Indica il numero x di colonne da occupare con la cella. <TD ROWSPAN=x> Indica il numero di righe da occupare con la cella. <TD WIDTH=xx> Permette di stabilire la larghezza in pixel della cella. <TD WIDTH= xx %> Permette di stabilire la larghezza in percentuale rispetto alla riga della cella. <CAPTION> Legenda </CAPTION> Viene usato per indicare la legenda della tabella Sono caratteri che devono essere scritti in modo particolare: si tratta in genere di lettere accentate o caratteri, come il < e il >, che hanno un significato particolare per i browser. Eccone alcuni:
|