Основные сведения. Использование рисунков делает страницы сайта более интересными

Использование рисунков делает страницы сайта более интересными. Вставить рисунок позволяет тег <img>, в котором используются атрибуты для указания:

Имени файла рисунка - src="cat.jpg".

Ширины рисунка - width="200"

Высоты рисунка - height="150"

Пояснения к рисунку - alt="Мой кот" (пояснение отображается в случае, когда не отображается сам рисунок).

Выравнивания рисунка по горизонтали - align= (left, right, center)

Выравнивания рисунка по вертикали - Valign = (bottom, top, middle).

Толщины рамки вокруг рисунка - border=3

Если файл рисунка "cat.jpg" находится в той же папке, что и HTML-программа, то его можно указать в программе просто именем:

<img src="cat.jpg" width="200" height="150">

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

<img src="М:/Mitso/htm/cat.jpg" width="200" height="150">

Предпочтительнее указывать относительный путь. Например, если программа хранится в папке М:/Mitso/563м, то надо выйти на 1 уровень вверх из своей папки:

<img src="../Mitso/htm/cat.jpg" width="200" height="150">

Указание ширины и высоты рисунка не обязательно, но благодаря этим данным увеличивается скорость загрузки WEB-страницы. Следует задать описание картинки для случая, когда отключена загрузка изображений. Тогда на месте рисунка будет отображаться текст пояснения::

<img src="cat.jpg" width="200" height="150" alt="Мой кот">

В WWW используются два формата графических файлов: GIF и JPEG. Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:

· черно-белых рисунков и текста;

· изображений с ограниченным количеством цветов;

· графики с резкими контурами (меню, кнопки, диаграммы и т.п.);

· изображений с текстом.

Формат JPEG используют для отображения:

· сканированных изображений;

· графики со сложным сочетанием цветов и оттенков.

В HTML-программе можно использовать три вида списков:

1. маркированный (неупорядоченный) список. Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>, например:

<ul>

<li>Отдел кадров</li>

<li>Бухгалтерия</li>

<li>Плановый отдел</li>

</ul>

Результат:

· Отдел кадров

· Бухгалтерия

· Плановый отдел

Вид метки, которую браузер помещает перед каждым элементом списка, задается атрибутом Type, который может принимать следующие значения:

- Circle – окружность;

- Disk – точка;

- Square – квадратик.

2. нумерованный (упорядоченный) список. Создается тэгом <ol>, элементы списка - тегом <li>. Пример:

<ol>

<li> Отдел кадров </li>

<li> Бухгалтерия </li>

<li> Плановый отдел </li>

</ol>

Результат:

1. Отдел кадров

2. Бухгалтерия

3. Плановый отдел

Вид номера, который браузер помещает перед каждым элементом нумерованного списка, задается атрибутом Type, который может принимать следующие значения:

- 1- нумерация арабскими цифрами;

- А – прописными латинскими буквами;

- А – строчными латинскими буквами;

- I – римскими числами, записанными заглавными буквами;

- i - римскими числами, записанными строчными буквами.

3. список определений (глоссарий). Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>. Пример:

<dl>

<dt>браузер</dt>

<dd>программа-просмотрщик страниц</dd>

<dt>http</dt>

<dd>протокол Web</dd>

<dt>Internet</dt>

<dd>Мировая компьютерная сеть</dd>

</dl>

Результат:

браузер

программа-просмотрщик страниц

http

протокол Web

Internet

Мировая компьютерная сеть

Списки могут быть вложенными. Пример:

<ol>

<li>первый пункт списка</li>

<li>второй пункт списка

<ul>

<li>первый пункт вложенного списка</li>

<li>второй пункт вложенного списка</li>

</ul>

<li>третий пункт списка</li>

</ol>

Результат:

1. первый пункт списка

2. второй пункт списка

· первый пункт вложенного списка

· второй пункт вложенного списка

3. третий пункт списка