Текст

Форматирование текста

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста

Код HTML Описание Пример Текст Жирное начертание текста Текст Текст Курсивное начертание текста Текст ^Текст Верхний индекс e=mc 2 _Текст Нижний индекс H₂O

Текст

Текст пишется как есть, включая все пробелы

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

      
Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда — никто не смеет принять его вызов.
  

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

      
Формула изумруда: Be3Al2(SiO3)6
  

Результат данного примера показан на рис. 2.

Рис. 2. Нижний индекс в тексте

Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.

Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Источник

HTML Форматирование

С помощью тэгов форматирования вы можете выделять семантически важный текст на страницах, создавать тексты «рукописного начертания», вставлять в HTML документы символы с верхним и нижним индексом, а также увеличивать и уменьшать размер шрифта.

Что такое семантика?

1. семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем «легче» документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным.
2. компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
3. семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.

Жирный текст

Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент . Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги и . Важно понимать семантическую разницу между ними.

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

HTML-код с тегами и :

 
Внимание: крутой спуск.
 
Это рецепты оливье и винегрета.
 

Пример: важный и жирный текст

 Внимание: крутой спуск. Это рецепты оливье и винегрета.

 
Внимание: крутой спуск.
 
Это рецепты оливье и винегрета.
 

Курсивный текст

Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент . Как и с тегами для жирного текста, имеются два разных тега, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.

Тег применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега , который применяется просто для создания курсивного текста.

 
Я люблю Родину!
 
Имя Виктория означает победа.

Пример: акцент и курсив

Я люблю Родину!
Имя Виктория означает победа.

 
Я люблю Родину!
 
Имя Виктория означает победа.

Теги и

Тег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.

Это обычный текст.
 
Это текст с меньшими буквами.
 
Это текст с большими буквами.

Пример: уменьшенный и увеличенный шрифт

Это обычный текст.
Это текст с меньшими буквами.
Это текст с большими буквами.

Это обычный текст.
 
Это текст с меньшими буквами.
 
Это текст с большими буквами.

Внимание: Это чисто презентационный код, элемент удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента веб — разработчики должны использовать CSS свойства.

HTML тег

Тег используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера выделяется желтым цветом как чернильным маркером.

HTML тег

Тег используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в исправленном тексте документа были сделаны. Браузеры обычно помечают текст в контейнере как перечеркнутый .

HTML тег

Тег предназначен для выделения текста, который был добавлен в новую версию документа. Подобное форматирование позволяет отследить, какой фрагмент содержимого был добавлен во время последнего обновления документа. Браузеры обычно помечают текст в контейнере .

HTML тег

Тег _{отображает текст в нижнем индексе. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.Такой текст на практике может быть использован, например для написания различных формул в нижнем индексе .}

HTML тег

Тег ^{отображает текст в верхнем индексе. Текст отображается уменьшенным размером и располагается выше, чем базовая линия остальных символов строки. Такой текст на практике может быть использован, например для написания различных формул или сносок в верхнем индексе .}

Перевод строк и горизонтальные линии

Тег
(перевод строк)

Как вы уже видели раньше, тег

позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег
. Одним из видимых с первого взгляда отличий данного тега от

является отсутствие отступов после и перед тегом
. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент
в любую строку, где хотите оборвать поток текста и вставить разрыв строки.

Тег

---

(горизонтальная линия)

Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные подразделы. Горизонтальные линии в веб-документе играют такую же роль, как орнаментальные полосы в печатных изданиях. Для вставки горизонтальной линии используется одинарный тег

---

. Данный блочный одинарный тег позволяет вставить горизонтальную черту, ширина которой равна либо всей ширине контейнера, в который вложен тег, либо ширине окна браузера.

Пример: перевод строк и горизонтальные линии

Эти строки отделены друг от друга с помощью абзаца (p):

Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик

Эти строки отделены друг от друга с помощью абзаца (p):
 
Это первый абзац.
 
Это второй абзац.
 
Это линия:
 
Эти строки отделены друг от друга с помощью тега br: 
Наша Таня громко плачет
Уронила в речку мячик
 

В тексте есть слово: удача.
 
Слово беда было удалено из текста.
 
Слово победа было добавлено в текст.
 
Формула воды: Н2O.
 
Скорость ветра: 20м3/сек.

Пример: форматирование текста

В тексте есть слово: удача. Слово беда было удалено из текста. Слово было добавлено в текст. Формула воды: Н2O. Скорость ветра: 20м3/сек.

В тексте есть слово: удача.
 
Слово беда было удалено из текста.
 
Слово победа было добавлено в текст.
 
Формула воды: Н2O.
 
Скорость ветра: 20м3/сек.

Задачи

Итоговое задание 5

На этом уроке вы познакомились с элементами, предназначенными для разметки небольших фраз и отдельных слов. Особое внимание было посвящено логической разметке текста с помощью тегов позволяющими указать на важность слова или фразы, а не только визуальному форматированию.

Пришло время повторить изученное и выполнить пять несложных заданий:

Семантически сильное слово

Выделите слово «профессионалом» жирным шрифтом, обозначив тем самым тем самым особую семантическую важность этого слова.

      
Ты должен стать профессионалом своего дела
  

      
Ты должен стать профессионалом своего дела
  

Акцент на слове

Сделайте акцент на слове «полный». При этом визуально это слово должно отображаться курсивом.

      
За год Земля делает полный оборот вокруг Солнца.
  

      
За год Земля делает полный оборот вокруг Солнца.
  

Фоновое выделение

Создайте словно маркером фоновое выделение на слове «равномерно».

      
Когда тело падает — его скорость равномерно возрастает.
  

      
Когда тело падает — его скорость равномерно возрастает.
  

Верхний индекс

Примените форматирование к тексту так, чтобы цифра «2» оказалась в верхнем индексе.

      
Единица измерения площади — м2.
  

      
Единица измерения площади — м2.
  

Эффект перечеркивания

Примените к слову «чая», которое должно быть удалено, эффект перечеркивания.

      
Я люблю утром выпить чашечку чая кофе.
  

      
Я люблю утром выпить чашечку чая кофе.
  

Источник