HTML priručnik HTML – Uvod HTML je standardan markerski jezik koji se koristi za kreiranje Web strana. ̶

HTML je akronim od Hyper Text Markup Language. ̶

HTML opisuje strukturu Veb strana. ̶

HTML elementi su osnovni gradivni elementi HTML strana. ̶

HTML elementi se predstavljaju tagovima. ̶

HTML tagovi označavaju delove sadržaja, kao što su „naslov“, „paragraf“, „tabela“, itd. ̶

Browser-i ne prikazuju HTML tagove, već ih koriste da sadržaj strane prikažu na određeni način. ̶

Za HTML dokumente se koristi ekstenzija htm ili html (htm ekstenzija se koristila ranije, kada pojedini operativni sistemi nisu podržavali ekstenzije sa više od 3 karaktera). ̶

Jedna ili više povezanih veb strana i postavljenih na server tako da budu dostupni preko interne mreže ili interneta naziva se web site (veb sajt).

HTML – Istorija Autor HTML jezika je Tim Berners-Li (Tim Berners-Lee), britanski naučnik u CERNu, kao deo World Wide Web (WWW) projekta, 1989. godine. Ideja je bila da se omoguć automatsko deljenje informacija između naučnika na univerzitetima i naučnim institucijama širom sveta. Prvi Web sajt je bio postavljen na Bernerovom NeXT računaru u CERN-u, a od 2013. godine strana je ponovo dostupna na originalnoj Web adresi: http://info.cern.ch/hypertext/WWW/TheProject.html

Kako u to vreme nije bilo grafičkih browser-a, već su korišćeni tekstualni, na posebnoj Web adresi je dostupna verzija prvog sajta koja se u modernim browser-ima prikazuje slično kao što je tada izgledala u tekstualnom browser-u: http://line-mode.cern.ch/www/hypertext/WWW/TheProject.html

Verzije HTML jezika do danas su: 





HTML 1.0: Prva verzija, koja je bila ograničena na 20 elemenata, od kojih su 13 ostali sastavni deo 4.01 standarda. Nastala je kao hybrid „href“ taga i već relativno prihvaćenog SGML markap jezika (Standard Generalized Markup Language).Prvi web browser je napisao Tim Berners-Lee pod nazivom WorldWideWeb, kasnije nazvan Nexus, kreiran za NeXTstep platformu. HTML 2.0: Uveden 1994. godine kao prvi zvaničan HTML standard, prema kome su ocenjivani tadašnji web browser-i, publikovani još 1993. godine: Celo, Arena, Lynx, tkWWW i Mosaic. Mosaic Communications je kasnije promenio ime u Netscape Communications, objavljuje Netscape, prvi komercijalni web browser sa grafičkim interfejsom. HTML 3.2: U cilju uspostavljanja standarda Tim Berners-Lee osnovao je World Wide Web Consortium (W3C). Do 1997. godine objavljen je HTML 3.2 standard. HTML već tada podržava tabele, kao i prve CSS specifikacije uvedene kao zvanična preporuka W3C. Microsoft Internet Explorer 3.0 je sustigao Netscape po pitanju podrške za HTML i pružio prvu potpunu podršku za CSS na tržištu. U sred „rata browser-a“, obe strane (IE i Netscape) su napravile ustupke i cilju standardizacije HTML jezika, posebno „marquee“ i „blink“ atributa odgovornih za animirani tekst. Ovaj period je poznat po preteranom korišćenju frejmova (frames/framesets), jednog od najvećih promašaja u razvoju interneta, na „izuzetnom“ drugom mestu, iza auto-play opcije za midi fajlove. Takođe, Microsoft objavljuje IE 4.0, koji se isporučivao uz Windows, čime su drugi browser-i dovedeni u situaciju da izgube korisnike i podršku na tržištu.







