Как сделать листинг html

Добавил пользователь Евгений Кузнецов
Обновлено: 10.09.2024

Решение, которое подходит для вывода мнемоник, не применимо для случаев вывода листингов с html-кодом. У задачи появляются новые особенности.

После открывающего тэга и перед закрывающим могут идти пробельные символы. Паттерн @ (.*?)code>@ не учитывает этот момент.
Листинг содержит несколько строк кода и это разбиение на строки нужно сохранить.

Этапы поиска решения

1. Составить хороший пример, иллюстрирующий все тонкие моменты.

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

Закрывающий тэг на одной строке с теми, что надо экранировать. Нет вложенных тэгов, но есть следующие друг за другом.

2. Функция htmlentities(), увы, не вполне подходит. Нам нужна замена всего двух символов: на < и & на & . Создадим свою функцию, которая будет выполнять эту задачу.

function changesymbols ($somecontent)

preg_match_all("@\&@",$somecontent,$smatches); //собираем массив вхождений амперсанда
$nums=sizeof($smatches[0]); //считаем количество амперсандов в тексте
$somecontent=preg_replace("@\&@","&",$somecontent,$nums); //производим замену в $somecontent несколько раз, а именно $nums раз

preg_match_all("@\
$nums=sizeof($fmatches[0]);
$somecontent=preg_replace("@\

3. Выполняем замену с сохранением разбиения по строкам.

Посчитаем число отрывков исходного кода для экранирования.

Создадим цикл с нужным числом итераций.

Внутри цикла проверяем условие.

if ( preg_match(" de html>(.*?) de>@s", $content, $matches)>0 ) <>

Здесь паттерн @ (.*?) @s позволяет найти и те случаи, когда после открывающего тэга или перед закрывающим идёт пробельный символ. Можно было бы его записать ещё так: @(?| | \s)(.*?)(?| |\s )@

Далее перезаписываем вначале каждой итерации значение переменных: $difflines=''; $resultcode='';

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

Считаем количество строк.

Производим замену символов в каждой строке по отдельности, а потом измененную строку прибавляем конкатенацией к результирующей переменной $resultcode .

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

Для WordPress нужно отключить функцию автоматического добавления абзацев, чтобы функция работала корректно. Результат для WordPress выглядит так:

remove_filter('the_cont ent', 'wpautop');
function true_code ($con tent) <
if ( is_single() ) <
$iteration=substr_count($content, "

function changesymbols ($somecontent) <
preg_match_all("@\&@",$somecontent,$smatches);
$nums=sizeof($smatches[0]);
$somecontent=preg_replace("@\&@","&",$somecontent,$nums);

preg_match_all("@\<@",$somecontent,$fmatches);
$nums=sizeof($fmatches[0]);
$somecontent=preg_replace("@\

$content=preg_replace("@ (.*?) @s", " ".$resultcode." ", $content, 1);
>;
>;
return $content;
> else return $content;
>;
add_filter('the_content', 'true_code');

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

HTML (Hypertext Markup Language) - это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.

Что такое HTML на самом деле?

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

Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:

Анатомия HTML элемента

Давайте рассмотрим элемент абзаца более подробно.

Главными частями нашего элемента являются:

Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, "p"), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
Контент (Content): Это контент элемента, который в данном случае является просто текстом.
Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.

Элементы также могут иметь атрибуты, которые выглядят так:

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

Атрибут всегда должен иметь:

Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
Имя атрибута, за которым следует знак равенства.
Значение атрибута, заключённое с двух сторон в кавычки.

Вложенные элементы

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

Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент

. Приведённое ниже неверно:

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

Пустые элементы

Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент , который уже имеется в нашем HTML:

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

Как мы уже знаем, любой документ HTML состоит из трех частей:

Строки, содержащей информацию о версии XHTML или HTML
Блока заголовка документа
Тела документа, содержащего либо непосредственно отображаемую информацию, либо определяющего набор фреймов.

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

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

Информация о версии – !DOCTYPE

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

Дополнительно для документов HTML рекомендуется, а для XHTML – требуется указывать файл, содержащий DTD – document type definition (определение типа документа) для данного типа документа:

ВНИМАНИЕ
Если вы указываете в заголовке тип документа, то уж постарайтесь при дальнейшем его создании как можно более жестко придерживаться указанного типа.

У современных браузеров, включая даже MSIE 6, одна и та же страница, с определением DOCTYPE и без такового, в ряде случаев может выводиться по-разному. Более того, все версии Firefox и Chrome, а так же Opera и MSIE 7 и выше реагирует и на то, какой именно вариант HTML или XHTML указан – Strict или Transitional.

Свойства тэга !doctype

Атрибуты: нет.
Закрывающий тег: нет.
Совместимость: все.
Вложение: недопустимо (пустой элемент).

ПРИМЕЧАНИЕ
Пустым элементом является элемент, ничего не содержащий между открывающим и закрывающим тегами, или же попросту не имеющий закрывающего тега в HTML.

Элемент HTML

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

Таблица 2.1. Атрибуты элемента HTML

Атрибут	Примечание	Описание
version	Устаревший	Указывает версию HTML. Используйте !DOCTYPE.
xmlns	Только в XHTML	Определяет пространство имен для XHTML
lang	Общий	Информация о (человеческом) языке документа
dir	Общий	Определяет направление текста в документе

Листинг 2.1. Элемент HTML

. Заголовок и тело документа распложены здесь.

Свойства тэга HTML

Закрывающий и открывающий теги: опционально.
Совместимость: все.
Вложение: недопустимо.
Уникальный: да.

Элемент HEAD

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

Таблица 2.2. Атрибуты элемента HEAD

Атрибут	Примечание	Описание
profile	-	Указывает расположение одного или нескольких разделенных пробелом профайлов, содержащих определения META.
lang	Общий	Информация о языке заголовка документа
dir	Общий	Определяет направление текста в заголовке документа

Листинг 2.2. Элемент HEAD

Свойства тэга HEAD

Закрывающий и открывающий теги: опционально.
Совместимость: все.
Вложение: недопустимо.
Уникальный: да.

Атрибуты LANG и DIR

Мы только начали знакомиться с элементами HTML, но уже можем заметить, что некоторые их атрибуты повторяются. В частности, к таковым относятся LANG и DIR, которые определены для всех элементов, с помощью которых можно вывести какой-либо текст, иными словами – для всех элементов, кроме APPLET, BASE, BASEFONT, BDO, BR, FRAME, FRAMESET, HR, IFRAME, PARAM и SCRIPT.

Оба этих атрибута были введены в HTML 4.0 с целью улучшения поддержки интернационализации. Так, атрибут DIR служит для определения направления вывода текста и может принимать следующие значения:

LTR – выводить текст или данные таблицы слева направо (по умолчанию)
RTL – выводить текст или данные таблицы справа налево.

ВНИМАНИЕ
В XHTML 1.1 вместо атрибута LANG следует использовать атрибут XML:LANG.

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

ПРИМЕЧАНИЕ
На самом деле, в HTML 4, кроме этих двух атрибутов, имеется еще и специальный элемент – BDO, отвечающий за вывод разнонаправленного текста. Но, поскольку, для русского (и всех европейских) языков это не актуально, данная тема останется за рамками настоящего издания.

Элемент TITLE и атрибут TITLE

Каждый действительный документ HTML или XHTML должен иметь элемент TITLE в части HEAD. Этот элемент используется для определения содержания документа. Большинство браузеров (в частности, все рассматриваемые нами в этой книге браузеры) отображают строку, размещенную внутри элемента TITLE в качестве заголовка окна. Хотя явных ограничений на длину текста не имеется, реально следует уложиться не более чем в 40–50 символами.

Моя главная страница

Таблица 2.3. Атрибуты элемента TITLE

Атрибут	Примечание	Описание
lang	Общий	Информация о языке текста внутри элемента
dir	Общий	Определяет направление текста внутри элемента

Свойства TITLE

Закрывающий тег (для элемента TITLE): требуется.
Совместимость: элемент TITLE – все, атрибут TITLE – все.
Вложение (для элемента TITLE): недопустимо.
Уникальный (для элемента TITLE): да.

Элемент META

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

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

Author – автор документа
Copyright – информация об авторском праве
Description – описание документа (для поисковых машин)
Generator – название программы, с помощью которой создавался документ
Keywords – ключевые слова (для поисковых машин)

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

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

Refresh – данное свойство поддерживается большинством браузеров и заставляет их перегружать документ по истечении интервала времени, указанного в секундах.
Expires – указывает дату, после которой документ становится устаревшим. Заставляет браузер явно загрузить документ из сети, а не из кэша.
Content-type – указывает на тип файла
Content-style-type – указывает на тип применяемых таблиц стилей
Content-script-type – указывает на применяемый по умолчанию язык сценариев

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

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

Если выставить уже прошедшую дату (как в примере), то документ всегда будет загружаться непосредственно из сети.

Свойства META

Закрывающий тег: только для XHTML.
Совместимость: все.
Вложение: недопустимо (пустой элемент).
Уникальный: нет.

Элемент BODY

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

Введение
От главы коллектива авторов
От издательства
Глава 1. Правила построения HTML-страниц
Глава 2. Ввод и оформление текста
Глава 3. Создание таблиц
Глава 4. Добавление изображений и мультимедиа

Приведённый ознакомительный фрагмент книги HTML, XHTML и CSS на 100% предоставлен нашим книжным партнёром — компанией ЛитРес.

Ввод и оформление текста

2.1. Создание заголовков

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

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

2.4. Создание списков

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

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

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

2.1. Создание заголовков

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

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

Заголовки создаются с помощью элементов H1, H2, H3, H4, H5, H6. По умолчанию заголовок самого верхнего уровня выделяется самым крупным шрифтом, и чем ниже уровень заголовка, тем меньше шрифт.

Для заголовка любого уровня можно задать выравнивание по горизонтали. Это делается с помощью атрибута align.

Значения атрибута align:

• left — по левому краю;

• right — по правому краю;

• center — по центру;

• justify — по ширине (только для заголовков длиннее строки).

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

В листинге 2.1 представлен пример кода для создания разных типов заголовков и для их различного выравнивания.

Читайте также: