Артем Белоглазов
	HTML и Самиздат
				(light version)

Эта работа, в отличие от статьи "HTML и Самиздат", вообще ни на что не претендует.

Лирическое отступление.

Перед вами облегченная версия моей статьи "HTML и Самиздат", написанной годом ранее. Многие высказывались, что та работа достаточно трудна для понимания человеком далеким от web-программирования. На самом деле это не так, в учебнике как раз давались основы, чтобы изучить HTML c нуля.

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

Разумеется, вы можете сказать: какого черта? С чего бы нам "неукоснительно следовать"? Мы сами разберемся, вникнем и сделаем по-своему, еще лучше. ОК – тогда читайте учебник "HTML и Самиздат". В нем содержатся рекомендации, советы, подробные объяснения и прочие инструкции. Хотите поломать голову? – RTFM!

Конец лирического отступления.

Что нам понадобится в процессе написания стандартных шаблонов и заготовок?

1. прямые руки:
2. Word (можно взять другой редактор, но лучше Word);
3. текстовый редактор, например, блокнот (но лично я рекомендую многофункциональный Notepad++, русский интерфейс в наличии);
4. браузер (например, MyIE2 / MyIE RU – отличная надстройка над IE). К сожалению, проект был закрыт в 2011 г. Но дистрибутив можно скачать, погуглив в сети.

Вы можете одновременно открыть файл и в блокноте, и в браузере. Внесли изменения в код – сохранились, а в браузере дали команду "обновить" (F5).

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

Некоторые термины:

• HTML – язык разметки гипертекста.
• Html-файл – текстовый файл, содержащий html-тэги (tags).
• Тэг - единица html-кода. Можно, сравнив с языком программирования, назвать его оператором.

Итак, приступаем. Создаем пустой текстовый файл в блокноте. Сохраняемся, выходим, меняем расширение с txt на htm. Это будет наша заготовка. Далее открываем файл также в блокноте, выбрав в контекстном меню команду "Открыть с помощью".

Перво-наперво сделаем поля. Откройте книжку, есть там поля? Есть. В принципе, поля задаются специальными тэгами, но на СИ это не получится. Поэтому применяем тэг <blockquote>. Он парный, то есть имеется открывающий и закрывающий тэг (добавляется правый слеш). Бывают и одиночные тэги. Некоторые могут иметь параметры.

<blockquote> текст </blockquote>

Вполне приличные поля получаются. Если хотите сделать их еще больше, пишите <blockquote> снова.

Теперь выровняем будущий текст по ширине. Во-первых, как в книжке, во-вторых, читать приятно.

<div align=justify> текст </div>

Параметр align со значением justify и определяет выравнивание по ширине.

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

1-й вариант:
<center><h3>Имя Фамилия</h3> <h1>Название</h1></center>

<h> – тэг заголовка (1 – самый большой размер, 7 – самый мелкий).

<center> – тэг выравнивания по центру.

2-й вариант:
<center><b><font size=4> Имя Фамилия <br><br><font size=6> Название </font></font></b></center>

Длиннее получилось, да? Однако я пользуюсь именно вторым вариантом. Потому что в тэге <font> можно задать не только размер, но и цвет, а также гарнитуру шрифта. Кстати, размер определяется параметром size (1 – самый маленький, 7 – самый большой). Нормальный размер = 3.

Цвет задается шестнадцатеричным значением в RGB-системе (Red Green Blue). Причем, сначала ставится знак "решетка". Или же мнемообозначением.

<font color="#FF0000"> красный цвет </font> <font color=red> красный цвет </font>

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

<font face=Arial> гарнитура Arial </font>

Обратите внимание на отсутствие кавычек у значения, задающего гарнитуру. И на их присутствие в задании цвета. В принципе, значение параметра надо писать в кавычках. Они ясно и недвусмысленно указывают браузеру начало и конец значения этого самого параметра. Но во многих случаях можно опускать. Почему нет кавычек при задании вида шрифта? Потому что СИ выкидывает тэг <font>, если значение шрифта взято в кавычки.

Тэг <br> осуществляет перевод строки. Мы же не хотим, чтобы ФИО и название сливались? Ну и с помощью тэга <b> мы выделили название и ФИО жирным шрифтом. После названия поставьте <br> раза четыре, чтоб отделить от основного текста.

Тэги, применяемые для выделения текста
<b>текст жирный</b>	текст жирный
<i>текст курсивный</i>	текст курсивный
<u>текст подчеркнутый</u>	текст подчеркнутый
<s>текст перечеркнутый</s>	текст перечеркнутый
<tt>текст моноширинный</tt>	текст моноширинный
<sup>верхний индекс</sup>	верхний индекс
<sub>нижний индекс</sub>	нижний индекс

А если вам требуется жирный курсивный подчеркнутый текст? Пожалуйста:

<b><i><u> жирный курсивный подчеркнутый </u></i></b>

Обратите внимание на очередность закрытия тэгов.

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

<br><dd>

Внимание! Эта связка будет работать только в браузерах IE и Mozilla (и им подобных), а в Opera и Google Chrome не будет!

Тэг <dd> применен здесь не по назначению (т.к. используется он в списке определений, вот тогда-то Opera его "понимает").

Итак, открываем Word c нетленкой. Выделяем весь текст. В меню "Формат" --› "Абзац..." задаем "нет отступа" для первой строки. Отступ слева и справа = 0. Интервал перед и после = 0. Делаем выравнивание по левому краю. Снимаем выделение. Производим замену ("Правка" --› "Заменить..."). Порядок именно такой.

1. ^p  на  ^p<BR><DD>

2. ^p<BR><DD>^p  на  ^p<BR>^p

3. ^p<BR>^p<BR><DD>* * *^p<BR>^p<BR>  на  ^p<BR><BR><center>* * *</center>^p<BR>

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

Надеюсь, вы как нормальные люди, не пользуетесь Tab'ом для абзацного отступа? А то может ерунда выйти.

Смысловые блоки в тексте отделяются пустым абзацем, то есть – <br><br>.

Или же звездочками, выровненными по центру, с отступом сверху и снизу.

Сохраняем произведение в формате txt. Теперь откроем его в блокноте, выделим всё и вставим в заготовку (только шаблон под другим именем сохраните). Финита!

Курсив, жирность и прочее расставляете по вкусу и мере испорченности.

И напоследок. Иногда требуется эпиграф. Делаем. Тут два разных случая: эпиграф-стихотворение или текстовая цитата. Код разный.

Эпиграф-стихотворение:
<div align=right> <table border=0 cellspacing=0 cellpadding=0> <tr><td> Я гуляю по проспекту - <br>Мне не надо ничего, <br>Я надел свои очки - <br>И не вижу никого. <br>Эй, прохожий, проходи! <br>Эх, пока не получил! <br><b>В. Цой.</b> </td></tr> </table> </div>

Во-первых, эпиграф выравнивается по правому краю (div align=right). Он запихнут в таблицу (что это такое, для чего и зачем здесь объяснять не буду). Строчки стихотворения, отделяются тэгом <br>, на 1-й строке этого делать не надо, т.к. вы еще больше увеличите отступ между названием и эпиграфом.

После эпиграфа сделайте перевод строки – <br>.

Эпиграф-цитата:

<div align=right> <table border=0 cellspacing=0 cellpadding=0 width="400"> <tr><td> <div align=justify> <font face=Arial size="-1"> <dd>Все действия человека и все компоненты среды обитания, прежде всего технические средства и технологии, кроме прочих позитивных свойств и результатов, обладают способностью генерировать опасные и вредные факторы... <dd>Вредные и опасные факторы, обусловленные деятельностью человека, называются антропогенными, а вызванные природными явлениями – естественными. </font></div> </td></tr> </table> </div>

Тут мы опять-таки применили выравнивание по ширине. Плюс поменяли гарнитуру и чуть уменьшили размер. Не забыли и красную строку. В книжках именно так.

Одна хитрая деталь – в тэге <table> указан параметр width, определяющий ширину. Если его опустить, то таблица примет размер по самому длинному абзацу и растянется на весь экран. Получится тогда вовсе не эпиграф, а чушь собачья, с хвостиком.

Для стихотворения-эпиграфа гарнитуру и размер можно не менять. На усмотрение, в общем.

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

<div align=center> <table border=0 cellspacing=0 cellpadding=0> <tr><td> <font face=Arial size="-1"> <br>В темно-синем лесу, где трепещут осины, <br>И с дубов-колдунов облетает листва, <br>Волки в полдень коня на поляне месили, <br>И при этом напевали странные слова: <br>А нам все равно, а нам все равно, <br>Не боимся мы ханскую братву... </font> </td></tr> </table> </div>

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

Ну и посмотрим на нашу заготовку в целом.

<blockquote> <div align=justify> <center><b><font size=4> Имя Фамилия <br><br><font size=6> Название </font></font></b></center> <br><br><br><br> <br><dd>Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст... <br><dd>Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст... <br><dd>Текст. Текст. Текст. Текст. Текст. Текст. Текст. Текст... </div> </blockquote>

Дата, подпись – по желанию. Знак копирайта, если очень хочется – ©. Имеет код &#169; Мнемокод &copy;

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

На этом, пожалуй, всё. Удачи в оформительском деле!

Данный текст может свободно распространяться при соблюдении следующих условий:
	бесплатность; недопустимость никаких изменений (без согласования с автором); обязательное упоминание автора; если текст планируется разместить на каком-либо сайте, то необходимо согласовать это с автором.
© Артем Белоглазов aka bjorn 2005