Please Wait
Cosa Cerchi?  

Lezione 02 - Formattazione del testo, entità, immagini e link

 Attributi dei tag

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:

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 &nbsp; che indica appunto uno spazio (Non-Breakable-SPace).
Proviamo a scrivere:

Questa e' una frase con spazi semplici.<br />
Questa&nbsp;&nbsp;&nbsp;e'&nbsp;&nbsp;&nbsp;una&nbsp;&nbsp;&nbsp;
frase&nbsp;&nbsp;&nbsp;con&nbsp;&nbsp;&nbsp;tripli&nbsp;&nbsp;&nbsp;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
&agrave; à
&egrave; è
&igrave; ì
&ograve; ò
&ugrave; ù
&eacute; é
&Agrave; À
&Egrave; È
&Igrave; Ì
&Ograve; Ò
&Ugrave; Ù
&Eacute; É
&euro;
&amp; &
&lt; <
&gt; >
&copy; ©

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:

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> &egrave; un
			link ad una pagina del mio sito

		</p>

		<p align="left">

			<a href="http://www.microsoft.com/">Questo testo</a>
			invece &egrave; 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.pozzware.com/filedascaricare.zip">Scarica il file</a><br />
<a href="mailto:corsi@pozzware.com">Manda una e-mail</a>

Prossimamente...

Nella prossima lezione vedremo come inserire tabelle ed elenchi (liste) all'interno delle nostre pagine. Approfondiremo le immagini e vedremo l'uso delle mappe.
 

Freelance Jobs

Credits

x

Layout e Contenuti © Stefano Pozzati (POZZware.com)
Realizzazione Tecnica e Grafica © Stefano Pozzati (POZZware.com)
Hosting - Aruba (www.aruba.it)
Immagini del titolo © Shunya Yamashita (http://shunyama.web.fc2.com/)
 

Realizzato con:  WebSitter By Pozzware.com Browser compatibili:  Explorer Internet Explorer 6
Firefox Mozilla FireFox 2
Chrome Google Chrome
 
Strumenti:  FCK Editor
JQuery
Valid XHTML 1.0 Transitional CSS Valido!