Жирный текст тег html: Теги strong и b, важность и выделение — Разметка текста — HTML Academy

Разное 

Содержание

HTML-теги для текста: выравнивание, размер, шрифт

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

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

HTML-теги и атрибуты: основы синтаксиса

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

По сути, HTML-теги для текста — это команды, которые добавляют на страницу определённые блоки или меняют их внешний вид. Правильный формат записи выглядит так:

Обратите внимание, что не все теги являются парными. Например, <BR> (пропуск строки) или <HR> (добавление горизонтальной линии) не нужно закрывать вообще.

Почему нельзя копировать статьи из Word и других программ в редактор сайта

Хотя современные офисные программы используют те же HTML-теги для текста, в 99% случаев родной код непригоден для веб-страниц. Даже если в самом приложении документ отображается нормально, при вставке на сайт форматирование может сбиться. Кроме того, из-за большого количества лишних тегов и атрибутов поисковики не могут адекватно проанализировать содержимое страницы. Что, в свою очередь, затрудняет продвижение вашего ресурса.

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

  1. “Прогнать” статью через «Блокнот» и только после этого вставить на сайт. Приложение стирает весь HTML, так что после этого придётся форматировать текст заново (с помощью инструментов редактора или вручную).
  2. Писать и публиковать статьи через LiveWriter. Популярный редактор блогов сразу генерирует правильный код. А в отдельной вкладке можно посмотреть, как будет выглядеть текст на сайте.
  3. Использовать HTML Cleaner. Этот онлайн-сервис уничтожает не весь код целиком, а только лишние фрагменты. С помощью фильтров вы выбираете, какие теги нужно сохранить. Здесь же есть мощный визуальный редактор для форматирования, который добавляет в код уже оптимизированные команды.

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

Абзацы

Данный элемент присутствует практически во всех статьях. Каждый абзац должен располагаться внутри такого контейнера — это упрощает форматирование и позволяет сохранить единый стиль на всех страницах сайта. Для удобства тег <p> всегда пишут с новой строки.

Выравнивание

Отдельный HTML-тег «Выравнивание текста» уже давно не используется. Вместо этого был создан универсальный атрибут ALIGN. Чтобы изменить положение текстового блока на странице, необходимо выбрать одно из 3-х значений — CENTER, RIGHT или LEFT. Точно так же можно задать выравнивание для других элементов — например, заголовков.

В некоторых ситуациях для выравнивания используют другие теги HTML. Текст по центру, например, можно расположить с помощью элемента <CENTER>…</CENTER>. Чем удобен отдельный тег? В отличие от атрибута, он работает с любым контентом, включая фото, видео, flash и т. д.

Заголовки и подзаголовки

Система подзаголовков позволяет создать логичную структуру контента. Когда текст разбит на смысловые блоки, читателю гораздо проще сконцентрироваться и усвоить новую информацию. Поисковики также анализируют заголовки, чтобы понять, по каким запросам продвигать страницу. Именно поэтому специалисты по SEO рекомендуют использовать в них тематические ключи.

В HTML используются шесть уровней подзаголовков — от <h2> до <H6>. В этой системе существует чёткая иерархия:

  • <h2>…</h2>. Основной заголовок (название статьи, товара в интернет-магазине и т. д.). В тексте может быть только один <h2>. Как правило, он содержит главный ключевик.
  • <h3>…</h3>. Подзаголовки второго уровня разбивают текст на смысловые блоки. Например, если вы составляете рейтинг ноутбуков, можно сделать несколько <h3> с названиями разных моделей.
  • <h4>…</h4>. Третий уровень нужен в случае, если текст между двумя <h3> также разбивается на небольшие блоки. В нашем примере это могут быть критерии оценки — «Производительность», «Память», «Видеокарта» и т. д. для каждой модели.
  • <h5>, <H5>, <H6>. На практике встречаются крайне редко. Но общий принцип тот же — они должны быть “вложены” в блок с подзаголовком высшего уровня.

Следите за сохранением правильной иерархии. Возвращаясь к нашему примеру, это означает, что нельзя сразу вписывать названия моделей как <h4> или <H5>. А тем более использовать для однородных по смыслу блоков подзаголовки разных уровней (допустим, выделить ноутбук, занявший последнее место в рейтинге, с помощью <H6>).

А вот схема, которая поможет моментально понять и запомнить правильную структуру заголовков в HTML.

Списки

Любые перечисления и инструкции лучше оформлять в виде списков, используя специальные HTML-теги для текста (типичная ошибка — просто несколько абзацев <p>,которые начинаются с дефиса или цифры).

Структура таких блоков очень проста. Вначале определяем тип списка — маркированный <UL>…</UL> или нумерованный <OL>…</OL>.

Все элементы находятся между открывающим и закрывающим тегами. Каждый пункт списка начинается с новой строки и имеет формат <LI>…</LI>. Количество элементов не ограничено.

Что можно изменить, используя этот HTML-тег? Размер текста, его шрифт и цвет — причём без добавления новых классов в CSS. Это очень удобно, когда нужно выделить только одно предложение или фрагмент.

<FONT> имеет несколько атрибутов:

  • Face. Позволяет менять шрифт текста. Можно перечислить несколько вариантов через запятую (Tahoma, Verdana). Если у пользователя не установлен первый шрифт, система просто использует альтернативу.
  • Size. Чтобы увеличить или уменьшить текст, укажите в кавычках значение от 1 до 7.
  • Color. В зависимости от дизайна можно выбрать один из стандартных оттенков (red, green, blue) или ввести код любого цвета на выбор.

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

Способы выделения текста

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

<B>…</B>. Чрезвычайно популярный HTML-тег. Жирный текст сразу бросается в глаза, а потому с его помощью удобно выделять важные тезисы и факты.

Многие путают теги <B> и <STRONG>. Визуально разницы нет, но работают они по-разному. Первый просто меняет внешний вид текста, а второй выполняет функцию «указателя» и выделяет самые важные фрагменты (тематические ключевые слова и фразы для SEO).

<I>…</I>. Изящный и строгий курсив идеально подходит для оформления научных терминов, иностранных слов и разнообразных цитат. В серьёзных изданиях наклонным текстом также выделяют названия произведений искусства.

<U>…</U>. Пожалуй, столько споров не вызывал ни один HTML-тег. Подчёркивание текста используется редко, так как данный способ выделения исторически закрепился за гиперссылками. Если же вы используете <U> в статьях, учтите, что это подходит только для коротких фрагментов — не более 1 строки.

<S>…</S>. Интересный тег, который позволяет сделать часть текста зачёркнутой. Очень актуален в рекламе — например, чтобы подчеркнуть контраст между старой и новой ценами.

<BIG>…</BIG>. Самый простой способ увеличить размер шрифта без каких-либо дополнительных параметров.

<SMALL>…</SMALL>. Работает по тому же принципу, что предыдущий тег. Текст, расположенный внутри, уменьшается относительно основного.

<SUP>…</SUP>. Правильное название такого формата — верхний индекс. В основном данный тег предназначен для математических степеней и сносок. Он уменьшает размер шрифта и смещает выделенный текст вверх.

<SUB>…</SUB>. Нижний индекс часто встречается в различных формулах. Выделенный фрагмент располагается ниже основного текста.

Смысловые контейнеры

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

<CODE>… </CODE>. Тег для добавления компьютерных кодов. Незаменим в статьях по программированию с примерами — команды не выполняются, а отображаются, как обычный текст.

<CITE>…</CITE>. Предназначен для оформления цитат — например, ключевых выдержек из интервью.

<BLOCKQUOTE>…</BLOCKQUOTE>. Выносит часть текста в отдельный блок. По умолчанию выделенный фрагмент имеет больший отступ слева, однако в CSS вы также можете изменить размер, стиль начертания и цвет текста.

<ADDRESS>…</ADDRESS>. Дополнительный тег, в котором содержится информация об авторе, в том числе ссылки.

Разделительная линия <HR>

С помощью простой черты можно обозначить логическое окончание большого раздела. <HR> не относится к парным тегам. Это значит, что закрывающий элемент формата </…> не нужен.

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

Научившись грамотно использовать теги для форматирования текста в HTML, вы не только сделаете свои статьи удобными для чтения, но и повысите эффективность SEO.

Проектирование отчетов > HTML теги

Stimulsoft Reports предоставляет уникальную возможность оформления текста при помощи HTML тегов. Для чего это нужно? Предположим необходимо выделить часть выводимого текста шрифтом с жирным начертанием. К примеру:

 

 

Третье слово выделено при помощи другого начертания шрифта

 

 

 

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

 

 

Третье слово <b>выделено</b> при помощи другого начертания шрифта

 

 

Без использования HTML тегов для получения похожего результата пришлось бы использовать Rich текст. Но это создает дополнительные трудности. Кроме этого Rich текст компонент достаточно медленный.

 

