Лекція №4

ФОРМАТУВАННЯ ТЕКСТУ

План

1. Заголовки

2. Центрування тексту і графіки

3. Абзаци і розривання рядків

4. Виділення тексту і різноманітні модифікації

5. Теги вибору шрифту

6. Графіки і формули

1. Заголовки

Заголовки позначають початки поділів документа. У стандарті визначено 6 рівнів заголовків: від НІ до Н6. Текст, оточений тегами <Н1></Н1>, утворюється великим - це основний заголовок. Якщо текст оточений тегами <Н2></Н2>, те він виглядає декілька менше (підзаголовок); текст усередині <НЗ></Н3> ще менше і так далі до <Н6></ Н6>.

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

Стандарт мови нараховує 11 атрибутів у тега заголовок. Роздивимося тільки ALIGN, тому що інші в більшості програм інтерпретаторів не реалізовані.

Можливі значення атрибута ALIGN:

Значення	Опис застосування
Left	Вирівнювання по лівому краю.
Right	Вирівнювання по правому краю
Center	Центрування
Justify	Вирівнювання по лівому і правому краям (реалізовано не у всіх браузерах)

По умовчанню текст HTML вирівнюється по лівому краї і не вирівнюється по правому, тобто початок рядків знаходиться на однім рівні, а кінці - на різних. Частіше усього, що утворюється при цьому текст із рівними проміжками між словами виглядає краще. Оскільки вирівнювання по лівому краї задається автоматично, атрибут ALIGN=LEFT можна опустити.

Центрування тексту і графіки

Є декілька засобів отцентрувати текст або графіку. У специфікаціях HTML 3.0 пропонується користуватися тегом <ALIGN=CENTER>. Проте цей тег використовується не для всіх об'єктів HTML- сторінки, тому Netscape додав тег <CENTER>, що центрує будь-які об'єкти і підтримується браузерами Netscape Navigator, Microsoft Explorer і деякими іншими. До тегу <CENTER> потрібно ставитися з обережністю. Який-небудь браузер може його взагалі проігнорувати, і на сторінці виявиться вирівняний по лівому краю текст.

Абзаци і розірвання рядків

Для розбивки тексту на параграфи використовується тег <Р>. У ньому використовуються атрибут ALIGN, що визначає вирівнювання абзацу що й у заголовках.

Приклад:

<Р ALIGN=CENTER> Це текст абзаца </Р>

Тег <BR> - примусовий переклад рядка - використовується для того, щоб порушити стандартний порядок відображення тексту. При звичайному режимі інтерпретації програма інтерфейсу користувача відображає текст у робочому вікні, автоматично розбиваючи його на рядки. У цьому режимі існуючі в тексті кінці рядків ігноруються. Іноді для більшої промовистості потрібно почати пресу з нового рядка. Для цієї цілі і використовується тег BR. Атрибут CLEAR= у теге <BR> використовується для того, щоб зупинити в зазначеній вами точці «обтекание текстом» об'єкта і потім продовжити текст у порожній області за об'єктом. Текст , що продовжується за об'єктом , вирівнюється у відповідності зі значеннями LEFT, RIGHT або ALL

Таблиця значень атрибута CLEAR.

<BR CLEAR = LEFT>	Текст буде продовжено, починаючи з найближчого порожнього лівого поля
<BR CLEAR = RIGHT>	Текст буде продовжено, починаючи з найближчого порожнього правого поля
<BR CLEAR = ALL>	Текст буде продовжено, як тільки і ліве, і праве поля виявляться порожніми

Тег <NOBR> (No Break, без обриву) дає команду браузеру відображати весь текст в однім рядку, не обриваючи його. Якщо текст, укладений у теги <NOBR>, не поміститься на екрані, браузер додасть у нижній частині вікна документа горизонтальну смугу прокручування. Якщо ви хочете обірвати рядок у визначеному місці, поставте там тег <BR>.

Тег <PRE> - задає попередньо відформатований текст.

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

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

Використання прогалин і перекладів рядків точно відповідає вмісту в , межах елемента PRE.

Основний синтаксис

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

Можливий атрибут

WIDTH="ширина тексту в символах"

Значення WIDTH повинно бути дорівнює або більше, чим довжина самого довгого рядка. У принципі, атрибут WIDTH повинний забезпечувати браузер інформацією, щоб вибрати шрифт підхожого розміру або скорегувати відступи для уявлення тексту в необхідному виді. Але звичайно це не робиться браузерами, а самі Ви не можете встановити розмір шрифту, тому що елементи, які змінюють розмір шрифту неприпустимі в межах PRE. Наприклад, текст ширше 80 символів буде відображений неправильно, навіть якщо Ви використовуєте атрибут WIDTH. Ширина тексту в символах практично не підтримується

