Friskon.comCorso di HTML 4 - A cura di Luca Miacola
Un testo scorrevole in un sito è un elemento d’effetto 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 all’interno 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 l’immagine 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 all’altra, 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 all’utente di spostarsi da una pagina all’altra, l’URL di una pagina è il suo indirizzo. Esempio: |
<a href= “mailto:indirizzo”> <p>testo del collegamento</p> </a> |
Questa tag consente all’utente 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 all’utente 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 un’immagine che vogliamo inserire nel nostro documento.
Adesso riprendiamo l’esempio 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 l’altra 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 all’indirizzo 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 all’interno, ad esempio se si richiede l’indirizzo 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 l’utente 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 l’esemio 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!!! L’unico 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”.
