CommHTML
La ricezione di una pagina Web
La pagina HTML e' composta da testo puro contenente una serie di
tag che servono ad indicare al browser quali altri oggetti inserire nella pagina, dove andarli a reperire e dove sistemarli nella pagina. Nell'esempio proposto, la pagina visualizzata dal browser e' composta da una parte di testo, opportunamente disposto, e da una immagine di cui si fornisce l'
URL: in questo modo il browser conosce l'indirizzo cui rivolgersi per ricevere l'immagine da posizionare nella pagina.
La rete Internet e' basata sulla
commutazione di pacchetto: tutto cio' che passa dalla rete e' diviso in parti (i pacchetti) di una certa dimensione che, per arrivare a destinazione, possono percorrere strade diverse. Il browser mano a mano che riceve i pacchetti che compongono la pagina da visualizzare, richiede eventuali altre risorse descritte nella pagina e si occupa dell'interpretazione dei tag. La ricezione dei pacchetti in tempi diversi sta alla base di alcuni effetti ben noti a chi naviga in Internet: la pagina, specie se complessa, viene composta non tutta in una unica soluzione, mano a mano che si legge una parte della pagina viene composta quella successiva, le immagini possono arrivare con un certo ritardo e, specie se di grandi dimensioni, possono essere visualizzate anche solo parzialmente.
Del funzionamento che sta alla base della richiesta/ricezione di pagine web č necessario tenere conto nel momento della progettazione delle pagine stesse.
Disposizione degli oggetti nella pagina
La pagina HTML, racchiusa fra i tag
<html> e
</html>, e' suddivisa in due parti: l'intestazione delimitata da
<head> e
</head> e il corpo delimitato da
<body> e
</body>.
L'intestazione, nel caso presentato, contiene solo una riga delimitata dai tag
<title> che racchiudono la sequenza di parole che comparira' nella barra del titolo della finestra del browser che visualizza la pagina. Nel caso specifico non c'e' niente altro, ma potrebbero essere specificati, per esempio, una serie di
meta tag utilizzati dai motori di ricerca per indicizzare la pagina. I meta tag, cui si fa riferimento, hanno il formato
<meta name=... content=...> dove in
name puo' essere specificato
keywords,
description o
author ad indicare, rispettivamente, le parole chiavi sotto le quali indicizzare la pagina, una breve descrizione del contenuto della pagina, il nome dell'autore. La parte
content serve per specificare, appunto, le parole chiavi, la descrizione, il nome.
Nel
corpo della pagina e' specificato il testo da visualizzare, il modo come organizzare la pagina e l'indicazione delle altre risorse necessarie. In generale il testo si dispone in modo da occupare la larghezza della finestra del browser. Se la finestra viene ridimensionata, il testo si ridispone all'interno della stessa. Per il resto il modo come il testo si dispone, dipende dai tag presenti. Per esempio la riga:
<div align="center"><h1>La cattedrale e il bazar</h1></div>
indica che il testo compreso va allineato al centro e visualizzato con un carattere pių grande.
All'interno della pagina sono specificati dei link a risorse esterne:
<![CDATA[<A href="http://www.catb.org/~esr/"><div align="center"><h2>Eric Raymond</h2></div></A>
...
<A href="http://www.fsf.org">Emacs</A>]]>
se l'utente seleziona con un clic del mouse un'āncora (
Eric Raymond o
Emacs rispettivamente), il browser effettua una richiesta all'URL specificato nel tag.
Per formattare il testo in modo che compaia affiancato all'immagine, e' stata usata una tabella. La tabella racchiusa fra i tag
<table> e' composta da righe, ognuna racchiusa dai tag
<tr>, e colonne, ognuna racchiusa dai tag
<td>.
<![CDATA[<table>
<tr>
<td valign="top">
<IMG src="tux.jpg" alt="tux" width="91" height="100" border="0">
</td>
<td>
...
</td>
</tr>
</table>]]>
Nell'esempio e' usata una tabella con una sola riga e due colonne. Nella prima cella della tabella si richiede la visualizzazione di una immagine di cui viene fornito l'URL (la specifica
src del tag
IMG) che, in questo caso, si riduce al nome del file che contiene l'immagine stessa ad indicare che, il file, e' conservato nello stesso posto della pagina. Non e' necessario specificare, quindi, niente altro. Il browser per portare a termine tale visualizzazione deve, quindi, a questo punto, richiedere l'invio del file contenete l'immagine specificata. L'inserimento della specifica
alt all'interno del tag
IMG indica la visualizzazione di un testo alternativo qualora, per un motivo qualsiasi, l'immagine non potesse essere visualizzata. Fra l'altro tale caratteristica e' estremamente utile, qualora si scelga un testo alternativo significativo, per permettere una piena comprensione del contenuto della pagina anche da parte, per esempio, di un non vedente.
Se la finestra del browser viene ridimensionata anche la tabella subisce la stessa sorte. Infatti in assenza di specifica ulteriore (come nel caso in esame), la dimensione delle colonne si intende in percentuale e quindi, per esempio, la parte testo occupera' sempre l'80% della larghezza della finestra qualunque essa sia, compatibilmente, ovviamente, con le dimensioni specificate dell'immagine. Per poter organizzare meglio la distribuzione del testo, potrebbe essere utile impostare, invece della percentuale, una dimensione fissa. Tutto cio' e' possibile specificando, nel tag
table, l'attributo
width= seguito dalla dimensione in
pixel della tabella. In questo modo, se la larghezza della finestra del browser non dovesse essere sufficiente per la visualizzazione dell'intera tabella, verrā aggiunta una barra di scorrimento orizzontale. Le cose da tenere presente in questi casi, per permettere una navigazione agevole da parte dell'utente, sono la risoluzione video richiesta e quella comunemente utilizzata.
Vai alla pagina riassuntiva
TepWEB
