mozok.click » Інформатика » Малюнки та гіперпосилання на веб-сторінці
Інформація про новину
  • Переглядів: 2324
  • Автор: admin
  • Дата: 14-09-2017, 06:10
14-09-2017, 06:10

Малюнки та гіперпосилання на веб-сторінці

Категорія: Інформатика

Веб-сторінка стає більш цікавою та наочною, якщо її доповнити малюнками та графічними елементами.

Вставляння малюнків

Щоб вставити малюнок на веб-сторінку, необхідно скористатися тегом <img src="my.jpg">, де img — ім’я тегу, призначеного для вставляння зображення, src="my.jpg" — атрибут, в якому вказується ім’я файла з малюнком.

В атрибуті можна використовувати імена графічних файлів із розширенням .jpg, .jpеg, .gif, .png або .bmp. Якщо малюнок і html-файл розташовані не в одній папці, то крім імені файла зазначають шлях до нього.

Якщо малюнок міститься:

• у вкладеній папці images: <img src="images/my.jpg">

• у зовнішній папці images: <img src="../my.jpg">

Для визначення способу розташування малюнка на веб-сторінці використовують окремі атрибути тегу.

Розглянемо приклад розташування малюнка "pr1.png" на веб-сторінці (див. рисунок):

• малюнок з лівого краю, обтікання текстом праворуч:

<img src="pr1.png" align="left">

• відстань між текстом і малюнком по вертикалі 10 пікселів, по горизонталі — 30 пікселів: <img src="pr1.png" vspace="10" hspace="30">

• опис малюнка: <img src="pr1.png" alt-'моє фото">

Примітка. Якщо навести вказівник миші на малюнок, з’явиться текст — моє фото. Крім того, значення параметра alt буде виведене на екран замість малюнка, якщо у браузері режим показу малюнків вимкнуто.

• ширина малюнка 100 пікселів, висота — 20 % від висоти робочої області браузера: <img src="pr1.png" width="100" height="20%">

• товщина рамки навколо малюнка 5 пікселів:

<img src="pr1.png" border="5">



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

Сайт може складатись із багатьох пов’язаних гіперпосиланнями веб-сторінок, одна з яких є головною. Головна веб-сторінка відкривається першою. Файл головної сторінки називають, як правило, index.html.

Для створення гіперпосилань на веб-сторінки сайта та зовнішні ресурси мережі Інтернет використовують тег <a>...</a>.

Нехай в одній папці з файлом index.html створено файл prf.html, який містить вашу фотографію. У файлі index.html до фрази Подивитися фото можна додати гіперпосилання, яке матиме такий вигляд:

<a href=ꞋꞋprf.htmlꞋꞋ> Подивитися фото </a>

Як гіперпосилання можна використати малюнок. Для цього треба вказати тег вставляння малюнка: <a href=ꞋꞋprf.htmlꞋꞋ><img src=ꞋꞋfoto1.jpgꞋꞋ></a>

Мті-код головної веб-сторінки може мати такий вигляд:

<html>

<body>

<a href=ꞋꞋfirst.htmlꞋꞋ>Перша сторінка</a><br>

<a href=ꞋꞋsecond.htmlꞋꞋ>Друга сторінка</a><br>

<a href=ꞋꞋthird.htmlꞋꞋ>Третя сторінка</a><br>

</body>

</html>

Під час клацання напису Перша сторінка (Друга сторінка, Третя сторінка) відбудеться перехід за гіперпосиланням.

Для повернення на головну сторінку на інших веб-сторінках мають бути відповідні посилання. Наприклад: <a href=ꞋꞋindex.htmlꞋꞋ>Головна</a>


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

1. Як вставити малюнок на веб-сторінку?

2. Як вирівняти малюнок за правим краєм вікна браузера?

3. Як створити гіперпосилання?

4. Як додати до малюнка гіперпосилання на іншу веб-сторінку? Вправа 22

Створити веб-сторінку з малюнками і гіперпосиланнями.

1) Створіть папку з назвою Вправа 22. Знайдіть в Інтернеті малюнок на шкільну тематику та збережіть його у створеній папці.

2) Створіть Мті-документ (головну веб-сторінку сайта) із заголовком Розклад уроків. Додайте малюнок, збережений у папці, та текст (меню сайта): понеділок, вівторок, середа, четвер, п'ятниця. Збережіть створений документ з іменем іпСехФїті у папці.

3) Створіть 5 Мті-документів (сторінок сайта) з розкладом уроків на кожний із цих днів тижня. До кожної сторінки додайте слово Головна, яке буде гіперпосиланням на головну веб-сторінку. Збережіть сторінки сайта у папці з іменами іФїті; 2.М:ті; ЗФїті; 4.М:ті; БФїті.

4) У файлі іпСехФїті зробіть гіперпосилання на 5 інших сторінок, у файлах іФїті-БФїті — гіперпосилання на головну сторінку сайта.

5) Відформатуйте тексти і малюнки.

6) Перевірте роботу сайта. Завершіть роботу за комп’ютером. Комп'ютерне тестування

Виконайте тестове завдання 22 із автоматичною перевір

кою на сайті «Інтерактивне навчання».

 

Це матеріал з підручника Інформатика 9 клас Бондаренко

 






^