Уеб уроци и ресурси по HTML,
CSS, CSS3, JavaScript и други

Разделянето на текста на кратки и лесни за четене параграфи е една от основните техники за стилизиране на съдържание. Тя ни е позната много преди появата на Интернет и уеб страниците. Това е една от техниките, която сме взели от книжния печат и успешно сме приложили онлайн.

Случвало ли ти се е да попаднеш на страница, която е прекалено трудна за четене и текста сякаш няма край? В такъв момент просто напускаш или стискаш зъби и се бориш срещу не добре представената информация.

В този урок ще разгледаме как правилно да структураме текста в кратки и лесни за четене параграфи. Също така ще обхванем няколко начина за стилизиране. Накрая ще се постарая да дам няколко практически съвета за работа с параграфи.

Този урок е разделен на следните части:

• Структура на параграф
• Съдържание на параграф
• Стилизиране на параграф
  • Упражнение
• Практически съвети

Структура на параграф

За да добавим параграф в нашата уеб страница е нужно да използваме HTML елемента <p>. Този елемент е блоков, което значи че ширината му ще бъде равна на ширината на родителския елемент. Повече информация за блоковите елементи можеш да откриеш в урока Разлики между block и inline елементи.

Друга важна характеристика е, че този елемент идва под формата на двойка отварящ и затварящ таг. Отварящия таг (<p>) маркира началото на параграфа, докато затварящия (</p>) маркира края. Всичко, което се намира между тези два тага се счита за съдържание на параграфа. Виж следващата снимка:

Съдържание на параграф

Както вече знаем параграфа е блоков елемент, което означава че не може да съдържа други блокови елементи. От друга страна, освен текст, параграфа може да съдържа инлайн (inline) елементи.

Най-често използваните инлайн елементи като част от параграф са:

• <img /> - изображение;
• <a> - линк;
• <strong> - удебеляване на дума или изречение;
• <em> - курсив (наклонен) шрифт за наблягане върху дума или изречение;
• <br /> - изкуствено добавяне на нов ред

В работния файл към урока Разлики между block и inline елементи има таблица, в която съм включил най-често използваните блокови и инлайн елементи. Препоръчвам ти да я разгледаш, за да придобиеш представа кои други инлайн елементи можеш да използваш като част от параграф.

Стилизиране на параграф

В повечето случаи параграфите, които създаваме (било то с текст, изображения, линкове и т.н.) трябва да се вписват в цялостния дизайн на сайта. За да променим стила им можем да използваме различни похвати като например използване на <strong> винаги, когато искаме част от текста да бъде удебелен. Тази практика се използва, за да насочим вниманието на читателя върху ключова дума или израз от текста.

С помоща на CSS можем да променим други характеристики, които да улеснят посетителя в по-бързото и лесно възприемане на информацията. Това може да включва промяна на размера на текста, шрифта, разстоянието между думите и редовете, цвят на текста, достатъчно добър контраст с фона, дължина на реда и други.

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

Също така, достатъчното разстояние между редовете позволява на текста да “диша”, което ни улеснява в намирането на желаната информация.

Както виждаш ролята на уеб дизайнера вече не е просто да създава уеб страници, а да предостави изживяване, което е съобразено с характеристиките на посетителя.

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

Упражнение

Тук ще се фокусираме върху работата на параграфа и начините, чрез които можем да подобрим визуалното му представяне. Няма да навлизам в детайли за всяко CSS свойство, което ще използвам. Всички тях ще ги разгледаме в уроците по CSS.

Стъпка 1

Първо трябва да имаме текст, с който да работим. Избрах да използвам част от разказа на Йордан Йовков “Песента на колелетата“. Нека вземем само първите два абзаца. Не е нужно да използваме целия разказ, защото принципа на работа е общо взето един и същ.

Добра идея е преди да започнем с дадена задачка да си изградим план на действие, към който да се придържаме. Моя план е следния:

В началото на нашата страница ще сложа h1 заглавие, което ще съдържа името на произведението. След това ще добавя h4 заглавие с името на автора. Веднага след него ще използвам параграф, в който ще поставя средно по размер изображение. След изображението ще създам два нови параграфа, в които ще поставя двата текстови абзаца. Накрая ще завърша с нов параграф, който ще съдържа линк към цялото произведение.

Представено визуално това ще изглежда така:

Стъпка 2

Плана и структурата на страницата изглеждат наистина добре. Преобразувано в HTML това ще изглежда по следния начин:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; 
			charset=utf-8" />
		<title>YouDevelop.net - Работа с параграфи</title> 
	</head>
	<body>
		<h1>Песента на колелетата</h1>
		<h4>Автор: Йордан Йовков</h4>
		<p><img src="cart-wheel.jpg" alt="Колело от каруца" /></p>
		<p>Славата на Сали Яшар, ... нагорещено желязо или само с няколко 
		думи връщат живота на много умиращи.</p>
		<p>Сали Яшар наистина имаше нещо, което го оприличаваше на тия хора. 
		...  но имаше вид на мъдрец и неволно вдъхваше уважение дори и на ония, 
        които не го познаваха и нищо не знаеха за изкуството на ръката му.</p>
		<p><a href="" title="">Прочети целия разказ</a></p>
	</body>
</html>

В първия параграф имаме снимка. Това е напълно разрешено, защото <img> елемента е инлайн, а по-нагоре научи, че блоковите елементи (какъвто е <p>) може да съдържа инлайн елементи.

В урока Работа с изображения - <img /> подробно описах начините на работа с изображения и задължителните атрибути, които трябва да използваме. Няма да се спирам отново върху това. Ако нещо не ти е ясно и се затрудняваш, по-добре първо прегледай този урок.

Следващите два параграфа са изцяло текстови. С тях ще работим след малко.

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

Единственото, което трябва да знаеш за сега е, че линковете (елемента <a>) са инлайн елементи, затова без проблем могат да бъдат част от параграф.

Стъпка 3

Нека запазим html документа, който създадохме и видим резултата в браузър.

Дори без да добавяме стил от наша страна, резултата изглежда приемливо. Виждаме, че браузъра показва всеки елемент с определен стил. Например, браузъра добавя разстояние преди и след h1 заглавието, преди и след h4, преди и след параграфа и т.н.

Забележка Винаги, когато не добавим наш CSS стил върху конкретен елемент или страницата, браузъра използва стила зададен му по подразбиране.

Проблема тук е, че страницата е направена без да се взема в предвид посетителя т.е. информацията е тук, но посетителя сам трябва да се адаптира към страницата. Параграфа е блоков елемент затова заема ширината на родителския елемент (в случая това е самата страница). Ако искаме да намалим дължината на редовете, трябва да променим размера на прозореца, което изисква допълнителни усилия.

Това е типичен пример, в който дизайнера може би си мисли “Ок, текста е тук, страницата изглежда горе-долу добре, който иска да прочете разказа, ще намери начин, дори и да му е малко трудничко.”

Представи си сега, че това е единственото място в Интернет, в което можеш да намериш така интересния разказ на Йордан Йовков “Песента на колелетата”. Нужно ли е да се затрудняват толкова много хора, когато няколко допълнителни и лесни за прилагане техники, могат значително да подобрят престоя им? Съвсем не.

Това според мен (а и много други) е разликата между добрия и лошия дизайнер.

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

Ок, обратно към упражнението.

Стъпка 4

Как можем да подобрим страницата по-горе?

Първо, нека намалим дължината на редовете.

За тази цел ще приложим CSS стил чрез външен файл. В урока Прилагане на CSS чрез външен файл подробно описах как става това. Всичко, което трябва да направиш е да създаден нов файл и да го запазиш с разширение “.css”, след което чрез елемента <link /> поставен в <head> раздела на html документа можеш да го приложиш към страницата.

Отвори новосъздадения CSS файл и въведи следния стил:

body {
	font-family:Verdana;
	margin:0px auto;
	width:550px;
}

Запази и виж резултата.

Наистина изглежда много по-добре. При това само с 5 реда код.

Няма да навлизам в детайлно описание на CSS свойствата, защото ще напиша специален урок за всяко от тях. Като селектор тук използвам елемента body, който отговяра за цялата страница. Използвайки свойството font-family успяхме да променим шрифта на Verdana. Декларацията margin: 0px auto; е една от най-често срещаните техники за центриране на елемент. Чрез свойството width променихме размера на страницата на 550px.

Всичко това ни дава една страница, която е 550 пиксела широка и е центрирана в браузъра.

Какво още можем да променим?

Стъпка 5

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

Това също може да се промени много лесно. Веднага след CSS кода, който имаме до сега, добави следното:

...
p  {
	font-size:14px;
	line-height:21px;
}

Тук за селектор използваме елемента <p>. Тъй като няма никакви ограничения, стила ще бъде приложен върху всички <p> елементи намиращи се в страницата.

Свойството font-size ни позволява да променим размера на текста. Използвал съм 14px, което е една добра стойност.

Второто свойство (line-height) е интересно и трябва да му обърнем внимание. То ни позволява да променим разстоянието между редовете. Общоприет стандарт е разстоянието между редовете да бъде 1.5 пъти по-голямо от размера на шрифта. Това придава на текста вид, който е лесен за четене и не натоварва окото. Разбира се има изключения в зависимост от избрания шрифт и т.н., но най-често това е оптималното решение.

