- •Язык разметки гипертекста html. Назначение html
- •Язык разметки гипертекста html
- •Краткая история html
- •Программы для просмотра электронных документов
- •Лабораторная работа № 1. Язык разметки гипертекста html. Основные понятия языка
- •Основные понятия
- •Структура документа html
- •Задания к лабораторной работе № 1 Задание 1. Создание простейшей Web-страницы.
- •Контрольные вопросы
- •Лабораторная работа № 2. Форматирование текста.
- •Форматирование абзаца
- •Форматирование шрифта
- •Физические стили
- •Размер шрифта
- •Логические стили
- •Горизонтальные линии
- •Escape последовательности (символьные объекты)
- •Контрольные вопросы
- •Лабораторная работа № 3. Управление цветом
- •Цветовая гамма html-документа
- •Сочетание цветов
- •Задания к лабораторной работе № 3 Управление цветом
- •Контрольные вопросы
- •Лабораторная работа № 4. Гиперссылки
- •Относительные адреса ссылок
- •Задания к лабораторной работе № 4 Гипертекстовые ссылки Задание к лабораторной работе №4
- •Контрольные вопросы
- •Лабораторная работа № 5. Работа со списками
- •Маркированный (ненумерованный - Unordered List) список
- •Нумерованные списки
- •Вложенный список
- •Списки определений
- •Список-меню
- •Список-указатель (список-индекс)
- •Теплым.
- •Круглым.
- •Желтым.
- •Контрольные вопросы
- •Лабораторная работа № 6. Вставка графических изображений
- •Роль графики
- •Характеристика графических стандартов
- •Вставка графических изображений
- •Использование карт изображений
- •Преимущества и недостатки карт-изображений
- •Область применения
- •Конфигурация карт-изображений
- •Типы карт-изображений
- •Серверный вариант
- •Клиентский вариант
- •Задания к лабораторной работе № 6 Вставка графических изображений
- •Примеры карт
- •Карта 2
- •Контрольные вопросы
- •Лабораторная работа № 7. Таблицы html-документов
- •Основные методы создания таблиц
- •Цветные таблицы
- •Группировка данных
- •Колонтитулы таблицы
- •Прорисовка структуры таблицы
- •Вложенные таблицы
- •Преимущества вложенных таблиц
- •Задания к лабораторной работе № 7.
- •Задание 3. Форматирование таблицы
- •Контрольные вопросы
- •Лабораторная работа № 8. Формы
- •1. Организация обратной связи
- •2. Авторизация
- •3. Проведение исследований
- •4. Пользовательский профиль
- •Структура пользовательских форм
- •Параметры текстовой строки
- •Параметры опции выбора
- •Параметры кнопки с рисунком
- •Параметры текстового поля
- •Параметры
- •Параметры текстового поля
- •Задания к лабораторной работе № 6 Формы
- •Индивидуальное задание
- •Контрольные вопросы
- •Лабораторная работа № 9. Фреймы
- •Синтаксис фреймов
- •Атрибуты:
- •Планирование фреймов и взаимодействия между фреймами
- •Зарезервированные имена фреймов
- •Бегущая строка (элемент marquee)
- •Фиксация информации на экране (элемент banner)
- •Задания к лабораторной работе № 9. Фреймы
- •Контрольные вопросы
- •Справочник
- •Приложение 1. Таблица спецсимволов
- •Литература
Задания к лабораторной работе № 6 Вставка графических изображений
Задание 1. Размещение графики на Web-странице
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <title> укажите название странички «Задание 1. Размещение графики на Web-странице».
Если в тэге <body> не указывать цвет странички, то по умолчанию фон будет белым. Сделайте цвет фона странички оранжевым.
Разместите на страничке любой рисунок. Для размещения изображения вам требуется указать путь к файлу в элементе <img>. Чтобы упростить описание пути к этому графическому файлу, скопируйте этот файл в ту же папку, в которой будет сохранена Web-страничка.
Если файл находится не в одной папке с Web-страничкой, то необходимо указать относительный путь к этому файлу.
Сделайте подпись к рисунку с помощью атрибута alt.
Создайте рамку вокруг рисунка шириной 2 пиксела.
Над рисунком поместите заголовок самого большого размера и выровняйте его по центру страницы.
Задание 2. Изменение размеров изображения на Web-странице.
Создайте новую Web-страницу в редакторе Блокнот.
В элементе <title> укажите название странички «Задание 2. Изменение размеров изображения на Web-странице».
Пусть фон странички будет зеленого цвета.
Определите размер выбранного вами изображения.
Вставьте это изображение на страничку, задав его размеры: ширина 100, высота 100 пикселов.
Просмотрите в браузере полученную страничку. Обратите внимание на следующие вещи:
В связи с тем, что вы непропорционально изменили размеры изображения, произошло искажение рисунка;
Так как вы увеличили размер изображения, произошла потеря качества рисунка (обратите внимание на края изображения);
Для размещения изображений на Web-страничке, лучше использовать прозрачный фон рисунка.
Задание 3. Использование рисунка в качестве гиперссылки
Выполнить задание вы можете, если успешно справились с Заданием 3.
На страничках pagel.htm, page2.htm и page3.htm, вместо текстовых гиперссылок используйте рисунки.
Для этого:
Вставьте на первую страничку одно изображение и создайте гиперссылку для перехода на вторую страницу:
<А href ="page2.htm"> <IMG src="*.gif"> </а>
самостоятельно вставьте другое изображение для перехода с первой странички на третью;
задайте бордюр обоих изображений, равным 2;
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что переходы работают верно.
Самостоятельно вставьте изображения на страницы page2.htm и page3.htm и задайте соответствующие гиперссылки.
Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что кнопки на всех страницах работают верно.
Задание 4. Использование рисунка в качестве гиперссылки (карты)
Создайте страницу Map.htm, на которой разместите две карты. Карта, имеющая имя kartal, содержит область в виде круга и область произвольной формы. Изображение karta2 содержит область прямоугольной формы. Между картами должен располагаться текст, объясняющий действие ссылок (щелчков). Ваш HTML-документ должен выглядеть следующим образом: