СтихиЯ
спонсор
 

Краткая инструкция
по оформлению текста сочинений


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

Содержание инструкции:

          1. Как сдвинуть начало строки
          2. Выделение фрагментов текста, отдельных слов и букв курсивом, жирным шрифтом или подчеркиванием
          3. Изменение типа шрифта
          4. Изменение размера шрифта
          5. Изменение цвета шрифта
          6. Выравнивание строк
          7. Размещение ссылок
          8. Размещение изображений
          9. Размещение ссылок с помощью изображений
          10. Самостоятельная проверка результатов

1. Как сдвинуть начало строки.
   Чаще всего требуется сдвинуть строфы на несколько позиций вправо от начала строки или сместить начало каждой строки в строфе.
   Самый простой способ сделать эту "лесенку" - поставить в исходном тексте сочинения код, который распознается браузером (т.е. просмотрщиком Интернет-страниц, например Internet Explorer) как пробел.
   Этот код пишется так:  
   Сколько раз вы его повторите в начале строки в исходном тексте, на столько пробелов от левой границы сместится ее начало при просмотре браузером.

Пример. Требуется сдвинуть начало каждой строки в строфе на три позиции, чтобы получилось вот так:

Но летит, улыбаясь мнимо,
   Над Мариинской сценой prima
      Ты - наш лебедь непостижимый, -
         И острит опоздавший сноб.
                  
(А.А.Ахматова)

   Добавляем ко второй строке код пробела три раза, к третьей - шесть, к четвертой - девять, получая такой исходный текст:

Но летит, улыбаясь мнимо,
   Над Мариинской сценой prima
      Ты - наш лебедь непостижимый, -
         И острит опоздавший сноб.

Примечания:
1. Не смущайтесь, что строки (особенно последняя) в исходном тексте получились длинными. Каждая из них должна остаться одной строкой, не разрывайте ее нажатием клавиши "Enter" при наборе.
2. На всякий случай напомню, что девять раз печатать вручную код пробела не нужно. Это можно сделать один раз, потом - воспользоваться копированием и вставкой.
3. Отсюда же вытекает еще одна рекомендация общего характера: сначала полностью наберите текст сочинения в обычном виде, а затем - расставляйте нужные коды. Особенно если их будет много.


2. Выделение фрагментов текста, отдельных слов и букв курсивом, жирным шрифтом или подчеркиванием.
   Может потребоваться для эпиграфов, цитат, указания ударных гласных, выделения слов с нарочитым нарушением правописания и т.д.
   Для этого уже необходимо использовать коды, которые называются тэгами. Тэги - это инструкции языка разметки гипертекста (HTML), которые объясняют браузеру, в каком виде выводить на экран монитора исходный текст документа (странички). При этом сам тэг на экране не воспроизводится. Каждый тэг обязательно заключается в угловые скобки: "<" и ">".
Самый простой (но полезный) пример. Требуется выделить жирным шрифтом гласную ударного слога в стопе.
Для этого используется тэг <b>.
   Чтобы на экране читатель увидел:

Вот и берег призрачно возник, -
Не спеши, досчитай до ста.
Что это, тот самый материк
Или это мой остров?..
      
(В.С.Высоцкий)

   Исходный текст должен выглядеть так:

Вот и берег призрачно возник, -
Не спеши, досчитай д<b>о</b> ста.
Что это, тот самый материк
Или это мой остров?..

   Обратите внимание, что тэгов было использовано два: <b> и </b>. Первый из них - "открывающий", указывает, где начинается жирный шрифт. Второй, с косой чертой после левой скобки - "закрывающий", указывает, где жирный шрифт должен закончиться. Такие тэги, использующиеся парами, так и называются: парные тэги.
   Для выделения шрифта курсивом и подчеркиванием также используются простые односимвольные парные тэги, с буквой "i" - для курсива, с буквой "u" - для подчеркивания. Можно использовать эти тэги и в комбинации (чтобы сделать курсивный подчеркнутый шрифт, например), но каждый из них должен быть заключен в отдельные скобки.
Пример использования выделяющих тэгов.

   Исходный текст:

Здесь будет обычный текст
<b>Этот текст мы хотим выделить жирным</b>
<i>Этот текст будет курсивным</i>
<u>Этот текст подчеркнем</u>
Этот текст будет сначала обычным, <b>потом - жирным, <i> жирным курсивом, </b><u>подчеркнутым курсивом, <b>жирным подчеркнутым курсивом</b></i></u> и, наконец, опять обычным.

   На экране монитора читателя это будет выглядеть так:

Здесь будет обычный текст
Этот текст мы хотим выделить жирным
Этот текст будет курсивным
Этот текст подчеркнем
Этот текст будет сначала обычным, потом - жирным, жирным курсивом, подчеркнутым курсивом, жирным подчеркнутым курсивом и, наконец, опять обычным.

   Как видите, здесь все очень просто. Главное - не забывать ставить закрывающие тэги, иначе их действие будет продолжаться на оставшийся текст до конца странички.
   Можно также и зачеркивать текст. Зачеркнутый текст заключается в пару тэгов <s> и </s>.

3. Изменение типа шрифта.
   Для того, чтобы изменить тип шрифта, используется более сложный тэг, тело которого состоит из ключевого слова, атрибута и его значения. Между атрибутом и его значением ставится знак равенства. Разумеется, тэг заключается в угловые скобки. Таким образом, тэг в общем виде можно записать как <КлючевоеСлово Атрибут = "ЗначениеАтрибута">.
   Рассмотрим для примера тэг <font face = "courier">. Ключевое слово font указывает, что изменяться будет шрифт, атрибут face уточняет, что изменение коснется типа шрифта (другие атрибуты тэгов с ключевым словом font могут относиться к размеру и цвету шрифта и рассмотрены ниже), а значение атрибута "courier" определяет, какой именно тип шрифта должен быть назначен следующему за тэгом тексту. Существует огромная масса разных шрифтов, но не стоит пользоваться экзотическими шрифтами, которые могут быть установлены на вашем компьютере помимо стандартного набора (потому, что их может не быть на сервере сайта и тогда произойдет замена отсутствующего шрифта на шрифт по умолчанию). Для практических целей вполне достаточно четырех шрифтов, обязательно присутствующих на любом WEB-сервере.
   Эти шрифты перечислены в примерах ниже. Обратите внимание, что значение атрибута (т.е. тип шрифта) берется в двойные верхние кавычки.

   Исходный текст:

<font face = "verdana">Этот текст должен быть написан шрифтом "Verdana"
<font face = "times">Этот текст должен быть написан шрифтом "Times"
<font face = "courier">Этот текст должен быть написан шрифтом "Courier"
<font face = "arial">Этот текст должен быть написан шрифтом "Arial"

   На экране монитора будет выглядеть так:

Этот текст должен быть написан шрифтом "Verdana"
Этот текст должен быть написан шрифтом "Times"
Этот текст должен быть написан шрифтом "Courier"
Этот текст должен быть написан шрифтом "Arial"

Примечание. Обратите внимание, что не указан закрывающий тэг. Прекращение действия одного такого тэга можно осуществлять началом другого. Хотя можно для аккуратности (или если действительно нужно восстановить предыдущие параметры шрифта) использовать закрывающий тэг </font>, который прекращает действие последнего тэга, возвращая установки предшествующего.

4. Изменение размера шрифта
   Это - тэг с тем же ключевым словом font, но с атрибутом size, значение которого можно устанавливать в пределах от 1 до 7. Можно ограничиться небольшим примером, заодно и проверив действие закрывающего тэга </font>.

   Исходный текст:

<font size = "3">Устанавливаем шрифт размером 3
<font size = "5">Устанавливаем шрифт размером 5
<font size = "7">Устанавливаем шрифт размером 7
</font>Отменяем шрифт размером 7, возвращая шрифт размером 5
</font>Отменяем шрифт размером 5, возвращая шрифт размером 3

   На экране монитора будет выглядеть так:

Устанавливаем шрифт размером 3
Устанавливаем шрифт размером 5
Устанавливаем шрифт размером 7
Отменяем шрифт размером 7, возвращая шрифт размером 5
Отменяем шрифт размером 5, возвращая шрифт размером 3

   Как видите, здесь тоже нет ничего сложного.

5. Изменение цвета шрифта
   Изменение цвета требуется крайне редко, но все-таки требуется. Задается цвет текста тэгом font с атрибутом color, значение которого может быть цифровым или текстовым. В общем виде этот тэг записывается так: <font color = "ЦветШрифта">, где параметр "ЦветШрифта" - это и есть значение, присваиваемое атрибуту color.
