Основы HTML для блоггера

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

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

  1. Дмитрий Игошин Написал(а):

    Думаю не лишним для ночиков будет сказать, что если вы не можете вставить две картинки рядом...то самый простой способ это сделать табличку, разбить её на две ячейки...в каждую ячейку запихать по картнке. Присвоить таблинце border=0 и ячейкам valign="top"

    -)

    А вообще все указанные выше теги есть во встроенной помогалке друпала...и вордпреса думаю тоже есть. и в ЖЖ вроде были.

    так что не актуально — (

  2. olek Написал(а):

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

  3. dima Написал(а):

    а вот хочу изменить гарнитуру и размер шрифта в названии блога на арт какую-нибудь. Как?

    Спасибо заранее.

  4. Таня Написал(а):

    Подскажите как вставить в блог "tag".

    И как сделать в "поплавке" ссылку на "таги"

  5. AntJeka Написал(а):

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

    У меня небольшой вопрос: а как сделать текст жирный и курсивный одновременно: вложить в , или наоборот? Как правильней будет?

2 Ссылки на эту запись

  1. 11 пунктов, которые спасут текст на вашем сайте. : Бизнес Дизайн Написал(а):

    [...] не разбирается в HTML коде Дмитрий Донченко написал замечательную статью для новичков, а дизайн для мастеров порадовал [...]

  2. Orbit Blog » 27 секретов успешного блоггинга. Написал(а):

    [...] 16. Изучите немного HTML, буквально кусочек. Узнайте, например, как корректно вставлять ссылки, как добавлять фотографии, как делать текст полужирным. Например, я должен был узнать, как опубликовать пронумерованный список с “ol” начинающийся с = “10 ?, чтобы написать этот пост.(Sphinn.Ru: начинающим могу посоветовать этот пост Дмитрия Донченко) [...]

Оставьте комментарий Ваш шанс быть услышанным!