Как да създадете кадъра в HTML

Как да създадете кадъра в HTML

Как да се създаде рамки за HTML. Основни положения на HTML за начинаещи. урок №16

Здравейте на всички!
Ние продължаваме да усърдно изучават основите на HTML. Радвам се, че не се хвърлят на основите на уроци по HTML.







В този урок ще разгледаме какви рамки и как те са създадени в HTML.
Така че, нека да се дефинира какво рамки за HTML.
Рамки - подразделение на прозореца на браузъра в отделни области, в които могат да се зареждат отделни HTML документи.

Например, за да се разбере как рамката на практика, предлагам да разгледаме един пример. Направете го няколко преходи:

Е, като вас? Искате ли да научите как да създадете? Сега ще научите как да поставите рамки в HTML-документ.

Създаване на рамка на уеб страница се показва на такова оформление:

Забележка: оформлението на кода на рамката се вмъква в HTML-документа вместо маркера :

Това е основната контейнера за създаване на рамка, вътре в която да съдържа и други елементи.
Маркерът за затваряне задължителен.

  • Графи - вертикални
  • Редове - Хоризонтални

Как да създадете кадъра в HTML

Как да създадете кадъра в HTML

колони и редове Тогава атрибутите показват колко парчета да раздели прозореца на браузъра. Ето, например, да се разделят на прозореца на браузъра на две вертикални части, трябва да се регистрирате тук, така че:

Лявата част на екрана е 30% по размер, а в дясно - 70%.

Ако искате да се раздели от браузъра, за още няколко части, разделени със запетаи добавите допълнителни измерения, например, както следва:

В резултат на това на първата вертикална колона ще бъде 30% от ширината, а вторият - 20%, третият - 10%, на четвърто - 40%.

Как да създадете кадъра в HTML

По същия начин, хоризонталата разбити:

В първата колона е хоризонталната ширина на 30%, а вторият - 20%, третият - 10%, на четвърто - 40%.

Как да създадете кадъра в HTML






кадър таг определя кои HTML-документ трябва да бъде заредена в прозореца на браузъра.
Например, ние трябва да се зареди в прозореца на браузъра, три различни страници «1.html», «2.html», «3.html». кадър таг ще изглежда така:

За да обобщим знанията на кадрите. По този начин, проблемът: необходимо е да се разделят на прозореца на браузъра на две части и се зарежда в тези две части на една уеб страница - «1.html» 30%. «2.html» 70%.
Тук е готов код:

Резултатът е:

Как да създадете кадъра в HTML

○ Връзки в рамки или да се научат да използват атрибут «име»

Ето един пример, ако регистъра атрибут «име»:

Въпреки това, той е по-добре?
За всеки списък рамка атрибута «име», където искате да го отворите в другата HTML-документ

Името «име» атрибут може да бъде всеки. Но в бъдеще, ако ще даде останалата част от имената и таговете «рамка». не забравяйте, че всеки трябва да е уникално:

Сега трябва да се свърже към предписва "мишена", което е, в която рамката на прозореца е да се направи прехода. За този етикет «а» списък на атрибут «цел»:

"Page 1", "Страница 2" ще се отвори в същия прозорец, където можете посочва името на рамката «име =" stepkinblog-RU "» и "Page 3" ще бъде открита в друга рамка, което е било името «име =" bloggood-RU "»

Задача: Необходимо е да се създаде рамка тук, на тази оформление:

Как да създадете кадъра в HTML

Първо, създайте три хоризонтална рамка:

Сега добавете «top.html» и «footer.html»

Резултатът до момента е така:

Как да създадете кадъра в HTML

Сега, между «top.html» и «footer.html» добавяне на «menu.html» и «content.html»:

Запазете файла като «index.html»

Създаване на страници «top.html». «Footer.html». «Menu.html» и «content.html»:

Код «top.html» файл

Код «footer.html» файл

Код «menu.html» файл

Код «content.html» файл:

Код «autor.html» файл:

Ето един резултат отидох:

Ние използваме атрибутите на «рамка» и забрани ръчно разтягане рамка и премахване на свитъка в «index.html» файл.

○ Какво да правя, ако рамките не се поддържат от браузъра?

Можете да покажете съобщение на потребителя, че браузърът на потребителя не поддържа рамки. За да направите това, поставете маркера вътре дизайн <frameset> :</p> <p>Ако трябва да поставите прозорец рамка директно към страница, която не разполага с рамкова конструкция, за това има на етикета «вградена рамка»</p> <ul> <li>SRC - пътя към страница, която посещавате</li> <li>ширина - ширината на плаващата</li> <li>височина - височината на вградена рамка</li> <li>превъртане - лента за превъртане<br> - не - никога не се покаже лентата за превъртане<br> - Да - винаги показват<br> - авто - шоу, ако е необходимо</li> <li>подравняване - привеждането на вградена рамка<br> - лявото - ляво<br> - Точно така - десен<br> - отгоре - до<br> - отдолу - долу</li> <li>FRAMEBORDER - рамка около вградена рамка<br> - 1 - ключ кадър<br> - 0 - изключване на рамката</li> </ul> <p>Тук тя ще изглежда като «вградена рамка» таг атрибути:</p> <p>Ако вашият браузър не поддържа рамки, можете да вмъкнете текст "Ами сега! Вашият браузър не поддържа фреймове. "Между таговете <iframe></iframe> .<br> Тя ще изглежда така:</p> <p>Например, нека да добавите към файл «content.html» вградената рамка:</p> <br> <br> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8686842323494376" data-ad-slot="8576168847" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="9162386769"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br> </div> <div class="extra"> <div class="info"><a href="/articles/kak-da-se-izchisli-brojat-na-blokove-za-stroezh-na.html">Предишен</a> &#9672; <a href="/articles/nevropsihologija-tova-e-psihologicheski.html">Следващото</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">Меню</h4></div> <div class="content"> <a href="/tags/shkolopediya-lekcija.html" class="tag-links" title="134" style="font-size: 16pt;">shkolopediya лекция</a> <a href="/tags/studopediya.html" class="tag-links" title="144" style="font-size: 17pt;">studopediya</a> <a href="/tags/blgarija.html" class="tag-links" title="105" style="font-size: 14pt;">България</a> <a href="/tags/abstrakten.html" class="tag-links" title="138" style="font-size: 16pt;">абстрактен</a> <a href="/tags/bezplatno.html" class="tag-links" title="194" style="font-size: 19pt;">безплатно</a> <a href="/tags/biznes.html" class="tag-links" title="111" style="font-size: 15pt;">бизнес</a> <a href="/tags/boja.html" class="tag-links" title="132" style="font-size: 16pt;">боя</a> <a href="/tags/bremennost.html" class="tag-links" title="128" style="font-size: 16pt;">бременност</a> <a href="/tags/vidove.html" class="tag-links" title="106" style="font-size: 14pt;">видове</a> <a href="/tags/dete.html" class="tag-links" title="114" style="font-size: 15pt;">дете</a> <a href="/tags/deca.html" class="tag-links" title="243" style="font-size: 22pt;">деца</a> <a href="/tags/dizajn.html" class="tag-links" title="105" style="font-size: 14pt;">дизайн</a> <a href="/tags/dom.html" class="tag-links" title="240" style="font-size: 22pt;">дом</a> <a href="/tags/dumi.html" class="tag-links" title="133" style="font-size: 16pt;">думи</a> <a href="/tags/zhivot.html" class="tag-links" title="141" style="font-size: 16pt;">живот</a> <a href="/tags/zashho.html" class="tag-links" title="139" style="font-size: 16pt;">защо</a> <a href="/tags/internet.html" class="tag-links" title="134" style="font-size: 16pt;">интернет</a> <a href="/tags/kakvo.html" class="tag-links" title="178" style="font-size: 19pt;">какво</a> <a href="/tags/kola.html" class="tag-links" title="106" style="font-size: 14pt;">кола</a> <a href="/tags/kompjutr.html" class="tag-links" title="117" style="font-size: 15pt;">компютър</a> <a href="/tags/kosa.html" class="tag-links" title="233" style="font-size: 22pt;">коса</a> <a href="/tags/kotka.html" class="tag-links" title="127" style="font-size: 15pt;">котка</a> <a href="/tags/kotki.html" class="tag-links" title="141" style="font-size: 16pt;">котки</a> <a href="/tags/kuche.html" class="tag-links" title="151" style="font-size: 17pt;">куче</a> <a href="/tags/lechenie.html" class="tag-links" title="263" style="font-size: 24pt;">лечение</a> <a href="/tags/liceto.html" class="tag-links" title="109" style="font-size: 14pt;">лицето</a> <a href="/tags/ljubov.html" class="tag-links" title="137" style="font-size: 16pt;">любов</a> <a href="/tags/nadjasno.html" class="tag-links" title="124" style="font-size: 15pt;">надясно</a> <a href="/tags/nali.html" class="tag-links" title="124" style="font-size: 15pt;">нали</a> <a href="/tags/okolnata-sreda.html" class="tag-links" title="217" style="font-size: 21pt;">околната среда</a> <a href="/tags/prozorci.html" class="tag-links" title="137" style="font-size: 16pt;">прозорци</a> <a href="/tags/rabota.html" class="tag-links" title="210" style="font-size: 20pt;">работа</a> <a href="/tags/remont.html" class="tag-links" title="107" style="font-size: 14pt;">ремонт</a> <a href="/tags/recepti.html" class="tag-links" title="172" style="font-size: 18pt;">рецепти</a> <a href="/tags/rcete.html" class="tag-links" title="271" style="font-size: 24pt;">ръцете</a> <a href="/tags/svatba.html" class="tag-links" title="237" style="font-size: 22pt;">сватба</a> <a href="/tags/sebe-si.html" class="tag-links" title="109" style="font-size: 14pt;">себе си</a> <a href="/tags/simptomi.html" class="tag-links" title="133" style="font-size: 16pt;">симптоми</a> <a href="/tags/snimka.html" class="tag-links" title="254" style="font-size: 23pt;">снимка</a> <a href="/tags/snimki.html" class="tag-links" title="210" style="font-size: 20pt;">снимки</a> <a href="/tags/sveti.html" class="tag-links" title="141" style="font-size: 16pt;">съвети</a> <a href="/tags/u-doma.html" class="tag-links" title="147" style="font-size: 17pt;">у дома</a> <a href="/tags/hora.html" class="tag-links" title="108" style="font-size: 14pt;">хора</a> <a href="/tags/chovek.html" class="tag-links" title="171" style="font-size: 18pt;">човек</a> </div> </div> <div class="box"> <div class="content"> <div class="box"> <div class="content"> <br> <br> <script src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js" async=""></script> <script> if(document.getElementsByTagName("body")[0].offsetWidth>=900) { document.write('<ins class="adsbygoogle" style="display:inline-block;width:300px;height:600px" data-ad-client="ca-pub-8686842323494376" data-ad-slot="1432548440"></ins>'); }else{ document.write('<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-8686842323494376" data-ad-slot="2447347631" data-ad-format="auto" data-full-width-responsive="true"></ins>'); } (adsbygoogle = window.adsbygoogle || []).push({}); </script> <br> <br> </script> </div> </div> </div> </div> <div class="box"> <div class="heading"><h4 class="title">Марка статии</h4></div> <div class="content"> <a href="/tags/kadra-v-html.html">кадъра в HTML</a>, <a href="/tags/ramki-v-html-primeri-za-szdavane-na-kadri-v-html.html">рамки в HTML примери за създаване на кадри в HTML</a>, <a href="/tags/kak-da-se-napravi-kadra-v-html.html">как да се направи кадъра в HTML</a>, <a href="/tags/szdavane-na-kadri-v-html-primeri-za-tova-kak-da-se.html">създаване на кадри в HTML примери за това как да се създаде рамки в HTML</a>, <a href="/tags/html-kod-ramka.html">HTML код рамка</a>, <a href="/tags/kak-se-postavja-ramka-v-html.html">как се поставя рамка в HTML</a>, <a href="/tags/izpolzvaneto-na-kadri-v-html.html">използването на кадри в HTML</a>, <a href="/tags/vgradena-ramka-html.html">вградена рамка HTML</a>, <a href="/tags/html.html">HTML</a>, <a href="/tags/fondacii.html">фондации</a>, <a href="/tags/szdavat-kadri.html">създават кадри</a>, <a href="/tags/koito-brauzrt-vi-poddrzha-ramki.html">които браузърът ви поддържа рамки</a>, <a href="/tags/sdrzhanie-html-fajl.html">«съдържание HTML» файл</a>, <a href="/tags/menju-html-sdrzhanie.html">«меню HTML» «съдържание</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;dobrblog?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>