Израда веб страница | HTML

Ваши текстови

Након дужег временског периода од дана када је објављена најава за серијал, вријеме је за први туторијал који ће вас увести у свијет HTML-а и CSS-а. Прије него што кренемо даље, упутио бих ријечи извињења свима онима који су хтјели да наставе учити веб програмирање на овој страници, а нису могли зато што нисам могао пронаћи времена због силних обавеза које су ме снашле.

Морате знати да не постоји експерт у HTML-у и CSS-у. На примјер одете на разговор за посао (веб дизајнера наравно, не мислим на комуналије) и неко вам постави питање: „Да ли познајете CSS и HTML?“ – тај сценарио сигурно нећете доживјети. HTML је јако једноставан, а када вам са праксом у меморију уђе нешто од CSS синтаксе, онда ћете без проблема баратати са израдом једноставних веб страница које ће вам на почетку изгледати супер, а касније ћете видјети да је то безвезе и да нисте у фазону.

Након што се укратко упознате са основама, ја ћу вам конкретно дати веб локације помоћу којих можете проширити своје знање о програмском језику којег обрађујемо. Не знам какав ми је аудиториј, али они који се до сада нису сусретали са програмским језицима требали би знати да они заиста имају обилну синтаксу и да ћете једноставно морати користити Гугл да се подсјетите сл.

Лично познајем доста професионалних девелопера испред којих су стално књиге. Ако не знате да користите Гугл и да тражите литературу која се тиче ваше области, вјерујте, џаба вам сви туторијали јер они од вас никада неће направити професионалца.

И да … зашто не знам какав ми је аудиториј?! Зато што су коментари на прошлом чланку били невезани за њега, али оно баш – тотално. Надам се да ће овај пут коментари садржавати ваша искуства, проблеме, примједбе итд. а не ваша неисправна тумачења стихова/ајета из тамо неке свете књиге. Част изузецима којима се овим путем захваљујем. Мир вама! (ово нема везе са папом Фрањом)

HTML

Кога интересује хисторија HTML-а или можда од чега је ово акроним итд. нека укуца само „HTML history“ или евентуално „курсеви енглеског“ ако се са претходним упитом тешко сналази. У основи, HTML је костур странице који садржи све податке. Оно што радите са CSS-ом јесте да само те податке обликујете.

У HTML-у ви дефинишете да ће на вашој веб страници писати BANANA, али путем CSS-а ви дајете тој ријечи боју (жута, црна, зелена; какву већ једете), а затим повећате фонт итд. Разумјели? Ако нисте, ево још бољи и сликовитији примјер од банане. Замислите да је Дарко овај блог направио само у HTML-у. Како би страница изгледала?

ТРЕНУТНО: http://i.imgur.com/DTkeFRv.png

БЕЗ СТИЛОВА (само HTML): http://i.imgur.com/wrIFduz.png

ТАГОВИ

Вријеме је да се фокусирамо на код и направимо костур за страницу коју ћемо обликовати путем CSS-а у наредном туторијалу.

Оно што чини основу HTML кода су тагови, а у таговима се пише одређени текст. Како уочити таг? Једноставно – он се састоји од < и >. Банални таг за болдирање текста је <b>, односно <b> и </b>. Сваки овај таг се састоји од 3 дијела. Први дио тага је само његово отварање нпр. <b>, затим други дио тага је текст што је конкретно у нашем случају текст којег желимо болдирати, а затим након што све завршимо напишемо </b> гдје ова коса црта означава завршетак тага. Када не би њу ставили онда би се тај таг пренио на цијели остатак кода.

КОД ПРИКАЗ УЖИВО
Желио бих ово подебљати Желио бих ово подебљати
Жалио бих <b> ово подебљати Жалио бих oво подебљати
Жалио бих <b> ово </b> подебљати Жалио бих oво подебљати
Имају изузеци, нпр. <hr> таг који служи да прикаже хоризонталну линију. Има логике? Горе имате таг који се отвори, па се потом затвори јер у себи обухвата дио текста на који се односи. Да ли вам је потребно исто то и за линије? Не! Линија је линија, довољно је написати <hr> и појавит ће се, нема потребе за </hr> па да у њу иде неки текст. Исто важи за <br> таг који ће учинити да се текст пребаци у ред испод.

Касније ћемо споменути ове тагове + тагове којима се могу додијелити одређена својства (атрибути).

ИЗРАДА ПРВЕ ВЕБ СТРАНИЦЕ

Ви можете написати у вашем текстуалном едитору код из горе наведене табеле и он ће функционисати када га спремите као .html датотеку. Али, ако ја желим да промијеним назив странице који ће се приказивати у табу браузера или ако желим да укључим неку датотеку у сами index.html, ех ту већ настаје проблем. Прецизније речено, ми морамо користити код који ће браузеру рећи који дио да прикаже кориснику, а који дио да врти ‘испод хаубе’.

Када отворимо наш текстуалном едитору (ко нема инсталиран нека користи Tryit Editor online) прво што ћемо урадити јесте да написати HTML таг на начин да га отворимо и затворимо. На овај начин ми смо почели нашу страницу, а уједно је и завршили са </html> тагом.

Унутар <html> и </html> тагова иду сада сви други тагови јер смо рекли да се HTML састоји од тагова и текста. Конкретно, ставићемо <head> и </head> унутар <html> и </html>.

Требало би овако изгледати:

<html>
   <head>
   </head>
</html>

Да ли мора бити баш овако написано? Што се тиче синтаксе – ДА, али што се тиче одвајања у редове итд. – НЕ. Једноставно ви можете читав код написати у једној линији:

<html><head></head></html>

Али то није прегледно, тешко се сналази у овоме коду па зато се користи индентација, односно увлачење редова тако да творе логичку цјелину. Довољно је да у едитору селектирате текст и стиснете типку ТАБ.

<html>
   <head>
   </head>
</html>

Да детаљно анализирамо прије него што пређемо даље: HTML је основни таг који садржава читаву страницу. Са уношењем <html> ми започињемо страницу, а са </html> ми је завршавамо. Једноставно! Сада желимо да убацимо <head> у којем ће бити информације које браузер неће приказивати кориснику, али тај <head> је саставни дио странице, а рекли смо да читава страница мора ићи у <html> тагове па га једноставно убацимо унутар <html>, односно отворимо га, а затим затворимо.

И напокон, задњи таг којег ћемо укључити у основу наше веб странице је <body>. Погодите чему он служи! Само име говори да он чини тијело странице, односно све тагове, а самим тим и слике, текстове, форме, табеле итд. – све то иде у body. Све што се нађе између <body> и </body> ће бити видљиво кориснику, а све оно унутар <head> и </head> ће слати браузеру информације које се неће резултирати на <body> (осим у случају када укључите .CSS који ће давати облик подацима у body-ју, али то се поново не тиче самог мијењања садржаја body-ја него његовог обликовања).

Можете ли већ сада претпоставити гдје ће се налазити <body> и </body>? Налазит ће се унутар HTML тага, али ван HEAD тага.

<html>
   <head>
   </head>
   <body>
   </body>
</html>

Ако ово покренете – неће се ништа дешавати јер унутар ових тагова који се отварају и затварају не стоји ништа. Ове тагове називамо СТРУКТУРНИМ ТАГОВИМА. Унутар ових структурних тагова ће бити остали текустални тагови и сл.

Споменули смо горе наслов странице у табу браузера. За то користимо <title> и </title> (у даљњем тексту: title tag). С обзиром да се то не приказује на нашој страници односно у том ‘бијелом простору’ онда ћемо title tag смјестити унутар head тага. Као што смо горе рекли, унутар тага иде неки текст на који ће тај таг бити примијењен па ћемо у овом случају унутар title tagа написати назив наше странице.

Унутар body тага написат ћемо пар реченица које желимо да прикажемо.

<html>
   <head>
      <title> Моја прва веб страница </title>
   </head>
   <body>
      Овдје ћу смјештати све текстове и слике које желим подијелити с вама.
   </body>
</html>

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

С обзиром да већ претпостављам да сте све ово лијепо усвојили, одмах ћемо набацати пар тагова и распоредити их на страници без објашњавања како-зашто јер смо то већ пар пута објаснили. Све тагове које будем наводио односиће се на BODY, односно тијело странице.

<hX> Наслов/поднаслов </hX> гдје X означава број од 1 до 6. Код овог тага, број 1 означава највећу вриједност, док број 6 означава најмању.

<p> Параграф </p> означава параграф. Једноставно, ако желите ваш текст да подијелите у цјелине – користите за сваки параграф <p> и </p>. За они који не знају шта је параграф, ово се може представити као текст који ће за 2 линије бити одвојен од осталог текста.

Поставља се сада питање, како распоредити тагове унутар тагова? Нпр. Ако имате параграф, а у параграфу желите да болдирате текст. Некима је то јако једноставно за схватити, а неки имају проблем. Управо због тога требају се играти кодом и стално нешто ново покушавати. У овом нашем случају, „p“ таг ће створити параграф, а болидрање дијела параграфа је поново унутар параграфа, сто знаци да је параграф приоритет над <b>. Користећи све тагове које смо до сада научили, написаћу код неке једноставне веб странице и с тим завршити овај туторијал.

<html>
   <head>
      <title> Папак </title>
   </head>
   <body>
      <h1>Шта је папак?</h1>
      <p>Папак је назив за прст код папкара. Примјери животиња које посједују папке су краве, козе, овце, свиње, јелени итд.</p>
      <p>Папкари посједују по два папка на <b> свакој </b> нози који су хомологни трећем и четвртом прсту људске руке.</p>
   </body>
</html>

ЈОШ НЕКЕ СИТНИЦЕ

Некад се често почетници запитају: „Зашто користим H1 таг ако могу написати нормално текст којег ћу повећати и болдирати у CSS-у?“. Одговор ће сам доћи када кренете радити веће вебстранице користећи само HTML и CSS.

Када ваша страница буде имала подстранице (нпр. НАСЛОВНА, О НАМА – на то мислим) и када на свакој тој страници буде био наслов, а ви хоћете да промијените наслов у црвену боју – онда ћете схватити да ћете кориштењем h1 тага моћи преко само једне линије одредити да сви наслови буду црвени, али и да касније у 2 секунде промијените ту боју у неку другу умјесто да идете мијењати сваки дио кода посебно итд. Учите се од почетка све лијепо слагати у цјелине. Када будемо обрадили класе и id-ове пуно тога ће бити јасније и моћи ћете ући у срж HTML-а.

КРАЈ!

То је то! Надам се да је туторијал био јасан, практичан и занимљив. Волио бих да ме све што вас интересује упитате у коментарима па макар питање било „Како си извукао HTML са Даркове странице?“ итд. Са вашим приједлозима можете само побољшати квалитет туторијала.