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

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

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

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

Добавлен: 15.06.2024

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

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

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

<HTML>

<HEAD>

<TITLE> Логічне форматування тексту </TITLE>

</HEAD>

<BODY>

<ACRONYM TITLE="Машинобудівний коледж СумДУ">МКСумДУ</acronym> -

провідний коледж міста Суми<br>

<CITE>Ваш шанс</CITE>

є одній з найбільш популярних міських газет м. Суми.<BR>

<DEL>Этот текст перекреслений.</DEL><BR>

Приклад простого оператора мови програмування Паскаль: <BR>

<CODE> WriteLn(‘Hello, World!’) </CODE><BR>

<DFN>Internet Explorer</DFN> - це популярний WEB–браузер.<BR>

<INS>Цей текст є вставкою і буде підкреслений.</INS>;<BR>

Приклад виділення <EM>отдельных слов</EM> тексту.<BR>

Щоб запустити текстовий редактор, надрукуйте: <KBD>notepad</KBD>.<BR>

В результаті роботи программмы будуть надруковано:

<SAMP>Hello, World!</SAMP><BR>

Місто Суми розташоване на річці <STRONG>Сумка.</STRONG><BR>

Задайте значення змінної <VAR> N </VAR>.<BR>

</BODY>

</HTML>

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

3. Способи завдання кольору  і  теги фізичного форматування <FONT|> і <BASEFONT|>.

У мові HTML| колір може визначається двома способами:

  • числами в шістнадцятиричній системі числення. Колірна система базується на трьох основних кольорах – червоному, зеленому і синьому – і позначається RGB| (по початкових буквах слів Red| – червоний, Green| – зелений, Blue| - синій). Це означає, що кожен колір задається кількістю червоного, зеленого і синього кольору в нім. Ця кількість визначається значенням від 00 до FF| (від 0 до 255 в десятковій системі числення). Наприклад, конструкція #FF0000| задає червоний колір, а #FFFFFF|білий (символ # говорить про те, що числа представляються в шістнадцятиричній системі числення);

  • мнемонічними позначеннями. Можна використовувати назви квітів, наприклад: Red| (червоний), White| (білий) і так далі.


Продовжимо перерахування тегів фізичного форматування.

Тег <FONT|> дозволяє змінити шрифт, який використовує браузер| для проглядання Web-сторінки|. Це перший тег, для якого ми розглянемо параметри, що є у цього тега. Це:

  • FACE| – задає назву шрифту, яким буде виводиться текст. Якщо такого шрифту немає, то значення параметра ігнорується. Можна задавати імена декількох шрифтів; в цьому випадку вони розділяються комами;

  • SIZE| – задає розміри шрифту в умовних одиницях від 1 (найменшого) до 7 (найбільшого). Прийнято вважати, що шрифт “нормального” розміру відповідає значенню 3. Розмір шрифту можна задавати як абсолютною величиною (наприклад, SIZE=2|), так і відносною (SIZE=+1|). В цьому випадку така конструкція еквівалентна наступному операторові привласнення: SIZE=| SIZE| +1;

  • COLOR| – встановлює колір шрифту, який може задаватися за допомогою стандартних імен або набором шістнадцятиричних цифр.

Приведемо приклад використання тега <FONT|>:

<HTML|>

<HEAD|>

<TITLE>Приклади використання параметрів тега FONT| </TITLE>

</HEAD>

<BODY|>

Текст, записаний шрифтом за замовчуванням.<BR>

<FONT| FACE="Courier| New|, Arial|, Helvetica|" Color=#FF0000|>

Приклад завдання назв шрифту і кольору

</FONT><BR>

<FONT| SIZE=5>Шрифт| розміру 5</FONT><BR>

<FONT| SIZE=+3| COLOR=Green>Шрифт| розміру 6, колір зелений</FONT><BR>

</BODY>

</HTML>

Є можливість задати характеристики шрифту, який використовуватиметься у всьому документі. А як же бути, якщо потрібно якийсь фрагмент тексту вивести шрифтом з іншими характеристиками? В цьому випадку на допомогу прийде тег <FONT|>. Після завершення його дії знову в силу вступлять раніше встановлені параметри шрифту або, як прийнято говорити, параметри за умовчанням.

Тег <BASEFONT|> використовується для вказівки розміру, типу і кольору шрифту, використовуваного в документі за умовчанням. Приведемо приклад використання цього тега:

<HTML|>

<HEAD|>

<TITLE>Приклади використання параметрів тега BASEFONT</TITLE>


</HEAD>

<BODY|>

Текст, записаний шрифтом за замовчуванням.<BR>

<BASEFONT| SIZE=2>Шрифт| розміру 2.<BR>

<BASEFONT| SIZE=4| COLOR=Green>Шрифт| розміру 6, колір зелений</FONT><BR>

</BODY>

</HTML>

У приведеному прикладі двічі перевизначається розмір шрифту, заданого за умовчанням. Спочатку він рівний 3 (не забули, що якщо розмір шрифту не встановлений, то він рівний 3), потім встановлюється рівним 2, а потім – 4.

  Зауваження. Працюючи з цим тегом важливо пам'ятати про наступні особливості його використання:

  • він не має парного, тобто тег </BASEFONT> відсутній!

  • більшість браузеров| ігнорують його установки усередині таблиць;

  • у HTML-документе| може бути скільки завгодно тегів <BASEFONT|>.


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

Гіперпосилання — це вказівка для браузера, до якого об'єкта у межах або поза межами HTML-документа він має звернутися.

За допомогою гіперпосилань користувачі можуть переходити з однієї веб-сторінки на іншу, завантажувати файли тощо. Як гіперпосилання може буnи оформлений фрагмент тексту або графічний об'єкт. Коли веб-сторінка відображаються у вікні браузера, текстове посилання зазвичай виділено синім кольором і підкресленням. Для переходу в місце, на яке вказує посилання, користувачу достатньо клацнути його текст.

Для створення посилань застосовується елемент <A>|, званий елементом прив'язки, або, іншими словами, якірним елементом. Назва елементу <A>| походить від першої букви слова anshor| – якорь|, і мета його відобразити вміст посилання на екрані і вказати браузеру|, до якого ресурсу необхідно перейти при виклику посилання. Його значенням має бути адреса URL, на яку вказує посилання. Текст посилання розташовують м і ж тегами < А > і < / А >

Тег <A>| повинен виконувати просте завдання: відображати вміст на екрані і указувати браузеру|, до якого ресурсу необхідно перейти при клацанні на посиланні. Усередині тега| <A>| ставиться атрибут href|, за допомогою якого визначається цільовий ресурс, а усередині контейнера розміщується вміст посилання. Початкова закладка може бути у вигляді тексту, слова, пропозиції, малюнка, і обов'язково виділяється кольором і підкресленням.

Якщо веб-сторінка, на яку вказує посилання, розміщена на іншому веб-сайті, то значенням атрибута HREF має бути повна URL-адреса з назвою протоколу включно; такі посилання називають зовнішніми.

Якщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім.

Гіперпосилання може вказувати на певне місце всередині сторінки, якщо туди попередньо вбудувати якір-мітку. Для визначення я к о р я також використовують теги < А > і </А>, але замість атри­бута HREF задають атрибут NAME, значенням якого має бути ім'я якоря. Воно може складатися з літер та цифр, але не повинно містити символів пробілу. Якщо на сторінці є кілька міток, то всі вони повинні мати різні назви.


Для створення посилання на встановлений якір потрібно у тегу <А> зазначити його ім'я в кінці адреси URL після імені докумен­та, відокремивши його символом #.

Символ # вказує на те, що після нього записано назву мітки, а не ім'я файлу.

Посилання на мітку всередині поточного документа задають так:

<А HREF="#назва_мітки">Текст посилання</А>.

Якщо в атрибуті HREF задати адресу електронної пошти зі словом m a i l t o : перед нею, то після вибору такого посилання можна надіслати електронний лист, де в полі Кому буде записано цю адресу.

У прикладі, який наводиться нижче, розглянуто застосування гіперпосилань різного типу.

Приклад 1. HTML-документ, в якому використовуються гіперпосилання та якорі

<HTML>

<HEAD>

<TITLE>Посилання та якорі</TITLE>

</HEAD>

<BODY>

Нові версії стандартних програм операційної системи

та найважливіші драйвери

можна знайти на веб-сайті компанії

<А HREF="http://www.microsoft.com/">Microsoft</A>.

<P>A тепер можна перейти на

<А HREF="main.htm"> мою особисту сторінку</А>.

<Р>Про те, як зв'язатися з автором, розповідається

в <А HREF="#olenap"> кінці цієї сторінки</А>

<BR><BR>

Можна використати матеріали, що розміщені

<А href="text.doc"> в цьому текстовому документі.</А>

<BR><BR>

<А NAME="olenap"

HREF="mailto:olena@zirka.Iviv.ua">01ena@zirka.lviv.ua</A>

</BODY>

</HTML>

Такий вигляд матиме HTML-документ після його відтворення браузером (мал.1).

Мал. 1 Гіперпосилання

У цьому прикладі слово «Microsoft» міститься у тегу зовнішнього гіперпосилання, а текст «мою особисту сторінку» — у тегу внутрішнього посилання. Текст «кінці цієї сторінки» розміщений у тегу посилання на якір, а «в цьому текстовому документі» — у тегу гіперпосилання з атрибутом HREF, в якому задано зв'язок не з веб-сторінкою, а з текстовим документом, котрий збережений у тій самій папці, що й поточний HTML-документ. Текст «01ena@zirka.lviv.ua» вміщено у тег, що описує мітку я к о р я , а в атрибуті HREF зазначено адресу електронної пошти.

Якщо відвідувач веб-сторінки скористається зовнішнім гіперпосиланням Microsoft, то відкриється сторінка, що міститься за адресою: http://www.microsoft.com/. Після клацання гіперпосилання мою особисту сторінку відкриється веб-сторінка, записана у файлі main.htm, який міститься у тій самій папці, що й поточна сторінк а . Після к л а ц а н н я внутрішнього посилання в цьому текстовому до-кументі відкриється вікно з текстовим документом text.doc, що міститься у поточній папці. Якщо скористатися посиланням на якір кінці цієї сторінки, то зображення поточної веб-сторінки зміститься так, що текст мітки «01ena@zirka.lviv.ua», з якою зв'язаний якір, буде розміщений у видимій на екрані частині документа.