Uvod u Internet ARPA-Net  Internet IP adrese / DNS TCP/IP Routing

Uvod u Internet ARPA-Net  Internet IP adrese / DNS TCP/IP Routing
Client / Server Internet usluge W W W FTP Usenet Telnet

World Wide Web Što je WWW? Kako WWW radi?
World Wide Web - mreža povezanih računala. Sva računala mogu međusobno komunicirati. Koristi se zajednički komunikacijski standard nazvan HTTP. Kako WWW radi? Informacije su smještene unutar web stranica. Web stranice se nalaze na računalima koji se zovu web serveri. Računala koja pregledavaju web stranice nazivaju se web klijenti. Programi kojima web klijenti pregledavaju web stranice su web preglednici ili browseri. Kako browser dohvaća stranicu? Browser serveru upućuje zahtjev za nekom stranicom. Zahtjev je dio HTTP standarda čiji je najvažniji dio adresa stranice. Primjer adrese stranice:

World Wide Web (izvor http://isc.org)‏

WEB Design - problemi Različiti web browseri
Mnoštvo rezolucija/broj boja fiksni design fleksibilni design Problem platforme Korisničke postavke Brzina veze Instalirani fontovi Problem ispisa

Web browseri (izvor http://w3schools.com)‏

Rezolucija, broj boja (izvor http://w3schools.com)‏

Operacijski sustavi (izvor http://w3schools.com)‏

JavaScript (izvor http://w3schools.com)‏

web stranice se nalaze na serveru koji čeka na zahtjev za dostavljanje
HTML Kako browser prikazuje stranicu? Sve web stranice sadrže instrukcije za prikazivanje. Web browser analizira instrukcije i iscrtava stranicu. Najčešći oblik instrukcija naziva se HTML tag. Primjer HTML taga: <b>Ovaj je tekst podebljan!</b> Što je HTML dokument? HTML je skraćenica od Hyper Text Markup Language. HTML dokument je tekstualni dokument koji se sastoji od tagova. Tag kaže browseru kako prikazati stranicu. HTML dokument mora imati ekstenziju .htm ili .html. HTML dokument ima definiranu strukturu. web stranice se nalaze na serveru koji čeka na zahtjev za dostavljanje nakon što je zaprimio zahtjev server šalje stranice putem Internet veza po dolasku na lokalno računalo web browser analizira HTML tagove i iscrtava stranicu

HTML elementi <tag at1=”vr1” at2=”vr2” ...>Sadržaj</tag>
početni tag završni tag <tag at1=”vr1” at2=”vr2” ...>Sadržaj</tag> atribut vrijednost tekst ili drugi HTML elementi Primjer: <p align=”center”>HTML</p> Primjer jednostukog elementa: <br clear=”all”/>

Struktura dokumenta <html> HTML dokument <head> Zaglavlje
Naslov dokumenta <title> </title> </head> <body> Tijelo </body> </html>

XHTML Što je XHTML? Zašto je uveden XHTML?
XHTML je skraćenica od EXtensible HyperText Markup Language. XHTML je tu da zamijeni HTML. XHTML 1.0 je gotovo identičan kao i HTML 4.01. XHTML je stroža i preciznija varijanta HTML-a. Zašto je uveden XHTML? Postoji mnoštvo nedosljednosti u HTML-u. <html> <head> <title>Ovo je loš HTML</title> <body> <b>Loš HTML </body> Hoće li gornji HTML dokument biti ispravno prikazan?

U čemu su zapravo razlike?
XHTML dokumenti moraju imati čvrstu strukturu. <html> <head> ... </head> <body> ... </body> </html> XHTML tagovi moraju biti pravilno ugniježdeni. <b><i>Ovaj tekst nije po XHTML standardu</b></i> <b><i>Ovaj tekst jest po XHTML standardu</i></b> Tagovi i atributi se obvezno pišu malim slovima, vrijednosti atributa moraju biti u navodnicima. <table width="100%">...</table> Svi XHTML tagovi moraju biti zatvoreni, čak i jednostruki Slijedi novi red<br>Novi red Slijedi novi red<br />Novi red

HTML vs CSS The HTML way Sadržaj HTML dokument Stil (izgled)‏

HTML vs CSS The CSS way HTML dokument Sadržaj CSS dokument
Stil (izgled)‏

Preglednici ignoriraju
prelaske u novi red višestruke razmake tabove prazne paragrafe nepoznate tagove komentare

Problem posebnih znakova

Text u HTML-u Ispis posebnih znakova > π  ® ® © ©
€ € " “ < & & razmak ÷ ÷ × ×

Tag <body> Atributi Boja podloge: bgcolor=“boja”
Boja slova: text=“boja” Margine: leftmargin, rightmargin, topmargin, bottommargin <html> <head> <title>Primjer taga BODY</title> </head> <body bgcolor="yellow" text="red"> Boja podloge ove stranice biti ce zuta a teksta crvena! </body> </html>

Primjer BODY

Boje u HTML-u RGB vrijednost ime boje <body bgcolor=“#112233”>
<body bgcolor=“yellow”> yellow (FFFF00)‏ red (FF0000)‏ maroon (800000)‏ fuchsia (FF00FF)‏ white (FFFFFF)‏ purple (800080)‏ lime (00FF00)‏ blue (0000FF)‏ teal (008080)‏ olive (808000)‏ green (008000)‏ black (000000)‏ silver (C0C0C0)‏ navy (000080)‏ gray (808080)‏ aqua (00FFFF)‏

Text u HTML-u Paragraf tagovi <p> ... </p>
Atribut align: <p align=“center; left; right”> <div> ... </div> Atribut align: <div align=“center; left; right”> <h1>...</h1>, <h2>...</h2>, <h6>...</h6> Atribut align: <h1 align=“center; left; right”>

Primjer P <html> <head> <title> Primjer P taga
<body> P tag opceniti je tag za definiranje paragrafa uz mogucnost poravnavanja! <p align="right"> Primjer desno poravnatog paragrafa! </p> Primjetiti da P tag stvara razmak medju paragrafima! </body> </html>

Primjer DIV <html> <head> <title> Primjer DIV taga
<body> DIV tag koristi se za odjeljivanje teksta uz mogucnost poravnavanja! <div align="center"> Kao sto je ovaj! </div> Primjetiti da nema razmaka medju paragrafima! </body> </html>

Primjer H tagova <html> <head> <title>
<body> H tagovi koriste se za naslove! Imaju mogucnost poravnavanja! <h1>Tag H1</h1> <h2 align="center">Tag H2</h2> <h3 align="right">Tag H3</h3> <h4 align="center">Tag H4</h4> <h5 align="left">Tag H5</h5> <h6>Tag H6</h6> Primjetiti da H tagovi takodjer stvaraju paragrafe! </body> </html>

Text u HTML-u Tagovi za prikaz teksta <b>, <i>, <u>
<big>, <small>, <sub>, <sup> <span> <font> Atribut face Atribut size Atribut color

Primjer B, I i U tagova <html> <head> <title>
<body> Tag B cini tekst <b>podebljanim</b>!<br> Tag I cini tekst <i>nakosenim</i>!<br> Tag U cini tekst <u>potcrtanim</u>!<br> A mogu se i <b><i>kombinirati</i></b> na <u><i>razne</i> <b>nacine</b></u>. </body> </html>

Primjer BIG, SMALL, SUB, SUP
<html> <head> <title> Primjer BIG, SMALL, SUB i SUB tagova </title> </head> <body> <p>Tag BIG cini tekst za jedan <big>korak <big>vecim</big></big> od ostatka recenice!</p> <p>Tag SMALL cini tekst za jedan korak <small>manjim</small> od ostatka recenice!</p> <p>Tagovi SUB i SUP rade <sub>indekse</sub> i <sup>potencije</sup>.</p> </body> </html>

Primjer SPAN <html> <head> <title> Primjer SPAN taga
<body> Tag SPAN odjeljuje dio teksta od ostatka recenice. SPAN <span>ne radi</span> paragraf! Sluzi za dodavanje <span style="color:red">stilova</span> CSS-om! </body> </html>

<font> tag Atributi: face=“vrsta slova” size=“velicina”
serif, sans-serif, monospace, cursive, fantasy size=“velicina” apsolutna: 1-7 relativna: ..., -2, -1, +1, +2, ... color=“boja”

Fontovi MS Windows Internet Explorer 4.5+ Arial Courier New
Times New Roman Symbol  Wingdings  Internet Explorer 4.5+ Arial Arial Black Comic Sans Courier New Georgia Impact Times New Roman Trebuchet MS Verdana Webdings  Wingdings 

Primjer FONT <html> <head>
<title>Primjeri FONT taga</title> </head> <body> FONT tagom mijenjamo vrstu, velicinu i boju slova<br> <font face="Arial" size="4" color="green">Ovo je Arial, velicine 4</font> <font face="Garamond" size="+2" color="red">Ovo je Garamond, velicine 2 vece od standardne, dakle 5</font> <br><br> Moguce je navesti i vise fontova: <br> <font face="Verdana, Arial, sans-serif">Ovaj tekst biti ce prikazan u fontu Verdana, ako ga ne bude onda u fontu Arial a ako nema ni jednog onda u bilo kojem sans-serif fontu</font> </body> </html>

Text u HTML-u Tagovi za pozicioniranje <br />
<center> ... </center> <pre>... </pre>

Primjer BR <html> <head> <title> Primjer BR taga
<body> Jedini nacin za<br>dobiti<br>novi red unutar<br>istog paragrafa je<br>tag BR! <p>Drugi paragraf - linija prva<br> Drugi paragraf - linija druga</p> Po XHTML standardu<br />trebalo bi i<br />BR tag zatvoriti<br />iako je jednostruki! </body> </html>

Primjer CENTER <html> <head> <title>
Primjer CENTER taga </title> </head> <body> CENTER tag koristi se za centriranje teksta! <center> Kao sto je ovaj! </center> Primjetiti kako center tag NIJE dodatno odmakao tekst od paragrafa iznad i ispod! </body> </html>

Primjer PRE <html> <head>
<title>Primjer taga PRE</title> </head> <body> <pre> Tag PRE postuje nacin na koji je tekst unutar HTML doku menta napisan sto znaci da se svi razmaci tabovi i prelasci u novi red vrednuju. Obvezan neki monospace font </pre> </body> </html>

Text u HTML-u Tagovi za izradu listi nenumerirana lista: <ul>
Atribut type: <ul type=“disc, circle, square”> numerirane lista: <ol> Atribut type: <ol type=“1, A, a, I, i”> Atribut start: <ol start=“broj”> element liste: <li>

Primjer UL i LI tagova <html> <head>
<title>Primjeri tagova za izradu listi</title> </head> <body> Nenumerirane liste <ul> <li>HTML</li> <li>Dreamweaver</li> <li>Flash</li> <li>Multimedia</li> <li>Photoshop</li> <li>JavaScript</li> </ul> Primjetit razmak iznad i ispod liste! </body> </html>

Primjer OL i LI tagova <html> <head>
<title>Primjeri tagova za izradu listi</title> </head> <body> Numerirane liste <ol> <li>HTML</li> <li>Dreamweaver</li> <li>Flash</li> <li>Multimedia</li> <li>Photoshop</li> <li>JavaScript</li> </ol> Primjetit razmak iznad i ispod liste! </body> </html>

Slika u HTML-u 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” />

Primjer IMG <html> <head>
<title>Primjer IMG taga</title> </head> <body> <p>Evo jedna staticna slika:<img src="zemlja.jpeg" /></p> <p>A sad evo jedne pomicne:<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. </p> <p><img src="nagrada.jpeg" alt="nagrada" align="right"> Poravnava sliku s desne strane teksta i dopusta vise linija teksta oko slike. </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>

Postavljanje pozadine
<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>

Primjer loše pozadine <html> <head>
<title>Primjer postavljanja slike kao pozadine</title> </head> <body background=“losapozadina.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>

Linkovi Za izradu linka koristi se tag <a> sa atributima:
href – najvažniji atribut, sadrži adresu dokumenta, target – mjesto otvaranja novog dokumenta, title – naslov linka. Link je veza prema: drugom dokumentu na istom računalu <a href=“stranica2.html”>Link</a> drugom dokumentu negdje na Internetu <a href=“ pretincu <a </a>

Primjer A <html> <head>
<title>Primjer A taga</title> </head> <body> <p>Izrada linka moguca je tagom a! <a href="stranica2.html">Link</a> Primjetiti da A tag NE stvara paragraf! </p> <p>Ovo je link na stranice Privatne Jezicne Gimnazije <a href=" <p> <a </a> autoru </body> </html>

Otvaranje linka u novom prozoru
<html> <head> <title>Primjer A taga - otvaranje linka u novom prozoru</title> </head> <body> Za otvaranje linka u novom prozoru potrebno je dodati target atribut sa vrijednosti _blank <p> Ovo je link na stranice Privatne Jezicne Gimnazije <a href=" target="_blank">Pitagora</a> koje ce se otvoriti u novom prozoru! </p> </body> </html>

Slika kao link <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=" src="logo-pitagora.jpeg" /></a> </p> </body> </html>

Mijenjanje boje linka <html> <head> <title>
<body link="green" alink="#cc6600" vlink="fuchsia"> Atributima taga body mijenjamo 3 stanja linka. <ol> <li> atribut link - boja <a href="stranica1.html">neposjecenog</a> linka</li> <li> atribut alink - boja <a href="stranica2.html">aktivnog</a> linka</li> <li> atribut vlink - boja <a href="stranica3.html">posjecenog</a> linka</li> </ol> </body> </html>

Interni linkovi linkovi unutar iste stranice
koristi se kod dužih stranica ... <a name="izbornik"></a> <a href="#izbornik">Izbornik</a> označimo dio stranice pomoću name atributa taga <a> napravimo link na označeni dio slično kao “obični” link; umjesto imena datoteke stavimo znak # i ime internog linka

Tablica <table> 6 5 4 3 2 1 </table> <tr> <td>

Primjer tablica <html> <head> <title> Tablica
<body> 3 su taga odgovorna za izradu tablice: TABLE, TR i TD. <table border="1"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <td>4</td> <td>5</td> <td>6</td> </table> </body> </html>

Tablica <table> 6 5 4 3 12 </table> <tr>
<td colspan=“2”> </td> <td> </td> </tr> </tr> <tr> <td> </td> <td> </td> <td> </td> </table>

Primjer tablica - colspan
<html> <head> <title> Tablica </title> </head> <body> Atribut <b>colspan</b> taga <b>td</b> spaja horizontalne celije. <table border="1"> <tr> <td colspan="2">12</td> <td>3</td> </tr> <td>4</td> <td>5</td> <td>6</td> </table> </body> </html>

Tablica <table> 6 5 3 2 14 </table> <tr> <td>
<td rowspan=“2”> <td> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </td> </table>

Primjer tablica - rowspan
<html> <head> <title> Tablica </title> </head> <body> Atribut <b>rowspan</b> taga <b>td</b> spaja vertikalne celije. <table border="1"> <tr> <td rowspan="2">14</td> <td>2</td> <td>3</td> </tr> <td>5</td> <td>6</td> </table> </body> </html>

Tablica Atributi (TABLE) border=“broj”
(TD) rowspan=“broj”, colspan=“broj” (TABLE) cellspacing=“broj” (TABLE) cellpadding=“broj” (TABLE, TD, TR) align=“center; left; right” (TD, TR) valign=“middle; top; bottom” (TABLE, TD, TR) width=“broj”, height=“broj” (TABLE, TD, TR) bgcolor=“boja”, background=“file”

Primjer tablica – dimenzije i poravnanje
<html> <head> <title>Tablica - sirina i visina</title> </head> <body> <table width="50%" height="200" border="5" align="center"> <tr height="25%"> <td>1</td> <td>2</td> </tr> <tr align="right"> <td width="30%">3</td> <td>4</td> <tr align="center" valign="top"> <td>5</td> <td valign="bottom">6</td> </table> </body> </html>

Primjer tablica - okvir
<html> <head> <title>Tablica - razmak medju celijama</title> </head> <body> <table border="5" cellpadding="10" cellspacing="30" align="center"> <tr> <td>1</td> <td>2</td> </tr> <td>3</td> <td>4</td> </table> </body> </html> cellspacing cellpadding border

Primjer tablica – podloga
<html> <head> <title>Tablica - podloga tablice</title> </head> <body> <table width="300" height="100" border="1" align="center" background="pozadina.jpeg"> <tr > <td>1</td> <td>2</td> </tr> <tr bgcolor="cyan"> <td>3</td> <td>4</td> <tr> <td>5</td> <td>6</td> </table> </body> </html>

Formulari Formularom omogućavamo korisniku unos različitih informacija
Elementi HTML formulara su: tekstualno polje (textfield)‏ polje za unos lozinki (password)‏ radio botuni checkbox izbornik (select)‏ komandni botuni (button)‏ prostor za unos teksta (textarea)‏

Formulari - Glavni tag za izradu formulara je <form> - definira početak i kraj formulara - Svi tagovi za izradu elemenata formulara moraju se nalaziti unutar <form> taga! <form> .... </form>

Formulari Atributi <form> taga name=“ime” action=“URL”
method=“get; post” <form name=“identifikacija” action=“obrada.asp” method=“get”> .... </form> Obrada.asp

Metode slanja podataka
Metoda slanja GET podaci su vidljivi na adresnoj traci browsera ograničena količina podataka koja se može prenijeti ne podržava enkripciju podataka moguće stranicu sa zahtjevom spremiti u Favorites grupu podržava samo tekst <form action="obrada.asp" method="get" name=“identifikacija"> .... </form>

Metode slanja podataka
Metoda slanja POST podaci nisu vidljivi na adresnoj traci browsera nema ograničenja na količinu podataka koja se može prenijeti podatke je moguće kriptirati prije slanja ne postoji mogućnost spremanja zahtjeva u Favorites grupu podržava i slanje datoteka, ne samo teksta <form action="obrada.asp" method=“post" name=“identifikacija"> .... </form>

Tagovi za izradu elemenata formulara
<input type=“...” /> text (maxlength, size, name, value)‏ password (maxlength, size, name, value)‏ hidden (name, value)‏ checkbox (checked, name, value)‏ radio (checked, name, value)‏ submit, reset, button (name, value)‏ <select> (multiple, name, size)‏ <option> (selected, value)‏ <textarea> (cols, rows, name)‏

Tekstualno polje i polje za unos lozinke
Izrada tekstualnog polja tag <input type=“text” /> Izrada polja za unos lozinke tag <input type=“password” /> Dodatni atributi uz <input type=“text/password” /> name=“ime” ime tekstualnog polja (nužno sa slanje!)‏ size=“broj” veličina maxlength=“broj” maksimalan broj znakova koji se može upisati value=“tekst” početna vrijedost Primjer – polje nazvano JMBG, veličine 15 mjesta od kojih je dopušteno upisati 13, u početku popunjeno sa <input type=“text” name =“JMBG” value=“ ” size=“15” maxlength=“13” />

Komandni botuni Izrada komandnog botuna
za slanje podataka: tag <input type=“submit” /> za poništavanje unosa: tag <input type=“reset” /> programabilan: tag <input type=“button” /> Dodatni atributi uz <input type=“submit;reset;button” /> name=“ime” ime botuna value=“tekst” tekst koji će na botunu pisati Primjer – botun imena botun1 za slanje podataka s natpisom “Šalji!” <input type=“submit” name=“botun1” value=“Šalji!” />

Vježba Zadatak: napraviti HTML stranicu sa formularom koja serveru šalje ime korisnika skripta za prikupljanje podataka ima slijedeće parametre: adresa: metoda slanja koju podržava: GET nužni elementi: tekstualno polje imena ‘ime’ botun za slanje

Radio button i checkbox
Izrada radiobuttona tag <input type=“radio” /> Izrada checkboxa tag <input type=“checkbox” /> Dodatni atributi uz <input type=“radio;checkbox” /> name=“ime” ime elementa value=“tekst” vrijedost koja će se poslati stranici za obradu checked=“checked” checkbox ili radiobutton je inicijalno odabran Primjer – checkbox nazvan auto, u slučaju da ga korisnik uključi, stranica za obradu primit će vrijedost auto=da; u startu uključeno <input type=“checkbox” name =“auto” value=“da” checked=“checked” />Vlastito auto

Primjer formulara <html> <head>
<title>Primjer radiobuttona i checkboxa</title> </head> <body> <form action="obrada.asp" method="get" name=“anketa"> <p>Spol: <br> <input name="spol" type="radio" value="muski" checked> Muskarac <br> <input name="spol" type="radio" value="zenski"> Zena </p> <p>Strani jezici:<br> <input name="jezik1" type="checkbox" value="eng" checked> engleski<br> <input name="jezik2" type="checkbox" value="fra"> francuski<br> <input name="jezik3" type="checkbox" value="tal"> talijanski </form> </body> </html>

Izbornici Izrada izbornika Dodatni atributi <select> taga:
tag <select> tag <option> <select name=“os”> <option value=“win95”>Windows 95</option> <option value=“win98”>Windows 98</option> </select> <select size=“4” name=“programi”> <option value=“word”>Microsoft Word</option> <option value=“excel”>Microsoft Excel</option> </select> Dodatni atributi <select> taga: name=“ime” ime izbornika size=“broj” broj redaka (ukoliko nije navedeno imamo padajuću listu)‏ multiple=“multiple” omogućava odabir više od jedne mogućnosti Dodatni atributi <option> taga: value=“tekst” vrijedost koja će se poslati stranici za obradu selected =“selected” definira inicijalni odabir (default)‏

<title>Primjer izbornika</title> </head> <body> <form action="obrada.asp" method="get" name=“anketa"> <p>Odaberite programe koje znate koristiti: <select name="programi" size="4" multiple> <option value="word">Microsoft Word</option> <option value="excel">Microsoft Excel</option> <option value="powerpoint">Microsoft PowerPoint</option> <option value="corel">CoreDRAW!</option> <option value="photoshop">Adobe Photoshop</option> <option value="indesign">Adobe InDesign</option> <option value="3d">3D Studio MAX</option> </select> </p> <p>Koji operacijski sustav imate? <select name="os"> <option value="win95">Windows 95</option> <option value="win98">Windows 98</option> <option value="win2k">Windows 2000</option> <option value="winXP" selected>Windows XP</option> <option value="mac">MacOS X</option> <option value="lin">Linux</option> </form> </body> </html>

Prostor za unos teksta (textarea)‏
Moguće pisanje dužeg teksta tag <textarea> <textarea> Bilo kakav duzi tekst </textarea > Dodatni atributi <textarea> taga: name=“ime” ime prostora za unos cols=“broj” broj redaka rows=“broj” broj stupaca Izrada skrivenog elementa <input name="adresa" type="hidden"

<title>Primjer botuna</title> </head> <body> <form action="obrada.asp" method="get" name=“komentar"> <p>Molim vas komentar: <textarea name="komentar" cols="20" rows="4">samo budite pristojni</textarea> <input name="adresa" type="hidden" </p> <p> <input name="mojbotun" type="button" value="Botun po izboru"> <input name="botun_ponisti" type="reset" value="Reset - Ponisti"> <input name="botun_salji" type="submit" value="Submit - Posalji"> <p>Komentar ce biti poslan na autora.</p> </form> </body> </html>

Domaći rad Zadatak: Ostalo Ispis na ekranu
napraviti HTML stranicu sa formularom (po zadanom primjeru)‏ skripta za prikupljanje podataka ima slijedeće parametre: adresa: metoda slanja koju podržava: GET nužni elementi: max 7 znamenki default 021 default Tajnica Ostalo upisan broj telefon texbox 01, 020, 021, 022, 023 itd... ZG, DU, ST, SI, ZD itd.. pozivni padajući izbornik Tajnica, Programer, Dizajner, Generalni direktor, Tajkun tajn, prog, diz, dir, tajk radnomj esto upisan tekst prezime textbox ime Ispis na ekranu Vrijednost koju šalje serveru Ime Tip

Vrijednost koju šalje serveru Ime Tip
Ponisti Posalji Engleski, Talijanski itd... Ispis na ekranu default da da, ne iskustvo radiobutton reset button submit button dimenzije 4x20 upisan tekst komentar textarea default eng, visine 4 retka eng, ita, nje, fra, spa, rus, ces jezici[] menu da checkbox web excel word windows max 2 znamenke upisan broj godineiskust va textbox Ostalo Vrijednost koju šalje serveru Ime Tip

Frameset Što je frameset? Prednosti Mane
poseban HTML dokument kod kojeg je prozor browsera podijeljen na više dijelova u svakom dijelu moguće je prikazati drugi HTML dokument Prednosti svaki dio prozora ima svoje klizače moguće je prikazati sadržaj sa različitih web adresa dio prozora može uvijek biti fiksan Mane kompliciraniji za izradu problemi sa spremanjem u Favorites grupu mogući problemi sa pretraživačima Interneta

Frameset Kako izgleda frameset dokument? Zelena.html Plava.html
Frameset1.html

Frameset dokument Karakteristike
Frameset dokument nema <body>...</body> dio! Umjesto njega tu su <frameset>...</frameset> i <noframes>...</noframes> Unutar <frameset>...</frameset> dijela definira se raspored frameova <noframes>...</noframes> dio prikazuje web browser koji nema mogućnost rada sa frameovima (danas takav browser ne postoji)‏ <html> <head> <title>Frameset</title> </head> <frameset cols=“50%,50%"> <frame name="lijevi" src="zelena.html"> <frame name="desni" src="plava.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html> Frameset1.html

Primjer frameset <html> <head>
<title>Frameset</title> </head> <frameset rows=“*,*"> <frame name="gornji" src="zelena.html"> <frame name="donji" src="plava.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

<title>Frameset</title> </head> <frameset rows="2*,*" cols="25%,75%"> <frame name="lijevi_gore" src="zelena.html"> <frame name="desni_gore" src="plava.html"> <frame name="lijevi_dolje" src="crvena.html"> <frame name="desni_dolje" src="zuta.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

<title>Frameset</title> </head> <frameset cols="150,200,100,*"> <frame name="prvi" src="zelena.html"> <frame name="drugi" src="plava.html"> <frame name="treci" src="crvena.html"> <frame name="cetvrti" src="zuta.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

<title>Frameset</title> </head> <frameset cols="200,50%,*"> <frame name="prvi" src="zelena.html"> <frame name="drugi" src="plava.html"> <frame name="treci" src="crvena.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

<title>Frameset</title> </head> <frameset rows="*,*"> <frame name="gornji" src="zelena.html" > <frameset cols="*,*"> <frame name="lijevi" src="plava.html"> <frame name="desni" src="zuta.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

Frameset Dodatni atributi taga <frameset>:
cols=“broj; postotak; *” rows=“broj; postotak; *” frameborder=“1;0” framespacing=“pixels”

Frameset Dodatni atributi taga <frame>: name=“ime” src=“URL”
frameborder=“1;0” scrolling=“yes;no;auto” noresize=“noresize” marginwidth=“broj” marginheight=“broj”

<title>Frameset</title> </head> <frameset cols="*,*" frameborder="0" framespacing="0"> <frame name="lijevi" src="zelena.html"> <frame name="desni" src="plava.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

<title>Frameset</title> </head> <frameset rows="*,*" cols="*,*" frameborder="1" framespacing="15" bordercolor="#3333CC"> <frame name="lijevi_gore" src="zelena.html"> <frame name="desni_gore" src="plava.html"> <frame name="lijevi_dolje" src="crvena.html"> <frame name="desni_dolje" src="zuta.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

<title>Frameset</title> </head> <frameset cols="*,*"> <frame name="lijevi" src="zelena.html" scrolling="YES" noresize> <frame name="desni" src="plava.html"> </frameset> <noframes> Vas browser ne podrzava frameove! </noframes> </html>

Frameovi i linkovi Podsjećanje na linkove:
<a href=“stranica2.html”>Slijedeća stranica</a> Otvaranje stranice u novom prozoru: <a href=“stranica2.html” target=“_blank”>Slijedeća stranica</a> Otvaranje stranice u željenom frameu: <a href=“stranica2.html” target=“ime_framea”>Slijedeća stranica</a>

Frameovi i linkovi <html> <head> <title>Primjer frameset i link</title> </head> <frameset cols="180,*" frameborder="no"> <frame name="lijevi" src="bijela.html" noresize scrolling="no"> <frame name="desni" src="crvena.html"> </frameset> </html> bijela.html .... <a href="crvena.html" target="desni">CRVENA</a>

Inline frame Frame je moguce postaviti bilo gdje u dokumentu pomoću taga <iframe>: name=“ime” src=“URL” frameborder=“1;0” scrolling=“yes;no;auto” marginwidth=“broj” marginheight=“broj” width=“broj” height=“broj” <iframe src="stranica.html" width="400" height="300"> Vaš browser ne podržava unutrašnje frameove </iframe>

Meta tagovi Čemu služi <meta> tag?
dodaje različite informacije o stranici piše se isključivo unutar zaglavlja HTML dokumenta generalni oblik: <meta name=“naredba” content=“vrijednost”> Neke vrijednosti name atributa: <meta name=“author” content=“ime autora ili tima”> <meta name=“description” content=“kratak opis stranice”> <meta name=“keywords” content=“ključne riječi kojima se sadržaj stranice da opisati”> <meta name=“copyright” content=“podaci o (eventualno) zaštićenoj stranici”> <meta name=“generator” content=“ime programa u kojem je stranica izrađena”> <meta name=“robots” content=“all,none,index,noindex,follow,nofollow,noarchive”> Primjer – izrada web-stranica tvrtke koja se bavi prodajom namještaja <html> <head> <title>Ekstra Interijeri d.o.o.</title> <meta name="description" content=“Pregled ponude namještaja tvrtke Ekstra Interijeri"> <meta name="keywords" content=“namještaj, prodaja, kuhinje, sobe, oprema, stan"> </head> <body> </body> </html> Kako radi Google?

Meta tagovi Druga vrsta <meta> tagova:
kontroliraju manipuliranje stranice od strane web browsera generalni oblik: <meta http-equiv=“naredba” content=“vrijednost”> Moguće vrijednosti http-equiv atributa: <meta http-equiv=“refresh” content=“broj sekundi nakon kojih browser ponovno zatraži stranicu”> <meta http-equiv=“expires” content=“datum kada sadržaj stranice više nije važeći”> mora biti u obliku “Wed, 26 Feb :21:57 GMT” <meta http-equiv=“pragma” content=“no-cache”> <meta http-equiv=“Content-Type” content=“informacije o vrsti teksta na stranici”> <meta http-equiv=“Content-Language” content=“kod jezika na kojem je sadržaj stranice”> Primjer – web-stranica sportske kladionice <html> <head> <title>Kladionica Profit</title> <meta name="description" content="On-line sportska kladionica sa najvećim koeficijentima"> <meta name="keywords" content="sport, klađenje, kladionica, nogomet, tenis, dobitak"> <meta http-equiv="refresh" content="120"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="Content-Type" content="text/html; charset=iso "> <meta http-equiv="Content-Language" content="hr"> </head> <body> ... </body> </html>

Uvod u Internet ARPA-Net  Internet IP adrese / DNS TCP/IP Routing

Similar presentations

Presentation on theme: "Uvod u Internet ARPA-Net  Internet IP adrese / DNS TCP/IP Routing"— Presentation transcript:

Similar presentations

About project

Feedback

Log in

Auth with social network:

Uvod u Internet ARPA-Net  Internet IP adrese / DNS TCP/IP Routing

Similar presentations

Presentation on theme: "Uvod u Internet ARPA-Net  Internet IP adrese / DNS TCP/IP Routing"— Presentation transcript:

Similar presentations

About project

Feedback