Osnove HTML-a

Sadržaj:

Uvod u WWW

World Wide Web, ili skraćeno Web danas je jedan od najpopularnijih servisa za širenje informacija. Pomoću web-a možemo prezentirati informacije koje se sastoje od riječi, slika, videa te audio zapisa. Sve se to ostvaruje bez dodatnog softvera koji korisnik mora instalirati na svoje računalo . Dovoljan je web preglednik (Internet Explorer, Firefox, Chrome, Opera itd.)

Pored toga što putem Web-a ljudi mogu primati informacije, mogu ih i kreirati pomoću vlastitih web stranica. Na taj način oni postaju izvor informacija za druge. Kreiranje Web stranica je veoma jednostavno ukoliko savladate nekoliko osnovnih HTML naredbi. U ovom kratkom priručniku prikazat ćemo osnovne HTML naredbe.

Za kreiranje web stranica mogu se koristiti razni HTML editori kao što su: Microsoft Visual Web Developer i FrontPage, Adobe Cold Fusion i Dreamweaver itd. U ovom priručniku baviti ćemo se HTML naredbama i pisanjem HTML koda bez upotrebe specijaliziranih editora. Za programiranje HTML stranica biti će vam potreban samo neki jednostavan editor teksta (Notepad ++ ili Sublime Text editor)

Što je HTML ?

HTML je skraćenica za Hyper Text Markup Language, što bi se moglo prevesti kao Jezik za označavanje hiperteksta. Hipertekst je tekst koji pored riječi sadrži i slike, video i audio zapise. HTML je podskup jednog šireg jezika, SGML-a (Standard General Markup Language) i koristi se za definiranje izgleda World Wide Web dokumenata (stranica) kao i za uspostavljanje veza (linkova) između dokumenata (podrazumijeva se da dokument sadrži tekst, sliku, zvuk itd.).

Što je URL (Uniform Resource Locator) ?

Kada vas netko želi uputiti kako pristupiti nekoj informaciji na Internetu, daje vam elektronsku adresu na kojoj se nalazi ta informacija. Ta elektronska adresa je zapravo URL. Svaki dokument na Internetu ima jedinstvenu adresu (URL). To nam omogućava jednostavan pristup web stranicama koja sadrže nama potrebne informacije.

Ukoliko znamo URL adresu, dovoljno je unijeti tu adresu u naš preglednik i za nekoliko trenutaka na našem ekranu će se prikazati željeni sadržaj.

Na primjer, ukoliko želite pristupiti web stranici koja sadrži ovaj priručnik trebate znati sljedeći URL:

<a href="#">http://info-lux.org/osnove-htmla</a>

Osnovne HTML naredbe

U ovom dijelu opisane su osnovne HTML naredbe te potrebni koraci za ispravan prikaz dokumenata na Web-u.

Osnovni koraci: upotreba tagova

HTML koristi tagove pomoću kojih ukazuje pregledniku kako ispravno prikazati sadržaj na ekranu. Tagovi se stavljaju unutar < > zagrada. U većini slučajeva, tagovi se postavljaju na početak nekog djela dokumenta, a na kraj tog djela dokumenta postavlja se tag završetka.

Na primjer za naslov dokumenta se koristi:

<title>Moj prvi HTML Dokument</title>

Uočite ova dva taga, <title> i </title> između kojih se nalazi tekst naslova dokumenta. Vidite da se tag završetka razlikuje od taga početka po kosoj crti (/).

HTML tagovi nisu osjetljivi na velika i mala slova ( URL je osjetljiv). U većini slučajeva (osim kod formatiranog teksta) HTML ignorira razmake i prazne linije. Međutim, preporuča se prilikom pisanja HTML koda stavljati uvlake i prazne linije radi lakšeg čitanja koda.

HTML Tag

<html > tag označava početak HTML koda.

<html > tag se obično postavlja na početak dokumenta, kao prva naredba za preglednike. Na kraju dokumenta postavlja se tag završetka </html >. Između ova dva taga nalaze se svi ostali tagovi kao i sam sadržaj dokumenta.

Head Tag

<head> tag je tag koji služi za početak jednog posebnog djela dokumenta koji se naziva zaglavlje dokumenta. Zaglavlje se neće prikazivati na ekranu. Ono služi da se unutar njega definiraju neke karakteristike dokumenta, kao što je naslov.

Zaglavlje se opisuje između tagova <head> i </head>

Sada možemo dati primjer dokumenta koji sadrži zaglavlje u kojem je definiran naziv dokumenta tagovima <title> i </title>:

<html>
<head>
<title>Moj prvi HTML dokument</title>
</head>

Title tag

title tag vam omogućava da definirate naziv vašeg dokumenta. To se postiže na sljedeći način:

<title >Moj prvi HTML dokument </title >

Naziv dokumenta, pošto se nalazi u zaglavlju, neće biti prikazan na ekranu, ali će se pojaviti  na raznim drugim mjestima (na vrhu prozora, u oznakama stranica i sl.)

Body tag

<body > i </body > tagovi definiraju početak i kraj sadržaja vašeg dokumenta. Sav tekst,  slike i poveznice na druge dokumente nalaziti će se unutar ovih tagova.

<body > se nalazi odmah nakon zaglavlja (head tagova). Tipična web stranica može izgledati ovako:

<html>
<head>
<title>My First HTML Document</title>
</head>
<body>
Ovdje se nalazi sadržaj vašeg dokumenta: tekst, slike, grafika itd.
</body>
</html>

h (Header) tagovi

h tag se koristi za izbor veličine slova koja će se koristiti za naslove i podnaslove u vašem dokumentu. Postoji šest različitih veličina od h1 do h6. Najveća slova se dobijaju tagom h1, a najmanja tagom h6. Sljede primjeri sa svih 6 nivoa.

<h1>Ovo je naslov s h1 tagom</h1>

Ovo je naslov s h1 tagom

<h2>Ovo je naslov s h2 tagom</h2>

Ovo je naslov s h2 tagom

<h3>Ovo je naslov s h3 tagom</h3>

Ovo je naslov s h3 tagom

<h4>Ovo je naslov s h4 tagom</h4>

Ovo je naslov s h4 tagom

<h5>Ovo je naslov s h5 tagom</h5>
Ovo je naslov s h5 tagom
<h6>Ovo je naslov s h6 tagom</h6>
Ovo je naslov s h6 tagom

Tagovima za naslove se ne postiže samo promjena veličine slova, već su naslovi i podebljani, a također se ispred i iza naslova dodaje po jedna prazna linija.

Odlomci

U HTML-u, odlomak se označava tagom <p> i postavlja se na kraj svakog odlomka “normalnog” teksta (pod normalnim se podrazumijeva tekst koji ne koristi neke druge tagove).

<p> ovaj tag uzrokuje postavljanje teksta u novu liniju uz dodavanje jedne prazne linije ispred
<br> ovaj tag je sličan prethodnom sa razlikom što se ne dodaje jedna prazna linija ispred

Prethodno oblikovan tekst

Tag <pre> se koristi kao oznaka kako bi vaš prethodno oblikovani tekst zadržao sva svojstva,
uvlake, prorede i sl. Drugim riječima biti će onakav kakvog ste i unijeli.

Na primjer:

<pre>ovo je 

               jedan primer 
               pre-formatizovanog 
        teksta</pre>

On će se na ekranu pojaviti u sljedećem obliku:

ovo je 

               jedan primer 
               pre-formatizovanog 
        teksta

Podebljano i kurziv

Posebnim tagovima možete označiti vaš tekst da bude u podebljanom i/ili kurziv obliku.Postoji i tag za podvlačenje teksta, ali se obično ne koristi jer se poveznice također prikazuju kao podvučene (o tome nešto kasnije).

Ne možete koristiti istovremeno oba taga (za podebljano i kurziv). Ako to učinite greškom, primijenit će se onaj kojeg se zadnjeg postavili.

Podebljano i kurziv se javljaju u dva oblika: fizičkom i logičkom. Možete koristiti oba prema vašim željama. Upotreba ovih tagova vidi se u sljedećim primjerima:

Fizički tagovi
Ovo je <b>Podebljano</b>
Ovo je Podebljano
Ovo je <i>Kurziv</i>
Ovo je Kurziv
Logički tagovi
Ovo je <strong>jako istaknuto</strong>
Ovo je jako istaknuto
Ovo je <em>istaknuto</em>
Ovo je istaknuto

Postoji mala razlika između fizičkog i logičkog taga. Kod fizičkog se mijenja samo oblik slova, a logički je zavisan od preglednika i može unijeti i druge promjene ( recimo promjenu boje slova ).

Liste

U HTML-u postoji jednostavan način za izradu lista s nabrajanjem, bez nabrajanja ili za definiranje. Moguće je i stavljati listu unutar liste i na taj način postići hijerarhijsko nabrajanje.

Kada koristite liste, prazna polja između “grafičkih oznaka” ili brojeva se automatski dodaju i mogu se razlikovati od preglednika do preglednika.

Liste bez rednih brojeva

Liste bez rednog broja počinju tagom <ul> iza koga sljede linije teksta koje se označavaju tagom <li>. Lista se završava tagom </ul>.

Primjer liste bez rednih brojeva:

<ul>
	<li>element 1</li>
	<li>element 2</li>
	<li>element 3</li>
</ul>

Ovako izgleda lista:

  • element 1
  • element 2
  • element 3

Liste sa rednim brojevima

Evo kako napravili gornju listu, ali sada sa rednim brojem ispred svake linije:

<ol>
	<li>element 1</li>
	<li>element 2</li>
	<li>element 3</li>
</ol>

Prikaz liste sa rednim brojevima:

  1. element 1
  2. element 2
  3. element 3

Liste za definiranje

Liste za definiranje vam omogućavaju da napravite strukturirane liste bez grafičkih oznaka i rednih brojeva. Evo primjera:

<dl>
	<dt>Ovo je jedan pojam</dt>
	<dd>Ovo je njegova definicija</dd>
	<dd>ovo je druga definicija</dd>
	<dt>Ovo je drugi pojam</dt>
	<dd>Ovo je njegova definicija</dd>
</dl>

Ova lista će izgledati ovako na ekranu:

Ovo je jedan pojam
    Ovo je njegova definicija
    ovo je druga definicija
Ovo je drugi pojam
    Ovo je njegova definicija

Ugniježđene liste (lista u listi)

Na kraju, evo jednog primjera koji pokazuje složenu listu, gdje se unutar jedne liste nalaze druge liste.

<ul>
	<li> razina iznad 1
		<ul>
			<li> razina ispod 1</li>
			<li> razina ispod 2</li>
		</ul>
	</li>
	<li> razina iznad 2
		<ul>
			<li> razina ispod 1</li>
			<li> razina ispod 2</li>
		</ul>
	</li>
	<li> razina iznad 3
		<ul>
			<li> razina ispod 1</li>
			<li> razina ispod 2</li>
		</ul>
	</li>
</ul>

Evo kako će to izgledati na ekranu::

  • razina iznad 1
    • razina ispod 1
    • razina ispod 2
  • razina iznad 2
    • razina ispod 1
    • razina ispod 2
  • razina iznad 3
    • razina ispod 1
    • razina ispod 2

Blockquote

Blok navod (blockquote) tag se koristi kako bi neki dio teksta izdvojili i prikazali kao navod koji će u odnosu na ostatak teksta biti i sa lijeve i sa desne strane dopunjen praznim znacima. To se postiže slijedećim tagovima:

<blockquote>Tekst koji se želi prikazati kao navod</blockquote>

Da ponovo istaknemo blok, navodu će se dodati lijeva i desna margina kako bi se razlikovao od ostatka teksta u dokumentu.

Centriranje

Možete centrirati (postaviti u centar ekrana) tekst, sliku i naslove pomoću tagova:

<center>Ova rečenica je centrirana</center>

što će na ekranu izgledati ovako:

Ova rečenica je centrirana

Horizontalna linija

Ako želite  razdvojiti dijelove vašeg dokumenta, to možete postići ubacivanjem horizontalne linije pomoću taga <hr>.

Prikaz horizontalne linije


Adresa

Tag <address> se obično postavlja na kraj dokumenta i najčešće se koristi za davanje kontakt informacija autora dokumenta. Sve što se stavi unutar ovog taga biti će prikazano u kurzivnom obliku.

Primjer korištenja address taga:

<address>
    Osnove HTML-a / Peter Griffin / peter.griffin@gmail.com 
</address>

Prikaz na ekranu:

Osnove HTML-a / Peter Griffin / peter.griffin@gmail.com

Komentari

Moguće je u HTML dokumente unijeti komentare koji se neće prikazivati na ekranu preglednika. To je najbolji način da se postave upozorenja i dodatne instrukcije za svako buduće ažuriranje vašeg dokumenta.

Komentari imaju sljedeći oblik:

<!-----Ovo je komentar koji se neće pojaviti u pregledniku----->

Komentar se može nalaziti i u više linija kao u sljedećem primjeru:

<!----Ovaj komentar se također neće vidjeti u preglednicima  
iako je postavljen u dvije linije--->

Precrtavanje teksta

Ako vam bude potrebno možete koristiti <strike> tag za precrtavanje djela teksta kao što je prikazano u sljedećem primjeru:

<strike>Ovaj tekst je precrtan</strike>

Na ekranu preglednika će to izgledati ovako:

Ovaj tekst je precrtan

HTML naredbe za povezivanje

Prava moć HTML dokumenata nalazi se u njihovoj sposobnosti da se povezuju sa drugim dokumentima, dijelovima teksta, slikama, video i audio zapisima. Veze (link) su najčešće podvučeni ili na neki drugi način  naglašeni djelovi teksta unutar dokumenta radi lakšeg raspoznavanja. Kada korisnik klikne na neku poveznicu automatski se otvara novi prozor sa prikazom dokumenta na koji je vezan.

Povezivanje na druge dokumente

Povezivanje na drugi dokument (drugi URL) postiže se na slijedeći način:

<a href="http://www.net.hr/">Vijesti</a>

Tekst koji se nalazi između <a> i </a> tagova (“Vijesti”) je tekst na koji korisnik treba kliknuti kako bi se otvorila nova URL adresa ( http://www.net.hr/ ).

Značenje pojedinih elemenata poveznice:

<a — označava početak poveznice
Href — označava “hipertekstualne reference”
http://www.net.hr — ovo je URL dokumenta na koji se povezujemo
Vijesti — tekst koji će se prikazati na ekranu
/a> — kraj poveznice

Dakle, sve što vam je potrebno za povezivanje dokumenata je URL adresa tog dokumenta.

Povezivanje na imenovanu vezu

Povezivanje unutar istog dokumenta

Kako bi se povezali na neki dio vašeg dokumenta, potrebno je najprije definirati mjesto za povezivanje (anchor – sidro), a zatim napraviti poveznicu do tog mjesta. Na primjer, ako želite da se sa vrha vašeg dokumenta povezuje na prvu rečenicu iz četvrtog odlomka, potrebno je tom odlomku dati neko ime. Na primjer “važno” i kreirati poveznicu na to ime.

Evo kako ovo možemo postići:

Najprije na početku četvrtog odlomka definiramo vezu (anchor, sidro):

<a name="važno">Prva rečenica iz četvrtog odlomka</a>

A nakon toga na vrh našeg dokumenta postavimo poveznicu

<a href="#važno">Poveznica na važnu napomenu</a>

Znak # koji se pojavljuje u poveznici zapravo pokazuje pregledniku da treba ostvariti vezu unutar istog dokumenta, a ne da se veže na drugu URL adresu (kao kod povezivanja sa drugim dokumentima).

Imenovane veze na druge dokumente

Mogu nastupiti situacije u kojima se želite povezati na neki drugi dokument, ali ne na njegov početak, već na određeni dio tog dokumenta. Za primjer, pretpostavimo da se vi iz vašeg dokumenta želite povezati sa odlomkom 2 iz jednog drugog dokumenta čija je URL adresa “drugiDokument.html”.

Kao prvo, potrebno je postaviti vezu (anchor, sidro) u dokument na koji se povezujete (drugiDokument.html). Da to učinite, idite na drugi odlomak tog dokumenta i napravite vezu, npr. ovako:

<a name="drugiodlomak">neki tekst</a>

Da bi kreirali poveznicu na ovu vezu u vašem prvom dokumentu, idite na mjesto u dokumentu s kojeg želite ostvariti vezu. Napravite poveznicu na slijedeći način:

<a href="drugiDokument.html#drugiodlomak">Važna napomena</a>

Korisnik će primijetiti da je tekst “Važna napomena” naglašen i da predstavlja poveznicu. Ako na njega kliknemo na ekranu će se prikazati drugi odlomak iz (drugiDokument.html).

Apsolutne i relativne adrese

Ako u vašoj ulici sretnete susjeda za kojeg do tada niste znali i koji vas upita gdje stanujete, vi mu vjerojatno nećete izdiktirati cijelu vašu adresu, već ćete mu reći primjerice “druga kuća odavde”. To se naziva relativnim adresiranjem, jer ste mu dali do znanja poziciju (adresu) vaše kuće u odnosu na mjesto na kojem se nalazite. Za razliku od toga, vaša puna poštanska adresa, je dovoljna da vas nađe bilo tko, s bilo koje pozicije. To je vaša apsolutna adresa.

Isti se koncept koristi i za adresiranje na Internetu pomoću URL adresa. Ako se dokumenti koje povezujemo nalaze u istoj mapi, nije potrebno upisivati cijelu adresu. Na primjer:

<a href="drugi_dokument.html">Idi na slijedeću stranu</a>

Ovo će vas povezati na drugi_dokument.html koji se nalazi u istoj mapi kao i dokument koji ga povezuje.

Možete se povezivati i na druge susjedne mape, kao u ovom primjeru:

<a href="../treći_dokument.html">Idi na treću stranu</a>

Ovo će vas povezati na dokument koji se nalazi u mapi za jednu razinu ispod trenutne mape.

Preporuča se korištenje relativnih adresa kad god je to moguće, iz razloga što to olakšava manipulaciju vašim stranicama.

HTML naredbe za slike (images)

Vjerojatno ste zapazili da većina stranica na Internetu uz tekst sadrže slike. To je iz razloga što se slikama mogu prenijeti mnoge informacije. Kako kaže kineska poslovica “Jedna slika vrijedi 1000 riječi”. Najčešće se koriste slike u .gif, png i .jpeg formatu, ali su mogući i drugi formati.

Napomena, ukoliko želite koristiti slike na vašim stranicama napravite ih sami ili koristite nezaštićene slike sa Interneta. Postoji na tisuće “public domain” (slobodnih za korištenje) na Internetu.

Dodavanje slika u dokument

Slike koje se pojavljuju u vašim dokumentima moraju imati kompletnu URL adresu (ili adresu mape gdje se nalaze). Za prikaz slike koriste se slijedeći tagovi:

<img src="putanja ili URL do slike">

Na primjer: <img src=”http://www.primjer.com/slika.jpg “>

Ovdje “img src” označava izvor slike sa URL adresom gdje se slika nalazi.

Ako se slika nalazi u istoj mapi gdje se nalazi i sam dokument, tada nije potrebno zadavati cijelu URL adresu, već samo ime datoteke koja sadrži sliku.

Na primjer ako imate sliku “mojaslika.gif” u istoj mapi s dokumentom dovoljno je da napišete:

 <img src="mojaslika.gif">

Pozicioniranje teksta i slike

Atributi za img tag

Tekst se može poravnati desno ili lijevo od slike. Atribut align=left postavlja tekst sa lijeve strane slike, a align=right postavlja tekst sa desne strane.

Na primjer: <img src=”http://www.primjer.com/slika.jpg “>

<img src="http://www.primjer.com/slika.jpg" align=left>
<img src="http://www.primjer.com/slika.jpg" align=right>

Ostavljanje praznina oko slike

Možete povećavati prazninu oko slike pomoću horizontalnih i vertikalnih margina koje zadajete u pikselima.

Na primjer, dodavanjem atributa hspace=20 dodat će se 20 piksela sa lijeve i desne strane slike. Atribut vspace= dodaje margine na vrh i na dno slike.

Primer:

<img src="http://www.primjer.com/slika.jpg" align=left hspace=20>

Postoje još neki atributi za slike, ali ovdje se njima nećemo baviti.

Alt tekst

Ukoliko se slika ne može prikazati (iz bilo kojeg razloga) moguće je umjesto nje prikazati alt tekst pomoću alt taga, kao u sljedećem primjeru:

<img align=middle alt="Slika 1 " src="http://www.primjer.com/slika.jpg">

Povezivanje sa slike

Možemo napraviti poveznice i sa teksta i sa slike. Kako bi slika postala poveznica dovoljno je postaviti sliku unutar tagova za povezivanje <a href=“poveznica“> </a>.

Na primer:

<a href="http://www.primjer.com/">
    <img src="http://www.primjer.com/slika.jpg">
</a>

Kao što vidite, <img src> tag je unutar <a href> </a> tagova.Ukoliko se slika koristi kao poveznica, oko slike će nastati jedan plavi okvir kojim se označava slika kao poveznica. Kada korisnik klikne na sliku povezati će se na drugi dokument, isto kao kada klikne na tekst koji je poveznica.

HTML Tablice

 

Tablice se kreiraju pomoću <table> taga. Tablice se dijele u retke (rows) pomoću taga <tr>, a svaki redak se sastoji od jednog ili više stupca (data cells) pomoću taga <td>. Stupci tablice mogu sadržavati tekst, sliku, listu, odlomak, formu, horizontalnu liniju, pa čak i novu tablicu (tablica unutar tablice).

Primjer tablice

<table border="1">
<tr>
	<td>redak 1, stupac 1</td>
	<td>redak 1, stupac 2</td>
</tr>
<tr>
	<td>redak 2, stupac 1</td>
	<td>redak 2, stupac 2</td>
</tr>
</table>

Prikaz tablice u pregledniku

redak 1, stupac 1 redak 1, stupac 2
redak 2, stupac 1 redak 2, stupac 2

Odgovori

Vaša adresa e-pošte neće biti objavljena. Nužna polja su označena s *

Možete koristiti ove HTML oznake i atribute: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>