HTML 4.0/4.01: Standard objavljen krajem 1997. godine, i konačno prihvaćen i zaokružen kao 4.01 u decembru 1999. godine. Označio je prekretnicu u smislu uvođenja mnogih elemenata i atributa koji su bili specifični za pojedine browsere. Ova verzija uključuje CSS. Natscape je izgubio „rat browser-a“ i otkupljen je od strane AOL-a za 4,2 milijarde dolara. XHTML 1.0: Specifikacija uvedena 2000. godine sa preporukom da se koristi kao zajednički standard sa HTML 4.01, a uključuje XML kako bi se osiguralo pravilno pisanje koda i interoperabilnost između dva jezika. HTML5: W3C objavljuje HTML5 kao preporuku tek u oktobru 2014. godine, sa malim izmenama, uglavnom vezanim za greške, označenim kao 5.1 i 5.2. Do tada je W3C radio na XHTML 2 standardu, od koga se na kraju odustalo zahvaljujući grupi pragmatičnih ljubitelja tehnologije, browser programera i stručnjaka koji su radili na pisanju specifikacija, okupljenih u samozvanoj „Web Hypertext Application Technology Working Group“ (WHATWG). Ova grupa je uključivala predstavnike iz kompanija i projekata kao što su: Apple, Mozilla i Opera. Grupa je rad započela 2008. godine, a prvi nacrt je bio gotov 4 godine kasnije. Već 2009. godine je u HTML5 tim prešao praktično ceo tim koji je radio na XHTML standardu.

HTML – Uvod HTML tagovi su nazivi elemenata uokvireni znacima „<“ i „>“ (tzv. izlomljenim zagradama, u praksi se koriste ASCII karakteri za znake „manje“ i „veće“): ovde ide sadržaj... Tagovi uglavnom dolaze u parovima, kao npr.

....

. Prvi tag u paru se naziva početni tag (start tag), a drugi je završni tag (end tag). Završni tag se piše isto kao početni, samo se ispred naziva dodaje kosa crta. U engleskoj terminologiji početni tag se naziva i opening tag, a završni closing tag. Unutar početnog taga se, pored naziva elementa, mogu navoditi i „atributi“, koji uglavnom imaju formu: naziv_atributa=”vrednost”. HTML elementi mogu biti ugneždeni, tj. elementi mogu sadržati druge elemente. Svi HTML dokumenti se sastoje od ugneždenih HTML elemenata (osim, logično, elementa). Važno je napomenuti da početni i završni tagovi ugneždenih elemenata ne smeju biti ukršteni, tj. završni tag ugneždenog elementa mora biti ispred završnog taga elementa u kome je on ugnežden. Ugneždeni elementi se nazivaju “child” elementi, dok se element u odnosu na drugi element koji je ugneđden u njemu naziva “parent” element. Ugneždavanje može biti direktno i indirektno, u zavisnosti od toga da li je neki element direktni “child” element svog “parent” elementa ili posredno preko drugog elementa (npr. kada postoji 3 i više nivoa ugneždavanja). Neki elementi će u browser-u biti pravilno prikazani i ako nemaju završni tag, ali to treba izbegavati iako HTML5 standard predviđa da pojedini završni tagovi budu opcioni. Postoje HTML elementi koji nemaju završni tag, već samo početni (npr. hr, br, img, link). Neki od ovih elemenata su „prazni“, tj. nemaju nikakav sadržaj (kao npr. br element, koji predstavlja prelom u novi red). Elementi koji nemaju završni tag mogu se „zatvoriti“ tako što se u početnom tagu doda kosa crta iza naziva elementa, npr.
.

