Il linguaggio Html

Materie:Appunti
Categoria:Informatica

Voto:

1 (3)
Download:85
Data:12.01.2001
Numero di pagine:25
Formato di file:.doc (Microsoft Word)
Download   Anteprima
linguaggio-html_2.zip (Dimensione: 29.09 Kb)
readme.txt     59 Bytes
trucheck.it_il-linguaggio-html.doc     98 Kb


Testo

l'HTML
HTML è l'acronimo di HyperText Markup Language che tradotto in italiano suona come Linguaggio di Contrassegno Ipertestuale.
Per comprendere meglio cosa sia l'HTML definiamo anzitutto il concetto di ipertesto. L'ipertesto è un sistema non lineare di strutturare le informazioni. Mentre un romanzo lo leggi dalla prima pagina all'ultima secondo un'ordine rigidamente sequenziale (ammenochè tu non riesca a trattenerti leggendo il finale anzitempo) l'ipertesto ti consente di saltare da un documento all'altro permettendoti di seguire il filo logico dei tuoi pensieri. Detto così, quello che ho scritto forse sembra strano. Provo dunque a spiegarmi meglio con un esempio.
Immagina di essere immerso nella lettura di un documento riguardante James Joyce, da questo documento potresti saltare ad uno che parla dell'incantevole Dublino (città in cui Joyce è nato), da qui potresti raggiungere un documento riguardante gli U2 e se e stato previsto un adeguato collegamento potresti anche sentirne alcune canzoni... ...e si potrebbe procedere così all'infinito!
L'ipertesto viene definito un sistema non lineare, proprio perché consente di saltare da un documento ad un altro senza che sia necessario seguire un percorso predefinito.
L'HTML opera contrassegnando il testo per mezzo di alcuni elementi che prendono il nome di tag attraverso questi elementi e relativi attributi è possibile formattare un testo e trasformarlo in ipertesto.
Un documento HTML inoltre non necessita di un particolare software o hardware per essere sviluppato, questo significa che tale documento potrà essere reso disponibile su diverse piattaforme e senza il vincolo del possesso di un particolare programma.
Non è tutto oro quello che luccica, in effetti questo sistema di contrassegno comporta che lo stesso documento può essere (e difatti spesso lo è) visualizzato in modo diverso da differenti browser (il programa che consente di visualizzare i documenti ipertestuali presenti sul World Wide Web).
Ad esempio è possibile definire un titolo all'interno di un documento HTML ma il modo in cui quest'istruzione viene interpretata varia da browser a browser, il risultato è che non si saprà mai con precisione come apparirà il documento.
Tutto ciò potrebbe risultare frustrante. Se si è trascorso molto tempo nella definizione dell'aspetto di una pagina non è piacevole scoprire che questo risulta addirittura un ostacolo alla lettura del documento stesso.
Bisogna tuttavia ricordare che quando nel 1992 questo linguaggio di contrassegno vede la luce, presenta ridotte capacità di layout. Il concetto che sta alla base dell'HTML è la possibilità di contrassegnare il contenuto attraverso una serie di elementi che ne identificano l'uso, per cui ad esempio si può adoperare la coppia di contrassegni e per marcare informazioni relative ad un indirizzo, la coppia di tag e viene impiegata per circoscrivere una definizione e cosi via. Si lascia così ampia discrezionalità al browser nell'interpretazione di tali contrassegni.
Ad ogni modo con le ultime versioni dell'HTML sono stati introdotti nuovi strumenti in grado di aumentare il controllo sulla disposizione degli elementi, penso ad esempio alle tabelle ed ai Cascading Style Sheets (fogli di stile a cascata) che danno un notevole aiuto nella realizzazione e manutenzione di siti complessi.
In conclusione l'HTML è un linguaggio nient'affatto difficile da apprendere e con questa guida ti aiuterò a superare anche quei piccoli ostacoli che potresti incontrare...
...e allora perchè non provare?
La struttura base di un documento
Per realizzare un documento HTML non hai bisogno di un particolare programma, un semplice elaboratore testi come il Blocco Note di Windows o il SimpleText sul Mac sarà più che sufficente allo scopo.
Esiste tuttavia un altro sistema molto meno faticoso che ti consente di realizzare documenti HTML di buona fattura, mi riferisco all'impiego di alcuni programmi, i cosiddetti editor HTML , tuttavia ritengo che prima di imparare ad utilizzarne uno dovresti usare il metodo più difficile (scoprirai che quando c'è l'HTML di mezzo la parola difficile non fa paura :-), questo non è il suggerimento di un sadico (o forse si) solo così sarai in grado di utilizzare al meglio questi superandone i limiti intrinseci e soprattutto disporrai di una maggiore dimestichezza con l'impiego dell'HTML.
Un documento HTML è un file di testo composto da una serie di elementi (che da qui in avanti chiamerò tag), e relativi attributi, attraverso queste istruzioni il documento presenta testo, immagini, animazioni, suoni, così da creare un documento multimediale.
Ogni tag e racchiuso tra i segni di minore "", per cui questa è la sintassi:
dove con nome_del_tag si intende il nome del comando che si impartisce. Un'importante annotazione da fare e che generalmente i tag lavorano in coppia.
Esempio 2.1
«L'adolescenza è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»
Gene Wilder - attore
La parola adolescenza è racchiusa tra due tag, il tag di chiusura e caratterizzato da una barra che precede il nome del tag stesso (in questo caso la lettera B).
B sta per bold che in italiano significa grassetto per cui il risultato che ottengo è il seguente:
«L'adolescenza è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.» Gene Wilder - attore
I tag possono anche essere racchiusi l'uno dentro l'altro, in questo caso si dice che sono annidati.
Esempio 2.2
«L'adolescenza è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»
Questa volta sono presenti due tipi di tag oltre al tag che già conosciamo ecco il tag , accompagnato dal corrispondente tag di chiusura
I sta per italic che in italiano significa corsivo.
Adesso la parola adolescenza non solo è scritta in grassetto ma anche in corsivo. Per cui avrò:
«L'adolescenza è quell'età in cui i ragazzi non sanno se continuare a picchiare le ragazze o cominciare a baciarle.»
È quindi giunto il momento di vedere quali sono e a cosa servono i tag che stanno alla base di un documento HTML.
Listato 2.3
Guarda in alto nella barra del titolo!!!

