СОВРЕМЕННЫЕ ИНФОРМАЦИОННЫЕ ТЕХНОЛОГИИ

111

Атрибут TITLE служит для создания всплывающей подсказки. Например, для того, чтобы при наведении на некоторый абзац появлялись слова: «Сейчас появится подсказка», можно воспользоваться элементом

<P TITLE="Сейчас появится подсказка"> «текст абзаца» </P>.

Для создания горизонтальной линии можно использовать элемент <HR>. С помощью атрибута ALIGN можно задать вид выравнивания линии по горизонтали. Например, ALIGN="CENTER". Атрибут COLOR="цвет" используется для задания цвета линии. Цвет может быть задан при помощи имени, например, red, green, blue, indigo, khaki, darkred, darkviolet, antiquewhite, gold и т.д. Цвет можно задать и в 16-ричном формате #RRGGBB. Возможно использование и других атрибутов, таких как NOSHADE (вывод без тени), SIZE (толщина линии в пикселях или процентах), WIDTH (ширина линии в пикселях или процентах). Атрибут CLEAR с возможными значениями ALL, LEFT, NONE, RIGHT позволит задать нужный вид обтекания текстом рисунка.

Элемент <NOBR> … </NOBR> позволяет отменить разбиение на строки. Внутри данного элемента следует использовать элемент <WRR> с целью указать место возможного разбиения. С целью указать необходимость перевода строки используют элемент <BR>.

Элемент <PRE> … </PRE> используется для задания преформатированного текста. Элемент <P> … </P> используется для задания абзаца, <DIV> …</DIV> – для задания раздела, <H1> … </H1>, …, <H6> … </H6> – для задания заголовка соответствующего уровня, <UL> … </UL> – для задания неупорядоченного списка и <OL> … </OL> – для задания упорядоченного списка, <LI> … </LI> – для задания пункта списка и т.д.

Для того чтобы вставить в документ рисунок или другое изображение следует использовать элемент <IMG>. Элементы <EMBED> или <OBJECT> позволяют добавить в документ внедренные объекты.

Элемент <MARQUEE> позволяет задавать бегущую строку. Он может иметь целый ряд различных атрибутов. Задать вид движения строки можно с помощью атрибута BEHAVIOR, значениями которого могут быть ALTERNATE (движение «тудасюда»), SCROLL (движение в одну сторону), SLIDE (однократный проход). Атрибут BGCOLOR позволяет задать цвет фона бегущей строки. Направление движения задает атрибут DIRECTION, значениями которого могут быть DOWN (движение вниз), LEFT (влево), RIGHT(вправо), UP (вверх). Высоту области вывода бегущей строки можно задать при помощи атрибута HEIGHT, а расстояние между полем вывода строки и окружающими его объектами по горизонтали при помощи атрибута HSPACE. Атрибут LOOP позволит задать количество проходов бегущей строки, а атрибут SCROLLAMOUNT – ширину в пикселях разрыва между последовательными выводами текста строки. Атрибут SCROLLDELAY задает интервал в миллисекундах между последовательными выводами текста.

112

16.4 Гиперссылки

Гиперссылки устанавливают связь между каким-либо элементом текущего документа и другой web-страницей, файлом или изображением. В качестве гиперссылки может выступать не только часть текста, но и графический элемент. Текстовая гиперссылка выделяется на странице цветом и подчеркиванием.

16.4.1 Ссылки на документы

Реализовать простую гиперссылку на другую web-страницу можно путем использования в HTML-документе тега <A>, синтаксис записи которого в общем виде выглядит следующим образом:

<A HREF=”url-адрес” TARGET=”параметр” TITLE=”альтернативный текст”>Текст гиперссылки</A>

Атрибут HREF указывает на адрес страницы, с которой вы устанавливаете гиперсвязь. Это может быть полный url-адрес страницы, так и путь к искомой странице в пределах локального диска. Если искомая web-страница расположена в той же папке, что и текущий документ, то достаточно указать ее название.

