Тема 3 Рисунки, гіперпосилання, списки Основи Web-дизайну з курсу Сучасні Internet-технології, НУДПСУ

Тема 3. РИСУНКИ, ГІПЕРПОСИЛАННЯ, СПИСКИ

3.1. Рисунки

Для вставки рисунка у HTML-сторінку використовується тег <img>. Основним параметром цього тегу є параметр src, за допомогою якого вказується адреса файлу, у якому і зберігається рисунок. Цей тег також можливо використовувати для показу відеороликів. У цьому випадку використовується параметр dynsrc, за допомогою якого вказується адреса відео файлу. Найпоширенішими форматами файлів-рисунків є  формати jpg, gif, png,  а відео файлів ¾ avi.

Зазначимо, що  адреса файлу-рисунка може бути вказана у абсолютному та відносному форматі. При використані абсолютного формату у адресі  повністю визначено комп’ютер, каталог та файл рисунка.

Наприклад, для вставки рисунка, що зберігається у файлі logo.gif  за адресою www.picture.com.ua/picture, необхідно:

<img src=" www.picture.com.ua/picture/logo.gif"> 

При використанні відносного формату визначення місцезнаходження файлу-рисунка відбувається з урахуванням місцезнаходження даної HTML-сторінки.

Наприклад, для вставки у HTML-сторінку prim.html рисунка, який зберігається у файлі logo.gif, що знаходиться  у одному  каталозі з файлом   prim.html, необхідно:

<img src="logo.gif"> 

Графічні файли зручно зберігати у окремому каталозі, наприклад у каталозі з іменем img. У цьому випадку для вставки у HTML-сторінку prim.html рисунка logo.gif   необхідно:

<img src="img/logo.gif"> 

Зазначимо, що каталог img та файл prim.html повинні знаходитись у одному каталозі. Крім обов’язкового параметра src, тег <img> має декілька необов’язкових параметрів (табл. 3.1).

Таблиця 3.1

Параметри тегу  <img>

Розглянемо призначення вказаних параметрів докладніше. Досить часто при перегляді HTML-сторінок користувачі використовують браузер, що працює у режимі відключення завантаження зображень. Як відомо, цей режим дозволяє зменшити час відображення HTML-сторінки у вікні браузера. У цьому випадку замість зображення на екрані з’являється альтернативний текст, заданий у параметрі alt. Крім цього, альтернативний текст відображається як підказка при знаходженні курсору "миші" у ділянці рисунка. Приклад використання параметра alt:

<img src="logo.gif"  alt="Альтернативний текст" >

Параметри width  та height призначені для визначення розмірів рисунка у вікні браузера. Зазначимо, що при зміні розмірів зображення розмір файлу не змінюється, тобто час завантаження рисунка не змінюється. Наведемо приклад застосування параметрів   alt,  width   та height для одного і того рисунка:

<img src="logo.gif"   width="184"   height ="164"  alt="Альтернативний текст" >

<img src="logo.gif"   width=" 92 "   height =" 82"  alt="Альтернативний текст" >

<img src="logo.gif"   width=" 150 "   height ="40 "  alt="Альтернативний текст" >

Відповідне вікно браузера зображення рис. 3.1.

Необхідно зазначити, що зміна розмірів рисунка може призвести до втрати якості зображення, особливо за рахунок втрати пропорцій між початковою висотою та шириною. Практичний досвід показує, що навіть при дотриманні пропорцій збільшення початкових розмірів зображень-фотографій більш ніж на 10-15 % призводить до чуттєвої втрати якості. При цьому зменшення розмірів зображень позначається на якості їх відображення набагато менше, але їх використання не оптимальне щодо часу завантаження.

Параметр border дозволяє визначити товщину рамки навколо рисунка. Застосуємо цей параметр із значенням 2  для рисунків попереднього прикладу:

<img src="logo.gif"   width="184"   height ="164"  border="2">

<img src="logo.gif"   width=" 92 "   height =" 82"  border="2" >

<img src="logo.gif"   width=" 150 "   height ="40 "  border="2">

Відповідне вікно браузера подане на рис. 3.2.

Параметри hspace та vspace дозволяють у пікселях задавати відступи від рисунка до інших об’єктів на HTML-сторінці. Покажемо застосування цих параметрів із значеннями 20 та 20 для попереднього прикладу:

<img src="logo.gif"   width="184" height="164" hspace="20" vspace="20" border="2">

<img src="logo.gif"   width=" 92 "   height =" 82"  hspace="20" vspace="20" border="2" >

<img src="logo.gif"   width=" 150 "   height ="40 " hspace="20" vspace="20" border="2">

Результат застосування зображений на рис. 3.3.

Параметр lowsrc дозволяє визначити файл з альтернативним зображенням, яке з’являється у вікні браузера  до появи основного зображення. Альтернативне зображення, як правило, ¾ це рисунок того самого змісту, що і основний, але менш якісний. З цієї причини файл альтернативного зображення менший за розміром, а тому завантажується набагато швидше ніж основний. Це дозволяє швидко показати загальні риси зображення. Приклад використання:

<img src="logo.gif" width="184" height="164" lowsrc ="small.gif">

Параметр align використовується для визначення горизонтального або вертикального вирівнювання рисунка відносно інших об’єктів на HTML-сторінці.  Параметри вирівнювання залежать від значень параметра align. При використанні цього параметра із значеннями left або right рисунок розміщується відповідно до ліворуч або праворуч від вікна браузера, а текст “обтікає” зображення з протилежного боку. Зазначимо, що у цьому випадку текст може займати декілька рядків. Приклад використання параметра align:

<body>

<img src="logo.gif" width="182" height="162" border="1" align="right">

Приклад використання параметра align="right". Рисунок розміщений

біля правої сторони вікна браузера. Текст обтікає зображення з лівої сторони.

</body>

Відповідне вікно браузера подане на рис. 3.4.

Крім left та right, параметр aling може приймати такі значення:

- top - верхня межа зображення вирівнюється по найбільш високому елемента рядка;

- texttop - верхня межа зображення вирівнюється по найбільш високому текстовому елемента рядка;

- middle - середина зображення вирівнюється по базовій лінії рядка;

- absmiddle  - середина зображення вирівнюється по середині рядка;

- bottom - нижня межа зображення вирівнюється по базовій лінії рядка;

- absbottom - нижня межа зображення вирівнюється по нижній межі рядка.

У цих випадках зображення можна розглядати як звичайний елемент рядка.

Зазначимо, що базова лінія тексту - це нижня лінія рядка тексту без урахування нижньої частини деяких символів (р, j, y).

Наведемо приклад використання параметра align тегу <img> із значеннями top, middle та bottom:

<body>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="top">

Приклад використання параметра align="top". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="middle">

Приклад використання параметра align="middle". <br>

<img src="logo.gif" alt="" width="91" height="81" border="1" align="bottom"> Приклад використання параметра align="bottom".

</body>

Відповідне вікно браузера зображене на рис. 3.5.

3.2. Звук

Для програвання звуку на Web-сторінках можливо використовувати тег <embed>, основним параметром якого є src, що дозволяє визначити адресу звукового файлу. Наприклад, для того, щоб при перегляді у браузері Web-сторінки прозвучав звук, записаний у файлі 1.wav, необхідно записати такий HTML-код:

<embed src=1.wav >

Основні параметри цього тегу показані у табл.3.2.

Табл. 3.2

Парметри тегу <embed>

3.3. Гіперпосилання

Як відомо, гіперпосилання призначені для зв’язування одного Web-ресурсу з іншим. Гіперпосилання складається із двох частин. Перша частина – це об’єкт, який користувач бачить у вікні браузера і вибір якого призводить до переходу на цільовий Web-ресурс, URL-адреса якого вказана у другій частині гіперпосилання.  Як цей об’єкт можуть бути текст та/або зображення. Залежності від цього класифікують текстові та графічні гіперпосилання. При типових настройках браузера гіперпосилання виділяються на HTML-сторінці за допомогою кольору. Крім того, текст гіперпосилання виділений за допомогою підкреслення. Для визначення гіперпосилання у коді HTML-сторінки використовують парний тег <a>. Основним параметром цього тегу є параметр href, що задає URL-адресу гіперпосилання. Синтаксис запису гіперпосилання такий:

<a href=" URL-адресу "> Текстовий або графічний об’єкт </a>

Приклади запису текстового та графічного гіперпосилання показані нижче:

<a href="www.meta.ua"> Текстове гіперпосилання </a>

<a href="www.meta.ua"> <img src="logo.gif"> </a>

Вказана URL-адреса може бути відносна або абсолютна. При використанні відносної адреси  повний шлях до цільового ресурсу  не заданий. У цьому випадку визначення місцезнаходження цільового ресурсу відбувається з урахуванням місцезнаходження HTML-сторінки, у якій використане гіперпосилання. Наприклад, якщо у файлі 1.html визначене гіперпосилання:

<a href="2.html "> Текстовий або графічний об’єкт </a>,

 то мається на увазі, що цільова HTML-сторінка 2.html  знаходиться  у тому самому каталозі  того комп’ютера,  у якому знаходиться і HTML-сторінка 1.html.

Абсолютною називається URL-адреса, у якій повністю визначено комп’ютер, каталог та файл цільового ресурсу. Наприклад:

<a href="www.example.com/html/3.html"> Абсолютне гіперпосилання </a>

Важливим параметром тегу <а> є параметр targer, за допомогою якого можливо  вказати вікно браузера, у яке повинен бути завантажений цільовий ресурс. Для завантаження цільового ресурсу у нове вікно браузера значення цього параметра має бути "_blank. Наприклад, для визначення текстового гіперпосилання, вибір якого призводить до відображення у новому вікні браузера файлу 2.html, необхідно:

<a href="2.html " target="_blank"> Текст </a>

Зазначимо, що при відсутності параметра target цільовий ресурс буде завантажуватись у вікно браузера, у якому відображається HTML-сторінка з гіперпосиланням.

Цікавою є можливість гіперпосилань задати у як цільовий ресурс певну частину власної HTML-сторінки. Наприклад, зручно читати великий документ, коли він має зміст із гіперпосиланнями на різні розділи. У цьому випадку перехід по гіперпосиланню до деякого розділу (який може знаходитись у кінці документа) призведе  до відображення цього розділу на екрані. Такі гіперпосилання називаються внутрішніми. Для їх побудови необхідно за допомогою тегу <а> вказати місце переходу (покажчик) та за допомогою параметра name тегу <а> присвоїти йому ім’я.

Наприклад, для переходу на 12 розділ документа на початку тексту цього розділу розмістимо покажчик з іменем  "go12":

<a name="go12"></a>Текст розділу 12

Зазначимо, що у цьому випадку параметр href не використовується, а ім’я покажчика повинно бути записане за допомогою літер англійського алфавіту та цифр.

Особливістю гіперпосилання для переходу у середині HTML-сторінки є використання у параметрі href імені покажчика з префіксом #. Наприклад:

<a href="#go12">Перехід до розділу 12</a>

3.4. Списки

Списки - широко розповсюджена форма показу даних  як у електронних, так і у друкованих документах. Мовою HTML передбачено використання трьох стандартних видів списків: маркірованого, нумерованого та списку визначень. Зазначимо, що від інших елементів на HTML-сторінці стандартні списки відділяються порожніми рядками.

3.4.1. Маркіровані списки

Для визначення маркірованого списку використовується тег-контейнер <ul>, у середині якого розміщуються всі елементи списку. При цьому кожен пункт списку  повинен починатись тегом <li>.   Наведемо приклад HTML-коду маркірованого списку:

<body> Звичайний текст

<ul>

<li> Перший пункт маркірованого списку

<li> Другий пункт маркірованого списку

<li> Третій пункт маркірованого списку

</ul>

Звичайний текст

</body>

Відображення маркірованого списку у вікні браузера подане на рис. 3.6.

Як у тезі <ul>, так і у тезі <li> можливо використовувати необов’язковий параметр type, за допомогою якого визначається тип маркера списку. Можливі значення цього параметра:

- disc - маркери відображаються заповненими колами;

- circle - маркери відображаються незаповненими колами;

- square -маркери відображаються заповненими квадратами.

Приклад використання різних значень параметра type  у тезі <li> маркірованого списку:

<ul>

<li type="disc"> Перший пункт маркірованого списку. type="disc"

<li type="square"> Другий пункт маркірованого списку. type="square"

<li type="circle"> Третій пункт маркірованого списку. type="circle"

</ul>

Відповідне відображення у вікні браузера подане на рис. 3.7.

Якщо параметр type у тегах <ul> та <li> не використовується, то для всього списку використовується маркер типу “disc”.

3.4.2. Нумеровані списки

Для визначення нумерованого списку використовується тег-контейнер <ol>, у середині якого розміщуються всі елементи списку. При цьому кожен пункт списку  повинен починатись тегом <li>.   Наведемо приклад HTML-коду нумерованого списку:

<ol>

<li> Перший пункт нумерованого списку

<li> Другий пункт нумерованого списку

<li> Третій пункт нумерованого списку

</ol>

Відображення такого нумерованого списку у вікні браузера зобржене на рис. 3.8.

Досить часто тег <ol> використовується з необов’язковими параметрами type та start. При цьому параметр type використовується також у тезі <li>. Його призначенням є визначення одного з стандартних типів маркера. Зазначимо, що для нумерованого списку існує п’ять стандартних типів маркерів. Використання цього параметра у тезі <ol> розповсюджується на весь список, а використання у тезі <li> розповсюджується тільки на поточний пункт списку. Можливі значення параметраtype та відповідні цим значенням стандартні типи маркерів покдані у табл. 3.2.

Таблиця 3.2

Використання параметра type

Наведемо приклад нумерованого списку з маркерами у вигляді великих римських цифр. При цьому у другому пункті списку змінимо тип маркеру на "великі латинські букви".

<ol type="I">

<li> Перший пункт нумерованого списку.

<li type="A"> Другй пункт нумерованого списку. type="A"

<li> Третій пункт нумерованого списку.

</ol>

Відображення цього списку у вікні браузера подане на рис. 3.9.

Зазначимо, що нумерація пунктів нумерованого списку не залежить від типу маркера. Якщо параметр type у тегах <ol> та <li> не зазначено, то для всього списку використовується маркер типу "1".

Параметр start призначений для зміни початку нумерації пунктів списку і може використовуватись тільки у тезі <ol>. Для зміни нумерації пунктів у середині списку у тезі <li> використовується параметр value. Значеннями параметрів start та value можуть бути тільки натуральні числа. Наведемо приклад визначення нумерованого списку, у якому нумерація пунктів починається з п’яти, а у третьому рядку списку початок нумерації змінюється на десять:

<ol start="5">

<li> Перший рядок нумерованого списку.

<li> Другий рядок нумерованого списку.

<li value="10"> Третій рядок нумерованого списку.

<li> Четвертий рядок нумерованого списку.

</ol> 

Відображення цього нумерованого списку подане на рис. 3.10.

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

Список визначень використовується для розміщення на HTML-сторінці тексту, за змістом подібного до енциклопедії або словника. Тобто тексту, у якому потрібно навести термін та пояснення цього терміна, що може займати декілька рядків. На відміну від інших типів списків кожен пункт списку визначень складається із двох частин. У першій частині пункту записується термін, що потребує визначення. У другій частині пункту записується текст, що пояснює зміст терміна.

Список визначень задається за допомогою тегу-контейнера <dl>. Для визначення терміна використовується тег <dt>, а для визначення пояснення використовується тег <dd>. Наведемо приклад списку визначень для розміщення на HTML-сторінці деяких стандартних термінів у галузі Web-програмування:

<dl>

<dt>Інтернет (мережа Інтернет)

<dd>Сукупність мереж та обчислювальних засобів, які використовують стек протоколів TCP/IP (Transport Control Protocol/Internet Protocol), спільний простір імен та адрес для забезпечення доступу до інформаційних ресурсів мережі  будь-якій особі;

<dt>Гіпертекстове посилання

<dd>Адреса іншого мережевого інформаційного ресурсу у форматі URL, який тематично, логічно або будь-яким іншим способом пов'язаний з документом, у якому це посилання визначене.

</dl>

Відображення цього списку визначень у вікні браузера подане на рис. 3.11.

Як видно з рисунка 3.11, у вікні браузера термін відділяється від свого пояснення за допомогою переводу рядка та табуляції.

3.5. Контрольні запитання

1. Назвіть тег вставки рисунка.

2. Назвіть найпоширеніші формати графічних файлів.

3. Параметри тегу вставки рисунка.

4. Як змінити розмір рисунка у HTML- документі?

5. Навіщо використовується параметр lowsrc?

6. Правила запису гіперпосилань.

7. У чому різниця між абсолютним та відносним гіперпосиланням?

8. Як відкрити гіперпосилання у новому вікні браузера?

9. Що таке “якір”?

10.  Для чого використовуються списки у HTML- документі?

11.  Як визначити маркірований список?

12.  Як змінити маркер пункту списку?

13.  Як визначити нумерований список?

14.  Як змінити номер пункту списку?

15.  Як визначити список визначень?

З повагою ІЦ “KURSOVIKS”!