Designing a Web Page with

HTML and CSS

Coursera and Duke University

Kompletan prevod osnova HTML i CSS Coursera kursa

-video zapisi i vežbe-

Prva nedelja
 Welcome/Dobrodošli

Course Overview /Pregled kursa

0:03

Zdravo, ja sam Suzan. Zaista sam uzbuđena što radim sa našim timom na Duke univerzitetu, da predstavim ovaj
kurs na temelju računarskog programiranja sa JavaScript-om, HTML-om i CSS-om. Ovaj kurs smo dizajnirali za
početnike, bez prethodnog iskustva u programiranju, koji žele početi sa istraživanjem karijere u programiranju. Na
ovom kursu dete početi sa učenjem kako razmišljati kao programer, analizirati probleme, dizajnirati rešenja koja se
zovu algoritmi, i prevođenje algoritama u programe. oristedi , SS i JavaScript, modi dete da vidite svoje
programe u akciji, tako što dete izgraditi interaktivne veb stranice. Koristna veština koju treba imati, bez obzira da li
se odlučite idi dalje u programiranju ili koristiti ovaj jezike za razvoj veba u drugim oblastima.

0:52

>> Zdravo, ja sam Robert. Nadam se da dete uživati u zanimljivim projektima koje smo vam pripremili da završite
na ovom kursu. prvoj nedelji naučidete da kreirate svoju veb stranicu pomodu -a, jezika koji definiše
strukturu vaše veb stranice, kao i SS, jezik koji vam omogudava laku promenu izgleda vaše veb stranice.

1:12

Zatim, u drugoj nedelji, rešidemo problem "zelenog ekrana", gde demo se ja i re , koga dete upoznati sledede,
lansirati u svemir sa dinosaurusima. Da bismo to uradili naučidemo neke važne programske koncepte sa JavaScript-
om. Sa fokusom na manipulaciju slikama pomodu specijalni JavaScript biblioteka koje smo dizajnirali. rogramski
koncepti i veštine koje dete dobiti de vam dobro služiti kao programeru, bez obzira da li radite sa JavaScript-om ili
bilo kojim drugim programskim jezikom. tredoj nedjelji demo spojiti , SS i JavaScript veštine kako bi vaše
veb stranice bile interaktivne. Na kraju ovog kursa napravidete veb stranicu koja omogudava korisnicima da
otpreme svoje slike i primene filtre slika koje ste kreirali. Zdravo, ja sam re . Jedan od najvažniji koncepata
koji dete naučiti je kako rešiti probleme sa programiranjem. vo de izgraditi temelje za vas da razumete šta
računarski naučnici rade i razmišljaju dok pišu programe. Znanje koje de vam biti korisno, bez obzira da li dete
nastaviti sa učenjem o programiranju, ili dete sarađujeti sa kompjuterskim naučnicima, kako biste stvorili programe
zajedno. eštine koje dete naučiti primenjuju se na bilo koji programski jezik, a ne samo na JavaScript. Iako sintaksa
može biti drugačija za druge jezike koje dete učiti, primenjuju se isti osnovni principi.

2:31

Zdravo, ja sam ven. akon završetka ovog kursa bidete spremni da napravite veb stranice i programirate u
JavaScript-u kao i na drugim jezicima. Ako odlučite da nastavite našu specijalizaciju za Java programiranje,
koristidete temelje za programiranje s ovog kursa kako biste saznali kako rešiti probleme i napisati kod pomodu
Java-e. Osim toga, veb programiranje koje dete naučiti na ovom kursu bide korisno u našem završnom projektu,
gde dete naučiti da kreirate veb stranicu za ostovanje sistema za preporuke, slično kako Amazon ili Netfliks
preporučuju knjige ili filmove na osnovu želja korisnika. Sad kad znate o čemu je reč, počnimo.
 A Student's Perspective on Learning Programing/

Pogled studenta na učenje programiranja

0:03

vde sam sa Aleis urp , koja je prošlog proleda završila postdiplomske studije na Duke univerzitetu, prošlog leta
je studirala na IBM-u, a ove jeseni de biti i master student na uke-u. a, Aleis, ti si programirala od srednje škole.
Zašto nam ne kažeš malo kako si počela sa programiranjem? aravno. Ja sam zapravo uzela prvi čas, "AP
Computer Science AB", koji je bio dostupan

0:29

u mojoj drugoj godini srednje škole. oja majka je zapravo imala kompjuterske nauke za glavni predmet na
koledžu, a moj otac statistiku. Oni poseduju veb kompaniju. Tako su rekli svim mojim sestrama i meni, da barem
damo šansu kompjuterskim naukama. efinitivno je vredno znati barem osnove Java-e, a ako vam se svidi, možete
nastaviti. Ako ne, ne morate, ali dobro je znati. I nakon prvog časa sam se upecala i sve dalje je istorija. akle,
šta vas je uvuklo u kompjutersku nauku na prvom času?

1:06

>> Mislim da kada sam prvi put gledala u to, izgledalo je kao da je sve čime sam bila izložena gotovo previše za
mene. ilo je to kao, sedam se da sam razmišljala u sebi, svima koji to razumeju, svako ko može to objasniti na lak
način, je genije. I onda sam imala svoj prvi trenutak i znala sam da sam ja jedna od tih ljudi. Tako da svaki put kada
imam jedan od ti a a momenata, setim se kako je uzbudljivo što je program ispravan. akle, da završimo,
imamo puno ljudi ovde iz različiti sredina. Imaš li neku vrstu saveta ili poruku za njih, dok se upuštaju u oblast
računarstva? a, pretpostavljam, najveda stvar koju bi imala je da mnogi ljudi razmišljaju o računarstvu kao o
nečemu što samo računar treba da zna, ili nekoga ko de se baviti poslom teškog kodiranja. Ali iskreno,
kompjuterska nauka je u svakom polju i svako može imati koristi ko je proučava i zna o njoj, što je verovatno
najbolja stvar u vezi sa tim. Stvarno jeste u svakom polju i unapreduđuje svaku stvar. ako da svako može imati
koristi od učenja o računarskim naukama. redu, sjajno. vala.
 Resources to Help you Succeed/Resursi koji će vam pomoći da uspete

0:03

Zdravo, ja sam Elizabet . Ja sam deo instruktorskog tima ovde na niverzitetu uke. re nego što započnete sa
ovim kursom, želim da budem sigurna da su vampoznati neki važni resursi i dadu vam neke savete za dobar rad.

0:14

a ovom kursu videdete materijale za čitanje koji su označeni sa "probajte" i "programska vežba". Probajte
materijali vas ohrabruju da probate sami stvari koje ste videli u video snimcima, tako da možete dobiti više vežbe
pisanja koda. rogramske vežbe sadrže uputstva koja vam pomažu da napišete sopstvene programe. ostoje i
kvizovi, tako da budete sigurni da razumete sve iz video zapisa i proverite da li vaš kod radi ispravno. akođe želim
da vam pokažem sastav stranice kursa, dukelearntoprogram.com. ožete videti da imamo stranicu za svaki kurs i
stranicu često postavljanih pitanja o specijalizaciji. Ona ima sve, od sertifikata do softvera koji koristimo u toku
kursa.

0:53

Ako se vratite na početnu stranicu i izaberete kurs na kome radite, dobidete glavnu stranicu tog kursa. rvo,
pogledajmo uke JavaScript okruženje. Saznatidete sve o njegovim karakteristikama kasnije u toku kursa, za sada
samo zapamtite da možete dodi do njega na ursu 1 uke naučite da programirate, veb lokaciji. Resursi projekta
sadrže primere iz videa tako da možete detaljnije pogledati taj kod ili eksperimentisati s njim.

1:21

okumentacija sadrži kratak pregled -a, CSS-a i JavaScript-a, koje dete naučiti na ovom kursu. Ovo je korisno
ako želite da pogledate sintaksu elementa ili vidite koje metode možete koristiti u JavaScript-u, na primer.
Ovo nije potpuna dokumentacija za sve u HTML-u, CSS-u i JavaScript-u, ali je korisna referenca za ovaj kurs. ored
toga, imamo često postavljena pitanja ili stranicu sa najčešdim pitanjima. rva stvar koju treba da uradite kada
imate pitanje o zadatku ili kvizu je provera stranice često postavljeni pitanja, da biste videli da li ved imamo
odgovor za vas. va stranica sadrži pitanja o kursu 1, jer smo u delu kursa 1 na stranici. Za pitanja u vezi sa
specijalizacijom u celini, ovde se nalazi link na stranicu sa opštim pitanjima koju ste ranije videli.

2:02

So hopefully this video has given you an idea of how the course is structured, and what resources you'll need to
know about. If you have any feedback about how we can make these resources more useful to you, please let us
know in the discussion forums on Coursera.

Nadam se da vam je ovaj video dao ideju o tome kako je kurs strukturiran i koje resurse dete trebati da znate. Ako
imate bilo kakve povratne informacije o tome kako možemo da vam olakšamo ove resurse, molimo as da nas
obavestite na forumima za diskusiju o Korseri.
 Tips for Learning Programming/Saveti za učenje programiranja

0:03

