In questo articolo vedremo come si inseriscono e si personalizzano lo sfondo della nostra pagina, i vari testi e i collegamenti ipertestuali( o links).
Bene bene, siamo giunti alla 5 parte della guida all’ HTML, la precedente ha anche un piccolo sommario e la trovate quì.
Nell’ultima “puntata”, dopo aver visto come si crea una semplice pagina in HTML, vi abbiamo lasciato col fiato sospeso per quanto riguarda la parte più interessante di una pagina HTML: il contenuto del tag body.
Come già abbiamo visto, il body rappresenta il corpo della pagina e sostanzialmente, quì dovremo inserire tutto il testo che apparirà dentro alla nostra pagina.
Premettiamo prima di parlare della formattazione (e di altri argomenti inerenti) che diversi tags e attributi di HTML sono deprecati, ovvero non vengono più utilizzati, per fare posto invece ai fogli di stile CSS.
Perchè? Intanto perchè il CSS permette di alleggerire fortemente la pagina e renderla più facile da leggere per il webmaster (ed anche al browser), ma sopratutto perchè pensate a questa situazione: è natale e volete aggiornare il logo del vostro sito, quest’ultimo però è composto da svariate centinaia di pagine che dovrete andare a modificare singolarmente per inserire il nuovo logo.
Quindi, senza l’utilizzo di un pò di CSS (o, in questo caso, eventualmente di PHP :)) saremo costretti ad effettuare un lunghissimo e ripetitivo lavoro di copia-incolla.
Ora, su InformaticaLab troverete la guida ai CSS, ma per seguirla bene dovrete conoscere HTML: per questo motivo, vedremo tags che probabilmente non troverete utilizzati da nessuna pagina, questo per i motivi appena descritti.
Lo sfondo
Lo sfondo di una pagina web è una delle cose che risalta (indirettamente) di più agli occhi quando un utente accede al vostro sito.
Vediamo quindi, come personalizzarlo.
Sostanzialmente per personalizzarlo, abbiamo due possibilità:
- impostare un colore di sfondo
- impostare un’immagine di sfondo
- (entrambi)
Per impostare il colore di sfondo, possiamo utilizzare l’attributo del tag body bgcolor in questo modo:
<body bgcolor=”red”>
Oppure possiamo impostarlo utilizzando un’alternativa in CSS:
<body style=”background-color: red”>
Al posto di red, possiamo o inserire i nomi del colore che vogliamo far apparire in inglese (ce ne sono diversi), o se vogliamo personalizzare meglio il colore ci basta utilizzare uno dei tanti servizi online per avere l’esadecimale del colore prescelto.
Utilizzando l’esadecimale il codice precedente diventa:
<body bgcolor=”#FF0000″>
Per impostare invece l’ immagine di sfondo, ci basterà utilizzare la seguente sintassi:
<body background=”immagini/sfondo.jpg”>
Analizziamo velocemente il contenuto delle virgolette: quello che abbiamo fatto in questo modo, è dire al browser di caricare l’immagine che si trova dentro alla cartella immagini e che si chiama sfondo.jpg.
In pratica, se noi abbiamo una situazione del genere:
…/
files – Una directory
immagini – Directory contenente le immagini che usiamo nel sito
index.html – L’ index che stiamo facendo
pagina.html – Un’altra pagina HTML
sfondo2.jpg – Una immagine di sfondo
Per dire al browser di entrare dentro alla cartella “immagini”, dobbiamo scrivere:
immagini
Seguita da slesh e il nome del file che vogliamo usare di sfondo, compreso di estensione (in questo caso, .jpg)
Nel caso avessimo voluto impostare come sfondo l’immagine “sfondo2.jpg” (dall’esempio di sopra) che è contenuto nella stessa directory della nostra pagina, ci sarebbe bastato scrivere il codice:
<body background=”sfondo2.jpg”>
Infine, come già detto possiamo combinare entrambi gli attributi:
<body bg-color=”red” background=”sfondo2.jpg”>
Formattazione del testo
Adesso ci addentriamo in una parte davvero caduta in disuso con l’avvento di CSS, perciò la maggior parte di queste cose sono a titolo di studio. Diciamo inoltre che, dato che non conoscete ancora CSS, questo per voi è il metodo principale per formattare un testo che è appunto una delle caratteristiche principali di un sito.
Questo per sottolineare il fatto che, anche se sono tags superati, sconsigliati, deprecati (o come volete definirli) vale comunque la pena impararseli per poi passare al livello successivo.
Colori di base del testo e dei links
Di default, il colore del testo è nero. Ma nel caso in cui abbiamo impostato uno sfondo scuro, allora è importante definire un colore “di base” che cambi qualsiasi testo dal colore nero, al colore di default che impostiamo noi.
Per farlo, ci serviremo sempre del tag <body>:
<body text=”red”>
Ed ovviamente, non abbiamo (e non dobbiamo) bisogno specificare un nuovo body: ci basta aggiungere l’attributo text al body creato poco fà.
Al posto di red, ovviamente, possiamo specificare un colore arbitrario come visto prima utilizzando il rispettivo codice esadecimale.
Poi, potremmo voler cambiare anche il colore di default dei links: anche se non ce ne accorgiamo, ad ogni link vengono associati 3 colori:
- Uno di base quando il link è lì “fermo”;
- Uno che si attiva sui links che rimandano a pagine che abbiamo già visitato;
- Uno che si attiva quando passiamo col mouse sopra l’immagine;
- E, per dirla tutta, uno che ci avverte del caricamento di quella pagina una volta che è stato cliccato il link
Fra poco vedremo la sintassi dei primi due, in quanto del terzo colore con HTML 4 non possiamo impostarlo e il quarto invece serve(o meglio, serviva) per le connessioni lente ed appariva quando un utente cliccava su un link e il browser lo stava caricando (chi aveva una linea 56kb, sà a cosa ci riferiamo).
Per quanto riguarda i link “fermi” , come li abbiamo definiti, è il colore del link che ci appare quando apriamo la pagina (di default, blue).
Per impostarlo, utilizziamo l’attributo link che è sempre del tag body:
<body link=”blue”>
Infine, il colore dei links che puntano a siti che abbiamo già visitato (e quindi presenti nella nostra cronologia), di default è viola, ma può essere cambiato con l’attributo vlink:
<body vlink=”green”>
Nel prossimo articolo, parleremo più approfonditamente della personalizzazione e formattazione dei testi. Continuate a seguirci!
