Grazie per le risposte ragazzi!
Allora sono riuscito ad aggiustare un po' di cose.
Ora il mio problema rimane il colore.
Come potete vedere dal codice sottostante sono riuscito ad ottenere il risultato voluto solo sul numero 1.
ma credo non sia il metodo giusto. Non si può scrivere un'unica funzione per tutti gli id?

per quanto riguarda l'uso di "this", ho fatto delle prove ma non ho afferrato come usarlo..

ecco il codice modificato:

<html>
<head>
<title>Esercizio 3</title>
<script type="text/javascript">

function scriviCoordinate(e) {
document.getElementById("par2").innerHTML = e.target.innerHTML;
}

function CambiaTit()
{
document.getElementById("tit").innerHTML = "Sei passato!";
}


function cambiaColoreRed()
{
document.getElementById("1").style.color= "red";
}

function cambiaColoreBlack(id)
{
document.getElementById("1").style.color= "black";
}

</script>
</head>
<body onClick="scriviCoordinate(event)">
<script type="text/javascript">

document.write("<h1 id='tit' onMouseOver='CambiaTit()'>Titolo</h1>");
document.write("<h2 id='subt' onClick='scriviCalce()'>Sottotitolo</h2>");

document.write("

"+
"<i id='1' onClick='cambiaColoreRed()' onMouseOut='cambiaColoreBlack()'>1[/i]"+"
"+
"<i id='2'>2[/i]"+"
"+
"<i id='3'>3[/i]"+"
"+
"<i id='4'>4[/i]"+"
"+
"<i id='5'>5[/i]"+"
"+
"<i id='6'>6[/i]"+"
"+
"</p>");

document.write("<p id='par2'>paragrafo</p>");

</script>

</body>
</html>