I primi passi per creare una pagina HTML "a mano" - 2

I primi passi
per creare una pagina HTML "a mano"
Parte 2

Allineare il testo, inserire un'immagine e creare una tabella

Nella parte precedente abbiamo visto come creare dal niente una pagina, metterci del testo e modificarlo. Di seguito, sempre usando la pagina che abbiamo già creato, aggiungeremo nuovi elementi e modificheremo quelli che già ci sono.
Iniziamo con allineare il testo: di deafult il testo è allineato a sinistra, ma potrebbe farci comodo allineare una parte di testo al centro o a destra.
Per farlo ci sono (almeno) due modi: il primo, nel caso la dimensione del carattere non debba cambiare, consiste nel racchiudere il testo da allineare all'interno della coppia di tag <p>...</p> e usare il seguente attributo:

**align = "direzione" Dove per direzione si può scrivere left (non molto utile!), right per allineare a destra e center per allineare al centro.

Il secondo modo, utile se si deve cambiare anche la dimensione del carattere con un header, è quello di inserire lo stesso attributo visto sopra all'interno del tag header e si ottiene lo stesso effetto.
Invece se si tratta solo di centrare il testo, basta usare i tag <center>...</center>.
Veniamo quindi alla nostra solita pagina di prova, e modifichiamola un po' per venire incontro a quanto detto fino ad adesso.

<html>
<head>
<title>
Titolo della pagina
</title>
</head>

<body bgcolor="navy" background="pref.jpg" text="white" link="yellow" alink="orange" vlink="lime" bgproperties="fixed">
<font face="comic sans ms">
<h3 align="right">Allineato a destra con h3</h3>
<h3 align="center">Allineato al centro con h3</h3>
<h3> <p align="right">Allineato a destra con p</p>
<p align="center">Allineato al centro con p</p>
<center>Allineato con center</center>
</h3>
</body>
</html>
La prima e la seconda frase sono allineate tramite la definizione dell'header.
La terza e la quarta sono definite tramite il paragrafo (la p sta per questo). Prima è stato messo <h3> solo per dare la stessa grandezza al testo e per fare vedere così che non c'è nessuna differenza tra i due tipi di allineamento, e lo stesso è stato fatto per la frase centrata con il tag spesifico.

Clicca qui per vedere l'esempio sopra

Oltre a questo modo di allineare ce ne è anche un altro che fa uso dei fogli di stile, che potete trovare nella pagina relativa ai trucchi con l'html.
Adesso vediamo come si inserisce una immagine nel nostro documento.
Il tag necessario è <img> (non esiste il tag di chiusura). Dentro al tag si usano questi attrubuti:

src = "url_immagine" Serve per specificare il nome del file (ed eventualmente anche il percorso) del file di immagine che si vuole inserire. Diciamo che questo attributo è indispensabile per vedere una immagine.**

height = "valore"
width = "valore"
Specificano le dimensioni dell'imagine (o in pixel, non scrivendo altro che il numero, oppure in percentuale). Se una delle due o entrambe non vengono specificate, vengono usate le dimensioni originali dell'immagine

**align = "direzione" Indica l'allineamento dell'immagine. Ha le stesse proprietà dell'omonimo attributo di paragrafi e header, con le seguenti possibilità di allineamento:
left, right, top, middle, texttop, baseline, absmiddle, bottom, absbottom.

alt = "testo" Testo alternativo che viene visualizzato durante il caricamento dell'immagine, in alto a destra e , a immagine completata, è il testo che appare se si posiziona il cursore sopra di essa. Non è strettamente necessario.

border = "valore" Stabilisce se c'è o no un bordo, e il suo spessore. Scrivendo zero o non usando l'attributo, l'immagine non ha bordo. Se volete però la massima flessibilità sul bordo che volete creare, è meglio specificarlo tramite i css (vedi la pagina relativa).

Molti altri sarebbero gli attributi da usare, ma per chi inizia adesso a creare pagine in html puro questi sono più che sufficienti. Una volta imparato bene ad usare questi tag fondamentali, potete passare a cose più complesse guardando le altre parti di questa sezione sul web design, oppure cercando in rete qualche manuale completo di html (ricordo che il contenuto di queste pagine vuole essere un aiuto per chi inizia, riflettendo su come io stesso ho iniziato).
Adesso invece impariamo a fare una tabella: questa volta le cose si fanno un po' più complesse, ma dopo qualche volta che le avrete usate saranno azioni automatiche che non richiederanno il minimo sforzo. Per introdurre le tabelle dobbiamo fare prima alcune considerazioni: la tabella è, diciamo, un contenitore di righe e colonne, che a loro volta contengono dei dati. Ogni riga contiene un certo numero di colonne. Quindi complessivamente lo schema è questo:

TABELLA ==> RIGHE ==> COLONNE ==> DATI

Stabilito questo si passa a fare lo stesso schema usando i tag rendendo così concreta la tabella:

<table> Inizio della tabella

<tr> Inizio della riga (tr=table row, riga della tabella)

<td> Inizio colonna (td=table data, dati della tabella - sono messi nelle colonne!)

Testo all'interno della colonna

</td> Fine della colonna

</tr> Fine della riga

</table> Fine della tabella

Questa era una tabella molto semplice (diciamo anche poco pratica dato che conteneva solo una riga e una colonna!) ma serve a dimostrare come si crea una singola cella di dati. Basta sapere quello che segue per creare tabelle di qualsiasi dimensione:
All'interno di una riga (quindi da <tr> a </tr>) ci possono stare quante colonne ci pare, tenendo conto che quando si arriva a riempire la larghezza della tabella, si va a capo. Quindi se ad esempio si vogliono mettere due colonne in una riga il codice sarà il seguente:

<table>
<tr>
<td>
Dati prima cella
</td>
<td>
Dati seconda cella
</td>
</tr>
</table>

Le due celle saranno affiancate. Se invece si vogliono fare più righe, basta che al termine di una ne venga subito iniziata un'altra, allo stesso modo che abbiamo visto per le colonne (solo che in questo caso useremo <tr>).
Come ultima cosa va detto che ogni parte di una tabella (la tabella stessa, le righe o le colonne) possono a loro volta ospitare una tabella. Si parla allora di tabelle annidate e sono utili per superare alcune barriere date dalla rigidità di una tabella normale (ad esempio per dividere in due una cella o creare un grafico in una parte di essa).
Come le abbiamo scritte sopra però le tabelle non sono visibili perché non sono stati precisati i bordi quindi i dati sono organizzati correttamente ma talvolta può essere necessario anche far vedere i bordi.
Ecco tutti gli attributi necessari per modificare l'aspetto delle tabelle:

border = "valore"** Indica lo spessore del bordo (che verrà messo attorno a tutte le celle nel caso l'attributo appartenga al tag <table>, altrimenti se viene specificato anche nelle colonne, il bordo delle celle avrà uno spessore e quello della tabella un altro).

widht = "valore"
height = "valore" Indicano altezza e larghezza in pixel o percentuale (usabile in tutti i tag relativi alle tabelle)

align = "direzione"
valign = "direzione"
Il prino allinea il testo all'interno a left, right o center, mentre il secondo allinea il testo in verticale con top, bottom o center

bgcolor = "colore"
bordercolor = "colore" Indicano rispettivamente il colore dello sfondo e del bordo. Sono usabili in tutti e tre i tag che servono a costruire tabelle. Sfondi o bordi diversi tra le varie parti delle tabelle sono anzi gradevoli e indicano meglio le varie parti.

Questi sono i tag e gli attibuti principali per creare tabelle e sono sufficienti per chi inizia. In realtà i tag sono molti di più e gli attributi lo stesso ma è bene non fare troppa confusione su un argomento che le prime volte è un po' ostico come questo.

Adesso che abbiamo fatto questo excursus su immagini e tabelle vediamo un esempio pratico di come metterle insieme in una pagina:

<html>
<head>
<title>
Titolo della pagina
</title>
</head>

<body bgcolor="navy" background="pref.jpg" text="white" link="yellow" alink="orange" vlink="lime" bgproperties="fixed">
<font face="comic sans ms">
<table width="100%" border="2" bordercolor="yellow">
<tr>
<td bordercolor = "cyan">
Riga uno, colonna uno
<\td>
<td bordercolor="red">
Riga 1, colonna 2
<\td>
<\tr>
<tr>
<td bordercolor="green">
<img src="sampei_back.jpg" border="2" alt="Immagine"><br>
Riga 2, colonna 1
</td>
<td bordercolor="white">
Riga 2, colonna 2
</td>
</tr>
</table>

</body>
</html>
La prima cosa che va messa è il tag di inizio tabella, specificando l'ampiezza (100%), il bordo di larghezza 2, colore giallo. Dopo si usa il tag di inizio riga (<tr>), dentro il quale si inseriscono le colonne specificate con <td>. Per fare un esempio pratico, tutte le celle hanno bordi differenti (o per colore o per dimensioni). Notate che per cambiare il bordo di una cella deve essere necessariamente specificato (altrimenti si usa quello definito dentro <table>).
Dentro una di queste celle c'egrave una immagine (ha le dimensioni originali perché non è specificato diversamente), con un bordo 2 e il testo alternativo Immagine, visualizzato se si passa sopra con il mouse, oppure durante il caricamento della stessa.

Clicca qui per vedere l'esempio sopra

Come ultima cosa, è possibile stabilire le dimensioni delle colonne inserendo in quelle della prima riga l'attributo width=" " e inserire un numero (dei pixel) o una percentuale. Attenti! Se volete stabilire le dimensioni di n colonne basta che le specifichiate solo n-1 perché l'ultima viene calcolata da sé. Così per dimensionare 2 colonne basta specificare la larghezza nella prima o nella seconda, per tre colonne bastano - ad esempio - le prime due e così via...

Inoltre è possibile far occupare ad una cella uno spazio (orizzontale o verticale) maggiore di quello standard, ovvero occupare lo spazio di due o più celle orizzontalmente o verticalmente.
Per farlo basta usare gli attributi rowspan per le righe e colspan all'interno di un tag <td>. In questo modo è possibile fare delle tabelle atipiche come la seguente:

Cella 1 Cella 2

Cella 3 Cella 4

Cella 5

Ecco il codice per generare la tabella sopra:

<table border="1" width="80%">
<tr>
<td colspan="2">Cella 1</td>
<td rowspan="3">Cella 2</td>
</tr>
<tr>
<td rowspan="2">Cella 3</td>
<td>Cella 4</td>
</tr>
<tr>
<td>Cella 5</td>
</tr>
</table>

Basta fare qualche prova e sarete in grado di creare tutte le configurazioni di celle che volete!!!

Prossima pagina

Indice Webdesign