HTML
Manuale di programmazione
Premessa
Se avete deciso di leggere e magari fare il download di questo manuale, allora vuol dire che vi siete decisi quanto meno ad avvicinarvi ad HTML, il linguaggio di programmazione base di tutta internet.
Senza dilungarmi nella premessa, passiamo subito a studiare HTML.
Quello che serve è un semplice editor.
Se decidete di utilizzare un editor di testo, sceglietene uno adatto per scrivere del codice html, infatti se utilizzerete noti software di editing, vi troverete del codice danneggiato da tutti quei caratteri invisibili all'utente che va ad insinuarsi tra il codice stesso rendendolo inutilizzabile. Ricordate inoltre di non formattare il testo, altrimenti danneggerete allo stesso modo il codice html.
Di editor adatti ne troverete tanti in giro per la rete e tutti o quasi gratuiti, anche in questo sito ne troverete qualcuno, decidete voi quale procurarvi. Cercate di imparare a programmare in html con un editor testuale, non arrendetevi e studiate, i risultati non tarderanno ad arrivare. La regola è STUDIARE.
Quindi riepilogando: html vi serve per realizzare le vostre pagine web che costituiranno il vostro website, per imparare a programmare in html dovete studiare, vi serve un editor, meglio se specifico per scrivere codice html e continuare a studiare per utilizzarlo.
Se invece optate per un programma visuale che realizzi per voi una pagina, vuol dire che non dovrete studiare questo manuale, vi serve qualcosa di semplice e funzionale, per iniziare, in giro per la rete e ovviamente anche su
Attenzione: Per fare in modo di rendervi padroni del linguaggio, ho appositamente evitato di mostrarvi il risultato del codice in questo manuale riportato. Io vi assicuro che il codice di esempio è esatto, vi fornisco un editor html su
Primi passi
Gli elementi fondamentali di una pagina web.
Provando a visualizzare il codice di una semplice pagina web, noteremo subito che esso inizia con <HTML> (non importa se scritto a caratteri maiuscoli o minuscoli). <html> è un comando o tag e deve sempre essere rinchiuso tra due parentesi angolari < > (in linguaggio di programmazione: operatore logico minore e operatore logico maggiore), facendo attenzione a non inserire spazi all'interno (sarebbe utile in seguito consultare la guida agli operatori logici su
Di seguito potete vedere la struttura base di una pagina web intesa nei tag essenziali:
<HTML>
<HEAD>
Tutto il codice che deve essere eseguito subito.
</HEAD>
<BODY>
Tutto il contenuto della pagina.
</BODY>
</HTML>
Concetto di struttura
Per struttura si intende una organizzazione logica e sequenziale di dati o azioni. Chi è in possesso di minime nozioni di programmazione potrebbe paragonarla ad un diagramma di flusso (rappresentazione logica mentale di comandi e istruzioni atti a svolgere con ordine un determinato programma).
La struttura sta alla base della comprensione del cervello umano. Un concetto privo di una struttura, per quanto semplice possa essere, molto difficilmente sarà comprensibile all'uomo. Tutto quello che ci sta intorno possiede una struttura, persino questo manuale. Se ad esempio io iniziassi a spiegare cosa sono gli script, probabilmente non capireste cosa state leggendo.
Il mio primo editor HTML
Forse vi sembrerà strano, ma è giunto il momento di iniziare a programmare in Html.
Se avete appreso quanto scritto fino ad ora, intuite che quello che vi serve è un editor. Andate nella sezione download di
<HTML>
Tutto il codice che deve essere eseguito subito.
<HEAD>
</HEAD>
<BODY>
<p> In questo modo inizio a scrivere sulla mia nuova pagina web.</p>
</BODY>
</HTML>
Il codice appena letto contiene un tag nuovo: <p> e </p> ovvero l'elemento paragrafo. Provate ora a salvare il codice da voi scritto assegnando un nome alla vostra pagina (ovvero al vostro codice) e quindi apritela per vedere il risultato.
Attenzione: se state utilizzando un semplice editor di testo e non un editor HTML, il file contenente il codice dovrà avere assolutamente estensione .htm o .html e NON .txt o .doc. Di seguito una procedura sicura per salvaguardare il codice:
1. Dopo avere scritto il codice, salvatelo con estensione di testo tipo "home.html". Windows nasconde le estensioni, ma interpreta il file ugualmente, nel nostro caso come un file di ipertesto.
2. Ovviamente il nostro file non deve essere di testo, ma deve essere un file di ipertesto, ovvero deve avere estensione .htm o .html, pena una pagina di testo lontana dalla natura di una pagina web e non idonea al nostro progetto.
Se salviamo il file come file di testo (.doc, .txt…) lo dobbiamo rinominare (con il tasto destro del mouse ), per ottenere qualcosa come "home.htm", ma le cose non saranno cambiate, verrebbe interpretato sempre come un file di testo, in realtà, se togliessimo dal Sistema Operativo l'opzione "Nascondi l'estensione dei file riconosciuti dal sistema", potremmo leggere "home.htm.txt".
3. L'opzione "Nascondi l'estensione dei file riconosciuti dal sistema" è scomoda per un programmatore, quindi se credete di voler diventare tali, toglietela per vedere l’effettiva estensione del file (potrete sempre ripristinarla) nel seguente modo:
In Risorse del computer o Esplora risorse selezionare la cartella che si desidera visualizzare.
-Scegliere Opzioni cartella dal menu Visualizza.
Scegliere la scheda Visualizzazione, quindi fare clic sul pulsante di opzione Mostra tutti i file.
-Se si desidera visualizzare tutte le estensioni dei nomi di file, deselezionare la casella di controllo Nascondi le estensioni dei file per i tipi di file conosciuti.
Il testo
Il primo passo importante da compiere per imparare a realizzare una pagina web è quello di sapere immettere del testo in essa. Abbiamo visto come tramite il tag <p> </p> siamo riusciti a scrivere qualcosa, in maniera analoga adesso procederemo a realizzare qualcosa di più complesso.
Il testo e il comando Align
Si utilizza con gli attributi left, center, right, justify, per allineare il testo rispettivamente a sinistra, centro, destra, giustificato.
Per utilizzare align e tutti i suoi attributi si deve ricorrere all'esatta sintassi che segue:
<p align="left">Questo testo sarà allineato a sinistra</p>
<p align="center">Questo testo sarà allineato in maniera centrale</p>
<p align="right">Questo testo sarà allineato a destra</p>
<p align="justify">Questo testo sarà allineato in maniera giustificata</p>
Per vederne gli effetti ricopiate il codice sopra descritto su di un editor html, salvate la pagina ed eseguitelo.
Sappiate che per tornare a capo durante la digitazione del testo non basta la semplice pressione del tasto Invio, ma dovrete digitare <br> (vedere anche in seguito), oppure aprire e chiudere il tag <p> (in questa maniera: <p> </p>). Il tag <br> non possiede relativo tag di chiusura.
Nota: Formattare il testo allineandolo a sinistra, al centro, a destra o in maniera giustificata potrebbe non essere sufficiente. Immaginate di dover incolonnare un testo in modo chiaro, justify sarebbe una buona soluzione, ma sarebbe ancora meglio qualcosa che si comportasse come justify, ma con la peculiarità extra di distanziare i termini con una spaziatura fissa. Il tag è <KBD></KBD> ed il testo da incolonnare deve essere racchiuso tra di essi. In alternativa potrete utilizzare i tags <TT></TT> oppure <SAMP></SAMP>.
Grassetto, Corsivo e sottolineato
Potrebbe capitare di dover formattare il testo anche nella sua estetica. Ad esempio, rendere in stile grassetto un termine servirebbe a metterlo in evidenza, così come il corsivo lo stilizzerebbe oppure il sottolineato ne suggerirebbe l'importanza. Vediamo ora come fare per ottenere gli effetti appena descritti:
<B> </B> (Bold)
Tutto quello che verrà scritto tra <b> e </b> risulterà scritto in grassetto.
Potrete utilizzare anche <strong> e </strong>
<U> </U> (Underlined)
Per ottenere l'effetto sottolineato scrivete il vostro testo tra questi tags.
<u> Il vostro testo </u>
<I> </I> (Italic)
Si utilizzano per rendere il testo in stile corsivo.
<i> Il vostro testo </i>
In alternativa utilizzate i tags <VAR></VAR>, in alternativa potrete utilizzare in maniera analoga i due tags <EM></EM>
Sotto un esempio di quanto descritto, potete fare il copia-incolla da questa pagina al vostro editor html per vederne gli effetti:
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Questo stile è grassetto </B>
<U>Questo stile è sottolineato </U>
<I> Questo stile è corsivo </I>
</BODY>
</HTML>
Se avete provato il codice sopra descritto, vi sarete accorti che tutto quanto viene scritto su unica riga. Per evitare ciò dovete utilizzare il tag <br>, in questa maniera otterrete l'interruzione della riga corrente ed un ritorno a capo.
Nota: ripeto che il tag <br> non possiede un tag di chiusura.
Copiate e incollate ora sul vostro editor html il codice che segue e vedete gli effetti del tag <br>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Questo stile è grassetto, la prossima riga è a capo </B><br>
<U>Questo stile è sottolineato, la prossima riga è a capo </U><br>
<I> Questo stile è corsivo, la prossima riga sarà a capo </I><br>
</BODY>
</HTML>
Per cambiare invece il tipo di carattere, la sua dimensione ed il suo colore, dovrete utilizzare i tag <FONT> </FONT> con gli attributi SIZE, FACE, COLOR.
SIZE
Specifica la grandezza del carattere. Il valore massimo è 7.
FACE
Specifica il tipo di carattere.
COLOR
Specifica il colore del testo.
Sotto un esempio per illustrare chiaramente quanto descritto. Il mio consiglio è sempre quello di copiare ed incollare il codice seguente su di un editor html.
<HTML>
<HEAD>
</HEAD>
<BODY>
<font size="5" face="Arial" color="black">
<p> Questo è il risultato: grandezza del carattere: 5, tipo del carattere: Arial, colore: nero.</p>
</BODY>
</HTML>
Un altro elemento che potrebbe risultare utile è la linea orizzontale, per separare le sezioni di una pagina.
Il tag che la riproduce è <HR>, non possiede chiusura e attributi. Per modificarne la lunghezza si utilizza Width.
Sotto un esempio:
<HR WIDTH="75">
La linea in tal maniera viene visualizzata con effetto 3D, per renderla bidimensionale con NOSHADE, scrivere il codice come segue:
<HR WIDTH="75" NOSHADE>
E' inoltre possibile settarne l'altezza e lo spessore utilizzando SIZE:
<HR WIDTH="75" SIZE="6" NOSHADE>
Le immagini
Le immagini, problematiche e metodo
Inserire delle immagini su di una pagina contribuirà a renderla più gradevole a vedersi, oltre che professionale. Tuttavia prima di vedere come si inseriscono le immagini con il codice html, è doveroso analizzare delle problematiche che sovente si verificano dopo la realizzazione e la pubblicazione online del sito. Tutti noi avremo notato pagine particolarmente lente nel caricarsi, ritrovandoci ad aspettare anche parecchi minuti (se siamo stati disposti ad aspettare...) prima di poterle consultare. Le cause di tale lentezza potrebbero essere tante, tra le quali la immagini definite "pesanti". Per immagine "pesante" si intende una immagine dalle dimensioni espresse in kilobyte o peggio in megabyte, troppo grosse per potere essere caricate nei tempi dovuti. Un esempio classico è quello di impostare come sfondo della nostra home page una immagine delle dimensioni ad esempio di 500 kb, il risultato sarebbe un'attesa di caricamento che spesso si conclude con l'abbandono del sito alla ricerca di qualcosa di più fruibile da parte del visitatore.
la soluzione a questo inconveniente è banale: basta utilizzare i formati grafici adatti ed eventualmente del software reperibile anche su questo sito che si occupi di ottimizzarle riducendone le dimensioni.
I formati utilizzati a tale scopo sono principalmente due:
- Gif (Graphic Interchange Format): ottimo per rappresentare colori uniformi come quelli dei loghi. Possiede una palette dei colori limitata, in compenso non rappresenta un sovraccarico ai fini del caricamento delle immagini.
- Jpeg (Joint Photographic Experts Group): consigliato per le fotografie, le quali contengono milioni di colori, perchè possiede una palette di colori maggiore rispetto al formato gif.
Esiste da poco inoltre un nuovo formato che promette una migliore qualità delle immagini: il Png e che vorrebbe sostituire il formato Gif. Il suo utilizzo è però ristretto solo ai browser più recenti.
Chiarito questo concetto passiamo ora a vedere come inserire una immagine nella nostra pagina.
Supponiamo di possedere una immagine denominata foto.jpeg e di volerla rendere visibile sulla nostra pagina, sarà indispensabile allora l'utilizzo del comando IMG e del suo attributo SRC.
IMG e SRC
Prendiamo come struttura di esempio quella già utilizzata allo scopo di inserire del testo:
<HTML>
<HEAD>
</HEAD>
<BODY>
<p> In questo modo inizio a scrivere sulla mia nuova pagina web.</p>
<p align="left">Questo testo sarà allineato a sinistra</p>
<p align="center">Questo testo sarà allineato in maniera centrale</p>
<p align="right">Questo testo sarà allineato a destra</p>
<p align="justify">Questo testo sarà allineato in maniera giustificata</p>
</BODY>
</HTML>
Il nostro compito sarà ora quello di scrivere l'esatta sintassi per richiamare l'immagine, vediamo come:
<img src="foto.jpeg">
Come per tutto quello che deve essere trovato tramite codice, anche in questo caso si deve specificare la posizione di "foto.jpeg", altrimenti non otterremmo il risultato desiderato. Se la foto si trovasse nella stessa directory del file che la richiama (la nostra pagina), andrebbe bene il codice sopra descritto, nel caso la foto non dovesse trovarsi nella stessa directory del file che la richiama, allora dovremo specificare tutto il percorso (path). Sotto alcuni esempi:
<img src="../nomecartella/foto.jpeg">
E' opportuno inoltre specificare le dimensioni dell'immagine al fine di velocizzare il caricamento della pagina nel modo seguente:
<img src="foto.jpeg" width="100" height="50">
Width rappresenta la larghezza della foto, il valore 100 rappresenta invece i pixel della foto. Analogamente height rappresenta l'altezza della foto ed il valore 50 i pixel.
Gli attributi di img non sono però solo quelli appena descritti, ne esistono altri che mi appresto a descrivere:
Alt
Si utilizza per dare una descrizione testuale all'immagine al passaggio del puntatore del mouse.
<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine">
________________________________________
Vspace
Si utilizza per porre uno spazio laterale, superiore o inferiore da un eventuale testo, una immagine e anche dai bordi di una tabella se ci si trova naturalmente al suo interno. Il valore 10 è espresso in pixel.
<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine" vspace="10">
________________________________________
Hspace
Si utilizza per porre uno spazio alla destra e alla sinistra da un eventuale testo, immagine e come vspace, dal bordo interno di una tabella.
Il valore 10 è espresso in pixel.
<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine" vspace="10" hspace="10">
________________________________________
Align
Questo comando lo abbiamo già visto prima, ma riporto ugualmente il paragrafo ad esso dedicato:
Si utilizza con gli attributi left, center, right, justify, per allineare il testo rispettivamente a sinistra, centro, destra, giustificato. Per utilizzare align e tutti i suoi attributi si deve ricorrere all'esatta sintassi che segue:
<p align="left">Questo testo sarà allineato a sinistra</p>
<p align="center">Questo testo sarà allineato in maniera centrale</p>
<p align="right">Questo testo sarà allineato a destra</p>
<p> align="justify">Questo testo sarà allineato in maniera giustificata</p>
Per vederne gli effetti ricopiate il codice sopra descritto su di un editor html, salvate la pagina ed eseguitela lanciandola con il vostro browser.
Sappiate che per tornare a capo durante la digitazione del testo non basta la semplice pressione del tasto Invio, ma dovrete digitare <br> oppure aprire e chiudere il tag <p> (in questa maniera: <p> </p>).
<img src="foto.jpeg" width="100" height="50" align="center" alt="Descrizione immagine" vspace="10" hspace="10">
I links
Dopo avere visto come inserire del testo e delle immagini, passiamo ad analizzare un altro aspetto importante: i links o collegamenti ipertestuali. Un link, o "àncora" sono tutti quegli elementi grafici o testuali che, se cliccati, trasferiscono l'utente in un altro luogo della pagina, del sito o di un sito esterno rispetto a quello che si sta consultando al momento. Spero che fino ad ora abbiate messo in pratica con un editor (ripeto che lo trovate nella sezione download) la teoria esposta, perchè ora inseriremo i primi links con il tag <a> </a>. Ricordando che non ha importanza l'uso delle maiuscole e delle minuscole, mentre lo ha invece la sintassi (spazi non richiesti, ecc...), il tag <a> e </a> da solo non serve a molto, deve infatti essere utilizzato con HREF (Hypertext Reference), il quale fa in modo che tutto quello che è compreso tra il tag <a> e </a> diventi un ipertesto, cioè un link. Riprendiamo ora l'esempio di prima (privato di tutti gli elementi già visti per evitare confusione) e realizziamo un collegamento ipertestuale ad esempio alla prima pagina di questo sito:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://www.testiemanuali.com/index.htm">NetTarget</A>
</BODY>
</HTML>
Il codice sopra riportato rende visibile sulla pagina "NetTarget" che, se cliccato, apre la prima pagina del sito stesso. Fate attenzione ai tags ed in specie alla chiusura di essi.
Resta ovvio che ogni link potrebbe puntare a diversi bersagli (target), vediamo alcuni dei quali:
<A HREF="ftp://...">
Collegamento ad un sito FTP.
<A HREF="mailto:...">
Spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica.
<A HREF="news:...">
Collegamento ad un gruppo di discussione (newsgroup Usenet).
<A HREF="nomefile.zip">
Download di un file compresso.
<A HREF="foto.jpg">
Collegamento ipertestuale sfruttando una immagine.
Se il sito è strutturato in frames (cioè diviso in più settori con uno principale), capiterà di certo che una volta cliccato sul link, esso apparirà nel settore del link e non in quello principale. Per ovviare tale inconveniente, utilizzeremo un comando molto potente, anche se per adesso ne vedremo solo la funzione di puntamento, il comando in questione è target.
Vediamo subito la sintassi per poi commentarla al fine di rendere agevole la comprensione del nuovo comando.
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://www.testiemanuali.com/index.htm"
target="pagina_Principale>Testi e Manuali</A>
</BODY>
</HTML>
Dopo avere creato un link, bisogna decidere dove questo deve visualizzare le informazioni, con il codice che vedete sopra, si deduce che il sito che ospita il link è strutturato con i frames e che la pagina index.htm di NetTarget verrà visualizzata nella finestra principale (quella che di solito sta al centro, tra due riquadri, uno a sinistra che spesso ospita la barra verticale di navigazione e quello superiore che potrebbe ad esempio ospitare oltre ad una barra orizzontale di navigazione, un banner o altro ancora). Se si desidera che la pagina collegata venga visualizzata in una finestra nuova, allora si deve utilizzare il codice seguente:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://www.testiemanuali.com/index.htm" target="_blank">Testi e Manuali</A>
</BODY>
</HTML>
Fate attenzione alla sintassi di target, contiene un carattere denominato "underscore", si ottiene con shift + - (operatore aritmetico di sottrazione).
A questo punto dovreste essere capaci di realizzare almeno una pagina web con tutte le carte in regola per funzionare.
<HEAD> </HEAD>
Ho iniziato a scrivere questo manuale puntando quasi subito alla struttura di un sito, ora dovremmo sapere inserire del testo, delle immagini e dei link, a costruire praticamente un piccolo, semplice sito. Inizialmente scrissi di volere tralasciare i tag <head> e </head> (vedere la sezione Primi passi), perchè meritano un discorso a parte che è ora di affrontare. Accennai che contengono tutto quel codice che deve essere eseguito per primo, in questo caso: i metatag.
Cosa siano i metatag non è difficile da spiegare, ma essendo NetTarget specializzato anche e soprattutto su di essi, ho realizzato un altro manuale. Abbiate la pazienza di spostarvi ora da questa pagina per andare a studiare i metatags in un'altra e precisamente nella sezione
<BODY> </BODY>
Il testo, le immagini, i links e tutto ciò che non rappresenta un codice che deve essere eseguito subito, deve essere collocato tra i tags <body> e </body>. I suddetti tags dichiarano rispettivamente l'apertura e la chiusura del corpo della pagina e all'interno di essi è possibile inoltre configurare i parametri che determineranno l'estetica della pagina, come il colore dello sfondo della pagina, del testo, quindi la formattazione di esso, ecc...
Vediamo ora quali sono gli attributi utilizzabili al fine di migliorare l'estetica della pagina web:
Bgcolor
Specifica il colore di sfondo. Il colore di sfondo viene escluso qualora venga specificato al suo posto una immagine di sfondo (che utilizza tuttavia un altro attributo). Nell'esempio seguente lo sfondo viene impostato con "white" che restituisce il colore bianco, è possibile utilizzare anche il rispettivo valore esadecimale che restituisce il valore del bianco.
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="black">
</BODY>
</HTML>
________________________________________
Background
Imposta una immagine di sfondo che escluderà eventuali colori di sfondo impostati in precedenza (vedere bgcolor).
Nell'esempio corrente imposteremo una immagine di sfondo, fate attenzione alle immagini, utilizzate gli accorgimenti descritti nella sezione "Le immagini".
<HTML>
<HEAD>
</HEAD>
<BODY background="foto.jpeg">
</BODY>
</HTML>
________________________________________
Text
Specifica il colore del testo. Accetta anche i valori esadecimali dei colori.
<HTML>
<HEAD>
</HEAD>
<BODY text="black">
</BODY>
</HTML>
________________________________________
Link
Imposta il colore dei links da visitare. Accetta anche i valori esadecimali dei colori.
<HTML>
<HEAD>
</HEAD>
<BODY link="red">
</BODY>
</HTML>
________________________________________
Vlink
Imposta il colore dei links visitati:
<HTML>
<HEAD>
</HEAD>
<BODY vlink="brown">
</BODY>
</HTML>
Accetta anche i valori esadecimali dei colori.
________________________________________
Leftmargin
Specifica la distanza dal margine sinistro in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY leftmargin="10">
</BODY>
</HTML>
________________________________________
Rightmargin
Specifica la distanza dal margin destro in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY rightmargin="10">
</BODY>
</HTML>
________________________________________
Topmargin
Specifica la distanza dal margine superiore in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY topmargin="10">
</BODY>
</HTML>
________________________________________
Bottommargin
Specifica la distanza dal margine inferiore in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY bottommargin="10">
</BODY>
</HTML>
Le tabelle
Se avete studiato con attenzione questo manuale, sarete ora in grado di costruire in maniera più professionale la vostra pagina web. Questo non vuol dire che siete in grado di sviluppare un sito con tutti gli accorgimenti per essere considerato un buon sito, avete ancora tanto da imparare. Abbiamo parlato di testo e di immagini, ma nel momento in cui deciderete di usufruire di entrambe le cose, vi accorgerete che il risultato non sarà esattamente ciò che desiderate, cioè un complesso armonico nella lettura e nella grafica, ma un insieme di frasi e immagini poste in maniera disordinata, difficile o faticoso da interpretare. Per porre rimedio a quanto detto si deve ricorrere alle tabelle.
Una tabella è una griglia composta da righe e colonne, perfettamente formattabile in tutti i suoi aspetti (colori, dimensioni, stile, ecc...), dentro la quale è possibile inserire in maniera perfettamente ordinata testo ed immagini. Io vi fornisco la teoria e del codice che volendo potrebbe essere utilizzabile, quello che non vi fornisco è l'esempio grafico delle tabelle, perchè sono convinto che dovrete essere voi ad ottenerle, magari copiando il codice, vi servirà oltretutto per imparare ad utilizzare il vostro editor html. Sotto un unico esempio di tabella composta da due righe e due colonne:
Ora vediamo come si realizza una tabella, il tag da utilizzare è <TABLE> e prevede almeno altri tre tags per essere utilizzabili: <TR> <TD> e l'attributo BORDER che si trovano annidati tra il codice che costituisce la tabella e che suddividono rispettivamente la tabella in righe e colonne, mentre BORDER specifica lo spessore del bordo della tabella da un valore minimo di 0 (zero)..
Vediamo sotto un esempio di codice che permette la realizzazione di una tabella:
<table border="1">
<tr>
<td> Contenuto della tabella </td>
</tr>
</table>
se volessimo creare una tabella con due celle, allora utilizzeremo i tags sopra descritti nel seguente modo:
<table border="1">
<tr>
<td> cella alta di sinistra </td><td> cella alta di destra </td>
</tr>
<tr>
<td> cella bassa di sinistra </td><td> cella bassa di destra </td>
</tr>
</table>
Quello che abbiamo visto è il codice per ottenere delle tabelle regolari, spesso capita però di avere bisogno di tabelle dalla struttura irregolare, come ad esempio quella che restituisce il codice che segue grazie all'attributo colspan che unisce due o più celle di una stessa riga, cambiando il valore da 2 a 3 e via dicendo:
<table border="1">
<tr>
<td> cella alta di sinistra </td><td> cella alta di destra </td>
</tr>
<tr>
<td colspan="2"> Due celle unite in basso </td>
</tr>
</table>
Sotto un altro esempio di tabella dalla struttura irregolare, questa volta ad essere unite saranno due celle di diverse righe, l'attributo utilizzato è rowspan e segue le regole di colspan:
<table border="1">
<tr>
<td rowspan="2"> Due celle unite in colonna </td><td> cella alta di destra </td>
</tr>
<tr>
<td> cella bassa di destra </td>
</tr>
</table>
Quello che segue sotto è il codice per ottenere diversi tipi di tabelle elaborate. Ricordate che potete utilizzare il codice, ma il mio consiglio è sempre quello di studiare, leggetelo ricordando tutto quello che abbiamo visto fino ad ora, vi accorgerete presto che riuscirete a capire a cosa serve il codice che avete davanti!
Codice di una tabella elaborata
<table border="1">
<tr>
<td colspan="3">testata della tabella (tre celle unite)</td>
</tr>
<tr>
<td>colonna di sinistra </td>
<td>colonna di centro </td>
<td>colonna di destra </td>
</tr>
<tr>
<td colspan="3" align="center">piede della tabella</td>
</tr>
</table>
Le tabelle possono essere modificabili in altri modi, ad esempio, se volessimo il bordo non visibile, basterà impostare border su 0 (zero) nel seguente modo:
BORDER="0"
Se invece i bordi della tabella devono essere visibili, ma con distanze diverse, allora dovremo ricorrere ad altri due attributi: cellspacing e cellpadding, rispettivamente controllano lo spazio da lasciare tra le singole celle (cellspacing) e quanto spazio lasciare fra il bordo e i dati contenuti all'interno della singola cella (cellpadding).
Sotto un esempio di tabella con inclusi i due nuovi attributi:
<table border="1" cellspacing="20" cellpadding="10">
<tr>
<td colspan="3">testata della tabella (tre celle unite)</td>
</tr>
<tr>
<td>colonna di sinistra </td>
<td>colonna di centro </td>
<td>colonna di destra </td>
</tr>
<tr>
<td colspan="3" align="center">piede della tabella</td>
</tr>
</table>
Questo è tutto quello che si deve sapere sulle tabelle. Ovviamente potrete costruirne voi di diverse ora che avete le nozioni esatte, ad esempio potrete colorarle e formattare anche il testo, ripeto, potrei fornirvi del codice di esempio, ma avete la teoria ed i singoli esempi.
I frames
Da ora in poi il corso si fa più complicato (ma non così tanto in fondo).Se non siete padroni di tutto quello che ho scritto in precedenza riguardo questo manuale, non sarete in grado di applicare la teoria che segue ora: i frames.
Cosa è un frame
Una pagina con frame è una pagina web che viene suddivisa in più aree indipendenti: i frames.
Cliccando su di un link contenuto in un frame, in genere la pagina a cui punta viene aperta in un altro frame.
Perchè un frame, pro e contro e alternativa
Perchè un frame è presto spiegato, perchè in questo modo si potrebbe sempre avere una barra di navigazione a portata di mouse, perchè si potrebbe decidere di rendere sempre visibile un banner o un bottone pubblicitario, perchè praticamente potrebbe ospitare qualsiasi cosa e tenerlo sempre visibile all'utente. Il contro (l'unico a parere mio e rimediabile), è rappresentato dai motori di ricerca i quali potrebbero restituire all'utente la pagina senza il frame (praticamente la pagina collegata) che magari non contiene il menu ed il link alla homepage impedendogli di risalire al sito nella sua integralità. Tuttavia questo inconveniente è rimediabile, io personalmente inserisco su ogni pagina del mio sito un banner contenente oltre all'indirizzo esatto, anche un collegamento ipertestuale al medesimo. L'alternativa è rappresentata da un sito strutturato in tabelle, sicuramente più semplice da realizzare.
Prima di programmare un frame
Dovete decidere se il frame deve essere laterale o superiore o inferiore, anche se potrete decidere per tutti. Presupponendo che il frame debba essere laterale sinistro, preparate un file con estensione .htm denominato magari framesinistro.htm. Fatto ciò preparatene un altro denominato ad esempio principale.htm, i nomi delle pagine sono del tutto soggettivi, ma ricordatevi di utilizzarli nel caso utilizzaste il mio codice di esempio e funzionante di questo manuale. Ora create una nuova pagina che dovete denominare index.htm.
A questo punto inizia la programmazione del frame:
sotto </head> di index.htm scriviamo il nuovo tag <FRAMESET> che da solo non serve a niente, deve infatti precedere rows (righe) e/o cols (colonne), che indicano rispettivamente se il frame deve essere superiore o inferiore (rows) o laterale (cols).
Supponendo di voler realizzare una pagina con un frame laterale sinistro, allora dovremo scrivere subito sotto </head> il seguente codice:
<FRAMESET COLS="25, *">
</frameset>
dove <frameset> indica al browser che deve visualizzare un frame, dove cols indica che si tratta di un frame verticale dalla larghezza del 25% della pagina originale (una colonna, in pratica), dove * indica che il resto dello spazio deve essere occupato dalla pagina di destinazione.
Dopo avere stabilito le dimensioni del frame, si devono richiamare i file creati in precedenza nel modo seguente:
<frame name="framesinistro" src="framesinistro.htm">
<frame name="principale" src="principale.htm">
name è un attributo necessario in quanto permette di identificare il frame nel quale richiamare la pagina tramite src (source).
Salvate ora la pagina come index.htm e provatela.
La lezione sui frame non è finita, se avete strutturato una pagina in tal modo, molto probabilmente avrete una barra di navigazione così come dovrete decidere in quale finestra visualizzare le altre pagine che compongono il sito. Non potete utilizzare un semplice collegamento ipertestuale o vedrete la pagina collegata direttamente nel frame che invece contiene il menu. Per rimediare a questo inconveniente dovrete utilizzare un comando molto potente: target (bersaglio).
Supponendo che abbiate creato delle pagine nominate come quelle di questo esempio, vi basterà scrivere un codice simile al seguente per collegare tutte le pagine che volete alla principale:
<A HREF="nomepagina.html" target="principale">
Adesso avete davvero tutte le nozioni per poter realizzare un sito di successo. Da ora in avanti proseguirò con una lezione davvero interessante e se avrete studiato con attenzione, la capirete senza fatica.
In particolare su Target
Altri utilizzi di target sono:
1. target="_top" Eliminazione del frameset con l'utilizzo della pagina intera per la visualizzazione dei dati.
Esempio
<A HREF="nomepagina.html" target="_top">
2. target="_blank" Apre una nuova finestra del browser nella quale verranno visualizzati i dati.
Esempio
<A HREF="nomepagina.html" target="_blank">
3. target="_self" La pagina puntata viene visualizzata sullo stesso frame che ospita il link.
Esempio
<A HREF="nomepagina.html" target="_Self">
Proprietà dei frames
I bordi di un frame possono rovinare l'estetica di una pagina. Per ovviare il problema si deve utilizzare FRAMEBORDER impostato a 0 (zero) nel seguente modo:
<FRAMESET FRAMEBORDER="0" COLS="25, *">
Eliminando il bordo è opportuno assicurarsi che i frames siano uniti l'uno all'altro tramite l'attributo FRAMESPACING come segue:
<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" COLS="25, *">
Si raccomanda di utilizzare FRAMEBORDER e FRAMESPACING specialmente se i frames contengono colori o immagini di sfondo per renderli graficamente professionali.
L'attributo NORESIZE impedisce che il frame venga ridimensionato, altrimenti puntandone il bordo con il mouse, esso potrà essere "trascinato", rovinando l'estetica del sito. Sotto l'utilizzo dell'attributo NORESIZE.
<FRAMESET FRAMEBORDER="0" COLS="25, *">
<FRAMENAME="framesinistro" src="framesinistro.htm" NORESIZE>
Potreste anche impedire che il frame venga spostato in verticale, tramite la barra di spostamento, ma prima di decidere, assicuratevi che il vostro sito sia perfettamente visibile a bassa risoluzione, altrimenti potrebbe essere impossibile per molti vostri visitatori visualizzare l'intera barra del menu. L'attributo da utilizzare per disabilitare la barra di spostamento di un frame è SCROLLING utilizzato nel modo seguente:
<FRAMESET FRAMEBORDER="0" COLS="25, *">
<FRAMENAME="framesinistro" src="framesinistro.htm" NORESIZE SCROLLING="NO">
Altri valori possibili di SCROLLING sono: YES, AUTO.
Inserendo YES, la barra di scorrimento sarà sempre presente, inserendo AUTO le barre si visualizzeranno solo in caso di effettiva necessità.
Per una guida a questo tag sul web andare su Preferiti di
I moduli
I moduli (o forms) sono costituiti da elementi come caselle di testo o menu a tendina associati a pulsanti e di solito servono per interagire con i nostri visitatori, visto la possibilità di inviare dati tramite essi. Le potenzialità dei moduli sono infinite, si possono utilizzare da soli o con java scripts, vi si possono eseguire calcoli matematici e in pratica dipende dal programmatore a renderli sempre più funzionali. Vediamo ora come dotare il nostro sito (presuppongo che abbiate creato almeno la pagina principale ormai...) di un form. Il comando da utilizzare è
<form>
da solo non serve a niente, ha bisogno degli attributi sotto descritti:
Action
Serve ad indirizzare il modulo al server (per inviare ad esempio dei messaggi al webmaster del sito che ospita il form).
Metod
Ammette due metodi: Post e Get, i quali servono per inviare i dati scritti nel form
Name
Il nome del modulo, è facoltativo in html, obbligatorio in javascript.
Proviamo ora a vedere come iniziare a realizzare il form per inviare un messaggio tramite una casella mail ed un tasto Invia. Di seguito il codice, come sempre, editor html e provate:
<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
</form>
Il campo dentro il quale scrivere la e-mail si ottiene con <input> associato ad alcuni parametri quali type="text" e name="tuo nome" in modo tale da raccogliere i dati e spedirli. Ovviamente il modulo non è ancora funzionante per il semplice motivo che manca un tasto di invio ed una destinazione per i dati da inviare. Provvediamo a realizzare un tasto di invio con il comando input e submit come vedete nel codice a seguire, per scrivere sul pulsante utilizzeremo value, esattamente come segue:
<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
<input type="Submit" value="invia">
</form>
Ora che avete provato il codice sul vostro editor, vi sarete accorti di avere una casella di testo e un pulsante di invio. Manca tuttavia qualcosa: l'indirizzo al quale inviare il messaggio, cioè il nostro. Abbiamo due alternative, potremmo scegliere di farci inviare il messaggio tramite i CGI, ma spesso i server che mettono a disposizione gratuitamente dello spazio non mettono a disposizione i CGI, allora utilizziamo la nostra e-mail, magari creata allo scopo. Di seguito il codice completo per rendere funzionante il modulo utilizzando un indirizzo di posta elettronica:
<form method="post" action="mailto:tuoindirizzo@qui.it" enctype="text/plain"
name="mio_form">
Il tuo nome: <input type="Text" name="tuo nome">
Il tuo giudizio: <input type="Text" name="giudizio">
<input type="Submit" value="invia">
</form>
Ora non vi resta che provare il codice e quindi studiarlo.
Fonte: Asbafo.net
Manuale di programmazione
Premessa
Se avete deciso di leggere e magari fare il download di questo manuale, allora vuol dire che vi siete decisi quanto meno ad avvicinarvi ad HTML, il linguaggio di programmazione base di tutta internet.
Senza dilungarmi nella premessa, passiamo subito a studiare HTML.
Quello che serve è un semplice editor.
Se decidete di utilizzare un editor di testo, sceglietene uno adatto per scrivere del codice html, infatti se utilizzerete noti software di editing, vi troverete del codice danneggiato da tutti quei caratteri invisibili all'utente che va ad insinuarsi tra il codice stesso rendendolo inutilizzabile. Ricordate inoltre di non formattare il testo, altrimenti danneggerete allo stesso modo il codice html.
Di editor adatti ne troverete tanti in giro per la rete e tutti o quasi gratuiti, anche in questo sito ne troverete qualcuno, decidete voi quale procurarvi. Cercate di imparare a programmare in html con un editor testuale, non arrendetevi e studiate, i risultati non tarderanno ad arrivare. La regola è STUDIARE.
Quindi riepilogando: html vi serve per realizzare le vostre pagine web che costituiranno il vostro website, per imparare a programmare in html dovete studiare, vi serve un editor, meglio se specifico per scrivere codice html e continuare a studiare per utilizzarlo.
Se invece optate per un programma visuale che realizzi per voi una pagina, vuol dire che non dovrete studiare questo manuale, vi serve qualcosa di semplice e funzionale, per iniziare, in giro per la rete e ovviamente anche su
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
troverete quello che vi serve nella sezione download. Ovviamente questo manuale è dedicato ad Html puro, destinato a chi vuole realizzare pagine web programmando e non facendole realizzare a programmi dedicati. Utilizzare un programma che offre la possibilità di ottenere il risultato di un codice scritto senza effettivamente farlo non implica che si può fare a meno di html, molte volte infatti, è necessario manipolare il codice, altrimenti ci si deve accontentare dei limiti del software che stiamo utilizzando (e vi assicuro che ad un certo livello sono limitati).Vedrete che imparando sempre più, sentirete l'esigenza di modificare i parametri di una tabella o di un collegamento ipertestuale diversamente rispetto a quelli di default scelti dal software che lo ha fatto per voi, ma andiamo con ordine.Attenzione: Per fare in modo di rendervi padroni del linguaggio, ho appositamente evitato di mostrarvi il risultato del codice in questo manuale riportato. Io vi assicuro che il codice di esempio è esatto, vi fornisco un editor html su
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
e questo manuale ricco di nozioni per chi inizia adesso. A voi tocca utilizzare il codice tramite l'impiego dell'editor html e incominciare a scriverne del vostro. Questo è il metodo per imparare: studiare e applicare, non arrendetevi, ma studiate sempre nuove soluzioni, vedrete che ci riuscirete.Primi passi
Gli elementi fondamentali di una pagina web.
Provando a visualizzare il codice di una semplice pagina web, noteremo subito che esso inizia con <HTML> (non importa se scritto a caratteri maiuscoli o minuscoli). <html> è un comando o tag e deve sempre essere rinchiuso tra due parentesi angolari < > (in linguaggio di programmazione: operatore logico minore e operatore logico maggiore), facendo attenzione a non inserire spazi all'interno (sarebbe utile in seguito consultare la guida agli operatori logici su
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
). <html> è posto sempre all'inizio del codice della pagina web, esso lo avvia, in pratica indica che il codice che segue è destinato ad essere interpretato da un browser. Se vi state chiedendo cosa è un browser, ecco la risposta: è un programma (i più famosi sono Internet Explorer e Netscape Navigator), che consente tramite il trasferimento dei dati, la comunicazione tra noi, interfacciati tramite il computer e internet. Un tag in poche parole possiede il compito di avviare una istruzione specifica e possiede di conseguenza, salvo qualche caso, un altro tag che ne decreta l'interruzione del suddetto compito. Così come <html> "apre" il codice di una pagina, allo stesso modo </HTML> lo "chiude". Ricordo ancora una volta che possiamo utilizzare le lettere maiuscole o minuscole a nostra discrezione. Una volta digitato </html> il browser capirà che è finito il codice della pagina ed il caricamento della medesima. Notate che la chiusura di un tag è definita da "/", in linguaggio tecnico "slash". Chiarito il concetto e l'utilizzo di <HTML> e </HTML> passiamo avanti a vedere quali sono gli altri tags che seguono. Leggendo di seguito noteremo <HEAD> e </HEAD>, su questi tags per il momento non mi soffermo perchè devono essere affrontati insieme ad altri concetti, mi basta dire, per ora, che essi racchiudono tutto il codice che deve essere utilizzato per primo, come gli scripts. Andiamo avanti per individuare altri due tags: <BODY> e </BODY>, essi racchiudono tutto quello che possiamo vedere su di una pagina web come: testo, immagini, tabelle, ecc...Di seguito potete vedere la struttura base di una pagina web intesa nei tag essenziali:
<HTML>
<HEAD>
Tutto il codice che deve essere eseguito subito.
</HEAD>
<BODY>
Tutto il contenuto della pagina.
</BODY>
</HTML>
Concetto di struttura
Per struttura si intende una organizzazione logica e sequenziale di dati o azioni. Chi è in possesso di minime nozioni di programmazione potrebbe paragonarla ad un diagramma di flusso (rappresentazione logica mentale di comandi e istruzioni atti a svolgere con ordine un determinato programma).
La struttura sta alla base della comprensione del cervello umano. Un concetto privo di una struttura, per quanto semplice possa essere, molto difficilmente sarà comprensibile all'uomo. Tutto quello che ci sta intorno possiede una struttura, persino questo manuale. Se ad esempio io iniziassi a spiegare cosa sono gli script, probabilmente non capireste cosa state leggendo.
Il mio primo editor HTML
Forse vi sembrerà strano, ma è giunto il momento di iniziare a programmare in Html.
Se avete appreso quanto scritto fino ad ora, intuite che quello che vi serve è un editor. Andate nella sezione download di
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
o in qualche altro sito che offre del free software e scaricatene uno. Avviate il vostro editor, la prima cosa da fare è quella di creare una struttura (se avete fatto il download di Cougar Code 10 vi accorgerete che vi viene automaticamente creata), la struttura da realizzare è come quella sopra riportata, ma con qualche elemento in più tra i tags.<HTML>
Tutto il codice che deve essere eseguito subito.
<HEAD>
</HEAD>
<BODY>
<p> In questo modo inizio a scrivere sulla mia nuova pagina web.</p>
</BODY>
</HTML>
Il codice appena letto contiene un tag nuovo: <p> e </p> ovvero l'elemento paragrafo. Provate ora a salvare il codice da voi scritto assegnando un nome alla vostra pagina (ovvero al vostro codice) e quindi apritela per vedere il risultato.
Attenzione: se state utilizzando un semplice editor di testo e non un editor HTML, il file contenente il codice dovrà avere assolutamente estensione .htm o .html e NON .txt o .doc. Di seguito una procedura sicura per salvaguardare il codice:
1. Dopo avere scritto il codice, salvatelo con estensione di testo tipo "home.html". Windows nasconde le estensioni, ma interpreta il file ugualmente, nel nostro caso come un file di ipertesto.
2. Ovviamente il nostro file non deve essere di testo, ma deve essere un file di ipertesto, ovvero deve avere estensione .htm o .html, pena una pagina di testo lontana dalla natura di una pagina web e non idonea al nostro progetto.
Se salviamo il file come file di testo (.doc, .txt…) lo dobbiamo rinominare (con il tasto destro del mouse ), per ottenere qualcosa come "home.htm", ma le cose non saranno cambiate, verrebbe interpretato sempre come un file di testo, in realtà, se togliessimo dal Sistema Operativo l'opzione "Nascondi l'estensione dei file riconosciuti dal sistema", potremmo leggere "home.htm.txt".
3. L'opzione "Nascondi l'estensione dei file riconosciuti dal sistema" è scomoda per un programmatore, quindi se credete di voler diventare tali, toglietela per vedere l’effettiva estensione del file (potrete sempre ripristinarla) nel seguente modo:
In Risorse del computer o Esplora risorse selezionare la cartella che si desidera visualizzare.
-Scegliere Opzioni cartella dal menu Visualizza.
Scegliere la scheda Visualizzazione, quindi fare clic sul pulsante di opzione Mostra tutti i file.
-Se si desidera visualizzare tutte le estensioni dei nomi di file, deselezionare la casella di controllo Nascondi le estensioni dei file per i tipi di file conosciuti.
Il testo
Il primo passo importante da compiere per imparare a realizzare una pagina web è quello di sapere immettere del testo in essa. Abbiamo visto come tramite il tag <p> </p> siamo riusciti a scrivere qualcosa, in maniera analoga adesso procederemo a realizzare qualcosa di più complesso.
Il testo e il comando Align
Si utilizza con gli attributi left, center, right, justify, per allineare il testo rispettivamente a sinistra, centro, destra, giustificato.
Per utilizzare align e tutti i suoi attributi si deve ricorrere all'esatta sintassi che segue:
<p align="left">Questo testo sarà allineato a sinistra</p>
<p align="center">Questo testo sarà allineato in maniera centrale</p>
<p align="right">Questo testo sarà allineato a destra</p>
<p align="justify">Questo testo sarà allineato in maniera giustificata</p>
Per vederne gli effetti ricopiate il codice sopra descritto su di un editor html, salvate la pagina ed eseguitelo.
Sappiate che per tornare a capo durante la digitazione del testo non basta la semplice pressione del tasto Invio, ma dovrete digitare <br> (vedere anche in seguito), oppure aprire e chiudere il tag <p> (in questa maniera: <p> </p>). Il tag <br> non possiede relativo tag di chiusura.
Nota: Formattare il testo allineandolo a sinistra, al centro, a destra o in maniera giustificata potrebbe non essere sufficiente. Immaginate di dover incolonnare un testo in modo chiaro, justify sarebbe una buona soluzione, ma sarebbe ancora meglio qualcosa che si comportasse come justify, ma con la peculiarità extra di distanziare i termini con una spaziatura fissa. Il tag è <KBD></KBD> ed il testo da incolonnare deve essere racchiuso tra di essi. In alternativa potrete utilizzare i tags <TT></TT> oppure <SAMP></SAMP>.
Grassetto, Corsivo e sottolineato
Potrebbe capitare di dover formattare il testo anche nella sua estetica. Ad esempio, rendere in stile grassetto un termine servirebbe a metterlo in evidenza, così come il corsivo lo stilizzerebbe oppure il sottolineato ne suggerirebbe l'importanza. Vediamo ora come fare per ottenere gli effetti appena descritti:
<B> </B> (Bold)
Tutto quello che verrà scritto tra <b> e </b> risulterà scritto in grassetto.
Potrete utilizzare anche <strong> e </strong>
<U> </U> (Underlined)
Per ottenere l'effetto sottolineato scrivete il vostro testo tra questi tags.
<u> Il vostro testo </u>
<I> </I> (Italic)
Si utilizzano per rendere il testo in stile corsivo.
<i> Il vostro testo </i>
In alternativa utilizzate i tags <VAR></VAR>, in alternativa potrete utilizzare in maniera analoga i due tags <EM></EM>
Sotto un esempio di quanto descritto, potete fare il copia-incolla da questa pagina al vostro editor html per vederne gli effetti:
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Questo stile è grassetto </B>
<U>Questo stile è sottolineato </U>
<I> Questo stile è corsivo </I>
</BODY>
</HTML>
Se avete provato il codice sopra descritto, vi sarete accorti che tutto quanto viene scritto su unica riga. Per evitare ciò dovete utilizzare il tag <br>, in questa maniera otterrete l'interruzione della riga corrente ed un ritorno a capo.
Nota: ripeto che il tag <br> non possiede un tag di chiusura.
Copiate e incollate ora sul vostro editor html il codice che segue e vedete gli effetti del tag <br>.
<HTML>
<HEAD>
</HEAD>
<BODY>
<B>Questo stile è grassetto, la prossima riga è a capo </B><br>
<U>Questo stile è sottolineato, la prossima riga è a capo </U><br>
<I> Questo stile è corsivo, la prossima riga sarà a capo </I><br>
</BODY>
</HTML>
Per cambiare invece il tipo di carattere, la sua dimensione ed il suo colore, dovrete utilizzare i tag <FONT> </FONT> con gli attributi SIZE, FACE, COLOR.
SIZE
Specifica la grandezza del carattere. Il valore massimo è 7.
FACE
Specifica il tipo di carattere.
COLOR
Specifica il colore del testo.
Sotto un esempio per illustrare chiaramente quanto descritto. Il mio consiglio è sempre quello di copiare ed incollare il codice seguente su di un editor html.
<HTML>
<HEAD>
</HEAD>
<BODY>
<font size="5" face="Arial" color="black">
<p> Questo è il risultato: grandezza del carattere: 5, tipo del carattere: Arial, colore: nero.</p>
</BODY>
</HTML>
Un altro elemento che potrebbe risultare utile è la linea orizzontale, per separare le sezioni di una pagina.
Il tag che la riproduce è <HR>, non possiede chiusura e attributi. Per modificarne la lunghezza si utilizza Width.
Sotto un esempio:
<HR WIDTH="75">
La linea in tal maniera viene visualizzata con effetto 3D, per renderla bidimensionale con NOSHADE, scrivere il codice come segue:
<HR WIDTH="75" NOSHADE>
E' inoltre possibile settarne l'altezza e lo spessore utilizzando SIZE:
<HR WIDTH="75" SIZE="6" NOSHADE>
Le immagini
Le immagini, problematiche e metodo
Inserire delle immagini su di una pagina contribuirà a renderla più gradevole a vedersi, oltre che professionale. Tuttavia prima di vedere come si inseriscono le immagini con il codice html, è doveroso analizzare delle problematiche che sovente si verificano dopo la realizzazione e la pubblicazione online del sito. Tutti noi avremo notato pagine particolarmente lente nel caricarsi, ritrovandoci ad aspettare anche parecchi minuti (se siamo stati disposti ad aspettare...) prima di poterle consultare. Le cause di tale lentezza potrebbero essere tante, tra le quali la immagini definite "pesanti". Per immagine "pesante" si intende una immagine dalle dimensioni espresse in kilobyte o peggio in megabyte, troppo grosse per potere essere caricate nei tempi dovuti. Un esempio classico è quello di impostare come sfondo della nostra home page una immagine delle dimensioni ad esempio di 500 kb, il risultato sarebbe un'attesa di caricamento che spesso si conclude con l'abbandono del sito alla ricerca di qualcosa di più fruibile da parte del visitatore.
la soluzione a questo inconveniente è banale: basta utilizzare i formati grafici adatti ed eventualmente del software reperibile anche su questo sito che si occupi di ottimizzarle riducendone le dimensioni.
I formati utilizzati a tale scopo sono principalmente due:
- Gif (Graphic Interchange Format): ottimo per rappresentare colori uniformi come quelli dei loghi. Possiede una palette dei colori limitata, in compenso non rappresenta un sovraccarico ai fini del caricamento delle immagini.
- Jpeg (Joint Photographic Experts Group): consigliato per le fotografie, le quali contengono milioni di colori, perchè possiede una palette di colori maggiore rispetto al formato gif.
Esiste da poco inoltre un nuovo formato che promette una migliore qualità delle immagini: il Png e che vorrebbe sostituire il formato Gif. Il suo utilizzo è però ristretto solo ai browser più recenti.
Chiarito questo concetto passiamo ora a vedere come inserire una immagine nella nostra pagina.
Supponiamo di possedere una immagine denominata foto.jpeg e di volerla rendere visibile sulla nostra pagina, sarà indispensabile allora l'utilizzo del comando IMG e del suo attributo SRC.
IMG e SRC
Prendiamo come struttura di esempio quella già utilizzata allo scopo di inserire del testo:
<HTML>
<HEAD>
</HEAD>
<BODY>
<p> In questo modo inizio a scrivere sulla mia nuova pagina web.</p>
<p align="left">Questo testo sarà allineato a sinistra</p>
<p align="center">Questo testo sarà allineato in maniera centrale</p>
<p align="right">Questo testo sarà allineato a destra</p>
<p align="justify">Questo testo sarà allineato in maniera giustificata</p>
</BODY>
</HTML>
Il nostro compito sarà ora quello di scrivere l'esatta sintassi per richiamare l'immagine, vediamo come:
<img src="foto.jpeg">
Come per tutto quello che deve essere trovato tramite codice, anche in questo caso si deve specificare la posizione di "foto.jpeg", altrimenti non otterremmo il risultato desiderato. Se la foto si trovasse nella stessa directory del file che la richiama (la nostra pagina), andrebbe bene il codice sopra descritto, nel caso la foto non dovesse trovarsi nella stessa directory del file che la richiama, allora dovremo specificare tutto il percorso (path). Sotto alcuni esempi:
<img src="../nomecartella/foto.jpeg">
E' opportuno inoltre specificare le dimensioni dell'immagine al fine di velocizzare il caricamento della pagina nel modo seguente:
<img src="foto.jpeg" width="100" height="50">
Width rappresenta la larghezza della foto, il valore 100 rappresenta invece i pixel della foto. Analogamente height rappresenta l'altezza della foto ed il valore 50 i pixel.
Gli attributi di img non sono però solo quelli appena descritti, ne esistono altri che mi appresto a descrivere:
Alt
Si utilizza per dare una descrizione testuale all'immagine al passaggio del puntatore del mouse.
<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine">
________________________________________
Vspace
Si utilizza per porre uno spazio laterale, superiore o inferiore da un eventuale testo, una immagine e anche dai bordi di una tabella se ci si trova naturalmente al suo interno. Il valore 10 è espresso in pixel.
<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine" vspace="10">
________________________________________
Hspace
Si utilizza per porre uno spazio alla destra e alla sinistra da un eventuale testo, immagine e come vspace, dal bordo interno di una tabella.
Il valore 10 è espresso in pixel.
<img src="foto.jpeg" width="100" height="50" alt="Descrizione immagine" vspace="10" hspace="10">
________________________________________
Align
Questo comando lo abbiamo già visto prima, ma riporto ugualmente il paragrafo ad esso dedicato:
Si utilizza con gli attributi left, center, right, justify, per allineare il testo rispettivamente a sinistra, centro, destra, giustificato. Per utilizzare align e tutti i suoi attributi si deve ricorrere all'esatta sintassi che segue:
<p align="left">Questo testo sarà allineato a sinistra</p>
<p align="center">Questo testo sarà allineato in maniera centrale</p>
<p align="right">Questo testo sarà allineato a destra</p>
<p> align="justify">Questo testo sarà allineato in maniera giustificata</p>
Per vederne gli effetti ricopiate il codice sopra descritto su di un editor html, salvate la pagina ed eseguitela lanciandola con il vostro browser.
Sappiate che per tornare a capo durante la digitazione del testo non basta la semplice pressione del tasto Invio, ma dovrete digitare <br> oppure aprire e chiudere il tag <p> (in questa maniera: <p> </p>).
<img src="foto.jpeg" width="100" height="50" align="center" alt="Descrizione immagine" vspace="10" hspace="10">
I links
Dopo avere visto come inserire del testo e delle immagini, passiamo ad analizzare un altro aspetto importante: i links o collegamenti ipertestuali. Un link, o "àncora" sono tutti quegli elementi grafici o testuali che, se cliccati, trasferiscono l'utente in un altro luogo della pagina, del sito o di un sito esterno rispetto a quello che si sta consultando al momento. Spero che fino ad ora abbiate messo in pratica con un editor (ripeto che lo trovate nella sezione download) la teoria esposta, perchè ora inseriremo i primi links con il tag <a> </a>. Ricordando che non ha importanza l'uso delle maiuscole e delle minuscole, mentre lo ha invece la sintassi (spazi non richiesti, ecc...), il tag <a> e </a> da solo non serve a molto, deve infatti essere utilizzato con HREF (Hypertext Reference), il quale fa in modo che tutto quello che è compreso tra il tag <a> e </a> diventi un ipertesto, cioè un link. Riprendiamo ora l'esempio di prima (privato di tutti gli elementi già visti per evitare confusione) e realizziamo un collegamento ipertestuale ad esempio alla prima pagina di questo sito:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://www.testiemanuali.com/index.htm">NetTarget</A>
</BODY>
</HTML>
Il codice sopra riportato rende visibile sulla pagina "NetTarget" che, se cliccato, apre la prima pagina del sito stesso. Fate attenzione ai tags ed in specie alla chiusura di essi.
Resta ovvio che ogni link potrebbe puntare a diversi bersagli (target), vediamo alcuni dei quali:
<A HREF="ftp://...">
Collegamento ad un sito FTP.
<A HREF="mailto:...">
Spedizione di una e-mail all'indirizzo specificato, facendo uso del proprio programma di posta elettronica.
<A HREF="news:...">
Collegamento ad un gruppo di discussione (newsgroup Usenet).
<A HREF="nomefile.zip">
Download di un file compresso.
<A HREF="foto.jpg">
Collegamento ipertestuale sfruttando una immagine.
Se il sito è strutturato in frames (cioè diviso in più settori con uno principale), capiterà di certo che una volta cliccato sul link, esso apparirà nel settore del link e non in quello principale. Per ovviare tale inconveniente, utilizzeremo un comando molto potente, anche se per adesso ne vedremo solo la funzione di puntamento, il comando in questione è target.
Vediamo subito la sintassi per poi commentarla al fine di rendere agevole la comprensione del nuovo comando.
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://www.testiemanuali.com/index.htm"
target="pagina_Principale>Testi e Manuali</A>
</BODY>
</HTML>
Dopo avere creato un link, bisogna decidere dove questo deve visualizzare le informazioni, con il codice che vedete sopra, si deduce che il sito che ospita il link è strutturato con i frames e che la pagina index.htm di NetTarget verrà visualizzata nella finestra principale (quella che di solito sta al centro, tra due riquadri, uno a sinistra che spesso ospita la barra verticale di navigazione e quello superiore che potrebbe ad esempio ospitare oltre ad una barra orizzontale di navigazione, un banner o altro ancora). Se si desidera che la pagina collegata venga visualizzata in una finestra nuova, allora si deve utilizzare il codice seguente:
<HTML>
<HEAD>
</HEAD>
<BODY>
<A HREF="http://www.testiemanuali.com/index.htm" target="_blank">Testi e Manuali</A>
</BODY>
</HTML>
Fate attenzione alla sintassi di target, contiene un carattere denominato "underscore", si ottiene con shift + - (operatore aritmetico di sottrazione).
A questo punto dovreste essere capaci di realizzare almeno una pagina web con tutte le carte in regola per funzionare.
<HEAD> </HEAD>
Ho iniziato a scrivere questo manuale puntando quasi subito alla struttura di un sito, ora dovremmo sapere inserire del testo, delle immagini e dei link, a costruire praticamente un piccolo, semplice sito. Inizialmente scrissi di volere tralasciare i tag <head> e </head> (vedere la sezione Primi passi), perchè meritano un discorso a parte che è ora di affrontare. Accennai che contengono tutto quel codice che deve essere eseguito per primo, in questo caso: i metatag.
Cosa siano i metatag non è difficile da spiegare, ma essendo NetTarget specializzato anche e soprattutto su di essi, ho realizzato un altro manuale. Abbiate la pazienza di spostarvi ora da questa pagina per andare a studiare i metatags in un'altra e precisamente nella sezione
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
, ricordate che un sito è come un libro, diviso in capitoli e argomenti, prima di trasferirci un consiglio: la pagina che tratta i metatags, tratta anche i motori di ricerca, non siete nella pagina sbagliata, abbiate fiducia e continuate a studiare, arriverete facilmente ad acquisire il concetto del metatag, per ritornare in questa pagina, utilizzate il link "HTML". Andiamo al capitolo dei metatags.<BODY> </BODY>
Il testo, le immagini, i links e tutto ciò che non rappresenta un codice che deve essere eseguito subito, deve essere collocato tra i tags <body> e </body>. I suddetti tags dichiarano rispettivamente l'apertura e la chiusura del corpo della pagina e all'interno di essi è possibile inoltre configurare i parametri che determineranno l'estetica della pagina, come il colore dello sfondo della pagina, del testo, quindi la formattazione di esso, ecc...
Vediamo ora quali sono gli attributi utilizzabili al fine di migliorare l'estetica della pagina web:
Bgcolor
Specifica il colore di sfondo. Il colore di sfondo viene escluso qualora venga specificato al suo posto una immagine di sfondo (che utilizza tuttavia un altro attributo). Nell'esempio seguente lo sfondo viene impostato con "white" che restituisce il colore bianco, è possibile utilizzare anche il rispettivo valore esadecimale che restituisce il valore del bianco.
<HTML>
<HEAD>
</HEAD>
<BODY bgcolor="black">
</BODY>
</HTML>
________________________________________
Background
Imposta una immagine di sfondo che escluderà eventuali colori di sfondo impostati in precedenza (vedere bgcolor).
Nell'esempio corrente imposteremo una immagine di sfondo, fate attenzione alle immagini, utilizzate gli accorgimenti descritti nella sezione "Le immagini".
<HTML>
<HEAD>
</HEAD>
<BODY background="foto.jpeg">
</BODY>
</HTML>
________________________________________
Text
Specifica il colore del testo. Accetta anche i valori esadecimali dei colori.
<HTML>
<HEAD>
</HEAD>
<BODY text="black">
</BODY>
</HTML>
________________________________________
Link
Imposta il colore dei links da visitare. Accetta anche i valori esadecimali dei colori.
<HTML>
<HEAD>
</HEAD>
<BODY link="red">
</BODY>
</HTML>
________________________________________
Vlink
Imposta il colore dei links visitati:
<HTML>
<HEAD>
</HEAD>
<BODY vlink="brown">
</BODY>
</HTML>
Accetta anche i valori esadecimali dei colori.
________________________________________
Leftmargin
Specifica la distanza dal margine sinistro in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY leftmargin="10">
</BODY>
</HTML>
________________________________________
Rightmargin
Specifica la distanza dal margin destro in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY rightmargin="10">
</BODY>
</HTML>
________________________________________
Topmargin
Specifica la distanza dal margine superiore in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY topmargin="10">
</BODY>
</HTML>
________________________________________
Bottommargin
Specifica la distanza dal margine inferiore in pixel:
<HTML>
<HEAD>
</HEAD>
<BODY bottommargin="10">
</BODY>
</HTML>
Le tabelle
Se avete studiato con attenzione questo manuale, sarete ora in grado di costruire in maniera più professionale la vostra pagina web. Questo non vuol dire che siete in grado di sviluppare un sito con tutti gli accorgimenti per essere considerato un buon sito, avete ancora tanto da imparare. Abbiamo parlato di testo e di immagini, ma nel momento in cui deciderete di usufruire di entrambe le cose, vi accorgerete che il risultato non sarà esattamente ciò che desiderate, cioè un complesso armonico nella lettura e nella grafica, ma un insieme di frasi e immagini poste in maniera disordinata, difficile o faticoso da interpretare. Per porre rimedio a quanto detto si deve ricorrere alle tabelle.
Una tabella è una griglia composta da righe e colonne, perfettamente formattabile in tutti i suoi aspetti (colori, dimensioni, stile, ecc...), dentro la quale è possibile inserire in maniera perfettamente ordinata testo ed immagini. Io vi fornisco la teoria e del codice che volendo potrebbe essere utilizzabile, quello che non vi fornisco è l'esempio grafico delle tabelle, perchè sono convinto che dovrete essere voi ad ottenerle, magari copiando il codice, vi servirà oltretutto per imparare ad utilizzare il vostro editor html. Sotto un unico esempio di tabella composta da due righe e due colonne:
Ora vediamo come si realizza una tabella, il tag da utilizzare è <TABLE> e prevede almeno altri tre tags per essere utilizzabili: <TR> <TD> e l'attributo BORDER che si trovano annidati tra il codice che costituisce la tabella e che suddividono rispettivamente la tabella in righe e colonne, mentre BORDER specifica lo spessore del bordo della tabella da un valore minimo di 0 (zero)..
Vediamo sotto un esempio di codice che permette la realizzazione di una tabella:
<table border="1">
<tr>
<td> Contenuto della tabella </td>
</tr>
</table>
se volessimo creare una tabella con due celle, allora utilizzeremo i tags sopra descritti nel seguente modo:
<table border="1">
<tr>
<td> cella alta di sinistra </td><td> cella alta di destra </td>
</tr>
<tr>
<td> cella bassa di sinistra </td><td> cella bassa di destra </td>
</tr>
</table>
Quello che abbiamo visto è il codice per ottenere delle tabelle regolari, spesso capita però di avere bisogno di tabelle dalla struttura irregolare, come ad esempio quella che restituisce il codice che segue grazie all'attributo colspan che unisce due o più celle di una stessa riga, cambiando il valore da 2 a 3 e via dicendo:
<table border="1">
<tr>
<td> cella alta di sinistra </td><td> cella alta di destra </td>
</tr>
<tr>
<td colspan="2"> Due celle unite in basso </td>
</tr>
</table>
Sotto un altro esempio di tabella dalla struttura irregolare, questa volta ad essere unite saranno due celle di diverse righe, l'attributo utilizzato è rowspan e segue le regole di colspan:
<table border="1">
<tr>
<td rowspan="2"> Due celle unite in colonna </td><td> cella alta di destra </td>
</tr>
<tr>
<td> cella bassa di destra </td>
</tr>
</table>
Quello che segue sotto è il codice per ottenere diversi tipi di tabelle elaborate. Ricordate che potete utilizzare il codice, ma il mio consiglio è sempre quello di studiare, leggetelo ricordando tutto quello che abbiamo visto fino ad ora, vi accorgerete presto che riuscirete a capire a cosa serve il codice che avete davanti!
Codice di una tabella elaborata
<table border="1">
<tr>
<td colspan="3">testata della tabella (tre celle unite)</td>
</tr>
<tr>
<td>colonna di sinistra </td>
<td>colonna di centro </td>
<td>colonna di destra </td>
</tr>
<tr>
<td colspan="3" align="center">piede della tabella</td>
</tr>
</table>
Le tabelle possono essere modificabili in altri modi, ad esempio, se volessimo il bordo non visibile, basterà impostare border su 0 (zero) nel seguente modo:
BORDER="0"
Se invece i bordi della tabella devono essere visibili, ma con distanze diverse, allora dovremo ricorrere ad altri due attributi: cellspacing e cellpadding, rispettivamente controllano lo spazio da lasciare tra le singole celle (cellspacing) e quanto spazio lasciare fra il bordo e i dati contenuti all'interno della singola cella (cellpadding).
Sotto un esempio di tabella con inclusi i due nuovi attributi:
<table border="1" cellspacing="20" cellpadding="10">
<tr>
<td colspan="3">testata della tabella (tre celle unite)</td>
</tr>
<tr>
<td>colonna di sinistra </td>
<td>colonna di centro </td>
<td>colonna di destra </td>
</tr>
<tr>
<td colspan="3" align="center">piede della tabella</td>
</tr>
</table>
Questo è tutto quello che si deve sapere sulle tabelle. Ovviamente potrete costruirne voi di diverse ora che avete le nozioni esatte, ad esempio potrete colorarle e formattare anche il testo, ripeto, potrei fornirvi del codice di esempio, ma avete la teoria ed i singoli esempi.
I frames
Da ora in poi il corso si fa più complicato (ma non così tanto in fondo).Se non siete padroni di tutto quello che ho scritto in precedenza riguardo questo manuale, non sarete in grado di applicare la teoria che segue ora: i frames.
Cosa è un frame
Una pagina con frame è una pagina web che viene suddivisa in più aree indipendenti: i frames.
Cliccando su di un link contenuto in un frame, in genere la pagina a cui punta viene aperta in un altro frame.
Perchè un frame, pro e contro e alternativa
Perchè un frame è presto spiegato, perchè in questo modo si potrebbe sempre avere una barra di navigazione a portata di mouse, perchè si potrebbe decidere di rendere sempre visibile un banner o un bottone pubblicitario, perchè praticamente potrebbe ospitare qualsiasi cosa e tenerlo sempre visibile all'utente. Il contro (l'unico a parere mio e rimediabile), è rappresentato dai motori di ricerca i quali potrebbero restituire all'utente la pagina senza il frame (praticamente la pagina collegata) che magari non contiene il menu ed il link alla homepage impedendogli di risalire al sito nella sua integralità. Tuttavia questo inconveniente è rimediabile, io personalmente inserisco su ogni pagina del mio sito un banner contenente oltre all'indirizzo esatto, anche un collegamento ipertestuale al medesimo. L'alternativa è rappresentata da un sito strutturato in tabelle, sicuramente più semplice da realizzare.
Prima di programmare un frame
Dovete decidere se il frame deve essere laterale o superiore o inferiore, anche se potrete decidere per tutti. Presupponendo che il frame debba essere laterale sinistro, preparate un file con estensione .htm denominato magari framesinistro.htm. Fatto ciò preparatene un altro denominato ad esempio principale.htm, i nomi delle pagine sono del tutto soggettivi, ma ricordatevi di utilizzarli nel caso utilizzaste il mio codice di esempio e funzionante di questo manuale. Ora create una nuova pagina che dovete denominare index.htm.
A questo punto inizia la programmazione del frame:
sotto </head> di index.htm scriviamo il nuovo tag <FRAMESET> che da solo non serve a niente, deve infatti precedere rows (righe) e/o cols (colonne), che indicano rispettivamente se il frame deve essere superiore o inferiore (rows) o laterale (cols).
Supponendo di voler realizzare una pagina con un frame laterale sinistro, allora dovremo scrivere subito sotto </head> il seguente codice:
<FRAMESET COLS="25, *">
</frameset>
dove <frameset> indica al browser che deve visualizzare un frame, dove cols indica che si tratta di un frame verticale dalla larghezza del 25% della pagina originale (una colonna, in pratica), dove * indica che il resto dello spazio deve essere occupato dalla pagina di destinazione.
Dopo avere stabilito le dimensioni del frame, si devono richiamare i file creati in precedenza nel modo seguente:
<frame name="framesinistro" src="framesinistro.htm">
<frame name="principale" src="principale.htm">
name è un attributo necessario in quanto permette di identificare il frame nel quale richiamare la pagina tramite src (source).
Salvate ora la pagina come index.htm e provatela.
La lezione sui frame non è finita, se avete strutturato una pagina in tal modo, molto probabilmente avrete una barra di navigazione così come dovrete decidere in quale finestra visualizzare le altre pagine che compongono il sito. Non potete utilizzare un semplice collegamento ipertestuale o vedrete la pagina collegata direttamente nel frame che invece contiene il menu. Per rimediare a questo inconveniente dovrete utilizzare un comando molto potente: target (bersaglio).
Supponendo che abbiate creato delle pagine nominate come quelle di questo esempio, vi basterà scrivere un codice simile al seguente per collegare tutte le pagine che volete alla principale:
<A HREF="nomepagina.html" target="principale">
Adesso avete davvero tutte le nozioni per poter realizzare un sito di successo. Da ora in avanti proseguirò con una lezione davvero interessante e se avrete studiato con attenzione, la capirete senza fatica.
In particolare su Target
Altri utilizzi di target sono:
1. target="_top" Eliminazione del frameset con l'utilizzo della pagina intera per la visualizzazione dei dati.
Esempio
<A HREF="nomepagina.html" target="_top">
2. target="_blank" Apre una nuova finestra del browser nella quale verranno visualizzati i dati.
Esempio
<A HREF="nomepagina.html" target="_blank">
3. target="_self" La pagina puntata viene visualizzata sullo stesso frame che ospita il link.
Esempio
<A HREF="nomepagina.html" target="_Self">
Proprietà dei frames
I bordi di un frame possono rovinare l'estetica di una pagina. Per ovviare il problema si deve utilizzare FRAMEBORDER impostato a 0 (zero) nel seguente modo:
<FRAMESET FRAMEBORDER="0" COLS="25, *">
Eliminando il bordo è opportuno assicurarsi che i frames siano uniti l'uno all'altro tramite l'attributo FRAMESPACING come segue:
<FRAMESET FRAMEBORDER="0" FRAMESPACING="0" COLS="25, *">
Si raccomanda di utilizzare FRAMEBORDER e FRAMESPACING specialmente se i frames contengono colori o immagini di sfondo per renderli graficamente professionali.
L'attributo NORESIZE impedisce che il frame venga ridimensionato, altrimenti puntandone il bordo con il mouse, esso potrà essere "trascinato", rovinando l'estetica del sito. Sotto l'utilizzo dell'attributo NORESIZE.
<FRAMESET FRAMEBORDER="0" COLS="25, *">
<FRAMENAME="framesinistro" src="framesinistro.htm" NORESIZE>
Potreste anche impedire che il frame venga spostato in verticale, tramite la barra di spostamento, ma prima di decidere, assicuratevi che il vostro sito sia perfettamente visibile a bassa risoluzione, altrimenti potrebbe essere impossibile per molti vostri visitatori visualizzare l'intera barra del menu. L'attributo da utilizzare per disabilitare la barra di spostamento di un frame è SCROLLING utilizzato nel modo seguente:
<FRAMESET FRAMEBORDER="0" COLS="25, *">
<FRAMENAME="framesinistro" src="framesinistro.htm" NORESIZE SCROLLING="NO">
Altri valori possibili di SCROLLING sono: YES, AUTO.
Inserendo YES, la barra di scorrimento sarà sempre presente, inserendo AUTO le barre si visualizzeranno solo in caso di effettiva necessità.
Per una guida a questo tag sul web andare su Preferiti di
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
e andare su "Zibaldone"I moduli
I moduli (o forms) sono costituiti da elementi come caselle di testo o menu a tendina associati a pulsanti e di solito servono per interagire con i nostri visitatori, visto la possibilità di inviare dati tramite essi. Le potenzialità dei moduli sono infinite, si possono utilizzare da soli o con java scripts, vi si possono eseguire calcoli matematici e in pratica dipende dal programmatore a renderli sempre più funzionali. Vediamo ora come dotare il nostro sito (presuppongo che abbiate creato almeno la pagina principale ormai...) di un form. Il comando da utilizzare è
<form>
da solo non serve a niente, ha bisogno degli attributi sotto descritti:
Action
Serve ad indirizzare il modulo al server (per inviare ad esempio dei messaggi al webmaster del sito che ospita il form).
Metod
Ammette due metodi: Post e Get, i quali servono per inviare i dati scritti nel form
Name
Il nome del modulo, è facoltativo in html, obbligatorio in javascript.
Proviamo ora a vedere come iniziare a realizzare il form per inviare un messaggio tramite una casella mail ed un tasto Invia. Di seguito il codice, come sempre, editor html e provate:
<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
</form>
Il campo dentro il quale scrivere la e-mail si ottiene con <input> associato ad alcuni parametri quali type="text" e name="tuo nome" in modo tale da raccogliere i dati e spedirli. Ovviamente il modulo non è ancora funzionante per il semplice motivo che manca un tasto di invio ed una destinazione per i dati da inviare. Provvediamo a realizzare un tasto di invio con il comando input e submit come vedete nel codice a seguire, per scrivere sul pulsante utilizzeremo value, esattamente come segue:
<form>
Inserisci il tuo nome: <input type="Text" name="tuo nome">
<input type="Submit" value="invia">
</form>
Ora che avete provato il codice sul vostro editor, vi sarete accorti di avere una casella di testo e un pulsante di invio. Manca tuttavia qualcosa: l'indirizzo al quale inviare il messaggio, cioè il nostro. Abbiamo due alternative, potremmo scegliere di farci inviare il messaggio tramite i CGI, ma spesso i server che mettono a disposizione gratuitamente dello spazio non mettono a disposizione i CGI, allora utilizziamo la nostra e-mail, magari creata allo scopo. Di seguito il codice completo per rendere funzionante il modulo utilizzando un indirizzo di posta elettronica:
<form method="post" action="mailto:tuoindirizzo@qui.it" enctype="text/plain"
name="mio_form">
Il tuo nome: <input type="Text" name="tuo nome">
Il tuo giudizio: <input type="Text" name="giudizio">
<input type="Submit" value="invia">
</form>
Ora non vi resta che provare il codice e quindi studiarlo.
Fonte: Asbafo.net
Ultima modifica da un moderatore:
