Xhtml Tutorial

35
XHTML Tutorial Деан Jошевски Катерина ´ Горгиевска Битола, април 2009

Transcript of Xhtml Tutorial

Page 1: Xhtml Tutorial

XHTML Tutorial

Деан JошевскиКатерина Горгиевска

Битола,април 2009

Page 2: Xhtml Tutorial

2

Page 3: Xhtml Tutorial

Содржина

1 XHTML 71.1 Што е XHTML

и каков е неговиот развоj . . . . . . . . . . . . . . . . 71.2 Aлатки (програми) потребни

за креирање веб страници . . . . . . . . . . . . . . . 81.3 Тагови, атрибути и вредности . . . . . . . . . . . . . 91.4 Потреба од CSS . . . . . . . . . . . . . . . . . . . . . 111.5 Структура на XHTML документ . . . . . . . . . . . 111.6 Добро формиран XHTML документ . . . . . . . . . 14

1.6.1 Пишување со мали букви . . . . . . . . . . . . 151.6.2 Затворање тагови . . . . . . . . . . . . . . . . 151.6.3 Основен (root) елемент . . . . . . . . . . . . . 161.6.4 Вгнездување елементи . . . . . . . . . . . . . 171.6.5 Атрибути и нивни вредности . . . . . . . . . 181.6.6 Атрибутот id замена за атрибутот name . . . 19

1.7 Атрибутот lang . . . . . . . . . . . . . . . . . . . . . . 191.8 DOCTYPE . . . . . . . . . . . . . . . . . . . . . . . . 20

1.8.1 XHTML 1.0 Strict . . . . . . . . . . . . . . . . 201.8.2 XHTML 1.0 Transitional . . . . . . . . . . . . 211.8.3 XHTML 1.0 Frameset . . . . . . . . . . . . . . 21

1.9 Валидациjа . . . . . . . . . . . . . . . . . . . . . . . . 21

3

Page 4: Xhtml Tutorial

A Тагови 23

B Атрибути 29

C Бои 33

4

Page 5: Xhtml Tutorial

Увод

Современиот стил на живеење, не може да се замисли безкористење интернет сервиси.

Експанзиjата на интернетот, овозможува секоj човек, ком-паниjа, организациjа и сл., на интернет да „постави“ своj веб саjт(web site, веб презентациjа), составен од повеке веб страници.

Покраj веб презентациите, коишто служат само за пасивноили статичко претставување пред светот, се почесто, на интернетсе срекаваат и цели веб апликации или веб решениjа, наменетиза наjразлични цели.

За креирање веб презентации, се користи jазикот нареченHTML (Hyper Text Mark-up Language). Тоа е едноставен jазиксо коj текстот, сликите, аудио и видео секвенците, како и ситедруги делови од веб страниците се обединуваат во една логичкацелина.

HTML е основа на сите веб презентации и веб апликации.Без разлика кои други jазици и технологии ке се користат прикреирање веб презентации и веб решениjа, тие мора да се интег-рираат во HTML.

Денес, се почесто се користи jазикот XHTML (eXtensibleHyper Text Mark-up Language). Овоj jазик претставува логичкинаследник на jазикот HTML.

Постоjат програми коишто овозможуваат корисникот „визу-елно“ да ги внесува елементите од веб страницата, а за тоа време,„во позадина“, да се генерира соодветниот XHTML код.

Во современите веб презентации и веб апликации скоро по

5

Page 6: Xhtml Tutorial

правило се користат и CSS (Cascading Style Sheets — каскаднистраници со стилови).

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

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

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

6

Page 7: Xhtml Tutorial

Глава 1

XHTML

1.1 Што е XHTMLи каков е неговиот развоj

Со кратенката HTML (Hyper Text Mark-up Language), сеозначува jазикот со коjшто се креираат веб страниците. Овоjjазик (language) не е „класичен“ програмски jазик, туку тоа езбир од ознаки, наречени тагови (tags). Со впишување тагови во„обичен“ текст фаjл, се означува на кое место од веб страницатаке се поjави линк (врска) до друга веб страница, слика, табела ит. н. Вака маркираниот текст (mark-up) е наречен хипер текст(hyper text).

HTML оригинално го креирал Tim Berners – Lee во поче-токот на деведесеттите години од минатиот век, со ревизии иуредувања на Dan Connolly и Karen Muldrow.

Во почетокот, развоjот на HTML не бил контролиран, штодовело, таговите да бидат менувани и надградувани од повекеорганизации. Пребарувачите на веб страници (browsers) не билево можност правилно да ги интерпретираат сите тагови. Компа-ниите коишто развиваа веб пребарувачи, како што се Netscape иMicrosoft, развиваа свои тагови и ги вградуваа во своите преба-рувачи.

7

Page 8: Xhtml Tutorial

Подоцна одговорноста за развоjот на HTML jа презеде кон-зорциумот World Wide Web Consortium (скратено W3C), коjшторедовно издава препораки за тоа кои тагови да се користат икакво е нивното значење.

Препораките на овоj конзорциум се достапни на адресатаhttp://www.w3c.org.

Според препораките на Конзорциумот, дадени на 26.01.2000,наместо HTML 4.01, треба да се користи XHTML 1.0. Овие дваjазика се скоро целосно идентични, но во XHTML се дефинираатнеколку правила, коишто го приближуваат кон jазикот XML(eXtensible Mark-up Language)1. На тоj начин XHTML станувапопрецизна и „почиста“ верзиjа на HTML.

Современите веб пребарувачи го поддржуваат XHTML, од-носно таговите и правилата дефинирани за овоj jазик, а во оваакнига се анализира начинот на нивно користење.

Примерите во книгата се анализирани со помош на веб пре-барувачот Mozilla Firefox. Овоj пребарувач се изработува во вер-зии за различни оперативни системи (на пример, GNU/Linux, MSWindows и др).

1.2 Aлатки (програми) потребниза креирање веб страници

XHTML фаjлот е текст фаjл, коj во себе содржи XHTMLтагови и има наставка .html, или поретко .htm. Тоа значи, дека,XHTML фаjловите може да се креираат и со текст едитор, например со gedit, kwrite, vim и др., кога се користи дистрибуциjана GNU/Linux, или Notepad кога се користи оперативен системMS Windows.

Постоjат програми специjално наменети за креирање вебстраници, односно за работа со HTML, XHTML, CSS и сл. Вак-

1Синтаксата на XML е скоро идентична на онаа на XHTML, но наменатана овие два jазика е различна. Со XHTML се дефинира изгледот на подато-ците, а со XML се дефинира структурата на податоците.

8

Page 9: Xhtml Tutorial

вите апликации, наречени едитори, наjчесто се бесплатни.Покраj XHTML едитор, при изработувањето на веб стра-

ниците, потребен е и веб пребарувач. Со него се прегледуваатстраниците креирани со едиторот. Денес, наjчесто користени пре-барувачи се Mozilla Firefox, Opera, MS Internet Explorer и др.

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

При пишување на книгата, користен е оперативниот системUbuntu Linux. Примерите се креирани со помош на текст едито-рот gedit, а прикажувани се со веб пребарувачот Mozilla Firefox.Читателот може да користи било каков оперативен систем, текстили XHTML едитор и веб пребарувач.

1.3 Тагови, атрибути и вредности

XHTML фаjлот е составен од текст и од тагови. Таговите сеелементи кои на пребарувачот „му кажуваат“ како да го прикажитекстот, каде да постави врска (линк), каде да прикаже слика ит. н.

Почетокот на тагот се означува со математичкиот симболза споредување „<“ (помало од...). Потоа следи командата. Таанаjчесто е збор или кратенка од англискиот jазик, или букваод латиницата. Краjот на тагот се означува со математичкиотсимбол за споредување „>“ (поголемо од...).

<html>...

</html>

Таговите наjчесто се jавуваат во пар, односно имаат почетени завршен дел, (како во погорниот пример). Завршниот делсекогаш е идентичен со почетниот, со единствена разлика, штопосле знакот за помало, се додава знакот „/“ (slash). Ваквитетагови се однесуваат на делот од веб страницата што се наогапомегу нивниот почетен и завршен дел.

9

Page 10: Xhtml Tutorial

Постоjат и тагови коишто се состоjат само од еден (почетен)дел. Влиjанието на ваквите тагови наjчесто е на местото кадешто се лоцирани, но може да даваат информации и генерално зацелата веб страница.

Во XHTML сите тагови треба да се затвораат, па дури ионие коишто немаат завршен дел. Затоа во случаj кога таготнема завршен дел, косата црта — slash, со коjашто се означувазатворањето на тагот, се задава на краjот на тагот. Пред косатацрта треба да има едно празно место. На пример:

<br />

Таговите често имаат атрибути (attributes). Со нив на пре-барувачот му се даваат дополнителни информации за тагот. Ат-рибутите се вметнуваат само во почетниот дел од тагот, веднашпосле името на тагот. Атрибутите мора да добиваат вредности(values) и тоа преку математичкиот знак еднакво „=“. Вреднос-тите мора да се ставаат во наводници.

<a href="http://iu.blogsite.org">Интегра Ултра</a>

Во погорниот пример, <a> е таг со коj се креира линк, href еатрибут со коj се дефинира адресата, а http://iu.blogsite.orgе вредноста на атрибутот. Интегра Ултра е текст сместен вовнатрешноста на тагот. Овоj текст го претставува линкот.

За некои тагови постоjат повеке атрибути, но при користењена таговите не мора да се задаваат сите атрибути.

Доколку во тагот не е внесен атрибут, пребарувачот дефи-нира своjа предодредена (default) вредност.

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

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

Вгнездени тагови (точно):

10

Page 11: Xhtml Tutorial

<b><i>вгнездување</i></b><i><b>вгнездување</b></i>

Испреплетени тагови (грешно):

<b><i>испреплетување</b></i><i><b>испреплетување</i></b>

При вгнездувањето, редоследот на таговите не е битен. Вопогорниот пример не е битно дали текстот прво е задебелен (bold),а потоа искосен (italic), или обратно.

Содржината на XHTML фаjлот, од веб страницата што вомоментот е прикажана во пребарувачот, може да се прикаже соопциjата View/Source или View/Page Source. Оваа опциjа постоискоро во сите веб пребарувачи и многу е корисна, затоа што ко-рисникот може да ги анализира таговите.

1.4 Потреба од CSS

Според препораките на World Wide Web Consortium, некоитагови и атрибути, користени при употреба на HTML, треба дасе избегнуваат кога се користи XHTML. Во англискиот jазик тиесе наречени deprecated.

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

Употребата на ваквите тагови и атрибути, треба да се за-мени со упoтреба на CSS. Затоа денес, користењето на CSS енеизбежно, при креирање веб презентации или веб апликации.

1.5 Структура на XHTML документ

Слично на XML, секоj XHTML документ мора да има едент. н. root, или основен елемент. Затоа XHTML документитезапочнуваат и завршуваат со тагот:

11

Page 12: Xhtml Tutorial

<html>...

</html>

Овоj таг е основниот (root) елемент на XHTML докумен-тите. Пред почетниот дел и после завршниот дел од овоj таг несе внесуваат други XHTML елементи.

XHTML документот има jасна поделба за заглавие (head),и тело (body).

<html><head>

...</head><body>

...</body>

</html>

Во заглавието се сместува збир од информации (тагови),во врска со документот (фаjлот). Тие не влиjаат на изгледотна страницата, туку му даваат информации на пребарувачот,генерално за целата страница. Таговите од заглавието не се вне-суваат по некоj одреден редослед. Наjзначаjни се: title и meta,а тагот title мора да биде присутен во сите XHTML документи.

<head><title>Моjа прва веб страница</title><meta http-equiv="Content-Type"

content="text/html; charset=utf8" /></head>

Текстот: „Моjа прва веб страница“, од тагот: title, е насловна веб страницата, и се поjавува во насловот на пребарувачот.

Во тагот meta, се внесуваат информации за целата веб стра-ница, корисни за пребарувачот или серверот. Во погорниот при-мер, овоj таг „му кажува“ на пребарувачот дека веб страницата ги

12

Page 13: Xhtml Tutorial

користи utf8 имплементациjа на Unicode стандардот. Со тоа кеможат да се користат и кирилските букви. Доколку на ваков на-чин не се назначи дека се користи кирилицата, корисникот требатоа да го направи „рачно“ (во пребарувачот), наjчесто со опциjатаView/Encoding.

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

На почетокот на сите XHTML документи мора да биде вне-сена т. н. DOCTYPE декларациjа2.

<!DOCTYPE ...><html>

<head><title>...</title>

</head><body>

...</body>

</html>

DOCTYPE декларациjата не е дел од XHTML документот,односно не е XHTML елемент и не треба да се затвора.

Со споjување на погоре анализираните елементи, се добиваосновна структура на XHTML документ, односно пример за наj-едноставна веб страница, коjашто во себе ги содржи сите неоп-ходни елементи:

<!DOCTYPE html PUBLIC "-//W3C//DTDXHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>

<head>2Document Type Definition

13

Page 14: Xhtml Tutorial

<title>Моjа прва веб страница</title><meta http-equiv="Content-Type"

content="text/html; charset=utf8" /></head><body>

– Здраво народе! Ова е моjата прва веб страница.</body>

</html>

Вака средената содржина на документот, треба да се снимиво датотека, со наставка: .html (или .htm).

Снимената датотека, потоа може да се вчита во пребарува-чот и со тоа да се прикаже веб страницата.

По правило, основната (првата, „влезната“) страница од вебсаjтот, се снима под име index.html или default.html, во зависностод серверот на коjшто се поставува веб презентациjата. Наjдоброе имињата на фаjловите да се пишуваат со мали букви и да сеизбегнува вметнување празен простор во нив.

1.6 Добро формиран XHTML документ

XML е jазик во коjшто се дифинирани неколку строго оп-ределени правила на означување. Кога ке се креира документво коjшто се запазени сите правила, тогаш за таков документ севели дека е добро формиран (well formed).

Денес, покраj веб пребарувачите инсталирани во персонал-ните компjутери, за работа со интернет сервиси, се користат иалатки инсталирани во мобилни телефони и разни други малиуреди. Ваквите уреди често немаат доволно процесорка мок, илиработна мемориjа, за правилно да интерпретираат лошо форми-рани документи. Затоа со комбинирање на правилата дефини-рани во XML со оние на HTML, се добива jазикот XHTML, коjштоовозможува лесно да се креираат добро формирани документи.

Основните правила коишто треба да се запазат, за да секреира добро формиран XHTML документ се следните:

14

Page 15: Xhtml Tutorial

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

• сите тагови треба да бидат затворени;

• документите треба да имаат еден основен (root) елемент;

• таговите треба да бидат правилно вгнездени;

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

• атрибутите мора да примаат вредности.

1.6.1 Пишување со мали букви

Во спецификациjата на XHTML е дефинирано дека ситеелементи (тагови и атрибути) мора да бидат пишувани со малибукви.

На пример, точно е:

<body><p>Правилно е таговите и атрибутите да се пишуваат

со мали букви.</p></body>

а погрешно е:

<BODY><P>Погрешно е елементие да се пишуваат со големи

букви.</P></BODY>

1.6.2 Затворање тагови

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

На пример, точно е:

15

Page 16: Xhtml Tutorial

<p>Сите тагови мора да бидат затворени.</p><p>Иако со започнување нов пасус, се знае дека

се завршува претходниот.</p>

а погрешно е:

<p>Недостига завршниот дел на тагот за пасус.<p>Тоа не е дозволено во добро формиран документ.

Постоjат и тагови кои немаат своj завршен дел. Ваквитетагови се наречени празни (emty). Во XHTML и празните таговимора да бидат затворени. Затворањето на ваквите тагови сеправи со внесување коса црта (slash) на краjот од тагот. Вопродолжение се дадени примери за затворање на тагови кои не-маат завршен дел:

• пренесување во следен ред (прекинување — break): <br />;

• xоризонтална линиjа: <hr />;

• внесување слика: <img src="penguin.gif" />.

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

1.6.3 Основен (root) елемент

Во XHTML документите дозволено е да се внесе само еденосновен (root) елемент. Тоа е елементот <html>. Сите останатиелементи треба да бидат правилно вгнездени во основниот елем-ент.

Елементи коишто се вгнездуваат во други елементи, се на-рекуваат поделементи (subelements), или деца (children). Еле-менти кои се наогаат на исто ниво, во ист елемент, се нарекуваатсестрински, или братски елементи.

16

Page 17: Xhtml Tutorial

Основната структура на секоj XHTML документ jа созда-ваат основниот елемент <html>, во коj се вгнездени сестринскитеподелементи <head> и <body>:

<html><head>

...</head><body>

...</body>

</html>

1.6.4 Вгнездување елементи

Во спецификациите за креирање XHTML документи, повекене е дозволено испреплетување на таговите. На пример, иако воHTML беше дозволено да се запише:

<b><i>Погрешно испреплетување</b></i>

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

<b><i>Правилно вгнездување</i></b>

Кога се дефинираат листи (со или без наброjување), истотака мора да се запази правилното вгнездување. Воедно и зарадиправилното затворање на елементите, наместо да се креира листана следниот начин:

<ul><li>Ubuntu<li>Edubuntu<li>Kubuntu<li>Xubuntu

</ul>

17

Page 18: Xhtml Tutorial

во XHTML, тоа треба да се направи со помош на таговите:

<ul><li>Ubuntu</li><li>Edubuntu</li><li>Kubuntu</li><li>Xubuntu</li>

</ul>

1.6.5 Атрибути и нивни вредности

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

<table width="100%">

додека погрешно е да се запише:

<table width=100%>

Во XHTML не е дозволено т. н. минимизирање на атрибу-тите, односно задавање само атрибут (без негова вредност). Тоазначи дека кога се задава атрибут, мора да се зададе и вредност.

На пример, наместо:

<input checked>

или

<option selected>

треба да се зададе:

<input checked="checked" />

или

<option selected="selected" />.

18

Page 19: Xhtml Tutorial

1.6.6 Атрибутот id замена за атрибутот name

Aтрибутот name, дефиниран во HTML за тагови како штосе: a, frame, img и сл., во XHTML не треба да се користи. Овоjатрибут, се заменува со атрибутот id.

На пример, наместо:

<img src="tux.gif" name="tux" />

треба да се зададе:

<img src="tux.gif" id="tux" />

Доколку има потреба да се запази компатибилност со пос-тари веб пребарувачи, дезволено е да се зададат двата атрибута,со иста вредност. За посочениот пример, може да се зададе:

<img src="tux.gif" id="tux" name="tux" />

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

1.7 Атрибутот lang

Во XHTML, скоро во секоj елемент, може да се зададе ат-рибутот lang. Со овоj атрибут се дефинира jазикот, во коjшто епишувана содржината лоцирана во елементот.

Кога се користи овоj атрибут, тогаш во елементот мора дасе зададе и атрибутот xml:lang, на пример:

<div lang="no" xml:lang="no">No lang defined</div>

За да се дефинира jазик за целата страница, овоj атрибуттреба да се зададе во тагот <html>. На тоj начин, им се „помага“на пребарувачите, односно се забрзува работата при пребару-вање.

Во HTML, овоj атрибут се задава на следниот начин:

19

Page 20: Xhtml Tutorial

<html lang="en">...

</html>

а во XHTML, тоа се прави на следниот начин:

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"xml:lang="en">...

</html>

1.8 DOCTYPE

XHTML документите во себе содржат три основни делови итоа:

• DOCTYPE декларациjа,

• заглавие <head> и

• тело <body>.

DOCTYPE декларациjата секогаш се наога во првата линиjаод документот.

Со DOCTYPE се дефинира типот на XHTML документот, аво останатиот дел од документот се сместени XHTML елементите.

Постоjат три видови XHTML типови, дефинирани како:

• STRICT,

• TRANSITIONAL и

• FRAMESET.

1.8.1 XHTML 1.0 Strict

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

20

Page 21: Xhtml Tutorial

Кога треба да се постигне строго дефиниран XHTML доку-мент, без компромиси во елементите за презентациjа, тогаш секористи овоj тип на документ. Во ваков случаj елементите запрезентациjа се креираат со помош на CSS.

1.8.2 XHTML 1.0 Transitional

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

1.8.3 XHTML 1.0 Frameset

<!DOCTYPE htmlPUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Кога страниците треба да се поделат на рамки (frames),тогаш треба да се користи овоj тип на документ.

1.9 Валидациjа

Постои можност да се провери, дали XHTML документ едобро формиран (well formed). Ваквиот процес е наречен вали-дациjа на документот. Проверката се прави преку валидаторотпоставен на страницата за валидациjа на W3C.

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

21

Page 22: Xhtml Tutorial

<form method="get" action="http://validator.w3.org/check" target="_blank">

<p>Внесете jа адресата:</p><p><input name="uri" size="60" /></p><input type="submit" value="Проверете" />

</form>

Откако ке се зададе адресата, од страна на валидаторотсе добива детален извештаj за евентуалните неправилности воXHTML документот лоциран на зададената локациjа.

22

Page 23: Xhtml Tutorial

Додаток A

Тагови

Во продолжение се дадени табели со таговите дефинираниво спецификациjата на XHTML 1.0. Таговите се дадени по групи,според нивната функционалност.

Ознаките во колоната DTD кажуваат во коj тип на XHTMLдокумент, кои тагови се дозволени. Со S е означен типот Strict,со T типот Transitional, а со F е означен типот Frameset.

Таговите коишто не треба да се користат, наjчесто се заме-нуваат со CSS.

Таг Опис DTD<!DOCTYPE> тип на документ STF<html> html документ STF<body> тело STF<h1> до <h6> заглавие од 1 до 6 STF<p> пасус STF<br> пренесување во нов ред (прекршување) STF<hr> хоризонтална линиjа STF<!--...--> коментар STF

таб. A.1: Основни тагови (basic tags)

23

Page 24: Xhtml Tutorial

Таг Опис DTD<head> инфорации за документот STF<title> наслов на документот STF<meta> генерални (meta) информации STF<base> основен URL за линковите STF<basefont> (не се користи) основен фонт TF

таб. A.2: Тагови за генерални информации (meta info)

Таг Опис DTD<b> задебелување STF<font> (не се користи) дефинирање фонт TF<i> искосување STF<em> искосување (каj примери) STF<big> зголемување STF<strong> задебелување (со големи букви) STF<small> намалување STF<sup> степен STF<sub> индекс STF<bdo> насока STF<u> (не се користи) подвлекување TF

таб. A.3: Тагови за форматирање текст (text format)

Таг Опис DTD<ul> листа без наброjување STF<ol> листа со наброjување STF<li> позициjа од листа STF<dir> (не се користи) листа на директориуми TF<dl> листа на дефиниции (поими) STF<dt> поим во листа на дефиниции STF<dd> опис (дефинициjа) во листа на дефиниции STF<menu> (не се користи) мени листа TF

таб. A.4: Тагови за креирање листи (lists)

24

Page 25: Xhtml Tutorial

Таг Опис DTD<pre> преформатиран текст STF<code> изворен код STF<tt> машина за пишување STF<kbd> тастатура STF<var> променлива STF<dfn> дефинициjа STF<samp> пример (со изворен код) STF<xmp> (не се користи) пример со XHTML тагови

таб. A.5: Тагови за формирање излез (оutput)

Таг Опис DTD<acronym> акроним STF<abbr> скратување фрази (abbreviation) STF<address> адреса STF<blockquote> долг цитат STF<center> (не се користи) центирирање TF<q> краток цитат STF<cite> цитат STF<ins> внесен текст STF<del> „избришан“ текст STF<s> (не се користи) прецртан текст TF<strike> (не се користи) прецртан текст TF

таб. A.6: Тагови за креирање блокови (blocks)

Таг Опис DTD<a> линк (врска) STF<link> референца STF

таб. A.7: Тагови за креирање линкови (links)

25

Page 26: Xhtml Tutorial

Таг Опис DTD<img> слика STF<map> карта, креирана од слика STF<area> дел од карта, креирана од слика STF

таб. A.8: Тагови за дефинирање слики (images)

Таг Опис DTD<table> табела STF<caption> наслов на табела STF<th> заглавие во табела STF<tr> редица од табела STF<td> келиjа STF<thead> заглавие (header) STF<tbody> тело на табела STF<tfoot> подноже (footer) STF<col> атрибути на колоните STF<colgroup> групи од колони STF

таб. A.9: Тагови за дефинирање табели (tables)

Таг Опис DTD<style> стил STF<div> сегмент од документ STF<span> сегмент од документ STF

таб. A.10: Тагови за дефинирање стилови (styles)

26

Page 27: Xhtml Tutorial

Таг Опис DTD<form> форма STF<input> поле за внесување STF<textarea> поле за внесување поголем текст STF<button> екрански тастер STF<select> листа STF<optgroup> група од опции (позиции) STF<option> опциjа (позициjа) во листа STF<label> ознака STF<fieldset> збир од полиња STF<legend> наслов за збир од полиња STF<isindex> (не се користи) поле од еден ред TF

таб. A.11: Тагови за внесување податоци (input)

Таг Опис DTD<frame> рамка F<frameset> збир од рамки F<noframes> дел без рамки TF<iframe> интерно дефинирана рамка TF

таб. A.12: Тагови за креирање рамки (frames)

Таг Опис DTD<script> скрипта STF<noscript> дел без скрипти STF<applet> (не се користи) аплет (applet) TF<object> „надворешен“ обjект STF<param> параметар за обjект STF

таб. A.13: Тагови за внесување програмски код (programming)

27

Page 28: Xhtml Tutorial

28

Page 29: Xhtml Tutorial

Додаток B

Атрибути

Во продолжение се дадени атрибути, коишто се стандарднии поддржани скоро во сите HTML и XHTML тагови. Исклу-чоците се посебно означени. Атрибутите се групирани, спореднивната фунцкионалност.

Атрибут Вредност Описclass classname име на класа за елементid id единствена ознака за елементstyle style стил во линиjа за елементtitle text додатни информации за елемент

таб. B.1: Основни атрибути (core attributes)

Основните атрибути, не можат да се користат во таговите:base, head, html, meta, param, script, style и title.

Атрибутите за работа со jазици, не можат да се користат вотаговите: base, br, frame, frameset, hr, iframe, param и script.

Во HTML 4, беше додадена можност за поврзување настанисо активности на пребарувачите. На пример, да се стартуваJavaScript во момент кога корисникот ке кликне врз некоj елем-ент.

Во табелата со атрибути за стандардни настани, дадени се

29

Page 30: Xhtml Tutorial

Атрибут Вредност Описdir ltr, rtl насока на текст (содржина)lang lang_code код на jазик за содржина на елементxml:lang lang_code код на jазик за содржина на елемент

(во XHTML документите)

таб. B.2: За работа со jазици (language attributes)

Атрибут Вредност Описaccesskey character кратенка за пристап до елементtabindex number редослед на елемент

таб. B.3: За работа со тастатура (keyboard attributes)

атрибутите кои можат да се внесат во HTML, или XHTML еле-менти, за да се дефинира поврзаноста на настаните и акциитекои треба да се преземат при поjавување на настанот.

Атрибутите за стандардните настани, можат да се користат,само во таговите <body> и <frameset>.

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

Атрибутите за настани со тастатура можат да се користатво сите елементи, освен во елементите: base, bdo, br, frame,frameset, head, html, iframe, meta, param, script, style и title.

Атрибутите за настани со маус, можат да се користат во ситеелементи, освен во елементите: base, bdo, br, frame, frameset,head, html, iframe, meta, param, script, style и title.

30

Page 31: Xhtml Tutorial

Атрибут Вредност Описonload script при вчитување документonunload script при напуштање документ

таб. B.4: За стандардни настани (standard event attributes)

Атрибут Вредност Описonchange script при промена во елементonsubmit script при испракање формаonreset script при ресетирање формаonselect script кога е избран елементonblur script при напуштање на фокусотonfocus script при добивање фокус

таб. B.5: За настани со форми (form events attributes)

Атрибут Вредност Описonkeydown script при притискање тастерonkeypress script при притискање

и ослободување тастерonkeyup script при ослободување тастер

таб. B.6: За настани со тастатура (keyboard events attributes)

Атрибут Вредност Описonclick script при кликнувањеondblclick script при двоjно кликнувањеonmousedown script при притискање тастерonmousemove script при движењеonmouseover script при позиционирање врз елементonmouseout script при напуштање елементonmouseup script при ослободување тастер

таб. B.7: За настани со маус (mouse events attributes)

31

Page 32: Xhtml Tutorial

32

Page 33: Xhtml Tutorial

Додаток C

Бои

Во природата, сите ниjанси на бои можат да сe „добиjат“ сокомбинациjа на трите основни бои: црвена (red), зелена (green)и сина (blue). Во зависност од процентуалната застапеност наосновните бои, се добиваат сите останати.

Слично е и во XHTML документите. На елементите од вебстраниците, (позадината, текстот, линковите и сл.), може да имсе задава различна боjа, со дефинирање на интензитетот на ос-новните бои.

Боите се дефинираат со шестцифрен хексадецимален брoj,на коj му претходи музичкиот знак за повишување: „#“ (диес).

#RRGGBB

Првите две цифри го означуваат интензитетот на црвената(RR), вторите две на зеленета (GG), а последните две на синатабоjа (BB).

Во продолжение дадени се неколку примери:

#000000 — црна

#ffffff — бела

#ff0000 — црвена

33

Page 34: Xhtml Tutorial

#00ff00 — зелена

#0000ffF — сина

#ffff00 — жолта

#663300 — кафеава

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

Во стандардите за HTML, XHTML и CSS, дадени од странана Конзорциумот, дефинирани се 16 имиња на бои и тоа: aqua,black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple,red, silver, teal, white и yellow.

34

Page 35: Xhtml Tutorial

Користена литература

[1] HTML од почеток до краj, Деан Jошевски, Култура, Скопjе,2003.

[2] W3Schools (on-line edition).

[3] Jennifer Niederst, Web Design in a Nutshell, O’Reilly & Asso-ciates, 1999.

[4] Ian Lloyd, The Ultimate HTML Reference, SitePoint Pty Ltd,2008.

[5] Tommy Olsson, Paul O’Brien, The Ultimate CSS Reference, Site-Point Pty Ltd, 2008.

35