Учимся делать рамки. Урок 1

Чтобы научиться делать рамочки, нужно вникнуть в суть их создания.

Html-код рамки состоит из тегов. Используя многообразие тегов, можно составлять разные рамки.



Тег HTML состоит из следующих друг за другом в определенном порядке элементов:
⦁ левой угловой скобки < (такого же, как знак "меньше")
⦁ имени тега, например TABLE или PRE
⦁ сопровождаться одним или несколькими атрибутами, например: ALIGN=CENTER. Или может быть без атрибутов вообще.
⦁ правой угловой скобки > (такой же, как знак "больше").
например: <table border="2">

ВАЖНО!

Закрывать все теги нужно обязательно. Только тег <br />(break line) не требует парного закрывающего тега.

Писать можно любые буквы - большие или маленькие - TABLE или table


Хочу, чтобы все понимали, что все теги имеют свою пару, например <TABLE></TABLE> или <tbody></tbody>

<TABLE> и <tbody>< - открывающие теги, а </TABLE> и </tbody> - закрывающие. Закрывающий тег имеет слэш (от англ. slash, косая черта).

И в html-коде писать нужно обязательно оба тега.
Но закрывающие теги пишутся в противоположном порядке.

Думаю, так будет понятнее

¹<TABLE>²<tbody>³<TR>⁴<TD>⁵<center>СОДЕРЖИМОЕ РАМКИ</center>⁵</TD>⁴</TR>³</tbody>²</TABLE>¹

Об этом нельзя забывать!



Чтобы лучше усвоить урок, советую нажать на эту ссылку http://delaisait.ucoz.ru/html/html-redactor.html и открыть редактор, в котором можно легко повторять мои действия.



Вставляем код в открывшемся окне, жмем на кнопку "Нажми здесь и посмотри результат". Откроется другая вкладка для просмотра. Посмотрели - перешли снова на вкладку редактора. Редактируем запись. Теперь, чтобы посмотреть результат, нужно снова нажать на кнопку "Нажми здесь и посмотри результат". Введенные данные обновляются. И когда вы переключаетесь на вкладку просмотра, видите уже это обновление.




Итак, начинаем.

Тег TABLE создает таблицу.
Можно составлять таблицы с разным количеством ячеек.

Сейчас нам понадобится таблица с одной ячейкой, которую мы и назовём впоследствии рамочкой.

<TABLE> СОДЕРЖИМОЕ РАМКИ </TABLE>

Вставим этот элемент кода в редактор и будем его наполнять, дописывая атрибуты к тегу TABLE .



Ставим курсор в тег TABLE

делаем отступ, нажав на клавиатуре "Пробел" и дописываем (или копируем отсюда и вставляем) атрибут

border

- ширина обводки рамки в пикселах (px). Если атрибут border не указан, то рамка будет без обводки. Но сейчас мы его поставим и установим значение 2.

<TABLE border "2"> СОДЕРЖИМОЕ РАМКИ </TABLE>

Нам нужен фон в рамку и для этого дописываем атрибут

background

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

background="АДРЕС ФОНА"

<TABLE border "2" background="АДРЕС ФОНА"> СОДЕРЖИМОЕ РАМКИ </TABLE>

Теперь нужно вставить ещё 3 тега:

<tbody><tr><td>

Они у нас всегда идут рядышком.

Тег tbody - (От Англ. table body - "тело" таблицы), служит для указания нескольких независимых больших столбцов в таблице - а любую простую таблицу можно представить как таблицу с одним большим столбцом - можно сделать таблицу с несколькими tbody и увидеть, что они отвечают за большие независимые столбцы, каждый из которых представляет собой обычную простую таблицу состоящую из набора tr-строк.

Тег TR определяет строку и переход на следующую

Тег TD поддерживает ширину рамки и создание новой ячейки.

Не забываем про закрывающие парные теги.


Дописываем после угловой скобки.

<TABLE border "2" background="АДРЕС ФОНА"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ </TD></TR></tbody></TABLE>

Смотрим в окне просмотра. Вот, уже что-то похожее на рамку... но ещё не рамка. Возвращаемся.


Адрес фона - это адрес (url) картинки, которую мы будем ставить фоном рамки. Его можно получить через Радикал или другие хостинги картинок. А можно загрузить картинки в свой альбом на Лиру, Мейл, ЖЖ и т.д. Адрес всегда начинается с http:// и заканчивается точкой и расширением картинок jpg, png, bmp или gif.
Я взяла с Радикала.

