Ramki#

Ramki lokalne#

Ramka pływająca (inaczej lokalna, liniowa, wbudowana) umożliwia wstawienie ramki bezpośrednio w treść normalnej strony WWW. Przypomina to nieco wstawianie do dokumentu xHTML obrazu lub też obiektu multimedialnego – z tą tylko różnicą, że wstawianym zasobem jest zazwyczaj inna strona WWW. Odpada konieczność stosowania specjalnej składni tworzącej startowe dokumenty, tak jak w przypadku klasycznych ramek.

Technika ta jest uznana w HTML 4.01 i XHTML 1.0 za schyłkową (pozostaje w obrębie wersji DTD Transitional), zaś w XHTML 1.1 została zaniechana (podobnie jak klasyczne ramki).

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe src="ścieżka dostępu do pliku">Treść alternatywna</iframe>

Ścieżkę dostępu tworzymy na tych samych zasadach jak w przypadku odsyłaczy. Oczywiście adresy mogą prowadzić zarówno do naszych plików jaki i do źródeł spoza domeny.

Ramki lokalne są umieszczane bezpośrednio na stronie w postaci pojedynczych okienek o różnych rozmiarach. Dzięki temu możemy do takiej ramki wczytywać inne dokumenty (lub inne zasoby). Między znacznikami <iframe>...</iframe> należy wstawić treść, która zostanie wyświetlona w przeglądarkach nie obsługujących ramek lokalnych. Możemy jednak podać w tym miejscu adres dokumentu, który jest wczytywany do pływającej ramki. Kliknięcie na tym adresie pozwoli użytkownikowi takiej przeglądarki obejrzeć zawartość na odrębnej stronie.

Nazwa "pływająca" pochodzi jeszcze z początków egzystencji tego elementu - "floating frame". Potem używano nazwy "inline frame" i stosownie do tego zostało nawet zmienione definiujące ją polecenie - iframe. Dlatego ten rodzaj ramki określa się różnymi nazwami, co w praktyce poprawnie odzwierciedla istotę tego elementu.

Specyficzne atrybuty#

Dla elementu iframe możliwe jest określenie kilku specyficznych atrybutów.

1. Rozmiar ramki lokalnej#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe width="x" height="y">...</iframe>

lub

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe width="x%" height="y%">...</iframe>

gdzie jako "x" oraz "y" należy wpisać odpowiednio: długość i wysokość ramki w pikselach. Natomiast jako "x%" oraz "y%" należy wpisać odpowiednio: długość i wysokość ramki w procentach ekranu (bądź elementu nadrzędnego posiadającego ustalone wymiary).

Polecenie pozwala zdefiniować ramkę o dokładnie ustalonych wymiarach. Przykład zastosowania polecenia przedstawiony zostały na specjalnej stronie testowej.

2. Nazwa ramki lokalnej#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe name="nazwa ramki">...</iframe>

Polecenie pozwala nadać nazwę ramki będącą identyfikatorem, który może potem służyć do kierowania odnośników do utworzonej ramki osadzonej (zobacz).

Nazwa ramki lokalnej musi spełniać takie same wymagania jak nazwa dla zwykłej ramki.

3. Widoczność obramowania#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe frameborder="rodzaj">...</iframe>

gdzie jako "rodzaj" należy wpisać:

Polecenie pozwala określić widoczność obramowania dla ramki pływającej. Przykład zastosowania polecenia przedstawiony zostały na specjalnej stronie testowej.

4. Przewijanie zawartości#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe scrolling="rodzaj">...</iframe>

gdzie jako "rodzaj" należy wpisać:

Polecenie pozwala sterować zachowaniem ramki dla przywoływanych plików o dużych objętościach. Przykład zastosowania polecenia przedstawiony zostały na specjalnej stronie testowej.

Dla przeglądarek Internet Explorer oraz Chrome polecenie scrolling="yes" działa tak samo jak scrolling="auto", czyli paski przewijania pojawią się dopiero w razie konieczności.

5. Dodatkowe marginesy#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe marginwidth="x" marginheight="y">...</iframe>

gdzie "x" oznacza szerokość marginesu poziomego, a "y" oznacza wysokość marginesu pionowego (w pikselach).

Polecenie pozwala wprowadzić dodatkowy odstęp (pionowy lub poziomy) między obramowaniem a zawartością ramki pływającej. Przykład zastosowania polecenia przedstawiony zostały na specjalnej stronie testowej.

6. Odstęp wokół ramki lokalnej (Internet Explorer, Opera)#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe hspace="x" vspace="y">...</iframe>

gdzie "x" oznacza poziomą odległość w pikselach, a "y" pionową odległość w pikselach.

Do wprowadzenia odstępów między ramką pływającą a sąsiadującymi elementami służą atrybuty hspace (horizontal space - odstęp z prawej i lewej strony) i vspace (vertical space - odstęp u góry i dołu). Przykład zastosowania polecenia przedstawiony zostały na specjalnej stronie testowej.

Atrybuty HSPACE oraz VSPACE dla elementu iframe nie wchodzą w skład specyfikacji HTML 4.01 - zaleca się stosowanie stylów.

7. Ustawienie ramki lokalnej względem tekstu#

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<iframe align="rodzaj">...</iframe>

gdzie jako "rodzaj" należy wpisać:

Obecnie atrybut ALIGN jest zdeprecjonowany przez specyfikację HTML 4.01 - zaleca się stosowanie stylów.

Atrybut align w przypadku ramki pływającej nie służy do określenia położenia ramki, lecz znajdującego się wokół niej tekstu. Wyjątek stanowią wartości left i right, które powodują zmianę początkowego położenia ramki. Wartość left spowoduje, że ramka znajdzie się przy lewym marginesie, natomiast wartość right spowoduje, że ramka znajdzie się przy prawym marginesie.

Przykłady stosowania polecenia są identyczne z tymi, które zaprezentowałem już dla grafiki. Nie ma sensu powielać treści, proponuję przeanalizować materiał dla obrazów.

Wczytywanie zasobu do ramki lokalnej#

Domyślna treść, która wgrywana zostaje do ramki pływającej, określona zostaje w atrybucie src="..." elementu iframe. Oczywiście możliwa jest późniejsza zmiana zawartości. Korzystamy z następującej struktury:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<a target="nazwa ramki lokalnej" href="ścieżka dostępu do pliku">Opis odsyłacza</a>

Nazwę dla ramki deklarujemy opisanym nieco wcześniej atrybutem name="". Dla atrybutu href podajemy adres zasobu, który będzie wczytywany po kliknięciu odsyłacza. Najczęściej będzie on wskazywał na stronę internetową. Całość bliźniaczo przypomina mechanizm wgrywania treści do klasycznej ramki.

Przykład tworzący prostą galerię oparty na ramce pływającej przedstawiony zostały na specjalnej stronie testowej.

Oczywiście istnieje możliwość jednoczesnego wczytywania zasobu do kilku ramek pływających. Robimy to w analogiczny sposób jak dla ramek tradycyjnych (za pomocą JavaScriptu). Oto przykład kolejnej galerii, gdzie wczytywanie plików do ramek lokalnych odbywa się w sposób równoległy.

Alternatywa (object)#

Wokół pływających ramek toczyła się od początku zacięta dyskusja - kwestionowano zasadność ich wprowadzania, skoro teoretycznie można je zastąpić poleceniem object - tym samym, które pozwala wstawiać do dokumentu rozmaite multimedia. Jeśli chcielibyśmy używać (X)HTML-a w wersji Strict i mieć możliwość korzystania z funkcjonalności ramki osadzonej powinniśmy wypróbować element object. Oczywiście nie wszystkie atrybuty ramki pływającej uda się zastąpić (w razie potrzeby należy skorzystać z JavaScript).

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<object data="ścieżka dostępu do pliku" type="rodzaj" width="x" height="y">Treść alternatywna</object>

gdzie jako "rodzaj" należy podać odpowiedni typ MIME wczytywanego zasobu, przykładowo dla plików HTML właściwą wartością będzie text/html.

Domyślne wymiary obiektu są zależne od rozmiaru zasobu, który do niego wgrywamy. Najlepiej jednak osobiście określić wielkość okna. W razie konieczności (za małe okno w stosunku do wgrywanego zasobu) dla plików xHTML pojawią się paski przewijania, w przypadku grafiki plik zostanie przeskalowany do rozmiaru okna.

Niektóre przeglądarki potrafią samodzielnie określić typ MIME dla niektórych plików, nie trzeba podawać atrybutu type. Niemniej jednak, w celu uzyskania spójnego zachowania w każdym browserze, warto to zrobić osobiście.

Prosty przykład wczytywania pliku graficznego (GIF):

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<object data="../../pliki/html/ramki/owczarek.gif" type="image/gif">Brak obsługi elementu OBJECT!</object>

Efekt:

Brak obsługi elementu OBJECT!

Przykład z określeniem sztywnych wymiarów obiektu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<object data="../../pliki/html/ramki/owczarek.gif" type="image/gif" width="100" height="100">Brak obsługi elementu OBJECT!</object>

Efekt:

Brak obsługi elementu OBJECT!

Jak widać, zdjęcie (300x225 pikseli) zostało przeskalowane tak, by bez problemu zmieściło się w obiekcie. Oczywiście taka zmiana rozmiaru grafiki jest niezalecana, lepiej samemu przygotować zdjęcie o odpowiednich wymiarach (szczegóły).

Przykład z wczytaniem pliku XHTML do obiektu:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<object data="html_index.html" type="text/html">Brak obsługi elementu OBJECT!</object>

Efekt:

Brak obsługi elementu OBJECT!

Wczytywanie zasobu do obiektu#

Element object nie zalicza się do struktury ramek, dlatego w jego przypadku wczytywanie nowej treści odbywa się odmiennie. Tutaj dla załadowania pojedynczego zasobu (lub kilku) musimy korzystać wyłącznie z JavaScriptu. Oto przykładowy kod:

  1. —
  2. L
  3. K
  4. T'
  5. T
  6. A
  7. O
  8. Z'
  9. Z
  10. #
<a href="" onclick="document.getElementById('idObiektu1').data = 'zasób1'; document.getElementById('idObiektu2').data = 'zasób2'; return false">
	...
</a>

gdzie "idObiektu1" i "idObiektu2" to wartości dla atrybutów id="..." nadane elementom object. Można tak manewrować składnią powyższego przykładu, żeby kliknięcie odsyłacza spowodowało wczytanie zasobu do jednego, lub dowolnej liczby obiektów.

Prosty przykład galerii z pojedynczym wczytywaniem oraz kolejny przykład galerii z wczytywaniem równoległym. Można porównać działanie z wcześniej prezentowanymi wersjami dla ramek lokalnych.

Pasek społecznościowy

SPIS TREŚCI AKTUALNEJ STRONY

Ramki (H1) Ramki lokalne (H2) Specyficzne atrybuty (H3) 1. Rozmiar ramki lokalnej (H4) 2. Nazwa ramki lokalnej (H4) 3. Widoczność obramowania (H4) 4. Przewijanie zawartości (H4) 5. Dodatkowe marginesy (H4) 6. Odstęp wokół ramki lokalnej (Internet Explorer, Opera) (H4) 7. Ustawienie ramki lokalnej względem tekstu (H4) Wczytywanie zasobu do ramki lokalnej (H3) Alternatywa (object) (H3) Wczytywanie zasobu do obiektu (H4)