tag:blogger.com,1999:blog-25955221007553904572024-03-04T21:34:05.126-08:00Škola Web Design-aTemplate Masterhttp://www.blogger.com/profile/18025621264333891656noreply@blogger.comBlogger5125tag:blogger.com,1999:blog-2595522100755390457.post-23726682878194323582012-02-12T07:06:00.000-08:002012-02-12T07:09:27.476-08:00Osnove HTML-a [4]<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglS74La1t7sQ5rAKGAxN_fUjTbj7Vuy1kM-MbK4J_T5LG6bJTpYrIeevBH_s1YWz518LHncz0BQ8rAG8bx8126q-bdHgFcozjjYQP35OmGHxvR2uYTKiF6l9BcBiKGizWbCYaMJEX-cpo/s1600/html-seo.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglS74La1t7sQ5rAKGAxN_fUjTbj7Vuy1kM-MbK4J_T5LG6bJTpYrIeevBH_s1YWz518LHncz0BQ8rAG8bx8126q-bdHgFcozjjYQP35OmGHxvR2uYTKiF6l9BcBiKGizWbCYaMJEX-cpo/s320/html-seo.jpg" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><br />
Danas počinjemo malo ozbiljnije sa HTML-om kao uvod u HTML 5<br />
Da napomenemo da je veoma važno da pogledate prethodne HTML tutorijale jer se više nećemo vraćati na osnove.<br />
Počinjemo sa listama<br />
<br />
<div style="text-align: center;"><b>LISTE U HTML-u</b></div><div style="text-align: center;"><br />
</div><hr />Danas koristimo 3 vrste listi , a to su :<br />
<br />
1 . Bullets lista koja izgleda ovako<br />
<br />
<ul><li>HTML</li>
<li>CSS</li>
</ul>Dok kod izgleda ovako<br />
<br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"><ul></span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"><li>HTML</li></span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"><li>CSS</li></span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"></ul></span> <br />
<span style="font-family: 'courier new'; font-size: x-small;"><br />
</span><br />
Znači otvaramo i zatvramo je sa <ul></ul> , a sadržaj obilježavamo sa <li></li><br />
<br />
2. Brojna lista koja izgleda ovako<br />
<ol><li>HTML</li>
<li>CSS</li>
</ol>Dok kod izgleda ovako<br />
<br />
<br />
<ol><br />
<li>HTML</li><br />
<li>CSS</li><br />
</ol><br />
<br />
Znači otvaramo je sa <ol></ol> , a sadržaj sa <li></li><br />
<br />
3. Definisana lista tj. lista koja je komentarisana i izgleda ovako<br />
<br />
<dl><dt>HTML</dt>
<dd>Ovo je prvi komentar</dd>
<dt>CSS</dt>
<dd>Ovo je drugi komentar</dd> </dl>Dok kod izgleda ovako<br />
<br />
<br />
<dl><br />
<dt>HTML</dt><br />
<dd>Ovo je prvi komentar</dd><br />
<dt>CSS</dt><br />
<dd>Ovo je drugi komentar</dd><br />
</dl><br />
<br />
Znači otvaramo i zatvaramo je sa <dl></dl> sadržaj otvaramo sa <dt></dt> , a komentar sa <dd></dd><br />
<br />
<hr /><div style="text-align: center;"><b>FORME U HMTL-u</b></div><div style="text-align: center;"><b><br />
</b></div><div style="text-align: left;">Forme se u HTML-u koriste sa prosleđivanje podataka serverima.</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Za kreiranje forme koristimo <form> element</div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Primjer :</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><form></div><div style="text-align: left;">Element</div><div style="text-align: left;"></form></div><div style="text-align: left;"><br />
</div><div style="text-align: left;">Primjer forme :</div><div style="text-align: left;"><br />
</div><div style="text-align: left;"><form>Ime : <input name="firstname" type="text" /><br />
<br />
Prezime: <input name="lastname" type="text" /></form></div><div style="text-align: center;"><br />
</div>Kod za ovu formu izgleda ovako<br />
<br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"><form></span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;">Ime: <input type="text" name="firstname" /><br /></span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;">Prezime: <input type="text" name="lastname" /></span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"></form></span> <br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"><br />
</span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;">Sa formama ćemo se detaljnije upoznati u kasnijim tutorijalima ovdje važno samo da naglasimo da se za forme koristi element <form></span><br />
<span style="background-color: black; font-family: 'courier new'; font-size: 13px;"><br />
</span><br />
<span style="font-family: 'courier new'; font-size: x-small;"><br />
</span><br />
<span style="font-family: 'courier new'; font-size: x-small;"><br />
</span><br />
<hr /><div style="text-align: center;"></div><b><u><br />
</u></b><br />
Kasnije ćemo se vraćati na ovo no sada krećemo sa HTML5 koji predstavlja budućnosti.Template Masterhttp://www.blogger.com/profile/18025621264333891656noreply@blogger.com0tag:blogger.com,1999:blog-2595522100755390457.post-21837669703024503532012-02-11T04:00:00.000-08:002012-02-11T04:00:48.413-08:00Osnove CSS-a [1]<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHvmnsQdr0hvXg1D75AaBI3ufzn4S_nFATXcDiGNrJWdl-9Rl0z1xzAUVcOSpWZ0uxxztgu6IEQmxmHWrDgPOcQJJ5r27oTxxIWhaB98gXCJ1sW17NBQbYOSsJACWTMey4-Guuaptk2WI/s1600/css.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHvmnsQdr0hvXg1D75AaBI3ufzn4S_nFATXcDiGNrJWdl-9Rl0z1xzAUVcOSpWZ0uxxztgu6IEQmxmHWrDgPOcQJJ5r27oTxxIWhaB98gXCJ1sW17NBQbYOSsJACWTMey4-Guuaptk2WI/s320/css.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;">Danas počinjemo sa CSS-om</div><div class="separator" style="clear: both; text-align: center;">CSS čini vaš rad sa HTML-om mnogo lakšim , a vašu stranicu mnogo ljepšom.</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;">Primjer je animacija u CSS-u</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;">Kod izgleda ovako (komentarisan)</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><hr /><br />
<br />
<br />
<br />
<br />
<br />
<center><br />
<div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both;"><html></div><div class="separator" style="clear: both;"><head> --> CSS kod ide u <head> dio koda</div><div class="separator" style="clear: both;"><style type="text/css"> --> Ovime otvaramo CSS dio kod</div><div class="separator" style="clear: both;">div -- > Ovim obilježavamo ovaj dio koda i koristiti cemo ga kasnije da ga pozovemo u HTML-u</div><div class="separator" style="clear: both;">{ --> Ovim pocinjemo ovaj dio CSS koda</div><div class="separator" style="clear: both;">width:100px; --> Širina</div><div class="separator" style="clear: both;">height:100px; --> Visina</div><div class="separator" style="clear: both;">background:red; --> Pozadina ce biti crvena</div><div class="separator" style="clear: both;">position:relative; --> Pozicija</div><div class="separator" style="clear: both;">animation:mymove 5s infinite; </div><div class="separator" style="clear: both;">-moz-animation:mymove 5s infinite; /*Firefox*/</div><div class="separator" style="clear: both;">-webkit-animation:mymove 5s infinite; /*Safari i Chrome*/</div><div class="separator" style="clear: both;">}</div><div class="separator" style="clear: both;"></div><div class="separator" style="clear: both;">@keyframes mymove --> kretanje animacije</div><div class="separator" style="clear: both;">{</div><div class="separator" style="clear: both;">from {left:0px;} --> Od čega počinje animacija</div><div class="separator" style="clear: both;">to {left:200px;} --> Gdje završava animacija</div><div class="separator" style="clear: both;">}</div><div class="separator" style="clear: both;"></div><div class="separator" style="clear: both;">@-moz-keyframes mymove /*Firefox*/</div><div class="separator" style="clear: both;">{</div><div class="separator" style="clear: both;">from {left:0px;}</div><div class="separator" style="clear: both;">to {left:200px;}</div><div class="separator" style="clear: both;">}</div><div class="separator" style="clear: both;"></div><div class="separator" style="clear: both;">@-webkit-keyframes mymove /*Safari i Chrome*/</div><div class="separator" style="clear: both;">{</div><div class="separator" style="clear: both;">from {left:0px;}</div><div class="separator" style="clear: both;">to {left:200px;}</div><div class="separator" style="clear: both;">}</div><div class="separator" style="clear: both;"></style> --> Završava CSS kod</div><div class="separator" style="clear: both;"></head></div><div class="separator" style="clear: both;"><body></div><div class="separator" style="clear: both;"></div><div class="separator" style="clear: both;"><p><b>napomena:</b> Ovaj primjer ne radi sa Internet Explorerom i Operom.</p></div><div class="separator" style="clear: both;"></div><div class="separator" style="clear: both;"><div></div> --> ovo je onaj dio koda kojim pozivamo CSS kod u ovom dijelu HTML-a</div><div class="separator" style="clear: both;"></div><div class="separator" style="clear: both;"></body></div><div class="separator" style="clear: both;"></html></div><div class="separator" style="clear: both;"></div></center><br />
<hr /><div class="separator" style="clear: both;">Kako to izgleda možete pogledati</div><div class="separator" style="clear: both;"><a href="http://novipocetak.comxa.com/test.html" target="_blank">OVDJE</a></div><br />
<hr /><div class="separator" style="clear: both; text-align: center;">Sada slijedeći kod</div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"></div><div class="separator" style="clear: both;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"></div><div class="separator" style="clear: both;"><html></div><div class="separator" style="clear: both;"><head></div><div class="separator" style="clear: both;"><style type="text/css"> </div><div class="separator" style="clear: both;">div</div><div class="separator" style="clear: both;">{</div><div class="separator" style="clear: both;">appearance:button; --> U kodu pozivamo komandu na button</div><div class="separator" style="clear: both;">-moz-appearance:button; /* Firefox */</div><div class="separator" style="clear: both;">-webkit-appearance:button; /* Safari i Chrome */</div><div class="separator" style="clear: both;">}</div><div class="separator" style="clear: both;"></style></div><div class="separator" style="clear: both;"></head></div><div class="separator" style="clear: both;"><body></div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;"><p><b>Note:</b> Internet Explorer i Opera ne podržavaju ovaj kod</p></div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;"><div>Vaš tekst</div> --> pozivamo se na kod iz CSS-a</div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;"></body></div><div class="separator" style="clear: both;"></html></div><div class="separator" style="clear: both;"></div><hr /><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;">Kako to izgleda možete pogledati <a href="http://novipocetak.comxa.com/test1.html" target="_blank">OVDJE</a></div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;">Kako apperance : možemo koristiti</div><div class="separator" style="clear: both;"><br />
</div><div class="separator" style="clear: both;"></div><div class="code notranslate" style="background-color: white; border-bottom-color: rgb(212, 212, 212); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(212, 212, 212); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(212, 212, 212); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(212, 212, 212); border-top-style: solid; border-top-width: 1px; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; padding-top: 5px; width: 622px;"><div style="border-bottom-color: rgb(212, 212, 212); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(212, 212, 212); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(212, 212, 212); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(212, 212, 212); border-top-style: solid; border-top-width: 1px; font-family: 'courier new'; font-size: 13px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; width: 612px;"><span style="color: red;"><b>appearance: normal|icon|window|button|menu|field;</b></span></div></div><br />
<br />
<div class="separator" style="clear: both;"></div><hr /><div class="separator" style="clear: both;"></div><br />
Eh sada kako sebi da olakšamo HTML kod<br />
Preko CSS-a ćemo podesiti boju ili sliku pozadine :)<br />
<br />
<br />
<div class="example_code notranslate" style="background-color: #e5eecc; border-bottom-color: rgb(212, 212, 212); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(212, 212, 212); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(212, 212, 212); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(212, 212, 212); border-top-style: solid; border-top-width: 1px; font-family: 'courier new'; font-size: 13px; padding-bottom: 4px; padding-left: 4px; padding-right: 4px; padding-top: 4px; width: 606px;">div<br />
{<br />
background:url(pozadina.gif) top left no-repeat,<br />
url(slikapozadine.gif) bottom left no-repeat,<br />
url(slikapozadine.gif) bottom right no-repeat;<br />
}</div><br class="Apple-interchange-newline" /><br />
<b><i><span style="color: blue;">U ovom tutorijalu smo koristili samo pokazne kodove , a kasnije nastavljamo sa pravim CSS tutorijalima.</span></i></b>Template Masterhttp://www.blogger.com/profile/18025621264333891656noreply@blogger.com0tag:blogger.com,1999:blog-2595522100755390457.post-39368888120601101252012-02-10T11:20:00.000-08:002012-02-10T11:27:29.325-08:00Osnove HTML-a [3]<div class="separator" style="clear: both; text-align: center;"><a href="http://www.ioslib.com/wp-content/uploads/2011/05/istockphoto_3022730-html-tags.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="275" src="http://www.ioslib.com/wp-content/uploads/2011/05/istockphoto_3022730-html-tags.jpg" width="320" /></a></div> Nastavljamo sa našim tutorijalima :D<br />
<br />
Danas ćemo proširiti naše znanje HTML-a do te granice da ćemo napraviti našu prvu stranicu ….. :)<br />
<br />
Početi ćemo sa onim što smo ostavili prošli put <br />
<br />
<br />
<br />
Linkovanje :D<br />
<br />
Primjer rečenice u kojoj ćemo koristiti linkovanje.<br />
<br />
<br />
<br />
Ukoliko želite kupiti automobil kliknite OVDJE<br />
<br />
<br />
<br />
Kako to izgleda u HTML-u ?<br />
<br />
<br />
<br />
Prošli put smo naučili koristiti <br />
<p></p><br />
<pre class="brush: html"></pre>Znači HTML kod izgleda ovako<br />
<br />
<br />
<br />
<pre class="brush: html">Ukoliko želite kupiti automobil kliknite <a href="http://www.blogger.com/autopijaca.ba">OVDJE</a></pre>Znači koristimo <br />
<br />
<pre class="brush: html"><a href="http://www.blogger.com/autopijaca.ba">vaš tekst </a>
</pre>Ukoliko želimo da se link otvori u novom prozoru koristiti ćemo target=”_blank” pa naš kod će sada izgledati ovako<br />
<br />
<pre class="brush: html">Ukoliko želite kupiti automobil kliknite <a href="http://www.blogger.com/autopijaca.ba" target="_blank">OVDJE</a></pre><br />
<br />
Sada ćemo proučiti kod :)<br />
<br />
<br />
<br />
<a href="" -- ovo je dio koji stranici govori gdje da vodi korisnika koji je kliknuo na link<br />
<br />
> - ne zaboravite da zatvorite tag no bez kose crte / jer još nismo završili sa vašim kodom tj ubacimo tekst<br />
<br />
</a> - e tek poslije teksta zatvaramo tag<br />
<br />
<br />
<br />
Sada nastavljamo dalje sa našim učenjem HTML-a<br />
<br />
<br />
<br />
Nastaviti ćemo sa odvajanjem teksta<br />
<br />
<br />
<br />
Ukoliko želimo razdvojiti npr naslov i tekst korizontalnom linijom koristiti ćemo <hr/><br />
<br />
<br />
<br />
Primjer koda<br />
<br />
<pre class="brush: html"><h3>Naslov</h3>
<hr/>
<p>Tekst koji je odvojen od naslov</p>
</pre><br />
<br />
<br />
<br />
Što izgleda ovako<br />
<br />
<h3>Naslov</h3><hr />Tekst koji je odvojen od naslova<br />
<br />
<br />
<br />
<br />
<br />
Ukoliko želimo prenijeti tekst iz jednog reda u drugi koristiti ćemo <br/> tag<br />
<br />
<br />
<br />
Primjer koda<br />
<br />
<pre class="brush: html"><p> Ovo je tekst u prvom redu <br/> ovo je tekst u drugom redu<br/> ovo je treći red <br/> i tako dalje..</p>
</pre><br />
<br />
Kako to izgleda<br />
<br />
Ovo je tekst u prvom redu <br />
ovo je tekst u drugom redu<br />
ovo je treći red <br />
i tako dalje..<br />
<br />
<br />
Također mislim da je važno da vam napomenem da naslove <h1> koristimo do <h6><br />
<br />
Sada ćete vidjeti kako to izgleda<br />
<br />
Kod koji ćemo sada koristiti izgleda ovako<br />
<pre class="brush: html"><h1>Naslov 1</h1>
<h3>Naslov 3</h3>
<h4>Naslov 4</h4>
<h5>Naslov 5</h5>
<h6>Naslov 6</h6>
</pre><div class="clear"></div><hr /><h1>Naslov 1</h1><h3>Naslov 3</h3><h4>Naslov 4</h4><h5>Naslov 5</h5><h6>Naslov 6</h6><hr /><br />
<div>Sada ćemo vidjeti koje sve tagove koristimo u paragrafima (<p></p>)</div><div><table class="reference" style="background-color: white; border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-collapse: collapse; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; color: black; font-family: verdana, helvetica, arial, sans-serif; font-size: 12px; width: 633px;"><tbody>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><b></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definište podebljani tekst</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><big></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše povećani tekst</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><var></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše varijablu </td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><i></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše "nakrivljeni" italic tekst</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><small></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše mali tekst</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><strong></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše pojačani tekst</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><code></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše kompjuterski "kod" tekst</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><cite></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše citat</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><adress></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše kontakt informacije autora teksta</td></tr>
<tr><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;"><del></td><td style="border-bottom-color: rgb(195, 195, 195); border-bottom-style: solid; border-bottom-width: 1px; border-image: initial; border-left-color: rgb(195, 195, 195); border-left-style: solid; border-left-width: 1px; border-right-color: rgb(195, 195, 195); border-right-style: solid; border-right-width: 1px; border-top-color: rgb(195, 195, 195); border-top-style: solid; border-top-width: 1px; padding-bottom: 3px; padding-left: 3px; padding-right: 3px; padding-top: 3px; vertical-align: top;">Definiše izbrisani tekst</td></tr>
</tbody></table></div><div><br />
</div><div>Sada ćemo malo raditi sa stilovima</div><div>Primjer koda</div><div><br />
</div><div><span style="background-color: red; font-family: 'courier new'; font-size: 13px;"><b><i><body style="background-color:red;"></i></b></span><br />
<span style="background-color: red; font-family: 'courier new'; font-size: 13px;"><b><i><h1 style="background-color:blue;">Naslov</h1></i></b></span><br />
<b><i><span style="background-color: red; font-family: 'courier new'; font-size: 13px;"><p style="background-color:green;color:red</span><span style="background-color: red; font-family: 'courier new'; font-size: 13px;">d;">Par</span><span style="background-color: red; font-family: 'courier new'; font-size: 13px;">r</span><span style="background-color: red; font-family: 'courier new'; font-size: 13px;">agraf</p></span></i></b></div><div><span style="font-family: 'courier new'; font-size: x-small;"><br />
</span></div><br />
<br />
Prva linija koda definiše da će pozadina biti crvena<br />
Druga linija kaže da će pozadina naslova biti plava<br />
Treća linija kaže da će pozadina paragrafa biti zelena , a tekst crven.<br />
<br />
Kako to izgleda ?<br />
<br />
<br />
<h1 style="background-color: blue;">Naslov</h1><div style="background-color: green; color: red;">Paragraf</div><br />
Sada ste spremni da napravite svoju stranicu :D<br />
<br />
Ja ću vam dati primjer<br />
<br />
1. Otvorite Notepad++ (čiji download link imate u prvom tutorijalu)<br />
2.Unesite slijedeći (i uredite ga ako hoćete) kod (želimo da pozadina bude crna , a slova crvena)<br />
<pre class="brush: html"><html>
<head>
<body style="background-color:black;">
<h3 style="color:red">Naša prva stranica</h3>
<hr/>
<p>Naš prvi paragraf odvojen linijom</p> <!-- I komentiran -->
<b>Podebljana i <i>Nakrivljena</i> slova </b>
<center>
<p>Centrirani tekst</p>
</center>
<img src="http://i.imm.io/ggMc.jpeg"/>
<p>Naš prvi tekst koji nas vodi na facebook klikom <a href="http://facebook.com/">OVDJE </a></p>
</body>
</head>
</html>
</pre><br />
I sačuvajte ga kao test.html<br />
<br />
I eto vaše prve html stranice :D<br />
<br />
Otvorite test.html (klikom na test.html) i pogledajte vaš rad u vašem browseru :DTemplate Masterhttp://www.blogger.com/profile/18025621264333891656noreply@blogger.com0tag:blogger.com,1999:blog-2595522100755390457.post-77347347940019101632012-02-09T14:32:00.000-08:002012-02-10T11:21:39.578-08:00Osnove HTML-a [2]<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRKtkZWcFjXxRHog2sSnjmcmpwQpFVUncMCtrrfmWJ2TV-RwSuYxISgGtv1ONBOAVS1_dyIThZ6WJgX2m0sROMUpDIwjifWZtl2PDLh0rdq2Y_LkuFwoJFi0zqmVkoKkHeD47Ny5n_Rc/s1600/24.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="240" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTRKtkZWcFjXxRHog2sSnjmcmpwQpFVUncMCtrrfmWJ2TV-RwSuYxISgGtv1ONBOAVS1_dyIThZ6WJgX2m0sROMUpDIwjifWZtl2PDLh0rdq2Y_LkuFwoJFi0zqmVkoKkHeD47Ny5n_Rc/s320/24.jpg" width="320" /></a></div>U prethodnom tutorijali naučili smo osnove.<br />
Sada nastavljamo sa našom "HTML abecedom"<br />
Nemojte se obeshrabiti ;)<br />
Biti će ovo veoma lagano :D<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
Sada ćemo naučiti kako obojiti,podebljati slova.<br />
Kako ubaciti sliku.<br />
Kako odvojiti neki tekst.<br />
Kako "linkovati" tekst<br />
<br />
Svi mi volimo vidjeti ona lijepa obojena,podebljana,nakrivljena... slova :)<br />
<br />
Kako to postići ?<br />
<br />
U prehodnom tutorijali naučili smo koristiti <p> - paragraf<br />
Ukoliko želimo obojiti slova u crveno postići ćemo to ovako<br />
<pre class="brush: html"><p style="color:red"> Ova slova su crvena </p>
</pre><br />
<p style= --> Znači naglašavamo da će to biti stil paragrafa<br />
"color:red" --> U prevodu boja:crvena<br />
<br />
Sada želimo podebljati slova<br />
Za podebljavanje slova u HTML-u koristimo<br />
<b> --> Neka vas asocira na englesku riješ "Big" (veliko) tako ćemo lakše zapamtiti ovaj tag<br />
Primjer<br />
<pre class="brush: html"><b>Ova rečenica je podebljana</b>
</pre>a šta ako želimo podebljanu riječ u paragrafu ?<br />
<pre class="brush: html"><p>Ova rečenica ima <b>podebljanu</b> riječ </p>
</pre>Za "nakrivljena" ili "italic" slova koristimo tag<br />
<i><br />
<br />
Primjer<br />
<pre class="brush: html"><i>Ova rečenica je iskrivljena xD </i>
</pre>Ukoliko želimo dodati neku sliku koristimo tag<br />
<br />
<img> --> Neka vas podsjeća na englesku riječ "Image" (slika)<br />
<br />
eh sada krećemo sa malo težim :D<br />
<pre class="brush: html"><img src="link vaše slike"/>
</pre><img src= --> Znači izvor vaše slike<br />
"link vaše slike" --> Iz kojeg će izvora stranica preuzeti vašu sliku<br />
/> --> Zatvaramo tag<br />
<br />
Dali je ovo teško ???<br />
Možda i jeste pa ćemo zato linkanje teksta ostaviti za slijedeći put :DTemplate Masterhttp://www.blogger.com/profile/18025621264333891656noreply@blogger.com0tag:blogger.com,1999:blog-2595522100755390457.post-69783777240654339442012-02-09T14:02:00.000-08:002012-02-10T11:22:07.922-08:00Osnove HTML-a [1]<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNsnzYXTFFuUtKS2hVy-OzfKr6-4yGwhyDQHaz65Dv3D_fM4WHi_zWfWDoqV2r0oB6bXlOV3ps_ZAxhsUmOHlmar3AMc_E3sPSEO3MKb_w9Gf53-ubTuuJ3towpAbZct7UjtCYwHCl3U/s1600/html.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="228" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUNsnzYXTFFuUtKS2hVy-OzfKr6-4yGwhyDQHaz65Dv3D_fM4WHi_zWfWDoqV2r0oB6bXlOV3ps_ZAxhsUmOHlmar3AMc_E3sPSEO3MKb_w9Gf53-ubTuuJ3towpAbZct7UjtCYwHCl3U/s320/html.jpg" width="320" /></a></div><br />
<br />
<br />
HTML je osnova 95% stranica na internetu i temelj je svakog web designer-a.<br />
<br />
Sada ćemo se okrenuti samom kodu i pojasniti šta svaka linija koda znači.<br />
<br />
Ovo je VAŽNO da naučite jer je to osnova za dalje....<br />
<br />
<pre class="brush: html"><!--> </pre>Ovo je komentar koji ubacujemo u neke dijelove koda kako bi nama bilo lakše da se kasnije snađemo u kodu.<br />
Primjer:<br />
<pre class="brush: html"><h1>Ovo je naslov<h1> <!--Ovo je naslov -->
<p>Paragraf</p> <!-- Ovo je paragraf -->
</pre><br />
Kako biste sami testirali ovaj primjer sknite Notepad ++ <a href="http://notepad-plus-plus.org/" target="_blank">ovdje</a> i unesite ovaj kod nakon čega ga sačuvajte kao Test.html<br />
<br />
Nastavljamo dalje sa tutorijalom ;)<br />
Nadam se da vam ovo nije bilo teško uff ;) pa baš je težak taj HTML xD<br />
<br />
Eh sada šta svaki html kod mora imati.<br />
Svaki html koda mora imati slijedeći dio koji vaš browser(chrome,mozzila,opera..) čita ....<br />
<br />
<html> --> Označava da počinjemo sa html kodom<br />
</html> ---> Svaki otvoreni tag se mora zatvoriti , a za to koristimo "/"<br />
<head> Ovo je funkcionalni dio koda koji mi ne vidimo ali on obavlja posao "iza scene" ;)<br />
</head><br />
<body> Ovdje postavljamo onaj dio koda koji će se vidjeti na stranici<br />
</body><br />
<title> Ovo je naslov stranice<br />
</titile><br />
<br />
Primjer stranice :<br />
<pre class="brush: html"><html>
<head>
<title>Naslov</title>
<body>
<h1> Ovo je naslov </h1> <!-- Koji i komentiramo ;) -->
<p>Ovdje ćemo napisati nešto :D </p>
</body>
</head>
</html>
</pre><br />
Ovo je bio naš prvi tutorijal i šta smo naučili.<br />
<br />
Naučili smo strukturu html-a i počeli sa njhovim osnovama.<br />
Da ponovimo gradimo<br />
Strukturu čine<br />
<pre class="brush: html"><html>
<head>
<body>
</pre>Naslov stranice postavljamo pomoći<br />
<pre class="brush: html"><title>
</pre>Naslov teksta i paragraf postavljamo pomoću<br />
<pre class="brush: html"><h1>
<p>
</pre>A tagove zatvaramo kosom crtom "/"<br />
<br />
Nadam se da ste uživali :D<br />
<br />
Nešto vam nije jasno ???<br />
Slobodno komentirajte :DTemplate Masterhttp://www.blogger.com/profile/18025621264333891656noreply@blogger.com0