Оформлення тексту, створення заголовків. Графічні об’єкти

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

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

 

<Н1> Заголовок першого рівня </Н1>

<Н2> Заголовок другого рівня </Н2>

<Н3> Заголовок третього рівня </Н3>

<Н4> Заголовок четвертого рівня </Н4>

<Н5> Заголовок п’ятого рівня </Н5>

<Н6> Заголовок шостого рівня </Н6>

 

Рис.2.2.3. Заголовки різного рівня

Для кращого сприйняття сторінки користувачем не слід пропускати рівні заголовків.

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

дескриптор розриву абзацу <Р></Р> та

дескриптор розриву рядка <BR>.

Дескриптор розриву абзацу дає команду броузеру закінчити поточний абзац і помістити порожній рядок перед наступним абзацом. Дескриптор розриву рядка вказує про закінчення поточного рядка і переходу до наступного. Для дескриптора розриву абзацу використовувати закриваючий дескриптор </Р> не обов’язково.

Використання згаданих дескрипторів розглянуто на прикладі:

<HTML>

<HEAD>

<TITLE>

Приклад використання дескрипторів розриву рядка та абзацу

</TITLE>

</HEAD>

<BODY>

Дескриптор розриву абзацу дає команду роузера вставити порожній рядок перед початком наступного абзацу.

<Р>

Дескриптор розриву рядка дає команду броузеру <BR> перейти у наступний рядок.

</Р>

</BODY>

</HTML>

Відображення сторінки з таким кодом подано на Рис.2.2.4.

Рис.2.2.4. Абзаци та пусті рядки

 

Текст абзацу чи заголовка може бути вирівняний по лівому краю, по правому краю, або по центру вікна броузера. Для вирівнювання тексту використовується параметр ALIGN=вирівнювання, де вирівнювання може приймати значення: LEFT для вирівнювання по лівому краю, RIGHT для вирівнювання по правому краю, CENTER для вирівнювання по центру. Найчастіше параметр ALIGN використовується в дескрипторах розриву абзацу та визначення заголовка.

Наприклад:

<HTML>

<HEAD>

<ТІTLЕ> Приклад вирівнювання тексту </ТITLE>

</HEAD>

<BODY>

<Н2 ALIGN=CENTER>Цей заголовок буде розміщено посередині</Н2>

<!-- Наступний абзац буде вирівняно по правому краю à

<Р ALIGN=RIGHT> Цей абзац вирівняно по правому краю Вивчення HTML невдовзі стане такою ж необхідністю, як вміння ввімкнути комп’ютер, скопіювати файл чи скористатися текстовим редактором. Якщо користувач вміє набирати текст, то зможе освоїти і використання HTML.

</Р>

</BODY>

</HTML>

Відображення сторінки з таким кодом подано на Рис.2.2.5

Рис.2.2.5. Вирівнювання абзацу по центру та по правому краю

 

У HTML є контейнер, в який можна помістити заздалегідь відформатований текст. Контейнер <PRE>…</PRE> використовується для відображення відформатованого текстовим редактором блоку тексту, який складно було б прочитати, якщо б броузер переформатував його (наприклад, блоки програмного коду мовою C++). Цей контейнер дозволяє зберегти розбиття тексту на рядки (символи переходу на новий рядок, отримані в результаті натискування клавіші <Enter>, інтерпретуються як розриви рядка), пропуски всередині тексту інтерпретуються у точній відповідності з їх розміщенням у текстовому редакторі. Недоліком такого підходу є втрата гнучкості, а також те, що броузера, зазвичай, виділяють відформатований заздалегідь текст із допомогою моноширинного шрифту. Це призводить до того, що довгі фрагменти тексту зливаються. У наступному прикладі створюється сторінка із заздалегідь відформатованим текстом:

<HTML>

<HEAD>

<TITLE> Приклад заздалегідь відформатованого тексту </TITLE>

</HEAD>

<BODY>

<Н1 ALIGN=CENTER> Книги про HTML </H1>

