Home

Bouw je eigen website

Domeinnaam

Dit is je adres waarop je website te vinden is op het WWW. Dit is het enige gedeelte dat geld kost. Ik heb mijn domeinnaam gekocht op www.namecheap.com.

Hosting

Dit is waar jouw bestanden, foto's en tekst opgeslagen staan om te leveren aan mensen die jouw website opvragen. Dit kan gratis op GitHub. Hierop kun je ook je website beveiligen volgens HTTPS. Dit geeft een betrouwbare look voor je website en zorgt ervoor dat gebruikers geen waarschuwing krijgen voordat ze op je website komen.

HTML

HTML is de taal waarin je je website schrijft. Dit is de basis van je website. Hierin zet je de tekst, afbeeldingen en links. Dit is de taal die je browser leest en omzet in een website. Hiervoor zijn goede templates te vinden. Mijn website is gebaseerd op deze template: https://html5up.net/spectral. Het editen daarvan doe ik in VSCode met hulp van de ingebouwde Copilot. Het duurt even voordat je doorhebt hoe het werkt, maar omdat je zelf de code maakt en niet via WordPress of andere website builders werkt, heb je eindeloze mogelijkheden en kun je zoveel pagina's als je wilt toevoegen zonder limieten.

Dit heb ik geleerd via deze tutorial, echt een aanrader: https://www.youtube.com/watch?v=e5AwNU3Y2es.

Hoe zet ik 3D-modellen op mijn website?

Dit is mogelijk door je model in Fusion 360 te openen en te kiezen voor Weergave --> Details weergeven op web. Vanuit hier kun je je model delen via het deel-icoon --> Embed. Deze HTML-code kun je kopiëren en voilà, je 3D-model staat op je website. Het mooie hieraan is dat wanneer je het ontwerp aanpast, dit ook automatisch wordt bijgewerkt op je website.

---

Dit is hoe je jouw website goed vindbaar kan maken op Google

Voeg de volgende meta data name toe bovenaan je HTML bestand.

<meta name="description" content="Leer hoe je je eigen website bouwt en host, inclusief het integreren van 3D-modellen.">
<meta name="keywords" content="website bouwen, gratis hosting, HTML, 3D-modellen, GitHub, Fusion 360">
<meta name="author" content="Tijn Verdurmen">

Bezoeker counter toevoegen aan je pagina

Voeg de volgende code toe aan je pagina en dan zie je dit:

VisitorCounters free

<a href='https://www.counters-free.net/'>VisitorCounters free</a>
<script type='text/javascript' src='https://www.freevisitorcounters.com/auth.php?id=1d5d059bff6227a6ea12118fbff20f6517c3538f'></script>
<script type="text/javascript" src="https://www.freevisitorcounters.com/en/home/counter/1467983/t/4"></script>

Laatst geüpdate op: tekst

<p id="laatst geüpdatet: " style="text-align: center; font-size: smaller;">
  Laatst bijgewerkt: <span id="last-updated-date"></span>
</p>

<script>
  fetch('https://api.github.com/repos/TijnVer/website/commits?path=Website.html')
    .then(response => response.json())
    .then(data => {
      const lastCommitDate = new Date(data[0].commit.author.date);
      document.getElementById('last-updated-date').textContent =
        lastCommitDate.toLocaleString('nl-NL', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          hour: '2-digit',
          minute: '2-digit'
        });
    })
    .catch(error => {
      console.error('Error fetching last commit date:', error);
      document.getElementById('last-updated-date').textContent = 'Onbekend';
    });
</script>
						

					
Tekst opmaak in HTML
					
Op deze pagina zijn voorbeelden van HTML opmaak te vinden https://html5up.net/spectral