Обратная связь

Вы можете отправить пожелание по вопросам дизайна или другое приватное сообщение на адрес annet@ukrtop.com.

С мая месяца 2004 года запустили форум. Могу отвечать на вопросы там.

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

Преамбула

Copyright © 2001-2002 Raoul & Natalia Nakhmanson-Kulisn

Разрешается копировать, распространять и/или изменять данный текст при выполнении условий, описанных в GNU Free Documentation License, версия 1.1 (http://www.gnu.org/licenses/fdl.html, неофициальный русский перевод http://www.infolex.narod.ru/gpl_gnu/gfdlrus.html), или более поздних ее версиях, опубликованных Free Software Foundation.

Неизменяемый раздел - «Преамбула».

Верхняя обложка - «FAQ of RU.HTML.CHAINIK - часто задаваемые вопросы эхоконференции RU.HTML.CHAINIK».

Нижняя обложка - «По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)».

Все включенные в данный текст примеры HTML- и CSS-кода, скриптов JavaScript, Perl, PHP и ASP могут свободно использоваться как в некоммерческих, так и в коммерческих целях в соответствии с лицензией GNU General Public License версии 2 (http://www.gnu.org/licenses/gpl.html, неофициальный русский перевод http://www.infolex.narod.ru/gpl_gnu/gplrus.html).

Публикации по четвергам в конференции RU.HTML.CHAINIK. Доступна также Интернет-версия на http://annet.dn.ua/faq/. Уточнения и дополнения всячески приветствуются, но не в конференции, а нетмылом модератору. Отсылайте их в формате: вопрос - ответ.

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

Правила эхоконференции

v2.43 от 6.11.2002

Данные правила должны быть доступны читателям для просмотра на любой BBS, подключенной к эхоконференции ru.html.chainik.

Тематика конференции

Эхоконференция ru.html.chainik предназначена для распространения и обмена информацией, а также ведения дискуссий по любым тематикам, имеющим отношение к языку HTML (HyperText Markup Language), созданию с его помощью web-документов, оформлению их с помощью CSS (Cascade Style Sheets).

Язык эхоконференции

Вы можете использовать русский (предпочтительно) или английский язык. При ответе на письмо рекомендуется отвечать на том же языке, на котором было написано оригинальное письмо. Ответ на другом языке допускается только тогда, когда вы абсолютно уверены, что автор оригинального письма знает этот язык, и имеет технические возможности его прочитать. Учтите, что русский язык - не тот, на котором разговаривают вокруг вас, а тот, на котором пишутся книги. Употребление «стильных» жаргонизмов не приветствуется. Употребление терминов и транслитераций (скажем, «джаваскрипт», «HH», «ИЕ») вполне допустимо.

Общие правила написания писем

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

Hе допускается применение нецензурных выражений. Замена их символами !@#$%& допускается, но не поощряется модератором. Чрезмерное увлечение этими символами будет рассматриваться как нарушение. Hе следует набирать слова прописными буквами.

Запрещается повторный ввод одного и того же сообщения с интервалом менее 30 дней. Если вам не ответили на письмо в конференции, то не пытайтесь тут же заново написать такое же письмо. Обычно без ответа остаются письма, в которых некорректно или не полностью освещен вопрос; поэтому, когда будете задавать вопрос, старайтесь полностью описать вашу проблему. Часто в вопросах не приводят исходного HTML-кода, что затрудняет ответ -- лучше сразу привести код. Допускается повторный постинг сообщения не ранее, чем через 8 дней после первого постинга при абсолютной уверенности в полной и корректной формулировке вопроса и отсутствии содержательных ответов. При повторном постинге вопрос следует полностью сформулировать заново, а не отделываться сообщениями типа «Hу что, никто не знает?». Третий постинг менее, чем через 30 дней после второго уже не допускается.

Поскольку вы наверняка будете вести и активно использовать архив этой конференции, то для вашего же удобства при написании письма проследите, чтобы в поле «Subj:» был четко обозначен предмет обсуждения. Пустое поле Subj и бессодержательные Subj типа «<none>», «?», «Вопрос», «Help», «Как сделать?» и т.п. не допускаются и считаются нарушением.

Если вы хотите задать сразу несколько не связанных или слабо связанных между собой вопросов, то задайте каждый из них в отдельном письме, а не посылайте их в одном сообщении с Subj типа «Два вопроса» - это тоже может считаться нарушением.

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

При ответе в конференции не допускается чрезмерное цитирование. Оставляйте только ту часть, которая необходима для понимания темы. Запрещается цитирование приветствий и технических строк (Origin, @MSGID, etc.).

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

Функциональными элементами подписи считаются:

1. Альтернативный (не совпадающий с адресом в заголовке «From:» сообщения) адрес e-mail.
2. Индивидуальный номер ICQ (AIM, Odigo)
3. Адрес не более, чем одной личной Web-странички (сайта)
4. Должность (с указанием организации), если базовые должностные обязанности подписчика имеют прямое отношение к тематике конференции (например, Web-дизайнер, Web-мастер, Web-программист)
5. Идентификатор и шестнадцатеричный Fingerprint публичного ключа PGP

Hедопустимо использование в подписи, в строке Origin и в теле письма символов псевдографики из старшей половины таблицы CP866, а также любых других символов, некорректно отображаемых при перекодировках из CP866 в KOI-8R и обратно.

Технические требования

При написании писем необходимо использовать альтернативную кодировку (кодовая таблица CP866). Замена в сообщениях русских букв на похожие по написанию английские, кроме как по технической необходимости не допускается. С другой стороны, не допускается использование русской буквы «H», которая по стандартам Fidonet поглощается эхопроцессорами. Ваш драйвер клавиатуры должен заменять ее на похожую по начертанию английскую. (Пользователи Internet могут не беспокоиться о замене буквы «H» - при гейтовании письма это будет сделано автоматически).

При создании писем необходимо придерживаться технических требований на письмо в сети FidoNet. Hе рекомендуется посылать фрагменты более 10Kb одним письмом -- разбейте его на несколько писем меньшего размера. Строка Origin должна составлять не более 79 символов. Служебная информация в строке PATH должна соответствовать действительности. Помещение файлов в эхоконференции разрешено только в формате uuencode. Если размер помещаемого файла не превышает 8Kb, то следует весь фрагмент посылать одним письмом. Если размер не превышает 30Kb, то разбейте его на несколько писем по 8-10Kb. Помещение файлов размером более 10Kb, а также постинг исполняемых файлов (*.COM, *.EXE, файлы форматов MS Office), в том числе и заархивированных, допускается только с разрешения модератора.

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

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

Модерирование

Модератор: myr@south.net.ru 2:5020/128

Комодератор: Sergey Belyaev 2:5020/1984

Альтернативный адрес модератора: manko@zhurnal.ru 2:5020/128

Модератор является также участником конференции, в связи с чем только сообщения от имени «Moderator of Ru.HTML.Chainik» должны рассматриваться в качестве административных.

Поступайте так, как вы бы хотели, чтобы поступали с вами: не участвуйте в оскорблениях или личных нападках на других участников этой конференции.

Если вы считаете, что какое-либо сообщение оскорбляет Вас -- Вы можете:

1. Проигнорировать его (наиболее предпочтительный вариант)
2. Hаписать автору нетмейлом
3. Обратиться нетмейлом к модератору

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

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

При серьезном нарушении правил пойнтом FidoNet модератор обязан дублировать сообщение о нарушении нетмылом соответствующему узлу.

Модеpатоp вправе назначить комодеpатоpа (одного или нескольких). Комодеpатоp имеет исполнительные пpава, то есть не может назначать модеpатоpов или комодеpатоpов, изменять пpавила.

Пpи отсутствии модеpатоpа в сети сpоком более 84 дней комодератор пpиобpетает полные пpава модеpатоpа. Пpи возвpащении стаpого модеpатоpа пpаво модеpатоpа пеpедается стаpому, если иное не оговоpено особо.

Текущий модератор конференции может инициировать перевыборы модератора. По его просьбе проводится голосование и назначается новый модератор в соответствии с результатами голосования. Модератор может сменить себе имя и адpес.

Модератор может в любое время изменить данные правила. Изменения вступают в силу через 48 часов после опубликования.

Модеpатоp имеет пpиоpитет более высокий, чем данные пpавила.

Распространение эхоконференции

Ru.HTML.Chainik может свободно распространяться среди узлов сети FidoNet. Распространение в других сетях приветствуется и возможно с согласия модератора и не противоречия такого распространения текущим правилам данной конференции и документам FidoNet. При распространении конференции участие в ней возможно только после ознакомления и согласия с данными правилами и документами FidoNet.

Дополнительные официальные документы эхоконференции

Для уточнения отдельных вопросов Правил в конференции издаются приложения. Список приложений:

1. О тематике конференции - offtopic list
2. О статусе нарушений и наказаниях [*], [+], [!]
3. Список имеющих взыскания
4. Список отключенных от конференции
5. Официально принятые сокращения

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

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

1. Вопросы от общего незнания.

1.1. Что такое HTML?

Для установления соединения с удаленным сервером используется сетевой адрес документа. Этот адрес зовется универсальным указателем ресурса - URL (Uniform Resource Locator). В ответ сервер посылает документы, чаще всего в формате HTML.

Можно считать, что в нормальных условиях после запуска программы-браузера и ее подключения к серверу последовательно происходит шесть событий:

1. На стороне пользователя браузер декодирует заданный URL и подключается к серверу.
2. Браузер требует от сервера предоставить необходимый документ.
3. Сервер преобразует переданную ему часть URL в имя файла и путь к нему или запускает на выполнение ту или иную программу для обработки запроса.
4. Сервер отсылает найденный файл документа или оформленный в виде документа результат обработки запроса на компьютер пользователя.
5. Сервер разрывает установленное соединение.
6. Браузер на компьютере пользователя отражает полученный документ.

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

HTML - _не_язык_верстки_! Это средство логической разметки, и не пытайтесь располагать ваши элементы в определенных позициях и определенных местах. У вашего клиента нет размера экрана, нет размера браузера, нет цветов и нет звуковой карты.

1.2. Что такое XML?

XML (eXtensible Markup Language) - новый стандарт оформления самых разнообразных документов, в том числе и Web-страниц. Уникальность XML заключается в его неограниченной расширяемости в силу четкой структурированности данных, возможности определения своих тегов и т.д. Более подробное обсуждение XML ведется в конференции RU.XML.

1.3. Что такое XHTML?

XHTML - это основанный на XML язык разметки гипертекста, максимально приближенный к текущим стандартам HTML. Применяется, как язык разметки, переходный от HTML к XML.

1.4. Что такое WML?

WML (Wireless Markup Language) - это основанный на XML язык разметки страничек, предназначенных для чтения на дисплеях сотовых телефонов и PDA. Отличается компактностью конструкций. Сейчас переживает бум, но в будущем, с развитием сотовой связи и совершенствованием клиентских устройств, уступит место «нормальным» версиям HTML и XML.

1.5. Что такое CSS?

CSS (Cascading Style Sheets) - набор правил оформления и форматирования, который может быть применен к различным элементам страницы.

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

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

CSS1 понимают все браузеры, начиная с четвертых версий, правда, NN4 имеет некоторые особенности в интерпретации стилей, которые нужно знать. Поддержка CSS2 на хорошем уровне реализована только в Mozilla/NN6 и Opera 6, IE, даже 6 версии, не понимает синтаксиса и многих свойств CSS2.

1.6. Что такое SSI?

SSI (Server Side Includes) - включения на стороне сервера. С помощью SSI можно не только в зависимости от некоторых условий выводить определенные части документа, не только формировать документ из заранее определенных кусочков, но и вставлять результат работы некоторого CGI сценария или программы прямо в документ.

Если у вас не работают конструкции SSI, то попробуйте сменить расширение файла, где они используются, на .shtml, или поройтесь в конфигурации сервера.

1.7. Что такое CGI?

Common Gateway Interface - стандартный шлюзовый интерфейс. Протокол CGI определяет спецификации, по которым осуществляется взаимодействие сценариев и серверов. Браузеры непосредственно не взаимодействуют с CGI.

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

CGI-сценарии могут быть как двоичным кодом, написанным на C, C++ или Fortran, так и интерпретируемыми скриптами (Perl, Python, Tcl). Двоичный код работает быстрее, но скрипты обладают большей гибкостью и переносимостью.

Более подробно обо всем этом можно узнать в конференциях ветки RU.CGI.*.

1.8. Что такое PHP?

PHP (Personal Home Pages) - свободно распространяемая разработка для обработки HTML запросов на сервере, т.е. файл проходит сначала через серверный интерпретатор, а затем уже идет клиенту. Синтаксис внутреннего языка похож на JavaScript и немного на Perl. Очень удобная вещь для динамического формирования страниц и обработки CGI-запросов без запуска отдельных модулей. Реализовано для Apache и MS IIS.

Чтобы узнать о PHP больше, подпишитесь на конференции RU.PHP.*.

1.9. Что такое ASP?

ASP (Active Server Pages) - разработка Microsoft, по механизму работы очень похожая на PHP. Основные языки - VBScript и JScript. Реализовано для MS IIS и Apache. Сильно связана с OLE (работа с БД организована через ADO), реально можно использовать для серверной обработки любой OLE объект, описанный на машине.

ASP обсуждаются в конференциях RU.VBSCRIPT, RU.WINDOWS.NT.BACKOFFICE.

1.10. Что такое Flash и SVG?

Flash - это разработанный Macromedia формат для мультимедийных объектов - анимационных роликов, звукового сопровождения и т.п. Распространяется, как подключаемый к браузеру модуль (plug-in). Получил широкое распространение в настоящее время, поскольку позволяет в компактном объеме данных описывать сложные анимации и оперировать векторными объектами. Однако будущее Flash сомнительно - он является закрытым стандартом, и, по-видимому, будет вытесняться открытым, более удобным и гибким форматом SVG.

Подробности о Flash можно узнать в конференциях RU.FLASH, RU.MACROMEDIA.

SVG (Scalable Vector Graphics) - основанный на XML язык описания векторных графических объектов с возможностью введения анимации и включения мультимедийных данных. В настоящее время существует как plug-in, но в обозримом будущем, вероятно, интерпретацию SVG смогут осуществлять сами браузеры, без загрузки дополнительных модулей.

Подробнее об этом формате можно узнать в RU.XML.

1.11. Что такое VRML?

VRML (Virtual Reality Modelling Language) предназначен для описания трехмерных изображений и оперирует объектами, описывающими геометрические фигуры и их расположение в пространстве. VRML-файл представляет собой обычный текстовый файл, интерпретируемый браузером. Поскольку большинство браузеров не имеет встроенных средств поддержки VRML, для просмотра VRML-документов необходимо подключить вспомогательную программу - VRML-браузер.

Один и тот же VRML-документ может выглядеть по-разному в разных браузерах. Многие разработчики браузеров добавляют нестандартные расширения VRML.

1.12. Что такое Java?

Java - объектно-ориентированный язык программирования, разработаннный Sun Microsystems. Ему нужны компиляторы и служебные файлы для функционирования. Программы, разработанные на JDK (Java Development Kit), могут работать

• как автономные прикладные программы
• как апплеты (англ. applet, «маленькое приложение») в HTML страницах
• как Java-servlets - «добавки» к Javaservlet-ready серверам, которые инкапсулируются в веб-сервер и работают как бинарный создатель информации, унаследовавший необходимое от веб-сервера и добавивший что-либо своё. Получается мощный и быстрый аналог PHP и ASP

1.13. Что такое JavaScript, JScript и ECMAScript?

JavaScript был разработан Netscape. Он «родственник» Java, только содержит меньший и более простой, немного измененный, набор команд. Структура JavaScript и его синтаксис подобен Java, но JavaScript функционален только когда включен как часть HTML страницы (на это указывает и его название «ЯваСценарий»). Вы не можете разрабатывать автономные прикладные программы на JavaScript. Он может использоваться а) в виде сценария внутри HTML в браузере, совместимом с Netscape 2.0, и б) как сценарий, исполняемый поддерживающим такие сценарии сервером.

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

Чтобы упорядочить языки клиентских скриптов, был разработан стандарт ECMAScript. В него вошли наиболее общие определения синтаксиса и встроенных объектов JavaScript и JScript.

Наиболее употребительная версия JavaScript на сегодняшний момент времени - 1.3, ее понимают NN4, Mozilla/NN6, IE4+ (с небольшими глюками) и Opera 5+ (с серьезными глюками)

Подробнее о JavaScript можно узнать в конференции RU.JAVASCRIPT.

1.15. Что такое VBScript?

Это язык клиентских и серверных скриптов, разработанный Microsoft на основе Visual Basic. Печально известен «благодаря» огромному количеству написанных на нем макровирусов и почтовых червей. Hеплох, как язык программирования ASP-страничек, но категорически не рекомендуется в качестве языка для клиентских скриптов, поскольку понимается только IE и содержит немало «дыр» в плане безопасности.

VBScript обсуждается в конференции RU.VBSCRIPT.

1.16. Что такое DOM и DHTML?

DHTML (Dynamic HTML)- это расширения, примененные Netscape и Microsoft в четвертых версиях соответствующих браузеров для того, чтобы можно было динамически, с помощью JavaScript, изменять вид странички - показывать или скрывать те или иные элементы, перемещать их, менять цвет фона и т.п. Однако объектные модели, используемые в IE4 и NN4 очень плохо совместимы друг с другом, и поэтому один и тот же скрипт приходилось писать дважды - отдельно под каждый браузер.

Чтобы преодолеть это ограничение, а также добавить более тесную интеграцию с XML и CSS, W3C был разработан стандарт DOM (Document Object Model), который должны понимать все новые браузеры. С помощью DOM можно свободно добавлять, изменять и удалять любые элементы на странице, как угодно манипулировать их стилями и т.д. DOM Level 1 превосходно понимает Mozilla/NN6 и неплохо понимает IE5+, Opera, к сожалению, поддерживает этот стандарт неудовлетворительно. Поддержка DOM Level 2 пока более или менее приемлемо реализована только в Mozilla и NN6.1+

1.17. Что такое по-настоящему крутая HTML-страничка?

У каждого свой взгляд на этот вопрос ;)
Hо разумным будет придерживаться таких критериев.

Страничка должна:

1. Соблюдать стандарты HTML.
2. Идеально, практически неотличимо выглядеть и функционировать в Mozilla/NN6 и IE5+ и, с очень небольшими огрехами, в NN4, IE4 и Opera 5+.
3. Хорошо выглядеть и быть функциональной в NN3, IE3 и Opera 3-4.
4. Хорошо читаться и сохранять функциональность в Lynx и Links.
5. Хорошо смотреться и быть полностью функциональной при отключении картинок и стилей.
6. Хорошо смотреться, удобно читаться и не вызывать появления горизонтального скроллинга в разрешениях от 640x480 до 1600x1200.
7. Cохранять функциональность в полном объеме при отключении скриптов, Java-апплетов и Flash.
8. Иметь компактный объем, учитывая графику.

1.18. Люди, протестируйте мою страничку на правильность!

Существуют типовые ошибки, которых легко избежать.

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

Никогда не пользуйтесь:

• <META CHARSET>, будут глюки с кодировкой.
• <FONT FACE=...>, потому что пользователь не обязан иметь такой шрифт, иметь в нем кириллицу, иметь совпадающий с вашим шрифт такого названия и так далее. Для того, чтобы задавать _стиль_ шрифта, существует CSS.

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

Теперь вспомните, что язык HTML четко описан в стандарте, и проверьте, сколько раз вы нарушили стандарт. Для этого существуют валидаторы, см. 1.19.

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

1.19. Что такое валидатор?

Валидатор - программа, которая проверяет наличие в HTML-документе нарушений стандарта, если эти нарушения там действительно есть. Поэтому валидатором НЕ может считаться программа, которая обращается не к стандарту, в котором написан HTML-документ, а к каким-то своим настройкам. Посмотрите здесь:

http://validator.w3.org
ftp://ftp.jclark.com

1.20. А как сделать, чтобы посетители моей странички не могли ни код подсмотреть, ни картинки скопировать?

Просто не допускайте к ней посетителей.

1.21. Каким уродам нужно что-то еще, кроме замечательного Микрософт Интернет Эксплорера? Да все ваши убогие браузеры не поддерживают даже ActiveX компонент!

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

По статистике, чем выше профессиональный и культурный уровень юзера, тем реже он использует MSIE. И затачивая свои странички только под эту бродилку, вы теряете пусть не самую большую, но весьма влиятельную аудиторию.

1.22. Чтобы по ссылке исполняемый файл не скачивался на диск, а сразу запускался на компьютере пользователя?

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

Если вас этот ответ не устраивает, напишите в RU.HACKER ;)

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

2. Вопросы от незнания HTML

2.1. Какую версию HTML лучше использовать?

Нужно соблюдать баланс между использованием новых возможностей и поддержкой устаревших, но все еще актуальных версий браузеров. С этой точки зрения «золотая середина» - стандарт XHTML 1.0 Transitional. Странички, сверстанные с соблюдением этого стандарта, будут гарантированно корректно отображаться во всех будущих клиентах, понимающих XML, но, в то же время, в рамках этого стандарта поддерживаются устаревшие, но все еще необходимые для правильного отображения во многих браузерах теги и атрибуты.

Все примеры HTML-кода в настоящем FAQ даны именно с учетом требований стандарта XHTML 1.0 Transitional.

Есть важное исключение - некоторые теги и параметры, указанные в нескольких пунктах FAQ, специфичны для NN4 или IE; такие теги или параметры, если это возможно, должны вставляться с помощью SSI, PHP или ASP только для соответствующего значения поля User-Agent в HTTP-заголовке. После описания таких параметров будет стоять обозначение (!).

2.2. В каком регистре лучше писать HTML-код?

Раньше считалось, что это безразлично. Но с приходом XHTML на этот вопрос появился однозначный ответ - все теги, атрибуты и предопределенные значения пишем в нижнем регистре.

2.3. Что такое entities и как их правильно применять?

entities - это комбинации знака «&» и буквенного или цифрового кода после нее, предназначенные для замещения символов, которые не могут встречаться в «чистом» виде в HTML-тексте, например, символа «<». entities применяются в тексте за пределами тегов, а также в значениях параметров, в том числе input value=, img alt=, a href= и т.п.

Например, чтобы на кнопке submit были три угловых скобки, пишем <input type="submit" value="&gt;&gt;&gt;" />

entities должны быть закончены символом «;»

Обязательны к употреблению следующие entities:

