Inserire un immagine di sfondo

Per inserire un’immagine come sfondo è sufficiente utilizzare la seguente sintassi:

<body background="imgSfondo.gif">

Per ora presupponiamo che l’immagine di sfondo si trovi nella stessa cartella della nostra pagina HTML, vedremo in seguito (quando parleremo delle immagini) come inserire immagini che si trovano in altre cartelle.

L’immagine di sfondo verrà ripetuta in orizzontale e in verticale.

È anche possibile combinare i due attributi, in modo che mentre l’immagine di sfondo viene caricata, venga comunque visualizzata una colorazione della pagina:

<body bgcolor="#0000ff" background="imgSfondo.gif">

Ecco subito un esempio di pagina impostata con lo sfondo.

È importante assegnare sempre un colore alla pagina anche quando lo sfondo della pagina è bianco (al massimo assegnare bgcolor="#FFFFFF"). Infatti, come impostazione predefinita, il browser assegna alla pagina il colore di sfondo che l’utente ha impostato nella finestra del sistema operativo: quindi se l’utente ha impostato uno sfondo nero e voi non avete assegnato nessun colore di sfondo alla pagina, la vostra pagina sarà nera.

Se usate Windows, per fare una prova provate a impostare diversamente il tema delle finestre. Dal pannello di controllo: Schermo > Aspetto > Combinazione e poi scegliere:

"nero a contrasto elevato", oppure "prugna".

Infine visualizzate questa pagina - che è senza sfondo – e vedrete che la pagina HTML prenderà la colorazione che avete impostato nel tema delle finestre.

Eliminare i margini delle pagine

Abbiamo detto all’inizio che il lavoro del webmaster consiste non soltanto nel conoscere alla perfezione il linguaggio HTML, ma soprattutto nell’essere un esperto del modo in cui i browser visualizzano le pagine.

Negli esempi precedenti avrete notate che il browser – secondo l’impostazione predefinita - lascia un po’ di margine tra la pagina e il bordo della finestra. Questo in alcune situazioni (ad esempio se volete disporre un logo in alto a sinistra) può dare fastidio.

Per eliminare il bordo è sufficiente inserire i seguenti attributi del body:

<body leftmargin="0" topmargin="0">

Questa sintassi funziona correttamente con ogni browser moderno (Internet Explorer, Netscape 6 o superiore, Mozilla, Opera), come è possibile vedere nell’esempio.

Tuttavia è bene sapere che i browser nel corso degli anni hanno introdotto dei tag e degli attributi "proprietari", con lo scopo di ottenere determinati effetti di visualizzazione, o indicare in qualche modo particolare il contenuto.

Questa situazione capitava soprattutto nei primi anni del web, quando Microsoft e Netscape lottavano per il predominio del mercato: in qualche misura la guerra dei browser è stata anche guerra di tag proprietari, con gravi difficoltà per gli sviluppatori che si trovavano continuamente di fronte a pagine che non venivano visualizzate allo stesso modo.

Per questo motivo fino a qualche anno fa per togliere il margine con Netscape 4.x dovevate inserire:

<body marginleft="0" margintop="0">

Mentre per togliere il margine con Internet Explorer:

<body leftmargin="0" topmargin="0">

Se avrete a che fare con pagine web di altri webmaster vi capiterà spesso di incontrare questo genere di sintassi:

<body leftmargin="0" topmargin="0" marginleft="0" margintop="0">

Questa sintassi serviva per eliminare il margine sia con Netscape 4.x, sia con Internet Explorer, specificando tutti e quattro gli attributi.

Al giorno d’oggi potete invece limitarvi a scrivere:

<body leftmargin="0" topmargin="0">

Fortunatamente negli ultimi anni l’ottica della guerra dei browser è cambiata, e i produttori di software sono passati dalla competizione per chi implementa nuove e fantastiche funzionalità proprietarie, al tentativo di rilasciare browser che aderiscano al meglio agli standard del W3C (non è un caso che sia la Netscape, sia la Microsoft facciano parte del consorzio), senza perdere di vista la velocità nell’effettuare il rendering della pagina.

L’adesione agli standard non può che essere un bene, dal momento che potenzialmente significa per noi sviluppatori la stesura di codice "universale", che funzioni correttamente a prescindere dal browser e dalla piattaforma (speriamo).

Impostare la lingua del documento

