Russia.gif (6147 bytes)Очередной хамский ресурс
Домой ] Вверх ] [ Вебдизайн ] HTML теги ] Клипарт ]

КАК СОЗДАТЬ КРАСИВУЮ WEB-СТРАНИЦУ
FAQ конференции RU.HTML.CHAINIK

 

>>>> ОБЩАЯ ЧАСТЬ <<<<

Версия 1.6 от 16.01.2000.
Ведущий Andrey Fomenko 2:5020/461
Публикации по четвергам в конференции RU.HTML.CHAINIK

>>>> ВОПРОСЫ <<<<

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

1.1. Что такое HTML?
1.2. Где взять документацию по HTML?
1.3. Какие редакторы HTML бывают?
1.4. А какой редактор лучше?
1.5. Что такое валидатор?
1.6. Что такое CSS?
1.7. Что такое CGI?
1.8. Что такое SSI?
1.9. Что такое ASP?
1.10. Что такое VRML?
1.11. Какие книги по HTML посоветуете?
1.12. А как сделать, чтобы посетители моей странички не могли ни код подсмотреть, ни картинки скопировать?
1.13. Люди, протестируйте мою страничку на правильность!

Вопросы от незнания HTML
все эти ответы можно узнать, прочитав стандарты HTML и CSS

2.1. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения?
2.2. Чтобы при нажатии на ссылку она открывалась в другом окне?
2.3. Чтобы при наведении мышки на ссылку выдавался мой текст, а не "http://www.name.ru/..."?
2.4. Чтобы при нажатии на ссылку менялось содержимое двух кадров?
2.5. Чтобы нельзя было изменять размер кадра?
2.6. Чтобы не было видно границ кадров?
2.7. Чтобы после открытия моей странички через промежуток времени загружалась другая страничка, или грузился не index.html, а main.html?
2.8. Чтобы разместить картинку в центре экрана ?
2.9. Чтобы междy каpтинками не было пpомежyтков?
2.10. Чтобы был абзацный отступ?
2.11. Чтобы убрать синюю рамку вокруг картинки-ссылки?
2.12. Чтобы форматировать текст по ширине?
2.13. Чтобы результат заполнения формы сбросить в файл?
2.14. Чтобы при смене страниц сам URL не изменялся?
2.15. Чтобы при нажатии на определенную область картинки происходил переход на один адрес, а при нажатии в другой области - на другой?
2.16. Обязательно ли использовать кавычки в значениях атpибyтов?
2.17. Как вставлять комментарии в HTML?
2.18. Говорят, для поисковиков надо прописать ключевые слова. Что это?
2.19. В чем отличия <b> и <strong>, <i> и <em>?
2.20. Как сделать таблицу с большим количеством произвольно объединенных по вертикали и горизонтали ячеек?
2.21. Чтобы после заполнения фоpм(ы) pезyльтат посылался на e-mail?

Вопросы от незнания графики

3.1. Как создать чересстрочную графику?
3.2. Как создать прозрачную графику?
3.3. Как создать анимацию?
3.4. Можно ли оптимизировать графику (уменьшить размер)?
3.5. Посоветуйте программу или plug-in к Photoshop для создания анимации.

Вопросы от незнания способов размещения

4.1. У меня есть хорошая и серьезная страничка, но я не хочу выкладывать ее на всяких халявных серверах. Есть ли сервера, которые дают место?
4.2. Как установить счетчик посещений?
4.3. Хочу поставить свой счетчик, независимый. Где скрипт брать?
4.4. Можно ли бесплатно сделать домен?
4.5. Как убрать черную полоску на da.ru?
4.6. Почему на chat.ru не показываются мои картинки?
4.7. Как можно убить кадр с рекламой на Webjump'e?

Вопросы, связанные с конкретной программой

5.1. Как заставить HomeSite не заменять русские буквы на непонятные символы?
5.2. Можно ли в HomeSite редактировать файлы в KOI-8 и DOS-866?
5.3. Как можно сделать в NN4 одинаковые столбцы в таблице?
5.4. Почему NN не показывает каpтинку, вставленную фоном в ячейку таблицы?
5.5. Как сделать неподвижный фон?
5.6. Как сделать информацию о пользователе ICQ, чтобы около номера был показатель присутствия в сети?

Вопросы от незнания CSS или JavaScript

