Читателям Самоучителя HTML

Замечания по тексту книги

Объекты и формы

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

<TABLE border=2 bgcolor="gold" cellpadding=3>
<FORM action="mailto:Имя@сервер.домен" method="post">
<TR>
<TD><LABEL for="imya1">Имя: </label></td>
<TD><INPUT type="text" name="imya1"></td></tr>
<TR>
<TD><LABEL for="familiya1">Фамилия: </label></td>
<TD><INPUT type="text" name="familiya1"></td></tr>
<TR>
<TD><LABEL for="telefon1">Телефон: </label></td>
<TD><INPUT type="text" name="telefon1"></td></tr>
<TR>
<TD>Пол:   
<INPUT type="radio" name="pol1" value="Male"> М 
<INPUT type="radio" name="pol1" value="Female"> Ж</td>
<TD valign="middle">
<INPUT align="bottom" type="submit" value="Отослать">
<INPUT type="reset"></td></tr>
</form>
</table>

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

  Но главная проблема заключается в том, что отсылка форм по электронной почте вообще работает плохо. Это ненадежно в смысле передачи данных и неудобно для пользователя, которому приходится работать еще и со своей почтовой программой. В идеале все должно быть так: нажал пользователь кнопочку "Отослать", и данные из формы улетели по адресу. Иногда еще добавляют скрипт, который выводит сообщение в маленьком окне: спасибо, мол, форма отправлена (заказ принят и т.п.) Но для отправки данных необходима специальная программа. Надо проконсультироваться с провайдером, предоставляет ли он подобные программы, и если предоставляет, как написать вызов этой программы (сама программа работает на сервере). Тогда этот вызов (длинную и малопонятную строку) надо указать в качестве значения атрибута action.
  Напомню, что «форма» — это общее название. Обычно при помощи элементов форм делают анкеты (регистрации), бланки заказа, голосования, области для отправки текстовых данных, меню, элементы навигации и управления страницей, и т.д.

  Все примеры кнопок в книге не связаны с какими-либо скриптами. То есть кнопка нажимается, но никаких действий при этом не выполняется. Чтобы кнопка заработала по-настоящему, для нее надо предусмотреть скрипт. Для кнопок надо использовать событие onClick (пишется именно так, с заглавной буквой C внутри), которое запускает скрипт. Кнопка на основе элемента INPUT (например, для перехода на сайт с прогнозом погоды и красивыми фото) делается так:

<INPUT type="button" value="Прогноз погоды" onClick="top.location.href='http://www.wunderground.com'">

  Вот как выглядит такая кнопка:

  Тут, обратите внимание, используются РАЗНЫЕ типы кавычек, чтобы не было путаницы с параметрами.
  Если надо сделать кнопку с рисунком вместо надписи, используйте такой шаблон:

<input type="image" scr="ФАЙЛ_РИСУНКА" onClick="СКРИПТ">

  В элементе BUTTON атрибут onClick можно (и нужно) использовать точно так же.
  Не путайте эти кнопки с другими, которые делаются в виде рисунка, и для программирования которых используются элементы A и IMG.

Каскадные таблицы стилей (CSS)

  В последнее время стало модным программировать изменение вида гиперссылки-надписи после наведения указателя мыши (на гиперссылку). Это делается с помощью стандартного класса hover. Есть несколько вариантов его использования. Если надо оформить гиперссылки для всей страницы, можно задать стили так:

<STYLE>
A:link {color: blue; text-decoration: none }
A:hover {color: red; text-decoration: underline }
A:active {color: gold; text-decoration: underline }
A:visited {color: green; text-decoration: none }
</STYLE>

  В этом примере для порядка приведены все стандартные классы. Link - обычная гиперссылка, и здесь она синего цвета и без подчеркивания. Hover - гиперссылка после наведения указалеля. Цвет меняется на красный и появляется подчеркивание. Active - гиперссылка в момент перехода или последняя выбранная гиперссылка. Здесь она золотистого цвета и тоже с подчеркиванием. Visited - пройденная пользователем гиперссылка. В данном примере ее текст имеет зеленый цвет, а подчеркивание отсутствует, потому что не пройденная гиперссылка сделана тоже без подчеркивания. При желании, можно использовать и другие стили.
  Если надо переопределить только некоторые ссылки страницы, требуется создать класс с оригинальным именем, например:

