|
Alla fine della prima
lezione avevamo visto il tag <p> per identificare i paragrafi e vi avevo
accennato la possibilità di modificare l'allineamento del testo nei paragrafi.
Prima di fare ciò parliamo degli attributi dei tag. Un attributo ad
un tag si specifica indicando il nome dell'attributo seguito dal simbolo di
uguaglianza (=) e il valore tra virgolette (") all'interno
dello StartTag. Vediamo un esempio: <p
align="center">Questo e' un paragrafo allineato al centro<p> La proprietà align del
tag <p> può assumere i seguenti valori:
- left
- right
- center
- justify
Proviamo a scrivere la
seguente pagina HTML: <html> <head> <title>Titolo della pagina</title> </head> <body> <p
align="center">Questo e' un paragrafo allineato al centro<p> <p
align="right">Questo e' un paragrafo allineato a destra<p> <p align="left">Questo
e' un paragrafo allineato a sinistra<p> <p
align="justify">Questo e' un paragrafo allineato in modo
giustificato, ma per poter notare il
funzionamento del tipo di allineamento devo scrivere un testo
abbastanza lungo da occupare almeno due righe<p> </body> </html> Le
Entità Sempre nel corso della
prima lezione avevamo visto come il numero degli spazi all'interno del testo
nelle pagine HTML non avesse alcun riscontro grafico, infatti posso inserire
tantissimi spazi tra una parola e l'altra di un paragrafo, ma il browser mi
visualizza sempre e comunque le parole divise da un solo spazio. Esiste però un
modo per forzare la presenza di uno spazio tra le parole, utilizzando l'entità
carattere che indica appunto uno spazio
(Non-Breakable-SPace).
Proviamo a scrivere: Questa e' una frase con
spazi semplici.<br /> Questa e' una frase con tripli spazi.<br
/> Come abbiamo visto
un'entità carattere si indica con il carattere & (e
commerciale) e alla fine del nome dell'entità il punto e virgola. Le entità
carattere sono tante e servono anche per l'inserimento nei documenti delle
lettere accentate.
Qualche occhio attento avrà sicuramente notato che nei miei esempi, finora, non
ho utilizzato lettere accentate.
Vediamone alcune:
|
Entità
|
Carattere
corrispondente
|
|
à
|
à
|
|
è
|
è
|
|
ì
|
ì
|
|
ò
|
ò
|
|
ù
|
ù
|
|
é
|
é
|
|
À
|
À
|
|
È
|
È
|
|
Ì
|
Ì
|
|
Ò
|
Ò
|
|
Ù
|
Ù
|
|
É
|
É
|
|
€
|
€
|
|
&
|
&
|
|
<
|
<
|
|
>
|
>
|
|
©
|
©
|
Altri
tag per la formattazione del testo Esistono altri tag
oltre a <b>, <i> e <u> che
consentono di dare formattazioni al testo. Vediamoli: <html> <!-- Intestazione
documento -->
<head>
<title>Titolo pagina</title>
</head>
<!-- Corpo del documento -->
<body> <p
align="left"> <b>Testo in
grassetto</b> <br /> <strong>
Testo in "strong" </strong>
<br /> <big>
Testo "big" </big> <br /> <em>
Testo enfatizzato </em>
<br /> <i>
Testo in corsivo (italic) </i>
<br /> <small>
Testo in "small" </small>
<br />
Questo testo contiene <sub>
testo pedice (subscript) </sub>
<br />
Questo testo contiene <sup>
testo apice (superscript) </sup>
</p> </body> </html> Altri
tag utili Vediamo ancora alcuni
tag utili alla rappresentazione del testo:
|
Tag
|
Descrizione
|
|
<pre>
|
Testo
preformattato
|
|
<ins>
|
Testo
inserito
|
|
<del>
|
Testo
cancellato
|
|
<acronym>
|
Acronimo
|
Inserire
un'immagine Le pagine dei siti
ormai sono piene di immagini che ne rendono il contenuto più gradevole. Vediamo
quindi come fare ad inserire un immagine all'interno della nostra pagina.
Innanzitutto prendiamo un file contenente un'immagine (ad esempio
"Setup.bmp") e copiamolo nella stessa cartella in cui abbiamo creato
la nostra pagina HTML nella quale vogliamo introdurre l'immagine.
Adesso scriviamo il seguente tag nella pagina, nel punto in cui vogliamo far
apparire l'immagine scelta.
<img
src="Setup.bmp" alt="Immagine Setup" />
Il tag <img> è
un EmptyTag come il <br /> ma richiede sempre almeno due attributi:
- src:
(source/sorgente) indica il nome del file immagine da visualizzare
- alt: (alternate/in
alternativa) indica il testo alternativo da visualizzare qualora
l'immagine non fosse visualizzabile
Gli
URL L'attributo src è
un URL (Uniform Resource Locator) e indica l'indirizzo dal quale è possibile
recuperare il file dell'immagine da visualizzare.
Nel nostro esempio abbiamo inserito un indirizzo relativo (solo il nome del
file) poiché l'immagine si trovava all'interno della stessa cartella della
pagina che la richiama.
Se ad esempio creassimo una sottocartella di nome "immagini" nella
quale andremo ad inserire tutte le nostre immagini, per accedere ad un'immagine
in essa contenuta dovrei impostare l'attributo
src="immagini/Setup.bmp" o meglio ancora
"./immagini/setup.bmp" dove il punto indica appunto che il percorso è
relativo e parte dalla cartella corrente.
Se invece la cartella si trova ad un livello superiore rispetto al punto in cui
si trova il file posso usare src="../immagini/Setup.bmp" dove il
doppio punto indica che la risorsa si trova ad un livello superiore rispetto a
quello della pagina chiamante.
Infine, un indirizzo URL può essere specificato nella sua forma completa e
cioè:
http://www.pozzware.com/immagini/Setup.bmp
È quindi evidente che le immagini visualizzate all'interno di una pagina del
mio sito possono essere "pescate" anche da un'altro sito.
NOTA: Gli URL possono anche contenenere caratteri speciali come lo
spazio. Questi caratteri però devono essere indicati con una codifica
particolare detta URL encoding.
Per esempio lo spazio si indica con %20 come in questo indirizzo:
http://www.pozzware.com/Nome%20della%20pagina.html Inserire
un link Nella prima lezione
abbiamo parlato del significato dell'acronimo HTML e del fatto appunto che è
nato come linguaggio per la definizione di documenti navigabili in Ipertesto.
Vediamo ora finalmente come creare collegamenti tra i documenti mediante
l'utilizzo dei link, con un esempio: <html>
<!-- Intestazione documento -->
<head>
<title>Titolo pagina</title>
</head>
<!-- Corpo del documento -->
<body>
<p align="left">
<a href="miapagina.htm">Questo testo</a> è un
link ad una pagina del mio sito </p>
<p align="left">
<a href="http://www.microsoft.com/">Questo testo</a> invece è un link ad una
pagina del Web.
</p>
</body> </html> Il tag <a> (anchor)
consente quindi l'inserimento di un collegamento (ancoraggio) tra due
documenti. L'attributo href consente di specificare l'URL del
documento da richiamare.
All'interno del tag invece posso indicare l'elemento che diventerà un link, in
questo caso del semplice testo. Se volessi creare un link con un'immagine mi
basterebbe combinare il tag <a> con il tag <img> come nell'esempio
seguente: <a href="MiaPagina.html"><img
src="Setup.bmp" alt="Setup" /></a> Esistono altri
attributi del tag <a>, vediamoli:
Attributo target:
Consente di specificare il target di destinazione del documento richiamato.
Vediamo un esempio: <html>
<!-- Intestazione documento -->
<head>
<title>Titolo pagina</title>
</head>
<!-- Corpo del documento -->
<body>
<a href="MiaPagina.html" target="_blank">Nuova
Pagina</a>
<p align="left">
Impostando l'attributo target di un link a "_blank",
La pagina richiamata verrà richiamata in una nuova finestra del browser.
</p>
</body> </html> Attributo name:
Consente di dare un nome all'ancora in modo da consentirne il richiamo dal
documento stesso o da un'altro documento. Vediamo un esempio: <html>
<!-- Intestazione documento -->
<head>
<title>Titolo pagina</title>
</head>
<!-- Corpo del documento -->
<body> <a href="#capitolo9">salta al capitolo
9</a>
<h1 align="center">Capitolo 1</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
<h1 align="center">Capitolo 2</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
<h1 align="center">Capitolo 3</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
<h1 align="center">Capitolo 4</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
<h1 align="center">Capitolo 5</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
<h1 align="center">Capitolo 6</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
<h1 align="center">Capitolo 7</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
<h1 align="center">Capitolo 8</h1>
<p align="left">
Questo capitolo spiega ...............
</p> <a name="capitolo9" />
<h1 align="center">Capitolo 9</h1>
<p align="left">
Questo capitolo spiega ...............
</p>
</body> </html> Altro
sui link Oltre a consentire il
collegamento ad un altro documento mediante il protocollo http,
l'attributo href del tag <a> consente di creare
collegamenti anche a file e caselle e-mail. Ecco un esempio:
<a href="ftp://www.rdevo.com/filedascaricare.zip">Scarica il
file</a><br /> <a href="mailto:corsi@rdevo.com">Manda una
e-mail</a>
|
Versione stampabile
Entra
Iscriviti
Utenti: 17
