Практическая
работа №2
Цвет текста
«Цвет может
успокоить и возбудить,
создать гармонию и вызвать потрясение.
От него можно ждать чудес,
но он может и вызвать катастрофу».
создать гармонию и вызвать потрясение.
От него можно ждать чудес,
но он может и вызвать катастрофу».
Жак Вьено
Прежде чем воспользоваться цветовыми возможностями на HTML–страницах познакомимся с основными способами представления цветов на Web-страницах.
Цитата
Таблица цветов HTML предоставляет возможность подобрать
нужный тон. Значение цвета отображается в трех форматах: Hex, RGB и HSV.
·
Hex состоит из трех двух символьных значений
в шестнадцатеричной системе счисления. Например: #ff00b3, где первая пара чисел
- красный, вторая - зеленый, а третья - синий.
·
RGB (RedGreenBlue) имеет вид
"200,100,255", обозначающее количество соответствующего
тона(красный,зеленый,синий) в получаемом цвете.
·
HSV (Hue, Saturation, Value - тон,
насыщенность, значение) - цветовая модель, в которой в качестве координат
являются:
o
Hue — цветовой тон, может варьироваться в
пределах от 0° до 360°.
o
Saturation — насыщенность, варьируется в пределах
0—100 или 0—1. Чем больше этот параметр, тем «чище» цвет, поэтому этот параметр
иногда называют чистотой цвета. А чем ближе этот параметр к нулю, тем ближе
цвет к нейтральному серому.
o
Value (значение цвета) - задает яркость,
значение так же может варьироваться в пределах 0—100 или 0—1.
Воспользуемся RGB способом обозначения цвета. Таким способом, например, белый цвет обозначается ffffff. Итак, палитра.
Рассмотрим и подберем цвет текста для своего сайта на страницах Википедии:
https://goo.gl/yBBfgi.
Не стоит слишком увлекаться.
«Пестрая» страница говорит о непрофессионализме автора и очень мешает
восприятию контента. Всем известно, что цвета воспринимаются нами как сигналы,
т. е уже содержат определенную информацию, на которую человек непроизвольно
реагирует. А это значит, что цвет может усилить или ослабить желаемый эффект восприятия
информации.
Color – параметр (атрибут) для
тэга font, он отвечает, в данном случае, за цвет заключенного в контейнер
текста. Атрибут color, как и другие атрибуты, не принадлежит только одному
тэгу, он может быть присвоен и некоторым другим тэгам.
Обратите внимание, что значению
цвета обязательно должен предшествовать значок «решетка» - #.
Попрактикуемся!
1. Подберите цвет текста для своего
сайта на страницах Википедии: https://goo.gl/yBBfgi.
2. Запомните или откопируйте код
понравившегося цвета.
3. Сделайте текст «Здравствуйте, это моя первая страница.» выбранным цветом. (на образце
ниже выбран красный цвет).
|
|
<html>
<head> <title>
Сайт Иванова
</title>
</head> <body> <font color="#CC0000"> Здравствуйте, это моя первая страница. </font>
<br>
Здорово получилось? ;) </body> </html> |
Тэг <font></font> - многофункционален. Им может задаваться не
только цвет текста в конкретной части документа, но и размер шрифта, и вид
шрифта.
Рассмотрим еще один способ
определения цвета текста в HTML-документе?
<body text="#00ff00">
Эта команда сделает весь текст
страницы зелёным, кроме текста, цвет которого переопределен тэгом
<font></font>.
Если цвет текста в <body>
не задавать, то по умолчанию он будет черным.
Фон
- Изменим
цвет текста HTML-страницы с помощью тэга
<body> на любой цвет по Вашему вкусу.
- Подберите
и измените цвет фона через атрибут bgcolor тэга
<body> (одному тэгу можно присваивать
несколько атрибутов).
Если цвет в <body> не указывать, то
по умолчанию он будет белым.
|
|
<html>
<head> <title>
Сайт
Иванова
</title>
</head> <body text="#00FF00" bgcolor="#FFDDFF"> <font color="#CC0000"> Здравствуйте, это моя первая страница. </font>
<br>
Здорово получилось? ;) </body> </html> |
Если цветовые предпочтения определены, то перед тем, как приступить к
разработке сайта, можно посмотреть, как Ваш выбор будет выглядеть в сети. Для
этого советую воспользоваться ресурсом, предназначенным для решения задач по
подбору цвета «Contrast-A»
(http://www.dasplankton.de/ContrastA/).
Полезные советы:
·
При
написании сайта создайте папку, где будут располагаться все файлы сайта.
·
Называйте
странички осмысленно, тогда не придётся держать в голове нужную информацию,
чтобы связать объекты перекрёстными ссылками.
·
При
написании кода лучше придерживаться "хорошей манере письма", то есть
писать теги "лесенкой" по мере вложенности одного тега в другой. Такой
код читать значительно легче.
|
<html>
<head> <title>
Сайт
Иванова
</title>
</head> <body text="#00FF00" bgcolor="#FFDDFF"> <font color="#CC0000"> Здравствуйте, это моя первая страница. </font>
<br>
Здорово получилось? ;) </body> </html> |
Для сравнения:
|
<html>
<head> <title>
Сайт Иванова
</title>
</head> <body text="#00FF00" bgcolor="#FFDDFF"> <font color="#CC0000"> Здравствуйте, это моя первая страница. </font>
<br>
Здорово получилось? ;) </body> </html> |
Параграф.
Параграф.- это
логическая часть текста, которая печатается с новой строки, выделяя этот текст
из основной массы. Текст, разбитый на параграфы легче читать.
Для определения
на странице сайта параграфа используется тэг <p>.
Тэг <p> имеет атрибут align (выравнивание: center, left, right, justify).
Пример:
Текст располагаем
по центру:
|
<p align="center">
Здорово получилось? ;)
</p>
|
Или по
левому краю:
|
<p align="left">
Здорово получилось? ;)
</p>
|
По
правому краю:
|
<p align="right">
Здорово получилось? ;)
</p>
|
Или же
обоим краям документа:
|
<p align="justify">
Здорово получилось?
;) - здесь нужен текст
подлиней чтобы выравнивание хорошо просматривалось при открытии документа
</p>
|
Попрактикуемся!
1)
Измените текст Вашей страницы, дополнив его
информацией о себе.
2)
Отформатируйте страницу:
a. Отформатируйте
текст «Здравствуйте, это моя первая страница.», выровняв
его по центру с помощью тэга <p>.
b. Вновь набранный абзац выровняйте по ширине.
c.
Текст «Здорово
получилось? ;)» выровнявняйте по центру, используя тэг <center>.
|
<html>
<head> <title>
Сайт Иванова
</title>
</head> <body text="#00FF00" bgcolor="#FFDDFF"> <p align="center">
<font color="#CC0000">
Здравствуйте, это моя первая страница. </font>
</p>
<p
align="justify">
И я очень рад, что вы заглянули на мою
страничку! Позвольте представиться! Меня зовут Сергей. Я учусь в 11-м классе.
Скоро я заканчиваю школу и планирую связать свою жизнь с Web-дизайном.
</p>
<br>
<center>
Здорово получилось? ;)
</center>)
</body> </html> |
Важно!
1) Тег <p> не может содержать в себе
других параграфов, то есть писать вот так:
|
<p>
<p>
…
</p>
</p>
|
Нелогично
(как может один параграф содержать в себе другой?)
2) Нельзя писать пустые теги <p>
</p> без текста.
3) По умолчанию текст выравнивается
браузером по левому краю (атрибут align="left" можно не указывать).
4) Тег <p> подразумевает в себе перенос
строки.
5) Еще одним способом выравнивания текста по
центру является использование тега <center>: <center>
Здорово получилось? ;) </center>
Комментариев нет:
Отправить комментарий