- •Лабораторная работа Создание Web-страницы
- •Дрессировка
- •Часть 1. Форматирование текста на Web-странице по образцу
- •Часть 2. Создание нумерованных и ненумерованных списков
- •1.4. Управление цветом
- •1.5. Рисунки на Web-странице
- •Часть 1. Оформление цветом Web-страницы
- •Часть 2. Размещение графики на Web-странице
- •Часть 3. Изменение размеров изображения на Web-странице
- •1.6. Гиперссылки
- •Часть 1. Создание простейшей гиперссылки
- •Часть 2. Создание гиперссылок
- •Часть 3. Цвет гиперссылок
- •Часть 4. Использование рисунка в качестве гиперссылки
- •1.7. Таблицы
- •1.7.1. Создание и форматирование таблиц
- •Часть 1. Создание таблицы по образцу
- •Часть 2. Форматирование таблицы
- •Часть 3. Заполнение таблицы
- •Часть 4. Самостоятельное проектирование и создание таблицы
- •1.7.2. Разметка Web-страницы при помощи таблицы
<
Домашние животные
(Заголовок
H1)
Собаки
(Заголовок
H2)
Сторожевые (выравнивание
слева, полужирный шрифт)
Охотничьи
(выравнивание
справа, полужирный шрифт)
(выравнивание
по центру, полужирный курсив)
Клубы Выставки Площадки
(Выравнивание
по центру, размер шрифта 14, цвет шрифта
красный)
Стихотворение
(Цвет шрифта синий,
выравнивание по центру)
Наша Таня громко
плачет,
Уронила в речку
мячик.
Тише, Танечка, не
плачь!
Не утонет в речке
мяч.
(Выравнивание
по левому краю, размер шрифта 10)
Дрессировка
<НЗ> Заголовок 3 </hЗ>
<Н4> Заголовок 4 </h4>
<Н5> Заголовок 5 </h5>
<Н6> Самый маленький заголовок </h6>
Задание № 2 «Форматирование текста на Web-странице»
Часть 1. Форматирование текста на Web-странице по образцу
Цель: научиться форматировать шрифт и текст на Web-странице.
Указания к выполнению
1. Создайте новую Web-страницу в редакторе Блокнот.
2. В элементе <TITLE> укажите название странички «Задание № 2. Часть 1».
3. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на рисунке справа.
Часть 2. Создание нумерованных и ненумерованных списков
Цель: научиться создавать списки на Web-странице.
Указания к выполнению
1. Создайте новую Web-страницу в редакторе Блокнот.
2. В элементе <TITLE> укажите название странички «Задание № 2. Часть 2».
3. Отформатируйте следующий текст согласно указаниям (даны в скобках курсивом), как показано на следующем рисунке.
Солнце должно быть
(Шрифт
размером 12, красного цвета, выравнивание
по центру)
Тёплым.
Круглым.
Жёлтым.
Снег должен быть:
(Шрифт
размером 10, синего цвета, выравнивание
по левому краю)
A. Белым.
B. Холодным.
C. Пушистым.
(Шрифт
обоих списков чёрный, размер 3)
1.4. Управление цветом
С помощью цвета вы можете оживить любую Web-страницу, сделать ее более выразительной и удобной для просмотра. Кодирование цвета используется для раскрашивания шрифтов, горизонтальных линий и фона, других элементов странички. Цвета обозначаются английскими названиями или числовыми шестнадцатеричными кодами.
Самый простой способ определить цвет – написать его название на английском языке. Так, например, задается красный цвет шрифта в элементе <FONT>:
<FONT color=”red”> Текст, который в браузере будет отображен красным цветом </font>
В табл. 2 представлены все допустимые названия цветов. Но в общем случае цвет определяется, как вам уже известно, в формате RGB, только каждая составляющая выражается не в десятичной системе счисления (от 0 до 255), а в шестнадцатеричной системе счисления (от 00 до FF).
Таблица 2. Названия и коды цветов
Русское название |
Английское название |
RGB-код |
Аквамарин |
Aqua |
#00FFFF |
Белый |
White |
#FFFFFF |
Желтый |
Yellow |
#FFFF00 |
Зеленый |
Green |
#008000 |
Золотой |
Gold |
#FFD700 |
Индиго |
Indigo |
#4B0080 |
Каштановый |
Maroon |
#800000 |
Красный |
Red |
#FF0000 |
Оливковый |
Olive |
#808000 |
Оранжевый |
Orange |
#FFA500 |
Пурпурный |
Purple |
#800080 |
Светло-зеленый |
Lime |
#00FF00 |
Серебристый |
Silver |
#C0C0C0 |
Серый |
Gray |
#808080 |
Сизый |
Teal |
#008080 |
Синий |
Blue |
#0000FF |
Ультрамарин |
Navy |
#000080 |
Фиолетовый |
Violet |
#EE80EE |
Фуксиновый |
Fuchsia |
#FF00FF |
Черный |
Black |
#000000 |
Если вы задаете цвет не английским названием, а его цветовым кодом, то выглядеть это будет следующим образом:
<FONT color=”#FF0000”> Текст, который в браузере будет отображен красным цветом </font>
Чтобы задать цвет фона Web-страницы, внутри начального элемента <BODY> указывается атрибут bgcolor=”цвет”.
У многих пользователей в нашей стране могут быть проблемы при отображении той или иной страницы на экране монитора. Возможны многие причины, по которым браузер отображает не более 256 цветов (или 256 оттенков серого). Например, у пользователя старый монитор или, наоборот, мобильное устройство и т. п. В этих случаях автор сайта может и должен использовать безопасную палитру.
Существует набор из 216 цветов, которые воспроизводятся любым браузером. Этот набор цветов называется безопасной палитрой.
Если ваша картинка содержит цвета только из безопасной палитры, то изображение будет без цветового искажения показано и на 256-цветных мониторах. Если это не так, браузер на таких мониторах начнет приближать отсутствующие цвета по одному ему известному алгоритму, и результат будет непредсказуемым, а, значит, заведомо плохим.
Безопасная палитра встраивается во многие графические редакторы (в Фотошопе она называется Web-палитрой).
Можно выбирать цвета безопасной палитры и вручную, пользуясь простыми правилами ее построения: 216 цветов безопасной палитры получаются комбинацией RGB-составляющих, каждая из которых может принимать только следующие шестнадцатеричные значения: 00, 33, 66, 99, CC, FF (или 0, 51, 102, 153, 204, 255 в десятичной системе счисления).
Таким образом, всего возможно 63 комбинаций, то есть, 216 цветов.
Пример 14
<BODY bgcolor=”blue”>...</body>
или
<BODY bgcolor=”00FF00”> ...</body>
Кроме этих стандартных цветов можно использовать и их различные оттенки. Можно сделать вывод, что «раскрашивание» Web-страницы – хороший способ придать ей современный, профессиональный вид. Но в данном случае большое значение имеют не только изобретательность и вкус, но в первую очередь чувство меры. Цветовая проработка Web-страницы является альтернативой применению многочисленных рисунков и позволяет обеспечить более быструю загрузку документа. Так уж повелось, что многие мелкие детали (например, маркеры) представляют собой файлы формата GIF, и часто приходится долго ждать, пока загрузятся все кружочки, квадратики, черточки и другая графическая мелочь. Солидные фирмы могут себе это позволить, так как заинтересованному клиенту не остается другого выхода, как ждать окончания загрузки нужной страницы. Если вы создаете личную страницу, т. е. резон сделать ее быстро загружаемой. Иначе ваши потенциальные читатели, не дождавшись прорисовки всех деталей, уйдут «бродить» по другим уголкам Сети.