1.2. Форматування тексту мовою html
Форматування тексту передбачає створення заголовків, абзаців, вирівнювання тексту, вибір стилів шрифту (напівжирний, курсив, підкреслений), зміну розміру шрифту.
У HTML існує шість рівнів заголовків і кожному з них відповідає свій розмір шрифту. За допомогою заголовків різних рівнів можна створювати чітку ієрархічну структуру документа. Заголовку І рівня відповідає найбільший розмір шрифту. Синтаксис HTML-коду, що створює заголовки різного рівня, має вигляд:
<Н1> Заголовок першого рівня </Н1>
<Н2> Заголовок другого рівня </Н2>
…………………….
<Н6> Заголовок шостого рівня </Н6>
Для кращого сприйняття сторінки користувачем не слід пропускати рівні заголовків.
Для відображення тексту в HTML немає спеціального дескриптора. Текст вводиться у будь-якому місці між дескрипторами <BODYx/BODY>. У текст не потрібно вставляти ні порожні рядки, ні символи переведення рядка, оскільки при відображенні сторінки броузером вони не враховуються. Текст автоматично розміщується за шириною вікна броузера. Якщо ж необхідно на Web-сторінці помістити порожній рядок або забезпечити в потрібному місці перехід до наступного рядка, слід використовувати спеціальні дескриптори: дескриптор розриву абзацу <Рх/Р> та розриву рядка <BR>. Дескриптор розриву абзацу дає команду броузеру закінчити поточний абзац і помістити порожній рядок перед наступним абзацом. Дескриптор розриву рядка вказує про закінчення поточного рядка і переходу до наступного. Для дескриптора розриву абзацу використовувати, закриваючий дескриптор </Р>, не обов'язково.
Текст абзаца, чи заголовка може бути вирівняний по лівому краю, по правому краю, або по центру вікна броузера. Для вирівнювання тексту використовується параметр ALIGN=вирівнювання, де вирівнювання може приймати значення: LEFT для вирівнювання по лівому краю, RIGHT для вирівнювання по правому краю, CENTER для вирівнювання по центру Найчастіше параметр ALIGN використовується в дескрипторах розриву абзацу та задания заголовка.
Наприклад:
<HTML>
<HEAD>
<ТІTLЕ>Приклад вирівнювання Teкстy</TITLE>
</HEAD>
<BОDY>
<Н2 ALIGN=CENTER>Цей заголовок буде розміщено посередині</Н2>
<!-- Наступний абзац буде вирівняно по лівому краю -->
<P ALIGN=LEFT> Вивчення HTML невдовзі стане такою ж
необхідністю, як вміння ввімкнути комп'ютер,
скопіювати файл чи скористатися текстовим
редактором. Якщо користувач вміє набирати
текст, то зможе освоїти і використання HTML.
</Р>
</BОDY>
</HTML>
Приклад
<HTML>
<head>
<title> магазин "Магнолия" </title>
</head>
<BODY BACKGROUND="6137.jpg">
<p><font size="22"> <FONT Color=ff111><CEnter> <marquee>Вітаю на нашій сторінці </marquee></CEnter> </FONT> </font>
<p><HR SIZE=9 NOSHADE Width=75% color=ffffff>
<p><center><IMG SRC=SAD001.JPG><IMG SRC=KAM1.JPG><IMG SRC=033.JPG><IMG SRC=037-1.JPG><IMG SRC=037-2.JPG><IMG SRC=BROMELII.JPG></center>
<p><HR SIZE=9 NOSHADE Width=75% color=ffffff>
<font size="16"> <FONT Color=ff555><CEnter> <marquee> магазин "Магнолія" </marquee></CEnter> </FONT> </font>
<p><H3><FONT Color=44ffff> Я рада вітати Вас на квітковій сторінці магазину "Магнолія"!
</FONT>
<P>
<ADDRESS> <FONT Color=ffffff> Анастасія - lune@ukr.net </FONT></ADDRESS>
</body>
</html>
Результат
У HTML є контейнер, в який можна помістити заздалегідь відформатований текст. Контейнер <PRE>...</PRE> використовується для відображення відформатованого текстовим редактором блоку тексту, який складно було б прочитати, якщо б броузер переформатував його (наприклад, блоки програмного коду мовою C++). Цей контейнер дозволяє зберегти розбиття тексту на рядки (символи переходу на новий рядок, отримані в результаті натискування клавіші <Enter>, інтерпретуються як розриви рядка), пропуски всередині тексту інтерпретуються у точній відповідності з їх розміщенням у текстовому редакторі. Недоліком такого підходу є втрата гнучкості, а також те, що броузери зазвичай виділяють відформатований заздалегідь текст із допомогою моноширинного шрифту. Це призводить до того, що довгі фрагменти тексту зливаються. У наступному прикладі створюється сторінка зі заздалегідь відформатованим текстом:
Приклад
<HTML>
<HEAD>
<TITLE> Приклад заздалегідь відформатованого тексту </ТІТLЕ>
</HEAD>
<BODY>
<Н1 ALIGN=CENTER> Книги про HTML </H1>
<PRE>
НАЗВА АВТОР ВИДАВНИЦТВО РІК
------------------------------------------------------------------------------------------
Использование HTML 4 М. Браун "ВИЛЬЯМС" 2000
</PRE>
</BОDY>
</HTML>
Мова HTML надає можливість вибирати для написання фрагментів тексту різні стилі: напівжирний, курсив, підкреслення тощо. Для цього в HTML існують спеціальні дескриптори, які називають дескрипторами стилів.
Таблиця Основні дескриптори стилів
ДЕСКРИПТОР |
СТИЛЬ |
<В> |
Напівжирний шрифт |
<І> |
Курсив |
<U> |
Підкреслення |
<SUB> |
Підрядковий текст |
<SUP> |
Надрядковий текст |
<STRIKE> |
Перекреслення |
Використання дескрипторів стилів розглянуто в наступному прикладі:
Приклад
<HTML>
<HEAD>
<TITLE> Приклади виділення тексту дескрипторами стилів </TITLE>
</HEAD>
<BОDY>
Приклад виділення тексту <В> напівжирним шрифтом</B><BR><BR>
Можна також виділити текст <І>курсивом</І>. <BR><BR>
Особливо важливі місця можна <U>підкреслити</U>. <BR><BR>
Можна створити <SUP> надрядковий </SUP>
або <SUB> підрядковий </SUB> текст <BR><BR>
Крім того, текст можна <8ТНІКЕ>перекреслити</SТРІКЕ>.
</BОDY>
</HTML>
Для вибору шрифту, його розміру та кольору в HTML служить контейнер | <FONT>.... </FONT>.
Розмір шрифту можна визначити за допомогою атрибута SIZE дексриптора
<FONT>:
<FONT SIZE="значення">
Атрибут SIZE дозволяє вказувати абсолютний ( значення від 1 до 7) та відносний (значення від -4 до +4) розміри шрифту по відношенню до розміру основного шрифту, що використовується в основній частині сторінки.
Для зміни розміру основного шрифту використовується елемент <BASEFONT SIZE =значення>. Значення атрибута SIZE може бути число від 1 до 7. Для броузера стандартним є розмір шрифту 3.
Атрибут FACE дескриптора <FONT> дозволяє вказати броузеру шрифт, яким необхідно відображати документ. Якщо розробник сторінки не знає, які шрифти можуть бути на комп'ютері користувача, то в атрибуті FACE можна вказати через кому декілька назв шрифтів, наприклад:
<FONT FACE="Verdana", "Arial", Helvetica">
Броузер переглядає список шрифтів зліва направо і використовує перший, який встановлено на комп'ютері користувача. Якщо броузер не знаходить на комп'ютері користувача жодного шрифту, що вказані в атрибуті FACE, документ відображається шрифтом, який задано в броузері користувача за замовчуванням.
За допомогою дескриптора <FONT> можна також змінити колір шрифту. Для цього використовується атрибут COLOR, наприклад, код
<FONT C0L0R="GREEN">текст </FONT>
задає вказівку броузеру відобразити слово «текст» зеленим кольором. Детальніше про використання кольору у Web-документах розглянуто в розділі Web-графіка.
Крім дескрипторів у мові HTML існують також спеціальні символи форматування. Одним з таких символів є — нероздільний пропуск — . Використання цього символу в коді HTML-файла забезпечує появу на Web-сторінці одного пропуску. Наприклад, за кодом:
poзмір шрифту
броузер між словами «розмір» і «шрифту» помістить 6 пропусків.
У таблиці 1.3 описано коди деяких спеціальних символів.
Таблиця 1.3. Коди спеціальних символів
КОДИ |
СИМВОЛИ |
&сору, &геg |
©, ® |
¼, ½, ¾ |
1/4 , 1/2 ,3/4 |
&рі |
П |
&lе, &ge |
<,> |
&аmр |
& |
Код сторінки:
Лістинг 1.6.
<HTML>
<HEAD>
<TITLE>Fizmat home</TITLE>
<META content="text/html; charset=windows-1251"
http-equiv=Content-Type>
</HEAD>
<BODY bgColor="#ffffff"><!-задаємо білий колір фону-->
<Н1 АІШ=СЕ№ТЕН>Фізико-математичний факультет ТДПУ
імені Володимира Гнатюка</Н1>
<H2 ALIGN=CENTEH>46003, м.Тернопіль, вул.Карпенка,тел. (0352)33-00-00</Н2:
<FONT COLOR="GREEN">тeкст</FONT>
</BODY>
</HTML>
Контрольні запитання
1. Який синтаксис HTML-коду, що створює заголовки різного рівня?
2. Як вирівняти текст абзацу?
3. Як помістити на сторінку попередньо відформатований текст?
4. Назвіть основні дескриптори стилів.
5. Яке призначення контейнера <FONT>? Назвіть його параметри.
6. Як помістити на сторінку спеціальний символ форматування?
Практичні завдання
1. Помістіть на Web-сторінку кілька заголовків різного рівня.
2. Відцентруйте заголовки.
3. Помістіть на сторінку вірш, врахувавши його параметри форматування.
4. Застосуйте до тексту вірша різні теги стилів.
5. Запишіть прізвище та ім'я автора вірша, поставивши між ними нерозривний пропуск.
6. Проілюструйте використання параметрів тега <FONT>.