Hogyan hozzunk létre keretek html

Hogyan hozzunk létre keretek html

Hogyan hozzunk létre keretek HTML. HTML alapjai kezdőknek. lecke №16

Hello mindenkinek!
Továbbra is szorgalmasan tanulmányozza a HTML alapjait. Örülök, hogy nem dobja alapjait órák HTML.

Ebben a leckében lesz szó, amit a kereteket, és hogyan jönnek létre a HTML.
Tehát nézzük meg, mit keretek HTML.
Keret - egy részlege a böngésző ablak külön területekre, ahol külön HTML dokumentumok tölthető be.

Például, hogy megértsék, hogy a keret a gyakorlatban azt javaslom, hogy nézd meg egy példát. Legyen ez a pár átmenetek:

Nos, mint te? Szeretne megtanulni, hogyan lehet létrehozni egy? Most majd megtanulják, hogyan kell beszúrni keretek HTML dokumentumnak.

Hozzon létre egy keret egy weblapon jelenik meg egy ilyen elrendezést:

Megjegyzés: az elrendezés a frame-kód be van dugva a html-dokumentum helyett a címke :

Ez a fő tartály létrehozására egy keret, amelynek belsejében tartalmaznak más elemeket.
A záró tag kötelező.

  • Oszlopai - függőleges
  • Sorok - Vízszintes

Hogyan hozzunk létre keretek html

Hogyan hozzunk létre keretek html

Az attribútumok oszlopok és sorok jelzik, hogy hány darabot kell osztani a böngésző ablakot. Itt például, hogy osztja a böngésző ablak két függőleges részeket, regisztrálnia kell itt ilyen:

A bal oldali része a képernyő 30% mérete, és a megfelelő - 70%.

Ha azt szeretnénk, hogy szét a böngésző még néhány alkatrész, vesszővel elválasztva fűzze további méretek, például az alábbiak szerint:

Ennek eredményeként, az első függőleges oszlopban 30% lesz a szélessége, a második - 20%, a harmadik - 10%, a negyedik - 40%.

Hogyan hozzunk létre keretek html

Hasonlóképpen, a vízszintes bontásban:

Az első oszlop a vízszintes szélessége 30%, a második - 20%, a harmadik - 10%, a negyedik - 40%.

Hogyan hozzunk létre keretek html

frame tag határozza meg, melyik a HTML dokumentumnak kell betölteni a böngésző ablakban.
Például, meg kell tölteni egy böngésző ablakot, három különböző oldalon «1.html», «2.html», «3.html». frame tag fog kinézni:

Összefoglalva ismerete kereteket. Így a probléma: meg kell osztani a böngésző ablak két részre, és betölteni a két rész egy weboldalt - «1.html» 30%. «2.html» 70%.
Itt kész kód:

Az eredmény:

Hogyan hozzunk létre keretek html

○ linkek keretekben vagy megtanulják használni attribútum «név»

Itt egy példa, ha a regiszter attribútum «név»:

Azonban ez jobb?
Bármely képkocka listában az attribútum «név», ahol szeretné, hogy nyissa ki a másik html-dokumentum

Név «név» attribútum lehet bármilyen. De a jövőben, ha megadja a többi nevek és címkék «frame». megjegyezni, hogy minden egyedi legyen:

Most össze kell kapcsolni, hogy előírja „cél”, vagyis ahol az ablakkeret, hogy az átmenet. Ez a címke «a» listához attribútum «cél»:

„Page 1”, „Page 2” megnyílik az ugyanabban az ablakban, ahol megadhatja a nevét a keret «name =»stepkinblog-ru«» és »Page 3« megnyílik egy keret, amely a nevét «name =” bloggood-ru „»

Feladat: Meg kell létrehozni egy keretet itt ezt az elrendezést:

Hogyan hozzunk létre keretek html

Először hozzon létre három vízszintes keret:

Most add «top.html» és «footer.html»

Az eredmény eddig, mint ez:

Hogyan hozzunk létre keretek html

Most, a «top.html» és «footer.html» hozzátéve «menu.html» és «content.html»:

Mentse a fájlt «index.html»

Készítsen oldal «top.html». «Footer.html». «Menu.html» és «content.html»:

Kód «top.html» fájlt

Kód «footer.html» fájlt

Kód «menu.html» fájlt

Kód «content.html» file:

Kód «autor.html» file:

Itt egy eredmény mentem:

Az általunk használt attribútumok «frame» és ments kézzel nyújtás keretében, és távolítsa el a tekercset «index.html» fájlt.

○ Mi a teendő, ha a keret nem támogatja a böngésző?

