uvod u html, priprema i izrada web sadrŽ · pdf file»naučiti povezivati stranice i...
TRANSCRIPT
Mario Dakić, prof.
UVOD U HTML, PRIPREMA I IZRADA WEB SADRŽAJA
Znati ručno izraditi - pisati osnovni HTML kod Znati pripremiti slike i fotografije za web
» Naučiti povezivati stranice i tekst hiperlinkom
» Naučiti pripremiti grafičke materijale za web
http://www.tutorialspoint.com/html/index.htm http://www.w3schools.com/ http://www.hyperlinkcode.com/
Literatura Web stranice:
» 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>
» 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>
» Globalni ˃ Veza izvan hijerarhijske strukture – vanjski dokumenti
<a href="http://www.google.hr/" target="_blank">Google</a>
» 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>
» Veza na e-mail adresu ˃ Slanje maila iz dokumenta
˃ Koristi oznaku mailto:
<a href="mailto:[email protected]">Pišite nam</a>
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” />
Priprema slika za web
– Formati: jpg, gif, png
– Razlučivost za web: 72 dpi, 96 dpi
– Obrada fotografija – programi
+ Photoshop,
+ Inkscape
+ Sumopaint (online)
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>
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>
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>
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>
<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>
<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>
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/
Odgovori?