| При задании различных оттенков цвета при кодировании графической информации, широко применяется следующая система счисления: |
Преподаватель
Вы можете этот курс.
Опубликован: 27.07.2006 | Уровень: для всех | Доступ: свободно
Лекция 5:
Основы языка HTML
Цветовое оформление документа
Определение цвета составных частей документа - один из первых шагов в его создании. Если этого не сделать, то будут использоваться цвета по умолчанию, определяемые установками браузера. Не существует каких-либо правил создания хорошо сбалансированной цветовой палитры документа. Нужно лишь заботиться о том, чтобы можно было прочитать текст, не испытывая при этом неудобств. При выборе цветовой палитры старайтесь поддерживать высокую контрастность текста и фона и избегайте соседства областей с близкими цветами.
Цвет может быть задан названием (например, green) или шестнадцатеричным числом, определяющим цвет в модели RGB. Эта цветовая модель базируется на определении цвета как композиции трех основных оттенков цвета: красного (Red), зеленого (Green) и синего (Blue). Каждая компонента задается двузначным шестнадцатеричным числом (т. е. изменяется от 00 до FF). Затем эти значения объединяются в одно число, перед которым ставится символ # (большинство современных браузеров может распознать цвет и без указания символа #).
Следует также отметить, что в записи шестнадцатеричного значения цвета можно использовать как большие, так и маленькие латинские буквы, например, запись #00FF00 равнозначна записи #00ff00.
Ниже представлена таблица 16 стандартных цветов вместе с их шестнадцатеричными кодами. Современные браузеры понимают 140 наименований цветов, часть из которых приведена в главе "Динамический HTML".
Пример
Чтобы установить синий цвет фона документа нужно для синей составляющей цвета указать максимальное значение, а остальные сделать равными нулю: <BODY BGCOLOR="#0000FF">.
Тот факт, что разработчик Web-страницы ничего не знает о компьютере, на котором этот документ будет просматриваться, накладывает дополнительные ограничения на использование RGB-модели. На некоторых мониторах невозможно отобразить все разнообразие оттенков. Браузеры в этом случае сокращают используемое количество цветов, переназначая их под собственные палитры. Использование разработчиками гипердокументов Web-палитры является в некотором роде гарантией того, что документ будет выглядеть одинаково на различных дисплеях.
Web-палитра распознает по шесть оттенков красного, синего и зеленого цвета, что в результате дает 216 возможных значений цветов (6x6x6=216). Поэтому ее иногда называют "куб 6x6x6". В таблице приведены численные значения цветов из Web-палитры.
| Шестнадцатеричные | Десятичные | Процентные |
|---|---|---|
| 00 (самый темный) | 0 | 0 % |
| 33 | 51 | 20 % |
| 66 | 102 | 40 % |
| 99 | 153 | 60 % |
| CC | 204 | 80 % |
| FF(самый светлый) | 255 | 100 % |
Цвета, RGB-компоненты которых входят в Web-палитру, называют Web-надежными цветами. Среди всех цветов, имеющих имена, только 10 цветов входят в Web-палитру: aqua, black, blue, cyan, fuchsia, lime, magenta, red, white и yellow.
Разделение текста на абзацы
Язык HTML предполагает, что автор документа ничего не знает о компьютере своего читателя. Читатель вправе установить любой размер окна и пользоваться любым из имеющихся у него шрифтов. Это означает, что место переноса в строке определяется только программой просмотра и установками конечного пользователя. Символы перевода строки оригинального документа игнорируются, в результате чего текст, отлично смотревшийся в окне вашего редактора, может превратиться в сплошной неудобочитаемый текст в окне программы просмотра.
Избежать этой неприятности позволяет разделение на абзацы при помощи тега <Р>. Разместите его в начало каждого абзаца, и программа просмотра отделит абзацы друг от друга пустой строкой. Использование закрывающего тега </Р> необязательно. Несколько стоящих подряд тегов <Р> не дают дополнительного пространства между абзацами.
Тег абзаца имеет один атрибут, поддерживаемый большинством браузеров. Это атрибут ALIGN, задающий выравнивание текста в абзаце. Если этот атрибут не задан, то текст выравнивается по левому краю окна браузера. В таблице представлены возможные значения этого атрибута:
| Значение | Функция |
|---|---|
| LEFT | Выравнивание текста по левой границе окна браузера |
| CENTER | Выравнивание по центру окна браузера |
| RIGHT | Выравнивание по правой границе окна браузера |
| JUSTIFY | Выравнивание текста по ширине окна браузера |
Пример
Если вы хотите, чтобы текст абзаца был выровнен по центру, нужно написать следующее: <P ALIGN=CENTER> Текст </P>
Разрыв строки
Иногда требуется "разорвать" текст, перенеся его остаток на новую строку, при этом не выделяя нового абзаца. Для этого используется тег разрыва строки <BR>. Он заставляет программу просмотра выводить стоящие после него символы с новой строки. В отличие от тега абзаца, тег <BR> не добавляет пустую строку. У этого тега нет парного закрывающего тега.
Пример
<HTML> <HEAD> <TITLE> Иосиф Бродский </TITLE> </HEAD> <BODY TEXT=black BGCOLOR=white> Откуда к нам пришла зима, <BR> не знаешь ты, никто не знает. <P> Умолкло все. Она сама <BR> холодных губ не разжимает. </BODY> </HTML>
Некоторые браузеры интерпретируют несколько стоящих рядом тегов <BR> как один тег, поэтому не стоит использовать его для вставки пустых строк.
Бывают случаи, когда возникает надобность в операции противоположного назначения - запретить перевод строки. Текст, заключенный между тегами <NOBR> и </NOBR>, будет гарантированно располагаться в одной строке без переноса на другую.
Горизонтальные линии
Другим методом разделения документа на части является проведение горизонтальных линий. Они визуально подчеркивают законченность той или иной области страницы. Тег <HR> позволяет провести рельефную горизонтальную линию в окне большинства программ просмотра. Этот тег не требует закрывающего тега. До и после линии автоматически вставляется пустая строка. Атрибуты тега <HR> представлены в таблице.
| Атрибут | Назначение |
|---|---|
| ALIGN | Выравнивает по краю или центру; имеет значения LEFT, CENTER, RIGHT |
| WIDTH | Устанавливает длину линии в пикселах или процентах от ширины окна браузера; в последнем случае добавляется символ % |
| SIZE | Устанавливает ширину линии в пикселах |
| NOSHADE | Отменяет рельефность линии |
| COLOR | Указывает цвет линии; используется наименование цвета или шестнадцатеричный код |
Задания
- Создайте документ с именем index.html, в заголовке которого поместите свои имя и фамилию и установите белый цвет фона.
- Включите в документ четыре абзаца текста, демонстрирующие различные случаи выравнивания. Разделите их горизонтальными линейками с различными значениями атрибутов.
