APLIKATIVNI SOFTVER Front End: HTML, CSS, JavaScript dr Miloš Dobrojević školska 2013/14. godina
Sadržaj HTML Struktura stranice Formatiranje teksta Linkovi Često korišćeni tagovi Grupisanje i rasporeďivanje Tabele Elementi za unos podataka Atributi DOM Events CSS JavaScript
HTML Uvod HTML - HyperText Markup Language Dominantan jezik za izradu web stranica Sadrži elemente (tagove) koji razdvajaju instrukcije od sadržaja Omogućava formatiranje prikaza sadržaja, za razliku od nekih drugih markirnih jezika (XML) Za izradu HTML stranice je dovoljan običan tekst editor HTML editori: Microsoft FrontPage (Old School) Source code editors (Notepad2, Notepad++,...) Tekst procesori (MS Word,...) koji mogu da eksportuju stranicu u HTML formatu. WYSIWYG (Adobe Dreamweaver, MS Visual Studio,...)
Tagovi HTML Struktura stranice Elementi su uokvireni tagovima Tagovi mogu biti upareni ili samostalni <html>... </html> <body>... </body> <b>... </b> <br/> Tagovi često imaju dodatne parametre koji kontrolišu njihovo ponašanje. Ti parametri se zovu atributi.
Struktura stranice HTML Struktura stranice HTML dokument počinje <html> i završava </html> tagom. U <head>...</head> sekciji se nalaze globalne informacije o stranici Sve što je u <body>...</body> sekciji, biće prikazano u web pretraživaču
HTML Formatiranje teksta Bold <b>bold</b> Italic <i>italic</i> Underline <u>underline</u> Bold Italic <b><i>bold Italic</i></b>
HTML Linkovi Sintaksa linka <a href="url" target="target" atributi></a> URL TARGET atributi URL adresa stranice na koju link pokazuje Opciono _blank otvori u novom prozoru ili tab-u _self otvori link u istom frejmu _parent otvori link u matičnom frejmu _top otvori link framename otvori link u željenom frejmu Opciono Primer <a href="http://sinergija.edu.ba" target="_blank">sinergija</a>
HTML Često korišćeni tagovi Prelom linije <br/> Paragraf <p></p> Ubacivanje slike <img src="url_slike" atributi> Liste <ul></ul> neureďene <ol></ol> ureďene Frejm <iframe src="url">underline</iframe> Obrasci <form></form> prikaži web stranicu unutar web stranice pošalji podatke serveru
HTML Grupisanje i rasporeďivanje Radi bolje preglednosti, sadržaj stranice se može grupisati u blokove i kolone pomoću tagova DIV Definiše sekciju u dokumentu block SPAN Definiše sekciju u dokumentu inline
HTML Tabele <table> <tbody> <tr> <td>1.1</td> <td>1.2</td> </tr> <tr> <td>2.1</td> <td>2.2</td> </tr> </tbody> </table>
HTML Elementi za unos podataka Da bi uneti podaci bili poslati, polja za unos moraju biti unutar <form></form> tagova. Unos teksta <input type="text" name="prezime"> <textarea rows="4" cols="5">tekst</textarea> Lozinka <input type="password" name="lozinka"> Radio <input type="radio" name="pol" value="muski"> <input type="radio" name="pol" value="zenski"> Checkbox <input type="checkbox" name="vozilo" value="auto"> <input type="checkbox" name="vozilo" value="motor"> Dugmeta <input type="submit" name="submit" value="posalji"> <input type="reset" name="submit" value="resetuj"> Fajlovi <input type="file">
HTML Atributi Uz svaki tag se mogu dodati atributi koji će definisati značenje i kontekst elementa. Class Imena CSS klasa koje se dodeljuju elementu Id Jedinstveni Id koji se dodeljuje elementu Style Definiše CSS stil elementa Title Dodatne informacije o elementu koje će se pojaviti Primer kada se mišem stane iznad njega Centriraj tekst u pasosu <p style= text-align: center; > Promeni boju pozadine u plavo <body bgcolor= #0000FF >
Još neki atributi HTML Atributi accesskey shortcut taster koji aktivira/fokusira dati element dir smer ispisivanja teksta u elementu lang jezik sadržaja u elementu tabindex redosled aktiviranja/fokusiranja prilikom promene elementa pomoću tastera tab
Novi atributi u HTML5 HTML Atributi contenteditable da li se sadržaj elementa može menjati? contextmenu definiše pripadajući kontekst-meni (meni koji se aktivira desnim klikom miša) draggable da li se element može prevlačiti dropzone da li se prevučeni podaci kopiraju, prebacuju ili linkuju hidden element još nije, ili više nije vidljiv spellcheck da li treba proveravati pravopis i gramatiku sadržaja elementa translate da li treba prevoditi sadržaj elementa
DOM - Document Object Model HTML DOM Events Slično kao u desktop aplikacijama Events Učitavanje / zatvaranje stranice onload, onunload Miš onclick onmouseover, onmouseout onmousedown, onmouseup Unos podataka onfocus, onblur, onchange
HTML Pročitati http://www.w3schools.com/html/ http://www.w3schools.com/html/html5_intro.asp
CSS Uvod CSS (Cascading Style Sheet) je jezik formatiranja pomoću koga se definiše izgled elemenata web stranice. CSS sintaksa se sastoji od opisa izgleda elemenata u dokumentu. Opis može da definiše izgled više elemenata, i više opisa može da definiše izgled jednog elementa. Može se ubaciti u HTML kao style atribut HTML elementa (tzv. inline style sheet) <div style="margin: 20px; padding: 5px 10px"></div> zasebni fajl koji se poziva pomoću <link> taga <link rel="stylesheet" href="style.css" type="text/css"> <style></style> tagovi
CSS Uvod
CSS Definisanje opisa Svaki opis se sastoji iz tri segmenta: ciljni_elementi { svojstvo: vrednost; svojstvo: vrednost;... } Ciljni elementi se meďusobno odvajaju zarezom, i mogu biti: HTML tag klasa elemenata id elementa Primer table { border: 1px solid silver; border-collapse: collapse }.warning { } background: yellow url(images/warning.gif) 20px middle no-repeat; border: 1px solid gray; margin: 20px; padding: 10px
CSS Definisanje opisa Svojstva se opisuju nizom ključnih reči definisanih u W3C standardu, koje se mogu svrstati u sledeće kategorije: pozadina elementa ivica okvir prikaz dimenzije font margine unsutrašnji prazan prostor pozicija izgled pripadajućeg teksta Vrednosti pojedinih svojstava se definišu na dva načina: predefinisanim ključnim rečima numeričkim vrednostima
CSS Pročitati http://en.wikipedia.org/wiki/cascading_style_sheets http://www.w3schools.com/css/ CSS priručnik, na web stranici predmeta
JavaScript Uvod JavaScript je skriptni programski jezik koji se koristi za definisanje funkcionalnosti web stranica na klijentskoj strani. Neophodni su mu web pretraživač i web stranica koji obezbeďuju objekte i metode (DOM) sa kojima može da ostvari interakciju. Osim imena, nema drugih dodirnih tačaka sa Javom. Trademark je vlasništvo Oracle korporacije. Može se ubaciti u HTML na 3 načina <script></script> tagovi u <head> ili <body> bloku <script type="text/javascript" src="js_url"></script> Uz HTML element kao reakciju na DOM event
JavaScript Uvod
JavaScript Pročitati http://www.w3schools.com/js/ http://www.w3schools.com/js/js_htmldom_events.asp JavaScript - operatori, naredbe i funkcije, na web stranici predmeta Javascript tutorial (engleski), na web stranici predmeta