Смекни!
smekni.com

Створення Web-документів. Використання мови HTML (стр. 3 из 4)

Атрибути тегу <OL>.

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

-- TYPE=А – встановлює маркер у вигляді прописних літер;

-- TYPE=а -- встановлює маркер у вигляді малих прописних літер;

-- TYPE=I – маркер у вигляді великих римських цифр;

-- TYPE=i -- маркер у вигляді маленьких римських цифр;

-- TYPE=1 -- маркер у вигляді арабських цифр;

Невпорядкований (маркирований) список.

Це список, у якому відношення між пунктами невизначені. Маркирований список замість буквенної або числової нумерації передбачає використання різних символів, які називаються маркерами. Список розміщується всередині контейнера <UL>. Браузер створює автоматичний доступ для вкладених списків.

Можна встановити вид маркерів в невпорядкованих списках за допомогою атрибута TYPE, який може набувати трьох значень: DISC, SQURE, CIRCLE. Тег <UL> має атрибут COMPACT, який дозволяє виводити список в більш компактному вигляді.

Меню

Список, який визначається <MENU> виводиться більшістю браузерів тими ж шрифтами і в тому ж стилі, що і невпорядкований список. Як і попередні типи списків, список-меню автоматично відокремлюється від решти тексту кодами переведення рядка.

Список типу <DIR>

Елемент типу DIR схожий на елемент MENU і використовується для ідентифікації певної частини документу. Список контейнера, що по-чинається тегом <DIR>, виводиться броузером аналогічно невпорядко-ваним спискам. Довжина кожного пункту цього типу списків обмежена 24 символами. Список потребує зачиняючого тегу </DIR>.

Список визначень.

Це особливий вид списків HTML. Вони подають текст у вигляді словникової статті, що складається з певного терміну та абзацу, який розкриває його значення. Елемент списку визначень DL є контейнером і забезпечує відокремлення списку від іншого тексту порожніми рядками. Всередині контейнеру тегом <DТ> помічається термін, що визнача-ється, а тегом <DD> -- абзац з його визначенням. Теги <DT> и <DD> не є контейнерами. Текст після тегу <DT> повинен міститися в одному ряд-ку. Якщо ця вимога не виконана або якщо рядок виходить за межі вікна браузера, то відбувається переведення рядку , але без відступу. Текст, що стоїть за тегом <DD> виводиться окремим абзацем з відступом вниз на один або два рядки відносно цього терміну.

1.4.Посилання та робота з ними

Посилання складається з двох частин. Перша з них – це те, що ми бачимо WEB-сторінці; вона називається вказівник (anchor). Друга частина, яка дає інструкцію браузеру — адресна частина посилання (URL – адресою).

Вказівники бувають 2 типів -- текстові та графічні. Текстовий вказівник—це слово або слова, що підкреслені прямою лінією. Колір вказівника може регулюватися автором або настройками програми перегляду. Текстові вказівники можуть бути безпосередньо частинами тексту, наприклад: <A HREF=“vero.html”> Привіт </A> або бути списком посилань, з яких потрібно зробити вибір. Графічні не підкреслюються і не виділяються кольором, проте навколо них можна зробити рамку. Багато авторів HTHL-документів використовують графічні вказівники у вигляді кнопок, характерних для Windows. Такі кнопки можна досить часто побачити на початкових сторінках Web-сайтів. Вони слугують свого роду змістом сайту і ведуть до різних сторінок, наприклад: <HREF=“whatsnew.htm”> <IMG SRC=”whatsnew.gif” BORDER=0> </A>.

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

Для використання зображення в якості посилання на інший документ, достаточньо включити ім'я файлу зображення в тег <A>:

<A HREF=“whatsnew.htm”><IMG SRC=”image.gif”></A>

Тег BASE

Вказує базову адресу даного документа (URL), який стане відправною точкою для розрахунку відносних адрес всередині документу. Елемент не має кінцевого тегу. Обов'язкова наявність хоча б одного з параметрів. Параметри:

HREF – визначає базову адресу (URL) даного документу. TARGET – визначає ім'я фрейму, яке буде використовуватися в гіперпосиланнях по замовчуванню. Пример:

<HEAD>

<!-- Нехай браузер думає, що знаходиться за адресою : -->

<BASE HREF="http://www.igf.ru/other/index.html">

<TITLE>Руководство по эксплуатации</TITLE>

</HEAD>

...

<!-- А тепер створемо відносне посилання на документ -->

<!-- http://www.igf.ru/list.html -->

<A HREF="../list.html">Список</A>

...

Створення посилань на документи і файли

Потрібно повідомити браузеру, який елемент сторінки є вказівником, і вказати адресу документа, на який робите посилання. Обидві дії виконуються за допомогою тегу <A>. Тег <A> має єдиний атрибут HREF, в якому розміщується URL - адреса. Тег є контейнером, тобто потребує </A>. Атрибут HREF вказує на абсолютну адресу сторінки. Вказівником можуть бути слова, які браузер виділяє підкресленням та кольором. Текст поза контейнером </A> не є вказівником і не буде підкресленим. Коли читач клікає мишкою на цих словах, браузер загружає його сторінку.

Тег LINK