Атрибут TARGET содержит директивы, описывающие правила открытия документа в окне браузера. Часто встречающееся значение атрибута “blank” , что означает открытие документа в новом окне.

Атрибут TITLE предназначен для создания так называемого альтернативного текста – всплывающей подсказки. Такая подсказка может содержать краткое описание открываемого документа.

Пример:

<A HREF=http://www.yandex.ru/ TARGET=”_blank” TITLE=”Открытие Яндек-

са>Поисковая система Яндекс</A>

Если вы указываете полный url-адрес, то кавычки ставить не надо.

16.4.2 Ссылки на разделы

Иногда возникает необходимость разместить на web-странице гиперссылку не на другой документ, а на раздел или участок в пределах этой же страницы. При активизации подобной гиперссылки браузер пролистывает экран таким образом, что искомый раздел оказывается в верхней его части. Процесс создания ссылки на раздел можно условно разделить на два этапа. Первый заключается в подготовке так называемой «закладки» – специальной метки с уникальным в пределах данного документа именем. Для этого в том месте, где необходимо разместить метку, применяется следующая команда:

<A NAME=”имя закладки”>Ключевое слово или заголовок раздела</A> Второй этап – создание самой ссылки:

<A HREF=”#имя закладки”>Текст ссылки</A>

113

Если вы хотите разместить ссылку на раздел какого-либо другого документа, то в вызывающем теге перед именем «закладки» указывается url-адрес документа. Символ # также остается на своем месте.

16.4.3 Ссылки на адрес электронной почты

Гиперссылку можно настроить на почтовый сервер. При активизации подобной ссылки, автоматически запускается почтовая программа, установленная на вашем компьютере. При этом в бланке письма можно посредством гиперссылки настроить адресное поле и тему письма.

<A HREF=mailto:почтовый_ящик&subject=”тема письма”>Текст ссылки</A> Директива mailto: указывает на основной адрес электронной почты, куда следу-

ет отправлять автоматически созданное письмо. С помощью &subject можно задавать тему отсылаемого сообщения.

Пример:

<A HREF=mailto:[e-mail]&subject=”отзывы”>Ваше мнение можно оставить здесь</A>

16.4.4. Ссылки на файловые объекты

Гиперссылка на файловый объект подразумевает связь HTML-документа с ка- ким-либо файлом, хранящимся на сервере, например, архивом RAR или ZIP. При активизации подобной гиперссылки автоматически открывается окно загрузки данного файла на локальный компьютер пользователя.

Пример:

<A HREF=http://www.file.yandex.ru/free/art.zip>Фотографии можно взять здесь</A>

Кроме протокола http, для загрузки файлов можно использовать протокол ftp: <A HREF=ftp://file.yandex.ru/free/art.zip>Фотографии можно взять здесь</A>

Для загрузки файла с локального компьютера обычно пишут путь к файлу:

<A HREF=C:\Users\СТолкач\Desktop\free\art.zip>Фотографии можно взять здесь</A> (архив находится на «Рабочем столе» в папке «free»).

Если искомый файл расположен в той же папке, что и вызывающий его документ, то в качестве значения атрибута HREF можно просто указать его имя.

<A HREF=art.zip>Фотографии можно взять здесь</A>

16.5 Списки

Существует три основных вида списков в HTML-документе: нумерованный; маркированный; список определений.

Вы можете создавать вложенные списки, используя различные теги списков, или повторяя одни внутри других. Для этого просто необходимо разместить одну па-

114

ру тегов (стартовый и завершающий) внутри другой. Будут ли элементы вложенного списка иметь те же маркеры, обозначающие элемент списка, зависит от браузера.

16.5.1Нумерованные списки

Внумерованном списке браузер автоматически вставляет номера элементов по порядку. Это означает, что если вы удалите один или несколько элементов пронумерованного списка, то остальные номера автоматически будут пересчитаны.

