FRNET.NAROD.RU » Статьи » Свои теги в HTML

Автор: Алексей Голубев

Сайт: http://www.frnet.narod.ru/

В шестнадцатом выпуске рассылки я опубликовал совет о том, как можно сделать собственный тег, со своими параметрами отображения. Вот этот совет:

Если вам мало обыкновенных HTML-тегов, то вы имеете полное право создать свой собственный для этого создайте HTML-документ следующего типа:

<HTML XMLNS:namespace>
<HEAD>
<STYLE>
@media all {
namespace\:elementname { css-attribute1:value1; [ css-attribute2:value2; ... ] }
}
</STYLE>
</HEAD>

<BODY>
<namespace:elementname>
</namespace:elementname>
</BODY>
</HTML>

Теперь при помощи CSS вы можете задать все свойства нового тега. Этот тег будет работать только на той web-странице, на которой он описан.

От одного из подписчиков пришло письмо с просьбой немного пояснить приведенный совет. Итак начнем.

1. Директива @media

Данная директива позволяет указывать разные стили для экрана и печати. После директивы указывается параметр, который и привязывает стиль к способу вывода. Этот параметр может принимать следующие значения:

Значение параметра	Что оно означает
screen	Стиль только для экрана
print	Стиль только для принтера
all	Стиль и для экрана и для принтера

Теперь для понятности приведу небольшой пример:

<html>
<head>
<style>
@media screen {
body {font-size:10pt; font-family:verdana;}}
@media print {
body {font-size:8pt; font-family:Times New Roman}}
@media all {
h1 {font-size:30px; font-weight:normal;}}
</style>
</head>
<body>
<h1>H1</h1>
Просто текст
</body>
</html>

Что мы получим в итоге: на странице будет отображен заголовок H1 размером 30 пикселей, не жирный, шрифтом Verdana, под ним будет располагаться строка «Просто текст» размером 10 пунктов, шрифтом Verdana. После печати увидим ощутимую разницу: во-первых, шрифт поменяется на Times New Roman, а размер шрифта строки уменьшиться на два пункта.

2. Директива @import

Хотя в совете она и не встречалась, я решил вам показать, как она работает, как можно сочетать директивы. Вообще директива @import отвечает за вставку в таблицу стилей из другого файла. Если написать следующее:

@import url('style.css');

То html-документ или стилевой файл будет связан файлом style.css.

Как она может помочь, ведь есть тег , который и позволяет вставлять в документ стилевые таблицы из других файлов? Ответ: Не зря же я его начал описывать после описания директивы @media. Многие уже, наверное, поняли, к чему я клоню. Смотрите пример:

<html>
<head>
<style>
@media screen { @import url('screen.css'); }
@media print { @import url('print.css'); }
@media all { @import url('all.css'); }
</style>
</head>
<body>
<h1>H1</h1>
Просто текст
</body>
</html>

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

3. XMLNS:namespace и <namespace:elementname>

Тут в принципе описывать нечего. Используйте параметр тега HTML XMLNS:namespace для страниц, где будут находиться ваши теги.

<namespace:elementname> - меняйте elementname на любое другое имя (namespace: – нужно оставить!) и задавайте стиль, как показано в совете.

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

4. Небольшой пример

Вот пример демонстрирующий работу с собственным тегом:

<html xmlns:namespace>
<head>
<style>
namespace\:selftag { font-size:50px;}
</style>
</head>
<body>
<namespace:selftag>
SelfTag
</namespace:selftag>
</body>
</html>

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

Вы можете скачать скрипты разобранные в статье здесь.