XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa...
Transcript of XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa...
![Page 1: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/1.jpg)
WWW
HTML
![Page 2: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/2.jpg)
Što ćete naučiti? Kako funkcionira Internet
Osnovni protokoli interneta
Usluge interneta
Kako funkcionira web
HTML
CSS
Javascript
DOM
PHP
![Page 3: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/3.jpg)
Screenshot: wikipedia
![Page 4: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/4.jpg)
WWW World Wide Web je mreža informacijskih resursa.
Web se oslanja na tri glavna mehanizma Jedinstveni način imenovanja resursa smještenih na Web-u (npr.,
URI).
Protokoli koji omogućavaju pristup informacijskim resursima na Web-u (npr., HTTP).
Hipertekst za što lakšu navigaciju među resursima (npr., HTML).
omogućavaju pristup informacijskim resursima širokom krugu korisnika
![Page 5: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/5.jpg)
http://www.pocket-lint.com/news/116474-sir-tim-berners-lee-olympic-tweet
https://www.youtube.com/watch?v=UMNFehJIi0E
![Page 6: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/6.jpg)
URI i URL Uniform Resource Locator (URL) je string koji specificira način pristupa
nekom resursu na mreži Jednoznačno identificira resurs na mreži kao što je na primjer HTML
dokument. URL je dio URI-ja (Uniform (Universal) Resource Identifier). <protokol>:<adresa>
<protokol>://<server>:[<port>]/<put do dokumenta>
Npr:mailto:[email protected]://laris.fesb.hr/index.htmlhttp://laris.fesb.hr:80/index.htmlhttp://laris.fesb.hr/claroline-1.3.1/
Apsolutni URL Relativni URL
Internet/lekcija1.html
![Page 7: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/7.jpg)
HTTP➢ HTTP 1.0
➢ Ostvaren je jednostavan princip kod kojega se uočava tipičan slijed:
➢ uspostava veze
➢ zahtjev
➢ odgovor
➢ kraj.
➢ Moguće je obavljanje samo jednog zahtjeva prije raskidanja veze.
➢ HTTP 1.1
➢ Unaprjeđenje verzije 1.0 u vidu uspostavljanja trajne veze
➢ omogućava višestruke zahtjeve ili odgovore.
➢ Dodatno, ostvareni su mnogi drugi napredni mehanizmi komunikacije čime je povećana efikasnost i smanjen prijenos nekorisnih informacija.
![Page 8: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/8.jpg)
Klijent –server komunikacija
![Page 9: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/9.jpg)
Linija statusa
(Status-Line)
Zaglavlja...
Sadržaj...
Prazna linija
![Page 10: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/10.jpg)
HTTP metode
GET – zahtjev za čitanjem web stranice
HEAD – zahtjev za čitanjem zaglavlja stranice
PUT - zahtjev za pohranom web stranice
POST – dodavanje resursu navedenog URL-a
DELETE – brisanje web stranice
TRACE – vraća poslani zahtjev (kontrola ispravnosti)
CONNECT – rezervirano
OPTIONS – zahtjev za parametrima poslužitelja
![Page 11: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/11.jpg)
HTTP zaglavlje
Poslužitelj želi da klijent sačuva kolačićOdgovorSet-Cookie
Poslužitelj prihvaća zahtjeve za intervalima oktetaOdgovorAccept-Ranges
Odgovor klijentu da šalje zahtjeve drugamoOdgovorLocation
Datum i vrijeme zadnje promjene straniceOdgovorLast-Modified
MIME tip straniceOdgovorContent-Type
Duljina stranice u oktetimaOdgovorContent-Length
Jezik koji se koristi za sadržajOdgovorContent-Language
Kako je sadržaj kodiranOdgovorContent-Encoding
Informacije o poslužiteljuOdgovorServer
Protokol na koji se pošiljatelj želi prebacitiObaUpgrade
Datum i vrijeme slanja porukeObaDate
Prethodno postavljen kolačić vraća na poslužiteljZahtjevCookie
Dokaz klijentovog identitetaZahtjevAuthorization
Poslužiteljev DNSZahtjevHost
Jezici koje prima klijentZahtjevAccept-Language
Kodiranja stranice koje prima klijentZahtjevAccept-Encoding
Znakovni skup koji prima klijentZahtjevAccept-Charset
Tipovi stranica koje klijent može primitiZahtjevAccept
Informacije o pregledniku i računaluZahtjevUser-Agent
SadržajTipZaglavlje
![Page 12: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/12.jpg)
HTTP - Cookie
➢ Pomoću cookie-ja server može pamtiti korisnika - klijenta.➢ Kada se klijent prvi put spaja na server odgovor servera uključuje Set-
cookie: zaglavlje.➢ Cookie se pohranjuje na disku klijenta.➢ Sljedeći zahtjevi serveru koje šalje klijent sadrže informacije iz cookie-ja,
a prenose se u Cookie: zaglavlju.➢ Na primjer kada klijent zatraži od servera dokument dobije u odgovoru
➢ Set-Cookie: IME = MATE; path=/
➢ Kada klijent pristupa URL-u u root direktoriju tj. u / šalje serveru:➢ Cookie: IME = MATE
![Page 13: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/13.jpg)
HTTP odgovori
1XX – Informacija 2XX – Uspjeh
200 – OK
3XX – Preusmjeravanje 301 - moved302 - found
4XX – Greška uzrokovana klijentom 403 - Forbidden404 – Not Found
5XX – Greška uzrokovana poslužiteljem
![Page 14: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/14.jpg)
Prva Web stranica
![Page 15: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/15.jpg)
Web preglednici Google Chrome
Microsoft Edge/ Internet Explorer
Mozilla Firefox (sve platforme)
Apple Safari (Mac OS X)
Opera
http://www.w3schools.com/browsers/browsers_stats.asp
![Page 16: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/16.jpg)
Izrada vlastite web stranice Easy way ili hard way?
Easy way – korištenjm vizualnih editora (WYSIWYG)
Adobe Dreamweaver, Microsoft Frontpage ,
„Hard way” – unosom html koda
Notepad, Notepad++, Visual Studio, VS Code, Eclipse, Aptana ....
![Page 17: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/17.jpg)
Izrada vlastite web stranice Pokrenuti tekstualni editor (npr Notepad)
Upisati html kod stranice
Sačuvati dokument sa nastavkom .html (File->Save as)
Pokrenuti dokument sa diska
![Page 18: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/18.jpg)
![Page 19: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/19.jpg)
HTML➢Hyper Text Markup Language
➢Hipertekst – tekst koji nije linearan, sadrži linkove.
➢Markup tagovi – oznake uz tekst koje govore kako se
prikazuje tekst
<b>fesb</b>Start tag End tag Sadržaj taga
![Page 20: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/20.jpg)
HTML – struktura dokumenta<!doctype>
<html><head>
</head>
<body>
</body>
</html>
![Page 21: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/21.jpg)
<!DOCTYPE> XHTML dopušta 3 vrste doctype dekalracije: Strict, Transitional,
Frameset. XHTML Strict DTD
Strogo korištenje čistih HTML tagova uz css <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> XHTML Transitional DTD
Ako neki korisnici imaju preglednike koji ne prikazuju css: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML Frameset DTD Stranice koje imaju okvire <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
HTML5 <!DOCTYPE html >
![Page 22: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/22.jpg)
<html>
</html>
<head>
</head>
<body>
</body>
HTML – struktura dokumenta
![Page 23: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/23.jpg)
HEAD Tagovi koji se mogu pojaviti unutar head dijela:
<title> - naslov dokumenta
<base> - osnovni dio url-a za sve linkove
<link> - veza sa nekim vanjskim resursom
<meta> - metapodaci
![Page 24: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/24.jpg)
META Atributi:
Content : obavezan, dolazi u paru sa ili name ili http-equiv
Name: naziv sadržaja atributa
http-equiv : naziv http zaglavlja čiji se sadržaj opisuje
<meta name="keywords" content="HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript" />
Kako su webmasteri koristili meta tagove za spamiranje i povećanje ranka, većina tražilica odbacila je korištenje meta tagova za indeksiranje i rangiranje stranica
<meta name="description" content="Free Web tutorials on HTML, CSS, XML, and XHTML" />
<meta name=“author" content=“Mate" />
<meta name="revised" content="Hege Refsnes, 6/10/99" />
….
<meta http-equiv="refresh" content="5" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
charset=iso-8859-2
Charset=UTF-8
charset=Windows-1250
![Page 25: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/25.jpg)
Tagovi i atributi HTML elementi se sastoje od tagova i atributa
Tagovi
<imetaga>sadržaj taga...</ imetaga >
Atributi
Idu u otvarajući tag elementa
Dodatne informacije o elementu
Obično oblika ime- vrijednost tj. imeatributa=„vrijednost”
Element može imati više atributa<imetaga imeatributa=„vrijednost”>sadržaj taga...</ imetaga >
![Page 26: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/26.jpg)
HTML atributi<body bgcolor=“navy”>
atribut=“vrijednost”
Primjer – boje pozadine
<body bgcolor=“#000080”>
![Page 27: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/27.jpg)
Osnovni tagovi
Komentar <!-->
Horizontalana linija<hr>
prelazak u novi red<br>
Definira paragraf<p>
Definira naslove<h1> to <h6>
Definira tijelo dokumenta<body>
Definira HTML dokument<html>
Opis tagaTag
![Page 28: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/28.jpg)
Jednostavan primjer HTML
![Page 29: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/29.jpg)
Formatiranje teksta
Deprecated. Use styles instead<u>
Deprecated. Use <del> instead<strike>
Deprecated. Use <del> instead<s>
Defines deleted text<del>
Defines inserted text<ins>
Defines superscripted text<sup>
Defines subscripted text<sub>
Defines strong text<strong>
Defines small text<small>
Defines italic text<i>
Defines emphasized text<em>
Defines big text<big>
Defines bold text<b>
DescriptionTag
![Page 30: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/30.jpg)
Primjeri formatiranja teksta
![Page 31: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/31.jpg)
“Computer output” tagovi
Deprecated. Use <pre> instead<xmp>
Deprecated. Use <pre> instead<plaintext>
Deprecated. Use <pre> instead <listing>
Defines preformatted text<pre>
Defines a variable<var>
Defines teletype text<tt>
Defines sample computer code<samp>
Defines keyboard text<kbd>
Defines computer code text<code>
DescriptionTag
![Page 32: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/32.jpg)
“Computer output” tagovi
![Page 33: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/33.jpg)
Citati, definicije,...
Defines a definition term<dfn>
Defines a citation<cite>
Defines a short quotation<q>
Defines a long quotation<blockquote>
Defines the text direction<bdo>
Defines an address element<address>
Defines an acronym<acronym>
Defines an abbreviation<abbr>
DescriptionTag
![Page 34: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/34.jpg)
Citati, definicije,...
![Page 35: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/35.jpg)
Entiteti Neki znakovi (poput <) imaju posebno značenje u
HTML-u
Da bi se prikazali na web stranici koistimo entitete
Entitet se sastoji od:
Primjer:
;Ime ili # i broj&
![Page 36: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/36.jpg)
Često korišteni entiteti
'' (does not work in IE)apostrophe'
""quotation mark"
&&ampersand&
>>greater than>
<<less than<
  non-breaking space