Da bismo vam pomogli da lakše učite, želimo vam dati neke sugestije o tome kako učiti u toku kursa. rvo, uradite
malo svakog dana. Stvarno je teško naučiti programiranje odjednom. Ako svakodnevno prođete kroz male delove
kursa, umesto da pokušate sve to učiniti za dan ili dva, bolje dete se sedati stvari, bidete motivisani i imate više
vremena za rešavanje problema u vašem kodu. ovoredi o problemima s kodom, poznatim i kao "bube", normalno
je praviti greške kada programirate. akle naš slededi savet je, ne odustaj. Svi dobijaju bube u svojim programima, i
deo programiranja je pronadi šta nije u redu i kako to popraviti. ada programirate, zaista preporučujemo da
pratite proces od sedam koraka. o znači da planirate rešiti problem pre nego što započnete pisanje bilo kog koda.
roces od sedam koraka je važan jer vam daje metod za rešavanje problema. nda kada ste s vatili rešenje,
možete započeti pisanje koda. Kada budete spremni da započnete pisanje svoji programa, proverite da li ste
pročitali relevantnu dokumentaciju, tako da znate koje metode u Java-i postoje i kako ih koristiti. Vratite se na
dokumentaciju onoliko često koliko vam je potrebno. Zatim, iskoristite video snimke kodiranja uživo i praktične
kvizove. Za video snimke uživo, ovo je odlična prilika za programiranje zajedno sa instruktorima. onačno, za
praktične kvizove, iako oni ne doprinose vašoj završnoj oceni, i dalje imate dobre šanse da testirate svoj kod.
oristite praktične kvizove za pronalaženje i rešavanje problema, pre nego što pređete na ocenjivane kvizove. a
kraju, ako i dalje imate problema sa vašim programima, zatražite pomod od instruktora i vaši kolega na forumu za
diskusiju o kursu. eo toga kako biti dobar programer je znati kako efikasno tražiti pomod. tome demo više da
pričamo u slededem video snimku.
 Using Forums: How to Ask for Help Effectively/

Korišćenje foruma: kako zatražiti pomoć na efikasan način

0:03

Sasvim je normalno nailaziti na probleme prilikom učenja programiranja. A kada se to desi, instruktorski tim i vaše
kolege na kursevima su tu da pomognu. ajbolji način za traženje pomodi je kroz diskusione forume, koje možete
nadi ovde.

0:16

akođe možete odgovoriti na pitanja na forumima za diskusiju, i to podstičemo. Zato što je objašnjenje
programski koncepata odličan način za vas da naučite, a takođe ste pomogli i jednom od vaši kolega. Evo neki
opšti saveta o postavljanju pitanja na forumima. rvo, pre nego što započnete novu temu, trebate proveriti
stranice često postavljeni pitanja na dukelearntoprogram.com i postojede teme foruma da biste videli da li je
vaše pitanje ved odgovoreno tamo. rva stvar koju treba da uradite kada imate pitanje o programskom zadatku ili
kvizu je provera stranice za često postavljena pitanja za taj kurs. rugo, započnite novu temu ako imate novo
pitanje. e postavljajte svoje pitanje kao odgovor na ved postojedu temu, ako nije usko povezano. a taj način,
ljudima je lakše videti šta je vaše pitanje i pomodi vam brže. rede, ako želite da dodate kod, koristite okvir za
oblikovanje koda, koji je sa ovim simbolom </>.

1:09

vo je mnogo lakše za čitanje nego ako ga samo kopirate i nalepite direktno u post.

1:16

akođe, želimo vam dati neke savete o pisanju dobrog pitanja, kako bi vam drugi mogli lakše pomodi. Ako imate
problema sa programskim zadatkom, napišite ime i vezu sa zadatkom na kojem radite. Ako vaš program baca
izuzetak, možete objaviti snimak ekrana poruke o grešci, kao i liniju koda na kojoj se pojavljuje. Ako vaš program
proizvodi rezultat koji se razlikuje od onoga što ste očekivali, pobrinite se da kažete na koji unos pokredete svoj
kod, izlaz koji ste očekivali da dobijete, i izlaz koji ste stvarno dobili. a primer, pretpostavimo da pokušavam da
napišem program da menjam svaki zeleni piksel na slici u plavi. Trebalo bi da podelim sliku na kojoj moj program
radi, takođe moj unos. reba da objasnim da očekujem da svaki zeleni piksel postane plav, moj očekivani rezultat. I
takođe trebam objasniti da svaki zeleni piksel postaje crven, moj stvarni izlaz. Tako drugi na forumu mogu bolje
razumeti problem koji imam.

2:06

Ako morate da podelite neki deo koda, jer drugi ne mogu pomodi na osnovu opisa onoga što vaš program radi, u
redu je da podelite nekoliko linija koda, ali ne delite ceo program. Otkrijte koji deo vašeg programa smatrate
greškom i podelite nekoliko redova tog metoda. e kopirajte ceo program u svoj post. Ako imate opšte
programsko pitanje, na primer, kako da napišem petlju? Ili, kako da dodam stavke na listu? redu je da objavite
ove linije kodova, jer su oni opšti. a kraju, ako imate konceptualno pitanje, pobrinite se da navedete i povežete
sa bilo kojim materijalom kursa na koji se pozivate.
2:39

Kada odgovarate na pitanja, u redu je da podelite kod za generalne koncepte programiranja, na primer, kako da
napišem petlju? eđutim, kada neko ima problem u svom kodu, ne dajte im rešenje. okušajte da i usmerite da
sami isprave svoj koda davanjem saveta. Ako ne znate koji je nji ov problem, preporučite šta bi možda mogli
uraditi sledede da otklone svoj kod. ogledajmo neke primere.

3:03

U ovom postu nisam dobro zatražila pomod. Rekla sam da moj kod nije radio i pitala sam da li neko zna šta je
pogrešno, ali nisam baš objasnila šta pokušavam da uradim, šta program zapravo radi ili šta sam pokušavala da
rešim. akođe sam objavila dosta koda. Sada sam uredila svoj post i sada je mnogo bolje. ožete videti da sam
objasnila koji zadatak radim i pružila sam vezu za to. akođe sam objasnila šta se dešava kada pokrenem svoj
program, u mom stvarnom izlazu. A šta bi trebalo da se desi kada ga pokrenem, moj očekivani rezultat. onačno,
postavila sam samo nekoliko linija koda za koje sam mislila da je problem.

3:40

Sada kada ste naučili kako da postavljate pitanja i odgovarate na pitanja o vašem kodu, spremni ste da počnete da
učite kako da programirate. adam se da dete uživati u kursu. I radujem se što du sarađivati sa vama na forumima.
Sredno.
 Building a Web Page with HTML/Stvaranje veb stranice sa HTML-om
Using CodePen/Korišćenje CodePen-a
0:03

obrodošli nazad. adamo se da ste uzbuđeni da počnete sa učenjem kako da kreirate svoju veb stranicu u -
u. re nego što uđemo u detalje, naučidemo o alatu koji možete koristiti za to. n de vam omoguditi da pratite uz
primere dok prolazimo kroz stvari, i naravno, istražujete i stvarate kako želite. ožete se igrati i napraviti svoje veb
stranice, isprobavati koncepte koje naučite.

0:27

Postoji mnogo alatki koje možemo koristiti za kreiranje veb stranica, a mi demo koristiti jedan koji se zove
codepen.io. a vidimo kako možete koristiti ovaj alat.

0:39

tišla sam u svoj pretraživač u codepen.io, koji je alat koji dete koristiti za kreiranje veb stranice. Na ovoj prvoj
strani možete videti linkove na pen-ove drugi ljudi, što oni nazivaju projektima i možete i pogledati, ako želite.
no što demo uraditi je da idete na vr i kliknite na "New Pen", koji vam omogudava da napravite svoj projekat
tako da možete napraviti svoju veb stranicu. o standardu, postoje tri frejma na vr u. Zatvoridemo ovaj desni, jer
nam nede trebati. to vas ostavlja sa jednim da napravite tml i jedan da napravite SS. skoro dete naučiti o
HTML-u i CSS-u.

1:14

ada pišete u ovom gornjem kadru, i ne morate da brinete o činjenici da još niste to naučili. skoro dete
naučiti. idedete dok ja kucam, tekst se pojavljuje u donjem kadru, u formatu kao na stvarnoj veb stranici.

1:36

Kada saznate kasnije o CSS-u, modi dete da ga koristite u ovom polju s desne strane da biste promenili stil i
formatiranje svojih veb stranica koje ste kreirali. Dakle, ovde sam promenila ove stavke liste iz crnog teksta u plavi
tekst.

1:52

aravno, ova veb stranica nije baš interesantna. ožete napraviti mnogo sofisticiranije veb stranice, kao što dete
naučiti da radite uskoro, koje imaju slike i komplikovanije oblikovanje. Evo jedne koja ima dosta -a, kao i
puno SS-a. I na kraju slededi par modula, modi dete to uraditi kako biste dizajnirali veb stranice kako želite.

2:17

Sada kada ste videli codepen.io, znate kako možete kreirati veb stranice kada poznajete .

2:24

Sada smo spremni da zasučemo rukave i naučimo , da biste mogli da izrazite bilo šta što želite na veb
stranici.
Try It! Create Your CodePen Account/Probajte! Napravite svoj CodePen nalog
kopija ove i drugi vežbi možete nadi na kartici Resursi.

apravite svoj sopstveni ode en nalog tako da možete kreirati veb stranice sa -om i CSS-om u ovom
modulu.

1. Idite na http://codepen.io/

2. liknite na "Sign p" u gornjem desnom uglu za početnu stranicu ode en-a.

3. Na stranici "Registrujte se" siđite pored opcija pladenog plana i kliknite na "Sign p" u opciji "Free Plan".

4. Popunite obrazac za prijavu i kliknite na "Sign Up".

5. Zatim dete biti upitani da popunite stranicu sa profilom. vo je proizvoljno. ez obzira da li odlučite da završite
profil ili ne, kliknite na "Sačuvaj i nastavi."

6. Sada možete da kreirate veb stranice na ode en-u! liknite na " e en" da biste započeli kreiranje nove veb
stranice sa HTML-om i CSS-om.

idimo se u slededem videu!

 What is HTML/Šta je HTML
0:04

anas dete početi učenje o veb stranicama.

0:08

I jezik i koncepte za stvaranje sopstveni veb stranica. Jedna od neverovatni stvari koje možete učiniti na
internetu i na vebu je stvaranje stvari kao što su veb stranice, tako da milijarde ljudi, svako ko ima internet i veb
vezu, može da i vidi.

0:24

očnimo sa razumevanjem i savladavanjem koncepata u jeziku, baze za izradu veb stranice, tako da možete
napraviti vlastitu veb stranicu.

0:35

erovatno ste dobro upoznati sa veb stranicama, videli ste i i navigirali njima. a primer, možda ste gledali
Vikipedia veb stranice. Videli ste da se neke veb stranice lakše čitati od drugi . eke su pune veoma zabavni i
zanimljivi veza, reči, slika, video zapisa i još mnogo toga.

0:57

Evo veb stranice Vikipedije koja opisuje veb stranice.

1:01

Na veb stranici je slika veb stranice, pa govorimo o veb stranici sa slikom veb stranice i na toj veb stranici su
informacije. zbuđenje. aučidete o osnovama kreiranja veb stranica. aša vlastita mašta i kreativnost de vam
pomodi da primenite ovo znanje u stvaranju sopstveni stranica.

1:22

a primer, na veb stranici postoji podebljan ili naglašen tekst. aučidete kako napraviti neke delove veb stranice da
budu više izražene od drugih.

1:34

Postoje linkovi na drugim veb stranicama na ovoj veb stranici. Linkovi su pomogli da se transformiše način na koji
ljudi koriste internet i veb stranice. ovezivanjem sa jedne stranice na drugu, tako da možete naučiti neverovatne
stvari pratedi linkove.

1:49

va veb stranica ima slike. akođe možete staviti video i audio na veb stranicu. Ali prvo demo gledati slike, pošto su
vrlo jednostavne za pristup i korišdenje. a biste pristupili određenoj veb stranici, kao što je ova, potrebna vam je
adresa veb stranice. Adresa nije deo veb stranice, ved se koristi za pristup veb stranici na internetu. Jednom kada
podelite adresu, svako na svijetu može pristupiti vašoj veb stranici. ovom kursu kreiradete veb stranice koje
možete podeliti sa bilo kim na svetu. Adresa se zove "URL" ili "Uniform Resource Locator".
2:27

a biste pisali veb stranice, naučidete "HyperText Markup Language". vo je jezik koji se koristi za kreiranje veb
stranica. edina ljudi koristi "HTML" kao skradenicu za per e t arkup anguage. nogo je lakše redi i lako se
koristi prilikom pretraživanja informacija na mreži.

2:48

Obratite pažnju da u učenju -a, ne učite programski jezik ved jezik markiranja.

2:55

se ne pokrede na računaru kao programski jezik, ali ga koriste veb pregledači za prikazivanje veb stranice.
ožete imati pisane dokumente u kojima izaberete tekst i stavite ga podebljano ili podvučeno ili nakrivljeno. vo
je način označavanja teksta da bi se prikazao na određen način. koristi strukturni marker koji se zove oznaka,
koju veb pregledač koristi za prikazivanje veb stranice.

3:19

ada pišete , opisujete šta želite da se pojavi na veb stranici koju kreirate. Pregledač koristi HTML za
prikazivanje veb stranice tako da je vidljiv na računaru ili na telefonu ili na nekom drugom mestu gde se koristi
pregledač. Zato što je jezik markiranja koji opisuje ne samo tekst i slike, ved i oznaku koja opisuje željeno
oblikovanje. Na primer, podebljani tekst, kao što ste upravo videli, tabele kao što dete videti u slededoj lekciji, ili niz
drugi načina za prikaz informacija. oristidete da odredite značenje, kao što je podebljati ili link, ali nedete
koristiti da biste naveli kako da prikažete podebljani tekst, kao što je boja koja de se koristiti. Za to dete
koristiti drugi jezik, koji dete takođe proučavati malo kasnije.

4:06

ostoje različiti načini prikaza stavki. asnije dete naučiti o SS-u, kako biste obezbedili načine za poboljšanje
prikaza vaše veb stranice.

4:15

ožete odrediti da želite istaknuti neki tekst. Ali kako tačno prikazujete naglašeni tekst? SS vam omogudava da to
opišete. ozda je nakrivljeno, mozda je podebljano, mozda je veliko i crveno. aučidete CSS u kasnijoj lekciji.

4:34

a bi različiti pregledači tumačili na veb stranicama, moraju postojati standardi. 5 je trenutna verzija
HTML-a.

4:43

o je ujedinjen standard, mnogi ljudi rade širom sveta odlučujudi o standardima. rvi standard za bio je
1993. godine. au, to je bilo pre više od 2 godina, to je bilo prilično drugačije vreme. edina ljudi je koristila
veoma spore modeme za povezivanje na internet. Veb stranice su bile mnogo jednostavnije i slike su se sporo
učitavale. anas imamo slike, video, audio i još mnogo toga, ali i dalje imamo HTML standard. n je usklađen sa
trenutnim mogudnostima Interneta i veb pretraživača. ajnoviji standard za bio je u 2 14. godini, a
evoluirao je sa promenljivim vremenima. 5 ima funkcije koje podržavaju multimediju koja bi bila nezamisliva
1993. godine.

5:28

Evo primera HTML-a za veb stranicu i prikaza veb stranice. Vidite da HTML oznaka ima mnoge oznake. Svaka
oznaka se podešava ugaonim zagradama za ono što je između oznaka. regledademo oznake koje se koriste na
ovoj stranici, ali takođe možete videti da prikazana veb stranica ne prikazuje oznake. Izabrala sam frazu "Hello
World" i možete pročitati naslov veb stranice na kartici pregledača. aslov je, ello World age. rvo, vidite
oznaku kako bi ukazali da koristimo HTML za definisanje komponenti veb stranice. Veb stranica je definisana
između početne oznake i krajnje oznake. Sve važede veb stranice koje koriste sadrže ove
oznake. ao što demo videti, postoji oznaka početka i krajnja oznaka. znake se podudaraju, ali oznaka na kraju
ima kosu oznaku koja označava da je to krajnja oznaka. Zatim vidite sve informacije zaglavlja definisane između ove
početne i završne oznake zaglavlja. onovo, krajnja oznaka je "/head" i odgovarajuda početna oznaka je "head".
Zatim vidite oznaku naslova. Imajte na umu da je sav sadržaj između oznake za početak i kraj naslova prikazan kao
naslov veb stranice, "Hello World Page".

6:40

Sledede što vidite osenčeno su oznake tela stranice. ilo koji sadržaj koji stavite između početni i završni oznaka
tela bide prikazan kao telo veb stranice.

6:51

onačno, vidimo kratak paragraf unutar početni i završni "p" oznaka i možete videti taj sadržaj, "Hello World" se
prikazuje na veb stranici. idedemo ovaj često, koji između oznaka tela ima ono što korisnik vidi na veb
stranici.
 Metadata and Sectioning Elements/Metapodaci i elementi sekcije

0:03

a bliže pogledamo neke od različiti tipova oznaka ili elemenata. Sada demo pogledati dve vrste elemenata.
Jedna grupa su elementi metapodataka. ni sadrže informacije o stranici. rimeri uključuju tagove < tml oznaka,
<head> i <title> oznake.

0:21

Elementi sekcije koji definišu regione stranice uključuju oznake kao što su <bodi , < 1 i <div . kontekstu veb
stranice, Metapodaci su skup podataka koji opisuju informacije o veb stranici, a <html> tag je element
metapodataka. Svi ostali elementi moraju biti definisani između oznaka za početak i kraj HTML-a. HTML govori
pregledaču da bi trebao koristiti standard u prikazivanju veb stranice. znaka < ead je takođe element
metapodatka koji sadrži opšte informacije o stranici. vo uključuje informacije o naslovu, o skriptama i informacije
o prikazivanju stranice koristedi SS.

1:00

znaka <title takođe je element metapodatka. n određuje tekst koji je naslov za stranicu i mora biti ugnježden
između početne i krajnje oznake glave.

1:11

Na primer, ovde je početak -a od dukelearnprogram.com. oznaka, oznake glave između koji idu drugi
metapodaci, kao što su oznake naslova. Zatim vidimo primere elemenata sekcije. Oznaka <bodi> je element
sekcije. očetne i krajnje oznake tela definišu telo cele veb stranice. Svi tekstovi i ostali predmeti koji se vide na
stranici bide unutar oznaka tela. rugi elementi sekcije definišu sekciju unutar tela veb stranice. a primer, oznaka
< 1 definiše region sa važnijim i obično vedim zaglavljenjem. u < 1 znači sekcija glavnice, oznaka <h2> je
takođe sekcija glavnice, ali obično malo manja od oznake < 1 . ajmanja oznaka zaglavlja je 6. znaka <div> je
takođe i oznaka sekcije. va oznaka definiše odeljak ili podelu veb stranice. oristan je za grupisanje elemenata
zajedno za korišdenje SS stila.

2:16

Elementi sekcije mogu se nadi i u -u na dukelearntoprogram.com. elo počinje ovde, nakon metapodataka. I
zatvorena oznaka tela se ne prikazuje, jer na ovoj stranici ima mnogo HTML-a. Evo <h1> elementa zaglavlja, ovdje
je prvi <div> na stranici. On koristi naslovnu vrstu CSS klase. Nadamo se da je izgled HTML veb stranice sada jasniji.
 Try It! Build a My Interest Web Page/

Probajte! Napravite veb stranicu "Moji Interesi"

kopija ove i drugi vežbi možete nadi na kartici Resursi.

adamo se da ste uzbuđeni što dete napraviti svoju veb stranicu na ode en-u. okom ove sedmice kreiradete veb
stranicu "Moji interesi",deledi informacije, slike i linkove o stvarima u kojima uživate. a kraju modula, podelidete
svoju gotovu veb stranicu sa svojim kolegama!

