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

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

<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>

ASIDE
SECTION

<aside>
<h1>On the radar</h1>
<article> … </article>
</aside>
<ul>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>

<section>
<hr>
<a href=”read-more.html”>Read more stories</a>
<hr>
</section>

NAV - glavna navigacija sajta

<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: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

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 {
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 {
color : white;
}
CSS KLASA: .class

CSS OSNOVE - KLASE
KLASE
ELEMENATA
h1 {
color : gold;
}
p.important {
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>
</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>
</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>
</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?

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

Recommended

Recommended

More Related Content

More from Milovan Jovičić

More from Milovan Jovičić (6)

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