html, css i javascript web tehnologije - 2. predavanje - startit.rs
TRANSCRIPT
HTML, CSS i JAVASCRIPTWEB 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 STRANEHEADER
CONTENT
FOOTER
<body>
</body>
CONTENT
ARTICLE element
ELEMENTI ZA UREĐIVANJE STRANE
<article> <img src=”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=”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:[email protected]’>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, BODYHEADER, 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 case. 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 - BACKGROUNDh1 {
color : gold;}
p {background-color: red;color : white;
}
CSS OSNOVE - IDh1 {
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
KLASEELEMENATA
h1 {color : gold;
}
p.important {background-color: red;color : white;
}
CSS KLASA: .class
CSS OSNOVE - KLASE
KLASEELEMENATA
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 OSNOVETAGOVI “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 Slides
● 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?