Вот некоторые из текстовых значений атрибутов:
"black" - черный;
"red" - красный;
"blue" - синий;
"green" - зеленый;
"yellow" - желтый;
"purple" - пурпурный;
"gray" - серый;
"white" - белый

   Пример изменения цвета. Чтобы текст на экране выглядел вот так:

Этот текст должен быть зеленым, этот - синим, а этот - серым,

   исходный текст может быть таким:

<font color = "green">Этот текст должен быть зеленым, <font color = "blue">этот - синим, <font color = "gray">а этот - серым,</font></font></font>

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

   Например, нужно получить на экране такую разбивку строк:

Но плевать я хотел
Но плевать я хотелна обузу примет:
У него есть предел -
У него есть предел -у меня его нет...
__________________
(В.С.Высоцкий)

   Для этого исходный текст должен быть таким:

Но плевать я хотел
<font color = "white">Но плевать я хотел</font>на обузу примет:
У него есть предел -
<font color = "white">У него есть предел -</font>у меня его нет...

Примечание 1. Цифровые (шестнадцатиричные) значения атрибутов могут иметь значения от "#000000" (черный) до "#FFFFFF" (белый). Состоят они из трех двухразрядных пар шестнадцатиричных чисел (от 00 до FF), обозначающих интенсивность каждого из трех смешиваемых цветов (RGB, красного R, зеленого G и синего B). Поэтому красный цвет имеет код "#FF0000", зеленый - "#00FF00", синий - "#0000FF".
Одинаковые значения интенсивности (например, "#A2A2A2") дают оттенки серого. Однако 16777216 цветов, которые можно получить с помощью варьирования шестнадцатиричными кодами, на практике редко используются. Во-первых, они могут по-разному воспроизводиться на разных компьютерах (поэтому существует стандарт, определяющий палитру из 216 основных цветов). Во-вторых, вы можете убедиться сами, что незначительное изменение интенсивности одного из цветов не будет заметно глазу. Поэтому для того, чтобы при необходимости раскрасить текст, вполне достаточно пользоваться несколькими основными, обозначаемыми словами и рассмотренными выше.
Примечание 2. Если цвет фона отличается от белого, можно точно определить, какое значение он имеет. Для этого нужно выбрать просмотр интересующей страницы в исходном виде (в виде HTML) и найти текст "body bgcolor", убедиться, что это значение относится именно к интересующему вас месту на странице и назначить своему шрифту такое же значение. Можно также изменять цвет фона, но рассмотрение этой возможности выходит за рамки данной инструкции и подробнее рассматриваться не будет.


6. Выравнивание строк.
   Существует три вида выравнивания строк: по левому краю, по центру и по правому краю. Устанавливает выравнивание тэг с ключевым словом (точнее, буквой) p и атрибутом align, у которого могут быть три значения ("left", "center", "right" соответственно). Практическое применение может найти для заголовка (подзаголовка) в тексте сочинения.
   Например, строка "Краткая инструкция" в заголовке должна в исходном виде выглядеть так:

<p align = "center"><font face = "times"><font size = 5><b><i>Краткая инструкция</p></font>

   Обратите внимание, что закрывающий тэг </p> можно было поставить не здесь, а после второй строки (подзаголовка), т.к она тоже центрируется.

7. Размещение ссылок.
   Если вы хотите разместить в своем тексте ссылку на другую страницу (вашу домашнюю, другое свое или чужое произведение), для этого нужно воспользоваться тэгом a с атрибутом href, в качестве значения которому указать адрес нужной страницы, заключив его в двойные верхние кавычки. Например, для перехода на главную страницу "СтихиИ" тэг со ссылкой может выглядеть в исходном тексте так:

<p align = "center"><a href="http://www.stihija.ru/index.shtml">Перейти на главную страницу "СтихиИ"</a></p>

   А выглядеть на странице (и работать) так:

Перейти на главную страницу "СтихиИ"

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

Здесь можно перейти <a href = "http://www.stihija.ru/index.shtml">на главную страницу</a> "СтихиИ" или <a href = "http://www.stihija.ru/stand.htm">к стенограмме мнений</a>

   Будет выглядеть (и работать) так:

Здесь можно перейти на главную страницу "СтихиИ" или к стенограмме мнений

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

<img src = "ИмяФайла" alt = "Текст" align = Положение width = Ширина height = Высота>

          где:

