Pływające ramki (ang. floating frames, inline frames) są techniką HTML, która została zaimplementowana w oficjalnym standardzie języka w wersji 4.0, a następnie uznana w standardzie XHTML 1.0. W standardzie XHTML 1.1, podobnie jak klasyczne ramki, została zaniechana, by powrócić (po uszczupelniu listy dostępnych atrybutów) do łask w HTML 5. Używana jest w celu wklejenia wewnątrz strony www treści zawartej w osobnym pliku html. To wklejene ma charakter wyspy otoczonej zawartością udostępnioną w innym pliku html.
Ogólna postać tagu wprowadzająca pływające ramki ma postać:
<iframe width="" height="" src="">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>
np:
<iframe width="400" height="200" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>
Zdanie "Twoja przeglądarka nie wyświetla pływających ramek!" zostanie wyświetlone w przeglądarkach nie akceptujących pływających ramek.
Atrybut frameborder
, który występował w specyfikacji HTML 4 nie jest już wspierany w HTML 5. Gdybyśmy w standardzie HTML 4.0 chcieli pozbyć się granic ramki, moglibyśmy napisać:
<iframe width="400" height="200" frameborder="0" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>
Jeśli dodamy do tagu znany nam już atrybut scrolling="no"
, ramka zostanie pozbawiona suwaka. Atrybut ten również został wycofany z HTML 5.
<iframe width="400" height="200" frameborder="1" scrolling="no" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>
Zawartości strony nie można przewinąć.
HTML 4 przewidywał użycie atrybutów marginwidth="x"
i marginheight="y"
. Pozwalały one wprowadzić dodatkowe marginesy w pływającej ramce. Atrybuty te zostały wycofane z polecenia w HTML 5 - w ich miejsce współcześnie wykorzystuje się style CSS.
Pływającą ramkę można też ustawić po prawej stronie dokumentu czy bloku, używając atrybutu align="right"
. Atrybut ten nie jest już jednak wspierany w HTML 5 i zaleca się pozycjonowanie za pomocą stylów.
<iframe width="400" height="200" frameborder="0" scrolling="no" align="right" src="home.html">
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>
W wersji HTML 5 pojawił się nowy atrybut seamless
za pomocą którego wtapiamy ramkę w stronę www.
<iframe width="400" height="200" src="home.html" seamless>
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>
Oczywiście, tak jak w przypadku zwykłych ramek, za pomocą ramek pływającch też możemy tworzyć przeględarki odnośników. Wystarczy dodać do tagu iframe
atrybut name
i dowolnie nazwać ramkę, a w odnośnikach w atrybucie target
wystarczy odpowiednio zaadresować linki.
Ramka:
<iframe width="400" height="200" name="moja_ramka" src="home.html" seamless>
Twoja przeglądarka nie wyświetla pływających ramek!
</iframe>
Miejsce nad/pod ramką:
<a href="./kurs_html/frames/examples/home.html" target="moja_ramka">Home</a>
<a href="./kurs_html/frames/examples/tutaj.html" target="moja_ramka">Tutaj</a>
<a href="./kurs_html/frames/examples/tam.html" target="moja_ramka">Tam</a>