A lezione con HtmlHeart

« Older   Newer »
  Share  
BTW
TOPIC_ICON12  CAT_IMG Posted on 22/1/2012, 19:37
Avatar

προοίμιο

Group:
» Kaze Brothers' Fan
Posts:
1,376

Status:


Impariamo a "leggere" l'html! ^__^
So che la parte teorica è noiosissima,ma è fondamentale per farvi capire dove mettere le mani e soprattutto come modificarli.
ps:Alla fine di ogni lezione di teoria c'è un premio per consolarvi! XD (trucchi per firma/avatar/profilo)
Buona Lettura ^__-

Parte teorica

- L'HTML !
SPOILER (clicca per visualizzare)
L'HTML è il linguaggio con cui potete indicare come i vari elementi vanno disposti in una pagina Web. Un documento html non è nient'altro infatti che un file di testo con delle indicazioni sul colore delle scritte, sulla posizione delle immagini all'interno della pagina, su come far scorrere il testo, e altre cose di questo genere.

- Come è fatta una pagina HTML?
SPOILER (clicca per visualizzare)
I TAG dell'HTML: come scriverli!
Struttura di un tag

All'interno di ogni pagina è presente una serie di marcatori (i TAG), a cui viene affidata la visualizzazione e che hanno differenti nomi a seconda della loro funzione. I tag vanno inseriti tra parentesi uncinate (<TAG>), la chiusura del tag viene indicata con una "/" (è il simbolo comunemente detto "slash". Quindi: </TAG>). Il contenuto va inserito tra l'apertura e la chiusura del tag medesimo, secondo questa forma:
CODICE
<TAG attributi>contenuto</TAG>

Ecco un esempio, con una sintassi che serve a disporre un testo giustificato a destra:
CODICE
<P align="right"><b>testo</b></P>

dall'esempio è evidente che la struttura di un attributo è: attributo="valore"
Quindi in definita la struttura di un tag sarà:
CODICE
<TAG attributo_1="valore1" attributo_2="valore2">contenuto</TAG>

Alcuni particolari tag non hanno contenuto - perché ad esempio indicano la posizione di alcuni elementi (come il tag delle immagini) -, conseguentemente questi tag non hanno neanche chiusura. La loro forma sarà dunque:

<tag attributi>
Ecco un esempio di immagine:

CODICE
<IMG widht="20" height="20" src="miaImmagine.gif" alt="alt">

come si vede il tag non viene chiuso. Questo tipo di tag viene detto "empty", cioè "vuoto".

Annidamento
Una caratteristica importante del codice HTML è che i tag possono essere annidati l'uno dentro l'altro. Anzi molto spesso è necessario farlo.
esempio:

CODICE
<TAG1 attributi>
contenuto 1

<TAG2>
 contenuto 2
</TAG2>

</TAG1>
Potremmo quindi avere ad esempio:

<P align="right">
testo 1

 <P align="left">
   testo 2
 </P>

</P>

L'annidamento ci permette quindi di attribuire formattazioni successive al testo che stiamo inserendo.

Come si può vedere già nell'esempio, è una buona norma utilizzare dei caratteri di tabulazione (il tasto tab a sinistra della lettera Q) per far rientrare il testo ogni volta che ci troviamo in presenza di un annidamento e man mano che entriamo più in profondità nel documento.
In pratica apertura e chiusura del tag si trovano allo stesso livello, mentre il contenuto viene spostato verso destra di un tab: non si tratta soltanto di un fattore visivo, ma l'allineamento di apertura e chiusura tag viene mantenuto anche se scorriamo in verticale il documento con il cursore.
Questa procedura si chiama indentazione, e grazie ad essa il codice HTML risulta più leggibile. Si confronti ad esempio:

CODICE
<P align="right">testo 1<P align="left">        testo 2        </P></P>
con:

<P align="right">
testo 1
<P align="left">
  testo 2
</P>
</P>

per il browser i due esempi sono equivalenti, ma per l'utente umano è evidente che la differenza è notevole: pensate ad una pagina complessa visualizzata in un unico blocco di testo: sarebbe del tutto illeggibile!

- I Commenti
SPOILER (clicca per visualizzare)
Un'altra strategia importante, per rendere il nostro codice più leggibile è quella di inserire dei "commenti" nei punti più significativi: si tratta di indicazioni significative per il webmaster, ma invisibili al browser. Inserendo i commenti in punti specifici del documento ci permette di mantenere l'orientamento anche in file molto complessi e lunghi. La sintassi è la seguente:

