HTML (HyperText Markup Language)

1
 СОДРЖИНА
1. Општо за HTML.................................................................................................................1
2. SGML, HTML, XHTML и XML.................................................Error! Bookmark not defined.
3. HTML документи..............................................................................................................5
4. Основни правила во HTML................................................................................................8
5. Организирање на HTML документ.....................................................................................9
5.1 Заглавие и наслов...........................................................................................................11
5.2 Тело на документот........................................................................................................12
6. Форматирање на текст.....................................................................................................13
7. Графика во HTML............................................................................................................16
7.1 Вметнување линија........................................................................................................16
7.2 Вметнување слика..........................................................................................................17
8. Линкови...........................................................................................................................18
9. Листи...............................................................................................................................18
10. Табели............................................................................................................................21

2
 1. Општо за HTML

HTML всушност претставува јазик за дефинирање на Web документи т.е.

страници Тој ја дефинира синтаксата според која прелистувачот (browser) треба да ги
прикаже текстот, сликите и останатите содржини во еден документ т.е Web страница.

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

навигација низ нив. HTML е врската меѓу текстуалната датотека, која се создава во
текстуалниот уредувач на пример текст едиторот Notepad или со HTML алатка, и она
што може да се види кога ќе се погледне Веб страницата со пребарувач.

Веб страницата претставува текстуален докумeнт кој скоро секогаш во себе вклучува
форматирана информација и врски со други датотеки. Запишувањето на таа
специјална информација во текстуален документ се остварува со помош на специјални
текстуални низи, наречени тагови (маркери или ознаки). Нивниот формат и значење се
определуваат од спецификацијата, наречена HTML, HyperText Markup Language
или јазик за форматирање на хипертекст, односно хипертекстуален маркирачки јазик.

HTML е SGML апликација ( SGML - кратенка од англискиот назив: Structured

Generalized Markup Language ) развиена во 1991 година наменета за опишување на
Веб страници.
По појавата на првата верзија на HTML оформен е Конзорциумот W3C (World Wide
Web Consortium), со седиште во Бедрн, Швајцарија, кој дава препораки за изгледот на
HTML. Важно е почитувањето на нивните препораки, спецификации и стандарди .

Првите верзии на HTML на едно место ги обединувале структуралните и

презентациските елементи на страниците. Така, во изборниот код на страницата
можеле да се најдат заедно описот на бојата на позадината и на текстот и поделбата на
блокови, какви што се параграфите и насловите. Таквата комплексна организација е
надмината со раздвојувањето на структурата и презентацијата. Имено, на HTML му
остана само изградбата на структурата, а презентацискиот дел од Веб е ставен во
надлежност на CSS (Cascading Style Sheet).
CSS e јазик различен од HTML креиран за специфизирање на распоредувачките и
форматирачките елементи на различни HTML елементи во документот.

3
1. HTML документи

Од почетокот на развојот на HTML, односно на неговата синтакса (таговите) па

се до појавата на верзијата 3.0, скоро секој произведувач на прелистувачи измислувал
свои сопствени елементи (тагови) за да го направи сопствениот прелистувач што е
можно поинтересен и да обезбеди поголеми можности за презентација.
Денес веќе не е важно новите елементи да му изгледаат добро на авторот, туку
пред се на корисниците, односно посетителите на Веб страниците.
HTML документите всушност претставуваат едноставни текстуални датотеки
(ASCII) во кои се наоѓа текст надополнет со тагови.
Во документите можат да се вметнуваат слики, аудио и видео презентации и
линкови – внатрешни и надворешни (кон други документи).
Таговите кои ги користиме во HTML можеме да ги класифицираме во три основни
групи:

1. Тагови што користат мета информација за документот. Мета информацијата,

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

2. Тагови што ги форматираат симболите во текстот. Овие тагови не прават ништо

друго, освен што го менуваат начинот на изглед на текстот, кога пребарувачот го
покажува на екранот <B>, </B> и <I>, </I>

3. Тагови за врска. Овие тагови го поврзуваат корисникот со различни видови

информации или со други документи

4
Во продолжение следува табела со најчесто користените тагови при работа со HTML.

Тагови Место на користење на таговите

<html>, </html> Овие тагови заградуваат се што содржи
документот и го идентификуваат документот
како HTML
<head>, </head> Во почетокот на документот, од двете страни
на таговите <TITLE> и
</TITLE>.
<title>, </title> Од двете страни на краток наслов, кое го
опишува документот, но не се појавува на
екранот.
<body>, </body> По вклучување на таговите </TITLE> и
</HEAD>, за да го завршите насловот и
насловниот дел, сиот преостанат дел го
заградувате со таговите <BODY> и
</BODY>. Тагот <BODY> стои непосредно
по тагот </HEAD>, кој пак се наоѓа
непосредно по тагот </TITLE>.
<h1>, </h1> Главниот (првиот) наслов се поставува во
<h2>, </h2> почетокот на документот, меѓу таговите <h1>
и </h1>. Може да користите шест нивоа на
<h3>, </h3>
наслови; истите се специфизираат со
<h4>, </h4> броевите: 1, 2, 3, 4, 5 и 6. Поголемиот број
<h5>, </h5> документи имаат само еден наслов од
<h6>, </h6> највисоко ниво <h1>.
<b>, </b> Делот од текстот кој сакате да има
задебелени букви го заградувате со овие
тагови.
<i>, </i> Делот од текстот кој сакате да има искосени
букви го заградувате со овие тагови.
<p>, </p> Тагот за крај на параграф не е неопходен за
крај на наслов, за крај на листа, како и на
некои други места, додека на поголемиот
број места мора да биде вклучен.
<hr> Тагот за хоризонтална линија креира
хоризонтална линија за поделба на секциите
во документот.
<a>, </a> Таговите за означување на место (котва),
дефинираат хипертекстуални врски и
содржат хипертекстуални препратки -
информација за тоа каде треба да води
врската. Меѓу овие тагови се поставува
текстот на врската, секогаш потцртан, што

5
 укажува дека станува збор за
хипертекстуална врска.
<br>, </br> Таг за премин на нов ред

2. Основни правила на пишување HTML документ

При работа во HTML мора да почитувате одредени правила. Во продолжение ќе

наведеме дел од нив.
• Повеќето HTML тагови се среќаваат во парови.

6
 - ако сакате задебелени букви, треба да поставите <b> на почетокот на текстот и
</b> на крајот на текстот. Ако не постапите така тогаш сигурно нема целиот текст да
биде со задебелени буквич
- пред публикување на документот мора да проверите дали постојат тагови кои
не се појавуваат во пар.
• HTML таговите се пишуваат исклучиво со мали букви, иако во поранешните
верзии на HTML беа користени исклучиво големи букви

• Базичниот HTML изгледа различно на различни пребарувачи.

• Некои тагови не работат во некои пребарувачи.

Некои пребарувачи, како на пример Netscape Navigator, поддржуваат тагови кои не

можат да се обработуваат од други пребарувачи.
Корисниците ги конфигурираат своите пребарувачи на различни начини .

3. Организирање на HTML документ

HTML документите треба да содржат само чист текст, без форматирање од

страна на програма за обработка на текст. Името на HTML документот секогаш треба
да завршува со наставката .html (или .htm). Така започнува создавањето на текстуална
датотека, во која што се наоѓа текстот на Вашата Веб страница и HTML таговите.

7
 За да создадете празен документ со чист текст, во кој ќе биде вметнат Вашиот
HTML код, постапете според следниве инструкции:
1. Стартирајте текстуален уредувач или програма за обработка на текст на
пример програмата Notepad .
2. Отворете нов документ.
3. Стартирајте го процесот за запис на Вашиот документ, така што ќе може
да го именувате.
4. Именувајте го документот. Пример primer1.html.
5. Зачувајте го документот на дискот.
6. Разгледајте го документот преку прелистувачот Internet Explorer. Ако
наставката на документот е .htm или .html, тогаш прелистувачот автоматски го
препознава документот како HTML документ.

