Kehyskoodi. Iframe ja Frame - mitä ne ovat ja miten kehyksiä käytetään parhaiten HTML-muodossa

Elementti

Kehykset

Mitä se tekee?

Tärkein ero

Yllä olevassa merkinnässä riittää, että korvaat sivuston osoitteen millä tahansa toisella ja säädät tarvittaessa kehyksen kokoa.

Kehykset ovat HTML-elementtejä, joiden avulla voit jakaa verkkoselainikkunan useisiin itsenäisiin ikkunoihin, joista jokainen voi ladata erillisen HTML-dokumentin. Jokaisella tällaisella ikkunalla (kehyksellä) voi olla omat vierityspalkit ja se voi toimia itsenäisesti muista itsenäisistä ikkunoista tai päinvastoin ohjata niiden sisältöä. Niiden avulla voidaan järjestää valikko, joka sijaitsee jatkuvasti yhdessä ikkunassa, kun taas itse tiedot sijaitsevat toisessa ikkunassa. Käyttäjät voivat käyttää valikkoa milloin tahansa ilman, että heidän on palattava siihen edellinen sivu valitaksesi toisen valikkokohdan. Kehysten avulla voit "kiinnittää" kuvia tai muita staattisia käyttöliittymäelementtejä selainikkunaan samalla kun muu sivu rullaa kehyksen sisällä.
On kuitenkin syytä huomata, että kehyksiä pidetään nykyään vanhentuneena työkaluna, ja kehyksiä sisältäviä sivustoja pidetään nykyään epäarvoisina, koska ammattimaiset webmasterit eivät koskaan käytä kehyksiä projekteissaan. Kehyksissä on useita pahamaineisia ongelmia. Ne hämmentävät hakukoneita esimerkiksi siksi, että sisältöä sisältävät sivut eivät linkitä muihin asiakirjoihin. Jos haluat vastaanottaa vieraita hakukoneet, unohda kehykset. Käyttäjän on mahdotonta sijoittaa haluamaansa sivua selaimen kirjanmerkkiosioon, koska kehykset piilottavat sen sivun osoitteen, jolla hän sijaitsee, ja näyttävät aina vain verkkosivuston osoitteen. Tästä syystä ne aiheuttavat ongelmia selaimille historian seurannassa, eivätkä ne myöskään ole kovin mukautuvia eri näyttökokoihin ja mobiililaitteisiin.
Huolimatta siitä, että kehyksiä sisältäviä projekteja löytyy World Wide Web Harvemmin HTML:n oppiminen olisi epätäydellistä ilman kehysten aihetta. Kehyksillä ja niiden haitoilla on myös joitain etuja, jotka eivät salli meidän hylätä tätä tekniikkaa lupaamattomana.

Kehysten luominen

Kehyksineen HTML-dokumentin rakenne on ulkonäöltään hyvin samanlainen kuin tavallisen HTML-dokumentin muoto. Kuten tavallisessa HTML-asiakirjassa, kaikki koodi sijoitetaan parillisten tunnisteiden väliin Ja , ja säiliössä otsikot sijaitsevat. Suurin ero kehystetyn asiakirjan ja tavallisen HTML-dokumentin välillä on se, että asiakirjassa on kehyksiä tunnisteen sijaan parillinen tunniste on käytössä (englanninkielisestä kehyssarjasta - joukko kehyksiä).
Seuraava esimerkki näyttää kehyksiä sisältävän HTML-dokumentin rakenteen:

Esimerkki: HTML-dokumenttirakenne kehyksillä

• Kokeile itse »

Yllä olevassa esimerkissä sivu sisältää kolme aluetta, joista jokainen ladataan aluksi HTML-dokumenteilla frame_top.html, frame_left.html ja frame_right.html. HTML-dokumenttien lisäksi kehys voi sisältää myös grafiikkaa. Tätä varten sinun on määritettävä vastaavan kuvan osoite attribuutissa src, Esimerkiksi src="image.gif". Huomaa, että elementti käytetty ilman sulkulappua.
Säiliön sisällä voi sisältää vain tunnisteita tai muu joukko kehyksiä, jotka on peitetty tunnisteilla Ja .
Tag on seuraavat attribuutit:

• rivit— kuvaa kuinka sivu jaetaan riveihin:
• sarakkeet— kuvaa kuinka sivu jaetaan sarakkeisiin:

Attribuuttien merkityksessä rivit Ja sarakkeet Ei ole tarpeen ilmoittaa rivien tai sarakkeiden lukumäärää, vaan kehysten leveyttä ja korkeutta. Kaikki luettelon arvot on erotettu pilkuilla. Mitat voidaan määrittää absoluuttisina yksiköinä (pikseleinä) tai prosentteina:

• sarakkeet="20%, 80%"— selainikkuna jaetaan kahteen sarakkeeseen määritteen avulla sarakkeet, vasen sarake vie 20 % ja oikea 80 % selainikkunasta.
• rivit="100, *" Selainikkuna jaetaan kahteen vaakasuuntaiseen ikkunaan määritteen avulla rivit, ylempi ikkuna vie 100 pikseliä ja alaikkuna vie tähtimerkin määrittämän jäljellä olevan tilan.

Kuten tästä esimerkistä voidaan nähdä, säiliö attribuutilla rivit luo ensin kaksi vaakasuuntaista kehystä ja korvaa toisen kehyksen toisella joka jakaa alimman vaakakehyksen kahdeksi sarakkeeksi määritteen avulla sarakkeet, vasen sarake vie 20 % ja oikea 80 % selainikkunasta.
Jos selain ei tue kehyksiä, ikkunassa näkyy tunnisteiden välissä oleva teksti </b> Ja <b> . Kaikki tagien välissä </b> Ja <b> , kehyksiä tukevat selaimet jättävät huomioimatta. Siksi kehittäjän on kirjoitettava koodi, joka monistaa kehysten sisällön muilla tavoilla, ja sijoitettava tämä koodi säiliöön </b>, kaikki käyttäjät näkevät sen verkkosivun. <br>Kuten jo todettiin, paritonta tunnistetta käytetään erillisen kehyksen lisäämiseen asiakirjaan <b><frame> </b>. Attribuutti <b>src</b> määrittää asiakirjan, joka näytetään tämän kehyksen sisällä, esimerkiksi: <frame src="frame_top.html">. Jos attribuutti <b>src</b> puuttuu, tyhjä kehys näytetään.</p> <h2>Reunukset tai väli kehysten välillä</h2> <p>Selain näyttää oletusarvoisesti harmaan, yleensä 3D-viivareunuksen kehysten välissä, jonka avulla vierailijat voivat säätää kehyksen kokoa. <br>Kehyksen reunaa voidaan käsitellä kuten mitä tahansa muuta kehyselementtiä. Tätä varten on useita elementtiattribuutteja <b><frameset> </b>, jonka avulla voit mukauttaa kehysten reunoja. Reunusviivan paksuus määräytyy attribuutin mukaan <b>rajaa</b>. Oletusreunuksen paksuusarvo on viisi. <br>Jos haluat piilottaa kehyksen reunan, sinun on joko asetettava reunan leveyden arvoksi nolla tai asetettava attribuutille arvo "no" tai "0". <b>kehyskehys</b>. Attribuutti <b>kehyskehys</b> voi olla vain kaksi vastakkaista merkitystä. Jos määritteen arvo <b>kehyskehys</b> on yhtä kuin "kyllä" tai "1", kehyksen reuna näytetään, ja jos "0" tai "ei", ei. Huomaa, että määritteen arvot <b>kehyskehys</b> vaihdella <a href="https://ermake.ru/fi/kak-vklyuchit-cookies-v-raznyh-brauzerah-chto-takoe-faily-i-kak-ustanovit/">eri selaimet</a>. Ratkaise tämä ongelma käyttämällä attribuuttia kahdesti <b>kehyskehys</b>, ja joissakin selaimissa sinun on myös lisättävä attribuutti <b>kehysvälit</b> arvolla "0":</p><p> <frameset frameborder="0" framespacing="0" frameborder="no" border="0"> </p><p>Seuraavassa esimerkissä poistamme kehysten välisen rajan:</p> <h3>Esimerkki: Kehysten välisen rajan poistaminen</h3> <ul><li>Kokeile itse »</li> </ul><table><tr><td style="width: 10px;background-color:green;color: white;">frame_left</td> <td style="width: 90%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Kehykset ilman reunuksia</title> </head> <frameset cols="100,*" frameborder="0" framespacing="0" frameborder="no" border="0"> <frame src="frame_left.html" name=" frame_left" > <frame src="frame_right.html" name="frame_right" > </frameset> </html></p> <p>Jos poistat kehysten välisen rajan, vierailijat eivät voi muuttaa kehyksen kokoa selaimessa. Voit myös estää kehyksen koon muuttamisen säilyttämällä reunat määritteen avulla <b>nosta kokoa</b>:</p><p> <frame src="frame_left.html" noresize> </p><p>Attribuutin käyttö <b>reunaväri</b> Voit muuttaa kehyksen reunan väriä, sinun tarvitsee vain määrittää koodi tai vastaava varatun värin nimi. <br>Alla on esimerkki HTML-sivusta, joka sisältää yllä kuvatut kehyksen reunavalvontaattribuutit: reunan väri on punainen, yläkehyksen kokoa ei voi muuttaa:</p> <h3>Esimerkki: Frame Border Control</h3> <ul><li>Kokeile itse »</li> </ul><table style="border-collapse:collapse;"><tr><td style="border-bottom: 4px solid red;background-color:blue;color: white;" colspan="2">frame_top</td> </tr><tr><td style="border-right: 4px solid red;width: 20%;background-color:green;color: white;">frame_left</td> <td style="width: 80%;background-color:lime;color: white;">frame_right</td> </tr></table><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Frame Border Management</title> </head> <frameset rows="150, *" border="10" bordercolor="red" frameborder="1" frameborder="yes"> <frame src="frame_top.html" noresize> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html"> </frameset> </frameset> </html></p> <p>Jos haluat sijoittaa kehyksen sisällä näkyvän sivun lähemmäs sen reunoja tai päinvastoin siirtää sitä kauemmaksi, muuta attribuutteja <b>marginaalikorkeus</b> Ja <b>marginaalin leveys</b> tag <b><frame> </b>. Attribuutti <b>marginaalikorkeus</b> määrittää täytteen kehyksen sisällön ja sen ylä- ja alareunojen välillä. Syntaksi:</p><p> <frame marginheight="число"> </p><p>Attribuutti <b>marginaalin leveys</b> määrittää täytteen kehyksen sisällön ja sen oikean ja vasemman reunan välillä. Syntaksi:</p><p> <frame marginwidth="число"> </p><p>Tämä html-rivi esimerkiksi sijoittaa näytettävän sivun lähelle kehyksen reunaa:</p> <p>Jos sivulla näkyy vierityspalkki, jota et halua, voit ratkaista ongelman määrittämällä määritteen <b>vierittää</b>="no" tagissa <b><frame> </b>. Muista kuitenkin, että jos kehys ei ole tarpeeksi suuri näyttämään koko sivun sisältöä, vierailija ei voi vierittää näytettyä sivua.</p> <h2>Linkit kehysten sisällä</h2> <p>Linkin seuraaminen tavallisessa HTML-dokumentissa tapahtuu seuraavasti: napsauta linkkiä ja nykyinen asiakirja korvataan uudella nykyisessä tai uudessa selainikkunassa. Kehyksiä käytettäessä HTML-dokumenttien latauskaavio eroaa tavallisesta, ja suurin ero on kyky ladata HTML-dokumentti yhteen kehykseen toisesta kehyksestä. <br>Jos haluat ladata asiakirjan tiettyyn kehykseen, käytä määritettä <b>tavoite</b> tag <b><a> </b>. Attribuuttiarvona <b>tavoite</b> käytetään sen kehyksen nimeä, johon määritteen määrittelemä asiakirja ladataan <b>nimi</b> tag <b><frame> </b>. On myös syytä huomata, että kehyksen nimen tulee alkaa joko numerolla tai latinalaisella kirjaimella. Seuraavia nimiä käytetään varattuina niminä:</p> <p>Ulkoisten linkkien kohdalla sinun tulee asettaa target-attribuutiksi joko _top tai _blank varmistaaksesi, että kolmannen osapuolen projektit eivät näy kehyksissäsi vaan täyttävät koko selainikkunan.</p> <p>Seuraava esimerkki esittää HTML-dokumentin, jossa oikea kehys lataa sivun yläkehykseen sijoitetusta linkistä. Linkki asiakirjaan, joka avautuu oikeaan kehykseen:</p><p> <a href="http://www.google.com" target="frame_right">Google</a> </p><p>Oikealle kehykselle annetaan nimi <i>frame_right</i>:</p><p> <frame src="frame_right.html" name="frame_right"> </p><p>Lataa asiakirja määritettyyn kehykseen käyttämällä konstruktia <i>target="frame_right"</i>, kuten esimerkissä näkyy:</p> <h3>Esimerkki: Linkki toiseen kehykseen</h3> <ul><li>Kokeile itse »</li> </ul><p> <!DOCTYPE html> <html><br><head><br><meta charset="UTF-8"> <title>Linkki toiseen kehykseen</title> </head> <frameset rows="100, *"> <frame src="frame_topic.html"> <frameset cols="20%, 80%"> <frame src="frame_left.html"> <frame src="frame_right.html" name="frame_right"> </frameset> <noframes> <p>Selaimesi ei näytä kehyksiä</p>