Jak wyśrodkować ramkę iFrame

Opublikowany: 2022-04-20

Jeśli kiedykolwiek dodałeś ramkę iFrame do strony internetowej, wiesz, jak frustrujące może być stwierdzenie, że zawartość nie wyświetla się tak, jak chcesz. Osoby zaznajomione z HTML prawdopodobnie rozumieją tę walkę, a także chęć włączenia ramek iFrames w pierwszej kolejności.

Jeśli nie znasz ramek iFrames, są one elementem HTML wyświetlającym zawartość jednej strony internetowej na drugiej . Prawdopodobnie widziałeś już ramkę iFrame podczas odwiedzania witryny, nawet jeśli o tym nie wiedziałeś. Wiele ramek iFrame to reklamy wyświetlające informacje z witryny reklamodawcy. Inne zawierają filmy, posty, a nawet mapy. Niezależnie od tego, czy edytujesz HTML przez cały czas, czy dopiero zaczynasz przygodę z kodowaniem, ten artykuł nauczy Cię wszystkiego, co musisz wiedzieć, aby wyśrodkować ramkę iFrame.

Najpierw szczegółowo wyjaśnimy, czym jest ramka iFrame i dlaczego chcesz ją wyśrodkować. Następnie omówimy podstawowe informacje o HTML i sposobach korzystania z ramek iFrames. Na koniec przeprowadzimy Cię przez etapy wyśrodkowania ramki iFrame na Twojej stronie internetowej za pomocą atrybutu align.

iframe html

Spis treści

Co to jest ramka iFrame?

Ramka iFrame to skrócona nazwa ramki wbudowanej. Ramki wbudowane to elementy HTML, które mogą wyświetlać inne elementy HTML, a także kod z innych witryn, takich jak Facebook czy YouTube. Mówiąc prościej, ramka iFrame to okno na stronie internetowej, które umożliwia przeglądanie treści z innej strony internetowej. Ramki iFrame mogą być świetnym sposobem na szybkie i łatwe włączenie czegoś do strony internetowej. Chociaż wymagają one pewnej wiedzy na temat HTML, mogą być bardzo prostym sposobem na ulepszenie Twojej strony internetowej. Szczególnie firmy mogą skorzystać na korzystaniu z ramek iFrames na swojej stronie internetowej. Ramki iFrame zamiast linków lub statycznych obrazów mogą sprawić, że witryna Twojej firmy będzie wyglądać bardziej profesjonalnie. Mogą nawet być źródłem przychodów, jeśli są wykorzystywane do wyświetlania reklam innych firm.

Ramki iFrame mogą być używane do umieszczania reklam , filmów z YouTube, postów w mediach społecznościowych, a nawet map online na stronach internetowych. Korzystanie z ramki iFrame obejmuje tę zawartość bezpośrednio na stronie internetowej, co oznacza, że nie trzeba stale aktualizować informacji. Zamiast tego zaktualizuje się automatycznie wraz z materiałem źródłowym. Na przykład użycie ramki iFrame do umieszczenia posta w mediach społecznościowych zapewnia czytelnikom bezpośredni dostęp do posta. Jeśli post zostanie usunięty, edytowany lub uzyska nowe interakcje, ramka iFrame to odzwierciedli. Zrzuty ekranu mogą być w stanie pokazać pewne informacje, ale nie będą one tak dynamiczne jak iFrame. Zrzut ekranu również nie będzie zawierał linku do samej treści. Często kliknięcie elementu iFrame prowadzi bezpośrednio do jego źródła. Jedną z nielicznych wad elementów iFrame jest jednak fakt, że elementy iFrame mogą utracić dostęp do treści, jeśli zostaną usunięte.

Dlaczego miałbym używać ramki iFrame na mojej stronie internetowej?

Ramki iFrame poprawiają ogólny wygląd Twojej strony internetowej, dając użytkownikom bezpośredni dostęp do zawartości. Na przykład filmy z YouTube osadzone przy użyciu iFrames są odtwarzane bezpośrednio na stronie internetowej. Nie ma potrzeby czekać, aż strona podąży za linkiem lub szukać wideo. W ten sposób czytelnicy mogą oglądać wideo bez konieczności opuszczania Twojej strony. Może to również skrócić czas ładowania, umieszczając wideo jako stronę na swojej stronie. Czas potrzebny do załadowania strony może poważnie wpłynąć na natężenie ruchu w witrynie .

Osadzanie rzeczy takich jak Mapy Google może łatwo udostępniać wskazówki dojazdu bez konieczności ich wyszukiwania. Ponieważ ramki iFrame uzyskują bezpośredni dostęp do innych stron internetowych, wskazówki będą zawsze aktualne. Może to być przydatny dodatek do dowolnej strony internetowej, która koncentruje się na określonej lokalizacji, na przykład do artykułu o atrakcji turystycznej. Podobnie firmy mogą chcieć umieścić pinezkę swojego adresu w Mapach Google w swojej witrynie. Korzystanie z ramki iFrame w Mapach Google daje odwiedzającym możliwość szybkiego wyświetlenia wskazówek, klikając ramkę iFrame.

wyśrodkuj iframe

Wyśrodkuj ramkę iFrame

Ramki iFrame mają na celu poprawę funkcji i wyglądu strony internetowej, dlatego bardzo ważne jest ich prawidłowe włączenie. Twój film na YouTube lub post w mediach społecznościowych może wyglądać dziwnie, jeśli nie jest wyśrodkowany na stronie internetowej. Firmy szczególnie muszą wziąć pod uwagę wygląd swojej strony internetowej. Ponieważ treść może znacząco poprawić Twoją witrynę , chcesz mieć pewność, że wyświetla się ona prawidłowo. W przeciwnym razie Twoja witryna może nie wyglądać zbyt profesjonalnie lub dobrze wykonana. Na szczęście centrowanie ramki iFrame jest proste. Wszystko czego potrzebujesz to znajomość HTML na poziomie powierzchni.

HTML iFrame

HTML lub Hypertext Markup Language , to informacje, które instruują przeglądarkę internetową, jak wyświetlić określoną stronę witryny. Składa się z długiego ciągu kodu, który można edytować i zmieniać, dodając lub usuwając sekcje kodu. Zmiany te wpływają na sposób wyświetlania strony internetowej i jej funkcji.

HTML składa się z tagów, elementów i atrybutów. Tagi to początek i koniec kodu wokół elementu. Mówią przeglądarce internetowej, gdzie zaczyna się i kończy element. Pozwala to na prawidłowe i całkowite wyrażenie elementu bez utraty go między innymi w kodzie. Elementy to struktury, które zostaną wyrażone na stronie internetowej. Na przykład iFrame są elementem HTML. Po umieszczeniu między dwoma tagami element iFrame w kodzie HTML wyświetli ramkę iFrame w Twojej witrynie. Wreszcie, atrybuty wpływają na sposób wyświetlania elementu. Mogą one wpływać na rozmiar, położenie, a nawet zawierać dodany tekst na obrazach.

Edycja kodu HTML strony internetowej zmienia jej wygląd i funkcję. Edycja HTML może obejmować edytor HTML, taki jak Notatnik lub KompoZer. W tych programach do edycji możesz wprowadzać zmiany w kodzie HTML, bezpośrednio edytując jego kod. To świetny sposób na zbudowanie lub rozwinięcie witryny, jeśli jesteś szczególnie obeznany z technologią. Samodzielna edycja kodu HTML daje możliwość dołączania obrazów , zmiany tekstu i włączania ramek iFrame.

jak wyśrodkować iframe

Korzystanie z iFrame na swojej stronie internetowej

Pierwszym krokiem do włączenia ramki iFrame do witryny jest znalezienie treści, którą chcesz wyświetlić. Jeśli chcesz dołączyć film z YouTube, kliknij przycisk „Udostępnij”. Powinno to zapewnić kilka opcji udostępniania wideo. Kliknij opcję „wstaw” . Kliknięcie tego przycisku spowoduje wyświetlenie dokładnego tekstu HTML iFrame, który chcesz dołączyć. Teraz wszystko, co musisz zrobić, to skopiować i wkleić te informacje do kodu HTML. Podobnie posty w mediach społecznościowych będą miały również opcję osadzenia posta.

W przypadku innych rodzajów treści może być łatwiej użyć łącza do witryny w kodzie HTML. Aby włączyć ten typ ramki iFrame do swojej witryny, zacznij od otwarcia preferowanego edytora HTML. W edytorze znajdź kod, w którym chcesz dodać ramkę iFrame. Zacznij od wpisania „<iframe src=”. „Src” oznacza tutaj źródło, więc to, co następuje, ma być źródłem treści wyświetlanej w ramce iFrame. W tym miejscu będziesz chciał skopiować i wkleić link do treści, którą chcesz pokazać. Łącze powinno być w cudzysłowie, które kończą się w miejscu, w którym znajduje się łącze.

Po umieszczeniu źródła w cudzysłowie podaj żądaną wysokość i szerokość elementu iFrame. Wysokość i szerokość ramki iFrame jest zwykle mierzona w pikselach, ale można ją również mierzyć w procentach. Na koniec zamknij ten tag iFrame, wpisując „iFrame>”. Jeśli zrobiłeś to poprawnie, powinieneś mieć udaną ramkę iFrame wyświetlaną na swojej stronie! Teraz, po utworzeniu ramki iFrame, upewnij się, że jest wyśrodkowana na Twojej stronie.

Centrum wyrównania iFrame

Wyśrodkowanie ramki iFrame jest bardzo ważną częścią wyglądu Twojej strony internetowej. Wysiłek związany z tworzeniem ramki iFrame może być niezwykle frustrujący, tylko po to, aby była nieco wyłączona. Na szczęście wyśrodkowanie ramki iFrame jest jeszcze łatwiejsze niż tworzenie jej od podstaw! Podobnie jak tworzenie iFrame, wymaga to edycji kodu HTML.

Otwórz edytor HTML i znajdź ramkę iFrame, którą chcesz wyśrodkować. W kodzie tego elementu iFrame wpisz „align=center”. To powie twojej stronie, aby wyśrodkować ramkę iFrame. Możesz również wyśrodkować obraz, edytując jego wysokość i szerokość na stronie. Ponownie można je mierzyć w pikselach lub w procentach.

Możesz nawet wyrównać ramkę iFrame w inny sposób, jeśli nie chcesz, aby była wyśrodkowana. Zamiast środka wpisz „left”, „right”, „bottom” lub „top” po „align=”. Twoja ramka iFrame zostanie odpowiednio umieszczona na podstawie tego tekstu. Narzędzie używane do tego nazywa się „atrybutem wyrównania”. Atrybut align sprawia, że zmiana pozycji ramki iFrame jest bardzo prosta. Chociaż wyśrodkowanie ramek iFrame jest świetne w przypadku ważnych treści, niektóre ramki iFrame, takie jak te używane do wyświetlania reklam, mogą być lepiej dopasowane z boku strony internetowej.

Centrum wyrównania iframe

Centrowanie ramek iFrame

Ramki iFrame to świetny sposób na połączenie treści z witryną, ale uzyskanie odpowiedniego wyglądu może być trudne. Po prostu otwórz kod iFrames i dodaj „align=center” do elementu. Teraz możesz mieć większą kontrolę nad tym, jak Twoja strona internetowa wyświetla swoją zawartość. Zawartość wyświetlana w ramkach iFrames może znacznie poprawić ogólny wygląd i funkcjonalność Twojej strony internetowej. Ponieważ ramki iFrame służą jako okna do informacji z innej witryny, Twoja strona internetowa może umieścić w jednym miejscu wszelkiego rodzaju ważne informacje. Reklamy, filmy i mapy można łatwo dodać do swojej strony internetowej za pomocą kodu HTML.