Ramki w HTML to sposób na podzielenie okna przeglądarki na wiele sekcji, z których każda może ładować i wyświetlać inny dokument HTML. W tym artykule zobaczymy praktyczne przykłady ramek w HTML.

Chociaż jego użycie spadło w ostatnich latach ze względu na przyjęcie bardziej nowoczesnych i elastycznych technik, takich jak CSS i JavaScript nadal można znaleźć na niektórych stronach internetowych, zwłaszcza tych, które powstały w latach 90. i na początku lat 90. XX wieku. ten z 2000 roku.

Jak działają ramki lub ramki w HTML?

Ramki składają się z dwóch elementów:

1. Zestaw ramek: Element służy do podziału okna przeglądarki na prostokątne sekcje, z których każda może załadować własny dokument HTML.

2. ramki: Element jest używany w ciągu a zdefiniować każdą z poszczególnych sekcji. I wysyła, aby wywołać inny dokument, który jest ładowany wewnątrz zestawu ramek.

   instagram story viewer

• Postępuj zgodnie z: Przykłady elementów iFrame

Jak zrobić ramki w HTML

Aby utworzyć dokument HTML z ramkami, wykonaj dwa bardzo proste kroki:

1. Utwórz dokument HTML, który definiuje strukturę ramek za pomocą elementu. Na przykład:

Plik 1: zestaw ramek.html

2. Utwórz jeden lub więcej dokumentów HTML do załadowania w ramkach.

Plik 2: ramka1.html

To jest Ramka 1

Plik 3: ramka2.html

To jest ramka 2

Atrybuty ramek w HTML

Niektóre z najważniejszych atrybutów elementu Czy:

• przewijanie: Ten atrybut służy do kontrolowania wyglądu pasków przewijania w ramce. Może mieć wartości „auto”, „tak” lub „nie”.

• noresize: Ten atrybut jest używany, aby uniemożliwić użytkownikowi zmianę rozmiaru ramki.

• mniam: Ten atrybut jest używany do nadania ramce nazwy, która może być przydatna do odwoływania się do ramki w łączach i skryptach.

• źródło: Ten atrybut służy do określenia adresu URL dokumentu HTML, który ma zostać załadowany w ramce.

• Brzeg ramki: Ten atrybut określa, czy ramki powinny mieć obramowania, czy nie. Możliwe wartości to „1” (aby pokazać obramowania) lub „0” (aby nie pokazać obramowań). Na przykład, .

• granica: Atrybut ten określa szerokość granicy między ramkami w pikselach. Na przykład, utworzy ramkę o szerokości 5 pikseli między ramkami.

• odstępy między ramkami: Ten atrybut jest podobny do granica. Określa również odstęp między klatkami w pikselach. Na przykład, ustawi odstęp 10 pikseli między ramkami.

• kolor ramki: Ten atrybut umożliwia zmianę koloru obramowania ramek. Można określić dowolny prawidłowy kolor. Na przykład, spowoduje, że obramowanie ramek będzie czerwone.

Przykład użycia:

Jak połączyć się z określoną ramką

Możemy sprawić, że link otworzy się w określonej ramce za pomocą atrybutu cel w etykiecie. Wartość cel powinna być taka sama jak nazwa ramki (mniam atrybut ). Na przykład:

w menu.html
Strona 1
Strona 2

W takim przypadku kliknięcie linków „Strona 1” lub „Strona 2” w ramce menu spowoduje załadowanie odpowiedniej strony w ramce „Zawartość”.

Jak przełamać ramy

Jeśli chcesz, aby link otwierał stronę poza zestawem ramek (tj. zastąpił cały zestaw ramek), możesz użyć specjalnej wartości _szczyt dla atrybutu cel. Na przykład:

w menu.html
wyjść poza ramy

Kiedy klikniesz „Wyjdź z ramek”, przeglądarka załaduje „pageOutofFrames.html” w pełnym oknie, zastępując zestaw ramek.

Przykład podziału ekranu na dwie kolumny z ramkami

Ten przykład dzieli ekran na dwie kolumny o równej wielkości. Każda kolumna ładuje inną stronę HTML.

Przykład tworzenia bocznego paska nawigacji z ramkami

Ten przykład tworzy pasek boczny, który zajmuje 25% ekranu i służy do nawigacji. Pozostała część ekranu służy do wyświetlania głównej zawartości.

Przykład podziału ekranu na wiersze i kolumny

Ten bardziej złożony przykład dzieli ekran na cztery równe części. Każda sekcja ładuje inną stronę HTML.

Przykład górnej nawigacji z ramkami HTML

Utwórz plik definiujący dwie klatki w rzędzie. Dwa pliki, które definiuje to: jeden do nawigacji (który zajmuje 20% szerokości okna) i jeden do głównej zawartości (który zajmuje resztę szerokości okna).

Następnie musisz utworzyć pliki „navigation.html” i „content.html”. Na przykład „navigation.html” może wyglądać tak:

Strona 1

Strona 2

Strona 3


A „content.html” może wyglądać mniej więcej tak:

Witamy na naszej stronie internetowej!

Tutaj przejdzie zawartość strony wybranej w nawigacji.

W takim przypadku po kliknięciu łącza w pliku „navigation.html” odpowiednia strona zostanie załadowana w ramce „treść”.