SystemPro

Ovde se nalaze tekstovi koji predstavljaju sadr?aj epizoda koje se emituju na 2. programu Radio-televizije Srbije u okviru emisije Putokaz, ponedeljkom u 10h i 16 i 30. Nadamo se da æe vam ove epizode omoguæiti da ?to lak?e nauèite HTML i sa uspehom pravite web prezentacije.

I epizoda

Dobar dan i dobro do?li! Ovo je prvi cas na?e male ?kole HTML-a. Koliko god to cudno zvucalo, nije nimalo lako definisati. Tri moguce definicije su:
? Mre?a koja se sastoji od mnogih mre?a racunara koje koriste protokole skupa TCP/IB.
? Ljudska zajednica koja razvija i koristi te mre?e.
? Zbirka resursa i podataka do kojih se mo?e doci na tim mre?ama.
Vec decenijama se ljudi pri projektovanju re?enja za web oslanjaju na jednostavno koncipiran i vrlo praktican Hypertext Markup Language, skraceno HTML.
HTML je jezik pomocu koga se kombinuju slike, tekst, veze izmedu dokumenata i zvucni zapisi u tako dostupnu formu, a sadr?aj internet stranica se uglavnom prenosi u kodu HTML-a.
HTML se sastoji od tagova, ne?to slicno komandama i funkcijama u programskim jezicima. Svi tagovi pocinju karakterom ?<? a zavr?avaju karakterom ?>?. Zavr?ni tag se razlikuje od pocetnog samo u tome ?to je dodat karakter ?/?. Primer pocetnog i zavr?nog taga je ?<ime Tag-a>? i ?</ime Tag-a>?.
Ovo je bio samo uvod u pricu. A sad polako o svemu...
Prvo, potreban Vam je editor u kome cete pisati HTML kod. Postoje razni web editori kao ?to su : HomeSite, Dreamweaver,... , ali je za pocetak dovoljan Notepad. Druga ?alatka? koja ce Vam trebati za razgledanje web strana je browser: Netscape Navigator ili Internet Explorer.
Pokrenite Notepad i pocnite sa ovim:
<HTML>
</HTML>
Ovo je pocetni i krajnji HTML tag. U svakom HTML dokumentu mora se naci i par HEAD tagova, a u njemu TITLE tj. Naslov.
To izgleda ovako:
<HTM L>
<HEAD>
<TITLE>Naslov</TITLE>
</HEAD>
</HTML>
BODY Tagovi se nalaze posle HEAD-a i u njih ide glavni deo HTML dokumenta.
<HTML>
<HEAD>
<TITLE>Naslov</TITLE>
</HEAD>
<BODY>
Mala ?kola HTML-a
</BODY>
</HTML>
Bilo je to sve za danas, gledajte nas i sledece nedelje i naucite da pode?avate boje i pozadinu.

II epizoda

Dobar dan i dobro dosli u drugu epizodu male skole HTML-a.
Danas cemo uciti kako se podesavaju boje i pozadina u HTML dokumentu.
Prvo treba da naucimo kako se menja pozadina.
BODY tag izmenite tako sto cete dodati BGCOLOR="#neka boja".
Izmedju navodnika moze da stoji osnovna boja napisana na engleskom jeziku ili
"#heksadekadna ozanaka za neku boju".
Ovo su primeri nekih boja napisanih heksadekadnim brojevima:
BELA="#FFFFFF"
ZELENA="#00FF00"
CRVENA="#FF0000"
PLAVA="#0000FF"
CRNA="#000000"
Probajte da koristite neku drugu boju u opsegu od 000000 do FFFFFF.
Ukoliko vam se boja koju ste ukucali ne svidja unesite promenu u
vasem dokumentu, snimite ga pa pritisnite dugme Riloud/Rifres na
vasem browseruda bi ste videli najnoviju verziju.
Takodje umesto boje, za pozadinu mozete da uzmete neku sliku.
Ta slika mora da bude u istom folderu u kome se nalazi vas HTML fajl.
Ubacite je ovako:
<BODY BACKGROUND="ime slike.(jpg, gif,...)">
MALA HTML SKOLA
</BODY>

KOMENTARI

U HTML-u se cesto koriste komentari. Oni se ne vide na stranici i obicno slu?e za ime autora ili
datum kada je stranica zadnji put promenjena. Komentare mo?ete videti ako pogledate izvorni
kod web stranice ( View/source, u Internet Explorer-u ili view/page source u Netscape
Navigator-u). Komentari se obicno stavljeju u zaglavlje stranice.
<HEAD>
<TITLE> Primer komentara <\TITLE>

<\HEAD>
To bi bilo sve za danas.U sledecoj emisiji pogledajte kako se radi sa tekstom
Ukoliko nesto od ovoga sto smo vam rekli niste zapamtili ili razumeli mozete
posetiti nas sajt na www.systempro-kids.com. Ako vam neka od pomenutih reci ne zvuci poznato
na nasem sajtu se nalazi i recnik termina.

III epizoda

Rad sa tekstom i komentari

TEKST

Svaki brwser ima pode?ene podrazumevane fontove-ime,velicinu i boju. 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.
<BODY BGCOLOR="#FFFFFF">neki kratak <FONT FACE="ARIAL" >tekst<\FONT>
<\BODY>
Font ce se videti ako posmatrac ima instaliran taj font. Ukoliko to nije slucaj tekst ce biti
predstavljen podrazumevanim default fontom. Da bi se ovo izbeglo, mo?ete navesti vi?e
od jednog fonta. Ovako...
<FONT FACE="ARIAL,HELVETICA,VERDANA>Zdravo<\FONT>
Browser tra?i font Arial. Ako ga nade koristi ga. Ako ga ne nade, tra?i sledeci navedeni
font-Helvetica, ako ga ne nade koristi Verdanu. Ako ne nade ni taj font koristi podrazumevani
default font.
Ako ?elite mo?ete da menjate i boju fonta. Unutar jednog taga mo?emo koristiti vi?e atributa.
<BODY BGCOLOR\"#FFFFFF">neki kratak<FONT COLOR="#FF0000" FACE="ARIAL" SIZE="7">
tekst<\FONT> <\BODY>
Posle pode?enog fonta mogu se namestiti i i razliciti stilovi slova. Za podebljana (boldirana)
slova treba ukucati tag <B> i zavr?ni tag <\B>. Za podvucena slova treba ukucati <U> i <\U>, a za
isko?ena slova <I> i <\I>. Ovim smo browseru-u rekli: Neka tekst izmedu <B> i <\B> bude
podebljan, isko?en izmedu <I> i <\I> i podvucen izmedu <U> i <\U>. Ako ?elimo, tagovi se mogu
koristiti u razlicitim kombinacijama.
<BODY BGCOLOR="#C45FAB"><I><B>neki kratak tekst<\B><\I>
Ovo je primer ugne?denih tagova. Da ne bismo zbunjivali browsere necemo koristiti preklopljene
vec ugne?dene tagove.
<B><U><\B><\U> - preklopljeni tagovi...lo?e
<B><U><\U><\B> - ugne?deni tagovi...dobro
Moguce je napraviti i takozvani rollercoast! Probajte...
?eleli bismo da vam skrenemo pa?nju na jo? jednu sitnicu. Browser ne prepoznaje formiranja
u tekstu. Drugim recima, ceo tekst ce biti ispisan u jednom redu, ako ne naglasite
posebnim tagom. Ako ?elite da pocnete novi red, moracete da koristite tag <BR>.
<BODY BGCOLCOR="#FFFFFF">
neki
<BR>kratak
<BR>tekst
<BR>o HTML-u
<\BODY>
<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>
<P> tekst <\P>
<P> o HTML-u <\P>
<\BODY>
Tag <P> ne mo?e se koristiti vi?e puta. Drugim recima, <P><P><P><P> nece predstavljati gomilu
praznih redova, vec samo jedan prazan red. Za?to? Kako dodati vi?e praznih redova.
Pogledajmo sledeci primer...
<BODY BGCOLOR="#FFFFFF"><P>neki<\P> kratak tekst
<\BODY>
Browser ne prepoznajevi?e od jedne praznine. Mo?da to deluje cudno, ali tako je. Va?no je da
vam to daje bolju kontrolu nad tekstom.
Naravno, postji tag, koji za browser predstavlja prazno mesto -   Probajte ovo...
<BODY BGCOLOR="#FFFFFF">
neki      
kratak      
tekst
<\BODY>
Znak & znaci pocetaknekog specijalnog znaka:
-&nbsp
-&lt
-&gt
-&amp
-&quot
-&shy
Sledeci tag je vrlo koristan...
<BODY BGCOLOR="#FFFFFF">
Moguce je centrirati jednu rec ili celu stranicu-sve se centrira izmedu tagova <CENTER> i
<\CENTER>.

KOMENTARI

IV epizoda

Dobar dan dragi gledaoci.Prosle epizode pricali smo Vam o obradi teksta
i komentara. Danas cemo Vam objasnti rad sa linkovima koji su veoma
zastupljeni na vecini internet stranica. Linkovi sluze da se sa
jedne stranice, jednim pritiskom na dugme misa, prebacimo na drugu
stranicu. Linkovi predstavljaju hipertekstualne veze.
Hipertekstualna veza je rec ili grupa reci, koje posetilac stranice,
treba da pritisne da bi web citac preuzeo web stranicu sa web servera.
Postavljanje linka na web stranicu:
Da bi ste napravili hipertekstualnu vezu, stavite pocetnu i zavrsnu
<a></a>, oko teksta koji zelite da posetilac pritisne, kako bi
pokrenuo vezu. Primer
<a herf="ime sajta.html">Ovo je link</a>.
Kada posetilac pritisne hipervezu (obicno podvucen tekst plave boje)
"Ovo je link", odlazi na stranicu cije ste ime ukucali. Takodje
linkove mozete koristiti da predjete na neku stranicu na Internetu
(<a href="http://www.yahoo.com/">posetite yahoo!</a>)
ili na neciju E-mail adresu
(<a href="mail to:e-mail adresa">Ovo je link na E-mail</a>).
Takodje mozete obradjivati tekst izmedju oznaka hiperveze,
o cemu smo ucili na proslom casu. Zapamtite i to da su linkovi plavi,
aktivni (linkovi na stranice na Internetu) linkovi crveni, a poseceni
linkovi ljubicasti. Ako zelite navedene vrednosti se lako mogu
promeniti <body link="boja" vlink="boja>.

V Epizoda

SLIKE

Slike se na Web stranicu stavljaju iz istog razloga kao u bro?uru ili casopis-da bi citaoci bolje razumeli ono ?to ?elite da ka?ete.
Medutim, slike se sporije ucitavaju od teksta, pa se zato koriste posebni formati da bi se iste br?e ucitale.
Najpopularniji formati danas su GIF i JPEG format.
1.GIF format
GIF (Graphic Interchage Format) format, kao ?to je pomenuto, je jo? jedan format pomocu koga mo?ete komprimovati datoteke sa slikama koje planirate da prika?ete na internetu.
Format GIF je najbolji za ilustracije, tekst, logotipe i slike sa o?trim ivicama, ali je i format koji smanjuje broj boja sa 16,7 miliona na 256 pri cemu se smanjuje i njena velicina, ali i njen kvalitet.
2.JPEG format
Clanovi grupe Joint Photographic Experts Group su stvorili format JPEG. Ovaj format smanjuje velicinu slike, ali i njen kvalitet. Takode postoji i mogucnost dodatnog zamagljenja za smanjenje velicine.
POSTAVLJANJE SLIKE NA WEB STRANICU
Slike se postavljaju na stranicu pomocu <img> taga.
Primer: <img src = ?ime slike.format?>.
Ovde moramo naglasiti da atribut src ne pokazuje samo koja je slika u pitanju, vec i gde se ona nalazi. Zato je najbolje da sve slike i stranicu, gde ce se slike nalaziti, stavite u isti folder
Mo?emo i pode?avati ?irinu i visinu slike pomocu atributa HEIGHT i WIDTH.
<img src = ?slika.gif? width=??irina slike? height=?visina slike?>
Atribut ALT predstavlja zamenu za sliku, kada posetilac sajta (iz bilo kog razloga) ne vidi sliku.
Primer: <img src= ?slika.gif? width=?100? height=?200? alt=?Ovo je primer atributa alt?>
POSTAVLJANJE GRAFICKIH LINKOVA
Kao ?to pomocu teksta mo?emo napraviti hipervezu na neku stranicu, tako isti tag mo?emo iskoristiti za graficke linkove.
<a href=?sajt.html?><img src= ?slika.gif? width=?100? height=?200? alt=?Ovo je slika?></a>.

VI Epizoda

Dodati tagovi
Pored osnovnih tagova postoje mnogi drugi koji sluze za
vizuelno ulepsavanje stranice.
<hr> tag
Na mnogim web sajtovima za uredjivanje stranica se
koriste horizontalne linije. One se postavljaju pomocu
<hr> taga. Samo dodajte <hr> tag na mestu na kojem
zelite da se linija pojavi.
Mozete joj menjati boju, senku, visinum sirinu,
poravnanje...
<hr color="boja" align="center" width="sirina"
height="visina" shading="no">. Podrazumevano je da je
shading ukljuceno.
H1-H7
U HTML-u postoje definisane velicine teksta, koje se
obicno koriste za podnaslove i naslove.
Samo stavite tekst izmedju bilo kog <h> taga.
Primer:
<h1>ovo je najveci tekst</h1>
<h2>ovo je malo manji tekst</h2>
<h7>ovo je najmanji tekst</h7>
Ovo mozete koristiti do <h7> taga.
Sup, Sup tagovi
U slucaju da neki tekst zelimo da prikazemo kao
indeks ili nad tekst koristimo tagove Sub i Sup.
<sub>indeks</sub>
<sup>nad tekst</sup>

VII Epizoda

Jos jedna korisna alatka u HTML-u su liste. Postoje tri vrste listi:
1. Uredjene liste
2. Neuredjene liste
3. Definicione liste

1. Uredjene liste

Pocecemo sa uredjenim listama. Vrlo se jednostavno postavljaju. Samo treba da dodamo tekst izmedju <ol> i </ol> tagova. Za dodavanje novih elemenata liste koriste se <li> tagovi.
Primer:
<body bgcolor=?#ffffff?>
Primer uredjene liste!
<ol>
<li>jedan
<li>dva
<li>tri
</ol>
</body>

2. Neuredjene liste

Neuredjene liste se prave isto kao i uredjene samo sto umesto <ol> i </ol> stavimo <ul> i </ul> tagove.
Primer:
<body bgcolor=?#ffffff?>
Primer neuredjene liste!
<ul>
<li>jedan
<li>dva
<li>tri
</ul></body>
3. Definicione liste

Osim ove dve postoje i definicione liste. One se obicno koriste za objasnjenja nekih reci. Sastoje se iz jedne reci i njenog objasnjenja nekoliko razmaka uvucenog.
Primer:
<body bgcolor=?#ffffff?>
Primer definicione liste!
<dl>
<dt>Modem?
<dd>Uredjaj koji omogucava pristup Internetu
<dt>mis?
<dd>Uredjaj koji omogucava pomeranje kursora na ekranu
</dl>
</body>

VIII epizoda

Tabele ? I deo

Tabele se veoma cesto koriste u HTML-u. One se u HTML-u formiraju na specifican nacin. U HTML-u se prvo definise tabela, pa red tabele, pa polja koja ce se nalaziti u tom redu. Svaki red mora sadrzati bar jedno polje. Sada cemo preci na tagove tabele.
Osnovni tagovi kod tabela su <table> i </table>. Oni se dodaju unutar body taga. Unutar njih dodajemo tagove za redove i kolone (polja).
Primer:
<body>
<table>
<tr>
<td>prva kolona tabele u prvom redu</td>
<td>druga kolona tabele u prvom redu</td>
</tr>
<tr>
<td>prva kolona u drugom redu</td>
<td>druga kolona u drugom redu</td>
</tr>
</table>
</body>
Evo objasnjenja:
<table> i </table> - Osnovni tagovi tabele
<tr> i </tr> - Tagovi za definisanje novih redova
<td> i </td> - Tagovi za definisanje kolona
Takodje u okviru table taga se mogu koristiti sledeci atributi za izgled cele tabele:
Background ? Atribut sluzi za postavljanje slike koja ce se pojaviti u pozadini cele tabele
Bgcolor ? Atribut sluzi za definisanje pozadinske boje cele tabele. Boja se zadaje njenim imenom ili heksadecimalnim kodom.
Border ? Debljina granice tabele se definise ovim atributom
Bordercolor ? Opcija sluzi za definisanje boje granice
Takodje se mogu definisati atributi width i height u okviru table taga za odredjivanje visine i sirine cele tabele.
Ovi atributi se takodje mogu primeniti samo na odredjene redove ili kolone tabele u okviru tr i td tagova.
Primer:
<body>
<table width=?800? height=?900? border=?3? bordercolor=?blue?>
<tr>
<td bgcolor=?red? width=?250?>Primer prve definisane kolone</td>
<td bgcolor=?green? width=?550?>Primer druge definisane kolone</td>
</tr>
</table>
</body>

IX Epizoda

Tabele ? II deo

Na prethodnom casu smo naucili kako da napravimo tabele i osnovne tagove i atribute. Na ovom casu cemo nauciti neke dodatne tagove i atribute.
Krenucemo sa tagovima.

<th> tag
Ovo je tag za zagavlje tabele. On je identican tagu za kolonu tabele sa dodatnim opcijama. Jedina razlika je sto je u<th> tagu horizontalno poravnjanje centrirano I tekst podebljan.
<caption> tag
Ovo je tag za zadavanje naslova tabele. Postavlja se odmah posle <table> taga, pre <tr> taga.
Prelazimo na atribute.
Ovi atributi se definisu u okviru table taga:
cellspacing
Atribut sluzi za podesavanje razmaka izmedju polja tabele. Ako zelite da nema razmaka podesite atribut na nulu.
cellpading
Opcija sluzi za definisanje razmaka izmedju granice polja i podataka u tom polju. Ako zelite da nema razmaka podesite atribut na nulu.

Sledeci atributi se koriste u okviru tr i td tagova:
Valign ? podesavanje poravnjanja u odnosu na vertikalu
Align ? podesavanje poravnjana u odnosu na horizontalu
Ako se atribut align definise u okviru table taga on podesava poravnjanje tabele o odnosu na ivice citaca (browsera).
Colspan ? Opcijom colspan se upravlja samim poljem tabele. Ovim se zadaje komanda da se polje prostire na vise polja u jednom redu.
Rowspan ? Atributom rowspan se takodje upravlja samim poljem. Opcijom se zadaje komanda da se polje prostire na vise redova.

Ovde moram da napomenem da kada zadajemo komande colspan ili rowspan moramo da napravimo kolone preko kojih ce se polje definisano tim atributima prostirati. Ako to ne uradimo, tabela nece izgledati onako kako ste zamislili.