<PRE>

НАЗВА АВТОР ВИДАВНИЦТВО РІК

Использование HTML М.Браун «ВИЛЬЯМС» 2000

</PRE>

</B0DY>

</HTML>

Відображення документа з таким кодом у броузера подано на Рис.2.2.6.

Рис.2.2.6. Використання відформатованого тексту

 

Мова HTML надає можливість вибирати для написання фрагментів тексту різні стилі: напівжирний, курсив, підкреслення тощо. Для цього в HTML існують спеціальні дескриптори, які називають дескрипторами стилів. Всі дескриптори стилів є контейнерами. Основні дескриптори стилів подано у таблиці 2.2.3.

Таблиця 2.2.3.

Основні дескриптори стилів

ДЕСКРИПТОР стиль
<В> Напівжирний шрифт
<І> Курсив
<U> Підкреслення
<SUB> Підрядковий текст
<SUP> Надрядковий текст
<STRIKE> Перекреслення

Використання дескрипторів стилів розглянуто в наступному прикладі:

<HTML>

<HEAD>

<TITLE> Приклади виділення тексту дескрипторами стилів </TITLE>

</HEAD>

<BODY>

Приклад виділення тексту <В> напівжирним шрифтом</В><BR><BR>

Можна також виділити текст <I>курсивом</I> <BR><BR>

Особливо важливі місця можна <U>підкреслити</U><BR><BR>

Можна створити <SUP> надрядковий </SUP>

або <SUB> підрядковий </SUB> текст<BR><BR>

Крім того, текст можна <STRIKE>перекреслити</STRIKE>.

</BODY>

</HTML>

Відображення сторінки з таким кодом подано на Рис.2.2.7

Рис.2.2.7. Стилі форматування

 

Для вибору шрифту, його розміру та кольору в HTML служить контейнер <FONT>…. </FONT>.

Розмір шрифту можна визначити за допомогою атрибута SIZE дескриптора <FONT>:

<FONT SIZE=”значення”>

Атрибут SIZE дозволяє вказувати абсолютний (значення від 1 до 7) та відносний (значення від –4 до +4) розміри шрифту по відношенню до розміру основного шрифту, що використовується в основній частині сторінки.

Для зміни розміру основного шрифту використовується елемент <BASEFONT SIZE=значення>. Значення атрибута SIZE може бути число від 1 до 7. Для броузера стандартним є розмір шрифту 3.

Атрибут FACE дескриптора <F0NT> дозволяє вказати броузеру шрифт, яким необхідно відображати документ. Якщо розробник сторінки не знає, які шрифти можуть бути на комп’ютері користувача, то в атрибуті FACE можна вказати через кому декілька назв шрифтів, наприклад:

<FONT FACE=”Verdana”, “Arial”, “Helvetica”>

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

За допомогою дескриптора <FONT> можна також змінити колір шрифту. Для цього використовується атрибут COLOR, наприклад, код

<FONT COLOR=”GREEN”>текст</FONT>

задає вказівку броузеру відобразити слово «текст» зеленим кольором. Детальніше про використання кольору у Web-документах розглянуто в розділі Web-графіка.

Крім дескрипторів у мові HTML існують також спеціальні символи форматування. Одним з таких символів є — нероздільний пропуск — &nbsp;. Використання цього символу в коді HTML-файла забезпечує появу на Web-сторінці одного пропуску. Наприклад, за кодом:

poзмір&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;шрифту

броузер між словами «розмір» і «шрифту» помістить 6 пропусків* У таблиці 2.2.4 описано коди деяких спеціальних символів.

Таблиця 2.2.4.

Коди спеціальних символів

КОДИ СИМВОЛИ
&сору, &reg ©, ®
&frac14, &frac12, &frac34 1/4, 1/2, 3/4
&рі п
&1е, &де <,>
&аmp &

