. Škola Web Design-a

Preporučujemo

Najnoviji tutorijali

nedjelja, 12. veljače 2012.

Osnove HTML-a [4]

Objavio/la Template Master u 07:06 Oznake: , , 0 komentari


Danas počinjemo malo ozbiljnije sa HTML-om kao uvod u HTML 5
Da napomenemo da je veoma važno da pogledate prethodne HTML tutorijale jer se više nećemo vraćati na osnove.
Počinjemo sa listama

LISTE U HTML-u

Danas koristimo 3 vrste listi , a to su :

1 . Bullets lista koja izgleda ovako

  • HTML
  • CSS
Dok kod izgleda ovako

<ul>
<li>HTML</li>
<li>CSS</li>
</ul>


Znači otvaramo i zatvramo je sa <ul></ul> , a sadržaj obilježavamo sa <li></li>

2. Brojna lista koja izgleda ovako
  1. HTML
  2. CSS
Dok kod izgleda ovako


<ol>
<li>HTML</li>
<li>CSS</li>
</ol>

Znači otvaramo je sa <ol></ol> , a sadržaj sa <li></li>

3. Definisana lista tj. lista koja je komentarisana i izgleda ovako

HTML
Ovo je prvi komentar
CSS
Ovo je drugi komentar
Dok kod izgleda ovako


<dl>
<dt>HTML</dt>
<dd>Ovo je prvi komentar</dd>
<dt>CSS</dt>
<dd>Ovo je drugi komentar</dd>
</dl>

Znači otvaramo i zatvaramo je sa <dl></dl> sadržaj otvaramo sa <dt></dt> , a komentar sa <dd></dd>

FORME U HMTL-u

Forme se u HTML-u koriste sa prosleđivanje podataka serverima.

Za kreiranje forme koristimo <form> element

Primjer :

<form>
Element
</form>

Primjer forme :

Ime :

Prezime:

Kod za ovu formu izgleda ovako

<form>
Ime: <input type="text" name="firstname" /><br />
Prezime: <input type="text" name="lastname" />
</form>


Sa formama ćemo se detaljnije upoznati u kasnijim tutorijalima ovdje važno samo da naglasimo da se za forme koristi element <form>








Kasnije ćemo se vraćati na ovo no sada krećemo sa HTML5 koji predstavlja budućnosti. more.

subota, 11. veljače 2012.

Osnove CSS-a [1]

Objavio/la Template Master u 04:00 Oznake: , , , 0 komentari
Danas počinjemo sa CSS-om
CSS čini vaš rad sa HTML-om mnogo lakšim , a vašu stranicu mnogo ljepšom.

Primjer je animacija u CSS-u

Kod izgleda ovako (komentarisan)








<html>
<head> --> CSS kod ide u <head> dio koda
<style type="text/css"> --> Ovime otvaramo CSS dio kod
div -- > Ovim obilježavamo ovaj dio koda i koristiti cemo ga kasnije da ga pozovemo u HTML-u
{ --> Ovim pocinjemo ovaj dio CSS koda
width:100px; --> Širina
height:100px; --> Visina
background:red; --> Pozadina ce biti crvena
position:relative; --> Pozicija
animation:mymove 5s infinite; 
-moz-animation:mymove 5s infinite; /*Firefox*/
-webkit-animation:mymove 5s infinite; /*Safari i Chrome*/
}
@keyframes mymove --> kretanje animacije
{
from {left:0px;} --> Od čega počinje animacija
to {left:200px;} --> Gdje završava animacija
}
@-moz-keyframes mymove /*Firefox*/
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari i Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style> --> Završava CSS kod
</head>
<body>
<p><b>napomena:</b> Ovaj primjer ne radi sa Internet Explorerom i Operom.</p>
<div></div> --> ovo je onaj dio koda kojim pozivamo CSS kod u ovom dijelu HTML-a
</body>
</html>

Kako to izgleda možete pogledati
OVDJE

Sada slijedeći kod

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
div
{
appearance:button; --> U kodu pozivamo komandu na button
-moz-appearance:button; /* Firefox */
-webkit-appearance:button; /* Safari i Chrome */
}
</style>
</head>
<body>

<p><b>Note:</b> Internet Explorer  i Opera ne podržavaju ovaj kod</p>

<div>Vaš tekst</div> --> pozivamo se na kod iz CSS-a

</body>
</html>

Kako to izgleda možete pogledati OVDJE

Kako apperance : možemo koristiti

appearance: normal|icon|window|button|menu|field;



Eh sada kako sebi da olakšamo HTML kod
Preko CSS-a ćemo podesiti boju ili sliku pozadine :)


div
{
background:url(pozadina.gif) top left no-repeat,
url(slikapozadine.gif) bottom left no-repeat,
url(slikapozadine.gif) bottom right no-repeat;
}


U ovom tutorijalu smo koristili samo pokazne kodove , a kasnije nastavljamo sa pravim CSS tutorijalima. more.

petak, 10. veljače 2012.

Osnove HTML-a [3]

Objavio/la Template Master u 11:20 Oznake: , 0 komentari
 Nastavljamo sa našim tutorijalima :D

Danas ćemo proširiti naše znanje HTML-a do te granice da ćemo napraviti našu prvu stranicu ….. :)

Početi ćemo sa onim što smo ostavili prošli put



Linkovanje :D

Primjer rečenice u kojoj ćemo koristiti linkovanje.



Ukoliko želite kupiti automobil kliknite OVDJE



Kako to izgleda u HTML-u ?



Prošli put smo naučili koristiti
<p></p>
Znači HTML kod izgleda ovako








Ukoliko želite kupiti automobil kliknite OVDJE
Znači koristimo 




vaš tekst 

Ukoliko želimo da se link otvori u novom prozoru koristiti ćemo target=”_blank” pa naš kod će sada izgledati ovako




Ukoliko želite kupiti automobil kliknite OVDJE




Sada ćemo proučiti kod :)







<a href="" -- ovo je dio koji stranici govori gdje da vodi korisnika koji je kliknuo na link



> - ne zaboravite da zatvorite tag no bez kose crte / jer još nismo završili sa vašim kodom tj ubacimo tekst



</a> - e tek poslije teksta zatvaramo tag







Sada nastavljamo dalje sa našim učenjem HTML-a







Nastaviti ćemo sa odvajanjem teksta







Ukoliko želimo razdvojiti npr naslov i tekst korizontalnom linijom koristiti ćemo <hr/>







Primjer koda




<h3>Naslov</h3>
<hr/>
<p>Tekst koji je odvojen od naslov</p>









Što izgleda ovako




Naslov
Tekst koji je odvojen od naslova











Ukoliko želimo prenijeti tekst iz jednog reda u drugi koristiti ćemo <br/> tag







Primjer koda




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





Kako to izgleda



Ovo je tekst u prvom redu 

ovo je tekst u drugom redu

ovo je treći red 

i tako dalje..





Također mislim da je važno da vam napomenem da naslove <h1> koristimo do <h6>



Sada ćete vidjeti kako to izgleda



Kod koji ćemo sada koristiti izgleda ovako


<h1>Naslov 1</h1>
<h3>Naslov 3</h3>
<h4>Naslov 4</h4>
<h5>Naslov 5</h5>
<h6>Naslov 6</h6>

Naslov 1
Naslov 3
Naslov 4
Naslov 5
Naslov 6



Sada ćemo vidjeti koje sve tagove koristimo u paragrafima (<p></p>)


<b>Definište podebljani tekst


<big>Definiše povećani tekst


<var>Definiše varijablu 


<i>Definiše "nakrivljeni" italic tekst


<small>Definiše mali tekst


<strong>Definiše pojačani tekst


<code>Definiše kompjuterski "kod" tekst


<cite>Definiše citat


<adress>Definiše kontakt informacije autora teksta


<del>Definiše izbrisani tekst





Sada ćemo malo raditi sa stilovima
Primjer koda



<body style="background-color:red;">

<h1 style="background-color:blue;">Naslov</h1>

<p style="background-color:green;color:redd;">Parragraf</p>







Prva linija koda definiše da će pozadina biti crvena

Druga linija kaže da će pozadina naslova biti plava

Treća linija kaže da će pozadina paragrafa biti zelena , a tekst crven.



Kako to izgleda ?






Naslov
Paragraf


Sada ste spremni da napravite svoju stranicu :D



Ja ću vam dati primjer



1. Otvorite Notepad++ (čiji download link imate u prvom tutorijalu)

2.Unesite slijedeći (i uredite ga ako hoćete) kod (želimo da pozadina bude crna , a slova crvena)


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



I sačuvajte ga kao test.html



I eto vaše prve html stranice :D



Otvorite test.html (klikom na test.html) i pogledajte vaš rad u vašem browseru :D

more.





















            

          

          

        

četvrtak, 9. veljače 2012.


          

        







Osnove HTML-a [2]





Objavio/la
Template Master


u
14:32


Oznake:
,



0
komentari


















U prethodnom tutorijali naučili smo osnove.

Sada nastavljamo sa našom "HTML abecedom"

Nemojte se obeshrabiti ;)

Biti će ovo veoma lagano :D



















Sada ćemo naučiti kako obojiti,podebljati slova.

Kako ubaciti sliku.

Kako odvojiti neki tekst.

Kako "linkovati" tekst



Svi mi volimo vidjeti ona lijepa obojena,podebljana,nakrivljena... slova :)



Kako to postići ?



U prehodnom tutorijali naučili smo koristiti <p> - paragraf

Ukoliko želimo obojiti slova u crveno postići ćemo to ovako


<p style="color:red"> Ova slova su crvena </p>



<p style= --> Znači naglašavamo da će to biti stil paragrafa

"color:red" --> U prevodu boja:crvena



Sada želimo podebljati slova

Za podebljavanje slova u HTML-u koristimo

<b> --> Neka vas asocira na englesku riješ "Big" (veliko) tako ćemo lakše zapamtiti ovaj tag

Primjer


<b>Ova rečenica je podebljana</b>

a šta ako želimo podebljanu riječ u paragrafu ?


<p>Ova rečenica ima <b>podebljanu</b> riječ </p>

Za "nakrivljena" ili "italic" slova koristimo tag

<i>



Primjer


<i>Ova rečenica je iskrivljena xD </i>

Ukoliko želimo dodati neku sliku koristimo tag



<img> --> Neka vas podsjeća na englesku riječ "Image" (slika)



eh sada krećemo sa malo težim :D


<img src="link vaše slike"/>

<img src= --> Znači izvor vaše slike

"link vaše slike" --> Iz kojeg će izvora stranica preuzeti vašu sliku

/> --> Zatvaramo tag



Dali je ovo teško ???

Možda i jeste pa ćemo zato linkanje teksta ostaviti za slijedeći put :D

more.



























Osnove HTML-a [1]





Objavio/la
Template Master


u
14:02


Oznake:
,



0
komentari
























HTML je osnova 95% stranica na internetu i temelj je svakog web designer-a.



Sada ćemo se okrenuti samom kodu i pojasniti šta svaka linija koda znači.



Ovo je VAŽNO da naučite jer je to osnova za dalje....




<!-->  
Ovo je komentar koji ubacujemo u neke dijelove koda kako bi nama bilo lakše da se kasnije snađemo u kodu.

Primjer:


<h1>Ovo je naslov<h1> <!--Ovo je naslov -->
<p>Paragraf</p> <!-- Ovo je paragraf -->



Kako biste sami testirali ovaj primjer sknite Notepad ++ ovdje i unesite ovaj kod nakon čega ga sačuvajte kao Test.html



Nastavljamo dalje sa tutorijalom ;)

Nadam se da vam ovo nije bilo teško uff ;) pa baš je težak taj HTML xD



Eh sada šta svaki html kod mora imati.

Svaki html koda mora imati slijedeći dio koji vaš browser(chrome,mozzila,opera..) čita ....



<html> --> Označava da počinjemo sa html kodom

</html> ---> Svaki otvoreni tag se mora zatvoriti , a za to koristimo "/"

<head>  Ovo je funkcionalni dio koda koji mi ne vidimo ali on obavlja posao "iza scene" ;)

</head>

<body> Ovdje postavljamo onaj dio koda koji će se vidjeti na stranici

</body>

<title> Ovo je naslov stranice

</titile>



Primjer stranice :


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



Ovo je bio naš prvi tutorijal i šta smo naučili.



Naučili smo strukturu html-a i počeli sa njhovim osnovama.

Da ponovimo gradimo

Strukturu čine


<html>
<head>
<body>

Naslov stranice postavljamo pomoći


<title>

Naslov teksta i paragraf postavljamo pomoću


<h1>
<p>

A tagove zatvaramo kosom crtom "/"



Nadam se da ste uživali :D



Nešto vam nije jasno ???

Slobodno komentirajte :D

more.





















        

      










Pretplati se na:
Postovi (Atom)