- Головна
- Уроки HTML
- Урок "html-посилання"
Урок "html-посилання"
Веб-посилання (html-посилання) - спеціальний тег, через який можна перейти з однієї веб-сторінки на іншу. Крім того, він дає можливість створити зміст сторінки. Як це робиться та кілька інших секретів - у статті...
Веб-посилання - це те ж саме, що html-посилання або гіпертекстове посилання. Якщо клацнути на веб-посилання лівою кнопкою "мишки", щось обов'язково відбудеться:
- перехід з однієї веб-сторінки на іншу,
- перехід у якусь частину веб-сторінки,
- створюється лист (запускається Скайп, робиться телефонний дзвінок),
- скачується файл,
- запускається програма (з цим - обережно, щоб не запустити "вірус"!).
Натисність ТУТ, щоб перейти до ЗАВДАНЬ!
Веб-посиланням може бути одне слово, кілька слів, ціле речення або навіть абзац, малюнок, частина малюнку. Як впізнати його на сторінці:
- слово-посилання має синій колір і внизу - підкреслене лінією (налаштуванням за замовчуванням);
- якщо підвести до слова-посилання або малюнка вказівник "мишки", він змінює вигляд - стрілочка перетворюється на руку з вказівним пальцем;
- слово-посилання на сторінку, де Ви вже були, змінює колір з синього на фіолетовий (за замовчуванням).
Створення веб-посилання:
<a></a>
Це парний тег, який був утворений з англійського слова "anchor" (читається "'анке") - якір. Між тегами пишеться слово (слова, речення, тег для розміщення малюнка), на яке потрібно клікнути "мишкою".
<a>Слова, речення, тег для розміщення малюнка), на яке потрібно клікнути "мишкою"</a>
Обов'язковий атрибут:
href="адреса веб-сторінки, на яку потрібно перейти"
Веб-посилання на сторінку сайту (або на файл на комп'ютері):
<a href=″адреса веб-сторінки, на яку потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>
<a href=″шлях і назва файлу на комп'ютері, на який потрібно перейти">Слово, речення, тег для розміщення малюнка, на яке потрібно клікнути "мишкою"</a>
Наприклад:
Різні варіанти запису:
Веб-посилання у вигляді малюнка:
<a href=″https://uk.wikipedia.org/wiki/Лев"><img src="http://it-shkola.in.ua/images/html_lessons/1.jpg" width="200px"></a>
Приклад:
- надсилання електронного листа: <a href="mailto:Ця електронна адреса захищена від спам-ботів. Вам потрібно увімкнути JavaScript, щоб побачити її.">Написати листа</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>
Результат: Старт скачування підручника
Атрибути:
| alt | альтернативна назва | <a href="http://it-shkola.in.ua/uroky-html" alt="уроки html">Уроки HTML на сайті http://it-shkola.in.ua/</a> | обов'язковий, потрібен для пошукових систем |
| download | скачування файлу | <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> | за потреби |
| href | адреса для переходу | <a href="http://it-shkola.in.ua/uroky-html" alt="уроки html">Уроки HTML на сайті http://it-shkola.in.ua/</a> | обов'язковий |
| hreflang | вказує мову сторінки (українська uk, російська ru, англійська en, інші - див. тут) | <a href="http://it-shkola.in.ua/uroky-html" alt="уроки html" hreflang="uk">Уроки HTML на сайті http://it-shkola.in.ua/</a> | за потреби |
| media |
вказує, для яких медіа-пристроїв буде оптимізований файл, зокрема: media="all|braille|handheld|print|screen|speech|projection|tty|tv" |
за потреби | |
| rel |
вказує на відношення нової сторінки до попередньої, наприклад: rel="author" - сторінка автора rel="prev" - попередня сторінка rel="next" - наступна сторінка rel="tag" - ключове слово rel="nofollow" - забороняє пошуковій системі переходити за посилання інше - див. тут |
за потреби | |
| target |
вказує, сторінку відкривати у нову вікні (вкладці) броузера, чи не відкривати, значення: _blank - сторінка відкривається у новому вікні _self - сторінка відкривається у тому ж вікні _parent - сторінка відкривається у батьківський фрейм _top - сторінка завантажується у повністю відкрите вікно броузера |
<a href="http://it-shkola.in.ua/uroky-html" target="_blank">Уроки HTML на сайті http://it-shkola.in.ua/ - відкривається у новому вікні</a> <a href="http://it-shkola.in.ua/uroky-html" target="_self">Уроки HTML на сайті http://it-shkola.in.ua/ - відкривається у цьому ж вікні</a> |
за потреби, але корисний для відвідувачів сайту |
| type | вказує MIME-тип файлу, див. тут | за потреби |
Веб-посилання можна використати для того, щоб створити зміст для великого тексту, який поділений на кілька розділів. Для цього потрібно зробити два кроки:
1) перед початком кожного розділу написати тег
<a name="слово - спеціальне ім'я для даного розділу англійськими літерами"></a>
Між тегами нічого писати не потрібно.
Наприклад:
<a name="rozdil1"></a>
<a name="rozdil2"></a>
2) щоб створити у змісті перехід на розділ тексту (або, наприклад, перейти на початок або в кінець сторінки), потрібно використати тег
<a href="#слово - спеціальне ім'я для даного розділу англійськими літерами">Слово для переходу</a>
Наприклад:
<a href="#top">На початок</p> <!-- перед цим на початку даної веб-сторінки було написано тег <a name="top"></a> -->
Результат: На початок
Завдання 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>
<body bgcolor="green">
<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. Подивитись у Хром, що вийшло.
Результат:
Завдання 2.
У робочій папці створити папку image і зберегти у ній файл http://it-shkola.in.ua/images/html_lessons/img-1.jpg
1. Створити і зберегти веб-файл з іменем index2.html
2. Набрати такий код - основу веб-сторінки:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
3. Вказати фон сторінки - зелений (атрибут bgcolor="green")
4. Між тегами <title></title> вказати заголовок сторінки Кінофільми Джуманджі.
5. Між тегами <h1></h1> вказати заголовок першого рівня Кінофільм Джуманджі 1 і 2 , вирівняти його по центру (атрибут align="center")
6. Тегом <img> вставити зображення img-1.jpg (<img src=″image/img-1.jpg">), вирівняти його по центру (тег зображення вставити між тегами <p align="center"></p>)
7. Вставити два посилання:
№1:
між тегами <a></a> набрати текст посилання Джуманджі: Поклик джунглів. Частина 1. Рік виходу - 1995. ,
в атрибуті href=″..." вказати адресу для переходу https://uk.wikipedia.org/wiki/Джуманджі_фільм,_1995 ,
вказати атрибут target="_parent" - відкриття нової сторінки у цьому ж вікні
№2:
між тегами <a></a> набрати текст посилання Джуманджі: Поклик джунглів. Частина 2. Рік виходу - 2017. ,
в атрибуті href=″..." вказати адресу для переходу https://uk.wikipedia.org/wiki/Джуманджі:_Поклик_джунглів,
вказати атрибут target="_parent" - відкриття нової сторінки у цьому ж вікні
8. Кожне посилання написати з нового абзацу і вирівняти по центру (<p align="center"></p>)
9. Подивитись у Хром, що вийшло.
Результат:
Завдання 3.
У робочій папці створити папку image і зберегти у ній файли http://it-shkola.in.ua/images/html_lessons/img-1.jpg, http://it-shkola.in.ua/images/html_lessons/img-2.jpg, http://it-shkola.in.ua/images/html_lessons/img-3.png (якщо папка вже, то зберегти у неї вказані файли)
Зберегти на комп'ютер у робочу папку текстовий файл http://it-shkola.in.ua/images/html_lessons/tekst-pad.txt
1. Створити і зберегти веб-файл з іменем index3.html
2. Набрати код - основу веб-сторінки.
3. Вказати заголовок сторінки Кінофільми Джуманджі.
4. Вказати фон сторінки green
5. Вказати шрифт Comic Sans MS , розмір 4
6. Створити перший абзац, вирівняти його по центру. Скопіювати і вставити перший абзац з файлу tekst.txt
7. Для слів Кінофільм Джуманджі 1 і 2 вказати такі налаштування: колір червоний, розмір 6.
8. Вставити зображення img-1.jpg розміром 500px, рамка товщиною 10, вказати обтікання і колір рамки стилем style="float:right;border-color:red;"
9. Після тегу першого абзацу вказати обтікання тегом <br clear="all">
10. Вставити 5 горизонтальних ліній червоного кольору товщиною 5 і шириною 40%, 60%, 100%, 60%, 40%
11. Створити другий абзац, вирівняти його по центру. Скопіювати і вставити другий абзац з файлу tekst.txt
12. Вставити зображення img-2.jpg розміром 200px, вказати обтікання стилем style="float:left;"
13. Слова див. посилання зробити посиланням на веб-сторінку https://uk.wikipedia.org/wiki/Джуманджі_фільм,_1995
14. Повторити пп. 9-10.
15. Створити третій абзац, вирівняти його по центру. Скопіювати і вставити третій абзац з файлу tekst.txt
16. Вставити зображення img-3.png розміром 200px, вказати обтікання стилем style="float:right;"
17. Слова див. посилання зробити посиланням на веб-сторінку https://uk.wikipedia.org/wiki/Джуманджі:_Поклик_джунглів
18. Повторити пп. 9-10.
19. Відразу після тегу <body> вказати посилання-якір для внутрішнього переходу з кінця файлу на початок: написати <a name="start"></a>
20. Після горизонтальних ліній п.18 вказати посилання для переходу на початок <a href="#start">На початок</a>
Результат:
Завдання 4.
У робочій папці створити папку image і зберегти у ній файли http://it-shkola.in.ua/images/html_lessons/pad0.jpg, http://it-shkola.in.ua/images/html_lessons/pad1.jpg, http://it-shkola.in.ua/images/html_lessons/pad3.jpg (якщо папка вже є, то зберегти у неї вказані файли)
Зберегти на комп'ютер у робочу папку текстовий файл http://it-shkola.in.ua/images/html_lessons/tekst-pad.txt
1. Створити і зберегти веб-файл з іменем index4.html
2. Створити веб-сторінку за картинкою-макетом (див. картинку нижче). При цьому зробити
- колір фону сторінки - DarkBlue
- вигляд літер - шрифт Comic Sans MS, розмір основного білого тексту - 4, розмір червоного тексту - 6 ,
- розмір картинки 1 - 300px;
- розмір картинки 2 і 3 - 200px;
- текст брати з файлу http://it-shkola.in.ua/images/html_lessons/tekst-pad.txt
- слова "див. посилання" - перехід на Вікіпедію
- слова "На початок" - перехід до початку сторінки
Завдання 5.
У робочій папці створити папку image і зберегти у ней ДВА файли: http://it-shkola.in.ua/images/html_lessons/but2.png і http://it-shkola.in.ua/images/html_lessons/googlelogo.png (якщо папка вже є, то зберегти у неї вказані файли)
Зберегти на комп'ютер у робочу папку текстовий файл http://it-shkola.in.ua/images/html_lessons/kod-google2.txt
1. Створити і зберегти веб-файл з іменем index5.html
2. Створити веб-сторінку за картинкою-макетом (див. картинку нижче). При цьому
- малюнок-емблему Гугл зробити посиланням на адресу http://google.com.ua , яке відкривається у новому вікні
- код сторінки для організації пошуку брати з файлу http://it-shkola.in.ua/images/html_lessons/kod-google2.txt
