Работа с параграфи
Разделянето на текста на кратки и лесни за четене параграфи е една от основните техники за стилизиране на съдържание. Тя ни е позната много преди появата на Интернет и уеб страниците. Това е една от техниките, която сме взели от книжния печат и успешно сме приложили онлайн.
Случвало ли ти се е да попаднеш на страница, която е прекалено трудна за четене и текста сякаш няма край? В такъв момент просто напускаш или стискаш зъби и се бориш срещу не добре представената информация.
В този урок ще разгледаме как правилно да структураме текста в кратки и лесни за четене параграфи. Също така ще обхванем няколко начина за стилизиране. Накрая ще се постарая да дам няколко практически съвета за работа с параграфи.
Този урок е разделен на следните части:
Структура на параграф
За да добавим параграф в нашата уеб страница е нужно да използваме 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 пъти по-голямо от размера на текста и в по-голямата част от случаите това ще ти даде най-добрия резултат.
- Позволявай на текста да “диша”. Това е наистина важно и много начинаещи уеб дизайнери много често го избягват като се стремят да запълнят всяко възможно кътче от страницата. Предоставянето на разстояние в, между и около текста го прави не само лесен за четене, но и оставя наистина приятно впечатление.
Това са няколко практически съвета, чрез които можеш значително да подобриш текста на своята страница. Винаги имай едно на ум и направи посетителите на твоята страница наистина доволни.