Corso di HTML 4 - A cura di Luca Miacola
Un testo scorrevole in un sito è un elemento deffetto molto semplice da inserire qui di seguito ci sono i tag che vi consentiranno di inserirlo. Ovviamente il testo scorrevole seguirà le impostazioni della pagina a meno che non si ponga allinterno di un tag <font>
</font>
.
<marquee> </marquee> |
Il testo inserito al posto dei puntini scorrerà da destra verso sinistra. |
<marquee direction=right> </marquee> |
Il testo inserito al posto dei puntini scorrerà da sinistra verso destra. |
<marquee behavior=alternate>
</marquee> |
Il testo inserito al posto dei puntini scorrerà da destra verso sinistra e viceversa. |
Adesso passiamo alla parte pratica, provate a copiare il testo seguente, ad incollarlo in un nuovo documento del blocco note, personalizzare il testo in azzurro e salvarlo con il nome di index.html, questa sarà la Home page del tuo sito!!!
<html>
<head>
<title>inserire qui il titolo del tuo sito</title>
<meta name=autor content=inserire qui il tuo nome>
<meta name=generator content=Blocco Note di Windows>
<meta name=description content=inserire qui una breve descrizione del tuo sito>
<meta name=robots content=noindex>
</head>
<body bgcolor=yellow text=blue>
<font size=8>
<p align=center>inserire qui il titolo del tuo sito</p>
</font>
<p><p/>
<p
align=left>
inserire
qui il testo da visualizzare
</p>
<p></p>
<marquee behavior=alternate>inserire qui il testo che si vuole fare scorrere</marquee>
</body>
</html>
Spesso è molto utile inserire delle immagini o degli elementi grafici che vadano a chiarire, ma spesso consentono di inserire immagini e linee orizzontali.
I tag vanno inseriti tra i comandi <body> e </body> nel punto in cui desideriamo che escano.
<img src= percorso> |
Cerca il file, se la pagina deve essere destinata limmagine si deve trovare nella stessa cartella della pagina e al posto del percorso va inserito semplicemente il nome del file. |
<hr> |
Inserisce una linea orizzontale nel documento che fungerà da separatore. |
<hr size= numero color=colore> |
Inserisce una linea orizzontale che avrà colore e spessore definiti. |
Adesso siamo giunti alla parte principale della programmazione html, la creazione dei collegamenti ipertestuali quelli, cioè, che ti consentono di inviare E-Mail, spostarti da una pagina allaltra, scaricare file da Internet.
I tag che ti consentono di farlo sono questi:
<a href= URL della pagina> <p>testo del collegamento</p> </a> |
Questo tag consente allutente di spostarsi da una pagina allaltra, lURL di una pagina è il suo indirizzo. Esempio: |
<a href= mailto:indirizzo> <p>testo del collegamento</p> </a> |
Questa tag consente allutente di inviare una E-Mail dal tuo sito ad un dato indirizzo. Esempio: |
<a href= percorso del file> <p>testo del collegamento</p> </a> |
Questa tag consente allutente di scaricare un file dal tuo sito. Esempio: file:///percorso |
Creiamo una cartella sul nostro descktop e chiamiamola web. Inseriamo nella nuova cartella una foto o unimmagine che vogliamo inserire nel nostro documento.
Adesso riprendiamo lesempio n°1 e apportiamo alcune modifiche: la parte chiara è quella già presente, le parti scure sono le modifiche.
<html>
<head>
<title>inserire qui il titolo del tuo sito</title>
<meta name=autor content=inserire qui il tuo nome>
<meta name=generator content=Blocco Note di Windows>
<meta name=description content=inserire qui una breve descrizione del tuo sito>
<meta name=robots content=noindex>
</head>
<body bgcolor=yellow text=blue>
<font
size=8>
<p align=center>inserire qui il titolo del tuo sito</p>
</font>
<hr
size=4 color=blue>
<p><p/>
<p align=left>
inserire qui il testo da visualizzare
</p>
<p align=center><img src=esempio.gif></p>
<marquee behavior=alternate>inserire qui il testo che si vuole fare scorrere</marquee>
<a href=mailto:inserisci il tuo indirizzo E-Mail>
<p align=center>Mandami un E-Mail</p>
</a>
</body>
</html>
Visto come è semplice? Adesso servendoti dei tag che ti ho citato cerca di fare quello che ti dico:
1. Svuota la tua cartella web.
2. Crea due pagine copiando gli esempi precedenti. Una la chiamerai index.html laltra la chiamerai pag1.htm.
3. La pagina index.htm deve avere sfondo giallo e testo verde, una linea orizzontale, una foto, un elenco puntato che contenga i nomi dei tuoi familiari, un testo scorrevole che va da destra verso sinistra e viceversa, un collegamento alla pag1.htm, un collegamento alla tue E-Mail.
4. La pagina pag1.html deve avere sfondo verde e testo giallo, una linea orizzontale, un elenco numerato, un testo scorrevole che va da sinistra verso destra, un collegamento alla index.htm, un collegamento alla tua E-Mail, una frase finale che abbia carattere e grandezza diversa.
Non metterti le mani tra i capelli se non sai fare qualcosa cliccaci sopra e arriverai direttamente al punto in cui la pagina spiega come si fa!!!
rosso |
red |
arancione |
orange |
giallo |
yellow |
verde |
green |
blu |
blue |
viola |
violet |
nero |
black |
bianco |
white |
rosa |
pink |
Inserire un modulo di iscrizione:
Spesso sarebbe molto utile avere una lista di utenti che visitasse periodicamente il vostro sito, e sarebbe anche utile conoscere la loro e-mail le loro considerazioni e tanto altro per mandargli e-mail che li informassero degli aggiornamenti. Spesso basta inserire un collegamento alla propria caselle di posta elettronica ma per chi non ha le idee chiare è molto limitante in quanto non saprebbe cosa scrivere. La cosa migliore è quella di creare un modulo di iscrizione.
<form action=indirizzo method=post> |
Dice al browser che da questo punto inizia un form, cioè un module che sarà inviato allindirizzo indicato. Ponete al posto di indirizzo la vostra e-mail. |
|
Al posto dei puntini vanno inseriti i campi e le domanda alle quali volete che i vostri utenti diano una risposta. |
<input type=Submit
value=invia> |
Inserisce il pulsante invia. |
</form> |
Indica che il modulo è terminato. |
Adesso vi mostro i tag che vi consentono di inserire i vostri pulsanti. Ricordate di inserire sempre prima una domanda come vi ho insegnato prima:
<p>Inserire qui la domanda</p>
<input type= text name=
> |
Inserisce una casella di testo come questa:
Inserire al posto dei puntini una parola cha racchiuda il significato di quello che sarà scritto allinterno, ad esempio se si richiede lindirizzo di posta elettronica potreste inserire name= mail. |
<p><input type=radio checked name=opzione value=scelta1>Scelta 1</p> <p><input type=radio name=opzione value=scelta2>Scelta 2</p> <p><input type=radio name=opzione value=scelta3>Scelta 3</p> |
Inserisce tre caselle di opzione delle quali una sola potrà essere selezionata. Esempio:
|
<p><input
type=checkbox checked name=opzione
value=scelta1>Scelta 1</p> <p><input type=checkbox name=opzione value=scelta2>Scelta 2</p> <p><input type=checkbox name=opzione
value=scelta3>Scelta 3</p> |
A livello grafico si presenterà un campo simile al precedente ma le caselle saranno quadrete e ne potrete selezionare quante ne volete
|
<p><textarea name=commenti></textarea> |
Inserisce una casella di testo nel quale lutente potrà inserire frasi anche molto lunghe. |
Ma questi sono solo alcuni dei principali compi da inserire, tutti gli altri saranno inseriti in seguito nella sezione moduli avanzati.
Riprendiamo lesemio n°2 e inseriamo un modula che ci metta a conoscenza di ciò che i nostri utenti pensano della nostra pagina web.
<html>
<head>
<title>inserire qui il titolo del tuo sito</title>
<meta name=autor content=inserire qui il tuo nome>
<meta name=generator content=Blocco Note di Windows>
<meta name=description content=inserire qui una breve descrizione del tuo sito>
<meta name=robots content=noindex>
</head>
<body bgcolor=yellow text=blue>
<font size=8>
<p align=center>inserire qui il titolo del tuo sito</p>
</font>
<hr
size=4 color=blue>
<p><p/>
<p align=left>
inserire qui il testo da visualizzare
</p>
<p align=center><img src=esempio.gif></p>
<marquee behavior=alternate>inserire qui il testo che si vuole fare scorrere</marquee>
<a
href=mailto:inserisci il tuo indirizzo E-Mail>
<p align=center>Mandami un E-Mail</p>
</a>
<form action=inserisci il tuo indirizzo E-Mail
method=Post>
<p>Come ti chiami? <input type=Text name=nome></p>
<p>Qualè il tuo indirizzo di posta elettronica? <input type=Text name=mail></p>
<p>Come giudichi il mio sito?</p>
<p><input type=radio checked name=voto
value=brutto>Brutto</p>
<p><input type=radio name=voto value=sufficiente>Sufficiente</p>
<p><input type=radio name=voto value=Buono>Buono</p>
<p>Inviami alcuni commenti sul sito></p>
<p><textarea name=commenti></textarea></p>
<p><input type=submit value=Invia i tuoi dati></p>
</form>
</body>
</html>
Adesso potrai costruire una pagina web davvero completa!!! Lunico problema sarà che gli e-mail che riceverete dal vostro form conterranno dei caratteri come & e % che collegheranno i dati. Nella sezione moduli avanzati troverete il modo di far codificare i messaggi al server e di farveli inviare già tradotti.