HTML tagovi se mogu pisati i velikim i malim slovima, jer HTML5 ne zahteva da se tagovi pišu malim slovima, međutim W3C (World Wide Web Consortium) preporučuje korišćenje isključivo malih slova za HTML tagove, a zahteva kod strožih tipova dokumenata kao što je XHTML. Kompletan spisak HTML tagova možete pogledati na sledećem linku: http://www.w3schools.com/tags/default.asp Za pregled Veb strana koristi se Web browser (prevodi se kao veb čitač, browser ili čak pretraživač – jer se nekada koristio za „pretraživanje“ na internetu kada nisu postojali pretraživači u današnjem smislu kao što su Google Search i slični). Neki od danas najpopularnijih browser-a su Google Chrome, Mozilla Firefox, Microsoft Internet Explorer (poslednja je verzija 11, zamenjen je sa Microsoft Edge 12), Apple Safari, itd. Postoje i mnogi manje poznati čitači koji su bazirani na kodu ili na delu koda (uglavnom tzv. rendering engine) nekih od čitača sa otvorenim kodom (Open Source), kao što su SeaMonkey, K-Meleon, Pale Moon, Lunascape, NetSurf, Bottom Line, itd. U većini browser-a HTML kod se može videti kombinacijom tastera Ctrl+U ili preko odgovarajuće stavke u meniju.

HTML – kreiranje dokumenata Za kreiranje HTML dokumenata možemo koristiti bilo koji tekstualni editor (Notepad, Wordpad, Notepad++, Vim, itd.), ali su najpogodniji editori koji prepoznaju HTML sintaksu i olakšavaju nam kucanje HTML koda. Postoje alati za kreiranje Veb strana bez poznavanje HTML koda, tako što omogućuju vizuelno kreiranje sadržaja (tzv. dizajn mod ili dizajn režim rada), na osnovu koga generišu HTML kod. Međutim, većina takvih alata ima ograničene mogućnosti, jer ne podržava u dizajn modu sve mogućnosti koje pruža HTML jezik. Neki od popularnijih alata za vizuelno kreiranje HTML dokumenata su Adobe Dreamveawer (ranije Macromedia Dreamweaver), Microsoft Visual Studio (ranije je postojao Microsoft Expression Web, poslednja verzija je 4, čije mogućnosti su kasnije integrisane u Visual Studio), Google WebDesigner, Xara Web Designer, Web Architect, StudioLine Web Designer, Weebly, itd. Većina profesionalaca uglavnom radi u režimu pisanja koda (tzv. Code mod), jer na taj način može da iskoristi sve što pruža HTML 5 jezik, a naročito CSS3 (Cascading Style Sheets) koji služi za upravljanje prikazom HTML sadržaja. Neki od popularnih editora za pisanje HTML koda su: Notepad++, Adobe Brackets, Sublime Text, Atom, Vim, Emacs, Eclipse, NetBeans, UltraEdit, Light Table, Komodo IDE, PHPStorm, WebStorm IDE, Microsoft Visual Studio Code, itd.

Visual Studio Code Definitivno je danas jedan od najpopularniji alata za tzv. „front-end“ razvoj. To je besplatan proizvod kompanije Microsoft, i dostupan je za Windows, MacOS i Linux operativne sisteme. Pored HTML-a i CSS-a, ima ugrađenu podršku za JavaScript, TypeScript (Microsoft skript jezik otvorenog koda, praktično predstavlja nadskup JavaScript jezika) i Node.js (JavaScript RTE za izvršavanje JavaScript koda na strani servera). Može se preuzeti sa adrese: https://code.visualstudio.com.

Program radi na principu otvaranja foldera/direktorijuma, u kome se nalaze svi dokumenti povezani sa projektom na kome radimo. Jednostavno se u meniju File odabere stavka Open Folder i odabere se odgovarajući folder na našem računaru.

Pored glavnog menija, postoji sporedni/side meni, koji se nalazi na panelu sa leve strane i sadrži nekoliko ikonica sa sledećim alatima: Explorer, Pretraga, Source Control (upravljanje verzijama koda, automatski se povezuje sa instalacijom Git-a ako je on instaliran), Debagovanje (nalaženje i otklanjanje grešaka, koristićemo ga za JavaScript ), Ekstenzije (mogućnost instalacije dodataka koji nam olakšavaju rad). U donjem delu panela se nalazi ikonica za nadogradnju na poslednju verziju (Update).

Kada otvorimo prazan folder, Visual Studio Code (u daljem VSC) prikazuje „Welcome“ dokument, a u Explorer panelu se prikazuju dve sekcije: sekcija „Open

editors“, u kojoj su označeni otvoreni dokumenti, i sekcija sa nazivom foldera koji smo otvorili.

U toj drugoj sekciji, kada je aktivna (kada se kursor nađe iznad nje), pojavljuju se četiri ikonice sa funkcijama za: kreiranje novog dokumenta, kreiranje novog foldera, osvežavanje prikaza i „collapse all“ (za kompaktniji prikaz bez prikaza sadržaja poddirektorijuma). Ako je VSC prethodno zatvoren bez ijednog otvorenog dokumenta, pri novom pokretanju će u glavnom delu prozora biti prikazana „Welcome“ poruka sa opcijama prikazanim na prethodnoj slici. Da bismo u VSC kreirali novi HTML5 dokument, možemo u Explorer panelu odabrati ikonicu za novi dokument, pri čemu moramo paziti da pri davanju naziva dokumenta unesemo i ekstenziju (html), kako bi program pravilno prepoznao sintaksu jezika i time nam olakšao rad. Kod osnovnog HTML5 dokumena možemo otkucati ručno, prekopirati primer sa W3Schools sajta (ili nekog drugog izvora), ili iskoristiti činjenicu da VSC ima ugrađen Emmet (skup dodataka za tekst editore, ranije poznat kao Zen Coding, koji omogućava brže unošenje često korišćenih delova koda preko definisanih skraćenica), kao na sledećoj slici.

Dakle, kucanjem „html:5“ ili samo „html“ i biranjem ponuđene opcije sa „:5“ sufiksom, dobijamo generički primer HTML5 dokumenta, kao na sledećoj slici. Na sledećoj adresi možete pogledati listu Emmet skraćenica: https://docs.emmet.io/cheat-sheet/

HTML – osnovni elementi Objasnimo značenja pojedinih delova prethodnog koda.

Ne predstavlja HTML tag, već deklaraciju kojom se označava verzija HTML jezika u kojoj je napisan dokument. Pre HTML5, u HTML 4.01 ova deklaracija se odnosila na DTD (Document Type Definition), jer je ta verzija HTML jezika bila bazirana na SGML (Standard Generalized Markup Language) Preporučljivo je uvek dodavati doctype deklaraciju, iako se često mogu videti HTML dokumenti koji započinju html tagom. Pored ove za HTML5, postoje još sledeće doctype deklaracije:



Prve tri se odnose na HTML 4.01 standard, a poslednje tri na XHTML standard. Poslednja doctype deklaracija se odnosi na XHTML 1.1 standard, koji u stvari predstavlja isto što i XHTML 1.0 Strict.

Ovaj tag govori browser-u da se radi o HTML dokumentu, a predstavlja „koren“ (root) HTML dokumenta. Ovaj tag je „kontejner“ za sve ostale HTML elemente (izuzimajući doctype deklaraciju). To znači da svi ostali HTML elementi moraju biti unutar html elementa, tj. između početnog i završnog html taga.

Predstavlja zaglavlje i sadrži meta podatke o HTML dokumentu. Nalazi se uvek između početnog html i početnog body taga. Ovi meta podaci se ne prikazuju u browser-u, osim sadržaja title elementa. Metapodaci se uglavnom odnose na naslov dokumenta (title), set karaktera (character set), uključene dokumente (link), skripte, i sl. Sledeći tagovi opisuju meta podatke:

Primer prikaza paragrafa

Ovaj paragraf sadrži više redova u HTML kod, ali browser to ignoriše.

Ovaj paragraf sadrži veći

proreda u

HTML

broj razmaka i

kodu,

ali browser to ignoriše.

Broj linija u prikazanom paragrafu zavisi od ekrana i veličine prozora browsera. Ako se promeni veličina prozora, može se promeniti broj redova u paragrafu.

Rezultat:

Ukoliko je potrebno namerno prelomiti tekst ili neki drugi sadržaj u više redova, može se koristiti
tag na mestu preloma (ili
ako želimo „zatvoren“ tag):

