Tutor.Blog je online priručnik na hrvatskom jeziku, za lakše snalaženje u
HTML i CSS kodu.
Ovdje možete naučiti kako učiniti svoj blog vizualno privlačnim, ali i osnove dizajniranja
web stranica koje ne moraju biti nužno vezane uz blog.
Ovaj blog nije povezan sa uredništvom Blog.hr-a, te ne pruža podršku za tehničke probleme.
Znate čemu tablice inače služe? Super. Pa ovo je tutorial kako ih sastaviti.
Inače, ne preporuča se da se tablice koriste u izradi layouta, ali ako ste početnik neće vam nitko zamjeriti :)
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:
<table>
<!-- ovdje će ići sadržaj tablice -->
</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):
<table>
<tr> <!-- početak prvog retka -->
<!-- ovdje će ići sadržaj retka -->
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<!-- ovdje će ići sadržaj retka -->
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<!-- ovdje će ići sadržaj retka -->
</tr> <!-- kraj trećeg retka -->
</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)
<table>
<tr> <!-- početak prvog retka -->
<td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
</tr> <!-- kraj trećeg retka -->
</table>
Da bi lakše razumjeli, postavila sam 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.
<table>
<tr> <!-- početak nultog retka -->
<th>stupac 1</th><th>stupac 2</th><th>stupac 3</th>
</tr> <!-- kraj nultog retka -->
<tr> <!-- početak prvog retka -->
<td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
</tr> <!-- kraj trećeg retka -->
</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:
<table>
<tr> <!-- početak nultog retka -->
<td> </td><th>stupac 1</th><th>stupac 2</th><th>stupac 3</th>
</tr> <!-- kraj nultog retka -->
<tr> <!-- početak prvog retka -->
<th>redak A</th><td>ćelija A-1</td><td>ćelija A-2</td><td>ćelija A-3</td>
</tr> <!-- kraj prvog retka -->
<tr> <!-- početak drugog retka -->
<th>redak B</th><td>ćelija B-1</td><td>ćelija B-2</td><td>ćelija B-3</td>
</tr> <!-- kraj drugog retka -->
<tr> <!-- početak trećeg retka -->
<th>redak C</th><td>ćelija C-1</td><td>ćelija C-2</td><td>ćelija C-3</td>
</tr> <!-- kraj trećeg retka -->
</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 :) Ja sam se odlučila za ovakvo oblikovanje. Vi se naravno možete igrati sa pojedinim vrijednostima i dobiti drugačiji rezultat :)
Toliko ljudi danas ima svoj blog, osobnu stranicu ili čak službenu stranicu, a mnogo njih nije ni svjesno da time vrši izdavačku djelatnost - sve što objavite može pronaći i vidjeti bilo tko, a isto tako i vi možete doći do onoga što drugi objave - zato mislim da je nužno biti informiran o vlastitim i tuđim pravima.
Ako sada želite samo otići i ne pročitati tekst do kraja, reći ću vam nešto: zakoni vrijede jednako za sve ljude, bez obzira na to poznavali vi te zakone ili ne - vaše neznanje neće vas opravdati.
Copyright je doslovno prevedeno pravo na reproduciranje - to znači da isključivo vlasnik tog prava smije objavljivati i mijenjati svoj rad, dok je drugima to zabranjeno. Sve što je materijalno i opipljivo može biti zaštićeno - slike, tekstovi, zvuk, izvorni kod, pokret, miris... Sve to možete napisati, nacrtati, fotografirati, projcirati, snimiti na audio/video vrpcu, disketu, CD i slično i to je ono što vaš rad čini opipljivim.
Ideju (koja nije materijalizirana, dakle samo je u vašoj glavi) nije moguće zaštititi, pa ako ispričate nekome svoj naum, a taj netko to izvede prije nego vi stignete, nemate se na temelju čega žaliti.
EDIT: Pojavio se CARNet-ov online udžbenik Uvod u zaštitu intelektualnog vlasništva u Republici Hrvatskoj! Svakako preporučam da ga pročitate. Prema njihovim riječima "Namjera autora i recenzenata je omogućiti navedenoj populaciji jednostavan i koncizan uvod u koncept intelektualnog vlasništva i njegove pojavne oblike kako bi kroz jednostavne primjere pokazali praktičnu korist od poznavanja sustava zaštite intelektualnog vlasništva. Ovo je posebno važno kako bi budući kreativni elementi društva, bilo znanstveni ili umjetnički, mogli na vrijeme zaštititi svoj talent i trud."
Najsigurniji način je da objavljujete samo vlastite radove.
Ako objavljujete tuđe, najprije provjerite dozvoljava li to autor. Ako on traži da navedete njega kao izvor, učinite to - pored slike napišite "fotografija by Kralj Tomislav" ili slično. Ako autor kaže da se radovi ne smiju koristiti, nemojte ih koristiti. U slučaju da ne znate dozvoljava li netko upotrebu ili ne, pošaljite mu e-mail prije no što objavite njegovu sliku i pitajte dozvolu.
Ako nađete sliku pomoću Google-a, nemojte je samo spremiti i misliti da je stvar riješena. Uz samu sliku Google uvijek otvara i stranicu sa koje potječe - pogledajte što tamo piše i što vlasnik slike misli o tome da je drugi uzimaju.
Ako pišete citate pjesama i slično, napišite čiji su - ako ne navedete autora, ljudi bi mogli pomisliti da su vaši, a to je kršenje copyright-a jednako kao da ste napisali "ovo je moj rad".
Fair use
U svrhu pisanja članaka, znanstvenih radova (seminara, maturalne radnje, referata...) i knjiga dozvoljeno je koristiti tuđe radove, ali morate navesti izvor. Čak i ako ne navedete točan citat, navođenje literature je obavezno.
Dodatne informacije
Ovdje je još nekoliko zanimljivih linkova koji se tiču copyright-a. Svakako vam preporučam da ih pogledate, jer u ovom kratkom tekstu nisam mogla ulaziti u detalje.
Zakon o autorskom pravu i srodnim pravima - obavezno štivo za svih koji stvaraju autorska djela. Kao što i sami možete pročitati, kazna za kršenje prava je i do 5 godina zatvora. Pa se vi zezajte.
What is Copyright? - odlična stranica sa mnogo detalja (čitala sam je oko pola sata x_x), poslužila mi je kao izvor informacija za pisanje ovog teksta.
CreativeCommons - napredni način zaštite svojih radova. Kreirajte svoju licencu!
What is Copyleft? - ako, naprotiv, radite besplatan software i želite da ga drugi ljudi mogu nadograđivati, možete se na određeni način odreći svojih prava
10 Big Myths about copyright explained - 10 Velikih Mitova o copyright-u - posebno obratite pažnju na onaj "sve što je objavljeno na Internetu besplatno je"
Napominjem da do pisanja ovog posta nisam to nikad isprobala, pa evo malenog step-by-step postupka kako se "pretplatiti" (subscribe) na RSS feed-ove.
Neću ulaziti u samu teoriju pošto sama o njoj ne znam mnogo. Ako vas zanimaju detalji, pogledajte ovdje. Bit tih RSS feed-ova je da u kraćem vremenu dođete to novih postova vaših omiljenih blogera, što je posebno važno ako ih pratite mnogo. Ono što vam se neće svidjeti jest da je sve pisano u istom redu, ne prikazuju se slike, a negdje ni naša slova. Ne možete ni pisati komentare (ako možete, objasnite kako - i ja sam n00b u ovome..).
Postoji više čitača (readera) koje možete koristiti, na primjer RssReader i FeedReader, no pošto već imam Thunderbird koji je mail klijent, news i RSS reader u jednom, objasnit ću postupak na njemu.
1. Download i instalacija
Na Mozilla Thunderbird stranici kliknite na Download Now! ako ste korisnik Windowsa, a ako imate neku drugi operativni sustav kliknite na Other Systems and Languages. Kada je download gotov, pokrenite instalaciju. Samo slijedite postupak, klikćite na "Next", sve radi na principu "nemo'š fulat'".
Moguće je importirati e-mail poruke i adresar iz Outlooka i Eudore, ako ih koristite. No, to eksperimentirajte sami. :)
2. Kreiranje accounta
Mail, news i RSS accounte kreirate u Tools > Account Settings... - za novi RSS account kliknite na Add Account gumb u donjem lijevom uglu.
Odaberite RSS News & Blogs i Next.
Upišite ime accounta i Next. Finnish.
3. Dodavanje feed-ova
Sad u prozoru lijevo (u Account Settings još uvijek) potražite ime accounta koje ste zadali, po deafaultu News & Blogs. Klik na njega i prikazat će se u desnom dijelu panela gumb Manage Subscriptions.... Klik.
Otvara se novi prozorčić. Add.
Unesite adresu bloga koji želite pratiti u obliku: http://imebloga.blog.hr/rss.xml
Trebat će malo vremena da se blog učita, a onda vas vraća na Manage Subscriptions i možete dodati novi. Kad ste gotovi, klik na Ok.
Na desnoj strani imate neka polja koja možete označiti da bi odabrali kada će se blogovi učitavati. Ja sam namjestila Check new articles at startup.
4. Čitanje blogova
Izađite iz Account Managera.
Na lijevoj strani nalaze se folderi. Kliknite na + kod imena RSS accounta koji ste maloprije dodali i prikazat će se lista blogova. Kliknite na neki blog i prikazat će se popis postova, koji možete sortirati tako da klikćete na Subject ili Date na vrhu, iznad samih postova.
Klikom na ime posta on se prikazuje u većem prozoru na dnu. Dvostrukim klikom otvorit će se u zasebnom prozoru.
Naravno da tutor.blog nije jedini blog koji se bavi pitanjem web-designa. Naišla sam na neke, ne nužno sa Blog.hr, na koje bi vas uputila u daljnje istraživanje.
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:
<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:
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:
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:
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:
Kako promijeniti izgled kursora-strelice? Evo primjera za linkove, ali kod će vrijediti za sve - BODY, DIV, P...
a:hover {cursor: default;}
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:
Pošto nije uputno koristiti baš bilo koje slike koje nađete putem google searcha jer su vjerojatno zaštićene copyrightom, potražite slike na brojnim drugim stranicama koje dozvoljavaju upotrebu objavljenih slika, ali i dalje ćete vjerojatno trebati navesti izvor slike. Evo nekih stranica koje sam pronašla.
DeviantART - koristite samo slike iz stock galerije! ostale slike nisu za slobodnu upotrebu.
Iako sam ovo već spomenula u postu Mijenjanje boja predloška, ne bi bilo loše tome posvetiti poseban post :)
Tekst se može poravnati putem HTML-a i putem CSS-a.
HTML
Poravnanje s lijeve strane (na primjeru headinga h1):
<h1>VAŠ TEKST</h1>
Poravnanje s desne strane:
<h1 align="right">VAŠ TEKST</h1>
Centrirano:
<h1 align="center">VAŠ TEKST</h1>
Poravnanje s i sdesna i slijeva:
<h1 align="justify">VAŠ TEKST</h1>
CSS
Poravnanje s lijeve strane (na primjeru headera h1):
h1 {text-align: left;}
Poravnanje s desne strane:
h1 {text-align: right;}
Centrirano:
h1 {text-align: center;}
Poravnanje s i sdesna i slijeva:
h1 {text-align: justify;}
Dakako, 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:
p {
font-family: tahoma, verdana;
font-size: 12px;
text-align: left;
}
i onda poslije u HTML-u napišemo ovo:
<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 sam napisala u Uvodu u CSS, 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:
<p style="text-align:center">Vestibulum vitae libero. Phasellus dapibus tempor felis. Aliquam erat volutpat. Mauris sagittis.</p>
CSS formatiranje dokumenta odnosi se na cijele blokove teksta, ali ako želite ukrasiti samo jednu ili nekoliko riječi, to radite sa HTML kodovima koji su ovdje predloženi. Kopirajte kod iz textboxa ispod primjera, umetnite gdje želite i promijenite VAŠ TEKST u tekst koji želite.
Možda ćete htjeti na svoj blog postaviti brojače posjeta, shoutboxeve, ankete, imati svoju knjigu gostiju... Ovdje su linkovi do nekih najpopularnijih (najboljih?) servisa koji vam omogućavaju da samo copy/paste-ate kod koji će vam dati, a o JavaScriptu, CGI-u, PHP-u i ostalim skriptnim jezicima ne morate znati baš ništa :P
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:
Blog.hr ima ugrađenu skriptu za jednostavno umetanje linkova klikom na ikonicu , ali ako želite sami postavljati linkove da bi nad njima imali bolju kontrolu, ovdje pročitajte kako.
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:
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:
<a href="mailto:ime@yahoo.com">Pošalji mi mail!</a>
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:
<a name="ime">Ovo je jako važno i morate pročitati.</a><br />Tekst tekst tekst tekst...
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:
body {background-image: url(http://www.server.com/slika.gif); }
Takva slika će se ponavljati cijelom širinom i visinom dokumenta.
Najčešće greške su da linkate sliku ovako:
body {background-image: url=(http://www.server.com/slika.gif); } KRIVO!
...ili ovako:
body {background-image: url(<img src="http://www.server.com/slika.gif">); } KRIVO!
...ili da ovaj kod upišete iza <body>:
<body>
body {background-image: url(http://www.server.com/slika.gif); } KRIVO!
Čitajte pažljivo što sam napisala, ovo su gotovi primjeri, prilično jednostavni za početak.
Ako želimo da se slika ponavlja samo u horizontalnom (vodoravnom) smjeru, tada kod izgleda ovako:
body {background: url(http://www.server.com/slika.gif) repeat-x; }
Da bi se slika ponavljala samo u vertikalnom smjeru, treba vam ovaj kod:
body {background: url(http://www.server.com/slika.gif) repeat-y; }
Ako ne želite da se slika ponavlja, onda je kod ovakav:
body {background: url(http://www.server.com/slika.gif) no-repeat; }
Ako želite da pozadinska slika stoji na mjestu dok scrollate sadržaj stranice, dodati ćete jednu liniju koja će osigurati da slika bude fiksirana:
body {background: url(http://www.server.com/slika.gif) fixed;}
Ako želite da slika bude centrirana i da se ne ponavlja:
body {background: url(http://www.server.com/slika.gif) center center no-repeat;}
Ako želite da slika bude na dnu desno, da se ne ponavlja i da bude fiksirana prilikom skrolanja:
body {background: url(http://www.server.com/slika.gif) right bottom fixed no-repeat;}
Ovo što sam objasnila 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 internetu možete pronaći mnogo stranica sa besplatnim predlošcima za stranice koje možete upotrijebiti za vaš blog. Da biste ih koristili trebate hostati slike (i eventualno eksternu CSS datoteku) na neki besplatni hosting i malo izmijeniti kod da bi ga prilagodili vašem blogu. Ovi predlošci nisu kodirani za Blog pa zahtijevaju određeno znanje HTML-a.
Korisnicima Blog.hr-a najčešće treba besplatni gosting slika, ali možda vam treba i hosting za stranice. Ovdje su neki linkovi da bi vam skratili traženje :)
Hosting slika
BlogSpremnik - svi slikovni formati + css, js, txt, doc, xls, pdf i swf
Ako vam ni sve ovo nije pomoglo, potražite na stranici ClickHereFree.
Besplatne domene
Napomena: ovo nisu prave domene, vaseime.com, vaseime.hr i slično, već redirekcije. Ako vam je adresa hostinga predugačka (npr. http://free-zg.t-com.hr/vaseime/), možete ih skratiti na ovaj način.
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).
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:
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:
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.
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.
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.
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
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:
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 :)
U slijedećim tutorialima naučiti ćete više o samom načinu rada s CSS-om na blogu.
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. 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 <br /> 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.
<html>
<head>
<title>Ovo je naslov stranice</title>
</head>
<body>
Ovo je najjednostavnija HTML stranica.<br />Obogatite je onime što naučite :)
</body>
</html>
Ako želite na svoj blog dodati link do Tutor.blog-a, kopirajte kod iz textbox-a
(Desni klik --> Select All --> Copy) na mjesto gdje želite da se link pojavi. Hvala! :D
, ali ako želite sami postavljati linkove da bi nad njima imali bolju kontrolu, ovdje pročitajte kako.
