Цветовое оформление web-страницы, списки, ссылки в web-страницах

	1. Повторение теоретических сведений.
2. Выполнение команд, представленных в таблице.
3. Выполнение практической работы.
4. Ответы на контрольные вопросы.
5. Выполнение теста.

Цель:получить начальные сведения об изменения цвета страницы, фон, вставлять гиперссылки, вставлять графические объекты, создавать списки

Знать:

- понятие гиперссылки, основные тэги их создания;

Уметь:

- изменять цвет страницы,

- выбирать фон,

- вставлять гиперссылки,

- вставлять графические объекты.

- создавать списки в различных вариантах

- пользоваться основными атрибутами для преобразования изображений в документе

Формируемые компетенции: ПКНМ-7, ПКНИ-8, ПКНМ-3.

Цветовое оформление web-страницы, списки, ссылки в web-страницах - student2.ru

Теги	Результат
Цветовое оформление страницы
<BODY BGCOLOR = "#FFFFFF">	цвет фона -белый
<BODY BACKGROUND = "image.gif">	фоновый узор – картинка image.gif
<BODY LINK="gray">	цвет ссылки по умолчанию
<BODY VLINK="blue">	цвет пройденной ссылки
<BODY АLINK="red">	цвет активной ссылки
Некоторые коды цветов (00-FF)
"#FF0000"	красный
"#00FF00"	зеленый
"#0000FF"	синий
"#FFFFFF"	белый
"#000000"	черный
Цветовое оформление текста
<FONT СOLOR="blue" SIZE="1"> Текст </FONT> (SIZE от -7 до7)	Текст синего цвета с высотой букв 1
Изображения на сайте
<IMG SRC = "star.gif ">	Просто картинка
<A HREF = "test.htm" > <IMG SRC ="button.gif" BORDER="0"> </A>	Картинка-ссылка без граничной рамки
<A HREF = "test.htm" > <IMG SRC ="button.gif"> </A>	Картинка-кнопка
ALT="альтернативный текст"	Если картинка не загрузится, можно будет прочитать этот текст
<IMG SRC = "star.gif">	Это картинка без выравнивания (по умолчанию)
<IMG SRC = "star.gif " ALIGN="left">	Картинка слева от текста. Текст может размещаться на нескольких строчках и плавно обтекать картинку
<IMG SRC = "star.gif " ALIGN=" middle ">	Картинка центрирована по вертикали относительно текста
<IMG SRC = "star.gif " ALIGN=" top ">	Текст размещен по верхнему краю картинки
<IMG SRC = "star.gif " ALIGN=" bottom ">	Текст размещен по нижнему краю картинки
WIDTH, HEIGHT размер изображения, <IMG SRC = «arrow.gif» ALT=»Вперед» ALIGN=»left» WIDTH=»100» HEIGHT=»50»>	Высота изображения 100 пикселей, высота - 50
Нумерованные и маркированные списки
Нумерованный список <OL> <LI> Личные доходы <LI> <LI> Доходы соседа <LI> <LI> Расходы <LI> </OL>	Нумерованный список 1. Личные доходы 2. Доходы соседа 3. Расходы
Маркированный список <UL> <LI> Личные доходы <LI> <LI> Доходы соседа <LI> <LI> Расходы <LI> </UL>	Маркированный список · Личные доходы · Доходы соседа · Расходы
Ссылки
<A HREF = ''http://www.tlt.ru''>Новости Тольятти</A>	Новости Тольятти
<A HREF = ''http://www.taom.ru''> Тольяттинская академия управления</A>	Тольяттинская академия управления
<A HREF = ''http://bridge.tlt.ru''>Бридж в Тольятти</A>	Бридж в Тольятти
<a href="../index.html">Домой</a>	Домой
Провести демонстрацию готовой презентации в соответствии с <a href="criteria.htm"> требованиями</a>.	Провести демонстрацию готовой презентации в соответствии с требованиями.

	1. Леонтьев, Б.В. Web-дизайн: Тонкости, хитрости и секреты / Б.В. Леонтьев. –М.: Познавательная книга плюс, 1999. - С. 8-11.
2. Практикум по общей информатике: учеб.пособие / под. ред. В.П. Омельченко. – 2-е изд., перераб. и доп. – Ростов Н/Д: Феникс, 2007. –С. 310-358.: ил. – (Высшее образование)
3. Симонович, С.В. Специальная информатика: учебное пособие / С.В. Симонович, Г.А.Евсеев, А.Г. Алексеев. – М.: АСТ-ПРЕСС КНИГА, 2005. - С. 416

	1. Добавить заголовок 3 уровня – «Маркированный список». Например: 1. список 2. таблица 3. картинка 4. рамка
2. Добавить заголовок 3 уровня – «Маркированный список».
3. Добавить маркированный список, задав внешний вид маркера круглый: · элемент 1 · элемент 2 · элемент 3
4. Добавить горизонтальную линию, задав однотонную линию толщиной в 5 пиксель, шириной 60% выравниванием по левому краю.
5. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить.
6. Вставить рисунок, задав выравнивание по центру.
7. Добавить отцентрированный абзац «изображение в натуральную величину».
8. Увеличить (или уменьшить) пропорционально картинку в три раза, задав выравнивание по центру.
9. Добавить отцентрированный абзац «изображение пропорционально увеличено (уменьшено) в три раза».
10. Добавить горизонтальную линию: однотонную линию толщиной в 5 пиксель, шириной 60% < выравниванием по правому краю.
11. Создайте вручную гиперссылки на все страницы сайта из общей области.
12. На титульной странице создайте ссылку на свой e-mail адрес.
13. В ячейки таблицы с прозрачными границами расположите разные изображения.
14. Создайте ссылки на каждом изображении фотогалереи с выходом в отдельные окна.
15. Поставьте в конце страницы ссылку на свой электронный адрес. Добавить ссылку – «переход в начало документа».
16. Сохранить изменения и просмотреть результат, выбрав в браузере команду – Обновить

	1. Как создать ссылку со страницы сайта на другую страницу сайта?
2. Как сделать ссылкой графический объект?
3. Как создать закладку?
4. Как сделать ссылку на закладку?
5. Как в HTML-документе сделать ссылку на электронную почту?