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>