Hoofdstuk 6 · Les 6.1

Bouw en deel je eerste website met AI

Beschrijf wat je wilt maken en laat AI een interactieve website bouwen. Probeer het resultaat, download het HTML-bestand en ontdek hoe je het deelt.

Bekijk de videoYouTube
01Een website laten maken · openen · delen

Je beschrijft je idee. AI bouwt de website.

Je leerstof, een uitleg of een eigen idee: laat AI er een website van maken. Je hoeft de code niet zelf te schrijven. Vraag om een werkend HTML-bestand, open het en probeer wat je ermee kunt.

Met een opdracht als Maak hiervan een interactieve website in HTML kan AI al een eerste versie bouwen. Een preview, een gedownload bestand en een openbare website zijn verschillende manieren om die te openen.

Ik zie alleen code. Hoe krijg ik een bestand?

Vraag eerst om het complete bestand als download. Lukt dat in jouw chatbot niet? Kopieer de HTML naar een gewone teksteditor, zoals Kladblok. Sla op als index.html, met bestandstype Alle bestanden en codering UTF-8. De naam mag niet eindigen op .html.txt. Open het bestand daarna in je browser.

Werkt een knop niet of ontbreekt iets? Beschrijf in dezelfde chat waarop je klikt en wat er misgaat. Vraag om het volledige aangepaste HTML-bestand, zodat je geen losse stukjes code hoeft te vervangen.

Waar staat je website eigenlijk?

Een HTML-bestand, een voorbeeld in je chatbot en een openbare weblink kunnen dezelfde website laten zien. Het verschil zit in hoe jij en anderen erbij komen.

Schematische weergave
Bestand op jouw apparaat · index.html
Lokaal bestand

Dubbelklik en je browser opent de website.

Download het HTML-bestand en open het vanuit je map Downloads. Bij een zelfstandig HTML-bestand zitten de tekst, vormgeving en knoppen bij elkaar. Je kunt het bestand ook naar iemand sturen.

De ander opent het bestand op het eigen apparaat.
Een weblink maken met NetlifyOptioneel · de publicatieroute uit de video
  1. Bewaar je website als index.html. Vraag AI om één zelfstandig HTML-bestand. Test het eerst door het op je apparaat te openen.
  2. Open Netlify Drop. Volg de stappen voor aanmelden en upload je HTML-bestand. Bestaat jouw site uit meerdere bestanden? Houd ze samen in één map, met index.html als startpagina.
  3. Publiceer en probeer de link. Open het webadres in een privévenster om te controleren of anderen erbij kunnen. Zie je een melding om de startpagina index.html te noemen? Kies dan de optie om te hernoemen en te publiceren.
Uitsnede uit de lesvideo. ‘Rename and deploy’ maakt index.html de startpagina; de huidige omgeving kan er iets anders uitzien.

De startpagina hernoemen in Netlify

Uitsnede uit de opname: Netlify vraagt Rename to index.html? en toont de knop Rename and deploy.

Uitsnede uit de lesvideo. ‘Rename and deploy’ maakt index.html de startpagina; de huidige omgeving kan er iets anders uitzien.

Gebruik voor een eerste test materiaal dat openbaar mag zijn. Een statisch HTML-bestand heeft nog geen veilige accounts of gedeelde database. De beschikbare hostopties en voorwaarden kunnen veranderen; bekijk die bij het publiceren. Uitleg van Netlify

Vraag of ervaring delen

Vragen en ervaringen

Praat verder over deze les

Stel een vraag, deel je ervaring of help een andere student op weg.

Bijdragen laden…