УПРАЖНЕНИЕ 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 1
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 o o Цвят на текст: Ако се дефинира цвят на текста, е препоръчително да се определи и фонов цвят. color: color initial inherit transparent; color име на цвят (red, green, blue, ) #rrggbb rgb(0 255, 0 255, 0 255) Подравняване на текст: Хоризонтално подравняване на текст: text-align: left right center justify initial inherit Вертикално подравняване на текст: vertical-align: baseline length sub super top texttop 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; Декориране на текст: text-decoration: Използва се за добавяне или премахване на декорация на текст. Може да се запише и разбито чрез свойствата text-decoration-line, Радослава Кралева, 2015 2
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 lowerlatin upper-latin lower-roman upper-roman lowergreek inherit ; list-style-position: Определя позицията на водачите на елементите в списъка: list-style-position: inside outside inherit; Радослава Кралева, 2015 3
Задачи Задача 1 Да се разработи уеб документ, в който са поместени всички тагове разгледани по време упражненията. Уеб страницата де се нарече studyex4.html и за нейното форматиране да се използва стиловия документ stylestudyex4.css. Всички текстове и стиловия документ за реализирането на тази задача се намират във файла ex4_1.zip. Решение на задача 1 Изглед на получената страница Радослава Кралева, 2015 4
Радослава Кралева, 2015 5
Сорс-код на studyex4.html Радослава Кралева, 2015 6
Радослава Кралева, 2015 7
Радослава Кралева, 2015 8
Радослава Кралева, 2015 9
Задача 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 10
Форматиране на звездичките (.star): форматиране на шрифта (5em #562b06), централно подравняване на текста, разстояние между думите (3em); Форматиране на информацията за източника (.bibl): декорация на текста (underline solid), цвят на шрифта (#973535), поставяне на полу-заоблена рамка отдолу ( borderbottom: 0.02em solid #562b06; border-bottom-left-radius: 2em; border-bottom-rightradius: 2em;), вътрешно разстояние (1em); Изглед на резултатът, който трябва да се получи: Радослава Кралева, 2015 11