uvod u html, priprema i izrada web sadrŽajauvod u html, priprema i izrada web sadrŽaja znati...
TRANSCRIPT
![Page 1: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/1.jpg)
Mario Dakić, prof.
UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA
![Page 2: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/2.jpg)
Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web
![Page 3: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/3.jpg)
» Naučiti povezivati stranice i tekst hiperlinkom
» Naučiti pripremiti grafičke materijale za web
![Page 4: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/4.jpg)
http://www.tutorialspoint.com/html/index.htm http://www.w3schools.com/ http://www.hyperlinkcode.com/
Literatura Web stranice:
![Page 5: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/5.jpg)
![Page 6: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/6.jpg)
» Hiperlink?
» Referenca na drugi dokument ili dio unutar istog dokumenta ˃ <a> - početak i kraj </a>
˃ Atributi:
+ Href i name – destinacija veze
+ Target – mjesto otvaranja veze
+ Title – opis veze (eng. tip)
<a href="http://www.google.hr/" title=“Find on google">Google</a>
![Page 7: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/7.jpg)
» Lokani ˃ Veza unutar iste hijerarhijske strukture
˃ Veze sa stranice index.htm <a href="kontakt.htm">Kontakt</a>
<a href="zaposlenici/pero.htm">Pero Perić</a>
˃ Veza sa stranice ivana.htm <a href="../index.htm">index</a>
˃ Veza sa stranice pero.htm <a href="../suradnici/ivana.htm">Ivana Ivić</a>
˃ Veza sa korijena (root) <a href="/suradnici/ivana.htm">Ivana Ivić</a>
![Page 8: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/8.jpg)
![Page 9: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/9.jpg)
» Globalni ˃ Veza izvan hijerarhijske strukture – vanjski dokumenti
<a href="http://www.google.hr/" target="_blank">Google</a>
![Page 10: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/10.jpg)
![Page 11: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/11.jpg)
» Knjiške oznake ˃ Veza na dijelove dokumenta
˃ Skok sa sadržaja na poglavlje dokumenta
˃ 2 koraka
+ Označavanje dio dokumenta (naslov poglavlja)
<a name="vrh">Sadržaj</a>
+ Staviti referencu u vezu
<a href="#vrh">Povratak na Sadržaj</a>
˃ Knjiške oznake vanjskih dokumenata
<a href="http://www.tv.hr/program.htm#petak">Petak</a>
![Page 12: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/12.jpg)
![Page 13: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/13.jpg)
» Veza na e-mail adresu ˃ Slanje maila iz dokumenta
˃ Koristi oznaku mailto:
<a href="mailto:[email protected]">Pišite nam</a>
![Page 14: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/14.jpg)
Tag <img />
– src=“file”
– alt=“text”, title=“text”
– align=“bottom; middle; top; left; right”
– border=“broj”
– height=“broj”, width=“broj”
– vspace=“broj”, hspace=“broj”
Primjer: <img src=”slika.gif” height=”100” width=”75” />
![Page 15: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/15.jpg)
Priprema slika za web
– Formati: jpg, gif, png
– Razlučivost za web: 72 dpi, 96 dpi
– Obrada fotografija – programi
+ Photoshop,
+ Inkscape
+ Sumopaint (online)
![Page 16: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/16.jpg)
Primjer IMG <html>
<head>
<title>Primjer IMG taga</title>
</head>
<body>
<p>Evo jedna statična slika:<img src="zemlja.jpeg" /></p>
<p>A sad evo jedne pomične:<img src="hacker.gif" /></p>
<p>Primjetiti da se slike ubacuju na isti nacin, bez obzira na njihov
format.</p>
</body>
</html>
![Page 17: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/17.jpg)
Primjer ALIGN atributa – I dio <html>
<head>
<title>Poravnavanje slike</title>
</head>
<body>
<p>Align atribut kontrolira poravnavanje slike sa okolnim tekstom:</p>
<p>Slika je poravnata svojim donjim rubom uz tekst <img src="nagrada.jpeg" alt="nagrada" align="bottom"></p>
<p>Slika i tekst su centrirani <img src="nagrada.jpeg" alt="nagrada" align="middle"></p>
<p>Slika je poravnata svojim gornjim rubom uz tekst <img src="nagrada.jpeg" alt="nagrada" align="top"></p>
</body>
</html>
![Page 18: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/18.jpg)
Primjer ALIGN atributa – II dio <html>
<head>
<title>Poravnavanje slike</title>
</head>
<body>
<p><img src="nagrada.jpeg" alt="nagrada" align="left">
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s lijeve strane teksta i dopusta vise linija teksta oko slike.
</p>
<p><img src="nagrada.jpeg" alt="nagrada" align="right">
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike.
</p>
</body>
</html>
![Page 19: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/19.jpg)
Primjer BORDER, HEIGHT i WIDTH <html>
<head>
<title>Okvir i dimenzije slike</title>
</head>
<body>
<p>Height i width mijenjaju originalne dimenzije slike:<br>
<img src="nagrada.jpeg" width="100" height="150" border="5">dok border
radi okvir oko slike.
</p>
</body>
</html>
![Page 20: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/20.jpg)
<html>
<head>
<title>Primjer postavljanja slike kao pozadine</title>
</head>
<body background="pozadina.jpeg">
<h2>Slika pozadina.jpeg je postavljena kao pozadina ovoj stranici</h2>
<h3>Bitno je da datoteka sa slikom i HTML dokument moraju biti u istoj mapi!</h3>
</body>
</html>
![Page 21: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/21.jpg)
<html>
<head>
<title>Primjer A taga - slika kao link</title>
</head>
<body>
Umjesto teksta i slika moze posluziti kao link.
<p>
Ovo je link na stranice Privatne Jezicne Gimnazije
<a href="http://www.pjg-pitagora.hr"><img src="logo-pitagora.jpeg" /></a>
</p>
</body>
</html>
![Page 22: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/22.jpg)
Oblikovati po volji odabrani tekst tako da postavite hiperlinkove na određene dijelove teksta i da postavite sliku kao link na web stranicu www.hagede.hr, koristeći se primjerima na slijedećoj web stranici http://www.hyperlinkcode.com/
![Page 23: UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJAUVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web](https://reader035.vdocuments.pub/reader035/viewer/2022062403/5fe40b80d953ed225d713e95/html5/thumbnails/23.jpg)
Odgovori?