Як вставити текст у HTML сторінку? Для цього є спеціальні HTML теги для тексту.

У HTML існує шість рівнів заголовків. Вони додаються за допомогою тегів

-

. При цьому

це заголовок першого рівня, він найбільший.

Приклад створення заголовків:

Заголовки не залежать один від одного. Ви можете додати заголовок будь-якого рівня скрізь, де це потрібно.

Новачки іноді не можуть розібратися з питанням - скільки заголовків першого рівня може бути на сторінці. В інтернеті я не раз зустрічав на цю тему неповну та недостовірну інформацію. Тому я вирішив докладно розглянути це питання.

На роботу сторінки кількість тегів

не впливає. Можна їх додавати скільки завгодно. А от пошукові системинегативно відносяться до того, що на сторінці є більше одного заголовка першого рівня. Тому, якщо Ви збираєтеся просувати свій сайт у пошукових системах, то на кожній сторінці має бути лише один заголовок першого рівня. Висновок: краще відразу звикати до того, щоб не ставити більше одного тега

на сторінку. Адже в HTML є цілих рівнів заголовків. За будь-якої верстки сторінки цього цілком достатньо, щоб виділити тег

лише одного заголовка.

Абзац

Тег

Створює абзац тексту. У нього є відступи зверху та знизу для відокремлення одного абзацу від іншого. Крім того, є можливість встановити відступ першого рядка. Все це регулюється за допомогою CSS.

Тег

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

Наприклад виділимо частину тексту червоним кольором.

Потрібна частина тексту знаходиться всередині тега . Щоб вона була червоною, тегу встановлено атрибут style, який ставить стилі. Так як робота зі стилями описується в підручнику CSS, тут я не пояснюватиму, як працює цей атрибут. Просто додайте його до тега, як написано в прикладі.

Тег

Тег

Використовується для особливих видів тексту, у яких важливо зберегти форматування.  Текст всередині цього тега відображається на сторінці так, як він виглядає в коді сторінки.  У ньому зберігаються всі прогалини та перенесення рядка.  Текст відображається моноширинним шрифтом, але це можна змінити за допомогою стилів.

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

Приклад виділення тексту:
21
22
23
24

 Жирний шрифт
Жирний шрифт
Курсивний шрифт
Курсивний шрифт

Текст можна виділити за допомогою стилів.  Кожен сам вирішує, як виділяти текст, за допомогою тегів чи стилів.
Інші теги
Ми розглянули спеціальні HTML теги для тексту.  Але текст може містити і багато інших тегів, які додають контент на сторінку.  Можна навіть вставити текст поза будь-якими тегами, він все одно відобразиться на екрані.  Але на практиці так ніхто не робить, тому що поза тегами текстом не можна керувати.  Тому весь текст, звичайно, повинен знаходитися всередині тегів.  А коли ви вивчите CSS, ви зможете визначати зовнішній виглядтексту.
CSS дає широкі можливостіпо оперуванню стилем тексту.  Можна впливати на шрифт, колір, розмір та інші властивості тексту.
Так як ця сторінка розрахована на новачків, то спочатку нагадаємо базовий синтаксис CSS і термінологію, що використовується.
кожне правило CSSскладається з селектора та визначення.  Селектор – зазвичай це тег, до якого ми застосовуємо наш стиль, а визначення – це саме стильове відображення.  Визначення складається з якості та його значення.  Наприклад: властивість – колір, значення – червоний.
Синтаксис CSS наступний:
селектор ( властивість: значення )
Приклад правила CSS:
p ( color : blue )
 
Показувати текст синім кольором.  Одному селектору можна зазначити кілька пар (властивість: значення).
p ( color: blue;  font-size : 10pt )
У цьому прикладі задано правило тегу 
Відображати текст синім кольором та розміром 10pt.  Тобто тут ми маємо дві пари (властивість: значення), застосовані до одного селектора, в даному випадку до тегу абзацу 
Надалі, коли в тексті будуть зустрічатися слова властивість і значення, матиметься на увазі саме визначення для селектора у правилі CSS.
 
