3. 4. Дизајн статичких веб страна 3.4. Дизајн статичких веб страна. Упознавање радног окружењa алата за израду статичке - HTML презентације.

Веб дизајн обухвата све радње од тренутка када добијемо идеју да направимо сајт па до тренутка кад је сајт потпуно завршен. Wеб дизајн обухвата следеће: осмишљавање садржаја сајта, одабир назива сајта, регистрација домена и закупљивање хоста, графички wеб дизајн, програмирање сајта, оптимизација сајта за претраживаче, пуштање Веб сајта у рад.

У току израде, одржавања и коришћења Веб сајта потребно је поштовати ауторска права. То значи да на нашем сајту не смемо употребљавати нити качити било какав ауторским правима заштићени садржај без претходне дозволе аутора.

Припрема за вежбе Пре почетка вежбе неопходно је имати инсталиран програм Notepad++ и неки од интернет прегледача. Креирати један фолдер на десктопу под именом "Web dizajn" у коме ће се налазити сви фајлови и сав садржај и материјал који ћете користити у току ове вежбе. Сада покрените Notepad++, идите у Settings meni, Preferences, New document/Default directory картица и за Encoding odaberite одаберите UTF-8 да би вам била доступна латинична и ћирилична слова.

Увод у HTML и CSS HTML и CSS представљају технологије које се користе при дизајнирању wеб страница. HTML је скраћеница за Hypertext Markup Language и користи се за структуирање wеб стране, односно представља структурни опис елемената који сачињавају страну као и сам садржај тих елемената. CSS (Cascading Style Sheets) се користи за визуелно стилизовање HTML страна. На пример, користи се за поизиционирање елемената, бојење, форматирање текста, позадине, ивица, изгледа табела, слика итд. CSS код се може налазити унутар самог HTML документа или у посебном фајлу. Најчешће се CSS пише у одвојеном фајлу па се на начин који ћемо касније објаснити повезује са HTML документом да би стилови који се налазе у њему били примењиви.

Елементи и тагови HTML документ садржи обавезне елементе који чине костур стране. Елементи стране су описани такозваним таговима који се налазе унутар знакова за веће и мање. Постоје тагови које је потребно отворити и затворити а неки су самозатварајући. Пример тага који се затвара и начин на који се то ради: У датом примеру дат је таг који означава елемент пасуса (eng. paragraph) а који ћемо касније обрадити. Пример самозатварајућег тага је <br> (или <br/>) који служи као line break односно користи се за прелазак у нови ред. Самозатварајуће тагове је у HTML -у непотребно затварати па су тако дозвољени и < br > и < br /> таг.

Елементи унутар својих тагова такође могу садржати и неке атрибуте од којих су неки обавезни а неки опциони. Атрибути ближе описују елементе и могу и да утичу на изглед и понашање елемената. Пример атрибута који служи да додели идентификатор елементу пасуса је на слици (о идентификаторима ћемо касније): Сви атрибути имају назив и садржај који се налази у наводницима. У конкретном случају атрибут има назив id а његов садржај је prviPasus. Атрибути се налазе само у почетним ознакама елемената. Начин употребе тагова ће постати много јаснији кроз примере и вежбе који следе.