xhtml 2.0 and html 5...uri i url niform esource ocator je string koji specificira način pristupa...
TRANSCRIPT
WWW
HTML
Što ćete naučiti? Kako funkcionira Internet
Osnovni protokoli interneta
Usluge interneta
Kako funkcionira web
HTML
CSS
Javascript
DOM
PHP
Screenshot: wikipedia
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
http://www.pocket-lint.com/news/116474-sir-tim-berners-lee-olympic-tweet
https://www.youtube.com/watch?v=UMNFehJIi0E
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
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.
Klijent –server komunikacija
Linija statusa
(Status-Line)
Zaglavlja...
Sadržaj...
Prazna linija
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
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
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
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
Prva Web stranica
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
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 ....
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
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
HTML – struktura dokumenta<!doctype>
<html><head>
</head>
<body>
</body>
</html>
<!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 >
<html>
</html>
<head>
</head>
<body>
</body>
HTML – struktura dokumenta
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
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
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 >
HTML atributi<body bgcolor=“navy”>
atribut=“vrijednost”
Primjer – boje pozadine
<body bgcolor=“#000080”>
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
Jednostavan primjer HTML
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
Primjeri formatiranja teksta
“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
“Computer output” tagovi
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
Citati, definicije,...
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&
Često korišteni entiteti
'' (does not work in IE)apostrophe'
""quotation mark"
&&ampersand&
>>greater than>
<<less than<
  non-breaking space
Entity NumberEntity NameDescriptionResult
Entiteti
÷÷division÷
××multiplication×
®®registered trademark®
©©copyright©
§§section§
¥¥yen¥
££pound£
¢¢cent¢
Entity NumberEntity NameDescriptionResult
Komentari
<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>
<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
<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>
<a>
<img>• <img src="url"> • URL
• Apsolutni• Relativni
• Nema zatvarajućeg taga!• U skladu s xhtml <img src=“url” />
<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
<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
<img> atributi id, class, title, style, lang, xml:lang
Events:
onclick, ondblclick, onmousedown, onmouseup,
onmouseover, onmousemove, onmouseout, onkeypress,
onkeydown, onkeyup
<img>
<img>
<img>
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
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>
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
Nepobrojane liste
Pobrojane liste
Lista definicija
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">