FRAMESET to tag HTML, który definiuje układ ramek (frames) na stronie internetowej, dzieląc okno przeglądarki na niezależne obszary wyświetlające różne dokumenty.
Element FRAMESET jest przestarzały i został usunięty z HTML5 – stosuj go wyłącznie w utrzymaniu starszych projektów lub do analizy archiwalnych rozwiązań.
Co to są ramki?
Ramki to wydzielone obszary okna przeglądarki, które mogą być ładowane i odświeżane niezależnie od siebie.
Klasyczny układ to lewy panel z nawigacją oraz prawy panel z treścią, każdy ładujący inny plik HTML.
Podstawowa struktura
Tag FRAMESET zastępuje tag <body> w dokumencie HTML. Oto schemat struktury:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title>Strona z ramkami</title>
</head>
<frameset cols="30%,70%">
<frame src="nawigacja.html" name="spis">
<frame src="zawartość.html" name="tresc">
<noframes>
<body>
Niestety, Twoja przeglądarka nie obsługuje ramek.
</body>
</noframes>
</frameset>
</html>
Zwróć uwagę na deklarację DOCTYPE – układ ramek wymaga DTD Frameset zgodnego z HTML 4.01/XHTML 1.0.
Główne atrybuty FRAMESET
Atrybut COLS – ramki pionowe
cols definiuje pionowy podział okna na kolumny. Możesz określić szerokość na trzy sposoby:
-
Piksele – stałe wartości szerokości dla kolejnych kolumn. Przykład:
<frameset cols="200,400,*">
<frame src="ramka1.html">
<frame src="ramka2.html">
<frame src="ramka3.html">
</frameset>Ta konfiguracja tworzy trzy kolumny: 200 px, 400 px, a trzecia zajmuje pozostałe miejsce (znak
*). -
Procenty – szerokości proporcjonalne do okna. Przykład:
<frameset cols="25%,50%,25%">
<frame src="ramka1.html">
<frame src="ramka2.html">
<frame src="ramka3.html">
</frameset>Każda kolumna zajmuje określony procent szerokości okna przeglądarki.
-
Równe proporcje – dynamiczny podział dostępnego miejsca. Przykład:
<frameset cols="*,*,*">
<frame src="ramka1.html">
<frame src="ramka2.html">
<frame src="ramka3.html">
</frameset>Gwiazdy oznaczają równe udziały – każda ramka zajmie jednakową część dostępnego miejsca.
Atrybut ROWS – ramki poziome
rows działa analogicznie do cols, ale tworzy poziome podziały na wiersze. Przykład:
<frameset rows="80,*">
<frame src="header.html">
<frame src="main.html">
</frameset>
Ta struktura tworzy górny pasek (80 px) i główną zawartość poniżej.
Zagnieżdżanie ramek
Aby uzyskać bardziej złożone układy, możesz łączyć COLS i ROWS w zagnieżdżonych zestawach ramek:
<frameset cols="25%,75%">
<frame src="nawigacja.html" name="nawigacja">
<frameset rows="30%,*">
<frame src="header.html">
<frame src="strona.html" name="strona">
</frameset>
</frameset>
W tym przykładzie lewa kolumna zawiera nawigację, a prawa jest podzielona na dwa wiersze: nagłówek i główną zawartość.
Atrybuty ramek – tag FRAME
Każda ramka definiowana jest za pomocą tagu <frame>. Oto jego główne atrybuty:
| Atrybut | Opis | Przykład |
|---|---|---|
src |
URL dokumentu HTML do załadowania | src="strona.html" |
name |
Nazwa ramki (używana w linkach jako wartość atrybutu target) |
name="zawartość" |
frameborder |
Widoczność obramowania (0 = ukryte, 1 = widoczne) | frameborder="0" |
marginwidth |
Lewy/prawy margines (piksele) | marginwidth="10" |
marginheight |
Górny/dolny margines (piksele) | marginheight="10" |
noresize |
Zapobiega zmianie rozmiaru ramki | noresize="noresize" |
longdesc |
Link do dłuższego opisu | longdesc="opis.html" |
Praktyczny przykład – klasyczna strona z nawigacją
Oto kompletny szkic pliku z menu po lewej i treścią po prawej:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta charset="utf-8">
<title>Moja strona z ramkami</title>
</head>
<frameset cols="180,*" border="0" frameborder="0" framespacing="0">
<frame name="spis" noresize="noresize" frameborder="0" src="spis.html">
<frame name="strona" noresize="noresize" frameborder="0" src="home.html">
<noframes>
<body>
<a href="spis.html">Spis treści</a>
</body>
</noframes>
</frameset>
</html>
Lewa ramka (180 px) wyświetla menu nawigacji, prawa zawiera główną treść.
Atrybut NOFRAMES – zawartość alternatywna
noframes jest kluczowy dla dostępności. Zawiera kod HTML, który wyświetli się w przeglądarkach niewspierających ramek:
<frameset cols="30%,70%">
<frame src="menu.html" name="menu">
<frame src="content.html" name="content">
<noframes>
<body>
<h1>Twoja przeglądarka nie obsługuje ramek</h1>
<p>Przepraszamy, ale ta strona wymaga przeglądarki obsługującej ramki HTML.</p>
<p><a href="wersja-alternatywna.html">Przejdź do wersji alternatywnej</a></p>
</body>
</noframes>
</frameset>
Atrybuty FRAMEBORDER i FRAMESPACING
Aby usunąć widoczne obramowanie między ramkami, możesz użyć poniższej konfiguracji:
<frameset cols="20%,80%" frameborder="0" framespacing="0">
<frame src="nawigacja.html" frameborder="0">
<frame src="zawartość.html" frameborder="0">
</frameset>
Ważne: atrybuty frameborder i framespacing nie są częścią oficjalnej specyfikacji HTML 4.01; w Internet Explorerze należy używać obu jednocześnie lub zastosować border="0".
Interakcja między ramkami – atrybut TARGET
Możesz kierować linki do konkretnych ramek, używając atrybutu target. W pliku spis.html zastosuj następujące odnośniki:
<a href="artykuł1.html" target="strona">Artykuł 1</a>
<a href="artykuł2.html" target="strona">Artykuł 2</a>
Link otworzy zawartość w ramce o nazwie strona, zamiast przeładowywać bieżącą ramkę.
Dlaczego frameset jest przestarzały?
Współczesne strony internetowe preferują następujące podejścia:
- Sekcje HTML5 – semantyczne znaczniki oraz
<div>do tworzenia struktury; - CSS Flexbox i Grid – elastyczne, responsywne układy bez przeładowań strony;
- JavaScript – dynamiczne ładowanie treści (AJAX/Fetch, SPA) i kontrola nawigacji;
- Inline frames (
<iframe>) – bezpieczne osadzanie odrębnych dokumentów w obrębie strony.
Najczęstsze problemy z użyciem ramek to:
- ograniczona indeksacja przez wyszukiwarki (SEO),
- problemy z historią przeglądania i nawigacją wstecz,
- trudności z wdrażaniem responsywności i projektowaniem mobilnym,
- wyzwania dostępności dla technologii asystujących.