|
Урок №4.
Параметры тэга <body>.
Цели работы:
1.Изучение параметров тэга <body>.
2.Закрепление изученного материала на примерах.
3.Повторение ранее изученного материала.
Как уже говорилось на уроке №1, между тэгами <body> …</body> заключается содержательную часть HTML-документа. Большинство тэгов, должно располагаться в данном разделе документа. Тэг <body> имеет ряд параметров, ни один из которых не является обязательным, но может пригодиться для разработки интересно оформленных HTML-страниц. Как Вы уже смогли заметить, если в тэге <body> параметры отсутствуют, то браузер отображает такую страницу белым цветом, текст отображается черным цветом, гиперссылки – синим. Это сделано не просто так. Черный текст на белом фоне считается классикой с точки зрения Web-дизайна (хотя и ужасно заезженной). Это весьма объяснимо, т.к. наиболее читабельный именно такой вариант. Представьте себе желтый текст на красном фоне, или синий на черном. В первом случае оформление – вырви глаз, раздражающее и тяжело воспринимаемое; во втором – вообще читать невозможно, т.к. буквы почти сливаются с цветом страницы. Пожалуй, становится понятным одно из основных правил оформления Web – страниц: Оформление страницы не должно затруднять восприятие информации, находящейся на ней. Это, однако, не означает то, что надо использовать белый фон документа и черный текст, просто надо всегда думать не только о себе, но и о тех людях, которые, возможно посетят Ваш сайт.
Итак, мы вплотную подошли к первому параметру тэга <body> bgcolor. Как Вы уже могли догадаться, данный параметр определяет цвет фона HTML – документа (bgcolor, от английского background color задний фон).
В языке HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая гамма базируется на трех основных цветах – красном (Red), зеленом (Green) и синем (Blue) – и обозначается RGB. Для каждого цвета задается шестнадцатиричное значение в пределах от 00 до FF, что соответствует диапазону 0 – 255 в десятичном исчислении. Затем эти значения объединяются в одно число, перед которым ставится символ #. Например, зеленый цвет имеет код #008000. Чтобы не запоминать совокупность цифр или букв, можно воспользоваться таблицей цветов (с их кодами), либо просто называть цвета своими именами (по английски), что менее желательно. Например, запись параметра bgcolor=red внутри тэга <body> эквивалентна записи bgcolor=#FF0000.
Если с помощью параметра bgcolor можно определить цвет фона документа, то, естественно, можно определить цвет текста, для этого служит параметр text. Например, запись text=#0000FF внутри тэга <body> будет задавать текст синего цвета. Заметим, что в данном случае, весь текст HTML-документа станет синим, в отличие от применения тэга <font> (Урок №2), которым выделяются лишь отдельные фрагменты. Выбирая цвета фона документа и текста, не забывайте о читаемости Вашей страницы: как только Вас начинает что-то смущать, раздражать, либо плохо восприниматься, попробуйте подобрать наиболее удачное сочетание цветов. Здесь главное чувство меры и эстетический вид страницы, о чем говорилось ранее.
Пример 4.1.Действие параметров bgcolor и text.
После выполнения в блокноте, сохраните данный пример как "song.htm" и увидите результат.
Продолжим знакомство с параметрами тэга . Как известно, во всяком HTML- документе применяются гиперссылки. Существуют несколько параметров, определяющих цвет ссылки.
link – определяет цвет еще не просмотренной ссылки,
alink – определяет цвет активной ссылки (ссылки, которая работает в данный момент),
vlink – определяет цвет уже просмотренной ссылки.
Например: <body link=red alink=yellow vlink=blue>.
Здесь цвет не просмотренной ссылки - красный, активной – желтый, просмотренной – синий.
По умолчанию браузеры выводят не посещенную ссылку - синим цветом, посещенную – фиолетовым.
Задание 4.1: Откройте документ "song.htm" и добавьте приведенные выше параметры, определяющие цвет ссылок. Конечно, необходимо будет создать гиперссылку, в данном документе, вспомните, как это делается (Урок №3). Если гиперссылка не создана, а в тэге <body> указаны ее параметры, то, естественно, Вы не увидите их действия. Для проверки работы гиперссылки, создайте самостоятельно еще один HTML – документ (с применением всех параметров, изученных на данном уроке) и в нем сделайте гиперссылку на первый файл ("song.htm"). Если все работает, поздравляю. Поэкспериментируйте с цветами ссылок, текста и фона.
Двинемся дальше. Обратимся теперь к параметрам, задающим границы полей HTML – документа. Таких параметров четыре:
topmargin - устанавливает границу верхнего поля документа в пикселях,
bottommargin - устанавливает границу нижнего поля документа в пикселях,
leftmargin - устанавливает границу левого поля документа в пикселях,
rightmargin - устанавливает границу правого поля документа в пикселях.
Например: <body topmargin=0 bottommargin=0 leftmargin=30 rightmargin=30>.
Здесь верхнее и нижнее поля отсутствуют (равны 0), а правое и левое поле по 30 пикселей.
Задание 4.2: Откройте документ "song.htm" и добавьте приведенные выше параметры, определяющие границы Вашего документа. Поэкспериментируйте с заданием различных значений границ.
Теперь поговорим о фоновых изображениях. Наряду с заданием цвета фона, HTML – страницу можно замостить так называемыми "обоями" или фоновым изображением. Для этого используется параметр background тэга <body>. Параметр background указывает на URL – адрес изображения, которое используется в качестве фонового. В качестве изображения должна использоваться "картинка" сохраненная в формате .Gif или .Jpeg (.jpg). Удобно использовать небольшое изображение (например, 5X5 см.) в качестве фонового, т.к. в этом случае оно застилает всю страницу без видимых швов (если оно удачно подготовлено для этих целей). Самой удобной программой для подготовки таких "кубиков" (текстуры) служит Photoshop (на худой конец Paint).
Задание 4.3: Откройте программу Paint, сожмите листок до небольших размеров; затем выберите какой либо цвет (лучше светлый) и, взяв на панели инструментов "распылитель", подготовьте равномерно раскрашенный "кубик". (Лучше использовать программу Photoshop и фильтр Texturizer из набора Texture). Сохраните полученную картинку в формате jpg (пусть ее имя будет pict). После этого откройте Вашу страницу "song.htm" и в тэг <body> вставьте background=pict.jpg. Сохранив изменения, вернитесь на страницу и увидите Ваши "обои".
Параметры bgcolor и background могут одновременно присутствовать в тэге <body>, в этом случае доминирующим будет background, а параметр bgcolor будет работать в случае, если пользователь находится в режиме отключения изображений.
Для обращения к следующему занятию Вам необходимо пройти тест
|
