Ако желите да постанете фронт-енд програмер, један од најчешћих савета који ћете добити је да научите ХТМЛ. Језик за означавање хипертекста, скраћено ХТМЛ, је основа већине веб страница.
ХТМЛ се састоји од различитих ствари, као што су ознаке, атрибути и елементи. Наш фокус ће бити ХТМЛ ознаке. Користимо ХТМЛ ознаке да бисмо прегледачима рекли како да структурирају садржај у наслове, наслове, пасусе, слике и још много тога. ХТМЛ ознаке су стога попут кључних речи које дефинишу како ће претраживач приказати или форматирати садржај.
Сервери читају ХТМЛ ознаке од врха до дна. Не постоји ограничење броја ХТМЛ ознака које веб страница треба да има.
- Све ХТМЛ ознаке су затворене у <>
- Свака ХТМЛ ознака обавља другу функцију
- Већина ХТМЛ ознака има отварање <таг> и затварање
Преглед садржаја
ХТМЛ ознаке наспрам ХТМЛ елемената наспрам ХТМЛ атрибута
Већина људи користи термине ХТМЛ ознаке и елементе наизменично. Али да ли су исти? Технички, ХТМЛ елементи и ХТМЛ ознаке се разликују.
ХТМЛ ознаке дефинишу ХТМЛ елементе. Да би се ово постигло, садржај се умотава коришћењем назива ознаке за отварање и затварање која одговара садржају ознаке са којом радимо.
Ово је пример ХТМЛ елемента:
<p> This is a paragraph </p>
<п> је пример ХТМЛ ознаке
ХТМЛ атрибути дају додатне информације о ХТМЛ елементима у документу. Атрибути се налазе унутар ХТМЛ елемената.
Ово је пример ХТМЛ атрибута
<button id=" SubmitOrder" class="btn">Order</button>
ХТМЛ ознаке би сви требало да знају
ХТМЛ као језик за означавање је еволуирао током година откако га је Тим Бернерс-Лее представио 1993. Прва ХТМЛ верзија имала је 18 ознака. Нове ознаке се додају са сваком ХТМЛ верзијом; најновија надоградња је била ХТМЛ5 2014.
Детаљно поређење ХТМЛ-а и ХТМЛ5 показује да овај други има семантичке ознаке као што су <артицле>, <хеадер> и <фоотер> које јасно описују садржај. Сада имамо преко 100 ХТМЛ ознака. Следе неке од најпопуларнијих ознака које треба да знате:
ДОЦТИПЕ технички није ознака већ декларација која говори претраживачу која врста датотеке ће бити учитана. Ова ознака говори претраживачу тип ХТМЛ-а који ће бити учитан.
У ХТМЛ5, своју датотеку можете декларисати као
<!DOCTYPE html>
Ор
<!doctype html>
Напомена: Декларација нема завршну ознаку и не разликује велика и мала слова.
<хтмл>
Ознака <хтмл> ….. долази после ознаке ДОЦТИПЕ. Ова ознака дефинише документ као веб страницу; сваки други елемент ће бити угнежђен унутра. ХТМЛ ознака одређује почетак и крај ХТМЛ документа.
Ознака <хтмл> је представљена као;
<html>Content</html>
<хеад>
Главни део ХТМЛ документа представљен је ознаком <хеад>. Ова ознака је затворена унутар ознаке <хтмл> и даје опште информације о веб страници.
Ознака <хеад> садржи друге ознаке које дају специфичности веб странице, као што су наслов странице и аутор. Садржај ове ознаке се не приказује на веб страници
Ово је синтакса ознаке <хеад>;
<head> …….. </head>
<титле>
Ознака <титле> декларише наслов веб странице. Ова ознака је затворена унутар ознаке <хеад>. Ознака <титле> ће се појавити на насловној траци или картици у прозору прегледача, али не и на стварној веб страници.
Синтакса за ознаку <титле> је;
<title>HTML Tags for Beginners</title>
Када се налази унутар ознаке <хеад>, она ће се појавити као;
<head> <title>HTML Tags for Beginners</title> </head>
<боди>
Ознака <боди> приказује сав видљиви садржај на веб страници. Слике, везе, обичан текст, видео снимци и друго могу се наћи унутар ознака <боди> и .
Неке од других ознака које ћете пронаћи унутар тела укључују <п> ознаку за пасус, <а> ознаку за слике, <стронг> ознаку за подебљан текст и ознаку <ол> за уређену листу, да поменемо неке.
Синтакса за ознаку <боди> је;
<body> Content </body>
Ознаке <х1> до <х6>
У ХТМЛ документу може бити до 6 ознака наслова. Свака од ознака је представљена бројем који почиње од 1 до 6 као <х1>, <х2>, <х3>, <х4>, <х5> и <х6>.
Х1 је највећа ознака наслова, док је Х6 најмања.
У ХТМЛ документу ознаке наслова могу бити представљене на следећи начин:
<h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>
Ознаке <х1> до <х6> су затворене унутар ознаке <боди>.
На пример, ознака ,<Х1> ће бити затворена као;
<body> <h1> This is heading 1 >/h1> </body>
<п>
Ознака <п> или једноставно ознака пасуса се користи када желите да структурирате садржај у пасус. Притиском на дугме ‘ентер’ у ХТМЛ документу у уређивачу кода неће бити креиран нови пасус.
Ако желите више од једног пасуса, морате да користите неколико ознака <п> у свом документу. Ознаке пасуса треба да буду затворене унутар ознаке <боди >.
Синтакса за ознаку пасуса је;
<p> ….some content here….</p>
Ако желите да имате четири пасуса, ваш код ће бити структуриран као;
<body> <p>Content for first paragraph.</p> <p>Content for the second paragraph.</p> <p>Content for the fourth paragraph.</p> </body>
<б>
Ознака <б> или једноставно болд ће форматирати сваки садржај између почетне <б> и завршне као подебљано.
Подебљана ознака може бити између наслова као што је Х1 или чак унутар ознаке пасуса.
Ово су примери подебљане ознаке;
<b> Bold Tag </b>
Фраза „Подебљана ознака“ ће се појавити подебљано.
<h1> Keeping it cool, <b> Fifth edition </b>, the winners edition </h1>
Пето издање ће бити подебљано.
<и>
Курзивна ознака, означена са <и>, исписује текст унутар ознака курзивом.
На пример, ако имамо
<i> These are italics </i>
Речи „ово су курзив“ биће исписане курзивом.
<у>
Ознака за подвлачење, или <у>, се користи када желите да подвучете одређени део текста у ХТМЛ документу.
На пример, ако имамо;
<u> underline these words </u>
Фраза између ознака ће бити подвучена.
<центер>
Ознака центра, <центер>, користи се за центрирање садржаја на ХТМЛ документу.
На пример, ако имамо ознаку х2 написану као <х2> Центрирање садржаја у ХТМЛ-у , можемо је центрирати на следећи начин;
<center> <h2> Centering Content in HTML </h2> </center>
<спан>
Спан ознака, <спан>, је генерички уграђени контејнер који не долази са подразумеваним стилом. Можете да користите ознаку спан да групишете текстове које желите да стилизујете.
Можете проширити ознаку унутар других ознака као што су наслови и пасусе;
<h2> Learn HTML <span> from experts </span> and be ready for the market </h2>
<p> Learn HTML <span> from experts </span> and be ready for the market </p>
<див>
Ознака поделе, скраћено див, је ознака која вам омогућава да групишете различите ознаке у ХТМЛ документу.
Ознаци див може се дати ‘класа’ за додавање спољашњег стила помоћу ЦСС-а.
Овако ће бити представљен див који обухвата ознаке х1, х2 и параграф.
<div > <h1> Learn HTML </h1> <h2> HTML Tags </h2> <p> HTML is a markup language……… </p> </div>
<ем>
Нагласак или ознака <ем> се користи за истицање одређених речи у ХТМЛ документу.
Садржај између ознака <ем> ће изгледати косо или курзивом.
Наглашени садржај унутар пасуса може се појавити у уређивачу кода ће се појавити као;
<p> The meeting will start at <em> 0800 hrs </em>, please keep time </p>
<суп>
Ознака <суп> или суперсцрипт омогућава да приложени текст буде изнад остатка. Савршен пример је када желите да квадрирате број Кс и математички га представите да бисте добили Кс2
Синтакса за <суп> унутар ознаке пасуса ће бити;
<H1> Harveys <sup>TM </sup> Company Limited </H1>
<суб>
Ознака субсцрипт или <суб> је супротна од ознаке суперсцрипт. Садржај затворен у ознаци <суб> ће се појавити испод нормалног реда текста. Савршен пример је писање хемијске формуле воде као Х20.
Синтакса за субсцрипт ознаку ће бити;
Remember that H <sub> 2 </sub> 0 is the chemical formula for water
<бр>
<бр> је самозатварајућа ознака која означава паузу. Сав садржај после <бр> ће почети у новом реду.
Синтакса за <бр> унутар пасуса ће бити;
<p> HTML is the abbreviation of Hypertext Markup Language <br> There has been an ongoing debate as to whether it is a programming language or not <br> However, we cannot downplay its importance <br> HTML has been used in more than 95% of websites today </p>
<ол> и <ли>
Ознака уређене листе или <ол> морају се користити са другом ознаком као што је <ли>.
Њих двоје се могу појавити у уређивачу кода као;
<ol> <li> Asia </li> <li> Africa </li> <li> Europe </li> </ol>
Када се прикаже у претраживачу, садржај ће се појавити нумерисани.
<имг срц=””/>
Можда ћете желети да додате слику за визуелну привлачност или чак лого. Самозатварајућа ознака слике, <имг срц=””/>, добро долази у таквом случају.
Синтакса за ознаку слике ће бити;
<img src=“https://cdn.pixabay.com/photo/2015/08/19/15/44/seo-896175_960_720.png”/>
Садржај затворен под наводницима представља изворну УРЛ адресу.
Окончање
Постоји преко 100 ХТМЛ ознака, али горе наведене су оне које бисте требали знати као почетник. ХТМЛ је подржан у већини уређивача кода и тако сте сигурни да никада нећете погрешити када почнете да учите.