Loading...

This topic is locked, you cannot edit posts or make further replies.

HTML & CSS

Author Message
Biohazard Head Admin

User avatar

Registrovan: Dec 29, 2012
Broj postova: 940
Lokacija: Tuzla
Država:
Pohvalio: 93 x
Pohvaljen: 217 x
Online: 23d 17h 57m 27s
Post HTML & CSS   29 Jul 2018, 09:58
Šta je potrebno da počnem sa radom u HTML i CSS?

Kako bismo započeli sa radom i mogli dalje da pratimo ovaj tutoraijal potreban nam je neki od programa. Ja Vam savetujem upotrebu Notepad++, ali možete koristiti i Notepad ako ste Windows korisnici, ili Geany ukoliko imate Linux sistem.

Sve ono što ćemo raditi u gore navedenim programima biće vidljivo putem internet pretraživača tako da su nam potrebni Mozilla firefox i Google Chrome. Ja volim da koristim ova dva browser-a iz razloga jer smatram da ukoliko Vam je u njima sve kako treba nećete imati problema sa bilo kojim drugim. Naime, browser-i mogu isti sadržaj koji pišemo u našem notepad ili notepad++ programu da prikažu na različiti način. tj. to se neće suštiniski razlikovati ali primetićete da sitne razlike postoje, te se one mogu i odnositi na Vaše buduće korisnike sajta.

Sve ono što ćemo raditi biće u lokalu, tj. izrada sajta neće biti vidljiva na web-u iz razloga jer nam je za postavljanje na internet potreban hosting i domen.

Pa da krenemo…

Prvo ćemo otvoriti našu notepad ili notepad++ stranicu i sačuvati je kao index.html ( File -> Save As… -> u polju file name upisati index.html -> Save ). Bitno je da se ova stranica zove baš ovako jer se kasnije prilikom postavljanja našeg sajta ova stranica tretiraće se kao početna, tj. na nju će se nadovezivati sve ostale.

Nakon toga još jednom ćemo ponoviti proces ali ovoga puta našu stranicu čuvamo pod nazivom style.css ( File -> Save As… -> u polju file name upisati style.css -> Save)

Bilo bi dobro da oba ova fajla sačuvate u jednom istom folderu koji ćete kreirati samo za ovaj sajt.

Sada otvorite index.html stranicu (desni klik na ikonicu -> Edit with notepad++) kako bismo napravili prve korake i počeli da kucamo naše prve kodove.


Kako da pišem HTML tagove (oznake)?

Šta god da pišemo mora biti unutar tagova ( npr. „<p>Ovo je neki paragraf</p>“ – ovo je tag za pisanje paragrafa). Kao što vidite ovaj paragraf ima svoj otvarajući tag <p> i zatvarajući </p>, a ono što se nalazi izmedju njih je zapravo tekst pisan u paragrafu koji će biti prikazan na sajtu.

Primer:

<p> Ovo je neki paragraf </p>

Kao što već rekoh ovo je tag za paragraf, a neki od onih koji se najčešće koriste su <div></div>, <span> </span>, naslovi <h1></h1> <h2></h2> … <h6></h6>, kao i mnogi drugi.

Sada kada se vratimo na našu ikonicu index.html i otvorimo je u browseru videćemo prvi tekst koji smo napisali.

Ono sa čime ćete se sigurno susretati je tag unutar taga. Recimo:

<div><p> Ovo je neki paragraf </p></div>

Ovo je pravilan način za upisivanje i on nam govori da se kompletan tag <p></p> nalazi unutar taga <div></div>, tako da nemojte koristiti nepravile varijante kao što su:


<div><p> Ovo je neki paragraf </div></p> ili

<p><div> Ovo je neki paragraf </p></div>


Tagovi <p> i </p> ne moraju da stoje u istom redu i to nema nikakvog uticaja na tag, tj. možete ih pisati onako kako smatrate da je Vama preglednije. Recimo:

<p>

Ovo je neki paragraf

</p>



Imam i jednu napomenu koju bih želeo da pomenem dok smo još na samom početku. Uvek čuvajte sve ono što promenite u vašim dokumentima, iz razloga jer browser-i neće prikazati rezultate promene koju ste vršili ukoliko nije sačuvana. Trudite se da Vam u naviku predje korišćenje prečica ukoliko želite da Vam izrada sajtova kasnije bude lakša. Prečice na tastaturi su: save -> ctrl+s, copy -> ctrl + c, paste -> ctrl+v, cut -> ctrl+x, undo ->ctrl + z, bold -> ctrl + b, find -> ctrl +f…

_________________
Once you need less, you'll have more.


Biohazard Head Admin

User avatar

Registrovan: Dec 29, 2012
Broj postova: 940
Lokacija: Tuzla
Država:
Pohvalio: 93 x
Pohvaljen: 217 x
Online: 23d 17h 57m 27s
Post Re: HTML & CSS   30 Jul 2018, 19:08
HTML <!DOCTYPE> deklaracija

U ovom tutorijalu trebaće nam deklaracija i za početak prekucajte kod ispod u Vaš index dokument ( ukoliko Vam je ostao predjašnji kod iz prošlog tutorijala“<p> Ovo je neki paragraf </p>“ izbrišite ga, pa potom prekucajte kod)
napomena:

mnogo je vazno da svaki kod rucno prekucate ukoliko vam je ovo sve novo
kod:

<!DOCTYPE html>

<html>

<head>

<title> Naslov dokumenta</title>

</head>

<body>

Sadrzaj dokumenta

</body>

<html>

Imamo nekoliko nejasnoća, a to su:

head – predstavlja glavu dokumenta. Ono što pišemo u ovom delu neće biti vidljivo na sajtu, ali obuhvata jako bitne kodove sa kojima ćemo se kroz lekcije upoznati.

title- predstavlja naslov stranice. Ovaj tag je neizostavan u dokumentu i karakteriše naslov u internet pretraživačima i sadrži do 60 karaktera.

body – predstavlja telo dokumenta. Ovo je sadržaj koji je vidljiv putem internet pretraživača.

Odredjivanje izgleda sajta

Prvo moramo da zamislimo sajt kako će izgledati i koliko će strana imati. Mi ćemo u tutorijalu imati 3 stranice, a to su:

Početna (Home) strana – ovo je stranica na koju će se sve ostalo nadovezivati,

Kontakt – gde će biti svi kontakt podaci koje želimo da pružimo

Linkovanje – gde ćemo linkovati na druge sajtove

A za fizički izgled izabraćemo strukturu sajta koja bi izgledala ovako:

Image


Ova struktura nam govori da ćemo imati 5 delova stranice i ovo je manje više šablon kada je u pitanju izrada sajtova.

Header ( zaglavlje ) – će nam biti ne promenjivi deo svake stranice i u njega se obično može dodati logo, slogan, naziv sajta, naziv firme itd.

Navigation ( navigacija ) – takodje ćemo ostaviti da bude ista na svim stranama, i ona će posedovati linkove ka drugim stranicama unutar našeg sajta, tj. tu ćemo grupisati naše stranice Početna ( home ), Kontakt i Linkovanje.

Content ( sadržaj ) – predstavlja sadržaj svake stranice, pa će samim tim i ono što je u njemu biti različito.

Sidebar ( bočni meni ) – je zapravo deo sajta u kome možemo da sadržimo neke propratne delove, kao što su reklame, kao i bilo šta što smatrate sporednim delom sajta a opet želite da istaknete.

Footer ( podnožje ) – je isti na svim stranicama i obično sadrži copyright-informacije.

Sada kada znamo kako će nam sajt izgledati idemo da sve to napravimo.

_________________
Once you need less, you'll have more.


Biohazard Head Admin

User avatar

