Форматування HTML текст

ЗАГОЛОВОК

1 Структура HTML-документа
2 Форматування тексту за допомогою HTML
2.1 Завдання полів на Web-сторінці
2.2 Завдання кольору на Web-сторінці
2.3 Вирівнювання тексту на Web-сторінці
2.4 Завдання заголовків HTML-документа
2.5 Завдання розміру шрифту
2.6 Завдання шрифту по імені
2.7 Фізична форматування символів
2.8 Логічне форматування символів
2.9 Вставка спеціальних символів
2.10 Виділення тексту горизонтальною лінією
Приклад №1
Приклад №2
Приклад №3

Для підготовки Web-документа використовується мова гіпертекстової розмітки HTML (HyperText Markup Language). Як це випливає з назви, HTML не є алгоритмічною мовою програмування, а, як мова розмітки, володіє коштами представлення тексту та зображень на екрані у вигляді Web-сторінок. HTML також дозволяє працювати з гіпертекстовими посиланнями, за допомогою яких здійснюється доступ до інших Web-сторінок.

Стандарт HTML створений та підтримується некомерційній міжнародною організацією W3C (World Wide Web Consortium).
Оскільки HTML-документ записується у форматі ASCII, для створення Web-сторінок може бути використаний будь-який текстовий редактор, який працює з простим текстом, тобто таким текстом, який не містить службової інформації. Такими редакторами є, наприклад, NotePad (Блокнот) або FAR.

Після того, як за допомогою текстового редактора HTML-документ створений, він повинен бути збережений на диску у вигляді файлу з розширенням .htm або .html. Це дозволить після клацання миші з цього файлу запустити браузер, який здійснить формування Web сторінки згідно з даними HTML-документом. Можна діяти по-іншому. Спочатку запустити браузер, а потім у його полі адреси (Address) вказати шлях до файлу з даними HTML-документом.
Браузером (browser, від англ. to browse - вистежувати) називається програма, яка виконує наступні основні функції:

після завдання користувачем адреси Web сторінки та натискання клавіші "перехід" ("Go") встановлює з допомогою http-протоколу з'єднання з Web-сервером, передає йому запит і отримує від нього необхідну Web-сторінку у вигляді HTML-документа;
перетворює отриманий HTML-документ у зображення не екрані користувача, яке називається Web-сторінкою (якщо HTML-документ міститься на комп'ютері користувача, то з'єднання з Web-сервером не є обов'язковим).

Прикладами браузерів можуть служити такі програми, як Microsoft Internet Explorer (MIE), Mozilla Топки, Apple Safari, Netscape Navigator, Opera та ін.
З допомогою HTML можна створювати тільки статичні Web-сторінок. Для створення динамічних сторінок необхідно спільне використання HTML з такими мовами, як JavaScript, PHP та ін.

Заголовок

1 Структура HTML-документа

HTML-документ складається зі слів двох типів: службових слів і власне тексту, що виводиться на екран. Службові слова називаються тегами (tags) і беруться в кутові дужки < >. У літературі теги називають також дескрипторами і операторами. Теги бувають подвійними, звані контейнерами (container), і поодинокими. Прикладом контейнери служать теги, які задають початок HTML-документу: <HTML> і його закінчення: </HTML>. Тег закінчення контейнера відрізняється від тега його початку наявністю символу "/". Текст, що знаходиться між початком контейнера і його закінченням, є його вмістом.
Прикладом одиночного тега служить тег перекладу на новий рядок: (браузерами не обробляються повледовательности символи пробілів, текстових редакторів переведення каретки CR і переходу на новий рядок LF).
В HTML-документі в найменуваннях тегів та їх параметрів, а також у словах, які є їхніми значеннями, великі та малі літери не розрізняються. Надалі будемо дотримуватися наступної угоди: найменування тегів і параметрів будуть зазначатися заголовними літерами, а їх значення - малими літерами.
HTML-документ має наступну базову структуру, яка складається з заголовка HTML-документа і тіла HTML-документу:

У заголовку HTML-документа, який знаходиться всередині тега-контейнера <HEAD> . . . </HEAD>, міститься інформація, яка не виводиться в основне поле Web-сторінок. Вона використовується браузером для інших цілей. Наприклад, за допомогою контейнера <TITLE>. . . </TITLE> задається заголовок Web-сторінки, що пишеться вгорі екрану. Цей заголовок зазначається в переліку відвіданих сторінок і в інших місцях. Тому, якщо розробник Web сторінки хоче, щоб його сайт був затребуваний, йому необхідно уважно поставитися до вмісту заголовка Web сторінки.
Дана Web-сторінка при використанні браузера MIE має наступний заголовок:

Форматування HTML тексту - Microsoft Internet Explorer

Останні три слова додає сам браузер.
В тілі HTML-документа, який знаходиться всередині тега-контейнера <BODY> . . . </BODY>, міститься текст, який буде безпосередньо виводиться на екран. Прикладом (№1) найпростішого HTML-документа, що виводить на екран традиційне повідомлення "Привіт, світ!", є наступний текст:

Приклад 1

<HTML>
<BODY>
Привіт, світ!
</BODY>
</HTML>

Заголовок

У цьому прикладі і надалі при описі HTML-документів будемо дотримуватися наступного правила - теги, їх параметри і значення будуть мати темно-синій колір, а вихідний текст, який форматується і виводиться на екран темно-зеленого кольору.
пЩелкнув по кнопці "Приклад 1" ми отримаємо на екрані результат виконання цього HTML-документу: повідомлення "Привіт, світ!" знаходиться у верхньому лівому куті екрану, має чорний колір і невеликий розмір букв (ці параметри, задані за замовчуванням) і виглядає непривабливо. Щоб зробити його вигляд більш приємним, необхідно виконати форматування тексту, тобто поставити його колір, розмір, вирівнювання і інші параметри засобами HTML (див. розділ 2).

Щоб повернутися назад до цієї сторінки необхідно клацнути по стрілкою Back (Назад) на панелі управління браузера.
пнатисніть побачити вихідний текст поточної Web сторінки необхідно на панелі управління браузера вибрати View (Вид), а потім Source (Перегляд HTML-коду).

Зазначимо, що сучасні браузери здатні розуміти і спрощену структуру документа. Наприклад, HTML-документ, що складається з одного рядка:

Привіт, світ!

дасть на екрані таке ж повідомлення. Але ми надалі будемо дотримуватися повної форми HTML-документа.
Текст може бути розбитий на параграфи (текстові блоки). Для вказівки параграфа використовується контейнер . . . :


пТекст
ппараграфа

На екрані між параграфами вставляється порожній рядок. Тег закінчення параграфа можна не вказувати. У цьому випадку тег початку наступного параграфа або </BODY>) буде означати закриття поточного.

Для вказівки одне - і багаторядкових коментарів в HTML-документі використовується така конструкція:

Зазначимо, що коментарі поміщаються в HTML-документі тільки між тегами. Зразок використання коментарю наведено в прикладі № 2

Заголовок

2 Форматування тексту за допомогою HTML

2.1 Завдання полів на Web-сторінці

Для завдання лівого, правого, верхнього і нижнього поля документа на Web-сторінці використовуються відповідно параметри LEFTMARGIN, RIGHTMARGIN, TOPMARGIN і BOTTOMMARGIN тега <BODY>. Значення кожного поля вказується в мілісекундах. Наприклад, верхнє поле розміром 50 пікселів задається так:

<BODY TOPMARGIN=50 >

Заголовок

2.2 Завдання кольору на Web-сторінці

Коли браузер виводить на екран текст, то як кольору тексту та кольори фону він використовує значення, встановлені за промовчанням (у прикладі 1 колір тексту - чорний, а колір фону - світло-сірий). Проте в HTML є засоби для завдання і зміни кольору тексту, так і кольору фону. Для цього використовуються відповідно параметри TEXT і BGCOLOR тега <BODY> Якщо необхідно вказати певний колір тільки для частини тексту, то використовується параметр COLOR тега В HTML є два способи визначення значення кольору.
пВ першому способі значення кольору задаються за допомогою трьох складових квітів у вигляді цифрового значення #RrGgBb, де:

Rr - дві 16-ричние цифри, які задають компоненту червоного кольору;
Gg - дві 16-ричние цифри, які задають компоненту зеленого кольору;
Bb - дві 16-ричние цифри, які задають компоненту синього кольору.

Значення компоненти кожного кольору може змінюватися від 0 до FFh, тобто від 0 до 255. Наприклад, значення #FF0000 задає яскраво-червоний колір, #00AA00 - темно-зелений, #С0С0С0 - сріблястий. Таким способом можна задати більше 16 млн (2 24) кольорів.
Другим способом можна задати лише 16 основних значень кольору у вигляді символічних (англійських) назв. У таблиці 1 наведено ці кольори, їх символічні назви та чисельні значення у вигляді #RrGgBb.

Таблиця 1
Колір	Символічну назву	Чисельне значення
Морської хвилі	Aqua	#00FFFF
Чорний	Black	#000000
Блакитний	Blue	#0000FF
Малиновий	Futsia	#FF00FF
<Сірий/td>	Gray	#808080
Зелений	Green	#008000
Яскраво-зелений	Lime	00FF00
Темно-червоний	Maroon	#800000
Темно-синій	Navi	#000080
Оливковий	Olive	#808000
Пурпурний	Purple	#800080
Червоний	Red	#FF0000
Срібний	Silver	#C0C0C0
Темної морської хвилі	Teal	#008080
Білий	White	#FFFFFF
Жовтий	Yellow	#FFFF00