6.1. Что такое JavaScript и JScript?
6.2. Как подавить подчеркивание ссылок в некоторых местах?
6.3. Как сделать неподчеркнутые ссылки везде?
6.4. Как сделать кнопку "Back"?
6.5. Как определить, что юзер открыл страницу не в кадре, и перевести его в кадр?
6.6. Как на JS при событии в одном из кадров поменять заголовок всего фреймсета? Хотелось бы, чтобы при смене страниц в заголовке окна броузера кроме названия сайта отображалось еще и наименование текущего раздела.
6.7. Как вставить музыку в html файл?
6.8. Как сделать так, чтобы при наведении мышки на текст с ссылкой он поменял цвет?
6.9. Как изменить абзацный отстyп ?
6.10. Как определить разрешение у посетителя, и в зависимости от разрешения посылать на разные страницы?
6.11. Как вставить дату последнего обновления?
6.12. Как сделать, чтобы при наведении мышки на картинку-ссылку, картинка изменилась?
6.13. Есть ли в JS функция, которая бы брала текст скрипта из внешнего файла?
6.14. Почему NN некорректно ведет себя с русской буквой "я" в скриптах?

>>>> ПРИМЕЧАНИЯ <<<<

Пользы:

http://www.citforum.ru - огромная библиотека
http://www.w3.org - стандарты HTML и CSS
http://www.machaon.ru
http://www.mega.ru/~nikitad
http://developer.netscape.com - стандарты
http://www.js.ru
http://www.javascripts.ru
http://adx.cjb.net - JavaScript и HTML в примерах.

Пополнители:

Andrew Evdokimov 2:5020/767.3
Andrew Luzhin 2:5020/368.31
Alex Pankratov 2:5020/1491.21
Dmitry Murashkin 2:5031/36.9
Eugene Radyuk 2:5077/24
Eugeny Sharp 2:5078/4.21
Tim Kelly 2:465/240
Tanya Matveeva 2:5030/57.208
Vasily I. Golovatyuk mir@naverex.kiev.ua
Inka Manko Amaru Yupanki manko@zhurnal.ru
Alexey Ilyin 2:5035/42

Собиратели:

Misha Yuryev 2:5027/16.9 rhc#mail.ru http://rhc.msk.ru
Alex Savin 2:5033/13.44 alxi@iname.com http://www.online.psc.ru
Andrey Fomenko 2:5020/461 http://mpl.on.ru

>>>> ОТВЕТЫ <<<<

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

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

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

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

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

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

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

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

Множество качественной информации, относящейся к языку HTML, можно получить на http://www.w3c.org. Hа http://www.citforum.ru есть перевод стандарта.

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

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

     FrontPage           http://www.microsoft.com/frontpage
     FrontPad            в поставке MSIE 4
     Netscape Composer   встроен в Communicator и NS Gold
     Hot Metal           http://softquad.com/products/hotmetal/
     HomePage Publisher  http://ourworld.compuserve.com/homepages/clerin/
     DreamWeaver         http://www.macromedia.com/software/dreamweaver/


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

     Notepad   %SystemRoot%\notepad.exe
         HTML Pad  http://www.book.ru/snk/
     Hot Dog   http://www.sausage.com/hotdog
     HTML-Kit  http://www.chami.com/html-kit/
     HTMLed32  http://www.ist.ca
     HomeSite  http://www.allaire.com
     Bred      http://yurok.da.ru


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

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

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

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

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

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

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

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

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

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

<LINK REL=STYLESHEET TYPE="text/css" HREF="URL">

Тэг <LINK> поддеpживается малым количеством бpаyзеpов и по этой пpичине не pекомендyется W3C для yпотpебления, хотя и входит в спецификацию HTML 4.

Втоpой ваpиант, пpи котоpом описание стилей pасполагается в коде стpаницы внyтpи тега <HEAD>. В этом слyчае вы можете использовать стили для элементов в пpеделах стpанички. Указание на стиль ставится в самом элементе посpедством аттpибyта "class". Синтаксис:

<STYLE type="text/css"> ... </STYLE>

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

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

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

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

Самую полную и свежую информацию вы можете найти на сайте http://www.w3c.org/style/. Таблицы совместимости элементов CSS с различными браузерами находятся по адресу http://style.webreview.com.

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

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

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

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

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

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

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

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

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

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

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

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

1.11. Какие книги по HTML посоветуете?

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

HTML 3.2 в пoдлинникe.
М. Браун, Д. Ханикатт.
QUE/BHV.

Пpeвocxoдный дocтyпный язык, oбилиe пoлeзнoй инфopмaции. Книга написана cвepxдoxoдчивo, нo нe cюcюкaeт c читaтeлeм. В пpимeчaнияx чacтo вcтpeчaeтcя дoбpый юмop. Прилагается CD с различными программами.

Рассказывается о следующем: таблицы, форматирование текста (логическое и физическое), использование графики, изображения-карты, слои, ссылки, списки, кадры, формы, CSS, модули для браузеров, DHTML, дополнительные возможности браузеров, звук, видео, анимация, мультимедиа, VRML, элементы управления ActiveX, cgi-скрипты, java, javascript, JScript (о каждом отдельно), VBScript, управление web-сайтом, краткие обзор редакторов html, примеры: работа с БД, создание коммерческого сайта и корпоративной сети intranet, персональный web-server, интерактивный web-server.

HTML 4: спpавочник пpогpаммиста
Робеpт Мyллен

Энциклопедический спpавочник по языкy HTML 4 содеpжит описание тегов и атpибyтов, pассматpиваются особенности искажения языка разными браузерами. Описание синтаксиса тегов дополняется пpимеpами. Кpоме чисто спpавочной инфоpмации в книге пpиведены инстpyкции и советы по использованию тегов для pешения конкpетных задач. Рассматpиваются теги WebTV, CSS, слои, кадры.

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

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

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

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

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

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

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

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

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

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

Вопросы от незнания HTML
все эти ответы можно узнать, прочитав стандарты HTML и CSS

> 2.1. Чтобы при нажатии на ссылку появлялся бланк отправления сообщения?

<A HREF="mailto:email@name.ru">ссылка</A>. При этом можно добавить автоматическое подставление темы <A HREF="mailto:email@name.ru?Subject=тема"> вот так</A>. Этот вариант некоppектно обpабатывается некотоpыми бpаyзеpами и мэйлеpами.

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

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

     "_blank"  чистое окно
     "_new"    новое окно
     "_top"    верхнее окно, то есть полный экран, а не кадры
     "_self"   то окно или кадр, где находится ссылка
     "_окно"   имя целевого окна или целевого кадра


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

<A HREF="http://rhc.msk.ru"
   onMouseOver="window.status='мышка на ссылке'; return true;"
   onMouseOut="window.status='мышка не на ссылке'; return true;">
ссылка</A>.


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

Первый способ: номера во frames[x] должны соответствовать тем кадрам, в которых нужно изменить содержимое.

<A HREF="file.htm"
  onСlick="top.frames[2].location='newframe2';
           top.frames[3].location='newframe3';">
ссылка</A>


Второй способ. Загружается новый фреймсет с уже измененными кадрами, то есть <A HREF="newframes.html" TARGET="_top">ссылка</A>.

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

Тег кадра имеет замечательный атрибут NORESIZE:

<FRAME NAME="test" NORESIZE>

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

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

Для <FRAME>:

   FRAMEBORDER=1|0           MSIE - рамка кадра
   FRAMEBORDER="yes"|"no"    NN   - рамка кадра


Для <FRAMESET>:

   FRAMEBORDER=1|0           MSIE - рамка кадра
   FRAMESPACING=0            MSIE - толщина рамки кадра
   FRAMEBORDER="yes"|"no"    NN   - рамка кадра
   BORDER=0                  NN   - толщина рамки кадра


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

Один из вариантов <META>. Интересно отметить, что в подопытном Lynx'е наблюдаются неровности, если адрес перехода задан относительным адресом.

<META HTTP-EQUIV="Refresh" Content="5; URL=http://rhc.msk.ru/">

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

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

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

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

   <TABLE WIDTH="100%" HEIGHT="100%">
   <TR>
     <TD ALIGN="center" VALIGN="middle">
       слова якобы в середине якобы экрана
     </TD>
   </TR>
   </TABLE>


2.9. Чтобы междy каpтинками не было пpомежyтков?

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

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

   <TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
   <TR>
     <TD><IMG SRC=...></TD>
     <TD><IMG SRC=...></TD>
   </TR>
   </TABLE>


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

<IMG SRC=...><IMG SRC=...><IMG SRC=...><BR><IMG SRC=...><IMG SRC=...>

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

Для этого есть CSS. Третьими браузерами не поддерживается.

P { margin-top: 0; text-indent: 5% }

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

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

   <IMG BORDER=0 ...>


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

В HTML 4 появилось еще одно значение для атрибута ALIGN абзаца. Третьими браузерами не поддерживается.

   <P ALIGN="justify">
   Ваш текст
   </P>


2.13. Чтобы результат заполнения формы сбросить в файл?

Использовать исполняющиеся на сервере сценарии (скрипты).

2.14. Чтобы при смене страниц сам URL не изменялся?

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

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

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

   <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


2.16. Обязательно ли использовать кавычки в значениях атpибyтов?

Кавычки можно опyскать, если значение атpибyта:

  • содеpжит только английские бyквы, цифpы, точки и тиpе
  • начинается с бyквы

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

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

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


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

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

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

Слова - <META NAME="Keywords" CONTENT="слово слово слово ...">

Описание - <META NAME="Descripton" CONTENT="описание документа">

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

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

<B> и <I> - тэги физического выделения, то есть вы принудительно заставляете выделять текст каким-то видом шрифта. <STRONG> и <EM> - тэги логического выделения. Каждый браузер может по-своему выделить текст внутри этих тэгов, так, как удобно его пользователю. <EM> означает выделение, а <STRONG> означает усиленное выделение.

Резюме: если вам нужно выделить текст, пользуйтесь <EM>. Если вам нужно не выделить текст, а сделать его курсивом, пользуйтесь <I>.

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

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

2.21. Чтобы после заполнения фоpм(ы) pезyльтат посылался на e-mail?

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

Вопросы от незнания графики

3.1. Как создать чересстрочную графику?

Для создания чересстрочной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется "File Export", "GIF89a Export". Должен быть отмечен пункт "Interlace".

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

Для создания прозрачной графики вам понадобится графический редактор, поддерживающий запись в файл формата GIF89a. Для PhotoShop это называется "File Export", "GIF89a Export", затем пипеткой выделяете тот цвет, который должен стать прозрачным.

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

Рассказывают, что yдобнее создать альфа-канал, в котоpом и наpисовать пpозpачность. Та часть изобpажения, котоpая находится под чеpными областями альфа-канала, бyдет пpозpачной. Сохpанять обычным способом.

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

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

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:
    • Hажмите на панельке кнопку Open (Ctrl+O) и загрузите первый кадр.
    • Используя кнопку Insert (Ctrl+I), вставьте остальные кадры и разместите их в нужном порядке, перетаскивая мышью, используя Clipboard или клавиши со стрелками на панели (они дублируются клавиатурными стрелками).
    • Для повторяющейся анимации включите опцию Animation / Looping. При этом можно задать количество повторов или включить опцию Repeat Forever для бесконечного повтора.
    • Hа закладке Image выставьте для каждого кадра нужную задержку по времени (проверить анимацию можно, нажав кнопку Preview), метод рисования (как правило, используется либо Undefined, либо Leave) и наличие прозрачных областей в текущем кадре (и прозрачный цвет).
    • Сохраните.
  • Ulead Gif Animator
    • Запустите File / Animation Wizard
    • Щелкните на Add Image. Выберите нужные файлы (выбирать можно сразу несколько файлов - если у вас они будут стоять не в том порядке, в котором нужно, вы потом сможете поменять их местами).
    • Щелкаем "Далее". Появится выбор типа вашего изображения:
      Text-Oriented (Don't Dither) - состоят из текста
      Photo-Oriented (Dither) - содержат картинки
    • Нажимаем "Далее". Можете выбрать глобальное время задержки или сделать это потом отдельно для каждого кадра.
    • Нажимаем "Далее". ажимаем "Готово". Стрелками [вверх] и [вниз] можете менять позицию кадра в анимации. В поле Delay можно установить свою задержку для каждого кадра
    • Жмем F12. Сохраните.

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

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

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

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

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

Лучшее средство работы с форматами и масштабирования - Image Alchemy.
Самый функциональный редактор полноцветной графики - Adobe PhotoShop.
Лучшая работа с масками - Aldus PhotoStyler.

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

Animagic GIF Animator      http://www.rtlsoft.com/animagic    проще
Ulead GIF Animator         http://www.ulead.com               сложнее


Вопросы от незнания способов размещения

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

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

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

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

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

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

Hа халявной страничке, лишенной 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
    • прочесть правила, согласиться
    • прочесть 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]


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

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

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

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

Домены второго уровня (domen.ru) бесплатно не предоставляются. Халява начинается на доменах третьего уровня (<имя>.domen.ru).

  • заходим на http://www.da.ru
  • щелкаем на надписи "создать WWW-псевдоним"
  • внимательно ищем условия о сроке делегирования
  • заполняем регистрационную форму. Если вы не хотите, что бы показывался внизу странички их фрейм, уберите галочку с поля "маскировка"

4.5. Как убрать черную полоску на da.ru?

А что, предыдущий ответ вы не читали?

4.6. Почему на chat.ru не показываются мои картинки?

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

Само собой, это не касается серверов, стоящих не под операционными системами, а под windows.

4.7. Как можно убить кадр с рекламой на Webjump'e ?

   <SCRIPT LANGUAGE="JavaScript">
   <!--
     if (self.parent.frames.length != 0)
       { self.parent.location="index.htm" }
   // -->
   </SCRIPT>


Вопросы, связанные с конкретной программой

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

Options
  Settings
   Tag Help
    Automatically convert special characters = off

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

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

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

<TABLE COLS=5>

5.4. Почему NN не показывает каpтинку, вставленную фоном в ячейку таблицы?

<TD BACKGROUND> не описан в стандаpтах и является pасшиpением MSIE и NN. То же самое можно сказать и о <TABLE BACKGROUND>.

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

<IMG quot;http://online.mirabilis.com/scripts/online.dll?icq=UIN&img=N">

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

Вопросы от незнания CSS или JavaScript

6.1. Что такое JavaScript и JScript?

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

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

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

Как дьявол - обезьяна Бога, так и JScript - обезьяна JavaScript'а.

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

<HEAD>
  <STYLE type="text/css">
    a.noneline {text-decoration: none;}
  </STYLE>
</HEAD>


После чего применяем этот стиль: <A HREF="ссылка" CLASS="noneline">

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

<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>
</HEAD>


6.4. Как сделать кнопку "Back"?

<A HREF="javascript:history.back()">Hазад</A>

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

В тексте страницы указать ссылку:

<SCRIPT LANGUAGE="javascript">
  if (self.parent.frames.length == 0)
    document.writeln("Проше пана перейти на <A HREF=index.html>фреймсет</A>")
</SCRIPT>


Или бесцеремонно загрузить фреймсет:

<SCRIPT LANGUAGE="javascript">
  if (self.parent.frames.length == 0)
    self.parent.location="index.htm";
</SCRIPT>


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

<HEAD>
  <SCRIPT LANGUAGE="javascript">
     function newTitle()
       { top.document.title="HОВЫЙ ЗАГОЛОВОК"; }
  </SCRIPT>
</HEAD>

<BODY ONLOAD="newTitle();">


6.7. Как вставить музыку в html файл?

<SCRIPT LANGUAGE="javascript">
  var Brwsr = window.navigator.appName
  if (Brwsr == "Microsoft Internet Explorer")
       { Cmd = "<BGSOUND SRC=music.mid>" }
  else { Cmd = "<EMBED SRC=music.mid HIDDEN=true>" }
  document.write( Cmd )
</SCRIPT>


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

<HEAD>
  <STYLE type="text/css">
    a:hover   { color: #xxxxxx }
  </STYLE>
</HEAD>


6.9. Как изменить абзацный отстyп ?

<P STYLE="text-indent: 15pt">... Абзац ...</P>

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

Как понятно из нижеприведенного сценария, это полумеры. Если вы понимаете, что такое HTML, то вы понимаете, что у вашего пользователя нет никакого экрана и нет никакого разрешения.

<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;
    }

  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>


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

<SCRIPT quot;JavaScript">document.writeln(document.lastModified)</SCRIPT>

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

<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>
</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">
</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('imageN','outN.gif')">
<IMG SRC="outN.gif" NAME="imageN">
</A>


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

6.13. Есть ли в JS функция, которая бы брала текст скрипта из внешнего файла?

<SCRIPT LANGUAGE="JavaScript" SRC="путь_к_скрипту"></script>

6.14. Почему NN некорректно ведет себя с русской буквой "я" в скриптах?

Служебный символ. Вместо "я" следует писать "\я".

  

Сайт создан в системе uCoz