Когда я только хотел создать свою страничку и даже не знал, что такое html, я у всех спрашивал: «Как (где) вы делаете сайт? Я все не могу понять, с помощью какой программы делают сайты». Большинство ответов было: «В блокноте». Мне не очень в это верилось, но в конце концов я убедился, что это действительно так.

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

Выглядит этот процесс так. Я открываю почти пустую страничку в Internet Explorer, нажимаю «Файл / Править в текстовом редакторе „Блокнот“» (клавиатурное сокращение Alt+ф+и) и далее ищу место в коде, которое хочу изменить (для этого почти всегда используется встроенный поиск — сокращение Alt+и+enter=ввод текста). После этого — закрываю блокнот (сохраняя изменения) и перезагружаю браузер кнопкой F5. Такой вот порядок действий. При этом действия эти выполняются очень часто в процессе работы над дизайном и доведены до автоматизма.

Может, кто-то делает по другому, но я привык так.

Однако блокнот не идеальная програма, она имеет много недостатков. Опишем их ниже.

Блокнот

Во-первых, в блокноте нельзя редактировать слишком большой объем текста (кажется, не больше 64 Кб). При попытке это сделать вы видите сообщение об ошибке.

Можно, конечно, открыть документ в WordPad, но скорость работы с документом существенно снизится, а это раздражает.

Во-вторых, внешний вид текста в блокноте по умолчанию слишком мелкий. Чтобы он стал комфортно читаемым, нужно сделать маленькую настройку.

Во-первых, должна стоять галочка «Перенос по словам». Без этого строки могут не умещаться на экране и редактирование документа будет осложнено.

Во-вторых, надо увеличить размер шрифта, установленного по умолчанию. Заходите в «Правка / Шрифт» и там меняете размер шрифта на больший. У меня поставлен размер 18.

Третий недостаток блокнота — нет поиска и замены (есть только поиск). Если вам нужно, скажем, убрать из текста все тэги <font> с атрибутами, любезно вставленные какой-нибудь программой, вам остается только перегнать текст в ворд97/2000 и там поработать над текстом, а потом опять вставить в блокнот. При этом, если текст большой, вам это сделать не удастся (в этом случае можно сохранить файл ворд как «текстовой документ» и с раcширением .html [заодно и орфографию проверите] — но это путь для извращенцев).

Какие же есть альтернативы блокнота, лишенные всех этих недостатков?

Альтернативы. Адитор

Станислав Жарков (e-notes.ru) — например, рекомендует всем Aditor как удобный текстовой редактор. Но я бы с ним не согласился.

Aditor — довольно тяжелая программа, больше 700 Кб. Ее внешний вид можно настроить, но вообще она выглядит так:

У этой программки так много недостатков, что лучше я их в списке напишу:

• большая программа — работает гораздо медленнее блокнота (на моем Celerone266)
• господа, она ГЛЮЧИТ! Вы когда-нибудь замечали, чтобы блокнот глючил?
• по умолчанию там надо повозиться, чтоб она заработала с русским шрифтом
• когда открываешь два документа этим редактором, программа не открывает еще одно окно, а вставляет его в существующее окно (видно на рисунке)
• и еще — программа-то платная. Можно конечно скачать крэк, но тогда вы нарушаете авторские права ;-)
• теперь Aditor будет у вас на компьютере вместо блокнота. Неудобно
• может, я что-то упустил?

И все-таки можно отметить и достоинства этой программы:

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

RPad

Выглядит этот редактор вот так:

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

RPad32 - бесплатная программа для Windows, призванная заменить Блокнот (Notepad), устранив его основные недостатки: неудобный интерфейс и ограничение на размер файла в 64 Кб под Windows 95.

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

При этом RPad32 остается легким, как Блокнот: быстро запускается и не требует много памяти.

RPad32 работает с простыми текстовыми файлами и не поддерживает сложное форматирование текста: выделение жирным шрифтом или курсивом, подчеркивание, и т. д. В этом смысле он остается полным аналогом Блокнота.

От себя добавлю, что в Rpad удобно менять размер шрифта (как и почти везде кроме блокнота), есть поиск и замена… — в общем, то что надо. Когда скачаете программу, экранчик будет голубоватым (сами увидите) — я сразу поставил «Настройки / Настройки цвета / Использовать системные настройки…» , и все стало как в блокноте. Разница лишь в том, что в rpad ссылки подчеркиваются синим цветом. И еще — поиск там осуществляется стандартным сокращением Ctrl+F, что не совсем привычно после блокнота.

Сайт разработчика, где можно скачать программу: http://rpad.cjb.net (или здесь).

Bred

Разумеется, это не все возможные варианты. Некоторые, например, пользуются редактором Bred (кстати, интересное название). Он опять же похож на блокнот, но лишен его недостатков. К особенностям этой программы можно отнести то, что она очень мала — 70 Кб. Скачать программу можно здесь: www.astonshell.com/rus.

Алексей, Alexey-lao.narod.ru
27.11.2001, опубликовано 09.01.2002

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

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

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

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

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

Расскажу на своём примере.
Когда я сумел уложить в сети данные, воспользовавшись Мастерской и Шаблонами, счастью и гордости за содеянное не было предела. По прошествии некоторого времени стали появляться разные «хотелки», ну а возможностей их реализации в Шаблонах уже не было. Сама собой назрела необходимость разобраться, из чего делают сайты и на чём. Чтобы узнать «из чего» — наберите в поиске yandex «учебник по html» и учитесь там, где больше нравится, а вот «на чём»…

Как оказалось, немаловажный момент — работа с русскими шрифтами. Согласитесь, приятно видеть на экране знакомые буквы, а не набор немыслимых кракозябров, которые, например, мне выдала Adobe PageMill, при попытке получить русский текст. Хотя это уникальная программа, в которой можно управлять сайтом, не написав ни единой строчки в html-кодах. Но это не для нас.
Это была моя первая попытка подобрать редактор.

Второй момент — финансовый. Любят наши люди халяву и ничего с этим не сделать. Сам такой же.

И начались поиски. Каким образом меня вынесло на сайт, где была обнаружена программа Arachnophilia, не рассказать и не вспомнить. Спасибо тем людям, сам не знаю кому, кто дал на нее ссылку.

Ну вот и добрались до сути. Когда была прочитана статья HTML «ручками» и сообщения Народа на тему, меня удивило, что не было ни одного упоминания программы Arachnophilia. Название чудное, но она делает своё дело, и, стоит заметить, делает неплохо, являясь по условиям распространения CareWare. Не встречали такого? Я до сего продукта тоже не встречал. Условия очень оригинальные и если вы будете пробовать эту программу, не поленитесь перевести их с английского хотя бы электронным переводчиком. Получите удовольствие.

Arachnophilia

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

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

Чтобы понимать друг друга, определимся в понятиях. Не глубоко, а слегка.
Дескриптор (или тег) — элемент разметки, имеющий такой вид: <имя>
Пара дескрипторов, открывающий и закрывающий - контейнер.
Атрибут — устанавливается внутри дескриптора для задания дополнительных параметров.

Текст элементарного документа, который создает Arachnophilia нажатием одной кнопки New HTML Page имеет такой вид (русские фразы добавлены).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">
<HTML>
<HEAD>
<TITLE>Мой сайт</TITLE>
<META NAME="GENERATOR" CONTENT="Arachnophilia 3.9">
<META NAME="FORMATTER" CONTENT="Arachnophilia 3.9">
</HEAD>
<BODY BACKGROUND="" BGCOLOR="#ffffff" TEXT="#000000" LINK="#0000ff" VLINK="#800080" ALINK="#ff0000">
Одна строка текста
</BODY>
</HTML>