Графічні об’єкти. Важливу роль в оформленні Web-сторінок відіграють графічні зображення. Включення їх у HTML-документи дозволяє надати сторінці «настрою» (ліричного, гумористичного, ділового), подати інформацію, яку неможливо отримати з тексту, розбити сторінку на «теми», що дозволить користувачеві краще орієнтуватися в матеріалі. Для того, щоб сторінка подобалась відвідувачам, необхідно добитись оптимального співвідношення форми (дизайну) і змісту.

Швидкість появи зображення на екрані залежить від розміру файла зображення. Графіка, яка повільно завантажується, може «відлякати» відвідувачів сторінок. Для зменшення розміру файла необхідно використовувати зображення типу JPEG або GIF. Конвертацію графіки у ці формати можна здійснити за допомогою редакторів растрових зображень. Допустимими зображеннями є такі, розмір яких не перевищує 40-50 Кбайт.

На HTML-сторінках графіку можна розміщувати різними способами.

Вбудовані зображення — це графічні зображення, які завжди залишаються в одному і тому самому місці сторінки (справа від тексту чи іншого об’єкта, що безпосередньо передує зображенню) і не обрамлюються текстом. Для того, щоб помістити на Web-сторінці вбудоване зображення використовується елемент <IMG SRC=URL_3o6paження>. Дескриптор <IMG> є одиночним. В атрибуті SRC (від слова source) необхідно вказати повну або відносну URL-адресу файла зображення. Наприклад, код:

<Р>Це зображення нової моделі модема

<IMG SRC=”modem8.jpg”>цей текст розміщується одразу після малюнка

використано для розміщення на сторінці зображення, файл якого знаходиться в тому самому каталозі, що і сам HTML-файл (Рис.2.2.8).

Рис.2.2.8. Графічне зображення на Web-сторінці

За замовчуванням текст вирівнюється по нижній частині зображення. Для зміни типу вирівнювання використовують дескриптор IMG з атрибутом ALIGN. Нижче наведені значення, які можна присвоїти цьому атрибуту:

Таблиця 2.2.5

Значення атрибуту Призначення атрибуту
ТОР вирівнює текст по верхньому краю зображення;
MIDDLE вирівнює текст по середній частині зображення;
BOTTOM вирівнює текст по нижньому краю зображення

Наведемо код документа, що вміщує три зображення, для кожного з яких використовується один з варіантів вирівнювання. На Рис.2.2.9 подано Web-сторінку, створену на основі цього, коду.

<HTML>

<HEAD>

<TITLE>

Використання атрибута ALIGN в дескрипторі IMG

</TITLE>

</HEAD>

<BODY>

<P> <IMG SRC=”modem.jpg” ALIGN=TOP>

Цей текст вирівнюється по верхньому краю зображення </P>

<P> <IMG SRC=”modem.jpg” ALIGN=MIDDLE>

Цей текст вирівнюється по середній частині зображення </P>

<P> <IMG SRC=”modem.jpg” ALIGN=BOTTOM>

Цей текст вирівнюється по нижньому краю зображення </P>

</BODY>

</HTML>

Рис.2.2.9. Вирівнювання тексту відносно зображення

Плаваючі зображення — це зображення, що не прив’язуються до одного рядка тексту, а ніби «плавають» вздовж одного з полів і обрамлюються текстом.

Для створення плаваючих зображень використовується дескриптор <IMG> з атрибутом ALIGN. Для плаваючих зображень значення цього атрибута можуть бути LEFT (зображення плаває вздовж лівого краю тексту) або RIGHT (зображення плаває вздовж правого краю тексту). Наприклад:

<IMG SRC=”amd.jpg” ALIGN=LEFT>

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

<HEAD>

<TITLE>

Використання атрибута ALIGN в дескрипторі IMG

</TITLE>

</HEAD>

<BODY>

<P> <IMG SRC=”modem.jpg” ALIGN=LEFT></P>

Цей текст розміщується праворуч від зображення і нижче <BR>

Цей текст розміщується праворуч від зображення і нижче<BR>

Цей текст розміщується праворуч від зображення і нижче<BR>

Цей текст розміщується праворуч від зображення і нижче<BR>

Цей текст розміщується праворуч від зображення і нижче<BR>

Цей текст розміщується праворуч від зображення і нижче<BR>

Цей текст розміщується праворуч від зображення і нижче<BR>

Цей текст розміщується праворуч від зображення і нижче

</BODY>

</HTML>

На Рис.2.2.10 подано інтерпретацію цього коду броузером.

Рис.2.2.10. Плаваюче зображення

У дескрипторі <IMG> можна використовувати атрибути HEIGHT і WIDTH для визначення висоти та ширини зображення. За допомогою цих атрибутів «повідомляється» розмір зображення. Це дозволяє броузеру підготувати макет сторінки та розмістити текст до того, як будуть завантажені всі зображення. За Допомогою цих атрибутів можна також змінювати розміри зображення.

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

За допомогою атрибута BGCOLOR дескриптора <BODY> можна визначити колір фону сторінки, вказавши у ньому шестицифрове шістнадцяткове число. Цей атрибут має такий формат:

<BODY BGCOLOR=#rrggbb>

rr, gg, bb — двоцифрові шістнадцяткові числа, які визначають відповідно червону, зелену та голубу складові кольору фону.

Наприклад:

<BODY BGCOLOR=#000000><!—задається чорний колір фонуà

<BODY BGCOLOR=#ffffff><!—задається білий колір фону à

<BODY BGCOLOR=#ffOOOO><!—задається червоний колір фонуà

<BODY BGCOLOR=#00ff00><!—задається зелений колір фону à

<BODY BGCOLOR=#0000ff><!—задається синій колір фону à

Для визначення основних кольорів можна використовувати також зарезервовані імена (таблиця 2.2.6.).

Таблиця 2.2.6.

Зарезервовані імена кольорів

КОЛІР ШІСТНАДЦЯТКОВИЙ ЕКВІВАЛЕНТ
BLACK (чорний) #000000
MAROON (темно-бордовий) #800000
GREEN (зелений) #008000
OLIVE (оливковий) #808000
NAVY (темно-синій) #000080
PURPLE (фіолетовий) #800080
TEAL (зеленувато-блакитний) #008080
GRAY (сірий) #808080
SILVER (сріблястий) #С0С0С0
RED (червоний) #FF0000
LIME (лимонний) #00FF00
YELLOW (жовтий) #FFFF00
BLUE (синій) #0000FF
FUCSHIA (фуксія) #FF00FF
AQUA (морська хвиля) #00FFFF
WHITE (білий) #FFFFFF

Наприклад,

<BODY BGCOLOR=”RED”>

<!—задається червоний колір фону à

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

<BODY BACKGROUND=”my_picture.gif”>

Колір основного тексту можна змінити за допомогою атрибута TEXT дескриптора <BODY>. Колір задається так, як і у випадку зміни кольору фону.

Зображення-гіперпосилання — це зображення на Web-сторінці, клацнувши на якому, можна відкрити нову Web-сторінку або службу Internet. Наприклад, можна помістити на Web-сторінці зображення поштової скриньки, клацнувши на якому користувачі зможуть відправляти повідомлення електронної пошти. HTML-код зображення-гіперпосилання має вигляд:

<А HREF=”URL”><IMG SRC=”URL-файла зображення”></А>

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

Щоб використовувати мініатюри, необхідно мати дві копії зображення — велике зображення-оригінал і зменшене зображення. Для зменшення розмірів зображень використовують можливості графічних програм. Щоб зв’язати мініатюру з оригіналом необхідно помістити дескриптор, що задає мініатюру, всередині дескриптора <А HREF> </A>, який є гіперпосиланням на велике зображення, наприклад:

<А HREF=”big.gif”><IMG SRC=”small.gif”></A>

Тут задано вказівку роузера розмістити на Web-сторінці зображення (файл small.gif), що є гіперпосиланням на зображення, задане файлом big. Gif.