Проект Hypertext Markup Language (HTML)

Изработил: Христијан Димитровски

Ментор: Прекиќ Жаклина
Фебруари 2021, Скопје
СУГС гимназија Раде Јовчевски Корчагин

Содржина

Поим за веб-страница и нејзина структура, типови на веб страници 3

Составни делови на различни типови веб страници 5

Скриптирање на клиентска и серверска станица 7

Поим за CSS 9

Поим за HTML и компарација со програмски јазик 10

Видови уредувачи (едитори) за пишување на HTML 12

Основни тагови во HTML 15

Елементи во HTML 17

Атрибути и стилови во HTML 18

Пример на едноставна Web Страница со сите гореспоменати делови од HTML 20

Заклучок 21

Референца 22

2
 ШТО Е HTML ?
HTML е програмски јазик создаден да овозможи создавање на мрежни
места. Овие места можат да бидат пристапени од секој којшто е поврзан
на Интернет мрежата. Јазикот е релативно лесен за учење, целокупните
основи на јазикот можат да бидат совладани од повеќето луѓе, за релативно
кратко време. Исто така е доста моќен во однос на она што ти го
овозможува да го направиш. Постојано е подложен на одредени ревизии и
еволуции, сè со цел за да одговори на барањата и потребите на се
поголемата Интернет публика, која пак е под водство на W3C, организација
која што е задолжена за дизајнирање и одржување на јазикот.
Дефиницијата за HTML е HyperText Markup Language.

1. Поим за веб страница и нејзина структура, типови на веб

страници

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

мрежно место и прикажана на корисник во прелистувач. Мрежното место
вообичаено се состои од повеќе мрежни страници поврзани заедно на
разбирлив начин.
Постојат 8 типови на веб страни, а тоа се:

- Homepages
- Magazine websites
- E-commerce websites
- Blogs
- Portfolio websites
- Landing pages
- Socieal media websites
- Directory and contact websites

3
2. Составни делови на различни веб страници

- Page feader (или заглавје)

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

на страницата. На страни како “Microsoft” и “e-bay”, заглавјето е високо
помечу 50 и 100 пиксели и таму најчесто се наоѓа логото на компанијата.

- Main navigation

Главната навигација се наоѓа или во горниот или во долниот дел на

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

- Page title

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

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

- Meta tags

Мета ознаките се полиња кои не се видливи за посетителот, но

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

- Content width

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

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

- Page footer

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

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

4
3. Скриптирање на клиентска и серверска станица

Скриптирање на опслужувачска страна е опслужувачка технологија

каде што упитите се разрешуваат преку стартување на скрипта директно на
веб опслужувачот, која генерира димачка HTML страници. Оваа технологија
вообичаено се користи за дизајнирање на интерактивни веб страници кои
во позадина се поврзани со бази на податоци или слични складишта на
податоци. Оваа технологија е реалична од технологијата на Скриптирање
на клиентска страна каде што скриптите се извршуваат кај клиентот во
рамките на прелистувачот. За оваа намена најчесто се користи JavaScript.
Основната предност кај скриптирањето на опслужувачска страна е
можноста за прецизно подесување на одговорот на опслужувачот согласно
со барањата упатени од страна на клиентот, а согласно со неговите
привилегии за пристап и дефинираните политики за работа со базите на
податоци.

4. CSS

“Cascading Style Sheets” е јазик за стилски страници што се користи за

опишување на презентацискта семантика (изгледот и форматирњето) на
документ напишан во јазик за означување. Нејзини најчести апликации се
стилот на веб страните напишани во HTML и XHTML, но јазикот исто така
може да се примени на секој тип на XML документ, вклучувајќи обичен
XML, SVG and XUL.
CSS е предвиден првенствено за да се овозможи поделба на содржината
на документот (напишан во HTML или сличен markup language) за
презентација на документот вклучувајќи елементи како рапоредот на

5
 страната, боите, и фонтот. Оваа поделба може да ја подобри содржината
,да овозможи флексибилност и контрола во одредбите на презентирање
карактеристики, да им овозможи на повеќе страни да го споделат
форматирањето , и да ја намалат комплексноста и повторувањето во
структурната содржина. CSS исто така дозволува истата означена страна
да биде презентирана во различни стилови за различни рендерирани
методи како на екран, во печатена форма, со глас (кога се чита од
гласовно-засновани прелистувачи или екрански читачи) или уреди на
основа на Брајова азбука. Може да се користи и за да им дозволи на веб
страните да се прикажуваат различно во зависност од големината на
екранот или уредот на кој ќе биде прегледуван. Додека авторот на
документот обично го води тој документ во CSS стил, корисниците може да
употребуваат друг стил,како на пример оној на нивниот компјутер за да го
замени оној кој е укажан од авторот.

5. Споредна ба ХТМЛ со програмски јазик

Во програмскиот јазик користевме интегрирана околина за

програмирање. Програмата ја пишувавме, потоа ја преведувавме и дури
тогаш можевме да ја извршувавме (во истата интегрирана околина). HTML
страницата ја пишуваме во било кој едитор (пожелно е да има подршка
барем за HTML, но не е неопходно). Нема потреба од преведување.
Стартувањето на страницата се прави во програма, наречена browser.

6. Видови уредувачи (едитори) за пишување на HTML

За оние кои немаат познавање на HTML јазикот, постојат посебни

програми, кои овозможуваат да се изградат WEB страници. (Овие програми
се викаат HTML WYSIWYG Editors - What-You-See-Is-WhatYou-Get она што
го гледаш е она што го добиваш). Најпознат е: Adobe Dreamweaver, Тие
вклучуваат во себе управување со датотеки, јазичиња, формулари, табели,

6
 шаблони. Најпознати вакви бесплатни програми се: Sea Monkey, Alleycode,
Kompozer, Amaya, итн.
Постојат веб сајтови, каде online може да креираме свој веб сајт, без
познавање на HTML. Најпознати вакви сајтови се: WordPress.com,
Wix.com, Weebly.com, Web.com. Нудат и бесплатен хост и бесплатен
домен, со тоа што во доменот се наоѓа и името на нивната фирма. (Сајтот
на кој ги оставам презентациите е изработен на Wordpress платформа, со
бесплатен хост и бесплатен домен.) Притоа, имаат ограничувања во
поглед на мемориски простор, шаблони за изглед, како и интернет
сообраќај. Доколку имате потреба од поголем простор и изглед по Ваша
желба, тогаш нудат и професионални пакети (но, тие не се бесплатни).
Сепак, секој што малку посериозно реши да дизајнира WEB страници,
пожелно да се запознае со HTML јазикот (а понатаму веројатно и со PHP,
Javascript, ASP или некој сличен јазик) Најпознати бесплатни HTML текст
едитори се: Visual Studio Code, Atom, Netbeans, Aptana Studio, Brackets,
Notepad++. Овие едитори со подршката за HTML ни помагаат полесно да
ги креираме HTML датотеките и прават проверка на синтаксата. (Повеќето
од овие едитори имаат подршка и за PHP, Javascript и други јазици, што им
е од дополнителна корист на WEB дизајнерите.)

7. Основни тагови во HTML

Таговите се елементи кои на browser-от „му кажуваат“ каде и како да

прикаже: текст, линк, слика итн. Тагот започнува со знакот < потоа следува
командата (збор, кратенка или буква) и завршува со >. Најчесто имаат
почетен и завршен дел. Завршниот дел почнува со / и понатаму е ист како
почетниот (исто како во примерот). Тој го затвора тагот (на другиот дел од
страната не важи). Има тагови кои имаат само еден (почетен) дел.
Таговите може да се вгнездуваат еден во друг, но не може да се
испреплетуваат. Пр. вгнездување (b-здебелени, i-искосени, u-подвлечени
букви).Tаговите ги пишуваме со мали букви.
Во HTML датотеката има заглавие (head) и тело (body). Во заглавието
се сместуваат информации кои се однесуваат на целата страница. Еден
веб сајт, обично има повеќе веб страни. Кога ги публикуваме сите
содржини од еден веб сајт на интернет, веб страната со име index.html ја
става за почетна страна (home page) на сајтот.

7
8. Елементи во HTML

<form> таг за креирање на форма

Action локација каде одат податоците
Method секогаш избираме пост
Name име на формата
Type тип на поле
Name име на полето
Value подразбирачка вредност
Size број на карактери кои се прикажуваат при внесувањето
Maxlenght колку карактери максимално можат да се внесат

10. Атрибути и стилови во HTML

Со помош на стиловите, на таговите им се доделуваат нови својства,

со што се зголемува контролата врз елементите од WEB презентацијата.
Постојат 3 начини на дефинирање на стиловите: inline (во линија) , embeded
(интерни) , linked (поврзани, или екстерни).
Стиловите во линија се задаваат во почетниот дел на тагот, за секој таг
посебно. Функционираат многу слично на атрибутите, само се додава
зборчето style. Овој стил има влијание само врз тој таг каде е поставен. Пр.
ако се зададе стил за еден таг <p>, тој влијае само на овој таг, иако на
страната може да има повеќе тагови <p>На овој начин се зголемува
контролата врз елементите на WEB презентацијата, но со промена на еден
стил не се овозможува промена на целата страница, туку само кај тој таг.

Интерните стилови се задаваат со тагот и се наоѓаат во заглавието. Овие

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

Екстерните стилови се внесуваат во независни фајлови со наставка .css, а

сe поврзуваат со WEB страните со тагот <link> .(Најчесто се креира
потфолдер со име css и во него се сместуваат сите екстерни стилови.). Со

8
 екстерните стилови можат да се контролираат карактеристиките на целата
WEB презентација (WEB site).

Екстерните стилови се дефинираат исто како и интерните, а се внесуваат

во независни фајлови со наставка .css.

11. Пример за една ваква страница би била

https://www.w3schools.com/

9
 РЕФЕРЕНЦИ

https://99designs.com/blog/web-digital/types-of-websites/
https://www.markbrinker.com/parts-of-a-website
https://www.iteracy.com/blog/post/anatomy-of-a-web-page
https://mk.wikipedia.org/wiki/CSS
https://vanchokostadinov.files.wordpress.com

10
11