Можно это всё и ручками набрать, без сомнения. Но зачем? А ведь мы уже имеем элементарную html-страницу. Стоит нажать кнопку Preview на панели и мы увидим её, пустую и белую, с одинокой надписью в левом углу. Ну а дальше начинается Творчество.

Прелесть в том, что прописывать дескрипторы можно и ручками, и «полуавтоматически» — в открывающий и закрывающий дескрипторы выделенный текст заключается нажатием кнопки панели инструментов. Панели могут быть быстро вкл/выкл кнопками в нижней части экрана.

Более сложные элементы, чем, например, выделение текста жирным шрифтом, тоже реализуются просто, быстро и, главное, логично. Очень удобно осуществляется выбор цвета, изменение шрифта, вставка рисунка, организация ссылок. Я вот, к примеру, всегда напрягаюсь при попытке вспомнить, что надо написать для вставки рисунка <img src=...> или <img scr=...>. Согласитесь, куда проще, включив панель Graphics, щёлкнуть по кнопке NewImg, выбрать в окошке открытия файла тот, который надо, и получить результат:

<IMG SRC="banner01.gif" WIDTH="468" HEIGHT="60" ALT="">

А попутно программа еще может, по вашему желанию и без дополнительных операций, сразу перетащить сей рисунок в ту папку, где у вас рождается веб-страничка (когда появится окошко Auto-Save — просто выбираете Yes).
Заметьте, ширина и высота рисунка уже вычислены и прописаны вместе с атрибутами, место ALT="" для написания вашего комментария уже подготовлено. Подгоняете туда курсор и пишете, что требуется — заготовка за вас уже сделана.

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

Что лучше? Так:
<IMG SRC="banner01.gif" WIDTH="468" HEIGHT="60" ALT="">
или так:
<IMG SRC="banner01.gif" WIDTH="468" HEIGHT="60" ALT="">

И ещё о цвете — как только появляется незакрытый дескриптор (нет одного из символов < и >), все следующие за ним (или стоящие до него — смотря какой скобки нет) приобретают возмущенно-вишневый цвет.

А такой момент: вы помните, какой атрибут надо вписать в дескриптор, чтобы получить список, где в начале каждой строки для красоты будет стоять маленький квадратик? И как называется этот атрибут? Я не помню и не хочу запоминать.
Вызываем «волшебника» (List Wizard) кнопкой List и сразу имеем (надписи text1 и text2 добавлены):

<UL type="square">
      <LI> text1
      <LI> text2
</UL>

И тут же проверяем результат:

• text1
• text2

Еще один пример. Если хочется показать на экране кусок html-документа, то придётся все символы < и > заменить на &lt и &gt, чтобы они воспринимались не как дескрипторы, а как неформатированный текст. И если кусок не очень маленький — успехов в труде. А всего-то и надо — выделить кусок и выбрать в меню команду All "<,>" to "&lt, &gt". Есть и обратное преобразование.
Мелочь, а приятно.

Вы ведь уже знаете, я надеюсь, что таблицы для html — это очень многое? Разбивка экрана на колонки, горизонтальные зоны, места для вставки рисунков, рекламы, рисования разделителей и прочее, прочее, прочее. Когда в окошке с удобным интерфейсом указывается число столбцов, колонок, ширина бордюра, цвет фона и т.д., согласитесь, это удобно.
Кто-то скажет, что это уже попахивает визуальными методами. Нет. Ведь мы пишем «ручками», то есть имеем полный доступ к кодам и понимаем, что каждая надпись означает. Просто мы нашли себе помощника.

Пожалуй, на этом стоит остановиться. Тот, кто захочет проверить перечисленные прелести и найти ещё целую охапку других приятных мелочей (а они есть), может скачать программу здесь:

http://www.arachnoid.com/arachnophilia

Ну, а кто желает набирать в блокноте… Что ж, я не могу вам запретить.

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

Надеюсь, что и вам понравится этот продукт.

Иващенко Игорь, http://popurri.narod.ru
17.01.2002, опубликовано 21.01.2002