- •Язык разметки гипертекста 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. Таблица спецсимволов
- •Литература
Относительные адреса ссылок
Тип ссылки |
Тег |
Гипертекстовая ссылка, указывающая на другой HTML-документ или файл |
<А hrеf ="имя_файла"> активный текст </А> |
Гипертекстовая ссылка, указывающая на анкер (якорь) в другом месте того же документа |
<А href = "#имя">активный текст </А> |
Ссылка, указывающая на анкер (якорь) в другом HTML-документе |
<А href = "имя_файла #имя"> активный текст </А> |
Анкеры для двух указанных выше типов ссылок |
<А nаме = "имя"> активный текст </А> |
Сочетание ссылки и анкера |
<А href = "имя_файла" nаме = "имя"> активный текст </А> |
Ссылка в виде графического изображения |
<А href ="имя _ файла><IMG src = " графическое изображение"> </А> |
Задания к лабораторной работе № 4 Гипертекстовые ссылки Задание к лабораторной работе №4
Задание 1. Создание простейшей гиперссылки
• Создайте две Web-страницы в редакторе Блокнот. Одну назовите page1.html, вторую page2.html. Обе странички сохраните в одной папке под названием site. Обратите внимание, что названия папки и страничек должны быть на английском языке и начинаться со строчкой буквы
• В элементе <TITLE> укажите название странички «Задание 1. Создание простейшей гиперссылки».
• Фон страниц согласно варианту задания.
• На первой страничке создадим гиперссылку для перехода на вторую страницу. Для этого создайте элемент:
<А href= “page2.htm>Ha страницу 2 </а>
• На второй страничке создадим гиперссылку для перехода на первую страницу. Для этого создайте элемент:
<А href= “page1.htm>Ha страницу 1 </а>
• Откройте в браузере первую страничку и убедитесь, что обе гиперссылки работают правильно.
Задание 2. Создание гиперссылок
• Выполнить второе задание вы можете, если успешно справились с Заданием 1. Создайте третью страничку page3.htm.
• На страничке page3.htm создайте гиперссылки для перехода на странички page1.htm и page2.htm.
• На страничках page1.htm и page2.htm добавьте гиперссылку для переход на страничку page3.htm.
• На страничке page3.htm создайте в конце документа гиперссылку для перехода в начало этого же документа.
• Откройте в браузере первую страничку и убедитесь, что теперь можно перейти с любой странички на любую другую из трех созданных.
Задание 3. Цвет гиперссылок
• Выполнить задание вы можете, если успешно справились с Заданием 2.
• На страничках page1.htm, page2.htm и page3.htm в тэге <BODY> определите цвет гиперссылок согласно варианту задания
- все гиперссылки на странице - белые;
- активные гиперссылки - красные;
- посещенные гиперссылки - серые.
• Откройте в браузере первую страничку и, переходя по ссылкам со странички на страничку, убедитесь, что цвет гиперссылок задан верно.
№ варианта |
Задание |
1 |
Цвет фона первой страницы белый, цвет фона второй страницы жёлтый, цвет фона третьей страницы золотой. Все гиперссылки на странице - чёрные; активные гиперссылки - красные; посещенные гиперссылки - серые. Размер шрифта 2 |
2 |
Цвет фона первой страницы чёрный, цвет фона второй страницы синий, цвет фона третьей страницы зелёный. Все гиперссылки на странице - белые; активные гиперссылки - жёлтые; посещенные гиперссылки - серебристые. Размер шрифта 3 |
3 |
Цвет фона первой страницы индиго, цвет фона второй страницы фиолетовый, цвет фона третьей страницы каштановый. Все гиперссылки на странице – светло-зелёные; активные гиперссылки - золотые; посещенные гиперссылки - фуксиновые. Размер шрифта 4 |
4 |
Цвет фона первой страницы золотой, цвет фона второй страницы белый, цвет фона третьей страницы жёлтый. Все гиперссылки на странице - зелёные; активные гиперссылки - пурпурные; посещенные гиперссылки - чёрные. Размер шрифта 5 |
5 |
Цвет фона первой страницы синий, цвет фона второй страницы зелёный, цвет фона третьей страницы чёрный. Все гиперссылки на странице - серебристые; активные гиперссылки - золотые; посещенные гиперссылки - белые. Размер шрифта 6 |
6 |
Цвет фона первой страницы каштановый, цвет фона второй страницы фиолетовый, цвет фона третьей страницы оливковый. Все гиперссылки на странице - индиго; активные гиперссылки - оранжевые; посещенные гиперссылки - ультрамариновые. Размер шрифта 2 |
7 |
Цвет фона первой страницы оранжевый, цвет фона второй страницы белый, цвет фона третьей страницы сизый. Все гиперссылки на странице - синие; активные гиперссылки - золотые; посещенные гиперссылки - чёрные. Размер шрифта 3 |
8 |
Цвет фона первой страницы белый, цвет фона второй страницы жёлтый, цвет фона третьей страницы золотой. Все гиперссылки на странице - чёрные; активные гиперссылки - красные; посещенные гиперссылки - серые. Размер шрифта 4 |
9 |
Цвет фона первой страницы чёрный, цвет фона второй страницы синий, цвет фона третьей страницы зелёный. Все гиперссылки на странице - белые; активные гиперссылки - жёлтые; посещенные гиперссылки - серебристые. Размер шрифта 5 |
10 |
Цвет фона первой страницы индиго, цвет фона второй страницы фиолетовый, цвет фона третьей страницы каштановый. Все гиперссылки на странице – светло-зелёные; активные гиперссылки - золотые; посещенные гиперссылки - фуксиновые. Размер шрифта 6 |
11 |
Цвет фона первой страницы золотой, цвет фона второй страницы белый, цвет фона третьей страницы жёлтый. Все гиперссылки на странице - зелёные; активные гиперссылки - пурпурные; посещенные гиперссылки - чёрные. Размер шрифта 2 |
12 |
Цвет фона первой страницы синий, цвет фона второй страницы зелёный, цвет фона третьей страницы чёрный. Все гиперссылки на странице - серебристые; активные гиперссылки - золотые; посещенные гиперссылки - белые. Размер шрифта 3 |
13 |
Цвет фона первой страницы каштановый, цвет фона второй страницы фиолетовый, цвет фона третьей страницы оливковый. Все гиперссылки на странице - индиго; активные гиперссылки - оранжевые; посещенные гиперссылки - ультрамариновые. Размер шрифта 4 |
14 |
Цвет фона первой страницы оранжевый, цвет фона второй страницы белый, цвет фона третьей страницы сизый. Все гиперссылки на странице - синие; активные гиперссылки - золотые; посещенные гиперссылки - чёрные. Размер шрифта 5 |
15 |
Цвет фона первой страницы оливковый, цвет фона второй страницы золотой, цвет фона третьей страницы жёлтый. Все гиперссылки на странице - серые; активные гиперссылки - индиго; посещенные гиперссылки - чёрные. Размер шрифта 2 |