HTML I CSS PROJEKATKREIRANJE SAJTA NA OSNOVU POSTOJECEG DIZAJNAMiljan Jeremimiljan.jeremic@gmail.com

PLAN NASTAVE:Uvod u HTML, struktura HTML straniceRad sa tekstom, linkovima, slikamaUvod u CSS sintaksa, selektori (class, id, descendant)HTML: liste, forme, block/inline elementi. Div tag.VEBA i REZIME.

ta je HTMLHTML = HyperText Markup Language.

HTML nije programski jezik to je markup jezik (jezik oznaka).

Markup jezik = skup tagova.

HTML koristi te tagove da opie web stranicu.

Dakle...

HTML dokumenti = Web stranice

Struktura HTML fajla.

Tekst!Heading elementi:Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6

Paragraf: Obian paragraf

Linkovi. Linkovi se u HTML-u definiu tagom. Knjazevacka gimnazija

Rezultat: Knjazevacka gimnazija

Necemo tekst, hocemo slike!Slike se u HTML-u definisu tagom.

Formatiranje teksta (loe reenje)

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

Koristiti CSS za ovakve stvari!

HTML

Struktura HTML dokumentaObavezne naredbe:

Primer1Ovo je nas prvi primerPrimer1

Struktura HTML dokumentaIsti primer ali sa potpunom strukturom:

Primer2

Ovo je nas drugi primer

Primer2

HEAD sekcija Svaki dokument mora da sadi dva obavezna elementa i oni mora da se navedu u sledeem redosledu:

Ovo je referenca na formalnu definiciju u SGML jeziku (DTD koriene verzije HTML-a).

Ovde se upisuje naslov dokumenta Tag u kome se upisuje naslov dokumenta. Koristi se od strane razliitih softverskih komponenti. Npr. Koristi se kod pretraivanja i prikazuje u listi naenih dokumenata.

Elementi HEAD sekcije ISINDEX element (ne koristi se mnogo) BASE element, specificira baznu adresu koja se implicitno podrazumeva kod URL referenci META elementi- daju razliite informacije, npr. Do kada vai dokument i sl. LINK elementi, daju informacije o vezi dokumenta sa drugim dokumentima. STYLE element definie stil prikaza podataka koji se koristi u dokumentu. SCRIPT element; - odnosi se na script jezik koji se koristi u dokumentu.

Base element

U ovom sluaju

lista primera Je ekvivalentno sa:

lista primera

Link element Link element kojim se navodi koji je style sheet korien:

LINK element koji daje informacije o autoru dokumenta:

LINK elementi koji mogu da stoje u velikom dokumentu koji je izdeljen na povezane delove:

Style element

Prva linija je obican tekst.Druga linija ja podvucen tekst.Treca linija je boldiran tekst.

Primer

Tagovi na nivou bloka Razliiti nivoi zaglavlja: H1, H2, H3, H4, H5, H6

Tagovi na nivou paragrafa: Obian paragraf: P Paragraf pod navodnicima: BLOCKQUOTE Adresa autora kao odvojen paragraf: ADDRESS preformatted text to be displayed as such, preserving layout (lines, blanks): PRE

Tagovi na nivou bloka Liste: Noprmalne neureene liste: UL, LI Kompaktne liste: MENU, LI list of small items: DIR, LI Ureene liste: OL, UL , LI definition list (Oznaene liste): DL, DT, DD Tabele: TABLE, CAPTION, TR, TH, TD Deljenje dokumenta na delove od kojih svaki moe da ima svoje atribute: DIV, CENTER Promena teme : HR Rad sa formularima: FORM, ISINDEX.

Formatiranje teksta H1, H2, H3, H4, H5, H6

Formatiranje tekstaUvodOpste napomene

Primer

BLOCKQUOTE The original context of the saying O tempora, o mores is the following:

O tempora, o mores! Senatus haec intellegit. consul videt; hic tamen vivit. Vivit? immo vero etiam in senatum venit, fit publici consilii particeps, notat et designat oculis ad caedem unum quemque nostrum. Cicero, Oratio in Catilinam Prima, 2 Primer

ADDRESS

miljan.jeremic@gmail.com

Primer

PRE ASCII znaci koji se tampaju:

! " # $ % & ' ( ) * + , - . /0 1 2 3 4 5 6 7 8 9 : ; < = > ?@ A B C D E F G H I J K L M N OP Q R S T U V W X Y Z [ \ ] ^ _` a b c d e f g h i j k l m n op q r s t u v w x y z { | } ~ PrimerIsti primer bez PRE taga

Primer1

UL , LI

milk bread apples.

disc square circle

Primer

MENU Undo Cut Copy Paste Find LI> Find Again

PrimerMnogi itai MENU prikazuju kao UL listu mada bi trebalo da prikazuju mnogo kompaktniju listu.

OLLista sa numerisanim elementima Proceed as follows: Try to guess how to use the program. If it fails, send lots of questions to Usenet News. If they flame you, consider contacting local user support. When everything else fails, read the manuals. Primer

OL Deklinacije u latinskom se razlikuju po nastavcima u genitivu jednine : -ae, eg terra:terrae -i, eg annus:anni -is, eg labor:laboris -us, eg fructus:fructus -ei, eg dies:diei. Primer

DL, DD, DT Recursion, indirect See indirect recursion. Indirect recursion See recursion, indirect.

Primer

TABLE Povrsine nordijskih zemalja u kvadratnim km Zemlja Ukupna povrsina Povrsina kopna Denmark 43,070 42,370 Finland 337,030 305,470 Iceland 103,000 100,250 Norway 324,220 307,860 Sweden 449,964 410,928 Primer

DIVIzdvajaju se delovi teksta radi posebnog poravnjanja. This is a normal paragraph which will be rendered according to default alignments, which usually means left alignment. This is text which will be centered. This is a longer text paragraph which will be centered. It is so long that line breaks will most probably occur. Notice that the division into lines is usually not the same as in the HTML file. Primer

HRUbacuju se horizontalne linije koje razdvajaju delove teksta. Primer

A horizontal rule placed at the right and half the width of the document layout: An example with all possible spices: placed at left, solid rule (no shading), height 5 pixels, width 100 pixels:

FORM PrimerPrimer sloenijeg formulara za evaluaciju:This is a form for sending your personal evaluation of the document Learning HTML by Examples as a whole. Your home page URL (if any): Please rate the overall usefulness of the document (to you): Very little (or none) Little Some Great Very great What about general understandability? (No opinion) Very difficult Difficult Average Easy Very easy Please feel free to add any comments you like: Would appreciate a personal answer; E-mail address: When you are finished with filling the form, select this:

Linkovi PrimerHiperlink koji se referencira na dokument u istom direktorijumu gde je i aktivni dokument:

Next up: CSS! HTML TODO:

i tagovi. i tagovi.Block level i inline level elementi.

tag!

CSS

ta su to stiloviStil: Skup informacija o stilu prikaza koje se primenjuju na ist tekst.