akon što ste kreirali svoj nalog i pregledali naše predavanje " orišdenje ode en", prijavite se na
http://codepen.io i kliknite na " e en" na vr u stranice da biste započeli.

očnite tako što dete svojem Pen-u postaviti prilagođeno ime na vr u en-a, a zatim sledite korake opisane u
nastavku. Zapamtite da često sačuvate svoj rad! Ako vam je potrebna pomod da se setite kako da napišete oznake
prikazane u prethodnom videu, posetite našu stranicu dokumentacije, koja je povezana na kartici Resursi.

Dodajte elemente i paragrafe sekcije

očnimo sa dodavanjem nekog sadržaja u telo vaše veb stranice. Između vaši oznaka tela:

1. Dodajte najmanje 2 "div"-a. Zapamtite da de se "div" kasnije koristiti za različite delove vaše veb stranice
različito (npr. Imati različitu vrstu slova, boju ili veličinu teksta ili drugu boju pozadine za sadržaj veb stranice
između oznaka div).
2. Dodajte najmanje jedno zaglavlje unutar oznake div. robajte različite veličine zaglavlja (npr., h1, h2 ... h6).
3. Dodajte najmanje jedan paragraf unutar oznake div.

otrebna vam je pomod?

 Evo primera stranice: http://codepen.io/ quentinre/pen/zKYLNw. aučite iz ovog primera, ali obavezno unesite
svoj ! o je najbolji način za učenje.
 Pogledajte dokumentaciju za HTML: http:// www.dukelearntoprogram.com/course1/doc/, dostupna na
kartici Resources.
 akođe možete dobiti pomod na forumima! ostavite svoja pitanja i podelite svoje en-ove na forumima kursa.

Oznake Metapodataka
Zbog toga što je ode en alat za kreiranje veb sajtova, ved za vas kreira nekoliko metapodataka, uključujudi tml,
zaglavlje, naslov i oznake tela. Da biste videli ove oznake metapodataka za svoje postove, kliknite Export >> Export
.zip u donjem desnom uglu vašeg en-a, kao što vidite ovde.
Kada preuzmete .zip datoteku, otvorite . tml datoteku unutar datoteke .zip pod nazivom "inde " koristedi
tekstovni editor (kao što su "Brackets" http://brackets.io/ Primer izvoza je ispod. bratite pažnju:

1. eo kod je između oznaka <html> </ html>.

2. aše ime Pen-a je uključeno između oznaka <title> </ title>.

3. Ceo HTML koje ste napisali za svoju veb stranicu je između oznaka <body> </ body>.

4. Ako ste izgradili HTML veb stranicu bez CodePen-a, trebalo bi da napišete ove oznake metapodataka sami.
 Formatting Text and Nesting Tags/Formatiranje teksta i oznake ugneždenja

0:04

vde demo videti kako neke oznake jednostavnog stila menjaju izgled teksta na stranici.

0:11

Evo primera koristedi oznake za podebljanje.

0:14

Oznaka "b" obično pravi tekst podebljanim ili izražajnim u odnosu na drugi tekst. Imajte na umu da postoji i
početak i kraj "b" oznake. Evo još jednog primera podebljanja. ao što demo videti kasnije, podebljani tekst može
biti prikazan drugačije, ako imate problema sa gledanjem. a primer, ako veb stranicu koristi čitač ekrana, to je
semantika ili značenje, i pomaže čitaču ekrana da promeni način na koji se tekst čita slepom korisniku, na primer.

0:41

Evo primera korišdenja oznake za naglašavanje.

0:45

I evo primera gneždenja različiti oznaka.

0:50

Da vidimo kako bi sve ovo bilo prikazano na veb stranici.

0:56

bratite pažnju na to da su neke reči podebljane, a neke od reči su naglašene kosim tekstom.

1:06

Ove dve linije su prikazane podebljanim slovima.

1:10

A ova linija je prikazana pomodu kosog teksta.

1:16

ogledajte šta se događa kada ugnezdite oznake. vde imamo oznaku podebljanja ugneždenu unutar oznake
naglašenja.
1:25

Spoljašnja oznaka je oznaka za naglasak, a unutrašnja je oznaka podebljanja. nutrašnja oznaka se odnosi na reči
"primer ugneždenja". A ostatak reči unutar naglašavanja naglašava se kosim tekstom.

1:41

ožda ste se navikli da uređujete Word dokument, gde unosite tekst. no što vidite je ono što dobijete.

1:48

Ali sa markup jezikom, ono što vidite nije ono što dobijate. koji pišete bide prikazan na lepši način. ačin na
koji ga navedete za prikazivanje.
 Try it! Format text/Probajte! Formatiranje teksta

kopija ove i drugi vežbi možete nadi na kartici Resursi.

Nastavite sa izradom veb stranice "Moji interesi" u CodePen-u (http://codepen.io/). liknite na ikonu vašeg avatara
na vrhu veb stranice i izaberite "Pens" da biste pronašli veb stranicu koju ste ved počeli graditi.

1. Podebljajte neki tekst da bi se zaista isticao, privlačedi pažnju čitaoca.

2. Istaknite neki tekst sa kosim oblikom, da biste skrenuli pažnju ili oblikovali naslov knjige, filma ili novina.

3. Eksperimentišite sa oznakama za gneždenje - možda želite da formatirate naslov u podebljanom zaglavlju.

otrebna vam je pomod?

ožete pogledati našu stranicu sa dokumentacijom za :

http://www.dukelearntoprogram.com/course1/doc/#basichtml, takođe povezana na kartici Resursi.
 Adding Images and Links/Dodavanje slika i veza

0:05

ožete postaviti slike, video i audio zapise na svojoj veb stranici. Na primer, ovde imamo sliku Hilari Klinton kako
pozdravlja Soniju andi. Različiti tipovi medija imaju različite oznake, ali mi demo pokazati kako da koristite slike,
jer su oni najjednostavnije.

0:25

ad god želite da stavite sliku na svoju veb stranicu, koristite oznaku za sliku.

0:31

Evo primera oznake za sliku, za prikazivanje slike.

0:36

Evo još jednog primera. be izgledaju vrlo slično i obe imaju sintaksu koju ranije nismo videli.

0:46

U uglastim zagradama za oznake slike imamo opcije koje daju dodatne informacije o tome šta radimo. primeru
oznake slike, moramo navesti koja slika de se prikazati. stvari, iako se zovu opcije i stoga su opcione, neke opcije
su neop odne. a primer, moramo navesti koju sliku želimo prikazati, tako da je ta opcija obavezna.

1:14

Imajte na umu da nema posebne oznake kraja. znaka slike određuje stvarnu lokaciju slike u oznakama, tako da
nije potrebna kajnja oznaka. Ima kosu crtu u ovoj oznaci, da bi se označila da dodatna oznaka kraja nije potrebna.

1:29

ao što smo upravo rekli, morate navesti koju sliku želite, pa je potreban "izvor" ili "src" opcija. na određuje veb
adresu za sliku koju učitava. irina je izborna oznaka. ože se koristiti za smanjivanje veličine prikazane slike.
suprotnom, prikazuje se originalna veličina slike koja bi mogla biti prilično velika.

1:51

ostoje i druge opcije koje možete odrediti, ali videdemo bolje načine obrade slika kada stignemo do SS-a. Ovde
prikazujemo HTML, koji ilustruje kako se povezati na drugu veb stranicu, i ispod pokazujemo kako je ovaj HTML
prikazan u pregledaču.
2:08

znaka "sidra", ili "a" oznaka, se koristi za određivanje veze sa drugom veb lokacijom. Atribut " ref" određuje R
za tu veb stranicu i obavezan je. orate navesti neki tekst između početne i krajnje oznake sidra. a ovaj tekst dete
modi kliknuti, da vas odvede na druge veb stranice.

2:30

Pravljenje dobre veb stranice nije lako. Programeri mogu napraviti elegantne veb stranice jer dobro razumeju
HTML.

2:41

Programeri razumeju kako da koriste alate kako bi dobili te luksuzne veb stranice.

2:46

Sada učite osnove -a, tako da možete započeti kreiranje jednostavni veb stranica. čite temelje na koje
možete kasnije nadograditi.

2:56

Imajte na umu da se veb stranice mogu prikazivati na različitim tipovima uređaja. aš laptop, vaš telefon. Izazovno
je kreirati veb stranicu koja se dobro prikazuje na velikim i malim ekranima.

3:12

Imati interakciju sa veb stranicom, kao što je naručivanje knjige sa Amazonove veb stranice, još je složenije. Za
sada, krenimo sa osnovama, kako biste mogli kreirati veb stranicu.
 Images and Storage/Slike i skladištenje

0:04

U ovoj lekciji demo pričati o nekoliko problema sa kojima možete da se suočite kada koristite slike ili fotografije na
veb stranicama koje kreirate.

0:12

Mi smo napravili veb stranice koje smo podelili sa vama i vi ste napravili veb stranice koje koriste "img" oznake za
prikaz slike ili fotografije na veb stranici koju kreirate. ovom kursu koristili ste veb stranicu ili veb alat codepen.io
da biste kreirali slike. akođe je mogude da ste ved koristili druge alate ili veb sajtove, kao što je "Word ress", da
biste kreirali slike. ilo koji alat ili sajt da ste koristili, moradete da pronađete slike koje možete koristiti na veb
sajtovima koje kreirate. R koji je izvor za oznaku <img koju koristite na vašoj veb stranici. nekim slučajevima
može dodi do problema sa osobom, organizacijom ili grupom koja je kreirala fotografiju koju prikazujete na veb
stranici koju kreirate. vorac ima određena prava. Nazvana autorska prava, i želede te da i poštujete. nekim
slučajevima može dodi do problema sa skladištenjem. de su snimljene slike koje ste uneli na svoju veb stranicu? I
ko plada to skladištenje? ožda želite da sačuvate sopstvene slike, tako da možete da i povežete na veb-stranice
koje kreirate.

1:12

ostoje slični problemi sa video snimcima, iako se video zapisi na YouTube-u veoma lako dodaju na veb stranice
koje kreirate.

1:19

a kratko demo pričati o pravima korišdenja slika ili fotografija koje pronađete online. ademo vam osnovno
razumevanje i podstaknuti vas da istražite više sami.

1:30

Neke slike i fotografije su zaštideni autorskim pravima. o znači da osoba ili organizacija koja je kreirala slike ima
posebna prava. orate poštovati ova prava, razmišljajudi o pravima koja želite da imate za slike koje vi kreirate.

1:44

Zakoni o autorskim pravima su različiti i variraju od jedne zemlje do druge. erovatno biste trebali imati osnovno
razumevanje autorski prava u svojoj zemlji. Ako dete praviti veb stranice koje mogu imati komercijalnu vrednost.

1:56

bično, ako pravite veb stranicu za ličnu upotrebu, kao što su stranice koje kreirate za ovaj kurs, ne morate se
baviti zakonima o autorskim pravima. eđutim, želite da s vatite prava korišdenja i znate da za slike koje su
zaštidene autorskim pravima, postoje neka prava.
2:11

Mnoge slike su u javnom domenu i nisu zaštidene autorskim pravima. Zastava razila, koja je prikazana na ovoj
stranici, je u javnom domenu u Sjedinjenim ržavama, razilu i mnogim drugim zemljama. Slike u javnom domenu
nemaju nikakva prava povezana s njima i možete i slobodno koristiti. noge slike možete pronadi pomodu oogle
pretrage slika i možete podesiti ovu pretragu da biste naveli da želite slike koje se mogu ponovno koristiti.

2:37

Vikimedia zajednica je veb lokacija i područje skladištenja gde se mogu nadi slike koje su slobodne za korištenje.

2:44

eke od ovi slika imaju ono što se zove licenca za kreativne zajednice. Koja navodi kako možete koristiti slike. Još
jednom, za svoje lične veb stranice, obično ne morate da se bavite ovim pravima. Ali je i dalje dobra ideja da imate
osnovno znanje o ovim pravima. Neke slike iz kreativne zajednice nisu zaštidene autorskim pravima. eke imaju
prava korišdenja koja vam omogudavaju da i ponovo koristite u nekomercijalne svr e. ogotip sa desne strane
određuje nekomercijalnu upotrebu u Evropskoj uniji ili EU. Druge licence zahtevaju da licencirate svoj rad na sličan
način. ne se zovu licence za podjednaku podelu. Logotip sa leve strane predstavlja takvu licencu. U ovom kursu
pokušavamo da koristimo slike koje su u javnom domenu.

3:28

ored prava korišdenja, korišdenje slika na veb stranicama koje kreirate mogu dovesti u putanje prostog gde čuvate
slike i ostovanje. a primer, pretpostavimo da želite da uključite sliku kineske zastave na veb stranici koju
kreirate, možete koristiti oogle pretraživač slika, da biste pronašli R adresu koju možete koristiti sa izvornim
argumentom I oznake. I možete preduzeti korake kako biste osigurali da je slika zastave, koju ste pronašli, u
javnom domenu, tako da nema problema sa pravima korišdenja. Ovde je prikazan url za upravo takvu sliku.

3:58

Sve ste dobro uradili. ravilno ste uzeli u obzir prava korišdenja i stvorili ste veoma lepu veb stranicu. Ali
pretpostavite da milion ljudi pogleda vašu veb stranicu. o znači da milion ljudi vidi sliku zastave. o takođe znači
da se slika zastave šalje sa veb stranice koja ga čuva, preko interneta na milion korisnika koji bi mogli biti razbacani
širom sveta. eko plada za ostovanje slike i prosleđuje je svima, čak i ako to niste vi. vo bi mogao buiti problem
koji morate razumeti.

4:27

ada koristite R , na veb stranici koju kreirate, kao deo I oznake, uneli ste ono što se zove "veza u liniji" vaše
stranice sa drugom veb stranicom. " inijsko" povezivanje se naziva i "vrude povezivanje". o znači da je slika
sačuvana na drugoj lokaciji, ali se vizuelno pojavljuje na vašoj stranici. bično ne morate brinuti o problemima
autorski prava i upotrebe za svoje lične stranice.

4:51

eđutim, ako kreirate veb stranicu sa puno prikaza ili puno saobradaja, možda postoje troškovi skladištenja ili
troškovi servera koje treba uzeti u obzir, iako obično to nije nešto za šta treba brinuti za stranice koje kreirate
tokom kursa , ili sami, za ličnu upotrebu.
5:09

ada želite da uključite slike na stranice koje kreirate, lako je koristiti oogle pretragu slika kako biste pronašli slike
na internetu. oradete da pronađete R adresu za sliku koja de se koristiti u linijskoj vezi za img oznaku. bično
možete pronadi R -u tako što dete kliknuti desnim klikom, ponekad je ovo klik kontrole, kada koristite veb
pregledač poput rome-a ili Firefox-a, a zatim kopirate URL adresu slike i umetnete ga u HTML koji kreirate za
svoju stranicu. Neke veb stranice ne dozvoljavaju vrudu vezu sa slikama koje se nalaze na njima. a primer,
"pi aba " ostuje mnoge slike javnog domena, ali ne dozvoljava vam da se povežete sa njima na veb stranicama
koje kreirate.

5:46

e zaboravite da testirate veb stranice koje kreirate, tako da proverite da li funkcionišu. ožete koristiti
samostalno ili privatno pretraživanje da biste se uverili da se ponašate kao anonimni korisnik, umesto da ste
prijavljeni kao vi, na primer, kada pregledate veb stranicu. ad možete, zatražite nečiju pomod u pregledanju bilo
koje veb stranice koju kreirate, da biste bili sigurni da vide slike.
 Try it! Add Links and Images/Probajte! Dodajte veze i slike

kopija ove i drugi vežbi možete nadi na kartici Resursi.

Dodavanje linkova
Dodajte neke linkove na stranicu "Moji interesi", povezujudi se sa drugim veb stranicama koje se odnose na neke
od vaši interesa.

Napomena: a biste formatirali linkove tako da se otvaraju u novom prozoru tabulatoru, napišite svoje <a
tagove na slededi način:

Dodavanje slika
Zatim dodajte slike na stranicu "Moji interesi". Uzmite u obzir dodavanje slika koje predstavljaju stavke koje ste
dodali na prvobitnu stranicu. rebali biste koristiti ono što znate o oznaci <img u -u. ožete koristiti svoje
slike ili pronadi neke slike online. Wikimedia ommons ( https://commons.wikimedia.org/wiki/Main_Page) i
Pixabay (https://pixabay.com) su dva velika izvora, ali ima i mnogo, mnogo više!

orate da ostujete svoje slike negde na internetu. Studenti su predložili sledede sajtove za ostovanje slika za
ovaj kurs. Imajte na umu da se Imgur (http://imgur.com/) ne može koristiti za ostovanje slika na ode en-u. Ako
pokušate da koristite Imgur, vaše slike verovatno nede biti dugo prikazane na ode en-u.

https://www.flickr.com/

http://postimage.org/

http://photobucket.com/

https://www.dropbox.com/

https://www.base64-image.de/

http://tinypic.com/
Dodatan izazov!
Eksperimentišite sa promenom širine jedne od vaših slika na vašoj veb stranici, kao što je prikazano u video zapisu
"Dodavanje slika i veza".

Potrebna vam je pomod?

bratite pažnju na našu dokumentacionu stranicu za :

http://www.dukelearntoprogram.com/course1/doc/#basichtml, takođe povezana na kartici Resursi.
 Lists and Tables/Liste i tabele

0:04

ed ste naučili neke osnove -a koje vam omogudavaju da odredite sadržaj veb stranice koju želite napraviti.
aučili ste o oznakama metapodataka, kao što su oznake zaglavlja i naslova, takođe oznake sekcija, kao što su telo,
1 i 2. aučili ste o sadržaju teksta kao što je oznaka "p" koja formira paragraf. eđutim, tu je još mnogo toga što
možete učiniti sa -om, pored stavljanja teksta u paragrafe. Jedan način organizacije informacija su liste. Ili
tabele, koje demo istražiti sada. esto koristimo liste nabrajanja prilikom predstavljanja informacija. Zapravo, veliki
deo sadržaja ovi video prezentacija predstavlja informacije u tom obliku. vde možete videti ekranski snimak sa
uzorka veb stranice koja organizuje informacije u listu nabrajanja. vaj poseban stil liste se naziva neuređena lista,
koju možete kreirati "ul" oznakom, što predstavlja neuređenu (unordered) listu.

0:57

Iako se lista zove neuređena, sadržaj se i dalje pojavljuje u redosledu koji ste odredili. o se naziva neuređen, jer su
sve oznake iste oznake nabrajanja.

1:09

asnije u ovoj lekciji demo vam pokazati kako kreirati spiskove sa numerisanim stavkama. ada nastavite da učite o
CSS-u, možete promeniti stil oznake nabrajanja. Sada kada imate početnu ideju, uronite u detalje korišdenja
taga kako bi napravili neuređene liste. Evo -a za stranicu koju smo videli pre nekoliko sekundi. Ako pogledate
unutar "ul" oznake, koja odgovara pravoj listi nabrajanja, videdete mnoge "li" oznake. Svaka "li"oznaka, koja
označava stavke na listi(list items), opisuje jednu stavku na listi.

1:42

Ako pogledamo svaku od ovi "li" oznaka, možemo videti kako oni odgovaraju stvarima koje se pojavljuju na listi.

1:50

ada pravite liste, važno je znati da sve stavke na listi morate staviti unutar "li" oznaka.

1:58

Svi tagovi unutar oznake "ul", koji se zovu deca ul oznaka, moraju biti "li" oznake, u protivnom naš de biti
netačan. eđutim, unutar "li" oznaka možemo staviti mnogo više od teksta. ožemo staviti slike, veze ili čak još
jednu listu.

2:16

redu, sada znate o neuređenim listama. Ali ponekad želite uređenu listu, koja de brojati stavke. Ako želite da
opišete svoje preferencije za pet omiljeni plodova, na primer, možda biste želeli da i nabrojite. takvoj situaciji
brojanje je važno, jer želite da navedete redosled na listi. akođe možete imati liste koje su uređene, ali označene
slovima umesto brojeva.
2:38

vu vrstu liste možete napraviti sa "ol" oznakom, koja označava uređenu (ordered) listu i radi slično oznaci "ul".
Poput "ul" oznake, određujete stavke liste sa "li" oznakom, koji su jedini tip oznaka koji možete staviti kao direktnu
decu "ol" oznaka. Naravno, kao i sa oznakom "ul", možete staviti različite stvari u oznaku "li".

2:59

rojanje za "li" oznake je automatsko. Ako dodate ili uklonite elemente iz -a, brojevi de se automatski
prilagođavati tako da su elementi numerisani 1, 2, 3, 4 i tako dalje.

3:12

ominjali smo kako možete staviti različite tipove elemenata unutar oznake "li", omogudavajudi vam da postavite
slike, veze ili ugneždene liste unutar liste. Stavljanje ovih elemenata zajedno zovemo kompozicija ili lanac.
Kompozicija je važan koncept u računarstvu i često se koristi u dizajniranju jezika, bez obzira na to da li su jezici za
označavanje, kao što je , ili jezici programa Slike poput Java. Ovo svojstvo vam omogudava da izgradite velike,
složene sisteme, bilo da su veb stranice ili programi, na način koji možete razumeti. ožete staviti male, lako
razumljive delove da biste izgradili vede, složenije stvari. slučaju veb stranica, možemo zajedno staviti elemente
da dobijemo sofisticirano oblikovanje. vedini slučajeva možete sastaviti elemente jedne sa drugima kako želite,
iako postoje neka pravila. a primer, ne možete staviti oznaku naslova unutar neuređene liste jer nema smisla da
naslov stranice bude unutar liste. aslovna oznaka može da ide samo u zaglavlje.

4:10

eđutim, možete napraviti listu slika ili listu spiska. ada napravite listu spiska, to se zove ugneždena lista.
neždenje je još jedan koncept u računarstvu. to samo upuduje na neku stvar koja je unutar neke druge stvari.
vde dete naučiti o ugneždenim listama. asnije kada se upustimo u programiranje, naučidete o ugneždenim
petljama. oncept je isti, petlja unutar petlje, slično spisku unutar liste.

4:38

ožete napraviti ugneždenu listu kao što je ova, postavljanjem oznake "ul" koja opisuje unutrašnju listu unutar
oznake "li" za jednu od stavki spoljne liste. bratite pažnju na to kako su oznake za stavke za unutrašnju listu
drugačiji od oznaka za spoljnu listu. akođe, kako je unutrašnja lista smeštena dublje. ve osobine pomažu svakom
čitaocu. eb stranica vizuelno razlikuje sadržaj u spoljnoj i unutrašnjoj listi. Osim toga, kada pišete , korisno je
da se uvlači svaki put prilikom stavljanja jednog elementa u drugi.

5:12

Ova struktura vam pomaže da vizuelno razlikujete koji elementi pripadaju -u, da ga lakše možete urediti
kasnije.

5:20

bratite pažnju na to kako ovde možete kompozitovati stavke liste. Samo napišite unutrašnju listu sa "ul" i "li", baš
kao što biste radili bilo gde drugde. e morate da uradite ništa posebno. I to je važan aspekt kompozicije. Samo
spojite delove i oni jednostavno funkcionišu na isti način svuda.
5:37

HTML za ovaj primer je dostupan u codepen-u, ako želite isprobati sami nakon završetka gledanja ovog videa.

5:44

rugi način na koji možete organizovati informacije u -u jeste tabela. oja vam omogudava da organizujete
stvari u redove i kolone. a primer, možda želeti da prikažete neke informacije o hrani na osnovu ukusa koji
povezujete sa njom. Ponekad ljudi koriste tabele za opštu organizaciju sadržaja stranice. Ali SS, o čemu demo
kasnije učiti, je još bolji način da to uradite.

6:07

apravidete tabelu sa elementima koji se podudaraju sa vizuelnom strukturom tabele. Sada demo pogledati
detaljno u HTML elemente koji su korišdeni za izradu ove tabele.

6:20

Prvo, napišete oznaku tabele na početku tabele, koja ima odgovarajudu krajnju oznaku na kraju tabele. Zatim
napišete "tr" oznaku, koja označava red tabele za svaki red tabele.

6:34

ao što ovde možete videti, svaki "tr" odgovara jednom redu u rezultirajudoj tabeli.

6:41

Redovi mogu sadržavati "th" oznake koje određuju zaglavlje, kao što su ove. I "td" oznake koje određuju podatke
za elemente koji nisu zaglavlje tabele.

6:52

Ovde imamo tekst unutar naši "td" oznaka, da li možemo staviti druge stvari unutar nji ?

6:58

aravno, princip kompozicije kaže da možete staviti slike, liste ili niz drugi stvari u vašu tabelu, ako želite.

7:06

redu, sada ste videli tabele i liste koje vam omogudavaju da organizujete informacije od jednostavni do
složeni . Ako želite, možete staviti oznaku tabele unutar "li" oznake ili listu unutar tabele. Zar nije kompozicija
sjajna? idedeš kako se često pojavljuje, jer je ključni princip računarstva. o de vam pomodi prilikom kreiranja,
dizajna i izgradnje, svega što želite da računar uradi za vas. ilo da je veb stranica koja pokazuje neke zanimljive
informacije, ili program za izračunavanje nečega.
 Try it! Create Lists and Table/Probajte! Napravite liste i tabele

Kreirajte liste
Dodajte uređenu listu na stranicu " oji interesi". a primer, možete rangirati pet omiljeni tipova hrane, knjiga,
filmova itd.

Dodajte neuređenu listu. a primer, navedite nekoliko mesta koje želite da posetite, radna mesta koja želite,
osobe koje želite da upoznate itd.

Napravite tabelu
Sledeće, kreirajte tabelu, sa najmanje dva reda, uključujudi i jedan red zaglavlja. oristite delije tablele da biste
organizovali tekst, slike ili linkove za svoju veb stranicu.

Dodatan izazov!
Pokušajte uneti jednu listu unutar druge liste, ili dodati listu unutar jedne (ili nekoliko) delija vaše tabele.

Potrebna vam je pomod?

Pogledajte našu stranicu sa dokumentima, da biste se podsetili na različite vrste HTML oznaka:
http://www.dukelearntoprogram.com/course1/doc/#lists, takođe dostupno na kartici Resursi.
 Styling a Web Page with CSS/Oblikovanje veb stranice sa CSS-om
How CSS is Used to Design Web Pages/Kako se koristi CSS za
dizajn veb stranica
0:04

anas se veb stranice prikazuju i doživljavaju različito, u zavisnosti od mnogi kriterijuma. rsta uređaja i ekrana
utiču na način i sadržaj prikaza. eb stranice su često dizajnirane da odgovaraju različitim korisnicima, sa različitim
mogudnostima i ograničenjima. orisnici različito koriste veb stranice. eki korisnici su daltonisti, neki ne mogu
dobro da vide, a neki imaju poteškode da kliknu na male linkove. orisnici mogu videti veb stranice na
kompjuterskim monitorima. Ali danas, mnogi korisnici pretražuju veb na mobilnim uređajima, poput pametni
telefona i tableta. Veb stranice mogu biti prikazane i na velikim ekranima. Veb programeri moraju uzeti u obzir
korisnike i uređaje prilikom kreiranja veb stranica.

0:48

ak i dok učite samo osnove stvaranja i dizajna eb stranice, možete i trebate neke stvari imati u vidu kada kreirate
Veb stranicu i radite na tome da napravite veb stranice dostupnim. vo dete uraditi uklanjanjem barijera i time
pomodi da vaše veb stranice budu dostupne svima. eki ljudi imaju problema da vide određene boje, neki ne mogu
da vide, a neki imaju poteškode sa manipulišu mišom. Korisnici sa slabim vidom mogu da koriste čitače ekrana, da
bi mogli da gledaju i dožive veb stranicu. eke boje i neki fontovi su lakši za čitanje od drugi . ekim alfabetima su
potrebni posebna slova za dobro prikazivanje. Ako razvijete više veb stranica, želeli biste osigurati dobar doživljaj
korisnička. A to znači da je stranice mogude brzo učitati, kada je to dostupno.

1:36

ed smo koristili ili "HyperText Markup Language" za kreiranje veb stranica koje svako na svetu može videti.

1:44

određuje sadržaj dokumenta, reči i slike koje se pojavljuju na veb stranici. eko formatiranje je specificirano
sa -om. a primer, zaglavlja različiti veličina su označena u oznakama 1, 2 ili 3. Različite vrste listi
su navedene u -u koristedi "ol" i "ul" oznake za uređene i neuređene liste. One se prikazuju drugačije jer
pregledači tumače i menjaju oboje, zaglavlja i liste kako bi se uskladila oznaka.

2:17

abele su takođe formatirane pomodu HTML-a. ao što ste videli, ima mnogo oznaka koje se koriste za izradu
tabele za prikaz podataka i drugih informacija.

2:27

Slike se prikazuju pomodu -a. ideli ste da širina slike ili img oznake, može biti specificirana pomodu
atributa širine ili određivanja širine pomodu dodatnog stila oznake.

2:43

ve modifikacije stilova i širine su primer onoga što se zove SS za pravljenje stila veb stranice. SS je kratica ili
akronim za "Listu kaskadnog stila". CSS određuje izgled i oblikovanje veb stranice, gde definiše sadržaj. o
omogudava veb programerima da odvoje sadržaj od toga kako je predstavljen. oji se mogu prilagoditi različitim
korisnicima i različitim uređajima za prikaz, kako bi se uverili da čak i u drugim zemljama mogu da se prikazuju bez
promene sadržaja veb stranice. a primer, koliko je velika oznaka za zaglavlje 1? oju boju treba koristiti za tekst
u 1 zaglavlju? a li boja ili veličina zavise od korisnika i kakvo je iskustvo korisniksa na veb stranici? I da li korisnik
koristi mobilni uređaj? vi atributi oznake mogu biti navedeni i izmenjeni pomodu SS-a.

3:42

Ako kreirate hiljade veb stranica za veb lokaciju, promena boje ili vrste slova ili veličina elementa može se
lokalizovati na jednom mestu, umesto ponoviti na hiljadu mesta, što bi otežalo promene. Dizajn skale je ključni deo
računarski nauka i onaj koji čini mogudim sledinjavanje CSS-a i HTML-a.
 CSS Basics/Osnove CSS-a
0:04

Sada dete naučiti nešto više o SS-u.

0:08

Prethodno ste naučili zašto biste teli koristiti SS, da biste odvojili stil veb stranice od sadržaja, što se dotaklo
neki glavni tema u računarstvu.

0:20

Jedna od ti tema bila je ponovna upotreba. ožete jednom opisati stil u SS-u i ponovo ga koristiti na više
elemenata ili čak na više veb stranica.

0:31

Još jedna od ti tema bila je održivost. iti sposoban da efikasno promenite svoju veb stranicu kao odgovor na
promene dizajnerskih zahteva.

0:40

Sada kada ste malo naučili zašto je SS važan, nadogradidemo na to i dalje istražiti kako možete napisati sopstveni
CSS, kako biste oblikovali veb stranicu.

0:52

re nego što naučite šta da pišete za SS, naučidemo gde da ga pišete. ode en-u ste pisali HTML u levom oknu.
Desno je SS okno, koje sam ovde označila plavim kvadratom. ožete ga prepoznati činjenicom da piše SS u
gornjem levom uglu tog okna. akođe, ne brinite o blago zadivljujudem CSS-u u ovom prozoru, koji čini lepu tabelu,
jer vi trebate naučiti samo osnove.

1:22

Ako pišete veb stranicu od nule bez alata kao što je ode en, možete uključiti SS bilo pomodu oznake stila i
pisanja SS-a unutar njega, ili pomodu oznake veze za povezivanje sa listom stilova. Svaka od ovih oznaka ide u
glavni deo vašeg -a.

1:40

očedemo sa malim primerom veb stranice, prikazanim gore, koji opisuje neke ukusne namirnice. Na levoj strani
možete videti veb stranicu bez SS-a. bratite pažnju na to kako je zaglavlje, naznačeno oznakom 1, crnim
tekstom i levo poravnan. Sada pretpostavimo da želite da napravite to zaglavlje plavo i centrirano u sredinu, kao
ovaj sa desne strane. Ova stranica na desno ima isti HTML, ali smo koristili CSS da promenimo formatiranje oznake
h1.

2:10

Ovde je CSS koji smo koristili za oblikovanje h1 oznake u plavo i centrirano u sredinu. Pogledajmo detalje, tako da
možete napisati svoj SS kako biste oblikovali stranice kako god želite.
2:22

rva stvar koju treba da napišete je selektor, ime elementa koji želite da oblikujete. ovom slučaju želimo da
oblikujemo oznake 1, pa ovde pišemo 1.

2:33

Zatim pišete vitičaste zagrade koje okružuju informacije o stilu koji želite primeniti na oznaku h1. Kada otvorite
vitičastu zagradu u ode en-u, on de automatski staviti zatvorenu vitičastu zagradu i postaviti kursor između nji .
vo može biti od pomodi, jer ne morate pamtiti da napišete zatvorenu vitičastu zagradu nakon završetka pisanja
željenog stila.

2:56

a svakoj liniji unutar vitičasti zagrada, prvo napišite svojstvo, koji aspekt stila želite promeniti.

3:03

vde želimo da promenimo poravnavanje teksta, koji ima naziv poravnanje teksta.

3:10

akon naziva, upišete "a:", nakon čega sledi vrednost koju želite dati toj imovini. ovom slučaju, želimo da
postavimo tekst centriran u sredinu.

3:22

Na kraju linije napišete "a;", zatim možete napisati više redova sa istom sintaksom. a primer, imamo "color: blue;"
da podesimo boju u plavo.

3:36

ostoji mnogo osobina koje možete postaviti u SS-u, mi ovde nedemo prodi sve, ved preporučujemo da pročitate
više o njima online, kako vam trebate. ao i kod mnogi stvari, ne bi trebalo da pokušavate da i zapamtite. Radije
i potražite, kad vam trebaju. Ako budete napisali puno SS-a, upoznadete se sa osobinama koje često koristite.
svom video kvizu, upoznali ste se sa stilom CSS-a koji listu stavki pretvara u zelenu boju.

4:04

eđutim, ovaj SS čini sve stavke liste na celoj veb stranici zelene. ta ako ste želeli da neke od njih postanu
zelene, a druge oblikovati na drugi način?

4:15

okazademo vam tri pristupa oblikovanja samo nekog određenog elementa.

4:21

rvi način da ovo uradite jeste da koristite klasu, nazvan stil. a biste koristili CSS klasu, potrebno je promeniti
pomodu pisanja "class =" i naziv klase koji želite u oznakama koje želite oblikovati. Sada, u SS-u, umesto
pisanja imena oznake kao selektora, napišite tačku, a zatim ime klase. ačka navodi da pozivate klasu.
4:50

dma nakon tačke, trebali biste napisati ime koje želite da dodelite klasi, ime može biti šta god želite. no mora
da sledi neka pravila, ne možete postaviti zagrade ili razmake u imenu, ali možete izabrati bilo koju reč koju želite.
eđutim, trebalo bi da ime bude opisno. ovom primeru smo odabrali "hranaLi", jer koristimo klasu da
oblikujemo listu stavki koja opisuje hranu.

5:16

Da li bi .zeleno ime bilo dobro za ovu klasu?

5:19

Iako to opisuje kako su stavke liste trenutno oblikovane, nazivanjem ".zeleno" nije sjajan izbor. Ako kasnije
odlučimo da želimo da oblikujemo našu listu namirnica u ljubičasto, naš naziv stila bi bio pogrešan. mesto toga,
bolje nam je da ga imenujemo na osnovu značenja delova naše stranice, a mi želimo da oblikujemo listu rane. Ako
se osvrnete na , sada kada ste videli SS, možete videti odakle je došlo ime koje smo izabrali. Poklapa se sa
nazivom klase koje smo odabrali u našem SS-u. rugi način da se oblikuje samo neki od određeni tipova
elemenata jeste korišdenje I -a. I označava jedan zaseban element. bratite pažnju na razliku između klase, koja
se može primeniti na mnogo elementa, i I , koji se može primeniti samo na jedan element. U ovom primeru, veb
stranica ima sliku torte, koju želimo oblikovati na određen način. aveli smo id? "cakeImg" unutar oznake img.
Sada u CSS-u možemo opisati stil za "cakeImg". bratite pažnju kako selektor za I počinje sa # znakom.

6:25

onačn način koji demo spomenuti, ali nedemo zalaziti u detalje, naziva se kombinator, to vam omogudava da
odredite odnose između oznaka. ožete odrediti da želite da oblikujete I-ove koji su unutar UL-a na određen
način. ta možete uraditi pisanjem "ul li" kao selektor. ostoje napredniji odnosi, kao što su brada i sestre.
Kombinatori su naprednija tema koja vam ne treba, ali mi to pominjemo za one koji žele da istražuju malo više.

6:54

lase i I -i omogudavaju vam da navedete način oblikovanja elementa.

6:59

Imenovanje stila vam omogudava da ponovo koristite taj stil po potrebi.

7:03

slučaju klase, možete na isti način oblikovati mnogo elemenata na stranici.

7:08

Za oboje, imena i klase, možete iznova koristiti stil na više stranica.

7:15

a primer, ako imate logo koji želite da prikažete u uglu svake stranice na vašoj veb lokaciji, možete jednom
napisati stil i ponovo koristiti taj stil na svakoj stranici. Imenovanje i ponovna upotreba je uobičajena tema u
računarstvu. ok zalazite dublje u programiranje, videdete da je često korisno imenovati stvari, konstante,
algoritme ili podatke, kako biste ih mogli ponovo koristiti.

7:40

Sada ste videli osnove CSS-a. aučili ste gde da pišete SS u ode en-u, osnovne sintakse CSS-a i kako napraviti
klase i ID-ove za imenovanje i ponovnu upotrebu stilova.
 Try it! Style Your Web Page with CSS/Pokušajte! Oblikujte svoju

stranicu sa CSS-om

kopija ove i drugi vežbi možete nadi na kartici Resursi.

tvorite svoju stranicu " oji interesi" u ode en-u i počnite da oblikujete stranicu koristedi SS editor.

1. Koristite CSS da biste oblikovali najmanje dva HTML elementa (paragrafi, zaglavlja, slike, itd.)
2. Dodajte ID-ove ili klase na najmanje dva HTML elementa.
3. Koristite CSS da biste oblikovali svoje ID-ove ili klase.

Imajte na umu da možete postaviti mnogo elementa unutar oznaka <div < div , a zatim koristiti SS kako
biste oblikovali sve između oznaka div na isti način, na primer: koristedi istu boju pozadine ili veličinu slova.

otrebna vam je pomod?

ogledajte našu stranicu dokumentacije za neke osnovne primere SS svojstva oblikovanja:

http://www.dukelearntoprogram.com/course1/doc/#css, takođe povezana na kartici Resursi.

Pogledajte ovaj primer stranice "Moji interesi": http://codepen.io/quentinre/pen/pEoqBK. Ovaj primer koristi neke
CSS osobine koje nisu navedene na DukeLearnToProgram.com.

Istražite "W3Schools" (http://www.w3schools.com/css/default.asp) kako biste bolje razumeli kako ove osobine
funkcionišu i saznajte više o CSS-u!

Evo 14 imena boja koje možete koristiti za boju vaše stranice:

http://www.w3schools.com/cssref/css_colors.asp.

udite jednostavni i fokusirajte se na osnove koje ste naučili u video snimcima!

 Colors and Names in CSS/Boje i imena u CSS-u
0:04

ovoj lekciji dete naučiti nešto više o SS-u. posljednjoj lekciji ste naučili osnove SS-a, njegovu sintaksu, kao i
kako možete pozivati stilove sa klasama i I -ima. ovoj lekciji dete naučiti nešto više o bojama u SS-u. aučidete
da i možete odrediti ne samo po imenu, ved i numeričkim vrednostima. rimer važnog koncepta koji dete naučiti
u slededoj lekciji, da je za komjuter sve broj.

0:34

Setite se od prošlog puta da ste naučili da oblikujete h1 oznaku u plavo i centrirano u sredini. Mi koristimo plavo
kao vrednost za svojstvo boje, da bi se postigao ovaj stil. ta ako želite da koristite drugu boju? drugom primeru
smo videli zelenu. akle, mogli biste pretpostaviti da dete koristite razne osnovne boje kao što su crvena i žuta, i
bidete u pravu. Ali možda dete želeti da kreirate veb stranicu sa sofisticiranijim izborima boja.

1:02

SS podržava mnogo širi izbor imena boja. aje vam mogudnost da izaberete neke lepe nijanse različiti boja, evo
nekoliko mojih omiljenih. lavo ljubičasta je lepa nijansa ljubičaste boje, zlatna je naravno zlatna boja. Svetlo plavi
čelik je lepo plavičasto sivo, a vatrena cigla je duboka crvena. stvari, ima 14 standardni boja koje vam daju
širok izbor boja koje možete izabrati po imenu. ako i možete sve zapamtiti? ao i mnoge druge stvari, niko ne
pamti ovu vrstu stvari. mesto toga, važno je znati kako potražiti ono što vam je potrebno. ožete pronadi veb
lokacije, poput ove, koja de vam pokazati različite boje, kao i nji ova imena. eđutim, čak ni 14 boja nije puno.
ta ako želite neku drugu nijansu boje koja nema standardno ime?

2:00

ini se da možda želimo više boja, ali koliko bi nam trebalo?

2:05

judi mogu doživjeti bukvalno milione boja.

2:10

a primjer, ovdje imamo 12 vrlo različiti nijansi plave, u rasponu od vrlo mračne sa leve strane, do srednje svetlo
plave sa desne strane. vo su samo nekoliko nijansi plave boje, a jedna od nji je vrlo važna nijansa plave boje.
vaj bar u sredini je " uke lue". aravno, ima mnogo više nijansi plave boje i još mnogo drugi boja.

2:34

Dakle, kako možemo da koristimo milione boja?

2:39

avanje imena svima njima bilo bi neizvodljivo. Jedan problem je što bi neko morao da stvori milione imena za
boje i da i standardizuje. Još jedan problem je što dete morati pregledati milione imena da biste pronašli željenu
boju.
2:56

graničavanje izbora dostupni boja nije veoma privlačna opcija. Ako stvarno želite određenu boju, kao što je
Duke Blue, vi biste bili nesretni ako je ne biste mogli dobiti.

3:07

Druga opcija bi bila da se svakoj boji da broj, što je zapravo i urađeno.

3:14

Zapravo, kako dete kasnije saznati, za računar sve je broj, tako da je ovaj izbor zapravo prirodan način za rukovanje
milionima boja.

3:24

ačin na koji ove boje funkcionišu kao brojevi jeste to što su određeni kombinacijom koliko sadrže crvene, zelene i
plave boje. Sa svakom komponentom koja uzima vrednost između nule i 255. va šema je dovoljna za određivanje
oko 16 miliona boja, što je više nego što ljudi mogu razlikovati.

3:46

SS-u možete odrediti boju tako što dete navesti vrednost crvene, zelene i plave komponente. išudi "rgb", a
zatim u otvorenoj zagradi numerička vrednost za crvenu, zelenu i plavu, svaka odvojena zarezom, i onda zatvorena
zagrada. va sintaksa uzima crveni, zeleni i plavi broj i onda i kombinuje u jednu numeričku vrednost za vas.
Svaka od boja koju smo ranije videli, ima ispisan svoj "rgb" vrednost iznad nje.

4:14

ožete takođe odrediti boju na osnovu cele numeričke vrijednosti, tako što dete napisati tarabu pradenu sa šest
eksadecimalni cifara. eksadecimalno znači bazu 16, tako da svaka cifra ima vrijednost od nule do 15. Rgb
vrednosti je zgodno napisati pomodu eksadecimala, jer svaka boja ima 256 mogudi vrijednosti, što znači tačno
dve heksadecimalne cifre. ve leve cifre, ovde, određuju crveno. Srednje dve cifre označavaju zelenu, a desne dve
cifre označavaju plavu.

4:46

Ne morate znati da pretvorite u i iz eksadecimalnog, ali za one koji su radoznali, pogledademo bliže. Navikli ste da
se upotreba brojeva bazira na 10, gde je svako mesto 10 puta više od pret odnog. Imate 1-o, 10-to i 100-to mesto i
tako dalje. eksadecimalama svako mesto je 16 puta više od pret odnog. akle imate 1-o, 16-to, 256-to, mesto i
tako dalje. Ako pogledamo dve cifre za svaku boju, imamo prva i 16-ta mesta. rvena od ove boje je 8A, što je 8 na
16-tom mestu plus A, što je 1 na 1-om mestu, što čini 138. Za zeleno dobijate 2 na 16-om mestu. lus , što je 11
na 1-om mestu, što čini 43. Za plavu imate E što je 14 na 16-om mestu, a dva na 1-om mestu, što čini 226.

5:43

nogim ljudima je lakše izabrati boje grafički i pustiti alatke da im daju broj. Da vidimo primer ovoga sa Mozilla
kolekcionarom boja.
5:52

Ovo je alatka za obradu boja dostupna na Mozilla sajtu. ožete videti R ovog alata na vr u veb pregledača. Ali
takođe možete pronadi link za njega u pisanom delu, koje ide sa ovom lekcijom. ok gledamo u glavni deo ovog
alata, videdete da ima obojenu kutiju i obojeni klizač. omerajudi klizač, podešava se dubljina boje. ožete videti
crvenu, žutu, zelenu, plavu, ljubičastu i crvenu. ožda želite senku, da kažemo, ljubičaste.

6:24

Zatim možete podesiti specifičnu nijansu u kutiji sa leve strane.

6:29

ožete dobiti sivlje, ili svetlije, ili tamniji. Ja du odabrati ovu boju.

6:39

ada pronađete željenu boju, ovaj alat prikazuje numeričke informacije na desnoj strani. Za ovu nijansu ljubičaste,
crvena je 232, zelena je 73, a plava je 227. akođe možete pročitati ekidecimalni broj iz kutije na dnu. o je
E849E3. ostoje neke naprednije funkcije, poput alfa, koje vam omogudavaju da prilagodite transparentnost u
slučaju da trebate slojeve objekata. Ako želeli to koristiti, ovaj drugi klizač vam omogudava da promenite
transparentnost.

7:14

Alat takođe prikazuje " S ", što je samo drugačiji način za prikazivanje boja kao brojeva, ali mi nedemo brinuti o
tome. akle, ako želite grafički odabrati određenu boju, ovakav alat može biti stvarno sjajan. o zaključuje našu
lekciju o bojama i SS-u. aučili ste da ima puno standardni imena, koje možete pogledati kada vam zatrebaju. I
da možete da navedete milione boja pomodu numerički vrednosti, bilo pisanjem rgb-a, crvenih, zelenih i plavih
vrednosti koje želite. Ili pišudi tarabu i eksidecimalnu vrednost broja boje. akođe smo videli alat za odabir boja,
koji vam omogudava da tražite boju koju želite da koristite. I onda vam daje numeričku vrednost za tu boju, da
napišete u vašem SS-u.
 Try it! Customize Your Web Page's Colors/Probajte! Prilagodite boje

vaše veb stranice

kopija ove i drugi vežbi možete nadi na kartici Resursi.

Slobodno prilagodite boje vaše " oja interesovanja" veb stranice, pomodu alata za biranje boja, poput
ovog: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool.

Evo još jednog alata za biranje boja koji možete koristiti:

http://www.w3schools.com/colors/colors_picker.asp.

ada nađete željenu boju, kopirajte šestocifreni šestostepeni broj da biste koristili boju na vašoj veb stranici.
bavezno kopirajte i znak taraba, tako da vaš SS izgleda ovako:

ada završite, ne zaboravite da pratite diskusiju i podelite svoj rad sa drugima!