HTML Tutorial

Lord Of Midnight

Primećen član
Poruka
887
Verovatno će Vam biti drago da znate da je ovo sve veoma jednostavno. Ovo bi bila osnovna ideja... Web strana nije ništa drugo do fajl, i to HTML fajl, da budem precizan. Zove se HTML, jer web dokumenti imaju ekstenziju .html ili .htm. HTML je skraćenica od Hyper Text Mark-up Language. (Ako ne znate otkud ovi nastavci, onda mora da ste potpuni početnik. Kliknite ovde za "brzinsko" upoznavanje sa vrstama fajlova!).

Počnimo! Prvo, ako imate ijedan od onih cool HTML editora, i upravo se spremate da ga startujete... zaboravite ih potpuno! Najgori način za učenje je korišćenje nekog od tih editora. (Naravno, neki od njih mogu biti vrlo korisni, ali tek kad savladate osnove.) Pa, dobro, šta je najbolje za učenje HTML-a? MS Notepad!!! Verujte mi. OK? OK.

Druga "alatka" koja će Vam trebati je browser za razgledanje web strana. Ja preporučujem Netscape Navigator ili Internet Explorer, koji stiže uz većinu Windows-a. Oba bi trebalo da obave posao sasvim dobro.


Sad kad smo utvrdili sve to, mogu vam reći da ste na samo pet minuta od svoje prve web strane.

* Pitanje: Šta je Notepad i gde mogu da ga nađem?
Odgovor:
Notepad je Windows-ov default tekst editor. Na vecini Win9x sistema, kliknite dugme Start i izaberite Programs, pa Accessories. Tu bi trebalo da se nalazi mala plava svešcica - Notepad. Medjutim, za naše potrebe svaki tekst editor je dobar. Sa Interneta možete skinuti gomilu zgodnih, malih editora, ali je Notepad za sad sasvim dovoljan.

Postoji jedna stvar koju biste trebali da izbegavate - korišćenje tekst procesora (kao što je MS Word) za pravljenje HTML dokumenata. Razlog - format u kome se dokument snima u tekst procesorima ne odgovara web browserima. Po mom mišljenju, ovo pravilo bi trebalo da se primenjuje i na tzv. "Internet-friendly" Word 2000.


Pokrenite Notepad i počnite sa ovim...
<HTML>
</HTML>

Ovo su HTML tagovi. Postoje početni i krajnji tag. Da bi ste napravili krajnji tag, samo dodajte / u početni tag. Veliki broj tagova ima i krajnji tag (ali ne svi!).
Razmišljajte o tagovima kao o razgovoru sa browser-om, ili kao o načinu izdavanja instrukcija browser-u. Ono što ste malopre napisali browser "shvata" kao 'Ovo je početak HTML dokumenta' (<HTML>) i 'Ovo je kraj HTML dokumenta' (</HTML>). Naravno, između ćemo dodati još ponešto.

_______________________________________________

U svakom HTML dokumentu mora se naći i par HEAD tagova.
<HTML>
<HEAD>
</HEAD>
</HTML>
_____________________________________________

Sledeća stvar koja bi trebala da se doda u HEAD je naslov (TITLE).
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
</HTML>
_______________________________________________

Glavni deo HTML dokumenta nalaziće se između BODY tagova.
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
________________________________________________

U TITLE tagove ukucajte ime vase stranice.
A u BODY tagove kucate ono sto zelite da pise na vasoj Web Stranici.

<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.

Čestitam! Postali ste ponosni vlasnik potpuno funkcionalne web strane! Mogli biste da je postavite na neki server (npr. kod Vašeg Internet provajdera, ili na neki besplatni server, kao što su, npr., AngelFire, Homestead ili WebJump), tako da čitav svet može da vidi vaših ruku delo!

Možete je dvaput kliknuti i videti šta ste uradili. Ako želite da vidite kako vaša strana zaista treba da izgleda, pogledajte ovde.
 
Poslednja izmena:
Ovde ću Vam odmah reći nešto, što možda neće biti baš najjasnije... U pitanju su naša slova - š, đ , č , ć, ž. Da biste ih videli, u glavu (HEAD) HTML dokumenta dodajte sledeći 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 želite da koristite ćirilicu, sve što treba je da u gornjem redu vrednost 1250 zamenite sa 1251. Naravno, i tastaturu morate da prebacite na srpsku latiničnu (hrvatsku, slovenačku) odn. na srpsku ćiriličnu! Za sad Vam preporučujem da koristite samo engleska slova. Kad to savladate, lako ćete preći i na naša slova.
________________________________________

Da bi stvari izgledale jasnije, pisaću samo <BODY> tag. Izostaviću sve <HTML>, <HEAD> i <TITLE> tagove. Naravno, podrazumeva se da ćete ih vi pisati u svojim HTML-dokumentima.<BODY>
</BODY>
________________________________________

Otkucajte neki kratak tekst.
<BODY>
neki kratak tekst
</BODY>

Kad god uradite neku promenu u vašem dokumentu, snimite ga, pa pritisnite dugme Reload/Refresh na browser-u, da bi ste videli najnoviju verziju. Nekad to neće biti baš dovoljno (čudne su zverke ti browser-i). U tom slušaju primenite SuperReload (shift+Reload) - naravno, ovo važi samo za Netscape.
________________________________________

Prvo treba da naučimo kako se menja boja pozadine. Ova siva deluje prilično 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 još 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 će automatski umesto nje prikazati najbližu. U ovom trenutku to nije baš važno; no, ako Vas boje baš interesuju, kliknite ovde, gde ćete bolje upoznati ovaj obojeni problem.
____________________________________

Naravno, umesto boje, za pozadinu možete da uzmete i neku sliku. (Obratite pažnju da ona zasad treba da bude u istom folderu u kome se nalazi i Vaš HTML fajl.)
<BODY BACKGROUND="swirlies.gif">
neki kratak tekst
</BODY>

Da bi se slika prikazala, browser mora da bude u mogućnosti da je nađe. Za sada, slika treba da bude u istom folderu u kome se nalazi i Vaš HTML dokument (PAGE1.HTML). Najlakši način da to izvedete je da desnim tasterom miša kliknete na sliku i izaberete Save Image As (ili tako nešto, što zavisi od browser-a). Zatim, sliku snimite u folder u kome je Vaš HTML fajl. Kasnije ćemo "detaljisati".
_____________________________________

Očigledno je da je slika ponovljena više puta (tile) da bi se uklopila u veličinu ekrana. Ako, pak, koristite dugu, a tanku sliku, efekat će biti ovakav...
<BODY BACKGROUND="bluebar.gif">
neki kratak tekst
</BODY>

 
_______________________________

Dobro. Vratimo se sada čistom, 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>
_______________________________

Princip je isti i za ukošena slova (italic).
<BODY BGCOLOR="#FFFFFF">
neki <I>kratak</I> <B>tekst</B>
</BODY>
_______________________________

Naravno, to važi i za podvlačenje (underline).
<BODY BGCOLOR="#FFFFFF">
<U>neki</U> <I>kratak</I> <B>tekst</B>
</BODY>
_______________________________

Vratimo se na čist beli ekran.
<BODY BGCOLOR="#FFFFFF">
neki kratak tekst
</BODY>

___________________________________

Ako želimo, tagovi se često mogu koristiti u raznim kombinacijama.
<BODY BGCOLOR="#FFFFFF">
neki kratak <I><B>tekst</B></I>
</BODY>

Ovo je primer ugnežđenih tagova. Ukoliko ćete koristiti kombinacije tagova (a sigurno hoćete), onda, da ne bi ste zbunjivali browser-e, koristite ugnežđene, a ne preklopljene tagove. Primer sledi...
<OVO>
<ONO></OVO></ONO> preklopljeni tagovi.... loše
<OVO><ONO></ONO></OVO> ugnežđeni tagovi.... dobro
_______________________________

Veoma je interesantan i font fiksne dužine.
<BODY BGCOLOR="#FFFFFF">
<TT>neki kratak tekst</TT>
</BODY>

]Svako slovo zauzima jednaku količinu horizontalnog prostora.

[SIZE=+0]Ovo je običan tip ->[/SIZE][/FONT] iiiiiiiiii
oooooooooo
mmmmmmmmmm
Ovo je font fiksne dužine ->
iiiiiiiiii
oooooooooo
mmmmmmmmmm
 
Takođe možemo da menjamo i veličinu 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 veličina fontova:
malecni mali obični srednji veliki oho-ho veliki i džinovski!
1 2 3 4 5 6 7
Dve napomene. Prva: <TAG> govori browser-u da uradi nešto. Međutim, ATRIBUTE ide u <TAG> i govori browser-u kako da uradi to što zahtevate.
Druga napomena se tiče podrazumevanih vrednosti (default). Kao što verovatno znate, default je vrednost koju browser pretpostavlja, ako niste naglasili drugačije. Dobar primer je veličina fontova. Podrazumevana veličina je 3. Ako nije drugačije naglašeno, ona će zaista i biti 3.

Svaki browser ima podešene podrazumevane fontove - ime, veličinu i boju. Ukoliko niste ništa "prčkali", podrazumevani font je Times New Roman od 12pt (što u HTML-u iznosi 3), crne boje. Naravno, ukoliko želite, u svom HTML dokumentu možete koristiti i druge fontove. Kao, npr.

ARIAL ili VERDANA.

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

Veoma važno!!!
Font će se videti samo ako posmatrač ima instaliran taj font na svom računaru! Ukoliko to nije slučaj, tekst će biti predstavljen podrazumevanim (default) fontom. Zato, oprez sa fontovima! Uz Windows, veoma su česti fontovi Arial i Verdana. Takođe i Impact!. Da bi se ovo delimično prevazišlo, možete navesti više od jednog fonta - ovako...

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

Malo objašnjenje... Browser traži font ARIAL. Ako ga nađe, koristi ga. Ako ne, onda traži sledeći navedeni font - HELVETICA. Ako ga ne nađe, tražiće VERDANA. E, ako ne nađe ni taj font, onda će koristiti podrazumevani (default) font.
Da biste videli kako različiti fontovi mogu da izgledaju u vašem browser-u, pogledajte Handy Dandy Font Viewer [ © J. Barta ].
______________________________________

OK. Nazad na interesantne stvari.
Ako želite, možete da promenite i boju fonta.


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

 
Poslednja izmena:
Unutar jednog taga možemo koristiti više 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>

Još jedanput bih naglasio da tagovi treba da budu ugnežđeni, a ne preklopljeni.

<TAG3><TAG2><TAG1>E-heej!</TAG1></TAG2></TAG3>

Redosled tagova nije uopšte važan.
__________________________________

Još jedna stvar pre kraja ove lekcije. Browser ima podrazumevana podešavanja za boju teksta, linkova, aktivnih linkova, posećenih linkova, kao i za boju pozadine. Te podrazumevane vrednosti su:

Tekst je crn
Linkovi su plavi
Aktivni linkovi su crveni
Posećeni linkovi su ljubičasti

Ukoliko želite, ove podrazumevane vrednosti mogu se lako menjati. Kao prvo, moguće 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 programčić - Color PickerJoe Barta) koji olakšava (i čini interesantnim) eksperimentisanje bojama. Uz pomoć ColorPicker-a možete ne samo da birate boje, već i da menjate vrste i veličine fontova, da isprobavate kako bi izgledala podebljana ili ukošena slova, a možete da se igrate i sa slikama za pozadinu. ColorPicker će automatski generisati <BODY> tag.
___________________________________________

Eto! Sada znate skoro sve u vezi sa manipulisanjem tekstom u Vašim dokumentima. Sada bez problema možete napraviti velika crvena slova ili mala podebljana slova. Možete koristiti i razne vrste fontova, ili FONT FIKSNE ŠIRINE.
Osim toga, moguće je napraviti i tzv. rollercoaster!

HTML kôd za "rollercoaster" izgleda ovako (ako Vas interesuje).
]Pre nego što završimo ovu lekciju, želeo bih da vam skrenem pažnju na još jednu sitnicu. HTML kôd bilo koje stranice može se jednostavno videti - pritisnite View/Source na Vašem browser-u. Dakle, ako prilikom web-surfa naletite na neku finu stranu, i zapitate se "Kako li je ovo urađeno?", znajte da je odgovor udaljen samo nekoliko klikova Vašeg miša.
 
Ovu lekciju ćemo početi malim objašnjenjem 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 drugačije, sav tekst će biti napisan u jednom redu. Ako želite da počnete novi red, moraćete da koristite odgovarajući tag.

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

<BR> u osnovi znači naredbu počni novi red. Sličan tagu <BR> je i tag <P>. Ovaj tag označava početak 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>


Napomena o <P> tagu: ne može se koristiti više puta. Drugim rečima, <P><P><P> obično neće predstavljati gomilu praznih redova, već samo jedan prazan red. Zašto? Kako dodati više praznih redova? Odgovor stiže!
Pogledajmo sledeći primer...
<BODY BGCOLOR="#FFFFFF">
neki kratak tekst
</BODY>



Browser ne prepoznaje više od jedne praznine. Možda to deluje čudno, ali je tako. Važno 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>

Znak & znači početak nekog specijalnog znaka, dok ; označava kraj. Slova između predstavljaju skraćenicu tog specijalnog znaka! Postoji veliki broj takvih znakova. Evo nekoliko često korišćenih... (Pažnja: obavezno koristite MALA SLOVA)


  • [*]&nbsp; (jedno prazno mesto)
    [*]&lt; (< manje od)
    [*]&gt; (> veće od)
    [*]&amp; (&)
    [*]&quot; (" navodnici)
    [*]­crtica)
Naravno, postoji još mnogo specijalnih karaktera. Ako Vas interesuju, možete ih videti ovde.
Ovo će Vas možda malo zbuniti. Ako pritisnete Enter dok kucate, browser će to (obično) shvatiti kao razmak... osim ako razmak već postoji (tad će novi razmak biti ignorisan).
Još jedan kratak primer...
<BODY BGCOLOR="#FFFFFF">
neki<BR>kratak<BR>tekst<BR>
o<BR>HTML-u
</BODY>

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

Sledeći tag je vrlo koristan. Ime mu govori za sebe.
<BODY BGCOLOR="#FFFFFF">
<CENTER>neki kratak tekst</CENTER>
</BODY>

Moguće je centrirati jednu reč ili celu stranicu - sve između <CENTER> tagova biće centrirano.
___________________________________

Pređimo na stavljanje slika na web strane. Koristićemo ovaj grb Beograda. Dakle, kliknite desnim tasterom miša, pa sliku snimite u odgovarajući folder.

Za stavljanje slika, koristi se <IMG> tag.
<BODY BGCOLOR="#FFFFFF">
<IMG>
</BODY>

__________________________________

Takođe, moramo odrediti izvor (source) i veličinu 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, već i gde se ona nalazi. Dijagrami koji slede, trebalo bi da Vam razjasne korišćenje ovog atributa, ako želimo da stavimo sliku koja se, npr, zove "chef.gif".
illust01.gif
SRC="chef.gif" znači da se slika nalazi u istom folderu u kome je i HTML dokument, koji je poziva.

illust02.gif
SRC="images/chef.gif" znači da se slika nalazi u folderu ispod HTML dokumenta koji je poziva. Pitanje je: koliko nivoa ispod? Onoliko koliko je potrebno (a u našem slučaju - jedan)!

illust03.gif
SRC="../chef.gif" znači da je slika u folderu iznad HTML dokumenta koji je poziva.

illust04.gif
SRC="../../chef.gif" znači da je slika dva foldera iznad HTML dokumenta koji je poziva.

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

illust06.gif
SRC="../../../other/images/chef.gif" - nadam se da sami shvatate šta ovo znači.

Postoji i drugi način. Naime, moguće je i korišćenje kompletnih putanja (URL-ova). Na primer: http://www.neka_adresa.net/~ja-na-netu/LottzaStuff/other/images/chef.gif Zašto, pitate se Vi, ima više smisla koristiti relativne (delimične) URLove, nego apsolutne (kompletne) URLove? Zato što tako možete napraviti svoj sajt lokalno (na svom hard-disku), a svi linkovi će normalno funkcionisati. Kada završite sve strane, ceo sajt možete 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.
 
