Ако некогаш си се заинтересирал како се прават сајтови или си разговарал со програмери, сигурно си слушнал за HTML.
HTML е кратенка од Hypertext Markup Language. Дозволува креирање на структурни секции како параграфи, наслови и линкови на веб страните.
HTML не е програмски јазик, што значи не дозволува креирање на динамичка функционалност. Неговата примена е во организација и форматирање на документи, слично како и Microsoft Word.
Работата со HTML се врши со едноставни структури на код (тагови и атрибути) за “обележување” или “опишување” (mark up) на страната. На пример, можеме да креираме параграф преку пишување на текст помеѓу отварачки <p> и затварачки </p> таг.
<p>Вака се прави параграф во HTML.</p>
<p>Нема ограничување на бројот на параграфи</p>
Како работи HTML?
HTML документите се фајлови со .html или .htm екстензија. Истите можат да се прегледаат со било кој пребарувач (Google Chrome, Safari, или Mozilla Firefox). Пребарувачот го чита HTML фајлот и ја рендерира, прикажува неговата содржина за да можат корисниците да ја гледаат.
Веб сајтовите обично имаат неколку различни HTML страни. На пример, skillup.mk ги содржи следните страни: Дома, Академии, Курсеви, За Деца и За Нас. Сите овие страни имаат посебни HTML документи. Секоја од страните содржи сет на тагови или елементи, кои можеме да ги гледаме како основни градежни блокови на страните. Со нив се креира хиерархија по која се подредува содржината во секции, параграфи, наслови и слично.
Повеќето HTML елементи имаат отварачки <> и затварачки </> таг. На пример:
<div>
<h1>Главен наслов</h1>
<h2>Поднаслов</h2>
<p>Прв параграф</p>
<img src="/" alt="Слика">
<p>Втор праграф <a href="https://example.com">hyperlink</a></p>
</div>
Во овој пример, надворешниот дел е дефиниран од секцијата, или дивизија (division), во форма на (<div></div>). Оваа секција содржи наслов (<h1></h1>), поднаслов (<h2></h2>), два параграфа (<p></p>), и слика (<img>). Вториот параграф содржи линк (<a></a>), со href атрибут кој го содржи линкот на страната кон која го пренасочуваме корисникот доколку кликне на него. Тагот на сликата има два атрибута: src за патеката на сликата, и alt за опис на сликата.
Најкористени HTML Тагови
Постојат два главни типа на HTML тагови: block-level (блокови) и inline тагови (внатрелиниски).
- Block-level елементите го заземаат целиот достапен простор и секогаш започнуваат со нова линија во документот. Кога ќе се постават, овие тагови ги “туркаат” сите други елементи во нова линија. Наслов или параграф се добар пример за block-level тагови.
- Inline елементите земаат онолку простор колку што е потребен за содржината во нив, и не започнуваат нова линија на страната. Најчесто служат за да ја форматираат содржината во block-level елементите. Линковите во текстот се добар пример за inline тагови.
Block-Level Тагови
Постојат три block-level тагови што секој HTML документ мора да ги содржи: <html>, <head>, и <body>.
- <html></html> е таг со највисоко ниво, и ја врамува целата страна.
- <head></head> тагот содржи мета податоци (подтоци ко исодржат информации за други податоци), како на пример насловот на страната.
- <body></body> тагот ја содржи целата содржина која се појавува на страната.
<html>
<head>
<!-- META INFORMATION -->
</head>
<body>
<!-- PAGE CONTENT -->
</body>
</html>
- Насловите имаат 6 нивоа, од <h1></h1> до <h6></h6>, кадешто h1 е највисокото ниво, главниот наслов, додека h6 е најниското ниво. Параграфите се дефинираат со <p></p>, додека цитатите користат <blockquote></blockquote> таг.
- Дивизиите се поголеми секции на содржина кои обично содржат неколку параграфи, слики, цитати и други помали елементи. Нив ги дефинираме и маркираме со <div></div> тагот. Овој div елемент може во себе да содржи дуг div елемент.
- За прикажување на листи, се користи <ol></ol> тагот за подредени листи, кога редоследот е важен, и <ul></ul> тагот за неподредени листи, во кои редоследот не е важен. Пример за неподредена листа:
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3<li>
</ul>
Inline Тагови
Повеќето inline тагови се користат за форматирање на текст. На пример, <strong></strong> тагот ќе го болдира, здебели елементот, додека <em></em> тагот ќе го прикаже во italic, односно ќе го закоси.
Друг тип на inline тагови се хиперлинкови, кои бараат <a></a> тагови и href атрибути за да ја покажат дестинацијата на линкот.
<a href="https://example.com/">Click me!</a>
И сликите се inline елементи. Слика може да се додаде со <img> таг, без затварачки таг, но треба да се додаде src атрибут за да се одреди патеката на сликата:
<img src="/images/example.jpg" alt="Example image">
Предности и недостатоци на HTML
Како и се друго во животот, HTML има свои силни страни и свои ограничувања.
Предности:- Масовно користена технологија, за кој постојат многу информации, ресурси огромна заедница за поддршка.
- Работи стандардно и без потреба од доработка на сите пребарувачи.
- Прилично е лесен за учење.
- Бесплатен и отворен за користење.
- Чисто и конзистентно форматирање.
- Лесно се интегрира со бекенд јазиците за програмирање, како ASP.NEТ или PHP.
- Најмногу се користи за статички страни. За динамички страни има потреба од користење на JavaScript или некој бекенд јазик како ASP.NET или PHP.
- Не дозволува имплементирање на логика, што значи сите веб страни мора да се креираат посебно, иако користат слични елементи, како header или footer.
- Некои прелистувачи тешко прифаќаат нови својства и функции.
- Тешко е да се предвиди како прелистувачот ќе го прикаже кодот, бидејќи старите прелистувачот не секогаш ги препознаваат и прикажуваат новите тагови.
Врската помеѓу HTML, CSS и JavaScript
Иако HTML е доста моќен, сепак тоа не е доволно за да се направи професионален и целосно респонсивен сајт. Како технологија се користи за додавање на текстуални елементи и креирање на структура на содржината.
Меѓутоа, HTML работи одлично со останатите фронт енд јазици и технологии: CSS (Cascading Style Sheets), и JavaScript. Во комбинација, овие три технологии можат да креираат богато искуство за корисникот и имплементација на доста напредни функционалности.
- CSS е одговорен за стилирање, или украсување на позадината, боите, распоредот, растојанието и слично
- JavaScript се користи за додавање на динамички функционалности, како слајдери, галерии и слично
Ако HTML го претставиме како гол човек, тогаш CSS е облеката на човекот, a JavaScript ги претстатува неговите движења и однесување.
Други статии
29 Јан.
Што е Back End Програмирање?
Back end програмирањето е поврзано со позадинскиот, или серверскиот дел на една веб страна или апликација. Сѐ она што ние како корисници не го гледаме, но е многу важно за функционалноста на сајтот....
13 Јан.
Front end vs Back end програмер - што е разликата?
Размислуваш да почнеш да учиш да програмираш? Слушна за front end и back end програмирање а не знаеш што е што....
20 Дек.
Front-end програмирање.
Кодот што го пишуваат програмерите работи на страната на пребарувачот. Тоа се луѓе кои го имплемтираат изгледот на сајтот преку јзици за програмирање како HTML, CSS и JavaScript...
Адреса
Костурска бр.5 , Велес 1400