Блоги: заметки с тегом html

Атрибут LANGUAGE

Евгений Степанищев — Wed, 19 Mar 2025 21:40:41 +0500

Просматривал тут публичные репозитории некого соискателя одной из наших вакансий, обратил внимание, что у него там, помимо всего прочего, лежат решённые задания со «Стэпика». Заглянул из любопытства, никаких особенных выводов не сделал, но удивился, что в тегах одного задания у него script содержит атрибут language. Это что же, его до сих пор учат писать?

Мне стало любопытно — он вообще сейчас какое-то значение имеет? Браузеры на него ориентируются? Когда-то он вполне имел смысл — у «Эксплорера», например, там мог стоять VBScript или, например, JScript.Encode — зашифрованный текст программы на ДжейСкрипте, это такой диалект ДжаваСкрипта от Микрософта.

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

А что же считается верным значением для ДжаваСкрипта? В угадайку играть не хотелось, скачал исходники «Хромиума», посмотрел что там используется. Как оказалось, подставить можно следующие значения (регистр значения не имеет):

javascript или x-javascript — это понятно, единственный сюрприз, что можно поставить «экс» перед словом;
ecmascript или x-ecmascript — тоже понятно, ДжаваСкрипт — расширение этого языка;
jscript — диалект языка в «Эксплорере», считается, что другие браузеры сейчас его тоже «знают», хотя на деле есть нюансы, но всем уже всё равно;
от javascript1.0 до javascript1.5 — когда-то указанием версии можно было разделять скрипты по уровню поддержки языка в браузере;
livescript — старое название языка «ДжаваСкрипта», я ещё помню времена, когда это значение использовалось, хотя и редко.

Сейчас, конечно, это скорее археология, чем какое-то нужное знание.

Тег HYPE (Netscape HYPE tag sound)

Евгений Степанищев — Wed, 28 Oct 2015 12:08:00 +0500

Евгений Степанищев:

Скриншот MacOS 9 с открытым окном браузера

Пятнадцать лет назад, ковыряя исходники браузера «Нетскейп», я наткнулся, в частности, на тег HYPE — в интернете того времени писали, что он воспроизводит какой-то звук, но только в старых версиях браузера и не под «Виндоуз». «Мака» у меня тогда не было, как и доступа к «Линуксу» с графическим интерфейсом, поэтому безуспешно поискав по интернету подробности, я исследование забросил.

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

Но времена же изменились! Теперь у нас есть виртуализация, образы виртуальных машин и быстрый интернет! Где-то полчаса ушло на поиск и скачивание второй версии «Нетскейпа», готовой виртуалки с девятой «МакОСью», установку всего найденного, разбирательство как всё запускается. Но при вводе заветного тега меня ждало препятствие, к счастью, устранимое — виртуалка заявила, что у меня нехватает какой-то Sound Machine и, вместо проигрывания звука, предложила скачать звуковой файл.

Файл оказался в формате .snd, который нормально открылся и проигрался уже в современном «Маке». Его содержимое — фраза «What is global hypermedia?» (из документа NCSA Mosaic Demo 1993 года, как объясняется на одной из страниц в интернете).

Я сконвертировал его в обычный МП3 и, если ваш браузер достаточно современный, можете послушать как звучит тот самый секретный тег:

What is global hypermedia?

Кстати, жаль, что я не догадался проиграть его на оригинальном «Макинтоше» в музее Эпл, в Москве. Если представиться случай, обязательно попробую!

Забытый тег: KEYGEN

Евгений Степанищев — Thu, 20 Nov 2008 17:58:00 +0500

Евгений Степанищев:

Реализация парсеров HTML различных браузеров содержит массу забытых тегов, о существовании которых помнят единицы, да и тем уже незачем их использовать. Один из таких тегов — KEYGEN, придуман, если не ошибаюсь, компанией Netscape для своего браузера (ещё до того как Netscape стал использовать Mozilla), содержит два атрибута — name и challenge и используется в составе форм (FORM).

