RPA_P6_HTML i CSS

Ekonomski fakultet u Osijeku, Razvoj poslovnih aplikacijaMarijana Zekić-Sušac, Saša Mitrović

6. HTML I CSS (programiranje sučelja web aplikacije)

Za izradu sučelja u nekoj web aplikaciji koriste se naredbe opisnih jezika (eng. markup language) koji određuju kako će se nešto vidjeti na ekranu (HTML i CSS jezik) i naredbe skriptnih jezika koji određuju neku dinamiku na ekranu (JavaScript, ili ASP ili drugi skriptni jezik), zatim XML naredbe (koje opisuje gdje se nalazi neki sadržaj u okviru web stranice i njegovo značenje) i drugi jezici.

U okviru MVC arhitekture web aplikacije, u tim se jezicima kreiraju Pogledi (Views). Nastavak (esktenzija) datoteke koja sadrži neki Pogled je .cshtml, što označava da se u njoj mogu nalaziti i C# i html naredbe.

6.1. HTML jezik

Hypertext Markup Language (HTML) je opisni jezik (ili jezik označavanja) za izradu web stranica. HTML određuje način prikaza pojedinih dijelova dokumenta s pomoću umetnutih oznaka (tag-ova) koje razumije web preglednik i prikazuje dokument korisniku.

Neka pravila HTML-a su: većina tag-ova ima početak i kraj djelovanja, npr.

<HEAD> ................... </HEAD> - početak i kraj zaglavlja dokumenta sintaksa (opći oblik pisanja nekog taga je sljedeći):

<ključna_riječ atribut1=“vrijednost1” atribut2=“vrijednost2” ....>Npr.

Slika 6.1. Dijelovi naredbe (tag-a) u HTML jeziku

Neka pravila HTML jezika kažu:

umetanje praznih redova i mjesta bez posebne oznake ne vidi se u prikazu dokumenta, nego samo služi za preglednost kreatoru stranice

početak i kraj dokumenta moraju imati ove tagove: <HTML>.......... </HTML> glavna struktura dokumenta:

zaglavlje: <HEAD> ..... </HEAD> tijelo stranice:<BODY> ...... </BODY> dijelovi tijela stranice <NAME> .... </NAME>

nije osjetljiv na velika i mala slova pretpostavlja neki definirani skup tag-ova (DTD – Document Type Definition) Standardi:

HTML 1.0, 2.0, 3.0, 3.2, 4.0, 5.0.

Opći oblik HTML dokumenta je sljedeći:

<HTML><HEAD> zaglavlje koje može imati nekoliko podelemenata tipa:

1


<TITLE> naslov dokumenta </TITLE><BASE> osnovna adresa preko koje se rješava relativna;

nužna ako se dokument ne nalazi na originalnoj lokaciji. </BASE><ISINDEX> javlja browser-u da je dokument indeksni,

s kazalima na druge dokumente </ISINDEX><LINK> pokazuje vezu između ovog dokumenta i nekog objekta na WEB-u </LINK><META> daje informacije o stranici, kao što su ključne riječi</META><SCRIPT> sadrži Java ili VB skripte </SCRIPT><STYLE> sadrži informaciju koja se koristi u CSS-u, uzorcima stilova </STYLE>

</HEAD><BODY> tijelo dokumenta s informacijom </BODY>

</HTML>

Primjer minimalnog HTML dokumenta:

<HTML><HEAD> <TITLE>Ovdje naslov stranice koji će se vidjeti u title bar-u preglednika</TITLE> </HEAD> <BODY>Ovdje se upisuje sadržaj stranice koji je vidljiv korisniku. </BODY> </HTML>

Upišite ove naredbe u jednu praznu datoteku, pohranite ih, pogledajte u nekom pregledniku (IE, Mozzilla, Chrome ili dr.) kako stranica izgleda, a zatim provjerite kako izgleda izvorni kod stranice aktiviranjem naredbe View/Source u Internet Explorer-u (ili iste naredbe u drugom pregledniku).

Neki od često korištenih tagova za uređivanje teksta na web stranici:

prijelom reda: <BR> i odjeljka: <P> ..</P> veličina slova: <H1>, <H2>, … <H6> font slova: <font size="2" face="Arial"> ….. </font> stil slova: podebljana: <B> … </B> ili <STRONG> … </STRONG> ), kurziv: <I> .... </I>, podvučena:

<U> ... </U> za centriranje teksta u retku: <center> ... </center> boja pozadine: <BODY BGCOLOR="#00000“> ili <BODY BGCOLOR=“black”>

Skupina imena boja podržana je od većine preglednika (engl. browser-a). Samo 16 imena boja podržano je sa W3C HTML 4.0 standardom (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow). Za sve ostale boje, potrebno je koristiti vrijednost HEX boja polja.

Za heksadecimalne vrijednost boja pogledati pomoćni materijal: Essert, HTML osnove.

Neki od tagova prikazani su u sljedećoj tablici:

Tablica 6.1. Tagovi HTML jezika za uređivanje lista nabrajanja

2


Naziv liste Primjer liste Rezultat prikaza

Poredana (numerirana) lista, eng. ordered list

Moji prioriteti:<ol><li>ljubav<li>fakultet<li>društvo</ol>

Moji prioriteti:1. ljubav2. fakultet3. društvo

Neporedana (nenumerirana) lista, eng. unordered list

Moji prioriteti:<ul><li>fakultet<li>ljubav<li>društvo</ul>

Moji prioriteti:• fakultet• ljubav• društvo

U HTML-u svako prazno mjesto (osim razmaka između riječi) treba definirati na jedan od sljedećih načina:

<BR> - skok u novi red <P> - novi paragraf: skok u novi red sa stanovitim razmakom. - jedno prazno mjestoU slučaju kada se koriste liste, automatski se svaki element liste označen s <li> smješta u novi red.

Za umetanje slika u html dokument, koristi se ova HTML naredba:

<IMG SRC="slika1.gif" WIDTH=90 HEIGHT=62 alt=“opis_slike”>

- umeće sliku iz datoteke slika1.gif sa prilagodbom prema specificiranoj širini i visini (ovakva prilagodba dimenzija slike se ne preporuča, bolje je sliku prethodno obraditi u nekom od programa za obradu slika na željenu veličinu). U html dokument se mogu umetati slike u .gif, .jpg formatu, te animirane slike i video materijal.

Za umetanje poveznica (linkova) u dokument, koristi se ovaj HTML naredba: <A> .... </A>

A je kratica od eng. anchor, tj. sidro, a označava veze između dva dijela istog dokumenta ili dva različita dokumenta.

Slika 6.2. Dijelovi naredbe za umetanje poveznice u dokumentAko želimo na dio dokumenta postaviti sidro, tada taj dio treba nazvati nekim imenom s pomoću taga:<a name=“dio_dokumenta”> .... </a>npr. <a name=“vrh”> </a>

3


Iz nekog drugog dijela dokumenta sada možemo postaviti poveznicu (“baciti sidro”) na prethodno definirano mjesto, tada u tom drugom dijelu pišemo:<a href=“naziv_dokumenta.html#dio_dokumenta”> link na koji kliknemo</a>Ako se radi o istom dokumentu u kojem se nalazimo, naziv dokumenta se može i izostaviti,npr. <a href=“#vrh”>Idi na vrh stranice</a>

Poveznice mogu biti:• na dio dokumenta, npr.:

<a href=“nova.html#dio1”> (prije toga taj dio stranice mora biti označen s: <a name=“dio1”>..</a>

na dokument koji je na našem poslužitelju<a href=“nova.html”>

na adresu nekog izvora na webu:<a href=“http://www.srce.hr/tecajevi”>

Upotreba tablica u HTML jeziku

Tablice se vrlo često koriste u web stranicama, a njihovi osnovni tagovi su: <TABLE> - glavni tag, s različitim atributima, kao što su veličina, okvir, širina i sl. <TR> - (engl TableRow) definira horizontalni red od <TD> ćelija. <TD> - (engl. TableData) definra pojedinačni blok ili ćeliju (engl. cell) u retku tablice.Tekst (odnosni podaci koji će se vidjeti na stranici) upisuju se samo u ćelije tablice, a ovi tagovi moraju slijediti hijerarhiju poretka (najprije se tablica, pa redak, pa ćelije unutar retka). Svaki od njih treba imati svoj početak i kraj.

Primjer tablice sa dva retka i jednim stupcem: <table>

<tr><td> ovdje tekst prvog retka....</td></tr><tr><td> ovdje tekst drugog retka....</td></tr>

</table>

Primjer tablice sa jednim retkom i dva stupca: <table> <tr> <td> ovdje tekst prve ćelije prvog stupca</td> <td> ovdje tekst prve ćelije drugog stupca </td> </tr> </table>

Tagovi za tablice mogu imati atribute koji određuju izgled tablice, npr. border=“1” - određuje okvir tablice debljine 1 točku width = “100” height=“75” – određuje širinu i visinu tablice align=“center” – određuje horizontalno poravnavanje teksta koje može biti: center, left, right valign=“top” – određuje vertikalno poravnavanje teksta koje može biti: top, middle, bottom cellspacing=“1” – određuje razmak teksta ćelije od ruba cellpadding=“1” – određuje udaljenost između ćelija u tablici Rowspan=2 – povezuje više ćelija u retku u jednu ćeliju (broj označava koliko ćelija se spaja) Colspan=2 – povezuje više ćelija u stupcu u jednu

Primjer tablice s dva retka i dva stupca:

4


<table border=1 width=500 height=200 cellspacing=2 cellpadding=2><tr><td align="center" bgcolor="FFFFCC">Prva ćelija</td><td align="center">Druga ćelija</td></tr><tr><td align="center" valign=middle bgcolor="red">Treća ćelija</td><td align=center>Četvrta ćelija</td></tr></table>Izgledat će ovako:

Slika 6.3. Primjer tablice s dva retka i dva stupca

Prvi redak tablice može se označiti kao zaglavlje tablice, i u tom slučaju se samo za taj prvi redak umjesto oznake <td> ... </td> koriste oznake: <th> ... </th>.

Za poravnavanje teksta u više stupaca na stranici se umjesto tablica mogu koristiti i tagovi <div>...</div> ili <section> ... </section>. Tag <div> (skraćeno od eng. division) označava početak posebnog dijela ili odjeljka HTML dokumenta. Tag <section> također označava posebni odjeljak HTML dokumenta, a podržan je novijim verzijama preglednika (Internet Explorer v. 9 i više, Firefox, Opera, Chrome, Safari). <section> se obično koristi unutar <div> tagova.

Primjer upotrebe <div> tagova:<div align=left"> <p> Ovdje moj logo </p></div><div align=center"> <p> Ovdje naslov stranice </p></div>

Gornjim naredbama <div> ...</div> kreiran je posebni dio HTML dokumenta koji će biti poravnat lijevo (što je određeno atributom align=“left“) i drugi dio u kojem će tekst biti centriran.

Primjer upotrebe <section> tagova:<div align=right"> <section id="login"> Login </section>Gornjim naredbama <section> ...</section> unutar dijela HTML dokumenta označenog s <div>...</div> kreiran je posebni odjeljak <section> kojemu se dodjeljuje id=“login“ (prema tom id-u će se u datoteci za CSS stil pronaći i primjeniti stil prikaza za tu vrstu odjeljka).

Upotreba obrazaca (formi) u HTML dokumentu

5


Obrasci ili forme predstavljaju načine interakcije s korisnikom (odnosno unos podataka od strane korisnika), a koriste se kod web aplikacija.

HTML tagovi omogućuju prikaz obrazaca, ali da bi se podaci koje korisnik unese obradili (memorirali u datoteku ili bazu podataka ili poslali putem e-mail-a, ili obradili), potrebne su dodatne skripte u nekom od skriptnih jezika: CGI, JavaScript, VBScript, ASP, PHP ili dr.

Korisnik može podatke unijeti na više načina: slobodnim upisom teksta, ili putem ponuđenih opcija

Glavni tag za prikaz forme je <FORM> Unutar njega dolazi jedan ili više <INPUT> i/ili <SELECT> elemenata

Opći oblik nekog obrasca u HTML dokumentu:<FORM> - početak forme

<INPUT> - traži informaciju na različite načine<SELECT> - izabire informaciju na različite načine

</FORM> - završetak forme

Osim INPUT elementa postoji i <TEXTAREA> element koji omogućuje unos puno više informacije nego se to preko jednoredčanog obrasca može unijeti.Element <INPUT> kao osnovni atribut ima tip 'TYPE' koji može biti:

TEXT - za upis informacije PASSWORD - za upis lozinke (umjesto utipkanih znakova pojavljuju se '*'). RADIO - okrugli gumb za izbor jednog od ponuđenih CHECKBOX - kvadratni gumb za izbor više (ili nijednog) od ponuđenih FILE - za slanje (engl. upload) datoteke preko WEB-a SUBMIT - za tvorbu gumba na čiji pritisak (klik mišem) se podaci uneseni preko forme daju skriptama na obradu IMAGE - umjesto gumba za 'SUBMIT' koristi se izabrana slika RESET - poništavanje informacije upisane u obrasce HIDDEN - za prijenos nevidljive informacije u skipta za obradu

Unos tekstualnih podataka u polje nekog obrasca:<INPUT TYPE=TEXT NAME="ADDRESS" SIZE=30 MAXLENGTH=10>prikazat će na stranici polje duljine 30 znakova, u koji možemo upisati maksimalno 10 znakova, koji se spremaju pod imenom 'ADRESA'.

Radio Button

Ovaj način omogućava izbor samo jedne od ponuđenih opcija, npr.:Tko je tvoj najbolji prijatelj?<BR><INPUT TYPE=RADIO NAME="NP"VALUE="Pajo" CHECKED> Pajo Patak<BR><INPUT TYPE=RADIO NAME="NP"VALUE="Šiljo"> Šiljo <BR><INPUT TYPE=RADIO NAME="NP"VALUE="Miki"> Miki Maus<P>Izgledat će ovako:

Slika 6.4. Izgled radio button-a na obrascu

Check Box

Ovaj način omogućava izbor više ponuđenih opcija, npr.

6


Tko su tvoji prijatelji?<BR><INPUT TYPE=CHECKBOX NAME="Pajo“ VALUE="YES" CHECKED> Pajo Patak<BR><INPUT TYPE=CHECKBOX NAME="Šiljo“ VALUE="YES"> Šiljo <BR><INPUT TYPE=CHECKBOX NAME="Miki“ VALUE="YES" CHECKED> Miki Maus<BR><INPUT TYPE=CHECKBOX NAME="Daba“ VALUE="YES"> Hromi Daba<P>Izgledat će ovako:

Slika 6.5. Izgled check box-a na obrascu

Textarea omogućava unos teksta veće duljine (više redaka) na ekranu, npr.:

<TEXTAREA NAME="Komentar" ROWS=3COLS=30 WRAP=PHYSICAL></TEXTAREA>

Izgledat će ovako:

Slika 6.6. Izgled područja za unos teksta textarea

Gumbi na obrascu

Gumbi na obrascu (formi) omogućuju korisniku pokretanje neke akcije (klikom na dugme nešto će se dogoditi) – za akciju je potreban neki skriptni jezik, tj. web aplikacija<INPUT TYPE=SUBMIT VALUE="Šalji obrazac!" ACTION=“salji.asp“><BR><INPUT TYPE=RESET VALUE="Briši"><P>Ovim naredbama prikazat će se dva gumba: jedan na kojem piše “Šalji” i drugi na kojem piše “Briši”. Kad korisnik klikne na gumb „Šalji obrazac!“, akciju preuzima datoteka „salji.asp“ u kojoj se nalaze naredbe za slanje unesenih podataka na neku e-mail adresu ili pohranjivanje u datoteku.

HTML 5.0

7


HTML 5.0 je novi standard HTML jezika, nastao je na temelju prethodnih inačica HTML-a, ali je donio značajne izmjene u odnosu na prethodnu inačicu HTML 4.0 koja je izašla 1999. godine. Dizajniran je kako bi omogućio korištenje različitih multimedijalnih dokumenata (animacije, glazbe, filmova) i aplikacija na webu bez potrebe za instaliranjem dodatnih plugin-ova.

Pravila koja su postavljena za HTML 5 (W3Schools, 2013):

Nove mogućnosti temelje se na jezicima HTML, CSS, DOM i JavaScript Nastoji se smanjiti potreba za dodatnim plugin-ovima (kao npr. Flash) Olakšano je rukovanje greškama Nastoji se smanjiti korištenje skripti, a umjesto njih što više koristiti opisni jezik HTML 5 bi trebao biti nezavisan od uređaja na kojem se koristi Proces razvoja treba biti vidljiv javnosti (source kod)

Neke od glavnih mogućnosti HTML 5 ostvaruju se kroz ove nove naredbe u odnosu na prethodne verzije:

Koristi se samo jedna deklaracija za HTML standard: <!DOCTYPE html> Uveden je <canvas> element za 2D crtanje Uvedeni su <video> i <audio> elementi za prikaz multimedije Uvedena je potpora za lokalno spremanje podataka Uvedeni su novi elementi koji su specifični za sadržaj (content), kao npr. <article>,

<footer>, <header>, <nav>, <section> Uvedene su nove kontrole za obrasce (forme), kao npr. calendar, date, time, email, url,

search

Za više informacija o HTML 5 jeziku preporučamo: http://www.w3schools.com/tags/default.asp.

Upotreba HTML jezika označavanja u MVC web aplikaciji

U MVC web aplikaciji HTML se koristi u izradi pogleda (Views), na način da se u datoteci pogleda mogu kombinirati naredbe HTML-a, CSS-a, skriptnih jezika Javascripta, asp naredbe, ali i naredbe objektnog jezika C# ( ili Visual Basic) jezika.Pogledi se u MVC web aplikaciji izrađuju na temelju metoda u Kontroleru. Popis pogleda koji su izgrađeni za aplikaciju Movie prikazan je u prozoru Solution Explorer kao na slici dolje:

8

http://www.w3schools.com/tags/default.asp


Slika 6.7. Popis pogleda u aplikaciji Movie

Svaki pogled može preuzeti osnovni predložak koji je dan za cijelu aplikaciju u datoteci: _Layout.cshtml koja se nalazi prikazana u Solution Explorer-u u mapi Views/Shared.Predložak za aplikaciju Movie izgleda ovako:

<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <title>@ViewBag.Title - Moja prva MVC aplikacija</title> <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" /> <meta name="viewport" content="width=device-width" /> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") </head> <body> <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">@Html.ActionLink("Ovdje moj logo", "Index", "Home")</p> </div> <div class="float-right"> <section id="login"> @Html.Partial("_LoginPartial") </section> <nav> <ul id="menu"> <li>@Html.ActionLink("Home", "Index", "Home")</li> <li>@Html.ActionLink("About", "About", "Home")</li> <li>@Html.ActionLink("Contact", "Contact", "Home")</li> </ul>

9

U mapi Views u prozoru Solution Explorer mogu se vidjeti kreirane .cshtml datoteke koje predstavljaju poglede u aplikaciji

U mapi Views/Shared nazali se glavni predložak za poglede u aplikaciji (datoteka: _Layout.cshtml)

Naredba za početak HTML dokumenta

Zaglavlje HTML dokumenta (između naredbi <head>...</head>

Tijelo HTML dokumenta (između naredbi <body>...</body> koje ima zaglavlje (header), srednji dio i podnožje (footer)


</nav> </div> </div> </header> <div id="body"> @RenderSection("featured", required: false) <section class="content-wrapper main-content clear-fix"> @RenderBody() </section> </div> <footer> <div class="content-wrapper"> <div class="float-left"> <p>© @DateTime.Now.Year - My ASP.NET MVC Application</p> </div> </div> </footer>

@Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) </body></html>

Prilikom kreiranja novih pogleda u aplikaciji, moguće je izabrati želi li se koristiti predložak koji je dan za aplikaciju. Ukoliko se ne koristi predložak, tada programer može napraviti pogled prema vlastitom dizajnu po želji koristeći html naredbe.

Obrazac za unos podataka u MVC aplikaciji (ako se koristi Entity Framework)

Kod objektnih MVC aplikacija u alatu Visual Studio, obrazac za unos podataka kreira se s pomoću naredbi kojima se direktno iz baze podataka prikazuju polja za unos podataka.

Npr. ako za primjer aplikacije Movie želimo napraviti obrazac za unos podataka, najprije treba napraviti metodu metode Create() koja se nalazi u Kontroleru, ovako:

public ActionResult Create() { return View(); } Zatim desnim klikom miša (kad se pokazivač nalazi na nazivu metode Create()), dodati novi Pogled (Add View) npr. pod nazivom CreateView.cshtml i u pogled upisati sljedeće naredbe za prikaz obrasca:

@model MVCMovie.Models.Movie

@{ ViewBag.Title = "Create";}

<h2>Create</h2>

@using (Html.BeginForm()) { @Html.ValidationSummary(true)

<fieldset> <legend>Movie</legend>

10

Naredbom @model uvodi se strogo definirani tip model koji će se odnositi na klasu Movie iz modela aplikacije MVCMovie

Ovom naredbom određuje se naslov prozora u naslovnoj traci (Title Bar-u)

Ovom naredbom poziva se metoda Html-BeginForm() kojom se kreiran novi obrazac (forma) u pogledu

Naredbom <fieldset> započinje novi skup polja u obrascu (vezan na polja u tablici, koja su ujedno i svojstva klase Movie)


<div class="editor-label"> @Html.LabelFor(model => model.Title) </div> <div class="editor-field"> @Html.EditorFor(model => model.Title) @Html.ValidationMessageFor(model => model.Title) </div>

<div class="editor-label"> @Html.LabelFor(model => model.ReleaseDate) </div> <div class="editor-field"> @Html.EditorFor(model => model.ReleaseDate) @Html.ValidationMessageFor(model => model.ReleaseDate) </div>

<div class="editor-label"> @Html.LabelFor(model => model.Genre) </div> <div class="editor-field"> @Html.EditorFor(model => model.Genre) @Html.ValidationMessageFor(model => model.Genre) </div>

<div class="editor-label"> @Html.LabelFor(model => model.Price) </div> <div class="editor-field"> @Html.EditorFor(model => model.Price) @Html.ValidationMessageFor(model => model.Price) </div>

<p> <input type="submit" value="Create" /> </p> </fieldset>}

<div> @Html.ActionLink("Back to List", "Index")</div>

@section Scripts { @Scripts.Render("~/bundles/jqueryval")}

Rezultat ovih naredbi je obrazac na donjoj slici:

11

Naredbom @Html.LabelFor(model => model.Title) u obrascu se prikazuje oznaka naziva polja Title

Naredbom @Html.EditorFor(model => model.Title) u obrascu se prikazuje textBox u kojem će korisnik moći unijeti podatak za polje Title

Naredbom @Html.ValidationMessageFor(model => model.Title) obavlja se provjera ispravnosti unosa podataka i prikazuje se poruka o grešci ako unos nije ispravan

Naredbom @Html.ActionLink(„Back to List“, „Index“) klikom na taj link prikazuje se početna stranica aplikacije

Naredbom <input type="submit" value="Create" /> prikazuje se na ekranu gumb pod nazivom „Create“


Slika 6.7. Obrazac za unos novog filma u aplikaciji Movie

Meta tagovi u HTML-u

U zaglavlju HTML dokumenta (<head>...</head>) koriste se <meta> tagovi za definiranje ključnih riječi, opisa stranice, ime autora, programa koji je generirao stranicu, skupa znakova koji se koristi za posebne (hrv) znakove, i dr.Primjer nekih meta tagova:

naredba za skup znakova za hrvatske dijakritičke znakove: Najčešće su u upotrebi ova dva skupa znakova:

<meta http-equiv="Content-Type“ content="text/html; charset=windows-1250"> ili

<meta http-equiv="Content-Type“ content="text/html; charset=iso-8852">(Ukoliko se na Vašoj stranici ne prikazuju hrv. znakovi č,ž,š,đ na web poslužitelju, ovu gore naredbu treba kopirati u zaglavlje svake html stranice.) naredba za naziv programa koji je generirao stranicu:<meta name="GENERATOR" content="Microsoft FrontPage Express 2.0"> naredba za opis stranice:

<meta name="description" content=" Pero Peric – home page"> naredba za ključne riječi u stranici:

<meta name="keywords" content=" Pero, Perić, contact, address, interests, biography"> naredba za ime autora:<META NAME="author" content=Pero Peric">

Postupak publiciranja neke web stranice:1. stranicu treba najprije pohraniti na lokalni disk u .html ili .htm formatu

12


2. početnu stranicu treba nazvati “index.html”, radi lakšeg automatskog pozivanja s pomoću preglednika, a za ostale su nazivi proizvoljni

3. pregledati izgled stranice s pomoću preglednika (browser-a, npr. IE), te popraviti izgled ukoliko je potrebno

4. s pomoću nekog od programa koji podržavaju FTP (File Transfer Protokol) za prijenos datoteka, npr. FTP Explorer, CuteFTP, WSFTP, FTP, ili dr. prenijeti web stranicu na neki od poslužitelja (servera)

5. osobna stranica se pohranjuje u direktorij: /public_html u osobnom direktoriju na serveru, nakon čega je javno dostupna svima.

Web stranice koje su dijelovi MVC web aplikacije prenose se na poslužitelj i pohranjuju zajedno s ostalim dijelovima web aplikacije, a pozivaju se s poslužitelja na način da se u polju za unos adrese u pregledniku upiše adresa:

http://naziv hosta/staza do datoteke

npr. http://www.efos.hr/mzekic/index.html

ilihttp://www.probnihost.hr/Movie

6.2. CSS (Cascade Style Sheet) jezik stila

CSS (Cascading Style Sheets) označava upotrebu uzoraka stilova koji se mogu koristiti u HTML dokumentima. CSS omogućava definiranje načina prikaza teksta ili drugih elemenata HTML dokumenta, odnosno definiranje stila koji će se koristiti. Napravljen je od strane W3C institucije kako bi se izbjegla poplava HTML tagova za uređivanje unutar dokumenta, a kako bi se HTML dokument više orjentirao na sadržaj.

CSS-om se definira kako će se neki HTML element prikazati (slova, linkovi, slike,...). Stilovi se obično spremaju u posebne datoteke izvan HTML dokumenta.

Primjer učinkovitosti CSS-a:Pretpostavimo da želimo sve naslove u okviru našeg web mjesta prikazati fontom Tahoma, veličine 14pt, plave boje i to podebljano (bold). a) Ako ne koristimo CSS, tada u svakom HTML dokumentu ispred naslova treba navesti tag:

<font face=“Tahoma” size=“14px” color=“blue” weight=“bold”>Ako u okviru web mjesta imamo npr. 20 naslova, tada 20 puta treba upisati istu naredbu. Ako se dogodi da želimo promijeniti vrstu slova za naslove, i tu promjenu treba napraviti na 20 mjesta.

b) Ako koristimo CSS, tada se font definira u jednoj posebnoj CSS datoteci i daje mu se naziv, npr. “naslov”, a u HTML dokumentima samo poziva taj font preko svojeg naziva “naslov”. Ako želimo promijeniti vrstu slova za naslov, promjenu treba napraviti samo na jednom mjestu: u CSS datoteci, i ona će automatski biti vidljiva na svim HTML dokumentima u kojima se poziva font “naslov”

Prednosti CSS-a: olakšava i ubrzava uređivanje web stranica (sadržaj stranica odvojen od uređivanja stila) kvalitativno doprinosi boljem dizajnu web stranica (dosljednost u načinu prikaza naslova,

podnaslova, linkova i dr.), što omogućava bolju preglednost stranica, lakše snalaženje korisniku i estetski bolji ugođaj

Stilovi se mogu definirati na različite načine:

13

http://www.probnihost.hr/Movie

http://www.efos.hr/mzekic/index.html


a) unutar HTML dokumenta – u zaglavlju <HEAD> ....</HEAD>b) u vanjskoj datoteci s nastavkom .css (npr. Stil.css)c) u liniji HTML elementa

Unutar jednog HTML dokumenta mogu se pozivati i višestruki vanjski stilovi. Stilovi se mogu poredati postepeno, tj. kaskadno (eng. cascading), s tim što su određeni prioriteti (koji način ima prioritet u djelovanju):

1. pretpostavljena vrijednost preglednika (Browser default)2. vanjski stilski uzorak (External Style Sheet)3. unutarnji stilski uzorak (Internal Style Sheet), unutar zaglavlja, odn. <HEAD> tag-a4. linijski stil (Inline Style), unutar nekog HTML elementa – kada se npr. za određeni dio teksta ili

tablice navede specifikacija fonta ispred tog dijela tekstaNajviši prioritet ima način pod brojem 4, zatim 3,2,1.

Sintaksa (opći oblik pisanja naredbi) CSS-a izgleda ovako:

selector {property: value}Selector = HTML element/tag kojeg se želi definirati

Selektor može biti bilo koji element HTML dokumenta, npr. body, font, h1, p, img, table i dr. HTML elementi.

Property = svojstvo, odnosno atribut koji se želi promijenitiValue = vrijednost koju može poprimiti svojstvo

Svojstvo i vrijednost su odijeljeni dvotočkom i obuhvaćeni vitičastim zagradama. Više svojstava se odvaja znakom točka-zarez, npr.body {color: black}font {color:blue; font-size:10px; font-weight:bold}

Ako se vrijednost svojstva sastoji od više riječi, treba ih staviti pod “ “, npr.font {font-familiy:”Times New Roman”; font-weight:bold} Radi preglednosti svojstva se mogu pisati na način da je svako svojstvo u posebnom retku, npr.

font.naslov{text-align: center;color: black;font-family: arial;font-size: 12px;}

Selektori se mogu međusobno grupirati u jednu naredbu kojom se odjednom specificiraju neka svojstva koja će vrijediti za sve selektore:Primjer1:h1,h2,h3,h4,h5,h6{color: green}

Primjer 2:p, table{

14

Primjer definira font koji će se zvati “naslov” i imat će svojstva koja su definirana u vitičastoj zagradi, a bit će poravnat lijevo, crne boje, vrste slova Arial, veličina 12 piksela.

Primjer 1 definira da će se slova pisana veličinama h1, h2, ..., h6 prikazati zelenom bojom

Primjer 2 definira da će tekst u svakom odjeljku i svaka tablica biti poravnati po lijevoj strani


text-align: left}

Definiranje klase selektora (atribut class)

Klasa = skupina selektoraPomoću klase se mogu definirati različiti stilovi istog selektora u nekom HTML dokumentu,npr. mogu se definirati različite klase fontova (font za naslove, font za podnaslove, font za običan tekst, itd), različite klase paragrafa, tablica, i dr.Klase se definiraju u .css datoteci stila tako da se navede selektor, zatim točka (.), pa proizvoljni naziv klase, a u HTML dokumentu se pozivaju putem atributa „class“.

Primjer 1. Pretpostavimo da želimo definirati dvije vrste paragrafa: jednu koja će biti centrirana, i drugu koja će biti poravnata desno.

U CSS datoteci treba definirati dvije klase paragrafa ovako:p.right {text-align: right}p.center {text-align: center} U HTML dokumentu, kada želimo umetnuti gornje vrste paragrafa, pisat ćemo:<p class="right">Ovaj paragraf će biti poravnat desno.</p><p class="center">Ovaj paragraf će biti centiriran. </p>

Primjer 2. Pretpostavimo da želimo definirati dvije vrste slova: jednu kojom ćemo pisati glavne naslove, i drugu kojom ćemo pisati podnaslove u HTML dokumentu. U CSS datoteci treba definirati dvije klase paragrafa ovako:font.naslov {font-family:Arial; font-size:18px; font-weight:bold}font.podnaslov {font-family:Arial; font-size:14px} U HTML dokumentu, kada želimo umetnuti gornje vrste slova, pisat ćemo:<font class=“naslov">Ovaj naslov će biti veličine 18 piksela, podebljan.</font><font class=“podnaslov">Ovaj podnaslov će biti veličine 14 piksela, običnim slovima.</font>

Ako se klasa definira bez naziva selektora, ona se može koristiti kao atribut kod bilo kojeg selektoraPrimjer: U .css datoteci definiramo klasu:.center {text-align: center} U HTML dokumentu koristit ćemo atribut class=“center” kod selektora h1 i kod selektora p:<h1 class="center">Ovaj će tekst biti centriran.</h1><p class="center">Ovaj će cijeli paragraf biti centriran.

15


</p>

Atribut ID

Osim atributa “class”, kod prikaza stilova može se koristiti i atribut “id”, koji također označava skupinu nekog selektora, ali može označavati i skupine bilo kojeg selektora u HTML dokumentuPrimjer 3.a - “id” se primjenjuje na sve elemente u HTML dokumentu koji navedu atribut “id=intro” U css datoteci definiramo:#intro{font-size:110%;font-weight:bold;color:#0000ff;text-align:right} U HTML dokumentu pozivamo id=intro:<p id="intro">Ovaj će paragraf biti podebljan i desno poravnat. </p><p>Ovaj paragraf neće biti podebljan i desno poravnat. </p>

Primjer 3.b.- “id” se primjenjuje samo na jedan selektor (element) u HTML dokumentu, i to ako navede atribut “id=intro” U css datoteci definiramo:p#intro{font-size:110%;font-weight:bold;color:#0000ff;text-align:right} U HTML dokumentu pozivamo paragraf s atributom id=intro:<p id="intro">Ovaj će paragraf biti podebljan i desno poravnat. </p><font id="intro">Na ovaj tekst se neće primijeniti stil definiran u p#intro jer taj stil vrijedi samo za paragrafe sa id=“intro”. </font>.

Komentari u CSS stilu

U .css stil moguće je umetnuti komentare koji će autoru ili korisniku služiti kao podsjetnik, a trebaju započeti znakom “/*” , a završiti znakom “*/”. Primjer:/* Ovo je komentar */p{text-align: center;/* Ovo je drugi komentar */color: black;font-family: arial

16


}

Kao što je prije navedeno, stil se može umetnuti u html dokument na 3 načina, i to kao:1. Vanjski uzorak – koji poziva definirani stil iz vanjske .CSS datoteke2. Unutarnji uzorak – kada se stil definira unutar zaglavlja HTML dokumenta3. Linijski uzorak – kada se stil definira u istoj liniji gdje se poziva HTML element

Može se koristiti i višestruko pozivanje stila. S obzirom da se najčešće u praksi koristi vanjski stilski uzorak, on će biti i opisan u nastavku.

Upotreba vanjskog stilskog uzorka kod web stranica i kod MVC web aplikacija

Vanjski stilski uzorak se preporuča kada stil želimo primijeniti na više web stranica, jer je tada moguće promijeniti izgled čitavog Web mjesta (site-a) mijenjajući samo jednu datoteku. Kod vanjskog stila se najprije izvan web stranice kreira posebna datoteka koja ima nastavak

(ekstenziju) .css, npr. „Site.css“ i u nju se upišu sve definicije stila koje se žele koristiti. Kod vanjskog stila se svaka stranica web site-a mora povezati sa stilskim uzorkom (vanjskom

datotekom) Kod običnih web stranica, ta se veza uspostavlja koristeći <link> tag. Ovaj se tag treba postaviti

unutar zaglavlja HTML dokumenta:<head><link rel="stylesheet" type="text/css" href="Site.css" ></head>

Kod MVC web aplikacija koristi se posebna naredba kojom se koristi vanjski stil (npr. Site.css) koji se nalazi u mapi Content same aplikacije: /Content/Site.css. Naredba kojom se neki pogled povezuje sa vanjskim stilom je: @Styles.Render("~/Content/css")

Ovom naredbom program će u mapi Content aplikacije pogledati koja se datoteka s nastavkom .css tamo nalazi i nju će koristiti u ovom pogledu.Uvid u stil koji se koristi u MVC web aplikaciji može se dobiti putem Solution Explorer prozora aplikacije tako da se otvori mapa Content u njoj pronađe koja se datoteka s nastavkom .css tu nalazi (vidi donju sliku):

Slika 6.8. Uvid u datoteku koja sadrži stil putem Solution Explorera neke MVC web aplikacije

Ako se otvori datoteka Site.css, u njoj se mogu naći sljedeće naredbe kojima se definira stilski uzorak:

17

U mapi Content u datoteci Site.css nalazi se definiran stil koji će se koristiti u pogledima (Views) aplikacije

Ovdje se definira stil za cijeli html dokument, da pozadina bude sive boje, margina 0, a razmak od teksta do ruba stranice 0.


