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

Содержание

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

Этот текст будет жирным

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

Этот текст _{подстрочный} и ^{надстрочный}

Редактор кода »

HTML элементы форматирования

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

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

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

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

 — Жирный текст
 — Важный текст
 — текст Курсив (наклонный)
 — текст Акцентирует внимание (наклонный)
 — Маркерованный текст
 — Небольшой текст
<del> — Удаленный (зачеркнутый) текст
<ins> — Вставленный (добавить) текст
 — Подстрочный текст
 — Надстрочный текст

HTML элементы `` и ``

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

HTML элемент , определяет строгий текст, с добавлением семантического значения «важности».

HTML элементы `` и ``

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

HTML элемент , определяет текст акцентирует внимание (наклонный), с добавлением смысловое значение «важности».

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

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

HTML элемент ``

Элемент , определяет текст небольшим:

HTML элемент ``

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

HTML элемент `<del>`

Элемент <del>, определяет текст ~~удаленным~~ (удалить).

HTML элемент `<ins>`

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

HTML элемент ``

Элемент , определяет _{подстрочный} текст.

HTML элемент ``

Элемент , определяет ^{надстрочный} текст.

HTML Упражнения

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

Тег	Описание
<b>	Определяет жирный текст
<em>	Определяет подчеркнутый текст
<i>	Определяет курсивный текст
<small>	Определяет небольшой текст
<strong>	Определяет важный текст
<sub>	Определяет подстрочный текст
<sup>	Определяет надстрочный текст
<ins>	Определяет вставленный текст
<del>	Определяет удаленный текст
<mark>	Определяет маркированный/выделенный текст

HTML — Форматирование текста html-документа и теги форматирования страницы / ProgLang

Если Вы пользуйтесь текстовым редактором, например, таким как Microsoft Word или Microsoft Excel, то Вы должны быть знакомы с форматированием текста и как сделать текст жирным (полужирным), наклонным (курсивом), зачеркнутым или подчеркнутым. Это всего лишь четыре из одиннадцати доступных вариантов, указывающих, как можно форматировать текст в HTML и XHTML.

Полужирный или жирный текст

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения жирным текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега b делаем <b>жирный шрифт</b>.</p>
    <p>С помощью тега strong делаем <strong>текст жирным</strong>.</p>
  </body>
</html>

Получим следующий результат:

Курсив — наклонный текст или шрифт

Сделать в HTML курсивом текст можно с помощь двух тегов … и …. Все, что находится в тегах курсива … и … отображается в HTML наклонным текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример выделения курсивом текста и шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега i делаем <i>наклонный текст или шрифт</i>.</p>
    <p>С помощью тега em делаем <em>текст курсивом</em>.</p>
  </body>
</html>

Получим следующий результат:

Подчеркнутый текст

Подчеркнуть текст в HTML можно с помощь тега …. Все, что находится внутри тега … отображается в HTML подчеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример подчеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега u делаем <u>подчеркнутый текст или слово</u>.</p>
  </body>
</html>

Получим следующий результат:

Зачеркнутый текст

Зачеркнуть текст в HTML можно с помощь тега <strike>…</strike>. Все, что находится внутри тега <strike>…</strike> отображается в HTML зачеркнутым текстом (шрифтом), как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример зачеркивания текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега strike делаем <strike>зачеркнутый текст</strike>.</p>
  </body>
</html>

Получим следующий результат:

Моноширинный шрифт

Содержимое элемента <tt>…</tt> записывается в HTML моноширинным шрифтом. Большинство шрифтов обладают переменной шириной, потому что разные буквы имеют разную ширину (например, буква «щ» шире буквы «г»). Однако в моноширинном шрифте каждая буква имеет одинаковую ширину.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример моноширинного шрифта в HTML</title>
  </head>
  <body>
    <p>С помощью тега tt делаем <tt>моноширинный шрифт</tt>.</p>
  </body>
</html>

Получим следующий результат:

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример верхнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sup делаем верхний<sup>индекс</sup> или степень числа, например, 2<sup>3</sup>.</p>
  </body>
</html>

Получим следующий результат:

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

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример нижнего индекса в HTML</title>
  </head>
  <body>
    <p>С помощью тега sub делаем нижний<sub>индекс</sub>.</p>
  </body>
</html>

Получим следующий результат:

Вставленный текст

Содержимое внутри тега <ins>…</ins> отображается в HTML как вставленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример вставленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Удаленный текст

Содержимое внутри тега <del>…</del> отображается в HTML как удаленный текст.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример удаленного текста в HTML</title>
  </head>
  <body>
    <p>Хочу зарабатывать <del>много</del> <ins>очень много</ins> денег.</p>
  </body>
</html>

Получим следующий результат:

Большой текст

Содержимое тега <big>…</big> отображается в HTML большим текстом, на один размер шрифта больше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример большого текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега big делаем <big>текст больше</big>.</p>
  </body>
</html>

Получим следующий результат:

Маленький текст

Содержимое внутри тега … отображается в HTML маленьким текстом, на один размер шрифта меньше, чем остальная часть окружающего его текста, как показано ниже:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Пример маленького текста в HTML</title>
  </head>
  <body>
    <p>С помощью тега small делаем <small>текст меньше</small>.</p>
  </body>
</html>

Получим следующий результат:

Группировка элементов и содержимого страницы в HTML

Элементы <div> и  позволяют в HTML группировать несколько элементов для создания секций или подсекций страницы.

Например, Вы можете поместить все ссылки на странице в тег <div>, чтобы указать, что все элементы в этом теге <div> относятся к меню. Затем Вы можете задать стиль тегу <div>, чтобы элементы отображались с использованием специального набора правил стиля (CSS).

Пример с тегом <div>

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <div>
      <a href="/index.html">ГЛАВНАЯ</a> / 
      <a href="/about.html">О НАС</a> / 
      <a href="/contacts.html">КОНТАКТЫ</a>
    </div>
  
    <div>
      <h2>Название статьи</h2>
      <p>Содержимое страницы...</p>
    </div>
  </body>
</html>

Получим следующий результат:

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

Пример с тегом

<!DOCTYPE html>
<html>
  <head>
    <title>Пример группировки элементов и текста в HTML</title>
  </head>
  <body>
    <p>Группировки элементов с помощью <span>тега span</span>.</p>
  </body>
</html>

Получим следующий результат:

Эти теги обычно используются с CSS, чтобы Вы могли задать стиль к секции страницы.

Поделитесь:

Форматирование текста | Справочник HTML

Элементы, предназначенные для оформления и смыслового выделения текста — подчеркивания, изменения шрифта, выделения курсивом, цитирования и т.д.:

<basefont>: Предназначен для задания шрифта, размера и цвета текста по умолчанию.
: Выделяет текст жирным шрифтом.
<blink>: Мигающий текст.
<big>: Отображает текст увеличенным шрифтом (относительно текущего).
<cite>: Оформляет текст как цитату или ссылку на источник.
<code>: Предназначен для отображения программного кода.
: Позволяет изменять цвет, размер и тип шрифта текста.
: Выделяет текст курсивом.
: Используется для смыслового выделения текста (курсивом).
<kbd>: Выделяет текст, который предлагается набрать на клавиатуре.
<marquee>: Сдвигающийся по экрану текст.
: Усиленное логическое ударение (обычно отображается жирным шрифтом).
: Выделяет текст подчеркнутым.
<s>: Выделяет текст перечеркнутым.
<strike>: Зачёркивание текста.
<samp>: Используется для отображения текста, который является результатом вывода компьютерной программы.
: Отображает текст уменьшенным шрифтом (относительно текущего).
: Отображает текст со сдвигом вверх (верхний индекс).
: Отображает текст со сдвигом вниз (нижний индекс).
<tt>: Отображает текст моноширинным шрифтом.
<var>: Используется для обозначения в тексте переменных.

Физическое и логическое форматирование html-документа

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

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

Приведем описание тегов, которые в предыдущих версиях HTML можно было смело отнести к тегам физического форматирования:

(от англ. bold – жирный) – элемент разметки ‘b’, сформированный данным тегом, отображает свое содержимое полужирным шрифтом; в HTML 5 он обозначает стилистическое усиление своего содержимого, например, ключевых слов, которые выделяются в типографике полужирным начертанием;
(от англ. italic – курсивный) – элемент разметки ‘i’, сформированный данным тегом, отображает свое содержимое курсивом; в HTML 5 он обозначает дополнительное выделение своего содержимого, например, иностранных слов, технических терминов, вставок рукописного текста, короче того, что выделяется курсивом в типографике;
(от англ. unarticulated – невнятный) – содержимое элемента разметки ‘u’, сформированного данным тегом, отображается подчеркнутым; в HTML 5 он в основном используется для стилистического выделения слов с орфографическими ошибками или имен собственных в китайском языке;
<s> (от англ. strike out – зачеркнутый) – содержимое элемента разметки ‘s’, сформированного данным тегом, отображается ~~зачеркнутым~~; в HTML 5 он используется для текста, который потерял свою актуальность, например, для старой цены продукта;
(от англ. subscript – нижний индекс) – элемент разметки ‘sub’, сформированный данным тегом, отображает свое содержимое в виде _{нижнего индекса};
(от англ. superscript – верхний индекс) – элемент разметки ‘sup’, сформированный данным тегом, отображает свое содержимое в виде ^{верхнего индекса}.

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

Использование перечисленных элементов разметки показано в примере №1.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы физической разметки</title>
</head>
<body>
	<b>Я &ndash; просто жирный текст.</b> <br>
	<i>Я &ndash; курсивный.</i> <br>
	<u>Я &ndash; подчеркнутый.</u> <br>	
	<s>Я &ndash; зачеркнутый.</s> <br>
	А вот это выражение похоже на странную формулу:<br>
	a<sup>верхний индекс</sup> + b<sub>нижний индекс</sub>.<br><br>
	Для изменения внешнего вида используйте не нас, а стили CSS!
