CORSO HTML: PARTE PRIMA
- EDITOR HTML
- TAG FONDAMENTALI
- CONSIGLI
- COLORE E IMMAGINI DI SFONDO
- FILE MIDI
- FORMATTARE UN TESTO
- CREARE PARAGRAFI
- ELENCHI
- RICHIAMARE IMMAGINI
- COLLEGAMENTI
1. EDITOR HTML.
L' HTML non è un linguaggio di programmazione ma un semplice
sistema di contrassegno indipendente dalla piattaforma. I suoi tag vengono
riconosciuti ed interpretati dai browser Web (Netscape, MsIe, Opera ecc).
Questa peculiarità rende HTML un sistema facile da comprendere.
Editor testuali
Si tratta di programmi che propongono modifiche dirette sul codice HTML
puro con possibilità di preview del risultato. L'utilità maggiore
di questi strumenti è la padronanza del codice HTML puro che riescono a
comunicare agli utilizzatori.
Editor WYSIWYG (FRONT PAGE o Macromedia Dreamweaver che io utilizzo)
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. Lo sviluppatore non si trova a lavorare su codice HTML ma sulla pagina
così come verrà visualizzata dal browser.
Alcuni consigli per la costruzione di un sito web:
| 1) i siti Web, prima
della pubblicazione, vanno creati in locale, cioè sul tuo hard disk.
Solo successivamente vengono spediti attraverso programmi appositi FTP 2) Per i nomi dei file e per le estensioni degli stessi usa caratteri sempre in minuscolo. 3) Ricorda che la modifica del tuo sito Web avviene tramite programmi FTP (File Trasfer Protocol) mediante password e Userid. Quindi nessun altro, oltre te, può modificare le pagine. 4) Per scrivere codice HTML puoi utilizzare qualsiasi editor HTML testuale (HomeSite, HotDog, DreamWeaver ecc.), ma anche solo Blocco Notes di Win95. Anche se I tag HTML sono case insensitive, cioè assolutamente indipendenti dal maiuscolo e minuscolo, si consiglia in base alle nuove direttive DTD (Document Type Definition):
|
2. TAG FONDAMENTALI
Un documento HTML si divide in due parti fondamentali: l'intestazione
e il corpo del documento.
E' facile comprendere che il corpo del documento contiene
tutti gli elementi della pagina: il testo, le immagini, le applet Java,
il codice Javascript e quant'altro viene materialmente visualizzato dal
browser.
Al contrario, l'intestazione contiene una serie di informazioni necessarie
al browser per una corretta interpretazione del documento, ma non visualizzate
all'interno dello stesso. L'intestazione, quindi, ha un ruolo non apparente
ma sicuramente fondamentale. Solo per citare alcuni elementi forniti dall'intestazione:
il titolo della pagina, i termini chiave per i motori di ricerca, il tipo
di HTML supportato ed i link base di riferimento.
<HTML>
Tutti gli elementi ed il contenuto di un documento HTML sono compresi all'interno
dei marcatori <HTML></HTML>
che, in altre parole, hanno il compito di aprire e chiudere il file.
I tag <HTML></HTML> indicano al browser che il documento è marcato
in HTML, anche se i browser più recenti riescono ugualmente ad interpretare
i tag successivi. Detto questo esistono comunque due ragioni per inserire
sempre il tag <HTML></HTML> all'interno del documento:
HTML non è l'unico linguaggio di contrassegno presente sul WWW (si pensi
solo a XML) e il browser rischia di male-interpretare i tag, confondendoli
con altri linguaggi di markup
DOCTYPE
Seguendo le indicazioni del W3C (consorzio internazionale per l'utilizzo
dell'HTML) Doctype deve essere il primo elemento ad aprire il documento.
Questo vuol dire che andrebbe posto prima di <HTML>.
Si tratta di un tag che non ha bisogno di chiusura e che ha il compito di
fornire informazioni al server Web che ospita la pagina. Le informazioni
fornite da DOCTYPE riguardano il tipo di documento visualizzato oltre ad
essere necessaria alla comunicazione tra browser e server. DOCTYPE deve
essere scritto in una forma standard:
<!DOCTYPE HTML PUBLIC ="-//IETF//DTD
HTML 4.0//EN">
Questa riga fornisce alcune informazioni sul documento:
HTML PUBLIC: il documento è pubblico
IETF: il tipo di HTML pubblico è gestito dalla Internet Engineering Task
Force
DTD HTML 4.0: la versione di HTML supportata è la 4.0
EN: la lingua del documento è l'inglese
L'uso di DOCTYPE è obbligatorio per la validazione! ( NON per il corretto
funzionamento della pagina)
Come si nota agevolmente DOCTYPE è un tag che non prevede un elemento
di chiusura (non va scritto in questo modo: <!DOCTYPE HTML PUBLIC
="-//IETF//DTD HTML 4.0//EN"></DOCTYPE>)
<HEAD></HEAD>
Gli elementi <HEAD></HEAD> sono posti immediatamente
dopo l'apertura del tag <HTML> e racchiudono l'intestazione vera
e propria del documento; cioè tutte le informazioni necessarie al browser,
al Webserver ed ai motori di ricerca. Si tratta del primo elemento letto
dal browser e per questo è il luogo migliore per inserire sintassi script
. All'intero di <HEAD></HEAD> va inserito il titolo del documento
e altre informazioni.
<TITLE></TITLE>
è il più utilizzato all'interno del tag <HEAD>, in quanto fornisce
il titolo alla pagina. Il titolo viene solitamente visualizzato dai
browser nell'intestazione di pagina.
In caso di salvataggio dell'URL con "Aggiungi a preferiti" (per
MsIe) e "Aggiungi Segnalibro" (per Netscape) il tag TITLE dà il
nome al collegamento. In altre parole, quando si salva l'indirizzo, il browser
assegna allo stesso quanto presente all'interno di <TITLE></TITLE>.
Il contenuto riportato tra i tag <TITLE></TITLE> è anche utilizzato
da alcuni motori di ricerca per indicizzare la pagina e trovare parole chiave.
Altavista è probabilmente l'esempio più eclatante. Per questo è bene fornire
nel TITLE una descrizione dettagliata ma sintetica della pagina, con tutte
le parole chiave che i motori possono indicizzare.
META
I motori di ricerca rappresentano una risorsa indispensabile per chi cerca
informazioni sulla rete, e siti quali Altavista, Yahoo, Lycos e Excite sono
tra i piu' visitati su internet.
Figurare all'interno di tali motori di ricerca è fondamentale per chi crea
pagine web e vuole maggior visibilità. 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". Periodicamente questi "spider" monitoreranno le
milioni di pagine contenute nei loro database verificando le eventuali modifiche.
Oltre che essere inseriti nei motori di ricerca e' importante figurare tra
i primi siti che vengono visualizzati nella ricerca (spesso, soprattutto
quando i termini da ricercare sono di largo uso e di carattere generale,
vengono presentate delle liste con migliaia di siti), e per fare questo
è possibile adottare qualche semplice accorgimento.
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.
Le "keywords" (parole chiave) sono i termini che, sinteticamente,
descrivono il contenuto di una pagina web. Se, ad esempio, il sito si occupa
della realizzazione di pagine Web, le keywords saranno:HTML,realizzazione
pagine Web,home page, motori di ricerca,prezzi modici. Il META tag dovrà
essere così impostato:
| <META
name="keywords" Content="HTML, realizzazione pagine
Web, home page, motori di ricerca, prezzi modici"> |
La virgola divide i termini gli uni dagli altri. Le frasi non limitate a singoli vocabili vanno scritte senza virgola perchè il motore di ricerca le trovi in quella stessa forma. E' bene quindi non esagerare col numero di termini all'interno delle keywords.
Altri META tag riguardano l'autore della pagina web:
<META name="author"
content="Nome Cognome">
il titolo che apparira' alla fine della ricerca:
<META name="description"
content="La mia prima home page con la guida di HTML.it">
e il nome dell'editor con cui il documento HTML e' stato generato:
<meta name="GENERATOR"
content="Blocco note di Win95">
Se per qualche ragione desideri che una delle tue pagine NON sia indicizzata
nei motori di ricerca, devi inserire:
<META NAME="ROBOTS"
CONTENT="NOINDEX">
Un altro META Tag e' quello che permette il "refresh" della pagina.
Cio' vuol dire che la stessa pagina o altra differente può essere automaticamente
lanciata dopo un certo numero di secondi che noi stessi impostiamo. Ecco
il codice:
<META HTTP-EQUIV="Refresh"
CONTENT="5; url=pippo.htm">
Dove CONTENT="5 e' il numero di secondi entro cui caricare l'url=pippo.htm
| <!DOCTYPE
HTML PUBLIC ="-//IETF//DTD HTML 4.0//EN"> |
3 - CONSIGLI UTILI
Ecco una serie di suggerimenti per ottenere un buon posizionamento nei Search
Engine:
evitare, per quanto possibile, l'uso di frame HTML;
non iniziare il documento HTML con un'immagine o una tabella;
porre particolare attenzione alla home page del sito;
evitare, per quanto possibile, l'uso di pagine ASP (Active Server Pages)
o nominate con un nome di file dove compare un punto interrogativo "?";
inserire le parole chiave del sito tra i tag <TITLE></TITLE>,
perchè molti spider (Altavista in primis) danno molta importanza a questo;
usare i tag <H1><H2> ecc.
creare "doorpage", cioè delle pagine di supporto a quelle principali,
contenenti testo e keywords attinenti al sito;
registrare non più di una pagina al giorno;
registrare domini di primo livello. Per esempio www.miosito.it piuttosto
che www.servizio.it/miosito
il meta tag "keywords" non deve contenere termini duplicati
e non più di mille caratteri. Il 90% delle ricerche avviene per termini
scritti in minuscolo, per cui è preferibile evitare quelli maiuscoli;
il meta tag "description" è fondamentale perchè a questo il Search
Engine associa il link al sito e non deve superare i 300 caratteri.
4 : DEFINIZIONE DEL COLORE E IMMAGINE DI SFONDO
<BODY>
L'elemento <BODY> è posto in posizione immediatamente successiva alla
chiusura del tag </HEAD> e comunque all'interno degli elementi <HTML></HTML>;
ha un tag di apertura e uno di chiusura, ed all'interno di esso si sviluppa
il corpo del documento.
Se l'elemento <HEAD> conteneva metadati (cioè non materialmente visualizzati
dal browser) la funzione del tag <BODY> è quella di mostrare gli oggetti
(testo, immagini, suoni, applet ecc) della pagina.
La sintassi corretta per l'elemento <BODY> è la seguente:
<BODY>
Contenuto del documento
</BODY>
Il tag <BODY> è utilizzato, oltre che per fornire al browser indicazioni
sulla posizione degli oggetti nel documento, anche per impostare vari attributi
di visualizzazione per il documento. Di seguito vediamo quali.
BGCOLOR
L'attributo BGCOLOR imposta un colore unitario di sfondo. La sintassi corretta
è la seguente:
<BODY BGCOLOR="red">
<BODY BGCOLOR="#ff0000">
L'utilità dei colori esadecimali si ha laddove non si vuole un colore standard
ma sfumato o con diversa tonalità. I più diffusi editor HTML prevedono palette
per la definizione di colori esadecimali, mentre Paint Shop Pro fornisce,
oltre al colore, anche il corrispondente valore esadecimale da copiare/incollare.
BACKGROUND
BACKGROUND ha una funzione simile a BGCOLOR, ma mentre il secondo mostra
un tinta unica del colore, il primo visualizza sullo sfondo un'immagine
in formato grafico .gif o .jpg.
Consideriamo, per esempio, di voler costruire uno sfondo con l'immagine
sfondo.gif ,depositata nella stessa directory del documento,. La sintassi
corretta per impostare l'immagine come sfondo è:
<BODY BACKGROUND="sfondo.gif">
Il browser visualizza l'immagine sfondo.gif e la ripete riempiendo ogni
spazio disponibile.
Quindi è assolutamente necessario creare uno sfondo che, se ripetuto,
non presenti soluzione di continuità, ma un aspetto il più possibile uniforme.
TEXT
Grazie all'attributo TEXT è possibile assegnare al testo un colore
diverso dal nero. Questa la giusta sintassi:
<BODY BACKGROUND="sfondo.gif" TEXT="red">
Anche in questo caso i colori possono esprimersi in nomi o valori esadecimali.
LINK
Se non stabilito diversamente il colore dei link (non ancora visitati) è
blue. Grazie all'attributo LINK è possibile definire colori differenti:
<BODY BACKGROUND="sfondo.gif" LINK="red">
Tutti i link della pagina non saranno più blue ma rossi (red). Tale colore
può essere espresso in valori esadecimali.
ALINK
Quando cliccati i link assumono un colore diverso da quello impostato su
LINK (o dal blue di default). Grazie a ALINK (la A sta per Active) è possibile
modificare questo colore:
<BODY BACKGROUND="sfondo.gif" ALINK="yellow">
VLINK
Quando un URL associato ad un link viene visitato, quest'ultimo assume un
colore diverso da quello di LINK (o dal blue di default). Grazie a VLINK
(la V sta per Visited) è possibile agire su questo colore:
<BODY BACKGROUND="sfondo.gif" VLINK="green">
BGPROPERTIES
Trattando dell'attributo BACKGROUND abbiamo sottolineato come le immagini
richiamate siano disposte sullo schermo disponibile. Se, comunque, la pagina
è tanto lunga da attivare lo scroller laterale, lo sfondo (e l'immagine
associata) scorre insieme alla pagina. Per comprendere meglio di cosa stiamo
parlando clicca qui per un esempio, e poi scrolla la pagina verso il basso.
Grazie alla proprietà BGPROPERTIES è possibile rendere lo sfondo immobile
rispetto allo scroller di pagina. Questa la sintassi corretta:
<BODY BACKGROUND="sfondo.gif" BGPROPERTIES="fixed">
Questo espediente funziona solo con MsIe e non con Netscape che invece continua
a scrollare la pagina.
5 : FILE MIDI
La presenza di file audio sotto forma di MIDI o WAV puo'
essere una piacevole colonna sonora alla navigazione delle pagine web, oppure
un fastidioso fardello capace solo di rallentare il caricamento ed innervosire
il visitatore. Come spesso viene ripetuto in questa guida e' necessario
considerare che si', e' importante la piacevolezza grafica e musicale delle
pagine web, ma e' fondamentale che la navigazione non risulti lenta e, in
ultima analisi, impossibile per chi abbia a cuore le sorti della propria
bolletta telefonica. Il mio consiglio e' quindi di evitare grossi file MIDI
(60Kb di files MIDI ad esempio sono esagerati) ed enormi WAVE (che possono
essere sostituiti da altri files piu' leggeri, come vedremo in seguito).
Consideriamo un file MIDI; consideriamo che si chiami "imagine.mid";
e consideriamo che si voglia inserirlo come sottofondo ad pagina web non
appena questa si apra, automaticamente quindi.
| <BGSOUND SRC="imagine.mid" LOOP=INFINITE> |
Oltre ai files MIDI, con il comando <BGSOUND> e' possibile inserire
files .WAV e .AU.
Per rendere possibile l'apertura automatica di un files audio anche con
Netscape, si deve usare il comando <EMBED>:
<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80"
WIDTH="0" HEIGHT="0">
Anche in questo comando oltre ai MIDI e' possibile inserire files .WAV e
.AU
Una delle remore all'inserimento di files midi all'interno delle proprie
pagine, e' dovuta al fatto che, ogni volta che si cambia pagina il file
musicale si interrompa bruscamente. Il problema non persiste nei siti divisi
in frame, in quanto il file musicale viene caricato nel frame fisso e quindi
non muta al cambiamento delle pagine negli altri frame. E per i siti senza
frame? Un piccolo espediente puo' essere quello mediante il quale, proprio
prendendo spunto dai frames, si costruisce una pagina con un frame "invisibile".
Per fare questo si crea una pagina con il seguente codice:
| <FRAMESET
rows="0,*" border=0 frameborder="0" framespacing="0"> |
Dove nel frame "alto" inseriremo il codice che
richiama il file audio:
<EMBED SRC="imagine.mid" AUTOSTART=true LOOP=true VOLUME="80"
WIDTH="0" HEIGHT="0">
E nel frame "centrale" il contenuto delle pagine.
Altro espediente: archittettare una procedura un po' piu' complessa, la
quale consiste nell'associare al link non il semplice file midi "imagine.mid"
ma un file HTML che contenga un comando EMBED che faccia automaticamente
partire il midi.
6: Tag
di testo logici e fisici, COME FORMATTARE UN TESTO
Un tag logico, al contrario ha la funzione di definire una struttura indipendentemente
dal suo aspetto . Ovvero, indipendentemente dal modo in cui il browser interpreterà
visivamente il contrassegno.
Per comprendere meglio questa differenza prendiamo in esame due elementi
volti a formattare testo:
<ADDRESS></ADDRESS> tag logico
<I></I> tag fisico
Visivamente entrambi i tag (il primo è ADDRESS e il secondo I) danno un
medesimo risultato (il testo corsivo), ma da un punto di vista di struttura
del documento, solo il primo (ADDRESS) indica che al proprio interno è presente
un indirizzo, mentre il secondo non da' alcuna informazione di questo tipo.
Formattare titoli da <H1>
il più grande ad <H6>il più piccolo
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, Oltre
a definire gli stile dei titoli, il tag <Hn> inserisce spaziature
di paragrafo rispetto agli elementi che seguono.
<FONT>
HTML 4 non
ammette l'uso di FONY la formattazione è lasciata unicamente ai fogli di
stile.
Il tag fisico FONT è uno dei più usati e frequenti nell'attuale Web publishing.
Nella sezione: Impostare lo sfondo del documento (elemento BODY) abbiamo
visto come l'attributo TEXT dia un colore univoco a tutto il testo del documento.
Il tag FONT ha in parte una funzione simile, ma molto più ampia e concettualmente
differente.
Il tag FONT ha la funzione di formattare tipo e grandezza del testo limitatamente
ad alcuni punti del documento.
<FONT FACE="arial"
SIZE=5 COLOR=red>Carattere da formattare</FONT>
L'attributo FACE="arial" indica il tipo di carattere da richiamare
per la visualizzazione. SIZE=5 la grandezza del carattere che può andare
da 1 a 7 (con maggiore grandezza dei numeri vicini al 7); COLOR=red indica
il colore del testo (esprimibile anche in valori esadecimali).
<B>, <I>, <U><STRIKE> <SUP> e <SUB>
<TT> <STRIKE><BLINK>
<B>, <I>, <U> sono tre dei più usati tag di formattazione
fisica dell'HTML. Tutti vanno aperti e richiusi:
<B> Testo grassetto </B> (la B sta per BOLD).
<I> Testo corsivo </I> (la I sta per ITALIC)
<U> Testo sottolineato </U> (la U sta per UNDERLINE).
<STRIKE> Testo sbarrato</STRIKE>
<SUP> e <SUB> per pedice e apice. Questi elementi vengono usati
per note o formule matematiche.
<TT>...</TT> aspetto da macchina da scrivere
<blink>....</blink> testo lampeggiante
Testo preformattato
HTML prevede i tag di testo preformattato, nel senso che il testo verrà
riportato esattamente come viene scritto nel blocco note . Serve per inserire
disegnini, tipo l'omino:
<XMP> Testo da formattare </XMP> anche in html 4
<PRE> Testo da formattare </PRE> (no in HTML 4)
Breve descrizione degli stili
logici
<ADDRESS> Contrassegna informazioni di indirizzo (mail, telefono ecc.)
<BLOCKQUOTE> Usato per citazioni più lunghe di due o tre righe
<CITE> Usato per indicare la fonte della citazione
<CODE> Viene utilizzato per formattare righe di codice di programmazione
<DFN> Indica che il testo compreso è una definizione.
<EM> Enfatizza il testo compreso all'interno del tag
<KBD> e <SAMP> Indicano cose che il computer dovrebbe dire all'utente
e viceversa, secondo un tipico concetto di Unix
<STRONG> Enfatizza il testo
<VAR> Legato a CODE, indica le variabili di programmazione.
7. CREARE
PARAGRAFI
Creare paragrafi con <P>
Il tag <P> definisce un nuovo paragrafo del testo indicando al browser
che lo stesso deve rimanere su una nuova riga ed essere posizionato a destra,
a sinistra o al centro. Se non specificato oltre, il tag <P> allinea
il testo di default sulla sinistra. Esistono attributi specifici:
<P ALIGN=left> Definisce un paragrafo e allinea sulla sinistra (left).
<P ALIGN=right> Definisce un paragrafo e allinea sulla destra (right).
<P ALIGN=center> Definisce un paragrafo ed allinea al centro (center).
Andare a capo con <BR>
<BR> è un tag di interruzione di riga. Ha un funzionamento simile
al paragrafo visto in precedenza, ma se ne discosta perchè non inizia un
nuovo paragrafo. In altri termini la sua funzione è simile alla pressione
del tasto "invio" della tastiera. Va usato singolarmente senza
tag di chiusura.
Posizionare il testo con <DIV
ALIGN> e <CENTER>
L'elemento <DIV> viene utilizzato per allineare il testo in posizione
orizzontale a sinistra, destra e centro della pagina. L'attributo ALIGN
è fondamentale a questo scopo.
<DIV ALIGN=left>Testo e immagini a sinistra</DIV>
Sposta gli elementi contenuti tra i suoi tag sulla sinistra.
<DIV ALIGN=right>Testo e immagini a destra</DIV>
Sposta gli elementi sulla destra.
<DIV ALIGN=center>Testo e immagini centrate</DIV>
Sposta gli elementi in posizione centrale.
Il tag <CENTER> ha un funzionamento del tutto simile a <DIV ALIGN=center>
no in HTML4
<CENTER>Testo da centrare</CENTER>
Linee orizzontali con <HR>
Horizontal Rule
Le linee orizzontali sono un ottimo strumento per dividere parti del documento
e rendere il testo più leggibile. La sintassi necessaria al loro inserimento
in un documento HTML è la seguente:
<HR align="CENTER" size="2" width="400"
color="Red" noshade>
Il tag HR non ha bisogno di chiusure successive. Si compone di diversi attributi:
aling="CENTER": definisce la posizione della riga (center, right,
left).
size="2": definisce l'altezza, in pixel, della riga.
width="400": definisce lunghezza orizzontale, in pixel, della
linea.
Può anche esprimersi in percentuale di spazio disponibile: width=80%.
color="RED": definisce il colore della linea.
noshade: se presente questo attributo elimina l'effetto 3D della linea.
Se omesso produce tale effetto.
8 . ELENCHI
Gli elenchi rappresentano uno dei modi più diffusi per organizzare
informazioni all'interno di siti Web. Una delle loro caratteristiche principali
è sicuramente quella di fornire un quadro chiaro e sintetico dell'argomento
trattato.
HTML mette a disposizione diversi tipi di elenchi che di seguito andiamo
a trattare singolarmente.
Elenchi ordinati (numerati)
Gli elenchi ordinati sono costituiti da un singolo tag di apertura e chiusura
<OL></OL> e tanti tag di apertura per quante sono le voci di
menu <LI>. Questa è la corretta sintassi per creare elenchi ordinati:
<OL>
<LI> Prima voce di menu </LI>
<LI> Seconda voce di menu</LI>
<LI> Terza voce di menu</LI>
</OL>
<OL TYPE=A> Indicizzazione alfabetica maiuscola:
<OL TYPE=a> Indicizzazione alfabetica minuscola:
<OL TYPE=I> Indicizzazione con numeri romani maiuscoli:
<OL TYPE=i>Indicizzazione con numeri romani minuscoli:
Elenchi NON ordinati (puntati). Gli elenchi non ordinati funzionano in modo
simile a quelli ordinati.
<UL>
<LI> Prima voce di menu</LI>
<LI> Seconda voce di menu</LI>
<LI> Terza voce di menu</LI>
</UL>
Se non definito diversamente l'elenco è costituito da una serie di pallini.
Come per gli elenchi numerati anche in questo caso è possibile indicare
diversi tipi di elenco:
<UL TYPE=disc>I pallini pieni visti in precedenza sono ottenibili
con disc:
<UL TYPE=circle>L'attributo circle imposta pallini vuoti all'interno:
<UL TYPE=square>L'attributo square imposta elenchi definiti da quadratini
pieni:
9 . RICHIAMARE
IMMAGINI
<IMG>tag principale per l'inserimento di immagini negli ipertesti
Il tag <IMG> non ha bisogno di chiusura e la sua corretta sintassi
è la seguente:
<IMG SRC="immagine.gif">
Dove SRC sta per Search ed è il percorso dal quale il browser ricava l'immagine
I browser (Netscape, MsIe, Opera ecc.) riconoscono molti formati grafici,
anche se sono due quelli più utilizzati: GIF (Graphics Interchange Format)
e JPEG (Joint Photographics Experts Group). Negli ultimi mesi sta diffondendosi
su scala mondiale un altro formato: PNG (Portable Network Graphics).
L'elemento <IMG> è corredato da diversi attributi molto utili ai fini
del suo utilizzo. Vediamo insieme quali.
ALT
testo sostitutivo
<IMG SRC="immagine.gif"
ALT="Opera di K. Haring">
WIDTH e HEIGHT
E' possibile definire altezza e larghezza dell'immagine con gli attributi
width ed height:
<IMG SRC="immagine.gif"
WIDTH=178 HEIGHT=180 ALT="Opera di K. Haring">
Dove WIDTH=178 è la dim orizzontale (larghezza) dell'immagine espressa in
pixel, e HEIGHT=180 la verticale (altezza).
BORDER
Con l'attributo BORDER è possibile assegnare un bordo all'immagine. I valori
sono numerici ed espressi in pixel. Il valore BORDER impostato su 0 ha l'effetto
di non visualizzare alcun bordo. Se questo attributo viene omesso il browser
non assegna nessun bordo, ma se l'immagine è anche un link viene automaticamente
assegnato un BORDER=1.
<IMG SRC="immagine.gif"
WIDTH=178 HEIGHT=180 BORDER=2 ALT="Opera di K. Haring">
HSPACE e VSPACE
Con questi due attributi è possibile stabilire la distanza in pixel dell'immagine
dagli oggetti che ai quattro lati della stessa.
HSPACE definisce la distanza dai lati destro e sinistro dell'immagine degli
oggetti più vicini (testo, immagini, applet ecc.).
VSPACE definisce la distanza dai lati superiore e inferiore dell'immagine
degli oggetti più vicini
<IMG SRC="immagine.gif"
WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Opera di K. Haring">
Questi attributi risultano utili quando si vuole distanziare l'immagine
dagli oggetti più vicini.
ALIGN
L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo
posto immediatamente prima o dopo la stessa. Esistono varie opzioni per
l'attributo ALIGN:
ALIGN=top: allinea la prima riga di testo sulla sinistra al top dell'immagine.
ALIGN=middle: allinea la prima riga di testo sulla sinistra al centro dell'immagine.
ALIGN=bottom: allinea la prima riga di testo sulla sinistra nella parte
più bassa dell'immagine.
ALIGN=left: allinea il testo sulla destra dell'immagine partendo dal top.
ALIGN=right: allinea il testo sulla sinistra dell'immagine partendo dal
top.
10. I COLLEGAMENTI
links
I documenti HTML sono degli ipertesti il cui funzionamento è in massima
parte dovuto agli HyperLink o ancoraggi, il cui tag specifico è <A>.associato
ad altri attributi
<A HREF>(la A
sta per Anchor)(HREF è abbreviazione di Hypertext Reference)
<A HREF="http://www.artemate.it">Visita
il sito artemate</A> link alla scritta visita il sito artemate
E' possibile sostituire al testo un'immagine con effetto identico.
<a href="cap1.htm"><IMG SRC="pluto.gif"></a>
<A HREF="corsi.htm">Clicca qui per raggiungere pagina corsi</A>
TARGET apre link in
una nuova finestra
TARGET è un attributo implementato per esigenze legate alla gestione dei
frame. In una pagina divisa in frame, infatti, questo attributo indica in
quale di questi debba essere visualizzato il documento.
Grazie a TARGET è possibile caricare un pagina associata a HREF in un'altra
finestra del browser, con la sintassi:
<A HREF="http://www.artemate.it"
TARGET="_new">Visita artemate</A>
L'attributo TARGET="_new" indica al browser di caricare il link
n una nuova (_new) finestra.
TITLE
Come per l'elemento IMG anche per i collegamenti ipertestuali è possibile
definire un testo di commento, attivato quando il mouse passa sull'area
di link. Questa la sintassi:
<A HREF="http://www.artemate.it"
TITLE="Il sito di arte e matematica">Visita artemate</A>
MAILTO (link a e-mail)
E' possibile inserire collegamenti anche verso indirizzi e-mail, attraverso
una sintassi leggermente diversa da quella indicata per le URL. Questo il
codice:
<A HREF="mailto:webmaster@html.it">Scrivi
a artemate</A>
Link interni al documento
E' possibile creare collegamenti con punti specifici di uno stesso documento,
grazie al codice <A NAME= "ancora">.Con <A NAME> viene
linkato un punto specifico del documento.
- Inserisci il tag <A NAME="ancoradadi"> nel punto del documento da raggiungere. "ancoradadi" è il nome identificativo del punto in cui il browser dovrà andare.
- Crea il link interno per ancorarti inserendo: Il cancelletto (#)
indica che si tratta di un link interno.
<A HREF="#ancoradadi">Vai al gioco dei dadi</A>
<A HREF="nome_file.htm#ancoradadi">visualizza il gioco dei dadi</A>.
Dove "nome_file.htm" è il nome del documento da
raggiungere, e "ancora" il punto preciso all'interno dello stesso.
2001 ARTEMATE - autrice e webmaster: Prof.ssa Paola Barberis
