Indice del forum ForumUp: Supporto in Italiano

 
 FAQFAQ   CercaCerca   Lista utentiLista utenti   GruppiGruppi   RegistratiRegistrati 
 ProfiloProfilo   Messaggi privatiMessaggi privati   Log inLog in 

Comunicazioni dallo Staff
**Inserite l'url del vostro forum quando chiedete aiuto nelle aree di supporto.**
Per un aiuto immediato, leggi le FAQ. La maggior parte delle domande ha già una risposta.
Non inviate PM allo staff per chiedere supporto, se non richiesti.
Leggere le regole firme e avatars

Lo Staff di ForumUp non vi chiede i dati per entrare nel pannello di amministrazione Leggere qui.

*DOPO 30 GIORNI DI INATTIVITA' (senza scrivere posts), I FORUM SARANNO AUTOMATICAMENTE CANCELLATI*

Guida all'HTML base

 
Nuovo argomento   Quest'argomento è chiuso: Non puoi inserire, rispondere o modificare i messaggi.    Indice del forum -> F.A.Q. e Guide
Precedente :: Successivo  
Autore Messaggio
PNUS070
Member


Registrato: 18/04/06 14:39
Messaggi: 139
Residenza: Roma

MessaggioInviato: Mar Gen 23, 2007 1:25 pm    Oggetto: Guida all'HTML base Rispondi citando

Notando ultimamente molte domande riguardo l'HTML, per personalizzare al meglio il forum, per cambiare impostazioni del testo e delle immagini, ho pensato di creare una guida.

Intendo sottolineare che questa guida è per spiegare l'HTML in un utilizzo quasi unicamente per i forum. Per creare siti web personali la faccenda è più complicata... ed è molto più comodo utilizzare appositi programmi. :roll:
Per questo farò riferimento ai forum e non alla realizazione di pagine web.

Legenda:


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

: per capire il funzionamento del codice e come deve essere "configurato" non è necessario leggere la parte teorica della guida.


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

: gli argomenti contrassegnati con questo simbolo sono i contenuti teorici della guida, che i meno esperti devono leggere prima di potersi informare sui codici HTML.


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

: le spiegazioni ai codici segnati con questo simbolo non possono essere letti dai meno esperti perchè necessitano di un minimo di conoscenza dell'HTML e la lettura delle parti teoriche della guida.


Indice
La guida è composta dalle seguenti sezioni, in ordine di visualizazione.


  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Introduzione

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Tag & Attributi: cosa sono?

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    HTML e BBCode: due linguaggi simili


  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Inserire una Immagine (tag IMG)

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Inserire un link (tag A)

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Impostazione del Testo
    -> Grassetto (tag B)
    -> Corsivo (tag I)
    -> Sottolineato (tag U)
    -> Testo Evidenziato (tag SPAN)

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Tag FONT

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Impostare il paragrafo (tag P)

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Generare nuove righe (andare a capo)

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Aggiungere dei Punti Numerati

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Testo in Movimento - Tags MARQUEE

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Creare una tabella con la grafica del forum

  • Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    Come usare più tags




Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Introduzione
Questa guida è per tutti coloro che non sanno utilizzare i codici HTML che, a dire la verità, sono molto semplici da imparare. Cercherò di essere il più esaustivo possibile e di inserire tutti i codici più utili e maggiormente richiesti.

E' importante sapere che l'HTML, nei forum, funziona normalmente solo:
  • Nel titolo della sezione; *
  • Nella descrizione della sezione
  • Nel titolo delle categorie; *
  • Nel titolo del forum; *
  • Nella descrizione del forum.

*: in queste aree è possibile inserire un numero molto limitato di caratteri che quindi costringe a inserire codici HTML molto ristretti.

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.




Ricordo che normalmente nei messaggi l'HTML non è attivo
, perciò inserendo un qualunque codice questo non vi funzionerà.
Per attivare l'HTML nei post, dovrete:
  • Andare nel pannello della amministrazione (APC), su generale -> configurazione. Cercate "Impostazioni base per utenti e forum" e dopodichè l'opzione "permetti l'HTML". Settate su si.
  • Andate nel vostro profilo e attivate l'opzione "Abilita sempre HTML". Settate su si.



Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Tag & Attibuti: cosa sono?
Partiamo con la spiegazione dei tag.
I tag sono praticamente delle parentesi; il contenuto all'interno ha le caratteristiche dettate dai tag e dagli attributi in esso presenti.
Per capire meglio l'esempio guardate:
Citazione:
questa è una citazione (cioè del testo citato... che bella scoperta)

Codice:
questo è del testo semplice, <b> invece il testo all'interno dei tag B è grassetto </b>

Quindi il testo tra
Codice:
<b> e </b>
è grassetto.

Esistono due tipi di tag: di apertura e di chiusura.
Il tag di apertura è il tag che detta le istruzioni su tutto il testo che segue.
Il tag di chiusura fa si che le informazioni dettate dal tag di apertura riguardi solo il testo che c'è in mezzo ai due tag. Infatti il testo dopo il tag di chiusurà non avrà più le caratteristiche del tag di apertura.
Il tag di chiusura si riconosce perchè ha una / . Se non c'è l'ha vuol dire che è un tag di apertura.

Gli attributi sono delle aggiunte alla informazione base del tag.
Per esempio il codice per inserire una immagine è questo:
Codice:
<img src="url_file_immagine">

Se vogliamo aggiungere altre informazioni, per esempio un bordo, si scriverà così:
Codice:
<img src="url_file_immagine" border="1">

border="1" è infatti l'attributo per aggiungere un bordo all'immagine.
Nell'esempio usiamo il tag per inserire una immagine. Se non notate il tag di chiusura fate una giusta osservazione. Infatti il tag della immagine non ha necessità di chiudersi perchè non da caratteristiche ad del testo ma detta come informazione da dove prendere l'immagine che si deve visualizzare.

Se avete capito questi concetti semplici, potete proseguire nella lettura della guida.
Per ogni tag verranno date le sufficienti spiegazioni per configurarlo e tutti gli attributi possibili per quel tag.


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

HTML e BBCode: due linguaggi simili
Molti tag HTML e BBCode sono simili, soprattutto nella configurazione del testo.
Infatti:
Codice:
GRASSETTO IN HTML:
<b> testo </b>
GRASSETTO IN BBCODE:
[b] testo [/b]

La differenza principale tra HTML e BBCode è che il primo usa tag con le "<" e ">", mentre il BBCode usa tag con le parentesi quadre "[" e "]". Questo, se sappiamo già un poco utilizzare il BBCode nei post, vi aiuterà all'utilizzo analogo dell'HTML.
La seconda differenza principale e il luogo dove utilizziamo questi due linguaggi.
Il BBCode lo possiamo usare solo nei messaggi, l'HTML nelle aree descritte prima nella Introduzione.

La guida al BBCode la potete trovare qui:

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.



Ci sono alcuni tag BBCode usati unicamente su ForumUp. Qui potete le relative istruzioni ai tag:

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.





Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Inserire una immagine
Iniziamo col dire come si inserisce una immagine. Ecco il codice:
Codice:
<img src=*>

Come spiega Sabrina in

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

al posto del * va messo l'url della immagine (il link diretto della immagine), che deve essere su uno spazio web.

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

è un buon servizio gratuito di host per immagini ed ovviamente ce ne sono molti altri sparsi nella rete.
Certo, se avete un vostro spazio web è meglio Wink

Attributi

  • align="Left": permette di posizionare l'immagine a sinistra
  • align="Center": permette di posizionare l'immagine centrata
  • align="Right": permette di posizionare l'immagine a destra
  • border="0": permette di aggiungere un bordo all'immagine. Il numero 0 può essere sostituito con un numero a piacere, in base a quanto grande deve essere il bordo. Il numero che dovrete inserire in sostanza è il numero di pixel che il bordo dovrà avere.




Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Inserire un link
Ecco il codice per inserire un link:
Codice:
<a href="url"> testo che funge da collegamento/link </a>


Per linkare un indirizzo email e facendo si che cliccando sul link si apra il programma di posta per inviare una email, basta sostituire url con:
Codice:
mailto:webmaster@forumup.it

In questo caso l'indirizzo usato è

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

.



Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Impostazioni del Testo
Le impostazioni per il testo è uguale al BBCode, unica differenza, he l'HTML non utilizza parentesi quadre ma le "<" e ">".
Passiamo quindi ad illustrare brevemente i tag per modificare il testo.

Grassetto
Codice:
<b> testo in grassetto </b>


Corsivo
Codice:
<i> testo in corsivo </i>


Testo Sottolineato
Codice:
<u> testo sottolineato </u>


Testo Evidenziato (tag SPAN)
Codice:
<span style="background-color: *"> testo evidenziato </span>

Al posto del * dovrete mettere l'apposito codice HTML (più precisamente si tratta di un codice esadecimale) del colore che volete usare per evidenziare il testo.
Andate in

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

. Scegliete il colore, copiatevi il codice del colore e sostituitelo all'asterisco.
N.B.: essendo una immagine non potrete usare il copia e incolla (CTRL+C e CTRL+V). Wink


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Tag "Font"
Il tag font è un tag che permette di dare diverse caratteristiche al testo, oltre al grassetto, corsivo e sottolineato prima viste.

Attributi
Codice:
<font color="#FF0000">testo</font>

  • color="#FF0000": permette di dare un colore preciso al testo.
    Solamente gli utenti registrati possono vedere link su questo forum!
    Registrati oppure Autenticati su questo forum.

    per prendere il codice esadecimale.
  • size="3": permette di dare una dimensione precisa al testo. Sostituite il 3 con un numero a vostro piacimento, da 1 a 7.
  • face="Arial": permette di impostare un font preciso. Attenzione: usate font molto diffusi perchè se il font impostato non è installato nel computer di un vostro visitatore questo non lo vedrà. Ovviamente, potete sostituire "arial" con il nome del carattere da voi scelto.



Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Impostare il paragrafo
Codice:
<p> testo su nuova riga </p>

Con questo potrete generare una nuova riga di testo che non sia continuo a quello precedente. Probabilmente però usando solo questo semplice tag rimarrete comunque insoddisfatti. Per questo adesso spiegerò come aggiungere nuove impostazioni nel tag, grazie agli attributi.

Attributi

Per esempio, possiamo regolare la distanza dal testo di sopra, il paragrafo. Utilizzando solo il codice di prima vi verrà una nuova riga molto distanziata dal testo antecedente, il che, almeno a me, non garba molto. Wink
Per regolare la distanza, scrivere così.
Codice:
<p style="margin-top: 0; margin-bottom: 0"> testo su nuova riga</p>

margin-top è per regolare la distanza dall'alto.
margin-bottom per regolare la distanza dal basso.
Sostituite gli zeri con il numero di pixel desiderato.

margin-left è per regolare la distanza del testo da sinistra.
margin-right di conseguenza è per regolare la distanza del testo da destra.



Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Generare nuove righe (andare a capo)
Quando dovrete mandare del testo a capo, basta fare così:
Codice:
 Testo bla bla su prima riga <br> Testo bla bla su seconda riga

In pratica mettendo <br> nel testo farete in modo di andare a capo. Non si deve mettere il tag di chiusura in quanto non date caratteristiche a del testo ma date solo l'input, comando, di andare a capo.
Aggiungendo tante volte <br> di seguito e come andare tante volte a capo, quindi vi si formeranno molte righe vuote.
Per aggiungere delle righe vuote, si può usare anche questo codice:
Codice:
<p>&nbsp;</p>

Ecco il risultato:

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.




Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Aggiungere dei Punti Numerati
Per intederci questo:

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.


Ecco il codice.
Codice:
<ol>
  <li>punto 1</li>
  <li>punto 2</li>
</ol>

Ogni volta che vorrete aggiungere un punto, basta fare invio, inserire i tag <li> e </li> e in mezzo scriverci il nuovo punto.

Se non volete una lista numerata ma solo puntata, levate i tag <ol> e </ol> all'inizio e alla fine.


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Testo in Movimento - Tags MARQUEE
Almeno qui eviterò di parlarne molto Laughing . Vi riporto in questo sito in cui troverete tutto ciò che fa al caso vostro:

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.



Mi limiterò a spiegarvi alcuni componenti del codice MARQUEE.
Codice:
<marquee> testo in movimento </marquee>

Il codice normale, come questo sopra, ha le seguenti caratteristiche:
  • Si sposta da destro verso sinistra.
  • Si sposta all'infinito.


behavior="slide" consente al testo scorrevole di scorrere e bloccarsi quando arrivato alla posizione finale.
behavior="alternate" consente al testo scorrevole di spostarsi da una parte all'altra.
direction="right" il testo parte da sinistra e si sposta verso destra.
scrollamount="10" imposta la velocità di spostamento del testo; il numero 10 può essere sostituito con uno a vostra scelta, ovviamente.
loop="1" se non si vuole che il testo si sposti all'infinito, con questo si può impostare quante volte far spostare il testo. Il numero è sempre modificabile.
bgcolor="#FFFF00" imposta il colore di sfondo del testo scorrevole. l'esempio è un giallo. Per modificare il codice esadecimale del colore, leggere "Evidenziare Testo".


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Creare una tabella con la grafica del forum
Codice:
<table class="forumline" border="0" cellpadding="3" cellspacing="1" width="100%" height="95px">
  <tbody><tr>
   <td class="catHead" colspan="2" height="28"><span class="cattitle">****TITOLO TABELLA****</span></td>
  </tr>
  <tr>

   <td class="row1" align="left"><span class="gensmall">

****CODICE HTML****

</td>

Un esempio di tabella è quella de "Comunicazioni dello Staff", presente in questo forum di assistenza.

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.



La questione è molto semplice.
Al posto di ****TITOLO TABELLA**** dovete inserire il titolo della tabella, nell'immagine corrisponde a "Comunicazioni dello Staff".
Al posto di ****CODICE HTML**** dovete inserire il codice HTML del testo che deve esserci nella tabella. Nella immagine corrisponde a:
Citazione:
Non chiedere supporto via PM allo staff!! Postare le problematiche sul forum.


