iCentar » Forum » Racunari i oprema » Programirannje i baze podataka » Html/CSS » arhiva

#1

22.02.2011 00:42

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

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.

Podrska 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

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:Skrol bar

Primjer skrol bara.

PreuzmiIzvorni kôd (HTML):

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

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#3

26.02.2011 00:25

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:Tekst preko slike

Primjer teksta upisanog preko slike.

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<META NAME="generator" CONTENT="toniarts easyhtml v.2.4">
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
<form action="form" method="post">
<textarea name="comments" id="comments" style="width:330px;height:221px; background:url('http://www.zivotinjsko-carstvo.com/divljina/slike/puma.jpg');">
<B>Neki tekst preko slike</B>
</textarea><br>
</form>
</BODY>
</HTML>

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#4

28.02.2011 22:46

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:Primjer sa tabelama

Primjer- tabela

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<META NAME="generator" CONTENT="tabela">
<TITLE>Tabela primjer</TITLE>
</HEAD>
<BODY>
<table width="400px" border="0">
<tr>
<td colspan="2" style="background-color:yellow;">
Header
</td>
</tr>
<tr>
<td style="background-color:orange;width:100px;text-align:top;">
Left menu<br />
Item 1<br />
Item 2<br />
Item 3...
</td>
<td style="background-color:#eeeeee;height:200px;width:300px;text-align:top;">
Main body
</td>
</tr>
<tr>
<td colspan="2" style="background-color:yellow;">
Footer
</td>
</tr>
</table>
</BODY>
</HTML>

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#5

09.03.2011 20:06

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:Ispisivanje linije

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<META NAME="generator" CONTENT="nnnn">
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
<hr width="50%" color= "#600060"/>
<hr width="90%" size="10" height="8" noshade="noshade" color= "#600060"/>
</BODY>
</HTML>

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#6

09.03.2011 20:28

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:List elementi dl dd i dt

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<META NAME="generator" CONTENT="nnnnnnnnn">
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
<dl>
<dt>Pasus</dt>
<dd>uvuceni tekst tekst sa pasusom<dl>
<dt>Pasus u pasusus</dt>
<dd>Uvuceni tekst u drugom pasusu</dd>
<dt>drugi pasus u pasusu</dt>
<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>
</dl>
</dd>
</dl>
</BODY>
</HTML>

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#7

23.05.2012 00:30

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

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):

<HTML>
<HEAD>
<TITLE>Title of your page</TITLE>
</HEAD>
<BODY>
<FORM METHOD="POST" ACTION="URL">
<input type="hidden"
name="recipient"
value="neka@emailadresa.com">
<p>PoÅ¡aljite nam svoje komentare!</p>
<textarea name="textfield" cols="50" rows="7">
</textarea>
<input type="submit"
name="Submit2"
value="PoÅ¡alji">
</FORM>
</BODY>
</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.

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#8

30.01.2015 20:04

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:Pravljenje menija

PreuzmiIzvorni kôd (HTML):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Navigation</title>
<style type="text/css" media="screen">
body { text-align:center; background:#a8cff0; font-size:90%; font-family:Verdana, Geneva, Arial, Helvetica, sans-serif; margin:0; padding:0; }
#page { width:50em; text-align:left; background:#FFF; border:4px solid #ecf3f9; margin:32px auto; padding:2em; }
h1 { font-family:"Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight:normal; margin:0 0 0.5em 0; }
.clear { clear:both; }
/*###################*/
/* Navigacija */
/*###################*/
#navi, #navi ul { list-style-type:none; margin:0; padding:0; } /* Style-Reset */
#navi li { width:128px; float:left; } /* Horizontale Anordnung */
#navi li ul { display:none; } /* Normalzustand eingeklappt */
#navi li:hover ul { display:block; } /* Ausgeklappt */
/*###################*/
/* Stil */
/*###################*/
#navcontainer { height:16px; position:relative; }
#navi { position:absolute; }
#navi li { border:1px solid #000; margin:0 32px 0 0; }
#navi ul li { border:none; margin:0; }
#navi a { font-weight:bold; text-align:center; display:block; padding:0.1em; }
#navi a:link, #navi a:visited { color:#FFF; background:#A8CFF0; text-decoration:underline; }
#navi a:active, #navi a:hover { color:#000; background:#FFF; text-decoration:none; }
</style>
<!--[if lte IE 6]>
<style type="text/css" media="screen">#navi { behavior:url("csshover.htc"); }</style>
<![endif]-->
</head>
<body>
<div id="page">
<h1>Navigacioni meni</h1>
<div id="navcontainer">
<ul id="navi">
<li><a href="ovdje link">Dobro doÅ¡li</a></li>
<li><a href="ovdje link">Neki naslov</a>
<ul>
<li><a href="ovdje link">Nesto</a></li>
<li><a href="ovdje link">nesto drugo</a></li>
<li><a href="ovdje link">Nesto</a></li>
</ul>
</li>
<li><a href="ovdje link">neki drugi naslov</a>
<ul>
<li><a href="ovdje link">nesto</a></li>
<li><a href="ovdje link">nesto</a></li>
<li><a href="ovdje link">nesto</a></li>
</ul>
</li>
<li><a href="ovdje link">Impressum</a></li>
</ul>
</div>
<div class="clear"></div>
<p>
CSS (cascading style sheets) nam omogucuje razdvajanje izgleda stranice od njenog sadrÅ¾aja:
<li>
informacije s web-stranica nalaze se u HTML datotekama
<li>
podaci o prikazu stranice nalaze se u CSS datotekama
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).
</p>
<p>
Postoje dva CSS standarda: CSS1 iz 1996. i CSS2 iz 1998 godine (sadrÅ¾i i sva CSS1 svojstva).
Tri su mogunosti koriÅ¡tenja CSS-a:
izrada tekstualne datoteke sa sufiksom .css u koju spremamo podatke o prikazu stranice
datoteke povezujemo sa stranicama na ciji izgled Å¾elimo da utjece sljedecim kodom unutar HEAD taga:
<link rel=stilsit type=text/css href=style.css >
CSS ima nasljedna svojstva (npr. td tag ce naslijediti svojstva body taga ukoliko kod njega ta svojstva nisu posebno definirana)
stil je moguce definirati i u samom kodu HTML stranice, tako da sadrÅ¾aj CSS datoteke umetnemo unutar STYLE taga (takodjer unutar HEAD taga):
<style type=text/css> ... </style>
klasu definiramo pomocu tacke (npr. .napomena) a pozivamo je pomocu rijeci class unutar pojedinog taga:
</p>
<div class="clear"></div>
</div>
</body>
</html>

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#9

30.01.2015 20:54

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:Stil primjer

PreuzmiIzvorni kôd (HTML):

<!DOCTYPE html>
<html>
<head>
<style>
.mojstil {
background-color:black;
color:white;
margin:20px;
padding:20px;
}
</style>
</head>
<body>
<div class="mojstil">
<h2>Gaza</h2>
<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>
<p>Slikar Hazim Zemmar u
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>
<p>Na montaÅ¾nim kuama tako slikaju razli
ite dezene, meu kojima su i leptiri koji djeci Gaze daju osjeaj slobode i nade, kazao je umjetnik.Dje
ak Ferah Kaddih (9) izrazio je Å¾elju da sa porodicom Å¾ivi u kui koja je dovoljno topla. </p>
<p>Mladi Gaze su kamenje u luci obojili duginim bojama. Na ovaj na
in, pojaÅ¡njava Ebu Dahi, mladi Palestinac, Å¾ele poslati poruku da "Palestinci Å¾ele Å¾ivjeti u miru i daleko od smrti".</p>
</p>Na kamenju su napisali i "Domovino, tebe smo birali"</p>
</div>
</body>
</html>

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

#10

02.02.2015 01:07

zxz

Administrator

Registrovan od:03.02.2009
Postovi:10,642

Predmet:Sat na stranici

Lijep sat na sa kalendarom sa flash-clocks.com

PreuzmiIzvorni kôd (HTML):

<HTML>
<HEAD>
<META NAME="generator" CONTENT="toniarts easyhtml v.2.4">
<TITLE>Sat na vasoj stranici</TITLE>
</HEAD>
<BODY>
<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>
<div id="adsense" style="position: relative; padding-left: 3px; margin-bottom: -10px">
</BODY>
</HTML>

Podrska samo putem foruma, jer samo tako i ostali imaju koristi od toga.

Stranice (2):1,2

Centar za edukaciju-BiH

Glavni meni

Forumi

Linkovi

iCentar → Racunari i oprema → Programirannje i baze podataka → Html/CSS → arhiva

Srodne teme

Ko je online?

Prijavi se

Izdvojeno