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

Помимо обычных списков существуют списки определений.

Часто списки строятся по принципу: сначала – короткая фраза или слово (как правило, выделенное полужирным шрифтом или как-нибудь иначе), потом – более подробное разъяснение.

В HTML такие фрагменты можно организовать как список определений.

Каждый элемент такого списка состоит из некоторого термина и его определения.

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

Разметка списка определений осуществляется с помощью трех тегов <dl>, <dt> и <dd>.

<dl> - описывает весь список в целом;

<dt> - определяет термин;

<dd> - определение.

Пример (список определений)

<html>

<h4>Пример списка определений</h4>

<dl>

<dt>Полка</dt>

<dd>Предмет мебели</dd>

<dt>Самолет</dt>

<dd>Летающее средство транспорта</dd>

<dt>Незабудка</dt>

<dd>Красивый цветок</dd>

<dt>Ель</dt>

<dd>Хвойное дерево</dd>

<dt>Родник</dt>

<dd>Природный источник подземной воды</dd>

<dt>Облако</dt>

<dd>Скопление водяного пара в атмосфере</dd>

</dl>

</html>

Задания для самостоятельной работы:

1. Создать HTML-документ:

В MS ACCESS при заполнении таблиц можно вводить данные следующих типов:

1. текстовый;

2. поле MEMO;

3. числовой;

4. дата и время;

5. денежный;

6. логический;

7. поле объекта OLE;

8. гиперссылка.

2. Создать HTML-документ:

- фон страницы – голубой;

- заголовок "Считалка" разметить как заголовок 2 уровня; цвет шрифта – зеленый;

- элементы маркированного списка сделать полужирным

Считалка

На золотом крыльце сидели:

• из царей:

1. царь;

2. царевич;

• из королей:

3. король;

4. королевич;

• из прочего люда:

5. сапожник;

6. портной…

3. Создать HTML-документ, применяя теги списка определений. После заголовка провести линию на длину заголовка (это значит подобрать параметр width). Названия знаков зодиака сделать разными цветами.

ГОРОСКОП

____________

Водолей

Начните неделю с оказания помощи детям.

Рыбы

Начните активно заниматься квартирным вопросом.

Овен

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

Телец

Срочно подключайте к процессу повышения своего материального уровня деловых партнеров.

Близнецы

Нужно много трудиться и меньше руководить другими людьми.

Рак

Вам необходимо добиться поставленных перед собой целей.

Лев

Вам нужно согласовывать личные и партнерские отношения.

Дева

Непременно отдохните, чтобы восстановить силы.

Весы

Вам нужно руководить идущими процессами и окружающими людьми.

Скорпион

Необходимо принимать активное участие в коллективном или общественно полезном труде.

Стрелец

Вам придется сделать выбор между стремлением раскрыть творческую силу и реализовать свои профессиональные навыки.

Козерог

Вам необходимо проявлять инициативу.

ИСПОЛЬЗОВАНИЕ ИЗОБРАЖЕНИЙ

Internet не был бы столь популярен в мире, если бы Web-страницы содержали только текст. Мир Internet – это мир красок, фотографий, анимационных эффектов, видео и аудиоклипов. Благодаря использованию графики удается сообщить посетителю Web-страницы необходимый эмоциональный настрой и представить информацию более наглядно.

Рисунки, фотографии и декоративные графические элементы наиболее часто используются на Web-страницах.

Из множества форматов графики в Internet используются всего лишь три:

• JPEG – файлы этого формата сохраняются с расширением .jpg.

• GIF – файлы этого формата сохраняются с расширением .gif.

• PNG – файлы этого формата сохраняются с расширением .png. (Не все обозреватели могут поддерживать этот формат).

Для размещения рисунков в HTML-документе служит одиночный тег

<IMG SRC="имя файла">

Этот тег должен всегда содержать параметр src, значением которого будет абсолютный или относительный путь к графическому файлу. Абсолютный путь начинается с указания буквы диска и всех вложенных папок (например, "C:\Моя_папка\Мой_файл.jpg"). Относительный путь указывается следующим образом: "имя файла.jpg". Но в этом случае рисунок должен обязательно находиться в той же папке, что и Web-страница.

Рассмотрим пример использования рисунка в HTML-документе.

1. Найдем на своем компьютере какой-нибудь рисунок с расширением .jpg или .gif. (Например, в папке HTML\Images-Anim\dog.gif)

2. Скопируем его к себе в папку.

3. В редакторе наберем следующий HTML-код:

<HTML>

<HEAD>

<TITLE> Использование изображений</TITLE>

</HEAD>

<BODY>

<H2 align=center> Пример вставки рисунка </H2>

<

IMG SRC="dog.gif"

</BODY>

</HTML>

4. Получим следующее:

Т

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

Г

раницы вокруг рисунка создаются с помощью параметра border. По умолчанию обозреватель показывает рисунок без границ. Чтобы прорисовать границы вокруг рисунка, параметру border необходимо присвоить значение толщины границы в пикселях.

Добавим в предыдущем документе следующее:

<IMG SRC="dog.gif" border=10>

Получим рисунок в рамке, толщиной 10 пикселей.

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

Добавим в предыдущем документе следующее:

<IMG SRC="dog.gif" border=10 alt="Это замечательный добрый песик">

П ри наведении указателя мыши на рисунок появится альтернативный текст.

Для выравнивания рисунков в тексте Web-страницы используется параметр align.

По умолчанию обозреватели оставляют лишь несколько пикселей между текстом и рисунком. Увеличение отступа может усилить зрительный эффект. Отступ текста от рисунка контролируется параметрами hspace – отступы слева и справа от рисунка, и vspace – над и под рисунком.

С помощью параметров width и height можно изменять размер изображения, увеличив или уменьшив его. Если размер изображения устанавливается в %, то при просмотре рисунок всегда будет занимать размер в % относительно окна обозревателя. В этом случае можно указывать только один параметр.

Задание для самостоятельной работы:

Оформить Web-страницу, содержащую заголовок, рисунок и текст.

1. Требования к заголовку:

   • расположить по центру;

   • назначить 2 уровень заголовка.

   • название – "Наша Брестчина".

2. Требования к вставляемому рисунку:

   • должен быть выровнен по левому краю;

   • отступ справа от рисунка – 40, под рисунком – 20;

   • установить ширину рисунка – 45%;

   • предусмотреть ввод альтернативного текста (например, "Это древнее Берестье" или "Это Беловежская пуща")

3. Требования к тексту:

   • выровнять текст по ширине;

   • для первого слова первого абзаца установить размер шрифта =5 и цвет шрифта – красный.