01:02:2014

Работа с таблицами, изменение цвета с помощью HTML тэгов

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

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

Итак, представим, что вы уже знаете как создавать таблицы с помощью HTML тэгов, но не знаете как изменить фон отдельной ячейки.  На самом деле все просто и помогать нам в этом будет стандартная модель под названием RGB(red,green,blue). В данной модели используется только три цвета(если знаете английский то, я думаю, догадались почему), а все остальное – это оттенки.

Для каждого цвета отдельно существует по 256 оттенков(я бы сказал яркостей). Если кого-то интересует почему именно 256, то из основ информатики мы узнаем, что именно столько значений можно держать в одном байте.

То есть, существует (256*256*256) вариантов цвета – достаточно большой выбор. Не будем вдаваться в системы исчисления очень сильно, просто поверхностно прогуляемся. Например, чтобы получить черный цвет нам нужно, чтобы все три значения оттенка имели нулевую яркость, в то время как для получения белого потребуется максимальная яркость во всех трех оттенках.

В десятичной форме записи белый цвет имел бы вид(256 256 256), а черный (0 0 0). Надеюсь вы поняли.

Но HTML предпочитает шестнадцатеричную форму записи, в которой кроме арабских цифр используют еще и первые шесть букв латинского алфавита. То есть 0 – минимальное значение яркости, f-максимальное и если мы захотим вывести белый цвет нам нужно написать следующее: #ffffff, черный #000000. Делаем вывод, что два нуля в шестнадцатеричной системе соответствуют нулю в десятичной, а ff в шестнадцатеричной системе соответствуют 256 в десятичной.

Все, хватит, с основами познакомились, больше не нужно, мозг и так уже не хочет работать.  Теперь создадим небольшую таблицу для наглядного примера:

1-я ячейка 1-й строки 2-я ячейка 1-й строки 3-я ячейка 1-й строки
1-я ячейка 2-й строки 2-я ячейка 2-й строки 3-я ячейка 2-й строки
1-я ячейка 3-й строки 2-я ячейка 3-й строки 3-я ячейка 3-й строки

Для изменения фона ячейки применяется тэг bgcolor, пример:

1-я ячейка 1-й строки 2-я ячейка 1-й строки 3-я ячейка 1-й строки
1-я ячейка 2-й строки 2-я ячейка 2-й строки 3-я ячейка 2-й строки
1-я ячейка 3-й строки 2-я ячейка 3-й строки 3-я ячейка 3-й строки

Теперь сравним два кода, первой таблицы и второй:

 <table border=”1″ cellpadding=”10″>
<tbody>
<tr>
<td>1-я ячейка 1-й строки</td>
<td>2-я ячейка 1-й строки</td>
<td>3-я ячейка 1-й строки</td>
</tr>
<tr>
<td>1-я ячейка 2-й строки</td>
<td>2-я ячейка 2-й строки</td>
<td>3-я ячейка 2-й строки</td>
</tr>
<tr>
<td>1-я ячейка 3-й строки</td>
<td>2-я ячейка 3-й строки</td>
<td>3-я ячейка 3-й строки</td>
</tr>
</tbody>
</table>

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

 <table border=”1″ cellpadding=”10″>
<tbody>
<tr bgcolor=”#ff0000“>
<td>1-я ячейка 1-й строки</td>
<td>2-я ячейка 1-й строки</td>
<td>3-я ячейка 1-й строки</td>
</tr>
<tr bgcolor=”#fff000“>
<td>1-я ячейка 2-й строки</td>
<td>2-я ячейка 2-й строки</td>
<td>3-я ячейка 2-й строки</td>
</tr>
<tr bgcolor=”#a00ff0“>
<td>1-я ячейка 3-й строки</td>
<td>2-я ячейка 3-й строки</td>
<td>3-я ячейка 3-й строки</td>
</tr>
</tbody>
</table>

Что мы видим? Практически ничего не изменилось, только рядом с тэгом <tr> появился тэг bgcolor который указывает в какой цвет вы хотите окрасить своя ячейку.

Ничего сложного нет. Если вы хотите выделить и текст на фоне видоизмененной ячейки, то можете это сделать просто выделив текст и воспользоваться стандартными способами wordpress! Не стоит лишний раз возится с кодом, если для этого не существует какой-то необходимости.

Теперь нам нужно узнать где взять те самые обозначения цветов, которые мы вписываем( что-то вроде #000000), не подбирать же пока не попадется нужный нам цвет.

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

Тут мы можем выбрать самый подходящий нам оттенок и сразу же получить его обозначение в шестнадцатеричной системе, все что нужно в одном месте. Например захотели такой же цвет как у яндекса, подобрали подходящий оттенок(он как раз называется “Яндакс”) и над кнопкой “Поделиться цветом в блоге” уже есть нужный нам код #ffcc00, а дальше все по схеме, которую я описал выше.

Небольшое отступление

На сегодня это все, что я хотел вам рассказать, но в конце статьи я хочу вам напомнить, что это только 2-й пост из цикла HTML! В дальнейшем, когда будем рассматривать верстку сайта и CSS мы вернемся к использованию цветов, таблиц и всего, что мы изучим на подходе к полноценному веб-мастерскому таланту.

Поэтому советую следить за выходом статей, так как они идут в строгом порядке от легкого к сложному и дополняют друг-друга.

Чтобы не пропустить выпуск новых статей советую вам подписаться на обновления блога по e-mail, будьте всегда в курсе!

Seogeeks.ru – создание и продвижение сайтов

One Response к “Работа с таблицами, изменение цвета с помощью HTML тэгов”

  1. Анастасия пишет:

    Хорошая подача материала, всё просто и доступно. Спасибо, что делитесь опытом и знаниями =)

Ответить


 Seogeeks.ru