Ramar i HTML är ett sätt att dela upp webbläsarfönstret i flera sektioner, som var och en kan läsa in och visa olika HTML-dokument. I den här artikeln kommer vi att se praktiska exempel på ramar i HTML.

Även om dess användning har minskat de senaste åren på grund av antagandet av mer moderna och flexibla tekniker, som CSS och JavaScript, kan fortfarande hittas på vissa webbplatser, särskilt de som skapades på 1990-talet och början av 1990-talet. det av 2000.

Hur fungerar ramar eller ramar i HTML?

Ramar består av två delar:

1. Ramuppsättning: Elementet används för att dela upp webbläsarfönstret i rektangulära sektioner, som var och en kan ladda sitt eget HTML-dokument.

2. ramar: Elementet används inom en för att definiera var och en av de individuella avsnitten. Och det skickar att anropa något annat dokument som är laddat inuti ramuppsättningen.

   instagram story viewer

• Följ med: iFrame-exempel

Hur man gör ramar i HTML

För att skapa ett HTML-dokument med ramar, följ två mycket enkla steg:

1. Skapa ett HTML-dokument som definierar strukturen för ramarna med hjälp av elementet. Till exempel:

Fil 1: frameset.html

2. Skapa ett eller flera HTML-dokument som ska laddas inom ramarna.

Fil 2: frame1.html

Det här är bildruta 1

Fil 3: frame2.html

Detta är Frame 2

Ramattribut i HTML

Några av de viktigaste elementattributen är:

• rullning: Det här attributet används för att styra utseendet på rullningslisterna i ramen. Den kan ha värdena "auto", "ja" eller "nej".

• noresize: Detta attribut används för att förhindra användaren från att ändra storlek på ramen.

• jams: Detta attribut används för att ge ramen ett namn, vilket kan vara användbart för att referera till ramen i länkar och skript.

• src: Detta attribut används för att ange URL: en till HTML-dokumentet som ska laddas i ramen.

• ramkant: Det här attributet anger om ramar ska ha kanter eller inte. Möjliga värden är "1" (för att visa kanter) eller "0" (för att inte visa några kanter). Till exempel, .

• gräns: Det här attributet definierar bredden på gränsen mellan ramarna i pixlar. Till exempel, kommer att skapa en 5px-kant mellan ramarna.

• ramavstånd: Det här attributet liknar gräns. Den definierar också utrymmet mellan bildrutorna i pixlar. Till exempel, kommer att ställa in ett 10px gap mellan bildrutorna.

• gräns färg: Med det här attributet kan du ändra ramfärgen på ramarna. Vilken giltig färg som helst kan anges. Till exempel, kommer att göra ramarnas kant röd.

Användningsexempel:

Hur man länkar till en specifik ram

Vi kan öppna en länk i en specifik ram med hjälp av attributet mål I etiketten. Värdet av mål ska vara samma som ramnamnet (jams attribut av ). Till exempel:

i menu.html
Sida 1
Sida 2

Om du klickar på länkarna "Sida 1" eller "Sida 2" i menyramen kommer i detta fall att ladda motsvarande sida i "innehållsramen".

Hur man bryter ramarna

Om du vill att en länk ska öppna en sida utanför ramuppsättningen (dvs. ersätta hela ramuppsättningen), kan du använda specialvärdet _topp för attributet mål. Till exempel:

i menu.html
gå ut ur ramarna

När du klickar på "Avsluta ramar" kommer webbläsaren att ladda "pageOutofFrames.html" i hela fönstret och ersätta ramuppsättningen.

Exempel för att dela upp skärmen i två kolumner med ramar

Det här exemplet delar upp skärmen i två lika stora kolumner. Varje kolumn läser in en annan HTML-sida.

Exempel för att skapa en sidofält för navigering med ramar

Det här exemplet skapar en sidofält som tar upp 25 % av skärmen och används för navigering. Resten av skärmen används för att visa huvudinnehållet.

Exempel för att dela upp skärmen i rader och kolumner

Detta mer komplexa exempel delar upp skärmen i fyra lika delar. Varje avsnitt läser in en annan HTML-sida.

Exempel på toppnavigering med HTML-ramar

Skapa en fil som definierar två ramar i rad. De två filer som den definierar är: en för navigeringen (som tar upp 20 % av fönstrets bredd) och en för huvudinnehållet (som tar upp resten av fönstrets bredd).

Därefter måste du skapa filerna "navigation.html" och "content.html". Till exempel kan "navigation.html" se ut så här:

Sida 1

Sida 2

Sida 3


Och "content.html" kan vara ungefär så här:

Välkommen till vår hemsida!

Här kommer innehållet på sidan som valts i navigeringen.

I det här fallet, när du klickar på en länk i "navigation.html", laddas motsvarande sida i "innehålls"-ramen.