Урок 1. Немного теории. Простейшая рамка.
 

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

Когда мы добавляем информацию на страницы своего блога, сами того не подозревая мы используем для оформления содержимого постов язык гипертекстовой разметки HTML. Всем вам знакомы два режима, используемые при "записи мыслей" в ярушке - режим "с оформлением" и "HTML-режим". Именно в HTML-режиме можно увидеть, что публикуемая нами информация в зависимости от того, какое форматирование мы применили к тексту в режиме "с оформлением", дополняется служебными метками, назвываемыми тэгами. Тэги указывают браузеру (программе, с помощью которой вы просматриваете интернет-странички) как отображать ваш блог.

Тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком  ">".  Теги делятся на контейнерные (парные) и унарные (одиночные). Контейнерные теги состоят из двух частей - открывающей <название_тэга>  и закрывающей </название_тэга>. Унарные тэги не имеют закрывающей части. При написании поста в HTML-режиме особое внимание обращайте на то, чтобы все контейнерные тэги были корректно закрыты. Всё, что помещено между открывающим и закрывающим тэгами, является содержимым тэга.

Красивые рамочки, используемые для украшения блога, с точки зрения HTML есть ничто иное как несколько таблиц, чаще всего, состоящих из одной ячейки, вложенных одна в другую.  Таблица в общем случае формируется из строк, состоящих из ячеек. Самая простая таблица, состоящая из одной строки и одного столбца, формируется следующим образом:
<table>
  <tbody>
    <tr>
      <td>содержимое ячейки</td>
    </tr>
  </tbody>
</table>
Здесь <table> - тэг, добавляющий таблицу,
<tbody> - тэг, задающий группу строк тела таблицы (содержимым этого тэга являются один или несколько тегов <tr> ),
<tr> - "table row/ряд таблицы" - тэг, определяющий группу ячеек одной строки (содержимым этого тэга являются один или несколько тегов <td> ),
<td> - "table data/табличные данные" - тэг, определяющий одну ячейку таблицы.

Чтобы разнообразить внешний вид таблиц в зависимости от ситуации, применяют различные атрибуты (параметры) тэгов. Атрибуты тэга пишутся внутри угловых скобок открывающего тэга, значение атрибута всегда заключается в кавычки.

Тэг <table> может иметь атрибуты:
width="размер" - ширина таблицы,
border="пикселы" - ширина рамки таблицы,
cellspacing="размер" - расстояние между ячейками,
cellpadding="размер" - отступ от краёв до содержимого ячейки,
bgcolor="цвет" - цвет фона элемента.
Некоторые из этих параметров могут также быть атрибутами тэгов  <tr> и <td>.

Цвет в HTML задаётся либо в цифровом виде (зайдите в настройки вашей страницы, там можно увидеть коды цветов, используемых для оформления блога), либо через стандартные наименования. На этом сайте можно быстро подобрать цвет фона рамочки-таблички или странички блога не меняя текущих настроек в ярушке.

С другими атрибутами тэга <table>  мы познакомимся позже, а сейчас создадим простую табличку, используя которую можно поменять цвет фона поста.
Наша таблица не должна отделяться от основного фона блога линиями, поэтому значение атрибута border="0",  цвет фона таблицы отличен от цвета фона блога, пусть он будет бежевым, тогда bgcolor="#FFCC66", отступ от краёв и расстояние между ячейками зададим по 5 пикселов. Пишем код:

<table border="0" cellpadding="5" cellspacing="5" width="100%" bgcolor="#ffcc66">
  <tbody>
    <tr>
      <td>здесь будет текст поста</td>
    </tr>
  </tbody>
</table>
Теперь можно вставить полученный код в новый пост в режиме HTML, удалить лишние пробелы между угловыми скобками и добавить нужный текст.

Попробуем теперь заменить однотонный фон на фон с рисунком. Нам понадобится внести изменение в одну строчку кода - заменим атрибут bgcolor="#ffcc66" на атрибут background, определяющий фоновый рисунок нашей таблицы. В отличие от атрибутов width, border, и др., имеющих числовые значения, атрибута bgcolor, имеющего значение "цвет", атрибуту background в качестве значения присваивается ссылка на файл картинки фона. Для примера выберем в качестве фона вот этот рисунок. Нажимаем на слова "Код для вставки на сайт или в блог", забираем нижнюю (самую короткую) ссылку и вносим изменения в код таблицы:

<table border="0" cellpadding="5" cellspacing="5" width="100%" background="http://img-fotki.yandex.ru/get/3213/dkartasheva.9/0_5d83_f46099c0_L.jpg">
  <tbody>
    <tr>
      <td>здесь будет текст поста</td>
    </tr>
  </tbody>
</table>