- •Л. Татарникова
- •Введение
- •Чертёж первый Голова, тело, заголовок…
- •Чертёж второй Цвета и атрибуты
- •Чертёж третий Картинки и бегущие строки
- •Чертёж четвёртый Гиперссылки
- •Чертёж пятый Таблицы
- •Чертёж шестой Списки и отступы
- •Чертёж седьмой Фреймы
- •Чертёж восьмой Карта ссылок
- •Чертёж девятый css или каскадные таблицы стилей, половина первая
- •Чертёж девятый css, оформление блока, половина вторая
- •Чертёж десятый Размещение Flash-объектов на страничке
- •Чертёж одиннадцатый Знакомство с Java Script, половина первая
- •Чертёж одиннадцатый Некоторые объекты js, половина вторая
- •Чертёж одиннадцатый Операторы js, «половина» третья
- •Чертёж одиннадцатый js, ещё немного, «половина» четвёртая
- •Чертёж последний Позаботимся о тех, у кого «нестандартный» браузер
- •Заключение
- •Приложения Приложение 1 Теги html
- •Приложение 2 Свойства css
- •Приложение 3 Объекты JavaScript
- •Приложение 4 События
- •Литература
- •Оглавление
Чертёж второй Цвета и атрибуты
Прежде всего изменим цвет фона нашей странички. Для этого в тег <BODY> добавим атрибут bgcolor:
<BODY bgcolor=#ffddff>
Атрибут – это что-то вроде свойства тега. Любой тег может иметь атрибуты и записываются они в тех же угловых скобках. Каждому атрибуту задаётся значение таким способом:
имя_атрибута=значение
Атрибут bgcolor отвечает за цвет фона, значением его является шестнадцатеричное число, записанное после знака #.
Если ты не знаком с RGB-кодированием цвета, то эти сведения для тебя:
Любой (или почти любой) цвет можно получить «сложением» трёх цветов – красного (Red), зелёного (Green) и синего (Blue). В коде цвета и представлена интенсивность каждой составляющей. Например, цвет #ff0000 – чистый красный (первая пара цифр – ff – максимальное значение, которое может принимать двузначное шестнадцатеричное число); цвет #00ff00 – яркозелёный, а #008800 – тоже зелёный, но темнее (примерно, вдвое); третья пара цифр отвечает за синюю составляющую (то есть, #0000ff – синий).
Цвет #ff00ff получен смешиванием красного и синего, получается что-то вроде малиново-сиреневого (этот цвет называется фукси), а цвет #8800ff – фиолетовый, в нём на полную мощность «включен» синий, а красный только наполовину.
Таким образом можно получить более 16 миллионов цветов, но нам так много не надо.
Поэкспериментируй с цветом фона и подбери самый подходящий для твоей странички.
Теперь займёмся цветом текста. В теге <BODY> можно задать цвет текста для всей странички атрибутом text. А для каждого абзаца, слова или даже буквы цвет текста задаётся атрибутом color тега <FONT>. Подбери цвета для заголовка и основного текста, «раскрась» страничку:
<HTML>
<HEAD>
<TITLE>Моя домашняя страничка</TITLE>
</HEAD>
<BODY bgcolor=#ffddff text=#880088>
<H2><FONT color=#ff0088>Здравствуйте! Меня зовут
Вася!</FONT></H2>
<P>Я учусь в 9 классе одиннадцатой школы
города Иркутска.
<P>Я люблю информатику, рисовать и своих
четвероногих и пернатых друзей.
<P>А друзья мои – это <I>синичка <B>Клава</B>,
кошка <B>Дуся</B> и щенок <B>Погромыч</B></I>.
</BODY>
</HTML>
Ну вот, кажется, с цветами разобрались, наша страничка стала привлекательнее. Но, чтобы уж не осталось ничего недоговоренного, разберёмся ещё с двумя атрибутами, хотя к цветовой гамме странички они не имеют никакого отношения.
Атрибут align любого абзацного тега (<P>, <H1>, ...) задаёт выравнивание абзаца (left – по левому краю, right – по правому, center – по центру, justify – по ширине). Атрибут size тега <FONT> задаёт размер шрифта в неких условных (от 1 до 7) или относительных (+1 или -2) единицах. Как это? Шрифт размера 1 – самый маленький, а 7 соответственно самый большой. Обычно, если размер шрифта не указан, можно считать, что текст выводится 3-им размером.
Если мы хотим какой-то фрагмент текста выделить слегка увеличенным шрифтом, можно задать +1 или +2 (на 1 или 2 больше базового). Ну а если что-то хотим уменьшить, то и размер можно задать -1 или -3.
Испробуй различные размеры шрифта для текста, может быть, что-то стоит выделить отдельно. Попробуй применить различное выравнивание для абзацев. И остановись на чём-нибудь подходящем, например, таком:
<HTML>
<HEAD>
<TITLE>Моя домашняя страничка</TITLE>
</HEAD>
<BODY bgcolor=#ffddff text=#880088>
<H2 align=center><FONT color=#ff0088>
Здравствуйте! Меня зовут Вася!</FONT></H2>
<P><FONT size=+1>Я учусь в 9 классе одиннадцатой школы
города Иркутска.
<P>Я люблю информатику, рисовать и своих
четвероногих и пернатых друзей.
<P>А друзья мои – это <I><FONT size=+0>синичка
<B>Клава</B></FONT>,
кошка <B>Дуся</B> и <FONT size=+2>щенок
<B>Погромыч.</B></I></FONT></FONT>
</BODY>
</HTML>
Возможно, у тебя возник каверзный вопрос – зачем такие сложности? Почему бы не задать размер шрифта как в любом текстовом редакторе в пунктах?
Давай проведём небольшой эксперимент. Выбери в меню браузера Вид Размер шрифта Самый крупный. Ну как? Вся твоя кропотливо проделанная работа по подбору размеров пошла насмарку.
В том, что посетитель твоей странички может выбрать размер текста по своему усмотрению, есть своя логика. Но заметь, что при этом соотношение размеров шрифтов осталось неизменным. И вид странички, в общем-то, не пострадал.
И ещё одно замечание. Для любого тега можно записать сразу несколько атрибутов через пробел, например, так:
<FONT color=#cccc00 size= -2>