Урок 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Б).
За кожне виконане завдання учень отримуватиме додаткові бали, які після відновлення навчання буде переведено в оцінки!
Якщо у вас немає можливості працювати за ПК, дайте відповіді на запитання:
- Які атрибути використовують для вставлення зображень та гіперпосилань у HTML (наведіть приклади)?
- Запишіть у зошит коротенький приклад HTML сторінки. Приклад повинен містити зображення та гіперпосилання.
-
Кодування даних
-
Апаратне забезпечення комп'ютера
-
Опрацювання текстових даних
- Урок 7. Повторення раніше вивченого матеріалу з теми “Текстовий процесор”
- Урок 8. Пошук та заміна фрагментів тексту. Створення, редагування та форматування символів, колонок, списків в текстовому документі. Недруковані знаки.
- Урок 9. Створення, редагування та форматування таблиць.
- Урок 10. Створення, редагування та форматування графічних об’єктів в текстовому документі.
- Урок 12. Практична робота №3. Створення текстового документа, що містить об’єкти різних типів.
- Урок 14. Автоматизоване створення змісту.
- Урок 15. Практична робота №4. Форматування документу. Створення титульної сторінки. Автоматизоване створення змісту.
-
Алгоритми та програми. Основи подвійно- та об'єктно-орієнтованого програмування
- Урок 13. Поняття мови програмування. Складові мови програмування.
- Урок 14. Знайомство з середовищем програмування.
- Урок 15. Поняття події, обробника події.
- Урок 16. Практична робота №5. Створення об’єктно-орієнтованої програми, що відображає вікно повідомлення.
- Урок 17. Елемент керування “кнопка”.
- Урок 18. Елемент керування “напис”.
- Урок 19. Складання програм, що обробляють натискання кнопок та визначають вміст написів на формі.
- Урок 20. Практична робота №6. Створення програми з кнопками та написами.
-
Алгоритми роботи з об'єктами та величинами
- Урок 21. Поле його властивості (Python)
- Урок 22. Величини (змінні і константи), їхні властивості. (Python)
- Урок 23. (Python) Практична робота №7. Складання та виконання лінійних алгоритмів опрацювання величин в навчальному середовищі програмування.
- Урок 24. Налагодження програм. (Python)
- Урок 25. Використання налагоджувача програм у візуальному середовищі програмування. Покрокове виконання програм, перегляд значень змінних під час виконання програми. (Python)
- Урок 26. Величини логічного типу, операції над ними.
- Урок 27. Алгоритми з розгалуженнями для опрацювання величин. (Python)
- Урок 28. Алгоритми з розгалуженнями для опрацювання величин. (Python)
- Урок 29 (Python). Складені умови. Пошук найбільшого та найменшого серед кількох значень.
- Урок 30. (Python) Інструктаж з БЖД. Практична робота 9. Складання та виконання алгоритмів з розгалуженнями для опрацювання величин.
- Урок 31. (Python) Елементи для введення даних: прапорець.
- Урок 32. (Python) Елементи для введення даних: перемикач.
- Урок 33. (Python) Алгоритми з повтореннями для опрацювання величин. Цикл з лічильником.
- Урок 34. (Python) Цикл з передумовою. Складання алгоритмів опрацювання величин у навчальному середовищі програмування, їх налагодження і виконання.
- Урок 35. (Python) Співвідношення типів даних та елементів для введення даних, зчитування даних з елементів введення.
- Урок 36. (Python) Розв’язання задач
- Урок 37. (Python) Практична робота №9. Складання та виконання алгоритмів з повтореннями та розгалуженнями для опрацювання величин.
- Урок 38 (Python). Повторення вивченого матеріалу.
- Урок 21. Поле, його властивості.
- Урок 22. Величини (змінні і константи), їхні властивості.
- Урок 23. Практична робота №7. Складання та виконання лінійних алгоритмів опрацювання величин в навчальному середовищі програмування.
- Урок 24. Налагодження програм.
- Урок 25. Використання налагоджувача програм у візуальному середовищі програмування. Покрокове виконання програм, перегляд значень змінних під час виконання програми.
- Урок 28. Алгоритми з розгалуженнями для опрацювання величин.
- Урок 30. Складені умови. Пошук найбільшого та найменшого серед кількох значень.
- Урок 30. Елементи для введення даних: перемикачі, прапорці.
- Урок 31. Елементи для введення даних: випадаючі списки.
- Урок 32. Алгоритми з повтореннями для опрацювання величин. Цикл з лічильником.
- Урок 33. Цикл з передумовою. Складання алгоритмів опрацювання величин у навчальному середовищі програмування, їх налагодження і виконання.
- Урок 36. Практична робота №9. Складання та виконання алгоритмів з повтореннями та розголуженнями для опрацювання величин.
- Урок 37. Відображення базових графічних примітивів. Відображення рисунків із зовнішніх файлів.
- Урок 38. Практична робота №10. Складання та виконання алгоритмів з графічним відобреженням даних.
-
Опрацювання мультимедійних об’єктів
- Урок 39. Поняття мультимедіа. Формати аудіо- та відеофайлів.
- Урок 40. Додавання відеокліпів, звукових ефектів і мовного супроводу до слайдової презентації.
- Урок 41. Елементи анімації. Інструктаж з БЖД. Практична робота 11. Розробка презентацій з елементами анімації, відеокліпами, звуковими ефектами та мовним супроводом.
- Урок 42. Програмне забезпечення для опрацювання об’єктів мультимедіа. Захоплення аудіо та відео, створення аудіо-, відео фрагментів. Засоби перетворення аудіо- та відеоформатів.
- Урок 43. Програми для редагування аудіо- та відеоданих. Загальні поняття про відеофільм.
- Урок 44. Побудова аудіо- та відеоряду. Додавання до відеокліпу відеоефектів та налаштування переходів між його фрагментами.
- Урок 45. Налаштування часових параметрів аудіо- та відеоряду. Інструктаж з БЖД. Практична робота 12. Створення відеокліпу. Додавання відеоефектів, налаштування часових параметрів аудіо- та відеоряду.
- Урок 46.Сервіси розміщення аудіо та відео файлів в Інтернеті.
- Урок 47. Інструктаж з БЖД. Практична робота 13. Розміщення аудіо- та відеоматеріалів в Інтернеті.
- Урок 48. Підсумковий урок з теми: «Опрацювання мультимедійних об’єктів»
-
Створення та публікація веб-ресурсів
Створення та публікація веб-ресурсів
- Урок 49. Структура веб-сайтів, різновиди веб-сайтів. Різновиди веб-сторінок. Етапи створення веб-сайтів. Основи веб-дизайну
- Уроу 50. Основи веб-дизайну
- Урок 51. Поняття про засоби автоматизованої розробки веб-сайтів, редактор веб-сайтів з графічним інтерфейсом
- Урок 52. Поняття про систему керування вмістом сайту. Поняття хостингу. Автоматизоване створення статичної веб-сторінки, вибір її типу й оформлення.
- Урок 53. Наповнення веб-сторінки текстом та графічним матеріалом, створення гіперпосилань, завантаження файлів
- Урок 54. Інструктаж з БЖД. Практична робота №14. Автоматизоване створення веб-сайту
- Уроки 55-56. Поняття про мову розмітки HTML. Структура веб-сторінки. Оформлення тексту. Текстові елементи веб-сторінки, теги та їх атрибути.
- Урок 57. Інструктаж з БЖД. Практична робота 15. “Створення веб-сторінки за допомогою «Мови гіпертекстової розмітки»
- Урок 58. Малюнки. Гіперпосилання
- Урок 59-60. Таблиці на веб-сторінках. Списки на веб-сторінках
- Урок 61. Інструктаж з техніки безпеки. Практична робота 16 «Створення веб-сторінки за зразком з використанням таблиць, списків та малюнків»
0.00 на основі 0 рейтингів