Александр ГЛУЩЕНКОСАМОУЧИТЕЛЕМ ПО «САМИЗДАТУ»!
Бытует такое выражение: «автостопом по белу свету». У меня же — «самоучителем по "Самиздату"». Как хочешь, так и понимай: то ли «сам учусь», то ли «сам учу». Но скорее, и то, и другое — одновременно, поскольку связавшись однажды с «Самиздатом» (с «СИ», как принято говорить на его страницах1), пришлось мне разобраться и научиться чему-то самому. Так что теперь могу уже поделиться поднакопленным опытом и с тобой. Ведь и мне было бы гораздо сложнее, не найди я в «самиздатовском» хелпе коротких, но толковых пособий по HTML-оформлению от Артёма Белоглазова2, а также предложенного им же примера оформления рассказа «Хочешь цветочек?»3. Оформлению авторских разделов посвящён «самиздатовский» материал Дикой Яблони4. Спасибо, снимаю шляпу! Некоторые полезные советы есть и в других материалах раздела «Помощь», запускаемого через соответствующую кнопочку в правом верхнем секторе почти любой странички «СИ»5. Какие-то здоровые мысли я нашёл и на техническом форуме «СИ», хотя, отмечу, продираться через его дебри в поисках нужной информации нелегко. Ну и, раздав всем сестрам по серьгам, я готов перейти к практическим советам.
Абсолютно ответственно заявляю: это совсем не тот «самоучитель», просмотрев который, мой друг, найдёшь ты нужные ответы на все возникшие у тебя вопросы. К тому же, после перечисления указанных выше справочных материалов можно поинтересоваться: а что, собственно, новенькое собираюсь я открыть в этой теме? Нового — ничего, а вот применить уже известное считаю нелишним. Для начало всё же хочу предупредить, что труд сей не является руководством по «Word» или HTML. Он вообще руководством не является. Здесь собраны и в какой-то мере систематизированы проблемы, с которыми мне пришлось столкнуться при размещении материалов в «СИ», а также приведены возможные варианты их разрешения, применяемые мною лично. Что-то кому-то покажется не полным, не оптимальным, не корректным — возражать не буду, предлагайте своё (хотя бы и в комментариях). И всё же, надеюсь, мой скромный труд пойдёт на пользу начинающему автору «Самиздата». Ладно, приступим. Открой наугад любое произведение на «СИ»... Ну и какое первое впечатление? Смею предположить, что никакое. Менее или более длинные, абсолютно неудобочитаемые строки текста. Причём и текст, возможно, интересный, захватывающий. А... не берёт! Всё уныло и серо. Теперь раскрой любую, лежащую под рукой книжку... Улавливаешь разницу? Даже Гражданский кодекс РФ читается с большим интересом. В чём же дело? Ответ простой — в оформлении. Правомерно задаться и другим вопросом: а ты сам-то в «Самиздате» чего делаешь? Почитать заглянул? И что, не обратил внимание, насколько трудно продвигается этот процесс по сравнению с обычной книгой? Обратил. А почему не закрыл ещё страницу? Ах, интересно... Так пойди и напиши в комментарии автору: «Что ж ты, Тяпкин-Ляпкин, изводишь меня своими длиннострочиями? Меня, читателя, в грош не ставишь. Так хотя бы свой труд уважь — оформи покрасивше да почитабельнее. Глядишь, и потянутся к тебе люди...» Нет, ломотно тебе комментарии писать. Тогда труди глаза и не вякай! Но если ты, как и я, имеешь что своё сказать-написать, потрудись на благо своего будущего читателя (а может, и издателя) — красота ещё никогда никого не портила, чего бы она не касалась. И ещё одна рекомендация «общего» порядка. В «СИ» существуют авторы, число трудов которых исчисляются десятками. Я глубоко сожалею, что в списках работ отсутствуют даты написания, поскольку сами по себе названия произведений в этом плане являются, как правило, малоинформативными. Ну вот, к примеру, встречается название «Госдеп США разочарован». О каком периоде здесь идёт речь? Если о событиях середины XX века, меня это в данный момент вряд ли заинтересует, а если речь о делах вчерашних, открою, посмотрю. Но и дела давно минувших дней могут быть интересны. Единственно, а с какой временной позиции они оцениваются? Согласись, что оценки советского периода истории начала 1980-х и начала 2010-х годов существенно различаются. Да и в прочих смыслах небезынтересно, когда автор написал свой труд. Неплохо бы также знать, писал он его сидя в центре стольного града или будучи где-то в пустынной глубинке — с этой стороны авторская позиция тоже может стать понятней. Не углубляясь в дальнейшие рассуждения по этому поводу, хочу попросить: друг мой, в конце своей многотрудной работы укажи время и место её написания. Тем ты не только проявишь уважение к читателю, но и сам, зайдя в «Самиздат» годков так через тридцать—сорок, рад будешь освежить в памяти события именно того лета, именно в том месте... Возвращаясь же к основной теме, замечу, что предлагаемые ниже манипуляции с текстами описывают не только содержание, но и порядок действий по подготовке и размещению материала на сайте «Самиздата». Смею заверить, что и сами действия, и их очерёдность определились у меня опытным путём многочисленных проб и ошибок, что и даёт мне основание рекомендовать их тебе. А уж последуешь ли ты моим рекомендациям — другой вопрос. Итак, полагаем, что твоё сочинение уже, в целом, написано. Остановка за малым — загнать его на сайт. Но не будем торопиться, и...
Да, вот так издалека начинать приходится. Впрочем, почему — издалека? Ты же свою нетленку тоже, небось, не на коленке писал. По моим прикидкам, не менее процентов девяноста глубокоуважаемых россиян в качестве текстового редактора именно майкрософтовский «Word» пользуют. Но, как это ни странно, ваяют в нём, не шибко озадачиваясь всеми теми возможностями, которые он предоставляет. На мой же взгляд, львиную долю работы по оформлению будущего «самиздатовского» текста можно выполнить именно здесь. Терять нам нечего, давай попробуем.
В любом мало-мальски серьёзном труде в тексте встречаются сноски. Как правило, они находятся в нижнем колонтитуле текущей страницы. Но, увы, о колонтитулах знают лишь «Word» да мы с тобой; в последующих преобразованиях текста колонтитулы вместе со сносками исчезнут как класс. Поэтому первоочерёдно позаботимся о сохранности наших примечаний, вынесенных в сноски.
Как мы будем сноски с текстом связывать — вопрос особый, мы к нему позже вернёмся. А пока сделаем наши сноски вовсе даже не сносками, а частью обычного текста. Для этого выделяем и копируем в буфер памяти (то ли с помощью кнопки на главной панели, то ли с помощью «аккорда» <Ctrl C>) все сноски — от первой до последней. Отступив от конца романа пару абзацев, пишем слово «Примечания:» и ещё чуть ниже производим вставку копированного фрагмента (при помощи кнопки или «аккорда» <Ctrl V>). Теперь у нас две копии сносок (разница только в нумерации: во вставленной в текст копии у всех сносок номер один — первый). Понятно, что одна из копий лишняя. Догадываешься, какая? Ну конечно, не та, которую мы только что вставили. Начнём удаление, но удалять будем по уму. Щёлкни по номеру самой последней сноски — и перенесёшься к тому фрагменту текста, который на неё ссылается. Теперь аккуратно выдели номер сноски и удали его клавишей <Delete>. Далее занеси на это же место число, соответствующее только что удалённому номеру, выдели его и окрась в любой яркий цвет при помощи инструмента Цвет выделения текста на главной панели инструментов «Word». Теперь это место и номер соответствующей сноски будут легко обнаруживаться в текстовом массиве. Снова перейди к самой последней сноске. Как ты видишь, их количество уменьшилось на одну — именно ту, цифровую ссылку на которую мы только что удалили. Последовательно повтори указанные операции для всех оставшихся сносок. Что мы теперь имеем? Сноски, как таковые, теперь отсутствуют, зато осталась их точная копия и отмеченные в тексте места для привязок. А вот привязками займёмся позже.
Скажи пожалуйста, кто везде и повсюду перекрывает кислород букве «ё»? За что её поразили в правах? Апостроф вместо твёрдого знака — норму, отменённую более полувека назад, — зачастую ещё встречаем, а «ё» поголовно игнорируем. Сидишь и ломаешь голову: «все» — это «все»? Или таки «всё»? Кому нужны эти загадки?! Давным давно уже в компутерных кодовых таблицах место уважаемой кириллической букве нашлось, а в наших текстах — фига с маслом. Будь добр, исправь. Просто так, из уважения к русскому языку, на котором ты пишешь. И к читателю. Хочешь, помогу? Текст длинный-длинный и вычитывать его лишний раз не хочется. Понимаю, но рано или поздно придётся. Однако, задачу можно слегка упростить. С функцией замены знаком? С ней нам придётся работать регулярно. Не знаю, какой «Word» у тебя, у меня — «2007»-й. Поэтому буду говорить о нём, хотя все упомянутые далее функции имеются и в предыдущих версиях.
Какое слово с отсутствующей буквой «ё» часто встречается в тексте? Наверное, «еще». Вот его-то и указываем в поле Найти:. Но, внимание! Производя замену в таком буквенном сочетании мы вместо слова «лещей» получим слово «лещёй» — хрен редьки не слаще! Поэтому подскажем «Word», что нас волнует исключительно отдельное слово «еще», а для этого в поле Найти перед и после нужного слова поставим пробелы (на рисунке я их обозначил красными точками): « еще ». Соответственно, в поле Заменить на: укажем с пробелами слово « ещё ». Теперь нажимаем кнопку Заменить все (надо же, и здесь «ё» игнорят). О-опс... Готово! Что там далее? Слово «ее». Повторяем ту же операцию, не забывая о пробелах перед и после слова... Вот, теперь местоимение «её» встало на свои места. Когда всё же начнём вычитывать текст, возможно нам будут попадаться и другие слова, нуждающиеся в замене «е» на «ё» (или каких-то других). Не исключено, что такие же слова находятся и ниже по тексту. Последовательно выполняя указанные операции, мы добьёмся, что примерно к середине нашего материала замены будут выполнены полностью. Ломотно каждый раз писать в диалоге слова, требующие замены? Давай облегчим нашу жизнь. Выдели в тексте слово, подлежащее замене, и либо ткни мышкой в команду Копировать, либо, что часто предпочтительней, нажми «аккорд» <Ctrl C> — копировать в буфер памяти. При этом обрати внимание на три латинские буквы, стоящие рядком на клавиатуре, и постарайся мнемонически запомнить их назначение при использовании с клавишей <Ctrl>: X — вырезать в память (типа, крест наложить), C — копировать в память (от слова «copy») и V — вставить из памяти (похоже на вставляющую стрелку, не правда ли?). Эти «аккорды» нам ещё крепко помогут по жизни. И не только в «Word». А если у нас роман из сельской жизни, в котором на каждой странице встречается слово «просёлок», причем в разных падежах, числах и даже в качестве корня в прилагательных: «проселок», «проселки», «проселочный», «запроселочные»...? Чего проще! В строке поиска наберём «просел», в строке замены — «просёл». Правда в результате окажется, что где-то «грунт просёл». Что ж, издержки автоматической замены зачастую неизбежны! И либо ты наткнёшься на ошибочно исправленное слово при вычитке, либо попросишь «Word» поискать соответствующее слово: « просёл » — (с пробелами до и после!) — и исправишь его пальчиками.
Проблема из проблем! Знаешь ли ты, что в типографике используются три очень похожие символа: «—» — тире или длинное тире, «–» — короткое тире или минус и «-» — дефис? Открой книжку: в диалогах каждая реплика начинается именно с тире. С другой стороны, наречия типа «как-то» пишутся только через дефис. Думаю, учебники русского языка дадут более подробное разъяснение, где какой знак применяется. Но уж если ты это и без учебников знаешь, то грешно в «Самиздате» лепить символы как ни попадя. А начинается всё с того же «Word». С дефисом здесь проще всего: нажал клавишу с чёрточкой, называемую «минус», и получил дефис. А чтобы получить тире, надо ударить аккордом <Ctrl Alt GreyMinus>, где <GreyMinus> — это тот минус, что под правой рукой, на цифровой панели клавиатуры. Чуть-чуть привыкнуть — и очень даже неплохо получаться будет! Что же касается собственно «минуса» или короткого тире, то его с клавиатуры так просто не получишь (а нам он и не очень-то требуется. Как правило, в текстах достаточно дефиса и тире). Но если очень надо, можно использовать в настройках «Word» функцию автоформата при вводе. К этой функции мы ещё подойдём чуть ниже, но могу сказать, что у меня короткое тире получается при нажатии клавиши <минус> два раза подряд. Но что делать, если текст уже набран, а «длинное тире» так ни разу и не использовалось? Остаётся надеяться, что при наборе мы хотя бы грамотно расставляли пробелы. Оказывается, и такая проблема существует. Часто, особенно на форумах и в письмах электронной почты, приходится сталкиваться с тем, что знаки препинания либо вообще никак пробелами не выделены, либо пробел ставится перед, а не за запятой, точкой, восклицательным знаком. Так вот, тире — в отличие от дефиса — обычно «ограждается» пробелами с обеих сторон. Исключение составляют реплики прямой речи, где строка начинается как раз с тире, а пробел следует сразу за ним.
Зато теперь текст «заиграл» по-взрослому!
Возьмём опять-таки в качестве образца книжку. Что мы видим? Как правило, используются именно «угловые» кавычки. К вопросу о том, как их разместить в «СИ», мы подойдём ниже. А пока давай договоримся, что при макетировании нашего произведения в «Word» мы всё же будем расставлять именно их. Ну да, легко сказать «давай договоримся...». А где же их, «угловые», взять, если «лепит» наш редактор сплошь и рядом «прямые»? Вопрос понятен, отвечаю: в «Параметрах Word». Чтобы добраться до них, в более ранних версиях «Word» необходимо было выполнить выбор из главного меню программы Сервис | Параметры. В «Word-2007» надо щёлкнуть по круглой кнопке в левой верхней части экрана и внизу выпавшей вкладки найти клавишу Параметры Word, чтобы нажать на неё. Теперь перед тобой открылся диалог Параметры Word. Выбираем пункт меню (в ранних версиях — вкладку) Правописание. Сейчас на правой половине окна диалога мы видим кнопку Параметры автозамены и нажимаем её. В появившемся диалоге Автозамена дёргаем сначала закладку Автоформат при вводе. Проверяем и при необходимости устанавливаем «птицу» в окошке "прямые" кавычки «парными». Ту же процедуру выполняем и на закладке Автоформат. Выходим из диалога, не забыв раз за разом нажимать кнопочки ОК. Voila! — как говорят французы.
Но процедурку эту рекомендую запомнить, поскольку повторять её нам ещё не раз придётся.
Я готов поспорить на последний зуб, что в полном собрании сочинений Льва Николаевича Толстого ты вряд ли найдёшь сокращения подобного рода. Разве что в письмах или деловых бумагах. Мы же создаём художественное или публицистическое произведение. Давай будем уважать читателя и писать слова полностью (уж коли без этих слов не обойтись!). Воспользуйся функцией замены (о ней мы рассуждали выше) и восстанови, ради бога, незаслуженно купированные слова.
А если уж такие сокращения продиктованы контекстом нашего сочинения, потрудись проследить хотя бы, чтобы после точек стояли пробелы. Чуть позже мы научимся делать эти проблемы неразрывными. Что такое «неразрывный пробел»? Это пробел, по которому невозможен перенос строки. То есть, буквосочетание «т. е.» будет всегда находиться на одной строке — будь то в конце одной строки, либо в начале другой. Таким образом привязывают наименования единиц к числам, их обозначающим, сокращение «г.» к соответствующему году и так далее. Или вот: длинное число 1 029 384 756 делят на разряды как раз при помощи неразрывных пробелов. Ну и, коль скоро, речь всё же идёт о нашем макете в «Word», таки подскажу: в нём неразрывный пробел образуется «аккордом» <Ctrl Shift пробел> (а по секрету шепну ещё, что неразрывный дефис ставят «аккордом» <Ctrl Shift минус на буквенной панели>). Однако для размещения текста в «СИ» это не имеет никакого значения.
«Word» предлагает нам, минимум, четыре типа скобок: круглые, прямые, фигурные и угловые. Некоторые коллеги умудряются в качестве скобок — особенно в расшифровках подписей под документами — использовать слэш «/». Очевидно, последний способ сохранился в качестве аттавизма со времён пишущих машинок, о которых уже мало кто помнит. А вот слэш, вишь ты, подзадержался.
Так хочу тебя предупредить, что безбоязненно для публикаций в интернете ты можешь использовать только круглые скобки. С остальными же надо обращаться поаккуратнее, поскольку машины и программы легко могут тебя неверно истолковать. Но, на мой взгляд, круглых скобок вполне достаточно даже для написания романа объёмом с «Войну и мир».
Несколько слов к вопросу о выделении участков текста. Способов выделения несколько, наиболее известные из них: выделение заглавными буквами (применяется, как правило, при отсутствии других возможных способов или в крайне ограниченном числе случаев — в заголовках, например), выделение курсивом — наклонным шрифтом «italic» (я пользуюсь им чаще всего, например, для выделения цитат, акцентируемого текста или чего-то ещё), выделение полужирным шрифтом «bold» (для особо акцентируемых фрагментов), выделение подчёркнутым шрифтом «underline» (для специфических выделений текста, определяемых контекстом). Зачёркнутый шрифт я не использую. Возможны сочетания различных типов выделений текста, например, подчёркнутый и полужирный «italic». Хочу только предупредить, что злоупотреблять выделениями текста, также как использованием косметики и парфюма, не следует — это в некотором роде моветон.
А чтобы тем или иным способом выделить фрагмент в «Word», необходимо, выделив фрагмент мышью6, либо использовать кнопки на панели инструментов Шрифт закладки меню Главная, либо ударить «аккордами»: <Ctrl I>, <Ctrl B> или <Ctrl U>. При этом, как легко убедиться, в нужном «аккорде» используется начальная буква соответствующего способа выделения.
Нелепо, на мой взгляд, пренебрегать возможностью переноса слов там, где она предусмотрена. Поэтому в обычных «вордовских» документах у меня переносы имеются. При выравнивании текстов «по ширине» строки это имеет особый смысл, поскольку пробелы между словами становятся более одинаковыми, а визуальная плотность текстов — более равномерной. Однако, в случае подготовки текста для «Самиздата» я функцию автоматической расстановки переносов в «Word» отключаю, поскольку при последующей конвертации знаки переноса будут преобразованы в обычные дефисы, рассыпанные по тексту в произвольном порядке (такую картину мы иногда видим и в газетах, и на интернетовских сайтах). Надеюсь, в своём тексте ты никогда не делал переносов вручную, пальчиками? Иначе тебе придётся сейчас выполнить ту же работу в обратном порядке — переносы удалить.
А чтобы отключить автоматический перенос в «Word», достаточно зайти на закладку главного меню Вставка и в теме Параметры страницы нажать кнопку Расстановка переносов, после чего в выпавшей менюшечке поставить «птицу» напротив выбора Нет (аналогичным способом настройка производится и в более ранних версиях «Word»).
«Как? И здесь проблемы?!» — изумлённо спрашиваешь ты. Ну, в общем, да. То есть мы и сейчас не будем говорить о том, как донести абзацы до «СИ», мы просто должны договориться о некоем нашем псевдостандарте, которого будем придерживаться и далее. Правила документооборота везде, хоть немного, да различаются. Скажем, я в документах обычно делаю межабзацный интервал в 6 пунктов, а отступ «красной строки» — абзацный отступ — в 0,8 см (и никогда, слышишь, никогда не делаю абзацный отступ при помощи пробелов!). Но стоит мне начать письмо в моём любимом «The Bat!», как все мои «вордовские» принципы летят насмарку — в простой текстовой форме такие прибамбасы не предусмотрены. Тогда я перехожу на «английский» принцип: абзацный отступ игнорирую полностью, зато между абзацами вставляю пробельную строку — просто, нажав лишний раз на клавишу <Enter>. И, должен сказать, получается неплохо, письма вполне читабельны, мысли не наползают друг на друга, разделённые пробельной строкой. Как выяснится далее, в «СИ» я успешно объединяю оба этих метода (и пусть в строгой типографике подобное объединение считается излишним, я его таковым не нахожу). Но об этом потом... Пока же договоримся, делать в нашем «вордовском» макете обычный абзацный отступ и, при желании, установить абзацный интервал в 6—12 пунктов. И никаких пробельных строк!
Ну вот... Можно сказать, что основные свои секреты вёрстки макета в «Word» я раскрыл, и макет, в первом приближении, уже свёрстан. На него любо-дорого глянуть: буква «ё» стоит на подобающих ей местах, дефисы не подменяют тире и наоборот, ненужные сокращения раскрыты, переносы убраны, «красные строки» видны, текстовые выделения (в разумных пределах!) выполнены... То есть текст принял такой вид, что хоть сей момент его можно распечатать на принтере, и распечатку не противно будет в руки взять! Отлично! Сейчас мы всё это начнём уродовать. Поэтому рекомендую сохранить исходный текст в том виде, в каком мы его имеем, присвоив файлу русскоязычное имя... ну, скажем, по названию произведения. И тот же час повторно сохраним файл при помощи команды «Word» Сохранить как, присвоив ему то же имя, но с использованием латиницы, заменяя пробелы символами подчёркивания. Например, наш роман называется «Очень интересная история». Соответственно, исходный файл будет иметь имя «Очень интересная история.doc», а файл для дальнейшей работы мы назовём «ochen_intereshaja_istorija.doc». Заметь, что и в первом, и во втором случае формат файлов остаётся «вордовским». В первом случае — навсегда, во втором — до поры, до времени.
Что такое HTML-разметка? Открой соответствующую статью в интернете и почитай, если нужно. Пока же нам достаточно знать, что наши программы просмотра интернет-текстов (так называемые браузеры) по этой разметке будут понимать, что и в каком виде выводить на экран.
Признаюсь: я не пользуюсь каким-либо специальным HTML-редактором, ограничившись возможностями «Word» и других легкодоступных и привычных мне инструментов. Поэтому и дальнейшую речь об HTML-разметке я буду вести с позиций «Word». Уж не обессудь!
Итак, предлагаю начать со шрифтовых выделений текста. Их придётся отмечать пальчиками. Заодно и текст наш пройдёт ещё одну, контрольную вычитку. Скользим взглядом по нашему тексту в «Word». О! Встретился наклонный шрифт, курсив. Подводим курсор к началу этого фрагмента и пишем следующее сочетание (в HTML подобные специальные сочетания символов, заключённые в угловые скобки, называются тэгами): <i>, затем переходим к концу фрагмента шрифтового выделения и ставим закрывающий тэг </i>. Аналогично, в начале выделения полужирным шрифтом устанавливается тэг <b>, а в конце — </b>. Для подчёркнутого шрифта пара тэгов выглядит так: <u> — открывающий, </u> — закрывающий. Таким образом, отметив в своём тексте при помощи тэгов слова <i>выделение курсивом</i>, ты получишь на экране: «выделение курсивом». Для полужирного шрифта сочетание <b>полужирное выделение</b> трансформируется на экране в «полужирное выделение», для подчёркнутого: <u>подчёркнутый шрифт</u> трансформируется в «подчёркнутый шрифт». Мнемоника простая, мы о ней выше говорили: i — наклонный italic, b — полужирный bold и u — подчёркнутый underline. Используемые нами пары открывающих и закрывающих тэгов называются, как ни странно, парными тэгами. А можно ли при необходимости сочетать различные типы выделения текста? Конечно! Сначала выделяем текст одной парой тэгов, а затем внутри этой пары ставим другую и, если нужно, третью. Не для всех браузеров, но для некоторых из них (а для нас это значит именно для всех!) важен порядок вложенности парных тэгов. То есть, чтобы построить конструкцию для подчёркнутого полужирного италика, мы изобразим нечто типа <i><b><u>красиво, да?</u></b></i>, получив в результате: «красиво, да?». Кстати говоря, похожим образом можно в нужных местах оформить ударные гласные. Вот чуть выше по тексту я написал слово «Признаюсь». Здесь ударение следует поставить. Но как? Выделением — в данном случае — буквы «а». Для этого пришлось составить такую конструкцию: Призн<i><b>а</b></i>юсь. В результате чего появилось ударение: «Признаюсь». Хотя, на мой взгляд, ударение всё же лучше обозначать привычным для нас способом, при помощи типографского символа «акут» код которого ́. Прописываем этот код после ударной гласной и получаем, к примеру, «Призна́юсь». Естественным образом, чтобы при оформлении выделений текста хоть немного облегчить наш труд, первый же тэг <i> выделим курсором и при помощи «аккорда» <Ctrl C> занесём в буфер памяти. А потом в нужных местах будем вставлять его «аккордом» <Ctrl V>, добавляя пальчиками в закрывающих тэгах слэш «/».
Ну вот... Самую трудоёмкую работу выполнили, повылавливав по пути всяких мелких «блох» в нашем тексте.
Вот теперь можно добрым словом помянуть наш труд по расстановке длинных тире, а заодно сказать спасибо «Word» за предоставленную возможность автоматической замены.
Открываем знакомый нам уже диалог Заменить. В строку Найти: при помощи кнопок и меню Больше>>, Специальный, Длинное тире заносим соответствующий значок «^+», а в строке Заменить на: пишем: — — это цифровой код символа «длинное тире». Нажимаем знакомую кнопку Заменить все. Готово! Теперь в нашем тексте остались только дефисы, которые браузер переварит без труда. Вместо же тире по всему тексту стоят наборы символов, отчего текст становится для чтения тяжеловат. Но ничего, привыкнешь!
С кавычками вот какой нюанс учесть следует. Многие браузеры, в частности, моя любимая «Opera», воспроизводят символы угловых кавычек без проблем. Многие, но не все. Поэтому «СИ», конвертируя наши тексты в свой специфический формат, угловые кавычки преобразует в прямые, а прямые может вообще до апострофов сократить. Поэтому мы угловые кавычки маскируем, подменяя их символы тождественными цифровыми кодами — наподобие тех, что использовали для простановки тире. Естественным образом, для правых и левых угловых кавычек коды разные: « — для левых и » — для правых. Поэтому с заменой работаем в два этапа. Сначала при помощи диалога Заменить меняем символ левой кавычки "«" на цифровой код «, а затем символ правой кавычки "»" на цифровой код ».
Ты, наверное, заметил, что я только что ставил изображения угловых кавычек в кавычки прямые. Так это тот случай, когда нам требуются кавычки двух типов. Особенно часто такая ситуация встречается в цитатах, которые открываются и закрываются угловыми кавычками, а внутри цитат необходимо ещё закавычить отдельные фрагменты текста. Особенно неприятно, когда эти фрагменты заканчиваются как раз концом цитаты. Тут-то прямые кавычки и помогают — используй их в середине цитат, без всяких цифровых кодов. Но как нам нарисовать прямые кавычки, если «Word» настроен на кавычки угловые? Так я же советовал запомнить настройку параметров программы для постановки угловых кавычек автоформатом при вводе. Если запамятовал, вернись к этим строкам, после чего поменяй соответствующий параметр «Word».
Поскольку все эти символы по разному воспроизводятся браузерами, конвертор «СИ» воспринимает их болезненно — до полного игнора. Поэтому рекомендую на данном этапе творчества произвести их замену на соответствующие цифровые коды. В частности, код символа номера «№» — №, другие коды можно увидеть в пособии Артёма Белоглазова, на которое я ссылался в самом начале статьи7. Там же есть своеобразная рекомендация: заменять символ номера хитрым сочетанием N<u><sup>о</sup></u> (что означает: после латинской «N» подчёркнутая буква «о» отправляется в верхний индекс). Пробовал — работает нормально, но в «Опере» выглядит не вполне эстетично. Цифровой же код пока что срабатывает, и жалоб не поступало.
Наверное, ты уже заметил, что, если тэги заключаются в угловые скобки, то коды символов начинаются с хитрой закорючки &, называемой «амперсанд», а заканчиваются символом точки с запятой — ;. Коды бывают цифровыми, как в случае используемого нами кода тире, — в них за символом амперсанда следует символ «решётки» — #, который в латинице, кстати, и выполняет функцию символа «номер», «число». А бывают коды мнемонические — с использованием легко запоминающихся аббревиатур. К таким кодам, в частности, относится код неразрывного пробела — — от «no-break space». Об использовании неразрывных пробелов мы говорили выше. А теперь, переходя от разговоров к делу, надо бы их расставить, для чего в нужных местах вместо пробела указать код неразрывного пробела, то есть . В большей части это можно сделать, использовав диалог Заменить. Думаю, теперь уже можно не перечислять последовательность необходимых для того действий.
Заметим между делом, что в мнемонических кодах можно применять только маленькие, строчные буквы. Тэги в этом плане менее капризны, но давай возьмём за правило: и в кодах, и в тэгах писать исключительно маленькими (строчными) латинскими буквами. Иначе рискуем тем, что компутер нас не поймёт.
Итак, в нашем «вордовском» тексте сейчас видны абзацные интервалы и отступы «красных строк». Спешу разочаровать: они видны только нам, а «СИ» их не увидит. Интервалы между абзацами исчезнут даже раньше — как только мы переконвертируем свой файл в текстовый формат. А вот «красные строки», то есть отступы в начале строки, нас будут только отвлекать и путать, поскольку при переходе в текстовый формат они преобразуются в некоторое количество пробелов, которые при загрузке в «СИ» погибнут безвозвратно. Поэтому, не вдаваясь в глубины конвертаций, выполняем следующие операции. В строку Найти нашего любимого диалога Заменить при помощи кнопок и меню Больше>>, Специальный, Знак абзаца заносим символ, соответствующий абзацу: ^p. А в строку Заменить на: гораздо более сложную конструкцию (я позже объясню, что она означает): ^p^p<p>^p  . Проверил? Жми кнопку Заменить все! Ёлы-палы! Текст стал почти совершенно не читаемым... Да, но это нам в нём разбираться сложно, а браузер поймёт эту галиматью с полуслова. Что же мы сделали последней заменой? Во-первых, вместо одного символа абзаца вставили два, в результате чего после замены между абзацами вместо какого-то условного, визуального интервала появилась полновесная пустая строка. Так нам проще будет ориентироваться в тексте для внесения следующих правок. Во-вторых, как мы уже говорили, браузер наше понятие абзаца не разумеет, у него для понимания абзаца свой тэг имеется. Его-то мы и подставили за «вордовскими» спецсимволами абзацев следом: <p>. Таким образом, и на странице «Самиздата» у нас два соседних абзаца будут разделены пустой строкой, о чём я говорил ранее. Следующий символ абзаца был предназначен исключительно для «Word», дабы обеспечить нам в дальнейшей работе с текстом лучший обзор. То есть, после замены тэг <p> оказался на отдельной строке — ниже пробельной, а последующий текст оказался ещё ниже. Представь, если бы мы этого не сделали, насколько было бы сложнее читать текст в перемешку с тэгами и кодами. (Кстати, в некоторых случаях один тэг <p> вполне можно заменить парой <br><br>.) Далее мы поставили два незнакомых нам прежде мнемокода  . Зачем? А чтобы сформировать на «самиздатовской» странице абзацные отступы «красных строк». Посмотри в книге: абзацный отступ обычно имеет ширину не менее двух-трёх символов, иногда больше. Как их на нашей страничке организовать? Поставленные рядом несколько обычных пробелов любым браузером воспринимаются как один. Этого мало. Поставить несколько неразрывных ? Близко к правильному ответу, но не так. Дело в том, что на экране неразрывный пробел имеет ширину около 1/4 ширины символа «N», именуемой кеглем. Значит, чтобы обеспечить потребный отступ в 2 кегля, нам потребуется набрать восемь следующих друг за другом мнемокодов . Строка затемнится донельзя. К тому же, как мне сообщили, ранние версии популярного браузера Firefox не совсем корректно обрабатывают этот символ. К счастью, HTML предлагает и другие мнемокоды пробелов, в частности,   и  . Оба этих пробела являются разрывными и использоваться в качестве полноценной замены коду в других местах текста не могут. А вот для образования абзацного отступа — вполне, поскольку первый мнемокод проставит на экране пробел шириной в половину кегля, а второй — в полный кегль. Таким образом, использование двух следующих друг за другом мнемокода   дадут абзацный отступ потребной ширины, именно такие отступы ты видишь сейчас перед собой на экране. Вообще говоря, в некоторых браузерах (например, в Internet Explorer, входящем в поставку ОС Windows) для формирования «красной строки» используют тэг <dd>. Но в моей любимой «Опере» он не работает, а разрабатывая HTML-тексты мы должны стремиться к тому, чтобы при переходе от браузера к браузеру возможные изменения картинки были бы минимальными. Вот поэтому я поступаю с «красной строкой» так, как поступаю. Ну и коль скоро мы указали будущему браузеру, где и как должны размещаться «красные строки», то сами по себе абзацные отступы в исходнике нам в дальнейшем не понадобятся. Более того, как уже говорилось, они будут только мешать, превратившись при близкой уже конвертации в наборы пробелов. Смело убираем их, используя раздел Абзац на закладке меню Главная. В появившемся диалоге в окошке первая строка: вместо Отступ выбери Нет и нажми кнопочку ОК. Всё, отступы «красных строк» исчезли.
Порядок! Мы в двух шагах... нет, пока ещё не от «Самиздата», а от того, чтобы прикинуть, как наше творение будет выглядеть в окне браузера.
Для этого вызываем диалог Сохранить как. В выпавшем меню выбираем пункт Другие форматы и получаем диалог Сохранение документа. Щёлкнув по чёрной стрелочке в строке Тип файла, вызовем список возможных форматов, из которого выберем Обычный текст (*.txt). Помнишь, перед началом HTML-разметки мы сохраняли наш файл под именем «ochen_intereshaja_istorija.doc»? Сейчас это имя предложено нам по умолчанию, но уже с расширением .txt, естественно. Пару слов относительно имени файла. Если ты уже бывал на страницах «Самиздата», то замечал, наверное, что названия произведений сгруппированы по какому-то признаку. По какому? Отвечаю: по имени файла, указанного в соответствующей ячейке формы публикуемого произведения. Заметь: не по названию произведения, а, именно, по имени файла. Причём имя это задаётся, как водится, латинскими символами. В принципе, никто не мешает при заполнении упомянутой формы присвоить файлу размещаемого текста любое произвольное имя. Но кому нужна лишняя головная боль — запоминать (на всякий случай!) ещё и это? Поэтому рекомендую решить вопрос об имени файла как раз на той стадии, на которой мы остановились при сохранении его в текстовом формате. А здесь необходимо иметь ввиду следующее: Во-первых, при сохранении на «Самиздате» все заглавные буквы будут конвертированы в строчные, а пробелы в имени будут заменены символами подчёркивания. Так что, на мой взгляд, имеет смысл учесть это сразу, при именовании.
«moja_kniga_chast_02», «moja_kniga_chast_05», «moja_kniga_chast_10»... Стало быть, определившись с именем файла и занеся его в соответствующую строку диалога, жмём кнопулечку Сохранить, и ...получаем диалог Преобразование файла. Вот тут умничать особо не надо, всё оставляем на своих местах, убедившись на всякий случай, что в разделе Кодировка текста: у нас включена радиокнопка Windows (по умолчанию) — именно с такой кодировкой наш файл пойдёт по жизни дальше. Заодно можно глянуть в окошко Образец:. Дело в том, что при создании файла в «вордовском» формате .doc в него мог попасть какой-нибудь символ, для которого в текстовом формате аналог отсутствует (я, например, для создания твёрдой копии указываю ударные гласные, используя латинские символы с диакритическими знаками, а текстовый формат их не знает). Если программа такой символ обнаружит, она покажет его в контексте, тактично подсветив красным. Тогда можно либо, отменив сохранение, найти этому символу подходящую замену, либо продолжить сохранение, но тогда взамен неизвестного символа «Word» логично втюхает пробел. Проверил? Жми кнопку ОК.Тут «Word» может или тихо-мирно сохранить файл, или продолжить назойливо в 157-й раз предупреждать, что некие нюансы могут быть утеряны при сохранении файла в текстовом формате. Ласково посылаем его, соглашаясь на все угрозы.
Наконец-то. Готово!
Теперь, не закрывая «Word»8, к которому мы будем регулярно возвращаться ещё много-много раз, открываем майкрософтовский «виндузовый» «Проводник» на той папке, где мы только что сохранили наш текстовый файл. Кстати, могу порекомендовать: для каждого из своих произведений создавать отдельную подпапку в одной здоровенной, с именем, типа, «Мой Самиздат». Папкам произведений давать обычные русскоязычные имена, совпадающие с именами хранимых в них работ. То есть наш файл, скорее всего, окажется в папке «Очень интересная история». Разуемеется, всё сказанное не выходит за рамки обычной рекомендации и ни коим образом не влияет на наши дальнейшие действия. А действия вот какие. Мы видим, что теперь в папке два файла с похожими именами: «ochen_intereshaja_istorija.doc» и «ochen_intereshaja_istorija.txt». «Доковский» файл оставляем для истории или смело пускаем под нож — он нам больше не нужен! Наведя фокус, то есть планку, на вновь образованный текстовый файл «ochen_intereshaja_istorija.txt», нажимаем правую кнопку мыши, которая, как известно, вызывает контекстное меню. Выбираем в меню пункт Копировать, а теперь опять же правой кнопкой щёлкаем где-нибудь в свободном пространстве окна, получая при этом новое контекстное меню, из которого выбираем пункт Вставить. Оп-па! У нас в папке появился ещё один файл — с именем «ochen_intereshaja_istorija - копия.txt». Это действительно точная копия исходного текстового файла, которую мы сейчас попытаемся загнать в наш браузер. Далее, наводим фокус на файл-копию и, либо вызываем правой кнопкой мыши контекстное меню, либо нажимаем на клавиатуре клавишу <F2> с тем, чтобы копию переименовать. Аккуратненько убираем кусочек имени « - копия», удаляем расширение «txt» и указываем вместо него расширение «html», после чего с чувством выполненного долга ударяем клавишу <Enter>. Таким образом теперь в папке наряду с файлом «ochen_intereshaja_istorija.txt» присутствует файл «ochen_intereshaja_istorija.html». Это именно то, что и нужно нашему браузеру!
Несколько слов о программках, которые (по большому счёту!) нам нужны. Ну про «Word» и говорить не будем — мы с ним по жизни связаны. То же самое касается и майкрософтовского «Проводника». Программа-браузер. Таких программ множество — какой-то из них пользуешься и ты, просматривая интернетовские страницы. О достоинствах и недостатках каждого из браузеров можно спорить длинными ночами напролёт: скажем, Артёму Белоглазову «Opera» не нравится, а я предпочитаю именно её. Но не будем здесь устраивать дискуссии, не суть важно, в конце концов. Однако, при подготовке текста к «СИ» я пользуюсь ещё и стандартным майкрософтовским браузером «Internet Explorer», «IE». Дело в том, что, как об этом уже говорилось, разные браузеры по-разному толкуют некоторые нюансы HTML-кодировок. В результате разница изображения на экране одного и того же html-файла в различных браузерах может быть весьма существенной. В частности, например, «IE» в качестве стандартного использует шрифт меньшего размера, чем «Opera». В результате один и тот же текст в «IE» займёт меньшее количество строк, чем в «Opera». Казалось бы, какая разница! Да никакой, пока дело не доходит, к примеру, до раскладки иллюстраций, которые оба браузера выводят практически в одинаковых размерах. И, разложив красиво картинки в «Opera», в «IE» вдруг обнаруживаешь полный бардак, когда картинки разъезжаются по тексту, как им надумается, да и сам текст начинает обтекать их самым непристойным образом. И таких нюансов — масса! Мне-то по барабану: я свой текст в «Opera» подготовил, в «Opera» и посмотрел. А что скажет обо мне несчастный пользователь «IE», которых в России да и за её пределами хватает? Кстати, нюанс с «расползанием» картинок или таблиц приходится иметь ввиду и в связи с пропорциями окна экрана: красивый монтаж на экране пропорций 4 : 3 может быть совсем не так красив на «широком» экране с соотношением сторон 1,6. У меня, к счастью, именно «широкий» экран, и смоделировать ситуацию для экрана «обычного» труда не составляет, изменив пропорции окна браузера. А вот учитывать более мелкие шрифты других браузеров приходится. Поэтому наряду с любимой «Opera» я просматриваю макетируемые файлы, в первую очередь, именно в «IE». Хотя, как и прочие, эта рекомендация — не догма. Кроме того, если я надумаю размещать в тексте иллюстрации (а без них о какой красоте говорить можно?!), то мне потребуются какой-нибудь графический редактор (я пользую старый добрый «Corel Photo-paint» и стандартный майкрософтовский «Paint»), а также программа-смотрелка (у меня стоит «ACDSee»). Вот так и летаю от окна к окну...
Собственно, и всё, хотя, повторюсь, что и выбор программ — личное дело каждого.
Итак, в «Проводнике» у нас появился файл «ochen_intereshaja_istorija.html». Щёлкнем по нему дважды — запускается указанная по умолчанию программа-браузер, и в её окне появляется наш текст. Выглядит он почти точно так же, как и будет смотреться потом на полях «СИ». Отсутствует только серебристая подложка текста и те, чисто «самиздатовские» «бублики», которые мы обычно видим в верхней части любого опубликованного в «СИ» произведения. Ну и как первое впечатление? А ты знаешь, неплохо получилось! Абзацы выделены, «красные» строки — вот они, шрифтовые выделения оттеняют нужные места текста... И главное! — не видно никаких тэгов и мнемокодов, которые так намозолили глаза в «Word». Текст абсолютно читабелен, и теперь в нём легко обнаружить ошибки, пропущенные нами при вычитке. Пробегаем текст беглым взором. О! Надо же, «-жи» написал через букву «-ы»... Что ж, и на старушку бывает прорушка, как утверждал классик устами польской красавицы Инги Зайонц. А мы тут же переходим в окно «Word», где у нас всё ещё открыт текстовый файл-исходник, находим нужное место (дай бог здоровья тому, кто разбил текст на абзацы!) и вносим необходимое исправление, стараясь не поуродовать при этом существующие тэги и коды. Не забываем сохранить исправленный текст и вовращаемся в браузер. Читаем дальше... Что за ерунда! — с какого-то места начиная, весь дальнейший текст до конца оформлен наклонным курсивом. Понятно. Возвращаемся в «Word», находим соответствующее место с открывающим тэгом <i> и ищем место, где курсив должен закончиться. Стоит ли здесь закрывающий тэг </i>? Стоять-то он стоит, да вот только, по запарке видимо, слэш в нём отсутствует. А поскольку шрифтовые тэги исключительно парные, то все последующие закрывающие тэги рассматриваются только в пределах своих пар, а наш открывающий так и действует до конца текста. Ставим слэш на место, сохраняем файл. Возвращаемся в браузер. О! А в нём ничего не изменилось... Ну да, а как иначе? — мы же исправили только текстовый файл, а html-файл остался без изменения. Идём в «Проводник» и, для начала, убиваем устаревший к данному моменту файл «ochen_intereshaja_istorija.html». Теперь повторяем знакомую нам уже операцию по копированию-переименованию текстового файла, чтобы получить новую исправленную версию «ochen_intereshaja_istorija.html». Возвращаемся в браузер. А в нём всё ещё по-старому... Логично! — он же не знает, что мы уже внесли исправления в текст, и показывает нам старую картинку. Чтобы исправить положение, либо нажимаем клавишу <F5>, либо жмём на панели инструментов кнопулечку с круглой такой стрелкой — Обновить. Вот теперь кэш-память программы обновилась, и мы увидели все внесённые нами изменения.
Хорошо, очевидных ляпов больше не наблюдается, можно продолжить работу по оформлению текста.
Эта процедура хорошо известна по «Word». Любой из нас не однажды пользовался кнопками на главной панели инструментов, при помощи которых можно было выравнять текст по левому или правому краю, по центру или ширине строки. Поэтому вряд ли нас удивит, что и HTML предоставляет аналогичные возможности. Естественно, при помощи тэгов, а именно, пары <div> ... </div>. То есть, тэг <div> является парным и, естественно, пара эта действует на всём протяжении от открывающего до закрывающего тэга. Позвольте! — скажешь ты. — Но коли есть четыре типа выравнивания, то и типов тэга для этих целей должно было бы быть где-то столько же... Хорошее замечание! Тем не менее, тэг выравнивания один, ну или, если угодно, их пара. А для конкретного типа выравнивания у этого тэга существует так называемый параметр. Ниже мы ещё увидим, что тэгов с параметрами достаточно много, причём параметров таких в одном тэге может применяться несколько. Так вот для тэга <div> таким параметром является служебное слово align, что в переводе с английского означает, как ни странно, глагол «выравнять». Логично предположить, что тэг <div> ждёт от нас указаний на предмет того, как же ему необходимо выравнять последующий текст. Что ж, подскажем ему на чистом английском языке: выравнять по левому краю — align="left", выравнять по правому краю — align="right", выравнять по центру — align="center", выравнять по ширине — align="justify". Как видим, значение параметров указывается в прямых кавычках, и это необходимо принять как данность, поскольку с параметрами нам придётся работать о-очень много. Кроме сказанного нужно отметить, что тэг <div> с любым значением параметра разрывает и переносит строку ниже, уподобливаясь в этом плане тэгу <br>, о котором мы говорили ранее. По странной прихоти создателей HTML, тэг центрирования текста <div align="center"> можно упростить до безобразия, заменив его тэгом <center>. Естественно, парным. Естественно, с закрывающим тэгом </center>. И сработает он точно таким же образом, как и тэг <div align="center">. Однако для других типов выравнивания подобная вольность исключена. А если указать тэг <div> без параметра? Ничего страшного, можно и так. В этом случае следующий за ним текст перенесётся на новую строку и будет выравнен по левому краю — до тех пор, пока не наткнётся на закрывающий или следующий выравнивающий тэг с каким-либо другим типом центрирования.
Вообще же хочу предупредить: с парностью выравнивающих тэгов надо бы поаккуратнее обходиться. Иначе можно на такой винегрет из всякого рода типов выравнивания нарваться, что долго в нём ковыряться придётся. Поэтому надо бы взять за правило: прежде чем поставить новый тэг выравнивания, следует установить закрывающий предыдущее выравнивание тэг </div>.
Работая в «Word», мы привыкли, что текст на странице со всех сторон ограничен полями. Да и в книжке строчки не от края до края тянутся. А у нас на экране строки буквально вонзаются в пластиковую рамку. Это не есть хорошо! Для борьбы с этим имеется пара: <blockquote> ... </blockquote>. Вообще говоря, слово «quote» переводится в данном случае как «цитата». И тэг предназначен, в первую очередь, для выделения в тексте длинных цитат. А как он их выделяет? Очень просто: отступает со всех сторон от краёв текста — ну точно, как «Word» ограничивает текст полями. Вот и получается, что если мы поставим открывающий тэг <blockquote> в начале текста, а закрывающий </blockquote> — в конце, то текст «подожмётся» слева и справа относительно рамок экрана на некоторую величину, а перед и после ограниченного тэгами фрагмента будет организован абзацный отступ в одну строку. Тем самым при использовании пары <blockquote> ... </blockquote> «экономятся» два тэга разрыва строки <br> — перед квотируемым фрагментом и за ним. Тэг <blockquote> допускает многократное применение. То есть, два установленных подряд <blockquote><blockquote> образуют поля справа и слева в два раза шире, чем одиночный тэг (при этом мы, разумеется, помним, что для каждого из открывающих тэгов требуется свой закрывающий). Если же тэг <blockquote> будет установлен где-то в середине текста, то последующий текст до самого закрывающего тэга «подожмётся» относительно текста предшествующего. Собственно, именно этот способ и применяется для выделения длинных цитат. В дальнейших рассуждениях, пространство для текста, ограниченное с обеих сторон пустыми полями (а при их отсутствии — рамками окна браузера), договоримся называть текстовым полем. Подводя итог, скажу, к примеру, что поначалу и я все свои тексты ограничивал с первого слова до последнего двумя парами тэгов <blockquote> и </blockquote>, закрыв глаза на то, что в «Opera» почему-то правое поле получалось заметно уже левого (в «IE» такого не наблюдалось). Но однажды оказалось, что таблицы, помещённые внутрь пары <blockquote> ... </blockquote>, в свою очередь размещённой внутри табличной ячейки, ведут себя м-м-м... неадекватно моим ожиданиям. Причём на этот раз именно в «IE». Проблема носила столь принципиальный характер, что с тех пор формировать правое и левое поле текста я начал иным способом. Каким? Скажу, когда доберёмся до таблиц.
Но для сравнительно простых текстов, думаю, «отбивка» полей при помощи тэга <blockquote> даёт вполне удовлетворительный результат.
Под заголовками мы будем понимать любой текст, выделяемый из общего текстового массива и получивший для этого собственную строку. Ну, например. Создатели «СИ» уже позаботились о том, чтобы любое произведение не осталось без названия и указания автора. В верхней части экрана без особого нашего участия будет указано и то, и другое. Но как-то так, вяло... Кроме того, «оформленные» подобным образом тексты выглядят словно инкубаторские цыплята, без отражения какой-либо индивидуальности писавшего. А какому автору чужда хоть маленькая толика тщеславия?! Почему бы слегка не польстить себе, любимому? Взгляните на обложку книги — картинки на ней может и не быть, а имя автора и название произведения — обязательно! Причём шрифтом гораздо более крупным, чем текст, содержащийся внутри. А может даже, с позолотой... Ну, о «позолоте» мы позже поговорим. А пока о том, как нам выделить имя автора и название произведения. Понятно, что хозяйничать на своей территории «СИ» нам не позволит. Остаётся ваять там, где разрешается, то есть в нашем тексте. Ну-ка, напиши в самой первой строке9 исходника своё имя и фамилию. Да не стесняйся сверх меры: имя пиши, как обычно, строчными буквами (ну, за исключением первой, ясное дело), а фамилию — заглавными — от начала до конца. Есть? Есть. Теперь в следующей строке пиши название своего опуса. Лучше, конечно, так же, как и фамилию, — заглавными буквами. Что, длинное название? Раздели на две строчки. Не забыл, как? — тэгом <br>. Обзовём всё это «заголовками» и примемся за их оформление.
Перед названием произведения поставим тэг <H1>, а после его последней буквы — в следующей строке — закрывающий тэг </H1>. На картинке рядом можно увидеть, как примерно выглядит твой исходник в данный момент. Если сейчас в «Word» выполнить команду Сохранить, заткнув кнопкой Да назойливое напоминание редактора о предполагаемой потере «некоторых свойств документа», а затем в «Проводнике» повторить процедуры удаления10, копирования, вставки и переименования файлов, о которых мы говорили выше, то, обновив кэш браузера, мы сможем увидеть первые серьёзные результаты нашего титанического труда. В принципе, с такими результатами не стыдно уже и на людях показаться. Но мы торопиться не будем, а вернёмся к нашим заголовкам. Итак, мы увидели результат работы тэга <Hn> с соответствующей цифирькой вместо n. Кстати, а что она означает? Да ничего особенного. Условно можно считать, что это номер уровня («важности») заголовка или раздела, который этот заголовок озаглавливает. Чем меньше номер, тем заголовок «важнее», что видно по увеличению размера его шрифта: заголовок 1-го уровня имеет самый крупный шрифт, 6-го — самый мелкий, 7-го уровня уже не бывает. Для справки заметим, что относительный размер шрифта заголовков 5-го и 6-го уровней мельче, чем размер «основного» шрифта, которым в браузере по умолчанию выводится «основной» текст произведения; шрифт остальных уровней — крупнее. Таким образом, сопоставив название произведения с заголовком 1-го уровня, мы должны понимать, что крупнее заголовка уже не получим. А жаль... Кроме того, как легко убедиться:
Ну и последнее. Как утверждает Артём Белоглазов, поисковые системы интернета зачастую ориентируются на тэг <Hn>, из чего можно сделать вывод, что, используя этот тэг, ты скорее окажешься в списках интернетовских поисковиков, чем без него. Правда, из этого не следует, что именно твоя работа завоюет одну из первых строк гугловских или яндексовых списков, а оказаться на пятимиллионной позиции, согласись, немногим лучше, чем на двадцатимиллионной.
И уж коль скоро речь пошла о структуризации исходного текста, было бы не лишним упомянуть о возможности написания в нём комментариев, которые браузер вроде бы как и не замечает, зато мы их читаем и с их помощью прекрасно ориентируемся в мешанине из тэгов, кодов и собственно текста. Здесь всё очень просто. Для комментария используется конструкция вида <!-- Текст комментария -->. Всё, что будет написано вместо слов «Текст комментария», браузер как бы не заметит.
Теперь для собственного удобства мы можем в исходном тексте перед соответствующими заголовками оставлять пометы: <!-- Имя автора --> или <!-- Название произведения -->, а перед основным текстом сделать предупреждение: <!-- Собственно текст -->. Очень удобно!
Не будем удаляться от заголовков далеко. Вот есть вопрос: а нельзя ли их как-то разнообразить? Скажем, гарнитуру поменять или цвет символов? Вообще говоря, можно, хотя это и не имеет непосредственного отношения к тэгу <Hn>, у которого, как мы говорили, только один параметр — align, то есть, выравнивание.
Параметры тэга, соответственно, описывают: fаce11 — гарнитуру, size — размер, color — цвет. Причём в одном открывющем тэге можно одновременно указать все три параметра. В закрывающем тэге, понятное дело, указывать параметры не требуется. Но прежде чем перейти к дальнейшему изложению, хочу дать совет: будь скромным! Тэг <font> предоставляет широчайшие возможности по применению шрифтов, однако не следует превращать свою работу в пёстрое подобие «петуха гамбургского», разумно ограничивая свои амбиции. И чтобы не сносило у тебя башню от всевозможных комбинаций параметров, я, в качестве примеров, приведу лишь небольшую их толику. Кроме того следует предупредить, что конвертор «СИ» не всемогущ и некоторые комбинации интерпретирует по-своему, не давая сверх меры разгуляться неудержимому полёту авторской фантазии. По моему ощущению, для качественного оформления любой работы вполне достаточно двух-трёх гарнитур и примерно стольких же различных цветов. Итак, скорее всего, в твоём браузере установленным по умолчанию шрифтом является Times New Roman. Соответственно, и основной текст твоего произведения выводится на экран именно этой гарнитурой. В качестве альтернативы могу предложить тебе гарнитуру Arial. Давай в нашем примере попробуем написать заголовки именно этим шрифтом (см. рисунок). (Надеюсь, мне уже не надо повторять, что, для того, чтобы вывести исправленный текст на экран, необходимо сохранить его в «Word», выйти в «Проводник», удалить старый html-файл, скопировать и вставить копию текстового файла-исходника, переименовать её, удалив из названия « - копия» и заменив расширение с «.txt» на «.html», после чего обновить кэш браузера?) Вот! Теперь наши заголовки написаны гарнитурой Arial, а все остальные их параметры заданы тэгами <Hn>. Причём, как мы можим видеть, открывающий тэг <font> находится в зоне действия тэга <H3>, а закрывающий </font> — в зоне действия <H1>. В принципе, во многих случаях (но не во всех!) такое «перекрещивание» зон действия тэгов вполне допустимо. Однако на первых порах (а может, и навсегда) рекомендую более чётко структурировать исходный текст, соблюдая уровни вложенности тэгов. Как минимум, это улучшит читабельность исходного текста и понимание логики его действия. То есть, по-моему, в нашем случае было бы удобнее написать так, как это показано на следующем рисунке. Не нравится Arial? Укажи в качестве значения параметра гарнитуру Tahoma или Verdana (об остальных, как договаривались, я и упоминать не буду). Кстати говоря, если ты помнишь, я призывал значения параметров всегда указывать в кавычках. Теперь же вынужден отметить, что в «СИ» параметр fаce указывается без оных. Так и только так, ибо по-другому «СИ» твоё указание относительно применяемой гарнитуры вообще проигнорирует! Будем считать, что это незадокументированная особенность конвертора «Самиздата». Перейдём к размерам шрифта — параметру size. Отметим для начала, что цифры, определяющие этот параметр носят вполне условный характер — это не пункты и не пиксели. Поэтому «танцевать» мы будем от базового размера, который равен «3». Остальные допустимые размеры изменяются от «1» до «7». Здесь, в отличие от тэга <Hn>, чем меньше цифра, тем мельче шрифт. Таким образом, чтобы выделить текст более крупным, по сравнению с остальным текстом, шрифтом, мы можем указать, к примеру, <font size="4">. Однако есть ещё один способ указания размера — относительно базового. В этом случае цифра со знаком «плюс» или «минус» показывает, на сколько размеров описываемый шрифт будет, соответственно, крупнее или мельче базового, который в этом случае соответствует тэгу <font size="+0"> или <font size="-0">. Отсюда следует, что шрифт, описанный тэгом <font size="+4"> будет по размеру полностью соответствовать шрифту <font size="7">. Каких-либо преимуществ или недостатков того или иного метода описания размера шрифта по сравнению с другим я не заметил. О таких тэгах (не параметрах!) изменения размера шрифта как <small> и <big> я говорить не буду — в «СИ» я ими не пользуюсь. А вот о тэгах <sup> и <sub> всё же упомяну. Эти тэги описывают соответственно шрифты в верхнем и нижнем индексах. Без первого трудно указать, например, номер сноски (о которых разговор ещё впереди) или указать в качестве единиц измерения квадратные метры — м2, без второго не написать нормально формулу серной кислоты — H2SO4. Согласись, так она выглядит гораздо приличнее, чем без применения нижнего индекса: H2SO4. Так вот, для написания первого я изобразил в исходнике такую конструкцию: м<sup>2</sup>, для второго — H<sub>2</sub>SO<sub>4</sub>.
Вот и давай посмотрим, как бы твой заголовок выглядел в моём варианте исходника (пока без рамки, окружающей текст произведения). Увидел? Очевидно, что и для имени автора, и для названия произведения указан один и тот же цвет, только разными способами задания параметра color. Кроме того, как можно заметить, сейчас фамилия автора выравнена по правому краю и выполнена курсивом, а название произведения выравнено по центру.
На мой взгляд, в целом, этого уже и достаточно для достойного оформления заголовка произведения.
Для начала попробуем уточнить, чем различаются эти два понятия. Обычно в книгах всё, что не вмещается в канву непосредственного изложения: толкования малознакомых читателю слов и терминов, перевод с иностранного языка, какие-то дополнительные комментарии и замечания — перемещается автором в сноски. Они не затеняют основной контекст, не отвлекают читателя от фабулы произведения, а буде появится необходимость, добраться до них легко — чуть скосив взгляд в «подвал» страницы. Есть и другой способ: когда сноски располагаются в конце книги. На мой взгляд, это мение удобно, поскольку заставляет лишний раз шелестеть страницами, разыскивая сноску, а затем возвращаться к основному тексту. Можно, конечно, и третий способ применить, размещая все толкования в непосредственной близости к источнику неопределённости, но это вообще уже ни в какие рамки не лезет. Во избежание путаницы, сноски имеют нумерацию, как правило, обозначенную арабскими цифрами. Маленькая цифирька, выполненная как раз в «верхнем индексе», о котором мы недавно говорили, соответствует такому же значку, установленному непосредственно рядом с текстом сноски. Впрочем, всё это уже хорошо нам известно, благодаря тесному сотрудничеству с «Word». Несколько иная задача у ссылок. В книгах мы встречаемся с ними, чаще всего, открывая список литературы, использованной автором. Возникли сомнения в точности цитаты — берёшь из списка ссылку на первоисточник, лезешь на полку или идёшь в библиотеку, находишь нужную книгу и перепроверяешь. Если в том есть необходимость, конечно. Такие ссылки называются внешними, поскольку находятся вне основного произведения. Но бывают ссылки и внутренние, когда автор отсылает к тем или иным сведениям, размещённым в той же работе. Зачастую ссылка помещается в сноску — это важный для нас момент. Если ты помнишь, начиная нашу работу по подготовке набранного в «Word» текста к размещению в «СИ», мы преобразовали все имеющиеся сноски в концевые, а затем и вовсе переместили их в зону текста. Казалось бы, есть противоречие с тем, о чём я только что говорил: в книгах удобнее пользоваться сносками, размещёнными в конце соответствующих страниц, а не всего текста. Да нет здесь никакого противоречия: в «СИ», как правило, текст произведения располагается на одной странице, не зависимо от его длины, и именно в конце этой страницы мы и будем размещать наши сноски. Что же касается скорости доступа из текста к сноскам и обратного возвращения, смею заверить, проблем, подобных бумажной книге, у нас не возникнет. Итак, сноска. Начинается она с того, что в книге автор метит соответствующее место, к которому читатель сможет легко вернуться после ознакомления со сносочным текстом. Представь себе, в HTML всё делается точно так же. Для обозначения «точки возврата» мы используем парный тэг <a name="имя_метки"></a>12. Такая конструкция в HTML называется «якорем». Что указать в качестве имени метки? Любой произвольный набор символов. Важно только, чтобы он был для нашего документа уникальным. Как правило, после этих слов будущий участник «СИ» задумывается: а по какому именно признаку формировать этот набор? Скажу, как поступаю я. Мы ведь должны в определённой ситуации вернуться к нашей сноске-метке, что по-английски (а это, как ни крути, но это основной язык в программировании) будет выражено словом «back». Кроме того, у сноски должен быть свой номер. Вот и получается, что «якоря» на местах перехода к сноскам выглядят вполне однообразно, но понятно, при этом не вызывая путаницы: <a name="back_1"></a>, <a name="back_2"></a> и так далее. Заметим, что на этом этапе внесённые в наш текст «якоря» в браузере ни коим образом внешне не проявляются; всё происходит, так сказать, за кулисами. Далее. Обратившись к сноске, мы желаем оказаться у её текста, перенестись к нему. Таким образом, можно предположить, что рядом с тестом метки (точнее, ровно перед ним) должен быть установлен свой «якорь». Именно так! И у этого якоря должно быть своё уникальное имя. Если угодно, определи его как «snoska_n». Тогда в самом конце нашего произведения перед текстом первой сноски (который мы, помнишь? сохранили) появится парный тэг <a name="snoska_1"></a>, перед второй — <a name="snoska_2"></a> и так далее. Теперь мы должны обеспечить собственно перемещение от номера сноски к её тексту и обратно. Да и сам номер у нас пока отсутствует. Эту двуединую задачу реализует парный тэг <a href="#имя_метки">какой-то текст</a>. Здесь под «именем_метки» подразумевается имя того «якоря», к которому мы собираемся переместиться (заметь, что перед именем метки в этом тэге устанавливается символ «решётки». Не забывай о нём!). А в качестве «какого-то текста» выступает любое сочетание символов, которое будет срабатывать наподобие кнопки «Переместиться!», и, кроме того, будет по умолчанию выделено синим13 шрифтом (таким шрифтом выделяются так называемые гиперссылки). То есть, логично предположить, что на месте, где подразумевается быть номеру первой сноски — сразу за «якорем», мы установим пару <a href="#snoska_1">1</a>, что означает: «щёлкнув по цифре "1", хочу переместиться к тексту первой сноски, "заякорённому" под именем "snoska_1"». Так? Почти. Конструкция абсолютно работоспособна и выполнит всё, как указано. Однако, мы же помним, что номера сносок указываются в верхнем индексе. И кроме того, не каждый читатель знает, что произойдёт, если он щёлкнет по синей надписи на экране. Хорошо бы ему подсказать. Ну, как организовать верхний индекс, мы, предположим, знаем. А для подсказки у тега <a href> существует параметр title. Присвоив ему в качестве значения какой-нибудь короткий поясняющий текст (не забыть поместить значение параметра, то есть текст, в прямые скобки!), мы получим его в качестве всплывающей подсказки, которая появится при наведении указателя мыши на синенькие буквовки.
К сказанному добавлю небольшое замечание относительно оформления сносок. Номер сноски должен стоять перед запятой или точкой, но после восклицательного или вопросительного знака. Номер сноски от предшествующего символа не отделяется. А вот текст сноски (в «подвале») от её номера как раз-таки отделяется одним пробелом. Теперь о ссылках. Внутренние ссылки мы увидим позже на примере создания оглавления. Пока же рассмотрим ссылки внешние14. Принцип их организации тот же что и у сносок — при помощи тэгов <a href="url_ссылки">Текст</a>. Что такое «url_ссылки»? Ни что иное, как интернет-адрес того ресурса, на который ты ссылаешься. Получить его совершенно легко: тем или иным способом заходишь в браузере на соответствующий ресурс, переходишь в адресную строку браузера, выделяешь её от начала до конца и жмешь <Ctrl C>, копируя адрес в буфер. Затем возвращаешься в исходник и в нужном месте тэга вставляешь скопированный адрес при помощи <Ctrl V>. Обрати внимание: во-первых, в тэге URL, как и имя метки, указывается в прямых кавычках и, во-вторых, начинается он с сочетания «http://», никаких «www» в нём нет! Что касается загадочной вставки Текст, так здесь может быть написано всё, что угодно; в браузере этот текст будет выделен синим цветом, и щелчок мышью в любом его месте отправит тебя в путешествие по интернету (точнее, в ту его часть, в которую адресует URL). Однако чаще всего здесь пишется наименование ресурса. Ну, к примеру, ссылаешься ты на некую статью из периодической интернет-прессы. Сам по себе URL название этой статьи содержит вряд ли. Так вот именно это название и можно указать между тэгами <a href> и </a>. Кроме того, хорошим тоном считается указывать имя автора статьи и название интернет-издания. Первое пишут курсивом до ссылки, второе — через точку — после неё и основным шрифтом. Таким образом, если ты вдруг надумаешь сослаться на не раз упомянутую здесь работу Артёма Белоглазова, то в исходнике текст ссылки, указанной в твоей сноске номер 2 будет выглядеть примерно так: <a name="snoska_2"></a> <a href="#back_2" title="Назад"><sup>2</sup></a> <i>Белоглазов Артём</i>, <a href="/i/info/htmlisi.shtml" title="Читать" target="_blank">HTML и Самиздат</a>. — «Самиздат» Не забыл? snoska_2 — «якорь» текста ссылки в «подвале» примечаний, back_2 — «якорь» номера ссылки в текстовом массиве, — — код длинного тире, « — левая угловая кавычка, » — правая угловая кавычка; перед именем автора стоит пробел, отделяющий его от номера ссылки, указанного в верхнем индексе.
Но помимо этого в конструкции мы обнаружили ещё два параметра: title и target. Параметры, понятное дело, опциональные, хотим — ставим, не хотим — не ставим. Причём с параметром title мы уже знакомы — это всплывающая подсказка. Параметр target определяет, будет ссылка открываться в новом окне или том же, откуда вызывается ресурс. Так вот значение "_blank" соответствует открытию нового окна. А в текущем окне ссылка откроется при значении target="_self". Принципиальной разницы я не вижу. Кстати, значение target="_self" принято по умолчанию, то есть, когда параметр target не указан вовсе.
По моему глубокому убеждению, книжка без картинок — лишь наполовину книжка. Попробуй, скажем, написать статью по географии, не показав карту. До сих пор помню стоявшее на моей детской книжной полке богатейшее издание Майн Рида, в котором каждый роман начинался с карты места действия. А труд по истории без иллюстраций, соответствующих описываемому периоду? Сухая констатация дат и фактов, не более. Без ощущения аромата времени.
Нет, ребята, иллюстрации нужны в любом произведении, чего бы оно не Например, какого размера иллюстрации использовать? Если мы пройдём по десятку-другому наиболее популярных сайтов, то сможем убедиться, что обычно большая сторона иллюстраций, вставляемых непосредственно в текст, колеблется в пределах 300—500 пикселей. Взять мельче — а что там различишь? Взять крупнее? Не так всё просто. Во-первых, иллюстрация должна соизмеряться с содержанием и размером текста. Не здорово ведь: хочешь список известных деятелей через запятую привести, да чтобы с портретами. Упомянул писателя Пупкина, портрет рядом повесил — на пол-экрана. В списке уже давно и Рыбкин, и Стелькин прошли, уже Яблоков-Ньютонов близится, а слева всё ещё пупкинская физиономия тянется... Куда остальных лепить будем? Во-вторых. Размер иллюстрации и её качество напрямую влияют на объём файла, ту иллюстрацию содержащего. Бог с ним, что тебе своего дискового пространства не жалко. Так ведь понимать надо, что на «Самиздате» сервер не резиновый, и забивать его фотографиями тех же писателей в натуральную величину — не лучшее дело. Помимо этого, иллюстрации большого объёма («веса») долго грузятся в браузер, а ведь далеко не у всех читателей скорость интернета позволяет 3-D фильмы свободно смотреть. Уважай читателя, в который раз повторяю! Поэтому, наверное, и bmp-файлы широкого распространения в интернете не получили. Всё ограничивается типами jpg (jpeg) и gif, да вот png в последнее время появляться начал. Поэтому, говорю, начинай танцевать от объёма файла картинки: 30—50 килобайт — нормально, до 100 КВ — приемлемо, до 150 — в порядке исключения, больше — скандал. (Я тут на днях на каком-то «книжкином» сайте фотографию обложки книги в аннотации обнаружил — три с половиной «мегатонны». От моих слов тому автору, наверное, до сих пор икается.) Вот и крутись — не как сможешь, а как положено! Скажем, я после редактирования графического jpg-файла в «Corel Photo-paint» (с сохранением при обычном, приемлемом коэффициенте сжатия) еще переконвертирую его в тот же формат при помощи «ACDSee». Без заметного изменения качества картинки объём уменьшается ещё процентов на тридцать-сорок. Мистика! Но факт. Исходя из этого, обычный размер большей стороны моих иллюстраций составляет 400 пикселей. Вот только в этой статье приходится делать 500 по горизонтали, а по вертикали — сколько получится, чтобы скрин-шоты читались. Каким образом размещаются иллюстрации в «СИ» мы с тобой позже обсудим, а вот как их по тексту распихать — этим сейчас и займёмся. Сначала отберём из своих запасников нужные картинки и с помощью любого графического редактора приведём их к нужному размеру и объёму, как о том говорилось чуть выше (если иное не продиктовано какими-либо особыми соображениями). Затем решим не последний вопрос об именовании файлов иллюстраций. В общем, мы можем, конечно, задавать им любые имена. Но и здесь существуют некоторые особенности. Во-первых, при сохранении файлов в «СИ» (а именно там и станут храниться рисунки), все заглавные буквы в именах файлов будут заменены на строчные, а пробелы — на символы подчёркивания. Таким образом, обратившись из исходника к файлу по имени, под которым он существует на твоём компьютере, рискуешь в браузере вместо изображения получить пустую рамочку. Кроме того, что-то зависит и от конкретного места размещения файла на сервере (проще говоря, конкретной папки). Поэтому прислушайся к простым рекомендациям. Во-первых, предвосхищая действия конвертора, имена файлов, предназначенных для «СИ», задавай всегда строчными латинскими буквами, цифрами и символами подчёркивания вместо пробелов. Во-вторых, не изобретай велосипеда: для имени возьми по мнемоническому принципу несколько букв от названия произведения и добавь к ним две-три цифры (с ведущими нулями), соответствующими порядку размещения иллюстраций в тексте. Например, для данной работы я подготовил файлы с именами: si01.jpg, si02.jpg и так далее. Почему я поступил именно так, станет понятно позже. Теперь можно и размещать. Для вставки картинок существует тэг <img> (наконец-то не парный, то есть для него закрывающего тэга не существует). Этот тэг обладает массой параметров и их значений, но я приведу только те, которыми пользуюсь сам, а именно:
src — указывает на название и место хранения файла картинки, строго говоря, её URL. Естественно, пишется в прямых кавычках. Для проверки работоспособности устанавливаемых нами тэгов title — всплывающая подсказка, появляющаяся при наведении курсора на рисунок. Своеобразная «подпись на фотографии». Ведь сделать «подпись под фотографией» при помощи тэга <img> не удастся, а рисунок без всякого комментария выглядит не лучшим образом. При этом, предупреждаю, абсолютно неожиданно выявилась ещё одна особенность «СИ»: в каких-то (я даже не смог уловить, в каких именно) ситуациях из прописанных мною подсказок-подписей вдруг непостижимым образом стали исчезать пробелы, «склеивая» отдельные слова подписи в монолитную текстовую строку. Впрочем, горевал я по этому поводу недолго, начав вместо пробелов, устанавливаемых соответствующей клавишей, указывать неразрывные пробелы — вот они-то даже «СИ» не по зубам оказались. Но, уже выкладывая эту работу на сайт, столкнулся с новой «фишкой»: не пожелала отображаться одна из иллюстраций, которая вне «Самиздата» (или, как говорят, на локальном хосте) воспроизводилась в статье прекрасно. После многочисленных попыток исправить положение я в отчаяньи удалил из параметров alt и title тэга <img> «заколдованной» картинки слово, заключённое в круглые скобки (вместе со скобками, естественно). Представь, всё заработало нормальным образом...; alt — текст, на месте предполагаемого рисунка, если тот по каким-то причинам отсутствует: не загрузился, или в браузере отключён показ картинок. Текст этого параметра подскажет читателю, что автор намеревался показать на образовавшемся на экране пустом месте; width и height — соответственно, ширина и высота картинки. Указываются в пикселях или в процентах от ширины окна браузера. Пренебрегать этими параметрами не рекомендую. Лично я предпочитаю указание размеров в пикселях, которые легко выяснить с помощью хоть графической программы, хоть того же «Проводника». Если размеры, указанные в тэге, не будут соответствовать реальным размерам рисунка, браузер будет производить соответствующее масштабирование, что потребует дополнительного времени, и, кроме того, может привести к искажению изображения; vspace и hspace — свободное пространство, соответственно, над/под и слева/справа от рисунка. Задается в пикселях. Если параметр не указать, то текст прижмётся к рисунку, что выглядит не очень-то красиво. Я обычно задаю vspace="40" и hspace="70", хотя в некоторых случаях, чтобы не ломать вертикальную линию текста между соседними рисунками альбомной и портретной ориентации, параметр hspace для последнего несколько увеличиваю;
border — рисует вокруг картинки рамку. Чем большее число будет указано в качестве значения, тем толще получится рамка. Если значение параметра равно "0" или параметр вовсе не указан, рамка будет align — выравнивание рисунка относительно текстового поля. Здесь самые простые варианты значений left и right — выравнивание по левому и правому краям, знакомые нам по работе с заголовками. Но не всё так просто, как кажется. Во-первых, до соответствующего края текстового поля рисунок не доедет ровно на расстояние, определённое параметром hspace, и это надо учитывать. Во-вторых, среди типов выравнивания мы не находим выравнивания по центру. Нет такого значения, и всё тут! Из этого, конечно не следует, что рисунок невозможно при необходимости расположить точно по центру экрана, но методы для этого придётся применять иные, вне рамок параметров тэга <img>. А она нам нужна, лишняя головная боль? С выравниванием рисунков (да и других внедряемых в текст объектов) непосредственно связан ещё один вопрос: а как ведёт себя примыкающий к рисунку текст? Понятно, что рисунок текст разорвёт, но как поведёт себя текст, следующий в исходнике за тэгом рисунка? Частично ответ даёт применяемый тип выравнивания изображения: при выравнивании по левому краю текст от точки вставки тэга <img> будет обтекать картинку (с учётом отступов, предусмотренных параметрами vspace и hspace) справа. И, закончив обтекание, продолжится далее по тем же правилам оформления, что и до рисунка. Не исключено, правда, что текст закончится ранее нижней границы тэга <img>, или, что хуже (исключительно с эстетической точки зрения), под картинкой окажется одна единственная коротенькая строчка, оторванная от предыдущих слов. Быть может, лучше было <img> на пару строк выше вставить? Тебе виднее... Аналогичным образом, при выравнивании изображения по правому краю текст будет обтекать его слева. Однако, случаются ситуации, когда обтекающий рисунок текст необходимо прервать в определённом месте, а дальнейший текст без всякого обтекания продолжить ниже иллюстрации. Для этого в «точке разрыва» необходимо установить тэг разрыва строки <br> с параметром clear. Возможных значений у этого параметра три: left, right и all. Из всех трёх вариантов я пользуюсь только одним: <br clear="all">, не вдаваясь в прочие подробности. О вертикальном выравнивании текста относительно текстовой строки я говорить не буду — в «СИ» нам эта премудрость вряд ли пригодится. Но в плане вертикального размещения иллюстраций необходимо иметь ввиду вот что. Если тэги двух соседствующих по вертикали (то есть размещённых с одинаковым типом выравнивания left или right) картинок разместить в тексте слишком близко друг к другу, между рисунками может произойти «конфликт», в результате которого нижележащий рисунок будет оттеснён от места, к которому он привязывался параметром align, ровно на ширину предыдущего рисунка с учётом горизонтальных отступов hspace. Логика подобного «конфликта» понятна: текст, находящийся между двумя тэгами, завершился до того, как закончился вертикальный размер рисунка с учётом отступов vspace. Дальше должен размещаться второй рисунок, а сместиться к краю текстового поля ему мешает первая картинка. Вот он и прижимается к ней насколько возможно, ломая всю стройную схему, задуманную автором. И что интересно, стоит только уменьшить размер экрана, как, начиная с какого-то момента всё становится на свои места. Понятно и это: с уменьшением экрана строки укорачиваются, а число их, соответственно, возрастает, и в некоторый момент становится достаточным, чтобы завершить обтекание первого рисунка до начала второго. Именно этот момент я имел ввиду, когда говорил, что все свои предварительные экзерсисы осуществляю на широком экране и с браузером «IE», когда длина строк максимальна, а число их, напротив, минимально. И если мне необходимо поставить по вертикали несколько подряд иллюстраций, я поступаю следующим образом: устанавливаю тэг первой картинки, вывожу получившийся результат в браузер, запоминаю, с какого слова начинается первая под рисунком строка, и ровно перед этим словом вбиваю в исходник тэг следующего рисунка. Таким образом, на моём экране при использовании «IE» рисунки (включая вертикальные отступы) будут следовать по вертикали один за другим, не смещаясь и без всяких текстовых строк между ними. Естественно, при уменьшении размера окна браузера (или при переходе к другому браузеру) текстовые строки между рисунками таки появятся, но не случится главной неприятности — оттеснения одного рисунка другим от линии вертикального выравнивания. Кстати, и здесь зло можно превратить во благо: разместив два тэга рисунков один за другим, мы получим на экране два рядом стоящих по горизонтали рисунка. Естественно, если их суммарная ширина с учётом пробелов не превышает ширины экрана. А если превышает, то здесь, как говорится, возможны варианты: в зависимости от конкретной структуры исходного текста и применяемого браузера может либо произойти указанный «конфликт», либо внизу окна появится линейка горизонтального перемещения, и лежащий вне картинок текст придётся читать, гоняя движок туда-сюда, что, как понимаешь, шибко неудобно. Кроме того, мы можем каждому из этих рисунков задать разные типы выравнивания, и тогда один рисунок будет прижат к левому краю, второй — к правому, а пространство между ними будет заполнено текстом. Этих возможностей оформления текста иллюстрациями, думаю, нам будет предостаточно. Разве что добавлю, что, опять-таки, для удобства работы с исходником не плохо бы перед каждым тэгом рисунка ставить комментарий, типа: <!-- Рисунок 01 --> — проще искать будет.
В этой главе мы рассмотрели самые основы размещения рисунков в тексте. Если захочешь познакомиться с более изощрёнными примерами, не поленись заглянуть в статью Как вставить иллюстрацию в произведение.
Умение работы с иллюстрациями может помочь не только в украшении публикуемого произведения картинками. На просторах «Самиздата» мне встречалось немало статей научного характера — с выводами, графиками, формулами. И если с первыми двумя составляющими всё уже более или менее понятно, то изображение формул, определённо, составляет для авторов некоторую проблему. Конечно, формулу можно отсканировать из учебника или справочника, но это не всегда доступно. Можно нацарапать на листке бумаги и опять же отсканировать. Но есть и другие методы. Попробую помочь авторам теми способами, которые использую я сам. Для написания большинства химических и простейших алгебраических или физических формул можно обойтись, как я уже говорил, использованием тэгов верхних и нижних индексов и ASCII-кодами некоторых специфических, отсутствующих на клавиатуре, символов и букв греческого алфавита. Я их указал в материале ASCII-коды в оформлении статей. В более сложных случаях я бы рекомендовал использовать конструктор формул, имеющийся в «Word» (в версии «2007» он находится на закладке Вставка в зоне Символы — в правой части «ленты»). Работать с этим инструментом интуитивно просто, хотя и требуются при том повышенные внимание и аккуратность. Итак, запустив «Word» и вызвав функцию вставки формул, на чистом листе (то бишь в пустом документе) составляем необходимую нам формулу. Желательно, чтобы её размер не выходил за пределы экрана. Проверяем правильность написания (поскольку дальнейшее редактирование написанного простыми средствами невозможно), после чего нажимаем на клавиатуре редко используемую клавишу <PrtScr> — Print Screen — Печать экрана. В этот момент отпечаток экрана — скриншот — разместится в оперативной памяти. Далее в любом графическом редакторе, включая и встроенный в «Windows» «Paint», в новом документе при помощи клавиши <Ctrl V> производим вставку содержимого памяти, то есть нашего скриншота. Используя инструменты редактора, производим обрезку всего лишнего, оставляя на листе только изображение формулы. Если есть желание «замаскировать» фон подложки под цвет страницы произведения в «СИ», можно залить свободное пространство листа стандартным для «Самиздата» цветом (напомню: Red = 233, Green = 233, Blue = 233). При необходимости изменяем масштаб изображения до приемлемого. Сохраняем графический файл в формате .jpg. А далее поступаем с ним так же, как и с любой другой иллюстрацией, вставляя её в текст произведения уже известным нам способом. Хлопотно? Да, ничего не скажешь. Но результат того стоит. Для примера приведу оформленную таким способом взятую навскидку из справочника по физике формулу уравнения состояния Майера для реальных газов:
О том, как создать подпись под рисунком, я напишу ниже.
Помню, в какой ступор меня ввергла первая же встреча с таблицей, оформленной в HTML. Всё не так, всё через «наоборот»... Всё, что у нормальных людей размещалось в горизонтальных строках, в исходнике располагалось по вертикали. Объединённые ячейки — это вообще мой ночной кошмар. Но ничего, притерпелось-прилюбилось, теперь без таблиц — ни шагу. Ты думаешь, что таблицы — это лишь унылые «разграфлёнки», типа бухгалтерских, напичканные данными? Глубокое заблуждение! Таблицы — это, помимо всего прочего, мощный инструмент оформления текстов. Вот, к примеру, решил ты присовокупить к своему произведению эпиграф, который обычно выравнивается по правому краю текстового поля. Даже не сразу сообразишь, каким способом это можно симпатично реализовать в HTML. А с применением таблицы — никаких проблем! Так давай и начнём изучение свойств таблиц с этого примера, а в качестве текста возьмём вынесенные в эпиграф данной статьи слова Фёдора Михайловича Достоевского: «Красота спасёт мир!». Как и в прочих случаях, рассмотренных нами, свойства конкретной таблицы прописываются в соответствующем тэге. Более того, таких тэгов не один, а целых три, каждый из которых управляет табличными элементами на своём уровне, причём все эти тэги парные: пара <table> и </table> — описывает уровень таблицы в целом, <tr> и </tr> — уровень строки таблицы и, наконец, <td> и </td> — уровень табличной ячейки. Последняя пара в «шапках» таблиц может быть заменена парой <th> и </th> — с некоторыми предопределёнными особенностями оформления. А чтобы не запутаться в большом количестве одинаковых и похожих тэгов, не пропустить чего, рекомендую каждую пару записывать сразу, а уж потом вставлять между её тэгами какое-то содержание. Хотя принципиального значения это не имеет, я также советую записывать пары и находящееся между ними содержание в разных строках — так нам будет проще ориентироваться в достаточно громоздкой для неискушённого ока конструкции таблицы. Позже мы рассмотрим многие другие параметры тэга <table>, но для нашего примера с эпиграфом ограничимся лишь следующими: align — знакомый нам параметр выравнивания объекта относительно текстового поля. Имеет те же самые значения: left, right и, в отличие от тэга изображений, center. Обтекание текстом для первых двух значений аналогично обтеканию изображений, в случае значения center таблица текстом не обтекается; он прерывается непосредственно над ней и продолжается ниже; width — ширина таблицы. По полной аналогии с картинками, задаётся в пикселях или в процентах ширины окна браузера. Последний способ, как мы увидим ниже, применяется здесь чаще, чем при работе с иллюстрациями; height — высота таблицы — в тех же единицах. Вообще говоря, используется этот параметр редко, поскольку браузер в состоянии сам подобрать подходящую высоту; border — ширина рамки таблицы по наружному контуру (не то же, что границы ячеек!) в пикселях. При значении параметра "0" рамка таблицы и границы ячеек отсутствуют (то, что, кстати, нам и надо в эпиграфе). Заметим, что для размещения эпиграфа нам потребуется таблица, состоящая из одной строки и, более того, всего из одной ячейки. Странно? Но факт, поскольку размещаемый в ячейке текст подчиняется всем тем же правилам, что и любой другой текст вне рамок таблицы. Исходя из этого, прикинув «на глазок» или получив в результате многократных опытов ширину зоны, отводимой нами под эпиграф, запишем: <table align="right" width="300" border="0"> <!-- Описание таблицы --> <tr> <!-- Описание строки --> <td> <!-- Описание ячейки --> <!-- Содержимое ячейки --> </td> </tr> </table>
Разовьём тему шире. Какие ещё параметры тэга <table> нам могут быть полезны? Вот какие: cellspacing — определяет ширину просвета между границами ячеек таблицы в пикселях. При значениях параметра больше "0" границы между соседними ячейками выглядят как двойные линии — чем больше значение, тем шире просвет между ними. При значении параметра равным "0" двойные линии сливаются в линии одинарные; cellpadding — определяет минимальный отступ в пикселях от границ ячейки до находящегося внутри её элемента. При значении параметра равным "0" зазор между границей и элементом отсутствует; bordercolor — цвет рамки таблицы и границ ячеек. Задаётся по тем же правилам, что и для шрифтов. Хороший параметр, нужный, но... в моей любимой «Opera» не работает, у неё все рамки серые. Тем не менее для себя в «Opera» я эту проблему решил. И, между прочим, с помощью всё тех же таблиц; bgcolor — цвет фона всех ячеек таблицы. То, что называется «подстилающим» цветом. Увлекаться параметром не следует, как и разноцветьем шрифтов. Остальные параметры тэга <table> в «СИ» нам вряд ли пригодятся. Перейдём к параметрам тэга табличной строки <tr>. Необходимо отметить, что некоторые из этих параметров переопределяют, то есть изменяют аналогичные параметры тэга <table>, но только в той строке, для которой они указываются. Подобным образом действуют параметры: align, bordercolor и bgcolor. Где это имеет смысл? Ну, например, в строках-«шапках» или в строках-разделителях, где тип выравнивания или подстилающий цвет может отличаться от остальных строк таблицы. Помимо указанных у тэга <tr> существуют ещё два параметра: height, изменяющий при необходимости принятую по умолчанию высоту строки, и valign, определяющий выравнивание находящегося в ячейке элемента по вертикали. Возможные значения этого параметра: top, bottom и middle. Последнее значение, соответствующее выравниванию по центру, принято по умолчанию. Теперь о параметрах тэга ячейки <td> (или <th>). Попутно уточним, что тэг <th> отличается от <td> только лишь тем, что текст в такой ячейке будет выполнен полужирным начертанием и выравнен по центру, как это обычно принято в «шапках» таблиц. Также, как некоторые параметры тэга строки могут переопределять соответствующие параметры тэга таблицы, одноимённые им параметры тэга ячейки могут переопределить применённые ранее параметры и распространить их на конкретную ячейку, для которой они указаны (а иногда и на всю строку). К таким параметрам относятся: width и height (ими мы баловаться не будем), align и valign, а также bordercolor и bgcolor. Параметр nowrap запрещает автоматический перенос текста в ячейке. Указывается так как есть, без всяких значений. Но есть у тэга <td> два параметра, занимающие особое место: colspan и rowspan. Эти параметры применяются при необходимости объединения ячеек и, должен признаться: сколь часто они применяются, столь же часто служат причиной ошибок и основных сложностей при работе с таблицами. colspan устанавливает, сколько ячеек должны быть объединены в одну по горизонтали (то есть в строке), rowspan задаёт количество объединяемых ячеек по вертикали (то есть в столбце). Объяснять «на пальцах», как это работает, смысла нет. Поэтому приведу ниже фрагмент исходного кода для некоторой пробной таблицы, где ячейки пронумерованы через дробь, в числителе которой указан номер строки, а в знаменателе — номер столбца. <!-- Начало таблицы --> <table width="70%" align="center" cellspacing="1" cellpadding="10" border="6"> <!-- Табличная строка 1 --> <tr bgcolor="#ADD8E6"> <th rowspan="2"> Яч. 1/1 + 2/1 </th> <th colspan="2"> Яч. 1/2 + 1/3 </th> <th colspan="2"> Яч. 1/4 + 1/5 </th> </tr> <!-- Табличная строка 2 --> <tr bgcolor="#ADD8E6"> <th> Яч. 2/2 </td> <th> Яч. 2/3 </th> <th> Яч. 2/4 </th> <th> Яч. 2/5 </th> </tr> <!-- Табличная строка 3 --> <tr> <td bgcolor="#ADD8E6"> Яч. 3/1 </td> <td> Яч. 3/2 </td> <td> Яч. 3/3 </td> <td> Яч. 3/4 </td> <td> Яч. 3/5 </td> </tr> <!-- Табличная строка 4 --> <tr> <td bgcolor="#ADD8E6"> Яч. 4/1 </td> <td> Яч. 4/2 </td> <td colspan="3"> Яч. 4/3 + 4/4 + 4/5 </td> </tr> </table> <!-- Конец таблицы --> И вот, что у нас получилось в результате:
Критики могут едко подметить, что исходник можно было бы и покомпактнее написать. Безусловно! Вплоть до того, что дать его единой строкой — HTML это фиолетово. Но в том-то и дело, что для начинающих табличные упражнения я настоятельно рекомендую скрупулёзно разносить конструкцию по разным строкам, до отдельных атомов, то есть тэгов. Только так вероятность ошибки будет сведена к минимуму, а логика построения станет гораздо понятнее. И вообще, а чего мы хотим добиться, сделав запись более компактной? Об экономии места на экране в данном случае речи нет. Сэкономить объём файла за счет нескольких десятков символов абзаца существенно не удастся. Ну, разве что, экономия бумаги при распечатке... Так это совершенно другая тема! Поэтому. Авторы! Не экономьте на пустяках, дайте вашим текстам дышать свободно. Расставляйте в «знаковых» местах комментарии — вам же жить проще будет! Ну а где мне ещё пришлось с таблицами дело иметь? Помнишь, я говорил, что при помощи тэга <img> нельзя под рисунок подпись вывести. Так чего проще?! Быстренько ваяем тривиальную таблицу из двух строк и одного столбца, в верхнюю ячейку при помощи <img> засаживаем наш рисунок, забыв об alt, title и прочих глупостях, за исключением «бордюра», в нижнюю ячейку ставим подпись — если надо, с «рюшечками», типа начертания, выравнивания и пр. Готово! <table align="center" cellpadding="5" border="0"> <tr> <td> <img src="si13.jpg" border="1"> </td> </tr> <tr> <td> <i><b><font size="-1">Логотип «Самиздата»</font></b></i> </td> </tr> </table>
Или вот. Захотелось мне как-то все свои тексты в цветную рамочку вставлять. Простое дело — ведь таблица же есть. Но! Как я говорил, «Opera» параметр bordercolor не понимает: серую рамку — пожалуйста, а цветную — извини, старик... Но я же хохол! — упёрся: цветную хочу, и всё. И опять на помощь пришли таблицы. Нарисовал первую с такими параметрами: width="91%"20 — чтобы рамка моя в края экрана не упиралась, align="center" — по центру экрана, естественно, cellpadding="3" — это, собственно и есть ширина будущей рамочки, bgcolor="#7F007F" — это её цвет, border="0" — а на фига нам ещё какая-то рамка нужна?! Внутри ячейки, образованной парами тэгов <tr> ... </tr> и <td> ... </td>, нарисовал ещё одну таблицу, с немного иными параметрами: width="100%" — 100% — от чего? Естественно, от ширины предыдущей таблицы. А с у чётом того, что там я указал параметр cellpadding="3", то вторая таблица стала уже ещё на 6 пикселей — ровно на суммарную справа и слева ширину рамки; align="center" — понятно, хотя, наверное, и избыточно; border="0" — понятно; bgcolor="#E9E9E9" — а это «стандартный» серый фон «Самиздата», которым я заливаю внутреннюю таблицу. Дело в том, что без параметра bgcolor фон ячеек таблицы «прозрачный», и не укажи я эту заливку, фон внутренней таблицы оказался бы пурпурным, как и во внешней. В результате получилась такая конструкция: <table width="91%" align="center" cellpadding="3" bgcolor="#7F007F" border="0"> <tr> <td> <table width="100%" align="center" cellpadding="50" bgcolor="#E9E9E9" border="0"> <tr> <td> <div align="justify"> Очень длинный текст. Очень длинный текст. Очень длинный текст. Очень длинный текст. Очень длинный текст. Очень длинный текст. Очень длинный текст. Очень длинный текст. Очень длинный текст. Очень длинный текст. </div> </td> </tr> </table> </td> </tr> </table>
Собственно, поставленная задача решена, рамка зарезервирована и о ней можно забыть. Теперь вместо слов «Очень длинный текст» достаточно вставить своё произведение — со всеми картинками, табличками и прочими бубликами... Весьма прилично! Но теперь позволь задать пару вопросов тебе. А для чего во второй (внутренней) таблице установлен параметр cellpadding="50"? Кроме того, ты заметил, что хотя в исходнике отсутствует тэг blockquote, поля по краям текста как раз-таки наличествуют? Сопоставив эти два факта, легко догадаться, что именно параметр cellpadding и задал необходимые нам поля. Помнишь я говорил о некорректной работе таблиц, включённых в зону действия тэга blockquote? А в данной схеме такое просто исключено по причине отсутствия последнего.
Вот такими замечательными «лечебными» свойствами обладает таблица!
Нередко в «СИ» встречаются произведения объёмом в сотни килобайт. Осилить такой «роман» за один присест трудно, вот и приходится каждый раз, возвращаясь к нему, уныло гонять движок по линейке перемещения в поисках места предыдущей остановки. Или обращаться к строке поиска браузера, что особенно увлекательно, когда не знаешь толком, что собственно искать надо. А подсказка лежит на виду — в любой книжке толщиной более двух страниц. Ещё гениальные первопечатники решили данную проблему через организацию оглавления. Так отчего же не воспользоваться их опытом? Тем более, что электронное оглавление работает гораздо шустрее печатного. Идея простая: разделив наш «роман» на главы, к началу каждой «подвязываем» «якорь». В начале произведения строим список глав, связывая каждую строку с соответствующим «якорем» в тексте. Перейдём от идеи к её реализации. Предположим, что в нашем опусе наличествуют две главы: «За здравие» и «За упокой». Да помимо этого многочисленные сноски следует объединить в отдельном разделе «Примечания». Соответственно, рядом с каждым из названий разделов чуть позже будут установлены «якоря», с более значимыми, чем у простых сносок, именами: <a name="za_zdravie"></a>, <a name="za_upokoj"></a>, <a name="primechanija"></a>. Пока же займёмся собственно оглавлением. Где его лучше всего разместить? Понятно, в начале произведения, сразу ниже заголовка, чтобы долго не искать. Как оформить? Тут конкретных советов я давать не буду — как душе угодно. Мне же импонирует «википедийный» стиль оформления оглавления и разделов. Возьму в качестве примера именно его (надеюсь, стиль не является объектом авторского права, и уши мне не надерут). Оглавление выделяется рамкой, которую мы, понятное дело, организуем при помощи табличных тэгов, а внутри рамки-таблицы, состоящей из одной ячейки, расположим список глав. Вот о списках мы ещё не говорили. Списки бывают упорядоченные и неупорядоченные или, иначе говоря, нумерованные и маркированные. Поскольку HTML не собирается выполнять за нас работу по отслеживанию и нумерации разделов и соответствующему автоматическому изменению оглавления, об упорядочных, нумерованных списках (а также списках описаний) мы говорить не будем. Остановимся на неупорядоченных списках — они вполне подходят для наших целей. Задаётся такой список парным тэгом <ul> ... </ul>. У данного тэга может быть параметр type, значение которого определяет вид маркёров: Элементы списка обозначаются тэгами <li> ... </li>, причём указание закрывающего тэга не является обязательным. Тэг <li> можно применять аналогично списку с параметром type, если по каким-то причинам для конкретного элемента списка нам бы захотелось применить другой маркёр. Списки допускают вложенность. То есть, применив внутри пары <ul> ... </ul> точно такую же вторую пару, а в ней — третью и т. д., мы будем элементы очередного уровня визуально сдвигать правее относительно предыдущих. Завершив очередной уровень тэгом </ul>, мы возвратимся на предыдущий уровень. Кстати, в данной статье для оглавления применён именно такой список с двумя уровнями. Теперь мы представляем, как оформить оглавление внешне. Теперь о внутренней его структуре. Выше мы договорились привязать заголовки глав нашего опуса к «якорям». Понятно, что, щёлкнув по какому-либо пункту оглавления, мы желаем переместиться к соответствующей главе (точнее, к её заголовку, а ещё точнее, к привязанному к нему «якорю»). Как это сделать, мы знаем по работе со сносками (или внутренними ссылками). Но представим: второпях мы щёлкнули не по тому пункту оглавления и оказались у заголовка совершенно не той главы, какой хотелось. И что? Ответ простой: должна быть простая возможность вернуться к оглавлению, причём без использования кнопки отката браузера, что было бы дурным тоном. Организовать такой возврат более чем просто, привязав к оглавлению свой «якорь». Что мы и сделаем. Ну и, просуммировав всё вышесказанное, пишем исходник для оглавления21:
<!-- Пример оформления оглавления -->
<table width="200" cellpadding="20" cellspacing="0" border="1"> <tr> <td nowrap> <H3 align="center">Оглавление:</H3><a name="oglavlenie"></a> <ul> <li><a href="#za_zdravie" title="Читать">За здравие</a> <li><a href="#za_upokoj" title="Читать">За упокой</a> <ul> <li type="circle"><a href="#primechanija" title="Читать">Примечания</a> </ul> </ul> </td> </tr> </table>
<!-- Пример оформления заголовка главы -->
<table width="60%" border="0"> <tr> <td align="left"> <a name="za_zdravie"></a><font size="+2"><b>ЗА ЗДРАВИЕ</b></font> </td> <td align="right"> <font size=+0>[<a href="#oglavlenie" title="Оглавление">К оглавлению</a>]</font> </td> </tr> </table> <hr width="60%" size="2" align="left" noshade> А результат? Вот он (по понятным причинам в примере оглавления работает только первый пункт — можно поиграть).
Что здесь примечательно? Во-первых, заголовок главы выделился из общего текстового массива. Свою роль в этом сыграло и применение непарного тэга горизонтальной линии <hr>, с которым мы ещё не работали. Параметр width определяет длину линии в пикселях или процентах (по умолчанию — 100%), size — толщина линии в пикселях, align — тип выравнивания по горизонтали, если width менее 100% (по умолчанию align="center"), noshade отменяет объёмность, принятую по умолчанию. Помимо перечисленных может быть указан и параметр color — цвет линии. Ну и во-вторых, в заголовке появилась навигационная псевдо-кнопка К оглавлению, нажав на которую читатель немедленно вернётся к перечню глав. Удобно? Безусловно! На этом наше первое знакомство с HTML можно считать завершённым. Как можно было убедиться, инструмент это мощный и не такой уж страшный, как поначалу кажется. Да, писанины добавляется, но оно того стоит! Ну и потом, наверное нет нужды каждый раз проделывать оформительскую работу в части HTML заново, с нуля. После самостоятельного оформления первого же текста у тебя появится замечательный шаблон, подставляя в который соответствующие куски новых авторских текстов, ты будешь оформлять их в течение если не нескольких минут, то уж часа — точно. А теперь соизмерь это время с затраченным на написание романа — малая толика. А как ты помнишь, мал золотник, да дорог. То-то и оно...
Надеюсь, к этому моменту ты полностью завершил своё творение и готов выложить его на суд читателей. Спасибо интернету, спасибо «Самиздату» — такую возможность они тебе предоставляют. Здесь, правда, тоже шишек набить можно предостаточно, но если уж ты сумел попасть на «самиздатовский» сайт, считай, что половину пути к публикации ты уже прошёл. Осталось совсем немного.
И вот ты пришёл на заглавную страницу по адресу www.samlib.ru22. Всё по-спартански строго, в пуританских традициях текстового оформления. Не грусти, ещё нахохочешься! Для начала можно было бы и псевдо-кнопку Помощь нажать (она сразу под логотипом) — там много чего интересного. Но нам некогда, спешим мы публиковаться, а потому жмём кнопулечку Регистрация — появляется диалог регистрации23, с которым ты будешь общаться каждый раз, когда захочешь похозяйничать в своём разделе, то есть в той части ресурса, которую «СИ» выделит в твоё пользование. Подчёркиваю последнее слово. Владельцем ресурса ты не становишься, ты им только пользуешься в рамках действующих на сайте правил. Из этого следует, что вести себя необходимо примерно так, как ведут себя в чужом доме приличные гости. Да, им выделили «свою» комнату, но забивать гвозди в стены или менять обычный оконный переплёт на стеклопакет в ней не следует, во всяком случае, без разрешения хозяев. Возвращаясь к регистрационной форме, даже не знаю, что здесь подсказать: всё прозрачно, словно родниковая вода. Может только посоветовать не особо мудрить с логином и паролем, а нет, так нацарапать их гвоздём перед собой на стенке, так как на форумах «СИ» можно и сегодня услышать отчаянные крики типа: «Помогите! Забыла и пароль и логин!». И читай подсказки: если сказано, что вводить только латинские буквы и цифры, то не надо тулить в строку пробелы и вопросительные знаки. Стало быть, пока заполняешь три нижних поля (с учётом поля почтового адреса). В следующий раз и до конца дней при регистрации будешь вводить логин и пароль в два верхних. Осталось нажать кнопочку Зарегистрировать! (в дальнейшем будешь кликать по кнопочке Войти!). Следующая страница — Управление. Не обращай внимания на её название — это типовое оформление заголовка целого ряда страниц. Прочитав полезные сведения, на странице находящиеся, ты можешь отправиться по одному из двух путей, указанных в её верхней левой части. В этот раз мы сделаем выбор на пункте Создать свой раздел и попадаем в диалог-форму Информация об авторском разделе. Здесь тоже особо разъяснять нечего. В крайнем случае, щёлкнув по синеньким строчкам, скатишься ниже заполняемой формы, туда, где находятся краткие, но ёмкие подсказки.
Название раздела — компактный слоган из одного-двух-трёх слов, характеризующий то ли тематику раздела, то ли мировоззрение автора. Оно будет фигурировать в различных списках и рейтингах, а также кроваво-красно пламенеть на странице раздела, чуть ниже фамилии автора. Есть, над чем подумать. А поле, между тем, обязательно для заполнения. Права доступа, указанные по умолчанию, думаю, менять не стоит. Какой, в конце концов, смысл публиковать работу для «себя и модератора»? В предыдущей анкетке тебя заверяли, что e-mail на всеобщее обозрение выставлять не будут. Да, это так, если ты сейчас уберёшь адрес из поля E-mail (отображается). Если же оставишь, то на странице раздела он будет указан. Говорить о полях Доп. группы (и аннотации), а также Начните знакомство с... пока рановато, мы ешё ничего не размещали. Поле Аннотация, на мой взгляд, из области гурманских излишеств: внесённый в него текст бледненько проявится где-то в дебрях страницы раздела вслед за пояснением Аннотация раздела. Ну и что здесь ожидается увидеть? И кто что хочет здесь сказать? Короче, оставляем поле пустым! Смело жмём кнопочку Сохранить! (Store dir) в нижней части формы (в момент открывания окна скрытую за нижней границей экрана) и успокаиваем себя тем, что только что занесённые в форму сведения можно будет в любой момент изменить. А надоест всё до чёртиков — так и вовсе давануть на кнопку Удалить! (Delete) и покончить с этим раз и навсегда... Что ж, поздравляю с приобретением собственного (пусть и условно) раздела на «Самиздате»! Теперь, каждый раз заходя на «СИ» под своими логином и паролем, ты будешь получать возможность управления сведениями, в нём содержащимися. Обрати внимание на адресную строку браузера — в ней указан URL твоего раздела. Давай разберёмся с ним. В первой части URLа читаем: «http://samlib.ru/». Понятно, мы находимся на «Самиздате», это его адрес. Следующий фрагмент «editors/» пока пропустим, заметив, что в некоторых ситуациях он может в URLе отсутствовать. И, наконец, два последних фрагмента. Самый последний — эта транслированная «Самиздатом» в латиницу указанная тобою фамилия с инициалами, отделёнными от фамилии символами подчёркивания. Нравится тебе или нет, но «СИ» считает, что в латинице твоя фамилмя выглядит именно так, и спорить с этим бесполезно. А фрагмент из одного символа, стоящий чуть спереди, — это всего лишь первая буква твоей фамилии. Теперь вернёмся к фрагменту «editors/». Когда ты заходишь в свой раздел после регистрации, этот фрагмент присутствует. А вот после разрегистрации, осуществляемой простым нажатием на одноимённую псевдо-кнопку главного меню, часть URLа «editors/» исчезнет. То есть, при всей внешней схожести главной страницы раздела в зарегистрированном и «разрегистрированном» режимах работы это всё же разные страницы с различными URLами. Доступ для изменения материалов, размещённых на твоих URLах, содержащих фрагмент «editors/», ты получаешь только после регистрации. А вот просмотреть эти материалы можно и без регистрации. Это важно, и эту особенность мы ещё упомянем. Для тебя, опознанного по результатам регистрации в качестве владельца раздела (автора), при входе на главную его страницу будет появляться строка управления, представляющая из себя ряд псевдо-кнопок меню: Добавить произведение, Сведения о разделе, Сведения об авторе, Начните знакомство с, Фотографии, Линклист раздела, Список лучших, Пароль, Подписка, Friends, Публикации, Группы/сериалы. С большей частью кнопочек ты познакомишься позже самостоятельно — благо, открывающиеся страницы сопровождены, в основном, вполне доходчивыми пояснениями. А пока ещё немного внимания уделим оформлению раздела. Кнопка Сведения о разделе приведёт тебя к уже знакомой форме Информация об авторском разделе. Но кое что здесь изменилось. Обрати внимание: в верхней строке окна появилось указанное тобою название раздела, которое ты можешь переименовать без всяких для себя последствий. Иное дело — знакомое уже по адресной строке главной страницы раздела обозначение «ФИО» автора. Понятно, что вся хранимая в разделе информация «привязана» к этому набору символов. Поменяв по каким-либо причинам данные в поле Ваши фамилия, имя и отчество, мы тем самым изменим и связанное с ним сочетание латинских букв, а значит, рискуем24 потерять связь с хранимой в прежнем разделе информацией!
Для завершения разговора об оформлении главной страницы (индекса) раздела, рассмотрим действие кнопки Фотографии. Речь идёт всего о двух фотографиях, первая из которых будет показана на главной странице твоего раздела, рядом с информацией «Об авторе», а вторая — на странице Информация об авторе. Обрати внимание на допустимые объёмы иллюстраций (ими, кстати, могут быть не только фото, но и рисунки), из которых следует, что предполагаемые к размещению фотки, скорее всего, будут нуждаться в предварительной обработке в каком-нибудь графическом редакторе. Подготовив иллюстрации, нажми кнопку Обзор... — получишь стандартное «виндузовое» окно просмотра папок своего компьютера, где укажешь двойным щелчком (или кнопулькой Открыть) файл с фотографией. Теперь в поле формы у нас появился путь к этому файлу на твоём компьютере. Нажми на форме кнопку Сохранить! (Store) и спокойно ожидай, пока файл будет перекачен на сервер «СИ». Как только он сохранится на сервере, то проявится на форме. Процесс занимает определённое время, поэтому не пытайся подгонять интернет повторными нажатиями на кнопку Сохранить! — быстрее не будет! Теперь повтори те же манипуляции для второй фотографии.
Всё, первичное оформление раздела окончено, приступаем к самому интересному и долгожданному.
Итак, где-то у нас имеется файл с расширением .txt, текст из которого мы желаем разместить в «СИ». Далее действуем следующим образом: 1. Открываем «Проводник» и находим папку с файлом нашего произведения. Напомню, для примера мы решили назвать его «ochen_intereshaja_istorija.txt». Нашёл? Щёлкнув по нему правой кнопкой мыши, выбираем из контекстного меню пункт Открыть с помощью и в предложенных вариантах находим Microsoft Office Word — файл откроется в нашем любимом «Word». Никуда не уводим курсор от начала текста, а сами переходим в окно «СИ». 2. Надеюсь, в «СИ» ты уже прошёл очередную регистрацию и находишься на главной странице своего раздела, а посередине экрана видишь строку меню управления. Нет? Тогда пройди регистрацию заново, нажав в главном меню соответствующую псевдо-кнопку. Если всё прошло нормально, то, вернувшись в раздел, ты просто обязан увидеть строчку управляющего меню. Выбираем в нём самый первый пункт Добавить произведение и попадаем в форму описания произведения.
Поле Имя файла. Здесь необходимо указать имя, под которым файл с произведением будет храниться на сервере «СИ». Правила и принцип именования мы уже описывали: строчными (маленькими) латинскими буквами, без пробелов, заменяя их при необходимости символами подчёркивания. В общем-то, этих правил мы придерживались, когда именовали свой файл при его создании, поэтому для нас задача упрощается. Чтобы не вбивать уныло символ за символом в поле и сократить вероятность ошибок, возвращаемся в окно «Проводника» и, либо из контекстного меню файла выбираем пункт Переименовать, либо, что то же самое, нажимаем на его имени клавишу <F2>. Имя (без расширения) выделилось. Нажав «аккорд» <Ctrl C>, копируем имя в буфер, а затем, перейдя в форму «СИ», вставляем его в поле при помощи «аккорда» <Ctrl V>. Полная идентичность обеспечена! Ещё раз подчёркиваю, что расширение имени .txt в поле «Имя файла» указывать не надо, иначе оно будет автоматически включено в состав собственно имени. Никакие кнопки типа Store, Delete, Rename и т. п. не трогаем, пока я об этом не напомню специально! Флажок Поверх старого оставляем пустым раз и навсегда. Мы им пользоваться никогда не будем. Поле Автор. Вообще говоря, по умолчанию это поле уже заполнено твоим именем. Однако, если ты договорился с другом о публикации его творения, то, естественно, в этом поле ты должен указать имя друга. В таком случае произведение будет выставляться в твоём разделе, но в списке произведений раздела, а также на странице собственно произведения в качестве автора будет фигурировать твой друг. Раскрывающийся список Форма. Выбираем из этого списка форму, которая, на наш взгляд, максимально отвечает характеру произведения. Обычно выбор затруднений не представляет. Если где-то ошибся, не страшно: и поменять не долго, да и так палкой никто не ударит. Но я всё же столкнулся однажды с такой недокументированной особенностью: разбив повесть на главы, пытался каждой из них присвоить форму «Повесть», но «СИ» упорно возвращал в прямоугольничек форму «Глава». И лишь как только объём одной из глав превысил некоторую (не помню уж какую) величину, «СИ» великодушно позволил присобачить ей форму «Повесть», хотя исходя из предыдущих глав, это значение мне уже не подходило25... Указанная форма будет затем фигурировать в списках произведений. Кроме того, на главной странице раздела произведения числом более одного будут сгруппированы по признаку «Форма» — до тех пор, во всяком случае, пока не будут организованы дополнительные подразделы — группы. Поле Переводчик. Очевидно, для авторов перевода. Никогда не пользовался. Список Жанр. Надо, так надо... Выбираем жанр нашего опуса. Можем даже несколько жанров, если произведение отвечает требованиям каждого из них. Для множественного выбора достаточно щёлкать по соответствующим строчкам списка, удерживая нажатой клавишу <Ctrl>. Но, признаюсь, мне список показался несколько странным: есть «История», но нет «Географии», есть «Окультизм» и «Эзотерика», но нет «Путешествий» и «Компьютеров»... Дискриминация, однако, в некотором роде. Выпадающий список Доступ к книге на чтение. Кто такие «френды», ты узнаешь потом самостоятельно, сделав соответствующий выбор из главного меню раздела. От выбора Автор и модератор отдаёт неким мазохизмом. Значение по умолчанию Для всех наиболее очевидное. А вот что касается выбора Скрытый, о котором в подсказке говорится: «читать могут все при наличии прямой ссылки, анонсы о произведении нигде не публикуются», эта особая возможность полезна, и мы о ней позже ещё вспомним. Выпадающий список Доступ к книге на запись. Странно было бы, если бы позволяли редактировать наше произведение всем подряд. Поэтому значение по умолчанию Автор и модератор представляется мне оправданным. Выпадающий список Группа предложит значения, отличающиеся от Нет (net), только тогда, когда у тебя появятся подразделы, позволяющие группировать сочинения по отличным от списка форм признакам. Но это будет не сегодня. Поле Дата создания. И понятно, и непринципиально, поскольку я лично имею привычку период создания указывать в самом конце каждого произведения. Здесь же, наверное, правильнее было бы говорить о дате публикации на «СИ». Выпадающий список Комментарии предлагает много различных вариантов. На мой взгляд, наиболее актуальными из них являются: Открыты (otkryty) и Выкл. (wykl.). Текстовое поле Аннотация. Полезная опция, с поддержкой HTML. Текст аннотации выводится в списках произведений. Прикинь, что бы было без неё: встречается в длинющем списке название «Ё-моё!», форма «Рассказ», жанр «Проза»... О чём? Узнаешь, только когда откроешь. А стоит ли тратить на это драгоценное время, когда авторов десятки тысяч, а произведений — под мильён?! Без краткого, понятного, завлекательного анонса через «Ё-моё!», скорее всего, переступят. Далее — серьёзнее. Приступаем к непосредственному размещению. Выпадающий список Кодировка. Если с самого начала мы всё делали так, как было описано в этой статье, кодировка нашего текста Windows-1251. Можем указать из списка явно, а можем оставить значение по умолчанию Auto — «СИ» сам разберётся без труда. Тем более, что грузить в «СИ» текстовый файл с соответствующей кодировкой мы не собираемся. Ну а если при создании загружаемого файла использовался какой-то иной редактор, надо разбираться особо. Файл с текстом, диалог Обзор. Забудем о возможности размещения текста путём загрузки файла навсегда! Я не вижу каких либо преимуществ этого способа по сравнению с тем, к которому далее прибегнем мы. Способ сулит сложности и чреват ошибками переконвертации. Именно из-за отказа его использования осталось пустым поле «флажка» Поверх старого. Мы же сделаем всё проще, надёжнее, эффективнее. Текстовое окно ИЛИ ВСТАВЬТЕ ТЕКСТ В ОКНО. Вот это — наш путь! Возвращаемся в открытое недавно окно «Word» с нашим текстом и копируем его в буфер от начала до конца. Для этого есть, минимум, два пути. Путь первый: делаем тройной щелчок на левом, свободном от текста поле документа — весь текст оказывается выделенным. Путь второй: вбиваем курсор в самое начало текста, то есть перед самым первым его символом; нажимаем клавишу <Shift> и, не отпуская её, перемещаемся при помощи ползунка к самому концу текста и затем вбиваем курсор указателем мыши после самого последнего символа текста, — весь текст оказывается выделенным. Теперь нажимаем знакомый «аккорд» <Ctrl C>, отправляя копию выделенного текста в буфер. Возвращаемся в окно «СИ», к ожидающему нас текстовому окошку. Устанавливаем курсор в начало окна и нажимаем «аккорд» <Ctrl V>. Текст из буфера мгновенно копируется в окно... Всё! Осталось только нажать расположенную чуть ниже окна кнопочку Store и дождаться, пока текст будет перекачен с нашего компутера на сервер «СИ». Опять-таки, наберись терпения, операция может занять какое-то реальное время. Как только процесс завершится, «СИ» перебросит тебя на главную страницу раздела, где ты, к радости своей, обнаружишь «свежеиспечённое» название только что закачанного произведения с гордой красной отметочкой «New». Можешь быть уверенным, что в тот же момент название опуса появилось в списке новинок на одной из страниц сайта. Убедиться в этом легко: щёлкни по псевдо-кнопочке Новинки в главном меню своего раздела и увидишь этот список. Правда, пока ты любовался на заголовок опуса в своём разделе, кто-то ещё из десятков тысяч авторов также разместил какую-то работу в своём разделе, а там — ещё кто-то и ещё... То есть к моменту твоего появления на странице Новинки наша «Очень интересная история» может оказаться далеко не на первой строке. Но пусть тебя это не огорчает: лиха беда — начало!
И всё же что-то не так, что-то тебя тревожит... Открываешь свой роман... Оп-па-на! Текст — в лучшем виде, а картинки-то где? Одни слепые пятна вместо них. Ну, не совсем слепые, а с надписями, которые ты сочинял в параметре alt для каждой. А самих-то картинок и нет... Понятно, нет. А где ж их «СИ» взять должен?
Пусть простят тебя те читатели, которые успели, также как и ты, увидеть размещённый труд в незавершённом состоянии. Но, по общему правилу «СИ», картинки могут быть закреплены за произведением только после его размещения в разделе автора. Действительно, это так или почти так. Почему «почти», мы уточним чуть позже. А пока необходимо срочно предпринимать меры по заполнению опубликованного произведения иллюстрациями. Благо, вся подготовительная работа (разметка текста и расстановка тэгов изображения) была выполнена нами заранее. Как можно предположить, на сервере наше произведение хранится в отдельной папке, в которой размещаются и все остальные материалы, с произведением связанные. В том числе и файлы изображений. Именно этот факт позволил нам в параметрах src каждого тэга изображения <img> сократить URL выводимого на экран файла изображения до его имени с расширением. А отсюда следует, что для того, чтобы получить в просматриваемом через браузер тексте реальные картинки, необходимо разместить их файлы в той же папке, что и собственно текст. Но как их туда закинуть? После регистрации (или, как ещё говорят, «залогиненный») автор при внимательном рассмотрении списка своих работ перед каждым наименованием может заметить две малюсенькие псевдо-кнопочки: Edit и TextEdit. О назначении второй разговор ещё впереди, а нажав на первую, мы попадаем в диалог-форму, очень похожую на ту, что заполняли при размещении нового произведения. Только теперь вместо имени файла с текстом произведения мы видим синенькую (ссылочную) надпись Загрузить иллюстрации. Щёлкнем по ней.
Так, раз за разом и загрузим все иллюстрации. Вот теперь можно увидеть и понять, почему мы изначально задавали файлам иллюстраций однообразные типовые имена — в столбике микро-копий изображения сортируются по именам файлов, а значит, прежде чем загрузить файл pict07.jpg, мы, скорее всего, не забудем загрузить и файл pict06.jpg, что, согласись, удобно. Как выйти из этой формы? К сожалению, проектировщики сайта соответствующую кнопку не предусмотрели. Значит, остаётся пользоваться кнопкой отката браузера? Но если мы загрузили за один сеанс несколько десятков фотографий, значит придётся столько же раз нажимать и на кнопку с левой стрелкой. Не обязательно, существуют и другие выходы. Можно, например, щёлкнуть по своему логину, расположенному над формой в псевдо-кнопке Разрегистрация. Либо — по латинообразному названию папки произведения. В первом варианте попадаешь на главную страницу своего раздела, во втором — в только что проиллюстрированное произведение. В общем-то, описанный способ размещения иллюстраций является стандартным, предусмотренным логикой «СИ». Но есть ещё два способа — чуть более хлопотные, но изящные. Об одном из них упоминал Артём Белоглазов. Он предложил, как вариант, создать скрытый (то есть соответствующим образом отмеченный в форме описания произведения) файл, предназначенный исключительно для хранения иллюстраций, с минимальной, а то и вовсе отсутствующей текстовой частью. Зная имя этого файла (а как же его не знать, если мы сами его задаём. Например, my_pictures), мы можем все иллюстрации будущего произведения предварительно разместить в нём, а затем в самом файле произведения соответствующим образом откорректировать параметр src в тэгах изображений <img>. Как это будет выглядеть? Очень (или не очень) просто! В параметре необходимо указать полный URL файла картинки. То есть, если автор Иван Иванович Пупкин (p/pupkin_i_i) создал для хранения картинок файл my_pictures и сохранил в нём файл с иллюстрацией pict07.jpg, то в исходнике произведения он сошлётся на эту картинку тэгом <img src="/img/p/pupkin_i_i/my_pictures /pict07.jpg">, ну и со всеми прочими необходимыми параметрами. И поскольку картинки к своему произведению Пупкин загрузил раньше собственно произведения, то после загрузки последнего в нём сразу же появятся иллюстрации. На мой взгляд, это единственное преимущество способа. Теперь о недостатках. Строка параметра src усложняется, стало быть, возрастает вероятность ошибки. Далее. Для размещения одного-другого десятка файлов изображений общий файл-хранилище ещё подходит, а когда дело дойдёт до сотни-другой файлов картинок? Тогда и загрузка изображений удлиннится во времени хотя бы за счёт перерисовок микро-изображений после каждой загрузки, да и проблема именования файлов проявится со страшной силой. Ведь все они должны иметь разные имена, и как в десятках имён при необходимости идентифицировать картинку и изображение? Значит, структура имён усложнится. Я попробовал этот способ, но очень быстро от него отказался. Может быть, действительно, он более приемлем для хранения десятка gif-файлов для фоновых подложек? Может быть.
Но я пошёл третьим путём, объединив два первых. При размещении нового произведения доступ к книге для чтения я ограничиваю, разрешив его только для автора и модератора. В результате размещённый на сервере файл не попадает в общедоступные списки, и я могу спокойненько, без спешки грузить в него иллюстрации обычным способом, не опасаясь, что «полуфабрикат» попадёт кому-то на обозрение. А «залив» иллюстрации, я меняю аттрибут доступа чтения на Для всех, после чего файл предстаёт в списках «Самиздата» во всей своей красе. Очень удобно!
Всё хорошо, всё красиво. Устав от переполняющих душу эмоций, ты устраиваешь себе заслуженный перерыв, даже не выключив компутера, на экране которого продолжает высвечиваться список твоих произведений в количестве одного. Пару часов спустя ты вновь открываешь свой роман, любуешься выполненной работой и... о, ужас! обнаруживаешь пропущенную, не смотря на многие вычитки, запятую. Как же так? Стыд и позор! Немедленно исправить! Ведь есть же, в конце концов, кнопулечка TextEdit. Как славно, что до сих пор ты так и остаёшься залогиненным, поскольку в главном меню и по сей момент видна кнопка Разрегистрация.
Прекрати истерику, всё нормально. Просто по истечении какого-то времени твоего полнейшего бездействия «СИ» автоматически вывел тебя из залогиненного состояния, оставив экранную информацию о твой регистрации без изменения. Не исключено, что выполнив по клавише <F5> команду Refresh на обновление кэша, ты убедишься, что надпись Разрегистрация изменилась на приглашение Регистрация, а меню управления с экрана исчезло. А может, и не убедишься... Остаётся одно: пройти регистрацию заново. И если надпись Разрегистрация всё еще висит на экране, щёлкни по ней, хуже не будет, но теперь уж, точно, приглашение к регистрации появится. Зарегистрировался? Ну и как? Вот видишь, всё работает. Продолжим наше устремление к восстановлению утерянной запятушечки. Для начала найди подобающее ей место в исходнике, поставь и сохрани содеянное. Теперь вернёмся к вопросу о редактировании файла. Ты знаешь, нет особой разницы в том, какую из микро-кнопок сейчас нажимать: Edit или TextEdit — и та, и другая формы дадут тебе возможность внести в текст изменения, и там, и там твой текст будет виден в окне редактирования, которое мы оттого и будем называть вполне обезличенно: окно редактирования текста. Так вот. Выше мы уже договаривались, что никогда не будем загружать текст файлом. А теперь договоримся ещё об одном: мы никогда не будем редактировать текст в окне редактирования, даже если наши исправления касаются всего лишь одной запятой. Дело в том, что наш текст однажды уже подвергся конвертации. Если ты повнимательнее приглядишься к нему в окне редактирования, то заметишь, что все изначально внесённые нами коды заменены соответствующими символами. Вместо — мы теперь видим длинное тире, вместо « — левую угловую кавычку и так далее. Естественно, при повторном сохранении «СИ» проведёт переконвертацию по новой, и все наши длинные тире превратятся в дефисы, а весёлые угловые скобки — в унылые прямые. В общем, как в той истории, когда с двенадцатым ударом кремлёвских курантов золочённый «Бентли» вновь превращался в тыкву. Дабы избежать подобного камуфлета, мы подсунем «СИ» новую, исправленную (то есть всего лишь с подставленной запятой), но полную версию нашего исходника — с кодами вместо символов, и он дисциплинированно вновь переконвертирует их в нужные нам значки. Как это проще сделать? Да точно так же, как и в первый раз: скопировать исправленный файл исходника в буфер, вернуться в окно редактирования, выделить тем же способом, что и в «Word», весь прежний текст — от первого символа до последнего и нажать «аккорд» <Ctrl V>. Новый текст мгновенно заменит старый. Не забыть бы только после этого нажать кнопочку Store — «Сохранить». Заметим, к слову, что все остальные установки и параметры файла, включая комментарии, рейтинги, оценки, при этом не изменятся. Так и только так советую тебе вносить в текст и все последующие изменения.
Я о той «погоде», которая будет царить в твоём разделе, то есть о его психологическом климате. По этому поводу тоже имею совет дать. Будь, по возможности, объективен. И по отношению к себе, и по отношению к потенциальным читателям. Признаться честно, я не ожидаю, что к моим творениям у прилавков вытянутся очереди. И пишу вовсе не затем, чтобы вызвать бурю аплодисментов почитателей и неудержное желание издателей отслюнить малую толику авторского гонорара. Недаром великий Михал Михал Жванецкий говорил: «Писать, как и писать, надо тогда, когда совсем уже не можешь...» Есть мысль — поделись, нету мысли — лучше б воздержаться. Но и выплеснув свой талант на бумагу или в виртуальное пространство, не чти себя с того момента гением, пока хоть и непризнанным. На этот счёт и иные мнения быть могут, с ними тоже считаться надо. Не выставляют тебе оценок, не пишут пространных комментариев — ну и слава богу! Порою ведь и злые люди встречаются. Тебя очень интересует, что они о тебе думают? Другой вопрос — статистика посещений. Здесь всё сравнительно честно и показательно. Вышло из под твоих клавиш нечто, заслуживающее внимание, — не беспокойся: люди найдут, потянутся. Десятки? Сотни? Да нет, по паре человек в день. Но это твои читатели. Ты ведь для них и писал. Не так ли?
Я здесь вот о чём ещё подумал. Практически при каждой встрече с «Самиздатом» выявляются какие-то новые его особенности, на которые было бы неплохо обратить внимание «сишных» авторов. Комментарии, на мой взгляд, для этих целей не очень подходят — в них имеет смысл оставлять только вопросы, а вот пополняемый ответами «по мере поступления» раздел статьи будет кстати. Итак...
Магадан, июль 2012 г.
2 Белоглазов А. И. HTML и Самиздат. — «Самиздат» и Белоглазов А. И. HTML и Самиздат (light version). — «Самиздат». 3 Белоглазов А. И. Хочешь цветочек? — «Самиздат». 4 Дикая Яблоня. Оформление раздела на Самиздате: готовые коды и полезные советы — «Самиздат» и Дикая Яблоня. Оригинальное оформление ваших текстов. Готовые коды — «Самиздат». 5 В связи с блокировкой рядом провайдеров адреса «lib.ru», если вызываемый тобой интернетовский адрес материалов «Самиздата» оказался вдруг недоступен, замени пальчиками в адресной строке «lib.ru» или «zhurnal.lib.ru» на «samlib.ru» — скорее всего, поможет. 6 Кстати, мышью выделять текст не всегда удобно. Часто для выделения фрагмента я так или иначе устанавливаю курсор в самое начало или самый конец фрагмента, а потом, удерживая нажатой клавишу <Shift>, работаю клавишами стрелок. Точно также, не отпуская <Shift>, зону выделения можно и уменьшать до необходимого размера. 7 Другие цифровые коды и мнемообозначения символов можно найти в статье Глущенко А. Г. ASCII-коды в оформлении статей. — «Cамиздат». 8 Легко сказать: «не закрывая "Word"...» А если мы его всё же закроем? Рано или поздно нам всё-равно надо будет от компутера отойти... Тогда надо иметь ввиду несколько нюансов. Во-первых, для редактирования мы должны открывать файл с расширением .txt, а не .html. Во-вторых, открывать мы его должны либо непосредственно из «Word», либо из «Проводника», но через контекстное меню, вызываемое правой кнопкой мыши. В меню мы выбираем пункт «Открыть с помощью», а далее в списке программ указать всё тот же «Word». Обычный двойной клик по имени файла левой кнопкой раскроет его в «Блокноте», а с тем работать гораздо менее удобно. И, наконец, открыв любым из указанных способов наш файл с расширением .txt, мы с удивлением обнаружим, что вид его несколько изменился, и, главное, весь исходный текст написан непривычным моноширинным шрифтом. Ничего страшного! Здесь именно вопрос привычки, не более. 9 Правильнее сказать, во второй, поскольку в первой строке, как мы договаривались, уже значится: <blockquote><blockquote> (или что-нибудь иное из оформительской части). 10 Удалению подвергается прежний, устаревший к этому моменту html-файл. Взамен него после копирования, вставки и частичного переименования возникнет новый html-файл с тем же именем. 11 По некоторым техническим причинам в данном тексте слово fаce написано латинскими и кириллическими символами вперемешку. Поэтому копировать его из этого текста в свои исходники не рекомендую — работать не будет! 12 Строго говоря, в части, посвящённой ссылкам, речь идёт о парном тэге <a> ... </a>. Но поскольку символ "a" зачастую воспринимается как неопределённый артикль английского языка, во избежание путаницы, я позволил себе некоторую вольность в «определении» данного тэга. 13 После обращения к этой «кнопке» цвет поменяется на пурпурный. Если конечно настройки браузера «по умолчанию» не предусматривают другого цветосочетания. 14 Я рассмотрю единственный, наиболее востребованный (IMHO) в «СИ», вид ссылки к web-ресурсам — с использованием http-протокола (и неважно, что это означает!). Реализацию остальных вариантов особо пытливые найдут и без моей помощи. 15 Более подробно работа с иллюстрациями описана в Глущенко А. Г.. Как вставить иллюстрацию в произведение — «Самиздат». 16 А также для простейшей реализации иллюстрирования произведения в «СИ». 17 Хотя и в этом случае при отсутствии картинки рамка вокруг её области всё же будет показана. 18 Более подробно оформление эпиграфа дано в не раз уже упоминавшейся работе Артёма Белоглазова. 19 Надо сказать, что HTML очень не любит, когда в ячейке между тэгами <td> и </td> вообще ничего не указано. В этом случае из таблицы вдруг начинают исчезать границы ячеек. Поэтому лучше взять за правило: в пустых ячейках (то есть между парой тэгов ячейки) устанавливать неразрывный пробел . HTML удовлетворённо успокоится, а визуально ячейка останется пустой. 20 Это «магическое число» я подсмотрел у Артёма Белоглазова. Не знаю, почему, но мне оно тоже понравилось. 21 В пункте «Примечания» я явно указал параметр type="circle", хотя Артём Белоглазов в своей статье указывает: «у вложенного неупорядоченного списка <ul> есть такая особенность: типы маркеров меняются в зависимости от уровня вложенности». Не спорю, но, к примеру, в «Opera» этот принцип не работает. Кроме того, приведённый в статье пример даже в «IE» безукоризненно срабатывает по указанному правилу только в таблице, а вне её поведение маркёров несколько иное, своеобразное, так сказать. Поэтому всё же рекомендую во вложенных списках указывать явные установки типа маркёров. 22 См. сноску 5. 23 Приводимые в примерах фрагменты скрин-шотов получены в браузере «Opera». Изображения, полученные в других браузерах, могут несколько отличаться по размерам и цветам шрифтов, относительному размещению элементов и т. п. 24 Я изменять параметры своего имени не пробовал, информации, подтверждающей или отрицающей мои опасения, в «самиздатовской» помощи не нашёл. Поэтому предположение строю на основании исключительно собственного умозаключения. Кто хочет поэкспериментировать — милости просим! Очень интересно будет прочитать результат в комментариях к данной статье. 25 Если такой алгоритм действительно предусмотрен разработчиками «СИ», на мой взгляд, это неправильно. Уж дав в руки авторам право свободного выбора из списка, назойливо корректировать затем выбор сделанный не вполне красиво и корректно.
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si00.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si01.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si02.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si03.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si04.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si05.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si06.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si07.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si08.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si10a.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si11.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si12.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si25.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si14.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si13.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si16.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si18.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si19.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si20.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si21.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si22.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si24.jpg)
![[]](/img/g/glushenko_a_g/samouchitelem_po_samizdatu/si23.jpg)