Akkor egy üzenetet jelenít meg a felhasználó számára, hogy a felhasználó böngészője nem támogatja a kereteket. Ehhez helyezze be a kulcsszó belső kialakítás <frameset> :</p> <p>Ha kell beszúrni keretablak közvetlenül egy oldalt, amely nem rendelkezik vázszerkezet, erre ott van a címke «iframe»</p> <ul> <li>src - az utat a meglátogatott oldal</li> <li>szélesség - a szélessége a úszó keret</li> <li>magasság - az iFrame magasságát</li> <li>görgetés - görgetősáv<br> - nem - soha nem mutatják a görgetősáv<br> - igen - mindig azt mutatják,<br> - auto - show, ha szükséges</li> <li>összehangolása - a nyomvonal a iframe<br> - bal - bal<br> - jobb - jobb<br> - top - up<br> - alsó - az alábbiakban</li> <li>frameborder - keret körül a iframe<br> - 1 - kapcsoló keret<br> - 0 - kapcsolja ki a keret</li> </ul> <p>Itt fog kinézni «iframe» tag attribútumok:</p> <p>Ha a böngészője nem támogatja a kereteket, akkor helyezze a szöveg „Hoppá! Az Ön böngészője nem támogatja a kereteket. „A címkék között <iframe></iframe> .<br> Úgy fog kinézni:</p> <p>Például tegyük hozzá, hogy a fájl «content.html» iframe:</p> <hr> </div> <div class="extra"> <div class="clear"></div> </div> </article> </div> </div> </div> </div> <div id="sidebar" class="col-1-3"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/hogyan-kell-felhlvni-a-ninja-teknos.html">Hogyan kell felhívni a ninja teknős</a></li> <li><a href="/articles/auto-inverter-elve-es-a-valasztas.html">Autó inverter elve és a választás</a></li> <li><a href="/articles/kiszamltasa-a-gerenda.html">kiszámítása a gerenda</a></li> <li><a href="/articles/szabalyok-arukapcsolas-ov.html">Szabályok árukapcsolás öv</a></li> <li><a href="/articles/hogyan-juthat-el-a-szomszed-magyarorszag-a.html">Hogyan juthat el a szomszéd, Magyarország a folyosón a szerelem - számítógépes és konzolos játékok</a></li> </ul> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer kidrfgnb"> <div class="row"> <div class="col-full"> <div class="wrap-col"> <div class="box"> <div class="content"> <ul> <li><a href="/articles/betonaljzat-fajtai-es-jellemzoi.html">Betonaljzat fajtái és jellemzői</a></li> <li><a href="/articles/mi-a-teendo-hetfon.html">Mi a teendő, hétfőn</a></li> <li><a href="/articles/kenet-utolso-kenet-a-nagybojt.html">Kenet (utolsó kenet) a nagyböjt</a></li> <li><a href="/articles/pomeraniai-egy-lelrast-a-fajta-foto-hogyan.html">Pomerániai - egy leírást a fajta, fotó, hogyan válasszuk ki a kölyök, az árak, az élelmiszer és a gondozás, a képzés és</a></li> <li><a href="/articles/hogyan-kiegyeneslteni-haj-vas-otthon.html">Hogyan kiegyenesíteni haj vas otthon</a></li> </ul> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>&copy; Copyright 2026 | Minden jog fenntartva</p> </div> </footer> </div> <style> #cookieNoticeOverlay{position:fixed;inset:0;z-index:999999;background:rgba(0,0,0,.72);display:none;align-items:center;justify-content:center;padding:20px}#cookieNoticeBox{width:100%;max-width:520px;background:#fff;border-radius:18px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35);font-family:Arial,sans-serif;text-align:center}#cookieNoticeBox h2{margin:0 0 14px;font-size:24px;line-height:1.25;color:#111}#cookieNoticeBox p{margin:0 0 22px;font-size:16px;line-height:1.5;color:#333}#cookieNoticeOk{display:inline-block;width:100%;max-width:240px;border-radius:12px;padding:14px 22px;background:#111;color:#fff;font-size:17px;font-weight:700;text-decoration:none;box-sizing:border-box;cursor:pointer}#cookieNoticeOk:hover{background:#333}body.cookie-notice-locked{overflow:hidden} </style> <div id="cookieNoticeOverlay"> <div id="cookieNoticeBox" role="dialog" aria-modal="true"> <h2>Cookie-k az oldalon</h2> <p>Cookie-kat használunk a webhely megfelelő működéséhez és a szolgáltatás javításához.</p> </div> </div> <script> (function(){var storageKey='cookie_notice_ok_until';var showAgainAfter=24*60*60*1000;var now=Date.now();function getAcceptedUntil(){try{return Number(localStorage.getItem(storageKey))||0}catch(e){return 0}} function setAcceptedUntil(value){try{localStorage.setItem(storageKey,String(value))}catch(e){}} if(getAcceptedUntil()>now){return} var overlay=document.getElementById('cookieNoticeOverlay');var okLink=document.getElementById('cookieNoticeOk');if(!overlay||!okLink){return} function showNotice(){overlay.style.display='flex';document.body.classList.add('cookie-notice-locked')} function closeNotice(){overlay.style.display='none';document.body.classList.remove('cookie-notice-locked')} okLink.addEventListener('click',function(event){event.preventDefault();setAcceptedUntil(Date.now()+showAgainAfter);var rawHref=(okLink.getAttribute('href')||'').trim();if(rawHref==='#'||rawHref===''){closeNotice();return} var targetUrl=new URL(rawHref,window.location.origin).href;window.open(targetUrl,'_blank','noopener,noreferrer');closeNotice()});overlay.addEventListener('click',function(event){event.stopPropagation()});document.addEventListener('keydown',function(event){if(overlay.style.display==='flex'&&event.key==='Escape'){event.preventDefault();event.stopPropagation()}},!0);showNotice()})() </script></body> </html>