Html написание текста: Текст | htmlbook.ru

Учебник HTML. Урок 3. Добавление текста, абзацы, спецсимволы, мета данные | DesigNonstop

Полезности / Учебники

68692

09-04-2013

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

Абзацы
Возможно, вы удивитесь, но вы уже научились добавлять абзацы HTML в Уроке 2. В документе HTML новый абзац вставляется при каждом добавлении текста, заключенного в тег <р>. Давайте еще раз взглянем на код.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"> <head> <title>Moя XHTML страница</title> </head> <body> <р>Это моя первая XHTML страница.</p> </body> </html>

 
 

Браузер, получая для обработки такой код, определяет, что вы хотите отобразить на экране указанный текст. Для браузера не имеет значения, на сколько строк разбит этот текст в кодах документа, — он обращает внимание только на теги HTML. В приведенном далее HTML коде текст одного абзаца разбит на несколько строк и даже содержит одну пустую строку, однако браузер все равно распознает этот текст как один отдельный абзац, заключенный в теги <р> и </р>. Тег дает указание браузеру вставить вначале пустую строку и лишь затем отображать заключенный в этом теге текст</p>.

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Набор абзаца в HTML</title>
</head>
<body>
<р>Это первая строка.

Однако будет ли эта строка второй?</p>
<р>Нет, это вторая строка.</p>
</body>
</html>

 
 

Браузер игнорирует вставленную в кодах пустую строку и вместо нее добавляет пустые строки перед текстом, заключенным в тегах <р>

 
 

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

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

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Набор абзаца в HTML</title>
</head>
<body>
<p>Буря мглою небо кроет<br />
Вихри снежные крутя<br />
То, как зверь, она завоет<br />
То заплачет, как дитя
</p>
<p>То по кровле обветшалой<br />
Вдруг соломой зашумит<br />
То, как путник запоздалый<br />
К нам в окошко застучит
</p>
</body>
</html>

 
 

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

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

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www. w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Выделение текста</title>
</head>
<body>
<p>Увеличивает на один пункт размер шрифта
<big>тег big</big>.</p>
<p>Так выглядит резульата применения тега
<b>тега bold</b> и <strong>strong</strong>.</p>
<p>А это результат применения тега
<i>тега italic</i> и <em>emphasis</em>.</p>
<p>Имитирует машинописную гарнитуру
<tt>тег teletype</tt>.</p>
<p>Уменьшает на один пункт размер шрифта
<small>тег small</small>.</p>
</body>
</html>

 
 

Такой вот наглядный результат получается на практике после применения парных тегов <big>, <b>, <strong>, <i>, <em>, <tt>, <small>.

 
 

В HTML предусмотрены и другие теги, предназначенные для форматирования текста, однако их применение делает коды HTML-документов трудными для чтения и восприятия, и в языке XHTML их заменили таблицы стилей.

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

 
 

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

Заголовки
Разбивка текста на абзацы не является единственным способом форматирования веб-страниц. В HTML предусмотрен целый набор тегов, позволяющих задавать заголовки шести различных уровней- начиная с <h2> и заканчивая <h6>. Все эти теги очень просты в использовании, например:


<h2>Заголовок первого уровня</h2>

 
 

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

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

 
 

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

Специальные символы
Довольно часто возникает необходимость в отображении на веб-страницах различных специальных символов, и это неудивительно, ведь многие символы (такие, как +, —, % или &) постоянно встречаются и в обычных текстах. К сожалению, не все браузеры воспроизводят эти символы корректно, поэтому в HTML предусмотрена возможность обозначения их с помощью соответствующих цифровых или текстовых кодов.

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

Математические записи
Хотя HTML изначально разрабатывался учеными, в нем не предусмотрена возможность создания математических или других научных записей любого сколько-нибудь значительного уровня сложности. В HTML имеются два тега, позволяющие записывать отдельные простые выражения. Это теги <sub> (нижний индекс) и <sup> (верхний индекс). Так код, приведенный ниже:

CO<sub>2</sub> = Carbon Dioxide
A<sup>2</sup> + B<sup>2</sup> = C<sup>2</sup>

 
 

На практике выглядит так:.

 
 

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

Выбор языка
Не обязательно знать английский язык, чтобы использовать HTML для создания HTML-страниц. Адреса URL, гиперссылки, теги HTML и элементы форматирования документов не принадлежат к какому-либо языку (с лингвистической точки зрения), чего, разумеется, нельзя сказать о размещаемой на веб-странице текстовой информации. Если вы пишете на стандартном английском языке, никаким специальным образом обозначать этот факт в HTML-документе не требуется. Однако, если вы набираете текст на каком-либо другом языке, необходимо указать этот язык для браузера. В приведенных ниже примерах показано, как в HTML объявляется об использовании русского и французского языков.

<html xmlns="http://www. w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">

 
 

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

Применение разных языков на одной странице
Хотя в предыдущих примерах атрибут lang использовался как часть тега <html>, размещаемого в начале документа, вполне возможна ситуация, при которой в пределах веб-страницы на одном языке необходимо добавить текстовый фрагмент, набранный на другом языке. Например, включить абзац на французском в англоязычный документ. Определение атрибута lang для тега <р> позволяет решить данную задачу. Взгляните на приведенный далее пример.

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Mu11ti-Language Document</title>
</head>
<body>
<p>Put your English text here.</p>
<p lang="fr">Mettez votre texte francais ici.</p>
<p lang="ru">А здесь русский текст.</p>
</body>
</html>

Теги для включения метаданных
И наконец, необходимо разобраться с тегом <head>. Пока что вы видели внутри данного тега только тег <title>, позволяющий указать заголовок веб-страницы, однако этим возможности тега <head> вовсе не ограничиваются. Обратите внимание, что набранная за пределами тега <title> информация тега <head> обычно не отображается в создаваемом документе. Предусмотренный для нее тег <meta> можно применять для указания метаданных, таких, как сведения об авторе данной страницы, используемые в процессе поиска ключевые слова, или краткое описание страницы, отображаемое как результат поиска. Тег <meta> позволяет также разработчику веб-страницы давать необходимые указания браузеру. Ограничения на количество добавляемых тегов <meta> не существует. Рассмотрим подробнее каждый из них.

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

Если потенциальный клиент будет искать информацию по этому выражению, вашу веб-страницу он не найдет. Что ж, вы можете использовать тег <meta> для добавления в HTML-документ слов и выражений, обозначающих названия продуктов, месторасположение, технические термины, слова-синонимы, по которым потенциальные посетители вашей веб-страницы могут осуществлять поиск информации. Существует три тега, которые помогают увеличить вероятность обнаружения поисковой машиной вашей Web-страницы.

 
 

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

 
 

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

 
 

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

 
 

Метаданные для поисковых машин задаются парами атрибутов: name и contents. В приведенном далее коде HTML метаданные включены для каждого из только что перечисленных тегов <meta>. Не забывайте о том, что теги <meta> отображаются только в разделе <head> HTML-файла.

<!DOCTYPE html
	PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtmll/DTD/xhtmll-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
<title>Моя HTML страница</title>
<meta name="keywords" contents="слова, которые могут применяться
для поиска вашей страницы" />
<meta name="description" contents="краткое описание документа" />
<meta name="author" contents="Bame имя" />
</head>
<body>
<p>Здесь текст, который должен отображаться в окне браузера. </p>
</body>
</html>

Обновление и перенаправление
В некоторых случаях возникает необходимость заменить одну страницу другой или перенаправить ссылку. Например, иногда для веб-страницы создается заставка, некоторое время отображаемая на экране. Вы можете воспользоваться тегом <meta>, чтобы дать указание браузеру сменить содержание страницы через заданный промежуток времени, добавив в документ HTML приведенный далее код.

<meta http-equiv="refresh" content="время в секундах,
URL-адрес новой страницы" />

 
 

Страница-заставка — это начальная страница, появляющаяся перед основной и служащая для отображения некоторой вводной информации или графики (например, логотипа компании). Если содержание вашей веб-страницы постоянно обновляется и вы хотите, чтобы посетители видели только ее наиболее свежую версию, можете указать собственный URL-адрес данной страницы в теге refresh. Когда браузер видит тег refresh, он обращается за новой информацией по указанному адресу через заданный промежуток времени.

<meta http-equiv="refresh" content="время в секундах,
URL-адрес данной страницы" />

 
 

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

Дата истечения срока
Если ваша веб-страница постоянно обновляется, вы можете указать в теге <meta> дату истечения срока ее актуальности, чтобы быть уверенным, что браузер своевременно осуществит загрузку ее более свежей версии (вместо отображения старой версии, которая по-прежнему может быть сохранена в его памяти). Взгляните на приведенный далее код:

<meta http-equiv="expires" content="Wed, 03 April 2013 00:00:00 GMT" />

 
 

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

Теги HTML, рассмотренные в этом уроке
 
<p> </p> — Обозначает пределы одного текстового абзаца. Перед абзацем вставляется пустая строка
 
<b> </b> — Задает для текста полужирный стиль начертания
 
<strong> </strong> — Задает для текста полужирный стиль начертания
 
