Ramki HTML
Element iframe HTML służy do wyświetlania strony internetowej na stronie internetowej.
Składnia elementu iframe HTML
Znacznik HTML <iframe>
określa ramkę wbudowaną.
Wbudowana ramka służy do osadzenia innego dokumentu w bieżącym dokumencie HTML.
Składnia
<iframe src="url" title="description"></iframe>
Porada: Dobrą praktyką jest zawsze dołączanie
title
atrybutu dla <iframe>
. Jest to używane przez czytniki ekranu do odczytywania zawartości elementu iframe.
Iframe — Ustaw wysokość i szerokość
Użyj atrybutów height
i width
, aby określić rozmiar elementu iframe.
Wysokość i szerokość są domyślnie podawane w pikselach:
Przykład
<iframe src="demo_iframe.htm" height="200" width="300"
title="Iframe Example"></iframe>
Lub możesz dodać style
atrybut i użyć CSS height
i width
właściwości:
Przykład
<iframe src="demo_iframe.htm" style="height:200px;width:300px;"
title="Iframe Example"></iframe>
Iframe — usuń obramowanie
Domyślnie element iframe jest otoczony ramką.
Aby usunąć obramowanie, dodaj style
atrybut i użyj właściwości CSS
border
:
Przykład
<iframe src="demo_iframe.htm" style="border:none;"
title="Iframe Example"></iframe>
Dzięki CSS możesz także zmienić rozmiar, styl i kolor obramowania elementu iframe:
Przykład
<iframe src="demo_iframe.htm" style="border:2px solid red;"
title="Iframe Example"></iframe>
Iframe — cel dla łącza
Ramkę iframe można wykorzystać jako ramkę docelową dla łącza.
target
Atrybut linku musi odnosić się do atrybutu name
elementu iframe:
Przykład
<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>
Podsumowanie rozdziału
- Znacznik HTML
<iframe>
określa ramkę w wierszu - Atrybut
src
określa adres URL strony do osadzenia - Zawsze dołączaj
title
atrybut (dla czytników ekranu) - Atrybuty
height
iwidth
określają rozmiar ramki iframe - Użyj
border:none;
, aby usunąć obramowanie wokół iframe
Ćwiczenia HTML
Znacznik HTML iframe
Tag | Description |
---|---|
<iframe> | Defines an inline frame |
Pełną listę wszystkich dostępnych tagów HTML można znaleźć w naszym podręczniku HTML Tag Reference .