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

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

Журнал "Самиздат": [Регистрация] [Найти] [Рейтинги] [Обсуждения] [Новинки] [Обзоры] [Помощь]
Peклaмa:

Конкурсы: Киберпанк Попаданцы. 10000р участнику!

Конкурсы романов на Author.Today
Женские Истории на ПродаМан
Рeклaмa
Оценка: 7.12*17  Ваша оценка:
  • Аннотация:
    Как грамотно и красиво оформить свой текст? Используем готовые шаблоны и заготовки. Не надо ничего уяснять и вникать. Объяснений минимум!
    Хотите разобраться самостоятельно? - читайте учебник "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.12*17  Ваша оценка:

Популярное на LitNet.com Г.Ярцев "Хроники Каторги: Цой жив еще"(Постапокалипсис) Е.Флат "Невеста из другого мира"(Любовное фэнтези) В.Пылаев "Видящий-2. Тэн"(ЛитРПГ) Л.София, "Как вылететь из Академии за..."(Любовное фэнтези) А.Емельянов "Последняя петля 3"(ЛитРПГ) Deacon "Черный Барон"(Боевая фантастика) Д.Деев "Я – другой 3"(Боевая фантастика) М.Тайгер "Выжившие"(Постапокалипсис) Т.Сергей "Дримеры 3 - Сон Падших"(ЛитРПГ) Л.Джейн "Чертоги разума. Книга 1. Изгнанник "(Антиутопия)
Хиты на ProdaMan.ru Сердце морского короля (Страж-3). Арнаутова ДанаДочь темного мага-4. Чужие тайны. Анетта ПолитоваЗаложница стаи. Снежная МаринаМилашка. Зачёт по соблазнению. Сезон 1. Кристина АзимутПеснь Кобальта. Маргарита ДюжеваАльфа напрокат, или Сделки бывают разными. Делия РоссиПризрачный остров. Калинина НатальяВам конец, Ева Григорьевна! ПаризьенаИмператрица Ольга. Александр МихайловскийПерерождение. Чередий Галина
Связаться с программистом сайта.

Новые книги авторов СИ, вышедшие из печати:
С.Лыжина "Драконий пир" И.Котова "Королевская кровь.Расколотый мир" В.Неклюдов "Спираль Фибоначчи.Пилигримы спирали" В.Красников "Скиф" Н.Шумак, Т.Чернецкая "Шоколадное настроение"

Как попасть в этoт список
Сайт - "Художники" .. || .. Доска об'явлений "Книги"