Пронумерованный список начинается стартовым тегом <OL> и завершается тегом </OL>. Каждый элемент списка начинается с тега <LI>. Пример:

<OL>

<LI>Форум <LI>Гостевая книга <LI>Фотоальбом <LI>Мой почтовый ящик

</OL>

Список в браузере будет отображаться примерно так:

Тег <OL> может иметь атрибуты: <OL TYPE=A START=n>. Атрибут TYPE – вид счетчика. ТYPE может принимать следующие значения:

A – большие латинские буквы (A,B,C...); a – маленькие латинские буквы (a,b,c...); I – большие римские цифры (I,II,III...);

i – маленькие римские цифры (i,ii,iii...); 1 – обычные цифры (1,2,3...).

По умолчанию TYPE равен 1.

Атрибут START задает число n, с которого начинается отсчет.

16.5.2 Маркированные списки

Для маркированных списков браузер обычно использует маркеры для пометки элемента списка. Вид маркера, как правило, настраивает пользователь браузера.

Маркированный список начинается стартовым тегом <UL> и завершается тегом </UL>. Каждый элемент списка начинается с тега <LI>. Пример:

<UL>

<LI>Форум <LI>Гостевая книга <LI>Фотоальбом <LI>Мой почтовый ящик

</UL>

Список в браузере будет отображаться примерно так:

115

Тег <UL> может иметь атрибуты <UL TYPE=”disc”|”circle”|”square”>.

Атрибут TYPE определяет внешний вид маркера в виде диска “disc” (по умолчанию), круга “circle” или квадрата “square”.

16.5.3 Список определений

Список определений начинается с тега <DL> и завершается тегом </DL>. Данный список служит для создания списков типа «термин-описание». С помощью данного вида списка обычно оформляют глоссарии.

Каждый термин начинается тегом <DT> , а описание – тегом <DD>. Пример:

<DL> <DT><B>Контент</B>

<DD>Смысловое содержимое ресурса Интернета.

<DT><B>Авторизация</B>

<DD>Процедура проверки на подлинность пароля или сочетания логического идентификационного имени и пароля.

<DT><B>Браузер</B>

<DD>Специальная клиентская программа, предназначенная для просмотра содержимого web-ресурсов и отображения HTML-документов.

</DL>

Список в браузере будет отображаться примерно так:

16.5.4 Вложенные списки

Как уже говорилось выше, внутри одного списка может находиться другой список. Пример:

<OL>

<LI TYPE=I>Зимняя сессия

<OL>

<LI><B>Зачеты</B> <UL>

<LI>Алгебра

116

<LI>Математический анализ <LI>Программирование

</UL>

<LI><B>Экзамены</B>

<UL>

<LI>Алгебра <LI>Математический анализ <LI>Введение в специальность <LI>История Отечества

</UL>

</OL>

<LI TYPE=I>Летняя сессия

<OL>

<LI><B>Зачеты</B> <UL>

<LI>Аналитическая геометрия <LI>Математический анализ

<LI>Математическая логика

</UL>

<LI><B>Экзамены</B>

<UL>

<LI>Аналитическая геометрия <LI>Математический анализ

<LI>Программирование

</UL>

</OL>

</OL>

Список в браузере будет отображаться примерно так:

117

16.6 Таблицы. Основные теги таблицы

Таблицы – очень важная часть языка HTML, так как именно с помощью таблицы с невидимыми границами можно создать шаблон web-страницы.

Таблицы в HTML организуются как набор столбцов и строк. Ячейки таблицы могут содержать любые HTML-элементы, такие как заголовки, списки, абзацы, фигуры, графику, а также элементы форм.

Таблица: <TABLE>...</TABLE>

Это основные теги, описывающие таблицу. Все элементы таблицы должны находиться внутри этих двух тегов. По умолчанию таблица не имеет обрамления и разделителей.

Структура записи тега <TABLE>:

<TABLE ALIGN=”значение” WIDTH=”значение” BORDER=целое число CELLSPACING=целое число CELLPADDING=целое число>

Атрибуты тега <TABLE>:

ALIGN – задает горизонтальное позиционирование всей таблицы в целом, может принимать значение “left”, “right”, “center”.

WIDTH – задает ширину всей таблицы в целом и может принимать целое значение, если ширина таблицы указывается в пикселях, либо числа от 1% до 100%, если ширина таблицы задается в процентах от ширины экрана пользователя.

BORDER – если данный атрибут присутствует, то граница таблицы прорисовывается для всех ячеек и для таблицы в целом. BORDER может принимать числовое значение, определяющее ширину границы, например BORDER=3.

CELLSPACING – данный атрибут позволяет задать промежуток между ячейками в пикселях.

CELLPADDING – задает промежуток между содержимым ячейки и рамкой вокруг ячейки в пикселях.

Строка таблицы: <TR>...</TR>

Количество строк таблицы определяется количеством встречающихся пар тегов

<TR>..</TR>.

Структура записи тега <TR>:

<TR ALIGN=”значение” VALIGN=”значение”> Атрибуты тега <TR>:

Aтрибут ALIGN управляет положением данных в ячейках по горизонтали. Может принимать значения “left”, “right” или “center”.

VALIGN – данный атрибут определяет вертикальное размещение данных в ячейках. Может принимать значения “top” (вверху), “bottom” (внизу), “middle” (по середине) и “baseline” (все ячейки строки прижаты кверху).

Заголовок таблицы: <TH>...</TH>

Ячейка заголовка таблицы имеет ширину всей таблицы, текст в данной ячейке имеет атрибут BOLD и ALIGN=”center” по умолчанию.

Структура записи тега <TH>:

	118
<TH	ALIGN=”значение” VALIGN=”значение” WIDTH=целое значение

HEIGHT=целое значение COLSPAN=целое число ROWSPAN=целое число

NOWRAP>

Атрибуты тега <TH>:

ALIGN управляет положением данных в ячейках по горизонтали. Может принимать значения “left”, “right” или “center”.

VALIGN определяет вертикальное размещение данных в ячейках. Может принимать значения “top” (вверху), “bottom” (внизу), “middle” (по середине) и “baseline” (все ячейки строки прижаты кверху).

WIDTH – задает ширину ячейки в пикселях.

HEIGTH – задает высоту ячеек в пикселях.

COLSPAN – указывает, какое количество ячеек будет объединено по горизонтали для указанной ячейки. По умолчанию 1.

ROWSPAN – указывает, какое количество ячеек будет объединено по вертикали для указанной ячейки. По умолчанию 1.

NOWRAP – данный атрибут говорит о том, что данные в ячейке не могут логически разбиваться на несколько строк и должны быть представлены одной строкой.

Ячейка таблицы: <TD>...</TD>

Описывает стандартную ячейку таблицы. Ячейка таблицы может быть описана только внутри строки таблицы. Каждая ячейка должна быть пронумерована номером колонки, для которой она описывается. Если в строке отсутствует одна или несколько ячеек для некоторых колонок, то браузер отображает пустую ячейку. Расположение данных в ячейке по умолчанию определяется атрибутами ALIGN=”left” и

VALIGN=”middle”.

Структура записи тега <TD>:

<TD ALIGN=”значение” VALIGN=”значение” COLSPAN=целое число ROWSPAN=целое число HEIGTH=целое число NOWRAP>.

Назначение атрибутов ALIGN, VALIGN, COLSPAN, ROWSPAN, HEIGTH, NOWRAP аналогично значению атрибутов в теге <TH>.

Подпись: <CAPTION>...</CAPTION>