- ИмяФайла - это полное имя пути и файла. Для того, чтобы определить его, нужно заглянуть на страничку, где находится картинка, щелкнуть по ней правым бутоном мыши и выбрать в появившемся меню нижний пункт "Свойства" ("Properties").
- Текст - это текст, выводимый вместо изображения, если файл изображения по какой - либо причине недоступен. Этот текст также может служить подсказкой (комментарием к изображению), которая появится при наведении курсора на изображение.
- Положение - место, куда вы хотите поместить изображение. Принимает следующие возможные значения:
     top - последующий текст располагается в верхней части изображения.
     bottom - последующий текст располагается в нижней части изображения.
     left - изображение находится в левой части абзаца. Текст обтекает изображение справа.
     middle - изображение находится в середине строки.
     right - изображение находится в правой части абзаца. Текст обтекает изображение слева.
- Ширина - ширина требуемого изображения на экране в пикселах (точках).
- Высота - высота требуемого изображения на экране в пикселах.
   Обязательно нужно указать только параметр ИмяФайла, все остальные можно не указывать вовсе. Тогда изображение будет расположено в верхней части строки и иметь те же размеры, что и исходный файл, а при наведении курсора мыши на него не будет появляться никакого текста.

   Например, для того, чтобы разместить справа непропорционально увеличенный смайлик Это исходный смайлик, который в списке сочинений находится на ссылке обсуждения и имеет размер 16 на 17 пикселов, исходный текст тэга может выглядеть вот так:

<img src = "http://www.stihija.ru/img/forum_b.gif" alt = "Это просто покореженный смайлик" align = right width = 80 height = 34>

   В результате на экране получаем вот что:
Это просто покореженный смайлик

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

<a href = "АдресСсылки"><img src = "ИмяФайла">

   Например, тот же рисунок со смайликом можно использовать для перехода на страничку со стенограммой мнений:

<p align = "center"><a href="http://www.stihija.ru/stand.htm"><img src = "http://www.stihija.ru/img/forum_b.gif" alt = "Перейти на стенограмму мнений"></a></p>

   На странице браузера это будет выглядеть так:

Перейти на стенограмму мнений

10. Самостоятельная проверка результатов.
   Действительно, вы можете легко и быстро проверить, как будет выглядеть ваш текст на экране монитора читателя, не выходя для этого в Интернет. Это может пригодиться, например, если Интернет вам доступен только на работе или вы не хотите тратить лишних денег, болтаясь на линии во время отладки. Нужно просто завести на своем компьютере обычный текстовый файл (чем проще будет текстовый редактор, тем лучше, блокнот-notepad из стандартного комплекта поставки Windows для этих целей вполне подходит), который будет называться как угодно, но носить расширение "HTM". Например, вы назовете его "Проверка.HTM". Вполне достаточно, если он будет состоять из таких строк:

<HTML>
<BODY>

</HTML>

   Создав такой файл (можно скопировать этот фрагмент прямо отсюда) и сохранив его, вы можете открыть его броузером и убедиться, что он представляет из себя пустую, чистую страницу.    Между строками <BODY> и </HTML> вы можете занести свой текст, расставить нужные тэги, при необходимости - сохранить под другим именем (например, названием сочинения), не забыв оставить расширение (тип) HTM, после чего открыть его браузером в автономном режиме, без подключения к Интернету. На экране весь текст будет выглядеть так же, как и после размещения на сайте. Если после открытия файла браузером текст будет располагаться подряд, без разбиения на строки, в конце каждой строки исходного текста поставьте тэг <br>
   Там, где вы хотите оставить пустые строки между абзацами (строфами), поставьте два этих тэга подряд: <br><br>. В ходе исправления ошибок не нужно закрывать ни файл с исходным текстом, ни страницу браузера: после внесения изменений в файл исходного текста нужно его сохранить, а окно браузера - обновить, щелкнув по соответствующей кнопке или выбрав пункт меню - и результат всех исправлений тут же отразится на экране.
   Исправив все ошибки (если они будут), можно исходный текст между строками <BODY> и </HTML> скопировать в буфер и вставить в окно для текста сочинения на сайте.


   Вот, собственно, и все.

Успехов в творчестве!

Замечания и вопросы, касающиеся содержания инструкции, можно сообщить по адресу: amis@rbcmail.ru

 

Дизайн и программирование - aparus studio. Идея - negros.