Зразки завдання кольору на Web-сторінці засобами HTML наведені в прикладі № 2

Заголовок

2.3 Вирівнювання тексту на Web-сторінці

Кожен пункт тексту може бути вирівняно по лівому краю, по правому краю, по обох краях (по ширині) або по центру екрана. Для цього використовується параметр ALIGN тега . Він має такі значення:

left: параграф вирівняно по лівому краю (задається за замовчуванням);
right: параграф вирівняно по правому краю;
center:параграф вирівняно по центру;
justify:параграф вирівняно по ширині екрану.

Наприклад:

 Текст вирівняно по правому краю

Текст також може бути вирівняно по центру з допомогою тега-контейнера <CENTER> . . .</CENTER>:

<CENTER> Текст вирівняно по центру </CENTER>

У цьому випадку текст між тегами <CENTER> </CENTER> виводиться по центру нового рядка екрану.

Заголовок

2.4 3адание заголовків HTML-документа

В HTML-документі може бути використане до шести заголовків різного рівня. Вони задаються за допомогою тегів - контейнерів <H1> . . . </H1> (найвищий рівень) <H6> . . . </H6> (найнижчий рівень).
Шрифти заголовків різних рівнів відрізняються один від одного та від основного тексту розміром і іншими особливостями, заданими за промовчанням у браузері.
Колір заголовків задається або параметром TEXT тега <BODY>, якщо параметр вказаний, або приймається за замовчуванням.
Заголовки можуть бути вирівнюються, так само як і параграфи, за допомогою параметра ALIGN. За замовчуванням для заголовків задано вирівнювання по лівому краю екрана.
пВ прикладі № 2 показано використання заголовків і засобів вирівнювання тексту на Web-сторінці.

Заголовок

2.5 3адание розміру шрифту

Для визначення розміру шрифту на Web-сторінці використовується параметр SIZE тега-контейнера . . . . Текст, зазначений між тегами буде мати необхідний розмір. Розмір тексту, наступного далі, буде визначатися значенням парамета TEXT тега <BODY> або буде братися за замовчуванням.
пЗначения параметра SIZE задаються не в пунктах (1 пункт дорівнює 1/72 дюйма), а у відносних одиницях від 1 до 7. Співвідношення між цими одиницями та пунктами наведено в таблиці 2.

Таблиця 2
Відносні одиниці	Пункти (pt)
1	9
2	10
3	12
4
5	18
6	24
7	36

Наприклад,

 Розмір шрифту 18 pt

Можна зробити й так: поставити за допомогою тега <ДОБКІН> з параметром SIZE базовий розмір шрифту. А потім за допомогою тега з параметром SIZE, який приймає значення від -4 до +4, змінити базовий розмір на необхідну величину.
Наприклад,

<ДОБКІН SIZE=4>
 Розмір шрифту 24 pt

За допомогою тегів-контейнерів <BIG> . . . </BIG> . . . можна встановити текст відповідно великого і малого розміру, не вказуючи конкретно розмір шрифту. Цю величину задає сам браузер.

Заголовок

2.6 3адание шрифту по імені

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

 Шрифт гельветика

Якщо на стороні користувача встановлено перший із зазначених шрифтів - Arial Cyr, то рядок "Шрифт гельветика" буде відображатися на екрані з використанням саме цього шрифту. Інакше буде зроблена спроба відобразити рядок шрифтом Arial, а потім - Helv DL. Якщо виявиться, що в системі користувача немає жодного з перерахованих шрифтів, рядок буде відображена шрифтом, який встановлений в браузері для використання за умовчанням.
пОтметим, що значення параметра FACE взяті в подвійні лапки, оскільки імена шрифтів містять пробіли. Але в HTML не буде помилкою вказувати значення будь-якого параметра в лапках. Тому, якщо є сумніви в завданні значень параметрів, краще вказати їх у лапках.

У прикладі (№2) задані верхнє поле, колір і вирівнювання тексту, типи та розміри шрифту на Web-сторінці засобами HTML.

Приклад 2

<HTML>
<HEAD>
<TITLE> HTML: вирівнювання тексту, завдання кольору, розміру і типу шрифту </TITLE>
</HEAD>

<BODY TOPMARGIN="50" TEXT=blue BGCOLOR= #E0E0FF>
<H1 ALIGN=center>ЗАГОЛОВОК 1 РІВНЯ</H1>

 Текст маленького розміру (SMALL) червоного кольору вирівняно по правому краю екрана 
 Вирівнювання тексту, розмір (12 pt) і тип шрифту, задані за умовчанням
 Текст вирівняно по ширині екрану з використанням шрифту Courier лілового кольору розміром 24 pt 
</BODY>
</HTML>

Заголовок

2.7 Фізична форматування символів

У HTML передбачено кілька тегів-контейнерів для фізичної форматування символів. Ці теги визначають зовнішній вигляд символів явним чином в протилежність тегам логічного форматування (див. п. 2.8):

. . . : виділяє текст жирним шрифтом;
. . .: виділяє текст курсивом шрифтом (курсивом);
. . .:виділяє текст підкресленням;
<STRIKE> . . .</STRIKE>:виділяє текст перекресленням;
<TT> . . .</TT>:задає текст з фіксованою шириною символів (наприклад, листинги програм);
. . .вказує підрядковий (нижній) індекс;
. . .вказує надрядковий (верхній) індекс;
<BLOCKQUOTE> . . . </BLOCKQUOTE>: задає ліве поле;
<PRE> . . . </PRE>(preformatted - попередньо відформатований): виводить текст на екран з відпрацюванням всіх знаків пробілів, табуляції, переведення рядка і нового рядка.

Заголовок

2.8 Логічне форматування символів

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

<CITE> . . . </CITE>: цитата;
. . . (emphasis - наголос): текст, який має велике значення;
. . . (сильний): сильне виділення тексту;
<SAMP> . . . </SAMP>(sample - зразок): зразок повідомлень, які виводяться на екран;
<KBD> . . . </KBD>(keyboard - клавіатура):текст, що вводиться з клавіатури;
<CODE;> . . . </CODE>(code - код): фрагмент вихідного тексту;
<VAR> . . . </VAR>(variable - мінлива): ім'я змінної.

На Web-сторінках іноді вказують абревіатуру певного терміну або поняття без його розкриття, наприклад, "ОЗУ" замість "Оперативне запам'ятовуючий пристрій". Щоб пошукові системи в мережі Internet могли здійснювати пошук терміну не тільки за його аббреавитуре, але і по повному позначенню, а також в якості підказки для користувача Web-сторінки, використовується тег-контейнер <ACRONYM> абревіатура </ACRONYM>з параметром TITLE, який розкриває значення використовуваної абревіатури.
пВ прикладі №3 показано застосування цього тега для абревіатур МП і HT.

Заголовок

2.9 Вставка спеціальних символів

У HTML передбачено чотири спеціальних символів, призначених для службових цілей (для виділення елементів і їх значень параметрів). Це символи <, >, & і ". Вони інтерпретуються браузером за особливим і вимагають заміни для їх включення в текст, як звичайних символів. Заміна потрібно і для представлення символів права © і реєстрації ®. У таблиці 3 наведені ці заміни.

Таблиця 3
Символ	Заміна
<	<
>	>
&	&
"	"
©	©
®	©

у загальному випадку В HTML-документ можна вставити будь-який символ, знаючи його ASCII-код. Для цього замість символу підставляється така послідовність символів: &#XX, де ХХ - десяткове значення ASCII-коду символу.
пК спеціальних символів можна віднести і символ "неусувного пробілу" -   (no breaking space). Ці символи використовуються тоді, коли необхідно помістити на Web-сторінці кілька пробілів поспіль, оскільки браузери замінюють послідовності поспіль що йдуть прогалин у HTML-документі одним пропуском при виведенні документа на екран.

Заголовок

2.10 Виділення тексту горизонтальною лінією

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

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

ALIGN - визначає вирівнювання лінії і має такі значення:
- left - по лівому краю;
- right - по правому краю;
- center - по центру (задано по умалчанию).
COLOR - встановлює колір лінії.
NOCHADE - якщо вказано цей параметр, лінія зображується без тіні.
SIZE - висота лінії в пікселях.
WIDTH - ширина лінії, може виражатися або в пікселях, або у відсотках (%) від величини вікна браузера.

У прикладі №3 наведено HTML-документ, який здійснює фізична і логічне форматування символів на Web-сторінці, розділених горизонтальною лінією:

_blankПриклад 3

<HTML>
<HEAD>
<TITLE> Фізичний та логічний форматування символів
</TITLE>
</HEAD>
<BODY TEXT=000070>
<CENTER>

 Напівжирний шрифт 
<STRIKE> Перекреслений шрифт </STRIKE>
<TT> Шрифт фіксованої ширини символів
</TT>
 Формула води: H 2 O
<HR COLOR=EEEE00 SIZE=5 WIDTH=80%>
<CITE> Цитата: "Серед речей найбільшим є ніщо" </CITE>

<ACRONYM TITLE="Мікропроцесори "> МП
</ACRONYM>
фірми Intel підтвердили ефективність технології
<ACRONYM TITLE="HyperThreading"> HT
</ACRONYM>
</CENTER>
</BODY>
</HTML>

Заголовок