Данный тег описывает название таблицы (подпись). Тег <CAPTION> должен присутствовать внутри <TABLE>...</TABLE>, но снаружи описания какой-либо строки или ячейки. По умолчанию <CAPTION> имеет атрибут ALIGN=”top”, но может быть явно установлен в ALIGN=”bottom”. ALIGN определяет, где – сверху или снизу таблицы, будет поставлена подпись. Подпись всегда центрирована в рамках ширины таблицы.

Структура записи тега <CAPTION ALIGN=”значение”>.

Пример таблицы:

<HTML>

<HEAD>

<TITLE>Пример таблицы</TITLE> </HEAD>

<BODY>

<TABLE BORDER=1>

<CAPTION ALIGN=”TOP”> Таблица №1.</CAPTION>

119

<TR>

<TH>Среднее значение</TH>

<TH>Рост</TH> <TH>Вес</TH>

</TR>

<TR> <TD>Мужчины</TD> <TD>174</TD> <TD>78</TD>

</TR>

<TR>

<TD>Женщины</TD> <TD>165</TD> <TD>56</TD>

</TR>

</TABLE>

</BODY>

</HTML>

Просмотрим HTML-код в браузере. Получим такую таблицу:

Контрольные вопросы

1.Что такое Web-страница?

2.Какой язык можно использовать при создании Web-страницы?

3.Какие объекты могут находиться на Web-странице?

4.Определить общий вид элемента HTML.

5.Определить общий вид атрибута.

6.Перечислить синтаксические правила языка HTML.

7.Определить общий вид HTML-документа.

8.Перечислить атрибуты, с помощью которых можно форматировать символы.

9.Перечислить атрибуты форматирования абзацев.

10.Перечислить атрибуты, позволяющие задать бегущую строку.

вернуться к оглавлению

перейти к практическому занятию

120

Практическое занятие № 1. Форматирование текста

Задание 1. Интерфейс Word 2007

1.Найти на диске Т (сетевой диск с заданиями) рассказ Марка Твена «Как я редактировал сельскохозяйственную газету». Сохранить текст в файле на своём виртуальном диске, открыть документ.

2.Изучить инструментальную ленту, свернуть её, затем вернуть в окно.

3.Включить/выключить вкладку Разработчик.

4.На панель быстрого доступа добавить кнопку Предварительный просмотр. Проделать это с помощью контекстного меню и кнопки Office (вкладка Параметры

Word).

5.Включить/выключить линейку (различными способами).

6.Изменить масштаб отображения текста в окне.

7.Изучить строку состояния. Изменить каким-либо образом настройку строки состояния.

8.Разделить окно редактора на две части (вкладка Вид).

9.Изучить различные режимы просмотра документа.

Задание 2. Работа с текстом

1.Проверить правописание во всём документе.

2.Изучить способы быстрого выделения фрагментов текста (слова, предложения, строки, абзаца, всего документа) с помощью клавиатуры и мыши.

3.С помощью кнопки Найти на панели Редактирование вкладки Главная найти лишние пробелы в тексте, затем удалить их.

4.Скопировать в буфер обмена все цитаты из сельскохозяйственной газеты, найденные в тексте (пользуйтесь кнопкой Найти!).

5.Создать новый файл, назвать его Цитаты.docx, вставить из буфера обмена найденные цитаты.

6.Переместить первую цитату в конец документа различными способами.

7.С помощью кнопки Защитить документ вкладки Рецензирование для файла

Цитаты.docx поставить ограничение на редактирование, затем поставить пароль на открытие файла (это делается при сохранении файла: Сохранить как→Сервис→Общие па-

раметры).

Задание 3. Форматирование символов

1.Файл с текстом рассказа сохранить под другим именем, далее работать с этим

файлом.

2.В первом абзаце каждое предложение отформатировать различными шрифтами (на выбор).

3.Во втором абзаце для каждой строки поставить разное видоизменение шрифта.

4.В первом диалоге прямую речь выделить красным цветом и курсивом, увеличить размер шрифта. Обязательно воспользоваться при форматировании кнопкой Формат по образцу.