Na początku budowania witryny zasoby sieciowe wykorzystywały ramki do wyświetlania poszczególnych części stron. Ale wraz z pojawieniem się nowej wersji HTML 5 wszystko się zmieniło. Markup Elements <rama>, <zestaw ramek> i <noframes> są uważane za przestarzałe. Zastąpienie ich było pojedynczym tagiem - <iframe>. Jak dodać do html <iframe>? Poniższy przykład będzie zrozumiały nawet dla początkującego programisty.

Czym są ramki?

Ramka jest podstawą większości pierwszych stron internetowych. Jeśli tłumaczymy dosłownie, to słowo oznacza "ramkę", czyli ramka jest niewielką częścią strony w przeglądarce. Powszechne korzystanie z ramek w przeszłości można wyjaśnić niską jakością i wysokimi kosztami ruchu internetowego. Z reguły strona została podzielona na 3-5 części, z których każda spełniała pewien cel:

  • "Cap" (górna ramka na szerokości strony) - wyświetla nazwę zasobu;
  • lewe / prawe "szkło" - wyjście menu;
  • centralna ramka jest wyświetlaniem zawartości witryny.

Przykład iframe w formacie HTML

Podział strony na części pozwala na przeładowanie tylko określonej części podczas jej aktualizacji. Na przykład użytkownik kliknął element menu, a nowa zawartość została pobrana do ramki środkowej.

Nowoczesne ramki w HTML 5

Dlaczego warto używać HTML <iframe>? Przykładem jest wstawianie treści z zasobów stron trzecich. Klasyczna sytuacja ma miejsce, gdy programista chce pokazać pozycję obiektu na mapie. Jak być? Narysuj plan terenu od zera? Nie - jest prostsze rozwiązanie: osadzić element strony Mapy Google, Yandex Maps lub 2GIS. Problem rozwiązano w czterech akcjach.

  1. Musisz udać się na stronę jakiejkolwiek usługi kartograficznej.
  2. Znajdź żądany obiekt. Znając dokładny adres, możesz wpisać go w polu wyszukiwania.
  3. Użyj przycisku "Zapisz i odbierz kod" (dla "Yandex.Map") lub "Gotowe" (dla map Google), aby uzyskać kod do wstawienia.
  4. Pozostaje wprowadzić wygenerowane znaczniki na stronie.

Ponadto można wybrać rozmiar mapy i skonfigurować inne opcje wyświetlania.

Przykład iframe w formacie HTML

Jak inaczej mogę użyć HTML <iframe>? Przykładem jest wstawienie materiału wideo z zasobu Youtube. Technologia multimedialna przyciąga użytkowników Internetu, więc treści wideo są tak popularne. Dzięki instalacji wideo deweloper poradzi sobie szybko.

  1. Należy przesłać własny film na Youtube lub znaleźć plik trzeciej strony dla transmisji.
  2. Pobierz tag, wybierając przycisk "HTML"
  3. Ostatecznym działaniem jest wstawienie do kodu HTML <iframe>. Przykład zawartości tagu zostanie omówiony poniżej.

Oba przykłady są stosowane automatyczniegenerowanie kodu, ale profesjonalni programiści powinni mieć możliwość samodzielnego komponowania. Po pierwsze, pozwoli im zrozumieć układ strony i, jeśli to konieczne, zmodyfikuje ją. Po drugie, nie zawsze znaczniki elementów strony (mimo że należą do zasobów zewnętrznych) powstają bez udziału webmastera. Oto wysoka kwalifikacja programisty.

iframe html co to jest

Składnia

Zanim więc zaczniesz układ strony, musisz wziąć pod uwagę znacznik iframe (html): co to jest i jak go poprawnie używać.

Przede wszystkim należy zauważyć, że tag jest sparowany. Między elementami otwierania i zamykania określ zawartość, która będzie wyświetlana w przeglądarkach, które nie obsługują tego elementu układu. Główne atrybuty tagu:

  • szerokość (szerokość);
  • wysokość;
  • src (adres załadowanego zasobu);
  • wyrównanie (metoda wyrównania);
  • frameborder;
  • allowfullscreen.

W ten sposób uzyskano kod dla <iframe>. Przykład HTML jest w pełni przedstawiony poniżej:

<Iframe szerokość = "560" wysokość = "315" src = "https://someserver.com/" frameborder = "0" allowFullScreen> </ iframe>

W wynikowym oznaczeniu wystarczy zastąpić adres strony jakimkolwiek innym i, jeśli to konieczne, skorygować rozmiary ramki.

</ p>