HTML - Osnove | Development & Web design

MAND4

nap

3,1k postova

#1 06.12.2008.

#1 06.12.2008. u 20:51

Evo odlucih da i ja nesto korisno napisem . Pa pocnimo :
HTML

HyperText Markup Language) je veoma jednostavan i besplatan nacin da napravite svoj Web-sajt. I ako se na pocetku cini , HTML nije ni malo jednostavan. HTML dokumenti imaju .html ili .htm extenzijju. Pa pocnimo . Ovaj dokument mozemo praviti u notepadu . Prvo sto u svakom HTML dokumentu morate upisati je <html>(to znaci da pocinjete html dokument) a zavrsavate svoj dokument tagom </html>
Vecina html dokumenata sadrzi i tag <title>(to je npr. kad otvarate www.gamers.ba pa gore pise : Gamers.ba | najveca gamersa mreza na balkanu.)a to cete zatvoriti </title> tagom.
<body> Je sledeci tag kojeg cemo objasnit.
Koristi se za podesavanje dokumenta (boje , velicine , background,...) . Osnovne podkomande ovog taga su :
bgcolor="neka boja na eng" ( boja background-a)
background="tacna lokacija slike" (slika kao background)
text="boja" (boja slova mada ovo nemorate upisati jer se to objasnjava u <font> tagu)
Sada smo spremni da napravimo nas prvi web sajt .
Otvorite notepad i na osnovu stecenog znaja upisite sledece :
<html>
<title>Moj prvi web sajt</title>
<body bgcolor="red">Ovo je moj prvi web sajt</body>
</html>
Idite File-Save As i sacuvajte na desktop pod imenom web.html (nije bitno ime , bitna je extenzija).
Otvorite ga i pogledajte .
Rezultat bi trebo biti ovakav :

Nije nesto al dobro je za pocetak

.
Sada cemo malo da promjenimo font.
Tag za mjenjanje fonta je : <font>
Glavne podkomande taga <font> su :
<color="boja na eng"(boja slova)> , <size="broj od 1 do 7"(velicina slova)> , <font face="Ime neke vrste slova"(vrsta slova)> . To su osnovne podkomande ovog taga.
Sa stecenim znanjem otvorite notepad i upisite sledece :
<html>
<title>Moj 2 web sajt</title>
<body bgcolor="black">
<font face="Comic Sans MS" color="red" size="5">
Ovo je moja druga web stranica.
</font>
</body>
</html>
Rezultat bi trebao biti ovakav :

Sada cemo nauciti kako da nam je slika background.
Korisite bilo koju sliku sa vaseg racunara.
Tag za background sliku je :
<body background="ime vase slike">Ako zelite da imate sliku stavite je gdje je i vas html dokument , u protivnom navedite link slike.
HTML KOD :
<html>
<title>Moj 3 web sajt</title>
<body background="ime slike.jpg(ili koja je extenzija vec)">
<font size="7" color="green" face="Arial">
Moj 3 web sajt.
</font>
</body>
</html>

Rezultat izvrsenja :

Komanda za link.
Ako zelite postaviti neki link komanda je sledeca :
<a href="adresa linka">Link</a>
HTML KOD :
<html>
<title>Moj 4 web</title>
<body background="slika.jpg">
<font size="6" color="blue" face="Arial Black">
<a href="www.gamers.ba">gamers.ba</a>
Posjetite gamers.ba
</font>
</body>
</html>

Rezultat izvrsenja :

Tu je jos i mnogo komandi. Ovo su one osnovne komande HTML-a.
Neke od ostalih komandi su :
<center>(centrira text)</center>
<b>(bold)>/b>
<i>(italic)</i>
<u>(underline)</u>
<br>Novi red
<ul>(otvara listu)
<li>Prvi clan liste</li>
</ul>(zatvara listu)
<table>(kreira tabelu)

TABELA NAJČEŠĆE KORIŠĆENIH KARAKTERA
HTML
kod
Opis karaktera Primjer
© copyright symbol ©
® registered trademark
symbol
®
 trademark symbol ™
  nonbreaking space
< less-than symbol <
> greater-than symbol >
& ampersand &
" quotation mark "

<html>
<head>
<title>Primer upotrebe formi</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1250">
</head>
<body bgcolor="#FFFFFF" text="#000000">
<p><b>Primjer upotrebe formi </b></p>
<hr>
<div align="left"><b>Lične informacije:</b> </div>
<form name="info" method="post" action="">
<table width="600" border="0" cellspacing="1" cellpadding="1">
<tr>
<td>Ime:</td>
<td><input type="text" name="ime"></td>
<td>Prezime:</td>
<td><input type="text" name="prezime"></td>
</tr>
<tr>
<td>Ulica i broj:</td>
<td><input type="text" name="ulica" size="30"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Grad:</td>
<td><input type="text" name="grad" value="Sarajevo"></td>
<td>

ržava:</td>
<td>
<select name="drzava">
<option>Bosna i Hercegovina</option>
<option>Turska</option>
<option>Egipat</option>
<option>SAD</option>
<option>Tunis</option>
<option>Hrvatska</option>
</select>
</td>
</tr>
<tr>
<td>Poštanski broj:</td>
<td><input type="text" name="postBroj" size="5" maxlength="5"></td>
<td> </td>
<td>  </td>
</tr>
<tr>
<td rowspan="2">Pol:</td>
<td>Muški <input type="radio" name="pol" value="pol"> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td>Ženski <input type="radio" name="pol" value="pol" checked></td>
</tr>
<tr>
<td>Interesovanja:</td>
<td colspan="5">
<table width="100%" border="0" cellspacing="1" cellpadding="1">
<tr>
<td width="10%">Sport</td>
<td width="10%"><input type="checkbox" name="sport"
value="sport"></td>
<td width="10%">Muzika</td>
<td width="10%"><input type="checkbox" name="muzika" value="muzika"
checked></td>
<td width="10%">Putovanja</td>
<td width="10%"><input type="checkbox" name="putovanja"
value="putovanja"></td>

</tr>
</table>
</td>
</tr>
<tr>
<td>Lozinka:</td>
<td><input type="password" name="lozinka"></td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Komentar:</td>
<td><textarea cols="30" rows="5">Ovdje ispisati komentar</textarea></td>
<td><input type="hidden" name="skriveno" value="OVO JE SKRIVENO POLJE"></td>
<td> </td>
</tr>
<tr>
<td colspan="6">
<div align="center">
<input type="submit" name="potvrdi" value="POTVRDI">
<input type="reset" name="odustani" value="ODUSTANI">
</div>
</td>
</tr>
</table>
</form>
</body>
</html>

Upisite ovo i pogledajte

By me . Niodakle nisam c/p . Zadnji html kod sam ja napravio.
Hvala.
(ako nesto niste shvatilli imate PM ili guest book , nemojte ovdje spamat)

Evo za one malo bolje , koje ovo vec znaju objasnit cu <input> .
Ova komanda nam sluzi za one padajuce liste (kao kad ovdje kreiramo temu i biramo diskusija , link...) Sluzi nam kao u g.ba , pomocu komande input mozete napraviti stranicu kad kreirate temu .
Pa pocnimo :
<input type="sumbit" name="slanje>
Kada pravimo npr. neku poruku , pa kliknemo na posalji , to je to.
<input type="checkbox">
Ovaj tag sluzi kada popunjavamo neke opcije. Npr pitanje je :
Koje filmove volite ? i imate npr ponudjeno 10 odgovora i vi slektujete kvadrat koji vam se svidjaju .
text , file , password takodjer ulaze u <input> tag.
Dosta od mene