HTML теги могут быть включены только в текстовое выражение, т. е. их использование возможно только в свойстве Текст (Text), компонента Текст (Text).

 

 

 

Кроме этого, HTML теги могут быть включены только в итоговую текстовую часть выражения. Например, следующие выражения верны:

 

 

Это простое <i>выражение {1+2}</i>

 

Это простое <i>выражение</i> {1+2}

 

Это простое выражение <i>{1+2}</i>

 

 

 

А эти неверны:

 

 

Это простое <i>выражение {1</i>+2}

 

Это простое <i>выражение {1+2</i>}

 

Это простое выражение {<i>1+2}</i>

 

 

 

Во втором случае HTML теги находятся в теле выражений на языке С# или VB.Net, и фактически последние становятся некорректными. Например, выражение

 

 

1+2</i>

 

 

 

невозможно вычислить.  Любые HTML теги могут быть вложенными. Например:

 

 

Это <b>простое <i>выражение {1+2}</i></b>

 

 

Вложенность тегов не ограничена. Если тег не закрывается, т.е. в тексте есть только открывающий тег, то такой тег действует до конца строки.

 

Стоит учитывать, что по умолчанию HTML теги игнорируются. Чтобы разрешить использование HTML тегов в текстовом выражении нужно использовать свойство Разрешить Html теги (AllowHtmlTags).

 

 

 

Этому свойству нужно присвоить значение истина (true), для того чтобы теги учитывались при выводе. Если в текстовом выражении используются HTML теги, то переводы строки в выражении игнорируются. В этом случае, для перевода строки нужно использовать тег <br>.

 

 

 

Таблица html тегов, которые поддерживаются в Stimulsoft

 

Наименование

Описание

 

Теги шрифта:

<font color=»#rrggbb» face=»FontName» size=»1..n»> </font>

Определяет цвет, шрифт и размер текста. Узнать больше.

<font-face=»FontName»> </font-face>

Определяет шрифт текста. Узнать больше.

<font-name=»FontName»> </font-name>

Определяет шрифт текста. Узнать больше.

<font-family=»FontName»> </font-family>

Определяет шрифт текста. Узнать больше.

<font-size=»1..n»> </font-size>

Определяет размер текста. Узнать больше.

<font-color=»#rrggbb»> </font-color>

Определяет цвет текста. Узнать больше.

 

Теги стиля шрифта:

<b> </b>

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

<i> </i>

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

<u> </u>

Предоставляет возможность подчеркнуть текст. Узнать больше.

<s> </s>

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

<sub> </sub>

Предоставляет возможность отобразить текст в виде нижнего индекса. Текст будет располагаться ниже линии базового текста и его размер будет уменьшен. Узнать больше.

<sup> </sup>

Предоставляет возможность отобразить текст в виде верхнего индекса. Текст будет располагаться выше линии базового текста и его размер будет уменьшен. Узнать больше.

<strong> </strong>

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

<em> </em>

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

<strike> </strike>

Предоставляет возможность отобразить перечеркнутый текст. Аналогичен тегу <s>. Узнать больше.

 

Теги интервалов:

<letter-spacing=»0″> </letter-spacing>

Определяет интервал между символами в пределах элемента, в единицах высоты шрифта. Узнать больше.

<word-spacing=»0″> </word-spacing>

Устанавливает интервал между словами, в единицах высоты шрифта. Узнать больше.

<line-height=»1″> </line-height>

Устанавливает межстрочный интервал текста. Узнать больше.

<text-align=»left»> </text-align>

Предоставляет возможность изменить горизонтальное выравнивание текста: по левому краю (left), по правому краю (right), по центру (center) и по ширине (justify). Узнать больше.

 

Теги абзаца:

<br> , <br />

Установливает перевод строки. В отличие от тега <p>, не добавляет пустой отступ перед строкой. Узнать больше.

<p> </p>

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

 

Теги списков:

<ul> </ul>

Устанавливает маркированный список. Каждый элемент списка должен начинаться с тега <li>. Узнать больше.

<ol> </ol>

Устанавливает нумерованный список. Каждый элемент списка должен начинаться с тега <li>. Узнать больше.

<li> </li>

Определяет отдельный элемент маркированного или нумерованного списка.

 

Тег URL адреса:

<a href=»…»>…</a>

Устанавливает URL адрес для перехода, при нажатии на текст, который заключен между открывающим и закрывающим тегами.

 

Теги оформления:

<color=»#rrggbb»> </color>