<STYLE>
A:hover.giper01 {color: red; text-decoration: none}
</STYLE>

<A href="файл.html" class="giper01"... > Текст-ссылки </A>

  Создание нестандартного указателя мыши. Его изображение должно храниться в файле типа cur. Затем надо создать стиль, который будет ссылаться на этот файл. Например, создадим стиль cur1 для элемента A (гиперссылки) должен выглядеть так:

A.cur1 { cursor : url(moi_ukazatel.cur);}

  А в гиперссылке необходимо использовать атрибут class для указания стиля:

<a href="moya_stranitsa.htm" class="cur1">Текст ссылки</a>
 

  С помощью стилей можно изменить цвет полосы прокрутки в броузере. Для этого надо создать стили для BODY. Можно задавать до семи различных цветов, например:

BODY {
 SCROLLBAR-FACE-COLOR:  yellow;
 SCROLLBAR-3DLIGHT-COLOR: lime;
 SCROLLBAR-HIGHLIGHT-COLOR: green;
 SCROLLBAR-SHADOW-COLOR: red;
 SCROLLBAR-DARKSHADOW-COLOR: maroon;
 SCROLLBAR-ARROW-COLOR: black;
 SCROLLBAR-TRACK-COLOR: aqua;
}

  Для того чтобы было понятно, что к чему относится, смотрите рисунок.

В данном примере использованы стили: yellow — желтый (поверхность кнопок и бегунка) lime — светло-зеленый (левый и верхний край кнопки) green — зеленый (левый и верхний край кнопки внутри) red — красный (правый и нижний край кнопки внутри) maroon — каштановый (правый и нижний край кнопки) black — черный (стрелки) aqua — голубой (основание полосы прокрутки)

Фреймы

  Вопрос: «А правда, что если сайт сделан с фреймами, то он не регистрируется поисковыми машинами?»   Нет, неправда. Поисковые сервера индексируют все страницы. Но, пользователь, который выполняет поиск, найдет и увидит в поисковике одну страницу, а не весь frameset. В такой ситуации бывает трудно понять, к чему эта страничка относится и, главное, с какого она сайта. Поэтому если вы используете фреймы, делайте на всех страницах ссылку на ваш сайт.
  Кроме того, учитывайте, что поисковики очень любят представлять страницы по тексту, взятому из элемента TITLE. А если сайт имеет frameset, то броузер отображает информацию TITLE только одной страницы (главной). Значит ли это, что для остальных страниц TITLE можно не задавать? Нет, для правильного отображения страниц в поисковых машинах, этот элемент очень даже нужен.

  Иногда разработчик сайта использует фреймы, но хочет, чтобы границы (рамки) между фреймами не были видны. Этого можно добиться, указав ТРИ атрибута в элементе FRAMESET:
<FRAMESET border=0 frameborder=0 framespacing=0 ... >
Только учитывайте, что полосы прокрутки могут «повиснуть в воздухе». Что с ними делать? Продумайте. Но запрещать прокрутку (<FRAME scrolling=no ... >) опасно. Когда вебмастера начали проектировать страницы под разрешение монитора 800×600, у многих появилась эта ошибка: страницы было невозможно ни увидеть целиком, ни прокрутить в режиме 640×480. Конечно, эти ляпы вскоре исправили, а вы не повторяйте старую ошибку.

  Изменение цвета рамок фреймов. Я могу предложить вам готовый шаблон, так как здесь нельзя ограничиться каким-то одним параметром. Для примера заданы три фрейма (популярная конфигурация), в которых используются страницы page1.htm, page2.htm, page3.htm. Цвета рамки были выбраны из расчета, что на страницах будет задан фоновый цвет bgcolor="#D4B696". Вот листинг основной страницы:

<HTML><HEAD><TITLE>Заголовок страницы</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1251">
<STYLE type=text/css>
FRAME {
 BORDER-RIGHT: #CF9850 1px groove;
 BORDER-TOP: #CF9850 1px groove;
 BORDER-LEFT: #CF9850 1px groove;
 BORDER-BOTTOM: #CF9850 1px groove }
</STYLE>
</HEAD><FRAMESET border=0 frameSpacing=0 rows=95,* frameBorder=NO cols=*>
<FRAME border=0 name=frame1 marginWidth=5 frameSpacing=0 marginHeight=5
 src="page1.htm" frameBorder=NO noResize scrolling=NO>
<FRAMESET border=0 frameSpacing=0 rows=* 
frameBorder=NO cols=160,*>
<FRAME border=0 name=frame2 marginWidth=5 
frameSpacing=0 marginHeight=5 src="page2.htm" frameBorder=NO noResize scrolling=AUTO>
<FRAME border=0 name=frame3 frameSpacing=0 src="page3.htm" frameBorder=NO scrolling=AUTO>
</FRAMESET>
</FRAMESET>
</HTML>

  Теперь остановимся на самых важных моментах. Цвета деталей рамки задаются с помощью четырех параметров CSS. BORDER-RIGHT — справа, BORDER-TOP — сверху, BORDER-LEFT — слева, BORDER-BOTTOM — снизу. Значения цветов, само собой, вы выбираете сами. 1 px — толщина рамки в пикселах. Можно сделать и «ширше». GROOVE — параметр формы рамки. Я рекомендую использовать именно его, с другими получается что-то не то...
  Но этого мало. Если вы не укажете для элементов FRAME атрибуты frameSpacing=0, то между фреймами останутся белые полосы. Обратите внимание, что еще использованы атрибуты border=0 и frameBorder=NO. Не удивляйтесь — так надо.
  Для дизайна важно также не забывать об атрибутах marginHeight и marginWidth. К цвету рамки они не имеют отношения, но позволяют точно задать расстояние от рамки фрейма до данных на странице (сверху и сбоку соответственно). Очень полезно, если ощущается нехватка места, так как по умолчанию для этих атрибутов задаются отнюдь не маленькие величины.

JavaScript

  Отладка скриптов. Если возникает ошибка сценария, самое простое — удалять по очереди скрипты и смотреть что будет.
  Очень распространенная ошибка. Все скрипты написаны правильно, но скрипт не работает. Причина может простая: во время загрузки Web-страницы скрипт (расположенный в секции HEAD) уже начал выполняться, а страница еще не сформирована броузером. И, следовательно, некоторые объекты HTML, с которыми должен взаимодействовать скрипт, пока отсутствуют. Естественно, что в этом случае он работать не будет. Если скрипт должен выполняться автоматически, сразу, то его НАДО связывать с событием onLoad в теге BODY (по шаблону onLoad="функция_запускающая_скрипт()"). В этом случае сценарий запустится только после того, как вся страница будет загружена.

  Чтобы при открытии страницы автоматически открывалось еще одно окно (с ненавистной всем рекламой, HELP-ом или c чем-нибудь еще), в теге BODY надо вставить небольшой скрипт:

<BODY onLoad="window.open('http://адрес_другой_страницы','имя_окна',
 'height=175,width=300,scrollbars=auto')">

Здесь: имя_окна - любое имя латинскими буквами, которое вы придумаете сами,
175, 300 - высота и ширина окна, укажите свои значения.
Не перепутайте кавычки!
Кстати, больше всего мне нравится идея, когда в таком окне показывается меню для навигации по сайту (и, следовательно, для других страниц остается больше места). Заманчиво? Попробуйте внедрить!

  Предложите посетителям добавить адрес вашего сайта в папку Избранное. Для этого надо разместить такую гиперссылку (она может быть и с текстом, и с картинкой):

<a href="javascript:window.external.AddFavorite(location.href, document.title);">
Добавить в Избранное</a>

  Обратите внимание, что этот код годится для любой страницы, здесь не надо ничего исправлять.
  Английский вариант этой команды — Add to Favorites.

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