Tutto qui. Wink


Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Come usare più Tag
Abbiamo visto tutti i tag HTML più importanti e più utili. Però se vogliamo modificare più parametri, avremo bisogno di inserire più tag.
La cosa è molto semplice e cercherò di spiegarla passo passo.

Inserite prima del testo tutti i tag che vi servono. Per esempio voglio un testo evidenziato in giallo, che sia grassetto, che sia sottolineato, che sia di una dimensione ben precisa (5), che sia di colore blu e sia su una nuova riga con una distanza di 12 pixel dall'alto.
Troppe cose insieme, vero? Wink
Andiamo con ordine, andando a vedere i tag che mi servono.
Allora... mi serve:
  • <span style="background-color: #FFFF00">
  • <b>
  • <u>
  • <font size="5" color="#0000FF">
  • <p style="margin-top: 12">

Fatta la lista di tutti i tag che mi servono, li inserisco.
L'ordine non ha una particolare importanza, per il momento.
Codice:
<p style="margin-top: 12"><font size="5" color="#0000FF"><b><u><span style="background-color: #FFFF00">


Inserisco il testo.

Codice:
<p style="margin-top: 12"><font size="5" color="#0000FF"><b><u><span style="background-color: #FFFF00"> testo bla bla bla


Adesso devo chiudere i tag in ordine di come li ho aperti. Prima va chiuso l'ultimo aperto, poi va chiuso il penultimo aperto e così via... finchè non si arriva al seguente risultato.
Codice:
<p style="margin-top: 12"><font size="5" color="#0000FF"><b><u><span style="background-color: #FFFF00">
testo bla bla bla
</span></u></b></font></p>


Spero sia stato chiaro... in realtà è molto semplice, ed io l'ho fatta piuttosto lunga per semplificarvela al massimo.
_______________________

Spero che la guida possa essere utile.

Se avete avvistato errori, segnalateli.
Se avete consigli, diteli.
Per questi motivi potete contattarmi anche in pvt.

Per domande postate sul forum, il regolamento dice espressamente che è vietato contattare lo staff per questo genere di motivo.

_________________

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.


Prima di chiedere aiuto, cerca risposta tra le F.A.Q. e le Guide.

Se non postate l'URL del vostro forum non riceverete risposta.


L'ultima modifica di PNUS070 il Mar Apr 10, 2007 10:32 am, modificato 12 volte
Top
Profilo Invia messaggio privato
Axel
Member


Registrato: 14/08/05 17:51
Messaggi: 350
Residenza: Palermo

MessaggioInviato: Mar Gen 23, 2007 2:03 pm    Oggetto: Rispondi citando

Ottima guida... complimenti!! La inserisco subito tra le FAQ.

Grazie! Ok

_________________
Axel ~

Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.




Solamente gli utenti registrati possono vedere link su questo forum!
Registrati oppure Autenticati su questo forum.

Top
Profilo Invia messaggio privato
PNUS070
Member


Registrato: 18/04/06 14:39
Messaggi: 139
Residenza: Roma

MessaggioInviato: Mar Apr 10, 2007 10:42 am    Oggetto: Rispondi citando

Aggiornamento 10/04/07

    - Guida corretta da errori di diteggiatura e grammaticali
    - Guida ampliata con nuovi codici (inizialmente dimenticati)
    - Guida provvista di spiegazioni sui tag HTML e gli attributi, per avere chiaro come funziona il linguaggio
    - Contenuti completamente rivisti: aggiunti, eliminati o modificati dove necessario
Top
Profilo Invia messaggio privato
Mostra prima i messaggi di:   
Nuovo argomento   Quest'argomento è chiuso: Non puoi inserire, rispondere o modificare i messaggi.    Indice del forum -> F.A.Q. e Guide Tutti i fusi orari sono GMT + 2 ore
Pagina 1 di 1

 
Vai a:  
Non puoi inserire nuovi argomenti
Non puoi rispondere a nessun argomento
Non puoi modificare i tuoi messaggi
Non puoi cancellare i tuoi messaggi
Non puoi votare nei sondaggi


Rimuovendo la pubblicità a pagamento puoi o togliere i banner, mettere script, oppure metterne uno tuo come questo. E' possibile inserire i tuoi codici anche senza rimuovere la pubblicità, ma SOLO in fondo al forum.


Powered by phpBB © 2001, 2005 phpBB Group
phpbb.it

Powered by forumup.it forum gratis free, crea il tuo forum gratis free ora! Created by Hyarbor & Qooqoa
Confirmed

Page generation time: 0.026