 |
Учебник по программированию.Создание сайтов. Первые шаги. |
| Предыдущий параграф | Назад в содержание | Следующий параграф |
§3. Редактор кода Notpad++.
Родительские и дочерние элементы.
Задание размеров и цвета в языке html.
Редактор кода Notpad++.
Выглядит редактор Notepad++ следующим образом:
Этот редактор содержит в себе все возможности обычного текстового редактора, о которых писать не буду. А так же в нём есть возможности редактирования кода. Далее приведу некоторые из них, которые будут нам полезны на данном этапе.
- редактор кода выделяет различным цветом различные слова. Если слово является тэгом, то Notepad++ выделяет его синим цветом, если это атрибут, то – красным. Так же есть ещё другие выделения которые вы заметите сами по мере работы в редакторе.
- в редакторе можно скрыть содержимое заголовка, тела документа и таблиц. (О таблицах речь пойдёт дальше.) Это очень удобно и вы в дальнейшем сами в этом убедитесь. Делается это нажатием на минус в квадратике слева от тэга. После этого содержимое скроется, а минус сменится на плюс. Что бы вернуть содержимое необходимо нажать на этот плюс.
- редактор кода при наборе боре слов выводит подсказки. Наберите какой-било символ или пару символов, появятся меню с возможными словами, которые начинаются на это сочетание символов. Стрелочками вниз, вверх, или прокрутив ползунок мышкой, можно выбрать нужное вам слово, после чего нажмите «Enter». Это слово автоматически появится в тексте вашего документа.
В принципе пока это всё, что нам потребуется на первом этапе. Единственное что вы должны знать это то, что редактор рассчитан не только на язык html, но и на другие. Соответственно для того, что бы все эти возможности работали при редактировании документа html необходимо настроить редактор. Для этого выберите пункт меню: «Синтаксисы -> H -> HTML».
Так же для того, что бы русские буквы во всех браузерах ваших документов отображались корректно, обязательно выбирайте кодировку UTF-8. Для этого выберите пункт меню: «Кодировки -> Кодировать в UTF-8».
Ещё один нюанс: если строка документа слишком длинная, то она не войдёт в окно редактора, и для её просмотра и редактирования, необходимо будет двигать горизонтальный ползунок. Можно заставить редактор переносить длинные строки. Для этого выберите пункт меню: «Вид -> Перенос строк». Или нажмите на кнопку панели инструментов:
Совет:
после того, как вы внесли изменения в свой html документ, вам необходимо просмотреть, как эти изменения отобразятся в браузере. На практике бывает так, что изменив пару символов снова необходимо открыть браузер и просмотреть, что получилось. Для того, что бы экономить время можете воспользоваться следующим алгоритмом действий:
- сохраните документ с помощью комбинации клавиш «CTRL+S» (в большинстве приложений под операционную сиcтему Windows данное сочетание клавиш означает сохранить);
- затем с помощью комбинации клавиш «ALT+TAB» переключитесь в браузер (на этот момент браузер с вашим html документом должен быть уже открыт);
- нажмите в браузере кнопочку «обновить» или воспользуйтесь сочетанием клавиш «CTRL+R», после чего все изменения, которые вы внесли в html документ, будут отображены.
Задание размеров и цвета в языке html.
В принципе общих знаний о языке html теперь достаточно, осталось только изучить все существующие тэги и их атрибуты. Этим мы займёмся со следующего параграфа, а сейчас разберём – в каких единицах и каким образом задаются размеры и цвет.
Для того, что бы сразу попрактиковаться, научимся создавать таблицы с несколькими ячейками. Более подробно о них мы узнаем в соответствующем параграфе, а сейчас нас устроит таблица из двух – трёх ячеек.
Для создания таблиц существуют следующие тэги:
- table – создаёт таблицу;
- td – создаёт ячейку в таблице.
Так же нам понадобятся следующие атрибуты тэга table:
- border – ширина рамки таблицы;
- width – ширина таблицы;
- height – высота таблицы;
- bgcolor – цвет фона ячеек таблицы.
Теперь создадим простейшую таблицу из трёх ячеек. Делается это следующим образом:
Результат:
На таблицу ещё не совсем похоже, так как нет рамки. А рамки нет потому, что по умолчанию её толщина равна нулю.
В следующем примере сделаем толщину рамки равной единице, для этого присвоим единицу атрибуту 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С. В тексте кода перед шестнадцатеричным числом необходимо поставить символ «#».
Далее пример, в котором использованы два способа задания цвета:
И результат в браузере Opera:
Результат в браузере Internet Explorer:
Как видите задавать цвет лучше шестнадцатеричным числом.
Так же, исходя из данной ситуации, можно ещё раз обратить ваше внимание на то, что все, создаваемые вами, html документы необходимо просматривать во всех возможных браузерах. Иначе какой-нибудь пользователь может увидеть их некорректно.
Задание.
Примечание: эти и все последующие задания делайте в редакторе кода.
1. Создайте таблицы с тремя ячейками. В первой ячейке должно находиться слово обозначающее цвет, во второй перевод этого слова, а в третьей ячейке цвет фона должен соответствовать этому слову. Количество таблиц должно получиться такое же, сколько слов обозначающих цвет приведено в параграфе.
2. Создайте таблицы с тремя ячейками. В первой ячейке должна находиться rgb функция, во второй соответствующее этой функции шестнадцатеричное число, а в третьей цвет фона должен соответствовать этому числу. Количество таблиц можете сделать на ваше усмотрение. Если вы умеете программировать, то создайте программу, которая будет создавать автоматически подобный html документ. Шаг выбора чисел для rgb функции сделайте побольше, иначе документ получится слишком большой.
3. Создайте таблицу с тремя ячейками без рамки. Сама таблица должна иметь ширину 100%. Первая и третья ячейки должны иметь ширину по 20%. В среднюю ячейку поместите ваш текст. Сделайте какой-либо фон крайних ячеек. У вас должно получиться примерно следующее:
| Предыдущий параграф | Назад в содержание | Следующий параграф |