Учимся делать рамочки (вникаем в суть)... Урок № 1 от bloginja...

Вторник, 20 Декабря 2016 г. 02:00 + в цитатник

Цитата сообщения bloginja

Прочитать целиком В свой цитатник или сообщество!

Учимся делать рамки. Урок 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-ую часть кода
РєР°СЂС‚РёРЅРєР° 1 (510x141, 85Kb)

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

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

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

Я доставила 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

Серия сообщений "________ - Делаем рамочки -":
Часть 1 - Делаем рамочку для текста без ФШ...
Часть 2 - Учимся делать рамочки (вникаем в суть)... Урок № 1 от bloginja...
Часть 3 - Формула разрезной рамочки для текста, сделанной при помощи ФШ...
Часть 4 - Рамочки в 1 слой...
...
Часть 18 - Поговорим о рамочке для текста "Рамочка-книжка"
Часть 19 - *** ДВЕ рамочки с вертикальными бордюрами...
Часть 20 - И снова — «Рамочка-книжка»

Понравилось: 3 пользователям

<a href="https://www.liveinternet.ru/users/6133629/post430733795/">РЈС‡РёРјСЃСЏ РґРµР»Р°С‚СЊ СЂР°РјРѕС‡РєРё (РІРЅРёРєР°РµРј РІ СЃСѓС‚СЊ)... РЈСЂРѕРє в„– 1 РѕС‚ bloginja...</a><br/>
РЈС‡РёРјСЃСЏ РґРµР»Р°С‚СЊ СЂР°РјРєРё. РЈСЂРѕРє 1

Р§С‚РѕР±С‹ РЅР°СѓС‡РёС‚СЊСЃСЏ РґРµР»Р°С‚СЊ СЂР°РјРѕС‡РєРё, РЅСѓР¶РЅРѕ РІРЅРёРєРЅСѓС‚СЊ РІ СЃСѓС‚СЊ РёС… СЃРѕР·РґР°РЅРёСЏ. 
Html-РєРѕРґ СЂР°РјРєРё СЃРѕСЃС‚РѕРёС‚ РёР· С‚РµРіРѕРІ. РСЃРїРѕР»СЊР·СѓСЏ РјРЅРѕРіРѕРѕР±СЂР°Р·РёРµ С‚РµРіРѕРІ, РјРѕР¶РЅРѕ СЃРѕСЃС‚Р°РІР»СЏС‚СЊ СЂР°Р·РЅС‹Рµ СЂР°РјРєРё. 
                                                
РўРµРі HTML СЃРѕСЃС‚РѕРёС‚ РёР· СЃР»РµРґСѓСЋС‰РёС… РґСЂСѓРі Р·Р° РґСЂСѓРіРѕРј РІ РѕРїСЂРµРґРµР»РµРЅРЅРѕРј РїРѕСЂСЏРґРєРµ СЌР»РµРјРµРЅС‚РѕРІ: 
&#10625;	Р»РµРІРѕР№ СѓРіР»РѕРІРѕР№ СЃРєРѕР±РєРё &lt; (С‚Р°РєРѕРіРѕ Р¶Рµ, РєР°Рє  Р·РЅР°Рє "РјРµРЅСЊС€Рµ") 
&#10625;	РёРјРµРЅРё С‚РµРіР°, РЅР°РїСЂРёРјРµСЂ TABLE РёР»Рё PRE 
&#10625;	СЃРѕРїСЂРѕРІРѕР¶РґР°С‚СЊСЃСЏ РѕРґРЅРёРј РёР»Рё РЅРµСЃРєРѕР»СЊРєРёРјРё Р°С‚СЂРёР±СѓС‚Р°РјРё, РЅР°РїСЂРёРјРµСЂ: ALIGN=CENTER. РР»Рё РјРѕР¶РµС‚ Р±С‹С‚СЊ Р±РµР· Р°С‚СЂРёР±СѓС‚РѕРІ РІРѕРѕР±С‰Рµ. 
&#10625;	РїСЂР°РІРѕР№ СѓРіР»РѕРІРѕР№ СЃРєРѕР±РєРё >... <a href="https://www.liveinternet.ru/users/6133629/post430733795/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

Зоя_Крайсик обратиться по имени Суббота, 01 Сентября 2018 г. 11:31 (ссылка)

Спасибо! мне надо было в1 фон и текст крупнее сделать, а в фомуле нет такого кода...

Ответить С цитатой В цитатник

КЛИМОВА_ТАМАРА обратиться по имени Воскресенье, 05 Февраля 2023 г. 17:11 (ссылка)

Всегда первой идет обводка,здесь в формуле не вижу. Сразу БОРДЮР и АДРЕС ФОНА. и размеры.

Ответить С цитатой В цитатник

КЛИМОВА_ТАМАРА обратиться по имени Воскресенье, 05 Февраля 2023 г. 17:31 (ссылка)

56093874_55950693_a08aa624b916__anim_ (350x350, 28Kb)

ЗНАЕТЕ ЧТО Я ВАМ МОГУ СКАЗАТЬ?

Ответить С цитатой В цитатник

ЗИТТА обратиться по имени Четверг, 06 Февраля 2025 г. 11:00 (ссылка)

Спасибо!

Ответить С цитатой В цитатник

LiveInternetLiveInternet

-Фотоальбом

-Рубрики

-Цитатник

-Метки

-Поиск по дневнику

-Подписка по e-mail

-Статистика

Учимся делать рамочки (вникаем в суть)... Урок № 1 от bloginja...

ВАЖНО!