[HTML] Uputstvo - HTML Lekcije By: ZeN
Results 1 to 4 of 4

Hybrid View

  1. #1
    Senior Member Array
    Join Date
    Jan 2011
    Location
    Beograd/Nis , Srbija
    Karma
    8

    Default Uputstvo - HTML Lekcije By: ZeN

    Pozdrav,

    U nekoliko lekcija cu vam pokazati kako da naucite html. Html je programsi jezik, njime se pisu web strane. Nije tezak pa predlazem svima da nauce.

    Molim vas da ne postujete jos uvek nista dok ne zavrsim obavesticu vas kad zavrsim i da niko sa drugih foruma ne kopira a da ne oznaci autor-a ZeN-a Ako vam se svidjaju i ako sam vam pomogao dodajte mi K+ !

    1. Lekcija

    Pokrenite Notepad i pocnite sa ovim...

    <HTML>
    </HTML>


    Ovo su HTML tagovi. Postoje pocetni i krajnji tag. Da bi ste napravili krajnji tag, samo dodajte / u pocetni tag. Veliki broj tagova ima i krajnji tag (ali ne svi!).
    Razmisljajte o tagovima kao o razgovoru sa browser-om, ili kao o nazivu izdavanja instrukcija browser-u. Ono sto ste malopre napisali browser "shvata" kao 'Ovo je pocetak HTML dokumenta' (<HTML>) i 'Ovo je kraj HTML dokumenta' (</HTML>). Naravno, izmedju cemo dodati jos ponesto.

    U svakom HTML dokumentu mora se nalazi i par HEAD tagova.

    <HTML>
    <HEAD>
    </HEAD>
    </HTML>

    Sledeca stvar koja bi trebala da se doda u HEAD je naslov (TITLE).

    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>
    </HTML>


    Glavni deo HTML dokumenta nalazile se izmedju BODY tagova.

    <HTML>
    <HEAD>
    <TITLE></TITLE>
    </HEAD>
    <BODY>
    </BODY>
    </HTML>

    Na kraju, dajte naslov vasoj web strani, i dodajte nesto u telo dokumenta.

    <HTML>
    <HEAD>
    <TITLE>Moja prva web strana</TITLE>
    </HEAD>
    <BODY>
    Mala Web skola!
    </BODY>
    </HTML>

    Sada treba dokument snimiti, i to ne kao tekstualni, vec kao HTML dokument. Snimite ga kao PAGE1.HTML u neki novi folder. Evo male pomoci za one kojima je potrebna... U Notepad-u kliknite na File pa izaberite Save as.
    Otvorite se prozor za dijalog. Novi folder cete napraviti tako sto cete kliknuti ovo ->
    Imenujte taj folder. Zatim ga kliknite dva puta, da bi ste ga otvorili. U polje File name: upisite page1.html. U polju Save as type: izaberite All Files(*.*).
    Pritisnite taster ENTER i to je sve!

    Cestitam! Postali ste ponosni vlasnik potpuno funkcionalne web strane! Mogli biste da je postavite na neki server (npr. kod Vaseg Internet provajdera, ili na neki besplatni server, kao sto su, npr., AngelFire, Homestead ili WebJump), tako da citav svet moze da vidi vazih ruku delo! Ako koristite Netscape, fajl koji ste napravili trebalo bi da izgleda otprilike ovako...



    (ako je vasa Netscape ikona malo drugacija, to nema nikakve veze)
    Mozete je dvaput kliknuti i videti sta ste uradili. Ako zelite da vidite kako vasa strana zaista treba da izgleda, pogledajte ovde.

    Najbolji nacin za koriscenje ovog kursa je da koristite Notepad i dva otvorena Netscape-a/Explorer-a (odn. browser-a). U jednom Netscape-u/Explorer-u bi se nalazio ovaj kurs, a u drugom bi bila Vasa nova strana. Vi biste u tom slucaju trebali samo da se prebacujete izmedju ta tri prozora.

    Dve kratke napomene pre Lekcije 2. Prvo, ovo sto ste napravili je samo skelet HTML dokumenta. Taj minimum informacija svaka HTML strana treba da sadrzi. Drugo, naslov dokumenta se nalazi na samom vrhu prozora browser-a.

    U sledecem postu cu napisati drugu lekciju.
    CyberShark Administrator
    www.cybershark.rs

  2. #2
    Senior Member Array
    Join Date
    Jan 2011
    Location
    Beograd/Nis , Srbija
    Karma
    8

    Default

    Ovde cu Vam odmah reci nesto, sto mozda nece biti bas najjasnije... U pitanju su nasa slova - s, z , dj , dz, . Da biste ih videli, u glavu (HEAD) HTML dokumenta dodajte sledeci red:



    <meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
    ili
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">


    Ukoliko zelite da koristite cirilicu, sve sto treba je da u gornjem redu vrednost 1250 zamenite sa 1251. Naravno, i tastaturu morate da prebacite na srpsku latinicnu (hrvatsku, slovenacku) odn. na srpsku cirilicnu! Za sad Vam preporucujem da koristite samo engleska slova. Kad to savladate, lako cete preci i na nasa slova.
    Da bi stvari izgledale jasnije, pisite samo <BODY> tag. Izostavicu sve <HTML>, <HEAD> i <TITLE> tagove. Naravno, podrazumeva se da cete ih vi pisati u svojim HTML-dokumentima.
    <BODY>
    </BODY>

    Otkucajte neki kratak tekst.

    <BODY>
    neki kratak tekst
    </BODY>



    Kad god uradite neku promenu u vasem dokumentu, snimite ga, pa pritisnite dugme Reload/Refresh na browser-u, da bi ste videli najnoviju verziju. Nekad to nese biti bas dovoljno (cudne su zverke ti browser-i). U tom slusaju primenite SuperReload (shift+Reload) - naravno, ovo vazi samo za Netscape.

    Prvo treba da naucimo kako se menja boja pozadine. Ova siva deluje prilicno bezveze. (Napomena - siva nije uvek default - predefinisana boja.)

    <BODY BGCOLOR="#FFFFFF">
    neki kratak tekst
    </BODY>


    FFFFFF je bela boja na "kompjuterskom" jeziku. Ovde se nalazi jos nekoliko boja.
    Netscape (i ostali browser-i) sve slike prebacuju na svoju paletu od 256 boja. Dalje, ukoliko izaberemo boju koja nije u toj paleti, browser se automatski umesto nje prikazati najblizu. U ovom trenutku to nije bas vazno; no, ako Vas boje bas interesuju, kliknite ovde, gde cete bolje upoznati ovaj obojeni problem.

    Naravno, umesto boje, za pozadinu mozete da uzmete i neku sliku. (Obratite paznju da ona zasad treba da bude u istom folderu u kome se nalazi i Vas HTML fajl.)

    <BODY BACKGROUND="swirlies.gif">
    neki kratak tekst
    </BODY>


    Ovo je slika koristiti za pozadinu.



    Da bi se slika prikazala, browser mora da bude u mogucnosti da je nase. Za sada, slika treba da bude u istom folderu u kome se nalazi i Vas HTML dokument (PAGE1.HTML). Najlaksi nacin da to izvedete je da desnim tasterom misa kliknete na sliku i izaberete Save Image As (ili tako nesto, sto zavisi od browser-a). Zatim, sliku snimite u folder u kome je Vas HTML fajl. Kasnije cemo "detaljisati".
    Ocigledno je da je slika ponovljena vise puta (tile) da bi se uklopila u velicinu ekrana. Ako, pak, koristite dugu, a tanku sliku, efekat ce biti ovakav...

    <BODY BACKGROUND="bluebar.gif">
    neki kratak tekst
    </BODY>


    Ovo je slika koriscena za pozadinu.

    (Zapravo, ova slika je dimenzija 800x2, ali je ovde kompresovana na 530x2, da bi se bez problema uklopila na svaki ekran.)
    Dobro. Vratimo se sada cistom, belom ekranu.

    <BODY BGCOLOR="#FFFFFF">
    neki kratak tekst
    </BODY>


    Sada bismo mogli da stvari malo podebljamo.

    <BODY BGCOLOR="#FFFFFF">
    neki kratak<B>tekst</B>
    </BODY>


    Ovim smo browser-u rekli: neka tekst izmedju <B> i </B> bude podebljan (bold).

    Princip je isti i za ukocena slova (italic).

    <BODY BGCOLOR="#FFFFFF">
    neki <I>kratak</I> <B>tekst</B>
    </BODY>



    Naravno, to vazi i za podvlacenje (underline).

    <BODY BGCOLOR="#FFFFFF">
    <U>neki</U> <I>kratak</I> <B>tekst</B>
    </BODY>



    Vratimo se na cist beli ekran.

    <BODY BGCOLOR="#FFFFFF">
    neki kratak tekst
    </BODY>



    Ako zelimo, tagovi se cesto mogu koristiti u raznim kombinacijama.

    <BODY BGCOLOR="#FFFFFF">
    neki kratak <I><B>tekst</B></I>
    </BODY>

    Ovo je primer ugnescenih tagova. Ukoliko cete koristiti kombinacije tagova (a sigurno hocete), onda, da ne bi ste zbunjivali browser-e, koristite ugnescene, a ne preklopljene tagove. Primer sledi...

    <OVO><ONO></OVO></ONO> preklopljeni tagovi.... loze
    <OVO><ONO></ONO></OVO> ugnesceni tagovi.... dobro

    Veoma je interesantan i font fiksne duzine.

    <BODY BGCOLOR="#FFFFFF">
    <TT>neki kratak tekst</TT>
    </BODY>


    Svako slovo zauzima jednaku kolicinu horizontalnog prostora.


    Ovo je obican tip -> iiiiiiiiii
    oooooooooo
    mmmmmmmmmm
    Ovo je font fiksne duzine -> iiiiiiiiii
    oooooooooo
    mmmmmmmmmm

    Takodje mozemo da menjamo i velicinu fonta... i to veoma jednostavno!

    Prvo dodajmo par <FONT> tagova...

    <BODY BGCOLOR="#FFFFFF">
    neki kratak <FONT>tekst</FONT>
    </BODY>

    Onda odredimo vrednost atributa SIZE.

    <BODY BGCOLOR="#FFFFFF">
    neki kratak <FONT SIZE=6>tekst</FONT>
    </BODY>


    Postoji 7 velicina fontova:
    malecni mali obicni srednji veliki oho-ho veliki i dzinovski!
    1 2 3 4 5 6 7

    Dve napomene. Prva: <TAG> govori browser-u da uradi nesto. Medjutim, ATRIBUTE ide u <TAG> i govori browser-u kako da uradi to sto zahtevate.
    Druga napomena se tice podrazumevanih vrednosti (default). Kao sto verovatno znate, default je vrednost koju browser pretpostavlja, ako niste naglasili drugacije. Dobar primer je velicina fontova. Podrazumevana velicina je 3. Ako nije drugacije nageno, ona ce zaista i biti 3.

    Svaki browser ima podesene podrazumevane fontove - ime, velicinu i boju. Ukoliko niste nista "prckali", podrazumevani font je Times New Roman od 12pt (sto u HTML-u iznosi 3), crne boje. Naravno, ukoliko zelite, u svom HTML dokumentu mozete koristiti i druge fontove. Kao, npr. ARIAL ili VERDANA.

    <BODY BGCOLOR="#FFFFFF">
    neki kratak <FONT FACE="ARIAL">tekst</FONT>
    </BODY>


    Veoma vazno!!!
    Font ce se videti samo ako posmatrac ima instaliran taj font na svom racunaru! Ukoliko to nije slucaj, tekst ce biti predstavljen podrazumevanim (default) fontom. Zato, oprez sa fontovima! Uz Windows, veoma su cesti fontovi Arial i Verdana. Takodje i Impact!. Da bi se ovo delimicno prevazislo, mozete navesti vise od jednog fonta - ovako...

    <FONT FACE="ARIAL, HELVETICA, VERDANA">Zdravo</FONT>.

    Malo objasnjenje... Browser trazi font ARIAL. Ako ga nadje, koristi ga. Ako ne, onda trazi sledeci navedeni font - HELVETICA. Ako ga ne nadje, trazice VERDANA. E, ako ne nadje ni taj font, onda ce koristiti podrazumevani (default) font.
    Da biste videli kako razliciti fontovi mogu da izgledaju u vasem browser-u, pogledajte Handy Dandy Font Viewer [ J. Barta ].

    OK. Nazad na interesantne stvari.
    Ako zelite, mozete da promenite i boju fonta.

    <BODY BGCOLOR="#FFFFFF">
    neki kratak <FONT COLOR="#FF0000">tekst</FONT>
    </BODY>

    Unutar jednog taga mozemo koristiti vise atributa...

    <BODY BGCOLOR="#FFFFFF">
    neki kratak <FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">tekst</FONT>
    </BODY>


    <BODY BGCOLOR="#FFFFFF">
    neki kratak <U><I><B><FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">tekst</FONT></B></I></U>
    </BODY>

    Jos jedanput bih naglasio da tagovi treba da budu ugnesceni, a ne preklopljeni.

    <TAG3><TAG2><TAG1>E-heej!</TAG1></TAG2></TAG3>
    Redosled tagova nije uopste vazan.

    Jos jedna stvar pre kraja ove lekcije. Browser ima podrazumevana podesavanja za boju teksta, linkova, aktivnih linkova, posecenih linkova, kao i za boju pozadine. Te podrazumevane vrednosti su:

    Tekst je crn
    Linkovi su plavi
    Aktivni linkovi su crveni
    Poseceni linkovi su ljubicasti

    Ukoliko zelite, ove podrazumevane vrednosti mogu se lako menjati. Kao prvo, moguce je uneti promenu za ceo HTML dokument. Evo kako...
    <BODY BGCOLOR="#00000" TEXT="#FFFF00" LINK="#FF0000" VLINK="#800000" ALINK="#008000">
    neki kratak tekst
    </BODY>



    Ovde se nalazi i koristan programcic - Color Picker ( Joe Barta) koji olaksava (i cini interesantnim) eksperimentisanje bojama. Uz pomoc ColorPicker-a mozete ne samo da birate boje, vec i da menjate vrste i velicine fontova, da isprobavate kako bi izgledala podebljana ili ukolena slova, a mozete da se igrate i sa slikama za pozadinu. ColorPicker ce automatski generisati <BODY> tag.

    Eto! Sada znate skoro sve u vezi sa manipulisanjem tekstom u Vasim dokumentima. Sada bez problema mozete napraviti velika crvena slova ili mala podebljana slova. Mozete koristiti i razne vrste fontova, ili FONT FIKSNE IRINE.
    Osim toga, moguce je napraviti i tzv. rollercoaster!

    HTML kd za "rollercoaster" izgleda ovako (ako Vas interesuje).

    Pre nego sto zavrsimo ovu lekciju, zeleo bih da vam skrenem paznju na jos jednu sitnicu. HTML kd bilo koje stranice moze se jednostavno videti - pritisnite View/Source na Vasem browser-u. Dakle, ako prilikom web-surfa naletite na neku finu stranu, i zapitate se "Kako li je ovo uradjeno?", znajte da je odgovor udaljen samo nekoliko klikova Vaseg misa. U sledecem postu cu napisati 3 lekciju.
    CyberShark Administrator
    www.cybershark.rs

  3. #3
    Senior Member Array
    Join Date
    Jan 2011
    Location
    Beograd/Nis , Srbija
    Karma
    8

    Default

    Lekcija 3

    Ovu lekciju cemo poceti malim objasnjenjem kako browser-i rade.
    Prvo, jedan primer...

    <BODY BGCOLOR="#FFFFFF">
    neki kratak tekst
    o HTML-u
    </BODY>


    <BODY BGCOLOR="#FFFFFF">
    neki
    kratak
    tekst
    o HTML-u
    </BODY>


    Browser ne prepoznaje formatiranja u tekstu. Ukoliko ne naglasite drugacije, sav tekst ce biti napisan u jednom redu. Ako zelite da pocnete novi red, morazete da koristite odgovarajuci tag.

    <BODY BGCOLOR="#FFFFFF">
    neki
    <BR>kratak
    <BR>tekst
    <BR>o HTML-u
    </BODY>


    (tekst ce izgledati :
    Neki
    kratak
    tekst
    o HTML-u )

    <BR> u osnovi znaci naredbu pocni novi red. Slican tagu <BR> je i tag <P>. Ovaj tag oznacava pocetak novog pasusa, uz efekat prelaska u novi red i preskakanja jednog reda.

    <BODY BGCOLOR="#FFFFFF">
    neki
    <P>kratak
    <P>tekst
    <P>o HTML-u</BODY>


    (tekst ce izgledati ovako:
    Neki

    kratak

    tekst

    o HTML-u )
    Napomena o <P> tagu: ne moze se koristiti vise puta. Drugim recima, <P><P><P> obicno nece predstavljati gomilu praznih redova, vec samo jedan prazan red. Zasto? Kako dodati vise praznih redova? Odgovor stize!

    Pogledajmo sledeci primer...

    <BODY BGCOLOR="#FFFFFF">
    neki kratak tekst
    </BODY>


    (tekst ce biti napisan "neki kratak tekst")

    Browser ne prepoznaje vise od jedne praznine. Mozda to deluje cudno, ali je tako. Vazno je da Vam to daje bolju kontrolu nad tekstom.

    Naravno postoji tag, koji za browser predstavlja prazno mesto-> &nbsp;

    Probajte ovo...

    <BODY BGCOLOR="#FFFFFF">
    neki&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;
    kratak&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp ;
    tekst
    </BODY>

    (Tekst ce biti ovakav: Neki kratak tekst)

    Znak & znaci pocetak nekog specijalnog znaka, dok ; oznacava kraj. Slova izmedju predstavljaju skracenicu tog specijalnog znaka! Postoji veliki broj takvih znakova. Evo nekoliko cesto koriscenih... (Paznja: obavezno koristite MALA SLOVA)

    &nbsp; (jedno prazno mesto)
    &lt; (< manje od)
    &gt; (> vese od)
    &amp; (&)
    &quot; (" navodnici)
    * (* crtica)


    Naravno, postoji jos mnogo specijalnih karaktera. Ako Vas interesuju, mozete ih videti ovde.

    Ovo ce Vas mozda malo zbuniti. Ako pritisnete Enter dok kucate, browser ce to (obicno) shvatiti kao razmak... osim ako razmak vec postoji (tad ce novi razmak biti ignorisan).

    Jos jedan kratak primer...

    <BODY BGCOLOR="#FFFFFF">
    neki<BR>kratak<BR>tekst<BR>
    o<BR>HTML-u
    </BODY>


    (tekst ce izgledati ovako:
    neki
    kratak
    tekst
    o HTML-u )

    Jasno? Nadam se da jeste. Ja bolje ne znam da objasnim.

    Sledeci tag je vrlo koristan. Ime mu govori za sebe.

    <BODY BGCOLOR="#FFFFFF">
    <CENTER>neki kratak tekst</CENTER>
    </BODY>

    (tekst ce izgledati ovako:
    neki kratak tekst )


    Moguce je centrirati jednu rec ili celu stranicu - sve izmedju <CENTER> tagova bice centrirano.
    Predjimo na stavljanje slika na web strane. Koristicemo ovaj grb Beograda. Dakle, kliknite desnim tasterom misa, pa sliku snimite u odgovarajuci folder.



    Za stavljanje slika, koristi se <IMG> tag.

    <BODY BGCOLOR="#FFFFFF">
    <IMG>
    </BODY>

    TakoDJe, moramo odrediti izvor (source) i velicinu slike.

    <BODY BGCOLOR="#FFFFFF">
    <IMG SRC="grb.jpg" WIDTH=124 HEIGHT=150>
    </BODY>


    Ovde moram naglasiti da atribut src ne pokazuje samo koja je slika u pitanju, vec i gde se ona nalazi. Dijagrami koji slede, trebalo bi da Vam razjasne koriscenje ovog atributa, ako zelimo da stavimo sliku koja se, npr, zove "chef.gif".

    SRC="chef.gif" znaci da se slika nalazi u istom folderu u kome je i HTML dokument, koji je poziva.

    SRC="images/chef.gif" znaci da se slika nalazi u folderu ispod HTML dokumenta koji je poziva. Pitanje je: koliko nivoa ispod? Onoliko koliko je potrebno (a u nasem slucaju - jedan)!

    SRC="../chef.gif" znaci da je slika u folderu iznad HTML dokumenta koji je poziva.

    SRC="../../chef.gif" znaci da je slika dva foldera iznad HTML dokumenta koji je poziva.

    SRC="../images/chef.gif" znaci da je slika jedan folder gore, pa jedan dole u odnosu na HTML dokument.

    SRC="../../../other/images/chef.gif" - nadam se da sami shvatate sta ovo znaci.


    Postoji i drugi nacin. Naime, moguce je i koriscenje kompletnih putanja (URL-ova). Na primer: http://www.neka_adresa.net/~ja-na-ne...mages/chef.gif
    Zasto, pitate se Vi, ima vise smisla koristiti relativne (delimicne) URLove, nego apsolutne (kompletne) URLove? Zato sto tako mozete napraviti svoj sajt lokalno (na svom hard-disku), a svi linkovi ce normalno funkcionisati. Kada zavrsite sve strane, ceo sajt mozete da upload-ujete na server (a da sve i dalje radi normalno). Novo pitanje bi bilo: postoji li, onda, razlog da koristimo apsolutne URLove? Naravno, i to kada se slike nalaze na potpuno drugom serveru.

    *PITANJE: Cim sam svoj sajt prebacio sa hard-diska na server, svi linkovi na slike su "zamrli". Koristio sam relativne URLove, a slike su sigurno na serveru. Sta se to desava?

    ODGOVOR: Zvuci kao problem sa velikim/malim slovima. Za sisteme bazirane na Windowsu, Grb.jpg je isto sto i GRB.JPG, a to je isto sto i grb.jpg. Medjutim, cim se takav sajt prebaci na server (obicno) baziran na UNIXu/LINUXu, to postaju tri razlicita imena. Vi kazete serveru da nase fajl Grb.jpg, ali on moze da nadje samo GRB.JPG.
    Kako popraviti? Uvek koristite mala slova. Neka Vam to postane navika.
    Druga stvar na koju treba obratiti paznju je izbegavanje razmaka u imenima HTML fajlova. Umesto njih, koristite donju crtu. Promenite Moja Slika.gif u moja_slika.gif i Sve O Meni.HTML u sve_o_meni.html.


    Sledeci atribut IMG taga koji treba pomenuti je ALT...

    <IMG SRC="grb.jpg" WIDTH=124 HEIGHT=150 ALT="Grb Beograda!">

    ALT predstavlja zamenu za sliku, kada posetilac sajta ne vidi slike (iz bilo kog razloga). Neko moze da koristi cist tekstualni browser; neko je mozda iskljucio prikazivanje slika da bi brze surfovao (kako se to radi? - u Netscape-u pritisnes Options pa sklonis potvrdu sa Auto Load Images), itd. U takvim slucajevima, atribut ALT moze biti veoma vazan Vasim posetiocima.

    Jos malo o velicini slika.

    Probajte ovo...

    <BODY BGCOLOR="#FFFFFF">
    <IMG SRC="grb.jpg">
    </BODY>


    (Slika ce izgledati kao i obicno)

    Kao sto vidite, browser moze i sam da odredi velicinu slike. Zasto se onda gnjavimo sa dimenzijama? Razlog je jednostavan - to omogucava browser-u brze ucitavanje slike.

    Sta je tu najinteresantnije? Pazi sad...

    <BODY BGCOLOR="#FFFFFF">
    <IMG SRC="grb.jpg"
    WIDTH=300 HEIGHT=175>
    </BODY>


    (Slika ce biti sira nego obicno )

    <BODY BGCOLOR="#FFFFFF">
    <IMG SRC="grb.jpg"
    WIDTH=40 HEIGHT=200>
    </BODY>


    (Slika ce biti uza nego obicno i bice visa nego obicno. )

    Mozete definisati bilo koju velicinu za sliku, nevezano za njenu pravu velicinu. Ako Vam nije jasno, pogledajte sta sve moze da se uradi sa ovom malom, crvenom tackom -> <- (zapravo, to je slika, dimenzija 11).

    <BODY BGCOLOR="#FFFFFF">
    <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=1><P>
    <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=2><P>
    <IMG SRC="red_dot.gif" WIDTH=510 HEIGHT=5><P>
    <CENTER><IMG SRC="red_dot.gif" WIDTH=2 HEIGHT=200></CENTER>
    </BODY>


    Interesantno, zar ne?
    Sledecca lekcija u sledecem postu.
    CyberShark Administrator
    www.cybershark.rs

  4. #4
    Senior Member Array
    Join Date
    Jan 2011
    Location
    Beograd/Nis , Srbija
    Karma
    8

    Default

    Lekcija 4
    Vreme je da naucimo pravljenje linkova.

    To je zaista veoma jednostavno. Napravimo link na KGB.
    Pocnimo ovako...

    <BODY BGCOLOR="#FFFFFF">
    Posetite KGB!
    </BODY>


    (Izgledace ovako: Posetite KGB! )

    Onda Cemo dodati par ANCHOR tagova (tzv. sidra).

    <BODY BGCOLOR="#FFFFFF">
    Posetite <A>KGB!</A>
    </BODY>

    (Izgledace ovako: Posetite KGB! )

    Dodajte URL i gotovo! URL je skracenica od Universal Resource Locator (to znaci univerzalni lokator), sto zapravo znaci web adresa.

    <BODY BGCOLOR="#FFFFFF">
    Posetite <A HREF="http://www.kgb-hosting.com/">KGB!</A>
    </BODY>

    (Izgledace ovako: Posetite KGB! )

    Link za e-mail radi vrlo slicno. Jedina razlika je to sto se umesto web adrese koristi e-mail adresa.

    <BODY BGCOLOR="#FFFFFF">
    Posalji mi <A HREF="mailto:tvojmail@tvojdomen.rs">mail!</A>
    </BODY>

    ( Izgledace ovako: Posalji mi mail! )

    Moguce je koristiti i slike kao linkove. Kako? Vrlo lako: potrebno je staviti <IMG> tag umesto odgovarajuce reci.

    <BODY BGCOLOR="#FFFFFF">
    Posetite <A HREF="http://www.beograd.org.yu"><IMG SRC="grb.jpg" WIDTH=120 HEIGHT=175></A>
    </BODY>

    (izgledace ovako:

    Posetite (ali sa linkom ) )

    * PITANJE: Kako mogu da se oslobodim one ruzne plave linije oko slike-linka?

    ODGOVOR: Prosto... samo dodaj BORDER=0 u IMG tag. (Vidi dole!)

    <BODY BGCOLOR="#FFFFFF">
    Posetite <A HREF="http://www.beograd.org.yu"><IMG SRC="grb.jpg" WIDTH=120 HEIGHT=175 BORDER=0></A>
    </BODY>

    Jos jedna stvar u vezi sa linkovima... Sasvim je prihvatljivo napraviti link na neciju web stranu bez pitanja. Linkovi su ono sto Mrezu cini Mrezom!

    * PITANJE: U Netscape Navigatoru moje slike-linkovi imaju male plave crtice pored sebe. Takodje, ostaju i mali medjuprostori izmedju slika, a ja zelim da sve to bude skroz sastavljeno. O cemu se radi? Inace, u Internet Exploreru sve izgleda normalno.

    __

    ODGOVOR: Netscape tretira pritisnut taster Enter kao razmak (u ovom slucaju izmedju slika). Internet Explorer ne radi to. To je to. Male plave crtice su samo link ispod razmaka. Lek: ne pritiskajte Enter ni pre ni posle slike.
    Ovo je kd za gornje slike:


    <CENTER>
    <A HREF="myhome.html">
    <IMG SRC="pics/myhome.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Home">
    </A>
    <A HREF="mailto:me@my.house">
    <IMG SRC="pics/myemail.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Email">
    </A>
    <A HREF="mylinks.html">
    <IMG SRC="pics/mylinks.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Links">
    </A>
    </CENTER>
    Promena kda u ovako nesto bi uklonila te plave crtice:


    <CENTER>
    <A HREF="myhome.html"><IMG
    SRC="pics/myhome.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Home"></A>
    <A HREF="mailto:me@my.house"><IMG
    SRC="pics/myemail.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Email"></A>
    <A HREF="mylinks.html"><IMG
    SRC="pics/mylinks.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Links"></A>
    </CENTER>



    Dodatna podesavanja i razmak nestaje:


    <CENTER>
    <A HREF="myhome.html"><IMG
    SRC="pics/myhome.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Home"></A><A
    HREF="mailto:me@my.house"><IMG
    SRC="pics/myemail.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Email"></A><A
    HREF="mylinks.html"><IMG
    SRC="pics/mylinks.gif"
    WIDTH="66" HEIGHT="23"
    BORDER="0" ALT="Links"></A>
    </CENTER>





    Je li ovo prevelik problem? Jeste, samo ako ne razumete sta se desava, i kako to srediti. Je li Netscape los browser? Ne, naravno; samo je drugaciji od Explorera. Vazno je znati da ono sto je napisano nece izgledati uvek isto u svim browserima.

    Postoji jos jedna vrsta linka: link na odredjeni deo strane. Kliknite ovde da bi ste magicno bili prebaceni na deo gde smo prvi put pricali o URLovima.

    Evo kako se to radi.

    Prvo oznacite deo gde zelite da prebacite posetioca. Uzmite neku rec i ubacite je izmedju <A> tagova.

    <A>Dodajte</A> URL adresu i to je gotovo!

    Oznacimo deo na koji cemo skociti tako sto cemo ga imenovati /NAME="ime"/.

    <A NAME="upabit">Dodajte</A> URL adresu i to je gotovo!

    Ovim ste oznacili tacku na koju ce se link odnositi.

    Sada mozemo da pognemo "gradnju" linka.

    Klikni <A>ovde</A>

    Dodajmo ime dokumenta...

    Klikni <A HREF="lekcija4byzen.html">ovde</A>

    I na kraju, dodajte sidro, tj. NAME atribut. Ovako...

    Klikni <A HREF="lekcija4byzen.html#upabit">ovde</A>

    To je to! Uskoro i 5 lekcija (Molim moderatore da obrisu postove spamera, gore )

    OVO JE MOJ TEKST PREKOPIRAN SA DRUGOG FORUMA.
    Last edited by ::ZeN::; 06-11-2012 at 11:45.
    CyberShark Administrator
    www.cybershark.rs

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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