Strona internetowa oparta jest na ramie zwanej kodem HTML. To zbiór znaczników, tagów i komend, które determinują, w jaki sposób wyświetla się strona i jaka jest jej funkcjonalność. Jednym z elementów witryny jest tag iframe. Jaka jest jego rola w przygotowaniu strony internetowej? Sprawdźmy to.
Zdj 1. Iframe znajduje swoje zastosowanie na stronach internetowych
Źródło: https://upload.wikimedia.org/wikipedia/commons/3/3e/Osm-iframe-html-test001.png
Jaką rolę ogólnie pełnią tagi HTML? Wskazują, w jaki sposób ma wyświetlać się określony element, a także instruują, za co ten ma odpowiadać. Oznaczane są za pomocą nawiasów „<” oraz „>”. Jednym z częściej stosowanych tagów jest iframe. To tag tworzący tzw. ramki. Co warto o nich wiedzieć?
HTML iframe – co to jest?
HTML iframe to element budowy strony internetowej, nazywany popularnie „ramkami”. Oznacza się go w następujący sposób:
- <iframe> – oznacza początek ramki, umieszczany jest w strukturze body witryny internetowej.
- </iframe> – to zakończenie komendy opartej na ramkach.
Treści, które umieszczane są na pomiędzy tymi kodami traktowane są przez przeglądarkę internetową jako treść do wyświetlania w ramce. Co istotne, użytkownik może określić jaką wielkość ma mieć ramka, a także gdzie ma się wyświetlać. W kodzie iframe umieszczone są również komendy dotyczące tego, co powinno otwierać się w ramce. Mogą być to elementy zewnętrzne, ale też wewnętrzne.
Elementy, które umieszczamy w ramkach iframe można modyfikować, a same parametry ramki zmieniać zgodnie z upodobaniami czy charakterem strony internetowej. Dostępna jest między innymi modyfikacja grubości ramki, długości, wysokości, wielkości itd. Do określenia parametrów ramki używane są znaczniki takie jak „width”, „height”, „frameborder”, czy „allowfullscreen”.
Jak działa tag <iframe>? Na co działa?
Iframe umożliwia wstawienie zewnętrznej i wewnętrznej treści do wyświetlania, jako tzw. strona w stronie internetowej. Dlaczego to istotne? Użytkownik nie musi już otwierać innego adresu URL, aby np. przejrzeć określony dokument czy materiał multimedialny. To zwiększa wygodę użytkowania strony internetowej, poprawia jej efektywność pod względem ładowania i umożliwia lepszą efektywność wyświetlania strony na różnych urządzeniach.
Do czego wykorzystywany jest znacznik iframe? Umożliwia on np. osadzenie elementów z zewnętrznych serwisów czy dokumentów, które wyświetlają się na stronie internetowej. To m.in. reklamy, treści multimedialne, pliki graficzne, pliki tekstowe, odtwarzacze dźwięków itd.
Zdj 2. Przykład zastosowania iframe
Źródło: https://www.seobility.net/en/wiki/images/a/ab/Frames-and-Framesets.png
Czy iframe jest korzystny dla SEO? Przykłady zastosować
Prawidłowo zaplanowane wykorzystanie znacznika iframe ma pozytywny wpływ na optymalizację strony internetowej i jej pozycję w Google. Wyszukiwarka ceni bowiem ten znacznik. Wykorzystywanie go umożliwia bowiem uporządkowanie struktury strony internetowej, zachowanie odpowiedniego oznaczenia elementów zewnętrznych, a także ułatwia przeglądanie witryny.
Jakie mogą być przykłady zastosować HTML iframe? Ich wykorzystanie jest powszechne w sieci i umożliwia prostsze dopasowanie do potrzeb użytkowników.
- Wyświetlanie filmów przez widget Youtube, o określonych parametrach (np. prędkości odtwarzania czy momentu startu emisji filmu) i wielkości ramki.
- Osadzanie map interaktywnych (w tym np. Google Maps), umożliwiając wskazanie klientowi, gdzie zlokalizowana jest siedziba firmy.
- Wykorzystanie walorów użytkowych zewnętrznej aplikacji np. kalendarzy, modułów zegarów, formularzy czy innych programów, zwiększających możliwości witryny sieciowej.
- Otwieranie dokumentów PDF, co umożliwia użytkownikowi przeglądanie ich zawartości bez konieczności pobierania plików na dysk.
- Umieszczanie strony internetowej w formie modułów, umożliwiających szybsze ładowanie (np. sekcja blogowa czy wiadomości jako osobna część witryny).
Iframe można umieszczać w strukturach strony internetowej zbudowanej od zera (nieopartej na zewnętrznych szablonach internetowych), jak i wdrażać np. do WordPress. Moduły ramkowe znajdują się praktycznie na wszystkich współczesnych serwisach w sieci.
