Nalazite se trenutno ovde:


*
MS Tim



    D O B R O D O S L I    ! ! !




* Pravila foruma

KODIRANJE LINKOVA
Sve linkove ili grupe linkova koji vode ka drugim sajtovima, a koje ostavljate u svojim porukama morate staviti izmedju odgovarajućih CODE tagova. Da bi linkovi bili vidljivi, treba kliknuti na dugme "Hvala" koje je obojeno plavim slovima, i nalazi se ispod avatara korisnika koji je postavio temu ili post.

DUPLIRANJE TEMA
Pre nego što želite da otvorite neku temu i postavite neke linkove...izvršite PRETRAGU. Izaberete željenu sekciju i namestite da Vam pretraga prikaže rezultate kao TEME, da biste imali sto pregledniji uvid u postavljene teme na forumu i da izbegnete da postavite duplikat.

POSTAVLJANJE TEMA
Da biste sebi i drugim članovima olakšali pretragu na forumu, potrebno je da temama date originalne nazive i godine proizvodnje.


HTLM / Tutorijal

Autor (Pročitano 947 puta)

0 Članovi i 1 gost pregledaju ovu temu.

HTLM / Tutorijal
« poslato: 12 Septembar 2013, 00:56:59 »
 

Van mreže LEGIJA.007

  • Zahvalnice
  • -Zahvalio: 77
  • -Pohvaljen: 2678
  • Aktivan član
  • ******
  • 231
    Poruke
  • Ona lijepa a ja mlad :*
HTLM - Uvod

[box title=]HTML (Hyper Text Markup Language) je kao što mu ime govori jezik za opisivanje Web stranica. On određuje na koji način i koje informacije će se prikazati na Web stranicama.

HTML nije programski jezik, već jezik za obeležavanje i predstavlja standardni jezik Web-a.

HTML stranice se završavaju sa .html ili .htm.

HTML komande se pišu u vidu takozvanih TAG-ova. Komande u HTML-u su “case insensitive”, što znači da je svejedno da li ih pišete velikim ili malim slovima.

Tagovi se pišu unutar oznaka < i >. Na primer:

<html>

<html> tag je početni tag koji se nalazi na početku svakog HTML fajla. Ovaj tag ima svoj završni tag koji se označava sa </html>. Završni tagovi imaju oznaku / i označavaju mesto na kojem prestaje dejstvo početnog taga. Većina tagova u HTML-u ima svoj završni tag, međutim postoje i izuzetci koji ih nemaju, kao što je to slučaj sa tagom
.

Svaki HTML dokument se sastoji iz dva dela: zaglavlja i tela. Zaglavlje se nalazi između tagova <head> i </head> a telo između tagova <body> i </body>.

Zaglavlje u HTML-u se koristi da prikažete neke informacije o stranici. Te informacije nisu vidljive u prozoru Web pretraživača. Ako želite da vidite ove informacije, to možete uraditi desnim klikom miša na Web stranicu, pa odabrati opciju View Page Source, ili samo Source u zavisnosti od toga koji Web pretraživač koristite.

U okviru zaglavlja, tj. tagova <head> i </head> se nalaze tagovi <title> i </title> između kojih se stavlja naslov Web stranice. Pažnja! Ovaj naslov se nepojavljuje u telu HTML dokumenta, već u naslovnoj liniji Web pretraživača.

Telo Web stranice je mesto gde stavljamo sve one podatke koje želimo da prikažemo posetiocima Web stranice. Svi ti podaci se nalaze između tagova <body> i </body>.

Za kreiranje HTML stranica vam je potreban najobičniji tekst editor i Web pretraživač koji dolaze podrazumevano instalirani sa svakim operativnim sistemom, pa ih sigurno imate na svom računaru.

Otvorite tekst editor i unesite sledeći kod:

<html>
<head>
<title> Moja prva Web stranica </title>
</head>
<body> Ovo je moja prva Web stranica! </body>
</html>