Следува пример на изглед на еден HTML документ.

8
-заглавие и наслов

Заглавието на документот е означено со тагот <head>. Тоа содржи информации

кои го опишуваат документот. Овој таг е без атрибути и служи како контејнер за
другите тагови кои се карактеристични за овој дел од документот.
Секој HTML документ мора да содржи наслов. Тагот <title> е најчесто
користениот таг во овој дел на документот. Со него се одредува насловот на
документот, што всушност се користи за идентификација на различните документи.

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

прозорец, а го користат и за прикажување на резултатите од прелистувањата. На
пример:
<title>mojata prva web strana</title>

Пред насловот на текстот се запишува тагот <title> кој означува почеток на насловот, а
по насловот го пишуваме тагот </title> за крај. Насловот треба да биде поставен на
почетокот на документот.
Се препорачува насловите на документите да не се подолги од 64 знаци .Покрај
насловот, во заглавието на документот се користат и уште неколку тагови.

Таг Функција

9
 link поврзување на документот со други
документи
meta специфицирањето на клучните
зборови и описи кои им помагаат на
прелистувачите на страници

- тело на документот
Тело на документот претставува неговата содржина, односно видливиот дел на
документот кој се прикажува преку прелистувачот. Телото на документот секогаш се
наоѓа меѓу таговите <body> и </body>. Тоа може да содржи текст, слики и други
елементи кои можат да се вметнуваат во документот.
Во продолжение е дадена табела со неколку атрибути на тагот <body>, како и табела со
боите и нивните RGB вредности
Атрибут Функција Предефинирана
вредност
bgcolor подесување на бојата на позадината на
страницата
text подесување на бојата на црна
текстот
link специфицирање на бојата на сина
врските (линковите)

vlink специфицирање на бојата на виолетова

веќе активираните
(кликнати) врски

alink специфицирање на бојата на црвена

активните врски, односно
врските кои во моментот се
кликнуваат
Црна= "#000000" Темно зелена= "#008000"
Сребрена = "#C0C0C0" Светло зелена= "#00FF00"
Сива = "#808080" Маслинеста = "#808000"
Бела = "#FFFFFF" Жолта = "#FFFF00"
Цигла = "#800000" Темно сина = "#000080"
Црвена = "#FF0000" Сина = "#0000FF"
Виолетова = "#800080" Зелена = "#008080"
Розева = "#FF00FF" Резеда = "#00FFFF
Следниот пример ги илустрира следниве елементи на страницата: жолта позадина, бел
текст, црни линкови, темно сини посетени врски и црвени активни врски.
<body bgcolor="&ffff00" text="&ffffff" link="&000080" vlink="&ffff00">

10
HTML овозможува за позадина на страницата да користиме слика. Нејзината употреба
се специфизира во тагот <body>, при што на атрибутот background му се доделува
името на сликата во некој од графичките формати. На пример, slika2.gif.

<body background="slika2.gif">

- форматирање на текст
Текстот е најчесто употребуваниот елемент во HTML страниците. Неговото
форматирање не е идентично со форматирањето во уредувачите на текст или
програмите за обработка на текст. HTML текстот треба да биде подготвен за
прикажување на различни платформи, во различни услови и на различни монитори.
Основните елементи на форматирањето на текстот се параграфите и заглавијата
(headings) кои уште се познати и под името блок елементи.
Преминот во нов ред се остварува со примена на тагот <br>. Параграфите
претставуваат текст помеѓу два нови редови. Секој параграф е ограничен со таговите
<p> и </p>.
Заглавијата служат за издвојување на логичките целини од документот, но имаат и
визуелна функција. Тие претставуваат текстуални блокови кои функционално се
еднакви со текстот од параграфите, но се разликуваат од него по однапред
дефинираната големина и задебеленост. Како што можеше да се види од табелата со
таговите, постојат шест нивоа на заглавија, при што оној со големина 1 е запишан со
најголеми знаци. Иако според HTML стандардите, заглавијата секогаш треба да се
употребуваат редоследно, со развојот на дополнителните начини за форматирање на
текст, поголемиот дел од прелистувачите непочитувањето на ова правило не го
регистрираат како грешка во HTML кодот.
<html>
<head>
<title> шест видови на заглавиа</title>
</head>
<body>
<h1>Ниво 1</h1>
<p>ова е заглавие од прво ниво</p>
<h2>ниво 2</h2>
<p>ова е заглавие од второ ниво</p>
<h3>ниво 3</h3>
<p>ова е заглавие од трето ниво</p>
<h4>ниво 4</h4>
<p>ова е заглавие од четврто ниво</p>
<h5>ниво 5</h5>
<p>ова е заглавие од пето ниво</p>
<h6>ниво 6</h6>
<p>ова е заглавие од шесто ниво</p>
<body>
</html>

11
Таг Опис Таг Опис
<abbr> Кратенка <ins> Вметнат текст
<acronym> Акроним <kbd> Машина за
пишување
<cite> Цитат <q> Вметнат цитат
<code> Програмски код <samp> Пример
<del> Избришан текст <span> Растојание
<div> Дел <strong> Зајакнат
<em> Нагласен <var> Променлива

Физичките стилови служат за специфицирање на начинот на приказ на текстот. Со

помош на овие тагови се контролира големината на текстот, употребата на задебелен
или курзивен текст. Во следната табела се дадени најчесто користените физички
стилови, со нивниот опис и функција:
Таг Опис Функција

12
 <b> Болд Задебелен текст
<big> Голем Зголемен текст за 1
<blink> Трепкав Текст што трепка
(само за Nescape
Navigator)
<font> Фонт Атрибути на фонтот
<i> Италик Закосен
(курзивен)
текст
<s> Прецртан Прецртан текст
<small> Мал Намален текст за 1
<strike> Прецртан Прецртан текст
<sub> Индекс Намален текст под
линијата
<sup> Степен Намален текст над
линијата
<tt> Терминал Непропорционален
текст
<u> Подвлечен Подвлечен текст

Најчесто користен физички стил е тагот <font>. Тој служи за подесување на видот,
големината и бојата на фонтот:
<font face="ime na fontot" color="bojata na fontot" size="goleminata na font">
Треба да се напомене дека овој таг се смета за застарен и дека треба да им го
отстапува местото на каскадните стилови.
Параметaрот size ги прима вредностите од 1 до 7. Основната големина обично
изнесува 3. Таа може да се промени со тагот <basefont>. Специфизирањето на
големината е всушност релативна промена на големината во однос на основната
големина.

13
4. Графика во HTML

Веб страната од почетокот е замислена како комбинација на мултимедијални

елементи (текст, линии, статични слики, анимации, аудио и видео презентации) и
врски (линкови). Графичкиот дизајн е еден од најважните работи при градењето на Веб
страница, односно HTML страница. Графиката на Веб може да се користи на неколку
начини: како илустрација на она за што зборувате, како украсен елемент во вид на
позадинска илустрација или како замена за текстуален линк.
Трите најпопуларни формати за прикажување на графика на Веб денес се: JPEG,
GIF и PNG. Заедничко за сите овие формати е можноста за компресија на содржината
што овозможува побрз пренос на сликите. За приказ, прегледувачите ги
декомпресираат сликите во текот на прикажувањето.

4.1 Вметнување линија

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

елемент поддржан од HTML стандардот, се користи тагот <hr>. Овој таг вклучува
повеќе атрибути преку кои се контролира изгледот на линијата:

Атрибут Функција
size регулирање на дебелина на
линијата во точки
width контрола на дебелината на
линијата
align порамнување на линијата
noshade исклучување на 3-Д приказ

4.2 Вметнување слика

При дизајнирање на Веб страници, сликите можат да се користат како статички

графици (слики, цртежи или фотографии), навигациони елементи или пак за
пополнување на место. За вметнување на слика во HTML документ се користи тагот
<img>. Ако во истиот именик каде што се наоѓа HTML документот имаме слика, на
пример, зачувана под името "slika1.jpg", тогаш истата ја вметнуваме во документот на
следниов начин:
<img src="slika1.jpg" width="200" height="150">
Притоа ги специфизираме и нејзините димензии: широчина и височина.
Ако сликата не се наоѓа во спомнатиот именик, тогаш на атрибутот src мора да му ја
специфизираме комплетна адреса на сликата.

14
Покрај атрибутот src, може да го користиме и атрибутот alt, кој дава краток опис на
сликата.
<img src="slika1.jpg" width="200" height="150"alt="Слика зима">
За некои слики, потребен е подолг опис. Истиот го запишуваме во друг HTML
документ и го зачувуваме, на пример под името: maturska.html.
<img src="slika1.jpg" width="200" height="150" alt="Слика-зима"
longdesc="zima.html">

Атрибут Функција предефинирана вредност

src локација на сликата

alt краток опис на сликата

border регулирање на 0, односно нема рамка

дебелината на рамката
околу сликата
width специфизирање на широчина

height специфизирање на височина

align порамнување на bottom (другите вредности се:

текстот околу сликите top и middle

5. Линкови
Она што го прави Веб толку ефективен е способноста да бидат дефинирани
линкови во рамките на една страница или од една страница кон други страници, како и
следењето на линковите со едноставно кликнување со глувчето.

15
 Линковите се дефинирани со тагот <a>. Негов основен атрибут атрибутот href,
кој служи за специфизирање на адресата кон која покажува врската. Ако сакаме, на
пример, да дефинираме линк до страницата дефинирана во датотеката "sofija.html",
тогаш го пишуваме следново:
<a href="sofija.html">Веб страницата на Софија </a>.
Текстот помеѓу таговите <a> и </a> се користи како натпис (наслов) за линкот.
Вообичаено е натписот да содржи потцртан текст со сини знаци.
За поврзување со страница која припаѓа на друг Веб сајт потребно е да се наведе
неговата комплетна Веб адреса (позната уште како URL (униформна локација на
ресурсите) адреса). Така на пример, ако сакаме да поставиме линк до сајтот на
Институтот за информатика, тогаш пишуваме:
<a href="http://www.ii.edu.mk">Институт за информатика</a>.
Исто така можете да ја претворите сликата во хипертекстуален линк. На пример, ако
сакате со кликнување врз логото на Институтот да пристапите на почетната страница,
тогаш пишуваме:
<a href="/"><img src="logoto.gif" alt="Почетна страница "></a>

6. Листи
Листите и нивните членови се блок елементи, исто како и параграфите и заглавијата.
Ова значи дека пред и по нив автоматски се додаваат празни места и секој од нив
започнува во нов ред.
HTML поддржува три вида на листи:
•ненумерирани листи или листи со точки (на англ. bulletted list или unordered list),
•нумерирани или подредени листи (на англ. numbered list или ordered list).
•листи со дефиниции.
Ненумерираните листи се користат кога не е важен редоследот на елементите.
Пред секој елемент автоматски се поставува симбол (bullet), кој може да биде полн
круг, празен круг или квадрат. За избор на типот на симболот се користи параметарот
type, кој може да ги прими следниве вредности: disc, circle или square. Во случај да не
биде наведен параметарот, предефинирана вредност е disc. Во рамките на една листа
може да комбинираме различни симболи, со примена на параметарот type во таговите
<ul> (за секој елемент од листата) и <li> (само за конкретниот елемент) Тие ги користат
таговите <ul> (за означување на листата) и <li> (за специфизирање на елементите на
листата):

<ul>
<li>Првиот елемент од листата</li>
<li>Вториот елемент од листата</li>

16
<li>Третиот елемент од листата</li>
</ul>
Да забележиме дека на крајот на секоја листа завршува со тагот </ul>.
Нумерираните листи се користат кога е важен редоследот на елементите. Таму
пред секој елемент од листата се појавува реден број. При креирањето на
нумерираните листи може да се користи параметарот type, кој може да ги прими
следниве вредности: 1 (следните елементи имаат редни броеви 2,3,...), A (B, C, ...), a
(b,c,...), I (II, III, ...) или i (ii, iii, ...), што означува користење на арапски цифри, големи и
мали букви од латинската азбука, големи и мали римски цифри, соодветно. Ако не се
употреби параметарот type, автоматски се активираат арапските цифри, како
предефинирана вредност.
Кај нумерираните листи се користат таговите <ol> и <li>:
<ol>
<li>Првиот елемент од листата</li>
<li>Вториот елемент од листата</li>
<li>Третиот елемент од
листата</li> </ol>
На крајот на листата мора да го ставите тагот </ol>.
Покрај тоа, важно е да се нагласи дека набројувањето не мора да започне со првиот
број или буква од азбуката. Тоа се постигнува со доделуваењ на соодветната вредност
на атрибутот start на тагот <ol>, од која сакаме да започне набројувањето.
Третиот, последен вид на листи се листите со дефиниции. Кај нив овозможено е
прикажување (листање) на елементите и на нивните дефиниции. Овој вид на листи
започнува со тагот <dl> и завршува со тагот </dl>. Секој елемент започнува со тагот
<dt>, а секоја дефиниција со тагот <dd>:
<dl>
<dt> Првиот елемент од листата</dt>
<dd>Дефиниција на првиот елемент од
листата</dd>
<dt> Вториот елемент од листата </dt>
<dd> Дефиниција на вториот елемент од листата
</dd>
<dt> Третиот елемент од листата </dt>
<dd> Дефиниција на третиот елемент од листата
</dd> </dl>
Важно е да се нагласи дека листите можат да бидат вгнездени една во друга. На
пример:
<ol>
<li> Првиот елемент од листата </li>

17
<li>
Вториот елемент од листата
<ul>
<li>Првиот вгнезден елемент </li>
<li>Вториот вгнезден елемент</li>
</ul>
</li>
<li>Третиот елемент од листата</li>
</ol>
Пример за листа :
<html>
<head>
<title>Примери на листи </title>
</head>
<body>Предмети
<ul>
<li>1.Математика</li>
<li>2.Маkeдонски</li>
<li>3.Програмски јазици</li>
<li>4.Физика</li>
</ul>
Oчекувани одценки :
<ol>
<li>1. 5 Пет</li>
<li>2. 5 Пет </li>
<li>3. 5 Пет </li>
<li>4. 5 Пет </li>
</ol>
</body>
<html>

18
7. Табели

19
 Табелите, кои се составен дел на поновите верзии на HTML, овозможуваат
прикажување на информација, но истовремено претставуваат и начин на организација
на елементите на една Веб страница или на еден нејзин дел (порамнување и
уредување на текстот, креирање на готови обрасци, креирање страници со повеќе
колони, како контејнери за слики и др.). Секоја табела се состои од редици и колони во
чии пресеци се наоѓаат основните организациони единици на табелите – ќелиите.
Контролата на карактеристиките на прикажување може да биде на ниво на цела
табела, на цел ред или на поединечни ќелии.
Следува пример на едноставна табела со четири редици и две колони.
<table border="1">
<tr><th>Година</th><th>Бр. на
студенти</th></tr>
<tr><td>2004</td><td>157</td></tr>
<tr><td>2005</td><td>243</td></tr>
<tr><td>2006</td><td>187</td></tr>
</table>

20
21
22