Мегаобучалка Главная | О нас | Обратная связь

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




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 - страницу любого сервера Интернет





Читайте также:





Читайте также:
Как распознать напряжение: Говоря о мышечном напряжении, мы в первую очередь имеем в виду мускулы, прикрепленные к костям ...
Как вы ведете себя при стрессе?: Вы можете самостоятельно управлять стрессом! Каждый из нас имеет право и возможность уменьшить его воздействие на нас...
Почему человек чувствует себя несчастным?: Для начала определим, что такое несчастье. Несчастьем мы будем считать психологическое состояние...

©2015 megaobuchalka.ru Все права защищены авторами материалов.

Почему 3458 студентов выбрали МегаОбучалку...

Система поиска информации

Мобильная версия сайта

Удобная навигация

Нет шокирующей рекламы



(0.011 сек.)