LR5

<a href="http://www.yandex.ru"><img src="1.gif"> </a>.

За замовчуванням, при переході по посиланню документ відкривається в поточному вікні. При необхідності, ця умова може бути змінена параметром target = "" тега А. Target може приймати наступні значення:

• _blank - завантажує сторінку в нове вікно браузера;

• _self - завантажує сторінку в поточне вікно;

• якщо на сайті використовуються фрейми, то в якості значення target можна використовувати ім'я фрейму.

Приклад відкриття документа в новому вікні:

<a href=www.yandex.ru target=_blank>Посилання відкриває нове вікно на сайт www.yandex.ru </a>

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

Для вказівки адреси зображення можна задавати як абсолютну, так і відносну адресу.

Повна адреса документа в мережі називається URL (Uniform Resource Locator). URL може складатися з наступних частин:

- префіксу протоколу, тобто, вказівка на мережеву службу;

- доменного ім’я комп’ютера або його IP-адреси;

- номеру порту, через який відбувається взаємодія з сервером. Перед номером порту ставиться двокрапка;

- назви файлу на сервері, що може включати і шлях від кореневого каталогу сервера;

- закладки, що дозволяє перейти в потрібну частину документа. Ім’я закладки відділяється від імені файлу символом ‘#’.

Посилання, в якому зазначено повний URL документа, називається абсолютним. Абсолютні посилання використовуються для зв’язку з зовнішніми ресурсами Інтернет, URL яких відомий нам і не змінюється.

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

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

Файл з рисунком, зображеним нижче, називається, наприклад 1.gif і розміщується в папці КМТК кореневій директорії сайту (рис. 5.2).

Рисунок 5.2 – Приклад рисунку

Приклад 1. Вставка зображення в документ:

<img src="/КМТК/1.gif"> - адреса розміщення зображення щодо кореневої директорії сайту.

Зображення на екрані складається з маленьких осередків. Кожен з них може мати певний колір. Такий осередок отримав назву пікселя (pixel). Головною відмінністю властивістю піксела є його однорідність і неподільність. Всередині пікселя вже не може бути ніяких більш дрібних елементів.

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

Роздільна здатність - це універсальне поняття для різних областей, що мають справу із зображеннями (телебачення, фотографія, поліграфія і цифрова графіка), воно має однаковий зміст: кількість дискретних елементів у стандартній одиниці довжини.

Щільність (рос. «разрешение») визначається кількістю пікселів в кожному дюймі, тобто її одиницею виміру є - ppi, що є скороченням від словосполучення "pixels per inch" і перекладається як "пікселів в кожному дюймі". Якщо щільність зображення 100ppi, це означає, що в кожному квадраті, розміром приблизно 2.5x2.5 см² розташовані 100 пікселів (тобто 10 x 10 пікселів і кожен піксель складає приблизно 2.5 мм).

Фізичний розмір зображення може вимірюватися як в пікселях, так і в одиницях довжини (міліметрах, сантиметрах, дюймах). Він задається при створенні зображення і зберігається разом з файлом.

Для зміни розмірів зображення існують параметри width і height тега IMG.

Початкове зображення 1.gif має розміри 50 на 50 пікселів.

HTML код для розміщення рисунка 5.2 виглядає так:

<img src="1.gif" width=50 height=50>

Нижче наведено рисунок 1.gif з шириною і висотою 150 пікселів (рис. 5.3).

Рисунок 5.3 – Збільшення ширини і висоти початкового рисунку

Відповідно код HTML до нього:

<img src="1.gif" width=150 height=150>

Крім абсолютної величини картинки в пікселях, можна задати відносну - щодо ширини і висоти сторінки.

Наприклад:

<img src="1.gif" width=50% height=10%>

Будь-яку картинку можна помістити в рамку, як фотографію на стіні. Для цього є параметр border тега IMG. За замовчуванням рамка навколо зображення не відображається за винятком випадку, коли рисунок є посиланням. Колір рамки співпадає з кольором тексту.

Приклад. Додавання рамки навколо зображення.

<html>

<body text="#000000">

<img src="КМ\1.gif" width=50 height=50 border=5> рамка чорного кольору товщиною 5 пікселів.

</body>

</html>

Якщо зображення є посиланням, рамка додається автоматично, товщина її 1 піксель, а колір рамки співпадає з кольором посилань, який визначається в тому ж тезі BODY.

Щоб прибрати цю рамку, слід задати параметр border = 0.

Щоб при наведенні на картинку миші з’являвся текст, який називається альтернативним текстом, використовується параметр alt тега IMG.

Приклад додавання альтернативного тексту:

<a href=index.html> <img src=home.gif alt="Повернення на головну сторінку"> </a>

Альтернативний текст не підтримується деякими браузерами.

Зображення можна вирівнювати так само, як і текст. Спосіб вирівнювання зображень задається параметром align тега IMG.

<img src=1.gif align=texttop> - Верхня межа зображення вирівнюється за найвищим елементом поточного рядка.

<img src=1.gif align=middle> Вирівнювання середини зображення по базовій лінії поточного рядка.

<img src=1.gif align=absmiddle> Вирівнювання середини зображення по сeредині поточного рядка.

<img src=1.gif align=baseline> Вирівнювання зображення по базовій лінії поточного рядка.

<img src=1.gif align=bottom> Вирівнювання нижньої межі зображення з навколишнього тексту.

<img src=1.gif align=left> Вирівнює зображення по лівому краю вікна.

<img src=1.gif align=right> Вирівнює зображення по правому краю вікна.

Найбільш популярні параметри - left і right, що створюють обтікання тексту навколо зображення. Щоб текст не прилягав щільно до рисунка, рекомендується в тезі IMG додати параметри hspace і vspace, які задають відстань до тексту в пікселях.

Для вирівнювання можна використовувати параметр <center>, який розташує картинку посередині сторінки.

Для автоматичного завантаження музики використовують тег <EMBED>. Дія цього тегу наступна: після завантаження сторінки автоматично завантажується і програється звуковий файл. При цьому у вікні з’являється панель програвача.

Приклад:

<EMBED SRC="music/osen.mid" AUTOSTART="TRUE">

Елемент <EMBED> може мати наступні параметри:

- WIDTH - ширина панелі в пікселях (можна і у відсотках);

- HEIGHT - висота панелі в пікселях (або відсотках);

- ALIGN - розташування панелі щодо тексту, можливі значення LEFT, RIGHT, CENTER;

- HIDDEN - дозволяє приховати панель, значення параметра:

TRUE - панель прихована, FALSE - панель видима (значення за умовчанням);

- AUTOSTART - значення TRUE - програвач стартує автоматично, FALSE - чекає натискання на кнопку "відтворення";

- LOOP - цикл, тобто при значенні TRUE мелодія буде програватися по колу, а при значенні FALSE - тільки один раз. Якщо значенням буде число, то Netscape програє мелодію вказану кількість разів, для Explorer’а числове значення рівне значенням TRUE.

Приклад використання перерахованих вище параметрів:

<EMBED SRC="music/osen.mid" HIDDEN="TRUE" AUTOSTART="TRUE" LOOP="TRUE">

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

HTML підтримує нумеровані і марковані списки, що відкриваються, відповідно, тегами <OL> і <UL>. Опція COMPACT робить список більш компактним. Опція TYPE дозволяє вказати тип маркерів списку. Для нумерованого списку її можливі значення - "A", "I" або "1" (за замовчуванням), що позначають, відповідно, нумерацію латинськими літерами, римськими чи звичайними цифрами. Для маркованого списку опція TYPE вказує вид маркера - circle, disc або square. Опція START = "число" нумерованого списку дозволяє почати нумерацію з цифри, відмінної від 1 або букви, відмінної від A.

Окремі елементи списку розміщують в тег <LI>. Для нумерованого списку можна змінити нумерацію, вказавши в тезі <LI> опцію VALUE = "число".

Для створення комбінованих списків теги нумерованих та маркованих списків можна вкладати один в одний.

Приклад списку та його HTML-код:

1. Комп'ютери

• Pentium Pro

• Pentium MMX

2. Принтери

• матричний

• струменевий

• лазерний

<ol compact>

<li> Комп'ютери

<ul compact type="disc">

<li> Pentium Pro </li>

<li> Pentium MMX </li>

</ul>

</li>

<li> Принтери

<ul compact type="square">

<li> матричний </li>

<li> струменевий </li>

<li> лазерний </li>

</ul>

</li>

</ol>

Крім того, HTML підтримує список визначень, що містить пари вигляду "термін" - "його опис", які чергуються. Список визначень починається з тега <DL>, термін виділяється тегом <DT>, а опис, який зазвичай виводиться із зсувом вправо, тегом <DD>.

Хід роботи

1. Вивчіть теоретичний матеріал для виконання роботи.

2. Перевірте наявність програмного забезпечення, необхідного для виконання лабораторної роботи: браузер Internet Explorer, Блокнот або інший текстовий редактор.

3. В папці своєї групи створіть Web-сторінку. Назвіть її.

4. Напишіть маленький текст, який повторіть різними шрифтами за допомогою команд SIZE і H.

5. У тексті кілька разів змініть кольори.

6. Вкажіть адресу вашої сторінки.

7. Визначте коди жовтого, синього, червоного, фіолетового, оранжевого, коричневого, білого і чорного кольорів.

8. На сторінці змініть фон.

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

10. Зобразіть формулу води.

11. Зробіть рядок, що швидко біжить і такий, що повільно "відскакує" від стін.

12. Поставте посилання на будь-який сайт.

13. Поставте посилання на сайт так, щоб воно відкривалось в окремому вікні.

14. Завантажте собі маленьку за обсягом картинку і зробіть за допомогою неї абсолютне і відносне посилання.

15. Розтягніть вашу картинку в два рази.

16. Стисніть вашу картинку.

17. Зробіть її 50% по ширині і 10% по висоті віконця.

18. Зробіть картинці рамочку великого розміру.

19. Введіть альтернативний текст.

20. Завантажте дві картинки. Змістіть їх вліво і вправо.

21. Зробіть перелік кольорів маркованим списком з маркерами у вигляді квадрата.

22. Зробіть список з 4-5 визначень, що складається з посилань та коментарів до них.

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

1. Яке призначення мови HTML?

2. Що таке HTML-документ?

3. Де можна створювати Web-сторінки?

4. За допомогою чого продивляються Web-сторінки?

5. Що таке браузер?

6. Що таке тег?

7. Які бувають теги?

8. Яке призначення атрибутів тегів?

9. Які є обов’язкові теги?

10. Які теги використовуються для створення заголовків?

11. Які теги використовуються для форматування тексту?

12. Як змінити розмір шрифту?

13. Яким буде розмір шрифту за замовчуванням?

14. Як змінити колір шрифту?

15. Як утворюються кольори?

16. Які три кольори є основними?

17. Як передаються кольори в різних браузерах?

18. Як змінити колір фону сторінки?

19. Як зробити абзац?

20. Наведіть приклади вирівнювання тексту.

21. Що містить таблиця спец символів?

22. Як намалювати смужку?

23. Які атрибути має тег hr?

24. Як задається посилання?

25. Що використовується в якості параметра посилання?

26. Як зробити посилання через картинку?

27. Як зробити, щоб посилання відкривалося в новому вікні?

28. Який тег використовується для вбудовування зображення в документ?

29. Які бувають адреси в HTML?

30. З чого складається повна адреса HTML-документа?

31. Яке посилання називається абсолютним?

32. Яке посилання називається відносним?

33. З яких частин складається зображення?

34. На що поділяється піксель?

35. Що таке роздільна здатність?

36. Що означає щільність?

37. Як можна вимірювати фізичний розмір зображення?

38. Як помістити картинку в рамку?

39. Як завантажити музику?

40. Які списки підтримує HTML?

41. Які види маркерів можуть бути в списку?

42. Що означає список визначень?