GUIDA
Html per esempi
Guida realizzata da
Giorgio Bella
Hosted by
Pk hack
Impostare la pagina
|
Codice e spiegazione: |
Effetto: |
|
|
Per impostare (dal punto di vista del codice) una
pagina è necessario creare un nuovo documento di testo (.txt) e
rinominarlo in .htm . Poi, aprendolo con l'editor di testo scrivere il
seguente codice:
Tra le scritte <title> si deve inserire il titolo della pagina, mentre i codici che costituiscono il testo della stessa vanno inseriti tra lo spazio presente tra <body> e </body>. Nel codice, inoltre, spazi e rimandi a capo sono come nulli, quindi potreste scrivere teoricamente anche tutto su una sola riga ma, per rendere visivamente più leggibile il codice, si consigliano numerosi rimandi a capo.
|
(da qui il codice) Questa è una semplice guida Html. (fine del codice) |
I caratteri
|
Codice: |
Effetto: |
||||
Per utilizzare altri colori sarà necessario sostituire il codice #00FF00 con altri
codici, riportati in una pratica tabella da me appositamente realizzata.
|
Testo normale: Testo Testo con il codice: Testo |
||||
|
Testo normale: Testo Testo con il codice: Testo |
||||
|
Testo normale: Testo Testo con il codice: Testo |
||||
|
Testo normale: Testo Testo con il codice: Testo |
||||
Il valore size relativo all'altezza del carattere è un po' diverso a come siamo abituati solitamente con Microsoft Word, infatti segue questo criterio: size=1 corrisponde ad altezza 8 in Microsoft Word |
Testo normale (car. 3): Testo Testo con il codice (car. 1): Testo Testo con il codice (car. 4): Testo Testo con il codice (car 4): Testo |
||||
|
Testo normale (Times New Roman): Testo Testo con il codice (Comic Sans MS): Testo |
||||
|
Testo normale: Testo Ora proviamo ad abbinare tutte le informazioni che ho scritto per creare una istruzione caratteriale completa: Testo Arial Black, altezza 18 (dunque size 5), colore giallo, corsivo sottolineato: Testo |
Il posizionamento
|
Codice: |
Effetto: |
|
|
Testo (allineato al margine sinistro) |
|
|
Testo (centrato) |
|
|
Testo (allineato al margine destro) |
Le immagini
|
Codice: |
Effetto: |
||
PS: Il testo presente tra " " indica il luogo in cui si trova l'immagine rispetto al luogo in cui si trova la pagina web. Se per esempio si carica la pagina web in una cartella x (nel caso proposto) l'immagine verrà cercata nella cartella immagini presente nel luogo in cui si trova la pagina web, quindi nella cartella immagini presente nella cartella x. Se poi, per esempio, l'immagine si trovasse in una sotto-sotto directory indicheremo con una / il passaggio di cartella: "immagini/montagne/monti.jpg". Se, invece, il link dell'immagine è esterno, dovremo indicarne l'indirizzo e, questa volta, precederlo da http:// . Esempio:
|
|
||
In questo modo, variando i valori width ed height è possibile rimpicciolire o allargare l'immagine rispetto alle dimensioni dell'immagine originale, ma essendo lo stesso file (l'immagine con dimensioni originali) occupa lo stesso spazio mnemonico dell'immagine originale e impiega lo stesso tempo a caricarsi, perciò per fare grandi variazioni di formato è più conveniente "peggiorare" graficamente l'immagine con appositi programmi. |
|
Informazioni aggiuntive
|
Codice: |
Effetto: |
||
|
Per "linkare" un testo, ovvero far sì che cliccandovi
sopra con il mouse si carichi una diversa pagina del sito è necessario
impostare un codice come nell'esempio qui riportato, inserendo tra le
' ' dopo href= la pagina di destinazione.
Un discorso analogo vale per il linkaggio di immagini, unica differenza, è necessario inserire al posto del testo il link d'origine dell'immagine:
|
|||
|
Esistono diversi tipi di link, qui ne vedremo solo
due, il link a pagina con nuova apertura e i link a pagina senza nuova
apertura. I primi consentono di far sì che cliccando su un link, la
pagina a questo corrispondente si carichi in una nuova finestra, diversa
da quella in cui si trova il link, evitando di far scomparire la pagina
avente il collegamento. Per quanto riguarda il secondo link l'apertura
della pagina linkata avviene nella stessa finestra avente il link. Per
quest'ultimo link è sufficiente utilizzare il codice descritto sopra, ma
per aprire il collegamento in una nuova pagina bisogna prendere il
codice analizzato prima e aggiungervi l'istruzione target="_blank" in
questo modo:
|
|||
|
Per dividere due parti tra loro vengono usate le
barre, linee orizzontali che sono larghe tanto quanto la pagina o la
tabella in cui sono inserite. Il metodo per inserire le barre è
semplicissimo:
Dove hr costituisce la barra e br costituisce "l' a capo"
di riga.
|
Testo testo testo testo testo testo testo testo testo
testo testo. Testo testo testo testo testo testo testo testo testo testo testo. |
||
|
Per scrivere nella riga sottostante, senza aver
terminato quella attuale è possibile usare il br, che funge da rimando
alla riga successiva:
Più rimandi si mettono più spazio
verticale si crea tra due parti:
|
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. (Viene usato 1 br) |
Page realized by: Giorgio Bella (giorgio.bella@hotmail.it) - http://pkhack.altervista.org/