Заголовки. Аби якось виділити заголовки в тексті, в html існують спеціальні теги заголовка

Аби якось виділити заголовки в тексті, в html існують спеціальні теги заголовка. Ці теги змінюють розмір тексту, понад і знизу заголовка робляться відступи, пропорційні його розміру, а також після заголовка робиться перенесення рядка. Ось ці теги: <h1>, <h2>: <h6>. <h1> - найбільший заголовок, <h6> - найменший.

Тобто якщо написати:

<h1>Текст у вигляді великого заголовка</h1> і <h6>Текст у вигляді маленького заголовка</h6>

Браузер відображуватиме це так:

Текст у вигляді великого заголовка

і

Текст у вигляді маленького заголовка

Теги перенесення рядка і форматування абзацу

Ще чого декілька корисних теги для форматування тексту.

Корисно знати:

Якщо в тесті html-документа поставити перенесення рядка, то браузер його проігнорує і відображуватиме весь текст в один рядок.

Наприклад, в тесті html-документа написано:

Йде бичок, качается,
Вздыхает на ходу...

А браузер відображуватиме цей текст таким чином:

Йде бичок, гойдається, Зітхає на ходу...

Тут-то нас і врятує тег <br>. Це непарний тег, що означає перехід на новий рядок.

Т.е написавши:

Йде бичок, качается,<br>
Вздыхает на ходу...

или

Йде бичок, качается,<br>Вздыхает на ходу...

У браузері ми побачимо:

Йде бичок, качается,
Вздыхает на ходу...

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

Корисно знати:

Якщо в тесті html-документа підряд ідуть декілька пропусків, то браузер їх проігнорує і відображуватиме лише один.

Наприклад, в тесті html-документа написано:

Здрастуйте, дорогий друг!

А браузер відображуватиме цей текст таким чином:

Здрастуйте, дорогий друг!

Тег <pre> використовується, коли потрібно написати текст як є, включаючи всі пропуски і перенесення рядка.

Тобто якщо написати:

<pre>Идет бичок, качается,
Вздыхает на ходу...</pre>

То браузер відображуватиме цей текст таким чином:

Йде бичок, гойдаєтьсяЗітхає на ходу...

Але!

Не варто зловживати тегом <pre>. І по можливості обходитися без нього.

Будь-який текст можна, а інколи і потрібно, розбити на абзаци. У html таку функцію виконує тег <p>. Якщо помістити текст між тим, що відкриває тегом <p> і що закриває тегом </p>, то зверху і знизу від цього тесту з'явиться відступ, тобто цей шматок тексту відокремиться від загальної маси тексту і утвориться параграф. За умовчанням параграф вирівняний по лівому краю.

Вирівнювання тексту

Всього в html можна задати 4 типи вирівнювання: по лівому краю, по правому краю, по центру, по ширині. Аби задати типа вирівнювання потрібно параметру align тега <p> привласнити одне із значень:

· left (вирівнювання по лівому краю)

· right (вирівнювання по правому краю)

· center (вирівнювання по центру)

· justify (вирівнювання по ширині).

Ось приклади тексту з різним типом вирівнювання:

по лівому краю	по правому краю	по центру	по ширині
<p align="left">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>	<p align="right">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>	<p align="center">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>	<p align="justify">Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</p>
Результат в браузері
Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.	Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.	Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.	Хоча Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.

Оскільки за умовчанням задано вирівнювання по лівому краю, то в першому прикладі параметр align="left" можна не писати.

Для завдання вирівнювання по ширині існує ще один тег <center>:

<center>Хотя Карлсон і був кращим в світі фахівцем з парових машин, денатурат він наливав вельми незграбно і навіть пролив його, так що на полиці утворилося ціле денатуратное озеро.</center>

І в браузері текст відображуватиметься по центру. Правда в такому разі втратиться властивість параграфа: відступ зверху і знизу. Але ж воно і не завжди потрібний.

Вправа

Викачайте файл у форматі RTF, створіть по його образу html-документ з дотримання всіх елементів оформлення тексту.

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

Дата добавления: 2015-10-02