Babylon Designs

Html Tutorijal - (3) Liste, Linkovi, Slike

2007-09-17T11:47:00.000+03:00

U ovom (trećem) delu tutorijala biće objašnjeno kako da uskladite i definišete liste, linkove i slike u dizajnu vašeg bloga. Sve tri stavke uglavnom se rade po defaultu ili onako kako je unapred određeno samom izvornom definicijom Html-a, ali kao i sve ostalo i ovo se može prilagoditi vašim potrebama. Cilj ovih tutorijala jeste da se izađe iz okvira unapred definisanih podešavanja i da imate potpunu kontrolu nad svojim dizajnom i izgledom svog bloga. Uživajte.

*** Html Liste i njihovo definisanje:

Za šta se sve koriste liste u dizajnu jednog bloga? Vrlo često u navigacionom meniju bloga, pri popisivanju arhiviranih unosa, prethodnih postova, pravljenja listi linkova i prijatelja. Takođe se vrlo često koriste za davanje forme komentarima koji se prikazuju odmah ispod posta.

Liste u jeziku HTML jesu navođenje, popisivanje onih delova teksta, koji se ne mogu svesti na prethodno opisane elemente kao što su pasus, odeljak, i slično. Razlikuju se tri vrste lista (ili popisa): opisne, numerisane/određene i nenumerisane/neodređene liste.

Opisne liste opisuju strukturu koja odgovara listi pojmova koji se definišu. Otuda se opisne liste nazivaju i definicione liste (engl. definition list) i ograđuju se zagradama <DL> i </DL>. Stavke ovih listi dele se na definicioni Pojam ili <DT> (engl. term) i na njegov Opis ili <DD> (engl. definition):

<DL>
<DT> odrednica 1 <DD> opis odrednice 1
<DT> odrednica 2 <DD> opis odrednice 2
</DL>

Rezultat:

odrednica 1
opis odrednice 1
odrednica 2
opis odrednice 2

Nenumerisane / Neodređene liste (engl. unordered list) dobija se ograđivanjem zagradama <UL> i </UL>, a sastoji se od elemenata koji se definišu etiketama <LI> i </LI> koji definišu stavke liste. Zagrada <LI> ne mora nužno biti zatvorena etiketom </LI>, i kao takva definiše se kao prosta.

Kod nenumerisanih lista, etiketa <LI> može imati atribut TYPE sa vrednostima DISC, SQUARE i CIRCLE, koji opisuje izgled grafčkog znaka koji prethodi elementu liste. Ukoliko TYPE nije definisan, grafički znak će se pojaviti kao default browsera koji koristite (DISC je default za NN, dok je SQUARE default za IE), ili ukoliko je unapred određen Css-om, preuzeće određeni izgled BULLET-a koji ste mu dodelili (u većini slučajeva ovo je mali grafički znak, strelica, kružić i slično koji se po izgledu uklapa u ostalu grafiku vašeg dizajna).

Primeri Lista:

Lista bez određenog TYPE-a za ovu stranicu (izgled etiketa <LI> određen je Css-om):

<UL>
<LI> stavka 1 </LI>
<LI> stavka 2 </LI>
</UL>

stavka 1
stavka 2

Lista sa stavkom čiji je TYPE određen kao DISC:

<UL>
<LI TYPE="DISC"> stavka 1 </LI>
<LI TYPE="DISC"> stavka 2 </LI>
</UL>

Lista sa stavkom čiji je TYPE određen kao SQUARE:

<UL>
<LI TYPE="SQUARE"> stavka 1 </LI>
<LI TYPE="SQUARE"> stavka 2 </LI>
</UL>

Lista sa stavkom čiji je TYPE određen kao CIRCLE:

<UL>
<LI TYPE="CIRCLE"> stavka 1 </LI>
<LI TYPE="CIRCLE"> stavka 2 </LI>
</UL>

Numerisane / Određene liste (engl. ordered list) određuje se tagovima <OL> i </OL>. Prva stavka po defaultu dobija redni broj "1" a svaka ostala za broj veći, dok se svaka stavka kao i u dosadašnjim premerima određuje tagovima <LI> i </LI>:

<OL>
<LI> stavka 1 </LI>
<LI> stavka 2 </LI>
<LI> stavka 3 </LI>
</OL>

Određene liste se, kao i neodređene mogu definisati vrednošću TYPE, s' tim što ovaj put TYPE odrednica nije prisvojena tagu <LI> već tagu <OL>, pa tako možemo numerisane liste navoditi umesto običnim brojevima, abecednim redom ili rimskim brojevima:

Primer abecednog reda:

<OL TYPE="A">
<LI> stavka 1</LI>
<LI> stavka 2 </LI>
<LI> stavka 3 </LI>
</OL>

Primer numerisanja rimskim brojevima:

<OL TYPE="I">
<LI> stavka 1 </LI>
<LI> stavka 2 </LI>
<LI> stavka 3 </LI>
</OL>

Osim spomenutih parametara, određene liste mogu imati i parametre za određivanje početnog indeksa liste <OL START="početnibroj"> ili im se može redefinisati indeks korišćenjem parametra VALUE:

<OL START=3>
<LI> stavka 1 </LI>
<LI VALUE=9> stavka 2 </LI>
<LI> stavka 3 </LI>
</OL>

Imajte u vidu da ukoliko je parametar <LI> definisan Css-om, tj ako mu je prethodno "prilepljen" mali grafički atribut - sličica/bullet, vaše liste neće izgledati kao što je gore prikazano. Efekat koji je objašnjen najbolje će biti primenjen tamo gde liste nisu definisane, već preuzimaju default vrednost koju ima svaka Html stranica.

*** Linkovi i Hiperveze i njihovo definisanje:

U Html-u postoje dve vrste linkova ili veza: one veze koje povezuju dva dela jedne iste stranice i one veze koje povezuju dve različite stranice koje se nalaze na internetu. Nekada su to stranice u okviru istog direktorijuma/sajta, a nekada veze ka spoljašnjim sajtovima izvan diraektorijuma u kome se nalazite. Povezivanje se vrši definisanjem URL (uniformnog lokatora resursa - adrese), koji može predstavljati fizičku lokaciju dokumenta (jednostavna adresa čitave stranice) ili fizičku poziciju određenog dela dokumenta (deo teksta ili fajl koji se nalazi na određenoj adresi u dokumentu).

* Link ili veza drugačije se naziva i "sidro" (engl. "anchor"), predstavlja povezivanje dela teksta sa adresom (URL), i definiše se ograđivanjem teksta zagradama <A> i </A>, gde se etiketi <A> dodaju atributi:

HREF - vrednost u kojoj se navodi adresa datoteteke/dokumenta do kog se želi stići obeleženim tekstom.
TARGET - vrednost u kojoj se navodi ime prozora do koga se ide. Ukoliko ovde upišemo "_blank", adresa će biti forsirana da se otvori u novom prozoru.
TITLE - vrednost koja predstavlja ime dokumenta do koga se ide. Ovaj tekst biće vidljiv kada se mišem pređe preko linka.
NAME - vrednost koja predstavlja ime sidra, nju definišemo samo ako ćemo kasnije linkovati do baš ovog mesta u dokumentu.

* Uniformni Lokator Resursa (URL) ili adresa sastoji se od više elemenata koji je određuju. Njen format uprošćeno izgleda ovako:

tip_servisa://host.domen:port/put_do_fajla/ime_fajla

1) Tip Servisa - označava koji se protokol, tj. Internet servis koristi pri referenciranju fajla; njegove moguće vrednosti su:

file (fajl na lokalnom računaru koji nije javna Web strana)
ftp (fajl na nekom FTP serveru; za prevlačenje datoteka bez prikaza sadržaja)
http (fajl na web serveru; za prikaz sadržaja dokumenta)
mailto (povezivanje sa programom pomoću kog se može formirati poruka i poslati e-mail na zadatu adresu)

2) Host označava ime računara na kome se nalazi fajl.

3) Domen - Internet domen računara (ime domena koje odgovara Web serveru) na kome se nalazi fajl.

4) Port - vrlo retko se navodi; obično ima neke specijalne primene; u većini slučajeva se za http podrazumeva adresa porta 80, tako da se može izostaviti.

5) Put Do Fajla - put kroz (veoma često) više direktorijuma.

6) Ime Fajla - naziv datoteke koja predstavlja odredište , zajedno sa ekstenzijom (.htm, .html itd...)

Primeri:

za mail:
<A HREF="MAILTO:korisnik@adresa.com"> tekst koji se vidi </A>

za web adresu:
<A HREF="http://host.domen/direktorijumukomsenalazifajl/fajl.html"> tekst koji se vidi </A>

za web adresu sa spomenutim atributima:
<A HREF="http://host.domen/direktorijumukomsenalazifajl/fajl.html" TITLE="korisna stranica" TARGET="_blank"> tekst koji se vidi </a>

* Povezivanje (hiperveza) sa određenim delom stranice koristi se upotrebom atributa "NAME" kojim se čekira određeni tekst do koga se želi stići, na primer:

<A NAME= "pozicija"> tekst na koji se prelazi iz adrese</A>

I nakon toga adresa koja vodi do pozicije teksta izgledala bi ovako:

<A HREF="#pozicija"> tekst koji se vidi</A>

Ili, ukoliko se Link i čekirani tekst ne nalaze na istoj stranici:

<A HREF="http://host.domen/direktorijumukomsenalazifajl/fajl.html#pozicija"> tekst koji se vidi </a>

