Звертання до певних розділів інших документів

Гіперпосилання можуть також використовуватися для з'єднання з певними розділами документів. Припустимо, ми хочемо з'єднати документ А с першим розділом документу В, для чого нам необхідно створити іменоване гіперпосилання в документі B. Наприклад, таке:

<A name = "Розділ 1">Глава 1 </a>.

Таким чином ми створюємо закладку в документі В на яку треба перейти.

Тепер, описуючи посилання в документі A, треба включити не тільки ім'я файлу "document.html", але також і ім'я гіперпосилання, відокремлюване символом (#). Наприклад,

<A HREF = "document.html#глава1"> Глава 1 </A>.

Тепер «клацнувши» на слові «Глава 1» у документі А, ви перейдете безпосередньо в Главу 1 у документі B.

 

Використання зображення як посилання

Для використання зображення як посилання зображення необхідно включити усередину тегу-контейнера <A>

Наприклад:

<A href = E:\Documents and Settings \vika \Мої документи \HTML \Мерфи.doc > <IMG src=D:\distr_fom\FOTO\веб\OTHER\book.gif> </A>

Завдання до лабораторної роботи

Завдання №1.

За допомогою редактора Dreamweaver створити два зв'язаних гіперпосиланнями Web-документа, у яких були б використані усі вивчені раніше структури.

Тема першого документа: «Про себе й своїх друзів». Тема другого документу: «Мої захоплення».

Документи назвіть – iAndFrands.html, passion.html відповідно.

 

Завдання №2.

У документ passion.html внести маркірований список з маркером у вигляді зображення й організувати систему якорів і навігації по внутрішніх гіперпосиланнях.

Завдання №3

1. Створіть на диску D папку Web. Створить цю папку папкою сайту за допомогою Dreamweaver. В папці Web створіть Web-сторінку, яка повинна відображати список знаків зодіаку. Список знаків зодіаку представте у вигляді маркованого списку. Документ повинен мати назву index.html.

2. За допомогою MS Word створіть два HTM-документа, які будуть відображати інформацію про відповідний знак зодіаку, наприклад документи lion.htm та scorpion.htm. Вставте до створених файлів два довільні зображення. Збережіть створені HTM-документи в папці Web.

3. Створити в документі index.html два гіперпосилання до створених файлів, наприклад, до файлів lion.htm та scorpion.htm відповідно.

4. Добавте на Web-сторінку index.html два абзаци, які містять інформацію про два знаки зодіаку. Створіть гіпертекстові посилання в документі index.html на створені абзаци.

5. Створіть в кінці документу index.html гіпертекстове посилання, на початок документу index.html.

6. Створіть в документі index.html гіпертекстове посилання на будь-який файл, що перебуває на диску D.

Завдання №4

1. Створити на диску D папку Web_2. В папці Web_2 створіть Web-сторінку з назвою reference.html.

2. Добавте до створеної Web-сторінки reference.html два будь яких gif зображення.

3. Змінити перше зображення, виставивши його ширину 180 (висота вираховується автоматично).

4. Змінити друге зображення, зробивши його ширину 80.

5. Створіть в документі reference.html нумерований список, список повинен міститися після першого зображення. Нумерація в списку повинна бути арабськими цифрами.

Приклад:

<OL type=l>

<li> Людина набагато розумніше, ніж йому це треба для щастя.

<li> Нікому не поставити нас на коліна! Ми лежали, і будемо лежати!

<li> Думаю, не помилюся, якщо промовчу.

<li> Прошу послати мене на курси підвищення зарплати.

</OL>

6. Добавте до сторінки reference.html ще один нумерований список, який повинен міститися після попереднього. Нумерація в списку повинна бути великими римськими цифрами і починатися з чотирьох.

Приклад:

<OL type=A>

<li> Життя, звичайно, не вдалася, а в іншому все нормально.

<li> Якщо вам довго не дзвонять родичі або друзі, значить у них всі добре.

<li> Вибачите, що я говорю, коли ви перебиваєте.

<li> Чималої людини можна легко довідатися по тому, як незграбно він робить підлості.

</OL>

7. Відокремити перше зображення від тексту по вертикалі й по горизонталі по 20 пікселів.

8. Добавити до сторінки reference.html третє зображення. Зробити третє зображення в рамці, товщина якої 10 пікселів.

9. Додати до першого зображення альтернативний текст.

10. Зробити наприкінці сторінки посилання у вигляді графічного зображення.

Приклад:

<IMG src=D:\web\малюнок1.gif align=right alt="Простий малюнок" >

 

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

<head>

<title> Закони Мерфи </title>

</head>

<body>

<IMG src=D:\web\малюнок1.gif align=right     HSPACE=20 VSPACE=20 alt="Простий малюнок" >

<OL type=l>

<li> Людина набагато розумніше, ніж йому це треба для щастя.

<li> Нікому не поставити нас на коліна! Ми лежали, і будемо лежати!

<li> Думаю, не помилюся, якщо промовчу.

<li> Прошу послати мене на курси підвищення зарплати.

</OL>

<ol type=I start=5>

<li> Ціль визначає калібр.

<li> Першим здоровається той, у кого слабкіше нерви.

<li> Мудрість не завжди приходить із віком. Буває, що вік приходить один.

</OL>

<OL type=A>

<li> Життя, звичайно, не вдалася, а в іншому все нормально.

<li> Якщо вам довго не дзвонять родичі або друзі, значить у них всі добре.

<li> Вибачите, що я говорю, коли ви перебиваєте.

<li> Чималої людини можна легко довідатися по тому, як незграбно він робить підлості.

</OL>

<br> Мало знати собі ціну-<IMG src=D:\web\малюнок2.gif align=absmiddle border=10 bordercolor=red > треба ще користуватися попитом

<p> <IMG src=D:\web\малюнок3.gif align=bottom > Коли дружина зненацька дарує вам краватка - виходить,

<BR> нова норкова шубка їй вже не подобається.

<A href=D:\web\ Мерфи.doc> <IMG src=D:\web\малюнок5.gif></A>

</body>

 </html>

Контрольні питання.

1. Яке призначення редактора Dreamweaver?
2. Як створити й зберегти Web-документ за допомогою програми Dreamweaver?
3. Назвіть основні елементи інтерфейсу редактора Dreamweaver?
4. З яких елементів складається головна панель інструментів?
5. Як можна підключити додаткові панелі інструментів?
6. Що таке внутрішнє гіперпосилання? Як вона організується?
7. Що таке зовнішнє гіперпосилання? Як вона організується?
8. Що таке абсолютна й відносна адреса файлу?
9. Як використовувати зображення у вигляді гіперпосилання?

 

Лабораторна робота №4
Створення таблиць. Робота з атрибутами таблиці.

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