<big> </big> — Увеличивает на один пункт размер шрифта
 
<br /> — Разрыв строки. Инициирует переход к следующей строке
 
<em> </em> — Задает для текста курсивный стиль начертания
 
<i> </i> — Задает для текста курсивный стиль начертания
 
<h2> </h2> — Создает заголовок первого уровня
 
<h3> </h3> — Создает заголовок второго уровня
 
<h4> </h4> — Создает заголовок третьего уровня
 
<h5> </h5> — Создает заголовок четвертого уровня
 
<h5> </h5> — Создает заголовок пятого уровня
 
<h6> </h6> — Создает заголовок шестого уровня
 
<meta /> — Идентифицирует информацию о документе
 
<small> </small> — Уменьшает на один пункт размер шрифта
 
<sub> </sub> — Задает нижний (подстрочный) индекс
 
<sup> </sup> — Задает верхний (надстрочный) индекс
 
<tt> </tt> — Задает для текста равноширинный шрифт (т. е. шрифт с одинаковой фиксированной шириной символов)

 
 

По материалам книги Дидре Хейз «Освой самостоятельно HTML«.

РАЗМЕТКА ТЕКСТА — Древо

  • Статья
  • Новости
  • Обсуждение
  • Предложения
  • Версии

Изменить

Статья из энциклопедии «Древо»: drevo-info.ru

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

Пожалуйста, не пренебрегайте разметкой помещаемых в «Древо» текстов.

Следует знать

  • Обычный перевод строки при отображении статьи не учитывается. Для начала нового абзаца нужно вставить перед ним пустую строчку. Для форматирования стихотворного текста можно использовать двоеточия в начале каждой строки в строфе (см. ниже «Создание отступа»), а между строфами — абзац.
  • Внешние ссылки на другие ресурсы в сети создаются автоматически, если написан полный адрес (http://…………………..)
  • Не спешите сохранять текст, сначала выполните «Предпросмотр», и, убедившись в отсутствии ошибок, сохраняйте.
  • Просмотреть базу иллюстраций и добавить к ним новые изображения для последующей вставки в статью можно с помощью ссылки «Иллюстрации», расположенной в левом столбиковом меню.

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

При оформлении страниц в «Древе» использование разметки HTML (тэгов HTML) запрещено. Вместо этого используется специальная простая wiki-разметка, команды и особенности которой приведены ниже.

Основные команды разметки текста

ДЕЙСТВИЕ СПОСОБ ПРИМЕР РЕЗУЛЬТАТ ПРИМЕЧАНИЯ
Выделение жирным шрифтом Обрамить слово или фрагмент текста звездочками *слово* слово Или выделить слово/фрагмент и нажать кнопку «Ж» на панели инструментов над окном редактирования
Выделение курсивом Обрамить слово или фрагмент текста нижними черточками _слово_ слово Или выделить слово/фрагмент и нажать кнопку «К» на панели инструментов
Ударения Поставить символ ‘ (апостроф) после буквы, на которую надо поставить ударение Апологе’тика Апологе́тика
Создание ссылки на другую статью в «Древе» Обрамить ссылку (название статьи) двойными круглыми скобками ((Иван Грозный)) Иван Грозный Или выделить название статьи и нажать кнопку «Ссылка» на панели инструментов
Создание ссылки на другую статью в «Древе», но видимый читателю текст отличается от ее названия Так же, как ссылка, внутри двойных скобок после названия статьи поставить знак равенства, а после него тот текст, который будет виден читателю ((Иван Грозный=царь)) царь Часто нужно, когда мы хотим сделать ссылкой слово или словосочетание в тексте, а оно стоит в другом падеже или т. п.
Создание списка Перед каждым элементом списка поставить звездочку (только в начале строки! иначе выйдет выделение жирным, а не список) *Первое
**Подпункт1
**Подпункт2
*Второе
*Третье
  • Первое
    • Подпункт1
    • Подпункт2
  • Второе
  • Третье
Как видно на примере, для элементов списка достаточно просто новой строки, а не пустой, как для абзацев.
Создание нумерованного списка Перед каждым элементом списка поставить «решетку» #Первое
##Подпункт1
##Подпункт2
#Второе
#Третье
  1. Первое
    1. Подпункт1
    2. Подпункт2
  2. Второе
  3. Третье
Аналогично
Создание заголовка раздела Обрамить текст заголовка двойными «равно» ==Заголовок==

Заголовок

Или выделить текст заголовка и нажать кнопку «Раздел» на панели инструментов
Создание заголовка подраздела Обрамить текст заголовка тройными «равно» ===Заголовок подраздела===

Заголовок подраздела

Или выделить текст заголовка и нажать кнопку «Подраздел» на панели инструментов
Создание сноски Там, где должна быть цифра сноски, поместить ее текст, обрамленный квадратными скобками. Нумерация сносок будет сделана автоматически Отверзлись вещие [1] зеницы [2] Отверзлись вещие [1] зеницы [2]

А в конце статьи появятся под горизонтальной чертой сноски:

[1] пророческие

[2] глаза, очи

Или в требуемом месте нажать кнопку, появится [3], далее заменить слово «сноска» на требуемый текст
Или выделить текст, который Вы хотите убрать в сноску и нажать кнопку «Сноска» на панели инструментов.
Создание отступа Поставить в начале строки двоеточие :текст
::текст
:текст

текст

текст

Отступ действует на весь абзац до ближайшей пустой строки.
Включение в текст иллюстрации В любом месте абзаца (или перед ним), к которому нужна иллюстация, написать ее номер, обрамленный символами «@» (собачка). Номер иллюстрации присваивается ей автоматически при добавлении. @[email protected]
Храм Христа Спасителя
Иллюстация автоматически становится справа абзаца, размеры автоматические (и она же является ссылкой на оригинал). Никакие параметры пользователем не задаются.
Включение в текст видео К тексту можно добавлять видеофрагменты, размещенные на сайтах youtube и vimeo. Для этого в текст добавляется команда в двойных фикурных скобках youtube:код или vimeo:код, где код — идентификатор видеоролика. { {youtube:5QGxev2Bz3k} }
{ {vimeo:6617352} }
Будет вставлен видеофрагмент Код видеоролика можно подсмотреть в адресной строке при просмотре видео на youtube,
например: youtube. com/watch?v=5QGxev2Bz3k, vimeo.com/6617352

В географический статьях и в статьях о храмах и монастырях есть возможность показать описываемый объект на Яндекс- и Google-картах. См. Разметка карт

Особенности вставки текстов с направлением справа налево

При вставке в статью текстов на языках с письменностью справа налево (арабский, иврит и др.) браузер самостоятельно определяет требуемое направление текста и отображает этот текст правильно. Однако если к этому тексту примыкают нейтральные с точки зрения направления символы (цифры, знаки пунктуации), порядок их отображения может также измениться, в соответствии с правилами написания справа налево, т.к. браузер сочтет их частью вставленного текста. Чтобы этого избежать, нужно вставить разделитель между текстом с написанием справа налево и продолжением, которое должно отображаться слева направо. Этим разделителем может быть буква или слово из кириллического или латинского алфавита, либо специальная последовательность &lrm; Эта последовательность создает невидимый символ, который подскажет браузеру, что со следующего за ним нейтрального символа начинается текст с направлением слева направо.

См. также Помощь, Памятка участника, Типовые ошибки



[1]  пророческие

[2]  глаза, очи

[3]  сноска

Редакция текста от: 24.04.2018 21:22:20

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

«РАЗМЕТКА ТЕКСТА» еще можно поискать:

полнотекстовый поиск в Древе: Яндекс — Google
в других энциклопедиях: Яндекс — Википедия — Mail.ru —
в поисковых системах: Искомое.ru — Яндекс — Google

Обычный текст – Мопс

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

В обычном тексте по-прежнему используется интерполяция тегов и строк, но первое слово в строке не является тегом Pug. А поскольку обычный текст не экранируется, вы также можете включить буквальный HTML.

Одной из распространенных ошибок здесь является управление пробелами в отображаемом HTML. Мы поговорим об этом в конце этой страницы.

Встроенный в тег

Самый простой способ добавить обычный текст — встроенный . Первый термин в строке — это сам тег. Все, что находится после тега и одного пробела, будет текстовым содержимым этого тега. Это наиболее полезно, когда содержимое простого текста короткое (или если вы не возражаете против длинных строк).

p Это обычный старый текстовый контент.

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

Буквальный HTML

Целые строки также рассматриваются как обычный текст, если они начинаются с левой угловой скобки ( < ), что иногда может быть полезно для написания буквальных тегов HTML в местах, которые в противном случае были бы неудобны. Например, одним из вариантов использования являются условные комментарии. Поскольку буквальные теги HTML не обрабатываются, они не закрываются автоматически, в отличие от тегов Pug.

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

<тело>

Отступ тега body здесь не имеет значения.

HTML сам по себе не чувствителен к пробелам.

Переданный текст

Еще один способ добавить в шаблоны обычный текст — поставить перед строкой символ вертикальной черты ( | ). Этот метод полезен для смешивания простого текста со встроенными тегами, как мы обсудим позже, в разделе «Управление пробелами».

р | Труба всегда идет в начале своей линии, | не считая отступов.

Труба всегда идет в начале своей линии, без учета отступа.

Блок в теге

Часто вам могут понадобиться большие блоки текста внутри тега. Хорошим примером является написание кода JavaScript и CSS в тегах script и style . Для этого просто добавьте . сразу после имени тега или после закрывающей скобки, если тег имеет атрибуты.

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

Скрипт

. если (используя мопса) console.log(‘ты классный’) еще console.log(‘использовать мопса’)

<скрипт> если (используя мопса) console.log(‘ты классный’) еще console.log(‘использовать мопса’)

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

дел. p Этот текст принадлежит тегу абзаца. бр . Этот текст принадлежит тегу div.

<дел>

Этот текст принадлежит тегу абзаца.


Этот текст принадлежит тегу div.

Управление пробелами

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

Вам просто нужно помнить два основных момента о том, как работают пробелы. При компиляции в HTML:

  1. Pug удаляет отступ и все пробелы между элементами .
    • Таким образом, закрывающий тег HTML-элемента будет касаться открывающего тега следующего. Как правило, это не проблема для блочных элементов, таких как абзацы, потому что они по-прежнему будут отображаться как отдельные абзацы в веб-браузере (если только вы не изменили их CSS 9).0023 отображает свойство ). Однако см. методы, описанные ниже, когда вам нужно вставить пробел между элементами.
  2. Pug сохраняет пробела в пределах элементов, в том числе:
    • все пробелы в середине строки текста.
    • начальный пробел за отступом блока.
    • завершающий пробел.
    • разрывов строк в текстовом блоке или между последовательными строками.

Итак… Pug удаляет пробелы между тегами, но оставляет пробелы внутри них. Ценность здесь в том, что он дает вам полный контроль над тем, должны ли теги и/или обычный текст соприкасаться. Он даже позволяет размещать теги в середине слов.

| Вы положили их эм пха | сестрёнка ошиблась эм ля | бле.

Вы поставили ударение не на тот слог.

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

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

a …предложение, заканчивающееся ссылкой | .

…предложение, заканчивающееся ссылкой.

Если вам нужно добавить пробел , у вас есть несколько вариантов:

Рекомендуемые решения

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

| Не | кнопка # самоуничтожение сенсорный | | мне!

Не мне!

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

р. Использование обычных тегов может помочь сделать ваши строки короткими, но интерполированные теги могут быть проще для #[em visualize] разделены ли теги и текст пробелами.

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

Не рекомендуется

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

ОБРАТИТЕ ВНИМАНИЕ на начальные и конечные пробелы здесь:

| Эй, зацени a(href=»http://example.biz/kitteh.png») это изображение | моего кота!

Эй, посмотрите на эту фотографию моего кота!

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

Абзацы HTML и разрывы строк

Реклама

В этом уроке вы узнаете, как создавать абзацы в HTML.

Создание абзацев

Элемент абзаца используется для публикации текста на веб-страницах.

Абзацы определяются тегом

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

Пример
Попробуйте этот код »
 

Это абзац.

Это еще один абзац.

Примечание. Встроенные таблицы стилей браузеров автоматически создают некоторое пространство над и под содержимым абзаца (называемое полем), но вы можете переопределить его с помощью CSS.


Закрытие элемента абзаца

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

Пример
Попробуйте этот код »
 

Это абзац.

Это другой абзац.

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

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


Создание разрывов строк

Тег
используется для вставки разрыва строки на веб-странице.

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

Пример
Попробуйте этот код »
 

Это абзац
с разрывом строки.

Это
еще один абзац
с разрывами строк.

Примечание: Не используйте пустой абзац, т. е.

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


Создание горизонтальных линий

Вы можете использовать тег


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

Пример
Попробуйте этот код »
 

Это абзац.

<час>

Это другой абзац.


Управление пробелами

Обычно браузер отображает несколько пробелов, созданных внутри HTML-кода, нажатием клавиши пробела или клавиши табуляции на клавиатуре как единое пространство. Множественные разрывы строк, созданные внутри HTML-кода при нажатии клавиши ввода, также отображаются как один пробел.

Следующие абзацы будут отображаться в одну строку без дополнительного пробела:

Пример
Попробуйте этот код »
 

В исходном коде этот абзац содержит несколько пробелов.

<р> Этот абзац содержит несколько вкладок и разрывов строк в исходном коде.

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

Пример
Попробуйте этот код »
 

В этом абзаце несколько пробелов.

Этот абзац имеет несколько

строк


разрывов.


Определение предварительно отформатированного текста

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

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

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

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