<!-- questo è un commento -->
e ci permette di "commentare" i vari punti della pagina.
esempio:

CODICE
<!-- menu di sinistra -->
<!-- barra in alto -->
<!-- eccetera -->

- Maiuscolo o minuscolo?
SPOILER (clicca per visualizzare)
Basandoci sulle indicazioni precedenti, incominciamo a scrivere la nostra prima pagina html.

Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
esamineremo ulteriormente questa riga nell'appendice, per ora lasciamola così.

Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

... altri tag ...

</html>
Un documento HTML è normalmente diviso in due sezioni:

Testa (<head>) Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera
Corpo (<body>) Qui è racchiuso il contenuto vero e proprio del documento
Ci occuperemo in seguito della head (l'argomento verrà ripreso poi nella conclusione della guida. Per ora facciamo riferimento soltanto a due tag che devono essere presenti in questa sezione:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

<title>Nome del sito</title>
Il title è il titolo della pagina e compare in alto sulla barra del browser (se guardate in alto a sinistra del browser noterete la scritta "Struttura della pagina"). È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo.

Da quanto abbiamo detto la nostra prima pagina sarà questa, che è consultabile anche nell'esempio allegato:

CODICE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>HTML.it</title>
</head>
<body>
  <!-- Scriveremo qui -->
>
  Qui il nostro contenuto

</body>
</html>

D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente.

- Struttura della pagina
SPOILER (clicca per visualizzare)
Basandoci sulle indicazioni precedenti, incominciamo a scrivere la nostra prima pagina html.

Per prima cosa inseriamo una riga che indica che stiamo utilizzando le specifiche del World Wide Web Consortium che riguardano il codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
esamineremo ulteriormente questa riga nell'appendice, per ora lasciamola così.

Poi apriamo il nostro primo tag, che indica che quanto è compreso tra apertura e chiusura è in codice HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>

... altri tag ...

</html>
Un documento HTML è normalmente diviso in due sezioni:

Testa (<head>) Contiene informazioni non immediatamente percepibili, ma che riguardano il modo in cui il documento deve essere letto e interpretato. Questo è il luogo dove scrivere - ad esempio - i meta-tag (alcuni sono ad esclusivo beneficio dei motori di ricerca), script JavaScript o VbScript, fogli di stile, eccetera
Corpo (<body>) Qui è racchiuso il contenuto vero e proprio del documento
Ci occuperemo in seguito della head (l'argomento verrà ripreso poi nella conclusione della guida. Per ora facciamo riferimento soltanto a due tag che devono essere presenti in questa sezione:

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
indica al browser che deve caricare il set di caratteri occidentale (e non - ad esempio - il set di caratteri giapponese).

<title>Nome del sito</title>
Il title è il titolo della pagina e compare in alto sulla barra del browser (se guardate in alto a sinistra del browser noterete la scritta "Struttura della pagina"). È bene compilarlo da subito, onde evitare poi di avere pagine senza titolo.

Da quanto abbiamo detto la nostra prima pagina sarà questa, che è consultabile anche nell'esempio allegato:

CODICE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>HTML.it</title>
</head>
<body>
  <!-- Scriveremo qui -->
>
  Qui il nostro contenuto

</body>
</html>

D'ora in poi i vari tag che impareremo all'interno della guida andranno scritti all'interno del body, quando non sia indicato diversamente.


- Lo sfondo di un documento HTML <-- (per chi volesse cambiare lo sfondo nella firma,ecc...)

SPOILER (clicca per visualizzare)
Per inserire un’immagine come sfondo è sufficiente utilizzare la seguente sintassi:

<body background="imgSfondo.gif">
Per ora presupponiamo che l’immagine di sfondo si trovi nella stessa cartella della nostra pagina HTML, vedremo in seguito (quando parleremo delle immagini) come inserire immagini che si trovano in altre cartelle.

L’immagine di sfondo verrà ripetuta in orizzontale e in verticale.

È anche possibile combinare i due attributi, in modo che mentre l’immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina:

CODICE
<body bgcolor="#0000ff" background="IMMAGINE">


Approfondiamo questa parte: #0000ff
Sapete cos'è? Il colore! (non togliete il cancelletto) Potete personalizzarlo con la tavola dei colori in fondo alla teoria.


- Tabella colori HTML

Tabella Colori HTML


ff00feff00fdff00fcff00fbff00faff00f9ff00f8ff00f7ff00f6ff00f5ff00f4ff00f3ff00f2ff00f1ff00f0ff00ef
ff00eeff00edff00ecff00ebff00eaff00e9ff00e8ff00e7ff00e6ff00e5ff00e4ff00e3ff00e2ff00e1ff00e0ff00df
ff00deff00ddff00dcff00dbff00daff00d9ff00d8ff00d7ff00d6ff00d5ff00d4ff00d3ff00d2ff00d1ff00d0ff00cf
ff00ceff00cdff00ccff00cbff00caff00c9ff00c8ff00c7ff00c6ff00c5ff00c4ff00c3ff00c2ff00c1ff00c0ff00bf
ff00beff00bdff00bcff00bbff00baff00b9ff00b8ff00b7ff00b6ff00b5ff00b4ff00b3ff00b2ff00b1ff00b0ff00af
ff00aeff00adff00acff00abff00aaff00a9ff00a8ff00a7ff00a6ff00a5ff00a4ff00a3ff00a2ff00a1ff00a0ff009f
ff009eff009dff009cff009bff009aff0099ff0098ff0097ff0096ff0095ff0094ff0093ff0092ff0091ff0090ff008f
ff008eff008dff008cff008bff008aff0089ff0088ff0087ff0086ff0085ff0084ff0083ff0082ff0081ff0080ff007f
ff007eff007dff007cff007bff007aff0079ff0078ff0077ff0076ff0075ff0074ff0073ff0072ff0071ff0070ff006f
ff006eff006dff006cff006bff006aff0069ff0068ff0067ff0066ff0065ff0064ff0063ff0062ff0061ff0060ff005f
ff005eff005dff005cff005bff005aff0059ff0058ff0057ff0056ff0055ff0054ff0053ff0052ff0051ff0050ff004f
ff004eff004dff004cff004bff004aff0049ff0048ff0047ff0046ff0045ff0044ff0043ff0042ff0041ff0040ff003f
ff003eff003dff003cff003bff003aff0039ff0038ff0037ff0036ff0035ff0034ff0033ff0032ff0031ff0030ff002f
ff002eff002dff002cff002bff002aff0029ff0028ff0027ff0026ff0025ff0024ff0023ff0022ff0021ff0020ff001f
ff001eff001dff001cff001bff001aff0019ff0018ff0017ff0016ff0015ff0014ff0013ff0012ff0011ff0010ff000f
ff000eff000dff000cff000bff000aff0009ff0008ff0007ff0006ff0005ff0004ff0003ff0002ff0001ff0000ff0000
ff0100ff0200ff0300ff0400ff0500ff0600ff0700ff0800ff0900ff0a00ff0b00ff0c00ff0d00ff0e00ff0f00ff1000
ff1100ff1200ff1300ff1400ff1500ff1600ff1700ff1800ff1900ff1a00ff1b00ff1c00ff1d00ff1e00ff1f00ff2000
ff2100ff2200ff2300ff2400ff2500ff2600ff2700ff2800ff2900ff2a00ff2b00ff2c00ff2d00ff2e00ff2f00ff3000
ff3100ff3200ff3300ff3400ff3500ff3600ff3700ff3800ff3900ff3a00ff3b00ff3c00ff3d00ff3e00ff3f00ff4000
ff4100ff4200ff4300ff4400ff4500ff4600ff4700ff4800ff4900ff4a00ff4b00ff4c00ff4d00ff4e00ff4f00ff5000
ff5100ff5200ff5300ff5400ff5500ff5600ff5700ff5800ff5900ff5a00ff5b00ff5c00ff5d00ff5e00ff5f00ff6000
ff6100ff6200ff6300ff6400ff6500ff6600ff6700ff6800ff6900ff6a00ff6b00ff6c00ff6d00ff6e00ff6f00ff7000
ff7100ff7200ff7300ff7400ff7500ff7600ff7700ff7800ff7900ff7a00ff7b00ff7c00ff7d00ff7e00ff7f00ff8000
ff8100ff8200ff8300ff8400ff8500ff8600ff8700ff8800ff8900ff8a00ff8b00ff8c00ff8d00ff8e00ff8f00ff9000
ff9100ff9200ff9300ff9400ff9500ff9600ff9700ff9800ff9900ff9a00ff9b00ff9c00ff9d00ff9e00ff9f00ffa000
ffa100ffa200ffa300ffa400ffa500ffa600ffa700ffa800ffa900ffaa00ffab00ffac00ffad00ffae00ffaf00ffb000
ffb100ffb200ffb300ffb400ffb500ffb600ffb700ffb800ffb900ffba00ffbb00ffbc00ffbd00ffbe00ffbf00ffc000
ffc100ffc200ffc300ffc400ffc500ffc600ffc700ffc800ffc900ffca00ffcb00ffcc00ffcd00ffce00ffcf00ffd000
ffd100ffd200ffd300ffd400ffd500ffd600ffd700ffd800ffd900ffda00ffdb00ffdc00ffdd00ffde00ffdf00ffe000
ffe100ffe200ffe300ffe400ffe500ffe600ffe700ffe800ffe900ffea00ffeb00ffec00ffed00ffee00ffef00fff000
fff100fff200fff300fff400fff500fff600fff700fff800fff900fffa00fffb00fffc00fffd00fffe00ffff00feff00
fdff00fcff00fbff00faff00f9ff00f8ff00f7ff00f6ff00f5ff00f4ff00f3ff00f2ff00f1ff00f0ff00efff00eeff00
edff00ecff00ebff00eaff00e9ff00e8ff00e7ff00e6ff00e5ff00e4ff00e3ff00e2ff00e1ff00e0ff00dfff00deff00
ddff00dcff00dbff00daff00d9ff00d8ff00d7ff00d6ff00d5ff00d4ff00d3ff00d2ff00d1ff00d0ff00cfff00ceff00
cdff00ccff00cbff00caff00c9ff00c8ff00c7ff00c6ff00c5ff00c4ff00c3ff00c2ff00c1ff00c0ff00bfff00beff00
bdff00bcff00bbff00baff00b9ff00b8ff00b7ff00b6ff00b5ff00b4ff00b3ff00b2ff00b1ff00b0ff00afff00aeff00
adff00acff00abff00aaff00a9ff00a8ff00a7ff00a6ff00a5ff00a4ff00a3ff00a2ff00a1ff00a0ff009fff009eff00
9dff009cff009bff009aff0099ff0098ff0097ff0096ff0095ff0094ff0093ff0092ff0091ff0090ff008fff008eff00
8dff008cff008bff008aff0089ff0088ff0087ff0086ff0085ff0084ff0083ff0082ff0081ff0080ff007fff007eff00
7dff007cff007bff007aff0079ff0078ff0077ff0076ff0075ff0074ff0073ff0072ff0071ff0070ff006fff006eff00
6dff006cff006bff006aff0069ff0068ff0067ff0066ff0065ff0064ff0063ff0062ff0061ff0060ff005fff005eff00
5dff005cff005bff005aff0059ff0058ff0057ff0056ff0055ff0054ff0053ff0052ff0051ff0050ff004fff004eff00
4dff004cff004bff004aff0049ff0048ff0047ff0046ff0045ff0044ff0043ff0042ff0041ff0040ff003fff003eff00
3dff003cff003bff003aff0039ff0038ff0037ff0036ff0035ff0034ff0033ff0032ff0031ff0030ff002fff002eff00
2dff002cff002bff002aff0029ff0028ff0027ff0026ff0025ff0024ff0023ff0022ff0021ff0020ff001fff001eff00
1dff001cff001bff001aff0019ff0018ff0017ff0016ff0015ff0014ff0013ff0012ff0011ff0010ff000fff000eff00
0dff000cff000bff000aff0009ff0008ff0007ff0006ff0005ff0004ff0003ff0002ff0001ff0000ff0000ff0100ff02
00ff0300ff0400ff0500ff0600ff0700ff0800ff0900ff0a00ff0b00ff0c00ff0d00ff0e00ff0f00ff1000ff1100ff12
00ff1300ff1400ff1500ff1600ff1700ff1800ff1900ff1a00ff1b00ff1c00ff1d00ff1e00ff1f00ff2000ff2100ff22
00ff2300ff2400ff2500ff2600ff2700ff2800ff2900ff2a00ff2b00ff2c00ff2d00ff2e00ff2f00ff3000ff3100ff32
00ff3300ff3400ff3500ff3600ff3700ff3800ff3900ff3a00ff3b00ff3c00ff3d00ff3e00ff3f00ff4000ff4100ff42
00ff4300ff4400ff4500ff4600ff4700ff4800ff4900ff4a00ff4b00ff4c00ff4d00ff4e00ff4f00ff5000ff5100ff52
00ff5300ff5400ff5500ff5600ff5700ff5800ff5900ff5a00ff5b00ff5c00ff5d00ff5e00ff5f00ff6000ff6100ff62
00ff6300ff6400ff6500ff6600ff6700ff6800ff6900ff6a00ff6b00ff6c00ff6d00ff6e00ff6f00ff7000ff7100ff72
00ff7300ff7400ff7500ff7600ff7700ff7800ff7900ff7a00ff7b00ff7c00ff7d00ff7e00ff7f00ff8000ff8100ff82
00ff8300ff8400ff8500ff8600ff8700ff8800ff8900ff8a00ff8b00ff8c00ff8d00ff8e00ff8f00ff9000ff9100ff92
00ff9300ff9400ff9500ff9600ff9700ff9800ff9900ff9a00ff9b00ff9c00ff9d00ff9e00ff9f00ffa000ffa100ffa2
00ffa300ffa400ffa500ffa600ffa700ffa800ffa900ffaa00ffab00ffac00ffad00ffae00ffaf00ffb000ffb100ffb2
00ffb300ffb400ffb500ffb600ffb700ffb800ffb900ffba00ffbb00ffbc00ffbd00ffbe00ffbf00ffc000ffc100ffc2
00ffc300ffc400ffc500ffc600ffc700ffc800ffc900ffca00ffcb00ffcc00ffcd00ffce00ffcf00ffd000ffd100ffd2
00ffd300ffd400ffd500ffd600ffd700ffd800ffd900ffda00ffdb00ffdc00ffdd00ffde00ffdf00ffe000ffe100ffe2
00ffe300ffe400ffe500ffe600ffe700ffe800ffe900ffea00ffeb00ffec00ffed00ffee00ffef00fff000fff100fff2
00fff300fff400fff500fff600fff700fff800fff900fffa00fffb00fffc00fffd00fffe00ffff00feff00fdff00fcff
00fbff00faff00f9ff00f8ff00f7ff00f6ff00f5ff00f4ff00f3ff00f2ff00f1ff00f0ff00efff00eeff00edff00ecff
00ebff00eaff00e9ff00e8ff00e7ff00e6ff00e5ff00e4ff00e3ff00e2ff00e1ff00e0ff00dfff00deff00ddff00dcff
00dbff00daff00d9ff00d8ff00d7ff00d6ff00d5ff00d4ff00d3ff00d2ff00d1ff00d0ff00cfff00ceff00cdff00ccff
00cbff00caff00c9ff00c8ff00c7ff00c6ff00c5ff00c4ff00c3ff00c2ff00c1ff00c0ff00bfff00beff00bdff00bcff
00bbff00baff00b9ff00b8ff00b7ff00b6ff00b5ff00b4ff00b3ff00b2ff00b1ff00b0ff00afff00aeff00adff00acff
00abff00aaff00a9ff00a8ff00a7ff00a6ff00a5ff00a4ff00a3ff00a2ff00a1ff00a0ff009fff009eff009dff009cff
009bff009aff0099ff0098ff0097ff0096ff0095ff0094ff0093ff0092ff0091ff0090ff008fff008eff008dff008cff
008bff008aff0089ff0088ff0087ff0086ff0085ff0084ff0083ff0082ff0081ff0080ff007fff007eff007dff007cff
007bff007aff0079ff0078ff0077ff0076ff0075ff0074ff0073ff0072ff0071ff0070ff006fff006eff006dff006cff
006bff006aff0069ff0068ff0067ff0066ff0065ff0064ff0063ff0062ff0061ff0060ff005fff005eff005dff005cff
005bff005aff0059ff0058ff0057ff0056ff0055ff0054ff0053ff0052ff0051ff0050ff004fff004eff004dff004cff
004bff004aff0049ff0048ff0047ff0046ff0045ff0044ff0043ff0042ff0041ff0040ff003fff003eff003dff003cff
003bff003aff0039ff0038ff0037ff0036ff0035ff0034ff0033ff0032ff0031ff0030ff002fff002eff002dff002cff
002bff002aff0029ff0028ff0027ff0026ff0025ff0024ff0023ff0022ff0021ff0020ff001fff001eff001dff001cff
001bff001aff0019ff0018ff0017ff0016ff0015ff0014ff0013ff0012ff0011ff0010ff000fff000eff000dff000cff
000bff000aff0009ff0008ff0007ff0006ff0005ff0004ff0003ff0002ff0001ff0000ff0000ff0100ff0200ff0300ff
0400ff0500ff0600ff0700ff0800ff0900ff0a00ff0b00ff0c00ff0d00ff0e00ff0f00ff1000ff1100ff1200ff1300ff
1400ff1500ff1600ff1700ff1800ff1900ff1a00ff1b00ff1c00ff1d00ff1e00ff1f00ff2000ff2100ff2200ff2300ff
2400ff2500ff2600ff2700ff2800ff2900ff2a00ff2b00ff2c00ff2d00ff2e00ff2f00ff3000ff3100ff3200ff3300ff
3400ff3500ff3600ff3700ff3800ff3900ff3a00ff3b00ff3c00ff3d00ff3e00ff3f00ff4000ff4100ff4200ff4300ff
4400ff4500ff4600ff4700ff4800ff4900ff4a00ff4b00ff4c00ff4d00ff4e00ff4f00ff5000ff5100ff5200ff5300ff
5400ff5500ff5600ff5700ff5800ff5900ff5a00ff5b00ff5c00ff5d00ff5e00ff5f00ff6000ff6100ff6200ff6300ff
6400ff6500ff6600ff6700ff6800ff6900ff6a00ff6b00ff6c00ff6d00ff6e00ff6f00ff7000ff7100ff7200ff7300ff
7400ff7500ff7600ff7700ff7800ff7900ff7a00ff7b00ff7c00ff7d00ff7e00ff7f00ff8000ff8100ff8200ff8300ff
8400ff8500ff8600ff8700ff8800ff8900ff8a00ff8b00ff8c00ff8d00ff8e00ff8f00ff9000ff9100ff9200ff9300ff
9400ff9500ff9600ff9700ff9800ff9900ff9a00ff9b00ff9c00ff9d00ff9e00ff9f00ffa000ffa100ffa200ffa300ff
a400ffa500ffa600ffa700ffa800ffa900ffaa00ffab00ffac00ffad00ffae00ffaf00ffb000ffb100ffb200ffb300ff
b400ffb500ffb600ffb700ffb800ffb900ffba00ffbb00ffbc00ffbd00ffbe00ffbf00ffc000ffc100ffc200ffc300ff
c400ffc500ffc600ffc700ffc800ffc900ffca00ffcb00ffcc00ffcd00ffce00ffcf00ffd000ffd100ffd200ffd300ff
d400ffd500ffd600ffd700ffd800ffd900ffda00ffdb00ffdc00ffdd00ffde00ffdf00ffe000ffe100ffe200ffe300ff
e400ffe500ffe600ffe700ffe800ffe900ffea00ffeb00ffec00ffed00ffee00ffef00fff000fff100fff200fff300ff
f400fff500fff600fff700fff800fff900fffa00fffb00fffc00fffd00fffe00ffff00ff    



#FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF
#FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF
#FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF
#FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF
#FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF
#FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF
#CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF
#CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF
#CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF
#CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF
#CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF
#CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF
#990000 #990033 #990066 #990099 #9900CC #9900FF
#993300 #993333 #993366 #993399 #9933CC #9933FF
#996600 #996633 #996666 #996699 #9966CC #9966FF
#999900 #999933 #999966 #999999 #9999CC #9999FF
#99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF
#99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF
#660000 #660033 #660066 #660099 #6600CC #6600FF
#663300 #663333 #663366 #663399 #6633CC #6633FF
#666600 #666633 #666666 #666699 #6666CC #6666FF
#669900 #669933 #669966 #669999 #6699CC #6699FF
#66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF
#66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF
#330000 #330033 #330066 #330099 #3300CC #3300FF
#333300 #333333 #333366 #333399 #3333CC #3333FF
#336600 #336633 #336666 #336699 #3366CC #3366FF
#339900 #339933 #339966 #339999 #3399CC #3399FF
#33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF
#33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF
#000000 #000033 #000066 #000099 #0000CC #0000FF
#003300 #003333 #003366 #003399 #0033CC #0033FF
#006600 #006633 #006666 #006699 #0066CC #0066FF
#009900 #009933 #009966 #009999 #0099CC #0099FF
#00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF
#00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF


THE END ... per ora =w=
Passiamo alla parte divertente!! I trucchi! <3

SPOILER (clicca per visualizzare)
- Sfondo per la firma
CODICE
<div style="WIDTH: 1043px; HEIGHT: 741px; background-image: url(METTERE QUI L'URL IMMAGINE)"> FIRMA </div>

Oppure:
CODICE
<div style="background: #434343; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#434343), to(#e5e5e5)); background: -moz-linear-gradient(#434343, #e5e5e5); -moz-border-radius: 15px; -webkit-border-radius: 15px; -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); font-family: segoe ui; font-size: 15px; color: #fdfafa; text-shadow: 1p 1px 0 #fff; padding: 5px; margin: 5px; line-height: 110%; text-align: justify"><p align="center">
Provaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</p></div>

Risultato:


Provaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaprorr



- Creare una Legenda e "Racchiudere un Testo"
CODICE
<fieldset><legend>Prova1</legend>Prova2</fieldset>

risultato:
Prova1Prova2


- Nascondere l'Intero Profilo
In questa Guida vi mosterò il HTML che serve per nascondere l'Intero Profilo di un Utente:
Amministrazione --> Gestione codici HTML --> Codice HTML che verrà visualizzato in ogni pagina in fondo al sito.
Inserite poi:
CODICE
CODICE
<script type="text/javascript">
if ( location.search.indexOf('?act=Profile&MID=XXXXXX')!=-1 )
{document.write("<style>.profile,.highlight {display:none} </style>")}</script>


Modificate:
CODICE
CODICE
Profile&MID=XXXXXX


A posto di XXXXXX dovrete inserire il vostro ID, che potete trovare nella Barra dell'Indirizzo nella pagina del vostro Profilo, un esempio di ID è 2939654.Otterrò quindi:
CODICE
CODICE
Profile&MID=2939654


Salvate poi le Modifiche.
Quando un Utente cercherà di osservare il vostro Profilo vedrà solo il vostro Nick, ovviamente lo Script funziona solo nel forum in cui è stato inserito tra gli HTML.

- Dividere il profilo
Andate su:
Opzioni-->Modifica Profilo-->Interessi

CODICE
CODICE
<td class="bottomborder"></td><div style="border:1px solid black; color:black;background-color:white;text-align: center; margin: 10px 15&#37; 5px;">Testo</div>


Ma andiamo passo per passo nel secondo codice, perchè oltre al testo potrete modificare lo spesso del bordo tramite la stringa
CODICE
CODICE
border:1px


Il COLORE del bordo tramite la stringa
CODICE
CODICE
solid black


il colore del testo modificando
CODICE
CODICE
color:black


E infine lo sfondo, anzicchè bianco potete metterlo di qualsiasi colore modificando

CODICE
CODICE
background-color:white


- Nascondere le varie informazione anche con avatar!
Sono da inserire sugli interessi.
Per nascondore tutto ttranne le informazioni varie è possibile utilizzare questo:
HTML
CODICE
</table></table></table><table style="display: none;"><tr><td><table width="100%" cellpadding="6" cellspacing="1"></h></h>



Invece se volete aggiungere anche l'avatar:

HTML
CODICE
<i>Nessuna informazione.</i></table><td class="row1" width="50%" valign="top"><table width="100%" cellpadding="6" cellspacing="1"><tr><td class="title2" colspan="2" align="center">Avatar<tr><td width="30%" valign="top"><td><img src="http://link_avatar.png" width="159" height="264" alt="Avatar"></table></table></table><table style="display: none;"><tr><td><table width="100%" cellpadding="6" cellspacing="1">



Logicamente dovete sostituire:

HTML
CODICE
<img src="http://link_avatar.png" width="159" height="264" alt="Avatar">


"http://link_avatar.png" con il link dell'proprio avatar hostato e sostituire "width="159" height="264"" con la grandezza del proprio avatar.


Ps:per dubbi e domande potete chiedermi di tutto! ^__^
pss:No,non si può mettere la tabella dei colori sotto spoiler çAç ...altrimenti mi cancella la lezione
 
Top
0 replies since 22/1/2012, 19:37   53 views
  Share  
 

Pc Programs
 

Create your forum and your blog! · Top Forum · Categories · Help · Status · Contacts · Powered by ForumCommunity