Osnovno
Uvod
HTML služi za izradu web stranica. Upravo zato jer je to jezik namijenjen za strukturiranje elemenata unutar stranice, te bilo koja stranica koja se nalazi na web-u ima makar samo par elemenata HTML-a. Dakle sastavni je dio svake web stranice, te je upravo zato i jako poznat.
Sintaksa
Jedan HTML element se sastoji od naziva elementa, oznake za početak, oznake za kraj, atributa i sadržaja.
Atributi
Atributi daju browser-u dodatne informacije, vezane uz pojedini element.
A elementi mogu imati više različitih atributa; svaki atribut sastoji se od imena i vrijednosti, vrijednost često zadaje korisnik.
Neki od najčešćih atributa:
ID - elementa služi za povezivanje s CSS-om i JavaScript-om,
Class - Klasa elementa, služi za povezivanje s CSS-om i JavaScript-om,
Name - Naziv elementa, služi za povezivanje s JavaScript-om,
Title - Naslov elementa, prikazuje taj naslov povlačenjem miša preko elementa,
Style - Stil elementa, služi za linijski CSS
Još jedan od najčešće korištenih atributa je href, a koristi se kod poveznica. Ta oznaka predstavlja hypertext reference, tj doslovni prijevod je hipertekstualna referenca, upućuje na neku lokaciju u direktoriju ili van njega.
Primjer je tekst koji na klik miša otvara novu web lokaciju u ovom slučaju www.w3schools.com
<a href="http://www.w3schools.com">Posjeti W3Schools</a>
Način korištenja
Svaki HTML dokument obavezno započinje naredbom <HTML> te isto tako završava s </HTML>. Unutar tih oznaka se nalaze ostale 2 grupe tj. odmah nakon nje slijedi <head> , te <body>. <head> se također naziva zaglavlje, a unutar tih oznaka se unosi naslov (<title>) dokumenta. Također je važan az povezivanje vanjskih datoteka, jer je dobra praksa u zaglavlju pozvati CSS ili JavaScript datoteke. <body> tj tijelo sadrži sve ostale informacije poput teksta slika i ostalih elemenata.
Elementi HTML stranice ne zahtijevaju razdvajanje nekim posebnim karakterom ili novim retkom. Svaki tag ima definiranu oznaku za svoj početak i kraj, pa je sasvim moguće da se datoteka koja definira sadržaj i izgled kompletne web stranice sastoji od jedne dugačke linije, bez ijednog karaktera razmaka.
Tekstni elementi
Heading
Naslovi razbijaju dokument u odjeljke te još:
· stvaraju organizacijsku strukturu
· poboljšavaju vizualni doživljaj stranice
· daju nam naznaku na koji su način grupirani djelovi sadržaja
U htmlu je moguće postaviti 6 posebnih razina dokumenta koji se određuju naslovima <h1> <h6>:
· <h1> je najviše istaknut naslov
· <h6> je najmanje istaknut naslov
<h1> naslov ima font najveće veličine koji se smanjunje na svakom sljedećem (h2, h3…), dok
h6 ima najmanji font.
Prvi nivo naslova
Drugi nivo naslova
Treći nivo naslova
Četvrti nivo naslova
Peti nivo naslova
Šesti nivo naslova
<h1>Prvi nivo naslova</h1>
<h2>Drugi nivo naslova</h2>
<h3>Treći nivo naslova</h3>
<h4>Četvrti nivo naslova</h4>
<h5>Peti nivo naslova</h5>
<h6>Šesti nivo naslova</h6>
Paragraf
Pisanje teksta u HTML-u slično je pisanju teksta u Wordu. Svaki napisani odlomak morate definirati početnim tagom <p> i završnim tagom </p>
Ako želite unutar odlomka prelomiti tekst koristite tag <br /> (break line). Ovaj tag nema svoj završni tag već je samostalan. Kada koristite tag <br />, on ne opisuje tekst zato i nema završni tag.
Ovo je paragraf.
Ovo je paragraf.
Ovo je paragraf.
<p>Ovo je paragraf.</p>
<p>Ovo je paragraf.</p>
<p>Ovo je paragraf.</p>
Paragrafi se poravnavaju sa lijevom stranom, ako drugačije niste definirali. Možete koristiti align atribut kako bi poravnali tekst po želji.
Link
HTML oznaka <a> definira link (poveznicu).
Link je riječ, grupa riječi ili slika koja nas klikom vode na novu lokaciju na istom i vanjskom dokumentu.
Najvažniji atribut kod oznake <a> je href atribut koji ukazuje na lokaciju link-a.
<a href="http://www.w3schools.com/">Link na W3Schools</a>
Komentari
Komentarima možete pisati bilo gdje unutar skripte a taj tekst neće biti prikazivan na stranici, tj. moći će se vidjeti samo kada pregledavate kod stranice. Na ovaj način možete ostavljati sebi poruke unutar skripte ili sa ovime možemo jedan dio skripte isključiti, a sačuvati kod tog dijela, kojeg možemo ponovno aktivirati ako izbrišemo sljedeće:
<! -- otvaranje komentara
--> zatvaranje komentara
Ovo je paragraf.
<!--Ovo je komentar. Komentari se ne prikazuju u pregledniku-->
<p>Ovo je paragraf.</a>
Horizontalna crta
<hr> oznaka označava odvajanje na html stranici, prikazuje se kao vodoravna crta.
HTML
HTML je jezik za strukturiranje elemenata.
CSS
CSS je jezik za uređivanje elemenata.
<h1>HTML</h1>
<p>HTML je jezik za strukturiranje elemenata.</p>
<hr>
<h2>CSS</h2>
<p>CSS je jezik za uređivanje elemenata.</p>
Formatiranje teksta
Unutar svakog elementa se mogu koristiti oznake kao što su:
<b>, </b> bold- podebljanje teksta,<i>, </i> italic- kosi tekst,
<u>, </u> underline- podvučena crta.
Na sljedećem primjeru ćete vidjeti i ostale naredbe za oblikovanje teksta:
Ovaj tekst je podebljan.
Ovaj tekst je prekrižen.
Ovaj tekst je nakošen.
Ovaj tekst je ispod a ovaj iznad.
Ovaj tekst je podvučen.
Ovaj tekst je istaknut.
<strong>Ovaj tekst je podebljan.</strong>
<del>Ovaj tekst je prekrižen.</del>
<em>Ovaj tekst je nakošen.</em>
Ovaj tekst je <sub> ispod </sub> a ovaj tekst je <sup> iznad</sup>.
<ins>Ovaj tekst je podvučen.</ins>
<mark>Ovaj tekst je istaknut.</mark>
Zaglavlje
Title
Tekst između početnog taga <title> i završnog taga </title>je naslov dokumenta. Tekst između ova dva taga će se prikazati u zaglavlju preglednika.
<title>Naslov dokumenta</title>
Base
Oznaka <base> označava osnovni cilj tj glavni URL koji se odnosi na relativne URL-ove u dokumentu.
Može biti najviše jedna oznaka <base> i unosi se obavezno unutar <head> oznake.
<base href="http://www.w3schools.com">
Link rel
Rel atribut određuje vezu između trenutnog dokumenta i dokumenta ili izvora na koji je povezan.
Najčešće se koristi za povezivanje vanjske CSS datoteke a to onda izgleda ovako :
<link rel="stylesheet" type="text/css" href="stil.css">
Stil
Oznaka <style> se koristi da bi se definirao stil unutar određenog dokumenta, točnije se unutar tagova <style> </style> unose CSS svojstva što u konačnici predstavlja unutarnji CSS.
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
Script
Oznaka <script> se koristi da bi se definiralo izvršavanje skripti unutar toga dokumenta, unutar tagova <script> </script> se deklariraju funkicije i varijable a predstavljaju unutarni JavaScript. Često se koristi za validaciju, manipulaciju slikama, te za ispis teksta unutar preglednika.
<script>
document.write("Hello World!")
</script>
Meta
Pojam meta podaci odnosi se na podatke o podacima. Na webu su to podaci koji opisuju web stranicu. Svaki komadić meta podataka u HTML-u definira se:
- <meta /> elementom
- „name“ i „contents“ atributima
Čest načim primjene je unos ključnih riječi, opisa web stranice te deklariranje znakovnog seta. Na nažem području je to UTF-8 koji sadrži hrvatske znakove.
<meta name="description" content="opis stranice">
<meta name="keywords" content="ključne riječi">
<meta charset="UTF-8">
Slike
Slike se koriste kako bi korisnicima prenijeli korisne informacije, za navigaciju stranice, te da bi poboljšali općeniti izgled stranice. Kada se slike pažljivo i ispravno koriste, one stranici daju vizualno bolji izgled, no ako se krivo koriste, mogu stranicu učiniti nečitljivom. Slike se mogu kreirati i spremiti u mnogo različitih formata, ali svega nekoliko njih je stvarno prikladno za slike koje namjeravamo staviti na Internet i koje su kompatibilne sa svim operacijskim sustavima i računalima:
Graphics Interchange Format (GIF) – gif slike manje su od slika ostalih formata, podržavaju samo do 256 boja i pogodne su za jednostavnije slike.Joint Photographic Experts Group (JPEG) – jpeg slike podržavaju 24 bitne boje i kompleksne slike, poput fotografija.
Portable Network Graphics (PNG) – najnoviji format razvijen da donese najbolje iz gif- i jpeg-a. PNG ima iste kompresijske mogućnosti kao i gif, ali podržava 24 bitne i 32 bitne boje.
Element za sliku je prazni element <img />.
Slika se "ubacuje" na sljedeći način:<img src="slika.jpg" /><img src="slika.jpg" alt="opis slike" width="320" height="250">Liste
Uređena
Liste služe organizaciji sličnih elemenata. Omogućavaju korisniku lakši pregled informacija.
U liste možemo staviti sve od teksta do slika.
Uređenu listu koristimo kada želimo pobrojati informaciju. Za kreiranje liste koristimo dvije vrste elemenata:
Kreiranje liste započinjemo tagom <ol> (ordered list) koji specificira da se radi o uređenoj listi.
Informacije pišemo unutar početnog <li> (list item) i završnog </li> taga. Na kraju sve zatvaramo završnim </ol> tagom.
Šoping lista
- Mlijeko
- Kruh
- Meso
<h2>Šoping lista</h2>
<ol>
<li>Mlijeko</li>
<li>Kruh</li>
<li>Meso</li>
</ol>
Neuređena
Neuređena lista sastoji se od jedne ili više stavki od kojih svaka počinje s nekom oznakom (najčešće točkom). Ovakav tip liste koristi se ako redoslijed po kojem su izlistane stavke nije nužan za razumijevanje informacija koje se prikazuju. Te je upravo ta stavka tj. prikaz rasporeda elemenata jedina razlika između uređene i neuređene liste.
Kao oznaka ispred elementa se može koristiti:
-točka,
-kružić,
-kvadratić.
Šoping lista
- Mlijeko
- Kruh
- Meso
<h2>Šoping lista</h2>
<ul type="disc">
<li>Mlijeko</li>
</ul>
<ul type="circle">
<li>Kruh</li>
</ul>
<ul type="square">
<li>Meso</li>
</ul>
Definicijska
Definicijska ili opisna lista se sastoji od izraza i njihovih opisa.
Oznaka <dl> označava opisnu listu. Unutar nje se nalaze <dt> (defines terms/names) i <dd> (describes each term/name).
Šoping lista
- Mlijeko
- - Najmanje 2 l
- Meso
- - Najmanje 2 kg
<h2>Šoping lista</h2>
<dl>
<dt>Mlijeko</dt>
<dd>- Najmanje 2 l</dd>
<dt>Meso</dt>
<dd>- Najmanje 2 kg</dd>
</dl>
Forma
Polja
Budući da forme koje se nalaze na web-u često traže unos imena, telefonskog broja čak i poruke, koriste se polja za unos radi lakše validacije. Unaprijed se može odrediti za što je predviđeno određeno polje. Tako naprimjer možete kod unosa zaporke "maskirati" unesene znakove.
<form>
Vaše ime<input type="text">
Vaše prezime<input type="text">
Zaporka<input type="password">
</form>
Kvačice
<input type="checkbox"> označava kvačicu. Omogućava odabir nijednog ili više ponuđenih pojmova, te daje mogućnost unaprijed označenog pojma naredbom "checked".
Šoping lista
<h2>Šoping lista</h2>
<form>
<input type="checkbox" name="artikl" value="mlijeko">Mlijeko
<input type="checkbox" name="artikl" value="kruh>Kruh
<input type="checkbox" name="artikl" checked value="meso>Meso
</form>
Kružići
<input type="radio"> označava kružić. Omogućava odabir samo jednog ponuđenog pojma. Važno je istaknuti imena tj atribut „name“ te zadati kružićima ista imena.
Šoping lista
<h2>Šoping lista</h2>
<form>
<input type="radio" name="artikl" value="mlijeko">Mlijeko
<input type="radio" name="artikl" value="kruh>Kruh
</form>
Padajuća lista
Oznaka <select> se koristi za kreiranje padajućeg liste. Unutar nje se nalazi oznaka <option> koja označava dostupne pojmove unutar liste.
Šoping lista
<h2>Šoping lista</h2>
<select>
<option value="">-Izaberite artikl-</option>
<option value="mlijeko">Mlijeko</option>
<option value="kruh">Kruh</option>
<option value="meso">Meso</option>
</select>
Gumbi
<button> označava gumb koji se može kliknuti. Koristi se za slanje ispunjenje forme, brisanje podataka, ili sličnih događaja .
A unutar njega se često nalazi tekst poput „pošalji“.
<button type="gumb">Klikni me!</button>
<button type="gumb" onclick="alert('Ovo je gumb s porukom')>Klikni me da vidiš poruku!</button>
Grupiranje
Blok
Većina HTML elemenata su definirani kao blok ili linijski elementi. Koristeći block vrijednost element se prikazuje kako je inače i predviđeno tj. širina se postavlja na širinu elementa koji je iznad njega. Elementi div, p, ul, ol, li i od h1 do h6 imaju predefinirane vrijednosti block. Ponašaju je kao da je postavljen prijelom retka prije i poslije elementa.
Linijsko
Koristeći linijsku (inline) vrijednost element zauzima mjesta samo onoliko koliko mu je potrebno tj. koliko je velik sadržaj elementa. Obično se nalaze unutar nekog „block“ elementa. Elementi span, a, img, em, strong imaju predefinirane vrijednosti inline. Ne rade prijelom retka prije i poslije elementa.
Tablice
Tablice služe kako bi podatke rasporedili u mrežu i učinili njihovu analizu jednostavnijom. U HTML-u one imaju ulogu kontrole rasporeda podataka na stranici. U tablice se može staviti tekst, slika, link...
Tablica ima 3 osnovne komponente:
- Tablica <table>,
- Red u tablici: <tr>, koji je uvijek unutar <table>,
- Ćelija tablice: <td>, koja je uvijek unutar <tr>.
Tag <table> i njegov kod nalaze se između <body> tagova u dokumentu. No također ih možemo koristiti između večine blok elemenata, te između <td> i <th> tagova za gnježđenje tablica.
| Red 1, ćelija 1 | Red 1, ćelija 2 |
| Red 2, ćelija 1 | Red 2, ćelija 2 |
<table>
<tr>
<td>Red 1, ćelija 1</td>
<td>Red 1, ćelija 2</td>
</tr>
<tr>
<td>Red 2, ćelija 1</td>
<td>Red 2, ćelija 2</td>
</tr>
</table>
| Red 1, ćelija 1 | Red 1, ćelija 2 | Red 1, ćelija 3 |
| Red 2, ćelija 1 | Red 2, ćelija 2 | Red 2, ćelija 3 |
| Red 3, ćelija 1 | ||
<table>
<tr>
<td>Red 1, ćelija 1</td>
<td>Red 1, ćelija 2</td>
<td>Red 1, ćelija 3</td>
</tr>
<tr>
<td>Red 2, ćelija 1</td>
<td>Red 2, ćelija 2</td>
<td rowspan="2">Red 2, ćelija 3</td>
</tr>
<tr>
<td colspan="2">Red 3, ćelija 1</td>
</tr>
</table>
Iframe
<iframe src="URL"></iframe>
<iframe src="http://www.webtech.com.hr" width="300" height="300"></iframe>
Posebni znakovi
Pod posebne znakove najčešće spadaju razni simboli, copyright znak, slova s prijeglasima itd.
A budući da preglednik ima funkciju prepoznavanja naredbi, onosom oznake < preglednik bi pomislio da započinje novi element. Te je tako razvijen sustav unosa posebnih znakova.
Svaki znak počinje sa (&) i završava sa (;).
Svaki entitet može biti napisan uz pomoć svog naziva ili broja: &naziv_znaka; ili
&#broj_znaka;
U tablici se nalaze neki od češće korištenih znakova.| Znak | Naziv znaka | Broj znaka |
| – | – | – |
| — | — | — |
| ¡ | ¡ | ¡ |
| ¿ | ¿ | ¿ |
| " | " | " |
| “ | “ | “ |
| ” | ” | ” |
| ' | ' | |
| ‘ | ‘ | ‘ |
| ’ | ’ | ’ |
| razmak | |   |
| & | & | & |
| ¢ | ¢ | ¢ |
| © | © | © |
| ÷ | ÷ | ÷ |
| > | > | > |
| < | < | < |
| µ | µ | µ |
| · | · | · |
| ¶ | ¶ | ¶ |
| ± | ± | ± |
| € | € | € |
| £ | £ | £ |
| ® | ® | ® |
| § | § | § |
| ™ | ™ | ™ |
| ¥ | ¥ | ¥ |
CSS
Pomoću CSS-a definiramo pravila u stilskom obrascu koji određuje kako želimo da sadržaj opisan određenim HTML kodom izgleda i povezujemo stilska pravila i HTML kod.
Korištenjem CSS obrasca možemo kontrolirati bilo koji dio segmenta na Internet stranici:
-Podešavanje pozadine (boja pozadine, slike na pozadini),
-Uređivanje margina,
-Kontrola veličine elemenata,
-Uređivanje tablica,
-Uređivanje teksta.
HTML omogućava povezivanje CSS-a na tri načina načina:
- unutar jednog HTML elementa, putem atributa "style", (linijski CSS),
- unutar <head> dijela među oznakama <style>, (unutarnji CSS),
- u posebnoj CSS datoteci, (vanjski CSS).
Također je moguće referencirati višestruke CSS dokumente unutar jednog HTML dokumenta.
Linijski način
Linijski stil se koristi ukoliko se za jedan element želi primjeniti posebno svojstvo koje neće utjecati na druge elemente.
Koristi se putem atributa style koji može sadržavati bilo koje CSS svojstvo.
<p style="color:green;font-size:20px;">Ovo je paragraf</p>
Unutarnji način
Koristi se ukoliko jedan cijeli dokument ima drugačiji stil od drugih dokumenata u istom direktoriju. Definira se unutar zaglavlja <head> , koristeći <style> oznaku.
<head>
<style type="text/css">
body {background-color:red;}
p {color:blue;}
</style>
</head>
Vanjski način
Najčešći način korištenja CSS-a, budući da se an taj način uštedi najviše vremena. Sav stil se odredi unutar vanjske CSS datoteke, te se ta ista poziva unutar zaglavlja putem <link> oznake.
<head>
<link rel="stylesheet" type="text/css" href="stil.css">
</head>