HTML -iframes
Een HTML-iframe wordt gebruikt om een webpagina binnen een webpagina weer te geven.
HTML Iframe-syntaxis
De HTML <iframe>-tag specificeert een inline frame.
Een inline frame wordt gebruikt om een ander document in te sluiten in het huidige HTML-document.
Syntaxis
<iframe src="url" title="description"></iframe>
Tip: Het is een goede gewoonte om altijd een
titleattribuut voor de <iframe>. Dit wordt door schermlezers gebruikt om voor te lezen wat de inhoud van het iframe is.
Iframe - Hoogte en breedte instellen
Gebruik de heighten widthattributen om de grootte van het iframe op te geven.
De hoogte en breedte worden standaard in pixels aangegeven:
Voorbeeld
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>
Of u kunt het styleattribuut toevoegen en de CSS heighten width
eigenschappen gebruiken:
Voorbeeld
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe - Verwijder de rand
Standaard heeft een iframe een rand eromheen.
Om de rand te verwijderen, voegt u het styleattribuut toe en gebruikt u de CSS-
bordereigenschap:
Voorbeeld
<iframe src="demo_iframe.htm" style="border:none;"
title="Iframe Example"></iframe>
Met CSS kunt u ook de grootte, stijl en kleur van de rand van het iframe wijzigen:
Voorbeeld
<iframe src="demo_iframe.htm" style="border:2px solid red;"
title="Iframe Example"></iframe>
Iframe - Doel voor een link
Een iframe kan worden gebruikt als doelframe voor een link.
Het targetattribuut van de link moet verwijzen naar het nameattribuut van het iframe:
Voorbeeld
<iframe src="demo_iframe.htm" name="iframe_a" title="Iframe
Example"></iframe>
<p><a href="https://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>
Hoofdstuk samenvatting
- De HTML
<iframe>-tag specificeert een inline frame - Het
srcattribuut definieert de URL van de pagina die moet worden ingesloten - Voeg altijd een
titleattribuut toe (voor schermlezers) - De
heightenwidthattributen specificeren de grootte van het iframe - Gebruik
border:none;om de rand rond het iframe te verwijderen
HTML-oefeningen
HTML iframe-tag
| Tag | Description |
|---|---|
| <iframe> | Defines an inline frame |
Bezoek onze HTML Tag Reference voor een volledige lijst van alle beschikbare HTML-tags .