Sledeći 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 može da koristi čist tekstualni browser; neko je možda isključio prikazivanje slika da bi brže surfovao (kako se to radi? - u Netscape-u pritisneš Options pa skloniš potvrdu sa Auto Load Images), itd. U takvim slučajevima, atribut ALT može biti veoma važan Vašim posetiocima.
Još malo o veličini slika.
Probajte ovo...

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

Kao što vidite, browser može i sam da odredi veličinu slike. Zašto se onda gnjavimo sa dimenzijama? Razlog je jednostavan - to omogućava browser-u brže učitavanje slike.

Šta je tu najinteresantnije? Pazi sad...
<BODY BGCOLOR="#FFFFFF">
<IMG SRC="grb.jpg" WIDTH=300 HEIGHT=175>
</BODY>

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

Možete definisati bilo koju veličinu za sliku, nevezano za njenu pravu veličinu. Ako Vam nije jasno, pogledajte šta sve može da se uradi sa ovom malom, crvenom tačkom ->
red_dot.gif
<- (zapravo, to je slika, dimenzija 1×1).


<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>
_______________________________________________

Vreme je da naučimo pravljenje linkova.
To je zaista veoma jednostavno. Napravimo link na Yahoo.
Počnimo ovako...

<BODY BGCOLOR="#FFFFFF">
Posetite Yahoo!
</BODY>
_________________________________________

Onda ćemo dodati par ANCHOR tagova (tzv. sidra).
<BODY BGCOLOR="#FFFFFF">
Posetite <A>Yahoo!</A>
</BODY>

______________________________________________

Dodajte URL i gotovo! URL je skraćenica od Universal Resource Locator (to znači univerzalni lokator), što zapravo znači web adresa.
<BODY BGCOLOR="#FFFFFF">
Posetite <A HREF="http://www.yahoo.com/">Yahoo!</A>
</BODY>
________________________________________

Napravimo još jedan.
<BODY BGCOLOR="#FFFFFF">
Posetite Netscape!
</BODY>
_______________________________________

<BODY BGCOLOR="#FFFFFF">
Posetite <A HREF="http://home.netscape.com/">Netscape!</A>
</BODY>
_________________________________________

Link za e-mail radi vrlo slično. Jedina razlika je to što se umesto web adrese koristi e-mail adresa.
<BODY BGCOLOR="#FFFFFF">
Posalji mi <A HREF="mailto:hej@zdravo.co.yu">mail!</A>
</BODY>
________________________________________

Moguće je koristiti i slike kao linkove. Kako? Vrlo lako: potrebno je staviti <IMG> tag umesto odgovarajuće reči.
<BODY BGCOLOR="#FFFFFF">
Posetite <A HREF="http://www.beograd.org.yu"><IMG SRC="grb.jpg" WIDTH=120 HEIGHT=175></A>
</BODY>
Kod:
[SIZE=3][COLOR=#000080][B] [SIZE=4]PITANJE: [/SIZE][/B][SIZE=4] Kako mogu da se oslobodim one ružne plave linije oko slike-linka?

[B]ODGOVOR: [/B] Prosto... samo dodaj [B]BORDER=0[/B] u [B]IMG[/B] tag. (Vidi dole!)[/SIZE]  [/COLOR][/SIZE]
_______________________________________

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

Još jedna stvar u vezi sa linkovima... Sasvim je prihvatljivo napraviti link na nečiju web stranu bez pitanja. Linkovi su ono što Mrežu čini Mrežom!
 
Pređimo na još neke alatke za formatiranje teksta. Prva je <BLOCKQUOTE>. U većini browsera, ovaj tag će dodati margine sa strane. (Ne znam da li je to baš prava terminologija, ali nadam se da shvatate pojentu.)
<BODY BGCOLOR="#FFFFFF">
<BLOCKQUOTE>
Definicija: Kompjuter, ili računar, predstavlja sklop visokotehnoloških komponenti (hardware) oplemenjenih programima (software) sa zajedničkim ciljem da se omogući masovna obrada podataka, bavljenje grafičkim dizajnom, praćenje tehnološkog procesa proizvodnih programa, upravljanje komunikacionim sistemima itd.
</BLOCKQUOTE>
</BODY>
___________________________________

Sledeća korisna alatka su liste. One mogu biti ORDERED liste ili UNORDERED liste (ne znam kako bi ovo trebalo da se prevede na srpski, ali mislim da ćete shvatiti o čemu se radi).

Ovo je ordered lista



  1. [*]nešto
    [*]još nešto
    [*]i ovo
    [*]i kraj

Ovo je unordered lista



  • [*]crveno
    [*]plavo
    [*]belo
    [*]zeleno
Prvo ćemo videti kako se pravi UNORDERED lista. Vrlo je jednostavno...Ovo je početak.
<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
</BODY>
_________________________________

Dodajmo odgovarajuće tagove.
<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<UL>
</UL>
</BODY>
_____________________________

Dodajmo element liste...
<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<UL>
<LI>nov PC
</UL>
</BODY>
_____________________________

Dodajmo još elemenata (budimo neskromni!)
<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<UL>
<LI>nov PC
<LI>brz gliser
<LI>1.000.000 $
<LI>ostrvo na Pacifiku
<LI>Leticiju Kastu *
</UL>
</BODY>
(* devojke - i mladići sa takvim sklonostima: slobodno upišite Leonardo DiKaprio, npr.)
___________________________

Kako se pravi ordered lista? Lako! Samo treba promeniti <UL> tag u <OL>.
<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<OL>
<LI>nov PC
<LI>brz gliser
<LI>1.000.000 $
<LI>ostrvo na Pacifiku
<LI>Leticiju Kastu
</OL>
</BODY>
_____________________________

Kako se pravi ordered lista? Lako! Samo treba promeniti <UL> tag u <OL>.
<BODY BGCOLOR="#FFFFFF">
Šta želim za rodjendan?
<OL>
<LI>nov PC
<LI>brz gliser
<LI>1.000.000 $
<LI>ostrvo na Pacifiku
<LI>Leticiju Kastu
</OL>
</BODY>
 
Ako vas zanima kako se prave Web Stranice, sada ste u prilici da naucite osnove HTML-a.
Programa za izradu Web Stranica. Samo da napomenem da ovo nije kompletan HTML ima jos dosta stvari, ali ovo vam je dovoljno da namestite Web Stranicu i da je okacite na neki hosting kako bi svi mogli da je vide...
Ukoliko imate nekih problem ili vam nesto nije jasno pitajte ovde.;)
 
Lorde covece, imam ozbiljne primedbe:

1) zasto nisi preporucio charset=utf-8
2) predlazes uzastopne space-ove sa
beskonacnim ponavljanjem &nbsp; To se radi recimo sa <label style="width:300px;">&nbsp;</label>
3) Nisi dao ljudima link na spisak specijalnih karaktera. Evo recimo ovde
4)
<IMG SRC="grb.jpg" WIDTH=300 HEIGHT=175> nije pravilno i nece ti proci ni kroz jedan HTML validator. Pravilno je <IMG SRC="grb.jpg" WIDTH="300" HEIGHT="175" />
Ergo, vrednosti atributa moraju biti pod navodnicima.
5) Da li je moguce da ti u svaki image link stavljas BORDER="0". To se radi kroz CSS:
a img{border:0;text-decoration:none;}

6) za OL nisi objasnio atribut START


No hard feelings!
 
  • Podržavam
Reactions: DJM
pa nabavis kod od tog widgeta (obicno na sajtovima gde imaju widgeti stoji odmah pored i kod) i samo copy/paste u web sajt u namenjeno mesto, malo doradis sajt, da bi lepse izgledao i gotova stvar...
 
ovo je html tutorial za pocetnike.

ne mozes da ocekujes da pocetnika naucis najnovijoj tehnologiji. uvek se krece od pocetka - zato se u skoli i uci pascal, a ne java, c++ ili neki visi jezik
 

Back
Top