noframes в HTML


Содержание

в HTML</h2> <p><strong>Тег</strong> используется для отображения альтернативного содержимого, если в браузере отключен показ фреймов или он их вовсе не поддерживает. Если же браузер может отобразить фреймы, то он просто проигнорирует содержимое элемента . Причем, этот тег можно использовать не только в самом фрейм-документе, но и в документе, который будет загружен в окно фрейма.</p> <h2 id="atributy">Атрибуты</h2> <p>Личные атрибуты: нет.</p> <ul> <li>class — задает имя класса или классов тега, используемых в CSS (Каскадные таблицы стилей).</li> <li>dir — указывает направление текста внутри элемента.</li> <li>id — задает имя идентификатора HTML-тега, который может использоваться в качестве &laquo;якоря&raquo; или в таблицах стилей.</li> <li>lang — указывает язык, на котором написан текст внутри HTML-элемента.</li> <li>style — необходим для применения встроенных стилей CSS к тегу.</li> <li>title — выводит всплывающую подсказку при наведении курсора мыши на HTML-элемент.</li> </ul> <h2 id="tip-tega">Тип тега</h2> <p>Модель тега: может располагаться перед закрывающим тегом или внутри обычного HTML-документа, который загружается в окно фрейма. В любом случае он должен быть в документе в единственном числе.</p> <p>Может содержать: block-теги и/или inline-теги, обычный текст и <em>спецсимволы HTML</em> (мнемоники).</p> <p>Не может содержать: другие теги на любом уровне вложенности.</p> <p>Открывающий тег: необходим. Закрывающий тег: необходим.</p> <h2 id="sintaksis">Синтаксис</h2> <p>Пример HTML: применение тега NOFRAMES</p> <h2 id="podderzhka-versiyami-html">Поддержка версиями HTML</h2> <table > <tr> <td>Версия:</td> <td>HTML 4.01</td> <td>HTML 5</td> <td>XHTML 1.0</td> <td>XHTML 1.1</td> </tr> <tr > <td >Поддержка:</td> <td >Частично</td> <td >Нет</td> <td >Частично</td> <td >Нет</td> </tr> </table> <p>В HTML 4.01 и XHTML 1.0 использовать тег допускается только с Transitional и Frameset, в противном случае будет невалидный код.</p> <h2 id="v-html-2"><noframes> в HTML</h2> <p>Тег не поддерживается в HTML5.</p> <p>Тег является резервным тегом для обозревателей, которые не поддерживают кадры. Он может содержать все элементы HTML, которые можно найти внутри элемента нормальной HTML-страницы.</p> <p>Элемент можно использовать для связывания с версией веб-сайта, не являющейся фреймом, или для отображения пользователю сообщения о том, что кадры являются обязательными.</p> <p>Элемент перейдет внутрь элемента .</p> <p><b>Примечание:</b> Если вы хотите проверить страницу, содержащую кадры, убедитесь, что имеет значение либо &#171;HTML Frameset DTD&#187; или &#171;XHTML Frameset DTD&#187;.</p> <h2 id="podderzhka-brauzera">Поддержка браузера</h2> <table > <tr> <th style="width:20%;font-size:16px;text-align:left;">Элемент</th> </tr> <tr> <td>Да</td> <td>Да</td> <td>Да</td> <td>Да</td> <td>Да</td> </tr> </table> <h2 id="razlichiya-mezhdu-html-4-01-i-html5">Различия между HTML 4,01 и HTML5</h2> <p>Тег не поддерживается в HTML5.</p> <h2 id="razlichiya-mezhdu-html-i-xhtml">Различия между HTML и XHTML</h2> <p><b>Важно:</b> В XHTML-фрейме DTD, <b>текст</b> в элементе должен быть заключен в элемент .</p> <h2 id="freymy">Фреймы</h2> <p>На многих современных сайтах присутствуют &laquo; прилипающие &raquo; меню навигации, которые отображаются либо в боковой панели, либо в верхней части, когда вы прокручиваете страницу вверх и вниз. Но свойства CSS , которые позволяют создавать &laquo; прилипающие &raquo; меню, не всегда поддерживается браузерами. Ранее для реализации подобного функционала использовались фреймы в HTML .</p> <h2 id="raznitsa-mezhdu-frames-i-iframes">Разница между Frames и Iframes</h2> <p>При использовании frameset вы разделяете видимую часть окна браузера на несколько фреймов. Каждый фрейм имеет собственное содержимое, которое не затрагивает содержимое следующего. Frames и Iframes выполняют аналогичную функцию — встраивают ресурс в веб-страницу, но они принципиально отличаются друг от друга:</p> <ul> <li>Frames — это элементы, определяющие макет;</li> <li>Iframes — элементы, добавляющие контент.</li> </ul> <h3 id="istoriya-i-buduschee-freymov">История и будущее фреймов</h3> <p>W3C признала фреймы устаревшими в HTML5 . Данное решение было аргументировано тем, что фреймы HTML отрицательно сказываются на юзабилити и доступности. Давайте разберемся, обоснованы ли эти претензии.</p> <h3 id="problemy-s-freymami">Проблемы с фреймами</h3> <ul> <li>Проблемы юзабилити: с увеличением популярности мобильных устройств с небольшими экранами возникла необходимость того, чтобы сайты предлагали пользователям несколько представлений, которые изменяются в зависимости от размера окна просмотра. Хотя фреймами можно манипулировать, чтобы обеспечить определенную степень адаптивности, но они не слишком хорошо подходят для создания адаптивных сайтов;</li> <li>Доступность: экранные дикторы и другие вспомогательные технологии довольно плохо считывают и взаимодействуют с сайтами, которые используют фреймы.</li> </ul> <p>В данный момент в веб-разработке прослеживается глобальная тенденция разделения содержимого веб-страницы от ее представления:</p> <ul> <li>Содержимое должно добавляться и определяться разметкой, например, через HTML ;</li> <li>Представление определяется языками, такими как CSS и JavaScript .</li> </ul> <p>Использование фреймов изначально предполагает создание специфического внешнего вида и структуры, в то время как задачи представления должны обрабатываться с помощью CSS .</p> <h3 id="buduschee-freymov">Будущее фреймов</h3> <p>Хотя на сегодняшний день все современные браузеры поддерживают фреймы, W3C однозначно заявила , что фреймы &laquo; не должны использоваться веб-разработчиками &laquo;. Если у вас есть сайт, который использует фреймы, вам стоит задуматься о переходе на другие технологии. В какой-то момент браузеры перестанут поддерживать фреймы, и, когда это произойдет, сайты, применяющие их, станут непригодными для использования.</p> <h3 id="kak-sdelat-freymy-v-html">Как сделать фреймы в HTML</h3> <p>В разработке новых сайтов фреймы использоваться не должны, но для веб-мастеров, которые занимаются поддержкой старых ресурсов, умение применять их может оказаться полезным.</p> <h3 id="osnovnaya-kontseptsiya-freymov">Основная концепция фреймов</h3> <p>Основная концепция фреймов довольно проста:</p> <ul> <li>Используйте элемент frameset в определенном месте элемента body в HTML-документе ;</li> <li>Используйте элемент frame , чтобы создать фреймы для содержимого веб-страницы;</li> <li>Используйте атрибут src для идентификации ресурса, который должен загружаться внутри фрейма;</li> <li>Создайте для каждого фрейма HTML отдельный файл с содержимым.</li> </ul> <p>Рассмотрим несколько примеров того, как это работает. Сначала нужно создать несколько HTML-документов , с которыми мы будем работать. Давайте создадим четыре различных HTML-документа . Вот, что будет содержать первый из них:</p> <p>Первый документ мы сохраним, как frame_1.html . Остальные три документа будет иметь подобное содержимое, и называться соответственно.</p> <h3 id="sozdanie-vertikalnyh-stolbtsov">Создание вертикальных столбцов</h3> <p>Чтобы создать набор из четырех вертикальных столбцов, нужно использовать элемент frameset с атрибутом cols . Атрибут cols используется для определения количества и размера столбцов, которые будет содержать frameset . В нашем случае у нас есть четыре файла для отображения. Следовательно, нам нужно четыре фрейма.</p> <p>Чтобы их создать, нам нужно задать в атрибуте cols четыре значения, разделенные запятой. Для простоты мы присвоим каждому из фреймов значение * , это задаст для них размер, при котором они автоматически будут заполнять все свободное пространство. Вот, как будет выглядеть наша HTML-разметка :</p> <p>А вот как эта разметка будет отображаться: </p> <h3 id="sozdanie-gorizontalnyh-strok">Создание горизонтальных строк</h3> <p>Строки фреймов HTML можно создать с помощью атрибута rows , а не атрибута cols , как в предыдущем примере:</p> <p>Внеся это изменение, мы сделали так, что фреймы теперь загружаются в четыре ряда, друг над другом: </p> <h3 id="obedinenie-stolbtsov-i-strok">Объединение столбцов и строк</h3> <p>Столбцы и строки фреймов могут одновременно отображаться на той же странице. Можно вкладывать один фрейм внутрь другого. Для этого мы сначала создаем frameset , а затем вкладываем дочерний frameset внутрь родительского элемента. Вот пример того, как можно вложить две строки в набор из трех столбцов:</p> <p>Фрейм в HTML пример: </p> <p>Вложенный frameset располагается внутри родительского элемента, первого фрейма. Вложенный элемент может быть размещен в любом месте. Например, если мы хотим, чтобы вложенный элемент размещался в центре, то просто переставляем элементы следующим образом:</p> <p>Вот, как теперь будут отображаться фреймы: </p> <p>Можно создать другие вложенные фреймы:</p> <p>Этот код создает набор из двух одинаковых по размеру столбцов. Затем мы разделили второй столбец на две строки. И, наконец, мы разделили вторую строку на две колонки. Вот, как это будет выглядеть: </p> <p>Другой способ создать комбинацию строк и столбцов — определить сетку столбцов и строк в одном фрейме. Например, если вы хотите создать сетку из четырех фреймов одинакового размера, можно использовать следующий код:</p> <p>Полученная сетка строк и столбцов будет выглядеть следующим образом: </p> <h3 id="kak-zadavat-stili-dlya-freymov">Как задавать стили для фреймов</h3> <p>Когда речь идет об определении стилей веб-страницы, которая использует фреймы в HTML , существуют два способа назначения стилей:</p> <ul> <li>Определение стилей внутри каждого frame ;</li> <li>Определение стилей для frameset .</li> </ul> <p>Представление каждого frame должно определяться внутри исходного документа. Представление frameset должно определяться внутри родительского документа, содержащего frameset . Другими словами, стили для frame_1.html должны задаваться правилами CSS , содержащимися в файле frame_1.html , или в таблице стилей, связанной с файлом frame_1.html .</p> <h3 id="opredelenie-stiley-freymov-v-ishodnom-dokumente">Определение стилей фреймов в исходном документе</h3> <p>Как и для любой веб-страницы, стили для содержимого каждого фрейма могут задаваться с помощью CSS . Чтобы задать стили содержимого каждого фрейма, они должны быть добавлены к основному документу либо через ссылку на внешний файл стилей, либо через добавление внутренних или встроенных стилей. Принимая во внимание то, что у нас есть четыре исходных документа, стили CSS должны применяться к каждому документу отдельно.</p> <p>Применив стили CSS к веб-странице, которая содержит frameset , мы не сможем применить стили к каждому фрейму отдельно. Если мы хотим задать стили для frame_1.html , нам нужно добавить эти стили непосредственно в сам документ. Вот пример того, как это можно сделать:</p> <p>Если мы вернемся к нашему предыдущему примеру создания фреймов в HTML с четырьмя столбцами одинакового размера и загрузим frameset после внесения этих изменений в файл frame_1.html , мы получим следующее: </p> <h3 id="opredelenie-stiley-i-formatirovanie-frameset">Определение стилей и форматирование frameset</h3> <p>Как повлиять на представление frameset помимо определения стилей самих документов:</p> <ul> <li>Может быть определен или зафиксирован размер каждого фрейма;</li> <li>Может быть изменен отступ между фреймами;</li> <li>Может быть задан формат рамки вокруг каждого фрейма.</li> </ul> <p>Эти изменения вносятся не через CSS . Они осуществляются путем добавления атрибутов и их значений для элемента frame .</p> <h3 id="opredelenie-razmerov-freymov">Определение размеров фреймов</h3> <p>Размеры фреймов могут задаваться в пикселях, процентах, либо фреймы могут автоматически занимать все свободное пространство. Чтобы указать размер фрейма, вставьте нужное значение в атрибут cols или rows . По умолчанию, если для фрейма не указан атрибут noresize , посетители сайта могут с помощью мыши перетащить границу между двумя фреймами, изменяя их размер. Если это нежелательно, то к элементу фрейма может быть применен атрибут noresize , и изменение его размеров будет невозможно. Объединим обе эти концепции на практике.</p> <p>Мы создадим следующий макет:</p> <ul> <li>Один ряд на всю ширину вдоль верхней части страницы;</li> <li>Три столбца ниже верхнего ряда;</li> <li>Размеры первого и третьего столбца задаются так, чтобы создать левый и правый сайдбары;</li> <li>Размеры среднего столбца задаются так, чтобы он представлял собой большую область контента.</li> </ul> <p>Мы можем создать фрейм HTML с помощью следующего кода:</p> <p>Этот код создает frameset из двух рядов:</p> <ul> <li>Первый ряд высотой 150 пикселей. Атрибут noresize , указанный для первого frame означает, что его размеры не могут быть изменены;</li> <li>Стили, которые мы применяли ранее к frame_1.html сохраняются, но они влияют только на содержимое этого фрейма;</li> <li>Второй ряд расширяется, чтобы заполнить оставшееся пространство;</li> <li>Второй frameset вложен во второй ряд и содержит три столбца;</li> <li>Первый и третий столбцы заполняют по 20% доступного пространства окна браузера;</li> <li>Второй столбец расширяется таким образом, чтобы заполнить пространство, остающееся между первым и третьим столбцом;</li> <li>Так как мы не указали для столбцов атрибут noresize , изначально они будут отображаться, исходя из размеров, заданных в коде.</li> </ul> <p>Но посетитель сайта сможет вручную изменить их размеры.</p> <p>Этот код создает веб-страницу, отображаемую следующим образом: </p> <h3 id="formatirovanie-ramki-i-otstupov-vokrug-freyma">Форматирование рамки и отступов вокруг фрейма</h3> <p>Теперь, когда мы определили макет, если нам нужно, мы можем увеличить или уменьшить отступы между фреймами, а также удалить рамку между ними. Используя макет, который мы создали в предыдущем пункте, давайте удалим рамки между тремя столбцами, но оставим рамку между верхними и нижними рядами. Давайте также добавим отступ вокруг содержимого первого фрейма HTML :</p> <p>Атрибут marginheight , примененный к первому фрейму, добавляет отступ в 15 пикселей выше и ниже содержимого, загружаемого в первом фрейме. Значение frameborder , равное 0, удаляет рамки для всех трех нижних фреймов. Вот как это будет выглядеть: </p> <h3 id="ukazanie-freymov-s-pomoschyu-ssylok">Указание фреймов с помощью ссылок</h3> <p>Одним из наиболее распространенных случаев использования фреймов является создание во фрейме &laquo; прилипающего &raquo; меню навигации, которое всегда видно независимо от положения содержимого других фреймов. При правильном применении, ссылки в меню навигации приводят к загрузке новых ресурсов во фрейме, в то время как остальные фреймы остаются статическими.</p> <p>Можно отформатировать анкоры для указания конкретных фреймов через присвоение нужному элементу frame атрибута name и использование атрибута target внутри элемента a для загрузки href в указанном фрейме. Если все это немного сбивает вас с толку, давайте разберем процесс создания фреймов в HTML шаг за шагом.</p> <p>Первым делом нам нужно присвоить name для фрейма, в котором должны открываться ссылки. В разметке, которую мы создали чуть ранее, можно использовать левый столбец для меню навигации, а центральный столбец в качестве целевого фрейма. Для этого нужно присвоить атрибут name целевому элементу:</p> <p>Теперь, когда мы задали для центрального столбца name=&raquo;mid_col&raquo; , можно создать в исходном документе нашего левого столбца frame_2.html несколько ссылок:</p> <p>Теперь, когда мы загрузим веб-страницу, в левой боковой панели будут размещаться четыре ссылки навигации. При нажатии на ссылку содержимое файла загружается во фрейме среднего столбца с атрибутом name=&raquo;mid_col&raquo; . Вот, что мы увидим при загрузке страницы: </p> <p>Если нажмем ссылку Load frame_1.html , содержимое этого файла загрузится в центральном столбце, и мы получим следующее: </p> <p>Если нажмем ссылку Load frame_2.html , то увидим, что и в левой боковой панели, и в центральном столбце будут отображаться ссылки навигации: </p> <p>При нажатии ссылок Load frame_3.html и Load frame_4.html в центральном столбце будет загружаться содержимое этих файлов. Если бы мы забыли добавить для одной из ссылок атрибут target=&raquo;mid_col&raquo; , то при клике по ней файл будет загружаться в том фрейме, который содержит ссылку. Если мы хотим перезагрузить всю страницу, например, при переходе по ссылке на внешний сайт, нам нужно добавить атрибут target=&raquo;_blank&raquo; или target=&raquo;_top&raquo; .</p> <h3 id="predostavlenie-rezervnogo-varianta-noframes">Предоставление резервного варианта noframes</h3> <p>В прошлом элемент noframes использовался, чтобы создать резервный вариант для браузеров, которые не поддерживают фреймы HTML . На текущий момент все современные браузеры поддерживают фреймы, а noframes практически не поддерживается. В результате нам больше не нужно создавать резервный вариант noframes при работе с фреймами.</p> <h3 id="kak-sdelat-freymy-adaptivnymi">Как сделать фреймы адаптивными</h3> <p>При применении фреймов довольно сложно обеспечить удобство использования для посетителей, заходящих на сайт со смартфонов и небольших планшетов. Так как фреймы были полностью удалены из HTML5 и считаются устаревшими, важно, чтобы владельцы сайтов, созданных с использованием фреймов, запланировали перестройку своих ресурсов и переход на другие технологии.</p> <h3 id="ispolzovanie-strok-a-ne-stolbtsov">Использование строк, а не столбцов</h3> <p>Если это возможно, организуйте фреймы в ряды, а не столбцы. На маленьком экране гораздо легче перемещаться по контенту по вертикали, чем по горизонтали. Фреймы в HTML , которые расположены в ряд, намного проще просматривать на небольшом экране. Если мы уменьшим ширину макетов, содержащих строки и столбцы, имитируя экран Apple IPhone 6 , то увидим, что строки намного удобнее просматривать, чем столбцы: </p> <h3 id="ispolzuyte-protsenty-dlya-shiriny-stolbtsov">Используйте проценты для ширины столбцов</h3> <p>Когда размеры столбцов задаются в процентах, а не в пикселях, они будут автоматически изменяться в зависимости от размера экрана устройства. Хотя это может создать определенные проблемы, связанные с тем, что некоторые фреймы могут стать слишком маленькими, но в целом опыт взаимодействия и просмотра будет лучше, если общая ширина столбцов задается в процентах, а не в пикселях.</p> <h3 id="kak-pereyti-s-freymov-na-drugie-tehnologii">Как перейти с фреймов на другие технологии</h3> <p>И элемент frameset , и элемент frame были удалены из последней спецификации HTML5 . Владельцы сайтов, созданных с использованием фреймов, должны выполнить перестройку своих ресурсов, чтобы исключить их из макета. В какой-то момент браузеры откажутся от поддержки фреймов. Таким образом отказаться от фреймов — это не просто желательно, это необходимо сделать.</p> <h3 id="otsenka-kontenta-soderzhaschegosya-vo-freymah">Оценка контента, содержащегося во фреймах</h3> <p>Первым шагом к реорганизации сайта, использующего плавающие фреймы HTML , должно стать определение причин, по которым используются именно фреймы:</p> <ul> <li>Были ли фреймы использованы для создания конкретного макета? Если это так, для создания подобного макета может быть использован CSS ;</li> <li>Были ли фреймы использованы для создания контейнера с рекламой определенных размеров? Есть много способов воссоздать данный эффект с помощью CSS или виджетов, предназначенных для работы с CMS ;</li> <li>Были ли фреймы использованы для создания &laquo; прилипающих &raquo; меню навигации? Опять же, с помощью CSS может быть воссоздан тот же эффект;</li> <li>Были ли фреймы использованы для загрузки контента с внешнего сайта? Если да, то элемент iframe, который является частью HTML5 , может быть использован для встраивания контента с внешнего сайта.</li> </ul> <p>Практически в каждом случае можно использовать CSS , чтобы воссоздать макет, разработанный с применением фреймов, а iframe можно использовать для встраивания внешних ресурсов.</p> <h3 id="strategiya-dlya-vashego-novogo-sayta">Стратегия для вашего нового сайта</h3> <p>Если ваш сайт создан с применением фреймов, существует большая вероятность того, что он уже сильно устарел. Вместо того чтобы просто собрать все содержимое сайта в один HTML-файл и задать для него стили с помощью CSS , возможно, пришло время подумать о модернизации и переходе на систему управления контентом.</p> <p>Переход на CMS на начальном этапе потребует больше времени, но в долгосрочной перспективе преимущества от запуска современного сайта перевесят краткосрочные сложности. Чтобы помочь вам определиться с системой управления контентом, рекомендуем обратить внимание на три самые популярные из них:</p> <h3 id="dopolnitelnye-resursy">Дополнительные ресурсы</h3> <p>Если вы хотите узнать о фреймах HTML больше, лучшим источником для получения дополнительной информации является World Wide Web Consortium ( W3C ). Вот некоторые из страниц с информацией о фреймах:</p> <ul> <li>Документация HTML4 о фреймах ;</li> <li>Устаревшие функции HTML5</li> </ul> <h3 id="svyazannye-elementy">Связанные элементы</h3> <table border="1"> <tbody> <tr> <td>Название элемента</td> <td>Атрибуты</td> <td>Описание</td> </tr> <tr> <td>noframes</td> <td>Элемент использовался внутри родительского , чтобы предоставить резервный вариант контента для пользователей, чьи браузеры, не поддерживали . На данный момент фреймы являются устаревшей технологией, поэтому элемент не должен использоваться.</td> </tr> <tr> <td>iframe</td> <td>sandbox</table> <p>width</td> <td>создает встроенный фрейм, который выводит в текущий документ независимый HTML-документ.</td> </tr> <tr> <td>frameset</td> <td>frameborder</p> <p>bordercolor</td> <td>Элемент использовался, чтобы создать группу фреймов, которые могут управляться и стилизоваться, как одно целое. На данный момент фреймы в HTML устарели и не должны использоваться.</td> </tr> <tr> <td>frame</td> <td>Src</p> <p>bordercolor</td> <td>Элемент использовался, чтобы разбить окно браузера на несколько независимых частей. На данный момент фреймы устарели и не должны использоваться.</td> </tr> </tbody> </table> <p>Данная публикация представляет собой перевод статьи &laquo; Frames &raquo; , подготовленной дружной командой проекта Интернет-технологии.ру</p> <h2 id="noframes">noframes</h2> <p><strong>Тег</strong> (англ. no frames — нет фреймов) — тег-контейнер, содержит текст, который выводится, если браузер не поддерживает работу с фреймами при использовании тега <br />Блочный элемент.</p> <p>Обычно, внутри тега располагается текст, информирующий пользователя о том, что его браузер фреймы не поддерживает или ссылка на страницу без фреймов.</p> <p><strong>HTML</strong>: 3.2 | 4 / <strong>XHTML</strong>: 1.0 ( Strict , Transmissional , Frameset ) | 1.1</p> <h2 id="sintaksis-2">Синтаксис</h2> <h2 id="atributy-2">Атрибуты</h2> <table> <tr > <th>class</th> <td>определяет имя используемого класса</td> </tr> <tr > <th>dir</th> <td>определяет направление символов: <ul> <li>ltr — слева направо</li> <li>rtl — справа налево</li> </ul> </td> </tr> <tr > <th>id</th> <td>уникальный идентификатор</td> </tr> <tr > <th>lang</th> <td>определяет используемый язык</td> </tr> <tr > <th>onclick</th> <td>щелчок на элементе</td> </tr> <tr > <th>ondblclick</th> <td>двойной щелчок на элементе</td> </tr> <tr > <th>onkeydown</th> <td>нажатие клавиши, когда элемент имеет фокус</td> </tr> <tr > <th>onkeypress</th> <td>нажатие и освобождении клавиши, когда элемент имеет фокус</td> </tr> <tr > <th>onkeyup</th> <td>освобождение ранее нажатой клавиши, когда элемент имеет фокус</td> </tr> <tr > <th>onmousedown</th> <td>нажатие кнопки мыши, когда элемент имеет фокус</td> </tr> <tr > <th>onmousemove</th> <td>движение указателя мыши, когда элемент имеет фокус</td> </tr> <tr > <th>onmouseout</th> <td>смещение указателя мыши с элемента</td> </tr> <tr > <th>onmouseover</th> <td>помещение указателя мыши на элемент</td> </tr> <tr > <th>onmouseup</th> <td>освобождение ранее нажатой кнопки мыши, когда элемент имеет фокус</td> </tr> <tr > <th>style</th> <td>задает встроенную таблицу стилей</td> </tr> <tr > <th>title</th> <td>добавляет всплывающую подсказку</td> </tr> </table> <h2 id="primer">Пример</h2> <p>Создаем два фрейма. Первый фрейм &#8212; панель слева, шириной 120 пикселей. Под второй отводиться все оставшееся место.</p> <h2 id="16-freymy">16 Фреймы</h2> <h2 id="16-1-vvedenie-v-freymy">16.1 Введение в фреймы </h2> <p>Фреймы в HTML позволяют авторам представлять документы в нескольких разделах, которые могут быть независимыми или вложенными окнами. Это обеспечивает дизайнерам способ оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется. Например, в одном окне в одном фрейме может отображаться статический баннер, во втором навигационное меню, а в третьем &#8212; сам документ, который можно прокручивать или переходить к другому с помощью навигации во втором фрейме.</p> <p>Вот простой документ с использованием фреймов:</p> <p>это может привести примерно к следующей структуре экрана:</p> <p>Если агент пользователя не может представлять фреймы или сконфигурирован так, чтобы не делать этого, он должен генерировать содержимое элемента NOFRAMES .</p> <h2 id="16-2-raspolozhenie-freymov">16.2 Расположение фреймов</h2> <p>Документ HTML, в котором описывается компоновка фреймов (называемый ), выглядит не так, как документ HTML без фреймов. Стандартный документ имеет один раздел HEAD и один раздел BODY . Документ с фреймами имеет раздел HEAD и раздел FRAMESET , который заменяет раздел BODY .</p> <p>В разделе FRAMESET задается расположение фреймов в основном окне агента пользователя. Кроме того, в разделе FRAMESET может присутствовать элемент NOFRAMES с альтернативным содержимым для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы их не показывать.</p> <p>Элементы, обычно помещаемые в раздел BODY , не должны присутствовать до первого элемента FRAMESET , иначе элемент FRAMESET будет игнорироваться.</p> <h3 id="16-2-1-element-frameset">16.2.1 Элемент FRAMESET </h3> <p><em>Определения атрибутов</em> rows = <em>multi-length-list</em> [CN] Этот атрибут определяет расположение горизонтальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат одну строку. cols = = <em>multi-length-list</em> [CN] Этот атрибут определяет расположение вертикальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат один столбец.</p> <p>Элемент FRAMESET определяет макет основного окна пользователя в виде прямоугольных пространств.</p> <h4 id="stroki-i-stolbtsy">Строки и столбцы</h4> <p>Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Устанвока атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.</p> <p><center><iframe width="420" height="315" src="https://www.youtube.com/embed/3EMV0wCv1n0" frameborder="0" allowfullscreen></iframe><br /> </center></p> <p>Если атрибут rows не установлен, каждый столбец занимает всю длину страницы. Если атрибут cols не установлен, каждая строка занимает всю ширину страницы. Если не установлен ни один из этитх атрибутов, фрейм занимает всю страницу.</p> <p>Фреймы создаются в направлении слева направо для столбцов и сверху вниз для строк. Если указаны оба атрибута, разделы окон создаются слева направо в верхней строке, слева направо во второй строке и т.д.</p> <p>В первом примере экран разделяется горизонтально на две части (то есть создаются верхняя и нижняя части).</p> <p>В следующем примере создается три столбца: второй имеет фиксированную ширину 250 пикселов (это полезно, например, для представления изображения известной ширины). Первый фрейм получает 25% оставшегося пространства, а третий &#8212; 75%.</p> <p>В следующем примере создается сетка 2&#215;3.</p> <p>Для следующего примера предположим, что окно браузера имеет высоту строго 1000 пикселов. Первый раздел получает 30% общей высоты (300 пикселов). Второй имеет высоту ровно 400 пикселов. Остается 300 пикселов на два другие фрейма. Для четвертого фрейма задана высота &#171;2*&#187;, так что он должен быть вдвое выше третьего, для которого заданы высота &#171;*&#187; (эквивалентно 1*). Таким оразом, третий фрейм будет иметь высоту 100 пикселов, а четвертый &#8212; 200.</p> <p>Абсолютные длины, если они не дают в сумме 100% реально доступного пространства, должны корректироваться агентом пользователя. Если указана длина менее фактической, оставшееся пространство должно равномерно распределяться между всеми разделами. Если указана длина, превышающая фактическую, каждый раздел должен уменьшаться в зависимости от того, какую часть пространства он занимает.</p> <h4 id="vlozhennye-nabory-freymov"> Вложенные наборы фреймов </h4> <p>Число уровней вложенности фреймов не ограничено.</p> <p>В следующем примере внешний элемент FRAMESET разделяет доступное пространство на три равных столбца. Внутренний элемент FRAMESET разделяет вторую область на две строки неравной высоты.</p> <h4 id="razdelenie-dannyh-mezhdu-freymami">Разделение данных между фреймами </h4> <p>Авторы могут разделять данные между несколькими фреймами, включая эти данные с помощью элемента OBJECT . Элемент OBJECT следует включать в элемент HEAD документа с фреймами и давать ему имя с помощью атрибута id . Любой документ, являющийся содержимым фрейма, может ссылаться на этот идентификатор.</p> <p>В следующем примере показано обращение скрипта к элементу OBJECT , определенному для всего набора фреймов:</p> <h3 id="16-2-2-element-frame">16.2.2 Элемент FRAME </h3> <p><em>Определения атрибутов</em>name = <em>cdata</em>[CI] Назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках. longdesc = uri[CT] Ссылка на длинное описание фрейма. Это объявление должно дополнять краткое описание, задаваемое атрибутом title , и может быть особенно полезно для невизуальных агентов пользователей. src = <em>uri</em>[CT] Определяет местонахождение начального содержимого фрейма. noresize[CI] Если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя. scrolling = auto|yes|no [CI] Этот атрибут задает информацию о прокрутке фрейма. Возможные значения </p> <ul> <li>auto: При необходимости предоставлять возможности прокрутки. Это значение используется по умолчанию.</li> <li>yes: Всегда предоставлять возможности прокрутки.</li> <li>no: Не предоставлять возможности прокрутки.</li> </ul> <p>frameborder = 1|0 [CN]Этот атрибут предоставляет агенту пользователя информацию о границе фрейма. Возможные значения: </p> <ul> <li>1: Агент пользователя должен изобразить разделитель между этим фреймам и всеми прилежащими фреймами. Это значение используется по умолчанию.</li> <li>0: Агент пользователя не должен отображать разделитель. Обратите внимание, что разделители могут все равно отображаться, если они заданы в других фреймах.</li> </ul> <p>marginwidth = <em>пикселы</em>[CN]Этот атрибут задает пространство, оставляемое во фрейме в качестве левого и правого полей. Значение должно превышать один пиксел. Значение по умолчанию зависит от агента пользователя. marginheight = <em>пикселы</em>[CN] Этот атрибут определяет верхнее и нижнее поля в фрейме. Значение должно превышать один пиксел. Значение по умолчанию зависит от агента пользователя.</p> <p>Элемент FRAME определяет содержимое и вид одного фрейма.</p> <h4 id="zadanie-ishodnogo-soderzhimogo-freyma"> Задание исходного содержимого фрейма </h4> <p>Атрибут src определяет исходный документ, содержащийся в фрейме.</p> <p>В следующем примере документа HTML:</p> <p>должна создаваться примерно следующая страница:</p> <p>а агент пользователя должен загружать каждый файл в отдельный раздел.</p> <p>Содержимое фрейма и его определение не должны находиться в одном документе.</p> <p>ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ: <br />Следующее определение фреймов не является допустимым в HTML, поскольку содержимое второго фрейма находится в документе, описывающем набор фреймов.</p> <h4 id="vizualnoe-predstavlenie-freyma">Визуальное представление фрейма</h4> <p>В следующем примере показано использование декоративных атрибутов FRAME . Фрейм 1 не должен содержать полос прокрутки. В фрейме 2 вокруг содержимого (изображения) останется пустое пространство, и размер фрейма нельзя будет изменять. Между фреймами 3 и 4 не будет границы. Границы (по умолчанию) будут присутствовать между фреймами 1, 2 и 3.</p> <h2 id="16-3-opredelenie-tseli-freyma">16.3 Определение цели фрейма </h2> <p><em><strong>Примечание.</strong> О том, как сейчас принято определять цель фрейма, Вы можете узнать в замечаниях о фреймах в приложении.</em> </p> <p><em>Определения атрибутов</em> target = <em>frame-target</em> [CI] Задает имя фрейма, в котором должен открываться документ.</p> <p>Информацию о рспознаваемых именах фреймов Вы можете найти в разделе о именах целевых фреймов.</p> <p>В этом примере показано, как цели обеспечивают динамическое изменение содержимого фрейма. Сначала определим набор фреймов в показанном здесь документе <tt>frameset.html</tt>:</p> <p>Затем в файле <tt>init_dynamic.html</tt> мы будем ссылаться на фрейм с именем &#171;dynamic&#187;.</p> <p>Активизация любой из ссылок приведет к открытию нового документа в фрейме с именем &#171;dynamic&#187;, в то время как в другом фрейме, &#171;fixed&#187;, сохраняется исходное содержимое.</p> <p><em>В настоящий момент невозможно кодировать полностью состояние набора фреймов в URI. Таким образом, многие агенты пользователей не позволяют пользователям вносить наборы фреймов в закладки.</em> </p> <h3 id="16-3-1-ustanovka-tseli-po-umolchaniyu-dlya">16.3.1 Установка цели по умолчанию для ссылок </h3> <p>Если во многих ссылках в документе используется одна и та же цель, можно указать ее один раз и использовать везде с помощью атрибута target каждого элемента. Это делается с помощью утсановки атрибута target элемента BASE .</p> <p>Вернемся к предыдущему примеру и определим информацию о цели в элементе BASE и удалим ее из элементов A .</p> <h3 id="16-3-2-semantika-tseley">16.3.2 Семантика целей </h3> <p>Агенты пользователей должны определять целевой фрейм, в который должен загружаться связанный ресурс в соответствии со следующими приоритетами (от высшего к низшему): </p> <ol> <li>Если в элементе установлен атрибут target и используется известный фрейм, при активизации элемента (то есть щелчке на ссылки или обработке формы) назначаемый элементом ресурс должен загружаться в указанном целевом фрейме.</li> <li>Если для элемента не установлен атрибут target , а в элементе BASE он установлен, фрейм определяется атрибутом target элемента BASE .</li> <li>Если ни в самом элементе, ни в элементе BASE цель не указана, назначенный элементом ресурс должен загружаться во фрейм, в котором содержится сам элемент.</li> <li>Если в атрибуте target указан неизвестный фрейм <tt>F</tt>, агент пользователя должен создать новое окно и фрейм, назначить фрейму имя <tt>F</tt> и загрузить назначаемый элементом ресурс в новый фрейм.</li> </ol> <p>Агенты пользователей могут обеспечивать для пользователей механизм переопределения атрибута target .</p> <h2 id="16-4-alternativnoe-soderzhimoe">16.4 Альтернативное содержимое </h2> <p>Авторы должны указывать альтернативное содержимое для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы не отображать их.</p> <h3 id="16-4-1-element-noframes">16.4.1 Элемент NOFRAMES </h3> <p>Элемент NOFRAMES задает содержимое, которое должно отображаться, только если не отображаются фреймы. Агенты пользователей, поддерживающие фреймы, должны отображать содержимое объявления NOFRAMES , только если они сконфигурированы так, чтобы не отображать фреймы. Агенты пользователей, не поддерживающие фреймы, должны отображать содержимое элемента NOFRAMES в любом случае.</p> <p>Элемент NOFRAMES можно использовать в разделе FRAMESET документа с фреймами.</p> <h3 id="16-4-2-dlinnye-opisaniya-freymov">16.4.2 Длинные описания фреймов </h3> <p>Атрибут longdesc позволяет авторам сделать документы с использованием фреймов более доступными для людей, использующих невизуальные агенты. В этом атрибуте назначается ресурс, предоставляющий длинное описание фрейма. Авторам следует обратить внимание, что длинные описания, связанные с фреймами, прикрепляются к <em>фрейму</em>, а не к его содержимому. Поскольку содержимое может изменяться, исходное длинное описание, скорее всего, перестанет соответствовать содержимому фрейма. В частности, не следует включать изображение как единственное содержимое фрейма.</p> <p>В следующем документе с фреймами описываются два фрейма. В левом фрейме находится содержание, а в правом сначала &#8212; изображение устрицы:</p> <p>Обратите внимание, что изображение включено в фрейм независимо от любого элемента HTML, так что у автора нет другой возможности указать альтернативный текст, кроме атрибута longdesc . Если содержимое правого фрейма изменится (например, пользователь выберет в содержании змею), у пользователя не будет текстового доступа к новому содержимому фрейма.</p> <p>Таким образом, авторы не должны помещать изображение непосредственно в фрейм. Вместо этого изображение должно включаться в отдельный документ HTML и снабжаться там соответствующим альтернативным текстом:</p> <h2 id="16-5-vstroennye-freymy-element-iframe">16.5 Встроенные фреймы : элемент IFRAME </h2> <p><em>Определения атрибутов</em> longdesc = uri [CT] Этот атрибут определяет ссылку на длинное описание фрейма. Это описание должно дополнять краткое описание, задаваемое атрибутом title , и особенно полезно для невизуальных агентов пользователей. name = <em>cdata</em> [CI] Этот атрибут назначает имя текущего фрейма. Имя может использоваться в качестве цели в ссылках. width = <em>длина</em> [CN] Длина встроенного фрейма. height = <em>длина</em> [CN] Высота встроенного фрейма.</p> <p>Встраиваемая инфомрация назначается атрибутом src этого элемента. <em>Содержимое</em> элемента IFRAME , с другой стороны, должно отображаться только агентами пользователей, не поддерживающими фреймы или сконфигурированными так, чтобы не поддерживать их.</p> <p>Для поддерживающих фреймы агентов пользователей в следующем примере в текст будет помещен отделенный границей встроенный фрейм.</p> <p>Изменять размер встроенных фреймов нельзя (и поэтому у них нет атрибута noresize ).</p> <p><em><strong>Примечание.</strong> Документы HTML могут также внедряться в другие документы HTML с помощью элемента OBJECT . Подробнее см. в разделе о внедренных документах.</em> </p> <h2 id="16-frames">16 Frames</h2> <p><strong>Contents</strong></p> <h2 id="16-1-introduction-to-frames">16.1 Introduction to frames </h2> <p>HTML frames allow authors to present documents in multiple views, which may be independent windows or subwindows. Multiple views offer designers a way to keep certain information visible, while other views are scrolled or replaced. For example, within the same window, one frame might display a static banner, a second a navigation menu, and a third the main document that can be scrolled through or replaced by navigating in the second frame.</p> <p>Here is a simple frame document:</p> <p>that might create a frame layout something like this:</p> <p>If the user agent can&#8217;t display frames or is configured not to, it will render the contents of the NOFRAMES element.</p> <h2 id="16-2-layout-of-frames">16.2 Layout of frames</h2> <p>An HTML document that describes frame layout (called a ) has a different makeup than an HTML document without frames. A standard document has one HEAD section and one BODY . A frameset document has a HEAD , and a FRAMESET in place of the BODY .</p> <p>The FRAMESET section of a document specifies the layout of views in the main user agent window. In addition, the FRAMESET section can contain a NOFRAMES element to provide alternate content for user agents that do not support frames or are configured not to display frames.</p> <p>Elements that might normally be placed in the BODY element must not appear before the first FRAMESET element or the FRAMESET will be ignored.</p> <h3 id="16-2-1-the-frameset-element">16.2.1 The FRAMESET element</h3> <p> rows = <em>multi-length-list</em> [CN] This attribute specifies the layout of horizontal frames. It is a comma-separated list of pixels, percentages, and relative lengths. The default value is 100%, meaning one row. cols = <em>multi-length-list</em> [CN] This attribute specifies the layout of vertical frames. It is a comma-separated list of pixels, percentages, and relative lengths. The default value is 100%, meaning one column.</p> <p><em>Attributes defined elsewhere</em></p> <p>The FRAMESET element specifies the layout of the main user window in terms of rectangular subspaces.</p> <h4 id="rows-and-columns">Rows and columns</h4> <p>Setting the rows attribute defines the number of horizontal subspaces in a frameset. Setting the cols attribute defines the number of vertical subspaces. Both attributes may be set simultaneously to create a grid.</p> <p>If the rows attribute is not set, each column extends the entire length of the page. If the cols attribute is not set, each row extends the entire width of the page. If neither attribute is set, the frame takes up exactly the size of the page.</p> <p>Frames are created left-to-right for columns and top-to-bottom for rows. When both attributes are specified, views are created left-to-right in the top row, left-to-right in the second row, etc.</p> <p>The first example divides the screen vertically in two (i.e., creates a top half and a bottom half).</p> <p>The next example creates three columns: the second has a fixed width of 250 pixels (useful, for example, to hold an image with a known size). The first receives 25% of the remaining space and the third 75% of the remaining space.</p> <p>The next example creates a 2&#215;3 grid of subspaces.</p> <p>For the next example, suppose the browser window is currently 1000 pixels high. The first view is allotted 30% of the total height (300 pixels). The second view is specified to be exactly 400 pixels high. This leaves 300 pixels to be divided between the other two frames. The fourth frame&#8217;s height is specified as &#171;2*&#187;, so it is twice as high as the third frame, whose height is only &#171;*&#187; (equivalent to 1*). Therefore the third frame will be 100 pixels high and the fourth will be 200 pixels high.</p> <p>Absolute lengths that do not sum to 100% of the real available space should be adjusted by the user agent. When underspecified, remaining space should be allotted proportionally to each view. When overspecified, each view should be reduced according to its specified proportion of the total space.</p> <h4 id="nested-frame-sets"> Nested frame sets </h4> <p>Framesets may be nested to any level.</p> <p>In the following example, the outer FRAMESET div >FRAMESET then divides the second area into two rows of unequal height.</p> <h4 id="sharing-data-among-frames">Sharing data among frames </h4> <p>Authors may share data among several frames by including this data via an OBJECT element. Authors should include the OBJECT element in the HEAD element of a frameset document and name it with the id attribute. Any document that is the contents of a frame in the frameset may refer to this identifier.</p> <p>The following example illustrates how a script might refer to an OBJECT element defined for an entire frameset:</p> <h3 id="16-2-2-the-frame-element">16.2.2 The FRAME element</h3> <p>name = <em>cdata</em>[CI] This attribute assigns a name to the current frame. This name may be used as the target of subsequent links. longdesc = <em>uri</em>[CT] This attribute specifies a link to a long description of the frame. This description should supplement the short description prov > title attribute, and may be particularly useful for non-visual user agents. src = <em>uri</em>[CT] This attribute specifies the location of the initial contents to be contained in the frame. noresize[CI] When present, this boolean attribute tells the user agent that the frame window must not be resizeable. scrolling = auto|yes|no [CI] This attribute specifies scroll information for the frame window. Possible values </p> <ul> <li>auto: This value tells the user agent to provide scrolling devices for the frame window when necessary. This is the default value.</li> <li>yes: This value tells the user agent to always provide scrolling devices for the frame window.</li> <li>no: This value tells the user agent not to provide scrolling devices for the frame window.</li> </ul> <p>frameborder = 1|0 [CN]This attribute provides the user agent with information about the frame border. Possible values: </p> <ul> <li>1: This value tells the user agent to draw a separator between this frame and every adjoining frame. This is the default value.</li> <li>0: This value tells the user agent not to draw a separator between this frame and every adjoining frame. Note that separators may be drawn next to this frame nonetheless if specified by other frames.</li> </ul> <p>marginwidth = <em>pixels</em>[CN]This attribute specifies the amount of space to be left between the frame&#8217;s contents in its left and right margins. The value must be greater than zero (pixels). The default value depends on the user agent. marginheight = <em>pixels</em>[CN] This attribute specifies the amount of space to be left between the frame&#8217;s contents in its top and bottom margins. The value must be greater than zero (pixels). The default value depends on the user agent.</p> <p><em>Attributes defined elsewhere</em></p> <p>The FRAME element defines the contents and appearance of a single frame.</p> <h4 id="setting-the-initial-contents-of-a-frame">Setting the initial contents of a frame </h4> <p>The src attribute specifies the initial document the frame will contain.</p> <p>The following example HTML document:</p> <p>should create a frame layout something like this:</p> <p>and cause the user agent to load each file into a separate view.</p> <p>The contents of a frame must not be in the same document as the frame&#8217;s definition.</p> <p>ILLEGAL EXAMPLE: <br />The following frameset definition is not legal HTML since the contents of the second frame are in the same document as the frameset.</p> <h4 id="visual-rendering-of-a-frame">Visual rendering of a frame</h4> <p>The following example illustrates the usage of the decorative FRAME attributes. We specify that frame 1 will allow no scroll bars. Frame 2 will leave white space around its contents (initially, an image file) and the frame will not be resizeable. No border will be drawn between frames 3 and 4. Borders will be drawn (by default) between frames 1, 2, and 3.</p> <h2 id="16-3-specifying-target-frame-information">16.3 Specifying target frame information </h2> <p><em><strong>Note.</strong> For information about current practice in determining the target of a frame, please consult the notes on frames in the appendix.</em></p> <p> target = <em>frame-target</em> [CI] This attribute specifies the name of a frame where a document is to be opened.</p> <p>Please consult the section on target frame names for information about recognized frame names.</p> <p>This example illustrates how targets allow the dynamic modification of a frame&#8217;s contents. First we define a frameset in the document <tt>frameset.html</tt>, shown here:</p> <p>Then, in <tt>init_dynamic.html</tt>, we link to the frame named &#171;dynamic&#187;.</p> <p>Activating either link opens a new document in the frame named &#171;dynamic&#187; while the other frame, &#171;fixed&#187;, maintains its initial contents.</p> <p><em>There is currently no way to encode the entire state of a frameset in a URI. Therefore, many user agents do not allow users to assign a bookmark to a frameset.</em></p> <h3 id="16-3-1-setting-the-default-target-for-links">16.3.1 Setting the default target for links </h3> <p>When many links in the same document designate the same target, it is possible to specify the target once and dispense with the target attribute of each element. This is done by setting the target attribute of the BASE element.</p> <p>We return to the previous example, this time factoring the target information by defining it in the BASE element and removing it from the A elements.</p> <h3 id="16-3-2-target-semantics">16.3.2 Target semantics </h3> <p>User agents should determine the target frame in which to load a linked resource according to the following precedences (highest priority to lowest):</p> <ol> <li>If an element has its target attribute set to a known frame, when the element is activated (i.e., a link is followed or a form is processed), the resource designated by the element should be loaded into the target frame.</li> <li>If an element does not have the target attribute set but the BASE element does, the BASE element&#8217;s target attribute determines the frame.</li> <li>If neither the element nor the BASE element refers to a target, the resource designated by the element should be loaded into the frame containing the element.</li> <li>If any target attribute refers to an unknown frame <tt>F</tt>, the user agent should create a new window and frame, assign the name <tt>F</tt> to the frame, and load the resource designated by the element in the new frame.</li> </ol> <h2 id="16-4-alternate-content">16.4 Alternate content </h2> <p>Authors should supply alternate content for those user agents that do not support frames or are configured not to display frames.</p> <h3 id="16-4-1-the-noframes-element">16.4.1 The NOFRAMES element</h3> <p><em>Attributes defined elsewhere</em></p> <p>The NOFRAMES element specifies content that should be displayed only by user agents that do not support frames or are configured not to display frames. User agents that support frames must only display the contents of a NOFRAMES declaration when configured not to display frames. User agents that do not support frames must display the contents of NOFRAMES in any case.</p> <p>The NOFRAMES element is part of both the transitional and frameset DTDs. In a document that uses the frameset DTD, NOFRAMES may be used at the end of the FRAMESET section of the document.</p> <p> NOFRAMES may be used, for example, in a document that is the source of a frame and that uses the transitional DTD. This allows authors to explain the document&#8217;s purpose in cases when it is viewed out of the frameset or with a user agent that doesn&#8217;t support frames.</p> <h3 id="16-4-2-long-descriptions-of-frames">16.4.2 Long descriptions of frames </h3> <p>The longdesc attribute allows authors to make frame documents more accessible to people using non-visual user agents. This attribute designates a resource that provides a long description of the frame. Authors should note that long descriptions associated with frames are attached to the <em>frame</em>, not the frame&#8217;s contents. Since the contents may vary over time, the initial long description is likely to become inappropriate for the frame&#8217;s later contents. In particular, authors should not include an image as the sole content of a frame.</p> <p>The following frameset document describes two frames. The left frame contains a table of contents and the right frame initially contains an image of an ostrich:</p> <p>Note that the image has been included in the frame independently of any HTML element, so the author has no means of specifying alternate text other than via the longdesc attribute. If the contents of the right frame change (e.g., the user selects a rattlesnake from the table of contents), users will have no textual access to the frame&#8217;s new content.</p> <p>Thus, authors should not put an image directly in a frame. Instead, the image should be specified in a separate HTML document, and therein annotated with the appropriate alternate text:</p> <h2 id="16-5-inline-frames-the-iframe-element">16.5 Inline frames: the IFRAME element</h2> <p> longdesc = <em>uri</em> [CT] This attribute specifies a link to a long description of the frame. This description should supplement the short description prov > title attribute, and is particularly useful for non-visual user agents. name = <em>cdata</em> [CI] This attribute assigns a name to the current frame. This name may be used as the target of subsequent links. width = <em>length</em> [CN] The width of the inline frame. height = <em>length</em> [CN] The height of the inline frame.</p> <p><em>Attributes defined elsewhere</em></p> <p>The information to be inserted inline is designated by the src attribute of this element. The <em>contents</em> of the IFRAME element, on the other hand, should only be displayed by user agents that do not support frames or are configured not to display frames.</p> <p>For user agents that support frames, the following example will place an inline frame surrounded by a border in the middle of the text.</p> <p>Inline frames may not be resized (and thus, they do not take the noresize attribute).</p> <p><em><strong>Note.</strong> HTML documents may also be embedded in other HTML documents with the OBJECT element. See the section on embedded documents for details.</em></p> <h2 id="noframes-2">Noframes</h2> <p>This <b>obsolete</b> element is not recommended. Authors should generally find an alternative way to accomplish the same task while adhering to all best practices, or simply do without it if it is unimportant.</p> <p>The HTML element is part of the syntax. As created by Netscape and implemented by other browsers, it is used to allow a regular HTML structure to be nested in the structure. To older browsers that do not support the syntax, it appears that the document only contains the usual and structure (standard HTML behavior is to ignore tags that are not understood). Frames capable browsers will ignore content. This element has become obsolete since HTML4.</p> <h2 id="teg-noframes-atributy-tega-noframes">Тег NOFRAMES. Атрибуты тега NOFRAMES.</h2> <p>Если браузер не поддеривает фреймы, то содержимое тега NOFRAMES выводится на экран. Тег NOFRAMES помещается внутрь тега-контейнера FRAMESET самым последним элементом, если в документе несколько FRAMESET, то тег NOFRAMES помещается в последний.</p> <p><strong>Категория тега</strong> : <br />Фреймы. В HTML закрывающий тег необходим.</p> <p><strong>Атрибуты тега</strong> : <br /><strong>id</strong> &#8212; индитификатор. <br /><strong>class</strong> &#8212; класс CSS <br /><strong>title</strong> &#8212; всплывающая подсказка. <br /><strong>style</strong> &#8212; встроенный инлайн стиль. <br /><strong>onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup</strong> &#8212; события.</p> <p><strong>Тег noframes</strong>, синтаксис: <br />ваш браузер не поддерживает фреймы. .</p> <p>Список всех HTML-тегов. </td> </tr> </table> </td> <td > <table > <tr > <td >Информация:</td> </tr> <tr > <p>Поиск по тегам: <br />Список всех тегов <br />А вы знаете что при помощи CSS можно тег SMALL превратить в H1 и наоборот?</p> <h2 id="16-freymy-2">16 Фреймы</h2> <h2 id="16-1-vvedenie-v-freymy-2">16.1 Введение в фреймы </h2> <p>Фреймы в HTML позволяют авторам представлять документы в нескольких разделах, которые могут быть независимыми или вложенными окнами. Это обеспечивает дизайнерам способ оставлять некоторую информацию видимой, в то время как другая информация прокручивается или заменяется. Например, в одном окне в одном фрейме может отображаться статический баннер, во втором навигационное меню, а в третьем &#8212; сам документ, который можно прокручивать или переходить к другому с помощью навигации во втором фрейме.</p> <p>Вот простой документ с использованием фреймов:</p> <p>это может привести примерно к следующей структуре экрана:</p> <p>Если агент пользователя не может представлять фреймы или сконфигурирован так, чтобы не делать этого, он должен генерировать содержимое элемента NOFRAMES .</p> <h2 id="16-2-raspolozhenie-freymov-2">16.2 Расположение фреймов</h2> <p>Документ HTML, в котором описывается компоновка фреймов (называемый ), выглядит не так, как документ HTML без фреймов. Атндартный документ имеет один раздел HEAD и один раздел BODY . Документ с фреймами имеет раздел HEAD и раздел FRAMESET , который заменяет раздел BODY .</p> <p><center><iframe width="420" height="315" src="https://www.youtube.com/embed/QGwMKjywzQA" frameborder="0" allowfullscreen></iframe><br /> </center></p> <p>В разделе FRAMESET задается расположение фреймов в основном окне агента пользователя. Кроме того, в разделе FRAMESET может присутствовать элемент NOFRAMES с альтернативным содержимым для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы их не показывать.</p> <p>Элементы, обычно помещаемые в раздел BODY , не должны присутствовать до первого элемента FRAMESET , иначе элемент FRAMESET будет игнорироваться.</p> <h3 id="16-2-1-element-frameset-2">16.2.1 Элемент FRAMESET </h3> <p><em>Определения атрибутов</em> rows = <em>multi-length-list</em> [CN] Этот атрибут определяет расположение горизонтальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат одну строку. cols = = <em>multi-length-list</em> [CN] Этот атрибут определяет расположение вертикальных фреймов. Это разделенный запятыми список пикселов, процентов и относительных длин. По умолчанию используется 100%, что означат один столбец.</p> <p>Элемент FRAMESET определяет макет основного окна пользователя в виде прямоугольных пространств.</p> <h4 id="stroki-i-stolbtsy-2">Строки и столбцы</h4> <p>Установка атрибута rows определяет число горизонтальных отрезков пространства в наборе фреймов. Устанвока атрибута cols определяет число вертикальных отрезков. Для создания сетки можно установить оба атрибута одновременно.</p> <p>Если атрибут rows не установлен, каждый столбец занимает всю длину страницы. Если атрибут cols не установлен, каждая строка занимает всю ширину страницы. Если не установлен ни один из этитх атрибутов, фрейм занимает всю страницу.</p> <p>Фреймы создаются в направлении слева направо для столбцов и сверху вниз для строк. Если указаны оба атрибута, разделы окон создаются слева направо в верхней строке, слева направо во второй строке и т.д.</p> <p>В первом примере экран разделяется горизонтально на две части (то есть создаются верхняя и нижняя части).</p> <p>В следующем примере создается три столбца: второй имеет фиксированную ширину 250 пикселов (это полезно, например, для представления изображения известной ширины). Первый фрейм получает 25% оставшегося пространства, а третий &#8212; 75%.</p> <p>В следующем примере создается сетка 2&#215;3.</p> <p>Для следующего примера предположим, что окно браузера имеет высоту строго 1000 пикселов. Первый раздел получает 30% общей высоты (300 пикселов). Второй имеет высоту ровно 400 пикселов. Остается 300 пикселов на два другие фрейма. Для четвертого фрейма задана высота &#171;2*&#187;, так что он должен быть вдвое выше третьего, для которого заданы высота &#171;*&#187; (эквивалентно 1*). Таким оразом, третий фрейм будет иметь высоту 100 пикселов, а четвертый &#8212; 200.</p> <p>Абсолютные длины, если они не дают в сумме 100% реально доступного пространства, должны корректироваться агентом пользователя. Если указана длина менее фактической, оставшееся пространство должно равномерно распределяться между всеми разделами. Если указана длина, превышающая фактическую, каждый раздел должен уменьшаться в зависимости от того, какую часть пространства он занимает.</p> <h4 id="vlozhennye-nabory-freymov-2"> Вложенные наборы фреймов </h4> <p>Число уровней вложенности фреймов не ограничено.</p> <p>В следующем примере внешний элемент FRAMESET разделяет доступное пространство на три равных столбца. Внутренний элемент FRAMESET разделяет вторую область на две строки неравной высоты.</p> <h4 id="razdelenie-dannyh-mezhdu-freymami-2">Разделение данных между фреймами </h4> <p>Авторы могут разделять данные между несколькими фреймами, включая эти данные с помощью элемента OBJECT . Элемент OBJECT следует включать в элемент HEAD документа с фреймами и давать ему имя с помощью атрибута id . Любой документ, являющийся содержимым фрейма, может ссылаться на этот идентификатор.</p> <p>В следующем примере показано обращение скрипта к элементу OBJECT , определенному для всего набора фреймов:</p> <h3 id="16-2-2-element-frame-2">16.2.2 Элемент FRAME </h3> <p><em>Определения атрибутов</em>name = <em>cdata</em>[CI] Назначает имя текущему фрейму. Это имя может использоваться в качестве цели в последующих ссылках. longdesc = uri[CT] Ссылка на длинное описание фрейма. Это объявление должно дополнять краткое описание, задаваемое атрибутом title , и может быть особенно полезно для невизуальных агентов пользователей. src = <em>uri</em>[CT] Определяет местонахождение начального содержимого фрейма. noresize[CI] Если этот атрибут присутствует, он сообщает агенту пользователя, что размеры фрейма изменять нельзя. scrolling = auto|yes|no [CI] Этот атрибут задает информацию о прокрутке фрейма. Возможные значения </p> <ul> <li>auto: При необходимости предоставлять возможности прокрутки. Это значение используется по умолчанию.</li> <li>yes: Всегда предоставлять возможности прокрутки.</li> <li>no: Не предоставлять возможности прокрутки.</li> </ul> <p>frameborder = 1|0 [CN]Этот атрибут предоставляет агенту пользователя информацию о границе фрейма. Возможные значения: </p> <ul> <li>1: Агент пользователя должен изобразить разделитель между этим фреймам и всеми прилежащими фреймами. Это значение используется по умолчанию.</li> <li>0: Агент пользователя не должен отображать разделитель. Обратите внимание, что разделители могут все равно отображаться, если они заданы в других фреймах.</li> </ul> <p>marginwidth = <em>пикселы</em>[CN]Этот атрибут задает пространство, оставляемое во фрейме в качестве левого и правого полей. Значение должно превышать один пиксел. Значение по умолчанию зависит от агента пользователя. marginheight = <em>пикселы</em>[CN] Этот атрибут определяет верхнее и нижнее поля в фрейме. Значение должно превышать один пиксел. Значение по умолчанию зависит от агента пользователя.</p> <p>Элемент FRAME определяет содержимое и вид одного фрейма.</p> <h4 id="zadanie-ishodnogo-soderzhimogo-freyma-2"> Задание исходного содержимого фрейма </h4> <p>Атрибут src определяет исходный документ, содержащийся в фрейме.</p> <p>В следующем примере документа HTML:</p> <p>должна создаваться примерно следующая страница:</p> <p>а агент пользователя должен загружать каждый файл в отдельный раздел.</p> <p>Содержимое фрейма и его определение не должны находиться в одном документе.</p> <p>ПРИМЕР НЕДОПУСТИМОГО ИСПОЛЬЗОВАНИЯ: <br />Следующее определение фреймов не является допустимым в HTML, поскольку содержимое второго фрейма находится в документе, описывающем набор фреймов.</p> <h4 id="vizualnoe-predstavlenie-freyma-2">Визуальное представление фрейма</h4> <p>В следующем примере показано использование декоративных атрибутов FRAME . Фрейм 1 не должен содержать полос прокрутки. В фрейме 2 вокруг содержимого (изображения) останется пустое пространство, и размер фрейма нельзя будет изменять. Между фреймами 3 и 4 не будет границы. Границы (по умолчанию) будут присутствовать между фреймами 1, 2 и 3.</p> <h2 id="16-3-opredelenie-tseli-freyma-2">16.3 Определение цели фрейма </h2> <p><em><strong>Примечание.</strong> О том, как сейчас принято определять цель фрейма, Вы можете узнать в замечаниях о фреймах в приложении.</em> </p> <p><em>Определения атрибутов</em> target = <em>frame-target</em> [CI] Задает имя фрейма, в котором должен открываться документ.</p> <p>Информацию о рспознаваемых именах фреймов Вы можете найти в разделе о именах целевых фреймов.</p> <p>В этом примере показано, как цели обеспечивают динамическое изменение содержимого фрейма. Сначала определим набор фреймов в показанном здесь документе <tt>frameset.html</tt>:</p> <p>Затем в файле <tt>init_dynamic.html</tt> мы будем ссылаться на фрейм с именем &#171;dynamic&#187;.</p> <p>Активизация любой из ссылок приведет к открытию нового документа в фрейме с именем &#171;dynamic&#187;, в то время как в другом фрейме, &#171;fixed&#187;, сохраняется исходное содержимое.</p> <p><em>В настоящий момент невозможно кодировать полностью состояние набора фреймов в URI. Таким образом, многие агенты пользователей не позволяют пользователям вносить наборы фреймов в закладки.</em> </p> <h3 id="16-3-1-ustanovka-tseli-po-umolchaniyu-dlya-2">16.3.1 Установка цели по умолчанию для ссылок </h3> <p>Если во многих ссылках в документе используется одна и та же цель, можно указать ее один раз и использовать везде с помощью атрибута target каждого элемента. Это делается с помощью утсановки атрибута target элемента BASE .</p> <p>Вернемся к предыдущему примеру и определим информацию о цели в элементе BASE и удалим ее из элементов A .</p> <h3 id="16-3-2-semantika-tseley-2">16.3.2 Семантика целей </h3> <p>Агенты пользователей должны определять целевой фрейм, в который должен загружаться связанный ресурс в соответствии со следующими приоритетами (от высшего к низшему): </p> <ol> <li>Если в элементе установлен атрибут target и используется известный фрейм, при активизации элемента (то есть щелчке на ссылки или обработке формы) назначаемый элементом ресурс должен загружаться в указанном целевом фрейме.</li> <li>Если для элемента не установлен атрибут target , а в элементе BASE он установлен, фрейм определяется атрибутом target элемента BASE .</li> <li>Если ни в самом элементе, ни в элементе BASE цель не указана, назначенный элементом ресурс должен загружаться во фрейм, в котором содержится сам элемент.</li> <li>Если в атрибуте target указан неизвестный фрейм <tt>F</tt>, агент пользователя должен создать новое окно и фрейм, назначить фрейму имя <tt>F</tt> и загрузить назначаемый элементом ресурс в новый фрейм.</li> </ol> <p>Агенты пользователей могут обеспечивать для пользователей механизм переопределения атрибута target .</p> <h2 id="16-4-alternativnoe-soderzhimoe-2">16.4 Альтернативное содержимое </h2> <p>Авторы должны указывать альтернативное содержимое для агентов пользователей, не поддерживающих фреймы или сконфигурированных так, чтобы не отображать их.</p> <h3 id="16-4-1-element-noframes-2">16.4.1 Элемент NOFRAMES </h3> <p>Элемент NOFRAMES задает содержимое, которое должно отображаться, только если не отображаются фреймы. Агенты пользователей, поддерживающие фреймы, должны отображать содержимое объявления NOFRAMES , только если они сконфигурированы так, чтобы не отображать фреймы. Агенты пользователей, не поддерживающие фреймы, должны отображать содержимое элемента NOFRAMES в любом случае.</p> <p>Элемент NOFRAMES можно использовать в разделе FRAMESET документа с фреймами.</p> <h3 id="16-4-2-dlinnye-opisaniya-freymov-2">16.4.2 Длинные описания фреймов </h3> <p>Атрибут longdesc позволяет авторам сделать документы с использованием фреймов более доступными для людей, использующих невизуальные агенты. В этом атрибуте назначается ресурс, предоставляющий длинное описание фрейма. Авторам следует обратить внимание, что длинные описания, связанные с фреймами, прикрепляются к <em>фрейму</em>, а не к его содержимому. Поскольку содержимое может изменяться, исходное длинное описание, скорее всего, перестанет соответствовать содержимому фрейма. В частности, не следует включать изображение как единственное содержимое фрейма.</p> <p>В следующем документе с фреймами описываются два фрейма. В левом фрейме находится содержание, а в правом сначала &#8212; изображение устрицы:</p> <p>Обратите внимание, что изображение включено в фрейм независимо от любого элемента HTML, так что у автора нет другой возможности указать альтернативный текст, кроме атрибута longdesc . Если содержимое правого фрейма изменится (например, пользователь выберет в содержании змею), у пользователя не будет текстового доступа к новому содержимому фрейма.</p> <p>Таким образом, авторы не должны помещать изображение непосредственно в фрейм. Вместо этого изображение должно включаться в отдельный документ HTML и снабжаться там соответствующим альтернативным текстом:</p> <h2 id="16-5-vstroennye-freymy-element-iframe-2">16.5 Встроенные фреймы : элемент IFRAME </h2> <p><em>Определения атрибутов</em> longdesc = uri [CT] Этот атрибут определяет ссылку на длинное описание фрейма. Это описание должно дополнять краткое описание, задаваемое атрибутом title , и особенно полезно для невизуальных агентов пользователей. name = <em>cdata</em> [CI] Этот атрибут назначает имя текущего фрейма. Имя может использоваться в качестве цели в ссылках. width = <em>длина</em> [CN] Длина встроенного фрейма. height = <em>длина</em> [CN] Высота встроенного фрейма.</p> <p>Встраиваемая инфомрация назначается атрибутом src этого элемента. <em>Содержимое</em> элемента IFRAME , с другой стороны, должно отображаться только агентами пользователей, не поддерживающими фреймы или сконфигурированными так, чтобы не поддерживать их.</p> <p>Для поддерживающих фреймы агентов пользователей в следующем примере в текст будет помещен отделенный границей встроенный фрейм.</p> <p>Изменять размер встроенных фреймов нельзя (и поэтому у них нет атрибута noresize ).</p> <p><em><strong>Примечание.</strong> Документы HTML могут также внедряться в другие документы HTML с помощью элемента OBJECT . Подробнее см. в разделе о внедренных документах.</em> </p> <h2 id="iframe-i-frame-chto-eto-takoe-i-kak-luchshe">Iframe и Frame — что это такое и как лучше использовать фреймы в Html</h2> <p>Здравствуйте, уважаемые читатели блога KtoNaNovenkogo.ru. Сегодня речь пойдет о фреймах в языке Html. Понятное дело, что начнем мы сначала, а именно с того, что это такое за зверь. Так же поговорим о настоящем (Frame) и будущем (Iframe) этих элементов в языке гипертекстовой разметки текущей версии и в новом стандарте Html 5 при верстке сайтов.</p> <p>В конце статьи, после детального описания процесса создания встроенных фреймов и их классической структуры в Html коде (уже редко используется), мы затронем вопрос актуальности построения сайта на них, а так же обсудим возможные способы их применения в текущий период времени на примере моего блога.</p> <h2 id="chto-eto-takoe-i-chem-otlichaetsya-iframe">Что это такое и чем отличается Iframe от Frame</h2> <p>Что же это такое? Оказывается, что они могут использоваться не только на сайтах, но и в каких-либо приложениях к программам, но отличаются тем, что окно web страницы или же приложения будет разделено на несколько областей, в каждую из которых загружен какой-то отдельный документ. Причем, эти области фреймов ведут себя не зависимо друг от друга.</p> <p>Наверное, самый наглядный пример их использования, с которым сталкивались практически все из вас, это так называемые файлы помощи (хелпы), которые имеются у многих программ установленных на вашем компьютере.</p> <p>В левое окно загружен файл с меню хелпа, а в правом выводится соответствующий выбранному пункту меню документ. Примечательно, что такая структура позволяет не подгружать в левое окно повторно файл с меню при открытии нового документа в правом. Именно в этом и состоит <strong>основное преимущество использования фреймов</strong> в Html.</p> <p>Собственно, само название этих элементов следует трактовать именно как самостоятельное окно. С помощью фреймов у нас появляется возможность разбить одно большое окно на несколько фрагментов, которые в свою очередь могут служить приемниками для отдельных независимых друг от друга документов (страниц, текстов, изображений, видео и т.п.).</p> <p>Как создается фреймовая структура в языке гипертекстовой разметки? Если говорить про стандарт Html 4.01 (по классификации валидатора W3C), который является основным на текущий момент времени, то для этого используются три элемента — Frame, Frameset и Noframes.</p> <h3 id="iframe-vstroennyy-freym-v-standarte-html">Iframe — встроенный фрейм в стандарте Html 5</h3> <p>Если же говорить про стандарт Html 5 (наше будущее, некоторые элементы которого уже поддерживаются многими браузерами), то там тегов Frame, Frameset и Noframes, а равно и классической фреймовой структуры уже не будет, вместо них предусмотрен один единственный тэг Iframe (встроенный фрейм), о котором мы и поговорим в начале, а потом уже все внимание обратим на классическую схему из версии 4.01, которая сейчас, собственно, и используется.</p> <p>Iframe в отличии от классики, которая рассмотрена ниже, не требует замены тега Body на теги Frameset. Т.е. этот тег можно будет вставлять на обычные страницы, например, внутри параграфа или в любом другом месте. По своей сути этот элемент очень похож уже на рассмотренный нами тег Img.</p> <p>Он является строчным с замещаемым контентом, потому что ведет себя в точности как строчный элемент, но вот внутри него отображается <strong>посторонний внешний контент</strong>. Таких элементов в языке Html всего четыре — Img, Iframe, Object и Embed. Поэтому наш герой подразумевает наличие внешнего файла, который будет подгружаться в область, размер которой задается с помощью атрибутов этого тега.</p> <p>Т.о. Iframe является сточным элементом, в который загружается внешний объект (например, видеоролик). А для указания пути до этого файла, который должен подгружаться на странице, служит специальный атрибут Src. Но в отличии от Img элемент Iframe парный, т.е. <strong>имеется еще и закрывающий тег</strong>:</p> <p>В данном примере показан вывод на странице видеоролика с Youtube с помощью Iframe. Для того, чтобы ограничить область фрейма (окна), куда будет подгружаться внешний файл, предусмотрены атрибуты <strong>Width и Height</strong>, значения которых задаются в пикселах:</p> <p>Т.е. этот тег создает область, в которую загружается какой-то внешний объект (не важно, с вашего ли сайта или же с другого ресурса). Ширина и высота области задаются с помощью Width и Height, а в атрибуте Src указывается путь до этого объекта.</p> <p>Все эти атрибуты элемент Iframe унаследовал от подобных ему строчных тегов с замещаемым контентом (типа уже упомянутого выше Img). Ну, и еще у картинок он взял и атрибуты <strong>Hspace и Vspace</strong>, которые позволяют задать отступы от границ фрейма до обтекающего его текста.</p> <p>Так же показательно, что выравнивание встроенного фрейма осуществляется абсолютно так же, как мы это могли видеть при изучении картинок в Html — Обтекание и выравнивание картинки текстом — Align в Img. Все тот же <strong>Align</strong>, но уже для тега Iframe с возможными значениями Bottom, Top, Middle, Left и Right.</p> <p>Но этот элемент взял так же и несколько атрибутов от тэга Frame из классической фреймовой структуры, о которой мы очень и очень подробно поговорим ниже по тексту. К таким атрибутам относится Name, значение которого можно использовать в качестве значения атрибута гиперссылок Target для того, чтобы нужный вам документ при переходе по ссылке открывался именно в окне этого фрейма (подробности читайте ниже).</p> <p>Так же в Iframe из тега Frame перекочевал атрибут Frameborder, который имеет только два значения — либо 0 (рамка вокруг фрейма не отображается), либо 1 (рамка видна). По умолчанию используется значение Frameborder=1, поэтому для ее удаления вам потребуется прописать Frameborder=&#187;0&#8243;:</p> <p>Из Frame в этот элемент перешел еще и атрибут Scrolling, имеющий по умолчанию значение Auto — полосы прокрутки во фрейме будут появляться по мере необходимости, когда контент будет больше по размеру окна, предназначенного для его отображения.</p> <p>Ну, и атрибуты Marginwidth и Marginheight тоже перешли из элемента Frame. Они будут подробно рассмотрены ниже по тексту, но в двух словах — они позволяют задать отступ по ширине и высоте от краев фрейма до контента, который в него помещается.</p> <p>Как я уже упоминал, наглядным примером использования Iframe является вставка видеоролика с ютуба на свой сайт:</p> <p>Вставив Iframe напрямую в web страницу, вы получите вывод ролика с ютуба. Делаем вывод, что этот элемент является помесью строчных элементов с замещаемым контентом и, собственно, классических фреймов, о которых сейчас и пойдет речь.</p> <h2 id="freymy-na-osnove-tegov-frame-i-frameset-ih">Фреймы на основе тегов Frame и Frameset — их структура</h2> <p>Итак, создание классической фреймовой структуры начинается с того, что вы прописываете в Html коде вместо открывающего и закрывающего тега Body, который обычно должен присутствовать в любом документе, заменяющий его контейнер на основе элементов <strong>Frameset</strong>.</p> <p>Принципиальным моментом является как раз то, что элемент Body в этом случае использовать нельзя — либо Body (для обычного документа), либо Frameset (при создании фреймовой структуры документа):</p> <p>Каждый фрейм, который мы с вами формируем внутри главного, создается с помощью отдельного элемента <strong>Frame</strong>. Этот тег является одиночным и в нем мы задаем путь до того документа, который должен будет подгружаться в это окно.</p> <p>Третий элемент, который мы еще с вами не затронули — это <strong>Noframes</strong>. Он парный и позволяет написать внутри себя какой-то текст, который будет обработан браузером и отображен на web странице только в том случае, если этот самый браузер (или другое устройство отображения) не поддерживает фреймы. Это может произойти, например, в случае использования какого-нибудь обозревателя для мобильных устройств.</p> <p>Обычно в Noframes добавляют не только информацию о сложившейся ситуации с невозможностью обработки фреймовой структуры, но и добавляют так же возможность перейти на другие страницы, где можно будет продолжить работу без их использования. Сказать о нем что-то еще трудно, поэтому продолжим.</p> <p>Получается так, что элемент Frameset, используемый заместо тега Body, занимает все место, которое отведено для области просмотра, а уже внутри этой области будут создаваться фреймы с помощью отдельных элементов Frame. В связи с этим возникает вопрос — как делить область просмотра между отдельными окнами или, другими словами, как задать размер каждого из них.</p> <p>Делается это с помощью добавления соответствующих атрибутов к элементу Frameset. Их имеется целых два — <strong>Cols и Rows</strong>. Cols задает разделение большого окна на вертикальные фреймы или же колонки, а Rows позволяет разделить его на горизонтальные окна или же строки.</p> <h3 id="sozdanie-struktury-na-osnove-frameset-i-ego">Создание структуры на основе Frameset и его атрибутов Cols и Rows</h3> <p>В качестве значений для Cols и Rows Html тега Frameset выступают числа, проставленные через запятую (без пробелов). Эти числа задают пропорции тех окон, которые мы с вами хотим получить в результате. Следовательно, сколько будет написано чисел через запятую в Cols или в Rows, столько у нас фреймов и должно будет получиться в результате.</p> <p>Например, с помощью такой записи мы получим три вертикальных колонки, которые по ширине будут соответствовать пропорциям 2:5:3.</p> <p>Раз мы задали пропорции для трех фреймов, то мы должны будем обязательно прописать между открывающим и закрывающим тегом Frameset три элемента Frame, хотя бы и без указания дополнительных атрибутов:</p> <p>В результате наша фреймовая структура, состоящая из трех пустых окон, будет выглядеть так:</p> <p>В данном примере размеры окон (Frame) мы задавали с помощью процентов, которые берутся от ширины области просмотра (это в случае использования Cols) или от ее высоты (Rows). При изменении области просмотра процентное соотношение между размерами фреймов будет сохраняться. Но вместо процентов можно использовать и просто числа, которые будут означать ширину или высоту в пикселах. Тут, думаю, тоже никаких трудностей в понимании возникнуть не должно.</p> <p>Но есть в обозначениях размеров и довольно необычный вариант, который выглядит как <strong>звездочка &laquo;*&raquo;</strong>. Причем, может стоять как просто &laquo;*&raquo;, так и звездочка с цифрой впереди, например, так &laquo;3*&raquo;. Хитрая штуковина, очень похожая на проценты и означающая, что мы делим пространство для Frame пропорционально.</p> <p>Давайте посмотрим на примере. Теперь выберем деление области просмотра на горизонтальные строки с помощью Rows:</p> <p>Что означает эта запись? Вся область просмотра, доступная нам по вертикали, будет разделена на три строки. Высота первой будет взята в 200 пикселей, второй — в 500, а вот третья строка будет занимать все оставшееся пространство по высоте, т.к. в качестве ее размера использовалась &laquo;*&raquo;.</p> <p>Что примечательно, значение &laquo;*&raquo; и &laquo;1*&raquo; означают одно и то же — все оставшееся пространство мы делим на один и эту одну часть отдаем данному фрейму (ну, то есть все оставшееся пространство).</p> <p>А вот посмотрите что получится, если использовать значение &laquo;*&raquo; с цифрой для деления в пропорции:</p> <p>Как вы думаете, каковы должны будут получиться размеры Frame в этом случае? Понятно, что вторая строка будет однозначно иметь высоту в 100 пикселей. Но как поделится оставшееся пространство по высоте между третьей и первой строкой?</p> <p>Это довольно просто сосчитать — достаточно прибавить к двум (2*) четыре (4*) и разделить на этот знаменатель (помните дроби из школьной программы) двойку и четверку. Т.е. мы получим, что первая колонка с фреймом займет одну треть от оставшегося пространства по высоте, а третья колонка — две трети. Или же, другими словами, третья будет в два раза выше первой:</p> <p>Можно использовать все три способа задания размеров окон фреймов в одном атрибуте, например:</p> <p>В результате мы получим первую колонку Frame шириной в десять процентов от всей доступной области, вторую — 100 пикселей, а три оставшихся будут иметь ширину в пропорциях четыре, три и две девятых от оставшегося пространства по ширине. Вот так вот все просто и наглядно.</p> <p>Если вы хотите разбить основное окно не только на горизонтальные и вертикальные фреймы, а, например, на их комбинации, то можно будет для этого использовать вложенную структуру элементов Frameset отдельно для колонок и отдельно для строк. Например, чтобы получить структуру показанную на скриншоте чуть ниже, то достаточно использовать такую конструкцию:</p> <p>Т.е. сначала мы разбиваем с помощью &laquo;frameset cols=&raquo;20%,80%&#187;&laquo; все доступное пространство на две колонки по вертикали и задаем тегом &bdquo;frame&ldquo; содержимое правой колонки, а вот вместо того, что добавить элемент &bdquo;frame&ldquo; для левой колонки, мы открываем новый &bdquo;frameset rows=&ldquo;10%,*&raquo;&#187;.</p> <p>И уже с помощью него разбиваем правую колонку на две строки с фреймами, содержимое которых задаем с помощью двух тегов &laquo;frame&raquo;, после чего закрываем оба контейнера &laquo;frameset&raquo;. Все просто и логично.</p> <h3 id="ukazyvaem-put-v-atribute-src-elementa-frame">Указываем путь в атрибуте Src элемента Frame</h3> <p>Но это мы все говорили про элемент Frameset и его атрибуты Cols и Rows, с помощью которых формируем структуру и задаем их размеры. Теперь давайте разберемся с тем, как выводить в нужных фреймах нужные документы и как настроить взаимодействие между их окнами.</p> <p>Итак, как же мы управляем внешним видом создаваемых окон? Все это заложено в атрибутах тега Frame. Первый из них, о котором стоит упомянуть — это <strong>Src</strong>. Мы уже встречали его в теге Img, когда рассматривали вставку изображений в Html код. Суть его не изменилась и он по-прежнему позволяет указать путь до того документа, который должен быть загружен во фрейм.</p> <p>Путь до документа в Src может быть указан в виде относительной или абсолютной ссылки. Относительные пути обычно используются для документа, который расположен на вашем же ресурсе, а вот абсолютные вам понадобятся, когда вы захотите загрузить в окно фрейма документ с другого сайта.</p> <p>Если не будет прописан атрибут Src с указанием пути до нужного документа, то в окно будет загружен пустой документ. Лично я когда-то делал подобную вещь для своего блога (как дополнительный элемент навигации) и при этом создавал на сервере хостинга отдельную папку для него и помещал туда не только Html файлик с фреймовой структурой (который назвал index.html), но и все подгружаемые в различные окна документы, а так же файлы изображений, которые использовались в качестве фона.</p> <p>Поэтому мне было проще всего использовать именно относительные ссылки в атрибуте Src тега Frame:</p> <p>Что примечательно, если вы замените все приведенные в этом коде ссылки с относительных на абсолютные (типа https://ktonanovenkogo.ru/navigator/joomla.html) и откроете этот файл в браузере, то указанные во Frame документы будут подгружены с моего сервера и вы увидите аналогичную картинку в своем браузере. Причем не важно, где будет лежать ваш файл с фреймовой структурой (index.html) — на вашем компьютере или же на хостинге.</p> <p>В приведенном на рисунке примере, в окно левого фрейма у меня загружается страничка с неким меню, которое представляет из себя обычный маркированный Html список. Но не суть важно как формируется меню, а важно то, что произойдет после нажатия на любую из его ссылок.</p> <p>Если вы проделаете это, то все произойдет именно так, как надо — документ откроется в правом нижнем окне. Но для этого мне пришлось применить одну небольшую хитрость, ибо в варианте по умолчанию документ открывался на весь размер окна, заменяя собой фреймовую структуру, что мне было вовсе не нужно, ибо исчезало навигационное меню в левом и верхнем фреймах.</p> <h2 id="kak-otkryvat-dokumenty-po-ssylke-vo-freyme">Как открывать документы по ссылке во фрейме</h2> <p>Итак, когда мы говорили про гиперссылки, то упоминали такой атрибут тега &laquo;A&raquo;, как Target=_blank. Помните для чего он нужен? Правильно, чтобы открывать документ, на который проставлена ссылка, в новом окне. По умолчанию же, он должен открываться в том же самом окне, что эквивалентно target=&#187;_self&#187;.</p> <p>Но этим возможности <strong>Target</strong> не ограничиваются. Оказывается можно добавлять в него значение <strong>в виде названия фрейма</strong>, которое предварительно указывается в специальном атрибуте Name тега Frame. Тогда документ по этой ссылке будет открываться не в том же окне, занимая все его пространство, а в указанном вами Frame. Понятно? Если не совсем, то сейчас будет понятно при разборе примера.</p> <p>Итак, вернемся к нашему примеру приведенному на расположенном чуть выше рисунке. Нам нужно открывать страницы по ссылкам из левого окна в правом нижнем (большом) фрейме. Следовательно, для начала нужно этому большому окну дать имя с помощью атрибута Name в теге Frame.</p> <p>Сделали и назвали его &laquo;ktona&raquo;. Теперь можно смело открывать тот файл, что подгружается в качестве меню в левое окно и добавлять ко всем тегам A в нем атрибут Target=&#187;ktona&#187;:</p> <p>Конечно же, с помощью инструмента поиска и замены в Html редакторе Notepad проставить его для всех гиперссылок будет не трудно, но зачем же излишне загружать код, когда у нас есть прекрасная возможность использовать <strong>специальный тег Base</strong>, о котором мы уже упоминали все в той же статье про гиперссылки, когда говорили про использование Target blank.</p> <p>Достаточно лишь поставить между открывающим и закрывающим тегами Head элемент base target=&#187;ktona&#187; и все ссылки в Html коде этого документа будут открывать новые страницы в указанном фрейме под названием &laquo;ktona&raquo;:</p> <p>Кстати, если рассматривать мой когда-то существовавший инструмент в качестве примера, то нужно еще сделать так, чтобы все ссылки из верхнего горизонтального окна открывали бы свои страницы именно в левом вертикальном фрейме, которое служит у меня левым меню. Что нужно для этого сделать?</p> <p>Ну, во-первых, нужно дать имя левому вертикальному фрейму:</p> <p>А в файле, который загружается в верхнее окно (gor.html), нужно добавить элемент base target=&#187;gor&#187;:</p> <p>Все, теперь мы сделали все как надо. Все документы по ссылкам из верхнего фрейма открываются в левом окне, а все ссылки уже из него будут открывать документы в центральном и самом большом Frame. По-моему, все просто и логично.</p> <h3 id="atributy-tega-frame-dlya-nastroyki-vneshnego">Атрибуты тега Frame для настройки внешнего вида окон</h3> <p>Давайте теперь посмотрим, какие атрибуты кроме Src и Name можно использовать в теге Frame для настройки внешнего вида фреймов. Начнем с <strong>Scrolling</strong>. С помощью него мы можем настроить отображение полос прокрутки для каждого окна вашей фреймовой структуры в отдельности.</p> <p>Scrolling имеет значение по умолчанию Auto — браузер будет автоматически решать, на основе размера подгружаемого во фрейм документа, отображать полосу прокрутки или нет. Если документ не будет полностью помещаться в окно, то появится полоса прокрутки, позволяющая просмотреть его весь до конца.</p> <p>Так же в качестве значений для Scrolling можно использовать значения Yes (полосы прокрутки в окне будут отображаться всегда, даже если документ полностью влезает в него) и No (полосы прокрутки вообще никогда появляться не будут, даже если часть документа не влезет).</p> <p>Я в своем, когда-то существовавшем инструменте, использовал значение по умолчанию Auto и полосы прокрутки во фреймах появлялись по мере необходимости:</p> <p>Следующий атрибут тега Frame — <strong>Noresize</strong> — является одиночным (у него нет значений). Прописав его, вы тем самым запретите изменение его размеров, которое по умолчанию осуществляется простым перетаскиванием границы фреймов мышью.</p> <p>При подведении курсора мыши к границе вы увидите, что курсор превратится в двунаправленную стрелку и теперь, нажав на левую кнопку мыши, можно передвигать границу по вашему желанию. Noresize накладывает на это своеволие запрет (при подведении курсора мыши к границе окон, двунаправленную стрелочку вы уже не увидите).</p> <p>Еще один визуальный атрибут — <strong>Frameborder</strong>. C помощью него вы можете указать — рисовать рамку (границу) между фреймами или же не рисовать. Frameborder может иметь только два возможных значения — либо 0 (рамку не рисовать), либо 1 (границу отображать). По умолчанию, естественно, используется значение 1.</p> <p>Есть одна тонкость. Если вы хотите убрать видимую рамку, то вам придется добавить Frameborder=0 во все теги Frame тех фреймов, видимые границы между которыми вы хотите убрать.</p> <p>Ну, и еще нам осталось рассмотреть пару атрибутов тега Frame — <strong>Marginwidth и Marginheight</strong>, которые задают отступы по ширине (справа и слева) и высоте (сверху и снизу) от границ окна до контента загруженного в него (число означает количество пикселов отступа):</p> <h2 id="pochemu-nelzya-delat-sayt-na-freymah">Почему нельзя делать сайт на фреймах?</h2> <p>Давайте посмотрим в чем заключается принципиальный недостаток классических структур, который по сути ставит крест на их использовании при создании сайта. Он состоит в том, что по Url адресу этой фреймовой структуры <strong>невозможно отследить ее состояние</strong>.</p> <p>У сложных структур могут быть тысячи различных состояний (варианты документов открытых в различных окнах фреймов), но при этом Url адрес этой самой структуры не меняется. Из-за этого будет <strong>невозможно пользоваться закладками браузера</strong> или же отправлять ссылки на понравившиеся страницы другим пользователям. Почему?</p> <p>Потому что адрес остается неизменным и при открытии его из закладок браузера, или же из письма электронной почты, вы получите страницу со стартовым состоянием фреймовой структуры, а не то ее состояние, которое вы хотели бы сохранить.</p> <p>Хотя, конечно же, эта проблема решаема, но уже не средствами Html, а с помощью серверных (например, Php) или клиентских языков (ДжаваСкрипт) программирования, и решения эти будут работоспособными не на все сто процентов. Такие решения, по сути, позволяют дописывать к Url адресу фреймовой структуры дополнительные данные о ее текущем состоянии, но сделать это не просто, а надежность будет не абсолютной.</p> <p>Это первый минус использования фреймов для создания сайтов и очень весомый, но есть и еще один огромный минус. Поисковики, конечно же, уже давно научились индексировать их и извлекать из них адреса тех документов, которые подгружаются в их окна. Проблема в другом.</p> <p>Когда пользователь переходит из поисковой выдачи Яндекса или Google на ваш сайт, построенный на базе фреймовой структуры, то откроется только тот документ, который загружался в один из фреймов, а не вся структура. Понимаете, о чем я говорю?</p> <p>Пользователь увидит документ и <strong>не увидит навигации по вашему сайту</strong>, ибо она будет зашита в других окнах, а они подгружаются только в составе всей структуры.</p> <p>В итоге сайт, построенный на фреймах, становится просто не юзабельным. Хотя опять же есть решения этой проблемы на базе серверных скриптов, когда будет осуществляться редирект с адресов отдельных документов на фреймовую структуру находящуюся в нужном состоянии, но это опять же очень сложно и не всегда надежно.</p> <p>В общем, вывод можно сделать однозначный — <strong>создавать сайты на фреймах не нужно</strong>. Но зато они постоянно используются для создания хелпов для различных приложений, ну и еще где-то по мелочи могут пригодиться.</p> <p>Например, я создал фреймовую структуру, которую обозвал &laquo;Навигатор&raquo; (сейчас ее временно убрал) и которая стала своеобразным развернутым внешним меню для моего блога, которое, как мне кажется, должно упростить работу с ресурсом и повысить его юзабилити, а следовательно и улучшить поведенческие факторы, которые сейчас &laquo;без балды&raquo; очень и очень сильно влияют на продвижение сайта.</p> <p>Но, правда, во избежании каких-либо проблем с поисковыми системами, я закрыл от индексации через robots.txt всю эту фреймовую структуру, а так же добавил на всякий случай во все ее Html файлы мета тег Rodots с запретом их индексации:</p> <p>Но все эти ограничения касаются только структур на тегах Frame и Frameset, а <strong>встроенные фреймы на тегах Iframe</strong> не имеют никаких видимых недостатков, и их вполне можно и даже нужно использовать на своих проектах, хотя бы для вставки видеороликов с Ютуба.</p><div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://studiowb.ru/vvod-i-redaktirovanie-dokumentov/" target="_blank" class="u054b468053074334d708659c2ece261f"><!-- INLINE RELATED POSTS 1/3 //--><style> .u054b468053074334d708659c2ece261f { padding:0px; margin: 0; padding-top:1em!important; padding-bottom:1em!important; width:100%; display: block; font-weight:bold; background-color:#eaeaea; border:0!important; border-left:4px solid inherit!important; text-decoration:none; } .u054b468053074334d708659c2ece261f:active, .u054b468053074334d708659c2ece261f:hover { opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; text-decoration:none; } .u054b468053074334d708659c2ece261f { transition: background-color 250ms; webkit-transition: background-color 250ms; opacity: 1; transition: opacity 250ms; webkit-transition: opacity 250ms; } .u054b468053074334d708659c2ece261f .ctaText { font-weight:bold; color:#C0392B; text-decoration:none; font-size: 16px; } .u054b468053074334d708659c2ece261f .postTitle { color:#2C3E50; text-decoration: underline!important; font-size: 16px; } .u054b468053074334d708659c2ece261f:hover .postTitle { text-decoration: underline!important; } </style><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Илон Маск рекомендует:</span>&nbsp; <span class="postTitle">Ввод и редактирование документов</span></div></a></div> </div><!-- .entry-content --> </article><!-- #post-## --> <div class="entry-footer"> </div> <div class="b-share b-share--post"> <div class="b-share__title">Понравилась статья? Поделиться с друзьями:</div> <span class="b-share__ico b-share__vk js-share-link" data-uri="https://vk.com/share.php?url=https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F"></span> <span class="b-share__ico b-share__fb js-share-link" data-uri="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F"></span> <span class="b-share__ico b-share__tw js-share-link" data-uri="https://twitter.com/share?text=noframes+%D0%B2+HTML&url=https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F"></span> <span class="b-share__ico b-share__ok js-share-link" data-uri="https://connect.ok.ru/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F"></span> <span class="b-share__ico b-share__gp js-share-link" data-uri="https://plus.google.com/share?url=https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F"></span> <span class="b-share__ico b-share__whatsapp js-share-link js-share-link-no-window" data-uri="whatsapp://send?text=noframes+%D0%B2+HTML%20https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F"></span> <span class="b-share__ico b-share__viber js-share-link js-share-link-no-window" data-uri="viber://forward?text=noframes+%D0%B2+HTML%20https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F"></span> <span class="b-share__ico b-share__telegram js-share-link js-share-link-no-window" data-uri="https://telegram.me/share/url?url=https%3A%2F%2Fstudiowb.ru%2Fnoframes-v-html%2F&text=noframes+%D0%B2+HTML"></span> </div> <div class="b-related"> <div class="b-related__header"><span>Вам также может быть интересно</span></div> <div class="b-related__items"> <div id="post-11795" class="post-card post-11795 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jadro-i-processy/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/SoCIT-IT-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jadro-i-processy/" rel="bookmark" >Ядро и процессы</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Что такое ядро в биологии? Строение и функции ядра В каждой живой клетке протекает </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11811" class="post-card post-11811 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-programmirovanija-alfa/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/Info-tech-banner-1024x305-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-programmirovanija-alfa/" rel="bookmark" >Язык программирования alfa</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык программирования alfa По питанию контроллеры делятся на два типа: с питанием 220 В </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11796" class="post-card post-11796 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-cc/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/it-development-500x500-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-cc/" rel="bookmark" >Язык cc</a></div> </header><!-- .entry-header --> <div class="post-card__content"> C++ &#8212; Базовый синтаксис Когда мы рассматриваем программу на C ++, ее можно определить </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11812" class="post-card post-11812 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-refal/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/it-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/it-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/it-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-refal/" rel="bookmark" >Язык рефал</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык рефал Ура! Сегодня, 30.05.2005, наконец появилась адаптированная к современным платформам Windows-(95/98/ME/NT/2000/XP) и UNIX </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11781" class="post-card post-11781 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-pazvivajushhegosja-flaga/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/Technology-Innovation-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-pazvivajushhegosja-flaga/" rel="bookmark" >Эффект pазвивающегося флага</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Scrontch&#8217;s Flag Designer Design Your Flag! Generates Scalable Vector Graphics (SVG). This App requires </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11797" class="post-card post-11797 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-sql/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/information-technology-learning-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-sql/" rel="bookmark" >Язык sql</a></div> </header><!-- .entry-header --> <div class="post-card__content"> SQL-Урок 1. Язык SQL. Основные понятия. Для того, чтобы начать изучать SQL нам нужно </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11813" class="post-card post-11813 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-s/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/Accredited-Professional-Translation-Service-for-IT-Industry-Singapore-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-s/" rel="bookmark" >Язык с</a></div> </header><!-- .entry-header --> <div class="post-card__content"> C++ с нуля Этот самоучитель создан для тех, кто хочет освоить основы программирования на </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11782" class="post-card post-11782 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-gorjashhej-nadpisi/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/corporate-e1483006320338-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-gorjashhej-nadpisi/" rel="bookmark" >Эффект горящей надписи</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Простой огненный текст в Фотошопе Конечный результат: Ресурсы урока: Шаг 1 Создайте новый документ </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11798" class="post-card post-11798 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-documents-type-definitions-dtd/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/homepage-image-1-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-documents-type-definitions-dtd/" rel="bookmark" >Язык xml documents type definitions (dtd)</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык XML &#8212; практическое введение . Documents Type Definitions (DTD) В XML- документах DTD </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11814" class="post-card post-11814 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyki-i-grammatiki-prostejshij-kompiljator/"> <img width="278" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-3-278x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyki-i-grammatiki-prostejshij-kompiljator/" rel="bookmark" >Языки и грамматики простейший компилятор</a></div> </header><!-- .entry-header --> <div class="post-card__content"> ГРАММАТИКА ЯЗЫКОВ ПРОГРАММИРОВАНИЯ Описанию грамматики языка предшествует описание его алфавита. Алфавит любого языка состоит </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11783" class="post-card post-11783 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-ledjanoj-nadpisi/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/G10269-EC-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/G10269-EC-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/G10269-EC-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-ledjanoj-nadpisi/" rel="bookmark" >Эффект ледяной надписи</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Ледяной текст в Фотошопе Конечный результат: Ресурсы урока: 1. Создание фона Шаг 1 Создайте </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11799" class="post-card post-11799 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-dom-sovmestimye-analizatory/"> <img width="308" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-308x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-dom-sovmestimye-analizatory/" rel="bookmark" >Язык xml dom совместимые анализаторы</a></div> </header><!-- .entry-header --> <div class="post-card__content"> XML-анализаторы в java XML как набор байт в памяти, запись в базе или текстовый </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11815" class="post-card post-11815 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyki-opisanija-polzovatelskih-interfejsov/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/AI-is-coming-—-and-HR-is-not-prepared-8b38574-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyki-opisanija-polzovatelskih-interfejsov/" rel="bookmark" >Языки описания пользовательских интерфейсов</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Языки описания пользовательских интерфейсов Язык описания интерфейсов Язык описания интерфейсов (IDL), используемый OMG определяет </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11784" class="post-card post-11784 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-linzy-watcom-c/"> <img width="310" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-4-310x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-linzy-watcom-c/" rel="bookmark" >Эффект линзы (watcom c)</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Эффект линзы (watcom c) Просветляющие покрытия от ZEISS Высококачественные линзы требуют высоколассного подхода: защита, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11800" class="post-card post-11800 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-xml-v-microsoft-internet-explorer-5-0/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/5-Top-Technology-Trends-In-2019-And-The-Opportunities-They-Will-Create-1030x672-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-xml-v-microsoft-internet-explorer-5-0/" rel="bookmark" >Язык xml xml в microsoft internet explorer 5 0</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Основы XML для начинающих пользователей Введение в правильную разметку XML означает Extensible Markup Language, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11816" class="post-card post-11816 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyki-programmirovanija/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/IT-Technology-DANIA.jpg 700w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyki-programmirovanija/" rel="bookmark" >Языки программирования</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Языки программирования Язык программирования — искусственный (формальный) язык, предназначенный для записи программ для исполнителя </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11785" class="post-card post-11785 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-plameni/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/AI-is-coming-—-and-HR-is-not-prepared-8b38574-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-plameni/" rel="bookmark" >Эффект пламени</a></div> </header><!-- .entry-header --> <div class="post-card__content"> По-настоящему яркие ролики: эффект огня для видеомонтажа Как поразить зрителей с первых кадров? Самый </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11801" class="post-card post-11801 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-vvedenie/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/homepage-image-1-330x140.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-vvedenie/" rel="bookmark" >Язык xml введение</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Язык xml введение XML технологии и средства разработки Gupta Team Developer: XML технологии (Часть </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11817" class="post-card post-11817 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jakorja-html/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/shutterstock_306988172-1024x683-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jakorja-html/" rel="bookmark" >Якоря HTML</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Что такое ссылка якорь в HTML и как ее сделать? Когда мы имеем дело </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11786" class="post-card post-11786 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-razbitogo-teksta/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/IT-1-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" srcset="https://studiowb.ru/wp-content/uploads/2019/11/IT-1-330x140.jpg 330w, https://studiowb.ru/wp-content/uploads/2019/11/IT-1-770x330.jpg 770w" sizes="(max-width: 330px) 100vw, 330px" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-razbitogo-teksta/" rel="bookmark" >Эффект разбитого текста</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Создаем эффект разрушающегося текста при помощи Stipplism В сегодняшнем уроке мы создадим эффект разрушающегося </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11802" class="post-card post-11802 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-ispolzovanie-java-xml-obrabotchikov/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/54398_luca-bravo-217276-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-ispolzovanie-java-xml-obrabotchikov/" rel="bookmark" >Язык xml использование java xml обработчиков</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Java XML J ava Development Kit поставляется с двумя парсерами XML: DOM и SAX, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11818" class="post-card post-11818 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jandeks-krupnejshaja-poiskovaja-sistema/"> <img width="275" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/images-2-275x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jandeks-krupnejshaja-poiskovaja-sistema/" rel="bookmark" >Яндекс &#8212; крупнейшая поисковая система русскоязычного Интернета!</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Поисковые системы интернета – Полный список всех поисковых систем Чтобы увеличить посещаемость вашего сайта, </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11787" class="post-card post-11787 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jeffekt-skruchivanija/"> <img width="57" height="57" src="https://studiowb.ru/wp-content/uploads/2019/11/images2.png" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jeffekt-skruchivanija/" rel="bookmark" >Эффект скручивания</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Как добиться эффекта скручивания? Люди добрые помогите! Как сделать так чтобы здание скрутилось вокруг </div><!-- .entry-content --> </div><!-- #post-## --> <div id="post-11803" class="post-card post-11803 post type-post status-publish format-standard has-post-thumbnail category-obuchenie-programmirovaniu"> <div class="post-card__image"> <a href="https://studiowb.ru/jazyk-xml-opisanie-tehnologii/"> <img width="330" height="140" src="https://studiowb.ru/wp-content/uploads/2019/11/cloud_lines-330x140.jpg" class="attachment-thumb-wide size-thumb-wide wp-post-image" alt="" /> <div class="entry-meta"> <span class="entry-category"><span>Обучение программированию</span></span> <span class="entry-meta__info"> </span> </div><!-- .entry-meta --> </a> </div> <header class="entry-header"> <div class="entry-title"><a href="https://studiowb.ru/jazyk-xml-opisanie-tehnologii/" rel="bookmark" >Язык xml описание технологии</a></div> </header><!-- .entry-header --> <div class="post-card__content"> Синтаксис и основные понятия языка XML, создание валидных документов Понятие о языке XML XML </div><!-- .entry-content --> </div><!-- #post-## --> </div> </div> <meta itemprop="author" content="Study"> <meta itemprop="datePublished" content="2019-11-13T20:42:53+03:00"/> <meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://studiowb.ru/noframes-v-html/" content="noframes в HTML"> <meta itemprop="dateModified" content="2019-11-13"> <meta itemprop="datePublished" content="2019-11-13T20:42:53+03:00"> <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization"><div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject" style="display: none;"><img itemprop="url image" src="https://studiowb.ru/wp-content/uploads/2019/11/images-2.png" alt="Кодинг, CSS и SQL"></div><meta itemprop="name" content="Кодинг, CSS и SQL"><meta itemprop="telephone" content="Кодинг, CSS и SQL"><meta itemprop="address" content="https://studiowb.ru"></div> </main><!-- #main --> </div><!-- #primary --> </div><!-- micro --> <aside id="secondary" class="widget-area" itemscope itemtype="http://schema.org/WPSideBar"> <div id="search-2" class="widget widget_search"> <form role="search" method="get" id="searchform_4060" action="https://studiowb.ru/" class="search-form"> <label class="screen-reader-text" for="s_4060">Поиск: </label> <input type="text" value="" name="s" id="s_4060" class="search-form__text"> <button type="submit" id="searchsubmit_4060" class="search-form__submit"></button> </form></div> </aside><!-- #secondary --> </div><!-- #content --> <footer class="site-footer container" itemscope itemtype="http://schema.org/WPFooter"> <div class="site-footer-inner "> <div class="footer-info"> © 2021 Кодинг, CSS и SQL </div><!-- .site-info --> <div class="footer-counters"> </div> </div><!-- .site-footer-inner --> </footer><!-- .site-footer --> <button type="button" class="scrolltop js-scrolltop"></button> </div><!-- #page --> <script type="text/javascript"> <!-- var _acic={dataProvider:10};(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="//www.acint.net/aci.js";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})() //--> </script><script type='text/javascript'> /* <![CDATA[ */ var lang_array = {"text1":"\u0441\u0440\u0435\u0434\u043d\u0435\u0435","text2":"\u0438\u0437"}; var wps_ajax = {"url":"https:\/\/studiowb.ru\/wp-admin\/admin-ajax.php","nonce":"5a5042f8a9"}; /* ]]> */ </script> <script src='https://studiowb.ru/wp-content/themes/root/js/scripts.min.js?ver=2.3.2'></script> <script src='https://studiowb.ru/wp-includes/js/comment-reply.min.js?ver=5.2.10'></script> <script src='https://studiowb.ru/wp-includes/js/wp-embed.min.js?ver=5.2.10'></script> <!--LiveInternet counter--><script type="text/javascript"> new Image().src = "//counter.yadro.ru/hit?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><!--/LiveInternet--> </body> </html>