Белоглазов Артем Ирекович : другие произведения.

Html и Самиздат (light version)

Самиздат: [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь|Техвопросы]
Ссылки:
Школа кожевенного мастерства: сумки, ремни своими руками
Оценка: 7.76*11  Ваша оценка:
  • Аннотация:
    Как грамотно и красиво оформить свой текст? Используем готовые шаблоны и заготовки. Не надо ничего уяснять и вникать. Объяснений минимум!
    Хотите разобраться самостоятельно? - читайте учебник "HTML и Самиздат".
    Подготовил А. Белоглазов.

  

Артем Белоглазов
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-файл и посмотреть, что же получится.
На этом, пожалуй, всё. Удачи в оформительском деле!






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




Оценка: 7.76*11  Ваша оценка:

Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
О.Болдырева "Крадуш. Чужие души" М.Николаев "Вторжение на Землю"

Как попасть в этoт список

Кожевенное мастерство | Сайт "Художники" | Доска об'явлений "Книги"