Bosna i Hercegovina


switch Lista naslova:

#1 22.02.2011-00:42
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Korisni primjeri*
U ovoj temi bit ce prikazani neki primjeri koji se ticu html koda i css- koji je skoro neizbjezan kada je u pitanju pisanje html koda.
Kod mozete prekopirati u napr. notepat de ga zapisati pod ekstenzijom html.
Primjer:
Proba.html.
Poslije ga mozete podici o nekom Browseru koji koristite.

Ukoliko dodje do nekih nejasnoca mozete postaviti novu temu sa pitanjem u ovom forumu.
Pitanja nemojte postavljati u ovoj temi jer ce biti izbrisana.
Pozdrav
Ovaj komentar je mijenjan 3 puta. zadnja izmjena 30.01.2015-20:07 od strane zxz. ↑  ↓

#2 26.02.2011-00:10
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Skrol bar
Primjer skrol bara.
DownloadIzvorni kod (HTML):
  1. <META NAME="generator" CONTENT="toniarts easyhtml v.2.4">
  2. <TITLE>Title of your page</TITLE>
  3. </HEAD>
  4.  <div style="height:120px;width:250px;font:12px/15px Serif;overflow:scroll;">
  5. Kina je lansirala svoju kartografsku uslugu "Map world", koja je dostupna samo preko web navigatora.
  6. Ona omoguava da se "preleti" svijetom i zumiraju oblasti na Zemlji kako bi se pristupilo satelitskim kartama ili fotografijama, objavili su francuski elektronski mediji.
  7. Uslugom upravlja državna Kancelarija za obavljanje istraga i kartografiju koja je pod okriljem vlade.
  8. </div>
  9. </BODY>
  10. </HTML>

Pozdrav
↑  ↓

#3 26.02.2011-00:25
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Tekst preko slike
Primjer teksta upisanog preko slike.
DownloadIzvorni kod (HTML):
  1. <META NAME="generator" CONTENT="toniarts easyhtml v.2.4">
  2. <TITLE>Title of your page</TITLE>
  3. </HEAD>
  4. <form action="form" method="post">
  5. <textarea name="comments" id="comments" style="width:330px;height:221px; background:url('http://www.zivotinjsko-carstvo.com/divljina/slike/puma.jpg');">
  6. <B>Neki tekst preko slike</B>
  7. </form>
  8.  
  9. </BODY>
  10. </HTML>

Pozdrav
↑  ↓

#4 28.02.2011-22:46
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Primjer sa tabelama
Primjer- tabela
DownloadIzvorni kod (HTML):
  1. <META NAME="generator" CONTENT="tabela">
  2. <TITLE>Tabela primjer</TITLE>
  3. </HEAD>
  4.  <table width="400px" border="0">
  5.   <tr>
  6.     <td colspan="2" style="background-color:yellow;">
  7.       Header
  8.     </td>
  9.   </tr>
  10.   <tr>
  11.     <td style="background-color:orange;width:100px;text-align:top;">
  12.       Left menu<br />
  13.       Item 1<br />
  14.       Item 2<br />
  15.       Item 3...
  16.     </td>
  17.     <td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;">
  18.       Main body
  19.     </td>
  20.   </tr>
  21.   <tr>
  22.     <td colspan="2" style="background-color:yellow;">
  23.       Footer
  24.     </td>
  25.   </tr>
  26. </BODY>
  27. </HTML>

Pozdrav
↑  ↓

#5 09.03.2011-20:06
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Ispisivanje linije
DownloadIzvorni kod (HTML):
  1. <META NAME="generator" CONTENT="nnnn">
  2. <TITLE>Title of your page</TITLE>
  3. </HEAD>
  4.  <hr width="50%"  color= "#600060"/>
  5.  <hr width="90%" size="10" height="8" noshade="noshade" color= "#600060"/>
  6. </BODY>
  7. </HTML>

Pozdrav
↑  ↓

#6 09.03.2011-20:28
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: List elementi dl dd i dt
DownloadIzvorni kod (HTML):
  1. <META NAME="generator" CONTENT="nnnnnnnnn">
  2. <TITLE>Title of your page</TITLE>
  3. </HEAD>
  4.  <dl>
  5.  <dt>Pasus</dt>
  6.  <dd>uvuceni tekst  tekst sa pasusom<dl>
  7.    <dt>Pasus u pasusus</dt>
  8.    <dd>Uvuceni tekst u drugom pasusu</dd>
  9.    <dt>drugi pasus u pasusu</dt>
  10.    <dd>Uvuceni tekst pasusa u pasusu i trebalo bi nakucati da ima dva reda da se vidi da je i drugi red uvucen. To ovissi koliki vam je prozor a prozor pocesto ovisi o velicini monitora mada se prozor moze suziti da bi se to vidjelo</dd>
  11.   </dl>
  12.  </dd>
  13. </dl>
  14. </BODY>
  15. </HTML>

Pozdrav
↑  ↓

#7 23.05.2012-00:30
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Formular za kontakt
Najefikasniji način za slanje podataka s formulara na mail adresu jest korištenje neke CGI skripte koju je vaš hosting provider već instalirao na serveru. Evo što morate učiniti:

Trebate postaviti formular na web stranicu i u njemu degfinirati gdje je instalirana skripta koja šalje podatke s formulara na mail. U formularu ćete također odrediti na koju e-mail adresu će podaci biti poslani. Evo primjera vrlo jednostavnog formulara koji sadrži samo tekstualni okvir za upis komentara i gumb za slanje podataka:
DownloadIzvorni kod (HTML):
  1. <TITLE>Title of your page</TITLE>
  2. </HEAD>
  3.  <FORM METHOD="POST" ACTION="URL">
  4. <input type="hidden"
  5. name="recipient"
  6. value="neka@emailadresa.com">
  7.  <p>Pošaljite nam svoje komentare!</p>
  8. <textarea name="textfield" cols="50" rows="7">
  9. <input type="submit"
  10. name="Submit2"
  11. value="Pošalji">
  12. </FORM>
  13. </BODY>
  14. </HTML>

Da bi neki formular radio na vašoj domeni, potrebno je izmijeniti samo dvije stvari:
Kod atributa ACTION="URL" umjesto "URL" upišite lokaciju na kojoj je instalirana skripta. Ako skriptu niste instalirali sami ili ne znate lokaciju skripte, kontaktirajte službu za korisnike vašeg hosting providera i zamolite djelatnika da vam kaže što morate upisati kao lokaciju ove skripte. Lokacija je zapravo web adresa koja može izgledati ovako: http://www.nekiurl.com/...ormMail.pl
Kod atributa VALUE="neka@emailadresa.com" upišite email adresu na koju želite primiti podatke upisane u formular.

Ovo je primjer jednostavnog formulara koji sadrži samo okvir za upis teksta i kog možete koristiti za primanje komentara, sugestija, kritika od vaših posjetitelja. Vi, međutim, možete ovaj formular promijeniti i dodati mu druge elemente poput polja za unos e-mail adrese, imena i prezimena; možete promijeniti izgled formulara ili odrediti još neka svojstva formulara.
Pozdrav
↑  ↓