</body>
</html>

Пример №1. Использование элементов физической разметки

Как видим, указанные теги вполне можно было бы использовать для физической разметки документа. Тем более, что сами названия явно указывают на предназначение элементов: italic, bold, underline и т.д. Однако все это пережитки старых версий, и применять какие-либо теги только лишь для изменения внешнего вида текста крайне не рекомендуется. Ведь в HTML 5 все теги имеют логическую нагрузку, хотя отношение некоторых из них к логическим и выглядит несколько натянутым. Однако в любом случае, теперь HTML 5 практически полностью используется в веб-программировании, как инструмент логической разметки документа, а за внешний вид отвечает CSS.

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

Приведем описание тегов логического форматирования:

(от англ. emphasis – акцент) – элемент разметки ’em’, сформированный данным тегом, предназначен для акцентирования внимания на фрагменте текста (обращает внимание на его важность) и отображает свое содержимое курсивом;
(от англ. strong – сильный) – элемент разметки ‘strong’, сформированный данным тегом, предназначен для еще большего акцентирования текста (делает его еще более важным) и отображает свое содержимое полужирным шрифтом;
<cite> (от англ. cite – цитировать) – элемент разметки ‘cite’, сформированный данным тегом, предназначен для выделения сносок на другой материал и отображает свое содержимое курсивом;
<code> (от англ. code – код) – элемент разметки ‘code’, сформированный данным тегом, предназначен для выделения текста программного кода и отображает свое содержимое моноширинным шрифтом;
<kbd> (от англ. keyboard – клавиатура) – элемент разметки ‘kbd’, сформированный данным тегом, предназначен для выделения текста, который должен быть введен с клавиатуры или используется для названия клавиш клавиатуры; элемент отображает свое содержимое моноширинным шрифтом;
<var> (от англ. variable – переменная) – элемент разметки ‘var’, сформированный данным тегом, предназначен для выделения переменных компьютерных программ и отображает свое содержимое курсивом;
<samp> (от англ. sample – пример, образец) – элемент разметки ‘samp’, сформированный данным тегом, предназначен для выделения текста, который является результатом вывода компьютерной программы или скрипта, и отображает свое содержимое моноширинным шрифтом;
<dfn> (от англ. definition – определение) – элемент разметки ‘dfn’, сформированный данным тегом, предназначен для выделения терминов, которые встречаются в тексте впервые, и отображает свое содержимое курсивом;
<abbr> (от англ. abbreviation – аббревиатура) – элемент разметки ‘abbr’, сформированный данным тегом, предназначен для выделения аббревиатур и обычно используется с атрибутом title, содержащим расшифровку аббревиатуры; текст данного элемента браузерами никак не выделяется, сохраняя исходное форматирование;
<q> (от англ. quote – цитата, кавычки) – элемент разметки ‘q’, сформированный данным тегом, предназначен для выделения в тексте небольших цитат и отображает свое содержимое в кавычках;
<ins> (от англ. inserted – вставленный) – элемент разметки ‘ins’, сформированный данным тегом, предназначен для выделения текста, который был добавлен в новую версию документа, и отображает свое содержимое подчеркнутым;
<del> (от англ. deleted – удаленный) – элемент разметки ‘del’, сформированный данным тегом, предназначен для выделения текста, который был удален в новой версии документа, и отображает свое содержимое ~~зачеркнутым~~;
(от англ. small – маленький) – элемент разметки ‘small’, сформированный данным тегом, предназначен для выделения текста, который можно отнести к надписям мелким шрифтом или пометкам, как, например, второстепенная информация в конце юридических документов об отказе от ответственности или же информации о лицензии; элемент отображает свое содержимое моноширинным шрифтом уменьшенного размера;
<time> (от англ. time – время) – элемент разметки ‘time’, сформированный данным тегом, предназначен для создания контейнера, содержимое которого помечается как дата, время или дата и время; обычно содержимое элемента ‘time’ представляет собой дату и время в удобочитаемом для пользователей формате; браузеры никак не выделяют содержимое элемента ‘time’.

Все перечисленные элементы также формируются соответствующими парными тегами и отображаются браузерами как строчные элементы (см. пример №2).

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы логической разметки</title>
</head>
<body>
<p>	
	<dfn>PHP</dfn> &ndash; скриптовый язык общего назначения.   
	<br> Узнайте, как расшифровывается аббревиатура 
	<em><abbr title="Hypertext Preprocessor">PHP</abbr></em>, 
	наведя на нее курсор. <br>
	Хотя первоначально аббревиатура <em>PHP</em> означала 
	<em><del>Personal Home Page Tools</del></em>, <br>теперь ее стоит 
	расшифровывать как <strong><ins>Hypertext Preprocessor</ins></strong>. <br>
</p>
<p>	
	Давайте посмотрим на фрагмент кода <em>PHP</em>: 
	<code> echo "Всем привет от PHP!";</code>. <br>
	Как сказал автор кода на своей страничке  <cite>http://www.fdpppdf.com</cite>: 
	<br> <q>Великий код!</q>. <br>
</p>
<p>	
	Для запуска кода нажмите на клавиатуре <kbd>'ALT'+'SHIFT'+'Поехали!'</kbd>.<br>
	На экран будет выведено приветствие: "<samp>Всем привет от PHP!</samp>". <br>
	Убедились? Оператор <var>echo</var> &ndash; это сила! <br>
</p>	
	<small>Все права на пример защищены марсианским законодательством.</small>
</body>
</html>

Пример №2. Использование элементов логической разметки

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

В завершение пункта отдельно приведем описание еще двух элементов логической разметки документа:

<address> (от англ. address – адрес) – элемент разметки ‘address’, сформированный данным парным тегом, предназначен для выделения информации об авторе, например, ссылка на его ресурс, адрес и т.д.; элемент отображает свое содержимое курсивом, а браузеры отображают как блочный элемент.
<blockquote> (от англ. blockquote – блок с цитатой) – элемент разметки ‘blockquote’, сформированный данным парным тегом, предназначен для выделения длинных цитат, в отличие от элемента ‘q’, при помощи которого выделяются небольшие цитаты; браузеры отображают элемент как блочный.

Использование данных элементов показано в примере №3.


<html>
<head>
	<meta charset="utf-8">	
	<title>Элементы 'address' и 'blockquote'</title>
</head>
<body>
	<h4>Бернард Шоу</h4>
	
	<blockquote>
		Мир настолько сгнил, что даже влюбиться в кого-то — <br>
		это самый большой риск, который мы можем себе позволить. <br>
		Нас сжимает изнутри от вероятности, что это окажется не <br>
		взаимно или агрессивно воспринято. Люди разучились любить, <br>
		миром правят потребительские отношения.
	</blockquote>
	
	<address>Связаться с автором цитаты не получится.</address>
</body>
</html>

Пример №3. Использование элементов ‘address’ и ‘blockquote’

Форматирование текста в HTML. Основы HTML для начинающих. Урок №3

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

Основные теги для работы с текстом

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


<h2> Заголовок h2 </h2>
<h3> Заголовок h3 </h3>
<h4> Заголовок h4 </h4>
<h5> Заголовок h5 </h5>
<h5> Заголовок h5 </h5>
<h6> Заголовок h6 </h6>

Тег <h2>-<h6> выделяет текст полужирным шрифтом, а также задает каждому заголовку свой размер. Заголовок <h2> – это самый большой размер, заголовок <h6> – самый маленький. И в дополнение добавлю, что каждый заголовок начинается с новой строки. Закрывающий тег обязателен.

*выравнивание заголовка.

К тегам <h2>-<h6> можно добавить атрибут «align». Он служит для того, чтобы горизонтально выравнивать заголовок.
Значение атрибута «align»:

left – слева (по умолчанию)
right – справа
center – по центру

Пример:


<h2 align= "center"> Заголовок h2 будет по центру </h2>

Теперь сам код:


<html>
<head>
<title> Теги для заголовка на HTML – StepkinBlog.ru</title>
</head>
<body>

<h2 align= "center"> Заголовок h2 будет по центру </h2>

<h3 align= "right"> Заголовок h3 будет справа</h3>

<h4>Заголовок h4</h4>

<h5>Заголовок h5</h5>

<h5>Заголовок h5</h5>

<h6> Заголовок h6</h6>

</body>
</html>

Сохраните файл. Еще раз напомню, что сохранить файл нужно в формате «.html». О том, как это делать, читайте урок№2.

Если откроете файл, то на экране отобразится вот такая картина:

Теги для текста

○ тег разделения текста на абзацы


<p> Текст </p>
<p> Текст </p>
<p> Текст </p>

Тег разделяет текст на абзацы. Закрывающий тег обязателен.

*выравнивание текста.

К тегу можно добавить атрибут «align». Он служит для горизонтального выравнивания текста внутри параграфа.
Значение атрибута «align»:

left – слева (по умолчанию)
right – справа
center – по центру
justify – по ширине.

Пример:

<p align= "center"> Текст </p>

Теперь сам код:


<html>
<head>
<title>Теги для текста на HTML – StepkinBlog.ru</title>
</head>
<body>

<p align= "center"> Что такое HTML? (текст по центру) </p>

<p align= "justify">HTML – (от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанный британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах (здесь текст будет выравниваться одновременно по левому и правому краям документа)</p>

<p align= "justify">Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница (здесь текст будет выравниваться одновременно по левому и правому краям документа)</p>

<p>Подписывайтесь на обновления моего блога (текст без выравнивания) </p>

<p align= "right"> Текст взят из сайта StepkinBlog.ru (текст справа) </p>

</body>
</html>

Результат:

○ Тег принудительного переноса строки


<br>

Тег принудительно переносит строку в html документе. Закрывающий тег не нужен.

Пример:


<p> Привет! </p>
<br>
<p> Текст. <br> Другой текст. Третий текст. </p>
<p> Теперь пока! </p>

Теперь сам код:


<html>
<head>
<title>Теги для текста на HTML – StepkinBlog.ru</title>
</head>
<body>
<p> Привет! </p>
<br>
<p> Текст. <br> Другой текст. Третий текст. </p>
<p> Теперь пока! <br> Текст взят из сайта StepkinBlog.ru </p>
</body>
</html>

Результат:

○ Тег, выделяющий текст курсивом


<em>Текст или слово</em>

Или


<i>Текст или слово</i>

Для тега или закрывающий тег обязателен.

○ Тег, выделяющий текст жирным


<strong>Текст или слово</strong>

Или


<b>Текст или слово</b>

Для тега или закрывающий тег обязателен.

○ Тег для подчеркивания текста


<u>Текст или слово</u>

Для тега закрывающий тег обязателен.

○ Тег для перечеркивания текста


<s>Текст</s>

— текст будет ~~перечеркиваться~~.

Для тега <s> закрывающий тег обязателен.

○ Тег верхнего и нижнего индекса


<SUP>текст верхнего индекса</SUP>
<SUB>текст для нижнего регистра</SUB>

Для тега и закрывающий тег обязателен.

Пример:


(Х<SUP>2</SUP>)

в результате вы увидите (х²)


H<SUB>2</SUB>O

в результате вы увидите Н₂О

○ Тег для вставки горизонтальной линии


<HR>

Для тега <HR> закрывающий тег не нужен.

*атрибуты для тега <hr>.

К тегу <hr> можно добавить такие атрибуты:

WIDTH – длина линии. Задается размер в пикселях или процентах. Пример:

<hr>

SIZE – толщина линии (px). Пример:

<hr size ="8">

ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть значения:

left – по левому краю
right – по правому краю
center – по центру (используется по умолчанию)

Пример:

<hr align="left">

NOSHADE – делает линию сплошной. Пример:

<hr noshade>

COLOR – цвет линии (не во всех браузерах работает). Пример:

<hr color="red" />

Пример:


<p>Текст</p>
<hr align="left" size ="8">
<p>Текст</p>
<hr noshade align="left" size ="8">

Итак, пока далеко не зашли, давайте все пропишем в общий код (текст жирным, курсивом, зачеркнутым, подчеркнутым, текст верхнего и нижнего регистра и линия).

Пример:


<html>
<head>
<title>Теги для текста на HTML – StepkinBlog.ru</title>
</head>
<body>
<hr align="left" size ="8">
<p> Просто текст, а это текст <em>курсивом</em>.<br> Еще есть <strong>жирный текст</strong></p>
<p> А здесь можно перечеркнуть <u>текст или слово</u> или вообще <s>зачеркнуть</s></p>
<p> Можем написать уравнение x<SUP>2</SUP>+y<SUP>2</SUP>=-1.<br>
Хотя, что нам математика, можно и химию зацепить. Вот, например, формула воды:
H+0<SUB>2</SUB>O=H<SUB>2</SUB>O</p>
<hr noshade align="left" size ="8">
Теперь пока! <br> Текст взят из сайта StepkinBlog.ru </p>
</body>
</html>

Результат:

Тег Font и его атрибуты

○ Тег для изменения цвета, размера и шрифта.


<font> Текст </font>

Для тега закрывающий тег обязателен.

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

*атрибуты для тега <font>

SIZE – размер текста. Значение задается по нарастанию от 1 до 7 Пример:

<font size="7">Текст</font>

COLOR – цвет текста. Пример:

<font color="red">Текст</font>

FACE – шрифт текста. Пример:

<font face="Times New Roman">Текст</font>

Пример:


<html>
<head>
<title>Теги для текста на HTML – StepkinBlog.ru</title>
</head>
<body>
<p> Просто текст</p>
<p><font size="7" color="red" face="Times New Roman">StepkinBlog.ru</font></p>
</body>
</html>

Тег <center>


<center> Текст </center>

Тег <center> предназначен для выравнивания по центру окна всех элементов. Для тега <center> закрывающий тег обязателен.

Пример:


<html>
<head>
<title>Теги для текста на HTML – StepkinBlog.ru</title>
</head>
<body>
<center>
<p>Просто текст</p>
<p>StepkinBlog.ru</p>
</center>
</body>
</html>

В результате:

Совместное использование тегов

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

<тэг1><тэг2><тэг3> Текст </тэг3></тэг2></тэг1>

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

<font color="red"><strong><u> Текст </u></strong></font>

Вот готовый код:


<html>
<head>
<title>Теги для текста на HTML – StepkinBlog.ru</title>
</head>
<body>
<p> Просто текст</p>
<font color="red"><strong><u> Текст </u></strong></font>
</body>
</html>

В результате вы увидите:

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


<html>
<head>
<title>Моя страничка на HTML – StepkinBlog.ru</title>
</head>
<body>
<h3 align="center">Основы HTML на StepkinBlog.ru</h3>
<p align="right"><em>Автор блога: Костаневич Степан</em></p>
<p align="justify"><strong><u>HTML</u></strong> – (от англ. <em>Hypertext Markup Language</em> )  это язык разметки гипертекста, разработанный британским ученным Тимом Бернерс-Ли (Tim
Berners-Lee) в <font color="green"><strong>1991—1992</strong></font> годах.</p>
<p align= "right"> Текст взят из сайта StepkinBlog.ru</p>
<center>
<p><font color="red" size ="5">Удачи!!!</font></p>
<p>Жду вас на своем блоге <br> StepkinBlog.ru или BlogGood.ru</p>
</center>
<hr noshade align="left" size ="5">
Цена сайта <s>500$</s> - <font color="red">499$</font>
</body>
</html>

[посмотреть результат]

Предыдущая запись
Основы bootstrap для начинающих. Урок №1 Следующая запись
Спецсимволы в HTML. Основы HTML для начинающих. Урок №4

Основы html. Часть 1. Форматирование

Начинаю серию небольших уроков для знакомства с основами html. В первом уроке познакомимся с форматированием текста.

Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Любая веб-страница является текстовым документом, в котором содержится текст самой страницы и специальные команды, подсказывающие браузеру, как нужно отображать отдельные фрагменты текста. Эти специальные команды называются теги. Теги пишутся только английскими буквами и заключаются в угловые скобки < >. Теги бывают открывающие (начало действия команды браузеру) и закрывающие (соответсвенно окончание действия). В закрывающем теге ставится слеш перед названием </>. Сейчас на практике Вы поймете, о чем идет речь.

Как я говорил, html-страница является текстовым документом, значит для ее создания вполне подойдет простой блокнот. Открывайте блокнот и пишем вот такую комбинацию тегов

Любая вебстраница начинается с тега <html>, чтобы браузер знал, как ее обрабатывать. Как видите, заканчиваться страница должна закрывающим </html>. Также обязательные теги <head> </head> (голова) и <body> </body> (тело) вебстраницы. В логове размещается различная нужная служебная информация, а между тегами <body> </body> собственно контент страницы. Теперь посмотрим, как это выглядит в браузере. Для этого сначала сохраним то, что написано в блокноте: Файл — Сохранить как, выбираете куда желаете сохранить и произвольное имя (у меня proba). Обязательно укажите после точки расширение файла html, иначе страница сохранится как текстовый документ, а не веб-страница.

Открываем брайзер, далее Файл — Открыть, и в появившемся окне выбираем только что сохраненный файл.

Как видим, у нас пустая белая страница, ведь между тегами <body> </body> пока ничего нет. Но прежде добавим в голову вот такую комбинацию

<head>
<title>Моя первая страница</title>
</head>

Сохраняем блокнот (нажмите Ctrl + S) и обновите окно браузера. Заметили, что появилось название страницы?

Теперь займемся наполнением содержания страницы. Возьмите произвольный текст, скопируйте и вставьте его между тегами <body> </body>. У меня получилось вот так:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body>
Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Сохраняем блокнот, обновляем браузер. Видим, что текст появился, но нет разрыва между абзацами. Для этого нужен специальный тег (от английского paragraph). Ставим его в начало абзаца и не забываем поставить в конце закрывающий тег . У меня получилась так.

 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

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

Сохраняем, обновляем браузер. Есть абзацы. Сделаем заголовок страницы. Напишем его между тегами <h2> </h2> (от англ. heading — заголовок). Цифры можно использовать от 1 до 6 (1 — самый большой шрифт, 6 — самой маленький. )

<h2> html — это просто</h2>
 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

По умолчанию браузер выравнивает текст по левому краю. Если нужно указать выравнивание, то используют признак align=. В нашем коде это будет выглядеть так:

<h2> html — это просто</h2>
 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Не забываем сохранять блокнот и обновлять браузер. Видим, что теперь первый абзац выравнился по центру. Для выравнивания по правому краю используйте значение «right», по ширине страницы — «justify». Признак align можно применять заголовкам, изображениям и т.д.

Теперь выделим жирным какую-нибудь фразу. В этом поможет тег . Не забывайте ставить закрывающий .

<h2> html — это просто</h2>
 Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

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

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

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

правильно 
 правильно 
 не правильно

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

Думаете, что язык html — это очень сложно? Ничего подобного. Сейчас за несколько минут мы вместе сделаем Вашу первую вебстраничку. Для этого Вам понадобится только блокнот и браузер. Итак, начнем.

Теперь выделим жирным какую-нибудь фразу. В этом поможет тег . Не забывайте ставить закрывающий .

правильно 
 правильно 
 не правильно

К элементам форматирования текста относятся так же списки. В языке html за построение списков отвечает несколько тегов. Сначала рассмотрим ненумерованный список. Наберите в блокноте следующую комбинацию

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
 Ненумерованный список 
<ul>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 2 </li>
</ul>
</body>
</html>

Знакомимся с новыми тегами: <ul> </ul> — показывает ненумерованный список, <li> </li> отмечает один пункт списка.

По умолчанию браузер отображает каждый пункт списка черной точкой. Это можно изменить, добавив тегу <ul> признак type=» «. В кавычках укажите «circle», «disc» или «square»

Ненумерованный список 
<ul type=»circle»>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 2 </li>
</ul>

Если нужно построить пронумерованный список, то вместо тега <ul> используют <ol>

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
 Пронумерованный список 
<ol>
<li>пункт 1 </li>
<li>пункт 2 </li>
<li>пункт 3 </li>
</ol>
</body>
</html>

Иногда возникает необходимость прервать пронумерованный список, например для комментариев, а затем продолжить его. Чтобы указать браузеру, с какой цифры начинать список используйте признак start=» «. В ковычках укажите с какой цифры должен начинаться список.

Пронумерованный список с разрывом 
<ol>
<li>пункт 1 </li>
<li>пункт 2 </li>
</ol>
Примечание
<ol start=»3″>
<li>пункт 3</li>
<li>пункт 4 </li>
</ol>

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

Тегом можно указать не только тип, но и размер шрифта. Для этого применяют тег . В кавычках укажите размер шрифта, от 1 до 7, либо на сколько единиц его увеличить или уменьшить (+1 … +7; -1 … -7). Признаки размера и типа шрифта можно писать в одном теге .

<html>
<head>
<title>Моя первая страница</title>
</head>
<body >
Это текст написан шрифтом по умолчанию
Это текст написан шрифтом Book Antiqua 
Это текст написан шрифтом по умолчанию, размер 5 
Это текст написан шрифтом Book Antiqua, размер 5 
</body>
</html>

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

Я Вам показал лишь малую часть возможностей языка html. Изучить его в совершенстве Вам поможет Базовый курс по обучению языку HTML и CSS

Наверх

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

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

Полужирный текст
Все, что появляется внутри тегов … отображается жирным шрифтом, как показано ниже−

<!DOCTYPE html> <html> <head> <title>Жирный текст пример</title> </head> <body> Следующее слово использует жирный шрифт. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Жирный текст пример</title>

</head>

<body>

Следующее слово использует жирный шрифт.

</body>

</html>

В результате будет получено —

Курсив
Все, что появляется внутри … элемент отображается курсивом, как показано ниже −

<!DOCTYPE html> <html> <head> <title>Пример текста курсив</title> </head> <body> Следующее слово напечатано курсивным шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Пример текста курсив</title>

</head>

<body>

Следующее слово напечатано курсивным шрифтом.

</body>

</html>

В результате будет получено —

Подчеркнутый текст
Все, что появляется внутри тегов … отображается с подчеркиванием, как показано ниже −

<!DOCTYPE html> <html> <head> <title>Подчеркивание текста</title> </head> <body> Следующее слово подчеркнуто. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Подчеркивание текста</title>

</head>

<body>

Следующее слово подчеркнуто.

</body>

</html>

В результате будет получено —

Перечеркнутый текст
Все, что появляется внутри тегов <strike>…</strike> отображается перечеркнутым, перечеркивание представляет собой тонкую линию по тексту, как показано ниже −

<!DOCTYPE html> <html> <head> <title>Перечеркнутый тект</title> </head> <body> Следующее слово написано <strike>перечеркнутым</strike> шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Перечеркнутый тект</title>

</head>

<body>

Следующее слово написано <strike>перечеркнутым</strike> шрифтом.

</body>

</html>

В результате будет получено —

Моноширинный шрифт
Содержание внутри тега <tt>…</tt> пишется моноширинным шрифтом. Большинство шрифтов известны как шрифты переменной ширины, потому что разные буквы имеют разную ширину (например, буква » m «шире, чем буква «i»). В моноширинном шрифте, однако, каждая буква имеет одинаковую ширину.

<!DOCTYPE html> <html> <head> <title>Моноширинный шрифт</title> </head> <body> Следующее слово написано <tt>моноширинным</tt> шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Моноширинный шрифт</title>

</head>

<body>

Следующее слово написано <tt>моноширинным</tt> шрифтом.

</body>

</html>

В результате будет получено —

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

<!DOCTYPE html> <html> <head> <title>Надстрочный текст</title> </head> <body> Следующее слово написано надстрочным шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Надстрочный текст</title>

</head>

<body>

Следующее слово написано надстрочным шрифтом.

</body>

</html>

В результате будет получено —

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

<!DOCTYPE html> <html> <head> <title>Подстрочный текст</title> </head> <body> Следующее слово написаноподстрочным шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Подстрочный текст</title>

</head>

<body>

Следующее слово написаноподстрочным шрифтом.

</body>

</html>

В результате будет получено —

Вставляемый текст
Все, что появляется внутри тегов <ins>…</ins> будет отображено как вставленный текст.

<!DOCTYPE html> <html> <head> <title>Вставленный тект</title> </head> <body> Я хочу <del>пирожок</del> <ins>морожено</ins> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Вставленный тект</title>

</head>

<body>

Я хочу <del>пирожок</del> <ins>морожено</ins>

</body>

</html>

В результате будет получено —

Удаленный текст
Все, что появляется внутри тегов <del>…</del> отображается как удаленный текст.

<!DOCTYPE html> <html> <head> <title>Вставленный тект</title> </head> <body> Я хочу <del>пирожок</del> <ins>морожено</ins> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Вставленный тект</title>

</head>

<body>

Я хочу <del>пирожок</del> <ins>морожено</ins>

</body>

</html>

В результате будет получено —

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

<!DOCTYPE html> <html> <head> <title>Увеличенный текст</title> </head> <body> Следующее слово будет напечатано <big>увеличенным</big> шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Увеличенный текст</title>

</head>

<body>

Следующее слово будет напечатано <big>увеличенным</big> шрифтом.

</body>

</html>

В результате будет получено —

Уменьшенный текст
Содержание внутри тегов … отображается меньшим размером шрифта, чем остальной текст вокруг −

<!DOCTYPE html> <html> <head> <title>Уменьшенный текст</title> </head> <body> Следующее слово напечатано мелким шрифтом. </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Уменьшенный текст</title>

</head>

<body>

Следующее слово напечатано мелким шрифтом.

</body>

</html>

В результате будет получено —

Группировка Содержимого
<div> и  элементы позволяют сгруппировать несколько элементов, чтобы создать разделы или подразделы, страницы. Например, можно поместить все сноски на странице в элемент <div> , чтобы указать, что все элементы в этом элементе связаны с сносками. Затем можно прикрепить стиль к этому элементу <div>, чтобы он отображался с помощью специального набора правил стиля.

<!DOCTYPE html> <html> <head> <title>Пример тега Div</title> </head> <body> <div id = «menu» align = «middle» > <a href = «/index.html»&gtГЛАВНАЯ</a> | <a href = «/about/contac.html»>КОНТАКТЫ</a> | <a href = «/about/index.htm»>О НАС</a> </div> <div id = «content» align = «left» bgcolor = «white»> <h5>Содержание статей</h5> Фактическое содержание….. </div> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>Пример тега Div</title>

</head>

<body>

<a href = «/index.html»&gtГЛАВНАЯ</a> |

<a href = «/about/contac.html»>КОНТАКТЫ</a> |

</div>

<h5>Содержание статей</h5>

Фактическое содержание…..

</div>

</body>

</html>

В результате будет получено —

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

<!DOCTYPE html> <html> <head> <title>Тег Span</title> </head> <body> »Это пример тега span и тега div вместе с CSS </body> </html>

<!DOCTYPE html>

<html>

<head>

</head>

<body>

»Это пример тега span

и тега div вместе с CSS

</body>

</html>

В результате будет получено —

Html форматирование – HTML — Форматирование текста html-документа и теги форматирования страницы / ProgLang

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

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

HTML элементы форматирования

HTML элементы <b> и <strong>

HTML элементы <i> и <em>

HTML элемент <small>

HTML элемент <mark>

HTML элемент <del>

HTML элемент <ins>

HTML элемент <sub>

HTML элемент <sup>

HTML Упражнения

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

HTML — Форматирование текста html-документа и теги форматирования страницы / ProgLang

Полужирный или жирный текст

Пример

Курсив — наклонный текст или шрифт

Пример

Подчеркнутый текст

Пример

Зачеркнутый текст

Пример

Моноширинный шрифт

Пример

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

Пример

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

Пример

Вставленный текст

Пример

Удаленный текст

Пример

Большой текст

Пример

Маленький текст

Пример

Группировка элементов и содержимого страницы в HTML

Пример с тегом <div>

Пример с тегом <span>

Поделитесь:

Форматирование текста | Справочник HTML

Физическое и логическое форматирование html-документа

Форматирование текста в HTML. Основы HTML для начинающих. Урок №3

Форматирование текста в HTML. Основы HTML для начинающих. Урок №3

Основные теги для работы с текстом

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

Теги для текста

Тег Font и его атрибуты

Тег <center>

Совместное использование тегов

Основы html. Часть 1. Форматирование

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

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

Рубрики

HTML элементы `<b>` и `<strong>`

HTML элементы `<i>` и `<em>`

HTML элемент `<small>`

HTML элемент `<mark>`

HTML элемент `<del>`

HTML элемент `<ins>`

HTML элемент `<sub>`

HTML элемент `<sup>`