C, PHP, VB, .NET

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


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

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

Както вече отбелязахме в предишната статия, текста в XHTML се форматира главно чрез параграфи, които се означават с таг <p>. Освен това съществуват и стандартни "заглавия" (headings). Заглавията се означават с тагове <h1>, <h2>, ... <h6>, като разликата между тях е в големината на шрифта. Ето един пример:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="bg">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<title>Моята втора XHTML страница</title>
	</head>
	<body>
		<h1>Заглавие с големина 1</h1>
		<h2>Заглавие с големина 2</h2>
		<h3>Заглавие с големина 3</h3>
		<h4>Заглавие с големина 4</h4>
		<h5>Заглавие с големина 5</h5>
		<h6>Заглавие с големина 6</h6>
		<p>Първи параграф!</p>
		<p>Втори параграф</p>
	</body>
</html>

Ето как ще изглежда тази страница в браузър:

Примерна XHTML страница

Отсега нататък ще си спестяваме стандартния код като DOCTYPE, head, title и body. Ще даваме примери само с тагове вътре в body. Заглавията изброени по-горе трябва да са поредни. Това означава, че винаги трябва да имаме <h1> преди <h2> и т.н. Всъщност въпросната "големина" на заглавието е такава само по подразбиране. По нататък ще разберете как лесно можем да преформатираме шрифта и неговата големина на всеки един такъв таг.

Още в самото начало на писането на XHTML код, човек се сблъсква с нещо, което не е стандартно и интуитивно. Появява се проблем при въвеждането на нов ред. В XHTML натискането на клавиш Enter вътре в текста НЕ прави нов ред. Ето един пример:

<p>Пример,
че когато
се натисне
клавиш
Enter всъщност
не се отива
на нов ред.
Вместо това
трябва да се
използва специален
таг!</p>

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

Примерна XHTML страница

Виждате, че Enter всъщност се превръща в интервал. Текстът отива на нов ред само ако достигне края на полето на браузъра. За да преминем действително на нов ред трябва да използваме таг за нов ред <br />:

<p>Пример,<br />че когато<br />се натисне<br />клавиш<br />
Enter всъщност<br />не се отива<br />на нов ред.<br />Вместо това<br />
трябва да се<br />използва специален<br />таг!</p>

Ще видим, че навсякъде, където сме написали таг <br /> текстът е отишъл на нов ред:

Примерна XHTML страница

Друг проблем при писането на текст идва от интервалите. Например следния код:

<p>Интервалите         не         се        визуализират</p>

ще се бъде видяно в браузър така:

Много интервали се визуализират като един

Трябва да запомните, че независимо колко интервала сложите - ще се визуализира само един. Ако имате нужда да вмъкнете повече интервали, то трябва да използвате специалния символ &nbsp;. Той е съкращение от "non-breaking space" и указва на браузъра, че на това място ще има интервал. Ето как бихме написали горния пример:

<p>Интервалите&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
не&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;се&nbsp;&nbsp;&nbsp;
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;визуализират</p>

Резултатът ще бъде:

non-blocking space в XHTML

Както виждате обаче кодът изглежда по доста неприятен за четене начин. Има други начини за справяне с проблема, но за тях ще говорим по-късно.

В този смисъл някои от вас ще се досетят за още един потенциален проблем. Как да визуализираме знаците "<" или ">"? Това е често срещана грешка при писане на XHTML код - всъщност тези знаци отварят и затварят дефинициите на тагове. Така браузъра няма как да знае дали отваряме таг или искаме да се визуализира просто символ. Затова вместо < трябва да пишем &lt; и вместо > трябва да пишем &gt; (които отново от английски са съкращение от "lower than" и "greater than"). Ето ви пълна таблица със специалните символи:

Символи и пунктуации HTML код ISO Latin-1 код Значение
&ndash; &#8211; Късо тире
&mdash; &#8212; Дълго тире
¡ &iexcl; &#161; Обърната удивителна
¿ &iquest; &#191; Обърната въпросителна
" &quot; &#34; Стандартни кавички
&ldquo; &#8220; Леви кавички
&rdquo; &#8221; Десни канички
&lsquo; &#8216; Лява единична кавичка
&rsquo; &#8217; Дясна единична кавичка
« &laquo; &#171; Европейска лява кавичка
» &raquo; &#187; Европейска дясна кавичка

(интервал)
&nbsp; &#160; Интервал
& &amp; &#38; Аперсанд
¢ &cent; &#162; Цент
© &copy; &#169; Запазена марка
÷ &divide; &#247; Деление
> &gt; &#62; По-голямо
< &lt; &#60; По-малко
µ &micro; &#181; Микрон
· &middot; &#183; Точка в средата
&para; &#182; Параграф
± &plusmn; &#177; Плюс/минус
&euro; &#8364; Евро
£ &pound; &#163; Лира стерлинг
® &reg; &#174; Регистриран
§ &sect; &#167; Секция
&trade; &#153; Търговска марка
¥ &yen; &#165; Японска йена

Няма никаква разлика между това да използвате HTML или ISO Latin-1 варианта. За по-добра четимост обаче се препоръчва HTML варианта. Има и още специални символи - т.нар. "диакритични знаци" (например немските букви с двуеточия и ударения). Те обаче са много рядко използвани в нашия език и затова няма да ги изброяваме.

Вече можем да дадем и няколко често използвани XHTML тага при форматиране на текст:

<p><strong>Това е удебелен текст</strong></p>
<p><b>Това също е удебелен текст</b></p>
<p><em>Това е текст в курсив</em></p>
<p>Долен индекс се прави така: X<sub>n</sub></p>
<p>Горен индекс се прави така: X<sup>n</sup></p>
<p>При корекции <del>задраскваме</del> и <ins>вмъкваме</ins></p>
<p><big>Това е уголемен текст</big></p>
<p><small>Това е намален текст</small></p>

Ето как ще изглеждат:

Примери за форматиране на текст в XHTML

Разликите между двата типа удебеляване и курсив ще ги обясним по-късно, когато покажем какво означава "стилове". Засега горните познания ще са ви достатъчни, за да можете да форматирате елементарна XHTML страница с текст. В следващи статии ще покажем как се съставят таблици, номерирани листове, как се добавят картинки и т.н.

 



4 коментара


  1. Разликата между елементите h1 до h6 не е в големината на текста, а в тяхното значение. Както и (почти) всички други елементи в HTML, заглавните елементи носят конкретна информация за значението на текста в тях. H1 е основното заглавие на докуманта, според HTML4.01 в документа може да има само един h1 таг, HTML5 допуска различните секции да имат свои h1 тагове. H2 е заглавието на подсекция от документа, едно ниво под основната, и т.н.. Така заглавните елементи изграждат йерархията на документа. HTML стандарта казва, че не трябва да се пропускат нива и йерархията винаги трябва да започва с h1.

  2. Не мога да кажа, че не си прав - естествено, че си. Въпросът е, че практиката показва друго. Трудно е да се обясни тази иерархия на ученици, особено когато реалните страници изключително рядко я спазват. Затова реших да го спестя като информация. Неслучайно в задаващия се XHTML2 таговете h1...h6 са на път да бъдат премахнати и заместени от section.

    Все пак - приемам забележката и ще редактирам статията с допълнителна информация възможно най-скоро.

  3. Май си пропуснал, че XHTML2 няма скоро да се превърне в стандарт. Преди месец от W3C обявиха, че работната група, която работи по XHTML2 ще спре да съществува до края на годината и усилията ще бъдат насочени към HTML5. А и h1 - h6 в XHTML2 май бяха заменени от h елемент. section служи за разграничаване на различни части от сайта.

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

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


*