Lekcje >> Podstawy HTML 5
Polimax

Drukarnia w Warszawie realizująca druk wizytówek, plakatów jak również fotoksiążki, fotoobrazy i fotokalendarze - z wysyłką na terenie całego kraju.

Ramki osadzone

<iframe>...</iframe> - nazywane także pływającymi, lokalnymi oraz wbudowanymi przy czym pierwsze określenie (pływająca) pochodzi jeszcze z początków istnienia tego elelmentu. Mówiąc najkrócej w ramce można pokazać inną stronę WWW. W niniejszym opracowaniu również takie ramki są stosowane (zastanów się gdzie). W najprostszej postaci ramka wygląda tak:

<body>
  <iframe src="adres trony lub ścieżka do pliku" width="szerokość_w_pikselach" 
    height="wysokość_w_pikselach">
    Twoja przeglądarka nie akceptuje pływających ramek!
  </iframe>
</body>

Przy czym atrybuty width oraz height można pominąć, jeżeli szerokość i wysokość zdefiniujemy w stylach CSS. Napis Twoja przeglądarka nie akceptuje pływających ramek! jest chyba zrozumiały, będziemy go pomijać dla większej czytelności kodu, poza tym obecnie chyba wszystkie przeglądarki obsługują ten znacznik.

Ćwiczenie 2_3_1_1

Wykonaj stronę, na której w ramce będzie pokazywana strona organizacji W3C z walidatorem. Kod HTML będzie miał postać:

<body>
  <iframe src="http://validator.w3.org/" width="800" height="500">
  </iframe>
</body>

W przeglądarce powinniśmy zobaczyć:

To co widzisz powyżej jest - jak myślisz, czym? Ramką oczywiście, pokazującą plik html wykonany poprawnie, zgodnie z treścią zadania. W tym przypadku, jest o tyle ciekawie, że pokazywana strona pokazuje również ramkę, a więc mamy jakby ramkę w ramce. To, że zewnętrzna ramka wygląda trochę inaczej jak ramka wykonana w ćwiczeniu, wynika z zastosowania stylów CSS. Jeżeli zajrzysz do źródła bieżącego dokumentu, to zobaczysz następujący fragment kodu:

<body>
  <iframe src="html5/cwicz_2_3_1_1/cwicz_2_3_1_1.html" style="height:550px;">
</body>

gdzie html5/cwicz_2_3_1_1/cwicz_2_3_1_1.html jest ścieżką do pliku cwicz_2_3_1_1.html, natomiast fragment style="height:550px;" definiuje styl CSS;

Ćwiczenie 2_3_1_2

Wykonaj stronę, na której w ramce będzie wyświetlana wskazana przez Ciebie strona WWW.

Ćwiczenie 2_3_1_3

Wykonaj stronę, na której w ramce będzie pokazwywany wskazany przez Ciebie plik *.html.

Atrybuty ramek osadzonych

Poza poznanymi już scr="", width="" oraz height="", ramki mogą posiadać między innymi następujace atrybuty:

  • seamless="seamless" - osadza ramkę jak część dokumentu, znikają krawędzie i paski przewijania,
  • sandbox="..." - nakłada zbiór ograniczeń na zawartość ramki:
    • sandbox="allow-forms" - zezwala na działanie formularzy na osadzonej stronie
    • sandbox="allow-scripts" - zezwala na wykonanie skryptów na osadzonej stronie, za wyjątkiem skryptu otwierającego nowe strony
    • sandbox="allow-top-navigation" - zezwala na kontrolę rodzica z poziomu ramki (możemy z poziomu ramki kontrolować stronę, na której ramka ta została osadzona),
    • sandbox="allow-same-origin" - umożliwia traktowanie treści wyświetlanej w osadzonej ramce jako elementu o tym samym pochodzeniu.
  • srcdoc="adres strony lub pliku" - źródło strony wstawianej do ramki, w przypaku potencjalnie szkodliwej treści. Stosuje się razem z src="" - najpierw atrybut src="", a następnie srcdoc="". Dzięki takiej konstrukcji będzie lepiej chroniony system operacyjny.

Praca domowa

Wykonaj ponownie Ćwiczenie 2_3_1_2 oraz Ćwiczenie 2_3_1_3 wykorzystując tym razem inny adres strony oraz inny plik. Możesz przy tym spóbować sprawdzić działanie różnych atrybutów znacznika iframe.


Jeżeli nie jesteś pewny, jak wykonane zadania zapisać na pendriwie, to zajrzyj do pierwszego ćwiczenia, w którym zostało to dokładnie wytłumaczone.