Q: Как создать прозрачную графику?
A: Для создания прозрачной графики вам понадобится графический редактор,
например PhotoShop 4.0 :
* Откроем файл File -> Open
* Закрасим всю облать, которую надо сделать прозрачной в один цвет
* Image -> Mode -> Indexed Color
* Сохраним его в формате GIF89a: File Export -> GIF89a Export...
* Пепеткой выделим тот цвет на рисунке который надо сделать прозрач-
ным.
* Кликаем Ok
(AE) : Гоpаздо yдобнее в том же Фотошопе создать альфа-канал, в кото-
pом и наpисовать пpозpачность, пpичем та часть изобpажения, котоpая
находится под чеpными областями альфа-канала, бyдет пpозpачной. Сохpа-
няем обычным способом.
Q: Как создать анимации?
A: Картинки для анимаций можно делать в PhotoShop, LViewPro, и т.д. А
сами анимации в специальных программах :
а) Gif Construction Set :
* Запустите 'Мастер' в Gif Construction Set:
File / Animation Wizard... и кликайте Next и еще раз Next. Если
вы хотите, чтобы ваша анимация после выполнения остановилась, то
выбирайте Animate once and stop, а если хотите, чтобы она посто-
янно работала - Loop Indefinitely. Кликайте Next.
* Далее выберите качество изображения (фотореалистичное, рисован-
ное, и тд.). Next.
* Теперь надо выбрать промежуток времени между сменой кадров. Next.
* Теперь выбираем GIF'ы для анимации. Next.
* Кликаем Done.
* Сохраните File -> Save As...
* Для проверки нажмите View, или запустите анимацию в браузере.
б) MS GIF Animator :
* Нажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр
анимации.
* Используя кнопку Insert (Ctrl+I) вставьте остальные кадры и раз-
местите их в нужном порядке, перетаскивая мышью, используя Clip-
board или клавиши со стрелками на панели (они дублируются клавиа-
турными стрелками).
* Для повторяющейся анимации включите опцию Animation / Looping.
При этом можно задать количество повторов или включить опцию
Repeat Forever для бесконечного повтора.
* На закладке Image выставите для каждого (!) кадра нужную задержку
по времени (проверить анимацию можно нажав кнопку Preview), метод
рисования (как правило используется либо Undefined, либо Leave) и
наличие прозрачных областей в текущем кадре (и прозрачный цвет).
* Нажмите кнопку Save As и сохраните все в файле... Анимация готова
в) Ulead Gif Animator
* Запустите File / Animation Wizard
* Щелкните на Add Image. Выберите нужные файлы (выбирать можно сра-
зу несколько файлов - если у вас они будут стоять не в том поряд-
ке, в котором нужно, вы потом сможете поменять их местами)
* Щелкаем "Далее". Появится выбор типа вашего изображения :
Text-Oriented (Don't Dither) [состоят из текста]
Photo-Oriented (Dither) [содержат картинки]
* Кликаем "Далее". Можете выбрать глобальное время задержки, или
сделать это потом отдельно для каждого кадра.
* Кликаем "Далее". Кликаем "Готово". Стрелками [вверх] и [вниз]
можете менять позицию кадра в анимации. В поле Delay можно уста-
новить свою задержку для каждого кадра
* Жмем F12. Save As... Все.
Q: Как сделать, чтобы при нажатии на определенную область картинки,
происходил переход на один адрес, а при нажатии в другой области -
на другой?
A: Проще всего воспользоваться так называемыми "мэпами".
<IMG SRC="адрес_картинки" USEMAP="#имя_мэпа">
<map name="имя_мэпа">
...
</map>
Обратите внимание, что при описании самого мэпа пишется просто его
"имя_мепа", а при описании картинки пишется "#имя_мэпа". Формат тэга
смотрите в документации.
Можно воспользоавться специальными программами для "нарезки" мэпов :
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 далее по ссылкам]
[ftp://hobbes.nmsu.edu/pub/os2/apps/graphics/imagepro/embo202.zip]
На hobbes.nmsu.edu/os2 вы можете найти и другие программы под OS/2.
Q: Можно ли оптимизировать графику (уменьшить размер) ?
A: Можно воспользоваться специальной программой для этого :
Ulead SmartSaver (Pro) [http://www.webutilities.com/]
Adobe Image Ready (теперь входит в поставку Photoshop 5.5 - отдель-
но его нет) [http://www.adobe.com/]
Вопросы,
связанные с размещением страничек
Q: У меня есть хорошая и серьзеная страничка, но я не хочу выкладывать
ее на всяких халявных серверах типа www.chat.ru. Может есть такие
сервера, которые дают бесплатно место под такие странички ?
A: Есть такие :
* http://hobby.ru/
[10 Mb +
CGI, адрес типа <name>.hobby.ru, поддер- жка некоммерческих проектов. Хостинг от Zenon N.S.P.]
* http://www.uka.ru/ [Unlimited, адрес типа www.uka.ru/<name> или
<name>.uka.ru, pекламная поддеpжка, доступ по ftp, возможно поч-
товый ящик; все при условии если у вас было не менее 70 уникаль-
ных посетителей в день, условия: http://www.uka.ru/foruser.html ]
* http://www.kudesniki.ru/ [Hет данных]
* http://www.t-80.ru/ [Unlimited + CGI + SSI + Помощь в pаскpутке.
Платят за показы. Беpут не все подpяд, подpобности на
http://www.t-80.ru/work.htm]
* http://am.lgg.ru/ [15mb, e-mail, CGI, SSI, просят в разместить их
баннерик. Hо! Существует фэйс-контроль, то есть сначала они смот-
рят на вашу страницу и, если она соответсвует, дают место]
Q: Как установить счетчик посещений?
A: Счетчики можно разделить на две категории :
а) На халявной страничке, лишенной CGI. В этом случае на вашей стра-
нице устанавливается указатель на удаленный сервер, считающий посеще-
ния. Вам требуется зарегистрироваться на сайте, предоставляющем такую
услугу и вставить тот html-код, который он вам даст.
Для более простого понимания происходящего, рассмотрим на примере ре-
гистрацию на паре таких серверов :
1) Rambler [http://counter.rambler.ru/top100]
* Заходим на http://counter.rambler.ru/top100
* Переключаем кодировку на их сайте (чтобы вопросов не возникало)
* Кликаем "Добавить" (там на картинке нарисованы кнопки)
* Прочитайте правила и нажмите кнопку внизу (обратите внимание на
то, что они пишут про халявные сервера )
* Заполните регистрационную форму и нажмите кнопку "Зарегистрирова-
ться" (не нажимайте дважды)
* Вам покажут код, который вы должны вставить в страничку. Также его
пришлют вам на e-mail
* Вставьте этот код в страничку.
2) Ranker [http://www.ranker.ru/]
* Заходим на http://www.ranker.ru/add.asp
* Читаем правила, соглашаемся
* Заполняем регистрационную форму (Ranker FAQ находится по адресу :
http://www.ranker.ru/faq.asp - рекомендую прочитать перед заполне-
нием формы)
* Кликаем на кнопке Submit
* Вам покажут код, который вы должны вставить в страничку. Также его
пришлют вам на e-mail
* Вставьте этот код в страничку.
3) The Counter [http://www.thecounter.com/]
* У них вместо картинки надо вставить скрипт в страничку.. за то они
присылают еженедельно отчеты о каждом дне.
Также счетчики можно взять на :
SuperStats [http://www.superstats.com/]
NedStat [http://www.nedstat.nl/]
FreeStats [http://www3.freestats.com/]
Peresvet [http://www.peresvet.net/]
PagaCout [http://www.pagecount.com/]
Dux [http://counter.dux.ru/]
Dino [http://counter.bloke.com/]
SiteFlow [http://www.siteflow.com/]
ICount [http://www.icount.com/]
SiteStat [http://www.site-stats.com/]
б) На сервере с поддержкой CGI. Это возможно, если вы можете выпол-
нять CGI-скрипты на своем сайте. Счетчики можете скачать здесь :
* http://www.cgi-resources.com/
* http://www.worldwidemart.com/scripts/
* http://awsd.com/scripts/
Инструкции по настройке находится в самих архивах.
Q: Можно ли бесплатно сделать домен?
A: Домены второго уровня (domen.ru) бесплатно не предоставляются. Халява
начинается на доменах третьего уровня (<your>.domen.ru).
* Заходим на http://www.da.ru/
* Щелкаем на надписи справа - "Созать WWW-псевдоним"
(ссылка на www_create_redirect.html)
* Заполняем регистрационную форму. Если вы не хотите, что бы показы-
вался внизу странички их фрейм - уберите галочку с поля Маскировка
* Внимательно смотрите поле "срок делегирования", т.к. по истечении
этого срока ваш адрес на da.ru молча умрет.
* Жмем ok. Все.
Q: Как убрать черную полоску на da.ru ?
A: Перечитайте предыдущий ответ.
Q: Почему на chat.ru не показываются мои картинки ?
A: У них важен регистр в имени файла. Т.е. скорее всего вы прописали
<img src="file.img">, а залили FILE.IMG.
Это касается не только chat.ru, но и всех серверов, стоящих под UNIX.
Q: Как можно убить фрейм с рекламой на Webjump'e ?
A: (AL) : Я использую такой скрипт :
<script language="JavaScript">
<!--
if (self.parent.frames.length != 0) { self.parent.location="index.htm" }
// -->
</script>
Это переваривают и нетшкаф и эксплорер и опера.
Q: Как подавить подчеркивание ссылок в некоторых местах?
A: В <head></head> вставьте кусок :
<style type="text/css"><!--
a.noneline {text-decoration: none;} --></style>
В <a href..> впишите <a href="url" class="noneline">
Q: Как сделать неподчеркнутые ссылки везде?
A: Вставить в <head></head> вот такой кусок :
<style type="text/css"><!--
a:link {text-decoration: none;} a:visited {text-decoration: none;} a:active {text-decoration: none;} a:hover {text-decoration: none;} --></style>
Q: Как сделать кнопку "Back" ?
A: <a href="javascript:history.back()">Назад</a>
A: (?) Для Opera 3.5 <a href="history.back()">Назад</a>
С 'javascript:' он не понимает.
Q: Как определить, что юзер открыл страницу не в фрейме, а ее надо
смотреть в фрейме ?
A: а) Пользователю предлагают перейти на главную страницу.
<script language="JavaScript">
<!--
if (self.parent.frames.length == 0)
document.writeln("Best view in<A HREF="index.html">main frame</A>") // -->
</script>
б) Сразу грузится главный фрейм.
<script language="JavaScript">
<!--
if (self.parent.frames.length == 0)
self.parent.location="index.htm";
// -->
</script>
Q: Что такое SSI?
A: SSI (Server Side Includes) - Включения на стороне сервера. Весьма по-
лезное добавление к WWW, для расширенной работы с посетителями. С по-
мощью SSI можно не только в зависимости от некоторых условий выводить
определенные части документа, не только формировать документ из зара-
нее определенных кусочков, но и вставлять результат работы некоторого
CGI сценария или программы прямо в документ.
Q: Что такое ASP?
A: (DR) : ASP (Active Server Pages) - разработка Microsoft для обработки
HTML запросов на сервере, т.е. файл проходит сначала через серверный
интерпретатор, а затем уже шлется клиенту. Основные языки - VBScript
и JScript. ИМХО, очень удобная вещь, но работает пока только под Вин-
дой. Сильно связана с OLE ( работа с БД организована через DAO ), ре-
ально можно использовать для серверной обработки любой OLE объект,
описанный на машине.
Q: Что такое VRML?
A: (MM) : VRML (Virtual Realty Modelling Languagy) предназначен для опи-
сания трехмерных изображений и оперирует объектами, описывающими гео-
метрические фигуры и их расположение в пространстве.
VRML-файл представляет собой обычный текстовый файл, интерпретируемый
браузером. Поскольку большинство браузеров не имеет встроенных
средств поддержки vrml, для просмотра VRML-документов необходимо под-
ключить вспомогательную программу -- VRML-браузер, например, Live3D
или Cosmo Player.
Как и в случае с HTML, один и тот же VRML-документ может выглядеть
по-разному в разных VRML-браузерах. Кроме того, многие разработчики
VRML-браузеров добавляют нестандартные расширения VRML в свой браузер
Q: Какие книги по HTML посоветуете?
A: (TM) : 1)HTML 3.2 в пoдлинникe, нaибoлee пoлнoe pyкoвoдcтвo. QUE/BHV.
Oгpoмный тaкoй тoмищe.. Этo нeчтo. Haвepнoe, жтo caмoe yнивepcaльнoe,
чтo мoжeт быть. He мoгy нe пopeкoмeндoвaть, пoтoмy чтo 1) клaccнaя
книгa 2) aвтop - мoй дpyг (из Aмepики :).
Kниги oт QUE - этo знaк кaчecтвa. Ecли нa книгe cтoит знaк издaтeль-
cтвa QUE, ee мoжнo пoкyпaть нe paздyмывaя. Пpeвocxoдный дocтyпный
язык, oбилиe пoлeзнoй инфopмaции. Ocoбeннo вeликoлeпeн язык - вce
книги QUE нaпиcaны cвepx-дoxoдчивo, нo ни oднa из ниx нe cюcюкaeт c
читaтeлeм, кaк эти кoшмapныe книжки "для чaйникoв". A в пpимeчaнияx
чacтo вcтpeчaeтcя дoбpый юмop.
(BN) : "HTML 3.2 в подлиннике", авторы: М. Браун, Д. Ханикатт.
К ней прилогается компактик с различными программами (браузеры, ре-
дакторы, плагины, сервера, инструменты для работы с JAVA и еще всякие
разные программулины) Объем чуть более 1000 стр. imho, я бы эту книгу
посоветовал начинающим создавать свои странички. В ней рассказывается
о следующем: таблицы, форматирование тескта(логическое и физическое),
использование графики, изображения-карты, слои, ссылки, списки, кад-
ры, формы, CSS, plugins for MSIE & NN, DHTML, дополнительные воз-
можности MSIE и NN, звук, видео, анимация, мультимедиа, VRML, элемен-
ты управления ActiveX, программа ActiveX Control Pad, cgi-скрипты,
java, javascript, JScript (о каждом отдельно), VBScript, управление
web-сайтом, краткие обзор редакторов html, примеры: работы с БД, соз-
дание коммерческого сайта и корпоративной сети intranet, персональ-
ный web-server, интерактивный web-server, а так же в приложении рас-
сказано о перспективе html 4.0 и об WebTV;
(ER) : Робеpт Мyллен "HTML 4: спpавочник пpогpаммиста"
Энциклопедический спpавочник по языкy html 4 содеpжит полное и под-
pобное описание всех тегов, атpибyт ов и значений html, пpочем pас-
сматpиваются особенности pеализации языка для платфоpм NN4 и IE4.
Описание синтаксиса каждого тега дополняется пpимеpами исходного ко-
да. Кpоме чисто спpавочной инфоpмации, в книге пpиведены инстpyкции и
советы по использованию тегов html для pешения конкpетных задач. Рас-
сматpиваются новые возможности веpсии html 4 : теги WebTV, каскадные
таблицы стилей, слои, фpеймы и динамические шpифты. Пpиложения к кни-
ге содеpжат спpавочные таблицы, список web-yзлов и гpyпп новостей,
дpyгyю полезнyю инфоpмацию.
Q: А как сделать, чтобы посетители моей странички не могли ни код под-
смотреть, ни картинки скопировать?
A: Придумайте кодировщик и закодируйте страницу,
Заархивируйте страницу с паролем,
Скопируйте на восьмидюймовую дискету и не забудьте удалить с винта,
Дискету утопите в тихом океане,
И запомните : Никакого интернета!
Q: Как сделать, чтобы при нажатии на ссылку загружалась бы другая стра-
ничка ?
A: <A HREF="http://rhc.msk.ru">Здесь ваш текст</A>
Q: Как сделать, чтобы при нажатии на ссылку появлялся бы бланк отправ-
ления сообщения ?
A: <A HREF="mailto:email@name.ru">Здесь ваш текст</A>
Можно добавить автоматическое подставление строки Subject :
<A HREF="mailto:email@name.ru?Subject=ваш_subj">Здесь ваш текст</A>
(AE) : Может некоppектно обpабатываться некотоpыми сочетаниями бpаy-
зеpов и мэйлеpов.
Q: Как сделать, чтобы при нажатии на картинку делалось одно из выше пе-
речисленного ?
A: <A HREF="http://rhc.msk.ru"><IMG SRC="URL_вашей_картинки"></A>
(AE) : Для тэга <img> обязательны паpаметpы SRC и ALT.
Q: Как сделать, чтобы при нажатии на ссылку она открывалась в другом
окне ?
A: <A HREF="http://rhc.msk.ru" TARGET="_blank">Здесь ваш текст</A>
или
<A HREF="http://rhc.msk.ru" TARGET="_new">Здесь ваш текст</A>
Q: Как сделать, чтобы при наведении мышки на ссылку выдавался мой
текст, а не "http://www.name.ru/Firma/Name/1234/...." ?
A: <A HREF="http://rhc.msk.ru" onMouseOver="window.status='мышка на
ссылке';return true" onMouseOut="window.status='мышка за пределами
ссылки';return true">Здесь сама ссылка</A>
Q: Как сделать, чтобы при нажатии на ссылку, в одном фрейме, она откры-
валась в другом?
A: <A HREF="file.htm" TARGET="название_фрейма">
Q: Как сделать, чтобы фреймы открывались в том же окне, но поверх дру-
гих фреймов?
A: <A HREF="file.htm" TARGET="_top">
Q: Как сделать, чтобы при нажатии на ссылку, она открывалась в том же
фрейме?
A: <A HREF="file.htm" TARGET="_self">
Q: Как сделать, чтобы при нажатии на ссылку менялось содержимое двух
фреймов?
A: Есть два способа :
а) <A HREF="file.htm" onclick="top.frames[2].location='newframe2';"
onclick="top.frames[3].location='newframe3';">text</A>
Где цифра в frames[x] - номер изменяемых фреймов.
б) <A HREF="newframes" TARGET="_top">text</A>
Где newframes содержит тот же фреймсет, но с измененными фреймами.
Q: Как сделать, чтобы нельзя было изменять размер фрейма/растягивать ?
A: Добавить в описание фрейма noresize:
<frame name="test" frameborder="yes" scrolling="auto" noresize>
(AE) : frameborder может иметь значения 1 или 0. Из сообpажений сов-
местимости pекомендyю писать <frame frameborder="no" frameborder=0>.
Q: Как мне сделать, чтобы после открытия моей странички, через опреде-
ленный промежуток времени загружалась другая страничка, или просто
грузить не index.html, а скажем main.html ?
A: Можно использовать JavaScript, но это извращение, поэтому используем
<META>:
<META HTTP-EQUIV="Refresh" Content="5; URL=http://rhc.msk.ru/">
Через 5 секунд начнется загрузка указанного URL.
Если не хотите ждать, пишите Content="0; URL=...">
Q: Слышал, что для того, чтобы поисковики находили мою страничку, надо
где-то в страничке прописать ключевые слова. Что это?
A: Есть такое. Надо использовать <META NAME="Keywords" CONTENT="words">,
где <words> - слова, на которые ваша страничка ориентирована.
<META NAME="KeyWords" CONTENT="Titanik,Dion,Leo">
На ключевое слово Titanik, поисковик выдаст ссылку на вашу страничку.
Также можно дать краткое описание вашей странички.
<META NAME="Descripton" CONTENT="My Home Page">
Q: Как разместить картинку в центре экрана ?
A: Можно сделать в таблице :
<table width="100%" height="100%">
<tr>
<td align="center" valign="middle">
<img src="image.gif">
</td
</td
</table>
(AE) : Паpаметpа height в тэге <table> не содеpжится.
Q: В чем отличия <b> и <strong>, <i> и <em> ?
A: <b> и <i> - тэги физического выделения, то есть вы принудительно зас-
тавляете выделять текст полужирным или наклонным шрифтом.
<strong> и <em> - тэги логического выделения, каждый браузер может по
своему выделить текст внутри этих тэгов.
Q: Как сделать, чтобы междy каpтинками (одна под дpyгой) не было пpобе-
ла, т.е. чтобы были pядом, без пpомежyтков ?
A: Таблицей :
<table border="0" cellpadding="0" cellspacing="0">
<tr><td><img src="..." ...></td></tr>
<tr>.....</tr>
</table>
(AP) : Кстати, можно это сделать не только таблицей.
Если написать
<img src=".."><br>
<img src="...">
то картинки будут с промежутком.
Если же написать эти теги в одну строку
<img src="..."><br><img src="...">
то промежутка между картинками не будет. То же самое относится и к
картинкам, располагающимся одна за другой.
Q: Как отформатировать текст по ширине ?
A: С помощью тэга <p> :
<p align="justify">
Ваш текст
</p>
Q: Как сделать абзацный отступ?
A: (AE): Используем CSS:
P { margin-top: 0; text-indent: 5% }
Q: Обязательно ли использовать кавычки, в значениях атpибyтов :
<body bgcolor="red"> или <body bgcolor=red> Как пpавильно?
A: (SM) : Hе поленился слазить в описание SGML :) где yказано, что ка-
вычки можно опyскать, если значение атpибyта :
а) Содеpжит только бyквы ( естественно, английские ), цифpы, точки и
тиpе
б) Начинается с бyквы
Таким обpазом:
<body bgcolor=red>
<body bgcolor="#FF0000">
<a href=reference.html>
<a href="http://rhc.msk.ru">
A: (AL) : ... Перестать писать кавычки в тэгах. Они никому не нужны. От-
крою страшную тайну - они НЕ БЫЛИ никому нужны уже тогда, когда вы
еще не слышали слово "Интернет". Даже Netscape первой версии уже пле-
вать хотел на кавычки. Единственное, где они могут пригодиться - в
поле "ALT".
Q: Как убрать синюю рамку вокруг картинки-ссылки?
A: <img border="0" ...>
Q: Как результат заполнения формы сбросить в файл?
A: Можно использовать скрипт на Perl или на чем-то еще. В любом случае,
без CGI не обойтись. Коллекция скритпов лежит на http://www.cpan.org/
Q: Как делают, что когда ходишь по сайту, меняешь странички, а сам URL
не изменяется?
A: (AP) : При загруженном фреймсете в строке URL'а показывается его ад-
рес, а не адреса загружаемых страниц. Соответственно если страница
без фреймов, а надо ту же фичу - делается нулевой фрейм ( то бишь де-
лаешь фреймсет на два фрейма, один на весь экран, а другой где-нибудь
с боку нулевого размера). Другх способов не знаю, хотя это не означа-
ет, что их нет ;-)
Q: Как делать комментарии в HTML ?
A: Комментарии в HTML имеют следующий синтаксис :
<!-- комментарий -->
<!-- это тоже,
только занимает больше одной линии -->
Не допускается пробел между "<!" и "--", но разрешен между "--" и ">"
Типичная ошибка - использование цепи дефисов ("---") в пределах ком- ментария. Нужно избегать помещения двух или более смежных дефисов
внутри комментария.
Q: Как создать черезстрочную графику?
A: Для создания черезстрочной графики вам понадобится графический редак-
тор, например PhotoShop 4.0. Если вы хотите, чтобы ваши GIF'ы загру-
жались постепенно, т.е. сначало появлялось раплывчатое изображение,
потом четче и тд., (кажется, что картинки загружаются быстрее), то
проделайте следующее:
* Откроем файл File -> Open
* Сохраним его в формате GIF89a: File Export -> GIF89a Export...
(Hе забудьте проверить, стоит ли галочка на Interlace)
* Кликаем Ok и сохраняем файл
(AE) : Можно и пpосто сохpанять в фоpмате GIF.
Этот документ регулярно пополняется автором в результате отслеживания
происходящего в RU.HTML.CHAINIK. Вы можете поучаствовать в составле-
нии документа, прислав сформулированный вариант вопроса, ответ или
дополнение или исправление к ответу.
Прежде всего, конечно же, книги. Следует сразу предупредить, что спе-
цифика современного российского книгоиздания т акова, что существует
довольно большое количество книг, не стоящих своих денег. Вероятно,
вам следует положиться на собственное чутье и тщательно изучить пред-
лагаемую продукцию. В любом случае, список проверенных и рекомендо-
ванных книг приводится в этом документе.
Учтите также, что кроме книг по HTML вас могут интересовать также из-
дания, посвященные программированию на Perl/C и JavaScript/VBScript.
HTML, в сущности, является обычным языком разметки страниц, и доволь-
но большое количество вопросов, которые у вас возникнут, будут не
столь уж сильно ориентированы именно на него. Примером может служит
Гостевая книга.
Само собой, хотелось бы увидеть у активного участника конференции оп-
ределенные знания языка HTML. Вопросы, типа "как сделать фоном кар-
тинку", крайне не приветсвуются.
Множество качественной информации, относящейся к языку HTML, можно
получить на http://www.w3c.org/ . Hа http://www.citforum.ru/ находится
описание языка HTML на русском языке.
Вы можете также подписаться на дружественные эхи, такие как:
RU.INTERNET.*
Bсе про интернет. Учтите, что вопросы, не относящиеся к HTML,
в RU.HTML.CHAINIK - оффтопик.
RU.CGI.PERL, RU.PERL
Пpогpаммиpование на Perl.
RU.JAVA.*
Программирование на Java.
Q: Что такое HTML?
A: Для установления соединения с удаленным сервером используется сетевой
адрес компьютера, который называется универсальным указателем ресурса
- URL (Uniform Resource Locator). В ответ сервер посылает документы.
Обычно при указании URL сайта (rhc.msk.ru, etc), или при явном указа-
нии адреса странички (http://rhc.msk.ru/index.html) - в формате HTML.
HTML - HyperText Markup Language - язык разметки гипертекста. Доку-
менты на языке HTML, также называемые web-документами, позволяют
пользователю, указав на выделенное слово или фразу, получить доступ к
файлу или перейти на другой HTML-документ,который связан с указанным
участком текста гиперссылкой. Такие гипертекстовые связи между файла-
ми и документами, расположенными на серверах по всему миру, позволяют
системе работать так, как будто она представляет собой огромную пау-
тину информации.
Q: Какие редакторы HTML бывают?
A: Cущеcтвует два типа pедакторов :
а) Тaк нaзывaeмыe WYSIWYG ( "What You See Is What You Get" - "что ви-
дишь, то и получишь"). Они подойдут тем, кто не хочет вникать в html
и которым не придется в будущем писать на html.
Вот несколько редакторов такого типа :
FrontPage [http://www.microsoft.com/frontpage]
FrontPad [Add-On в поставке IE 4]
Netscape Composer [Встроен в Netscape Communicator и Netcape Gold]
Hot Metal [http://softquad.com/products/hotmetal/]
Word 97 [В поставке Office 97]
HomePage Publisher for OS/2
[http://ourworld.compuserve.com/homepages/clerin/]
Macromedia DreamWeaver
[http://www.macromedia.com/software/dreamweaver/]
Но не рекомендую ими пользоваться если в серьезно занялись HTML-ди-
зайном, лучше купите книгу по HTML, и пользуйтесь следущим типом ре-
дакторов.
б) Редакторы, paбoтaющиe нaпpямyю c кодом. В комментариях думаю не
нуждаются.
Notepad [%SystemRoot%\notepad.exe]
Edit.com [%SystemRoot%\system32\edit.com]
vi [/usr/bin/vi]
HTML Pad [http://www.book.ru/snk/]
Hot Dog [URL]
HTMLed32 [http://www.ist.ca/]
HomeSite [http://www.allaire.com/]
Bred [http://yurok.da.ru/]
Q: А какой редактор лучший?
A: Мне симпатичен HomeSite. Но некоторым нравятся более простые, такие
как htmled.
Q: Что такое CSS?
A: CSS (Cascading Style Sheets) - набор правил оформления и форматирова-
ния, который может быть применен к различным элементам страницы. В
стандартном HTML для присвоения какому-либо элементу определенных
свойств (таких, как цвет, размер, положение на странице и т. п.) при-
ходилось каждый раз описывать эти свойства, даже если на одной стра-
ничке должны располагаться 10 или 110 таких элементов, ничуть не от-
личающихся один от другого. Вы должны были десять или сто десять раз
вставить один и тот же кусок HTML-кода в страничку, увеличивая размер
файла и время загрузки на компьютер просматривающего ее пользователя.
CSS действует другим, более удобным и экономичным способом. Для прис-
воения какому-либо элементу определенных характеристик вы должны один
раз описать этот элемент и определить это описание как стиль, а в
дальнейшем просто указывать, что элемент, который вы хотите оформить
соответствующим образом, должен принять свойства стиля, описанного
вами.
Более того, вы можете сохранить описание стиля не в тексте вашей
странички, а в отдельном файле - это позволит использовать описание
стиля на любом количестве Web-страниц. Расположение описания стилей в
отдельном файле имеет смысл в случае, если вы планируете применять
эти стили к большему, чем одна, количеству страниц.
Формат :
<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">
(AE) : Тэг <link> поддеpживается малым количеством бpаyзеpов, и по
этой пpичине не pекомендyется W3C для yпотpебления, хотя и входит в
спецификацию HTML 4 <link> pасполагается в тэге <head>.
Втоpой ваpиант, пpи котоpом описание стилей pасполагается в коде Web-
стpанички, внyтpи тега <HEAD>. В этом слyчае вы можете использовать
эти стили для элементов, pасполагающихся в пpеделах стpанички. Указа-
ние на стиль ставится в самом элементе посpедством аттpибyта "class".
Фоpмат :
<STYLE type="text/css"> ... </STYLE>
Паpаметp type="text/css" является обязательным и слyжит для yказания
бpоyзеpy использовать CSS.
И третий вариант, когда описание стиля располагается непосредственно
внутри тега элемента, который вы описываете. Этот метод нежелателен,
и понятно почему: он приводит к потере одного из основных преимуществ
CSS - возможности отделения информации от описания оформления инфор-
мации. Впрочем, если необходимо описать лишь один элемент, этот вари-
ант расположения описания стилей также вполне применим.
Формат :
<%ELEMENT% class="<style>" ...>
В настоящее время язык CSS насчитывает довольно большое количество
свойств элементов HTML, которыми он может управлять. Но из-за того,
что этот стандарт еще очень молод, в полном объеме его пока не под-
держивают наиболее популярные броузеры (NN и MSIE). Последние версии
этих броузеров могут работать с довольно большим количеством команд
CSS, а вот 3-и версии или совсем не поддерживают его (NN3), или под-
держивают, но лишь частично (MSIE 3). Более того, поскольку разработ-
чики из этих компаний никак не могут договориться между собой, пос-
ледние версии броузеров поддерживают неодинаковый набор свойств CSS.
Все это делает малоприемлемым использование CSS в полном объеме, так
как, при использовании CSS для форматирования элементов страницы и
просмотре ее с помощью броузера версии ниже 4-й, есть большая вероят-
ность увидеть нечто такое, что вам не понравится. Самую полную и
свежую информацию вы можете найти на сайте http://www.w3c.org/style/
Таблицы совместимости элементов CSS с различными версиями броузеров
находятся по адресу http://style.webreview.com/
Q: Что такое CGI?
A: CGI (Common Gateway Interface - стандартный шлюзовый интерфейс).
Протокол CGI определяет спецификации, по которым осуществляется взаи-
модействие сценариев и Web-серверов. Браузеры непосредственно не вза-
имодействуют с CGI; обмен данными со сценариями может выполняться
только серверами. В свою очередь, браузеры и Web-серверы взаимодей-
ствуют между собой, использую протокол HTTP (Hyper Text Transfer Pro-
tocol -протокол передачи гипертекста). Можно считать, что в нормаль-
ных условиях после запуска программы-браузера и ее подключения к Web-
серверу последовательно происходит шесть событий:
1. Hа стороне пользователя браузер декодирует заданный URL и подклю-
чается к серверу.
2. Браузер требует от сервера предоставить необходимый документ.
3. Сервер преобразует переданную ему часть URL в имя файла и путь к
нему.
4. Сервер отсылает найденный файл документа на компьютер пользовате-
ля.
5. Сервер разрывает установленное соединение.
6. Браузер на компьютере пользователя отражает полученный документ.
CGI-сценарий является обыкновенной программой, причем большинство та-
ких программ очень просты и написаны либо на языке C, либо на Perl.
Пример :
int main(int argc, char *argv[])
{ printf("Content-Type: text/html\n\n"); printf("<HTML>\n"); printf("<HEAD><TITLE>Hello World</TITLE></HEAD>\n"); printf("<BODY>\n"); printf("<H1>Hello, World!</H1>\n"); printf("</BODY></HTML>\n"); return (0);
}
Данный сценарий на самом деле выполняет немного больше, чем требует-
ся от простейшего приложения. Он включает в выходной поток дескрипто-
ры <HEAD>, <TITLE> и <BODY>, а также с помощью дескриптора <H1> фор-
матирует свое сообщение как заголовок первого уровня. Однако этот
сценарий совершенно бесполезен, поскольку он не обрабатывае входящие
данные, которые могут поступить от формы или от сервера, и всегда вы-
водит одно и то же сообщение. Тем не менее он ясно демонстрирует,
насколько простой может быть CGI-сценарий. Т.к. мы говорим все-таки о
создании HTML страниц, не будем углубляться в C и Perl, об этом чи-
тайте в других местах. Как и любой другой файл на сервере, CGI-сцена-
рий должен где-то находиться. Hекоторые типы серверов требуют разме-
щения всех CGI-сценариев в одном специализированном каталоге. Серверы
других типов допускают хранение сценариев в любом желаемом каталоге
Самым распространенным именем каталога для CGI-файлов является имя
cgi-bin. Другим именем, особенно для серверов на базе Windows NT яв-
ляется имя Scripts. Более подробно о CGI-скриптах можно узнать в кон-
ференции RU.CGI.PERL.
Q: Как вставить музыку в html файл?
A: Вставьте данный скрипт в вашу страничку:
<script language="JavaScript">
<!--
function BGSound() { var Cmd = " "
var Brwsr = window.navigator.appName
if (Brwsr == "Microsoft Internet Explorer") { Cmd = "<BGSOUND SRC=" + "music.mid" + '>' } else { Cmd = "<EMBED SRC='music.mid' HIDDEN=TRUE>" }
return Cmd
}
document.write(BGSound())
// -->
</script>
Q: Как сделать так, чтобы при наведении мышки на текст с ссылкой он по-
менял цвет? (только в IE4)
A: Используем <style>
<style type="text/css"><!--
a:hover { color: #xxxxxx} --></style>
где xxxxxx - код цвета в RRGGBB, например #FF3366. Подробная таблица
о цветах: http://rhc.msk.ru/colours.html
Q: Как изменить абзацный отстyп ?
A: <p style="text-indent: 15pt">... Абзац ...</p>
Q: Как определить разрешение у посетителя, и в зависимости от разреше-
ния посылать на разные страницы ?
A: Вот пример странички :
<html>
<head>
<script language="JavaScript">
<!--
var height=0;
var width=0;
if (self.screen) { // for NN4 and IE4 width = screen.width
height = screen.height
} else if (self.java) { // for NN3 with enabled Java var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
// -->
</script>
</head>
<body>
<script language="JavaScript">
<!--
if (width == 800 && height == 600) { location.href = "800x600.htm" }
else if (width == 640 && height == 480) { location.href = "640x480.htm" }
else { location.href = "unknown.htm" } // -->
</script>
</body>
</html>
Q: Как сделать автоматическую надпись "Последнее обновление" ?
A: Вставьте в страничку следующий текст :
Последнее обновление:
<script language="JavaScript">
<!--
document.writeln(document.lastModified)
// -->
</script>
Q: Как сделать, чтобы при наведении мышки на картинку-ссылку, картинка
изменилась ?
A: В <head></head> вставьте следующий скрипт :
<script language="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>
В <body> допишите :
<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"></a>
<a href="2.htm" onMouseOver="ChangeImg('image2','over2.gif')"; onMouseOut="ChangeImg('image2','out2.gif')"> <img src="out2.gif" name="image2"></a>
<a href="N.htm" onMouseOver="ChangeImg('imageN','overN.gif')"; onMouseOut="ChangeImg('image3','outN.gif')"> <img src="outN.gif" name="imageN"></a>
В <img> "name" нужно для того, чтобы JS знал, какой картинке соответ-
ствует каждая ссылка.
Q: Почему NN некорректно ведет себя с русской буквой "я" в скриптах?
A: Перед "я" ставьте "\", т.е. получается "\я".
var msg = "классификаци\я"
Q: Как вставить музыку в html файл?
A: Вставьте данный скрипт в вашу страничку:
<script language="JavaScript">
<!--
function BGSound() { var Cmd = " "
var Brwsr = window.navigator.appName
if (Brwsr == "Microsoft Internet Explorer") { Cmd = "<BGSOUND SRC=" + "music.mid" + '>' } else { Cmd = "<EMBED SRC='music.mid' HIDDEN=TRUE>" }
return Cmd
}
document.write(BGSound())
// -->
</script>
Q: Как сделать так, чтобы при наведении мышки на текст с ссылкой он по-
менял цвет? (только в IE4)
A: Используем <style>
<style type="text/css"><!--
a:hover { color: #xxxxxx} --></style>
где xxxxxx - код цвета в RRGGBB, например #FF3366. Подробная таблица
о цветах: http://rhc.msk.ru/colours.html
Q: Как изменить абзацный отстyп ?
A: <p style="text-indent: 15pt">... Абзац ...</p>
Q: Как определить разрешение у посетителя, и в зависимости от разреше-
ния посылать на разные страницы ?
A: Вот пример странички :
<html>
<head>
<script language="JavaScript">
<!--
var height=0;
var width=0;
if (self.screen) { // for NN4 and IE4 width = screen.width
height = screen.height
} else if (self.java) { // for NN3 with enabled Java var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
// -->
</script>
</head>
<body>
<script language="JavaScript">
<!--
if (width == 800 && height == 600) { location.href = "800x600.htm" }
else if (width == 640 && height == 480) { location.href = "640x480.htm" }
else { location.href = "unknown.htm" } // -->
</script>
</body>
</html>
Q: Как сделать автоматическую надпись "Последнее обновление" ?
A: Вставьте в страничку следующий текст :
Последнее обновление:
<script language="JavaScript">
<!--
document.writeln(document.lastModified)
// -->
</script>
Q: Как сделать, чтобы при наведении мышки на картинку-ссылку, картинка
изменилась ?
A: В <head></head> вставьте следующий скрипт :
<script language="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>
В <body> допишите :
<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"></a>
<a href="2.htm" onMouseOver="ChangeImg('image2','over2.gif')"; onMouseOut="ChangeImg('image2','out2.gif')"> <img src="out2.gif" name="image2"></a>
<a href="N.htm" onMouseOver="ChangeImg('imageN','overN.gif')"; onMouseOut="ChangeImg('image3','outN.gif')"> <img src="outN.gif" name="imageN"></a>
В <img> "name" нужно для того, чтобы JS знал, какой картинке соответ-
ствует каждая ссылка.
Q: Почему NN некорректно ведет себя с русской буквой "я" в скриптах?
A: Перед "я" ставьте "\", т.е. получается "\я".
var msg = "классификаци\я"
> Общие рекомендации :
* Когда сделали страничку, то перед тем как выкладывать ее на всеоб-
щее обозрение, протестируйте у себя, нормально ли она будет смот-
реться в различных браузерах (NN3-4,IE3-4,Opera,etc) и разрешениях
(640x480,800x600,1240x480), если, конечно не хотите отпугивать лю-
дей...
* После этого проверьте ее валидатором: http://validator.w3.org/
http://www.websitegarage.com/
http://valsvc.webtechs.com/
> Hе рекомендуется :
* Проставлять <META CHARSET>, если не знаете тонкостей работы серве-
ров. Будут глюки с кодировкой.
* Делать <font face=...> если писаться будет по-русски. Так как если
у посетителя окажется неруссифицированный такой шрифт, то он не
сможет ничего прочитать.
(PG): Для того, чтобы пользователи видели 'рубленые' шрифты в тек-
сте автора, совсем HЕ обязательно пользоваться _устаревшим_ и
'вредным' методом "FONT FACE=" - можно (и нужно) использовать
_современный_ метод CSS, где указывается _стиль_ шрифта, а не
ТУПОЕ использование _конкретного имени_ шрифта, как в случае с
"FONT FACE=".
Как уже несколько лет указывают *профессионалы* , использование
"FONT FACE=" считается *плохим* стилем HTML, особенно для языков,
_не_ входящих в группу Западно-Европейских.
Это _много_ раз обсуждалось в уже ставших 'классическими' статьях
на эту тему (на английском):
"Почему нельзя использовать элемент FONT":
[http://www.mcsr.olemiss.edu/~mudws/font.html]
"Использование FONT FACE - опасно":
[http://babel.alis.com:8080/web_ml/html/fontface.en.html]
Подробнее о случаях, когда русский на странице с 'FONT FACE=" HЕ
прочтется, см. в моей небольшой подборке "Страницы, которые HЕ чи-
таются. Автора!":
[http://ourworld.compuserve.com/homepages/Paul_Gorodyansky/ff.htm]
* Делать такие фреймы, что при их показе появляется горизонтальная
линейка прокрутки. Неудобно.
> Авторы ответов :
AE : Andrew Evdokimov 2:5020/767.3
AL : Andrew Luzhin 2:5020/368.31
AP : Alex Pankratov 2:5020/1491.21
ER : Eugene Radyuk 2:5077/24
ES : Eugeny Sharp 2:5078/4.21
PG : Paul Gorodyansky
TK : Tim Kelly 2:465/240
TM : Tanya Matveeva 2:5030/57.208
> Ссылки на ресурсы :
* http://www.machaon.ru/
* http://www.citforum.ru/ - огромная электронная библиотека.
* http://www.mega.ru/~nikitad
* http://www.w3.org/ - отсюда можно взять последнюю официальную спе-
цификацию HTML и CSS.
* http://developer.netscape.com/ - здесь очень много разных описаний
(например, JavaScript).
* http://www.js.ru/
* http://www.javascripts.ru/
* http://webims.virtualave.net/ - для чайников
* http://adx.cjb.net/ - многое для создателей страничек
* http://hot.virtual-pc.com/htmlib/files/hlbsetup.exe - Описание
HTML на английском языке, с pазличиями междy IE, Mosaic и NN с
yчётом веpсий ( начиная с незапамятных, когда ничего кpоме Mosaic
ещё не было).
* http://fosi.da.ru/ ... ;)
Q: Как вставить музыку в html файл?
A: Вставьте данный скрипт в вашу страничку:
<script language="JavaScript">
<!--
function BGSound() { var Cmd = " "
var Brwsr = window.navigator.appName
if (Brwsr == "Microsoft Internet Explorer") { Cmd = "<BGSOUND SRC=" + "music.mid" + '>' } else { Cmd = "<EMBED SRC='music.mid' HIDDEN=TRUE>" }
return Cmd
}
document.write(BGSound())
// -->
</script>
Q: Как сделать так, чтобы при наведении мышки на текст с ссылкой он по-
менял цвет? (только в IE4)
A: Используем <style>
<style type="text/css"><!--
a:hover { color: #xxxxxx} --></style>
где xxxxxx - код цвета в RRGGBB, например #FF3366. Подробная таблица
о цветах: http://rhc.msk.ru/colours.html
Q: Как изменить абзацный отстyп ?
A: <p style="text-indent: 15pt">... Абзац ...</p>
Q: Как определить разрешение у посетителя, и в зависимости от разреше-
ния посылать на разные страницы ?
A: Вот пример странички :
<html>
<head>
<script language="JavaScript">
<!--
var height=0;
var width=0;
if (self.screen) { // for NN4 and IE4 width = screen.width
height = screen.height
} else if (self.java) { // for NN3 with enabled Java var jkit = java.awt.Toolkit.getDefaultToolkit();
var scrsize = jkit.getScreenSize();
width = scrsize.width;
height = scrsize.height;
}
// -->
</script>
</head>
<body>
<script language="JavaScript">
<!--
if (width == 800 && height == 600) { location.href = "800x600.htm" }
else if (width == 640 && height == 480) { location.href = "640x480.htm" }
else { location.href = "unknown.htm" } // -->
</script>
</body>
</html>
Q: Как сделать автоматическую надпись "Последнее обновление" ?
A: Вставьте в страничку следующий текст :
Последнее обновление:
<script language="JavaScript">
<!--
document.writeln(document.lastModified)
// -->
</script>
Q: Как сделать, чтобы при наведении мышки на картинку-ссылку, картинка
изменилась ?
A: В <head></head> вставьте следующий скрипт :
<script language="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>
В <body> допишите :
<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"></a>
<a href="2.htm" onMouseOver="ChangeImg('image2','over2.gif')"; onMouseOut="ChangeImg('image2','out2.gif')"> <img src="out2.gif" name="image2"></a>
<a href="N.htm" onMouseOver="ChangeImg('imageN','overN.gif')"; onMouseOut="ChangeImg('image3','outN.gif')"> <img src="outN.gif" name="imageN"></a>
В <img> "name" нужно для того, чтобы JS знал, какой картинке соответ-
ствует каждая ссылка.
Q: Почему NN некорректно ведет себя с русской буквой "я" в скриптах?
A: Перед "я" ставьте "\", т.е. получается "\я".
var msg = "классификаци\я"
