2. Sadržaj
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
Upoznavanje s HTML jezikom
Uređivači HTML jezika
Elementi HTML jezika
Osnovne oznake HTML jezika
Atributi elemenata HTML jezika
Oblikovanje teksta u HTML jeziku
Poveznice u HTML jeziku
Zaglavlje HTML dokumenta
CSS u HTML jeziku
Slike u HTML jeziku
Tablice u HTML jeziku
Popisi u HTML jeziku
Organiziranje rasporeda web stranica pomoću HTML-a
Unos podataka od strane korisnika pomoću HTML obrazaca
Prikaz jedne web stranice u drugoj pomoću Iframe-a
Uporaba boja u HTML jeziku
Korištenje znakova rezerviranih za HTML jezik
Ugrađivanje YouTube videozapisa pomoću HTML jezika
XHTML
3. Upoznavanje s HTML jezikom
Uređivači HTML jezika
1.
2.
Svaki put kada uđete u svijet Interneta i svojim preglednikom prosurfate po nekoliko web
stranica, niste ni svjesni da je vaš preglednik pročitao tisuće linija koda. Taj kod i jezik
ima posebna pravila koja svaki web preglednik na vašem pametnom telefonu, tabletu i
računalu mora razumjeti da bi se taj program zvao web preglednikom.
Isto tako, osoba koja želi napraviti profesionalnu web stranicu baš onako kako želi, a
da za njenu izradu ne plati nijednog web dizajnera i da ne koristi neki internetski servis
za izradu prema nekim od njihovih predložaka, mora poznavati jezik kojim komunicira
Internet – HTML jezik.
HTML jezik (engl. Hyper Text Markup Language) je jezik koji se sastoji od skupa oznaka
koje pokazuju kako bi web preglednik trebao prikazati podatke.
Prije svega, morate shvatiti zašto je HTML samo pokazni jezik, a ne programski jezik.
Da bi neki jezik bio programski, taj jezik morao bi imati mogućnost izvršavanja različitih
operacija, naredbi i zadataka, poput Java programskog jezika ili C/C#/C++. S HTML-
om je nemoguće izvršiti čak i najjednostavniju naredbu, što znači da s njim ne možemo
napraviti program, ali zato s njim možemo napraviti web stranicu jer je on standardni
pokazni jezik za web stranice u cijelom svijetu.
HTML jezik može se uređivati i otvarati u velikom broju programa. Primjerice, svoju
web stranicu možete napisati u programu poput Bloka za pisanje kojeg možemo naći
u operativnom sustavu Windows, ali i u web pregledniku poput Firefoxa organizacije
Mozilla, ili možda pomoću online uređivača poput aplikacije Mozilla Webmaker. Ipak,
za izradu profesionalne stranice najbolje je koristiti programe koji su namijenjeni upravo
izradi takvih stranica. U ovom slučaju kroz sve vježbe mi ćemo koristiti Adobe Muse CC
i Adobe Edge Code CC – dva profesionalna i ažurna programa koji su namijenjeni izradi
web stranica.
Adobe Dreamweaver dugo je godina na vrhu ljestvice najpopularnijih i najboljih programa
za uređivanje i izradu HTML i CSS stranica. Kroz verzije i nadogradnje ovaj program
predstavlja idealno okružje za izradu svakog elementa web stranice baš onako kako mi
želimo. Pošto je program vrlo napredan, mi ga nećemo koristiti u ovim vježbama.
Adobe
Dreamweaver CC
Adobe Muse
CC
Adobe Edge Code
CC
4. Adobe Edge Code CC je relativno novija aplikacija tvrtke Adobe (prva verzija izašla je u 2011.), a
temelji se na besplatnom HTML uređivaču Brackets. Projekt Brackets je pokrenula tvrtka Adobe
u želji da naprave jednostavan i moćan HTML uređivač, s mnogo funkcija, malom potrošnjom
resursa i vrlo jedonstavnim sučeljem. Odlikuje ga funkcija izravnog pregleda napisane web
stranice u pregledniku Chrome tvrtke Google. Njegove naprednije funkcije ćemo upoznati u
budućim lekcijama, a s osnovnim ćemo početi već u prvim satima.
Adobe Muse je relativno nov Adobeov program koji ćemo upoznati poslije učenja osnova
HTML-a. Njega možemo koristiti za izradu web stranica na lak način. Poznavanje HTML-a nije
potrebno. Koristiti ćemo ga u lekcijama u kojima se budemo više bavili dizajnom web stranice, a
manje HTML jezikom.
Prozor programa Adobe Muse CC
Prozor programa Adobe Edge Code CC
5. Elementi HTML jezika
Osnovne oznake HTML jezika
3.
4.
HTML jezik za označavanje koristi oznake. Oznake sadrže naziv elementa između
znakova manje od (<) i više od (>). Dijele se na početne i završne oznake. Početne oznake
su oznake koje predstavljaju početak, a završne oznake kraj, samo što one u sebi prije
naziva elementa imaju kosu crtu (/) koja govori da se radi o završnoj oznaci. Oznaka nisu
osjetljive na veličinu slova, ali W3C (World Wide Web Consortium) preporuča uporabu
malih slova u oznakama u HTML4 i novijim verzijama, a u XHTML jeziku je obavezna
upotreba malih slova u oznakama.
Prva jednostavna oznaka HTML jezika s kojom ćemo se bolje upoznati je <h>. Naziv
ove oznake skraćenica je od engleske riječi za naslov (engl. Heading), a služe upravo za
označavanje naslova na web stranicama. Postoji šest različitih vrsta naslova (od <h1> do
<h6>).
U gornjem primjeru možemo vidjeti oznake za paragraf, a između tekst koji će se prikazati
u tom paragrafu.
Gornji primjer je i primjer HTML elementa. Element je sve od početne do završne
oznake. Sastoji se od početne oznake, sadržaja elementa i završne oznake. Sadržaj
elementa može biti prazan, ali onda se element zatvara u početnoj zagradi. Elementu se
mogu dodavati atributi, o kojima ćemo govoriti u posebnoj lekciji. HTML elementi mogu
sadržavati i druge HTML elemente u sebi.
Drugi primjer ima tri HTML elementa.
PRIMJER 1
<p> Ovo je kratki tekst ... </p>
PRIMJER 2
<!DOCTYPE html>
<html>
<body>
<p>Neki kratki tekst . . .</p>
</body>
</html>
PRIMJER 1
<h1>Naslov 1</h1>
<h2>Naslov 2</h2>
<h3>Naslov 3</h3>
<h4>Naslov 4</h4>
<h5>Naslov 5</h5>
<h6>Naslov 6</h6>
6. Gornji primjer predstavlja svih šest vrsta naslova. <h1> je najveći, a <h6> najmanji.
Druga oznaka je oznaka za paragraf, <p>. Sadržaj elementa biti će prikazan u odlomku. Ako
želimo prijeći u novi red bez stvaranja novog odlomka, koristiti ćemo prazni element <br>.
Drugi primjer prikazuje tri teksta u tri različita odlomka, a treći odlomak je podijeljen u dva reda.
Jedna od najbitnijih oznaka koje ćemo zasigurno često koristiti u izradi web stranica je <a>,
oznaka za poveznicu. S njom možemo vezati web stranice u website ili spojiti ih sa stranicom iz
nekog drugog sitea.
Osim što je prikazana uporaba oznaka za poveznicu, prikazan je i atribut elementa (href) o
kojem ćemo više čuti u idućoj lekciji.
Iduća oznaka je oznaka za prikaz slika - <img>. Zahvaljujući ovoj oznaci, na našu web stranicu
možemo postaviti sliku ili animaciju. Ova oznaka je i drugačija od gore navedenih jer se radi o
elementu bez sadržaja, što znači da počinje i završava u početnoj oznaci.
Ova oznaka trebala bi prikazati logo HTML5 jezika u dimenzijama 250x300. Poveznica do slike
nalazi se u atributu src, a dimenzije u atributima width i height.
PRIMJER 2
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf <br> 3</p>
PRIMJER 3
<a href="http://www.enterprised.tk"></a>
PRIMJER 4
<img src="http://upload.wikimedia.org/wikipedia/commons/6/61/HTML5_logo_and_wordmark.
svg" width="250" height="300">
7. Atributi HTML jezika su dodaci elementima koji pružaju dodatne informacije o elementima u
kojima se nalaze. Atributi se nalaze u početnim oznakama elementa, i nakon njihove deklaracije
slijedi vrijednost tog atributa.
Postoje mnoge oznake koje omogućavaju oblikovanje teksta u HTML jeziku. Sve elemente
možete naći na kraju ovoga priručnika. U ovoj lekciji objasniti ćemo vam samo najosnovnije
elemente HTML jezika.
U gornjem primjeru naveli smo sve elemente koje ćemo objasniti.
Prvi element koji smo spomenuli za oblikovanje teksta je <b>. Taj element prikazuje svoj
tekstualni sadržaj podebljano.
Drugi element je element koji svoj sadržaj prikazuje u kurzivu. Taj element je <i>.
Treći element, <code>, prikazuje svoj tekstualni sadržaj u obliku računalnog koda.
Zadnja dva elementa su <sub> i <sup>. Ovi elementi služe za stvaranje indeksa i eksponenta.
U gornjem primjeru prikazan je prazan element koji u svojoj početnoj oznaci ima atribut href
nakon kojega slijedi vrijednost tog atributa između navodnika, odvojena od njegovog imena
znakom jednakosti. U slučaju da vrijednost atributa sadrži navodnike, moramo ju napisati između
znakova apostrofa (‘).
U svakoj verziji HTML jezika dodani su novi atributi koji omogućavaju još više mogućnosti u izradi
web stranica.
Neki od atributa koje možemo primjenjivati u svakom HTML elementu su:
class – određuje jedno ili više imena klasa za element
id – određuje jedinstveni identifikator za element
style – određuje CSS stil za element
title – određuje dodatne informacije za element prikazane u zaslonskom opisu
PRIMJER 1
<a href="http://www.enterprised.tk"></a>
PRIMJER 1
<!DOCTYPE html>
<html>
<body>
<p><b>Ovaj tekst je podebljan.</b></p>
<p><i>Ovaj tekst je u kurzivu.</i></p>
<p><code>Ovo je tekst u obliku računalnog
koda.</code></p>
<p>Ovo je<sub> indeks </sub>, a ovo je
<sup>eksponent</sup>.</p>
</body>
</html>
Atributi elemenata HTML jezika
Oblikovanje teksta u HTML jeziku
5.
6.
8. Dosada smo poveznice u HTML jeziku spominjali u nekoliko lekcija, ali u ovoj ćemo se posebno
pozabaviti samo s njima.
Kao osnovnu oznaku HTML jezika upoznali smo <a>. Upoznali smo i atribut href, ali to znanje o
poveznicama još možemo proširiti.
HTML stranice sastoje se od dva spremnika elemenata - <head> i <body>. Ta dva spremnika su
ujedno i sami po sebi elementi jer imaju početnu i završnu oznaku, te sadržaj. <head> je zaglavni
spremnik u kojem spremamo informacije vezane uz HTML dokument.
U prvom primjeru možemo vidjeti popunjeni HTML element (ima sadržaj Enterprised), što
znači da će se poveznica prikazati ovako: Enterprised.
Osim atributa href, u ovaj HTML element možemo dodati i atribut target. Pomoću ovoga
atributa određujemo hoće li će se poveznica otvoriti na ovoj ili novoj kartici ili u skočnom prozoru i
sl. Ako preglednik ne pronađe atribut target, zadano će ga otvoriti u istoj kartici.
Primjer pokazuje poveznicu s dva atributa koja će se otvoriti u novoj kartici.
Još jedan atribut koji možemo koristiti u izradi poveznica je id. Pomoću ovoga atributa možemo
primjerice poslati korisnika web stranice nazad na vrh ili na dno ili do određene riječi.
Treći primjer prikazuje web stranicu sa dovoljno udaljenim vrhom i dnom. Kako bi došli na dno
stranice, kliknuti ćemo na link Idi na dno, a na vrh idemo klikom na Idi na vrh. Isto tako možemo
dodati neku rečenicu usred stranice i dati joj poseban id i na ovaj način ju možemo naći u tekstu.
Poveznice u HTML jeziku
Zaglavlje HTML dokumenta
7.
8.
PRIMJER 1
<a href="http://www.enterprised.tk">Enterprised</a>
PRIMJER 2
<a href="http://www.enterprised.tk" target="_blank">Enterprised</a>
PRIMJER 3
<a id="vrh">Vrh stranice</a>
<a href="#dno">Idi na dno</a>
<br> <br> <br> <br> <br> ...
<a href="#vrh">Idi na vrh </a>
<a id="dno">Dno stranice</a>
9. U zaglavni spremnik spremamo slijedeće elemente:
<title> - definira naziv HTML dokumenta
<base> - definira zadanu adresu i/ili zadani način otvaranja svih poveznica na stranici
<style> - definira informacije o stilu HTML dokumenta
<meta> - daje dodatne informacije (meta-podatke) o web stranici (opis, ključne riječi itd.)
<link> - povezuje HTML dokument s vanjskim resursima poput CSS dokumenta
<script> - definira skripte sa strane klijenta poput JavaScripta
Gornji primjer pokazuje potpuno uređeno zaglavlje stranice. U elementu <script> nalazi se tekst
napisan u JavaScriptu.
CSS (engl. Cascading Style Sheet) je popularna vrsta stilskog jezika koji služi za napredno
oblikovanje HTML jezika. Njega nećemo puno spominjati u ovom priručniku, ali objasniti ćemo
vam u ovoj lekciji neke jednostavne primjene CSS jezika za uređivanje web stranice.
CSS se inače piše u posebnom dokumentu (.css), ali neke njegove mogućnosti mogu se
primijeniti i u HTML dokumentu.
U HTML jeziku možemo ga primijeniti na dva načina: u zaglavlju ili u određenim oznakama
Prvi primjer prikazuje primjenu CSS jezika u HTML zaglavlju. U gornjem slučaju svi <h1> elementi
biti će obojani u plavo.
CSS u HTML jeziku9.
PRIMJER 1
<!DOCTYPE html>
<html>
<head>
<title>Prozirno je more</title>
<meta name="description" content="Jeste li znali da je more prozirno?">
<meta name="keywords" content="HTML,more,prozirno">
<meta name="author" content="Ivan Horvat">
<meta charset="UTF-8">
<base href="http://www.w3schools.com/images/" target="_blank">
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style type="text/css">body {background-color:yellow}p {color:blue}</style>
<script>
document.write("JavaScript!")
</script>
</head>
<body>
More je prozirno!
</body>
</html>
PRIMJER 1
<head>
<style type="text/css">
h1 { color: blue }
</style>
</head>
10. PRIMJER 2
<p style="color: red;">Neki tekst</p>
PRIMJER 1
<img src="http://www.netocan-link-do-slike.com/slika.jpg" alt="Neka lijepa
slika je trebala biti tu" width="250" height="300">
PRIMJER 1
<table border="1">
<tr>
<th>Naslov 1</th>
<th>Naslov 2</th>
</tr>
<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>
Drugi primjer prikazuje primjenu CSS jezika u paragrafu, kojeg je obojao u crveno.
Sa slikama u HTML jeziku smo se već upoznali, ali sada ćemo malo proširiti znanje.
Tablice mogu dobro doći kada hoćemo prikazati skup podataka ili slično.
Glavni element za tablicu je <table>. U njemu se nalaze drugi elementi koji grade tablicu. Za
izradu retka u tablici potrebno je dodati element <tr> (skraćeno od engl. table row). Unutar <tr>
elementa dodajemo <td> (skraćeno od engl. table data) u među kojega spremamo spremamo
podatke. Svaki <td> element piše se u jedan stupac, koje tako i stvaramo. Još jedan dodatni
element je <th> (skraćeno od engl. table header) koji podebljava i centrira tekstualni sadržaj
elementa u tablici. Od atributa primjećujemo border koji određuje debljinu granica tablica.
Gornji primjer sadrži četiri atributa. Atribut src pokazuje izvor (engl. source) slike, alt
predstavlja alternativni tekst koji će se pojaviti ako slika ne postoji (u ovom primjeru bi se trebao
pojaviti), width predstavlja postavljenu širinu slike u pikselima, a height visinu.
Ako width i height nisu postavljeni, web preglednik će sliku prikazati u punoj veličini.
Slike u HTML jeziku
Tablice u HTML jeziku
10.
11.
11. PRIMJER 1
<ol>
<li>Tko?</li>
<li>Što?</li>
<li>Kako?</li>
</ol>
PRIMJER 2
<ul>
<li>Tko?</li>
<li>Što?</li>
<li>Kako?</li>
</ul>
Popisi se dijele na poredane (1. 2. 3. ili a) b) c) i sl.) i neporedane (označene crticom, točkom itd.)
Glavni element za poredane popise je <ol> (skraćeno od engl. ordered list). Unutar glavnog
elementa za svaku stvar na popisu dodajemo element <li> (skraćeno od engl. list item) i u
njegov sadržaj upisujemo tekst.
Jedna od najbitnijih stvari na koje gledaju korisnici, a posebnu pozornost moraju obratiti web
dizajneri, je raspored stvari i elemenata na web stranici.
Postoje različiti dobri rasporedi web stranica. Često se može vidjeti podjela web stranica u
dva stupca, gdje je jedan manji i predstavlja mjesto za izbornik, a drugi spremnik s podacima i
glavnim sadržajem web stranice. Nekad se radi i o dva retka, gdje je gornji uvijek manji i služi kao
izbornik, a donji za glavni sadržaj.
U izradi rasporeda web stranice najbolje je koristiti element <div>. Ovaj element omogućava
grupiranje drugih HTML elemenata u jednu cjelinu.
Primjer prikazuje popis poredan po rednim brojevima. Ako između dva elementa <li> dodamo
još jedan isti, popis će se automatski ponovno izredati i uvrstiti će se dodani element.
Neporedani popisi u HTML jeziku su vrlo slični poredanim, samo što je glavni element u
neporedanim popisima <ul> (skraćeno od engl. unordered list).
Drugi primjer prikazuje neporedan popis, a svaka stvar u popisu odvojena je točkom.
Popisi u HTML jeziku
Organiziranje rasporeda web stranica pomoću HTML-a
12.
13.
12. PRIMJER 1
<!DOCTYPE html>
<html>
<body>
<div id="spremnik" style="width:500px">
<div id="header" style="background-color:red;">
<h1 style="margin-bottom:0;">Naslov</h1></div>
<div id="izbornik" style="background-color:green;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="sastav" style="background-color:blue;height:200px;width:400px;float:left;">
Sadržaj stranice...</div>
<div id="podnozje" style="background-color:purple;clear:both;text-align:center;">
Podnožje stranice</div>
</div>
</body>
</html>
U gornjem primjeru primjenjuje se i CSS radi boljeg izgleda i lakšeg razumijevanja <div>
elemenata. Svaki <div> element je u drugoj boji. Pomoću CSS jezika grupe su pomaknute onako
kako je zamišljeno.
Osim korištenja elemenata <div>, možemo koristiti i znanje koje smo usavršili u prošlim
lekcijama, a to su tablice.
13. PRIMJER 2
<!DOCTYPE html>
<html>
<body>
<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:red;">
<h1>Naslov</h1>
</td>
</tr>
<tr>
<td style="background-color:green;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:blue;height:200px;width:400px;">
Sadržaj stranice...</td>
</tr>
<tr>
<td colspan="2" style="background-color:purple;text-align:center;">
Podnožje stranice</td>
</tr>
</table>
</body>
</html>
Drugi primjer pokazuje isti raspored kao i u prvom, ali napravljen je pomoću tablica.
HTML jezik ne može spremati niti prepoznati što korisnik unosi, ali može prikazati obrazac koji
sadrži elemente poput polja za unos teksta ili lozinke.
HTML obrasci označavaju se glavnim elementom <form>, a u sebi sadrže polja za unos teksta,
polja za unos lozinke, gumbe za odabir, gumbe za označavanje i standardni gumb za slanje
podataka.
Prvi element HTML obrazaca koji ćemo obraditi je polje za unos teksta. Svi elementi HTML
obrasca su zapravo isti, a oznaka im je <input>. Kako bi ih razlikovali, upisujemo u vrijednost
atributa type njihov naziv, koji je u ovom slučaju "text".
Unos podataka od strane korisnika pomoću HTML obrazaca14.
PRIMJER 1
<form>
Ime: <input type="text" name="ime"><br>
Prezime: <input type="text" name="prezime">
</form>
Izgled u pregledniku
14. U ovom HTML obrascu možemo naći dva polja za unos. Svako ima svoje jedinstveno ime.
Ako želimo napraviti polje za unos lozinke (zamaskirano polje za unos teksta), onda je potrebno
samo vrijednost atributa type promijeniti u "password".
Primjer prikazuje jednostavan način izrade polja za unos lozinke.
Radio gumbovi su gumbovi koji nude više izbora, ali samo jedan se može izabrati. Vrijednost
atributa type mora biti "radio" ako želimo ovakav gumb.
Treći primjer pokazuje dva gumba. U slučaju radio gumbova, gumbovi koji se odnose na isto
pitanje moraju imati istu vrijednost atributa name (u ovom slučaju vrijednost je "izbor")
Ako želimo gumb s kvačicom, onda vrijednost atributa type mora biti "checkbox".
Gornji primjer prikazuje popis zadataka napravljen pomoću gumbova s kvačicom.
Posljednji element koji ćemo obraditi je gumb za slanje podataka. Za njega u vrijednost atributa
type upisujemo "submit".
U ovom primjeru korišten je primjer gumba za slanje podataka s web stranice W3schools.
Izgled u pregledniku
Izgled u
pregledniku
Izgled u
pregledniku
Izgled u pregledniku
PRIMJER 2
<form>
Lozinka: <input type="password" name="lozinka"><br>
</form>
PRIMJER 3
<form>
<input type="radio" name="izbor" value="da">Da<br>
<input type="radio" name="izbor" value="ne">Ne<br>
</form>
PRIMJER 4
<form>
<input type="checkbox" name="zadatak" value="kruh">Kupi kruh<br>
<input type="checkbox" name="zadatak" value="pas">Izvedi psa u šetnju<br>
</form>
PRIMJER 5
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
15. Izgled u pregledniku
PRIMJER 1
<iframe src="http://www.enterprised.tk" width="200" height="200"></iframe>
Iframe je poseban element (oznaka je <iframe>) koji omogućava prikazivanje druge web
stranice unutar vaše web stranice u posebnom okviru.
Mnogi atributi iz elementa <img> mogu se primijeniti ovdje, poput src, width i height.
Boje u HTML jeziku definirane su pomoću Hex kôda, koji predstavlja kombinaciju RGB-a.
Hex kod ima tri para znakova, gdje svaki par predstavlja crvenu, zelenu ili plavu boju, a početak
koda je označen s ljestvicama (#).
Kada bismo pomnožili 256 (broj nijansi svake RGB boje) tri puta (broj RGB boja) dobili bi više
od 16 milijuna kombinacija. Toliko kombinacija možemo napraviti i sa Hex kodom, što znači da
HTML jezik ima vrlo velik spektar boja.
Ipak, računalo u prošlosti nije moglo podržati sve te boje, već samo maksimalno 256. Zbog toga
se pojavio popis od 216 tzv. “Sigurnih boja za Internet” (engl. Web Safe Colors). Taj popis više ne
vrijedi, ali može poslužiti ako želimo izraditi stranicu koja se može čitati sa starih računala.
Osim Hex koda, za HTML i CSS jezike posebno je sastavljena lista od 141 imena boja
(17 standardnih i 124 dodatne).
Sedamnaest standardnih boja su: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy,
olive, orange, purple, red, silver, teal, white, i yellow. Dodatne boje dobivaju razna imena poput
GreenYellow, HoneyDew ili OldLace.
Primjer prikazuje stranicu
Enterpriseda u 200x200 okviru.
Prikaz jedne web stranice u drugoj pomoću Iframe-a
Uporaba boja u HTML jeziku
15.
16.
16. Znakovi < i > su rezervirani za HTML jezik.
Ako ih hoćemo napisati u tekstu moramo koristiti ime ili broj entiteta kako bi ga unijeli.
Imena entiteta moraju biti pisana malim slovima!
Iako HTML jezik nudi ugradnju videozapisa, zvučnih zapisa, slika i sl., mi smo se odlučili objasniti
vam kako ugraditi film sa usluge YouTube na vašu web stranicu. Kako biste ugradili videozapis,
morate učiniti slijedeće:
1. Pronađite željeni videozapis na usluzi YouTube.
2. Ispod playera odaberite opciju Dijeli.
3. Pod Dijeli odaberite Ugradi.
4. U tekstualnom okviru dobit ćete HTML kod za Iframe s YouTube videozapisom.
Koristeći znanje iz prošlih lekcija ovaj kod možete prilagoditi svojoj web stranici. Kopirajte ga i
zalijepite u kod vaše web stranice na mjesto gdje želite da se on nalazi.
YouTube nudi i neke dodatne opcije s kojima dobivate gotov kod onako kako vi želite, poput
veličine playera ili aktiviranja privatnosti.
Jedna grana HTML jezika o kojoj nismo govorili je XHTML.
XHTML (engl. Extensible HyperText Markup Language) je mješavina HTML i XML jezika.
Točnije rečeno, radi se o HTML jeziku pisanom u obliku XML dokumenta.
Ovakva vrsta jezika često se primjenjuje u izradi blogova.
Predstavljen je 2000. godine, a razvijao se do 2009., otkada je u razvoju XHTML5 – HTML5 jezik u
XML-u.
Ime entiteta znaka < je <, a umjeto znaka može se upisati kôd (<).
Gore je naveden primjer YouTube playera. Možete primijetiti atribute width, height, src,
frameborder i allowfullscreen.
Korištenje znakova rezerviranih za HTML jezik
Ugrađivanje YouTube videozapisa pomoću HTML jezika
XHTML
17.
18.
19.
PRIMJER 1
<p>1 < 2</p>
PRIMJER 1
<iframe width="420" height="315" src="http://www.youtube.com/embed/QH2-TGUlwu4"
frameborder="0" allowfullscreen="false"></iframe>
17. Autor: Tomislav Kaučić
Grafički dizajn i nadopuna: Goran Alković
Priručnik je dovršen u rujnu 2013.
Ova knjiga intelektualno je vlasništvo Tomislava Kaučića i Gorana Alkovića.
Svako nedopušteno kopiranje, umnožavanje ili preuređivanje je ilegalno.
Impressum