#8 30.01.2015-20:04
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Pravljenje menija
DownloadIzvorni kod (HTML):
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3.   <head>
  4.  
  5.     <title>Navigation</title>
  6.     <style type="text/css" media="screen">
  7.  
  8. body { text-align:center; background:#a8cff0; font-size:90%; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0; }
  9.  #page { width:50em; text-align:left; background:#FFF; border:4px solid #ecf3f9; margin:32px auto; padding:2em; }
  10. h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }
  11. .clear { clear:both; }
  12.  
  13.           /*###################*/
  14.  
  15.           /* Navigacija */
  16.  
  17.           /*###################*/
  18.  
  19. #navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */
  20. #navi li { width:128px; float:left; } /* Horizontale Anordnung */
  21. #navi li ul { display:none; } /* Normalzustand eingeklappt */
  22. #navi li:hover ul { display:block; } /* Ausgeklappt */
  23.  
  24.       /*###################*/
  25.  
  26.           /* Stil */
  27.  
  28.        /*###################*/
  29. #navcontainer { height:16px; position:relative; }
  30. #navi { position:absolute; }
  31. #navi li { border:1px solid #000; margin:0 32px 0 0; }
  32. #navi ul li { border:none; margin:0; }
  33. #navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }
  34. #navi a:link, #navi a:visited { color:#FFF; background:#A8CFF0; text-decoration:underline; }
  35. #navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }
  36. <!--[if lte IE 6]>
  37. <style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
  38. <![endif]-->
  39. </head>
  40.  <body>
  41. <div id="page">
  42. <h1>Navigacioni meni</h1>
  43. <div id="navcontainer">
  44. <ul id="navi">
  45.     <li><a href="ovdje link">Dobro došli</a></li>
  46.     <li><a href="ovdje link">Neki naslov</a>
  47. <ul>
  48.     <li><a href="ovdje link">Nesto</a></li>
  49.     <li><a href="ovdje link">nesto drugo</a></li>
  50.     <li><a href="ovdje link">Nesto</a></li>
  51. </ul>
  52.      </li>
  53.      <li><a href="ovdje link">neki drugi naslov</a>
  54. <ul>
  55.       <li><a href="ovdje link">nesto</a></li>
  56.        <li><a href="ovdje link">nesto</a></li>
  57.        <li><a href="ovdje link">nesto</a></li>
  58. </ul>
  59.       </li>
  60.       <li><a href="ovdje link">Impressum</a></li>
  61. </ul>
  62. </div>
  63.  
  64. <div class="clear"></div>
  65.  
  66. <p>
  67.  CSS (cascading style sheets) nam omogucuje razdvajanje izgleda stranice od njenog sadržaja:
  68.  <li>
  69. informacije s web-stranica nalaze se u HTML datotekama
  70. <li>
  71. podaci o prikazu stranice nalaze se u CSS datotekama
  72. Korištenjem CSS-a definiramo prikaz pojedinih elemenata stranice (npr. da svi naslovi budu u istoj boji i sl.). Možemo takodje definirati i klase, koje odredjuju svojstva nekog elementa (sve elemente oznacene istom klasom tada prikazujemo na isti nacin).
  73. </p>
  74. <p>
  75. Postoje dva CSS standarda: CSS1 iz 1996. i CSS2 iz 1998 godine (sadrži i sva CSS1 svojstva).
  76. Tri su mogunosti korištenja CSS-a:
  77. izrada tekstualne datoteke sa sufiksom .css u koju spremamo podatke o prikazu stranice
  78. datoteke povezujemo sa stranicama na ciji izgled želimo da utjece sljedecim kodom unutar HEAD taga:
  79. <link rel=stilsit type=text/css href=style.css >
  80. CSS ima nasljedna svojstva (npr. td tag ce naslijediti svojstva body taga ukoliko kod njega ta     svojstva nisu posebno definirana)
  81. stil je moguce definirati i u samom kodu HTML stranice, tako da sadržaj CSS datoteke umetnemo unutar STYLE taga (takodjer unutar HEAD taga):
  82. <style type=text/css> ... </style>
  83. klasu definiramo pomocu tacke (npr. .napomena) a pozivamo je pomocu rijeci class unutar pojedinog taga:
  84. </p>
  85. <div class="clear"></div>
  86. </div>
  87. </body>
  88. </html>

Pozdrav
↑  ↓

#9 30.01.2015-20:54
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Stil primjer
DownloadIzvorni kod (HTML):
  1. <!DOCTYPE html>
  2. .mojstil {
  3.     background-color:black;
  4.     color:white;
  5.     margin:20px;
  6.     padding:20px;
  7. }
  8. </head>
  9.  
  10.  
  11. <div class="mojstil">
  12. <h2>Gaza</h2>
  13.  
  14. <p>U Gazi je pokrenuta kampanja u okviru koje stanovnici koji su morali napustiti svoje domove, uljepšavaju i oslikavaju montažne kue u kojima su privremeno smješteni. Stanovnicima podršku pružaju slikari i umjetnici.</p>
  15.  
  16. <p>Slikar Hazim Zemmar u
  17. estvuje u projektu, a kako kaže, ovim projektom žele poslati poruku da je potrebna pomo i podrška stanovnicima koji su ostali bez svojih domova i koji sada žive u montažnim kuama.</p>
  18. <p>Na montažnim kuama tako slikaju razli
  19. ite dezene, meu kojima su i leptiri koji djeci Gaze daju osjeaj slobode i nade, kazao je umjetnik.Dje
  20. ak Ferah Kaddih (9) izrazio je želju da sa porodicom živi u kui koja je dovoljno topla. </p>
  21. <p>Mladi Gaze su kamenje u luci obojili duginim bojama. Na ovaj na
  22. in, pojašnjava Ebu Dahi, mladi Palestinac, žele poslati poruku da "Palestinci žele živjeti u miru i daleko od smrti".</p>
  23. </p>Na kamenju su napisali i "Domovino, tebe smo birali"</p>
  24. </div>
  25. </body>
  26. </html>

Pozdrav
↑  ↓

#10 02.02.2015-01:07
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Sat na stranici
Lijep sat na sa kalendarom sa flash-clocks.com
DownloadIzvorni kod (HTML):
  1. <META NAME="generator" CONTENT="toniarts easyhtml v.2.4">
  2. <TITLE>Sat na vasoj stranici</TITLE>
  3. </HEAD>
  4.  <div id="cal-clock"><embed src=http://flash-clocks.com/free-flash-clocks-blog-topics/free-flash-clock-34.swf width=130 height=130 wmode=transparent type=application/x-shockwave-flash></embed></div>
  5. <div id="adsense" style="position: relative; padding-left: 3px; margin-bottom: -10px">
  6. </BODY>
  7. </HTML>

Pozdrav
↑  ↓

#11 05.02.2015-14:21
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Forma primjer
HTML forme koristimo za unos podataka odnosno upisivanje podataka na server.
HTML forma može sadržavati ulazne elemente kao što je okvir za unos teksta, okvir za unos zaporke, polja potvrde, kružići opcija, gumb pošalji (engl. submit) ili vrati na početno stanje (engl. reset).
Forma može također sadržavati padajući popis, polje za unos teksta (engl. text area) ili opis (engl. label).

Unutar elementa <form> unosimo elemente forme.
Elementi forme omogućuju korisniku da unese neke informacije (tekstualna polja, polja za unos teksta, padajući meniji, potvrdni okviri (check box), itd.)
Forma je definirana tagom <form>.
Atribut method definira način prijenosa parametara unesenih u formi.
Imamo dva nacina-metoda i to:
-GET i
-POST
Metod get dodaje podatke URL-u koji ih prosledjuje serveru. Duzinu URL-a ogranicava klijent.
Nije pogodan za slanje velike kolicine podataka.

Drugi nacin-metod slanja podataka je POST.

Sledeci atribut je action:
Atribut action definira stranicu na koja će se pozvati po završetku unosa odnosno na klik taster sumbit koji treba biti dio forme.
Tag input definira elemente forme.
Tip unosa definiran je atributom type.

Primjer:
DownloadIzvorni kod (HTML):
  1. <title>Primjer forme</title>
  2. </head>
  3. <h2>Forma primjer</h2>
  4. <hr>
  5. <form name="primjer2-a" method="get" action="unos.php">
  6. <label>Ime</label>
  7. <input name="ime" type="text" >
  8. <label>Prezime</label>
  9. <input name="prezime" type="text" >
  10. <br>
  11. <input name="submit" type="submit" value="Zapisi">
  12. </form>
  13. </body>
  14. </html>
Ovo gore zapisite kao html:
DownloadIzvorni kod (PHP):
  1. <?php
  2. echo "Pozdrav " . $_GET["ime"]. " ". $_GET[prezime];
  3. ?>
a ovo zapisite pod imenom unos.php
Pozdrav
↑  ↓

#12 11.02.2015-23:20
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Procedura na on load stranice
DownloadIzvorni kod (HTML):
  1. <script language="javascript" type="text/javascript">
  2. function MojaProcedura() {
  3.     alert("Pozdrav i dobro dosli!");
  4. }
  5. <title>Procedura na on load</title>
  6. </head>
  7. <body onload="MojaProcedura()">
  8. Nesto na stranici
  9. </body>
  10. </html>

Pozdrav
↑  ↓

#13 15.02.2015-17:07
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Google pretraga
DownloadIzvorni kod (HTML):
  1. <TITLE>Gogole pretraga</TITLE>
  2. </HEAD>
  3. <FORM method=GET action="http://www.google.com/search">
  4. <TABLE bgcolor="#FFFFFF"><tr><td>
  5. <A HREF="http://www.google.com/">
  6. <IMG border="0" SRC="http://www.google.com/logos/Logo_40wht.gif" <br></A>
  7. <INPUT TYPE=text name=q size=31 maxlength=255 value="">
  8. <INPUT TYPE=hidden name=hl value="en">
  9. <INPUT type=submit name=btnG VALUE="Trazi na google">
  10. </td></tr></TABLE>
  11. </FORM>
  12. <span></a></font>
  13. </BODY>
  14. </HTML>

Pozdrav
Ovaj komentar je mijenjan 1 puta. zadnja izmjena 15.02.2015-17:08 od strane zxz. ↑  ↓

#14 28.02.2015-13:36
zxz Offline
Administrator
Registrovan/a od: 03.02.2009-16:22
Komentari: 8,982


Subject: Skok na odredjeni odjeljak
Skakanje na odredjeni paragraf u kontroli tekst area.
Ovo je zgodno ako imate malo vise teksta pa mozete imati sa strane ili odozgo meni za skok na odredjeni odjeljak.
DownloadIzvorni kod (HTML):
  1. </head>
  2. <div style="float:left; margin-right:15px; width:150px; margin-top: 20px">
  3.         <ul  id="verticalspymenu" class="shadowblockmenu-v">
  4.         <li><a href="#para1">Paragraf1</a></li>
  5.         <li><a href="#para2">Paragraf2</a></li>
  6.         <li><a href="#para3">Paragraf3</a></li>
  7.         <li><a href="#para4">Paragraf4</a></li>
  8.         </ul>
  9. <br />
  10. </div>
  11.  
  12. <div id="container" style="width:500px; height:200px; overflow-y:scroll;
  13. border:1px solid gray; font:bold 18px Arial; float:left; background:green;
  14. position:relative; margin-top: 20px">
  15.         <p id="para1" style="height:400px; background:#d5e9b2">Nekakav tekst u paragrafu1</p>
  16.         <p id="para2" style="height:600px; background:#f7de90">Tekst u paragrafu 2</p>
  17.         <p id="para3" style="height:700px; background:#9af5ed">Tekst u paragrafu 3</p>
  18.         <p id="para4" style="height:500px; background:#fbd0e3">Tekast u paragrafu4</p>
  19. </div>
  20. </body>
  21. </html>

Pozdrav
↑  ↓

Stranice (1): 1


All times are GMT +01:00. Current time: 27.02.2017-05:21.