-> нτмl ρiù cσмυиi

L'elemento base del linguaggio è il tag, una parola chiave racchiusa da simbolo di minore <>
esempio:
<br />
Spesso le informazioni su cui "agisce" il tag devono essere racchiuse fra un tag d'apertura ed uno di chiusura, quest'ultimo indicato apponendo il carattere slash (/) dopo <. esempio: <b>testo in grassetto</b>

Elenco tag HTML comuni

Accapo
<br />

Linea
<hr />

Immagine
<img src="http://indirizzo_immagine" />

l'immagine deve essere online

Collegamento a una pagina web o file
<a href="http://indirizzo_sito">testo</a>

Collegamento a un punto della pagina
<a name="target"></a>
<a href="#target">testo</a></a>

Immagine con collegamento
<a href="http://indirizzo_sito"><img src="http://indirizzo_immagine" /></a>

Centrare un'immagine o un testo
<div align="center">immagine/testo</div>

Immagine o testo in movimento
<marquee direction="up" scrollamount="1" height="30" width="70%">immagine/testo</marquee>

direction indica la direzione
scrollAmount indica la velocità
height indica l'altezza del campo di scorrimento
width invece indica la larghezza del campo di scorrimento rispetto alla larghezza della pagina

Immagine o testo in movimento che si ferma al passaggio del mouse
<marquee onmouseover="this.stop()" onmouseout="this.start()">immagine/testo</marquee>


questo codice non può essere inserito nella firma

Immagine o testo in movimento che rallenta al passaggio del mouse
<marquee scrollamount="'5'" onmouseover="'this.scrollAmount=" onmouseout="'this.scrollAmount=">immagine/testo</marquee>

Testo in grassetto
<b>testo</b>

Testo in corsivo
<i>testo</i>

Testo sottolineato
<u>testo</u>

Testo barrato
<s>testo</s>

Colore testo
<span>testo</span>

Dimensione testo
<span>testo</span>

Font testo
<span>testo</span>

Cambiare colore, dimensione, font ad un testo
<span>testo</span>

Testo con alone (visibile solo da Internet Explorer)
<div style="width:100%;filter:glow(color=colore)">testo</div>

Testo sfumato (visibile solo da Internet Explorer)
<div style="width:100%;filter:blur">testo</div>

Lista
<ul type="disc"><br /><li>voce</li><br /><li>voce</li><br /><li>voce</li><br /></ul>

Si può cambiare disc con circle o square

• Ecco
• come viene
• con disc

• Ecco
• come viene
• con circle

• Ecco
• come viene
• con square

Lista numerata
<ol><br /><li>voce</li><br /><li>voce</li><br /><li>voce</li><br /></ol>

1. Ecco
2. come viene
3. la lista numerata

Area di testo
testo

<textarea>testo</textarea>

Valori tipici del campo type
text
password
checkbox
radio 1 2

Menù a tendina
123

<select><br /><option value="1">1</option><br /><option value="2">2</option><br /><option value="3">3</option><br /></select>

Pulsante

<button>testo</button>

Testo apice
^...

Testo pedice
_...

Iframe (includere una pagina esterna nel proprio forum)
<iframe src="http://indirizzopagina" width="100" height="100"></iframe>

->cязαяз υи вσяdσ τяαττзggiατσ

Create un'immagine di 8x8 pixel con sfondo trasparente:



Poi fate una cosa del genere:



Poi salvate il pattern:



Questa cosa la dovrete fare solo la prima volta ^.^
ora aprite l'immagine che volete abbia i bordi tratteggiati:



Poi fate zoom sull'immagine e selezionatela ad un pixel dai bordi:



Poi cliccate col tasto destro la selezione e fate "selezione inversa":



Poi sempre col tasto destro selezionate "riempi":



poi selezionate il pattern che abbiamo creato in precedenza:



Ed ecco il risultanto finale ^.^, semplice ma carino no?:

->cязαяз iммαgiиi cσи зffзττi gliττзя

Vi spiegerò come creare l'effetto constellation nelle immagini...tutto quello che vi serve è Adobe Photoshop cs2 e il filtro "alien skin xenofex", per installare tale filtro cliccate qui e seguite le seguenti instruzioni:

1. salvate il filtro in una cartella qualsiasi... se volete create un nuova cartella ( in modo tale da avere meno confusione possibile...ovviamente ricordatevi dove e come l'avete salvata!)
2. finito di salvare il filtro...andate ad aprire l'archivio e cliccate su xenofex2demo.EXE.. e vedrete che vi aprirà una finestra per l'installazione...allora voi dovete cliccare su next>accept>next e adesso dovete scegliere dove installare il filtro il percorso è il seguente C:\Programmi\Adobe\Adobe Photoshop CS2\Plug-Ins\Filters se volete evidenziatelo e copiatelo nell'indirizzo per l'installazione
3. bene fatto questo cliccate su ok e successivamente finish...e vedrete che vi installerà il filtro.

Perfetto fatto questo aprite Adobe Photoshop e aprite un 'immagine qualsiasi io scelgo questa:

Se la volete la potete prendere...anche solo per prova se nn vi piace ne scegliete un'altra a vostro piacimento...

Adesso dovete fare lo stesso procedimento che avete usato per creare l'immagine glitter...ossia creare il livello dello sfondo...cliccando quindi con il tasto destro del mouse sulla parte evidenziata del vostro livello ( che in questo caso è nominato "sfondo") e poi cliccate su livello dallo sfondo e scrivete livello 1 e date l'ok...adesso avete il vostro primo livello...ora lo dovete duplicare e quindi dovete pigiare il tasto ctrl + j per due volte e rendere visibile ( ed evidenziare) solo un livello...

Adesso passiamo all'effetto constellation...cliccando su filtri noterete che oltre alla sfilza di filtri che sono già predefiniti su Adobe vi è il filtro...alien skin xenofex demo...e cliccate su continue...( anche se è una demo fuziona lo stesso...nn vi preoccupate...)

ora dovete mettere i seguenti valori come nella figura...( se volete potete modificare alcuni valori per vedere che effetto ha sulla vostra immagine)

Poi cliccate su ok...e ora fate lo stesso procedimento per gli altri due livelli cambiano per il secondo livello random seed 50 e per il terzo livello random seed 1 e poi lo inviate ad Image Ready

Duplicate i livelli nell'animazione ed associate ( evidenziando e mettendo l'occhietto ai vari livelli), e poi cliccate sul tasto paly dell'animazione guardate il risultato! è un bell'effetto vero??? ora potete salvarlo su salva ottimizzato come...e lo salvate infine andate su questo sito per hostare la vostra immagine ottimizzata e copiate il codice html sul rispettivo spazio html del vostro sito!

Ecco il risultato è il seguente!

-> cязαяз σяσlσgi з dαταяi ρзя il vσsτяσ вlσg

Fase 1 : preparazione dell'immagine

Siccome la prima parte del procedimento è uguale per tutti e tre , questo tutorial è la preparazione di base da seguire sia per calendari , che datari , che orologini , cambierà solo l'inserimento del codice.

Apri il programma Front Page e posizionati su "normale",fai "inserisci--->livello"...vai ora in "codice",clicca col mouse prima del tag e fai , dalla barra in alto "inserisci--->immagine---da file",cerca nel tuo pc l'immagine da inserire e clicca ok.

Ora vai su "normale",clicca sul bordino dell'immagine in modo che il livello dell'immagine sia selezionato (facendo in modo che il nuovo livello che ora creeremo resti inglobato a quello creato prima) e fai nuovamente "inserisci--->livello"

Ti ritroverai un quadratino dai bordini azzurri nel riquadro del programma è il nuovo livello creato). Premi il tasto del mouse sul riquadro in alto a sinistra, dove vedi sritto "livello 1" per spostarlo nella posizione dove più ti piace sull'immagine, così

Per poter essere visualizzato in linea, l'immagine deve essere hostata su un servizio di hosting free, carica quindi l'immagine che hai usato direttamente nel tuo spazio web, oppure usa servizi come "tinypic", in modo da avere l'url da inserire al posto del percorso interno al tuo pc messo dal programma al momento dell'inserimento immagine

Fase 2 : inserimento del codice per il calendario

Vai in "codice" e ti ritroverai il

appena creato sottolineato di azzurro

Clicca con il mouse subito prima del tag di chiusura

ora scarica questo codice in formato zip

SCARICA CODICE

...scompatta il file, salvalo in blocco note, così lo avrai ogni volta che ti servirà copialo ed incollalo dove avevi cliccato prima, prima del tag

L'unica parte che puoi modificare, per pesonalizzare ed adattare alla tua immagine, è quella relativa al font, che vedrai, in front page, colorata di verde chiaro

Se ora vai su anteprima potrai vedere il tuo calendario in funzione, se la posizione non è perfetta, torna su "normale" e sposta il livello.

Quando è tutto a posto copia il codice e incollalo in una nuova pagina web (o al massimo in un foglio del blocco note, non salvare MAI direttamente da front page)

Per l'inserimento in spazi web come blog o pagine internet bisognerà creare il frame, lo faremo nell'ultima lezione

Per ora vediamo solo il risultato del mio, finito, come lo dovreste vedere andando su "anteprima"

Fase 2 : inserimento del codice per l'orologio

Vai in "codice" e ti ritroverai il

appena creato sottolineato di azzurro

Clicca con il mouse subito prima del tag di chiusura

Ora copia tutto questo codice

<script language="JavaScript"><br /><br />function tS(){ x=new Date(); x.setTime(x.getTime()); return x; }<br /><br />function lZ(x){ return (x>9)?x:'0'+x; }<br /><br />function tH(x){ if(x==0){ x=24; } return (x>24)?x-=24:x; }<br /><br />function dT(){ if(fr==0){ fr=1; document.write('<span><b><span id="tP">'+eval(oT)+'</b></span></span>'); } tP.innerText=eval(oT); setTimeout('dT()',1000); }<br /><br />var fr=0,oT="lZ(tH(tS().getHours()))+':'+lZ(tS().getMinutes())+':'+lZ(tS().getSeconds())";<br /><br /></script><br /><br /><script language="JavaScript">dT();</script>

ed incollalo dove avevi cliccato prima, prima del tag L'unica parte che puoi modificare, per pesonalizzare ed adattare alla tua immagine, è quella relativa al font

<span style="font-family:Tahoma;font-size:85%;color:#f74208;">

puoi quindi, rispettivamente, variare la grandezza, il colore e tipo di font

Se ora vai su anteprima potrai vedere il tuo orologio in funzione, se la posizione non è perfetta, torna su "normale" e sposta il livello.

Quando è tutto a posto copia il codice e incollalo in una nuova pagina web (o al massimo in un foglio del blocco note, non salvare MAI direttamente da front page)

Per l'inserimento in spazi web come blog o pagine internet bisognerà creare il frame, lo faremo nell'ultima lezione



Per ora vediamo il mio, finito, come dovreste vederlo andando su "anteprima"

Fase 2 : inserimento del codice per il datario

Vai in "codice" e ti ritroverai il

appena creato sottolineato di azzurro

Clicca con il mouse subito prima del tag di chiusura

ora copia questo codice

<span id="webpos"><script type="text/javascript">WebDate(); </script></span>

e incollalo dove avevi cliccato prima, prima del tag

Poi copia anche questo codice

<script type="text/javascript" language="JavaScript"> function WebDate() {<br /><br />var now = new Date();<br /><br />var year= now.getYear();if (year < nameday =" new" namemth =" new" style="color: #00308A;font-size:12pt; font-weight : bold;font-family:tahoma; "> '+nameDay[now.getDay()]+ ' ' + now.getDate() + " " + nameMth[now.getMonth()] + " " + year+'</p>')<br /><br /><br /><br />}<br /><br /></script>

ed incollalo, invece tra i tag &lthead> L'unica parte che puoi modificare, per pesonalizzare ed adattare alla tua immagine, è quella relativa al font

Se ora vai su anteprima potrai vedere il tuo datario in funzione, se la posizione non è perfetta, torna su "normale" e sposta il livello.

Quando è tutto a posto copia il codice e incollalo in una nuova pagina web (o al massimo in un foglio del blocco note, non salvare MAI direttamente da front page)

Per l'inserimento in spazi web come blog o pagine internet bisognerà creare il frame, lo faremo nell'ultima lezione

Per ora vediamo solo il risultato del mio, finito, come lo dovreste vedere andando su "anteprima"

-> scαмвiσ liиk

-> iммαgiиi cσи fяαsi dзl gяαиdз vαscσ

-> iммαgiиi cσи fяαsi