Instrukcije IWA - · PDF fileOSNOVE HTML JEZIKA ... Obično su te skripte napisane skriptnim...
Transcript of Instrukcije IWA - · PDF fileOSNOVE HTML JEZIKA ... Obično su te skripte napisane skriptnim...
Instrukcije IWA https://www.facebook.com/InstrukcijeIwa
SVEUČILIŠTE U ZAGREBU
FAKULTET ORGANIZACIJE I INFORMATIKE
V A R A Ž D I N
Igor Mirković
HTML – OSNOVE I PRIMJERI TAGOVA
Varaždin, 2012.
Instrukcije IWA https://www.facebook.com/InstrukcijeIwa
Sadržaj
1. UVOD ................................................................................................................................................................. 1
1. OSNOVE HTML JEZIKA ............................................................................................................................... 2
2. STRUKTURA HTML DOKUMENTA ........................................................................................................... 4
2.1. META PODACI ............................................................................................................................................... 5 2.2. VEZA NA VANJSKI DOKUMENT...................................................................................................................... 6 2.3. SKRIPTE ........................................................................................................................................................ 7 2.4. GLAVNI HTML ELEMENTI ........................................................................................................................... 8
3. LISTE ................................................................................................................................................................. 9
4. TABLICE ......................................................................................................................................................... 10
5. SLIKE ............................................................................................................................................................... 12
6. POVEZNICE (LINKOVI) .............................................................................................................................. 13
7. OKVIRI ............................................................................................................................................................ 13
8. FORME ............................................................................................................................................................ 15
9. FORMATIRANJE .......................................................................................................................................... 18
10. SEKCIJE .......................................................................................................................................................... 19
11. ZAKLJUČAK .................................................................................................................................................. 20
LITERATURA .......................................................................................................................................................... 20
1
1. Uvod
„Hypertext Markup Language ili skraćeno HTML je jezik koji uz pomoć vrlo jednostavnih
naredbi opisuje grafički i tekstualni izgled dokumenta.“ [zpr.fer.hr, 2011.]
Nakon početne definicije HTML-a u prvom dijelu seminarskog rada ćemo se osvrnuti na
povijesni razvoj samog jezika te ćemo nastojati predstaviti sve bitne datume i događaje vezane
uz te datume koji su obilježili razvoj HTML-a.
U narednom poglavlju ćemo predstaviti samu strukturu HTML jezika, dakle meta podatke, veze
na vanjske dokumente, skripte te glavne HTML elemente nakon čega ćemo detaljno razraditi
različite primjere tagova.
Započet ćemo s listama, zatim s tagovima vezanim za tablice, za slike, poveznice, okvire,
moguće forme i načine formatiranja te ćemo se u posljednjem dijelu seminara osvrnuti na
sekcije.
2
1. Osnove HTML jezika
Prije predstavljanja HTML tagova, predstavit ćemo osnove HTML jezika.
„HTML jezik je jezik oznaka (predstavljaju strukturne, prezentacijske i semantičke informacije)
koji podržava SGML (Standard Generalized Markup Language), a sastoji se od hipertekst-
hipermedija osobina (tekst, slika, zvuk,film i dr. koji se mogu međusobno povezati čime se dobije
mreža/paučina informacija)“. [Kermek, 2011.]
Da bismo mogli koristiti HTML jezik moramo imati :
HTML dokument (Notepad ++ INSTALIRATI).
HTML preglednik (Imati neki preglednik :D )
Web poslužitelj (Wamp ili Xamp INSTALIRATI)
HTML dokument je tekstualna datoteka (ASCII i sl. formati) koju možemo kreirati sami
pomoću nekog od alata. Alati za izradu HTML stranica mogu biti skupi komercijalni softveri, ali
postoje i besplatne inačice. Jedan od najjednostavnijih alata za izradu HTML stranica je
Notepad++ u kojem se mogu izraditi i najsloženije stranice (Notepad ++ INSTALIRATI).
HTLM dokument se sastoji od podatka (sadržaj dokumenta) i oznaka HTML jezika koje ćemo
opisati u nastavku ovog rada.
HTML preglednici su standardni preglednici s kojima svakodnevno pregledavamo sadržaje na
internetu (Internet Explorer, Mozilla, Google chrome). To su programi koji poznaju sintaksu
HTML jezika i na temelju prepoznatih elemenata iz HTML dokumenta prikazuju na ekranu
njima pripadajuće objekte.
Web poslužitelj predstavlja poslužitelj na kojem će biti pohranjen naš HTML dokument te
preko kojeg korisnik može pristupati istom. (Wamp ili Xamp INSTALIRATI)
3
Element HTML jezika obično počinje s <element>, a završava s </element>. Upisom određenih
atributa na mjesto element iz primjera kreiraju se elementi internet stranice te se takva forma
naziva tag. Popis tagova dat ćemo u nastavku ovog rada.
U HTML-u kod nekih elemenata nije potrebna oznaka kraja jer oznake početka drugih elemenata
pretpostavljaju kraj prethodnih. XHTML je stroži te zahjetva oznaku kraja i poštivanje
redoslijeda otvaranja i zatvaranja po principu LIFO (Last in First out).
Sadržaj dokumenta možemo podijeliti na nekoliko vrsta:
prema vidljivosti u pregledniku:
o vidljivi (naslov, tekst i sl.)
o nevidljivi (meta upute, upute dizajna, dinamički dijelovi –programski kod i sl.)
vrste sadržaja dokumenta prema uključivanju:
o uključeni u dokumentu (naslov, tekst i sl.)
o sadržani u vanjskim datotekama/dokumentima (slike, upute dizajna, dinamički
dijelovi – programski kod i sl.)
vrste sadržaja dokumenta:
o tekst
o slika
o veza
o obrasci
4
Slika 1 Primjer Web stranice s pripadnim elementima1
2. Struktura HTML dokumenta
Svaki HTML dokument je određen svojom oznakom <html>...</html>.
Oznaka HTML dokumenta može sadržavati i dodatne atribute:
jezik lang= {en |en-US | fr | he |es | ja,…}
smjer prikaza teksta dir= LTR | RTL.
Primjer:
<html lang="en" dir="RTL">…</html>
Unutar oznaka <html>...</html> HTML dokument podijeljen je u 2 sekcije:
sekcija zaglavlja <head>...</head>
sekcija tijela <body>...</body>.
1 HTML jezik, Nastavni materijali iz kolegija Web dizajn i programiranje
5
Primjer:
<html>
<head>...</head>
<body>...</body>
</html>
Zaglavlje HTML dokumenta najviše ima ulogu kod pretraživaca (search engine) koji mogu
dobiti temeljne informacije o sadržaju dokumenta i dr.
Zaglavlje HTML dokumenta može sadržavati elemente:
naslov <title>
meta podaci <meta>
veza <link>
skripte <script>
stil <style>
2.1. Meta podaci
Meta podaci se najčešće koriste da bismo naveli važne podatke o stranici koji se neće prikazivati
na stranici. Glavna zadaća meta podataka je pružanje a relevantnih podataka tražilicam za lakše
indeksiranje te pružanje informacija o kodiranju, osvježavanju stranice i sl.
Meta podaci mogu biti za:
opis atributa (autor, kljucne rijeci, i sl) name=“…” content=“…”
direktive klijentu o sadržaju (obnavljanje, skup znakova) http-equiv=“…”
content=“…”
6
Primjer:
<html>
<head>
<title>ovo je primjer</title>
<meta name="author" content=“Igor i Maja">
<meta name="copyright" content="© Igor i Maja">
<meta name="date" content="2011-10-17 22:03:17">
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta http-equiv=“refresh" content=“5;url=http://www.foi.hr/">
<meta http-equiv="expires" content="fri, 25 oct 2022 23:59:59 gmt">
</head>
<body>...</body>
</html>
Današnja preporuka kodne stranica koja omogućuje prikaz hrvatskih znakova je:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Alternativna kodna stranica za hrvatske znakove:
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">
2.2. Veza na vanjski dokument
Vezom na vanjski dokument ostvaruje se njegovo uključivanje u način prikaza dokumenta.
Najčešće se uključuju vanjski dokumenti za stiliziranje (.css).
Primjer:
<link rel=“stylesheet" type=“text/css“ href=“format.css”>
Stilskim uputama određuju se način prikaza cijelog dokumenta i/ili nekog njegovog određenog
dijela sadržaja dokumenta. Svaki ispravan HTML dokument koji je napisan prema web
standardima trebao bi imati odvojenu sadržaj (strukturu) od prezentacije (stila). Ukoliko se želi
stvoriti ispravno kreiran dokument, prvo bi trebalo napisati HTML kod (naslovi, paragrafi, slike,
odjeljci, forme i sl...), a zatim se taj dokument treba povezati s CSS dokumentom u kojem su
definirani stilovi.
7
Postoji nekoliko bitnih razloga zašto je dobro odvajati strukturu od stila :
1. pregledniji dokument
2. jednostavnije, brže i sigurnije održavanje HTML i CSS dokumenta
3. jednostavnija prenamjena web dokumenta za različite tipove preglednika odnosno uređaja
(npr. handheld imobilni uređaji, audio preglednici, printeri, TV i sl.)
Iz tih razloga ćemo se u ovom radu baviti elementima kojima se opisuje sadržaj te nećemo
posebnu pozornost pridavati atributima koji definiraju određene stilske osobine elemenata. No,
vrijedno je spomenuti da se kroz HTML jezik preko dodavanja atributa mogu definirati i stilske
upute kao što su: pozadina (background=uri), boja pozadine (bgcolor=color), boja teksta
(text=color), boja veze (link=color), boja korištene veze (vlink=color), boja izabrane veze
(alink=color).
Primjer
<body bgcolor="#0000ff" text="#ffffff">...</body>
<body bgcolor=“blue” text=“white”>...</body>
2.3. Skripte
U zaglavlju dokumenta možemo definirati i različite skripte koje se izvršavaju na klijentskoj
strani. Obično su te skripte napisane skriptnim jezikom kao što je Java Script. Java Script skripte
možemo prepoznati po ekstenziji .js.
Tablica 1 Popis tagova za dodavanje skripti
Tagovi za
dodavanje skripti
Opis
<script> Definira skriptu na klijentskoj strani (client-side script) koja se uključuje u
dokument.
<noscript> Definira alternativni sadržaja ukoliko korisnik ne podržava skripte na
klijentskoj strani.
8
2.4. Glavni HTML elementi
Glavni HTML elementi u sekciji tijela su prikazani u tablici 2.
Tablica 2 Prikaz osnovnih tagova i njihov opis
Osnovne oznake (tagovi)
elemenata
Opis
<!DOCTYPE> Definira tip dokumenta.
<html> Definira početak HTML dokumenta.
<body> Definira tijelo dokumenta.
<h1> to <h6> Definira HTML naslove (headings).
<p> Definira paragraf (odjeljak).
<br /> Tag omogućuje prelazak u novi red (ekvivlanet new line).
<hr /> Definira horizontalnu liniju.
<!--...--> Tag koji omogućuje kometiranje koda stranice, tekst koji se
upisuje unutar taga <!--...--> neće biti prikazan na pregledniku
stranice tj. vidljiv na ekranu.
Uočavamo da je tag <!DOCTYPE> tag pomoću kojeg se definira tip dokumenta. Na taj način
govorimo računalu preko kojeg standarda je napisan HTML dokument. Postoji nekoliko tipova
dokumenta prema W3C koji imaju jasno definirana pravila. To su HTML 4.01 Strict, HTML
4.01 Transitional, HTML 4.01 Frameset, XHTML 1.0 Strict, XHTML 1.0 Transitional, XHTML
1.0 Frameset te XHTML 1.1.
Primjer:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html>
Pomoću navedenog primjera definirali smo da će se u nastavku dokumenta koristit XHTML 1.0
Stirct standard i pridržavati se svih pravila koji su određeni tim standardom. Pomoću tagova
<h1>, <h2>, <h3>,... , <h6> definiramo zaglavlja koja se razlikuju po veličini fonta.
9
U osnovne tagove spada i tag <p> koji služi za kreiranje paragrafa (odjeljaka) u tekstu. Ukoliko
želimo kreirati prekid reda ili prelazak u novi red koristimo tag <br>.
Razlog tome je što preglednici ne reagiraju na klasičan prelazak u novi red (tipkom enter)
definiranom u dokumentu. Da bismo kreirali horizontalnu liniju koristimo tag <hr> pomoću
kojeg nam se na ekranu prikazuje horizontalna linija.
3. Liste
Osim osnovnih tagova u HTML-u se vrlo često koriste i liste. Moguće je definirati tri tipa listi.
To su:
nesređena lista
sređena lista
definicijska lista
Obilježja i primjere sređene liste prikazat ćemo u tablici 5, dok ćemo obilježja i primjer
nesređene liste prikazati u tablici 4. U tablici 6 možemo uočiti primjer definicijske liste koja se u
praksi ne koristi toliko često.
Tablica 3 Prikaz tagova za kreiranje različitih tipova listi i njihov opis
Oznake za definiranje elemenata liste Opis
<ul> Definira neuređenu listu.
<ol> Definira uređenu listu.
<li> Definira stavke liste.
<dl> Definira definicijsku listu.
<dt> Definira pojam(stavku) definicijske liste.
<dd> Definira opis pojma u definicijskoj listi.
Tablica 4 Primjer nesređene liste
HTLM kod Rezultat
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Coffee
Tea
Milk
10
Tablica 5 Primjer sređene liste
HTML kod Rezultat
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol
1. Coffee
2. Tea
3. Milk
Tablica 6 Primjer definicijske liste
HTLM kod Rezultat
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
Coffee
- black hot drink
Milk
- white cold drink
4. Tablice
Da bismo prikazali određene rezultate vrlo često se koriste tablice. Stoga HTML jezik
omogućuje niz tagova za kreiranje tablica. Tablice mobu biti vrlo jednostavne, ali moguće je
korištenjem različitih tagova dobiti i vrlo lijepe i efektne tablice. U tablici 7 je naveden popis
svih tagova povezanih s kreiranjem tablica.
Tablica 7 Popis tagova povezanih s kreiranjem tablica
Oznake za definiranje
elemenata tablice
Opis
<table> Definira tablicu
<caption> Definira naslov tablice
<th> Definira red u zaglavlju tablice
<tr> Definira red u tablici
11
<td> Definira stupac u tablici
<thead> Grupira sadržaj zaglavlja
<tbody> Grupira sadržaj tijela tablice
<tfoot> Grupira sadržaj podnožja tablice
<col /> Definira vrijednosti atributa za jedan ili više stupaca u tablici
<colgroup> Definira grupu stupaca u tablici za formatiranje
Tagovi <thead>, <tbody>,<tfoot> služe za grupiranje dijelova tablice i korisni su u kombinaciji
za vizualno odjeljivanje pojedinih dijelova tablice kao što su zaglavlje, tijelo i podnožje.
Sličnu ulogu imaju i tagovi <col> i <colgrup> koji služe za grupiranje jednog ili više stupaca i na
taj način omogućuju različita stiliziranja unutar tablice.
Tablica 8 Primjer definiranja reda u tablici
HTLM kod Rezultat
<table border="1">
<caption>Naslov tablice</caption>
<tr>
<th> Prvi red </th>
<th> Drugi red </th>
</tr>
<tr>
<td> 1. </td>
<td> Jedan </td>
</tr>
<tr>
<td> 2. </td>
<td> Dva </td>
</tr>
</table>
Naslov tablice
Prvi red Drugi red
1. Jedan
2. Dva
12
5. Slike
Slike su neizostavan dio većine Internet stranica tako da moraju postojati odgovarajući tagovi.
Tagovi koji omogućavaju dodavanje slika na stranicu i kreiranje posebnih područja na mapi
omogućavaju tagovi navedeni u tablici 9.
Tablica 9 Tagovi koji omogućavaju dodavanje slika na stranicu
Oznake za definiranje slike Opis
<img /> Definira sliku
<map> Definira mapu slike
<area /> Definira područje unutar mape slike
Tablica 10 Primjer HTML koda koji prikazuje određenu sliku na ekranu
HTLM kod Rezultat
<img src="planets.gif" width="145" height="126" alt="Planets"
usemap="#planetmap" />
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm" />
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm" />
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm" />
</map>
HTML kod naveden u tablici 10 prikazuje na ekranu preglednika sliku planets.gif. Ukoliko
želimo prikazati samo sliku dovoljan nam je HTML kod <img src="planets.gif" alt="Planets" />
te će se slika prikazati u svojoj izvornoj veličini. No, u tablici 10 je naveden HTML kod koji
definira mapu na slici. Unutar mape su definirana tri područja unutar mape. Područjima su
određeni oblici i dane koordinate unutar slike. Korisniku se klikom na određeno područje
omogućuju različite radnje. U navedenom primjeru je omogućen prelazak na novi HTML
dokument (npr href="sun.htm").
13
x1,y1,x2,y2 Specifies the coordinates of the left, top, right, bottom corner of the rectangle
(shape="rect")
x,y,radius Specifies the coordinates of the circle center and the radius (shape="circle")
6. Poveznice (Linkovi)
Poveznice su vrlo važan dio svakog hipertekst medija. Kao što smo mogli uočiti poveznice ne
moraju biti samo u tekstu već mogu biti i na pojedenim slikama. Kako bi napravili poveznicu na
drugi dokument koristimo tag <a>. U tablici 11 možemo pronaći primjer taga <a> u obliku u
kojem se najčešće koristi.
Tablica 11 Primjer taga <a> u obliku koji se ne koristi
Htlm kod Rezultat
<a href="http://www.w3schools.com">Visit
W3Schools.com!</a>
Visit W3Schools.com!
Tag <a> ima naveden href=http://www.w3schools.com što znači da će korisnik klikom na tekst
koji se nalazi naveden između <a> i </a> biti preusmjeren na neki drugi dokument. U
navedenom primjeru korisnik će biti preusmjeren na stranicu http://www.w3schools.com.
7. Okviri
14
Okviri omogućavaju da se pojedini sadržaji prikazuju iz različitih HTML dokumenata. Pomoću
taga <frameset> definira se set prozora, tj. broj prozora, njihov razmještaj na ekranu i sl. Sadržaj
svakog okvira može biti pohranjen u različitim dokumentima te je to jedan od glavnih razloga za
korištenje okvira na HTML stranicama.
Tablica 12 Oznake za definiranje okvira
Oznake za definiranje
okvira
Opis
<frameset> Definira set prozora (okvira).
<frame /> Definira prozor (okvir) u setu okvira (engl. frameset).
<noframes> Definira alternativni sadržaj ukoliko za korisnike čiji preglednici ne
podržavaju više okvira.
<iframe> Definira okvir na istoj razini kao i stranica (tzv. stranica unutar
strance).
Možemo uočiti iz tablice 12 da je u HTML jeziku definiran i tag <noframes> koji prikazuje
određeni sadržaj ukoliko preglednik ne podržava okvire. Da bi preglednici podržavali okvire
trebali bi biti četvrte generacije (npr. verzije Internet Explorera veće od 6.0 ili Mozilla Firefox
verzije veće od 2.0).
Tablica 13 Primjer HTML koda i njegov rezultat na ekranu
HTLM kod Rezultat
<frameset cols="25%,50%,25%">
<frame src="frame_a.htm" />
<frame src="frame_b.htm" />
<frame src="frame_c.htm" />
<noframes>
Nažalost vaš preglednik ne podržava okvire.
</noframes>
</frameset>
HTML kod naveden u tablici 13 prikazuje primjenu okvira u praksi. Pomoću <frameset
cols="25%,50%,25%"> definirali smo set okvira. U dotičnom slučaju su to tri okvira čije su
15
dimenzije raspoređene u omjeru 25%,50%,25% što znači da prvi okvir zauzima 25% ekrana,
drugi okvir 50% ekrana te treći okvir 25% ekrana. Nakon toga je pomoću tagova <frame
src="frame_a.htm" />, <frame src="frame_c.htm" /> i <frame src="frame_c.htm" /> definirano
da se u prvom okviru prikazuje sadržaj iz dokumenta frame_a.htm, u drugom frame_b.htm, a u
trećem frame_a.htm. Možemo uočiti da će se u slučaju nemogućnosti prikaza okvira na ekran
ispisati poruka „Nažalost vaš preglednik ne podržava okvire.“
8. Forme
Svaki unos podataka od strane korisnika realizira se pomoću koncepta forme i pripadnih
elemenata forme. U tablici 14 su navedeni tagovi koji omogućavaju korisniku unos podataka, ili
odabir neke od ponuđenih opcija.
Tablica 14 Oznake za definiranje okvira
Oznake za
definiranje formi
Opis
<form> Definira HTLM formu za unos korisničkih podataka.
<input /> Tag omogućuje unos teksta.
<textarea> Tag omogućuje unos višelinijskog teksta.
<button> Tag kreira gumb (engl. push button).
<select> Definira padajući izbornik (engl. drop-down list) s mogućim izborima.
<optgroup> Definira grupu unutar padajućeg izbornika.
<option> Definira opciju u padajućem izborniku.
<label> Definira oznaku elementa za unos podataka.
<fieldset> Definira obrub oko elemenata forme.
<legend> Definira ime obruba oko elemenata forme.
Koncept forme u HTML-u služi za unos različitih podataka. Svaka forma obično ima gumb
(engl. button) za prihvaćanje unosa podataka kroz zadanu formu. Pritiskom da gumb za
prihvaćanje aktiviramo određenu akciju. Akcija se definira unutar taga <form> koji proširujemo
s određenom akcijom. Pod akcijom se najčešće smatra pozivanje druge skripte koja obrađuje
podatke unesene u formu kao što možemo uočiti u tablici 15 (skripta form_action.php).
16
Tablica 15 Prikaz forme
HTLM kod Rezultat
<form action="form_action.php" >
Ime: <input type="text" name="Ime" value="Joža" />
<input type="submit" value="Pošalji" />
</form>
Ime: Joža
Pošalji
Unutar forme možemo definirati različite opcije za unos podataka, primjerice za odabir iz
padajućeg izbornika te različite check liste kao što možemo uočiti iz tablice 16. Izbor opcija je
dosta velik te u praksi obično kombinirano većinu opcija navedenih u tablici 16 kako bismo
dobili željene podatke od korisnika.
Tablica 16 Primjeri različitih opcija
HTLM kod Rezultat
….
Ovdje se unose podaci
<input type="text" name="Unos_podataka_1" />
….
Ovdje se unose podaci
….
Područje za unos višelinijskog teksta
<textarea rows="5" cols="20">
Unesite tekst
</textarea>
….
Područje za unos višelinijskog teksta
….
Primjer padajućeg izbornika
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
Primjer padajuceg izbornika
17
</select>
….
….
Primjer padajućeg izbornika sa kategorijama
<select>
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
….
Primjer padajućeg izbornika sa
kategorijama
….
Izaberite spol:
<label for="male">Muški</label>
<input type="radio" name="sex" id="muski" />
<label for="female">Ženski</label>
<input type="radio" name="sex" id="zenski" />
….
Izaberite spol: Muški Ženski
….
<fieldset>
<legend>Osobni podaci:</legend>
Ime: <input type="text"/><br />
Email: <input type="text" size="30" /><br />
</fieldset>
….
18
9. Formatiranje
Ukoliko želimo dodati određene afekte na neki element možemo koristiti neki od tagova za
formatiranje. Popis svih tagova koji se mogu koristiti za formatiranje je stvarno velik. Popis
tagova naveden je i objašnjen u tablici 17.
Tablica 17 Popis tagova za formatiranje
Tagovi za
formatiranje
Opis
<acronym> Definira kraticu.
<address> Definira kontaktne informacije o autoru ili vlasniku dokumenta.
<b> Tag koji omogućuje kreiranje podebljanog teksta.
<bdo> Definira smjer teksta (s lijeva na desno ili s desno na lijevo).
<big> Definira povećani tekst.
<blockquote> Definira „dugi“ citat (engl. long quotation).
<cite> Definira citat.
<code> Definira tekst u obliku računalnog koda (Computer code).
<del> Definira precrtani tekst.
<dfn> Definira definicijski pojam.
<em> Definira istaknuti tekst.
<i> Tag koji omogućuje kreiranje ukošenog teksta.
<ins> Definira podvučeni tekst.
<pre> Definira tekst koji se ispisuje direktno kako je unesen u HTML
dokumentu. Pogodan za određene formule ili primjere programskog koda.
<q> Definira tekst pod navodnicima.
<small> Definira umanjeni tekst.
<strong> Definira „jaki“ (istaknuti) tekst (engl. strong text“).
<sub> Definira tekst u indeksu.
<sup> Definira tekst u eksponentu.
19
10. Sekcije
Unutar teksta možemo raditi određena grupiranja. Možemo definirati više različitih cjelina koja
će imati zajednička svojstva. To možemo učiniti pomoću tagova <div>, <span>. Oba taga služe
za definiranje sekcije unutar teksta s određenim osobinama. Postoje razlike između ta dva taga.
Tag <span> omogućuje definiranje više sekcija unutar jednog reda, dok tag <div > to ne
omogućuje. Tag <div > omogućuje samo kreiranje sekcija koje će se protezati minimalno kroz
jedan cijeli red.
Tablica 18 Primjer sekcija
Tagovi za definiranje sekcija Description
<div> Definira sekciju u dokumentu
<span> Definira sekciju u dokumentu
20
11. Zaključak
HTML je jezik koji se konstantno razvija te je neizostavan u kreiranju Internet stranica, tj.
kreiranju dokumenata na World Wide Web-u.
Dakle, radi se o jeziku koji omogućuje izradu web stranica. Jezik je sam po sebi jednostavan za
uporabu i dosta jednostavan za naučiti što je jedan od razloga njegove široke i opće prihvaćenosti
i popularnosti na IT tržištu. Osim toga je i besplatan što znači da je automatski dostupan svima.
Seminarskim radom smo htjeli prikazati i objasniti tagove koje se koriste u standardiziranom
HTML jeziku budući da su osnovni građevni elementi svake web stranice zapravo tagovi
(znakovi) koji imaju zadaću opisati kako će se nešto prikazati u web pregledniku kojeg korisnik
upotrebljava za pregled web sadržaja.
Sve HTML komande se pišu u tagovima pri čemu svaki tag predstavlja zapravo komandu koja
našem web pregledniku sugerira što i kako napraviti te na koji način prikazati sadržaj dotične
web stranice.
Primjer divova:
http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs
Literatura
1. Kermek D. (2011.) HTML jezik, Nastavni materijali iz kolegija Web dizajn i programiranje
2. zpr.fer.hr (2011.) Web design/HTML danas. Dostupno na:
http://web.zpr.fer.hr/ergonomija/2003/segulin/jez.html, učitano 27.10.2011.
3. w3.org (2011.) HTML 5. Dostupno na: http://www.w3.org/TR/html5/, učitano 27.10.2011.
4. w3.org (2011.) A history of HTML. Dostupno na:
http://www.w3.org/People/Raggett/book4/ch02.html, učitano 27.10.2011.
21
5. w3schools.com (2011.) W3C HTML Activities. Dostupno na:
http://www.w3schools.com/w3c/w3c_html.asp, učitano 27.10.2011.
Primjeri:
<!DOCTYPE html>
<html>
<body>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
</body>
</html>
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$100</td>
</tr>
<tr>
<td colspan="2">Sum: $180</td>
</tr>
</table>