HTML: Популярный самоучитель | страница 57



8.4. Элемент NOFRAMES

Фреймы являются весьма привлекательным средством оформления сайтов, это должно было стать очевидным из приведенных ранее примеров. Однако фреймы в HTML появились не сразу, да и долгое время они не были стандартизированы, поэтому до сих пор обработка и представление документов с фреймами различными браузерами могут существенно отличаться. Кроме того, у достаточно большого количества пользователей до сих пор могут стоять старые версии браузеров, не поддерживающие фреймов вообще.

Если важно, чтобы при просмотре сайта, использующего фреймы, пользователь хоть что‑то увидел, то следует использовать HTML‑элемент NOFRAMES. Этот элемент задается парными тегами и . Он помещается в один файл с описанием набора фреймов.

Между тегами элемента NOFRAMES помещается HTML‑текст, который браузер показывает в том случае, если он не поддерживает фреймы (или если пользователь отключил в браузере поддержку фреймов). Если браузер в состоянии показать фреймы, то текст между тегами элемента NOFRAMES игнорируется. Текст между тегами и можно форматировать точно так же, как если бы он находился между тегами и .

Очевидно, что с помощью элемента NOFRAMES можно создавать гораздо лучше переносимые сайты, особенно если позаботиться о том, чтобы при невозможности отображения фреймов никакая важная информация не была потеряна. Для рассмотренного ранее сайта можно создать версию, не использующую фреймы (выполненную, например, с использованием только таблиц), а внутри элемента NOFRAMES поместить информационное сообщение и ссылку на эту версию сайта (пример 8.6).

Пример 8.6. Использование элемента NOFRAMES

Новый сайт с фреймами

marginheight = 0 frameborder = 0>

</p><p><STRONG>Внимание!</STRONG> Ваш браузер не поддерживает фреймы. Для открытия версии сайта, не использующей фреймы, жмите</p></div></div></div> <!-- Yandex.RTB R-A-5585048-7 --> <div id="yandex_rtb_R-A-5585048-7" class="rkl"><div class="rasporka"></div></div> <script> window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ "blockId": "R-A-5585048-7", "renderTo": "yandex_rtb_R-A-5585048-7" }) }) </script> </section> <section> <nav class="bottom-nav clr text-center ignore-select"> <ul class="pagination"> <li class=""> <a class="page-link" rel="prev" href="/r/54209?p_=56">&laquo;&nbsp;</a> </li> <li class=""> <a class="page-link" href="/r/54209?p_=56">56</a> </li> <li class="active"> <span class="page-link">57</span> </li> <li class=""> <a class="page-link" href="/r/54209?p_=58">58</a> </li> <li class=""> <a class="page-link" rel="next" href="/r/54209?p_=58">&nbsp;&raquo;</a> </li> </ul> </nav> <div class="text-center"> <label for="reader-pagination-page mt-1"> Перейти на страницу </label> <select name="page" class="js-reader-pagination__page-select" data-target-path="/r/54209" > <option value="1" >1</option> <option value="2" >2</option> <option value="3" >3</option> <option value="4" >4</option> <option value="5" >5</option> <option value="6" >6</option> <option value="7" >7</option> <option value="8" >8</option> <option value="9" >9</option> <option value="10" >10</option> <option value="11" >11</option> <option value="12" >12</option> <option value="13" >13</option> <option value="14" >14</option> <option value="15" >15</option> <option value="16" >16</option> <option value="17" >17</option> <option value="18" >18</option> <option value="19" >19</option> <option value="20" >20</option> <option value="21" >21</option> <option value="22" >22</option> <option value="23" >23</option> <option value="24" >24</option> <option value="25" >25</option> <option value="26" >26</option> <option value="27" >27</option> <option value="28" >28</option> <option value="29" >29</option> <option value="30" >30</option> <option value="31" >31</option> <option value="32" >32</option> <option value="33" >33</option> <option value="34" >34</option> <option value="35" >35</option> <option value="36" >36</option> <option value="37" >37</option> <option value="38" >38</option> <option value="39" >39</option> <option value="40" >40</option> <option value="41" >41</option> <option value="42" >42</option> <option value="43" >43</option> <option value="44" >44</option> <option value="45" >45</option> <option value="46" >46</option> <option value="47" >47</option> <option value="48" >48</option> <option value="49" >49</option> <option value="50" >50</option> <option value="51" >51</option> <option value="52" >52</option> <option value="53" >53</option> <option value="54" >54</option> <option value="55" >55</option> <option value="56" >56</option> <option value="57" selected>57</option> <option value="58" >58</option> <option value="59" >59</option> <option value="60" >60</option> <option value="61" >61</option> <option value="62" >62</option> <option value="63" >63</option> <option value="64" >64</option> <option value="65" >65</option> <option value="66" >66</option> <option value="67" >67</option> <option value="68" >68</option> <option value="69" >69</option> <option value="70" >70</option> <option value="71" >71</option> <option value="72" >72</option> <option value="73" >73</option> <option value="74" >74</option> <option value="75" >75</option> <option value="76" >76</option> <option value="77" >77</option> <option value="78" >78</option> <option value="79" >79</option> <option value="80" >80</option> <option value="81" >81</option> <option value="82" >82</option> <option value="83" >83</option> <option value="84" >84</option> <option value="85" >85</option> <option value="86" >86</option> <option value="87" >87</option> <option value="88" >88</option> <option value="89" >89</option> <option value="90" >90</option> <option value="91" >91</option> <option value="92" >92</option> <option value="93" >93</option> <option value="94" >94</option> <option value="95" >95</option> <option value="96" >96</option> <option value="97" >97</option> <option value="98" >98</option> <option value="99" >99</option> <option value="100" >100</option> <option value="101" >101</option> <option value="102" >102</option> <option value="103" >103</option> <option value="104" >104</option> <option value="105" >105</option> <option value="106" >106</option> <option value="107" >107</option> <option value="108" >108</option> <option value="109" >109</option> <option value="110" >110</option> <option value="111" >111</option> <option value="112" >112</option> <option value="113" >113</option> <option value="114" >114</option> <option value="115" >115</option> <option value="116" >116</option> <option value="117" >117</option> <option value="118" >118</option> <option value="119" >119</option> <option value="120" >120</option> <option value="121" >121</option> <option value="122" >122</option> <option value="123" >123</option> <option value="124" >124</option> <option value="125" >125</option> <option value="126" >126</option> <option value="127" >127</option> <option value="128" >128</option> <option value="129" >129</option> <option value="130" >130</option> <option value="131" >131</option> <option value="132" >132</option> <option value="133" >133</option> <option value="134" >134</option> <option value="135" >135</option> <option value="136" >136</option> <option value="137" >137</option> <option value="138" >138</option> <option value="139" >139</option> <option value="140" >140</option> <option value="141" >141</option> </select> </div> </section> </div> </main> </div> <div class="sect sect-popular sect-related ignore-select"> <div class="sect-header fx-row fx-middle"> <div class="sect-title fx-1"> <i class="fa fa-puzzle-piece"></i> Книги, похожие на HTML: Популярный самоучитель </div> </div> <div class="sect-content"> <div class="relbooks-block"> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/53128" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Домашние и офисные сети под Vista и XP - Александр Иванович Ватаманюк</div> <div class="top-subtitle">ОС и Сети</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/uploads/books/images/97/9725e9a2273e2b2b2da27888bc241a2012a7bc38.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/80364" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Реферат, курсовая, диплом на компьютере - Надежда Васильевна Баловсяк</div> <div class="top-subtitle">Прочее</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/uploads/books/images/5d/5d950d777d0cb364020916e7ed5883c749620101.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/54636" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Pinnacle Studio 11 - Александр Анатольевич Чиртик, Михаил Беляков</div> <div class="top-subtitle">Прочее</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/uploads/books/images/41/41832779f3778397f3ee8238c1ba2608333ef65b.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/152915" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Excel. Трюки и эффекты - Александр Анатольевич Чиртик, Алексей Анатольевич Гладкий</div> <div class="top-subtitle">Прочее</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/uploads/books/images/5a/5a91499b542664b0a7e648cb603becca8521a02c.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/39093" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">FreeBSD - полезные советы - Сергей Супрунов</div> <div class="top-subtitle">Программирование</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/build/no_cover.f2a76ebc.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/43249" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Программирование на языке Пролог - У Клоксин, К Меллиш</div> <div class="top-subtitle">Программирование</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/build/no_cover.f2a76ebc.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/51412" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Управление исходными текстами. Часть 1. Краткое руководство по CVS - Илья Петрович Рыженков</div> <div class="top-subtitle">Программирование</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/uploads/books/images/21/21540f0d3759171aab22cb9ee77d15cd864e512e.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> <div class="relbook-item"> <a class="top-in img-resp-vert" href="/b/173494" > <div class="top-desc fx-col fx-center anim"> <div class="top-title">Java 7 - Ильдар Шаукатович Хабибуллин</div> <div class="top-subtitle">Программирование</div> </div> <img class="book_image lazyload" title="Читать онлайн HTML: Популярный самоучитель - Александр Анатольевич Чиртик" data-src="/uploads/books/images/20/2050a8e21470920021257d5b288a75603595f9a4.jpg" alt="HTML: Популярный самоучитель - Александр Анатольевич Чиртик"> <i class="lazyload-spinner"></i> </a> </div> </div> </div> </div> </article> </div> </div> </div> </main> <aside class="sidebar"> <div class="side-box search-wrap"> <form id="quicksearch" method="get" action="/p"> <div class="search-box"> <input id="story" name="text" minlength="3" placeholder="Поиск по сайту..." type="text" autocomplete="off"> <button type="submit" class="search-btn"><span class="fa fa-search"></span></button> </div> </form> </div> <ul class="side-box side-nav to-mob"> <li><a href="/books">Книги</a> <ul class="subcat"> <li><a href="/c/55">Боевики</a></li> <li><a href="/c/21">Военное</a></li> <li><a href="/c/6">Детская литература</a></li> <li><a href="/c/74">Классика</a></li> <li><a href="/c/50">ЛитРПГ</a></li> <li><a href="/c/36">Любовная фантастика</a></li> <li><a href="/c/4">Любовные романы</a></li> <li><a href="/c/47">Попаданцы</a></li> <li><a href="/c/35">Постапокалипсис</a></li> <li><a href="/c/5">Приключения</a></li> <li><a href="/c/63">Триллеры</a></li> <li><a href="/c/1">Фантастика</a></li> <li><a href="/c/31">Фэнтези</a></li> </ul> </li> </ul> </aside> </div> <footer class="footer"> <div class="footer-in wrap-center"> <div class="footer-one fx-row"> <div class="footer-col footer-col-desc"> <div class="footer-col-title title"> 2025 Литфонд | Читать книги онлайн </div> </div> <div class="footer-col"> <div class="footer-col-title title">Контакты</div> <ul class="footer-col-content"> <li>Для связи и правообладателям: <a href="mailto:libs.pbn@gmail.com">libs.pbn@gmail.com</a> </li> </ul> </div> </div> </div> </footer> </div> </div> <script src="/build/runtime.68aa92de.js" defer></script><script src="/build/site.38e640f9.js" defer></script> <!-- Yandex.Metrika counter --> <script type="text/javascript" > (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(94963560, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/94963560" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> </body> </html>