Kod ramki. Iframe i Frame - czym są i jak najlepiej wykorzystać ramki w HTML

Element

Ramki

Co to robi?

Główna różnica między

W powyższym znaczniku wystarczy zastąpić adres strony dowolnym innym iw razie potrzeby dostosować rozmiar ramki.

Ramki to elementy HTML, które pozwalają podzielić okno przeglądarki internetowej na kilka niezależnych okien, z których każde może załadować osobny dokument HTML. Każde takie okno (ramka) może posiadać własne paski przewijania i działać niezależnie od innych niezależnych okien lub odwrotnie, sterować ich zawartością. Można je wykorzystać do uporządkowania menu, które stale znajduje się w jednym oknie, a same informacje znajdują się w innym oknie. Użytkownicy mogą uzyskać dostęp do menu w dowolnym momencie, bez konieczności powrotu do niego poprzednia strona aby wybrać inny element menu. Korzystanie z ramek umożliwia „przypinanie” obrazów lub innych statycznych elementów interfejsu do okna przeglądarki, podczas gdy reszta strony przewija się w ramce.
Warto jednak zauważyć, że obecnie ramki uważane są za przestarzałe narzędzie, a witryny z ramkami za niegodne, ponieważ profesjonalni webmasterzy nigdy nie używają ramek w swoich projektach. Ramy mają wiele notorycznych problemów. Dezorientują wyszukiwarki, na przykład dlatego, że strony zawierające treść nie zawierają linków do innych dokumentów. Jeśli chcesz przyjmować gości z wyszukiwarki, zapomnij o ramkach. Użytkownik nie ma możliwości umieszczenia ulubionej strony w sekcji zakładek przeglądarki, gdyż ramki ukrywają adres strony, na której się znajduje i zawsze pokazują jedynie adres strony internetowej. Z tego powodu stwarzają problemy przeglądarkom podczas śledzenia historii, a także nie dają się zbyt dobrze dostosować do różnych rozmiarów ekranów i urządzeń mobilnych.
Pomimo tego, że projekty z ramkami znajdują się w sieć światowa coraz rzadsze, nauka HTML byłaby niekompletna bez omówienia tematu ramek. Ramki, obok swoich wad, mają też pewne zalety, które nie pozwalają odrzucić tej technologii jako mało obiecującej.

Tworzenie ramek

Struktura dokumentu HTML z ramkami jest bardzo podobna w wyglądzie do formatu zwykłego dokumentu HTML. Podobnie jak w zwykłym dokumencie HTML, cały kod jest umieszczany pomiędzy sparowanymi tagami I i w pojemniku znajdują się nagłówki. Główną różnicą między dokumentem z ramkami a zwykłym dokumentem HTML jest to, że dokument ma ramki zamiast znacznika zastosowany zostanie sparowany tag (z angielskiego zestawu ramek - zestaw ramek).
Poniższy przykład pokazuje strukturę dokumentu HTML z ramkami:

Przykład: Struktura dokumentu HTML z ramkami

• Wypróbuj sam »

W powyższym przykładzie strona zawiera trzy obszary, z których każdy jest początkowo załadowany dokumentami HTML góra_ramki.html, lewa_ramka.html i prawa_ramka.html. Oprócz dokumentów HTML ramka może zawierać także grafikę. Aby to zrobić, musisz podać adres odpowiedniego obrazu w atrybucie źródło, Na przykład src="obraz.gif". Należy pamiętać, że element używany bez znacznika zamykającego.
Wewnątrz pojemnika może zawierać tylko tagi lub inny zestaw ramek objętych tagami I .
Etykietka ma następujące atrybuty:

• wydziwianie— opisuje sposób podziału strony na linie:
• kol— opisuje sposób podziału strony na kolumny:

W znaczeniu atrybutów wydziwianie I kol Konieczne jest wskazanie nie liczby wierszy lub kolumn, ale szerokości i wysokości ramek. Wszystkie wartości na liście oddzielamy przecinkami. Wymiary można podawać w jednostkach bezwzględnych (pikselach) lub procentach:

• cols="20%, 80%"— okno przeglądarki jest dzielone na dwie kolumny za pomocą atrybutu kol, lewa kolumna zajmuje 20%, a prawa 80% okna przeglądarki.
• wiersze="100, *" Okno przeglądarki jest podzielone na dwa poziome okna za pomocą atrybutu wydziwianie, górne okno zajmuje 100 pikseli, a dolne okno zajmuje pozostałą przestrzeń określoną symbolem gwiazdki.

