8. Задания для самоконтроля
Задание 1. Создание страницы, содержащей текст, графическое изображение. (Выполнение не более чем за 1 учебный час).
1.Напишите HTML-код для создания страницы, приведенной на рис. 14.
Рис. 14.
2. Установите цвет фона документа LIME (лимонный).
3. Для строки День всех влюбленных создайте заголовок второго уровня с выравниванием по центру.
4. Для текста установите шрифт ARIAL размером 4 пункта, цвет – RED (красный) и выравнивание каждой строки по центру.
5. Для строки Не забудьте поздравить своих любимых создайте бегущую строку, ширина которой 700, цвет – YELLOW (желтый), размер шрифта – 5, цвет – PURPLE (фиолетовый).
6. Вставьте графическое изображение со следующими размерами: высота – 70, ширина – 400, выравнивание – по центру.
7. Предусмотрите ссылку на любой, созданный вами ранее документ.
8. Проведите горизонтальную линию вдоль экрана и оставьте на странице свою фамилию как автора документа.
Задание 2. Создание таблицы, фреймов. (Выполнение не более чем за 2 учебных часа).
1. Напишите HTML-код для создания страницы, приведенной на рис. 15.
Рис. 15.
2. Текст и таблицу выровнять по центру.
3. Для сроки Великие и малые страны мира: всех их объединил Internet установите размер шрифта 5, цвет – RED (красный), а для названия таблицы Географическая принадлежность сервера – размер 4, цвет – BLUE (синий).
4. Для первой колонки установите ширину 200, для второй – 150, высоту первой строки – 40, остальные по умолчанию.
5. Для первой строки установите цвет AQUA (морской волны) и объединение двух колонок для общего заголовка Домены верхнего уровня (территориального деления), а для 3 – 7 строк – цвет YELLOW (желтый).
6. Напишите HTML-код для создания страницы, приведенной на рис. 16.
Рис. 16.
7. Создайте два фрейма, расположенных в виде колонок, размером 60% и 40%.
8. В первом фрейме установите просмотр созданной выше таблицы.
9. Из второго фрейма создайте два строчных фрейма одинакового размера и установите (в центре каждого) просмотр графического изображения.
Литература
1. М а р х в и д а И. В. Интернет. Мн.:ООО “Новое знание”, 2001.
2.Использование HTML4./Пер. с англ.; Под ред. Г. П. Петриковца СПб.: Издательский дом “Вильямс”, 2000.
Задание 18
3. Добавление фоновых рисунков, бегущих строк, горизонтальных линий. Создание списков, ссылок
Атрибут BACKGROUND элемента BODY используется для указания изображения, которое будет использоваться в качестве фона документа. Например,
<BODY BACKGROUND=C:/WINDOWS/BACKGRND.GIF>
В кавычках задан полный путь нахождения файла, который будет использоваться в качестве фона документа. Хотя это не обязательно, достаточно: <BODYBACKGROUND=BACKGRND.GIF>
Улучшить Web-страницу можно добавлением бегущей строки. Для этого используется дескриптор <MARQUEE> с закрывающей парой </MARQUEE>. Этот дескриптор может использоваться с атрибутами: BGCOLOR – цвет фона бегущей строки, HEIGHT – высота строки, WIDTH – ширина строки. Например, <MARQUEE HEIGHT=20 WIDTH=740 BGCOLOR=LIME> Я вас приветствую! </MARQUEE>.
На страницу можно добавить горизонтальную линию вдоль экрана броузера, для этого используется дескриптор <HR>. Он не требует закрывающей пары.
Для перечислений на Web-страницах можно создавать списки.
Для создания нумерованного списка используют дескриптор <OL> с закрывающей парой </OL>, для создания маркированного списка – <UL> с закрывающей парой </UL>. Каждый элемент списка описывается дескриптором <LI>, который не требует закрывающей пары. Например,
<OL>
<LI> Рожь
<LI> Пшеница
<LI> Ячмень
</OL>
Web-страницы могут содержать ссылки на другие документы. Ссылка состоит из двух частей, во-первых, это место в документе, помеченное как ссылка. Оно называется элементом привязки (или якорем – anchor). Во-вторых, это та часть, которая сообщает броузеру, что ему следует делать при щелчке на ссылке. Это ссылка URL(URL reference). При щелчке на элементе привязки броузер загружает файл или документ, соответствующий ссылке на URL. Эти ссылки могут быть относительные либо абсолютные.
Относительной ссылкой называется ссылка на URL файла, находящегося на том же компьютере.
Абсолютной ссылкой называется ссылка, в которой точно указаны компьютер, каталог и файл, они будут использоваться для ссылок на Web-страницы других компьютеров.
Мы будем применять только относительные ссылки. Для этого достаточно указать имя файла.
Все это делается в дескрипторе <A>. Например, <A HREF= C:/Мои документы/A.DOC> Текстовый документ </A> (достаточно <A HREF=A.DOC> Текстовый документ </A>). Таким образом открывающий дескриптор <A> сообщает о ссылке и отсылает к документу A.DOC, который находится в папке Мои документы на диске С:, а закрывающий дескриптор </A> сообщает броузеру, где элемент привязки заканчивается.
Задание 3.1. Напишите HTML-код для создания страницы, приведенной на рис. 3.
Рис. 3.
1. Присвойте заглавие для документа Моя третья страничка.
2. Установите для страницы фоновый рисунок – BACKGRND.GIF (или любой другой).
3. Создайте бегущую строку для строки Компьютерные информационные технологии, высота которой – 20, ширина – 700, цвет – YELLOW (желтый), размер шрифта в бегущей строке – 4, цвет – RED (красный).
4. Для перечислений создайте маркированный список.
5. Для первого элемента списка предусмотрите ссылку на любой, созданный вами ранее документ MS Word, второго – документ MS Excel, третьего – слайд, четвертого – первую, созданную вами Web-страничку.
6. Проведите горизонтальную линию и оставьте свою фамилию как автора страницы.
Задание 3.2. 1.Измените HTML-код документа Моя третья страничка, заменив маркированный список на нумерованный.
2. В коде документа Моя первая страничка предусмотрите ссылку на документ Моя третья страничка.
Задание 4.1. Напишите HTML-код для создания страницы, приведенной на рис. 4.
Рис. 4.
1. Присвойте заглавие для документа Моя четвертая страничка.
2. Для названия таблицы Зерновые культуры установите шрифт размером 5.
3. Для первой строки (с названием граф) установитe цвет AQUA (морской волны), а для ячейки с содержимым 730 – цвет LIME (лимонный).
4. После таблицы добавьте любое графическое изображение, определив для него размеры – HEIGHT=110 и WIDTH=210.
Задание 5.1. Напишите HTML-код для создания страницы, предложенной на рис. 5.
Рис. 5.
1. Присвойте заглавие для документа Моя пятая страничка.
2. Для названия таблицы установите шрифт размером 5.
3. Для первых двух столбцов установите ширину 150, а для третьего – 140.
4. Для строк Общая численность, Родилось детей и Умерло человек установите высоту, равную 40, и цвет шрифта WHITE (белый), а для остальных строк высота будет определена по умолчанию.
5. Для строки Общая численность установите цвет фона BLUE (синий) и объединение 3 столбцов, для строки Родилось детей – цвет фона RED (красный) и объединение двух первых столбцов и для строки Умерло человек – цвет фона GRAY (серый), а также объединение первых двух столбцов.
6. В третьем столбце сделайте объединение 3 – 7 строк и вставьте графическое изображение высотой 110 и шириной 140 пикселей.
Задание 5.2. Измените HTML-код предыдущего задания для создания страницы, приведенной на рис. 6, и сохраните его под новым именем.
Рис. 6.
1. Присвойте заголовок для документа Моя шестая страничка.
2. Вместо графического изображения вставьте вложенную таблицу, содержащую две строки и два столбца, ширина которых – 65, высота первой строки – 40, второй – по умолчанию.