<HTML>
<HEAD><TITLE>Exempel på ramar</TITLE></HEAD>
<FRAMESET COLS="75,*">
<FRAME SRC="fil1.html" NAME="ram1">
<FRAME SRC="fil2.html" NAME="ram2">
</FRAMESET>
</HTML>
Om du surfat omkring ett tag på nätet har du säkert sett sidor som är indelade i olika delar. Dessa delar kallas ramar (på engelska frames). Ibland är de väldigt praktiska och hjälper till att göra sidan överskådbar men i ibland ser man exempel på ramar som bara gör sidan otymplig och oöverskådbar. På senare tid används ramar allt mindre, men det är trots allt bra att känna till hur de fungerar.
En sida med ramar kan visa flera HTML-dokument samtidigt på skärmen. Hur går detta till? I grunden finns bara ett huvuddokument som anropar de andra dokumenten. Här är ett exempel. Få inte panik om du inte förstår allt. En förklaring följer efteråt.
<HTML>
<HEAD><TITLE>Exempel på ramar</TITLE></HEAD>
<FRAMESET COLS="75,*">
<FRAME SRC="fil1.html" NAME="ram1">
<FRAME SRC="fil2.html" NAME="ram2">
</FRAMESET>
</HTML>
Observera att taggen <BODY></BODY> inte används i huvuddokumentet som istället innehåller taggen <FRAMESET>. <FRAMESET> är den första nya taggen vi stöter på i dokumentet. Den talar om för webläsaren att det finns ramar på sidan. Attributet COLS (från engelskans COLumnS (kolumner)) berättar att det ska finnas två kolumner och att den första ska vara 75 pixels och den andra resten av fönstret. Den tillsynes oförståliga asterisken (*) betyder alltså resten av sidan.
Nästa nyhet i ovanstående exempel är taggen <FRAME> och attributet SRC som preciserar vilka dokument som ska visas i de ramar vi skapat. I vårt fall heter dokumenten fil1.html och fil2.html. Attributet NAME bestämmer namnet på rutan. Vad detta har för användning tittar vi närmare på senare i lektionen.
Man kan givetvis också dela in sidan i horisontella delar då används attributet ROWS istället för COLS. Om man dessutom blandar de både kan det se ut så här:
<HTML>
<HEAD><TITLE>Exempel på ramar</TITLE></HEAD>
<FRAMESET ROWS="70,*">
<FRAME SRC="fil1.html" NAME="uppe">
<FRAMESET COLS="200,*">
<FRAME SRC="fil2.html" NAME="nere_v">
<FRAME SRC="fil3.html" NAME="nere_h">
</FRAMESET>
</FRAMESET>
</HTML>
Nu delar vi först upp fönstret i två horisontella delar. Den första 70 pixels stor och kommer att visa fil1.html. Den andra horisontella delen kommer att täcka resten av fönstret. Denna del delas nu upp i två delar som innehåller fil2.html och fil3.html.
Det finns ännu ett sätt att reglera storleken på ramarna. Man kan ange storleken i procent (%) av fönstret. Ett exempel:
<FRAMESET COLS="70%,30%">
Här kommer första vertikala ramen uppta 70 % av fönsterbredden och den andra 30 %. Om procenttalens summa inte blir 100 kommer procenttalen att skalas upp/ned till 100. Det går även bra att blanda procenttal och asterisk (*). T ex:
<FRAMESET COLS="38%,*">
Här delas fönstret in i två bitar varav den första upptar 38 % av fönstret och den andra delen upptar resten.
Som du sett i föregående exempel kan man använda en asterisk (*) för att visa att den rutan ska uppta resten av fönstret. Vad händer om man använder flera asterisker?
<HTML>
<HEAD> <TITLE>Exempel på ramar</TITLE> </HEAD>
<FRAMESET ROWS="*,70,*">
<FRAME SRC="fil1.html" NAME="uppe">
<FRAMESET COLS="*,*">
<FRAME SRC="fil2.html" NAME="vanster">
<FRAME SRC="fil3.html" NAME="hoger">
</FRAMESET>
<FRAME SRC="fil4.html" NAME="nere">
</FRAMESET>
</HTML>
Om du använder mer än en asterisk (*) kommer det att innebära att rutorna delar på det återstående utrymmet. Du kan alltså använda två astersiker (*) om du vill ha två lika stora rutor. Det är bättre än att prova fram pixeltal eftersom alla inte har lika stort fönster som du.
Ännu ett sätt att beskriva storleksförhållandena är:
<FRAMESET COLS="*,3*">
Här upptar första ramen 1/4 av fönstret. 3:an betyder att denna ramen ska ha 3 gånger så mycket utrymme som den första.
Många sidor på nätet har en ram till vänster i fönstret där man snabbt och enkelt kan hoppa mellan olika HTML-dokument. När man klickar på en länk i ramen till vänster dyker sidan inte upp i den ramen utan ramen till höger. Detta ordnas med ett attributet till taggen <A HREF> som heter TARGET. En länk till en annan ram kan se ut så här:
<A HREF="sida4.html" TARGET="nedre_ramen">Nästa sida<A>
Om användaren klickar på länken kommer HTML-dokumentet sida4.html att visas i ramen med namnet nedre_ramen. Ramnamnet som du anger i taggen <FRAME> med attributet NAME kan i princip se ut hur som helst men undvik mellanslag, svenska bokstäver och andra specialtecken.
Det finns vissa värden till attributet TARGET som är fördefinerade. Exempel:
<A HREF="sida2.html" TARGET="_top">
Sidan du länkat till visas över hela skärmen. Detta värde på attributet TARGET ska användas när någon lämnar din sida. Om du till exempel har en länk till Altavista kommer Altavista att visas i den ram där länken finns. Om attributet TARGET däremot sätts till _top kommer Altavista att visas i hela fönstret.
<A HREF="sida2.html" TARGET="_blank">
Länken visas i ett helt nytt fönster.
Observera att dessa specialkommandon endast fungerar med små bokstäver.
| Attribut | Möjliga värden | Förklaring |
| FRAMEBORDER | 0 eller 1(standardvärde) | Bestämmer om en upphöjd kant ska visas runt ramen eller ej. Om värdet sätts till 0 kommer ingen upphöjd kant att synas. |
| FRAMESPACING | Heltal | Styr hur stort avstånd det ska vara mellan ramarna. Om FRAMESPACING sätts till 0 går ramarna ihop. Enbart i Internet Explorer. |
| BORDER | 0 eller 1 | Netscapes svar på FRAMESPACING. Om den sätts till 0 försvinner kanten. Fungerar enbart i senare versioner av Netscape. |
| MARGINWIDHT | Positivt heltal | Bestämmer hur stor vänster och högermarginalen i dokumentet ska vara. Anges i pixels. |
| MARGINHEIGHT | Bestämmer hur stor övre och undre marginalen ska vara. Anges i pixlar. | |
| SCROLLING | yes, no eller auto (standardvärde) | Om användaren inte ser all text i en ruta dyker det automatiskt upp en rullningslist. Om du sätter SCROLLING till yes får rutan alltid rullningslist. Om du sätter SCROLLING till no dyker det aldrig upp någon list. Om SCROLLING=auto dyker det upp en rullningslist när det behövs |
| NORESIZE | Attributet har inget värde utan står ensamt. Innebär att användaren inte kan ändra storleken på rutan som normalt. |
Ofta ser man sidor på nätet som har en speciell sida för dem som inte kan eller vill ha ramar.