Елемент LINK описує взаємозв'язок документу з іншими документами на сайті, вказуючи його місце в ієрархічній структурі сайту. Елемент не має кінцевого тегу. В заголовку може міститися декілька елементів LINK. Параметри:

HREF-- визначає URL об'єкту.

REL—визначає тип взаємозв'язку даного документу з об'єктом, який визначений параметром HREF. Можливі значення:

Stylesheet-- вказує на файл, який містить таблицю стилів (CSS) для даного документу. Браузер загрузить css-файл з вказаної в параметрі HREF адреси та застосує його до даного документу;

home – вказує на головну сторінку вашого сайту;

toc, contents—вказують на файл, який містить зміст даного документу;

index – вказує на файл, який містить інформацію для індексного пошуку в даному документі;

glossary—вказує на файл, який містить перелік термінів,що відносяться до даного документу;

copyright—вказує на сторінку сайту, де говориться про його авторів, авторських правах і т.д.;

up, parent—вказує на "батьківську" сторінку (документ, що стоїть на сходинку вище у ієрархічній структурі вашого сайту);

child-- вказує на "дочірню" сторінку (документ, що стоїть на сходинку нище у ієрархічній структурі вашого сайту);

next – вказує на наступну сторінку у послідовності документів (напр. наступну сторінку електронного каталогу, документації або словника);

previous—вказує на попередню сторінку в послідовності документів;

last, end-- вказує на останню сторінку в послідовності документів;

first-- вказує на першу сторінку в послідовності документів;

help – вказує на сторінку з підказкою.

TYPE - визначає MIME-тип для об'єкту, вказаного в параметрі HREF.

Приклад:

<HEAD>

<TITLE>Елемент DIV</TITLE>

<LINK REL="HOME" TITLE="HTML-довідник" HREF="index.html">

<LINK REL="UP" TITLE="Текстові блоки" HREF="textblocks.html">

<LINK REL="PREVIOUS" TITLE="Елемент P" HREF="p.html">

<LINK REL="NEXT" TITLE="Елемент ADDRESS" HREF="address.html">

</HEAD>

Додаткові відомості про тег А.

1)Елемент A не може бути вкаледеним сам у себе, тобто неможливі конструкції:

<A HREF="link1.html">

Перший лінк

<A HREF="link2.html">Другий лінк</A>

Продовжуємо перший лінк

</A>

2) За допомогою елементу BASE можна вказати значення TARGET для всех гіперпосилань в даному документі.

Р.2.Створення Web-документу

Як приклад створення Web-документу наведемо наступний алгоритм.

Перша сторінка—“Енциклопедія.html” має наступну структуру:

<HTML>

<HEAD>

<TITLE>Welcome</TITLE>

</HEAD>

<BODY >

<bgsound src="Бетховен - К Элизе.rmi" loop=infinite volume=-700>

<a href="Збірник афоризмів.html"><img src="abcdone4.gif" align="left" hspase="50" border="30%" width="75%"></a>

</BODY>

</HTML>

При натисненні лівої кнопки миші на анімації перейдемо до головної сторінки сайту-“Збірник афоризмів.html”:

<HTML>

<HEAD>

<TITLE> Енциклопедія афоризмів на всі випадки життя</TITLE>

</HEAD>

<BODY bgcolor="aliceblue">

<bgsound src="endless.mid" loop=infinite volume=-300>

<P>

<font color="fuchsia" >

<h2 align="center" ><img src="erth.gif" vspase="4" hspase="4">Вас вітає найкраща збірка афоризмів на всі випадки життя </h2>

</font>

<table border="0" width="100%" >

<tr>

<td align="middle" width="20%" height="10%"> </td>

<td align="middle" width="20%" height="10%"> </td>

<td align="middle" width="20%" height="10%" >

<A href="Любов.html"><h4>Любов</h4></A></td>

<td align="middle" width="20%" height="10%"> </td>

<td align="middle" width="20%" height="10%"> </td>

</tr>

<tr>

<td align="middle" width="20%"height="10%"> </td>

<td align="middle" width="20%"height="10%">

<A href="Чоловіки.html"> <h4>Чоловіки</h4></A></td>

<td align="middle" width="20%" height="10%">

<A href="Діти та батьки.html"><h4><font color="blue">Діти та батьки</font></h4></A></td>

<td align="middle" width="20%" height="10%">

<A href="Дівчата.html"><h4>Дівчата</h4></A></td>

<td align="middle" width="20%" height="10%"></td>

</tr>

<tr>

<td align="middle" width="20%"height="10%">

<A href="Шлюб.html" ><h4>Шлюб</h4></A></td>

<td align="middle" width="20%"height="10%">

<A href="Виховання дітей.html" ><h4><font color="blue">Виховання дітей</font></h4></A></td>

<td align="middle" width="20%" height="10%">

<A href="Дружба.html"><h4><font color="deepskyblue">Дружба</font></h4></A></td>

<td align="middle" width="20%" height="10%">

<A href="Добро і зло.html"><h4><font color="blue">Добро і зло</font></h4></A></td>

<td align="middle" width="20%" height="10%">

<A href="Підлітки.html"><h4>Підлітки</h4></A></td>

</tr>