[ ::::::[ X IL SITO ]:::::: ]
Codici Html
Gif Animate
Guida Html
Guide
Programmi
Script Pronti
Sfondi
Smiles
...altri siti
[ ::::::[ DIVERTITI ]:::::: ]
Ascolta la Radio
Barzellette
Gioca Subito!
Indovinelli
Per la Vita
...altri siti
[ ::::[ DOWNLOAD ]:::: ]
Giochi
Guide
Programmi
Salvataggi Giochi
Sfondi ecc
Trucchi Giochi
Trucchi Pc
Video vari
...altri siti
[ ::::::[ SPECIALI ]:::::: ]
(In allestimento)
[ ::::::[ VARIE ]:::::: ]
Che significa questo?
i Domini Internet
...altri siti
[ ::::::[ ALTRO ]:::::: ]
Cosa ne pensi ?
Segnalami 1 Sito!
come pagina iniziale
nei Preferiti
[ ::::::[ CONTATTI ]:::::: ]
Scrivimi !!!
[ ::::[ Scambio link ]:::: ]
SPIRALIT Srl
Le Gran Casino
Bipbusiness
| Vai subito a... |
|
Introduzione _ Importante! _ Come si inizia? _ Metti il tuo sito on-line! _ Livello avanzato _ GUIDA HTML _ |
Hai bisogno di un Sito? Non hai tempo o non sei capace? Vuoi spendere pochissimo?
Tutto quello che ti serve, o quasi, lo posso fare io per te!
CREAZIONE DI SITI A COSTI MAI VISTI PRIMA! Scrivimi:Clicca qui!
| Introduzione |
|
Il sistema di scrittura HTML (Hiper Text Markup Language) è la base per poter fare una pagina html e arricchirla con immagini, suoni, colori, tabelle, collegamenti ipertestuali ... Per fare un sito internet (Web Site) e vederne il rusultato, NON serve essere connessi ad Internet. Basta avere un Browser qualunque (ad esempio: Internet Explorer o Mozilla Firefox). Una stessa pagina .html può essere visualizzata diversamente a seconda del Browser utilizzato. Le istruzioni vanno inserite nei TAGS (elemento compreso tra < e >) ES: <HTML> Una pagina HTML non è altro che un documento di testo (file con estensione .TXT) dove scrivere le istruzioni necessarie per rendere visibili le immagini, testi, collegamenti ecc, e come devono essere visualizzati (posizione, dimensione, colori, ecc.). Con il solo linguaggio HTML è possibile creare collegamenti ad altre pagine o ad un punto preciso della pagina stessa, visualizzare immagini, impostare il titolo della pagina da visualizzare nella finestra di windows... Però non si possono creare funzioni speciali come conseguenza di determinate azioni svolte all'interno della pagina: per fare ciò si usano altri sistemi di scrittura (JAVASCRIPT, ecc...) |
| Importante! |
|
Per sviluppare un ottimo Sito bisogna seguire alcuni punti fondamentali:
|
| Come si inizia? |
|
| Metti il tuo sito on-line! |
|
Prima di tutto bisogna controllare il corretto funzionamento di OGNI collegamento di OGNI pagina del Sito e correggere gli eventuali errori di ortografia. Per mettere un Sito on-line bisogna avere un Dominio e uno Spazio Web. - Cosa sono? Dominio: Spazio Web: spazio presente sul server on-line dove salvare tutti i file del tuo sito. - Dove li trovo? Quanto mi costa? Alcuni siti web offrono un Dominio e uno Spazio Web gratuitamente. Bisogna solo registrarsi sul sito stesso. (digilander.libero.it ad esempio, offre uno spazio web e dominio GRATUITO, dopo essersi registrati sul sito. Il nome del tuo sito sarà: digilander.libero.it/nomeDelTuoSito) Per copiare i file del tuo sito dal tuo computer al server si può usare il programma presente sul sito stesso che ti offre lo spazio web, oppure un programma apposito (es. Dreamweaver, che è ottimo). |
| Livello avanzato |
|
Se conosci molto bene il linguaggio HTML ora puoi provare ad arricchire le tue pagine utilizzando altri linguaggi di programmazione (JavaScript, CSS, Asp, Php...). In questo sito nella sezione --> Script Pronti <-- puoi trovare degli esempi da vedere e/o scaricare. |
| Guida HTML (creata da BESTDRAGON) | ||||||||||||||||
|
<!DOCTYPE> Va messo prima di <HTML> , e ci vanno inserite informazioni che riguardano il documento: - se e' pubblico - da chi e' gestito - la versione di HTML - la lingua in cui e' scritto Esempio: <!DOCTYPE HTML PUBLIC="-//W3C// DTD HTML 4.0//EN"> ---------------------------------------------------------------------------------------------------- PUBLIC Va messo dentro <!DOCTYPE> , e indica che il documento e' pubblico. ---------------------------------------------------------------------------------------------------- DTD Va messo dentro <!DOCTYPE> , e indica la versione di HTML. ---------------------------------------------------------------------------------------------------- <HTML> Indica l'apertura di tutto il documento che va chiuso con </HTML> . Dentro ci va prima <HEAD> e poi <BODY> . ---------------------------------------------------------------------------------------------------- <HEAD> Serve per l'intestazione del documento e va chiuso con </HEAD> . Va inserito tra <HTML> e </HTML> . ---------------------------------------------------------------------------------------------------- TITLE Se usato come tag, quindi messo tra < e > , va tra <HEAD> e </HEAD> , e indica il titolo del documento. Puo' essere messo nel tag <A> , e serve per mettere il titolo al collegamento, come ALT per le immagini. ---------------------------------------------------------------------------------------------------- <META> Va messo tra <HEAD> e </HEAD> . Serve per dare varie informazioni. Ognuna va indicata con NAME per il tipo di informazione e CONTENT per l'informazione. Per alcuni tipi d'informazione invece di NAME va scritto HTTP-EQUIV . I tipi d'informazione sono: - AUTHOR - DESCRIPTION - GENERATOR - KEYWORD - ROBOTS - REFRESH Esempio: <META NAME="AUTHOR" CONTENT=" "> Dentro le virgolette di CONTENT va inserito il nome e il cognome. ---------------------------------------------------------------------------------------------------- NAME Se messo dentro <META> indica il tipo d'informazione da mettere dopo CONTENT . Dentro <A> indica il nome di quel punto del documento, ES: <A NAME="nome di questo punto del documento">. Dentro <INPUT> serve per dare un nome a quell'input che sta in quel punto del form. ---------------------------------------------------------------------------------------------------- CONTENT Va messo dentro <META> e indica l'informazione da dare. ---------------------------------------------------------------------------------------------------- HTTP-EQUIV Per alcune informazioni da mettere dentro <META> , va messo al posto di NAME. ---------------------------------------------------------------------------------------------------- AUTHOR Va messo dentro <META> , e indica chi ha scritto il documento. ---------------------------------------------------------------------------------------------------- DESCRIPTION Va messo dentro <META> , e serve per la descrizione del documento. -------------------------------------------------------------------------------- GENERATOR Va messo dentro <META> , e indica con che programma e' stato scritto il documento. ---------------------------------------------------------------------------------------------------- KEYWORD Va messo dentro <META> , e ci vanno parole o frasi lette dai motori di ricerca. ---------------------------------------------------------------------------------------------------- ROBOTS NOINDEX Scrivendo: <META NAME="ROBOTS" CONTENT="NOINDEX"> si indica ai motori di ricerca che il documento non si vuole fare conoscere. ---------------------------------------------------------------------------------------------------- REFRESH Va messo dentro <META> , e indica il nome del file che contiene il documento da scaricare automaticamente dopo un certo numero di secondi. Esempio: <META HTTP-EQUIV="REFRESH" CONTENT=" ; URL= "> Prima del punto e virgola va messo il numero di secondi, e dopo URL= il nome del file. ---------------------------------------------------------------------------------------------------- URL Va messo in REFRESH , e indica il nome del file che contiene il documento da scaricare. ---------------------------------------------------------------------------------------------------- <BODY> Ci va il corpo del documento e va chiuso con </BODY> . Va inserito tra <HTML> e </HTML> . ---------------------------------------------------------------------------------------------------- BGCOLOR Va inserito nel TAG <BODY> e serve per mettere il colore di sfondo del documento. Se inserito in altri tag, mette il colore di sfondo solo nella parte del documento formattata con quel tag. ---------------------------------------------------------------------------------------------------- BACKGROUND E' come <BGCOLOR> , ma come sfondo invece del colore, mette l'immagine presa dal file specificato. Se lo sfondo è una gif, quando clicchiamo su un collegamento essa si ferma. Inserendo <BackGround loop="infinite"> la gif non si ferma. ---------------------------------------------------------------------------------------------------- TEXT Se inserito nel tag <BODY> indica il colore del testo del documento. Nel tag <INPUT> si usa con TYPE, e indica che l'input e' una casella di testo. ---------------------------------------------------------------------------------------------------- LINK Va inserito nel TAG <BODY> e indica il colore dei collegamenti. -------------------------------------------------------------------------------- ALINK Va inserito nel TAG <BODY> e indica il colore dei collegamenti quando vengono attivati. ---------------------------------------------------------------------------------------------------- VLINK Va inserito nel TAG <BODY> e indica il colore dei collegamenti dopo che sono stati visitati. ---------------------------------------------------------------------------------------------------- BGPROPERTIES FIXED Se il documento ha un'immagine di sfondo inserita con BACKGROUND , scrivendo dentro il TAG <BODY> BGPROPERTIES="FIXED" , quest'immagine non viene spostata con le barre di scorrimento. ---------------------------------------------------------------------------------------------------- <B> <I> <U> <S> <STRIKE> Vanno messi tra <BODY> e </BODY> , e formattano il testo che segue, finche' non viene chiuso il TAG. Questo prospetto indica come viene formattato il testo per ognuno di questi TAG. B = testo in grossetto I = testo in corsivo U = testo sottolineato S/STRIKE = testo sbarrato ---------------------------------------------------------------------------------------------------- <H > Va messo tra <BODY> e </BODY> . Serve per mettere i titoli. Dopo H ci si scrive un numero da 1 a 6 che indica la grandezza del titolo: piu' il numero e' piccolo e piu' viene scritto grande il titolo. ESEMPIO: L'EFFETTO DI <H1>TITOLO</H1> E' QUESTO: TITOLO---------------------------------------------------------------------------------------------------- <BR> Va messo tra <BODY> e </BODY> , e manda a capo il testo. ---------------------------------------------------------------------------------------------------- <P> Va messo tra <BODY> e </BODY> . Indica l'inizio di un paragrafo che finisce quando si chiude il tag con </P> . Tra un paragrafo e un altro ci viene una linea vuota e ognuno viene all'inizio della linea. Si puo' avere lo stesso effetto mettendo il tag <P> senza chiuderlo. Ci si puo' mettere dentro ALIGN. ---------------------------------------------------------------------------------------------------- <DIV ALIGN LEFT RIGHT CENTER> Servono per allineare il testo: <DIV ALIGN=LEFT> a sinistra <DIV ALIGN=RIGHT> a destra <DIV ALIGN=CENTER> al centro CENTER puo' essere usato anche come tag, quindi messo tra < e > , e ha lo stesso effetto di <DIV ALIGN=CENTER> . ALIGN si puo' mettere anche dentro altri tag. Per le immagini si usa ALIGN invece di VALIGN ---------------------------------------------------------------------------------------------------- <FONT FACE SIZE COLOR> Va messo tra <BODY> e </BODY> , e si chiude con </FONT> . Serve per indicare come devono essere scritti i caratteri: FACE Per il tipo di carattere. SIZE Per la grandezza. COLOR Per il colore. ESEMPIO: <FONT FACE="MS SANS SERIF" SIZE=6 COLOR=GREEN> PRODUCE QUESTO EFFETTO: TESTO FORMATTATO CON FONT ---------------------------------------------------------------------------------------------------- <UL> <OL> <LI> Servono per gli elenchi, che possono essere puntati o numerati. Con <UL> vengono puntati e con <OL> numerati: Questo prospetto mostra come vengono gli elenchi. ELENCO PUNTATO
Ogni elemento dell'elenco va indicato con <LI> . Per ottenere l'elenco puntato della tabella si deve scrivere questo codice: <UL> <LI>Primo elemento <LI>Secondo elemento <LI>Terzo elemento </UL> Per ottenere quello numerato, l'unica differenza e' che si mette <OL> al posto di <UL> . Dentro <OL> e <UL> puo' essere inserito TYPE. ---------------------------------------------------------------------------------------------------- TYPE TEXT BUTTON SUBMIT SELECT square circle disc Se TYPE e' messo nel tag <INPUT> , indica il tipo di input. Questo prospetto indica alcuni tipi di input: TEXT Casella di testo con una sola linea. BUTTON Pulsante. SUBMIT Pulsante che invia i dati del FORM . SELECT Casella con un menu. Se sta negli elenchi: -Dentro quelli numerati indica il tipo di numerazione: <OL TYPE=I> Numeri romani <OL TYPE=A> Lettere Se A e I si scrivono in minuscolo, viene in minuscolo anche la numerazione. -Dentro quelli puntati indica il simbolo che c'e' prima di ogni elemento: <UL TYPE=square> quadrato pieno <UL TYPE=circle> cerchio vuoto <UL TYPE=disc> cerchio pieno Square, circle e disc devono essere scritti in minuscolo. ---------------------------------------------------------------------------------------------------- <TABLE> <TR> <TD> Servono per le tabelle, che iniziano con <TABLE> e finiscono con </TABLE> . Le tabelle sono divise in linee e colonne. Ogni linea va messa tra <TR> e </TR> , e ogni colonna tra <TD> e </TD> . Esempio: <TABLE WIDTH=45% BORDER=1> <TR> <TD WIDTH=15%> FACE </TD> <TD WIDTH=30%> Per il tipo di carattere. </TD> </TR> <TR> <TD> SIZE </TD> <TD> Per la grandezza. </TD> </TR> <TR> <TD> COLOR </TD> <TD> Per il colore. </TD> </TR> </TABLE> Questo codice produce questa tabella:
dentro <TD> viene allineato il testo nella parte della tabella corrispondente. Se si mette ALIGN insieme a VALIGN, il testo viene allineato sia in altezza che in larghezza. Si puo' mettere dentro <TABLE> e <TD> anche HEIGHT, CELLPADDING, CELLSPACING, BGCOLOR e BACKGROUND. Tra <TABLE> e </TABLE> puo' essere inserito <CAPTION> . Per impedire che il testo venga visualizzato su più righe, usa NOWRAP. ---------------------------------------------------------------------------------------------------- VALIGN TOP MIDDLE BOTTOM Servono per allineare in altezza il testo dentro le tabelle: VALIGN=TOP in alto VALIGN=MIDDLE in mezzo VALIGN=BOTTOM in basso ---------------------------------------------------------------------------------------------------- BORDER Va messo dentro <TABLE> , o <IMG> , e serve per mettere il bordo alla tabella o all'immagine. La grandezza del bordo va indicata con un numero. Le tabelle senza bordi possono servire per mettere scritte in posizioni particolari. Per esempio l'indice di questo dizionario e' una tabella senza bordi. ---------------------------------------------------------------------------------------------------- WIDTH HEIGHT Possono essere messi dentro a vari tag e indicano le dimensioni della parte del documento corrispondente: WIDTH la larghezza e HEIGHT l'altezza. Le dimensioni possono essere espresse in pixel (punti nello schermo) o in percentuale della pagina. Alcuni tag in cui si possono inserire le dimensioni sono: <TABLE> <TR> <TD> <IMG> Esempio: <TABLE WIDTH=50> indica che la tabella e' larga 50 pixel. Se invece si scrive WIDTH=50% la tabella viene larga il 50%, quindi larga metà pagina. ---------------------------------------------------------------------------------------------------- CELLPADDING CELLSPACING Vanno messi dentro <TABLE>, e aggiungono spazio a quello occupato dal testo dentro la tabella. La quantita' di spazio in piu' si indica con un numero. CELLPADDING mette lo spazio dentro la tabella, e CELLSPACING vicino al bordo. Da queste due tabelle si vede la differenza tra CELLPADDING e CELLSPACING. Lo spazio di CELLPADDING viene cosi':
quello di CELLSPACING viene cosi':
<CAPTION> Serve per mettere il titolo alle tabelle. Si mette dopo <TABLE> , e prima del primo tag <TD>. Il titolo nella la tabella viene cosi':
<IMG> Mette un'immagine presa da un file indicato con SRC. I file delle immagini possono avere estensione GIF, JPEG, BMP, PNG... Le immagini possono essere ridimensionate con WIDTH e HEIGHT. Si allineano con ALIGN: usando LEFT si posizionano a sinistra, con RIGHT a destra. Con TOP, BOTTOM e MIDDLE, viene allineata la prima linea di testo che c'e' dopo l'immagine. Dentro <IMG> ci si puo' mettere anche BORDER, ALT, HSPACE e VSPACE. ---------------------------------------------------------------------------------------------------- HSPACE VSPACE Si mettono nel tag <IMG> , e servono per indicare con un numero la distanza, HSPACE in larghezza e VSPACE in altezza, tra l'immagine e gli oggetti che stanno prima e dopo. ---------------------------------------------------------------------------------------------------- ALT Mette nelle immagini un messaggio, che appare quando ci si lascia sopra il cursore del mouse. Questo messaggio si scrive tra virgolette. ---------------------------------------------------------------------------------------------------- SRC Si puo' mettere in vari tag, e indica il percorso dove si trova il file. Il nome del file va scritto tra virgolette, e si indica anche la directory, se e' diversa da quella in cui si trova la pagina dove visualizzarla. Si puo' scrivere prima del nome del file o della directory, un indirizzo Web usando http:// . ---------------------------------------------------------------------------------------------------- <A> Serve per fare i collegamenti. Al suo interno si puo' inserire NAME , HREF o TARGET. Si chiude con </A>. ---------------------------------------------------------------------------------------------------- HREF Indica il nome del file corrispondente alla pagina da visualizzare con il collegamento, come per SRC il nome del file va scritto tra virgolette e la directory va messa solo se diversa. Si puo' usare http:// per fare il collegamento a un sito, e si agginge il nome del file se non e' la pagina principale. Si possono fare collegamenti a indirizzi email usando mailto: . Per i collegamenti interni al documento al posto del nome del file si scrive #, e il nome del punto del documento chiamato con NAME . Se viene fatto un collegamento in un punto particolare di un'altro file, si mette prima il nome del file, poi # e il nome del punto del documento. Esempio: <A HREF="guida html.html#name"> Questo collegamento manda al punto di questa guida in cui viene spiegato NAME, nel caso in cui e' chiamato da un'altro file. Se e' chiamato da un'altro punto della guida basta scrive dentro le virgolette #name. ---------------------------------------------------------------------------------------------------- http:// Si usa con HREF o SRC, e serve per indicare indirizzi Web, scrivendo http:// e l'indirizzo. ---------------------------------------------------------------------------------------------------- mailto: Si usa con HREF, e serve per fare collegamenti a indirizzi email, scrivendo mailto: e l'indirizzo. I collegamenti a un indirizzo email, quando vengono attivati, chiamano direttamente il programma per scrivere il messaggio a quell'indirizzo. ---------------------------------------------------------------------------------------------------- <FRAME> Se dividi la pagina in frame, i tag <FRAMESET></FRAMESET> vanno inseriti al posto di <BODY></BODY>. Una pagina puo' essere divisa in parti + piccole chiamate frame, in cui in ognuna c'e' visualizzato il contenuto di un documento HTML. Per fare una pagina divisa in frame, ci vuole un file per indicare le posizioni dei frame, e uno per ogni frame. Nel file in cui sono indicati i frame, si usano i tag <FRAME> e <FRAMESET>. Il tag <FRAME> serve per indicare con SRC il nome del file corrispondente al frame, e con NAME il nome del frame, che serve per fare i collegamenti usando TARGET . Esempio: <FRAME NAME="guida" SRC="guida html.html"> ---------------------------------------------------------------------------------------------------- <FRAMESET> Se dividi la pagina in frame, i tag <FRAMESET></FRAMESET> vanno inseriti al posto di <BODY></BODY>. Serve per indicare le posizioni dei frame. I frame si possono dividere in linee o in colonne. Se si dividono in linee, dentro a <FRAMESET> si scrive ROWS= e tra virgolette tutte le dimensioni delle linee, espresse in percentuale della pagina o in pixel (punto nello schermo), separate da virgole. Se si dividono in colonne e' uguale, ma invece di ROWS si scrive COLS. Le linee vanno dall'alto in basso e le colonne da sinistra a destra. In ogni caso come dimensione dell'ultimo frame si puo' mettere * e significa che occupa lo spazio che rimane. Tra <FRAMESET> e </FRAMESET> si indica con <FRAME> i nomi dei frame e dei file corrispondenti. Se invece di <FRAME> si mette <FRAMESET>, si indica che in quello spazio c'e' un'altra divisione di frame, con dimensioni che se sono espresse in percentuale, questa e' relativa a quello spazio. Esempio: <FRAMESET ROWS="50%,*"> <FRAME NAME="primo" SRC="sinistro.htm"> <FRAMESET COLS="50%,*"> <FRAME NAME="secondo" SRC="destro-alto.htm"> <FRAME NAME="terzo" SRC="destro-basso.htm"> </FRAMESET> </FRAMESET> In questo esempio, il primo FRAMESET divide la pagina in due parti orizzontali uguali: nella prima c'e' il primo frame, nella seconda una divisione in colonne indicata con un altro FRAMESET, dove si trovano il secondo e terzo frame. ---------------------------------------------------------------------------------------------------- TARGET Si mette dentro <A> e serve per indicare dove aprire il collegamento: in una pagina nuova o in un framen specifico nella stessa pagina. Se dopo TARGET= si scrive "_BLANK" , il collegamento viene aperto in una nuova finestra. Se lo si vuole aprire in un frame della pagina, basta scrivere TARGET="nome del frame" . ---------------------------------------------------------------------------------------------------- <FORM> Si mette all'inizio di un form, e si chiude con </FORM> . I form sono quelle parti del documento in cui l'utente puo' inserire dati o spingere pulsanti. Nei form ci possono essere vari tipi di input, che si mettono con il tag <INPUT> . Se inserisci DISABLED nel tag <FORM> lo rendi inattivo. ---------------------------------------------------------------------------------------------------- <INPUT> Si mette tra <FORM> e </FORM> , e indica che in quel punto del form c'e' un input. I vari tipi di input si indicano con TYPE. Nel tag <INPUT> si puo' inserire anche NAME e VALUE. ---------------------------------------------------------------------------------------------------- VALUE Si mette nel tag <INPUT> , e indica quello che c'e' scritto nell'input. ---------------------------------------------------------------------------------------------------- <TEXTAREA> Si mette tra <FORM> e </FORM>, e mette una casella di testo che puo' avere tante linee. Si chiude con </TEXTAREA>, e dentro si scrive il testo che viene visualizzato dentro la casella. Si può usare anche non dentro altri TAG, in questo modo tutto ciò che è scritto tra i due tag viene visualizzato così com'è scritto, senza gli effetti dei TAG. ---------------------------------------------------------------------------------------------------- <HR> Crea una linea separatoria, modificabile con WIDTH in larghezza e HEIGHT in altezza. ---------------------------------------------------------------------------------------------------- <TT> Formatta il testo che segue in modo particolare. Si chiude con </TT>. ES: <TT>TESTO FORMATTATO</TT> ---------------------------------------------------------------------------------------------------- |
| Vai subito a... |
|
Introduzione _ Importante! _ Come si inizia? _ Prova subito! _ Metti il tuo sito on-line! _ Livello avanzato _ GUIDA HTML _ |