Зміна розміру шрифту. Дескриптори FONT і basefont

Ще одним атрибутом шрифту, крім розглянутих вище, є його розмір (величина). Розмір шрифту в HTML задається цілими числами в діапазоні від 1 до 7. Якщо ніякі атрибути шрифту не вказані явно жодним дескриптором, то для всього тексту встановлюються ті значення атрибутів, котрі прийняті за умовчанням для даного браузеру.

Розмір може бути заданий для всього тексту або для окремого його фрагменту. Окрім визначення абсолютного розміру шрифту можна змінювати його розмір для окремих фрагментів (речень, слів, літер).

Для визначення розміру шрифту всього документу використовується дескриптор

< BASEFONT SIZE=n>,

тут n означає розмір шрифту, котрий задається цілою цифрою в діапазоні від 1 до 7. Встановлений цим дескриптором основний розмір шрифту застосовується до звичайного і попередньо відформатованого тексту і не застосовується до заголовків, за виключенням тих, котрі модифікуються з використанням елементу FONT з вказуванням відносного розміру шрифту (наприклад, FONT SIZE=+1). Слід також відмітити, що в різних браузерах присутнє обмеження на область дії цього дескриптора.

Дескриптор FONT дозволяє задавати чи змінювати заданий абсолютний розмір і колір шрифту. Вказаний дескриптор є контейнером, хоча зона його дії закінчується автоматично, якщо зустрічається наступний дескриптор FONT, котрий задає інший розмір шрифту. Нижче наведений синтаксис дескриптора FONT:

< FONT SIZE=n> текст < /FONT>

тут n означає розмір шрифту. Задається цілою цифрою в діапазоні від 1 до 7 або цілим числом зі знаком, наприклад, «+1» чи «-2». В цьому випадку розмір шрифту буде змінений на відповідну величину відносно діючого на момент використання дескриптора FONT поточного значення розміру.

В прикладі 4.6 наведений лістинг вмісту файлу, що ілюструє використання розглянутих дескрипторів (рис. 4.6).

Рис.4.6. Використання дескрипторів FONT і BASEFONT

Приклад 4.6

< HTML>

< HEAD>

< TITLE> Приклади завдання розмірів шрифту < /TITLE>

< /HEAD>

< BODY>

< P> Текст має розмір 3, прийнятий за умовчанням < /P>

< BASEFONT SIZE=5>

< P>

Перед початком цього тексту використаний дескриптор BASEFONT, який задає розмір 5.

< FONT SIZE=1> Текст розміру 1, заданий контейнером FONT. < /FONT>

< /P>

< B> < U>

< FONT SIZE=7 COLOR=RED>

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

< /FONT>

< /U> < /B>

< /BODY>

< /HTML>

4.6 Виділення цитат. Контейнер < BLOCKQUOTE>

Цитата, з точки зору HTML, представляє собою фрагмент тексту, представлений як окремий абзац чи послідовність абзаців. Як правило, браузери відображають такі фрагменти курсивом з відступом (можливим як ліворуч, так і праворуч). Цитати задаються контейнером

< BLACKQUOTE> текст цитати < /BLACKQUOTE>

В прикладі 4.7 приведений лістинг вмісту файлу, що ілюструє використання контейнера виділення цитат (рис. 4.7).

Рис. 4.7. Використання контейнера виділення цитат

Приклад 4.7

< HTML>

< HEAD>

< TITLE> Приклади контейнеру виділення цитат < /TITLE>

< /HEAD>

< BODY>

< HR>

< P> Цитата про текст < I> HTML – це …< /I> є такою: < /P>

< BLACKQUOTE>

< P>

HTML – це на сьогодні сама популярна мова гіпертекстової розмітки, котра дозволяє створювати інтерактивні сторінки

< /P>

< P ALIGN=RIGHT>

< A HREF=”https://www.html.ru/index/html”>

Автори < /A>

< /BLACKQUOTE>

< /BODY>

< /HTML>

4.7 Використання попередньо відформатованого тексту. Контейнер < PRE>

Контейнер < PRE> використовується для розміщення попередньо відформатованого тексту, котрий необхідно відобразити на Web сторінці таким, яким він уже сформований за допомогою будь-якого з допустимих текстових редакторів. Під попередньо відформатованим текстом тут мається на увазі текст з розставленими в ньому пробілами і символами переходу на новий рядок. Нагадаємо, що в звичайному HTML-тексті зайві пробіли і символи переходу на новий рядок, отримані за допомогою інших редакторів, наприклад, блокнотом Notepad, ігноруються. Синтаксис контейнера < PRE>:

