Домашняя страница Дениса Минича - HTML - это просто

HTML - это просто

Глава 2. Раскрасим страничку.

Давайте, прежде чем начинать учиться форматировать текст, его, собственно, и наберем. Чтобы содержание странички было более осмысленным и объемным.

<html> <head> <title>Главная страница</title> </head> <body> Привет! Я решил создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге. </body> </html>

Сохраним набранное нами в блокноте под именем index.html и откроем в браузере. Безрадостное зрелище, не так ли? Давайте научимся менять цвет текста.

Для перемены цвета шрифта текста, текст этот надо поместить в контейнерный тег font, указав необходимое значение его параметру color. То есть, если мы хотим, чтобы какой то текст на страничке был окрашен в зеленый цвет, то в коде надо записать: текст - на страничке слово "текст" будет написано зеленым цветом.

Основные цвета в web имеют свои названия: red, green, black, white, lime и т.д. Если мы с помощью параметров сообщим браузеру, что определенный текст имеет цвет green, он поймет и раскрасит буковки зеленым. Но есть дугой способ, и он гораздо более предпочтителен. Цвет представляется в виде шестнадцатеричного числа. Например, тот же lime можно представить в виде #00ff00. Представление цвета в шестнадцатеричном виде предпочтительнее, потому что, во-первых, фиксированных названий не так уж и много, во-вторых, эти цвета по фиксированным названиям могут отображаться разными браузерами по-разному. Шестнадцатеричное представление цветов вы можете увидеть в таблице цветов.

Но для примера покрасим буковки странички обоими способами:

<html> <head> <title>Главная страница</title> </head> <body> Привет! Я решил создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатлениях в гостевой книге. </body> </html>

В коде странички я намеренно выделил текст тем цветом, каким он будет отображен браузером.

Из примера хорошо видно, что не все цвета "одинаково полезны". Написанное желтым цветом практически невозможно прочитать на белом фоне. Сделаем вывод: выделение цветом может не только привлекать внимание читателя, но и раздражать его, а чрезмерное злоупотребление множеством ярких цветов скорее отвратит читателя от вашей страницы, нежели наоборот. Во всем нужно знать меру.

В рассмотренном выше примере можно увидеть принцип наследования. Обратите внимание на последнюю строку. Ее начало выкрашено темно-серым цветом, слово "мной" - серебряным, конец - снова темно-серым. Теперь посмотрите на код: цвет шрифта указывается только два раза - в начале строки и перед словом "мной". Почему же цвет меняется трижды?

Давайте подробнее рассмотрим тег . Этот тег парный: открывающий тег  сообщает браузеру, что сейчас будут произведены какие-то указания, связанные со шрифтом (font - шрифт англ.), закрывающий тег  показывает границы эти указаний. Параметр color тега сообщает, что изменения касаются цвета шрифта.

"Расшифруем" последнюю строчку. Принять цвет шрифта темно-серым, написать "Здесь все желающие смогут познакомится со ", принять цвет шрифта серебряным, написать "мной", отменить цвет шрифта серебряный (а какой был принят раньше?!), написать ", почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге.". Благодаря этому самому принципу наследования нам и не пришлось трижды указывать цвет шрифта. Этот принцип заложен в html и неукоснительно исполняется браузерами.

Почему мы не указали цвет шрифта в самом начале документа? Потому что черный цвет является цветом шрифта по умолчанию. Практически для всех параметров существует значение "по умолчанию". Но можно и поменять цвет шрифта всего документа. Воспользуемся для этого параметром text тега <body>. Укажем, к примеру фиолетовый цвет:

<body text="#9900cc">. Это значит, что фиолетовыми будут все буквы текста, кроме тех, для которых мы специально указали другой:

<html> <head> <title>Главная страница</title> </head> <body text="#9900cc"> Привет! Я решил создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге. </body> </html>

Разобравшись с цветами текста, попробуем силы в цвете фона. Согласитесь, белый (выставляемый по умолчанию) фон - это довольно скучно. Цвет фона выставляется в уже знакомом нам теге <body>, для этого существует параметр bgcolor. Укажем синий фон на нашей страничке:

<html> <head> <title>Главная страница</title> </head> <body text="#9900cc" bgcolor="#0000ff"> Привет! Я решил создать свою страничку в Интернете, пока я совсем не знаю, как это делается, но скоро научусь. Тогда я смогу сообщить о себе всему миру, у меня появятся новые друзья и новое интересное занятие. Здесь все желающие смогут познакомится со мной, почитать мою биографию, посмотреть мои рисунки и фотографии и сообщить о своих впечатления в гостевой книге. </body> </html>

В одном теге можно прописывать сразу несколько параметров. В теге <body> мы указали и цвет фона документа и цвет текста.

Заметили, что как не всякий цвет шрифта хорошо переваривается, так же и не всякий цвет фона одинаково приятен для восприятия. Поэкспериментируйте с различными цветами фона. По-моему, лучшими являются белый, различные светлые цвета и черный. Но запомните, что цвет фона должен гармонировать со всем остальным содержанием странички, подчиняться общему дизайну.

Говоря о дизайне, следует упомянуть о параметрах, принимаемых по умолчанию. По умолчанию браузер принимает цвет фона за белый, цвет шрифта за черный. Но пользователь может легко изменить эти значения в настройках браузера, Скажем, поменять их местами. Так что, если вы не хотите, чтобы продуманный вами дизайн искажался, указывайте даже те параметры, которые принимаются по умолчанию. Рекомендую заглянуть на страничку с таблицей цветов html.

Начало | Содержание | Словарь

Глава1. Отвечаем на вопрос "чем" | Глава 3. Форматирование текста