Предоставляет возможность определить цвет текста.

<background-color=»#rrggbb»> </background-color>

Предоставляет возможность определить цвет фона текста.

 

Атрибуты style:

color

Определяет цвет текста в элементе.

background-color

Определяет цвет фона элемента.

text-decoration: underline, line-through, none

Предоставляет возможность:

underline — подчеркнуть текст;

line-through — перечеркнуть текст;

none — Отменить все эффекты, в том числе и для ссылок.

font-weight: bold, normal

Определяет толщину шрифта — жирный (bold) или нормальный (normal).

font-style: normal, italic

Определяет стиль шрифта — нормальный (normal) или наклонный (italic).

font-size

Определяет размер шрифта.

font-face, font-family, font-name

Предоставляет возможность определить шрифт.

vertical-align: baseline, sub, super

Определяет вертикальное выравнивание:

baseline — аналогично тегам </sub> или </super>.

sub — элемент отображается как нижний индекс. Размер шрифта при этом не будет изменен. Аналогично тегу <sub>.

super — элемент отображается как верхний индекс. Размер шрифта при этом не будет изменен. Аналогично тегу <sup>.

letter-spacing: normal, x.x

Определяет интервал между символами в пределах элемента:

normal — значение по умолчанию;

x.x — пользовательское значение в единицах высоты шрифта.

word-spacing: normal, x. x

Определяет интервал между словами в пределах элемента:

normal — значение по умолчанию;

x.x — пользовательское значение в единицах высоты шрифта.

line-height: normal, x.x

Определяет межстрочный интервал:

normal — значение по умолчанию;

x.x — пользовательское значение в единицах высоты шрифта.

text-align: left, center, right, justify

Определяет горизонтальное выравнивание:

left — выровнять элемент по левому краю;

center — выровнять элемент по центру;

right — выровнять элемент по правому краю;

justify — выровнять элемент по ширине.

margin-top, margin-bottom

Устанавливает величину отступа от верхнего и нижнего края элемента. Актуально только для тега <p>.

margin

Устанавливает величину отступа от верхнего и нижнего края элемента. Актуально только для тега <p>.

 

Форматы значений цвета:

#rrggbb

Определяет цвет в RGB-формате в виде HEX-кода.

#rgb

Определяет цвет в RGB-формате в виде HEX-кода в краткой форме.

rgb(r,g,b)

Определяет цвет в формате RGB с помощью десятичных значений .

 

Спецсимволы (всего более 200), ниже представлен список самые часто употребляемых:

&amp;

Предоставляет возможность отобразить амперсанд — &. Узнать больше.

&lt;

Предоставляет возможность отобразить знак меньше, чем — <. Узнать больше.

&gt;

Предоставляет возможность отобразить знак больше чем — >. Узнать больше.

&quot;

Предоставляет возможность отобразить двойную кавычку — «. Узнать больше.

&apos;

Предоставляет возможность отобразить двойную кавычку — ‘. Узнать больше.

&nbsp;

Предоставляет возможность отобразить неразрывной пробел. Узнать больше.

&#xxxx;

Шаблон записи символа в ASCII кодировке. Узнать больше.

 

Формат шрифта:

Font name formats: name name1,name2

Предоставляет возможность указать несколько шрифтов.

 

Урок 3. Заголовки и форматирование текста

Заголовки в HTML

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

<html>

   <head>

   <title>html заголовки</title>

   </head>

<body>
   <h2>Заголовок 1</h2>

   <h3>Заголовок 2</h3>

   <h4>Заголовок 3</h4>

   <h5>Заголовок 4</h5>
</body>

</html>

Демонстрация Скачать исходники

Вышеуказанный код отобразит следующее


Внимание! сразу хочу сказать, что заголовки надо использовать аккуратно! Поисковый робот, который создаёт массив информации по вашему сайту в ПЕРВУЮ очередь по Контенту анализирует заголовки. И если, например, в них будет содержаться пустая информация вроде Занимательно, Внимание, А тут вот ещё интересно, то это пойдёт в минус Вашему сайту!

Сразу обращайте на это внимание и делайте заголовки информативными! Например: Введение в социологию, Парадокс Энштейна-Подольского-Розена, Жизнеописание Горация, Юрский период, в которых должен содержаться Смысл всей или промежуточной информации данной страницы.

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

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

Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.

<html>

   <head>

   <title>html параграфы</title>

   </head>

<body>
<p>Текст первого абзаца. Текст первого абзаца. Текст первого абзаца. Текст первого абзаца.</p>

<p>Текст второго абзаца. Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>
</body>

</html>

Демонстрация Скачать исходники

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

left — выравнивание по левой стороне
right — выравнивание по правой стороне
center — по центру
jastify — по ширине

Атрибут align есть и у заголовков (тег h), и у параграфов (тег p).

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

<html>

   <head>

   <title>html выравнивание параграфов</title>

   </head>

<body>
<p align="left">Текст первого абзаца.  Текст первого абзаца. Текст первого абзаца.</p>

<p align="right">Текст второго абзаца. Текст второго абзаца. Текст второго абзаца.</p>

<p align="center">Текст третьего абзаца. Текст третьего абзаца. Текст третьего абзаца.</p>

</body>

</html>

Демонстрация Скачать исходники

В браузере отобразится следующее

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

<html>

   <head>

   <title>центрирование в html</title>

   </head>

<body>
<center>Текст по центру</center>
</body>

</html>

Как выделить текст полужирным в html?

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

Рассмотрим пример кода выделения текста жирным

<html>

   <head>

   <title>html выделение жирным</title>

   </head>

<body>
<p>Если Вы хотите выделить какую-то фразу, чтобы она просто была видна пользователю, 

например, напоминание, то <strong>делаем так</strong>. Или так в случае <b>ключевого слова</b></p>
</body>

</html>

Демонстрация Скачать исходники

В браузере отобразится следующее

И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова

Как выделить текст курсивом в html?

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

Результат выделения данных тегов будет одинаковым — это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение — дня цитат cite, для терминов dfn и тд.

Рассмотрим пример кода c выделением текста курсивом

<html>

   <head>

   <title>Допустим страница о машинах</title>

   </head>

<body>
<i>Mercedes-Benz</i> - это немецкий автоконцерн, который был основан в 1886 году.  

Название произошло от двух марок - <dfn>Мерседес</dfn> и <dfn>Бенц</dfn>. 

Он занимается в основном выпуском <dfn>легковых автомобилей премиум-класса</dfn>, <dfn>грузовых автомобилей</dfn>, <dfn>автобусов</dfn>.

<p><cite>http://ru.wikipedia.org/wiki/Mercedes-Benz</cite></p>
</body>

</html>

Демонстрация Скачать исходники

В браузере отобразится так

Как выделить текст подчёркиванием в html?

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

Данные и в первом, и во втором случае будут выделен подчёркиванием.

Как сделать перечёркнутый текст в html?

Перечёркнутым выделяется текст в следующих тегах
del — внесённое исправление.
strike — стандартное перечёркивание.
s — сокращённая запись strike

<html>

   <head>

   <title>Перечёркнутый текст в html</title>

   </head>

<body>
Дважды два равно <del>пяти</del> четырём. Обычный <s>перечёркнутый текст</s>
</body>

</html>

Демонстрация Скачать исходники

Как выделить текст в верхнем и нижнем индексах в html?

sub — тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup — тег, отображающий текст выше уровня строки шрифтом меньшего размера.

<html>

   <head>

   <title>индексы в html</title>

   </head>

<body>
<p>a<sup>2</sup>+b<sup>2</sup> = c<sup>2</sup> - теорема Пифагора. </p>

<p>H<sub>2</sub>O - химическая формула воды.</p>
</body>

</html>

Демонстрация Скачать исходники

В браузере отобразится следующее

Тег font в html

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

CSS

данный способ быстро начал забываться.

Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:

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

size — активные значения от 1 до 7. Шрифт по молчанию равен 3.

color — цвет текста. Если не задать параметр, то текст будет чёрным.

<html>

   <head>

   <title>Тег font в html</title>

   </head>

<body>
<font face="Tahoma" size=5 color="blue">Шрифт Tahoma, размер 5, цвет синий.</font>
</body>

</html>

Демонстрация Скачать исходники

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

Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE

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

Также тег pre приятен её тем, что в нём можно использовать такие теги как: img, object, big, small, sub, sup
<html>

   <head>

   <title>Тег pre в html</title>

   </head>

<body>
<pre>Как захотели ввести текст

              так он и                отобразился!     =)</pre>
</body>

</html>

Демонстрация Скачать исходники

В браузере будет так

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

Тег abbr обозначает аббревиатуру. Аббревиатура — сокращенное слово или словосочетание. Аббревиатуры можно встретить повсюду, например, HTML (Hypertext Markup Language), PHP (Hypertext Preprocessor).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>

   <head>

   <title>Тег abbr в html</title>

   </head>

<body>
<abbr title="Hypertext Markup Language">HTML</abbr> 
</body>

</html>

Демонстрация Скачать исходники

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

Тег acronym в отличие от аббревиатуры обозначает устоявшиеся слово (акроним), которое употребляется как самостоятельное. Например: СССР (Союз Советских Социалистических Республик), СПИД (Синдром приобретённого иммунного дефицита), США (Соединённые Штаты Америки).
Слово выделенное в данные теги выделяется пунктиром и при наведении выводит содержимое атрибута title

<html>

   <head>

   <title>Тег acronym в html</title>

   </head>

<body>
<acronym title="Hypertext Markup Language">HTML</acronym> 
</body>

</html>

Горизонтальная черта в html или тег hr

Для обозначения горизонтальной линии в html используется тег hr. Сверу и снизу он выделяется отступами.

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

<html>

   <head>

   <title>Тег font в html</title>

   </head>

<body>
Обычная линия

<hr>
Линия по центру длиной 50% от ширины блока, толщина линии 2

<hr align="center" size=2 width=50%>
Линия справа, синяя, 200 пикселей<hr align="right" color="blue" width="200">
</body>

</html>

Демонстрация Скачать исходники

В браузере

Спасибо за внимание! Урок был долгий и сложный! Вы сделали большой шаг вперёд!

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

«Предыдущий

Следующая глава»

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

Этот текст IS BOLD

Этот текст ITALIC

Это SUPERSCRICT
9003

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

HTML также определяет специальные элементы для определения текст со спец. означает .

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

Элементы форматирования были разработаны для отображения специальных типов текста :

  • Жирный текст
  • Важный текст
  • Курсив
  • Выделенный текст
  • Выделенный текст
  • Мелкий текст
  • Удален текст
  • Вставленный текст
  • подписок
  • Надстрочные индексы

HTML

Полужирный и Строгий Форматирование

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

Пример

Это обычный текст.

Этот текст выделен жирным шрифтом.

Попробуйте сами »

Элемент HTML определяет strong текст с добавленной семантической «сильной» важностью.

Пример

Это обычный текст.

Этот текст strong.

Попробуйте сами »

HTML

Курсив и Подчеркнутый Форматирование

Пример

Это обычный текст.

Этот текст курсив.

Попробуйте сами »

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

Пример

Это обычный текст.

Этот текст подчеркнуто.

Попробуйте сами »

Браузеры отображают как , а как .

Однако есть разница в значении этих тегов: и определяют полужирный и курсивный текст,
, но и означают, что текст «важный».

HTML

Маленький Форматирование

Элемент HTML определяет маленький текст:

Пример

HTML

Small Formatting

Попробуйте сами »

HTML

Marked Formatting

Элемент HTML определяет , отмеченный или выделенный текст:

Пример

HTML

Отмечено Форматирование

Попробуйте сами »

HTML

Удалено Форматирование

Элемент HTML определяет удалено (удалено) текст.

Пример

Мой любимый цвет — синий красный.


Попробуйте сами »

HTML Inserted Formatting

HTML Элемент определяет вставленный (добавленный ) текст.

Пример

Мой любимый color — красный.


Попробуйте сами »

HTML

Подстрочный индекс Форматирование

Элемент HTML определяет текст с подстрочным индексом .

Пример

Это подстрочный текст.


Попробуйте сами »

HTML

Верхний индекс Форматирование

Элемент HTML определяет текст с надстрочным индексом .

Пример

Это надстрочный текст.


Попробуйте сами »

Проверьте себя с помощью упражнений!

Упражнение 1 » Упражнение 2 » Упражнение 3 » Упражнение 4 » Упражнение 5 »

Элементы форматирования текста HTML

Тег Описание
<б> Определяет полужирный текст
Определяет выделенный текст 
<я> Определяет курсивный текст
<маленький> Определяет меньший текст
<сильный> Определяет важный текст
Определяет подстрочный текст
<вверх> Определяет текст в верхнем индексе
Определяет вставленный текст
<удалить> Определяет удаленный текст
<знак> Определяет отмеченный/выделенный текст

« Предыдущая

Следующая глава »

Введение в HTML для пользователей WordPress

Это серия статей из 3 частей: HTML для пользователей WordPress, часть 1: начинаем с базового HTML (эта страница) HTML для пользователей WordPress, часть 2: изображения и таблицыHTML для пользователей WordPress, часть 3: DIV и CSS

