Пример ХТМЛ кода: Веб Девелопмент Басицс

ХТМЛ је, без претјеривања, главни језик Интернета, рођен с њим. Његова одговорност укључује основни дизајн веб страница, њихово логичко структурирање и обликовање. Нема потребе за далеко од примјера ХТМЛ-а, само отворите прегледник. Сваки приказани сајт је ХТМЛ који тражите. Да бисте га боље упознали, погледајте конзолу за развојне програмере.

Иза сцене на Интернету

Отворите омиљени сајт у прегледачу Гоогле Цхроме. Овај претраживач има најпогоднији развојни панел, па је идеалан за учење.

Да бисте брзо дошли до панела, притисните тастер Ф12 на тастатури. Ако из неког разлога није успело, пронађите неопходну ставку у менију прегледача и изаберите је кликом на "Додатни алати"> "Алатке за програмере".

Отвориће се нови панел са неколико картица, од којих нам је потребан први - Елементи. Овде је описан цео ХТМЛ код тренутне странице.

Структура ХТМЛ документа

Помоћу панела могуће је на живом примјеру схватити како је локација уређена, како би видјели његове саставне дијелове. Важно је схватити да је коначни изглед омогућен не само ХТМЛ маркупом, већ и стиловима описаним помоћу ЦСС-а. На картици Елементс можете видети само основну структуру.

Све компоненте странице су распоређене у хијерархијском реду. Можете прегледати угњеждене ставке помоћу стрелица.

На пример, цела ХТМЛ страница је замотана у блок са именом ХТМЛ, унутар којег су смештени контејнери за главу и тело. Ако их проширите, унутар вас можете пронаћи још неколико нивоа елемената са различитим именима.

Све што се налази унутар секције главе није приказано у прегледачу. Једини изузетак је блок наслова који се приказује на картици. У "глави" сајта налазе се сервисне информације које су неопходне за исправан рад Интернет претраживача.

Насупрот томе, садржај дела тела је видљив кориснику. Конзола програмера вам чак омогућава да видите тачно где се сваки одређени блок налази на страници. Да бисте то урадили, само поставите курсор на њега.

Слика екрана приказује како се истиче навигациона трака:

На врху се налази и ДОЦТИПЕ елемент. Он се такође позива на податке о услугама.

Ознаке и њихови атрибути

ХТМЛ скраћеница дословно значи "Хипертект Маркуп Лангуаге". То јест, свака веб страница је само текст означен на одређени начин. За његово форматирање користе се посебни елементи - ознаке (дескриптори).

Да бисте разликовали ознаку од самог текста, она се налази у угластим заградама. Користећи пример ХТМЛ кода, можете видети разне ознаке: хтмл, хеад, боди, хеадер, див. Два су типа:

• Затварање ознака са садржајем има два дела и текст између њих. На пример, дескриптор заглавља се може затворити. Други део се разликује од првог присуством косе црте испред имена ознаке.
• Незатворени тагови без садржаја се састоје само од једног дела. Пример је мета ознака.

Напомињемо да су ХТМЛ дескриптори слободни да уграђују једни друге. Изузетак су неоткривене ознаке које немају садржај, стога се ништа не може уметнути у њих.

Важно је пратити закључну наредбу. У конзоли можете видети како се пажљиво налазе уграђене ручке. Спољни елемент се не може затворити пре унутрашњег.

Сваки таг може имати бројне параметре (атрибуте) који дефинирају његова својства. У ХТМЛ-у, примјер је дескриптор хипервезе а и његов хреф атрибут, који садржи адресу странице на коју ће се повезати када кликнете на везу.

Висуал Леарнинг ХТМЛ

За почетнике веб дизајнера, веб програмере и само људе који су заинтересовани за основе интернет технологије, учење ХТМЛ-а је први корак у дугом, занимљивом путовању. Постоје стотине курсева и уџбеника који презентују информације на најразличитије начине. Одабрати међу њима погодне није тешко.

Али без обзира колико је добар уџбеник, потребна су још два састојка за успјех:

• искуство самосталног слагања слога;
• проучавање ХТМЛ примера других људи.

Конзола програмера у популарним претраживачима (осим Гоогле Цхроме-а, добри панели се могу наћи у Мозилла Фирефок-у и Интернет Екплореру) је најбољи начин за истраживање веб страница. Омогућава вам да савладате основне шеме изгледа, научите да видите коначну презентацију кода и чак динамички уносите измене у њега.