Видаливши всі підкреслені теги з html-коду, одержимо підсумковий код складної таблиці, що у вікні браузера буде мати такий вигляд, як показано на рисунку 28.
Рисунок 28 – Приклад складної таблиці
Зауваження Атрибут ALIGN (=RIGHT|LEFT) команди <TABLE> призначений для того, щоб задати обтікання таблиці текстом. Наприклад, нижченаведений код у вікні браузера буде мати такий вигляд, як показано на рисунку 29.
<BODY>
<TABLE
BORDER=1 ALIGN=RIGHT>
<TR>
<TD>Це - проста
таблиця </TD>
</TR>
</TABLE> Цей
текст повинен обтікати таблицю, розміщену
праворуч, тому що зазначено атрибут
ALIGN=RIGHT команди <TABLE> </BODY>
Рисунок 29 – Обтікання таблиці текстом
Щоб вирівняти таблицю по центру вікна, код документа правильно буде написати так:
<DIV STYLE="ALIGN:CENTER">
<TABLE> ... </TABLE>
</DIV>
Щоб розмістити текст, картинку або таблицю в центрі екрана, можна звернутися до таблиць і скористатися таким кодом:
<TABLE WIDTH="100%" HEIGHT="100%" BORDER="0" CELLSPACING="0" CELLPADDING="0">
<TR>
<TD ALIGN="CENTER" VALIGN="MIDDLE">
Текст, картинка або таблиця в центрі екрана
</TD>
</TR>
</TABLE>
3.5.4 Елементи на рівні тексту. Фізичний і логічний стилі форматування
Текст HTML-документа (окремі слова або речення) можна описувати спеціальними стилями. Існує два типи стилів: фізичний і логічний.
Фізичні стилі
Існують фізичні способи виділення – автор задає стиль написання тексту, описуючи шрифт у вихідному HTML-документі.
Можливо задати:
<B> текст </B> – жирний шрифт.
<I> текст </I> – похилий шрифт.
<TT>текст</TT> – шрифт заданої ширини (моношрифт).
<U> текст </U> – підкреслений шрифт.
<STRIKE>текст</STRIKE>
– перекреслений
шрифт.
Спеціальні символи. Символи <, >, & й " мають в HTML особливе значення як символи форматування. Але іноді виникає необхідність використати їх у тексті за своїм прямим призначенням. Для введення таких символів у текст необхідно використовувати спеціальні сполучення символів:
< – < ліва дужка;
> – > права дужка;
& – & амперсанд;
" – " лапки;
– пробіл;
¬ – ¬ перенос;
« – « ліві подвійні лапки;
» – » праві подвійні лапки;
© – © знак, який вказує кому належать
авторські права;
® – ® знак, який вказує на реєстрацію;
¶ – ¶ ;
· – · середня крапка ;
° – ° градус;
± – ± плюс-мінус.
Зауваження. Спеціальні символи чутливі до регістра: НЕ МОЖНА використовувати < замість <
Н
<B>(!!!)</B>
Мова HTML <u>не
чутлива</u>
до регістра. <tt>Команди</tt>
мови можуть набиратися як<i>
великими, </i>так
і малими літерами, тобто команда
<title>
еквівалентна команді <TITLE>
або <TiTle>.
Але <b><i>спеціальні
символи</b></i>
чутливі до регістра: <b>НЕ
МОЖНА</b>
використати <
замість <
Рисунок 49
Логічні стилі
Рисунок 30 – Застосування фізичних стилів форматування та спеціальних символів
Оскільки неможливо передбачити, який буде мати вигляд той або інший тег (фізичного стилю форматування) у різноманітних браузерах, використовують логічне форматування. Теги логічного форматування сприймаються будь-яким браузером й інтерпретуються відповідно до його можливостей.
<DFN> – опис визначень.
<EM> – виділення слів.
<CITE> – виділення заголовків книг, фільмів, цитат і т.п.
<CODE> – виділення програмних кодів, текстів програм і т.п. Зображується шрифтом фіксованої ширини.
<SAMP> – використовується для машинних повідомлень. Зображується шрифтом фіксованої ширини (моношрифт).
<STRONG> – використовується для особливого виділення слів. Як правило, виділяється жирним шрифтом.
<VAR> – вживають для символьних змінних.
Часто виникає питання, в чому полягають відмінності в роботі тегів <B> й <STRONG>, <I> й <EM>.
Як зазначено вище, <B> й <I> – теги фізичного виділення, тобто веб-майстер примусово змушує браузер виділяти текст заданим видом шрифту. Теги <STRONG> й <EM> – теги логічного виділення. Кожен браузер може по-своєму виділити текст усередині цих тегів, так, як зручно його користувачеві.
Таким чином, якщо потрібно виділити текст, варто користуватися тегом <EM>. Якщо ж не потрібно виділяти текст, а зробити його курсивом, використовують тег <I>.
До логічних стилів можна віднести й команди роботи зі шрифтами.
<FONT> – може змінювати як логічний (розмір), так і фізичний стиль шрифту. Ця команда задає кольори, розмір і вигляд сімейства шрифтів, які використовуються в HTML-документі.
Атрибути команди <FONT>
COLOR = “color” дозволяє задати колір шрифту.
Наприклад, рядки , що наведені нижче, рівнозначні.
<FONT COLOR= #FF0000> текст червоних кольорів </FONT>
<FONT COLOR= RED> текст червоних кольорів </FONT>
SIZE=(±)n – установлює розмір шрифту. Число n при абсолютному заданні розміру може набувати значень від 1 до 7. За замовчуванням базовий розмір шрифту в документі вважається таким, що дорівнює 3 в абсолютних значеннях.
При відносному заданні розміру число n може набувати значень від 1 до 7 зі знаками плюс (+) – збільшення або мінус (-) – зменшення розміру шрифту на n пунктів стосовно базового розміру шрифту в документі.
<BIG>текст</BIG> – збільшує розмір шрифту на одиницю щодо базового розміру.
<SMALL>текст</SMALL> – зменшує розмір шрифту на одиницю щодо базового розміру.
<SUB> текст </SUB> – підрядковий індекс.
<SUP> текст </SUP> – надрядковий індекс.
Сімейства шрифтів
Для команди <FONT> ім'я сімейства шрифтів визначається атрибутом FACE. Для команди <BASEFONT> атрибутом NAME .
Стандартні значення цих атрибутів "Times New Roman", "Courier New" та "Arial".
Імена сімейств шрифтів у даний момент поки не стандартизовані й у різних системах можуть називатися по-різному. Наприклад, сімейство шрифтів "Times New Roman" може називатися "Times", "Times Roman", "Roman" і т.д.
Наприклад, нижченаведений фрагмент HTML-коду у вікні браузера буде виглядати так, як показано на рисунку 31.
<p><FONT
FACE="ARIAL">Ласкаво просимо до СумДУ
</FONT>
<p><FONT
FACE="Courier New">Ласкаво просимо до
СумДУ
</FONT>
<p><FONT FACE="Times
New Roman">Ласкаво просимо до СумДУ
</FONT>
Переривання рядка. Команда <BR> дозволяє перейти на новий рядок, не починаючи нового абзацу (див. приклади #1 – #6).
Рисунок 31