Блог про блоги от Дмитрия Донченко

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

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

Но так просто было не всегда, раньше для ведения блога, нужно было быть еще и HTML верстальщиком, что бы правильно отформатировать текст и вставить в него картинку или ссылку.

Я вспоминаю те времена, когда рисовал свою первую веб-страничку, это было 7 лет назад, я очень долго искал в Интернете (книг у меня тогда еще не было) каким же образом, сделать текст жирным, а еще сложнее подчеркнутым или перечеркнутым.

По правде говоря, я и сейчас предпочитаю пользоваться html-режимом форматирования постов в блоге, если конечно там не очень много нужно отформатировать.

Что такое HTML тег.

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

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

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

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

HTML теги для форматирования:

• <b>жирный</b>
• <strong>жирный</strong> (тоже что и <b>)
• <u>подчеркнутый</u>
• <i>курсив</i>
• <em>наклонный</em> (то же что и <i>)
• <strike>перечеркнутый</strike>
• <center>Текст отобразится в центре странички</center>
• <tt>телетайп</tt> (текст как на печатной машинке)
• <blockquotes>
  блок цитаты</blockquotes> — внешний вид этого блока, зависит от того, как он описан в вашем CSS файле.

Ссылки:

• Обычная ссылка <a href=”http://вашсайт.ком”>текст ссылки</a>
• E-mail ссылка <a href=”mailto:ваш@email.com”>текст ссылки</a>

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

Заголовки (Зависят от CSS):

• <h1>Важный заголовок</h1>
• <h2>Менее важный заголовок</h2>
• <h3>Еще менее важный заголовок</h3>
• <h6>Маленький заголовок</h6>

Изображения:

• Просто тег изображения — <img src=”http://сайт.ком/гдекартинка/лежит.jpg”> просто вписываете путь к картинке, которую хотите показать.
• Изображение с размерами — <img src=”http://сайт.ком/гдекартинка/лежит.jpg” width=”200? height=”150?>
• Выравнивание изображения влево — <img src=”картинка” align=left> (выравнивание ‘left’ и ‘right’ соответственно влево или вправо)
• Тег альтернативы — <img src=”картинка” alt=”краткое описание картинки”> (этот тег сообщит посетителю информацию о картинке, если картинка не загрузилась в его браузере.
• Изображение как ссылка — <a href=”путь ссылки”><img src=”адрес картинки”></a> (где путь ссылки это путь к страничке на которую должен попасть пользователь нажав на картинку).
• Изображение с рамкой — <img border=”1? src=”картинка”> (чем больше цифра в border “” тем жирнее рамка вокруг изображения)
• Пространство вокруг картинки <img src=”картинка” hspace=10 vspace=10> (hspace это горизонтальное пространство и vspace Это вертикальное пространство. Цифрами указывается количество пикселей пространства вокруг изображения. Эти параметры также зависят от вашего CSS файла.

Возможно, вы заметили, что тег <img> не имеет закрывающего тега, это правильно, кроме него есть еще несколько, которые также используются без закрывающего тега.

Теперь совместим все это вместе:

• <a href=”путь для ссылки”> <img border=”1? src=”путь к картинке” width=”65? height=”38? align=left hspace=10 vspace=10></a> (изображение, которое является ссылкой, установлена рамка 1 пиксель, размер изображения 65 пикселей в ширину и 38 пикселей в высоту, изображение выравнивается по левому краю, и вокруг него пустое пространство на 10 пикселей по вертикали и горизонтали).

Маркированный список (тот который с точечками):

• <ul>
• <li>первый пункт</li>
• <li>второй пункт</li>
• <li>третий пункт</li>
• </ul>

Нумерованный список (тот который с циферками):

• <ol>
• <li>первый пункт</li>
• <li>второй пункт</li>
• <li>третий пункт</li>
• </ol>

И как обычно, ссылки по теме:
HTML на Wikipedia
Руководство по изучению HTML (русский)
Руководство №2 по изучению HTML (русский)

Данная статья написана в категории “Блоги для начинающих“, статьи из этой категории нужно рассматривать как приглашение к обсуждению. Если вам есть что дополнить по этой теме, оставляйте свои комментарии.

С этого поста я хочу ввести некое подобие постового, как это делают многие блоггеры. Почему они это делают? Потому что одним из главных правил ведения блога, является «Ссылайтесь на другие блоги, и они будут ссылаться на вас.»Именно поэтому, вам при написании поста, необходимо иногда делать ссылки на интересные блоги, или на блоги ваших друзей и знакомых. Т.к. в тексте не всегда уместно делать ссылку на другой блог, эти ссылки выносят в конец поста. Некоторые типа Дмитрия Давыдова, на этом зарабатывают деньги, делая размещение вашего блога в постовом, за небольшую денежку.В любом случае, я считаю что постовой это не вредно, а иногда даже полезно для вас, мои дорогие читатели.

• Илья Рабченок, дает каждому 5 бесплатных советов по улучшению блога и поисковой оптимизации.
• Данил (MaulNet) рассказывает о том, куда потратить деньги заработанные с блога.