Il futuro è già iniziato!!!

Gratisfree.it

filo.gif (859 bytes) filone.gif (841 bytes)
titolo.gif (7355 bytes)
Corso di HTML - A cura di Luca Miacola

WEBMASTER

TOP100

Servizi Aut.

Servizi Vari

NEWS

HOME

E-MAIL

Down Free

Risorse Web

Pubblicità

WEBFORM

Benvenuto/a su Gratisfree.it il portale del freeware!!!

Gratisfree Search
Gratisfree Search

lll

Pubblicizzati

lll
ledclic.gif (1653 bytes)

Servizi Aut.

frecciaBl.gif (111 bytes) Servizi Aut.

 

ledclic.gif (1653 bytes)

X Webmaster

frecciaAr.gif (111 bytes) WEBMASTER

 

ledclic.gif (1653 bytes)

Risorse Web

frecciaGi.gif (79 bytes) Risorse Web

 

lll

 

L'HTML

Costruire una pagina web

Per costruire una pagina web, molta gente utilizza una serie di programmi molto elaborati difficili da usare ma comunque automatici, l’utilizzo di questi programmi può essere molto sbrigativo ma da prodotti sempre uguali, infatti hanno dei modelli da seguire e limitano molto la vostra fantasia. Il modo più semplice, divertente e completo è quello di utilizzare il Blocco note di Windows, scrivendo in linguaggio html e salvando il file come nome_file.htm. Per farlo però bisogna utilizzare i tag, cioè delle “paroline magiche” che consentono a tutti i browser di riconoscere il vostro testo come un html.

Iniziamo col conoscere i tag principali:

<html>

Comunica al browser che il testo che segue è scritto in formato html

<head>

In questo tag fino a </head> sono inserite delle informazioni che non saranno visualizzate me che sono utili al browser per il buon funzionamento del sito.

Al posto dei puntini ci saranno le informazioni sopra citate

</head>

Indica che le informazioni sono finite

<body>

In questo tag fino a </body> sono inseriti il corpo di testo, le immagini, i moduli, ecc. che saranno visualizzati

Al posto dei puntini ci saranno i contenuti della pagina

</body>

Indica che non ci sono più informazioni da visualizzare

</html>

Comunica al browser che la pagina è terminata

Torna al sommario


Le informazioni da non visualizzare

Come abbiamo visto nella tabella precedente ci sono delle informazioni che non vengono visualizzate ma che sonomolto importanti come il creatore della pagina, gli argomenti trattati, il programma utilizzato. Ecco di seguito i tag che vi consentiranno di farlo:

<meta name= “keywords” content= “…”>

Al posto dei puntini vanno inserite le parole che il motore di ricerca utilizzerà per trovare il vostro sito.Esempio:

content= “grafia, fotoritocco, arte, disegno”

<meta name= “autor” content= “Antonio Rossi”>

Al posto di Antonio rossi va inserito il vostro nome, cioè il nome del creatore del sito.

<meta name= “description” content= “…”>

Al posto dei puntini va inserita una breve descrizione del vostro sito che sarà utilizzate dai motori di ricerca per pubblicizzarla.

<meta name= “generator” content= “…”>

Al posto dei puntini va inserito il programma con cui avete creato il vostro sito.

<meta name= “robots” content= “noindex”>

Impedisce ad alcuni motori di ricerca di occupare degli spazi della vostra pagina.

<title>…</title>

Al posto dei puntini va inserito il titolo della vostra pagina web.

Torna al sommario


Il corpo di una pagina web

Una volta terminate le informazioni da non visualizzare la nostra pagina si presenta completamente bianca. Per visualizzare testo immagini e altro dobbiamo inserire dei nuovi tag tra <body> e </body> che sono le direttive del corpo di testo.

Innanzi tutto bisogna decidere il coloro dello sfondo e del testo in quanto vanno assegnati subito dopo <body …> se ci va bene lo sfondo bianco e il testo nero basta omettere i tag che seguono. NB: i colori vanno espressi in inglese!

<body bgcolor= “colore”>

Attribuisce un colore allo sfondo

<body text= “colore”>

Attribuisce un colore al testo

<body background= “esempio.gif”>

Attribuisce un’immagine di sfondo alla pagina

<body background= “esempio.gif” bgproperties= “fixed”>

L’immagine di sfondo è fissa e non scorre con il testo

Se si vuole dare un colore di sfondo o un’immagine e il colore al testo bisogna combinare i tag precedenti in questo modo:

<body bgcolor= “colore” text= “colore”>

<body background= “esempio.gif” bgproperties= “fixed” text= “colore”>

NB: non inserire più volte <body> i tag delle proprietà grafiche vanno inserite una accanto all’altra all’interno dell’unico tag <body … … …>

Adesso ci troviamo di fronte ad una situazione simile:

<html>

 

<head>

 

       <title>nome del sito</title>

Da il titolo al vostro sito

<meta name= “autor” content= “Antonio Rossi”>

Indica il nome dell’autore del sito

</head>

 

<body bgcolor= “colore” text= “colore”>

Da colore allo sfondo e al testo

 

Al posto dei puntini adesso possiamo scrivere quello che vogliamo, sarà visualizzato sulla nostra pagina come normale testo.

</body>

Indica che non ci sono più informazioni da visualizzare.

</html>

 

Torna al sommario


 Formattazione del testo 

Formattare un testo vuol dire attribuire un carattere, una grandezza e un allineamento, può essere molto utile per distinguere il titolo di un paragrafo o le parole importanti.

Poiché il testo è da visualizzare i seguenti tag vanno inseriti tra <body> e </body>, dove nella tabella precedente, avevo posto i puntini. 

<p>…</p>

Il testo che porrete al posto dei puntini sarà scritto su un nuovo paragrafo.

<p align= “center”>…</p>

Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà centrato nella pagina.

<p align= “left”>…</p>

Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà allineato a sinistra nella pagina.

<p align= “right”>…</p>

Il testo che porrete al posto dei puntini sarà posto in un nuovo paragrafo e sarà allineato a destra nella pagina.

<ul>

 <li>…</li>

 <li>…</li>

 <li>…</li>

</ul>

Inserisce un elenco puntato all’interno della pagina. Ovviamente le parole e le frasi inserite al posto dei puntini saranno le voci dell’elenco.

<ol>

 <li>…</li>

 <li>…</li>

 <li>…</li>

</ol>

Inserisce un elenco numerato all’interno della pagina. Ovviamente le parole e le frasi inserite al posto dei puntini saranno le voci dell’elenco.

<b>…</b>

Il testo compreso tra questi due tag apparirà in grassetto.

<i>…</i>

Il testo compreso tra questi due tag apparirà in corsivo.

<u>…</u>

Il testo compreso tra questi due tag apparirà sottolineato.

Adesso vi mostrerò un tag che vi consentirà di stabilire il carattere e la grandezza del testo:

<font face= “nome carattere” size= “un numero da 1 a 8”>…</font>

Tutto il testo compreso tra <font> e </font> apparirà con il carattere e la grandezza da voi stabilita.

Torna al sommario


 Inserire un testo scorrevole

 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.

Torna al sommario


  Esempio n°1

 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.htm, 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>

Torna al sommario


Inserire elementi grafici

 Spesso è molto utile inserire delle immagini o degli elementi grafici che vadano a chiarire, ma spesso solo ad abbellire, i contenuti delle pagine web. Qui di seguito ci sono i tag che ci 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.

  Torna al sommario


Collegamenti ipertestuali

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:

http://lugia.supereva.it/

<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:

mailto:lugia@supereva.it

<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

Torna al sommario


 Esempio n°2 

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>

 

Torna al sommario


Esercitazione

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.htm 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.htm 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!!!

Torna al sommario


I colori del web

rosso

red

arancione

orange

giallo

yellow

verde

green

blu

blue

viola

violet

nero

black

bianco

white

rosa

pink

Torna al sommario


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.

Torna al sommario


Esempio n°3

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”.

Torna al sommario

Per informazioni rivolgersi a:  lugia@supereva.it

oppure visita il sito:  

******************

Copyright©  2000 GratisFree. E' vietata qualsiasi riproduzione di queste pagine. Tutti i contenuti e i marchi citati in queste pagine sono copyrights dei rispettivi proprietari.Tali materiali vengono utilizzati ai soli fini di informazione e documentazione. Cercheremo di inserire per quanto possibile informazioni aggiornate, ma non garantiamo circa la loro accuratezza o completezza. In nessun caso potremmo essere ritenuti responsabili circa eventuali danni causati dalle notizie in generale riportate nel sito. GratisFree non è collegato ai siti recensiti e non è responsabile in nessun caso del loro contenuto. Se pensate che sia stato violato qualche copyright avvertite mandando una e-mail, verranno immediatamente eliminate le parti indicate.

lll

Pubblicizzati

lll
ledclic.gif (1653 bytes)

Servizi Vari

frecciaVe.gif (111 bytes) Servizi Vari

 

ledclic.gif (1653 bytes)

Downloads Free

frecciaVi.gif (78 bytes) Down Free

 

Iscrizione Mailing List Gratisfree!


<abbonarsi disdire>

 

 

. Gratisfree Search
DISCLAIMER Gratisfree Search
.
Copyright 1998-2000 by Mario C. - Fiumicino ROMA. All Rights Reserved.