ºÝºÝߣ

ºÝºÝߣShare a Scribd company logo

HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs

?
?
M
Milovan Jovi?i?

Kurs HTML, CSS i Javascript web tehnologija 2. predavanje - HTML5 elementi i uvod u CSS Kurs je odr?an u okviru projekta besplatne obuke gra?ana i u organizaciji Startit centra - vi?e informacija na www.startit.rs

1 of 34
Downloaded 58 times
HTML, CSS i JAVASCRIPT WEB TEHNOLOGIJE - PREDAVANJE 2. SEE ICT - STARTIT CENTAR
¡ñ Kako web funkcioni?e? ¡ñ Format HTML5 dokumenta ¡ñ DOM TREE ¡ñ Novi HTML elementi: Liste, navigacioni elementi, sekcije... ¡ñ Uvod u CSS - osnovni koncepti i elementi PROGRAM PREDAVANJA I VE?BI
KAKO FUNKCIONI?E WEB? ServerKlijent HTTP + TCP/IP
<!DOCTYPE html> <html> <head> <title>Web kurs - Startit Centar</title> </head> <body> </body> </html> ¡ñ Prou?avamo moderni HTML5 standard PRAVILNA FORMA HTML DOKUMENTA VIDLJIVI sadr?aj dokumenta HEADER HTML dokumenta <p>Example Code</p>
D.O.M. - LOGI?KI MODEL HTML-a HTML kod <!DOCTYPE html> <html> <head> <title>Web kurs-Startit</title> </head> <body> <p>Example content</p> </body> </html> HTML HEAD BODY TITLE P DOM TREE
D.O.M. - LOGI?KI MODEL HTML-a NEPRAVILNO UGNJE??AVANJE! <p>Programming is understandable!<a href=¡±google.com¡±>Learn more...</p> </a>
Potrebno za kurs: ¡ñ Kompjuter ¡ñ Sveska ¡ñ Olovka ¡ñ Aktivno u?estvovanje :) LISTE - ?ESTO KORI??EN ELEMENT NEURE?ENA LISTA Pre po?etka predavanja: 1. Priklju?iti laptop na punja? 2. Povezati projektor na laptop 3. Uklju?iti projektor 4. Pokrenuti prezentaciju URE?ENA LISTA
LISTE - ?ESTO KORI??EN ELEMENT <h1>Potrebno za kurs:</h1> <ul> <li>Kompjuter</li> <li>Sveska</li> <li>Olovka</li> <li>Aktivno u?estvovanje :)</li> </ul> UNORDERED LIST <h1>Pre po?etka predavanja</h1> <ol> <li>Priklju?iti laptop na punja?</li> <li>Povezati projektor na laptop</li> <li>Uklju?iti projektor</li> <li>Pokrenuti prezentaciju</li> </ol> ORDERED LIST
<header> </header> <footer> </footer> ELEMENTI ZA URE?IVANJE STRANE HEADER CONTENT FOOTER <body> </body> CONTENT
ARTICLE element ELEMENTI ZA URE?IVANJE STRANE
<article> <img src=/slideshow/html-css-i-javascript-web-tehnologije-2-predavanje-startitrs-60716976/60716976/¡±outlander.jpg¡±> <h1>Need a meaty, complex time travel series? Start watching Outlander</h1> <p>Battlestar Galactica's Ron Moore packed his new show with intrigue and great characters.</p> <footer> <p>by Kathryn VanArendonk - Apr 7, 7:05pm CEST</p> </footer> </article> ELEMENTI ZA URE?IVANJE STRANE
ASIDE SECTION ELEMENTI ZA URE?IVANJE STRANE
<aside> <h1>On the radar</h1> <article> ¡­ </article> <article> ¡­ </article> <article> ¡­ </article> </aside> ELEMENTI ZA URE?IVANJE STRANE <ul> <li> </li> <li> </li> <li> </li> </ul>
ELEMENTI ZA URE?IVANJE STRANE <section> <hr> <a href=¡±read-more.html¡±>Read more stories</a> <hr> </section>
ELEMENTI ZA URE?IVANJE STRANE NAV - glavna navigacija sajta
ELEMENTI ZA URE?IVANJE STRANE <header> <img src=/slideshow/html-css-i-javascript-web-tehnologije-2-predavanje-startitrs-60716976/60716976/¡±logo.jpg¡±> <nav> <ul> <li> <a href=¡±main.html¡±>Main Menu</a> </li> <li> <a href=¡±stories.html¡±>My Stories</a> </li> <li> <a href=¡±forums.html¡±>Forums</a> </li> <li> <a href=¡±jobs.html¡±>Jobs</a> </li> </ul> </nav> </header>
¡ñ Link na email <a href=¡¯mailto:kontakt@startit.rs¡¯>Javite nam se!</a> ¡ñ Link na deo dokumenta - obele?en oznakom ¡°ID¡± - identifikator <a href=¡¯#early-Life¡¯>Early life and Career</a> . . . <h2 id=¡¯early-life¡¯>Ivo Andri? - Early Life</h2> ?TA JO? MOGU HTML LINKOVI? GRE?KA! Identifikatori moraju da budu istog naziva!
OKRU?ENJE ZA RAD: EDITOR I WEB BROWSER
VE?BA - UPOTREBA NOVIH TAGOVA HTML, HEAD, TITLE, BODY HEADER, NAV, UL, OL, LI, ASIDE, ARTICLE, SECTION, FOOTER Elementi: ¡ñ Naziv stranice, Logo i naziv picerije ¡ñ Meni, koji ?e upu?ivati na delove stranice ¡ñ Numerisan jelovnik ¡ñ Nenumerisan spisak dodataka za pizzu ¡ñ Kontakt informacije, sa linkovima NAPRAVITE SAJT PICERIJE! <!DOCTYPE html> <html> <head> <title>Web kurs - Beograd 2016</title> </head> <body> </body> </html>
¡ñ HTML - u osnovi vizuelno rigidan ¡ñ Tagovi koji opisuju izgled (CENTER, MARQUEE, FONT...=) NASTANAK CSS-a ¡ñ CILJ - pobolj?ati prezentacione mogu?nosti HTML-a ¡ñ CILJ - odvojiti strukturu od izgleda dokumenta
NASTANAK CSS-a
CSS OSNOVE <h2>Figure can be more than image</h2> <p>Another common misconception regarding <figure> is that it can only be used for images. This isn¡¯t the cas A <figure> could be video, audio, a chart, a quote, a table, a block of code, a piece of prose, or any combination of these and much more besides. </p> <h2>Don¡¯t include unnecessary type attributes</h2> <p>This is probably the most common problem we see in HTML5 Gallery submissions. While it isn¡¯t really a mistake, I believe it¡¯s best practice to avoid this pattern.</p> <p>In HTML5, there¡¯s no need to include the type attribute on <script> and <style> elements.</p> H2
CSS OSNOVE Tag H2 Svojstvo Boja Vrednost Zlatna h2 { color: gold; } CSS DEKLARACIJA Separator
CSS OSNOVE - BACKGROUND h1 { color : gold; } p { background-color: red; color : white; }
CSS OSNOVE - ID h1 { color : gold; } p#common-problem { background-color: red; color : white; } <p id=¡±common-problem¡±>This is probably the most common problem we see in HTML5 Gallery submissions. While it isn¡¯t really a mistake, I believe it¡¯s best practice to avoid this pattern.</p> <p>In HTML5, there¡¯s no need to include the type attribute on script and style elements.</p> IDENTIFIKATOR - #ID
CSS OSNOVE - KLASE KLASE ELEMENATA h1 { color : gold; } p.important { background-color: red; color : white; } CSS KLASA: .class
CSS OSNOVE - KLASE KLASE ELEMENATA h1 { color : gold; } p.important { background-color: red; color : white; } CSS KLASA: .class <p class=¡±important¡±>In HTML5, there¡¯s no need to include the type attribute on script and style elements.</p>
CSS OSNOVE TAGOVI ¡°SA STILOM¡± body { background-color:grey; } section#content{ background-color: #FFF; color:silver; } .main{ color:black; } ...JEDNIM IMENOM SE U CSS-u ZOVU: SELEKTORI!
CSS OSNOVE - PISANJE U HTML KODU <!DOCTYPE html> <html> <head> <title>Web kurs - Startit Centar</title> <style> </style> </head> <body> <h1>Main Header</h1> <p>Example content</p> </body> </html> CSS KOD
POVEZIVANJE CSS FAJLOVA <!DOCTYPE html> <html> <head> <title>Web kurs - Startit Centar</title> <link rel='stylesheet' type='text/css' href='style.css'> </head> <body> <h1>Main Header</h1> <p>Example content</p> </body> </html>
VE?BA - UNAPREDITE SVOJ CV ! HEADER, NAV, UL, OL, LI, SECTION, ARTICLE, ASIDE, FOOTER BOJE: http://html-color-codes.info/color-names/ #ID, .class, color, background-color <!DOCTYPE html> <html> <head> <title>Web kurs - Beograd</title> <link rel='stylesheet' type='text/css' href='style.css'> </head> <body> <h1>Main Header</h1> <p>Example content</p> </body> </html>
¡ñ Zavr?iti sajt picerije ¡ñ Napraviti HTML novine sa sadr?ajem i #linkovima za kretanje po strani ¡ñ Napraviti svoj blog sa navigacijom i nekoliko ?lanaka sa tekstom i slikama ¡ñ BONUS: Prou?iti HTML tabele i napraviti raspored ?asova - 8 ?asova predavanja DOMA?I ZADATAK
¡ñ Mozilla Developer Network - ¡°How Web Works¡± ¡ñ Mozilla Developer Nework - ¡°Common questions on web development¡± ¡ñ Referentno ?tivo za HTML5 - HTML 5 Doctor ¡ñ Alat u kome je pravljena ova prezentacija u HTML-u - Google ºÝºÝߣs ¡ñ Demonstracija upotrebe i svestranosti CSS-a - CSS Zen Garden ¡ñ HTML Boje: http://html-color-codes.info/color-names/ KORISNI LINKOVI
HVALA VAM NA PA?NJI! PITANJA?

More Related Content

HTML, CSS i Javascript Web tehnologije - 2. predavanje - Startit.rs

  • 1. HTML, CSS i JAVASCRIPT WEB TEHNOLOGIJE - PREDAVANJE 2. SEE ICT - STARTIT CENTAR
  • 2. ¡ñ Kako web funkcioni?e? ¡ñ Format HTML5 dokumenta ¡ñ DOM TREE ¡ñ Novi HTML elementi: Liste, navigacioni elementi, sekcije... ¡ñ Uvod u CSS - osnovni koncepti i elementi PROGRAM PREDAVANJA I VE?BI
  • 4. <!DOCTYPE html> <html> <head> <title>Web kurs - Startit Centar</title> </head> <body> </body> </html> ¡ñ Prou?avamo moderni HTML5 standard PRAVILNA FORMA HTML DOKUMENTA VIDLJIVI sadr?aj dokumenta HEADER HTML dokumenta <p>Example Code</p>
  • 5. D.O.M. - LOGI?KI MODEL HTML-a HTML kod <!DOCTYPE html> <html> <head> <title>Web kurs-Startit</title> </head> <body> <p>Example content</p> </body> </html> HTML HEAD BODY TITLE P DOM TREE
  • 6. D.O.M. - LOGI?KI MODEL HTML-a NEPRAVILNO UGNJE??AVANJE! <p>Programming is understandable!<a href=¡±google.com¡±>Learn more...</p> </a>
  • 7. Potrebno za kurs: ¡ñ Kompjuter ¡ñ Sveska ¡ñ Olovka ¡ñ Aktivno u?estvovanje :) LISTE - ?ESTO KORI??EN ELEMENT NEURE?ENA LISTA Pre po?etka predavanja: 1. Priklju?iti laptop na punja? 2. Povezati projektor na laptop 3. Uklju?iti projektor 4. Pokrenuti prezentaciju URE?ENA LISTA
  • 8. LISTE - ?ESTO KORI??EN ELEMENT <h1>Potrebno za kurs:</h1> <ul> <li>Kompjuter</li> <li>Sveska</li> <li>Olovka</li> <li>Aktivno u?estvovanje :)</li> </ul> UNORDERED LIST <h1>Pre po?etka predavanja</h1> <ol> <li>Priklju?iti laptop na punja?</li> <li>Povezati projektor na laptop</li> <li>Uklju?iti projektor</li> <li>Pokrenuti prezentaciju</li> </ol> ORDERED LIST
  • 9. <header> </header> <footer> </footer> ELEMENTI ZA URE?IVANJE STRANE HEADER CONTENT FOOTER <body> </body> CONTENT
  • 10. ARTICLE element ELEMENTI ZA URE?IVANJE STRANE
  • 11. <article> <img src=/slideshow/html-css-i-javascript-web-tehnologije-2-predavanje-startitrs-60716976/60716976/¡±outlander.jpg¡±> <h1>Need a meaty, complex time travel series? Start watching Outlander</h1> <p>Battlestar Galactica's Ron Moore packed his new show with intrigue and great characters.</p> <footer> <p>by Kathryn VanArendonk - Apr 7, 7:05pm CEST</p> </footer> </article> ELEMENTI ZA URE?IVANJE STRANE
  • 13. <aside> <h1>On the radar</h1> <article> ¡­ </article> <article> ¡­ </article> <article> ¡­ </article> </aside> ELEMENTI ZA URE?IVANJE STRANE <ul> <li> </li> <li> </li> <li> </li> </ul>
  • 14. ELEMENTI ZA URE?IVANJE STRANE <section> <hr> <a href=¡±read-more.html¡±>Read more stories</a> <hr> </section>
  • 15. ELEMENTI ZA URE?IVANJE STRANE NAV - glavna navigacija sajta
  • 16. ELEMENTI ZA URE?IVANJE STRANE <header> <img src=/slideshow/html-css-i-javascript-web-tehnologije-2-predavanje-startitrs-60716976/60716976/¡±logo.jpg¡±> <nav> <ul> <li> <a href=¡±main.html¡±>Main Menu</a> </li> <li> <a href=¡±stories.html¡±>My Stories</a> </li> <li> <a href=¡±forums.html¡±>Forums</a> </li> <li> <a href=¡±jobs.html¡±>Jobs</a> </li> </ul> </nav> </header>
  • 17. ¡ñ Link na email <a href=¡¯mailto:kontakt@startit.rs¡¯>Javite nam se!</a> ¡ñ Link na deo dokumenta - obele?en oznakom ¡°ID¡± - identifikator <a href=¡¯#early-Life¡¯>Early life and Career</a> . . . <h2 id=¡¯early-life¡¯>Ivo Andri? - Early Life</h2> ?TA JO? MOGU HTML LINKOVI? GRE?KA! Identifikatori moraju da budu istog naziva!
  • 18. OKRU?ENJE ZA RAD: EDITOR I WEB BROWSER
  • 19. VE?BA - UPOTREBA NOVIH TAGOVA HTML, HEAD, TITLE, BODY HEADER, NAV, UL, OL, LI, ASIDE, ARTICLE, SECTION, FOOTER Elementi: ¡ñ Naziv stranice, Logo i naziv picerije ¡ñ Meni, koji ?e upu?ivati na delove stranice ¡ñ Numerisan jelovnik ¡ñ Nenumerisan spisak dodataka za pizzu ¡ñ Kontakt informacije, sa linkovima NAPRAVITE SAJT PICERIJE! <!DOCTYPE html> <html> <head> <title>Web kurs - Beograd 2016</title> </head> <body> </body> </html>
  • 20. ¡ñ HTML - u osnovi vizuelno rigidan ¡ñ Tagovi koji opisuju izgled (CENTER, MARQUEE, FONT...=) NASTANAK CSS-a ¡ñ CILJ - pobolj?ati prezentacione mogu?nosti HTML-a ¡ñ CILJ - odvojiti strukturu od izgleda dokumenta
  • 22. CSS OSNOVE <h2>Figure can be more than image</h2> <p>Another common misconception regarding <figure> is that it can only be used for images. This isn¡¯t the cas A <figure> could be video, audio, a chart, a quote, a table, a block of code, a piece of prose, or any combination of these and much more besides. </p> <h2>Don¡¯t include unnecessary type attributes</h2> <p>This is probably the most common problem we see in HTML5 Gallery submissions. While it isn¡¯t really a mistake, I believe it¡¯s best practice to avoid this pattern.</p> <p>In HTML5, there¡¯s no need to include the type attribute on <script> and <style> elements.</p> H2
  • 23. CSS OSNOVE Tag H2 Svojstvo Boja Vrednost Zlatna h2 { color: gold; } CSS DEKLARACIJA Separator
  • 24. CSS OSNOVE - BACKGROUND h1 { color : gold; } p { background-color: red; color : white; }
  • 25. CSS OSNOVE - ID h1 { color : gold; } p#common-problem { background-color: red; color : white; } <p id=¡±common-problem¡±>This is probably the most common problem we see in HTML5 Gallery submissions. While it isn¡¯t really a mistake, I believe it¡¯s best practice to avoid this pattern.</p> <p>In HTML5, there¡¯s no need to include the type attribute on script and style elements.</p> IDENTIFIKATOR - #ID
  • 26. CSS OSNOVE - KLASE KLASE ELEMENATA h1 { color : gold; } p.important { background-color: red; color : white; } CSS KLASA: .class
  • 27. CSS OSNOVE - KLASE KLASE ELEMENATA h1 { color : gold; } p.important { background-color: red; color : white; } CSS KLASA: .class <p class=¡±important¡±>In HTML5, there¡¯s no need to include the type attribute on script and style elements.</p>
  • 28. CSS OSNOVE TAGOVI ¡°SA STILOM¡± body { background-color:grey; } section#content{ background-color: #FFF; color:silver; } .main{ color:black; } ...JEDNIM IMENOM SE U CSS-u ZOVU: SELEKTORI!
  • 29. CSS OSNOVE - PISANJE U HTML KODU <!DOCTYPE html> <html> <head> <title>Web kurs - Startit Centar</title> <style> </style> </head> <body> <h1>Main Header</h1> <p>Example content</p> </body> </html> CSS KOD
  • 30. POVEZIVANJE CSS FAJLOVA <!DOCTYPE html> <html> <head> <title>Web kurs - Startit Centar</title> <link rel='stylesheet' type='text/css' href='style.css'> </head> <body> <h1>Main Header</h1> <p>Example content</p> </body> </html>
  • 31. VE?BA - UNAPREDITE SVOJ CV ! HEADER, NAV, UL, OL, LI, SECTION, ARTICLE, ASIDE, FOOTER BOJE: http://html-color-codes.info/color-names/ #ID, .class, color, background-color <!DOCTYPE html> <html> <head> <title>Web kurs - Beograd</title> <link rel='stylesheet' type='text/css' href='style.css'> </head> <body> <h1>Main Header</h1> <p>Example content</p> </body> </html>
  • 32. ¡ñ Zavr?iti sajt picerije ¡ñ Napraviti HTML novine sa sadr?ajem i #linkovima za kretanje po strani ¡ñ Napraviti svoj blog sa navigacijom i nekoliko ?lanaka sa tekstom i slikama ¡ñ BONUS: Prou?iti HTML tabele i napraviti raspored ?asova - 8 ?asova predavanja DOMA?I ZADATAK
  • 33. ¡ñ Mozilla Developer Network - ¡°How Web Works¡± ¡ñ Mozilla Developer Nework - ¡°Common questions on web development¡± ¡ñ Referentno ?tivo za HTML5 - HTML 5 Doctor ¡ñ Alat u kome je pravljena ova prezentacija u HTML-u - Google ºÝºÝߣs ¡ñ Demonstracija upotrebe i svestranosti CSS-a - CSS Zen Garden ¡ñ HTML Boje: http://html-color-codes.info/color-names/ KORISNI LINKOVI
  • 34. HVALA VAM NA PA?NJI! PITANJA?