Властивості шрифту
Якщо не вказувати цю властивість CSS, то броузер буде показувати текст шрифтом за замовчуванням.  Зазвичай, це Times New Roman.
Список шрифтів у значенні font-family може містити одну або кілька назв, розділених комою.  Якщо в імені шрифту містяться пробіли, наприклад, Trebuchet MS, воно повинне полягати в лапки, одинарні або подвійні.
Браузер по черзі перевіряє наявність шрифтів зі списку на комп'ютері користувача.  Якщо перший шрифт у списку є, то він використовується, інакше браузер перевіряє наявність другого шрифту зі списку.  Якщо жодного немає, використовується стандартний шрифт.  Наприкінці списку зазвичай прописують ключові слова, що описує тип бажаного шрифту - serif, sans-serif, fantasy, cursive чи monospace.
Універсальні сімейства шрифтів:
serif – антиквенні шрифти (шрифти із засічками), типу Times;
sans-serif – рубані шрифти (шрифти без засічок чи гротески), типовий представник – Arial;
monospace – моноширинні шрифти, ширина кожного символу в такому сімействі однакова (шрифт Courier).
fantasy – сімейство декоративних шрифтів;
cursive – сімейство курсивних шрифтів;
Приклад із використанням:

 


 
 


 
Заголовок h1
 
Заголовок h2


Наступна властивість:
Приклад коду в цьому прикладі вбудуємо стилі в тег за допомогою атрибуту style.

 


 


Приклад нормального шрифту.
Приклад курсиву.
Приклад похилого шрифту.


Видно, що курсив від похилого шрифту зовні не відрізняється.
Наступна властивість:
Капітель - так у друкарні називається текст, в якому малі знаки виглядають, як зменшені великі.  Слід розрізняти капітель і просто зменшені великі літери.  Капітельние букви трохи вище малих і мають, як правило, трохи розширені пропорції.

 


 


 
Звичайний текст. Текст капітелю.
 
Знову звичайний текст.


Наступна властивість:
Властивість font-weight визначає насиченість шрифту.  Для цього у значенні використовуються ключові слова: bold – напівжирне зображення, normal – нормальне зображення.  Значення може бути встановлене в діапазоні від 100 до 900 з кроком 100. Надсвітле зображення, яке може відобразити браузер, має значення 100, а наджирне - 900. Нормальне накреслення шрифту (normal, яке встановлено за замовчуванням) відповідає 400,  , - Значення 700.
Браузер зазвичай не може точно показати необхідну насиченість шрифту, тому перемикаються між значеннями bold , normal і lighter .  На практиці ж зображення в більшості браузерів зазвичай обмежене лише двома варіантами: нормальне зображення і жирне зображення.
Значення lighter та bolder змінюють жирність шрифту щодо насиченості батька, відповідно, у меншу та більшу сторону.

 


 


 
Звичайний текст. Текст bold.
 
Знову звичайний текст.


Наступна властивість:
Властивість font-size – визначає розмір шрифту елемента.  Розмір шрифту можна встановити кількома способами.
Абсолютний розмір шрифту кегля може задаватися з використанням ключових слів: xx-small (вкрай малий), small (малий), medium (середній, значення за замовчуванням), large (великий), x-large (дуже велике), xx-large (  дуже велика).  Абсолютні розміри шрифту залежать від налаштувань браузера та операційної системи, тому вони не зовсім абсолютні.
Для зміни розміру тексту щодо батька використовується інший набір констант (larger – збільшує розмір щодо батьківського, smaller – зменшує розмір).

 


 


 
Звичайний текст.
 
Текст xx-small. Текст larger.
 
Текст мало.
 
Медіа текст.
 
Текст large.
 
Текст x-large.
 
Текст xx-large.
 
Знову звичайний текст.
 
Текст 150%.
 
Текст 15px. Текст larger.


 
Властивості тексту
Крім роботи зі шрифтами, CSS дає ряд інструментів для роботи з властивостями тексту.
Розглянемо першу властивість:
При встановленні інтервалу між рядком звіт йде від базової лінії шрифту.  За умовчанням відстань між рядками тексту залежить від виду та розміру шрифту та визначається браузерами автоматично.  Негативне значення інтерліньяжу не допускається.

 


 


 
Звичайний текст.  Перший рядок. 
Другий рядок. 
Третій рядок.
 
Змінений текст.  Перший рядок. 
Другий рядок. 
Третій рядок.


За процентного запису за 100% береться висота шрифту.
Наступна властивість:
За допомогою визначення ( text-decoration : none )можна прибирати підкреслення у посилань, яке встановлюється у браузерах за замовчуванням.

 


 
 


 
Пошуковик Google.



Наступна властивість:
Властивість text-transform - управляє відображенням літер, можна встановлювати великі або великі символи в залежності від вибраного значення.
Властивість text-transform 
Властивість
Значення
 
Опис
 
приклад
text-transform
 
none 
capitalize 
uppercase 
lowercase
 
Прибрати всі ефекти 
Починати З Великих 
ВСІ ПЕРЕПИСНІ 
всі малі
 
text-transform: uppercase
Приклад використання:

 


 


 
Текст none.
 
Текст capitalize.
 
Текст uppercase.
 
Текст lowercase.


Порівняйте текст, який міститься в html-коді з текстом у вікні браузера.
Наступна властивість:
Властивість text-align – служить для вирівнювання тексту по горизонталі вікна браузера чи контейнера, у якому розташований блок тексту.
Властивість text-align 
Властивість
Значення
 
Опис
 
приклад
text-align
 
left 
right 
center 
justify
 
Вирівнювання тексту
 
text-align: right
Детальний опис значень:
center – текст вирівнюється по центру.
 
justify - вирівнювання по ширині, фактично це вирівнювання по правому та лівому краю одночасно, між словами тексту утворюються порожні місця, які браузер заповнює пробілами.
 
left - вирівнювання по лівому краю.  Це значення використовується за умовчанням.
 
right - вирівнювання з правого краю.
Приклад використання цієї властивості поєднується з прикладом роботи наступної властивості.
Наступна властивість:
Властивість text-indent - служить для створення величини відступу першого рядка текстового блоку (наприклад, для абзацу 
Ця властивість допускає негативне значення, у разі створюється виступ першого рядка.
Властивість text-indent 
Властивість
Значення
 
Опис
 
приклад
text-indent
 
значення 
%

 
Відступ першого рядка
 
text-indent: 15px; 
text-indent: 10%
 


 
 


Робота з властивостями text-align та text-indent.  Для кращого розуміння роботи коду відкрийте сторінку у новому вікні та зменшіть його розмір.


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

.

Браузери обрамляють div-блоки розривами рядка.
Блок 
не може розташовуватися всередині блоку .

приклад
 


 
 


Перший блок тексту
Другий блок тексту.


Основні теги форматування тексту
приклад
 


 
 


Заголовок 
першого рівня
Заголовок другого рівня
Заголовок третього рівня
Заголовок четвертого рівня
Заголовок п'ятого рівня
Заголовок шостого рівня

Тест абзацу


Створіть текстовий файл, як у прикладі.  Збережіть його з розширенням html.
Подвійне клацання за його найменуванням у папці запустить браузер, встановлений за замовчуванням, і в нього вже буде завантажено ваш html-документ.
Виділення в тексті
приклад
 Текст може бути напівжирним. Текст може бути курсивом.

Текст можна наголосити. Текст можна закреслити.
Текст може бути надрядковим.  Текст може бути підрядковим.
Цитати, змінні, адреси
...


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


 
Виділення цитат.  Блоковий елемент.
...

 
Виділення цитат.  Зазвичай відображається курсивом.
...

 
Виведення тексту шрифтом фіксованої ширини.  Застосовується зазвичай для виведення невеликого шматка програмного коду (для великих листингів використовується тег 
).

...

 
Виділення важливих фрагментів тексту.  Зазвичай відображається курсивом.
...

 

...

 
Виведення тексту шрифтом фіксованої ширини.
...

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

 
Використовується для позначки змінних імен.  Зазвичай відображається курсивом.

HTML теги, що визначають вирівнювання тексту, відступ
 
Вирівняний по ширині текст використовується в друкарні
 
У прикладі нижче показано, як вирівняти текст за шириноюсторінки:
 
align="left"
 
align="right"


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

align="justify"
 
align="center"
З кожним днем ​​зростає кількість працівників зайнятих у сфері послуг та поширення інформації.  Якщо символами минулих століть були ферма та фабрика, то символ нинішнього XXI століття – це офіс, обладнаний комп'ютерами, які мають доступ до інформаційного потоку.

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

Значення justify забезпечує рівномірне вирівнювання тексту праворуч і ліворуч, тобто по ширині.  Такий метод широко використовується у пресі.
 
Вирівнювання тексту в HTML по центру та по ширині
 
Вирівнювання тексту в HTML по центру, текст праворуч:
 
Результат:
 
Атрибути та значення
 
align = "left" - визначає вирівнювання тексту зліва(за замовчуванням).
 
align = "center" - вирівнює текст по центру.
 
align = "right" - вирівнює текст праворуч.
Вирівнювання |  HTML відступ тексту
 
HTML текстта його відступ зліва сторінки
 
Виробимо відступ текстуліворуч двома способами:
 
Результат:
 

 
Переглянути у новому вікні.
У html розмір шрифту відіграє важливу роль.  Він дозволяє звернути увагу користувача на важливу інформацію, розміщену на сторінці сайту.  Хоча важливим є не тільки розмір літер, а й їх колір, товщина і навіть сімейство.
 
Теги та атрибути при роботі зі шрифтами html
Мова гіпертексту має великий набір засобів для роботи зі шрифтами.  Адже саме форматування тексту є основним завданням html.
Причиною створення мови HTMLпостала проблема відображення правил форматування тексту браузерами.

Розглянемо теги, які використовуються для роботи зі шрифтами у html та їх атрибути.  Основним із них є тег .  За допомогою значень його атрибутів можна задати кілька характеристик шрифту:

color – встановлює колір тексту;
size – розмір шрифту умовних одиницях.
Підтримується позитивне значення атрибута 1-7.
face – використовується для встановлення сімейства шрифтів тексту, які будуть використані усередині тега .  Підтримується відразу кілька значень, перерахованих через кому.


Форматується лише той текст, що розташований між частинами парного тега font.Решта тексту відображається стандартним шрифтом, встановленим за замовчуванням.

Також у html існує ряд парних тегів, що задають лише одне правило форматування.  До них відносяться:
- Задає в html жирний шрифт.  Тег по дії аналогічний до попереднього;

- Розмір більше встановленого за замовчуванням;

- менший розмір шрифту;

- Похилий текст (курсив).  Аналогічний йому тег ;

- Текст з підкресленням;
- Закреслений;
- Відображення тексту тільки в нижньому регістрі;
- У верхньому регістрі.
Звичайний текст

Жирний текст
Жирний текст
Більше звичайного
Менше звичайного
Курсив
Курсив
З підкресленням
Закреслений

Можливості атрибуту
Крім описаних тегів існує ще кілька способів, як змінити шрифт у html.  Одним із них є застосування універсального атрибуту style.  За допомогою значень його властивостей можна задавати стиль відображення шрифтів:
1) font-family – властивість встановлює сімейство шрифту.  Можливе перерахування кількох значень. 
Зміна шрифту в html на наступне значеннястанеться, якщо попередня родина не встановлена ​​в операційній системікористувача.
Синтаксис написання:
font-family: ім'я шрифту [, ім'я шрифту[, ...]]
2) font-size – задається розмір від 1 до 7. Це один із основних способів того, як у html можна збільшити шрифт. 
Синтаксис написання:
font-size: абсолютний розмір  відносний розмір |  значення |  відсотки |  inherit
Розмір шрифту можна також задати:
У пікселях;
В абсолютному значенні ( xx-small, x-small, small, medium, large);
В процентах;
У пунктах (pt).
Font-size:7
Font-size:24px
Font-size: x-large
Font-size: 200%
Font-size:24pt

3) font-style – встановлює стиль написання шрифту.  Синтаксис:
font-style: normal |  italic |  oblique |  inherit
Значення:
normal -нормальне написання;
italic – курсив;
oblique – шрифт із нахилом вправо;
inherit – успадковує написання батьківського елемента.
Приклад того, як змінити шрифт у html за допомогою цієї властивості:
font-style:inherit
font-style:italic
font-style:normal
font-style:oblique

4) font-variant - переводить всі великі літери в великі.  Синтаксис:
font-variant: normal |  small-caps |  inherit
Приклад того, як змінити шрифт у html цією властивістю:
font-variant:inherit
font-variant:normal
font-variant:small-caps

5) font-weight – дозволяє встановити товщину написання тексту (насиченість).  Синтаксис:
font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900
Значення:
bold - встановлює жирний шрифт html;
bolder – жирніша щодо normal;
lighter –менш насичене щодо normal;
normal – нормальне написання;
100-900 - задається товщина шрифту в числовому еквіваленті.
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
font-weight:900
font-weight:100

Властивість font та колір шрифту html
Font є ще однією контейнерною властивістю.  Усередині себе воно поєднало значення кількох властивостей, призначених для зміни шрифтів.  Синтаксис font :
font: font-size font-family |  inherit
Також як значення можуть бути задані шрифти, що використовуються системою в написах різних елементів управління:
caption – для кнопок;
icon – для іконок;
menu – меню;
message-box –для діалогових вікон;
small-caption – для невеликих елементів керування;
status-bar – шрифт рядка стану.
font:icon
font:caption
font:menu
font:message-box
small-caption
font:status-bar
font:italic 50px білий "Times New Roman", Times, serif

Для того щоб задати колір шрифту в HTML можна використовувати властивість color.  Воно дозволяє встановлювати колір, як за допомогою ключового слова, так і в форматі rgb.  А також у вигляді шістнадцяткового коду.