На прошлом уроке мы с Вами изучили работу с картинками. На этом уроке мы попробуем задать цвета. Надо сказать, что многие авторы HTML любят использовать заранее предопределенные цвета фона документа, обычного текста и ссылок. Для того, чтобы задать эти цвета, мы включаем в тэг Body
соответствующие параметры. С тэгом Body мы с Вами работали на прошлом уроке при включении фоновой картинки. Для того чтобы ввести цвет фона, мы пишем Background color, но только в сокращенном виде, то есть, пишем B COLOR.
Равняется. Здесь мы задаем цвет в шестнадцатиричном формате по схеме RGB. Что значит Цвет по схеме RGB?
Дело в том, что любой цвет состоит из трех цветов: красного, зеленого и голубого. Если цвет не содержит ни один из этих цветов, то он представляет собой черный цвет. Мы сейчас попытаемся изобразить черный цвет.
Сначала ставим знак Диеза, чтобы указать, что мы начинаем изображение цвета. Первая составляющая R у нас равна двум нулям (то есть, этот цвет в общей сложности - нулевой). Далее. Зеленый цвет тоже равен нулю. Синий - также. Дело в том, что каждый из цветов RGB кодируется одним байтом. Это означает, что максимальное значение этого кода может составлять 255 (от 0 до 255). Попробуем понять, что это значит на следующем примере. Итак, цвет фона мы задали черный.
Зададим точно таким же образом цвет текста… Сначала вводим знак Диеза. Мы хотим задать для цвета текста белый цвет. Белый цвет является максимальным в палитре. То есть, для белого цвета и R - максимально, и G, и B. Все составляющие (красный, зеленый и синий) - максимальные. Максимальный для шестнадцатиричных цветов - это FF, то есть, фактически, 255. Пишем 255, 255 и 255. Итак, мы с Вами получили белый цвет. Теперь - ссылки. Ссылки у нас должны быть в Link-е… Сейчас посмотрим… Диез. Составляющая красного цвета - 96, зеленого цвета - 90 и синего - СС. Посмотрим, что теперь у нас получилось. Сохраним этот файл и обновим его вот здесь. Что мы теперь имеем? Сейчас у нас текст изображен белым цветом, то есть, именно так, как мы с Вами планировали. Фон у нас черный, как мы и задавали. А ссылки имеют вот такой непонятный цвет.
Посмотрим, что мы можем сейчас сделать. Мы можем, к примеру, обнулить составляющие красного и зеленого цветов. Нет, все-таки, лучше обнулим составляющие красного и синего цветов. А составляющие зеленого цвета сделаем чем-то средним. Было бы логично ожидать, что после того, как мы перезагрузим страницу в нашем браузере, эти ссылки станут зеленого цвета. К сожалению, сейчас они не станут зелеными, потому что в данный момент они
являются посещенными ссылками. Мы с Вами уже посетили их. Поэтому они у нас стали вот такими темно-синими.
Давайте сейчас попробуем поменять какую-либо из ссылок. Например, поставим что-то в этом роде вот сюда. А здесь, к примеру, поставим 4 или 5. Здесь закроем этот тэг. Фактически, мы с Вами сейчас поставили новую ссылку. Сохраним этот файл и обновим его. В этом случае, как видите, не посещенная ссылка отображается зеленым цветом, то есть, именно тем цветом, который мы задали вот здесь. Здесь установлено 88 - средне-зеленый цвет. Прекрасно. Мы получили то, что и хотели получить.
А теперь попытаемся изобразить горизонтальную линию. Текст можно разделить горизонтальной линией, используя тэг, называемый Horizontal (HR). Тэг Horizontal имеет следующие параметры. Один из параметров - Size. Это величина этой самой горизонтальной линии. Здесь мы ошиблись… Size. Равняется. Величина линии означает ее толщину в точках.
Давайте, попробуем задать здесь, к примеру, 5 (вот такую толщину линии). Затем зададим ее ширину. Ширина линии может быть задана в точках или в процентах (от ширины окна браузера). Зададим 50% от ширины окна браузера (можно задать и в точках). И, соответственно, у нас сейчас идет выравнивание, то есть, как конкретно расположить эту самую линию относительно экрана (ALIGN).
ALIGN у нас может быть равен, например, Left-у. Это означает расположение слева. Посмотрим, что при этом получится. Закроем этот тэг. Сохраним и нажмем на кнопку Обновить. Теперь Вы видите на экране выровненную с левой стороны вот такую линию. Эту линию мы с Вами сумели отобразить здесь с помощью этого тэга, который называется HR. Мы теперь можем увеличить ширину этой линии. Например, сделаем ее вот такой, равной 10 пикселям. Сохраним и обновим изображение в браузере. Как видите, ширина линии соответственно увеличилась. Если мы зададим здесь 100%, то линия, фактически, займет собой весь экран. Проверим это. Обновили - и линия, соответственно, увеличилась.
На этом мы завершим наш урок. Мы с Вами научились менять цвета в нашем документе и изображать горизонтальные линии. На следующем уроке мы начнем изучать стили нашего HTML-документа.