HTML Za 2god

Проф.
Анкица Наумовска - Информатичка технологија

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

Тој ја дефинира синтаксата и го инструира прелистувачот (browser)
како да ги прикажува текстот, сликите и останатите содржини во
еден документ како една интегрирана целина. Исто така, ги
опишува врските помеѓу различни документи и овозможува лесна
навигација низ нив. HTML е врската меѓу текстуалната датотека, која
се создава во текстуалниот уредувач или со HTML алатка, и она што
може да се види кога ќе се погледне Веб страницата со пребарувач.
Проф. Анкица Наумовска - Информатичка технологија

Таговите се пишуваат
во аглести загради
како на пример
<html> и можат да се
пишуваат и со големи HTML таговите
Тагот е основен и со мали букви. одат во парови
елемент на HTML како на пример
јазикот <b> и </b>
ШТО Е
Еден таг всушност е
ТАГ? <b> се нарекува
почетен таг
команда која на
прелистувачот му
кажува на кој начин
да ја прикаже
содржината на
страната </b> се нарекува
Текстот помеѓу завршен таг
почетниот и
завршниот таг се
нарекува содржина
на елементот
• HTML може да се уредува користејќи професионални
уредувачи како што се Adobe Dreamweawer, Microsoft
Expression Web или со користење на т.н.CMS (content
management systems) како што се Joomla и Wordpress.
Овие софтверски алатки овозможуваат креирање на web
страници без никакво познавање на HTML, туку со
користење на визуелни алатки кои помагаат да се креира
страницата без корисникот да го знае и да го види HTML
кодот.
• Ваквите алатки се познати и по името WYSIWYG (What You

See Is What You Get) уредувачи кои овозможуваат
распределување на елементите на страницата, и врз основа
на форматирањето на текстот во страницата автоматски
генерираат HTML датотеки.

НЕКОИ ОСНОВНИ ТАГОВИ
<html> и </html> тагови кои на прелистувачот му
кажуваат дека се работи за HTML
документ
<head> и </head> текстот меѓу нив преставува

заглавје на HTML документот
<title> и </title> текстот меѓу овие тагови е наслов

на документот
<body> и </body> се што е меѓу овие тагови е тело на

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

Notepad
За основна работа со HTML може да се користи било кој уредувач на
текст. Дури и наједноставниот уредувач Notepad, кој нема можности за
форматирање на текстот може да се користи како уредувач во кој ќе го
пишуваме HTML кодот и ќе креираме едноставни web страници.
Уредување на HTML кодот во Notepad

Зачувување на HTML датотеката
File -> Save As

• Кога се зачувува HTML може да се избере или ime.htm или
ime.html како екстензија на датотеката.
• Ако се користи кириличен текст за содржина на некои
елементи, encoding треба да биде unicode
Извршување на HTML датотеката во web прелистувач
Стартувај го web прелистувачот и отвори ја HTML датотеката
(File -> Open), или најди ја HTML датотеката и отвори ја со двоен
клик. Резултатот ќе изгледа вака:
ЗАГЛАВИЕ И НАСЛОВ
Заглавието на документот е означено со тагот <head>. Тоа содржи
информации кои го опишуваат документот. Овој таг е без атрибути и
служи како контејнер за другите тагови кои се карактеристични за овој
дел од документот.
Секој HTML документ мора да содржи наслов. Тагот <title> е најчесто

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

ТЕЛО НА ДОКУМЕНТОТ
Тело на документот претставува <!DOCTYPE html>

неговата содржина, односно <html>
видливиот дел на документот кој
се прикажува преку <head>
прелистувачот. Телото на
документот секогаш се наоѓа
меѓу таговите <body> и </body>. <title> Наслов на страната </title>
Тоа може да содржи текст, слики
и други елементи кои можат да </head>
се вметнуваат во документот.
<body> Овде се става се што сакаме да се
гледа
</body>
</html>
Глава на страница – тагот <head>
Тагот <head> се наоѓа во рамките на тагот <html>,
но пред тагот <body>
Име на страница - тагот <title>

Еден од елементите на тагот <head> е тагот <title>
ФОРМАТИРАЊЕ НА ТЕКСТ
• Основните елементи на форматирањето на текстот се
параграфите и заглавијата (headings) кои уште се познати и
под името блок елементи. Преминот во нов ред се
остварува со примена на тагот <br>. Параграфите
претставуваат текст помеѓу два нови редови. Секој
параграф е ограничен со таговите <p> и </p>.
• Заглавијата служат за издвојување на логичките целини
од документот, но имаат и визуелна функција. Тие
претставуваат текстуални блокови кои функционално се
еднакви со текстот од параграфите, но се разликуваат од
него по однапред дефинираната големина и задебеленост.

Пример: Излез:
<!DOCTYPE html>
<html>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Пример:
Излез:
<!DOCTYPE html>
<html>
<body>
<p>This is a paragraph.</p>
</body>
</html>
HTML коментари
• Во HTML кодот може да се вметнуваат коментари за да се

направи кодот почитлив и поразбирлив
• Коментарите се игнорираат од web прелистувачите и не се
прикажуваат
• Пример: 
Форматирање на текст
Текстот на web страницата може да биде форматиран
Пример:
<p><b>Овој текст е задебелен</b></p>
<p><strong>Овој текст е важен</strong></p>
<p><em>Овој текст е нагласен</em></p>
<p><i>Овој текст е искосен</i></p>
<p><small>Овој текст е мал</small></p>
<p>Ова е<sub> долен индекс</sub> а ова е <sup>горен
индекс</sup></p>
Празни HTML тагови
• HTML таговите без содржина се викаат празни тагови

<br> е празен таг без завршен таг
<br> тагот дефинира прекршување на линија
ВМЕТНУВАЊЕ ЛИНИЈА
За вметнување на хоризонтална линија, што претставува
наједноставниот графички елемент поддржан од HTML стандардот, се
користи тагот <hr>. Овој таг вклучува повеќе атрибути преку кои се
контролира изгледот на линијата:
HTML атрибути
• HTML таговите може да имаат и атрибути
• Атрибутите даваат дополнителна информација за тагот
• Атрибутите секогаш се специфицираат во почетниот таг
• Атрибутите се во облик пар од типот име=вредност, на
пр. ime=“vrednost”
HTML слики
Графичкиот дизајн е еден од најважните работи при градењето

на Веб страница, односно HTML страница. Графиката на Веб
може да се користи на неколку начини: како илустрација
на она за што се зборува, како украсен елемент во вид на
позадинска илустрација или како замена за текстуален линк.
Трите најпопуларни формати за прикажување на графика на
Веб денес се: JPEG, GIF и PNG.
Сликите се дефинираат со тагот <img>
Пример:
<img src=“logo_gp.jpg" width=“200" height=“220">
Името на сликата и димензиите се атрибути во рамките на тагот <img>
ВМЕТНУВАЊЕ СЛИКА
За вметнување на слика во HTML документ се користи тагот <img>. Ако

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

краток описна сликата.
<imgsrc="slika1.jpg" width="200" height="150"alt="Слика за матурска">
Табела со атрибути и нивните функции:
Атрибут Функција
src локација на сликата
alt краток опис на сликата
border регулирање на дебелината на

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

сликите
Пример:
<!DOCTYPE html>
<html>
<body>
<h2>HTML Image</h2>
<img src="pic_trulli.jpg" alt="Trulli" width="500" height="333">
</body>
Излез:
</html>
ЛИНКОВИ
Линковите се дефинирани со тагот <a>. Негов основен атрибут е
атрибутот href, кој служи за специфизирање на адресата кон која
покажува врската. Ако сакаме, на пример, да дефинираме линк до
страницата дефинирана во датотеката "sofija.html", тогаш го
пишуваме следново:
<ahref="sofija.html">Веб страницата на Софија </a>.
Текстот помеѓу таговите <a> и </a> се користи како натпис
(наслов) за линкот. Вообичаено е натписот да содржи потцртан
текст со сини знаци.
За поврзување со страница која припаѓа на друг Веб сајт потребно е
да се наведе неговата комплетна Веб адреса (позната уште како
URL адреса). Така на пример, ако сакаме да поставиме линк до
сајтот на Институтот за информатика, тогаш пишуваме:
<ahref="http://www.ii.edu.mk">Институт за информатика</a>.
HTML линкови
Линковите се дефинирани со тагот <a> .. </a>
<a href="https://josipbroztito.edu.mk" target="_blank"> Ова е линк кон училишната страница</a>
Пример: Ова е линк кон училишната страница
href e атрибут за линк и неговата адреса на која не насочува линкот

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

