Rámce v HTML predstavujú spôsob rozdelenia okna prehliadača na viacero sekcií, z ktorých každá môže načítať a zobraziť iný dokument HTML. V tomto článku uvidíme praktické príklady rámcov v HTML.

Aj keď jeho používanie v posledných rokoch kleslo v dôsledku prijatia modernejších a flexibilnejších techník, ako sú CSS a JavaScript sa stále nachádza na niektorých webových stránkach, najmä na tých, ktoré boli vytvorené v 90. a začiatkom 90. rokov. ten z roku 2000.

Ako fungujú rámce alebo rámce v HTML?

Rámy sa skladajú z dvoch prvkov:

1. Sada rámov: Prvok sa používa na rozdelenie okna prehliadača na obdĺžnikové časti, z ktorých každá môže načítať svoj vlastný HTML dokument.

2. rámy: Prvok sa používa v rámci a na definovanie každej z jednotlivých sekcií. A pošle zavolať nejaký iný dokument, ktorý je načítaný vo vnútri sady rámcov.

   instagram story viewer

• Nasledujte s: Príklady iFrame

Ako vytvoriť rámy v HTML

Ak chcete vytvoriť dokument HTML s rámami, postupujte podľa dvoch veľmi jednoduchých krokov:

1. Vytvorte dokument HTML, ktorý definuje štruktúru rámcov pomocou prvku. Napríklad:

Súbor 1: frameset.html

2. Vytvorte jeden alebo viac dokumentov HTML, ktoré sa majú načítať do rámov.

Súbor 2: frame1.html

Toto je Rám 1

Súbor 3: frame2.html

Toto je Rám 2

Atribúty rámca v HTML

Niektoré z najdôležitejších atribútov prvkov sú:

• rolovanie: Tento atribút sa používa na ovládanie vzhľadu posúvačov v rámci. Môže mať hodnoty „auto“, „áno“ alebo „nie“.

• noresize: Tento atribút sa používa na zabránenie používateľovi zmeniť veľkosť rámca.

• jam: Tento atribút sa používa na pridelenie názvu rámca, ktorý môže byť užitočný pri odkazovaní na rámec v odkazoch a skriptoch.

• src: Tento atribút sa používa na určenie adresy URL dokumentu HTML, ktorý sa má načítať do rámca.

• rámová hranica: Tento atribút určuje, či rámy majú mať okraje alebo nie. Možné hodnoty sú "1" (zobrazenie okrajov) alebo "0" (zobrazenie okrajov). Napríklad, .

• hranica: Tento atribút definuje šírku okraja medzi rámami v pixeloch. Napríklad, vytvorí medzi rámčekmi 5px okraj.

• framespace: Tento atribút je podobný ako hranica. Definuje tiež priestor medzi snímkami v pixeloch. Napríklad, nastaví 10px medzeru medzi snímkami.

• bordercolor: Tento atribút vám umožňuje zmeniť farbu okrajov rámov. Je možné zadať akúkoľvek platnú farbu. Napríklad, orámovanie rámikov bude červené.

Príklad použitia:

Ako vytvoriť odkaz na konkrétny rám

Pomocou atribútu môžeme odkaz otvoriť v konkrétnom rámci cieľ V označení. Hodnota cieľ by mal byť rovnaký ako názov rámca (jam atribút ). Napríklad:

v menu.html
Strana 1
Strana 2

V tomto prípade kliknutím na prepojenie „Strana 1“ alebo „Strana 2“ v rámci ponuky sa načíta príslušná stránka v rámci „obsah“.

Ako rozbiť rámy

Ak chcete odkaz na otvorenie stránky mimo sady rámcov (t. j. nahradiť celú sadu rámcov), môžete použiť špeciálnu hodnotu _top pre atribút cieľ. Napríklad:

v menu.html
vyjsť z rámov

Keď kliknete na „Ukončiť rámce“, prehliadač načíta súbor „pageOutofFrames.html“ v celom okne a nahradí sadu rámcov.

Príklad na rozdelenie obrazovky na dva stĺpce s rámčekmi

Tento príklad rozdeľuje obrazovku na dva stĺpce rovnakej veľkosti. Každý stĺpec načíta inú stránku HTML.

Príklad vytvorenia bočného navigačného panela s rámami

Tento príklad vytvorí bočný panel, ktorý zaberá 25 % obrazovky a používa sa na navigáciu. Zvyšok obrazovky slúži na zobrazenie hlavného obsahu.

Príklad na rozdelenie obrazovky na riadky a stĺpce

Tento zložitejší príklad rozdeľuje obrazovku na štyri rovnaké časti. Každá sekcia načítava inú HTML stránku.

Príklad hornej navigácie s rámcami HTML

Vytvorte súbor, ktorý definuje dva rámce v rade. Dva súbory, ktoré definuje, sú: jeden pre navigáciu (ktorý zaberá 20 % šírky okna) a jeden pre hlavný obsah (ktorý zaberá zvyšok šírky okna).

Ďalej budete musieť vytvoriť súbory „navigation.html“ a „content.html“. Napríklad „navigation.html“ môže vyzerať takto:

Strana 1

Strana 2

Strana 3


A "content.html" môže byť niečo takéto:

Vitajte na našej stránke!

Tu bude obsah stránky vybratej v navigácii.

V tomto prípade, keď kliknete na odkaz v "navigation.html", príslušná stránka sa načíta v rámci "obsah".