Форматирование текста в HTML. Основные теги форматирования
Форматирование текста является очень важным при создании web страницы. Оно позволяет выделить текст который вы считаете важным и обязательным к прочтению. К форматированию текстов вы прибегаете и в повседневной жизни при оформлении каких либо текстовых документов, для придания выразительности и ясности тексту для читающего.
В HTML присутствуют возможности форматирования текста аналогичные любому текстовому процессору (например: MS Word). Это выделение текста полужирным начертанием, курсивным начертанием, позволяет сделать подчеркнутый и зачеркнутый текста, определить шрифт для текста, его цвет, размер и тд.
<b></b> — тег выделения жирным начертанием, без логического выделения текста, относится к тегам физического форматирования текста. Данный тег является парным тегом, все что находится внутри данного контейнера выделяется жирным начертанием.
<strong></strong> — тег выделения жирным начертанием с логическим выделением содержимого.
Текст внутри данного тега выделяется не только физически и видим для пользователя, но и логически, показывая поисковым системам что данный текст на странице важен. Если вам необходимо просто выделить текст который не несет в себе смысловой нагрузки всей страницы, то лучше всего использовать тег физического форматирования <b>, перенасыщенность страницы тегами <strong> ведет к наложению санкций поисковыми системами на ваш сайт или страницу.
<i></i> — тег выделения текста курсивным начертанием без логического выделения. Парные тег, весь текст заключенный внутри данного тега будет выводиться браузером курсивным начертанием.
<em></em> — тег выделения курсивным начертанием с логическим выделением текста для поисковых систем. Парный тег, все что заключено внутрь данного тега будет выведено браузером курсивным начертанием, и для поисковых систем определено как важная смысловая фраза для страницы.
<s></s> — текст расположенный внутри данного тега будет выводиться браузером как зачеркнутый текст.
Применяется данный тег довольно редко, но в некоторых случаях он крайне необходим.
<u></u> — текст расположенный внутри данного тега будет выводиться браузером в виде подчеркнутого текста, используется для выделения определенных слов в тексте, для придания ему важности и значимости.
<small></small> — данный тег используется для уменьшения размера расположенного внутри него текста в отношении размера основного текста. Подходит для использования в качестве комментария или пояснения для основного текста.
<big></big> — данный тег используется для увеличения размера расположенного внутри него текста в отношении размера основного текста. Используется для выделения отдельного слова или фразы на странице большим размером чем основной текст, для придания ему большей значимости в глазах посетителя сайта.
<sup></sup> — используется для написания верхнего индекса, применяется в случаях когда у вас на странице есть какие либо формулы или математические примеры (для обозначения степеней например).
<sub></sub> — используется для написания нижнего индекса, прменяется в случаях написания на странице каких либо формул (например: химические формулы).
<pre></pre> — текст находящийся внутри данного тега будет отображен браузером в таком виде в каком он написан в данном теге, со всеми пробелами и со всеми отступами.
<mark></mark> — используется для подстветки участка текста на странице. Логического выделения данный тег не несет, но удобен для выделения важной по вашему мнению информации на сайте.
<blockquote></blockquote> — используется для оформления цитат, располагает текст расположенный внутри данного тега в новом блоке и добавляет ему некоторое форматирование.
Так же для форматирования текста используется тег <FONT></FONT> который позволяет задать размер, цвет и шрифт тексту с помощью соответствующих атрибутов: 1.
SIZE — позволяет задать размер текста, принимает значения от 1 до 7. 2. COLOR — позволяет задать цвет тексту находящемуся в данном теге, использует стандартные цвета палитры RGB или имя цвета. 3. FACE — позволяет задать тип шрифта или несколько шрифтов через точку с запятой.
ПРИМЕР ИСПОЛЬЗОВАНИЯ ТЕГА <FONT>:
<font size=3 color=red face=Arial> Данный текст будет выведен красным цветом, размером 3, шрифтом Arial </font>
Пример использования тегов форматирования текста
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Мой первый сайт</title> </head> <body> <h2 align="center"> Привет МИР!!!</h2> <p><b>Дорогой</b> друг я рад <i>видеть</i> тебя на моем <big><b><i>первом сайте!</i></b></big</p> </body> </html>
Результат отображения данного кода в браузере будет таким:
Лабораторная работа 4.
Форматирование текста (pdf)
Оформление текста
Для оформления текста существуют следующие теги, именуемые
Теги <b> и <strong> позволяют написать жирный текст:
<strong>Жирный текст</strong> или <b>Жирный текст</b>
В результате оба этих варианта в браузере будут выглядеть так:
Жирный текст
Теги <i> и <em> позволяют написать текст курсивом:
<i>Текст курсивом</i> или <em>Текст курсивом</em>
В результате оба этих варианта в браузере будут выглядеть так:
Текст курсивом
Тег <u> позволяет написать подчеркнутый текст:
<u>Подчеркнутый текст</u>
В браузере увидим:
Подчеркнутый текст
Этот тег полезно использовать для выделения ссылок.
Тег <strike> позволяет написать зачеркнутый текст:
<strike>Зачеркнутый текст</strike>
В браузере увидим:
Зачеркнутый текст
Теги <sup> и <sub> позволяют написать верхний индекс или
нижний индекс соответственно.
Эти теги
уменьшают размер текста и сдвигают его
относительно базовой линии вверх или
вниз.
Например, их можно использовать для написания формул:
E = mc<sup>2</sup> или C<sub>2</sub>H<sub>5</sub>OH
В браузере увидим:
E = mc2 или C2H5OH
Теги форматирования можно использовать совместно.
Например, чтобы сделать текст жирным и курсивным одновременно, достаточно написать:
<b><i>Жирный курсивный текст</i></b>
И в браузере мы увидим:
Жирный курсивный текст
Обратите внимание: если тег <b> стоит первым, то закрывающий тег </b> должен стоять в конце. Т.е. теги «вкладываюся» друг в друга как матрешки. Именно поэтому парные теги еще называют контейнерами.
Сводная таблица тегов форматирования:
Тег | Действие | Пример использования | Результат |
<b> | Делает текст жирным | <b>Текст</b> | Текст |
<strong> | Делает текст жирным | <strong>Текст</strong> | Текст |
<i> | Делает текст курсивным | <i>Текст</i> | Текст |
<em> | Делает текст курсивным | <em>Текст</em> | Текст |
<u> | Делает текст подчеркнутым | <u>Текст</u> | Текст |
<strike> | Делает текст зачеркнутым | <strike>Текст</strike> | Текст |
<sup> | Верхний индекс | E = mc<sup>2</sup> | E = mc2 |
<sub> | C<sub>2</sub>H<sub>5</sub>OH | C2H5OH |
Заголовки
Чтобы
как-то выделить заголовки в тексте, в
html существуют специальные теги заголовка.
Эти теги изменяют размер текста, сверх
и снизу заголовка делаются отступы,
пропорциональные его размеру, а также
после заголовка делается перенос строки.
Вот эти теги: <h2>, <h3> : <h6>. <h2> — самый большой заголовок, <h6> — самый маленький.
Т.е. если написать:
<h2>Текст в виде большого заголовка</h2> и <h6>Текст в виде маленького заголовка</h6>
Браузер отобразит это так:
Текст в виде большого заголовка
и
Текст в виде маленького заголовка Теги переноса строки и форматирования абзаца
Вот еще несколько полезных теги для форматирования текста.
Полезно знать:
Если в тесте html-документа поставить перенос строки, то браузер его проигнорирует и отобразит весь текст в одну строку.
Например, в тесте html-документа написано:
Идет бычок, качается, Вздыхает на ходу…
А браузер отобразит этот текст следующим образом:
Идет
бычок, качается, Вздыхает на ходу.
..
Тут-то нас и спасет тег
Т.е написав:
Идет бычок, качается,<br> Вздыхает на ходу… или Идет бычок, качается,<br>Вздыхает на ходу…
В браузере мы увидим:
Идет бычок, качается, Вздыхает на ходу…
С помощью этого тега можно не только перенести тест на новую строку, но и делать отступы между разными элементами документа. Достаточно просто вставить не один тег <br>, а два и т.д.
Полезно знать:
Если в тесте html-документа подряд стоят несколько пробелов, то браузер их проигнорирует и отобразит только один.
Например, в тесте html-документа написано:
Здравствуй, дорогой друг!
А браузер отобразит этот текст следующим образом:
Здравствуй, дорогой друг!
Тег <pre> используется, когда требуется написать текст как есть, включая все пробелы и переносы строки.
Т.е. если написать:
<pre>Идет
бычок, качается,
Вздыхает
на ходу.
..</pre>
То браузер отобразит этот текст следующим образом:
Идет бычок, качается,
Вздыхает на ходу…
Но!
Не стоит злоупотреблять тегом <pre>. И по возможности обходиться без него.
Любой
текст можно, а иногда и нужно, разбить
на абзацы. В html такую функцию выполняет
тег
Запрос функции: подчеркивание текста — Spec
dClauzel 1
Было бы неплохо иметь поддержку подчеркивания текста. Это дополнение к сильному, курсиву и удару.
HTML-теги bla существуют и могут использоваться для представления текста, который должен стилистически отличаться от обычного текста.
5 лайков
zzzzBov 2
Markdown уже поддерживает этот элемент:
вот пример!
Если серьезно, то лучше избегать элемента , спецификация прямо говорит об этом
В большинстве случаев более подходящим будет другой элемент…
Целью уценки не является сопоставление функций HTML 1:1 с простым синтаксисом. Цель состоит в том, чтобы предоставить удобный способ написания текста и охват наиболее часто используемых функций. Из-за этого я не вижу смысла добавлять поддержку элемента в стандартную спецификацию.
Это может быть полезно в качестве дополнительного расширения вместе с поддержкой , , , ,
и ряд других менее часто используемых элементов.
4 лайков
3
Жирный шрифт, курсив, подчеркивание и зачеркивание были основными возможностями форматирования со времен (по крайней мере) BBS. Даже сегодня часто можно увидеть, как люди помечают текст как *важность* , /неявное значение/ , _Title_of_a_movie_ , или для внесения -исправлений- модификаций.
Поддержка этих 4 основных стилей форматирования просто обеспечит непрерывность практики.
2 лайка
zzzzBov 4
Я хотел сказать, что поддерживает эти стили форматирования. Чего он не делает, так это сокращения для подчеркнутого текста.
Непредоставление сокращенной записи не равносильно полному отказу от поддержки функции.
1 Нравится
маца 5
Подчеркивание использовалось, поскольку пишущие машинки не могли иначе выделять текст. Теперь мы можем выделить курсивом , жирным шрифтом и жирным курсивом и, таким образом, подчеркивание не обязательно, а просто исторический артефакт. Кстати, в вашем списке семантических модификаций отсутствует какая-то статистическая подоплека. И, как уже говорили другие, всегда есть запасной вариант HTML.
2 лайков
Зегнат 6
Позвольте мне указать на то, чего здесь раньше не было.
Жирный шрифт, курсив, подчеркивание и зачеркивание были основными возможностями форматирования со времен (по крайней мере) BBS.
В спецификации никогда не упоминаются слова «курсив» или «жирный шрифт». Это не фактические особенности синтаксиса Markdown. Вместо этого есть «акцент» и «сильный акцент». Standard Markdown также не указывает, что они должны быть выделены курсивом и полужирным шрифтом соответственно.
Markdown не предлагает способа «представить текст, который должен стилистически отличаться от обычного текста» (а может быть, должен?), поэтому в Markdown нет ничего, что можно было бы дополнить добавлением дополнительного синтаксиса для поддержки чего-то столь же специфичного, как подчеркивание текста.
Вместо этого вы можете настроить свой рендерер так, чтобы он отмечал выделение подчеркиванием, а не каким-либо другим стилем. В случае HTML это можно сделать, установив пользовательский CSS.
3 лайка
бнб 7
Зегнат:
В спецификации никогда не упоминаются слова «курсив» или «жирный шрифт». Это не фактические особенности синтаксиса Markdown. Вместо этого есть «акцент» и «сильный акцент». Standard Markdown также не указывает, что они должны быть выделены курсивом и полужирным шрифтом соответственно.
Верно, но стандартно, что один _ и * означают курсив, а два — жирный. Люди были бы возмущены, если бы вы поменяли местами эти значения во всех текущих реализациях.
Это стандартный способ сделать это. Потому что это не в спецификации теперь не значит, что этого не должно быть.
мекс 8
Я бы скорее считал распространенным заблуждением, чем стандартом, что _ / * должен означать курсив, а __ / ** должен означать жирный шрифт.
Акцент переводится в тег выделения ( ), а сильный акцент переводится в тег строгости ( ). Примечательно, что он не переведен ни на , ни на по точным причинам, упомянутым Zegnat выше.
4 лайков
9
Как веб-дизайнер, вы можете легко сделать текст подчеркнутым с помощью простого CSS, например: