HTML layer Tag

HTML Tag

The HTML tag is used to position and animate (through scripting) elements in a page. A layer can be thought of as a separate document that resides on top of the main one, all existing within one window.

This tag has support in Netscape 4 and higher versions of it.

Example

This example creates three overlapping layers. The back one is red, the middle one is blue, and the front one is green.

      
layer 1
  
layer 2
  
layer 3
    

This will produce following result, it will work in Netscape 4 and higher versions.

Global Attributes

This tag supports all the global attributes described in — HTML Attribute Reference

Specific Attributes

The HTML tag also supports following additional attributes:

Attribute	Value	Description
above	layer name	The name of the inline layer that will be positioned directly above the current layer in the z-order.
background	URL	A filename or URL for an image upon which the inline layer’s text and images will appear.
below	layer name	The name of the inline layer that will be positioned directly below the current layer in the z-order.
bgcolor	rgb(x,x,x) #xxxxxx colorname	The color to use for the inline layer background.
clip	number	The coordinates of the inline layer’s viewable area.
height	pixels	The inline layer’s height, in pixels.
left	number	The position of the left side of the inline layer. If the current inline layer is part of another layer.called the parent layer-then the position is relative to the parent layer.
name	layer name	The name of the inline layer.
pagex	number	The position of the left side of the inline layer relative to the browser window.
pagey	number	The position of the top of the inline layer relative to the browser window.
src	URL	The URL of a page that will appear inside the inline layer.
top	number	The position of the top of the inline layer. If the current inline layer is part of another layer—called the parent layer—then the position is relative to the parent layer.
visibility	show hide inherit	Determines whether the inline layer is visible.
width	pixels	The inline layer’s width, in pixels.
z-index	number	The inline layer’s position within the z-order. Inline layers with higher Z-INDEX values are positioned above inline layers with lower Z-INDEX values.

Event Attributes

This tag supports all the event attributes described in — HTML Events Reference

Browser Support

Источник

Верстка с помощью слоев

Несмотря на то, что термин «слой» достаточно устойчиво используется при разработке сайта, расшифровке этого понятия в литературе по сайтостроению практически не уделяется внимание. В дальнейшем мы будем активно использовать термин «слой», поэтому вначале необходимо определить, что же под ним подразумевается.

Первоначально слои ввела компания Netscape, включив в свой браузер поддержку тега . Этот тег позволял прятать/показывать текущее содержимое, устанавливать положение относительно окна браузера, накладывать один слой поверх других и загружать данные в содержимое слоя из файла. Что характерно, все эти параметры легко менялись с помощью JavaScript и это расширяло возможности по созданию действительно динамического контента на странице. Несмотря на столь впечатляющий набор возможностей, тег не был включен в спецификацию HTML и так и остался лишь расширением браузера Netscape.

Однако необходимость в указанных возможностях, которые бы применялись на сайтах, уже назрела, и в конце 1996 года синтаксис для работы со слоями был разработан и одобрен в рабочем проекте консорциума «CSS Positioning (CSS-P)». Основная нагрузка ложилась на стили, с их помощью можно управлять видом любого элемента, в том числе менять значения динамически через JavaScript. К сожалению, объектные модели браузеров для доступа к элементам разнились, поэтому приходилось писать достаточно сложный код, который бы учитывал эти различия.

В настоящее время разработчики популярных браузеров стали придерживаться спецификаций HTML и CSS, что сильно облегчило жизнь создателям сайтов, поскольку снизило время на отладку сайта в разных браузерах. Тем не менее, различия в подходах у браузеров существуют и при их возникновении разработчики придерживаются следующих форм работы.

• Если наблюдаются небольшие различия в отображении одного сайта в разных браузерах, то на эти отличия закрывают глаза. Попросту говоря, никак не исправляют. Здесь следует сделать оговорку, что сайт в любом случае должен отображаться корректно и без ошибок.
• Если у сайта имеются существенные различия при его показе в одном и другом браузере, то для их устранения применяют хаки.

Хак — это набор приемов, когда определенному браузеру «подсовывают» код, который понимается только этим браузером, а остальными игнорируется.

Несмотря на то, что хаки работают, использовать их следует ограниченно или вообще обходиться без них. Дело в том, что хаки снижают универсальность кода и для модификации параметров одного элемента приходится вносить изменения одновременно в разных местах.

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

Снова вернемся к слоям. Понятно, что они непосредственно связаны со стилями. Раз так, то не получается ли, что каждый элемент HTML-кода, к которому добавляются стили, является слоем? В каком-то смысле так и есть. Однако это внесло бы изрядную путаницу, если вместо «таблица» или «параграф» мы бы говорили «слой». Поэтому договоримся относить этот термин только к тегам .

Слой — это элемент веб-страницы, созданный с помощью тега , к которому применяется стилевое оформление.

Таким образом, верстка с помощью слоев заключается в конструктивном использовании тегов и стилей. При этом придерживаются следующих принципов.

Разделение содержимого и оформления

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

Активное применение тега

При использовании слоев существенное значение уделяется универсальному тегу , который выполняет множество функций. Фактически это основа, на которую «навешиваются» стили, превращая ее то в игрушку, то в зверушку. Совершенно не значит, что применяется только один этот тег, нужно ведь и рисунки вставлять и оформлять текст. Но при верстке с помощью слоев тег является кирпичиком верстки, ее базовым фундаментом.

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

Таблицы применяются только для представления табличных данных

При верстке слоями, конечно же, используются таблицы, но только в тех случаях, когда они нужны, например, для наглядного отображения чисел и других табличных данных. Вариант, когда от таблиц предлагается отказаться вообще, является нецелесообразным и, более того, вредным.

Использование стилей не является обязательной характеристикой верстки слоями, и для табличной верстки стили могут применяться достаточно активно. Другое дело, что это становится стандартом де-факто и без стилей теперь никак не обойтись.

Резюме

Слой — это базовый элемент верстки веб-страниц, при которой активно применяются стили и придерживаются спецификаций HTML и CSS. При таком подходе важная роль уделяется тегу , с которым у большинства людей и ассоциируются слои. В каком-то смысле это является верным, поэтому договоримся в дальнейшем употреблять термин «слой» к тегу , для которого указан стилевой идентификатор или класс. Таким образом, выражение «слой с именем content» подразумевает, что используется тег или .

Хотя современные браузеры более-менее корректно работают со стилями, иногда между ними возникают разногласия по поводу прочтения одного и того же кода. В подобных случаях веб-страница будет по-своему отображаться в разных браузерах. Чтобы этого не произошло, используют хаки — приемы, направленные на то, чтобы каждый браузер получил свой собственный код или стиль. Однако применение хаков при верстке считается плохим тоном, поэтому следует пользоваться ими лишь в крайних случаях или вообще обходиться без них.

Источник

HTML — Tag

The HTML tag is used to position and animate (through scripting) elements in a page. A layer can be thought of as a separate document that resides on top of the main one, all existing within one window.

This tag has support in Netscape 4 and higher versions of it.

Example

This example creates three overlapping layers. The back one is red, the middle one is blue, and the front one is green.

      
layer 1
  
layer 2
  
layer 3
    

This will produce the following result, it will work in Netscape 4 and higher versions.

Global Attributes

This tag supports all the global attributes described in − HTML Attribute Reference

Specific Attributes

The HTML tag also supports the following additional attributes −

Attribute	Value	Description
above	layer name	The name of the inline layer that will be positioned directly above the current layer in the z-order.
background	URL	A filename or URL for an image upon which the inline layer’s text and images will appear.
below	layer name	The name of the inline layer that will be positioned directly below the current layer in the z-order.
bgcolor	rgb(x,x,x) #xxxxxx colorname	The color to use for the inline layer background.
clip	number	The coordinates of the inline layer’s viewable area.
height	pixels	The inline layer’s height, in pixels.
left	number	The position of the left side of the inline layer. If the current inline layer is part of another layer.called the parent layer-then the position is relative to the parent layer.
name	layer name	The name of the inline layer.
pagex	number	The position of the left side of the inline layer relative to the browser window.
pagey	number	The position of the top of the inline layer relative to the browser window.
src	URL	The URL of a page that will appear inside the inline layer.
top	number	The position of the top of the inline layer. If the current inline layer is part of another layer—called the parent layer—then the position is relative to the parent layer.
visibility	show hide inherit	Determines whether the inline layer is visible.
width	pixels	The inline layer’s width, in pixels.
z-index	number	The inline layer’s position within the z-order. Inline layers with higher Z-INDEX values are positioned above inline layers with lower Z-INDEX values.

Event Attributes

This tag supports all the event attributes described in − HTML Events Reference

Browser Support

Источник

Тег layer

Тег (англ. layer — слой) — тег-контейнер, создает слой с абсолютным позиционированием.
Блочный элемент.

HTML: 3.2 | 4 / XHTML: 1.0 | 1.1

Синтаксис

Атрибуты

above	имя нижнего, по сравнению с текущим, слоя
background	URL фоновой картинки
below	имя верхнего, по сравнению с текущим, слоя
bgcolor	цвет фона
clip	координаты видимой области слоя
height	задает высоту слоя
id	уникальный идентификатор
left	смещение слоя влево относительно родительского контейнера
name	уникальное имя слоя
onblur	потеря фокуса элементом
onfocus	получение фокуса элементом
onload	окончание загрузки слоя
onmouseout	смещение указателя мыши с элемента
pagex	х-коотдината абсолютного позиционирования слоя
pagey	y-коотдината абсолютного позиционирования слоя
src	URL документа, который будет показан в границах слоя
top	смещение слоя вниз относительно родительского контейнера
visibility	определяет видимость слоя. Возможные варианты show, hide, inherit
width	задает ширину слоя
z-index	высота слоя. Обычно используется в случае перекрывающихся слоев

Пример

Рекомендации по использованию

• закрывающий тег обязателен ()
• элемент уровня блока, т.е. содержимое тега по умолчанию начинается с новой строки. После тега также добавляется перенос строки (если в свойствах блока не прописано другого)
• обязательных атрибутов нет
• тег отсутствует в стандартах HTML, не пройдет валидацию
• поддерживается только браузерами Netscape
• тег не рекомендуется использовать, вместо него следует применять тег со свойством position: absolute

Источник