Оформлення заголовків

Подивимося ще раз на нашу сторіночку. Ще однієї її недолік полягає в тому, що важ текст написаний шрифтом одного розміру. Взагалі кажучи заголовки виділяють крупнішим шрифтом (причому зазвичай напівжирним). Для того, щоб виділяти заголовки, в HTML існують так звані теги заголовків. Це <Н1>, <Н2>, <НЗ>, <Н4>, <Н5> і <Н6> (і із закриваючі теги). Для найкрупніших заголовків можна використавши тег <Н1>, для заголовків подрібніше - <Н2> і так далі. Наприклад, так:

<Н2>Іван-Царевич і сірий заяць<ВR> сказка</Н2>

Проте звернете увагу на те, що для вирівнювання по центру потрібно докласти додаткові зусилля, наприклад помістити відповідний тег всередину тега заголовка (тобто в даному випадку між тегамі <Н2> і </Н2> ):

<Н2><Р ALING="сеntег">Іван-Царевич і сірий заяць<ВR>казка</Р></Н2> Якщо цього не зробити, то заголовок буде вирівняний по лівому краю.

У нашому випадку має сенс використовувати для заголовків розповіді тим <Н2>, а для заголовка всієї сторіночки - тег <Н1> (загальний заголовок поділ дружин бути більше). Для вирівнювання загального заголовка по центру ми можемо написати так:

<H1><DIV ALING="сеntег">Домашняя сторінка Сергія Сергеева</DIV></Н1>

Звернете увагу на те, що замість тега <Р> для вирівнювання ми: використовували тег <DIV> . Цей тег означає роздільник і визначає фрагмент, який можна наділити якими-небудь стильовими властивостями, Текст, розташований між тегамі <DIV> і </DIV>, в більшості броу зеров також відділяється від решти тексту за допомогою символу перекладу рядка (якщо не задані ще які-небудь параметри). Запам'ятаєте цей тег - згодом нам доведеться вживати його дуже часто.

Підемо далі. Ви, напевно, звернули увагу на те, що в предиду щем прикладі основний текст розповідей був поміщений в тег < Р ALIGN="left"> . Тут значення "left" означає вирівнювання по лівому краю, проте це значення атрибуту ALIGN= визначене за умовчанням. Тобто, для опреде-

пія абзацу, вирівняного по лівому краю, достатньо було просто "ставити тег <Р>. Проте текст розповіді зазвичай виглядає краще, якщо його рівні обидва краї, а не тільки лівий - ми до цього звикли по паперових” виданнях. Щоб вирівняти текст по обох краях, можна додати атрибут ALIGN= із значенням "justify". Але слід мати на увазі, об таке вирівнювання не підтримувалося в старих версіях броузеров. (юузери Internet Explorer і Netscape Navigator підтримують його тільки починаючи з своїх четвертих версій.

Горизонтальна лінійка

Більш, на наший сторіночці хотілося б візуально відокремити розповіді від вступного тексту. Це можна зробити за допомогою горизонтальної межі. В принципі, для цього достатньо в потрібному місці поставити тег <BR> (він не має закриваючого тега). Проте в цьому випадку горизонтальна межа займе всю ширину сторінки, що виглядатиме неохайно. Для визначення ширини горизонтальної межі можна задати атрибут WIDTH=, наприклад, так:

<HR WIDTH="75%">

В цьому випадку горизонтальна лінія займе 75% від повної ширини екранної сторінки. Можна також визначати ширину лінії і в пікселах ( екранних крапках). Наприклад, запис <HR WIDTH="75"> визначить ширину лінії в 75 пікселов (це вийде дуже коротка лінія). Якщо хочете, можете визначити також товщину лінії, встановивши атрибут SIZE=.

Деякі проблеми можуть виникнути, якщо ми захочемо залишити трохи Вільного простору між вступним текстом і горизонталь ний лінією (в даному випадку це доречно, оскільки між лінією і заголовком, визначеним тегом <Н2>, простір задоволений велике, і бажано дотримати деякий баланс). Річ у тому, що якщо поставити перед лінією тег <BR>, то більшість броузеров його проігнорують. Вихід можна знайти, якщо після <BR> вставити нерозривний пропуск або замість <BR> використовувати “порожній” абзац:

<P></P><HR WIDTH="75%">

І те і інше не дуже естетично з погляду коду. Правда, якщо сторіночка робиться для броузеров Netscape (версії 3 і пізніших), можна використовувати тег <SPACER>, щоб задати вертикальний відступ:

<SPACER TYPE="vertical" SIZE="25">

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