Registrovan: Dec 29, 2012
Broj postova: 940
Lokacija: Tuzla
Država:
Pohvalio: 93 x
Pohvaljen: 217 x
Online: 23d 17h 57m 27s
Post Re: HTML & CSS   03 Aug 2018, 18:07
DIV i SPAN elementi


Za razliku od tagova za naslove h1,h2.. ili paragrafe itd. <div></div> i <span></span> elementi nam pomažu da postavimo svoje „blokove“ unutar stranice. U našem slučaju blokovi su: header, navigation, content, sidebar i footer i bukvalno možemo zamisliti da ovaj okvir tih blokova zapravo predstavlja jedan div ili span element. Pitate se sigurno u čemu je onda razlika izmedju ova dva elementa. Div element se „slažu“ jedan ispod drugog, a span jedan pored drugog. U slici ispod to možete i vidjeti.

Image

Kako bismo to i praktično uradili prekopirajte kod ispod u body deo ( ukoliko Vam je ostavo tekst „Sadrzaj dokumenta“ obrišite ga pa potom prekucajte kod ispod):


<div id=“header“>
</div>

<div id=“navigation“>
</div>

<div id=“menu“>
</div>

<div id=“footer“>
</div>


Novina je „id“ unutar svakog otvarajućeg koda, a on definiše naziv elementa, a u daljem tekstu saznaćete zašto je to bitno.

Kao što vidite nemamo content i sidebar divove, ali to je zato što želimo da se unutar menu diva nalaze ova dva, zapravo menu je „roditelj“ content i sidebar divovima u našem slučaju, pa ćemo sada unutar menu diva prekopirati sledeći kod:


<div id=“content“>
</div>

<div id=“sidebar“>
</div>


Komentari unutar HTML dokumenta
Ako Vam je lakše možete koristiti i komentare, dobri su radi lakšeg snalaženja prilikom kodiranja i oni se pišu ovako:

<!– Ovo je neki komentar –>

Mogu se nalaziti bilo gde i nemaju uticaja na sajt, niti se bilo gde vide osim u html kodu. Pošto smo na početku učenja koristiću neke komentare, a Vi ako smatrate da Vam ne trebaju ne morate, jer je izrada ovog sajta jednostavna i lako ćemo se snalaziti u kodu. Ja sam ih dodao u naš sajt i ako ste ispoštovali sve korake to bi trebalo izgledati ovako:

html code, html
Image


Ukoliko to nije baš ovako složeno, radi preglednosti preporučujem Vam HTML formatter, koji će sve srediti i postaviti na svoje mesto.

_________________
Once you need less, you'll have more.


Biohazard Head Admin

User avatar

Registrovan: Dec 29, 2012
Broj postova: 940
Lokacija: Tuzla
Država:
Pohvalio: 93 x
Pohvaljen: 217 x
Online: 23d 17h 57m 27s
Post Re: HTML & CSS   05 Aug 2018, 21:30
Header (zaglavlje)


Kao što sam već rekao u predjašnjoj lekciji ovaj deo sajta obično sadrži logo, slogan, naziv firme ili naziv sajta, tako da ćemo i sada ubaciti jedan naslov kako biste videli kako to izgleda.

h1, h2, h3 … h6 heading tagovi
Za naslove koristimo h tagove i oni se pišu ovako:


<h1>Ovo je H1 naslov, najveći mu je font i samo ga jednom upotrebite na stranici</h1>

<h2>Ovo je H2 naslov i manji je fontom od H1 naslova </h2>

<h3>Ovo je H3 naslov i manji je fontom od H2 naslova </h3>



<h6>Ovo je H6 naslov i manji je fontom od H5 naslova</h6>


Kao što vidite, naslovi su rangirani od H1-H6. H1 po prirodi ima najveću veličinu slova, dok svaki naredni ima sve manju i manju (kasnije možemo uticati na veličinu slova naših h tagova korišćenjem CSS-a). Bitnost naslova je takodje rangirana, pa je H1 glavni naslov na stranici, a svi ostali imaju manji uticaj, H2 je bitniji od H3, H3 je bitniji od H4 itd.

Jednostavno težite da naslove upotrebljavate prirodno jer oni pomažu pretraživačima da prepoznaju koji se sadržaj nalazi na stranici. H1 je najbitniji i logično je da postoji samo jedan na stranici (to je i pravilna upotreba H1 taga). H2 je podnaslov H1, H3 je podnaslov H2 itd. i trudite se da ih tako koristite. Naslovi trebaju da sadrže ključne reči jer će to pomoći SEO optimizaciji, ali nemojte preterivati i trudite se da te ključne reči ne budu u istom obliku.

Kako bismo i praktično ubacili H tag u naš sajt prekopirajte kod ispod u Vaš header div:


<h2> Ovde cemo napisati naziv firme ili sajta </h2>

<h4> Ovde cemo napisati slogan firme ili sajta</h4>


Sada smo uneli ono što smo trebali u zaglavlje i za sada je to dovoljno, a Vi će te na kraju tutorijala steći veštine da mnogo atraktinije uradite svoje zaglavlje.

Footer (podnožje)
Ovde uglavnom postavljamo autorska prava, pa ćemo u paragraf tagu u našem footer divu prekopirati sledeći kod:

<p>&copy 2018 HTML tutorial, http://www.clarion-gaming.com</p>

&copy zapravo predstavlja © kada pogledate rezultat koda u browser-u.

Navigation (Navigacija)
Kako bismo napravili navigacioni meni na sajtu potrebne su nam stranice ka kojim ćemo povezati svoju navigaciju, tako da sada u istom folderu u kome su Vam index.html i style.css napravite nove 2 stranice pod nazivom kontakt.html i linkovanje.html (ukoliko ste zaboravili kako to da odradite vratite se na 1. lekciju), pa nakon toga unutar te dve stranice prekopirajte sve kodove iz dokumenta index.html.

Sada unutar sve tri html stranice u navigation divu prekopirajte sledeće kodove pa ćemo ih objasniti:


<a class=“nav“ href=“index.html“>Pocetna</a>

<a class=“nav“ href=“kontakt.html“>Kontakt</a>

<a class=“nav“ href=“linkovanje.html“>Linkovanje</a>


Class, id i href atributi
Po prvi put se susrećemo sa class i href atributima.

Class vrši funkciju davanja naziva elementu, isto kao i id, ali razlika postoji. Kada ima više ponavljajućih istih elemenata (isto ko u linkovima u našoj navigaciji) onda koristimo class, a kada dajemo naziv jednom elementu koji je jedinstven koristimo id.

Href atribut je obavezan u a tagu. On nam govori gde će nas odvesti link klikom na reč unutar a taga.

Da ne bude komfuzno kroz naš primer <a class=“nav“ href=“kontakt.html“>Kontakt</a> objasnićemo. U ovom slučaju klikom na reč Kontakt otićićemo na sadržaj koji se nalazi pod nazivom kontakt.html.

Jedna napomena za href atribut je da kada se dokument nalazi u istom folderu gde i dokument sa kog linkujemo, kao u našem slučaju onda pišemo samo naziv dokumenta, a ukoliko se dokument ka kom linkujemo nalazi izvan onda moramo dati prefiks foldera. Evo i primera kako bi bilo jasnije:

<a class=“nav“ href=“linkovanje.html“>Linkovanje</a> – primer za dokument u istom folderu kao u našem slučaju


<a class=“nav“ href=“nekifolder/linkovanje.html“>Linkovanje</a> – primer kada se dokument nalazi u drugom folderu


Imamo još jednu varijantu koju valja naučiti a nju koristimo kada linkujemo ka drugim sajtovima kao recimo:


<a class=“nav“ href=“http://clarion-gaming.com/“>Clarion Forum</a>


U ovom slučaju klikom na reči Clarion Forum idemo na sajt – [color=#404080]http://clarion-gaming.com

Još nešto korisno da naučimo je i target atribut, a evo i primera:



<a class=“nav“ href=“http://clarion-gaming.com/“ target=“_blank“>Clarion Forum</a>


Ovaj target atribut nam zapravo govori da klikom na reči Clarion Forum želimo da otvorimo adresu http://clarion-gaming.com/ u new tab-u. Isprobajte kroz neki primer korišćenje ovog atributa i sve će Vam biti jasno.

Kada smo sve odradili i naše promene pogledali na browser-u još uvek nemamo sajt koji je estetski lep. Za to nam je potreban CSS. U daljim lekcijama korišćenjem CSS-a daćemo našem sajtu i lep izgled.

_________________
Once you need less, you'll have more.


Biohazard Head Admin

User avatar

Registrovan: Dec 29, 2012
Broj postova: 940
Lokacija: Tuzla
Država:
Pohvalio: 93 x
Pohvaljen: 217 x
Online: 23d 17h 57m 27s
Post Re: HTML & CSS   13 Aug 2018, 06:47
U prošlom tutorijalu naučili smo kako se koriste h tagovi, class i id atributi i kako se linkuje.

Sada ćemo početi da koristimo CSS.

Uloga CSS-a jeste davanje izgleda HTML elementima.

Osnove CSS-a
Za razliku od rada u html dokumentima kod CSS se pisanje instrukcija razlikuje i recimo jedna CSS instrukcija izgleda ovako:


Code: Select all
div { background-color: yellow;
 }



U ovom slučaju div je HTML element, background-color je atribut, a yellow je vrednost atributa.

Jedan html element može da sadrži i više atributa i oni se pišu svi unutar zagrade html elementa, a razdvajaju se sa tačka-zarezom (;) , a evo i primera:


Code: Select all
div {
background-color: yellow;
text-align: center; }


Ova instrukcija govori da će svi div elementi unutar strane biti obojeni u belo, a tekst centriran.

Medjutim, ako nam nije cilj da menjanjo sve div elemente već tačno odredjeni koji ima id recimo menu (<div id=“menu“>) instrukcija je sledeća:

Code: Select all
div#menu {
background-color: yellow;
 text-align: center;
 }


ili

Code: Select all
#menu {
 background-color: yellow;
 text-align: center;
 }


Ako je riječ o divu koji ima class recimo klasa (<div class=“klasa“>) instrukcija izgleda ovako:

Code: Select all
div.klasa {
 background-color: yellow;
 text-align: center;
 }


ili

Code: Select all
.klasa {
 background-color: yellow;
 text-align: center;
 }


Postoji i varijanta kada hoćemo da formatiramo nešto unutar diva. Npr. hoćemo da formatiramo a tag unutar našeg navigation diva, to ćemo odraditi ovako:

#navigation a {……}

Sada smo videli kako CSS funkcioniše pa da ga primenimo na naš sajt.

Kako bi naš HTML dokument bio povezan sa CSS dokumentom moramo im napraviti vezu. Unutar head dela prekopirajte sledeći kod na svim html stranicama i na taj način veza je napravljena:

Code: Select all
<link rel=“stylesheet“ type=“text/css“ href=“style.css“ />


Ovde imamo par novina.

Link tag ima ulogu povezivanja html-a sa spoljnim dokumentom.

Rel je tip veze, a stylesheet nam govori da je reč o oblikovanju html dokumenta.

Type nam govori da se radi o css fajlu, dok smo sa href atributom već upoznati prilikom učenja da linkujemo u predjašnjoj lekciji.

Sada udjite u dokument style.css i prekopirajte kod ispod:

Code: Select all
html, body {margin:0; padding:0; }


Margin element koristimo kada želimo da odvojimo jedan element od drugog i može se pisati na više različitih načina. Kada imamo jednu vrednost kao npr. margin: 5px; to nam govori da su margine sa svih strana po 5 px. Ako imamo vrednost npr. margin: 5px, 10px; prva vrednost od 5px definise gornju i donju marginu, a 10px levu i desnu marginu. Ako stavimo sve četiri npr. margin: 10px, 20px, 30px, 40px; 10px je gornja margina, 20px je desna, 30px je donja i 40px je leva. Kada su u pitanju margine možemo koristiti i preciznije atribute kao što su: margin-top, margin-right, margin-bottom i margin-left i na taj način definisati samo jednu tačno odredjenu marginu.

Padding služi za odvajanje sadržaja od ivica dokumenata, a što se tiče pravila pisanja važe ista pravila kao i za margine.

Još jedna novina je da imamo 2 html elementa u našem slučaju (html i body) i ovu varijantu možemo koristiti kada želimo istovremeno da damo atribut i njegovu vrednost za dva html elementa.

Sada ćemo da promenimo boju tela dokumenta, tako da ispod prvog koda prekopirajte kod ispod:

Code: Select all
body {background-color: #444444}


Ovde nam je sve jasno osim vrednosti atributa koja je #444444, zapravo ova vrednost definiše boju o kojoj se radi. A Vama će od koristi u daljem radu i izradi sajtova biti colorpicker sajt, koji je jednostavan za korišćenje i nećete imati problema kada je u pitanju odabir boja.

Sada u css fajlu kopiramo sledeći kod:
Code: Select all
#header {
 height: 200px;
 width: 900px;
 background-color: #ADADAD;
 margin: 15px auto 0 auto;
 padding: 30px 0;
}


Height je definisao visinu header diva, a width širinu. Mi smo vrednost ovih atributa stavili u pikselima, a možemo koristiti i procente. Pikseli su fiksni, dok se procenti menjaju u zavisnosti od veličine ekrana.

Još nam je nepoznata i vrednost auto, a ona definiše automatsko podešavanje tako da je element uvek na sredini.

Idemo dalje, novi kod je:

Code: Select all
#navigation {
 height: 50px;
 width: 900px;
 background-color: #ADADAD;
 margin: 10px auto 0 auto;
 padding: 5px 0;
  }


Ovde nam je sve jasno pa pišemo novi kod:

Code: Select all
#menu {
 height: auto;
 width: 900px;
 margin: 10px auto 0 auto; padding: 0;  }


I ovde je sve jasno pa idemo na nove instrukcije:

Code: Select all
#content {
 height: auto;
 width: 700px;
 background-color: #ADADAD;
 margin: 0;
 padding: 10px 0;
 float:left;
  }


Code: Select all
#sidebar {
 height: auto;
 width: 195px;
 background-color: #ADADAD;
 margin: 0 0 0 5px;
 padding: 10px 0;
 float:left;
  }


Float left govori da se elementi redjaju s leva na desno, kada je u pitanju float right slučaj je obrnut. Jako bitan deo koji se tiče float elemenata je da mora biti prekinut pa ćemo unutar menu diva ispod sidebar diva prekopirati sledeći kod koji vrši prekidanje float atributa. Tako da dodajte na sve tri html stranice:

<div class=“clear“></div>

Pa potom u css fajlu prekopirajte:

Code: Select all
div.clear {
 clear:left;
 }


Ostaje nam još footer div:

Code: Select all
#footer {
 height: 50px;
 width: 900px;
 background-color: #ADADAD;
 margin: 5px auto 0 auto;
 padding: 10px 0;
 text-align: center;
}


Text align služi za poravnanje teksta. I za ovaj atribut imamo vrednosti left- ravna tekst na levoj ivici, right- na desnoj, justify na obe i center cetrira tekst.

_________________
Once you need less, you'll have more.


This topic is locked, you cannot edit posts or make further replies.
Display posts from previous:  Sort by  
Jump to:  

Users browsing this forum: No registered users and 1 guest