- Непосетен линк е подвлечен и син
- Посетен линк е подвлечен и виолетов
- Активен линк е подвлечен и црвен
HTML линкови – атрибут target

Атрибутот target определува каде ќе се отвори документот кон кој
покажува линкот - ќе се отвори во нов прозорец или во нов таб
Ппример:
<a href="https://josipbroztito.edu.mk" target="_blank"> Ова е линк кон училишната страница</a>
Пример за атрибутот href
<!DOCTYPE html>
<html>
<body>
<h2>HTML Links</h2>
<p><a href="https://www.w3schools.com/html/">Visit our HTML
tutorial</a></p>
</body>
</html>
ЛИСТИ
Листите и нивните членови се блок елементи, исто како и
параграфите и заглавијата. Ова значи дека пред и по нив
автоматски се додаваат празни места и секој од нив
започнува во нов ред. HTML поддржува три вида на листи:
• ненумерирани листи или неподредени листи
• нумерирани или подредени листи
• листи со дефиниции
<!DOCTYPE html>
<html>
<body>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</body>
</html>
ТАБЕЛИ
Табелите, кои се составен дел на поновите верзии на HTML,
овозможуваат прикажување на информација, но
истовремено претставуваат и начин на организација на
елементите на една Веб страница или на еден нејзин дел
(порамнување и уредување на текстот, креирање на готови
обрасци, креирање страници со повеќе колони, како
контејнери за слики и др.). Секоја табела се состои од
редици и колони во чии пресеци се наоѓаат основните
организациони единици на табелите –ќелиите. Контролата
на карактеристиките на прикажување може да биде на ниво
на цела табела, на цел ред или на поединечни ќелии.
Тагови, соодветни
атрибути и нивните
основни функции:
Пример:
<!DOCTYPE html>
<html> <td>Eve</td>
<td>Jackson</td>
<body> <td>94</td>
</tr>
<tr>
<h2>Basic HTML Table</h2>
<td>John</td>
<td>Doe</td>
<table style="width:100%"> <td>80</td>
</tr>
<tr> </table>
<th>Firstname</th>
<th>Lastname</th> </body>
</html>
<th>Age</th>
</tr>
<tr> Излез:
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
HTML СТИЛОВИ
• CSS (Cascading Style Sheets) е style sheet јазик за опишување на изгледот на

една веб страна. Тој може да биде користен во комбинација со HTML со
цел веб страната да биде визуелно изменета. CSS може да се пишува
дирекно во HTML кодот со помош на тагот <style>...</style>.
• Стилските тагови според намената се делат на логички и на физички.
• Најчесто користен физички стил е тагот <font>. Тој служи за подесување
на видот, големината и бојата на фонтот:
<font face="ime na fontot" color="bojata na fontot" size="goleminata na font">

Табела со најчесто
користените физички
стилови:
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
Пример:
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>

<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
Излез:

HTML Za 2god

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Za 2god

Uploaded by

Copyright:

Available Formats

Проф.

Анкица Наумовска - Информатичка технологија

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

Проф. Анкица Наумовска - Информатичка технологија

• Ваквите алатки се познати и по името WYSIWYG (What You

Проф. Анкица Наумовска - Информатичка технологија

<head> и </head> текстот меѓу нив преставува

<title> и </title> текстот меѓу овие тагови е наслов

<body> и </body> се што е меѓу овие тагови е тело на

Проф. Анкица Наумовска - Информатичка технологија

Уредување на HTML кодот во Notepad

File -> Save As

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

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

Тело на документот претставува <!DOCTYPE html>

Име на страница - тагот <title>

Проф. Анкица Наумовска - Информатичка технологија

• Во HTML кодот може да се вметнуваат коментари за да се

• HTML таговите без содржина се викаат празни тагови

Графичкиот дизајн е еден од најважните работи при градењето

Сликите се дефинираат со тагот <img>

За вметнување на слика во HTML документ се користи тагот <img>. Ако

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

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

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

border регулирање на дебелината на

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

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

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

<a href="https://josipbroztito.edu.mk" target="_blank"> Ова е линк кон училишната страница</a>

Пример: Ова е линк кон училишната страница

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

• Линковите се прикажуваат во прелистувачите на следниот начин:

HTML линкови – атрибут target

• CSS (Cascading Style Sheets) е style sheet јазик за опишување на изгледот на

Проф. Анкица Наумовска - Информатичка технологија

<p><b>This text is bold</b></p>

You might also like