Pojam nije nov koristi se ve dugo kod tekst procesora (Stilovi u Wordu, Tex-u i slino.

Zato treba koristiti stiloveIzdvajanje sadraja od prikazaUniformnost stranica iste prezentacijeLake izmene pogleda na iste podatke

Primer stilaBODY {font: 10 pt Palatino; color: red; margin-left: 0.5in} H1 {font 18 pt Palatino; color: blue} H2 {font 16 pt Palatino; color: AA4D60}

Format{characteristic: value} Vie svojstava odjednomP {font: 12 pt Times; line-height: 14 pt; color: FF00FF; text-indent: .25 in}

Tabela sa karakteristikamaTable 14.1Font and Paragraph Characteristics Allowable in HTML Style SheetsTabela

Korienje Link taga A Document that Uses Style Sheets

Stil ugraen u dokumentSTYLE tag Sample text 1. Sample text 2. Primer

Inline stilovi

Informacije o stilu se nalaze unutar HTML taga i odnose samo na taj element. Yellow, centered text Back to normal

Tagovi sa stilom

- (the heading styles) and

Tag Tag kojim se stil vezuje za deo teksta.Favorite Computer Games You Don't Know Jack Doom Wolfenstein 3D Solitaire Freecell Primer

Grupisanje stilovaAko elimo da istim tagovima u tekstu dodelimo iste atribute onda to moemo da uradimo na jednom mestu: A:link {font-size: 12 pt; font-weight: bold; font-decoration: underline} A:visited {font-size: 12 pt; font-weight: bold; font-decoration: underline} A:active {font-size: 12 pt; font-weight: bold; font-decoration: underline}

Grupisanje stilovaIsto ali odjednom: A:link A:visited A:active {font-size: 12 pt; font-weight: bold; font-decoration: underline}

Klase stilova

A:link.red {color: red} A:link.yellow {color: yellow} A:link.fuschia {color: fuschia}

Here's a red link! And a yellow one ... And a fuschia one! Primer:

Kombinovanje stilovaU jednom dokumentu mogu se kombinovati razliiti stilovi:Globalni stilovi: Globalne karakteristike dokumenta najbolje je definisati u posebnom css fajlu.Stlovi podsekcija: Stilove koji se odnose na delove dokumenta najbolje je definisati u okviru tagova. Specifini stilovi: Stilove pojedinih delova stranice treba definisati unutar odgovarajuih tagova kao inline stilove.

Prioriteti stilovaInline stilovi su najvieg prioriteta i ponitavaju stilove definisane u css fajlovima i one u zaglavlju dokumenta. Stilovi definisani u zaglavlju dokumenta ponitavaju one iz css fajlova. Stilovi iz css dokumenata ponitavaju stilove koji su po defoltu definisani u itau.

Hijerarhija tagovaStilovi primenjeni u jednom tagu odnose se i na sve tagove koje on sadri. Ako se stil primeni na UL tag odnosi se i na sve LI tagove koje on sadri. Svi stilovi primenjeni na BODY tag odnose se i na sve tagove unutar njega jer su mu oni herarhijski podredjeni.

CSS - Cascading Style SheetsCSS-om definiemo kako da browser prikae HTML elemente.

CSS tedi vreme i skrauje posao!

CSS sintaksa

h1 { color: blue; } SELEKTOR PROPERTY VALUE

CSS TODO:Formatiranje tekstahttp://www.w3schools.com/css/css_text.asp

Formatiranje linkovahttp://www.w3schools.com/css/css_link.asp

CSS implementacija (inline, interni, eksterni).

Class selektoriHTML:Boldovan paragraf.

CSS:.bold {font-weight: bold;}

ID selektoriHTML:Boldovan paragraf.

CSS:#bold {font-weight: bold;}

Descendant selektoriHTML:Boldovan paragraf.

CSS:p a {font-weight: bold;}

TA JE CSS? 1CSS slui za definisanje izgleda (stila) web straniceCSS = Cascade Style SheetCilj je opisati kako stranica treba izgledatiU HTML-u definiemo sadraj. Sadraj je opisan s elementima poput , ..

CSS 1CSS definie izgled sadraja: boje pojedinih elemenata i cele stranice, raspored elemenata ..CSS na jednom mestu definisao kako trebaju izgledati naslovi (), kakve je boje tekst u paragrafu (), izgled pozadine web stranice ..

TA JE CSS? 2Moemo rei da CSS opisuje kako treba prikazati HTML elemente (, ..)Izgled stranice, definisan u CSS-u, sprema se u zasebnu datoteku s ekstenzijom (nastavkom) .css

CSS 2Mogue je i ugraditi CSS instrukcije u HTML datoteku, ali je preporuljivo koristiti zasebnu CSS datoteku (tako da se ista datoteka moe povezati sa vie HTML datoteka)Preporuka je izgled stranice definisati u CSS datoteci, a sadraj u HTML datoteci

TA JE CSS? 3CSS je stvoren, jer se u starijim verzijama HTML meao sadraj i izgled.Od HTML verzije 4, sve informacije o izgledu (boje i sl.) moe se spremiti u CSS datotekuCSS omoguuje lake odravanje (velikih) web site-ova sa puno web stranicaPomou CSS, od jednom definiemo izgled svih web stranica.Ispravljanje greaka u izgledu web stranica je puno lake kroz CSS, jer greku treba ispravit na jednom mestu i odmah su sve web stranice okNaknadne dopune i izmene su zbog istog razloga olakane

CSS sintaksa 1Izgled stranice(a) je pohranjen u jednu ili vie CSS datotekaCSS datoteka se sastoji od jednog ili vie CSS pravila (rule)Pravilo se sastoji od dva dela: selektor i deklracijeU pravilo je jedan selektor i jedna ili vie deklaracija

CSS sintaksa 2CSS pravilo:

Selektor odreuje HTML element (npr )Deklaracije odreuju vrednosti svojstava na selektiranom HTML elementu (npr. vrednost svojstva color je green na )

CSS sintaksa 3Na poetku CSS pravila dolazi selektor (ime HTML taga), zatim dolazi lista deklaracija.Lista deklaracija se pie unutar vitiastih zagrada.Svaka deklaracija se sastoji od imena svojstva i vrednost svojstva odvojenih dvotakom.Na kraju svake deklaracije dolazi taka-zarez.

Povezivanje HTML i CSS datoteka 1Da bi web preglednik browser koji stil koristiti za pojedini HTML dokument, potrebno je povezati HTML datoteku s CSS datotekomPovezivanje HTML i CSS datoteke se obavlja tako da se u HTML datoteku navede referenca na CSS datoteku

HTML CSS 1U tag, u HTML datoteci napie se:

Povezivanje HTML i CSS datoteka 2href ime CSS datoteke (npr. ime.css)type="text/css rel="stylesheet" ozaava da se radi o CSS tipu datoteke

HTML CSS 2Primer:Trenutnu HTML datoteku povezujemo s CSS datotekom koja se zove kontinenti.css:

Povezivanje HTML i CSS datoteka 3Osim povezivanje odvojene CSS datoteke s HTML datotekom (to je pokazano na prethodnim slide-ovima), mogue je i ubaciti CSS direktno u HTML datotekuU tag, napie se tag koji definie CSS kod.CSS datoteke se esto spremaju u zaseban folder ispod glavnog foldera (npr: podfolder __css)

Povezivanje HTML i CSS datoteka 4Primer CSS ugraenog u HTML:

hr {color:sienna;}p {margin-left:20px;}body {background-image:url("images/back40.gif");}

PRIMER CSS 1Napraviti dve web stranice o kontinentima. Sadraj web stranica (HTML): Prva stranica je o africi, a druga o aziji. Svaka stranica sadri naslov () s imenom kontinenta/web stranice. Na stranici je paragraf () teksta o kontinentu i lista 3 poznate ivotinje s kontinenta.

CSS 1Stil stranice (CSS): Sve stranice imaju isti stil. Podloga je zelena, naslov (ime kontinenta) je crvene boje i centrirano je. Imena ivotinja u listi su italic.

PRIMER CSS 2a) HTML stranica: afrika.html

