💾
Informatica programma regulier
  • Het vak
  • Kernprogramma
    • Periode 1
    • Periode 2
    • Periode 3
  • Kern Programma
    • Het Internet
      • 1: What is the Internet?
      • 2: Wires, Cables & Wifi
      • 3: IP Addresses & DNS
      • 4: Packets, Routing & Reliability
      • 5: HTTP & HTML
      • 6: Encryption & Public Keys
      • 7: Cybersecurity & Crime
      • 8: How Search Works
    • Informatie
      • Presentaties
      • Les 1: Introductie in Binaire Getallen
      • Les 2: Hexadecimale Getallen
      • Les 3: Logische Operaties
      • Les 4: Digitalisering van tekst
      • Les 5: Digitalisering van beeld
      • Les 6: Digitalisering van geluid
    • HTML-CSS
      • HTML-CSS-0
        • Les 1: HTML, de basis
        • Les 2: HTML, meer over body, plaatjes en links
        • Les 3: HTML, lijsten
        • Les 4: HTML, tabellen
        • Les 5: CSS, background-color, color
        • Les 6: HTML, iframes, Youtube of maps invoegen
      • HTML-CSS-1
        • Les 1: CSS koppelen aan je HTML-pagina
        • Les 2: Fonts, lettergrootte en stijl
        • Les 3: Kleuren en achtergrondplaatje
        • Les 4: Boxmodel en borders
        • Les 5: Margin, padding en development tools
        • Les 6: Elementen selecteren: classes en id's
        • Les 7: Pseudo-classes, (hyper)links en span-element
        • Les 8: Tabellen opmaken
        • Les 9: Lijsten opmaken (menu in je pagina)
      • HTML-CSS-2
        • Les 1: Structuur van je Pagina
        • Les 2: position in CSS
        • Les 3: Inline vs Block elementen
      • Eindopdracht [PET1]
        • Publiceren op Github pages
        • Beoordeling
      • Links
    • Python
      • start
      • Python-0
        • Untitled
        • Les 1: Je eerste tekening
        • Les 2: Herhalen
        • Les 2b: Loop in Loops
        • Les 3: Functies maken
        • Les 4: Parameters
        • Les 5: Loops & Range()
      • Python-1
        • Les 1: Print & variabelen
        • Les 2: Input en datatypes
        • Les 3: Vergelijkingen
        • Les 4: Booleaanse expressies
        • Les 5: For/While loops
        • Les 6: Functies
        • Les 7: While (+teller)
      • Eindopdrachten [PET2]
        • Python Kunst
          • Les 1: Functies in Functies
          • Les 2: Meerdere turtle's
          • De eindopdracht
        • Galgje
        • Wordmind
        • Het langste woord
    • Automaten
    • Algoritme
      • Presentaties
      • Les 1: Wat is een algoritme?
      • Les 2: Sorteren
      • Les 3: Sorteer Algoritmes
      • Les 4 & 5: Toren van Hanoi
    • Databases
      • Planner V5
      • Untitled
      • 1: Inleiding
        • Wat is een database?
        • Wat is SQL?
        • Onze database
      • 2: Selectie, voorwaarden en sorteren
        • Selectie en Sorteren
          • Distinct
          • Order By
        • De WHERE Clausule
          • Operator AND en OR
          • Between
          • IN
          • Not
          • Like
          • Is Null
          • Limit
        • Opdrachten
        • Antwoorden
      • 3: Functies
        • Vragen
        • Antwoorden
      • 4: Grouperen
        • Vragen
        • Antwoorden
      • 5: Joins
        • Vragen
        • Antwoorden
      • 6: Subqueries
        • Vragen
        • Antwoorden
      • 7: Tabellen Muteren
        • Create
        • Drop
        • Opdracht
        • Antwoord
      • 8: Gegevens toevoegen
        • Insert
        • Update
        • Delete
        • Opdrachten
        • Antwoorden
      • 9: Sleutel en Verwijzingen
        • Het strokendiagram
        • Foreign Key
      • Eindopdracht [PET3]
    • Presentatie
      • Presenatieschema
      • Beoordelingsmatrix
  • Keuzemodules
    • Computernetwerken
    • Web development
    • Kunstmatige Intelligentie
    • Embedded Systems
      • Planner
      • Les 1: Wat is een Arduino
      • Les 2: Blink
      • Les 3: Schakelaars
      • Les 4: Seriële monitor
      • Les 5: Analoge Sensoren
      • Les 6: Servo - beweging
      • Les 7: LCD display
      • Eindopdracht
    • Betoog
      • Voorbeelden
      • Stappenplan
      • Bouwplan
      • Bronvermelding
      • Beoordeling matrix
    • Internet of things
      • Planner
      • Eindopdracht
      • Beoordelingsmatrix
    • De meesterproef
      • Voorbeelden
      • Beoordelingschema
  • PTA
    • Havo
      • Cohort 2020
    • Vwo
      • Cohort 2020
    • Vrijstellingen - concept
    • Eindtermen
      • Domein A: Vaardigheden
      • Domein B: Grondslagen
      • Domein C: Informatie
      • Domein D: Programmeren
      • Domein E: Architectuur
      • Domein F: Interactie
      • Domein G: Algoritmiek, berekenbaarheid en logica
      • Domein H: Databases
      • Domein I: Cognitive computing
      • Domein J: Programmeerparadigma’s
      • Domein K: Computerarchitectuur
      • Domein L: Netwerken
      • Domein M: Physical computing
      • Domein N: Security
      • Domein O: Usability
      • Domein P: User experience
      • Domein Q: Maatschappelijke en individuele invloed van informatica
      • Domein R: Computational science
Powered by GitBook
On this page

Was this helpful?

Export as PDF
  1. Kern Programma
  2. HTML-CSS
  3. HTML-CSS-0

Les 6: HTML, iframes, Youtube of maps invoegen

PreviousLes 5: CSS, background-color, colorNextHTML-CSS-1

Last updated 5 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.

Zie de voorbeelden van youtube.

Je klikt 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/rYFjIx0OBAI" frameborder="0" allowfullscreen></iframe>

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

Bij Google maps gaat het op soortgelijke manier.

Je zoekt een plek op waarvan je de interactieve kaart wilt hebben.

Dan klik je op 'Delen'. Kies vervolgens 'Kaart insluiten' en neem de regel code over die begint met <iframe …

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.

Opdrachten

[1] Voeg een favoriete video in in je pagina met behulp van een iframe

[2] Voeg een interactieve kaart in in je pagina van de plek waar je school staat

[3] Probeer een andere pagina in te voegen. Kijk voor meer hulp:

https://www.w3schools.com/tags/tag_iframe.asp