[HTML] Inserire immagini, le tabelle e creare Frames

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

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 è:

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:

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):

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

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

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:

	

		
Riga1
		
Riga1
	
	

		
Riga2
		
Riga2
	

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:

 
	

	
La mia prima tabella in HTML
	

		

			
Titolo1
			
Titolo2
		
	
	

		
Risultato1
		
Risultato2
	
	
	

		

			
Valore1
			
Valore2
		
		

			
Altra riga, Altro valore1
			
Altra riga, Altro valore2
		
	

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

	
Width - La lunghezza (pixel o percentuale)
	
Height - L' altezza  (pixel o percentuale)
	
Border - Il bordo (pixel)
	
Align - Allineamento

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:

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:

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:

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ì: Sito Alternativo.

Infine, chiudiamo il frameset con:

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:

Guarda la pagina 5 nella pagina 2>