zxz 22.02.2011 01:42
Predmet: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.

zxz 30.01.2015 21:54
Predmet:Stil primjer

PreuzmiIzvorni kôd (HTML):
  1. <!DOCTYPE html>
  5. .mojstil {
  6.     background-color:black;
  7.     color:white;
  8.     margin:20px;
  9.     padding:20px;
  10. }
  12. </head>
  13.  
  15.  
  16. <div class="mojstil">
  17. <h2>Gaza</h2>
  18.  
  19. <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>
  20.  
  21. <p>Slikar Hazim Zemmar u
  22. 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>
  23. <p>Na montažnim kuama tako slikaju razli
  24. ite dezene, meu kojima su i leptiri koji djeci Gaze daju osjeaj slobode i nade, kazao je umjetnik.Dje
  25. ak Ferah Kaddih (9) izrazio je želju da sa porodicom živi u kui koja je dovoljno topla. </p>
  26. <p>Mladi Gaze su kamenje u luci obojili duginim bojama. Na ovaj na
  27. in, pojašnjava Ebu Dahi, mladi Palestinac, žele poslati poruku da "Palestinci žele živjeti u miru i daleko od smrti".</p>
  28. </p>Na kamenju su napisali i "Domovino, tebe smo birali"</p>
  29. </div>
  30. </body>
  31. </html>

zxz 26.02.2011 01:10
Predmet:Skrol bar

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

zxz 26.02.2011 01:25
Predmet:Tekst preko slike

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

zxz 28.02.2011 23:46
Predmet:Primjer sa tabelama

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

zxz 09.03.2011 21:06
Predmet:Ispisivanje linije

PreuzmiIzvorni kôd (HTML):
  3. <META NAME="generator" CONTENT="nnnn">
  4. <TITLE>Title of your page</TITLE>
  5. </HEAD>
  7.  <hr width="50%"  color= "#600060"/>
  8.  <hr width="90%" size="10" height="8" noshade="noshade" color= "#600060"/>
  9. </BODY>
  10. </HTML>

zxz 09.03.2011 21:28
Predmet:List elementi dl dd i dt

PreuzmiIzvorni kôd (HTML):
  3. <META NAME="generator" CONTENT="nnnnnnnnn">
  4. <TITLE>Title of your page</TITLE>
  5. </HEAD>
  7.  <dl>
  8.  <dt>Pasus</dt>
  9.  <dd>uvuceni tekst  tekst sa pasusom<dl>
  10.    <dt>Pasus u pasusus</dt>
  11.    <dd>Uvuceni tekst u drugom pasusu</dd>
  12.    <dt>drugi pasus u pasusu</dt>
  13.    <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>
  14.   </dl>
  15.  </dd>
  16. </dl>
  17. </BODY>
  18. </HTML>

zxz 23.05.2012 01:30
Predmet: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:
PreuzmiIzvorni kôd (HTML):
  3. <TITLE>Title of your page</TITLE>
  4. </HEAD>
  6.  <FORM METHOD="POST" ACTION="URL">
  7. <input type="hidden"
  8. name="recipient"
  9. value="neka@emailadresa.com">
  10.  <p>PoÅ¡aljite nam svoje komentare!</p>
  11. <textarea name="textfield" cols="50" rows="7">
  13. <input type="submit"
  14. name="Submit2"
  15. value="Pošalji">
  16. </FORM>
  17. </BODY>
  18. </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.

zxz 30.01.2015 21:04
Predmet:Pravljenje menija

PreuzmiIzvorni kôd (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; }
  37. <!--[if lte IE 6]>
  38. <style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
  39. <![endif]-->
  40. </head>
  41.  <body>
  42. <div id="page">
  43. <h1>Navigacioni meni</h1>
  44. <div id="navcontainer">
  45. <ul id="navi">
  46.     <li><a href="ovdje link">Dobro doÅ¡li</a></li>
  47.     <li><a href="ovdje link">Neki naslov</a>
  48. <ul>
  49.     <li><a href="ovdje link">Nesto</a></li>
  50.     <li><a href="ovdje link">nesto drugo</a></li>
  51.     <li><a href="ovdje link">Nesto</a></li>
  52. </ul>
  53.      </li>
  54.      <li><a href="ovdje link">neki drugi naslov</a>
  55. <ul>
  56.       <li><a href="ovdje link">nesto</a></li>
  57.        <li><a href="ovdje link">nesto</a></li>
  58.        <li><a href="ovdje link">nesto</a></li>
  59. </ul>
  60.       </li>
  61.       <li><a href="ovdje link">Impressum</a></li>
  62. </ul>
  63. </div>
  64.  
  65. <div class="clear"></div>
  66.  
  67. <p>
  68.  CSS (cascading style sheets) nam omogucuje razdvajanje izgleda stranice od njenog sadržaja:
  69.  <li>
  70. informacije s web-stranica nalaze se u HTML datotekama
  71. <li>
  72. podaci o prikazu stranice nalaze se u CSS datotekama
  73. 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).
  74. </p>
  75. <p>
  76. Postoje dva CSS standarda: CSS1 iz 1996. i CSS2 iz 1998 godine (sadrži i sva CSS1 svojstva).
  77. Tri su mogunosti korištenja CSS-a:
  78. izrada tekstualne datoteke sa sufiksom .css u koju spremamo podatke o prikazu stranice
  79. datoteke povezujemo sa stranicama na ciji izgled želimo da utjece sljedecim kodom unutar HEAD taga:
  80. <link rel=stilsit type=text/css href=style.css >
  81. CSS ima nasljedna svojstva (npr. td tag ce naslijediti svojstva body taga ukoliko kod njega ta     svojstva nisu posebno definirana)
  82. stil je moguce definirati i u samom kodu HTML stranice, tako da sadržaj CSS datoteke umetnemo unutar STYLE taga (takodjer unutar HEAD taga):
  83. <style type=text/css> ... </style>
  84. klasu definiramo pomocu tacke (npr. .napomena) a pozivamo je pomocu rijeci class unutar pojedinog taga:
  85. </p>
  86. <div class="clear"></div>
  87. </div>
  88. </body>
  89. </html>

zxz 02.02.2015 02:07
Predmet:Sat na stranici

Lijep sat na sa kalendarom sa flash-clocks.com
PreuzmiIzvorni kôd (HTML):
  3. <META NAME="generator" CONTENT="toniarts easyhtml v.2.4">
  4. <TITLE>Sat na vasoj stranici</TITLE>
  5. </HEAD>
  7.  <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>
  8. <div id="adsense" style="position: relative; padding-left: 3px; margin-bottom: -10px">
  9. </BODY>
  10. </HTML>