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

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

Какими средствами HTML можно сделать рамку вокруг текста, картинки, или какого-либо другого объекта, добавляемого на страницу сайта?

html рамка с помощью html таблицы

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

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

HTML код в данном случае может выглядеть вот так:

<table border="1" bordercolor="red" width="350" bgcolor="white" cellspacing="0" cellpadding="10">

<tr>

<td>Текст в рамке. Толщина и цвет рамки зависят от значения параметров таблицы</td>

</tr>

</table>

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

Как видно из приведенного выше html кода, мы можем изменять толщину рамки, ее цвет, а так же, ширину рамки и фон ячейки.

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

border="1" толщина рамки

bordercolor="red" цвет рамки

width="350" ширина блока с рамкой

bgcolor="white" цвет фона ячейки

cellspacing="0" расстояние между ячейками

cellpadding="10" отступ от рамки до текста

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

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

html рамка с помощью стиля style

Если Вы не хотите использовать таблицу для создании рамки вокруг текста, тогда можно воспользоваться стилем border. Применение стилей в html, возможно в блочных элементах, таких как параграф <p></p> или <div></div>.

Так и сделаем, вот пример html кода, выводящего вокруг текста рамку с использованием стилей:

<p align="center" style='border: 1px solid red; padding: 5px;'>Есть ли возможность сделать рамку вокруг текста средствами html?</p>

Обрабатывая данный html код, браузер выведет в окно текст в рамке. Внешний вид рамки будет определятся значением параметров стиля style, следующим образом:

border: 1px solid red; - Толщина и цвет рамки

padding: 5px; - Отступ рамки от текста

В некоторых случаях, использование стилей при создании html рамки, будет более предпочтительным, чем использование ячейки таблицы.

Ну что же, мы с Вами рассмотрели два способа, с помощью которых можно сделать рамку вокруг текста или картинки.

В первом способе рамка была создана с помощью html тега <table>, то есть с помощью таблицы, а во втором способе, рамка вокруг текста была создана с использованием стиля style.