Koceljeva Forum


 
PrijemTražiRegistruj sePristupi

Delite
 

 HTML

Ići dole 
AutorPoruka
archer

archer

Muški Broj poruka : 297
Godina : 27
Lokacija : Kamenica
Datum upisa : 23.06.2007

HTML Empty
PočaljiNaslov: HTML   HTML Icon_minitimePon Jan 28, 2008 6:52 pm

===========================] HTML [============================
[>>by Archer<<]

Sadrzaj:

>>1 Uvod
>>2 Osnove i HTML tagovi
>>3 Uredjivanje teksta
>>4 Linkovi i slike u sajtu
>>5 Marquee
>>6 Tabele
>>7 Odvod

=============================] 1 [==============================

U proslom tutorialu sam rekao da je xss potrebno da znate html i
JavaScript, pa sam resio da napisem nesto html-u. Naravno i o html
mozete naci na netu, ali sam zeleo da dam doprinos internetu sa
ovim tutorialom. Ovaj tutorijal ce vam olaksati pocetke i u
daljem tekstu cu pokusati da vam objasni sve ono sto je mene mucilo.
Da neduzimo vise vec da predjemo na posao. Ovaj tutorial je
namenjen pocetnicima, ali nije greh ako procita i neki poznavalac.

=============================] 2 [===============================

HTML (Hyper Text Markup Language)je najjednostavniji programski
jezik. I bitno je da znate:
>>Html se pise u obliku tagova npr. <neki_tag>
>>svaki tag se mora zatroriti pomocu / npr. <neki_tag> </neki_tag>
>>Html mozete pisati u netepadu, i snimiti kao neko_ime.html ili
neko_ime.htm (potpuno je svejedno da li cete koristiti .html ili
.htm, pa se vi sad pitate kakva je razlika i zasto u opste postoje
oba. E pa zbog toga sto windows podrzava samo ekstenzije sa tri
znaka, ali danas postoje izuzetci kao: .html .jpeg ,...)
>>Html nije case sensitive (nerazlikuje mala o velikih slova)
>>Html mozete pisati u jednoj liniji ili vise kao u slidecem
primeru.
>>komentare u html dodajete ovako /*vas komentar*/ ili pomocu
// na sledeci nacin //vas komentar
>>Kod (source) html dokumenta mozete videti tako sto cete u vasem
navigatoru kliknuti desnim na slobodnu povrsinu i izabrati komandu
view page source (FF), view source (IE), source (O).
Da predjemo na posao. Evo jednog sourcea:

---------------------------seci ovde--------------------------
<html>
<head>
<title>
Vas prvi html dokument
</title>
</head>
<body>
Ovde pisete sve sto zelite da se vidi na vasoj strani
</body>
</html>
---------------------------seci ovde--------------------------

Da analiziramo ovaj source. Dakle vidite u prvoj liniji <html>,
ovaj tag oznacava pocetak html dokumenta. U zadnjoj liniji ima
</html> tag koji oznacava kraj html dokumenta. U drugom redu
vidite <head>, ovo oznacava pocetak heada (glave), svaki html
dokument treba da ima head i body. Sve sto napisete izmedju
<head> i </head> tagova izvrsava se odmah po pokretanju. Dok
se body (telo) izvrsava posle heada. U head postoji <title>
i </title> tag, sve sto napisete izmedju njih pisace u liniji
zaglavlja. I to je to. Ali kao sto mozete da primetite ovaj html
dokument izgleda "ofucano". Podesavanjem teksta bavi se sledece
poglavlje.

=============================] 3 [==============================

Dakle, interesuje vas kako se podesava tekst na html dokumentu.
Evo nekoliko primera (iz primera se najbolje uci):

---------------------------seci ovde--------------------------
<html>
<head>
<title>
Vas prvi html dokument
</title>
</head>
<body>
<font face="Comic Sans MS" color="green">
Ovde pisete sve sto zelite da se vidi na vasoj strani
<font>
</body>
</html>
---------------------------seci ovde--------------------------

Primetjujete da je ovaj source isti kao onaj gore samo se razlikuje
po <font> tagu. Znaci font tag vam omogucava podesavanje teksta,
u nasem slucaju smo namestili da face bude Comic Sans MS (uvek
koristite fontove koji postoje na svakom kompu), a boja zelena.
Ali ako zelite veci spektar boja onda koristite neki color mixer.
Evo nekih osnovnih boja:
Crna - Black - #000000
Zelena - green - #00B900
Plava - Blue - #0000FF
Zuta - yellow - #FFFF00
itd, itd,.. Ako nemate color mixer onda probajte sami da kombinujete
znakove od 0 do 9 i od A do F. Ako nekim slucajem zelite da boldirate
deo teksta onda to treba da izgleda ovako:
<b>neki tekst</b>
Naravno ovo je samo deo sourcea, koji treba da umetnete negde. Za veca
slova koristite tagove:
<h1>tekst</h1>
<h2>tekst</h2>
<h3>tekst</h3>
<h4>tekst</h4>
<h5>tekst</h5>
<h6>tekst</h6>
*Napomena: Najveca slova dobicete pomocu taga <h1>
Takodje je korisno da znate da koristite ovaj tag <br>, ovaj tag pravi
novi red (lomi red).

<html>
<head>
<title>
Vas prvi html dokument
</title>
</head>
<body>
<font face="Comic Sans MS" color="green">
bla,bla,bla,..
Ovde pisete sve sto zelite da se vidi na vasoj strani
<font>
</body>
</html>

Kada biste ovako napisali u vasem kodu, red nebi bio prelomljen.
Zato se koristi tag <br>, na sledeci nacin.

bla,bla,bla,bla,...<br>
Ovde pisete sve sto zelite da se vidi na vasoj strani

<br> tag netrazi zavrsni tak (</br>), sto je i logicno.
Za novi pasus mozete koristiti <p align="left">. Umesto left
mozete koristiti right (desno), center (centrirano).
Za pisanje nekih hemiskih formula bice vam korista tag <sub>.
On oznacava da tekst treba da bude u indeksu, H<sub>2</sub>O.
Tag <sup> ako zelite da tekst iznad ostalog, x<sup>2</sup>=4.
Toliko o uredjivanju teksta.

=============================] 4 [==============================

U htmlu se najcesce koriste jpeg i gif slike.
Slike se dodaju pomocu <img> taga. Ali neophodan je i src atribut,
on gobori gde se slika nalazi, i kako se zove. Ako se slika nalazi
u istom direktorijumu kao i html dokument onda treba napisati:
<img src="slika.jpeg">, a ako se slika nalazi u direktorijumu slike
koji se nalazi u direktorijumu gde je html dokument onda treba
napisati: <img src="slike\slika.jpeg">, ako se slika nalazi na nekom
sajtu onda treba da pise <img src="http:\\www.nekisajt.co.sr\slika.jpeg">.
Za promenu dimenzija koristite atribute width="broj_piksela" i
height="broj_piksela", ovi atributi se stavljaju u <img> tag.
Linkovi se dobijaja pamocu tga <a> na sledeci nacin
<a href="http:\\www.sajt.co.sr">kilikni ovde</a>. Link za download
je istog tipa:
<a href="http:\\www.sajt.co.sr\program.exe">Download</a>. Takodje
mozete podesiti font u linku:
<a href="http:\\www.sajt.co.sr"><h3><b>kilikni ovde</b></h3></a>.
Slike kao link se mogu namestit ne sledeci nacin:
<a href="http:\\www.sajt.co.sr"><img src="slike\slika.gif"></a>. Pomocu
atribita border="0" koji se stavlja u <img> tag, mozete skliniti okvir
oko slike.

=============================] 5 [==============================

Marquee je tag koji omogucava kotrljanje teksta preko sajta. On se
koristi na sledeci nacin:
<marquee>Vas tekst</marquee>, i dobicete tekst koji se kotrlja preko
vase strane. Za ulepsavanje mozete koristiti neki od sledecih atributa:
+---------------------+------------------------------------------------+
|width="50%" |Ogranicava prostor u kome ce tekst da se kotrlja|
+---------------------+------------------------------------------------+
|direction="right" |Pravac kretanja teksta, mozete napisati i left |
+---------------------+------------------------------------------------+
|behavior="alternate" |Tekst ce se kretati levo-desno |
+---------------------+------------------------------------------------+
|bgcolor="neka_boja" |Odredjuje boju pozadine preko koje tekst kliza |
+---------------------+------------------------------------------------+
Za efekat treptanja koristite <blink>vas tekst</blink>.

=============================] 6 [==============================

Sada se vi pitate zasto su table tako bitne, zato sto je pomucu
njih najlakse uredjivati tekst u kolone, redove, i ostale grupacije.
99% sajtova na internetu koristi tabele. Osnovni tag za tabele je
<table> sadrzaj tabele </table>. <tr> oznacava red, a <td> kolonu.
Svaka table mora da sadrzi <tr> tag. A on moze biti podeljen na
kolone:

<table border="1">
<tr>
<td>Prvi red, prva kolona</td>
<td>prvi red, druga kolona</td>
</tr>
</table>

Atribut border oznacava debljinu linija tablice, kada je 0 onda su
linije nevidljive. Ako zelite jos jedan red onda dodajte na prethodni
primer jos jedan <tr> tab.

<table border="1">
<tr>
<td rowspan="2">Jedan red </td>
<td>Prvi red</td>
</tr>
<tr>
<td>Drugi red </td>
</tr>
</table>

Ovde je nepoznat samo rowspan atribut, on oznacava koliko prvi red
treba da bude sirok. U nasem slucaju to je 2 reda.

<table border="1">
<tr>
<td colspan="2">Jedan red </td>
</tr>
<tr>
<td>prva kolona </td>
<td>druga kolona </td>
</tr>
</table>

Ovde colspan odredjuje sirinu prvog reda. U nasem slucaju to je 2 reda.
Cellpading atribut odredjuje razmak izmedju ivice celije i teksta, a
atribut cellspacing odredjuje razmak izmedju celija.

=============================] 7 [==============================

Mozda vam izgleda da je html tezak, ali nije tako, to cete uvideti
kada udjete u rutinu. Nadam se da ce vam ovo biti korisno, a sigurno
hoce jer svako novo znanje u zivotu je bitno, i bice vam potrebno
nekad. I za sam kraj zelim da dodam da se nadam da cemo poziveti
dovoljno dugo da docekamo jo ovakvih tutoriala. I da umalo da
zaboravim, kako se pise tutorijal ili tutorial?

==========================] PozZzzz [============================
Nazad na vrh Ići dole
 
HTML
Nazad na vrh 
Strana 1 od 1

Dozvole ovog foruma:Ne možete odgovarati na teme u ovom forumu
Koceljeva Forum :: Hi-tech :: Tutorijali-
Skoči na: