Методија Јанчески

Прирачник

за

HTML (HyperText Markup Language)

верзија 4.01

Скопје, 2006 година

1

СОДРЖИНА 1. Општо за HTML .......................................................................................... 3

2. SGML, HTML, XHTML и XML................................................................ 4

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

4. Основни правила во HTML ...................................................................... 9

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

5.1 Заглавие и наслов................................................................................ 12

5.2 Тело на документот ............................................................................. 12

6. Форматирање на текст............................................................................. 14

7. Графика во HTML .................................................................................... 17

7.1 Вметнување линија ............................................................................. 18

7.2 Вметнување слика............................................................................... 19

8. Линкови ...................................................................................................... 20

9. Листи ........................................................................................................... 21

10. Табели........................................................................................................ 24

11. Форми ........................................................................................................ 28

12. Пример на Веб страница изработена во HTML ................................ 30

2

1. Општо за HTML

Веб страницата претставува текстуален докумeнт кој скоро секогаш во

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

Запишувањето на таа специјална информација во текстуален документ се

остварува со помош на специјални текстуални низи, наречени тагови (маркери

или ознаки). Нивниот формат и значење се определуваат од спецификацијата,

наречена HTML, HyperText Markup Language или јазик за форматирање на

хипертекст, односно хипертекстуален маркирачки јазик.

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

Тој ја дефинира синтаксата и го инструира прелистувачот (browser) како да ги

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

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

и овозможува лесна навигација низ нив. HTML е врската меѓу текстуалната

датотека, која се создава во текстуалниот уредувач или со HTML алатка, и она

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

Веб документите можат да се креираат во секој текстуален уредувач или

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

обичен текст, во кој нема фонтови, задебелен текст, искосени букви или

стилови. Кога се запишува датотека во текстуален уредувач, таа се запишува

како чист текст без кодови за форматирање. Но, факт е дека денес Вие може да

правите Веб сајтови и со никакво познавање на HTML, преку користење на

алатки за визуелно креирање и обработка на Веб страници, кои ги “кријат”

HTML таговите, односно HTML кодот. Овие алатки, кои се познати и по името

WYSIWYG (What You See Is What You Get) уредувачи врз основа на

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

форматирањето на текстот во тој документ, автоматски генерираат HTML

датотеки. Предноста на овие алатки е ослободување од постојаното пишување

на таговите и креирање на документи без претходно познавање на самиот

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

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

презентации. Затоа многу корисно е базичното познавање на HTML.

3

2. SGML, HTML, XHTML и XML

Структурираниот општ маркирачки јазик SGML (кратенка од англискиот

назив: Structured Generalized Markup Language) е мајка на сите маркирачки

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

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

HTML е SGML апликација развиена во 1991 година наменета за

опишување на Веб страници. По појавата на првата верзија на HTML оформен е

Конзорциумот W3C (World Wide Web Consortium), со седиште во Бедрн,

Швајцарија, кој дава препораки за изгледот на HTML. Важно е почитувањето на

нивните препораки, спецификации и стандарди, бидејќи тоа е гаранција за

меѓусебно разбирање и соработка меѓу авторите.

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

на SGML, во 1996, XML работната група на W3C (World Wide Web Consortium)

развила негово ново множество, односно нов стандард, познат под името XML

(Extensible Markup Language), дизајниран за испорака на информација преку

Веб. Така XML стана поедноставена верзија на SGML оптимизирана за Веб.

XML синтаксата нуди помалку можности отколку SGML, но на корисниците го

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

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

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

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

информации на Веб, а специјално е наменет за олеснување на имплементацијата

и интероперабилноста со SGML и HTML.

И HTML и XML на различни начини потекнуваат од SGML. Иако SGML

дефинира основна синтакса, тој на корисниците им овозможува креирање и на

сопствени елементи. Оттука доаѓа називот општ. Според Дејвид Мегинсон, еден

од најпознатите развивачи од светот на XML, SGML “е метод за креирање на

заменливи, структурирани документи”. SGML може да се користи за:

• “Склопување на единичен документ од повеќе извори (како SGML

фрагменти, документи на програми за обработка на текст, прашања за база на

податоци, графици, видео материјал и податоци во реално време)”

4

• “Дефинирање на структура на документ со користење на специјална

граматика наречена Document Type Definition (DTD). DTD е важен дел од XML,

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

и воопшто за документот

• “Додавање на маркери за прикажување на структурална единица во

документот”

• “Валидација дека документот ја следи структурата дефинирана во

DTD”.

HTML е дизајниран за содржини кои треба да бидат испратени до

пребарувач, но не е добар за испраќање на содржина до други медиуми, како на

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

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

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

информација преку Веб. Иако HTML е наједноставниот јазик за креирање на

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

За разлика од него, XML има високо флексибилна синтакса која овозможува

виртуелно опишување на произволна информација од различен вид, од

едноставни рецепти, па се до сложени бази на податоци.

Најновата верзија на HTML е 4.01 е истовремено и последна бидејќи

тенденција е изградбата на структурата да му се префрли на XML. За да се

олесни преминот, оформен е преоден стандард XHTML, чија последна верзија е

1.1. XML, односно проширениот HTML, во целост е заснован на HTML 4.01. Во

себе вклучува елементи кои не се среќаваа во HTML. Всушност XML ги

поставува следниве барања:

• сите елементи и атрибути да бидат напишани со мали букви;

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

порано беше опционално, како на пр. <p>, </p> и <li>, </li>;

• и таканаречените празни елементи мора да бидат затворени, што значи

дека сега мора да ги вклучуваме во кодот и </br>, </hr>;

• сите атрибути и вредности мора да бидат ставени во наводници;

Пр. <img source=”slika.jpg” alt=”Slika na prirodata”/>.

5

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

презентациските елементи на страниците. Така, во изборниот код на страницата

можеа да се најдат заедно описот на бојата на позадината и на текстот и

поделбата на блокови, какви што се параграфите и насловите. Таквата

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

презентацијата. Имено, на HTML му остана само изградбата на структурата, а

презентацискиот дел од Веб е ставен во надлежност на CSS (Cascading Style

Sheet).CSS e јазик различен од HTML или XHTML, креиран за специфизирање

на распоредувачките и форматирачките елементи на различни HTML елементи

во документот.

HTML 4.01 и XHTML 1.1 се појавуваат во следниве три варијанти: Strict,

Transitional и Frameset.

• Strict се користи кога сакаме потполно чиста структура без никакви

елементи поврзани со презентација. Притоа, се што е поврзано со изгледот

треба да се префрли во CSS. HTML или XHTML само го делат документот на

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

ќе изгледаат. Контролата за изгледот е всушност улога на CSS.

• Transitional се препорачува кога се пишуваат страници за најбројната

категорија на корисници, каде припаѓаат и оние кои користат стари верзии на

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

приказ. Тука можат да се користат атрибути поврзани со презентација, какви

што се: bgcolor, text и link за елемент body.

• Frameset се користи кога сакате Веб страницата да се прикаже со рамки.

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

варијанта не е препорачлива за почетници.

6

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

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

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

прелистувачи измислувал свои сопствени елементи (тагови) за да го направи

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

можности за презентација. Да нагласиме дека денес веќе не е важно новите

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

односно посетителите на Веб страниците.

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

датотеки (ASCII) во кои се наоѓа текст надополнет со тагови. HTML

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

причина масовно да бидат користени од голема група корисници. Покрај тоа,

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

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

внатрешни и надворешни (кон други документи).

Таговите кои ги користиме во HTML можеме да ги класифицираме во три

основни групи:

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

информацијата, на пример, насловот во почетната секција на Вашиот документ,

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

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

разберат за што станува збор во Вашиот документ.

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

не прават ништо друго, освен што го менуваат начинот на изглед на Вашиот

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

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

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

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

HTML.

7

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

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

<head>, </head> Во почетокот на документот, од двете страни на таговите <TITLE> и </TITLE>.

<title>, </title> Од двете страни на краток наслов, кое го опишува документот, но не се појавува на екранот.

<body>, </body> По вклучување на таговите </TITLE> и </HEAD>, за да го завршите насловот и насловниот дел, сиот преостанат дел го заградувате со таговите <BODY> и </BODY>. Тагот <BODY> стои непосредно по тагот </HEAD>, кој пак се наоѓа непосредно по тагот </TITLE>.

<h1>, </h1>

<h2>, </h2>

<h3>, </h3>

<h4>, </h4>

<h5>, </h5>

<h6>, </h6>

Главниот (првиот) наслов се поставува во почетокот на документот, меѓу таговите <H1> и </H1>. Може да користите шест нивоа на наслови; истите се специфизираат со броевите: 1, 2, 3, 4, 5 и 6. За почетници не е препорачливо да користите повеќе различни нивоа на наслови во ист HTML документ. Поголемиот број документи имаат само еден наслов од највисоко ниво <H1>.

<b>, </b> Делот од текстот кој сакате да има задебелени букви го заградувате со овие тагови.

<i>, </i> Делот од текстот кој сакате да има искосени букви го заградувате со овие тагови.

<p>, </p> Тагот за крај на параграф не е неопходен за крај на наслов, за крај на листа, како и на некои други места, додека на поголемиот број места мора да биде вклучен. Ако ги исклучиме таговите за врска (<A> и </A>), тагот <P> најчесто се користи неправилно. Овој таг не е задолжителен за почетници.

<hr> Тагот за хоризонтална линија креира хоризонтална линија за поделба на секциите во документот.

<a>, </a> Таговите за означување на место (котва), дефинираат хипертекстуални врски и содржат хипертекстуални препратки - информација за тоа каде треба да води врската. Меѓу овие тагови се поставува текстот на врската, секогаш потцртан, што укажува дека станува збор за хипертекстуална врска.

<br>, </br> Таг за премин на нов ред

8

4. Основни правила во HTML

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

наведеме дел од нив.

• Повеќето HTML тагови се среќаваат во парови.

- ако сакате задебелени букви, треба да поставите <b> на почетокот на

текстот и </b> на крајот на текстот. Ако не постапите така тогаш сигурно нема

целиот текст да биде со задебелени буквич

- пред публикување на документот мора да проверите дали постојат тагови

кои не се појавуваат во пар.

• HTML таговите се пишуваат исклучиво со мали букви, иако во

поранешните верзии на HTML беа користени исклучиво големи букви

Пример: <a href=”informatika.htm”>Текст </a>

Таговите a, /a и href се напишани со големи букви. Името на датотеката е со

мали букви (така е прифатено во UNIX и Linux, за да не се појават проблеми во

случај Веб страницата да ја поставиме на UNIX или Linux сервер). Текстот меѓу

таговите кој се појавува на Веб страницата како хипертекст, односно како текст

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

сакате да го видат читателите на Веб страницата.

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

имињата на датотеките, бидејќи, компјутерите кои работат во UNIX, на пример,

ги разликуваат големите од малите букви. Притоа често се случува Вашите Веб

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

создавате.

• HTML ги игнорира симболите за крај на параграф и табулациите во

текстот.

Една од најзбунувачките работи при работа со HTML е дека симболот за

крај на параграфот, кој се создава со притискање на тастерот Enter, се игнорира.

Истото се случува и со табулациите. Кога прикажува UNIX и Linux код ,

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

актуелните димензии на прозорецот. Тој го прекинува параграфот само ако види

9

таг за параграф <p> или некој друг таг, кој претпоставува почеток на нова ред.

На пример, тагот за наслов <h1>.

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

Базичниот HTML не дава големи можности за контролирање на видот на

Вашиот документ, иако секоја нова верзија на HTML овозможува повисок

степен на контрола од претходните. Како илустрација на тоа, доволно е да се

види дека насловот на највисоко ниво, прикажан со таговите <h1> и </h1> може

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

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

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

кои не можат да се обработуваат од други пребарувачи.

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

10

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

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

од страна на програма за обработка на текст. Името на HTML документот

секогаш треба да завршува со наставката .html (или .htm). Така започнува

создавањето на текстуална датотека, во која што се наоѓа текстот на Вашата Веб

страница и HTML таговите.

За да создадете празен документ со чист текст, во кој ќе биде вметнат

Вашиот HTML код, постапете според следниве инструкции:

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

2. Отворете нов документ.

3. Стартирајте го процесот за запис на Вашиот документ, така што ќе може

да го именувате.

4. Именувајте го документот. Пример test.html.

5. Зачувајте го документот на дискот.

6. Разгледајте го документот преку прелистувачот Internet Explorer. Ако

наставката на документот е .htm или .html, тогаш прелистувачот автоматски го

препознава документот како HTML документ.

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

<html>

<head>

<title>Насловот на вашата страница </title>

</head>

<body>

Овде го поставувате вашиот html документ.

</body>

</html>

11

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

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

како контејнер за другите тагови кои се карактеристични за овој дел од

документот.

Секој HTML документ мора да содржи наслов. Тагот <title> е најчесто

користениот таг во овој дел на документот. Со него се одредува насловот на

документот, што всушност се користи за идентификација на различните

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

линија на својот прозорец, а го користат и за прикажување на резултатите од

прелистувањата. На пример:

<title>Мојот прв HTML документ</title>

Пред насловот на текстот се запишува тагот <title> кој означува почеток на

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

биде поставен на почетокот на документот.

Се препорачува насловите на документите да не се подолги од 64 знаци и да

соодветствуваат на содржината на страницата.

Покрај насловот, во заглавието на документот се користат и уште неколку

тагови.

Таг Функција

base специфицирање на базната адреса за релативно поврзување (види врски)

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

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

5.2 Тело на документот Тело на документот претставува неговата содржина, односно видливиот

дел на документот кој се прикажува преку прелистувачот. Телото на документот

секогаш се наоѓа меѓу таговите <body> и </body>. Тоа може да содржи текст,

слики и други елементи кои можат да се вметнуваат во документот.

12

Во продолжение е дадена табела со неколку атрибути на тагот <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">

HTML овозможува за позадина на страницата да користиме слика. Нејзината

употреба се специфизира во тагот <body>, при што на атрибутот background му

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

slika2.gif.

<body background="slika2.gif">

13

6. Форматирање на текст

Текстот е најчесто употребуваниот елемент во HTML страниците.

Неговото форматирање не е идентично со форматирањето во уредувачите на

текст или програмите за обработка на текст. HTML текстот треба да биде

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

различни монитори. Основните елементи на форматирањето на текстот се

параграфите и заглавијата (headings) кои уште се познати и под името блок

елементи.

Преминот во нов ред се остварува со примена на тагот <br>. Параграфите

претставуваат текст помеѓу два нови редови. Секој параграф е ограничен со

таговите <p> и </p>.

Заглавијата служат за издвојување на логичките целини од документот,

но имаат и визуелна функција. Тие претставуваат текстуални блокови кои

функционално се еднакви со текстот од параграфите, но се разликуваат од него

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

види од табелата со таговите, постојат шест нивоа на заглавија, при што оној со

големина 1 е запишан со најголеми знаци. Иако според HTML стандардите,

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

дополнителните начини за форматирање на текст, поголемиот дел од

прелистувачите непочитувањето на ова правило не го регистрираат како грешка

во HTML кодот.

14

На крајот вреди да се споменат и тн.

стилски тагови кои се однесуваат на

стилот на приказ на текстот, но не и на

структурата. Стилските тагови според

намената се делат на логички и на

физички.

• Логичките стилови служат за

опишување на значењето

односно содржината на текстот.

Овие тагови го специфизираат

видот на определен дел од

текстот. Следува табела со

таговите за некои логички

стилови, заедно со нивниот

опис.

Таг Опис Таг Опис

<abbr> Кратенка <ins> Вметнат текст

<acronym> Акроним <kbd> Машина за пишување

<cite> Цитат <q> Вметнат цитат

<code> Програмски код <samp> Пример

<del> Избришан текст <span> Растојание

<div> Дел <strong> Зајакнат

<em> Нагласен <var> Променлива

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

текстот. Со помош на овие тагови се контролира големината на текстот,

15

употребата на задебелен или курзивен текст. Во следната табела се

дадени најчесто користените физички стилови, со нивниот опис и

функција:

Таг Опис Функција

<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>. Специфизирањето на

големината е всушност релативна промена на големината во однос на основната

големина.

Во овој контекст е и тагот <basefont>, кој не е дел од стандардите или се смета

за застарен, но сепак е поддржан од повеќето прегледувачи. Тагот <basefont>

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

тој ги специфизира ќе се однесуваат само на делот од текстот и таговите што

следуваат по него во документот.

16

7. Графика во HTML

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

елементи (текст, линии, статични слики, анимации, аудио и видео презентации)

и врски (линкови). Графичкиот дизајн е еден од најважните работи при

градењето на Веб страница, односно HTML страница. Графиката на Веб може

да се користи на неколку начини: како илустрација на она за што зборувате,

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

текстуален линк.

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

се: JPEG, GIF и PNG. Заедничко за сите овие формати е можноста за

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

прегледувачите ги декомпресираат сликите во текот на прикажувањето.

• JPEG е стандард кој настанал како резултат на работата на групата

Joint Photographic Experts Group. Тоа е всушност техника на компримирање на

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

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

Колку е поголема компресијата, се губат се повеќе детали, но без видливи

промени за човековото око. Датотеките на овој формат имаат наставка .jpg. JPG

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

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

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

сајтот.

• GIF или Graphic Interchange Format, е формат наменет за

прикажување на едноставна графика. Од JPEG се разликува по тоа што може да

прикажува само 256 бои, па е непогоден за прикажување на фотографии. Од

друга страна, одлично прикажува поголеми површини со иста боја и црно бели

илустрации. Големината на GIF датотеката (со наставка .gif) е значително

помала од онаа на JPEG датотеката. GIF форматот поддржува и транспаренција,

односно не ја прикажува бојата која е избрана за проѕирна, а по воведувањето на

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

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

друга.

17

• PNG, или Portable Network Graphics, денес е се позастапен и

попопуларен. Настана како реакција на проблемите со лиценцирање на GIF

форматот. PNG постои во две варијанти 8-битна и 24–битна. Покрај компресија,

PNG форматот овозможува чување на дополнителни информации, со што

овозможува поголема преносливост (изгледот на сликите да не се менува

драстично на различни видео конфигурации).

Предноста во однос на претходните два формати се состои во што се

карактеризира со:

− алфа транспарентност (alpha transparency) или варијабилна

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

проѕирни или непроѕирни, без премин;

− гама исправка (gamma correction), што значи еднаква светлина на

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

− нема загуба на податоци при компресија (lossless).

Недостаток на овој формат е што во ниеден прелистувач не постои целосна

поддршка за него. Од познатите прелистувачи, на пример, Internet Explorer има

големи проблеми со правилно прикажување на овој формат. Се смета дека на

овој формат му претстои иднина на Веб.

7.1 Вметнување линија За вметнување на хоризонтална линија, што претставува наједноставниот

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

таг вклучува повеќе атрибути преку кои се контролира изгледот на линијата:

Атрибут Функција

size регулирање на дебелина на линијата во точки

width контрола на дебелината на линијата

align порамнување на линијата

noshade исклучување на 3-Д приказ

18

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

статички графици (слики, цртежи или фотографии), навигациони елементи или

пак за пополнување на место. За вметнување на слика во HTML документ се

користи тагот <img>. Ако во истиот именик каде што се наоѓа HTML

документот имаме слика, на пример, зачувана под името "slika1.jpg", тогаш

истата ја вметнуваме во документот на следниов начин:

<img src="slika1.jpg" width="200" height="150">

Притоа ги специфизираме и нејзините димензии: широчина и височина.

Ако сликата не се наоѓа во спомнатиот именик, тогаш на атрибутот src мора да

му ја специфизираме комплетна адреса на сликата.

Покрај атрибутот src, може да го користиме и атрибутот alt, кој дава краток

опис на сликата.

<img src="slika1.jpg" width="200" height="150"alt="Слика за матурска">

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

документ и го зачувуваме, на пример под името: maturska.html.

<img src="slika1.jpg" width="200" height="150"alt="Слика за матурска"

longdesc="maturska.html">

Ако пак сакаме да специфизираме одредена слика, на пример логото на Yahoo,

како врска (линк), тогаш тагот <img> го поставуваме меѓу таговите <a> и</a>:

<a href=”yahoo.com”><img=”yahoo.gif”>Yahoo именик</a>

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

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

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

border регулирање на дебелината на рамката околу сликата

0, односно нема рамка

width специфизирање на широчина

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

align порамнување на текстот околу сликите

bottom (другите вредности се: top и middle

19

8. Линкови Она што го прави Веб толку ефективен е способноста да бидат

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

други страници, како и следењето на линковите со едноставно кликнување со

глувчето.

Линковите се дефинирани со тагот <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>

20

9. Листи

Листите и нивните членови се блок елементи, исто како и параграфите и

заглавијата. Ова значи дека пред и по нив автоматски се додаваат празни места

и секој од нив започнува во нов ред.

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>

<li>Третиот елемент од листата</li>

</ul>

Да забележиме дека на крајот на секоја листа завршува со тагот </ul>.

Нумерираните листи се користат кога е важен редоследот на елементите.

Таму пред секој елемент од листата се појавува реден број. При креирањето на

нумерираните листи може да се користи параметарот type, кој може да ги прими

следниве вредности: 1 (следните елементи имаат редни броеви 2,3,...), A (B, C,

...), a (b,c,...), I (II, III, ...) или i (ii, iii, ...), што означува користење на арапски

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

21

цифри, соодветно. Ако не се употреби параметарот 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>

<li>

Вториот елемент од листата

<ul>

<li>Првиот вгнезден елемент </li>

22

<li>Вториот вгнезден елемент</li>

</ul>

</li>

<li>Третиот елемент од листата</li>

</ol> Во рамките на

подолгите елементи

од листата, слободно

може да користите

параграфи и наслови.

Исто така, дозволено е

и вгнездување на

листи од ист или од

различни типови.

На сликите може да се

види илустрација на

првите два вида на

листи.

23

10. Табели

Табелите, кои се составен дел на поновите верзии на 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>

Година Бр. на студенти 2004 157 2005 243 2006 187

Како што може да се види од примерот, тагот <table> со кој се специфизира табелата, претставува контејнер за сите останати тагови поврзани со табелите и за содржината на табелата. Атрибутот border ја специфизира широчината на границата на табелата во пиксели. Елементот tr претставува контејнер за секоја редица од табелата, додека елементите th и td претставуваат контејнери за насловот и за податоците во ќелиите, соодветно. Од примерот може да се види дека ќелиите во првата редица се дефинирани со <th>…</th> наместо со <td>, пред се за да се разликуваат од останатите (задебелен фонт).

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

Во рамките на една редица, со помош на атрибутите на тагот <tr>, можат да се дефинираат: вертикалната и хоризонталната порамнетост на содржините на ќелиите и бојата на позадината на ќелиите во редицата.

Во рамките на една ќелија, со помош на атрибутите на тагот <td>, можат да се дефинираат: вертикално и хоризонтално порамнување на содржината на ќелијата, бојата на позадината на ќелијата, висoчината и широчината на ќелијата, односно на редот и колоната на кои што им припаѓа и евентуалното протегање на ќелијата во повеќе редици или колони.

24

Следува преглед на поважните тагови, соодветни атрибути и нивните основни функции.

Таг Атрибути Функција <table> border специфизирање на постоење и дебелина на

ивиците на табелата. <table> cellspacing Специфизира широчина на празното место

меѓу ќелиите <table> cellpadding Специфизира големина на празното место

околу содржината на ќелијата, во бр. на точки. <table>, <tr>, <td>, <th>

align Дефинирање на позиција на табелата во рамките на страницата (има вредности left, right и center), како и на текстот во редиците и ќелиите.

<table>, <tr>, <td>, <th>

valign Вертикално порамнување на табелата во рамките на страницата, како и на текстот во редиците и ќелиите.

<table> width специфизирање на широчина на табела (апсолутно и релативно)

<table> height специфизирање на височина на табела (апсолутно и релативно)

<table>, <tr>, <td> <th>

bgcolor обојување на позадината на табелата, редицата, ќелијата, насловот.

td rowspan растегнување на ќелија во повеќе редици td colspan растегнување на ќелија во повеќе колони

Во продолжение следуваат примери на примена на некои од горенаведените тагови и атрибути.

Пример 1. <table border="1", cellpadding="8" width="60%"> <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>

Година Бр. на студенти

2004 157

2005 243

2006 187

25

Пример 2. <table border="1", cellpadding="8" width="60%"> <tr><th>Година</th><th>Бр. на студенти</th></tr> <tr align="center"><td>2004</td><td>157</td></tr> <tr align="center"><td>2005</td><td>243</td></tr> <tr align="center"><td>2006</td><td>187</td></tr> </table>

Година Бр. на студенти

2004 157

2005 243

2006 187

Пример 3. <table border="1" cellpadding="10" width="80%"> <tr align="center"><th rowspan="2">Година</th><th colspan="3">2006</th></tr> <tr align="center"><th>Април</th><th>Мај</th><th>Јуни</th></tr> </table>

2006 Година

Април Мај Јуни

Пример 4.

<table border="0" cellspacing="0" cellpadding="10"> <tr><th>Година</th><th>Бр. на студенти</th></tr> <tr><td>2004</td><td>157</td></tr> <table CELLSPACING=0 border=3 bordercolor="#0030ff">

Година Бр. на студенти

2004 157

2005 243

2006 187

Пример 5.

<tr>

<td width="90" bgcolor="#00ffff" rowspan="3" valign="top">

<center>1x1 111 текст графика </center>

26

<td height="35" width="300" bgcolor="white" colspan="2" valign="top">

<center>2x1 222 текст графика </center> </td>

<td width="90" bgcolor="#00ffff" rowspan="3" valign="top">

<center>3x1 333 текст графика</center> </td>

<tr>

<td height="35" width="150" bgcolor="#00ff96" valign="bottom">

<center>2x2x1 текст графика </center> </td>

<td width="150" bgcolor="#00b0ad" valign="bottom">

<center>2x2x2 текст графика</center> </td>

<tr>

<td height="35" width="50" bgcolor="#00ff96" valign="bottom">

<center>2x3x1 текст графика</center> </td>

<td width="50" bgcolor="#00b0ad" valign="bottom">

<center>2x3x2 текст графика</center> </td>

</table>

2x1 222 текст графика

2x2x1 текст графика 2x2x2 текст графика

1x1 111

текст

графика 2x3x1 текст графика 2x3x2 текст графика

3x1 333

текст

графика

Пример 6.

<table>

<tr>

<td height="35" bgcolor="#00ff96" colspan="2"> <center>1x1</center> </td>

<td width="50" bgcolor="#00ffff"> <center>1x2</center> </td>

</tr> <tr>

<td height="35" width="50" bgcolor="#00ff96"> <center>2x1</center> </td>

<td width="50" bgcolor="#00ff96"> <center>2x2</center> </td>

<td width="50" bgcolor="#00ffff"> <center>2x3</center> </td>

</tr>

</table>

1x1 1x2

2x1 2x2 2x3

27

11. Форми

Формите претставуваат основен начин на интерактивност помеѓу авторите на Веб сајтовите и нивните посетители. Формите овозможуваат внесување на кориснички податоци и нивно проследување до веб серверите преку посредникот CGI (Common Gateway Interface). Серверските програми, наречени уште и CGI скрипти, можат да бидат напишани како стандардни извршни датотеки за соодветниот оперативен систем (C/C++, Delphi, Visual Basic, Java, …) или како скрипти кои се интерпретираат во време на повикување (Perl, Tcl, Python, AppleScript).

Следува табела со основните тагови и атрибути.

Основниот таг за специфизирање на формата е тагот <form>...</form>

Таг Атрибут Вредност/функција <form> action URL на серверот што ги

прифаќа податоците од формата

<form> method Специфицирање на методот за проследување на податоците (можни вредности: get и post)

input type Можни вредности: текст, шифра, копче за потврда, радио копче, копче за испраќање и копче за поништување

text size специфицирање на широчина на елемент

text maxlenght специфицирање на максималниот број на знаци

text value специфицирање на иницијална вредност

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

28

29

12. Пример на Веб страница изработена во HTML

30