*** Slike u Html dokumentima i njihovo definisanje:

* Slike (engl. image) u Html dokumentima definišu se korišćenjem etikete/taga <IMG> koji ima obavezan atribut SRC (engl. source), ili "izvor", tj adresu na kojoj se slika nalazi. Slika uglavnom mora imati ekstenziju (.jpg, .gif, .png...) da bi je Html stranica prepoznala i učitala, no ovo ne mora uvek biti slučaj.

Najjednostavniji primer ubacivanja slike u post/dizajn bloga izgledao bi ovako:

<IMG SRC="http://adresa/album/slika.gif">

* Ostali često korišćeni atributi za ubacivanje slika i njihovo definisanje jesu:

ALT - definiše opis slike, naziv koji će se pojaviti na stranice pre nego što se slika otvori,
BORDER - definiše širinu okvira slike (u pikselima),
WIDTH - definiše širinu slike u pikselima (kontrola dimenzija) i
HEIGHT - definiše visinu slike u pikselima (kontrola dimenzija).

Kontrolisanje dimenzija slike može biti korisno ukoliko ne želite da sliku fizički izmenite, ali želite da se ona prikazuje kao manja na vašoj stranici. Ovaj atribut je naročito popularan pri formiranju galerija slika u postu ili dizajnu bloga. (Na desni klik "open image", slika će se prikazati u punoj dimenziji).

Boja okvira slike menja se jednostavnim definisanjem boje fonta u delu u kome se ona nalazi, isto tako njeno pozicioniranje se najlakše izvodi pozicionaranjem teksta u tom predelu (spomenuto u prethodnom tutorijalu kako se ovo čini).

Primer:

<IMG SRC="http://i232.photobucket.com/albums/ee136/babylonbabe/sp2resize.jpg" WIDTH="150" HEIGHT="150" BORDER="3" ALT="slika">

Daće sledeći rezultat:

Slike se u Html dokumentima takođe mogu linkovati, baš kao i segmenti teksta - samo što u ovom slučaju "tekst koji se vidi" zamenjujemo definicijom slike, na primer:

<A HREF="URL"><IMG SRC="URL slike"></A>

*Mapiranje slike - Jedna slika u Html dokumentu može biti podeljena na zone i da se na taj način svaka zona linkuje na posebnu adresu (ili na primer samo jedan deo slike, a ne ona cela). Ovo je veoma atraktivna i korisna funkcija, ali takođe i napredna funkcija korišćenja slika u Html-u, a najširu upotrebu ima pri dizajniranju slikovnih navigacija.

Zone jedne slike određuju se određivanjem koordinata (engl. coordinates), gde početak mape predstavlja njen gornji levi ugao, a koordinate se određuju merenjem piksela do određenog segmenta. Koordinate jedne slike i njenih delova možete doznati putem nekog od programa za editovanje grafika, na primer programa Paint.

Zone se određuju pomoću atributa USEMAP etikete IMG:

<IMG SRC="URL slike" USEMAP="#naziv mape">

Mapa se definiše pomoću složene etikete MAP. Unutar etikete MAP, za opis pojedinačnih zona koristi se prosto obeležje AREA (definiše zonu), čiji su atributi SHAPE (oblik zone), HREF (adresa na koju se zona linkuje) i COORDS (njene koordinate):

<MAP NAME="ime mape">
<AREA SHAPE="oblik zone1" HREF="URL koji se poziva" COORDS="x1,y1,x2,y2,...">
<AREA SHAPE="oblik zone2" HREF="URL koji se poziva" COORDS="x1,y1,x2,y2,...">
</MAP>

Atribut oblika zone SHAPE može imati vrednosti:

RECT - za zonu pravougaonog oblika. Tada se navode koordinate gornjeg levog i donjeg desnog ugla pravougaonika u pikselima. (X1 i Y1 određuju gornji levi a X2 i Y2 donji desni ugao)
CIRCLE - za zonu kružnog oblika. Tada se navode kordinate centra i poluprečnik u pikselima. (koriste se koordinate X,Y i R, gde su X i Y centar kruga, a R je njegov poluprečnik)
POLY - za zonu poligonalnog oblika. Tada se navode koordinate temena poligonalne linije u pikselima. (koriste se koordinate X1, Y1, X2, Y2, X3, Y3... gde je svaki par XY koordinata jedne tačke, počevši od najbližeg levog ugla sa nastavkom udesno)

Primer:
(definisan pravougaoni oblik zone na sredini slike - naslov na majci u ovoj grafici)

<IMG SRC="http://i232.photobucket.com/albums/ee136/babylonbabe/sp2resize.jpg" USEMAP="#Mapa">

<MAP NAME="Mapa">
<AREA SHAPE="rect"
COORDS="50,100,95,105,..."
HREF="http://babylondesign.blogspot.com/2007/09/mapa-bloga.html"
TITLE="Klikni Me - Put do stranice Mapa Bloga"
TARGET="_blank" >
</MAP>

Rezultat:
(klikom na naslov na majci otvoriće se novi prozor sa stranicom Mapa Bloga)

Uskoro nastavljamo dalje :)

Html Tutorijal - (2) Elementi teksta, Obeležavanje, Font, Boje

2007-09-06T12:45:00.000+03:00

Jedna od interesantnijih strana Html-a svakako jeste mogućnost obeležavanja i dodavanja osobina tekstu. Ovo je takođe i jedna od najpopularnijih i najviše korišćenih lekcija pri dizajniranju bloga. Najinteresantnije, ako uzmemo u obzir da su osnovni obrasci bloga već prethodno definisani Css-om, jeste ove osobine koristiti pri samoj izradi postova (mada to već činite preko panela za pisanje po sistemu WhatYouSeeIsWhatYouGet, koji je sličan pisanju teksta u programu poput Worda) - ali ako se usudite da na ovom koraku pogledate "Html" ili "Source" deo posta nakon što ga iskucate, videćete da ga program za kucanje zaista preslikava kao jednostavan Html "iza kulisa".

Drugo polje, osim kucanja posta, jeste ukrašavanje i potpuna kontrola nad tekstom koji je direktno infiltriran u vašu stranicu - naročito u tekstu navigacionog menija. U svakom slučaju, lekcija koja se lako uči i koja može biti veoma korisna.

*** Osnovni fizički stil karaktera/slova:

Crni slog (engl. boldface) se navodi među zagradama i : crni slog
Kurziv (engl. italics) se navodi među zagradama i : kurziv
Podvučena slova (engl. underline) se dobijaju ograđivanjem teksta zagradama i : podcrtano
Teleprinterska slova (engl. teletype) se dobijaju ograđivanjem teksta zagradama <TT> i </TT> : teleprinter
Precrtana slova (engl. strike) se dobijaju ograđivanjem teksta zagradama <STRIKE> i </STRIKE> : ~~precrtano~~
Treperava - "blinkujuća" slova se dobijaju ograđivanjem teksta zagradama <BLINK> i </BLINK> : treperavo

Zapamtite da iako možda vaš tekst editor ne sadrži neke od ovih funkcija, Html će uvek ove tagove čitati upravo ovako kako je gore navedeno ako ih ubacite u vaš tekst.

*** Ostali interesantni fizički atributi teksta:

Veliki tekst (engl. big) dobija se ograđivanjem teksta zagradama <BIG> i </BIG> : veliki tekst
Mali tekst (engl. small) dobija se ograđivanjem zagradama i : mali tekst
Jak ili istaknut tekst (engl. strong emphasis) daje isti rezultat kao i boldovan tekst a dobija se ograđivanjem zagradama i : istaknut tekst
Isticanje dela teksta (engl. emphasis), na primer za tekst koji je na drugom jeziku, dobija se ograđivanjem zagradama i : istaknut tekst

Kod (engl. computer code) označava tekst kompjuterskog koda i dobija se ograđivanjem zagradama <CODE> i <CODE> :

Ovo je kod.

Citat (engl. quote) predstavlja citirani pasus i manifestuje se uvlačenjem označenog teksta u odnosu na levu marginu polja, a dobija se ograđivanjem teksta zagradama <BLOCKQUOTE> i <BLOCKQUOTE> :

Ovo je citat. Atributi citata uglavnom se kod dizajniranja bloga unapred određuju Css-om, a ukoliko nisu određeni Html ga čita po defaultu, jednostavnim uvlačenjem teksta.

*** Poravnavanje teksta:

Za poravnavanje ili "određivanje mesta" (engl. alignment) teksta na vašoj stranici koriste se četiri atributa:

left - tekst se poravnava uz levu marginu stranice
right - tekst se poravnava uz desnu marginu stranice
center (ili middle) - tekst se poravnava po sredini stranice
justify - tekst ide od početka do kraja stranice

Ovi se atributi mogu jednostavno koristiti postavljanjem u uglaste zagrade i ograđivanjem teksta (na primer <CENTER> </CENTER>), mada se više preporučuje da se za poravnavanje koristi oznaka pasusa () i da joj se dodaje atribut poravnanja:

tekst 
 tekst 
 tekst 
 tekst

*** Oznake fonta i njegova veličina:

Fontovi se u Html-u definišu zagradama i , gde prva zagrada redovno sa sobom nosi i atribute izgleda, kao što je sama definicija fonta, njegova veličina, boja, istaknutost ili neistaknutost i slično.

Primer: Tekst.
Rezultat: Tekst.

Veličina fonta (engl. font size) može se definisati na tri načina:

size="broj" - gde je broj tačno definisana veličina (1, 2, 3...)
size="+broj" - gde se veličina uvećava za definisanu vrednost broja
size="-broj" - gde se veličina fonta smanjuje za definisanu vrednost broja.

Izgled fonta (engl. font face) definiše se nazivom fonta. U Html-u postoji lista "12 bezbednih" Microsoft fontova koja je opšte prihvaćena i funkcioniše u svim browserima i na svim sistemima (MAC i PC):

Arial - Arial
Arial Black - Arial Black
Comic Sans MS - Comic Sans MS
Comic Sans MS Bold - Comic Sans MS Bold
Courier New - Courier New
Impact - Impact
Times New Roman - Times New Roman
Verdana - Verdana
Webdings - Webdings
Georgia - Georgia
Trebuchet MS - Trebuchet MS
Andale (Monotype.com) - Andale

Napomena: Naravno da za uređivanje vaše stranice/bloga možete koristiti i neke druge fontove koji nisu nabrojani na ovoj listi. Preporučljivo je ne izlaziti iz okvira standardnih Windows/Mac fontova (nikako NE koristiti fontove koje ste vi naknadno instalirali na računar), jer njih nema svako integrisane u svoj sistem i neće ih svaki računar i browser prepoznati kada bude pregledao vašu stranicu i tekst.

Boja fonta (engl. font color) definiše se heksi-decimalnom vrednošću ("#nnnnnn", gde kombinacija "n" preuzima vrednosti brojeva i slova koji definišu određenu boju), kao i svugde u Html-u. Vrednost se uglavnom preuzima sa liste "216 bezbednih boja" koju možete pregledati ovde: [link]

Ove iste definicije boja koriste se za svaki odabir boje u strukturi vašeg Html koda: kako za boju teksta, tako i za boju pozadine vaše stranice, njenih određenih delova ili čak čitave stranice.

*** Njeno veličanstvo "Marquee"

Njaslađe za kraj - jedna od verovatno najpopularnijih i najomiljenijih dodatnih "caka" za uređenje teksta na vašem blogu jeste formiranje "pokretnih paragrafa" (engl. marquee). Pokretni paragrafi formiraju se ograđivanjem teksta zagradama <MARQUEE> i </MARQUEE>

Ovo je najprostiji oblik pokretnog paragrafa!

Pokretni paragraf može imati i jasno određene atribute:

width - širina paragrafa (u pikselima)
height - visina paragrafa (u pikselima)
direction - pravac kretanja (right - desno, left - levo, up - gore, down - dole)
behavior - "ponašanje" paragrafa (scroll - default vrednost, slide, alternate)
scrollamount - koliko će piksela odjednom "provlačiti" u željenom pravcu
scrolldelay - vremenska brzina paragrafa (u milisekundama)
loop - koliko će puta prikazati sadržaj paragrafa ("infinite" za beskonačno)
bgcolor - boja pozadine paragrafa ("#nnnnnn")

Primer:

<marquee height="150px" direction="up" scrollamount="1" bgcolor="#CCFFFF">Ovaj paragraf biće visok 150px, imaće svetlo-plavu boju pozadine i kretaće se na gore brzinom "1". 
 
Ovo je ujedno i kraj drugog dela Html Tutorijala.</marquee>

Ovaj paragraf biće visok 150px, imaće svetlo-plavu boju pozadine i kretaće se na gore brzinom "1".

Ovo je ujedno i kraj drugog dela Html Tutorijala.

Html Tutorijal - (1) Uvod i Upoznavanje sa Html-om

2007-09-04T19:10:00.000+03:00

*** Tutorijali koji su korišćeni kao baza za ove tekstove preuzeti su sa sajtova tutoriali i sezampro i uoprošćeni za potrebe dizajniranja bloga. U ovom delu biće objašnjen samo Html, bez Css-a. Css tutorijal će biti naknadno objavljen. Uživajte i naučite (nije teško, obećavam)!

Red bi bio da počnem da objašnjavam na srpskom. Krećem od pretpostavke da o Html-u i o dizajniranju bloga kao ni o Web dizajnu nemate nikakvo znanje i trudiću se da ova objašnjenja uprostim i "sažvaćem" što je moguće više i bolje. Za početak, ono što vam je potrebno jeste otvoren account na blogu, što pretpostavljam da već imate inače ne biste bili ovde.

Ako se usudite da iskoristite opciju u kontrol panelu vašeg bloga, koja glasi "Dizajn - Uređivanje Stranice" ili "Template/Layout - Edit Html" doćićete do "srca" ili kodova koji čine osnovu izgleda vašeg bloga. Ona, uprošćeno, izgleda ovako:

<html>

<head>
<title></title>
</head>

<body>
<style>
</style>
</body>

</html>

Gore spomenuti tekst je osnova onoga što čini vaš blog i to je takozvani Html, kome je i posvećen ovaj tutorijal. Ono što bi bilo jako lepo da pokušate jeste da svoj dizajn "preselite" na svoj računar, tako što ćete kod iskopirati u jedan od editora (preporučujem HtmlKit, mada možete to činiti i preko NotePada ili WordPada, mada u njima nemate Preview kao opciju, a Preview bi mnogo pomogao razumevanju svega ovoga).

*** Osnovno što biste trebali da znate da možete da počnete:

HTML je skraćenica od Hyper Text Mark-up Language. Hipertekst ili web-dokument je, pojednostavljeno, tekst koji sadrži veze ili uputnice (engl. link) ka drugim dokumentima ili na samog sebe. Preciznije, hipertekst je skup stranica (engl. page), u obliku datoteka, međusobno povezanih uputnicama koje su umetnute u stranice. Ove uputnice se obično vide kao veze (hiperveze) na koje se može kliknuti (od engl. to click). Za razliku od običnog teksta, koji se čita linearno (sleva na desno, odozgo naniže), hipertekst se čita prateći hiper-veze u tekstu, dakle, ne nužno na linearan način.

HTML dokument je čist tekst dokument! To znači da nije poželjno ovaj dokument snimati i čuvati u "naprednijim" tekst editorima kao što je Word, jer takvi editori imaju napredne opcije koje možete slučajno dodati u HTML i koje vam samo kasnije mogu predstavljati problem i zbunjivati vas. Vama je potreban samo tekst i ništa više da bi vaš HTML dokument funkcionisao.

Izvorne datoteke sa dokumentom opisanim u HTML-u imaju obično sufiks (ili ekstenziju) .html ili .htm, a nalaze se u određenom direktorijumu servera vezanog na Internet, što ih čini dostupnim (vidljivim) na web-u. U slučaju dizajniranja bloga vi imate samo jednu ovu stranicu i samo jedan direktorijum i ova je stranica u potpunosti ispisana u vašem polju za editovanje dizajna.

Ono što tekst čini HTML dokumentom jesu tagovi. Svaki HTML tag počinje znakom < a završava se znakom >, između kojih se nalazi ime i opcioni parametri taga. < > je tzv. početni (otvarajući) tag. Većina tagova ima i završni (zatvarajući) tag, koji iza znaka < ima i znak / i nema nikakve parametre, već ima namenu da označi kraj opsega u kome važi početni tag.

HTML dokument uvek počinje tagom <html> i završava se tagom </html> . On se sastoji od glave: <head> </head> i tela: <body> </body>. U telu dokumenta se piše sama sadržina HTML dokumenta, znači za funkcionalnost jednog bloga preko je potrebno da se u ovom (i ni u jednom drugom!) delu nalaze varijable koje označavaju kraj i početak vašeg bloga: <Blogger></Blogger> (u slučaju da koristite Blogger ili Mojblog blogging sistem) ili pak <Entry></Entry> (u slučaju ako koristite BlogOye! blogging sistem). Ukoliko se one ne nalaze u telu HTML-a, tekst vaših postova neće biti vidljiv i onda ništa niste uradili.

* Dodatna opcija omogućava da se obeleži komentar u HTML-obeleženom tekstu koji se neće videti u vizuelizaciji dokumenta. Na primer:

Ovu opciju možete koristiti da sebi pre svega razjasnite neke delove vašeg koda i napravite podsetnike, na primer gde je početak i kraj posta, početak i kraj koda za komentare, navigacionog menija. Svako ko teži preglednosti i jasnoći svojih dokumenata rado će iskoristiti ovu opciju.

*** Neke druge vrste tagova koje se veoma često koriste:

Naslovi (engl. headers) se kodiraju prema relativnoj dubini ciframa od 1 do 6. Tag za naslov ima opšti oblik:

<Hn> Naslov nivoa n </Hn>

gde "n" uzima vrednosti od 1 do 6, i označava veličinu slova u naslovu.

Odeljak (engl. division) se opsuje tagovima <DIV> </DIV>. Ovaj tag može imati atribut za pozicioniranje ALIGN sa vrednostima CENTER, RIGHT ili LEFT. Odeljak se vrlo često koristi za pozicioniranje i davanje osobina delovima vašeg posta (naslov posta, datum, zaglavlje, kao i komentari), i poželjno ga je definisati u Css-u (deo HTML-a označen kao <style> </style> , o tome će naknadno biti reči).

Pasus (engl. paragraph) se obeležava zagradama ... . Ukoliko u ravnom tekstu sledi pasus za pasusom, etiketa se može izostaviti. I ova etiketa može imati atribut za pozicioniranje ALIGN sa istim vrednostima kao etiketa <DIV>.

Novi red (engl. break) se obeležava tagom . Ovo je prosto obeležje: ne postoji etiketa .

Podvlaka (engl. horizontal rule) se obeležava tagom <HR> sa opcionim atributom NOSHADE (vizuelno rezultira masnom crtom).

Nakon što ste se upoznali sa osnovom i osnovnim tagovima infiltriranim u vaš blog, nadam se da vam je dosta toga jasnije. Ovo su takođe stvari sa kojima ćete se stalno sretati ukoliko želite da editujete ili napravite ikakav Html dokument ili templejt za blog. Bez njih se ne može! Korisnost tagova ili ograđivača pokazuje se i u editovanju tela, tj generisane strukture vašeg posta, kao i u editovanju navigacionog menija. Takođe ne zaboravite da tagovi koji nisu dobro zatvoreni mogu upropastiti vizuelni prikaz čitavog bloga i treba voditi računa da se zatvori sve što treba biti zatvoreno.

Za kraj, da ne bi došlo do brkanja pojmova. Na nekim blog sistemima videćete module pod imenom "TagCloud" ili jednostavno "Tagovi", koji predstavljaju igru reči vaših postova, takozvane "Oznake" ili "Etikete" ("Labels") tj kategorije vaših postova. Ti tagovi nemaju nikakve veze sa tagovima i tutorijalom ovog posta! Igra je slučajnosti da se dve potpuno različite stvari isto zovu.

Korisni Linkovi

2007-09-04T16:06:00.000+03:00

Korisni linkovi koji mogu dobro doći za blog dizajn:
(lista će biti dopunjavana)

*** Sajtovi sa dobrom ponudom blog templejta:

BlogSkins (engleski - zajednica blog dizajnera)
BloggerTemplates (blogger - engleski)
Caz (blogger - engleski)
CreateBlog (engleski - galerija skinova za blogger)
Isnaini (blogger - engleski)
Pannasmontata (blogger/splinder - italijanski)
RapsodiaColors (splinder - italijanski)
Renata (splinder - italijanski)
StyleContest (movable type - engleski)
WizArts (engleski - splinder/blogger)

*** Sajtovi sa dobrom grafikom - galerije/tutorijali:

AnimationFactory (engleski - gif animacije)
DeviantArt (engleski - zajednica)
HobiGrafika (srpski - psp forum)
IStockPhoto (engleski - stock sajt, fotografija)
Sxc.Hu (engleski - stock sajt, fotografija)

*** Sajtovi sa ponudom skripti - java:

CodeLifter (engleski - baza skripti)
DynamicDrive (engleski - baza skripti)
HotScripts (engleski - skripte i tutorijali)

*** Sajtovi sa dobrom ponudom besplatnih Web templejta:

FreeWebsiteTemplates (engleski - profi templejti)
OSWD (engleski - open source galerija)
OpenDesigns (engleski - open source galerija)
WebShapes (engleski - open source galerija)

*** Hostovanje slika i fajlova:

GooglePages (hosting slika i fajlova iz baze vaše googlepages stranice)
ImageShack (besplatan hosting slika)
PhotoBucket (besplatan hosting slika)
Flickr (besplatan hosting i sharing slika)
RockYou (besplatan hosting slika, slajdovi)

*** Ostalo:

CBox (engleski - chat/tag box)
LastFM (engleski - zajednica, muzika)
StatCounter (engleski - funkcionalan brojač sa IP logom)
W3Schools (engleski - najbolji onlajn web-tutorijali)

(nastaviće se...)

Kontakt

2007-09-04T15:31:00.000+03:00

Ime: whoreofbabylon

Mail1: gardenofbabylon@gmail.com
Mail2: gardenofbabylon@yahoo.com

ICQ: 355-194-787
MSN: gardenofbabylon@yahoo.com

Moji Blogovi:

*** VAŽNO! ***

Nemojte me kontaktirati:

za narudžbinu templejta za vaš blog/sajt - ne radim besplatne templejte po narudžbini
da mi postavite pitanje na koje je na ovom blogu već odgovoreno
da mi nudite vaše proizvode, reklame i slično - nisam zainteresovana
za dejting, gluposti i offtopic koji nema veze sa temama mojih blogova
za problem sa blogovima koji nisu hostovani na već spomenutim sistemima

Kontaktirajte me:

ako imate korisne savete za teme ovog bloga
ako imate problem sa blogom koji ne umete sami da rešite
ako imate predlog za obradu besplatnog templejta koji ste našli na internetu
ako imate dobar razlog za saradnju sa ovim blogom

Ako mi pošaljete mail ili poruku a ja vam ne odgovorim,
možda jednostavno nemam vremena.

*** JOŠ VAŽNIJE ***

nemojte mi tražiti više ličnih informacija nego što se već nalazi na internetu
nemojte mi tražiti moje privatne slike i zavirivati u moj privatni život
nemojte me obasipati spamom i ničim izazvanim oštrim kritikama na moj rad - ako vam se ne sviđa, samo se udaljite sa ove adrese, ja nikakvu zaradu niti korist nemam od ovoga što radim na internetu

Hvala.

ČPP - FAQ

2007-09-04T12:52:00.000+03:00

Pitanja i Odgovori
(ako imate pitanje na koje nije odgovoreno, pošaljite ga u odgovoru na ovu temu)

Koji je razlog postojanja ovog bloga?

Ovaj blog predviđen je da bude takozvani Help-Blog za sve one koji žele da uče Blog i Web Dizajn zasnovan na jednostavnoj Html/Css strukturi. Saveti i sadržaj bloga odnose se pre svega na sisteme po kojima su konstruisani blogovi na sistemima Blogger (Classic!), BlogOye! i MojBlog.

Da li Blog Dizajn ima veze sa Web Dizajnom?

Ima. Html struktura Web sajtova veoma je slična strukturi po kojoj se radi izgled blogova. Jedina razlika jeste u delu predviđenom za osnovni tekst (body), gde se kod blogova koriste Varijable koje očitavaju vaše postove. O Varijablama i njihovim razlikama od sistema do sistema biće govora kasnije.

Kako da primenim savete i lekcije sa ovog bloga na mom blogu?

Do osnovne strukture bloga dolazi se jednostavnim klikom na tab "Dizajn" (ili "Template/Layout") u vašem kontrol panelu (potrebno registrovati/posedovati blog account na jednom od blogging sistema), gde ćete naći source ili izvor osnovnog izgleda stranice (pregršt kodova koji će vam delovati zbunjujuće ako ste prvi put kliknuli na ovaj tab). Saveti se odnose na prilagođavanje ovog koda vašem sopstvenom ukusu - promena čitavog izgleda, promena slika, boja, prilagođavanje fontova i tako dalje.

Da li postoji jednostavniji/brži način za promenu izgleda ako nemam nikakvo znanje iz ove oblasti?

Uvek se možete opredeliti za promenu čitave stranice korišćenjem već napravljenog layout-a za blog. Na ovom blogu naćiće se i oni, prilagođeni za sve sisteme koji su trenutno u ponudi.

Da li su unapred napravljeni layout-i besplatni?

Svi koji budu u ponudi na ovom blogu - jesu. Većina njih je takozvani "LinkWare", što znači da Link ka originalnom dizajneru mora ostati netaknut na vašoj stranici, ako se tu nalazi onog trenutka kada ste preuzeli dizajn sa interneta. Imajte u vidu da promena slike ili fonta u već napravljenom layout-u ne znači da je layout vaš. Većina dizajnera zadržava pravo na samu konstrukciju koda koji su napisali - ukoliko niste sami napisali kod od "A" do "Š" - dizajn nije vaš i ne smete ga prisvajati i uzimati zasluge za njegov kompletan izgled.

Na mom blog sistemu već postoje neki layout-i u ponudi. Po čemu se baš ovi razlikuju?

Layout-i koji će se naći ovde predstavljaju mali eksperiment, dokaz kako se svaka postojeća Web stranica može konvertovati u blog dizajn, i svaki blog dizajn nekog drugog sistema može prilagoditi sistemu koji vi koristite (potpuno je nepotrebno menjati sistem i otvarati novi blog da biste ovo postigli). Osnovna ideja lekcija i ponude bloga jeste da vaš blog izgleda onako kako vi hoćete, a ne kako vam je nametnuto.

Šta mi je potrebno da napravim sam svoju stranicu?

Potrebno je poznavanje Html-a i razumevanje kodova i Varijabli koje se koriste na vašem sistemu. Potrebna je grafika, ukoliko želite da obogatite izgled vašeg bloga slikama (baneri, gradienti). Potrebni su vam programi za prilagođavanje kodova i grafika.

Za pregled i editovanje koda uglavnom se koristi NotePad ili WordPad koji verovatno već imate instaliran na vašem računaru. Program koji je besplatan i veoma koristan na ovom polju jeste HtmlKit i preporučujem ga svakom ko želi da nauči više o Html-u (nudi kao opciju "preview" promena, opciju čuvanja fajlova u .css, .html i ostalim web formatima koji vam mogu biti potrebni, kao i prečice za editovanje koda).

Koliko mi je vremena potrebno da naučim osnove?

Za ovaj "podvig" nije potrebno vreme nego samo malo razumevanja. Nakon što naučite nekoliko osnovnih sitnica, mnoge stvari će vam delovati jasnije.

Mapa Bloga

2007-09-04T12:43:00.000+03:00

Za lakše snalaženje među temama.
(lista će biti dopunjavana)

Bez Kategorije - Izdvojeno:

(prikaži sve)

Html Tutorijal

(prikaži sve)