Для початку поговоримо про заголовках. У попередніх уроках Ви могли бачити як використовується текст. Однак, поряд з ним, в html є теги, що позначають заголовки: h1, h2, h3, h4, h5, h6. Вони йдуть в порядку від найбільшого, до самого маленького: h1 - найбільший заголовок, h2 - трохи менше, ну а h6, Останній з них, відповідно найменший.

Тема 1

Тема 2

Тема 3

Тема 4

демонстрація завантажити вихідні
Вищевказаний код відобразить наступне

Увага! відразу хочу сказати, що заголовки треба використовувати акуратно! Пошуковий робот, який створює масив інформації по вашому сайту в ПЕРШУ чергу по Контенту аналізує заголовки. І якщо, наприклад, в них буде міститися порожня інформація на кшталт цікаво, Увага, А тут ось ще цікаво, То це піде в мінус Вашому сайту! Відразу звертайте на це увагу і робіть заголовки інформативними! наприклад: Введення в соціологію, Парадокс Ейнштейна-Подольського-Розена, життєпис Горація, Юрський період, В яких повинен міститися Сенс всієї або проміжної інформації даної сторінки.

Форматування тексту в HTML

Напевно, Ви вже помітили, що якщо Ви переносите рядок і продовжуєте друкувати текст в коді, то сам текст все одно йде в одним абзацом без розриву рядків. Для того, щоб перенести рядок треба використовувати одиночний тег br в місці примусового перенесення.

Найчастіше (і правильніше) для розриву рядків і позначення абзацу використовують тег p (параграф). У разі використання цього тега абзаци у Вас будуть розділяти відступами один від одного.

Текст першого абзацу. Текст першого абзацу. Текст першого абзацу. Текст першого абзацу.

Текст другого абзацу. Текст другого абзацу. Текст другого абзацу. Текст другого абзацу.

демонстрація завантажити вихідні

У тега p є атрибут align, Який відповідає за вирівнювання параграфа. Може мати наступні значення:

left - вирівнювання по лівій стороні
right - вирівняний по правій стороні
center - по центру
jastify - по ширині

Розглянемо приклад коду вирівнювання тексту по лівій стороні, по правій і по центру

Текст першого абзацу. Текст першого абзацу. Текст першого абзацу.

Текст другого абзацу. Текст другого абзацу. Текст другого абзацу.

Текст третього абзацу. Текст третього абзацу. Текст третього абзацу.

демонстрація завантажити вихідні

Також існує тег center. Він центрує його вміст (текст, зображення і тд). Для тексту його дію аналогічно вирівнюванню по центру.

Текст по центру

Як виділити текст напівжирним в html?

strong - стандартне виділення тексту жирним.
b - виділення ключового слова жирним. Увійшло в побут раніше тега strong, тому деякі вважають його застарілим (проте тег використовується в HTML5). Нарівні зі strong сприймається Пошуковими системами при визначенні ключових слів, словосполучень.
Увага! Виділення тексту даними тегами розуміється Пошукової Системою як особливо важливе.
Будьте уважні:
1. виділяйте тільки важливі слова і словосполучення
2. важливі - це не чверть тексту. намагайтеся обмежити застосування даного тега.

Розглянемо приклад коду виділення тексту жирним

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

демонстрація завантажити вихідні
У браузері відобразиться наступне

І ті, і інші слова будуть виділені жирним, однак для Пошукової Системи буде важливі слова ключового слова

Як виділити текст курсивом в html?

i - виділення курсивом. Даним відкриває і закриває тегами слід виділяти тільки важливу інформацію (ключові слова), так як пошукові системи будуть видавати дані, орієнтуючись по ним.
em - стандартне виділення курсивом. Немає обмежень у використанні.
cite - даний вид курсиву використовується для цитати, посилання на матеріал і авторів.
dfn - для виділення визначень і термінів.

Розглянемо приклад коду c виділенням тексту курсивом

Mercedes-Benz - це німецький автоконцерн, який був заснований в 1886 році.
Назва походить від двох марок - Мерседес і Бенц.
Він займається в основному випуском легкових автомобілів преміум-класу, вантажних автомобілів, автобусів.

http://ru.wikipedia.org/wiki/Mercedes-Benz

демонстрація завантажити вихідні
У браузері відобразиться так

Як виділити текст підкресленням в html?

u - стандартне виділення підкресленням (краще використовувати з останніми специфікаціями html)
ins - так позначаються нові дані (текст, пояснення) вставлені в Ваш документ (або додані, або замість старих). виділяються підкресленням

Дані і в першому, і в другому випадку будуть виділено підкресленням.

Як зробити перекреслений текст в html?

Перекресленим виділяється текст в наступних тегах
del - внесена виправлення.
strike - стандартне перекреслення.
s - скорочений запис strike

Двічі по два дорівнює п'яти чотирьом. звичайний перекреслений текст

демонстрація завантажити вихідні

Як виділити текст в верхньому і нижньому індексах в html?

sub - тег, що відображає текст нижче рівня рядка шрифтом меншого розміру.
sup - тег, що відображає текст вище рівня рядка шрифтом меншого розміру.

a ²+ b ² \u003d c ² - теорема Піфагора.

H ₂O - хімічна формула води.

демонстрація завантажити вихідні
У браузері відобразиться наступне

Тег font в html

Для редагування тексту в html також використовується тег font. Однак з введенням блокової верстки і популярністю CSS даний спосіб швидко почав забуватися.

тег font вказує параметри шрифту (тип шрифту, розмір, колір). У нього є відповідні атрибути:

face - назва шрифту. Сюди можна додати кілька назв шрифтів (чере кому), так як у користувача, що переглядає Ваш сайт, такого шрифту може НЕ бути за замовчуванням або він не буде підтримувати цю мову. Наприклад користувач з Польщі або Китаю. Відповідно, якщо даний шрифт не знайдений, то використовується наступний за списком.

size - активні значення від 1 до 7. Шрифт по мовчанню дорівнює 3.

color - колір тексту. Якщо не поставити параметр, то текст буде чорним.

Шрифт Tahoma, розмір 5, колір синій.

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

Чи можна вивести текст у тому вигляді, в якому надрукував (а). тег PRE

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

Як захотіли ввести текст 
 так він і відобразився! \u003d)

демонстрація завантажити вихідні
У браузері буде так

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

тег abbr позначає абревіатуру. Абревіатура - скорочене слово або словосполучення. Абревіатури можна зустріти всюди, наприклад, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
атрибута title

HTML

демонстрація завантажити вихідні
У браузері буде виглядати так

тег acronym на відміну від абревіатури позначає усталені слово (акронім), яке вживається як самостійне. Наприклад: СРСР (Союз Радянських Соціалістичних Республік), СНІД (синдром набутого імунного дефіциту), США (Сполучені Штати Америки).
Слово виділене в дані теги виділяється пунктиром і при наведенні виводить вміст атрибута title

HTML

Горизонтальна риса в html або тег hr

Для позначення горизонтальної лінії в html використовується тег hr. Звірити і знизу він виділяється відступом.

У даного тега є такі атрибути:
align - вирівнювання горизонтальної лінії. Раніше вже згадувалися типи вирівнювання: по лівому краю (left), по центру (center), по правому (right).
width - фіксує довжину риси в пікселях або відсотках
size - товщина лінії
color - колір лінії
noshade - прибирає рельєфність лінії

звичайна лінія

---

Лінія по центру довжиною 50% від ширини блоку, товщина лінії 2

---

Лінія праворуч, синя, 200 пікселів

---

демонстрація завантажити вихідні
У браузері

Дякую за увагу! Урок був довгий і складний! Ви зробили великий крок вперед!

опис

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

синтаксис

text-decoration: [blink || line-through || overline || underline] | none | inherit

значення

blink Встановлює миготливий текст. Такий текст періодично, приблизно раз в секунду зникає, потім знову з'являється на колишньому місці. Це значення в даний час не підтримує браузерами і засуджується в CSS3, натомість рекомендується використовувати анімацію. line-through Створює перекреслений текст (приклад). overline Лінія проходить над текстом (приклад). underline Встановлює підкреслений текст (приклад). none Скасовує всі ефекти, в тому числі і підкреслення у посилань, яке задано за замовчуванням. inherit Значення успадковується у батька.

HTML5 CSS2.1 IE Cr Op Sa Fx

стратегічне напад

об'єктна модель

document.getElementById ( "elementID") .style.textDecoration

document.getElementById ( "elementID") .style.textDecorationBlink

document.getElementById ( "elementID") .style.textDecorationLineThrough

document.getElementById ( "elementID") .style.textDecorationNone

document.getElementById ( "elementID") .style.textDecorationOverLine

document.getElementById ( "elementID") .style.textDecorationUnderline

браузери

Internet Explorer до версії 7.0 включно не підтримує значення inherit. Лінія отримана за допомогою значення line-through в IE7 розташовується вище, ніж в інших браузерах; в IE8 ця помилка виправлена.

До сих пір для закреслення тексту в HTML-коді широко застосовується тег , Який є скороченим написанням тега . Серед безлічі значень англійського слова «strike» є «черкає» і «викреслювати». Ось як виглядають результати використання цих двох тегів:

2. текст, закреслений за допомогою тега → текст, закреслений за допомогою тега

Як бачимо, результат ідентичний. Всі сучасні браузери розуміють ці теги, але, тим не менш, обидва вони нерекомендовані для використання. У специфікаціях XHTML і HTML5 вони взагалі відсутні. Та й в специфікації HTML 4.0 теж описуються як небажані.

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

І хоча вам можуть бути байдужі такі академічні подробиці, але все ж не користуйтеся цими застарілими тегами. Якщо потрібно закреслити текст в HTML, краще використовувати тег . Ось результат його застосування:

1. текст, закреслений за допомогою тега → текст, закреслений за допомогою тега

Як бачимо, візуально немає ніякої різниці між , і , Але за змістом - дуже навіть велика різниця.

тег призначений для того, щоб відзначати віддалені рядки тексту. Тобто він несе певну логічну інформацію про текст і відноситься до класу так званих семантичних тегів HTML. Форматування тексту як закресленого при застосуванні - це не призначення цього тега а всього лише наслідок його логічної суті.

Ще раз повторюся: якщо вам байдужа ідеологія мови розмітки HTML і важливий тільки візуальний ефект, просто вважайте, що для закреслення тексту призначений тег а не або . Хоча б з таких же міркувань, за якими пишете «професіоналізм» а не «професіоналізм».

Крім того, тег більш функціональний, ніж і . Він вміє передавати додаткову інформацію про текст за допомогою атрибутів «cite» і «datetime»:

• Атрибут « cite»Призначений містити посилання на документ, в якому наведена причина видалення даного тексту і, може бути, інші подробиці про його редагуванні.
• Атрибут « datetime»Призначений вказувати дату і час редагування даного тексту.

Що ж робити, якщо вам потрібно вивести текст як закреслений, але позначати його як віддалений не хочете? Як уже було згадано вище, вам допоможе CSS. Більш конкретно - властивість «text-decoration», яке має значення «line-through». Ось так, наприклад, це можна зробити:

1. → текст, закреслений засобами CSS

Надто багато коду? Згоден. Тому можна його зменшити винісши інструкції CSS в окремий файл. У ньому можна, наприклад, наступним чином описати клас закресленого тексту:

S (text-decoration: line-through;) Це дозволить писати в HTML-коді наступним чином:

1. текст, закреслений засобами CSS → текст, закреслений засобами CSS

Цей код також довше, ніж у випадку з , Але якщо бажаєте долучитися до семантичного Інтернету, з подібною надмірністю доведеться примиритися. Вдалого вам закреслення!

Попередні публікації:

Для закреслення тексту в HTML застосовується тег strike:

1. Електронік
2. Сироїжкін
3. Смирнов
4. Чижиков
5. Кукушкіна

Результат виконання даного коду:

1. Електронік
2. Сироїжкін
3. Смирнов
4. Чижиков
5. Кукушкіна

Даний тег не має атрибутів. Замість тега HTML strike може використовуватися і скорочена його версія - s (Аналогічно, жирний - b, Курсив - i, Підкреслений - u):

конструктор LEGO "Нубекс"

Як ви можете бачити, результат аналогічний:

Конструктор LEGO "Нубекс"

Використання тега s і strike вважається невірним з точки зору валідації коду (необхідно використовувати перехідний). Або інший варіант - використовувати CSS.

Перекреслений текст: CSS

За допомогою CSS текст можна "декаріровать" за допомогою властивості text-decoration. Це властивість може набувати таких значень:

• line-through - використовується для перекреслення тексту;
• underline - підкреслює текст;
• overline - використовується для приміщення лінії над текстом (надчеркнутий текст);
• blink - тест мигає (кожну секунду);
• none - дозволяє скасувати всі ефекти, застосовані до тексту.

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

Text-decoration: underline blink overline;

Зробимо тепер перекреслений текст за допомогою CSS:

конструктор LEGO сайтів "Нубекс"