Формулата придобива следния вид:

Размер на текста х 1.5 = разстояние между редовете

Приложено на практика получаваме:

14px х 1.5 = 21px

Запази промените и виж резултата.

Текста изглежда много по-естествен и лесен за четене.

Какво друго можем да подобрим?

Стъпка 6

Нека видим как да променим стила на двете заглавия. Първото е h1 и съдържа името на произведението, а второто е h4 и съдържа името на автора.

След CSS кода, който имаме до сега добави следното:

...
h1 {
	text-transform:uppercase;
}
h4 {
	color:gray;
}

Върху h1 заглавието прилагаме свойството text-transform, което ни позволява да преобразуваме текста по различен начин. Стойността uppercase променя целия текст в главни букви.

Върху h4 заглавието прилагаме свойството color, което ни позволява да променим цвета. В случая съм използвал ключовата дума gray.

Резултата е наистина по-добър и ясен. h1 заглавието изглежда масивно и тежи на мястото си, докато h4 заглавието остава леко незабелязано, но придава стил.

Стъпка 7

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

С един от тях вече се запознахме в предишните уроци и това е <strong>. Чрез него можем да удебелим дума или изречение, което искаме ясно да се отличава от останалта част от текста.

Друг елемент е <em> (съкратено от emphasis), който набляга на текста като го прави наклонен.

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

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

За целта в първото изречение на първия текстов абзац ще оградим израза “майстор на каруци” с <em>. В края на това изречение ще добавим нов ред чрез <br />, а първата част на второто изречение (преди запетайката) ще я удебелим чрез <strong>

<p>Славата на Сали Яшар, прочутия <em>майстор на каруци</em> 
от Али Анифе, стигаше вече твърде далеч. <br /><strong>
Такъв майстор като него никога по-рано не беше имало в 
Али Анифе</strong> … </p>

Резултата е следния:

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

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

Това със сигурност не е всичко, което можем да подобрим. Въпреки това, само с няколко реда код успяхме да превърнем една обикновена страница в страница, която посетителя може да използва с удоволствие.

Практически съвети

Тук искам да споделя няколко практически съвета при работа с текст. Опитай се да ги приложиш (или поне част от тях) в следващия уеб сайт и резултатите ще бъдат наистина удовлетворяващи.

• Избягвай прекалено дългите редове. Когато четем текст, който е дълъг колкото ширината на целия екран, очите започват бързо да се изморяват. Добро решение е всеки ред да съдържа между 70 и 130 символа, но това също зависи и от вида сайт.
• Направи шрифта достатъчно голям и лесен за четене. С течение на възраста зрението ни става все по-слабо. Докато един човек на 16г. няма да има проблеми при четене на текст с 12px големина, друг човек на 35г. ще трябва наистина да положи усилия. Най-добрия размер е този, който кара посетителя да се чувства комфортно без да го натоварва.

  

• Избери шрифт, който е оптимизиран за четене. Това е малко по-сериозен съвет и изисква повече практика и умения. Надявам се да го разгледаме в някой бъдещ урок, но тук накратко искам да спомена, че не всеки шрифт е удобен за четене на голямо количество текст. Например Verdana и Arial са широко използвани шрифтове, които са лесни за четене.

  

• Бъде сигурен/а, че фона и цвета на текста са в достатъчно силен контраст. Може би най-добрия пример е черен текст на бял фон, но това не винаги е възможно. Въпреки това, опитай се да избереш цветове, които не са прекалено близки и ясно се отличават един от друг.

  

• Направи разстоянието между редовете достатъчно голямо. Това го разгледахме по-горе. Бъде сигурен/а, че разстоянието между редовете е 1.5 пъти по-голямо от размера на текста и в по-голямата част от случаите това ще ти даде най-добрия резултат.
• Позволявай на текста да “диша”. Това е наистина важно и много начинаещи уеб дизайнери много често го избягват като се стремят да запълнят всяко възможно кътче от страницата. Предоставянето на разстояние в, между и около текста го прави не само лесен за четене, но и оставя наистина приятно впечатление.

Това са няколко практически съвета, чрез които можеш значително да подобриш текста на своята страница. Винаги имай едно на ум и направи посетителите на твоята страница наистина доволни.

Надявам се, че всичко от урока ти е ясно. Ако искаш да допълниш нещо или да изразиш своя коментар, можеш да го направиш чрез формата по-долу.

(Последна промяна на 08.06.2012)

Използвани снимки

Снимка към урока: Renee

Снимка към упражнението: Don O'Brien