МЕТОДИЧНА РОЗРОБКА УРОКУ

“Вставка зображень та гіперпосилань на сайті”

Автор: Удодова

Олена Сергіївна

викладач інформатики,

спецдисциплін

2021

План уроку

Тема: Вставка зображень та гіперпосилань на сайті

Мета:

• вивчити основні принципи розміщення та вирівнювання зображень на веб-сторінках, розглянути тег <IMG>  та його атрибути;
• формувати практичні навички додавання графічних об’єктів до веб-сторінок та їх розміщення;
• формувати навички створення гіперпосилань між HTML-документами та в межах одного HTML-документа;
• виховувати самостійність, наполегливість у роботі; інформаційну культуру.

Тип уроку: комбінований.

Обладнання: комп’ютери; план-опора; презентація; свиток із завданням.

Хід уроку

1. Організаційний етап (1 хв)
2. Перевірка домашнього завдання (3 хв.)
3. Мотивація навчальної діяльності учнів. (1 хв.)
4.         Актуалізація опорних знань (5 хв)
5. Засвоєння нових знань (15 хв)
6. Закріплення знань (15 хв)
7.      Підведення підсумків (4 хв)
8.   Домашнє завдання (1 хв.)

I.            Організаційний етап

 Перевірка присутніх учнів

 Емоційне налаштування учнів до уроку

Шановні! Я рада Вас вітати на сьогоднішньому уроці. Хочу побажати Вам рішучості, терпіння, наполегливості та творчого натхнення! Нехай сьогоднішній урок буде для Вас не лише цікавим, але й дуже корисним. 

II.            Перевірка домашнього завдання

 Однак, перед тим як розпочати урок з нової теми ми з Вами перевіримо Ваше домашнє завдання. Для цього спочатку необхідно Вам розділитись на 5 команд. Кожна команда отримує завдання з тестовими питаннями (додаток 1). Задача команди: за певний проміжок часу (3 хв.) відповісти на запитання.

Робота має бути спланована колективно, командою. Кожен член команди несе відповідальність за стан команди в цілому. 

III.            Мотивація навчальної діяльності учнів

Графічні зображення відіграють важливу роль в оформленні веб-документів. Включення їх у  HTML- документи дозволяє:

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

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

IV.            Актуалізація опорних знань

Як на Вашу думку: «Чим відрізняється HTML- документ від звичайних текстових документів?»

 Можлива відповідь: «Існуванням в ньому зв’язків з іншими файлами».

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

 Отже, саме сьогоднішній урок буде присвячений тегам <IMG> та

<A HREF>.  А темою нашого уроку є: «Вставка зображень та гіперпосилань на сайті».

План уроку (для учнів):

1. Міні-лекція.
2. Виконання практичної роботи.
3. Звіт про результати.
4. Підведення підсумків.

V.            Засвоєння нових знань

Міні-лекція

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

 <IMG SRC="flag.jpg">

 Де «flag.jpg» - це власне картинка-об’єкт з її іменем і розширенням.

Уся інформація, розташована між лапками є посиланням (тобто, шляхом до картинки).

 При вставці картинки з іншої папки необхідно прописати тегами наступне:

 <IMG SRC="../images/flag.jpg">

 Якщо картинка розміщена на іншому сайті, то шлях прописується повністю: <IMG SRC="http://www.vasya.ru/img/flag.jpg">

Вирівнювання зображень в документі

 Після вставки картинки потрібно зробити так, щоб увесь текст розташовувався поруч із нею. А для цього використовується атрибут  «ALIGN», який відповідає за вирівнювання і використовується з багатьма іншими тегами.

 Наприклад, <IMG SRC="flag.jpg" ALIGN="left"> - тут картинка буде притиснута до лівого краю екрана, а текст буде обтікати її праворуч.

 Для розміщення картинки:

• праворуч, а тексту - ліворуч, треба прописати «Right»;
• внизу картинки - <img src="image.jpg" align="bottom">;
• посередині - <img src="image.jpg" align="middle">;
• вгорі - <img src="image.jpg" align="top">

Задання відступу

 Крім параметра «ALIGN» для тега < img > є ще кілька атрибутів:

VSPACE - визначає відстань між текстом і малюнком по вертикалі; задається в пікселях.

Наприклад: <img src="net.jpg" vspace="10">, де 10 – це кількість пікселів екрана монітора.

HSPACE - задає відстань між текстом і малюнком по горизонталі. Відстань задається теж у пікселях.

Наприклад: <img src=" net.jpg" hspace="10">.

Інші параметри

ALT - короткий опис картинки. 

BORDER – задає в пікселях товщину рамки навколо картинки. <img src=" net.jpg" border="4">

WIDTH - ширина самої картинки в пікселях. Якщо ширину не задавати, то вона буде дорівнювати реальній ширині картинки.

HEIGHT - висота самої картинки в пікселях. Якщо висоту не задавати, то вона буде дорівнювати реальній висоті картинки.

Створення гіперпосилань

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

 На цільовій веб-сторінці задається точка призначення посилання, що відповідає як конкретному HTML – елементу (тексту, малюнку, аудіо- або відео кліпу), так і документу в цілому.

 Відправна точка посилання задається тегом <A>. Елемент А називається елементом прив’язки або якірним елементом.

 Всередині тегу <A> ставиться обов’язковий атрибут href, за допомогою якого визначається точка призначення посилання (цільовий ресурс). Між тегами  <A> і </A> розміщується текст посилання або елемент малюнка.

Створення відносного гіперпосилання

<A href =“ind1.html”> друзі </A>

 При натисненні кнопкою миші на даному гіперпосиланню буде завантажуватися HTML- файл ind1.html

 При посиланні на ресурс, розміщений у WWW, в атрибуті  href  вказується URL цього ресурсу: 

<A href=“http://www.samsung.com”> телефони фірми  Samsung </A>

Створення внутрішнього посилання (замість атрибута href використовується атрибут name):

<A HREF=“#глав1”> <H2> Моє навчання </A> </H2>

....... (текстова частина) ……

<A NAME=“глав1”><H1><b><i>Моє навчання </A><BR>

 Увага!!!: При створенні гіперпосилання в межах свого комп’ютера, краще за все розмістити файли, на які ви посилаєтесь, в каталозі з вихідним документом

 Виступ вчителя більш детально наведено в презентації – додаток 2.

 Вчитель: Ось ми і попрацювали над теорією. А тепер пора перейти нам до практики.

VI.            Закріплення знань

 Фронтальна бесіда.

Повторення правил роботи в кабінеті інформатики:

1. Які дії Ви застосуєте при виникненні запаху горілого?
2. Вкажіть основні вимоги під час роботи з ПК.
3. Перерахуйте, які дії необхідно виконати перед початком роботи в кабінеті інформатики.
4. Перерахуйте, яких правил необхідно дотримуватись під час роботи з ПК.
5. Що потрібно виконати після завершення роботи?
6. Яких загальних вимог потрібно дотримуватись в кабінеті інформатики?

 Виконання практичної роботи.

 Практична робота. Вставка графічних зображень та створення гіперпосилань на веб-сторінці

 Завданнями практичної роботи є:

1. до відповідного шаблону веб-сторінки, де розміщена текстова інформація (резюме) кожного учня про себе, необхідно додати малюнки (наприклад, своє фото, хобі, фото друзів, рідних тощо) з різними видами розміщення, відповідно до змісту тексту. Зберегти сторінку під ім’ям index.html 
2. На головній сторінці створеного Вами резюме, що зберегли під ім’ям index.html систематизуйте поданий вами текст за темами і утворіть внутрішні посилання за зразком:

<h2>Тематика</h2>

<A href=”#глав1”> тема 1. Про мене</A>

<A href=”#глав2”> тема 2. Моя сім’я</A>

<A href=”#глав1”> тема 3. Моє навчання</A>

<A href=”#глав1”> тема 4. Мої друзі</A>

<h2><A name=”глав1”> тема 1. Про мене </A></h2>

( розташуйте інформацію  про те скільки вам років, коли і де ви народилися, про місто в якому ви живете)

<h2><A name=”глав1”> тема 2. Моя сім’я </A></h2>

( інформація про сім’ю)

<h2><A name=”глав1”> тема 3. Моє навчання</A></h2>

( інформація про навчання)

<h2><A name=”глав1”> тема 4. Мої друзі</A></h2>

( все про друзів)

3. перегляньте виконану роботу;
4. перевірте роботу посилань.
5. підготуйте свій сайт для захисту (демонстрація результатів).

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

VII.            Підведення підсумків

 Ми завершили роботу по створенню найпростішого веб-сайту з елементами додання та розміщення графічних зображень та гіперпосилань.

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

 Капітани команд підходять до викладача й тягнуть із скриньки свиток із завданням (додаток 3).

 Завданням кожної команди буде протягом певного проміжку часу (3 хв.) уважно переглянути записаний HTML-код, знайти та виправити помилки.

VIII.            Домашнє завдання

 Робота над проектом: створення фрейму-стовпчики з обраної теми за схемою: ліва частина – зміст з гіперпосиланням, права частина – відображення малюнку.

Додаток 1