[TUT] HTML Sa primerima

Započeo [BR]Maki187, Januar 21, 2013, 23:18:25 POSLE PODNE

prethodna tema - sledeća tema

0 članova i 2 gostiju pregledaju ovu temu.

Štampaj
Idi dole Stranice1 2
Korisničke akcije

[BR]Maki187

*

Januar 21, 2013, 23:18:25 POSLE PODNE

OVAJ TUTORIAL SAM NAPISAO U APRILU PROSLE GODINE, TE SE IZVINJAVAM AKO IMA GRESKI, URADIO SAM SAMO COPY/PASTE SA SAJTA NA KOM SAM NAPISAO (BU Forum i BSMF)

Ovako, ovo je moj prvi tutorial pisan u ovoj oblasti, nadam se da ce nekom pomoci :)
Odlucio sam da napisem ovo, posto ima onih koji me pitaju tako neke osnovne stvarcice...



HTML ili vam Hyper Text Markup Language je jako lak za ucenje, za pravljenje(kreiranje) bilo akkvog HTML fajla, mozete da koristite bilo koj tekst editor, da li ej to notepad, word ili nesto drugo, nije vazno...
Ja vam preporucujem da koristite Dreamweaver, on prakticno razne stvari moze da obavlja umesto vas, a trial verziju mozete skinuti ovde:

http://www.softpedia.com/get/Internet/WEB-Design/HTML-Editors/Macromedia-Dreamweaver.shtml

Pa da pocnemo... :)

HTML fajl (dokument) se sastoji iz: Teksta, i HTML tagova, verovatno se pitate cemu to sluzi, pa evo i objasnjenja za najcesce html tagove.

<html> - govori vasem browseru, da je to pocetak nekog html dokumenta
</html> - govori vasem browseru, da je to kraj nekog html dokumenta

<html> tag je uvek prvi, kad zapocinjete kreiranje nekog dokumenta, a posledni html tag je uvek </html>


<head> - ovo je pocetak zaglavlja, i uvek se nalazi posle <html> taga, a pre <body> taga
</head> - ovo je kraj zaglavlja, i nalazi se pre pocetka <body> taga.

<head> tag ili vam zaglavlje se neprikazuje u vasem browseru, u <head> tag ubacujete naslov dokumenta, vezu sa css-om itd.


<title> - oznacava pocetak naslova vaseg dokumenta
</title> - oznacava kraj naslova vaseg dokumenta

<title> tag koristite za ispisivanje naslova vaseg html dokumenta u web browseru, <title> tag se uvek nalazi izmedju <head> tagova.

Primer naslova:



Slicica koju vidite pored naslova Balkan Undergorund - Index, zove se favicon, o njoj ovde nece biti reci.



<body> - body tag oznacava pocetak "polja" u koj unosite tekst/slike koej ce biti vidljive u html dokumentu
</body> - oznacava kraj "polja" u koje unosite vidljive podatke

<body> tag se nalazi posle <head> taga, u njega mozete da unosite text, slike, tabele i ostalo, sve sto unesete u body tag, bice vidljivo u html dokumentu

A evo i prvog primera, za gore navedene tagove, "kod" ispod nemojte da kopirate, vec ga prekucajte, kako bi lakse naucili

Kod [Izaberi]

<html>
<head>
<title>Naslov stranice/dokumenta</title>
</head>

<body>
Ja se zovem Marko :)
</body>

</html>

Kad otkucate to, sacuvajte fajl kao index.html , i otvorite ga dvoklikom, naranvo primetili ste da sve sto vidite jeste text "Ja se zovem Marko :)"


Sad prelazimo na tagove koji se ubacuju unutar <body> taga, ispod mozete naci pojasnjenje za svaki od njih, al pre toga cu da vam pojasnim nesto drugo.

Svaki tag koj otvorite, morate i da zatvorite, otvoren tag je uvek npr
Kod [Izaberi]
<b> dok je zatvoren
Kod [Izaberi]
</b>  zatvoren tag uvek ima / crtu.

Ali postoji jedno pravilo kod zatvaranja tagova, a pokazacu vam na primerima

Pravilno zatvaranje tagova:

Kod [Izaberi]

<a>
<b>

</b>
</a>


Nepravilno zatvarane tagova:[/b]
Kod [Izaberi]

<a>
<b>

</a>
</b>


Nadam se da vam je sad jasno otvaranje/zatvaranje tagova, a sad cu svaki da vam pojasnim.

Kod [Izaberi]
<b> i <strong>  tagovi sluze za podebljanje teksta
<u>  sluzi za  podvucen  tekst
<i> sluzi za nakrivljen  tekst
<s> sluzi za  precrtan  tekst
<center> sluzi za centriranje teksta
<p> je paragraf, unutar njega mozete da pisete tekst

Sto se tice lista, tipa


  • Nesto
  • Nesto

koristi se sledece

Kod [Izaberi]
<ol>
<li>Nesto</li>
<li>Nesto</li>
</ol>

<ol> sluzi za pocetak liste, i lista kreirana sa <ol> tagom bi izgledala ovako
1. Nesto
2. Nesto

Kod <ol> liste, brojeve mozete promeniti u slova, a to ce te uraditi na sledeci nacin

Kod [Izaberi]
<ol type="a">
<li>Nesto</li>
</ol>

Time ce te dobiti listu tipa

a. Nesto
b. Nesto

Ukoliko zelite da kreirate listu sa kruzicima, koristi se <ul> tag

<ul> tag sluzi za pocetak liste sa kruzicima, ako nezelite kruzice, mozete koristiti kockice, njih dobijate na sledeci nacin

Krugovi:
Kod [Izaberi]
<ul>
<li> Nesto</li>
</ul>

Kockice:

Kod [Izaberi]

<ul type="square">
<li> NEsto</li>
</ul>


Inace <li> tag je sastavi deo liste, tj unutar njega upisujete tekst.




AKo zelite da kreirate neki LINK, to radite preko:

<a> taga

Evo primera:
Kod [Izaberi]
<a href="http://bu-rp.info">Neki Tekst/Slika</a>

ako zelite da se link otvara u novom prozoru, onda uradite sledece

Kod [Izaberi]
<a href="http://bu-rp.info" target="_blank">Neki Tekst/Slika</a>


Sto se tice stavljanja neke slike u html dokument, koristimo sledece:

Kod [Izaberi]
<img src="Link do slike" />



Da bi promenili boju pozadine tekst dokumenta, umesto <body> taga, pisemo


Kod [Izaberi]
<body style="background-color :#FF7F24">

time ste boju pozadine promenili u narandzastu, verovatn ose pitate ceu sluzi: #FF7F24

to je hex boje, ili vam kao neki "id" boje

Boje i njihove kodove mozete videti ovde, ili potrazite na google:

http://www.december.com/html/spec/colorhex.html


Ako nezelite da vam pozadina bude neka boja vec zelite sliku, onda to radimo tako sot zamenimo <body> tag, sa sledecim tagom

Kod [Izaberi]
<body background="http://www.linkdoslike.info/slika.png">

naravno ekstenzija slike nemora da bude .png, moze bilo koj format



Ono sto sam zaboravio navesti gore medju ostalim tagovima, jesu naslovi, njih kreirate na sledeci nacin:

Kod [Izaberi]


<h1>Ovo je naslov</h1>
<h2>Ovo je naslov</h2>
<h3>Ovo je naslov</h3>
<h4>Ovo je naslov</h4>
<h5>Ovo je naslov</h5>
<h6>Ovo je naslov</h6>


Od najveceg do najmanjeg...

E sad, sve sto smo naveli gore, iskoristicemo u "praksi", pa probajte sami da kreirate jedan html dokument, a ispod mozete videti kod, u kom ce biti upotrebljeno sve ovo

Ako zelite PREKUCAJTE sledeci kod, nemojte da ga kopirate
Kod [Izaberi]


<html>
<head>
<title>Naslov stranice/dokumenta</title>
</head>

<body>

<b> OVo je podebljan tekst </b>
<u> Ovo je podvucen tekst </u>
<i> ovo je nakrivljen tekst </i>
<s> Ovo je precrtan tekst</s>
<center> Ovo je centriran tekst</center>
<p> Obican tekst, mada nikad nisam znao konkretno cemu sluzi ovo :P</p>


<ol>
<li>Neka lista - brojevi ( ol tag)</li>
<li>Neka lista - brojevi (ol tag)</li>
</ol>

<ol type="a">
<li>Neka lista - slova (ol tag)</li>
</ol>

<ul>
<li> Neka lista - kruzici (ul tag)</li>
</ul>

<ul type="square">
<li>Neka lista - kockice (ul tag)</li>
</ul>

<a href="http://bu-rp.info">Neki obican link</a>

<a href="http://bu-rp.info" target="_blank">Link koj se otvara u novom tabu</a>

<img src="http://www.dodaj.rs/f/38/BK/37um9zFH/title.png" />


<h1>Ovo je naslov</h1>
<h2>Ovo je naslov</h2>
<h3>Ovo je naslov</h3>
<h4>Ovo je naslov</h4>
<h5>Ovo je naslov</h5>
<h6>Ovo je naslov</h6>
</body>

</html>



Da bi promenili pozadin uu neku sliku/boju upotrebite ono sto ste naucili u ovom tutorijalu

Naravno, ovo nisu svi html tagovi, ostale tagove istrazite sami... inace html bez css-a je skoro pa i beskorisan...

N1XTON

*

#1
Januar 21, 2013, 23:26:05 POSLE PODNE
fin tut pohvale
Pravim RP,DM,TDM,STUNT, Freeroam modove od 0 za pare, nacini placanja : Paypal ili banka

Streetboy

*

#2
Januar 22, 2013, 01:02:42 PRE PODNE
Univerzalan covek,za sve te je Bog dao :D

Tvoji tutorijali naprosto blistaju,steta sto ih vise ne pravis :(

#ov3rWhelming

*

#3
Januar 22, 2013, 08:01:44 PRE PODNE
Lijep TuT

 
Slobodan maper.Mapam u HITNOM slučaju :)

[BR]Maki187

*

#4
Januar 22, 2013, 16:41:43 POSLE PODNE
Citat: STREETBOY poslato Januar 22, 2013, 01:02:42 PRE PODNE
Univerzalan covek,za sve te je Bog dao :D

Tvoji tutorijali naprosto blistaju,steta sto ih vise ne pravis :(

hahaha, hvala, dzabe sto sam multi praktik kad nemam normalan zivot :( :D :D
Poslednja Izmena: Januar 22, 2013, 16:42:55 POSLE PODNE od [BR]Maki187

Streetboy

*

#5
Januar 22, 2013, 17:24:07 POSLE PODNE
[quote author=
Maki187 link=topic=66190.msg462984#msg462984 date=1358869303]
Citat: STREETBOY poslato Januar 22, 2013, 01:02:42 PRE PODNE
Univerzalan covek,za sve te je Bog dao :D

Tvoji tutorijali naprosto blistaju,steta sto ih vise ne pravis :(

hahaha, hvala, dzabe sto sam multi praktik kad nemam normalan zivot :( :D :D
[/quote]

Uspjeces ti u zivotu prije ikog,samo ces vidjeti ;)

SpawneR.

*

#6
Januar 22, 2013, 17:27:52 POSLE PODNE
[quote author=
Maki187 link=topic=66190.msg462984#msg462984 date=1358869303]
Citat: STREETBOY poslato Januar 22, 2013, 01:02:42 PRE PODNE
Univerzalan covek,za sve te je Bog dao :D

Tvoji tutorijali naprosto blistaju,steta sto ih vise ne pravis :(

hahaha, hvala, dzabe sto sam multi praktik kad nemam normalan zivot :( :D :D
[/quote]

Cekaj cim zavrsim srednju dolazim u BG pa da vidis kad te okrenem  :D

[CH] Marco Ottaviano

*

#7
Januar 23, 2013, 19:30:10 POSLE PODNE
Odlicno no ti html tagovi su malo komplicirani valjalo bi raditi u CSS ali ok to je za pocetnike :D

Speedy

*

#8
Januar 30, 2013, 20:01:59 POSLE PODNE
Nije li ono gore warez?
lijep tut..

Kera

*

#9
Januar 30, 2013, 22:43:22 POSLE PODNE
Dobar tutorijal, mogao si samo još malo doraditi i dodati još neke tagove poput <div> <span> i sl. Još malo detaljnije, jer ovo su grube osnove.

ΣLIƬΣ

*

#11
Februar 18, 2013, 18:10:58 POSLE PODNE
Odličan tutorial za početnike, ide sticky!

Speedy

*

#12
April 06, 2013, 23:53:18 POSLE PODNE
Kad smo kod HTMLa, za one koji nisu nikad radili sa HTMLom, najbolje im je da počnu učit u Microsoft FrontPageu, pa onda ako si naučio sve kod FrotPagea, predjes na Adobe Dreamweaver
Poslednja Izmena: April 06, 2013, 23:53:44 POSLE PODNE od Speedy

Dude

*

#13
April 07, 2013, 12:48:21 POSLE PODNE
Citat: Speedy poslato April 06, 2013, 23:53:18 POSLE PODNE
Kad smo kod HTMLa, za one koji nisu nikad radili sa HTMLom, najbolje im je da počnu učit u Microsoft FrontPageu, pa onda ako si naučio sve kod FrotPagea, predjes na Adobe Dreamweaver

glupost, neces nikad nauciti sintaksu tako...

Speedy

*

#14
April 29, 2013, 14:04:03 POSLE PODNE
Citat: Dude poslato April 07, 2013, 12:48:21 POSLE PODNE
Citat: Speedy poslato April 06, 2013, 23:53:18 POSLE PODNE
Kad smo kod HTMLa, za one koji nisu nikad radili sa HTMLom, najbolje im je da počnu učit u Microsoft FrontPageu, pa onda ako si naučio sve kod FrotPagea, predjes na Adobe Dreamweaver

[cenzura]ost, neces nikad nauciti sintaksu tako...

jest glupost, ali za onoga koji nikad nije radio sa HTMLom, može mu doći kao mali priručnik, osnove i to..
Štampaj
Idi gore Stranice1 2
Korisničke akcije