Под Windows тег поддерживается всеми основными браузерами (с разным успехом) и не поддерживается альтернативным (вплоть по версии 8.0 beta2). В настоящий момент тег почти не используется. Прошло много лет и члены комитета WHATWG (основное детище который — куча браузеров и стандарт HTML5) вспомнили об этом теге.

Использование вкратце:

<form>
   <keygen name="pubkey" challenge="случайная строка">
   <input type="submit" value="Сгенерировать">
 </form>

Если ваш браузер поддерживает тег KEYGEN, вы увидите список из нескольких элементов, содержимое его зависит от браузера, но сводится к одному — длине ключа. При нажатии на кпопку отправки формы браузер сгенерирует пару ключей, публичный ключ (в формате SPKAC) будет отправлен на сервер (в поле, указанном в атрибуте «name» тега).

Сервер, получив сертификат, готовит специальный файл подписывает его и отсылает назад браузеру с заголовоком «application/x-x509-user-cert», вся процедура подробно описана в соответствующем письме из рассылки WHATWG.

После чего веб-сервер, настроенный соответствующим образом, может авторизовывать пользователя по клиентскому сертификату.

Custom tags в Internet Explorer

Евгений Степанищев — Mon, 03 Dec 2007 01:06:00 +0500

Евгений Степанищев:

Утверждаю и буду продолжать утверждать, что Internet Explorer — самый недооценённый браузер века интернета, а все более поздние идеи — суть калька технологий, которые в нём уже есть. Ещё одна технология, с которой я познакомился в году 1998. Тогда (впрочем, как и многие сейчас) в качестве «растяжек» для ограничения минимальной ширины контента, использовали так называемый «нуль-gif» — прозрачную GIF-картинку 1x1 пикселей, которая вставлялась внутрь контейнера. Картинке выставлялась нужна ширина и высота, таким образом контейнер не мог «схлопнуться».

Способ настолько популярен, что некоторые веб-серверы, например «nginx» (в модуле http_empty_gif) или 0W (директива EMPTY) умеют встроенные средства, чтобы её генерировать, причём 0W умеет даже менять её цвет.

В те времена, как я уже говорил, существовали только две программы, имеющие право носить звание «браузера» — это Internet Explorer и Netscape Navigator. Их различия, часто, были настолько коренными (в разнице отображения, а то и названиях тегов), что изготавливались две версии сайта — под два браузера и пользователя автоматически (или предлагая выбор) перебрасывали на одну из них. В частности, такая особенность вёрстки позволяла задействовать мощности браузеров на полную силу.

Custom tag — технология в Internet Explorer, позволяющая (в определённых пределах) «придумывать» свои теги. Что-то похожее есть сейчас в браузере «Опера» — можно использовать любое сочетание букв как тег, задав ему произвольный стиль, это хороший ход, потому что какую-то часть тегов можно описать в виде CSS-файла, не заморачиваясь над встроенной обработкой. Скорее всего, это было следствием поддержки «Оперой» WAP-сайтов (кстати, если вы не знали, то попробуйте — «Опера» отображает WAP-сайты!).

В Internet Explorer такой свободы нет, custom tag «работает» только в определённом пространстве имён, но есть и свои, очень существенные плюсы. Если вы не знаете, что такое пространство имён, не расстраивайтесь — на понимании сути это никак не сказывается. В следующем примере префикс «b:», с которого начинается тег и есть «пространство имён», а «xmlns:b» — его идентификатор.

Итак, в те далёкие времена я делал «растяжки» через специально придуманный custom tag «spacer», с появлением в 1999-м году IE 5 и expression в нём (специальные CSS-свойства, позволяющие использовать JavaScript внутри CSS) это стало делать ещё удобнее.

<html xmlns:b="/">
<style type="text/css">
b\:spacer
{
    display: inline-block;
    width: expression(this.width+'px');
    height: expression(this.height+'px');
}
</style>

Слово<b:spacer width="200" height="1"></b:spacer>Слово
</html>

В примере задан тег «spacer» в пространстве имён «b» (поэтому он используется с префиксом «b:», custom tags только так и работают). Я использовал expression в CSS, чтобы свойства новоявленного тега попадали в CSS. В «Опере» такой фокус невыполним, к сожалению, хотя свойство «attr» вполне подошло бы для такой цели, но он работает только с атрибутом «content».

