www.ABC-Color.com
Онлайн розмальовки на різні теми
Довідка

Самовчитель HTML5

Створення веб сторінки.
Статті написані практично коротко, не відволікаючись на різні специфіки та історію.

Теги для тексту в HTML 5

За допомогою тега ми створюємо дизайн тексту і розповідаємо пошуковим машинам про сенс і значення тексту.

Про теги

Особливості прописи тегів сумісних з XHTML в HTML5, розглядати не будемо, робота над специфікаціями XHTML припинена на користь HTML 5. Навіщо плутатися!

Ми встановлюємо текст в теги, щоб для нього можна було прописати різні стилі, властивості і описи для браузерів.

Теги мають свої стильові особливості прописані за замовчуванням. Якщо вони вам не підійдуть їх можна змінити через стилі CSS. Але проце згодом.

Теги допомагають визначити значення тексту, для пошукових програм.

<p> - Приклад відкритого тега
</p> - Приклад закритого тега

<p> </p> Параграф

Переважно вставляємо текст в параграф.

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

<!DOCTYPE HTML>
<meta charset="utf-8">
<p>Я створюю інтернет сторінку, а це мій текст.</p>

Маємо змогу вказати на якій мові написаний текст.

<!DOCTYPE HTML>
<meta charset="utf-8">
<p lang="uk">Я створюю інтернет сторінку, а це мій текст.</p>
<p lang="en">I am creating a web page, and this is my text.</p>

Тег параграф за замовчуванням має відступи в горі та на долі.

<!DOCTYPE HTML><html lang="uk"><meta charset="utf-8"><title>Параграф</title>
<p>Кожен текст складається з параграфів. Який може складатися з одного та більше пропозицій і за замовчуванням параграфи мають відступи один від одного, більше ніж відступи між рядами тексту.
<p>За замовчуванням немає відступу зліва в першому реченні параграфа, його можна створити в стилях CSS.
<p>Слова переносяться цілком.</p>

Дивитися приклад.

Параграф file: ///D:/... Кожен текст складається з параграфів. Який може складатися з одного та більше речень і за замовчуванням параграфи мають відступи один від одного, більше ніж відступи між рядками тексту. За замовчуванням немає відступу зліва в першому реченні параграфа, його можна створити в стилях CSS. Слова переносяться цілими.

<h1> </h1> ... <h6> </h6> Заголовок.

Заголовок йде в кілька рівнів. Перший найважливіший, другий менш важливий і так до шостого рівня.

За замовчуванням, починається з нового рядка зліва, і має відступ в горі та з долу.

<!DOCTYPE HTML><html lang="uk"><meta charset="utf-8"><title>Веб сторінки</title>
<h1>Веб сторінки HTML 5</h1>
<h2>Стаття про HTML</h2>
<h3>Розділ теги</h3>
<h4>Тег для заголовка</h4>
<p>З кожним рівнем заголовок зменшується.

Дивитися приклад.

Веб сторінки file: ///D:/... Веб сторінки HTML5 Стаття про HTML Розділ теги Тег для заголовка З кожним рівнем заголовок зменшується.

На одній інтернет сторінці може бути безліч заголовків, як першого рівня, так і інших рівнів.

Пишіть заголовки так, щоб можна було правильно передати їх ієрархію.

Не використовуйте заголовки, як стиль для звичайного тексту.

Заголовки в першу чергу індексуються і мають велику вагу при видачі результатів пошуку.

Пишіть обов'язково закриваючий тег, і згідно ієрархії, а інакше весь текст стане заголовком.

<br> Перенесення рядка.

Перенесення рядка відбувається автоматично, виходячи з ширини контейнера в якому текст.
Але часто потрібно, щоб рядок переносився до свого закінчення і не мав відступів як у параграфа, для цього використовують спеціальний тег.

Закриваючого тега немає.

<!DOCTYPE HTML><html lang="uk"><head><meta charset="utf-8"><title>Текст</title></head>
<body>
<h1>Текст</h1>
<p>Простий текст складається зі слів, які зібрані в речення, а з речень складатимуться параграфи, які починаються з абзацу і мають відступи від іншої групи тексту.</p>
<h2>Склад тексту</h2>
<p>Основні елементи тексту:<br> Букви, цифри і розділові знаки;<br> Слова з сполучниками зібрані в речення;<br> Параграфи.</p>
</body>
</html>

Дивитися приклад.

Текст file: ///D:/... Текст Простий текст складається зі слів які зібрані в речення, а з речень складатимуться параграфи, які починаються з абзацу і мають відступи від іншої групи тексту. Состав текста Основні елементи тексту: Букви, цифри і розділові знаки; Слова з сполучниками зібрані в речення; Параграфи.

<abbr></abbr> Абревіатура.

<abbr> </abbr> - тег вказує, що написані літери є абревіатурою.

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

<abbr title="Розшифровування абревіатури">Абревіатура</abbr>

Коли користувач веб сторінці зупинить на абревіатурі курсор миші, з'являється спливаюча розшифровка.

<!DOCTYPE HTML><html lang="uk"><meta charset="utf-8"><title>Абревіатура</title>
<p>Веб сторінка зроблена відповідно стандартам <abbr title="Консорціум Всесвітньої павутини">W3C</abbr>.

Дивитися приклад.

Абревіатура file: ///D:/... Веб сторінка зроблена відповідно стандартам W3C Консорціум Всесвітньої павутини

Розділення слів.

<wbr> - тег вказує, як розділити слово при перенесенні в інший рядок.

<!DOCTYPE HTML><html lang="uk"><meta charset="utf-8"><title>Пестицид</title>
<h1>Пестицид дихлор<wbr>дифеніл<wbr>трихлор<wbr>метил<wbr>метан</h1>

Дивитися приклад.

Пестицид file: ///D:/... Пестицид дихлордифеніл трихлорметил метан

У браузері при перенесенні тексту не додається символ дефіса. При необхідності ставити дефіс використовуйте мнемонічний символ м'якого переносу.

&shy; - мнемонічний символ м'якого переносу.

<!DOCTYPE HTML><html lang="uk"><meta charset="utf-8"><title>Пестицид</title>
<h1>Пестицид дихлор&shy;дифеніл&shy;трихлор&shy;метил&shy;метан</h1>

Дивитися приклад.

Пестицид file: ///D:/... Пестицид дихлордифеніл- трихлорметил- метан

Правопис тегів

Теги можуть писатися маленькими і великими літерами.

<h1>Текст</h1>
<H1>Текст</H1>

У зміст тега можна вставляти інші теги.

<p><b>Текст з тегами<b> записується: <br>
для доброй індексації;<br>
для стильового оформлення.</p>

Не можна записаний тег в тегу, зачиняти поза тегом

<h1>Правильно складений <p>текст </h1>повинен мати заголовок.</p>