Osnovne naredbe HTML-a

Obavezni elementi

 <html>…</html> deklaracija HTML dokumenta

<head>…</head> zaglavlje dokumenta

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″> potrebno zbog prikaza naših slova

<title>…</title> naziv dokumenta; naslov stranice (nalazi se na vrhu prozora)

<body>…</body> tijelo dokumenta

 

Kostur web stranice:

<html>

<head>

<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>

<title>Naslov</title>

</head>

<body>

Ovdje pišemo tekst, postavljamo slike i ostalo.

</body>

</html>

 

Naslovi

<h1> TEKST </h1>

<h2> TEKST </h2>

<h3> TEKST </h3>

<h4> TEKST </h4>

<h5> TEKST </h5>

<h6> TEKST </h6>

 

Font

<font face=”Arial”> Ovo je vrsta fonta </font>

<font size=”6″> Veličina slova može biti između 1 i 7 </font>

<font size=”+2″> Veličina slova </font>

<font color=”yellow”> Boja slova </font>

<font color=”#ffff00″> Boja slova </font>

 

Stilovi

<b> podebljano </b>

<i> ukošeno </i>

<u> podcrtano </u>

<br> novi red ista funkcija kao pritisak na enter u wordu (nema završetak)

<hr> horizontalna crta (nema završetak)

<p> novi odlomak</p>

 

Odlomci

<p align=”left”>lijevo</p>

<p align=”center”>sredina</p>

<p align=”right”>desno</p>

<p align=”justify”>obostrano</p>

 

Efekti

<marquee> tekst putuje s desna na lijevo</marquee>

<blink> tekst blinka </blink>

 

Numeričke i simboličke liste

<ol>…</ol> Numerička lista (brojevi)

<ul>…</ul> Simbolička lista (točkice)

<li>…</li> Redak liste

<ul type=”Neki simbol”> Simbol na početku retka

A – velika slova

a – mala slova

I – rimski brojevi

i – mali rimski brojevi

circle – kružić

disc – ispunjeni kružić

square – kvadratić

 

Boje

<body bgcolor=”#ff0000″> Boja pozadine je crvena.

<body bgcolor=”red”> Boja pozadine je crvena.

<body bgcolor=”#ff0000″ text=”#fffffff “>Boja pozadine je crvena, a tekst je bijeli. <font color=”#ff0000″> Ovdje upisujemo tekst </font>

<font color=”red”> Ovdje upisujemo tekst </font>

<body link=”blue” vlink=”#violet” alink=”red”> Boja linka je plava, posjećenog linka ljubičasta, a aktivnog linka crvena. U ovom primjeru link označava link, vlink označava posjećeni link, a alink aktivni link.

 

Slike

<img src=”slika.jpg”>

<img src=”slika.jpg” width=”150″ height=”200″> Slika u pixelima

<img src=”slika.jpg” width=”10%” height=”40%”> Slika u postotcima

<img src=”slike.jpg” width=”100″ height=”170″ border=”5″> Broj 5 je debljina obruba.

Širinu slike određuje Width atribut , a visinu Height.

Za poravnanje slike koristimo isti atribut kao i za tekst (Align) i sljedeća poravnanja:

left – poravnava sliku lijevo i tekst omata oko slike

right – poravnava sliku desno i tekst omata oko slike

center – poravnava sredinu slike sa dnom teksta

top – poravnava gornji rub slike sa vrhom teksta

middle – poravnava sredinu slike sa sredinom teksta

bottom – poravnava donji rub slike sa dnom teksta

vspace – vertikalni razmak

hspace – horizontalni razmak

<img src=”slika.gif” alt=”Moja slika” >

Ako slika.gif ne postoji na serveru tada će se na ekranu pojaviti sljedeća poruka: Moja slika

 

Tablice

Za izradu tablice koristimo <table> za početak i </table> za kraj.

<tr> red u tablici

<td> ćelija u tablici

<table border=”n”> debljina ruba tablice

<rowspan=”n”> spajanje ćelija nekog retka (n – koliko ćelija spajamo)

<colspan=”n”> spajanje ćelija nekog stupca (n – koliko ćelija spajamo)

<cellspacing> razmak između ćelija

<cellpading> udaljenost teksta (ili slike) unutar ćelije od ruba ćelije

<bgcolor> boja unutrašnjosti tablice, retka, ćelije (ovisi gdje je upišemo)

 

Linkovi

<a href= “povijest.html”> povijest </a>

Boju linka možemo i na ovaj način promijeniti:

<a href=”povijest.html”> <font color=”green”> povijest </font> </a>

Želimo li link bez podcrtavanja, onda je potrebno napisati sljedeće:

< a href=”povijest.html” style=”text-decoration:none ; ” >

Želimo li klikom na link otvoriti stranicu u novom prozoru potrebno je koristiti naredbu target.

<a href=”povijest.html” target=”_blank”>

Parametri naredbe target su sljedeći:

_blank učitava stranicu u novom prozoru preglednika

_self učitava stranicu u isti prozor ili okvir preglednika

_parent učitava stranicu u okvir prozora koji je više kategorije od okvira u kojem je link

_top otkazuje sve okvire i učitava stranicu u punom prozoru

 

Link unutar stranice:

<a name=”gore” id=”gore”>gore</a> Cilj određujemo bacanjem sidra (anchor):

Klikni <a href=”#gore”> ovdje </a> Ovako određujemo link.

 

Slika kao link:

<a href=”filmovi.html”><img src=”iceage.jpg”></a>

<a href=”povijest.html”><img src=”slika.jpg” width=”47″ height=”47″></a>

 

Link na neku drugu stranicu:

<a href=”http://www.google.hr/”> Google </a>

 

Link na e-mail:

<a href=”mailto:blabla@bj.t-com.hr “> kontakt </a>

 

Okviri

<frameset cols=50%,50%> Dimenzije okvira.

<frame src=”index.html” name=”linkovi”> <frameset rows=20%,80%> Dimenzije okvira.

<frame src=”prvi.html” name=”prvi”> Ovdje određujemo koja se stranica otvara u kojem okviru.

<frame src=”drugi.html” name=”drugi”> Ovdje određujemo koja se stranica otvara u kojem okviru.

</frameset>

</frameset>

 

Obrasci

Textbox – ovdje upisujemo tekst

Text – unos teksta

Checkbox – stavljamo kvačicu u kvadratić, moguć je višestruki izbor

Radio – dodajemo točkicu u kružić, moguć samo jedna izbor

Button – gumb (OK, Cancel)

Submit – potvrda unosa ( koristi se u kombinaciji sa textbox)

Dropdown – padajući izbornik

 

Textbox

<textarea rows=”10″ cols=”30″> Ovdje možemo upisivati tekst. </textarea>

 

Text

<form>

<br>Ime:<input type=”text” name=”ime”>

<br>Prezime:<input type=”text” name=”prezime”>

</form>

 

Checkbox

<form>

<h1>Volim jesti:<h1>

<br>jabuke<input type=”checkbox” name=”voce” value=”Jabuke”>

<br>kruške<input type=”checkbox” name=”voce” value=”Kruške”>

<br>marelice<input type=”checkbox” name=”voce” value=”Marelice”>

</font>

</form>

 

Radio

<form>

<br><input type=”radio” name=”spol” value=”muško”>Muško

<br><input type=”radio” name=”spol” value=”ženko”>Žensko

</form>

 

Button

<form action=””>

<input type=”button” value=”OK”>

</form>

 

Submit

<form>

Korisničko ime:<input type=”text” name=”korisnik”>

<input type=”submit” value=”pošalji”>

<input type=”reset” value=”obriši”>

</form>

 

Dropdown

<form action=””>

<select name=”boje”>

<option value=”plava”>plava</option>

<option value=”žuta”>žuta</option>

<option value=”zelena”>zelena</option>

<option value=”crvena”>crvena</option>

</select>

</form>