Ramki (ang. frames) to rozwiązanie, które pozwala wyświetlić kilka stron w jednym oknie przeglądarki. Dzięki ramkom okno przeglądarki dzieli się na kilka zdefiniowanych przedtem części, w których można przeglądać strony WWW.

Ramkę konstruuje się tworząc dokument definiujący podział okna przeglądarki na zaplanowaną ilość okien. Służy do tego znacznik <FRAMESET>, który wpisujemy po znaczniku </HEAD>. Dla znacznika <FRAMESET> istnieją dwa atrybuty: COLS="x,y,itd." - odpowiadający za definiowanie kolumn; oraz ROWS="x,y,itd." - odpowiada za definiowanie wierszy. Wartości x,y,itd. określają ilość kolumn, wierszy; mogą być określane w pikselach lub procentach.

<FRAMESET ROWS="x,y">, gdzie x, y to wysokości pierwszego i drugiego wiersza; ich wartość może być podana w procentach, pikselach, lub może być nieokreślona (wtedy należy wpisać gwiazdkę:*).

A oto jak mogłaby wyglądać przykładowa strona zawierająca dwa poziome wiersze:

W przykładzie występuje znacznik <FRAME>, który dokładniej określa konkretną ramkę: przypisuje do niej nazwę oraz dokument wyświetlany domyślnie wewnątrz. Służą do tego odpowiednio atrybuty NAME="nazwa" i SRC="zawartość.html".

<FRAME NAME="nazwa" SRC="zawartość">:

NAME=nazwa, gdzie nazwa to identyfikator ramki;, nazwa kieruje wyświetlanie informacji spod danego adresu URL do konkretnej ramki;

SRC=zawartość, gdzie zawartość.html to adres URL strony, która ma być wyświetlona w danej ramce, gdy przeglądarka po raz pierwszy odczyta stronę z układem ramek.

UWAGI:
• Nie można zapomnieć zamykającego znacznika </FRAMESET>, w takim przypadku Netscape wyświetli pusta stronę; Internet Explorer nie przykłada do tego takiej wagi.
• Aby ramka zajmowała całą wolną pozostałą przestrzeń należy użyć gwiazdki, którą można użyć więcej niż raz, wtedy wolna przestrzeń zostanie równo podzielona pomiędzy ramki z gwiazdkami.
• Na stronie z ramkami nie wykorzystujemy znacznika BODY.

Inną możliwością jest ustawienie układu ramek w postaci kolumn zamiast wierszy. Służy do tego atrybut COLS znacznika FRAMESET.

<FRAMESET COLS="x,y,itd.", gdzie x,y (oraz kolejne wartości) definiują szerokość kolejnych kolumn wyrażonych w procentach, pikselach lub są nieokreślone(*).

A to przykład strony wykorzystujący układ ramek w dwóch kolumnach:

Możemy stworzyć układ ramek łączący w sobie wiersze i kolumny. 

Przykład:

Kombinowany układ ramek uzyskujemy poprzez definiowanie jednego układu ramek wewnątrz drugiego.

Przykład:

Klasyczne ramki dzielą ekran przeglądarki na osobne okna. Pływające ramki, które są prostsze w konstrukcji, mogą być umieszczone w dowolnym miejscu strony. Pływające ramki zostały zaakceptowane przez W3W jednak nadal nie są obsługiwane przez przeglądarkę firmy Netscape. Nazwa "pływająca" pochodzi od angielskiego "floating frame", jednak teraz popularniejsze stało się określanie ich jako "inline frame", stosownie do tego zmieniono polecenie definiujące je na IFRAME. Ramki pływające można by określić jako "ramki lokalne".

<IFRAME WIDTH=x HEIGHT=y SRC="dokument.html">Twoja przeglądarka nie akceptuje pływających ramek!</IFRAME>, gdzie:

WIDTH=x i HEIGHT=y, gdzie x i y określają odpowiednio szerokość i wysokość ramki (w pikselach lub procentach).

