03 HTML Bootstrap Osnove

8/18/2019 03 HTML Bootstrap Osnove

1/12

.NET Okruženje - Nastavni materijaliTVZI.Cesar

.NET Okruženje

Vježba 3: HTML, Bootstrap

1


2/12


Sadržaj

Klijent-server komunikacija....................................................................................3

Osnove HT! je"ika............................................................................................... #

T$itter %ootstra&.................................................................................................... '

(ri) s*stem.........................................................................................................'

o)al................................................................................................................ 1+

,


3/12


Klijent-server komunikaija

Komunikacija i"meu klijenta &rimjerice/ $e0 0ro$sera i servera se o)vija

&utem "a2tjeva i o)ovora 4 klijent 5alje "a2tjev re6uest/ a server "a&rima

"a2tjev i 5alje o)ovor res&onse. Za2tjev je )e7niran s nekoliko važniji2)ijelova8

• !"L 4 svaki "a2tjev je naslovljen na neku 9:! a)resu/ koja se sastoji o)

&rotokola/ )omene/ &orta/ relativne &utanje relative &at2/ 9:!

&arametara. ;rimjer je)no takvo "a2tjeva 0i 0io

2tt&s8


4/12


9koliko na&ravimo reloa) stranice na kojoj smo trenutno/ možemo &rele)ati

toAno kako i"le)a "a2tjev i kako i"le)a o)ovor8

=


5/12


9koliko otvorimo stranicu koja na se0i ima @ormu "a unos &o)ataka/ možemo

vi)jeti i na5e &o)atke koji se 5alju ;OBT meto)om na server &omoDu isto alata8


6/12


Kako 0i moli ostvariti komunikaciju servera i klijenta/ &otre0no je &o"navati0arem HT! je"ik.

F


7/12


&snove HTML je'ika

B o0"irom )a je "nanje HT!-a usvojeno na o0ve"nom koleiju u &rvom

semestru/ i kasnije &rimjenjeno/ u ovom &olavlju )at De se samo osnovni &rele)

0itniji2 HT! elemenata i &rinci&a.

Container elementi

• +(tml 4 korijenski element stranice. 9nutar njea su jo5 G2ea) i

G0o)*• +(ead - sa)rži )irektive kao 5to su meta &o)aci o stranici/ naslov/

re@erence na klijentse skri&te ili stilove• +bod - element koji sa)rži ostale elemente "a &rika" sa)ržaja

• +div 4 o"naAava najAe5De kori5teni container element koji "au"ima cijelu

liniju u HT! strukturi osim ako mu je &ostavljeno &lutanje 4 oat. 9nutar

njea elementi se slažu ovisno o svojim &ostavkama• +span - element koji neDe "au"eti cijelu liniju/ veD samo onu 5irinu koja

mu je &otre0na. 9 njea se )alje mou slo0o)no umetati ostali elementi• +table - služi "a ta0liAni ras&ore) elemenata. Koristi )o)atno elemente

+t(/+tr/ +td

Elementi za rukovanje unešenim vrijednostima

• +.orm - element unutar koje se nala"e +input elementi Aije

vrije)nosti se 5alju ;OBT meto)om na server•

+input - &ostoji nekoliko ra"liAiti2 ti&ova Gin&ut elemenata/ )je svakisluži "a ra"ni stan)ar)ni ti& &o)ataka koji se tre0a &oslati na servero +input tpe/0te1t0 2 - je)nostavni element "a unos tekstao +input tpe/0submit0 - iscrtava se u o0liku um0a/ na Aiji

&ritisak se cijela @orma i njene vrije)nosti 5alju na server1

• +selet - vrlo sliAan in&ut elementu/ no sa)rži &re)e7niran sku&

vrije)nosti koje se mou o)a0rati• +te1tarea+te1tarea - kontrola "a unos teksta koja &o)ržava vi5e

linija une5eno teksta

#adatak 3458 o)i7cirat Demo Contact.cshtml )atoteku na naAin )a )o)amo

.orm element i nekoliko in&ut elemenata i &o5aljemo &o)atke koje De korisnikunijeti na server te i2 nakon toa is&i5emo korisniku na )ruoj stranici.

1. ;rouAiti Home6ontroller klasu/ &ose0no akcije 6ontat i

Submit7uer/ te &roAitati komentare u ko)u,. 9 6ontat4s(tml kreirati @ormu HT! @orm element koja 5alje &o)atke

na 9:!


8/12


c. ;oruku multiline). Ti& &oruke &re)e7nirana lista vrije)nosti8 &o2vala/ u&it/ &oslovni

&rije)lo/ žal0ae. C2eck0oL kontrolu "a o"naAavanje )a želimo &rimati ne$sletter@. Bu0mit um0

=. Testirati slanje &o)ataka i &romotriti "a2tjev i o)ovor servera. 9 akciji Submit7uer &roAitati vrije)nosti &oslane s @orme &reko

&arametra akcije koji je klase 8orm6olletion/ te sastaviti o&isnu

reAenicu koju je &otre0no &roslije)iti kao o)ovor nakon slanja &o)ataka.

:eAenica tre0a 0iti o0lika8 Mrai IE ;:EZIE EI! "a&rimili smo va5u

&oruku te De vam se netko u0r"o javiti. Ba)ržaj va5e &oruke je8 TI;

;O:9KEP B:ZQ ;O:9KE. Takoer/ o0avijestit Demo vas


9/12


T9itter Bootstrap

Ili &o&ularnije/ samo bootstrap/ je sku& javascri&t i CBB 0i0lioteka koje

omouDavaju lak5i ra"voj $e0 a&likacija/ &ri tome inicijalno &ostavljajuDi )o0ar

)i"ajn i &ružajuDi ni" @unkcionalnosti koje su &otre0ne u veDini sluAajeva &rilikomi"ra)e $e0 stranica i $e0 a&likacija.

B o0"irom na veliku koliAinu &ostojeDe )okumentacije,/ ov)je De 0iti samo

istaknuto nekoliko lavni2 &rinci&a i"ra)e a&likacija temeljeni2 na 0ootstra&

0i0liotekama.

)rid sstem3

I)eja je )a se cijelo korisniAko suAelje &o)ijeli u mrežu manji2 )ijelova/ koji se

)alje )ijele o&et u mrežu/ it). %itno svojstvo ovakve mreže je )a je manje-vi5e

automatski &rilao)ljivo veliAini ekrana mo0iteli/ ta0leti/ 5iroki ekrani te na tajnaAin )rastiAno &o0olj5ava iskustvo korisnika na stranici.

#adatak 34

Im&lementirati kontakt @ormu koristeDi ri) s*stem.

• Is&ro0ati i uoAiti ra"like i"meu 41s/ -sm/ -md/ -l$ su7La na &rimjeru

smanjenja 0ro$ser &ro"ora skaliranja na manje re"olucije• ;rouAiti 0ootstra& @orms i im&lementirati is&ravni HT! i CBB kako 0i @orma

i"le)ala kao na slici na idu;oj stranii, te ka)a se re"olucija smanji

su"iti 0ro$ser/ on)a tre0a i"le)ati ovako lijeva slika je scroll na vr2u/)esna scroll na )nu8

, Kom&letna )okumentacija s ni"om &rimjera može se &ronaDi ov)je8

2tt&8


10/12


Modal<

Vrlo Aesto kori5tena kom&onenta "a &rika" in@ormacija u &o&u& &ro"oru. 9"

mouDnost otvaranja &o&u& &ro"ora samo kori5tenjem HT!-a/ )o)atno

omouDava i &ro5irenja kori5tenjem javascri&t @unkcija.

#adatak 343

= o)al8 2tt&8


11/12


o)i7cirati Contact.cs2tml stranicu na naAin )a se kontakt @orma &rika"uje u

0ootstra& &o&u& &ro"oru.

11


12/12


#adatak 34<

Iskoristiti alert &ro"or "a &rika" &oruke na "a)njem ekranu8

#adatak 34=

Iskoristiti M0rea)crum0sR 0ootstra& kom&onentu kako 0i &rika"ali korisniku )je

se trenutno nala"i8

1,

Documents

03 HTML Bootstrap Osnove