🖥️
Websites met HTML en CSS
  • Welkom
  • 1: HTML - De basis
    • Filmpje: wat is HTML?
    • Je eerste site
    • Body
    • Titel
    • Filmpje: de basistags
    • Beetje meer body
    • Kopjes
    • Alinea's
    • Opdracht
  • 2: HTML - Body, plaatje, link
    • Filmpje: plaatjes en links
    • Belangrijke tekst
    • Plaatje
    • Link
    • Opdracht
  • 3: HTML - lijsten
    • Filmpje: opsommingen en lijsten
    • Lijst/opsomming
    • Opdracht
  • 4: HTML - Tabellen
    • Filmpje: tabellen
    • Tabel
    • Tabel met lijntjes
    • Opdracht
  • 5: HTML - iFrames
    • Filmpje: iframes om andere pagina's in te voegen
    • YouTube of maps toevoegen
    • Opdracht
  • 6: CSS - css bestand
    • Je eerste css regels
    • Opdracht
  • 7: CSS - Lettertypes
    • Spelen met fonts
    • Opdracht
  • 8: CSS - kleuren & achtergrond
    • Kleurtjes
    • Achtergrond
    • Opdracht
  • 9: CSS - Boxmodel & borders
    • Doosje....
    • Opdracht
  • 10: CSS - Margin, padding & devtools
    • Hulp is onderweg
    • Opdracht
  • 11: CSS - Elementen selecteren
    • Klassen en IDs
    • Opdracht
  • 12: CSS - Pseudo classes
    • Wat voor classes?
    • Opdracht
  • 13: CSS - Tabellen opmaken
    • Tabellen in stijl
    • Opdracht
  • 14: CSS - Lijsten opmaken
    • Lijsten verbouwen tot menu
    • Opdracht
  • Einopdracht
    • Eindopdracht
Powered by GitBook
On this page
  • Youtube
  • Google Maps

Was this helpful?

  1. 5: HTML - iFrames

YouTube of maps toevoegen

PreviousFilmpje: iframes om andere pagina's in te voegenNextOpdracht

Last updated 4 years ago

Was this helpful?

Vaak wil je een deel van een andere pagina in jouw eigen pagina opnemen. Denk bijvoorbeeld aan een Youtube filmpje, of een interactieve Google maps kaart. Dit heet 'insluiten' of 'embedding'. Veel pagina's hebben hiervoor functies ingebouwd.

Youtube

Zoek het gewenste filmpje op op Youtube. Je klikt nu eerst op 'Share' of 'Delen':

Daarna kies je 'Embed' of 'Insluiten':

Je krijgt nu een schermpje waarin een stuk html-code staat die begint met: <iframe>

Zorg dat je de hele regel kopieert. Dus helemaal tot en met de afsluitende </iframe>-tag:

Dus bijvoorbeeld:

<iframe width="560" height="315" src="https://www.youtube.com/embed/znMkou7E9eo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Zet de regel code in je pagina en je bent klaar!

Google Maps

Google Maps werkt op een vergelijkbare manier als Youtube.

Je zoekt een plek op waarvan je de interactieve kaart wilt hebben. Klik deze aan op de kaart in Google Maps. Dan klik je op 'Delen':

​Vervolgens klik je op "Een kaart insluiten" en klik je naast de <iframe> code op "HTML Kopiëren":

De grootte kun je weer aanpassen door width en height te veranderen in de regel code.

Je kunt met het <iframe> element ook andere webpagina's invoegen. Let wel op want sommige pagina's laten dit niet toe.

​