Centar za edukaciju-BiH


switch Lista naslova: Korisni primjeri

#1 22.02.2011 00:42
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


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.
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
Ovaj post je ureden 4 puta. Posljednja izmjena 12.10.2021 12:28 od strane zxz. ↑  ↓

#2 26.02.2011 00:10
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


Predmet:Skrol bar
Primjer skrol bara.
PreuzmiIzvorni kôd (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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#3 26.02.2011 00:25
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


Predmet:Tekst preko slike
Primjer teksta upisanog preko slike.
PreuzmiIzvorni kôd (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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#4 28.02.2011 22:46
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


Predmet:Primjer sa tabelama
Primjer- tabela
PreuzmiIzvorni kôd (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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#5 09.03.2011 20:06
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


Predmet:Ispisivanje linije
PreuzmiIzvorni kôd (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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#6 09.03.2011 20:28
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


Predmet:List elementi dl dd i dt
PreuzmiIzvorni kôd (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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#7 23.05.2012 00:30
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


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):
  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.
Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#8 30.01.2015 20:04
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


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; }
  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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#9 30.01.2015 20:54
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


Predmet:Stil primjer
PreuzmiIzvorni kôd (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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

#10 02.02.2015 01:07
zxz Van mreze
Administrator
Registrovan od:03.02.2009
Postovi:10,611


Predmet:Sat na stranici
Lijep sat na sa kalendarom sa flash-clocks.com
PreuzmiIzvorni kôd (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>

Podrška samo putem foruma, jer samo tako i ostali imaju koristi od toga.
↑  ↓

Stranice (2):1,2


Sva vremena su GMT +01:00. Trenutno vrijeme: 2: 16 pm.