I riassunti , gli appunti i testi contenuti nel nostro sito sono messi a disposizione gratuitamente con finalità illustrative didattiche, scientifiche, a carattere sociale, civile e culturale a tutti i possibili interessati secondo il concetto del fair use e con l' obiettivo del rispetto della direttiva europea 2001/29/CE e dell' art. 70 della legge 633/1941 sul diritto d'autore
Le informazioni di medicina e salute contenute nel sito sono di natura generale ed a scopo puramente divulgativo e per questo motivo non possono sostituire in alcun caso il consiglio di un medico (ovvero un soggetto abilitato legalmente alla professione).
Una rete è un sistema di interconnessione non gerarchico tra diverse unità:nel caso dei computer la rete indica l’insieme delle strutture Hardware (cavi, fibre ottiche, satelliti) e Software (protocolli di comunicazione) che permettono a computer situati in luoghi diversi di collegarsi e di comunicare.
La nascita di reti a livello informatico, avvenuta in America alla fine degli anni ’60, ha risposto a precise e complesse esigenze:
condividere risorse e informazioni in modo da moltiplicare le potenzialità dei singoli calcolatori e rendere flessibile la trasmissione dei dati, attraverso una struttura “anarchica” di collegamento tra nodi.
A permettere la nascita di una rete a livello mondiale è stata la creazione di un comune protocollo di comunicazione, che ha reso compatibile la trasmissione di dati tra strutture Hardware e Software diverse.
Questo protocollo, chiamato TCP/IP (Transfer Control Protocol/Internet Protocol) utilizza un sistema, definito a commutazione di pacchetti:
l’informazione da trasmettere, numeri, testo o altro, viene scomposta in piccoli pacchetti, ognuno dei quali contiene una parte del messaggio più l’etichetta della propria destinazione;
In rete agiscono dispositivi speciali, detti reuters, che leggono le etichette dei pacchetti e tengono sotto controllo lo stato della rete in modo da spedire ogni pacchetto a destinazione evitando gli ingorghi e i collegamenti interrotti;
In questo modo i singoli frammenti di informazione possono essere smistati su percorsi differenti, nel modo più rapido ed efficace, per poi essere ricompattati una volta giunti alla meta.
Internet non è un’unica rete, ma una rete di reti collegate da computer detti “gateways” (accessi);
E’ paragonata a un’infrastruttura stradale, poiché è costituita da un sistema di reti portanti, internazionali e ad alta velocità, a cui sono connesse reti regionali e reti locali con potenza e velocità minori.
Internet permette di condividere diversi tipi di informazioni e rende disponibile una vasta gamma di servizi.
Il servizio Internet più diffuso e conosciuto è il “World Wide Web” letteralmente (ragnatela grande come il mondo), che permette di consultare documenti multimediali, chiamati “Pagine Web”, pubblicati da società o singoli utenti, e pubblicare a propria volta nuove pagine;
Attraverso apposite funzioni inserite nelle pagine Web, inoltre è possibile richiedere o fornire informazioni, effettuare acquisti, svolgere operazioni di vario genere, per esempio prenotare un viaggio aereo o consultare il proprio conto corrente.
Fino al 1990 Internet era conosciuta quasi esclusivamente all’interno dei centri di ricerca e delle università;
La grande svolta nel sistema di comunicazione in rete, che ne ha decretato la diffusione presso il grande pubblico, è stata l’invenzione, da parte del CERN di Ginevra, del World Wide Web.
Presso il CERN, il laboratorio per la fisica delle particelle di Ginevra, ha sede il World Wide Web Consortium, l’organizzazione che ha il compito di definire i linguaggi e i protocolli che costituiscono il Web (HTTP, HTML, ecc.) e stabilire le regole relative all’uso del WWW;
E’ possibile visitare il sito del WWW Consortium all’indirizzo http://www.w3.org.
Il World Wide Web ha permesso di scambiare non solo dati in forma testuale ma anche immagini, suoni e filmati, attraverso documenti sfogliabili senza un ordine prestabilito.
La ricchezza di informazioni disponibili ha decretato il successo del World Wide Web;
IL WWW contiene milioni di documenti, le pagine Web appunto, molti dei quali coinvolgono diversi mezzi di comunicazione: testi, immagini, suoni e filmati;
è questa la ragione per cui i documenti Web sono definiti multimediali o ipertestuali.
L’altra ragione della popolarità del Web è stata la notevole facilità di consultazione;
L’interesse per Internet si è diffuso grazie alla realizzazione di Software che hanno reso semplice e piacevole la lettura delle diverse informazioni presenti in rete, i BROWSER, che permettono di visualizzare le pagine Web e “sfogliarle” attraverso i collegamenti ipertestuali.
Poiché le pagine Web sono scritte in linguaggio HTML, il Browser in pratica permette di interpretare il codice sorgente HTML e visualizzare gli elementi costitutivi delle pagine (testi, immagini, animazioni, suoni,filmati).
I Browser più famosi sono senza dubbio “Internet Explorer” e “Netscape”;
Netscape è stato il programma per la navigazione più usato all’inizio dell’era Internet;
In seguito Microsoft è riuscita a conquistare il primato nel settore fornendo “Internet Explorer” insieme al ‘sistema operativo’ Windows 95 e Windows 98.
Entrambi i programmi sono distribuiti gratuitamente e possono essere scaricati dai rispettivi siti Web;
La versione più recente di Netscape (attualmente la 4.72) può essere prelevata dalle pagine http://home.netscape.com/download/;
E’ possibile scaricare Navigator, cioè il browser vero e proprio, oppure tutto il pacchetto Netscape Communicator, che comprende, oltre al browser, programmi per la posta elettronica, la lettura di news e la gestione degli altri servizi disponibili in rete.
Presso il sito Microsoft, all’indirizzo:
http://www.microsoft.com/downloads/search.asp?
invece, è disponibile l’ultima versione di Internet Explorer.
HTML (Hyper Text Markup Language) letteralmente linguaggio di marcatura degli ipertesti non è un linguaggio di programmazione in quanto non opera con istruzioni e operazioni da eseguire su dati esterni, tuttavia è un linguaggio ormai consolidato per la realizzazione delle pagine web da pubblicare in rete.
Gli ipertesti sono documenti che rispondono a determinati requisiti di costruzione strutturata e che vengono creati in modo tale da poter offrire un collegamento tra un punto del testo ed altri documenti o altri punti dello stesso documento , formando un insieme costruito logicamente.
Nel caso del Web per realizzare ipertesti si utilizza il linguaggio HTLM che prevede l’inserimento di istruzioni all’interno del testo, allo scopo di trasformare il documento di partenza in ipertesto.
Il web non è che la sistemazione intelligente delle capacità e della praticità d’utilizzo degli ipertesti all’interno del gigantesco sistema informativo chiamato INTERNET che realizza l’interconnessione tra i vari punti di chiamata e punti di arrivo nella rete.
La parola Internet è composta da inter (“fra”) e da net (“rete”, in inglese) e designa un’enorme rete di computer collegati e in grado di dialogare fra di loro, anche se fisicamente dislocati in varie parti del globo.
Il Web si è sviluppato a dismisura per la sua capacità di visualizzare non solo immagini unite al testo ma anche per la possibilità di presentazione di cataloghi fotografici, esecuzione di file musicali, filmati e disegni di animazione.
Il protocollo di trasmissione delle informazioni ipertestuali attraverso Internet è l’HTTP, sigla che sta per HyperText Transfer Protocol. Attraverso questo protocollo i documenti vengono trasferiti in rete dal Server (il computer che custodisce i documenti) al programma lettore il quale li visualizza nelle proprie finestre secondo l’interpretazione di un determinato linguaggio.
C’è inoltre la possibilità di fare in modo che il server, mediante appositi programmi, trasferisca anche i file che normalmente vengono trasferiti da altre applicazioni e secondo altri protocolli, creando un’interfaccia che renda semplice la navigazione anche all’interno di queste ulteriori fonti di informazione. Queste uscite si chiamano Gateway (accessi)
Con il termine Browser indichiamo il programma che utilizziamo per l’accesso al Web. E’ un Client nel senso che riceve informazioni dal server.
E’ detto Browser perchè il suo compito è di visualizzare, sfogliare i documenti serviti dall’archivio remoto facendoli apparire nella propria finestra nella fase di rendering.
I browser più utilizzati sino Netscape Navigator e MS Internet Explorer.
Per rendere consultabili pubblicamente le proprie pagine web è indispensabile l’utilizzo di un determinato software che abbia la funzione di server, che cioè serva i nostri documenti al programma client. Nell’architettura client-server il programma client (normalmente residente nella macchina dell’utente) comunica con il programma server residente di solito in un’altra macchina, mandando una segnalazione di richiesta di servizi;il server risponde inviando i servizi richiesti. Quindi possono esserci molti client che comunicano anche contemporaneamente con un solo server.
Il protocollo è un insieme di regole e convenzioni che presiedono allo scambio di informazioni tra calcolatori comunicanti tramite qualche tipologia di rete.. I protocolli consistono per lo più in un complesso sistema di procedure di comunicazione strutturale e suddivise in vari livelli. Ciascun livello esegue una funzione specifica come per esempio, assicurare il collegamento, instradare dati, codificare e decodificare i dati, controllare la sicurezza dei dati. Per questo un protocollo definisce regole per la trasmissione dei dati tanto a livello hardware che a livello software.
U.R.L. ( Uniform Resourse Locators) descrivono la localizzazione di una risorsa e il protocollo per accedervi e sono usualmente intesi come l’indirizzo di un documento in Web. E’ formato dalle seguenti parti convenzionali:
Esempio
http:://unipa.Sicilia.it/immagine.htm
La sigla FTP (File Transfer Protocol) indica il metodo di trasmissione utilizzato per il trasferimento di file (generalmente binari ) in rete.
Esempio : se volessimo trasferire una copia del file carlo.zip residente nella directory applicazioni nella directory franco l’indirizzo da inserire si scrive:
ftp://applicazioni/franco/carlo.zip
Dopo aver inserito la U.R.L. o Location nella finestra del vostro browser, il programma comincia a visualizzare schermate progressivamente dall’alto verso il basso. Sono quelle che comunemente si definiscono pagine Web e sono documenti in formato testo che vengono ricevuti dal browser, inviati e codificati secondo un particolare protocollo dal server, che può essere una macchina localizzata in un punto qualsiasi del globo e con la quale si comunica attraverso la rete Queste pagine elettroniche sono depositate nelle memorie degli archivi di università o istituzioni principalmente senza fini di lucro, ma sono pubblicate in misura sempre crescente anche da altre organizzazioni allo scopo di rendere disponibili informazioni di tipo commerciale, educativo, politico, turistico etc.
In questo paragrafo si sviluppano i punti centrali che riguardano molti aspetti pratici attraverso la definizione di tutte le tappe da seguire nella creazione delle pagine Web
La prima cosa da fare è stabilire quale tipo di servizio si desidera offrire in rete. Infatti in relazione a scopi diversi ci possono essere modi di procedere diversi.
Notevole importanza riveste inoltre la costruzione dei collegamenti tra le varie pagine che compongono il prodotto Web, cioè la struttura da dare ai documenti.
Esistono tre tipi di struttura:
In questo modello i documenti si dipartono come rami di un unico tronco, che è il documento di partenza, con la possibilità di ulteriori sottoramificazioni. In pratica una pagina iniziale (Home page) illustra i temi principali costituendo una sorta di presentazione o di indice degli argomenti.
Un editor, altro non è che uno strumento che ci consente di scrivere in modo semplice e veloce righe di codice html; il codice che i browser di navigazione, qualunque essi siano, riconoscono ed interpretano.
Si potrebbe paragonarlo ad un programma per videoscrittura, anzi sono moltissime le similitudini, con la sola differenza che il testo scritto da questi editors è formattato nel modo giusto per dare vita a pagine di ipertesto; da qui il nome HTML: Hyper Text Markup Language
Gli editors si dividono sostanzialmente in due categorie:
Si tratta di programmi che propongono modifiche dirette sul codice HTML puro con possibilità di preview del risultato. Per facilitare la scrittura del codice mettono a disposizione comandi preconfezionati attivabili con semplici click. L'utilità maggiore di questi strumenti è la padronanza del codice HTML puro che riescono a comunicare agli utilizzatori. Il difetto maggiore è nell'apprendimento più difficile rispetto agli editor WYSIWYG.
L'acronimo sopraindicato sta per: What You See Is What You Get, ed italianizzando significa che ciò che si vede sullo schermo è ciò che si ottiene in un browser Web. In altre parole questi editor non visualizzano il codice HTML ma esclusivamente gli oggetti, le immagini ed il testo. In questo modo lo sviluppatore non si trova a lavorare su codice HTML ma sulla pagina così come verrà visualizzata dal browser: spostando oggetti con il semplice trascinamento del mouse, sfruttando layout predefiniti ecc.Il vantaggio di questo tipo di editor è evidente: lo sforzo di comprensione delle specifiche HTML è ridotto al minimo e il tempo di apprendimento è brevissimo. Questo tipo di editor (un esempio concreto è Front Page) non dà la possibilità di comprendere l'HTML e personalizzarne l'uso. Così facendo si creano siti fotocopia con un layout identico agli altri e, in presenza di errori che l'editor non riesce a risolvere, di non riuscire ad andare oltre ciò che il programma prevede. Questa dispensa è concepita per far comprendere i rudimenti dell'HTML puro. Comprese le basi dell'HTML potrai scegliere se usare editor WYSIWYG o editor testuali, in entrambi i casi avrai consapevolezza dei limiti e delle potenzialità del sistema, potendo usare meglio tutti gli strumenti che il mercato mette a tua disposizione.Alcuni consigli utili prima di iniziare:
Noi useremo il blocco note. Per chi non lo sapesse, lo si attiva (in Windows 95, 98 o 2000) cliccando su "Start" (Win 98) o su "menù avvio" (Win 95), selezionando quindi "Programmi", quindi "accessori" e infine "blocco note".
Ciò che differenzia una pagina Html da una qualsiasi altra pagina di testo è, oltre all'estensione "Html" o "Htm", il contenuto.
Una pagina Html inizia con "<Html>" e termina con "</Html>". Ecco quindi come si
presenta il vostro blocco note:
Il testo contenuto fra "<>" si chiama tag. I tag vanno quasi sempre a coppie, e danno delle informazioni su quello che sta scritto in mezzo a loro. Il secondo tag, o tag di chiusura, riprende quello che c'è scritto nel primo anteponendo "/". In questo caso i tag che abbiamo usato indicano che quanto è compreso fra loro è una pagina Html.
Nel linguaggio HTML sono state diffuse le specificazioni nelle quali si definiscono le generalità sul linguaggio e sulle sue componenti. Al momento le specificazioni sono tre e riguardano diversi livelli di evoluzione del linguaggio. I diversi livelli del linguaggio HTML si possono schematizzare nel seguente modo:
Livello 0 Utilizzando istruzioni di questo livello nei propri documenti si ha la sicurezza sulla visualizzazione a prescindere dal server, browser, schermo etc.
Livello 1 Include immagini e l’evidenziazione del testo
Livello 2 Riguarda principalmente la rappresentazione dei moduli (form)
Livello 3 Riguarda principalmente la costruzione di tabelle, formule matematiche e altro
Le istruzioni vengono impartite attraverso i simboli:
Il loro contenuto è definito Nome dell’istruzione o Elemento.
Le istruzioni vengono date in modo tale da racchiudere il testo,cioè il testo deve essere preceduto dall’istruzione iniziale e seguito da quella finale.
Vediamo un esempio:
<B> esempio di testo in grassetto </B>
Le quali sono composte dai simboli:
Le istruzioni sono formate da diversi elementi interni che ne definiscono la natura e il significato:
Vediamo un esempio:
<IMG SRC = ”casa.jpg”>
dove:
In questo caso si vuole inserire una immagine (casa.jpg) all’interno del documento. L’istruzione è <IMG>, abbreviazione di IMAGE, l’attributo è SRC, abbreviativo di SOURCE (sorgente) e il suo valore compreso tra virgolette è il nome del file grafico, ovvero casa.jpg.
E’ possibile anche nidificare le istruzioni del documento, cioè si può inserire più di un’istruzione in relazione a uno stesso testo.
Ecco un esempio:
Esempio di un testo con <B><I>istruzioni nidificate </I></B>
In questo esempio ho nidificato le istruzioni <B> (grassetto) e <I> (corsivo) forzando il browser a rendere l’espressione istruzioni nidificate in grassetto e corsivo.
Caratteri speciali
I caratteri in questione sono: < > &.
& si usa per indicare un riferimento di entità o carattere;
< segnala l’inizio di un’istruzione;
> segnala la chiusura dell’istruzione.
Carattere |
Rif. Di carattere |
Rif. Di entità |
< |
< |
< |
> |
> |
> |
& |
& |
& |
Anche i commenti hanno importanza. Se volete segnalare qualcosa a chi studia il vostro codice HTML usate i commenti. Un commento si fa così::
<!-- il vostro commento -->
Realizzarlo con una grafica colorata e accattivante.
Renderlo “ipermediale” grazie all’utilizzo di Link che suddividono il documento stesso in parti diverse, in modo da costruire una sorta di “rete” tra le informazioni contenute.
Costruire la pagina in uno spazio il più possibile ristretto, in modo che tutte le informazioni siano a portata di mano.
lingguaggio html
La Sintassi Di Html
I Tag Base Di Html
Acronimo di Hyper Text Markup Language, che in italiano significa letteralmente linguaggio di marcatura degli ipertesti, tecnicamente parlando non può essere definito un linguaggio di programmazione.
Un documento HTML non può essere chiamato programma, dato che un programma è normalmente definito come un insieme di istruzioni e operazioni da eseguire su dati esterni (che di solito prendono il nome di ‘INPUT’).
Anche se non si tratta di un linguaggio di programmazione in sé per sé, HTML fornisce controlli di struttura e di layout per gestire l’aspetto di un documento oltre ai meccanismi di collegamento necessari a fornire capacità ipertestuali.
HTML è il “linguaggio” ormai consolidato per la realizzazione delle pagine Web da pubblicare in rete.
I sistemi di elaborazione di testi normalmente richiedono che il testo del documento da elaborare sia inframmezzato da ulteriori informazioni;
Queste informazioni aggiunte, chiamate “marcatori” (TAG), hanno due scopi:
Strumento essenziale per la registrazione del codice sorgente è un semplice editor di testi, ad esempio “Blocco Note” o “WordPad” di Windows, salvando il file in modalità Solo Testo e assegnandogli l’estensione .html.
Per informazioni sempre più aggiornate su HTML, consultare il sito Web del World Wide Web Consortium, all’indirizzo: www.w3.org/
La scrittura di un codice sorgente in HTML impone delle regole.
La sintassi di un comando generico in HTML è:
<NomeComando Attributo1=Valore1 Attributo2=Valore2>
Testo desiderato
</NomeComando>
Gli attributi, se presenti, definiscono alcune caratteristiche specifiche di un dato comando.
Tipo di documento (document type)
<!DOCTYPE>
Unico attributo richiesto è:
HTML PUBLIC “nome versione”
Questo attributo deve contenere un nome di versione corretto e completo di HTML;
Una lista di tali nomi è disponibile all’indirizzo:
www.webtechs.com/html-tk/src/lib/catalog
<!DOCTYPE> è un tag individuale, non può essere usato all’interno di altri tag HTML, deve essere il primo elemento in un qualsiasi documento HTML, ed inoltre deve apparire prima del tag <HTML>.
Commenti
<!-- ……….. à
Indica un commento, il Browser ignora il testo che si trova fra i due elementi.
Documento HTML (HTML Document)
<HTML> ………. </HTML>
Racchiudono un intero documento HTML in qualità di livello più esterno della struttura del documento stesso.
Ogni codice sorgente HTML viene reso riconoscibile al Browser dal comando di apertura:
tutti i documenti redatti in questo linguaggio si aprono con il comando:
<HTML>
e si chiudono con il comando:
</HTML>
Intestazione del Documento (document head block)
<HEAD> ………. </HEAD>
Definisce informazioni su un documento HTML, incluso ‘titolo’, ‘metainformazioni’, puntatore alla pagina successiva e collegamenti ad altri documenti HTML.
Titolo del Documento (document title)
<TITLE> ………. </TITLE>
Delimita il titolo di un documento HTML, che normalmente appare nella barra del titolo, nella finestra del Browser;
Il titolo predefinito, se non ne viene specificato uno, è il nome del file HTML.
Metainformazioni (meta-information)
<META ………. >
Questo TAG viene usato con l’elemento <HEAD> per incorporare metainformazioni relative al documento (ovvero informazioni sulle informazioni presenti nel documento);
Tali informazioni possono essere estratte dai server/client ed essere usate per identificare, indicizzare e catalogare i documenti.;
I motori di ricerca rappresentano una risorsa indispensabile per chi cerca informazioni sulla rete;
Figurare all’interno di tali motori di ricerca è fondamentale per chi crea pagine Web e vuole farsi conoscere;
E’ necessario innanzitutto segnalare le proprie pagine a questi motori di ricerca, e ciò viene fatto attraverso piccoli Form presenti sulle pagine Web sotto la scritta “Add your site”.
Fondamentale a questo scopo risultano i META tag, stringhe di codice che figurano in testa al documento, tra i comandi <HEAD> </HEAD> e che vengono, per prime, lette dai motori di ricerca.
Esempi di META tag:
Le “keywords” (parole chiave) sono I termini che, sinteticamente, descrivono il contenuto di una pagina Web;
<META NAME=”keywords”
CONTENT=”internet,books,windows,intranet>
La virgola divide i termini gli uni dagli altri, le frasi non limitate a singoli vocaboli vanno scritte senza virgola perché il motore di ricerca le trovi in quella stessa forma.
Altri META tag riguardano l’autore della pagina Web:
<META NAME=”author” CONTENT=”nome e cognome”>
Il titolo che apparirà alla fine della ricerca:
<META NAME=”description”
CONTENT=”La home page di pippo”>
Il nome dell’editor con cui il documento HTML è stato generato:
<META NAME=”generator”
CONTENT=”Blocco note di Win98”>
Corpo del documento (document body)
<BODY> ………. </BODY>
Identifica il corpo di un documento HTML e ne racchiude completamente il contenuto.
Attributi di ‘BODY’:
BGCOLOR=”(#RRGGBB|nomecolore”
Imposta il colore di sfondo, la pagina Web con uno sfondo adeguatamente colorato è sicuramente accattivante e invita alla navigazione.
I colori con cui è possibile colorare lo sfondo di una pagina Web sono sostanzialmente 16:
Black, Maroon, Green, Navy, Silver, Red, Lime, Blue, Gray, Purple,
Olive, Teal, White, Fuchsia, Yellow, Aqua.
In realtà, I colori con cui è possibile colorare lo sfondo della pagina Web, ma anche i caratteri di testo, sono molti di più rispetto a quelli elencati;
L’inconveniente è che, essendo molto numerosi, non è stato possibile assegnare loro un nome ‘comprensibile’;
Per ottenere tutte le combinazioni previste si è deciso quindi di utilizzare un codice a 6 cifre esadecimali;
Questi codici individuano quello che viene chiamato colore RGB;
La sigla ‘RGB’ altro non è che l’abbreviazione dei tre colori primari in lingua inglese:
Red (rosso), Green (verde), e Blue (blu).
Al posto dei simboli “RRGGBB” si impostano i valori di RGB che permettono di generare il colore;
La combinazione delle coppie di cifre esadecimali rappresenta il colore nella sua composizione di Rosso, Blu e Verde;
In particolare ogni coppia di cifre esadecimali rappresenta la percentuale, come numero esadecimale da 00 a FF, di composizione del colore in funzione del Verde, Rosso, Blu.
La gestione dei colori con i numeri esadecimali risulta particolarmente difficoltosa;
Per questo motivo è consigliabile consultare opportune tabelle dove sono mostrate le 256 combinazioni (dei milioni rappresentabili) di colore che il Browser è in grado di visualizzare con il relativo codice RGB.
BACKGROUND=”nomeimmagine”
Permette l’inserimento di un’immagine come sfondo.
Nella costruzione grafica delle pagine Web è possibile applicare uno sfondo di tipo grafico;
Innanzi tutto occorre un’immagine che si presti a essere utilizzata come sfondo;
Gli sfondi in genere sono immagini dalle dimensioni contenute (al massimo 150x150 pixel), in formato GIF o JPG;
Le immagini che vengono utilizzate come sfondo sono cicliche, poiché vengono visualizzate una accanto all’altra fino a riempire completamente lo sfondo;
I requisiti di un’immagine da trasformare in un buono sfondo sono sostanzialmente tre:
Per far apparire l’immagine scelta come background (termine inglese che significa ‘sfondo’), è necessario sostituire a ‘nomeimmagine’ il nome dell’immagine comprensivo dell’estensione (per esempio, swirlies.gif).
E’ importante che, nell’utilizzo di immagini di sfondo, i colori del testo siano impostati in maniera tale da risultare leggibili.
TEXT=”(#RRGGBB|nomecolore”
Imposta il colore per i caratteri che compongono il testo.
LINK=”(#RRGGBB|nomecolore)”
Imposta il colore dei link degli ipertesti prima che vi si clicchi sopra.
ALINK=”(#RRGGBB|nomecolore)”
Imposta il colore del link attivo (correntemente selezionato).
VLINK=”(#RRGGBB|nomecolore)”
Imposta il colore del link già visitato.
I link degli ipertesti sono generalmente ‘Blu’, diventano ‘Rossi’ quando sono attivi e ‘Violetti’ quando sono già stati visitati;
Informazioni sull’autore (address)
<ADDRESS> ………. </ADDRESS>
Racchiude informazioni di riferimento sul documento HTML e sul suo autore;
E’ qui che di solito si trova nome e indirizzo dell’autore, modalità per contattarlo e altre informazioni analoghe.
Esempio di un codice sorgente:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0//EN”>
<HTML>
<!-- Commento à
<HEAD>
<META NAME=”keywords” CONTENT=”internet,books,windows,intranet>
<META NAME=”author” CONTENT=”nome e cognome”>
<META NAME=”description” CONTENT=”La home page di pippo”>
<META NAME=”generator” CONTENT=”Blocco note di Win98”>
<TITLE> Nome Della Pagina </TITLE>
</HEAD>
<BODY>
<ADDRESS>
La Barbera c/o ANFE<BR>
E-mail: giulaba@tiscalinet.it
</ADDRESS>
………….
………….
</BODY>
</HTML>
Salva questo documento in una nuova cartella con la procedura “salva con nome” dell’editor che utilizzi, assegnandogli un nome (esempio00 con estensione .html)
Come è possibile verificare, facendola visualizzare dal browser, la pagina risulterà completamente vuota, ma è comunque un documento HTML in piena regola.
Abbreviazione (abbreviation) Testo in grassetto (bold text)
Font di base (base font) Testo grande (big text)
Stile per citazioni (quote style) Interruzione di riga (break)
Testo centrato (centered text) Marcatore di citazioni (citation markup)
Testo cancellato (deleted text) Definizione di un termine (definition)
Divisione logica (logica division) Enfasi (emphasis)
Aspetto del font (font) Livello di intestazione (heading level)
Filetto orizzontale (horizontal rule) Testo corsivo (italic text)
Testo inserito (inserted text) Paragrafo (paragraph)
Testo preformattato (preformatted text) Barrato (strikethough)
Testo piccolo (small text) Enfasi marcata (strong emphasis)
Pedice (subscript) Apice (superscript)
Testo stile telescrivente (teletype text) Testo sottolineato (underlined text)
<ABBR> ………. </ABBR> or <ACRONYM> ………. </ACRONYM>
Il testo delimitato da questo tag viene contrassegnato come abbreviazione.
Attributi:
TITLE=”testo”
Fornisce la versione espansa di un’abbreviazione e appare in una casella a comparsa quando il puntatore del mouse si trova sopra l’acronimo.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio01</TITLE>
</HEAD>
<BODY>
Il <ACRONYM TITLE="World Wide Web Consortium">W3C</ACRONYM>
è responsabile di sorvegliare il processo di
sviluppo dell'HTML standard.
</BODY>
</HTML>
<B> ………. </B>
Indica che il testo delimitato è in grassetto, il suo uso è suggerito per dare risalto a determinate parole o frasi nel testo.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio02</TITLE>
</HEAD>
<BODY>
Lo studio dei dati forniti dai più frequentati Search Engine ha dimostrato come il termine più ricercato sia "sex", e come <B> l'80% degli utenti non consulta oltre la seconda pagina di ogni ricerca effettuata. </B>
</BODY>
</HTML>
<BASEFONT ………>
Imposta i parametri per il Font di base da usare come font predefinito per qualsiasi testo che non sia formattato in altro modo.
Attributi:
Definisce la dimensione dei font di base;
Il valore di “numero” può essere compreso tra 1 e 7 (inclusi), dove 7 corrisponde alla dimensione più grande.
Specifica il carattere per il font di base.
COLOR=”(#RRGGBB|nomecolore)”
Definisce il colore del font di base.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio03</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=3 FACE="ARIAL" COLOR="red">
TAG: BASEFONT
<P>
L'attributo SIZE è settato 3 <BR>
L'attributo FACE è dicharato 'ARIAL' <BR>
L'attributo COLOR è definito 'RED'
</P>
</BODY>
</HTML>
<BIG> ………. </BIG>
Ingrandisce il font del testo di una unità rispetto alla dimensione impostata da <BASEFONT>.
Non ha attributi.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio04</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=3 FACE="ARIAL" COLOR="red">
TAG: BASEFONT
<P>
L'attributo SIZE è settato 3 <BR>
L'attributo FACE è dicharato 'ARIAL' <BR>
L'attributo COLOR è definito 'RED'
</P>
<P>
<BIG>
Effetto del tag 'BIG'
</BIG>
</BODY>
</HTML>
<BLOCKQUOTE> ………. </BLOCKQUOTE>
Caratterizza blocchi di materiale citato da fonti esterne, pubblicazioni o altro;
Quando viene inserita una citazione derivante da una fonte esterna (più lunga di una riga), è opportuno usare <BLOCKQUOTE> per mettere in evidenza il testo aumentando il margine sinistro e destro;
E’ consigliabile segnalare sempre le ‘fonti esterne’.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio05</TITLE>
</HEAD>
<BODY>
<BLOCKQUOTE>
Fra gli utenti dei servizi telematici di rete, prima fra tutte la rete
internet, ed in particolare fra i lettori dei servizi di "news" Usenet,
si sono sviluppati nel corso del tempo una serie di "tradizioni" e di
"principi di buon comportamento" (galateo) a cui tutti sono tenuti
ad adeguarsi. (Esempio con 'BLOCKQUOTE')
</BLOCKQUOTE>
</BODY>
</HTML>
<BR>
Forza un’interruzione di riga in un testo HTML, quando il browser incontra il tag <BR> (dall’inglese break, ossia interruzione) la frase successiva viene visualizzata a capo, senza però chiudere il paragrafo e aumentare l’interlinea.
Questo tag è utile per creare righe di testo brevi, oppure per testo che deve essere spezzato in punti ben precisi, come i versi.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio06</TITLE>
</HEAD>
<BODY>
Fra gli utenti dei servizi telematici di rete,<BR> prima fra tutte la rete internet,<BR> ed in particolare fra i lettori dei servizi di "news" Usenet, <BR>si sono sviluppati nel corso del tempo una serie di "tradizioni"<BR> e di "principi di buon comportamento" (galateo)<BR> a cui tutti sono tenuti ad adeguarsi.<BR> (Esempio con 'BR')
</BODY>
</HTML>
<CENTER> ………. </CENTER>
Indica che il teso deve essere centrato orizzontalmente nella finestra di visualizzazione.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio07</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'CENTER'<BR><BR><BR>
<CENTER>
(parte del testo centrato)<BR>
Fra gli utenti dei servizi telematici di rete,<BR> prima fra tutte la rete
internet,<BR> ed in particolare fra i lettori dei servizi di "news" Usenet,
</CENTER>
<BR>
(parte del testo non centrato)<BR>
si sono sviluppati nel corso del tempo una serie di "tradizioni"<BR> e di
"principi di buon comportamento" (galateo)<BR> a cui tutti sono tenuti
ad adeguarsi.<BR> (Esempio con 'BR')
</BODY>
</HTML>
<CITE> ………. </CITE>
Per evidenziare citazioni provenienti da fonti esterne relative a documenti, pubblicazioni e così via.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio08</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'CITE'<BR><BR><BR>
<CITE>
L'Iliade
</CITE>
è il grande poema epico di Omero.
</BODY>
</HTML>
<DEL> ………. </DEL>
Contrassegna il testo che è stato cancellato da una precedente versione del documento Web.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio09</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'DEL'<BR><BR><BR>
L'Iliade è il <DEL>grande </DEL>poema epico di Omero.
</BODY>
</HTML>
<DFN> ………. </DFN>
Per marcare i termini che appaiono per la prima volta nel documento Web;
Queste definizioni sono spesso in corsivo affinché l’utente possa individuare la prima volta che appare un certo termine.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio10</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'DFN'<BR><BR><BR>
L'Iliade è il <DFN>grande </DFN>poema epico di Omero.
</BODY>
</HTML>
<DIV> ………. </DIV>
Indica le divisioni in un documento.
Attributi:
ALIGN=(LEFT|CENTER|RIGHT|JUSTIFY)
Specifica l’allineamento orizzontale predefinito per il contenuto dell’elemento <DIV>.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio11</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'DIV'<BR><BR><BR>
<DIV ALIGN=LEFT>
L'Iliade è il
</DIV>
<DIV ALIGN=CENTER>
grande
</DIV>
<DIV ALIGN=RIGHT>
poema epico
</DIV>
<DIV ALIGN=JUSTIFY>
di Omero.
</DIV>
</BODY>
</HTML>
<EM> ………. </EM>
Pone tipograficamente in rilievo, solitamente in corsivo, il testo che delimita;
E’ consigliato usarlo ogni volta che si ha bisogno di dare risalto al testo.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio12</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'EM'<BR><BR><BR>
<EM>L'Iliade</EM> è il grande poema epico di<EM>
Omero<EM>.
</BODY>
</HTML>
<FONF> ………. </FONT>
Imposta dimensione, tipo di carattere e colore del testo che delimita;
Font in lingua inglese è la parola che indica lo stile di un carattere tipografico, e che ormai è entrato nell’uso comune del linguaggio informatico.
Nel linguaggio HTML per definire stile, dimensioni e colore degli elementi testuali presenti in una pagina Web, è utilizzato il tag <FONT>;
Gli attributi di questo comando che servono a definire: dimensioni, stile e colore sono SIZE, FACE, COLOR, e possono essere utilizzati sia separatamente che tutti insieme.
attributi:
SIZE=”numero”
Specifica la dimensione del carattere ed è compreso tra 1 e 7 (7 corrispnde alla dimensione maggiore), il suo valore per default è 3;
“per default”, significa “per mancanza” (ovvero per mancanza di una scelta);
Questo termine è molto utilizzato nel linguaggio informatico, e sta a indicare quale valore assume una certa variabile quando il suo valore non viene specificato.
Un segno più o meno prima del numero indica che la dimensione è relativa all’impostazione corrente del carattere.
Le dimensioni relative dei caratteri non sono comulative, perciò inserire due elementi <FONT SIZE=”+1”> in una riga non permette di incrementare la dimensione di 2.
Tutti i valori inferiori a 3, fino ad arrivare a 1 definiscono una dimensione dei caratteri via via minore, tutti i numeri superiori a 3 fino ad arrivare a 7 definiscono una dimensione dei caratteri via via superiore.
Quindi possiamo affermare che, la dimensione con cui vengono visualizzati i caratteri di una pagina Web, se non viene precisato diversamente, è quella equivalente a: <FONT SIZE=”3”>.
E’ possibile comprendere tra il tag di apertura <FONT> e il tag di chiusura </FONT> un’intera pagina, un paragrafo, una parola, o anche una singola lettera;
Se un tag <FONT> non viene chiuso, la presenza di un successivo tag <FONT> modifica comunque le caratteristiche del testo che segue;
Per scrivere un codice sorgente HTML corretto e per evitare problemi nella formattazione del testo successivo, è consigliabile chiudere tutti i tag <FONT> che sono stati precedentemente aperti;
La possibilità di ‘giocare’ sulle dimensioni del testo, e in particolare su quella dei singoli caratteri, consente di mettere in evidenza alcuni elementi del testo o di gestire in maniera differenziata testi di importanza diversa.
FACE=”nome1, nome2, ecc.”
‘FACE’ significa aspetto, ed è un attributo molto importante dal punto di vista estetico, serve ad indicare la famiglia di carattere tipografico che si vuole attribuire al testo.
Imposta il tipo di carattere, ed è possibile specificare un elenco di nomi di font.
Se sul sistema è disponibile il primo font indicato, sarà usato quello, in caso contrario si proverà con il secondo e così via.
Se non viene precisato il tipo di carattere usato, o nessuno dei font specificati è disponibile, i Browser visualizzano le pagine Web e i testi in esse contenuti utilizzando quello definito nella configurazione del Browser come carattere di default, generalmente ‘arial’ o ‘times’.
Esempio:
<FONT FACE=”arial, helvetica”>
In questo modo, se sul Computer del navigatore non è presente il carattere arial, si potrà sperare nel fatto che sia presente il carattere elvetica, a esso molto somigliante;
Quindi è meglio utilizzare caratteri di cui si è ragionevolmente sicuri che siano presenti sul Computer dei navigatori e quindi, tanto per cominciare, solo quelli che sono installati di default dal ‘sistema operativo’ Windows di Microsoft, attualmente il più diffuso.
COLOR=”(#RRGGBB|nomecolore)”
Specifica il colore che si vuole attribuire ai caratteri;
Questo attributo va utilizzato indicando il nome in lingua inglese del colore, o il suo codice ‘Esadecimale’.
Esempi:
<FONT COLOR=”white”>
or
<FONT COLOR=”#FFFFFF”>
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio13</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" text="#333333">
Esempio di utilizzo del tag 'FONT'<BR><BR><BR>
<P>
Attributo 'SIZE' :<BR><BR><BR>
<FONT SIZE="7">I<FONT SIZE="2">mpariamo il linguaggio
<FONT SIZE="5">HTML</FONT></FONT></FONT>
</P>
<P>
<FONT SIZE="7">I</FONT><FONT SIZE="2">mpariamo il
linguaggio</FONT><FONT SIZE="5">HTML</FONT>
</P>
<P>
<FONT SIZE="6">Q</FONT>uesto è un testo di prova
</P>
<P>
<FONT SIZE="6">N</FONT>ell'apprendimento del
linguaggio HTML è molto importante l'esperienza pratica.
Una tecnica "sperimentale", fatta di tentativi, errori
e nuovi tentativi, fino a ragiungere la perfezione.
</P>
<P>
<FONT SIZE="6">O</FONT>vviamente i più pigri possono sempre
copiare. Si può imparare molto anche dall'esperienza
altrui.Ma il gusto non è lo stesso.
</P>
Attributo 'FACE' :
<FONT FACE="arial">Questo è il carattere arial</FONT>
<BR>
<FONT FACE="comic sans MS">Questo è il carattere comic sans MS</FONT>
<BR>
<FONT FACE="courier">Questo è il carattere courier</FONT>
<BR>
<FONT FACE="impact">Questo è il carattere impact</FONT>
<BR>
<FONT FACE"serifa">Questo è il carattere serifa</FONT>
<BR>
<FONT FACE="tahoma">Questo è il carattere thaoma</FONT>
<BR>
<FONT FACE="times">Questo è il carattere times</FONT>
<BR>
<FONT FACE="verdana">Questo è il carattere verdana</FONT>
Attributo 'COLOR' :
<FONT COLOR="white">Questo è il colore 'white' (bianco)</FONT>
<BR>
<FONT COLOR="silver">Questo è il colore 'silver' (argento)</FONT>
<BR>
<FONT COLOR="gray">Questo è il colore 'gray' (grigio)</FONT>
<BR>
<FONT COLOR="black">Questo è il colore 'black' (nero)</FONT>
<BR>
<FONT COLOR="maroon">Questo è il colore 'maroon' (marrone)</FONT>
<BR>
<FONT COLOR="red">Questo è il colore 'red' (rosso)</FONT>
<BR>
<FONT COLOR="orange">Questo è il colore 'orange' (arancio)</FONT>
<BR>
<FONT COLOR="yellow">Questo è il colore 'yellow' (giallo)</FONT>
<BR>
<FONT COLOR="lime">Questo è il colore 'lime' (cedro)</FONT>
<BR>
<FONT COLOR="green">Questo è il colore 'green' (verde)</FONT>
<BR>
<FONT COLOR="teal">Questo è il colore 'teal' (.........)</FONT>
<BR>
<FONT COLOR="navy">Questo è il colore 'navy' (.........)</FONT>
<BR>
<FONT COLOR="blue">Questo è il colore 'blue' (blu)</FONT>
<BR>
<FONT COLOR="turquoise">Questo è il colore 'turquoise' (turchese)</FONT>
<BR>
<FONT COLOR="cyan">Questo è il colore 'cyan' (.........)</FONT>
<BR>
<FONT COLOR="violet">Questo è il colore 'violet' (viola)</FONT>
<BR>
<FONT COLOR="magenta">Questo è il colore 'magenta' (magenta)</FONT>
<BR>
<FONT COLOR="purple">Questo è il colore 'purple' (porpora)</FONT>
<BR>
</body>
</html>
<Hn> ………. </Hn>
Il tag <Hn> (dove n è il numero da 1 a 6 che è possibile assegnare all’elemento) ha la funzione di fornire stili ai titoli di pagina, dando maggiore o minore enfasi a seconda del numero inserito;
Come accennato i numeri vanno da 1 a 6, con maggiore importanza dei numeri più bassi rispetto agli alti;
Visivamente tale diversa importanza si traduce in una differente grandezza del testo.
attributi:
ALIGN=”(LEFT|CENTER|RIGHT|JUSTIFY)”
Imposta l’allineamento per il testo dell’intestazione. Il valore predefinito è LEFT.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio14</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">
Esempio di utilizzo del tag 'Tn'
</H1><BR><BR><BR>
<H1>
Titolo di livello 1
</H1>
<H2 ALIGN="CENTER">
Titolo di livello 2
</H2>
<H3 ALIGN="RIGHT">
Titolo di livello 3
</H3>
<H4 ALIGN="JUSTIFY">
Titolo di livello 4
</H4>
<H5 ALIGN="LEFT">
Titolo di livello 5
</H5>
<H6 ALIGN="CENTER">
Titolo di livello 6
</H6>
</BODY>
</HTML>
<HR>
Traccia un filetto (riga) orizzontale attraverso la pagina e solitamente ha uno spessore pari a uno o due pixel;
Serve tipicamente a mettere in risalto le divisioni naturali tra elementi del testo o argomenti, oppure a separare un’intestazione di pagina e un piè di pagina dal corpo.
attributi:
ALIGN=(LEFT|CENTER|RIGHT)
Traccia il filetto allineato a sinistra, al centro oppure a destra.
NOSIDE
Traccia il filetto senza ombreggiatura 3D.
SIZE=numero
Imposta l’altezza del filetto in pixel.
WIDTH=(numero|”%”)
Imposta la lunghezza del filetto in pixel o come percentuale della larghezza della finestra;
Per specificare una percentuale, il numero deve terminare con un carattere di percento (%).
Esempio:
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio15</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">
Esempio di utilizzo del tag 'HR'
</H1>
<HR><BR><BR><BR>
<HR SIZE=10>
<HR SIZE=10 NOSHADE>
<HR SIZE=5 NOSHADE>
<HR SIZE=5 WIDTH="50%" ALIGN=LEFT>
<HR SIZE=5 WIDTH="50%" ALIGN=CENTER>
<HR SIZE=5 WIDTH="50%" ALIGN=RIGHT>
</BODY>
</HTML>
<I> ………. </I>
Rende corsivo il testo che delimita.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio16</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">
Esempio di utilizzo del tag 'I'
</H1>
<HR><BR><BR><BR>
<I>I</I>caratteri in corsivo <I>s</I>ono ottenuti grazie
<I> all'utilizzo</I> del tag I
</BODY>
</HTML>
<INS> ………. </INS>
Contrassegna il testo che è stato inserito in una versione di un documento Web.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio17</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'INS'<BR><BR><BR>
L'Iliade è il <INS>grande </INS>poema epico di Omero.
</BODY>
</HTML>
<P> ………. </P>
Definisce i limiti di un paragrafo di testo normale.
In corrispondenza di questo tag si verifica un’interruzione di riga e un ritorno carello.
attributi:
ALIGN=(LEFT|CENTER|RIGHT|JUSTIFY)
Imposta l’allineamento del paragrafo, che può essere a sinistra, al centro, a destra o giustificato;
L’allineamento predefinito è a sinistra (LEFT).
Un buono stile di scrittura prevede che ogni idea o concetto abbia un proprio paragrafo, (il tag di chiusura </P> è opzionale).
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio18</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'P'<BR><BR><BR>
<P ALIGN=CENTER>
L'Iliade è
<P ALIGN=RIGHT>
il grande poema epico di
<P>
Omero.
</BODY>
</HTML>
<PRE> ………. </PRE>
Costringe il Browser a visualizzare l’esatta formattazione (con tanto di rientri e spazi bianchi) che contiene il testo;
Questo tag è particolarmente apprezzabile nella riproduzione di tabelle formattate e altro testo, come listati.
attributi:
WIDTH=numero
Specifica il numero massimo di caratteri per una riga e permette al Browser di selezionare un appropriato e le impostazioni per i rientri.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio19</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'PRE'<BR>
<H2>Elenco libri da catalogo 'APOGEO' 1999-2000</H2>
<PRE>
Autore Titolo codice
Norton, Desmond L'hardware dei PC SBN 88-7303-530-2
Craig, Kusmirak Millennium bug ISBN 88-7303-523-X
Attivissimo Internet per tutti ISBN 88-7303-579-3
Lowe Internet Explorer 5 for Dummies ISBN 88-7303-541-8
Tittel HTML 4 for Dummies ISBN 88-7303-508-6
Perry Visual Basic 6 ISBN 88-7303-456-X
www.apogeo.com
</PRE>
</BODY>
</HTML>
<S> ………. </S>
or
<STRIKE> ………. </STRIKE>
Visualizza il testo che delimita in stile barrato.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio20</TITLE>
</HEAD>
<BODY>
Esempio di utilizzo del tag 'Q' e 'STRIKE'<BR><BR><BR>
L'Iliade è il<S> grande</S> poema epico di Omero.<BR>
L'Iliade è il grande poema<STRIKE> epico</STRIKE>
di Omero.
</BODY>
</HTML>
<SMALL> ………. </SMALL>
Rende il testo più piccolo di una unità rispetto alla dimensione di base del font.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio21</TITLE>
</HEAD>
<BODY>
<BASEFONT SIZE=3 FACE="ARIEL" COLOR="red">
TAG: SMALL
<P>
L'attributo SIZE è settato 3 <BR>
L'attributo FACE è dicharato 'ARIEL' <BR>
L'attributo COLOR è definito 'RED'
</P>
<P>
<SMALL>Frase visualizzata con il tag (SMALL)</SMALL>
</P>
</BODY>
</HTML>
<STRONG> ………. </STRONG>
Attribuisce enfasi marcata a parole o frasi chiave nel corpo del testo. In elenchi o in altri elementi del genere.
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio22</TITLE>
</HEAD>
<BODY>
<H2>Utilizzo di 'STRONG' nel corpo di un testo.</H2>
<BLOCKQUOTE>
Fra gli utenti dei servizi telematici di rete, prima fra tutte la rete
internet, ed in particolare fra i lettori dei servizi di "news" Usenet,
si sono sviluppati nel corso del tempo una serie di <STRONG>"tradizioni"
</STRONG>e di<STRONG> "principi di buon comportamento" (galateo)</STRONG>
a cui tutti sono tenuti ad adeguarsi.
</BLOCKQUOTE>
</BODY>
</HTML>
<SUB> ………. </SUB>
Specifica che il testo delimitato deve essere visualizzato in pedice, leggermente più in basso rispetto al resto del testo.
La creazione e l’inserimento nel testo del cosiddetto ‘pedice’ risulta particolarmente utile nel linguaggio scientifico, un esempio tipico è nella scrittura della formula chimica dell’acqua;
<HTML>
<HEAD>
<TITLE>Esempio23</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="CENTER">
Esempio di Pagina Web con Pedice
</H1>
<H3>
<PRE>
Esempio di testo in cui si utilizza il tag 'SUB'
</PRE>
</H3>
<PRE>
La formula dell'acqua è:
<H1>H<SUB>2</SUB>O</H1>
</PRE>
</BODY>
<SUP> ………. </SUP>
Specifica che il testo delimitato deve essere visualizzato in apice, leggermente più in alto rispetto al resto del testo.
La creazione e l’inserimento nel testo del cosiddetto ‘apice’ risulta particolarmente utile nel linguaggio scientifico, un esempio tipico è l’operatore di elevamento a potenza.
<HTML>
<HEAD>
<TITLE>Esempio24</TITLE>
</HEAD>
<BODY BACKGROUND="swirlies.gif">
<H1 ALIGN="CENTER">
Esempio di Pagina Web con Apice
</H1>
<H3>
<PRE>
Esempio di testo in cui si utilizza il tag 'SUP'
</PRE>
</H3>
<PRE>
La relazione che ha reso famoso Einstein è:
<H1>E = mc<SUP>2</sup></H1>
</PRE>
</BODY>
</HTML>
<TT> ………. </TT>
Delimita testo da visualizzare in un font a spaziatura fissa.
Normalmente in un Font (stringa di caratteri) ogni lettera utilizza una diversa spaziatura orizzontale;
Con il tag <TT> è possibile ottenere che ogni lettera della stringa utilizzi la stessa quantità di spazio orizzontale;
<HTML>
<!-- Commento -->
<HEAD>
<TITLE>Esempio26</TITLE>
</HEAD>
<BODY>
<H2>Esempio di utilizzo del tag 'U' (Underlined text)</H2>
<BLOCKQUOTE>
Fra gli utenti dei servizi telematici di rete, prima fra tutte la rete
internet, ed in particolare fra i lettori dei servizi di "news" Usenet,
si sono sviluppati nel corso del tempo una serie di <U>"tradizioni"
</U>e di<U> "principi di buon comportamento" (galateo)</U>
a cui tutti sono tenuti ad adeguarsi.
</BLOCKQUOTE>
</BODY>
</HTML>
<U> ………. </U>
Il testo che viene delimitato con questo tag apparirà sottolineato.
<HTML>
<HEAD>
<TITLE>Esempio27</TITLE>
</HEAD>
<BODY BGCOLOR="blue" TEXT="white">
<H2 ALIGN="center">Home Page di Pippo</H2>
<HR ALIGN="center" WIDTH="50%">
<P ALIGN="right">
<FONT COLOR="cyan">
<SMALL>
<I>
... nel mezzo del cammin di mia vita mi ritrovai<br>
a crear pagine Web, speriamo che me la cavo ...
</I>
</SMALL>
</FONT>
</P>
<P>
Ciao, io mi chiamo <B>Pippo</B> e abito a <B>Bagheria</B>.
<BR>
Una cittadina a volte <FONT COLOR="yellow"><B>buia e
opprimente</B></FONT>,
a volte <FONT COLOR="violet"><B>buia e opprimente.</B></FONT>
<P>
<FONT COLOR="red"><B>
Ecco i miei hobby:</P></FONT>
</P>
<UL>
<LI>Il calcio</LI>
<LI>La musica:</LI>
<LI>Il buon vino</LI>
</UL>
</BODY>
</HTML>
(per esempio WINDOWS);
In questo modo si è pressoché certi che l’utente finale visualizzerà correttamente la pagina.
<FONT FACE=”arial”>
permette di :
infatti, il termine arial, tradotto letteralmente significa aria, che nel caso specifico serve per indicare il concetto di spazio.
Liste non numerate (unordered list) Liste numerate (ordered list)
Liste di definizione (definition list) Inserimento di immagini:
I formati grafici Immagine in linea (inline image)
Come reperire le immagini Inserimento di suoni
Quando si realizza una pagina Web è indispensabile organizzare le informazioni in modo che la pagina risulti, oltre che gradevole, di facile lettura;
Potrebbe, per esempio, essere utile creare un elenco di voci in cui si forniscono le informazioni in maniera lineare e ordinata;
Le liste sono spesso la soluzione ideale per questo problema.
Esse vengono comunemente classificate in due tipi:
<UL> ………. </UL>
Crea un elenco in cui ogni elemento è preceduto da un punto.
attributi:
TYPE=(DISC|SQUARE|CIRCLE)
Permette di definire la forma del “pallino”;
I tre stili disponibili sono un pallino pieno, un quadratino pieno e un cerchietto vuoto.
La sintassi delle liste non numerate è la seguente:
<UL>
<LI>primo elemento</LI>
<LI>secondo elemento</LI>
<LI>terzo elemento</LI>
<LI>quarto elemento</LI>
</UL>
Il tag <UL> (dall’inglese unordered list, che significa ‘lista non ordinata’) segnala al Browser l’inizio di una lista;
In questo caso, il tag di chiusura è indispensabile, e va inserito dopo l’ultima voce in elenco attraverso il comando </UL>;
Invece ogni singola voce della lista è marcata dai tag <LI> e </LI>.
Ogni elemento della lista può essere preceduto da un pallino, da un cerchio vuoto o da un quadrato, impostando la relativa variabile nell’attributo ‘TYPE’:
<UL TYPE=”DISC”>, per fare precedere ciascun elemento da un pallino.
<UL TYPE=”CIRCLE”>, per fare precedere ciascun elemento da un cerchio.
<UL TYPE=”SQUARE”>, per fare precedere ciascun elemento da un quadrato.
L’attributo TYPE=”CIRCLE” è l’attributo di default.
Se l’attributo TYPE è inserito nel tag <UL> il tipo di indicatore viene settato per tutta la lista;
E’ possibile settare il tipo di indicatore per ogni elemento della lista;
Si noti che da quello settato in avanti, se non vi sono altre indicazioni, anche gli altri elementi della lista avranno il medesimo indicatore.
Esempio:
<HEAD>
<TITLE>Esempio27</TITLE>
</HEAD>
<BODY BGCOLOR="blue" TEXT="white">
<H2 ALIGN="center">Home Page di Pippo</H2>
<HR ALIGN="center" WIDTH="50%">
<P ALIGN="right">
<FONT COLOR="cyan">
<SMALL>
<I>
... nel mezzo del cammin di mia vita mi ritrovai<br>
a crear pagine Web, speriamo che me la cavo ...
</I>
</SMALL>
</FONT>
</P>
<P>
Ciao, io mi chiamo <B>Pippo</B> e abito a <B>Bagheria</B>.
<BR>
Una cittadina a volte <FONT COLOR="yellow"><B>buia e
opprimente</B></FONT>,
a volte <FONT COLOR="violet"><B>buia e opprimente.</B></FONT>
<P>
<FONT COLOR="red"><B>
Ecco i miei hobby:</P></FONT>
</P>
<UL>
<LI>Il calcio</LI>
<LI>La musica:</LI>
<UL>
<LI TYPE="circle">Amedeo Minghi</LI>
<LI TYPE="disc">Claudio Baglioni</LI>
<LI TYPE="square">Giuseppe Verdi</LI>
</UL>
<LI VALUE="1">Le spaghettate</LI>
<LI>Il buon vino</LI>
</UL>
</BODY>
</HTML>
<OL> ………. </OL>
Numera gli elementi nell’ordine in cui appaiono
attributi:
TYPE=(1|a|A|i|I)
Cambia lo stile della lista.
START=”valore”
“valore” indica da dove deve iniziare la numerazione.
Le liste numerate si costruiscono esattamente come quelle non numerate, sostituendo il tag di apertura <UL> con <OL> (dall’inglese ordered list, che significa ‘lista ordinata’);
Anche in questo caso è fondamentale il tag di chiusura </OL>;
Ogni singola voce della lista, come per le liste non numerate, è marcata dai tag <LI> e </LI>.
Nelle liste numerate è possibile impostare alcune variabili che permettono di personalizzare il tipo di numerazione della lista:
Tali variabili vanno impostate nel comando <OL … attraverso gli attributi TYPE=”x” e START=”n”.
Nell’attributo ‘TYPE’ al posto di “x” possono essere inserite le seguenti variabili:
<OL TYPE=”1”> per ottenere una numerazione normale
<OL TYPE=”a”> per ottenere una numerazione con lettere minuscole
<OL TYPE=”A”> per ottenere una numerazione con lettere maiuscole
<OL TYPE=”I”> per ottenere una numerazione con numeri romani
<OL TYPE=”i”> per ottenere una numerazione con numeri romani minuscoli.
Con l’attributo ‘START’ è possibile far partire la numerazione della lista ordinata dal numero che vogliamo;
Quindi, al posto di n basta inserire un numero qualsiasi e la lista creata partirà da questo numero.
Esempio:
<OL TYPE=”I” START=”4”>
Verrà visualizzata una lista ordinata con numeri romani che utilizza il ‘IV’ come numero di partenza;
Inoltre è possibile settare uno specifico elemento:
<LI VALUE=”n”>, n definisce il numero iniziale dello specifico elemento.
Si noti che da quello settato in avanti, se non vi sono altre indicazioni, gli altri elementi della lista saranno numerati progressivamente.
<HTML>
<HEAD>
<TITLE>Esempio28</TITLE>
</HEAD>
<BODY BGCOLOR="blue" TEXT="white">
<H2 ALIGN="center">Home Page di Pippo</H2>
<HR ALIGN="center" WIDTH="50%">
<P ALIGN="right">
<FONT COLOR="cyan">
<SMALL>
<I>
... nel mezzo del cammin di mia vita mi ritrovai<br>
a crear pagine Web, speriamo che me la cavo ...
</I>
</SMALL>
</FONT>
</P>
<P>
Ciao, io mi chiamo <B>Pippo</B> e abito a <B>Bagheria</B>.
<BR>
Una cittadina a volte <FONT COLOR="yellow"><B>buia e
opprimente</B></FONT>,
a volte <FONT COLOR="violet"><B>buia e opprimente.</B></FONT>
<P>
<FONT COLOR="red"><B>
Ecco i miei hobby:</P></FONT>
</P>
<OL TYPE=1 START="1">
<LI>Il calcio</LI>
<LI>La musica:</LI>
<OL>
<LI>Amedeo Minghi</LI>
<LI>Claudio Baglioni</LI>
<LI>Giuseppe Verdi</LI>
</OL>
<LI>Le spaghettate</LI>
<LI>Il buon vino</LI>
</OL>
</BODY>
</HTML>
<DL> ………. </DL>
Un altro tipo di lista è la ‘definition list’ <DL>, e i suoi elementi sono marcati dai tag <DT> e <DD>;
La ‘definition list’ è una lista non numerata che si differenzia dalla lista <UL>, perché richiede due elementi all’interno di ogni linea (contrassegnate appunto da <DT> e <DD>;
Questa particolare lista viene utilizzata generalmente per fare un elenco di definizioni con la relativa descrizione.
Esempio:
<DL>
<DT> prima definizione </DT>
<DD> prima descrizione </DD>
<BR>
<DT> seconda definizione </DT>
<DD> seconda descrizione </DD>
<BR>
<DT> terza definizione </DT>
<DD> terza descrizione </DD>
</DL>
esempio
<HTML>
<HEAD>
<TITLE>Esempio29</TITLE>
</HEAD>
<BODY BGCOLOR="blue" TEXT="white">
<H2 ALIGN="center">Home Page di Pippo</H2>
<HR ALIGN="center" WIDTH="50%">
<P ALIGN="right">
<FONT COLOR="cyan">
<SMALL>
<I>
... nel mezzo del cammin di mia vita mi ritrovai<br>
a crear pagine Web, speriamo che me la cavo ...
</I>
</SMALL>
</FONT>
</P>
<P>
Ciao, io mi chiamo <B>Pippo</B> e abito a <B>Bagheria</B>.
<BR>
Una cittadina a volte <FONT COLOR="yellow"><B>buia e
opprimente</B></FONT>,
a volte <FONT COLOR="violet"><B>buia e opprimente.</B></FONT>
<P>
<FONT COLOR="red"><B>
Ecco il mio menu preferito :</P></FONT>
</P>
<CENTER><H2>Menu odierno</H2></CENTER>
<DL>
<DT>Primo piatto</DT>
<DD>Agnolotti pieni di carne di vitello
con sugo brasato</DD>
<BR>
<DT>Secondo piatto</DT>
<DD>Anatra all'arancia</DD>
<BR>
<DT>Dessert</DT>
<DD>Torta di Salvina alle noci e pinoli</DD>
<BR>
<DT>Bevande</DT>
<DD>Vini della cantina di Salvina</DD>
</DL>
</BODY>
</HTML>
Ci sono molti modi per ottenere un’immagine da inserire nel proprio sito;
Il più semplice è quello di cercarla nella Rete, avendo l’accortezza di verificare che non sia protetta da ‘copyright’, cioè dal diritto d’autore.
Per copiare un’immagine da un sito è sufficiente fare clic con il tasto destro del mouse e, nel menu a tendina che viene visualizzato, selezionare il comando ‘Salva immagine con nome’;
A questo punto bisogna solo far attenzione a salvare il file nella stessa cartella che contiene la pagina Web in costruzione.
Un altro modo per ottenere immagini è l’utilizzo di uno ‘Scanner’, strumento di acquisizione digitale molto diffuso;
Si possono inoltre ottenere ottime fotografie utilizzando fotocamere e videocamere digitali;
Infine sono in vendita, nelle librerie specializzate, numerosi Cd-Rom contenenti collezioni di immagini già in formato digitale, pronte quindi per essere utilizzate all’interno di una pagina Web.
Dopo aver scelto l’immagine desiderata, potrebbe essere necessario adattarla alle nostre esigenze:
schiarirla o scurirla, tagliarla in modo differente, ridurne o aumentarne le dimensioni ecc..
Per compiere l’elaborazione di un’immagine è necessario un programma di fotoritocco;
Il mercato offre un’infinità di prodotti, alcuni creati per l’uso professionale, ottimi e costosi come Photoshop di Adobe, altri distribuiti gratuitamente con licenza shareware (ne è consentito l’uso gratuito per un periodo di prova) che offrono comunque ottime prestazioni;
Può comunque andare benissimo un qualsiasi programma di elaborazione grafica, purchè consenta di produrre immagini che rispettino le caratteristiche fondamentali per la pubblicazione sul Web.
Il World Wide Web supporta due soli formati grafici:
il formato .gif (si pronuncia ‘ghif’ e sta per Grafic Interchange Format) e
il formato .jpg (si pronuncia ‘geipeg’ e sta per Joint Photografic Export Group);
Il formato è la modalità secondo cui vengono organizzate le informazioni che descrivono in forma digitale il contenuto di un’immagine.
Il formato .gif consente di realizzare trasparenze a animazioni, con però il limite di raggiungere al massimo una profondità di 256 colori.
Il formato .jpg, riesce a implementare fino a 16 milioni di colori, e consente un elevato fattore di compressione;
In questo modo è possibile creare raffinate elaborazioni grafiche, all’interno di file di piccole dimensioni, anche se non consente effetti di trasparenza o animazione;
Un’immagine destinata al Web dovrebbe essere di poche dimensioni, cioè pochi Kb.
Quando si tratta di una fotografia, è buona regola non spingersi oltre i 30 Kb;
Dai 50 Kb in su un’immagine inizia ad avere una dimensione che incide in modo significativo sulla fruibilità della pagina:
ricordiamo che una pagina che impiega troppo tempo per essere caricata, e quindi visualizzata dall’utente, rischia di risultare noiosa e di generare l’effetto contrario da quello desiderato, facendo allontanare le persone che si collegano prima che abbiano letto il contenuto dei testi.
Per verificare la dimensione effettive di un’immagine bisogna aprire la cartella in cui questa si trova e selezionarla con un clic del cursore:
sulla barra di stato della finestra comparirà la dimensione espressa in Kb.
<IMG ………… >
Questo comando non prevede la presenza del relativo tag di chiusura, ma può avere svariati attributi, utili per determinare:
l’origine dell’immagine, posizione rispetto al testo, bordo, dimensione, descrizione dell’immagine e distanza dagli altri elementi della pagina;
attributi:
SRC=”nomeimmagine.estensione”
E’ un attributo necessario, specifica oltre al nome del file che contiene l’immagine, anche la sua posizione;
Il nome del file corrispondente alla immagine va scritto tra le virgolette, ricordandosi di indicare correttamente la sua estensione (per esempio .jpg).
Nell’attributo SRC è importante specificare oltre al nome dell’immagine anche il percorso (dove si trova fisicamente registrata);
Supponendo che il file che si vuole includere nella pagina si chiami rosa.gif, il relativo comando sarà:
<IMG SRC=”rosa.gif”>
Se non è specificato alcun percorso significa che l’immagine si trova nella stessa cartella in cui si trova il codice sorgente HTML che la richiama.
Esempi di definizione percorsi:
SRC=”immagini/rosa.gif” significa che l’immagine si trova in una cartella
‘immagini’ posizionata sotto quella in cui si
trova il codice sorgente HTML che la richiama.
Ovviamente, si può scendere (o salire) di tanti livelli quanto sono necessari.
SRC=”../rosa.gif” significa che l’immagine si trova in una cartella
posizionata sopra quella in cui si trova il codice
sorgente HTML che la richiama.
ALIGN=LEFT|RIGHT|TOP|MIDDLE|BOTTOM
Definisce la posizione dell’immagine rispetto alla pagina e rispetto al testo;
I valori di questo attributo sono:
LEFT e RIGHT, per sinistra e destra.
TOP, MIDDLE, BOTTOM per indicare la posizione che deve assumere l’immagine rispetto al testo che la circonda;
Questi valori servono per allineare l’immagine rispettivamente in alto, al centro o in basso.
Riuscire ad allineare correttamente i testi e le immagini contenuti nella pagina che si crea, è fondamentale ai fini di una lettura immediata e gradevole;
E’ bene quindi sperimentare tutti questi valori cercando di allineare il testo con le immagini presenti nella pagina in varie posizioni;
Ricordiamo che questi allineamenti non consentono costruzioni molto complesse, nel caso di una pagina contenente molte immagini e testo, riuscire ad allineare correttamente tutti gli elementi è molto difficile;
Per questo motivo sono stati creati degli strumenti decisamente più versatili, come per esempio le tabelle.
Esempio di allineamento al centro dell’immagine rispetto a una riga di testo:
<IMG ALIGN=”middle” SRC=”rosa.gif”>Questo testo risulterà visualizzato al centro e accanto all’immagine.
<HTML>
<HEAD>
<TITLE>Esempio30</TITLE>
</HEAD>
<BODY BGCOLOR="#669933" text="#ffffff">
<IMG ALIGN="MIDDLE" SRC="rosa.gif">Questa è una rosa
</BODY>
</HTML>
BORDER=numero
Consente di circondare l’immagine con un bordo, specificato da un numero indicante lo spessore in pixel, che in alcuni Browser viene visualizzato sempre in nero, mentre in altri avrà lo stesso colore del testo della pagina già definito nel tag BODY.
Esempio:
<IMG BORDER=”4” SRC=”rosa.gif“>
<HTML>
<HEAD>
<TITLE>Esempio31</TITLE>
</HEAD>
<BODY BGCOLOR="#669933" text="#ffffff">
<IMG ALIGN="MIDDLE" BORDER=4 SRC="rosa.gif">
Questa è una rosa
</BODY>
</HTML>
WIDTH=pixel & HEIGHT=pixel
Gli attributi di dimensione: WIDTH (sta per larghezza) e HEIGHT (sta per altezza) consentono di far sì che, al momento della visualizzazione della pagina, il Browser riservi all’immagine lo spazio da essa richiesto ancor prima di averla scaricata;
Questo accorgimento è importante quando una pagina contiene molti elementi grafici e la sua visualizzazione è condizionata dalla visualizzazione e dal posizionamento delle immagini nel Browser.
I valori da assegnare loro sono la larghezza e l’altezza dell’immagine misurata in pixel.
Assegnando valori differenti da quelli reali l’immagine si adatterà alle dimensioni impostate, aumentando o diminuendo la propria altezza e larghezza;
E’ inoltre possibile impostare questi valori senza rispettare le proporzioni dell’immagine, con una conseguente visualizzazione distorta dell’immagine.
Per un corretto inserimento dell’immagine rosa.gif usata negli esempi precedenti, il comando è:
<IMG WIDTH=”193” HEIGHT=”205” SRC=”rosa.gif”>
<HTML>
<HEAD>
<TITLE>Esempio32</TITLE>
</HEAD>
<BODY BGCOLOR="#669933" text="#ffffff">
<IMG ALIGN="MIDDLE" BORDER=4 SRC="rosa.gif"
WIDTH="193" HEIGHT="205">
Questa è una rosa
</BODY>
</HTML>
Se invece si vuole provare a distorcere quest’immagine cambiandone i valori di larghezza e altezza, si possono impostare questi valori:
<IMG WIDTH=”100” HEIGHT=”350” SRC=rosa.gif”>
<HTML>
<HEAD>
<TITLE>Esempio33</TITLE>
</HEAD>
<BODY BGCOLOR="#669933" text="#ffffff">
<IMG ALIGN="MIDDLE" BORDER=4 SRC="rosa.gif"
WIDTH="100" HEIGHT="350"> Questa è una rosa
distorta dai valori WIDTH e HEIGHT alterati
</BODY>
</HTML>
ALT=”testo”
Questo attributo permette la visualizzazione di un piccolo tassello giallo, quando si posiziona il puntatore del mouse sopra l’immagine, contenente una descrizione relativa all’immagine.
La sua sintassi è la seguente:
<IMG ALT=”descrizione” SRC=”nomeimmagine.estensione”>
dove al posto di ‘descrizione’ si inserisce la descrizione che si vuole visualizzare quando l’utente passa con il mouse sopra la relativa immagine.
<HTML>
<HEAD>
<TITLE>Esempio34</TITLE>
</HEAD>
<BODY BGCOLOR="#669933" text="#ffffff">
<CENTER>
<IMG ALIGN="MIDDLE" BORDER=2 SRC="rosa.gif"
WIDTH="193" HEIGHT="205"
ALT="Questa è una bella rosa">
</CENTER>
</BODY>
</HTML>
HSPACE=numero & VSPACE=numero
Questi attributi consentono di definire la distanza orizzontale e verticale dell’immagine dall’elemento più vicino, in genere il testo, un’altra immagine o il bordo della pagina;
Questa misura si esprime in pixel (i piccoli elementi che formano le immagini nello schermo del PC).
Esempio:
<IMG HSPACE=”50” VSPACE=”10” SRC=”rosa.gif”>
<HTML>
<HEAD>
<TITLE>Esempio35</TITLE>
</HEAD>
<BODY BGCOLOR="#669933" text="#ffffff">
<CENTER>
<IMG ALIGN="MIDDLE" BORDER=2 SRC="rosa.gif"
WIDTH="193" HEIGHT="205" HSPACE=10 VSPACE=30
ALT="Questa è una bella rosa">
</CENTER>
</BODY>
</HTML>
N.B.
Il modo migliore di apprendere l’uso di questo tag è quello di provare i diversi attributi applicandoli uno alla volta alla stessa immagine e nella stessa pagina Web al fine di comprendere concretamente gli effetti.
Se non abbiamo nessuna immagine per provare a costruire le pagine Web, possiamo collegarci al sito di Sandi’s Graphic Gallery, specializzato nel fornire alla comunità dei navigatori immagini grafiche di alta qualità, utilizzabili da chiunque purché per fini non commerciali.
L’indirizzo è:
http://www.graphicgallery.com/
E’ un sito ricco di gallerie di immagini in cui è possibile trovare fotografie, elementi decorativi, sfondi e pulsanti, insomma tutto quanto è necessario per realizzare un sito.
La presenza di file audio sotto forma di ‘MIDI’ o ‘WAV’ può essere una piacevole colonna sonora alla navigazione delle pagine Web, oppure un fastidioso fardello capace solo di rallentare il caricamento ed innervosire il visitatore;
E’ necessario considerare che sì, è importante la piacevolezza grafica e musicale delle pagine Web, ma è fondamentale che la navigazione non risulti lenta e, in ultima analisi, impossibile per chi abbia a cuore le sorti della propria bolletta telefonica;
E’ consigliabile quindi di evitare grossi file ‘MIDI’ (60Kb di files MIDI ad esempio sono esagerati) ed enormi WAVE (che possono essere sostituiti da altri files più leggeri).
Consideriamo che si voglia inserire un file MIDI come sottofondo ad una pagina Web non appena questa si apra, automaticamente quindi;
I comandi necessari a questo fine sono:
<BGSOUND> Funziona solo con Microsoft Internet Explorer.
Esempio:
<BGSOUND SRC=”nomefile.ext” LOOP=INFINITE>
<BGSOUND> funziona solo con Microsoft Internet Explorer ma non con Netscape navigator (LOOP indica il numero delle volte che il ‘MIDI’ deve essere ripetuto).
Per rendere possibile l’apertura automatica di un file audio con Netscape, si deve usare il comando <EMBED>:
<EMBED SRC=”nomeimmagine”>
<HTML>
<HEAD>
<TITLE>Esempio36</TITLE>
</HEAD>
<BODY background="sfondo.gif">
<!------ Sfondo musicale su pagina Web ------->
<CENTER>
<B>
<FONT SIZE=5 FACE="ARIAL" color="#E10000">
"Imagine"
</FONT>
<BR>
<FONT SIZE=3 FACE="ARIAL">
John Lennon
</FONT>
</B>
</CENTER>
<BGSOUND SRC="imagine[1].mid" LOOP=INFINITE>
<!-- EMBED SRC="imagine[1].mid" AUTOSTART=true
LOOP=infinite VOLUME="80"
WIDTH="0" HEIGHT="0" -->
</body>
</html>
<IMG SRC=“fiore.JPG” ALIGN=”middle”> stringa testo , si determina:
<IMG SRC=”nomeimmagine” ALIGN=TOP>
si determina:
Il Link Uso delle immagini come IPERLINK
Link all’interno della stessa pagina Link all’interno dello stesso sito
Link a posta elettronica
Tradotto letteralmente dall’inglese vuol dire ‘collegamento’;
Rappresenta, appunto, il collegamento fra il testo di cui fa parte e un altro documento a esso correlato;
Di solito il link si presenta come una porzione di testo sottolineata, avente anche un diverso colore rispetto al contesto, o come un’immagine su cui, passando con il puntatore del mouse, si nota il cambiamento di forma di quest’ultimo.
Il Link è l’elemento che permette di collegare una pagina all’altra, l’unico vero strumento che consente di rendere ‘dinamica’ la navigazione;
Grazie ai link, infatti, è possibile fare in modo che cliccando su di un elemento grafico o su un particolare testo, venga caricata una nuova pagina.
Le possibilità offerte da questo strumento sono praticamente infinite, visto che è possibile ‘linkare’ sia una pagina dello stesso sito che una proveniente da un qualsiasi altro sito.
Il tag creato appositamente per questo scopo è:
<A> …….. </A> (A sta proprio per Anchor, ancoraggio)
Questo tag deve essere sempre completato da un attributo fondamentale;
Gli attributi disponibili da utilizzare con il tag <A> sono due:
HREF e NAME.
Supponendo di voler segnalare ai visitatori di una pagina, attraverso una ‘parola chiave’, un sito particolarmente interessante che riguarda le automobili;
Si potrebbe usare proprio il termine automobili come parola chiave per puntare ad un sito che tratta di automobilismo.
Esempio di sintassi del tag <A>:
<HTML>
<HEAD>
<TITLE>Esempio del tag <A></TITLE>
</HEAD>
<BODY>
<P>
Vi segnaliamo un sito che parla di
<A HREF=”http://www.automobili.com”>automobili</A>dove
è possibile avere molte informazioni su modelli e prezzi
</P>
</BODY>
</HTML>
La parola automobili risulterà sottolineata e avrà un colore differente dal resto del testo;
Questo è dovuto al fatto che la parola automobili rappresenta un collegamento, un ‘ipertesto’;
Solitamente, a meno che non si specifichi in maniera differente, sul Web i collegamenti ipertestuali risultano sottolineati e hanno il colore blu proprio per attirare l’attenzione;
Il colore blu diventa rosso non appena si clicca con il mouse sopra l’ipertesto, mentre risulta essere porpora nel caso in cui tale collegamento sia già stato visitato;
Questo aiuta l’utente a riconoscere quali pagine ha già visitato e quali deve ancora visitare;
Inoltre passando su un iperlink con il puntatore del mouse esso si trasforma in una piccola mano;
Il simbolo della manina rappresenta, nel mondo Web, la possibilità di navigare, ovvero sta segnalando che si è in presenza di un ipertesto.
Riassumendo, tutte le parole o le immagini racchiuse tra il tag di apertura <A> e la relativa chiusura </A>, rappresentano il link, l’elemento su cui cliccare;
Invece il link vero e proprio, ovvero l’indirizzo in cui il navigatore verrà proiettato dopo aver cliccato, deve essere inserito come valore di HREF.
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio37</TITLE>
</HEAD>
<BODY>
<P>
Vi segnaliamo un sito che parla di
<A HREF="http://www.automobili.com">automobili</A>dove
è possibile avere molte informazioni su modelli e prezzi
</P>
</BODY>
</HTML>
Se si desidera utilizzare un’immagine come iperlink, è sufficiente inserire tra i tag <A> e </A> il riferimento all’immagine desiderata;
Esempio:
<HTML>
<HEAD>
<TITLE>Immagine come Iperlink</TITLE>
</HEAD>
<BODY BGCOLOR=”yellow”>
<H1>Esempio di immagine usata come Iperlink</H1>
<P>
Sottoponiamo alla vostra attenzione questo sito dedicato ai bambini
</P>
<P>
Ciccate sulla fotografia ..
</P>
<P>
<A HREF=”http://www.girotondo.it”>
<IMG BORDER=”2” SRC=”baby_stance.gif” WIDTH=”133”
HEIGHT=”140”>
</A>
</P>
</BODY>
</HTML>
In questo esempio il collegamento ipertestuale al sito da visitare è attribuito all’immagine stessa che apparirà bordata di colore blu, proprio come le parole, le quali risultano sottolineate e di colore blu.
E’ possibile creare collegamenti ipertestuali anche all’interno della stessa pagina, oppure all’interno del sito, se esso è costituito non solo da una semplice pagina HTML, ma da più pagine HTML.
Nel caso in cui una pagina sia ricca di contenuti, e pertanto molto ‘lunga’, il rischio che si corre è che se non si rendono ben disponibili tutte le informazioni, chi visita per la prima volta il sito potrebbe rimanere disorientato e potrebbe abbandonare il sito prima di averne completato la lettura;
Una maniera rapida e molto schematica per dare un’idea del tipo di contenuto di una pagina Web è quella di creare un vero e proprio indice ipertestuale, in cui, attraverso degli elenchi ordinati l’utente può avere un rapido accesso alle informazioni in esso contenute.
L’idea potrebbe essere questa:
poter posizionare il puntatore del mouse su una parola, cliccare, ed essere trasportati direttamente nella zona del sito dove si parla di quella parola, utilizzando nell’ordine gli attributi HREF e NAME:
<A HREF=”#nome”>………..<A/>
<A NAME=”nome”>……….</A>
Esempio di codifica in HTML di un indice ipertestuale:
<HTML>
<HEAD>
<TITLE>Es. di indice ipertestuale</TITLE>
</HEAD>
<STRONG>Elenco delle attività da me preferite:</STRONG>
<UL>
<LI><A HREF=”#viaggi”><FONT SIZE=”5”>viaggiare</FONT></A>
<LI><A HREF=”#montagna”><FONT SIZE=”5”>andare in montagna</FONT></A>
<LI><A HREF=”#arco”><FONT SIZE=”5”>il tiro con l’arco</FONT></A>
</UL>
<CENTER>
<H2>
<A NAME=”viaggi”>I miei viaggi</A>
</H2>
</CENTER>
L’Africa<BR>
La Tailandia<BR>
Il Nepal<BR>
<CENTER>
<H2>
<A NAME=”montagna”>Le mie avventure sui monti</A>
</H2>
</CENTER>
Il Monviso<BR>
Il Cervino<BR>
Il Monte Rosa<BR>
<CENTER>
<H2>
<A NAME=”arco”>I miei hobby</A>
</H2>
</CENTER>
Il tiro con l’arco è un’attività che mi distende e mi rilassa…<BR>
</BODY>
</HTML>
Nel caso si voglia linkare un’altra pagina HTML contenuta nello stesso sito è importante precisare i percorsi, ovvero le directory dove sono contenute le pagine o le immagini;
In questo caso l’attributo HREF del tag <A> deve essere strutturato nel seguente modo:
<HTML>
<HEAD>
<TITLE>Esempio di Link</TITLE>
</HEAD>
<BODY BGCOLOR=”red”>
<P ALIGN=”center”>
<STRONG>
<FONT SIZE=”4”>
Le mie attività preferite:
</FONT>
</STRONG>
<UL>
<LI>
<H2>
ARRAMPICARE
<A HREF=”d:/pippo/html/arrampicare.html”>
<IMG BORDER=”2” SRC=”d:/pippo/foto/nomefoto.gif”
WIDTH=”100” HEIGHT=”102”>
</A>
</H2>
<LI>
<H2>
ANDARE IN MONTAGNA
<A HREF=”d:/pippo/html/montagna.html”>
<IMG BORDER=”2” SRC=”d:/pippo/foto/nomefoto.gif”
WIDTH=”100” HEIGHT=”154”>
</A>
</H2>
</UL>
</BODY>
</HTML>
Altra e interessante applicazione del tag <A> è mettere a disposizione della persona che sta visitando il sito uno strumento di dialogo potente come la posta elettronica, in maniera semplice;
Tale tag forza il Browser ad avviare il programma di posta elettronica, ad esempio Outlook Express, contenente già l’indirizzo a cui si vuole fare riferimento;
Al visitatore a questo punto non rimane che scrivere il testo del messaggio, e premere il tasto invio;
In questo modo si fornisce uno strumento estremamente comodo per l’invio delle e-mail, consentendo all’utente di risparmiare numerose azioni.
La sintassi è la seguente:
<A HREF=”malto:indirizzo di posta elettronica”></A>
<HTML>
<HEAD>
<TITLE>Esempio40</TITLE>
</HEAD>
<STRONG>
Esempio di link a invio di posta elettronica
</STRONG>
<BODY BACKGROUND="swirlies.gif">
<P>
<A HREF="mailto:wani@inwind.it"><FONT SIZE="5">
Clicca qui per mandare una e-mail a wani
</FONT>
</A>
</P>
</BODY>
</HTML>
<A HREF ……….>
verso cosa è possibile creare collegamenti ipertestuali?
<A HREF=”mailto:mario.rossi@tiscalinet.it”>Mario Rossi</A>
si utilizza per:
Le tabelle
Gli attributi dei tag delle tabelle
Titolazione delle tabelle
Colori dello sfondo e dei bordi delle tabelle
Tabelle complesse
Annidamento di tabelle
Pezzi di un disegno visualizzati come tabella
La formattazione delle pagine Web è dinamica, cioè i contenuti delle pagine scorrono e si posizionano all’interno del Browser a seconda delle dimensioni e della forma che viene loro data, ma spesso c’è l’esigenza di assegnare una posizione fissa ai diversi elementi che compongono la pagina.
Lo strumento più versatile per raggiungere questo scopo sono le tabelle;
Le tabelle consentono di esercitare un maggior controllo sulla composizione di una pagina, poiché ogni elemento viene rinchiuso dentro una cella e la sua posizione viene così fissata all’interno della pagina.
Le tabelle sono da intendere come una suddivisione dello spazio della pagina in riquadri, all’interno di ognuno dei quali è possibile inserire tutti gli elementi che si vuole (testi, foto, collegamenti) con une specifica formattazione.
Una tabella va definita utilizzando i tre tag fondamentali:
<TABLE> e </TABLE> il tag principale,
utilizzato per indicare al Browser “questa è una tabella”, assieme ad altri attributi come le dimensioni, i bordi ecc…
<TR> e </TR> (TableRow)
definisce una riga orizzontale di celle.
<TD> e </TD> (TableData)
specifica i singoli elementi o celle in una riga.
(una tabella è fatta di righe fatte a loro volta di celle).
Il corretto ordine nella scrittura dei comandi è il seguente:
<TABLE>
<TR>
<TD>
contenuto della cella (testo o immagini)
</TD>
</TR>
</TABLE>
Il tag <TABLE> apre la tabella;
Il tag <TR> definisce l’apertura della prima riga;
Ogni volta che si apre e si chiude un tag <TD> si crea una cella affiancata a quella che eventualmente la precede (sulla medesima riga);
Questo fino a quando non si chiude il tag che contraddistingue la riga con </TR>.
Osservando i tag <TABLE> e <TR> si nota che sono ‘vuoti’;
Infatti, servono solo a definire le caratteristiche generali della tabella:
dimensioni, colori, bordi e numero di righe, attraverso le assegnazioni dei relativi attributi.
Gli attributi del tag principale <TABLE> definiscono gli aspetti generali della tabella:
dimensioni, larghezza dei bordi e distanza degli oggetti dai bordi, colore dello sfondo e dei bordi, immagine di sfondo.
Gli attributi del tag <TR> riguardano la formattazione di ogni singola riga, mentre gli attributi di <TD> consentono di applicare un trattamento specifico al contenuto di una singola cella.
Alcuni attributi sono uguali per i tre tag ma, se applicati a <TABLE>, definiscono una qualità che vale per tutta la tabella; se applicati a <TR> definiscono le qualità di una riga; se applicati a <TD> riguardano solamente una data cella.
Gli attributi esclusivi di <TABLE> sono:
BORDER, CELLSPACING, CELLPADDING.
Gli attributi applicabili oltre che a <TABLE> anche a <TR> e a <TD> sono:
WIDTH, HEIGHT, BGCOLOR, BORDERCOLOR, BACKGROUND, ALIGN.
L’attributo BORDER, quando presente, disegna un bordo attorno a ogni cella;
Lo spessore del bordo viene stabilito da un valore espresso in pixel;
<TABLE BORDER=”4”>.
L’uso dei bordi consente di dare maggior spicco a una tabella, in particolare quando si è in presenza di più tabelle una dentro all’altra.
Il valore di CELLSPACING, espresso sempre in pixel, definisce lo spazio tra una cella e un’altra;
per esempio:
<TABLE CELLSPACING=”2”>.
L’attributo CELLPADDING definisce la distanza (in pixel) tra il bordo di una cella e i suoi contenuti;
per esempio:
<TABLE CELLPADDING=”6”>.
In genere si dà a CELLPADDING un valore maggiore di zero per evitare che immagini e testo contenuti nella tabella ne tocchino il bordo, creando un effetto esteticamente sgradevole;
BORDER e CELLSPACING, opportunamente utilizzati, consentono di realizzare interessanti effetti di cornice.
Esempi di Tabelle:
<HTML>
<HEAD>
<TITLE>Esempio41</TITLE>
</HEAD>
<!--BODY BACKGROUND="swirlies.gif"-->
<BODY>
<!--TABLE BORDER="5" CELLPADDING="6" CELLSPACING="2"-->
<TABLE>
<TR>
<TD>
esempio tabella 01
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=1>
<TR>
<TD>
esempio tabella 02
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=5>
<TR>
<TD>
esempio tabella 03
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=25>
<TR>
<TD>
esempio tabella 04
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=0>
<TR>
<TD>
esempio tabella 05
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3>
<TR>
<TD>
esempio tabella 06
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=5 CELLPADDING="2">
<TR>
<TD>
esempio tabella 07
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=5 CELLPADDING="5">
<TR>
<TD>
esempio tabella 08
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=5 CELLPADDING="10">
<TR>
<TD>
esempio tabella 09
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=5 CELLSPACING="2" CELLPADDING="2">
<TR>
<TD>
tabella 10 cella 01
</TD>
<TD>
tabella 10 cella 02
</TD>
<TD>
tabella 10 cella 03
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=5 CELLSPACING="6" CELLPADDING="6">
<TR>
<TD>
tabella 11 cella 01
</TD>
<TD>
tabella 11 cella 02
</TD>
<TD>
tabella 11 cella 03
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=5 CELLSPACING="10" CELLPADDING="10">
<TR>
<TD>
tabella 12 cella 01
</TD>
<TD>
tabella 12 cella 02
</TD>
<TD>
tabella 12 cella 03
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Se non viene specificata alcuna dimensione la tabella verrà visualizzata grande quel tanto che basta;
Se si vuole dimensionare la tabella, è possibile utilizzando i tag WIDTH e HEIGHT:
WIDTH serve a definire la larghezza della tabella, che può essere espressa con un valore assoluto, in pixel, o con un valore relativo, in percentuale (dove 100% è la larghezza di una tabella che occuperà tutto lo spazio disponibile nella pagina);
Utilizzato anche come attributo dei tag <TD> o <TH> consente di definire la larghezza delle singole celle, per esempio <TD WIDTH=”80%”>.
HEIGHT consente di fissare l’altezza assoluta della tabella, se si usa un valore espresso in pixel, oppure l’altezza percentuale in relazione all’altezza della finestra del Browser;
Nel caso di <TR>, <TD> e <TH> permette di fissare l’altezza di tutta la riga o delle singole celle.
Va osservato che, se in una medesima riga assegniamo valori di altezza diversi a celle differenti, poiché queste sono costrette a essere allineate, tutte le celle assumeranno l’altezza della cella più alta;
Lo stesso principio vale per la larghezza di celle appartenenti a una stessa colonna.
E’ importante sottolineare che se non vengono assegnate altezza e larghezza delle righe e delle celle, queste ultime assumeranno la dimensione del testo o delle immagini contenute.
E’ possibile stabilire le posizione, della tabella nella pagina e dei dati nelle celle, utilizzando l’attributo ALIGN=”……”;
Consente di allineare la tabella al bordo sinistro o a quello destro della pagina, attraverso i valori left e right;
Esempi:
<TABLE ALIGN=”right”>
<TABLE ALIGN=”left”>.
Quando ALIGN viene utilizzato come attributo dei tag <TR> e <TD>, serve ad allineare i contenuti delle singole celle a sinistra, destra e al centro, tanto che in questo caso è utilizzabile anche il valore center, oltre a right e left.
VALIGN (che sta per Vertical ALIGN) definisce invece l’allineamento verticale dei contenuti delle singole celle della tabella;
Può avere come valori top, middle e bottom, che corrispondono all’allineamento con la parte superiore della cella, nel mezzo o con la base;
Se inserito in un tag <TR> sarà valido per quella riga, se inserito nel tag <TD> sarà valido solo per quella cella.
Se gli attributi di allineamento non vengono specificati, il contenuto di ogni cella verrà allineato a sinistra e posizionato a metà altezza della cella.
Un tag opzionale, cioè non obbligatorio, è:
<CAPTION> …….. </CAPTION>
è traducibile come legenda, cioè il titolo o la didascalia della tabella, a seconda che si trovi sopra o sotto la stessa;
Può contenere l’attributo ALIGN con i valori top e bottom, che servono a far sì che la legenda compaia al di sopra o al di sotto della tabella;
Questo tag deve essere messo dopo il tag <TABLE> ma fuori dai tag <TR> e <TD>.
La scelta del colore di sfondo della tabella è possibile utilizzando l’attributo BGCOLOR (così come nel tag BODY per lo sfondo della pagina), nel tag <TABLE>;
Per la scelta del colore dei bordi, l’attributo utilizzato è BORDERCOLOR;
(i colori vanno indicati con il loro nome in lingua inglese);
L’attributo BORDERCOLOR utilizzato nel tag <TR> definisce il colore dela riga, in <TD> quello della singola cella;
In questo caso l’attributo dell’elemento più piccolo prevale su quello definito nell’elemento gerarchicamente superiore;
Questo significa che le scelte impostate in <TR> prevalgono su quelle impostate in <TABLE> e le scelte impostate in <TD> prevalgono su quelle impostate sia in <TABLE> che in <TR>.
Infine l’attributo BACKGROUND, permette di utilizzare come sfondo di tutta la tabella, di una riga o di una cella, un’immagine;
Per esempio:
<TABLE BACKGROUND=”rosa.jpg”>.
Esempi di tabelle:
<HTML>
<HEAD>
<TITLE>Esempio42</TITLE>
</HEAD>
<!--BODY BACKGROUND="swirlies.gif"-->
<BODY>
<!--TABLE BORDER="5" CELLPADDING="6" CELLSPACING="2"-->
<TABLE BORDER="3" WIDTH="100%">
<TR>
<TD>
esempio tabella 01
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 WIDTH="75%">
<TR>
<TD>
esempio tabella 02
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 WIDTH="50%">
<TR>
<TD>
esempio tabella 03
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center" WIDTH="50%">
<TR>
<TD>
esempio tabella 04
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center" WIDTH="50%">
<TR>
<TD ALIGN="left">
esempio tabella 05
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center" WIDTH="50%">
<TR>
<TD ALIGN="center">
esempio tabella 06
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center" WIDTH="50%">
<TR>
<TD ALIGN="right">
esempio tabella 07
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center">
<TR>
<TD ALIGN="center" WIDTH=200 HEIGHT=100 VALIGN="top">
esempio tabella 08
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center">
<TR>
<TD ALIGN="center" WIDTH=200 HEIGHT=100 VALIGN="middle">
esempio tabella 09
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center">
<TR>
<TD ALIGN="center" WIDTH=200 HEIGHT=100 VALIGN="bottom">
esempio tabella 10
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER=3 ALIGN="center">
<TR>
<TD ALIGN="center" WIDTH=200 HEIGHT=200 VALIGN="middle">
<IMG SRC="baby_stance.gif">
</TD>
</TR>
</TABLE>
<BR>
<TABLE BORDER="1" ALIGN="center" CELLPADDING="6"
WIDTH="400" HEIGHT="200">
<TR>
<TD ALIGN="right" VALIGN="top">
Cella allineata a destra in alto
</TD>
<TD ALIGN="center" VALIGN="middle">
Cella allineata al centro
</TD>
<TD ALIGN="left" VALIGN="bottom">
Cella allineata a sinistra in basso
</TD>
</TR>
</TABLE>
<BR>
<BR>
<BR>
<TABLE BORDER=1 ALIGN="center">
<CAPTION ALIGN="top">
Titolo tabella
</CAPTION>
<TR>
<TD>
Prova di titolazione della tabella
</TD>
</TR>
</TABLE>
<BR>
<BR>
<BR>
<TABLE BORDER=1 ALIGN="center">
<CAPTION ALIGN="bottom">
Didascalia della tabella
</CAPTION>
<TR>
<TD>
Prova di titolazione della tabella
</TD>
</TR>
</TABLE>
<BR>
<BR>
<BR>
<TABLE BORDER=8 ALIGN="center" CELLPADDING="6"
CELLSPACING="0" BGCOLOR="yellow"
BORDERCOLOR="blue">
<CAPTION ALIGN="top">
Esempio di colorazione di sfondo e bordo
</CAPTION>
<TR>
<TD>
testo della cella
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Generalmente, le tabelle sono rigorosamente simmetriche, vale a dire che in una stessa tabella ogni riga deve avere il medesimo numero di celle, che queste sono tutte allineate tra di loro per colonna e formano una griglia regolare.
Con il linguaggio HTML è possibile superare questo limite e realizzare tabelle più complesse.
Il tag <TD> possiede, oltre a quelli già visti, due attributi molto particolari:
ROWSPAN e COLSPAN, che servono a costruire tabelle organizzate in maniera non simmetrica;
Gli attributi ROWSPAN e COLSPAN non sono semplici da utilizzare (è necessario acquisire una certa dimestichezza nella costruzione delle tabelle convenzionali);
Essi servono a far si che una singola cella sia compresa in più righe consecutive, nel caso di ROWSPAN, o che occupi la larghezza di più colonne come nel caso di COLSPAN.
Attributo ROWSPAN:
Consente a una cella di occupare più righe;
Se il tag <TD> contiene l’attributo ROWSPAN=”2”, esso definisce una cella che occupa anche il posto della prima cella della riga successiva;
Se le righe da occupare fossero cinque, per le successive quattro righe dovrebbe mancare la prima cella, sostituita da quella con l’attributo ROWSPAN=”5”.
Esempi di Tabelle:
<HTML>
<HEAD>
<TITLE>Esempio43</TITLE>
</HEAD>
<TABLE BORDER="1" CELLPADDING="6">
<TR>
<TD ROWSPAN="5">
Prima cella dichiarata nella prima riga,
occupa cinque righe
</TD>
<TD>
seconda cella della prima riga
</TD>
</TR>
<TR>
<TD>
seconda cella della seconda riga
</TD>
</TR>
<TR>
<TD>
seconda cella della terza riga
</TD>
</TR>
<TR>
<TD>
seconda cella della quarta riga
</TD>
</TR>
<TR>
<TD>
seconda cella della quinta riga
</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE BORDER="1" CELLPADDING="6">
<TR>
<TD>
Questa è la prima cella della prima riga
</TD>
<TD ROWSPAN="2">
Questa cella ocupa lo spazio di
due righe, vale a dire che è la seconda cella della
prima riga e anche la seconda cella della seconda riga
</TD>
<TD>
Questa è la terza cella della prima riga
</TD>
</TR>
<TR>
<TD>
Questa è la prima cella della seconda riga
</TD>
<TD>
Questa è la terza cella della seconda riga
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Attributo COLSPAN:
Questo attributo permette di far si che una cella abbia la larghezza di più celle contenute nelle righe successive o precedenti, cioè che occupi più colonne:
<TD COLSPAN=”2”>
La riga contenente il tag <TD COLSPAN=”2”> definisce una cella che, in quella riga, occupa lo spazio di due celle;
Naturalmente è possibile usare in maniera combinata gli attributi ROWSPAN e COLSPAN creando degli incroci ‘intelligenti’ tra i diversi elementi che compongono la tabella.
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio44</TITLE>
</HEAD>
<TABLE BORDER="1" CELLSPACING="2" CELLPADDING="6">
<TR>
<TD COLSPAN="2">
Questa cella occupa la larghezza di due colonne
</TD>
</TR>
<TR>
<TD>
1
</TD>
<TD>
A
</TD>
</TR>
<TR>
<TD>
2
</TD><TD>
B
</TD></TR>
</TABLE>
<BR>
<BR>
<TABLE BORDER="1" CELLPADDIND="6">
<TR>
<TD>
Titoli
</TD>
<TD COLSPAN="2">
Colonne
</TD></TR>
<TR>
<TD ROWSPAN="2">
Righe
</TD>
<TD>
1
</TD>
<TD>
A
</TD></TR>
<TR>
<TD>
2
</TD>
<TD>
B
</TD></TR>
</TABLE>
</BODY>
</HTML>
Combinando gli attributi è possibile realizzare costruzioni molto complesse;
E’ possibile costruire tabelle una dentro l’altra: ‘annidate’, come si usa dire;
In sostanza si codifica in HTML una tabella e poi, dentro una cella, si costruisce un’ulteriore tabella.
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio45</TITLE>
</HEAD>
<TABLE BORDER="1" CELLPADDING="6">
<TR>
<TD>
1
</TD>
<TD>
2
</TD>
</TR>
<TR>
<TD>
3
</TD>
<TD>
<TABLE BORDER="1" CELLPADDIND="6">
<TR>
<TD>
A
</TD>
<TD>
B
</TD>
</TR>
<TR>
<TD>
C
</TD>
<TD>
D
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Utilizzando i colori di sfondo, i bordi e l’annidamento di una tabella dentro l’altra è possibile inserire nelle proprie pagina elementi di grafica particolarmente raffinati.
<HTML>
<HEAD>
<TITLE>Esempio46</TITLE>
</HEAD>
<TABLE WIDTH="100%" HEIGHT="100%"
BORDER="2" CELLSPACING="0"
CELLPADDIND="6" BGCOLOR="orange"
BORDERCOLOR="red">
<TR ALIGN="center" VALIGN="middle">
<TD>
<TABLE WIDTH="80%" CELLSPACING="0"
CELLPADDING="6" BGCOLOR="white"
BORDER="2" BORDERCOLOR="black">
<TR>
<TD ALIGN="center" NOWRAP>
<BR>
La home page personale di
<H1>Pippo de Pippis</H1>
</TD>
</TR>
</TABLE>
<P>
pippo.de.pipps@provider.it
</P>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
L’attributo NOWRAP utilizzato nel tag <TD> della tabella interna nel codice sorgente precedente, fa si che il testo contenuto in una cella venga visualizzato su di una sola riga, che non verrà spezzata e mandata a capo nemmeno in caso di ridimensionamento della finestra del Browser;
E’ un attributo che va usato con una certa attenzione, perché potrebbe forzare le celle ad assumere una larghezza eccessiva quando il testo inserito nella cella risulta essere molto lungo rispetto alla finestra.
Esempi:
<HTML>
<HEAD>
<TITLE>Esempio47</TITLE>
</HEAD>
<BR><BR>
<TABLE BORDER=3 BGCOLOR=orange BORDERCOLOR=red
ALIGN=center WIDTH=75% HEIGHT=75%>
<TR>
<TD ALIGN=center VALIGN=middle>
<IMG SRC="papa-fatima.jpg" WIDTH=120 HEIGHT=87>
Il Santo Padre e suor Lucia
</TD>
</TR>
</TABLE>
<BR><BR><BR><BR><BR><BR><BR><BR>
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%>
</TD>
<TD WIDTH=60%>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE BORDER=3 WIDTH=100%>
<TR>
<TD WIDTH=40%>
<IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138>
</TD>
<TD WIDTH=60%>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>
</TR>
</TABLE>
<BR>
<BR>
<TABLE BORDER=0 WIDTH=100%>
<TR>
<TD ALIGN=right WIDTH=40%>
<IMG SRC="applepie.gif" WIDTH=150 HEIGHT=138>
</TD>
<TD WIDTH=60%>
Ingredienti per la torta di mele
<UL>
<LI>Mele
<LI>Farina
<LI>Zucchero
<LI>Cannella
</UL>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Nel caso si voglia inserire in una pagina un disegno di dimensioni molto elevate, come può essere un’immagine animata;
(una immagine animata è di fatto costituita da una sequenza di immagini visualizzate una dopo l’altra)
L’elevata dimensione dell’intero disegno creerebbe non pochi problemi, sia ala trasmissione che al Browser che si troverebbe in difficoltà per visualizzare una sequenza di tali dimensioni;
La soluzione a tutto ciò è di suddividere il disegno in tanti pezzi (isolando la parte animata), e visualizzarlo come tabella.
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio48</TITLE>
</HEAD>
<TABLE WIDTH=591 BORDER=0 CELLSPACING=0
CELLPADDING=0>
<CAPTION ALIGN=top>
<FONT SIZE=6>
<STRONG>
<EM>
Internet Explorer vs. Browser?
</EM>
</STRONG>
</FONT>
</CAPTION>
<TR>
<TD ROWSPAN=3>
<IMG SRC="dragon4.gif" WIDTH=250 HEIGHT=406>
</TD>
<TD>
<IMG SRC="dragon3.gif" WIDTH=122 HEIGHT=109>
</TD>
<TD ROWSPAN=3>
<IMG SRC="dragon5.gif" WIDTH=219 HEIGHT=406>
</TD>
</TR>
<TR>
<TD>
<IMG SRC="anidrag.gif" WIDTH=122 HEIGHT=40>
</TD>
</TR>
<TR>
<TD>
<IMG SRC="dragon2.gif" WIDTH=122 HEIGHT=247>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
<TD WIDTH=”80%”>
cosa determina?
<TD COLSPAN=”2”>
permette di:
<TD BGCOLOR=”colore prescelto”>
I moduli nelle pagine Web (Forms)
I comandi dei FORM
Form senza CGI Scelta del programma CGI
Creazione di un Form semplice Creazione di un Form complesso:
Prevalentemente con HTML, è permesso ai visitatori di pagine Web di visualizzare i contenuti del sito, ma non di interagire con esso;
Il rapporto visitatore/pagina risulta essere quindi prevalentemente unidirezionale e statico;
Con i moduli, invece, il visitatore (l’utente) può interagire con il sito, rendendo il rapporto bidirezionale, cioè dando degli input e ottenendo degli output;
Tale rapporto bidirezionale è possibile solo grazie all’intervento di programmi residenti su Server, che prendono il nome di CGI (Common Gateway Interface).
La gestione dei moduli dipende in misura preponderante dal server, piuttosto che dalla programmazione HTML in sé e per sé.
Perché un form HTML funzioni è necessario disporre di un CGI residente sul proprio server o altri siti.
La creazione di un modulo consta di due fasi:
Con il tag <FORM> (modulo), è possibile aggiungere alle pagine Web dei moduli con i quali permettere alla gente di inviare dati relativi a:
Registro degli ospiti, modulo di ordine, moduli informativi, opinioni ecc…..
Il codice sorgente più elementare di un modulo HTML è il seguente:
<FORM> Inizio del modulo
<INPUT> Richiesta di informazioni in uno dei var modi possibili
Esempio elementare:
<HTML>
<HEAD>
<TITLE>Pagina Web con modulo</TITLE>
</HEAD>
<BODY>
<FORM>
</FORM>
</BODY>
</HTML>
All’interno dei tag FORM occorre essenzialmente specificare al Browser dove inviare i dati che riceve e come inviarli;
Ci sono due metodi:
Mandare i dati ad uno script CGI per elaborarli.
Far si che vengano inviati come E-mail.
Se si sceglie il primo metodo, chiunque abbia scritto lo script è in grado di dire come va impostato il Form.
Il secondo metodo, il cosiddetto mailto, richiede che nel <FORM> vengano specificati i seguenti attributi:
<FORM METHOD=POST ACTION=”mailto:xxx@xxx.xxx”
ENCTYPE=”application/x-www-form-urlencoded”>
</FORM>
Questa linea è estremamente importante;
La sola cosa che va variato è l’indirizzo di E-mail dopo il ‘mailto:’;
Il resto deve essere scritto esattamente come mostrato.
(vedi ‘Mailto Formatter’, è un eccellente piccolo programma di utilità che svolge il compito di trasformare in modo più comprensibile i dati spediti in questo formato).
<INPUT>:
Il tag di base per la definizione degli elementi di un form è <INPUT>, che viene utilizzato per aggiungere pulsanti, menu di scelta, password ecc;
A <INPUT> possono essere assegnati 8 valori differenti.
TYPE=”TEXT”
Questo valore crea i tipici campi di testo, dove usualmente vengono richiesti dati quali il nome o l’indirizzo e-mail;
E’ un valore usato soprattutto per informazioni non predefinite che variano di volta in volta;
TEXT ha tre attributi aggiuntivi:
name (indica il nome che deve essere associato all’input),
maxlength (il numero massimo di caratteri inseribili nel campo, oltre il quale non è possibile aggiungere),
size (la larghezza della stringa all’interno della pagina) e
value (visualizza un testo di default all’interno della stringa).
Es.
<INPUT TYPE=”TEXT” name=”nome” maxlength=”40”
size=”33” value=”il tuo nome”> TYPE=”PASSWORD”
Questo campo funziona similmente a TEXT, ma con una piccola differenza che ne giustifica il nome:
quando si digita all’interno della stringa bianca, non appaiono le lettere ma i classici asterischi delle password.
Es.
<INPUT TYPE=”PASSWORD” name=”nome”
maxlength=”40” size=”33”>
TYPE=”CHECKBOX”
Es.
<INPUT TYPE=”CHECKBOX” name=”età” value=”yes” checked>
Questo attributo viene solitamente utilizzato per informazioni del tipo “si/no” e “vero/falso”;
Crea delle piccole caselle quadrate da spuntare o da lasciare in bianco;
Se la casella è spunata input restituisce un valore al CGI, al contrario non restituisce alcun valore;
value impostato su “yes” significa che di default la casella è spuntata;
checked controlla lo stato iniziale della casella, all’atto del caricamento della pagina.
TYPE=”RADIO”
Questo attributo ha funzioni simili a “CHECKBOX”, ma presenta più scelte possibili;
Selezionando una voce tra quelle presenti, qualora abbiano tutte valore “name” identico, si deselezionano automaticamente le altre.
Es.
<INPUT TYPE=”RADIO” name=”giudizio” value=”sufficiente”>
<INPUT TYPE=”RADIO” name=”giudizio” value=”buono”>
<INPUT TYPE=”RADIO” name=”giudizio” value=”ottimo”>
TYPE=”SUBMIT”
Definisce il classico bottone che si utilizza per inviare il form con tutti i suoi contenuti;
La grandezza del bottone dipende dalle dimensioni del testo.
Es.
<INPUT TYPE=”SUBMIT” value=”Spedisci”>
TYPE=”RESET”
Definisce il bottone che si utilizza per reimpostare l’intero form eliminando i dati inseriti.
<INPUT TYPE=”RESET” value=”Ricomincia”>
TYPE=”IMAGE”
Funzione simile a “SUBMIT” ma con la differenza che al posto del bottone di default, viene visualizzata un’immagine.
Es.
INPUT TYPE=”IMAGE” SRC=”pulsante.gif”>
<TEXTAREA> …….. </TEXTAREA>:
Il tag “Textarea” è utilizzato per commenti o campi che prevedono l’inserimento di molto testo;
La grandezza è impostata da “COLS” e l’altezza da “ROWS”.
Es.
<TEXTAREA COLS=40 ROWS=5 WRAP=”physical”
NAME=”commento”>
</TEXTAREA>
WRAP=”physical” stabilisce che qualora il testo inserito superi la larghezza della finestra, venga automaticamente riportato a capo.
<SELECT> …….. </SELECT>:
Select è un elemento che permette la creazione di elenchi a discesa con varie possibilità di scelta.
Es.
<SELECT SIZE=1 COLS=4 NAME=”giudizio”>
<OPTION SELECTED VALUE=nessuna>
<OPTION VALUE=buono>Buono
<OPTION VALUE=sufficiente>Sufficiente
<OPTION VALUE=ottimo>Ottimo
</SELECT>
Esempio:
Nell’esempio è simulato la richiesta di un giudizio.
<HTML>
<HEAD>
<TITLE>Esempio49</TITLE>
</HEAD>
<BODY>
<FORM>
<P>
<INPUT TYPE="TEXT" NAME="nome" MAXLENGTH="40" SIZE="33"
VALUE="il tuo nome">
<P>
<INPUT TYPE="PASSWORD" NAME="nome" MAXLENGTH="40"
SIZE="33">
<P>
<INPUT TYPE="CHECKBOX" NAME="età" VALUE="yes"
CHECKED>idoneo
<P>
<INPUT TYPE="RADIO" NAME="giudizio" VALUE="sufficiente">
<P>
<INPUT TYPE="RADIO" NAME="giudizio" VALUE="buono">
<P>
<INPUT TYPE="RADIO" NAME="giudizio" VALUE="ottimo">
<P>
<INPUT TYPE="SUBMIT" VALUE="Spedisci">
<P>
<INPUT TYPE="RESET" VALUE="Ricomincia">
<P>
<INPUT TYPE="IMAGE" SRC="pulsante[1].gif">
<P>
<TEXTAREA COLS=40 ROWS=5 WRAP="physical"
NAME="commento">
</TEXTAREA>
<P>
<SELECT SIZE=1 COLS=4 NAME="giudizio">
<OPTION SELECTED VALUE=nessuna>
<OPTION VALUE=buono>Buono
<OPTION VALUE=sufficiente>Sufficiente
<OPTION VALUE=ottimo>Ottimo
</SELECT>
<P>
<CENTER>
<TABLE WIDTH=600 BORDER=1 CELLSPACING=1>
<TR>
<TD WIDTH=199>
Quali di questi ragazzi sono tuoi amici?<BR>
<INPUT TYPE=CHECKBOX NAME="amico?mario"
Value="YES">Mario<BR>
<INPUT TYPE=CHECKBOX NAME="amico?pippo"
Value="YES">Pippo<BR>
<INPUT TYPE=CHECKBOX NAME="amico?gianni"
Value="YES">Gianni<BR>
<INPUT TYPE=CHECKBOX NAME="amico?paolo"
Value="YES">Paolo<P>
</TD>
<TD WIDTH=200>
A chi di questi ragazzi presteresti soldi?<BR>
<INPUT TYPE=CHECKBOX NAME="soldi?mario"
Value="YES">Mario<BR>
<INPUT TYPE=CHECKBOX NAME="soldi?pippo"
Value="YES">Pippo<BR>
<INPUT TYPE=CHECKBOX NAME="soldi?gianni"
Value="YES">Gianni<BR>
<INPUT TYPE=CHECKBOX NAME="soldi?paolo"
Value="YES">Paolo<P>
</TD>
<TD WIDTH=199>
Quali di questi ragazzi faresti uscire
con tua sorella?<BR>
<INPUT TYPE=CHECKBOX NAME="sorella?mario"
Value="YES">Mario<BR>
<INPUT TYPE=CHECKBOX NAME="sorella?pippo"
Value="YES">Pippo<BR>
<INPUT TYPE=CHECKBOX NAME="sorella?gianni"
Value="YES">Gianni<BR>
<INPUT TYPE=CHECKBOX NAME="sorella?paolo"
Value="YES">Paolo<P>
</TD>
</TR>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>
Nei moduli è anche possibile utilizzare “immagini”:
<HTML>
<HEAD>
<TITLE>Esempio50</TITLE>
</HEAD>
<BODY>
<FORM METHOD=POST ACTION="mailto:xxx@xxx.xxx"
ENCTYPE="application/x-www-form-urlencoded">
<CENTER>
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=5>
<CAPTION ALIGN=top>
<FONT SIZE=5>
<EM>Quiz Presidenti Americani</EM>
</FONT>
</CAPTION>
<!---*****inizio prima riga*****--->
<TR>
<TD ALIGN=center>
<IMG SRC="clinton.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Clinton</FONT><BR>
<INPUT TYPE=radio NAME="clinton" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="clinton" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="bush.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Bush</FONT><BR>
<INPUT TYPE=radio NAME="bush" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="bush" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="reagan.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Reagan</FONT><BR>
<INPUT TYPE=radio NAME="reagan" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="reagan" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="carter.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Carter</FONT><BR>
<INPUT TYPE=radio NAME="carter" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="carter" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="ford.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Ford</FONT><BR>
<INPUT TYPE=radio NAME="ford" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="ford" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="nixon.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Nixon</FONT><BR>
<INPUT TYPE=radio NAME="nixon" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="nixon" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
</TR>
<!---*****inizio seconda riga*****--->
<TR>
<TD ALIGN=center>
<IMG SRC="johnson.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Johnson</FONT><BR>
<INPUT TYPE=radio NAME="johnson" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="johnson" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="kennedy.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Kennedy</FONT><BR>
<INPUT TYPE=radio NAME="kennedy" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="kenedy" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="eisenhow.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Eisenhow</FONT><BR>
<INPUT TYPE=radio NAME="eisenhow" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="eisenhow" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="truman.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Truman</FONT><BR>
<INPUT TYPE=radio NAME="truman" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="truman" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="fdr.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Roosevelt</FONT><BR>
<INPUT TYPE=radio NAME="roosevelt" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="roosevelt" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
<TD ALIGN=center>
<IMG SRC="hoover.gif" WIDTH=86 HEIGHT=101><BR>
<FONT SIZE=2>Hoover</FONT><BR>
<INPUT TYPE=radio NAME="hoover" VALUE="Rep">
<FONT SIZE=2>Rep</FONT><BR>
<INPUT TYPE=radio NAME="hoover" VALUE="Dem">
<FONT SIZE=2>Dem</FONT>
</TD>
</TR>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>
Form senza CGI:
L’uso di Form HTML dà i migliori risultati quando affiancato da un programma CGI residente su server;
Questo non preclude comunque, la possibilità di usare form anche senza l’ausilio di un CGI.
Per spedire un modulo usando esclusivamente i comandi messi a disposizione da HTML, si deve inserire un’intestazione simile alla seguente:
<FORM METHOD=”post” ACTION=”mailto:nome@provider.it>
Dove a nome@provider.it va sostituito il proprio indirizzo e-mail, verso il quale devono essere indirizzati i moduli compilati.
L’inconveniente maggiore di questa scelta è nella mancata formattazione del contenuto del Form;
Quando un Form viene inviato al server, il valore di ciascuno dei controlli corrispondenti è incluso in una stringa;
Tale stringa è composta da coppie di valori (nome-valore) ed è delineata da “&” commerciali;
Ad essa vengono assegnati tutti i valori degli elementi denominati, in una sorta di concatenamento.
Ecco un esempio del risultato di un Form nel quale, senza il passaggio per un CGI, sono stati inseriti alcuni dati personali:
Nome=Giacomo+Puccini&Email=giulaba@tiscalinet.it&citta%27=Roma&eta%25
Il CGI agisce in modo molto efficace, ed avrebbe dato il seguente risultato:
(Nome) Giacomo Puccini
(Email) giulaba@tiscalinet.it
(città) Roma
(età) 25
Scelta del programma CGI:
La soluzione preferibile per la creazione di un modulo è quella che prevede l’uso di un programma CGI residente su server;
A questo punto nasce l’interrogativo su come si imposti ma soprattutto dove si trovino i CGI;
Consideriamo i diversi casi che possono verificarsi:
Acquisto di un servizio hosting con accesso alla directory CGI-BIN.
Se si acquista uno spazio in hosting presso uno dei tanti fornitori di tali servizi, è bene chiedere se il pacchetto prevede l’accesso alla directory CGI-BIN;
Se la risposta è affermativa è possibile scaricare un CGI “freeware” o “shareware” da uno dei siti stabiliti, impostarlo ed usarlo secondo le proprie esigenze.
E’ una scelta molto vantaggiosa per coloro i quali hanno conoscenze tecniche sull’argomento, e possono in questo modo scegliere il programma che meglio si adatta alle proprie esigenze.
Il sito italiano più autorevole sui CGI è CGIpoint.
Quando si sceglie un CGI è bene fare molta attenzione alla piattaforma per la quale è stato creato;
Es. : Unix o Windows NT.
Sottoscrizione di uno spazio Web presso una delle comunità free-Web space
Sono moltissime le comunità virtuali che offrono spazio gratuitamente, sia in lingua inglese che in lingua italiana;
Offrono oltre lo spazio e l’accesso FTP, numerosi servizi supplementari, tra i quali non manca mai un “Form” per “guestbook” e “mail”;
Per approfondire procedure e caratteristiche tecniche, è consigliabile contattare direttamente le comunità.
Acquisto di un servizio hosting che non consente l’accesso alla directory
CGI-BIN.
In questi casi la soluzione migliore consiste nel rivolgersi ad un servizio gratuito di moduli residenti su altro server (quindi che non vanno impostati sul proprio) e disponibili previa sottoscrizione;
Rivolgersi ad un servizio terzo separa l’uso dei moduli da quello del server, col vantaggio, nel caso in cui si cambi server o comunità, di non dover reimpostare il tutto.
Consideriamo la creazione di un Form molto semplice, che prevede la richiesta del nome, l’indirizzo e-mail e un commento al sito.
Per fare questo va creato il seguente codice sorgente:
<FORM ACTION=http://www.coder.com/code/mailform.pl.cgi
METHOD=post>
Questo rigo va lasciato inalterato, in quanto richiama il CGI presente sul server del servizio gratuito sottoscritto.
<INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE=”Val_7743”>
Questo rigo va modificato solo nel codice identificativo “Val_7743” che va sostituito con quello comunicato via e-mail dal servizio gratuito;
Questa semplice procedura è fondamentale perché il proprio form arrivi nella propria casella di posta e non in quella di qualcun altro.
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT
VALUE=”Primo FORM”>
Questo rigo determina il subject della mail che arriverà via e-mail all’atto della spedizione, con il contenuto del form;
A “Primo FORM” è possibile sostituire qualsiasi altra frase.
<INPUT TYPE=HIDDEN NAME=MILFORM_URL
VALUE=http://www.html.it/risposta.htm>
Questo rigo indica la pagina Web da visualizzare successivamente la pressione del tasto “spedisci”;
In questo esempio è stato inserito un documento presente sul server di HTML.it, al quale è possibile sostituire una pagina presente sul proprio server.
<B>Nome e cognome</B><BR>
<INPUT TYPE=TEXT NAME=MAILFORM_NAME SIZE=33><BR><BR>
Questo rigo va lasciato inalterato (ovviamente, non nelle dimensioni) in quanto inserisce nella mail che riceveremo via posta tale nome nel campo del mittente.
<B>Indirizzo E-mail</B><BR>
<INPUT TYPE=TEXT NAME=MAILFORM_FROM SIZE=33>
Questo rigo va lasciato inalterato (ovviamente, non nelle dimensioni) in quanto consente di ottenere nel “reply-to” della mail che il form spedisce, l’indirizzo di colui che ha compilato il modulo.
<B>Commenti</B><BR>
<TEXTAREA NAME=MAILFORM_TEXT ROWS=10 COLS=42
WRAP>
</TEXTAREA><BR><BR>
<INPUT TYPE=SUBMIT VALUE=”Spedisci”>
Questo rigo è necessario per la spedizione del modulo.
<INPUT TYPE=RESET VALUE=”Cancella”>
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio51</TITLE>
</HEAD>
<BODY>
<FORM ACTION=http://www.coder.com/code/mailform.pl.cgi
METHOD=POST>
<INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743">
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Primo FORM">
<INPUT TYPR=HIDDEN NAME=MAILFORM_URL
VALUE="http://www.html.it/risposta.htm"><BR><BR>
<B>Nome e cognome<B><BR>
<INPUT TYPE=TEXT NAME=MAILFORM_NAME SIZE=33><BR><BR>
<B>Indirizzo E-mail</B><BR>
<INPUT TYPE=TEXT NAME=MAILFORM_FORM SIZE=33><BR><BR>
<B>Commenti</B><BR>
<TEXTAREA NAME=MIAILFORM_TEXT ROWS=10 COLS=42 WRAP>
</TEXTAREA><BR><BR>
<INPUT TYPE=SUBMIT VALUE="Spedisci">
<INPUT TYPE=RESET VALUE="Cancella">
</FORM>
</BODY>
</HTML>
Creazione di un form complesso:
Il FORM visto nell’esempio precedente è molto semplice e prevede solo tre campi;
Questo che segue è un modulo più complesso, che riprende quanto descritto finora relativamente ai comandi dei FORM
<HTML>
<HEAD>
<TITLE>Esempio52</TITLE>
</HEAD>
<BODY>
<FORM ACTION=http://www.coder.com/code/mailform.pl.cgi
METHOD=POST>
<INPUT TYPE=HIDDEN NAME=MAILFORM_ID VALUE="Val_7743">
<INPUT TYPE=HIDDEN NAME=MAILFORM_SUBJECT VALUE="Secondo FORM">
<INPUT TYPR=HIDDEN NAME=MAILFORM_URL
VALUE="http://www.html.it/risposta.htm"><BR><BR>
<FONT FACE=ARIAL>
<TABLE BORDER=0>
<TR>
<TD ALIGN=RIGHT>
<B>Nome</B>
</TD>
<TD>
<INPUT TYPE=TEXT SIZE=33 NAME=MAILFORM_NAME>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
<B>Home page</B>
</TD>
<TD>
<INPUT TYPE=TEXT NAME="home" VALUE="http://" SIZE=33>
</TD>
</TR>
<TD ALIGN=RIGHT>
<B>Indirizzo e-mail</B>
</TD>
<TD>
<INPUT TYPE=TEXT NAME=MAILFORM_FROM SIZE=33>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
<B>Città</B>
</TD>
<TD>
<INPUT TYPE=TEXT NAME="citta" SIZE=33>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
<B>Un giudizio sul docente..</B>
</TD>
<TD>
<SELECT SIZE=1 COLS=4 NAME="Cosa_pensi">
<OPTION SELECTED VALUE=nessuna>
<OPTION VALUE=ottimo>Ottimo
<OPTION VALUE=discreto>Discreto
<OPTION VALUE=buono>Buono
<OPTION VALUE=sufficiente>Sufficiente
<OPTION VALUE=mediocre>Mediocre
<OPTION VALUE=scarso>Scarso
</SELECT>
</TD>
</TR>
<TR>
<TD ALIGN=RIGHT>
<B>Spiegazioni chiare?</B>
</TD>
<TD ALIGN=CENTER>
<B>si</B>
<INPUT NAME="chiare" TYPE=RADIO>
<B>no</B>
<INPUT NAME="non_chiare" TYPE=RADIO>
<B>non so</B>
<INPUT NAME="non_so" TYPE=RADIO>
</TD>
</TR>
</TABLE>
<BR><BR>
<CENTER>
<TABLE BORDER=0 WIDTH=450>
<TR>
<TD WIDTH=450>
<B><CENTER>Commenti su HTML</CENTER></B>
</TD>
</TR>
<TR>
<TD COLSPAN=2>
<TEXTAREA COLS=58 ROWS=8 SIZE=200
WRAP=PHYSICAL>
</TEXTAREA>
</TD>
</TR>
</TABLE>
</CENTER>
<BR>
<CENTER>
<INPUT TYPE=SUBMIT VALUE="Spedisci il form">
<INPUT TYPE=RESET VALUE="Cancella">
</CENTER>
</FORM>
</BODY>
</HTML>
<FORM METHOD=POST ACTION=”mailt:xxx@xxx.xxx”
ENCTYPE=”application/x-www-form-urlencoded”>
</FORM>
< INPUT TYPE=”PASSWORD” name=”nome”
size=”33” value=”il tuo nome”> TYPE=”PASSWORD”
indica che:
FRAMES
Suddivisione di Pagine Web in FRAMES Attributi del comando ‘FRAMESET’
Attributi del comando ‘FRAME’ Inserimento di figure nel FRAME
Inserimento di Link all’interno dei FRAME
La possibilità di dividere le pagine Web in Frames ne ha rivoluzionato decisamente l’aspetto, inserendo più documenti contemporaneamente all’interno dello stesso schermo;
In pratica, ogni parte dello schermo delimitata da un Frame presenta un documento HTML;
Per creare una pagina strutturata in Frames bisogna in primo luogo realizzare un documento principale che definisca dimensioni e contenuto dei singoli Frames, e poi i vari documenti HTML che dovranno riempire i Frames messi a disposizione dal primo documento.
Il comando fondamentale per creare una pagina strutturata in Frames è <FRAMESET>, ed è alternativo a <BODY>;
Es.
<HTML>
<HEAD>
<TITLE>La pagina Master</TITLE>
</HEAD>
<FRAMESET>
</FRAMESET>
</HTML>
Attributi del comando ‘FRAMESET’
COLS=” “
Divide lo schermo in colonne verticali, e ha come valore le dimensioni delle colonne;
Queste dimensioni possono essere espresse in percentuale, in numero di pixel o attraverso un asterisco (in quest’ultimo caso il Browser utilizzerà per la colonna in questione il massimo spazio possibile lasciato dalle altre colonne.
<HTML>
<HEAD>
<TITLE>Esempio53</TITLE>
</HEAD>
<FRAMESET COLS="20%,*,20%">
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
ROWS=” “
Questo attributo funziona allo stesso modo di COLS, e viene ovviamente utilizzato per realizzare delle divisioni orizzontali dello schermo.
<HTML>
<HEAD>
<TITLE>Esempio54</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*,20%">
<FRAME>
<FRAME>
<FRAME>
</FRAMESET>
</HTML>
Nei due esempi precedenti si osservano le suddivisioni verticali e orizzontali dello schermo;
Per inserire all’interno dei singoli Frame I documenti HTML, è necessario utilizzare nel comando Frame l’attributo SRC avente come valore il nome del file HTML da inserire.
Esempio:
<HTML>
<HEAD>
<TITLE>Esempio55</TITLE>
</HEAD>
<FRAMESET COLS="20%,*,20%">
<FRAME NAME="FRAME01" SRC="frame01.html">
<FRAME NAME="FRAME02" SRC="frame02.html">
<FRAME NAME="FRAME03" SRC="frame03.html">
</FRAMESET>
</HTML>
Esempio
<HTML>
<HEAD>
<TITLE>Esempio56</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*,20%">
<FRAME NAME="FRAME01" SRC="frame01.html">
<FRAME NAME="FRAME02" SRC="frame02.html">
<FRAME NAME="FRAME03" SRC="frame03.html">
</FRAMESET>
</HTML>
BORDER=nn
Permette di assegnare un valore (espresso in pixel) alle dimensioni delle cornici.
BORDERCOLOR=
Permette di assegnare un colore alla cornice, definendolo con un nome o con un valore esadecimale.
<HTML>
<HEAD>
<TITLE>Esempio57</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*,20%" BORDER=5 BORDERCOLOR=red>
<FRAME NAME="FRAME01" SRC="frame01.html">
<FRAME NAME="FRAME02" SRC="frame02.html">
<FRAME NAME="FRAME03" SRC="frame03.html">
</FRAMESET>
</HTML>
SCROLLING=x----x
Regola la creazione di barre di scorrimento lungo le cornici dei Frames;
Il valore di default è AUTO, che creerà le barre solo nel caso in cui il testo del documento ecceda le dimensioni del Frame;
Il valore NO impedirà la creazione di barre di scorrimento, anche se il testo eccede le dimensioni del Frame;
Il valore YES collocherà comunque delle barre di scorrimento all’interno di ogni singolo Frame.
<HTML>
<HEAD>
<TITLE>Esempio58</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*,20%">
<FRAME NAME="FRAME01" SRC="frame01.html" SCROLLING=AUTO>
<FRAME NAME="FRAME02" SRC="frame02.html" SCROLLING=YES>
<FRAME NAME="FRAME03" SRC="frame03.html" SCROLLING=NO>
</FRAMESET>
</HTML>
NORESIZE
Impedisce all’utente di ridimensionare con il mouse le dimensioni del Frame.
<HTML>
<HEAD>
<TITLE>Esempio59</TITLE>
</HEAD>
<FRAMESET ROWS="20%,*,20%" >
<FRAME NAME="FRAME01" SRC="frame01.html"
SCROLLING=AUTO NORESIZE>
<FRAME NAME="FRAME02" SRC="frame02.html"
SCROLLING=YES NORESIZE>
<FRAME NAME="FRAME03" SRC="frame03.html"
SCROLLING=NO NORESIZE>
</FRAMESET>
</HTML>
MARGINWIDTH=nn
Permette di lasciare margini laterali (espressi in pixel) tra testo e cornice del Frame.
MARGINHEIGHT=nn
Permette di lasciare margini, superiore e inferiore (espressi in pixel) tra la cornice del Frame e il testo.
<HTML>
<HEAD>
<TITLE>Esempio60</TITLE>
</HEAD>
<FRAMESET ROWS="30%,*,30%">
<FRAME NAME="FRAME01" SRC="frame01.html" SCROLLING=AUTO
MARGINWIDTH=1 MARGINHEIGHT=1>
<FRAME NAME="FRAME02" SRC="frame02.html" SCROLLING=YES
MARGINWIDTH=50 MARGINHEIGHT=30>
<FRAME NAME="FRAME03" SRC="frame03.html" SCROLLING=NO
MARGINWIDTH=100 MARGINHEIGHT=50>
</FRAMESET>
</HTML>
Quando si decide di inserire una immagine in un FRAME, è buona norma includere gli attributi WIDTH e HEIGHT;
Dimensionare il Frame proporzionalmente alla dimensione dell’immagine (esprimendo il valore in pixel);
Il Browser fornisce automaticamente ad ogni Frame un po’ di spazio vuoto attorno al contenuto, ma ciò potrebbe non risultare sufficiente;
E’ preferibile, nel dimensionare il Frame, aumentare di 8 pixel le dimensioni dell’immagine da inserire.
<HTML>
<HEAD>
<TITLE>Esempio61</TITLE>
</HEAD>
<FRAMESET COLS="154,*">
<FRAMESET ROWS="170,*">
<FRAME NAME="MONDO" SRC="world.gif" WIDTH=146
HEIGHT=162 SCROLLING=NO
MARGINWIDTH=4 MARGINHEIGHT=4>
<FRAME NAME="FRAME01" SRC="frame01.html">
</FRAMESET>
<FRAME SRC="frame02.html">
</FRAMESET>
</HTML>
Per quanto riguarda i Links all’interno dei Frames (cioè come caricare una pagina in un Frame diverso da quello in cui si trova il Link) si deve far riferimento al nome che in fase di realizzazione è stato assegnato ai vari Frames;
Nome che non si riferisce al file ma a quanto scritto dopo “NAME=”.
Es.
<FRAME NAME=”FRAME01” SRC=”frame01.html”>
<FRAME NAME=”FRAME02” SRC=”frame02.html”>
Consideriamo che da un Link presente su “FRAME01”, dobbiamo caricare un’altra pagina sul Frame “FRAME02”;
Se il Link presente sul Frame “FRAME01”, fosse codificato semplicemente:
<A HREF=”frame05.html”>Clicca</A>
la pagina “frame05.html” verrebbe caricata all’interno dello stesso Frame (cioè “FRAME01”), perché in assenza di comandi adatti il Browser capisce di dover caricare la nuova pagina nello stesso Frame in cui è presente il Link;
Per ottenere il caricamento della pagina “frame05.html” sul Frame “FRAME02” è necessario l’uso dell’attributo ‘TARGET’:
<A HREF=”frame05.html” TARGET=”FRAME02”>Clicca</A>
<HTML>
<HEAD>
<TITLE>Esempio62</TITLE>
</HEAD>
<FRAMESET COLS="20%,60%,20%">
<FRAME NAME="FRAME01" SRC="frame01.html">
<FRAME NAME="FRAME02" SRC="frame02.html">
</FRAMESET>
</HTML>
Altro uso fondamentale dell’attributo ‘TARGET’ è quello di richiamare un Link ad un’altra pagina la quale verrà visualizzata a pieno schermo, eliminando tutti i Frame preesistenti.
Es.
<A HREF=”frame05.html” TARGET=”_parent”>Clicca</A>
<HTML>
<HEAD>
<TITLE>Esempio63</TITLE>
</HEAD>
<FRAMESET COLS="20%,60%,20%">
<FRAME NAME="FRAME01" SRC="frame01a.html">
<FRAME NAME="FRAME02" SRC="frame02.html">
</FRAMESET>
</HTML>
Autore : Milan
Editore : Jackson Libri;
Autore : Gottleber Timoty T.
Editore : McGraw-Hill Libri Italia
Autore : Castro Elizabeth
Editore : Mondatori Informatica
Autore : Castro Elizabeth
Editore : Mondatori
Autore : Asioli Paolo
Editore : Tecniche Nuove
Fonte: http://digilander.libero.it/graficowebmarsala/Cod.%2014%20HTML.doc
Sito web da visitare: http://digilander.libero.it/graficowebmarsala/
Autore del testo:
La Barbera Giuseppe |
Calà Gaetano |
Genco Paolo |
Redazione |
Verifica ed |
Approvazione |
non indicato nel documento di origine
Il testo è di proprietà dei rispettivi autori che ringraziamo per l'opportunità che ci danno di far conoscere gratuitamente i loro testi per finalità illustrative e didattiche. Se siete gli autori del testo e siete interessati a richiedere la rimozione del testo o l'inserimento di altre informazioni inviateci un e-mail dopo le opportune verifiche soddisferemo la vostra richiesta nel più breve tempo possibile.
I riassunti , gli appunti i testi contenuti nel nostro sito sono messi a disposizione gratuitamente con finalità illustrative didattiche, scientifiche, a carattere sociale, civile e culturale a tutti i possibili interessati secondo il concetto del fair use e con l' obiettivo del rispetto della direttiva europea 2001/29/CE e dell' art. 70 della legge 633/1941 sul diritto d'autore
Le informazioni di medicina e salute contenute nel sito sono di natura generale ed a scopo puramente divulgativo e per questo motivo non possono sostituire in alcun caso il consiglio di un medico (ovvero un soggetto abilitato legalmente alla professione).
"Ciò che sappiamo è una goccia, ciò che ignoriamo un oceano!" Isaac Newton. Essendo impossibile tenere a mente l'enorme quantità di informazioni, l'importante è sapere dove ritrovare l'informazione quando questa serve. U. Eco
www.riassuntini.com dove ritrovare l'informazione quando questa serve