Kako Napraviti HTML Stranicu

U ovom tutorialu ću vam objasniti neke osnove HTML-a i kako napraviti jednostavnu HTML stranicu. Objasniti ću vam neke osnovne  HTML tagove kao  HTML, BODY, TITLE, HEAD, TABLE,itd .

Napraviti ćemo stranicu koja izgleda kao na slici dolje :

 

html stranica moja

 

HTML kod za gore prikazanu stranicu je :

 

<html>
<head>
 
 <meta name="description" content="kratki opis ." /> 
 <meta name="keywords" content="ovdje dodajte kljucne rijeci" /> 
 <title>Moja stranica u HTML-u</title> 

 </head> 
<body>
<table width=”100%" cellpadding=”10">

<tr width="100%" valign="top"><h2>Naslov HTML Stranice</h2>

<hr>
</tr>
<tr>
<!– Navigation bar (Navigacija) ->
<td width="20%" valign="top">
<ul>
<li><a href="#">Pocetna</a></li>
<li><a href="#">O nama</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</td>
<!– Završetak navigacije ->
<!– sadrzaj ->
<td width="80%" valign="top">
<a href="http://www.google.com"><img border="0" src="http://www.google.com.np/intl/en_com/images/logo_plain.png"/></a><h3>
je najpopularnija trazilica na svijetu </h3>
<br/>
<a href="http://www.google.com">Klikni ovdje </a> da bi posjetio <Font color="green" size="2">Google.com</font>
</td>
<!– kraj sadrzaja ->
</tr>
</table>
<!– footer notes ->
<tr width="100%" valign="top"><p align="center">Copyright : kako-napraviti.com</p></tr>
<!– end of footer notes ->
</body>
</html>

 

HTML se sastoji od tagova i atributa. Svaki tag koji otvorimo moramo i zatvoriti . Unutar tagova se nalaze atributi koji opisuju te tagove. Tag obično predstavlja neki element kao npr. tablicu , dok atribut definira duljinu, širinu i sl. tablice . Svaki HTML dokument započinjemo tagom <html> i završava tagom </html>

 

<head> tag 

 

Unutar ovog taga se obično definiraju neki meta podatci , koji su bitni za tražilice kao npr. naslov <title> stranice i ključne riječi <meta name=”keywords” content=”ovdje dodajte kljucne rijeci” /> .


<body> tag 

Glavni dio stranice u kojem je definiran sadržaj .  Za naš primjer izradili smo tablicu  koja izgleda na sljedeći način :

 

tablica izgled

 

Tablicu smo napravili upotrebom taga <table> i određenih atributa. Kao što vidite na slici gore naša stranica se sastoji od 4 djela : Naslova, Navigacija, sadržaja i podnožja. U svaki dio tablice smo dodavali odgovarajući sadržaja . Unutar table taga nalaze se tagovi <tr> koji predstavlja redak , dok <td> predstavlja stupac.  <td> se  mora nalaziti unutra <tr> taga. Npr. kod :

<tr> <td> </td> <td> </td> </tr>

će napraviti tablicu od jednog retka i dva stupca.

 

U našem kodu prvi stupac je širine  width=”20%”  i predstavlja dio gdje će biti Navigacija, tj. poveznice na druge dijelove stranice. Tagovi <ul> i <li>  omogućuju izgled oblika natuknica  s točkom i lijepo raspoređuju poveznice. Za dodavanje poveznice koristimo kod <a href=”#”>Pocetna</a> , gdje je href atribut koji govori koja će se stranica  otvoriti klikom na poveznicu.

Sljedeći stupac širine  width=”80%”  predstavlja sadržaj stranice. Tu dodajemo tekst i sliku  koristeći tag  <img   sa atributima src koji pokazuje na direktorij gdje je slika smještena na poslužitelju.

 

Zadnji dio tablice koji je širine <tr width=”100%” predstavlja podnožje, tu se obično dodaje kratki tekst kao npr. Copyright i sl.

 

 

 

Odgovori