Now I would like a tutorial on how to make a extensible logo/banner …

What is an "extensible logo/banner" ?

You've put the image into the #header-extra-div-1 rule as this tutorial says, but by doing that you won't be able to link it to anything. The main image on a site is normally put as a background to the #header rule.

To have the image link to your start page you need to use a combination of the #header, #header h1 and #header h1 a rules.

1) Put the image into the #header rule in your css as follows:

#header {
    background: url("http://satyayoga.wikidot.com/local--files/home:home/satyayoga_logo_hd_medium.jpg") no-repeat scroll 0 0 transparent;
}

2) Display the text of the site title by adding changing the #header h1, #header h2 from display:none; to:

#header h1, #header h2 {
    display: block;
    left: 0;
    top: 0;
}

3) Then put the following into the #header h1 a rule:

#header h1 a {
    color: #222;
    font-size: 40px;
    height: 100px;
    letter-spacing: 1px;
    padding: 0;
    position: absolute;
    text-indent: -9999px;
    width: 300px;
}

The link is actually applied to the site title text but with the text-indent we've moved the text completely out of the way while leaving the actual link intact.

Clicking anywhere on the image will now link to the start page as you can see in the image below. You can't link it to anything else as it is set in the backend javascript by Wikidot. But you can of course change which page is your start page.