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

На самом деле, для того, чтобы в окне просмотра браузера отобразить текстовую строку, Никаких тегов применять не требуется: Достаточно просто написать сам текст. Но когда нужно уже разбить его хотя бы на абзацы, вот тут надо пользоваться тегами. Дело в том, что в различных компьютерных системах используются различные символы для разбивки текста на абзацы, a HTML-документы всегда должны отображаться по возможности одинаково на самых различных компьютерных платформах. Поэтому и пришлось ввести теги, обозначающие абзацы.

В начале каждого абзаца ставится тег , а в конце, закрывающий тег . При этом, тег, естественно, обладает некоторыми параметрами. В их число входят уже известные нам общие параметры идентификации class и id , параметр стилевого оформления style , который нам предстоит рассмотреть во второй главе, и параметр-выравнивания align . Вот о последнем параметре нам следует поговорить несколько поподробнее.

В HTML термин "выравнивание" относят как к горизонтальному, так и к вертикальному позиционированию элемента. Но в случае с абзацами текста имеет смысл говорить только о горизонтальном выравнивании или, как его еще называют, "выключке".

Выключка позволяет прижимать абзац к левому или правому краю окна просмотра браузера, центрировать его или растягивать слова таким образом, чтобы текст равномерно занимал всю ширину отведенного ему места. Для этих целей используются значения left, right, center и justify , соответственно. Рассмотрим их применение на примере еще одного HTML-документа.

Листинг 1.4

Горизонтальное выравнивание a63aцeв

Aбзац, прижатый к левому краю
Aбзац, прижатый к лравому краю
Центрированный абзац

Aбзац, растянутый по ширине

Результат просмотра файла с таким кодом при помощи браузера Internet Explorer показан на рис. 1.4. Как видно, последний абзац, который согласно нашему коду дожен был быть растянутым по ширине, отображается браузером Internet Explorer так же, как и первый. Данный случай может служить ярким примером того, как браузеры по разному воспринимают код HTML. В нашем случае Internet Explorer просто проигнорировал неизвестный параметр, воспользовавшись стандартным вариантом отображения.

Рис. 1.4. Окно браузера с результатом отображения файла, приведенного в листинге 1.4

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

Листинг 1.5

"http://www.w3.org/TR/html4/strict.dtd">
.

Принудительные разрывы cтрок


Aбзац, который мы
Принудительно разорвали
Следующий абзац

Абзац после принудительного разрыва

А как выглядит этот файл при просмотре его с помощью браузера, показано на рис. 1.5.

Рис. 1.5. Окно браузера с результатом отображения файла, приведенного в листинге 1.5

Тег
помимо всеобщих параметров идентификации обладает еще параметром clear , который применяется для более точного выравнивания текста, когда тот обтекает какой-либо объект, например, графическое изображение, внедренное в состав Web-страницы. В качестве значения этого параметра может использоваться одно из четырех заранее предопределенных ключевых слов: none, left, right, all .

Значение none используется по умолчанию и указывает, что следующая строка начнется с того места, где она начиналась бы и без использования данного параметра, в обычных условиях. Значение left говорит о том, что следующая строка начнется у левого поля объекта, обтекаемого текстом. Если же необходимо использовать правое поле для этих целей, то следует воспользоваться значением right . А значение all указывает браузеру, что воспользоваться можно как левым, так и правым полем объекта, лишь бы текст был максимально компактно отображен.

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

Тег обладает следующими, присущими именно ему параметрами: size , использующийся для указания размера применяемого шрифта, color - для установки цвета символов шрифта, и face , указывающий, какой именно шрифт будет применяться для отображения текста. Разберем эти параметры.

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

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

А для уменьшения размера символов на два уровня, применяется следующий код:

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

Листинг 1.6.

Размер сиволов

Начертания cимволов

Текст бывает полужирным или курсивным

А может быть одновременно и полужирным и курсивным
Бывает подчеркнутым и nepeчepкнутым.
или моноширинным .
Мы можем увеличивать и уменьшать размер символов.

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

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

• Выделение термина в тексте производится при помощи пары тегов и .
• "Усиленное" выделение, призванное еще больше привлекать внимание, создается при помощи тега и его закрывающего близнеца .
• При помощи тегов и указывается, что текст, расположенный между ними, является цитатой.
• Определение некоего термина выделяется при помощи тегов и .
• Пара тегов и применяется для выделения исходного кода на каком-либо языке программирования.
• Текстовая информация, выводимая программой, оформляется при помощи тегов И .
• Текст, вводимый пользователем, обозначается тегами и . П Переменные в исходном коде программ обозначаются при помощи пары тегов и .
• Теги и выделяют аббревиатуры.
• А устоявшиеся буквосочетания, не являющиеся аббревиатурами, т. е. акронимы, выделяются тегами и .

Однако, знать наименования тегов мало, надо еще отчетливо себе представлять, как именно они оформляют текст. И здесь без примера никак не обойтись.

Рис. 1.7. Окно браузера с результатом отображения файла, приведенного в листинге 1.7

Листинг 1.8

Стандартные варианты отображения

Это обычный текст
Это выделение. И Более заметное выделение

Результат отображения подобного HTML-документа показан на рис. 1.8.

Рис. 1.8. Окно браузера с результатом отображения файла, приведенного в листинге 1.8

Очень часто возникает необходимость разместить на Web-странице текст, заранее приготовленный при помощи какого-либо текстового редактора, который уже самостоятельно отформатировал текст. В этом случае формат текста, его переносы и размещение напрямую зависят от длины строки в символах, которая была установлена в этом текстовом редакторе. Если текст разместить на Web-странице при помощи обычных средств, это форматирование, естественно, будет нарушено. Поэтому для таких предварительно отформатированных фрагментов был введен собственный тег. Этот тег обладает параметром width, в качестве значения которого указывается длина строки в символах. Естественно, желательно перед применением этого тега принудительно устанавливать именно тот шрифт, который использовался при форматировании текста. Итак, для вставки предварительно форматированного текста мы можем использовать следующий фрагмент кода:

текст.

В данном примере мы указываем, что текст должен отображаться исходя из расчета, что строка составляет в длину шестьдесят символов. При этом, в предварительно отформатированном тексте также не действуют правила "сворачивания пробелов". Дело в том, что когда браузер встречает в обычном тексте Web-страницы несколько идущих подряд пробелов, он их сворачивает в один пробел. А предварительно отформатированный текст подобному преобразованию не подвергается, что и позволяет сохранять его форматирование, которое в простейших текстовых редакторах осуществляется при помощи пробельных символов. В HTML, кстати, символ табуляции тоже считается пробельным символом.

Также следует отметить, что HTML предоставляет возможность при помощи тегов отображать верхние кавычки, при помощи которых обычно выделяется прямая речь и некоторые цитаты. Для цитат предусмотрен тег с его завершающим близнецом . А для обрамления прямой речи обычно используются теги и . При этом, тег обладает параметром cite, в качестве значения которого используется сетевой адрес, называемый также URL, того интернет-ресурса, на котором изначально и находился цитируемый текст. А вместе с тегом обычно используется параметр lang, значением которого является кодовое обозначение языка, согласно правил пунктуации которого и ставятся ограничивающие кавычки. Не секрет ведь, что в разных языках принято использовать различные символы кавычек.

Также следует упомянуть и о проблеме переносов. Обычно создатели Web-страниц даже не задумываются об этой проблеме, и браузеры не занимаются переносом слов с разбиением. Если слово не умещается в строке, оно просто переносится в другую строку. Но ведь это не единственный правильный способ отображать текст. Вполне может возникнуть ситуация, когда понадобится отображать текст, пользуясь переносами слов. В HTML предусмотрено два вида переносов - явный и, так называемый, "мягкий". Явный перенос создается при помощи символа короткого тире, заменяемого обычно численными текстовыми подстановками "-" Однако явный перенос неудобен тем, что при изменении размеров окна просмотра браузера может измениться и длина строки, а знак переноса все равно останется виден. Даже если он будет находиться в середине строки. Поэтому чаще все-таки пользуются "мягкими" переносами. Они создаются при помощи текстовой подстановки "-". При этом символы мягких переносов в тексте не видны, и лишь в том случае, когда какое-либо слово, в которое были вставлены эти символы, не умещается целиком в строке, оно переносится с разбивкой на слоги, согласно вставленным "мягким" переносам. И лишь один из символов мягкого переноса в этом слове становится виден.

Также HTML при помощи своих тегов позволяет отображать верхние и нижние индексы. Для создания верхнего индекса используется пара тегов и , а нижний индекс должен быть обрамлен тегами и . Рассмотрим пример применения этих тегов.

Листинг 1.9

Bepxние и нижние индексы

Вода это H20

Как именно отображает индексы браузер показано на рис. 1.9.

Рис. 1.9. Окно браузера с результатом отображения файла, приведенного в листинге 1.9

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

Параметр align позволяет указывать горизонтальное выравнивание линии. Параметр может обладать одним из трех предустановленных значений: left, right и center, которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно. По умолчанию используется значение center. Если в состав тега входит параметр noshade, то отображаемая горизонтальная линия не будет иметь тени. А последний параметр width позволяет устанавливать длину горизонтальной линии. По умолчанию используется значение "100%". А высота линии в пикселах задается при помощи параметра size. Рассмотрим применение всех этих параметров на примере.

Листинг 1.10

Это обычная линия, отображаемая по умолчанию

Как выглядит подобный HTML-документ при просмотре его с помощью браузера, показано на рис. 1.10.

И на этом, пожалуй, можно закончить рассмотрение возможностей оформления текста, присущих HTML.

Рис. 1.10. Окно браузера с результатом отображения файла, приведенного в листинге 1.10

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

• пустые элементы — , ,
  , , , , , ,
  Используется для хранения дополнительной информации о странице. Эту информацию используют браузеры для обработки страницы, а поисковые системы — для ее индексации. В блоке может быть несколько тегов , так как в зависимости от используемых атрибутов они несут разную информацию. Индикатор измерения в заданном диапазоне. Раздел документа, содержащий навигационные ссылки по сайту. Определяет секцию, не поддерживающую сценарий (скрипт). Контейнер для встраивания мультимедиа (например, аудио, видео, Java-апплеты, ActiveX, PDF и Flash). Также можно вставить другую веб-страницу в текущий HTML-документ. Для передачи параметров встраиваемого плагина используется тег . Упорядоченный нумерованный список. Нумерация может быть числовая или алфавитная. Контейнер с заголовком для группы элементов . Определяет вариант/опцию для выбора в раскрывающемся списке , или . Поле для вывода результата вычисления, рассчитанного с помощью скрипта.

  Параграфы в тексте. Определяет параметры для плагинов, встраиваемых с помощью элемента . Элемент-контейнер, содержащий один элемент и ноль или несколько элементов . Сам по себе ничего не отображает. Дает возможность браузеру выбирать наиболее подходящее изображение. Выводит текст без форматирования, с сохранением пробелов и переносов текста. Может быть использован для отображения компьютерного кода, сообщения электронной почты и т.д. Индикатор выполнения задачи любого рода. Определяет краткую цитату. Контейнер для Восточно-Азиатских символов и их расшифровки. Определяет вложенный в него текст как базовый компонент аннотации. Добавляет краткую характеристику сверху или снизу от символов, заключенных в элементе , выводится уменьшенным шрифтом. Отмечает вложенный в него текст как дополнительную аннотацию. Выводит альтернативный текст в случае если браузер не поддерживает элемент . Отображает текст, не являющийся актуальным, перечеркнутым. Используется для вывода текста, представляющего результат выполнения программного кода или скрипта, а также системные сообщения. Отображается моноширинным шрифтом. Используется для определения сценария на стороне клиента (обычно JavaScript). Содержит либо текст скрипта, либо указывает на внешний файл сценария с помощью атрибута src . Определяет логическую область (раздел) страницы, обычно с заголовком. Элемент управления, позволяющий выбирать значения из предложенного множества. Варианты значений помещаются в . Отображает текст шрифтом меньшего размера. Указывает местоположение и тип альтернативных медиаресурсов для элементов , , . Контейнер для строчных элементов. Можно использовать для форматирования отрывков текста, например, выделения цветом отдельных слов. Расставляет акценты в тексте, выделяя полужирным. Подключает встраиваемые таблицы стилей. Задает подстрочное написание символов, например, индекса элемента в химических формулах. Создаёт видимый заголовок для тега . Отображается с закрашенным треугольником, кликнув по которому можно просмотреть подробности заголовка. Задает надстрочное написание символов.

  Таблица-шпаргалка с тегами

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

  Оглавление:

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

  Выделение фрагментов текста. Теги strong и em.

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

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

  HTML (от англ. HyperText Markup Language - «язык разметки гипертекста»; произносится эйч-ти-эм-эл) - стандартный язык разметки документов во Всемирной паутине .

  И выглядит это так:

  Применим теги и на нашей страничке из предыдущих статей:

  Сайт об автомобилях.
  

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

  
  

  Научным языком автомобиль это:

  
  

  Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами .

  
  
  Классификация автомобилей
  

  Автомобили бывают следующих типов:

  
  
  
  
  • Легковой;
  
  
  • Грузовой;
  
  
  • Внедорожник;
  
  
  • Багги;
  
  
  • Пикап;
  
  
  • Спортивный;
  
  
  • Гоночный.
  
  

  Результат:

  

  Кроме элементов , , и в HTML имеется множество тегов для оформления текста html документа. Привожу краткий список таких тегов:

  • — Аббревиатура . по умолчанию в браузере отображается подчеркнутым;
  • — Акроним . В отличие от аббревиатуры обозначает устоявшееся сокращение. Отображается подчеркнутым;
  • — небольшая цитата , отображается курсивом;
  • — фрагмент исходного кода программы , отображается моноширинным шрифтом;
  • — отмечает текст, удаленный из Web-страницы, отображается зачеркнутым;
  • — обозначает новый термин в документе, отображается курсивом;
  • — используется для выделения текста, который был добавлен в новую версию документа, отображается подчеркнутым;
  • — применяется для выделения данных вводимых с клавиатуры , либо для названия клавиш , выводится моноширинным шрифтом;
  • — используется для выделения цитат , содержимое автоматически помещается в кавычки;
  • — обозначает данные, выводимые какой-либо программой, отображается моноширинным шрифтом;
  • — фактически тоже самое что и , только является тегом физической разметки, а — логической. отображается моноширинным шрифтом;
  • — выделение имени переменной в исходном коде программы, отображается курсивом.

  И вот так они отображаются в браузере:

  

  Разрыв строк

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

  Выделяющий абзац.

  Давайте поместим на нашу web-страницу сведения об авторских правах:

  Все права защищены. 2013 год.

  
  

  Сайт об автомобилях.

  Результат:

  

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

  Не устанавливает отступ перед строкой. Применим тег
  на нашей страничке:

  Все права защищены. 2013 год.
  Сайт об автомобилях.

  Так гораздо лучше:
  
  

  Поэтому в некоторых случаях при оформлении текста html страницы не забывайте про тег
  .

  Вставка специальных символов. Литералы.

  Иногда на web-страницу требуется вставить какой-нибудь специальный символ, например такие символы: , ©. Для вставки специальных символов в HTML используются литералы. — это последовательность символов, которая начинается с символа & и заканчивается символом ; , а между ними помещается последовательность букв — код символа . Так для вставки символов , © используются соответственно следующие литералы: Все Программы->Стандартные->Служебные->Таблица символов» или нажать WIN+R и набрать в окне выполнить charmap. Появится окно «Таблица символов».

  

  Если в списке символов выделить символ, который нельзя ввести с клавиатуры, в строке статуса с левой стороны появится надпись вида «Клавиша: Alt+ ». Берете это код символа и вставляете в литерал. Для примера вставим символ © в нашу страницу с помощью кода символа. Выделяем этот символ в «Таблице символов» и в статусной строке с левой стороны видим надпись «Клавиша: Alt+0169». Берем код «0169» и в нашей web-странице вместо литерала вставляем © :

  Все права защищены. © 2013 год.
  Сайт об автомобилях.

  И убеждаемся, что на странице отображается все правильно.

  На сегодня у меня все. Как всегда подведу итоги:

  для разрыва строк без отступов применяем тег
  ;

  и для вставки специальных символов используем литералы вида: &; или & .

  В следующей статье я расскажу как вставлять картинки на страницу, поэтому советую

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

  Сразу отмечу, что все элементы для форматирования текста рассмотренные в данной статье (кроме br) являются парными. Тоесть для обрамления содержимого тегом должен присутствовать как открывающий тег, так и закрывающий Ваш_тег>. Пример:

  < h3> Правильно написанный заголовок текста < p> Абзац с переносом строки посреди абзаца.< br> Пример использования непарного тега внутри парного.

  Формирование структуры текста (блочные элементы). Теги заголовков и абзацев.

  Теги h1-h6 отвечают за выделение текста в виде заголовков . Более подробно о их семантичеком влиянии и важности для построения логической структуры страницы для поисковиков написано

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

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

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

  HTML теги для разметки текста (строчные элементы)
  • span - схож по своему смыслу с тегом p, но является строчным элементом. Обычно используется для обозначения части текста внутри абзаца. Зачем это нужно? Все достаточно просто- обозначенному тексту в дальнейшем через CSS можно задать оформление отличающееся от оформления остального текста.
  • br -делает перенос строки. ТЕГ НЕ ПАРНЫЙ (тобишь закрывающего тега у него нет). Примерно то же самое, что если бы Вы нажали Enter в Верде. В отличие от переноса, создаваемого блочными элементами, не несет на себе никакой логической нагрузки. Используется исключительно для более красивого оформления текста. Рекомендуется избегать его использования без крайней необходимости, поскольку по-сути он просто засоряет код, а для переносов в тексте нужно его просто разбивать на абзацы.
  • strong - выделяет шрифт жирным. Служит для расстановки логических ударений в тексте для поисковых роботов. Широко используется для внутренней оптимизации текста. Ключевые фразы в тексте рекомендуется обрамлять в этот тег, чтобы робот лучше понимал о чем статья. ВНИМАНИЕ! Важно не переборщить – если схожие ключи в тексте попадаются больше 3-5 раз, то это может быть расценено как переоптимизация текста и страница с текстом будет занижена в поисковой выдаче.
  • b - визуально ничем не отличается от стронга, но не несет в себе никакой смысловой нагрузки для поисковика. Используется для выделения частей текста исключительно для тех, кто будет его читать. К примеру, если необходимо выделить фразу не содержащую ключевых слов, но способную облегчить понимание структуры текста пользователю.
  • em - делает текст внутри тега курсивом. Также как и стронг используется для внутренней оптимизации текста под поисковое продвижение, только обладает меньшим весом в сравнении с ним.
  • i - визуально ничем не отличается от . Не несет смысловой нагрузки для роботов, используется для увеличения удобства прочтения текста пользователями. Аналог тега , только для курсива.
  • ins - используется для подчеркивания текста. Выделяет текст как для пользователя, так и для поисковика.
  • u - визуально тождественен предыдущему тегу. Выделяет текст только для пользователя.
  • tt - выводит текст моноширинным шрифтом. Не несет в себе смысловой нагрузки. Моноширинный означает, что для всех символов шрифта ипользуется одинаковое пространство при написании.
  • pre - блочный элемент. Используется для того, чтобы сделать моноширинными большие участки текста. Внутри него можно применять любые теги для форматирования текста, кроме sub и sup.
  • sub - выводит текст как нижний индекс (уменьшает шрифт текста и выводит его немного ниже уровня строки).
  • sup - выводит текст как верхний индекс (уменьшает шрифт текста и выводит его немного выше уровня строки).
  • strike (s) – делает текст перечеркнутым. Эти два тега абсолютно аналогичны по своему содержанию. Современная документация html вообще осуждает их использование, говоря о том, что для перечеркнутого текста можно использовать css, а эти теги больше просто засоряют код.

  Использование нескольких тегов одновременно

  Мы ознакомились с основными тегами для оформления текста. Их можно применять не только по-отдельности а и один внутри другого, главное при этом помнить основной принцип вложенности тегов – тег, который был открыт первым должен быть закрыт последним. Тобишь:

  Теги находящиеся внутри других тегов формируют порядок вложенности. Так, в рассмотренном примере тег i имеет второй уровень вложенности относительно тега p.

  ОБРАТИТЕ ВНИМАНИЕ! Использовать строчные элементы внутри блочних разрешено, в то время как блочные внутри строчных- нет. Хоть браузер и отразит все корректно, если Вы, к примеру, используете тег p внутри тега b. Это будет не верно с точки зрения документации html. Тобишь такой код будет содержать ошибку и Вы это можете спокойно проверить воспользовавшись любым сервисом валидации html кода.

  Вопросы для самоконтроля:
  • Какие теги форматирования текста являются блочными, а какие строчными? В чем между ними разница?
  • Какие существуют способы выделения текста жирным шрифтом? В чем между ними разница?
  • Какие существуют способы выделения текста курсивом? В чем между ними разница?
  • Как правильно переносить строки в html?
  • Как формируется порядок вложенности тегов?

  Чтобы задать ему определённый стиль, надо поместить текст в соответствующий контейнер.

  Все теги форматирования можно разделить на три группы:

  1. Теги заголовков (h1-h6 ).

  2. Теги оформления основного текста ( , , , , и т. д.).

  3. Теги группировки (

  , ,
  )

  Теги заголовков

  Превращают обычный текст в заголовок определённого уровня. Тег создаёт заголовок первого уровня - самый большой и главный (обычно название статьи на странице), отвечает за заголовок шестого уровня - самый маленький и незаметный. Эти теги важны как для пользователей, так и для поисковиков - заголовки с подзаголовками любят и те, и другие. Иерархию уровней необходимо соблюдать, то есть за должен идти , и никак не наоборот.

  Чтобы понять, как это работает, впишите в html-файл следующий код:

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

  Выглядеть в браузере это будет вот так:

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

  Позволяют форматировать на уровне символов. Рассмотрим, что с помощью них можно делать.

  Жирный шрифт

  Нужен, чтобы акцентировать внимание на тексте. Для поисковиков тоже важен, им можно выделять ключевые слова.

  Отвечают за жирное начертание теги и .

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

  Могут использоваться в формулах, уравнениях, обозначении некоторых величин.

  За создание нижних индексов отвечает тег , для верхних используется тег .

  X1=32 м2

  Уменьшение размера

  Если нужно сделать текст на единицу меньше установленного по всей странице, то нужно использовать тег

  Обычный текст. Уменьшенный текст.

  Подчёркивание

  Этот тип выделения можно использовать для обозначения внесённых в документ изменений или просто чтобы акцентировать на тексте внимание.

  Обычный текст. Подчёркнутый текст.

  Зачёркивание

  Зачеркнуть информацию можно, если она уже потеряла свою актуальность. Предназначен для этого тег .

  Курсив

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

  Ввод компьютерного текста

  Бывает, что на веб-страницу нужно добавить исходный код программы и результаты её работы. Чтобы визуально разные части текста было легко друг от друга отличить, разработчики HTML и внедрили теги этой группы.

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

  таким образом a, b, c, вот результат выполнения программы , а это – введённый пользователем текст отображается примерно так.

  Цитаты и определения

  Программный код будет выглядеть таким образом , переменные обозначаются так: a, b, c , вот результат выполнения программы , а это – введённый пользователем текст . Сохранение исходного форматирования отображается примерно так .

  Цитата в теге blockquote.Цитата внутри контейнера cite.Короткая цитата с тегом q.Выделенное определение.Аббревиатура (НПО, ИП).

  Общий пример

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

  Жирный текст можно сделать тегами strong и b. За курсив отвечают em и i.

  Теги sub и sup используются для создания нижних (x1…xn) и верхних (42=16) индексов. Del зачёркивает, ins - подчёркивает.

  Теги code, kbd, var и samp используются редко и нужны для отображения листинга программ

  abbr нужен для обозначения аббревиатур (HTML). Теги blockquote, cite и q используются для оформления цитат (Уж небо осенью дышало)

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

  Браузер интерпретирует этот код так:

  

  Теги группировки

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

  • Внутри тегов заключается абзац.

  Первый абзац

  Второй абзац

  

  • Тег
    осуществляет переход на следующую строку внутри абзаца (отступа перед строкой не будет).
  • позволяет нарисовать горизонтальную линию. Использовать его можно для более наглядного разделения текста. Атрибуты width , size , color , align и noshade задают ширину, толщину, цвет, выравнивание и отсутствие 3D-эффекта линии соответственно.

  Строка над линией. Строка под линией.

  
  
  

  СХОЖИЕ СТАТЬИ
  
  • Обратная связь
  • Карта сайта
  • О сайте

  Тег для создания таблицы.
  	Определяет тело таблицы.
  		Создает ячейку таблицы.
  	Используется для объявления фрагментов HTML-кода, которые могут быть клонированы и вставлены в документ скриптом. Содержимое тега не является его дочерним элементом.
  	Создает большие поля для ввода текста.
  	Определяет нижний колонтитул таблицы.
  	Создает заголовок ячейки таблицы.
  	Определяет заголовок таблицы.
  	Определяет дату/время.
  	Заголовок HTML-документа, отображаемый в верхней части строки заголовка браузера. Также может отображаться в результатах поиска, поэтому это следует принимать во внимание предоставление названия.
  Создает строку таблицы.
  	Добавляет субтитры для элементов и .
  	Выделяет отрывок текста подчёркиванием, без дополнительного акцента.
  	Создает маркированный список.
  	Выделяет переменные из программ, отображая их курсивом.
  	Добавляет на страницу видео-файлы. Поддерживает 3 видео формата: MP4, WebM, Ogg.
  	Указывает браузеру возможное место разрыва длинной строки.