C, PHP, VB, .NET

Дневникът на Филип Петров


* Преформатиране, код и цитати

Публикувано на 02 септември 2009 в раздел ХHTML.

Сега ще демонстрираме три допълнителни тага, които можем да използваме в XHTML 1.1 с цел форматиране на текст. Повечето хора ги смятат за наследство от миналото, което вече не се използва. Въпреки това смятам, че заслужават внимание.

1. Преформатиран текст – осъществява се чрез таг<pre>. Използва се за изкарване на екрана на обикновен текст. Така например няма нужда да слагаме <br /> за нов ред, табулациите се визуализират и поредните интервали нямат нужда от &nbsp;. Обикновено се използва когато искаме да отпечатаме текстов файл на екрана. Въпреки това трябва да се внимава със символите < и > – в таг <pre> е позволено да отваряме други тагове. Ето пример:

<pre>Това е пример за текст

който ще изведе на екрана всичко по начина,
по който го напишем като свободен текст!
Виждате, че няма нужда от &lt;br /&gt; за нов ред.

Трябва да знаете, че таговете се взимат под внимание.
Ето например <b>удебелен текст</b>
</pre>

Резултат:

Това е пример за текст

който ще изведе на екрана всичко по начина,
по който го напишем като свободен текст!
Виждате, че няма нужда от <br /> за нов ред.

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

Виждате, че аз използвам именно таг <pre> за демонстриране на код. Ако не предефинирате стила – стандартно браузърите визуализират текста с monospace шрифт.

2. Таг <code> – на практика „орязана версия“ на таг <pre>. По дефиниция това би трябвало да бъде таг, който се използва за демонстриране на фрагменти от програмен код. Той има същата визуализация като таг <pre> с тази разлика, че всички интервали се „отрязват“, новият ред не се визуализира и табулациите също не се визуализират. Досещате се, че това е по същия начин както това става в нормалния XHTML код. Така всъщност таг <code> е еквивалентен на обикновен параграф, чийто стил е променен с шрифт monospace. Поради тази причина практически никой не използва таг <code>. Пример:

<div><code>Това е пример за текст

форматиран с таг &lt;code&gt;..
Няма никаква разлика от писането на обикновен HTML код!
Ето например <b>удебелен текст</b>
</code></div>

Резултат:

Това е пример за текст форматиран с таг <code>.. Няма никаква разлика от писането на обикновен HTML код! Ето например удебелен текст

Виждате също, че е задължително да вмъкваме <code> вътре в друг форматиращ таг – параграф или поле. Затова <code> е може би удобен за вмъкване на наистина малки фрагменти код. Лично аз бих го използвал за ключови думи и термини.

3. Цитати: Таг <blockquote> е измислен за случаи когато желаем да вмъкваме цитати. Отново бих казал, че въобще не е популярен при писането на стандартен HTML код. Често обаче получава употреба при редица WYSIWYG редактори. При blockquote специфичното е, че текстът се форматира малко по-навътре. На практика той не е нищо по-различно от таг <code>, но вмъкнат по-навътре спрямо текста:

<p>Пример за цитат:
</p>

<blockquote><div>Това е някакъв 

цитат. Таговете работят. Пример за <b>удебелен текст</b>
</div></blockquote>

Резултат:

Пример за цитат:

Това е някакъв цитат. Таговете работят. Пример за удебелен текст

Виждате и друга особеност – трябва да дефинирате параграф или поле вътре в таг <blockquote> (специфична и досадна особеност на XHTML). Сивата вертикална черта в блога е постигната чрез допълнително преформатиране чрез CSS. Много софтуерни продукти като блогове и форуми предефинират blockquote така, че да е еквивалентен на таг <pre>, но вмъкнат навътре с линия подобна на тази от примера горе.

 



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

Адресът на електронната поща няма да се публикува


*