§ 2. Оформлення тексту

 

У цьому параграфі ви вивчите:

•  формування рядків, абзаців, заголовків у HTML -документі;

•  прості прийоми форматування тексту;

•  створення маркованих і нумерованих списків.

 

Звичним для людини зображенням інформації є текст, тому він звичайно займає велику частину Web -сторінок. У цьому параграфі ми розглянемо основні можливості оформлення тексту, передбачені в HTML .

 

Формування абзаців і рядків

При створенні Web -сторінок потрібно прагнути до лаконічних текстів, які чітко розділені на абзаци. Для створення абзацу у мові HTML передбачено кілька можливостей. Найпростіша з них - це використання тегів <Р> і </Р>, між якими вміщений текст абзацу. Втім, кінцевий тег </Р> в елементі абзацу не є обов'язковим.

Для переведення рядка (розрив рядка) застосовується тег < BR >. Цей тег є порожнім елементом, що змушує броузер перевести текст на новий рядок. Теги < BR > зручні при оформленні поштових адрес, наборі віршів тощо.

Нижче наведено приклад використання тегів <Р> і < BR > для відображення на Web -сторінці відомої байки.

<HTML>

<HEAD>

<TITLE>Байка «Ведмежий суд»</TITLE>

</HEAD>

<BODY>

<P>Ведмежий суд</P>

Лисичка подала у суд таку бумагу:<BR>

Що бачила вона, як попелястий Bіл<BR>

На панській винниці пив, як мошенник, брагу, <BR>

Їв сіно, і овес, і сіль. <BR><BR>

Є. П. Гребінка

</BODY>

</HTML>

Вміст HTML -елементів звичайно записується з відступами, як у наведеному прикладі. Це не впливає на зовнішній вигляд самої Web -сторінки, але полегшує читання коду. Сторінка з наведеним кодом показана на мал. 74.1.

 

Задання заголовків

Заголовки поділяють HTML -документ на логічно закінчені блоки. Завдяки заголовкам відвідувач Web -сторінки може отримати уявлення про її вміст. Для задания заголовків використовуються парні теги <Н1> (заголовок 1-го, найвищого рівня), <Н2> (заголовок 2-го рівня) тощо. Усього передбачено 6 рівнів заголовків.

Програма броузера відображає заголовки більшим (напівжирним) шрифтом. Чим вище рівень заголовка, тим більший розмір шрифту. Заголовки відокрем­люються порожніми рядками від іншого тексту.

Наприклад, замінимо у наведеному вище коді абзац із назвою байки (мал. 74.1) на заголовок Н1:

<H1> Ведмежий суд </H1>

 

Вирівнювання абзаців

Абзаци, що задаються тегами <Р> і < BR >, за умовчанням вирівнюються по лівому краю сторінки (див. мал. 74.1). Змінити таке вирівнювання можна за допомогою атрибута align . Значення align = " center " задаватиме вирівнювання по центру, значення align = " right " - вирівнювання по правому краю сторінки (вирівнювання по лівому краю визначається атрибутом align = " left "). Наприклад, заголовок

<H1 align ="center">Ведмежий суд </H1>

розташовуватиметься по центру сторінки.

 

Форматування символів

Параметри шрифту, який використовується для відображення тексту на Web -сторінках, найпростіше визначити за допомогою елемента FONT . Для цього елемента передбачені такі атрибути: face (гарнітура шрифту або список допустимих шрифтів); color (колір шрифту) і size (розмір шрифту). Наприклад, ви хочете в наведеному прикладі байки перше слово «Лисичка» показати шрифтом Агіаі жовтогарячого кольору. Для цього введіть у документ:

<font face="arial" color="orange ">Лисичка</font>

Щоб задати будь-яке зображення шрифту, використовуються теги: <В> . . . </В> - для задання напівжирного тексту; <І ... </І> - для задання курси­ного тексту і <U> . . . </U> - для підкресленого тексту. Наприклад, якщо треба відобразити курсивом ім'я автора у тому самому прикладі (мал. 74.1), вставте в код сторінки такий тег:

<I>Є.П. Гребінка </I>

 

Задання кольору шрифту і фону сторінки

У попередньому пункті ви дізналися, як за допомогою елемента font задати колір шрифту для фрагментів тексту. Якщо ж потрібно визначити колір шрифту для всієї сторінки, то використовується атрибут text у тегу <body>. Наприклад, тег

<body text =" red ">

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

Колір фону всього HTML -документа визначається атрибутом bgcolor тегу <body>. Наприклад, тег

<body bgcolor =" olive ">

призначає оливковий колір для фону Web -сторінки.

 

Приклад оформлення Web -сторінки

Проілюструємо застосування описаних засобів HTML на прикладі Web -сторінки із байкою (мал. 74.1). Удосконалимо код цієї сторінки, щоб вона мала цікавіший вигляд. Задамо фоновий колір сторінки - темно-фіолетовий, колір шрифту для всієї сторінки - білий. Заголовок байки оформимо як Н2 і вирівняємо по центру. Ініціали і прізвище автора відобразимо курсивом із вирівнюванням по правому краю. Все це можна виконати за допомогою простого коду:

<html>

<head>

<title>Байка "ведмежий суд"</title>

</head>

<!— присвоєння кольору фону і тексту сторінки —>

<body bgcolor="darkviolet" text="white">

<!— Заголовок, вирівняний по центру— >

<H2 аlіgn="center">Ведмежий суд</H2>

<!— Початок основного тексту байки —>

Лисичка подала у суд таку бумагу:<BR>

Що бачила вона, як попелястий Віл <BR>

На панський винниці пив, як мошенник, брагу, <BR>

Їв сіно, і овес, і сіль.

<!— Рядок із прізвищем автора вирівнюємо по правому краю —>

<P align="right"><I>Є.П. Гребінка </I>

</body>

</html>

Наберіть цей код у текстовому редакторі і збережіть його у вигляді файла Байка. htm. Відкривши файл у броузері Internet Ехрlorer, ви отримаєте сторінку, наведену на мал .74.2. Порівняйте цю сторінку з мал . 74.1 і проаналізуйте, які теги й атрибути відповідають за зміну зовнішнього вигляду сторінки.

 

Створення списків

Згадайте, який вигляд мають списки, створювані засобами процесора Word. Мова HTML також має у своєму роз­порядженні спеціальні елементи, що дозволяють подавати текстову інформацію у вигляді подібних списків.

У HTML розрізняють марковані (неупорядковані) і нумеровані (упорядковані) списки, причому код списку є структурою із вкладених елементів. Зовнішнім елементом є пари тегів:

<UL>. . . </UL> - для маркованого списку;

<OL> . . . </OL> - для нумерованого списку.

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

<LI>Вміст рядка списку

Отже, кількість елементів LI дорівнює кількості рядків у списку. Імена наведених вище тегів є скороченнями слів: UL ( Unordered List ) - неупорядкований список, тобто список без номерів; OL ( Ordered List ) - упорядкований список LI ( List Item ) - елемент списку.

Іноді на початку списку розташовують заголовок, що виділяється парним тегом <LH>. . . </LH>. Ім'я цього тегу LH - скорочення від List Header (заголовок списку).

 

Марковані списки

Для отримання маркованого списку на Web -сторінці маємо набрати такий код:

<UL>

<LH ><!— Заголовок списку— ></ LH>

<LI ><!— Перший рядок списку— >

<LI ><!— Останній рядок списку— >

</UL>

Наприклад, ви хочете оформити на сторінці список жителів Середзем'я (за Д.Толкієном). Це можна зробити так (елемент LH опускаємо):

<HTML>

<HEAD>

<TITLE>Маркований список</TITLE> </HEAD> <BODY>

<H2>Жителі Середзем'я</Н2> <UL>

<LI>Хобіти <LI>Люди <LI>Oрки <LI>Ельфи </UL> </BODY> </HTML>

Зовнішній вигляд цієї сторінки наведено на мал. 74.3, а. Рядки списку від­значені маркерами - маленькими затемненими кружечками, які прийняті за умовчанням. Якщо ви хочете змінити цей вид маркерів, можете додати в елементи списку атрибут type ="square" (маркер у вигляді заповненого квадратика) або type ="circle" (маркер - незаповнений кружечок).

 

Нумеровані списки (елемент OL )

Нумерований список формується із застосуванням зовнішнього парного тегу <OL></OL>, що обрамовує елементи списку. Нижче наведений код документа з нумерованим списком, а на мал. 74.3, б показано, як його відображає броузер Internet Ехрlorer.

<HTML> <HEAD>

<TITLE>Нумерований список</TITLE> </HEAD> <BODY>

<H2>Бої і битви Середзем'я</H2> <OL>

<LI>Битва поблизу Мінас-Тіриту;

<LI>Бій двох твердинь; <LI>Напад на Гондор; <LI>Заключний бій; <LI>Битва в Хобітанії; </OL> </BODY> </HTML>

У наведеному прикладі нумерація елементів списку виконана арабськими цифрами. Стиль нумерації змінюється за допомогою атрибута type елемента LI . Наприклад, type = A відповідає нумерації великими літерами англійського алфавіту (А, В, С,...), type = a - це нумерація малими англійськими літерами (а, b, с,...); type = I - нумерація за допомогою римських цифр ( I , II, III,...).

 

Як повинен подаватись текст Web -сторінок

При наповненні Web -сторінок умістом, потрібно враховувати, що відвідувачі звичайно приходять на сайт за інформацією. Основним способом подання інфор­мації є текст, тому від того, як він буде складений і оформлений, залежить загальне сприйняття вашого сайту і його корисність для відвідувачів. При розміщенні тексту на Web -сторінках дотримуйтеся таких правил.

•  Текст повинен бути лаконічним і зрозумілим при читанні з першого разу. З тексту бажано видалити всі зайві звороти і слова, без яких цілком можна обійтися. Заголовки також повинні бути зрозумілими й інформативними. При перерахуваннях різних об'єктів, понять чи подій користуйтеся маркованими списками. Намагайтеся заощаджувати мережний час ваших відвідувачів і пам'ятайте, що більшість користувачів переглядають сторінки «по діагоналі», звертаючи увагу тільки на заголовки і виділені слова.

•  Великі за обсягом тексти краще розбивати на кілька сторінок, пов'язаних гіперпосиланнями. Якщо текст має заголовки різного ієрархічного рівня, то бажано цю ієрархію відбити в структурі пов'язаних між собою сторінок. Це допоможе користувачеві краще орієнтуватися у великому текстовому матеріалі.

•  Тексти Web -сторінок повинні бути написані грамотно. На жаль, не всі сторінки в WWW мають цю якість. Неграмотно написані тексти ставлять під сумнів поданий у них матеріал. Пам'ятайте, що ваші тексти, опубліковані в Інтернеті, стають доступними для багатьох людей.

Отже, ви вивчили прості прийоми і правила розміщення на Web -сторінках тексту. Далі ми розглянемо використання на сторінках посилань, графічних елементів, таблиць.

Сфера комп'ютерної графіки й електронної верстки, пов'язана з компонуванням і оформленням Web -сторінок, називається Web -дизайном.

У наступних параграфах ми будемо розглядати не тільки запис кодів для вставки тих чи інших HTML -елементів у документ, а й розміщення їх на сторін­ках з точки зору Web -дизайну.

 

Контрольні запитання

•  Назвіть відомі вам елементи формування окремого рядка (абзацу) у HTML -документі.

•  Які елементи задають ієрархічні заголовки?

•  Який атрибут застосовується для вирівнювання абзаців?

•  За допомогою яких тегів і атрибутів задаються параметри шрифту?

•  Які теги задають курсивний і підкреслений шрифт?

•  Як задати колір шрифту на сторінці?

•  Опишіть структуру коду для маркованого списку.

•  Який атрибут змінює тип маркера?

•  За допомогою яких елементів створюється нумерований список?

•  Як змінити стиль нумерації в списку?