В тех же рамках можно усложнить поведение — добавить значения по умолчанию, новые атрибуты, можно назвать тег для экономии «b:s» , а атрибуты — «w» и «h».

Неуловимый тег HYPE

Евгений Степанищев — Sat, 03 Nov 2007 16:50:00 +0500

Евгений Степанищев:

Разбирая заметки сайта за 2000—2003 гг. (всё думаю — конвертировать их или не нужно), наткнулся на старую заметку, где я пытался разобраться с недокументированными тегами браузеров. На тот момент актуальными были Internet Explorer и, почивший ныне, Netscape Navigator (другой браузер под тем же именем зачем-то до сих пор выпускает AOL). Оказалось, что, по меньшей мере, один из «секретных» тегов браузера от Netscape дожил до наших дней — это HYPE.

Его до сих пор можно найти в исходниках ядра Gecko и, соответсвенно, он работает в браузерах, основанных на этом ядре. Основное его назначение туманно, по всей видимости, он должен выводить какую-то картинку и играть мелодию, но только на платформах Unix и Mac:

The hype tag is just for fun. It only effects the UNIX version which can affor to have a sound file compiled into the binary. If we have the memory, create a fake image tag to replace the <HYPE> tag and process it.

Легко убедиться, что тег присутствует, если попробовать в FireFox повесить на него любой CSS стиль. Кстати, тег таким же образом «работает» и в Опере, потому что (и это оказалось для меня большим сюрпризом) в Опере можно использовать любое сочетание букв в качестве тега. Самая старая Опера, которая у меня есть на компьютере — 8.02 прекрасно отобразила красный бордюр вокруг свежеизобретённого мной тега «REDBORDER» со стилем «background: 1px solid red».

Я думаю, что тег, возможно, не совсем бесполезен, так как Internet Explorer за тег его не считает. Возможно, таким образом можно применять CSS к какому-то блоку, незаметно для Internet Explorer или скрывать от него часть контента (применяя «display: none» на тег HYPE).

Фокусы с GIF, прозрачность и hover

Евгений Степанищев — Thu, 01 Nov 2007 15:41:00 +0500

Евгений Степанищев:

Самые внимательные, наверное, заметили, что в прошлых заметках у меня на картинке использовалась эмуляция эффекта наведения на ссылку — посмотрите, если навести на картинку мышку, «ссылка», выделенная синим, на картинке подчеркнётся. И это не JavaScript.

Объяснение очень простое — картинка сделана с прозрачностью, далее при помощи CSS под неё подставлен белый фон, а при наведении (селектор «:hover») фон меняется на голубой. Такой же эффект использован на картинке с пистолетом слева (наведите мышку). Ссылка на картинке обязательна — без неё в Internet Explorer (версии ниже 7-й) фон менять не будет, «:hover» просто не сработает. Таблица стилей для этой картинки выглядит вот так:

a.gun:hover img { background: black } /* стиль при наведении мышкой */
a.gun img { margin: 0px; background: white } /* убираем поля в Opera и подкладываем белый фон */

HTML, соотвественно:

<a href="#" class="gun"><img src="gun.gif" /></a>

Если вам не ясно, почему пистолетик «стреляет» (т. е. почему изображение движется, когда наводишь мышку), то тут всё просто — прозрачная область движется (это animated GIF), на белом фоне этого не видно, когда фон меняется, создаётся эффект движущейся пули.

Ещё интересные эффекты можно получить, если использовать альфа-канал (полупрозрачность) в формате PNG, но, к сожалению, об анимации тут придётся забыть.

HTA (HTML application)

Евгений Степанищев — Sun, 10 Dec 2000 03:01:00 +0500

Евгений Степанищев:

После появления на свет WebICQ, я получил множество писем с просьбами рассказать, что такое HTA и WScript. О WScript как-нибудь в другой раз, а сегодня я расскажу о том что такое HTA.

HTA (или HTML Application) — так называемые «безбраузерные приложения», выполнение которых — одна из возможностей браузера Internet Explorer 5.0. С точки зрения пользователя, такая программа ничем (кроме, разве что, расширения) не отличается от любой другой: имеет заголовок окна, свою иконку, отображается в панели задач и т. п.

С точки зрения программиста, HTA — обычная Веб-страничка: для ее создания используются все те же HTML, CSS, JScript и VBScript. Единственное, что ее отличает от всего того, что можно увидеть на любом сайте, это наличие заголовочного тега (в общем случае он может отсутствовать) и полное отсутствие системы безопасности (как и в любом нормальном приложении).

Тег заголовка позволяет программисту управлять некоторыми параметрами созданного приложения. Выглядит он, как простой XML-тег, расположенный внутри тела программы (обратите внимание пробел перед «/>» обязателен!): <HTA:APPLICATION... />.

Параметры перечисляются внутри тега, например, так, как это показано ниже:

<HTA:APPLICATION ID="oHTA"
APPLICATIONNAME="myApp"
VERSION="1.0"
WINDOWSTATE="maximize" />

Хотя параметров довольно много (все они перечислены в Таблице 1), мне, например, очень не хватает еще двух: WIDTH и HEIGHT, которые позволили бы задавать размер окна, не вызывая методов JScript или VBScript.

Таблица 1

Параметр	В JavaScript	Назначение	Значения
`APPLICATIONNAME`	`applicationName`	Имя приложения	строка
`BORDER`	`border`	Тип бордюрa	`thin`, `dialog`, `none`, `thin`
`BORDERSTYLE`	`borderStyle`	Стиль бордюра внутри HTA	`normal`, `complex`, `raised`, `static`, `sunken`
`CAPTION`	`caption`	Наличие заголовка	`yes`, `no`
	`commandLine`	Содержимое командной строки
`CONTEXTMENU`	`contextMenu`	Управляет наличием меню правой кнопки мыши	`yes`, `no`
`ICON`	`icon`	Задает иконку приложения	URL (строка)
`INNERBORDER`	`innerBorder`	Внутренний бордюр	`yes`, `no`
`MAXIMIZEBUTTON`	`maximizeButton`	Управляет кнопкой «развернуть»	`yes`, `no`
`MINIMIZEBUTTON`	`minimizeButton`	Управляет кнопкой «свернуть»	`yes`, `no`
`NAVIGABLE` (только для IE 5.5)	`navigable`	Переход по ссылке произойдет в окне HTA	`no`, `yes`
`SCROLL`	`scroll`	Наличие scroll bars	`yes`, `no`, `auto`
`SCROLLFLAT`	`scrollFlat`	Управление стилем scroll bars	`no`, `yes`
`SELECTION`	`selection`	Управляет возможностью выделения текста внутри HTA	`yes`, `no`
`SHOWINTASKBAR`	`showInTaskBar`	Отображать ли в панели задач	`yes`, `no`
`SINGLEINSTANCE`	`singleInstance`	Запретить запуск второго экземпляра?	`no`, `yes`
`SYSMENU`	`sysMenu`	Управляет наличием системного меню	`yes`, `no`
`VERSION`	`version`	Версия HTA	строка
`WINDOWSTATE`	`windowState`	Начальный размер окна	`normal`, `minimize`, `maximize`

Как видно из таблицы, все параметры приложения (большинство в режиме read-only) доступны из скриптовых языков. Что бы было понятно, как это делается, приведу небольшой пример для applicationName: oHTA.applicationName (oHTA — ID, заданный в заголовке).

Отсутствие системы безопасности означает, что разработчику предоставлена полная свобода доступа к ActiveX, а значит файловой системе и WScript. Кроме того, программист имеет возможность, при помощи атрибута APPLICATION, явно указать содержимое какого из внутренних фреймов может получить доступ к объектам приложения: <IFRAME SRC=content.htm APPLICATION=yes>.

Исходя из концепции безбраузерного приложения, Microsoft исключила из HTA функцию автозаполнения (AutoComplete of form) и закрыла доступ к объекту external.

Более подробно о HTA (на английском языке) можно почитать на сайте Microsoft MSDN.

Найди картинку. Неизведанные возможности Web-дизайна

Евгений Степанищев — Sat, 08 May 1999 02:00:00 +0500

Евгений Степанищев:

Заметка была впервые опубликована на сайте «Цитфорум» в 1999-м году, дата публикации примерно восстановлена из «Веб-архива»

Использование встроенных в NC картинок.

Однажды вечером, из любопытства просматривая файл NETSCAPE.EXE, я наткнулся на странный текст:

<IMG SRC=internal-attachment-icon BORDER=0>

Словечко internal наталкивало на определенные мысли и я решил их проверить. Набрав эту строку в виндовом блокноте я посмотрел на результат в NC. И вот что я увидел:

Wow! Я решил отыскать другие встроенные картинки, получился довольно приличный список, но уникальных оказалось не очень много, всего 22 штуки. Не ручаюсь, что я нашел все:

А вот список имен:

<IMG SRC=internal-attachment-icon>
<IMG SRC=internal-icon-insecure>
<IMG SRC=internal-icon-show-all-mail-recipients>
<IMG SRC=internal-gopher-binary>
<IMG SRC=internal-gopher-unknown>
<IMG SRC=internal-gopher-movie>
<IMG SRC=internal-gopher-sound>
<IMG SRC=internal-gopher-image>
<IMG SRC=internal-gopher-text>
<IMG SRC=internal-gopher-menu>
<IMG SRC=internal-gopher-index>
<IMG SRC=internal-gopher-telnet>
<IMG SRC=internal-smime-encrypted-bad>
<IMG SRC=internal-smime-signed-bad>
<IMG SRC=internal-smime-encrypted-signed-bad>
<IMG SRC=internal-edit-unsupported-end-tag>
<IMG SRC=internal-edit-unsupported-tag>
<IMG SRC=internal-edit-form-element>
<IMG SRC=internal-edit-named-anchor>
<IMG SRC=about:security?banner-secure>
<IMG SRC=internal-attachment-dl-all-icon>
<IMG SRC=internal-sa-encrypted-bad>
<IMG SRC=internal-sa-signed-bad>
<IMG SRC=internal-news-followup-and-reply>
<IMG SRC=internal-icon-delayed>

Использование встроенных рисунков позволяет ненамного, но все же уменьшить размер страницы. Жаль только, что способ непригоден для Internet Explorer’a. В идеале хорошо бы при просмотре страницы Netscape’ом загружался встроенный рисунок, а при использовании IE, нууу… хотя бы картинка из внешнего файла.

И тут я вспомнил о введенном еще в IE 2.0 атрибуте DYNSRC тега IMG.

Этот атрибут предназначен для вывода видеороликов, причем он имеет больший приоритет по сравнению с SRC. Идея оказалась удачной.

С помощью пресловутой кнопки PrintScreen и Adobe Photoshop я изготовил GIF-файл, содержащий первый в моём списке рисунок: internal-attached-icon, потом при помощи досовской утилиты VFD я сконвертировал его в AVI-файл, содержащий один-единственный кадр и сохранил его под именем 1.avi. Создав следующий HTML-файл:

<BODY BGCOLOR=WhiTE>
<IMG SRC=internal-attachment-icon DYNSRC=1.avi WIDTH=27 HEIGHT=27>
</BODY>

я посмотрел результат попеременно в NC и IE. Как и следовало ожидать в обоих браузерах я увидел одинаковую картинку:

Как любил говаривать герой игрушки Duke Nukem 3D «piece of cake!». Напоследок я решил просмотреть страничку в браузере Opera 3.51 и тут меня постигло жестокое разочарование: картинка появилась… и иcчезла, я смотрел на абсолютно белую страничку. Проблема решилась добавлением параметра LOOP=-1 в тег IMG. Если вы не рассчитываете, что вашу страницу будут смотреть пользователи браузера Opera, этот параметр лучше убрать, иначе при наведении курсора на картинку он будет мерцать.

Web-программист казанского центра Интернет Степанищев Евгений.