sei su GUIDA HTML torna su HOME
Come farsi un sito in HTML e vivere felici
Capitolo I - Lez.n. 7: collegamenti
Le tabelle, pur essendo, adesso, in parte superate dai CSS, che permetto un'impaginazione
più bella e facile da gestire, restano, comunque, una piettra miliare per chi fa e ha fatto pagine web;
dunque sarà bene iniziare a mettere in pratica ciò che abbiamo studiato sino ad ora creando
un nostro piccolo giornale in HTML: useremo le tabelle
e il cuore dell'HTML, i collegamenti.
< table > indica la presenza della tabella, ricordiamoci di inserire il tag di chiusura
< /table >
< th > indica la presenza della intestazione di una tabella, ricordiamoci di inserire il tag di chiusura
< /th >
< tr > indica la presenza di una riga di una tabella, ricordiamoci di inserire il tag di chiusura
< /tr >
< td > indica la presenza della cella di una tabella, ricordiamoci di inserire il tag di chiusura
< /td >
< width="... " > indica la larghezza della tabella, della cella o della intestazione.
La larghezza puù essere espressa in pixel, sarà dunque un numero, o in percentuale, ad esmpio:
< table width="50%" >
< align="center" > indica alla tabella, o alla cella di disporsi al centro dello schermo
< align="left" > indica alla tabella, o alla cella di disporsi alla sinistra dello schermo
< align="right" > indica alla tabella, o alla cella di disporsi alla destra dello schermo
< valign="..." >
indica l'allineamento del testo dentro alla tabella e alla cella
i valori sono
top: in alto
middle: al centro
bottom o baseline: in fondo
< border="..." >indica lo spessore dei bordi in una tabella o cella, se lo spessore, espresso in numeri, è impostato
a zero i bordi saranno "invisibili"
L'anima dei siti sono i "collegamenti" i "link" che appunto legano
una pagina all'altra, un sito ad un sito, permettendoci di spostarci, di seguire notizie, immagini, testi nella immensa Rete.
I collegamenti, si realizzano in HTML con un tag speciale, il tag < a > che viene seguito da un serie di attributi,
tra i quali quelli più usati ed importanti sono:
href > ovvero Hypertext Reference, serve per collegamenti ESTERNI al sito o alla pagina
name > nome, che ci consente di assegnare un nome ad una porzione del nostro sito, ad una sua immagine, ad un paragrafo
o tabella permettendoci poi di "ritrovarlo" all'interno della navigazione. Serve, dunque, per un collegamento INTERNO alla pagina
vediamo adesso la sintassi di questo tag (comando) fondamentale:
LA SINTASSI PER COLLEGAMENTI ESTERNI:
< a href="http://www.indirizzodiunsito.it.com.org" >
puoi ovviamente collegare qualunque documento, immagine, o testo
< a href="indirizzodiunatuapaginaOdocumento.html" > pagina HTML
< a href="indirizzodiunatuapaginaOdocumento.txt" > testo
< a href="indirizzodiunatuapaginaOdocumento.doc" > testo in formato Word
< a href="indirizzodiunatuafoto.jpg" > immagine/foto
( l'estensione che indica le foto è: jpg)
Facciamo subito una prova per un collegamento, creiamo un pagina HTML con un link ad un sito:
VAI SU START > TUTTI I PROGRAMMI > ACCESSORI dal menù che si apre scegli
> BLOCCO NOTE, clikka per aprirlo, una volta aperto il tuo documento di blocco note scrivi,
RICORDANDOTI DI NON LASCIARE SPAZI TRA I SEGNI MAGGIORE E MINORE:
< html >
< head >
< body >
< p align="center" >
< a href="http://www.freekareem.org/" > Libertà per Kareem < /a >
< /p >
 SCARICA QUI LA PAGINA DI ESEMPIO
SCARICA QUI LA PAGINA DI ESEMPIO IN FORMATO TESTO
Salva il documento così:
vai sulla barra dei comandi del documento clikka su File > salva con nome... >
salva con il nome che preferisci,
scegli un nome facile e chiaro devi salvarlo non con l'estensione nomescelto.txt
ma con l'estensione nomescelto.html
come dovresti poter vedere la frase "Libertà per Kareem" dovrebbe essere di un colore diverso dal resto del testo
se poi ci vai sopra con il mouse dovrebbe comparire la "manina" che indica un collegamento ipertestuale,
se cli clicchi sopra dovresti essere "mandato" sul sito http://www.freekareem.org/
(devi essere collegato a Internet ovviamente)
NB:
se vuoi modificare, o correggere la tua pagina , ecco come devi fare: aprila con Internet Explorer vai su > "visualizza" dal menù a discesa scegli cliccandoci sopra > "HTML" , si aprirà il codice che hai creato, effettua le modifiche opportune sul codice, salvale;
aggiorna, la pagina mediante l'apposito pulsante sulla barra di navigazione di Internet Explorer.
Adesso proviamo a creare una semplice impaginazione con una tabella ad una riga e tre celle, nella cella di
centro metteremo un paragrafo che conterrà un link:
< html >
< head >
< body >
< table width="100%" align="center" valign="top" border="1" >
< tr >
< td width="33%" align="left" valign="top" >
< p align="center">
cella a sinstra
< /p >
< /td>
< td width="33%" align="center" valign="top" >
< p align="center" >
< a href="http://www.freekareem.org/" > Libertà per Kareem < /a >
< /p >
< /td>
< td width="33%" align="right" valign="top" >
< p align="center">
cella a destra
< /p >
< /td>
< /tr>
< /table>
< /html >
< /head >
< /body >
SCARICA QUI LA PAGINA DI ESEMPIO
SCARICA QUI LA PAGINA DI ESEMPIO IN FORMATO TESTO
Come potete notare ci sono tre celle e una riga, la larghezza delle celle è espressa in percentuale,
esse, cioè, si adatteranno allo schermo e a quanto andate scrivendoci dentro, prendendo il 33% dello schermo stesso,
mentre l'intera tabella prenderà il 100% dello schermo.
Ogni cella è impostata con "valign=top" così facendo ciò che scrivete andrà sempre nella parte superiore
della cella e/o della tabella, se non avessimo impostato così "valign" il contenuto verrebbe situato,
per impostazione predefinita, in mezzo alla cella e/o alla tabella.
Se provate a scrivere dentro il tag "p" eliminando "valign", vedrete che il testo
andrà automaticamente al centro della cella.
NB.
Rammentate sempre di chiudere i tag in modo logico ed ordinato ad esempio:
modo corretto
< p > paragrafo < a href="collegamento" > nome sito o nome pagina < /a > < /p>
modo scorretto
< p > paragrafo < a href="collegamento" > nome sito o nome pagina < /p> < /a >
Salva il documento così:
vai sulla barra dei comandi del documento clikka su File > salva con nome... >
salva con il nome che preferisci,
scegli un nome facile e chiaro devi salvarlo non con l'estensione nomescelto.txt
ma con l'estensione nomescelto.html
NB:
se vuoi modificare, o correggere la tua pagina , ecco come devi fare: aprila con Internet Explorer vai su > "visualizza" dal menù a discesa scegli cliccandoci sopra > "HTML" , si aprirà il codice che hai creato, effettua le modifiche opportune sul codice, salvale;
aggiorna, la pagina mediante l'apposito pulsante sulla barra di navigazione di Internet Explorer.
Mukkola on web
>> vai su
>> vai su Home
>> vai su Fare-manuali
>> Scrivici i tuoi suggerimenti
|
