Використання зображення як посилання

Графічне зображення може використовуватися як покажчик гіпертекстових зв'язків. Для створення такого посилання достатньо включити тег IMG усередину тегу - контейнеру <A>.

Регулювання якості зображення (атрибут lowsrc)

Визначається атрибутом lowsrc. Значенням цього атрибуту є URL зображення низької якості, яке завантажується в першу чергу.

Використання мініатюрних версій зображення досягається за допомогою Масштабування.

Якщо розміри вказані атрибутами HEIGHT = (висота) і WIDTH = (ширина), не співпадають з розмірами графічного файлу, то останній масштабується.

 

Списки

Списки будуються по принципу вкладення елементів. Спочатку визначається батьківський елемент, який завдає тип списку, після чого слідує дочірні елементи заголовку та окремих рядків списку.

Види списків:

Маркірований

Маркірований список задається парним тегом <ul> --- </ul> (батьківський елемент усередині якого розміщується список). Усередині тегу розташовуються всі елементи списку. Кожний елемент списку починається тегом <LI>. Список відділяється від основного тексту порожніми рядками. Крім пунктів списку можуть бути присутнім інші елементи (заголовки, пояснення). Цей тег містить параметр type, який може мати такі значення: disc - маркери списку відображаються зафарбованими кружками (використовується за замовчуванням); circle - маркери списку відображаються не зафарбованими кружками; square - маркери списку відображаються зафарбованими квадратиками. Параметр type можна використовувати й у тегу <LI>.

Нумерований

Нумерований список задається парним тегом <OL>---</OL>. Усередині тегу розташовуються елементи списку. Кожний елемент починається тегом <LI>. Тег <OL> має наступні параметри:

1. type - за допомогою параметру type тегу <OL> можна задавати наступні стилі нумерації списку:

· type = A – нумерація прописними латинськими буквами;

· type =а – нумерація рядковими латинськими буквами;

· type =I – нумерація великими римськими цифрами;

· type =i – нумерація маленькими римськими цифрами;

· type =l – нумерація арабськими цифрами (використовується за замовчуванням)

<ol> <li type=A> Анекдоты <li type=A> Афоризмы <li type=A> Высказывания </ol> <ol> <li type=L>Забавные истории <li type=L>смешные ситуации </ol>

2. start дозволяє почати нумерацію списку не з одиниці (<OL Start=5> нумерація списку починається з п’яти)

3. параметр value використовується в тегу <Li> і дозволяє змінити номер даного елемента списку.

З тегу <LI> - починає кожний елемент списку й не має потреби в тегу, що закривається. Цей вид списку може використовувати графічні зображення

4. графічні маркери:

використовується тег вставки зображення, елементи списку відділяються або тегом <BR> або <P>

Список визначень

Список визначень звичайно складається з 2-х частин - чергування терміна (DT) і визначення (DD). Звичайно Web-браузер визначення розташовує на новому рядку.

Основний синтаксис завдання списку визначень:

 

< DL >

<DT> термін 1

<DD> визначення терміна 1

<DT> термін 2

<DD> визначення терміна 2

…

</DL>

 

Приклад списку визначень:

<DL>

<DT> NCSA

<DD> NCSA (National Center for Supercomputing Applications).

</DL>

Вкладені списки

Списки можуть бути вкладеними. Наприклад:

Що дає на екрані: 1 Великі міста Росії: o Москва o Санкт-Петербург 2 Великі міста України: o Київ o Луганськ

<UL>

<LI> Великі міста Росії:

<UL>

<LI> Москва

<LI> Санкт-Петербург

</UL>

<LI> Великі міста України:

<UL>

<LI> Київ

<LI> Луганськ

</UL>

</UL>

 

Завдання до лабораторної роботи

Завдання №1

1. Створіть на диску D: папку Web.

2. Знайдіть через пошук на комп'ютері три графічних файли з розширеннями *.jpg. Скопіюйте їх у папку Web

3. Перейменуйте скопійовані файли відповідно у 1.jpg, 2.jpg, 3.jpg.

4. Створіть за допомогою текстового редактору Блокнот просту web – сторінку і збережіть її в папці Web під іменем Imeg.html.

5. Вставте в документ Imeg.html один з файлів папки графічних файлів: 1.jpg, 2.jpg, 3.jpg. Наприклад:

 <img src="1.jpg" alt="picture" height="47">

Завдання №2

Змінити документ Imeg.html наступним чином:

1. Наберіть наступний текст, застосовуючи різний розмір і колір шрифту.