Guida all'html

Come creare il codice html per le vostre storie

Il metodo più semplice è tramite programma.
Programmi come Dreamweaver o Frontpage sono l'ideale. Ma essendo programmi a pagamento, se non li possedete, consiglio di scaricare uno fra i seguenti programmi gratuiti, a scelta:

• PageBreeze HTML - http://www.pagebreeze.com/

• Nvu Italia (consigliato) - http://www.mozillaitalia.it/nvu

Breve guida a PageBreeze HTML

Dopo aver installato il programma, apritelo. La finestra che vi viene aperta è quella dove potete scrivere il testo della storia. Appena sopra questa pagina e prima del menù degli strumenti ci sono una serie di linguette. Ora è impostata su Normal. Se cliccate su 'HTML source' potrete vedere il codice html di quanto scritto. E' quello il codice che dovete copiare e incollare sul sito.
Se avete già una fanfic pronta su Word, potete copiare e incollare il testo nella pagina in versione 'Normal'. Se andate a vedere il codice html, noterete come le parti colorate (i tag html) siano molto numerosi. Quello è codice html principalmente inutile e pesante.
Potete eliminarne la maggior parte con questo procedimento: copiate il testo della vostra storia da Word e incollatelo nel programma 'Wordpad' (non Blocco Note o Notepad ... proprio Wordpad ... in sistemi Windows, si trova solitamente sotto Start/Programmi/Accessori). Da Wordpad poi copiate il testo e incollatelo in PageBreeze. E' un passaggio in più, ma come potete vedere è servito a pulire il testo dal codice inutile (controllate alla linguetta 'HTML source'). Può anche darsi che alcune delle impostazioni da voi usate (colori, spazi, ecc ... la formattazione, insomma) siano state modificate. Vi pregherei di sistemare da PageBreeze la formattazione andata persa, perchè, come vedrete anche voi, così facendo sistemate le cose ma non sovraccaricate il codice html con codice inutile, come invece fareste tenendo il codice di Word.

Breve guida a Nvu Italia

Dalla pagina di Download del sito, scaricare l'Installer Windows con dizionario in italiano (se avete Windows) o la versione Mac dell'ultima versione disponibile (a Gennaio 2007 è la 1.0)

Una volta scaricato il file (si tratta di un file eseguibile, ovvero .exe) cliccate due volte sopra l'icona del programma e istallate nel sistema. Al termine del processo di installazione, chiedete di aprire il programma.

La finestra che vi viene aperta è quella dove potrete scrivere il testo della storia. Appena sotto questa pagina ci sono una serie di linguette. Ora è impostata su Normale. Se cliccate su 'Sorgente' potrete vedere il codice html di quanto scritto. E' quello il codice che dovete copiare e incollare sul sito (in realtà, è utile solo tutto ciò che sta tra i due tag BODY di apertura e chiusura; i vari tag iniziali HTML, HEAD, TITLE, ecc ... sono da saltare, sia all'inizio che alla fine)
Se avete già una fanfic pronta su Word, potete copiare e incollare il testo nella pagina in versione 'Normale'. Se andate a vedere il codice html, noterete come le parti colorate (i tag html) siano molto numerose. Quello è codice html principalmente inutile e pesante.
Potete eliminarne la maggior parte con questo procedimento: copiate il testo della vostra storia da Word e incollatelo nel programma 'Wordpad' (non Blocco Note o Notepad ... proprio Wordpad ... in sistemi Windows, si trova solitamente sotto Start/Programmi/Accessori). Da Wordpad poi copiate il testo e incollatelo in NVU. E' un passaggio in più, ma come potete vedere è servito a pulire il testo dal codice inutile (controllate alla linguetta 'Sorgente'). Può anche darsi che alcune delle impostazioni da voi usate (colori, spazi, ecc ... la formattazione, insomma) siano state modificate. Vi pregherei di sistemare da NVU la formattazione andata persa, perchè, come vedrete anche voi, così facendo sistemate le cose ma non sovraccaricate il codice html con codice inutile, come invece fareste tenendo il codice di Word.

Se voleste saperne di più su come modificare a mano il codice html, guardate la Guida più completa (semplice), scritta da Makichan, che ringrazio.

L'html è il linguaggio in cui sono scritte le pagine web. Questo linguaggio viene interpretato dal browser (come Internet Explorer, Mozilla Firefox o Netscape) e reso sotto forme di scritte o immagini. Per visualizzare il linguaggio html di una pagina web, basta selezionare in Internet Explorer sulla barra degli strumenti 'Visualizza' e poi 'HTML'.
Un buono strumento per visualizzare e modificare il codice html è Notepad (o Blocco Note), programmino di Windows per i testi.
Ancora più utili sono i programmi come FrontPage o Dreamweaver, che vi permettono di scrivere i testi e di modificarli esattamente come fareste con Word, con la differenza che vi creano il codice html della pagina mentre la create. Suppongo che però, se aveste questi due programmi (o anche un programma simile, seppur non così famoso), non sareste qui, in quanto è osservando il codice che producevano questi programmi che si impara l'html.

Legenda

Ora passiamo alle fondamenta dell'html per la modifica dei testi (sono solo quelli che darò qui ... tutto il panorama del html è troppo complesso e non sono la più indicata a spiegarvelo).

TAG

Quasi ogni testo html è costellato di TAG, scritte che descrivono le caratteristiche che deve avere qualunque cosa che poi verrà visualizzata dal browser. Un esempio di Tag è:

dove 'tag' poi sarà sostituito dalla lettera o parola più appropriata per il tipo di effetto che volete creare. Ogni tag è valido finchè non viene chiuso. Per chiudere un tag si scrive:

Se non chiudeste il tag, finireste col dare a tutto il vostro testo la caratteristica indicata. Il che è utile se per esempio voleste dare a tutto un testo una stessa caratteristica (cioè per esempio, tutto in corsivo, tutto in grassetto, tutto di un solo colore, eccetera).

Se aprite più tag contemporaneamente, è importante che li chiudiate come da esempio:

Ora che siete in possesso di queste conoscenze andiamo a capire cosa bisogna inserire all'interno del tag.

Andare a capo e allineare

Come avete visto per creare una linea, serve il tag <p>.  A seconda dell'allineamento che si vuole dare, a <p> aggiungerete, come da esempio:

<br> (uno dei pochi, se non l'unico, tag che non deve essere chiuso, ma solo aperto, in quanto significa da solo 'interruzione e a capo') serve ad andare a capo, pur restando nel tag <p>. Questo serve per continuare a poter usufruire delle caratteristiche di <p>, e nel caso di prima, dell'allineamento al centro.
Ogni volta che chiudiamo il tag infatti non usufruiamo più delle sue caratteristiche. Infatti la scritta 'Sarà inserito in un quadrato di colore giallo' è in un nuovo tag <p>, che essendo un tag staccato dal precedente (quindi l'allineamento al centro non è più sottointeso) e non presentando di per sè alcuna indicazione di allineamento, appare, come da predefinito per ogni browser, allineata a sinistra.

Nella pratica, i tag <p> e <br> servono a creare una minore e maggior distanza tra le righe. (distanza visibile nell'esempio di sopra)
E' meglio se ad esempio le righe di un paragrafo hanno tutte alla fine il tag <br>, che crea poca distanza.
In questo modo tutte le righe saranno vicine e allineate in unico senso, e quando chiuderete il tag <p> la distanza con la prossima riga risulterà visibile e sarà chiaro per il lettore che avete terminato un paragrafo.

Testo in corsivo

Quindi, per ogni frase o parola che volete che si veda in corsivo, inserire all'inizio il tag <i> e alla fine il tag </i>.

Testo grassetto

Quindi, per ogni frase o parola che volete che si veda in grassetto, inserire all'inizio il tag <b> e alla fine il tag </b>.

Testo colorato

Il discorso sui colori è più complicato. Innanzitutto, come avrete capito, si tratta di un codice di 6 lettere o numeri che identifica ogni colore. Di solito sono i programmi che vi danno il codice per qualunque sfumatura o tonalità di colore. Imparare i codici a memoria è impossibile (se c'è un modo per riuscire a scrivere correttamente un colore, io non lo so^^). Qui vi dò i fondamentali (sono scritti in lettere maiuscole, ma non è strettamente necessario che sia così)

Ah, se state pensando che perchè il vostro testo si veda di colore nero, dovete scrivere questo tag, non preoccupatevi. Il mio sito, così come qualunque altra fonte in internet, ha come colore predefinito il nero. Se non viene specificato nessun colore, per il browser significa nero.

In ogni caso potete provare a modificare la sequenza delle lettere, o le lettere stesse (con altre lettere o numeri) per scoprire quanti colori diversi potete creare.

Se volete dare un colore unico a tutto un testo, vi basterà aprire il tag del colore alla prima frase, e chiuderlo all'ultima.

<FONT>

Il tag <font> è uno dei più versatili. Consente di assegnare ad un testo la dimensione desiderata oppure appunto il font (Arial, Times, Verdana) che più si vuole.

Come potete vedere, le parole hanno dimensioni diverse. Il codice per questa frase è

Quindi per le dimensioni bisogna aggiungere a font la scritta 'size', ovvero 'dimensioni'. Osservando il risultato nel browser traete le vostre conclusioni sulla dimensione da usare.

Ognuna di queste frasi ha un carattere diverso. Ecco il codice:

 Per cambiare il carattere, bisogna aggiungere a font la scritta 'face', ovvero 'faccia'.

E' consigliabile non usare font (cioè caratteri di scrittura in questo caso, non il tag) troppo rari, o che magari avete raccolto in internet ... questo perchè, se magari l'avete voi, il computer del lettore non ce l'ha, e quindi visualizzerà un semplice testo nel carattere predefinito del browser (è possibile selezionarlo per ogni computer, comunque tenete conto che di solito è Arial, o uno dei tre là sopra).

<A HREF> .. il tag per i link

<a href> è il tag per inserire un link. Bisogna naturalmente specificare l'attributo di A HREF, in questo modo:

EFP è una parola che porta a un link, e in questo caso alla prima pagina del mio sito.

Se volete portare il link a una pagina interna, non è necessario scrivere per intero l'indirizzo (ovvero usando 'http://", ma semplicemente il nome dell'eventuale cartella e/o del file.

<IMG>

Come avrete probabilmente intuito, questo è il tag che serve a inserire immagini.

Il codice per inserire questa immagine è:

'src' introduce l'ìndirizzo a cui potete trovare l'immagine nella rete. Nel mio caso si tratta di un immagine presente nella stessa cartella di questa pagina, ma nel caso vogliate inserire visualizzare un immagine all'interno di una fanfiction, dovrete procurarvi uno spazio web (gratuito ve lo offrono Altervista, Freeforumzone e altri) e inserire lì l'immagine. In quel caso dovrete scrivere per intero l'indirizzo. (cioè 'http://dominio/nomedieventualecartella/nomedelfileimmnagine.estensione dell'immagine')

Il dominio è www.efpanfic.net, ad esempio.

Le estensioni possono essere .jpg o .gif (sono le estensioni che massimizzano la qualità mantenendo contenuto il peso dell'immagine).