Jak widać z tego przykładu, kontener z atrybutem wydziwianie najpierw tworzy dwie poziome ramki i zastępuje drugą ramkę inną który dzieli dolną poziomą ramkę na dwie kolumny za pomocą atrybutu kol, lewa kolumna zajmuje 20%, a prawa 80% okna przeglądarki.
Jeżeli przeglądarka nie obsługuje ramek, w oknie wyświetli się tekst znajdujący się pomiędzy tagami </b> I <b> . Wszystko pomiędzy tagami </b> I <b> , jest ignorowany przez przeglądarki obsługujące ramki. Dlatego programista musi napisać kod, który w inny sposób powieli zawartość ramek i umieścić ten kod w kontenerze </b>, wtedy wszyscy użytkownicy będą mogli zobaczyć jego stronę internetową. <br>Jak już wspomniano, niesparowany znacznik służy do wstawienia oddzielnej ramki do dokumentu <b><frame> </b>. Atrybut <b>źródło</b> określa dokument, który powinien być wyświetlony w tej ramce, na przykład: <frame src="frame_top.html">. Jeśli atrybut <b>źródło</b> brak, wyświetlana jest pusta ramka.</p> <h2>Obramowania lub odstępy między ramkami</h2> <p>Domyślnie przeglądarka wyświetla szarą, zazwyczaj trójwymiarową linię graniczną pomiędzy ramkami, za pomocą której odwiedzający mogą dostosować rozmiar ramki. <br>Obramowaniem ramki można manipulować jak każdym innym elementem ramki. Służy do tego kilka atrybutów elementu <b><frameset> </b>, umożliwiając dostosowanie obramowań ramek. Grubość linii granicznej jest określona przez atrybut <b>granica</b>. Domyślna wartość grubości obramowania wynosi pięć. <br>Aby ukryć obramowanie ramki, należy albo ustawić szerokość obramowania na zero, albo ustawić wartość „nie” lub „0” w atrybucie <b>obramowanie ramki</b>. Atrybut <b>obramowanie ramki</b> może mieć tylko dwa przeciwstawne znaczenia. Jeśli wartość atrybutu <b>obramowanie ramki</b> jest równa „tak” lub „1”, wówczas zostanie wyświetlony brzeg ramki, a jeśli „0” lub „nie”, to nie. Należy pamiętać, że wartości atrybutów <b>obramowanie ramki</b> różnić się dla <a href="https://ermake.ru/pl/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak-ustanovit/">różne przeglądarki</a>. Aby rozwiązać ten problem, użyj atrybutu dwukrotnie <b>obramowanie ramki</b>, a w przypadku niektórych przeglądarek należy również dodać atrybut <b>odstępy między ramkami</b> z wartością „0”:</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>W poniższym przykładzie usuwamy granicę pomiędzy ramkami:</p> <h3>Przykład: Usuwanie granicy pomiędzy ramkami</h3> <ul><li>Wypróbuj sam »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">lewa_ramka</td> <td style="width: 90%;background-color:lime;color: white;">ramka_prawa</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Ramki bez granic</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Jeśli usuniesz granicę między ramkami, odwiedzający nie będą mogli zmienić rozmiaru ramki w przeglądarce. Możesz także zapobiec zmianie rozmiaru ramki, zachowując obramowania za pomocą atrybutu <b>noresize</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Używanie atrybutu <b>kolor obramowania</b> Możesz zmienić kolor obramowania ramki, wystarczy podać kod lub odpowiednią zastrzeżoną nazwę koloru. <br>Poniżej znajduje się przykład strony HTML zawierającej opisane powyżej atrybuty kontroli obramowania ramki: kolor obramowania jest czerwony, rozmiaru górnej ramki nie można zmienić:</p> <h3>Przykład: Kontrola granicy ramki</h3> <ul><li>Wypróbuj sam »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">góra_ramki</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">lewa_ramka</td> <td style="width: 80%;background-color:lime;color: white;">ramka_prawa</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Zarządzanie granicami ramek</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Jeśli chcesz umieścić stronę wyświetlaną wewnątrz ramki bliżej jej krawędzi lub odwrotnie, odsunąć ją dalej, zmień atrybuty <b>wysokość marginesu</b> I <b>szerokość marginesu</b> etykietka <b><frame> </b>. Atrybut <b>wysokość marginesu</b> definiuje dopełnienie pomiędzy zawartością ramki a jej górną i dolną krawędzią. Składnia:</p><p> <frame marginheight="число"> </p><p>Atrybut <b>szerokość marginesu</b> definiuje dopełnienie pomiędzy zawartością ramki a jej prawą i lewą krawędzią. Składnia:</p><p> <frame marginwidth="число"> </p><p>Na przykład ta linia HTML ustawia wyświetlaną stronę blisko krawędzi ramki:</p> <p>Jeśli na stronie wyświetla się pasek przewijania, którego nie chcesz, możesz rozwiązać problem, określając atrybut <b>przewijanie</b>„nie” w tagu <b><frame> </b>. Należy jednak pamiętać, że jeśli ramka nie będzie na tyle duża, aby wyświetlić całą zawartość strony, wówczas odwiedzający nie będzie miał możliwości przewijania wyświetlanej strony.</p> <h2>Linki w ramkach</h2> <p>Podążanie za linkiem w zwykłym dokumencie HTML odbywa się w następujący sposób: kliknięcie linku powoduje zastąpienie bieżącego dokumentu nowym w bieżącym lub nowym oknie przeglądarki. Podczas korzystania z ramek schemat ładowania dokumentów HTML różni się od zwykłego, a główną różnicą jest możliwość załadowania dokumentu HTML do jednej ramki z drugiej ramki. <br>Aby załadować dokument do określonej ramki, użyj atrybutu <b>cel</b> etykietka <b><a> </b>. Jako wartość atrybutu <b>cel</b> używana jest nazwa ramki, do której zostanie załadowany dokument określony atrybutem <b>nazwa</b> etykietka <b><frame> </b>. Warto również zauważyć, że nazwa ramki musi zaczynać się od cyfry lub litery łacińskiej. Następujące nazwy są używane jako nazwy zastrzeżone:</p> <p>W przypadku linków zewnętrznych należy ustawić atrybut target na _top lub _blank, aby mieć pewność, że projekty stron trzecich nie będą pojawiać się w Twoich ramkach, a raczej wypełniać całe okno przeglądarki.</p> <p>Poniższy przykład pokazuje dokument HTML, w którym prawa ramka ładuje stronę z linku umieszczonego w górnej ramce. Link do dokumentu, który otworzy się w prawej ramce:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Prawa ramka otrzymuje nazwę <i>ramka_prawa</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Aby załadować dokument do określonej ramki, użyj konstrukcji <i>target="frame_right"</i>, jak pokazano w przykładzie:</p> <h3>Przykład: Link do innej ramki</h3> <ul><li>Wypróbuj sam »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Link do innej ramki</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Twoja przeglądarka nie wyświetla ramek</p>