Радослава Кралева, 2015 1
Уеб системи и технологии - Упражнение 4
УПРАЖНЕНИЕ 4:
ВИДОВЕ СИМВОЛИ И ТЯХНОТО ФОРМАТИРАНЕ.
СТРУКТУРИРАНЕ И ОФОРМЯНЕ НА ТЕКСТОВЕ. СПИСЪЦИ.
Какво се разглежда в тази тема:
Параграфи:
o Нов параграф <p>…</p> ;
o Нов ред в текущ параграф <br />.
Заглавия:
o двойните тагове за заглавия: <h1>…</h1>; <h2>…</h2>; <h3>…</h3>;
<h4>…</h4>; <h5>…</h5>; <h6>…</h6>.
Списъци:
o Неподреден списък: <ul>…</ul>;
o Подреден списък: <ol>…</ol>;
o Елементи в подредения и неподредения списък: <li>…</li>;
o Списък с дефиниции: <dl>…</dl>;
o Елементи в списъка с дефиниции: <dd>…</dd>, <dt>…</dt>.
Цитати:
o Кратък цитат към текущ параграф: <q>…</q>;
o Секция с цитат: <blockquote>…</blockquote>;
o Абревиатура : <abrr>…</abrr>;
o Заглавие на художествено произведение: <cite>…</cite>;
o Форматиран текст: <pre>…</pre>;
o Промяна на посоката на извеждане на текста: <bdo>…</bdo>;
Специален текст:
o Адрес <address>…</address>;
o Долен индекс <sub>…</sub>;
o Горен индекс <sup>…</sup>;
o Зачертан текст <s>…</s>;
o Удебелен текст <strong>…</strong>;
o Наклонен текст <em>…</em>;
o Линия <hr/>, прогрес (<progress>…</progress>) и др.
Таговете използвани за представяне на форматиран текст (код) са:
o Програмен код - <code> … </code>: <code>for(int i = 0; i < 10; i++) i+=10;</code>
Радослава Кралева, 2015 2
Уеб системи и технологии - Упражнение 4
o Вход от клавиатурата - <kbd> … </kbd>: <kbd>Вход от клавиатурата.</kbd>
o Изход от клавиатурата - <samp> … </samp>: <samp>Дефиниране на изход от програма.</samp>
o Математическа променлива - <var>…</var>: <var>E</var> = <var>m</var> * <var>c</var><sup>2</sup>
Коментари:
o В HTML <!-- К О М Е Н Т А Р в HTML -->
o В CSS /* К О М Е Н Т А Р в CSS */
Най-често използваните стилови дефиниции за форматиране на текст. За тях има
представена подробна информация в стиловия файл, който ще бъде използван при
създаване на задача 1.
o Цвят на текст: Ако се дефинира цвят на текста, е препоръчително да се определи и
фонов цвят. color: color|initial|inherit|transparent;
color – име на цвят (red, green, blue, …) | #rrggbb | rgb(0255,
0255, 0255)
o Подравняване на текст:
Хоризонтално подравняване на текст: text-align: left|right|center|justify|initial|inherit
Вертикално подравняване на текст: vertical-align: baseline|length|sub|super|top|text-
top|middle|bottom|text-bottom|initial|inherit;
Отстъп на първия ред в параграф text-indent: length|initial|inherit;
Посока на извеждане на текст: Свойството direction определя посоката на
изписване на текста. Използва се съвместно със свойството unicode-bidi, за
да определят посоката за съответния език. Използват се когато има
поддръжка едновременно на няколко езика
Чрез стойностите, на unicode-bidi се определя допълнително ниво на
вграждане в текущия документ (embed). Стойността bidi-override също
създава ниво на вграждане и извършва преподреждане на символите в
текста, зависещо от стойността указана в direction direction: ltr|rtl|initial|inherit; unicode-bidi: normal|embed|bidi-override|intitial|inherit;
o Декориране на текст:
text-decoration: Използва се за добавяне или премахване на декорация на
текст. Може да се запише и разбито чрез свойствата text-decoration-line,
Радослава Кралева, 2015 3
Уеб системи и технологии - Упражнение 4
text-decoration-color и text-decoration-style , но към настоящия момент не
всички ги браузъри поддържат. text-decoration: none | underline | overline | line-through
| initial | inherit;
text-shadow: Използва се за поставяне на сянка на текст: text-shadow: h-shadow v-shadow blur-radius color | none |
initial | inherit;
text-transform: Използва се за преобразуване на буквите, като те могат да
бъдат всички букви в думите да са главни (capitalize), всички букви да са
главни (uppercase), всички букви да са малки (lowercase), по подразбиране
(initial) и да се наследи от родителския елемент (inherit), или да няма (none): text-transform: none | capitalize | uppercase | lowercase |
initial | inherit;
o Бели полета и разстояние между букви / думи:
white-spacing: Определя бялото пространство около елементите: white-space: normal | nowrap |pre |pre-line | pre-wrap |
initial | inherit;
letter-spacing: Увеличава или намалява разстоянието между символите: letter-spacing: normal | length | initial | inherit;
word-spacing: Определя разстоянието между думите: word-spacing: normal | length | initial | inherit;
line-height: Определя височината на реда: line-height: normal | number | length | n% | initial |
inherit;
o Свойства за форматиране на списъци
list-style-type: Определя водача на елементите в списъка:
list-style-type: none | disc | circle | square | decimal |
decimal-leading-zero | lower-alpha | upper-alpha | lower-
latin | upper-latin | lower-roman | upper-roman | lower-
greek | inherit ;
list-style-position: Определя позицията на водачите на елементите в
списъка: list-style-position: inside | outside | inherit;
Радослава Кралева, 2015 4
Уеб системи и технологии - Упражнение 4
Задачи
Задача 1 Да се разработи уеб документ, в който са поместени всички тагове разгледани по време
упражненията. Уеб страницата де се нарече studyEx4.html и за нейното форматиране да се
използва стиловия документ styleStudyEx4.css. Всички текстове и стиловия документ за
реализирането на тази задача се намират във файла ex4_1.zip.
Решение на задача 1 Изглед на получената страница
Радослава Кралева, 2015 5
Уеб системи и технологии - Упражнение 4
Радослава Кралева, 2015 6
Уеб системи и технологии - Упражнение 4
Сорс-код на studyEx4.html
Радослава Кралева, 2015 7
Уеб системи и технологии - Упражнение 4
Радослава Кралева, 2015 8
Уеб системи и технологии - Упражнение 4
Радослава Кралева, 2015 9
Уеб системи и технологии - Упражнение 4
Радослава Кралева, 2015 10
Уеб системи и технологии - Упражнение 4
Задача 2 Да се използва готовия текст от файла ex4_2.zip да се създаде уеб документ с име ex4.html и
стилов документ с име styleEx4.css, който форматира текста по следния начин:
Тялото на документа: фонов цвят (#fae7c2), цвят на шрифта (#562b06), вид на шрифта
(verdana), размер на шрифта (1.1em), външни бели полета (1.5em);
Параграф: отстъп от първия ред (2em), двустранно подравняване на текста (justify),
разрешаване на преноса на думи (word-wrap: break-word);
Заглавието на произведението, което е заглавие от първо ниво: сянка на текста (0.07em
0.07em 0.10em #a07c63), цвят на шрифта (#690a50), вид на шрифта (Cambria), подравняване
на текста в среда на документа, разстояние между думите (0.25em), разстояние между
буквите (0.05em), поставяне на полу-заоблена рамка отгоре (border-top: 0.02em solid
#562b06; border-top-left-radius: 2em; border-top-right-radius: 2em;), вътрешно
разстояние (1em);
Радослава Кралева, 2015 11
Уеб системи и технологии - Упражнение 4
Форматиране на звездичките (.star): форматиране на шрифта (5em #562b06), централно подравняване на текста, разстояние между думите (3em);
Форматиране на информацията за източника (.bibl): декорация на текста (underline
solid), цвят на шрифта (#973535), поставяне на полу-заоблена рамка отдолу ( border-bottom: 0.02em solid #562b06; border-bottom-left-radius: 2em; border-bottom-right-
radius: 2em;), вътрешно разстояние (1em);
Изглед на резултатът, който трябва да се получи: