1.

HTML

• Веб-страница • CSS
• Статичка веб-страница • Екстензија
• Динамичка веб-страница • Таг
• HTML • Елементи на HTML
• HTM- уредувач • Атрибути
• Скриптирање на клиентска страна • Стилови
• Скриптирање на серверска страна
 4.1  Веб-страница
Во оваа лекција ќе се запознаеш со:
• поимот за веб-страница;
• структура, типови и елементи на веб-страниците;
• скриптирање на опслужувачка и на клиентска страна;
• поим за CSS.

4.1.1 Поим за веб-страница
Стотици милиони корисници на компјутерите секојдневно посетуваат
различни веб-страници. За да се отвори некоја веб-страница, доволно е во интернет
прелистувачот да се напише нејзината URL-адреса. Почесто до веб-страници се
доаѓа преку веб-пребарувачите во потрага по некоја информација. Пребарувачот
прикажува листа со веб-страници кои ги содржат бараните зборови. Денес има
близу сто милиони активни јавни веб-локации кои се постојано на интернет. Секоја
од овие локации има повеќе веб-страници со информации.

Потсети се:
WWW или скратено Веб (Web) е еден од интернет-сервисите кои се користи за
прикажување на веб-страници преку HTTP-протоколот.
Веб (Web) е колекција од голем број веб-локации (web site) зачувани на
милиони компјутери поврзани на интернет. Секоја веб-локација се состои од една
или повеќе веб-страници (web page) кои најчесто се зачувани на ист сервер и
меѓусебно се поврзани преку хиперврски. Домашна или насловна страница (Home
page) е почетната страница на веб-локацијата која дава информации за содржината
на локацијата и овозможува поминување на други веб-страници во локацијата.
Веб-сервер (Web server) е компјутер кој е поврзан на интернет и има соодветен
софтвер за испорака на содржините на веб-страниците.
Секоја веб-страница може да содржи хиперврски до други страници кои можат
да бидат зачувани на ист или на друг компјутер. Со кликнување на хиперврска,
корисникот поминува на друга веб-страница. Ваков концепт на страници кои
содржат врски до други страници се нарекува хипертекст. Значи, веб-страница е
HTML-документ кој овозможува прикажување на текст и хиперврски (hyperlinks). На
веб-страница, освен текстот и хиперврските, можат да се прикажат мултимедиски
елементи како што се сликите, анимациите, звукот и сл.

Потсети се:
Хипертекст е колекција од страници документи поврзани со хиперврски
(линкови) кои се вметнати во страниците. За разлика од обичниот текст кој се
чита линеарно, хипертекстот се чита со следење на хиперврска.
Прелистувачот мора да го препознае и разбере форматот на веб-страницата за
да може да ја прикаже нејзината содржина. За да се овозможи сите пребарувачи да
HTML

ги препознаваат сите страници, веб-страниците се пишуваат во стандарден јазик кој

се нарекува HTML.
Повеќето веб-локации не содржат само HTML-страници. Тие можат да содржат,
на пр. документи во PDF-формат, слики, музика, видеозаписи и уште многу содржини

170
во различни формати. Прелистувачот мора да биде во состојба да ги препознаеи
правилно да ги интерпретира сите овие формати.
Посложените веб-локации содржат бази со податоци и скрипти. Тие користат
веб-апликации напишани на соодветен програмски јазик (PHP, ASP, JSP...) или на
некој скриптен јазик (JavaScript или VBScript).

Забелешка:
Често изразот веб-страница се користи за двата поима: веб-страница (web page)
и веб-локација (web site).

4.1.2 Структура на веб-страници
Сите веб-страници се организирани околу домашната веб-страница која
функционира како влез на веб-локацијата.
Структурата на веб-страниците одредува распоред и начин на поврзување на
страниците во локацијата. Притоа, страниците можат да бидат зачувани на различни
сервери. Структурата на поврзаните веб-страници може да биде едноставна, но и
многу сложена. Тоа, главно, зависи од намената на веб-локацијата и од содржината
на веб-страниците. Веб-страниците можат да бидат организирани на два главни
начини и нивните варијанти: линеарно и хиерархиски.
Кај линеарната организација страниците се посетуваат една по друга со
секвенцијален редослед. Од една страница може да се премине на следната или на
претходната страница.

Сл. 4. 1. Линеарна структура на веб-страниците

Кај хиерархиската организација се поаѓа од почетната страница која се наоѓа

на врвот и од неа се преминува на страниците кои се на пониско ниво. Од секое ниво
може да се помине само на пониско ниво.

Сл. 4. 1. Хиерархиска структура на веб-страниците

Најчестата форма на организација е мешовитата хиерархиска структура која

во основа има хиерархиска структура само што е можно преминување од секоја
страница на која било друга страница.
HTML

Сл. 4. 2. Мешовита хиерархиска структура на веб-страниците

171
 4.1.3 Типови на веб-страници
Веб-страниците можат да се поделат според неколку критериуми. Според
намената веб-локациите можат да бидат: лични, комерцијални, информативни, за
забава, блогови, форуми, социјални мрежи итн. Според технологија на изработка тие
можат да бидат: HTML, XHTML, Flash итн. Најзначајната поделба на веб-страниците
е според интерактивноста со посетителите. Според оваа поделба, веб-страниците
можат да бидат статички и динамички.
Статички веб-страници
Статичките веб-страници содржат HTML-код кој овозможува текстот и
мултимедијалните содржини на страницата да се прикажат на одреден начин. Тие
можат да имаат анимации, но немаат интеракција со посетителот – посетителот
може само да ја прегледа нивната содржина. Содржината на ваквите веб-страници
е непроменлива, т.е. на сите посетители им се испорачуваат исти страници кои
ги подготвиле авторите. HTML-кодот е напишан пред страницата да се постави на
сервер и секоја промена во содржината мора да се направи рачно.
Статичките веб-страници се наоѓаат на веб-сервер, а посетителите им
пристапуваат преку нивниот прелистувач. Откако ќе го прими HTML-документот,
прелистувачот ќе утврди кои уште датотеки му недостасуваат, ќе ги побара тие
датотеки и содржината ќе ја испорача на посетителот. Така, на пр., се прикажуваат
слики на веб-страниците.

Сл. 4. 3. Испорачување на статичка веб-страница

1. Авторот креира веб-страница која се состои од HTML-код и ја поставува на веб-сервер.
2. Корисникот побарува да види веб-страница (со кликнување на линк или пишување на URL-
адреса). Барањето се проследува од клиентот (прелистувачот) до серверот.
3. Веб-серверот ја пронаоѓа страницата.
4. Веб-серверот ја праќа страницата до прелистувачот.
5. Прелистувачот го обработува добиениот HTML-код и прикажува форматирана страница
со сите елементи (слики, линкови, табели...).

Статичките веб-страници се користат за правење на прирачници, опишување

на работата на некоја организација со цел за рекламирање итн. Тие можат да се
изработат и со посебни програми кои наликуваат на програмите за уредување на
текст (WYSIWYG-едитори – what you see is what you get), па голем број корисници
лесно можат да ги направат. Меѓутоа, проблемот настанува кога често треба да се
менуваат содржините на веб-страниците или кога на една веб-локација работат
повеќе автори.
HTML

Статичките веб-страници имаат URL адреси како на пр.:

http://www.pagetutor.com/html_tutor/index.html.
Кај статичките веб-страници домашната веб-страница има име index.html или
index.htm.

172
 Динамички веб-страници
Денес веб-страниците не се чуваат во форма во која се испорачуваат до
посетителот. Натписите и другите податоци се чуваат во бази на податоци, а на
посетителот му се испорачува HTML-документ кој го креираат програми кои работат
на серверот во моментот на добивање на барањето. Ваквите веб-страници се
нарекуваат динамички веб-страници.

Сл. 4. 4. Испорачување на динамичка веб-страница

1. Авторот креира веб-страница која се состои од наредби во некој програмски јазик и ја
поставува на веб-сервер.
2. Корисникот побарува да ја види страницата. Барањето се проследува од клиентор
(прелистувачот) до веб-серверот на кој се наоѓа бараната страница.
3. Веб-серверот ја пронаоѓа динамичката веб-страница.
4. Веб-серверот го извршува програмскиот код и креира HTML-код.
5. Веб-серверот преку Интернет праќа генериран HTML-код до прелистувачот.
6. На крајот прелистувачот го обработува добиениот HTML-код и ја прикажува страницата
со сите лементи.

Динамичките веб-страници овозможуваат интеракција со посетителите, се

собираат податоци за посетителите и за нивните интересирања, се овозможува или
оневозможува пристап до одредени делови на локацијата на одредени категории
на посетители, автоматски се праќаат известувања и вести на посетителите кои тоа
го сакаат и сл.
За потребите на креирање на динамичките веб-страници се развиени посебни
програмски скрипт јазици (на пр. PHP или ASP) и алати (на пр. CGI script, Java script,
Active X). Делови на код напишани на овие јазици се вклучуваат во HTML-страница.
Нивниот код се извршува на серверот и служи за поврзување со базата на податоци
која исто така се наоѓа на серверот. Податоците по потреба се повикуваат од базата
и според нив се креира веб-страница која се праќа до прелистувачот на посетителот.
Динамичката веб-страница се препознава по синтаксата на URL-адресата на
страницата, на пр.:
http://www.ukim.edu.mk/mk_content.php?meni=41&glavno=41
www.youtube.com/watch?v=v4oN4DuR7YU
Во URL-адресата на динамичките веб-страници се наоѓаат знаците “?” и “=”.
Кај динамичките веб-страници адресата на домашната веб-страница е index.
HTML

php. Наместо наставката .php може да се појават и наставките .asp, .jsp и др.
Зад. 4. 1. Пронајди три статички и три динамички веб-страници и запиши ги
нивните URL-адреси!

173
 Видови на динамички веб-страници
Динамичките веб-страници најчесто се креираат и одржуваат со системи за
управување со содржината, познати како CMS (content management system). Во
ваквите системи постојат посебни програми со кои корисниците можат да креираат
нивни веб-страници и да одберат дизајн по желба. Сите податоци за регистрираните
корисници и нивните натписи се наоѓаат во база на податоци. Сликите и другите
мултимедијални податоци се наоѓаат во посебни датотеки. Денес повеќето веб-
страници се креирани на ваков начин.
Блог (web log, веб-дневник) е место на веб слично на CMS. Натписите во
него се организираат хронолошки така што најновиот натпис е на почетокот на
блогот. Податоците за натписот се прикажуваат на различни начини – датумот на
објавувањето, список на ознаки (тагови), организација на натписите по категории и
по месеци итн. Доколку корисникот даде дозвола, посетителите можат да остават
коментари на натписите.
LMS (learning management system) е вид на CMS кој содржи алати кои на
наставниците им овозможуваат да објавуваат и разменуваат содржини со нивните
ученици. Освен алатите за објавување на содржината и алатите за комуникација
помеѓу посетителите, постојат и алати специјализирани за образовен систем. Такви
се на пр. алати за креирање на анкети и тестови, алати за предавање на задачи, алати
за следење на напредокот на учениците и сл. Учениците имаат олеснет пристап до
потребните материјали, а кои наставниците ги поставуваат на веб-страниците.
Wiki-страниците, исто така, се динамички веб-страници на кои корисниците
можат да додаваат и да ги менуваат постоечките содржини.

4.1.4 Составни делови на веб-страниците

На веб-страниците можат да се најдат многу елементи: Заглавие
текст, слики, навигација (menu), анимации, логоа, банери,
Странична лента

календар, музика, видео клипови, календар, врски и

уште многу други елементи. Изгледот на веб-страницата Содржина
претставува начин на кој нејзините елементи се распределени
и претставени. Распоредот на елементите речиси на сите веб-
страниците е многу сличен. Тие се распоредени во четири
основни делови: заглавие (header), содржина на страницата
(content), странична лента (sidebar) и подножје (footer). Подножје

Содржината на веб-страницата е најважниот дел на страницата и зазема

најголем простор. Тоа е основа на веб-страницата, односно веб-страницата постои
заради содржината.
Заглавието е составен дел на повеќето веб-страници и обично се појавува на
сите страници во веб-локацијата. Во заглавието најчесто се наоѓаат логото, името
на фирмата или на поединецот, слоганот, банерот и сл. Исто така, во заглавието
се ставаат елементите кои треба да бидат присутни на сите страници, како што се:
навигација, форма за пребарување, форма за пријавување на корисници и сл.
HTML

Банер е простор на веб-страница резервиран за рекламирање. Тоа е најчесто

слика во форматот JPEG, GIF или PNG, а може да биде и анимација како што е флеш-
филмот.
Навигација е колекција од врски со кои страниците меѓусебно се поврзани.
Ова е најважниот елемент на секоја веб-локација и се наоѓа на сите страници
174
на локацијата. За навигација во веб-локацијата обично се користат копчиња за
навигација и означени зборови во текстот. Навигацијата најчесто се наоѓа на врвот
на страницата веднаш под заглавието или е дел од заглавието. На некои страници се
наоѓа на врвот на страничната лента.
Подножје е делот на дното на страницата и исто така се повторува на сите
страници. Содржи дополнителни податоци како што се податоци за сопственикот,
податоци за авторските права, изјава за заштита на податоците, услови за користење
на страницата, податоци за дизајнерот и сл. Во заглавието можат да се повторат
врските до другите страници.
Страничната лента може да се наоѓа од левата или од десната страна на
страницата. На некои страници постојат и лева и десна странична лента. Во
страничната лента обично се наоѓаат навигацијата, врските кон профилите на
социјалните мрежи, врски кон други страници, навигацијата на веб-локацијата и
делот со реклами (банери). На некои страници воопшто нема странична лента, таа
се користи на страниците кои имаат многу содржина.
Големината на страницата е определена со нејзината ширина и висина.
Просторот околу страницата се нарекува заднина и може да биде исполнет со боја,
со една слика или со повеќе слики кои се повторуваат. Заднината не содржи текст.

4.1.5 Скриптирање на опслужувачка и на клиентска страна

Потсети се:
Клиент (client) е компјутерот поврзан во мрежа кој бара податоци и услуги.
Сервер (server) или опслужувач е компјутерот во мрежата кој ги содржи бараните
податоци или услуги. Компјутерот на кој е зачувана некоја веб-локација се
нарекува сервер.
Скриптните јазици, како што се CGI (Common Gateway Interface), PHP, JSP и ASP
се извршуваат на серверот. Тие обезбедуваат обработка на податоци добиени преку
форми и интеракција со база на податоци која се наоѓа на серверот. Сите ови јазици
имаат можност да прифатат податоци внесени преку форма, да пребараат податоци
во базата и да генерираат HTML-страница со резултатите на обработката. На ваков
начин се генерираат на динамички веб-страници.
Но ниту еден од овие јазици не реагира на кликнување на глувчето и не може
да обезбеди директна интеракција со корисникот. За таа намена неопходни се
програми кои ќе се извршуваат во самиот прелистувач на компјутерот на клиентот.
Еден од јазиците кој се извршува на страната на клиентот е JavaSrcipt. HTML-кодот,
исто така, се извршува во прелистувачот на посетителот.
Техниката со која скриптите се извршуваат директно на серверот се нарекува
скриптирање на опслужувачка или серверска страна (Server-side scripting). Техниката
со која скриптите се извршуваат кај клиентот во рамките на прелистувачот се
нарекува скриптирање на клиентска страна (Client-side scripting).

4.1.6 Поим за CSS
HTML

Сите веб-страници се пишуваат со јазикот HTML со кој се дефинира содржината

на страницата и начинот на нејзиното прикажување. HTML користи ознаки (тагови)
со кои се означува дека одделни делови на текстот претставуваат наслов, пасус,
листи итн. На пр. со кодот <h1>Ова е наслов</h1> се означува дека текстот „Ова

175
 е наслов“ претставува наслов во документот и тој ќе биде прикажан со поголеми
букви од останатиот текст.
За изгледот на текстот и на другите елементи (слики, табели...) во почетокот
се грижеле прелистувачите. Но со време настанувале нови ознаки во HTML јазикот
и се јавила потреба за форматирање. За полесно форматирање на поголем број
на елементи во HTML се воведени стилови (слично со стиловите во програмите за
обработка на текст).
Стиловите, всушност, се правила кои дефинираат како ќе се прикажат HTML-
елементите. Информациите за стилот можат да се специфицираат на различни
начини: внатре во HTML-елементот, како посебна листа во состав на HTML-страницата
или во надворешна датотека. Надворешни датотеки се пишувани во јазикот CSS (Cas-
cading Style Sheets) и се зачувуваат со наставката .css. CSS овозможува додавање на
различни стилови на HTML-елементите, како што се: големина и вид на буквите, бои
на буквите и на заднината, рамки, маргини и сл.
Пр. 4. 1. Со CSS кодот:
p
{
text-align: center;
color: black;
}
е дефинирано сите пасуси да се прикажат израмнети во средината и со црна
боја.
Надворешната листа со стилови овозможува измена на изгледот на сите веб-
страници во веб-локацијата со измена на само еден CSS документ.

Резиме
Веб-страница е HTML-документ кој овозможува прикажување на текстот и
хиперврските (hyperlinks). На веб-страницата, освен текстот и хиперврските,
можат да се прикажат мултимедиските елементи како што се: сликите,
анимациите, звукот и сл.
Структурата на веб-страниците го одредува распоредот и начинот на
поврзување на страниците во локацијата. Веб-страниците може да бидат
организирани на два главни начина и нивните варијанти: линеарно и хиерархиски.
Веб-страниците можат да бидат статички и динамички. Содржината на
статистичките веб-страници е непроменлива. Кај динамичките веб-страници
на посетителот му се испорачува HTML-документ кој за него во моментот на
добивање на барање го креираат програми кои работат на серверот. Видови на
динамички веб-страници креирани со CMS се: блог, LMS, Wiki-страниците и др.
На веб-страниците можат да се најдат многу елементи кои се распоредени
во четири основни делови: заглавие (header), содржина на страницата (content),
странична лента (sidebar) и подножје (footer).
Начинот на работа каде скриптите се извршуваат директно на серверот се
нарекува скриптирање на опслужувачката страна (Server-side scripting). Начинот
на работа каде што скриптите се извршуваат кај клиентот во рамките на
прелистувачот се нарекува скриптирање на клиентската страна (Client-side script-
HTML

ing).
CSS овозможува додавање на различни стилови на HTML-елементите, како
што се: големина и вид на буквите, бои на буквите и на заднината, рамки,
маргини и сл.

176
 Прашања:
1. Што е веб-страница, а што веб-локација?
2. Што е домашна страница?
3. Што е веб-сервер?
4. Како посетителите можат да видат содржина на некоја веб-страница?
5. Во кој јазик се пишуваат веб-страниците?
6. Дали на веб-локацијата може да има и други датотеки освен веб-страници?
Какви?
7. Што е структура на веб-страници?
8. Со какви структури можат да бидат организирани веб-страниците во веб-
локација?
9. Какви типови веб-страници има?
10. Какви содржини се наоѓаат на статичките веб-страници?
11. Дали статичките веб-страници овозможуваат интеракција со посетителите?
12. Објасни како статичките веб-страници се испорачуваат до посетителот!
13. Како се креираат динамичките веб-страници?
14. Во кои јазици се пишуваат динамичките веб-страници? Каде се извршува
кодот на тие јазици?
15. Како ќе препознаеш адреса на статичка, а како на динамичка веб-страница?
16. Наведи неколку видови на динамички веб-страници!
17. Кои се основните делови на веб-страниците? Објасни ги!
18. Објасни ги техниките: скриптирање на опслужувачка страна и скриптирање
на клиентска страна!
19. За што се користи јазикот CSS?
20. Што се дефинира со стиловите во CSS?

4.2  Основи на HTML

Во оваа лекција ќе се запознаеш со:
• поимот за HTML;
• видовите уредувачи за пишување на HTML,

4.2.1 Поим за HTML и компарација со програмски јазик

Основниот јазик кој се користи за изработка на веб-страници е HTML (Hyper-
Text Markup Language). Како што му кажува името, HTML е јазик за означување на
хипертекстуални документи. Тој на прелистувачите им дава податоци за содржината
и структурата на веб-страницата. Според тие податоци прелистувачот оформува и
прикажува страница каква што посетителите ја гледаат.
HTML не е програмски јазик. Со HTML не може да се напише наредба која ќе
HTML

извршува некоја задача, дури ни наједноставна операција за собирање на два броја.

Тој служи само за опишување на елементите на веб-страницата и начинот на кој тие
ќе се прикажат во прелистувачот.
HTML е јазик за означување и неговиот код се се состои од тнр. ознаки или
тагови помеѓу кои се сместува одредена содржина. Ознаките се пишуваат помеѓу
177
 знаците „<“ и „>“ и на некој начин претставуваат инструкција до прелистувачот на
кој начин да ги прикаже елементите на веб-страницата. Прелистувачот, откако ќе
вчита документ со HTML-код, ги толкува ознаките и нивната содржина според HTML
стандардите. Значи, изгледот, структурата и форматирањето на HTML-документот
зависат од ознаките.
Повеќето ознаки во HTML се пишуваат во пар – почетна и завршна ознака, а
помеѓу нив се пишува текст. Почетната ознака на прелистувачот му дава инструкција
како да ја прикаже содржината што следува по ознаката. Завршната ознака, која
се добива со додавање на знакот “/” пред името на ознаката, означува крај на
инструкцијата.
Пр. 4. 2. Со кодот:
Овој текст е нормален. <b>Овој текст е задебелен. </b>Повторно
нормален текст.
во веб-прелистувачот ќе се прикаже:

Прелистувачот со задебелени букви го прикажува само текстот кој се наоѓа

помеѓу почетната и завршната ознака <b> и </b>. Ознаките кои го опишуваат текстот
не се прикажуваат.
Единствената ознака која отстапува од овој начин на пишување е ознаката за
коментар: Оваа ознака изгледа вака:
<!-- Ова е коментар -->
Внатре во ознаките за коментар може да се напише каков било коментар, на
пр. објаснување на кодот. Овој текст нема влијание на содржината на веб-страницата
и не се прикажува во прелистувачот.

4.2.2 Видови уредувачи за пишување на HTML

Веб-страница е документ кој содржи HTML-код и има наставка .htm или .html.
Во веб-прелистувачот што го користиш отвори твоја омилена веб-страница, кликни со
десното копче па одбери View page source или View source (зависи од прелистувачот).
Го гледаш HTML-кодот на страницата (не е така застрашувачки како што изгледа).
Забележуваш дека се работи за текстуален документ кој може да се креира во
кој било текст-едитор. HTML-кодот може да се напише и во наједноставните алати
како што е Notepad. Не се препорачува да се користат програми за обработка на
текст, како што се Microsoft Word и OpenOfficeWriter, затоа што тие креираат датотеки
кои прелистувачот не може да ги прочита.
Денес е развиен голем број на текстуални и визуелни едитори за изработка на
веб-страници.
Текстуални едитори
Постојат многу текстуални едитори во кои е поудобно да се работи. Некои
предности на ваквите едитори се: боење на елементите во текстот со што тие полесно
HTML

се разликуваат, автоматско вовлекување на редовите, проверка на синтаксата,

поддршка за пишување на кирилицата и сл. Еден од најдобрите е бесплатниот
едитор Notepad++ кој може да се преземе од веб-страницата http://notepad-plus-
plus.org/.

178
Вежба:
1. Отвори Notepad или Notepad++. Напиши го следниот текст:
<h1>Мојата прва веб-страница</h1>
<hr>
<b>Автор:</b>
<br>Твое име и презиме
Овој код дава веб-страница со следниот изглед:

2. Зачувај ја датотеката со име „mojastranica.html“. Во Notepad важно е

датотеката да ја зачуваш со наредбата Save as и во полето Save as type
да одбереш All types, инаку Notepad автоматски ќе ја додаде наставката
.txt (mojastranica.html.txt). Во Notepad++ во полето Save as type треба да
одбереш Hyper Text Markup Language file.
3. Стартувај го твојот веб-прелистувач. Одбери ја наредбата Open и отвори го
документот „mojastranica.html“.
4. Забележуваш дека текстот не е прикажан исправно, се појавуваат некои
чудни знаци. Ова се случува затоа што содржината на документот е
пишувана со кирилица, па на прелистувачот треба да му се укаже дека треба
да користи соодветен начин на кодирање. За прикажување на знаците кои
се користат во различни јазици (па и знаците од македнонската азбука) се
користи Unicode-табелата, начин на кодирање UTF-8.

Важно:
За правилно прикажување на знаците:
Во Notepad кога го зачувуваш HTML-документот, во полето Encodig одбери Uni-
code или UTF-8.

Во Notepad++ од наредбата Language одбери Encode UTF-8.

HTML

Забелешка:
Кога се зачувува HTML-датотека сеедно е дали се користи наставката .htm или
.html. Наставката .htm е наследена од порано кога се користеле само наставки
со три букви.

179
 WYSIWYG-едитори
Во текстуалните едитори кодот се пишува рачно и корисникот не може да види
како документот ќе изгледа сѐ додека не го отвори во веб-прелистувачот. Од тие
причини е развиен голем број на апликации – алати за креирање на веб-страници
кои автоматски го генерираат потребниот HTML-код (на пр. Front Page или Dream-
weaver). Таквите програми се наречени WYSIWYG (what you see is what you get)
едитори. Во нив содржината се уредува со кликнување на глувчето и не е потребно
познавање на јазикот HTML.
Визуелното уредување има неколку предности во однос на рачното пишување
на кодот. Корисникот веднаш може да ја види содржината на документот, а освен тоа
програмата сама генерира код па можноста за грешки е минимална. Недостатокот
на WYSIWYG-едитори е што со нивното користење не се добива „чист“ код (на пр.
со бришење на некој текст не се брише и ознаката која означува како тој да биде
прикажан). На овој начин кодот е непрегледен и е потребно дополнително да се
уреди. Од овие причини WYSIWYG-едиторите имаат можност за рачно пишување на
кодот. Некои од визуелните едитори се сложени апликации (на пр. Dreamviewer) па
е потребно прво да се научи како со нив да се работи.
За почеток најдобар избор се едноставните HTML-едитори кои се лесни за
работа и имаат можност да го прикажат изгледот на веб-страницата. За подобро
совладување на јазикот HTML се препорачува кодот да се пишува рачно.
Бесплатните HTML-едитори RJ TextEd и NVU можат да се преземат на www.rj-
texted.se/download.htm и http://net2.com/nvu/download.html
Вежба:
1. Отвори го едиторот RJ TextEd. Ќе го добиеш почетниот прозорец:
HTML

Сл. 4. 5. Уредувачот RJ TextEd

180
 2. Во делот New File кликни на именикот HTML, потоа двапати кликни на .html
за да креираш нов документ. Нов документ можеш да креираш и со
кликнување на надолната стрелка до копчето (Create a new docu-
ment), од каде одбираш HTML, потоа .html.
3. Ќе добиеш едитор во кој се пишува текст. Напиши:
<h1>Мојата прва веб-страница</h1>
<hr>
<b>Автор:</b>
<br>
Твое име и презиме

Сл. 4. 6. HTML-код во уредувачот RJ TextEd

Важно:
За правилно прикажување на кирилицата, од менито Format одбери ја наредбата
Encoding→UTF-8.
4. На лентата под едиторот (Main window tabs) се дадени копчиња за преглед
на страницата во неколку веб-прелистувачи. Кликни на нив за да ја видиш
страницата. За пишување на текст кликни на копчето Editor.
5. Зачувај го документот со наредбата Save as од менито File. Во полето Save as
type одбери HTML, а во полето Encoding одбери Unicode (UTF-8).
HTML

181
 Вежба:
1. Отвори го едиторот NVU. Ќе го добиеш почетниот прозорец:

Сл. 4. 7. Уредувачот NVU

2. На лентата под текст-едиторот кликни на картичката Source. Гледаш дека

веќе е напишан еден дел од кодот. Ова е основен код што мора да го
има секој HTML-елемент (објаснувањето на кодот е дадено под следниот
наслов).
HTML

Сл. 4. 8. HTML-код во уредувачот NVU

182
 3. Во NVU едиторот документот може да се уредува на повеќе начини. Еден
од начините е визуелен начин на картичката Preview. Овде можеш да
пишуваш и форматираш текст, да вметнеш слики, да уредуваш табели и
сл. Програмата сама ќе креира HTML-код (видлив на картичката Source).
За почеток, додека не ги научиш основните HTML-ознаки, овој начин на
работа не се препорачува.

Забелешка:
За правилно прикажување на кирилица, документот зачувај го со наредбата
File→Save And Change Character Encoding.
Се запозна со неколку едитори за пишување на HTML-кодот. Можеш да
одбереш едитор по твој избор.

Резиме
Основниот јазик кој се користи за изработка на веб-страници е HTML. Тој на
прелистувачите им дава податоци за содржината и структурата на веб-страницата.
HTML е јазик за означување и неговиот код се состои од т.н. ознаки или тагови
помеѓу кои се сместува одредена содржина. Ознаките се пишуваат помеѓу
знаците „<“ и „>“ и на некој начин претставуваат инструкција до прелистувачот
на кој начин да ги прикаже елементите на веб-страницата. Ознаките кои го
опишуваат текстот не се прикажуваат.
Веб-страница е документ кој содржи HTML-код и има наставка .htm или .html.
Тоа е текстуален документ кој може да се креира во кој било текст-едитор, на пр.
во Notepad. Постојат многу текстуални едитори во кои е поудобно да се работи.
Еден од најдобрите е бесплатниот едитор Notepad++ .
Во текстуалните едитори кодот се пишува рачно и корисникот не може да
види како документот ќе изгледа сѐ додека не го отвори во веб-прелистувачот.
Од тие причини е развиен голем број апликации кои автоматски го генерираат
потребниот HTML-код. Таквите програми се наречени WYSIWYG (what you see is
what you get) едитори.
Бесплатните HTML едитори RJ TextEd и NVU можат да се преземат на www.rj-
texted.se/download.htm и http://net2.com/nvu/download.html
За прикажување на знаците кои се користат во различни јазици (па и знаците
од македнонската азбука) се користи Unicode-табелата, начин на кодирање UTF-8.

Прашања:
1. Што се опишува со HTML-кодот за веб-страница?
2. Што се ознаки и како тие се пишуваат?
3. Што претставуваат ознаките во HTML-кодот?
4. Дали ознаките се прикажуваат на веб-страницата?
5. Наведи неколку текстуални едитори за пишување на HTML-кодот!
6. Наведи неколку визуелни едитор за пишување на HTML-кодот!
7. Што значи кратенката WYSIWYG?
8. Во кој формат на датотека треба да се зачува веб-страница пишувана во
HTML

HTML-јазикот?
9. Што треба да се направи за кириличните букви исправно да се прикажат во
веб-прелистувачите?

183
 4.3  Основните ознаки во HTML
Во оваа лекција ќе научиш:
• да пишуваш основен HTML-код;
• да дефинираш наслов на документ;
• да дефинираш начин на кодирање;
• да користиш основните ознаки во HTML.

4.3.1 Основен HTML-код
Секој HTML-документ се состои од два дела: заглавие (head) и тело (body).
Во заглавието на документот се пишуваат информациите за страницата кои не се
прикажуваат како содржина на веб-страница.
Содржината која се прикажува на веб-страницата се пишува во телото на
документот. Основниот HTML-документ изгледа вака:

заглавие

тело

Сл. 4. 9. Основен HTML-код

Совет:
Во HTML е сеедно како се пишуваат празнините и редовите во текстот, но
заради поголема прегледност се препорачува вовлекување на редовите како
во примерот.
Првата ознака во HTML-документот е ознаката <html> која на прелистувачот му
кажува дека тоа е почетокот на HTML-документот. Последната ознака е </html> која
кажува дека тоа е крајот на HTML-документот.
Ознаките <head> и </head> го означуваат почетокот и крајот на заглавието.
Содржините во заглавието не се прикажуваат во прозорецот на прелистувачот.
Текстот помеѓу ознаките <title> и </title> е наслов на документот. Насловот се наоѓа
во заглавието на документот и се прикажува на насловната лента на прелистувачот.
Текстот помеѓу ознаките <body> и </body> е текст кој ќе се прикаже во
прелистувачот.

Забелешка:
HTML не е чувствителен на големината на буквите, така што ознаките <body>,
<Body> и <BODY> претставуваат иста инструкција. Најновите препораки се
ознаките да се пишуваат со мали букви.
HTML

Декларација за верзија на HTML

HTML е дефиниран 1990 година и повеќепати е предефиниран, па постојат
верзии 2.0, 3.2, 4.0, 4.01, 5, XHTML 1, XHTML 1.1 и разни привремени верзии (на пр.
HTML 3.0).
184
 Иако веб-прелистувачите можат да препознаат со која верзија на HTML е
пишуван документот, сепак е добро пред ознаката <html> да се напише <!DOCTYPE>
декларација која на прелистувачот му овозможува веб-страницата да ја прикаже
исправно. Денес најчесто се користат следниве декларации:
За верзијата HTML5:
<!DOCTYPE html>
За верзијата HTML 4.01 Strict:
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
Ние ќе работиме со верзијата HTML 4.01 Strict. HTML5 сѐ уште не е официјален
стандард и некои прелистувачи немаат поддршка за него.
Начин на кодирање
Во основниот HTML е потребно да се стави и ознака со која се дефинира начинот
на кодирање. Таа ознака се става во заглавието, во т.н. мета ознака, и изгледа вака:
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
На овој начин на прелистувачот му се укажува за декодирање на веб-страницата
да ја користи табелата Unicode, и тоа конкретно начинот на кодирање UTF-8, во која
се вклучени знаци од многу светски јазици. Ако документот е зачуван со кодирањето
Unicode (UTF-8), поновите веб-прелистувачи правилно ќе ги прикажат знаците без
разлика дали во документот има мета ознака.
Зад. 4. 2. Препиши го основниот HTML-код. На почетокот напиши ja <!DOC-
TYPE> декларацијата за верзијата HTML5. Во заглавието препиши ја мета ознаката
за начинот на кодирање. Зачувај го документот со име osnovna.html. Оваа датотека
понатаму може да се користи како шаблон за креирање на други документи.

4.3.2 Основните ознаки
Основните ознаки кои треба да ги има секоја веб-страница се: <html>, <head>,
<title>, <body> и, секако – содржина. Со овие ознаки веќе се имаш запознаено, сега
ќе се запознаеш со уште неколку ознаки за уредување на текст.
Линиско уредување на текст
Текстот може да се задебели и/или искоси. Тоа се постигнува така што текстот
се оградува со ознаките <i> за искосување (italic) и <b> за задебелување (bold).
Истиот ефект се постигнува и со ознаките <em> (emphasize) искосување и <strong>
задебелување. Овие ознаки одат во пар, т.е. има почетна и завршна ознака.
Ознаките за линиско уредување го уредуваат текстот во линија и не
предизвикуваат поминување во нов ред.
Пр. 4. 3. Со кодот:
Текстот може да биде <em>искосен</em>, или <strong>задебелен</strong>.
А може да биде истовремено <em><strong>и искосен и задебелен
</strong></em>.
ќе се прикаже
HTML

185
 Забелешка:
Се препорачува користење на ознаките <em> и <strong> затоа што со нив се
нагласува значењето на текстот, а не форматирање. Нагласувањето на значењето
има и други функции, како на пр. начин на читање за слепи лица.
Потцртување на текст повеќе не се користи. Една од причините е што потцртан
текст се користи за прикажување на врски (линкови).
Примери за линиско уредување на текст:
<big>Големи букви во текстот</big>
<small>Мали букви во текстот</small>
_{Букви во долен индекс}
^{Букви во горен индекс}
Зад. 4. 3. Отвори ја датотеката osnovna.html и зачувај ја со име ureduvanje_
na_tekst.html. Наместо текстот „Содржина на веб-страница“ напиши една реченца
по твој избор. Задебели еден збор од реченицата и искоси друг збор. Зачувај ја
датотеката и погледни ја во прелистувачот.

Наслови
HTML 4.01 овозможува дефинирање на наслови во шест нивои со користење
на ознаките од <h1> до <h6>. Главниот наслов се дефинира со ознаката <h1>, а
поднаслови со ознаките од <h2> до <h6>.
Пр. 4. 4. Со кодот: ќе се прикаже:
<h1> Ова е наслов 1</h1>
<h2> Ова е наслов 2</h2>
<h3> Ова е наслов 3</h3>
<h4> Ова е наслов 4</h4>
<h5> Ова е наслов 5</h5>
<h6> Ова е наслов 6</h6>

Забележуваш дека насловите се прикажуваат со различни големини. Исто

така, насловите се прикажуваат со задебелени букви иако тоа не е дефинирано со
ознаката <strong>. Насловите се вертикално одвоени од останатиот текст.
Зад. 4. 4. Отвори ја датотеката osnovna.html и зачувај ја со име naslovi.html.
Наместо текстот „Содржина на веб-страница“ напиши текст по твој избор. Дефинирај
еден наслов и два поднаслови со нивои h2 и h3. Зачувај ја датотеката и погледни ја
во прелистувачот.

Пасуси и нов ред

Ако во HTML-кодот се префрлиме во нов ред тоа нема да се гледа во
HTML

прелистувачот. Во HTML-датотека не се важни празните места и префрлување во

нов ред. Пишувањето на текст одделен во пасуси и преминувањето во нов ред (без
креирање на нов пасус), во HTML се дефинира со ознаките <p> и <br>. Ознаката <p>
има почетна и завршна ознака, додека ознаката <br> нема завршна ознака.

186
 Пр. 4. 5. Со кодот:
<p>Ова е пасус. Пасус е дел од текстот прикажан во неколку редови.
Редовите се израмнуваат од левата страна. </p>
<p>Ова е уште еден пасус. Новиот пасус визуелно е одвоен од
претходниот пасус со вертикално растојание.</p>
ќе се прикаже:

Забележуваш дека пасусите се одвоени визуелно еден од друг со вертикално

растојание. Пасусите се израмнети од левата страна. За поинаков начин на
израмнување ќе стане збор подоцна, како и за дефинирањето на растојанието
помеѓу пасусите.
Понекогаш е потребно текстот да се напише во нов ред, а притоа да не се
креира нов пасус, на пр. за пишување на стихотворби. Со ознаката <br> се дефинира
крајот еден и започнувањето на нов ред.
Пр. 4. 6. Со кодот
Овде завршува првиот ред <br> и почнува нов ред.
ќе се прикаже:

Зад. 4. 5. Отвори ја датотеката osnovna.html и зачувај ја со име stihotvorba.

html. Наместо текстот „Содржина на веб-страница“ напиши стихотворба по твој
избор. Стихотворбата треба да има наслов, секој стих треба да биде во нов ред, а
секоја строфа нов пасус. Зачувај ја датотеката и погледни ја во прелистувачот.

Хоризонтална линија
Со ознаката <hr> се исцртува хоризонтална линија.
Пр. 4. 7. Со кодот:
<h1>Мојата прва веб-страница</h1>
<hr>
Автор:<br>Твое име и презиме
ќе се прикаже:
HTML

187
 Листи
Листите можат да бидат нумерирани или со ознаки. И едни и други лесно се
дефинираат во HTML.
Нумерирани листи
Нумерираните листи се користат кога се набројуваат поими за кои е важен
редоследот. За дефинирање на нумерираните листи се користат два вида ознаки –
<ol> (ordered list) со која се дефинира почетокот и крајот на листата и <li> (list item) со
која се дефинира секоја ставка во листата.
Пр. 4. 8. Со кодот:
<ol>
<li>Ставка 1</li>
<li>Ставка 2</li>
<li>Ставка 3</li>
</ol>
ќе се прикаже:

Зад. 4. 6. Отвори ја датотеката osnovna.html и зачувај ја со име numerirana_

lista.html. Наместо текстот „Содржина на веб-страница“ напиши листа од 5 твои
омилени песни почнувајќи од најомилената.
Листа со ознаки
Листи со ознаки се користат кога ставките во листата имаат иста важност, т.е.
не е важно по кој редослед тие се напишани. Листата со ознаки се дефинира на
ист начин како и нумерираната листа, само што наместо ознаката <ol> се користи
ознаката <ul> (unordered list).
Пр. 4. 9. Со кодот:
<ul>
<li>Ставка 1</li>
<li>Ставка 2</li>
<li>Ставка 3</li>
</ul>
ќе се прикаже:

Зад. 4. 7. Отвори ја датотеката osnovna.html и зачувај ја со име lista_so_zna-

HTML

ci.html. Наместо текстот „Содржина на веб-страница“ напиши листа од 5 филмови

за кои сметаш дека треба да се гледаат. Зачувај ја датотеката и погледни ја во
прелистувачот.

188
 Резиме
Секој HTML-документ се состои од два дела: заглавие (head) и тело (body). Во
заглавието на документот се пишуваат информациите за страницата кои не се
прикажуваат како содржина на веб-страницата. Содржината која се прикажува
на веб-страницата се пишува во телото на документот. Првата ознака во HTML
документот е ознаката <html> која на прелистувачот му кажува дека тоа е
почетокот на HTML-документот. Последната ознака е </html> која кажува дека
тоа е крајот на HTML-документот. Заглавието се оградува со ознаките <head> и </
head> а телото со ознаките <body> и </body>.
Иако веб-прелистувачите можат да препознаат со која верзија на HTML
е пишуван документот, сепак е добро пред ознаката <html> да се напише
<!DOCTYPE>-декларација која на прелистувачот му овозможува веб-страницата
да ја прикаже исправно.
Во основниот HTML е потребно да се стави и ознака со која се дефинира
начинот на кодирање. Таа ознака се става во заглавието, во т.н. мета ознака, и
изгледа вака: <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8”>
Основните ознаки кои треба да ги има секоја веб-страница се: <html>, <head>,
<title>, <body> и, секако – содржина. Основните ознаки за уредување на текст се
дадени во следнава табела:
Ознака Опис
<em>, <i> искосен текст
<strong>, <b> задебелен текст
<big> големи букви во текстот
<small> мали букви во текстот
<sub> букви во долен индекс
<sup> букви во горен индекс
<h1>,..., <h6> креирање на наслови
<p> дефинирање на пасус
<br> преминување во нов ред
<ol>, <li> нумерирана листа
<ul>, <li> листа со ознаки
<hr> дефинирање на хоризонтално правило
<!--> внесување на коментари

Прашања:
1. Од кои делови се состои секој HTML-документ?
2. Што се означува со ознаките <html> и </html>?
3. Со кои ознаки се означува заглавието, а со кои телото на HTML-документот?
4. Што е <!DOCTYPE> декларација и зошто е потребно таа да се напише?
HTML

5. Со која ознака се дефинира начинот на кодирање во HTML-документ?

6. Кои се основните ознаки за линиско уредување на текстот?
7. Кои се ознаките за наслови? Како се прикажуваат насловите на веб-
страница во прелистувачот?
8. Која е разликата помеѓу ознаките <p> и <br>?
189
 9. Што се дефинира со ознаката <hr>?
10. Со кои ознаки се дефинира нумерирана листа, а со кои листа со ознаки?

4.4  Елементи и атрибути во HTML

Во оваа лекција ќе научиш:
• да ги препознаваш елементите и нивните атрибути во HTML-документЧ
• да дефинираш прикажување на слика во HTML-документ;
• да ги определуваш својствата на сликата во HTML-документ;
• да ги дефинираш апсолутната и релативната хиперврска во HTML-документ;
• да дефинираш табела и нејзините својства во HTML-документ;
• да користиш ознака за пишување на коментар.

4.4.1 Елементи
HTML-документите се дефинирани со HTML-елементи. HTML-елемент е текстот
помеѓу почетната и завршната ознака заедно со ознаките. Текстот помеѓу почетната
и завршната ознака е содржината на HTML-елементот.
Пр. 4. 10.  HTML-елементот
<b>Овој текст е со задебелени букви </b>.
започнува со почетен таг <b> и завршува со завршниот таг </b>. Неговата
содржина е: „Овoј текст е со задебелени букви“.
Празни елементи
HTML-елемент кој нема содржина се нарекува празен елемент. На пр. <br> е
празен елемент. Со ознаката <br> се дефинира крај на еден и започнување на нов
ред.
Вгнездување на HTML-елементи
HTML-елементите можат да се вгнездуваат еден во друг. Во основниот HTML-
документ
<html>
<head>
<title>Наслов на веб-страницата</title>
</head>
<body>
Содржина на веб-страницата
</body>
</html>
Елементот <html> го дефинира целиот HTML-документ. Во него се вгнездени
сите други елементи. Со елементот <head> се дефинира заглавието. Во елементот
<head> е вгнезден елементот <title> со кој се дефинира наслов на документот. Со
HTML

елементот <body> се дефинира телото на документот. Во него се пишуваат елементи

за сите содржини за HTML-документ, како што се: текст, хиперврски, слики, табели,
листи итн.

190
 4.4.2 Атрибути
Атрибутите овозможуваат дефинирање на својствата на HTML-елементот. Тие
секогаш се пишуваат по почетната ознака. Атрибутите имаат име и вредност кои се
пишуваат во форма: ime=”vrednost”.
Името на атрибутот се пишува со мали букви. Вредноста на атрибутот мора
секогаш да биде помеѓу наводници (”) или полунаводници (’). Почесто се користат
наводниците, но може да се користат и полунаводници. Полунаводници се користат
кога во вредноста има наводници, на пр. ime=’улица ”11 Октомври” ’.
Слики
Сликите се дефинираат со елементот <img>. Елементот <img> е празен, т.е.
нема завршна ознака. Во елементот <img> мора да се додели вредност на атрибутот
src (кратенка за source) со кој се дефинира патеката и името на датотеката со слика
или нејзината URL-адреса ако сликата е поставена на сервер.
Пр. 4. 11. Во елементот <img src=”slika.jpg”>, името на атрибутот е src, а
неговата вредност е ”slika.jpg”. Името на датотеката со слика треба да се напише
точно, вклучувајќи големи и мали букви и точната наставка.

Совет:
Сликите чувај ги во истата папка во која е зачуван и HTML-документот или во
потпапка со име sliki, тогаш елементот <img> ќе изгледа <img src=” sliki/slika.jpg”>
Елементот <img> може да има и други атрибути, од кои најчесто се користат:
alt – Го дефинира алтернативниот текст кој се прикажува ако не постои слика,
а можат да го прочитаат и читачите за слепи лица. Во HTML 4.01 Strict атрибутот alt
е задолжителен:
Пр. 4. 12. <img src=”slika.jpg” alt=”Slika”>
width – Ја дефинира во пиксели ширината на сликата;
height – Ја дефинира во пиксели висината на сликата:
Пр. 4. 13. <img src=”slika.jpg” width=”320” height=”180”>
border – Ја дефинира во пиксели дебелината на рамкатаоколу сликата;
hspace – Ги дефинира во пиксели хоризонталните маргини;
vspace – Ги дефинира во пиксели вертикалните маргини:
Пр. 4. 14. <img src=”slika.jpg” border=”1” hspace=”3” vspace=”3”>
align – Го дефинира израмнувањето на сликата во однос на текстот и може да
ги има следниве вредности: left, right, middle, top или bottom:
Пр. 4. 15. <img src=”slika.jpg” align=”left”>
Забележуваш дека на еден елемент може да му се доделат повеќе атрибути
и тие се одделуваат со празно место. Редоследот на пишување на атрибутите нема
важност.
Совет:
Атрибутите за ширината и за висината на сликата не се задолжителни, но е добро
HTML

да се користат. Во Windows 7 димензиите на сликата можат да се видат ако се

држи покажувачот од глувчето на името или на иконата на сликата. Вредностите
за ширината и висината треба да се намалат/зголемат пропорционално во однос
на вистинските димензии на сликата. Ако вредностите се преголеми сликата

191
 нема добро да се гледа. Ако вредностите премногу се намалени, ќе се вчитува
голема слика и ќе се прикаже намалено со што сликата предолго ќе се вчитува.
Најдобро е големите слики да се намалат во некоја од програмите за обработка
на слики, па тогаш да се користат на веб-страници (препорака EasyPic).
Пр. 4. 16. Со кодот:
<p><img src=”smajli.gif” alt=”Smajli” align=”left” border=”1”
hspace=”3” vspace=”3” width=”40” height=”40” >Ова е текст. Ова е
текст. Ова е текст. Овае текст. Ова е текст. Ова е текст.Ова е
текст. Ова е текст. Ова е текст. Ова е текст.</p>
ќе се прикаже:

Зад. 4. 8. Отвори ја датотеката osnovna.html и зачувај ја со име slika.html.

Наместо текстот „Содржина на веб-страница“ напиши текст со кој ќе опишеш една
твоја омилена личност. Вметни слика во текстот. Поставувај ја сликата на различни
позиции и со различни големини, додека не го одбереш најдоброто решение. Зачувај
ја датотеката и погледни ја во прелистувачот.
Зад. 4. 9. Напиши елемент за слика, во атрибутот src напиши име на датотека
која не постои. Зачувај го документот и погледај го во различни прелистувачи. Како
тие ја покажуваат непостоечката слика?

Хиперврски
Хиперврска е збор, повеќе зборови или слика на која може да се кликне за да
се премине на друга веб-страница на иста или друга локација или на друго место
на истата веб-страница. Хиперврските можат да водат на кој било вид датотека –
друг текстуален документ, слика, аудио или видеозапис, компримирана датотека,
извршна датотека итн. Доколку прелистувачот не може да ја прикаже содржината на
датотеката, тој ќе понуди таа да се преземе (download). Хиперврската може да води
и на адресата на електронската пошта.
Кога покажувачот од глувчето се наоѓа врз хиперврската, тој ја менува формата
во рака. Хиперврската по правило се прикажува со подвлечени букви, а нејзината
боја зависи од тоа дали посетителот претходно ја посетил страницата до којашто
води врската. Непосетената врска има сина, посетената виолетова, а активната врска
црвена боја.
Хиперврската се дефинира со елементот <a> (кратенка од anchor). Овој
елемент има и завршна ознака </a> и атрибути со кои се дефинираат својствата на
хиперврската. Содржината на елементот <a> е текст кој ќе се прикаже во прелистувачот
и кој ќе биде хиперврска. href (кратенка од hyperlink reference) е задолжителен
атрибут на елементот <a>. Со него се дефинира каде води хиперврската.
HTML

Апсолутна хиперврска
Апсолутната хиперврска води до веб-страница на друга веб-локација.
Вредноста на аргументот href е URL-адреса на веб-страницата до која води врската.
Пред доменот на страницата задолжително се наведува и ознаката за протокол, на
пр. http://.
192
 Пр. 4. 17. Со кодот:
<a href=”http://www.google.com/”>Пoбарајте на Google</a>
ќе се прикаже подвлечен текст со сина боја. Кога
покажувачот од глувчето ќе се постави врз сликата, тој добива
форма на рака:
Наместо текстот содржината на елементот може да биде и слика.
Пр. 4. 18. Со кодот:
<a href=”http://www.google.com/”><img src=”Google-logo.jpg”
alt=”Google logo” width=”100” height=”30”></a>
ќе се прикаже слика. Кога покажувачот од глувчето ќе се постави
врз сликата, тој добива форма на рака:
Кога корисникот ќе кликне на текстот Google, ќе помине на веб-страницата
google.com.

Забелешка:
Доколку хиперврската не води до некој одреден документ во веб-локација (на
пр. index.html), URL adresata vo atributot href се завршува со знакот /. На тој начин
прелистувачот ќе знае дали треба да бара датотека или папка, па вчитувањето
ќе биде побрзо.
Зад. 4. 10. Отвори ја датотеката osnovna.html и зачувај ја со име apsolutna_hip-
ervrska.html. Наместо текстот „Содржина на веб-страница“ креирај две хиперврски
до твоите омилени веб-страници. Една хиперврска нека биде соодветен текст, а друга
соодветна слика (на пр. логото на веб-страницата). Зачувај ја датотеката и погледни
ја во прелистувачот. Кликни на двете хиперврски да провериш дали функционираат.
Зад. 4. 11. Како вредност на атрибутот href напиши непостоечка адреса, на
пр. http://www.gooogle.com. Во неколку прелистувачи провери каде води таквата
хиперврска и каква порака ќе добиеш.
Релативна хиперврска
Релативната хиперврска секогаш води до веб-
страница или друг ресурс (слика, документ, аудио или
видео датотека) внатре во локацијата на која се наоѓа веб-
страницата која ја содржи хиперврската. Во вредноста на
атрибутот href не се наведува ознака за протокол, ниту
име на доменот. Се наведува релативната адреса до
одредишната веб-страница или друг ресурс во однос на
веб-страницата која ја содржи хиперврската.
На пр., нека веб-страниците се организирани како на Сл. 4. 10. Организација на
сликата десно: веб-страници во папка
Коренската папка на локацијата е uciliste. Во неа се наоѓаат сите документи и
папки. Страниците index.html и kontakt.html се наоѓаат во иста папка, па хиперврската
во документот index.html која води до страницата kontakt.html ќе се креира вака:
<a href=”kontakt.htm”>Контакт</a>
HTML

За да се креира хиперврска која од страницата index.html ќе води до страница во

некоја папка, треба да се наведе и име на папката. Така, хиперврската во документот
index.html која води до страницата nastava.html ќе се креира вака:
<a href=”aktivnosti/nastava.htm”>Настава</a>

193
 За да се креира хиперврска во документ кој се наоѓа во некоја папка до
страницата во коренската папка, тогаш прво мора да се „излезе“ од таа папка. За таа
намена се користи ознаката ../. На пр. хиперврската која од документот nastavnici.
html ќе води до страницата index.html, ќе се креира на следниот начин:
<a href=”../index.htm”>Почетната страница</a>
Ознаката ../ се користи онолку пати колку што е потребно за да се дојде до
коренската папка. На пр. ако хиперврската до страницата index.html се креира во
документот informatika.html, елементот <a> ќе изгледа вака:
<a href=”../../index.htm”>Почетната страница</a>
Слично се креира и хиперврска која води од документ во некоја папка до
документ во друга папка. На пр. во документот nastavnici.html, хиперврската која
води до страницата proekti.html ќе се креира на следниот начин:
<a href=”../aktivnosti/proekti.htm”>Проекти</a>
Зад. 4. 12. Креирај папка Ime_Prezime (со твоето име и презиме). Во неа креирај
документи: za_mene.html, moeto_uciliste.html и moeto_hobi.html. Креирај потпапка
Moite_prijateli и во неа неколку документи во кои ќе опишеш неколку твои пријатели.
Поврзи ги сите документи со хиперврски. Зачувај ги документите и погледни ги во
прелистувачот. Кликни на хиперврските да провериш дали функционираат.
Атрибутот target
Со атрибутот target се дефинира каде поврзаниот документ ќе биде отворен.
Наведениот пример подолу линкот ќе го отвори во нов прозорец на пребарувачот.
Пр. 4. 19. Со кодот:
<a href=”http://www.google.com/” target=”_blank”>Google</a>
страницата google.com ќе се отвори во нов прозорец на прелистувачот.
Пр. 4. 20. Со кодот:
<a href=”http://www.google.com/” target=”_self”>Google</a>
страницата google.com ќе се отвори во истиот прозорец на прелистувачот.
Доколку атрибутот target не се наведе, новата веб-страница ќе се отвори во
истиот прозорец.
Табели
Табела се дефинира со три HTML-елементи: <table> за означување на почетокот
и на крајот на табелата, <tr> за означување на почетокот и на крајот на редот (table
row), и <td> за означување на почетокот и на крајот на податочната ќелија (table
data). Податочната ќелија може да содржи: текст, слика, листа, параграфи, форми и
друго.
Со елементот <table> се користи и граничен атрибут <border> со кој се дефинира
границата на ќелиите во табелата. Вредноста на аргументот border се изразува во
пиксели.
Пр. 4. 21. Со кодот: ќе се прикаже следнава табела.
<table border=”1”>
HTML

<tr>
<td>Содржина на ќелија</ td>
</tr>
</table>

194
 Пр. 4. 22. Со кодот: табелата ќе изгледа вака:
<table border=”1”>
<tr>
<td>ред 1, ќелија 1</td>
<td>ред 1, ќелија 2</td>
</tr>
<tr>
<td>ред 2, ќелија 1</td>
<td>ред 2, ќелија 2</td>
</tr>
</table>
Ќелиити во заглавието на табелата се дефинираат со ознаката <th> (table head-
er). Податоците во заглавието се прикажуваат со задебелени букви.
Пр. 4. 23. Со кодот: табелата ќе изгледа вака:
<table border=”1”>
<tr>
<th>Наслов1</th>
<th>Наслов2</th>
</tr>
<tr>
Провери како ќе се прикажат
<td>ред 1, ќелија 1</td>
ќелиите од табелите кои се без
<td>ред 1, ќелија 2</td>
содржина!
</tr>
<tr>
<td>ред 2, ќелија 1</td>
<td>ред 2, ќелија 2</td>
</tr>
</table>
Атрибути на ниво на табела
Освен граничниот атрибут, за табела се користат и следниве атрибути:
cellpadding – ја дефинира оддалеченоста на содржината од работ на ќелијата
изразена во пиксели;
cellspacing – ја дефинира оддалеченоста помеѓу ќелиите изразена во пиксели;
width – ја дефинира ширината на табелата изразена во пиксели или во проценти
во однос на ширината на страницата.
Пр. 4. 24. Со кодот:
<table border=”1” width=”300” cellspacing=”10” cellpadding=”5”>
<tr>
<td>ред 1, ќелија 1</td>
<td>ред 1, ќелија 2</td>
</tr> табелата ќе изгледа вака:
<tr>
HTML

<td>ред 2, ќелија 1</td>

<td>ред 2, ќелија 2</td>
</tr>
</table>

195
 Атрибути на ниво на ќелија
На ниво на ќелија се користат следниве атрибути:
align – го дефинира хоризонталното израмнување на содржината на ќелијата.
Вредностите на овој атрибут можат да бидат left, center, right и justify;
valign – го дефинира вертикалното израмнување на содржината на ќелијата.
Вредностите на овој атрибут можат да бидат top, middle и bottom.
Зад. 4. 13. Отвори ја датотеката osnovna.html и зачувај ја со име tabela.html.
Напиши код со кој во документот ќе се вметне табела со 5 реда и 2 колони. Табелата
нека има заглавие со содржината: Име, Презиме. Напиши содржина во секоја ќелија
(имиња и презимиња). Менувај ги вредностите на атрибутите и набљудувај ги
промените во прелистувачот. Зачувај ја датотеката.
Доколку не се постави граничен атрибут, табелата ќе биде прикажана без
граници. Табела без граници може да се користи за разместување на содржина
на страницата. Со добар распоред на ќелиите во табелата може да се креира веб-
страница со убаво распоредени елементи (заглавие, навигација, подножје, странични
ленти и содржина).
За оваа цел ќе бидат од корист атрибутите за спојување на ќелии:
Хоризонтално спојување на ќелии
colspan – го дефинира бројот на колоните во кои се протега ќелијата;
rowspan – го дефинира бројот на редовите во кои се протега ќелијата.
Пр. 4. 25. Со кодот: ќе се добие следнава табела:
<table border=”1” width=”300”>
<tr>
<td colspan=”3”>1</td>
</tr>
<tr>
<td>2</td><td>3</td><td>4</td>
</tr>
</table>
Пр. 4. 26. Со кодот:
<table border=”1” width=”300”>
<tr>
<td rowspan=”3”>1</td><td>2</td>
</tr>
<tr> ќе се добие следнава табела:
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
HTML

Забелешка:
Распоредување на содржината на страницата со помош на табели е застарен
начин. Денес за таа намена се користи CSS.

196
Резиме
Сѐ од почетната до завршната ознака, вклучувајќи ги и ознаките, претставува
HTML-елемент. Текстот помеѓу почетниот и завршниот таг ja претставува
содржината на елементот.
Атрибутите овозможуваат дефинирање на својствата на HTML-елементот. Тие
имаат име и вредност што се пишува во форма: ime=”vrednost”. На еден елемент
можат да му се доделат повеќе атрибути и тие се одделуваат со празно место.
Сликите се дефинираат со елементот <img> во кој мора да се додели вредност
на атрибутот src со кој се дефинира патеката и името на датотеката со слика.
Елементот <img> може да има и други атрибути, од кои најчесто се користат:
Атрибут Опис
Го дефинира алтернативниот текст кој се прикажува ако сликата не
alt
постои
width Ја дефинира во пиксели ширината на слика
height Ја дефинира во пиксели висината на сликата
border Ја дефинира во пиксели дебелината на рамката околу сликата
hspace Ги дефинира во пиксели хоризонталните маргини
vspace Ги дефинира во пиксели вертикалните маргини
го дефинира израмнувањето на сликата во однос на текстот и
align може да ги има следниве вредности: left, right, middle, top или
bottom
Хиперврска се дефинира со елементот <a> чија содржина е текст кој ќе се
прикаже во прелистувачот и кој ќе биде хиперврска. href е задолжителен атрибут
на елементот <a>. Со него се дефинира каде води хиперврската. Апсолутната
хиперврска води до веб-страницата на друга веб-локација. Вредноста на
аргументот href е URL адреса на веб-страницата до која води врската. Релативната
хиперврска секогаш води до веб-страница или друг ресурс внатре во локацијата
на која се наоѓа веб-страница која ја содржи хиперврската. Во вредноста на
атрибутот href се наведува релативната адреса до одредишната веб-страница.
Табелата се дефинира со три HTML-елементи: <table>, <tr> и <td>. Со
елементот <table> се користи и граничен атрибут <border> со кој се дефинира
границата на ќелиите во табелата.
Освен граничниот атрибут, за табела се користат и следниве атрибути:
Атрибут Опис
Ја дефинира во пиксели оддалеченоста на содржината од
cellpadding
работ на ќелијата.
cellspacing Ја дефинира во пиксели оддалеченоста помеѓу ќелиите.
Ја дефинира ширината на табелата изразена во пиксели или во
width
проценти во однос на ширината на страница.
Го дефинира хоризонталното израмнување на содржината на
align ќелијата. Вредностите на овој атрибут можат да бидат: left,
center, right и justify
Го дефинира вертикалното израмнување на содржината на
HTML

valign ќелијата. Вредностите на овој атрибут можат да бидат: top,

middle и bottom.
colspan Го дефинира бројот на колоните во кои ќелијата се протега.
rowspan Го дефинира бројот на редовите во кои ќелијата се протега.

197
 Прашања:
1. Објасни што се елементи и атрибути во HTML-документ!
2. Како се дефинира слика во HTML-документ?
3. Наведи ги атрибутите за дефинирање на својствата на сликите и објасни ги
нивните значења! Кој од нив е задолжителен и зошто?
4. Со кој елемент се дефинира хиперврска во HTML-документ?
5. Кој аргумент е задолжителен при дефинирање на хиперврската?
6. Што претставува апсолутна хиперврска и како се дефинира?
7. Што претставува релативна хиперврска и како се дефинира?
8. Со кој аргумент се дефинира каде ќе се отвори нова веб-страница по
кликнувањето на хиперврската?
9. Со кои елементи се дефинира табела во HTML-документ? Објасни ги!
10. Со кој аргумент се дефинираат границите на табелите?
11. Со кој елемент се дефинира заглавие на табела?
12. Како може да се спојат во табела повеќе ќелии во една ќелија?

4.5  Стилови во HTML

Во оваа лекција ќе научиш:
• да ја дефинираш бојата на заднината;
• да ја дефинираш бојата и големината на буквите;
• да го дефинираш видот на фонтот;
• да го дефинираш израмнувањето на текст.

Веројатно забележуваш дека текстот се прикажува со фонт кој автоматски му

е доделен. Тоа доаѓа од таму што HTML ја опишува структурата на документот, а
неговиот изглед се дефинира со други методи, како што е јазикот CSS. Сепак постои
начин и со HTML јазикот да се дефинира изгледот на некои елементи.
Како што веќе е кажано, постојат три начини за додавање на стилови во HTML-
документот:
1. Надворешен – стиловите се опишани во посебен CSS документ. Во HTML
овој документ се повикува во елементот <link> кој се пишува во заглавието,
т.е. во блокот <head>, на пр.:
<link rel=”stylesheet” type=”text/css” href=”stil.css” />
2. Внатрешен – со користење на елементот <style> во блокот <head>, на пр.:
<style type=”text/css”>
body {
background-color: blue;
}
h1 {
font-family: Helvetica, Geneva, Arial,sans-serif;
HTML

}
</style>
3. Линиски – со користење на атрибутот style во HTML-елементите, на пр.:
<body style=”background-image:url(slika.jpg)”>

198
 4.5.1 Атрибутот style
Изгледот на содржината се менува со атрибутот style. Со овој атрибут се
менуваат заднината, фонтот, боите итн.
Запис на боите во HTML
Вообичаената боја на заднината е бела, но таа може да се смени во некоја
друга боја. Боите се прикажуваат со комбинирање на црвената (red), зелената (green)
и сината боја (blue). Во HTML боите се дефинираат со користење на хексадецимален
запис со комбинација на вредностите на овие три бои. Хексадецималниот запис е
дефиниран со три пара на двоцифрени броеви пред кои се става знакот #. На пр.
белата боја се запишува со #ffffff, а црната со #000000.

Совет:
Во едиторот RJ Edit бојата можеш да ја одбереш преку тркалото со бои кое ќе го
добиеш со повикување на наредбата Tools→Color.
Боите можат да се дефинираат и со нивното име. Имињата на 16-те основни
бои се: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, sil-
ver, teal, white и yellow.
Боја на заднината
Бојата на заднината се дефинира со вредноста на својството background-color.
Пр. 4. 27. Со кодот:
<body style=”background-color:blue”>
<h2 style=”background-color:red”>This is a heading</h2>
<p style=”background-color:green”>This is a paragraph.</p>
</body>
ќе се добие следниов изглед на страницата:

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

Пр. 4. 28. Со кодот:
<body style=”background-color:#e6e6fа”>
<h2 style=”background-color:#f5f5f5”>Наслов</h2>
<p style=”background-color:#f0f8ff”>Пасус</p>
Заднина на страницата
</body>
ќе се добие следниов изглед на страницата
HTML

199
 Табелата со имињата и хексадецималните записи на боите можеш да ја
погледнеш на страницата http://www.w3schools.com/html/html_colornames.asp.
Кликни на некоја од боите за да видиш како изгледа текстот со бојата на таа заднина.
Зад. 4. 14. Отвори ја датотеката osnovna.html и зачувај ја со име pozadina.html.
Напиши текст со наслов, поднаслов и еден пасус. На сите елементи постави боја на
заднината по твој избор. Зачувај ја датотеката.

Фонтови
На фонтовите може да им се одреди видот, бојата, големината и сл.
Големината на буквите се дефинира во пиксели.
Пр. 4. 29. Со кодот
<body style=”background-color:#е6е6fa”>
<h1 style=”font-size:26px”>Наслов</h1>
<p style=”font-size:20px”>Текст во пасус</p>
</body>
насловот ќе се прикаже со големина на буквите од 26 пиксели, а текстот во
пасусот со големина на буквите од 20 пиксели.
Вообичаената боја на фонтовите е црна, но таа може да се смени со опцијата
color.
Пр. 4. 30. Со кодот:
<body style=”background-color:#е6е6fa”>
<h1 style=”font-size:26px; color:#4b0082”>Наслов</h1>
<p style=”font-size:20px; color:#7b68ee”>Пасус </p>
</body>
ќе се добие следниов изглед на страницата:

Забележуваш дека со атрибутот style можат да се наведат повеќе опции кои се

одделуваат со знакот точкаизапирка (;).
Видот на фонтот се дефинира со опцијата font-family.
Пр. 4. 31. Со кодот:
<body style=”background-color:#е6е6fa”>
<h1 style=”font-size:26px; color:#4b0082;
font-family:Verdana”>Наслов</h1>
<p style=”font-size:20px; color:#7b68ee;
font-family:Arial”>Пасус </p>
</body>
ќе се добие следниов изглед на страницата:
HTML

200
 Важно:
Фонтот ќе се прикаже само ако посетителот тој фонт го има инсталирано на својот
компјутер, инаку ќе се прикаже вообичаениот фонт. Овој проблем делимично
може да се реши со наведување на повеќе видови на фонтови: <p style=”font-
family:Arial, Helvetica, Verdana”>Текст</p>.

Израмнување на текст
Хоризонталното израмнување на текст се дефинира со опцијата text-align.
Пр. 4. 32. Со кодот:
<body style=”background-color:#e6e6fa”>
<h1 style=”font-size:26px; color:#4b0082; font-family:Verdana;
text-align:center”>Наслов</h1>
<p style=”font-size:20px; color:#7b68ee; font-family:Arial;
text-align:left”>Пасус </p>
</body>
ќе се добие следниов изглед на страницата:

Зад. 4. 15. Отвори ја датотеката osnovna.html и зачувај ја со име font.html.

Напиши текст со наслов, поднаслов и еден пасус. На сите елементи постави тип, боја
и големина на фонтот по твој избор. Насловите израмни ги во средина. Зачувај ја
датотеката.

За љубопитните:
Кога се користи внатрешен начин на стилови, се постигнува сите исти елементи
(на пр. сите пасуси) да се уредат на ист начин. За уредување во претходниот
пример, кодот изгледа вака:
<html>
<head>
<style type=”text/css”>
body {
background-color: #e6e6fa;
}
h1 {
font-size:26px;
color:#4b0082;
font-family:Verdana;
text-align:center;
}
p {
font-size:20px;
HTML

color:#7b68ee;
font-family:Arial;
text-align:left;
}

201
 </style>
</head>
<body>
<h1>Наслов</h1>
<p>Пасус </p>
</body>
</html>

Резиме
Постојат три начини за додавање на стилови во HTML-документот: а)
надворешен – стиловите се опишани во посебен CSS документ кој се повикува во
елементот <link> со впишување во блокот <head>; б) внатрешен – со користење
на елементот <style> во блокот <head>; в) линиски – со користење на атрибутот
style во HTML-елементите. Со атрибутот style се менуваат позадината, фонтот,
боите итн.
Во HTML боите се дефинираат со користење на хексадецимален запис со
комбинација на вредности на црвената, зелената и сината боја. Хексадецималниот
запис е дефиниран со три пара на двоцифрени броеви пред кои се става знакот #.
Во табелата се дадени најчесто користените опции за атрибутот style и нивниот
опис.
Опција Опис
background-color Ја дефинира бојата на заднината.
color ја дефинира бојата на буквите.
font-size Ја дефинира големината на буквите.
font-family Го дефинира видот на фонтот.
text-align Го дефинира израмнувањето на текстот.

Прашања:
1. На кои начини можат да се додадат стилови во HTML-документ!
2. Кои својства се дефинираат со атрибутот style?
3. Како се дефинираат боите во HTML-документ?
4. Како се дефинира бојата на заднината?
5. Како се дефинира бојата на буквите?
6. Како се дефинира големината на буквите?
7. Како се дефинира видот на фонтот?
8. Како се дефинира израмнувањето на текстот?
Проект:
Креирај папка во која ќе ги зачуваш сите датотеки – HTML-документи, слики
и други датотеки. Ќе креираш локација која ќе има најмалку четири веб-страници:
HTML

почетната страница (index.htm) и уште најмалку три страници. Одбери тема по твој
избор. Страниците ќе ги поврзеш така што од секоја страница може да се помине
на сите останати страници. На сите страници организирај ги елементите како што е
покажано на следнава слика. Ширината на табелата нека биде 800 пиксели.

202
 Слика (банер)
Соодветна порака

Хиперврска1 Содржина
Хиперврска1
Хиперврска1
Хиперврска1

Автор
На страниците треба да се најдат следниве елементи: наслов и поднаслови
од различни нивоа, навигација со хиперврски до сите страници, текст со најмалку
три пасуси и најмалку една слика, најмалку една хиперврска кон надворешна веб-
страница, најмалку една слика која ќе биде хиперврска.
Исправност на кодот може да се провери на веб-страницата validator.w3.org.
Посети ја страницата http://www.codecademy.com на која можеш интерактивно
да вежбаш HTML и CSS.

HTML

203
HTML

204