Основы HTML для блоггера.
06.11.2007Большинство современных движков для блогов снабжается визуальным интерфейсом для написания постов, это делается для облегчения задачи форматирования текста.
В большинстве случаев, для написания поста в блог, не требуется каких-либо специальных знаний, кроме начальных знаний по работе с браузером и форматированием текста в 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) рассказывает о том, куда потратить деньги заработанные с блога.
Если вам понравился этот блог, вы можете подписаться на обновления блога через RSS ленту, или по E-Mail. Спасибо за визит!
Теги: HTML, Блоги для начинающих
Здесь я делюсь знаниями и идеями, открытиями и опытом, связанными с моими увлечениями и работой. Большинство материалов на этом сайте, связаны с ведением блогов, дизайном блогов, их раскруткой, а также короткие обзоры и советы как заработать деньги в Интернет
Что такое RSS?
