[HTML] Inserire immagini, le tabelle e creare Frames

HTML - Hyper Text Markup Language

[HTML] Inserire immagini, le tabelle e creare Frames

1

Ecco un’altra parte della guida dedicata ad HTML: oggi vedremo come inserire le immagini, creare tabelle e come usare i Frames.
HTML - Hyper Text Markup Language

Buongiorno a tutti! Siamo quasi giunti alla fine di questo percorso, per tutti quelli che ci hanno seguito adesso dovreste già cominciare ad avere ottime conoscenze di HTML!
Oggi trattiamo diversi argomenti importanti: innanzitutto parliamo subito di come gestire le immagini

Le immagini

Per inserire un’immagine, il codice è:

<img src="immagine.jpg" alt="Immagine" />

Tutto quì, un tag singolo senza chiusura. Il valore dell’attributo alt ci permette di definire il titolo dell’immagine, mentre src contiene l’indirizzo dell’immagine.

Per inserire i links alle immagini, vale il discorso fatto nell’articolo precedente riguardo i links alle pagine (link onsite e outsite).

Inoltre, volendo, possiamo anche fare una cosa di questo genere:

<a href="immagine.jpg" title="Immagine"><img src="immagine.jpg" alt="Immagine"></a>

In questo modo, diciamo che potremo fare un’abbozzo di galleria: infatti cliccando sull’immagine verremo indirizzati verso l’immagine nel formato “reale”.

Infatti, per creare per esempio una galleria, dovremmo inserire delle versioni ridotte delle immagini: per farlo utilizziamo gli attributi height e width (rispettivamente altezza e lunghezza):

<img src="immagine.jpg" height="40" width="60" alt="Rettangolo">

Inoltre, volendo possiamo specificare un bordo con l’attributo border, e sia questo che i due attributi visti poco fà vengono misurati in pixel:

<img src="immagine.jpg" height="40" width="60" alt="Rettangolo" border="2">

Infine, possiamo allineare l’immagine rispetto al testo utilizzando l’attributo align:

<img src="immagine.jpg" height="40" width="60" alt="Rettangolo" border="2" align="left">

Align può assumere come valore:

  • Left – sinistra
  • Right – destra
  • Center – centro
  • Bottom – in fondo
  • Middle – in mezzo
  • Top – in alto

Scrivete del testo, inserite un immagine e provate i vari valori di align per vederne l’effetto (allineamento).

Infine, per concludere con le immagini, i formati consigliati sono: jpg, gif e png.

Inoltre, per non rallentare la navigazione, bisognerebbe cercare di utilizzare immagini il più leggero possibile.

Tabelle

Ecco un’argomento davvero completamente deprecato: una volta le tabelle venivano largamente utilizzate per fare i templates (l’aspetto) dei siti web, mentre ormai questi essendo molto pesanti sono stati completamente sostituiti dai CSS. Restano comunque un’argomento interessante e utilizzati per il loro scopo originale, creare tabelle.

Quando parliamo di tabelle, ci sono 3 tags di base da conoscere:

  • Il Tag Table – che apre la tabella
  • Il Tag TR – Table row, apre una riga
  • Il Tag TD – Table data, che apre un riquadro (o colonna, ma non è una vera e propria colonna perchè vale solo per la riga in cui l’apriamo)

Ecco un esempio di tabella:

<table>
	<tr>
		<td>Riga1</td>
		<td>Riga1</td>
	</tr>
	<tr>
		<td>Riga2</td>
		<td>Riga2</td>
	</tr>
</table>

Questa genera una tabella 2*2

Altri tags da conoscere sono:
Caption – Identifica un commento
Thead – Identifica l’intestazione dell tabella – dove mettiamo i titoli per esempio delle colonne
Tbody – Il corpo della tabella – tutti i vari valori
Tfooter – Il footer – dove per esempio ci sono i risultati

Esempio:

<table>
	<caption>La mia prima tabella in HTML</caption>
	<thead>
		<tr>
			<td>Titolo1</td>
			<td>Titolo2</td>
		</tr>
	</thead>
	<tfooter> <!-- Nonostante sia quì, finirà in basso -->
	<tr>
		<td>Risultato1</td>
		<td>Risultato2</td>
	</tr>
	</tfooter>
	<tbody>
		<tr>
			<td>Valore1</td>
			<td>Valore2</td>
		</tr>
		<tr>
			<td>Altra riga, Altro valore1</td>
			<td>Altra riga, Altro valore2</td>
		</tr>
	</tbody>
</table>

Ogni tag della tabella poi (compreso Table) ha questi attributi:

<ul>
	<li>Width - La lunghezza (pixel o percentuale)</li>
	<li>Height - L' altezza  (pixel o percentuale)</li>
	<li>Border - Il bordo (pixel)</li>
	<li>Align - Allineamento</li>
</ul>

I Frame

I frame sono un’ altro modo che veniva utilizzato (anzi, forse questi come template qualcuno li utilizza ancora) per fare appunto la grafica del sito (ma non solo).

La tecnica del frame, è quella che ci permette di creare una pagina da più pagine: creeremo una pagina per il nostro menu (es: menu.html) una pagina per index (es: index.html) e poi tutte le sotto pagine (pagina1.html, pagina2.html ecc).
Quando dal menù, che sarà un riquadro in alto o, più frequentemente, a sinistra verrà selezionato un link, non si aprirà una nuova pagina ma si ricaricherà solo l’altro riquadro (es: index.html ecc).

I frame principalmente erano molto utili perchè permettevano di evitare di dover scaricare nuovamente parti inutile di codice (vi ricordiamo le lentissime connessioni finò a pochi anni fà disponibili nel mercato).

Quando andiamo a creare una pagina formata da frames, cambierà anche il tipo di documento, e dovremo assegnargli il Doctype:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//IT” “http://www.w3.org/TR/html4/frameset.dtd”>

Dopodichè, al posto del body avremo il tag frameset (serie di frame) che ci permette di specificare le dimensioni di ogni frame in righe e colonne:

<head>
      <title>Pagina di Frame</title>
</head>
<frameset cols="50%,50%" rows="30%,70%">

Con frameset, dividiamo la pagina in una griglia: la prima riga avrà dimensione del 30% della pagina, la seconda il restante 70%; inoltre ogni riga avrà 2 colonne che occuperanno rispettivamente la metà della pagina.

Con questa scrittura quindi, creeremo 4 riquadri.

Per specificare poi ogni riquadro, utilizzeremo il tag frame:

<frame src="pagina1.html" id="Pagina1">
<frame src="pagina2.html" id="Pagina2">
<frame src="pagina3.html" id="Pagina3">
<frame src="pagina4.html" id="Pagina4">
<noframe>Utilizzando questo tag, possiamo specificare il testo da visualizzare (questo) se il browser che visita la pagina non supporta i frameset. Inoltre, è bene poter offrire un sito alternativo linkandolo da quì: <a href="sito-alterrnativo.html">Sito Alternativo</a>.
</noframe>

Infine, chiudiamo il frameset con:

</frameset>

L’attributo id del tag frame, ci permette di specificare il nome del frame: in questo modo, possiamo utilizzare l’attributo target dei link per specificare, una volta premuto il link, se questo andrà a cambiare totalmente la pagina in quella di destinazione, oppure se deve modificare il contenuto di un frame:

pagina1.html:

<a href="pagina5.html" target="Pagina2">Guarda la pagina 5 nella pagina 2>

Infine, molto importante è l’ Inline Frame, o meglio noto come iframe:

<iframe src="pagina.html" height="90%" width="100%"></iframe>

che ci permette di inserire un frame in una pagina non composta da frameset (e quindi formata dal comune doctype e dal tag body).

About the Author

Federico Ponzi

Studente, Webmaster ed appassionato di tutto ciò che è informatico con una spruzzata di scienza.

View all posts by Federico Ponzi

  1. Ruslan
    Ruslan05-26-2013

    Proprio questo cercavo di fare e non riuscivo.
    Grazie,molto utile e facile da capire cosa cè da fare.

Leave a Reply