Entity NumberEntity NameDescriptionResult
![Page 37: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/37.jpg)
Entiteti
÷÷division÷
××multiplication×
®®registered trademark®
©©copyright©
§§section§
¥¥yen¥
££pound£
¢¢cent¢
Entity NumberEntity NameDescriptionResult
![Page 38: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/38.jpg)
Komentari
![Page 39: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/39.jpg)
<a> HTML koristi <a> (anchor) tag za kreiranje linka na drugi dokument Anchor može povezivati na bilo koji resurs na webu : HTML stranicu,
sliku, zvuk, film itd Sitaksa za kreiranje linka je:
<a href="url">Text to be displayed</a>
<a> tag koristi se za kreiranje mjesta koje povezuje href atribut se koristi za adresiranje dokumenta na kojeg povezuje Tekst između otvarajućeg i zatvarajućeg taga je tekst koji će se
prikazivati na dokumentu i predstavljati poveznicu (hyperlink) Npr:
<a href="http://www.w3schools.com/">Visit W3Schools!</a>
![Page 40: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/40.jpg)
<a> - target atributTarget atribut odrađuje gdje će se povezani dokument otvoriti.
<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
the target URL will open in the full body of the
window _top
the target URL will open in the same frame as it
was clicked _self
the target URL will open in the parent frameset _parent
the target URL will open in a new window _blank
![Page 41: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/41.jpg)
<a> Name atribut koristi se da bi se kreiralo imenovano sidro Korištenjem sidra možemo kreirati linkove koji će nas voditi do
točno određenog mjesta na stranici
<a name="tips">Useful Tips Section</a> Ne ispisuju se na poseban način kao linkovi da bismo kreirali link na sekciju tips dodajemo # i ime sekcije na
kraj URLa
<a href="http://www.w3schools.com/html_links.asp#tips">
Jump to the Useful Tips Section</a> Ako se sidro nalazi unutar iste stranice kao i link href atribut
izgleda:
<a href="#tips">Jump to the Useful Tips Section</a>
![Page 42: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/42.jpg)
<a>
![Page 43: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/43.jpg)
<img>• <img src="url"> • URL
• Apsolutni• Relativni
• Nema zatvarajućeg taga!• U skladu s xhtml <img src=“url” />
![Page 44: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/44.jpg)
<img> Required Attributes
S=Strict, T=Transitional, and F=Frameset.
STFThe URL of the
image to displayURLsrc
STFDefines a short
description of
the image
textalt
DTDDescriptionValueAttribute
![Page 45: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/45.jpg)
<img> atributi
STFSets the width of an imagepixels
%
width
TFDefines white space on the top and bottom of the image. Deprecated.
Use styles instead
pixelsvspace
STFDefines the image as a client-side image map. Look at the <map> and
<area> tags to figure out how it works
URLusemap
STFA URL to a document that contains a long description of the imageURLlongdesc
STFDefines the image as a server-side image mapURLismap
TFDefines white space on the left and right side of the image. Deprecated.
Use styles instead
pixelshspace
STFDefines the height of an imagepixels
%
height
TFDefines a border around an image. Deprecated. Use styles insteadpixelsborder
TFSpecifies how to align the image according to surrounding text.
Deprecated. Use styles instead
top
bottom
middle
left
right
align
DTDDescriptionValueAttribute
![Page 46: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/46.jpg)
<img> atributi id, class, title, style, lang, xml:lang
Events:
onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup
![Page 47: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/47.jpg)
<img>
![Page 48: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/48.jpg)
<img>
![Page 49: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/49.jpg)
<img>
![Page 50: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/50.jpg)
Image tags
Odabrati komprimirane formate slike radi bržeg učitavanja
Defines an area inside an image map<area>
Defines an image map<map>
Defines an image<img>
DescriptionTag
![Page 51: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/51.jpg)
![Page 52: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/52.jpg)
ListePreporuka : ne koristiti <br> umjesto listaSvaka stavka se uokviruje <li> tagom
VRSTE LISTA: Nepobrojane - <ul>
Type: disc | square | circle Pobrojane - <ol>
Start : redni broj prve stavke Vrste A | a | I | i | 1
Liste definicija - <dl>
![Page 53: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/53.jpg)
Tagovi za liste
Deprecated. Use <ul> instead<menu>
Deprecated. Use <ul> instead<dir>
Defines a definition description<dd>
Defines a definition term<dt>
Defines a definition list<dl>
Defines a list item<li>
Defines an unordered list<ul>
Defines an ordered list<ol>
DescriptionTag
![Page 54: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/54.jpg)
Nepobrojane liste
![Page 55: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/55.jpg)
Pobrojane liste
![Page 56: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/56.jpg)
Lista definicija
![Page 57: XHTML 2.0 and HTML 5...URI i URL niform esource ocator je string koji specificira način pristupa nekom resursu na mreži ednoznačno identificira resurs na mreži kao što je na primjer](https://reader030.fdocuments.net/reader030/viewer/2022040721/5e2dcc4d19270371237f79d4/html5/thumbnails/57.jpg)
Olakšajte posao tražilicama Ime autora
<META NAME="author" CONTENT=Ivo Ivić">
Ključne riječi
<META NAME="keywords" LANG="hr" CONTENT=katalog, riba,
more, Jadran">
Opis
<META NAME="description" LANG="hr" CONTENT="katalog
jadranskih riba s izvornim podvodnim fotografijama">