|
Обсудить в форуме
Лирическое отступление.
Написать этот «монументальный» документ :) я собирался давно. Да
все откладывал. Сподвиг меня на это тот бардак, который присутствует в
письмах, присылаемых в клуб для публикации. Думаю эта статья очень пригодится
всем.
Часть первая. Введение.
HTML - это язык разметки (форматирования) текста. Не пугайтесь :).
На самом деле все очень просто. Когда Вы пишете письмо или иной документ, то
согласно правилам родного языка выделяете абзацы, ставите запятые, параграфы,
некоторые слова пишете жирным шрифтом, чтобы их выделить и акцентировать на
них внимание, другие пишете наклонным шрифтом или подчеркнутым - все эти
действия называются форматированием текста, чтобы Ваш окончательный вариант
выглядел удобочитаемым и грамотным.
В современных редакторах таких, как MS Word (MS-Office),
Writer (OpenOffice) и других существует целый ряд инструментов для
форматирования набранного Вами текста. Причем Вы сразу видите результат Ваших
действий. На самом деле Вы можете набрать текст в этих редакторах и сохранить
его в формате HTML и потом отправить в клуб, но этого делать не надо! Почему?
Потому, что все эти редакторы «очень умные» и вставляют в
HTML-документ кучу ненужного хлама, дополнительные стили, тэги и
прочее, которое все равно мне придется выкинуть, чтобы привести код документа
в нормальный вид для дальнейшей публикации на сайте.
Писать HTML-код лучше всего вручную, расставляя необходимые тэги
(указатели) форматирования по ходу набора текста. Набирать такой документ
лучше всего в так называемых plain/text-редакторах. К ним относятся -
встроенный редактор текста FAR-менеджера, встроенный с систему
Windows редактор Notepad (Блокнот). Можно набрать текст и в MS
Word, но тогда нужно будет сохранить файл на в формате doc, который
предлагается, а в формате «Текст MS-DOS с форматированием (*.asc)»,
который можно выбрать в режиме диалога «Сохранение документа», используя
раскрывающееся меню «Тип файла:».
Часть вторая. Пишем документ.
К примеру, Вам нужно послать в клуб такой документ:
|
Привет, мой друг!
Недавно побывал на Бермудах, на острове Св. Георга. Прекрасно отдохнул и набрался сил. Ты знаешь что это такое и где находится?
Бермудские острова (Bermudas) - это группа из 360 коралловых островов в Атлантическом океане, близ берегов Северной Америки. Принадлежат Канаде.
- Площадь - 50 кв.км.
- Обитаемых - всего 20.
- Число жителей - 17,5 тыс.
Важны как стоянка для кораблей и военная станция. Наибольший остров Бермуда с главным городом Гамильтон.
Вид на якорную стоянку (о. Св. Георга).
|
|
Создайте каталог на Вашем диске под названием Bermudi (C:\Bermudi),
в который мы поместим необходимые файлы-фотографии и будущий документ для
клуба. В этот каталог скопируем оригинальную фотографию (нормального размера)
bermudi01.jpg и ее уменьшенную копию для предосмотра
bermudi01s.jpg. Как уменьшить оригинал описано в
этой статье. Запускаем Notepad в русской
версии Windows он называется Блокнот и начинаем набирать текст.
Разберем по порядку весь код документа:
<html>
<body>
<p><b>Привет, мой друг!</b></p>
<p>Недавно побывал на Бермудах, на острове Св. Георга. Прекрасно отдохнул и набрался сил. Ты знаешь что это такое и где находится?</p>
<p>Бермудские острова (<b>Bermudas</b>) - это группа из <b>360</b> коралловых островов в Атлантическом океане, близ берегов Северной Америки. Принадлежат Канаде.</p>
<ul>
<li>Площадь - 50 кв.км.</li>
<li>Обитаемых - всего 20.</li>
<li>Число жителей - 17,5 тыс.</li>
</ul>
<p>Важны как стоянка для кораблей и военная станция. Наибольший остров Бермуда с главным городом <b>Гамильтон</b>.
<p><a href="bermudi01.jpg"><img src="bermudi01s.jpg" border="0" alt="photo01"></a><br>Вид на якорную стоянку (о. Св. Георга).</p>
</body>
</html>
|
|
Открываем документ <html> (начало любого HTML-документа всегда
содержит этот тэг), следующий тэг <body> указывает на начало тела
документа. Между этими двумя строками могут содержаться дополнительные тэги
заглавия документа, темы, различные метатэги и тому подобные, но они выходят
за рамки нашей статьи, если Вы хотите можете самостоятельно ознакомиться с
ними по учебникам языка HTML.
Далее с новой строки - тэг <p> набираем жирным шрифтом - тэг
<b> - приветствие письма. Когда нам нужно закончить выделение текста
жирным шрифтом используем тэг </b>.
Примечание: Закрывающий тэг аналогичен открывающему с добавлением косой черты.
Приветствие закончилось - значит нужно закрыть абзац тэгом </p>. В
итоге получили - Привет, мой друг! Как видите все очень просто.
Аналогично поступаем со следующими двумя абзацами.
Теперь займемся списком перечисленных характеристик острова. Начало списка
открывается тэгом <ul>, а элементы списка тегом <li>. Закрытие
происходит аналогичными тегами с косой чертой.
Про стоянку кораблей, надеюсь, уже понятно как набирать.
Осталась совсем небольшая часть, как вставлять в документ картинки.
Открываем новый абзац, тэг уже Вы должны были запомнить :). Сылка на рисунок
открывается тэгом <a href="">, а в кавычках мы вписываем название
оригинала bermudi01.jpg, для того чтобы сразу в документе увидеть фото
нужно указать его уменьшенный аналог. Для этого используется тэг <img src="">, в кавычках которого вписываем название уменьшенного файла
bermudi01s.jpg. Ну и конечно, надо не забыть закрыть ссылку на фото
тэгом </a>. Тэг <img src=""> закрывать не нужно.
В тэге <img src=""> присутствуют два дополнительных параметра:
- border="0" - уберет рамку ссылки вокруг фотографии. Для сравнения приведу тоже фото, но без этого параметра (на мой взгляд не очень смотрится, поэтому я использую этот параметр):
- alt="photo01" - этот параметр нужен для неграфических броузеров. В неграфических броузерах (Lynx, Links) изображения не видны и вместо них подставляется то, что указано в кавычках alt.
Обычно под изображением нужно указать, что же все-таки там изображено.
Пусть небольшое, но описание. Чтобы описание было прямо под картинкой
используем тэг перевода строки <br>. Вот мы и создали документ.
После этого нам необходимо закрыть сначала тело документа тэгом
</body> и окончательно завершить документ тэгом </html>. Результат
Ваших действий изображен на следующем рисунке:
Теперь нужно сохранить документ на диске в каталоге Bermudi с
названием bermudi.txt через меню Файл - Сохранить.
В каталоге C:\Bermudi находятся три файла, которые и нужно
прикрепить к письму для клуба:
Вот и все. Согласитесь - это очень и очень просто.
Важные дополнения:
-
Имя любого файла, посылаемого в клуб для публикации должно быть маленькими
(строчными) латинскими буквами.
Вы все привыкли, что при получении в письме фотографии, можете сразу же
просмотреть ее в почтовом клиенте. У меня неграфический почтовый клиент
mutt, я все равно не вижу присылаемых фотографий, я их сохраняю на
диске, а потом просматриваю и редактирую.
Вот наглядные пример «неудобного» письма - обратите внимание на Вложение #2 - это и есть фотография, в имени файла которой содержатся русские символы:
А вот пример удобочитаемого письма:
-
Фотографии, которые нужно опубликовать в Internet-е должны представлять
собой файлы (отсканированные документы или снятые с иных носителей, к примеру,
флешка фотоаппарата) следующих форматов: png, jpg, gif.
Если Вы сосканировали фотографию с помощью сканера, и получили файл иного
формата, то Вам необходимо переконвертировать полученный файл. К примеру, зачастую
сканирующие программы сохраняют файл в формате bmp. Файлы получаются
килобайтно—большие, даже сказать огромные.
Поэтому, если Вас угораздило сохранить фотографии не в
png, jpg или gif, то необходимо или заново просканировать
с сохранением в нужный формат или, используя редактор графических файлов,
переконвертировать файлы.
Bmp - формат, изобретенный в свое врямя известнейшей компанией Microsoft,
сохраняет картинку без потери качества. Оптимален для размещения картинок на рабочем
столе - это его основное назначение, больше ни для чего он не годится, а уж для
размещения в Internet-е тем более.
- В имени файла не должно быть пробелов, пробел можно заменить на тире или подчеркивание.
Неправильно: bermudi 01.jpg.
Правильно: bermudi01.jpg, bermudi-01.jpg, bermudi_01.jpg.
- Что означает буквочка s в имени файла уменьшенного оригинала bermudi01s.jpg? Это просто для удобства я так именую файлы при уменьшении - s означает сокращенно small - «маленький».
-
Если Вы посылаете в клуб для публикации 15 фотографий, то сделайте
15 файлов с именами, к примеру, photo01.jpg, photo02.jpg,
… , photo15.jpg, напишите текстом по порядку описания к каждой
фотографии и вышлите.
Почему лучше делать имена файлов photo01.jpg, photo12.jpg, а
не photo1.jpg, photo12.jpg (1 в 01, 2 в 02 и так далее)?
Взгляните на рисунки - на левом выглядит значительно красивее и ровнее:
 
А вот, что я вижу, работая с файлами для клуба:
На левой панели идеальный порядок в плане сортировки, а на правой порядок
уже нарушен. К тому же, редактируя странички, значительно удобнее совершать
блоковые перестановки (copy/paste), если все файлы в названии имеют одинаковое
количество символов.
Пример такой перестановки. Мне нужно заменить быстро и за минимум нажатий
клавиш все значения параметра alt, приведя их в соответствие с
названиями файлов фотографий.
Выделяем блоком колонку от 01 до 12, перемещаемся курсор
перед 01 (зеленый прямоугольник).
 
Вставляем выделенную колонку, она вставилась ровненько, потом выделяем
ненужный блок от 01 до 01 и удаляем его.
 
Представьте себе, как усложниться работа, если у Вас будет примерно такая
картина:
Конечно, при таком количестве кода и файлов это не сильно играет роли, но
если Вам надо править не 12, а 50 фотографий в коде поблочно, да и к томуже не
один файл, а несколько. Из небольшых частичек затраченного напрасно времени
складываются долги часы надоедливой работы. А сисадмины и программеры привыкли
рутинную работу максимально автоматизировать, дабы больше времени осталось на
пиво и сон :).
- Совет - лучше всего заархивировать каталог целиком и отослать одним архивным файлом. Единственное ограничение - такой архив не должен превышать 2 000 000 байт. Многотомные архивы из каталогов создаются, как и многотомные архивы из одного большого файла, об этом уже есть статья «Как разрезать файл?».
-
Пожалуйста, постарайтесь писать письма грамотно, соблюдая правила родного языка. Вот простой пример письма, которое мне для публикации все равно пришлось редактировать (Юляша, только не злись):
«Каждые выходные..точнее почти каждые..когда светит солнушко и
погодка ну просто прелесть...мы выбираемся на форелевое
хозяйство...отдохнуть...пожарить шашлык и половить рыбку... сразу
хочу сказать, что хоть это и громко звучит - форелевое хозяйство..но
в основном водоеме рыбка водится махонькая..в самый раз для нашего
кота...но у этой махонькой рыбки есть один большой плюс - ее там
много..поэтому рыбалка превращается просто в удовольствие - таскаешь
рыбку одну за другой..за что кот нам бывает благодарен..очень)))»
Я понимаю, что это обычный разговорный язык, но публиковать такое в клубе как-то не есть красиво. Пришлось переделать его и привести вот к такому виду:
«Каждые выходные, точнее почти каждые, когда светит солнушко и погодка ну просто прелесть мы выбираемся на форелевое хозяйство отдохнуть, пожарить шашлык и половить рыбку. Сразу хочу сказать, что хоть это и громко звучит - форелевое хозяйство, но в основном водоеме рыбка водится махонькая, в самый раз для нашего кота, но у этой махонькой рыбки есть один большой плюс - ее там много, поэтому рыбалка превращается просто в удовольствие - таскаешь рыбку одну за другой, за что кот нам бывает благодарен очень.»
-
Если Вы пишете HTML-документ для публикования в клубе, то учитывайте,
пожалуйста, «специфику экранного чтения, русских традиций, а также
совместимость с разными платформами и кодировками», - Артемий Лебедев.
Советую всем ознакомиться вот с этим документом - Экранная типографика. Вот его отрывок:
| Код | Вид | Описание |
| § | § | параграф |
| © | © | знак охраны авторского права (copyright) |
| ® | ® | символ зарегистрированного товарного знака |
| ™ | ™ | символ товарного знака |
| ° | ° | знак градуса |
| « | « | левая кавычка (левая ёлочка) |
| » | » | правая кавычка (правая ёлочка) |
| … | … | многоточие |
| ’ | ’ | апостроф |
| „ | „ | открывающая лапка |
| “ | “ | закрывающая лапка |
| “ | “ | открывающая английская лапка |
| ” | ” | закрывающая английская лапка |
| • | • | жирная точка |
| – | – | среднее тире (в русской типографике не используется) |
| − | − | минус |
| ± | ± | плюс-минус |
| — | — | тире |
| № | № | знак номера |
Фотография вида на якорную стоянку взята отсюда - http://www.omsknet.ru/pharos/GALL/Brmd/brmd.htm.
Написано: morihaos.
16.08.2004
|