Per vedere quale risultato produce il listato 2.3 segui questa procedura:
• Apri l'elaboratore testi (Blocco Note su Windows o SimpleText su Mac)
• Digita il listato 2.3 (o più semplicemente copia e incolla!)
• Salva il file con il nome titolo.htm
• Apri il tuo browser (Netscape Navigator, Internet Explorer, Opera ecc.) e carica il file in questione.
Deluso? Magari dopo l'inserimento di tutti quei tag ti aspettavi qualcosa di più interessante che un semplice sfondo verde. Cerchiamo allora di capire a cosa servono tutte queste istruzioni e perchè è necessario inserirle in una pagina web.
Il tag indica l'inizio del documento e il corrispondente tag di chiusura ne indica la fine. Questo tag comunica al browser che il file prelevato è stato redatto secondo quel linguaggio di contrassegno che è l'HTML.
L'omissione di questa coppia di tag non comporta in genere alcun problema, tuttavia alcuni browser potrebbero alterarsi rifiutandosi di caricare la pagina o caricarla in modo... creativo!
La coppia di tag e contrassegnano ripsettivamente l'inizio e la fine dell'intestazione di un documento HTML, come il begin/end in pascal.
La coppia di tag e delimitano il titolo.
Tutto quanto digitato tra questi due tag appare nella barra del titolo (è la barra che si trova più in alto nella finestra del tuo browser).
Attenzione All'interno di questa coppia di tag non è possibile annidare nessun altro tag!
La coppia di tag e racchiudono tutti gli altri tag che verranno utilizzati per dar vita al documento HTML.
Il tag supporta 6 attributi.
bgcolor="valore". Assegnando un valore a questo attributo è possibile definire un colore di sfondo per la pagina che si intende creare. Esistono 2 modi per impostare questo valore:
• Si inserisce il nome del colore, in inglese ovviamente!
I colori disponibili sono sedici: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow.
Sebbene questo sistema sia più intuitivo comporta un paio di difetti. Non tutti i browser sono in grado di interpretare questi valori e poi così facendo si ha un controllo limitato sulle sfumature riproducibili come colore di sfondo.
• Si scrive una sequenza di questo tipo #RRGGBB dove:
• al posto di RR si inseriscono due cifre esadecimali che definiscono la gradazione di rosso;
• al posto di GG si inseriscono due cifre esadecimali che definisco la gradazione di verde;
• al posto di BB si inseriscono due cifre esadecimali che definisco la gradazione di blu. Miscelando queste 3 gradazioni si ottiene il colore di sfondo.
Le cifre esadecimali sono: 0123456789ABCDEF.
Esempio 2.4
Se scrivessi il seguente tag:
otterrei uno sfondo nero. Tutti i colori sono stati impostati al minimo valore possibile.
Se invece scrivessi così
otterrei uno sfondo bianco. Tutti i colori sono stati impostati al massimo valore possibile.
Nel mezzo c'è un'ampia gamma di colori. Potrebbe sembrare un sistema complesso in realtà non lo è affatto. Un piccolo aiuto te lo darà la tavola dei colori che rappresenta la prima appendice .
Ad ogni modo se usi Paint Shop Pro 6.0 (ma anche una versione meno recente va ugualmente bene) noterai che una volta selezionato un colore ottieni immediatamente la tripletta esadecimale preceduta dal cancelletto (#) da inserire all'interno dell'attributo bgcolor.
background="percorso/nome_immagine". Questo attributo è utilizzato per inserire un'immagine come sfondo della pagina che si intende creare.
Non è affatto necessario che l'immagine che si vuole utilizzare riempia tutto lo spazio, il browser si preoccuperà di ripeterla tante volte quanto si renderà necessario a tappezzare tutto lo sfondo.
Tra virgolette va inserito il percorso che consente al browser di stabilire dove si trova l'immagine per poterla usare come sfondo.
Nel caso in cui questa immagine sia messa nella stessa directory (cartella) in cui si trova il documento HTML che stai sviluppando sarà sufficiente inserire solo il nome dell'immagine e la sua estensione (che presumibilmente sarà GIF o JPG ma questo e argomento della 5 lezione
text="valore". Dal momento che è possibile modificare il colore di sfondo e lecito, ed in diversi casi necessario intervenire sul colore che il testo può assumere così da impostare un contrasto tra sfondo e caratteri che non affatichi nella lettura.
Anche in questo caso ci sono due sistemi per impostare questo valore, gli stessi menzionati per l'attributo bgcolor
link="valore". I link, in italiano collegamenti ipertestuali, sono quelle parole (ma possono essere anche immagini) che presentano un colore diverso dal resto del testo e sono sottolineate, cosa siano i link e argomento della lezione 6 per cui in questa sede mi limito a dirti che grazie ai link puoi saltare da una pagina ad un'altra, da un sito ad un altro ecc. In genere i link hanno il colore blu ma questo colore può essere modificato. Come?
in 2 modi... che conosci già perchè sono gli stessi adottati per l'attributo bgcolor
alink="valore" Se navighi da un po di tempo avrai notato che quando attivi un link e cioè quando poni il puntatore del mouse (sempre che tu non ti stia usando la tastiera per navigare) sul link e tieni premuto il tasto destro il link cambia colore, in genere assume il colore rosso.
Anche su questo colore puoi esercitare il tuo onnipotente controllo e modificarlo come credi usando uno dei due sistemi indicati per l'attributo bgcolor
vlink="valore" Dopo aver usato un link questo assume un colore diverso affinchè ci si possa ricordare che da quella parte si è già passati.
In genere i link visitati assumono colore viola. Mi sembra superfluo aggiungere che questo colore è modificabile secondo i due metodi che ormai conosci alla perfezione.
Formattazione del testo
Per quanto interessanti ed utili possano essere le informazioni che hai intenzione di inserire in un sito Internet saranno sempre in molti a tenersene alla larga se queste informazioni non sono accessibili in modo razionale.
Alle informazioni da inserire pensi tu mentre io ti aiuterò renderne la presentazione più accattivante.
Un primo importante passo consiste nell'apprendere quei tag necessari per dare inizio ad una formattazione del testo.
Prendiamo in esame il listato 3.1
racconto
Ospiti e letti.
La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.
L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.
A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua)
Visualizza questo testo per renderti conto di come il browser (Netscape Navigator, Internet Explorer ecc.) lo interpreti. Per farlo puoi copiare ed incollare il listato all'interno di un elaboratore testi e salvare il tutto con estensione .htm oppure .html.
La conclusione è che un documento senza alcuna formattazione del testo come quello appena preso come esempio risulta praticamente illegibile.
Cerchiamo dunque di migliorare l'aspetto di questo documento iniziando dai titoli.
All'interno di un documento HTML i titoli vengono creati attraverso i 6 tag H (che sta per HEADER che in italiano significa appunto titolo).
Titolo di primo livello
Titolo di secondo livello
Titolo di terzo livello
Titolo di quarto livello
Titolo di quinto livello
Titolo di sesto livello

Facendo leggere le istruzioni dal tuo browser otterrai questo risultato:
Titolo di primo livello
Titolo di secondo livello
Titolo di terzo livello
Titolo di quarto livello
Titolo di quinto livello
Titolo di sesto livello
Sulla base di quanto appena visto listato 3.1 inseriamo un titolo che utilizzando la seguente sintassi: Ospiti e letti
A questo punto introduciamo il tag (la P sta per paragraph; in italiano, paragrafo) il cui corrispondente tag di chiusura ha la forma usuale
Questo tag di chiusura è opzionale per cui può essere omesso. Il browser capirà che un paragrafo è terminato quando incontrerà un nuovo tag di apertura ()
Il tag viene impiegato per segnare l'inizio di un nuovo paragrafo e produce una spaziatura di riga maggiore di quella normalmente adottata proprio per separare anche visivamente ogni paragrafo da quello che lo precede.
Sempre con riferimento al listato 3.1 spezziamo il testo in 3 paragrafi procedendo come segue:
La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti. Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.
L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali. L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.
A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua)
Il tag supporta l'attributo align=allineamento dove al posto di allineamento si può inserire uno dei tre paramentri consentiti e cioè:
• right per un allineamento del paragrafo a destra;
• center per un allineamento del paragrafo al centro;
• left per un allineamento del paragrafo a sinistra; questa è la soluzione normalmente adottata, per cui tale allineamento viene adottato senza che sia espresso esplicitamente
Questo attributo è supportato anche dai tag di titolo, per cui, per centrare il titolo di questo racconto scriveremo:
Ospiti e letti
Supponiamo ora di voler introdurre un'interruzione di riga, per far ciò ricorriamo al tag
(che è l'abbreviazione di break che in in italiano significa interruzione). Sinora tutti i tag incontrati lavoravano in coppia il tag BR è invece un tag solitario, non presenta dunque alcun tag di chiusura.
Se nel listato 3.1 vogliamo iniziare una nuova riga dopo ogni punto il listato dovrà essere così modificato:
La casa in cui vivo con la mia famiglia è piccola ma accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.

Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.
L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.

L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.
A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua)
Se decidi di intervenire sul modo in cui viene visualizzato il testo (tipo, dimensione e colore) dovrai impiegare la coppia di tag e . Il tag di apertura dovrà contenere almeno uno dei tre attributi richiesti per produrre l'effetto o gli effetti desiderati. Così, se si intende modificare il tipo di carattere (ad esempio, comic sans ms) scriverai:
testo di tipo comic sans
Se vuoi riprodurre il testo, o parte di esso, in un colore diverso scriverai:
testo colorato
il valore richiesto può essere espresso in due modi diversi
Se invece vuoi modificare la dimensione del testo scriverai:
testo di dimensione diversa
il valore richiesto può essere un numero da 1 a 7 compresi. In alternativa puoi ricorrere ai numeri relativi inserendo numeri da -6 a +6 compresi. Ti ricordo che il valore predefinito per il font è 3.
Puoi impiegare i tag appena appresi per modificare ancora il listato 3.1, ad esempio alternando il colore del testo per i singoli paragrafi, riproducendo il testo con un font diverso e riducendo o ingrandendo alcune parole.
Riscrivo per intero il listato con le ultime modifiche, per vedere come viene letto dal tuo browser copia e incolla il testo in un elaboratore di testi, salva in formato .htm o .html e visualizza il documento con il tuo browser oppure schiaccia il pulsante che trovi in fondo al listato stesso.
racconto