Эта статья предназначена для пользователей WordPress , которые хотят выйти за рамки основ и начать использовать немного HTML, чтобы оживить свои веб-страницы и сообщения в блогах. И все чаще это также полезно для пользователей Campaign Monitor , которые хотят делать больше со своими информационными бюллетенями. Используя WordPress, вы можете использовать визуальный редактор для простых сообщений, без проблем. Вы можете использовать панель инструментов для форматирования текста, добавления ссылок и изображений… много чего еще. Но в правом верхнем углу поля редактора вы можете переключиться на Текст просмотреть и использовать вместо этого стандартные HTML-команды.

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

С WordPress (и информационными бюллетенями Campaign Monitor) небольшое знание HTML имеет большое значение…

Доступ к текстовому представлению

Большинство веб-страниц написаны с использованием HTML. Заголовок над этой строкой создается с помощью команды HTML. жирный шрифт определенные слова означает использование HTML. Визуальный редактор WordPress скрывает от вас HTML-команды. Если вы выделите текст и нажмете кнопку B (чтобы выделить текст жирным шрифтом), вы увидите текст, выделенный жирным шрифтом. Но в фоновом режиме WordPress поместил несколько тегов HTML вокруг слов, которые вы просили выделить жирным шрифтом. Чтобы использовать HTML при использовании визуального редактора WordPress для редактирования страницы или публикации, просто щелкните вкладку «Текст» (рядом с «Визуальный»), и вы увидите HTML-представление страницы. Для информационных бюллетеней по электронной почте Campaign Monitor откройте информационный бюллетень кампании (бюллетень) для редактирования, щелкните значок карандаша, чтобы отредактировать часть своего информационного бюллетеня, а затем щелкните ссылку <>Источник в правом верхнем углу редактора. Для Информационные бюллетени Aweber , откройте сообщение Broadcast или Follow Up для редактирования и в редакторе сообщений HTML нажмите кнопку «Источник» в нижней части редактора.

Введение в HTML

Начнем с примера. Вам нужно отформатировать несколько слов на веб-странице, чтобы они отображались жирным шрифтом. Чтобы отображать слова жирным шрифтом, вам нужно использовать HTML, в частности сильный тег. Вот что вы вводите: Веб-сайт — это отличный способ общения! и вот как это выглядит на вашей веб-странице: Веб-сайт — это отличный способ общения! В HTML используются теги, заключенные в угловые скобки . Сначала вы открываете тег — в приведенном выше примере это . А затем вы закрываете тег, повторяя тот же тег, но с / впереди — из того же примера, что и . Между открывающим и закрывающим тегами может быть любое количество символов.

Где можно использовать HTML

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

  • В постах и ​​на страницах
  • В текстовых виджетах боковой панели

Итак, теперь вы знаете о тегах HTML, давайте рассмотрим несколько полезных примеров.

Теги простого форматирования HTML

Полужирный . Используйте сильный тег, чтобы выделить текст жирным шрифтом Текст полужирный Курсив . Используйте тег em, чтобы выделить текст курсивом: Текст, выделенный курсивом Подчеркнуть . Используйте тег подчеркивания, чтобы, как вы уже догадались, подчеркнуть текст: Подчеркнутый текст Подчеркивание текста страницы для выделения может быть полезным, но в Интернете подчеркивание часто используется для обозначения ссылки. Заголовки . Используйте теги h3, h4 и h5 для включения заголовков. Заголовки обычно имеют правила в таблице стилей вашей темы WordPress, которые определяют, как заголовки отображаются на вашем сайте. Заголовок выше относится к заголовку уровня 3:

Заголовок 1-го уровня

Заголовок 2 уровня

Заголовок 3 уровня

Заголовок 4 уровня
Заголовок 5 уровня
Заголовок 6 уровня
Примечание: чтобы упростить задачу для поисковых систем, обычно рекомендуется иметь только один тег h2 на каждой странице, и обычно он создается вашей темой с использованием заголовка вашей страницы. Поэтому вам, вероятно, следует использовать теги от h3 до h6 в редакторе страниц WordPress. Цитата . Используйте тег blockquote для форматирования цитат и форматирования их отображения в дизайне сайта.
Это была фантастическая книга!
А вот как это выглядит:

Это была фантастическая книга!

Обратите внимание, что в визуальном редакторе кнопка отступа применяет этот тег.

Маркеры и нумерованные списки

