- •Система адресации
- •Ip-адрес
- •Ip-адрес: 01111011110010000011001001100100
- •Адрес url
- •Сервисы Интернета
- •Общие сведения о языке html
- •Теги html
- •Структура документа html
- •Функциональные разделы документа
- •Создание списков
- •Создание таблиц
- •Задание 1. Ввод текста
- •Задание 2. Создание списков
- •Задание 3. Формирование таблиц
- •Гипертекстовые ссылки и якоря
- •Рисунки наWeb-страницах
- •Управление стилем шрифта
- •Форматирование фраз
- •Задание 1.Изменение оформления документа
- •Задание 2. Изменение оформления фрагментов документа
- •Задание 3. Создание гиперссылок
- •Задание 4. Использование графики
- •5. Создание фреймов
- •6. Использование фреймов
Задание 1.Изменение оформления документа
Тег<BASEFONT> устанавливает шрифт, используемый по умолчанию, имеет атрибуты COLOR, FACE и SIZE.
Тег <BODY> определяет начало и конец основной части документа, имеет большое количество атрибутов. Так, атрибут BGCOLOR позволяет задать цвет фона, а атрибут BACKGROUND – указать картинку, используемую в качестве фона. Для задания цветов можно использовать их названия или шестнадцатеричные коды. Обычно используется цветовая модель RGB (Красный-Зелёный-Синий), цвет задаётся строкой "#RRGGBB", где RR – шестнадцатеричное значение красной составляющей, GG – зелёной, BB – синей. Отсутствие составляющей задаётся кодом 00, а максимальное значение – кодом FF.
Задайте тёмно-синий (Navy) цвет фона атрибутом BGCOLOR тега <BODY>.
Используя атрибуты FACE, SIZE и COLOR тега <BASEFONT> задайте шрифт Arial, размер 5 и цвет 00FF00. Сохраните изменения в файле Lab2.htm и просмотрите его в браузере.
Измените фон документа Lab2.htm. С помощью атрибута BACKGROUND тега <BODY> задайте в качестве фона картинку, хранящуюся в файле BG.jpg. Сохраните документ под именем Lab21.htm. Обои (фрагмент фона), взятые из файла BG.jpg, имеют небольшие размеры. В этом можно убедиться, если просмотреть картинку в просмотрщике или загрузить в графический редактор (например, Paint). Картинка, заданная в качестве фона, выводится многократно («размножается»), чтобы заполнить все поле окна или фрейма. Специально подготовленные обои создают впечатление однородного фона, на котором не видны линии стыковки фрагментов. Примером не очень удачного фона является использование картинки Bad_BG.gif. Приятный для глаз, ровный фон получается при использовании картинки Good_BG.jpg. Чтобы убедиться в этом можно создать простые документы, в которых определён только фон (Lab23.htm, Lab24.htm).
Откройте документ Lab2.htm и задайте в качестве фона картинку PicGr.jpg. Сохраните изменённый документ в файле Lab22.htm и просмотрите его в браузере.
Если размер картинки таков, что она не заполняет всё поле, то браузер её отобразит несколько раз. Можно избежать эффекта размножения, либо задать повторы только по одной из осей. Нужные действия задаются атрибутом STYLE тега <BODY>:
Повтор по оси x задаётся строкой style="background-repeat: repeat-x"
Для вывода картинки один раз надо записать style="background-repeat: no-repeat"
Примеры находятся в файлах Lab25.htm, Lab26.htm, Lab27.htm.
Разрешено одновременно задавать фон цветом и картинкой. В этом случае картинка будет лежать поверх цветного фона. Создайте документ по образцу, приведённому ниже, сохраните в файле Lab28.htm и просмотрите в браузере.
<html>
<head>
<title>Фон+картинка</title>
</head>
<body background="Pic/Castle.gif" bgcolor="Black" style="background-repeat: no-repeat; background-position: center">
<h1 align="center"><font color="White">Мой учебник</font></h1>
</body>
</html>
Задание 2. Изменение оформления фрагментов документа
Создайте новый документ и занесите в него перечень разделов работы (Введение, Ввод текста, Списки, Графика, Заключение).
Сохраните документ под именем Content.htm и просмотрите его в браузере.
Измените оформление документа, используя форматирование фрагментов текста с помощью тегов <EM> и <STRONG>. Для форматирования Введения и Заключения используйте тег <STRONG>, для остальных – <EM>
Откройте документ List1.htm и измените форматирование отдельных элементов.
Измените шрифт, которым записан нумерованный список. Используя тег <FONT> и атрибут SIZE, увеличьте шрифт до 5.
Используя тег <I>, выделите первый элемент маркированного списка курсивом.
Используя тег <B>, выделите второй элемент маркированного списка полужирным шрифтом.
Сохраните документ в файле List2.htm.
Откройте файл Lab2.htm.
Оформите в первой формуле подстрочный индекс (1) используя тег <SUB>.
Оформите во второй формуле надстрочный индекс (2) используя тег <SUP>.
Измените параметры горизонтальной линии (толщину, ширину, выравнивание, цвет) с помощью атрибутов SIZE, WIDTH, ALIGN, COLOR. Задайте толщину = 2 ширину 80%, выравнивание по левому краю, цвет зелёный.
Сохраните изменения в файле Lab3.htm.
Просмотрите документ в обозревателе. Проанализируйте влияние внесённых изменений на текст документа.