[TUTORIAL] HTML

« Older Newer »

~Blasto

Posted on 5/2/2010, 20:54

Oh.

Group: Planet-Supporter

Posts: 19,188

Reputation: +23

Status: Anonymous

Ecco una guida ai codici HTML ( almeno ai più comuni )
E' vietata la copia e la pubblicazione di questa guida in altri siti eccezion fatta nel caso in cui il topic venga aperto da uno degli utenti che ha collaborato alla sua pubblicazione.
Credits Guida HTML per le vostre firme: ~Gold
Credits Guida HTML con elementi di CSS: ~Blastø

Testo in grassetto:

CODICE

<b>*Inserisci qui il testo*</b>

Esempio: Testo Grassetto

- - - - -

Testo in corsivo:

CODICE

<i>*inserisci qui il testo*</i>

Esempio: Scrittura in corsivo

- - - - -

Testo Sottolineato:

CODICE

<u>*inserisci qui il testo*</u>

Esempio: Scrittura sottolineata

- - - - -

Testo Barrato:

CODICE

<s>*Inserisci qui il testo*</s>

Esempio: ~~Testo barrato~~

- - - - -

Testo con carettere diverso:

Ci sono vari caratteri!

Arial

CODICE

[font=Arial]*Inserisci qui il testo*[/font]

Esempio: Testo a carattere Arial

Sostituisci " Arial " con: Times , Courier , Impact , Geneva e Optima per avere diversi caratteri.

- - - - -

Testo con diversa dimensione:

Ci sono diverse dimensioni!
Testo Piccolo:

CODICE

[size=1]*Inserisci qua il testo*[/size]

Esempio: Testo Piccolo

Sostituite l' " 1 " con " 7 " e " 14 " per avere testi Medi e Grandi.

- - - - -

Come centrare un testo:

Ci sono 2 code:

CODICE

<center> *Inserisci qui il testo* </center>

CODICE

<p align="center">*Inserisci qui il testo*</p>

Esempo: Testo centrato

- - - - -

Come fare le scritte scorrevoli:

CODICE

<marquee>*Inserisci qui testo*</marquee>

Esempio: Scritta scorrevole

- - - - -

Come fare scritte scorrevoli a direzione e velocità variabile:

Scritta scorrevole verso sinistra:

CODICE

<marquee direction="left" scrollAmount=7 height="40" width="80%">*Inserisci qui il testo*</marquee>

Esempio:
Scritta scorrevole verso sinistra

Modificate "left" con: right (per scorrere a destra) "up" (per scorrere in sopra) , "down" (per scorrere in basso)

Modificate il numero dopo scrollAmmount= per variare la velocità del testo. Ecco un esempio di una scritta a cui sono state modificate velocità e direzione:

Scritta lenta , direzione "up"

- - - - -

Come fare una scritta scorrevole "impazzita" :

CODICE

<marquee direction="up" behavior="alternate" height="200"><marquee behavior="alternate" width="30%">*Inserisci qui il testo*</marquee></marquee>

Esempio:
Scritta scorrevole impazzita

- - - - -

Come fare una scritta rimbalzante:

CODICE

<marquee behavior="alternate" width="30%">*Inserisci qui il testo*</marquee>

Esempio:
Testo rimbalzante

- - - - -

Come allineare il testo a destra / sinistra / centro / giustificato:

CODICE

<p align="left">*inserisci qui il testo*</p>

Esempio:

Testo allineato a Sinistra

Sostituite a " left " : " right " , " center " o " justify " a seconda di dove volete allineare la scritta.

- - - - -

Come inserire un link:

Ci sono 2 modi:

CODICE

<a href="http://www.inserisciqui il sito.it">*Inserisci qui il testo*</a>

CODICE

[URL=http://www.inserisci qui il sito.it]*Inserisci qui il testo*[/URL]

Anche se sostuisci al testo un immagine il risultato non cambia.

- - - - -

Vari tipi di lista:

CODICE

<UL TYPE=disc>
<LI> Prima voce di menu
<LI> Seconda voce di menu
<LI> Terza voce di menu
</UL>

Per una lista puntinata.Se volete, sostituite a "disc" : "circle"(per un cerchio), oppure "square" (per un quadratino).

- - - - -

Inserire dei filmati e giochi Flash:

CODICE

[FLASH=600,400]indirizzo del file flash[/FLASH]

E' consigliato utilizzare questo:

CODICE

- - - - -

ATTENZIONE I CODICI CHE VANNO DA "alone intorno al testo" A "testo con ombra proiettata" SONO VISUALIZZABILI SOLO CON EXPLORER E MOZILLA

Alone intorno al testo:

CODICE

<div style="width:100%;filter:glow(color=FF0000)">testo con l'alone</div>

Esempio:

Testo con Alone

Dovete sostituire ai numeri presenti in filter:glow(color=000000) il colore di cui volete che sia l'alone ^^.

- - - - -

Testo al contrario (orizzontale):

CODICE

<div style="width:100%;filter:fliph">*Inserisci qui il testo*</div>

Esempio:

testo al contrario

- - - - -

Testo al contrario (Verticale) :

CODICE

<div style="width:100%;filter:flipv">testo al contrario</div>

Esempio:

testo al contrario

- - - - -

Testo con ombra

CODICE

<div style="width:100%;filter:blur">testo con ombra</div>

Esmpio:

testo con ombra

- - - - -

Testo con ombra proiettata

CODICE

<div style="width:100%;filter:shadow(color=FF0000)">testo con ombra</div>

Esempio:

testo con ombra

- - - - -

Come inserire un "Textarea" :

CODICE

<textarea>*Inserisci qui il testo*</textarea>

Esempio:

- - - - -

Menù a tendina:

CODICE

Sostituire i numeri dopo l'asterisco per modificare le opzioni.

Esempio:

- - - - -

Messaggio con descrizione:

CODICE

<acronym title="inserisci qui la descrizione">*Inserisci qui il testo*</acronym>

Esempio:

Tieni fermo il mouse su questo messaggio per visualizzare la descrizione.

- - - - -

Bottone intorno al testo:

CODICE

<button> *Inserisci qui il testo </button>

Esempio:
- - - - -

Inserire un linea di divisione:
Code molto semplice.Inserite
CODICE
<hr>
dove volete che si divida il post.
Esempio:

Ciao.

Ciao.

- - - - -

Inserire una minitabella:

CODICE

<div style="width: 130px; background-color: *Inserisci qui il colore dello sfondo* ;border: 1px solid #ffffff; font:7pt; color: #9F9F9F">*Inserisci qui il testo*</div>

*Inserisci qui il testo*

Se vi serve le tabella per i codici dei colori in HTML eccola qua^^
Codici colori HTML

Profilo anonimo da mettere nel titolo personalizzato

CODICE

<i>Nessuna informazione</i></table></table></table><br><br><table style="display: none;"><tr><td><table width="100%" cellpadding="6" cellspacing="1">

Come mettere lo sfondo in firma

CODICE

<div style="background-image:url(URL IMMY FRA PARENTESI)">TUA FIRMA CON SFONDO</div>

Scritta vicino ad un immy

CODICE

<img align="left" src="Link immagine">inserisci testo
testo
testo

Inserite questi codici in Amministrazione > Modifica Colori e Stili
Questo è il codice per avere nel prorpio forum le targhette che sono opacizzate e diventano normali quando ci passi sopra il mouse.

CODICE

.web a:link img, .web a:visited img {filter:alpha(opacity=30); -moz-opacity: 0.5; opacity: 0.5}
.web a:hover img {filter:alpha(opacity=100); -moz-opacity: 1.0; opacity: 1.0}

Sfondo in tag

CODICE

/* IMMAGINE DI SFONDO TAG */

.tag .mainbg {background-image:url(http://indirizzo_immagine); background-repeat: repeat}

.tag .ww, .tag .aa {background: inherit;border:0}

Come inserire un testo in una finestra scorrevole

TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO

CODICE

<div style="overflow:auto; height:100px; width:360px;"> TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO TESTO</div>

Per modificare la grandezza ,mettere al posto di 50 la grandezza desiderata.

Creare una minitabella negli interessi

CODICE

<tr><td class="title2" colspan="2"<br><align="center">TITLE</td></tr><tr><td valign="top" width="30%"><b></b></td><td></td></tr><td ="" valign="top"><b><br>SUBTITLE</td><td><br> TESTO<br></td></tr>

Inserire uno spazio sopra informazioni varie

CODICE

<br><td class="bottomborder"></td><div style="border:1px solid black; color:COLORE IN INGLESE;background-color:COLORE SFONDO IN INGLESE;text-align: center; margin: 10px 15% 5px;">Testo</div>

Dividere a meta il profilo e aggiungerci una parte

CODICE

</table></table><br><br><div class=skin_tbl_width style=width:100%><div class=highlight>TESTO1</a></div></div><br><br><table class=skin_tbl_width style=width:100%><tr><td><table class=skin_tbl_border><tr><td class=row1 valign=top><table width=100%><tr><td class=title2 colspan=2 align=center>TITOLO2</td></tr><tr><td align=center><b>TESTO3</b></td>

Testo sovrapposto:

CODICE

Ciao
ciao,ciao

Target:
Nel primo CODE la parola che deve mandarvi al Target

CODICE

<a href="#target">Nome del target</a>

poi scrivete il Target:

CODICE

<a name="target">Target</a>

Eccovi un esempio:
Ciao!

Ciao!
Solo un accorgimento: se dovete mettere più Target (per esempio in un Regolamento) ad ogni target dovete mettere nomi diversi, quindi

CODICE

E così via.. Ecco un esempio:
+1
Salve

-1
Addio

Ed ora, eccovi una guida HTML con codici vari per le vostre firme by ~Gold

Per inserire come sfondo un colore mettete questo codice in firma e modificate #FFFFFF con il codice del colore che desiderate avere:

CODICE

<div style="backgorund-color: #FFFFFF; display: block;">CONTENUTO DELLA FIRMA</div>

Per inserire come sfondo della propria firma un'immagine mettete questo codice:

CODICE

<div style="background-image: url('URL DELLO SFONDO'); display: block;">CONTENUTO DELLA FIRMA</div>

Invece per cambiare il puntatore basta usare i seguenti codici

CODICE

<div style="cursor:STILE MOUSE">LA VOSTRA FIRMA</div>

Auto