Scrivere una guida per Windowx
Guida per Guida
ESEMPIO GUIDA
Questo è il file di lavoro per scrivere guide e tutorial per il portale windowx.it in html, scaricate l'intera cartella a questo indirizzo e decomprimetela:
Tool Istruzione Html
Dovrete usare il blocco note di windows, aprire il file GuidaxGuida.htm, scrivere i codici, e salvare in formato .html,
ad esempio ilmiofile.html, o il miofile.htm. Se aprite il file con il blocco note, visualizzerete il codice,
se aprite il file con explorer o firefox, vedrete il risultato della pagina web.
Provate con questo file ad aprirlo prima con explorer, e poi con il blocco note.
Prima di tutto speficiamo che molti tag in html, sopratutto quelli che riguardano la formattazione del testo, hanno un inizio e una fine, ed è necessario sempre chiuderli.
Ad esempio Guida in grassetto, si ottiene con:
Quella che vedete qui sopra è un immagine, al fine di farvi vedere la sintassi, se fosse in forma di testo apparirebbe infatti solo la parola Guida in grassetto,
in quanto il browser visualizzerebbe solo il testo applicando le istruzioni dei tags html!!!
Riepilogando, il grassetto, si imposta con le sola lettera b tra le "<>", e si chiude semplicemente con lo stesso tag preceduto dalla barra /.
Proviamo adesso a scrivere "Guida", con testo normale, ma centrato:
Guida
Fatto, ora vediamo l'immagine di ciò che abbiamo scritto:
Abbiamo aperto il tag "center", e lo abbiamo chiuso dopo la parola esempio con la /, e in più abbiamo usato i tag "br", questi senza chiuderli.
Abbiamo sbagliato? No, perchè il tag "br" è usato per andare a capo riga, non fà parte dei tag che vengono chiusi, come da logica.
Adesso proviamo a scrivere Guida, in grassetto e centrato:
Guida
Ora vediamo il codice usato per ottenere questo effetto:
Semplice vero????
Adesso usiamo anche i colori, premettendo che, windowx.it, usa un codice html certificato con fogli di stile, cioè con particolari file che gestiscono la garfica, testi compresi. Una porzione
di uno dei file style.css, è presente in questa cartella, per permettere una corretta visualizzazione. Per attivare i code contenuti nel file style.css, useremo
le "classi"!!! Sopra, in alto, tra le barre , sono presenti i nomi delle classi possibili e i relativi effetti. Ad esempio, per il titolo della nostra guida,
scegliamo il testo blu centrato che corrisponde alla classe texadminblu:
Titolo: La mia prima Guida x Windowx
Ecco il testo per il titolo, centrato e blu, e questa sotto è la sintassi:
Potrete cambiare semplicemente il nome della classe, secondo gli esempi in alto, per ottenere il relativo effetto: rosso centrato, blu a sinistra, amaranto, e altri ancora.
Per inserire un immagine invece, useremo una sintassi un pò più complessa, ma molto facile da usare.
Esempio Immagine
Ora vediamo il codice che abbiamo usato per inserire questa immagine:
- img border="0" class="centro" src="Articoli/Windows.jpg" width="350" height="85" alt="Il mio commento all'immagine" -
Naturalmente, ricordatevi di racchiudere la riga di codice tra le <>, che adesso ho eliminato, altrimenti il browser lo interpreterebbe
come codice html, e visualizzerebbe nuovamente la stessa immagine!!!
Allora, img ci dice che l'oggetto è un immagine, border stabilisce il bordo dell'immagine che in questo caso è zero, src è l'istruzione più importante in quanto
indica l'indirizzo dove si trova l'immagine, with è la larghezza ed height l'altezza in pixel dell'oggetto-immagine. Dentro alt invece
inseriremo il nostro commento o descrizione all'immagine.
Esempio Link
Se volessimo inserire un link nella nostra guida? Ad esempio come questo:
Windowx.it
Niente di più facile, aprite questo file con il blocco note e trovate questa riga.
Questa volta il link è specificato da a, mentre l'indirizzo della pagina web è dato da href, mentre onclick e return rimangono sempre uguali
(servono ad aprire il link in una nuova finestra), in title abbiamo il commento o la descrizione del link, e alla fine, racchiuso tra l'inizio e
la chiusura del tag a, troviamo la parola linkata. Provate a cambiare il link con il blocco note, salvate, e aggiornate la pagina web,
per vedere l'effetto delle modifiche. Potrete tenere aperti in contemporanea lo stesso file sia con il blocco note che con explorer,
e per vedere i cambiamenti vi basterà salvare con il blocco note e aggiornare la pagina con explorer!!!
Conclusioni e consigli
Abbiamo finito. Se avete letto con calma e attenzione questa guida, e sopratutto avete provato a metter
mano al codice......complimenti.....
Siete stati appena abilitati a scrivere guide per Windowx
Se dovete inserire immagini di schermate di windows o di altri programmi, potete usare Lcx Capture, che è disponibile nell'area download,
o se avete Windows Vista lo strumento di cattura integrato in Accessori.
Una volta finita la guida potete inviarla direttamente in codice html in Invia News, se le immagini si trovano già sul web,
oppure comprimete tutta la cartella GuidaxGuida in formato .zip, e inviatela in allegato per email o tramite il form Contattaci.
Buon divertimento!!!
Reset74
Copyright © by WINDOWX Tutti i diritti riservati. Pubblicato su: 2007-09-19 (305 letture) [ Indietro ] |
05:10:28 Date: 30-07-2010
Home Page
Your Account
Forums
Guide
Search
Faq
Contattaci
Windowx :
Community :
Documenti :
Tools Anti-virus
Linkaci :
