Should href lang links be deep or point to the home page?

Question

I have a website http://www.example.com/convert.html and would like to have multilanguage versions of the website; for example German (http://www.example.com/de/konvertieren.html) and French (http://www.example.com/fr/convertir.html).

I "manually" translated all the pages including the Menu items, Footer, Header etc into the respective languages. So I basically now have 3 versions of my website with whole content in a different language. In every page of all 3 websites I have included

<link rel="x-default" href="http://example.com/en" hreflang="en" />
<link rel="alternate" href="http://example.com/de" hreflang="de" />
<link rel="alternate" href="http://example.com/fr" hreflang="fr" />

Is that the correct way to do it or should it be a link to the page like

<link rel="x-default" href="http://example.com/en/convert.html" hreflang="en" />
<link rel="alternate" href="http://example.com/de/konvertieren.html" hreflang="de" />
<link rel="alternate" href="http://example.com/fr/convertir.html" hreflang="fr" />

Answer 1

The site that I manage has an english version as our main site and then an additional canadian site. Here's the hreflang tags that I have implemented:

<link rel="canonical" href="http://www.example.com/test" />
<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/test" >
<link rel="alternate" hreflang="en-ca" href="http://www.example.ca/test" />
<link rel="alternate" hreflang="en" href="http://www.example.com/test" />