Вставляем на место слов АДРЕС ФОНА

<TABLE border "2" background="//s019.radikal.ru/i639/1603/95/adefbf0d293c.jpg"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ </TD></TR></tbody></TABLE>

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

У нас получилась рамочка с одним фоном, которая будет растягиваться во всю ширину поста. А хотелось бы, чтобы она выглядела более компактной.

А хотелось бы, чтобы она выглядела более компактной.

Для этого установим её ширину, используя атрибут width. Можно указывать в процентах (width="60%") или пикселах (width="700"). Значение может быть любое. Сделаем небольшую рамочку в 350px.
Если нужна рамка определенной высоты, можно так же вставить атрибут height="значение высоты".
Возвращаемся и дописываем

width="350"

<TABLE border "2" background="//s019.radikal.ru/i639/1603/95/adefbf0d293c.jpg" width="350"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>

Смотрим.

Теперь установим рамку по центру, подставив атрибут выравнивания align. Возможные значения этого атрибута: center, left, right

Установим значение center и допишем

align="center"

<TABLE border "2" background="//s019.radikal.ru/i639/1603/95/adefbf0d293c.jpg" width="350" align="center"><tbody><TR><TD>СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>

Смотрим, что ещё нас не устраивает.

Текст расположен слишком близко к краям рамки. Нужно сделать отступ. На Лиру отвечает за это стилевое свойство padding, которое должно добавляться к тегу TD -

style="padding: ЗНАЧЕНИЕpx;"

Установим значение, к примеру, 20 пикселов и допишем.

<TABLE border "2" background="//s019.radikal.ru/i639/1603/95/adefbf0d293c.jpg" width="350" align="center"><tbody><TR><TD style="padding: 20px;">СОДЕРЖИМОЕ РАМКИ</TD></TR></tbody></TABLE>

Смотрим

А чтобы текст встал по центру, заключим его в тег center. Не забывайте о закрывающем теге. Вставляем.

<TABLE border "2" background="//s019.radikal.ru/i639/1603/95/adefbf0d293c.jpg" width="350" align="center"><tbody><TR><TD style="padding: 20px;"><center>СОДЕРЖИМОЕ РАМКИ</center></TD></TR></tbody></TABLE>

Смотрим.
У нас готова рамочка с фоном.
Это основной html-код всех рамок.



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


Как бы разделим наш готовый код рамки на 3 части

1 часть

<TABLE border "2" background="//s019.radikal.ru/i639/1603/95/adefbf0d293c.jpg" width="350" align="center"><tbody><TR><TD style="padding: 20px;">

2 часть

<center>СОДЕРЖИМОЕ РАМКИ</center>

3 часть

</TD></TR></tbody></TABLE>

Теперь выделяем и копируем 1-ую часть кода



устанавливаем курсор в конец первой части и вставляем её в основной код



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


Теперь нужно скопировать закрывающие теги и вставить столько же, сколько первых.



Я доставила 3 первых части и 3 закрывающих.



Получилась такая рамка



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

<TABLE border "0" background="АДРЕС ФОНА" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><TABLE border "0" background="АДРЕС ФОНА" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><TABLE border "0" background="АДРЕС ФОНА" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><TABLE border "0" background="АДРЕС ФОНА" width="ШИРИНА ФОНА ДЛЯ ЗАПИСИ" align="center"><tbody><TR><TD style="padding: ОТСТУП ОТ КРАЯ РАМКИpx;"><center><font size="3" color="8b4513" face="verdana">СОДЕРЖИМОЕ РАМКИ</font></center></TD></TR></tbody></TABLE></TD></TR></tbody></TABLE></TD></TR></tbody></TABLE></TD></TR></tbody></TABLE>

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


Чтобы отформатировать текст, нужно слова СОДЕРЖИМОЕ РАМКИ заключить в теги

<font size="3" color="8b4513" face="verdana">СОДЕРЖИМОЕ РАМКИ</font>

Я заменю 2 фона, уберу бордюр (поставлю значение "0") и поменяю отступы

СОДЕРЖИМОЕ РАМКИ

Урок 2 
Урок 3
bloginja