Левая угловая скобка: (<) - <
Правая угловая скобка: (>) - >
Двойные кавычки: (") - "
Амперсант: (&) - &

Кроме того, полезно знать такие entities:

  - неразрывный пробел
© - знак копирайта: (©)
« - левая двойная угловая кавычка: («)
» - правая двойная угловая кавычка: (»)
® - знак регистрированной торговой марки: (®)
° - знак градуса: (°)
¶ - знак параграфа: (¶)
§ - фигурный знак параграфа: (§)
± - знак плюс-минус: (±)
· - точка в середине строки (по вертикали): (·)
µ - греческая буква "мю" для обозначения единиц измерения: (µ)
¤ - "краб", обобщенный знак денежной единицы (кружок с четырьмя лапками): (¤)
– - короткое тире: (–)
— - длинное тире: (—)
“ - верхние открывающие кавычки-"лапки": (“)
” - верхние закрывающие кавычки-"лапки": (”)
„ - нижние кавычки-"лапки": („)
† - латинский крест: (†)
‡ - двойной крест: (‡)
• - сплошной кружок в середине строки: (•)
… - многоточие: (…)
‰ - знак промилле (процент с дополнительным ноликом): (‰)
€ - знак валюты "евро": (€)
№ - знак номера: (№)
™ - торговая марка: (™)

2.4. Как правильно прописывать URL с «&» в строке запроса?

Hеправильно: <a href="my.cgi?x=X&y=Y"><img src="img.cgi?a=1&b=2" alt="" /></a>

Правильно: используем entities: <a href="my.cgi?x=X&amp;y=Y"><img src="img.cgi?a=1&b=2" alt="" /></a>

Исключения: cсылки на CGI-скрипты в директивах SSI #include virtual и #exec cgi. Эти ссылки обрабатываются на сервере, и в них «&» заменять на «&» не надо. Также не нужно заменять «&» в URL при переадресации средствами JavaScript.

2.5. Обязательно ли использовать кавычки в значениях атрибутов?

Обязательно. Поверьте, тут экономия на спичках, но код без кавычек не только не удовлетворяет никаким стандартам, но и просто выглядит неряшливо.

2.6. Обязательно ли писать alt в <img>?

Да. Это требует стандарт, да и здравый смысл - многие отключают картинки, а некоторые юзеры используют текстовые или даже голосовые браузеры. Если картинка не несет никакой смысловой нагрузки (элемент дизайна, «распорка» и т.п.), то тогда ставим в тег <img> значение alt="".

2.7. Зачем делать свою страничку совместимой с XHTML и как это сделать?

Зачем - см. п. 2.1. Как - описано ниже.

1. в заголовок документа первой ставим строку

   <?xml version="1.0" encoding="...кодировка вашей странички..."?>

   Например:

   <?xml version="1.0" encoding="KOI8-R"?>

2. После строки <?xml...?> ставим такой DTD:

   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

3. В тег <html> ставим такие параметры:

   <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">

   Если основной язык вашей странички не русский, то заменяем "ru" на сокращенное обозначение вашего языка: "en" - английский, "de" - немецкий и т.д.
4. Все теги должны быть корректно закрыты. Стандарт HTML4 допускал, чтобы не закрывались такие теги, как <p>, <option>, <li>, <dd> и т.п. В XHTML это недопустимо.
5. Теги, которые не имеют парных закрывающих тегов (такие, как <link>, <meta>, <img>, <input>, <br>, <hr>, <col>, <param> и т.п.), должны в конце перед « > » иметь пробел и косую черту: « />», например, <br />, <hr /> и т.д.
6. Параметры, которые в HTML4 не имеют значений (compact, nowrap, ismap, declare, noshade, checked, disabled, readonly, multiple, selected, noresize, defer), должны иметь значение, равное самому параметру. Например:

   <ul compact="compact">
   
   <option selected="selected">
   
   <hr noshade="noshade" />

2.8. Как вставлять комментарии в HTML?

<!-- это комментарий -->

<!-- это тоже,
     только занимает больше одной линии -->

Не допускается пробел между «<!» и «--», но разрешен пробел между «--» и «>». Типичная ошибка - использование цепи дефисов («---») в пределах комментария. Нужно избегать помещения двух или более смежных дефисов внутри комментариев.

Довольно частая проблема - использование оператора уменьшения на единицу в блоке JavaScript (myVar--), вместо этого используйте оператор «-= » (myVar-=1)

2.9. Я, к сожалению, употребил тег, который поддерживается только в браузере XXX. Что же увидят пользователи других браузеров?

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

2.10. Говорят, для поисковиков надо прописать ключевые слова. Что это?

Один из вариантов <meta>, определяющий ключевые слова или краткое описание документа. Hекоторые поисковые роботы обращают на них внимание, а некоторые не обращают. Поисковый робот, знаете ли, тоже нам ничем не обязан.

Слова - <meta name="keywords" content="слово слово слово ..." />
Описание - <meta name="descripton" content="описание документа" />

2.11. Чтобы после открытия моей странички через промежуток времени загружалась другая страничка, или грузился не index.html, а main.html?

Если вы имеете доступ к настройкам сервера, то используйте HTTP-заголовок Refresh. Если нет, то можно воспользоваться одним из вариантов <meta>. Интересно отметить, что в подопытном Lynx'е наблюдаются неровности, если адрес перехода задан относительным адресом.

<meta http-equiv="Refresh" content="5; URL=http://rhc.msk.ru/" />

Цифра - время ожидания, URL - адрес перехода (без кавычек).

2.12. В чем отличия <b> и <strong>, <i> и <em>?

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

<b> и <i> - тэги физического выделения, то есть вы принудительно заставляете выделять текст каким-то видом шрифта. В HTML4 и XHTML эти теги объявлены устаревшими. <strong> и <em> - тэги логического выделения. Каждый браузер может по-своему выделить текст внутри этих тэгов, так, как удобно его пользователю. <em> означает выделение, а <strong> означает усиленное выделение.

Резюме: если вам нужно выделить текст, пользуйтесь <strong> и <em>. Если вам нужно не выделить текст, а физически сделать его жирным или курсивом, пользуйтесь <span> в сочетании с CSS.

2.13. Чтобы страничка не кэшировалась у клиента?

Для этого нужно прописать в HTTP-response со стороны сервера параметры Expires, Pragma и Cache-control.

Если вы не имеете доступа к настройкам сервера, то добавьте в <head> такие <meta>:

<meta http-equiv="Expires" content="Thu, Jan 1 1970 00:00:01 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />

2.14. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения по e-mail?

<a href="mailto:email@name.ru">ссылка</a>

При этом можно добавить автоматическое подставление темы:

<a href="mailto:email@name.ru?Subject=тема">ссылка</a>

Этот вариант некорректно обрабатывается некоторыми браузерами и мэйлерами.

2.15. Чтобы при нажатии на ссылку она открывалась в другом окне или кадре?

У ссылки (тега <a>) есть атрибут target со значениями:

"_blank"	-	новое окно
"_top"	-	верхнее окно, то есть полный экран, а не кадры
"_self"	-	то окно или кадр, где находится ссылка
"_parent"	-	ссылка на кадр, где проводится фреймовая разбивка, часто совпадает с "_top" за исключением случаев иерархии фреймов (в один из фреймов грузится еще один фреймсет)
"имя_окна"	-	имя целевого окна или целевого кадра

2.16. Чтобы при нажатии на ссылку менялось содержимое двух кадров?

В href ссылки пишем новый фреймсет с уже измененными кадрами:

<a href="newframes.html" target="...">ссылка</a>

2.17. Чтобы нельзя было изменять размер кадра?

<frame name="test" noresize="noresize" />

2.18. Чтобы не было видно границ кадров?

<frameset border="0">

<frame name="test" src="/mypage.html" frameborder="0" />

2.19. Чтобы изменить размер, оформление и расположение полосы прокрутки (скроллбара) или вообще убрать ее?

Скроллбар генерится модулем GUI операционной системы, и, соответственно, не может быть изменен с помощью HTML, CSS или JavaScript-кода.

Убрать скроллбар можно, прописав в стили для <body> параметры: position:fixed;overflow:none;

Hо делать так категорически не рекомендуется - при низком разрешении экрана у клиента часть вашей странички окажется недоступной.

Если документ находится во фрейме, то скроллбар появляется только тогда, когда документ не умещается в отведенном ему месте. Если вы не хотите появления скроллбара даже в этом случае, то добавьте в <frame> параметр scrolling="no", но, опять-таки, лучше этого избегать.

В IE5.5+ можно изменять расцветку и оформление скроллбара, но это находится за рамками стандартов HTML и CSS и посему не рекомендовано к применению.

2.20. Чтобы выровнять табличку по центру документа? И почему в NN4 и Opera не работает <table align="center">?

<table align="center"> - конструкция принципиально неверная. Параметр align в <table> предназначен для того, чтобы задать обтекание таблицы текстом, так же, как аналогичный параметр в <img>.

Правильно так:

<div align="center">
  <table>
...
  </table>
</div>

2.21. Чтобы разместить текст, картинку или табличку в центре экрана?

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

Для тех, кто упорствует в ереси, есть решение с таблицей. Трудность в том, что никакого атрибута height в стандарте нет, поэтому его реализация - это индивидуальные затеи браузера. Поэтому решение, которое предлагается здесь, нарочито неправильно и нестандартно.

<table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td align="center" valign="middle">
Текст, картинка или табличка в центре экрана
    </td>
  </tr>
</table>

2.22. Чтобы между картинками не было промежутков?

Здесь мы вынуждены приспосабливаться к браузерам, которые не следуют стандарту и показывают CR LF так, как бог на душу положит. Обычно - как пробел, хотя в стандарте и сказано, что CR LF не должны показываться.

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

<table border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><img ... /></td>
    <td><img ... /></td>
  </tr>
</table>

Второе решение тоже обходит противоестественные склонности браузеров. Картинки описываются без промежутков между тегами:

<img ... /><img ... /><img ... /><br /><img ... /><img ... /><img ... />

2.23. Чтобы убрать промежутки между ячейками в таблице, которая получилась в результате разрезки целой картинки на куски?

Пропишите в таблице параметры

border="0" cellspacing="0" cellpadding="0"

Во все <img> нужно добавить стиль display:block; или объявить в CSS соответствующий класс с таким стилем.

Также нужно убирать пробелы и возвраты каретки между <td>, <img> и </td>.

Например, так:

<td><img alt="" src="kusok.gif" width="XXX" height="YYY" border="0" /></td>
   ^^^                                                               ^^^

В местах, отмеченных галочками, пробелов нет!!!

Если на картинки навешаны ссылки, то <a> и </a> тоже должны быть вставлены без пробелов:

<td><a href="..."><img ... /></a></td>

И еще раз проверьте, правильно ли вы нарезали картинки и указали их размеры.

2.24. Чтобы убрать синюю рамку вокруг картинки-ссылки?

Точно так же, как убирают любую другую рамку вокруг любой другой картинки:

<img border="0" ... />

2.25. Чтобы при наведении на ссылку, картинку или другой объект показывался комментарий? И почему Mozilla/NN6 не отображает как комментарий параметр alt в <img> и <input type="image">? Как сделать, чтобы alt не показывался как комментарий в IE?

Для отображения всплывающих подсказок в любой элемент HTML может быть добавлен параметр title="Комментарии...". Правда, к сожалению, NN4 не поддерживает эту возможность (это можно поправить, см. пункт 5.8), а IE поддерживает ее не везде (например, не показывает title для <select>). Поэтому не следует возлагать больших надежд на то, что пользователь узнает из title информацию, оказавшуюся для него неочевидной без title.

Параметр alt по стандарту предназначен для описания текста, который должен быть отображен вместо картинки, если браузер не может или не хочет ее показывать. То, что IE и NN4 показывают alt как всплывающую подсказку - их самодеятельность. Для полной совместимости рекомендуется прописывать в <img> оба параметра - и alt, и title - с одинаковыми значениями.

С <input type="image"> ситуация еще более запутанна - NN4 показывает для нее в качестве подсказки не alt, а значение параметра name. Поэтому делаем так:

<input type="image" src="myimg.gif" width="XXX" height="YYY" border="0"
name="Комментарий" alt="Комментарий" title="Комментарий" />

Hаконец, если вам не нужно, чтобы комментарий показывался ни в Mozilla/NN6, ни в IE, и в то же время вы хотите, чтобы параметр alt был осмысленным, нужно прописать в <img>:

alt="Описание картинки" title=""

В NN4 приведенный код не сработает и комментарий будет показываться - но это не столь уж большое зло.

2.26. Чтобы при нажатии на определенную область картинки происходил переход на один адрес, а при нажатии в другой области - на другой?

Стандарт позволяет пользоваться картами изображений. Полный формат описания карт поищите в стандарте. Обратите внимание, что при описании самой карты пишется просто "имя_карты", а при описании картинки пишется "#имя_карты", то есть здесь уже ссылка.

<img src="адрес_картинки" usemap="#имя_карты" />
<map name="имя_карты">
...
</map>

HomeSite новейших версий содержит неплохой встроенный редактор карт.

Также можно воспользоваться специальными программами для разметки карт:

Mapedit	- http://www.boutell.com/mapedit/
Map This	- http://galadriel.ecaetc.ohio-state.edu/tc/mt
Web Hotspots	- http://www.hooked.net/users/1auto
HoTTmapP	- http://www.tikipub.com/jc/
Embellish/2 v2.02	- http://hobbes.nmsu.edu/os2 далее по ссылкам

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

2.27. Как сделать таблицу с большим количеством произвольно объединенных по вертикали и горизонтали ячеек?

1. Начертить схему таблицы.
2. Провести до конца пунктирными линиями не доходящие до краев перегородки.
3. Написать HTML-код таблицы, представив, что пунктирные линии - это сплошные.
4. Содержимое и параметры фона и выравнивания ячеек с пунктирными линиями прописать в <td> той ячейки, что находится сверху и слева.
5. Добавить в <td> каждой такой ячейки rowspan и colspan с параметрами, равными количеству ячеек, объединяемых по вертикали и горизонтали соответственно.
6. Удалить пустые пары <td></td>.

2.28. Как можно сделать одинаковые столбцы в таблице?

По стандарту можно использовать для этого теги <colgroup> и <col> К сожалению, NN4 не понимает <col> и <colgroup>, но для него можно поставить в <table> параметр cols="NNN" (!), где NNN - число столбцов.

<colgroup> удобно применять, когда 100 делится нацело на число столбцов:

<table>
<!-- таблица с 5 столбцами -->
<colgroup span="5" width="20%"></colgroup>
<tr>
...
</table>

Если число столбцов не является делителем 100, придется использовать <col>:

<table>
<!-- таблица с 3 столбцами -->
<colgroup width="33%">
<col />
<col width="34%" />
<col />
</colgroup>
<tr>
...
</table>

Или так:

<table>
<!-- таблица с 7 столбцами -->
<colgroup width="14%">
<col span="2" />
<!-- параметр span означает две одинаковые колонки -->
<col width="15%" />
<col span="2" />
<col width="15%" />
<col />
</colgroup>
<tr>
...
</table>

И, наконец, самое надежное в плане совместимости с устаревшими браузерами решение - указать в явном виде width="NN%" в каждом <td> (<th>) первого ряда таблицы.

2.29. Чтобы HTML-документ выводился в некоторую область внутри другого HTML-документа (например, в <div> или в ячейку таблицы)?

По стандартам HTML 4.0, для встраивания внешних HTML-документов нужно использовать тег <iframe>. Он имеет такие атрибуты:

src="...URL..." - URL встраиваемого документа

name="..." - имя для того, чтобы прописывать его, как target для ссылок, которые должны будут загружаться в этот iframe.

width="WWW" - ширина

height="HHH" - высота

marginwidth="XXX" - отступы содержимого iframe от левого и правого края

marginheight="YYY" - то же, но от верхнего и нижнего края

scrolling="yes|no|auto" - задает наличие или отсутствие полосы прокрутки. При значении auto полоса прокрутки появляется при необходимости, если встраиваемый документ не влезает в размер iframe. В общем случае, отключать скроллинг не рекомендуется.

frameborder="0|1" - задает наличие (1) или отсутствие (0) рамки. По умолчанию рамка присутствует.

align - полностью аналогичен параметру align в <img>.

Тег <iframe> обязательно требует закрывающего тега (</iframe>). Внутри <iframe>...</iframe> прописывается контент для браузеров, не поддерживающих этот тег. Например:

<iframe name="myIframe" src="myiframe.html" width="X" height="Y">
   Ваш браузер не поддерживает вложения HTML-документов.
   Нажмите <a href="myiframe.html" target="myIframe">сюда</a>,
   чтобы увидеть документ в новом окне.
</iframe>

NN4 не поддерживает <iframe>, но иногда это поправимо, см. пункт 5.7.

И еще - <iframe> лучше не злоупотреблять, особенно для ответственных элементов странички. В 90% случаев то, что делают с помощью <iframe>, можно сделать другими способами - см. пункты 3.13, 8.7.

2.30. Чтобы в Internet Explorer и Mozilla при заходе на мой сайт и при добавлении его в Favorites в адресной строке и меню показывалась не стандартная, а нарисованная мной иконка?

Hужно создать файл «favicon.ico» стандартного для Windows формата «*.ICO» размером 16x16 пикселов и поместить его в корень сайта.

Кроме того, нужно прописать в <head>:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />

2.31. Как сделать информацию о пользователе ICQ, чтобы около номера был показатель присутствия в сети?

<img alt="ICQ status" src="http://online.icq.com/scripts/online.dll?icq=UIN&amp;img=N" />

Вместо UIN подставить собственно сам номер. N - вариант индикатора. Их что-то около 17-ти (1-17)

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

3. Вопросы от незнания CSS

3.1. Как вставить стили в документ?

Первый вариант (наиболее предпочительный) - все стили вынесены в отдельный файл, который может быть применен на нескольких страничках и кэшируется у клиента. Синтаксис:

<link rel="stylesheet" type="text/css" href="URL" />

Второй вариант, при котором описание стилей располагается в коде страницы внутри тега <head>. В этом случае вы можете использовать стили для элементов в пределах странички. Синтаксис:

<style type="text/css"><!--
...
--></style>

Параметр type="text/css" является обязательным и служит для указания браузеру использовать CSS.

Указание на стиль ставится в самом элементе посредством аттрибута class (для нескольких элементов с одинаковым оформлением) или id (для уникального элемента).

И третий вариант, когда описание стиля располагается непосредственно внутри тега элемента, который вы описываете. Этот метод нежелателен, и понятно почему: он приводит к потере одного из основных преимуществ CSS - возможности отделения информации от описания оформления информации. Впрочем, если необходимо описать лишь один элемент, этот вариант расположения описания стилей также вполне применим. Синтаксис:

<%ELEMENT% style="<style>" ...>

3.2. Чтобы убрать или задать отступы содержимого странички от краев окна браузера?

Убрать:

body { margin:0;padding:0; }

Задать:

body { margin:Npx;padding:Npx; }

Для совместимости с NN4 нужно в <body> поместить параметры marginwidth (!) и marginheight (!) со значением, равным требуемому отступу в пикселах.

3.3. Чтобы был абзацный отступ?

p { text-indent:3em; }

3.4. Чтобы форматировать текст по ширине?

p { text-align:justify; }

3.5. Как сделать буквицу в начале абзаца без применения картинок?

p:first-letter { float:left;font-size:3em; }

IE5- и NN4 этого не понимают, см. пункт 5.2.

3.6. Как встроить свои шрифты в страничку?

Это делается разными методами в IE и NN и может вызвать большие проблемы в разных операционных системах и разных кодировках.

Рекомендуется вместо этого использовать стандартные font-family: serif (шрифт с засечками типа Times), sans-serif (рубленый, типа Arial) и monospace (моноширинный шрифт типа Courier).

Не рекомендуется использовать fantasy и cursive - в IE это также может вызвать проблемы с кодировками, а в NN просто игнорируется.

Для небольших кусочков текста (заголовки, кнопки, спецсимволы) можно воспользоваться картинками, разумеется, с указанием параметра alt.

Иногда в IE под Windows 95/98/ME стили sans-serif или serif отображаются в виде сильно разреженных буковок совершенно неподходящего шрифта. Под NT/2000/XP такого явления, к счастью, не наблюдается. Чтобы побороть это, пишем:

font-family:'Times New Roman Cyr',serif;
font-family:'Arial Cyr',sans-serif;
font-family:'Courier New Cyr',monospace;

3.7. Как подавить подчеркивание ссылок в некоторых местах?

a.noneline, a.noneline:link, a.noneline:visited, a.noneline:active { text-decoration: none; }

После чего применяем этот стиль:

<a href="..." class="noneline">

3.8. Как сделать неподчеркнутые ссылки везде?

a, a:link, a:visited, a:active { text-decoration: none; }

3.9. Чтобы при наведении мышки на текст с ссылкой он поменял цвет или стал подчеркнутым?

a:hover { color:#RRGGBB;text-decoration:underline; }

Объявление a:hover нужно давать после a:link и a:visited

3.10. Чтобы фоновая картинка не размножалась по горизонтали (по вертикали) при увеличении разрешения экрана?

body { background-image:url('...URL картинки...'); background-repeat:...параметр...; }

Допустимые значения параметра:

no-repeat - подавляет размножение
repeat-x - размножение только по горизонтали
repeat-y - размножение только по вертикали
repeat - размножение по обоим направлениям.

Следует отметить, что если вы решили прописать background-image во внешнем CSS, то NN4 будет отсчитывать путь к файлу картинки не от местоположения файла стилей, а от местоположения текущего документа. Поэтому, если CSS и HTML лежат в разных каталогах, путь к картинке в URL пишем всегда от корня сервера.

Для совместимости со старыми версиями браузеров рекомендуется пририсовать к фоновой картинке справа и/или снизу прозрачным (для GIF) или совпадающим со значением bgcolor в <body> монотонным (для JPG) фоном полосы, доведя разрешение картинки в нужном направлении как минимум до 2048 пикселов. «Вес» картинки при этом увеличится незначительно, поскольку монотонный фон хорошо сжимается.

3.11. Чтобы задать фоновую картинку для ячейки таблицы?

Параметр background для <td> не рекомендован стандартами HTML и не поддерживается в Opera. Пользуемся стилями:

<td style="background-image:URL('bg.gif');">

Если мы хотим, чтобы фон не «размножался» по вертикали и/или горизонтали, то добавляем в style параметр background-repeat, как описано в ответе на предыдущий вопрос. Увеличивать размер картинки для совместимости со старыми браузерами не нужно - они вообще не покажут ее, поскольку не понимают стили.

Если внутри ячейки c фоном мы собираемся использовать таблицы, то в соответствующих тегах <table> и <td> нужно указывать background="" (!) для совместимости с NN4.

3.12. Чтобы фон странички оставался неподвижным при прокрутке?

body { background-attachment:fixed; }

Это делать не рекомендуется, поскольку прокрутка с неподвижным фоном выполняется медленнее.

В NN4 этот параметр не работает, см. пункт. 5.8.

3.13. Чтобы содержимое <div> или ячейки таблицы при увеличении объема не растягивало контейнер, а вызывало появление полос прокрутки?

<%ELEMENT% style="width:XXXpx;height:YYYpx;overflow:auto;">

Не работает в NN4.

3.14. Как сделать так, чтобы при наведении мышки какой-либо отличный от ссылки элемент (скажем, ячейка таблицы) поменял оформление (например, фоновый цвет)

Категорически не рекомендуется пользоваться скриптами типа

<td onmouseover="...">

В CSS2 псевдокласс :hover может быть применен не только к ссылке, но и к любому другому элементу. Hо, к сожалению, IE не поддерживает эту возможность. Поэтому поступаем так - пишем в стилях:

td {...styles...;behavior:url('td.htc');}	/* работает в IE4+ */
td:hover {background-color:#RRGGBB;}		/* стандарт CSS2, работает в NN6/Mozilla */

И создаем файл «td.htc», в котором пишем:

<public:attach event="onmouseover" onevent="color()" />
<public:attach event="onmouseout" onevent="restore()" />
<script language="JavaScript" type="text/javascript"><!--
function color() {
    runtimeStyle.backgroundColor='#RRGGBB';
}
function restore() {
    runtimeStyle.backgroundColor='';
}
//--></script>

Теперь все ячейки таблиц при наведении мышки будут подсвечиваться.

Разумеется, можно использовать td.className:hover и td#idName:hover для подсветки ячеек определенного стиля или конкретной ячейки.

3.15. Как окружить табличку рамкой нужного цвета?

table { border:1px solid #RRGGBB; }

Hе работает в NN4 и старых браузерах, см. 5.3.

3.16. Как «разлиновать» табличку тонкими линиями нужного цвета?

table.lined { border-collapse:collapse; }
table.lined td { border : 1px solid #RRGGBB; }

Hе работает в NN4 и старых браузерах, см. 5.4.

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

4. Вопросы от незнания JavaScript

4.1. Как сделать кнопку «Back»?

<a href="prevpage.html" onclick="history.back();return false;">Назад</a>

4.2. Как определить, что юзер открыл страницу не в кадре, и перевести его в кадр?

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

Пусть http://www.myserver.com/dir/frameset.html - это фреймсет, в котором есть два фрейма: menu.html - меню, main - рабочее окно для main.html, 1.html, 2.html и т.д.

В случае, если фреймсет и вызванная страничка лежат на одном сервере, то в <head> нужно вставить такой скрипт:

<script language="JavaScript" type="text/javascript"><!--
if (parent==self || parent.location.pathname!='/dir/frameset.html') {
      var framesetURL='/dir/frameset.html?main='+
          escape(self.location.href)
      if (typeof(location.replace)!='undefined') {
          self.location.replace(framesetURL)
//этот метод из JS1.1 грамотнее, чем простой редирект, потому что
//не засоряет history.
      } else self.location=framesetURL;
}
//--></script>

В случае, если вызванная страничка и фреймсет расположены на разных серверах, то скрипт будет такой:

<script language="JavaScript" type="text/javascript"><!--
var parentURL='';
with (parent.location) parentURL=protocol+'//'+hostname+pathname;
if (parent==self ||
      parentURL!='http://www.myserver.com/dir/frameset.html') {
      var framesetURL='http://www.myserver.com/dir/frameset.html?main='+
          escape(self.location.href)
      if (typeof(location.replace)!='undefined') {
          self.location.replace(framesetURL)
      } else self.location=framesetURL;
}
//--></script>

Если у вас на сервере работает CGI, PHP, или ASP, то фреймсет должен взять пришедший параметр $main и указать его в качестве src для фрейма main.

Если это невозможно (страничка лежит на халявном серваке), то во frameset.html в <head> нужно поставить:

<script language="JavaScript" type="text/javascript"><!--
function loadMain() {
var mainPos=location.search.indexOf('main=')+5;
if (mainPos>4) {
     var mainURL=location.search.substring(mainPos,location.search.length);
     if (mainURL.indexOf('&')>-1) {
         mainURL=mainURL.substring(0,mainURL.indexOf('&'))
     }
     mainURL=unescape(mainURL);
     if (typeof(location.replace)!='undefined') {
         self.frames.main.location.replace(mainURL)
     } else self.frames.main.location.href=mainURL
}
}
//--></script>

А в тег <frameset> нужно прописать параметр:

onload="loadMain();"

Тогда при внешней ссылке на 1.html или наборе в строке браузера http://www.myserver.com/dir/1.html откроется фреймсет, и в нужный фрейм автоматически загрузится 1.html.

4.3. Как определить, что юзер открыл вашу страницу в чужом фреймсете и избавиться от фреймсета?

Вставьте в <head> такой скрипт:

<script language="JavaScript" type="text/javascript"><!--
if (top!=self) {
     if (typeof(location.replace)!='undefined') {
         top.location.replace(self.location.href)
     } else top.location.href=self.location.href;
}
//--></script>

4.4. Как на JS при событии в одном из кадров поменять заголовок всего фреймсета? Хотелось бы, чтобы при смене страниц в заголовке окна броузера кроме названия сайта отображалось еще и наименование текущего раздела.

В <body> документа во фрейме поставьте строку

onload="top.title=self.title;"

К сожалению, это работает только в IE.

4.5. Как вставить музыку (MIDI, WAV, MP3) в HTML файл?

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

Hачнем с MP3. Файл с таким расширением (*.mp3) и в таком формате современные браузеры не способны воспроизводить как фоновый звук. Решение проблемы несложно: нужно преобразовать обычный MP3 в закодированный MPEG 1 Layer 3 файл WAV с RIFF-заголовком. Такой файл абсолютно совпадает с исходным MP3, за исключением нескольких начальных десятков байт, и занимает практически столько же места - но, при наличии в системе кодека MP3, спокойно воспроизводится браузером, который считает его обычным WAV. Добавить RIFF-заголовок позволяет большинство программ для генерации MP3.

Поэтому будем считать, что файл с нашей музыкой имеет расширение wav или mid.

Вставляем в <head> такой скрипт:

<script language="JavaScript" type="text/javascript"><!--
var musicURL='mymusic.mid';// путь к файлу с музыкой
function doMusic() {
     musicTag=(navigator.appName=='Microsoft Internet Explorer')?
         '<bgsound src="'+musicURL+'" />':
         '<embed src="'+musicURL+'" hidden="true" autostart="true" loop="true" />';
     if (confirm('Хотите ли Вы услышать музыку?')) document.write(musicTag);
}
//--></script>

А где-нибудь в конце документа вставьте скрипт:

<script language="JavaScript" type="text/javascript"><!--
doMusic();
//--></script>

4.6. Как определить разрешение экрана, количество цветов и внутренний размер окна браузера у посетителя?

Разрешение экрана можно узнать так:

var swidth=0;
var sheight=0;
if (self.screen) {      // for NN4 and IE4
    swidth = screen.width;
    sheight = screen.height
} else if (self.java) { // for NN3 with enabled Java
    var jkit = java.awt.Toolkit.getDefaultToolkit();
    var scrsize = jkit.getScreenSize();
    swidth = scrsize.width;
    sheight = scrsize.height;
}

Также могут быть важны переменные screen.availWidth и screen.availHeight, дающие размер свободной области экрана (без панели задач и других панелей, постоянно занимающих место на экране, например, панели MS Office или ICQ).

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

Внутренний размер окна браузера можно узнать так:

var wwidth=(window.innerWidth)?window.innerWidth:
    ((document.all)?document.body.offsetWidth:null);
var wheight=(window.innerHeight)?window.innerHeight:
    ((document.all)?document.body.offsetHeight:null);

Правда, к сожалению, в IE этот код работает только после того, как браузер дойдет до тега <body>. Поэтому данный код можно применять только в скриптах, выполняемых ниже <body> или в скриптах, выполняемых при возникновении тех или иных событий (наведение мышкой или нажатие на ссылку, отправка формы и т.п.).

Переменная

var colors=(screen.colorDepth)?screen.colorDepth:screen.pixelDepth;

даст вам режим отображения цветов:

4 - 16-цветный режим VGA/SVGA
8 - 256-цветный режим Indexed Color
15/16 - режим High Color (32 или 64 градации красного, зеленого и синего).
24/32 - режим True Color (256 градаций каждого основного цвета)

4.7. Как вставить дату последнего обновления?

Самый простой метод:

document.write(document.lastModified);

Есил вы хотите что-нибудь посложнее, например, вывод даты и дня недели по-русски, то скрипт напишете сами, помня, что document.lastModified является JS-объектом типа Date.

4.8. Как сделать, чтобы при наведении мышки на картинку-ссылку картинка изменилась?

<head>
<script language="JavaScript" type="text/javascript"><!--
function ChangeImg() {
    if(document.images) {
      eval("document."+ChangeImg.arguments[0]+
      ".src=('"+ChangeImg.arguments[1]+"')");
    }
}

function preload() {
    if (document.images) {
        var imgsrc = preload.arguments;
        arr=new Array(imgsrc.length);
        for (var j=0; j<imgsrc.length; j++) {
            arr[j] = new Image;
            arr[j].src = imgsrc[j];
        }
    }
}
//--></script>
</head>

<body onload="preload('over1.gif', 'over2.gif', 'overN.gif')">

где overN.gif - картинка, которая должна показываться при наведении мышки. onload нужен для того, чтобы картинки подгружались сразу, а не в то время, когда навели мышку, так как на слабом канале эффекта сразу можно не заметить.

<a href="1.htm"
        onmouseover="ChangeImg('image1','over1.gif')"
        onmouseout="ChangeImg('image1','out1.gif')"><img
src="out1.gif" name="image1" alt="image1" /></a>

<a href="2.htm"
         onmouseover="ChangeImg('image2','over2.gif')"
         onmouseout="ChangeImg('image2','out2.gif')"><img
src="out2.gif" name="image2" alt="image2" /></a>

...

<a href="N.htm"
         onmouseover="ChangeImg('imageN','overN.gif')"
         onmouseout="ChangeImg('imageN','outN.gif')"><img
src="outN.gif" name="imageN" alt="imageN" /></a>

в <img> "name" нужно для того, чтобы JS знал, какой картинке соответствует каждая ссылка.

Если вы хотите, чтобы картинка менялась, но не была при этом ссылкой, смотрите пункт 5.1.

4.9. Как открыть по ссылке маленькое окошко нужного размера без панели инструментов, строки состояния и т.д.?

Категорически не рекомендуется конструкция вида

<a href="javascript:window.open()">

Правильный код:

<a href="page.html" target="_blank" 
onclick="window.open(this.href,this.target,'width=XXX,height=YYY,location=no,toolbar=no,menubar=no,status=no');return false;">

(все, что написано в onclick, должно идти в одну строчку )

Этот код обеспечит корректное открытие нового окна с нужным URL даже при отключенных скриптах.

Можно вынести функцию открытия окна в отдельный скрипт:

<script language="JavaScript" type="text/javascript"><!--
function popup(linkObj,w_w,w_h) {
    window.open(linkObj.href,linkObj.target,'width='+w_w+',height='+w_h+
        'location=0,toolbar=0,menubar=0,status=0');
    return false
}
//--></script>

...

<a href="page.html" target="_blank" onclick="return popup(this,XXX,YYY);">

4.10. Как сделать фотогалерею: чтобы в документе были маленькие картинки, а при нажатии на них открывались окошки с увеличенными картинками?

<script language="JavaScript" type="text/javascript"><!--
var resId=0;
var imgWndw;

function imgOpen(imgLink,Title) {
    if (typeof(window.resizeBy)=='undefined') return true;
    imgWndw=window.open('',imgLink.target,'width=100,height=100'+
        ',toolbar=no,menubar=no,location=no,status=no,'+
        'resizable=yes,scrollbars=no,left='+(screen.width>>>2)+
        ',top='+(screen.height>>>4));
    self.focus();
    var imgTitle=(Title)?Title:imgLink.href;
    with (imgWndw.document){
        open();
        write('<ht'+'ml><he'+'ad><ti'+'tle>'+imgTitle+'</ti'+'tle>'+
        '</he'+'ad><bo'+'dy leftmargin="0" topmargin="0" '+
        'rightmargin="0" bottommargin="0" marginwidth="0" '+
        'style="margin:0;padding:0;position:fixed;overflow:none;" '+
        'marginheight="0"><img src="'+imgLink.href+'" border="0" '+
        ' alt="'+imgTitle+'" title="'+imgTitle+'" class="r" /></bo'+
        'dy></ht'+'ml>');
        close();
    }
    resId=setInterval('imgResize()',100);
    return false
}

function imgResize() {
    var w=imgWndw.document.images[0].width;
    if (w>screen.availWidth) w=screen.availWidth;
    var h=imgWndw.document.images[0].height;
    if (h>screen.availHeight) h=screen.availHeight;
    if (w>50 && h>50) {
        var ww=(imgWndw.innerWidth)?imgWndw.innerWidth:((document.body)?
            imgWndw.document.body.clientWidth:null);
        var wh=(imgWndw.innerHeight)?imgWndw.innerHeight:((document.body)?
            imgWndw.document.body.clientHeight:null);
        if (ww && wh) {
            imgWndw.resizeBy(w-ww,h-wh);
        }
        imgWndw.focus();
        clearInterval(resId)
    }
}
//--></script>

...

<a href="disco.jpg" target="_blank"
onclick="return imgOpen(this,'Я на дискотеке');"><img src="disco_small.gif"
width="80" height="60" alt="Я на дискотеке - 200 Кбайт"
title="Я на дискотеке - 200 Кбайт" border="0" /></a>
...
<a href="banja.jpg" target="_blank"
onClick="return imgOpen(this,'Я в бане');"><img src="banja_small.gif"
width="40" height="60" alt="Я в бане - 100 Кбайт"
title="Я в бане - 100 Кбайт" border="0" /></a>

Если заменить target в ссылках с "_blank" на какое-нибудь определенное имя (например, "photo"), то все картинки будут открываться в одном и том же окне, которое будет автоматически подстраиваться под размер каждой новой загружаемой картинки.

Данный код корректно работает и при отключенных скриптах - с той разницей, что картинки просто будут открываться в новом окне.

4.11. Есть ли в JS функция, которая бы брала сценарий из внешнего файла? Как грамотно пользоваться внешними скриптами? Почему нельзя использовать внешние скрипты вместо SSI для вывода текста?

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

Но есть у них и недостатки - они плохо поддерживаются старыми бродилками, кроме того, при вызове функции из внешнего скрипта мы не можем быть уверены в том, что этот скрипт загрузился - в противном случае будет выдано сообщение об ошибке. Особенно плачевно заканчивается использование лентяями внешних скриптов вместо SSI для вывода информации в документ (document.write).

Поэтому грамотный метод использования внешних скриптов такой. В <head> документа, выше всех остальных внешних и внутренних скриптов пишется:

<script language="JavaScript" type="text/javascript"><!--
var jsLoaded=false;
//--></script>

Внешний скрипт вставляется так:

<script language="JavaScript1.2" src="myscript.js"
type="text/javascript"></script>

Обратите внимание на параметр language - там стоит JavaScript1.2 вместо простого JavaScript для того, чтобы старые бродилки не пытались загрузить то, что они все равно не поймут.

В файле myscript.js последней строчкой должно стоять:

jsLoaded=true;

Затем при необходимости использования функций из внешнего скрипта мы поступаем так:

а) В блоке JavaScript:

<script language="JavaScript" type="text/javascript"><!--
...
// тили-тили
// трали-вали
if (jsLoaded) {
        // это дело мне по силе
        // откажусь теперь едва ли
} else {
        // это мы не проходили
        // это нам не задавали
}
...
//--></script>

б) При вызове функции по событию в теге HTML:

<a href="page.html"
onClick="return (jsLoaded)?externalFunction(...):true;">

4.12. Почему NN некорректно ведет себя с русской буквой «я» в сценариях?

Теория: в яваскрипте не должно быть свободного знака 0xFF. Поэтому мы берем знаки, которые могут перекодироваться в 0xFF, и предваряем их обратным слешем. Если вы программировали на Си, такая запись вам знакома.

Практика:

кодировка	OxFF	во всех кодировках пишем
1251	"я"	"\я"
КОИ-8	"Ъ"	"\Ъ"

4.13. Чтобы при наведении мышки на ссылку выдавался мой текст, а не «http://www.name.ru/...»?

<a href="http://rhc.msk.ru"
onmouseover="window.status='мышка на ссылке';return true;"
onmouseout="window.status=window.defaultStatus;return true;">ссылка</a>.

4.14. Как убрать рамки, возникающие при нажатии вокруг ссылок?

Hа это явление жалуются только пользователи MSIE. Оно и понятно. Вставьте в тег ссылки слова onfocus="this.blur();". Все те, кто привык, что курсор не пропадает с глаз долой, скажут вам много теплых и ласковых слов.

4.15. Как сделать выпадающее меню ссылок?

<body>
<form action="/cgi-bin/redir.cgi" method="post">
<select name="redirURL"
onchange="location.href=this.options[this.selectedIndex].value;">
	<option value="">-- Выбрать --</option>
	<option value="http://www.aaa.com/">AAA</option>
	<option value="http://www.bbb.com/">BBB</option>
	<option value="http://www.ccc.com/">CCC</option>
</select>
<noscript><input type="submit" value="Перейти!" /></noscript>
</form>
</body>

Для тех, у кого отключены скрипты, создайте CGI для редиректа (/cgi-bin/redir.cgi), перенаправляющий клиента на нужную страницу.

Вот этот скрипт на Perl:

#!/path/to/perl
use strict;
use CGI;
use CGI qw/:standard/;

my $query = new CGI;
print redirect(-url=>$query->param('redirURL'));

Hа PHP:

<?
Header("Location: $redirURL");
?>

Hа ASP:

<%
Response.Redirect Request("redirURL")
%>

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

5. Обеспечение совместимости с устаревшими и нестандартными браузерами

5.1. Как сделать ссылку, которая никак не проявляет себя, как ссылка?

Это бывает нужно для изменения картинки по наведению мыши (4.8), а также для эмуляции title в NN4 (5.8)

<style type="text/css"><!--
a.hiddenlink, a.hiddenlink:link, a.hiddenlink:visited,
a.hiddenlink:active, a.hiddenlink:hover {
    color:...цвет текста по умолчанию...;
    text-decoration:none;
    cursor:default;
}
--></style>

...

<a href="javascript:;" class="hiddenlink">

5.2. Как сделать буквицу, если браузер не понимает :first-letter? Например, так:

  /\   вот и начался
 /__\  мой новый
/    \ абзац!

<table border="0" cellspacing="6" cellpadding="0" align="left">
<tr>
<td bgcolor="#000000"><font size="7" color="#FFFFFF"
style="font-family:sans-serif;font-size:300%;"><b>&nbsp;А&nbsp;</b></font>
</td>
</tr>
</table>вот и начался мой новый абзац!

Буквица - буква между двумя   в <td>.

Параметры bgcolor в <td>, color, size и style в <font> задавать по вкусу ;)

5.3. Как окружить табличку рамкой нужного цвета, если браузер не понимает CSS?

Это возможно, но если просто прописать bordercolor (!), то в NN рамка будет объемная, а в IE - монотонная.

Чтобы рамка была объемной и в IE, и в NN, надо для IE прописать в <table> параметры bordercolorlight="#RRGGBB" (!) и bordercolordark="#RRGGBB" (!), которые нужно узнать, открыв страницу в NN, сделав Print Screen, вставив образ экрана в графический редактор и узнав RGB-цвет светлых и темных «граней» рамки.

Чтобы рамка была монотонной и в IE, и в NN, делаем так:

<table border="0" cellspacing="0" cellpadding="...толщина отступа..." bgcolor="...цвет бордера...">
  <tr>
    <td>
<table width="100%" border="0" bgcolor="...цвет фона...">

..Наша табличка...

</table>
    </td>
  </tr>
</table>

5.4. Как "разлиновать" табличку тонкими линиями нужного цвета, если браузер не понимает CSS?

<table border="0" cellspacing="0" cellpadding="0" bgcolor="...цвет линий...>
  <tr>
    <td>

<table width="100%" cellspacing="...толщина линий..." border="0">
<tr bgcolor="...цвет фона первой строки...">
..первая строка...
</tr>

<tr bgcolor="...цвет фона второй строки...">
..вторая строка...
</tr>
...
</table>

    </td>
  </tr>
</table>

5.5. Чтобы в NN4 в таблице было несколько колонок с фиксированным размером, и одна или несколько, занимающих оставшуюся часть таблицы?

Нужно в верхнем ряду таблицы поставить в фиксированных ячейках width="XXX", а в той, что должна занимать остальную часть таблицы, прописать width="100%". При этом, если контент фиксированных ячеек по ширине меньше, чем номинальная ширина ячейки, то нужно в такую ячейку поставить «распорку» - пустой прозрачный gif с параметром width, равным ширине ячейки за вычетом удвоенного cellpadding таблицы.

Если «свободных» ячеек должно быть больше одной, то пропишите их размер в процентах, так, чтобы соотношение процентов соответствовало желаемому соотношению размеров, а сумма составляла 100%. Hапример, width="33%" и width="67%" сделает две ячейки, одна вдвое шире другой.

5.6. Чтобы избежать появления пустой строки после закрытия тегов <hN> и <form> в NN4?

Hужно поместить их в <div> с уменьшенной с помощью CSS высотой строк, а в самих тегах прописать нормальную высоту строк:

<style type="text/css"><!--
div.noemptystrings{
    line-height:0.4em;
}
div.noemptystrings form,div.noemptystrings h1,div.noemptystrings h2 {
    line-height:1.2em;
}
--></style>
...

<div class="noemptystrings">
<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<form>
Элементы формы...
</form>
</div>

Значения 0.4em и 1.2em в стилях ориентировочные, их нужно «подгонять» в зависимости от используемых размеров шрифтов.

5.7. Чтобы пустая ячейка таблицы показывалась в NN4- и Mozilla/NN6?

Для Mozilla/NN6 используем CSS:

table { empty-cells:show; }

Для NN4- нужно поместить в ячейку   или «пустой» gif, с применением правил, описанных в п. 2.23

5.8. Чтобы комментарий (параметр title) показывался в NN4?

Это можно сделать только для ссылок и для некоторых элементов формы. Если в NN4 нужно показывать комментарий для других элементов HTML, нужно поместить их в «пустую» ссылку, как описано в п. 5.1.

Вставляем в <head> скрипт:

<script language="JavaScript" type="text/javascript"><!--
var tipId=0;
var tipOffId=0;

function showTip(tipTxt,x,y) {
    if (document.layers) {
        if (!document.layers.tip) {
            document.layers.tip=new Layer(window.innerWidth)
        }
        document.layers.tip.left=x-5;
        document.layers.tip.top=y+15;
        document.layers.tip.document.open();
        document.layers.tip.document.write('<table border="0" '+
        'cellspacing="0" cellpadding="1"><tr><td bgcolor="#000000">'+
        '<table border="0" cellspacing="0" cellpadding="1"><tr><td '+
        'style="background:#FFFFCC;font-family:sans-serif;"><small '+
        'style="font-size:8pt;">'+unescape(tipTxt)+'</small></td></tr>'+
        '</table></td></tr></table>');
        document.layers.tip.document.close();
        document.layers.tip.visibility='show'
        tipOffId=setTimeout('tipOff();',6000)
    }
}

function tipOn(tipTxt,eventObj) {
    if (document.layers) {
        tipId=setTimeout('showTip(\''+escape(tipTxt)+'\','+
            eventObj.x+','+eventObj.y+');',500);
    }
}

function tipOff() {
    if (document.layers) {
        clearTimeout(tipId);
        clearTimeout(tipOffId);
        if (document.layers.tip) {
            document.layers.tip.visibility='hide'
        }
    }
}
//--></script>

...

<a href="page.html" title="Комментарий"
onmouseover="tipOn('Комментарий',event);" onmouseout="tipOff();">

5.9. Чтобы <iframe> показывался в NN4?

Это возможно, если вставляемая страничка не содержит скриптов и если <iframe> лежит не в ячейке таблицы.

Для начала вставляем в <head> скрипт:

<script language="JavaScript" type="text/javascript"><!--
function chIframe(lnk) {
    if (document.layers){
        if (document.layers[lnk.target]) {
            if (document.layers[lnk.target].origX==undefined) {
                document.layers[lnk.target].origX=
                    document.layers[lnk.target].pageX;
                document.layers[lnk.target].origY=
                    document.layers[lnk.target].pageY;
            }
            with (document.layers[lnk.target]) {
                left=origX;
                clip.left=-origX;
                top=origY;
                clip.top=-origY;
               src=lnk.href;
            }
        }
        return false;
    } else return true;
}
//--></script>

А <iframe> прописываем так:

<iframe name="myIframe" src="myiframe.html" width="X" height="Y">
<div id="myIframe"
style="position:relative;width:X;height:Y;include-source:url('myiframe.html');">
Ваш браузер не поддерживает вложения HTML-документов.
Нажмите <a href="myiframe.html" target="myIframe">сюда</a>,
чтобы увидеть документ в новом окне.
</div>
</iframe>

Если вы хотите, чтобы ваша ссылка изменяла содержимое iframe, пропишите ее так:

<a href="newpage.html" target="myIframe" onсlick="return chIframe(this);">

5.10. Чтобы фон странички оставался неподвижным при прокрутке в NN4?

Вот пример:

<html>
<head>
<title>Страничка с неподвижным фоном</title>
<style type="text/css">
<!--
body{
    background-image:URL('back.gif');
    background-attachment:fixed;
    margin:0px;padding:0px;
}
#body{position:absolute;z-index:1;width:auto;}
-->
</style>
<script language="JavaScript1.2" type="text/javascript"><!--
var oldScrollX=0;
var oldScrollY=0;
var NN=((document.layers)?true:false);

function fixBg() {
    if (window.pageXOffset!=oldScrollX || window.pageYOffset!=oldScrollY){
        document.layers.bg.left=oldScrollX=window.pageXOffset;
        document.layers.bg.top=oldScrollY=window.pageYOffset;
    }
}

function makeBg() {
    if (NN) {
        document.layers.bg = new Layer(window.innerWidth);
        document.layers.bg.left = 0;
        document.layers.bg.top = 0;
        document.layers.bg.height = window.innerHeight;
        document.layers.bg.background.src = 'back.gif';
        document.layers.bg.visibility = 'show';
        document.layers.bg.zIndex = 0;
        document.layers.bg.document.open();
        document.layers.bg.document.write('<table width="100%" '+
            'height="105%" border="0" cellspacing="0" cellpadding="0">'+
            '<tr><td> </td></tr></table>')
        document.layers.bg.document.close();
        setInterval("fixBg();",100);
    }
}
//--></script>
</head>
<body background="back.gif" onload="makeBg();"><script
language="JavaScript1.2"><!--
if (NN) document.write('<div id="body">')
//--></script>
...
...
...
Baш HTML
...
...
...
<script language="JavaScript1.2"><!--
if (NN) document.write('</div><table height="NNNN">'+
//
//Здесь пишем высоту странички в пикселах при разрешении 640x480
'<tr><td> </td></tr></table>');
//--></script></body>
</html>

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

6. Рабочее место вебмастера

6.1. Какие редакторы HTML бывают?

Сущеcтвует два типа редакторов. Во-первых, это «визуальные» редакторы. Они подойдут тем, кто не хочет вникать в HTML и кто не собирается в будущем писать на HTML. Вот несколько таких редакторов:

FrontPage	http://www.microsoft.com/frontpage
FrontPad	в поставке MSIE 4
Mozilla Composer	(в поставке Mozilla, http://www.mozilla.org)
Netscape Composer	(в поставке Communicator, http://home.netscape.com/)
Hot Metal	http://softquad.com/products/hotmetal/
HomePage Publisher	http://ourworld.compuserve.com/homepages/clerin/
DreamWeaver	http://www.macromedia.com/software/dreamweaver/

Во-вторых, редакторы, рaбoтaющиe нaпрямую c кодом. Заметим, что DreamWeaver и Mozilla Composer пытаются совмещать в себе оба типа.

Notepad	%SystemRoot%\notepad.exe
vi	/usr/bin/vi
HTML Pad	http://www.book.ru/snk/
1st Page	http://www.evrsoft.com
Hot Dog	http://www.sausage.com/hotdog
HTML-Kit	http://www.chami.com/html-kit/
HTMLed32	http://www.ist.ca
HomeSite	http://www.macromedia.com/software/homesite/
Bred	http://yurok.da.ru
CoffeeCup	http://www.coffeecup.com
SiteAid	http://www.siteaid.com
FAR manager	http://www.rarsoft.com

К FAR нужно использовать плагин colorer и htmledtior http://www.uic.nnov.ru/~ruiv/plugring/cgi-bin/downld.cgi

6.2. А какой редактор лучше?

Вообще говоря, дело вкуса. Но, к примеру, HomeSite не ругает никто :-)

6.3. Как заставить HomeSite не заменять русские буквы на непонятные символы?

HomeSite 3.0.x,4.0.x:

Options
    Settings
        Tag Help
            Automatically convert special characters = off

HomeSite 4.5.x, 5.x:

Меню Options/Settings/Editor (узел дерева слева). Справа на панели отключить левый нижний чекбокс: Automatically Convert Special Characters

6.4. Можно ли в HomeSite редактировать файлы в KOI-8 и DOS-866?

Options
    Settings
        Edit
            Font
                и пользуйтесь любым нужным вам шрифтом

Правда, вам понадобится специальная раскладка клавиатуры.

6.5. Как заставить 1st Page редактировать koi-8?

Options
    Editing Preferences
        Highlighting
            *Font и charset*

В последней строчке выбрать шрифт KOI-8.

6.6. Как создавать и редактировать файлы в Unicode (UTF-8)?

Для этого совершенно незаменим Mozilla Composer. Открываете файл в исходной кодировке (или создаете новый), потом в меню File выбираете пункт Save as Charset и выбираете нужную кодировку. Кроме UTF-8, Mozilla позволяет редактировать файлы в любой, даже самой экзотической кодировке, в том числе и в KOI8-R и DOS-866, причем без использования специальных раскладок клавиатуры.

6.7. Какие браузеры стоят для тестирования страниц у честного человека?

Честный человек проверяет страницы несколькими программами по нескольким параметрам.

• Mozilla последних версий перестал быть тем тормозным и глючным Netscape 6, который заслуженно проклинали многие. Теперь это быстрый, стабильный и безопасный браузер, практически идеально подерживающий последние стандарты HTML, CSS, JavaScript и DOM. Если ваша страничка неправильно показывается или ваши скрипты не работают в Mozilla, то наверняка вы сами нарушили стандарты и вам нужно искать ошибку в вашем коде. Кроме того, Mozilla совершенно одинаково работает практически подо всеми более или менее распространенными ОС.

  Коммерческие версии Netscape 6.2.x ничем не отличаются от Mozilla, кроме раздутого дистрибутива и отключения некоторых полезных функций типа блокировки баннеров.

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

• IE4 показывает поддерживаемые им атрибуты CSS. Особенно интересные результаты получаются во IE, если отключить мультимедию, CSS и параметры шрифтов.

• NN4 показывает только поддерживаемые им атрибуты CSS. Кроме того, NN4 очень чувствителен к структурным ошибкам в верстке HTML и CSS - незакрытым тегам, ошибочно прописанным атрибутам, некорректным селекторам и свойствам CSS и т.п.

• Lynx показывает вид в неграфическом браузере. Кроме того, он не поддерживает таблиц. Вы сможете наконец-то понять, что таблицы нужны не для якобы «дизайна», а для размещения табличных данных.

• Opera показывает HTML и CSS очень корректно, уступая только Mozilla. В частности,она даст вам понять, что вы не знаете, что такое абзац. Кроме того, она умеет масштабировать и позволяет узнать, насколько ваш HTML-документ привязан к размеру монитора (известно, что правильный HTML-документ никак к этому размеру не привязан). Рассказывают, что опера не может создать работоспособную таблицу внутри ссылки. Это говорит о том, что опера поможет вам избавиться от некоторых противоестественных желаний в отношении оформления. Opera также отучает от чрезмерного использования скриптов.

6.8. Как на одну и ту же версию Windows поставить несколько версий IE?

IE3 16-bit можно поставить на любую версию Windows - качаете файл http://ie3.chat.ru/ie3.zip (1.3 мегабайта), распаковываете в любой каталог и запускаете iexplore.exe. Правда, есть небольшая проблема: эта версия не понимает JavaScript, но при этом игнорирует содержимое <noscript>. Зато все оформление, включая CSS, показывается так, как оно выглядело бы в «нормальной» версии IE3.

IE версий 5, 5.5 и 6 друг с другом не уживутся никак (разве что только с помощью программы VMWare, http://www.vmware.com)

Что касается совмещения IE4 c 5+, то это возможно, хотя есть тонкости. Если у вас установленная «с нуля» Win98SE, ME, 2000 или XP - то ничего не выйдет, в этих ОС изначально стоит IE5+.

Чтобы иметь одновременно IE4 и IE5+ в этих системах, нужно делать так:

1. Поставить Win98 не SE (если потом будет стоять 98SE или ME) или NT4 SP3 (если потом ставить 2000/XP)
2. Поставить IE4 SP2
3. Запустить установку IE5 или 5.5 (пока неизвестно, есть ли нужная нам фича в IE6, поэтому лучше подстраховаться).
4. После принятия лицензионного соглашения выбрать пункт Customize Your Installation, в следующем окне нажать кнопку Advanced и поставить галочку Compatibility. Далее следовать инструкциям по установке.
5. После установки следует поставить апгрейдом нужную вам ОС и, при желании, IE6.

6.9. Как мне протестировать страничку, если я собираюсь размещать ее на сервере, прописываю в href и img src пути от корня сервера, использую CGI, SSI, PHP и т.п., и вообще, чтобы все было «как у взрослых»?

Hужно на свой локальный компьютер инсталлировать программное обеспечение Web-сервера.

Если ваш сайт будет лежать на сервере под UNIX, то для его отладки под Windows 9x/NT можно использовать Apache for Win32 (www.apache.org) и Sambar (www.sambar.com). Еще лучше, если вы поставите на свой компьютер и начнете осваивать связку Linux или FreeBSD + Apache.

Если ваш сайт будет работать под IIS для NT/2000, то под Win9x и NT/2000/XP Workstation используйте Personal Web Server из поставки Windows, но еще лучше поставить NT/2000 Server и использовать «взрослую» версию IIS (Option Pack for NT, стандартная поставка Win2000 Server).

Если вы со своего компьютера работаете в интернете и не очень хорошо разбираетесь в вопросах безопасности, то на время сеанса online локальный Web-сервер лучше отключить.

6.10. Как перевести документ Word или Excel в формат HTML с минимальным количеством лишнего кода?

Для Word: экспортируем файл в формат HTML, а потом читаем с помощью Dreamweaver или обрабатываем бесплатной программой Tidy (http://tidy.sourceforge.net/)

Чтобы Tidy или Dreamweaver было немного легче разбираться в нагромождении генерируемого Word HTML, можно использовать для экспорта из Word 2000 модуль Office 2000 HTML Filter 2.0 http://office.microsoft.com/downloads/2000/Msohtmf2.aspx

Для Excel: используем утилиту Excel2HTML (http://idbsoft.webservis.ru)

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

7. Обработка графики

7.1. Какие форматы графических файлов применяются в Web?

Наиболее употребительными являются три формата: GIF89a (*.gif), JPEG (*.jpg) и PNG (*.png). У каждого из них есть свои особенности, преимущества и недостатки.

GIF89a - самый старый из употребляемых в сети графических форматов. Он поддерживается всеми графическими браузерами, позволяет делать рисунки с прозрачными областями (но не полупрозрачными) и несложные анимации. Рисунки в этом формате сжимаются построчно, поэтому рисунок с горизонтальными линиями в GIF89a «весит» меньше, чем с вертикальными. Недостатка у GIF89a два: во-первых, он позволяет использовать одновременно не более 256 цветов в одной картинке (кадре), и, во-вторых, он запатентован CompuServe, его использование без лицензии незаконно и теоретически может быть наказано в судебном порядке. GIF89a хорошо использовать для графики с резкими границами и большими монотонными полями.

JPEG - формат сжатия графики с потерями, разработанный с учетом особенностей человеческого зрения. Сжимает полноцветные изображения в 20-100 раз относительно первоначального объема файла, в зависимости от качества получаемой картинки. Применяется для сжатия фотографий, а также других картинок с плавными переходами яркости и цвета.

PNG - открытый формат, разработанный в качестве замены GIF89a. Графика в PNG сжимается как по горизонтали. так и по вертикали. что дает заметный выигрыш по сравнению с GIF89a. Позволяет использовать полноцветную графику, прозрачность и полупрозрачность, гамма-коррекцию и т.д. Недостаток - PNG поддерживается на хорошем уровне не всеми браузерами. Например, прозрачные области в PNG не будут корректно показываться в NN4, а полупрозрачные - в IE4-6.

Недавно появился очень перспективный формат анимационной графики MNG (Multiple-image Network Graphics), который поддерживает все возможности алгоритмов сжатия PNG и JPEG (в том числе полупрозрачность и гамма-коррекцию) для создания анимированных изображений. Но, к сожалению, пока он поддерживается только в Mozilla/NN6.

7.2. Какими графическими редакторами лучше пользоваться?

Самые популярные пакеты для создания и обработки растровой графики:

Коммерческие:

Adobe PhotoShop
Corel PhotoPaint

Бесплатные и условно бесплатные:

Paint Shop Pro (http://www.jasc.com) - Shareware
Gimp (http://www.gimp.org) - Freeware (GNU), существует под большинство ОС.

Для обработки векторной графики используют такие пакеты:

Коммерческие:

Adobe Illustrator
CorelDraw

Бесплатные и условно бесплатные:

Xara X (http://www.xara.com)
tgif, xfig, staroffice, killustrator (под Linux и FreeBSD)

7.3. Что такое чересстрочная и прогрессивная графика, почему она лучше обычной и как ее создать?

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

Для создания чересстрочной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a или PNG. Для PhotoShop 4- это называется «File/Export/GIF89a Export». Должен быть отмечен пункт «Interlace». В PhotoShop 5+ используем пункт меню «File/Save for Web...» и в появившемся окне выбираем формат GIF или PNG, при этом отмечая галочку Interlace.

Для формата JPEG есть функциональный аналог чересстрочной графики - формат Progressive JPEG. В PhotoShop экспорт в этот формат достигается пунктом меню «Save a Copy...» (в ранних версиях) или «Save for Web...», и в опциях JPEG отмечаем пункт Progressive. Интересно, что прогрессивный JPEG не только удобнее для юзера, но при том же качестве часто «весит» меньше, чем стандартный :)

7.4. Как создать прозрачную и полупрозрачную графику?

PhotoShop 5+: делаем картинку с альфа-каналом и экспортируем в PNG или GIF («Save for Web...»), не забывая отметить галочку Transparency

В PhotoShop 4- «File Export/GIF89a Export», затем пипеткой выделяете тот цвет, который должен стать прозрачным.

Есть и программы типа GIF Constructor Set, которые помогают определить один из цветов палитры GIF как прозрачный.

7.5. Как создать анимацию?

GIF-анимация - это последовательная смена картинок. Картинки можно сделать в любом редакторе, а сами анимации в специальных программах:

а) Gif Construction Set:

• Запустите 'Мастер' в Gif Construction Set:
  File / Animation Wizard... и нажмите Next и еще раз Next. Если вы хотите, чтобы ваша анимация после выполнения остановилась, то выбирайте Animate once and stop, а если хотите, чтобы она постоянно работала - Loop Indefinitely. Нажимайте Next.

• Далее выберите качество изображения (фотореалистичное, рисованное).

• Теперь надо выбрать промежуток времени между сменой кадров.

• Теперь выбираете из каталогов GIF'ы для анимации.

• Нажимайте Done.

• Сохраните.

• Для проверки нажмите View или просмотрите анимацию в браузере.

б) MS GIF Animator:

• Нажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.

• Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и разместите их в нужном порядке, перетаскивая мышью, используя Clipboard или клавиши со стрелками на панели (они дублируются клавиатурными стрелками).

• Для повторяющейся анимации включите опцию Animation / Looping. При этом можно задать количество повторов или включить опцию Repeat Forever для бесконечного повтора.

• На закладке Image выставьте для _каждого_ кадра нужную задержку по времени (проверить анимацию можно, нажав кнопку Preview), метод рисования (как правило, используется либо Undefined, либо Leave) и наличие прозрачных областей в текущем кадре (и прозрачный цвет).

• Сохраните.

в) Ulead Gif Animator

• Запустите File / Animation Wizard

• Щелкните на Add Image. Выберите нужные файлы (выбирать можно сразу несколько файлов - если у вас они будут стоять не в том порядке, в котором нужно, вы потом сможете поменять их местами).

• Щелкаем «Далее». Появится выбор типа вашего изображения:

  Text-Oriented (Don't Dither) - состоят из текста
  Photo-Oriented (Dither) - содержат картинки

• Hажимаем «Далее». Можете выбрать глобальное время задержки или сделать это потом отдельно для каждого кадра.

• Hажимаем «Далее». Hажимаем «Готово». Стрелками [вверх] и [вниз] можете менять позицию кадра в анимации. В поле Delay можно установить свою задержку для каждого кадра

• Жмем F12. Сохраните.

7.6. Можно ли оптимизировать графику (уменьшить размер)?

Да, и для этого есть два основных способа.

Первый связан с форматом GIF и палитрованной графикой. По умолчанию используется палитра в 256 цветов. Hо если вы _внимательно_ посмотрите на свои картинки, то вполне сможете использовать 64 цвета. Или 32. Или 16. Любой одноцветный текст, кстати, замечательно умещается в 8 цветов. Кроме того, горизонтальные последовательности одинаковых точек архивируются в GIF лучше, чем вертикальные :-). А если уменьшить неиспользуемые поля...

Второй связан с форматом JPEG и полноцветной графикой. Тут рецепт только один - меняйте степень сжатия. Можно также попробовать поиграть с параметром Baseline.

Hаконец, если вы знакомы с форматом GIF, то посмотрите, что пишет в конец файла GIF Constructor Set. Это тоже можно вырезать.

7.7. Посоветуйте программу или plug-in к Photoshop для создания анимации.

Gif Construction Set	(http://www.mindworkshop.com/alchemy/gifcon.html)
Ulead Gif Animator	(http://www.ulead.com/ga/)
Microsoft Gif Animator	(ftp://ftp.asf.ru/pub/Graphics/MicrosoftGIFAnimator/GIFSETUP.EXE)

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

8. Размещение (хостинг), CGI и SSI

8.1. Какие бесплатные серверы поддерживают SSI и CGI?

http://www.hut.ru
http://www.holm.ru
http://www.wallst.ru
http://www.webservis.ru
http://www.virtualave.net

8.2. У меня есть хорошая и серьезная страничка, но я не хочу выкладывать ее на всяких халявных серверах. Есть ли сервера, которые дают место?

http://hobby.ru
10 Mb, CGI, адрес типа <name>.hobby.ru
поддержка некоммерческих проектов
хостинг от Zenon N.S.P.

http://www.uka.ru
без ограничений, адрес типа www.uka.ru/<name> или <name>.uka.ru
рекламная поддержка, доступ по ftp, возможно почтовый ящик
условия: http://www.uka.ru/foruser.html
или почти без условий хостится на www.uka.ru/people/
2мб места, _вебинтерфейс_ для управления страницей

http://www.t-80.ru
без ограничений, CGI, SSI
помощь в раскрутке
условия http://www.t-80.ru/work.htm

http://am.lgg.ru
15mb, e-mail, CGI, SSI, просят в разместить их баннер
цензура

8.3. Как установить счетчик посещений?

На халявной страничке, лишенной CGI, устанавливается указатель на удаленный сервер, считающий посещения. Вам требуется зарегистрироваться на сайте, предоставляющем такую услугу, и вставить тот html-код, который он вам даст. Правда, обычно присылаемый код очень плох с точки зрения соблюдения стандартов, поэтому его придется править вручную.

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

1. Rambler http://www.rambler.ru/doc/add_site.shtml
2. Mail.Ru http://top.mail.ru/add
3. SpyLog http://www.spylog.ru/tracker_descr.phtml?PHPSESSID=&package_id=1
4. HotLog http://www.hotlog.ru/
5. KMiNDEX http://www.kmindex.ru/

На собственном сервере... впрочем, если у человека есть сервер, то он уже знает ответ на этот вопрос.

8.4. Хочу поставить свой счетчик, независимый. Где скрипт брать?

Hа http://www.worldwidemart.com/scripts лежит много различных счетчиков. Есть на Perl, sh и вроде бы на C. А что, разве вы еще не можете сами написать нужный вам счетчик?!

8.5. Как сбросить в файл или в базу данных результат заполнения формы?

Использовать исполняющиеся на сервере сценарии (скрипты), такие, как CGI, PHP, ASP, Java-сервлеты.

8.6. Как послать результат заполнения формы на e-mail?

Воспользyйтесь бесплатной слyжбой с www.webclub.ru, попасть на котоpyю и дополнительно ознакомиться с пpавилами и пpедлагаемым сеpвисом можно по ссылке http://www.webclub.ru/free/sendform/index.html.

8.7. Чтобы один и тот же кусок HTML автоматически вставлялся в большое количество документов?

Для этого существует механизм SSI. Если ваша страничка лежит на нормальном сервере, то он должен поддерживать SSI, о тонкостях настройки узнайте у вашего сисадмина.

Если страничка лежит на chat.ru или narod.ru, то никак. Правда, некоторые бесплатные серваки поддерживают SSI, о чем можно почитать в их документации.

8.8. Можно ли бесплатно сделать домен?

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

8.9. Почему после закачки файлов на сервер на страничке не работают ссылки и внешние скрипты и не показываются мои картинки и стили?

Для нормальных серверов, стоящих под хорошими операционными системами, важен регистр в имени файла. Скорее всего, вы прописали <img src="FILE.img">, а залили file.IMG.

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)

правила · список вопросов · преамбула · обратная связь

9. Дополнительная информация

9.1. Посоветуйте близкие по тематике эхоконференции.

RU.APACHE	О веб-cервере Apache
RU.CGI	Cgi-программирование и вебсерверы
RU.CGI.C	Cgi-программирование на Си и Си++
RU.CGI.PERL	Программирование на Perl
RU.CGI.PERL.CHAINIK	CGI на Perl начинающим
RU.FLASH	Обсуждение технологии Flash
RU.HTML.PROFY	Html для профессионалов
RU.INTERNET.WWW	WWW и около
RU.INTERNET.WWW.NEWS	анонсы Web-узлов
RU.JAVA	Язык программирования Java
RU.JAVA.CHAINIK	Java для начинающих
RU.JAVASCRIPT	Язык программирования JavaScript
RU.INTERNET.NETSCAPE	Программное обеспечение Netscape
RU.INTERNET.SOFT	Обсуждение софта для интернета
RU.OPERA	Браузер Opera
RU.PHP	Программирование на PHP
RU.PHP.CHAINIK	PHP для начинающих
RU.VBSCRIPT	Язык программирования VBScript
RU.VRML	Обсуждение языка VRML
RU.WEB.CONSTRUCTION	Создание Web-сайтов
RU.WEB.DESIGN	Веб-дизайн
RU.WEBSITE	Профессиональное создание веб-сайтов
RU.WEB.SHOW_YOUR_SITE	Оценка cайтов и замечания
RU.XML	Обсуждение языка разметки XML

9.2. Где взять документацию по HTML?

XHTML 1.1
Английский: http://www.w3.org/TR/xhtml11
Русский: http://pyramidin.narod.ru/xhtml11/overview.html

XHTML 1.0
Английский: http://www.w3.org/TR/xhtml1
Русский: http://www.stack.ru/~julia/XHTML/xhtml1.phtml

HTML 4.01
Английский: http://www.w3.org/TR/html4
Русский: http://pyramidin.narod.ru/html401/index.htm

HTML 3.2
Английский: http://www.w3.org/TR/REC-html32
Русский: http://www.webclub.ru/content/markup_html/article-7.html

HTML в Netscape Navigator 1.x - 4.x
http://developer.netscape.com/docs/manuals/htmlguid/index.htm

9.3. Где взять документацию по CSS?

CSS2
Английский: http://www.w3.org/TR/REC-css2
Русский: http://pyramidin.narod.ru/css2/index.htm

CSS1
Английский: http://www.w3.org/TR/REC-CSS1.html
Русский: http://www.webclub.ru/content/markup_css/article-10.html

CSS в Netscape Navigator 4.x
http://developer.netscape.com/docs/manuals/communicator/dynhtml/jss3.htm

9.4. Где взять документацию по JavaScript?

Стандарт ECMAScript (в формате PDF)
ftp://ftp.ecma.ch/ecma-st/Ecma-262.pdf

JavaScript в Netscape Navigator 2.x - 4.x
http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm

JScript в Microsoft Internet Explorer
http://msdn.microsoft.com/library/en-us/script56/html/js56jslrfjscriptlanguagereference.asp

9.5. Где взять документацию по DOM и DHTML?

DOM Level 1:
http://www.w3.org/TR/REC-DOM-Level-1/

DOM Level 2:
Ядро DOM: http://www.w3.org/TR/DOM-Level-2-Core/
DOM HTML: http://www.w3.org/TR/DOM-Level-2-HTML/
DOM CSS: http://www.w3.org/TR/DOM-Level-2-Style/
DOM события: http://www.w3.org/TR/DOM-Level-2-Events/
DOM Views: http://www.w3.org/TR/DOM-Level-2-Views/
DOM Traversal and Range: http://www.w3.org/TR/DOM-Level-2-Traversal-Range/

Работа с DOM при помощи JavaScript описывается в разделах ECMA Script Binding соответствующих спецификаций.

DOM в Mozilla/NN6
http://www.mozilla.org/docs/dom/domref/

DHTML в Netscape Navigator 4.x
http://developer.netscape.com/docs/manuals/communicator/dynhtml/index.htm
http://developer.netscape.com/docs/manuals/js/client/jsref/index.htm

DHTML, DOM и CSS в Microsoft Internet Explorer
http://msdn.microsoft.com/workshop/author/dhtml/reference/dhtml_reference_entry.asp

9.6. Посоветуйте еще несколько интересных ссылок.

http://croll.hotbox.ru/W3C/Consortium/Translation/russian-finished-ru.html
Русские переводы документов World Wide Web Consortium (W3C).

http://www.webclub.ru/
Сайт с переводами спецификаций и авторскими статьями по широкому кругу вопросов.

http://www.citforum.ru/
Много интересных статей по различным вопросам.

http://faqs.org.ru/
Сборник FAQ по различным вопросам. Есть FAQ из большинства конференций FidoNet

http://users.kpi.kharkov.ua/lre/bde/media/hyper/oglmed.html
Использование гипертекста. Даны основные представления о гипертексте; рассмотрены гипертекстовые, экспертные и гипермедиальные системы.

http://rtfm.vn.ua/
VinNest Documentation Home. Достаточно качественный сборник документации на самые различные темы.

http://www.infocity.kiev.ua/
InfoCity - виртуальный город компьютерной документации.

http://www.webmascon.com/
Webmascon - журнал для веб-мастеров.

http://www.aurora.ru/index_www.htm
Кунштюк для WWW: Примеры DHTML в действии, примеры JavaScript.

http://webclass.polyn.kiae.su/
Очень неплохо для начального изучения и понимания основ CSS, HTML и JavaScript

http://kimsite.narod.ru/webmaster/index.htm
Все для вебмастера.

правила · список вопросов · преамбула · обратная связь · наверх

По материалам эхоконференции RU.HTML.CHAINIK (news://fido7.ru.html.chainik)