• формаmuране на

C11pPJkaнuemo чрез
kackagнu наборu om
cmuAoBe (CSSJ

• ПьАно cьomBemcmBue с
nocмgнume uзuckBaнuн на
cmaнgapma НТМL 4

• ВераЖgане на мyAmuмeguн
u осьщесmВнВане на
uнmepakmuBнocm

Необхоgим учебниk
за Bceku от нас

c:n®
СОФТПРЕС
 '

HTML в лесни стъпки сьgь р:Жанuе

© СофтПрес ООД, 2007
ГлаВа 4 ДобаВяне на cmuлoBe
ПреgсmаВяне на HTML 7
ГлаВа 1 8 kьм cьgьp>kaнuemo 43
ISBN 978-954-685-360-8 Исторuя на HTML. ... .... ........ ....... ...
Атрuбут u на тагоВе ......................... 44
дсоцuuране на agpecu на
Уnотреба на атрuбутu на тагоВе ... 45
уеб cmpaнuцu ...... .. ............................... 1О
Редактор: Елена Боевска /\есен npuмep за набор от
1отнu u относuтелнu agpecu .. 11
Предпечатна подготовка: Александрина Иванова ~:::u на фрагментu ........................ · 12
стu/\ове ............... ' ················
. . . . . 46
Прuлагане на стuлоВе на тагоВе ...... 47
Де ф UH Uцu u
на тuna на gоkумента .... 13
Художествен редактор: Владимир Владимиров Прuлагане на стuлоВе чрез kласоВе ... 48
kтура на HTML gоkумент ..... 14
Стру 15 Прuлагане на стuл чрез
в aw ата nopGa уеб странuца .......... ..
16 атрuбут id ......... .. ................................. 49
Инструментu В HTML .. ..... . . ...... 17
ЦВетоВе .............................................. 50
Microsoft FrontPage .................. ·.... ·.. .. ..
Прuлагане на цВетоВu стuл .............. 51
СьВетu kом сьзgателuте на HTML
Разgеляне на сьgьр>kанuето ............... 52
Всички права запазени. Нито една част от тази книга не може да бъде gоkументu ........... " ... . . .. . ... 17
Центрuране чрез стuл ................ ...... 53
размножавана или предавана под никаква форма или начин, електронен ГлаВа 2 Сеkцuя Head 19 Прuлагане на стuл Вьрху част
или механичен, включително фотокопиране, записване или чрез каквито Cьgop>kaнue на сеkцuята Head .......... 20 отреg ................ .................................... 54

и да е системи за съхранение на информация, без предварително писмено
разрешение на СофтПрес ООД.
ГлаВа
на cekцuяma
ЗаглаGuе на gоkумента .. ............... ..... . 21
ГлаВа 5 Cnucьцu u сnецuалнu
Метаuнформацuя ................................ 22
знаkоВе 55
Kogupaнe на знаkоВете ....................... 23
Henogpegeнu cnucьцu .................. ....... 56
Метаgаннu за торсене ..................... 24
СтuлоВе на точkuте В cnucok .......... 57
Потребuтелсku метаgаннu .............. 25
Пogpegeнu cnucьцu ........................... 58
ДобаВян е на ckpunтoBe ............. :........ 26
СтuлоGе на номерuране ..... .... ............. 59
ДобаВяне на наборu от стuлоВе ...... 27
Cnucok с geфuнuцuu ............................. 60
СВьрзВане на pecypcu ......................... 28
Хорuзонт ална разgелuтелна лuнuя ... 61
3 TekcmoBo сьgьрЖанuе Сnецuалнu знаkоВе ............................... 62
Body 29
ГлаВа 6 СьзgаВане на mаблuцu 63
Сеkцuята Body на gоkумента ........... ЗО
Разgеляне на cogop>kaнueтo на /\есен npuмep за таблuца .................. 64

nараграфu ... ..... ........ ..... .... .... ................. 31

ЗаnочВане на ноВu pegoBe .................. 32
Цuтатu u блоkоВu цuтатu ............... 33
ЗаглаGuя ... ...... .. .. .................................... 34
За контакти:
ОтkрояВане на теkст ........................ 35
Адрес: 1404 София, ул. "Червена роза" 31А, ет. 4;
Форматuране на теkст ..................... 36
тел.: 0700 14 222, факс: 02/958 25 67;
ПреgВарuтелно форматuран
e-mail: clients@sott-press.com; Web site: www.soft-press.com mekcm ......................... ........................... 37
Горен u gолен uнgekc .................... .. ..... 38
Agpec за kонтаkт ............................... 39
Поkаз6ане на kog 6 теkст ............... 40
За дистрибуция:
Помощнu тагоВе ............................... 41
СофтПрес София - ул. "И скьрско шосе" 19;
тел.: 02/973 15 06; e-mail: sales@soft-press.com
Изmрu6ане u 6моk6ане ...................... 42
форматuране на kлeтku .................... 65
Позuцuонuране на таблuцата ............ 66
ДобаВяне на pegoGe ................... .. . · 67
СВорзВане на pegoBe ......................... 68
СВорзВане на kолонu ........................... 69
Горен u gолен kолонтuтул ................. 70
ПоgраGняВане на теkста
В kлетkuте .......................................... 71
Стuл на kлетkuте .......................... 72
Рамkа u npaBuлa на таблuцата .......... 73
Груnuране на kолонu ........................... 74
Шuрuна на kолонuте ....... ............. ....... 75
Атрuбут suттary .............................. 76

СофтПрес Варна- тел.: 0888/240-784;

•
 4 е
Сьgър>kанuе 5

ВьОе>kgане на napoлu ... .. .......... .. ИзnолзGане на uзобра>kенuе

Гла6а 7 Xu n ep6pьзku u kom6u 77
- 1 3 ДобаВяне на
Полеmа зе omмemku ............. .. .. .. ..... : 1 ГлаВа 6е kьМ mekcm 149 а cnuc'Ьk чрез cmuл .. ... 168
cmuлo
СьзgаОане на xunepOp'Ьзku .. 78 Paguoбymoнu .. . .. . .............
1 свмеосmОа om wpuфmo13e ......... 150 Сьkраmено заgа13ане на cmuл
Избuране на xunep0p"Ьзku ... ...... 79 Полеmа за uзбор на фаолоQе .. ...... ..
1 Размер на шрuфm
151 на cnucьk . . .. 169
KomOu на xunepOp'Ьзku ... . ... . .. .. ..... 80 Ckpumu noлema . ... .. ................. cmul\ на шрuфm ..... .. ........... . 152
Позuцuя на заглаОuеmо
1
XunepOp'Ьзka k'Ьм ugeнmuфukamop ... 81 Cmaнgapmнu буmонu .. .. ....... ...
1 УgебеляВане на wpuфm ............. . 153
на mаблuцаmа . . . ... . ... .. ..... 170
ПоgсkазОащ mekcm k'Ьм Буmонu за ОьзсmаноВя13ане на Оnреgеляне на cmuл на рам kа 171
варuанm не шрuфm . . .............. 154
xunepOp'Ьзka ....................................... 82 П'ЬрОоначалнumе cmouнocmu . . .. ..... 155 Paмku на nразнu kлemku 172
1 вuсочuна не peg .. · ·•· · ..... ·
XunepOpьзka k'Ьм npomokoл .... 83 Буmонu за uзnращане
С'Ьkраmено заgаВане на ГлаВа 15 Cmuлo8e на фон 173
на формулярu
ИзnолзОане на uзобраЖенuя за ........ c13oucm0a на wpuфm 156
ЦОяm на фон . ... 174
xunep0p"Ьзku ..... .. ....... .......... ... .. ............ . 84 Прuлагане на uзобра>kенuе
Поgраоня13ане на mekcm u ФоноОо uзобра>kенuе . .... ... ... .. ... .. 175
СьзgаОане на xunepl3p'Ьзku с k'Ьм буmонu за uзnращане .............. 121 cngьp>kaнue ................................... 157
ПоОmоренuя 13'00 фона .................. ... 176
kapma на uзобра>kенuе. ........... .. ....... 85 Г рафuчнu буmонu ... .... .. . .. ..... ... 122 деkорацuя не mekcm ... ............ 158 Позuцuя 13ь0 фона ... ............ 177
Koopguнamu на kapma на Из nолзОане на emukemu .... .............. 123 OmмecmGaнe на mekcm 159
фukcupaнe на фоноОоmо
uзобраЖенuе ............................. 86 TekcmoOu обласmu ......... ............. 124 Разсmоянuе меЖgу бykOume 160
uзобраЖенuе ................... 178
Гла6а 8 Вгра>kgане н а Обхо>kgане с ТаЬ ............................... 125 Разсmоянuе меЖgу gyмume . ....... 161
Сьkраmено заgа13ане на
елеменm u 87 Meнloma за uзбор ............................... 126 Орuенmацuя на mekcma . .. ... .. ..... .. 162
сОойсmОа на фон ................................ 179
Груnuране на мен/оmа ........................ 127 Cmuл ..оmgясно наляОо" ......... ........... 163
Доба13яне на uзобра>kенuе .................. 88 Buguмocm .... .. ............................. 180
Груnuране на noлema .... .. ............ 128 ГлаGнu u малku бykGu О mekcm .... 164
Kapma на uзобра>kенuе ....................... 89 Kypcopu .. .. .. ........ 181
Oбekmu u MIME-munoOe ................... 90 Глава 11 Paмku u noлema 129 Глава14 CmuлoBe на ЦOemol3e на xunepOp"Oзku ............. 182
ВграЖgане на uзобра>kенuе ........ 91 Блоk сьс сьgьр>kанuе ...... .. .............. 130 cnucьцu u mаблuцu 165 Доn'Ьлнumелно сьgьр>kанuе .. ......... 183
Вгра>kgане на mekcmoO файл .............. 92 ЦОяm на фона u на paмkama .............. 131 Tuno6e cmuлo6e на cnucьцu ........... 166 Заkл/оченuе . ......... ......... ......... 184
Вгра>kgане на HTML oбekm .............. 93 Cmuл на рамkа ...... .. ............................ 132 Позuцuонuране на moчku О
Вгра>kgане на Java anлem .. ... ..... 94 Wupuнa на рамkа .......... . ........... 132 cnucьk чрез cmuл 167
Доба13яне на napaмempu на anлema ... 95 Сьkраmено заgаОане на cOoocmOa
Вгра>kgане на мулmuмеguя ... . .. ..... 96 на рамkа .............................................. 133
OuickТime ........................................... 98 добаВяне на уnльmняОане ................. 134
Real Player ..... ... ......... .. ........................... 99 Оmносumелно уnльmняОане .......... .. 135
F/ash .... . ... . ...... ... 99 Сьkраmено заgаОане на cOoucmOa
на уnльmняОане .... .......... 135
ГлаВа 9 Рабоmа с фреймоВе 1О 1
ЗаgаОане на noлema .......................... 136
HTML gokyм eнm за заgаОане
Сьkраmено заgаОане на сОойсmОа
на набора om фреймоСе .. .. .. . . . .. .. 102 на noлema ...................................... .. 137
Сьзgа13ане на gl3a Oepmukaлнu
да обеguнuм знанuяmа ........... .... . 138
фрейма ........ ............... ....... .... 103
СьзgаОане на gOa хорuзонmалнu ГлаВа 12 Позu цuонuране на
блоkоВе сьс сьgьр>kанuе 1 39
фрейма ........ ...... ...... .. ..... .... ......... .... ... .. 104
Вграgенu фреймоОе ........................... 105 XYZ koopguнamu ..... ............................ 140
Изглеg на фреймоОеmе .. ........ .. ... 1Об Абсол/оmна nозuцuя ......................... 141
ОmОаряне на ноОа сmранuца О'ЬО Пogpe>kgaнe no ocma z ..................
142
фрейм ...... .. .... ... ..................... .. .... 107 Оmносumелна nозuцuя .. ... ........ ... . 143
АлmернаmuОно сьgьр>kанuе ............. 108 ПлаОащu блоkо13е сьс сьgьрЖанuе .. 144
ОсОобо>kgаОане на сmрана на
ГлаВа 1 О СьзgаВане на
mekcm .... .. ........... ...... ........... .............. 145
формулярu 1 09
Промяна на размера на блоk сьс
Cmaнgapmeн формуляр ............ .. ... 11 О
С'Ьgьр>kанuе ... ... . .. .... .... .. . ... .. . 146
Прuемане на uнформацuяmа ............. 111
ПреnьлОане ... ...... . .... ......... .............. 147
TekcmoOu noлema ....... ......... .. .. 112
ИзрязОане на nреn'ЬлВане ........... 148
ТагоВе 6 HTML
Таблицата съдържа всички тагове за маркиране, които се използват в стриктната ве >о
1
на HTML 4. Тези от тях, които не изискват затварящ таг, са маркирани със звездичка
Забележете, че някои тагове от по-ранни версии на НТМL като например <applet>, та на Hyper'Гext Markup Language
<ceпter> и <foпt> са вече излезли от употреба. Добре дoUIЛJi в све за маркиране на хиnертекст" - тв_ка
(HTML) [tдn ~език за създмавена Интернет cтpa­
<а> <dfn> <input> •
murr стаs.дарт
<sclipt> поuУ• 1яр
<abbr> <div> <ins> <select>
tнt11!1 • НТМL чрез кратки истори-
<acronym> <dl> <kbd> ще ви въведе в d
<small> raзlt rдава обясви как се вписва в Worl
<address> <dt> af1111i 11 ше ви
<label> <sрап> чecl\lt д Щ nредставим дискусия относно aв-
<area> • <em> <legeпd> <strong> \Vide Web. е ви tентите и оnисание на структурата
торството ва инстр~
<Ь> <fieldset> <li> <style>
tta една уеб стра:юща.
<base> • <form> <link> • <sub>
<bdo> <frame>" <map> <sup>
<Ьig> <frameset> <meta> • Темu:
<taЬie>

<Ьiockquote> <h1 > <noframes> <tbody> исmорuя на HTML 8

<body> <h2> <noscript> <td> Acouuupaнe на agpecu на уеб cmpaнuuu 1О
<Ьг>* <hЗ> <object> <textarea> Абсолlоmнu u omнocumeлнu agpecu 11
<button> <h4> <ol> <tfoot>
Agpecu на фрагменmu 12
<caption> <h5> <optgroup> <th>
Дeфuнuuuu на muna на gokyмeнma 13
<cite> <hб> <option> <thead>
<code> <head> <р> <title>
Cmpyl<mypa на НТМL gokyмeнm 14
<col> • <hr>" <param> • <tr> Bawama пьр6а уеб cmpaнuua 15
<colgroup> <html> <pre> <tt> Инсmруменmu 6 HTML 16
<dd> <i> <q> <ul>
Microsoft FrontPage 17
C'o8emu kъм cъзgameлume на HTML gokyмeнmu 17
<del> <img> • <samp> <var>
Икони , които ще ви nомагат по време на обучението:

~
~ Обш"'""'
тези неща, kоито
трябОа ga се опитато
~ ДобаОяkъм
знанията Ои полезни
сьаети.
[ft} п..~-
aa аи за потенциални
опасности.

ga запомните.

Повече за книгите на издателство СофтПрес можете да научите на адрес:

www.soft-press.com

За връзка с издателство СофтПрес пишете на email адрес:

clients@soft-press.com
 u
n ' ML 1:$ леон u omъnku
ГлаВа 1 ПреgсmаВяне на HTML 9
Исmорuя на HTML
В исторнчес~m IТЛаR :ж HoSoSь6egeнuя 6 HTML 4
• елавието да 6
определен формат е ъде отпечата" Възможностите ва nо-ранв:вя стандарт НТМL 3.2 са до­
означавало ч
коnисие трябвало да 6 ' е първовачат'н-rrе развити в НТМL 4, за да осигурят повече гъвкавост за се­
ъдат "маркирани"
no такъв нач:ив ко у със ....,ueJ~e);rtь гашното и бъдещото развитие на Интернет.
за книги по как~ ито да Укаже на печатаЩИте
на текста. начин да бъдат разположе}Щ ..•.,,ЩJifRI НТМL 4 отделя nрезентадионните тагове за марюiраие от

истпнското съдържавие с въвеждавето ва мехаввзма

Тези забележи е трябвал б Cascading Style Sheets (CSS), който се използва за конт­
р азб иран:и Kal\."1'0 от печатащ
о да ъдат кратки б
и да ъдат рол на изгледа ва съдържанието. Това е само едва от го­
Jia текста. ата машина, така и от aв,rn
лемите и забележителви промевп в НТМL 4, но има и
В следствие на това се съз много други.
абревиатури, които Фо дава серия всеобщо Призна1'1f
HTML РМИрат осаовите аа марkир Все още всички тагове са оградеRИ от триъГ'Ь.IIНИ скоби
е съвременен марJtИ ащ (<>),во много от по-старите тагове вече са отпадваJm.
общо Признати абревиа ращ език, който използва
nредаде на уеб браузър::и, н:аречени "тагове", за да Старият таr <centet·> вече ве се използва за центриране

зана уеб страницата. ак иска авторът да бъде ПOka- на текст на страницата, както и <font>- за определяне н:а
шрифта на част от 'rе кст. Вместо т.ях, за оформяне на де­
To.fJ е изобретеn през 80-те го
учен ва име Тим Б дюi:и н:а ХХ век от ...... ,nийс=-: тайлите ва визуализацията се използват контроли на ва­

б ораторията Particle Ph . .
ърнърс по време н 6
• а ра отата му в
-· бори на стилове. НаJlИЧНИТе свойства на тези набори пред­
YSics в Швеицар лагат много по-големи възможности за определяве ва
Простотата на НТМL . ня.
nоnупярвост в P8J.Jm:Iт:т:laи:z:;:e.nящa за бързата му въиumия вид ва съдържанието.

тернет с текстово-базир .б съществуването на

~ Добавени са нови тагове, които nовишават вивото на

[1'~Jн,_
г ави раузъри .

~ Примерите
прецизност, с което НТМL дефинира съдържанието ва
олеми.ят скок в развитието на ез
1993 г., когато студент ика обаче идва nрез документа.
в колеж ва име м Авд с набори от cтuлofle а
6авя таг за изображеRИя арк ерсен до- За да се nовиши приложимостта на езика в световен план
та Оерсин на Microsaft tn83u kнига IJ3noл:;{Jaт
' така че НТМL да може да
lпteтet Exfiorer е бази. казва и картюnси по- cneцuфukauuuтe на е добавено подцържане на езцци, изписвани отдясно ва­
' а не само текст Т
рана на брау:Jьра Mosaic на в уеб браузъра М . . ази версия е включе- береията CSS2.0.
ляво.
нaNCSA.
много успешна. оsщс, разработен от NCSA, и става
Въведен е и нов модел на предетавяве на табJшци, който
Марк продължава да работи в nозволява на браузър11те да започнат да ги рендират,
браузъра Netscape. тази област и създава уеб

~
преди да са вaii'ЬJlнo свалени.

До средата ва 90-те rо.щmи

Създадени са още nо-добри възможности за използване
щн се за nазарен .цял б Разл:ич:н:t1 уеб браузъри, боре­
wзс есае­
тоОно призната инс­ собствени, nо-ефе ' до авят свои тагове, за да създадат на скриптове с добавянето ва още "събития" на страница­
титуция. kолто сьб,W.
gaaa ствнgартuте 0
WorJd W'd
1 w ктивни версии на НТМL·
е еЬ Coпsщ·tit.Un (WЗС)
та, кowro реагират на nоведението на nотребителя.

разnокъсвавето на НТМL съзира оnасността от НТМL 4 е разработен, за да направи уеб стрэню(ите по­
уеб пространетОото
МоЖете ga се запозн;. дл'ЪЖЮJ да се придъ
и създава етанда •
рт, към които са лесно достъПШJ като цяло. Създадени са страхотни нови
ете с поСАеgните о n ржат всички уеб браузъри възможаости с включваието на още нови тагове за създа­
разработkи на uнформа­
оеледната най пре .
ционнин уеб саот НТМL е нтЩ 4-01 ;оръчвана версия на стандарта WЗС вавето на сложm1 уеб доъ.'}'1ненти. Те позволяват множес­

WWW.IiGc.org въnреки че на по. . очно тя е засегната в таза KRИra, тво документи от раз.rrнчни източн:ици да бъдат обедине­
вечето места е нар Н
само НТМL. ечена ТМL 4 или ви в едва единствена уеб страница.
 Гла~а i ПpegcmdHJI HG Hl:l ,., ltVtL 1 1

10 HTML В леснu cmъnku

Асоцuuране на agpecu на уеб cmpaнuцu - олюmнu u omнocumeлнu agpecu

ДбС Пълният адрес на уеб страюща, вклJочващ nротоко:· до-
Наистин а интересЮtЯТ комnонент на НТМL е хипеn•,..,.,._
товата nре пратка, която позволява на nотребителя да е
м~~
~..... и: аме на файл, се нарича .,абсолютен адрес . Ето
и ИЛJОСТРВUНЯ на уеб сървър с име на домеЮJа
~

сърфира лесно в Ивтервет. 3а да бъде въз можно това

•
Интернет трябв а да .използва уставовени стандарти за W\VW. webserver.

вс1-rчкн комmотри, които са свързани Jо.."ЪМ World Wide

Web.
Мрежата включва rpyna от огромни компютри, onpeдe.ne.
ни за сървъри, свързани чрез сателит или телефонна ~·

връзка . Свързвавето ва всеки потребителски комнютър

'-rрез телефон към в.я:кой от тях осигурява достъn до вctff'l.
ки файлове в мрежата.
World Wide Web изnолзва общ комуникационен стандарт.
наречен HyperText Тt·ansfer ProtocoJ или НТТР ( nротокол
за nренос на х.илертекст), които осиrурява моментаJtна
tсому.н и каци.я между всички комnютри и сървърите на
мрежата. Този общ rrротокол nозволява на уеб t>рау:эъlРИ'IМ:
да отtсриват уеб страници във всяка част на мрежата и
.ви'Наrи се изnолзва като начало ва адреса на всяка стра­
юща ( изписва се като: http:/1).
Всеки уеб документ трябва да nритежав а уникапе в адрес,
та ка че nотре бителят да може да открие точно тоз11 , кofrro
търси. По съu.tия начин, по който пощенекият адрес е
комбинация от името ва rрада, на улицата и т. н. , всек и
уеб адрес съдържа в себе си името на nротокол , ва домейн
и на файл.
НТМL файловете са просто текстови файлове, заnисани с
~ разбиране, може да бъде: http://www.webserver/
Ш Аkоимате
IIRkokOU cьмHeiiUR, заgьл·
ЖumeAIIO използбайте
вбcoflkJmeн вgрес, за ga
избегнете грешkи
Абсолютният адрес на страшщата, отваряща се по под­
webpages/index.h tm 1.
НТМL кодът във фаЙJtа in dex.html може да се обърне
към който и да е файл в паnката webpages, като изпо:зва
само името му. 1.'ова се нарича "относителен адрес .
В nосочената илюстрация кодът във ф айла index.h tml
може да се обърне към файла next.html само чрез
next.html или като използва абсолютвия адрес, който е
http://W"VW .we bserver/webpages/ next.html.
Можете да изnолзвате относителви.я адрес и за връзка с
файл, намиращ се в nо-горна nапка (която съдържа нас-
тоящата), като заnочнете адреса му с ., ..f'.
В шпостраЦJtЯТа всеки документ в nаnката extra може дl
се обърне към документа next.html (нfu~ащ се в nаn­

[1У) Agp"ыn"'
раз1ШfРение .htm или .html (и двете са възможни). Така ката webpages) чрез ../next.html.
че, типичн ата страница от уеб сайт, отваряща се по nод­
Абсолютният адрес може да бъде изnолзван, за да се
разбиране, би nритежавала име ,j.ndex.htmJ".
уебcmpa11uua 11е биОа ga обърнете към документа next.html от който и да е друr,
сьgьрЖа 11ukakOu ullmep- Ако тази стр аница е .качена на уеб сървър с име на до­ като изnишете http://www. webset.-ver/'\vebpages/
Oaщ
мейна "www.webserve1·", тогаJ3а ще може да бъде посете на n ext.h tml .
о·г мрежата на адрес: http://www.web ser ver /inde x.html.
Обикнове но качените файлове са събрани в nапка на
сървъра, така че уеб адресът на страницата ще включва
и нейното име:

Протокол Име на домейна Име на файла

http:// www.webserver/sublolder/ index.html

 rла~а , 11/)GgCrtll:i~~""' "'и 1 11 1" '- •
12 HTML В леснu c mъnku

Agpecu на фрагменmu д;Фuttuцuu на muna на gokyмeнma

Първият ред от всеки .ваJJидев НТМL документ трябва да
Изnолзвайки който и да е - и аб COJUOTIOfЯ, И OTJEiOC~И<r•A"._ съдържа декларадия ЕН1 версията ва НТМL, която се из­
адрес, вие ще nреминете в началото
ца. .....
"'""'желаната ...,...,_ ползва в веrо. Тази декларация се нарича ,.дефИJ{ИТI'ИЯ ва
тиnа на докумеRТа" (Document Туре Definition) и обикно-
В'ЬЗможно
б е обаче да добавите иавиrаци онн.и точки на вено се означава само като "DTD".
уе стравJ.щата в НТМL кода, към коиrо да можете I'VL··- DТD е просто код, специфициран в стандарта НТМL, кой­
дa преминавате. Те се наричат ~·.,.отви" (anc h ors) и А"'"· то може да бъде вмъкнат в горната част ва всяка страни­
rи им се дава име, чрез което да бъдат адресирани. ~ ца. Той обявява адреса на уеб страницата, която съдържа
nравилата на езика за тази версия на НТМL. Стандарт­
~ В последшш nример файлът с име next.htro"i има к ~ Уеб брау:IЬ­
за отделни негови фрагменти в началото' в средата отви
края Т ив
рьm IJ()Jв ga използ/Jа пата DTD декларация се нарича "стриктва" (Strict) и се
За поОвче . е "са наречеви съответно top"' " mt'ddlе" и sgpeca о oro. за ga wзоолзва за докумеRТИ, които използват валиден НТМL 4
шtформаuин и примври
за хипврОрьзkитв и
ь
" о tt om .
n
,
osлиgupa НТМL koga.
koumo св сьgьрЖв О
код. Например, дехларацията за НТМL версия 4.01 изr-
gokY!Aeнma лежда ето така:
kотОитв Ошkтв глоОа 1. Уеб браузърите могат да отварят тази страни ца в
<!DOCTYPE НТМL PUBLIC " -//WЗC//rtrD НТМL 4. 01/ / EN "
дена от вас точка, като добавите името на котвата в к
на адреса на страницата. Тези добавени ..."_ ~мена са нeuto рая ''ht tp ://www.wЗ . org/TR/h tml4/ s trict . dtd" >

като адептификатори ва фрагмента и тр.ябв а да бъдат Спецификацията npeдJiara също и "преходна"

nредшествани от симвоJiа диез(#).
За да отворите next.html в средата да документ
котвата "пu·ddl е"' тря6ва да изпиш ете адреса поа,сле
при
начин:
h ttp:l/www. webserver/webpages/next.h tml#middle
Ако адресирате тази страяиnа и котва от друг файл в съ­
щата паПRа, можете да използвате отвосителния адрес
next.html#middle.
СJI~дващият nример показва уеб страяиnа, отворева .в
наи-горвата си част , къдет о има nоставева котва нарече-
на #top:
(Тransitional) декларация за съвместимост с предишни
версии. Тя следва да бъде изПОIIЗвава, хоrато НТМL до­
кумеВТ'ЬТ съдържа стари ходове за марJШраве, които са
дния излезли от уnотреба в стриктния стандарт ва НТМL 4.
Видът йе:
<!DOCTYPE HTML PUBLIC
" -//\·1ЗС//Г!ГD HTML 4. 01 Transitional//EN"
"http : //www . wЗ.org/TR/html4/loose . dtd">
С'Ыдествува и сnеЦИ'алJJа декларация, кояrо се използва
са:мо в дохумевта, съдържащ набора от фреймове, които
' ще бъдат изnолзват! в уеб страница, съставена от м:воrо
документи .

<!DOCTYPE HTML PUBLIC

" -//WЗC//DТD НТМL 4 . 01 Frameset//EN "
" http : //www . wЗ . org/TR/html4/frameset . dtd" >

~1Х) "·~·~
Тъй като кодът в тази квиrа не съдържа никакви излезли
от уnотреба кодове, навсякъде е използвава стриктиата
DTD деклараnия с изключение ва примерите с докуме:ат,
Rйme ga ОkлЬчите
nogxogнщama ОТО gek· съдържащ набор от фреймове в глава 9. Декларациите не
:иия О началото на са записани никъде с цел да бъде сnестено пространство,
и НТМL goky1.teнгn, во nомнете, че те трябва да бъдат вкmочеви в началото
~ ga бhlrD .
Ран. -:r- таи OSJ~ugu-
ва всеки НТМL документ, за 'да бъде той ва.лидпРав·
 1.., n ' IVIL l.j лес нu omь nk u

ГлаВа 1 П реgсmаВяне на HTML 15

Cmpykmypa на HTML gokyмeнm
__,--- nьр6а уеб сmранuца
НТМL 4 документ се състои от СJrедJ-ште три частн: ..• arna
88""" Н d ва документа тря6ва да съ..........~ржавинаrи
1. Дефиниция натида на документа (DTD). Секцията еамллект тагове < titlе> · Те одредел.ят заrлави-
Секция Head, съдържаща информацnя за до 1ку ,.е~r.. ::.ок:;;: ::и:кновено мо~ете да видите в загдаевата
2.
3. Секци.я Body, в която се намира основАото
1 лента на прозореца.

ние. имер добавя заrлавие на тази секция и

Следващи.ят пр
прост текст в парагра
ф в секцият
- а Body, обозначен от та-
Дефиnлцпята DTD трябва да бъде екточена в най­ га <р> .
горната част на документа, за да дею1ар.ира версията
HTML, която е изnодзвана. <head>
<title>Пoэдpaви</title>
След нея се изnисва тагът <h ead>, обозначаващ ttaчam </head>
то на секцията Head. Краят И се обозначава с <f.head> .
Като цяло, таговете се изnолзват като "КоАтейнери" със <body>
сдедю1я синтаксис: <UAt e н,а таг> <.lи.Ate на таг>. <! __ традиционният стар'l' -->
Тnrовете <ltead> <IJte ad> съдържат nомеждУ си инФ,оо­ <р>ЗдРавейте</р>

мацията в секцията Head ва HTML документа. Подобно </body>

на тях, <body> <./Ьоdу> заrраждат конкретното съдър.
жание на документа.

Примерът no-дoJry юuострира трите части, която ,...._,,..,.n

всеки НТМL 4 документ:

<IDOCTYPE HTML PUBLIC "-1/IOC!/DTD HTML 4 . 01//EN"

" http : //www.wЗ.org/TR/html4/strict . dtd"> [Т) ст,ршпа
mazdJe <html> koumo
<head> баз t.OUCkOaни за заг­
Bceku раjgането на ц11.1ия
тekcm. kоото поста­ Обърнете внимание , че кодът в секцията Body също съ­
бите мвЖgу специвАни­ <!-- I<Од'Ьт, даващ информация за документа, се изnисва
-->
НТМL kog. Овче не са
НТМL коментар, който не се nоказва от браузъра.
държа ака и за та-
тук нуЖни
те иgентифиkатори за Това важи както за едноредови комеwгари, т
</head>
забеАеЖkа <!- и ->, ще

~1>)л._,
бьgе пропуснат от кива , разnоложени на много редове. "
браузьра <body> уеб браузърът шворира също и "невидимите символи '
<! -- Истинското съдържание на документа се вnисва те· cuvO~u, koиmo
които nредставляват табулации, нови р едове и връщане
тук -->
ва каретката.
преgстаОмОат табум­
</body> IЛJu. нойи рвgойе и Орь­ Множество интервали се заменят само от един интервал.

~
Щане на kapвmkama, са
Имената на таговете в НТМL 4 могат да се изnисват как· UЭ(Jecmнu nog общото Това означава , че визуализацията на горвия пример ще

'-->-~ Сьзgаотв
си наОиkа ga изписОате
то с малки, така и с rоле:м:и букви. Все пак, възможно е наиuеноОание.бiМи остане същата, дори и ако в кода бяха
. оставеви много ин­
fiO.чJma·
бъдещи версии да изnолзват само мamrn букви, така че тервали в съдържанието.

Всичkи тагове с мами nримерите в тази книrа са представени точно по този на­
буkОи чин .
 16 HTML В леснu cmъnku
ГлаВа 1 Преgсmа8яне на HTML 17
Инсmруменmu 6 HTML
м·crosoft
1
FrontPage
Можете да с'ЬЗдадете НТМL код във всяка nроста те Приложението на Мicrosoft FrontPage е еДЮJ от вай­
обработваща nрограма. За вего не се изисква cne успешните НТМL редактори от типа "това, което виждате ,
софтуер. На nрактика много nрофесuонаJIИсти ....... ...,•.~
е това, което nолучавате
...
nриложението Notepad, включено в Microsoft
FrontPage и подобиите на него НТМL реда.к-rори се изnол­
НТМL файл се С'ЬЗдава, като за11ишете новия тексто зват за създаване и бързо тестване ва. ръчно наnясан код.
•
ф аил в
с разuшрение ".htm" И.IIИ ".html". След това мо'ЖЕ11! Всички те nредлагат nредимства като цветно означение

тJ ,_,gвнв
дn го отворите с която и да е по-нова версия на lV.U.CГ<>so~ ва таговете и остааалия синтаксис, докато четете кода.
Internet Explorer, за да видите визуализацията на орау. Освен това, всички имат и В'ЬЭможност за бърз и лесеи
зъра.
изОьрwОа истинсkа nредварителев nреглед на кода в процеса ва разработка­
Някои по-стари версии ка Netscape и ва други vu~:~v::n..''" ОалиgаииR на HTML koga та му, който симулира визуализацията му в уеб браузър.
и е ОЬЗJ~йЬО ga Оизуа­
може да не разпознаят напълво всички специфика ции ~изира npaOUNIO нenpa- FrontPage съдържа етикети ва страmщи в долната част
HTML 4. Следователно, най-добре е да стартирате уеб 0/J/IBH kog ва екрана си , чрез които можете да nреминавате между

страниците аа HTML 4 в нова версия на Internet прозорец с кода и прозорец с nредварителен nреглед.
Exp]oret·. Така ИJIИ иначе това е най-изnолзваnият
узър в Интернет.

За да ва;шдирате НТМL код в завършен документ, най­

добре е да избягвате наJmчнш·е ваJIИдиращп ПJJIИJJt011ceEIВ
ва програмата, в която е С'ЬЗдаден, защото може да не 11Т1!!. HJВLI' " • 1 IVX/IТYro 1П'1!1. ~. 01/ IDГ
1"'"''''" 1 /VW. V3. otq/ТRihca.l q/,.u:1c t. cltd">
rоварят наnълно на стандартите.

WЗС предлага безплатва онлайн валидациоана услуга,

която бързо ще nрегледа кода във всеки НТМL 4 доку­
мент. с . 7pti.ФCI:D( 1 1'QЩ,jJt' ~3.Р' -->
~P·~..n e<lp>

(~) З•оомнвm•
Ако документът се намира в мрежата, можете да изпо.пэ-<
вате HTML В8.11Идатора на WЗС, намиращ се н а адрес
чв Осичkи страници на http://validator.wS.org, за да извършите незабавна ва­
HTML 4 трябОа ga за· лидация.

почОат с поgхоgящата
Ако документът е ва локален компютър, например ва
DТD gekt.apauия - kakтo
бвшв описапа ма11kо по­ ботния nлот, изnолзвайте адреса http://validator.woiJI.ua
Cъ6emu kъм cъзgameлume на HTML
нагоре.
fi}e-upload.html, за да може ва;mдаторът бързо да ""U'III gokyмeнmu
фай;zа и CJreд това да върне незабавно резултатите. WЗС дава следните общи преnоръки към С'ЬЗдатеJIИТе ва
Валидаторът притежава полезни о1щии и предлага ло­ уеб страници:
мощnи съвети. За да подnомогне изnолзвавето ва кореJС·
тен HTML код в Июервет, той nредставя и графично 1. Omgeляume cmpykmypama u презенm ацuяmа
nотвърждение на резултатите от проверката.
Тъй като Интернет се разраства, очаква се НТМL доку­
Това може да се окаже nолезно за уеб разработчиците, менrиrе да бъдат nосещавани от още по-широк кръг уст­
когато трябва да докажат на хл:иев1·ю·е си, че кодът, кой· ройства , работещи на разл:ични платформи (клетъчни
то '-™ предлагат, е тестван сnоред съществуващите стан· телефони, PDA - персовални цифрови асистенти и дру­
дарти.
ги). По тази nрuчива се nрепоръчва авторът ва страни-
18 HTML 6 леонu cmьnku
неаd
1~a·ra да и зползва набори от стилове за всички acнelt'rlf
нрезеитаци.я,та на НТМL документа.

Тоза позволява на документа да бъде разчитав цu··Jiecu.

от широк кръг устроИства и nлатформи. Процесът на н1Thtamie на секцията Head на стра-
а отделя в б
визираието му се опростява и разходите no ObC:ЛJ.,.,.,,t.U1 e'J't 'foЗII r.1ав т"""л 4 и илюстрира как може да ъ-
1 адева с n.J..I-''~
иа множество платформи намаляват. 111нtа· СЪЗд вана тя.
Прп.,1 ерите показват как да опищете
де tt~ttO.'I 3
вт и как да добавяте скриnтове и на-
НТМL докуме
2. Обърн е т е 6нuманuе на унu6 е р сал наmа e;ttiH ве ~-ъм страниnата.
go cmъnнoc m 6opll о1' CТlt.'tO

Препоръqза се ва авторите на уеб cтpamЩJ.i да вземат

под внимание въпроса с достъnността ва HTML доку­ Темu:

ме нтите от голямо разнообразие специални платформи, еьgьР*.анuе нэ сеkцuяmэ Неэd 20

особено от потребители с физически ограничения. lVli!'IOr'O' заглэ6uе нэ gоkуменmэ 21
тагозе в HTML 4 nритежават атрибути, като на n ример
меmаuнформэцuя 22
lab el, Itоито м.огат да бъдат добавени:, за да осиrур.ят до­
пъдни.теJJна ю.fформацп.я за тези потр ебители. Kogupaнe нэ знэkо6еmе 23

Също та 1са, с разрастването на глобализаци.ята, HTML меmэgэннu зэ търсене 24

докумеltтите могат да достиrат и до отдалечени кръгове Пompeбumeлcku меmэgэннu 25
от nотребитеJrи, които разполагат с различни комп ютри добаВяне на ckpunmo6e 26
този, на който е създадена страниnата. Поради тази при·
добэ6яне нэ нэборu om cmuлoBe 27
чина авторът ва страницата трябва да добави в докумен­
тите, nредназначени: за тях, информация относно изпОJJЭо С8ьрз6эне на pecypcu 28

вавия език, посоката на текста и кодирането.

З. Бъ р зо р енg uра не на mаблuцu

Моделът на представянето яа табJшци в по-ранни версИИ

на НТМL често налагаше свалянето на всичките данни at
таблицата, nреди браузърът да може да я ревдира на мо­
китара.

Преnоръчва се наn създателите на уеб страници да из·

nолзват модела на табJIИitите в НТМL 4, тъй като той съ­
държа доnълв:и.теJIШi!. възможности, позволяващи на бра·
узърите да рендират табJшците по-бързо.
 rлаВа 2 Сеkцuя Head 21
20 HTML В леснu cmъnku

Сьgьр>kанuе на cekцuяma Head на gokyмeнma

Секцията Head ва НТМL документ следва дире~
0
ЗI:Щ'ЬJIЖителвата DТD дефпв:в:ция, както вече бе пос:оч.
в глава 1 и съдържа информация за този доl\."УМе вт.
Това обикновено включва заr лавието му и К.11Ючови
ми, които да бъдат използвав:и от търсачките, за да
оnишат. Секцията може да съдържа също и скрtmтов
If набори от стилове, които определят как да бъде по 1rсаа
но съдържав:ието.
В HTML 4 цялата секция Head се загражда от двt:>ЙIIta'n
тагове <he ad> <lhead>, въnреки че можете да ги ИЗIIIQI
вате изцяло по ваше желание и служат единствено за
груnиране на съдържанието И. Пр и четене ва НТМL
е полезно секцията да е rруаи:раяа, тъй Jtaтo по този
чин се разграничава по-лесно. Затова в примерите в
ttюrra сме използвали тези тагове.
BceКJi НТМL 4 документ трябва да притежава заглавие.
То може да бъде само едно n тр.ябва да бъде записано
между таrовете <title> и <ltitle> в секпията Head.
Заrлавнето може да се състои и от нормален текст, и от
ro
- ставяяе ва специални знакове , като нап-
кодове за пред знакове
виЖте
ример &, з нака за запазена марка или ударени .
5 S3 поввче ин· Въnреки че заглавието не е част от същивекото съдържа-
~uuя 38 :;наkобвтв ..nAcrra H'fm 4 постановява
н.ие на документа, спец-и: ф икац•..,·~
ва всеки браузър да ro nоказва на потребителя.
По тази nр1<1"-1И:На е nреnоръчително заглавието, което да­
вате, да бъде кол кото е възможно по-описателно, за да
помогне за възприемането ва документа.
Наnример, документ, нарече-и Въведение, не лоясвява за
каква област точно става дУма, докато Въведение в
"'-""ето и темати.ката
НТМL 4 дава обяснение за съдърж~

~ Тагът <head > може като опдия да включва и нов атrJИ• . r.ry.

~ ПоОвче
бут, наречен p r ofile, за да специфицира мест<>пс•ложеш Традициов:ните комrrюrърни уеб браузъри ще покажат
ето на профила на метаданните, който се изпо1Iзва от заглавието ва докумеята в заглаввата лента в:а nрозоре­
поуробности за мвта­
кумента.
gаннитв моЖете ga ца им, както е nоказаво nо-долу.
намврите по-нататьk а Атрибутът profile не е широко използван, во е вк;IJIO'qel
тази ZAaOa. <head>
следващия пример от съображения за пълнота и се за­
<titlе>Въведение в НТМL 4</title>
писва в НТМL кода по следвия начин:
</head>
<head profile =
rnrю
" h t tp : //www . purl . org/meta data/duЬli n_core"> : ::н-·.>:н"" о НТШ.-1 - Mic ros~f1ln1crne1 f~pkн~r
6а (,dll ~ f.t~Мt< liA'· ~

<! - - тук се записва сс.цьржаиието на сеЮJИята Head ~ ~ ~ j)s-Ф * F.vot eJ Е) ~ -

</head>
Както и мноrо от друrвте нови възможности в НТМL 4,
атрибутът profile е добавен, за да nосрещне ев

~ бъдещи nодобрения в изnолзването на езика. Има опре·

~ ЗапоОвче делени очаквания за начина, по който НТМL стр аюtца

ще бъде визуа;шзи:рана от вай-разJшч:в:и браузъри ( n01'-
информация относно
атрибути на таеоОв реби:телски аrенти), като например мобилни телефоНЯ.
ОиЖтв емОа 4 PDA и друrи устройства, а ве само от традиционв:ите
узъри.
 22 HTML 6 леснu cmъnku
rла6а 2 Сеkцuя Head 23
Меmаuнформацuя
_ е на знаkо6 е mе
Метаuнформаци.ятn nредставлява данни, onиcвaun
ГИ ДаБЮ1. 1 коguран Тагът <me
t a> може да подаде wtформац.ил ва браузърав-
~
за кодирането ва знаковете в съдържанието на доъ.-уме

В контекста на НТМL документ метаданвате оns1сват

мия документ, а не съдържанието му. Те се дecpJtm u~r.o
1 lO вьпреkи че
Ьti)kum!WIO. пре­
та.
На атри бута http-equiv се присвоява "Con tent-type '
11

