HTML, CSS i Javascript Web Tehnologije - 1. predavanje - Startit.rs

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”
 
THE LEAN STARTUP 
 
The Lean Startup isn't just about how to create a
more successful entrepreneurial business - it’s
about what we can learn from those businesses to
improve virtually everything we do. I imagine Lean
Startup principles applied to government programs,
to healthcare, and to solving the world's great
problems.
http://theleanstartup.com
HEADER PARAGRAPH
LINK

<h1>THE LEAN STARTUP</h1> 
 
<p>The Lean Startup isn't just about how to create
a more successful entrepreneurial business - it’s
about what we can learn from those businesses to
improve virtually everything we do. I imagine Lean
Startup principles applied to government programs,
to healthcare, and to solving the world's great
problems.</p> 
 
<a href=“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čna reč >
<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>Education is the most powerful weapon which
you can use to change the world.</p> 
 
<div><h1>The Innovator’s dilemma</h1></div>
<p> </p>

 
<p>The Lean Startup isn't just about how to create a more successful
entrepreneurial business - it’s about what we can learn from those businesses
to improve virtually everything we do. I imagine Lean Startup principles
applied to government programs, to healthcare, and to solving the world's
great problems.</p> 
 
HTML OSNOVE
ČITAJU HTML KOD -> WEB STRANICA

HTML OSNOVE
ATRIBUTI HTML TAGOVA
▸ Tagovi imaju atribute koji ih bliže opisuju 
 
Izgled atributa: 
 
 
▸ Primeri tagova sa atributima:
<a href=“http://theleanstartup.com”>
<img src=“http://startit.rs/indjija.jpg”>
<meta charset="UTF-8">

HTML OSNOVE
LINKOVANJE STRANICA: HTML HIPERTEKST!
▸ A HREF tag služi za linkovanje strana (Hiper REFerenca)
LINK TEKST KOJI SE PRIKAZUJE
<a href=“http://theleanstartup.com”>Visit Book website</a>
<a href=“http://startit.rs”>Za sve što je bitno na domaćoj IT sceni</a>

HTML OSNOVE
TAGOVI ZA PISANJE TEKSTA
▸ HEADER: H1, H2 . . . H6 - naslovi, deli dokument na celine
▸ PARAGRAPH: P - Deli tekst na pasuse 
<h2>The movement that is trasforming how new products are build and launched</h2> 
 
<p>The Lean Startup isn't just about how to create a more successful entrepreneurial busine
- it’s about what we can learn from those businesses to improve virtually everything we do.
imagine Lean Startup principles applied to government programs, to healthcare, and to solvi
the world's great problems.</p> 
 
<a href=“http://theleanstartup.com”>Lean Startup Website</a>

HTML OSNOVE
NAGLAŠAVANJE I FORMATIRANJE TEKSTA
▸ STRONG tag - za naglašavanje teksta 
 
Primer:  This HTML course is <strong>sooo cool!</strong>
▸ BR tag - BReak: prelazak u novi red 
 
Primer:
▸ HR tag - Horizontal Rule: jednostavno - horizontalna linija
<p>Ekonomija bazirana na teškoj industriji je stvar prošlosti – osim
u Azijskim zemljama.</p><br><br><br> 
<p>Male tehnološke kompanije koje izvoze svoje usluge na globalno
tržište igraju ključnu ulogu u modernoj ekonomiji.</p>

HTML OSNOVE
VEŽBA! NAPISATI SVOJ TEKST U HTML-U
scratchpad.io
TAGOVI: H1, H2,… H6, P, STRONG, BR,HR, A HREF

HTML OSNOVE
DODAVANJE SLIKA U HTML
Izvor: techcrunch.com

<p>This year’s Audience Choice at Disrupt SF has a WHALE of a
tale to tell you. Called <a href='http://
fishingbooker.com'>FishingBooker.com</a>, this Belgrade-based
company is streamlining the process of booking fishing boats.
Yes. Really.</p> 
 
<p>Founded by Vukan Simic and Nemanja Cerovac, the startup
won a pitch-off I attended in Montenegro this year and came
all the way from Serbia to hang out on the show floor. When
they heard about Audience Choice they notified everyone in
Belgrade and swept the voting by connecting with some high-
profile Serbian tennis players. It’s a Cinderella story (with
fish.)</p>
HTML OSNOVE
<h1>FishingBooker Helps You Book Fishing Trips</h1> 
<img src="https://tctechcrunch.files.com/shutterstock_1842.jpg">

HTML OSNOVE
<img src="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-U
scratchpad.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?

HTML, CSS i Javascript Web Tehnologije - 1. predavanje - Startit.rs

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to HTML, CSS i Javascript Web Tehnologije - 1. predavanje - Startit.rs

Similar to HTML, CSS i Javascript Web Tehnologije - 1. predavanje - Startit.rs (20)

More from Milovan Jovičić

More from Milovan Jovičić (12)

Recently uploaded

Recently uploaded (20)

HTML, CSS i Javascript Web Tehnologije - 1. predavanje - Startit.rs