| 1. Повторение теоретических сведений.
|
2. Выполнение команд, представленных в таблице.
|
3. Выполнение практической работы.
|
4. Ответы на контрольные вопросы.
|
5. Выполнение теста.
|
Цель:получить начальные сведения об изменения цвета страницы, фон, вставлять гиперссылки, вставлять графические объекты, создавать списки
Знать:
- понятие гиперссылки, основные тэги их создания;
Уметь:
- изменять цвет страницы,
- выбирать фон,
- вставлять гиперссылки,
- вставлять графические объекты.
- создавать списки в различных вариантах
- пользоваться основными атрибутами для преобразования изображений в документе
Формируемые компетенции: ПКНМ-7, ПКНИ-8, ПКНМ-3.
Теги
| Результат
|
Цветовое оформление страницы
|
<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-документе сделать ссылку на электронную почту?
|
1. Гиперссылки на Web - странице могут обеспечить переход...
a) только в пределах данной web – страницы
б) только на web - страницы данного сервера
в) на любую web - страницу данного региона
г) на любую web - страницу любого сервера Интернет