Ospiti e letti

La casa in cui vivo con la mia famiglia è
piccola ma
accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.

Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.

L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.

L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.

A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua)
Altri tag di formattazione....
Hai appena appreso l'uso del tag
, grazie ad esso puoi spezzare una riga nel punto che hai stabilito,
ma a volte potresti voler ricercare l'effetto contrario. Ossia potresti voler costringere un'insieme di parole su una stessa riga anche quando il tuo browser non ne vuole sapere e si ostina a mandare il testo daccapo prima del dovuto, per far ciò bisogna istruire esplicitamente il browser racchiudendo tutte le parole e/o i numeri che si intende mantenere sulla medesima riga nella coppia di tag
e (abbreviazione di nobreak)
Se disponi di un browser grafico come Netscape Navigator o Internet Explorer sicuramente stai visualizzando questo testo con un tipo di carattere detto a larghezza variabile, questo perchè alcuni caratteri occuperanno meno spazio di altri (ad esempio una i occuperà meno spazio di una m). Esistono tuttavia anche caratteri cosiddetti a spaziatura fissa che assegnano uno stesso spazio ad ogni carattere. Per riprodurre quest'ultimo tipo di carattere si può ricorrere alla coppia di tag e operando nel modo consueto:
testo a spaziatura fissa
Il testo a spaziatura fissa si presenta in questo modo
Con la coppia di tag e si può creare un blocco (contenente testo, immagini e qualunque altra serie di elementi che è possibile implementare) di cui è possibile gestire l'allineamento. Difatti il tag supporta l'attributo align="allineamento" il cui funzionamento e spiegato più su a proposito del tag
Per enfatizzare alcune parole di un testo hai appreso nella precedente lezione come inserire il grassetto e il corsivo.
Se vuoi sottolineare o barrare alcune parole dovrai ricorrere alle seguenti coppie di tag
testo sottolineato
testo sottolineato
Impara ad usare questo tag con parsimonia poichè anche i link (collegamenti ad altre risorse), sono generalmente sottolineati, per cui un uso frequente di questo tag potrebbe generare qualche confusione in chi sta visitando la tua pagina.
Per barrare un testo userai l'apposita coppia di tag nel modo consueto:
testo barrato
testo barrato
Due coppie di tag come e e poi, e si rivelano utili per riproporre in una pagina web sigle particolari quali:
• le formule chimiche.
Esempio: una molecola d'acqua è H2O
ed ecco come si opera: H2O
• le potenze.
Esempio: 2 elevato 3: 23
ed ecco come si opera: 23
Per spezzare un blocco di testo da una immagine o da un altro blocco di testo spesso si ricorre a righe orizzontali che è possibile inserire attraverso questo tag .
la lunghezza e la larghezza di questa linea sono rispettivamente definite attraverso i due attributi width="valore" e height="pixel".
Al posto del termine valore si inserisce la larghezza in pixel o in percentuale della larghezza del documento; mentre per regolare lo spessore della linea orizzontale si ricorre all'attributo height="..." il cui valore può essere specificato solo ed esclusivamente in pixel.
Un altro attributo che presenta questo tag è quello che ne regola l'allineamento , il suo funzionamento è spiegato più su.
Elenchi puntati e numerati:
Essere in grado di implementare un elenco all'interno della propria pagina web è molto più utile di quanto non possa sembrare, sia perchè si tratta di un modo di presentare le informazioni familiare a tutti sia perchè consente di disporre una serie di nozioni in modo razionale e chiaro.
Distinguiamo due tipi di elenchi: quelli ordinati da quelli non ordinati.
Iniziamo dai primi, in genere questo tipo di elenchi è impiegato per esprimere una sequenza di operazioni o una classifica.
La sintassi per implementare una lista ordinata è la seguente
elemento 1
...
elemento n

Analizziamo ora questa serie di tag.
Con si comunica al browser che ha inizio una lista ordinata: in inglese ordered list.
Ognuno degli elementi della lista, in inglese listed item, è preceduto dal tag .
La lista ha termine con il tag di chiusura con cui si comunica, appunto, il termine della lista.
Esempio 4.1
Esempio 4.1
la classifica dei miei libri preferiti
La famiglia Winshaw - J. Coe
Se questo è un uomo - P.Levi
Il piano infinito - I. Allende
Sotto il culo della rana - T. Fisher
Avere o essere - E. Fromm

Il tag di apertura supporta l'attributo type il quale risulta molto utile se bisogna interrompere la lista e poi riprenderla procedendo con la numerazione.
L'attributo type="valore" accetta 5 diversi valori corrispondenti a cinque diverse numerazioni:
• 1: numerazione araba (quella predefinita ossia di default)
• i: numerazione romana (lettere minuscole)
• I: numerazione romana (lettere maiuscole)
• a: numerazione letterale (lettere minuscole)
• A: numerazione letterale (lettere maiuscole)
Ora vediamo come funziona questo attributo con un esempio pratico.
Esempio 4.2
Esempio 4.2
prendi carta e penna ed elabora una bozza del tuo sito
sviluppa il listato HTML necessario per creare l'effetto desiderato
se ti è possibile, testa la tua pagina con diversi browser

Quest'ultimo punto è molto importante. Ricorda che l'HTML è visualizzabile su diverse piataforme senza che vi sia la necessità di un particolare software. Per cui sviluppare un documento HTML correttamente visualizzabile solo con un certo programma significa andare contro la stessa natura dell'HTML, e cosa più importante, ciò significa precludere importanti informazioni a persone potenzialmente interessate.
verificare il funzionamento dei link
mettere la pagina in rete

Se non avessi inserito l'attributo start nella seconda lista questa sarebbe ripartita dalla lettera a anzichè riprendere dalla lettera d, adottando questo accorgimento faccio capire che si tratta di una prosecuzione della lista precedente.
N.B. Nonostante abbia scelto una numerazione diversa da quella araba, per far proseguire la lista da una posizione diversa dalla prima devo adottare un numero intero come valore dell'attributo start (in questo caso 4 perche intendo riprendere la lista dalla quarta lettera minuscola ossia la d)
Gli elenchi non ordinati presentano nella costruzione la stessa struttura di quelli ordinati, a cambiare sono solo i tag di apertura e di chiusura: in questo caso avremo:
all'inizio della lista e alla sua fine. UL sta per Unordered List ossia lista non ordinata.
Il tag di apertura supporta il tag type attraverso il quale è possibile modificare i punti elenco. Questo attributo accetta uno dei seguenti 3 valori:
• disc che riproduce un pallino nero
(il tipo di punto elenco solitamente visualizzato)
• circle che riproduce un pallino vuoto
• square che riproduce un quadrato nero
Un terzo tipo di elenco che rientra nella categoria degli elenchi non ordianti è quello dell'elenco di definizione.
Immagina di avere una lista di termini e di voler dare per ciascuno di essi una definizione (questo tipo di lista è ottimo per creare un glossario). La sintassi è la seguente.
termine 1definizione 1
termine 2definizione 2
termine 3definizione 3

Ecco un possibile impiego di questo tipo di lista:
Esempio 4.3
Esempio 4.3
bannerun banner è l'equivalente elettronico di un cartellone pubblicitario, si tratta di quei rettangoloni che trovi in parecchie pagine web e che ti invitano a cliccarci di sopra, generalmente per raggiungere il sito dello sponsor.
newsgroupin italiano, gruppo di discussione, una sorta di bacheca elettronica dove ogni utente internet può affiggere il proprio messaggio (che dovrebbe essere pertinente con il tema del gruppo)
attachmentin italiano, allegato, con questo termine ci si riferisce ad un file allegato ad un messaggio di posta elettronica.

Inseriamo un'immagine
Prima dell'avvento del World Wide Web, la parte multimediale di Internet, la rete era molto più grigia e caotica.
I documenti HTML, se ben realizzati, hanno l'indubbio pregio di presentarci informazioni (aggiornabili a bassi costi) in modo chiaro e accessibile. Uno dei suoi punti di forza sta nella possibilità di impiegare la grafica. È proprio di immagini che ci occuperemo nelle prossime righe e più precisamente apprenderai come implementarle in un documento HTML
Il tag che imparerai ad usare è . Iniziamo col dire che questo tag non richiede un corrispondente tag di chiusura, inoltre necessita di un attributo che comunichi al browser dove si trova l'immagine che si vuole visualizzare.
il percorso si può omettere qualora l'immagine si trovi nella stessa directory in cui è stato collocato il documento HTML.
Tutti gli altri attributi del tag sono opzionali.
Gli attributi width e height determinano rispettivamente l'ampiezza e l'altezza dell'immagine. Il browser è in grado di visualizzare correttamente l'immagine anche senza questi parametri...
...tuttavia il tuo browser ti sarà certamente grato di questo aiuto perchè così facendo non sarà costretto a desumere da solo tali valori e potrà dedicarsi a scaricare gli altri elementi di cui è composto il documento, riducendo i tempi di attesa che, si sa, in rete sono, già di per se, abbastanza lunghi.
Molti utenti Internet disabilitano la visualizzazione delle immagini per muoversi più rapidamente tra le pagine web. Per queste persone le informazioni che potresti fornire attraverso un immagine andranno perse. A questo scopo puoi inserire l'attributo
alt="descrizione".
Al posto di descrizione si inseriscono alcune parole che descrivano cosa sia ritratto nell'immagine. In questo modo dai un'alternativa a chi non è in grado o non vuole visualizzare elementi grafici di non perdere alcuna informazione (o di informarlo su cosa sta perdendo).
L'attributo border=numero è utlizzato quando l'immagine è un collegamento ipertestuale.
In questo caso essa è circondata da un bordo (in genere blu) proprio per segnalare che l'immagine in questione è un link. Più alto è il numero che si specifica maggiore sarà lo spessore del bordo.
L'ultimo attributo che prendiamo in considerazione è quello che determina l'allineamento dell'immagine rispetto alla riga di testo in cui dovrà essere inserita.
l'attributo è align="allineamento" dove al posto di allineamento si nserisce uno dei 5 valori possibili.
• left: l'immagine si trova a sinistra, il testo scorre a destra:
• right: l'immagine si trova a destra, il testo scorre a sinistra;
• top: bordo superiore dell'immagine allineato al bordo superiore del testo
• middle: il testo si trova in corrispondenza della metà del valore height
(più difficile da spiegare che da implementare :-)
• bottom: bordo inferiore dell'immagine allineato al bordo inferiore del testo;
I formati di immagini più impiegati in rete sono gif e jpg, questi due formati sono supportati da tutti i browser in uso, invece formati diversi, che comunque potrebbero affermarsi in un prossimo futuro, al momento creano non pochi problemi.
Il formato GIF supporta fino a 256 colori per cui è più adatto per la creazione di logo, disegni e qualsiasi altra cosa contenga solo testo ma non dispone di un numero sufficiente di colori per riprodurre in modo apprezabile la maggior parte delle fotografie.
I file JPEG possono contenere fino a 16.700.000 colori e sono più adatte per le fotografie, mentre non si prestano bene ai testi e ai disegni.
Decidendo di inserire della grafica in un documento HTML hai due possibilità
• crei le immagini da te utilizzando un programma di grafica più o meno complesso;
• utilizzi elementi grafici creati da altri.
Se hai optato per questa seconda scelta ti suggerisco di non prelevare immagini da altri siti senza chiedere precedentemente il consenso a chi il sito lo ha realizzato. Ad ogni modo per toglierti ogni tentazione ti segnalo un paio di siti che offrono una marea di immagini da prelevare gratuitamente senza limitazioni (o quasi).


I link
I link più precisamente hyperlink, in italiano collegamenti ipertestuali sono la quintessenza del Web. Un link altro non è che del testo o un'immagine, posto all'interno di un documento che funziona come puntatore ad altre risorse. In questa lezione imparerai come creare un link che punti:
• ad un'altra pagina dello stesso sito;
• ad un altro sito;
• ad un diverso punto della stessa pagina;
• ad un indirizzo di posta elettronica
Per creare un collegamento si ricorre alla coppia di tag e .
Il tag di apertura deve necessariamente avere l'attributo href="percorso/nomedocumento" qualora si inserisca tra doppi apici solo il nome del documento il browser assumerà che esso si trova nella stessa directory della pagina corrente.
Per cui posso scrivere: collegamento ad un'altra pagina nella stessa directory
Questa coppia di tag viene letta dal browser dando luogo a questo risultato:
collegamento ad un'altra pagina nella stessa directory
Qualora il documento cui punta il link si trova in una diversa directory, questa dovrà essere specificata.
collegamento ad un'altra pagina di una diversa directory
collegamento ad un'altra pagina di una diversa directory
In questo caso, il documento a cui punta il collegamento si trova nella directory esempi, il nome di tale directory va specificato prima del nome della pagina e va seguito dalla barra inversa.
Se il link punta ad una pagina di un altro sito è necessario inserire l'indirizzo completo del sito in questione, ad esempio se voglio creare un link che punti al sito del'A.GE.DI. (Associazione Genitori Disabili) scriverò:
A.GE.DI.
ed il browser produrra questo risultato:
A.GE.DI.
Non solo il testo ma anche un'immagine può diventare un collegamento ad un'altra risorsa. In questo caso sarà necessario inserire il tag tra la coppia di tag e , mi spiego meglio con un esempio.
Prendiamo in considerazione un’immagine, per farla diventare un link ad un’altra pagina web, procediamo come segue:

Il risultato prodotto da questi tag è il seguente:

in genere le immagini che rappresentano un collegamento ad un'altra risorsa sono circondate da un bordo blu, il quale potrebbe anche non piacere, proprio per questo motivo è possibile implementare l'attributo border attribuendogli valore 0 cosi da eliminare il bordo in questione. Sulla base di quanto appena detto modifichiamo la serie di tag precedentemente illustrati:

In questo caso sparirà il bordo che prima circondava l'immagine, se invece se si vuole aumentarne lo spessore, sarà sufficente indicare per l'attributo border un valore più grande di 1.
Come anticipato i link possono puntare anche a punti diversi della stessa pagina. Prima di creare un collegamento ad un punto preciso della pagina bisogna marcare questo punto. Per far ciò si ricorre sempre alla coppia di tag e . Tuttavia questa volta l'attributo che supporta il tag di apertura è name="nome_dell'ancora". Una volta creata l'ancora si crea un collegamento a quest'ancora e il gioco e fatto.
Esempio 6.1
racconto

Ospiti e letti

La casa in cui vivo con la mia famiglia è
piccola ma
accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.

Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.

L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.

L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.

A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua)
Supponiamo che in fondo a questo documento voglia inserire un link che punti in testa al documento stesso, creando un effetto analogo a quello usato in ogni lezione di questo manuale al cui termine è posto un link che consente di raggiungere la testa del documento senza che sia necessario far scorrere la barra verso l'alto.
Procederò come segue, innanzi tutto marco il punto che si vuole raggiungere, che in questo caso è il punto più alto della pagina e cioè il titolo per cui subito prima del tag scriverò:

Inoltre in fondo al listato inserisco il link che punti al punto marcato operando nel modo seguente:
torna su
Così ho creato un collegamento al punto che ho marcato in testa al documento.
Ricapitolando ecco l'intero listato:
racconto

Ospiti e letti

La casa in cui vivo con la mia famiglia è
piccola ma
accogliente, che sia piccola è un dato di fatto, che sia accogliente invece lo hanno decretato in massa i miei parenti.

Questo fine settimana, ad esempio, arrivano alcuni cugini di non so quale grado a farci visita.

L'arrivo di questi ospiti segna inevitabilmente l'inizio di spossanti giochi di potere all'interno della famiglia, doppi e tripli giochi sono del tutto naturali.

L'obiettivo ultimo è quello di accaparrarsi un letto decente per la notte.

A causa delle mie pessime doti diplomatiche e di una cronica incapacità di negoziare alcunchè spesso sono proprio io ad aggiudicarmi il peggiore letto della casa...
...(continua)
ritorna all'inizio della pagina
Per vedere quale risultato produce questo listato puoi ricopiarlo in un documento di testo salvandolo con estensione .htm
Ogni ancora deve avere un nome univoco se così non fosse il tuo browser potrebbe arrabbiarsi e reagire in malo modo!
Puoi anche voler creare un link che punti ad un determinato punto di un'altra pagina. Anche in questo caso devi marcare la destinazione del tuo collegamento, a questo punto dovrai solo preoccuparti di aggiungere nel link oltre al nome dell'ancora, anche il nome della pagina in cui esso si trova.
Il procedimento è analogo a quello precedente.
Ad ogni modo, vediamo qual'è il modo corretto di procedere. Se volessi creare un link da questa lezione ad un punto specifico della lezione 2, ad esempio all'inizio del listato 2.3, dovrò agire come segue:
• nel documento HTML della lezione 2, immediatamente prima di listato 2.3 inserisco l'ancora:

• in un qualunque punto di questa pagina creo il link a quel punto specifico della lezione 2 operando come segue:
vai al listato 2.3
Un link può puntare anche ad un indirizzo di posta elettronica, la sintassi in questo caso è leggermente diversa ed è la seguente:
e-mail
dinanzi ad un'istruzione del genere il browser creerà un link nella solita maniera:
e-mail
Questa volta se si clicca sul link questo non porterà da nessuna parte, ma se il mailer, ossia programma per la gestione della posta elettronica è stato correttamente configurato, si aprirà la mascherina che consente di spedire un messaggio e-mail.
C'è un attributo del tag al quale non abbiamo fatto riferimento, si tratta dell'attributo target, apprenderai come utilizzarlo nella sezione relativa ai frames poichè il suo buon uso permette di ottenere una corretta gestione di quest'ultimi.
Le tabelle
Le tabelle rappresentano uno dei più potenti strumenti a disposizione del progettista di un sito internet per realizzare un sito davvero accattivante grazie ad un maggiore controllo degli elementi presenti nella pagina.
Costruiamo una semplice tabella di 2 righe per 2 colonne, per un totale di 4 celle. Una volta appresa la struttura sarà facile modificarla inserendo a piacimento altre righe e/o colonne.
I limiti di una tabella sono contrassegnati dalla coppia di tag e , il primo ne segna l'apertura mentre il secondo ne comunica la fine.
Dopo il tag si può inserire (scrivo può perchè si tratta di un'opzione) il tag .
Così facendo si può inserire un'intestazione per la tabella che a seconda del valore specificato si può trovare in testa alla tabella
align=top
oppure in coda
align=bottom
Si procede con l'apertura della prima riga con il tag , la chiusura della riga viene decretata mediante l'inserimento del corrispondente tag di chiusura .
Tra questi due tag si inseriscono quelli che specificano la creazione delle celle, (è dunque ovvio che tutte le celle che si trovano fra questi due tag verranno visualizzate nella medesima riga) operando nel modo seguente:
contenuto della cella
Ora che conosciamo tutti i tag necessari alla creazione di una tabella disponiamo di tutti gli elementi per crearne una:
Creazione di una tabella:

Bene, inseriti i tre campi di testo, possiamo includere un bottone che consenta di inviare le informazioni apppena introdotte.
Nota bene, questa volta il valore assegnato all'attributo type è button (utilizzando dunque un'analoga sintassi abbiamo introdotto un diverso elemento di una form, il bottone appunto, semplicemente sostituendo il valore assegnato all'atributo type), l'attributo value, in questo caso, consente di specificare la o le parole che appariranno sul bottone.
A questo punto dichiaro la conclusione del form inserendo l'opportuno tag di chiusura

Ricapitolando ecco il listato che abbiamo prodotto:
Inserisci il tuo nome
Inserisci il tuo autore
preferito
Inserisci il tuo e-mail

Et voila! Ecco la tua prima form :-) Beh, a voler essere pignoli si potrebbe notare che per come è stato costruito, questo form, non è un granchè, ad essere più precisi risulta del tutto inutile, difatti se si prova a schiacciare il bottone Spedisci si otterrà come risultato: il grande nulla (bel libro di James Ellroy).
E allora badiamo alla sostanza, ossia, una volta realizzata la mia piccola form come faccio a farmi arrivare queste informazioni via e-mail? Ci sono due metodi il primo è un po' più rozzo ma infinitamente più semplice e immediatamente utilizzabile con le conoscenze sin qui apprese, il secondo richiede che mastichiate un po di Perl che abbiate accesso ad un server che vi mettiate una calzamaglia rossa con mantello blu e sappiate volare alla velocità della luce...
...non scoraggiarti, anche questo si può fare senza chiamarsi Superman, ma prima di imparare a volare sarà bene riuscire a stare in piedi senza cadere!
Procediamo dunque con ordine, è ovvio che se inserisco un form all'interno del mio sito voglio fare in modo che queste informazioni, una volta inserite possano giungere a destinazione (ossia possano arrivarmi via e-mail). Il metodo più semplice consiste nell'aggiungere un paio di attributi al tag di apertura:
Con il primo di questi due attributi sto specificando l'indrizzo di posta elettronica al quale voglio che siano inviate le informazioni raccolte, con il secondo attributo (che può assumere due diversi valori, ossia get e post) specifico il modo in cui le informazioni devono essere inviate, ci basti sapere che, per questo sistema, è necessario inserire il valore post.
Bene, a questo punto sarai in grado di ricevere via e-mail le informazioni che ti sono eventualmente state inviate, tuttavia avrai il tuo bel da fare nella lettura dell'e-mail che riceverai perchè tali informazioni ti arriveranno prive di alcuna formattazione. Difatti ecco un esempio di quello che potresti ricevere via e-mail se un tuo visitatore compilasse e ti spedisse le info richieste dal form di cui sopra.
Nome=Gabriele&Autore=Stefano+Benni&E-
[email protected]
Come avevo detto c'è anche il metodo più difficile, ma proprio perchè tale ci arriveremo con calma in una successiva lezione.
Per ora ci basti sapere che è possibile in questo modo gestire piccole form, forse in un modo poco elegante, ma di semplice implementazione.

Esempio



  


  1. Foge

    I can't believe I've been going for years witohut knowing that.