Первоначально страница была предназначена для пользователей форума журнала Натали, но, после перехода форума на новый движок, информация устарела. Вы можете продолжать пользоваться данной страницей для постижения азов программирования на HTML.
Предисловие
Данный форум не обладает привычной для многих функциональностью, то есть в нём не работают BBCode (тэги в квадратных скобках []), нет возможности редактировать или удалять сообщения. Это накладывает определённые ограничения, но с другой стороны - надо мыслить позитивно - это поможет подстроиться под неудобную "среду обитания".
"Движок" данного форума - HTML-евский. Этот факт дал мне основания полагать, что внесенные в сообщение команды (тэги) HTML должны нормально отображаться. Конечно, только в том случае, если в коде небыли допущены ошибки. Поэтому для начала я хочу показать, как организовать себе предварительный просмотр перед публикацией сообщения содержащего всякие красивости...
Предварительный просмотр перед публикацией
Этот раздел не важен если вы готовите код для Живого Журнала. Предварительный просмотр можно делать нажав кнопку "Просмотр". Соответственно, для Живого Журнала не нужно использовать тэги <html><body></body></html>.
Для начала создайте на рабочем столе текстовый документ. Для этого откройте блокнот (Notepad) (Start -> Programs -> Accessories -> Notepad), выделите и скопируйте в него следующий текст:
<html><body>
</body></html>
Это тэги открытия и закрытия HTML документа. Всë что будет написано между этими двумя строками будет телом
документа, но не сейчас... Сохраним наш документ: Файл (File) -> Сохранить как... (Save As...). Откроется окно сохранения, где внизу, в строке Тип файла (Save as type) нужно выбрать Все файлы (All Files). После чего, в строке Имя файла (File Name)
пишем название файла с расширением htm (например: nataly.htm). Слева выберите Рабочий стол (Desktop) и можете сохранять - жмите Сохранить (Save), и закрывайте блокнот. Сложно?! Испугались?! Не бойтесь, это нужно проделать только один раз. Далее. Взгляните на рабочий стол, там вы найдëте интернет документ nataly, двойной
щелчок по которому откроет вам чистый лист в обозревателе виндовс - это ваша первая победа! В этом окне Вид (View) -> Просмотр HTML кода (Source) откроет вам тот же самый блокнот, с теми же, описанными выше строчками. Начинаем писать между этих строк (обычно, между строк читают, хе-хе):
Например:
<html><body>
Hello World!
</body></html>
Сохраните (Файл (File) -> Сохранить (Save)), переключитесь к обозревателю и нажмите Обновить (Refresh) или кнопку F5. На,
когда-то белом фоне, появится надпись Hello World! Это ваша вторая победа! Начиная с этого момента всë что вы напишите вместо Hello World!, после сохранения в блокноте и обновления, появится в вашем обозревателе в том самом виде, в котором оно появится в форуме Натали если вы скопируете это в форум. Копировать нужно из блокнота, без <html><body></body></html>!!! Попробуем заменить Hello World! на картинку. Для это, естественно удалим Hello World! и напишем вмето него <img src="http://dandrey.users.photofile.ru/photo/dandrey/3840612/xlarge/90122414.jpg"> Должно получиться следующее:
<html><body>
<img src="http://dandrey.users.photofile.ru/photo/dandrey/3840612/xlarge/90122414.jpg">
</body></html>
Сохраните, обновите - получилось? Наслаждайтесь! Правда, есть одно НО! В HTML есть специальный тэг перехода строки <br>, то есть ели вы нажмёте энтер в блокноте, это никак не отразится на результате в обозревателе, но, будучи скопированным в натали, может потерять всякий смысл. Поэтому рекомендую готовить заготовки не длиннее одной строки. Это же касается и Живого Журнала
Перейдём к работе с текстом в HTML.
Простейшие тэги:
Стили:
<b>Жирный</b>
<i>Наклонный</i>
<u>Подчëркнутый</u>
<s>
Можно комбинировать:
<b><i>Жирный / Наклонный</i></b>
<b><u>Жирный / Подчëркнутый</u></b>
<i><u>Наклонный / Подчëркнутый</u></i>
<b><i><u>Жирный / Наклонный / Подчëркнутый</u></i></b>
Шрифтом управляет тэг <font> с опциями size и color:
<font size=+1>Размер шрифта +1</font>
<font size=+2>Размер шрифта +2</font>
<font size=-1>Размер шрифта -1</font>
<font size=-2>Размер шрифта -2</font>
<font color=red>Красный</font> , <font color=green>Зелëный</font> , <font color=blue>Синий</font>
... Цвета которые можно применять в параметре color:
Black, Silver, Gray, White, Maroon, Red, Purple, Fuchsia, Green, Lime, Olive, Yellow, Navy, Blue, Teal, Aqua.
Можно комбинировать, но немного не так как со стилем:
<font size=+1 color=red>Размер шрифта +1 / Красный</font>
Можно добавить стили:
<b><font size=+1 color=red>Размер шрифта +1 / Красный / Жирный</font></b>
Гиперссылки и картинки
Теперь вы можете размещать активные ссылки (во избежание недоразумений ссылки рекомендую заключать в кавычки):
<a href="http://www.nataly.com.ua/" target=_blank>http://www.nataly.com.ua/</a>
<a href="http://www.nataly.com.ua/" target=_blank>НАТАЛИ</a>
target=_blank - говорит что ссылка должна быть открыта в новом окне. Если этого не указать - ссылка откроется в этом же окне.
Также, зная адрес картинки, вы можете вставлять картинку:
<img src="http://www.nataly.com.ua/materials/i/f883_cover135.jpg" title="журнал НАТАЛИ июнь 2004">
title="журнал НАТАЛИ июнь 2004" - в данном случае, это текст, который появиться при остановке курсора мыши на картинке.
<img src="http://www.nataly.com.ua/materials/i/f883_cover135.jpg">
Обратите внимание, что при наведении курсора мыши на вторую картинку текст не появляется.
... Смайлики, которые вы найдëте на других форумах, такие же картинки, как и все, и вставляются точно так же.
... Чтобы узнать адрес картинки нажните на ней правой кнопкой мыши -> Свойства (Properties) -> из строки Адрес (Address) (URL) выделите и скопируйте адрес картинки
ВНИМАНИЕ: На этом форуме нет разделения тем на
страницы! Поэтому рекомендую вставлять только маленькие изображения! В противном случае тема станет неоткрываемой!
Здесь тоже можно комбинировать:
<a href="http://www.nataly.com.ua/materials/show.html?p=10&id=883"><img src="http://www.nataly.com.ua/materials/i/f883_cover135.jpg" title="журнал НАТАЛИ июнь 2004" border=0></a>
... Обратите внимание, что в данном случае картинка является ссылкой!
Чтобы было понятнее:
"http://www.nataly.com.ua/materials/show.html?p=10&id=883" - адрес
страницы на которую ссылается ссылка.
"http://www.nataly.com.ua/materials/i/f883_cover135.jpg" - адрес картинки которая
будет показана.
Ну что? Понюхали пороху? Всё здесь описанное трудно назвать даже основами, но вполне достаточно для оформления журнала без использования Визуального Редактора. Пользователям ЖЖ так же очень пригодится список тэгов предназначенных непосредственно для ЖЖ:
Желаю удачи!
Комментариев нет:
Отправить комментарий