< PRE> відформатований текст < /PRE>

В прикладі 4.8 наведений лістинг вмісту файлу, котрий ілюструє використання контейнера < PRE> (рис. 4.8).

Рис. 4.8. Використання контейнера < PRE>

Приклад 4.8

< HTML>

< HEAD>

< TITLE> Приклад використання контейнера < PRE> < /TITLE>

< /HEAD>

< BODY>

Нижче наведена таблиця символів, котрі можна набрати на клавіатурі:

< PRE>

0 1 2 3 4 5 6 7 8 9:; =,?

@ A B C D E F G H I J K L M N O

P Q R S T U V W X Y Z [ \ ] ^ _

` a b c d e f g h i j k l m n o

p q r s t u v w x y z { | } ~

< /PRE>

А тепер повторимо приведений фрагмент тексту, не використовуючи тег PRE:

0 1 2 3 4 5 6 7 8 9:; =,?

@ A B C D E F G H I J K L M N O

P Q R S T U V W X Y Z [ \ ] ^ _

` a b c d e f g h i j k l m n o

p q r s t u v w x y z { | } ~

< /BODY>

< /HTML>

4.8 Створення горизонтальних ліній. Дескриптор < HR>

Горизонтальні лінії, котрі використовуються в HTML, як правило, виступають візуальними розділите лями змістових розділів Web-сторінки, візуально відокремлюють різні частини Web-сторінок. В текстових фрагментах після горизонтальної лінії браузер автоматично вставляє тег початку абзацу < P>. Дескриптор < HR> може містити ряд атрибутів, які уточнюють положення, розмір і вид лінії, що задається:

< HR ALIGN=a, SIZE=m, WIDTH=p, NOSHADE>

В таблиці 4.3наведений опис і можливі значення атрибутів тегу < HR>.

Таблиця 4.3 – Опис атрибутів

У прикладі 4.9 наведений лістинг вмісту файлу, котрий ілюструє використання тегу < HR> (рис. 4.9).

Рис. 4.9. Використання тегу < HR>

Приклад 4.9

< HTML>

< HEAD>

< TITLE> Приклад використання тегу < HR> < /TITLE>

< /HEAD>

< BODY>

< P>

Цей текст підкреслений простою горизонтальною лінією (тег HR)

< /P>

< HR>

< P>

Після цього тексту горизонтальної лінії немає.

< /P>

< P>

Зображена нижче горизонтальна лінія вирівняна за правим краєм вікна браузера і має довжину, рівну половині ширини вікна браузера:

< /P>

< HR ALIGN=”RIGHT” WIDTH=”50%”>

< P>

Наступна лінія має висоту 5 пікселів, довжину 100 пікселів, не має відтінків:

< /P>

< HR ALIGN=”LEFT” NOSHADE SIZE=5 WIDTH=100>

< /BODY>

< /HTML>

Питання для самоперевірки.

1. Чи існує різниця між відображенням документу в різних браузерах.

2. Які дескриптори використовуються для завдання рядку і абзацу. Чи є вони контейнерами.

3. Як у файлі HTML записується заголовок.

4. Який атрибут використовується для вирівнювання тексту.

5. Фізичні і логічні стилі. Їх відмінності.

6. Що задає дескриптор < VAR>.

7. В чому відмінності дескрипторів < FONT> і < BASEFONT>.

8. Як задається розмір шрифту.

9. Які параметри форматування тексту залишає дескриптор < PRE>.

10. За допомогою якого атрибута встановлюється товщина ліній.

Завдання до самостійної роботи.

1. Написати програму, котра б ілюструвала відмінності дескрипторів < P> i < BR>.

2. Написати програму, яка б наглядно відображувала можливості форматування тексту. Програма повинна містити різне вирівнювання тексту, текст різного розміру з використанням ефектів (підкреслення, закреслення, нахил, верхній, нижній індекс).

3. Написати програму, котра б наглядно відображала можливості додавання відформатованого тексту й ілюструвала необхідність застосування ліній для оформлення Web-сторінки.

§ 5. Гіпертекстові посилання (зв’язки). Контейнер < A>

Гіпертекстові посилання (гіперпосилання) встановлюють зв’язки між окремими частинами одного й того ж документу (внутрішні посилання) або різними документами. Будь-яке гіперпосилання можна розглядати як поєднання окремих точок в документі з іншими точками в тому ж самому чи в інших документах. Встановлення такого зв’язку передбачає, що при зверненні до вказаного посилання (клацанні по ньому мишкою), відбувається активація означеного в цьому посиланні об’єкта, тобто у вікні браузера відображається новий фрагмент тексту, запускається аудіо додаток, завантажується той чи інший файл тощо. Умовно можна сказати, що будь-який такий зв'язок (посилання) з’єднує дві точки: точку розташування початку зв’язку (саме посилання) і деяку іншу точку, названу метою (target) зв’язку. Остання часто є початком іншого документу.

