ВУЗ: Не указан
Категория: Не указан
Дисциплина: Не указана
Добавлен: 18.07.2024
Просмотров: 105
Скачиваний: 0
Перейдемо тепер до перерахування тегів фізичного форматування. Нагадаємо, що вони дозволяють конкретно вказати спосіб відображення того або іншого фрагмента тексту. Прагніть без великої необхідності не використовувати теги фізичного форматування, а користуватися відповідними тегами логічного форматування. Річ у тому, що надалі, з розвитком мови HTML, теги логічного форматування виконуватимуть не одне, а відразу декілька дій над фрагментом тексту. Наприклад, потрібно використовувати один тег логічного форматування для зображення фрагмента тексту напівжирним і курсивним шрифтом або два теги фізичного форматування для отримання такого ж результату. Вже зараз можливе створення і використання подібних конструкцій, проте їх опис і використання виходять за рамки даної книги.
Перерахуємо основні теги фізичного форматування.
1.Тег <B> відображає текст напівжирним шрифтом. В більшості випадків рекомендується для цих цілей використовувати тег логічного форматування <STRONG>:
Це <B> напівжирний </B> шрифт.
2.Тег <I> відображає текст курсивом. Для більшості випадків замість цього тега рекомендується використовувати теги <EM>, <VAR> або <CITE>, оскільки вони краще відображають призначення тексту, що виділяється:
Виділення <I> курсивом </I>
3. Тег <TT> відображає текст моноширинним шрифтом. Аналогом цього тега є теги логічного форматування <CODE>, <SAMP>, або <KBD>:
Це <TT> моноширинний </TT>
4.Тег <U> відображає текст підкресленим шрифтом. Замість цього тега рекомендується використовувати теги
<STRONG> або <CITE>:
Приклад <U> підкреслення </U> тексту.
5.Теги <STRIKE> і <S> відображають текст, перекреслений горизонтальною лінією. Аналогом цих тегів является<DEL>:
Приклад <STRIKE> закресленого тексту <STRIKE>.
6.Тег <BIG> виводить текст шрифтом більшого розміру, чим непомічена частина тексту. Замість нього можна використовувати тег <STRONG> або теги заголовків :
Шрифт <BIG> більшого </BIG> розміру.
7.Тег <SMALL> виводить укладений в нього текст шрифтом меншого розміру, в порівнянні з рештою частини тексту:
Шрифт <SMALL> меншого </SMALL> розміру.
8.Тег <SUB> друкує текст нижче за рівень рядка і виводить його шрифтом меншого розміру. Рекомендується для друку математичних індексів:
Приклад шрифту для <SUB> нижнього </SUB> індексу.
9.Тег <SUP> друкує текст вище за рівень рядка і виводить його шрифтом меншого розміру. Цей тег можна використовувати для завдання ступенів чисел:
Приклад шрифту для <SUP> верхнього </SUP> індексу.
Зберемо всs приклади в один лістинг.
<HTML>
<HEAD>
<TITLE>Фізичне форматування тексту</TITLE>
</HEAD>
<BODY>
Це <B>напівжирний</B> шрифт.<BR> Виділення <I>курсивом</I><BR>
Це <TT>моноширинний</TT> шрифт.<BR> Приклад <U>підкресленого</U> тексту.<BR>
Приклад <STRIKE>закресленого</STRIKE> тексту.<BR> Шрифт <BIG>більшого</BIG> розміру.<BR>
Шрифт <SMALL>меншого</SMALL> розміру <BR> Приклад шрифту для <SUB>нижнього</SUB> індексу. <BR> Приклад шрифту для <SUP>верхнього</SUP> індексу. <BR>
</BODY>
</HTML>
Мал.1. Приклади фізичного форматування тексту
Теги фізичного форматування можуть бути вкладеними один в іншій. В цьому випадку важливо стежити за тим,
щоб теги одного призначення розташовувалися усередині тегів іншого призначення, наприклад:
<B><I>Этот текст буде виділений жирним курсивом.</I></B>
Перш ніж продовжити перерахування тегів фізичного форматування, поговоримо про завдання кольору.
2. Теги логічного форматування тексту
Перерахуємо основні теги логічного форматування і приведемо приклади їх використання.
1.Тег <ACRONYM> використовують для відмітки абревіатур, акронімів (акронім - вимовне слово, що складається з початкових букв словосполучення). Цей тег використовується з параметром TITLE, в якості якого можна вказати ―розшифровку‖ акроніма. Ця ―розшифровка‖ з'являється на екрані, коли курсор розташовується на акронімі. Приведемо приклад використання цього тега:
Рис.1. Приклад тега <ACRONYM>
2.Тег <CITE> використовують для відмітки цитат або назв книг і статей, посилань і так далі Такий текст зазвичай виводиться курсивом. Приклад використання цього тега:
<CITE>Ваш шанс </CITE>
єодна з найбільш популярних міських газет м. Суми.
3.Тег <CODE> відзначає свій текст як невеликий фрагмент програмного коду, який виводиться моноширинним шрифтом.
Зауваження. Моноширинним називається такий шрифт, у якого розміри символів однакові, тобто кожен символ має одну і ту ж ширину, яка не залежить від його зображення. Таким шрифтом є, наприклад, шрифт Courier.
Використання цього тега нічим не відрізняється від застосування тега <CITE>. Приклад простого оператора мови програмування Паскаль:
<CODE> WriteLn(‘Hello, World!’); </CODE>
4.Тег <DEL> відзначає текст як видалений, перекреслюючи його. Приклад використання:
<DEL> Цей текст перекреслений.</DEL>
5.Тег <DFN> відзначає свій текстовий фрагмент як визначення (DeFinitioN - визначення). Цим тегом можна відзначити термін, що перший раз зустрічається в тексті. Такий текст відображатиметься курсивом:
<DFN> Internet Explorer </DFN> - це популярний WEB–браузер.
6.Тег <INS> відзначає свій текст як вставку (INSertion - вставка). Відображається підкресленим шрифтом:
<INS> Цей текст є вставкою і буде підкреслений. </INS>
7.Тег <EM> (Emphasis – виділення, підкреслення) використовують для виділення важливих фрагментів тексту, які відображається курсивом, наприклад:
Приклад виділення <EM> окремих слів </EM> тексту.
8.Тег <KBD> відзначає текст як що вводиться з клавіатури, відображається моноширинним шрифтом:
Щоб запустити текстовий редактор, надрукуйте: <KBD> notepad </KBD>.
9.Тег <SAMP> відзначає текст як зразок (SAMPle – зразок, приклад). Використовується для відмітки результатів, що видаються програмами, також для виділення декількох символів моноширинним шрифтом:
Врезультаті роботи програми буде надруковано:
<SAMP> Hello, World! </SAMP>
10.Тег <STRONG> використовується для відображення важливих елементів тексту, відображається напівжирним шрифтом:
Місто Суми розташоване на річці <STRONG> Сумка </STRONG>
11. Тег <VAR> відзначає імена змінних програм, відображається курсивом:
Задайте значення змінної <VAR> N </VAR>
Мал.2.Приклади логічного форматування тексту
На малюнку видно, як при наведенні покажчика миші на текст, відмічений тегом <ACRONYM>, видається підказка. Вийшло?.. Швидше за все, немає. У вас, напевно, рядки в браузере розташовуються одна за одною, а не з нового рядка, як показано на малюнку 2. І це не дивлячись на те, що в тексті HTML -документа кожен рядок тексту розташовується з нового рядка!
Річ у тому, що браузер ігнорує переходи на новий рядок в тексті HTML -документа і сам
здійснює перехід на новий рядок залежно від розміру вікна, в якому виводиться Web-
страница. Для того, щоб змусити браузер здійснити перехід на новий рядок, потрібно скористатися тегом BR. Таким чином, текст, що знаходиться у файлі PR1.HTML може бути наступним:
<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-адреса з назвою протоколу включно; такі посилання називають зовнішніми.
Якщо ж гіперпосилання вказує на іншу сторінку того самого сайту, то для пошуку документа достатньо задати лише відносний шлях; таке посилання називають внутрішнім.
Гіперпосилання може вказувати на певне місце всередині сторінки, якщо туди попередньо вбудувати якір-мітку. Для визначення я к о р я також використовують