Малюнки та гіперпосилання на веб-сторінці
Веб-сторінка стає більш цікавою та наочною, якщо її доповнити малюнками та графічними елементами.
Вставляння малюнків
Щоб вставити малюнок на веб-сторінку, необхідно скористатися тегом <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) Перевірте роботу сайта. Завершіть роботу за комп’ютером. Комп'ютерне тестування
Немає коментарів:
Дописати коментар