|
|||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
![]()
![]() |
§3. Редактор кода Notpad++.
|
Первая ячейка | Вторая ячейка | Третья ячейка |
Результат:
На таблицу ещё не совсем похоже, так как нет рамки. А рамки нет потому, что по умолчанию её толщина равна нулю.
В следующем примере сделаем толщину рамки равной единице, для этого присвоим единицу атрибуту border:
Первая ячейка | Вторая ячейка | Третья ячейка |
Результат:
Теперь у нас появилась рамка. Можете самостоятельно поэкспериментировать и попробовать различную её толщину.
Теперь можно говорить о том, каким образом можно задавать размеры. Задавать их можно попиксельно (используется сочетание букв px), в процентах (используется знак %) и в других единицах, о которых речь будет идти отдельно при изучении соответствующих тэгов.
Если зададим размер в пикселях, то независимо от размера окна браузера таблица будет одного размера:
Первая ячейка | Вторая ячейка | Третья ячейка |
Результат:
Если зададим размер в процентах, то размер таблицы будет зависеть от размера окна браузера и будет занимать такую часть окна браузера, которая указана в тэге:
Первая ячейка | Вторая ячейка | Третья ячейка |
Результат:
У тэга td тоже есть атрибуты width и height, они так же могут задаваться в пикселях и в процентах, соответственно мы можем настроить разную ширину наших ячеек:
Первая ячейка | Вторая ячейка | Третья ячейка |
Результат:
Ширина ячейки, где атрибут width не установлен, вычисляется автоматически, исходя из оставшегося пространства.
В случае с ячейками ширина, заданная в процентах, вычисляется от размера самой таблицы. А в случае с таблицей ширина вычисляется исходя из размеров окна браузера.
Родительские и дочерние элементы.
Здесь стоит ввести следующее понятие: элементы по отношению друг к другу бывают родительскими и дочерними. В случае с предыдущим примером ячейки таблицы являются дочерними элементами по отношению к самой таблице, а таблица по отношению к ним является родительским элементом. Соответственно ширина ячеек, заданная в процентах, вычисляется исходя из ширины родительского элемента – таблицы.
Сама таблица по отношению к элементу body то же является дочерним элементом, соответственно её размеры вычисляются исходя из размеров окна браузера.
В тексте кода дочерний элемент находится внутри родительского.
Теперь для усвоения этого понятия создадим внутри второй ячейки ещё одну таблицу:
Первая ячейка |
|
Третья ячейка |
Как видите, вторая таблица находится внутри второй ячейки и занимает по ширине её половину, а по высоте 100%. Соответственно вторая таблица является дочерней по отношению ко второй ячейке первой таблицы. А эта ячейка является родительской по отношению ко второй таблице.
Здесь необходимо заострить ваше внимание ещё на одном нюансе: все дочерние элементы в тексте кода html документа по возможности должны иметь отступ от левого края на два-три пробела больше по сравнению с родительским элементом. Внимательно посмотрите на текст предыдущего примера, и вы всё поймёте. Текст, отформатированный таким образом, будет более «читабельным».
Задание цвета.
На этом речь о размерах закончим и поговорим о том, как задаются цвета. Цвет можно задать тремя способами: с помощью слова, с помощью функции rgb и с помощью шестнадцатеричного числа.
Далее приведён список возможных слов для задания цвета:
Переведите их на русский, и вы узнаете, какой цвет они устанавливают. Далее пример, в котором задан зелёный фон таблицы с помощью слова:
Ячейка таблицы |
Результат:
С помощью rgb функции можно указать любой возможный цвет. Делается это следующим образом:
Ячейка таблицы |
В rgb функции необходимо указать три числа: первое означает интенсивность красного цвета, второе – зелёного, третье – синего. В этом учебнике мы не будем рассматривать вопрос, о том, как формируется цвет на экране, и что реально означают эти три числа. Сейчас нас должен волновать только вопрос о том, как нам узнать эти три числа нужного нам цвета.
Сделать это можно с помощью приложения «Paint», которое должно быть в стандартных программах в любом Windows-е. Откройте его и выберите пункт меню «Палитра -> Изменить палитру…».
В открывшемся окне нажмите на кнопку «Определить цвет», после этого оно должно выглядеть следующим образом:
В этом окне, перемещая курсор и треугольничек справа, можно выбрать нужный нам цвет. После выбора цвета нам понадобятся цифры, которые указаны возле слов «красный», «зелёный» и «синий». Как раз их и необходимо указать в rgb функции.
Если вы внимательный читатель, то должны были заметить, что в Paint-е цвет с числами 20, 107 и 92 больше похож на зелёный, а в браузере Opera – на синий. Это яркий пример того, что в разных браузерах ваш документ может отображаться по-разному. В браузере Internet Explorer этот же документ будет выглядеть так:
Как видите, здесь цвет соответствует тому, который мы выбрали в программе Paint.
Для того, что бы цвет отображался корректно во всех браузерах нужно использовать шестнадцатеричное число. Это число формируется из чисел, которые указываются в rgb функции. Эти числа необходимо перевести в шестнадцатеричные и записать одно за другим.
В шестнадцатеричном числе, помимо привычных нам арабских цифр, используются ещё буквы A,B,C,D,E,F. Далее в таблице приведены шестнадцатеричные числа и соответствующие им десятеричные:
Шестнадцатеричное | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F | 10 |
Десятичное | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
Шестнадцатеричное | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C | 1D | 1E | 1F | 20 |
Десятичное | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
О различных системах исчисления, если вам интересно, можете почитать в Интернете. Здесь на этом заострять внимание не будем. Рассмотрим только вопрос о том, как сделать из десятеричного числа шестнадцатеричное.
Для этого разделим десятеричное число на 16 с остатком – получим первую цифру шестнадцатеричного числа. Если получилось число больше 9, то нужно выбрать соответствующую букву из предыдущей таблицы. Получившийся от деления на 16 остаток является второй цифрой, если он получился больше 9, то так же выбираем букву из таблицы.
Для примера получим шестнадцатеричное число из тех чисел, которые указаны в окне «Изменение палитры» приложения Paint.
20/16 = 1 и остаток 4, получаем шестнадцатеричное число 14;
107/16 = 6 и остаток 11, получаем шестнадцатеричное число 6В;
92/16 = 5 и остаток 12, получаем шестнадцатеричное число 5С.
Получили число для задания цвета равное 146В5С. В тексте кода перед шестнадцатеричным числом необходимо поставить символ «#».
Далее пример, в котором использованы два способа задания цвета:
Цвет - rgb(20,107,92) |
Цвет - #146B5C |
И результат в браузере Opera:
Результат в браузере Internet Explorer:
Как видите задавать цвет лучше шестнадцатеричным числом.
Так же, исходя из данной ситуации, можно ещё раз обратить ваше внимание на то, что все, создаваемые вами, html документы необходимо просматривать во всех возможных браузерах. Иначе какой-нибудь пользователь может увидеть их некорректно.
Задание.
Примечание: эти и все последующие задания делайте в редакторе кода.
1. Создайте таблицы с тремя ячейками. В первой ячейке должно находиться слово обозначающее цвет, во второй перевод этого слова, а в третьей ячейке цвет фона должен соответствовать этому слову. Количество таблиц должно получиться такое же, сколько слов обозначающих цвет приведено в параграфе.
2. Создайте таблицы с тремя ячейками. В первой ячейке должна находиться rgb функция, во второй соответствующее этой функции шестнадцатеричное число, а в третьей цвет фона должен соответствовать этому числу. Количество таблиц можете сделать на ваше усмотрение. Если вы умеете программировать, то создайте программу, которая будет создавать автоматически подобный html документ. Шаг выбора чисел для rgb функции сделайте побольше, иначе документ получится слишком большой.
3. Создайте таблицу с тремя ячейками без рамки. Сама таблица должна иметь ширину 100%. Первая и третья ячейки должны иметь ширину по 20%. В среднюю ячейку поместите ваш текст. Сделайте какой-либо фон крайних ячеек. У вас должно получиться примерно следующее:
Предыдущий параграф | Назад в содержание | Следующий параграф |