Оформление страниц на СамИздате при помощи картинок

предварительный вариант

Вставка картинок в текст, в аннотации, на задний план страницы с текстом, на поля текста.

Оформление данной статьи демонстрирует возможности, о которых речь пойдёт ниже.

Введение: о языке HTML
и добавлении иллюстраций
применительно к СИ

Здесь я совсем кратко расскажу о языке HTML, о котором надо иметь хотя бы какое-то мало-мальское представление, чтобы вставить в свой текст картинки. Дело в том, что это язык веб-страниц (интернет-страниц), поэтому и СамИздат без него не обходится.

Word и иллюстрации

Если грузить ворд-файл с иллюстрациями и формулами, набранными на Microsoft Equation, то иллюстрации и формулы не загрузятся. Поэтому их надо загружать и вставлять отдельно. Если в вашем файле должно быть не много иллюстраций, и это всё картинки типа gif и jpg, то лучше поступить так: написать текст без картинок вообще, а картинки уже добавлять потом. Как это делается - будет рассказано ниже, а прямо здесь попытаюсь помочь тем, кто пишет тексты на ворде и при этом вставляет много формул и рисунков, созданных на самом ворде.

Что Вам надо сделать? Если Вы не хотите возиться, или Вам не под силу разобраться в языке HTML, которого мы коснёмся ниже, то опишу один способ. К тому же он пригодится и тем, кто готов разбираться в HTML. Просто когда формул и картинок много, с каждой возиться вручную - слишком много чести. Поэтому способ такой:

Готовый к выкладыванию Word-файл надо сохранить как веб-страницу через меню "файл" выбрать "сохранить как" и в типах файлов выбрать веб-страницу с фильтром.

Обязательно выбирайте с фильтром, а то ничего не выйдет!!!

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

Итак, создайте под вашу "веб-страницу" специальную папку, а самому файлу дайте имя попроще, например из одной буквы "a". Только обязательно запомните - русская или латинская у вас будет буква.

Далее, если вы зайдёте в ту папку, куда сохранили web-страницу, то увидите там файл:

a.html (или, может быть a.htm - что то же самое).

и папку:

a.files.

В папке a.files лежат рисунки к тексту. Формулы тоже были преобразованы в рисунки.

Заходим в папку a.files. Там можно видеть рисунки в формате gif, jpg, png. Если Вы видете файлы с расширением wmz - значит, сохранили без фильтра! Это очень плохо, значит надо всё, что касается веб-страницы (папку с рисунками и файл html) стереть, а вордовый файл заново сохранить как Веб-страницу с фильтром. Рисунки wmz дублируют gif (то есть это то же самое), но они вряд ли понимаются СамИздатом, поэтому Вам надо сделать так, чтобы их не было вообще - то есть сохранить с фильтром.

Надо выделить рисунки и перенести их из пакиa.filesв ту же самую папку, где лежит файлa.html (как бы наружу, или иначе это называется - на уровень вверх, или в корень основной папки) . Это надо сделать обязательно - именно так мы начинаем подготавливать наш текст к тому, чтобы выложить его на Самиздате. Самиздат устроен так, как будто бы иллюстрации и сам файл лежат в одной папке (без внутренних подпапочек). Вот это мы и начинаем осуществлять, пока на своём домашнем компьютере.

Теперь, если вы запустите a.html, рисунков в тексте не будет. Потому что текст ищет рисунки в папке a.files, а их там уже нет!

И теперь важный шаг - как сделать так, чтобы наш файл снова нашёл картинки на новом месте: для этого открываем его блокнотом (его можно найти в меню "Пуск" → Программы → Стандартные → Блокнот.

(Продвинутые пользователи могут воспользоваться и вордом, если знают как, - он быстрее работает).

Либо, если у вас установлен Windows Commander или Total Commander достаточно просто выбрать Ваш файл a.html и нажать F4 edit - можно как на клавиатуре (F4), так и в самом окне программы Commander.

Открыли Блокнотом - следующий шаг - зайти в меню Блокнота - "правка" и выбрать там "Заменить". Откроется окошко с двумя строчками. Первая строка "Что" - сюда вписываем

a.files/

Обратите внимание, что после a.files стоит слеш / - его обязательно надо написать, сразу без пробела!

Вторую строку "Чем" - оставляем пустой, поскольку нам надо все такие фрагменты текста попросту убрать. Это ссылка на нашу папку, где раньше лежали картинки, теперь они в ней не лежат, а лежат в той же папке, где и файл, поэтому эту часть и надо убрать, чтобы файл картинки в ней не искал.

Далее, написав эту строку нажимаем "Заменить всё". И если открытый нами текст поехал вниз - это хороший признак, значит замена пошла. Если ничего не произошло - значит, мы набрали название папки с ошибкой. То ли а у нас не латинская "а" русская (тогда следует попробовать набрать вместо латинской русскую "а" и нажать кнопку ещё раз) то ли что-то другое не так.

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

Теперь можно сменить Вашему файлу название переименовав его как Вам нравится. Только не изменяйте расширение. Если оно html, можно сократить до htm, но ни на что другое менять нельзя.

Теперь, если картинок много, их можно все запаковать в один zip (rar, arj) архив, и загрузить на СИ все вместе.

Но сначала надо загрузить на СИ ваш файл, а уже потом нажать кнопку Edit, далее надпись - редактировать иллюстрации, и уже там загрузить ваш архив с картинками. Или, если Вы их не стали запаковывать - придётся грузить по одной.

Лучше использовать zip-архив, с ним, обычно, проблем не бывает. rar постоянно изобретает новые версии, и могут возникнуть проблемы, что сервер просто не сможет с этой новой версией справиться.

С ворд-файлом, содержащим большое количество картинок и формул всё. Далее инструкции для тех, кто создал текст без картинок, а картинки добавлять будет потом.

Добавление простых иллюстраций

Можно добавлять их в уже загруженный файл, открыв его при помощи textedit, а можно заранее на своём домашнем компьютере подготовить Ваш файл как Web-страницу и вставить картинки на нужные места.

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

Так что кратенько познакомимся с тем, что же такое HTML - с самыми элементарными вещами.

Основы HTML применительно к СамИздату

Если открыть загруженный на СИ текст или сохранённую вордом Web-страницу с фильтром, то можно видеть какие-то надписи в угловых скобках. Это управляющие команды, которые называются называются тегами. Тег бывает открывающий <тег> и закрывающий </тег> - со слешем впереди. Теги отделяют одни объекты от других, и к тому, что между ними могут быть применены некоторые свойства, указанные в открывающем теге.

Так, например текст, заключённый между тегами <a> и </a> будет либо ссылкой либо якорем, в зависимости от того, какой атрибут мы укажем в открывающем теге.

Если указать <a href="адрес_файла">текст_ссылки</a> - то будет ссылка, которая отправляет нас по указанному адресу. Адреса могут быть в Интернете, они начинаются с http:// - адреса в режиме передачи страниц, наиболее распространённые и доступные, ftp:// - адреса в режиме передачи файлов, или локальные, они начинаются прямо с местопололжения файла. Адрес какой-либо отдельной странички на сайте можно узнать, если посмотреть в адресную строку браузера. Там он написан. Его можно скопировать и вставить после надписи href="" в кавычки. Тогда будет ссылка на эту страницу.

Примечание (важно): на СИ в некоторых случаях ссылки надо помещать без кавычек, потому что иначе они глючат. Без кавычек ссылки надо вставлять в поля для аннотаций. В сам текст можно и с кавычками.

Так например, тег <p> открывает абзац. </p> означает что абзац кончился, делается перевод строки.

В открывающем теге абзаца можно указать, например, такое свойство как выравнивание:

<p align="left"> - абзац будет выровнен по левому краю

<p align="right"> - по правому

<p align="center"> - по центру

<p align="justify"> - по ширине

Можно ли определить для абзацев отступ с красной строки и интервал между абзацами? Вообще можно, но конкретно на СИ - нельзя. Так что отступ с красной строки придётся набивать пробелами, при том не простыми, а неразрывными, которые в HTML-коде набираются как   (всё, что выделено жирным надо повторить - от значка амперсанта (&) до точки с запятой). Несколько простых пробелов подряд, набиваемых клавишей Space (длинная клавиша для оставления пробелов) в HTML воспринимаются как один.

Если не хотите с этим мучиться, вместо <p> надо использовать другой тег <dd>, он с красной строкой.

Теги заголовков аналогичны тегам абзацев, только заголовки крупнее обычного текста. Тег заголовков: <h1> <h2> <h3> <h4> <h5> <h6>. В порядке возрастания номера заголовка, уменьшается размер шрифта. Не забывайте, что каждому типу заголовка и тегу <dd> нужен соответствующий закрывающий тег, а так же для заголовков можно указать выравнивание, такое же, как и для абзацев. Сами заголовки тоже можно использовать как абзацы при желании.

Картинка сама по себе вставляется при помощи такого тега, к которому закрывающий тег не нужен. Это тег

<img src="путь_к_файлу_с_картинкой/имя_файла_с_картинкой.расширение">

Чтобы вставлять загруженную на СИ иллюстрацию в тело текста (не на задний план и не на поля, а именно в текст), пути к файлу с картиной указывать не надо. Хотя файлы с картинками на СИ хранятся не там же, где файлы с текстом, Программист Сайта сделал так, что ваш файл находит иллюстрации и без указания пути к ним. Это хорошо, это упрощает нам жизнь. Когда Вы на своём домашнем компьютере подготавливаете файл уже в виде WEB-страницы, можете вставить иллюстрации заранее и сразу посмотреть, вставились они или нет. Для этого файл надо преобразовать в веб-страницу (если это делает ворд - обязательно брать веб-страницу с фильтром!). Картинки поместить в ту же папку, где находится Ваш файл (веб-страница), а в саму веб-страницу в нужные места добавить теги картинок:

<img src="имя_файла_с_картинкой.расширение">

Далее можно запустить ваш файл и посмотреть, как в нём выглядят картинки. А потом уже загружать и файл и картинки на СИ.

Можно пойти другим путём - менее удобным: сначала загрузить Ваш текст на СамИздат, потом при помощи опции textedit открыть ваш текст и в окне редактора вписать такие команды в нужные места.

Подробнее об оформлении текста читайте здась: Белоглазов Артем Ирекович: Html и Самиздат. Здесь очень подробно написано, что такое HTML-формат и как им пользоваться (именно применительно к СамИздату, что немаловажно). Дело в том, что язык HTML имеет куда как больше возможностей, чем позволяет СамИздат, и в виду этих ограничений, пользователям СамИздата нет смысла разбираться во всех возможностях языка НТМL, поскольку их всё равно на СИ никак не задействовать.

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

В тексте Белоглазова Артёма довольно подробно и правильно написано, как придать тексту дополнительное оформление. Но очень мало сказано о картинках. Например, нет ничего о том, как добавить картинку на задний фон или в аннотацию.

Добавление картинок на задний фон

Здесь, к сожалению, СамИздат не воспринимает файлы с картинками так, словно они лежат в той же папке, где и файл с текстом. Поэтому, чтобы вставлять картинки на задний фон или по бокам текста, придётся указывать полный путь до файлов с картинками.

Сначала просто познакомимся с тем, как в принципе помещаются картинки на задний фон.

Чтобы вообще создать задний фон какого-либо цвета (на СамИздате), текст надо поместить в табличку. Об этом написано у Артёма Белоглазова. Чтобы сделать задний фон или орнамент по бокам текста - текст тоже надо поместить в табличку. И сейчас мы рассмотрим, как именно.

Пример 1. Орнамент по бокам

Если надо сделать орнамент по бокам, как в этом файле, Вам понадобятся соответствующие кусочки орнамента. У меня они выглядят так:

И имеют ширину по 80 пикселей каждый. У вас ширина может быть другая, но она должна соответствовать ширине краёв. Особено это касается правого края. Чтобы добавить их на бока текста, надо весь текст поместить в таблицу с тремя столбцами. Ниже приведён HTML-код такой таблицы. Жирным шрифтом приведён сам код, а тонким - комментарии. В конечном HTML-коде в таких местах не должно быть никаких текстовых строк, они могут повредить таблицу. Как говорилось выше, в единой структуре, каковой является таблица, ничего вставлять между двумя открывающими или двумя закрывающими тегами нельзя.

HTML-код таблицы

<table width="100%" border="0" cellpadding="5" cellspacing="0">

Тег, открывающий таблицу. Здесь указываются свойства, общие для всей таблицы

width - ширина таблицы. Указывать можно в процентах или если знак процентов опустить, то ширина таблицы будет отсчитываться в пикселях. Параметр ширины можно не указывать вообще, тогда таблица сама будет подгонять свои размеры, в зависимости от того, сколько в ней текста.

border - толщина рамки таблицы. Если указать равным нулю, рамка будет невидимой.

cellpadding - отступ от краёв ячеек таблицы. Если таблица с видимой рамкой или все ячейки планируется заполнять текстом, лучше сделать больше нуля.

cellspacing - расстояние между самими ячейками таблицы. На картинке ниже показано, что это значит

Если мы хотим использовать таблицу из трёх столбцов для того, чтобы добавить боковики как в этом файле, у нас cellspacing="0" - должно быть равно нулю, иначе будут нежелательные щели между боковиками и серединой.

<tr> - открывает строку таблицы. По правилам сначала надо создать строку, потом уже в ней - нужное количество столбцов. Во всех строках число столбцов должно быть одинаковым. Либо, оно может быть разным, но только если для столбцов используется специальный параметр colspan, в котором, например, можно указать, что данный столбец текущей строки надо растянуть на несколько столбцов других строк - например <td colspan="n">. Вместо n надо подставить целое число. Эта запись значит, что данный столбец представляет собой n объединённых в один столбцов. В строке, содержащей такой столбец, общее число столбцов должно быть меньше, чем в остальных на n-1 столбец. И такой столбец не может быть последним в строке, ему должно "хватить места", он можт быть по счёту не меньше чем n-й от конца!

<td background="путь_к_файлу_с_картинкой/имя_файла_с_картинкой" width="80" >&nbsp;</td>

открывает и закрывает столбец. Вместо &nbsp; можно что-нибудь написать или вставить фрагменты текста, с тегами абзацов, заголовков или <dd>. Так же можно вставить картинку. Но в моём случае этот столбец остаётся пустым. Если ничего не пишете и не вставляете, столбец обязательно должен содержать этот знак &nbsp;. параметр background как раз определяет, какая картинка будет задним фоном столбца. Но здесь не даром написано, что указать надо не только имя файла, но и путь. Потому что СИ просто по имени файла в качестве заднего фона картинки не вставляет. Как указать путь - об этом позже. Параметр width определяет ширину столбца, она может быть либо в процентах (не ставьте больше ста), либо если знак процента опущен - в пикселях. Если вы в крайний столбец помещаете орнамент, то его ширина должна соответствовать ширине орнамента.

<td bgcolor="#EFF7EF">

Это открывающий тег столбца. В нашем случае это средний столбец, для основного текста. Здесь присутствует параметр bgcolor - это цвет заднего фона столбца. Его надо указывать в шестнадцатиричном виде, или можно писать словами Black -чёрный, white - белый и др.. И знак # тогда писать не следует. Но словами передаётся только ограниченное число оттенков. Цифрами - куда больше. Можно и в средний столбец поместить вместо цвета картинку на задний фон, точно так же, как и в первый столбец.

В средний столбец мы помещаем основной наш текст - со всеми тегами, например:

<h1>заголовок текста</h1>

<img src="имя файла с картинкой.расширение">

<h2>название главы</h2>

<p>абзац1</p>

<p>абзац2</p>

и т.д.

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

</td> - не забудем закрыть наш столбец!

<td background="путь_к_файлу_с_картинкой/имя_файла_с_картинкой" width="80">&nbsp;</td> - это у нас третий столбец, тоже боковик. Сюда, судя по всему, на задний план надо вставить другую картинку.

</tr> - закрывает строку.

Далее можно открыть ещё одну строку. Здесь приведена такая же, но можно поместить в боковики другие картинки.

<tr>

<td background="путь_к_файлу_с_картинкой/имя_файла_с_картинкой" width="80" >&nbsp;</td>

<td bgcolor="#EFF7EF">&nbsp;</td>.

<td background="путь_к_файлу_с_картинкой/имя_файла_с_картинкой" width="80">&nbsp;</td>

</tr>

</table> - закрывает таблицу.

Вообще, если текст большой, лучше его весь в одну таблицу не помещать, а то он будет долго грузится и до третьего столбца дело дойдёт ой как не скоро!

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

А это уже другая таблица с другим рисунком. Здесь один рисунок помещён на задний фон сразу всей таблицы: Она открывается тегом с такими параметрами:

<table background="путь_к_файлу_с_картинкой/имя_файла_с_картинкой"...>

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

Указание пути до файла с картинкой

Итак, как же разместить картинки на задний план таблицы или её отдельного столбца?

Более простой и надёжный способ: для тех, кто пользуется Internet Explorer или броузерами, поддерживающими описанные ниже возможности.

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

То есть, если вы пользуетесь для обзора Интернета Internet Explorer или чем-то похожим, можно как только загрузятся ваши иллюстрации и отобразятся маленькие их изображения, сразу кликнуть правой кнопкой мыши по изображению и выбрать в появившемся меню "свойства".

Оно выглядит примерно так:

Здесь красным обведён адрес картинки вместе с её именем. Именно всю эту надпись надо вставлять в параметр bacground="сюда вставлять" для целой таблицы или для отдельных её столбцов.

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

<img src="полный_адрес_картинки/имя_файла_с_картинкой.расширение">

В Internet Explorer можно просто выделить всю эту строчку и скопировать, нажав CTRL+C или кликнув по выделенному тексту правой кнопкой мыши и выбрав в появившемся меню "копировать" (copy). Потом, в кавычки тега <img src=""> вставить скопированный адрес при помощи CTRL+V (предворительно поместив курсор между кавычек) либо нажав правую кнопку мыши и выбрав "вставить" (paste).

Аналогично полный адрес картинок копируется для тех картинок, которые мы помещаем на задний фон.

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

Начинается адрес с http://samlib.ru/img - эта часть адреса будет у всех пользователей одинаковой.

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

http://samlib.ru/img/ваша буква/имя с которым вы регистрировались/имя которое вы дал _файлу/имя файла с картинкой.расширение

Чтобы не ошибиться, лучше всё это хотя бы один раз посмотреть и скопировать. Ведь там всё записывается латиницей. Эта часть:

http://samlib.ru/img/ваша буква/имя с которым вы регистрировались/

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

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

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

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

<table border="0">

<tr>

<td>

<img src="/img/ваша буква/имя с которым вы регистрировались/имя которое вы дал _файлу/имя файла с картинкой.расширение">

</td>

<td>

текст аннотации, здесь можно использовать теги абзацев, заголовков (очень не желательно, поскольку создаёт загромождения) и теги ссылок <a href="адрес ссылки">текст ссылки</a>

</td>

</tr>

</table>

Примерно так.

В аннотацию лучше вставлять маленькие картинки - маленькие по объёму, потому что если в вашей странице на СИ будет много больших картинок, то при открытии такой страницы у пользователя нагрузится сразу много килобайт, и он Вам за это спасибо не скажет. Те, у кого интернет платный, будут не в восторге.

Внимание (важно). Если вставляете картинку в аннотацию, в теге <src=/img/ваша буква/имя с которым вы регистрировались/имя которое вы дал _файлу/имя файла с картинкой.расширение> Надо убрать кавычки обязательно, иначе будет глючить.

Как лучше размещать большие картинки?

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

Обратите внимание, что нужна именно маленькая копия большой картинки, а не ужатая в маленький прямоугольник большая картинка.

Ведь большую картинку можно показать в уменьшенном виде, если в теге вставки картинки указать для неё размеры:

<img src="картинка" width="100" height="50">

width и heigh - ширина и высота, с которыми отображается картинка. Картинка может быть очень большой, но если указать для неё малые значения ширины и высоты, она ужмётся в маленький прямоугольничек, будет ничего не разглядеть, но грузиться всё равно будет долго и медленно, и съест у читателей трафик. Так что уменьшенная копия - должна быть отдельным, изначально маленьким файлом, размером 5-50 кб.

Большой файл может быть и 2 МБ, если вы считаете, что картинка достойна такой чести, но загружаться она должна не вместе с текстом, а когда читатель сам захочет её загрузить. И неплохо бы предупредить читателя о размере загружаемой картинки. Ниже показан пример, как это должно выглядеть:

Ссылку на картинку дать можно так:

<a href="полный адрес картинки " target="_blank">текст ссылки <img src="имя уменьшенной копии картинки.расширение"></a>

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

или (большая картинка 213 кб)

Здесь о маленькая картинка сделана отдельным файлом,она действительно маленькая - 16 кб. Чтобы посмотреть большую картинку 213 кб, можно кликнуть по надписи. Размещая иллюстрации к тексту таким вот образом, можно избежать излишнего загромождения текста. Текст будет загружаться быстрее. А если картинка читателя заинтресует, он сможет открыть её отдельно и посмотреть в полный размер. И это тоже будет удобно.

Что интересно - большая картинка откроется в новом окне. Этого мы достигли приписав в параметрах ссылки на картинку target="_blank", что и означает открытие ссылки в новом окне. Для просмотра отдельных картинок такой вариант ссылок наиболее удобен. target="_blank" можно с таким же успехом использовать и для ссылок на странички.

И напоследок: как разместить картинку по центру? Для этого надо поместить картинку между тегами абзаца <p align="center"></p> для открывающего тега указать выравнивание по центру: align="center". В стандартном HTML это можно сделать проще: <img src="путь к файлу с картинкой/название картинки.расширение" align="center">, то есть добавить параметр выравнивания в сам тег картинки. Но СамИздат почему-то такое не поддерживает, так что на СИ чтобы выровнять картинку по центру, надо обязательно поместить её в тег абзаца.