Popis osnovnih naredbi 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

<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>

Brojčane i simboličke liste

<ul>...</ul> Brojčane lista (točkice)
<ol>...</ol> Simboličke lista (brojevi)
<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
<colspan="n"> spajanje ćelija nekog stupca
<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>