* Форматиране на текст
Публикувано на 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>
Ето как ще изглежда тази страница в браузър:
Отсега нататък ще си спестяваме стандартния код като DOCTYPE, head, title и body. Ще даваме примери само с тагове вътре в body. Заглавията изброени по-горе трябва да са поредни. Това означава, че винаги трябва да имаме <h1> преди <h2> и т.н. Всъщност въпросната „големина“ на заглавието е такава само по подразбиране. По нататък ще разберете как лесно можем да преформатираме шрифта и неговата големина на всеки един такъв таг.
Още в самото начало на писането на XHTML код, човек се сблъсква с нещо, което не е стандартно и интуитивно. Появява се проблем при въвеждането на нов ред. В XHTML натискането на клавиш Enter вътре в текста НЕ прави нов ред. Ето един пример:
<p>Пример, че когато се натисне клавиш Enter всъщност не се отива на нов ред. Вместо това трябва да се използва специален таг!</p>
Ако отворим този документ в браузъра ще видим следното:
Виждате, че Enter всъщност се превръща в интервал. Текстът отива на нов ред само ако достигне края на полето на браузъра. За да преминем действително на нов ред трябва да използваме таг за нов ред <br />:
<p>Пример,<br />че когато<br />се натисне<br />клавиш<br /> Enter всъщност<br />не се отива<br />на нов ред.<br />Вместо това<br /> трябва да се<br />използва специален<br />таг!</p>
Ще видим, че навсякъде, където сме написали таг <br /> текстът е отишъл на нов ред:
Друг проблем при писането на текст идва от интервалите. Например следния код:
<p>Интервалите не се визуализират</p>
ще се бъде видяно в браузър така:
Трябва да запомните, че независимо колко интервала сложите – ще се визуализира само един. Ако имате нужда да вмъкнете повече интервали, то трябва да използвате специалния символ . Той е съкращение от „non-breaking space“ и указва на браузъра, че на това място ще има интервал. Ето как бихме написали горния пример:
<p>Интервалите не се визуализират</p>
Резултатът ще бъде:
Както виждате обаче кодът изглежда по доста неприятен за четене начин. Има други начини за справяне с проблема, но за тях ще говорим по-късно.
В този смисъл някои от вас ще се досетят за още един потенциален проблем. Как да визуализираме знаците „<“ или „>“? Това е често срещана грешка при писане на XHTML код – всъщност тези знаци отварят и затварят дефинициите на тагове. Така браузъра няма как да знае дали отваряме таг или искаме да се визуализира просто символ. Затова вместо < трябва да пишем < и вместо > трябва да пишем > (които отново от английски са съкращение от „lower than“ и „greater than“). Ето ви пълна таблица със специалните символи:
| Символи и пунктуации | HTML код | ISO Latin-1 код | Значение |
|---|---|---|---|
| – | – | – | Късо тире |
| — | — | — | Дълго тире |
| ¡ | ¡ | ¡ | Обърната удивителна |
| ¿ | ¿ | ¿ | Обърната въпросителна |
| „ | " | " | Стандартни кавички |
| “ | “ | “ | Леви кавички |
| ” | ” | ” | Десни канички |
| ‘ | ‘ | ‘ | Лява единична кавичка |
| ’ | ’ | ’ | Дясна единична кавичка |
| « | « | « | Европейска лява кавичка |
| » | » | » | Европейска дясна кавичка |
(интервал) |
|   | Интервал |
| & | & | & | Аперсанд |
| ¢ | ¢ | ¢ | Цент |
| © | © | © | Запазена марка |
| ÷ | ÷ | ÷ | Деление |
| > | > | > | По-голямо |
| < | < | < | По-малко |
| µ | µ | µ | Микрон |
| · | · | · | Точка в средата |
| ¶ | ¶ | ¶ | Параграф |
| ± | ± | ± | Плюс/минус |
| € | € | € | Евро |
| £ | £ | £ | Лира стерлинг |
| ® | ® | ® | Регистриран |
| § | § | § | Секция |
| ™ | ™ | ™ | Търговска марка |
| ¥ | ¥ | ¥ | Японска йена |
Няма никаква разлика между това да използвате 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 страница с текст. В следващи статии ще покажем как се съставят таблици, номерирани листове, как се добавят картинки и т.н.
Разликата между елементите h1 до h6 не е в големината на текста, а в тяхното значение. Както и (почти) всички други елементи в HTML, заглавните елементи носят конкретна информация за значението на текста в тях. H1 е основното заглавие на докуманта, според HTML4.01 в документа може да има само един h1 таг, HTML5 допуска различните секции да имат свои h1 тагове. H2 е заглавието на подсекция от документа, едно ниво под основната, и т.н.. Така заглавните елементи изграждат йерархията на документа. HTML стандарта казва, че не трябва да се пропускат нива и йерархията винаги трябва да започва с h1.
Не мога да кажа, че не си прав – естествено, че си. Въпросът е, че практиката показва друго. Трудно е да се обясни тази иерархия на ученици, особено когато реалните страници изключително рядко я спазват. Затова реших да го спестя като информация. Неслучайно в задаващия се XHTML2 таговете h1…h6 са на път да бъдат премахнати и заместени от section.
Все пак – приемам забележката и ще редактирам статията с допълнителна информация възможно най-скоро.
Май си пропуснал, че XHTML2 няма скоро да се превърне в стандарт. Преди месец от W3C обявиха, че работната група, която работи по XHTML2 ще спре да съществува до края на годината и усилията ще бъдат насочени към HTML5. А и h1 – h6 в XHTML2 май бяха заменени от h елемент. section служи за разграничаване на различни части от сайта.
ОК – ти си специалистът.