Маркированный = ненумерованный список Нумерованный = упорядоченный список Чтобы отформатировать список непосредственно с помощью HTML, вам нужно знать, что каждый тип списка использует либо 9Тег 0025 ul или ol (неупорядоченный список или упорядоченный список) Затем каждая позиция в списке использует тег li . Вот список с двумя маркированными пунктами:

  • Первый предмет
  • Второй предмет

Вот HTML-код для создания этого маркированного списка. <ул>

  • Первый элемент
  • Второй элемент
    • Чтобы изменить маркеры на числа, просто используйте тег ol вместо тега ul:

    1. Первый пункт
    2. Второй предмет

    <ол>

  • Первый элемент
  • Второй элемент

    • Ссылки

    Ссылка состоит из двух частей: адрес, на который делается ссылка, и якорный текст, отображаемый на странице. Таким образом, чтобы написать HTML-ссылку, вам нужно поместить эти биты информации в HTML-тег. Вот HTML-ссылка на веб-сайт ABC: веб-сайт ABC. А так ссылка выглядит на странице: ABC Website Измените href=»http://abc.net.au» на любой веб-адрес (URL), на который вы хотите сослаться. Измените привязку (все, что появляется между > и ), чтобы отобразить все, что вы хотите. Якорь может быть текстом или изображением. В этой статье показан пример создания кликабельного изображения (это просто ссылка с изображением в качестве привязки). Далее: Часть 2: Изображения и таблицы

    О OM4: Услуги | Портфолио

    Другие статьи: Статьи

    HTML: тег

    В этом учебнике HTML объясняется, как использовать элемент HTML, называемый тегом , с синтаксисом и примерами.

    Описание

    Тег HTML просто придает тексту жирный вид, но не придает ему никакого семантического значения. Этот тег также часто называют элементом .

    СОВЕТ: Тег HTML не следует путать с тегом , который выделяет текст.

    Синтаксис

    В HTML синтаксис тега :

     

    Текст, выделенный полужирным шрифтом, идет здесь, а не здесь

    Пример вывода

    Атрибуты

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

    Примечание

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

    Совместимость с браузерами

    Тег имеет базовую поддержку со следующими браузерами:

    • Chrome
    • Андроид
    • Firefox (Геккон)
    • Firefox Mobile (Геккон)
    • Internet Explorer (IE)
    • Пограничный мобильный телефон
    • Опера
    • Опера Мобайл
    • Сафари (веб-кит)
    • Сафари Мобильный

    Пример

    Мы обсудим тег ниже, исследуя примеры использования тега в HTML5, HTML 4. 01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict и XHTML 1.1.

    • HTML5
    • HTML4
    • XHTML

    Документ HTML5

    Если вы создали новую веб-страницу в HTML5, ваш тег может выглядеть следующим образом:

     

<голова>
<мета-кодировка="UTF-8">
Пример HTML5 от www.techonthenet.com

<тело>
 
    Заголовок 1
     

    Мы хотим выделить этот текст жирным шрифтом.

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

    HTML 4.01 Transitional Document

    Если вы создали новую веб-страницу в HTML 4.01 Transitional, ваш тег может выглядеть следующим образом:

     

<голова>

Переходный пример HTML 4.<img class="lazy lazy-hidden" loading='lazy' src="//art-nto.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/5/8/0/580fc8109703b42ca2fb1f9474a76c7b.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/5/8/0/580fc8109703b42ca2fb1f9474a76c7b.jpeg' /></noscript> 01 от www.techonthenet.com

<тело>
 
    Заголовок 1
     

    Мы хотим выделить этот текст жирным шрифтом.

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

    Документ XHTML 1.0 Transitional

    Если вы создали новую веб-страницу в XHTML 1.0 Transitional, ваш тег может выглядеть следующим образом:

     

<голова>

Переходный пример XHMTL 1.0 от www.techonthenet.com

<тело>
 
    Заголовок 1
     

    Мы хотим выделить этот текст жирным шрифтом.

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

    XHTML 1.0 Strict Document

    Если вы создали новую веб-страницу в XHTML 1.0 Strict, ваш тег может выглядеть следующим образом:

     

<голова>

Строгий пример XHTML 1.0 от www.techonthenet.com

<тело>
 
    Заголовок 1
     

    Мы хотим выделить этот текст жирным шрифтом.

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

    Документ XHTML 1.1

    Если вы создали новую веб-страницу в XHTML 1.1, ваш тег может выглядеть следующим образом:

     
    No related posts.
    Автор записи

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *