Файл: Лекція 4 Форматування тексту. Гіперпосилання та списки.doc

Скачать файл (0,48Мб)

Заказать решение

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 15.06.2024

Просмотров: 25

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.

СОДЕРЖАНИЕ

Лекція 4 Теги форматування тексту Створення гіперпосилань та списків в Html-документі

1. Теги фізичного форматування.

2. Теги логічного форматування тексту

4. Текстові гіперпосилання

5. Списки

Водночас текст «Оlena@zirka.lviv.ua» є гіперпосиланням, скориставшись яким, користувач зможе надіслати листа за допомогою настроєної на своєму комп'ютері електронної пошти за вказаною в атрибуті HREF адресою — olena@zirka.lvlv.ua.

Розглянемо ще один приклад створення текстових гіперпосилань. Припустимо, що у певній папці збережено два HTML-документи, які описують два напрями роботи фірми, — 1.html та 2.html. Створимо веб-сторінку з переліком гіперпосилань, кожне з яких ілюструватиме один із напрямів роботи фірми:

<HTML>

<TITLE>Моя фірма</TITLE>

<BODY>

<Н1><А HREF="l.html">Наша продукція</А></Н1>

<Н1><А HREF="2.html">Наші замовники</А></Н1>

</BODY>

</HTML>

У цьому прикладі теги гіперпосилань містяться в тегах заголовків першого рівня. Тексти гіперпосилань будуть розташовані в окремих рядках і оформлені як заголовки першого рівня.

За умовчанням текстові гіперпосилання виділені синім кольором і підкреслені, а якщо ними вже скористалися, то темно-червоним. Для зміни цих кольорів додамо відповідні атрибути до тегу <BODY>:

<BODY LINK=magenta ALINK=yellow>.

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

Мал. 2

Я к щ о додати до тегу атрибут BGCOLOR=cyan, то колір тла веб-сторінки зміниться на світло-бірюзовий.

Колір посилання залежить від того, в якому стані знаходиться посилання:

невідвідане| посилання (link|)- це посилання на сторінку, про відвідини якої в браузере| немає відомостей, іншими словами це колір посилання в яку ще не заходили;
відвідане посилання (vlink|) - це посилання на сторінку, відомості, про відвідини якої є в браузере|.
активне посилання (alink|) - це посилання, на якому клацають мишею у нинішній момент.

Колір вживаних посилань задається за допомогою атрибутів link|, vlink|, alink|.

Наприклад:

Колір посилань можна задавати в символьному еквіваленті, шістнадцятиричному коді або форматі колірної моделі RGB|.

text-decoration="none|"

В даному прикладі колір заданий в шістнадцятиричному коді (від 00 до FF| з приставкою # (читається "дієз")).

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

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

Проста програма створення посилання виглядає так:

< а href| =”адрес ссылки”>комплексні| з’єднання</ а >

Вміст посилання це виділене слова “комплексні з'єднання”. У тексті це слово відрізнятиметься від інших кольором, тому елементи посилань краще всього розміщувати, не перериваючи тексту документа пропусками і перенесеннями рядків. Текст повинен бути коротким і змістовним.

Задавати посилання можна:

• за абсолютною адресою;

• по відносному;

• по внутрішньому.

5. Списки

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

невпорядкований (маркований);
упорядкований (нумерований);
список визначень.

HTML| дозволяє визначати зовнішній вигляд цілих абзаців тексту. Абзаци можна організовувати в списки, виводити їх на екран у вигляді, що відформатував, або збільшувати ліве поле.

Нумеровані списки

Пронумерований список починається з дескриптора <OL|> (означає «ordered| list|») і закінчується дескриптором </OL>. Ця пара дескрипторів автоматично форматує список і стежить за інтервалами між списком і рештою вмісту HTML-страницы|.

type| = інформація про стиль — даний атрибут встановлює стиль елементу списку. Доступні в даний час значення призначені для візуальних агентів користувачів. Можливі значення описані у таблиці (включаючи інформацію про регістр).

Type\|	Стиль нумерації
1	арабські цифри	1, 2, 3, ...
а	букви нижнього регістра	а, b, з ...
A	букви верхнього регістра	A, B, C ...
i	римські цифри в нижньому регістрі	i, ii\|, iii\| ...
I	римські цифри у верхньому регістрі	I, II, III ...

start| = число — Цей атрибут задає початковий номер першого елементу у впорядкованому списку. За умовчанням початковий номер - "1"|. Пам'ятаєте, що, хоча значенням цього атрибуту є ціле число, відповідна мітка може бути нецифрова. Якщо як стиль вибрані латинські букви верхнього регістра (A, B, C ...), start=3| означає "C"|. Якщо як стиль вибрані римські цифри нижнього регістра, start=3| означає "iii|" і так далі

Compact| — Якщо цей логічний атрибут встановлений, він повідомляє візуальних агентів користувачів про те, що генерувати список потрібно компактніше. Інтерпретація цього атрибуту залежить від агента користувача.

Елементи списків визначаються за допомогою дескриптора <LI|>. Представлення елементу на готовій сторінці повністю залежить від настройки браузера| і атрибутів списку. У неврегульованих і нумерованих списках як елемент можуть виступати цілі абзаци тексту. Елементи в каталогах і меню, навпаки, зазвичай короткі і «укладаються» браузерами| в рядок без перенесення.

Кінцевий дескриптор </LI> можна не вставляти в документ, оскільки наступний <LI|> розглядається браузером| як початок наступного елементу списку і відповідно кінець поточного. Дескриптор <LI|> повинен знаходитися між дескрипторами <UL|> — </UL> або <OL|> — </OL>.

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

<HTML>

<TITLE>Райдуга</TITLE> <BODY>

<LI>Червоний</LI>

<LI>Оранжевий</LI>

<LI>Жoвтий</LI>

<LI>Зелений</LI>

<LI>Блакитний</LI>

<LI>Синій</LI>

<LI>Фіолетовий</LI> </OL>

</BODY> </HTML>

Ha мал. 3 показаний вигляд цього документа у вікні браузера Internet Explorer.

мал. 3 Нумерований список

Зверніть увагу на те, що за допомогою тегу для всього документа призначено розмір шрифту 6, а за допомогою тегів визначено колір шрифту для кожного елемента списку.

Ненумеровані списки:

<UL|> ... </UL>

Текст, розташований між мітками <UL|> і </UL>, сприймається як ненумерований список. Кожен новий елемент списку слід починати з мітки <LI|>. У мітки <LI|> немає парної закриваючої мітки.

type| = інформація про стиль — Цей атрибут встановлює стиль елементу списку. Доступні в даний час значення призначені для візуальних агентів користувачів. Можливі значення описані у таблиці (включаючи інформацію про регістр).

Графічні агенти користувач можуть генерувати їх як:

для значення "disc|"

○ для значення "circle|"

■ для значення "square|"

value| = число — Цей атрибут встановлює номер поточного елементу списку. Пам'ятаєте, що, хоча значенням атрибуту є ціле число, відповідна мітка може бути нечислова.

Приклад 3 . Маркований список, в якому для позначення елементів використовують коло

<HTML>

<TITLE>Райдуга</TITLE> <BODY>

<LI>Червоний</LI>

<LI>Оранжевий</LI>

<LI>Жовтий</LI> <LI>Зелений</LI> <LI>Блакитний</LI>

<LI>Синій</LI>

<LI>Фioлeтoвий</LI> </UL>

</BODY>

</HTML>

Ha мал. 4 показаний вигляд цього документа у вікні браузера Internet Explorer.

Мал. 4. Маркований список

Списки визначень: <DL|> ... </DL>

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

<DL|>

<DT>HTML|

маркіровки гіпертекстів'. Першу версію HTML| розробив співробітник

Європейській лабораторії фізики елементарних частинок Тім Бернерс-лі.

<DT>HTML-документ|

<DD>Текстовий| файл з розширенням *.htm (Unix-системи| можуть

містити файли з розширенням *.html).

</DL>

Цей фрагмент буде виведений на екран таким чином: