Srednja škola "Antun Matijašević Karamaneo" Vis - Naslovnica
SEO CMS SHOP trgovina - vaša internet trgovina
Jednostavno i samostalno administriranje web shopa putem web sučelja. Nije potrebno infomatičko predznanje. Webshop je modularno napravljen tako da može nadograđivati prema vašim potrebama. Jednostavan pristup sa bilo kojeg računala ili mobilnog uređaja koji ima pristup internetu.
Dizajn web trgovine
Želite li različit vizulani izgled za svaki pojedini dio trgovine, moguće je.
Želite li da svaki odjel, kategorija izgleda drukčije ovisno o vrsti proizvoda ili čak i stranica svakog proizvoda, moguće je. Fleksibilni dizajn prema vašim željama.
Struktura web trgovine
Želite li odjele, pododjele u web trgovini sa kategorijama i podkategorijama u neograničenom broju nivoa, moguće je.
Prikaz kataloga proizvoda
• Pregled i kupnja artikla za maloprodajne i veleprodajne korisnike
• Hijerarhija grupa (odjeli trgovine, kategorije i podkategorije)
• Kategorizacija artikla u više podkategorija
• Varijante artikla (svaka varijanta može imati drugačiju cijenu i sliku)
• Filtriranje artikla po tagovima
• Kloniranje artikla
• Kopiranje slike sa jednog artikla na drugi
• Kopiranje tehničkih specifikacija sa jednog artikla na drugi
• Uz svaki artikl neograničen broj dodatnih slika, datoteka, multimedijalnih sadržaja
• Srodni artikli (artikli u relaciji)
• Pregled raspoloživosti artikla na kartici
• Tražilica (pretražuje novosti, artikle, tagove artikla)
• Prijavi grešku artikla
• Navigacije
Promocije i akcije
• Lista akcijskih artikala
• Lista artikla na rasprodaji
• Back order artikla
• Prednarudžbe artikla
• Pošalji upit o proizvodu
• Pošalji link (predloži artikl prijatelju)
• Members only - prodaja samo za registrirane korisnike
• Private Club - prodaja samo za VIP korisnike
• Recenzije i ocjena artikla - samo za registrirane korisnike
• RSS Feeds novih artikla
• RSS Feeds novosti
• Administracja anketa
• Newsletter (Mailing lista)
• Google Site Map
• Google Adwords
• Google Adsense reklame
• Mogućnost kupovine poklon kartica
• Affiliate program
• Dodatni popusti na sumu iznosa narudžbi ili količinu narudžbi po korisniku
• Popusti po kategorijama, vrstama prodaje ...
• Popust bonovi (promo kodovi)
• Pregled posljednje unesenih usporedilica artikla
Optimizacija za tražilice (SEO)
• URL rewriting za artikle, kategorije, novosti
• Meta tag informacije za artikle, kategorije, novosti
• Google Site Map
• SEO tools unutar samog programa
Jedinstven dizajn samo za vas
• Prilagodljiv izgled web trgovine
• Lista proizvoda u listi ili mreži (rešetka)
• Neograničen broj dodatnih stranica
Plaćanje i dostava
• Proizvoljan broj vrsta dostave
• Proizvoljan broj načina plaćanja (Virman, Internet banking, pouzeće, gotovina ...)
Korisnički servisi
• Pregled povijesti i status trenutnih narudžbi
• Promjena lozinke
• Zaboravljena lozinka
• Pregled korisničkih bodova
• Pregled liste želja (Wishlist)
• Slanje poruke za administratora sustava
• Pregled poruka od administratora sustava
Upravljanje narudžbama
• Automatsko obavještavanje trgovca e-mailom o primitku narudžbe
• Automatska potvrda kupcu na email
• Pregled narudžbi
• Odobravanje i storniranje narudžbi
• Ispis narudžbe
• Praćenje isporučenih narudžbi
Napredne funkcionalnosti
• Usporedilice proizvoda – side-by-side uspoređivanje proizvoda
• Liste želja (wishlist)
• Administracija reklama (banner)
• Administracija novosti
• Dashboard (Nadzorna ploča)
• Drag drop funkcionalnost
• Ugrađen FTP Client
• Administracija korisnika, proizvođača, poruka korisnika ...
• Uređivanje reporta
• Administracija mailing liste (grupiranje korisnika u više različitih grupa, kreiranje predložaka, probno slanje ...)
Integracije s drugim sustavima
• Preuzimanje kataloga distributera
• Asbis, M SAN, Microline, ESYS, Lost ...
• Integracije sa ERP sustavom 4D Wand, Luceed ili bilo koji drugi
• Export artikla za T-Com shopping Centar
[pic]
SEO CMS - Izrada web stranica
Što je CMS web stranica ili sistem? CMS sistemi ili aplikacije su programi prilagođeni potrebama korisnika za jednostavan i brz unos novih sadržaja putem administracijskog sučelja na web stranice.
Danas postoji velik broj CMS sistema koji zadovoljavaju uglavnom osnovnu funkciju samostalnog unošenja sadržaja od strane korisnika.
Optimizacija ili prilagođavanje za tražilice
Struktura CMS sistema ili web stranice se optimizira za tražilice, posebno za svaki projekt..
Danas postoji velik broj naprednih CMS sistema na kojima možete sami dodavati sadržaje, no malo je njih ispravno dinamički prilagođeno za tražilice.
SEO počinje prije izrade CMS web stranica. Što bolje napravite internet web stranicu, prije će vam se vratiti uloženo i manje ćete imati ulaganja u marketing kasnije i uz sve imat ćete bolje rezultate.
Zašto odabrati WMD SEO CMS sistem?
• prilagođen posebno prema vašim potrebama
• za jednostavan i brz unos podataka, svaki klik je bitan
• štedi vrijeme i novac
• prilagođen za sve jače svjetske i domaće tražilice
• dinamička optimizacija za veći broj ključnih riječi
• sve što radite na web stranici, daje veću vrijednost
• veći broj posjetitelja, a time i veći profit
• flekisbilnost, velike mogućnosti nadogradnje
• upravljanje s više web stranica, domena iz CMSa
• jednostavana nadogradnja u web trgovinu
• moderan dizajn, prvi utisak je jako bitan
• velika sigurnost podataka
• super brza podrška
HTML TUTORIJALI
Elementi
Html elementi se sastoje od 3 osnovna dijela:
1. tag koji otvara neki element
2. sadržaj elementa
3. tag koji zatvara taj element
ovo je podebljani tekst
ELEMENTI:
-sa ovim elementom počinje i završava svaka web stranica
-ovaj element se treba nalaziti unutar elementa
-browser ne prikazuje sadržaj unutar ovog elementa
-ovaj element se treba nalaziti unutar HEAD elementa
-riječi koje napišete unutar ovog elementa će biti prikazane na vrhu web browsera
-sadržaj napisan unutar ovog elementa će se prikazivati na web stranici, to znači tu idu tekst, slike...
PRIMJER:
moja stranica
moj tekst
Sljedeći tutorijal: Komentari
HTML TUTORIJALI
Komentari
Sa komentarima možete pisati bilo gdje unutar skripte a taj tekst neće biti prikazivan na stranici, tj. moći će se vidjeti samo ako otvorite skriptu sa code editorom. Na ovaj način možete ostavljati sebi poruke unutar skripte i sa njima npr. skrenuti pozornost na jedan dio skripte, ili sa ovime možemo jedan dio skripte isključiti, a sačuvati kod tog dijela, kojeg možemo ponovno aktivirati ako izbrišemo sljedeće:
sa ovim zatvaramo komentar
ovo je tekst
Sljedeći tutorijal: Formatiranje
HTML TUTORIJALI
Formatiranje
U HTML-u se formatira uz pomoć tagova. Evo popisa najpoznatijih tagova za formatiranje:
tag za odlomak
podebljani tekst
nakrivljen tekst
"jaki" tekst
nakrivljen tekst
podignut tekst
spusten tekst
precrtan tekst
tekst kompjuterskog koda
-veličina fonta:
velicina fonta 6
veličina od 1-7
-boja fonta:
-boju fonta možemo mijenjati na više načina:
ovaj tekst je u hexaboji #770000
koristeći hexa zapis boja
ovaj tekst je plav
ili koristeći ime boje
-također boju fonta možemo zapisati i u rgb zapisu ali taj zapis nije uobičajen
-vrsta fonta:
ovom paragrafu je promijenjen font
-početno slovo:
Pocetno slovo
Sljedeći tutorijal: Linkovi
HTML TUTORIJALI
Linkovi
Vaši linkovi mogu voditi na unutrašnjost stranice(internal) ,na kojoj se nalaze (npr. link "na vrh"), na stranicu unutar vaše domene(local) ili na neku drugu stranicu izvan vaše domene(global).
O tome ovisi koji ćete href atribut koristiti:
internal href="#strelica"
local href="../slike/slika.jpg"
global href=""
(href- Hypertext Reference)
Tekst linkovi
Ovako izgleda kod za link u obliku teksta.
Sada ćemo se posvetiti ovom dijelu koda:
target="_blank"
ovaj dio govori na koji način će se otvoriti taj link:
_blank" otvara novu stranicu u novom prozoru
_self" otvara novu stranicu u trenutačnom prozoru
_parent" otvara novu stranicu u okvir koji je "nadređen" linku
_top" otvara novu stranicu u trenutačno otvorenom prozoru, poništavajući sve ostale okvire
Strelice
linkovi
na vrh
sa ovim kodom korisnika će se vratiti na vrh stranice kada on stisne link "na vrh".
Prva linija koda se stavlja ondje gdje želimo da nas stranica odvede kada kliknemo na link "na vrh"; "linkovi" će biti prikazano na browseru, ali će do njega biti skriven dio "top" i onda kada kliknemo na link "na vrh" ta linija koda će potražiti koju će varijablu tražiti, u našem slučaju pronaći će "top", i odvest nas na taj dio teksta.
Email linkovi
tutor@
sa ovim kodom ,kojeg možemo staviti bilo gdje na stranicu, otvorit ćemo vaš email klijent na pisanju nove email poruke sa naslovom "pomoc" i sadržajem poruke "trebam pomoc"
Download linkovi
tekst dokument
sa ovim kodom možete stavljati link na vaše datoteke u domeni (ili datoteke na internetu).
Baza
Dobra je ideja odrediti defaultnu stranicu na koju će ići svi linkovi ako oni ne rade, tj. ako nemogu pronaći stranicu na koju se odnose.
Slikovni linkovi
Slikovne linkove ćete dobiti tako da napišete ovakav kod:
Sljedeći tutorijal: Slike
HTML TUTORIJALI
Slike
Slike se mogu dodati na vašu stranicu sa ovim kodom:
XXX zamijenite sa jednim od sljedećega
src="pas.gif" slika se nalazi u istom direktoriju kao i HTML stranica
src="../pas.gif" slika se nalazi u prijašnjem direktoriju od HTML stranice
src="../slike/pas.gif" slika se nalazi u direktoriju "slike" , prijašnjem direktoriju od HTML stranice
Alternativni atribut
u slućaju da se slika nemože učitati, biti će prikazana riječ "pas" unutar okvira slike.
Formatiranje slike
-VISINA I � IRINA
ako želite vi odrediti veličinu slike a ne da vam browser to odredi koristite kod iznad. Ovo može biti korisno kada vam se stranica počne "raspadati" zbog veličine slika i teksta.
-VERTIKALNO I HORIZONTALNO PODE� ENJE
align (horizontalno)
-right
-left
-center
valign (vertikalno)
-top
-bottom
-center
Ovo je popis mogućih podešenja slika. Primjer koda u kojem je slika podešena:
Ovo je neki tekst
ovo je opet neki tekst koji će se nalaziti na desno od slike
Linkovi na slike
sa ovim kodom odredili ste da neće biti okvira oko slike. Ako želite da slike imaju okvir, zamijenite 0 sa nekim brojem.
ovaj kod će prikazati manju verziju slike koja će biti link na veću stranicu. Naravno, manju sliku vi morate napraviti.
Thumbnails-to je naziv za smanjene verzije slika, napravljene da bi se stranica brže učitavala ili zbog estetskih razloga. Thumbnail ima link na sliku u punoj kvaliteti.
Slike kao linkovi
primjer koda koji će pretvoriti sliku u link na neku stranicu.
primjer koda koji će prikazati na stranici umanjenu sliku koja će biti link na veću sliku.
Sljedeći tutorijal: Liste
HTML TUTORIJAI
Liste
Postoje 3 različite vrste lista. , i .
- unordered list; točkice
- ordered list; brojevi
- definition list; točkice
Npr. Ordered lista
Između i stavljate tekst
Znači
Proizvodi:
DVD
CD
Tipkovnica
Monitor
Miš
Rezultat će biti:
Proizvodi:
1. DVD
2. CD
3. Tipkovnica
4. Monitor
5. Miš
Možete i odabrati što će biti umjesto brojeva ovako:
U prvom primjeru pomoću ovoga bi se ispisalo
a. DVD
b. CD
c. Tipkovnica
d. Monitor
e. Miš
Za možete birati između izgleda točkica.
Sljedeći tutorijal: Tablice
HTML TUTORIJALI
Tablice
Tablice su možda i najzbunjenije za početnike i neki kad to vide pobjegnu od HTML-a jer misle: "� ta će mi to kad imam Dreamweaver koji to umjesto mene obavi". E pa to nije baš tako. Ako budete možda nekad radili sa PHP-om ili ASP-om trebat će vam znanje "ručne" izrade tablica u HTML-u.
Za početak tablice koristimo . U tom elementu postoje tagovi (redak) i (stupac).
Evo primjera jedne tablice sa dva reda i dva stupca.
Prvi red i prvi stupac
Prvi red i drugi stupac
Drugi red i prvi stupac
Drugi red i drugi stupac
Ovako pravimo ako imamo npr. jedan redak sa u prvom stupcu a u istom tom redku u drugom stupcu imamo dva redka.
Evo primjera:
Jedan redak
Prvi redak
Drugi redak
Primjetite Rowspan s brojem 2. Taj broj označava koliko se redaka nalazi u drugom stupcu.
[pic]
Kada imate dva redka i u prvom 1 stupac a u drugom 2 stupca. Onda koristite Colspan. Evo primjera:
Jedan redak
Prvi stupac
Drugi stupac
[pic]
Cellspacing
Koristite cellspacing za razmak između rubova tablice. Pogledajmo primjer:
Jedan redak
Prvi stupac
Drugi stupac
[pic]
Cellpadding
Cellpadding koristite kada želite odvojiti tekst od rubova tablice. Pogledajmo primjer:
Jedan redak
Prvi stupac
Drugi stupac
[pic]
Sljedeći tutorijal: Boja pozadine
HTML TUTORIJALI
Boja pozadine
Boja pozadine odnosno bgcolor atribut se koristi za promijenu boje pozadine cijele stranice ili pojedinih elemenata kao što su tablice. Bgcolor možete staviti na više mjesta u HTML elemente ali mi vam prporučamo da bgcolor koristite samo za boju pozadine stranice a za tablice koristite CSS.
Evo primjera kako promijeniti boju pozadine stranice:
Boja pozadine je postavljena.
HTML sistem bojanja - imena boja
Sada ćemo naučiti neke boje koje koristimo u HTML-u.
Postoje 3 različite metode postavljanja pozadinske boje. Najjednostavniji je općeniti način (primjer: blue, green, red, silver, black, yellow...)
Evo 16 osnovnih boja:
[pic]
Drugi način je Hexadecimalni način bojanja. Evo primjera:
Boja pozadine je postavljena.
Ovdje možete vidjeti primjere boja.
Treći način bojanja je sa RGB vrijednostima. Pogledajmo primjer:
Boja pozadine je postavljena.
Treći način bojanja nije preporučljiv.
Primjer dodavanja pozadinske boje tablici
Neka vrsta plave boje
Sljedeći tutorijal: Slika kao pozadina
HTML TUTORIJALI
Slika kao pozadina
Pozadinsku sliku možete koristiti u bilo kojem elementu (tablicama, odlomcima, body tablice...)
Ovdje ćemo naučiti kako pomoću HTML-a napraviti da slika bude kao pozadina ali inače kada naučite HTML radite to CSS-om.
Evo primjera kako pomoću HTML-a postaviti neku sliku kao pozadinu u tablici.
Ova tablica ima pozadinsku sliku
Za pozadinske slike, zbog veličine slika, vam je najbolje koristiti tzv. Patterne odnosno minijaturene sličice koje se stalno ponavljaju koliko je god široka tablica.
U sljedećem tutorijalu ćemo naučiti kako napravit Layout stranice pomoću tablica.
Sljedeći tutorijal: Meta oznake
HTML TUTORIJALI
Meta Oznake
Meta tagovi se uvijek postavljaju izmedju !
Na pocetku svakog html dokumenta,ovisi o programu u kojem pisete vas html kod, prvu liniju zauzima ova linija koda:
- OPIS KODA -
- Oznacuje vrstu browsera namjenjenog za pregled stranice
- OPIS KODA –
- Refresh stranice svakih 60 sekundi,zelite li mjenjati vrijeme za koje ce se vasa stranica refreshati promjenite broj 60 u bilo koji broj.To ce se samo dogoditi ako izbrisete url= bi vas nakon 60 sekundi preusmjerilo na net.hr stranicu.Takodjer ako zelite da se vasa stranica nakon 60 sekundi prebaci na neku drugu stranicu promjenite url=””
- OPIS KODA –
- Kljucne rijeci na koje reagira web pretrazivac,u content=” upisite kljucne rijeci koje karakteriziraju vas site.
- Nemojte misliti da cete odmah dospjeti na neki poznatiji web pretrazivac
- OPIS KODA –
- Upisujuci ovo u stranica omogucavate sebi pisanje na hrvatskom jeziku,te slova čćšđž
- OPIS KODA –
- Upisite vase ime ,ili osobne podatke
- OPIS KODA –
Opis vase web stranice
HTML TUTORIJALI
Kodiranje HTML dokumenata
Često vidim na internetu hrvatske webove kojima nedostaju hrvatski dijakritički znakovi (š,đ,č,ć,ž). Često ih ljudi jednostavno ne pišu jer im je valjda "preteško" pisati točno ali često zna biti slučaj da njihove web stranice ne podržavaju sve naše znakove.
Naime, svaki HTML dokument se treba kodirati u odgovarajućem skupu znakova tj. kodu.
Većina programa za stvaranje HTML datoteka koriste ISO-8859-1 kao preodređeni kod. Njemu je baza latinsko pismo s određenim dodatnim znakovima. Sljedeći jezici mogu koristiti ISO-8859-1 bez bojazni da im se neka slova neće točno prikazati: švedski, engleski, norveški, islandski, irski, danski, škotski, španjolski, portugalsk, njemački, itd.
Za hrvatski jezik je potreban drugi kod koji podržava naše dijakritičke znakove. Ustvari, postoje 2 koda koja su nam od koristi. Prvi je ISO-8859-2 i koriste ga mnogi slavenski jezici od kojih su neki poljski, hrvatski, češki, slovački, srpski (latinica), slovenski, itd. Drugi kod je UTF-8. On je uniformni koji je osmišljen da sadržava sve svjetke znakove . U njemu se može pisati ćirilicom, kineskim, japanskim, sanskrtom i gotovo svim pismima svijeta uz iznimke. Preporučam njegovo korištenje iz dva razloga. Prvi je taj što nikad ne znate kada ćete morati koristiti znakove koje vaš trenutni kod ne podržava a drugi je taj što većina današnjih tekstualnih editora koje koristimo za stvaranje HTML datoteka nema mogućnost kodiranja u ISO-8859-2 formatu.
To je bio uvod u kodiranje HTML dokumenata (ali i praktički svih ostalih) a sada je vrijeme da vam i pokažem kako se to radi. Primjera radi koristit ću par najpopularnijih tekstualnih editora.
Što svi često misle, kodiranje HTML dokumenta nije samo dodavanje sljedećeg meta taga u head dio stranice:
To vrijedi jedino ako koristite windows-1250 kodiranje što ne preporučam jer onda Linux, Mac i ostali korisnici neće ispravno vidjeti sve znakove. To kodiranje je SAMO za korisnike s Windowsima.
Osim što treba staviti taj dio koda u head dio dokumenta (a ni to nije uvijek potrebno) treba i SPREMITI datoteku u odgovarajućem kodiranju. Kod svakog editora je ovo drugačije a ja sam ovdje naveo nekoliko popularnijih. Ako koristite neki program koji nije ovdje naveden probajte naći opciju tipa file encoding, character encoding, encoding, file type ili slično te odaberite kodiranje koje želite. Većina programa, osim onih opširnijih kao Dreamweaver ili Frontpage, neće imati ISO-8859-2 ali i tako je bolje koristiti UTF-8.
Notepad
Kod spremanja datoteke imate polje Encoding. Odaberite UTF-8 umjesto ANSI.
Notepad++
Otiđite na Format->Encode in UTF-8 ili UTF-8 without BOM. BOM (byte order mark) je jedna stvarčica vezana uz UTF kodiranje ali je najbolje da je izbjegavajte jer stariji pretraživači (a i noviji nekad) znaju ispisati na početku dokumenta čudne znakove što je posljedica korištenja BOM-a.
Ako želite da vam svi novi dokumenti u Notepadu++ budu kodirani u UTF-8 onda kliknite na Edit->Preferences... i pod tabom New Document odaberite UTF-8 (sa ili bez BOM-a, po želji).
CSS TUTORIJALI
Uvod i prvi primjer
CSS je skraćenica od Cascading Style Sheets. Style (stil) definira kako prikazati HTML elemente. CSS vam može uštedjeti mnogo vremena i uz to poboljšati izgled i funkcionalnost vaših web stranica.
Style možemo pisati unutar i tagova ili u eksternim style stranicama. Češće korištena varijanta je pisanje CSS-a u eksternim stranicama. Ali mi ćemo prvo koristiti unutar i tagova radi lakšeg učenja, a kasnije ću vam objasniti kako se prebaciti na eksterni način rada. Ako želite imati CSS unutar head tagova, napišite ovo između i
Između toga pišete vaš CSS kod. Npr. kao najjednostavniji primjer koristit ćemo ovo. Između dodajte ovaj kod:
body{color: red;}
S ovime ste promijenili boju teksta u crveno na cijeloj stranici. Sada probajte nešto napisati na vašu web stranicu. Gdje god nešto probate napisati bit će napisano crvenom bojom. To je bio najjednostavniji primjer. Evo sada primjer kako vam CSS može olakšati posao. Između i napišite sljedeće:
#primjer{
background-color:#003366;
padding: 20px;
border: 1px;
color: #FFFFFF;
height: 200px;
width: 400px;
}
i zatim između i upišite:
Ja ucim CSS
Sljedeći tutorijal: Vrste stilova
CSS TUTORIJALI
Vrste stilova
Postoje interni, externi inline CSS style.
Interni style
- Piše se u head dijelu stranice. Evo primjera:
.tablica {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma; }
Eksterni style
- Ovaj način je najčešći. Piše su u externom fajlu. Otvorite notepad i napišite isto kao gore.
.tablica {
background-color: #006699;
color: #FFFFFF;
font-family: Tahoma; }
Imenujte taj fajl npr. style.css
Sada u HTML fajlu moramo povezati taj externi CSS Style sa našom stranicom. To ćete napraviti tako da dodate ovu liniju koda u head dijelu stranice:
HINT: ako ćete tako povezati onda style.css mora biti u istom folderu u kojem je i stanica s kojom se povezuje inače morate ispred style.css dodati putanju do fajla.
Inline style
- Inline style se koristi na sljedeći način:
Plava pozadina sa bijelim tekstom.
Sljedeći tutorijal: Background
CSS TUTORIJALI
Background
U ovom tutorijalu ćemo vam objasniti Background dijelu CSS-a koji je vrlo koristan i puno korišten pri izradi web stranica.
Background color
Sa Backgroundom color možete promijeniti boju pozadinu bilo kojem elementu. Napravimo jedan css style za pozadinu koji ćemo primjeniti na raznim elementima.
.pozadina {
background-color: #006699;
}
Evo primjera kako to možete iskoristiti:
Background Image
CSS ima mogućnost da umjesto boje postavite neku sliku kao pozadinu. Evo primjera:
.pozadina {
background-image: url(neka-slika.jpg);
}
ili sa punim pathom do slike npr.
.pozadina {
background-image: url();
}
CSS ima još nekih naprednijih mogućnosti kod korištenja Backgrounda ali to ćemo objašnjavati kasnije jer nam nije sada cilj zamarati vas tim stvarima dok ne naučite osnove.
Sljedeći tutorijal: Definiranje fontova
CSS TUTORIJALI
Definiranje fontova
Za prvi primjer koristit ćemo bojanje fonta po veličini fonta. Boju možemo promijeniti na sljedeće načine:
h4 { color: red; }
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
Ako vam to bude u style sheetu onda ćete kod h4, h5, i h6 fonta imati različite boje.
Font family
Evo kako možete promijeniti vrstu fonta:
h4 { font-family: Verdana; }
h5 ( font-family: Arial; }
h6 { font-family: Tahoma; }
Naravno ne morate postaviti h4, h5 i slično, možete i za određenu tablicu, npr:
.nekatablica {
font-family: Verdana;
}
Font size
Veličinu fonta možete odrediti u postotcima i pixelima. Npr.
.nekatablica {
font-size: 120%;
}
.drugatablica {
font-size: 10px; }
}
Font style
Font style odnosno nakošeni, podebljani ili normalni font definirate ovako:
.tablica {
font-style: italic;
}
.tablica2 {
font-style: oblique;
}
.tablica3 {
font-style: normal;
}
Font Variant
Ako napišete npr:
.nekatablica {
font-variant: small-caps;
}
Dobti ćete "mala - velika slova" odnosno caps lock slova ali manja nego normalno.
Sljedeći tutorijal: Izrada horizontalnog menija pomoću liste -1.dio
CSS TUTORIJALI
Izrada horizontalnog menija pomoću liste - 1.dio
Ovo dosad su bile neke osnove CSS-a, nema smisla sve to objašnjavati, jednostavno uzmete neki css editor i učite po primjerima. Mi ćemo se zadržati na nećem korisnom.
U HTML tutorijalima ste mogli pročitati kako napraviti jednostavnu listu. Netko bi pomislio da one nisu korisne za ništa osim nekakvog nabrajanja. Ali ne, mi ćemo ih iskoristiti za izradu menija pomoću CSS-a.
Ići ćemo korak po korak, tako da ćemo najprije napraviti običnu horizontalnu listu koja sama po sebi ružno izgleda, ali u kako ću pisati tutorijale jedan po jedan tako ćemo praviti menije pomoću CSS koji će izgledati vrlo lijepo.
Idemo sada napraviti jednostavni horizontalni menu sa vrlo malo CSS-a. Neće biti baš lijep, ali za početak.... :)
Korisit ćemo interni CSS dakle u jednom fajlu.
Ovo napišite izmešu i :
#lista li
{
display: inline;
padding-right: 20px;
font-weight: bold;
}
#lista a:hover {
color: #FF9933;
}
Znači definirali smo CSS-om kako da se prikazuje lista pod ID-om "lista".
Sa
display: inline;
smo naredili da se lista pod ID-om "lista" prikaže horizontalno.
Sa
padding-right: 20px;
smo odmakuli desno svaki stavak u listi da nebi bili sljepljeni jedan na drugi.
Sa
font-weight: bold;
smo naravno definirali da nam tekst bude Bold.
I na kraju smo samo još dodali #lista a:hover odnosno kako će se ponašati linkovi kada se pređe strelicom miša preko njih.
To je sve što se tiče CSS dijela. Sada još moramo napraviti listu. Napravimo onda najprije jedan u kojem ćemo držati naš menu odnosno listu i zatim unutar tog div-a napravimo listu koja će nam služiti kao menu.
Link 1
Link 2
Link 3
Link 4
Link 5
Vidite da smo listi dali id "lista". Znači da će se ta lista prikazat onako kako smo odredili CSS-om.
Primjer kako to izgleda možete pogledati ovdje.
Kao što sam već napomenuo, ovo je samo obična lista, nije nikakav menu. To je samo osnova i temelj za ono što ćemo napraviti postepeno u idućim tutorijalima.
Sljedeći tutorijal: Izrada horizontalnog menija pomoću liste - 2.dio
CSS TUTORIJALI
Izrada horizontalnog menija pomoću liste - 2.dio
U prošlom tutorijalu smo naučili kao napraviti jednostavnu horizontalnu listu gdje linkovi mijenjaju boju kada se dođe mišem na njih.
Sada ćemo to zanje malo unaprijediti da poboljšamo izgled naše horizontalne liste i napravimo jedan lijepi horizontalni menu.
Dakle ovo postavite između i pa ćemo redom objašnjavati.
#lista
{
margin-left: 0;
padding-left: 0;
}
#lista li
{
display: inline;
list-style-type: none;
}
#lista a
{
color: #FFFFFF;
background-color: #003366;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding: 3px 10px;
}
#lista a:hover
{
color: #FFFFFF;
background-color: #6699CC;
text-decoration: none;
}
Sa
#lista
{
margin-left: 0;
padding-left: 0;
}
smo napisali tako da našu listu možemo pomaknuti u lijevu stranu koliko ide da nema razmaka.
Sa
#lista li
{
display: inline;
list-style-type: none;
}
smo definirali da se lista (li) u stilu "lista" prikazuje u liniji (display: inline), da nema nikakvih točkica, brojeva ni ničega ispred sebe (list-style-type: none)
Sa
#lista a
{
color: #FFFFFF;
background-color: #003366;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
padding: 3px 10px;
}
smo definirali da svi linkovi u stilu lista budu bijele boje, definirali smo pozadinu, da ne bude podvučen link (text-decoration: none), definirali font te stavili da ima 3px razmaka gore i dolje, te 10px razmaka lijevo i desno (padding: 3px 10px)
Sa
#lista a:hover
{
color: #FFFFFF;
background-color: #6699CC;
text-decoration: none;
}
smo odredili kako će se lista ponašati kada se pređe mišem preko linkova. Promijena bojea i da ne bude pocrtano.
I to je to što se tiče novog stila.
Sada možete prekopirati html kod od naše stare liste:
Link 1
Link 2
Link 3
Link 4
Link 5
i pogledati kako to izgleda u akciji.
Sljedeći tutorijal: Izrada horizontalnog menija pomoću liste - 3.dio
CSS TUTORIJALI
Izrada horizontalnog menija pomoću liste - 3.dio
U prošlom tutorijalu naučili smo kako napraviti jednostavni menu koji koji mijenja boju pozadine kada se pređe mišem preko linkova.
Sada ćemo napraviti slično tako ali još malo bolje.
Dodajte ovo između i pa ćemo objasniti.
#lista
{
padding-left: 0;
margin-left: 0;
}
#lista li
{
list-style-type: none;
display: inline;
}
#lista a
{
font-family: Verdana;
font-weight: bold;
font-size: 12px;
padding: 2px 5px 2px 5px;
border-left: 10px solid #000066;
background: #006699;
text-decoration: none;
color: #FFCC33;
}
#lista a:hover
{
border-color: #6699CC;
color: #FFFFFF;
background: #000000;
}
Gotovo je sve isto kao i u prošlom tutorijalu pa nema potrebe da objašnjavamo što koji kod radi. Reći ću samo za ono što je nadodano da bi se dobili ovi kvadratići sa strane.
U #lista a smo nadodali ovaj kod
border-left: 10px solid #000066;
Što pravi border širine 10 pixela sa lijeve strane. To vam je ovaj kvadratić.
zatim smo u #lista a:hover nadodali ovo:
border-color: #6699CC;
odnosno da onaj border od 10px promijeni boju u svijetlo plavu.
Eto, to bi bilo sve. Ne zaboravite u body dio stranice napraviti listu:
Link 1
Link 2
Link 3
Link 4
Link 5
Evo kako to izgleda u akciji.
Ako vam nešto nije jasno pitajte na forumu.
Sljedeći tutorijal: Overflow teksta unutar div-a
CSS TUTORIJALI
Overflow Teksta Unutar Div-a
Pokazat cu vam kako napraviti overflow texta unutar div-a.
Pravimo div #overflwed
#overflwed {
width: 400px; /* definiramo sirinu div-a*/
height:200px; /* definiramo visinu div-a*/
border-bottom:1px solid silver; /* donji rub*/
border-top: 1px solid silver; /* gornji rub*/
margin:0 auto; /* centriramo div na sredinu stranice*/
overflow: scroll; /*Omogucavamo overflow */
overflow-x:hidden;/* Sakrivamo kliznu traku po x-osi*/
}
Opis imate poslije svake linije koda
Uredjujemo paragraf i Zatvaramo
p {
margin-left:5px;
color:blue;
font-family: tahoma;
font-size:10px;
}
Ubacujemo ga u html
Ovaj kod objasnjava kako napraviti div,koji ce ako se upise previse teksta sam od sebe napraviti scroll.
Klizne trake se naravno mogu modificirati,moze im se mjenjati boja,ali to je podrzano samo u Internet Exploreru.
Dok u Firefoxu ne radi,iako je Firefox trenutno na mnogo boljem glasu.Sad cu upisati mnogo slova tek toliko da vidite,kako ce se napraviti scroll!
--
-------------
By:Goran
Cijeli kod od do morate ubaciti u body dio
Ovako izgleda konacan rezultat Overflow
MYSQL TUTORIJALI
Uvod i osnove u MySQL
PHP (Personal Home Page) je jedno od najboljih server-side open source rješenja.
Server side scripting znači da se skripte izvršavaju na serveru a ne na korisnikovu računalu. PHP u kombinaciji sa MySQL-om je najpopularniji jezik za programiranje, većina velikih sajtova, portala i foruma je rađena upravo pomoću php jezika i mysql baze podataka
U ovom vodiču ćemo proći kroz rad sa MySQL-om.
MySQL
MySQL je poslužitelj baze podataka (softwer) kojem se može pristupiti preko mreže, obično pomoću korisničkog imena i lozinke. Također, MySQL ima veliku prednost zbog toga što postoje verzije za sve operacijske sustave, i zbog toga što se izdaje pod GPL licencom; što znači besplatno za kućnu upotrebu.
Ovaj vodič je pisan za NT operacijske sustave.
Osnove rada s MySQL-om
U ovom poglavlju ćemo proći kroz osnove izrada tablica te kroz osnovne tipove polja koje MySQL podržava.
Potrebno:
MySQL server (skinite ga sa )
#Namještanje lozinke korisnika
Lozinku postojećem korisniku možemo namjestiti na više načina. Najjednostavniji način je pomoću administracijskog alata. Radi se o Command Prompt alatu.
1.Otvorite command prompt (Start -> Run -> Upišite „cmd“ )
2.Pozicionirajte se u c:/mySQL/bin
3. Utipkajte :
C:mySQLbin>mySQLadmin.exe -u root password vaša lozinka
Ukoliko nekada kasnije želite ponovno izmjeniti lozinku za ovog korisnika ponovite iste korake, samo ovog puta morate mySQLadmin-u dati i opciju –p te ćete prije izmjene passworda biti zatraženi stari password.
C:mySQLbin>mySQLadmin.exe -u root -p password nova_lozinka
Sada smo obavili sva početna podešenja te možemo početi koristiti mySQL.
Defaultni MySQL klijent
MySQL u standardnoj verziji dolazi sa klijentom pomoću kojeg možemo raditi sa bazama na našem lokalnom serveru. Ali je on nepraktičan za rad, posebno početnicima u MySQL, jer i najjednostavnije radnje zahtjevaju puno tipkanja i napredno znanje MySQL-a. Zbog toga, upoznat ćemo vas samo sa njegovim osnovama.
U tipičnoj instalaciji, klijent se nalazi u c:/mySQL/bin direktoriju, a radi se o mySQL.exe datoteci. Da bi se klijent pokrenuo potrebno mu je pri pozivanju proslijediti korisničko ime te dati opciju koja omogućuje naknadni upis lozinke.
C:mySQLbin>mySQL -u root –p
Nakon upisa lozinke ušli ste u mySQL klijent koji izgleda odprilike ovako :
Welcome to the MySQL monitor. Commands end with ; or g.
Your MySQL connection id is 16 to server version: 4.0.17-max-nt
Type 'help;' or 'h' for help. Type 'c' to clear the buffer.
mySQL>
Dok se nalazite u ovom klijentu svaka naredba mora završiti sa „;“ ili „g“ i naredba se može protezati kroz više redova.
Da bi vidjeli sve baze koje postoje na našem lokalnom serveru potrebno je upisati naredbu :
mySQL>SHOW DATABASES;
Važno je napomenuti da su naredbe case insensitive tako da se ne morate brinuti o tome.
Rezultat gornje naredbe bi trebao izgledati otprilike ovako :
+---------------+
| Database |
+---------------+
| mySQL |
| test |
+---------------+
2 rows in set (0.01 sec)
Pri instalaciji MySQL-a automatski se stvaraju dvije tablice. Prva mySQL sadrži podatke oko našeg servera i nju ne trebate dirati jer bi mogli trajno oštetiti MySQL ako neznate što radite.
Baza test je prazna.
Stvaranje baze kroz MySQL shell klijent
Napravit ćemo jednu bazu za neku malu, jednostavnu stranicu, na kojoj će se jedino vijesti obnavljati periodički.
Naredba za stvaranje nove baze i njen rezultat izgleda:
mySQL> CREATE DATABASE site_vijesti;
Query OK, 1 row affected (0.00 sec)
Važno je reći da su imena baza, tablica te polja u njima case sensitive, te da se u njima ne smije nalaziti bilo kakav prazan prostor (razmak, tabulator, novi red).
Sljedeći tutorijal: Korištenje baze i stvaranje tablice kroz MySQL shell
MYSQL
Korištenje baze
Naša baza će se sada nalaziti na listi ako upišemo naredbu za prikaz svih baza na serveru, ali moramo reći mySQL-u da ćemo sada koristiti tu bazu.
mySQL> USE site_vijesti;
Database changed
Nakon obavljanja ove naredbe svi MySQL upiti koje upisujemo u komandnu liniju će se odnositi na izabranu bazu.
Stvaranje tablica:
Sada ćemo stvoriti tablicu u kojoj ćemo raditi. Napraviti ćemo sistem novosti i to će biti jedini dinamički dio ove stranice.
Struktura tablice:
Tablica se sastoji od više polja:
PK (primary key) je polje tablice koje sadrži jedinstvenu vrijednost svakog retka.
Autoincrement- u Mysqlu postoji mehanizam koji svakom novom retku u tablici automatski dodaje novu vrijednost. Polja autoincremet sadrže te vrijednosti.
Naslov- u našem slučaju naslov će biti varchar tipa (ograničen na 150 znakova)
Tekst- tip text (nije ograničen)
Datum- tipa date
Naredba za stvaranje tablice :
CREATE TABLE vijesti (
idvijest INT( 11 ) NOT NULL AUTO_INCREMENT ,
naslov VARCHAR( 150 ) NOT NULL ,
tekst TEXT NOT NULL ,
datum DATE NOT NULL ,
PRIMARY KEY ( idvijest )
);
Sada moramo provjeriti jeli tablica stvarno stvorena:
mySQL> SHOW TABLES;
+----------------------------+
| Tables_in_site_vijesti |
+----------------------------+
| vijesti |
+----------------------------+
1 row in set (0.01 sec)
Izlazak is shell klijenta::
mySQL>quit;
Sljedeći tutorijal: Spajanje na MySQL server
MYSQL
MySQL i PHP
U ovim i sljedećim primjerima napraviti ćemo HTML sučelje na bazu koju smo već stvorili.
#Spajanje na MySQL server
Spajanje na MySQL server je prvo što moramo napraviti u skriptama koje ovise o podacima u bazi. Važnost spajanja na MySQL server se može usporediti sa time da moramo prvo pokrenuti računalo da bi mogli npr. surfati internetom na njemu. Zbog toga je važno provjeravati svaki korak da se provjeri jeli operacija uspješno obavljena.
Za naše potrebe koristiti ćemo korisnika root te lozinku koju smo stvorili na početku ovog vodiča. Stvoriti ćemo direktorij na našem lokalnom (HTTP) serveru i u njega ćemo spremati sve naše primjere i kroz njih stvoriti cijelu aplikaciju.
Zbog mogućih razlika u mjestu spremanja različitih servera, nećemo navoditi točne putove do tih direktorija. Također svi primjeri će biti pisani na taj način da vam neće biti potreban nikakav code editor već ćete primjere moći pisati i u notepadu, ali zbog kompliciranosti kodova i za lakše ispravljanje greški preporučamo vam neki code editor.
U svojem web root folderu web servera stvorite direktorij imena PHP i MySQL u kojeg ćemo spremati sve primjere.
Sada ćemo stvoriti file spoj.php te ga pohraniti u gore navedeni direktorij. U njemu će se nalaziti kod koji će se spajati na MySQL server.
Ukoliko ste MySQL funkcijama dali točne podatke rezultat skripte bi trebala biti prazna stranica.
mySQL_connect funkcija - njoj se prosljeđuju tri argumenta: prvi je host na kojem se nalazi server, drugi je korisničko ime s kojim se spajamo na server, a treći lozinka za tog korisnika.
@ - onemogućuje PHP-u da ispisuje greške koje se dogode u naredbi iza njegovog pojavljivanja.
die - funkcija koja ispisuje grešku, u ovom slučaju funkcija će prekinuti izvršavanje skripte ako je spajanje na server bilo neuspješno. Ona će nam također ispisati grešku koja nam govori u kojem je koraku nastala greška.
mySQL_select_db - funkcija koja odabire bazu sa čijim ćemo tablicama raditi. Ima dva argumenta: prvi dobija ime baze koju želimo koristiti, a drugi sadržava spoj na MySQL-ov server gdje se ta baza nalazi. Drugi argument smo pohranili u varijablu $db. Drugi argument nije obavezan, ali naveli smo ga zato što PHP automatski pamti posljednju otvorenu vezu na MySQL server te nju automatski koristi u svim MySQL funkcijama gdje je taj argument izostavljen.
Također, opet je važno provjeravati uspjeh odabira baze jer će se skripta nastaviti obavljati iako je nastala greška. Zbog toga je potrebno prekinuti rad skripte ako je nastala greška.
Sljedeći tutorijal: Unos podataka
MYSQL
Unos tutorijala
Unosa podataka u bazu sastoji od dva koraka: prvi je prikupljanje podataka kroz formu, a drugi pohrana tih podataka u bazi.
Za unos podataka koristimo INSERT naredbu.
INSERT INTO vijesti (naslov, tekst, datum) VALUES ("Prva vijest ", "Ovo je tekst prve vijesti", "2005-09-12");
Kao što već znate sve SQL naredbe počinju nazivom naredbe. Nakon toga smo koristili INTO prije imena tablice u koju želimo pohraniti podatke. Također, važno je napomenuti da su imena baza, tablica i polja osjetljiva na veličinu slova (case sensitive).
VALUES- njome naznačujemo da slijedi lista vrijednosti koja se pohranjuje u tablicu.
Važno je opaziti neuobičajen način pisanja datuma. Format slovima bi bio GGGG-MM-DD i zbog toga datum mora biti ispravnog oblika jer datum 1989-12-9 neće proći zbog toga što datumu nedostaje druga znamenka: nula. Ovo pravilo isto vrijedi i za mjesece.
Forma za unos podataka:
Unos vijesti
Unos vijesti
Naslov :
Tekst :
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.