Добродошли на моју веб страницу.
Знам, није толико узбудљива веб страница.
Комплетно је празна, али свака веб страница тако почиње,
а ускоро ћу вам показати како да изградите ову страницу.
Прв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 изазов.