Guida all'impaginazione delle discussioni
Posted by Gordie
|
Guida all'impaginazione delle discussioni March 24, 2014 10:46AM |
Salve, come da titolo con la presente vorrei spiegare l'utilizzo del codice HTML per poter impaginare a dovere (ad esempio) le discussioni soprattutto nel caso in cui si debbano scrivere molte cose con molti riferimenti sia grafici che per immagini.
Non è una lezione di HTML ma semplici riferimenti per chi vuol far le cose bene.
Innanzitutto il codice HTML è supportato all'interno del Forum, lo possiamo trovare utile per impaginare, per inserire delle immagini, per delle tabelle, etc. Una cosa molto utile è sapere che il codice HTML può essere mescolato al codice BB del Forum, lo vedremo più avanti.
Sintassi: L'HTML prevede che i TAG (codici di programmazione) si inseriscano tra <nometag> e per chiudere un TAG si utilizzi </nometag>. Maiuscolo e non vanno bene per i tag, in questa guida li troverete scritti sia in minuscolo che in maiuscolo per evidenziarne l'utilizzo. I tag hanno degli attributi che possono essere inseriti all'interno delle <>, ad esempio:
<img src="reprap.jpg" width="50" height="50" hspace="10" vspace="5">
è il codice per inserire un'immagine, width/height/hspace/vspace sono gli attributi (con valori in pixel in questo caso) del tag img.
Titolo <H4>
Vediamo qualche esempio, usiamo il logo RepRap le cui dimensioni originali sono (larghezza)width="459" (altezza)height="457":
Creaimo un collegamento alla pagina <A HREF="http://reprap.org/wiki/RepRap">RepRap</A> ed eccolo qua RepRap
Posiziono il logo ridimensionato a 32x32 pixel
tra queste parole.
Come ho fatto? Ecco il codice (utilizzo il tag <code> ):
Lo posiziono a sinistra o a destra . Ho semplicemente aggiunto l'attributo
Se volete rendere l'immagine cliccabile basta sostituire il testo del collegamento con il codice dell'immagine ovvero:
Per gli elenchi puntati consiglio l'utilizzo dello strumento
dal pannello strumenti del forum, a volte può essere ostico ma potete sempre modificare ed aggiungere le voci.
Fulcro dell'impaginazione sono le tabelle, comode e non così difficili da utilizzare.
Le tabelle si creano con questo codice
Le tabelle sono composte da celle posizionate in righe e colonne, una riga si crea con il tag
Vediamo alcuni esempi di tabelle con affianco il codice che le crea:
Ebbene questi sono solo due esempi per farvi vedere quel che si riesce a fare. Per imparare ulteriori parametri e attributi delle tabelle vi rimando a queste due rapide guide: una per le tabelle in HTML classico; una per la personalizzazione tramite CSS della tabella. Avete visto che il primo esempio rappresenta la più semplice delle tabelle, ed infatti potete vedere come in realtà bastano 4 righe di codice HTML per creare una tabella che può aiutarci a rendere più comprensiva la discussione, ed ecco una tabella classica che vi può far capire cosa intendo: una carrellata di immagini con problemi di stampa corredate da descrizione.
"Ciao ragazzi oggi ho finito la mia stampante ed ho fatto delle prove:
Questo è un esempio di come una tabella sia utilissima per aggiungere una descrizione alle foto che mettiamo nelle discussioni, senza dover poi scrivere cose tipo "Nella prima foto di destra precedente al mio post di ieri..."
Grazie per la lettura, se qualcosa non è chiaro o non è spiegato bene fatemelo sapere, lascio a voi le prove per imparare, provate a rifare l'ultima tabella qua sopra. Un aiuto? Click destro "Ispeziona elemento"
Edited 11 time(s). Last edit at 05/13/2014 04:18AM by Gordie.
Non è una lezione di HTML ma semplici riferimenti per chi vuol far le cose bene.
Innanzitutto il codice HTML è supportato all'interno del Forum, lo possiamo trovare utile per impaginare, per inserire delle immagini, per delle tabelle, etc. Una cosa molto utile è sapere che il codice HTML può essere mescolato al codice BB del Forum, lo vedremo più avanti.
Sintassi: L'HTML prevede che i TAG (codici di programmazione) si inseriscano tra <nometag> e per chiudere un TAG si utilizzi </nometag>. Maiuscolo e non vanno bene per i tag, in questa guida li troverete scritti sia in minuscolo che in maiuscolo per evidenziarne l'utilizzo. I tag hanno degli attributi che possono essere inseriti all'interno delle <>, ad esempio:
<img src="reprap.jpg" width="50" height="50" hspace="10" vspace="5">
è il codice per inserire un'immagine, width/height/hspace/vspace sono gli attributi (con valori in pixel in questo caso) del tag img.
Codice HTML per il testo:
| <P> | Linea di testo, crea un paragrafo nuovo | <BR> | Vai a capo |
| <HR> | Crea una linea orrizzontale | </P> | Chiude il paragrafo |
| <B>inserire testo</B> | Testo in grassetto | <I>inserire testo</I> | Testo in corsivo |
| <U>inserire testo</U> | Testo sottolineato | <H1>inserire testo</H1> | Il testo diventa un titolo con dimensioni variabili da H1 a H6 piccolo |
| <FONT COLOR=#******> | Colore del testo, vedere tabella | Per la dimensione del testo consiglio l'uso dello strumento nella barra strumenti del Forum 
|
|
| <CODE> | Forse il tag più importante, serve per quotare il codice, solitamente in questo forum quello del Firmware, utile quindi per distinguere il testo normale dal codice. Notate infatti dall'esempio il cambio font. USATELO!  |
Esempio:
#error Oops! Make sure you have 'Arduino Mega' selected from the 'Tools -> Boards' menu.
|
|
Titolo <H4>
Esempio di utilizzo:
</H4> Creo un nuovo paragrafo, <p><font color="#0000ff">Questo è del testo blu <b>in grassetto</b></font> vado a capo <br>
Sono sempre nel paragrafo creato da <p> che ora chiudo </p>
Inserimento di collegamenti ed immagini
| <A HREF="URL">testo*del*link</A> | Crea un collegamento alla pagina/file URL richiamabile dal testo*del*link | <IMG SRC="URL" WIDTH=*** HEIGHT=***> | Incorpora un'immagine, richiamabile dall'URL di altezza (HEIGHT) e larghezza (WIDTH) |
| hspace="**" | Aggiunge una spaziatura orrizzontale attorno all'immagine | vspace="**" | Aggiunge una spaziatura verticale attorno all'immagine |
| align="left/right" | In caso di testo lungo ingloba l'immagine e l'allinea a sinistra o destra col testo(va messa solo una) | Posso inserire un'immagine anche in una tabella | |
Vediamo qualche esempio, usiamo il logo RepRap le cui dimensioni originali sono (larghezza)width="459" (altezza)height="457":
Creaimo un collegamento alla pagina <A HREF="http://reprap.org/wiki/RepRap">RepRap</A> ed eccolo qua RepRap
Posiziono il logo ridimensionato a 32x32 pixel
tra queste parole. Come ho fatto? Ecco il codice (utilizzo il tag <code> ):
<img src="http://reprap.org/wiki/RepRap" width="32" height="32">Lo posiziono a sinistra
o a destra . Ho semplicemente aggiunto l'attributo align="left" (a sinistra) e align="right" (a destra).Se volete rendere l'immagine cliccabile basta sostituire il testo del collegamento con il codice dell'immagine ovvero:
<a href="http://reprap.org/mediawiki/images/1/1b/RepRap-Logo.jpg"><img src="http://reprap.org/mediawiki/images/1/1b/RepRap-Logo.jpg" align="left" width="32" height="32"></a>Elenchi puntati
Per gli elenchi puntati consiglio l'utilizzo dello strumento
Tabelle
Fulcro dell'impaginazione sono le tabelle, comode e non così difficili da utilizzare.
Le tabelle si creano con questo codice
<TABLE border="1" cellpadding="4" cellspacing="1"> Il tag è table, mentre il resto sono attributi: border="1" disegna i bordi con larghezza 1 pixel; cellpadding="4" indica lo spazio tra il contenuto (testo, immagini,etc) e il bordo, 4 pixel; cellspacing="1" indica che la distanza tra le celle è di 1 pixel.Le tabelle sono composte da celle posizionate in righe e colonne, una riga si crea con il tag
<TR>, una cella inserita in una riga crea, oltre alla cella, una colonna: <TD>. Importante chiudere sempre tutti i tag nell'ordine "gerarchico" con cui si aprono.Vediamo alcuni esempi di tabelle con affianco il codice che le crea:
| <table border="3" cellpadding="3" cellspacing="3"> <tr> <td>cella 1</td> <td>cella 2</td> </tr> <tr> <td>cella 3</td> <td>cella 4</td> </tr> </table> | ||||
Qui sotto introduciamo il tag style che fa parte del linguaggio CSS, non sto qui a spiegarvi cos'è ma sappiate che vi permette di definire lo stile della tabella. | |||||
| <table style="border:3px dashed black;" cellpadding="3" cellspacing="3" width="300"> <tr> <td bgcolor="#0000FF" align="right">cella 1</td> <td>cella 2</td> </tr> <tr> <td>cella 3</td> <td bgcolor="#0000FF" align="left">cella 4</td> </tr> </table> | ||||
Ebbene questi sono solo due esempi per farvi vedere quel che si riesce a fare. Per imparare ulteriori parametri e attributi delle tabelle vi rimando a queste due rapide guide: una per le tabelle in HTML classico; una per la personalizzazione tramite CSS della tabella. Avete visto che il primo esempio rappresenta la più semplice delle tabelle, ed infatti potete vedere come in realtà bastano 4 righe di codice HTML per creare una tabella che può aiutarci a rendere più comprensiva la discussione, ed ecco una tabella classica che vi può far capire cosa intendo: una carrellata di immagini con problemi di stampa corredate da descrizione.
"Ciao ragazzi oggi ho finito la mia stampante ed ho fatto delle prove:
 |
Qui ho impostato la temperatura bla bla bla |
 |
Questa è stata la mia reazione, ho perso la testa... |
 |
Quindi ho preso la bici e sono andato al mare ma ho trovato una medusa... |
Questo è un esempio di come una tabella sia utilissima per aggiungere una descrizione alle foto che mettiamo nelle discussioni, senza dover poi scrivere cose tipo "Nella prima foto di destra precedente al mio post di ieri..."
Grazie per la lettura, se qualcosa non è chiaro o non è spiegato bene fatemelo sapere, lascio a voi le prove per imparare, provate a rifare l'ultima tabella qua sopra. Un aiuto? Click destro "Ispeziona elemento"
Edited 11 time(s). Last edit at 05/13/2014 04:18AM by Gordie.
Sorry, only registered users may post in this forum.