1A
Kies één afbeelding
Bijvoorbeeld een logo, begrippenkaart, illustratie of screenshot.
Les 8 van 10
Afbeeldingen, bestanden en downloads toevoegen
Je app hoeft niet altijd uit één los HTML-bestand te bestaan. In deze les vraag je AI om een compleet zipbestand met je webapp, afbeeldingen en downloadbestanden.
Van bestand naar mapje
Niet meer één los HTML-bestand
Zodra je afbeeldingen en downloads toevoegt, is je webapp vaak geen enkel bestand meer. Je vraagt AI dan om een compleet zipbestand met je startpagina en alle bestanden die de website gebruikt.
mijn-webapp/
index.html
afbeeldingen/
voorbeeld.png
downloads/
werkblad.docx
Bestandenwerkbank
Bouw en controleer je webapppakket
Kies twee bestanden. Daarna krijg je een persoonlijke prompt en controleer je het zipbestand dat AI voor je heeft gemaakt.
0van 3 klaar
1B
Kies één downloadbestand
Gebruik een Wordbestand of PDF dat bezoekers straks mogen downloaden.
Deze website leest alleen de bestandsnamen en controleert het zipbestand lokaal. Er wordt niets verstuurd of opgeslagen.
Stap 2
Gebruik je persoonlijke zipprompt
Breid de webapp die we zojuist hebben gebouwd uit met deze twee bestanden:
- Afbeelding: [NAAM VAN DE AFBEELDING]
- Downloadbestand: [NAAM VAN HET WORD- OF PDF-BESTAND]
Voeg de afbeelding zichtbaar en passend toe in de webapp.
Voeg een duidelijke downloadknop toe voor het downloadbestand.
Gebruik deze mapstructuur:
- index.html in de hoofdmap
- afbeeldingen/ voor de afbeelding
- downloads/ voor het Word- of PDF-bestand
Maak hiervan één compleet zipbestand met index.html en alle gebruikte bestanden. Zorg dat de verwijzingen in index.html naar de juiste bestandsnamen en mappen wijzen.
Alles moet werken als ik de zip uitpak en de volledige map upload naar hetzelfde Netlify/Vercel-project.
Geef het complete zipbestand terug als download.Kies eerst beide bestanden. Daarna worden hun namen automatisch ingevuld.
Stap 3
Controleer het zipbestand van AI
Selecteer alleen het ontvangen zipbestand. We controleren de mapstructuur en bestandsverwijzingen op deze computer.
Na de controle zie je hier precies wat goed staat en wat nog ontbreekt.
Alles groen? Pak de zip uit en upload de volledige map.
Gebruik hetzelfde Netlify/Vercel-project als eerder. Zo blijft je URL gelijk en gaan de afbeelding en downloadknop ook mee online.
Nu doen
Actie van deze les
Maak een compleet webapp-mapje
Voeg één afbeelding en één download toe aan je bestaande webapp.
0van 3 stappen gedaan
Checklist
0 van 3 gedaan
Kies in de bestandenwerkbank één afbeelding en één Wordbestand of PDF.
Gebruik je persoonlijke zipprompt en controleer het ontvangen zipbestand.
Pak de zip uit, upload de volledige map en test de afbeelding en downloadknop.
Klaar als:
Je hebt een zipbestand of map met index.html, een afbeelding en een downloadbestand dat online werkt.
Vragen en opmerkingen
Praat verder over deze les
Stel een vraag, lees mee of help een andere cursist op weg.
Je kunt alle vragen lezen. Log in of registreer gratis om zelf mee te praten.
Log in of registreer0 vragenAlles is beantwoord
Vragen laden...