Календар

Опитування

Оцініть роботу двигуна

Понеділок

жов 28

Урок 4. Посилання та навігація — абсолютні та відносні посилання, атрибути target і title

Name: Урок 4. Посилання та навігація — абсолютні та відносні посилання, атрибути target і title
Author: admin

admin

Адміністратор

Уроки HTML 23 0

План уроку: Посилання та навігація — абсолютні та відносні посилання, атрибути target і title (25-30 хвилин)

1. Вступ: Про що цей урок (2-3 хвилини)

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

2. Що таке посилання в HTML (5 хвилин)

Ціль: Ознайомити учнів із базовим тегом для створення посилань у HTML.
Тег <a> (anchor):
- Тег <a> використовується для створення гіперпосилань.
- Обов’язковий атрибут — href, який вказує, куди веде посилання.
- Приклад:
```
<a href="https://example.com">Відвідайте наш сайт</a>
```
Структура:
- Тег <a> огортає текст або інший елемент, який стане посиланням.
- При натисканні на текст або елемент користувач переходить на вказану адресу в атрибуті href.

3. Абсолютні та відносні посилання (10 хвилин)

Ціль: Пояснити різницю між абсолютними та відносними посиланнями.

Абсолютні посилання:

Абсолютні посилання вказують повну адресу ресурсу, включно з протоколом (http:// або https://), доменом та шляхом до ресурсу.
Використовуються для посилань на зовнішні ресурси (інші сайти).

Приклад:

<a href="https://example.com">Відкрити зовнішній сайт</a>

Відносні посилання:

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

Приклад:

<a href="about.html">Дізнатися більше про нас</a>

Це посилання відкриє сторінку about.html на тому ж сайті.

Посилання на інші частини тієї ж сторінки:

Ви також можете створювати посилання на певні елементи всередині сторінки за допомогою ідентифікаторів (атрибут id).

Приклад:

<a href="#section1">Перейти до секції 1</a>

<section id="section1">
  <h2>Секція 1</h2>
  <p>Тут починається секція 1.</p>
</section>

4. Атрибути target і title (10 хвилин)

Ціль: Ознайомити учнів із атрибутами, які роблять навігацію зручнішою та зрозумілішою.

Атрибут `target`:

Використовується для визначення, де відкриється посилання.
Основні значення:
- _blank — відкриває посилання в новій вкладці або вікні.
- _self — відкриває посилання в поточній вкладці (це значення за замовчуванням).

Приклад:

<a href="https://example.com" target="_blank">Відкрити в новій вкладці</a>

Атрибут `title`:

Додає підказку, яка з'являється при наведенні на посилання. Це корисно для пояснення додаткової інформації або контексту.

Приклад:

<a href="https://example.com" title="Це зовнішній сайт">Відвідайте наш сайт</a>

5. Практика (10 хвилин)

Ціль: Закріпити навички створення різних типів посилань із використанням атрибутів.
Завдання:
- Створити вебсторінку з різними типами посилань: абсолютні, відносні, посилання на елементи сторінки.
- Додати посилання з атрибутом target="_blank" для відкриття в новій вкладці.
- Додати до кожного посилання атрибут title, який пояснюватиме зміст посилання.

Приклад завдання:

Показати / Приховати текст

<!DOCTYPE html>
<html>
<head>
  <title>Моя сторінка з посиланнями</title>
</head>
<body>
  <h1>Ласкаво просимо на мою сторінку</h1>
  
  <p>Перейдіть на <a href="https://example.com" target="_blank" title="Зовнішній сайт">цей сайт</a>, щоб дізнатися більше.</p>
  
  <p>А ось посилання на <a href="about.html" title="Сторінка про нас">сторінку про нас</a> на цьому ж сайті.</p>
  
  <p><a href="#section1" title="Перехід до секції 1">Перейти до секції 1</a></p>
  
  <section id="section1">
    <h2>Секція 1</h2>
    <p>Це перша секція на сторінці.</p>
  </section>
</body>
</html>

Обговорення:
- Запропонувати учням спробувати відкривати посилання в нових вкладках і використовувати підказки, щоб зробити їх сторінки зручнішими для користувачів.

6. Підсумок і запитання (5 хвилин)

Ціль: Закріпити розуміння різних типів посилань та їх атрибутів.
Що повторити:
- Чим відрізняються абсолютні та відносні посилання.
- Як використовувати атрибути target і title.
Запитання:
- Що таке абсолютне посилання?
- Як створити посилання, що відкривається в новій вкладці?
- Чому варто використовувати атрибут title?

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

Створити вебсторінку з кількома абсолютними та відносними посиланнями. Для кожного посилання використати атрибути target і title, де це потрібно.

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

<< Урок 3. Форматування тексту — теги для виділення тексту (b, i, strong, em), блокові та інлайн елементи

Урок 5. Робота з зображеннями — тег img, атрибути, альтернативний текст >>

Дивіться також:

« Квітень 2025 »
Пн	Вт	Ср	Чт	Пт	Сб	Нд
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

Календар

Хмарина тегів

Опитування

жов 28

Урок 4. Посилання та навігація — абсолютні та відносні посилання, атрибути target і title

admin

План уроку: Посилання та навігація — абсолютні та відносні посилання, атрибути target і title (25-30 хвилин)

1. Вступ: Про що цей урок (2-3 хвилини)

2. Що таке посилання в HTML (5 хвилин)

3. Абсолютні та відносні посилання (10 хвилин)

Абсолютні посилання:

Відносні посилання:

Посилання на інші частини тієї ж сторінки:

4. Атрибути target і title (10 хвилин)

Атрибут `target`:

Атрибут `title`:

5. Практика (10 хвилин)

6. Підсумок і запитання (5 хвилин)

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

Дивіться також:

Урок 6. Flexbox (частина 1): Основи flexbox, вирівнювання елементів по осі

Урок 6. Мультимедіа: Відео та аудіо на сторінці, атрибути autoplay, controls

Урок 3. Форматування тексту — теги для виділення тексту (b, i, strong, em), блокові та інлайн елементи

Урок 8. Таблиці: Створення таблиць, атрибути table, tr, td, thead, tbody

Урок 2. Селектори та властивості: Основні селектори (по тегу, класу, ідентифікатору)

Урок 3. Робота з кольорами: Hex, RGB, RGBA, і CSS-змінні для кольорів

Коментарі (0)

Календар

Хмарина тегів

Опитування

жов 28

Урок 4. Посилання та навігація — абсолютні та відносні посилання, атрибути target і title

admin

План уроку: Посилання та навігація — абсолютні та відносні посилання, атрибути target і title (25-30 хвилин)

1. Вступ: Про що цей урок (2-3 хвилини)

2. Що таке посилання в HTML (5 хвилин)

3. Абсолютні та відносні посилання (10 хвилин)

Абсолютні посилання:

Відносні посилання:

Посилання на інші частини тієї ж сторінки:

4. Атрибути target і title (10 хвилин)

Атрибут target:

Атрибут title:

5. Практика (10 хвилин)

6. Підсумок і запитання (5 хвилин)

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

Дивіться також:

Урок 6. Flexbox (частина 1): Основи flexbox, вирівнювання елементів по осі

Урок 6. Мультимедіа: Відео та аудіо на сторінці, атрибути autoplay, controls

Урок 3. Форматування тексту — теги для виділення тексту (b, i, strong, em), блокові та інлайн елементи

Урок 8. Таблиці: Створення таблиць, атрибути table, tr, td, thead, tbody

Урок 2. Селектори та властивості: Основні селектори (по тегу, класу, ідентифікатору)

Урок 3. Робота з кольорами: Hex, RGB, RGBA, і CSS-змінні для кольорів

Коментарі (0)

Атрибут `target`:

Атрибут `title`: