16 урок

Презентація Веб-технології Урок 15.pptx

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

Веб-посилання - це те ж саме, що html-посилання або гіпертекстове посилання. Якщо клацнути на веб-посилання лівою кнопкою "мишки", щось обов'язково відбудеться:

перехід з однієї веб-сторінки на іншу,
перехід у якусь частину веб-сторінки,
створюється лист (запускається Скайп, робиться телефонний дзвінок),
скачується файл,
запускається програма (з цим - обережно, щоб не запустити "вірус"!).

Натисність ТУТ, щоб перейти до ЗАВДАНЬ!

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

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

Створення веб-посилання:

<a></a>

Це парний тег, який був утворений з англійського слова "anchor" (читається "'анке") - якір. Між тегами пишеться слово (слова, речення, тег для розміщення малюнка), на яке потрібно клікнути "мишкою".

<a>Слова, речення, тег для розміщення малюнка), на яке потрібно клікнути "мишкою"</a>

Обов'язковий атрибут:

href="адреса веб-сторінки, на яку потрібно перейти"

Веб-посилання на сторінку сайту (або на файл на комп'ютері):

<a href=″адреса веб-сторінки, на яку потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>

<a href=″шлях і назва файлу на комп'ютері, на який потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>

Наприклад:

Різні варіанти запису:

Веб-посилання у вигляді малюнка:

Приклад:

Веб-посилання, яке запускає

- надсилання електронного листа: <a href="mailto:elenaburd@it-shkola.in.ua">Написати листа</a>

- телефонний дзвінок: <a href="tel:+380677777777">+38 067 777 77 77</a>

- запускає Скайп: <a href="skype:elenaburd?call">Skype</a>

Веб-посилання, яке запускає скачування файла:

- скачування картинки

<a href="http://it-shkola.in.ua/images/html_lessons/1.jpg" download>Старт скачування картинки Лев <img src="http://it-shkola.in.ua/images/html_lessons/1.jpg" width="50px"></a>

Результат: Старт скачування картинки Лев

- скачування підручника з html

<a href=″http://it-shkola.in.ua/images/html_lessons/konspekt-html-anchor.doc" download>Старт скачування конспекта "Урок html-посилання"</a>

Результат: Старт скачування підручника

Веб-посилання можна використати для того, щоб створити зміст для великого тексту, який поділений на кілька розділів. Для цього потрібно зробити два кроки:

1) перед початком кожного розділу написати тег

Між тегами нічого писати не потрібно.

Наприклад:

2) щоб створити у змісті перехід на розділ тексту (або, наприклад, перейти на початок або в кінець сторінки), потрібно використати тег

<a href="#слово - спеціальне ім'я для даного розділу англійськими літерами">Слово для переходу</a>

Наприклад:

<a href="#top">На початок</p>

Результат: На початок

Завдання 1.

Спочатку у робочій папці зберегти файли: http://it-shkola.in.ua/images/html_lessons/part1.html , http://it-shkola.in.ua/images/html_lessons/part2.html , http://it-shkola.in.ua/images/html_lessons/img-1.jpg

1. Створити і зберегти веб-файл з іменем index.html

2. Набрати такий код:

<!DOCTYPE HTML>

<html>

<head>

<title>Кінофільм Джуманджі</title>

</head>

<h1 align="center">Кінофільм Джуманджі 1 і 2</h1>

<p align="center"><a href=″part1.html" target="_blank">Джуманджі: Поклик джунглів. Частина1. Рік виходу - 1995.</a></p>

<p align="center"><a href=″part2.html" target="_blank">Джуманджі: Поклик джунглів. Частина 2. Рік виходу - 2017.</a></p>

</body>

</html>

4. Подивитись у Хром, що вийшло.

Результат:

Page updated

Google Sites

Report abuse