Вежби по предметот Интернет Технологии

Вежби број 1. Вовед и запознавање со основните елементи во HTML

 Содржина:
Основни информации ................................................................................................................................. 3
Начин на оценување ............................................................................................................................... 3
Семинарски.............................................................................................................................................. 3
Литература за вежбите ........................................................................................................................... 3
Вовед ............................................................................................................................................................ 4
HTML ......................................................................................................................................................... 4
CSS............................................................................................................................................................. 5
Основи во HTML ............................................................................................................................. ............. 7
Специфицирање на типот на документот <!DOCTYPE>........................................................................ 7
HTML, HEAD и BODY тагови ..................................................................................................................... 7
Начин на оценување
Оценувањето ќе биде изведено на следниот начин:

• 2 x 30 = 60 поени од колоквиуми (испит)

• 20 поени од семинарска.
• 10 поени активност на предавања и вежби.
• 10 поени редовност на предавања и вежби.

Вкупно 100 поени.

Семинарски

Постојат низа правила за изработка на семинарските кои се поставени на Moodle

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

Литература за вежбите

1. http://www.w3schools.com/default.asp
Вовед
World Wide Web (WWW) во наједноставен случај претставува мрежа од компјутери кои меѓусебно
преку Интернетот разменуваат текст, слики и мултимедијални информации. Компјутерите кои
овозможуваат Веб страните да бидат достапни се наречени Веб сервери, а пак пристапот до тие
веб страни може да се овозможи преку било кој компјутер на кој имаме инсталирано веб
пребарувач‐ веб клиент. Во моментот кога Веб серверот прима одредено барање, тој пребарува
во својот систем на датотеки (file system) и враќа повратна информација.

Споменатите ентитети зборуваат на заеднички јазик, наречен HyperText Transfer Protocol (HTTP).
Во суштина HTTP претставува множество од правила и процедури наречени процедури. Во
продолжение е дадена слика како работи HTTP:

1. Веб страните содржат хипер линкови, односно специјално форматирани зборови кои ни
овозможуваат пренасочување или пристап до друга страна или информација.
2. Со кликнување врз хипер линкот вашиот компјутер испраќа порака наречена HTTP request.
Оваа порака во суштина вели: “Пратете ми ја веб страната која ја барам”.
3. Веб серверот го прима барањето, погледнува во датотеките, ја пронаоѓа страната и ја
враќа назад на вашиот компјутер (во случај да ја нема страната испраќа порака за грешка:
“404 Not Fount”.

HTML
Hypertext Markup Language (HTML) овозможува маркирање (обележување) на текст, така што да се
постави во функција на хипертекст. Терминот маркирање (markup) доаѓа од едиторите за
печатење кои користат специјални симболи кои му кажуваат на печатарот како да ја печати
страната. Според тоа HTML користи свое множество од симболи (овие симболи се наречени
елементи) кои му кажуваат на Веб пребарувачот како да ги прикажува веб страните.

HTML и HTTP се дело на Tim Berners‐ Lee, кои во тоа време работел во специјалист за компјутери и
мрежи во Швајцарскиот институт. Неговата идеја било на истражувачите на институтот да им
овозможи едноставен маркирачки јазик, со цел да можат унифицирано да ги разменуваат
документите преку Интернет. Главната идеја практично се базира на одделување на структурата и
презентацијата на документите:
 • Структурата референцира кон различни компоненти или делови од документот како што
се: наслови, параграфи, заглавја, листи итн.
• Презентацијата референцира кон начинот на кој различните компоненти и делови се
прикажани.

До денес, HTML има минато низ пет стандарди, последниот стандард е 5.0. Но како додатни
стандарди се појавуваат и стандардите за XML (Extensible Markup Language) и CSS (Cascading Style
Sheets), како и XHTML (Extensible HyperText Markup Language), стандард кој ги спојува HTML и XML.
Стандардите ги поставува World Wide Web Consortium (W3C) кој е составен од репрезентативни
компании.

CSS
HTML 4 препораката е прва која ја промовира идејата за одделување на структурата и
презентацијата. Примерот подолу може да ви укаже на фактот колку е тешко кога структурата и
презентацијата не се одделени (пример е во HTML 3.2):

Замислете дека треба да направите одредени измени или треба да додадете нешто или во уште
полош случај сакате да го смените изгледот на вашиот веб сајт (треба да направите измени на сите
веб страни).
Како што наспоменавме и претходно со појавата на HTML 4, W3C го развиваат и CSS (Cascading
Style Sheets) стандардот, кој во суштина им овозможува на веб авторите да дефинираат правила за
презентацијата на информациите. Во тој случај претходниот HTML код ќе добие друга форма, a
прикажувањето дополнително ќе биде решено преку CSS:

Во продолжени е даден редоследот првенство:

Најпрво доаѓа стилот дефиниран во елементите (иако ова влијае на структурата, некогаш е
неопходно), потоа доаѓа стилот дефиниран во самата страна и на крај глобално дефинираните
стилови во посебен документ.
Основи во HTML
Тагови се кодови во HTML документ кои пребарувачот ги чита, а потоа ги интерпретира за
понатамошно прикажување на читателот. Самите тагови не се видливи кога се гледа HTML
документот во пребарувач, туку само нивниот ефект. Таговите започнуваат со почетен симбол “<“
и завршуваат со краен симбол “>”. Таговите обично одат во парови со еден кој го означува
почетокот и друг кој го означува крајот на акцијата која ја врши тагот. Затворачкиот таг по
симболот “<“ го содржи симболот “/”.

Специфицирање на типот на документот <!DOCTYPE>

Еден од таговите кој најчесто од недоволно познавање се прескокнува е тагот за дефиниција на
документот Document Type Definition (DTD). Оваа дефиниција постои за да го информира
пребарувачот за форматот на документот кој му е испратен.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

Овој таг ги дава следните информации:

• Таг кој се наоѓа на највисоко ниво во конкретниот документ е HTML.

• Документот се придржува на правилата: PUBLIC “-//W3C//DTD HTML 4.01//EN”.
• Целосната DTD може да биде пронајдена на следнава URL адреса:
http://www.w3.org/TR/html4/strict.dtd

HTML, HEAD и BODY тагови

Овие три тагови ги имаат сите HTML документи (<html>, <head> и <body>).

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

<head> тагот го разграничува заглавјето на документот, каде се сместени неколку информации:

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

<head>
<link rel=“stylesheet” type=“text/css” href=“/styles.css”>
<title>Title of the Document</title>
<meta name=“description” content=“Sample Page”>
<meta name=“keywords” content=“sample, heading, page”>
<script language=“JavaScript”>
function NewWindow(url){
fin=window.open(url,“”,
“width=800,height=600,scrollbars=yes,resizable=yes”);
}
</script>
</head>

<body> во овој таг се сместува содржината на документот.

Во продолжение е даден наједноставен пример.

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

<head>
<title>Ова е насловот на мојата прва наједноставна страница</title>
</head>

<body>

Ова е содржината на мојата страница!!

</body>
</html>

Но зошто излезот е ваков:

Потребно е да се направа една мала модификација во кодот на <head> тагот.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ова е насловот на мојата прва наједноставна страница</title>
</head>

<body>

Ова е содржината на мојата страница!!

</body>
</html>

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

<body> тагот има и неколку атрибути1, кои во верзија 4.0 се одбегнуваат односно се тежнее истите
атрибути да бидат претставени како стилови во посебен документ или пак во истиот документ. Но
за стиловите повеќе ќе стане збор по првиот колоквиум.

• BACKGROUND – атрибут кој ја означува сликата која ќе претставува подлога (позадина) на

Web страната.
o Пример: <BODY BACKGROUND=“imenaslika.jpg”></BODY>
• Кај сите HTML тагови на кои може да се имплементира боја (како на пример BODY) бојата
се означува како шест цифрен хексадецимален број кој означува RGB вредност. Како
дополнување, постојат уште 16 имиња на бои, различни од black, кои може да се вклучат
во таговите. Тие се: Aqua, Red, Green, Blue, Violet, Fuchsia, Gray, Lime, Maroon, Navy, Olive,
Purple, Silver, Teal, White, and Yellow.
o Пример:
<BODY BGCOLOR="#FFFFFF">
Оваа страница има бела позадина.
</BODY>

Или

<BODY BGCOLOR=“WHITE">
Оваа страница има бела позадина.
</BODY>
• LINK – ја означува бојата на линковите кои не се посетени.
• ВLINK – ја означува бојата на линковите кои се посетени.
• АLINK – ја означува бојата на активните линковите т.е. Бојата која ќе се појави кога ќе се
стави курсорот врз линкот.
o Пример:
<BODY LINK="#0C6249“ АLINK=“#800080”>
Оваа страница има сини линкови и пурпурни активни линкови.
</BODY>
• TEXT – ја означува бојата на претпоставената боја во текстот на документот.
o Пример:
<BODY TEXT=“BLUE“>
Оваа страница има син текст.
</BODY>

Задача. На часот секој да направи една страница, во која ќе ги вметне поголемиот дел
од работите кои ги споменавме претходно. Обидете се да најдете и други атрибутии
трикови.

Време за работа: 20 минути

1
Атрибути се елементи сместени во самиот таг од кои зависи однесувањето и приказот на самиот таг.
Пример за една едноставна страна:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="prva, strana, vezba" />
<title>First Page</title>
</head>

<body background="background_ex.jpg" text="#CC0000" style="background-repeat:no-

repeat" topmargin="520px">

Vezba broj 1. Ednostavna strana, koja sodrzi se sto sme ucele do sega

</body>
</html>