КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
Чертёж второй Цвета и атрибуты
 |
И щенок Погромыч.
А друзья мои – это синичка Клава, кошка Дуся
Четвероногих и пернатых друзей.
Я люблю информатику, рисовать и своих
</BODY>
</HTML>
7. Сохрани файл и обнови его в браузере. Теперь лучше?
Возможно, твоё внимание привлёк такой факт – несмотря на то, что текст в коде разделён на абзацы, браузер его выводит одной строкой, за исключением заголовка. Более того, при изменении величины окна браузера текст «подстраивается» под его ширину, перенося неуместившиеся слова на новую строчку.
А как быть, если необходимо начать новую строку именно в этом месте, а не там, где закончится ширина окна браузера? Для этого служат два тега: тег <BR> начинает новую строку, а тег <P> – новый абзац. Отличаются они тем, что тег <P> не только начинает выводить текст с новой строки, но и добавляет перед этой строкой межстрочный интервал значительной ширины. Кроме этого, в теге <P> можно задать дополнительное форматирование, но об этом чуть позже.
Замечание: для тега <P> закрывающий тег </P> необязателен, а у <BR> его и вовсе нет.
8. Поэкспериментируй на своей страничке, вставляя теги <P> и <BR> в самые разные места текста, а затем приведи страничку к цивильному виду, правильно разделив текст на абзацы.
9. И в заключение выделим имена горячо любимых друзей, используя теги <B> </B> – полужирное начертание и <I> </I> – курсив. И наш первый «чертёж» принимает такой вид:
<HTML>
<HEAD>
<TITLE>Моя домашняя страничка</TITLE>
</HEAD>
<BODY>
<H2>Здравствуйте! Меня зовут Вася!</H2>
<P> Я учусь в 9 классе одиннадцатой школы
города Иркутска.
<P> Я люблю информатику, рисовать и своих
четвероногих и пернатых друзей.
|
|
|
<P> А друзья мои – это <I> синичка <B> Клава </B>,
кошка <B> Дуся </B> и щенок <B> Погромыч </B></I>.
</BODY>
</HTML>
Ты, конечно, заметил, что теги можно вкладывать друг в друга, как это сделано в последнем абзаце – внутрь тега <I> вложено три тега <B>.
1. Прежде всего изменим цвет фона нашей странички. Для этого в тег <BODY> добавим атрибут bgcolor:
<BODY bgcolor=#ffddff >
Атрибут – это что-то вроде свойства тега. Любой тег может иметь атрибуты и записываются они в тех же угловых скобках. Каждому атрибуту задаётся значение таким способом:
имя_атрибута = значение
Атрибут bgcolor отвечает за цвет фона, значением его является шестнадцатеричное число, записанное после знака #.
Если ты не знаком с RGB-кодированием цвета, то эти сведения для тебя:
Любой (или почти любой) цвет можно получить «сложением» трёх цветов – красного (Red), зелёного (Green) и синего (Blue). В коде цвета и представлена интенсивность каждой составляющей. Например, цвет #ff0000 – чистый красный (первая пара цифр – ff – максимальное значение, которое может принимать двузначное шестнадцатеричное число); цвет #00ff00 – яркозелёный, а #008800 – тоже зелёный, но темнее (примерно, вдвое); третья пара цифр отвечает за синюю составляющую (то есть, #0000ff – синий).
Цвет #ff00ff получен смешиванием красного и синего, получается что-то вроде малиново-сиреневого (этот цвет называется фукси), а цвет #8800ff – фиолетовый, в нём на полную мощность «включен» синий, а красный только наполовину.
Таким образом можно получить более 16 миллионов цветов, но нам так много не надо.
2. Поэкспериментируй с цветом фона и подбери самый подходящий для твоей странички.
3. Теперь займёмся цветом текста. В теге <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>
4. Ну вот, кажется, с цветами разобрались, наша страничка стала привлекательнее. Но, чтобы уж не осталось ничего недоговоренного, разберёмся ещё с двумя атрибутами, хотя к цветовой гамме странички они не имеют никакого отношения.
Атрибут align любого абзацного тега (<P>, <H1>,...) задаёт выравнивание абзаца (left – по левому краю, right – по правому, center – по центру, justify – по ширине). Атрибут size тега <FONT> задаёт размер шрифта в неких условных (от 1 до 7) или относительных (+1 или -2) единицах. Как это? Шрифт размера 1 – самый маленький, а 7 соответственно самый большой. Обычно, если размер шрифта не указан, можно считать, что текст выводится 3-им размером.
Если мы хотим какой-то фрагмент текста выделить слегка увеличенным шрифтом, можно задать +1 или +2 (на 1 или 2 больше базового). Ну а если что-то хотим уменьшить, то и размер можно задать -1 или -3.
5. Испробуй различные размеры шрифта для текста, может быть, что-то стоит выделить отдельно. Попробуй применить различное выравнивание для абзацев. И остановись на чём-нибудь подходящем, например, таком:
<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>
|
|
|
|
|
Дата добавления: 2014-11-16; Просмотров: 368; Нарушение авторских прав?; Мы поможем в написании вашей работы!