Кафедра вищої математики та інформаційних технологій

ЗАТВЕРДЖУЮ

Начальник кафедри

ВМ та ІТ

к.ф-м.н., доц.,

полковник с.ц.з.

_______ І.П. Частоколенко

“___”______2013р.

Навчальна дисципліна: Інформатика та комп’ютерна техніка

1-й курс (стаціонар, курсанти).

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

на проведення практичного заняття

по темі № 2.2: «Мова розмітки гіпертекстових документів HTML»

Час: 18 годин, з них 4 години лекцій, 10 годин практичних занять, 4 години самостійної роботи.

Тема 17: Гіперпосилання та таблиці в html.

Мета заняття: вивчити теги та атрибути встановлення гіперпосилань та теги створення та оформлення таблиць.

Метод проведення: практичне заняття.

Місце проведення: ауд. № 317, ауд. № 318.

Час проведення: 2 години

Матеріально-технічне забезпечення: ПК.

Методичну розробку підготував

Викладач кафедри ВМ та ІТ А.П. Марченко

Методична розробка обговорена та схвалена на засіданні кафедри

Протокол №____від “__”________2013р.

Практичне заняття

Заняття № 17. Гіперпосилання та таблиці в HTML.

Мета роботи: вивчити теги та атрибути встановлення гіперпосилань та теги створення та оформлення таблиць.

Завдання:

1. Вивчити теоретичний матеріал.

2. Виконати навчальний приклад створення локальних гіперпосилань.

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

4. Підготуватись зо захисту роботи.

Теоретичні відомості

1. Поняття гіперпосилання

На попередніх ПЗ ми розглянули різні способи форматування тексту веб-сторінки. Cтворена нами “Домашня сторінка Сергія Сергєєва” має недолік: вона являє собою тільки текст. В ній відсутні гіперпосилання. Гіперпосилання - контекстні зв'язки між розташованими в Інтернеті матеріалами. Вони є основою побудови World Wide Web.

Будь-яке слово, що зустрічається на веб-сторінці, можна перетворити в гіперпосилання, якщо відомі які-небудь інші сторінки, що описують цей предмет більш докладно. Так, наприклад, на сторінці, присвяченій комп'ютерній грі Quake, у куті зазначене, що тепер у неї можна відіграти й на комп'ютерах з операційною системою Linux - і в цьому місці є гіперпосилання на сторінку, з якої можна завантажити дистрибутив цієї операційної системи. Клацаючи кнопкою миші по гіперпосиланнях, можна обійти весь Інтернет (точніше, його службу WWW).

Давайте розглянемо, яким чином можна вставляти гіперпосилання в тексти веб-сторінок. Для цього ще використовуємо приклад одного з попередніх ПЗ ( а саме - сторінка Сергія Сергєєва). Загалом кажучи, у текст веб-сторінки можна вставляти гіперпосилання трьох типів:

• посилання в інші місця тієї ж сторінки;

• посилання на інші сторінки цього ж сайту або сервера;

• посилання на сторінки, розташовані на будь-якому іншому сервері в Інтернеті.

2. Локальне гіперпосилання

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

Щоб це зробити, треба спочатку визначити місця, де тексти починаються, як “якоря” (місця, до яких можна буде швидко переміститися). Для цього використовують тег <А>. Це можна зробити, наприклад, так:

<A NAME="skazka">ІВАН- ЦАРЕВИЧ І СІРИЙ ЗАЄЦЬ</А>

У цьому випадку ми визначаємо атрибут NAME= - ім'я якоря. По цьому імені ми й будемо на нього посилатися.

Для установки гіперпосилання також використовується тег <А>, але із установленим атрибутом HREF=. Значення цього атрибута визначає, що відобразиться на екрані, якщо користувач натисне кнопкою миші на гіперпосиланні. Щоб послатися на якір, потрібно просто вказати в якості значення HREF= ім'я цього якоря, перед яким розташований знак #:

<A HREF="#skazka">Казка &#171Іван-царевич і сірий заєць»</А>

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

Точно в такий же спосіб можна поставити гіперпосилання на другу розповідь. За замовчуванням у більшості браузерів гіперпосилання відображаються синім кольором, що зовсім не гармоніює з колірною гамою нашої сторінки. Можна задати потрібний колір відображення гіперпосилань. Для цього потрібно в тегу <BODY> установити значення атрибута LINK=. Колір можна вибрати за своїм розсудом, можна зробити гіперпосилання тим же кольором, що й основний текст. Але цього робити не рекомендується, оскільки читач не зможе швидко зрозуміти, де гіперпосилання, а де немає. Звичайно найкраще підібрати колір, близький по відтінку до основного, однак одмінний від нього, наприклад, по яскравості. У нашім випадку можна написати так:

<BODY BGCOLOR="#BABAAO" TEXT="#1D1D18" LINK="#634438">

Браузер зазвичай відображає гіперпосилання, якими читач ще не користувався, одним кольором, а ті, що були відкриті - іншим. Цей колір вибирається за допомогою атрибута VLINK= тегу <BODY>. Крім того, є ще атрибут ALINK=, який визначає колір так званого активного посилання, тобто того, на якій у цей момент відбувається клацання кнопкою миші. У більшості випадків він майже не помітний.

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