Виділення тексту і різноманітні модифікації

Для того, щоб виділити ключове слово або частина тексту, із метою притягнення до неї уваги, використовуються такі теги:

• <В> - жирний текст. Формат запису: <В> Жирний текст </В>

• <І> - Курсив. Формат: <І> Текст </1 >

• <U> - Підкреслення. Формат: <U> Текст </U>.

• <S> - Перечеркивание. Формат: <S> Текст </S>.

• <BLINK> - викликає мерехтіння тексту укладеного в нього.

• <SUB> - Підрядкові символи. Формат <SUB> Текст </SUB>

• <SUP> - Надрядкові символи. Формат < SUP > Текст </SUP>

• <BIG> - Текст, розташований між тегами <BIG> і </BIG> буде відображатися збільшеним шрифтом.

• <SMALL> - Текст, розташований між тегами <SMALL> і </SMALL> буде відображатися зменшеним шрифтом.

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

♦ <STRONG> - для виділення. Рекомендується використовувати замість <В>, тому що якщо виділення жирним заборонене або не можливо, те виділяє доступними засобами (підкресленням або кольором)

Основний синтаксис - <STRONG>текст </STRONG>

• <ЕМ> - Підкреслити (виділити) слово або фразу. Звичайно виділяє курсивом. Але якщо можливо, браузер може використовувати і підкреслення.

• <BLOCKQUOTE> - Виділення багаторядкового тексту. Еквівалентно абзацу, написаному жирним шрифтом.

Основний синтаксис

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

• <СІТЕ> - цитування (назва книги, або статті, або - еквівалент)

• <CODE> - код програми або еквівалент (наприклад, HTML)

• <SAMP> - службові повідомлення комп'ютера (висновок із програми, скрипти, команди і т.п.)

• <KBD> - текст, що повинний друкуватися на клавіатурі користувача; звичайно використовується для інструкцій.

• <VAR> показує, що частина тексту (звичайно слово) є змінною, тобто текстом, що може бути замінений різноманітними вираженнями.

• <HR> - Горизонтальне підкреслення (horizontal rule) – застосовується для поділу документа на частині. Не має завершальної частини.

♦ <PRE> - Відображення тексту без форматування (так, як є).

Теги вибору шрифту

Елементи FONT і BASEFONT пропонують багато можливостей для завдання розмірів шрифту в порівнянні з BIG і SMALL. Проте уникайте надмірного використання фізичної розмітки.

Ter FONT (ШРИФТ) дозволяє специфікувати накреслення, розміри шрифту (щодо до інших розмірів), його колір і т.д.

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

Основний синтаксис:

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

Можливі атрибути

Ім'я атрибута	Можливі значення	Смисл	Примітки
SJZE	Рядок	Розмір шрифту; цифра в діапазоні 1 -7 або ціле зі знаком, наприклад, або "-2"	Число зі знаком добавляється до поточного базового розміру шрифту, встановленого в теге <BASEFONT>, щоб одержати номер розміру в діапазоні 1-7
COLOR	Специфіка­ція кольору	Колір вмісту елемента FONT
FACE	Ім'я шрифту	Задає ім'я шрифту за допомогою рядка, що містить його ім'я.	Причому можуть бути присутнім декілька шрифтів, через кому. На той випадок, якщо необхідного шрифту немає. Підтримується не всіма браузерами.
POINT-SIZE	Число	Вказує розмір шрифту в стандартних пунктах	Тільки Netscape
WEIGHT	Число	Жирність накреслення	У діапазоні 100-900

Приклад:

<FONT FACE="Courier New, Arial" SIZE-7

COLOR=RED>word</FONT>

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

Дія цього елемента поширюється не на усе. У Netscape, приміром, BASEFONT не впливає на розмір шрифту в межах таблиці. (Таким чином, щоб установити розмір шрифту в межах таблиці, Ви повинні вставити елемент зміни шрифту в кожну комірку!)

Дійсні розміри шрифту встановлюються в залежності від браузера.

Основний синтаксис

<BASEFONT SIZE=n>

Можливі атрибути

Ім'я атрибута	Можливі значення	Зміст	Примітки
SIZE	Рядок	розмір шрифту; цифра в діапазоні 1-7
COLOR	Специфіка­ція кольору	колір вмісту елемента FONT
NAME	Ім'я шрифту	задає ім'я шрифту за допомогою рядка, що містить його ім'я.	Якщо не зазначений, то встановлюється Times New Roman або шрифт по умовчанню, встановлений у браузері.

Цей тег не має закриваючого і діє від місця свого розташування, до такого

тега <BASEFONT>. Приклад:

<P>This is text with default font size (3). </P> <BASEFONT SIZE=5>

<P>This is text with font size 5 with <FONT SIZE=l>some text</FONT> inserted with font size 1. </P>

Графіка, формули і т.п.

Підтримка зображень у HTML - шлях у світ графіки. Створення і маніпулювання зображеннями, графічними форматами й іншим графічним матеріалом не є частиною HTML. Оскільки різні браузери можуть не підтримувати деякі формати, то рекомендується використовувати формати GIF або JPEG, що підтримуються всіма поширеними програмами перегляду HTML. Для вставки зображення в документ використовується тег <IMG>

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

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

Позиціонування зображення забезпечується атрибутами елемента IMG.

Основний синтаксис

<IMG SRC="URL" АLТ="текст">

Можливі атрибути тега <IMG>

Ім’я атрибута	Можливі значення	Зміст	Примітки
SRC	URL	адреса зображення	обов'язковий
ALT	Рядок	текстовий опис зображення	Очевидно в браузерах, що не підтримують графіку, і коли зображення ще не завантажене або не доступно
ALIGN	TOP, MIDDLE, BOTTOM, LEFT, RIGHT	позиціонування зображення щодо поточного текстового рядка	по умовчанню BOTTOM
HEIGHT	Ціле	висота в пікселях	Див. нижче
WIDTH	Ціле	ширина в пікселях	Див. нижче
BORDER	Ціле	ширина бордюру (рамки) у пікселях	використовується, коли елемент IMG з'являється, як текст якоря; використовуйте BORDER=0 для придушення рамки
HSPACE	Ціле	ширина незаповненого простору безпосередньо зліва і справа від зображення в пікселях	Значення по умовчанню - мале ненульове число
VSPACE	Ціле	висота незаповненого простору вище і нижче зображення	Значення по умовчанню - мале ненульове число
USEMAP	URL	фрагмент ідентифікатора для сайта клієнта з картою уяви	карти визначені елементом МАР; імена карт - дошкульні до регістра набору символів
ISMAP	ISMAP	показує, що зображення є картою уяви, що реагує на натискання клавіші миші	коли користувач ."клікає" на зображенні, . цей атрибут забезпечує передачу координат курсору серверу
LOWSRC	URL	Малюнок у низькому дозволі	Спочатку завантажується і відображається цей малюнок, а потім завантажується великий варіант.

Атрибути WIDTH і HEIGHT при спільному використанні дозволяють програмам перегляду зарезервувати місце на екрані для зображення ще до того, як вони будуть передані по мережі. Це дозволяє користувачу почати читання, поки передача даних ще продовжується. Ці атрибути не призначені для автоматичної зміни розміру зображення браузерами. Хоча деякі браузери можуть масштабувати зображення відповідно до атрибутів WIDTH і HEIGHT, не покладайтеся на це. Таким чином, вони повинні задавати реальний розмір зображення. (Використовуйте відповідну програму для вірного визначення розмірів у пікселях і масштабування зображення, якщо це буде потрібно.)

Значення ALIGN мають такни зміст:

• ALIGN=TOP - Позиціонує верх зображення з верхом поточного текстового рядка. Браузери по-різному інтерпретують це. Деякі беруть до уваги те, що було на текстовому рядку до зображення, і ігнорують те, що йде на рядку після нього.

• ALIGN=MIDDLE - Вирівнює середину зображення по основному текстовому рядку.

• ALIGN=BOTTOM (по умовчанню) - Вирівнює спід зображення по основному рядку.

• ALIGN=LEFT - Переміщає зображення до поточного лівого краю, тимчасово змінюючи цей край так, щоб наступний текст перемістився уздовж правої сторони зображення. Відображення залежить від того, чи були вирівняні по лівому краї який-небудь текст або зображення , що раніше з'явилося , до того, як у розмітці з'явилося поточне зображення. Такий текст (але не зображення) звичайно змушує вирівняні по лівому краї зображення зміщатися на новий рядок, із наступним продовженням тексту на старому рядку.

• ALIGN=RIGHT - Переміщає зображення до поточного правого краю, тимчасово змінюючи цей край так, щоб наступний текст перемістився уздовж лівої сторони зображення. Відображення залежить від того, чи були вирівняні по правому краї який-небудь текст або зображення , що раніше з'явилися , до того, як у розмітці з'явилося поточне зображення. Такий текст (але не зображення) звичайно змушує вирівняні по правому краї зображення зміщатися на новий рядок із наступним продовженням тексту на старому рядку.