Для організації гіперпосилань в HTML використовується контейнер < A> - скорочення від англійського anchors – якір. Нижче приведено опис двох синтаксичних конструкцій цього контейнеру – контейнер, що задає мету, і контейнер, котрий задає точку переходу:

Контейнер, що задає мету (якір)

< A HREF=”мета” TITLE=”текст”> якір < /A>

Контейнер, що задає точку переходу

< A NAME=”ім’я”> < /A>

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

Всі посилання, які містяться в документі, відображаються у вікні браузера іншим кольором – зазвичай синім, і виділяються підкресленням. При наведенні на посилання вказівника мишки в нижньому куті браузера відображається адреса, яка міститься в атрибуті HREF. У вікні браузера біде відображатися тільки вміст контейнера.

У прикладі 5.1 приведений лістинг вмісту файлу, котрий ілюструє найпростіший випадок завдання посилання (рис. 5.1)

Приклад 5.1

< HTML>

< HEAD>

< TITLE> Приклад використання тегу < А> (завдання зовнішнього посилання)< /TITLE>

< /HEAD>

< BODY>

Тут можна подивитися різноманітні < A HREF=https://www.lib.ru> книги < /A> за інтересами

< P>

Нижче приведене те ж посилання, але з використанням атрибуту TITLE:

< /P>

< P>

Тут можна подивитися різноманітні < A HREF=https://www.lib.ru TITLE=”книги в бібліотеці lib.ru”> книги < /A> за інтересами

< /P>

< /BODY>

< /HTML>

Рис. 5.1. Завдання посилання

В результаті натискання на посилання в прикладі 5.1 отримуємо (рис. 5.2):

Рис. 5.2. Приклад зовнішнього посилання

Умовно всі посилання можна розділити на внутрішні, відносні (локальні) і зовнішні (віддалені).

Внутрішні – це посилання на об’єкти в межах одного документа. При використанні таких посилань необхідно задавати точку переходу, тобто використовувати контейнер < A> з атрибутом NAME. Внутрішні імена задаються за визначеними правилами. По-перше, вони повинні бути унікальними в межах одного Web-документу. По-друге, перед посиланням на внутрішнє ім’я ставиться символ #. Наприклад, якщо кінцева точка задається контейнером < A NAME=”ім’я”> текст < /A>, то посилання на цю точку буде задаватися контейнером < A HREF=”#ім’я1”> якір < /A>.

Відносні – це посилання на інші ресурси (Web-сторінки чи інші файли) в межах одного й того ж Web-сервера.

Зовнішні – це посилання на ресурси інших Web-серверів.

В прикладі 5.1 використовується зовнішнє посилання. Слід звернути увагу на правильність завдання URL зовнішнього посилання. Для порівняння наведений наступний приклад, який відрізняється від попереднього тим, що URL зовнішнього посилання представлений не в повному форматі. Різницю можна замітити, якщо порівняти зміст, відображений в нижньому рядку вікна браузера. В даному випадку, в прикладі 5.2, вказані посилання будуть виглядати як локальні, тобто вони вказують на деякий ресурс www.lib.ru, що знаходиться в тому ж каталозі, що і файл самої Web-сторінки, яка містить лістинг приклада 5.2.

Рис. 5.3. Приклад неправильного завдання зовнішнього посилання

Приклад 5.2

< HTML>

< HEAD>

< TITLE> Приклад неправильного завдання зовнішнього посилання < /TITLE>

< /HEAD>

< BODY>

Тут можна подивитися різноманітні < A HREF=www.lib.ru> книги < /A> за інтересами

< P>

Нижче приведене те ж посилання, але з використанням атрибуту TITLE:

< /P>

< P>

Тут можна подивитися різноманітні < A HREF=www.lib.ru TITLE=”книги в бібліотеці lib.ru”> книги < /A> за інтересами

< /P>

< /BODY>

< /HTML>

В результаті натискання на посилання в прикладі 5.2 будемо мати наступну картину (рис. 5.3)

В прикладі 5.3 наведений лістинг вмісту файлу, котрий ілюструє найпростіший випадок завдання внутрішнього посилання (рис. 5.4)

Рис. 5.4. Завдання внутрішнього посилання

Приклад 5.3

< HTML>

< HEAD>

< TITLE> Приклад завдання внутрішніх посилань)< /TITLE>

< /HEAD>

< BODY>

Список рецептів < BR>

Зміст < BR>

< A HREF=”#торти”> Рецепти тортів < /A> < BR>

< A HREF=”#салати”> Рецепти салатів < /A> < BR>

< A HREF=”#перші страви”> Рецепти перших страв < /A> < BR>

< BR>

< HR ALIGN=”LEFT” NOSHADE WIDTH=250 SIZE=5>

< BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR>

< A NAME=”торти”> Рецепти різноманітних тортів < /A> < BR>

(тексти рецептів)

< BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR>

< A NAME=”салати”> Рецепти різноманітних салатів < /A> < BR>

(тексти рецептів)

< BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR> < BR>

< A NAME=”перші страви”> Рецепти різноманітних перших страв < /A> < BR>

(тексти рецептів) < P>

< /BODY>

< /HTML>

В результаті натискання на посилання, сторінка матиме вигляд (рис. 5.5)

Рис. 5.5. Внутрішнє посилання

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

Розглянемо випадок, коли маються окремі файли, що містять рецепти тортів (файл tort.html), салатів (файл salat.html) і перших страв (файл strav1.html). Для завдання посилань на ці файли створюється ще один файл, лістинг якого приведений в прикладі 5.4. Передбачається, що всі ці файли розташовані в тій же папці, що файл, текст якого наведений в прикладі 5.4 (рис. 5.6).

Приклад 5.4

< HTML>

< HEAD>

< TITLE> Приклад завдання локальних посилань)< /TITLE>

< /HEAD>

< BODY>

Список рецептів < BR>

Зміст < BR>

< A HREF=”tort.html”> Рецепти тортів < /A> < BR>

< A HREF=”salat.html”> Рецепти салатів < /A> < BR>

< A HREF=”strav1.html”> Рецепти перших страв < /A> < BR>

< BR>

< HR ALIGN=”LEFT” NOSHADE WIDTH=250 SIZE=5>

< /BODY>

< /HTML>

Рис. 5.6. Приклад завдання локальних посилань

При натисканні, наприклад, на рецепти салатів, відкривається сторінка з рецептами, яка зберігається в тій же папці, що й основний файл (рис. 5.7).

Рис. 5.7. Результат локального посилання

В прикладі 5.5 наведений фрагмент файлу, котрий містить посилання на avi-файл і адресу електронної пошти. Передбачається, що avi-файл міститься у папці, яка знаходиться вище по відношенню до файлу лістингу (рис. 5.8).

Приклад 5.5

< HTML>

< HEAD>

< TITLE> Приклад посилання на avi-файл і адресу електронної пошти < /TITLE>

< /HEAD>

< BODY>

< H1> Це сайт відмінника навчання курсанта Васькіна.< /H1>

< P> Мені дуже подобається фільм про майбутніх захисників вітчизни < A HREF=”../Bezumtcy.avi”> Bezumtcy < /A> < BR>

Пишіть мені, хоч хто-небудь!!!

Моя адреса:

< A HREF=”mailto: vasya@ukr.net”> vasya@ukr.net < /A>

< /BODY>

< /HTML>

Рис. 5.8 Приклад посилання на avi-файл і адресу електронної пошти

В прикладі 5.6 наведений контейнер < A>, котрий містить внутрішнє посилання, розташоване в іншому html-документі поточного каталогу.

Приклад 5.6

…

< A HREF=”tort_and_cakes.html#торти”> Рецепти тортів < /A>

…

Питання для самоперевірки.

1. Призначення гіперпосилань. Який контейнер використовується для їх створення.

2. Що ще можна використовувати замість тексту в гіперпосиланнях.

3. Що таке якір.

4. Які типи посилань використовуються. Їх призначення і відмінності.

Завдання до самостійної роботи.

1. Написати програму, котра б створювала Web-сторінку з набором текстів пісень (не менше трьох, і одного виконавця). На початку сторінки необхідно навести перелік назв цих пісень, котрі будуть внутрішніми посиланнями на самі тексти пісень. Файл назвати song.html.

2. Написати програму з внутрішніми посиланнями. Основний файл з іменем singer.html, в котрому б приводилась інформація про виконавця-співака і зовнішнє посилання на тексти його пісень. Вибір посилання повинен призводити до завантаження файлу song.html (завдання 1).

3. До наведених вище завдань додати зовнішні посилання на файли аудіо і відео. А саме, в кінці кожного тексту пісні йде посилання на саму пісню (файл avi), при активізації котрої відбувається загрузка звукового файлу або відеокліпу вказаної пісні.