Ovaj kod prestavlja osnovu svakog HTML dokumenta. Da bi vam sve ovo gore opisano bilo jasnije, sačuvajte ovaj dokument, npr. kao moja_prva_web_stranica.html, i otvorite ga u vašem Web pretraživaču.
[/box]
 


Odg: HTLM / Tutorijal
« Odgovor #1 poslato: 12 Septembar 2013, 00:58:02 »
 

Van mreže LEGIJA.007

  • Zahvalnice
  • -Zahvalio: 77
  • -Pohvaljen: 2678
  • Aktivan član
  • ******
  • 231
    Poruke
  • Ona lijepa a ja mlad :*
HTML - Boje
[box title=]
Boje u HTML-u možemo definisati na tri načina:

1. Heksadecimalnog načina bojenja, ispred koga se obavezno stavlja znak #, na primer: #ff0000 za crvenu, #ffff00 za žutu itd.

2. RGB vrednostima, na primer: rgb(255,0,0) za crvenu, rgb(0,0,255) za plavu, itd.

3. Preko engleskog naziva za boje: red, za crvenu, green za zelenu, blue za plavu, yellow za žutu, itd.

Da dodamo boju pozadini na HTML stranici, koristimo atribut bgcolor koji se nalazi u okviru <body> taga. Na primer:

<html>
<head>
<title> HTML Boje </title>
</head>
<body bgcolor="#ff0000"> Pozadina ove Web stranice je crvene boje! </body>
</html>

Kao što vidimo za dodelu vrednosti određene boje atributu bgcolor koristimo znak jednakosti (=), a vrednost atributa se obavezno stavlja između znakova navoda (" i ").

Kao rezultat gore navedenog koda dobićemo HTML stranicu sa crvenom pozadinom.
[/box]
« Poslednja izmena: 12 Septembar 2013, 00:59:42 od strane LEGIJA.007 »
 

Odg: HTLM / Tutorijal
« Odgovor #2 poslato: 12 Septembar 2013, 01:02:23 »
 

Van mreže LEGIJA.007

  • Zahvalnice
  • -Zahvalio: 77
  • -Pohvaljen: 2678
  • Aktivan član
  • ******
  • 231
    Poruke
  • Ona lijepa a ja mlad :*
HTML - Liste

[box title=]U HTML-u razlikujemo tri različita tipa listi: uređene, neuređene i definisane liste.

Uređene liste


Za kreiranje uređenih listi koristimo <ol> tag. Svaku stavku u listi definišemo pomoću <li> taga (ovaj tag ne zahteva završni tag).

Primer jedne uređene liste:

<html>
<head>
<title>Uređena lista</title>
</head>
<body>
<ol>
<li>Kafa
<li>Šećer
<li>Mleko
<li>Med
</ol>
</body>
</html>

Rezultat je:

Kafa
Šećer
Mleko
Med

Kao što vidite iz primera, uređene liste su podrazumevano označene arapskim brojevima. Ovo možete promeniti ubacivanjem atributa type u <ol> tag, koji može imati sledeće vrednosti:

A - velika slova
a - mala slova
I - rimski brojevi
i - mali rimski brojevi

Primer:

<html>
<head>
<title>Uređena lista označena malim slovima</title>
</head>
<body>
<ol type="a">
<li>Kafa
<li>Šećer
<li>Mleko
<li>Med
</ol>
</body>
</html>

Rezultat je:

Kafa
Šećer
Mleko
Med

Neuređene liste

Za kreiranje neuređenih listi koristimo <ul> tag, dok za definisanje stavki liste, kao i kod uređenih, koristimo <li> tag.

Primer neuređene liste:

<html>
<head>
<title>Neuređena lista</title>
</head>
<body>
<ul>
<li>Kafa
<li>Šećer
<li>Mleko
<li>Med
</ul>
</body>
</html>

Rezultat je:

Kafa
Šećer
Mleko
Med

Za razliku od uređene liste koja za označavanje stavki podrazumevano koristi brojeve, neuređena lista koristi ispunjenu okruglu dugmad. Ovo takođe možete izmeniti ubacivanjem atributa type u <ul> tag, na primer:

<html>
<head>
<title>Neuređena lista označena okruglim praznim dugmadima</title>
</head>
<body>
<ul type="circle">
<li>Kafa
<li>Šećer
<li>Mleko
<li>Med
</ul>
</body>
</html>

Rezultat je:

Kafa
Šećer
Mleko
Med

Definisane liste

Definisane liste kreiramo pomoću <dl> taga. Svaku stavku definisanih listi započinjemo <dt> tagom, a njihove definicije <dd> tagom.

Primer definisane liste:

<html>
<head>
<title>Definisana lista</title>
</head>
<body>
<dl>
<dt>Kafa
<dd>Pijem je svakog jutra
<dt>Šećer
<dd>Volim ga s kafom
<dt>Mleko
<dd>Pijem ga svakog jutra
<dt>Med
<dd>Odličan je sa mlekom
</dl>
</body>
</html>

Rezultat je:

Kafa
Pijem je svakog jutra
Šećer
Volim ga s kafom
Mleko
Pijem ga svakog jutra
Med
Odličan je sa mlekom

Kao što vidimo iz primera, stavke su poravnate uz levu marginu, a njihove definicije započinju u novom redu i uvučene su za određeni broj mesta.

Liste takođe možemo i ugnežđavati jednu u drugu, evo primera jedne takve liste:

<html>
<head>
<title>Ugnežđena lista</title>
</head>
<body>
<ul>
<li>Kafa</li>
<li>Čaj
<ul>
<li>Crna kafa</li>
<li>Bela kafa
<ul>
<li>Šećer</li>
<li>Med</li>
</ul>
</li>
</ul>
</li>
<li>Mleko</li>
</ul>
</body>
</html>

Rezultat je:

Kafa
Čaj
Crna kafa
Bela kafa
Šećer
Med
Mleko
[/box]
« Poslednja izmena: 12 Septembar 2013, 01:04:21 od strane LEGIJA.007 »
 

Odg: HTLM / Tutorijal
« Odgovor #3 poslato: 12 Septembar 2013, 01:03:37 »
 

Van mreže LEGIJA.007

  • Zahvalnice
  • -Zahvalio: 77
  • -Pohvaljen: 2678
  • Aktivan član
  • ******
  • 231
    Poruke
  • Ona lijepa a ja mlad :*
HTML - Formatiranje

[box title=]Kada je u pitanju formatiranje ili rad sa tekstom, u HTML-u za tu namenu postoji puno tagova. Pa tako tekstu možemo menjati font, boju, veličinu, poziciju, itd.

Rad sa fontovima u okviru HTML stranica obavlja se pomoću <font> taga. Ovaj tag može imati sledeće atribute: face, size i color.

Atributom face definišemo kojim fontom želimo da tekst bude ispisan. Na primer:

<font face="Verdana"> Ovaj tekst je ispisan fontom Verdana! </font>

Rezultat je:

Ovaj tekst je ispisan fontom Verdana!

Atributom size definišemo veličinu fonta. Na primer:

<font face="Verdana" size="2"> Ovaj tekst je ispisan fontom Verdana! </font>

Rezultat je:

Ovaj tekst je ispisan fontom Verdana!

Atribut color definišemo boju fonta. Na primer:

<font face="Verdana" size="2" color="green"> Ovaj tekst je ispisan fontom Verdana! </font>

Rezultat je:

Ovaj tekst je ispisan fontom Verdana!

U HTML-u tekst možemo podebljavati, podvlačiti, precrtavati, itd. Evo liste najpoznatijih tagova za formatiranje teksta u HTML-u:

<p> tag za odlomak </p>

podebljani tekst (bold)

nakrivljen tekst

nakrivljen tekst

podvučen tekst

<strong> "jaki" tekst </strong>

<center> centriran tekst </center>

<sup> podignut tekst </sup>

<sub> spusten tekst </sub>

precrtan tekst

<blink> tekst treperi </blink>

<marquee> tekst skroluje </marquee>

<code> tekst kompjuterskog koda </code>

Podrazumevano tekst u Web pretraživaču će se prelomiti na kraju reda. Ako želite da to izbegnete, stavite ga između tagova <nobr> i </nobr>. Na primer:

<nobr> tekst koji se neće prelomiti </nobr>

Pored taga koji ne dozvoljava tekstu da se prelomi na kraju reda, postoji i tag kojim tekst možete prelomiti na tačno određenom mestu koje vi želite, to je tag <wbr>. Ovaj tag ne zahteva završni tag. Sličan ovom tagu je tag
 koji se koristi kada želimo da pređemo u novi red. I ovaj tag nema završni tag.

Tekst se podrazumevano u Web pretraživaču poravnava uz levu stranu. Ako želimo da ga poravnamo uz desnu stranu ili centriramo, koristićemo atribut align. Na primer:

<p align="left"> Poravnava tekst uz levu stranu! </p>

Poravnava tekst uz levu stranu!

<p align="right"> Poravnava tekst uz desnu stranu! </p>

Poravnava tekst uz desnu stranu!

<p align="center"> Centrira tekst! </p>

Centrira tekst!

U slučaju da želimo da uvučemo tekst za određeni broj mesta, koristićemo oznake &nbsp. Ove oznake uvlače tekst za jedan pritisnut TAB taster na tastaturi. Ako želimo da tekst uvučemo za više mesta od jednog TAB-a, ispisaćemo više ovakvih oznaka. Na primer:

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

Kao što vidimo iz primera, oznake razdvajamo sa ; (tackom-zarezom).

U HTML-u postoji i tagovi kojima se određuje veličina naslova u telu HTML dokumenta i prikazani su u sledećem primeru:

<h1> HTML Formatiranje </h1>

<h2> HTML Formatiranje </h2>

<h3> HTML Formatiranje </h3>

<h4> HTML Formatiranje </h4>

<h5> HTML Formatiranje </h5>

<h6> HTML Formatiranje </h6>
[/box]
 

Odg: HTLM / Tutorijal
« Odgovor #4 poslato: 12 Septembar 2013, 01:10:26 »
 

Van mreže LEGIJA.007

  • Zahvalnice
  • -Zahvalio: 77
  • -Pohvaljen: 2678
  • Aktivan član
  • ******
  • 231
    Poruke
  • Ona lijepa a ja mlad :*
HTML - Tabele


[box title=]Tabele u HTML-u definišemo pomoću <table> taga. Tabela je podeljena na redove koje definišemo pomoću <tr> taga, a svaki red je podeljen na ćelije koje definišemo pomoću <td> taga. U ćelije tabele možete smestiti bilo šta: tekst, slike, linkove, druge tabele itd.

Primer jedne tabele:

<table border="1">
<tr>
<td>Red 1, Ćelija 1</td>
<td>Red 1, Ćelija 2</td>
</tr>
<tr>
<td>Red 2, Ćelija 1</td>
<td>Red 2, Ćelija 2</td>
</tr>
</table>

Kao što vidite iz primera, za dodeljivanje granične linije tabeli koristimo atribut border, a vrednost debljine linije zadajemo u pikselima.

Rezultat je:




Za definisanje naslova u tabeli koristimo <th> tag. Na primer:

<table border="1">
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Zanimanje</th>
<th>Plata</th>
</tr>
<tr>
<td>Pera</td>
<td>Perić</td>
<td>Vozač</td>
<td>30000</td>
</tr>
</table>

Rezultat je:





Kao što možete videti iz primera, razlika između teksta koji se nalazi između tagova <th> i <td> je u tome što je tekst u prvom slučaju podebljan i centriran unutar ćelije, a u drugom tekst nije podebljan i poravnat je uz levu ivicu ćelije.

Za formatiranje tabela možete koristiti različite atribute umetanjem u odgovarajući tag.

Na primer za određivanje širine i visine koristićemo atribute height i width, čije vrednosti zadajemo u pikselima ili procentima. Na primer:

<table border="1" width="500px" height="60px">
<tr>
<th><font face="arial" size="3">Ime</font></th>
<th><font face="arial" size="3">Prezime</font></th>
<th><font face="arial" size="3">Zanimanje</font></th>
<th><font face="arial" size="3">Plata</font></th>
</tr>
<tr>
<td><font face="arial" size="3">Pera</font></td>
<td><font face="arial" size="3">Perić</font></td>
<td><font face="arial" size="3">Vozač</font></td>
<td><font face="arial" size="3">30000</font></td>
</tr>
</table>

Rezultat je:





Pomoću atributa cellpadding i cellspacing možemo podesiti razmak u ćeliji tabele između njene granične linije i sadržaja u njoj. Vrednosti ovog atributa se zadaju u pikselima, a podrazumevana vrednost je 1. Na primer:

<table border="1" cellpadding="5" cellspacing="5">
<tr>
<th>Ime</th>
<th>Prezime</th>
<th>Zanimanje</th>
<th>Plata</th>
</tr>
<tr>
<td>Pera</td>
<td>Perić</td>
<td>Vozač</td>
<td>30000</td>
</tr>
</table>

Rezultat je:




Atributima colspan i rowspan možemo ćeliju tabele podeliti na više redova ili učiniti da se pruža duž više kolona tabele. Ove atribute ubacujeme u <td> ili <th> tag one ćelije koju želimo da formatiramo, a vrednosti zadajemo brojem kolona ili redova kojom data ćelija treba da se prostire. Evo primera koji prikazuje upotrebu ova dva atributa:

<table border="1">
<tr>
<th>Kolona 1</th>
<th>Kolona 2</th>
<th>Kolona 3</th>
</tr>
<tr>
<td rowspan="2">Red 1 Ćelija 1</td>
<td>Red 1 Ćelija 2</td>
<td>Red 1 Ćelija 3</td>
</tr>
<tr>
<td>Red 2 Ćelija 2</td>
<td>Red 2 Ćelija 3</td>
</tr>
<tr>
<td colspan="3">Red 3 Ćelija 1</td>
</tr>
</table>

Rezultat je:





Svakoj ćeliji tabele možete dodeliti i različitu boju pozadine. Za tu namenu koristimo atribut bgcolor koji smeštamo u odgovarajući tag (<table>, <td>, ili <th>). Boju zadajemo heksadecimalnom vrednošću ili njenim imenom. Takože možemo promeniti i boju okvira tabele, za šta koristimo atribut bordercolor. Evo jednog primera koji predstavlja upotrebu ovih atributa:

<table border="2" bordercolor="green" bgcolor="gray">
<tr>
<th>Ime:</th>
<td>Pera Perić</td>
</tr>
<tr>
<th rowspan="2">Telefon:</th>
<td bgcolor="red">034/256-122</td>
</tr>
<tr>
<td bgcolor="green">063/888-999</td>
</tr>
</table>

Rezultat je:




Kao pozadinu tabele možete postaviti i sliku pomoću background atributa:

<table border="1" background="slika.gif">

U novijim verzijama HTML-a moguće je naslov tabele definisati izvan tabele upotrebom <caption> taga.

Primer:

<table border="1">
<caption>Naslov</caption>
<tr>
<td>Rov 1, Ćelija 1</td>
<td>Rov 1, Ćelija 2</td>
</tr>
</table>

Rezultat je:




Takođe, možete ubacivati jednu tabelu u drugu, i to ne samo tabelu već i sve druge HTML elemente:

Primer:

<table border="1">
<tr>
<td>
<table border="1">
<tr>
<th>Ime</th>
<th>Prezime</th>
</tr>
<tr>
<td>Pera</td>
<td>Perić</td>
</tr>
<tr>
<td>Marko</td>
<td>Marković</td>
</tr>
</table>
</td>
<td>
<ul>
<li>Ovo je druga ćelija</li>
<li>U kojoj ubacujemo listu</li>
</ul>
</td>
</tr>
</table>

Rezultat je:


[/box]
 

Odg: HTLM / Tutorijal
« Odgovor #5 poslato: 12 Septembar 2013, 01:11:41 »
 

Van mreže LEGIJA.007

  • Zahvalnice
  • -Zahvalio: 77
  • -Pohvaljen: 2678
  • Aktivan član
  • ******
  • 231
    Poruke
  • Ona lijepa a ja mlad :*
HTML - Linkovi

[box title=]Web stranice mogu sadržati linkove koji će vas odvesti direktno do neke druge stranice u okviru istog ili nekog sasvim drugog sajta na internetu. Ovi linkovi su poznatiji kao hiperlinkovi.

Hiperlink omogućava posetiocima kretanje između Web lokacija, tako što će kliknuti na neku reč, frazu, sliku itd. Hiperlink može predstavljati pokazivač na bilo koji resurs na Internetu: Web stranicu, sliku, muzički fajl, film itd.

Linkove u HTML-u definišemo pomoću anchor <a> taga. Ovaj tag ima i svoj završni tag [/url]. Sve što se nalazi između <a> i [/url] tagova predstavlja link.

Kreiranje linkova u HTML-u vršimo pomoću atributa href koji stavljamo u <a> tag. Evo pimera kako izgleda jedan link u nekom HTML dokumentu:

<html>
<head>
<title>Link ka drugoj stranici na internetu</title>
</head>
<body>
Google Srbija
</body>
</html>


Kao što vidimo iz primera, za kreiranje linkova do neke druge stranice na internetu u atributu href moramo definisati punu adresu do te internet stranice, dok između tagova <a> i [/url] možemo staviti bilo koji tekst.

Da kreirate link do stranice koja se nalazi na istoj Web prezentaciji, takođe trebate upotrebiti atribut href u kome navodite ime te HTML stranice. Na primer:

<html>
<head>
<title>Link do stranice u okviru iste Web prezentacije</title>
</head>
<body>
<a href="/www/domacitutoriali/liste.html"> Liste [/url]
</body>
</html>

Ako se fajl do koga vodi link nalazi u nekom drugom direktorijumu, onda kao vrednost u atributu href moramo navesti punu putanju do tog direktorijuma, npr. /Moj_Sajt/Stranice/Stranica1.html.

Takođe možete kreirati link koji vas vodi do nekog mesta u okviru iste stranice. To postižemo stavljanjem atributa name u <a> tag. Na primer:

<html>
<head>
<title>Link do određenog mesta na istoj stranici</title>
</head>
<body>
<p>
<a href="#N1">Idi na Naslov 1![/url]


<a href="#N2">Idi na Naslov 2![/url]


<a href="#N3">Idi na Naslov 3![/url]


<a href="#N4">Idi na Naslov 4![/url]


<a href="#N5">Idi na Naslov 5![/url]


<a href="#N6">Idi na Naslov 6![/url]


<a href="#N7">Idi na Naslov 7![/url]


<a href="#N8">Idi na Naslov 8![/url]


<a href="#N9">Idi na Naslov 9![/url]


<a href="#N10">Idi na Naslov 10![/url]
</p>
<h2><a name="N1">Naslov 1[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N2">Naslov 2[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N3">Naslov 3[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N4">Naslov 4[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N5">Naslov 5[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N6">Naslov 6[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N7">Naslov 7[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N8">Naslov 8[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N9">Naslov 9[/url]</h2>
<p>Neki tekst ovde...!</p>
<h2><a name="N10">Naslov 10[/url]</h2>
<p>Neki tekst ovde...!</p>
</body>
</html>

Ovakva vrsta linkova se naziva sidro.

Definisanjem određene vrednosti u atributu href možemo kreirati link za preuzimanje koji korisnicima omogućava da preuzmu neki fajl, npr. .pdf, .zip, .rar itd:

<html>
<head>
<title>Download Link</title>
</head>
<body>
Preuzmi Fajl
</body>
</html>


Pomoću atributa href možete definisati e-mail adresu preko koje vas posetioci vaše Web prezentacije mogu kontaktirati:

<html>
<head>
<title>Kontakt</title>
</head>
<body>
<a href="mailto: [email protected]"> KONTAKT [/url]
</body>
</html>
[/box]