Ако некогаш си се заинтересирал како се прават сајтови или си разговарал со програмери, сигурно си слушнал за HTML.
HTML е кратенка од Hypertext Markup Language. Дозволува креирање на структурни секции како параграфи, наслови и линкови на веб страните.
HTML не е програмски јазик, што значи не дозволува креирање на динамичка функционалност. Неговата примена е во организација и форматирање на документи, слично како и Microsoft Word.
Работата со HTML се врши со едноставни структури на код (тагови и атрибути) за “обележување” или “опишување” (mark up) на страната. На пример, можеме да креираме параграф преку пишување на текст помеѓу отварачки <p> и затварачки </p> таг.
Како работи HTML?
HTML документите се фајлови со .html или .htm екстензија. Истите можат да се прегледаат со било кој пребарувач (Google Chrome, Safari, или Mozilla Firefox). Пребарувачот го чита HTML фајлот и ја рендерира, прикажува неговата содржина за да можат корисниците да ја гледаат.
Веб сајтовите обично имаат неколку различни HTML страни. На пример, skillup.mk ги содржи следните страни: Дома, Академии, Курсеви, За Деца и За Нас. Сите овие страни имаат посебни HTML документи. Секоја од страните содржи сет на тагови или елементи, кои можеме да ги гледаме како основни градежни блокови на страните. Со нив се креира хиерархија по која се подредува содржината во секции, параграфи, наслови и слично.
Повеќето HTML елементи имаат отварачки <> и затварачки </> таг. На пример:
Во овој пример, надворешниот дел е дефиниран од секцијата, или дивизија (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> тагот ја содржи целата содржина која се појавува на страната.
- Насловите имаат 6 нивоа, од <h1></h1> до <h6></h6>, кадешто h1 е највисокото ниво, главниот наслов, додека h6 е најниското ниво. Параграфите се дефинираат со <p></p>, додека цитатите користат <blockquote></blockquote> таг.
- Дивизиите се поголеми секции на содржина кои обично содржат неколку параграфи, слики, цитати и други помали елементи. Нив ги дефинираме и маркираме со <div></div> тагот. Овој div елемент може во себе да содржи дуг div елемент.
- За прикажување на листи, се користи <ol></ol> тагот за подредени листи, кога редоследот е важен, и <ul></ul> тагот за неподредени листи, во кои редоследот не е важен. Пример за неподредена листа:
Inline Тагови
Повеќето inline тагови се користат за форматирање на текст. На пример, <strong></strong> тагот ќе го болдира, здебели елементот, додека <em></em> тагот ќе го прикаже во italic, односно ќе го закоси.
Друг тип на inline тагови се хиперлинкови, кои бараат <a></a> тагови и href атрибути за да ја покажат дестинацијата на линкот.
И сликите се inline елементи. Слика може да се додаде со <img> таг, без затварачки таг, но треба да се додаде src атрибут за да се одреди патеката на сликата:
Предности и недостатоци на 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 ги претстатува неговите движења и однесување.
Други статии:
Андреј е вистинска легенда, а на вистинските легенди не им треба храна и вода, само добро друштво и добра забава. 1.Што ќе им препорачаш на твоите дома? Да ве... 10 Jan.
Андреј, злато од дете, кога го викнавме на кафе и интервју веднаш го запали моторот и дојде. Само му фалат патики со лепенки за да не касни. 1.Што ќе им препорача... 03 Jan.
Дориа за 10 години ИЛИ ќе биде најјакиот програмер во светот ИЛИ ќе отвори ресторан. Ама како и да е, телефон од дома мора да и купат. 1.Што ќе им препорачаш... 21 Nov.
