Upload
ivana-mijatovic
View
312
Download
1
Embed Size (px)
Citation preview
HTML I CSS PROJEKATKREIRANJE SAJTA NA OSNOVU POSTOJECEG DIZAJNAMiljan [email protected]
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
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:
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
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. " 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