HTML: informazioni e trucchi per il neofita

Per creare pagine WEB, ovvero pagine in formato HTML io, come credo molti hobbisti del WWW, utilizzo in parte FrontPage Express, in parte modifico manualmente i testi inserendo accorgimenti carpiti da qualche sito o pazientemente sperimentati. Ho pensato così di inserire in questa pagina alcune cose interessanti.

• Vi è subito una considerazione importante da fare affinché non vi fracassiate la testa nella ricerca di errori che in realtà non esistono: quando fate riferimento a directory e file del sito i caratteri maiuscoli e minuscoli non fanno differenza se il server in cui risiedono le vostre pagine web, è un server windows, ma se il server è UNIX o LINUX si. Fate quindi attenzione.
• per inserire uno spazio (alle volte non è così facile come sembra, si può usare il codice  
• Riferimenti ad altre pagine/siti (con uscita dal "frame")
• Riferimenti all'interno/esterno della pagina (<a href)
• Ritorno indietro di una pagina
• Icone "sensibili" al movimento del mouse
• Ritorno ad inizio pagina
• Suddivisione della finestra in "Frame"
• Aggiornamento pagina, o cambio pagina automatici
• I "colori" dei link
• Impostare le caratteristiche di default del testo
• Testa una pagina html presente in internet

Riferimenti ad altre pagine/siti

Normalmente se ne fa uso per riferisi a siti esterni (i famosi hyperlink) o ad altre pagine dello stesso sito:

esempio:

emmepole.altervista.org vi rimanda alla pagina iniziale del "mio" sito e il codice HTML è:

<a href="http://emmepole.altervista.org">emmepole.altervista.org</a>

Ovviamente avrei potuto inserire:

<a href="http://emmepole.altervista.org">Il mio sito</a> e sarebbe comparso questo:

Il mio sito ma il collegamento rimane a emmepole.tk

Se consentito dal server che contiene le pagine html si può fare riferimento ad una precisa pagina del sito stesso.

pagina html carica direttamente questa pagina senza dover passare per la "pagina di benvenuto"; il codice:

<a href="http://emmepole.altervista.org/html.html">pagina html</a>

Ci possono essere problemi nel caso in cui la pagina di partenza sia parte di un FRAME, ossia nel caso in cui vi siano più pagine caricate nella stessa finestra (è il mio caso: a sinistra ci sono i pulsanti e a destra questa pagina). Usando href così, le nuove pagine vengono caricate in questa porzione del browser. Se lo si vuole evitare basta aggiungere l'opzione target="_top":

<a href="http://emmepole.altervista.org/html.html" target="_top">pagina html</a>

Se invece volete che il nuovo sito venga caricato in una nuova finestra basta inserire: target="_blank"

Riferimenti all'interno/esterno della pagina

Per fare avere un riferimento all'interno della stessa pagina basta cambiare leggermente il codice <a href:

<a href="#2">Riferimenti all'interno/esterno della pagina</a> questo è il punto da cui si fa il riferimento.

<a name="2">Riferimenti all'interno/esterno della pagina</a> questo è il punto in cui si andrà a posizionare il cursore.

Volendo si possono creare dei riferimenti che puntano ad altre pagine dello stesso sito e non (sempre che le pagine a cui si va a puntare abbiano all'interno dei riferimenti):

<a href="sociale.html#1">pinco pallino</a>

Ritorno indietro di una pagina

Sempre utilizzando <a href, ma combinandolo con javascript si può inserire una funzione simpatica (anche se in realtà è già prevista dai browser)

<p>Clicca <a href="javascript:history.go(-1);">qui</a> per tornare indietro</p>

Con questa funzione il browser riprende la pagina web precedende senza ricaricarla dalla rete. Volendo si possono mettere anche valori diversi (-2, -3, ecc. Ma anche +1, +2, ecc. Per tornare avanti di alcune pagine, pagine ovviamente dalle quali si era tornati indietro.

Icone "sensibili" al movimento del mouse

Questa icona sorride/ride è data dal seguente codice:

<a href="http://emmepole.altervista.org"onmouseover="document.images[1].src='grafica/felice.gif'" onmouseout="document.images[1].src='grafica/triste.gif'"><img src="grafica/triste.gif" border="0" width="100" height="100"> </a>

Se vi si clicca sopra il mouse, il collegamento ipertestuale inserito vi manda alla homepage di questo sito.

I parametri witdh e height esprimono le dimensioni in percentuale della larghezza e dell'altezza rispetto l'immagine originale.

Il parametro border è lo spessore che il browser può inserire automaticamente intorno all'immagine.

Nota: il numero inserito tra le parentesi quadre (nell'esempio è [1]), indica su quale immagine deve essere sovrapposta la nostra.
In breve, se la mia è  la prima immagine inserisco il progressivo [0], se è  la seconda [1] e così via.

Ritorno ad inizio pagina

In caso di pagine lunghe, tipo questa, per fare un richiamo ad inizio pagina è sufficiente richiamare la pagina stessa

Vai ad inizio pagina.

Vai ad <a href="html.html">inizio pagina</a>.

Suddivisione della finestra in "Frame"

I browser più recenti consentono di caricare, all'interno della stessa finestra, diverse pagine HTML e posizionarle a nostro piacimento. Un esempio lo avete da questo sito: a sinistra c'è una pagina HTML contenente i vari pulsanti di menù, a destra gli argomenti trattati. L'utilizzo dei frame è "simpatico", ma ha crea delle problematiche:

1. I vecchi browser non li supportano.
2. I motori di ricerca non li digeriscono bene.
3. Non è sempre facile gestirli.

Bisogna innanzi tutto creare la pagina che dichiara i frame:

1. <HTML>
2. <HEAD>
3. <TITLE>UTILIZZO DEI FRAME</TITLE>
4. </HEAD>
   
5.  
6. <frameset cols="100,540">
7. <frame src="toolbar.html" name="toolbar" scrolling="no" NORESIZE>
8. <frame src="sociale.html" name="mainpage">
   
9.  
10. <NOFRAMES>
11. <body><CENTER>
12. <p>Il tuo browser WEB non supporta i Frames - aggiorna il tuo browser.<p>
13. <p align="center"><a href="index.html" target="_parent"><img src="grafica/terra.jpg" border=0></a></p>
14. </BODY>
15. </NOFRAMES>
16. </HTML>

Le righe dalla 1 alla 4 sono le solite di una pagina HTML. Nella riga 6 dichiaro la suddivisione della finestra in due colonne (COLS) di dimensioni pari a 100 pixel, la prima e 540 la seconda. Per dividere la finestra in tre righe potrei usare la seguente dicitura: <frameset rows="100,200,180"> (ROWS al posto di COLS). Io ho supposto una finestra di 640x480 pixel; se la finestra è di dimensioni diverse, il browser adatta in percentuale le dimensioni. Si può già in partenza dire al browser di suddividere in percentuale la finetra (rows="10%,30%,60%), oppure posso fissare ad una dimensione fissa una parte della finestra e lasciare libera l'altra (cols="100,*").

Nelle righe 7 e 8 righiamo le mie due pagine. Fate bene attenzione al parametro name, servirà in seguito. Con 'scrolling="no" imposto l'assenza delle barre di scorrimento, e con NORESIZE impongo il non riadattamento alla dimensione della risoluzione dello schermo.

Le righe dalla 10 alla 15 servono nel caso in cui il browser utilizzato (solo quelli meno recenti) non supporti i frame. All'interno dei codici <NOFRAME> .... ... </NOFRAME> si può inserire un normale codice HTML per indicare la presenza di un sito con frame o per visualizzare la pagina in modo diverso.

Per realizzare una pagina suddivisa in questo modo:

Devo utilizzare un codice tipo questo

1. ...
2. <FRAMESET ROWS="50%,50%">
3. <FRAME NAME="alto" SRC="alto.html" MARGINHEIGHT=1 MARGINWIDTH=1>
4. <FRAMESET COLS="40%,60%">
5. <FRAME NAME="sinistra" SRC="sin.html" MARGINHEIGHT=1 MARGINWIDTH=1>
6. <FRAME NAME="destra" SRC="des.html" MARGINHEIGHT=1 MARGINWIDTH=1>
7. </FRAMESET>
8. </FRAMESET>
9. ...

Ossia, il secondo frame, lo suddivido in altri due frame (righe 4, 5 e 6).

Torniamo ora al parametro name="...". Ora mi trovo nella situazione di avere la finestra divisa in tre parti, ed all'interno di ogni parte (frame) ho una pagina HTML.

Se dalla pagina html caricata nel frame "alto" voglio caricare inserire un link ad un'altra pagina html è sufficiente inserie il seguente codice:

<a href="http://emmepole.altervista.org">emmepole.altervista.org</a>

Ma, essendo all'interno di un frame, sarebbe più appropriato (per mantenere chiarezza nel codice) scrivere:

<a href="pagina2.html" target="alto">vai alla seconda pagina</a>

Se dalla pagina caricata nel frame "alto" volessi cambiare la pagina caricata nel frame "sinistra" inserisco il codice:

<a href="pagina2.html" target="sinistra">vai alla seconda pagina</a>

Se invece voglio richiamare un'altra pagina, come spiegato nella sezione "Riferimenti ad altre pagine/siti", e cancellare la suddivisione in frame:

<a href="pagina2.html" target="_top">vai alla seconda pagina</a>

In conclusione una nota: lavorare con i frame può dare soddisfazioni, ma alle volte è facile perdercisi dentro!

Aggiornamento pagina, o cambio pagina automatici

1. <HTML>
2. <HEAD>
3. <TITLE>refresh della pagina</TITLE>
4. <HEAD>
5. <meta http-equiv="refresh" content="20">
6. </HEAD>
   

<meta http-equiv="refresh" content="40; URL='http://emmepole.altervista.org'">

I colori dei link

Impostare le caratteristiche del testo

1. <HTML>
2. <HEAD>
3. <TITLE>caratteristiche del testo</TITLE>
4. <HEAD>
5. <STYLE>
6. BODY { color : white}
7. table { font-size : 9 pt; font-family : Verdana }
8. p { font-size : 9 pt; font-family : arial ; color : red}
9. </STYLE>
10. </HEAD>
    

Nella riga 6 specifico solo che di default nel corpo della pagina il colore del testo sia bianco.
Nella riga 7 indico che nelle tabelle il testo sia di tipo verdana con dimensione 9 punti.
Nella riga 8 indico che nei paragrafi voglio testo di tipo arial e di colore rosso.

Testa una pagina html presente in internet

Oltre ai software, in rete vi sono siti che offrono la possibilità ti testare le pagine html. Di seguito ne ho inserito uno, provatelo.

Ad esempio provate ad inserire questa pagina: http://emmepole.altervista.org/html.html

Ultimo aggiornamento: giugno 2003