Warning: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in ..../includes/class_bbcode.php on line 2958

Warning: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in ..../includes/class_bbcode.php on line 2958

Warning: preg_replace(): The /e modifier is deprecated, use preg_replace_callback instead in ..../includes/class_bbcode.php on line 2958
Uvod u HTML,CSS (dizajn i programiranje)
Results 1 to 15 of 15

Tema: Uvod u HTML,CSS (dizajn i programiranje)

  1. #1
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Uvod u HTML,CSS (dizajn i programiranje)

    Ovo je obavezno štivo za sve one koji se prvi put susreću s HTML kodom. Ovaj tutorial nije o dizajniranju, već,
    kao što naslov kaže, uvod

    HTML prema Riječniku komunikacijske tehnologije znači hipertekstualni (tekst čitljiv u više dimenzija) označeni jezik. Zanemarimo sad informatička objašnjenja, najjednostavnije bi bilo reći da se radi o običnoj tekstualnoj datoteci, koju Internet browseri "vide" kao malo manje običnu tekstualnu datoteku, tj. interpretiraju kod u tekst, slike i zvuk. Cijela stranica, koliko god multimedijalnih dodataka imala, nije ništa drugo nego tekst. Kliknite desnom tipkom miša i na meniju odaberite View Source - vidjet ćete kako zapravo izgleda ova stranica.

    HTML možete pisati u bilo kojem tekst-editoru, počevši od Notepada. Ja sam svoju prvu web stranicu napravila u Notepadu - (nemojte ni probati zamišljati kako je izgledala...) - dovoljno je tekst (sa pravilno napisanim kodom) spremiti u .htm ili .html formatu i to je to
    Dakako, Notepad nije najbolje rješenje za početnike. Postoje brojni programi koji vam omogućuju izradu odličnih stranica, bez da napišete ijednu liniju koda, takozvani WYSIWYG programi. Ipak, savjetujem vam da proučavate kod dok ga pišete, jer tako mnogo toga možete upamtiti i znatno ubrzati svoj rad.
    Već unutar Microsoft Office-a možete naći program FrontPage. Iako vam ga nijedan ozbiljni web dizajner neće preporučiti, i to je dobro za početak. Moj osobni favorit je Macromedia HomeSite+ u kojem pišete kod u jednom prozoru, a klikom na drugi možete vidjeti kako stranica izgleda u browseru. Postoji i Macromedia Dreamweaver, koji je vjerojatno najčešće korišteni takav alat u svijetu i za početnike je vrlo jednostavan - ja sam na njemu radila oko godinu dana i za to vrijeme mnogo naučila. Dakako, ima još mnogo programa na tržištu, ali ovi su najučestaliji. Ovdje možete pronaći neke besplatne editore.

    Kako izgleda HTML kod?
    HTML kod sastoji se od mnoštva tagova. Tag je najmanja jedinica, dio koda. Možete prepoznati tag po tome što se nalazi unutar matematičkih operatora za veće i manje <> .
    Na početku svake HTML stranice nalazi se tag <HTML>. On označava početak stranice. Na kraju dokumenta naći ćete </HTML> - on označava kraj stranice. Sve što se nalazi unutar tih dviju oznaka, browser će interpretirati kao HTML stranicu, a ono što se nalazi izvan neće.
    Prvi tag unutar stranice je <HEAD>. On sadrži stvari koje određuju stranicu, kao naslov stranice, encoding, meta tagove i slično - taj tekst nećete vidjeti u browseru, ali sve što je ovdje napisano od velike je važnosti za stranicu.
    Negdje između <HEAD> i </HEAD> treba smjestiti <TITLE> </TITLE>. Između se upisuje naslov stranice, koji će se prikazati u naslovnoj traci (title bar).
    Nakon head taga, slijedi <BODY> </BODY>. Sve što upišete u taj tag bit će vidljivo na stranici. Ovdje ide tekst, slike, tablice, zvuk...
    Ovdje je primjer je najjednostavnije HTML stranice. Ako kopirate ovaj kod i pasteate ga u Notepad te stranicu spremite sa završetkom .html umjesto .txt, stranicu možete otvoriti u browseru (npr. Internet Explorer) i vidjeti kako izgleda. Za početak možete vježbati na ovom jednostavnom kodu dodajući mu razne druge sadržaje. Primjetite
    tag. On označava prekid retka (linebreak), što znači da tekst iza njega slijedi u drugom retku. Postoje i brojni drugi tagovi koje ovdje nisam spomenula, a trebati će vam u izradi stranice. Ali, njih ćete naučiti u drugim tutorialima.
    NAPOMENA: svejedno je pišete li HTML kod velikim ili malim slovima, ali odlučite se za jedno i držite se toga. Ako se odlučite za XHTML poželjno je da pišete tagove malim slovima.

    Code:
    <html>
    <head>
    <title>Ovo je naslov stranice</title>
    </head>
    <body>
    Ovo je najjednostavnija HTML stranica.
    Obogatite je onime što naučite &#58;&#41;
    </body>
    </html>

  2. Pure Evil, hvala na tvom postu od seljaka:

    ganya (14.01.10)

  3. #2
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Uvod u CSS

    CSS je skup pravila formatiranja koji se pridodaju HTML dokumentu. CSS nam omogućuje lakšu i bolju kontrolu nad HTML-om, te ubrzava uređivanje više dokumenata za koje primjenjujemo isto formatiranje.
    Pisanje CSS koda nije teško, a danas je najbolje i najprihvaćenije rješenje - mislim da su to dovoljni razlozi da čitate dalje.

    CSS se u dokument može integrirati na 3 načina:
    - izravno na određeni tag
    - na cijeli dokument unutar HEAD tag-a
    - na cijeli dokument, likanjem eksterne (vanjske) CSS datoteke

    Najprije pogledajte kako uopće CSS izgleda. U slijedećem primjeru prikazano je oblikovanje za BODY tag.

    Code:
    body &#123;
    background&#58; blue;
    font-family&#58; Arial;
    font-size&#58; 12px;
    color&#58; #000000;
    margin&#58; 0px;
    padding&#58; 20px;
    &#125;
    Prva riječ označava tag na koji se formatiranje odnosi (u ovom slučaju na BODY). Iza nje slijedi otvorena vitičasta zagrada, što znači da sada počinjemo nizati atribute. Atributi su određeni engleskom riječi (ili više njih), koje prilično logično objašnjavaju o kakvom se formatiranju radi. Ako je više riječi, povezane su crticom.
    Iza naziva formata slijedi dvotočka, a poslije nje pišemo vrijednost (boja, veličina itd.). Na kraju ide točka-zarez, što znači da je ovaj atribut gotov i prelazimo na slijedeći. Atribute smijemo pisati u istom redu, ali bitno je da ih odvojimo točka-zarezom! Nakon svih navedenih atributa, moramo zatvoriti vitičastu zagradu. To znači da smo završili formatiranje body taga i nakon toga možemo prijeći na slijedeći.
    Na ovom primjeru možemo vidjeti kako se definira boja pozadine, font, veličina teksta, boja teksta, margine i pomak od ruba - padding (slično kao margine, ali poslije ćete vidjeti da nije isto).

    Već sam navela kako postoje tri načina za pridavanje CSS-a dokumentu. Sada ću to na primjeru detaljnije objasniti.


    1. Izravno na tag
    Ovaj način se ne preporuča u formatiranju cijelog dokumenta, ali ako imamo samo jedan element na stranici kojeg želimo formatirati, onda može poslužiti.

    Code:
    <body style="background&#58; blue; font-family&#58; Arial; font-size&#58; 12px; color&#58; #000000; margin&#58; 0px; padding&#58; 20px">
    2. Unutar HEAD tag-a dokumenta
    Unutar HEAD taga obično se pišu informacije o dokumentu i dodaju se skripte i slično. To što napišemo u HEAD-u, vrijedi za cijeli dokument. Ovdje je prikazano kako izgleda HEAD tag dokumenta sa CSS-om

    Code:
    <html>
    <head>
    <title> naslov stranice </title>
    <style type="text/css">
    body &#123;
    background&#58; blue;
    font-family&#58; Arial;
    font-size&#58; 12px;
    color&#58; #000000;
    margin&#58; 0px;
    padding&#58; 20px;
    &#125;
    </style>
    </head>
    <body>
    Sadržaj stranice
    </body>
    </html>
    Ovaj način dati će isti rezultat kao i gore spomenuti. Korisnici bloga u uređivanju svog dizajna najčešće će se služiti ovim načinom.

    3. Eksterna datoteka
    Ovo je najbolji način, jer se tako može primjenjivati isti format na više datoteka. To se radi na jednostavan način: u Notepadu napišete CSS i spremite pod nazivom ime.css. Uploadate datoteku na server i zatim je linkate u sve dokumente za koje želite da sadrže taj CSS, a to radite pomoću ovog koda:

    Code:
    <link href="http&#58;//www.server.com/files/ime.css" rel="stylesheet" type="text/css" />
    Ako radite na ovaj način, biti će lako mijenjati dizajn - trebate promijeniti samo ime.css datoteku, uploadati je na server, a sve HTML datoteke će poprimiti novo formatiranje.
    Na Vrh  

  4. 2 Seljaka kaže: fala Pure Evil za ovaj post

    krizar (15.03.08),madi (10.10.08)

  5. #3
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Mijenjanje boja predloška

    Blog.hr ima ograničen broj predložaka i najvjerojatnije ćete na onome koji odaberete htjeti nešto promijeniti da bi se više poklapao s vašim ukusom, ili da bi dizajn bio originalniji. Za sve one koji su se odlučili upustiti u tu avanturu, ovdje su uputstva.

    Svaki dizajn predloška ima različiti CSS, ali svi su oni slični po svojim svojstvima.

    Dakle, otvorite prozor sa kodom dizajna (lijevo kliknite na Dizajn, pa u novom prozoru na Html kod predloška) i potražite gdje piše < ! - - Ovdje se upravlja izgledom bloga - - > - tamo počinje CSS.

    Za promjenu boje pozadine stranice, pronađite u CSS-u riječ "body" - u vitičastoj zagradi piše gomila vrijednosti,
    a vi tražite onu koja glasi "background". Iza dvotočke piše ili engleska riječ koja označava boju, ili njena heksadekadska vrijednost (hex color value).
    Tu riječ/vrijednost promijenite u boju koja vama treba. Ovdje možete pronaći 136 browser-safe boja sa njihovim hex vrijednostima. Naravno, možete upisati i neku vrijednost izvan tog ranga, ako znate koja vam treba.
    Hex code sastoji se od znaka # iza kojeg slijedi kombinacija od 6 brojeva ili slova.
    Zgodan alat koji sam pronalazi lijepe kombinacije boja jest ColorBlender.
    Za mijenjanje boje teksta u postu potražite ".sadrzaj", ako toga nema pogledajte ".post", a ako vam i to fali potražite "p".
    Unutar vitičaste zagrade potražite "color" i njenu vrijednost promijenite.
    Za promjenu fonta, pogledajte unutar te vitičaste zagrade gdje piše "font-family".
    Iza dvotočke piše jedan ili više fontova, što znači da možete definirati listu od više fontova, pa u slučaju da posjetitelj vašeg bloga nema prvi font na listi, browser će potražiti drugi, ako nema ni njega onda treći itd.
    Za prvi na listi odredite onaj koji želite, npr. "Trebuchet", a ostale pustite kako jesu.
    Za mijenjanje veličine trebate potražiti "font-size" atribut koji je izražen u pixelima (px) ili postocima (%). Upišite svoju vrijednost umjesto one predložene.
    Sve ovo što vrijedi za post, vrijedi i za naslove - h1, h2, h3 i h4. H1 će promijeniti naslov vašeg bloga, h2 je za naslove postova, h3 za dan u datum, a h4 za naslove boxeva - ako postoji.
    Za sve tagove možete promijeniti i poravnanje (align) tako da promijenite "text-align" (ili ako ne postoji, dodate ga sami) i kao vrijednost unesete left (za lijevo), right (desno), center (centrirano) i justify (poravnano i lijevo i desno).
    Boja linkova je vjerojatno nešto što bi također htjeli promijeniti - isto je kao sa tekstom posta, ali potražite tag "a" i "a:hover" - prvi je za normalne linkove, a drugi je kada preko linka prijeđete mišem.
    Ovo je najdetaljnije što mogu objasniti s obzirom na različitost predložaka. Pomoću ovih primjera pokušajte shvatiti kako sami promijeniti ostale elemente.
    Na Vrh  

  6. #4
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Umetanje slika

    Blog.hr dozvoljava u post umetanje slika fiksne veličine od 200x150 pixela.
    Da biste dodali sliku drugih dimenzija, trebate je uploadati na neki besplatni hosting slika i umetnuti kod u vaš post.
    Kada ste uploadali sliku, zapamtite njenu adresu - hosting slika obično će vam ovo dati, onaj pored kojeg piše direct-link.
    Zatim umetnite ovaj kod na mjesto gdje želite da ona stoji (u jedan post, HTML kod ili box).

    Code:
    [img]http&#58;//www.server.com/ime-slike.jpg[/img]
    Promijenite src u link do vaše slike i alt u opis slike (on se prikazuje ako iz nekog razloga nije moguće prikazati samu sliku, kako bi ljudi koji je ne mogu vidjeti mogli znati što je na njoj. Na primjer, slijepi čitatelji koji imaju on-screen reader čuti će opis slike). Možete i malo proširiti kod:

    Code:
    [img]http&#58;//www.server.com/ime-slike.jpg[/img]
    Border označava debljinu okvira, width širinu (u px), height visinu (u px), a align poravnanje (left ako želite da bude s lijeve strane teksta, kao što inače budu slike na Blog-u te right ako želite da bude s desne strane teksta). Postoji još atributa, no neće vam trebati.
    Za centriranu sliku treba vam tag u koji ćete smjestiti sliku, na primjer p kojem ćete postaviti centriranje teksta:

    Code:
    <p style="text-align&#58; center">[img]http&#58;//www.server.com/ime-slike.jpg[/img]</p>
    Na Vrh  

  7. #5
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Postavljanje slikovne pozadine

    Ako želite umjesto pozadine u boji imati neku sliku, postoji način da to napravite pomoću CSS-a (može se i bez upotrebe CSS-a, ali pošto je CSS tako super i kul onda ćemo ga koristiti ).
    Najprije trebate pronaći sliku. Dozvoljeni formati su GIF, JPG (JPEG) i PNG, s time da su prva dva učestalija.
    Onda je trebate uploadati na neki besplatni hosting.
    Zatim trebate zapamtiti njenu adresu (kopirajte u Notepad, gdjegod). Ako koristite ImageShack budite sigurni da ste uzeli pravi kod! Naći ćete ga pod "Direct-link to image". Ta bi adresa trebala izgledati ovako nekako: http://www.server.com/slika.gif što naravno ovisi o servisu koji koristite. Ja ći koristiti ovu adresu kao primjer, a vi je (žalosno što to moram naglašavati) izbrišite i upišite umjesto nje svoju!
    I sad nastupa ovaj tutorial. Napomena: ako ne znate gdje treba kopirati ove kodove, znači da ne znate dovoljno! Stoga trk na Uvod u CSS i Mijenjanje boja predloška.

    Postoje dvije vrste pozadina, nešto što ljudi zovu wallpapers i ono što zovu backgrounds. Razlika je u tome što su wallpaperi ogromne slike sa milijunima boja koje se koriste na desktopu računala, a backgrounds (osim što ih možete staviti na desktop) služe i kao pozadine web stranica. Vi možete postaviti bilo kakvu sliku za pozadinu, ali molim vas razmislite dobro - ako je slika prevelika i sadrži mnogo boja, trebati će dosta vremena da se učita. Repeating backgrounds ili patterns su male slike koje se nastavljaju same na sebe, kao pločice. Ako mnogo takvih malih sličica postavite jednu do druge, one će se stopiti u veću i tako tvoriti veliku površinu. To se događa sa svim slikama kada ih postavimo kao pozadinu, osim ako ne odredimo drugačije.

    Sliku postavljamo za pozadinu dokumenta tako da dodamo ovu liniju CSS-a:

    Code:
    body &#123;background-image&#58; url&#40;http&#58;//www.server.com/slika.gif&#41;; &#125;
    Ako želimo da se slika ponavlja samo u horizontalnom (vodoravnom) smjeru, tada kod izgleda ovako:

    Code:
    body &#123;background&#58; url&#40;http&#58;//www.server.com/slika.gif&#41; repeat-x; &#125;
    Da bi se slika ponavljala samo u vertikalnom smjeru, treba vam ovaj kod:

    Code:
    body &#123;background&#58; url&#40;http&#58;//www.server.com/slika.gif&#41; repeat-y; &#125;
    Ako ne želite da se slika ponavlja, onda je kod ovakav:

    Code:
    body &#123;background&#58; url&#40;http&#58;//www.server.com/slika.gif&#41; no-repeat; &#125;
    Ako želite da pozadinska slika stoji na mjestu dok scrollate sadržaj stranice, dodati ćete jednu liniju koja će osigurati da slika bude fiksirana:

    Code:
    body &#123;background&#58; url&#40;http&#58;//www.server.com/slika.gif&#41; fixed;&#125;
    Ako želite da slika bude centrirana i da se ne ponavlja:

    Code:
    body &#123;background&#58; url&#40;http&#58;//www.server.com/slika.gif&#41; center center no-repeat;&#125;
    Ako želite da slika bude na dnu desno, da se ne ponavlja i da bude fiksirana prilikom skrolanja:
    Code:
    body &#123;background&#58; url&#40;http&#58;//www.server.com/slika.gif&#41; right bottom fixed no-repeat;&#125;
    Ovo napisano na primjeru za BODY vrijedi i za DIV-ove, tablice (TABLE), linkove (A), paragrafe teksta (P)...
    Slika ne može biti rastegnuta preko cijelog ekrana!
    Putem CSS-a to je nemoguće, a zaobilaznim putem nije vrijedno truda.
    Ionako ne izgleda dobro već pikselizirano.
    Na Vrh  

  8. #6
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Postavljanje linkova

    Blog.hr ima ugrađenu skriptu za jednostavno umetanje linkova klikom na ikonicu link, ali ako želite sami postavljati linkove da bi nad njima imali bolju kontrolu, ovdje pročitajte kako.

    Osnovni kod za link je ovaj:

    Code:
    VAŠ TEKST
    Klikom na VAŠ TEKST browser će otvoriti stranicu http://www.server.com/stranica.html u novom prozoru (jer je target postavljen na "_blank").
    Umjesto VAŠ TEKST možete umetnuti kod za sliku, pa će ljudi klikom na sliku otići na tu adresu.
    Target određuje u kojem će se prozoru (window) ili okviru (frame) otvoriti stranica:
    _blank - browser otvara novi prozor za stranicu
    _self - otvara u postojećem prozoru
    _parent - ako stranica ima više frameova (okvira), otvara u glavnom prozoru a ne u frame-u
    nekoime - otvara u frame-u koji ima to ime
    Ako želite da se stranica otvori u istom prozoru, ili postavite target na "_self" ili izbrišite target, pa će vaš link izgedati ovako:

    Code:
    VAŠ TEKST
    Ako želite da vam klikom na link posjetitelji mogu poslati mail iz svog mail klijenta,
    tada ćete za adresu napisati mailto:vašeime@server.com, na primjer ovako:

    Povezivati možete i dijelove na istoj stranici. Ako se recimo na dnu vašeg bloga (u četvrtom boxu na primjer) nalazi nešto što želite da svi vide,
    ali ne možete to zgurati gore, tada možete u četvrti box staviti anchor (sidro), a u prvi box link do tog anchora.
    Tekst (ili sliku) na koji želite da ljudi dođu klikom na link, odredite ovako:

    Code:
    <a name="ime">Ovo je jako važno i morate pročitati.</a>
    Tekst tekst tekst tekst...
    Sam link treba izgledati ovako:

    Na Vrh  

  9. #7
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Bojenje scrollbara

    Za scrollbar je CSS-om moguće odrediti boje scrollbara, kako bi se bolje uklopile u dizajn.
    Ipak, moram napomenuti da to nije standard i efekt će biti vidljiv samo u Microsoft Internet Exploreru 6, a u ostalim browserima to se neće vidjeti.

    Ovako izgleda CSS kod u kojem je za body definirana boja scrollbara:
    Code:
    body &#123;
    background&#58; #CCCCCC;
    color&#58; #333333;
    font-family&#58; "Tahoma", arial;
    scrollbar-arrow-color&#58; #000000;
    scrollbar-track-color&#58; #CCCCCC;
    scrollbar-face-color&#58; #666666;
    scrollbar-highlight-color&#58; #999999;
    scrollbar-shadow-color&#58; #333333;
    scrollbar-3dlight-color&#58; #CCCCCC;
    scrollbar-darkshadow-color&#58; #000000;
    &#125;
    Na Vrh  

  10. #8
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Ukrašavanje teksta

    TEKST
    Code:
    <span style="font&#58; 12px Comic Sans MS, Trebuchet MS, sans-serif; color&#58; blue">VAŠ TEKST</span>
    [hr:a85e0c39e3]
    TEKST
    Code:
    VAŠ TEKST
    [hr:a85e0c39e3]
    TEKST
    Code:
    VAŠ TEKST
    [hr:a85e0c39e3]
    TEKST
    Code:
    <u>VAŠ TEKST</u>
    Na Vrh  

  11. #9
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Poravnanje teksta (alignment)

    Tekst se može poravnati putem HTML-a i putem CSS-a.
    [hr:2c5fbe737b]

    HTML

    Poravnanje s lijeve strane (na primjeru headinga h1):
    Code:
    <h1>VAŠ TEKST</h1>
    Poravnanje s desne strane:

    Code:
    <h1 align="right">VAŠ TEKST</h1>
    Centrirano:

    Code:
    <h1 align="center">VAŠ TEKST</h1>
    Poravnanje s i sdesna i slijeva:

    Code:
    <h1 align="justify">VAŠ TEKST</h1>
    [hr:2c5fbe737b]

    CSS

    Poravnanje s lijeve strane (na primjeru headera h1):

    Code:
    h1 &#123;text-align&#58; left;&#125;
    Poravnanje s desne strane:

    Code:
    h1 &#123;text-align&#58; right;&#125;
    Centrirano:

    Code:
    h1 &#123;text-align&#58; center;&#125;
    Poravnanje s i sdesna i slijeva:

    Code:
    h1 &#123;text-align&#58; justify;&#125;
    Ova poravnanja vrijede i za slike, tablice, div-ove... Ako pridate poravnanje BODY tag-u,
    svi elementi na stranici za koje nije posebno određeno poravnanje, imati će ono poravnanje koje je određeno za BODY.

    U HTML/CSS odnosu postoji hijerarhija, što znači da je CSS nadređen HTML-u.
    Ako nešto odredite u CSS-u, a poslije to u kodu odredite sa HTML-om, browser se na HTML neće obazirati,
    već će obraditi ono što je određeno CSS-om.
    Na primjer, ako u CSS-u napišemo ovo:

    Code:
    p &#123;
    font-family&#58; tahoma, verdana;
    font-size&#58; 12px;
    text-align&#58; left;
    &#125;
    i onda poslije u HTML-u napišemo ovo:
    Code:
    <p align="center">Vestibulum vitae libero. Phasellus dapibus tempor felis. Aliquam erat volutpat. Mauris sagittis.</p>
    taj paragraf će i dalje biti poravnat ulijevo jer je tako napisano gore u CSS-u. Ali, tome se može doskočiti.
    Kao što je napisano u Uvodu u CSS-a, CSS se može pisati i unutar samog tag-a (inline),
    pa ako za sve paragrafe želite da budu poravnati ulijevo (kao što ste gore odredili),
    a za taj jedan paragraf baš želite da bude centriran, onda će ovo raditi:
    Code:
    <p style="text-align&#58;center">Vestibulum vitae libero. Phasellus dapibus tempor felis. Aliquam erat volutpat. Mauris sagittis.</p>
    Na Vrh  

  12. #10
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Mijenjanje izgleda kursora

    Kako promijeniti izgled kursora-strelice? Evo primjera za linkove, ali kod će vrijediti za sve - BODY, DIV, P...

    Code:
    a&#58;hover &#123;cursor&#58; default;&#125;
    Riječ default zamijenite s jednom od slijedećih:
    crosshair, text, wait, help, e-resize, ne-resize, n-resize, nw-resize, w-resize, sw-resize, s-resize, move, pointer (ili hand).

    Moguće je i umjesto sistemskih kursora upotrijebiti i svoju sličicu, ali to će raditi samo i jedino u Internet Exploreru 6+,
    ostali će prikazati default kursor.
    Uploadajte sličicu u .cur ili .ani formatu (za izradu kursora treba vam Microangelo ili neki sličan program) na besplatan hosting.
    Kod je slijedeći:

    Code:
    a&#58;hover &#123;cursor&#58; url&#40;http&#58;//www.server.com/images/mojkursor.cur&#41;;&#125;
    Na Vrh  

  13. #11
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Otvaranje pop-up prozora sa određenim svojstvima

    Kada kliknete na neki link koji ste postavili, on se otvara u novom prozoru browsera sa svim svojstvima - puna veličina, meniji, scrollbari, status bar...
    Ako želite nešto od toga maknuti, ili odrediti u kojoj će se veličini prozor otvoriti, ili na kojoj poziciji ce se otvoriti, e za to vam treba JavaScript.
    Da napomenem, ljudi moraju imati JavaScript enabled da bi im link radio.
    Mali postotak ljudi isključuje JavaScript zbog nekih drugih skripti koje obično živciraju posjetitelje.

    Najjednostavniji primjer koji ću dati određuje samo širinu i visinu novog prozora, koji na sebi neće imati ništa osim samog sadržaja i naslovne trake:
    Code:
    KLIKNI ME!
    Za target smo postavili # pa postojeći prozor neće napraviti ništa (tj. ostaviti će našu stranicu otvorenu),
    ali funkcija onClick otvoriti će adresu http://www.stranica.com u prozoru imena imeprozora (ime nije bitno, ali mora pisati nešto) širine 500 i visine 400 pixela. Evo kako to radi:
    Klikni Ovdje

    Novom prozoru možete odrediti i pojavljivanje dijelova kao scrollbara, statusne trake itd., tako da nakon width=XXX,height=YYY odmah (bez razmaka!) dodate slijedeće vrijednosti, odvojene zarezom:
    scrollbars=yes - scrollbar
    resizable=yes - resize handle-ovi (promjenu veličine prozora)
    location=yes - address bar (ono gdje upisujete URL (adresu) stranice)
    menubar=yes - meni (File, Edit, View, Go...)
    status=yes - status bar (traka na dnu prozora gdje piše što se događa sa stranicom)
    toolbar=yes - ikonice back, forward, refresh, stop, home...
    Ako ne želite da se neki od njih prikaže, yes zamijenite sa no.

    Ako želite da se prozor otvori na točno određenoj poziciji, trebate dodati još par vrijednosti:
    left=XXX - udaljenost od lijevog ruba ekrana (za Internet Explorer)
    top=YYY - udaljenost od desnog ruba ekrana (za Internet Explorer)
    screenX=XXX - udaljenost od lijevog ruba ekrana (za Netscape Navigator)
    screenY=YYY - udaljenost od desnog ruba ekrana (za Netscape Navigator)
    Naravno, XXX i YYY zamijenite brojevima. Zašto posebno Netscape i IE? Jer su različiti.
    Ostali browseri prilagođavaju se jednome od ovoga, ali nije ni bitno kojega jer vi to samo lijepo stavite u kod, a ono što browser ne razumije - ignorirati će.
    Ako ne želite običan link nego one fancy gumbiće, kod izgleda ovako:

    Code:
    <input type="button" value="KLIKNI ME!" onClick="window.open&#40;'http&#58;//www.stranica.com', 'imeprozora', 'width=500,height=400'&#41;" />
    Na Vrh  

  14. #12
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Umetanje textbox-a

    Ako želite ljudima dati izvorni kod nečega, na primjer link do vaše stranice (kao što možete vidjeti na ovoj stranici),
    da bi bili sigurni kako će se kod prikazati u browseru a ne procesirati, textbox je dobro rješenje.
    Textbox umećete pomoću ovog koda:

    Code:
    <textarea cols="30" rows="2" name="code">neki tekst ili kod</textarea>
    Sa cols određujete njegovu širinu, a sa rows visinu.
    Name je poželjno odrediti i tu upišite bilo kakvo ime.
    Izgled textboxa je moguće definirati CSS-om:

    Code:
    textarea &#123;
    font-size&#58; 11px;
    font-family&#58; "verdana", "courier new", mono;
    background&#58; #CCCCCC;
    border&#58; #000000 2px solid;
    &#125;
    Na Vrh  

  15. #13
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Uokvirivanje slika

    Ovaj tutorial pokazat će vam nekoliko načina da slike na svojem blogu obrubite na jedinstven način,
    i to vrlo jednostavno, i neće izgledati ružno kao što to bude sa border atributom na img-u ili tablicama.
    Prva stvar koju trebate napraviti jest: potražite u kodu dizajna bloga slijedeću liniju:

    Code:
    < IMG SRC="<$SlikaPosta$>" ALT="<$SlikaTekst$>" hspace="10" ALIGN=LEFT border="0" >
    Taj ćemo kod malo promijeniti.
    Da bi svo formatiranje "prebacili" na div-ove, slika treba biti bez ikakvih atributa, osim alternativnog teksta:
    Code:
    < img src="<$SlikaPosta$>" alt="<$SlikaTekst$>"/ >
    Sada ćemo sliku zaokružiti jednim div elementom, za koji ćemo onda odrediti pozicioniranje i sve što uz to ide.

    Code:
    < div class="slika" >
    < img src="<$SlikaPosta$>" alt="<$SlikaTekst$>"/ >
    < /div >
    Sada malo CSS-a:

    Code:
    img &#123; border&#58; 0px; &#125;
    .slika &#123; width&#58; 200px;
    height&#58; 150px;
    float&#58; left;
    margin-right&#58; 10px;
    &#125;
    Postavljanjem border: 0px za sve slike rezultirati će time da se borderi, granice, okviri, kakogod - neće prikazivati.
    Savjetujem vam da tu liniju UVIJEK imate u CSS-u, jer vjerojatno ne želite one ružne defaultne bordere koje browseri generiraju ako ne odredite da ga nema.
    width i height u .slika klasi objašnjavaju sami što je njihova svrha.
    float: left će narediti browseru da pozicionira sliku na lijevu stranu teksta, te da tekst teče s njene desne strane cijelom njenom visinom.
    Isto kao i onaj ALIGN=LEFT gore, samo naravno ispravnije.
    margin-right: 10px će napraviti mali razmak s desne strane da slika ne bude baš prilijepljena za tekst.
    Sada ću navesti nekoliko primjera kako se slike mogu uokvirivati, a vi kombinirajte.

    Jednostavan okvir
    Ovakav se može dobiti i sa border atributom, ali neće izgledati jednako u svakom browseru, pa je ovaj način bolji:

    HTML
    Code:
    < div class="okvir" >
    < div class="slika" >
    < img src="<$SlikaPosta$>" alt="<$SlikaTekst$>"/ >
    < /div >
    < /div >
    CSS
    Code:
    img &#123; border&#58; 0px; &#125;
    .okvir &#123; width&#58; 220px;
    height&#58; 170px;
    float&#58; left;
    margin-right&#58; 10px;
    background-color&#58; #666666;
    &#125;
    .slika &#123; width&#58; 200px;
    height&#58; 150px;
    position&#58; relative;
    top&#58; 10px;
    left&#58; 10px;
    &#125;
    Pojašnjenje koda: div element klase okvir ima za pozadinu onu boju koju želimo za naš okvir.
    Njegova širina i visina su širina/visina slike + dvostruka debljina okvira - u ovom slučaju, ako želimo okvir širine 10 pixela: 200px + 2 x 10px = 220px
    Div slika ima relativno pozicioniranje u odnosu na div u kojem je smješten, a smješten je unutar div-a okvir i njegov pomak je za 10 pixela ulijevo i dolje,
    kako bi bio centriran.

    Višestruki okvir

    HTML
    Code:
    < div class="okvir1" >
    < div class="okvir2" >
    < div class="okvir3" >
    < div class="slika" >
    < img src="<$SlikaPosta$>" alt="<$SlikaTekst$>"/ >
    < /div >< /div >< /div >< /div >
    CSS
    Code:
    img &#123; border&#58; 0px; &#125;
    .okvir1 &#123; width&#58; 222px;
    height&#58; 172px;
    float&#58; left;
    margin-right&#58; 10px;
    background-color&#58; #666666;
    &#125;
    .okvir2 &#123; width&#58; 220px;
    height&#58; 170px;
    text-align&#58; center;
    background-color&#58; #CCCCCC;
    position&#58; relative;
    top&#58; 1px;
    left&#58; 1px;
    &#125;
    .okvir3 &#123; width&#58; 204px;
    height&#58; 154px;;
    background-color&#58; #999999;
    position&#58; relative;
    top&#58; 8px;
    left&#58; 8px;
    &#125;
    .slika &#123; width&#58; 200px;
    height&#58; 150px;
    position&#58; relative;
    top&#58; 2px;
    left&#58; 2px;
    &#125;
    Pojašnjenje koda: Ovog puta div slika je obrubljen sa više div-ova i svaki od njih ima svoju pozadinu.

    Slikovni okvir

    HTML
    Code:
    < div class="okvir" >
    < div class="slika" >
    < img src="<$SlikaPosta$>" alt="<$SlikaTekst$>"/ >
    < /div >< /div >
    CSS
    Code:
    img &#123; border&#58; 0px; &#125;
    .okvir &#123; width&#58; 240px;
    height&#58; 190px;
    float&#58; left;
    margin-right&#58; 10px;
    background-image&#58; url&#40;link do slike&#41;;
    &#125;
    .slika &#123; width&#58; 200px;
    height&#58; 150px;
    position&#58; relative;
    top&#58;20px;
    left&#58; 20px;
    &#125;
    Pojašnjenje koda: HTML kod je identičan prvom primjeru, a CSS je vrlo sličan, s razlikom u tome što je umjesto pozadinske boje postavljena slika.
    Na Vrh  

  16. #14
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Tablice

    Svaka tablica ima redove i stupce.
    Naša HTML tablica ima sukladno tome, nekoliko elemenata, zato je malo kompleksnija za kodiranje ako koristite više redova i stupaca,
    posebno ako se neki od njih rastežu preko nekoliko redova/stupaca i slično.
    Osnovni elementi tablice su < table > , < tr > , < th > i < td >.
    Evo kako počinjemo kreirati tablicu tagom table:

    Code:
    <table>
    
    </table>
    Ovaj tag označava početak i završetak tablice.
    Sve što napišemo unutra bit će shvaćeno kao tablični podaci, i zato moramo paziti kako ih pišemo.
    Tablica je u HTML-u podijeljena na redove. Ovako to izgleda ako nadopunimo gornji primjer tagovima tr (table row):

    Code:
    <table>
    <tr> 
    
    </tr> 
    <tr> 
    
    </tr> 
    <tr> 
    
    </tr> 
    </table>
    Mislim da ovaj kod nije potrebno previše objašnjavati, očito je da sadrži tri retka.
    A sada ćemo dodati ćelije na najjednostavniji mogući način tako da svaki redak ima jednak broj stupaca.
    Učinit ćemo to pomoću tag-a td (table data):

    Code:
    <table>
    <tr> 
    <td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
    </tr> 
    <tr> 
    <td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
    </tr> 
    <tr> 
    <td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
    </tr> 
    </table>
    Da bi lakše razumjeli, postavljene su tablične vrijednosti da odgovaraju stupcu i retku u kojem se nalaze - stupce sam označila brojevima, a retke slovima.
    E sada, to se može još bolje srediti tako da dodamo zaglavlja stupcima, pomoću tag-a th (table header). Dodati ćemo još jedan redak iznad postojećih i u njega smjestiti zaglavlja.

    Code:
    <table>
    <tr> 
    <th>stupac 1</th><th>stupac 2</th><th>stupac 3</th>
    </tr> 
    <tr> 
    <td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
    </tr> 
    <tr> 
    <td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
    </tr> 
    <tr> 
    <td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
    </tr> 
    </table>
    To je ono što će većini vas biti dovoljno.
    No, moguće je i svakom retku dodati zaglavlje tako da dodamo u sve retke po još jednu ćeliju th:

    Code:
    <table>
    <tr> 
    <td> </td><th>stupac 1</th><th>stupac 2</th><th>stupac 3</th>
    </tr> 
    <tr> 
    <th>redak A</th><td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
    </tr> 
    <tr> 
    <th>redak B</th><td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
    </tr> 
    <tr> 
    <th>redak C</th><td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
    </tr> 
    </table>
    Eto, naša tablica je gotova. Ima ukupno 4 retka i 4 stupca, od kojih 3 retka i 3 stupca sadrže podatke.
    Sad je samo treba urediti pomoću CSS-a.
    Vi se naravno možete igrati sa pojedinim vrijednostima i dobiti drugačiji rezultat.

    Code:
    body &#123;
    text-align&#58; center;
    font-family&#58; "tahoma", verdana;
    font-size&#58; 11px;
    margin&#58; 0px;
    &#125;
    table &#123;
    border&#58; #666666 1px dotted;
    &#125;
    th &#123;
    color&#58; #DDDDDD;
    background-color&#58; #666666;
    font-size&#58; 11px;
    font-weight&#58; normal;
    padding&#58; 4px;
    border&#58; 0px;
    &#125;
    td &#123;
    color&#58; #666666;
    background-color&#58; #DDDDDD;
    font-size&#58; 11px;
    font-weight&#58; normal;
    padding&#58; 4px;
    border&#58; 0px;
    &#125;
    Primjer tablice opisane u ovom tutorialu:

    Na Vrh  

  17. #15
    Avlijaner Pure Evil's Avatar
    Član od
    Dec 2005
    Lokacija
    U srcima svih
    Postova
    26,761
    Zahvala
    79
    3,504 x hvala u 1,987 postova

    Normalno Prilagođavanje besplatnog predloška

    Izgled vašeg bloga ne mora biti ograničen na predloške koje vam nudi Blog.hr!
    Ako nemate afinitete prema crtanju / uređivanju slika, možete pronaći mnogo gotovih (besplatnih!) predložaka za vaš blog.
    U ovom postu govorim o predlošcima koje možete naći posvuda na Internetu.

    Gdje pronaći predložak?

    Na internetu.
    Predloške možete naći pod engleskim izrazima templates, designs ili layouts.
    Za traženje može vam poslužiti search engine, ali ovdje se nalazi velik popis web stranica koje ih nude.

    Kako to da ljudi daju dizajne besplatno?

    Eto, ima dobrih ljudi.
    No, svakako pročitajte uvjete korištenja na stranici čiji predložak vas zanima.
    Svaka takva stranica ima nekakve Rules, Terms of use ili Terms of service i obavezni ste ih pročitati.
    Ako ne pročitate, nemojte poslije cmizdriti kako vas pita neki password ili slično.
    Ljudi se na različite načine osiguravaju da korisnici pročitaju te uvjete.
    Ako se ne slažete sa uvjetima, jednostavno predložak nemojte koristiti. To je sva mudrost.
    Ako na predlošku piše ime stranice gdje ste ga downloadali, nemojte ga micati - onaj tko vam ga je dao besplatno na korištenje ima pravo da bude spomenut kao autor. Ako ne želite da na vašem predloëšku piše nečije ime, onda ga kupite.

    Kako odabrati pravi?

    Dobar predložak odlikovati će se brzinom učitavanja te lijepim izgledom i u browserima osim Internet Explorera.
    Naravno, neće svi biti pogodni za vaš blog.
    Preporučam da potražite layout iz kategorije div (također poznat pod nazivima divider, layer ili CSS - njega ćete najlakše prilagoditi) ili eventualno table. iframe (ili frame) nikako nije za blog.

    Prilagođavanje predloška

    Za to je potrebno znati nešto HTML-a. Ako ne znate baš ništa, žao mi je, ali neće vam uspjeti.
    Ovo je najkonkretnije uputstvo što vam mogu dati, budući da se svi predlošci razlikuju i svaki autor ima svoj način pisanja koda.
    Ipak, ovo je zajedničko svima.
    Otvorite index.html (vrlo vjerojatno je da se file tako zove) u Notepadu (ili nekom editoru koji koristite, ali namjestite na code view).
    Prva stvar koju trebate učiniti je sve slike uploadati na neki besplatan server za slike.
    Zatim morate u samom fileu index.html promijeniti adrese tih slika u nove.
    Ako imate i neku .css datoteku, tamo također trebate promijeniti adrese slika.
    Zatim, negdje potražite u kodu:

    Code:
    <link rel="stylesheet" type="text/css" href="nekoime.css" >
    i umjesto toga napišite:

    Code:
    <style type="text/css">  </style>
    - tamo kopirajte cijeli sadržaj .css datoteke.
    Sad potražite u file-u gdje se nalazi sadržaj.
    Vjerojatno je označen komentarima.
    Izbrišite sadržaj koji je tamo, i umjesto toga ubacite OVAJ KOD:
    Code:
    <Blog>
    	
    
    <Datum>
    <h4><$DanPosta$>, <$DatumPosta$></h4>
    </Datum>
    	
    
    <Naslov><h3><span><$NaslovPosta$></span></h3></Naslov>
    			
    
    <Slika>
    [img]<$SlikaPosta$>[/img]" class="slika" align="left">
    </Slika>
    
    			
    <p class="p1"><span><$TekstPosta$></span></p>	
    
    <div class="ispodposta">
    
    
    - <$VrijemePosta$> - 
    Komentari &#40;<$BrojKomentara$>&#41; - 
    Isprintaj - 
    #
    
    
     
    <Komentari>
    <li class="komentari"><$TekstKomentara$> &#40;<$AutorKomentara$> <$DatumKomentara$> <$VrijemeKomentara$>&#41;[/i]
    
    </Komentari>
    
    
    </div>		
    			
    </Blog>
    (to je blog kod i bez njega vam se postovi neće prikazivati).

    Tamo gdje se nalaze linkovi (stupac s lijeve ili desne strane) ubaciti ćete boxeve.
    Izbrišite postojeći sadržaj i na to mjesto kopirajte OVAJ KOD:

    Code:
    <Logo>
    
    
    [img]<$Logo$>[/img]" class="logo"></p>
    </Logo>
    
    
    
    <$Kalendar$>
    
    
    
    Komentari On/Off
    
    
    <!-- Molimo da ne micete ovu varijablu jer
    ce se koristi za eventualne obavijesti. Hvala! -->
    <$Banner$>
    
    
    
    <Box1>
    <h3><$NaslovBoxa$></h3>
    
    
    <$TekstBoxa$></p>
    </Box1>
    
    
    
    <Box2>
    <h3><$NaslovBoxa$></h3>
    
    
    <$TekstBoxa$></p>
    </Box2>
    
    
    
    <Box3>
    <h3><$NaslovBoxa$></h3>
    
    
    <$TekstBoxa$></p>[/list]
    </Box3>
    
    
    
    <Box4>
    <h3><$NaslovBoxa$></h3>
    
    
    <$TekstBoxa$></p>
    </Box4>
    Kada ste sve to napraviti, odite u blogeditor (Dizajn > HTML kod dizajna ).
    Izbrišite sav kod iz blogeditora.
    Sada kopirajte sadržaj datoteke index.html u blogeditor. Spremite. Pogledajte blog.
    Ako izgleda kao originalni predložak koji ste željeli, onda ste sve napravili kako treba.
    Ako se ne vide slike, mora da niste upisali ispravne adrese.
    Ako se ne vide postovi ili boxevi, niste kopirali dobar kod.
    Ako vam postovi ili komentari nisu lijepi kao prije, onda bi bilo dobro da ste sačuvali kopiju starog bloga.
    Kopirajte iz starog koda bloga linije .komentari, .kalendar, .quoted, h1, h2, h3, h4 uglavnom sve što želite da bude kao prije.
    i pasteajte taj kod NA VRH odmah ispod linije < style type="text/css" >.
    Tako ćete osigurati da sve izgleda kao prije, a ako je u samom CSS-u predloška definiran izgled nekih od tih tagova,
    onda će oni biti u skladu sa predloškom.

    Ovo je prilično općenito i zato napominjem, morate biti upoznati sa HTML-om i CSS-om da biste uspjeli ovo napraviti kako spada.
    Na Vrh  

Tags for this Thread

Bookmarks

Bookmarks

Pravila Postanja

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •