Layer 1 Ramki w HTML5

Plansza interaktywna październik 2018

URL:
http://www.plotkarka.eu/Pi/html5/ramki.html
Autor:
Radosław Kowaluk

Ramki i ich zastosowanie

Pierwszy film na YouTube - 23 kwietnia 2005 rok

Ramka
Element Atrybuty i wartości specyficzne Opis
<iframe>
tekst alternatywny
</iframe>
src, srcdoc, name, sandbox, allowfullscreen,
allowpaymentrequest, width, height, referrerpolicy
ramka

Uwagi:

  1. Jeśli przeglądarka nie obsługuje ramek wyświetlony zostanie tekst alternatywny.
  2. W kodzie osadzanym za pomocą elementu iframe mogą znajdować się atrybuty przestarzałe: frameborder, scrolling, marginheight, marginwidth i/lub niestandardowe np. allow. Atrybuty te będą generować błędy podczas walidacji.

Zastosowanie ramek - osadzanie filmów

Atrybuty elementu

Artrybuty
Atrybut Wartości Opis
src URI żródło
srcdoc HTML kod HTML HTML5
name NMTOKEN nazwa
sandbox allow-forms | allow-same-origin |
allow-scripts | allow-top-navigation
rodzaj ograniczeń HTML5
allowfullscreen [allowfullscreen] tryb pełnoekranowy HTML5.1
allowpaymentrequest [allowpaymentrequest] ? HTML5.2
width Length (pixels | %) szerokość
height Length (pixels | %) wysokość
referrerpolicy [referrerpolicy] ? HTML5.2
frameborder 1 | 0 obramowanie ramki HTML5
scrolling yes | no | auto* paski przewijania ramki HTML5
marginheight Pixels wielkość marginesów pionowych HTML5
marginwidth Pixels wielkość marginesów poziomych HTML5

Uwagi:

  1. Atrybuty oznaczone HTML5 są w rekomendacjach XHTML (i HTML) ale powinny być zastępowane formatowaniem CSS.
  2. Atrybut niestandardowy "allow" o wartości "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" jest dodawany w kodzie filmów osadzanych z serwisu YouTube.

Zastosowanie ramek - osadzanie map

Wartości atrybutów

Wartości atrybutów
Wartość Opis
allow-forms Włącza obsługę formularzy w osadzonej stronieHTML5
allow-pointer-lock Włącza obsługę kursora w osadzonej stronieHTML5
allow-popups Włącza obsługę wyskakujących okienek w osadzonej stronie?HTML5
allow-same-origin Sprawia, że zawartość osadzonej strony jest traktowana jak pochodząca z tego samego źródła, co sama strona?HTML5
allow-scripts Włącza obsługę skryptów w osadzonej stronie, za wyjątkiem skryptów otwierających nowe strony?HTML5
allow-top-navigation Włącza obsługę kontroli rodzica z poziomu ramki?HTML5
HTML kod HTML
NMTOKEN dane znakowe
Length (pixels | %) liczba pikseli px (domyślnie) lub procent %
URI identyfikator zasobów
1 wartość logiczna
0 wartość logiczna
yes paski przewijania
no brak pasków przewijania
auto automatyczne paski
Pixels liczba px
allowfullscreen tryb pełnoekranowyHTML5.1

Uwagi:

  1. Niestandardowe wartości "accelerometer, autoplay, encrypted-media, gyroscope, picture-in-picture" są dodawane w kodzie filmów osadzanych z serwisu YouTube.

Zastosowanie ramek - osadzanie PDF

Uwagi

  1. W plikach PDF można stosować parametry adresu:
    page=n (n - numer strony),
    zoom=s,x,y (s - skala,
    x - przesunięcie poziome,
    y - przesunięcie pionowe)
    np. href="nazwa_pliku.pdf#page=2&zoom=90,10,100"
    Przeglądarki mobilne pobierają plik PDF.
  2. Jeśli zasoby wskazane w hiperłączu mają być wczytywane w ramce należy użyć atrybutu target z wartością nazwy ramki. Ramka musi posiadań nazwę zdefiniowaną w atrybucie name.
  3. Uznaje się za przestarzałe elementy: frameset, frame, noframes modułu Frames XHTML.

Generator ramek

źródło =
szerokość =
wysokość =
jednostka =
tekst alternatywny =

Nowy atrybut srcdoc