Wprowadzenie do iframe w HTML
Ramki iframe w HTML to nic innego jak wbudowane ramki, które są używane jako dokument HTML w celu dodania do niego innego dokumentu HTML. Najczęściej stosuje się go na stronach internetowych lub w procesach tworzenia stron internetowych, aby zawierać inne treści z innego źródła, takie jak reklamy na tej stronie.
Większość projektantów stron internetowych korzysta z iframe do prezentacji interaktywnych aplikacji na stronie internetowej lub na stronach internetowych. Jest to możliwe przy użyciu javaScript lub atrybutu target w HTML.
Głównym celem Iframe jest wyświetlenie strony internetowej na innej stronie internetowej. Wewnętrzna ramka powinna być wyświetlana przy użyciu znacznika o nazwie
- Możliwe jest również nadanie naszej ramce iframe określonej wysokości i szerokości w formacie pikseli w następujący sposób:
- W powyższej składni wszystko będzie wyglądało tak samo, dodatkowo możemy określić wysokość i szerokość w formacie pikseli, definiując jako
Przykład:
- Jeszcze jedna metoda definiowania wysokości i szerokości iframe przy użyciu wartości za pomocą CSS jest pokazana w poniższej składni:
- Wszystkie rzeczy są takie same jak powyżej, po prostu zmieniając wartości.
Przykład:
- Do iframe dodano jeszcze jedną cechę: możemy usunąć już zdefiniowane ramki do ramki za pomocą właściwości border none. Składnia tego jest następująca:
- Za pomocą CSS można również robić wiele rzeczy z ramką, np. Zmieniać rozmiar ramki, nakładać kolor na ramkę itp.
Element iframe może być używany jako element docelowy łącza za pomocą składni:
- W powyższej składni src to nasz normalny adres URL, tutaj atrybut docelowy linku będzie odwoływał się do atrybutu name w naszym tagu iframe.
Przykład:
Atrybut Tag iframes
W ramkach iframe stosowane są różne tagi atrybutów, które są następujące:
- Src: Ten atrybut służy do wstawiania plików, które muszą być zawarte w ramce. Adres URL określa docelową stronę internetową, która ma zostać załadowana w ramce iframe.
- Nazwa: Nazwa to atrybut używany do nadania ramce nazwy identyfikacyjnej. Jest to najbardziej przydatne, gdy tworzysz jeden link, aby otworzyć inną stronę internetową.
- allowfullscreen: Ten atrybut pozwala wyświetlać ramkę w formacie pełnej szerokości. więc musimy ustawić wartość true, aby ta funkcja działała
- Frameborder: Jest to przydatny atrybut, który pozwala wyświetlać ramkę lub nie wyświetlać ramki. Wartość 1 pokazuje ramkę, a 0 nie pokazuje ramki do ramki.
- Margines szerokości: Pozwala zdefiniować przestrzeń między lewą i prawą stroną ramki
- Marginesheight: Pozwala zdefiniować przestrzeń między górą i dołem ramki.
- Przewijanie: te atrybuty służą do kontrolowania, czy pasek przewijania ma być wyświetlany ramce, czy nie. uwzględnione wartości to „tak” lub „nie” lub „auto”.
- Wysokość: służy do definiowania wysokości ramy. Pogoda w% lub w pikselach
- Szerokość: służy do definiowania szerokości ramki. Pogoda w% lub w pikselach
- Longdesc: Za pomocą tego atrybutu możesz połączyć inną stronę z długim opisem zawartości twojej ramki.
Przykłady elementów iframe w HTML
Oto kilka przykładów ramek iframe w HTML, które wyjaśniono poniżej:
Przykład 1
Rozważmy jeden przykład, w którym pokażemy, jak utworzyć ramkę iframe o określonej wysokości i szerokości.
Kod:
Demo iframe HTML
Tutaj pokazujemy przykład ramki iframe, która zawiera określoną wysokość i szerokość w formacie pikseli
Wynik:
Przykład nr 2
Rozważmy inny przykład, w którym pokażemy, jak utworzyć ramkę iframe o określonej wysokości i szerokości. Ale w tym przykładzie określamy wysokość i szerokość za pomocą CSS. Tutaj widzimy, że pasek przewijania jest dostosowywany zgodnie z rozmiarem zawartości.
Kod:
Demo iframe HTML
Tutaj pokazujemy przykład ramki iframe, która zawiera określoną wysokość i szerokość w formacie pikseli
Wynik:
Przykład nr 3
Rozważamy tutaj przykład, w którym dodamy ramkę do ramki iframe, dodając dodatkowe właściwości CSS do pokazania zmiany rozmiaru ramki, zmiany koloru ramki itp. Więc możemy dodać tyle, ile styl do naszego iframe.
Kod:
Demo iframe HTML
Tutaj pokazujemy przykład iframe, który zawiera ramkę z dodatkowymi właściwościami CSS
Wynik:
Przykład 4
Rozważmy inny przykład, w którym pokażemy, w jaki sposób atrybut docelowy otwiera link do strony internetowej za pomocą elementu iframe.
Kod:
Demo-docelowy element iframe dla łącza
EDUCBA
Kiedy cel łącza odpowiada nazwie iframe, link otworzy się w iframe.
Wynik:
Docelowy wynik:
Jak pokazano powyżej Przykład, jesteśmy w stanie kliknąć docelowy link EDUCBA, aby otworzyć następną stronę pokazaną poniżej.
Wniosek
Na podstawie wszystkich powyższych informacji stwierdzono, że iframe jest ramką wbudowaną, która zawiera w sobie inny dokument HTML. Uważany jest za najpotężniejszy element HTML do celów projektowania stron internetowych. Za jego pomocą możesz również dodawać treści z innego źródła. Wykorzystuje różne rodzaje atrybutów HTML, takie jak atrybuty globalne, atrybuty zdarzeń, niektóre powiązane strony itp.
Polecane artykuły
To jest przewodnik po ramkach iframe w HTML. Tutaj omawiamy składnię, atrybut tagu iframe w HTML wraz z różnymi przykładami i implementacją kodu. Możesz także przejrzeć następujące artykuły, aby dowiedzieć się więcej -
- Polecenia selenu
- Ramki HTML
- Link tekstowy HTML
- Twórz tabele w HTML