SRC="dokument.html, dokument.html to adres URL strony, która będzie wyświetlana w ramce.

Zdanie "Twoja przeglądarka nie akceptuje pływających ramek" zostanie wyświetlone w przeglądarkach, które nie obsługują pływających ramek.

Dodatkowo można użyć atrybutów ALIGN (z wartościami left lub right), FRAMEBORDER, HSPACE, VSPACE, SCROOLING oraz MARGINWITH i MARGINHEIGHT.

Zarówno w Netscape i Internet Explorer domyślna wartość wyświetlanych marginesów wynosi 8 pikseli po każdej stronie. Do samodzielnego ustalenia rozmiarów marginesów służą atrybuty MARGINWIDTH oraz MARGNIHEIGHT w znaczniku <FRAME>.

<FRAME MARGINWIDTH=w>, gdzie w jest żądaną szerokością odstępu pomiędzy lewą i prawą krawędzią ramki, a jej zawartością; wyrażoną w pikselach.

<FRAME MARGINHEIGHT=h>, gdzie h jest żądaną szerokością odstępu pomiędzy górną i dolną krawędzią ramki, a jej zawartością; wyrażoną w pikselach.

Przykład:

Można dowolnie chować lub wyświetlać paski przewijania, pozwalające na przewijanie dokumentu wewnątrz ramki. Służy do tego atrybut SCROLLING w znaczniku FRAME

<FRAME SCROLLING=YES> Jeżeli chcemy, aby paski przewijania były stale widoczne:

Przykład:

<FRAME SCROLLING=NO> Jeżeli chcemy, aby były stale ukryte:

<FRAME SCROLLING=AUTO>

Domyślenie suwaki pojawiają się tylko wtedy, kiedy są potrzebne (gdy dokument nie może zmieścić się w ramce). W takim wypadku możemy wpisać AUTO lub nie wpisywać żadnego atrybutu SCROLLING:

Standardowo przeglądarka wyświetla krawędzie wokół każdej ramki układu. Możemy samodzielnie zdefiniować obramowanie ramek. W znaczniku FRAMESET atrybut BORDER odpowiada za kontrolę szerokości obszaru pomiędzy ramkami, a atrybut FRAMEBORDER pozwala wyświetlać w tym obszarze krawędzi lub je ukryć.

<FRAME BORDER="n">, gdzie n jest żądaną grubością krawędzi ramek, wyrażoną w pikselach.

UWAGI:
• Jeśli zdefiniujemy BORDER=0 krawędzie nie będą widoczne.
• Domyślna grubość krawędzi to 5 pikseli.
• Przypisanie atrybutom BORDER i FRAMEBORDER wartości 0 spowoduje, że ramki będą przylegać do siebie. Dla nowszych przeglądarek wystarczy podanie samego atrybutu BORDER=0.

Wpisanie w ramach najbardziej zewnętrznego znacznika FRAMESET atrybutu FRAMEBORDER=0 powoduje ukrycie krawędzi ramki, jednak nie zmienia on wielkości obszaru zajmowanego przez krawędź, by tak się stało należy użyć do tego atrybutu BORDER=0.

<FRAMESET FRAMEBORDER=0>

UWAGI:
• Jeśli w całym układzie krawędzi zostały ukryte, a chcemy wyświetlić kilka z nich należy wpisać FRAMBORDER=1(lub dla Netscape FRAMEBORDER=YES), wewnątrz odpowiedniego znacznika FRAME lub FRAMESET.

Każdej ramce teoretycznie można wybrać inny kolor krawędzi. Praktycznie jest to dość ograniczone, ponieważ krawędzie ramek są wspólne. Do zmiany koloru krawędzi całego układu ramek służy atrybut BORDERCOLOR w najbardziej zewnętrznym znaczniku FRAMESET:

<FRAMESET BORDERCOLOR=kolor>, gdzie kolor określa kolor ramki.

Jeśli chcemy zmienić kolor krawędzi wiersza, kolumny lub pojedynczej ramki ten sam atrybut należy wpisać w ramach znacznika FRAMESET lub FRAME

UWAGI:
• Atrybut BORDERCOLOR danej ramki ma pierwszeństwo przed tym samym atrybutem wiersza lub kolumny.

Jeśli nie chcemy, aby użytkownik zmieniał rozmiar ramek w dowolny sposób (jak to było w poprzednich przykładach) możemy zablokować mu taką możliwość. Wewnątrz znacznika FRAME wybranej ramki należy użyć atrybutu NORESIZE. A oto przykładowa ramka bez możliwości zmiany rozmiaru:

Jeśli strona WWW będzie zbudowana w oparciu o ramki, hiperłącza nie będą działały poprawnie. Błąd będzie polegał na tym, że strona, do której odwołuje się odnośnik zostanie wyświetlona w tym samym oknie, co odnośnik do niej. By tego uniknąć należy określić, w którym oknie ramki wywołany dokument ma być wyświetlony. Do tego potrzebne są wcześniej zdefiniowane nazwy ramek. Na stronie, gdzie mają pojawić się połączenia należy wpisać:

<A HREF="zawartość.html" TARGET=nazwa>, gdzie zawartość.html jest nazwą pliku, który powinien zostać wyświetlony w wybranej ramce, a nazwa identyfikatorem, który został przypisany ramce w znaczniku FRAME.

Oto jak wyglądają hiperłącza umieszczone na stronie z dwoma ramkami, nazwanymi odpowiednio "pierwsza" i "druga". Przykład:

<A HREF="przyklad.html" TARGET="druga">To jest przykładowy odnośnik<A>, którego zawartość otworzy się w ramce obok, nazwanej "druga".

<A HREF="przyklad.html" TARGET="pierwsza">To jest przykładowy odnośnik</A>, którego zawartość otworzy się w tej samej ramce, nazwanej "pierwsza".

Jest możliwość dokładniejszego określenia miejsca docelowego dla połączenia poprzez atrybut TARGET. Atrybut ten może mieć następujące wartości:

TARGET=_blank - połączenie otwiera się w nowym, pustym oknie

TARGET=_self - połączenie otwiera się w ramce zawierającej połączenie

TARGET=_top - połączenie otwiera się w bieżącym oknie przeglądarki, niezależnie od reszty układu ramki, do którego należało

TARGET=_parent - połączenie otwiera się w ramce, która zawiera bieżący układ ramek.

UWAGI:
• W przypadku nieokreślenia ramki docelowej wskazane połączenie zostanie otwarte w ramce, w której się znajduje.

Domyślnie połączenie zostaje otwarte w ramce, w której się znajduje, jeśli wcześniej nie zdefiniowano miejsca docelowego poprzez TARGET. Można zmienić domyślne miejsce docelowe w znaczniku BASE umieszczonym w sekcji HEAD.

<BASE TARGET="nazwa">, gdzie nazwa identyfikuje ramkę lub okno, w którym domyślnie będą się otwierać połączenia.

Przykład:

Ramki stały się standardem dopiero w wersji HTML 4.0, dlatego nie wszystkie starsze przeglądarki potrafią je wyświetlać. W takim przypadku możemy dołączyć informację do naszego serwisu WWW, która pojawi się, jeśli przeglądarka nie obsługuje ramek. Dzięki znacznikom <NOFRAMES> </NOFRAMES> użytkownicy starszych przeglądarek mogą zobaczyć zawartość strony. Wewnątrz tego znacznika należy zdefiniować sekcję BODY i stworzyć stronę WWW bez ramek. A oto zasada działania: przy wchodzeniu na stronę przy użyciu przeglądarki obsługującej ramki znacznik NOFRAMES zostanie pominięty, w przeciwnym przypadku nieznane znaczniki zostaną pominięte i zostanie odczytana zawartość strony znajdująca się w ramach znaczników <NOFRAMES></NOFRAMES>.

Przykład:

UWAGI:
• W ramach znacznika <NOFRAMES> można umieścić każdy dokument HTML.