Ovaj tutorial je namijenjen za ljude koji žele početi koristiti HTML i CSS, i za one koji nikada prije nisu koristili.
Prvo ćemo početi sa HTML-om
- Uvod u HTML
HTML (Hypertext Markup Language) je jezik za oblikovanje web dokumenata, dakle, prikaz web dokumenata. To je jezik koji daje tako reći 'upute' pregledniku kako prikazati slike, tablice, tekst. I moram napomenuti da HTML nije skriptni, niti programski jezik!
HTML oznake pišemo u jednostavnom text editoru, stvar je vaše volje, ja vam preporučujem da koristite notepad++. Možete ga skinuti sa oficijelne stranice : http://www.notepad-plus-plus.org/download/v6.1.5.html
Svaki HTML dokument se sastoji iz tagova ili oznaka, svaki tagovi (oznake) imaju svoje nazive. Sav sadržaj u HTML dokumentu se nalazi između tagova <html></html>.
Evo kako izgleda sam 'kostur' html dokumenta:
<html> --> Otvorili smo html tag na ovaj način
<head> --> Oznaka za header naše stranice
<title>Ovo je naslov </title> --> Oznaka za naslov naše stranice
</head>
<body> --> Između body tagova pišemo čitav naš kod, faktički sve što se nalazi na stranici se nalazi između ovih tagova.
</body>
<html>
U web pregledniku neće ništa prikazati, jer nismo ništa upisali između <body></body> tagova!!!
HTML dokument čuvamo sa ekstenzijom .html, u ovom slučaju sačuvajte dokument kao index.html.
Možete ga sačuvati gdje vam je volja, neće ništa promijeniti.
Sada ću vam pokazati jedne od najosnovnijih html tagova:
-Tagovi za oblikovanje teksta:
Bold <b> - Koristi se za podebljavanje slova.
Italic <i> - Koristi se za kosa slova.
Underline <u> - Koristi se za podvlačenje slova.
Primjer:
<html>
<head>
<title>Osnovni tagovi</title>
<body>
<b>Gamers.ba | najveća gamerska mreža na Blakanu</b><br>
<i>Gamers.ba | najveća gamerska mreža na Blakanu</i><br>
<u>Gamers.ba | najveća gamerska mreža na Blakanu</u>
</body>
</html>
U web pregledniku :
Kao što vidite, koristio sam i <br>(line breaker) tagove, koji služe za prelazak u novi red.
Naslov <h1> - Naslovi se koriste da vi istakli najbitnije dijelove na web stranici.
Postoje <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - h1 - najveći naslov, h6 - najmanji
<html>
<head>
<title>Osnovni tagovi</title>
<body>
<h1>Gamers.ba</h1><hr>
<h2>Gamers.ba</h2><hr>
<h3>Gamers.ba</h3><hr>
<h4>Gamers.ba</h4><hr>
<h5>Gamers.ba</h5><hr>
<h6>Gamers.ba</h6>
</body>
</html>
Ovdje sam, kao što vidite koristio <hr> tagove, koji služe za postavljanje linije ispod taga.
U web pregledniku:
Paragraf (odlomak) <p> - Odlomci služe za određivanje početka i kraja nekog teksta.
U web pregledniku će izlgledati ovako:
Ovo je prvi odlomak.
Ovo je drugi odlomak.
A u HTML ovako:
<p>Ovo je prvi odlomak</p>
<p>Ovo je drugi odlomak</p>
Link <a> - Služi za kreiranje linka, koji služi kao povez sa drugom stranicom.
U web pregledniku izgleda ovako:
http://www.gamers.ba
Dok u html-u izgleda ovako :
<a href="http://www.gamers.ba">www.gamers.ba</a>
Sekcije <div> - Oni predstavljaju jednostavno 'kontenjere' koji sadrže slike, tekst, video itd...Ne morate se previše zamarati oko ovog taga za početak. jer će vam mnogo biti jasnije dok budemo obrađivali CSS osnove.
U web pregledniku izgleda ovako:
U html-u izgleda ovako:
<div>Gamers.ba | najveća gamerska mreža na Balkanu, učimo zajedno html</div>
Slika [b]<img></b> - Koristi se za umetanje slike u html dokument.
U pretraživaču izgleda ovako:
U html-u ovako:
<img src="slike/gamers.jpg" />
Da bi slika bila prikazana u pregledniku, potrebno je da kreirate folder u kojem će te morati staviti vaš index.html i kreirati podfolder u kojem će te staviti vašu sliku.
Sve html tagove možete pronaći na sljedećem linku:
http://www.quackit.com/html/tags/
U sljedećem tutorijalu ćemo obraditi CSS, kako povezati CSS sa HTML-om itd...
Prvo ćemo početi sa HTML-om
- Uvod u HTML
HTML (Hypertext Markup Language) je jezik za oblikovanje web dokumenata, dakle, prikaz web dokumenata. To je jezik koji daje tako reći 'upute' pregledniku kako prikazati slike, tablice, tekst. I moram napomenuti da HTML nije skriptni, niti programski jezik!
HTML oznake pišemo u jednostavnom text editoru, stvar je vaše volje, ja vam preporučujem da koristite notepad++. Možete ga skinuti sa oficijelne stranice : http://www.notepad-plus-plus.org/download/v6.1.5.html
Svaki HTML dokument se sastoji iz tagova ili oznaka, svaki tagovi (oznake) imaju svoje nazive. Sav sadržaj u HTML dokumentu se nalazi između tagova <html></html>.
Evo kako izgleda sam 'kostur' html dokumenta:
<html> --> Otvorili smo html tag na ovaj način
<head> --> Oznaka za header naše stranice
<title>Ovo je naslov </title> --> Oznaka za naslov naše stranice
</head>
<body> --> Između body tagova pišemo čitav naš kod, faktički sve što se nalazi na stranici se nalazi između ovih tagova.
</body>
<html>
U web pregledniku neće ništa prikazati, jer nismo ništa upisali između <body></body> tagova!!!
HTML dokument čuvamo sa ekstenzijom .html, u ovom slučaju sačuvajte dokument kao index.html.
Možete ga sačuvati gdje vam je volja, neće ništa promijeniti.
Sada ću vam pokazati jedne od najosnovnijih html tagova:
-Tagovi za oblikovanje teksta:
Bold <b> - Koristi se za podebljavanje slova.
Italic <i> - Koristi se za kosa slova.
Underline <u> - Koristi se za podvlačenje slova.
Primjer:
<html>
<head>
<title>Osnovni tagovi</title>
<body>
<b>Gamers.ba | najveća gamerska mreža na Blakanu</b><br>
<i>Gamers.ba | najveća gamerska mreža na Blakanu</i><br>
<u>Gamers.ba | najveća gamerska mreža na Blakanu</u>
</body>
</html>
U web pregledniku :
Kao što vidite, koristio sam i <br>(line breaker) tagove, koji služe za prelazak u novi red.
Naslov <h1> - Naslovi se koriste da vi istakli najbitnije dijelove na web stranici.
Postoje <h1>, <h2>, <h3>, <h4>, <h5>, <h6> - h1 - najveći naslov, h6 - najmanji
<html>
<head>
<title>Osnovni tagovi</title>
<body>
<h1>Gamers.ba</h1><hr>
<h2>Gamers.ba</h2><hr>
<h3>Gamers.ba</h3><hr>
<h4>Gamers.ba</h4><hr>
<h5>Gamers.ba</h5><hr>
<h6>Gamers.ba</h6>
</body>
</html>
Ovdje sam, kao što vidite koristio <hr> tagove, koji služe za postavljanje linije ispod taga.
U web pregledniku:
Paragraf (odlomak) <p> - Odlomci služe za određivanje početka i kraja nekog teksta.
U web pregledniku će izlgledati ovako:
Ovo je prvi odlomak.
Ovo je drugi odlomak.
A u HTML ovako:
<p>Ovo je prvi odlomak</p>
<p>Ovo je drugi odlomak</p>
Link <a> - Služi za kreiranje linka, koji služi kao povez sa drugom stranicom.
U web pregledniku izgleda ovako:
http://www.gamers.ba
Dok u html-u izgleda ovako :
<a href="http://www.gamers.ba">www.gamers.ba</a>
Sekcije <div> - Oni predstavljaju jednostavno 'kontenjere' koji sadrže slike, tekst, video itd...Ne morate se previše zamarati oko ovog taga za početak. jer će vam mnogo biti jasnije dok budemo obrađivali CSS osnove.
U web pregledniku izgleda ovako:
U html-u izgleda ovako:
<div>Gamers.ba | najveća gamerska mreža na Balkanu, učimo zajedno html</div>
Slika [b]<img></b> - Koristi se za umetanje slike u html dokument.
U pretraživaču izgleda ovako:
U html-u ovako:
<img src="slike/gamers.jpg" />
Da bi slika bila prikazana u pregledniku, potrebno je da kreirate folder u kojem će te morati staviti vaš index.html i kreirati podfolder u kojem će te staviti vašu sliku.
Sve html tagove možete pronaći na sljedećem linku:
http://www.quackit.com/html/tags/
U sljedećem tutorijalu ćemo obraditi CSS, kako povezati CSS sa HTML-om itd...
Nije nabacan neki text ha hu !
