HTML - ramki

Ramki HTML służą do dzielenia okna przeglądarki na wiele sekcji, z których każda może załadować oddzielny dokument HTML. Zbiór ramek w oknie przeglądarki jest nazywany zestawem ramek. Okno podzielone jest na ramki, podobnie jak w tabelach: na rzędy i kolumny.

Wady ramek

Korzystanie z ramek ma kilka wad, dlatego nigdy nie zaleca się używania ramek na stronach internetowych -

Niektóre mniejsze urządzenia często nie radzą sobie z ramkami, ponieważ ich ekran nie jest wystarczająco duży, aby można go było podzielić.
Czasami Twoja strona będzie wyświetlana inaczej na różnych komputerach ze względu na różną rozdzielczość ekranu.
Przycisk Wstecz przeglądarki może nie działać zgodnie z oczekiwaniami użytkownika.
Nadal istnieje kilka przeglądarek, które nie obsługują technologii ramek.

Tworzenie ramek

Aby użyć ramek na stronie, używamy tagu <frameset> zamiast tagu <body>. Znacznik <frameset> określa, jak podzielić okno na ramki. Plikrows atrybut znacznika <frameset> definiuje ramki poziome, a colsatrybut definiuje ramki pionowe. Każda ramka jest oznaczona tagiem <frame> i określa, który dokument HTML ma otwierać się w ramce.

Note- Tag <frame> został wycofany w HTML5. Nie używaj tego elementu.

Przykład

Poniżej znajduje się przykład tworzenia trzech poziomych ramek -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

To da następujący wynik -

Przykład

Umieśćmy powyższy przykład w następujący sposób, tutaj zastąpiliśmy atrybut wierszy kolumnami i zmieniliśmy ich szerokość. Spowoduje to utworzenie wszystkich trzech ramek w pionie -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

To da następujący wynik -

Atrybuty tagu <frameset>

Poniżej znajdują się ważne atrybuty tagu <frameset> -

Sr.No	Atrybut i opis
1	cols Określa liczbę kolumn zawartych w zestawie ramek i rozmiar każdej kolumny. Możesz określić szerokość każdej kolumny na jeden z czterech sposobów - Wartości bezwzględne w pikselach. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "100, 500, 100" . Procent okna przeglądarki. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "10%, 80%, 10%" . Używanie symbolu wieloznacznego. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "10%, , 10%"* . W tym przypadku symbol wieloznaczny zajmuje pozostałą część okna. Jako względne szerokości okna przeglądarki. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "3 , 2 , 1 "* . To alternatywa dla procentów. Możesz użyć względnych szerokości okna przeglądarki. Tutaj okno jest podzielone na szóste części: pierwsza kolumna zajmuje połowę okna, druga jedną trzecią, a trzecia jedną szóstą.
2	rows Ten atrybut działa tak samo jak atrybut cols i przyjmuje te same wartości, ale służy do określania wierszy w zestawie ramek. Na przykład, aby utworzyć dwie poziome ramki, użyj wierszy = "10%, 90%" . Możesz określić wysokość każdego wiersza w taki sam sposób, jak wyjaśniono powyżej dla kolumn.
3	border Ten atrybut określa szerokość obramowania każdej klatki w pikselach. Na przykład border = "5". Wartość zero oznacza brak obramowania.
4	frameborder Ten atrybut określa, czy między ramkami ma być wyświetlana trójwymiarowa ramka. Ten atrybut przyjmuje wartość 1 (tak) lub 0 (nie). Na przykład frameborder = "0" nie określa obramowania.
5	framespacing Ten atrybut określa ilość miejsca między klatkami w zestawie ramek. Może to przyjąć dowolną wartość całkowitą. Na przykład framespacing = "10" oznacza, że między klatkami powinno być 10 pikseli odstępu.

Atrybuty tagu <frame>

Poniżej znajdują się ważne atrybuty tagu <frame> -

