Strucna praksa

Visoka Poslovna škola strukovnih studija Blace

SEMINARSKI RAD

Predmet:Stručna praksa

Tema: Web sajt

Nastavnik: Student:

Vladica Ubavić Miloš Stojanović 50/10 r

Web sajt

Editovanje stila

Preuzeo sam besplatni template sa interneta i prilagodio sam boje i stil prema svom ukusu. Prilagodio sam uradio uz pomoć NotePad++ programa. Prepravio sam ove delove template-a.

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; background: #424131;}

body { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; background: #CDCDCD;}________________________________________#header { color: #C6C3C6; background: #636163; border-bottom: 1px solid #737573; padding: 27px 0; margin-bottom: 20px;}

#header { color: #C6C3C6; background: #3b5997; padding: 21px 31px; margin-bottom: 50px;}________________________________________#header a { color: #C6C3C6; text-decoration: none;}

#header a { color: #ffffff; text-decoration: none;}________________________________________#main { background: #fff; color: #848684; padding: 17px 19px; border: 2px solid #E7E3E7;}

2

Web sajt

#main { background: #ffffff; color: #848684; padding: 17px 19px; }________________________________________#content .pi-left { float: left; border-right: 3px solid #E7E3C6; padding-right: 10px; margin-right: 10px;}

#content .pi-left { float: left; border-right: 3px solid; padding-right: 10px; margin-right: 10px;}________________________________________#sidebar a { color: #848684; text-decoration: none;}

#sidebar a {text-decoration: none;}________________________________________#footer { background: #4A4942; color: #848684; padding: 21px 31px; margin-top: 50px;}

#footer { background: #3b5997; color: #ffffff; padding: 21px 31px; margin-top: 50px;}________________________________________

Ovo su delovi style koje sam zamenio da bi dobio željeni stil. Sada prelazim na kreiranje stranica koje moj sajt sadrži.

3

Web sajt

1.0 Kreiranje jedinstvene stranice

Pošto tempalte sadrži već gotove stranice u sebi ja sam odlučio da jednu prilagodim svom ukusu i da se na osnovu te jedne sledeće razlikuju samo po sadržini.

Head

<!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"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Miloš Stojanović | Rad</title><link rel="stylesheet" type="text/css" href="Style/style.css" /><meta http-equiv="content-type" content="text/html;charset=iso-8859-1"></head>

Header

<div id="header"><div class="wrap"> <h1><a href="Biografija.html">Moj Web sajt</a></h1>

<ul><li class="first"><a href="#"><u>Biografija</u></a></li><li><a href="Galerija.html">Galerija</a></li><li><a href="Rad.html">Rad</a></li><li><a href="Kontakt.html">Kontakt</a></li></ul>

<div class="clear"></div>

</div> </div>

Main

Svaka stranica ima svoj main. Neka od njih sadrži tekst, neka slike a neka kontakt podatke.

Sidebar

Sidebar je isti na svim stranicama i sadrži kalendar, brojač poseta i info deo.

HTML kod kalendara:

<h2>Kalendar</h2><table border='1' bordercolor='#3b5997' cellspacing='0' cellpadding='0' align=center ><tr><td><table cellspacing='0' cellpadding='0' align=center border='1' width='200'><td align=center bgcolor='#3b5997'> </td><td colspan=5 align=center bgcolor='#3b5997'><font size='3' face='Tahoma' color='White'>Jun 2012 </td><td align=center bgcolor='#3b5997'>

4

Web sajt

</td></tr><tr><td><font size='3' face='Tahoma'><b>Ned</b></font></td><td><font size='3' face='Tahoma'><b>Pon</b></font></td><td><font size='3' face='Tahoma'><b>Uto</b></font></td><td><font size='3' face='Tahoma'><b>Sre</b></font></td><td><font size='3' face='Tahoma'><b>Čet</b></font></td><td><font size='3' face='Tahoma'><b>Pet</b></font></td><td><font size='3' face='Tahoma'><b>Sub</b></font></td></tr><tr><td> </td><td> </td><td> </td><td> </td><td> </td><td valign=top><font size='2' face='Tahoma'>1 <br> </font></td><td valign=top><font size='2' face='Tahoma'>2 <br> </font></td></tr><tr><td valign=top><font size='2' face='Tahoma'>3 <br> </font></td><td valign=top><font size='2' face='Tahoma'>4 <br> </font></td><td valign=top><font size='2' face='Tahoma'>5 <br> </font></td><td valign=top><font size='2' face='Tahoma'>6 <br> </font></td><td valign=top><font size='2' face='Tahoma'>7 <br> </font></td><td valign=top><font size='2' face='Tahoma'>8 <br> </font></td><td valign=top><font size='2' face='Tahoma'>9 <br> </font></td></tr><tr><td valign=top><font size='2' face='Tahoma'>10 <br> </font></td><td valign=top><font size='2' face='Tahoma'>11 <br> </font></td><td valign=top><font size='2' face='Tahoma'>12 <br> </font></td><td valign=top><font size='2' face='Tahoma'>13 <br> </font></td><td valign=top><font size='2' face='Tahoma'>14 <br> </font></td><td valign=top><font size='2' face='Tahoma'>15 <br> </font></td><td valign=top><font size='2' face='Tahoma'>16 <br> </font></td></tr><tr><td valign=top><font size='2' face='Tahoma'>17 <br> </font></td><td valign=top><font size='2' face='Tahoma'>18 <br> </font></td><td valign=top><font size='2' face='Tahoma'>19 <br> </font></td><td valign=top><font size='2' face='Tahoma'>20 <br> </font></td><td valign=top><font size='2' face='Tahoma'>21 <br> </font></td><td valign=top><font size='2' face='Tahoma'>22

5

Web sajt

<br> </font></td><td valign=top><font size='2' face='Tahoma'>23 <br> </font></td></tr><tr><td valign=top><font size='2' face='Tahoma'>24 <br> </font></td><td valign=top><font size='2' face='Tahoma'>25 <br> </font></td><td valign=top><font size='2' face='Tahoma'>26 <br> </font></td><td valign=top><font size='2' face='Tahoma'>27 <br> </font></td><td valign=top><font size='2' face='Tahoma'>28 <br> </font></td><td valign=top><font size='2' face='Tahoma'>29 <br> </font></td><td valign=top><font size='2' face='Tahoma'>30 <br> </font></td></tr><tr></tr></table></td></tr></table>

</div>

Java script kod brojača poseta:

<div class="sidebar-item"><h2>Brojač poseta</h2><a href="http://www.hitwebcounter.com/" target="_blank"><img src="http://hitwebcounter.com/counter/counter.php?page=4447153&style=0006&nbdigits=5&type=page&initCount=0" title="counter for free" Alt="counter for free" border="0" ></a><br><a href="http://www.hitwebcounter.com/freecounterfeatures.php" title="Counter Stats" target="_blank" style="font-family: Arial, Geneva , Helvetica, sans-serif; text-decoration: underline ; color: #6A6964; font-size: 12px;"><em></em></a> </div>

Java scrit kod info dela:

<div class="sidebar-item"><h2>Info</h2> <script type="text/javascript" src="http://100widgets.com/js_data.php?id=149"></script>

</div>

Footer

6

Web sajt

<div id="footer"> <p>© Sva prava zadržana | Miloš Stojanović</p>

</div>

2.0 Dodavanje sadržaja stranicama

Primer dodavanja teksta sa linkovima.

<p>Zovem se Miloš Stojanović. Rođen sam u Kruševcu. Žvim u selu Bošnjane koje se nalazi u opštini Varvarin. Udaljeno je 15 km od Kruševca. U Bošnjanu sam završio osnovnu školu. Nakon osnovne pohađao i završio sam Mašinsko-Elektrotehničku školu u Kruševcu smer tehničar za kompjutersko upravljanje. </p>

<p>Studiram na Visokoj poslovnoj školi strukovnih studija u Blacu. Student sam druge godine smera računarstvo i informatika. Posebno se interesujem za web, operativne sisteme, mreže i baze podataka.</p>

<p>U slobodno vreme održavam računare. Radim reinstalaciju operativnih sistema, instaliram aplikativni softver, back-up podataka i još mnogo toga što ima veze sa održavanjem računara. </p>

<p>Administrator sam foruma <a href="http://www.vpsblace.org">VPS Blace</a>. Pored foruma vodim i uređujem svoj lični <a href="http://www.msproduction007.wordpress.com">blog</a> koji sam posvetio dešavanjima u IT svetu.</p>

Primer kontakt stranice:

<h2><a href="Kontakt.html">Kontakt</a></h2><h4><p>Možete me kontaktirati preko e-mail:</p></h4><p><a href="[email protected]">E-mail za kontakt</a></p><h4><p>Pronađite me na socijalnim mrežama:</p></h4><p><a href="http://facebook.com/msproduction007/">Facebook nalog</a></p><p><a href="https://twitter.com/#!/MrMilos1991/">Twitter</a></p><p><a href="https://plus.google.com/u/0/101336367987923766157/">Google+</a></p>

Primer dodavanja slika:

<b><center><a href="Slike/1.jpg" target="blank">Slika 1</a></center></b> <center> <img

src="Slike/1.jpg" alt="class"height="100"vspace="40"hspace="40"

</center>Literatura

7

Web sajt

Baza HTML kodova:W3Schools Online Web Tutorials www.w3schools.com

8

http://www.w3schools.com/

Documents

Strucna praksa