MINI CORSO HTML (3/3)
Precedente   Sommario "Come si crea un sito"

COME CREARE LE PAGINE WEB
DA PUBBLICARE IN INTERNET

By dr. Mario Rizzi ( www.viveremeglio.org )

Hai qualche suggerimento per migliorare questo mini corso?

Sommario

Lezione 22
Come inserire il tuo e_mail in una pagina Web

Lezione 23
Come inserire un brano musicale in una pagina Web
Elenco di siti con file MIDI

Lezione 24
Come inserire un testo scorrevole o marquee

Lezione 25
Come inserire una riga di commento
Come leggere il codice HTML dei siti in Internet

Lezione 26
Come cambiare il tipo (font) dei caratteri

Lezione 27
Come creare un elenco puntato o numerato

Lezione 28
Come creare uno sfondo colorato a una o più parole

Lezione 29
Come creare uno sfondo colorato a una tabella

Lezione 30
Come inserire un numero in posizione apice (elevaz. di potenza) o pedice (logaritmo)

Lezione 31
Come creare delle informazioni già pronte per chi ti scrive dal sito.

Lezione 32
Come fare domande e dare risposte ai visitatori

Lezione 33
Come dare una descrizione ad un link

Lezione 34
Come inserire alcuni caratteri particolari

Lezione 35
Come tradurre una pagina dall'italiano all'inglese

Lezione 36
Metti un contavisitatori gratuito nella tua home page!

Lezione 37
Metti un cercaparole gratuito nella tuo sito!

Lezione 38
Come inserire il codice per farti scrivere una e-mail

Lezione 39
Ulteriori informazioni utili

Lezione 40
Come aggiungere un video al sito



******* LEZIONE 22 ********

Come inserire il tuo e_mail in una pagina Web up.jpg

Purtroppo vi sono delle persone disoneste che, usando programmi appositi, "rubano" le e_mail poste nei siti per poi venderle a coloro che fanno spamming, ovvero spediscono delle lettere di reclam di tutti i tipi a migliaia di persone.

Il codice di base per inserire la propria e_mail, in modo che cliccandoci sopra si apra il programma per la posta elettronica è semplice. Vediamo, ad esempio, come si potrebbe utilizzare per l'indirizzo di e-mail "mario.rossi@speranza.it":

<a href="mailto:mario.rossi@speranza.it">Scrivi a Mario Rossi</a>

che apparirà come: Scrivi a Mario Rossi

Però, per essere sicuri che l'indirizzo di e_mail non venga rubato, puoi copiare il codice seguente nella tua pagina e poi sostituire i campi dove compare la e_mail di Mario Rossi con la tua e_mail. Puoi anche sostituire il messaggio "Scrivi a Mario Rossi" con uno che ti piace di più.

Tutto il resto devi lasciarlo inalterato, altrimenti non può funzionare come si deve.

<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var anchortext = "Scrivi a Mario Rossi";
var mailpart1 = "mario.rossi";
var mailpart2 = "speranza.it";
document.write("<a href=" + "mail" + "to:" + mailpart1 +
"@" + mailpart2 + ">" + anchortext + "</a>")
// End -->
</script>

Che apparirà nella pagina come:

******* LEZIONE 23 ********

Come inserire un brano musicale in una pagina Web up.jpg

Se vuoi, puoi aggiungere alla tua pagina Web un file audio che si attiva automaticamente quando un visitatore entra nella pagina. Oppure puoi mettere un messaggio che il visitatore dovra cliccare per ascoltare la musica. Suggerisco questa seconda soluzione perché non è facile trovare un brano che piaccia a tutti!

Attenzione! I file da usare devono essere file audio. Ricorda che, per evitare problemi, devi mettere il file nella stessa cartella dove hai posto la tua pagina Web.

Come inserire il codice che fa partire automaticamente un brano musicale. Nell'esempio il brano si chiama "edelweis.mid".

<embed src="edelweis.mid" autostart=true loop=false width=144 height=15> </embed>

Vediamo i vari comandi:

  • width=144 definisce la larghezza della barra comandi del suono
  • height=15 definisce l'altezza della barra comandi del suono
  • autostart=true  (parte automaticamente all'apertura della pagina)
  • autostart=false (non parte automaticamente all'apertura della pagina)
  • loop=true  (continua a suonare)
  • loop=false (si ferma dopo aver terminato il brano)

Il codice che fa partire la musica automaticamente apparirà come un normale registratore dei suoni, con i vari comandi per fermare, andare in pausa, ecc. Ecco come apparirà il codice visto più sopra:

Come inserire il codice che fa partire un brano musicale quando il visitatore lo richiede. Nell'esempio il brano si chiama "edelweis.mid".

<A HREF="edelweis.mid">Clicca qui per ascoltare 'edelweis.mid'</A>

Che apparirà come:
Clicca qui per ascoltare 'edelweis.mid'

Elenco di siti con file MIDI

 

******* LEZIONE 24 ********

Come inserire un testo scorrevole o marquee up.jpg

Per inserire un testo che scorra da destra a sinistra lo si racchiude tra i tag:

<marquee>     </marquee>

esempio pratico:

<marquee>Questo è un esempio di testo scorrevole...</marquee>

Che apparirà come:

Questo è un esempio di testo scorrevole...

Per dare la testo un dato colore o una data dimensione basta seguire le lezioni precedenti in cui abbiamo parlato degli attributi del testo, ovvero:

Per esempio, pre dare al testo lo stile "arial", il colore rosso e la grandezza 4, scriveremo:

<font face=arial color=red size=4>
<marquee>Buon lavoro con le pagine HTML!!!</marquee>
</font></p>

Per fare in modo che il testo continui a scorrere dovremo usare il parametro: loop=-1, pertanto il codice di cui sopra diventerà:
<font face=arial color=red size=4>
<marquee loop=-1>Buon lavoro con le pagine HTML!!!</marquee>
</font></p>

Che apparirà come:

Buon lavoro con le pagine HTML!!!

******* LEZIONE 25 ********

Come inserire una riga di commento up.jpg

Quando una pagina web diventa grande è utile inserire delle righe di commento che non si vedono quando si visita la pagina, ma aiutano il Web master a comprendere a cosa serve il codice in quel punto.

Per inserire un commento, che può essere lungo quante righe si vuole, è sufficiente farlo iniziare con i caratteri <!-- e farlo terminare con -->>

Esempio pratico:

<!-- Questa è una riga di commento, il visitatore non la vedrà -->

Come leggere il codice HTML dei siti in Internet up.jpg

Tutti i browser, ovvero i programmi che permettono di navigare in Internet, offrono la possibilità di vedere il codice con cui le pagina sono state scritte. Mentre all'inizio di Internet tutte le pagine erano scritte in puro codice HTML, oggi vi sono altre possibilità e come risultato vengono create delle pagine il cui codice è difficile da decodificare. Ritengo comunque giusto indicare come si possa leggere il codice della pagina che stiamo visitando. Ti informo che tutto il sito che stai visitando ora, compresa questa pagina, è stato scritto in puro codice HTML.

Internet Explorer
Clicca sul menu VISUALIZZA e quindi su HTML.

Mozzilla
Clicca sul menu VISUALIZZA e quindi su SORGENTE PAGINA.

Opera
Clicca sul menu VIEW e quindi su SOURCE.

 

******* LEZIONE 26 ********

Come cambiare il tipo (font) dei caratteri up.jpg

I programmi per navigare in Internet (detti "browser") si sono molto evoluti e sono in grado di visualizzare vari tipi di stile dei caratteri (detto "font"). Per poter definire il font dei caratteri dovete usare il parametro "name=" all'interno del tag <font>, esempio: <font name="arial">. Va comunque ricordato che i vecchi browser non sempre sono in grado di visualizzare tutti questi font e li visualizzano come possono.

<font size=5 face="Verdana">Verdana</font>
Verdana

<font size=5 face="Arial">Arial</font>
Arial

<font size=5 face="Helvetica">Helvetica</font>
Helvetica

<font size=5 face="Impact">Impact</font>
Impact

<font size=5 face="Comic Sans MS">Comic Sans MS</font>
Comic Sans MS

NOTA. Come abbiamo visto, dopo il parametro "face=" si mette il nome del tipo di carattere che si vuole utilizzare. Se tale nome è composto da una parola sola, come "arial", non è necessario rinchiuderlo tra virgolette.
Esempio: <font face=arial>

Diventa, invece, necessario mettere il tipo di carattere tra virgolette quando è composto da più parole. Esempio:
<font size=5 face="Comic Sans MS">

 

******* LEZIONE 27 ********

Come creare un elenco puntato o numerato up.jpg

Vi prego di scusare il ritardo nella pubblicazione di questa lezione (dr. Mario Rizzi).

Talvolta può essere utile creare un elenco, l'HTML ci permette di crearne uno nei modi seguenti:

Elenco puntato
  • Anguria
  • Fragola
  • Mela
Elenco numerato
  1. Anguria
  2. Fragola
  3. Mela

Per creare gli elenchi di cui sopra utilizzare i codici seguenti:

Elenco puntato

<ul>
<li>Anguria</li>
<li>Fragola</li>
<li>Mela</li>
</ul>

Elenco numerato

<ol>
<li>Anguria</li>
<li>Fragola</li>
<li>Mela</li>
</ol>

******* LEZIONE 28 ********

Come creare uno sfondo colorato a una o più parole up.jpg

Per dare più risalto ad una parola, oppure un brano di testo, è possibile usare il codice seguente.

<span style="background-color:ffffcc;">Olà!, ecco un testo con sfondo giallo!</span>

<span style="background-color:00ffff;">Olà!, ecco un testo con sfondo azzurro!</span>

Che appariranno come:

Olà!, ecco un testo con sfondo giallo!

Olà!, ecco un testo con sfondo azzurro!

******* LEZIONE 29 ********

Come creare uno sfondo colorato a una tabella up.jpg

Per dare più risalto al contenuto di una tabella è possibile definire un colore di sfondo con il parametro "bgcolor=xxx" dove xxx può essere definito con il nome del colore in lingua inglese oppure con un codice esadecimale, a tal proposito fare riferimento alla lezione che tratta il colore del testo.

Esempio di tabella con sfondo azzurro:

<table border=1 bordercolor=red bgcolor=#00ffff>
<tr>
<td>questa è la prima cella</td>
<td>questa è la seconda cella</td>
</tr>
</table>

Ecco come apparirà la tabella di cui sopra:

questa è la prima cella questa è la seconda cella

******* LEZIONE 30 ********

Come inserire un numero in posizione apice (ad es. elevazione di potenza) o pedice (ad es. un logaritmo) up.jpg

Il codice per inserire un numero apice è <sup>.
Esempio: 20 al quadrato:
20<sup>2
Che apparirà come: 202

Il codice per inserire un logaritmo è <sub>.
Esempio: log 3 di 10:
10<sub>3
Che apparirà come: 103


******* LEZIONE 31 ********

Come creare delle informazioni già pronte per chi ti scrive dal sito. up.jpg

Può essere utile e simpatico preparare delle informazioni in modo che chi ti scrive le trovi già preimpostate nella e_mail che si appresta a mandarti. Non solo, ma utilizzando questo codice nessuno potrà rubarti la e_mail prendendola dal tuo sito!

Prova a cliccare sullo "Scrivici!" sottostante ed osserva cosa appare nella e_mail che ti propone il tuo programma di posta elettronica.

Il risultato è stato ottenuto con il codice seguente che puoi copiare nel tuo sito.

<p>
<script language=javascript>
<!--
var showlink = "Scrivici!";
var showname = "mario.rizzi";
var showhost = "tin.it";
var showsubj = "Messaggio_da_Vivere_Meglio.";
var showbody = "Scrivi_brevemente_la_tua_richiesta._Grazie!";
document.write("<a href=" + "mail" + "to:" + showname + "@" + showhost +
"?Subject=" + showsubj + "&Body=" + showbody +
">" + showlink + "</a>")
//-->
</script>
</p>

Attenzione:
Una volta che hai copiato il codice nel stuo sito:

1. devi sostituire il mio indirizzo di e_mail con il tuo,

2. devi sostituire i messaggi nelle righe seguenti con i tuoi,
    var showsubj = "Messaggio_da_Vivere_Meglio.";
    var showbody = "Scrivi_brevemente_la_tua_richiesta._Grazie!";

3. devi sostituire il trattino underscore (_) che hai posto nelle righe
    var showsubj =
    var showbody =
    con il codice formato dai 5 caratteri & # 32 ; uniti tra loro. Io non li posso unire perché altrimenti il tuo browser li interpreta come un spazio bianco e non li vedi più!


******* LEZIONE 32 ********

Come fare domande e dare risposte ai visitatori. up.jpg

Se vuoi porre delle domande puoi usare il codice seguente, cambiando le domande e le risposte. Se vuoi, usando la falsariga di quanto esposto, puoi aggiungere tutte le domande che vuoi, devono comunque essere domande che presumono una risposta del tipo sì o no.

Codice per porre domande:
Attenzione!Nella domanda e nella risposta non bisogna usare il carattere apostrofo '. Se proprio lo si deve usare lo si deve far precedere dal carattere /. Esempio: "Yahoo/'s Site".


<form>
Ti piace il mio sito?
<br>Sì. <INPUT onclick="alert('Grazie!!!')" type=radio>
<br>No. <INPUT onclick="alert('Peccato!')" type=radio>
<br>Abbastanza. <INPUT onclick="alert('Ok, messaggio ricevuto, vedrò di migliorarlo.')" type=radio>
</form>

Come apparirà nel sito il codice soprastante:

Ti piace il mio sito?
Sì.
No.
Abbastanza.

******* LEZIONE 33 ********

Come dare una descrizione ad un link up.jpg

Vediamo come è possibile far apparire una breve descrizione quando un visitatore porta il cursore del mouse su un link. Prova, per esempio, a portare il cursore del mouse sopra il link seguente: Torna alla lezione precedente

Per ottenere questo effetto si pone, all'interno del codice per il link (vedi la lezione sui link) il codice seguente: title="Impara come fare domande nel tuo sito!"

In altre parole il codice completo per ottenere la descrizione è il seguente:

<a href="#lezione32" title="Impara come fare domande nel tuo sito!">

******* LEZIONE 34 ********

Come inserire alcuni caratteri particolari up.jpg

Tratto da: www.laterza.it/internet/leggi/internet2000/online/testo/41_testo.htm

à &agrave;
è &egrave;
é &eacute;
ì &igrave;
ò &ograve;
ù &ugrave;
À &Agrave;
È &Egrave;
É &Eacute;
Ì &Igrave;
Ò &Ograve;
Ù &Ugrave

Ed ecco alcuni caratteri speciali che possono tornare utili (da notare che le virgolette, i simboli di maggiore e minore e la '&' richiedono un carattere speciale, per non essere confusi con parte di istruzioni HTML):

(c) &copy;
(r) &reg;
> &gt;
< &lt;
& &amp;
" &quot;

******* LEZIONE 35 ********

Come tradurre la tua pagina dall'italiano all'inglese up.jpg

In Internet vi sono dei servizi che fanno la traduzione di un brano di testo o di una pagina Web. Per far tradurre la tua pagine è sufficiente che inserisci il codice seguente.

<script language="JavaScript1.2" src="http://www.altavista.com/static/scripts/translate_italien.js"></script>

Detto codice apparirà sullo schermo nel modo seguente, e se farai clic sulla bandierina, la pagina verrà tradotta!


******* LEZIONE 36 ********

Metti un contavisitatori gratuito nella tua home page! up.jpg

Va in uno di questi siti, iscriviti e preleva il codice HTML. Dopo che lo avrai prelevato inseriscilo nella Home page del tuo sito.


******* LEZIONE 37 ********

Metti un cercaparole gratuito nella tuo sito! up.jpg

Va in questo sito, iscriviti e preleva il codice HTML per il servizio gratuito (free). Dopo che lo avrai prelevato inseriscilo in una pagina del tuo sito.


******* LEZIONE 38 ********

Come inserire il codice per farti scrivere una e-mail up.jpg

Tratto dalla pagina: www.massimo61.org/email/

In questo esempio si suppone che il tuo e-mail sia mario.rossi@lineaxx.it

Il modo più semplice
Codice:   <a href="mailto:rossi.mario@lineaxx.it">Scrivimi!</a>
Per vedere come verrà visualizzato clicca su: Scrivimi!

Come aggiungere il soggetto alla e-mail
Codice:   <a href="mailto:rossi.mario@lineaxx.it?Subject=Scrivi la tua richiesta. Grazie!">Scrivimi!</a>
Per vedere come verrà visualizzato clicca su: Scrivimi!

Come aggiungere anche un tuo messaggio nel corpo della e-mail
Codice:   <a href="mailto:rossi.mario@lineaxx.it?Subject=Scrivi la tua richiesta. Grazie!&Body=Ti prego di essere breve e chiaro.">Scrivimi!</a>
Per vedere come verrà visualizzato clicca su: Scrivimi!

Come inviare una e-mail a più destinatari, messi in CC (Copia Carbone: ognuno di essi vedrà chi sono gli altri a cui è stata spedita la e_mail).
Codice: <a href="mailto:rossi.mario@lineaxx.it?Subject=Scrivi la tua richiesta. Grazie!&Body=Ti prego di essere breve e chiaro.&CC=antonio01@lineaxx.it;antonio02@lineaxx.it;antonio03@lineaxx.it">Scrivimi!</a>
Per vedere come verrà visualizzato clicca su: Scrivimi!

Come inviare una e-mail a più destinatari, messi in CCn (Copia Carbone Nulla: ognuno di essi NON vedrà chi sono gli altri a cui è stata spedita la e_mail).
Codice: <a href="mailto:rossi.mario@lineaxx.it?Subject=Scrivi la tua richiesta. Grazie!&Body=Ti prego di essere breve e chiaro.&BCC=piero01@lineaxx.it;piero02@lineaxx.it;piero03@lineaxx.it">Scrivimi!</a>
Per vedere come verrà visualizzato clicca su: Scrivimi!


******* LEZIONE 39 ********

Ulteriori informazioni utili up.jpg

Trovi molte informazioni utili in:


******* LEZIONE 40 ********

Come aggiungere un video al sito up.jpg

  • 1. Quando hai trovato il video desiderato cerca la casella "Codice" nella sezione "Informazioni su questo video".
    A volte accanto al film vi è una finestrina con la scritta "Embed" e in tale finestrina trovi il codice da copiare nel tuo sito. Fa' attenzione a copiarlo tutto, deve iniziare con
    <object e finire con </object>.
    Esempio: <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/9SA3ZhJyg-w&hl=en"></embed></object>

  • Copia il codice di cui sopra nel tuo sito e creerai un player. Il video verrà riprodotto quando gli utenti faranno clic sul pulsante "Riproduci".

Note. Puoi ridimensionare il player modificando gli attributi width="425" (laghezza) e height="350" (altezza) sia all'inizio sia alla fine del codice del codice del player. Assicurati che le nuove dimensioni siano proporzionali a quelle predefinite, in modo che il video non risulti deformato. Quando hai stabilito la larghezza moltiplicala per 0,8235 e otterrai l'altezza.

Per altre applicazioni visita il sito: http://it.youtube.com/youtubeonyoursite



 



Precedente   Sommario "Come si crea un sito"