Ovaj paragraf
sadrži više redova
unutar istog paragrafa,
namerno prelomljenih
korišćenjem br taga.

HTML5 ima posebne elemente za definisanje delova teksta sa posebnim značenjem: ̶

- boldiran tekst

̶

<strong> - važan tekst (u browser-u daje isti rezultat kao boldiran)

̶

- iskošen (italic) tekst

̶

<em> - naglašeni tekst (u browser-u daje isti rezultat kao italic)

̶

- podvučen tekst

̶

<mark> - markiran tekst, obično tekst za žutom pozadinom

̶

<small> - tekst sa manjom veličinom slova

̶

<del> - tekst za brisanje (prikazuje se kao precrtan, koristi se za ispravke)

̶

- ubačen tekst (koristi se za dopune, prikazuje se podvučeno)

̶

<sub> - tekst u indeksu, tj. subskriptu (npr. x2)

̶

<sup> - tekst superskriptu (npr. x2)

strong i em elementi imaju i semantičko značenje, tj. pored toga što u prikazu u browser-u daju iste prikaze kao „b“ i „i“ elementi, daju tekstu dodatno značenje koje može biti važno za pretraživače, programe koji vrše parsiranje i analizu sadržaja, itd.

Takođe, u element treba izbegavati kada je god moguće, pošto ga korisnici mogu pomešati sa linkovima koji su takođe podvučeni. Primere možete pogledati na sledećem linku: http://www.w3schools.com/html/html_formatting.asp

Pored ovih, koriste se još i sledeći elementi za označavanje teksta: ̶

- za kratke citate

̶

- za sekcije koje su preuzete iz drugog izvora

̶

- za označavanje skraćenica ili akronima

̶

- za označavanje kontakt adrese (npr. autora dokumenta)

̶

- za označavanje imena/naziva nekog rada i sl.

̶

- za označavanje smera pisanja teksta (koristi se dir atribut za postavljanje

smera teksta, npr. za smer sa desna na levo je dir=”rtl” Više o ovim elementima i primere možete pogledati na sledećem linku: http://www.w3schools.com/html/html_quotation_elements.asp Često se ukazuje potreba, kao i u ovom tekstu, da u HTML dokumentu navedemo neki programski kod. U tom slučaju koristimo neki od sledećih elemenata: ̶



̶



̶

<samp>

̶



̶

<pre>

Primere možete pogledati na sledećem linku: http://www.w3schools.com/html/html_computercode_elements.asp Kao i većini programskih jezika, i u HTML jeziku pisanje komentara u kodu predstavlja dobru praksu, koja će olakšati buduće izmene u kodu. Komentari ne moraju biti samo objašnjenja odgovarajućih delova koda, već se određeni delovi koda mogu uloniti iz prikaza u browser-u stavljanjem taga za komentarisanje:

Ovo je paragraf 1.

Ovo je paragraf 3.

Rezultat:

HTML – linkovi (hyperlinks) Jedna od najvažnijih osobina HTML dokumenta je mogućnost povezivanja sa drugim dokumentima pomoću a (anchor - sidro) elemenata:

U ovom paragrafu ovaj deo teksta predstavalja link.

U ovom primeru tekst „ovaj deo teksta“ se u browser-u prikazuje drugačije od običnog teksta (podrazumevano: tekst je podvučen i plave boje), i na njega je moguće kliknuti mišem nakon čega browser učitava stranu sa linka zadatog vrednošću href atributa:

Na ovaj način, korišćenjem više a elemenata, moguće je povezati različite web strane tako da korisnik može pomoću linkova sa se „kreće“ kroz web sajt, čime je omogućena bolja preglednost sadržaja. Najbolji primer ovoga je tehnička dokumentacija za Unix operativni sistem ili dokumentacija za neku opremu, koju je mnogo lakše čitati u HTML formatu kada je tematski raspoređena u više dokumenata i povezana linkovima, nego kada se čita u štampanom obliku. Link ne mora biti samo tekst, može biti i slika ili neki drugi HTML element. Link, odnosno a element mora imati bar jedan atribut, a to je href, i njegova vrednost predstavlja URL (Uniform Resource Locator) dokumenta koji se otvara klikom na link. Pored ovog, često se navodi i target atribut, čija vrednost govori browser-u da li da povezan dokument otvori u istom ili novom tabu/prozoru. Za slučaj da želimo da se povezan dokument otvori u novom tabu ili prozoru (zavisi od browser-a), koristimo sledeći kod:

U ovom paragrafu ovaj deo teksta predstavalja link koji se otvara u novom tabu.

Više o linkovima možete pročitati na sledećem linku: http://www.w3schools.com/html/html_links.asp

HTML – slike U HTML dokumentu slike se definišu img tagom, sa sledećim atributima ̶

src

vrednost ovog atributa predstavlja URL datoteke/fajla (uključujući ekstenziju) ̶

alt

vrednost ovog atributa je tekst koji će browser prikazati umesto slike (ako slika nije dostupna ili je korisnik isključio prikazivanje slika, npr. ako se radi o mobilnom uređaju pa se želi smanjiti protok preko mobilne mreže) ̶

width,height

vrednosti ovih atributa predstavljaju širinu i visinu slike, podrazumevano u pikselima (pri čemu se zadaju samo brojevi), a mogu se zadati i npr. u procentima. Nisu obavezni, ali se zadaju kako bi browser „znao“ koliko prostora da rezerviše za slike i pre nego što ih učita, što može biti važno kod sporije internet veze. Ako se zada samo jedan od ova dva atributa i ako se njegova vrednost razlikuje od stvarne dimenzije slike, browser će uzeti taj broj za veličinu slike po toj dimenziji (širina ili visina), a po drugoj će uzeti stvarnu veličinu na osnovu same slike (veličina u pikselima). Tako će se dogoditi da proporcije slike budu različite od originalnih, pa ove atribute treba navoditi uvek zajedno ako se zadate veličine razlikuju od stvarnih. Adobe Dreamweaver će pri ubacivanju slike automatski dodati width i height atribute, a umesto ovih atributa veličina slike se često zadaje CSS stilom. Primer:

HTML podržava više formata, između kojih su: ̶

bitmapirani formati: BMP, JPEG, PNG, GIF ̶

vektorski formati: SVG

Pojedini browser-i podržavaju i druge formate, direktno ili preko dodataka, kao što su TIFF, JPEG2000, PDF, a postoje i formati koji su planirani daljim razvojem HTML5 standarda, kao što je npr. 2D Canvas. Kada se koristi Adobe Dreamweaver, slike se mogu dodavati preko menija Insert->Image, ili prečicom Ctrl+Alt+i, dok kod VSC moramo sami uneti apsolutnu ili relativnu putanju do slike. Važno je naglasiti da se slike, kao i drugi povezani fajlovi (osim HTML) smeštaju u posebne dikretorijume/foldere, najčešće unutar osnovnog direktorijuma gde se nalaze HTML dokumenti, i najčešće se za slike takav direktorijum naziva „images“ ili „img“. Ovo se radi iz razloga bolje organizacije i lakše administracije svi dokumenatima koji čine jedan web sajt.

Ako se ubacuje slika koja se nalazi izvan direktorijuma u kome se nalazi HTML dokument u koji ubacujemo sliku, Dreamweaver će nas upozoriti da ne može da formira relativni URL i ponuditi da sliku prekopira u direktorijum koji mi odaberemo, ali koji je preporučljivo da bude unutar direktorijuma u kome se nalaze HTML dokumenti (može biti i u nekom od direktorijuma iznad, ali mora biti na istoj particiji/disku, a u slučaju Unix i Linux sistema mora biti unutar direktorijuma koji je dostupan ulogovanom korisniku). Kod VSC se moramo sami pobrinuti da ne napravimo problem sa putanjama do povezanih dokumenata, ali VSC prati logiku drugih od ranije popularnih editora koda, po kojoj veb developeri izbegavaju rad sa dijalozima kao što to nudi Dreamweaver, jer takav rad ne omogućava korišćenje svega onoga što nude najnovije tehnologije i usporava rad. Takođe, česte izmene u interfejsu od strane proizvođača alata za vizuelni rad sa veb stranama doveo je do toga da takav način rada praktikuju samo početnici i laici.

HTML-liste Liste: Liste se dele na: nebrojive i brojive. Brojive liste se ubacuju pomoću

taga, a nebrojive pomoću
. Pojedinačne stavke liste ubacuju se pomoću
• taga. Nije zgoreg pomenuti da i ovi tagovi po standardu zahtevaju završni tag. Primer brojive i nebrojive liste:

  Poredak popularnosti programskih jezika:

  1. Java
  2. C
  3. C#
  4. C++
  5. Objective C

  Hardverska specifikacija LINKS Helium E5700:

  • INTEL Dual Core E5700 (3.0GHz)
  • RAM: 2GB
  • HDD: 500GB
  • DVDRW
  • GMA X4500
  • tipk.
  • miš
  • zvuk
  
  
  HTML – CSS CSS je akronim od Cascading Style Sheets. CSS opisuje kako HTML elementi treba da budu prikazani na ekrani, papiru ili nekom drugom mediju. CSS znatno umanjuje obim posla jer može upravljati dizajnom više HTML strana odjednom. Može se dodati HTML dokumentu na 3 načina: ̶
  
  inline – korišćenjem style atributa unutar HTML elementa ̶
  
  interno – korišćenjem <style> elementa unutar sekcije ̶
  
  eksterno – korišćenjem eksternog CSS dokumenta
  
  Najčešće se koristi treći način, tj. ekesterni CSS dokument, mada ćemo često za kratke primere koristiti interne ili inline CSS stilove. Više o ova tri načina dodavanja CSS stilova možete pogledati na sledećem linku: http://www.w3schools.com/html/html_css.asp Detaljnu dokumentaciju za CSS možete pogledati na sledećem linku: http://www.w3schools.com/css/default.asp U narednom tekstu ćemo za CSS davati detaljnija objašnjenja samo kada se određena sintaksa pojavi prvi put. HTML5 omogućava da za svaki element odredimo način prikaza pomoću style atributa, tj. inline CSS stila:

  Ovo je paragraf crvene boje.

  Ovo je paragraf plave boje.

  
  
  Rezultat:
  
  Style atribut ima sledeću sintaksu:
  
  Za interne i eksterne CSS stilove važno je da objasnimo pojam CSS selektora i CSS deklaracije:
  
  Primer sa slike predstavlja jedan CSS stil, koji se sastoji od CSS selektora i jedne ili više CSS deklaracija koje se smeštaju unutar vitičastih zagrada. CSS selektor može biti HTML tag, vrednost ID ili CLASS atributa, ili može biti složen (compound) selektor (sadržati kombinaciju više ovih elemenata), što ćemo videti kasnije na primerima. CSS selektor se koristi za „pronalaženje“ (ili „biranje“ HTML elemenata na osnovu njihovog naziva (taga), vrednosti id ili class, ili čak nekog drugog atributa, i sl. CSS deklaracija predstavlja par atribut:vrednost;, isto kao i kod inline CSS-a, a obavezno se na kraju svake deklaracije stavlja tačka-zarez, čak i iza poslednje deklaracije iako to nije obavezno, jer u slučaju dodavanja novih deklaracija na kraju, ako se to zaboravi, browser će novu deklaraciju tretirati kao vrednost prethodne. Više o ovome možete pročitati na sledećem linku: http://www.w3schools.com/css/css_syntax.asp Kako je praktično nemoguće, posebno za početnike, zapamtiti sve moguće CSS atribute i njihove vrednosti, poželjno je pamtiti samo ideje i mogućnosti CSS-a, a većina atributa je povezana sa tim idejama i mogućnostima preko termina u engleskom jeziku. Nazive i moguće vrednosti određenih atributa lako nalazimo pretraživanjem na internetu, a u sledećem tekstu ćemo samo pominjati one najčešće korišćene atribute, i to u specifičnim primerima. Spisak CSS atributa možete videti na sledećem linku: http://www.w3schools.com/cssref/
  
  Tabele
  
  Tabela • Tabela: vrste, kolone i ćelije • Svaka ćelija može da sadrži: tekst, slike, druge tabele... • Tagovi: – … - definiše tabelu – … - definiše vrstu – … - definiše ćeliju kolona vrsta
  
  ćelija
  
  Kreiranje tabele
  
  tabela ćelija vrsta

  1	2	3
  4	5	6
  7	8	9

  
  
  Okvir tabele atribut border taga tabel

  1	2	3
  4	5	6
  7	8	9

  
  
  border = “1”
  
  border = “2”
  
  border = “5”
  
  border = “10”
  
  Razmak između ćelija i boja okvira
  
  cellpadding - definiše razmak između okvira ćelije i sadržaja ćelija Nedostaje ćelija

  		2	3
  4	5	6
  7	8	9

  
  
  Ćelija bez sadržaja
  
  Ćelija sa blanko znakom
  
  Spajanje ćelija - colspan i rowspan

  1
  4	5	6
  7	8	9

  
  
  Ćelija koja se proteže na 3 kolone
  
  

  1	2	3
  4	5
  7	8

  Ćelija koja se proteže na 3 vrste
  
  Centriranje tabele - atribut align u tagu table

  1	2
  4	5

  
  
  align=“left” align=“center” align=“right”
  
  Horizontalno poravnanje sadržaja ćelije
  
  - atribut align u tagu td

  1	2	3
  1111111111	2222222222	3333333333

  
  
  align=“right” align=“center” align=“left”
  
  Vertikalno poravnanje sadržaja ćelije - atribut valign taga td

  Zvezda	...
  Stablo	...
  Magistrala	...

  
  
  Dimenzionisanje tabele

  1	2
  1	2

  
  
  
  
  
  
  Dužina tabele u pikselima - apsolutno dimenzionisanje
  
  Dužina tabele u procentima relativno dimenzionisanje u odnosu na dužinu prozora Tabela zauzima 80% dužine prozora. Dužina tabele prati promenu dužine prozora.
  
  Dimenzionisanje tabele

  1	2
  1	2

  height=“50”
  
  height=“80%”
  
  Visina tabele u pikselima - fiksno Visina tabele u procentima relativno u odnosu na visinu prozora height=“100%”
  
  Dimenzionisanje ćelija - apsolutno Važi za celu vrstu
  
  Važi za ćeliju
  
  

  1	2
  1	2

  400 = 150 + 250 200 = 80 + 120 80 px
  
  150 px
  
  120 px
  
  400 px
  
  200 px 250 px
  
  Dimenzionisanje ćelija - relativno

  1	2
  1	2

  H1=30%H H2=70%H L2=80%L L1=20%L
  
  H=80%HW
  
  L=80%LW LW
  
  HW
  
  Naslovi … - naslov tabele … - naslov kolone

  Abeceda

  Velika slova	Mala slova
  A	a
  B	b
  C	c

  
  
  Boja pozadine • Atribut bgcolor: - boja pozadine cele tabele - boja pozadine vrste

  - boja pozadine ćelije

  - boja pozadine naslova kolone Velika slova Mala slova A a B b C c Važi za sve ćelije koje nisu nezavisno obojene Slika kao pozadina • Atribut background: Velika slova Mala slova A a B b C c D d E e F f Related Documents Html Tutorijal March 2021 0 Html February 2021 3 Html February 2021 4 Html Programiranje March 2021 0 1-html March 2021 0 Comandos Html March 2021 0 More Documents from "Jose Mise" Html Tutorijal March 2021 0 Flowgorithm, Vezbanje March 2021 0 Copyright © 2024 VBOOK.PUB.