Afrika

Afrika Afrika je kontinent smjeten oko ekvatora. Poznate ivotinje u Africi su: Lav Majmun irafa

PRIMER CSS 3b) HTML stranica: azija.html

Azija

Azija Azija je najvei kontinent. Poznate ivotinje u Aziji su: Tigar Deva Panda

PRIMER CSS 4c) CSS datoteka: kontinenti.cssbody{ background-color : green;}

h1{ text-align : center; color : red;}

li{ font-style : italic;}

PRIMER CSS 5Napomena:U primeru se pretpostavlja da se css datoteka nalazi u folderu d:\HTML stranice\__css\ i da se zove kontinenti.css

PRIMER CSS 6Preglednik (Internet Explorer): Bez CSS, samo HTML

PRIMER CSS 7Preglednik (Internet Explorer): HTML i CSS

KomentariU CSS-u komentari se piu s /* na poetku i */ na krajuPrimer:body{ /* Boja pozadine cijele stranice */ background-color : green;}

Komenar je /* Boja pozadine cele stranice */

Nazad na HTML! Objasniti liste.

Objasniti forme.

Block level elementi.

Inline level elementi.

Block level elemeti!, .., , , ,..

Browser ih prikazuje jedan ispod drugog.

Width, Height, line-height i top/bottom margine se mogu menjati.

Margine, ha? CSS TODO: BoxModel.

Inline level elementi!, , , , , i .

Browser ih prikazuje jedan pored drugog.

Width, Height, line-height i top/bottom margine se mogu menjati.

tag. definie sekciju na stranici.

Koristi se za grupisanje odreenenih elemenata na strani kako bi se oni stilizovali CSS-om.

HTML i CSS in general HTML definie strukturu web stranice preko svojih tagova.

CSS definie kako e web stranica izgledati.

Struktura HTML stranice

Ucenici ucenicima

content..

Tekst, link, slika...ST:, , ... ,

LINKGOOGLE

SLIKA

CSS sintaksa i selektorih1 { color: blue; }

HTML: Class selektor:Boldovan paragraf.

CSS:.bold {font-weight: bold;}HTML: Id selektor:Boldovan paragraf.

CSS:#bold {font-weight: bold;}

Block/inline level elementiBlock level: , , ...Browser ih prikazuje jedan ispod drugogCSS firendly

Inline level: , , ...Browser ih prikazuje jedan pored drugogNemogunost definisanja CSS property-a: width, height, margin, padding.

Div tag.Definie povr u browseru.

Potpuno neprimetan, sve dok CSS-om ne definiemo suprotno.

Osnovni alat za definisanje layout-a stranice.

CSS day! PLAN ZA NASTAVU. CSS: Box Model. Margin. Padding.CSS: Properties (Float, Clear)CSS: PozicioniranjeapsolutnorelativnofiksnoHTML: Poetak naeg projekta. HTML kodiranje.

Box model (na primeru taga)

Margine. Pitanje za vas.

Margin: spoljanji prostor od okvira do nekog drugog elementa.

#div1#div2#div1 { margin: 50px;}#div2 { margin: 50px;}

Padding.padding: unutanji prostor od okvira do sadraja elementa.

tekst tekst tekst tekst tekst tekst div { padding: 0; width: 200px; height: 100px;} div { padding: 20px; width: 200px; (240px) height: 100px; (140px)} tekst tekst tekst tekst tekst tekst

FloatKoristei float property, moemo pomeriti neki element skroz levo (desno) i dozvoliti drugim elementima da ga okrue.Moemo float-ovati element samo ulevo ili udesno, ne gore ili dole.Elementi pre floatovanog elementa se NE remete!Elementi posle floatovanog elementa se remete!

Turn off floating Clear property!Elementi posle floatovanog elementa se remete!

Clear to spreava.

Thx, clear!

Float i clear: sintaksaFLOAT:img {float: left;}

CLEAR:img {clear: both;}

PozicioniranjeCSS property position dozvoljava da pozicioniramo elemente.

static (default) absolute relative fixed

Position: relativeRelativno pozicioniran element je pozicioniran relativno u odnosu na njegovu normalnu poziciju.

Position: absoluteApsolutno pozicioniran element je pozicioniran apsolutno u odnosu na prvog roditelja koji ima position: relative.

Ukoliko takav element ne postoji, element se pozicionira u odnosu na element.

Ostali elementi na stranici ignorisu apsolutno pozicionirane elemente, tj. ponasaju se kao da oni ne postoje.

Position: fixedFiksno pozicioniran element je pozicioniran u odnosu na ceo browser.

XHTML I CSS U IZRADI WEB STRANICAMiljan G. JeremiInformatiko drutvo infoWARE

W3CW3C World Wide Web Consortium.Nastao 1994.Nezavisna meunarodna organizacija koju ine ljudi od samostalnih Web programera pa sve do predstavnika korporacija (Microsoft, IBM, Sun, Netscape).Iako je baziran na ISO standardima, ne vri standardizaciju ve daje preporuke.

Istorijski pregled razvoja jezika za obeleavanje tekstaSGML (1986) Standard Generalized Markup LanguageHTML (1992) Hypertext Markup LanguageHTML 2.0 (1995)HTML 3.2 (1996)HTML 4.0 (1997)HTML 4.01 (1999)XML (1998) eXtensible Markup LanguageXHTML (2000) eXtensible Hypertext Markup Language

XHTMLNastao spajanjem jezika XML i HTML, odnosno definisanjem jezika HTML kao XML aplikacije.Zasnovan na verziji HTML 4.01Predstavlja striktniju varijantu jezika HMTL, tj. potrebno je potovati znatno restriktivniji skup pravila kako bi se dobili valjani dokumenti.

Elementi, atributi, vrednostiTekst se obeleava korienjem elemenata. Npr. Ovo je pasus oznaava poetak elementa, njegov kraj, align je atribut, dok je right njegova vrednost.

Pravila slaganja elemenataXML zahteva sledea pravila slaganja:Svaki zapoeti element mora da se zavri. Radi lakeg zapisa uvodi se i mogunost skraenog pisanja elemenata koji nemaju sadraj. (npr. )Elementi moraju da budu ispravno ugnjeeni i ne sme biti preplitanja (tekst nije ispravno)Imena elemenata se piu malim slovimaVrednosti atributa se piu pod navodnicima

Osnovna struktura dokmentaXML prologDOCTYPE deklaracija koreni element sa oznakom prostora imena (xmlns)zaglavlje i naslov dokumenta (, )telo elementa ()

Primer dokumenta (Demo 1)

XHTML i CSS u izradi web stranica

NaslovPrvi pasus

DOCTYPEPredstavlja oznaku tipa dokumenta i navedenen je preko DTD datoteke. XHTML podrava tri razliita tipa:STRICTTRANSITIONALFRAMESET

ValidacijaValidni dokumenti su dokumenti koji koriste elemente i atribute koji su definisani u odgovarajuoj DTD specifikaciji i to na nain koji specifikacija propisuje.Validnost dokumenta se moe proveriti korienjem odgovarajuih alata (npr. http://validator.w3.org)

Demo 2Elementi: , ..., , , , , , ,, , , ,

CSSCSS Cascading Style Sheetsomoguavaju razdvajanje sadraja i logike strukture dokumenta od njegovog izgleda i grafike prezenacijeDeo jezika HTML jo od verzije 4.0

Nivoi korienja CSS-adirektno (inline) opis izgleda elementa se navodi u okviru style atributa.ugnjeeno (embedded) opis izgleda razliitih elemenata se navodi u okviru zaglavlja dokumenta i to u okviru elementa.uvezeno (linked) opis izgleda dokumenta se uva u posebnoj datoteci koja se uvozi korienjem elementa

Selektori, svojstva, vrednostiOsnovni oblik CSS deklaracije je:selektor {svojstvo1 : vrednost1;svojstvo2 : vrednost2;...}Selektor odreuje elemente na koje se deklaracija odnosi, dok se svojstvima i vrednostima vri izmena odreenih karakteristika prikaza.

Primeri CSS deklaracijabody {font-family : Arial, sans-serif;font-size : 10pt;}p#pocetni {margin-left : 50px;}.zeleno {color : green;}

odnosi se na celokupan dokumentodnosi se na pasus iji je id="pocetni"odnosi se na sve elemente iji atribut class sadri vrednost zeleno

Demo 3svojstva:font-family, font-size, text-align, text-weight, text-style, text-decorationmargin, paddingcolor, border, background

UVOD U WEB PROGRAMIRANJE

Osnovni pojmoviWWW World Wide WebSistem meusobno povezanih hipertekst dokumenata na Internetu kojima se pristupa preko Web itaa (browsera)Hipertekst (HyperText) dokument tekst sa linkovima (referencama ka ostalim dokumentima)Internet mrea svih mreaSvetska, javno dostupna mrea povezanih raunarskih mrea koje prenose podatke korienjem IP (Internet Protocol) standarda.

Vizualizacija InternetaSvaka boja kojom je mrea nacrtana oznaava jedan domen (.com, .org, .us, ...)

Internet vs. WebInternet je mrea raunara (hardvera), dok je Web mrea dokumenata i drugih resursa (multimedija)Internet je medijum za razne servise kao to su:e-mail, file sharing, VoIP (voice telephony)WebStreaming multimedia (muzika, video,...), itd.

Osnovni pojmoviWeb aplikacija aplikacija kojoj se pristupa preko Web itaa korienjem Interneta (ili intranet mree)Web sajt skup Web strana uokviru nekom domena (npr. uokviru domena www.elfak.ni.ac.rs)Web strana dokument napisan u (X)HTML-u.

Web standardiU osnovi Web-a su tri standarda:HTTP (HyperText Transfer Protocol)HTML (HyperText Markup Language)URI (Uniform Resource Indentificator)Analogija:HTTP potanski sistemHTML pismoURI - adresa

Evolucija Web-a1980 -1990 Formiranje Weba; samo tekstualni dokumenti1993 Mosaic browser (tekst i grafika)Statiki Web sajtovi (strane se ne procesiraju na serveru)Dinamiki Web sajtovi (Web server napravi Web stranu i alje je klijentu)Dvoslojne, troslojne i vieslojne Web aplikacije

Evolucija Web-aWeb 2.0 glavni moto je kolaborativnost, tj. ljudi irom Interneta kreiraju sadrajWeb sajtovi slue kao servisiPrimeri:Google Maps (korisnici dodaju lokacije na mapi)Wikipedia (korisnici piu sadraj)Del.icio.us (social bookmarking)MySpace, Faces (predstavljanje korisnika)

Web 2.0YouTube, Google Videos (korisnici uploaduju video materijal)Blog sajtovi (online dnevnik, korisnici piu blogove)

(X)HTML I CSSOsnovni elementi Web strane

Osnovi HTML-aHTML - Hypertext Markup Language.Tekst sa dodatnim karakteristikama: formatiranje, slike, multimedija i linkovi ka drugim dokumentima. XHTML eXtensible Hypertext Markup LanguageIzveden iz XML-a i time je sintaksno stroi od HTML-a (maltene pravilno napisani HTML)

CSS Cascading Style SheetsHTML elementi slue da se napravi sadraj Web strane (u smislu strukture strane): ovo ovde je naslov, zatim ide podnaslov, pa slika, itd... Stilovi definiu kako da se prikau HTML elementiOni definiu kako e naslov izgledati, gde e biti pozicija slike, kakva e biti slova u tekstu, itd.

HTML se sastoji od: elemenata, atributa, komentara i znakovnih referenci. &quot predstavlja

Struktura HTML dokumentaDeo za informacije o verziji HTML-aZaglavlje - informacije o dokumentuTelo dokumenta sadraj, tj. Skup HTML elemenataElement se sastoji od poetnog dela (tag-a, ), sadraja i zavrnog dela (). Npr:Novosti

Neki elementi nemaju sadraj i krajnji deo, i njima se na kraju poetnog dela stavlja /. Npr:Crta se stavlja u poetnom delu kao znak da je to ujedno i kraj elementa

Postoje dva tipa elemenata:Blokovi (block-level) -poinju novim redom, mogu da sadre oba tipa elemenata; npr. P, DIV, TABLENeposredni (inline, text-level) ne poinju novim redom, mogu da sadre samo inline elemente; npr. SPAN

Primer

Moja prva Web strana

world Hello again

Paragraf sa identifikatorom par1SPAN inline element; style atribut predstavljaCSS objekat pridruen ovom SPAN elementu

Primer 1

HTML i CSSSvaki HTML element ima pridruen CSS objekat. Svaki HTML element je uokviren kutijom iji je izgled definisan tim CSS objektom.

Osnovne kategorije CSS objektaCSS objekat se sastoji od mnotva atributa koji se mogu svrstati u sledee kategorije:Border - Izgled okvira Margin - Udaljenost od drugih elemenata Padding Udaljenost od okvira do sadrajaFont Izgled slovaBackground Izgled pozadine

Deklarisanje stilovaTri naina za deklarisanje stilovaU style elementu uokviru straneU style atributu uokviru samog elementaU eksternom CSS fajlu

Deklaracija u style elementu Uvod u CSS #par1 {font-family:tahoma;font-size:20px;border:2px #223300 dashed;/* slozeni atribut */background-color:#3d7f44;}

Hello world Hello again

Deklaracija u style atributu Uvod u CSS

world Hello again

Deklaracija u eksternom fajlu Uvod u CSS

Primer 2

Kako selektovati elemente u CSS-u?Postoje vie naina za selekciju elemenata. Tri osnovna su:Selekcijom tipovaSelekcijom klasaSelekcijom ID-a

Selekcijom tipovaPrimer:h1 {color:red;}svi h1 elementi e biti crvene bojeGrupisanje tipova:h1, h2, h3 {color:red;}svi h1, h2 i h3 elementi e biti crvene boje

Selekcijom klasaKoncept klase. Svaki HTML element moe pripadati jednoj ili vie klasa. To se navodi u class atributu:Navedeni paragraf ( element) pripada klasi specialNavedeni paragraf ( element) pripada klasama special i highlight

Sada uokviru style elementa ili eksternog fajla navesti definiciju klase (jednostavno navesti sve atribute) :.special {color:red;}Sintaksa: taka (.) pa ime klase

Selekcijom ID-aPrimer:#par1 {color:red;}Element sa ID-om par1 e biti crvene bojeSintaksa: znak # pa ID elementa

Nasleivanje stilovaSvaki HTML element kaskadno nasleuje karakteristike CSS objekta pridruenog roditeljskom HTML elementu.Analogija sa nasleivanjem u objektno-orijentisanim jezicima

Nasleivanje stilova - primer

Hello

DIZAJN INTERFEJSA WEB APLIKACIJEUpotreba (X)HTML-a i CSS-a

Dizajn stranePostoje tri naina dizajniranja Web strane:Pomou okvira (FRAMESET)Pomou DIV i SPAN elemenataPomou tabela (TABLE)

Tables are dead...long live tablesPrema W3C standardima, preporuuje se dizajn strane pomou DIV i SPAN elemenata, uz pomo CSS-a (stilova) - http://www.glish.com/css/U praksi nije mogue uvek dizajnirati stranu ovom metodom zbog parcijalne podrke Web itaa, tako da se i dalje koriste tabeleOkviri se generalno izbegavaju kao vizuelno loe reenje, pritom i zbunjujue za korisnike

Primer strane

Dizajn strane - pregled

DIZAJN INTERFEJSA POMOU CSS-A

Dizajn pomocu CSS-a

Rezultat

Dizajn pomocu CSS-a

Prva kolona Druga kolona Footer

Prvi DIV element se sastoji od tri DIV elementafloat atribut odreuje poziciju elementa u odnosu na elemente istog nivoa. Umesto da ova tri DIV-a budu jedan ispod drugog, oni e se reati jedan pored drugog

Tri DIV elementa u vidu kolona

Dizajn pomocu CSS-a

Prva kolona Druga kolona dfTest Footer

Ovaj DIV element se sastoji od dva DIV elementa

Konaan rezultat

DIZAJN INTERFEJSA POMOU TABELA

HTML tabelaTabela se u HTML-u kreira pomou tri elementa:Jednog glavnog elementa (), definie tabeluElemenata za redove ( od table row)Elemenata za kolone uokviru reda ( od table data)Postupak: definie se glavni, table element. On sadri tr elemente (redove), a svaki red sadri isti broj td elemenata.

Upotreba Float-a

Glavni deoFooter

U ovom sluaju (jo uvek) imamo samo jednu kolonu, pa zato i jedan td element Nije potrebno stavljati height atribut jer eovaj red zauzeti preostali prostor, tj. 10% Sledei korak je da se u prvi red ubaci nova tabela koja e sadratisamo jedan red i tri kolone. Alternativni nain je da se vri spajanjekolona (colspan atribut) (prvi red 3 kolone, drugi samo jednu)

Primer za rowspan i colspan

1 2 3

4 6

7 8 9

jo tri kolone Prva kolona Druga kolona Treca kolona Footer Cellspacing i cellpadding odreuju udaljenost izmeu elija. Da ne bi bile upljine izmeu elija, vrednosti su im 0. Ovi atributi jo uvek ne mogu da se kontroliu preko CSS atributa margin i padding (bag)Sledei korak je da se trea kolona podeli na dva reda. To emo uraditi ubacivanjem nove tabele sa dva reda i jednom kolonom u treu kolonu

... i dva reda... . . .

gore dole

. . .Prikazana je samo trea kolona i tabela koja je ubaena u nju

Razdvajanje stila i HTML-aRadi lakeg menjanja izgleda sajta, preporuuje se da se definicije stilova nalaze u eksternoj datoteci. Tako e promenom te CSS datoteke biti promenjen izgled svih Web strana koji je koristePrincip je sledei: svi stilski atributi koji se ponavljaju za neke elemente izdvojiti i napraviti CSS klasu koja definie te atribute, a onda povezati te HTML elemente da koriste tu klasu

Na primer, sve tri tabele imaju atribute:width:100%; height:100%;Zato emo ova dva atributa izdvojiti i napraviti novu klasu (neka se zove max) table.max {width:100%; height:100%;}prefiks table znai da navedeno pravilo vai samo za table elemente koji pripadaju klasi max (a ne za recimo div element, iako pripada klasi max)

Prva kolonaDruga kolona gore dole Footer Sve tri tabele pripadaju klasi max:table.max {width:100%; height:100%;}

Prva kolonaDruga kolona gore dole Footer Elementima koji imaju svoj CSS stil definisan (ne javlja sekod drugih elemenata) je pridruen id i za svaki konkretanelement je definisan stil

Stilska (CSS) datoteka table.max {width:100%; height:100%;} tr {vertical-align:top;} #glavniDeo {height:90%;} #prvaKolona {width:200px; background-color:#c4df9b} #drugaKolona {width:200px; background-color:#00bff3} #trecaKolona {background-color:#c7b299} #trecaGore {height:80%;} #trecaDole {background-color:#fbaf5d} #footer {height:90%; background-color:#988675}

Dizajn tabelom 4

**Dat je hierarhijski prikaz strane. Prvo ce da se napravi pomocu DIV-ova (CSS), a posle pomocu tabela