html { background-color: #e2e2e2; margin: 0; padding: 0;}

body { background-color: #fff; border-top: solid 10px #000; color: #333; font-size: .85em; font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif; margin: 0; padding: 0;}

a { color: #333; outline: none; padding-left: 3px; padding-right: 3px; text-decoration: underline;}

a:link, a:visited, a:active, a:hover { color: #333; }

a:hover { background-color: #c7d1d6; }

header, footer, hgroup,nav, section { display: block;}

mark { background-color: #a6dbed; padding-left: 5px; padding-right: 5px;}

.float-left { float: left;}

.float-right { float: right;}

.clear-fix:after { content: "."; clear: both; display: block; height: 0; visibility: hidden;}

h1, h2, h3,h4, h5, h6 { color: #000;

18

Ovdje se definira stil za tijelo html dokumenta (body) da pozadina bude bijele boje, da bude okvir debljine 10 pixela, boja slova tamno siva, veličina slova 0.85, vrsta slova „Segoe UI“, a ako je preglednik ne podržava, onda neka od navedenih iza.

Ovdje se definira stil za prikaz linkova (boja, udaljenost od lijevog i desnog ruba, podvlačenje)

Ovdje se definira stil za prikaz posjećenih linkova, aktivnih linkova i onih iznad kojih se nalazi pokazivač

Ovdje se definira stil za naglašavanje teksta (markiranje)

Ovdje se definira da se neki dijelovi dokumenta mogu poravnati po lijevoj margini, ali ne u neki apsolutni položaj, nego lijevo od ostalih elemenata

Ovdje se definira da se neki dijelovi dokumenta mogu poravnati po desnoj margini, ali ne u neki apsolutni položaj, nego desno od ostalih elemenata

Ovdje se definira da veličine slova od h1 do h6 budu crne boje.


margin-bottom: 0; padding-bottom: 0;}

h1 { font-size: 2em;}

h2 { font-size: 1.75em;}



h5, h6 { font-size: 1em;}

h5 a:link, h5 a:visited, h5 a:active { padding: 0; text-decoration: none; }

/* main layout----------------------------------------------------------*/.content-wrapper { margin: 0 auto; max-width: 960px;}

Gore je prikazan samo dio Site.css datoteke iz MVC aplikacije „MVCMovie“. Ove naredbe stilskog uzorka automatski su upisane od strane Microsofta jer se koriste u osnovnom predlošku za poglede aplikacije (_Layout.cshtml). Programer može po želji izmijeniti sve definicije stila koje mu ne odgovaraju.

Primjer još nekih naredbi koje može sadržavati neka .css datoteka

hr {color: sienna} – određuje boju za horizontalnu liniju ako se ona umetne u dokumentp {margin-left: 20px} – određuje da za sve paragrafe lijeva margina bude 20 pikselabody {background-image: url("images/back40.gif")} – umeće sliku kao pozadinu stranice

Svojstva u CSS-u

Skupine CSS svojstava (eng. properties) koje se koriste su: Svojstva pozadine (background) Svojstva za uređivanje teksta (text-align, text-shadow, color, direction, i dr.) Svojstva za fontove (font-family, font-size, font-weight, i dr.) Svojstva za okvire (border-width, border-style, border-color)

19

Ovdje i u nastavku se definira točna veličina slova koja su klase h1 do h6.

Ovdje se definira klasa content-wrapper koja za cijeli sadržaj dokumenta određuje da ne smije biti veće širine od 960 piksela.


Svojstva za margine (margin-left, margin-right, margin-top, margin-bottom) Svojstva podstavljanja (padding) Svojstva lista (list) Svojstva dimenzije (height, width) Klasifikacijska svojstva (clear, cursor, display, float, visibility) Svojstva pozicioniranja (bottom, clip, left, overflow, right, top, i dr.)

Pseudo klase u CSS-u

Pseudo klase se upotrebljavaju u CSS-u za dodavanje različitih efekata nekim selektorima ili pojedinim dijelovima selektora. Npr. ako želimo prikazati na različit način aktivni link, posjećene linkove, neposjećene linkove, link na kojem se nalazi pokazivač (miš), i dr.Pseudo klase koje se najčeće koriste su:

active hover link visited :first-child :lang

Sintaksa (opći oblik) pseudo klase u CSS-u je:selector:pseudo-class {property: value}

U kombinaciji s pseudo klasama mogu se koristiti i CSS klase na ovaj način:selector.class:pseudo-class {property: value}

Pseudo klase za linkove (sidra) su: a:link {color: #FF0000} /* neposjećeni link */ a:visited {color: #00FF00} /* posjećeni link */ a:hover {color: #FF00FF} /* link na kojem se nalazi miš */ a:active {color: #0000FF} /* izabrani (aktivni) link */Pravila koja vrijede kod pseudo-klasa linkova: 'a:hover' MORA doći iza 'a:link' i 'a:visited' u CSS definiciji da bi bio djelotvoran! 'a:active' MORA doći iza 'a:hover ' u CSS definiciji da bi bio djelotvoran!

Primjer kombiniranja pseudo i CSS klasa: Za posjećene linkove može se definirati CSS klasa, npr. “red” koja će predstavljati jednu

skupinu posjećenih linkova za koje želimo da se prikažu crvenom bojom:a.red:visited {color: #FF0000}

U HTML dokumentu, u tag-u za link koji želimo da bude prikazan crveno ako je posjećen, upisat ćemo ovo:<a class="red" href=“datoteka.html">Ovaj link crveno ako je posjećen</a>

Zaključak

U MVC web aplikacijama za kreiranje pogleda koriste se web tehnologije kao što su HTML, CSS, i skriptni jezici (JavaScript, Vbscript i dr.)U ovom poglavlju opisane su osnovne naredbe i principi korištenja HTML opisnog jezika i CSS jezika za definiranje stilskog uzorka koji se koristi u HTML dokumentima.Kod HTML jezika postoje različite inačice (od HTML 1.0 do HTML 5).

20


Stilski uzorak koji se koristi u MVC web aplikacijama nalazi se u mapi /Content i standardno se zove Site.css, iako programer može po želji koristiti datoteku i definicije stilova unutar nje.Za više informacija o HTML jeziku i CSS-u preporučamo:

- Za HTML: http://www.w3schools.com/html/- Za CSS: http://www.w3schools.com/css/

Literatura:

1. Anderson, R., Introduction to ASP .NET MVC 4, Microsoft, 15.08.2012, http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4, [25.10.2013]

2. Microsoft, ASP.NET MVC Overview, http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview, , [09.10.2013]

3. Codeproject, Creating a simple application using MVC 4.0, http://www.codeproject.com/Articles/486161/Creating-a-simple-application-using-MVC-4-0, [20.10.2013.]

4. W3Schools, HTML Reference – HTML 5 Compliant, http://www.w3schools.com/tags/default.asp, 13.11.2013.

5. W3Schools, HTML Tutorial – HTML 5 Compliant, http://www.w3schools.com/html/, 13.11.2013.6. W3Schools, CSS Tutorial, http://www.w3schools.com/css/, 13.11.2013.

21

http://www.w3schools.com/css/

http://www.w3schools.com/html/

http://www.w3schools.com/tags/default.asp

http://www.codeproject.com/Articles/486161/Creating-a-simple-application-using-MVC-4-0

http://www.asp.net/mvc/tutorials/older-versions/overview/asp-net-mvc-overview

http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4

http://www.asp.net/mvc/tutorials/mvc-4/getting-started-with-aspnet-mvc4/intro-to-aspnet-mvc-4

http://www.w3schools.com/css/

http://www.w3schools.com/html/

RPA_P6_HTML i CSS

Documents

Transcript of RPA_P6_HTML i CSS