Kako Internet govori?OSNOVE HTML JEZIKA

Tomislav KaučićGoran Alković

2013.

Sadržaj1.2.3.4.5.6.7.8.9.10.11.12.13.14.15.16.17.18.19.

Upoznavanje s HTML jezikomUređivači HTML jezikaElementi HTML jezikaOsnovne oznake HTML jezikaAtributi elemenata HTML jezikaOblikovanje teksta u HTML jezikuPoveznice u HTML jezikuZaglavlje HTML dokumentaCSS u HTML jezikuSlike u HTML jezikuTablice u HTML jezikuPopisi u HTML jezikuOrganiziranje rasporeda web stranica pomoću HTML-aUnos podataka od strane korisnika pomoću HTML obrazacaPrikaz jedne web stranice u drugoj pomoću Iframe-aUporaba boja u HTML jezikuKorištenje znakova rezerviranih za HTML jezikUgrađivanje YouTube videozapisa pomoću HTML jezikaXHTML

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.

AdobeDreamweaver CC

Adobe MuseCC

Adobe Edge Code CC

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

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>

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">

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_indeks, a ovo je ^eksponent.</p></body></html>

Atributi elemenata HTML jezika

Oblikovanje teksta u HTML jeziku

5.

6.

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>

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>

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.

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.

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.

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

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 upregledniku

Izgled upregledniku

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>

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.

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 &lt, a umjeto znaka može se upisati kôd (&#60).

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 &lt 2</p>

PRIMJER 1

<iframe width="420" height="315" src="http://www.youtube.com/embed/QH2-TGUlwu4" frameborder="0" allowfullscreen="false"></iframe>

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