-
Добродошли на моју веб страницу.
-
Знам, није толико узбудљива веб страница.
-
Комплетно је празна,
али свака веб страница тако почиње,
-
а ускоро ћу вам показати
како да изградите ову страницу.
-
Првo ипак, дајте ми минут
-
да вас упознам са костуром
празне веб странице.
-
Свака веб страница почиње са
-
овом стварчицом забавног изгледа
на врху која се зове DOCTYPE.
-
То је само сигнал претраживачу
-
да је ова веб страница
написана у модерном HTML-у,
-
а не у старом, незграпном
и чудном HTML-у.
-
Даље, идемо на скроз први таг,
односно ознаку странице.
-
HTML је језик за означавање,
те је код њега све у вези са ознакама.
-
Таг је једна од ових ствари
-
која почиње са угластом заградом,
-
а завршава са другом угластом заградом.
-
Или ако волите математику,
можете мислити о њима
-
као о знаковима за мање и веће од.
-
Први таг сваке странице је увек
-
тај HTML таг тачно испод DOCTYPE.
-
Ово је почетни HTML таг,
-
а онда на дну странице
је овај завршни HTML таг,
-
који је исти осим што има ову косу црту,
-
која је јако важна.
-
HTML таг треба да садржи све остале тагове
-
који чине ову веб страницу.
-
Због тога се завршни HTML
појављује тек на дну странице.
-
Много HTML тагова
долази у паровима попут овог,
-
али не сви.
-
У реду. Испод HTML тага,
увек се налази HEAD таг.
-
Тај садржи тагове који помажу
претраживачу да рендерује страницу,
-
али не садржи ништа
што корисник заправо види.
-
Ту је овај МЕТА таг који претраживачу пружа
-
више детаља око тога
како да рендерује страницу.
-
На пример, ако користите типичне карактере
-
као што су они из енглеског језика,
-
а не карактере теже за рендеровање
-
из на пример арапског језика,
-
онда вам треба мета charset једнако utf-8.
-
Затим је ту овај TITLE таг,
-
који претраживач користи
да подеси назив странице.
-
А то је оно што се приказује на картици
на врховима претраживача
-
и у букмаркцима и у резултатима претрага.
-
Овде на Кхан Академији, наслов се приказује
изнад наше веб странице.
-
Дајте да променим наслов.
-
Направићу страницу за све о зечевима.
-
Дакле, назваћу је "Све о зечевима"
-
и можда можете видети
како се то мења изнад.
-
Фино, у реду, сада смо
завршили са овим детаљима
-
тако да завршавамо HEAD таг
и прелазимо на таг
-
где ће се све дешавати, BODY таг.
-
Прилично је досадно сада,
само почетак и крај.
-
Ок. Шта би требала да додам?
-
Па, правим веб страницу о зечевима,
-
тако да би то вероватно
требала да нагласим
-
у баш великом наслову на врху.
-
Да додамо наслов, користимо H1 таг.
-
Све о зечевима, сјајно.
-
Заправо, имамо шест тагова
које можемо користити
-
за наслове H1, H2, H3, H4, H5 и H6.
-
H1 је за најважније наслове на страници,
-
а H6 је најмање важан.
-
Додаћу још пар наслова
за остале секције.
-
Користићу H2 пошто су ово нешто
-
мање важне секције.
-
И неке песме... у реду, одлично.
-
Сада додајмо неке информације.
-
Па, моја циљна популација за ову страницу
-
су ванземаљци који никада
нису видели зечеве.
-
Дакле, боље да им дам добар опис зечева.
-
Заправо, мислим да ми треба
цео пасус информација.
-
Како могу да означим пасус у HTML-у?
-
Помоћу Р тага, наравно.
-
Ставимо Р таг, а онда само идем даље
-
и налепим информације
-
тако да не морате да ме гледате
како све то куцам.
-
Предивно.
-
Ок. Сада ће ванземаљцима требати
песма којом ће поздравити зечеве,
-
па ћу им дати лирике
моје лично омиљене песме.
-
Још једном, користите тај Р таг
за то и налепите песму
-
"Мали зека Фуфу".
Ох, тако добра песма!
-
Али... ух, ох... све се приказује
у једној истој линији.
-
Како ће ванземаљци знати када је пауза?
-
Зашто претраживач није рендеровао
-
преломе редова које сам овде ставила?
-
Па заправо, претраживачи углавном
игноришу прелом редова
-
и размаке у вашем HTML-u.
-
А, ако желимо да претраживач
рендерује прелом реда,
-
морамо то експлицитно да му кажемо,
коришћењем још једног тага,
-
BR тага, који представља прелом (енг: break).
-
Добро, проћи ћу кроз ово
и додаћу BR-ове после сваке линије.
-
Сада личи на лирике.
-
Да ли сте приметили
нешто забавно око BR?
-
Нема завршног тага!
-
И, ако размислите о томе,
-
прелом реда не садржи
никакав садржај,
-
тако да нема ништа
иза чега би се завршио.
-
Само почетни таг је све што нам треба.
-
И ту смо.
-
Ванземаљци ће научити основе о зечевима,
-
а ви сте научили основе HTML-a.
-
Пошто завршим са причом,
-
поиграјте се са овим
и покушајте да мењате ствари.
-
Па када будете спремни,
продужите на ваш први HTML изазов.
