Назад Вперед Зміст

Закладки

При кліку на гіперпосилання, яке посилається на закладку, документ буде прокручений таким чином, щоб адресований елемент знаходився у верхній частині вікна.

Елемент з ім'ям може знаходитись як перед посиланням на нього, так і після. На один і той самий елемент може бути кілька посилань.

Щоб створити закладку потрібно:

  1. Присвоїти ім'я елементу, на який буде виконуватись перехід. Для цього в тезі елемента потрібно вказати атрибут id="ім'я".
  2. Вибрати текст посилання і створити посилання на іменований елемент (тег а), вказавши в атрибуті href знак # та ім'я елемента, на який ми хочемо перейти.

Приклад

Покажемо, як на сторінці організувати кілька закладок.

На початку документа три гіперпосилання на різні частини документа і в кінці посилання на початок документа.

Відображення у браузері:

Найпопулярніші служби

Служба передачі гіпертексту

Ця служба, заснована на протоколі HTTP, використовується у 99% посилань.

http://www.microsoft.com/ukraine/defaulte.htm

Служба передачі файлів

Протокол FTP дозволяє працювати з файлами та папками на віддаленому вузлі так само, як і на звичайному локальному комп'ютері.

ftp://ftp.microsoft.com/welcome.txt

Зазвичай до імені машини, яка підтримує службу передачі файлів, додають "ftp".

Служба груп новин

Групи новин є зручним середовищем для спілкування.

news://msmews.microsoft.com/microsoft.public.webdesign.html

На початок ↑

Наприклад, якщо клікнути на другому посиланні (служба передачі файлів), то сторінка буде прокручена так:

Якщо клікнути на посиланні «На початок», то сторінка буде прокручена так:

Для перевірки потрібно зробити вікно документа невеликим. Оскільки, якщо вікно буде таким, що видно весь документ, то сторінка не буде прокручуватись.

Порядок створення закладок:

  1. Спочатку надрукуємо документ у блокноті без імен та посилань. На початку документа меню, в кінці текст «На початок». Ці елементи розмічені як абзаци, тегом р. Їх можна оформити і як заголовки будь-якого рівня
  2. Потім розставимо мітки в елементах, на які буде виконуватись перехід:
  3. Вставимо теги посилань (а) у меню і в кінці сторінки, там, де будуть посилання. Як значення атрибута href вкажемо # та ім'я елемента, на який потрібно перейти. Тег посилання обов'язково потрібно закрити. 
    
<!DOCTYPE html>
<html lang="uk">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Найпопулярніші служби Інтернету</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        h2 {
            color: #3498db;
            border-bottom: 1px solid #eee;
            padding-bottom: 5px;
        }
        a {
            color: #2980b9;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        .back-to-top {
            display: block;
            text-align: right;
            margin-top: 20px;
            font-style: italic;
        }
    </style>
</head>
<body>
    <h1 id="mymenu">Найпопулярніші служби</h1>
    
    <ul>
        <li><a href="#name1">Служба передачі гіпертексту</a></li>
        <li><a href="#name2">Служба передачі файлів</a></li>
        <li><a href="#name3">Служба груп новин</a></li>
    </ul>

    <h2 id="name1">Служба передачі гіпертексту</h2>
    
    <p>Ця служба, заснована на протоколі HTTP, використовується у 99% посилань.</p>
    
    <p><a href="http://www.microsoft.com/ukraine/defaulte.htm">http://www.microsoft.com/ukraine/defaulte.htm</a></p>

    <h2 id="name2">Служба передачі файлів</h2>
    
    <p>Протокол FTP дозволяє працювати з файлами та папками на віддаленому вузлі так само, як і на звичайному локальному комп'ютері.</p>
    
    <p><a href="ftp://ftp.microsoft.com/welcome.txt">ftp://ftp.microsoft.com/welcome.txt</a></p>
    
    <p>Зазвичай до імені машини, яка підтримує службу передачі файлів, додають "ftp".</p>

    <h2 id="name3">Служба груп новин</h2>
    
    <p>Групи новин є зручним середовищем для спілкування.</p>
    
    <p><a href="news://msmews.microsoft.com/microsoft.public.webdesign.html">news://msmews.microsoft.com/microsoft.public.webdesign.html</a></p>

    <a href="#mymenu" class="back-to-top">На початок</a>
</body>
</html>

Назад Вперед Зміст