Главная » Языки программирования

Текст

На чтение 8 мин
Содержание
  1. HTML форматирование текста
  2. Пример
  3. Результат
  4. Пример
  5. Результат
  6. Пример
  7. Результат
  8. Пример
  9. Результат
  10. Пример
  11. Результат
  12. Пример
  13. Результат
  14. Пример
  15. Результат
  16. Пример
  17. Результат
  18. Пример
  19. Результат
  20. Пример
  21. Результат
  22. Пример
  23. Результат
  24. Пример
  25. Результат
  26. Пример
  27. Результат
  28. Пример
  29. Результат
  30. Пример
  31. Форматирование текста
  32. HTML Text Formatting
  33. Example
  34. HTML Formatting Elements
  35. HTML and Elements
  36. Example
  37. Example
  38. HTML and Elements
  39. Example
  40. Example
  41. HTML Element
  42. Example
  43. HTML Element
  44. Example
  45. HTML Element
  46. Example
  47. HTML Element
  48. Example
  49. HTML Element
  50. Example
  51. HTML Element
  52. Example
  53. HTML Exercises
  54. HTML Text Formatting Elements

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

Вид текста на экране зависит от того, какие HTML теги были использованы для его форматирования. Теги форматирования делятся на две категории: теги физической разметки, которые отвечают за стилевое оформление (жирное начертание, курсив, шрифт и т.д.) текста, и теги логической разметки, которые несут смысловую нагрузку (например, дают понять поисковым системам по каким словам необходимо ранжировать веб-страницу).

Рассмотрим подробно теги форматирования и объясним нюансы их применения.

Теги —

Теги — используются для структурирования HTML заголовков. В HTML используются 6 уровней заголовков, от до . используется для обозначения самого важного, а наименее важного заголовков.

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Заголовок первого уровня h1> h2>Заголовок второго уровня h2> h3>Заголовок третьего уровня h3> h4>Заголовок четвертого уровня h4> h5>Заголовок пятого уровня h5> h6>Заголовок шестого уровня h6> body> html>

Результат

Заголовки

Теги и

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Мы использовали тег <strong>, чтобы выделить strong> этот важный фрагмент текста strong>. p> body> html>

Результат

Заголовок окна веб-страницы

Теги и

Пример

html> html> body> p>Это обычный абзац p> p>Важный фрагмент текста выделяется em>курсивным начертанием em> p> body> html>

Результат

example3

Тег

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> pre>Крошка сын к отцу пришёл, и спросила кроха: — Что такое хорошо и что такое плохо? — pre> body> html>

Результат

Крошка сын

Как вы заметили, все пробелы и переносы строк сохранены в браузере.

Тег

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Изучайте язык гипертекстовой разметки HTML на сайте mark>W3Docs.com mark>. p> body> html>

Результат

HTML

Тег

Пример

html> html> head> title>Использование тега SMALL title> head> body> p>Процентная ставка всего 10%* p> small>* - в день small> / body> html>

Результат

Использование тега SMALL

Тег и

Читайте также:  Backend на php пример

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Мой любимый цвет del>зеленый del> ins>синий ins>! p> body> html>

Результат

Мой любимый цвет

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>s>Я учусь в школе s> p> p>Я учусь в институте. p> body> html>

Результат

Я учусь в школе

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

Тег и

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

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Ее любимые цветы del>фиалки del> ins>подснежники ins>․ p> body> html>

Результат

Ее любимые цветы

Пример

html> html> head> title>Заголовок документа title> head> body> p>Здесь мы использовали u>элемент <u> u>. p> body> html>

Результат

форматирование

Теги и

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Формула воды -Hsub>2 sub>O, а формула спирта - Csub>2 sub>Hsub>5 sub>ОН p> p>E = mcsup>2 sup>, где E — энергия объекта, m — его масса, c — скорость света в вакууме. p> body> html>

Результат

Формула воды

Тег

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>dfn>HTML dfn> (от англ. HyperText Markup Language — «язык гипертекстовой разметки») — стандартизированный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML p> body> html>

Результат

HTML

Теги

,
и

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> p>Это первый абзац p> p>Это второй абзац p> body> html>

Результат

форматирование

Пример

html> html> head> title>Заголовок документа title> head> body> h1>Пример использования тега <br> h1> p> Внутри абзаца мы можем вставить тег <br />, br /> чтобы перенести часть текста на другую строку в случае необходимости. p> body> html>

Результат

Пример использования тега BR

Пример

html> html> head> title>Заголовок окна веб-страницы title> head> body> h1>Футбол h1> p>Командный вид спорта, в котором целью является забить мяч в ворота соперника. p> hr> h1>Баскетбол h1> p>Спортивная командная игра с мячом, в которой мяч забрасывают руками в корзину (кольцо) соперника. p> body> html>

Источник

Читайте также:  Содержать специальную html разметку позволяющую однозначно идентифицировать информацию

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

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

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

Код HTML Описание Пример Текст Жирное начертание текста Текст Текст Курсивное начертание текста Текст Текст Верхний индекс e=mc 2 Текст Нижний индекс H2O 
Текст
Текст пишется как есть, включая все пробелы

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

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

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

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

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

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

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

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

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

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

Нижний индекс в тексте

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

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

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

Источник

HTML Text Formatting

HTML contains several elements for defining text with a special meaning.

Example

This is subscript and superscript

HTML Formatting Elements

Formatting elements were designed to display special types of text:

  • — Bold text
  • — Important text
  • — Italic text
  • — Emphasized text
  • — Marked text
  • — Smaller text
  • — Deleted text
  • — Inserted text
  • — Subscript text
  • — Superscript text
Читайте также:  Html select one checkbox only

HTML and Elements

The HTML element defines bold text, without any extra importance.

Example

The HTML element defines text with strong importance. The content inside is typically displayed in bold.

Example

HTML and Elements

The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.

Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.

Example

The HTML element defines emphasized text. The content inside is typically displayed in italic.

Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.

Example

HTML Element

The HTML element defines smaller text:

Example

HTML Element

The HTML element defines text that should be marked or highlighted:

Example

Do not forget to buy milk today.

HTML Element

The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:

Example

My favorite color is blue red.

HTML Element

The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:

Example

HTML Element

The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:

Example

HTML Element

The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :

Example

This is superscripted text.

HTML Exercises

HTML Text Formatting Elements

Tag Description
Defines bold text
Defines emphasized text
Defines a part of text in an alternate voice or mood
Defines smaller text
Defines important text
Defines subscripted text
Defines superscripted text
Defines inserted text
Defines deleted text
Defines marked/highlighted text

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

Оцените статью
© 2023 Программирование