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> </div> <div class="extra"> <div class="info"><a href="/articles/hogyan-kupno-es-terjedelmes-hajat-otthon.html">előző</a> &#9672; <a href="/articles/hogyan-hozzunk-letre-egy-sablont-a-helyen-majd.html">a következő</a></div> <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="heading"><h4 class="title">Menu</h4></div> <div class="content"> <a href="/tags/a.html" class="tag-links" title="392" style="font-size: 20pt;">a</a> <a href="/tags/a-kornyezet.html" class="tag-links" title="158" style="font-size: 13pt;">a környezet</a> <a href="/tags/absztrakt.html" class="tag-links" title="141" style="font-size: 12pt;">absztrakt</a> <a href="/tags/arc.html" class="tag-links" title="124" style="font-size: 12pt;">arc</a> <a href="/tags/auto.html" class="tag-links" title="156" style="font-size: 13pt;">autó</a> <a href="/tags/az-elet.html" class="tag-links" title="104" style="font-size: 11pt;">az élet</a> <a href="/tags/baba.html" class="tag-links" title="118" style="font-size: 12pt;">baba</a> <a href="/tags/csirke.html" class="tag-links" title="100" style="font-size: 11pt;">csirke</a> <a href="/tags/eskuvo.html" class="tag-links" title="243" style="font-size: 16pt;">esküvő</a> <a href="/tags/festek.html" class="tag-links" title="147" style="font-size: 13pt;">festék</a> <a href="/tags/foto.html" class="tag-links" title="285" style="font-size: 17pt;">fotó</a> <a href="/tags/fotok.html" class="tag-links" title="167" style="font-size: 13pt;">fotók</a> <a href="/tags/ferfi.html" class="tag-links" title="134" style="font-size: 12pt;">férfi</a> <a href="/tags/gyermek.html" class="tag-links" title="193" style="font-size: 14pt;">gyermek</a> <a href="/tags/haj.html" class="tag-links" title="244" style="font-size: 16pt;">haj</a> <a href="/tags/hogy.html" class="tag-links" title="169" style="font-size: 13pt;">hogy</a> <a href="/tags/haz.html" class="tag-links" title="100" style="font-size: 11pt;">ház</a> <a href="/tags/ingyen.html" class="tag-links" title="118" style="font-size: 12pt;">ingyen</a> <a href="/tags/internet.html" class="tag-links" title="117" style="font-size: 12pt;">internet</a> <a href="/tags/javltas.html" class="tag-links" title="103" style="font-size: 11pt;">javítás</a> <a href="/tags/jobb.html" class="tag-links" title="164" style="font-size: 13pt;">jobb</a> <a href="/tags/kezek.html" class="tag-links" title="203" style="font-size: 14pt;">kezek</a> <a href="/tags/kezeles.html" class="tag-links" title="143" style="font-size: 12pt;">kezelés</a> <a href="/tags/kutya.html" class="tag-links" title="164" style="font-size: 13pt;">kutya</a> <a href="/tags/kez.html" class="tag-links" title="402" style="font-size: 21pt;">kéz</a> <a href="/tags/kezikonyvek.html" class="tag-links" title="101" style="font-size: 11pt;">kézikönyvek</a> <a href="/tags/kornyezet.html" class="tag-links" title="126" style="font-size: 12pt;">környezet</a> <a href="/tags/macska.html" class="tag-links" title="140" style="font-size: 12pt;">macska</a> <a href="/tags/macskak.html" class="tag-links" title="125" style="font-size: 12pt;">macskák</a> <a href="/tags/mit.html" class="tag-links" title="99" style="font-size: 11pt;">mit</a> <a href="/tags/miert.html" class="tag-links" title="146" style="font-size: 13pt;">miért</a> <a href="/tags/munka.html" class="tag-links" title="148" style="font-size: 13pt;">munka</a> <a href="/tags/otthon.html" class="tag-links" title="513" style="font-size: 24pt;">otthon</a> <a href="/tags/recept.html" class="tag-links" title="98" style="font-size: 11pt;">recept</a> <a href="/tags/receptek.html" class="tag-links" title="170" style="font-size: 13pt;">receptek</a> <a href="/tags/shkolopediya-eloadas.html" class="tag-links" title="136" style="font-size: 12pt;">shkolopediya előadás</a> <a href="/tags/studopediya.html" class="tag-links" title="144" style="font-size: 12pt;">studopediya</a> <a href="/tags/szerelem.html" class="tag-links" title="118" style="font-size: 12pt;">szerelem</a> <a href="/tags/szamltogep.html" class="tag-links" title="105" style="font-size: 11pt;">számítógép</a> <a href="/tags/terhesseg.html" class="tag-links" title="122" style="font-size: 12pt;">terhesség</a> <a href="/tags/tiszta.html" class="tag-links" title="111" style="font-size: 11pt;">tiszta</a> <a href="/tags/otletek.html" class="tag-links" title="132" style="font-size: 12pt;">ötletek</a> <a href="/tags/utmutato.html" class="tag-links" title="158" style="font-size: 13pt;">útmutató</a> <a href="/tags/o.html" class="tag-links" title="150" style="font-size: 13pt;">ő</a> </div> </div> <div class="box"> <div class="content"> <div class="box"> <div class="content"> </div> </div> </div> </div> <div class="box"> <div class="heading"><h4 class="title">Cikk címkék</h4></div> <div class="content"> <a href="/tags/keretek-html.html">keretek html</a>, <a href="/tags/keretes-html-peldakat-keretek-megteremtese-html.html">keretes html példákat keretek megteremtése html</a>, <a href="/tags/hogyan-keretek-html.html">hogyan keretek html</a>, <a href="/tags/letrehozasa-keretek-html-peldat.html">létrehozása keretek html példát</a>, <a href="/tags/hogyan-kell-letrehozni-keretek-html.html">hogyan kell létrehozni keretek html</a>, <a href="/tags/html-frame-kod.html">html frame-kód</a>, <a href="/tags/hogyan-kell-beszurni-egy-keret-html.html">hogyan kell beszúrni egy keret html</a>, <a href="/tags/keretek-hasznalata-html.html">keretek használata html</a>, <a href="/tags/iframe-html.html">iframe html</a>, <a href="/tags/html.html">html</a>, <a href="/tags/alapltvanyok.html">alapítványok</a>, <a href="/tags/letrehozhat-kereteket.html">létrehozhat kereteket</a>, <a href="/tags/hogy-a-bongeszo-tamogatja-a-kereteket.html">hogy a böngésző támogatja a kereteket</a>, <a href="/tags/tartalom-html-fajlban-menu-html-tartalom.html">«tartalom html» fájlban «menü html» «tartalom</a> </div> </div> </div> </div> </div> </div> </section> <footer> <div class="wrap-footer pominodiko"> <div class="row"> <div class="col-1-1"> <div class="wrap-col"> <div class="box"> <div class="content"> </div> </div> </div> </div> </div> </div> <div class="copyright"> <p>Copyright © 2024</p> <script> new Image().src = "https://counter.yadro.ru/hit;blogotirni?r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";h"+escape(document.title.substring(0,150))+ ";"+Math.random();</script> </div> </footer></div> </body> </html>