<SCRIPT language=Javascript>
<!--
// Массив дней недели
var dayNames = new Array(
"Воскресенье","Понедельник","Вторник","Среда",
"Четверг","Пятница","Суббота");
// Массив названий месяцев
var monthNames = new Array(
"января","февраля","марта","апреля","мая","июня","июля","августа","сентября",
"октября","ноября","декабря");
var now = new Date();
document.write(dayNames[now.getDay()] + ", " + now.getDate() + " " + 
monthNames[now.getMonth()] + " , " + now.getYear());
// -->
</SCRIPT>

  Функции JavaScript выводят названия дней недели и месяцев по-английски, поэтому требуются массивы с русскими названиями. Зато такой сценарий легко перетолмачивается на любой язык. Если вам потребуется этот код, найдите в тексте этой страницы комментарий «текущая дата», аккуратно выделите и скопируйте в буфер обмена весь элемент SCRIPT. Команда document.write определяет формат выводимой даты, и, при необходимости, эту команду можно написать по-другому. Вот результат работы скрипта:

Всякая всячина

  Создание тонкой рамки таблицы. Иногда возникает необходимость создать рамку таблицы в виде тонких линий, часто толщиной в один пиксел. Казалось бы, здесь нет проблемы, но на самом деле не все так просто. Задать параметры рамки можно с помощью стилей (CSS). В простейшем варианте можно ограничиться атрибутом style. Например, так:

<table cellspacing=0 cellpadding=3 width=55% style="border: 1px solid olive">
<tr>
<td>Ячейка 1</td><td>Ячейка 2</td></tr>
<tr>
<td>Ячейка 3</td><td>Ячейка 4</td></tr>
</table>

  Что же мы видим? Появилась только внешняя рамка. Для каких-то случаев это и годится, но таблица не получилась. Это произошло из-за того, что рамки вокруг таблицы и вокруг ячеек создаются (и задаются) отдельно. Тогда, может, задать стиль и для ячеек? Попробуем.

<table cellspacing=0 cellpadding=3 width=55% style="border: 1px solid green">
<tr>
<td style="border: 1px solid gold">Ячейка 1</td><td style="border: 1px solid gold">Ячейка 2</td></tr>
<tr>
<td style="border: 1px solid gold">Ячейка 3</td><td style="border: 1px solid gold">Ячейка 4</td></tr>
</table>

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

<table cellspacing=0 cellpadding=3 width=55% >
<tr>
<td style="border: 1px solid red">Ячейка 1</td><td style="border: 1px solid red">Ячейка 2</td></tr>
<tr>
<td style="border: 1px solid red">Ячейка 3</td><td style="border: 1px solid red">Ячейка 4</td></tr>
</table>

  Что ж, иногда может потребоваться и такая рамка.
  А вот чтобы сделать рамку толщиной именно в один пиксел, потребуются две таблицы. Вот пример.

<TABLE cellspacing=0 cellpadding=0 width=55% border=0>
<TR><TD bgcolor="blue">
<table cellspacing=1 cellpadding=3 width=100% border=0>
<tr>
<td bgcolor="white">Ячейка 1</td><td bgcolor="white">Ячейка 2</td></tr>
<tr>
<td bgcolor="white">Ячейка 3</td><td bgcolor="white">Ячейка 4</td></tr>
</table></TD></TR>
</TABLE>

  Для внешней таблицы необходимо задать border=0 и цвет фона единственной ячейки, который будет определять цвет рамки (bgcolor="blue"). Для внутренней таблицы необходимо задать width=100% и border=0, а для всех ее ячеек – цвет фона (bgcolor="white"). Толщину рамки будет определять атрибут cellspacing, и вот тут уже можно задать толщину в один пиксел. Вот на какие уловки приходится идти из-за того, что кто-то когда-то схалтурил при разработке HTML!

Вот более поздний и лучший вариант:

<table border="1" style="border-collapse: collapse" bordercolor="blue">

  Если в качестве гиперссылки используется рисунок (элемент IMG находится внутри элемента A) и всплывающая подсказка, заданная в теге IMG атрибутом alt, не появляется в нужный момент, ее можно задать с помощью атрибута title тега A.

  Можно сделать так, чтобы фон страницы не прокручивался вместе с содержимым страницы. Для этого в тег BODY добавляется соответствующий атрибут:

<BODY bgproperties="fixed" > 

  Netscape Communicator не воспроизводит некоторые элементы форматирования в таблицах. Например, он игнорирует элемент FONT (цвет букв и т.п.), если этот элемент находится внутри элемента TD. Поэтому при использовании таблиц надежнее задавать формат текста при помощи стилей (для элемента TD и аналогичных).

  Если Вы используете MS Word для создания Web-страниц, рекомендую по окончании работы открывать эти страницы в HTML-редакторе Macromedia Dreamweaver и применять команду Убрать WordHTML. Редактор удалит лишние теги, которые не являются необходимыми (а часто только мешают просмотру), и код страницы станет компактнее (его объем может уменьшиться в несколько раз!).

  Использование файлов различных типов для загрузки и просмотра.
  Если в гиперссылке стоит ссылка на файл определенного типа, то броузер будет реагировать на эту ссылку соответствующим образом.
  На загрузку влияет тип файла, поэтому то, что вы хотите дать загрузить, должно иметь подходящий тип. Самое лучшее - выкладывать архивы типа ZIP, потому что любой броузер активизирует для них процесс загрузки, а любой пользователь сумеет их распаковать. Такие типы документов, как TXT (текстовые документы), PDF (документы в формате Acrobat Reader), DOC (документы Word) или XLS (документы Excel), Internet Explorer отображает сразу в открытом виде (он это умеет), а что будут делать другие броузеры, надо проверять. Крупные рисунки в формате TIF, BMP и т.п. я выкладывать не рекомендую, т.к. они очень долго загружаются. Используйте формат JPG или GIF и старайтесь укладывать один рисунок в 25-50 Кбайт, а если надо предложить для скачивания большие файлы BMP, TIF или PDF - пакуйте их в ZIP. Делаете обычную гиперссылку, только в ссылке указываете файл с расширением zip (href="file.zip").

Ликбез

  Из читательской почты: «Я купила вашу книжку "Cамоучитель HTML". Но там разные коды и т.п. Я не поняла, так как изучать HTML? Мне надо сделать красивый нешаблонный сайт, а я не умею, и вот купила вашу книжку».
  HTML действительно довольно скучный язык, но его приходится изучать, поскольку он составляет основу Web-страниц. Конечно, Web-страницу можно сделать и в какой-нибудь программе-редакторе, даже в Word, но дело все в том, что перед тем, как выгружать ее в Интернет, надо просмотреть такую страницу в режиме HTML-кода, чтобы проверить, все ли там правильно. Для этого и нужно знание HTML. Кроме того, существуют всякие мелкие проблемы, такие как указание кодировки, в которой сделана страница, ключевых слов, вставка счетчика или баннера, «перекрашивания» рамок таблиц и фреймов и т.д. И опять без знания HTML не обойтись. Вы можете попробовать поработать с несколькими HTML-редакторами для начала и выбрать тот, который Вам больше понравится. Самый простой из них - MS FrontPage. Есть еще хороший: Macromedia Dreamweaver. Он интересен тем, что в нем есть режим, когда окно делится на две части. В одной вы создаете страницу как в обычном текстовом редакторе, а в другой сразу появляется HTML-код этой страницы. Так что сразу можно понять, какой элемент HTML за что отвечает.
  Если Вы хотите создать красивый сайт, то может, лучше сначала сосредоточиться на его дизайне и рисунках, а структуру страниц выбирать попроще. В любом случае внимательно читайте книгу - все, что там написано, основано на практическом опыте.
  Для начала я бы порекомендовал освоить FrontPage Express (он входит в комплект броузера Internet Explorer, но по умолчанию не устанавливается) и поставить перед собой простую задачу: задать на странице фон, сделать заголовок, разместить и отформатировать текст, вставить рисунок и пару-тройку гиперссылок.
  В плане создания графики рекомендую ознакомиться с такими программами как Button Studio, Xara 3D, Xara Web Style, Ulead Cool 3D, Ulead GIF Animator, Adobe Photoshop. Например, в Photoshop очень важна команда Сохранить для Web, которая позволяет создавать компактные рисунки в формате JPG и GIF.