GUIDA Javascript 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 scriviamo il seguente codice:

 <html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nuova pagina</title>
</head>

<body>
(da qui il codice)
Questa è
una semplice guida
Javascript.
(fine del codice)

</body>

</html>

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 Javascript. (fine del codice)

 

I caratteri

Codice:

Effetto:


 <font color="#00FF00">Testo</font>

Per utilizzare altri colori sarà necessario sostituire il codice #00FF00 con altri codici, riportati in una pratica tabella da me appositamente realizzata.

APRI LA TAVOLA DEI COLORI

Testo normale: Testo

Testo con il codice: Testo

 <b>Testo</b>

Testo normale: Testo

Testo con il codice: Testo

 <i>Testo</i>

Testo normale: Testo

Testo con il codice: Testo

 <u>Testo</u>

Testo normale: Testo

Testo con il codice: Testo


 <font size="3">Testo</font>

 <font size="1">Testo</font>

 <font size="4">Testo</font>

 <font size="4" color="#00FF00">Testo</font>
- - -
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
size=2 corrisponde ad altezza 10 in Microsoft Word
size=3 corrisponde ad altezza 12 in Microsoft Word
...si può proseguire all'infinito con questo criterio e possono essere usati anche i numeri decimali...

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

 <font face="Comic Sans MS">Testo</font>

Testo normale (Times New Roman): Testo

Testo con il codice (Comic Sans MS): Testo

 <u><i><font face="Arial Black" size="5" color="#FFFF00">
Testo</font></i></u>

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:


<p align="left">Testo</p>

Testo (allineato al margine sinistro)


<p align="center">Testo</p>

Testo (centrato)


<p align="right">Testo</p>

Testo (allineato al margine destro)

 

Le immagini

Codice:

Effetto:

<src="immagini/monti.jpg">

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:

<src="http://pkhack.altervista.org/logo.png">


(l'immagine viene inserita con le sue effettive dimensioni)


 <src="immagini/monti.jpg" width="240" height="163">

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.


(l'immagine è stata ridotta di dimensioni rispetto all'originale)

 

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.

 <a href="http://pkhack.altervista.org/index.html">Testo linkato</a>

Un discorso analogo vale per il linkaggio di immagini, unica differenza, è necessario inserire al posto del testo il link d'origine dell'immagine:

 <a href="http://pkhack.altervista.org/index.html">
<img border="0" src="immagini/monti.jpg" width="240" height="163"></a>

Testo linkato


(immagine linkata)

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:

 <a target="_blank" href="http://pkhack.altervista.org/index.html">Testo 
linkato</a>

Testo (collegato in modo semplice)

Testo (collegato con apertura in una nuova finestra)

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:

 <br><hr><br>

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:

 testo testo testo<br>testo testo testo

Più rimandi si mettono più spazio verticale si crea tra due parti:

 testo testo testo<br><br>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 testo testo testo. (Viene usato 1 br)
 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 testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo. (Vengono usati 2 br)

 Testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo.




Page realized by: Giorgio Bella (giorgio.bella@hotmail.it) - http://pkhack.altervista.org/



Visitatori in questa pagina: