Інформатика

Безкоштовно

Зараховано 2 учнів

Урок 58. Малюнки. Гіперпосилання

Тема уроку: “Малюнки. Гіперпосилання”

Пригадаємо…

  • Які теги використовуються для виділення заголовків різного рівня?
  • Які теги використовуються для створення абзаців та проведення горизонтальної лінії?
  • Як задати колір тексту на сайті?

Прочитайте!

Гіпертекстове посилання є фрагментом тексту документа й тому задається текстовим елементом, що визначається парним тегом <А>. Цей елемент містить обов’язковий атрибут HREF=. Після знаку рівності записують значення цього атрибута. Наприклад, відкриваючий тег посилання може мати вигляд: <А HREF=”http://www.uk.wikipedia.org/wiki.htm”>.

Гіперпосилання можна використовувати для посилання на мультимедійні файли.

Web-графіка

Сьогодні графічні елементи Web-сторінок використовують два основних формати — GIF та JPEG. Для підготовки зображень можна використовувати будь-який графічний редактор, наприклад стандартний додаток Paint, що дозволяє зберігати файли в цих форматах.

Для вставки малюнка використовується текстовий елемент, що задається непарним тегом <IMG>. Teг <IMG> повинен містити обов’язковий атрибут SRC=, що задає адресу URL файлу із зображенням у відносній або абсолютній формі. Наприклад: <IMG SRC=”картинка.gif”>. Якщо малюнок необхідно масштабувати, застосовують атрибути WIDTH= і HEIGHT=, що задають ширину й висоту малюнка (у пікселах).

Наприклад: <IMG SRC=” картинка.jpg” WIDTH=”100″ HEIGHT=”40″>

Для зображення, що дійсно включено в рядок, можна задати режим взаємодії з текстом з допомогою атрибута ALIGN=. Наприклад:

<IMG SRC=”картинка.gif” ALIGN=”BOTTOM”> .

Цей атрибут може приймати три значення:

  • якщо задано ALIGN=”BOTTOM”, то нижня границя зображення сполучається з основою текстового рядка;
  • якщо задано ALIGN=”MIDDLE”, то середина зображення сполучається із серединою текстового рядка;
  • якщо задано ALIGN=”TOP”, то верхня границя зображення вирівнюється за верхнім краєм текстового рядка.

Однак привабливіше використання «плаваючого»- зображення, обтічного текстом, що також досягається використанням атрибута ALIGN=:

  • якщо задано ALIGN =”LEFT”, то зображення розміщується біля лівого краю сторінки, а наступний текст розміщується праворуч від нього;
  • якщо задано ALIGN=”RIGHT”, то зображення розміщується біля правого краю сторінки, а наступний текст розміщується ліворуч від нього.

Ще один спосіб застосування зображень на Web-сторінках полягає у використанні їх як фонових малюнків. При відображенні документа, що містить фоновий малюнок, на комп’ютері робоча область вікна заповнюється цим малюнком послідовно (як паркетом), рахуючи від верхнього лівого кута документа або вікна. Фоновий малюнок задається за допомогою атрибута BACKGROUND= у тегові <BODY>. Значенням цього атрибута повинна бути абсолютна або відносна адреса URL для файлу із зображенням. Атрибут TEXT  задає колір шрифта.

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

Пам’ятайте що зображення повинну бути у тій самій папці, що і основний файл (сайт з розширенням html), у лапках записується назва зображення включаючи розширення.

Виконання практичного завдання

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

Завдання:

  • Доповніть власний сайт зображеннями (вставити мінімум два зображення, які б відповідали темі сайту).
  • Вставити на сайт гіперпосилання на відео (відео повинно відповідати темі сайту).
  • Поекспериментуйте з кольором фону сайту та кольором тексту.

На електронну адресу вчителя, або у Classroom надішліть виконане завдання.

Вимоги до листа: у темі листа ОБОВ’ЯЗКОВО вказуйте прізвище, ім’я та клас (наприклад: Сидоров Михайло, 9Б).

За кожне виконане завдання учень отримуватиме додаткові бали, які після відновлення навчання буде переведено в оцінки!

Якщо у вас немає можливості працювати за ПК, дайте відповіді на запитання:

  1. Які атрибути використовують для вставлення зображень та гіперпосилань у HTML (наведіть приклади)?
  2. Запишіть у зошит коротенький приклад HTML сторінки. Приклад повинен містити зображення та гіперпосилання.

0.00 на основі 0 рейтингів

5 зірок
0%
4 зірок
0%
3 зірок
0%
2 зірок
0%
1 зірок
0%