Tramite l’attributo "lang" è possibile specificare ai motori di ricerca e al browser dell’utente quale lingua stiamo utilizzando. La sintassi per la lingua italiana è:

<body lang="it">

Questo attributo non è solo una proprietà del tag body, ma può essere riferito alla maggior parte dei tag HTML che vedremo (come paragrafi, blocchi, tabelle, eccetera). È importante sottolineare che questo attributo non carica automaticamente il set di caratteri necessari alla visualizzazione della lingua, ma si limita a specificare che il documento (o parte del documento) è nella lingua indicata.

Si tratta di un attributo che vi sarà utile soprattutto se vi capiterà di sviluppare dei siti multilingua (e poi di doverli inserire nei motori di ricerca).

Ecco il codice che esemplifica gli argomenti appresi finora in questa lezione, visualizzabile anche in questa pagina:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//IT">
<html>
<head>
<meta
  http-equiv="Content-Type"
  content="text/html;
  charset=iso-8859-1"
>
<title>HTML.it</title>
</head>

<body
  leftmargin="0"
  topmargin="0"
  background="imgs/sfondo00006.gif"
  bgcolor="#66CCFF"
  lang="it"
>

Testo di prova
</body>
</html>

Tabella codici ASCII,Hex,Char,HTML

TABELLA CODICI ASCII

La sigla "ASCII" sta per: "American Standard Code for Information Interchange", cioe' "Standard americano per lo scambio di informazioni".
Un codice ASCII e' la rappresentazione numerica di un carattere in quanto il computer puo' solo capire numeri e codici. Per esempio il carattere "@" e' rappresentato dal codice ASCII "64", "Y" dall'"89", "+" dal "43", ecc.
Pero' un codice ASCII puo' anche rappresentare una specifica azione, come "vai a capo", codice ASCII "10", oppure "cancella", codice "127", ecc.
Il codice ASCII fu inventato molti anni fa per le comunicazioni fra telescriventi (infatti ci sono dei codici di comandi specifici che sono quasi incomprensibili, ma al tempo avevano la loro funzione), poi man mano e' diventato uno standard mondiale.
Parlando di un caso piu' pratico, quando qualcuno richiede un testo in formato ASCII, per esempio il vostro curriculum, oppure un articolo, ecc, significa che richiede un testo nel formato standard in modo che possa facilmente riutilizzarlo nei propri programmi.
Infatti il formato ASCII e' universalmente riconosciuto da tutti i computer, cosa che non e' vera nel caso di testi "formattati", cioe' con sottolineature, stili, grassetti, ecc.
Un file in formato ASCII puo' essere creato utilizzando il Blocco Note di Windows, oppure salvando in formato "solo testo" da un qualsiasi programma di videoscrittura, come Word o simili.

Sintassi della scritta qui sopra:

<strong><font size="3"><script language="JavaScript" type="text/javascript">
/*
Prelevato su http://www.web-link.it

RAINBOW TEXT Script by Matt Hedgecoe (c) 2002
Featured on JavaScript Kit
For this script, visit http://www.javascriptkit.com
*/

// ********** MAKE YOUR CHANGES HERE

var text="Ciao a tutti benvenuti sul sito di Brunocri, su questo sito ; tutte le informazioni che desiderate ricevere ovviamente riguardo al mondo di internet, telelavoro , problemi col computer,un po di tutto , basta chiedere , la soluzione per ogni problema c'è! " // YOUR TEXT
var speed=80 // SPEED OF FADE

// ********** LEAVE THE NEXT BIT ALONE!

if (document.all||document.getElementById){
document.write('<span id="highlight">'+ text +'</span>')
var storetext=document.getElementById? document.getElementById("highlight") : document.all.highlight
}
else
document.write(text)
var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
var r=1
var g=1
var b=1
var seq=1
function changetext(){
rainbow="#"+hex[r]+hex[g]+hex[b]
storetext.style.color=rainbow
}
function change(){
if (seq==6){
b--
if (b==0)
seq=1
}
if (seq==5){
r++
if (r==12)
seq=6
}
if (seq==4){
g--
if (g==0)
seq=5
}
if (seq==3){
b++
if (b==12)
seq=4
}
if (seq==2){
r--
if (r==0)
seq=3
}
if (seq==1){
g++
if (g==12)
seq=2
}
changetext()
}
function starteffect(){
if (document.all||document.getElementById)
flash=setInterval("change()",speed)
}
starteffect()
</script></font></strong>