Embed Size (px)
Citation preview
SEE ICT - STARTIT CENTAR
HTML, CSS I JAVASCRIPT WEB TEHNOLOGIJE
WEB TEHNOLOGIJE - UVOD
ZAŠTO WEB TEHNOLOGIJE?▸ Popularnost - veliki broj uređaja je podržava
▸ Jednostavna za savlađivanje
▸ Dobar osnov za učenje programiranja
▸ Literatura je lako dostupna
▸ Upotrebna vrednost je ogromna!
WEB TEHNOLOGIJE - UVOD
ZADACI I PLAN KURSA▸ Pravljenje stranice i kompletnog websitea!
▸ Upoznavanje sa principima programiranja
▸ Vežba kroz samostalni rad, domaće zadatke
▸ Mentorstvo i podrška - i povratna informacija polaznika
▸ Predavanja su interaktivna - pitanja su poželjna!
▸ Napredovanje u praktičnom znanju polaznika
WEB TEHNOLOGIJE - HTML
NASTANAK I RAZVOJ WEB-A ▸ Hipertekst - unapređenje statičkog teksta
▸ “Web” - engl. “Mreža” - najpopularnija verzija hiperteksta
▸ HTML deklarativni jezik i njegova evolucija
▸ Web browser - prikazuje web sadržaj
▸ Web aplikacije - napredni HTML
Web Sajtovi:
Web Aplikacije:
>> SVE OVO POKREĆE HTML! <<
WEB TEHNOLOGIJE - HTML
HTML OSNOVE
DISEKCIJA WEB PREZENTACIJE
Interaktivnost i animacija
Format i izgled strane
Sadržaj (tekst, slika, video)
HTML OSNOVE
JAVASCRIPT SLOJ - ANIMACIJA I INTERAKCIJA
HTML OSNOVE
CSS SLOJ - RASPORED I FORMAT ELEMENATA
HTML OSNOVE
HTML SLOJ - BAZA WEB STRANICE
POČINJEMO SA OTKRIVANJEM WEB-A!
HTML OSNOVE
HTML - TEKST “NA STEROIDIMA”THELEANSTARTUPTheLeanStartupisn'tjustabouthowtocreateamoresuccessfulentrepreneurialbusiness-it’saboutwhatwecanlearnfromthosebusinessestoimprovevirtuallyeverythingwedo.IimagineLeanStartupprinciplesappliedtogovernmentprograms,tohealthcare,andtosolvingtheworld'sgreatproblems.
http://theleanstartup.com
HEADER PARAGRAPH
LINK
<h1>THELEANSTARTUP</h1><p>TheLeanStartupisn'tjustabouthowtocreateamoresuccessfulentrepreneurialbusiness-it’saboutwhatwecanlearnfromthosebusinessestoimprovevirtuallyeverythingwedo.IimagineLeanStartupprinciplesappliedtogovernmentprograms,tohealthcare,andtosolvingtheworld'sgreatproblems.</p><ahref=“http://theleanstartup.com”>http://theleanstartup.com</a>
HTML OSNOVE
HTML - TEKST “NA STEROIDIMA”HEADER
PARAGRAPH
LINK
HTML OSNOVE
ELEMENTI HTML-A - ANALIZA▸ TAG - gradivni element web stranice
▸ Izgled taga:
▸ Primeri tagova:
<ključnareč>
<p><h1><div><head>
HTML OSNOVE
HTML BLOKOVI - TAGOVI U PUNOJ SNAZI!▸ HTML blok je sadržaj uokviren tagovima
▸ “Otvaranje” i “zatvaranje” taga - pravilo pisanja:
Primeri HTML blokova:
<p>Educationisthemostpowerfulweaponwhichyoucanusetochangetheworld.</p><div><h1>TheInnovator’sdilemma</h1></div>
<p></p>
<h1>THELEANSTARTUP</h1><p>TheLeanStartupisn'tjustabouthowtocreateamoresuccessfulentrepreneurialbusiness-it’saboutwhatwecanlearnfromthosebusinessestoimprovevirtuallyeverythingwedo.IimagineLeanStartupprinciplesappliedtogovernmentprograms,tohealthcare,andtosolvingtheworld'sgreatproblems.</p><ahref=“http://theleanstartup.com”>http://theleanstartup.com</a>
HTML OSNOVE
ČITAJU HTML KOD -> WEB STRANICA
HTML OSNOVE
ATRIBUTI HTML TAGOVA▸ Tagovi imaju atribute koji ih bliže opisujuIzgled atributa:
▸ Primeri tagova sa atributima:
<ahref=“http://theleanstartup.com”>
<imgsrc=“http://startit.rs/indjija.jpg”>
<metacharset="UTF-8">
HTML OSNOVE
LINKOVANJE STRANICA: HTML HIPERTEKST!▸ A HREF tag služi za linkovanje strana (Hiper REFerenca)
<ahref=“http://theleanstartup.com”>http://theleanstartup.com</a>
LINK TEKST KOJI SE PRIKAZUJE
<ahref=“http://theleanstartup.com”>VisitBookwebsite</a>
<ahref=“http://startit.rs”>ZasveštojebitnonadomaćojITsceni</a>
HTML OSNOVE
TAGOVI ZA PISANJE TEKSTA▸ HEADER: H1, H2 . . . H6 - naslovi, deli dokument na celine
▸ PARAGRAPH: P - Deli tekst na pasuse
<h1>THELEANSTARTUP</h1><h2>Themovementthatistrasforminghownewproductsarebuildandlaunched</h2> <p>TheLeanStartupisn'tjustabouthowtocreateamoresuccessfulentrepreneurialbusiness-it’saboutwhatwecanlearnfromthosebusinessestoimprovevirtuallyeverythingwedo.IimagineLeanStartupprinciplesappliedtogovernmentprograms,tohealthcare,andtosolvingtheworld'sgreatproblems.</p><ahref=“http://theleanstartup.com”>LeanStartupWebsite</a>
HTML OSNOVE
NAGLAŠAVANJE I FORMATIRANJE TEKSTA▸ STRONG tag - za naglašavanje tekstaPrimer: ThisHTMLcourseis<strong>sooocool!</strong>
▸ BR tag - BReak: prelazak u novi redPrimer:
▸ HR tag - Horizontal Rule: jednostavno - horizontalna linija
<p>Ekonomijabazirananateškojindustrijijestvarprošlosti–osimuAzijskimzemljama.</p><br><br><br><p>Maletehnološkekompanijekojeizvozesvojeuslugenaglobalnotržišteigrajuključnuuloguumodernojekonomiji.</p>
HTML OSNOVE
VEŽBA! NAPISATI SVOJ TEKST U HTML-Uscratchpad.io
TAGOVI: H1, H2,… H6, P, STRONG, BR,HR, A HREF
HTML OSNOVE
DODAVANJE SLIKA U HTML
Izvor: techcrunch.com
<p>Thisyear’sAudienceChoiceatDisruptSFhasaWHALEofataletotellyou.Called<ahref='http://fishingbooker.com'>FishingBooker.com</a>,thisBelgrade-basedcompanyisstreamliningtheprocessofbookingfishingboats.Yes.Really.</p><p>FoundedbyVukanSimicandNemanjaCerovac,thestartupwonapitch-offIattendedinMontenegrothisyearandcameallthewayfromSerbiatohangoutontheshowfloor.WhentheyheardaboutAudienceChoicetheynotifiedeveryoneinBelgradeandsweptthevotingbyconnectingwithsomehigh-profileSerbiantennisplayers.It’saCinderellastory(withfish.)</p>
HTML OSNOVE
DODAVANJE SLIKA U HTML<h1>FishingBookerHelpsYouBookFishingTrips</h1>
<imgsrc="https://tctechcrunch.files.com/shutterstock_1842.jpg">
HTML OSNOVE
DODAVANJE SLIKA U HTML
<imgsrc="https://tctechcrunch.files.com/shutterstock_1842.jpg">
IMG TAG SRC ATRIBUT
‣ IMG - IMaGe tag
‣ SRC - SouRCe atribut - sadrži lokaciju slike
‣ Ne uokviruje sadržaj - nije potrebno da se tag “zatvori”
HTML OSNOVE
VEŽBA! DODATI SLIKU SVOM HTML-Uscratchpad.io
TAGOVI: H1, H2,… H6, P, STRONG, BR,HR, A HREF + IMG
HTML OSNOVE
REKAPITULACIJA PREDAVANJA I VEŽBE▸ Nastanak web-a i HTML jezik kao stožer
▸ Tri sloja web-a: razlike između HTML-a, CSS-a i Javascript-a
▸ Tagovi - gradivni elementi HTML-a, konvencije za pisanje
▸ Tekst tagovi: H, P, STRONG, BR; link tag: A HREF
▸ Dodavanje slika - IMG tag
▸ Napravili smo svoj prvi sajt!!!
HTML OSNOVE
DOMAĆI ZADATAK▸ Napisati svoj CV u HTML-u koristeći scratchpad.io koristeći
tagove: H1-H3, A, P, STRONG, IMG, HR, BR
▸ Pogledati sajt http://www.w3schools.com i upoznati se sa drugim HTML tag-ovima
▸ Instalirati alat za pisanje HTML-a Sublime Text editor - http://www.sublimetext.com/
▸ Instalirati Slack aplikaciju na svoj telefon ili računar
HTML OSNOVE
HVALA VAM NA PAŽNJI!
PITANJA?
