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

В большинстве случаев, для написания поста в блог, не требуется каких-либо специальных знаний, кроме начальных знаний по работе с браузером и форматированием текста в 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 (русский)

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

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

Если вам понравился этот блог, вы можете подписаться на обновления блога через RSS ленту, или по E-Mail. Спасибо за визит!

Теги: ,

Эта запись была написана 06.11.2007 в 9:04 дп в категорию Блоги для начинающих .
Вы можете следить за отзывами с помощью RSS 2.0 ленты.
Вы можете оставить отзыв, или ссылку с вашего сайта.