Rammer i HTML er en måte å dele nettleservinduet inn i flere seksjoner, som hver kan laste inn og vise et annet HTML-dokument. I denne artikkelen vil vi se praktiske eksempler på rammer i HTML.

Selv om bruken har gått ned de siste årene på grunn av innføringen av mer moderne og fleksible teknikker, som CSS og JavaScript, kan fortsatt finnes på enkelte nettsteder, spesielt de som ble opprettet på 1990-tallet og begynnelsen av 1990-tallet. det av 2000.

Hvordan fungerer rammer eller rammer i HTML?

Rammer består av to elementer:

1. Rammesett: Elementet brukes til å dele nettleservinduet inn i rektangulære deler, som hver kan laste inn sitt eget HTML-dokument.

2. rammer: Elementet brukes innenfor en for å definere hver av de individuelle seksjonene. Og den sender for å ringe et annet dokument som er lastet inn i rammesettet.

   instagram story viewer

• Følg med: iFrame-eksempler

Hvordan lage rammer i HTML

For å lage et HTML-dokument med rammer, følg to veldig enkle trinn:

1. Lag et HTML-dokument som definerer strukturen til rammene ved hjelp av elementet. For eksempel:

Fil 1: frameset.html

2. Lag ett eller flere HTML-dokumenter som skal lastes inn i rammene.

Fil 2: frame1.html

Dette er ramme 1

Fil 3: frame2.html

Dette er Frame 2

Rammeattributter i HTML

Noen av de viktigste elementattributtene er:

• rulling: Dette attributtet brukes til å kontrollere utseendet til rullefeltene i rammen. Den kan ha verdiene "auto", "ja" eller "nei".

• noresize: Dette attributtet brukes for å hindre brukeren i å endre størrelsen på rammen.

• yam: Dette attributtet brukes til å gi rammen et navn, som kan være nyttig for å referere til rammen i lenker og skript.

• src: Dette attributtet brukes til å spesifisere URL-en til HTML-dokumentet som skal lastes inn i rammen.

• ramme grense: Dette attributtet spesifiserer om rammer skal ha kantlinjer eller ikke. Mulige verdier er "1" (for å vise grenser) eller "0" (for å ikke vise grenser). For eksempel, .

• grense: Dette attributtet definerer bredden på grensen mellom rammene i piksler. For eksempel, vil lage en 5px kantlinje mellom rammene.

• rammeavstand: Dette attributtet ligner på grense. Den definerer også mellomrommet mellom rammene i piksler. For eksempel, vil sette et gap på 10 px mellom rammene.

• grensefarge: Dette attributtet lar deg endre kantfargen på rammene. Enhver gyldig farge kan spesifiseres. For eksempel, vil gjøre kanten til rammene rød.

Brukseksempel:

Hvordan koble til en bestemt ramme

Vi kan åpne en lenke i en bestemt ramme ved å bruke attributtet mål I etiketten. Verdien av mål skal være det samme som rammenavnet (yam attributt til ). For eksempel:

i menu.html
Side 1
Side 2

I dette tilfellet, ved å klikke på koblingene "Side 1" eller "Side 2" i meny-rammen, vil den tilsvarende siden lastes inn i "innholdsrammen".

Hvordan bryte rammene

Hvis du vil ha en lenke for å åpne en side utenfor rammesettet (dvs. erstatte hele rammesettet), kan du bruke spesialverdien _topp for attributtet mål. For eksempel:

i menu.html
gå ut av rammer

Når du klikker "Exit Frames", vil nettleseren laste "pageOutofFrames.html" i hele vinduet, og erstatte rammesettet.

Eksempel for å dele skjermen i to kolonner med rammer

Dette eksemplet deler skjermen i to like store kolonner. Hver kolonne laster inn en annen HTML-side.

Eksempel for å lage et navigasjonssidefelt med rammer

Dette eksemplet lager en sidefelt som tar opp 25 % av skjermen og brukes til navigering. Resten av skjermen brukes til å vise hovedinnholdet.

Eksempel for å dele opp skjermen i rader og kolonner

Dette mer komplekse eksemplet deler skjermen i fire like deler. Hver seksjon laster inn en annen HTML-side.

Eksempel på toppnavigering med HTML-rammer

Lag en fil som definerer to rammer på rad. De to filene den definerer er: én for navigasjonen (som tar opp 20 % av vinduets bredde) og én for hovedinnholdet (som tar opp resten av vinduets bredde).

Deretter må du opprette filene "navigation.html" og "content.html". For eksempel kan "navigation.html" se slik ut:

Side 1

Side 2

Side 3


Og "content.html" kan være noe slikt:

Velkommen til vår nettside!

Her kommer innholdet på siden som er valgt i navigasjonen.

I dette tilfellet, når du klikker på en lenke i "navigation.html", lastes den tilsvarende siden inn i "innhold"-rammen.