SlideShare une entreprise Scribd logo
1  sur  29
Télécharger pour lire hors ligne
OVO ĆE BITI WEB
Sadržaj & kontekst
Kreirajte relevantan
 i koristan sadržaj
 Naš kapacitet za prihvaćanje smeća se
           rapidno smanjuje.
http://www.dnevnik.hr




9.10.2011
http://www.dnevnik.hr




9.10.2011
Simplify
Simplify
“We need a smarter content,
  not smarter containers”
Simplify
“We need a smarter content,
  not smarter containers”
Simplify
“We need a smarter content,
  not smarter containers”



                      KONTEKST
STARI KONTEKST
STARI KONTEKST

                IE
                     FOKUS


    VELIKI
    EKRAN
                     QWERTY
  BRZA VEZA



                               UDOBNA
BRZI CPU                       POZICIJA
NOVI KONTEKST
Krenimo ispočetka
WEB DIZAJN 1   || Jurica Doli   || 2008/2009




WEB
DIZAJN 1    Uvod i i osnove
               Uvod
            osnove HTML-a
               HTML a
2011/2012   Bojan Kanižaj
WORLD WIDE WEB
     WWW W3


       ¬ Sistem međusobno
       povezanih dokumenata
       ¬ Jedna od usluga interneta
       ¬ Povezivanje pomoću
       hiperveza (linkova)
WEB PREGLEDNICI



¬ Zaduženi su za ekranski prikaz web stranice
¬ Interpretiraju kod
¬ Zbog njihove različite interpretacije koda teško
je standardizirati ekranski prikaz stranice

W3C (World Wide Web Consortium )
– svjetska organizacija za standardizaciju WWW-a
ALATI ZA IZRADU
INTERNETSKE (HTML) STRANICE

                Notepad                      Adobe Dreamweaver
Tekst editori




                           WYSIWYG editori
                TextEdit                     MS Expression
                EditPlus                     Web KompoZer
                Emacs                        Amaya
                Gedit                        iWeb
                ...                          ...
WEB DIZAJN 1

                   HTML
       HyperText Markup Language

¬ Prezentacijski jezik za kreiranje web stranice
¬ HTML dokument = Web stranica
¬ Ekstenzija .html ili .htm
0/11

       HTML SINTAKSA


        <naredba>Sadržaj</naredba>
         HTML naredbe nazivamo tagovima



        ¬ HTML tag dolazi u paru
        ¬ Prvi tag je početni ili otvoreni,
        a drugi završni ili zatvoreni tag
JEDNOSTAVNA
         HTML STRANICA
<html>
<head>

<title> Moj WEB </title>

</head>
<body>

<h1>Naslov</h1>

<p>Paragraph.</p>

</body>
</html>
HTML TAGOVI

<html> </html> opisuju web stranicu
<head> </head> sadrži head elemente
npr. <base>, <link>, <meta>, <script>, <style> i <title>

<body> </body> vidljivi dio stranice
HTML TAGOVI
                HTML NASLOVI

Definirano je 6 nivoa/veličina naslova (h1 - h6)
          – h1 je najveći, a h6 najmanji
HTML automatski dodaje prazan red prije i poslije naslova



             <h1>Ovo je naslov</h1>
             <h2>Ovo je naslov</h2>
             <h3>Ovo je naslov</h3>
HTML TAGOVI

<p> Ovdje ide tekst </p>
Formira odlomak teksta na stranici.
Dva odlomka razmaknuta su jednim praznim redom.

<br> ili <br />

Primjer:

<p> Ovo je tekst<br />novi red</p>
Prelazak na novi red unutar odlomka.

<!-- Ovdje ide komentar -->
Dodavanje komentara unutar koda koji neće biti vidljivi u pregledniku

<hr />
ATRIBUTI


¬ HTML elementi mogu imati definirane dodatne
parametre koje nazivamo atributima
¬ Atribut sa vrijednostima se definira unutar
početnog tag-a HTML naredbe


<naredba atribut=“vrijednost”>Sadržaj</naredba>
PRIMJER
<html>
<head>

<title> Moj WEB </title>

</head>
<body>

<h1 align=”center”>Naslov</h1>

<p align=”center”>Paragraph.</p>

</body>
</html>

Contenu connexe

Similaire à V1 - WD 2011/2012

KAKO INTERNET GOVORI - Osnove HTML jezika
KAKO INTERNET GOVORI - Osnove HTML jezikaKAKO INTERNET GOVORI - Osnove HTML jezika
KAKO INTERNET GOVORI - Osnove HTML jezikaTomislav Kaučić
 
Mean Stack JavaCro 2014
Mean Stack JavaCro 2014Mean Stack JavaCro 2014
Mean Stack JavaCro 2014Nenad Pecanac
 
WebUG - Hibridne mobilne aplikacije
WebUG - Hibridne mobilne aplikacijeWebUG - Hibridne mobilne aplikacije
WebUG - Hibridne mobilne aplikacijeMatija Šmalcelj
 
Alati zakreiranjewebstranice
Alati zakreiranjewebstraniceAlati zakreiranjewebstranice
Alati zakreiranjewebstraniceseminarski1234
 
PHP za pocetnike - predavanje 7
PHP za pocetnike - predavanje 7PHP za pocetnike - predavanje 7
PHP za pocetnike - predavanje 7Nermin Sehic
 
PHP za pocetnike - predavanje 10
PHP za pocetnike - predavanje 10PHP za pocetnike - predavanje 10
PHP za pocetnike - predavanje 10Nermin Sehic
 
Kako izvuci (naj)vise iz vaseg share pointa 2013
Kako izvuci (naj)vise iz vaseg share pointa 2013Kako izvuci (naj)vise iz vaseg share pointa 2013
Kako izvuci (naj)vise iz vaseg share pointa 2013Matija Blagus
 
Vert.x - Mihovil Rister, Javantura
Vert.x - Mihovil Rister, JavanturaVert.x - Mihovil Rister, Javantura
Vert.x - Mihovil Rister, JavanturaFive
 
[TVZ računarstvo] Dinamičke web aplikacije, predavanje 9.
[TVZ računarstvo] Dinamičke web aplikacije, predavanje 9. [TVZ računarstvo] Dinamičke web aplikacije, predavanje 9.
[TVZ računarstvo] Dinamičke web aplikacije, predavanje 9. Stipe Predanic
 
Vert.x - asinkroni skalabilni i poliglotni framework nove generacije
Vert.x - asinkroni skalabilni i poliglotni framework nove generacijeVert.x - asinkroni skalabilni i poliglotni framework nove generacije
Vert.x - asinkroni skalabilni i poliglotni framework nove generacijeMihovil Rister
 
Web dizajn 2003 done
Web dizajn 2003 doneWeb dizajn 2003 done
Web dizajn 2003 doneguestd61bfb
 
Panel diskusija - usporedba Web frameworka (IT Showoff)
Panel diskusija - usporedba Web frameworka (IT Showoff)Panel diskusija - usporedba Web frameworka (IT Showoff)
Panel diskusija - usporedba Web frameworka (IT Showoff)IT Showoff
 
Izrada web sjedista - dan 2.
Izrada web sjedista - dan 2.Izrada web sjedista - dan 2.
Izrada web sjedista - dan 2.Jasmin Klindžić
 

Similaire à V1 - WD 2011/2012 (20)

KAKO INTERNET GOVORI - Osnove HTML jezika
KAKO INTERNET GOVORI - Osnove HTML jezikaKAKO INTERNET GOVORI - Osnove HTML jezika
KAKO INTERNET GOVORI - Osnove HTML jezika
 
Osnovno o HTM-u
Osnovno o HTM-uOsnovno o HTM-u
Osnovno o HTM-u
 
Html
HtmlHtml
Html
 
Mean Stack JavaCro 2014
Mean Stack JavaCro 2014Mean Stack JavaCro 2014
Mean Stack JavaCro 2014
 
WebUG - Hibridne mobilne aplikacije
WebUG - Hibridne mobilne aplikacijeWebUG - Hibridne mobilne aplikacije
WebUG - Hibridne mobilne aplikacije
 
Css
CssCss
Css
 
Alati zakreiranjewebstranice
Alati zakreiranjewebstraniceAlati zakreiranjewebstranice
Alati zakreiranjewebstranice
 
CSS - osnove
CSS - osnoveCSS - osnove
CSS - osnove
 
HTML oznake
HTML oznakeHTML oznake
HTML oznake
 
PHP za pocetnike - predavanje 7
PHP za pocetnike - predavanje 7PHP za pocetnike - predavanje 7
PHP za pocetnike - predavanje 7
 
PHP za pocetnike - predavanje 10
PHP za pocetnike - predavanje 10PHP za pocetnike - predavanje 10
PHP za pocetnike - predavanje 10
 
Kako izvuci (naj)vise iz vaseg share pointa 2013
Kako izvuci (naj)vise iz vaseg share pointa 2013Kako izvuci (naj)vise iz vaseg share pointa 2013
Kako izvuci (naj)vise iz vaseg share pointa 2013
 
Vert.x - Mihovil Rister, Javantura
Vert.x - Mihovil Rister, JavanturaVert.x - Mihovil Rister, Javantura
Vert.x - Mihovil Rister, Javantura
 
[TVZ računarstvo] Dinamičke web aplikacije, predavanje 9.
[TVZ računarstvo] Dinamičke web aplikacije, predavanje 9. [TVZ računarstvo] Dinamičke web aplikacije, predavanje 9.
[TVZ računarstvo] Dinamičke web aplikacije, predavanje 9.
 
Javantura Zagreb 2014 - Vert.x 1.3 - Mihovil Rister
Javantura Zagreb 2014 - Vert.x 1.3 - Mihovil RisterJavantura Zagreb 2014 - Vert.x 1.3 - Mihovil Rister
Javantura Zagreb 2014 - Vert.x 1.3 - Mihovil Rister
 
Vert.x - asinkroni skalabilni i poliglotni framework nove generacije
Vert.x - asinkroni skalabilni i poliglotni framework nove generacijeVert.x - asinkroni skalabilni i poliglotni framework nove generacije
Vert.x - asinkroni skalabilni i poliglotni framework nove generacije
 
JavaCro'14 - Is there a single “correct” web architecture for business apps –...
JavaCro'14 - Is there a single “correct” web architecture for business apps –...JavaCro'14 - Is there a single “correct” web architecture for business apps –...
JavaCro'14 - Is there a single “correct” web architecture for business apps –...
 
Web dizajn 2003 done
Web dizajn 2003 doneWeb dizajn 2003 done
Web dizajn 2003 done
 
Panel diskusija - usporedba Web frameworka (IT Showoff)
Panel diskusija - usporedba Web frameworka (IT Showoff)Panel diskusija - usporedba Web frameworka (IT Showoff)
Panel diskusija - usporedba Web frameworka (IT Showoff)
 
Izrada web sjedista - dan 2.
Izrada web sjedista - dan 2.Izrada web sjedista - dan 2.
Izrada web sjedista - dan 2.
 

V1 - WD 2011/2012

  • 1.
  • 2.
  • 4.
  • 5.
  • 7. Kreirajte relevantan i koristan sadržaj Naš kapacitet za prihvaćanje smeća se rapidno smanjuje.
  • 11. Simplify “We need a smarter content, not smarter containers”
  • 12. Simplify “We need a smarter content, not smarter containers”
  • 13. Simplify “We need a smarter content, not smarter containers” KONTEKST
  • 15. STARI KONTEKST IE FOKUS VELIKI EKRAN QWERTY BRZA VEZA UDOBNA BRZI CPU POZICIJA
  • 18. WEB DIZAJN 1 || Jurica Doli || 2008/2009 WEB DIZAJN 1 Uvod i i osnove Uvod osnove HTML-a HTML a 2011/2012 Bojan Kanižaj
  • 19. WORLD WIDE WEB WWW W3 ¬ Sistem međusobno povezanih dokumenata ¬ Jedna od usluga interneta ¬ Povezivanje pomoću hiperveza (linkova)
  • 20. WEB PREGLEDNICI ¬ Zaduženi su za ekranski prikaz web stranice ¬ Interpretiraju kod ¬ Zbog njihove različite interpretacije koda teško je standardizirati ekranski prikaz stranice W3C (World Wide Web Consortium ) – svjetska organizacija za standardizaciju WWW-a
  • 21. ALATI ZA IZRADU INTERNETSKE (HTML) STRANICE Notepad Adobe Dreamweaver Tekst editori WYSIWYG editori TextEdit MS Expression EditPlus Web KompoZer Emacs Amaya Gedit iWeb ... ...
  • 22. WEB DIZAJN 1 HTML HyperText Markup Language ¬ Prezentacijski jezik za kreiranje web stranice ¬ HTML dokument = Web stranica ¬ Ekstenzija .html ili .htm
  • 23. 0/11 HTML SINTAKSA <naredba>Sadržaj</naredba> HTML naredbe nazivamo tagovima ¬ HTML tag dolazi u paru ¬ Prvi tag je početni ili otvoreni, a drugi završni ili zatvoreni tag
  • 24. JEDNOSTAVNA HTML STRANICA <html> <head> <title> Moj WEB </title> </head> <body> <h1>Naslov</h1> <p>Paragraph.</p> </body> </html>
  • 25. HTML TAGOVI <html> </html> opisuju web stranicu <head> </head> sadrži head elemente npr. <base>, <link>, <meta>, <script>, <style> i <title> <body> </body> vidljivi dio stranice
  • 26. HTML TAGOVI HTML NASLOVI Definirano je 6 nivoa/veličina naslova (h1 - h6) – h1 je najveći, a h6 najmanji HTML automatski dodaje prazan red prije i poslije naslova <h1>Ovo je naslov</h1> <h2>Ovo je naslov</h2> <h3>Ovo je naslov</h3>
  • 27. HTML TAGOVI <p> Ovdje ide tekst </p> Formira odlomak teksta na stranici. Dva odlomka razmaknuta su jednim praznim redom. <br> ili <br /> Primjer: <p> Ovo je tekst<br />novi red</p> Prelazak na novi red unutar odlomka. <!-- Ovdje ide komentar --> Dodavanje komentara unutar koda koji neće biti vidljivi u pregledniku <hr />
  • 28. ATRIBUTI ¬ HTML elementi mogu imati definirane dodatne parametre koje nazivamo atributima ¬ Atribut sa vrijednostima se definira unutar početnog tag-a HTML naredbe <naredba atribut=“vrijednost”>Sadržaj</naredba>
  • 29. PRIMJER <html> <head> <title> Moj WEB </title> </head> <body> <h1 align=”center”>Naslov</h1> <p align=”center”>Paragraph.</p> </body> </html>