Sr.No	Atrybut i opis
1	src Ten atrybut służy do podania nazwy pliku, który ma zostać załadowany do ramki. Jego wartością może być dowolny adres URL. Na przykład src = "/html/top_frame.htm" załaduje plik HTML dostępny w katalogu html.
2	name Ten atrybut umożliwia nadanie nazwy ramce. Służy do wskazania, do której ramki należy załadować dokument. Jest to szczególnie ważne, gdy chcesz utworzyć łącza w jednej ramce, które ładują strony do innej ramki. W takim przypadku druga ramka wymaga nazwy, aby zidentyfikować się jako cel łącza.
3	frameborder Ten atrybut określa, czy krawędzie tej ramki są wyświetlane; przesłania wartość podaną w atrybucie frameborder w znaczniku <frameset>, jeśli taki jest podany, i może to przyjąć wartość 1 (tak) lub 0 (nie).
4	marginwidth Ten atrybut umożliwia określenie szerokości przestrzeni między lewą i prawą krawędzią ramki a zawartością ramki. Wartość podawana jest w pikselach. Na przykład marginwidth = "10".
5	marginheight Ten atrybut umożliwia określenie wysokości odstępu między górną i dolną krawędzią ramki oraz jej zawartością. Wartość podawana jest w pikselach. Na przykład marginheight = "10".
6	noresize Domyślnie możesz zmienić rozmiar dowolnej ramki, klikając i przeciągając krawędzie ramki. Atrybut noresize uniemożliwia użytkownikowi zmianę rozmiaru ramki. Na przykład noresize = "noresize".
7	scrolling Ten atrybut steruje wyglądem pasków przewijania, które pojawiają się w ramce. Przyjmuje wartości „tak”, „nie” lub „auto”. Na przykład scrolling = "no" oznacza, że nie powinno mieć pasków przewijania.
8	longdesc Ten atrybut umożliwia udostępnienie łącza do innej strony zawierającej długi opis zawartości ramki. Na przykład longdesc = "framedescription.htm"

Obsługa ramek przez przeglądarkę

Jeśli użytkownik korzysta ze starej przeglądarki lub dowolnej przeglądarki, która nie obsługuje ramek, wówczas element <noframes> powinien zostać wyświetlony użytkownikowi.

Musisz więc umieścić element <body> wewnątrz elementu <noframes>, ponieważ element <frameset> ma zastąpić element <body>, ale jeśli przeglądarka nie rozumie elementu <frameset>, powinna zrozumieć, co jest wewnątrz elementu element <body> zawarty w elemencie <noframes>.

Możesz przekazać miłą wiadomość dla użytkownika posiadającego starą przeglądarkę. Na przykład przepraszam !! Twoja przeglądarka nie obsługuje ramek. jak pokazano w powyższym przykładzie.

Nazwa ramki i atrybuty celu

Jednym z najpopularniejszych zastosowań ramek jest umieszczanie pasków nawigacji w jednej ramce, a następnie ładowanie stron głównych do osobnej ramki.

Zobaczmy następujący przykład, w którym plik test.htm ma następujący kod -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Tutaj utworzyliśmy dwie kolumny do wypełnienia dwiema ramkami. Pierwsza klatka ma szerokość 200 pikseli i będzie zawierać pasek menu nawigacji zaimplementowany przezmenu.htmplik. Druga kolumna wypełnia pozostałą przestrzeń i będzie zawierać główną część strony i jest zaimplementowana przezmain.htmplik. Dla wszystkich trzech linków dostępnych na pasku menu wymieniliśmy ramkę docelową jakomain_page, więc po każdym kliknięciu któregokolwiek z łączy na pasku menu, dostępne łącze otworzy się na stronie głównej.

Poniżej znajduje się zawartość pliku menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

Poniżej znajduje się zawartość pliku main.htm -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Kiedy ładujemy test.htm plik, daje następujący wynik -

Teraz możesz spróbować kliknąć linki dostępne w lewym panelu i zobaczyć wynik. Targetattribute może przyjąć jedną z następujących wartości -

Sr.No	Opcja i opis
1	_self Wczytuje stronę do bieżącej ramki.
2	_blank Wczytuje stronę do nowego okna przeglądarki. Otwarcie nowego okna.
3	_parent Wczytuje stronę do okna nadrzędnego, które w przypadku pojedynczego zestawu ramek jest głównym oknem przeglądarki.
4	_top Wczytuje stronę do okna przeglądarki, zastępując bieżące ramki.
5	targetframe Ładuje stronę do nazwanej ramki docelowej.