секцията Head, като се изnоJrзва тага <m eta>. не е »9 е О сеkии· conte n t да оnише съдържа1fИето на
fWIO така че атри бJ'IМ"'.Т
• -
-о
Този таг сс 11зnолзва само за декларация ва даюm. в пор~ на f)cuчku
lfiТII Н оkАЬчОа • доъ:умента.

рибутите му и няма асоциирав затварящ таr. ~.,_нтиgа

У"" rnagaннu. описОа­ На първо 1'.1ЯСТО, трябва да оmШiете съдържанието с
ДругШ/т
Оьзмоikен атрибут 11а В nовечето случаи като атрибути се изnолзват content те .ve"""" от знаkоОе. ''text/htrnl·" за да укажете ва браузъра да очаква да по-
щи на.,."- а
тага <теtа> е scheтe. h t tp-equiv или con ten t и name. koumo сте използ аt~и
НТМL ' ' съдържание. След него трябва да о пишете
=рането на знаковете чрез "charset=naбop от эпа-
МоЖете ga намерите
пример по-нататьk а Атрибутът h ttp-equiv указва на сървъра тила на """"IUI.I
тазиелвОа
те, докато conten t специфицира car.mтe данни. кове
11
.
Наnример, тиnът на данни "Exp ires" се изnолзва, за да Има буквално десетки набори от звакове в уn~треба, но в
таблицата по-долу сме вкmочил:и в:якои от наи-често сре­
накара уеб браузъра да свали последната версия на
пицата. щаните. Посоченият пример сnецифицира кодиравето
window s-1251".
В вормадн.ня случай браузърът би свалил кеtuираво "
nие на уеб страницата, а1со е налИСJно в кеша му. Име Н абор от з на кове

I\ато използвате тага <meta>, можете да настроите nе­ windows-1251 Кирилица за Windows
риод на ваJtидност за страницата, който да изтича след US-ASCII US ASCIJ знакове
оnределено време. По този начин можете да накарате JS0-8859-1 Стандартни JSO Latin-1 знакове
браузъра да nотърси nоследтш вариант на страницата UTF-8 Многоезичен универсален трансформи-
сървъра, ако е надвишен nараметъра, зададен в ращформат
conten t .
Shift-JJS Японски знакове
Следващият nример задава ва nериода на валидност Big5 Традиционни китайски знакове
стравицата да изтече на 16 декември 2005 г. Форматът

[1)')"·~·~·
на датата, вrслючева в атрибута, е стр ого оnределен: <head>
<head> <titlе>Иэnолзване на кодиране wiлdows-1251</title>

<titlе>Страница с nериод на валидност 16. 12 . 2005 г. в.ите ga постаоuтв <meta http- equiv="Content- t уре "
</title> moчta и запетан (J слеg
content="text/html ; charset=windows-1251">
ctnofiнocmma teXf/htтl.
<meta http-equiv="Expires" </head>
content= "Fri , 16 Dec 2005 12 : 00 : 00 GMT">
</head>

Можете и да присвоите Refresh '1\"'ЬМ атрибута h ttp·

equiv, за да nренасочите потребителите към друго мeC'I'(J
положе:ние , но не е особев:о nреuоръчителво, тъй като
кои браузъри не поддържат този метод. Вместо това,
жете да изnолзвате сървърен скрнnт, за да цре
браузърите.
24 HTML В леснu omъnku
ГлаВа 2 Сеkцuя Head 25
Memagaннu за търсене
- peбumeлcku меmаgаннu
Търсачките се изnолзват от повечето портални xu.rr...... norn
По-ефективното изnол зване на метаданните позволлва
сайтове, като наnример Dir.bg, Гювеч.бг и Yahoo, за
ва автора на документа да специфицира повече потреби­
връщат като резултат nреnратки към документи, ...,_,_
телскtt свойств а, коиrо да бъдат nолезни за браузъра .
жащи зададените от nотребителя кточови думи.
Н аnример в страюща, оmtсваща тази киша, ще бъде
Методите, които те използват, са различни, и nостояв:но
добре да добавите доП'ЪЛнителва ивформадnя за автора и
ват обновявани, за да се пОСimнат още по-добри D@.:nr•-
издателството като метадан:ни:
Ho все пак, повечето тър сачки се обръщат (лове чnPI'I­
<head>
нo) към дааните , екточени в тага <meta> в секцията
<title>НТМL е лесни cтъnки</title>
Head, за да върват преnратка към този документ на
<meta name="author"
ребителл.
content= "Eкилa на издателството">

Двете неща, които те се опитват да открият в дOJ(Y~Ilellm <meta name= " puЬlisher"

са ключовите думи (keywords) и оnисанието content= "CoфтПpec " >

(description). 3а да направите документа си видим за <meta http- equiv= "Content-Type"

търсачките, важно е да екточите и двете.
content= '' text/html; charset•windows-1251 ">
</head>
~ Ключовите думи трябва да бъдат изредени в таrа
Выможвостта да добавяте потребителски данви към ат­
~
<m eta>, който използва атрибута name за cп•eЦJI'IcPIИQI&i
~ ИзползВай· р а не на термива ''keyword s". Към атрибута content рибутите на тага <meta> ще бъде nолезна, само ако те
тв само малkи бykOu за
kАЬчоВитв gyмu, тьй
същия таг се добавя 1tратък сnисък на свързан:и стАа~,. Ш даgвният могат да бъдат р азnознати. В стремежа метаданните да
на страницата думи, които се появяват peaJtНo и в с:ъ­ пр1М1р nokaзOa по­ бъдат консояидирави се създава стандарт ва профила
kато поВечето потре­
аgм/Ючеlfо wполз/Jанв
бители използват пре­ държап:ието му. Добре е те да бъдат nодредени в реда, им, наречен "дъбJI:ИВско ядро" (Dublin Соге), което опре­
111//lfJmВgaННU
gимна тях. а ияkои тьр· •
които отразя:ва важността им за темата. деля набор от препоръчителни свойства на изданията .
сачkи са чуОстОиmвАни По-nодробна и актуалва информация за този nрофил и
kьм рвгистьра на буk· Ошsсаиието трябва да бъде екточено в тага <meta>,
Вите. който използва атрибута nате, за да специфицира nълви специфttкации можете да намерите аа адрес
мина "description". Към атрибута content ва този http://purl.org/dc.
трябва да бъде добавено коректно onиcam:re на cn1aR81 Свойствата, които се дефинират с профил, получават
~

оо-мадко от 25 думи. стоиностите си чрез допълнителни тагове<meta> в доку-

В следващия nример секцияrа Head ва документа мента. Този таг лритежава също и атрибут scheme, който
държа метаданви, които помагат на потребител да може да използвате в съответствие с н.якой профил, за да
ри чрез Т'Ърсачка уеб страница с информация за VНI!III nомогнете на браузъра да интерnретира метада нн ите
nравилно.
ситетите в Бълrарил:

<head> В долния nример един nредполагаем nрофил дефинира

<titlе>Вългарск:и университети</titlе> схема, за да сnецифицира формата на бар-кода ва една
RВИrа
<meta name= "keywords "
соntеnt:''университет, Вьл:гария , образование , ИH1i!JO!:»S111 <head profile="http : //www . soft-press .com">
<meta name~ '' desc r iption " <titlе>Проектиране с уеб стандарти</titlе>
соntеnt=-"Информация за университетите в
<meta scheme="ISBN" name,. "identifier"
content= "9546853232 ">
<meta http-equiv="Content- Type "
<meta http- equiv="Content-Type"
contenta "text/html ; charset=IS0- 8859-1 "> content=" text/html ; charset=windows - 1251">
</head> </head>
26 HTML В леснu cmъnku
ДобаВяне на
[1Х) "''"_.
бUNio ga пишете зат­
барящи тагобе а част·
та на gоkумента, сtt­
gьрЖаща сkрипт - тех­
ничесkи пореgииата
симВаш <1. nOCAegfJaни
от kоято и ga е буkОо,
ще бьgе Оьзприета
kато затборяша за
<Sctipt>. МоЖете ga го
избегнете, kато изпи­
шете затборяшия таг
на отgе,о.ни части, kak-
тo е напраОено а при·
мера. ТоОа npegnaзOa от
рисkа Оа,о.иgоторьт
забе,о.еЖи непраОилен
go
затОарящ таг О сеkии­
ята Head и ga обяаи
koga за неОа,о.иgен.
ГлаВа 2 Сеkцuя Head 27
ckpunmo6e ДобаВяне на наборu om cmuлo6e
Скриптове, заградени с таговете <script> <lscript>, Към секцията Head н а НТМL 4 документ могат да бъдат
гат да бъдат добавяни към документ, за да бъдат ltзnn. добавяни набори от стилове, конто да оnределят начина,
в ани от nотребителите и да осигуряват динамично съ. оо коИто ще бъде показано съдържанието му. Правил ата
държание. Пре nоръчително е да nоставите скриnт.n11 ,_ на н аборите от стилове трябва да бъдат затворени между
сеJЩ1s.ята Head. таговете <style> <lstyle>. Езикът ва набора от стилове
трябва да бъде сnецифициран в атр ибута type във вид
Атрибутът type на тага <script> специфицира езИJtа
изподзвания скрJ.mт, като наnример "text/javascrip~
"text/css".
да се избегне опасноспа скриптът да бъде показан 3а да избегнете ри ска правидата да се nоявят в докумея­
теs~ст в по-старите браузъри, които не разпознават та във вид на текст в тези браузъри, които ве разnознават
<scrip t>, трябва да поставите блока със скриnта ме·ЖJI тага<style>, наборът трябва да започва с <1-- и да за­
<!-- и 11-->, за да го скриете. вършв а с 11·->, за да остане скрит.
Можете да поставите друтото съдържание извън сеli:цв Следващият пример е надграждане върху nредишния,
Head, t(ато изnоJiзвате <noscript> и <ln oscript> за като добавя набо р от стиJtове, за да определи висо"tИВата
зъри, tto и·ro не разпознават скриптове. на целия текст. ТоИ оtlределя nървата буква да бъде зе­
лена и два пъти оо-висока от оставаляя текст.
<head>
<meta http-equiv=- "Cont:ent- Type " <head>
content="text/html; charset=windowз-1251 " > <meta http-equiv "Content-Type"
<title>Пpocт np~~p за JavaScript</title> ffi content="text/html; charset=windows-1251 ">
Ш Тозипример
<script type='' text/javascript "> <title>Пpимep за JavaScript с определен стил</~itlе>
<•-- поЬзб1 kak иоЖете ga <sty1e type= " te x t/csз " >
document.\-lrite("<p>Toвa е JavaScript<" ) ; go6a{Jume набор от р 1 font - s1ze: 12pt; )
document.write("/p> " ) ; cmrмooe kьм gоkумент
flo.nынu npu11epu са p: first-1etter 1 font-size : 2006; color :green }
11--> 91gвнu nо-нататьk О
11-->
</script> ~
</style>
</head>
<script type="text/javascript">
<nоsсriрt><р>Документьт използва JavaScript:< <!--
document · wri te ( "<р> Документът изnолзва JavaScript <" ) ;
document . write("/p>" ) ;
11-->
' . в,-. В gнешно </script>
доt:УмtiМП.f taROIDIAJ~I lltaeo се UЗПОАзОат
~~о стари бра. </head>
.._" то не разпоз.
., 'QQi l'llaгoOeme <Щ.fе>
Скрилтове в отдадечеЮf файлове могат да бъдат ,. '1Ь ЗатоВа no-
чен:и чрез тага <script>, като добавите атрибута src. ..::"blt О kнигата д~an.11Dt:~J.w~
т 7 !lllJt..ьчoa.we та..
то описва местоnоложението му: 14 аа clrpиtJaнe
<зcript type " text/javascript" src="javascript l• "Pииlspume
</script>
28 HTML В леснu cmъnku

С6ьрз6ане на pecypcu
Тагът <link> осигурява възможност за връзка на дo~'YII
та с ресурс и, като напримервънl!lн н набори стилове.
.

може да бъде използваи само в секция Hea d, во веsпса ще ви демоветрира как да в кл ючите тексто­
Стойност­
та, приебоена на атри·
ва секция може да съдържа много тагове <li.n.k>. tsce1011 тазн Г- ~iе в се!ЩИЯ'Га Body на НТМL документ.
111

бута type, трябОа ga т.ях се използва, за да специфицира три атрибуrа, ощ:~е111 во С'Ъд"ЬР .~cr таrове за разположекие на инфор­
с:аtU' са scu -..~
бьgе от О;v.иgен MIME Jl.Я1J.(И тщ1а, местоположението и връзката на ресурса. 01111 е даден npl{l'.1ep за всеки еднн от тях за
_ .... CI"I'Я. като
тип - моЖете ga св аа~·-·
Атрибутът href специфицира местоположението, а .nане н_а действието им .
обьрнетв kьм глаОа 8 за итос:трl.,..
списьk на най·използба· декла рира типа на ресурса, например "textlhtml".
ните MIME типоОе. бутът r·el указва вида на връзката към документа като
Темu :
един от следните:
Cekuuяma Bodv на gokyмeнma ЗО
1. stylesheet - яабор от стилове 9. help- помощ
Раэgвляне на съgьрЖанuеmо на nараграфu 31
2. altemate - заместитеJJ 1 О. bookmark - бележка
ЗаnочВане на но6u pegoBe 32
3. str.11·t - начrшо 11. contents - съдържание
4. пехt - следващ 12. index - индекс Uumamu u блоkоВu цumamu 33
5. prev - предишен 13. glossary - речник ЗаглаВuя 34
6. section - секция 14. copyright- запазе на ма)~l ОmkрояВане на mekcm 35
7. s ubsection - подсекция 15. chapter- глава (част) Формаmuране на mekcm 36
8. appendix - rrрИJюжение (апендикс)
Преg6арumелно формаmuран mekcm 37
Следв ащият пример изnолзва таrа <link> два пъти- за
Горен u gолен uнgekc 38
добави външев набор от стилове и за да осmури ивфс:1р11
Agpec за koнmakm 39
ция ва търсачката къде да вамери следващата CТ))aJDIIiUI
Поkаз6ане на kog В mekcm 40
<head>
<meta ht:tp-equiv="Cor.tent-Type" Гlомощнu тагоВе 41
content="text/html; charset=windows - 1251"> Изmрu6ане u ВмъkВане 342
<title>Toвa е примерна страница - част 1</title>
<base href="http : //dornain . com/docs/pagel . ht m1 ">
<link href= "a .css " rel=" stylesheet " type="t ext
<link href="page2 . html " rel="next " type=" text /html
</head>

~ И<Ь•sв>. '
Обърнете внимание, ч:е в примера е вкточен тага
<base> за де финир ане на nътя към "базовата CТI)aJПD
на следващите страf.LИДИ. По тази причина този таг,
<liпk> нямат затОарящи се използва, трябва да бъде nоставен в секцията
тагоав.
преди изброявавето ва други адреси.

Базовият nът по подразбиране е този на активнJUI

мент , но използвавето ва таrа <base> позволява
ве, намираiЦИ се в посочената в него паnка, да (уьД8'1
ресирашi само чрез имената им.
 ГлаВа 3 Тekcmo8o сьgьр>kанuе на cekцuяma Body 31
зо HTML В леснu cmьnku

Cekцuяma Body на gokyмeнma - е/\ян е на cьgьp>kaнuemo на nараграфu

раз9
CJteд задължителките DTD дефив:ици.и и секци.я,.а Текстовото съдържание обикновено е разделено иа изре-

следва същивекото тяло на документа, което включва чения и nараграфи , за да бъде nо-лесно чете но и възn ­
държа нието му . риемано.

~ Пр"•'Р"m'
Спеw1фикацията на НТМL 4 все още съдържа та:rо~... Основните тагове за разделяве ва текстовото съдържанiiе

<body> <!Ьоdу> , во те вече не са задължителни. A'l'l~• ва параграфи са <р> и <lp>.

тите на <body>, които са използвани преди за OПJ>eJilu
С kog 0 kниеата изnОАЗ· Те р азделят визуално текста, като стандартно оставят по
Оат незаgЬI\Житеtония яе н а цвят на фона, на текста и на х и nервръзките са
два nразни реда между nарагр афите.
тае <body> за очерта· JteЗJIИ от уnотреба.
Оане на сеkиията Body Въпреки че браузърите моrат да рендират nравилно тек­
на страницата.
Всички тези цветове сега се дефинират чрез набори
стилове.

Едивствеmrrе дв а атр11бута ва <b o dy>, които са пш..-....

[$1._..
НlkOU 6рау3ьри ga игно­
ста n без затварюдия таг
обр азяват със стриктния стандарт ва НТМL и nроnуска­
<lp>, те са зад'ЪЛжени да се съ­

~
вето му не е препоръчитеJiно . Тагът трябва винаrи да бъ-
в алидни и в HTML 4 са on1oad и onunJoad, които рират пара:рафи. kоито
де вкточен , както е показано в долв:ия nример и във

Ш Поиеgнете
uaOa 4 за поуробности
относцо специфицира·
нето на цОетоОвте а
наборите от стиtооОе.
IIRII8m заmОорящ таг
да бъдат използваli и за стартиране на скриптови mvRI
<lp> всички nримери по-нататък в 1tнигата .
ции при зареждане и затваряне на документа.
<body>
С11едващият пример ишострнра секцията Body и из1ав
J avaScript фушщwrга alert() при зареждане и зa•rв11tn <р> Тази глава ще ви де.'Юнстрира как да екsпочите
на страницата. текстово ~ние з секцията Воdу на НТЮ.. докуv.ент .

</р>
<head>
<title>Пpимep за Load и onunload</title>
<р>
</head>
оnисани са всички тагове за разположение на
информацията, като е даден пример за всеки един от
<Ьоdу onload= "alert ( ' Здравейте! ' ) "
тях за ИЛJОСтриране на действието У.м.
onunload="alert ( ' Довижnане ' ) ">
</р>
<р><! - - тук вмъкнете съдържанието на
документа --></р>
</body>
</body>

[1%) Отт~
, ... ,,... IJ

т... ,.......... аt)4 -·r-r-

-----с...u~п е,_~
Т 80a.&\.P&8811r8C0118n•__,a.aИ'114,:~wf

нататьk ияма ga Оk....Ьч· Оnкса.м111 са l(lit"'.:a тwoo.eu piOnOJIO&elat •• ••topм..uuta.ьroc.~.uetl apat.t.-r-~.a8ktlttt tiИ.I!i or ta\.a
баме а примерите сеk­ 'U*тpИplllt Ма .ltlr:пa~ 'IN

цията Head fDТD gвфи­

нициятаl с ueto спестя­
nане на пространстОо.
0:
),._..",.......... --................ - - -
-- ... . ~ х

. . . . . . . . . . . .-4 • . , . _ )(

ь--
 32 HTML 8 леснu cmъnku ГлаВа 3 ТekcmoBo съgър>kанuе на cekцuяma Body

ЗаnочВане на но6u pego6e rnu u блоkо6u цumamu

Когато съдържанието на сеlЩWП'а Body се IIUJf1З В спецификациите на HTML 4 съществуват два тага, с
браузър. текстът ще се продължи автомат~в
изу~uь.. кото можете да изведете ЦJtтaTIJ в текстовото съдържа­
.. " ..о Ва ние в тялото ва документа.
ващ ред, когато дос1 ю не до десния край ва ooлaC'I'I...
която е изведен.
Таговете <q> и <./q> позволяват да вмъкнете кратки от­

Браузърът автоматич:во ще поrърси посnедюtя lllrl'lll къси с цитат в обикновен текст.

ва реда в текста, за да започне оттам новия Можете да използвате таговете <Ьlockquote> и

ред.

Това гарантира, че редовете ще се разположат .,НJII'I'fi~ <./Ьlockquote> , за да вмъкнете по-дълrи цитатп в текста.

rевтно" и че последвата дума на реда няма да се И двата таrа и:мат един н същ атрибут, варечен cite, АЪМ
на две части.
коЙ'Го можете да nрнкач~rrе адрес ва пзточ:шtка ва цита­

Нов ред може да бъде започнат а ръчно чрез eДJ!IIJ!Pai та.

таr <br>. Той се изnолзва винаги без затварящ таr. Повечето браузъри ще рендират съдържаиието в:а

Тагът може да бъде вкточен колкото nъти се валаrа <Ьlockquote> nросто като отместен текст, както можете

която и да е точка в текста, за да бъдат за почнати да видите и в оримера ао-долу.

ИJIИ nовече нови редове. Не трябв а да nолзвате този метод, за да накарате nасаж

В следващия пример тагът <br> е използван за ОП1Р81 от текст да 11зrлежда ло определен начин , тъй. като ве

пяне на начина, ао който да бъде показаво тeкCJroi!IOIIOi всички браузъри ще го изобразят оо едив и същнач:и:в.
държав:ие.
Целта на НТМL 4 соеuифакацията е браузърите автома­
<body> тично да поставят кавичtси около цитата, заграден от тези

Тази глава ще ви демонстрира таrове, въпрекп че не всr1Ч1\и ro пзrгыmяват.

<br> <body>
как да включите текстово С'ЪДЪрБаНие <p>vMF алармира: </р>
<br> <Ьlockquote clte="http://www.netinfo.bg">

l~C,-a.~
в секиията Воdу на H~1L документ . <р>Иберийският рис ще nоследва с:ъдбата на
саб.пеЭ'Ьбите</р>
</body> </Ьlockquote>

~] .~
те koga <br> <br>, за ga <р>Праисторическият тигър е nоследният изчезнал
остаВитв gOa празни nредставител на с ем . Котки от около 1 О ООО години
рвgа 8 mвkcma. насам . </р>
~ _, :!) 11 ; ~ -.. t:~- е . · ..,_ ~ -
"""'"' ::" 5 за ga разберете </body>
na. ~ Щt • • ::~:•*•с:тр~ 9111Зt1D1.з8атв ka-
01..1а aQJOЧan Tdt'Т080 t-..:t'98.&.1tкt
• <OJtiiAТO~·· mю. ....."..., ~ Онормален 't'W" ~ t- , • .:f*l

, _:.:) '-•"' 'f:tr-· €1

l!f.rrdc:::ar.p•c: a;r Doc.at.a• CU~&tl u c.W.nt.tatt

~cpnt'31Ьn fllnJ!: noa-r..ta-.c IQ"'n8a.t CV,ICТ....,.ta аа ccow kC'Dll ot OIEt..:t) 10(;(() :-c.:tU1I &Ж:.А.М
34 HTML В леснu cmъnku ГлаВа З TekcmoBo съgърЖанuе на cekцuяma Body 35

Загла6uя ornkpoя6aнe на mekcm

Загnавията в нт~ документите се изnолзват за ,М."(DI
ни.ране на се1tции от текст по същия начин, no коИто
зnrлавията на страницата, която четете в мом.е}!Та.
шест набора от тагове за заrдави:я, като от най-в исоко
во е <hl> <lhl>, а от най-н:иско- <h6> <lh6>.
Като ця11о браузъl)ите показват ЗаJ'лавията с по-толям
шрифт, за да се nодчертае вэжвостта им. Освен това
могат да rи изnолзват и за да създадат списък ва т~11.11111
засегнати в документа.
Простият nример no-дoJly илюстрира всяко едно от
вията така, както се визуализира в Microsoft Intemet
Explot·er:
Текстът в тялото на НТМL документ може да бъде откро­
ен, като укажете ва бъде представен с удебелен , с накло­
11
нен шрифт нли и с двата .
За да удебел:ите текста, трябва да то заградите между
двойката тагове <Ь> и <IЬ>. Друr вариант е да ro nоста­
вите между татовете <strong> и <lstrong> (за засиJiване
ва звачевието на текста), които в nовечето случаи ще го
' nокажат също с удебелен шрифт.
За да наклоните текст, трябва да го заградите между
двойката тагове <j> и <li>. Можете вместо това да го отк­
роите, като използвате <em> и <./em >, които в ловечето
случаи ще го nокажат също с наклонен шрифт.

<body> Можете да маркирате текст, за да бъде показан удебелен

и наклонен, като поставите едната двойка тагове вътре в
<hl>Заглавие Hl</hl>
другата, както е nоказаво в следващия пример:
<h 2>Заглавие H2</h2>
<hЗ>Заглавие НЗ </hЗ> <body>
<h4>Заглавие H4</h4> <р>Този текст може да бъде<Ьr> <Ь>удебелен</Ь> или
<h5>3аглавие H5</h5> <i>накnонен</i> или <Ь> <i> удебелен и наклонен</i>
</Ь> .
<Ьб>Заглавие Н б</ hб>

~
</ body> <р> Този текст може да ~е <br>
<strong>зacилeн</strong> или <еm>откроен</еm> <br>
~ ТагоОете за t""'"""'
или
</р>
<strong> <еm>засилен и откроен</еm> </strong>
заглаОин gобаОнт вОто­ v w@) ') .....) ....... -t·f ~ 0
матично ноа peg слеg -~--- </body>
kран им.
Заглавне Hl
ЗаrJшонс I-12

т(l"). 1ttr't: X>at..,R.& 6•4•

~6•n•н ••» ~:JCtcW.rlri 'taU/i'~w и ~NitH
Том• fdJ:r *•t .u 6"~:
ПC:IS.1•tt1U'X0' ~
tutu ~ и lltni<JNНf.н
 37
36 HTML В леснu cmъnku
ГлаВа 3 TekcmoBo ~ъgър>kанuе на cekцuяma Body

формаmuране на mekcm ~umелно форм.аmuран mekcm

В общи.я случа й и по nодразбиране текстът в
.....sg8 р
··r- н·тМL е nолезен когато искате да заnазИ'Iе
тагът <pre> в •
НТМL документ ще бъде показан с раЗJ~:ИЧ:Rа lliii[DIII
характеристшrnте на формата на nредварително форма-
големана н а шрифта сnоред настройките, КОИТо тирав текст в докумеят.
теJLЯТ е изб рал за браузъра.
Всеки текст, пост авея между <pre> и <.Jpre>, w e бъде та
nо-

Можете да из ползв ате таrовете <tt> и <ltt>, за да казан с nъ рвон ачалн:ите включе ян в не го интерв али, -
н а б раузъра да визуализира текста, като прило-..
буладии и нови редове, известни под общото название
деле на ширива на шрифта, кояrо вие избе рете. бели nолета '" .
"В общия случай, браузърът няма да разnоложи този те~ст
Можете да nромените големината на шрифта чреа
вете <Ьig> и <IЬig> , за да бъде nоказан с размер,
на екрана така, както разnолага останалня текст, и наи-
голям от този, който се използва по подразбиране
вероятно ще ro заnаз~l с фиксирана широчина на шриф­
дартния текст .
та, както е показано в СJtедв ащия nример:

'(/

МоЖете go
Аналогично, можете да използвате таговете
<lsmall>,за да на1сарате текста да се nоказва с 00.._.
шрифт от остаиаJШЯ.
<sJma
[1} "~'"~
В11/11 и фиkсирвните
IЩJOUIU нв шрифта·
<body>
<р> тази глава ще ви демонстрира </р>
<pre>
използаате миогоkрат·
Примерът итострира как може да бъде фо1рNtат:щи.. /llml се onpeg8/ollт от
но тагоаетв <big> ш.и как да
<sта/1>, за
ga уkа>kвтв 8 1 tx*umв на опции·
гомма промяна ua раз·

мера на шрифта, приет

ва текста на екрана , като му се nриложи шрифт с

ра на ширина и различви размери:

,.,_,..
• • tipayJЬPB на пот-
текстово еъдържание</рrе>
включите

</Ьоdу>
по поgразбиранв. секиията Воdу на НТМL документ.</р>
<body> <р>В

s.
<р> Тази глава ще ви демонстрира как

<br>
<tt>дa включите текстово съ~чие</tt>

<Ьr>в секиията Воdу на <Ьig>ВТМL</Ьig> документ.

fJo tdt
u ~
!оо-
о
· - t;* ...
~~ ;. Р -" w·-- е tp· ,., ~ ·
iln -~

<br>
<зmall><зmall>
...... .. ,..
Оnисани са всички таrове за разnоложение на
информацията, като е даден nример за всеки един
от тях за ИЛ10Стриране на действието им .

</зmall></small>

</р>

</body>

В ·

'fa• ra-.a ~ 811 A;'"tlk>MCfJI•f а tc8'

а• .,_,..,.._~ .,..~ ""f't'~ ~PL~

• .-f'naan• &.octr •• HTЬIL.cr;C)'Ntat

-- -·· ~--· ... ~- ·-- .... ---.---.~~-----
38 HTML В ле снu cmъnku ГлаВа 3 Т ekcmoBo сьgър>kанuе на cekцuяma Body 39

Горен u gолен uнgekc за koнmakm

Можете да използвате таговете <sub> и <SUp> 8 ,.,реС тагът <address> в НТМL се изnолзва, за да осигури ив­
за да пок ажете избрания текст отместен вepтнк:llJIIIIli формация за осъществяване ва конт!Тh-r във връзка с да-

,.,
ROpMaJН{aTa ЛКНJJЯ на реда.
ден сайт.

Когато изnолзвате _и, за да създадете - Той често може да бъде открит в началото или в t..-рая на
индекс, текстът ще бъде смъкнат с приб1шзително документ, nредтэ.rайки ареор атка към страаица, която
вината височина щ1 останалите бу Jtви надолу .
"'/._ 3а поВече да:ва nовече информация за автора му.

По подобен начин, таговете <sup> и <lsup> ще ,..." 311 ~ипер/J­ можете да го използвате също и за да осигурите "ИЯфор­
~
....-..,•-"~~OIIJ.meu.збa 7.
текста с nриблизително полов1'1Ната височина на ма.uия за авторството на оnределена форма в документа.
лите букви наrоре, за да го наnравят горе н индекс. в следващия nример тагът <address> предлага nmерв­
Забележете, че въпреки че nозицията му е из1ме,сn111 ръзка към друга страница, на която можете да намерите
текстът обикновено nродължава да се nоказва със информация и за .цруrите кни:ги ва издателство СофтПрес:
шрифт.
<body>

~·-
Таговете за горе н и долен lПТДе ttс са особе но no.ne:~ВII
<hЗ>НТМL в лесни стъnки</hЗ>
искате да nокажете текст ва чужд език .
<р>Книгата се nредлага от издателство СофтПрес . </р>
Следващият приме р илюстрира ве ртикално от1~е4:тв1 ,...." браузьрьm в <address>
на текста и като горен, и като долен индекс: u •• mвkcma зaгpa­ За да разгледате и дру!"АТе книги на иэ.nателството,
glll 11111 тш <addre~> с
...,, wpuфm.
nосетете <а href- "http : //www . soft-press . com">
<body>
ОФИЦиалния уеб сайт на иэдателството.</а>
<р>
</address>
Химичното означение на кислорода е O<sub>2</suЬ> .
</body>
<br>

~ Единицата квадратен метър се означава като

м².
.........
~ МоЖетеgа
е ~ .
<р>

изnо1130ате таеа </body>

<small>. за ga умалите
gотмнително шрифта
на знаkа .2·
I!!J "
....
Xka&Jr'IROТO <QNA"CCMir ма rtiCJI~·· f! о)
ЕА••цnа па ~атt• M"nr· tr 01ffl"f8-J. nro.;
40 HTML В леонu cmъnku ГлаВа 3 TekcmoBo съgър>kанuе на cekцuяma Body 41

Поkаз6ане на kog 6 mekcm r- LЦHU mаго6е

flofAO Таrовете <abbr> <labbr> и <acronym> <lacron ym> мо-
Спецификациите на НТМL 4 предлагат три. тага за
~ цифич.ни цели при описването на части от n-pюrpaмi!IR
гат да бъдат използвани, за да заградите с тях съответно

~ Тагьт <var> когато той трябва да бъде nоказан в документ. съ:краш.ения и акроними.

Те могат да бъдат полезв:и, ако например искате да ука­

означаВа еgинстВено. че Таговете <code> и <lcode> се използв ат, за да се
mekcmьm описОа про· жете да бъдат проnуснати при автоматичната проверка
чи, че те кстът междУ тях е наистина nрограмен к
менАUОа О програма, а не од.
на nравописа.
я gektoapиpa. Когато текстът отразява променлива в nрограмен
Таrовете <d.fn> и <ldfn> можете да и зползв ате , за да мар­
може да изnолзвате <var> и <lvar>, за да я об,означа
кирате значеJШето на даде н термин , а чрез <ci te> и
Примерните резултати от действието на програмата <lcite> можете да укажете nреnратка към друг източник.
жете да обозначите с таrовете <samp> и </samp>. С <.kЬd> и <lkbd> можете да означите текст, който може
Следващият пример изnолзва тези тагове, за да omilll да бъде въведен от потре бителя.
nроста J avaScript програма в тялото на текста в доm Тези тагове са илюстрирани в долния nример, който
та: nрисвоява значеща стойност към заглавЕИя атрибут на
всеки от тях.
<body>
<body>

[?i~P~"m'
<р>Когато се стартира този nрост Javascr i pt
<р>Можете да научите
<р>
<abbr title="Hype rText Ma rkup La nguaqe " >HTМL</abbr>
<code>var соntеnt="Здравейте! "; <br> от книгата <br>
document . write(content ) ; </code> ,_." CIUiи ga опрвgе- <dfn titlе=":Учебник за Н'IМL">"Н'IМL в лесни с:тъm<:и "</dfn>
"""kllt ga изпОiоЗОат от <cite t i tle="Aвтop" >eкиna на издателство СофтПрес
</р> nogt~g~~Нama им инфор­
</cite>
<р> <vаr>съдържанието</vаr> ...,. -8 нашия еtоучай
</р>
81111f EJqiorer поkазОа
на документа ще бъде <samp> Здравейте!</sаmр> <р>Натиснете клавиша <kЬd title="aqree " >Y</kЬd>
аtА18нитв стойности
</body> AlrDo поgсkазВащ на клавиатурата за nовече nодробности .
llllliolt gokamo kypco- </р>
PW е 3/lgьpiaн наg </body>
IJIIttw

Korato с: е ст-;арт11ра TOJit n рост Ja.,.u mpt ход

Wo.-r.c .u •.aтt•tt IJ'i1..Cl.or otaar•
•.rorconc.ent • "' 'дponciiтe ' .. : ·.чnо... ~s. от ~1U IQ
u~!
"* .......~ cc.~ ...I'tl«
doc uмenc. . wti t •tco n t cnt ) ;
8r.r.'te-rc: U.ICШ& т аа r:.a••"'fJ-•1• '"ac'"r coapo#iм«t•

Ус.жи~ :U -.".,о: кnд. от n~~:ата

•
·НТМL·~-~ nп:•.-~;I;;;iь-..---o c~rr,_

Rr..::un Q.8:a:2T uuau.rn..u.~» o<.ec"'t о.. а&1 '-• .C't8

 В леснu cmъnku
uло8е kьм cьgьp>kaнuem
~ o~~~----~
RTML

Изmрu6ане u 6мьk6ане
Има два специаJrни тата, които можете да
да проверите дали оnределен текст е бил
1131 ибутите на таговете
вмъкнат в по-стара версия на документа. авиена атр
_.t~11Ia в}I}{М стилове доколкото те
Това може да бъде особено подходящо, в:оr our--- борите от ' П
на ga аното съдържание. ри-
за обновяване на скициран документ, за да sa ви:зу ализир ф
HTML могат да де и-
таговете в
мените.
...oJ!fPBTкак наборите от стилове да
от ст
тек '
така че
.ях
3а тази цел можете да използвате таговете жда всеки от т .
те изrле
<ins> <lins>. Те са необичайни, тъй като··-­
приложени по два начина.

Първо , могат да бъдат вмъкнати на реда

няколко думи в параграф по обичайния ~"""
.......... на mагоВе 44
Освен това можете да ги използвате, за да ampuбymu на mаго8е 45
тях цели параграфи, сiШсъци и таблици, Il"n: за набор om cmuлo8e 46
променени.
на cmuлo8e на mаго8е 4 7
Следваттщ.ят пример използва тези тагове,
на cmuлo8e чрез kласо8е 48
ред, за да промени буквата О в Е и след това
на cmuл чрез ampuбym id 49
и целия параграф.

<body>
<р> на цBemoBu cmuл 51

Избираме <ins>E</ ins> вместо <del >O</ del> . ма съgърЖанuеmо 52

< / р>
чрез cmuл 53
<de l > <р>Това е първият вариант . </р> </del>
cmuл Върху часm om peg 54
<ins> <р> Това е вторият вариант . < /р> </
</body>

tae t<it Y.II!IW Fl}vortes I ools

..... ..
l:1e!P
........... "'"""' -· ·- . ..

0 iiJ ~ p Seaa. W FlNat.es е ; В· ~ ~ .

Таговете
опреgелят променения
Изб ир аме Е вместо е.
mekcm, но браузьрите
Това с n ьpв .rJ! I вари аь J .
решават kak ga изпоt.з­
ват тази информация. Това е вторият вариант
44 HTML В лесн u c mьnku глаВа 4 ДобаВяне на cmuлoBe kьм mo 45

Атрuбутu на тагове на ampuбymu на тагове

Атрибутите са обеь.-ти на спеnuфикаципте на За да иэпоп:звате един атрибут, трябва да добавите името
то могат да бъдат добавяни към определеJUt ....._ ~'>-IY между отварЯJ.l(И.Я и затв а рящия таг, като му зададете

ги направят по-полезни. сто1i:ност, заградена с кавички .

За да добавите атрибут, трябва да го в мъкнете в гораия списък на всички атр ибути, които започват с
варящия и затварящия таг, последван от знаа "оо.., се присвояват хевдлърн на събития, които иэnЪJШ.Я­
който му задавате стойност. ват ВЯАЗКВО действие всеки nът, когато се случи опреде­

~ Таговете , който могат да бъдат използвани 8

Body на документа , приемат всеки един от И3C)DQ
леното събитие.

Ш ТагоОете.
Хендлърът на събитието обnЮiовено е Сh"РИПтова функ-
рибути със съответната му фув:кЦR.Я: ция, която извършва желаното деистви е.
v

kouтo се използОат за
осигуряОане на инфор· 1. class - задава име на клас, за да бъдат np111 Върху от~n>с от текст може да има nриложено правило за
маиия относно gоkу­ асоцЮiраките с него правила стид вътре в самия ред с използване на тага <style>. Но
мента имат gpyгu вт·
2. dir - указва nосоката на текста (rtl - от все пак, по-добре е да изnолзвате набори от стилове, за да
рибути - поглеgнете
гt.аОв 2. во или ltr - от дяво на дясно) съберете всичките стилови правиJiа заедно.
3. id - задава укикал.яо идентификационно Към един таг могат да бъдат добавени много атрибути.
еJiемент с област на действие документа
Следващият nример добавя стилов атрибут, който прила­
il. lang - език в кратка кодирана форма
га правило за стил върху шрифта Jl сд ед това вкточва
5. onclick - действие при щракване с МI1WIJ~
атрибута onclic k, който ще отвори nр еду nредителен nро­
6. ondЬlclick - действие при двукратно щр'аа
зорец, когато се случи събитието, определево от него.
МИ111Ката

7. onkeyd own - деtiствие при натискане ва <head>

8. onkeypress - действие при ватискане и <title>Ynoтpeбa на атрибути на тaгoвe</title>.
на клавиш ru </head>
9. onkeyup - действие при отnускане на ~UJAIIDI <body>
10. onmousedown - действие при натискане <р style="font - family :cursive; color :qreen"
на r.шшката
onclick~"alert ( ' Шракнато е с бутона на мишката! • ) "
11. onmousemove - действие при попадане >llq:Jaкнeтe тук</р>
върху елемента </body>
12. onmouseout - действие при излизане на
областта на елемента
13. onmouseove r - действие при движение
върху елемента

14. onmouseup - действие при отnускане на ~- - ..

~fiiiVH!'II t t '"'ttl 1 • , )(

мишката

15. s tyle - просто правило за прилагане на

делен откъс от текст на реда

Тези атрибути не могат да бъдат приложеНJI

които се използват за осигуряване на

но документа като <base>, <head>, <meta>•

<style> и <script>.
46 HTML В леснu cmъnku глаВа 4 ДобаВяне на cmuлoBe kъм cъgъp>kaнuemo 47

Лесен npuмep за набор om cmuлoBe на cmuлo6e на mаго6е

Наборите от стилове (sty1esbeets) могат да Правилата за н абори от стилове могат да бъдат nриложе­
nолзвани в HTML 4 до.куме:вти, за да noвлИJIJrr ЕW и въР"J' избра ни тагове, така че rтрн всяко тяхно поя­

н а, по който ще бъде визуализирано cъ,ЦЪJP"tiUIJМI вяване в документа съдържанието J.f M да бъде с оnреде-
лен cntJI.
Кодът, който оnрецедя как ще изглежда всюеа
държаftИето, се нарича "правило" на наборИТе Примерът променя цвета и шрифта па всич1ш заглавия
от вида <h2>.
ПравиJrата трябва да бъдат nоставеЮt в блока
те от стилове , вмъкнат в сеiЩRЯТа Head ва дOIOJ <head>
<сitlе>Прилагане на стилове на тaгoвe</title>
Сnоред синтаксиса на тези nравила първо oб.IIIВRI
<style суре="tехt/сзз">
частта от съдържанието, за която те се отнасят,
h2 1 font-fa ~ly :monospace ; color : qreen }
изnисв ате сnисък с атрибути и стой:в:ости, no~CТ~!UII
ду фигурални скоби 1 1. </style>
</head>
Имената на атрибутите трябва да бъдат разnt)ЗВ
частта от документа, за която се отнасят, а ~"~''"&.... <body>
трябва да бъдnт ваJrидни. <hl>HTМL в лесни стъnюи</hl>

Всеки атрибут и стой:ностrа му са разде11еви ЧDf!ilt1 <h2>Глава 1: Представяне на НТМL</h2>

[2j ToO<•ma"
запетаята могат ga
ки (:), а всяка двойка атрибут:стойвост е
точка и за петая (;).
nocm <р>До6ре дошли в света на Hyperтext Мarkup Language
(НТМL) или .,език за маркиране на хиnертекст " - така по­
nулярният стандарт за съэдаване на Интернет страниии .

бьgат изпуr:нати CAeg Този пример nрилага набор от стилове IСЪм caJIIOI </р>
nоСАеgната gOoйka ат­
на документа, за да го направи със сини букви <h2>Глава 2: Секиия Head</h2>
рибут:стойност и11и
фон:
ako праОи11ото сьgьрЖа <р>Таэи глава отделя внимание на секцията Head на
само еgна таkаОа gOoo- страница , С'ЬЭдадена с НТI·П.. 4 и илюстрира как може да
ka.
<head> ~е изnолзвана тя .
<titlе>Прилагане на стил в документ</t itlе>
</р>
<style type= '' text/css ">
</body>
body { backg round-color:yellow; color : Ы ue J
</style>
</head>
<body> so
<р>Това е вашият nръв документ с nриложен
</р> HTl\IL в лес1111 стьпю1
</body>
Глава 1: Представяне на НТНL

д~с. доашн. mt"D .,. ИyprtТf"tt м-~~ ~.are.. (JI'n.Л..) 8CIIM ..t'iiXIU ""~'"'"PIItr и а JrMnlp1('t:t1-- т.ао
1\о-. ~........, IWI UO\I aony.upиw.n сn.ил~ ,,.ewauaнc н11Jr•ercpмrr страа.а~uа

) l:) оо ~ ; '1,...,, д '-'" @ Глава 2: Секция Head

48 HTML В леснu cmъnku глаВа 4 доьаGяне на cmuлoBe kъм 49

Прuлагане на cmuлo6e чрез kласо8е на cmuл чрез ampuбym id

8
Всички таrове в НТМL 4, които се изnолзва,. ~тагове в НТМL 4, които се изnолзв ат за показване
Бсt 'd
.._ржавие npиer.taт атрибут, варече н 1 , на които
u

на съдържанне, могат да приемат като атр1!16111'1>~ на съд.. '

който може да бъде даде но оnределево име . може да се nрисвон име.
може да бъде изnолзвано в набор от стилове Името на id може да бъде изnолзвано, за да идентифи­
.аа
ложи лравилата му на всеки таг, който е об:ЕrЬ·..; nира nравил а за начина ва показ ване н а съдържанието

Следва.щилт nркмер дефинира клас, наречен на определен таr в набор от стилове.

съдържащ nрав ило за промяна на шрифта Ra В следващия лример на всичките четирп nара графа се
единично разстояние меж,цу буквите. Стилът nрисвояват id имена, но само три от тях се използв ат в
u
лрилага към н аи-горвото заглавие и към naPaJI'II набор от стилове, за да им се зададат nравлла за изобра­
не rо:
зяване ва съдържанието им .

<head> <head>
<t itle> Прилагане на стилове чрез класове< <titlе>Прилагане на стил чрез идентификационно име
<зtyle type~ ··t e x t/cзз '' > </title>
. сlаззl ( fo nt-family: monospace ; color :red 1 <s t yle type='' text/css ">
< / з ty le> Dpara2 { font-family : cursive ; color : red )
</head> g paraЗ { font-family:fantasy ; color:Ьlue 1

<body> </style>
<h2 class= " classl " >Глaвa 1 : Представяне на </head>
<р class="classl " >Дoбpe доШJIИ в света на HVI~
мarkup Laлguage (НТМL) или "език за маркиране <body>
kласа трябОа ga бьgе
хипертекст " - така nопулярният стандарт за <р id="paral ">Параграф 1</р>
на Интернет страници . </р>
преgшестОано от точ· <р id=" раrа2 " >Параграф 2</р>
ka при gефииирането му <h2>Глава 2: Секция Head</h2>
О набора от стш10Ое. <р id="раrаЗ " >Параграф 3</р>
<р>Тази глава отделя внимание на секцията Head
страница , създадена с НТМL 4 и илюстрира как </body>
бъде изnолзвана тя . </р>

</body>
s 011 ·~

-
Глава 1: nредставяне на н~~

JtOOF·'• J:C(IIIJ!tt u Olt\l'fll кtа lt'JJ t~ rTor.-t. Hark•Jp Lчng".".q.., tlf1t•LJ к.aDi •". .
N I4F.I'!Hp1.1Hi! ICH Kltrllo~'J.'\'1' J( '"'f .. 'tAKoi f!OI1YЛff{JНJ!,.1'" ~Т 1jlн.i\o.\J)1' 1t 1 n ..a.at.
ни~,,~,., ..". ~""r·''""а.н

Глава 2: Сеющя Hcud

Та" Nl»a o·Y.I tJIII WIII1810181r. • • cntцuт111 Hud и• стр.аnnа. t~o.UA4t-•-a ' R'П4L~ • .....,.~·­
tanoaaмA u
SO R'fМL 6 леснu c mъnku глаВа 4 ДобаВяне на cmuлo6e kъм cъgъp>kaнuemo 51

Ц6еmо6е на ц6emo6u cmuл

I<огато nрисвоявате цветове в НТМL, C"l.rw.._ ~·rniЯT пример прилага правила за шрифт и цвят
следв .........
трябва да бъде елецифицирав в шестнад4~сеТJn ва два параграфа в тялото на документа.
nредшестван от знака диез ( #) .

Този номер , съставен от шест цифри, цр,епt""--­
невтите червено (R)-зелено ( G)-cшn,0 (В) на
които qрез nроnорциите си съставят цвета.
Първите две цифри изобразяват стойносnа lla
вторите две - на зеленото, а nоследните две
Шестнадесетичният номер, който има нулеви
на трите цвята, nредставлява черно - нeroвiUir
#000000.
Обратно, шестнадесетиqният номер, който има
мал ни стойности: и на трите цвята,
неговият номер е #FFFFFF.
За да създадете червено, трябва да азnолзвате
мал на стойност за комnонентатаR (първите две
Първот о пр авило на набора от стилове променя шрифта
ва вСИЧКИ параграфи.
След това се специфицират цветовете ва фо~а и текста за
горНИЯ параграф, като се използват като стоивости имена
_ ва цветове, които НТМL разпознава .
Най-вакрая цветовете ва фона и текста се специфицират
за дoJIJiИЯ параграф, като за стойности се използват
8
шествадесетичните кодове ва цветовете.
<head>
<title>Пpиnaгaнe на цветови cтил</title>
<st yle type='' text/cs s ''>
р { fon t - family: cursive )

нулеви стойности за G и В- следователво но1ие1r.~ tparal ( color : whi t e ; bac kg round-color : Ыac k }
бъде #FFOOOO. lpara2 { color : IFFOOFF; background-color : DOOFFOO

ffi HTML 4 разnознава и следвите 16 цвята no им•r~~ </style>

Ш Приизпис­
</head>
Н ом е Име Цвят
#000000 Black
<body>
Оанвто на имената на
цОвтоОвтв св изпсмз­
<р i d="paral " >Първи naparpaф - бял текст на черем фон
#СОС ОСО Silver
Оат aмepukaнckume </р>
#808080 сиво
Оарианти на gyмume - <р id= " pa ra2 " >Bтopи nараграф - червено-розов текст на
например .colour'' стаОа
#FFFFFF White бяло
зелен фон</р>
#800000
.со/о(.
#FFOOOO
#800080
Maroon
Red
Pu
кестеняво

!!::•:::
!:"'
go
но
</ body>
-DUIIIoЖaga
#FFOOFF . . .111 /10 gруг
#008000 Green зелено

#OOFFOO Lime светлозелено

#808000 Olive маслиненозелено n... !Jt nc;, r - 6411 TC!XCf НО loiC: I:N ON

#FFFFOO Yellow жълто

#000080 синьо

#OOOOFF Blue синьо

#008080 Teal синьозелено

#OOFFFF а светлосинка во-зелено

За да nрисвоите цвят на набор от стилове, то:й

бъде записан чрез неговия номер или чрез Jfl'de'I'O
присъства в горвата таблица. Например,
ла са и "color:red;", и "color:#FFOOOO;".
52 HTML В леснu cmъnku rлаВа 4 ДобаВяне на cmuлoBe k1)M emo 53

Разgеляне на cьgьp>kaнuemo е црез cmuл

Тялото на документа може да бъде разделено тагът <center>, уnотребявав преди за центриране на съ­
чрез груш1ране на елеменnпе в съдържанието държанието, е нзлязЪJJ от употреба в НТМL 4. Вместо ве­
вете <div> и <ldiv>. го сега се използва правило на набор от стилове за под­
равJ:IЯВане на съдържанието на документа.
Това е особено nолезно за управлекне ва изrпe.lllt.
•
ницата , тъи като стиловите характеристиК1 на
1 Можете да пакарате целп.я докумеwr да се визуализира с
моrат да бъдат настроени чрез различни nрав 11.!111
1 цевтрирано съдържание , като му приложите nравило от

бори от стилове. набор от стилове .

Таrът <div> може да nриема атрибути id и сЬ•
да бъдат включени в набор от стилове, за да emD
рат изисква нията ви за стила.
Примерът установява цвят за фона на всички
обособени чрез <div> и дава абсоJUОТна nозиция
Orдe.IIIПL блокове със съдържание могат да бъдат подрав­
неsи, като приложите стилово правило върху елемент,
обособен с <div>.
В този пример три блока са цевтрирани на страницата,
като текстът във всеки от тях е uодравнев различно:

тези бЛОIСОВе:
<head>
<head> <titlе>Подравняване чрез cтил</title>
<titlе>Иэглед на блокове</titlе> <style type=" text/css ">
<style type•'' text/css '' > body ( text-align:center
div ( background-color : yellow; color : green div ( width : SO ; background-color:yellow; color :green )
idivl { position :absolute ; top : Opx; left : 1 ~divl { text-aliqn : r.ght 1
idiv2 { position:absolute; top : SOpx; le ft:l ~ div2 1 text-align:center }
</style> ~divЗ { te x t -al~gn:left
</head> </st:yle>
<body> </head>

~
<div id="divl "> <р>Първи параграф</р> <Ьоdу>

<div id="div2 "> <р>Втори лараграф</р> <div id= "divl " >Пъpви napa.rpaф</div>

~ Б11оk с абео­ <р>Трети лараграф</р> <div id= " div2 " >Bтopи napaгpaф</div>
Ютна позиция ще запа­ </div> <div id "divЗ">Трети napaгpaф</div>
зи позицията си незаВи­
симо от остана110то
</body> </body>
сьgьрЖанив.
54 HTML В леснu cmъnku

Прuлагане на cmuл 6ьрху часm om

Стиловите nравила могат да бъдат нрилож
81118
малки отк-ъси от текст вътре в един и същ ре•
,

вете <span> и <lspan>. чрез оримери как :можете да из­

JLIIIOC'11>Jrpa създадете разнообразни видове
Те nриемат 11 двата атрибута - id и class, за • ....uL эа да
р••·· ·
nравилата иа наборите от стилове без да се Ra.lll • разл.п~..-....... начини. Има и nptrмepи, де-
оо нn•t· ·ете да изnолзвате указания, за да
матИ'ЧJiо да nрехвърлят текста на нов ред. как мож
18111IJI и звакове към текста.
eoer11taл к
За разлика от блоковете, обособени от <div>,
да бъдат изnолзвани за уnравление ва изглед
гът <span> не се използва за позициониране,
8
тно указване иа характеристики за кратки оас:а
.-tu cnucъцu 56
текст.
на moчkume В cnucъk 57
Този nример използва <span>, за да укаже кц
cnucъuu 58
леждат два от1съса от текст в nараграф, uo~cтsLВe&
на номериране 59
<head>
<titlе>Прилагане на стил чрез <span></title> с geфuнuцuu 60
<style type='' text/css '' > llllll181\t10 разgелumелна лuнuя 61
ldivl 1 width : ЗOO ; background-color :teal; знаkоВе 62
color :white ; font-wei ght :bold }
gspanl 1 background- color :yellow; color:
§span2 1 background -color : Ьl ue ; color:silver

~
</style>
</head>
~ Тагьт <body>
<span> моЖе сьщо и gв <div id="d.ivl "> <р> Тази глава обръща вНJ~~МаiНИit'
приема атрибути за
<span id="spanl "> на атрибутите на таговете
Оьтрешни сьбития,
kато например и на принuиnите на наборите от стилове,
onтoиseover и onclick. доколкото те определят ВИШ1
<span id= "span2 ">
kоито могат gв бьgат визуализираното съдъ~жание . </ sраn> </р>
използвани а kомбинация
сьс сkриптобе за по·
</di v>
gинамични ефеkти. </body>
 ГлаВа 5 C nucъцu u сnецu алнu знаkоВе 57
56 HTML 6 леснu cmъnku

Henogpegeнu cnucьцu на moчkume 6 cnucьk

С писък от еJtе менти , който не изисt\Ва те да
pиpa mr по о nределен ред, се нарича "неnоДJРеJм
За о nнев ане на не n одреден спвсък се изюо,пзве•
<ul> н <lul>.
Всек и елеме нт в сnисъка трябва да бъде
rовете <Li> 11 <lli> , като затварЯЩИЯт не
Браузърите ще изберат как да nокажат СПИС'ЬQ
бителя, н о в nовечето случаи
текст. В неnодр еде аите списъци всеки елемент
nредшестван от точка от стила по nсtД)Jiазбираве'
зър а.
СJiедв ащият nример итострира неподреден
се noJtaзвa отм естен и всеки неrов елемент
~ta :
Стилът ва точжите, маркир ащн елементите в неподреден
croJCЪK може да бъде специфициран чрез н абор от стило-
ве.
Те моrат да представляват квадратче (s quare), н.езапъ.а­
нена точка (circle) или запълпепа mo1tкa (di sc). Това са
aa!"h<... и имевата на тJmоеете , които HTML разпознава.
е
~~ Следващпят пример илюстри ра всекн един от тях:
ro отместват от <head>
<t itle >CТJmoвe на точю1Те в cmtcьК'<Ititle>
<style type= "text/css ">
~spis ykl { list- style-type :disc ; color :purple 1
Bspisyk2 { list- style-type :circle ; color :green 1
MspisykЗ { list- style-type : square ; color : Ьlack 1
38110111
</style>
</head>

~
<hea d> <body>
<t.itle>Heno..цpщ~eн cnиcьК'</title> <ul id=" spisykl " ><li>Эanълнeнa точка l</li>
~ Използбой· </head> <li>Заrrьлнена то•жа 2</li><li>Зат.лнена точка З
те затбаряшия таг <body> </li></ul>
<1/i>. за {Fl напрабите <р>Гlърви неподреден списък: </ р> <ul id= " spisyk2 " ><li>Heзam.лнeнa точка 1</ll>
koga nО-Аесен за четене
<ul> <l i >НезВLrьnнена точка 2</li><li>Неэапълнена точка 3
</ li></ul>
<l i >Първи елемент</ li>
<ul id=" spisykЗ" ><ll>Квaдpaтчe 1</li>
<li>Втори ел~~нт</li >
<li > Кваярдтче 2</ll><ll>Квадратче 3</li></ul>
<li>7Pe'J'и ел~~ент</li>
</ body>
</ul>
</body>
..~ 3@ ; J ,_ -:r,.,..... е ~· ... ~ · s о с1 .~

• 33m..c8t-aa ~ 1
• 3.:uu.n11.ua. ТО'Оа 2
• 3.шw;au• тOI'I.r~ З

" 1tt-'"'m.1-.:tMII. ':'С/ЧU 1

.. n..pon ·~емснr о MAI~U"KtH.a1CIЧI"of::
• Brop11 eмwe 1 1r u f!~J.Qhftbl 1-o'U41 3
• Tp.-tll еп е мс 111
• К.....,p;~rv 1
• ~.trtt 2
• ~ .....
з
58 HTML В леснu cmъnku 1лаНа Ь Un ucъцu u сnецu алнu зна kоВе 59

Пogpegeнu cnucьцu на номериране

Списък от елементи, всеки: от които е нo'ME! PifDI!ь Стшгьт ва номерtrра не в лодредеюгrе слвсъцн може да

зано точното му място , се нарича "nодреден CQRМ
НТМL всr1чкн елемевтпте в такъв сш tсък са
тмо:вете <ol> и <lol>. Всеки отделеи еле.ченrп
.между та~овете <1i> и <lli>. След това той е се
според начина на номерИ,ране rto nодразбиране
зър а.
бъде слецJtфищrро.н като арабски (arablc -numbe r s ),
рrtмск:и- с .ча лки (low e r-roman) или с ~лав1ш букви
(u ppe r -roman) н буквен- с .!.W.Аки (low e r -alpha ) или с
2 .п,авн.и букви (uppe1·-alpha). Всички те се ишострирани :в
следващия nр и ме р:

Всички сnисъци могат да бъдат вграждаm1 ед~~~~
както се вижда в този nример, демонстриращ
на д:ва nодредени списъка:
<head>
<titl e>ПoAPeдeн cm1cък< /t itle>
</head>
<head>
<title> Cтstлoвe на нa.v.eprtpa нe< /title>
<style type=ntext/css n>
. arab 1 list - style-type : arabic-numЬers ; color :red 1
. l;.;rR 1 list- style- type : lower- roman; color : qreen 1
. uprR { list - style-type : upper- roman ; color : Ыue }
. lwrA { l i st- style- type : lower-alpha ; color : orange }
.uprA l ist- slyle- t ype : upper - a lpha ; color : purple

~ Таеот<д>
<body> </style>
<ol> </head>
<li>Eднo</ l i> <body>
моЖв ga бьgв пропус­ <ol> <ol class=" l wrR">
нат, но използОанвто му
праОи koga по-11всвн за
<li>A< /11> <.i>~-~ски стнл с малюt 6укви

чвтвнв. < li>Б</li> <ol>

<li>В</li> <li class="uprR" >PH.'I·fCIOt стил с главюr 6уквн</1i>
</ol> <li cl a ss= " arab " >Apa6cюr стил</li>
<li>Двe</ l i > <li cl ass= " lwrl\ " >Бyкseн стил с малюt бyт<"Bll</li>
<li>7}Jи</li > <!1' cla ss=" upr"м " >Б-""'BeJJ
... " , стr m с гла вюt 6уквн< 11 i >
</ol> </ol>
</body> <, ~i>
<~ i>Ри!/.СЮ1 СТ:LЛ С .'.fЭЛЮI 6уКSИ</ _i>
</ol>
</Ьоdу>

1 Ц ко
1 А
2 Б
з в
2. д••
3. Трв

1 p~C'%U O:. k&IJ~ !7f»•

l h1«0 (TU с r•••• (Jt•м
;.. ~_" ~
 1 H UUU v V lf U VU Ц U .... U I IUЦUUf tl f\A "''""'''"'""'~- -.
60 HTML 6 ле снu cmъnku
ална разgелumелна лuнuя
Cnucьk с geфuнuцuu
В н~n.. можете да начертаете хоризонталн а раздели­
Списъь.-ьт с деф1шицни е увикале н вид crrиc:'l.... телна JUI}:UIЯ , като нзползвате тага <hr>. Той се използва
всеки елемент nредставлява термин и дeфliiiiJь самостоятелно , без съответен затварящ.
списъци са заградени от таrовете <dl> и <lciЬ
• л.иниятэ ще бъде изчертана nрез наличното пространство
В НТМL таговете <dt> и <ld t> се използват 38 екрана, като прооусне всички разстоян~iЯ до ръбове ва
118
не на термина в сn исъка, а <dd> и <ldd> _ за елемент FIJlИ странина и рамки (заедно със зададеното
ята .му. Затварsuците тагове и за двата не са разстояние OKOJJO тsrx), които ср ещне.
телни .
В следващия nр имер nървата оnределена с <ht·> mtiOIЯ

~ Уеб браузър~ите избират как да nоказват тези

~ ИзползОаа.
тв затОарящитв таго­
Ое <ldt> и <ldd>. за ga
напрабите koga по-лесен
за четене.
в nовечето случаи добавят нов ред след тepMIJIIII8
с <dt> и извежда дефи:вици.ята ь:rу с леко on11ec11
началото на следваш.ия ред.
В следващия nри мер използваме списък с де·ФJа
да покажем кратки nреводи ва няколко думи
ки ва български :
запълва nялата ширина на прозореца с изкл юче ние на
зададеното отместване от ръбовете 1\1)', а втората линия
запълва блока <div>, като не се разnростира в областите,
зададенJf по подразбиране като отместв ане на съдържа­
н:ието от ръбовете му.
or
<head>
<titlе>Хориэонтална разделителна линия</tiLlе>

<head> <style t ype= '' te x t/cзs '' >

<title> Cnиcък с дефиниции</titlе> idivl { position: abзolute ; t op : 70 ; left : lЗO ;
</head> w1dth: lOO ; Ьorder : Зpx douЬle red ; padding : Spx }
<body> </ style>
<dl> </ head>
<dt>AВACA: </dt> <body>
~ <dd>вид бананово дърво , абака </dd> <р>СеЮJ,Ия А</р>

~ ИзползОай· <dt>ABACI:</dt> <hr>

<р>Секция В</р>
тв списьци с gвфиниции, <dd>вж. abacus</dd>
за ga опишете сценария <dt>ABACK: <d t > <div id="di v l " >Ceкwмt В<hr>Секu.ия Г</di v>
на фUАМ: <dt> за името
<dd>назад , изотзад, заднилг~~~</dd> </body>
на гоОорещия и <dd> за
нвгоОитв рвrииkи от </ dl>
gu;v.oгa.
</ body>
-е

с-u л

r
с-м &
с... ... в .,
AJJACA Сnwи• Г
81Ш бак.амоvо Ati~OO,iб»'a
AJIACL flln)......,:::---..::.._
-.ь-
AJJACii.
~ МJО"n.М. u.z• -I)M
Спецuалнu знаkо6е
Спецификацията на НТМL осиrур.ява начини
ване на знакове, които сами по себе си са з:ва-ч:ев
ка (не-буквени и не-•,ифрени означения). Това е
nисан новият начин за създаване на та-
димо, тъи като на а аример знака"<
u ц
в
6
о щ текст ава ео u
r: nU в HTML 4, които позволява значи-
приет от браузъра като начало на нов НТМL т ..аnоJIЗВ~
ar. ~ изобразяване на съдържанието им. Опи-
30
Указанието за специален знак винаги заnочва с _.бъР тагове, позволяващи създаването на раз­
върtтmа с точка и запетая ";". ~таблици като се илюстрира изграждането
JJIIдOBe '
Има много специални знакове, включителво 11 колони и клетки.

малки букви от гръцката азбука, които можете

чите чрез указание.

Най-често използваните знакове са показани в

npuмep за mаблuца 64
пример:
......,.L...Ie на kлemku 65
<head> не на mаблuцаmа 66
<titlе>Слециални знакове</titlе> </head>
на pegoBe 67
<body>
Интервал &nЬsр;тук <br> на pegoBe 68
Знак &amp; <br> на kолонu 69
По-малко &lt; <br> рен koлoнmumyл 70
По-голямо &gt; <br>
не на mekcma 8 kлem kume 71
Кавички &quot; <br>
Пьttен cnu-
klemkume 72
cъk на Осичkи уkазания за Авторски nрава &сору; <br>
специаАни знаkоВе мо­
Регистрирана марка &reg;<br> npa6uлa на mаблuцаmа 73
Жете ga намерите на
уеб сайта www. wЗc.org. Търговска марка &trade; </р> на kолонu 74

</body> koлoнume 75
summary 76

zмiOve.html

Ивnрваn тух
Знах &
По- маnхо <
Пo-roiJJIIIIo >
.КайJА1Ш •
Авторски nрава Q
Реrн стр ирана мар.ка ®
Търговска марка IЫ
64 HTM L В леснu cmъnku 1лаНа Н UъзgаНане на mabлuцu 8Ь

Лесен npuмep за mаблuца ране на kлemku

Таблиците често се изnолзват като начин
38
на информ ацията в НТ.МL документите и ее
двойката тагове <taЬle> и <ltaЪle> .
Текстът в клетките ва таблицата от горния nример е раз­
положен nлътно до контурите на всяка от тях, а по nод­
разбиране клетките са отделеви на малки разстояния.

Вс.яка отдел на част от цялата информаr.ut.я ее Изгледът ва информацията в таблицата може да се nо­
клетки , ко 11то се оn р еделят от двоИката <td> добри, като се "уплъткп" всяка клетка чрез атрибута
всеки ред на таблицата се задава от таговете cellpadding ва <taЬle>. Разстоявието между клетките
<ltr> . може да се оnределя с атрибута cellspacing на същия
Тагът <table> rrмa атрибут border (р&МJСа), таг.

деля дебеJi ината на рамката, обграждаща Т8tli8J В таблюФ , създадени с НТМL 4, фоновият цвят се задава
клетките И. За главие на таблицата се задавас с атрибута style. Той може да се изnолзва с таговете
тагове <caption> и
<lcaption>. Ако ИЗirtOJ18IIa: <taЬle>. <tr> и <td>. nри което се дефинира uвета съот­
задължител но трябва да ro nоставите вeJIUIIU'a ветно аа фона цялата таблица, ва една реДiща с клетки
рящия таг <taЬle>. или на отделна клетка .

Примерът rrо-долу rrо:казва създав ането на твfdi Следващият пример отново създава таблицата от nре­
загдави е. дшиния, но този път са използвани cellpaddiлg и

ДебелИl! ата на контурите е един пиксел, като cellspacing и се задава фонов двят на две Jслетки:

се състон от един р ед с три клетки с ивф«J1р~18111

<body>
<body> <taЬle border="l" cellpadding=" S" cellspacing="S">
<taЬle border• "l ''> <сарtiоn>Форматиране на клетки</сарtiоn>

<сарtiоn>Обикновена табпица</сарtiоn> <tr>

<tr> <td style'="Ьackground-color:yellow">КЛeткa 1</td>
<td>КЛетка 1</td> <td> Клетка 2</td>
<td>КЛетка 2</td> <td style= " background-color:green ">КЛeткa 3</td>
<td>КЛетка 3</td> </tr>
</tr> </taЬle>

</taЬle> </body>

~
</body>
.,. ~ '!- ,~ 1- ь-

~ с"еgОаши· Q ~ з ~ ~ ;:;-.. -tt'-· е "

те примери а тази
г11аОа поkазОат сьзgаОа·
нето на сьщата таб11и· 061t KИODell l т•GJilllta
ua. но kamo се изпо11з·
Y.anv•l tКдt: J?a2 !Vt~Y• 3)
Ват поВече при11о>kени
8ьзмо>kности.
 HTML В леснu cmъnku ГлаВа 6 СъзgаВане на mabлuцu fjf

Позuцuонuране на mа'блuцаmа на pego6e

Можете да определите точвото МJiсто обо.в.явето ва ред k""ЪМ таблицата се нзворшва с двоiо<:а-
' ICOeтQ
лкцата ва стра.rощата , като ИЗПОJJзвате Д ве <tr> и </tr>, които трябва да съдържат същия
v таrа та таго
които можете да добавите стил за • даде}{И с <td> и <ltd> клетки, както и първия ред.
бро11 за
Това позвоJtява та блицата да се позлц мrrият пример показв а как разгледавата табrоща
ИОНИра следе.....,...,.
цата ло СЪlЦИЯ на чкн , както :и блок С'Ъс c-Lrrt...... се доnълва с още едип ред, който съдържа три KJteтKJI, и

Сдедващият лример е С'Ъrди.Ят като се добавя нова дефшm:ция към набора от стиJtове, с която

ка.та, че тук се задава ШИJ>ина ва таблицата с

да се цевтрира текста във всички клетки :

w1dth на тага <taЬle> и се изnолзва <d"IV>,c

центрпра на стра Н'ицата:
<head>
<title> таблица 4</title>
<head> <style type="text/css">
<titlе>Таблица 3</title> dlV 1 text-align:center
<style type="text/css ''> td 1 text- align:center; background-color:yellow
div ( text-align:center } </style>
</sty!e> </head>
</head> <body>
<body> <div>
<div> <taЬle border-"1'' style="background-color:fuchsia"
<taЬle border="]" width="250" cellpadd ~--·•.,.
width="220" cellpadding="S" cellspacing•"S" >
<сарtiоn>Добавяне на peдoвe</caption>
cellзpaci
<сарtiоn>Центрирана таблица</сарtiоn> <tr><td>Клетка 1</td>
<tr зtyle-=" background-color : yellow"> ~r«J цlJяm <td>Клетка 2</td>
1'(1

<td>Клетка 1</td> <td>Клетка 3</td></tr>

ФоноО цОят <td>Клетка 2</td>

на Ц11А рвg от kАвтkи св <td>Клетка 3</td> <tr><td>Клетка 4</td>
заgаОа, kато св използоа <td>Клетка 5</td>
тага <IГ>.
</tr>
</taЬle> <td>Клетка 6 </td></tr>
</div> </taЬle>

</body> </div>
</body>

До6оuп upc.t·...

J:.tttu J::arn<a !Со."..

1 2 J

ltuto ICarn<a t&r.a

• } 6
68 HTML В лео нu omъnku ГлаВа 6 СъзgаВане на mаблuцu 69

С6ърз6ане на pego6e на kолонu

Дадена клетка от таблицата може да се ~,._..,.а от таблицата може да обхване н.m.:олко ко­
'"a.IIIAI даден а ...........
обхваща няколко реда. Това става с a'flpиtiv.... v-ато за целта се изnолзва атрибутът c ols pan на та­
лов:n . ...
тага <td>. От стойността му се определя lto.lllril ... ...~_ Стойността му определя броя ва колон:ите, които
ra <LU/·
бъдат свързани чрез съответната клетка. да бъдат слети.
Клетките от другите редове, върху които се Клетките от друr.ите колоаи, които са приnокрити от свър-
свързв ащата, се премахват. зващата клетка, се nремахват.

В СJiедващия nример първата клетка t.К.rrew_, В следващия пример втората клетка (Клетка 2) обхваща
два реда, а четвъртата (Клетка 4) е прем.ВХJ
1181 две колони, а третата (Клетка 3) е nремахната:

<head> <head>
<title>Taблиua 5</title> <title>TaбnИUa 6</title>
<style type="text/css"> <style type="text/css">
div ( text-align:center } div { text- align:center 1
td { text-align:center ; background-color : t d 1 text - align : center; background-color:aqua
</style> </style>
</head> </head>
<body> <body>
<div> <taЬle border=" l " style="background• <div> <taЬle border="l" style="background-
color : fuchsia " color : fuchsia" width="220"
width=-"220 " cellpadding="5" cellpadding="5" cellspacing="5''>
<сарtiоn>Свърэване на клетки</сарtiоn> <сарtiоn>Свърэване на колони</сарtiоn>
<tr> <t r > <td rowspan• "2" style="background-
<td rowspan=" 2'' s ty le="backgr ound- color : color : уеllоw">Клетка 1</td>
Клетка 1/<td> <td colspan="2" style.. "background-color:lime">
Клетка 2</td>
<td>Клетка 2</td>
</ t r>
<td>Клетка 3</td> </tr>

~
<tr> <td>Клетка 5</td>
<tr>
<td>Клетка 6</td></tr>

Ш Тозипример
<td>Клетка 5</td>
</taЬle>
<td>Клетка 6</td> </tr>
изгра:kgа таб;шцата от </div>
</taЬle>
npeguwниR, kато ту(( се </body>
изпсмзОа и rowspan. </div>
</body>
"" 1"' t- . _ ~ \jo!O "

..,.. ,_.. !.о<" Uol>

~ о :!1 ~ ~ "...:>._" w•.-..... е s · ·• 'iJ • s о r1 ·~
о lБJ liJ (.) р._ ~·-.. 41J

а:..т.о 2
Киnа
1 r..o:ru r,:..,....
к..- x.noo s
..... 2 )
'
-
к..
1 :rn-
I:=D
j
'
 ГлаВа 6 СъзgаВоне на mаблuцu 71
70 HTML В леснu cmъnku

Горен u gолен koлoнmumyл ..-dr•t:~нe на mekcma 6 kлemkume

Към горната и долната част на табJUщата разположението ва данюiТе в клетките иа табmщата мо­
бавят доn'Ъ.1Пtителв:и редове, съдържащи 11'"1..- ,ке да се реrулира с два атрибута на тага <td>.
и долеи коловтитул (head~r и footer). Хо язонrалвото аодравн.яване се оnределя от атрибута
Редът, ~държащ горвия колонтитул, трябва р който може да nриема сто1Jностн
a}jgn, v "1е ft" (.п.яво nод-
чи в двоиката тагове <thead> и <fthead >,а раввявэве), "center" ( центриране) .нли "right" (дясно
съдържа додния - в <tfoot> и <ltfoot> nодравняване) .
Клетките от реда с горния коловтитул моrат мо ве се зададе стойност на този атрибут, по nодразбира­
и с таговете <th > и <lth>, между които се ln.iвм
не текстът ще се nодравни вляво.
им, а не само с обича:й:ните <td> и <ftd>. По
Вертикалвото подравнява не Се оnредеЛЯ ОТ атрибута
информацията в тях се означава като ltOЛOIIТIII'I
valign, който nриема стойности "top" (горно), "middle" (в
Когато добавяте редове с горен и долен кo.noJII'n
средата) или 'Ъottom" (долно).
наJJ ите обикновени редове трябва да се "llJW•
двой1сата тагове <tbody> и <ltbody>. Ако изрично не се зададе верти:ка;mо nодРавАЯВане, по под­

разбиране данюrге се разполагат в средата на клетката.

Табл ицата от следващия nример има добавеи
1tа1сто и та lt'ЪВ с горен колонти·rул, съдържащ Следващият аример rrоказва употребата на атрибутите
1солоиите: align и valign за nромяна на nодравняването на текста в

<body> клетките на табдицата:

<taЬle bo rder ="l " cellpadding=З
<body>
wi dth,.." 350">
<taЬle border="l " cellpadding " З"
<caption>Гopeн и долен колонтитул</сарtiоn>
cellspaciлg="O " width "350">
<thead style• ''backg.round- color:yellow">
<tr> <th>Koлoнa 1</th><th>Кoлoнa <caption>Гopeн и долен колонтитул</сарtiоn>

</th></ tr> <tr >

~ Уsббрауэ•
</thead> <td align="cent e.r" val~gn = " middle " style:"colo.r : red">
<tfoot styl e="background-color : fuchsia •> Подраввяване : Центрирано<Ьr>В средата</td>
<t r><td соlsраn=" З " >Долен <td align=" l eft " vallgn="top" stylec"color :green">
</tfoot>
рьт моЖе ga изобрази Подравняване : Горно , Чяво</td>
информацията от гор­
<tbody styleo:"background- color:lime">
style~ " color : Ьl u e >
0
<tr>< td>Кneткa 1</td><td>КЛетка l r-til><'t d> <td align="right" valiqn= "bott om"
ния kо!1онтиту11 по раз­
!lичен начин от теkста </td></tr> Подравняване : Долно , Дясно</ td>
В k!.eтkuтe - туk тя е </tbody> </tr>
уgебе11ена и центрира· < / taЬle> </taЬle>
на.
</body> </body>

(.... !!оо

J 0 @1 ~ .; l ,.. ," • ,_, .. е

 HTML В леснu omьn ku ГлаНа S СъзgаНа не на mabлu цU /'.J

Cmuл на kлemkume
nPа в-ыurrяият вид ва създадена с НТМL 4 таблида може да
вuла на mаблuцаmа
Правилата на набора от стилове могат да
~М>м клетките и редовете ва табЛ11:цата се бъде оромевев, като се изnолзват атрибутите frame
идентиф икацяонво име (id), класът (clasa)
. ~~
(paJ\fJ(a) и rules (правила) ва тага <ta Ьi e>.
В следващия аример са nриложени DPВВIIJra възможвите стойности , които могат да приемат тези ат-

клетка (Клетка 1), като се изnолзва ид.eRТJitilь. pli бута ,

са nосочени в следвата таблица, а nримерът no-
И име, а за втората (Клетка 2) _ като се И3Jta.• казва как можете да ги изnолзвате:

класа. На третата клетка са nриложеви

, ка~ Пр а вило Определя
н идентификационно име, и клас. Рамка Определя

аьоvе само горна groups nоказват се ли-

Шрифтът ва текста във всички клетки в • нии само между
11811
е оnределев в набора от стилове, като се ИЗ:I!Qjll горния колонти-
below самодолна
тификационвото име ва таrа <tr>. тул , средната
част (тялото) и
<head> само горна и долна долния колонти-
hside
<title>Cтил на клеткн</titlе> тул на таблицата
<зtyle type= "text/ cзs "> cols
vsides са мо лява и дясна линии между ре-

~kletkal { background-color :yellow довете

.lime { background-color : lime } lhs само от лявата rows линии между ко-

8kletka 3 { font-s tyle: italic; background-·coloJ:t: страна лоните

Hred2 1 font-family:monospace 1 rhs само от дясната all линии между

</style> страна всички редове и

</head> колони
Ьох от четирите страни

<body>
<body>
<taЬle border=" l" cellpadding="lO "

~ <сарtiоn>Стил на клетките</сарtiоn>
<taЬle border="l" cellpadding" "3" cellspacing="2"
<tr> <td id=" kletkal">Кneткa 1</td> width::"250" frame="below" rules="cols">
~ ИзползОай·
тв праОш.ата на нвбо·
<td class=" lirne " >Кneткa 2</td>
<td id= " kletka3">Кneткa 3</td> </tr>
<сарtiоn>Правила на клетките</сарtiоn>

<tr><td>Клетка 1</td><td>Клетка 2</td><td>Клетка 3

ра от стUАоОе, за ga <tr id="red2"> </td></tr>
заgаgете IJRADCтHиR
<td>Кпетка 4</td><td>Кneткa 5</td><t:d,·КD• <tr><td>Клетка 4</td><td>Клетка 5</td><td>Клетка 6
фоноО цОнт на табАи· </td></t.r>
</tr>
цата и на рамkатs о.
</table> </taЬle>

</body> </body>

!«1> tl*o

о !!) ~ ~ Р-""' k•..,_. е ~- ;:. ~ · .!!1 @J ~ ps.."' -: ._.... е

~. .&и u let.tnar.r:

L<tn! i':.urц 2 К.nu J

К:.crr• 1 К.cru 2 Ка.,.,.~ i:aцu $ К.сrп 6
74 HT ML В леонu cmъnku 1лаНа Н UъзgаНане на mabлuцu lb

Групиране на kолонu на koлoнume

Колоните на таблицата могат да се гр'"" За да може уеб браузърът nо-бързо да изчертае табл:ица-
J ••ИPar
Jiовите nравила да се прилаrат за вс-..-. ....-иnпвата аа всичките й ко1rонн трябва да се определи
......... or •
и та,.......-.-

Групирането на коловите се осъществJtВа с: в нейвото начало.

гове <colgroup> и <lcolgroup> и атрибуТа I.IIиpnвaтa на колоните се задава в nш.-сели иля в про­

то оnредем броя на тези, ко:ато да се no~U!Jill'w центи от цялата wи.рива на таблsщатn чрез атрибута

В следващ1sя прю.1ер таблицата има две гp~VIIIr~ ,vidth на таrа <col>.

към които са приложени стилови правила: тагът <col> ияма затварящ.
<head> Атрибутът span на тага <col> олреде11Я броя на колони­

<title>Гpynиpaнe на колони</titlе> те, за които да важн стойността на width.

<style type• '' text/css "> Следващата таблица изnоJJзва 100% от цялата възможна
Mgroupl ( background-color : yellow 1 JllliiPШia (без да се вкл10чват границите), като коловите И
"group2 ( color :white ; background-color : са съответно 25%, 25% и 50% от нея:
</зlyle>
<head>
</head> <titlе>Ширина на колоните</titlе>
<body> <style type='' text/css '' >
<lаЫе borders'' l '' cellpa dding= " З'' cellspac1 ~coll ( color :white ; background-color : purple 1

width="250 "> ico12 ( background-color:lime 1

</style>
~ <caption>Гpynиpaнe на колони</сарtiоn>
<colgroup id="groupl " span="2"></colgroup>
</head>

~ Аkовпро­ <body>
<colgroup id="group2 "></co1group> <taЬle border="l" cellpadding "3"
пуснат атрибутьт <tr><td.>Клетка 1</td><td>Клетка 2</td:•< td>JI(JМ cellspacing="2" width•"lOO ">
span. тагьт <colgroиp> </td></tr> <сарtiоn>Ширина на колони</сарtiоn>
по поgразбиранв с8ьрз0а
<tr><td.>Клетка 4</td><td>Клетка <col id="co11" span="2" wJ.dth="25 ">
еgнаkОАона
</td></tr> <col id="co12" width="SO~">
<tr><td.>Кneткa 7</td.><td>Клетка <tr><td>Клетка 1</td><td>Клетка 2</td><td>Клетка 3
</td></tr> </td></tr>
</taЬle> <tr><td>Клетка 4</td><td>Клетка 5</td><td>Клетка 6
</td></Lr>
</body>
</taЬle>

</body>

1"pyrllfpJIIIIIII kOIIOЩC
-
6о "* 'Ооо -
э .. v
l"'* ""'
0 ~ (}) ; J - 'W~........ 0
Т!)Сf<ТК.-I<i*.Н~....
~ · ·~ iiJ • s *61 .rs, 1:'

у ~ <1о
к ..... 1
Кnо,.о 4 ICAm<• S
К.оr•• 7 У...11с1• .. 8
-~-- 8 - ~- 1 1 1 t'YI~ 'i1 "~'-'Т"'\..1 -u-r1 IUI INCI

Ampuбym summary
Тъй като има и неграфич в и браузъри,
<taЬle> трябва да включват описателев u ......

ани спе ци
алните възможности
S1Jmmary, както е показано в следнИя ~·-
са разглед
е ва хипер
връзки ,
които позволя-
<head>
88
създаваН атърсятинформация в мрежата.
<titlе>Таблица с атрибут summary</title> д
които по
казват как част от съдър-
<style type="text/css "> ..niJЪfepи,
.-r ицата мо
же да се зададе като "ко-
taЬle { text - align : center } sa уеб етран: в ъзка към различни обекти с
) или хипер Р
th { background-color :purple; color:white таrове ва HTML.
td { background-color : lime }
</style>
</head>
<body> на xunep8pьзku 78
<taЬle border="O" cellpadding= " З " cellspa ...... ц ма xunep8pьзku 79
width="250" surrnnary="Пpeвpъщaнe на
xunep6pьзku 80
единици за налягане в ГУJУ.Мте " ;
kъм ugeнmuфukamop 81
<сарtiоn>Налягане в гумите</сарtiоn>

<colgroup><col width="l25"><col mekcm kьм xunepBpьзka 82

width="l25">< /colgroup> kьм npomokoл 83
<thead> <tr><th>либра/кв. инч</th>
на uзобраЖенuя за xunepBpьзku 84
<th>~г/~в . cм</th>
на xunep8pьзku с kapma на uзобраЖенuе 85
</thead>
<tbody> на kapma на uзобраЖенuе 86

<tr><td>l3</td><td>0.9</td></tr>
<tr><td>14</td><td> l.O</td></tr>
<tr><td>15</td><td>l .l</td></tr>
</tbody>
</taЬle>

</body>

С:\НТМ. P&QeS\Tdca 1Э.html

Налягане в гумите

•
 /tJ Н 1 ML 6 леснu cmъn
Съзgа6ане на xunep6pъзku
~ Адресът (абсошотен или отвоситеJJен) ва
~ UеАнахи­
перарьзkв моЖе ga бьgе
aceku aug файл koйmo
уеб брвузьрьт разпоз­
нааа.
[1j ,....то
файllьm stranica2.htm/ е а
сьщатв nanka, а kонто е
и stranical.html, не сме
ПОСОЧUАU nьmн go него.
u 1 Л:Шn J АUМАрЩ.>ЬЗIШ U KUIII~U
Текст или изображение в секцията Body на
мента може да стане котва ва хиnервР"ЬЗ
вите между двойката тагове <а> и <la>
'
дестинацията и. ' Излолзв аi"'те ком:пЮ1'"ЬрЕШ мишка или друто nодобно уст­
връзката се записва като стойност на атриб
речев Ьref.
В браузъра ХИ"nервръзката се изобразява
я разJШЧава от останалата част от документа.
Наnример текст, който представлява xвnepв·DII
да се изобрази, като се размета цветът му с
да се покаже с различен цвят или да е подЧе~
ражевия, служещи за хипервръзки, често се
оцветена рамка.
В уеб браузъра адресът на целта на xmcrep'BP'JЬI
изобразява в лентата за състоянието, когато
постави курсора на мишката над котвата в.
Следващият пример показва представена с
ръзка, която при избиране отваря даден д011У18
<head>
<titlе>Стра ница 1</ t itle>
</head>
<body>
<р>Шракнете<а href="stranica2 .html ">
за да отворите Страница 2 .
< /р>
</ body>
на xunep6pъзku
нтМL 4 преддаrа тр 11 начина за избор на хиnервръзки:
Чре з kypcopa
lta,
ройство ( наnример тракбол), за да поставите курсора на
Ч\:,111'11
екрана върху хипервръзката и сдед това щракнете , за да
:Y'I'
се зареди новият документ.
Чрез kдa8uwa ТаЬ
Изnодзвайте клавиша ТаЬ, за да преминете от една към
00
друта хиnервръзка в уеб страницата и сл~д това натнене­
те Enter, за да отворите доn."Умевта, до които води тя.
061'-ffiHOBeвo обхождането с ТаЬ следва реда, в който хи­
аервръзките са nодр еде ни в уеб страницата.
.
Чрез kдa8uwнa kомбuнацuя за gocmъn
ИзnоJIЗвайте nредварително определена за целта кла­
виJuн:а комбинация , за да отворите съответните доJсумен­
ти . Тя се задава с атрибута accesskey на тага <а> А на­
тискането И марквра съответвата хиnервръзка.
КлавИJоните комбинации се раЗJIИЧават в зависимост от
типа на изnолзв авата nлатформа. Наприм:ер, ако тя е
Windows, потребителите натискат Alt+Jrnaв ишa за достъп,
а тези:, които използват КО!\-1ПЮТрИ Macintosh, трябва да
натиснат Сmd+клавиша за достъn.
В следващия nример в сор с кода на началната страница е
зададева кдавиnmа комбинация. Необходимо е nърво да
се натисне Alt+y, при което хиnервръзката се маркира, и
gtce след това - Enter, което води до зареждането на съответ­
cumвeo­ вяя файл .
<IIЬei>.
<head>
< titlе>Страница 1</title>
</head>
<body>
<р><а hr ef="stranica2 .html" ассеs skеу= " 2 ">Натиснете
клавиша 2</а> , за да отворите Страница 2.
</р>
</body>
80 HTML В леснu cmъnku 1 1\I:.Lбt:! 1 AUIII:IIJ!:>IJ!IЗI'.U U JI.UII IeU 151

Kom6u на xunep6pьзku ....w_",ka kьМ ugeнmuфukamop

За цел ва хипервръзката може да се зада.це В НТМL 4 атрибутът id на всеки таr за съдържавие може
да се изnолзва за оnределяне ва целта на дадена хиnерв-
същия документ, като към съответния ФIPa.Jrм
да се добави котва. ръзка.
Атрибутът id приема за стойност име, което може да се
Котва ва хипервръзка се задава с атрибуТа
използва с поставен пред него знак п#", определяхц целта
<а>, ва който като стойност се nрисвоява
Иlle. ва хипервръзката .
След това тези имена, с поставен nред тях дВI88 По-правияво е това име да се нарече идеатифккатор ва
ползват за цели на хиnервръзките. фрагмента (fragment ideпtifieг). То може да се използва
Когато потребителят активира хиnервР'ЬЗКа с за преминаване между различви пасажи в рамките на

едия документ, както е в примера от оо-гор е.

узърът извежда ва екрана докумевта и no-mм

зи негова част, където е поставева котвата. Хиnервръзка може да отвори и друг документ в прозоре­

ца ва браузъра , като ори това ще видите тази негова

Този тИD хипервръзки често се поставят 8 КDIUI
част, в която е поставен идентификаторът на фрагмента.
документи и отвеждат в началото им.
В следващия nример хипервръзка в един документ отва­

В следващия nример в началото ва докумеln'а ря друr, като се показва директно фраrмевта с иденти­
Jtотва, а в края му има хиnервръзка, която IУМ._ фикатора:

<head>
.q Сmранuца 1:
<title>Koтви</title>
</head> <head>
Еgин gоkу­
<body> <titlе>Страница 1</title>
мент моЖе ga сьgьрЖа
неограничен брой kотОи
<р> <а name="gorna chast na stranicata"> </head>
на НТМL</а> </р>
на фрагменти. но име­ <Ьоdу>
ната им трябОа ga са <!--дълго С'ЬД'Ьржание на документа - ->
<р> <а href="#gorna chast na stranicata":).f'told <р><а href ="stranica 2.htmlired 2 ">Страница 2 - Ред 2
униkаNfи (ga не се поО­
</а>< /р>
тарят). страницата</а> </р>
</body> </body>

--
о

\0011 ~

1!1 ljJ ~ р ....... w·- $ ~ - ~ :!1 .

CC"Cиa:tatt М8DI'II1&RIIfl COUICМ 88'111 ,1&~ pnJ:O:OJtt•l ~.-.

. . . ...-~
-тpllбauoaah..\ar q>.tntlt • .u6a.aaтp»бtq:~rU•ax:rooт:.e-c~ .".:1811L
C&CACniiC 8& ТИ.а (С СЦ118.& ttpц aaofia:to cp.::s8ПJI .бpcsPIJPI. C81f0 ...СФ"f. . . .
оп.
82 НТМL В леснu omъn ku 1ЛIШU 1 АШ11:1~~~Ь~IШ U KDmBU 83

Сmранuца
<hcad>
2:
,_....,_.. ka kьм npomokoл
<LiLlе>Страница 2</title> Цел ва хипервръзката може да бъде и скриnтова функ­
</head> WfЯ, а ве само URL адрес.
<body>
<р id "red l " >Това е хкпервръзжата трябва да зададе името на протокола,
<р id "red 2 " >Това е
последвано от двоеточие и името на функnяята, която ще
<р id "red З " >Това е
</body> се nзпоJIЗВа.

в повечето случаи се извикват функции на JavaScript,

!\&ТО се използва сnецJJфикатора ва nротокола
.... javascript:.
т~., ..,.:
тази възможвост е особено nолезна nри създававето на
ивтерактиввп уеб страници , реагиращи на действията на
потребителите.

В следващия пример за це11 на. хиnервръзката се изnолз­

ва сnецификатор на пр отОI\ОЛ и се извиква функция на

Поgсkаз6ащ mekcm kьм xunep6pьзka J avaScript, която nоказва в известяв ащ диалогов прозо­

Атрибутът title на таrа <а> е особево полезен. рец текущата дата и час:

дава инф ормация за целта на хипервръзката. <head>

Ко гато nотребителят премести курсора на МIIIIIIJ <titlе>Хилервръзка към npoтoкoл</title>

дадена х и nервръзка, браузърът показва CТC)ЙJRI </head>

атрибута title като кратка помощва ин:фс)рЪIВJI <body>
<р>
<head>
<!--По~зване на дата и час-->

[1j ц..,..
<titlе>Подсказващ тeкcт</title>
<а href="javascript:alert (new Date ( ) .toGМТString
</head> ( ) ) ">
..,., <body> II!ра.'<Н:ете тук, за да ВИдИТе часа и датата</а>
ga бьgв Освkи файА от <р>Научете nовече за книгите на издателС'1'80 </р>
познат на браузьра тип като<Ьr>
- туk в използвана уеб </body>
<а href=http : //www . soft- press . com
страница.
1 -- ---------------- - - -·
title= "ll/paкнeтe тук, за да научите · - - - ·...· - !!-!11.1111181./aWu - -. . . . "__: = i ~
Софт Прес ">

u~акнете тук</а> </р>

</body> 81..-rмotl Wllf••• l•rW•r

-
)(

'(low , ....... lооЬ ~

(., J @@ ~ fJ- ~ ._... в ~·'til ~ .

lltr411t aoac'lt '" ••uratc иа мuат-..лnео ~с uro

IIJ.8W~~- ry: • .. . , .....,....... ~ ,.. CoФr!"!1cl

44 HTML ~ лес нu cmъnku 1лана 1 xuм-p!:if'ЪЗKU u кom~u

ИзnолзВане на uзобра>kенuя за х на xunep6pъзku с kapma на

Можете да изnолзвате като х:иnервроз~t~r ue
вместо текст, като заградите двойхатата 1f30бражен:ие може да съдържа rолям брой цеJIИ на
жение (<img> и <limg>) с <а> JJ <la>. rове Едво ('
XJmepвpъз
ки ако се добави карта ва изображеШiето шшgе
•
Повечето уеб браузъри автоматИЧliо пов:щiВаS".. ) разделяша го ва отделни области за всяка от тях.
·rnap,
изображение е хиnервръзка, като го ot>:rpE121f,!Qt1 За да добавите карта ва изображението, трябв~ да прис-
Ако смятате, че това може да изглежда HeJ[I))III воит е ,т..-..кето
...... и към атрибута usemap на тага <tmg>,
уеб страницата, можете да отстраюrге pa11Q:8'111. ореДJ.IlеСТВаНО ОТ n#t" ·
бора от стnлове настроите дебе.ливата в да е Тя се задава с двоИката тагове <map> и <lmap>, които
Следващият пример ПЛЮСТрира създаването •1:мат атр.ибут name за определяне на '
името и.
стова хиnервръзка и две изображеаия, сл;уа
81111 вс.яка отделна област от изобра.:жев:ието, която ще предс­
кива. Рамката на едиото от тях е премахната: тавлява хипервръзка, се дефинира с таг <area>, който се
<head> поставя междУ <map> и <lmap>. Той определят иеfmите
<titlе>Изображения с хилервръзки</titlе> координати, форма и цел. Следващият nример демонст­
<style type•'' text/css '' > рира създаването на три хипервръзки чрез изnолзване на

. noborder { border-width : O } едва карта на изображението:

</style> <head>
</head> <title>Кapтa на изображение</titlе>

~ <body>
<р> <а href ="sledvashta stranica .htrnl">IIIPIJ..
</head>

~ ПоОвче
<body> <р>
тук</а>
<img src="Buttons-small . jpg" usemap=" lvryzki"
информация за изобра. <а href ="sledvashta stranica .html"> alt=" Buttons-small ">
Жения а HTML gоkумен· <img src="melonsl . jpg" width="бO" <тар name=="vryzki">
ти моЖе ga намерите а аlt="Шракнете тук ''>
гмОа 8. <area shape="circle'' coords="30,60,40''
<а href "' "sledvashta stranica . html"> href=="stranica l.html ''
<img src= "melons2.jpg " width="бO" аlt= " Пре.минете на страница 1 ">
аlt="Шракнете тук"
<area shape="circle" coords="l50,60,40"
class="noborder"></a> </р> href="stranica 2.html"
</body> аlt=-"Преминете на страница 2">
</тар>

</body>
-~~ """" 1 1 1 1vn.;_ -u ~v-na ~~ 1 fUI

а елеменmu

ежда създаването на уеб странитщ

се разrл
жание чрез добавяне на различна
--n съдъР
документ. Дадени са примери,
JСЪМ H TML
съвместн ото използване на HTML докумен­
а изображения, Jаvа-аплети, анима­
както ин
l<oopguнamu на kapma на uзобра>kенu -""·""е.

Атрибутът shape на тага <area> може да деа

• ответната област от изображението като кръr
правоъгълник ('rect'') ИJШ многоъi"ЪJJНик на uзобраЖенuе 88

Преgишни­ Атрибутът coords приема стойности за uзобраЖенuе 89

ят пример за kарта на ито се различават в зависимост от избраната
MIME-munoBe 90
изобраЖение изпо11зВа
kато форма kрьг В таблицата по-долу е даден списък на ....,... ...."...
(circle) на uзобраЖенuе 91
за сьзgаОане на хиперВ­ всяка от трите форми:
рьзkата. на mekcmoB фаол 92

Форма (стойности на на HTML oбekm 93

атрибута shape) Координати
на Java аnлет 94
rect (правоъгълник) лява страна-х, горна

дясна страна-х, долна на napaмempu на аnлета 95

хи у са

стойности съотВетно
circle (кръг) център-х, център-у, на мулmuмеguя 96
по х и у-осите . poly (многоъгълник) х1, у1, х2, у2, хЗ, уЗ и 98
на двойка за всяка
и последната точка .... 99
имат еднакви
се получи затворена

Изчисляването на :коорi~инатите наум певина:

задача. 3а щастие модерните графични
Adobe Photoshop и Paint Shop Pro могат да
u
да на картата на изображението, които ~.r
рате и поставите в съответния HTML Ll.'-1 ..... J

Също така може да използвате и някои

ложения, създаватт~ карта на изображение,
мер CoffeeCup.
88 HTML В леснu cmъnku ГлаВа 8 В на елеменmu 89

Доба6яне на uзобра>kенuе uзобра>kенuе

Тагът <img> се изпо~зва за добавявето на J(ap-ra на изображение , която да отгов аря аа действията
Той се за nисва в се!ЩИЯТа Body ва НТМL потребителя, се дефкяира с атрибута u semap аа тага
138
притежава съответен затварЯIЦ таr. <iJng>.
Има определеки атрибути, които Dp>ID3!8Jitnear:в Следващият пример ил юстрира използва вето на атрибу­
<img> и го правят валиден. тР1'8 onmouseout и onmouseove r , които използват за
стоИиасти скриnтов е, които показват кратки съобщения:
Атрибутът src ариема за стойност адреса , .
18
иието) на файла с изображението , а alt 38,IUU.• <head>
[:rJ A9P"""
{относите~~вн UAU абсо-
тиве н текст, който се извежда в случай , че 11&
ве може да покаже изо бражението.
<title>Кapти на иэображения</titlе>
</head>
АЬтвнJ на фаОiоа, сьgьр­ <Ьоdу>
Жащ gаgвно изобраЖе­ Размерите , с които се показва изображе11118rо < р>
< з.mgid="buttonsl " src.,"Buttons-small.jpg" width= "l80 "
нив, св ОьОеЖgа kвmo о •

стойност нв втрибута
с атрибутите wtdth (ши рина) и height (811011 height="l25" аlt="Области" usemap:a"ikartal ">
src. е необходпмо това да са ре аJIНИте му pa:nusн <map name="kartal">
<ar ea shape="circle" coords-="30, 60, 40" alt· "Област А"
браузърът автоматично ще промеки onmouseout=--"document . f . t xt . value.. • '"
че да отговаря иа въведевите стойности. href= '' stranical . html ''
onmou seover-= "document . f . txt . value = ' Oблacт А ' " >
3 а да могат скриnтовете да изnолзват дa;l{eвtcrn <area shape="circle" coords="l50, 60, 40 " аlt= "Област Б"
ние, необходимо е да му зададете име с A'l'l'\all onmouseout="document . f . t xt . value=' '" href
="stranica2 . html"
<img>. orunouseover= "document . f.txt . value= ' Oблacт Б '" >

Следващият nример демонстрира изiJOЛЗВII.III </тар>

</р>
таг с прав илно зададеви атрибути, като &м.nQ,
<form name="f" action="">
жението е ' Ъuttonsl" : <р> <input name="tx t " type="text" value•""> </р>
</form>
<head> </body>
< titlе>Добавяне на изображение</titlе>
</head>
<body>
<р> <img id="buttonsl " src="But t ons- small.
width="l80 "
height=" l25" alt= "Toвa е
</р>

</body>

-
90 HTML 8 леснu cmъnku ГлаВа 8 Вгра>kgане на елеменmu 91

Oбekmu u MIME-muno6e на uзобра>kенuе

НТМL 4 въвежда за nръв nът двой:ката таrьт <obj ect> позволява вграждането на всякакви еле­

<lobject> като начин за вграждане на дl):n.., менти в докумеят на НТМL 4.

НТМL докуr.tент.
Местонахождението на информацията, която ще се из­
Тагът <object> им а атрибути width и nолзва, се задава с атр ибута data на таrа <object>, а
ределят разме ра, с който ще се nокаже B'ЬJIIDD type оnределя МIМЕ-ткnа на съответния обе1\'"Т.

Атрибутът data (данни) задава мelt:ТOIIIВ.X:-

обекта, а type описва МIМЕ-тиnа.
18 Между двойката тагове може да се nостави алтернатн:вно

текстово описание, което се показва в случай , че съответ­

wi.ЯТ обект ве може да бъде вграден.
МIМЕ (Multipurpose Internet Mail Ex1~щliOJJ~~
рано оnисание н а оnределеви ресурси, което Следващият пример демонстрира вграждането на GIF-
ва от всички уеб браузъри. изобра.жеиие в документ на НТМL 4, а итострациите на
rтрозореца ва браузъра показват какъв ще бъде резулта­
Следващата табл ица съдържа част от
тът както nри успешно, така и при неуспешно вграждане:
които се изnолзват пай-често за описание ва
р азnростр а нените ресурси:
<head>
<title>Bгpaдeнo ~эображение</titlе>
МIМЕ-тиn Тиn на обекта
'<>
</head>
image/gif GIF- изображение
<body>
ПоОвче image{jpeg JPG, JPEG, JPE-
информация за
MIME· <p><object data= "melonsl . jpg" type•'' image/jpeg "
типоаете моЖе ga
image/png Wldth="lQQ"
намерите О сайта WЗС texVplain ТХТ - стандартен hеight=" ЭО ">[Изображение melonsl}<Ьr>
на agpec www.v.<Jc.org
textlhtml НТМ, НТМL­ </object>
ращ документ Това е вграден обект - изображение . </р>

text/css CSS - каскаден </body>

JS- скриnт на
audio/x-wav WАV-звук

audio/x-mpeg МРЗ-музика

video/mpeg MPEG, MPG, МРЕ-

video/x-msvideo АVI-видео

application/Java CLASS- документ на

application/pdf PDF- документ

• !D -.

-
у
 •
92 HTML В леснu cmъnku ГлаВа 8 Вгра>kgане на елемен mu 93

ВграЖgане на mekcmo6 фаuл на HTML oбekm

Стаидартен текстов файл може да се BI'J~&.II8 Доъ·уменrые в HTML 4 могат да вrраждат в себе cu други
ва НТМL 4, като се изnолзва <object> НТМL файлове , като изnолзват таrа <object> заедво с
00
както и при пзображеmuпа. МJМЕ-типа "textlhtml". Следващият пример нагледно nо­
Тух МIМЕ-тиnът е дефиниран като "te'xtJD.. казва как се осъществява вграждането ва такъв файл,
коiпо е с местовахождеЕUtе в същата паnка:
нативви.ят текст съдържа хиnервр'ЪЗI<а 1С'Ь11
файл:
<head>
<head> <title>Bгpaдeн НТМL oбeкт</title>

<title>Bгpaдeн текстов фaйл</title> </head>

</head> <body>
<body> <р>Това е текст в главния документ,<Ьr>

<р>Това е текст в главния документ, <Ьr> <оЬ)есс data="Izobrajenia.html" type="text/html"

<object id="obekt " data=" Vgraden file 8 width=" ЗOO " he1ght= "lOO">

type=" texL /plain" width="200 " he1QI\t-i [!14:>акнете <а href• " Izobrajenia . html " >тyк </а>
[Шракнете <а href=" Vgraden file s text. за подробности] </object>
за подробности) </object>
<Ьr>който продължава около вградения обект . </р>
<Ьr>който продължава около вграденил
.q </body>
</ body>
Обьрнете
too~ --~--
Ониманив. че и:юбразе­
ният твkст е на eguн
0 / .3 ~ ~ / ._ .. а( '-" е ra- ". '3 . s о 11 21
".,..._ •)c.:lrfJtt.~.... ,."""'~
peg разстояние спрямо
mekcma от opueuнa!IНUR
файА.
То•• с тса:т • rauwм• •окум.1н.
{Щрцмете t'l! •• nодро6• .. ••1
който npoдwaж&Na сжмо urpмc"''" о6с:а

"_ ------
94 HTML В леснu cmьnku ГлаВа 8 Bгpwkgaнe на елеменmu 95

Вгра>kgане на Java anлem не на napaмempu на аnлета

Атрибутът c lassid на тата <object> може да се ИЭ!m Java-arrлenrre, които liМат nроменливи параметри, моrат
за вграждане на J ava аплет в документ аа НТМL 4.. да имат собствени saчaJ!I01 стойвости, зададени с таrа
<param> на НТМL. Той няма съответен затварящ, во
Атриб)"Г'Ьт classid nриема като сто:й:вост СО1ащ11 ф,111t~
всички такива тагове се въвеждат между <object> и
на nротокол " J ava:" , като се включва и името на

класа.
<lobject> на аплета. Имевата ва параметрите, които се
разnозвават от кода на Java, могат да се изnолзват за
И тук атрибутът data определя местоnоложевието
стойности ка атрибута name ва <param>. С value се за­
v
ф а ила. -
дава nървовачаШiа стойност, която да се използва от
Когато се уnотребява classid, вместо атрибута type Jаvа-кода.
ва да се използва code~e, който определя МIМЕ"'1
Следващдят пример nоказва въвеждавето на голям брой
В сJrедващия пример фанлът с разширение .class ва nървоначални nараметри на аnлета:

J ava, варечен "hello.c1ass", е сто:й:вост на атрибута

classid, но без разширението си. <body>
<р>Това е текст в главния документ , <Ьr>

~ Също Ta.Jta атрибутът codetype определя МIМЕ-типа•

<obj ect classid"'" Java : ЬillзClock''
Ш Теkстьт
браузъра Jtaтo Java-э.rureт:
codetype= "application/Java" width<=" l00 " height="lOO">
мe>kgy gEJoйkaтa тогоае <body> <param name="bgcolor" valцe-= " E'FFFFF " >
<obiect> по поgразбира· <р> Това е текст в главния документ , <param name="facecolor" value=" FFFFOO ">
не се nokoзOa само ko·
гато апмтьт не моЖе <br> <param name="sweepcolor" value='' FFOOOO" >
ga се стартира. <object id= "appletl '' classid="java : hello" <param name= "minutecolor" value="OOBOBO ">
data='' hello . class " <param name="hourcolor" value="OOOOBO ">

~ т., ",..т
codetype="application/j ava" <param name="textcolor" value="OOOOOO">
height="73 " wi dth="320"> [Java Applet] </obj <param name="casecolor" value="BOOOBO">
<Ьr> който продължава около вградения обект . <param name="trimcolor" value="COCOCO">
~:;ба заgаОането
</р> 18 PIЗNJчнu цОетоОе за <param name="logoimageurl" value="java . gif">
</body> ~анв на часоО­ [Java Applet]</object>
щи графичен файл за <Ьr> който продълж.ава около вградения обект .
~=
</р>

</body>

во "*' !.'<- ....... ~

G ~ 0 @1 ; гJ ...,., .rr,•..,.~ S ~> ·~ t:!1 • S О 11 ·'5


96 HTML G леонu
Вгра>kgане на мулmuмеguя
~ Тагът
~ Заgайтв
стой11ости на 'aиtoStart'
- 'tгив' и на 'р/ауСоипt' -
'2: за gв св стартира
gOa пьти зОуkоО файл
при зарвЖgането на
gоkумвнта. Ako нагла­
сите атрибутите
'wfdth' и 'l1вighr 11а о,
упраОлябащият панел се
сkриОа.
~ Тоkстьт"
хиперОрьзkата, kоито
са О срвgни (kОаgратниJ
сkоби, щв св изобразят
а случай че ntовьрьт не
мо*в ga бьgв поkазан.
1ла13а В l:i грв.Жgане на елеменmu ':J/
omь n ku
ио- (.а ~ ......_...... t..-. tJ-'ID
и L!'ll=) ;-, / ,....,. "'l'""''"' 0 ~- • ,!!] - s• .11 ~
Звуковu u виде офайлове могат да бъдат стойноСТ~!
рибута href :в хипервръзка и когато тя бъде аК'nц~IIЬ
уеб браузърът ще заредu подходящо nриложеmtе за
рянето им. Например при щракване върху x:ипei?D~,r.l
та по-долу, ако се използва операцконна система
Windows, обикновено се стартпра ирограмата
Media P layer , който отваря аудиофайла: Таrът <obje ct> притежава вя:кои атрибути, които присво­
яват ва обекта увикален идентификатор (id) и определят
<а href="music . mpЗ ">Пpoc.лywaйтe тази nесен</а>
ширината (width) и височината му (height) на страница­
<object> позволява в документа да се та. Типът инструменти за управление ва ActiveX се задава
:всички :видове мултимедийни р есурси. След това
зърът оnределя дали сам може да отвори съответНИR
от стойностrа на атрибута cla ssid. Настройки се правят с
nомощта на атрибутите на тага <p armn>, които определят
ф айл или е необходимо да стартира помощно up11iШ08 името на сорс файла и начина, по който работи програма­
ние за тази цел . Потребителите на Windows oe<щpi0б.ll8 та за възnроизвеждане на мултимедийни файлове.
~
могат да използв ат инструментите за уnравление на
По авалогичен начин следващият nриме р показва
Мicrosoft ActiveX, за да включат конзола за му·лтИ1',itед1 :вграждането в уеб стравицата ;на АсtivеХ-ковзола за въз­
файлове в уеб страница. Следващият пример по1к:шuщ'
06"11"'"" nроизвеждане на :в идеофайлове, която nозволява .на пот­
ползването на тези инструменти, като те вграждат 8ниJ1анив на параметь­
р ебителите да отварят файлове с разширение .MPEG:
за отваряне :ва звуков файл в НТМL документа: ра 'liMode', koйmo пpo­
tlleiiR инструментите за
<body> <body>
'tf~PiJ()Aeниe - gруги нe­
lOIJu стойности са <objett id= "Playerl " height>= "216" width="240 ">
<р> Това е текст в главния документ , <Ьr>
'rюne' {щпса на таkиОа}, classid= " clsid : 6BF52A52-394A- lld3- В153 - 00C04F79FAA6 ">
<object id= "Playerl'' width='' 250 '' height='' 65" 'rriri tу,ш,ени} или
<param name="uiMode" value="full ">
classid =" clsid : 6BF52A52 - З94A- lld3 - Bl53 - 00C04F79 "rМsiЬ/в' (небиgими).
<param name="URL" value="film . mpg ">
<pa ram oame="IJRL" value="sound .vlav">
<param name="autostart" value="false">
<param name="autoStart " value="false ">
[Шракнете <а Ьref= " fi.lrn . mpg " >тyк</a> за да видите
<param name="playCount" value=" l "> филма]</оЬjесt>
[Шракнете <а href="sound . \чаv " >тук</а> за да чуете
</body>
neceнтa)</object> <Ьr>
който nродължава около вградения обект . </р>
</body>
Microsoft lпternвt Explorer разпознаВа тага <object> на HTML4. но
много gруги брsузьри не могат. Пораgи тази причина е нвобхоgимо аинаги ga
gобаОитв хиперОрьзkа, позОоляВаща на потребителите, използОащи таkиОs
уеб браузьри, ga стартират сьотОвтния мултимвgиен файЛ.
То-оа е ТСJХ.т • м:ми ц~ доа:уме-кт.
(ЩраJшсто д.V.а дrа ••уС"!е nесента)
аооато tlpO~.JJ.ua 011:0.10 mpu.eau o6ar
IUU I IIIVIL 13 1\I::IUHU UII I&IIKU
ване на формудярu
Алmернаmu6но сьgьр>kанuе
Изnолзв авето на фреймове за изобразяване ва Мlloa.
во документи в един nрозорец се счита от много хора

nроява н а лош стил в уеб дизайна . С увеличава нето

r.ll
aв a е разгледаво изnращавето на да нни към
ТЗЭ'i
р азеообразието от браузъри (вклюttително так ива 8 С"ЪРвъР чрез формуляри ва НТМL. Изnолз ването на
•
не отва рят уеб страющи с фреймове), може да се (t6 теХЕН! интерактивни елемеRТИ е демонстрирано
,c~~ч~<ll
до момент, в който фреймовете да ИЗJlЯЗат от Yn1М"r1...&...
с !1JIIf'tepи.
3 а да се справите с браузърите, които не rи изоо1ра:3.'11sа
или когато самите nотребители са избрали ооnия за
ването им, е необходимо да осигурите алтернативеа
(/1'\Знgэрmен формуляр 11О
Двойката таго ве <noframes> и <lnoframes> могат да
nриеман е на uнформацuяmа 11 1
nоставят в документа, задаващ фреймовете, като M~IQ
тлх се за nисв а текст, които да се изобразяв а, когато те ..ekcmo8u noлema 112
могат да се заредят.
Вь68Jkgа не на napoлu 113
В след,ва i.Ц!d'Я пример <noframes> съдържа кратка бел:• подета за omмemku 11 4
Ita, обясияваща защо стравицата ве се е отвориJJа, и е
Paguoбymoнu 11 5
nредложена хиnервръзка към друга, която е без ФJ>е~!ма
noюma за uзбор на фаоло6е 116
<head>
<ti t lе>Алтернативно съдържание</titlе>
()pumu noлema 117
</head> Cmaнgapmнu буmонu 118
<frameзet cols•"20% , 80% " border="O"> Буmонu за 8ьзсmано6я8ан е на rтьр8оначалнumе
<fr ame name"'"menu " s r c•"menu. html " f rameborder•"O•> cmouнocmu 119
<frameзet rows="25% , 75% ">
&,moнu за uзnращане на формулярu 120

~
<f rame name•"banner" src="banner. html "
nрuдагане на uзобраЖенuе kом буmонu за uзnращане 121
frameborder• "O" scrollinq=•
~ WЗСмоЖв <frame name="main " src=''main . html" frameborder="O•> Графuчнu буmонu 122
би са отgеш11и gоkу­ </frameset > Използване на emukemu 123
мента. сьgьрЖащ набо­
ра от фреймоае. с иgе­
<noframes>Taзи страница изnолзва фреймове . <Ьr> те~ч:mоеu обласmu 124
Шракнете <а hre f= "nofrarnepage . html " >тyк</a> за да
ята те ga престанат
ga се използОат а опре· минете на версия на страницата, която не съдържа
Обхожgане с ТаЬ 125
gе11ен момент а бьgе­ мове .</noframes> ~loma за uзбор 126
щето. </framese t>
ГPfnupaнe на менlоmа 127
ГJ)(nupaнe на noлema 128

Т.а• t'l"pUIIUII D:ao.:JU ts>t-1..1108~

Щр.-.nе " t )I.U crptlll88trt U atpCU 8 1C'rp:U8:C"JU., ItU"tO 8 t t.t.;t~p &a fpt-llrP8t'
 01 \Ut9tU t
1 Л81)С1 О M CJ M Q Н f tU
gg HTML S ле с нu cmьnku

Quici<Time
Следвwци.ят nример по анадогичен иn rорките начин
Инструментите за упраалевие на ActiveX, " -'U0.113Ja.
итострира вrраждането в уеб страницата на Active
nредишния пример, са вградени в Windows и 3D,_
Х-ивструмевти за yпpaвJieJme ва Real Player:
rат да се изооJiзват директно, без нужда от соециа,
111
сталиране. Други ивструмевти на ActiveX могат ца <body>
бавят чрез инсталиране ва доiiЪJIНИТелн:и noмouw. <object id="screen" width•"240'' heightc"l80"
рами нn браузъра (nлъгин-модУли). Една от т.я:х classid='' clsid : cfcdaa03-8be4-1lcf-b84b-0020afbbccfa">
• мер се предлага от Apple, за да поддържа техвля value="sample.rm">
<param name="зrc"
медиен формат QuickТime. След като се ИНСТЗJntр value="imo:lgewindow">
<param name-"controls"
да се използват ковтрош1 на ActiveX за създаване~ <param name- " autoзtart" value="false">
nрограма за възnроизвеждане ва мулти медийни
<param name " conso 1е " value="one''>
ве QuickТime , вградена в НТМL документ.
{Шракнете <а hrc[=" sample . rm">тyк</a> за да видите

~ След,ващият nример демонстрира вгра:жда вето н и 8 фи:nма)</оЬjесt>

~ ОиiсkТiтее
Jюгичен на nредишния, nри който се изnолзва vv''""'.. <br>
Media P laye1·. Разликата е, че тук се добавя атрибут <object id="console" width="240 '' height "36"

~
мултимеgийнилт фор­
codebase, кой·rо посочва местоnоложението ва пл""" classidc "clsid : cfcdaa03-8be4-llcf-b84b-0020afbbccfa">
мещ kоото се използОв
value='' controlpanel '' >
най-Овче от потреби­
телите на Ap(ie
ПоОе'lе ин·
Macintos/1.
модУJ'I а и оnреде;rя nараметрите му, използв айки
у

леви стоиности, зададени като кmочови думи.

l!:J Real Player
~еа Oucoko kачес·
<param name- "controls "
<param name='' console " value="one ">

формация за него моЖе <body> dJo ksmo О сьщото </object>

ga намерите на уеб <object width-''240'' height="l80'' ~св поggьрЖа от </body>
сайта на Ap{ie на agpec jiiWII!U платформи.
claззid "clsid: 02BF25D5-8Cl7-4B23-BC80-D34 tltiF>BDIX:I Г1с(;ече информация за
IWМ.ap{ie.com/qиicktiтe
118.!0 маЖе go намврите
codebase- "h ttp://www .apple . com/qtactivex/qtplugln
~сайта на Real на
Flash
>
~ мv.v real сот, Тагът <object> може да се използва и за вграждане на
<param name="src"
<param name=''autoplay" value=" true"> ктmове на Macromedia Flash в НТМL документи. След
<param name="controller" value="true"> като се инсталира алъrин-модуJJа Flash, веговите
АеtivеХ-инструменти за управление могат да се зададат
(Шракнете <а href="film . mpg ">тyк</a> за да ви.аите
филма)</оЬjесt> като стойност на атрибута classid на тага <obj ect >.
</body> Следващият аример демонстр11ра вrраждаве и стартира·
пе на Flash-кmш "sample.swf'.

<body>
<р> Това е текст в главния документ,<Ьr>
<object id=''sample'' width="400'' height-"200"
classid="clsid : D27CDB6E-AE6D-llcf- 96B8-444553540000">
<param name="movie" value="sample . swf" >
</object>
<Ьr>nродължава около вградения обект.</р>
</body>
 111 IVIL. Т\~uno
Hag 97% от
сърфиращите В Интер­
нет изпоt.зОат Macro-
media Flash player. ПоВе­
че информация за него
моЖете ga намерите В
уеб сайта на Macro-
media на а gpec
vvww.macromedia.сот.
u i"I' IOП \] ~-------------------
rna с фреймоВе
rлава разглежда създаването на уеб страници, със­
11
fВЭ ~х от множество документи, чрез използване на
..aяefl.....
1 р-" j{мове. Представени са примери, илюстриращи про-
фрг dgeтo на вида им и настройката на изгледа на цяла­
.,еJIР
raYe6 с траница в браузъра.
който nр одъпжава около вгр адения об ект.
те~~u:
НfML gokyмeнm за заgаВане на набора om фреомоВе 102
еьзgа8ане на g8a Bepmukaлнu фреома 1 ОЗ
еъзgа8ане на gBa хорuзонmалнu фреома 104
вграgен u фреомоВе 105
Изглеg на фреомоВеmе 106
Оm6аряне на ноВа сmранuца 8ъ8 фреом 107
мmернаmuВно съgър.>kанuе 108
 1U2 Н 1ML Н ЛМН U cmъ nk u \U..1

HTML gokyмeнm за заgа6ане на набора а6ане на g6a 6ep mu kaлнu фр еuма

фреuмо6е
А:rрибуrът cols яа тага <frameset> оnределя разnреде­

Фреймовете предоставят начин за иdобрnзява liе rta левието и ш.ир1fната нn nертихалните фреймове .
брой НТМL документи в един прозо рец на уеб op~kJal Стойностите н а cols могат да се зададат в ms ксели или в
Това означава, че някои от тях могат да останат на проценти , като се счита, че цялата ШJ1рина ва прозореца
ва, докато останал ите, разположевп в друrи q>J>e'!llfcl• е 100%.
~ променят.
Стойностите на cols за отделиите фреймове се записват

~ Примерза Обикновено прозорецът съдържа три фрейма: горе

•~ бу
кош о е vзаглавието, ляв , с менюто на уе
8:,
санта и цeii!JI,
отляво падясно н се разделят със заnетаи .

тоВа разпо110Jkение е Можете да употребите и символа "*''. Той се използва, ко­

поkазан а сеkиията лен, които екл10чва nроменящата се част от СТрани .. '
.Bгpageuu фреймове· на
гато стойностите за друrяте фреймове са определеви в
Фреймовете могат да се разположат в прозоре ца нaDJI!j,
тазишОа nиксели, а на означения с"*" се задава да заеме остапа­
мер по следнил н ачин:
лата ширина пn nрозореца.

. 20%

~·
ВО%

ffi
lJtJ Твгьт
Двойката таrове <ft·am eset> заграждат тагове <frame>,
чийто атрибут

мента за всеки фрейм.

src оnределя местоположеftИето ва доку­

Банер drl/1fe> 118 притвЖоОа

Следващият nример демонстрира разделявето на прозо­
Jl(fi(Japящmoг
реца на два верт1-rкални фрейма, конто заемат съответно
20% и 80% от цялата му ширина:

<head>
<tiсlе>Лрозорец с два верт'. .11сални фpe~.sa</title>
Меню Главна
• </head>

[1j вm~"
част
<frameset cols "20 , 80 " >
<fr ame src "menu . html ">
<f rame s r c-"main . html ">
шОа Oceku HTML goky·
мент. сьgьрJkащ набор </frameset>
от фреймоВе, започВа
сьс специа1111а от gе­
финииия. kато туk е
преустаВена тази. koR- Разпо11оже нието на фреШ.1овете се въвежда с двоi'пtа18 •...:r-•tt е
тo е ОаАиgна за Версия таrове <fra.meset> и <lframeset> в специално преДВ81t"
4.01 на HTML. ОТО gефи­ начен. за целта HTML документ (документ, съдържаDЖIII'
нииията е пропусната О
бора от ф р еймове) .
с11еgОащите примери, за
ga се спести място, но Той се състо и от секции
<he ad > и <fra.meset>, като за·
тя заgшvlштем10 тряб·
дължитеJJНО трябва да започва с DTD дефиmrц:ия каТО
Ва ga св OkllkJчu а НВЧВ·
тази:
11ото на сорс koga, тьй
kато а протиВен САучай <!DOCTYPE HTNL PUBLIC
той няма ga бьgе Оа11и·
gен.
"- //WЗC//DTD HTML 4 . 01 Frameset//EN "
"http : //www.w3. orq/TR/html4/ f rameset .dtd">
104 HTML В леснu cmьnku ГлаВа 9 Pal5oma с фреuмоВе ios
Сьзgа6ане на g6a хорuзонmалнu фреuма егРаgенu фреuмо6е
Атрибутът rows на тага <frameset> определя 1-'ttЗDII!il НТМL докумеятът може да съдържа в градеви един в

лението и височината на хоризонталвите фреймове. друг фреймове , ори което се създава nо-сложво подреж­

Стойностите на rows могат да се зададат в nиксела дане.

nроценти , като височивата на целия прозорец се CЧRI.i. JL
100%. --.
Стойностите на rows за отдеJJ в ите фреймове се зawnrь·-..
отляво надясно, като се разделят със заnетаи.
Първият таr <frameset > може наnример да зададе раз­
деляне на две колою1. След това вторият <frame> може
да се замеви с втори (вrраден) таг <frameset>, опреде­
4 JI.ЯЩ хоризонталво оодразделяне на два фрейма .

Това разположение е показано в следва:щия пример, кой­

Можете да изnолзвате и символа "*". Той се nрилаrа,.,
гато стойностите за другше фреймове са оnределени 8 то р азделя прозореца на общо три фрейма:

пиксели, а означеният no този начин фре йм заема ocza, <head>

налата част от височината на прозореца. <titlе>Вградени фреймове</titlе>

СJiедващият пример nоказва НТМL документ за за,~ </head>

не на фрейм ове, като nрозорецът се р азделя на два <frameset cols= "20%,80% ">
зонтnJLИИ фрейма, заемащи съответно 25% и 75% от <frame src="menu .h tml ">
ш1та м у вйсочииа: ~ <frameset rows=-"25% , 75% ">

<head>
l!:J Този пример
, I:DIIбинацин от npeg-
<frame src="banner . html '' >
<frame src= ''main.hlml '' >
<tit le> Пpoзopeц с два хоризонтални фpeймa</title> IDIJIUme g(Ja, kато се </frameset>
</head> rmuOa процентното
ра~р~Jgелвние. ckиuиpa­ </frameset>
~
<frameset rows="25%, 75%"> IID О начамто на шВа-
<frame src="banner.html">
~ Обьрнете <frame src="main . html">
Внимание, че при тоВа </frameset>
разпОАоЖение на фред­
моВете . • ·моЖе ga се
изпОАЗба по g8a начина с
еgин и сьщ резуNnат:

rows='25%, •· UАи
rows=' •,75%'.

- j
106 НТМL В лесн u o mъ nku ГлаВа 9 Рабоmа с еuмоВе 107

Изглеg на фpeuмo6etr~e Оrf16аряне на ноВа сmранuца 6ъ6 фреuм

1 Ако ке желаете фреймовете да са разделени с .t'C.I~IЬt_•
Хипервръзките във всеtш фрей.."t го третират като отделен
.ведете стойност О на атрибут-а frameborde r ва тага nрозорец Ji зареждат документите , към KOiiТO водят, в вего.

< ft.·ame >. Ако Не ИClCQTe да се ИЗОбразяват По-старите версии на HTML позволяват добавянето на
берете scrolling="n o". ~ атрибут tю·get към тага <а>, оnределящ в кой фрейм да

Разnоложението на съдържанието аа фрейма cnpsn.ro ~ В бьgещв се зареди новата страюrца.

бовете му може да се настрои с атрибутите ......сц 'J!O)IТ7B (]efiOIIтнo Този атрибут обаче ве е .вк.mочев в строгите сnецифика­
.,,.. uozaт ga отОа-
и m arginheight на съuщя таг (задава се nо.ло;ки·те1"-·
стойност в nиксели).
r;:~енти с фрво­ ции ва НТМL 4, може би за да
вето на фреймове .
не се nоощрява изnолзва­

.:{е
Вместо това можете да използвате скриnтове, които да
Размерите на фреймовете няма да могат да бъдат ., ___
определят къде да се за р ежнат новите страв:ици. По този
Nsши от nотребителите, ако добавите атрибута no,re1sh. вачи:н например л'ИПервръзките в левия фрейм с мешото
към <n·ame>. ва страницата могат да отварят нови документи в цевт­

Следващият пример е много nодобен на nредmп-пия, рэ.л:ния фрейм.

тук са времахнати рамките ва всичк и фреймове, Kl11n'O! Следващият nример итострира обичаimия начин за ак­
Dдъзrачите на този със заглавието на страницата : тивиране на хипервръзки и зареждане на съответвите

файлове:
<head>
<head>

[:ех) B~pqku ~
<titlе>Вградени фреймове 1</title>
<titlе>Главна чacт</title>
</head>
<style type=" text/css">
<frameset cols='' 20% , 80% " bo rder="O"> body { background- color : aqua ; color : red }
не Ocuчku са сьОмвсти­
<frame src= "menu . html " frameborder="O"> </style>
ми сьс специфиkациите
на HTML 4, раЗАuчните <frameset rows='' 25% , 75% ''> </ head>
Оврсии на уеб брауз~ <frame src="banner . html " frameborder="O" <body>
ритв налагат ga св <p>~1ain<br>
goбaOu атрибут
<frame src="main . html " frameborder="O">
<а href=" nova stranica . html " >Шpaкнeтe тук за да
boтrlвr='U kЬN пьрОия </f rameset>
отворите новата страница</а>
<frameset>, за ga се </frameset> </р>
ckpuяm рамkитв.
</body>
108 НТМL В леснu cmъnku
ване на формулярu
Алmернаmu6но съgър>kанuе
Използването на фреймове за изобразяване на ма.11111
во документи в един прозорец се сЧJпа от много XOtiA

проява ва лош стил в уеб дизайна. С увеличававеrо

11 гr~ав
а е разгледано изnращането на данни к-ъм
р азнообразвето от браузъри (вклщчm-елно такива 8 f83 • чрез формуляри ва НТМL. Използването на
• р въР
не отварят уеб страници с фреймове), може да се .t1J с.-ь ·uи и.втерак tиыm елеме нти е демонстрирано
~1(11 ,.ех
до момент, в който фреймовете да ИЗJJязат от vn,м-.......
'pPII~,epи.
3а да се сnравите с браузърите , които не ги и зol:>p~kЗJJ•
ИдИ когато самите потребители са избради ОПЦИя за
в авето им , е необходимо да осиrурите алтернативеа
,...u:
оnанgэрmен формуляр 11 о
Двойката тагове <noframes> и <lnoframes> могат
nрuемзне на uнформацuяmа 111
поставят в документа, задаващ фреймовете , като
тях се заn исва текст, които да се изобразява, когато тekCmo6u noлema 112
могат да се заредят.
~gане на napoлu 113
В следващия. пример <noframes> съдържа кратка llof-,ema за omмemku 114
Ita, обясняв аща защо страницата ве се е отворила, и е
Paguoбymoнu 11 5
nредJiожена хиnервр·ьзка към друrа, която е без ФJ:~ейм
no,..ema за uзбор на фаоло6е 116
<head>
<titlе>Алтернативно съпържание</titlе>
Ckpumu noлema 117
</head> Cmaнgapmнu буmонu 118
<frameset cols,. "2 0~ ,8 0% " border="O"> &ifnoнu за Вьзсmано8я8ане на nьр8оначалнumе
<frame name="menu" src="menu . html" frameborder= onooнocmu 119
<frameset rows:"25% , 75%'' > Бvmoнu за изnращане на формулярu 120

~ <frame name="banner '' src= "banner . html ''

Прuдагане на uзобраЖенuе kом буmонu за uзnращане 121
frameborder:o"O" scrol li
~ WЗСмоЖв <frame name="main" src="main . html" framebo rder=" Графuчнu буmонu 122
би са oтgeAw.u gоkу­ </frameset> Иэnо.-.эеане на emukemu 123
мента, сьgьрЖащ набо­
ра от фреймо(]е, с иgв­
<noframes>Taзи страница изnолзва фреймове . <br> Teirtmo8u обласmu 124
ga престанат Шракнете <а href= "noframepage . html " >тyк</a> за да
ята те
ga се изпоАЗОат О опрв­ минете на версия на страницата , която не еъдържа
ОбХОЖgане с ТаЬ 125
gеАен момент О бьgв­ мове .</noframes> Мe.tloma за uзбор 126
щвто.
</frameset>
Гl)fnupaнe на менlоmа 127
ГJ)mupaнe на noлema 128

..,....
Тса np.u_aaa 1DD008.a trflt.._•
1Цp8Jie'te %U.U.aptМIIIt1t Mll'фe;U •.acтpua:r.an,.J:!')IC"O ас O.:U.pbtpc:IN'ilf'
 11 О HTML В леснu cmьnku Гла~а 1 U l,'ъзgаНане н а фбJ5MYЛlii)U 111

Cmaнgapmeн формуляр
8 ман е на uнформацuяmа

Формулярът нредставJJява блок от секцията 0~11", Тагът <form> има н,якоJIКо атрибута , отнас.яш.н се до ин­
формацията, свързана с цриемането н а форr.rуляра.
НТМL документа, която съдържа обlfча.й на И1tФСJ
1111
заедно с някои елементи за управJtение, конто IIIOJI'III Атрибутът m e tbod оnределя Tlma на nриемане като "get''
nроменят от nотребителя. или "post". Ако не бъде избрано друго, методът ло nодраз­
биране е "ge t", въпреки че "pos t" се nредuочита nри изп­
Такива е11ементи са нnпример текстовите nолета
обутоя:ите. ращане към СGI-скриптов хендлър.

Всеки: формуляр автоматично изnраща даНЮfТе с 11 в ко­

Поnълне ният ф ормуляр се изnр аща до с-ървъра,
дир ан формат, който се р азпознава от сървъра. МIМЕ ­
съдържанието му се обработва.
тиnътuo подразбиране е "applicationlx-www-form-
ВсН:ХИ коl\lmоневти на формуляра се nоставят м urlencod e d".
двоиката тагове <form> и <./form> .
При жеJiавяе Тlmът иа кодиране може да се настрои и
Тагът <form> има атрибут action, който оnредец ръчно, .като се използва атрибутът enc type на <form>.
nоложението на хендлъра на формуЛЯра, чрез KoJЬ.r~ Чрез него наnример може да зададе МIМЕ-тип, сигнали­
обработват данните в него, когато бъде изnратен до зиращ за изnращането на друг файл. В този случай стой­
въра .
ностrа му е ''mu ltipat·tJform-data".
В редица с11у чаи той uр едставJIЯВа CGI скрипт, При фо рмуляри , съдържащи обикновен текст, МIМЕ­
наnример зададеният към атрибута action адрес 8 тиnът вай-често е "textJplain", което се заnисва като
ния форму11яр: стойност ва атрибута e nctype.

~ <body> В повечето случа н обаче фор!\lf)'лярите директно използ­

ват кодирането по nодразбиране, което изключва ну-ждата
<fo.rm action="http://domain/handler . cgi ">
Ш формумрьт Име : <input type:o" text " nате= "i me">
от ръчно настройване на e n ctype.
Оинаги трябОа ga сь­ С атрибута name на тага <form> се задава име на всеки
Фамилия: <input type="text " name="familia">
gьрЖв еttементи зв уп­
<inpu t type= "radio '' name="pol " формуляр, което трябва да бъде уникално . То се изnолзва
раОttение, позООNIОащи
на потребитем gs <input type• "radio'' name=''pol" от скриnтовете, обръщащи се към него.
изпрати gанните. value="female">Жeнa
С отварящия таг <form> може да се въведе име на разг­
<inpu t t уре• " suЬmi t " val ue=" Потвърди " > ледавия по-горе формуJIЯр, наnример ''formuliarl". Тъй
</form.> като за nриемането J\.'fY се изnолзва CGI-csчнmт, трябва да
</body> се изnолзва методът "post'':

<form name="formuliarl"
action="http://domain/handler.cgi"
' ,.....н......
method:"post">

Не бива да се забравя, че nри nриемането на всички

формуляри се изпращат двойки от имена и свързани с
тях стойности, които се получават от хендлъра на фopl\'fY·
ляра.

Следователно ВСИ'JКИ елементи на HTML формуляра

трябва да се състоят от име (nam.e) и стоJ"шост (va1u e), за
да бъдат изnратею r успешно.
 • • • •••__.,-'-'" t\VUit\.A UII IQIII\U
1 1.5

Tekcmo6u noлema
eJI<g aн e на napoлu
Г~ляма част от елемеюите на формуляра ttзnoЛ:!Ia. Потребителите моrат да въвеждат неоrраlJИ'Че а брой. зна­
<mput> с атрибут type, оnределящ тиnа и:м. кове в текстовото поле, освен ако не зададете оrраничев:ие
т .
агът <mput> яе nритежава съответен затварsnц. с атрибута maxle ngth ва таrа <input>. Той определя
ма:ксимапния брой символи за това поле.
Ед.и:и от най-изnолзваните елементи във ф(>P~>1Y•IIJЬ•
текстовото nоле , което се задава с атрибута ~О..-"•­ Този атрибут може да се изnолзва и заедво с
тага <input>. type="password", отво во в съпnш таг, което определя nо­

[1Х] Шири~.-
лето като поле за парола. Това е друга разновидност, мно­
За да могат текстовите nолета да се обработят Dp.I18Jь
го подобва ва стандартвия тип.
от хендлъра, е необходимо всяко от тях да nрите'~~~IА~
на твkстоОото not.e (nате) и стойност (value). Те се задават с eД1~0IItl.fe:ВI Единствената разлика, е че при този тиn полета при въ­

заВиси от начина, по атрибути . веждането на всеки символ се nоказва знака "*". Това е
kойто браузьрьт ин­ защитна мярка, която не nозволява nаролата да бъде ви­
терпретира стой­ Шири:ната ва текстовото nоле може да се onp
б . eдeJUI дява от стран:ичви наблюдатели .
ността на атрибута ри ута SIZe ва <input>, който приема за стой:в
sizв. число. ост Всички оставали атрибути на ставдартшrrе текстови nо­
.
Следващият nример демоветрира създаването ват~
лета са ваJrидни и nри тези за nароли

.во ~оле, наречено ''polel'', с пшрияа 20 и nървонача При изrтращавето хеидлърът на формуляра получава
стоиност "Въведи". .._. името на nолето за napoJJa и действителяото му съдържа­

~ Потребителят може да я промени, nри което формудW вие.

~ Сатрибу­
тите опfосиs,
onse/ect
ще ~rтрати комбивация от името на текстовото поле 8
краивата стойност (дво.йка име:стойност):
В следвамш пример не се задава първоначалва стойност
с атрибута value, во максималният брой разрешеви сим­
иt.и опЬ/иr моЖете ga <body> воли се ограничава до пет:

изВиkате сkрипт, kоОто

ga св изnЬАНи при onpe-
get.eнo gвостВие В аk­
тиОното теkстоОо
ЩJI\e.
<form name ="formuliarl" method="post"
~
<body>
actiona "http : //domain/handler. cgi "> <form name="formuliarl" method="post "
<р>

<input name="polel" type="text"

l!:J МоЖе ga
~ите сkрипт, ko(J.
action="http: //domain/handler .cgi">
vаluе= "Въве.аи• <р>Моля въведете nаропа (максимум nет символа} <Ьr>
size="20 "> <br> ~ ga npegynpelkgaOa
IIDtnpeбиmeм, О случаО
<input name="parolal" type="password" maxlength="S">
<input type="suЬmit " vаluе= ''Лотвърди ''> <br>
"'nребиши маkсима11но
</р>
~имия брой симВо­ <i.nput type=" suЬmit " vаluе= " Лриеми " > </р>
</form> NJзапомто.
</form>
</body>
</body>

~ ,f"C".... 1/dl t:Jtritl

"' @ @ .(,) j) s.... -:t•-·.. ~ 0 · "' ~ . J s о (1 .$ Ф· О

ro....... J blo.u; 8wtt;&C1C ~ (М8ta_мrw Ct T С8~

( ""'"'Р"" 1 l •••• ~ J
l г--1
 1 1 1 IVI L.. U 1\0UI I U U II IU III\U 1лtШU IU Ht\ ФйРМУМIРU 1 15

Полеmа за omмemku
pвguo бym oнu
Полето за отметка (checkbox) е друr тиn елемевт за Друr тиn уnравляващ елем е нт на формуJLЯра е радиобу­
ра еJrение на тага <inptn>, в което потребителят 00~ тонът, който се задава с атрибут type="radio" аа таrа
отметка или го пропуска. Имената и свързан нте с TJ~a <input>. Обикнове на цялата груnа от такива бутопи при­
•
стоинссти па nолетата с отметка се изпращат на~---
тежава общо име. За разЛitкn от полетата за отбелязване ,
nри uрне мането на форl\1)'ляра.
само един радиобутон от груnата може да бъде избран

[~] СGI<k-
Сбиквовено се задава уникалко име ва всяко nоле към едив момент. Изnращат се само името и стойвостта
38
метка, но това съвсем ае е задължително, особе но аа избравня .
се nрил агат множество стойности към едво и С'ЪЩо

тьт не получаВа gанни
за 'pols2', тьй kато а
тоВа по11е не е 6/JJ\a
постабена отметkо.
~1ШЮШ~"
От трупата радиобутоки BJ.ma rи ед.J.-rн трябва да бъде цър­
В следващия пример ва nолето за отметка с име -...•. воначалво избран. Това ста в а, като добавите атрибута
ch eck e d към та га <inpu t> на съответаия бутон.
са зададели две стойности, а СGI-скрШIТЪт nрие ма
t;111)JWЗf11 името и
ки данни за имепата и стойностите:
~та на избра· Следващият пример де монстрир а задаването и изnраща­
<body> ofJI по поgразбиране нето на комб.Jil:Пацията от и-ме и стойпост на избравия ра­
Pl~yrnoн. осВен ako диобутон към CGI скриnтов хендлър за формуляри:
<form name• '' formuliarl '' method= '' post ''
1!11f1PBбиm(lltJim изрично
action • '' http : //localhost/cgi - Ьin/script . cgi '' > о11 отбоАвЖи gруг.
<body>
<f orm name=-" formuliarl " method• "post "
<inpuL name='' polel '' value ='' Ыal ''
type• " checkbox " >Бм action= " http : //localhost/cgi-Ыn/script . cgi '' >

<р>
"<1
<input name='' pole2 " value='' zelen''
tуре~ " сhесkЬох ">Зелен <input name= " izЬor " value="bial" type= "radio " >Бял
<inpul name='' polel" value="cherven'' <input name="izbor" value "zelen" type="radio"
Ako е gоба· tуре• "сhесkЬох " >Червен сhесkеd>Зелен
бен атрибутьт checked
на тага <iпput>, сьот­ <br> <input name=" izЬor" value="cherven" type="radio">Чepaeн
бетното п011е по поу­ <input Lype-= " suЬmit " value "nриеми "> <br>
разбиране св изобразяВа
</р> <input type="suЬmit " value• " rtpиeuи">
сотметkа.
</form> </р>

</body> </fonn>
</body>
~ t ...

() ' о ~ @) ~ r - -tr•-a. е S'l·

ОБм 03cJto• 0 \f"fatn

1 ""''"'' 1
ОБм 03<лео 0'/q>lleo
1 np.•.,....)
116 HTM L В леонu omъnku rлаВа 1U Съзgа~ане на формум~u 1 11

Поле та за uзбор на фаuло6е Ci'Purnu nолета

ПоJtетата за избор на файлове се изnолзват, когато При ск ритите rroJreтa не се създават каквито и да било
ва оnределеви файлове да бъдат качвани . Това се видими елемента за управление. Те се използв ат за съх­
ществява посредством създаване н а сnециални ел,~~~.~,_ раняване ва даани за изпращане.

за уаравле нне на формуляра.

Това е особено nо11езно прн скриnтовете, които трябва да
Те извикват nомощен инструмент на браузъра, nоз~ заnазят данните на потребителя npJ.i генериране на
ващ .на потребитеJIIJТе да изберат файл от кратък дие ... НТМL доh·-умент.
гов прозорец.
В nоследствие, когато формул.ярът бъде изnратен, ориги­
Когато това стане, nътят до него се изобразява в TeJtetW валните дан ни: се изnращат отново към сървъра.
nоле. То може да се използва и за въвеждане на точеа'
адрес на местоположението ва файла. Следващият D"РИМер илюстрира създававето ва текстово

поле, което не може да се nроменя ( използва се атрибут

Можете да ОП1)еделите име ва файл по подразбиране 11(11
readonly), каК1'о и на скрито поле. Към сървъра се изn­
атрибута value на тага <inpu t>.
ращат двойките име:стойност и на двете:
Когато изnолзвате такива полета, задължително тряб •
да добавите атрибута на <form> <body>
en ctype=''multipart/form-d ata",
По този начин се указва, че изnратеният формуляр
държа файл.
оnредеJJящ lVlHVJl~·ТВI

IZ) Ako
tt:tn(J4JбumВAиme
~ЮZam
ud<""
ga променят
ga не
<form name=" formuliarl " method="post "

<р>
action= '' hLLp://localhost/cgi-bin/script . cgi '' >

0JJ едl3ащи.ят nри:мер демонстри1)а създава нето ва поле <input name="polel" type " l:ext"
•gagвнomo сьgьр!kание
и збор и показва избран от nотребителя фаЙJI , готов за value= "Лoлe само за четене " readonly>
стоОносттаJ на gageнo
пращане към сървъра: мстоОо поле. gоба· input name="pole2 " type "hidden " vаluе="Скрито nоле " >
&те атрибута readonly
<body> 1!111 (/npul> <Ьr>

[111--...
браузьрьт ga не поkаЖе
<form name="formuliarl "
method="post"
<р>
enctype="multipa rt/ formdatl"
action="http : //domain/handler .cgi•>
input
</р>

</form>
type= " suЬmit " value " Приеми ">

избраният по поgразби­
ране файл О теkстоОо­
Моля изберете файл за качване : <br> </body>
тополе. <input name=''filel'' type=" file'' value=''C: \this.file•>
<br>
<iлput type = "suЬmi t " value= " Koгaтo сте готови, ~ ·-. €
шракнете тук . " >

</р>

</form>
</body>

k) Nt..

tAo.t• .a~te ~ь ~~~ ~"uиt

~C~ondS.t.tl n,.. 1
118 HTML В леснu cmъnku
ГлаВа 1О СъзgаВане на формуляри 119

Cmaнgapmнu буmонu 0 нu за 6ъзсmано6я6ане на

Друт тип еле~енти за уnравление на формулstр'hТе
,."рвоначалнumе cmouнocmu
стакдартаитебутони,коитообикновеносе~:uо•лзва~ Бутоните от тиn reset позволяват на потребителите да
стартиране на скр:щrтови функции. възстановят оригиналните стойности на всички елементи

Все'Ки бутон трябва да nритежава име (name) и CТotn.."_ на формуляра.

(value), но те не се използват при изпращането па Ф:; Създават се чрез въвеждане на атрибута type="reset" на
муляра на сървъра.
таrа < input >.
Наименованието на бутона, което се изобраз.я:ва, е'
В следващия пример такъв бутон възвръща първона­
ност стойността на атрибута value на <input>.
чалната стойност (value) на текстовото nоле, която предс­
Когато nотребителят щракне с МИI!'J:Ката върху бутона, тавлява празен низ:
рибутът onclick на същия таг стартира скриnтова ф,::
<body>
ция.
<form nате ="formuliar " method= "post "
Тази функция често се намира в скриnтов блок в ce'II:OI&.
action="http : //localhost/cgi-Ьi n /script . cgi " >
та Head на HTML документа или в скриnтов Файл,

iZ) Чpmmpo
<р>
който има препратка.
<input name="polel " type=" text " size= " ЗO " value="" >
В следващия пример е добавен скриnт цире~о КЪJII' <br>
рибута onclick, който се стартира при натискането <input name="buton reset " type=".reset"
6lma onreset на тага
тона . vаluе= " Възстанови nървоначалните стойности " > <Ьr>
&:tm> моЖе ga се зaga­
Скриптът присвоява името на браузър а .rоато стс>ЙIIе>е ?JCfflapmupaнe на <input type= " suЬmit " vаluе= " Приеми " >
LiJxllm при натисkане </р>
атрибута value: 116уmон от тип reset.
</fo.rm>
<body>
</body>
<form name ="formuliar " method="post "
action=''http : //localhost/cgi-bin/script . cgi">
<р> бt t:rk l!ow ........ tосЬ tl<t>

<input name="polel " t ype= "text " size= "ЗO"> <br> о . u 0 ® ~ p .. tr,_... е rrt. $ -~ ~ - ~ s о r1 ·~
~~ (J\I'Ф1.1)8Qe'S\R~ tu:cn'l"'"''t~.N-' ,.; ~QJ
<input narne="butonl " type= "butt on" vаluе="ПОI~азване 111

[:q) Ckpu'm~
браузъра"
onclick="this . form . polel .value=navigator .appName">
<br>
Оите фунkции няма ga се <input type= " suЬmit" vаluе= "Приеми " >
стартират, ako браузь­
</р>
рьт не noggьpJka сьот­
Оетния сkриптоО езиk </form> ~

иш ako той е gеаkти­ </body> tj""" . ~ 0 @~ p su.q, -ц,-. в ~ - -~ ~ -- s о е. -~

Оиран от потребитеllс­
kите настройkи.
1:/о

0
,.. 'D<"

..,i • ~
!!Ф

~ @ ~ _р .....,. *. . . . ~ в- .;. ~ -
----
{.Мcosc~tlntemet&plorer 1
!. no,u,a~.... '{1·1§~·~ёii
r пр.·•~~~ 1
 .....
Буmонu за изnращане на формулярu LJ/\агане на uзобра>kенuе kьм буmонu за
Чрез натискане на бутон от тил submit naтnt~Б,.,...
праща формуляра на сървъра. ТакИ"Ва бyтotnt се
11,f'lрашане Чрез добавянето на атр ибута type="image" ва тага
ват чрез задаване ва атрибут type="submit" ва таrа <inpu~> се създават графични бутони за изпращане.
<inpu t>. Даивите от двойките име:стойност uu•~ПtliiOJill! В този случай е н еобходимо да се използва и атрибутът
се изпращат ва СGI-скрипrов хевдлър.
src, който да определя адреса на изображението за буто­
Атрибутът onsubmit ва тага <form> може да се иэnа~ на, както и alt, задава щ алтернативен текст за браузъри­
за стартиране ва скриnт при изпращане на форму~ те, които не могат да показват изображения.
Той се изn'ЬJIВЯВа непосредствено преди иэпращавеtо,1).
При изпра щан ето на формуляра сървърът получава и
ето му nозволява да валрави nоследна проверка на -.,
координатите х и у на мястото от изображението, върху
ните .
което е щракнато с мишката. Създаването на тахъв бутон
В следващия nример onsubmit се използва за за~ е итострирано в следния пример:

ване ва дробви числа, въведени в текстовото nоле,~ <body>

цели :
<form name= "formuliar " meLhod="post"

~
<body> action="ht.tp://localhost/cgi-Ьin/script . cgi">
<form name="formuliar " method= "post "

~ КМрgин.
<р>

~ Формум­ action="http : //localhost/cgi-Ьin/зcript .cgi " <input name=="polel" type="text" vаluе= "Здравейте " >
<br>
рьт моЖо ga сьgьрЖа onsubmit=''myform . polel . value=Math.floor
поОвче от вgин бутон (myform . polel . value) "> avne. ioumo се изпра· <input type= "image" src= " зubmit.jpg" width=" 51 . 67"
за изпращаив (Subтit). heigh="54 "
<р> lliiiТt св отчитат спря·

"'oб.lacmma на изобра- аlt=" Бутон за изnращане на фо~яра ">

<input name="polel " type= "text " value= "5.123">
8uето, а не спрямо
<input type= " suЬmit: " vаluе= " Приеми " > </р>
ещ~~ниuата.

<р>
</form>
</form> </body>
</body>

""""*' 1
122 HTML В леснu cmъnku 1м11а 1u vъзgа11ане на формуляри

Гра ф u чнu буmонu 6 а не на emukemu

Двойката тагове ва НТМL 4 <bчtton> и <IЬutto~ Даден текст може да се асоциира с елемент за уnравление

лагат друг начин за добавяне на бутони в уеб '-"l'J:>8J:III на формуляра чрез добавтrе на двойкатататове <1abel>
Съдържанието, заградено от тях, се изобраз.я:ва и <11abel> към до:кумента.
tSЪр:Ь<
тона и може да бъде както текст, така и изобра:же}Цfе. Има два нач:ива да оnределите коИ ще бъде асоциирави­

[:ZX) Тошт""'
Следващият nример илюстрира изnолзването на ят елемент за управление. Единият е да изnолзвате атри­
за създаването в:а nо-привлекателни бутони за из'fOaJ!,_ бута for, коИто nриема за стойност идентификатора на

св разпознайа от по·
в:е (Su bmit) и за връщане в.а първокачадните сто::: елемента, а другият е да заградите с <label> и <11abel>
старите Оврсии (првgи на формуляра (Reset): съответния елемент заедно със свързания с него текст.

6) на браузьра Nвtscape. Следващият nример изnолзва и двата nосочени: метода,

<body>
като демонстрира как може да се постави акцент върху
<form name="formuliar " method="post "
асоцииравия текст чрез nравило на набора от стилове :
action=''h ttp : //localhost/cgi - bin/script .cgi">
<р> <head>
"() <Ьutton name="butonl " type- " suЬmit " vаluе= "Приеми"> <title>Eтикeти</title>

<i mg src= " ThumЬs_Up_Button . gif " <style type=" text/css ">
аlt= " Приеми " >Приеми</Ьuttоn> label 1 background- color : silver ; color : green }
Тези бутони
ррботят по сьщия на· &nbsp ; </style>
чин, kakтo и сьзgаgени­ <button name= "buton2 " type="reset "> </head>
те с тага <inpиl>, но с
раз11иkата, че Оьрху тях
<img src=; " T humЬs_ Dоо,.ш_ But ton . gif" <body>
alt=''Orкaжи" >Orкaжи</button> <for m name=" formuliar " method="post "
могат ga се постаВят
изобраЖения. <р>
action= " http : //localhost/cgi -Ьin/script . cgi " >

~)Ak'"m""
</ form> <р>Моля

</body> <laЬel for= "material " >въвeдeтe материал</lаЬеl>

no Ваш избор<Ьr>
&те Отория метоg. <input name="material" type= "text " i d="material "> <br>
mazoiJeme <label> и след това
~/Ja ga заграЖgат
<lаЬеl>въведете размер<Ьr>
t:a1I0 mekcma и eguн

®nроо но 11 ~<мt 1
.....
о
Slё!teнm за упрай11ение. <input type="text " name="razmer "> </label> <br>
<input type= " suЬmit " vаluе="Приеми " >
</р>

</form>
</body>
124 HTML В леонu cmъn u 1ЛtШd 1U на формулярu 125

Tekcmo8u обласmu Об,со>kgане с ТаЬ

Д вой ката тагове <textarea> и <ltextarea> со изnаа Клавишът ТаЬ може да се нзnолзва за пре местване от ~­
за създаване на многоредови текстови подета, наРе1111 на върх-у дРуга х~mервръэка или между елементи за уп­

текстов и области , в НТМL документи. Таговете "СЧП.. равление ва формуляра, като обик новено се следва ре­
телно трябва да съдържат атрибутите rows ( редове) • д;ьт, в който те се изобразяват в дОК,У1\1евта.
c o ls (колони), които определят съответно Д"ЪЪlЖiutaтa _. Раэлич:ва последоватедност ва обхождане с ТаЬ може да
ши рнвата им. С атрибута na.me се задава име на IIQII8 се зададе чрез атрuбута tabindex, който се използва с та­
За разлика от <input>, тагът <textarea> ве лрите••• говете <а>, <are a >, < butto n >, < input >, <obje ct>,
атр ибут value . Като стойност се присвоява текстът,-.. <select> и <textare a>.
тавен между отварmция и затваря:щ:ия таг, ка11.-то е"""" Той присвоява р азлични (уникални) целочислени стой­
зано в следния пример:
ности, като се изnолзва с отделюtте тагове.

<body> В секи от елементите за управлевиена формуляра, опи­

<form name=" formuliar " method="post" сани nо-горе, може .ца бъде деактивиран чрез добавяне ва
action= ''h ttp : //localhost/cgi-bin/script .cgi"> атрибута disaЬled към тага му.
<р> Де активира ните елеме нти за уnравление не моrат да
'</
<textarea n ame= " oЬlastl " rows="5" cols = " ЗO " > приемат стойности., не се изn ращат с фор:r.rуляра и се

При изобра· Можете да променяте текста в тази облас•r . </tex tar~ прескачат при обхождан е с Та Ь.
зяаането а браузьра на <br>
В следващия пример се итострир а прилагането ва спе­
теkстоаи обАасти <inpul Lype= " suЬmit " vаluе=" Приеми " >
аатоматично св gоба· циално зададева поСJs едователност н а обхождането и на
</р>
Вят и пльзгачи. позаоля· деактивиран еJiеме нт за уnравде ние:
Ващи преглеg на цялото </form> раните ВАементи за

им сьgьрitание. </body> )f'tpJ8мнue на формумра <body>

tt wо6ра311Ват а сиВо а
<form name =-" formuliar" method.."post "
llllkou браузьри. kakтo е
118 nwu пример
action=-"http: //localhost/cqi-bin/scr~pt . cgi ">
<р>

<input t:ype=-"text" size.. "2 " value="N•2 " taЬindex="2">

<input type="text" size-"17" value="IH - деактивиран "
1 taЬindex= " l " disaЬled>

J <input type=" text" size-"2" value="t.~З" taЬindex=''З">

<input type=" text " size="2" value="IN " tahindex="4">
<input type=" su.Ьmit " value="NIS - Приеми " tahindex="5">
</р>

</form>
</body>
'

•
126 HTML В леснu cmъnku ГлаВа 10 СъзgаВане на формулярu 127

Meнloma за uзбор rpynupaнe на менlоmа

С двойхата тагове <select> и <lselect> се създава Определени о•щии от мешото за избор мотат да се груnи­
за избор, от което потребителите могат да nосочват рат чрез двойката тагове <optgroup> и <loptgt·oup>.
от изброевите onщm.
С атрибута labe l на <optgt·oup> се задава име на вс.я:ка
Атрибутът name на <select> nрисвоява като cтo~ЙJtOcf,l груnа.

дено име. Двойката тагове трябва да загражда crn~C'J.. Следващият nример илюстрира изnолзв ането на мешо с
опции ва мешото.
фwссирана дължина, като с а зададени имена на отделни­
Текстът, Iсойто оnисва всяка от т.ях, се поставя MeJR..цy те груnи от оnции:

<option> и <loption>, като все'КИ отварящ таг трябваtt <body>

съдържа атрибут value.
<form name= "formuliar " method="post"
При изnращавето :на формуляра стойността на naжne аа., action:" http : //localhost/cgi-Ьin/script . cgi " >
га <select> и тази на аrrрибута value на <option> ~ <select name= "izborl" size='' б " >
v v
двоиката име:стоиност, която се получава от сървъра. <optgroup laЬel= "Гpyna 1">
Меmото за избор обикновено се изобразява като па,дmЦ[ <option value= " l_l ">Пъpвa опция</орtiоn>
сnисък, а с атрибута size на <select> се определя <option value=" 1_2 " >Bтopa onu.ия</option>

~ Akogoб•·
аите атрибута size='4'
ната му.

Следващият nример демонстрира използвапето на

за избор, като е добавен атрибутът selected, който
~ V.Wбp•,...
,m~в. koumo не разпоз­
</optgroup>
<optgroup laЬel= "Гpyna 2">
<option vаluе= " 2_1 " >Първа OПJJJ.1я</option>
набат тага <optgroиp>,
kъм тага <selecl> а воначално маркира като избрана една от опциите: <option value= " 2_2 " >Bтopa OПJJJ.1Я</option>
ше изобразят мен/ото
kонkретния пример, </optgroup>
<body> за избор без имената на
размерите на мен/ото
<form name="formuliar " method="post " lp'(nиme. </select> <br>
ще бьgат фиkсирани.
action='' http : //localhost/cgi - bin/script . cgi "> <input type=" suЬmit " vаluе= " Приеми " >
<р> </р>
<select name= '' i zborl '' > </form>
<opt i on va l ue=" l " >Пъpвa опция</орtiоn>
<option value=" 2 " >Bтopa onция</opt ion> </body>
<option value= " З " selected>Тpeтa onция</option>
<opti on vа luе= " 4 " >Четвърта OПJJJ.1Я</option> ~- - 1Jdf !!оЬ
</ select> ~· ru ~ Ю ;) ,;J ,_... '~~·-.. е 0 --: 2!i -
<input type= " suЬmit " vаluе=" Приеми " >
</р> Гpyu.t 1
П1орео Ol'l~e:t
</form>
~
8fOPOOt'Цбll
Гp!Jf11t 2
</body> Л'Ърео оnЦИ.

~ Сатрибута
6·~-
(np,.ft

1/ldJ !!оО
опсhапgе на тага
<select> моЖе ga заgа­ а "" «r? 0 ~ .f} ; ; - ?.~ ·- е в - .;t Е - Js о а
gете стартиране на

сkриптоаа фунkция при

избиране на опция Of1?
мен/ото.

..
128 HTML В леснu cmьnku
u noлema
Груnuране на noлema
Свързаnите nолета на формуляра могат да се u~eJUьь.
в груnи (fieldsets), които браузърът показва оо a aчiUI,
недвусм ислено nодчертаващ връзката помежду им.

183'..1 г е със
лава ше ви разясни комnонентите, изrраждаJди
Подетата, които ще се изобразяват заедно, се въве~
{1.10" 08
съдържание в НТМL документ. С nомощта
между двойката таrове <fieldse t> и <lfie ldset>. Гр~ НS nримери се демоветрира как можете да изnолзвате
може да t rмa общо ваимевовавке, Rоето също да се C'qti' rnr.108 и лравила за манвоулпрането ва всеки от тях.
ва - то се записва между <legend> и <llegend>.
Следващият аример демоветрира С'ЬЗдававето аа две
темu :
груn и 11олета и техните ааимевовав ия:

<body> 5f.Ok сьс съgърЖанuе 130

<form name=" formuliar" method="post." Ll6Rm на фона u на paмkama 131
act.ion="http://localhost/cgi- bin/script . cgi ''>
<fieldset> CmUII на рамkа 132
<legend>Изeepeтe цвят</lеgеnd>
<input type="radio" name="cviat" value="bial" Wupuнa на рамkа 132
checked>Bял
<input. type='' radio'' name='' cviat'' СЬkраmено заgаВане на еВоостВа на рамkа 133

[~) Бро~оритв
value•" oranjev" >Opaнжeв ДобаВяне на уnлътняВане 134
<input t.ype="radio" name="cviat" value="sin ">Cин
</fieldset> Оmносumелно уnлътняВане 135
изобразябат групира­ <fieldset>
ните n011ета по разли­ <lеgеnd>Изберете материал</lеgеnd> Съkраmено заgаВане на еВоостВа на уnлътняВане 135
чен начин. <input type="radio" name="material" Заgа8ане на nолета 136
value.."pamuk ">Пaмyк
<input type="radio" name="material" value="len Съkраmено заgаВане на еВоостВа на nолета 137
</fieldset>
<р> <input type= " suЬmit " vаluе= " Приеми " > </р> да обеguнuм знанuяmа 138
</form>
</body>

L" td' .,.... .......

v 1!1 ~ ~ ~..... -tr•- ... е ~ - ..... ~ ·

Н.Wpett 1ZUY
Е>Ем ООроо .... ОС••
1Ь"f'J-'4'tf ...&lfftt.U'"'
OП.><rt 0)1,.

~ ... 1"" ""'

•~ •t; 1\J ~ (Ut,.J/ICIНIOO..._-~-
Г. - . ........- r~--. r~ ·-- c. -
/'ы.p..•
CD&c.
....
ООроо.,. ос ..
 1 11аоа 1 1 r- aмl\u u IIU/\1:111 еа 1~ 1

Блоkсьссьgьр*анuе rn на фона u на paмkama

Всеки б1!ок със съдържание в документ се поставя За да създадете рамка oкoJto блок със съдържание, трябва
8
видим nравоъrълн:и:к, който го огражда. да зададете стойности за свойствата цвят (color), ширина

~ Този nравоъгълник има три свойства, чрез кo 1rro t.loQIIIIIII (width) и стил (style).

~ СОойстОа­
се задава как да uзглежда блока със съдържанието. Свойството border-colot· (цвят на рамка) на набора от

та на 611oka сьс сьgьр­ Горна част (top) стилове задава цвета ва цялата рамха на блока със съ­
г---------------
Жанивто имат горна.
1 п~е 1 държанието.

gйi\На. мОа и gясна част.

____ Раuка ____ - ,
kоито могат ga св
ауресират поотgв11но.
1
г Уnлътняване
1
1
По подобен начин се задават шираната ч-рез свойството
border-width (Ш11р~tва на рамка) и стилът чрез свойст­

lд..•.
1 вото border-style (стил н а рамка).

"'"(Ioft)"" 1
~
1 """'"'"" 1 ?т Примерът nо-долу в началото задава всички р амки на

~ МоЖвтвgа
1 1 1 блокове със съдържание да бъдат черю1 , да имат пmрива
ЗО пиксела и с да са nлътеи (solid) стил.
1 L _ _ _ _ _ __j ~ Slg88amB ра:111ични uOe-
mdJe. tamo използОатв На свойството background-color (фонов цв.ят) се задава
L____ _____ _J d)oUcmOamo uОят на
~ рамkа (bordвr.fвft­
име на цвят, ко'!7rто HTML разnознава, за да се опредеЛй
фоновия цвят на блока със съдържанието.
Долна част (bottom) cdoll и uORm но gясна
"";.а (bordвr-riфt-colorJ. На долния и горния ръб на рамката се задават раЗJmчв:и
Свойството padding (уплътвя.ване) дефинира ръбоввst цветове, които заменят общия цвят за точно оnределеви­
на блока със съдържанието. Когато ва уnлътвяваветосt те два елемевта.

зададе ширина вула, ръбовете на този правоъГ'ЬJТНИJI:

<head>
съвnадат с границите ва намиращото се в вего съдъра.
<titlе>Цветове на фон и на paмкa</title>
ние. Ръбовете на блока със съдържанието се изнасят ва-;
<style type~ " te x t/css">
вън с увелт1Чавапето ва ширината на уnлътвяв авето.

Свойството border (рамка) задава ширината на o6naaf ffi р ( border-color:red; border - width : ЗOpx ;

background-color : aqua ;
border-style:sol~d;
та, заобикаляща блока със съдържанието. При раъuса с
ширина нула ръбовете ва рамката съвпадат с ръбовеll
l!L.J Нв забра­ga
i!мJе осбвн uОят
border-top-color : green; border-bottom- color :green }
</style>
ва блока със съдържаm1:ето. Ръбовете на рамката се_. »gagerпe и ширина и
апщ </head>
с.ят навън с увеличаването ва ширивата на рамката.
<body>
Свойството margin (поле) задава ППiрината на oблaes'llt <р>Това е съдържанието</р>
заобикаляща ръбовете на рам.ката. За граница с JIIИР.­ ~/body>
вула, ръбовете на полето съвпадат с ръбовете .на Р~
Ръбовете на nолето се извасят навън с увеличаването 11t
"' "" '(<оо . _. .. 1""' tlo<>
ширината на границата.
J 1!1 ~ ~ р._ . ·-·· €1 С · ~ · S О liJ -~
---
i ~~ HTML В леснu' cmъnku 1 /\EIOU 1 1 l"' aM"'U U IIUI\8111ct

Cmuл на рамkа border-top-width:ЗOpx; border-bottom-width:Spx 1

</style>
Стилът за всички четири ръба ва рамката около </head>
<body>
съдържание може да се задава общо чрез свойствОТо <р id,.. " рl " >Оьдържание</р>
bordet·-style (стил на рамка). <р id= "р2">Съдьржание</р>

~ Всеки ръб може да бъде специфициран. и nоотдел110 </body>

~ Зagackpu·
ете рамkа. заgаоте на
сОоостйото на стила о
стойност попе.
свойстватаborde r-style-top, border-style-botto~~~,
border-style-left и border-style-rigbt (съответно за ..
·-е е:·
рев , долен, ляв и десен ръб на рамката).
Илюстрацията по-долу показва възможните стилове._
рамки и как се визуализира всеки от тях в браузър:

~-----------------------------------------------·
~~i --------------------------------------------.:
······ .....•.................................... ···················•· •••••• Сьkраmено заgа6ане на c6oucm6a на рамkа
........................... ················································
~
•Ookd • •

Можете да зададете необходимите правила за оnределя­

Ш Незабра­ нето на рамка с едно свойство на набора от стилове -

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

~ Свойството border задава общи стойности за ширината ,

tLJ Реgьт,О
стила и цвета на рамка със следния синтаксис:

Ьorder : ширина стил цвят;

Wupuнa на рамkа iUno се заgаОат три­
". tpamku сОоОстОа на В прю.1ера nо-долу рамката около първия блок със съ­
Ширивата на четирите ръба на рамката около блок 118/kama, е бвз значение. държание се специфицира, като се задава стойност на

~
съдържание може да се задава общо като се изnолзва всяко свойство поотделно.
свойството border-width на набора от стилове.

~ НасОоост­
аата на ширина на рам­
kа могат ga се заgаОат
и стойностите thiп
(тьнkа/, теdiит (среgна/
или thick fgeбeAa/.
Рамката на втория блок със съдържание изглежда по съ­
Поотделно за всеки от ръбовете могат да се настройва'l'
щия начин като първата, но cтoiO:rocтwre са зададеви със
свойствата border-width-top,borde1··width-botto1Dt съкратевата версия border:
border-widtb-left и border-widtb-rigbt (съответно за ..\.
<head>
ширина на горния, долни, левия и десюш ръб на раме& <tiсlе>Съкратено задаване на свойства на paмкa</ticle>
Примерът по-долу задава обща ширина на рамката~ <style type="text/css">
nървия параграф, изрисувана със стил inset. За palllr f ;sl {border-width : 5px; border-style : outset;border-
color:green; padding : Spx 1
на втория nараграф, също със сrил i.:iiset, ширината Jll. ~s2 {border : Spx outзet green; padding : Spx 1
ръбовете на рамката се задава nоотделно. </style>

rl1 Не ,.бр• <head> </head>

Ояйте осОен ширина ga
заgаgете цОят и стщ
<titlе>Ширина на paмкa</title> <body>
<style type="text/css"> <span id="sl " >Съдържание</sраn>
ipl {border- color:green; border-style:inset; <span id-"s2 " >0шe С'ЬД'ЬрЖание</sраn>
border-width : lOpx } </р>
Вр2 {border-color : red ; border-style:inset; </body>
border-width : lOpx;
 1 ЛQ1j3 1 1 I"'B I\(IKU U IIU/\tfllla IUoJ
1 34 HTML В леснu cmъnku

осumелно уnльmня6ане
Областите за уnлътftЯВ а ве в блок със съдържание моrат
да се задават и в зав исимост от друrи характе ристики ga
докумеата. Те могат да бъдат задавани като процент от
блока , в който се намират, или в зависимост от текуiЦИЯ
размер н а шрифта. Този пример прилаrа уnлътияваве с
ширина равна ва два пъти ш11рината на текущия шрифт
ДобаВяне на уnльmня6ане и след това на 60% от обхваща11.1.КЯ го <div> елемент:
<head>
Областта на уnлътв.яваве около самото cъдьp:lltaiВI <titlе>Относително ~няване</titlе>
блок ~tоже да се задава с nомощта на свойст вото <style type="text/css ">

~ Процв•mи·
padding на набора от стилове. То оnределя обща div ( width : lOO% }
рина за уnлътняв ане, за обикалящо съдържtL мJКй'I'А" р { border-color:Ьlue; border-width : medium;
четирите страня . border-style : solid; padding-lett : 2em }
111 /1В св опреgелят apl ( font-size:8pt; background-color : aqua }
ОтдеJtните шир:ияи за уnлътн.я»ане могат да се IJ(IIIIO самия бt.ok сьс
~ание. а спрямо ip2 1 font-size : l4pt; background-color:green }
в ат с~с свойствата ~adding-top, padding-bottom, ~ toamo сьgьрЖа ~рЗ ( padding-left:бO ~ ;background­
paddшg-left и padding-rigbt (съответно за горна, 6v)ka сьс сьgьрЖвние color :purple ; color :white }
лява и д.ясна) ва набора от стилове. rхrреgвлен от тага
</style>
<fti>)
Следва щият прим ер задава общо уплътв .я»аве за </head>
<body>
първия п а р агр аф и само отгоре за втория naparpack
<div>
<head> <р id= " рl " >Оьдържание</р>
<title>Ynлътнявaнe</title> <р id="p2 ">Съдържание</р>
<style type="text/css ''> <р id= "рЗ " >С"ЪдЪРЖ<)НИе</р>
Р { Ьorder-color : peд; Ьorde r-width : thick ; </div>
border-style:solid; background color : aqua } </body>
Bpl { padding : lSpx }
ip2 ( padding-top : ЗOpx }
</style>

[1У) С•виОФ.I•
иията на HTML 4 uзuck·
</head>
<body>
<р id= " рl ">С~ржание</р>

Оа Оинаги, kогато заgо· <р id= " р2 " >Съдържание</р>

Вате чисАоОи стойнос· </body>
ти а nukceлu, те ga
бьgат послеgОани от
!... 11>\>
суфиkс.рх~
v ..; ~ ~ ~ _р,...." 'т~·- е tE:· ~ а · s о 11
4.> ..
Съkраmено ~аgа8ане на c6oucm6a на
Уnлъmня6ане
Можете да задавате уnлътняването за блок със съдържа·
ние само с едно свойство ва набора от стилове, варечево
padding. Чрез него можете да сnецифицирате стойпостя
едновременно за горва, дясна, долаа и лява области на
i ЭG HTML 8 леснu cmъnku Гла6а 11 Paмku u noлema 137

уnлътняване. Ако се зададе само една стойност, тя ното поле на вложев:ия <div> елемент са зададеви 20
наса и за четирите стра1fИ. Ако се зададат две СТ<)ЙJ:ь. пиксела от ръба на външв:и:я <div> еJtемеит:
~ първ ата се отFrася за горната и долната страна, а
<head>
~ ЗаgаОанвто - за лявата и дясната страна. Ако се зададат тра
ти, първата се отнася за горвата стр ана, втората за
<title>Пoлeтa</title>
<style type="text/css">
110 упльтняОанв св при­
та а дясната страна и третата за долната страна. Л1со body { margin:Opx }
ема О рвgа горна. gясна.
зададат четири стойности, те се отвасят съответно за
:divl { background-color : lime; margin:Opx;
gолна и ляОв области нв
width:200px; height : 75px }
уn~оьтняОане. ластите иа уп лътияване в горвата, дясната, доп:аата а idiv2 { background-color : yellow; padding : Зpx ;
лявата страна. border-width:8px;
border-style:outset; border-color :purple ;
В този пример съкратеното задаване ва свойството margin-top : 20px;
border създава рамки, а съкратеното задаване .на maxqin-left:20px ; margin- right : 20px }
твото padding добавя уnJiътняване: </style>
</head>

~ п втвта
<head> <body>
<titlе>Оъкратено задаване на свойства на <div id= "divl ">
</title> <div id= "div2">
<style type=''text/css''> ..
~ rюzam ga св интврпре- <sраn>Оьдържание</span>
span{ border :outset fuchsia 8рх; background- color: </div>
111JР8т gирвkтно от

~ Комента­
/* уnлътняване отгоре , отдясно , отдолу , отляво */ </div>
Stekи брауэьр.
Usl ( padding: 5рх 20рх lOpx lOOpx 1 </body>
рите а набор от сти- </style>
11008 започВат с!' и </head>
заОьршОат с ~;- kато
kомвнтаритв О
<body> <р> <span id="sl">Съдържание</sраn>
<span id= " s2 ">Съдържание</sраn>
"' ,.. "'" · - 1!4< tloO>
о о · 1!1 f2l ~ >з- -J.r.._... е~ ~ в ·
•
JвvaScript. </р>
</body>
..---... ·
~-liol(lfФO..__

lc.np~t..•• 11
-

11"'< ~

~ ОО ~ _,..>..- r·- е ~- .. 3 · Utlc-

"'""-
Сьkраmено заgа6ане на c6oucm6a на noлema
Всички nолета ва блок със съдържание моrат да се зада­
дат чрез свойството margin на набора от стилове.
Заgа6ане на noлema
Свойството margin може да зададе общо стойности за
Областите ва nолетата могат да се опр еделят чрез rорво, дясно, долно и ляво nоле. Ако се зададе само една
вото margin ва :на бора от стилове , което задава на стойност, тя се отнася за всичките четири страни. Ако се
ки полета 11а блока nрисвоевия му р~мер. зададат две стойности, първата се отнася за rорвата и

ОтдеЛJШТе nолета могат да се задават като се изаоJIВ долната, а втората за лявата и дясната страна. Ако се за­
дадат три стойности, първата се отнася за горвата, втора­
свойствата mш·gin-top, margin-bottom, m~:iriPJJ1 "1.,
та за лявата и дясната, а третата за долната страна. Ако
margin-right (съответно горво, долв:о, ляво и дясв:о
се зададат четири стойности, те се отвасят съответно за
ва набора от стилов~. ·
rорната, дясната, долната и лявата страна. В този пример
Приме рът по-долу задава за полетата по по,щ>:азt:tВР' съкратевото задаване на свойството border с'ЪЗдава рам­
на по-големия блок да с'а равни н:а н:ула , зада моР ки, съкратеното задаване ва свойството padding добавя
елементът, определен от <div>, да се покаже в уплътвяваее и съкратеното задаване на своиството
v

н:ата лява част на страницата. За горното, лявото .11 margi.n задава полета:
 ,•..,._онuране на блоkо8е сьс сьgьр>kанuе
138 HTM L В леснu cmъnk u

<head>
<titlе>Оькратено замване на свсйства на naлe•ra·~J
<style type '' tе хt /сзз ">

~
зраn ( border :dotted purple Spx; backg
}

~ ЗвбВАвЖе­ обясвява
lsl ( padding : Spx; margin : ЗOpx lOOpx 20рх ЗОрх коорди:натната система, изnолзва-
r~ава НТМL
</style> fJ"' .oтиoweiUie на определеви точки в доку-
тв, чв стойността на </head> ,. ро !UJючени са nримери, nоказващи как да зададе­
gясното по~ов ksps Ото­
рия б~ооk сьс сьgьрЖвиив
<body> <р> <зрал id= " sl ">Сьд'Ьржание</зраn> ~ttr·<!НОТО
В М естололожение ва съдържание в до:кумент с
<span id= " s2 " >С'Ъд'ЬрЖаНИе</зраn> <lp>
gs св првмвсти иаgясио. </body> tf то на набор от стилове.
,paв•tJt8

1·• ~

..; 1!) ~ :: Р'-" w·- е !..·.,.. .1!! • feiiU:

....... .-....-.
y:(l ~pguнamu 140
~~f!~~-.~
~1оmна noзuuuя 141

nogpeЖgaнe no ocma Z 142

относumелна nозuцuя 143
Да обеguнuм знанuяmа
nлaвawu блоkоВе С'ЬС съgърЖанuе 144
Този по-nъден лример използва някои от свойствата
Qс6обоЖgа8ане на сmрана на mekcm 145
рамки , граници, упдътняване и фовов цв.ят, paзrJte,II(,IIJ
Промяна на размера на блоk със С'ЬQ'ЬрЖанuе 146
в тази r лава:
<head> Препьл8ане 147

~) За~еЖете
<titlе>Обединяване на свойствата</titlе>
Иэрю6ане на nреnьл8ане 148
<style type= "text/css ">
body { border:outset ЗОрх red; background-color:
[ р ( border :douЫe Spx purple; paddinq:lOpx;
kak О с~оучая lntвrnвt backg round-color :lime; margin: 20px }
Exp/orвr првмвстОа h2 1 color :Ы ue }
~овнтата за првОьртанв </style>
Оьтрв О рамkата на </head>
б~ооkа сьс сьgьрЖанивто <body>
- при gруги браузьри <h2>Рамките са доста интересни, </h2>
тоВа моЖе ga е раЗАич­ <р>ако се научите</р>
но.
<Ьr>да ги изnолзвате добре .
</body>
140 HTML В леснu cmьnku 1Л!I:SQ 1~ llб~UUUUHЩJfil'!8 rm UJ\Ur..uue CU\.. c;uyu..,JI\ttnu

XYZ koopguнamu lomн a nозuцuя

Към физическата nозиция на съдържавие на IIp()3C]м. Позицията на блоковете със съдържание в документ мо­

можете да се обръщате като изnолзва'J'Iе коордвuата. же да се уnравJLЯВ а с помощта на свойството position

речеви Х, У и Z. (позиция).

Х 1соординатата задава разстоянието в rw:кceJII1 от За да оnределите точно местоположение, трябва да зада­

ръб на nрозореца.
4
"'*11• дете на свойството position стойност absolute.
У координатата задава р азстоянието в IIИКсели от 1'0Dвll. След това се задава У координатата на блока със съдър­
ръб на прозореца. -~ жание , като се прйсвои стойност в пиксели на свойството

Z ко ординатата задава nозицията като индекс на

top. Това оnределя р азстотmето на горния ръб на блока
със съдържавие от горвата част на nрозореца или вънm­
най-долиото ниво на прозореца:
вия съдържащ го блок.

По nодобен начин се задава и Х координатата, като се

дрисвои стойност в пиксе.ли ва свойството left. Това зада­
ва разстоянието ва блока със съдържание от леви.я ръб на
nрозореца ИЩI ВЪВПТftИЯ съдържащ го блок.

Този пример задава абсошотни nозиции на три блока със

•
у : съдържание:
••
<head>
<titlе>Абсолютна позиция</titlе>

<style type= "text/css">

div background- color : aqua; width:200px }

~~.~
~dl position:absolute; top : Opx ; left : Opx; width : auto
}
~d2 { position:absolute; tор:ЗОрх; left : 80px }
QC ~ание е 0Aoit.eн ПdЗ { position:absolute; top : 60px; left : 250px }
8!lJYг блоk, paзcmoянu­ </style>
lllirop и left се заgайат
Х координатата ва левия ръб на nрозореца е равна </head>
Clllюcvmeмo спрямо
нула, както и У координатата :ва горвия му ръб. ~на cьgьpit.a­ <body>
.. ~а не спрямо <div id="dl''><p>X=O , Y=O</p></div>
Позиция с координати Х=50 и У=ЗО ще зададе място Cialu11a nрозореца.
nиксела от леви.я ръб и ва ЗО пиксела от тораия ръб. <div id="d2" ><p>X=80 , Y=ЗO</p></div>
<div id="d3 "><p>X=250, Y=60</p></div>
Z координатата на най-долното ниво на nрозореца
стойност на индекса, равна .на нула. Над това виво
</body>
да се поставят слоеве , наnример nрозрачни листове,
им се дават уникалии стой:ности на Z-и:вдекса.

Един nрозорец може да има много слоеве, но

слой винаги ще има най-висо:ката стойност ga Z-JfiiJJ~
Всеки следващ слой под вего ще има намалявата
ка стойност аа Z-и:вдекса .
 142 HTML G леснu cmьnku ГлаВа 12 Позuцuонuране на блоkоВе сьс сьgьр>kанuе 143

Пogpe>kgaнe по ocma Z tfocumeлнa nозuцuя

Освен за задаване на Х и У координати at>cOJIJ'J01'1fc~ (Jfl1 Свойството ва стил position може да се задава отвоси­
зициониране може да се използва sr за onpeдeJlJtl:re телно (r elative), за да настрои позидията ва блокове със
да на сдоевете по оста Z. съдържание спрямо стандартното разположепие ва оста­

Стойността на Z-нидекса се присвоява на свойств налото съдържание.

"dех, за да
ш се зададе позидията на слоя в пореД}{
~ Позицията ва бдока със съдържание първоначално се
слоеве. OC'rlttj определя от ста:ндартяия -начин на разnодожение, която

след може да бъде настроева , като се изnолзва правилото

Слоевете се позиционират в нарастващ ред в завис:~~n~
от стойността иn техния z-ind ex, така че nо-rораите 1 за стил position.
ве приnокриват тези отдолу. c.1lli.l В примера nо -долу всички блокове със съдържание се

Този пример задава някои общи стилове за блокове подреждат в зависимост от стандартното разположение,
. ~
съдържание < d t v> и след това им задава абсол10'11U1.." което е обозначево с преь.-ьсвата Jс ив ия.

зици:и я nодреждане : След това с помощта на правида за стил се настройва от­

<head> восителво позицията на два от т.ях сnрямо nозицията

<titlе>Подрежда не по оста Z</t itle> им в ста11дартното разположение:

<style t ype~ '' tex t/css '' > <head>

~ id2 { position: absolute ; top : 50px; left: 120px;
~ ЗаgаОайте
на елоебете стоОности
през 10 - таkа 11есно ще
Омьkнете gруги елоебе
помеЖgу им. ako тоОа се
Н811йЖи nо-kьсно.
div { border : douЬle 5рх red ; width : lOOpx; heigh t:S~ <titlе>Относителна noзиuия</title>
background-color:aqua ; padding : Зpx } <style type• " text/css">
idl { position : absolute ; top : lOpx; left :4 0px; span 1 width :4 0; height : 40 ; background-color : teal ;
z-index: lO } color: white ; margin : Spx; text - align:center }
z- index: 20 } ~
. goren 1 posi t ion : relative ; tор : ЗОрх 1
.dolen { position : relative ; top :-20px 1
</style>
</head> l!:.J Уgобно е ga
</style>
</head>
CJ/cьзgage kмс за заgа·
<body> В. на npaOUIIo за от· <body>
<d.iv id= "dl " ><p>Cлoй l<Ьr> z- index=lO</p></div> ra:vtnf!Nia позиция за <р>
~ <span>A</span><span>Б</span><span class ="goren">B
<d.iv id= "d2 "><p>Cлoй 2<Ьr> z- index 20</p></d.iv>
</body> </ span>
<span>Г</span><span class="dolen " >Д</span><span>E
</ span>
<span>Ж</span>
</р>

</body>
СОойстОо­
1110
Sанеlext-align (nogpeOнR·
на mekcm) О този l'l" ........ tpclt 11'<'
::вр осuеУРяОа цент· 1!1 @1 :1 ?!оо."' -t ._... е . . . . ,,. ~ · s ~ 11 -~
41{] нето не теkста
'1& l1ceku бАо.~ За поОе­
!10 ~наетиотнос·
"_~ cOoucmoo биЖ·
lJ.aбa 13.
...
144 HTML В леснu cmъnk u ГлаВа 12 Позuцuонuране на блоkоSе със съgър>kанuе 145

Пла6ащu блоkо6е сьс сьgьр>kанuе бо.>kgа6ане на страна на mekcm

Блок със съдържание може да бъде преместен 8
1181k:.l
лявата и вай-дясната част на текущия ред, l(ато се
зва свойството за стил float (плаващ). Можете да мv·-'
дадете стойности left (ляво) или rigbt (дясно), за .ца
мевите позицията ва блока.
Най-важвото е, че това nозволява останалото съд-ь
Може да забравите ва съдържавие да обхваща плаващ
блок, като използвате свойството за стид clear. Това оз­
начава, че лявата или дясната страва :ва текста трябва
да остане евободва и се задава съответно като стойност
1111. left и.пи right ва clear.
В примера от npeДFia-тa страница, на второто изречение

вие да бъде разположено около този блок. Plra. може да се забрани да обхваща блока с изображението.

В примера nо-долу има параrраф с текст и nлаващ,;-....._ Примерът по-долу добавя nравило за стил clear към вто­
изображение, nреместен в лявата част на текУtцня ;::' рото изречение, като така то се появява nод блока със съ­
<head> държание на изображението, вместо да ro обхване:
<titlе>Плаващ блoк</title> <head>
<зtyle type='' text/css '' > <titlе>Освобождаваие на страна на тeкcт</title>
#bl 1 float : right } <style type= "text/css ">

"<1
</style>
</head>
<body>
~ T•kcmнo
kl)nO в заgвgено
~Ы float : left }
ffsl { clear : left )
</style>
dW:feft (осОобоЖgааане
<р>
II'Jilo!. ще проgьлЖааа </head>
В gруги
Те'КС'I"ЪТ
<img id= "Ьl " src="flower . jpg" ,обхОаща nt~аОащи <body>
браузьри обхаащането
на изобраЖението от
height="53 " alt= " flower">в този nараграф обхваща fddJe сьс сьgьрЖание, <р>Текстът <img id= " Ы " src="flower . jpg" width="47"
nлаващия блок С'ЬС съдържанИе - из0(5ражение . След 1f1118Cmeнu аgясно.
теkста моЖе ga изиеЖ­ height=" SЗ " alt="flower "> в това изречение обхваща
долната ~аст на nлаващия блок оедовете отново
gа по раЗАичен начин. плав.ащия блок С'ЬС С'ЬД'ЬрЖЗНИе - точно както в предишния
заnочват от стандартната си поз~я . Това е от~ . npимep.<span id="sl">Ha текста от второто изречение не
начин за ИЛJОСтриране на текст с малки из0(5раже;;;,;~ се позволява да обхване блока с изображението.</sраn>
като това, което виждате тук .

</p></body> <Jbody>

0!!! ~ fJs-a. t.r F~ е s -l}

Текстьт в тоэн параграф обхваща маващия блок С'ЬС С'Ьдържание - Текстът в това яэречение обхваща nлаващия блок със съдържание­

о
~t:Jображеине. След допната част на плаващия блок редовеff о точно кaJcro в nредишнrrя nрпмер,
отново започват от стандартиата си nоэицпя. Това е отпичен
на•шн за нпюстрnране на текст с ъшmсн m~обра1кеюrя- като
това, което виждате тук. На текста от второто изреченис ис ос n03вопява да обхване блока с
нзображението.
Му
 146 HTML В леснu cmъnku
Промяна на размера на блоk сьс сьgь
Пlиривата и височината ва блок със съдържац:gе
ват със свойствата за стил width (ширина) и
сочина ). Въnреки изричната инструкnи.я за задаа
размер, някои браузъри автоматичяо промев.лт ~
ната на блока, ако съдържанието в него няма да се -
ви~
ре в зададеRИЯ разме р.
Този пример показва как може да изглежда съд'Ьр
пр еn"ЪJmащо блок, в два различви браузъра:
<head>
<ti tlе>Промяна на размер на блок със ~е
</title>
<style type=" te x t/csз ">
ГлаВа 12 Позuцuонuране на bлokoi:Se със съgържанu1:1 ...,
пьл6ане
Свойството на стил overflow (npen'ЬJIВaнe) може да бъде
използвано, за да се укаже яа браузъра как да реагира на
съдържание, J(оето .няма да се 11обере в зададените ш:ири­
на и височина ва блока, в който се нш-rира.
Присвоявавето ва стойност visiЬle (видим) на това
-..,
свойство, nозволява на браузъра да покаже nрепъл:ващо­
то съдържание извън блока 1\fY.
Можете също да зададете стой ност hidden на свойството
overflow -то скрива всяко съдържание, което не се по­
бира в блока, но така то може да остане недостъnно за
потребителя.

[1:Х] Преп~'"'
Стойност scroll, nриевоена ва overflow, указва, че съ­
div { border : dotted Зрх red; margin :Spx; width:
200рх; height: 20рх 1 държанието може да не се побер е в блока. Когато е зада­
</зtyle> дена тази стойност, браузъри, които поддържат ленти за
моЖе ga се noAyчu, kо­ </head> аревъртане за блокове със съдържание, трябва да го по­
гато брвузьрьт изnоАЗ­
Оа гОN/м шрифт - Ошk­ <Ьоdу> <div>Toэи блок е 200х20 nикceлa</div> кажат вътре в блока.

те гАаОа 13, за ga нау­ <div>Toэи текст няма да се nобере в ~ с Следващият пример итострира ка.к се използват ленти
чите kвk ga ynpaONIOa- размери 200х20 nиксела
за nревъртане ари препълв ащо съдържание:
тe размера му. </div>
</body> <head>
<title>Пpenълвaнe</title>
<style type=" text/css ">

[j Коипю
div { border:douЬle Зрх purple; width:200px;
height:lOOpx; overflow:scroll } </style>
</head>
~~~&те общия размер <body>
•&о~а сьс сьgьрi<ание, <di v>Тоэи текст няма да се С'Ьбере в nрав<УЬl"'Ь11НИК с
tm«Jяumв gопьлнитвА­ размери 200х100 пиксела, но nотребителят може да
•rvюсrпранстОо за nревърти надолу, за да nрочете целия текст.</div>
._~за првОьрта­ </body>

- 5о !111

G
-

-и
1"* tj:o
. .......

.!U :j ~ / - 'i!J•-· .. е • .. 1!!1 •

•
f~;:н•:~:J~:~:~:~::·~:::~:'~~~--------------------------------~~~~~~~
~

8 Ср80~8Ц(

""'" 200х\ОО ааиа&.

О С~IПU8Т 8801U: .U v

s"'......_
i 44 HTML ~ лес н u c mь n ku
не на cmuлo8e kьм mekcm
И з рязВане на nреnьл8ане
Свойството за стид clip (изрязване) oпpeдe.IUI об.п&е?
изрязване, който ще бъде единетвевата ВИдиМа Ч&е?
б11ок със съдържание. Областта за изрязва.f!е е ПРl'Вм глава разглежда представявето на текстово съдър-
Г"ЬJП::а и контурите И се задават по следния вачив _ f831' НТМL докуменr. С nомощта на nримери се де-
~"ие в
горев десев долеи ляв. Параметрите npeд•C:UlВJIIJQI ро-(fpifPa как можете да повлияете върху визуализи-
18
координатите на контурите ва областта за язря38888 tf{Jt' sa текст чрез СТВJIОВИ правила.
8 pet~efO
mrксели спрямо рамките ва блока със съдържа Юfе.

В примера nо-долу и двата блока със съдържание

y,..u:
жат едно и също изображение, во този отдолу е ИЗJPJI31!
семеасm6а om wpuфmo6e 150
<head>
?аЗМеР на wpuфm 151
<tit lе>Иэрязване на npenълвaнe</title>

<style type="text/css"> cmuл на wpuфm 152

Bw {clip : rect{Opx 400рх SOOpx Орх)} lg86елЯВане на wpuфm 153

</style> варuанm на wpuфm 154
</head> еuсочuна на peg 155
<body>
СЬkраmено заgа6ане на c8oucm8a на wpuфm 156
~
<div><img src="smile .gif" width="ЗOO"
height="200" alt="smile"> Поgра6ня6ане на mekcm u съgьрЖанuе 157
~ Валиgни </div>
<div id=''dl"><img id="w" src="smile.gif"
Ilelcopaцuя на mekcm 158
мерни еgиници за разс­
width=''l33.33'' height="l66 . 67 '' Оmмесm6ане на mekcm 159
тояние са .ет: .in·
(инчобе) и .ст · (санти­ alt .. "smilel"> Разсmоянu е мe>kgy бyk8ume 160
метри}. </div>
Раэсmоянuе мe>kgy gyмume 161
</body>
()рuенmацuя на mekcma 162
Cmuл ..оmgясно наляВо" 163

- Г~нu u малku бyk8u 8 mekcm 164

150 HTML В леснu cmъnku ГлаВа 1 Э Доба~яне на cmuлo8e kъм mekcm 151

Ceмeiicm6a om wpuфmo6e рвзмеР на wpuфm

Стиловото свойство font-famЛy позволява ва Размерът на шрифта, който да изnолзват браузърите,
кумеВ'Га да предJiожи на браузъра избор ва шрuФr може да бъде зададен със свойството за стил font-size. Ва­
ределено семейство. По този начин nреодолявате лидните стойности са или точен р азмер в nунктове , или

вавето на пробJiем, в с.лучайче на системата :ва 001 _. относителен размер сnрямо размерите на другите използ­

б ф в
теля няма из равия от вас шри т.
мейството ще бъде избран най-nод:ходя:щ:ия mриФr,-._.
тъпен на съответната система.
В алидвите имена на семейства саserif, sans-serif,
cursive, fantasy и monospace. Свойството font-fansJJ:r
може също така да предложи списък от шрифтове по
имена, раздел ени със заnетаи. Така браузърите ще
сят ще търсят всеки от шрифтовете според реда им 8 ..._
списък. Име на семейство трябва BИ.fiarи да се nредпаrа
като последна възможност, в случай че никой от изброе;.
ните шрифтове не може да бъде намерен.
t:za,
место неrо от се. вани шрифтове . Точният размер се задава със суфикс
"pt'' (наnриме р гоJiемина 12 пункта се задава като 12pt) .
Относителни.ят размер на шрифт се задава като large1·
(по-голям) или smaller (по-малък). Той може да бъде и
продент от размера па шрифт ва оставалия текст. Нап­
ример font-size:ЗOO ще зададе размер на шрифта , три
'J'Itt. пъти по-тоJIЯМ от този ва заоби:калюция ro текст.
Следващият пример задава общ р азме р на шрифт за nа­
р агр аф и след това добавя вякои специфични правила,
демонстриращи всеки от методите, описави по -торе :

Семействата от шрифтове cursive и fantasy са по-дqа.

<head>
<title>Paзмep на шрифт</titlе>
ративни, докато другите са по-изчистени, както м~
<style type= " text/css ">
видите в този пример:
р { font - size:l4pt }
<head> ~al ( font -size : 25pt ; color :purple }
<titlе>Се.мейства от шрифтове</titlе> ~а2 ( font - size:150%; color :maroon }
</head> ~аЗ ( font-size:smaller; color : lime )
<body> <р> </style>
<span style="font - family : cursive">Cursive</span><bt> </head>
<span style= " font -family : fantasy ">Fantasy</span><ьd"'
<span style="font-family :monospace">Monospace ~ <body>
<р>Това е шрифт с размер 10 nункта , <Ьr>но

.
</span><br>
<span style="font- family : serif">Serif</span><br> l!:J Заgабайте
llllflep на шрифтоВете.
<span id="а1 ">това е шрифт с размер 25 nункта.</sраn>
<br> <span id="а2 ">Този текст е увеличен със
<span style=''font-family: sans- serif">Sans- Serif • 9J llЗбегнете препм­ 150%, </span>
Шрифт обе, </span><br> Вtе на бАоkоВете сьс <span id= "aЗ " >a този е с умален раэмер . </sраn></р>
kouтo са част от се· <span style= "font - family : impact , modern , cursi ve"> ~ние.
мейстао на kурсибни
</body>
Impact, Modern или Generic Cursive</span>
wрифтоОе, обиkнобено
</body>
сьgьрЖат рьkописни i ll< IJ!I ...... ,_..., I""' !М> •
cuмOOIIU. ~ Ф li) ;;) !!! il Р- (.. _.. е ~а· .... ~ · s оn ·-3
,t<O'"' J.oofJ 11Ф у е] <о

ф.-... о 1!) оо ~ ps-g, -t.<- е Э· ~ ~ · 1 s оа Тово ~шрвфт с p:rщq1 lO lt)'IU.т.l,

но това е шрифт с разм~р 2 5 nункта.

CuNive
fAНТAS'i I оз п текст е увешrчен със 150%,
t-tonoapaco
s.•.r
S~s-Setil
s..,_
181o8Ct.lladeniMIII l<a&rfc ~
152 HTM L В леснu cmъnku ГлаВа 13 Доt5а6яне на cmuлoBe kъм mekcm н;~

Cmuл на шрuфm еля6ан е на шрuфm

Можете да оnределяте как да изrлежда шрифт С'Ьс: Можете да зададете удебелS!Ваве на шрифта на текст, ка­
твото font-style, хато му зададете да изnолзва ор,аа_. то изпоJJзвате свойството за стил font-weight. Ако му
накловени символи. Ако аезададете ви:u.щ, CИJМ:В,OJIJilllli присвоите стойност bold, текстът ще използва стандартеа
бъдат показаяи прави по подразбиране. удебелен шрифт. Специфи'Каци:ите nозволяват също така
да заnишете и конкретни числови стойности. Обхватът на
Ако на свойството font.-style се зададе italic, те~
числата заnочва от 100 за най-тънките и се увеличава до
бъде с наклоневи символи. Стилът на шрифт obliqqe. .
също използва иаклоиеFШ символи. Ако общи.ят CТit1J
900 за най-удебеJiен:ите букви, като се изменя със СТЪ1IКТI
от 100 еди:в:ици. Дебелината аа стандартnия теJ(СТ е около
шрифта е наклонен, можете да зададете n onna) '-
~ t-styl e, за да бъде показан изnpaвea 'ltlllit.
своиството ~.on
v -
500.
Примерът по-доJtу показва върл-у различви части от текс­
Този пример демоветрира стилове на шрифтове norн
и italic: tJ та действието на числовото задаване на удебеляваието и
на стойностrа bold:
<head> <head>
<title>Cтил на wpифт</title> <titlе>Удебеляване на шрифт</titlе>
<style type= '' text/cзз '' > <style type= '' Lext/css '' >
р {background-color:silver; font-size:14pt 1 .udebelen { font-weight:bold 1
lal font-style:oЬlique; color:purple 1 :sl ( font-weight:lOO; color : aqua )
8а2 { font-зtyle : normal } is2 { font-weight : ЗOO; color :lime )
isЗ { font -weight : 500; color :green )
3р2 { font-зtyle:oЬlique; color:green )
is4 { font-weiqht:700; color : Ыue )
</style>
~ss { font-weight:900; color :Ьla ck )
</head>
р 1 font-size:25pt 1
<body> </style>
~ <р> Този лараграф изnолзва стил по nодразбиране, ио </head>

~ СтиАьт
може да бъде nриложен и <span id="al ">стил oЬlique
<body>
</span>.</p>
<р>Следва <span class=" udeЬelen ">yдeбeлeн
оЬ/iqие моЖе по еАеkт­ <р id=" р2">Тоэи лараграф изnолзва стил oЬlique, но </sраn>текст . <Ьr>
ронен начин ga генерира може да се nриложи <span id="а2">стил normal
наkАонени симОо.щ kато </span>.</p> <span id="sl">lOO</span>
наkАони обиkноОен
шрифт.
</body>
~
......
Заgабане на
<span ld="s2">300</span>
<span id=''s 3">500</span>
<span id="s4''>7 00</span>
'"ЮСт nog 500 pяgko <span id= "s5">900</span> </р>
:-ен11 начина по koo-
!Oщ.tga шрифта. </body>

u .!1 i.:::J ; >-'- w· - е S · •

.
Следва vдcбe.IICII текст. .
500 700900
1· c.....u.
 ГлаВа 1З ДобаВяне на cmuлoBe kъм mekcm 155
154 HTML В леснu cmьnku

Bapuaнm на wpuфm SLJcoчuнa на peg

Стиловото свойство font-variant може да се ИЭJ[}ОJ13Ва Стиловото свойство line-hejgbt може да оnределя разс­

извеждане на текстово съдържание с главни бУ1СВ 11 а тоявието между редовете. То може да се задава в размер

умалев размер. Когато му се nрисвои стойност 8111all- в nym,.-roвe или като nроцент от размера на текущия общ

caps, браузърът се оtmтва да nокаже текста с rлав шрифт за текста. Например, дри размер на шрифта 12pt,
1111
букви, но с nо-малък шрифт от текущия. ако зададете височина на реда 300%, ще се nолучи разс­
тояиие между редовете 36pt.
Примерът nо-долу демонстрира резултатите от задаа•..

то на стойност small-caps на font-variant: В оримера nо-долу общият размер на шрифта е 14pt, а ва

свойството line-he igbt е зададена стойност ЗОрt. В резул­
<head> тат браузърът ще добави доП'ЫI:яител:но nростравство над

[:q)н~о" Щюt
зьри моЖе вgинстОвно
<titlе>Бариант на wpифт</~itle>
<style type='' text/css">
р ( font-size:20pt 1
всеки ред от текста , форматирав сnрямо общите nравила.

Когато се изписва по-големият текст с размер ЗОрt, над

него и целия ред, ва който се намира, nponopциoRaJIRo се
ga nokaЖam mekcma с span ( font-variant : small- caps ; color:green 1
г~~аОни буkОи при приАа· добавя допълн.ител.но дространство :
гане на moOo сmиАоОо </style>
сОойстОо - kakmo св </head> <head>
Oшkgo от примеро с <titlе>Височина на peд</title>
lntвrnet Explorвr.
<body>
<р>вариант на шрифт<sраn> small caps</span> .</p> <style type~ ·· text/css '' >
</body> р { font-size:l4pt; line-height:200%
span { font-size:40pt; color:green 1

~
</style>
t... ~

~ · ..", 0 ~ ; Р- -t.('- €1 </head>

~~--~~~--~------
Ka.•moO <body>
118tcm 'flacmOam <р>Об!Щ1ят размер на шрифта за този nараграф е 14pt . <Ьr>
Варшнi'Г ш1 шрнфт SMЛI.L <:APS.
~о0е С раЗАични
IЬiври, браузьрьт ВСички редове са с височина 200%. <Ьr>
0/uсмОа бисочината на Но това е текст с размер<sраn> 40pt</span> . </p>
llfgliJeme спрямо най­
~ияот тях.
</body>

'"
OбШINIIJIJ•rq> rr• IUpllфro 11 10111 rutp•rp•ф с 14pt

Bnrmt p<;IOIIt с• с &11~0'11011 lOOto

Но 10112 t T'-"'t'l С \)l·щql 4 ор t

 ГлаВа 1Э ДобаВяне на cmuлoBe kъм mekcm 157
156 HTML В лес н u cmьnku

Сьkраmено заgа6ане на c6oucm6a на w _.".J,&А6н я6ане на mekcm u съgър>kанuе

Можете да зададете наведаъж всички свойства за Свойството за стил text-aJign се изnолзва за nодРавRЯ­
шрифт, описаии по-раво в тази rлава, като изrn0~111 ваве ва текст в блок със съдържание вляво , вдясно или в

свойството fon t . Те се задават в следвия ред: центъра. То може да се изnолзва и за подравнявавето ва

дРуr вид съдържание , като наnример изображения.
f'ont:
ч Примерът nо-долу nодравнява текста в три блока със съ­
Всяко от горните свойства може да бъде проnуснато а държание, обособени чрез <d.iv>, и nоказва цевтрираво

[1j "'""""
wрифтоОв трябОа за·
сmtсъка, но всяко, което участва, трябва да е в ~
вие с дадената nоследователност.
изображение:

·-·
gьлЖитвАно ga св изnоА­
<head>
Примерът по-долу изnолзва съкратевото задаване ~
зОа сОойстОото font- <titlе>Подравняване на 'l'eкcт</title>
зададе правила за стил на шрифт на таr, идевтиф81
faтily. 1
им~: 4 <style type=" text/css">
div { border : Spx inset Ьlue; padding : Spx;
<head> margin: 15рх;
<titlе>Съкратено задаване на свойства на шриФТ</t~ font-color:lime; background-color:yellow
<style type= '' text/css''> Jdl ( text-align : right 1
р ( font : l4pt)
И аl ( font : bold 20pt ; color :green

span.l ( font : oblique bold 25pt }

~ сщ-
11111 таг <center> 8
Jd2 ( text-align : center 1
~dЗ 1 text-align : left )

</style>
.-тен сьс с0ойст-
</style> </head>
18о за cmUAtext-a!ign

[щ "''"" б",,
</head> at:anoUнocm cent8r. <body>
<body> <div id= "dl " >Подравняването на текста е дясно . </div>
<р> Тази глава разглежда представянето <di v id="d2 " >Текстът и изображението са центрирани<Ьr>
зьри нв noggьpi<aт <br><span id="al "> на текстово СЪJlЬРжаr~Ие в НТМL <img src="little flower l . jpg"
сьkратвното заgаОане документ . </sраn>
на сОойстОа на шрифт
width="24 " height="24 " alt= "цвeтe " ></div>
<br> С noмourra на nримери се демонстрира как ao•l{ili
- по-сигурно 8 ga изпол­ nовлияете върху визуализирането на текст чрез
<div id= "dЗ " >Подравняването на текста е ляво . </div>
зВате Осяkо сОойстОо </body>
поотgвАно.
<span сlаss= " l ">стилови правила. </sраn>

</body>

--
t"' ts ...... .._... 1"" '"' "

...
--
~ .) 1!1
~~---
~ ~ r .,..."
..
11•- €) Э · ..." 13 • S О .~
-~...
~,.. 17111kl p•·•rntJ~.~tn П]lti1C1aiiJOit'f<>

11111'1ЖСТ080 t"ЪJП.('Iit\'II I IIIC В HTl\IL до~'МС 1 11', n)'.1111n~_.."

С IIOMOЩI·~ 11> npiiM"J)If СС ДOMOitCI'\)IqJВ J.")IJ( МОЖСТtД> 1101\JUUIOIC 81>1>JC)' &ll
1
,.,.e-PIP..• стилови ttpaвtma.
••
158 HTML В леснu cmъnku
1лю~ы 1" цuuы!)н н~ на cmuлoi:Se кьм rra:1кcrr1

Деkорацuя на mekcm rлесm6ане на mekcm

Стиловото свойство text-decoration добавя: paз.m111n Първият ред от всеки nараграф обикновено е отместен

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

underline (подч-ертан), line-through (задраская) 11 НТМL отместването на nървия ред от текста в блок със

overline (с черта над текста). Можете също да му ааа-. съдържание се задава със свойството за стил text-inden t.
те стойност Ьlink, за да накарате текста да nре1\1:Иrва.
..,.. Стойностrа може да е константа, наприм:ер 10 пиксела,
това не се nоддържа от всички браузъри. Мигarr.nurr J:i или процент от nmрината на блока.

може да бъде изкточително дразнещ и затова е Най:.... Този nример използва мервата единшщ за размер на

да ro избяrвате. ·• шрифт em, за да оnредели с колко да бъде отместено на­

чалото на всеки nараграф:
В този пример свойствата text-decoration създават11fаt
с хараtстеристики underline, overline и line-throUИII <head>
<titlе>Отместване на тeкcт</title>
<head>
<style type= "text/css">
<titlе>Декорация на тeкcт</title>
р { text-indent : 5em; background-color : silver }

~ Заg.йте
<style type='' text/css'' >
</style>
div { border : 5рх inset Ьlue; padding : 5px ; marg
</head>
font - color : green ; background-color : yellow }
llfXJUJmВAНa стоо- <body>
~dl { text-decoration:underline } !О'Щ ako uckaтe ga
<р>Тази глава разглежда представянето на текстово
~d2 { text-decoration :overline } 818Cmume пьрВия peg
съдържание в НТМL документ . С nомощта на примери се
•бюk сьс сьgьр>l<ание

~ •
~dЗ { text-decoration : line-t~rough } демонстрира как можете да повлияете върху

визуализирането на текст чрез стилови правила . </р>

</style>
~ Стойност­ </head> <р>Стиловото свойство
документа да предложи на браузъра избор на шрифт от
font- family nозволява на НТМL

та line-throиgh на text- <body> определено сеУ~йство . По този начин преодолявате

decoration се изnо!lзВа възникването на nроблем, в случай че на системата на
<div id= "dl " >Toзи текст е по,цчертан . </div>
Вместо стария HTML nотребителя няма избрания от вас шрифт . </р>
таг <strike> <div id= "d2 " >Haд този текст има ч:epтa . </div>
</body>
<div id=' ' dЗ ">Този текст е задраскан . </div>

~ Деkор.ц"'·
</body>
fjt (dt ..,... - ..... tJot> 11:'
а· v 0 @ JJ ·-r·-- е S · .,;.
р ...о. ... i!l · s о 11 ~
"~ lt!)C<'f<Тr-t,_.....,.,• ..,.....,.
- v ~"'
та на теkст иnderline Тюм r:.J~>s t»ntex.tt opц.t.'ТJU&t':'tl n 1~'*"'Lirt.U~o:,.li'fh!L.-<W;!мrm t;.ае-н.юr..а-••
се изnо1138а вместо ~о« ~t.llml_i!P~ х.о»:.е~ "~ nQ8.au;te.1tW.§ 81DV2J!..91§iUII:N l t ш:o~U2!iUii-'UIIW!t1I.L..-'

стария HTML таг <и>. ...,;•=~~u~:4-r:rwv,:.I)Qt· nиno.uu fi~ ;~м ~~о..:• а.:" ~~ n"<'f" Кtа
;фr<o;i'Щ"t::.МCN:Y ~~tt11t.пv_ &'МilJI KМV'I tit'CV~tm~.:uennn:ьиnvп ~"t'.J(.ft.~fl ч~ н:а
~~· •• rt.,~.;•rcлc-JWU ._,~~~-- '>1 a.at. ~~tфт

J мк scXtJ сзмрасха:ь
160 HTML В леонu omьnku 1лаВа 1 З ДобаВяне на cmuлoBe kьм mekcm 161

Раз сmоянuе мe.>kgy бyk6ume оянuе мe.>kgy gyмume

Можете да добавите доrrьJIНИТелво разсто.ян~е Можете да добавите повече място към стандартното разс­
у

всеки два злака, като използвате своиството за C'l'8a тоявие между думите в те кст, като из аоJiзв ате стиловото

le tte r-s pac ing. То nриема като стойност Д'ЫlЖifНа свойство word-spacing. То се изnолзва като 1e tte r-
•
да бъде добавена ъ.-ьм стандартното разстояице м.,._ spacing, во е възможно да не се nоддържа от всички бра­
знаковете в те кст. узъри .

Тов а може да е точно определева веJmчива, изр--. Този приме р добавя стойност "2em" 1\."Ъм разстоянието по
mrкcem1 , валример "5рх". Тя може също така да &ь..., nодразбиране между думJJте :
разева и като отвосителво разстояние спрямо PQ;Щepa8l
<head>
шрифта като се използв а едивюtата e m, ваnример ..t.,
<titlе>Разстояние между думИте</titlе>
В nримера nо-долу първият таr <span> добавя дOII"Q <s tyle type~ " te x t/csз " >
телно простравство "20рх", а вторият добавя "2em": 4 р ( font-size : lбpt ; background-co l or : silver }
<head> span ( word- з paci ng : 2em
<titlе>Раэстояние между буквите</t i tlе> </style>
</head>

[2) По-gобре е
< зt yl et ype•'' text / cs s">
р fo n t - зi ze : lбpt; background-color : silver
<body>
U з l ( letter - з paci ng : 20px ; color : green } <р>Това е текст<sраn> с доnъл нително разстояние между
дуМИте</sраn> . </р>
ga изпоАЗОате еgшшцо­ • з2 ( letter- spacing : 2em; color :pur ple }
та ет Оместо nukceщ, </ body>
</st yle>
за ga заgаgете прост·
ранстОото мeikgy бу((· </head>
Оите О теkста О звОи­ <body>
симост от размера на
<р>Добавено е 20 nиксела <sрал id="sl"> PAЗC'I'OЯII8
,_... 0 ~- • '!\ • s о t1 ·~
твkста.
</span> ~~ буквите . <Ьr>
Добавено е 2em <sрал id="s2 "> разстояние </span> . .lf
буквите . </р>

</body>
162 HTML В леснu omь nku i H8i8 11i i 8 .-t81i8i8 1t11 8 11 • Wlllili1888 lt8 tll Hf 8f68tl f

uл "оm gясно наля6о '

1

Орuенmацuя на mekcma
Можете да управлявате nосоката на изписване Ориентацията ва текста nри четене от браузърите обик­
118
в НТМL 4 с таговете <bdo> и <IЬdo> . Те npи~~~ii811; новено е отляво надясно, но можете да я nромените , като

рибут dir, който може да nриема стойност ''ltr'' за изnолзвате свойството за стил unicode-Ьidi. Когато му

дартна ориентация отляво вадяево или "rtl" за орве зададете стойност override, тя ще се определя от стой­

ция на текста отдясно валяво. Това е nолезnо за еаа Ь ностrа на своi-rството за ориентация - rtlнли ltr.

които се четат и шШJат отдясно наляво, при КОНТо е ...
и целият текстов блок да бъде ограден с тагове <pre~
<lpre>, за да се заnазят разстоявията и новите редФа.
Езиците се задават с атрибута lang, който разnозна._
специалки двубуквени кодове за всеRИ език.
Двубуквените кодове включват "en" (авrлийски), "6"
(френски), "de" (немски), "it., (италиански), "nl" (да~
Така цялото текстово съдържание започва от дясната
част еа областrа за визуализиране, което е по-удобно при
обемни текстове на езици, liЗDJ tcвaю1 отдясно валяво.
В nримера nо-долу стандартната ориеН'I'ация на текста се
променя ва "отдясно яаля:во" за цеJIИЯ втори nараграф:
<head>
,fr

Използ0а().
"es" (исnа нски), "el" (rръцки), "pt" (португалски), "81" <meta http-equiv="ContenL-Type"
(арабски), ''he" ( и:врит), "t'll" (руски), "zh" (китайски). V '/_ content="text/html ; charset~Shift JIS '' >
(.ЯПОНСJtИ) and ''hi" (хинди). • <Ьdо>, 311 ga Oмьk­ <titlе>Ориентация на текст в napaгpaф</title>
llfll8 mвkom с ориен·
<style type= " te x t/cзз " >
'Гози nример nоказ'Ва текст ва бълrарски и нeroвияiiJIIo' _. отgясно наляОо О
lfPilpaФ с mвkcm, из­ gsl { font-size:lбpt )
nод на японсJtи, изписан отдясно наляво:
ld!ан of7W/Oo нвgясно. 3s2 ( unicode-Ьidi:override; direction : rtl ;
<head>
font - family :Verdana,Arial,Helvetica,Sans-serif;
<meta http-eguiv= "Content-Type" font -size : lбpt 1
content= "text/html ; charset=Shift JIS "> </style>
<titlе>Ориентация на тeкcтa</title>
</head>
<зtyle type="text/css ''>
<body>
bdo ( font-f~ly : Verdana , Arial,Helvetica,Sanз -sertf
<р id=" sl">Здравейте от Яnония</р>
font-size:20pt 1
</зtyle> <р id="s2" lang- "ja">
</head> L.AA<="5~;tB*:Ь'S<Ip>
<body>

[~) 3s~"'"P8
</body>
<рrе>Здравейте от Ялония

<bdo d1r~ "rtl'' lang="ja" id="bdo2"> tfl t« """' ,.,.......... ["""' tJIItr
Оите този и С/\еgОащия <:lv~i:iS~~B*b'S с;ьсtо> "\3 " 1!!) l1) ~ / м<Jо ,...... е S· "' .!!! • s ою ·1 i
примери, трябОа ga </pre> ,о.~ ~C.111М..080f'-\C)WUWI\!t~11 • 08-:ltlfc-'
,.,~-~---~-~

имате инстаtшран
</body>
шрифта Arial Unicode
MS.
•........ todl ~

r) ~ ' ~ ;>s-..". 'tfr-ы е

IUЧ I"'IIVIL _, 1\\:IUHU UIII811JI.U

Гла6нu u малku бyk6u 6 mekcm на cnucьцu u mаблuцu

Можете да изnолзв ате свойството за стил te:кt-t~"~•-·
за да лромен.яте буквJtте от малки към ГЛil.В I:ltt ИJnt
н о в текстово съдържание.

С не го можете да преобразувате текст изцяло 8 ГJ11ь.
букви (като nрисвоите стойност upperc~se), ИЗI.\ЯJtоа
маJIКИ букви (стойност lowercase) или само първltь ·
ва от всяка дума в главна, като зададете capitalize.
)'JII r.1 а.ва ще ви представи още оnnии за nредставяне-
118 текста в списъци и съдържаинето на табл11ци в
fL документ. Примерите илюстрират как можете да
~11ра.влявате посредством правилата на каскадните
_.бopll ОТ С'Т11ЛОВе.

~ Този nример демоветрира и трите вида nреобразУ&а88t:

~ Вьзмоi<но в <head>
.-u:
mвkcm на езиk, koomo не <titlе>Преобразуване на тeкcт</title>
~е cmuлoBe на cnucouu 166
използВа 11аmинсkи сим­
<style type= '' text/css '' >
ОоАи, ga не се промени.
div { border : Spx outs et lime ; paddi ng : 2px ; "o3Uuuoнupaнe на moчku 6 cnucok чрез cmuл 167

mar gi n:l 5px; background-color : sil ve r } ,tэnОЛЗ6ане на uзобрюkенuе В cnucok чрез cmuл 168
"dl 1 text -transform:capitalize; color:purple ~mено заgа8ане на cmuл на cnucok 169
Hd2 1 te xt - tra nsform : uppercase; color : maroon
;ьзuuuя на заглаВuеmо на mаблuцаmа 170
Dd З 1 text -transform: lowercase; color:teal 1
)\реgемне на cmuл на рамkа 171
</style>
</head> ~ на nразнu kлemku 172

<body>
<div id.. "dl " >Bcя кa дуМа в този ред заnочва с гпавна
буква . </div>

<div id- " d2 " >Toэи Ред е Преобразуван в Главни Sylc-

ви. </div>

<div id= "dЗ " >Тоэи Ред е Преобразуван в малки 6ylc-

ви . </div>

</body>
 ГлаВа 14 CmuлoBe на cnucъцu u ma~лuцu 167
166 HTML В леснu cmъnku

Tuno6e cmuлo6e на cnucьцu 1103 uцuонuране на moчku 6 cnucьk чрез cmuл

Позкцuята ва точките на елементите в сnисък може да
Стиловете на сnисъци в НТМL могат да бъдат cnE~IIII.
бъде зададева чрез стидовото свойство list-style-
цираня и чрез свойството list-sty1e-type. То може да
редели всеки отделен елемент като RЛRой от noзнa"rrllte-., position.
вече типове
disc, circle, s quare, d ecimal, lower·rcь.­ То позволява ва точката да бъде или извън, wm вътре в
upper-roman, lower-alpha или upper-alpha. --.., блока, съдържащ списъка - съответно чрез стойвостите

Спецификаци:ите nредлаrат също и възможност да-...

outside и inside. Това свойство е оваrледево .в следниf!
пример:
дете чуждоезичен стил ва списък чрез
hebrew, geo1. . . .
armenian, k atakana, cjk-ideograpblc или hira~ <head>
В случай, че стилът на списъка ве се nоддържа, брауаъ. <titlе>Позиuиониране на сnисък чрез cтил</title>

рът ще .изnолзва no подразбиране стила ва номерираае <style type="text/css ">

decimal. ul list - style-type : square }
Ако използвате маркиране чрез латински букви, цо&ече~о
браузъри ще използват буквите от азбуката до 26-тия
елемент и след това ще продължат маркирането с Ц ВВ
~ Зsб.,еtв-
тв, че пьрОото стилоОо
~spisyk1 { liзt-зtyle-poзition : inзide; color :green }

Пsp isyk2 ( list-style-position : outside ; color : teal }

</style>
прабило заgаОа типа на
и т.н. </head>
moчkame и за gОата
rлucьka. <body>
СJiедващияr nример илюстрира обикновен списък С'ЬС
стил ва точките square: <ul id="spisykl"><li>Глaвa 1</li>
<li>Глава 2</li>

[ft}Брор~пю
<head> </ul>
<title>Cтил на cnиcък</title> <ul id~ " spisyk2 " ><1i>Пoдтoчкa 1</li>
<style type• '' text/css "> <li>Подточка 2</l i>
моЖе ga не noggьpJkaт ol { list-style- type : square; color : Ыue ; </ul>
чуЖgоезични стилобе на font -wei ght : bold }
списьци. </body>
</style>
</head>
" ' t.dt \!<" f......... IPI" 12<0 ~
<body> О · ~ ~@ ~ p s- <i~r-... е fa· • 2!1 · SOI1-3
<ol> '-Р""~~....м.- .. -..... ~ ~ ...

<li>Глава 1</li> • г~)П 1

• Гuм l.
<li>Глава 2</li>
• Th>•~oчu l
• D o.uc"'XA ~
</ol>
</body>

\'IOOo ........ ,[pOh uоЬ

.; [!') ~ ) Р""' -t.t•- е ~- ~ ш · J s ос

168 HTM L l:i леснu cmьnku
ГлаВа 14 CmuлoBe на cnucьцu u maf>лuцu i 89
~-------------~~~~~~~~~~~~~~
ИзnолзВане на uзобра>kенuе 6 cnucьk ч сьkраmено заgа6ане на cmuл на cnucъk
cmuл
Всички стилове в един списък могат да бъдат зададени
Можете да създадете nо-разчуnени сnисъци, като 38 ,ст 1 заедно, като изnолзвате свойството list-style и оnредели­
тите стандартните то<Щи с друто изображен ие за вее.. .,. те едновременно тиnа на сnнсъка, nозицията ва точките
деJiен еJtемеит. Местоnоложението на изображението и изображението, което да ги замества.
трябва да бъде сnецифицирано чрез свойството list.stм..
Следващият nример изnолзва този метод, за да сnецифи­
i.Jnage. Трябва да ro присвоите, като ro nоставите м-.
цира свойствата на два списъка, единия от които е вло­
обикновени скоби след сnециаJtНата дума url. жен в другия :

Адресът може да бъде както абсолютен (на пример <head>

http://domainlizobrajenie .jpg), така и относителеа
(izobraj enie.jpg). Ако изображението ве може да &ь...
открято от браузъра, той ще изnолзва точки в стил
decimal.
В следващия nример видът на точките е оnределев •
<titlе>Съкратено задаване на стил на cnиcък</title>
<style type="text/css">
В vynshen ( lis t-style: inside url ( "little flower. jpg" J 1
Dv~ojen ( list-style :outside url( ''!ittle flower
ll8D 1 . JP9" J 1

~з,..,._..
с набор от стиJtове, като сме избраJш да бъде изобра.е­ <lstyle>
вие:
</head>
<body>
<head> 1118. '18 ako изобраЖени­
<titlе>Изображение в слисък</titlе>
<ul ld• ''vynshen'' >
lfiЮнемоЖв ga бьgв
~но. списьkьт ще <li>Глава 1</li> <li>Глава 2</li>
~
<style type="text/css ''>
it}e поkвзан с типа на </ul>
ol . spisyk t list-style-ima9e :url( "little (lower l.Jpq•) .Мите. kоито ств
Ш Помнвтеgа </style> ~и. ши с типа
•I!OflJ<'JJбиpaнe на
<ul id• "vlojen">
<li>Подточка 1</li> <li>Подточка 2</li>
поствОите agpeca О </head>
kаОичkи
~.вkоне ств <lul>
<body> ~и.
</body>
<ol class='' spisyk">
<li>Глава 1</li>

<li>Глава 2</li>

</ol>
</body>

• '• ' ~·"' ..,...,

..', ./' поо • •• ~ ~ •
н ........ "iJ
170 HTML В леснu cmъnku ГлаВа 14 CmuлoBe на cnucъцu u mаблuцu 17 1

Позu цuя на загла6uеmо на mаблuцаmа реg еля не на cmuл на ра м kа

Позицията на заглавието на таблицата спрямо CaJ_,~ В една таблида могат да се зададат индивидуални стило­
таблица може да бъде определено чрез стиловото ве на рамк ата за всяка отдеJIНа клетка, ред или .колона,

во caption-side. То може да приеме сто~ости top (OltQ. отново със свойството border.
ре), bottom (отдолу), 1eft (отляво) или nght (отдясllо).
Тов а може да изглежда доста хаотично, но ако зададете
В следващия nример това свойство опредеШ~ заrnав._ на стиловото свойство border-collapse стойност collapse,
да бъде отляво на таблицата. То е с размери 100 х 50 IIJia.. ще бъде показана само най-отличаващата се рамка.
села, с дясно nоле - 20 nикседа и е центрирано CIIJ»>I,ro
Следващият пример специфицир а обща ВЪЮlШа рамка с
J,IЯВата страва на таблицата:
цвят maroon, сини рамки на всички клетки и спецпалви
<head> настройки с амо за клетки А и Е :
<titlе>Позиция на заглавието</titlе>
<s t yle type="text/css"> <head>
caption { caption-side : left; margin- right : 20px; <title>Cтил на paмкa</title>
widt h: lOOpx; height : SO ; vertical-align :middle; <style type=" text/css ">
color : Ьlue ; background-color :aqua ; font -weight : Ьold 1
taЬle { border-collapse : collapse ; border : lOpx outset
td { text-align : center ; width : ЗOpx; height : ЗOpx }
maroon }
</style>
</head> td { border:2px solid Ьlue ; padding : Зem }
<body> t d . A { border : Spx solid teal }
<taЬle cellspacing="lO " border="2"> td . B { border : Spx dotted lime }
<сарtiоn>Заглавие на таблицата</сарtiоn> </style>
<tr> <td>A</td> <td>B</td> <td>B</td> </tr>
</head>
<tr> <td>Г</td> <td>Д</td> <td>E</td> </tr>
<body>

~ евооство
</taЬle>
</body> <taЬl e>

tt) Стш~"'
<tr> <td class="A">A</td> <td>B</td> <td>B</td> </tr>
то vertica/-aligп моЖе
ga <tr> <td>Д</td> <td>Г</td><td class="B">E</td> </tr>
приема стойности top </taЬle>
(отгоре}, тidd/e (по tlwнama рамkа има </body>
среgата} и11и bottoт ~тет наg cтиll o­
(oтgot.y}. lline бьтре а табш :1 Ctw.1 tl!l ~ми · #.НCf(i'SOfllnl~tnct [xp!otct 1- 1.'5\(Xl
8l!a !;!о tdt .,.,... ......... loals 6ol> в.-

Ом е> 0 1!1 ~ р ..- tl- е ~- ~ 8 . so~

Браузърите, които не nоддържат това свойство, най-:

"'Jo .... JИZ ....... -,.~ - -3 у' ~с;,
~

ще nокажат заглавието над таблицата по слеДНИЯ на

А :s в

.......... .
. .-
д r Е

Гл 'Б [ii 11) ..... . .jнtc-..r

у

Гд !Е -
172 HTML В лес нu cmъnku на фон.
P a мku на nразнu kлemku
Рамки на кл етки в таблица, които нямат юmа.кв0 ~
жание, могат да бъдат скрити чрез задаване на ето~
:..3'' глава ще ви демоветрира как можете да използва-
blde ва стиловото свойство empty-cell.
tе-'<1rнк нте ва н аборите от стилове, за да определите
Забележете, че дори и след като ro ваnравате, Фоtrьт lla ~ 110 не съдържанието в НТМL документ. По-nодробmt
празвите клетки ще остане видим. ~~ 1 ep•i ще ви илюстрират избор на курсор, nромяна и
,томзтич но вмъкване на съдържание.
СJ1едващият nример скр.ива рамките на всtNките ~
клетки. Освен това , за да бъде клетка А напъл но нев..,_.
ма и да се слее с останалия фов, зададохме цвят sUver _.u:
нейвия фон (на свойството background -c olor). ..
~на фон 174
<head>
jJII08o uзобра.Женuе 175
<titlе>Празни клетки</titlе>

<зtyle type " tехt/сзз'' > "о6mоренuя 6'08 фона 176

body { background-color :silver ·озuцuя 6ь6 фона 177
taЬle { text-align :bottorn 1
)Jkcupaнe на фоноВото uзобра.Женuе 178
td { border : red 5рх inset; background-color : Leal ;
color :white } ~аmено заgа6а не на c8oucm6a на фон 179
Hkletkaд { background-color :silver 1
~uмocm 180
</style>
I/DCOpu 181
</head>

[1:) Дo[W•ga
<Ьоdу> .&mo8e на xunep8pьзku 182
<taЬle width• "200px" cellspacing="7"> ~umелно соgър.Жанuе 183
<tr> <td id., "kletkaA"></td> <td>Б</td> <td>B</td> </tt>
имаше заgаgен фон за ik.I.Ьчeнue 184
ЦЯАата таб11ица, тя nak <tr> <td>Г</td> <td> </td> <td>E</td> </tr>
щеше ga изZAei<ga по </taЬle>
сьщия начин.
</body>

--
---
174 HTML 8 леснu

Ц6яm на фон фоноВо uзобра>kенuе

Цветът ва фона на елементите в НТМL може да &ь,q. Фонът на елемент в HTML може да включва и изображе­
цифидиран чрез свойство на стила на фона. Цве"r11; ние, като се изnолзва стиловото свойство background-
спе
на текста е
··ерев
.., no nодразбиране, во може да бъде~ ilnage. То указва местоnоложеннето ва изображението ка­
менеи за всеки отде
леи елемент чрез стилово свойс:тво -
- то абеототен ИJII'I относителен адрес и се nоставя межцу
цвят. скоби, предшествано от сnециалната дума url. Трябва да
специфицирате и цвят за фона, който да се показва nод
Следващият пр имер итострира как могат да бъдат ОПре.
делени цветовете на фона и ва фоновете ва Раааа... изображеm1ето. Той ще бъде показан в случай че изобра­
жението ве е налично и ще можете да го видите във
елемевти:
всичките му прозрачни области.
<head>
<titlе>Цветове на фoнoвe</title>
Браузърите в ПО'Вечето случаи ще "размножат" изобра­
жевието, като ro nо'Втарят хоризонтално и вертикално до
<style type= "text/css '' >
края на областта на фона на елемента.
body { background-color : yellow }
. ~ ,· color :Ьl ack
hЗ { background- co1or ·l·me Следващият пример nоказва как едво изображение се
р { bac kgro und -co lor :Ьl ue ; color :white повтаря във фона на целия документ, а останалото nрос­
транство между ловтореmr.ята се заnълва с б.ял цвят.
</style>
~ </head> <head>
~ Moi<egace <body> <t i tlе>Иэображение за фoн</title>
okai<e полезно ga заgа· <hЗ>Глава 1</hЗ> <style type= "text/css ">
gетв на цбета на фона <р>Представяие на НТМL</р> body (background-color :white ; text - align : center;
стойност traпspareпt
<h З>Глава 2</hЗ> background- image : url( '' flower . jpg" ) }
(прозрачен}.
<р>Секция Head</p> »Z{JJigailтв agpeca на
р (font - si ze : 40pt ; font-weight :bold }
QОбраЖението с kабич·
</body> </style>
</head>
,.....,~ :.• t;O <body>
~~ ~ ;) р- Jr?· -.. е ~ · <р>ЭЩРАВЕйтЕ!</р>
</body>
1 7~ I-ITML ~ леонu omьnku 1 ла13а ,5 Umuлol3e на фон 1 11

По6mоренuя 6ь6 фона ~ 0 зuцuя 6ь6 фона

Начинът н а nовтаряне на изображението във Ф0118 . . Позицията на изображе нието във фона може да бъде оп­
елемент може да бъде настроено чрез стиловото своtа... ределена чрез стилово своиство, като зададете мястото на

back ground-repeat. Ахо е сnецифицирана стойноеr горвия to1)' ляв 'ЪГ'ЬЛ cnpЛJ\.10 ръбовете на блока със съдър­
11
repeat-x, то ще бъде повтаряво само на един ред, хар.. жание, в коИто се намнра. Стонностите могат да бъдат за­
зонтално . Ако е зададе ва стойност за repeat-y, ще &.._ писа.в:и в nиксели. в проценти нлн с JUiючовите дУ?>Ш top
повтаряно са мо в една вертикална ли:вия. (отторе), b ottom (отдолу), left (отляво), right (отдясно) и

И в двата случая поредвостта от nовторения запоЧВа е

center ( центрпрано). Ключовите думн не могат да се из­
ползват заедно със стойностн в nи'Ксе;m юш uроцевтп.
горния ляв ъгъл ва изображението от rорния ляв 'Ь1'1а11
81
об11астта на елемента, на която принадлежи фона (xaQ Ахо е специфицирана само една стойност, тя ще бъде от­
1

у=О). весена към хоризоJпаЛJiата позшщя на фоновото изоб­

Този nример създава два блока със съдържание чрез ражеmiе. Ако са зададеиJ1 две стойности , nървата ще бъде

<div> и юнострира хоризонталао и вертикално повторе.

хоризовталиата позJщия, а втората - вертикалната.

ffi ни е н а изобр аже нието: Следващият nример демонстр и ра изnолзването в а кJIЮ­

чови думи и nроценти за задаване на позициите на фо­
Ш Тозипримвр <head>
<t itlе> Пов~орения във фoнa</title>
новите изображения:
поВтарл с11вgното
изобраЖение: <head>

~ Мо.и~
<зtyle type= '' text/cзs '' >

11 body ( text-align :center; color :green; font-weight:Ьold 1

div ( poз itio n:absolute; top : Spx; width:200px;
<titlе>Позиuия на фонови иэображения</titlе>
<style type= "text/css">
height:lOOpx; background-image:url("little flower .jp<J•: ~.е ЬlJчоОата gума
div ( position : abзolute; top:Spx; width:lOOpx;
;scar' са•АостоятеltНо, height : 60px;
background-color : aqua }
~е центрира изoб­ background-image :url ' "little Пower l . jpg" ;
ldl ( background-repeat : repeac-x; left:ЗOpx } ;lislltJemo и О хори­ background-color:aqua; color: ~roon 1
ld2 ( background-repeat: repeat-y; left:250px 1 ~а. и ОьО Oepтu­
~dl { background-position:center;
CWS nocoka
</style> background-repeat:no-repeat; left : 20px }
</head> :d2 ( background-position : 100 50 ,
<body> background-repeat:no-repeat; 1eft : 250px }

~
1'")Пшоош~.
<div id=''dl " ><Ьr>Повторение по хоризонталата</div> </style>
<div id "d2 " ><Ьr>Повторение оо вертикалата</div> </head>
~ Аkонеис­ </body>
<body>
kате изобраЖението ga ~~на чрез .100% <div id= "dl">Цeнтpиpaнe</div>
бьgе поВтаряно, изпо/13· ~ r.roЖe ga се зagage <div id="d2 ">Позиция 100 50%</div>
Оайте пo-repeat. %о .свпtеr rigl1t·. </body>

••••••••••• 1
}f~ltfl l$1f') IJI " t iO
\U)Itno•r-r .. :rt~-т •
n....fO)If'IWf SSU
····~')t.JJ;th

------------~--~~
11 ••"' IUO
 11\I.IUI.I 1 V UII IUIIUUU llta '!'U II
17В HTML В леснu cmъnk u

Фukcupaнe на фоно6оmо uзобра>kенu е кратено заgа6ане на c6oucm6a на фон

Всички своltствn на фона могат да бъдат зададени заедно ,
По 11рнициn фоновите изображения се nревъртат за
документа, но можете да rи фиксирате, като нзnOJt .__, като използвате стиJtовото своitство b ackg:round със
стиJtово свойство, наречено background-attacbrnзв._ следн:пя сnнтахсис:

то му зададете стойност fi."'Ced, ще заnазите оозищ,:t. Jte. Ьackground: ЦВ11Т ~r~1e noazq::sa.te DО!Зl!ЩНЯ фо:uа::=раве ;

нзображеинето (зададена чрез background-image) 111 Можете да специфшщрnте някон пл.и всичките изброени
яяна, докато останалата част от дОJ\.1'Мента се ореео~ nараметри в какъвто 11 да е ред. Валидm1 стойности за

~ Следващият нрlfме р nоказва хоризонтално nоето

рево
backg:round-color, b ackg:round-image , background-
repeat, b ackground-pos ition 11 background-attachment
~ Фиkсиране·
нзображен ие, nоставено ва определено фикснрано Раэс.
тояние от горната част на прозореца. са тези, които бяха изброеюt на предишните стра н но и.
то 8 пDIIeЗHO, kогатО
В следващия прнмер фонът на елемента, зададен с
исkате ga сте сигурни, <head>
че .-.оготата ОьО фона <div>, повтаря определено изображени е в централвата
<titlе>Фиксиране на фоново изобр~~ние</titlе>
са Оинаги Оиgими част на блока със съдържан11е:
<slyle type• '' text/css '' >
body ( background-attachment : fi xed ; text -align :center; <head>
<titlе>Съкратено задаване на свойства на фoн</title>
background-position : O% 50% ;
background-repeat : repeat-x ; <style type= '' text/css '' >
background-image : url( "little flower l.jpg" ) 1 body l text-align :cenLer ; fonL : 20pt maroon }
di v l 1•idth : 70~ ; height : 200рх; border : Зрх inset green )

[1:) дokamo
</style>
</head> !dl { background:l"hite url( " flower.jpg"l center
<body> repeat-x f 1xed }

~с
обиkноОеното сьgьрЖа­ </style>
Следвашият nример<Ьr><Ьr> nоказва<Ьr><Ьr>хсризонтатю
ние моЖе ga бьgе пре­ повторено изооражение , <Ьr><Ьr> поставено на оnред~ </head>
Оьртано, фиkсираното разстояние <Ьr><Ьr>от горната част на лрозореца .
остаба на постоянна
</body>
•••..,.. <body>
позиция ~ s размера на <div id="dl">ЗДPAБEЙТE</div>
-РJ:тоОвте. за ga
</body>
!Лlpai;Upaтs НВп'ЬIIНО
~rm О б~оkоВете
- ... е ~сьgьр;kание ,,_,. 1D* t:*l

:. > -,. ,_... Е) . ~

!Jwif ~

u
..,...
v l!tl @ ;, ;J,...." .."?........ е е - .., ·
~
180 HTML В леснu cmъnku 1 ЛаВа 1~ L-IIIUJ\U\S\:1 НЬI ЦJUH ..,
Buguмocm
:Можете да скриете блоковете със съдържание, като~ Тиnът на курсора, който ще бъде показвав над всеки
дете на стиловото свойство vis ibility сто~ост Ьidde!Jl, • елемент, може да бъде оnределе:в със стиловото свойство
или да ги nокажете, като му зададете СТОИ1Jост visiЬt
е.
cursor.
Това е особено nолезво nр'И използване на скр.и.nтоD~
...,,за Най-често срещаните стойности на курсора са:
да настроите промяна на видимостта като отговор на

действие на nотребитеJJЯ.
• + crosshait· - курсор за селекция
Следващият nример с·ьздава два блока със съдържаs:u
едва и съща nозJщия ( еДiiакви стоИ.J:Iости по х п
v
y-ocli're)
ес • ~ default - курсор по подразбиране
но с paзJ1.JifЧ1'1a стойност на индекса z. '
• ~? help - индикатор за ва;mчна nомощ
Горният сло:й nървоначаJIНо е скрит, во може да бъде Вll­
дяв:, ако потребителят лостави курсора над третия блок
~ • + move - преместване ва селектирания обект
със съдържание:
~ Браузьрьт • tJ pointer - за индикация ва .връзка
<head> ..s опрвgд!lи kak точно
<title>Bидимoc~</title> ..9 uw,elkga Всеkи тип
• с:> тesize - индикатор за р амка на nрозорец и възмож·

<style type• '' text/css '' > rtfJCOP· ност за промяна на размера му

#dl , Иd2 , UdЗ ( position :absolute ; top :20px; left : 20px;

width : 200px } • I text - курсор за селекция на текст
#d2 z-index:lO; visibility : hidden ;
background- color :purple ; color :yellow J • 6) url - специфициране ва адреса ва курсор с отдале-
чено местоположение
JtdЗ { top : 40px }
</style>
</head> • ~ wait- индикатор за заета програма
<bcdy>

~
Курсорът за промяна ва размера ва прозорец представ­
<di v id- "dl ">Функцията е из.к:.лючена</di v>
Обьрнете
<div id= "d2' '>Функцията е ВЮ1Ючена</div> лява стрелка, насочена в някаква посока и в зависимост

Внимание kak вgин набор <div id= "d З " от това можете да ro зададете като n-resize, s-resize,
от сти11о8е моЖе gв onmouseover="d2 . style . visibility= ' visiЬle '"
w-resize, e-t·esize, ne-resize, nw-resize, se-resize или
при11о>l<и пра8и11ата си orunouseout= " d2 . style . visibility= ' hidden '" >Пocтaвeтe
sw-resize.
Вьрху няko!lko тага еg­ курсора тук , за да включите функцията</div>
ноВрвмвнно. </body> Можете да изберете и. nотребителски курсор, като сnеци­

) е.д--оn . Ше'"'~• ь.,., ... t,,.....

. · - ·' фицирате местоnоложението му със специалната дума
в. tot: ~ ",..," 1 ,(1/11 ".. url:, ваприм:ер:
~- 0 § ~ ,J- '1.':(,._ е ! :- ::. ~ . s0 1:1 -~
- lj!jc.\1<~·-·"' cursor : url( "http : //domain/papka/
Фу~ита с ar:u.>~c•• potreЬitelзki kursor . cur " ) ;
Iroctac:rc *')'P<OP'.tl 1"ffi', )А Al
~ мте 4YtUWitirl~t

Адресът се задава като абсолютен или относителен и се

nоставя nоследователно между -кавички и скоби, пред­
шествав от url:.

~с J'Э'PC"q>& fJ'O. я аа
881:1»'\IUC ~•ета ~
 ГлаВа 15 CmuлoBe на фон 183

Ц6еmо6е на xunep6pъзku доnълнumелно съgър.>kанuе

Тагът <а> има .,nсевдо-класове", изброе ни в cnиcъtta no. Наборнте от стилове могат автоматично да добавят съ­
долу, ко ито са п олезни , ако искате да наложите onpeдeJJea държание към елемент в НТМL, като използват слеД1n1те
в 1sд на съдържаннето 1 1М. ,.псевдо-елеме:.нт11":

• :link - състоянието no nодразбира не за не nосетени :!Qr. • :befot·e - отвас.я се за мястото, неnосредствено nредп
пе рвр'ЪЗК Н съдържаюrето на елемента

• :ho,rer - хппервр'ЪЗка с курсор върху нея • :after - отнас.я се за мястото, непосредствено след съ­
:active- хаnервр'ЪЗка, щраквата от потребителя държанието в а елеме нт
•
• :visited - състоянието по nодразбиран е за nасетени Xll· • :first-letter - отнася се за първата буква от елемент
зададен с <р>
•
nервръзки

• :first-line- отнася се за nървия ред от елемент, зада­

Можете чрез набор от стилове да оnределите стойности ва
ден с <р>
свойствата за всеки nсевдо-клас, за да и ндикирате състо­

янието му за nотребителя. Следващият nример задава Следващият пример използва nсевдо-елементи, за да до­
ц'ВЯТ 11шрифт за всяко състояние . бави две точки (:) след всяко заглавие <h2>, за да очертае
<head> nърватn буква от все J( И па рагр аф и за да ro завърши с
,,Край.":
<titlе> Цветове на връзки</titlе>

< з tyle type="text/css'' > <head>

а ( fon t -size :20pt } <titlе>Доnълнително съдържание</titlе>
~ a : link { color :purple ; font- style : normal <style type="text/css''>
~ Приgьр­ a :hover { color : Ыue ; fonc-weight :bold } р { font-family : curзive 1

Жаотв св kьм вgин a:active { color :aqua ; font - weight : italic
шрифт за Ocuчku със­
a :visited { color:maroon ; font-style : bold 1
тояния, за ga избвzнвтв
.поgсkачанвто· на сь­
gьрЖанивто на хипер­
Орьзkите при смяна на
шрифт.
h2 : after { content : " : "; color :maroon
p : first-letter { font-s1ze:larqer; color :qreen }
</зtyle> Р : after { conterн::" .Край. " ; color : ceal }
~
</head> </scyle>
<body> <р> <а href= " l . html " >Вpьзк.a 1</а>
<а href= " 2 . html " >В?ь.зк.a 2</а>
,..!lJ ВьзмоЖноgaе
~gо.влвментите
</head>
<body>
<а href= " З . html " >В?ьЗJ<a 3</а > </р> "Э бьgат напълно раз­ <h2>И накрая</h2>
'Сзнати от няkои брау­
</body> ~и <р>Надяваме се тази !<НИга да е била nапезна за вас . </р>
</body>
\ ) ~n1ol'l•••r• JtJIIO f:"Л1of'l•o\.Ui... • Weпlt.. l11t1f&1o gQ~

~ ..... ~ - - llo' ·~
l:,~ . . ~ О ~~ lu '" III<'Jtfl"'""----,=-==---~~~ с ,,. [rc:_,----1, 1
Q cw~t:ro~t ,, ... ~ [) ~~. О ~..... ....". ~ .~

11 Ш! 1< J>!lfl :
i 1!4 Н 1ML ~ леонu cmъnku

Заkлlоченuе
НадАВаме се тази кни:rа да е биnла полезна за вас нри
нnвлизапето в НТМL и каскадниrе набори от ст нлове
• Ида
ви е помогнма да създадете мноrо и наи-развообразни
визуални ефекти.

Във връзка с очаквавите бъдещи устройства с браузър

v 6 11,
вече съществуват и своиства на на орите от стилове ..А
• ....,q.
тролнращи възnриемавето на звуково съдържащrе . Те са

изброени в следващата таблица:

Тиn на свойството Имена на свойството

Vo\ume (контрол на звука) volume
Pause (nауза) pause, pause-before. pause-after
Cue (реплика) cue, cue-before, cue-after
Mixing (смесване по време play-duriпg
на възпроизвеждане)
Spatlal (пространственост) azimuth, elevation
Voice (глас) voice, voice-family, speech,
speech-rate, pltch, pitch-range,
stress, richness
Speak (rовор) speak, speak-header,
speak-proпuпciatioп, speak-пumeral

По-дългосрочните планове за развитието на Интернет фо­

кусират все-повече върху ExtensiЬle Hypertext Markup
Language (ХНТМL) - разширяемия език за маркиране ва
хиnертекст.

Той е подобен на стри:ь.-тната версия на HTML, во добавя

възможност да създавате вапm собствени тагове и пред­
лага и други инструменти, особево подходящи за работа с
данни.

Информация за най-вовите разработки в НТМL и

ХНТМL можете да откриете ва уеб сайта на WЗС
http://'vVWW. wЗc.org.
И все naic, милионите НТМL документи, които съществу·
ват към настоящия момент, гарантират, че развитието на
по-новите специфихащm ва езика ще следват nостепеияо
и градиращо.

Всичко това означава, че уеб документите, които ще съз·

дадете със стр'ИКТIШЯ стандарт на НТМL, оrшсан в тази
кЮП'а, ще бъдат валидни и използвани nоне в oбoзptl?dO'fO
бъдеще -така че, успешна работа!
 В /\еени cmьnku

МоЖе бu Bue
• сте nрофесионалист, kouтo исkа
бързо ga nостигне резултати?
Изkл/очително лесна
• сте стуgент с ограничени финансоВи за четене благоgарение
ВъзмоЖности? на Визуа11но

• сте gомашен nотребител, нуЖ:gаещ преgстаВените

се от nросто учебно nомагало? резу11тати и на

постъпkоВия прег11еg
• сте чоВеk на сВобоgна npakтиka,
на поВечето осноВни
kouтo няма Време ga хоgи на kypcoBe?
фунkции.
• търсите за сВоя nерсонал onpaBgaнo
от финансоВа глеgна точkа обучение?

• uзгаряте от Желание ga npaBuтe nоВече неща на сВоя kомnlотър?

Ako сте отгоВорuлu с ДА на няkоu от горните Въnроси, тази kнига е за Вас .

ИзnолзВаите я, за ga наВлезете В HTML бързо и лесно .

В леснu cmьnku е еgна от наu-търсените сериu от kомnlотърни kнuгu.

ИзnолзВали сме ясен u kонkретен стuл на обясненията, kато материалът е
разработен В лесни стъnkи
- тоВа е Bcuчko, от kоето имате нуЖgа! Нашият
стремеЖ е ga сnестuм Bawemo Време, kато Bu гарантuраме, че ще Bu
gageм наu - gобрuте ВъзмоЖнu знания .

ИзnолзВаuте тазu kнuга, за ga nолучите безценнu знанuя без ниkаkВа чy>l<ga nомощ.

ТоВа, kоето от11ичаВа тази kнига от gругите пътеВоgите11и В уеб

пространстВото, е, че не изпо11зВа често неgостъпния и ограничен само go
тесен kръг потребите11и сти11, типичен за поВечето от тях.

HTML . в лесни cmьnku nреВьзхоЖgа gpyгume kнuгu

на сьщаmа mема чрез сВояmа gocmьnнocm u се nреnоръчВа на Bceku,
koumo mьpcu koнkpemнu знанuя, а не uзлuwна многослоВносm.

Книгите В лесни стьпkи ценят Вашето Време

Цен а: 6 лВ .